refactor(Form): input events (#99)

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

src/runtime/components/Switch.vue

@@ -45,6 +45,7 @@ export interface SwitchSlots {
 
 export interface SwitchEmits {
   (e: 'update:modelValue', payload: boolean): void
+  (e: 'change', payload: Event): void
 }
 </script>
 
@@ -56,14 +57,14 @@ import { useId, useAppConfig, useFormField } from '#imports'
 
 const props = defineProps<SwitchProps>()
 const slots = defineSlots<SwitchSlots>()
-defineEmits<SwitchEmits>()
+const emits = defineEmits<SwitchEmits>()
 
 const modelValue = defineModel<boolean | undefined>({ default: undefined })
 
 const appConfig = useAppConfig()
 const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
 
-const { id: _id, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SwitchProps>(props)
 const id = _id.value ?? useId()
 
 const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
@@ -73,6 +74,13 @@ const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
   loading: props.loading,
   disabled: disabled.value || props.loading
 }))
+
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
 </script>
 
 <template>
@@ -86,7 +94,7 @@ const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
         :name="name"
         :disabled="disabled || loading"
         :class="ui.base()"
-        @update:checked="emitFormChange()"
+        @update:checked="onUpdate"
       >
         <SwitchThumb :class="ui.thumb()">
           <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ checked: true, unchecked: true })" />