feat(date) : saisie manuelle MalioDate (parse, validation, erreur)

app/components/malio/date/Date.vue

@@ -10,14 +10,16 @@
     :disabled="disabled"
     :readonly="readonly"
     :hint="hint"
-    :error="error"
+    :error="mergedError"
     :success="success"
     :clearable="clearable"
+    :editable="editable"
     :input-class="inputClass"
     :label-class="labelClass"
     :group-class="groupClass"
     v-bind="$attrs"
-    @clear="emit('update:modelValue', null)"
+    @clear="onClear"
+    @commit="onCommit"
   >
     <template #default="{ currentMonth, currentYear, close }">
       <MonthGrid
@@ -26,17 +28,17 @@
         :selected-date="modelValue ?? null"
         :min="min"
         :max="max"
-        @select="(iso) => { emit('update:modelValue', iso); close() }"
+        @select="(iso) => onSelect(iso, close)"
       />
     </template>
   </CalendarField>
 </template>
 
 <script setup lang="ts">
-import {computed, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import CalendarField from './internal/CalendarField.vue'
 import MonthGrid from './internal/MonthGrid.vue'
-import {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
+import {formatIsoToDisplay, isDateInRange, isValidIso, parseDisplayToIso} from './composables/dateFormat'
 
 defineOptions({name: 'MalioDate', inheritAttrs: false})
 
@@ -56,6 +58,8 @@ const props = withDefaults(
     min?: string
     max?: string
     clearable?: boolean
+    editable?: boolean
+    invalidMessage?: string
     inputClass?: string
     labelClass?: string
     groupClass?: string
@@ -75,6 +79,8 @@ const props = withDefaults(
     min: undefined,
     max: undefined,
     clearable: true,
+    editable: false,
+    invalidMessage: 'Date invalide',
     inputClass: '',
     labelClass: '',
     groupClass: '',
@@ -85,6 +91,36 @@ const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>
 
 const displayValue = computed(() => formatIsoToDisplay(props.modelValue ?? null))
 
+const internalError = ref('')
+const mergedError = computed(() => props.error || internalError.value)
+
+const onCommit = (text: string) => {
+  const trimmed = text.trim()
+  if (trimmed === '') {
+    internalError.value = ''
+    emit('update:modelValue', null)
+    return
+  }
+  const iso = parseDisplayToIso(trimmed)
+  if (iso && isDateInRange(iso, props.min, props.max)) {
+    internalError.value = ''
+    emit('update:modelValue', iso)
+    return
+  }
+  internalError.value = props.invalidMessage
+}
+
+const onClear = () => {
+  internalError.value = ''
+  emit('update:modelValue', null)
+}
+
+const onSelect = (iso: string, close: () => void) => {
+  internalError.value = ''
+  emit('update:modelValue', iso)
+  close()
+}
+
 watch(() => props.modelValue, (val) => {
   if (val && !isValidIso(val) && import.meta.dev) {
     console.warn(`[MalioDate] modelValue invalide ignoré : "${val}"`)