|
|
@ -5,16 +5,19 @@ import type { HTMLAttributes } from 'vue'; |
|
|
|
|
|
|
|
|
import { cn } from '@vben-core/shared/utils'; |
|
|
import { cn } from '@vben-core/shared/utils'; |
|
|
|
|
|
|
|
|
import { Check } from '@lucide/vue'; |
|
|
import { Check, Minus } from '@lucide/vue'; |
|
|
import { reactiveOmit } from '@vueuse/core'; |
|
|
import { reactiveOmit } from '@vueuse/core'; |
|
|
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'; |
|
|
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'; |
|
|
|
|
|
|
|
|
const props = defineProps< |
|
|
const props = defineProps< |
|
|
CheckboxRootProps & { class?: HTMLAttributes['class'] } |
|
|
CheckboxRootProps & { |
|
|
|
|
|
class?: HTMLAttributes['class']; |
|
|
|
|
|
indeterminate?: boolean; |
|
|
|
|
|
} |
|
|
>(); |
|
|
>(); |
|
|
const emits = defineEmits<CheckboxRootEmits>(); |
|
|
const emits = defineEmits<CheckboxRootEmits>(); |
|
|
|
|
|
|
|
|
const delegatedProps = reactiveOmit(props, 'class'); |
|
|
const delegatedProps = reactiveOmit(props, 'class', 'indeterminate'); |
|
|
|
|
|
|
|
|
const forwarded = useForwardPropsEmits(delegatedProps, emits); |
|
|
const forwarded = useForwardPropsEmits(delegatedProps, emits); |
|
|
</script> |
|
|
</script> |
|
|
@ -27,6 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits); |
|
|
:class=" |
|
|
:class=" |
|
|
cn( |
|
|
cn( |
|
|
'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', |
|
|
'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', |
|
|
|
|
|
indeterminate && 'bg-primary text-primary-foreground border-primary', |
|
|
props.class, |
|
|
props.class, |
|
|
) |
|
|
) |
|
|
" |
|
|
" |
|
|
@ -34,9 +38,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits); |
|
|
<CheckboxIndicator |
|
|
<CheckboxIndicator |
|
|
data-slot="checkbox-indicator" |
|
|
data-slot="checkbox-indicator" |
|
|
class="grid place-content-center text-current transition-none" |
|
|
class="grid place-content-center text-current transition-none" |
|
|
|
|
|
:force-mount="indeterminate ? true : undefined" |
|
|
> |
|
|
> |
|
|
<slot v-bind="slotProps"> |
|
|
<slot v-bind="slotProps"> |
|
|
<Check class="size-3.5" /> |
|
|
<Minus v-if="indeterminate" class="size-3.5" /> |
|
|
|
|
|
<Check v-else class="size-3.5" /> |
|
|
</slot> |
|
|
</slot> |
|
|
</CheckboxIndicator> |
|
|
</CheckboxIndicator> |
|
|
</CheckboxRoot> |
|
|
</CheckboxRoot> |
|
|
|