feat : composant MalioDateWeek (sélection semaine ISO) (#MUI-33)

2026-05-20 15:17:19 +02:00
parent 4021240df3
commit d093923a63
2 changed files with 245 additions and 0 deletions
--- a/app/components/malio/date/DateWeek.vue
+++ b/app/components/malio/date/DateWeek.vue
@@ -0,0 +1,123 @@
+<template>
+  <CalendarField
+    :id="id"
+    :display-value="displayValue"
+    :sync-to="validWeek?.monday ?? null"
+    :name="name"
+    :label="label"
+    :placeholder="placeholder"
+    :required="required"
+    :disabled="disabled"
+    :readonly="readonly"
+    :hint="hint"
+    :error="error"
+    :success="success"
+    :clearable="clearable"
+    :input-class="inputClass"
+    :label-class="labelClass"
+    :group-class="groupClass"
+    v-bind="$attrs"
+    @clear="onClear"
+    @close="onClose"
+  >
+    <template #default="{ currentMonth, currentYear, close }">
+      <MonthGrid
+        :month="currentMonth"
+        :year="currentYear"
+        :range-start="activeMonday"
+        :range-end="activeSunday"
+        :marked-week-start="validWeek?.monday ?? null"
+        interactive-week-number
+        :min="min"
+        :max="max"
+        @select="(iso) => onSelect(iso, close)"
+        @hover="onHover"
+      />
+    </template>
+  </CalendarField>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import CalendarField from './internal/CalendarField.vue'
+import MonthGrid from './internal/MonthGrid.vue'
+import {formatWeekDisplay, isValidIsoWeek, isoWeekToMonday, mondayOf, sundayOf, toIsoWeek} from './composables/dateWeek'
+
+defineOptions({name: 'MalioDateWeek', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    name?: string
+    label?: string
+    modelValue?: string | null
+    placeholder?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    min?: string
+    max?: string
+    clearable?: boolean
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    label: '',
+    modelValue: undefined,
+    placeholder: 'JJ/MM/AAAA',
+    required: false,
+    disabled: false,
+    readonly: false,
+    hint: '',
+    error: '',
+    success: '',
+    min: undefined,
+    max: undefined,
+    clearable: true,
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+  },
+)
+
+const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
+
+const hoverWeekStart = ref<string | null>(null)
+
+const validWeek = computed(() => {
+  if (props.modelValue && isValidIsoWeek(props.modelValue)) {
+    return {monday: isoWeekToMonday(props.modelValue) as string}
+  }
+  return null
+})
+
+const activeMonday = computed(() => hoverWeekStart.value ?? validWeek.value?.monday ?? null)
+const activeSunday = computed(() => (activeMonday.value ? sundayOf(activeMonday.value) : null))
+
+const displayValue = computed(() => (validWeek.value ? formatWeekDisplay(props.modelValue as string) : ''))
+
+const onSelect = (iso: string, close: () => void) => {
+  emit('update:modelValue', toIsoWeek(iso))
+  hoverWeekStart.value = null
+  close()
+}
+
+const onHover = (iso: string | null) => {
+  hoverWeekStart.value = iso ? mondayOf(iso) : null
+}
+
+const onClose = () => {
+  hoverWeekStart.value = null
+}
+
+const onClear = () => {
+  emit('update:modelValue', null)
+  hoverWeekStart.value = null
+}
+</script>