refactor(Form): input events (#99)

Co-authored-by: Benjamin Canac <[email protected]>

playground/app/pages/form.vue

@@ -72,14 +72,43 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
           </UButton>
         </div>
       </UForm>
-    </div>
-
-    <div class="flex gap-4">
       <FormNestedExample />
       <FormNestedListExample />
-      <FormElementsExample />
-      <FormElementsExample disabled />
     </div>
-    <div class="flex gap-4" />
+
+    <USeparator class="my-8" />
+
+    <div class="flex gap-4 flex-wrap">
+      <div>
+        <p class="text-lg font-bold underline mb-4">
+          Validate on input
+        </p>
+        <FormElementsExample :validate-on="['input']" />
+      </div>
+      <div>
+        <p class="text-lg font-bold underline mb-4">
+          Validate on change
+        </p>
+        <FormElementsExample :validate-on="['change']" />
+      </div>
+      <div>
+        <p class="text-lg font-bold underline mb-4">
+          Validate on blur
+        </p>
+        <FormElementsExample :validate-on="['blur']" />
+      </div>
+      <div>
+        <p class="text-lg font-bold underline mb-4">
+          Default
+        </p>
+        <FormElementsExample />
+      </div>
+      <div>
+        <p class="text-lg font-bold underline mb-4">
+          Disabled
+        </p>
+        <FormElementsExample disabled />
+      </div>
+    </div>
   </div>
 </template>

src/runtime/components/Checkbox.vue

@@ -41,6 +41,7 @@ export interface CheckboxSlots {
 
 export interface CheckboxEmits {
   (e: 'update:modelValue', payload: boolean): void
+  (e: 'change', payload: Event): void
 }
 </script>
 
@@ -52,14 +53,14 @@ import { useId, useAppConfig, useFormField } from '#imports'
 
 const props = defineProps<CheckboxProps>()
 const slots = defineSlots<CheckboxSlots>()
-defineEmits<CheckboxEmits>()
+const emits = defineEmits<CheckboxEmits>()
 
 const modelValue = defineModel<boolean | undefined>({ default: undefined })
 
 const rootProps = useForwardProps(reactivePick(props, 'required', 'value'))
 
 const appConfig = useAppConfig()
-const { id: _id, emitFormChange, 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 indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
@@ -80,6 +81,13 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
   disabled: disabled.value,
   checked: (modelValue.value ?? props.defaultValue) || indeterminate.value
 }))
+
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
 </script>
 
 <template>
@@ -93,7 +101,7 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
         :name="name"
         :disabled="disabled"
         :class="ui.base()"
-        @update:checked="emitFormChange()"
+        @update:checked="onUpdate"
       >
         <CheckboxIndicator as-child>
           <UIcon v-if="indeterminate" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon()" />

src/runtime/components/Input.vue

@@ -59,7 +59,7 @@ const slots = defineSlots<InputSlots>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
@@ -116,6 +116,7 @@ function onChange(event: Event) {
     (event.target as HTMLInputElement).value = value.trim()
   }
 
+  emitFormChange()
   emits('change', event)
 }
 

src/runtime/components/InputMenu.vue

@@ -85,7 +85,11 @@ export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValu
   ui?: Partial<typeof inputMenu.slots>
 }
 
-export type InputMenuEmits<T> = ComboboxRootEmits<T>
+export type InputMenuEmits<T> = ComboboxRootEmits<T> & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+}
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
@@ -127,7 +131,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
-const { emitFormBlur, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
@@ -187,6 +191,29 @@ onMounted(() => {
     autoFocus()
   }, props.autofocusDelay)
 })
+
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+
+function onBlur(event: FocusEvent) {
+  emits('blur', event)
+  emitFormBlur()
+}
+
+function onUpdateOpen(value: boolean) {
+  if (!value) {
+    const event = new FocusEvent('blur')
+    emits('blur', event)
+    emitFormBlur()
+  } else {
+    const event = new FocusEvent('focus')
+    emits('focus', event)
+  }
+}
 </script>
 
 <template>
