fix(events): use methods for event handling

nuxt/components/form/FormCheckbox.vue

@@ -6,7 +6,7 @@
       class="rounded"
       type="checkbox"
       :checked="value"
-      @change="$emit('change', $event.target.checked)"
+      @change="onChange"
     />
     <label class="pl-2" :for="`input-${formKey}`"><slot /></label>
   </div>
@@ -26,5 +26,16 @@ export default defineComponent({
       type: Boolean as PropType<boolean | undefined>,
     },
   },
+  setup(_props, { emit }) {
+    const methods = {
+      onChange(payload: Event) {
+        emit('change', (payload.target as HTMLInputElement).checked)
+      },
+    }
+
+    return {
+      ...methods,
+    }
+  },
 })
 </script>

nuxt/components/form/FormRadioButton.vue

@@ -6,7 +6,7 @@
       :name="groupName"
       type="radio"
       :value="value ? value : titleSlug"
-      @change="$emit('change', $event.target.value)"
+      @change="onChange"
     />
     <label class="pl-2" :for="`input-${groupName}-${titleSlug}`">
       {{ title }}
@@ -17,7 +17,7 @@
 <script lang="ts">
 import slugify from 'slugify'
 
-import { defineComponent, PropType } from '#app'
+import { computed, defineComponent, PropType } from '#app'
 
 export default defineComponent({
   props: {
@@ -38,10 +38,22 @@ export default defineComponent({
       type: String,
     },
   },
-  computed: {
-    titleSlug(): string {
-      return slugify(this.title, { lower: true, strict: true })
-    },
+  setup(props, { emit }) {
+    const methods = {
+      onChange(payload: Event) {
+        emit('change', (payload.target as HTMLInputElement).value)
+      },
+    }
+    const computations = {
+      titleSlug: computed(() => {
+        return slugify(props.title, { lower: true, strict: true })
+      }),
+    }
+
+    return {
+      ...methods,
+      ...computations,
+    }
   },
 })
 </script>

nuxt/components/form/input/FormInput.vue

@@ -45,7 +45,7 @@
             :placeholder="placeholder"
             :type="type"
             :value="value?.$model"
-            @input="$emit('input', $event.target?.value)"
+            @input="onInput"
           />
           <div v-if="validationProperty && isValidatable">
             <FormInputIconWrapper v-if="validationProperty.$pending">
@@ -106,6 +106,8 @@
 
 <script lang="ts">
 import consola from 'consola'
+import { Validation } from 'vuelidate/vuelidate'
+
 import { defineComponent, PropType } from '#app'
 
 const FormInput = defineComponent({
@@ -152,17 +154,23 @@ const FormInput = defineComponent({
     },
     value: {
       default: undefined,
-      type: Object as PropType<object | undefined>,
+      type: Object as PropType<Validation | undefined>,
     },
     warning: {
       default: false,
       type: Boolean,
     },
   },
-  created() {
+  setup(props, { emit }) {
+    const methods = {
+      onInput(payload: Event) {
+        emit('input', (payload.target as HTMLInputElement)?.value)
+      },
+    }
+
     if (
-      !this.placeholder &&
-      this.type &&
+      !props.placeholder &&
+      props.type &&
       ![
         'checkbox',
         'datetime-local',
@@ -171,17 +179,21 @@ const FormInput = defineComponent({
         'textarea',
         'tiptap',
         'radio',
-      ].includes(this.type)
+      ].includes(props.type)
     ) {
-      consola.warn(`placeholder is missing for ${this.idLabel}!`)
+      consola.warn(`placeholder is missing for ${props.idLabel}!`)
     }
 
     if (
-      !this.value &&
-      this.type &&
-      !['checkbox', 'select'].includes(this.type)
+      !props.value &&
+      props.type &&
+      !['checkbox', 'select'].includes(props.type)
     ) {
-      consola.warn(`value is missing for ${this.idLabel}!`)
+      consola.warn(`value is missing for ${props.idLabel}!`)
+    }
+
+    return {
+      ...methods,
     }
   },
 })