refactor: InputItem typing

app/src/components/globals/formItems/InputItem.vue

@@ -1,63 +1,70 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import type { BaseValidation } from '@vuelidate/core'
+import { computed, inject } from 'vue'
+
+import { ValidationTouchSymbol } from '@/composables/form'
+import type { BaseItemComputedProps, InputItemProps } from '@/types/form'
+import { objectGet } from '@/helpers/commons'
 
 const props = withDefaults(
-  defineProps<{
+  defineProps<InputItemProps & BaseItemComputedProps<string | number | null>>(),
-    modelValue?: string | number | null
-    id?: string
-    placeholder?: string
-    type?: string
-    required?: boolean
-    state?: false | null
-    min?: number
-    max?: number
-    step?: number
-    trim?: boolean
-    autocomplete?: string
-    // FIXME pattern?
-    pattern?: object
-    name?: string
-  }>(),
   {
-    modelValue: null,
     id: undefined,
+    name: undefined,
     placeholder: undefined,
-    type: 'text',
+    touchKey: undefined,
-    required: false,
+    autocomplete: undefined,
-    state: undefined,
+    // pattern: undefined,
-    min: undefined,
-    max: undefined,
     step: undefined,
     trim: true,
-    autocomplete: undefined,
+    type: 'text',
-    pattern: undefined,
+
-    name: undefined,
+    ariaDescribedby: undefined,
+    modelValue: undefined,
+    state: undefined,
+    validation: undefined,
   },
 )
-const emit = defineEmits<{
+defineEmits<{
   'update:modelValue': [value: string | number | null]
 }>()
 
-const touch = inject('touch')
+const touch = inject(ValidationTouchSymbol)
 
-const autocomplete =
+const model = defineModel<string | number | null>()
-  props.autocomplete || props.type === 'password' ? 'new-password' : null
+
+const autocomplete = computed(() => {
+  const typeToAutocomplete = {
+    password: 'new-password',
+    email: 'email',
+    url: 'url',
+  } as const
+  return props.autocomplete || objectGet(typeToAutocomplete, props.type)
+})
+
+const fromValidation = computed(() => {
+  const validation = props?.validation ?? ({} as BaseValidation)
+  return {
+    required: 'required' in validation,
+    min: 'min' in validation ? validation.min.$params.min : undefined,
+    max: 'max' in validation ? validation.max.$params.max : undefined,
+  }
+})
 </script>
 
 <template>
   <BFormInput
-    :modelValue="modelValue"
-    @update:modelValue="emit('update:modelValue', $event)"
     :id="id"
+    v-bind="fromValidation"
+    v-model="model"
+    :name="name"
     :placeholder="placeholder"
-    :type="type"
+    :autocomplete="autocomplete"
-    :state="state"
-    :required="required"
-    :min="min"
-    :max="max"
     :step="step"
     :trim="trim"
-    :autocomplete="autocomplete"
+    :type="type"
-    @blur="touch(name)"
+    :aria-describedby="ariaDescribedby"
+    :state="state"
+    @blur="touch?.(touchKey)"
   />
 </template>

app/src/helpers/commons.ts

@@ -29,6 +29,14 @@ export function isObjectLiteral(value) {
   )
 }
 
+export function objectGet<
+  T extends Obj,
+  K extends keyof T | string,
+  F extends any = undefined,
+>(obj: T, key: K, fallback?: F) {
+  return (key in obj ? obj[key] : fallback) as K extends keyof T ? T[K] : F
+}
+
 /**
  * Check if value is "empty" (`null`, `undefined`, `''`, `[]`, '{}').
  * Note: `0` is not considered "empty" in that helper.

app/src/types/form.ts

@@ -44,3 +44,31 @@ export type FileModelValue = {
   current?: boolean
   removed?: boolean
 }
+
+export type InputItemProps = BaseWritableItemProps & {
+  autocomplete?:
+    | 'off'
+    | 'on'
+    | 'name'
+    | 'email'
+    | 'username'
+    | 'new-password'
+    | 'current-password'
+    | 'url'
+  // pattern?: object
+  // choices?: string[] FIXME rm ?
+  step?: number
+  trim?: boolean
+  type?:
+    | 'color'
+    | 'date'
+    // | 'datetime-local'
+    | 'email'
+    | 'number'
+    | 'password'
+    | 'range'
+    // | 'search'
+    | 'text'
+    | 'time'
+    | 'url'
+}