arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-30 11:47:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Checkbox): indeterminate prop not working

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-11 14:13:46 +02:00
parent bcfa4b74a9
commit f6631ff7bc
1 changed files with 3 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/runtime/components/Checkbox.vue
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import type { InputHTMLAttributes } from 'vue'
import { tv, type VariantProps } from 'tailwind-variants' import { tv, type VariantProps } from 'tailwind-variants'
import type { CheckboxRootProps } from 'radix-vue' import type { CheckboxRootProps } from 'radix-vue'
import type { AppConfig } from '@nuxt/schema' import type { AppConfig } from '@nuxt/schema'
@@ -22,7 +21,7 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
* @defaultValue appConfig.ui.icons.check * @defaultValue appConfig.ui.icons.check
*/ */
icon?: string icon?: string
indeterminate?: InputHTMLAttributes['indeterminate'] indeterminate?: boolean
/** /**
* The icon displayed when the checkbox is indeterminate. * The icon displayed when the checkbox is indeterminate.
* @defaultValue appConfig.ui.icons.minus * @defaultValue appConfig.ui.icons.minus
@@ -64,11 +63,9 @@ const appConfig = useAppConfig()
const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<CheckboxProps>(props) const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<CheckboxProps>(props)
const id = _id.value ?? useId() const id = _id.value ?? useId()
const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
const checked = computed({ const checked = computed({
get() { get() {
return indeterminate.value ? 'indeterminate' : modelValue.value return props.indeterminate ? 'indeterminate' : modelValue.value
}, },
set(value) { set(value) {
modelValue.value = value === 'indeterminate' ? undefined : value modelValue.value = value === 'indeterminate' ? undefined : value
@@ -80,7 +77,7 @@ const ui = computed(() => checkbox({
color: color.value, color: color.value,
required: props.required, required: props.required,
disabled: disabled.value, disabled: disabled.value,
checked: (modelValue.value ?? props.defaultValue) || indeterminate.value checked: (modelValue.value ?? props.defaultValue) || props.indeterminate
})) }))
function onUpdate(value: any) { function onUpdate(value: any) {