feat(Form): Select and InputMenu integration (#97)

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

src/runtime/components/Checkbox.vue

@@ -75,13 +75,6 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
   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()
-}
 </script>
 
 <template>
@@ -95,7 +88,7 @@ function onChecked() {
         :name="name"
         :disabled="disabled"
         :class="ui.base()"
-        @update:checked="onChecked"
+        @update:checked="emitFormChange()"
       >
         <CheckboxIndicator as-child>
           <UIcon v-if="indeterminate" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon()" />

src/runtime/components/Input.vue

@@ -31,6 +31,7 @@ export interface InputProps extends UseComponentIconsProps {
 
 export interface InputEmits {
   (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
 }
 
 export interface InputSlots {
@@ -113,6 +114,8 @@ function onChange(event: Event) {
   if (modelModifiers.trim) {
     (event.target as HTMLInputElement).value = value.trim()
   }
+
+  emits('change', event)
 }
 
 function onBlur(event: FocusEvent) {

src/runtime/components/InputMenu.vue

@@ -101,8 +101,7 @@ const slots = defineSlots<InputMenuSlots<T>>()
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { emitFormBlur, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons<InputProps>(defu(props, { trailingIcon: appConfig.ui.icons.chevronDown }))
 
@@ -172,6 +171,8 @@ onMounted(() => {
     :display-value="displayValue"
     :filter-function="filterFunction"
     :class="ui.root({ class: props.class })"
+    @update:model-value="emitFormChange()"
+    @keydown.enter="$event.preventDefault()"
   >
     <ComboboxAnchor as-child>
       <ComboboxInput
@@ -181,6 +182,7 @@ onMounted(() => {
         :placeholder="placeholder"
         :required="required"
         :class="ui.base()"
+        @blur="emitFormBlur()"
       />
 
       <span v-if="isLeading || !!slots.leading" :class="ui.leading()">

src/runtime/components/RadioGroup.vue

@@ -26,9 +26,7 @@ export interface RadioGroupProps<T> extends Omit<RadioGroupRootProps, 'asChild'
   ui?: Partial<typeof radioGroup.slots>
 }
 
-export type RadioGroupEmits = {
-  change: [value: any]
-} & RadioGroupRootEmits
+export type RadioGroupEmits = RadioGroupRootEmits
 
 type SlotProps<T> = (props: { item: T }) => any
 
@@ -49,14 +47,7 @@ const props = withDefaults(defineProps<RadioGroupProps<T>>(), { orientation: 've
 const emits = defineEmits<RadioGroupEmits>()
 const slots = defineSlots<RadioGroupSlots<T>>()
 
-const modelValue = defineModel<string>({
-  set(value) {
-    emits('change', value)
-    return value
-  }
-})
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'loop', 'required'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
 
 const { emitFormChange, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
 const id = _id.value ?? useId()
@@ -88,24 +79,16 @@ const normalizedItems = computed(() => {
   if (!props.items) return []
   return props.items.map(normalizeItem)
 })
-
-// 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 onUpdate() {
-  emitFormChange()
-}
 </script>
 
 <template>
   <RadioGroupRoot
     :id="id"
-    v-model="modelValue"
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
     :class="ui.root({ class: props.class })"
-    @update:model-value="onUpdate"
+    @update:model-value="emitFormChange()"
   >
     <fieldset :class="ui.fieldset()">
       <legend v-if="legend || !!slots.legend" :class="ui.legend()">

src/runtime/components/Select.vue

@@ -82,8 +82,8 @@ const slots = defineSlots<SelectSlots<T>>()
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as SelectContentProps)
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { emitFormBlur, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+
+const { emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons<InputProps>(defu(props, { trailingIcon: appConfig.ui.icons.chevronDown }))
 
@@ -103,7 +103,13 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
 </script>
 
 <template>
-  <SelectRoot v-bind="rootProps" :id="id" :name="name" :disabled="disabled">
+  <SelectRoot
+    v-bind="rootProps"
+    :id="id"
+    :name="name"
+    :disabled="disabled"
+    @update:model-value="emitFormChange()"
+  >
     <SelectTrigger :class="ui.base({ class: props.class })">
       <span v-if="isLeading || !!slots.leading" :class="ui.leading()">
         <slot name="leading">
@@ -111,7 +117,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
         </slot>
       </span>
 
-      <SelectValue :placeholder="placeholder" :class="ui.placeholder()" />
+      <SelectValue :placeholder="placeholder ?? '&nbsp'" :class="ui.value()" />
 
       <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing()">
         <slot name="trailing">

src/runtime/components/Switch.vue

@@ -55,13 +55,6 @@ const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
   loading: props.loading,
   disabled: disabled.value || props.loading
 }))
-
-// 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.
-async function onChecked() {
-  emitFormChange()
-}
 </script>
 
 <template>
@@ -75,7 +68,7 @@ async function onChecked() {
         :name="name"
         :disabled="disabled || loading"
         :class="ui.base()"
-        @update:checked="onChecked"
+        @update:checked="emitFormChange()"
       >
         <SwitchThumb :class="ui.thumb()">
           <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ checked: true, unchecked: true })" />

src/runtime/components/Textarea.vue

@@ -30,6 +30,7 @@ export interface TextareaProps {
 
 export interface TextareaEmits {
   (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
 }
 
 export interface TextareaSlots {
@@ -103,6 +104,8 @@ function onChange(event: Event) {
   if (modelModifiers.trim) {
     (event.target as HTMLInputElement).value = value.trim()
   }
+
+  emits('change', event)
 }
 
 function onBlur(event: FocusEvent) {