chore(Checkbox/Switch): change model binding (#58)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/Checkbox.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { CheckboxRootProps, CheckboxRootEmits } from 'radix-vue'
+import type { CheckboxRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/checkbox'
@@ -12,22 +12,19 @@ const checkbox = tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })
 
 type CheckboxVariants = VariantProps<typeof checkbox>
 
-export interface CheckboxProps extends Omit<CheckboxRootProps, 'asChild'> {
-  id?: string
-  name?: string
-  description?: string
+export interface CheckboxProps extends Omit<CheckboxRootProps, 'asChild' | 'checked' | 'defaultChecked'> {
   label?: string
+  description?: string
   color?: CheckboxVariants['color']
   size?: CheckboxVariants['size']
   icon?: IconProps['name']
   indeterminateIcon?: IconProps['name']
   indeterminate?: boolean
+  defaultValue?: boolean
   class?: any
   ui?: Partial<typeof checkbox.slots>
 }
 
-export interface CheckboxEmits extends CheckboxRootEmits {}
-
 export interface CheckboxSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
@@ -36,26 +33,20 @@ export interface CheckboxSlots {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { CheckboxRoot, CheckboxIndicator, Label, useForwardPropsEmits } from 'radix-vue'
+import { CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useId, useAppConfig, useFormField } from '#imports'
 
 const props = defineProps<CheckboxProps>()
-const emits = defineEmits<CheckboxEmits>()
 defineSlots<CheckboxSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultChecked', 'disabled', 'required', 'name'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
 
 const appConfig = useAppConfig()
 const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<CheckboxProps>(props)
 const inputId = _inputId.value ?? useId()
 
-const modelValue = defineModel<boolean | undefined>({
-  default: undefined,
-  set(value) {
-    return value
-  }
-})
+const modelValue = defineModel<boolean | undefined>({ default: undefined })
 
 const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
 
@@ -68,21 +59,21 @@ const checked = computed({
   }
 })
 
+const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
+  size: size.value,
+  color: color.value,
+  required: props.required,
+  disabled: disabled.value,
+  checked: modelValue.value ?? props.defaultValue,
+  indeterminate: indeterminate.value
+}))
+
 // FIXME: I think there's a race condition between this and the v-model event.
 // This must be triggered after the value updates, otherwise the form validates
 // the previous value.
 function onChecked() {
   emitFormChange()
 }
-
-const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
-  size: size.value,
-  color: color.value,
-  required: props.required,
-  disabled: disabled.value,
-  checked: modelValue.value ?? props.defaultChecked,
-  indeterminate: indeterminate.value
-}))
 </script>
 
 <template>
@@ -91,7 +82,10 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
       <CheckboxRoot
         :id="inputId"
         v-model:checked="checked"
-        v-bind="{ ...rootProps, name, disabled }"
+        :default-checked="defaultValue"
+        v-bind="rootProps"
+        :name="name"
+        :disabled="disabled"
         :class="ui.base()"
         @update:checked="onChecked"
       >

src/runtime/components/RadioGroup.vue

@@ -18,10 +18,8 @@ export type RadioGroupOption<T> = {
 }
 
 export interface RadioGroupProps<T> extends Omit<RadioGroupRootProps, 'asChild' | 'dir'> {
-  name?: string
   legend?: string
   options?: string[] | RadioGroupOption<T>[]
-  disabled?: boolean
   class?: any
   size?: RadioGroupVariants['size']
   color?: RadioGroupVariants['color']
@@ -49,7 +47,7 @@ const props = defineProps<RadioGroupProps<T>>()
 const emits = defineEmits<RadioGroupEmits>()
 defineSlots<RadioGroupSlots<T>>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'orientation', 'loop', 'name', 'required'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'orientation', 'loop', 'required'), emits)
 
 const { emitFormChange, color, name, size, inputId: _inputId, disabled } = useFormField<RadioGroupProps<T>>(props)
 const inputId = _inputId.value ?? useId()

src/runtime/components/Switch.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { SwitchRootProps, SwitchRootEmits } from 'radix-vue'
+import type { SwitchRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/switch'
@@ -12,9 +12,7 @@ const switchTv = tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })
 
 type SwitchVariants = VariantProps<typeof switchTv>
 
-export interface SwitchProps extends Omit<SwitchRootProps, 'asChild'> {
-  id?: string
-  name?: string
+export interface SwitchProps extends Omit<SwitchRootProps, 'asChild' | 'checked' | 'defaultChecked'> {
   color?: SwitchVariants['color']
   size?: SwitchVariants['size']
   loading?: boolean
@@ -23,36 +21,37 @@ export interface SwitchProps extends Omit<SwitchRootProps, 'asChild'> {
   uncheckedIcon?: IconProps['name']
   label?: string
   description?: string
+  defaultValue?: boolean
   class?: any
   ui?: Partial<typeof switchTv.slots>
 }
 
-export interface CheckboxSlots {
+export interface SwitchSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
 }
-
-export interface SwitchEmits extends SwitchRootEmits {}
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { SwitchRoot, SwitchThumb, useForwardPropsEmits, Label } from 'radix-vue'
+import { SwitchRoot, SwitchThumb, useForwardProps, Label } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useId, useAppConfig, useFormField } from '#imports'
 
 const props = defineProps<SwitchProps>()
-const emits = defineEmits<SwitchEmits>()
+defineSlots<SwitchSlots>()
 
 const appConfig = useAppConfig()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultChecked', 'checked', 'required', 'value'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
+
+const modelValue = defineModel<boolean | undefined>({ default: undefined })
 
 const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
 const inputId = _inputId.value ?? useId()
 
 const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
-  color: color.value,
   size: size.value,
+  color: color.value,
   required: props.required,
   loading: props.loading,
   disabled: disabled.value || props.loading
@@ -71,9 +70,11 @@ async function onChecked() {
     <div :class="ui.container()">
       <SwitchRoot
         :id="inputId"
+        v-model:checked="modelValue"
+        :default-checked="defaultValue"
+        v-bind="rootProps"
         :name="name"
         :disabled="disabled || loading"
-        v-bind="rootProps"
         :class="ui.base()"
         @update:checked="onChecked"
       >