Updated: Checkbox component and its default variant code.

StaticMania · Dec 20, 2024 · 5c400ad · 5c400ad
1 parent 214f49f
commit 5c400ad
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 39 deletions.
diff --git a/components/content/docs/components/checkbox/CheckboxApi.vue b/components/content/docs/components/checkbox/CheckboxApi.vue
@@ -11,9 +11,9 @@ const CheckBoxApiData = [
   },
   {
     id: 3,
-    propsName: "checked",
-    propsType: "v-model",
-    propsDescription: "Checked state of the checkbox",
+    propsName: "default-checked",
+    propsType: "boolean",
+    propsDescription: "Default Checked state of the checkbox",
   },
 ];
 </script>

diff --git a/components/content/docs/components/checkbox/DefaultCheckbox.vue b/components/content/docs/components/checkbox/DefaultCheckbox.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
-import { ref } from "vue";
 import CodeHighlightWithPreview from "~/components/content/CodeHighlightWithPreview.vue";
 import { Checkbox, Label } from "~/src";
 import { defaultCheckboxCode } from "./checkboxCode";
-
-const statusOne = ref(true);
-const statusTwo = ref(false);
 </script>
 <template>
   <CodeHighlightWithPreview :code="defaultCheckboxCode">
@@ -15,17 +11,11 @@ const statusTwo = ref(false);
           Keep Design System License
         </p>
         <fieldset class="flex items-center gap-2">
-          <Checkbox
-            id="single"
-            :checked="statusOne"
-            @update:checked="(value) => (statusOne = value)" />
+          <Checkbox id="single" default-checked />
           <Label for="single">Single License</Label>
         </fieldset>
         <fieldset class="flex items-center gap-2">
-          <Checkbox
-            id="team"
-            :checked="statusTwo"
-            @update:checked="(value) => (statusTwo = value)" />
+          <Checkbox id="team" />
           <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
@@ -1,33 +1,24 @@
 const defaultCheckboxCode = {
   "CheckboxComponent.vue": `<script setup>
 import { Checkbox, Label } from 'keep-vue'
-import { ref } from 'vue'
-
-const statusOne = ref(true);
-const statusTwo = ref(false);
-console.log(statusOne.value, statusTwo.value)
 </script>
 
 <template>
-  <div class="space-y-3 p-3">
+  <div class="flex items-center justify-center">
+      <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"
-            :checked="statusOne"
-            @update:checked="(value) => (statusOne = value)" />
+          <Checkbox id="single" default-checked />
           <Label for="single">Single License</Label>
         </fieldset>
         <fieldset class="flex items-center gap-2">
-          <Checkbox
-            id="team"
-            :checked="statusTwo"
-            @update:checked="(value) => (statusTwo = value)" />
+          <Checkbox id="team" />
           <Label for="team">Team License</Label>
         </fieldset>
       </div>
+    </div>
 </template>`,
 };
 

diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
@@ -2,6 +2,8 @@
 import {
   CheckboxIndicator,
   CheckboxRoot,
+  useForwardPropsEmits,
+  type CheckboxRootEmits,
   type CheckboxRootProps,
 } from "radix-vue";
 import { computed } from "vue";
@@ -20,25 +22,21 @@ const props = withDefaults(
     class: "",
     iconClass: "",
     variant: "default",
-    checked: false,
   },
 );
 
-// Define emits
-const emit = defineEmits<{
-  "update:checked": [value: boolean];
-}>();
+const emits = defineEmits<CheckboxRootEmits>();
 
 const restProps = computed(() => {
-  const { class: _, iconClass, checked, variant, ...rest } = props;
+  const { class: _, iconClass, variant, ...rest } = props;
   return rest;
 });
+const forwarded = useForwardPropsEmits(restProps, emits);
 </script>
 
 <template>
   <CheckboxRoot
-    v-bind="restProps"
-    :checked="checked"
+    v-bind="forwarded"
     :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',
@@ -52,8 +50,7 @@ const restProps = computed(() => {
           'rounded data-[state=checked]:before:rounded-sm',
         props.class,
       )
-    "
-    @update:checked="(value) => emit('update:checked', value)">
+    ">
     <!-- indicator -->
     <CheckboxIndicator
       v-if="props.variant === 'default'"