From 5c400ad4946e7afef61651601ed64df468309a91 Mon Sep 17 00:00:00 2001
From: moshiur01 <mr.moshiur314@gmail.com>
Date: Fri, 20 Dec 2024 20:29:54 +0600
Subject: [PATCH] Updated: Checkbox component and its default variant code.

---
 .../docs/components/checkbox/CheckboxApi.vue  |  6 +++---
 .../components/checkbox/DefaultCheckbox.vue   | 14 ++------------
 .../docs/components/checkbox/checkboxCode.ts  | 19 +++++--------------
 src/components/Checkbox/Checkbox.vue          | 17 +++++++----------
 4 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/components/content/docs/components/checkbox/CheckboxApi.vue b/components/content/docs/components/checkbox/CheckboxApi.vue
index c6e7fc1a..21dcc616 100644
--- 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
index ea6ecae4..61065e5e 100644
--- 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
index 8fa02906..2a7779f7 100644
--- 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
index b0a8f87e..f569eee2 100644
--- 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'"