From d8f54137debda054b3aed2c0f0a55a3e25f83390 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 22 Jun 2026 10:19:22 +0200
Subject: [PATCH] =?UTF-8?q?feat=20:=20propage=20min/max=20au=20popover=20+?=
 =?UTF-8?q?=20e2e=20s=C3=A9lecteur=20d'ann=C3=A9e=20(#date-year-picker)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/date/Date.test.ts  | 43 +++++++++++++++++++++++++
 app/components/malio/date/Date.vue      |  2 ++
 app/components/malio/date/DateRange.vue |  2 ++
 app/components/malio/date/DateTime.vue  |  2 ++
 app/components/malio/date/DateWeek.vue  |  2 ++
 5 files changed, 51 insertions(+)

diff --git a/app/components/malio/date/Date.test.ts b/app/components/malio/date/Date.test.ts
index 0ada59b..e289250 100644
--- a/app/components/malio/date/Date.test.ts
+++ b/app/components/malio/date/Date.test.ts
@@ -185,6 +185,49 @@ describe('MalioDate', () => {
     })
   })
 
+  describe('vue années', () => {
+    it('opens the year picker on second header toggle', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click') // -> mois
+      await wrapper.get('[data-test="header-toggle"]').trigger('click') // -> années
+      expect(wrapper.find('[data-test="year-picker"]').exists()).toBe(true)
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('2021 – 2032')
+    })
+
+    it('navigates days -> months -> years -> months -> days', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      await wrapper.get('[data-test="year"][data-year="2024"]').trigger('click') // -> mois 2024
+      expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(true)
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('2024')
+      await wrapper.get('[data-test="month"][data-month="0"]').trigger('click') // -> jours
+      expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(false)
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Janvier 2024')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it('paginates the year window with chevrons', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      await wrapper.get('[data-test="header-next"]').trigger('click')
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('2033 – 2044')
+    })
+
+    it('greys out years outside [min, max]', async () => {
+      const wrapper = mountDate({min: '2025-01-01', max: '2027-12-31'})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      expect(wrapper.get('[data-test="year"][data-year="2024"]').attributes('disabled')).toBeDefined()
+      expect(wrapper.get('[data-test="year"][data-year="2026"]').attributes('disabled')).toBeUndefined()
+    })
+  })
+
   describe('vue mois', () => {
     it('switches to month view on header toggle', async () => {
       const wrapper = mountDate()
diff --git a/app/components/malio/date/Date.vue b/app/components/malio/date/Date.vue
index d131b04..6c8bf0f 100644
--- a/app/components/malio/date/Date.vue
+++ b/app/components/malio/date/Date.vue
@@ -9,6 +9,8 @@
     :required="required"
     :disabled="disabled"
     :readonly="readonly"
+    :min="min"
+    :max="max"
     :hint="hint"
     :error="mergedError"
     :success="success"
diff --git a/app/components/malio/date/DateRange.vue b/app/components/malio/date/DateRange.vue
index ecd488a..e50a38c 100644
--- a/app/components/malio/date/DateRange.vue
+++ b/app/components/malio/date/DateRange.vue
@@ -9,6 +9,8 @@
     :required="required"
     :disabled="disabled"
     :readonly="readonly"
+    :min="min"
+    :max="max"
     :hint="hint"
     :error="error"
     :success="success"
diff --git a/app/components/malio/date/DateTime.vue b/app/components/malio/date/DateTime.vue
index 57ae540..bccd21b 100644
--- a/app/components/malio/date/DateTime.vue
+++ b/app/components/malio/date/DateTime.vue
@@ -9,6 +9,8 @@
     :required="required"
     :disabled="disabled"
     :readonly="readonly"
+    :min="min?.slice(0, 10)"
+    :max="max?.slice(0, 10)"
     :hint="hint"
     :error="mergedError"
     :success="success"
diff --git a/app/components/malio/date/DateWeek.vue b/app/components/malio/date/DateWeek.vue
index 4230e08..b8dae46 100644
--- a/app/components/malio/date/DateWeek.vue
+++ b/app/components/malio/date/DateWeek.vue
@@ -9,6 +9,8 @@
     :required="required"
     :disabled="disabled"
     :readonly="readonly"
+    :min="min"
+    :max="max"
     :hint="hint"
     :error="error"
     :success="success"