FaCheckbox 支持半选状态

Author: hooray

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>

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>

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>