From 60bb408ccc8b8edf5da44a4c1f98b6c30207369f Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Fri, 5 Sep 2025 16:15:13 +0800
Subject: [PATCH] =?UTF-8?q?`FaCheckbox`=20=E6=94=AF=E6=8C=81=E5=8D=8A?=
 =?UTF-8?q?=E9=80=89=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/components/FaCheckbox/checkbox/Checkbox.vue |  7 ++++---
 src/ui/components/FaCheckbox/index.vue             | 12 ++++++++----
 src/views/component_built_in_example/checkbox.vue  |  6 ++++++
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/ui/components/FaCheckbox/checkbox/Checkbox.vue b/src/ui/components/FaCheckbox/checkbox/Checkbox.vue
index 619e2600..fca8de68 100644
--- a/src/ui/components/FaCheckbox/checkbox/Checkbox.vue
+++ b/src/ui/components/FaCheckbox/checkbox/Checkbox.vue
@@ -2,7 +2,7 @@
 import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
-import { Check } from 'lucide-vue-next'
+import { Check, Minus } from 'lucide-vue-next'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { cn } from '@/utils'
 
@@ -17,11 +17,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <CheckboxRoot
     v-bind="forwarded"
-    :class="cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', props.class)"
+    :class="cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary bg-transparent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground', props.class)"
   >
     <CheckboxIndicator class="h-full w-full flex items-center justify-center text-current">
       <slot>
-        <Check class="h-4 w-4" />
+        <Minus v-if="props.modelValue === 'indeterminate'" class="h-4 w-4" />
+        <Check v-if="props.modelValue === true" class="h-4 w-4" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>
diff --git a/src/ui/components/FaCheckbox/index.vue b/src/ui/components/FaCheckbox/index.vue
index 1955fcc8..34edba04 100644
--- a/src/ui/components/FaCheckbox/index.vue
+++ b/src/ui/components/FaCheckbox/index.vue
@@ -1,23 +1,27 @@
 <script setup lang="ts">
+import type { CheckboxRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
 import { Checkbox } from './checkbox'
 
 defineOptions({
   name: 'FaCheckbox',
 })
 
-defineProps<{
+const props = defineProps<{
   disabled?: boolean
+  class?: HTMLAttributes['class']
 }>()
 
-const value = defineModel<boolean>()
+const value = defineModel<CheckboxRootProps['modelValue']>()
 
 const id = useId()
 </script>
 
 <template>
-  <div class="flex-center-start gap-2">
+  <div :class="cn('flex-center-start gap-2', props.class)">
     <Checkbox :id v-model="value" :disabled />
-    <label :for="id" class="cursor-pointer text-sm">
+    <label :for="id" class="cursor-pointer text-sm empty:hidden">
       <slot />
     </label>
   </div>
diff --git a/src/views/component_built_in_example/checkbox.vue b/src/views/component_built_in_example/checkbox.vue
index d49cbfc0..f2f804bc 100644
--- a/src/views/component_built_in_example/checkbox.vue
+++ b/src/views/component_built_in_example/checkbox.vue
@@ -5,6 +5,7 @@ meta:
 
 <script setup lang="ts">
 const checked = ref(false)
+const checked2 = ref<'indeterminate' | boolean>('indeterminate')
 </script>
 
 <template>
@@ -18,5 +19,10 @@ const checked = ref(false)
         {{ checked }}
       </div>
     </FaPageMain>
+    <FaPageMain title="半选状态">
+      <FaCheckbox v-model="checked2">
+        复选框
+      </FaCheckbox>
+    </FaPageMain>
   </div>
 </template>