refactor(Form): input events (#99)

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

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()" />