@@ -201,7 +228,8 @@ onMounted(() => {
     :filter-function="filterFunction"
     :class="ui.root({ class: props.class })"
     :as-child="!!multiple"
-    @update:model-value="emitFormChange()"
+    @update:model-value="onUpdate"
+    @update:open="onUpdateOpen"
     @keydown.enter="$event.preventDefault()"
   >
     <ComboboxAnchor :as-child="!multiple" :class="ui.base()">
@@ -212,7 +240,7 @@ onMounted(() => {
         :disabled="disabled"
         delimiter=""
         as-child
-        @blur="emitFormBlur()"
+        @blur="onBlur"
       >
         <TagsInputItem v-for="(item, index) in tags" :key="index" :value="(item as string)" :class="ui.tagsItem()">
           <TagsInputItemText :class="ui.tagsItemText()">
@@ -248,7 +276,7 @@ onMounted(() => {
         :placeholder="placeholder"
         :required="required"
         :class="ui.base()"
-        @blur="emitFormBlur()"
+        @blur="onBlur"
       />
 
       <span v-if="isLeading || !!slots.leading" :class="ui.leading()">

src/runtime/components/RadioGroup.vue

@@ -36,7 +36,9 @@ export interface RadioGroupProps<T> extends Pick<RadioGroupRootProps, 'defaultVa
   ui?: Partial<typeof radioGroup.slots>
 }
 
-export interface RadioGroupEmits extends RadioGroupRootEmits {}
+export type RadioGroupEmits = RadioGroupRootEmits & {
+  change: [payload: Event]
+}
 
 type SlotProps<T> = (props: { item: T, modelValue?: string }) => any
 
@@ -48,7 +50,7 @@ export interface RadioGroupSlots<T> {
 </script>
 
 <script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useId, useFormField } from '#imports'
@@ -61,7 +63,7 @@ const slots = defineSlots<RadioGroupSlots<T>>()
 
 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 { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
 const id = _id.value ?? useId()
 
 const ui = computed(() => tv({ extend: radioGroup, slots: props.ui })({
@@ -91,6 +93,13 @@ const normalizedItems = computed(() => {
   if (!props.items) return []
   return props.items.map(normalizeItem)
 })
+
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
 </script>
 
 <template>
@@ -101,7 +110,7 @@ const normalizedItems = computed(() => {
     :name="name"
     :disabled="disabled"
     :class="ui.root({ class: props.class })"
-    @update:model-value="emitFormChange()"
+    @update:model-value="onUpdate"
   >
     <fieldset :class="ui.fieldset()">
       <legend v-if="legend || !!slots.legend" :class="ui.legend()">

src/runtime/components/Select.vue

@@ -63,7 +63,11 @@ export interface SelectProps<T> extends Omit<SelectRootProps, 'dir'>, UseCompone
   ui?: Partial<typeof select.slots>
 }
 
-export interface SelectEmits extends SelectRootEmits {}
+export type SelectEmits = SelectRootEmits & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+}
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
@@ -95,7 +99,7 @@ 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)
 
-const { emitFormChange, emitFormBlur, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
@@ -113,8 +117,22 @@ const ui = computed(() => tv({ extend: select, slots: props.ui })({
 
 const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as SelectItem[][] : [])
 
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+
+  emitFormChange()
+  emitFormInput()
+}
 function onUpdateOpen(value: boolean) {
-  if (!value) emitFormBlur()
+  if (!value) {
+    const event = new FocusEvent('blur')
+    emits('blur', event)
+    emitFormBlur()
+  } else {
+    const event = new FocusEvent('focus')
+    emits('focus', event)
+  }
 }
 </script>
 
@@ -125,7 +143,7 @@ function onUpdateOpen(value: boolean) {
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
-    @update:model-value="emitFormChange()"
+    @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
     <SelectTrigger :class="ui.base({ class: props.class })">

src/runtime/components/SelectMenu.vue

@@ -72,7 +72,11 @@ export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelVal
   ui?: Partial<typeof selectMenu.slots>
 }
 
-export type SelectMenuEmits<T> = ComboboxRootEmits<T>
+export type SelectMenuEmits<T> = ComboboxRootEmits<T> & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+}
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
@@ -111,7 +115,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
-const { emitFormBlur, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
@@ -160,6 +164,24 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
 }
 
 const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as SelectMenuItem[][] : [])
+
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+
+function onUpdateOpen(value: boolean) {
+  if (!value) {
+    const event = new FocusEvent('blur')
+    emits('blur', event)
+    emitFormBlur()
+  } else {
+    const event = new FocusEvent('focus')
+    emits('focus', event)
+  }
+}
 </script>
 
 <template>
@@ -173,7 +195,8 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
     :disabled="disabled"
     :display-value="() => searchTerm"
     :filter-function="filterFunction"
-    @update:model-value="emitFormChange()"
+    @update:model-value="onUpdate"
+    @update:open="onUpdateOpen"
   >
     <ComboboxAnchor as-child>
       <ComboboxTrigger :class="ui.base({ class: props.class })" tabindex="0">
@@ -202,7 +225,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
 
     <ComboboxPortal :disabled="!portal">
       <ComboboxContent :class="ui.content()" v-bind="contentProps">
-        <ComboboxInput :placeholder="searchPlaceholder" :class="ui.input()" autofocus autocomplete="off" @blur="emitFormBlur()" />
+        <ComboboxInput :placeholder="searchPlaceholder" :class="ui.input()" autofocus autocomplete="off" />
 
         <ComboboxEmpty :class="ui.empty()">
           <slot name="empty" :search-term="searchTerm">