fix(checkbox): fix disabled and checked state

Signed-off-by: Zakaria Sahmane <[email protected]>

Author: Shyrro

packages/c-checkbox/examples/disabled-checkbox.vue

@@ -0,0 +1,8 @@
+<template>
+  <c-checkbox is-disabled> Disabled checkbox </c-checkbox>
+  <c-checkbox is-disabled default-checked> Disabled checked checkbox </c-checkbox>
+</template>
+
+<script lang="ts" setup>
+import { CCheckbox } from "../src"
+</script>

packages/c-checkbox/src/checkbox.tsx

@@ -13,39 +13,29 @@ import {
   defineComponent,
   PropType,
   computed,
-  toRefs,
-  reactive,
-  ref,
   onMounted,
   Fragment,
   cloneVNode,
   watch,
 } from "vue"
-import {
-  chakra,
-  useMultiStyleConfig,
-} from "@chakra-ui/vue-system"
+import { chakra, useMultiStyleConfig } from "@chakra-ui/vue-system"
 import {
   omitThemingProps,
   SystemStyleObject,
   ThemingProps,
-  SystemProps
+  SystemProps,
 } from "@chakra-ui/styled-system"
-import { SNAO, vueThemingProps, getValidChildren, } from "@chakra-ui/vue-utils"
-import {
-  ComponentWithProps,
-  HTMLChakraProps,
-} from "@chakra-ui/vue-system"
+import { SNAO, vueThemingProps, getValidChildren } from "@chakra-ui/vue-utils"
+import { HTMLChakraProps } from "@chakra-ui/vue-system"
 import * as checkbox from "@zag-js/checkbox"
 import { normalizeProps, useMachine, mergeProps } from "@zag-js/vue"
-import { useIds } from "@chakra-ui/vue-composables"
+import { useId, useIds } from "@chakra-ui/vue-composables"
 import { filterUndefined, mergeWith, pick } from "@chakra-ui/utils"
 import {
   CFormControlProviderContext,
   useFormControlContext,
 } from "@chakra-ui/c-form-control"
 import { CheckboxIcon } from "./checkbox-icon"
-import { genId } from "@chakra-ui/vue-utils"
 import { CheckboxGroupContext, useCheckboxGroupContext } from "./checkbox-group"
 
 /**
@@ -119,8 +109,8 @@ export interface CCheckboxControlProps {
 
 export interface CCheckboxProps
   extends HTMLChakraProps<"input">,
-  ThemingProps<"Checkbox">,
-  CCheckboxControlProps {
+    ThemingProps<"Checkbox">,
+    CCheckboxControlProps {
   /**
    * The spacing between the checkbox and its label text
    * @default 0.5rem
@@ -189,7 +179,7 @@ export const CCheckbox = defineComponent({
       mergedProps as CFormControlProviderContext
     )
 
-    const id = genId()
+    const id = props.id || useId().value
     const [rootId, inputId, controlId, labelId] = useIds(
       `chakra-checkbox-${id}`,
       "root",
@@ -231,7 +221,7 @@ export const CCheckbox = defineComponent({
     })
 
     const context = computed<checkbox.Context>(() => ({
-      id: id,
+      id,
       ids: {
         root: rootId.value,
         input: inputId.value,
@@ -243,12 +233,7 @@ export const CCheckbox = defineComponent({
 
     const [state, send] = useMachine(
       // @ts-ignore
-      checkbox.machine({
-        id: "chakra-ui-checkbox-machine",
-      }),
-      {
-        context,
-      }
+      checkbox.machine({ id, ...context.value })
     )
 
     const api = computed(() =>
@@ -298,6 +283,16 @@ export const CCheckbox = defineComponent({
         }
       }
     )
+
+    watch(
+      () => props.isIndeterminate,
+      (value) => {
+        if (api.value && !api.value.isReadOnly) {
+          api.value.setIndeterminate(value!)
+        }
+      }
+    )
+
     watch(
       () => props.modelValue,
       (value) => {

packages/c-checkbox/tests/__snapshots__/c-checkbox.test.ts.snap

@@ -9,17 +9,17 @@ exports[`should render properly 1`] = `
       class="chakra-checkbox chakra-1tw369l"
       data-part="root"
       data-scope="checkbox"
-      for="input-chakra-checkbox-EMPTY_STRING"
-      id="root-chakra-checkbox-EMPTY_STRING"
+      for="input-chakra-checkbox-1"
+      id="root-chakra-checkbox-1"
     >
       <input
         aria-invalid="false"
-        aria-labelledby="checkbox:EMPTY_STRING:label"
+        aria-labelledby="checkbox:1:label"
         class="chakra-checkbox__input"
         data-part="input"
         data-scope="checkbox"
         defaultchecked="false"
-        id="input-chakra-checkbox-EMPTY_STRING"
+        id="input-chakra-checkbox-1"
         style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; word-wrap: normal;"
         type="checkbox"
       />
@@ -28,7 +28,7 @@ exports[`should render properly 1`] = `
         class="chakra-checkbox__control chakra-drpdfl"
         data-part="control"
         data-scope="checkbox"
-        id="control-chakra-checkbox-EMPTY_STRING"
+        id="control-chakra-checkbox-1"
       >
         <svg
           class="chakra-1mg6af5"