feat(Form): new component (#439)

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

src/runtime/components/forms/Checkbox.vue

@@ -14,6 +14,7 @@
         class="form-checkbox"
         :class="inputClass"
         v-bind="$attrs"
+        @change="onChange"
       >
     </div>
     <div v-if="label || $slots.label" class="ms-3 text-sm">
@@ -33,6 +34,7 @@ import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
 import { classNames } from '../../utils'
+import { useFormEvents } from '../../composables/useFormEvents'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -91,13 +93,15 @@ export default defineComponent({
       default: () => appConfig.ui.checkbox
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'change'],
   setup (props, { emit }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
     const ui = computed<Partial<typeof appConfig.ui.checkbox>>(() => defu({}, props.ui, appConfig.ui.checkbox))
 
+    const { emitFormBlur } = useFormEvents()
+
     const toggle = computed({
       get () {
         return props.modelValue
@@ -107,6 +111,11 @@ export default defineComponent({
       }
     })
 
+    const onChange = (event: Event) => {
+      emit('change', event)
+      emitFormBlur()
+    }
+
     const inputClass = computed(() => {
       return classNames(
         ui.value.base,
@@ -122,7 +131,8 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       toggle,
-      inputClass
+      inputClass,
+      onChange
     }
   }
 })