Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-03-29 11:56:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

implement fixes for review

Browse Source
This commit is contained in:
Kavin
2026-03-27 20:06:35 +05:30
parent 75201a8083
commit 1e9c5dff5d
10 changed files with 63 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/ui/Checkbox.vue
View File

@@ -1,25 +1,7 @@
<template>
<CheckboxRoot
v-if="hasModelValue"
:id="id"
:model-value="modelValue"
:value="value"
:disabled="disabled"
:class="[
'inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-gray-500 bg-gray-300 text-white outline-none focus:shadow-red-400 focus:outline-2 focus:outline-red-500 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-red-500 data-[state=checked]:bg-red-500 dark:border-gray-400 dark:bg-dark-400 dark:data-[state=checked]:border-red-400 dark:data-[state=checked]:bg-red-400',
customClass,
]"
@update:model-value="handleUpdate"
>
<CheckboxIndicator class="inline-flex items-center justify-center text-current">
<i-fa6-solid-check class="size-3" />
</CheckboxIndicator>
</CheckboxRoot>
<CheckboxRoot
v-else
:id="id"
:value="value"
:disabled="disabled"
:class="[
'inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-gray-500 bg-gray-300 text-white outline-none focus:shadow-red-400 focus:outline-2 focus:outline-red-500 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-red-500 data-[state=checked]:bg-red-500 dark:border-gray-400 dark:bg-dark-400 dark:data-[state=checked]:border-red-400 dark:data-[state=checked]:bg-red-400',
@@ -34,25 +16,20 @@
</template>
<script setup>
import { computed } from "vue";
import { CheckboxRoot, CheckboxIndicator } from "reka-ui";
defineOptions({
name: "UiCheckbox",
});
const props = defineProps({
defineProps({
id: {
type: String,
default: undefined,
},
modelValue: {
type: [Boolean, String, Number, Array],
default: undefined,
},
value: {
type: [Boolean, String, Number],
default: true,
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
@@ -66,10 +43,9 @@ const props = defineProps({
const emit = defineEmits(["update:modelValue", "change"]);
const hasModelValue = computed(() => props.modelValue !== undefined);
function handleUpdate(value) {
emit("update:modelValue", value);
emit("change", value);
const nextValue = value === true;
emit("update:modelValue", nextValue);
emit("change", nextValue);
}
</script>