Updated: Checkbox component, its variants and api.

StaticMania · Dec 18, 2024 · e05f9e7 · e05f9e7
1 parent d8bc7bb
commit e05f9e7
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 58 deletions.
diff --git a/components/content/docs/components/checkbox/CheckboxApi.vue b/components/content/docs/components/checkbox/CheckboxApi.vue
@@ -9,13 +9,6 @@ const CheckBoxApiData = [
     propsDescription: "Checkbox Variant",
     default: "default",
   },
-  {
-    id: 2,
-    propsName: "default-checked",
-    propsType: "boolean",
-    propsDescription: "Checked state of the checkbox",
-    default: "false",
-  },
   {
     id: 3,
     propsName: "checked",

diff --git a/components/content/docs/components/checkbox/CheckboxVariant.vue b/components/content/docs/components/checkbox/CheckboxVariant.vue
@@ -2,7 +2,7 @@
 import { Checkbox, Label } from "~/src";
 import { CheckboxVariantCode } from "./checkboxCode";
 const statusOne = ref(false);
-const statusTwo = ref(false);
+const statusTwo = ref(true);
 const statusThree = ref(false);
 </script>
 <template>
@@ -13,22 +13,26 @@ const statusThree = ref(false);
           Checkbox Variant
         </p>
         <fieldset class="flex items-center gap-2">
-          <Checkbox id="default" v-model:checked="statusOne" />
+          <Checkbox
+            id="default"
+            :checked="statusOne"
+            @update:checked="(value) => (statusOne = value)" />
           <Label for="default">Default</Label>
         </fieldset>
         <fieldset class="flex items-center gap-2">
           <Checkbox
             id="rounded"
-            v-model:checked="statusTwo"
+            :checked="statusTwo"
             variant="rounded"
-            default-checked />
+            @update:checked="(value) => (statusTwo = value)" />
           <Label for="rounded">Rounded</Label>
         </fieldset>
         <fieldset class="flex items-center gap-2">
           <Checkbox
             id="circle"
-            v-model:checked="statusThree"
-            variant="circle" />
+            :checked="statusThree"
+            variant="circle"
+            @update:checked="(value) => (statusThree = value)" />
           <Label for="circle">Circle</Label>
         </fieldset>
       </div>

diff --git a/components/content/docs/components/checkbox/DefaultCheckbox.vue b/components/content/docs/components/checkbox/DefaultCheckbox.vue
@@ -4,7 +4,7 @@ import CodeHighlightWithPreview from "~/components/content/CodeHighlightWithPrev
 import { Checkbox, Label } from "~/src";
 import { defaultCheckboxCode } from "./checkboxCode";
 
-const statusOne = ref(false);
+const statusOne = ref(true);
 const statusTwo = ref(false);
 </script>
 <template>
@@ -14,14 +14,18 @@ const statusTwo = ref(false);
         <p class="text-body-3 font-normal dark:text-metal-300">
           Keep Design System License
         </p>
-
         <fieldset class="flex items-center gap-2">
-          <Checkbox id="single" v-model:checked="statusOne" default-checked />
+          <Checkbox
+            id="single"
+            :checked="statusOne"
+            @update:checked="(value) => (statusOne = value)" />
           <Label for="single">Single License</Label>
         </fieldset>
-
         <fieldset class="flex items-center gap-2">
-          <Checkbox id="team" v-model:checked="statusTwo" />
+          <Checkbox
+            id="team"
+            :checked="statusTwo"
+            @update:checked="(value) => (statusTwo = value)" />
           <Label for="team">Team License</Label>
         </fieldset>
       </div>

diff --git a/components/content/docs/components/checkbox/checkboxCode.ts b/components/content/docs/components/checkbox/checkboxCode.ts
@@ -3,57 +3,75 @@ const defaultCheckboxCode = {
 import { Checkbox, Label } from 'keep-vue'
 import { ref } from 'vue'
 
-const statusOne = ref(false)
-const statusTwo = ref(false)
+const statusOne = ref(true);
+const statusTwo = ref(false);
 console.log(statusOne.value, statusTwo.value)
 </script>
 
 <template>
   <div class="space-y-3 p-3">
-    <p class="text-body-3 font-normal dark:text-metal-300">Keep Design System License</p>
-    <fieldset class="flex items-center gap-2">
-      <Checkbox id="single" v-model:checked="statusOne" default-checked />
-      <Label for="single">Single License</Label>
-    </fieldset>
-    <fieldset class="flex items-center gap-2">
-      <Checkbox id="team" v-model:checked="statusTwo" />
-      <Label for="team">Team License</Label>
-    </fieldset>
-  </div>
+        <p class="text-body-3 font-normal dark:text-metal-300">
+          Keep Design System License
+        </p>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="single"
+            :checked="statusOne"
+            @update:checked="(value) => (statusOne = value)" />
+          <Label for="single">Single License</Label>
+        </fieldset>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="team"
+            :checked="statusTwo"
+            @update:checked="(value) => (statusTwo = value)" />
+          <Label for="team">Team License</Label>
+        </fieldset>
+      </div>
 </template>`,
 };
 
 const CheckboxVariantCode = {
   "CheckboxComponent.vue": `<script setup>
 import { Checkbox, Label } from "keep-vue";
+
 const statusOne = ref(false);
-const statusTwo = ref(false);
+const statusTwo = ref(true);
 const statusThree = ref(false);
 
 console.log(statusOne.value, statusTwo.value, statusThree.value);
 
 </script>
 
 <template>
-  <div class="space-y-3 p-3">
-    <p class="text-body-3 font-normal dark:text-metal-300">Checkbox Variant</p>
-    <fieldset class="flex items-center gap-2">
-      <Checkbox id="default" v-model:checked="statusOne" />
-      <Label for="default">Default</Label>
-    </fieldset>
-    <fieldset class="flex items-center gap-2">
-      <Checkbox
-        id="rounded"
-        v-model:checked="statusTwo"
-        variant="rounded"
-        default-checked />
-      <Label for="rounded">Rounded</Label>
-    </fieldset>
-    <fieldset class="flex items-center gap-2">
-      <Checkbox id="circle" v-model:checked="statusThree" variant="circle" />
-      <Label for="circle">Circle</Label>
-    </fieldset>
-  </div>
+ <div class="space-y-3 p-3">
+        <p class="text-body-3 font-normal dark:text-metal-300">
+          Checkbox Variant
+        </p>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="default"
+            :checked="statusOne"
+            @update:checked="(value) => (statusOne = value)" />
+          <Label for="default">Default</Label>
+        </fieldset>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="rounded"
+            :checked="statusTwo"
+            variant="rounded"
+            @update:checked="(value) => (statusTwo = value)" />
+          <Label for="rounded">Rounded</Label>
+        </fieldset>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="circle"
+            :checked="statusThree"
+            variant="circle"
+            @update:checked="(value) => (statusThree = value)" />
+          <Label for="circle">Circle</Label>
+        </fieldset>
+      </div>
 </template>
 `,
 };

diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
@@ -1,5 +1,9 @@
 <script lang="ts" setup>
-import { CheckboxIndicator, CheckboxRoot } from "radix-vue";
+import {
+  CheckboxIndicator,
+  CheckboxRoot,
+  type CheckboxRootProps,
+} from "radix-vue";
 import { computed } from "vue";
 import { cn } from "../../utils/cn";
 import type { ClassProps } from "../../utils/interface";
@@ -10,21 +14,31 @@ export interface CheckboxProps {
   variant?: "rounded" | "circle" | "default";
 }
 
-const props = withDefaults(defineProps<CheckboxProps & ClassProps>(), {
-  class: "",
-  iconClass: "",
-  variant: "default",
-});
+const props = withDefaults(
+  defineProps<CheckboxProps & ClassProps & CheckboxRootProps>(),
+  {
+    class: "",
+    iconClass: "",
+    variant: "default",
+    checked: false,
+  },
+);
+
+// Define emits
+const emit = defineEmits<{
+  "update:checked": [value: boolean];
+}>();
 
 const restProps = computed(() => {
-  const { class: _, iconClass, variant, ...rest } = props;
+  const { class: _, iconClass, checked, variant, ...rest } = props;
   return rest;
 });
 </script>
 
 <template>
   <CheckboxRoot
     v-bind="restProps"
+    :checked="checked"
     :class="
       cn(
         'peer relative h-4 w-4 shrink-0 border border-metal-200 ring-offset-primary-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-100 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary-500 data-[state=checked]:text-primary-500 dark:border-metal-100 dark:ring-offset-primary-500 dark:focus-visible:ring-primary-500 dark:data-[state=checked]:text-primary-500',
@@ -36,8 +50,11 @@ const restProps = computed(() => {
           'rounded-full data-[state=checked]:before:rounded-full',
         props.variant !== 'circle' &&
           'rounded data-[state=checked]:before:rounded-sm',
+        props.class,
       )
-    ">
+    "
+    @update:checked="(value) => emit('update:checked', value)">
+    <!-- indicator -->
     <CheckboxIndicator
       v-if="props.variant === 'default'"
       :class="