Compare commits
1 Commits
feature/MU
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| f3a18ace1d |
@@ -12,9 +12,7 @@
|
||||
"Bash(mv buttonIcon.story.vue button/)",
|
||||
"Bash(mv inputText.story.vue inputAmount.story.vue inputNumber.story.vue inputPassword.story.vue inputTextArea.story.vue inputUpload.story.vue input/)",
|
||||
"Bash(mv InputSelect.story.vue selectCheckbox.story.vue select/)",
|
||||
"Bash(mv inputCheckbox.story.vue checkbox/)",
|
||||
"Bash(npx eslint *)",
|
||||
"Bash(echo \"LINT EXIT: $?\")"
|
||||
"Bash(mv inputCheckbox.story.vue checkbox/)"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -108,9 +108,9 @@ npm run lint # Pas d'erreurs
|
||||
|
||||
### 5. Créer la page playground
|
||||
|
||||
**Fichier :** `.playground/pages/composant/<categorie>/<nomComposant>.vue` (camelCase, dans le sous-dossier de catégorie)
|
||||
**Fichier :** `.playground/pages/composant/<nomComposant>.vue` (camelCase)
|
||||
|
||||
La page devient automatiquement une route Nuxt (`/composant/<categorie>/<nomComposant>`) et hérite du layout `default` (qui affiche la `MalioSidebar`). **Ajouter ensuite le lien dans la nav centralisée** `.playground/playground.nav.ts` : insérer un `{label, to}` dans la section appropriée (ou créer une nouvelle section), où `to` = `/composant/<categorie>/<nomComposant>`. Inclure des variantes représentatives dans une grille :
|
||||
La page est auto-détectée par `index.vue` via `import.meta.glob`. Inclure des variantes représentatives dans une grille :
|
||||
|
||||
```html
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
@@ -216,7 +216,7 @@ Cette section est alimentée au fur et à mesure des retours utilisateur et des
|
||||
|--------|----------|
|
||||
| Stub IconifyIcon ne fonctionne pas dans les tests | Utiliser `findComponent(IconifyIcon)` avec l'import réel pour tester les props |
|
||||
| Oubli de `inheritAttrs: false` | Toujours dans `defineOptions` — sinon les attrs se dupliquent |
|
||||
| Composant absent de la sidebar du playground | Ajouter son entrée `{label, to}` dans `.playground/playground.nav.ts` (la page n'est plus auto-découverte) |
|
||||
| Page playground non détectée | Vérifier le nom du fichier en camelCase dans `.playground/pages/composant/` |
|
||||
| Padding input pas ajusté avec icône | Ajouter `!pr-10` (ou équivalent) quand une icône est présente à droite |
|
||||
| Story sans initial state | Toujours initialiser les `ref` avec des valeurs pour que les variantes soient visibles dès le chargement |
|
||||
| CHANGELOG oublié | Toujours ajouter la ligne dans `### Added` avant de commit |
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div class="flex h-screen">
|
||||
<MalioSidebar :sections="navSections">
|
||||
<template #logo>
|
||||
<NuxtLink to="/">
|
||||
<img src="/LOGO_MALIO.png" alt="Malio">
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template #logo-collapsed>
|
||||
<NuxtLink to="/">
|
||||
<img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio">
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</MalioSidebar>
|
||||
|
||||
<main class="flex-1 overflow-y-auto p-6">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {navSections} from '../playground.nav'
|
||||
</script>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div class="space-y-6 p-4">
|
||||
<h1 class="text-2xl font-bold">MalioDate</h1>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-10">
|
||||
<div class="w-[480px] space-y-3">
|
||||
<h2 class="font-semibold">Large (480px)</h2>
|
||||
<MalioDate
|
||||
v-model="value"
|
||||
label="Date de naissance"
|
||||
hint="Clique pour ouvrir le calendrier"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur (ISO) : <code>{{ value ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded bg-m-primary px-3 py-1.5 text-white"
|
||||
@click="value = '2026-12-25'"
|
||||
>
|
||||
Forcer le 25/12/2026
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border px-3 py-1.5"
|
||||
@click="value = null"
|
||||
>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[396px] space-y-3">
|
||||
<h2 class="font-semibold">ERP (396px)</h2>
|
||||
<MalioDate
|
||||
v-model="erpValue"
|
||||
label="Date du rendez-vous"
|
||||
hint="Largeur cible ERP"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur (ISO) : <code>{{ erpValue ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<MalioDate
|
||||
v-model="bounded"
|
||||
label="Date bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const value = ref<string | null>(null)
|
||||
const erpValue = ref<string | null>(null)
|
||||
const bounded = ref<string | null>(null)
|
||||
</script>
|
||||
@@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<div class="space-y-6 p-4">
|
||||
<h1 class="text-2xl font-bold">MalioDateRange</h1>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-10">
|
||||
<div class="w-[480px] space-y-3">
|
||||
<h2 class="font-semibold">Large (480px)</h2>
|
||||
<MalioDateRange
|
||||
v-model="value"
|
||||
label="Période"
|
||||
hint="Clique deux fois pour définir une plage"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Début : <code>{{ value?.start ?? 'null' }}</code></p>
|
||||
<p>Fin : <code>{{ value?.end ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded bg-m-primary px-3 py-1.5 text-white"
|
||||
@click="value = {start: '2026-12-20', end: '2026-12-31'}"
|
||||
>
|
||||
Forcer 20→31/12/2026
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border px-3 py-1.5"
|
||||
@click="value = null"
|
||||
>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[396px] space-y-3">
|
||||
<h2 class="font-semibold">ERP (396px)</h2>
|
||||
<MalioDateRange
|
||||
v-model="erpValue"
|
||||
label="Période"
|
||||
hint="Largeur cible ERP"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Début : <code>{{ erpValue?.start ?? 'null' }}</code></p>
|
||||
<p>Fin : <code>{{ erpValue?.end ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<MalioDateRange
|
||||
v-model="bounded"
|
||||
label="Plage bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
type RangeValue = {start: string; end: string}
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const value = ref<RangeValue | null>(null)
|
||||
const erpValue = ref<RangeValue | null>(null)
|
||||
const bounded = ref<RangeValue | null>(null)
|
||||
</script>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div class="space-y-6 p-4">
|
||||
<h1 class="text-2xl font-bold">MalioDateWeek</h1>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-10">
|
||||
<div class="w-[480px] space-y-3">
|
||||
<h2 class="font-semibold">Large (480px)</h2>
|
||||
<MalioDateWeek
|
||||
v-model="value"
|
||||
label="Semaine"
|
||||
hint="Clique un jour ou un n° de semaine"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur : <code>{{ value ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded bg-m-primary px-3 py-1.5 text-white"
|
||||
@click="value = '2026-W52'"
|
||||
>
|
||||
Forcer 2026-W52
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border px-3 py-1.5"
|
||||
@click="value = null"
|
||||
>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[396px] space-y-3">
|
||||
<h2 class="font-semibold">ERP (396px)</h2>
|
||||
<MalioDateWeek
|
||||
v-model="erpValue"
|
||||
label="Semaine"
|
||||
hint="Largeur cible ERP"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur : <code>{{ erpValue ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<MalioDateWeek
|
||||
v-model="bounded"
|
||||
label="Semaine bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +60 jours"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
|
||||
|
||||
const value = ref<string | null>(null)
|
||||
const erpValue = ref<string | null>(null)
|
||||
const bounded = ref<string | null>(null)
|
||||
</script>
|
||||
@@ -1,88 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const drawerRight = ref(false)
|
||||
const drawerLeft = ref(false)
|
||||
const drawerForm = ref(false)
|
||||
const drawerFixedFooter = ref(false)
|
||||
const drawerNoDismiss = ref(false)
|
||||
const drawerDefault = ref(false)
|
||||
const drawerNoClose = ref(false)
|
||||
const drawerCustomWidth = ref(false)
|
||||
const drawerWithForm = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Drawer droite (défaut)</h2>
|
||||
<MalioButton label="Ouvrir à droite" @click="drawerRight = true" />
|
||||
<MalioDrawer v-model="drawerRight">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Détails</h2>
|
||||
</template>
|
||||
<p class="text-m-text">Contenu du drawer. Échap, clic backdrop et croix le ferment.</p>
|
||||
<h2 class="mb-6 text-xl font-bold">Drawer simple</h2>
|
||||
<MalioButton label="Ouvrir le drawer" @click="drawerDefault = true" />
|
||||
<MalioDrawer v-model="drawerDefault" title="Titre du drawer">
|
||||
<p class="text-m-text">Contenu du drawer. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Drawer gauche</h2>
|
||||
<MalioButton label="Ouvrir à gauche" variant="secondary" @click="drawerLeft = true" />
|
||||
<MalioDrawer v-model="drawerLeft" side="left">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Navigation</h2>
|
||||
</template>
|
||||
<p class="text-m-text">Ce drawer glisse depuis la gauche.</p>
|
||||
<h2 class="mb-6 text-xl font-bold">Sans bouton fermer</h2>
|
||||
<MalioButton label="Ouvrir le drawer" variant="secondary" @click="drawerNoClose = true" />
|
||||
<MalioDrawer v-model="drawerNoClose" title="Sans croix" :show-close="false">
|
||||
<p class="text-m-text">Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Avec footer collant</h2>
|
||||
<MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="drawerForm = true" />
|
||||
<MalioDrawer v-model="drawerForm" drawer-class="max-w-lg">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Nouveau contact</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<h2 class="mb-6 text-xl font-bold">Largeur personnalisée</h2>
|
||||
<MalioButton label="Ouvrir le drawer large" variant="tertiary" @click="drawerCustomWidth = true" />
|
||||
<MalioDrawer v-model="drawerCustomWidth" title="Drawer large" drawer-class="max-w-2xl">
|
||||
<p class="text-m-text">Ce drawer utilise une largeur personnalisée via drawerClass.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Avec formulaire</h2>
|
||||
<MalioButton label="Ouvrir le formulaire" variant="danger" @click="drawerWithForm = true" />
|
||||
<MalioDrawer v-model="drawerWithForm" title="Formulaire">
|
||||
<div class="flex flex-col gap-4">
|
||||
<MalioInputText label="Nom" />
|
||||
<MalioInputText label="Prénom" />
|
||||
<MalioInputText label="Email" />
|
||||
<MalioButton label="Enregistrer" button-class="w-full" @click="drawerWithForm = false" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="sticky bottom-0 flex gap-3 bg-white py-4">
|
||||
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="drawerForm = false" />
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="drawerForm = false" />
|
||||
</div>
|
||||
</template>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Avec footer fixed bottom</h2>
|
||||
<MalioButton label="Ouvrir (footer fixe)" variant="tertiary" @click="drawerFixedFooter = true" />
|
||||
<MalioDrawer v-model="drawerFixedFooter">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Conditions</h2>
|
||||
</template>
|
||||
<!-- pb-24 : laisse la place au footer fixe qui sort du flux et recouvrirait le bas du contenu -->
|
||||
<div class="flex flex-col gap-4 pb-24">
|
||||
<p v-for="n in 12" :key="n" class="text-m-text">
|
||||
Paragraphe {{ n }} — contenu long pour forcer le scroll et montrer que le footer reste fixé en bas du viewport.
|
||||
</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<!-- fixed : positionné par rapport au viewport ; w-full max-w-md cale la largeur sur le drawer droite par défaut -->
|
||||
<div class="fixed bottom-0 right-0 w-full max-w-md border-t border-m-border bg-white px-5 py-4">
|
||||
<MalioButton label="Accepter" button-class="w-full" @click="drawerFixedFooter = false" />
|
||||
</div>
|
||||
</template>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Non dismissable (croix uniquement)</h2>
|
||||
<MalioButton label="Ouvrir" variant="danger" @click="drawerNoDismiss = true" />
|
||||
<MalioDrawer v-model="drawerNoDismiss" :dismissable="false" :close-on-escape="false">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Action requise</h2>
|
||||
</template>
|
||||
<p class="text-m-text">Ni le backdrop ni Échap ne ferment ce drawer. Utilisez la croix.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,10 +78,7 @@
|
||||
<div class="grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
|
||||
<MalioInputTextArea label="Descritpion" resize="none" groupClass="row-span-2" textInput="h-full"/>
|
||||
<MalioInputText v-model="concurrent" label="Concurrent"/>
|
||||
<MalioDate
|
||||
v-model="dateCreation"
|
||||
label="Date création"
|
||||
/>
|
||||
<MalioInputText label="Date création"/>
|
||||
<MalioInputText label="Nombre de salariés" />
|
||||
<MalioInputAmount label="CA"/>
|
||||
<MalioInputText label="Dirigeant" />
|
||||
@@ -161,7 +158,6 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, computed, watch} from 'vue'
|
||||
import MalioDate from "../../../../app/components/malio/date/Date.vue";
|
||||
|
||||
type Commune = {
|
||||
nom: string
|
||||
@@ -283,7 +279,6 @@ const onSearchAdresse = async (query: string) => {
|
||||
|
||||
const tabsValue = ref('information')
|
||||
const concurrent = ref('')
|
||||
const dateCreation = ref<string | null>(null)
|
||||
|
||||
const informationValid = computed(() => concurrent.value.trim().length > 0)
|
||||
const adressesValid = computed(() => /^\d{5}$/.test(codePostal.value))
|
||||
|
||||
@@ -1,10 +1,189 @@
|
||||
<template>
|
||||
<div class="mx-auto max-w-2xl py-16 text-center">
|
||||
<h1 class="text-3xl font-bold text-m-text">
|
||||
Playground @malio/layer-ui
|
||||
</h1>
|
||||
<p class="mt-4 text-m-muted">
|
||||
Sélectionne un composant dans la barre latérale pour afficher sa page de démonstration.
|
||||
</p>
|
||||
<div class="flex min-h-screen">
|
||||
<aside class="w-72 bg-m-bg p-6 text-white">
|
||||
<button
|
||||
type="button"
|
||||
class="text-xl text-black font-semibold"
|
||||
@click="clearSelection"
|
||||
>
|
||||
Liste des composants
|
||||
</button>
|
||||
|
||||
<nav class="mt-6 flex flex-col gap-1">
|
||||
<div
|
||||
v-for="group in groups"
|
||||
:key="group.category"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-between rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary/10"
|
||||
@click="toggleCategory(group.category)"
|
||||
>
|
||||
{{ group.category }}
|
||||
<span
|
||||
class="text-xs transition-transform duration-200"
|
||||
:class="openCategories.has(group.category) ? 'rotate-90' : ''"
|
||||
>
|
||||
▶
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-if="openCategories.has(group.category)"
|
||||
class="ml-3 flex flex-col gap-1 border-l border-gray-300 pl-2"
|
||||
>
|
||||
<button
|
||||
v-for="item in group.items"
|
||||
:key="item.name"
|
||||
type="button"
|
||||
class="rounded px-3 py-1.5 text-left text-sm text-black hover:bg-m-primary hover:text-white"
|
||||
:class="selectedName === item.name ? 'bg-m-primary/50 text-white' : ''"
|
||||
@click="selectItem(item.name)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 p-6">
|
||||
<component
|
||||
:is="selectedDemoComponent"
|
||||
v-if="selectedDemoComponent"
|
||||
/>
|
||||
<p
|
||||
v-else-if="selectedName"
|
||||
class="text-gray-700"
|
||||
>
|
||||
Page de demo introuvable:
|
||||
<code>.playground/pages/composant/{{ selectedDemoFileName }}.vue</code>
|
||||
</p>
|
||||
<div v-else>
|
||||
<h1 class="text-2xl font-semibold text-gray-900">
|
||||
Playground composants
|
||||
</h1>
|
||||
<p class="mt-2 text-gray-600">
|
||||
Selectionne un composant dans la liste pour afficher sa page de demo.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, reactive, ref, watch, shallowRef} from 'vue'
|
||||
|
||||
type LoadedModule = {
|
||||
default: unknown
|
||||
}
|
||||
|
||||
type Item = {
|
||||
name: string
|
||||
label: string
|
||||
}
|
||||
|
||||
type Group = {
|
||||
category: string
|
||||
items: Item[]
|
||||
}
|
||||
|
||||
const componentModules = import.meta.glob('../../app/components/malio/**/*.vue')
|
||||
const demoModules = import.meta.glob('./composant/**/*.vue')
|
||||
|
||||
const demoByName: Record<string, () => Promise<LoadedModule>> =
|
||||
Object.fromEntries(
|
||||
Object.entries(demoModules).map(([file, loader]) => {
|
||||
const name = file.split('/').pop()?.replace('.vue', '') ?? ''
|
||||
return [name.toLowerCase(), loader as () => Promise<LoadedModule>]
|
||||
}),
|
||||
)
|
||||
|
||||
const groups = computed<Group[]>(() => {
|
||||
const categoryMap = new Map<string, Item[]>()
|
||||
|
||||
Object.keys(componentModules).forEach((file) => {
|
||||
const parts = file.split('/')
|
||||
const name = parts.pop()?.replace('.vue', '') ?? ''
|
||||
const category = parts.pop() ?? ''
|
||||
|
||||
if (!categoryMap.has(category)) {
|
||||
categoryMap.set(category, [])
|
||||
}
|
||||
categoryMap.get(category)!.push({name, label: name})
|
||||
})
|
||||
|
||||
const componentGroups = Array.from(categoryMap.entries())
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([category, items]) => ({
|
||||
category: category.charAt(0).toUpperCase() + category.slice(1),
|
||||
items: items.sort((a, b) => a.label.localeCompare(b.label)),
|
||||
}))
|
||||
|
||||
return [
|
||||
...componentGroups,
|
||||
{
|
||||
category: 'Form',
|
||||
items: [{name: 'client', label: 'Client'}],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const openCategories = reactive(new Set<string>())
|
||||
const selectedName = ref('')
|
||||
const hasInitializedSelection = ref(false)
|
||||
|
||||
watch(
|
||||
groups,
|
||||
(val) => {
|
||||
if (!hasInitializedSelection.value && val.length > 0) {
|
||||
openCategories.add(val[0].category)
|
||||
if (val[0].items.length > 0) {
|
||||
selectedName.value = val[0].items[0].name
|
||||
}
|
||||
hasInitializedSelection.value = true
|
||||
}
|
||||
},
|
||||
{immediate: true},
|
||||
)
|
||||
|
||||
function toggleCategory(category: string) {
|
||||
if (openCategories.has(category)) {
|
||||
openCategories.delete(category)
|
||||
} else {
|
||||
openCategories.add(category)
|
||||
}
|
||||
}
|
||||
|
||||
function selectItem(name: string) {
|
||||
selectedName.value = selectedName.value === name ? '' : name
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
selectedName.value = ''
|
||||
}
|
||||
|
||||
const selectedDemoComponent = shallowRef<unknown>(null)
|
||||
|
||||
watch(selectedName, async (name) => {
|
||||
if (!name) {
|
||||
selectedDemoComponent.value = null
|
||||
return
|
||||
}
|
||||
|
||||
const loader = demoByName[name.toLowerCase()]
|
||||
if (!loader) {
|
||||
selectedDemoComponent.value = null
|
||||
return
|
||||
}
|
||||
|
||||
const mod = await loader()
|
||||
selectedDemoComponent.value = mod.default
|
||||
})
|
||||
|
||||
const selectedDemoFileName = computed(() => {
|
||||
const name = selectedName.value
|
||||
if (!name) return ''
|
||||
return name.charAt(0).toLowerCase() + name.slice(1)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
import type {SidebarSection} from '../app/components/malio/sidebar/Sidebar.vue'
|
||||
|
||||
export const navSections: SidebarSection[] = [
|
||||
{
|
||||
label: 'BOUTONS',
|
||||
icon: 'mdi:gesture-tap-button',
|
||||
items: [
|
||||
{label: 'Button', to: '/composant/button/button'},
|
||||
{label: 'Button Icon', to: '/composant/button/buttonIcon'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'CHAMPS',
|
||||
icon: 'mdi:form-textbox',
|
||||
items: [
|
||||
{label: 'Texte', to: '/composant/input/inputText'},
|
||||
{label: 'Nombre', to: '/composant/input/inputNumber'},
|
||||
{label: 'Montant', to: '/composant/input/inputAmount'},
|
||||
{label: 'Email', to: '/composant/input/inputEmail'},
|
||||
{label: 'Mot de passe', to: '/composant/input/inputPassword'},
|
||||
{label: 'Téléphone', to: '/composant/input/inputPhone'},
|
||||
{label: 'Zone de texte', to: '/composant/input/inputTextArea'},
|
||||
{label: 'Saisie assistée', to: '/composant/input/inputAutocomplete'},
|
||||
{label: 'Upload', to: '/composant/input/inputUpload'},
|
||||
{label: 'Éditeur riche', to: '/composant/input/inputRichText'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'DATES & HEURES',
|
||||
icon: 'mdi:calendar-clock',
|
||||
items: [
|
||||
{label: 'Date', to: '/composant/date/date'},
|
||||
{label: 'Plage de dates', to: '/composant/date/dateRange'},
|
||||
{label: 'Semaine', to: '/composant/date/dateWeek'},
|
||||
{label: 'Heure', to: '/composant/time/time'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'SÉLECTIONS',
|
||||
icon: 'mdi:form-dropdown',
|
||||
items: [
|
||||
{label: 'Select', to: '/composant/select/select'},
|
||||
{label: 'Select Checkbox', to: '/composant/select/selectCheckbox'},
|
||||
{label: 'Checkbox', to: '/composant/checkbox/checkbox'},
|
||||
{label: 'Radio', to: '/composant/radio/radioButton'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'NAVIGATION',
|
||||
icon: 'mdi:navigation-variant',
|
||||
items: [
|
||||
{label: 'Sidebar', to: '/composant/sidebar/sidebar'},
|
||||
{label: 'Drawer', to: '/composant/drawer/drawer'},
|
||||
{label: 'Onglets', to: '/composant/tab/tabList'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'DONNÉES',
|
||||
icon: 'mdi:table',
|
||||
items: [
|
||||
{label: 'DataTable', to: '/composant/datatable/datatable'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'DIVERS',
|
||||
icon: 'mdi:dots-horizontal',
|
||||
items: [
|
||||
{label: 'Sélecteur de site', to: '/composant/site/siteSelector'},
|
||||
{label: 'Formulaire client', to: '/composant/form/client'},
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -30,11 +30,8 @@ Liste des évolutions de la librairie Malio layer UI
|
||||
* [#MUI-30] Création d'un composant email
|
||||
* [#MUI-31] Création d'un composant téléphone
|
||||
* [#MUI-32] Création d'un composant saisie assistée (autocomplete)
|
||||
* [#MUI-34] Revoir le système de playground
|
||||
* [#MUI-33] Développer le composant Datepicker
|
||||
|
||||
### Changed
|
||||
* [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`.
|
||||
|
||||
### Fixed
|
||||
* Hauteur des boutons de pagination du datatable alignée sur le select (40px)
|
||||
|
||||
@@ -584,59 +584,28 @@ Barre latérale de navigation rétractable.
|
||||
|
||||
## MalioDrawer
|
||||
|
||||
Panneau latéral (drawer) qui s'ouvre depuis la droite ou la gauche avec backdrop semi-transparent. Gère l'accessibilité (focus-trap, restitution du focus, `Échap`), le verrouillage du scroll de la page et un empilement correct de plusieurs drawers.
|
||||
Panneau latéral (drawer) qui s'ouvre depuis la droite avec backdrop semi-transparent.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
|
||||
| `side` | `'right' \| 'left'` | `'right'` | Côté d'apparition |
|
||||
| `title` | `string` | `''` | Titre affiché dans le header |
|
||||
| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
|
||||
| `dismissable` | `boolean` | `true` | Fermer au clic sur le backdrop |
|
||||
| `closeOnEscape` | `boolean` | `true` | Fermer avec la touche `Échap` |
|
||||
| `ariaLabel` | `string` | `''` | Nom accessible de secours quand le slot `#header` est absent |
|
||||
| `drawerClass` | `string` | `''` | Classes CSS panneau, ex. largeur `max-w-2xl` (twMerge) |
|
||||
| `overlayClass` | `string` | `''` | Classes CSS backdrop (twMerge) |
|
||||
| `headerClass` | `string` | `''` | Classes CSS barre header (twMerge) |
|
||||
| `bodyClass` | `string` | `''` | Classes CSS zone scrollable (twMerge) |
|
||||
| `footerClass` | `string` | `''` | Classes CSS wrapper du footer (aucune position imposée) |
|
||||
| `drawerClass` | `string` | `''` | Classes CSS panneau (twMerge) |
|
||||
|
||||
**Events :** `update:modelValue(value: boolean)`, `close()`
|
||||
|
||||
**Slots :**
|
||||
- `header` — en-tête (titre, etc.). S'il est absent et que `showClose` est `true`, seule la croix est affichée.
|
||||
- `default` — contenu (zone scrollable).
|
||||
- `footer` — rendu dans la zone scrollable, sans positionnement imposé : le consommateur choisit (`sticky bottom-0`, `fixed`, ou rien).
|
||||
**Events :** `update:modelValue(value: boolean)`
|
||||
**Slots :** `default` (contenu du drawer)
|
||||
|
||||
```vue
|
||||
<MalioDrawer v-model="isOpen">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold">Détails</h2>
|
||||
</template>
|
||||
<MalioDrawer v-model="isOpen" title="Détails">
|
||||
<p>Contenu du drawer</p>
|
||||
</MalioDrawer>
|
||||
|
||||
<!-- Côté gauche, largeur custom -->
|
||||
<MalioDrawer v-model="isOpen" side="left" drawer-class="max-w-2xl">
|
||||
<template #header><h2>Navigation</h2></template>
|
||||
<p>Drawer large depuis la gauche</p>
|
||||
<MalioDrawer v-model="isOpen" title="Sans croix" :show-close="false">
|
||||
<p>Fermeture uniquement via backdrop</p>
|
||||
</MalioDrawer>
|
||||
|
||||
<!-- Footer collé en bas (le consommateur applique le positionnement) -->
|
||||
<MalioDrawer v-model="isOpen">
|
||||
<template #header><h2>Formulaire</h2></template>
|
||||
<MalioInputText label="Nom" />
|
||||
<template #footer>
|
||||
<div class="sticky bottom-0 bg-white py-4">
|
||||
<MalioButton label="Enregistrer" button-class="w-full" @click="isOpen = false" />
|
||||
</div>
|
||||
</template>
|
||||
</MalioDrawer>
|
||||
|
||||
<!-- Non fermable au backdrop / Échap (croix uniquement) -->
|
||||
<MalioDrawer v-model="isOpen" :dismissable="false" :close-on-escape="false">
|
||||
<template #header><h2>Action requise</h2></template>
|
||||
<p>Fermeture via la croix uniquement</p>
|
||||
<MalioDrawer v-model="isOpen" title="Large" drawer-class="max-w-2xl">
|
||||
<p>Drawer plus large</p>
|
||||
</MalioDrawer>
|
||||
```
|
||||
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
:root {
|
||||
/* ── Globales ── */
|
||||
--m-primary: 34 39 131; /* #222783 - Bleu Malio */
|
||||
--m-primary-light: 239 239 253; /* #EFEFFD - Teinte claire du primary (fonds doux) */
|
||||
--m-bg: 243 244 248; /* #F3F4F8 - Fond de page */
|
||||
--m-surface: 243 244 248; /* #F3F4F8 - Fond hover/cartes */
|
||||
--m-text: 15 23 42; /* #0F172A */
|
||||
|
||||
@@ -1,198 +0,0 @@
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import Date_ from './Date.vue'
|
||||
|
||||
type DateProps = {
|
||||
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
|
||||
}
|
||||
|
||||
const DateForTest = Date_ as DefineComponent<DateProps>
|
||||
const mountDate = (props: DateProps = {}) => mount(DateForTest, {props, attachTo: document.body})
|
||||
|
||||
describe('MalioDate', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
describe('rendu', () => {
|
||||
it('renders the label and the calendar icon', () => {
|
||||
const wrapper = mountDate({label: 'Date de naissance'})
|
||||
expect(wrapper.get('label').text()).toBe('Date de naissance')
|
||||
expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the formatted value in the field', () => {
|
||||
const wrapper = mountDate({modelValue: '2026-05-19'})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('19/05/2026')
|
||||
})
|
||||
|
||||
it('does not show the popover initially', () => {
|
||||
const wrapper = mountDate()
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('popover', () => {
|
||||
it('opens on field click', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('opens on the current month when there is no value', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Mai 2026')
|
||||
})
|
||||
|
||||
it('opens on the value month when a value is set', async () => {
|
||||
const wrapper = mountDate({modelValue: '2025-12-25'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
|
||||
})
|
||||
|
||||
it('closes on outside mousedown', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('navigation jours', () => {
|
||||
it('goes to the next month on the right chevron', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="header-next"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Juin 2026')
|
||||
})
|
||||
|
||||
it('rolls December to January and bumps the year', async () => {
|
||||
const wrapper = mountDate({modelValue: '2026-12-15'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="header-next"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Janvier 2027')
|
||||
})
|
||||
})
|
||||
|
||||
describe('sélection', () => {
|
||||
it('emits the ISO date and closes on day click', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('bornes min/max', () => {
|
||||
it('disables days outside the range', async () => {
|
||||
const wrapper = mountDate({min: '2026-05-10', max: '2026-05-20'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
|
||||
expect((outside.element as HTMLButtonElement).disabled).toBe(true)
|
||||
await outside.trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
describe('vue mois', () => {
|
||||
it('switches to month view on header toggle', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="header-toggle"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('navigates the year with chevrons in month view', 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-next"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('2027')
|
||||
})
|
||||
|
||||
it('returns to day view on month click', 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="month"][data-month="0"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(false)
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Janvier 2026')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
describe('effacement', () => {
|
||||
it('shows the clear button when there is a value', () => {
|
||||
const wrapper = mountDate({modelValue: '2026-05-19'})
|
||||
expect(wrapper.find('[data-test="clear"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('hides the clear button when empty', () => {
|
||||
const wrapper = mountDate()
|
||||
expect(wrapper.find('[data-test="clear"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('emits null and does not open the popover on clear', async () => {
|
||||
const wrapper = mountDate({modelValue: '2026-05-19'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('états', () => {
|
||||
it('does not open when disabled', async () => {
|
||||
const wrapper = mountDate({disabled: true})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open when readonly', async () => {
|
||||
const wrapper = mountDate({readonly: true, modelValue: '2026-05-19'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('accessibilité', () => {
|
||||
it('sets aria-invalid and describedby on error', () => {
|
||||
const wrapper = mountDate({error: 'Date requise'})
|
||||
const input = wrapper.get('[data-test="date-input"]')
|
||||
expect(input.attributes('aria-invalid')).toBe('true')
|
||||
expect(input.attributes('aria-describedby')).toBeTruthy()
|
||||
expect(wrapper.text()).toContain('Date requise')
|
||||
})
|
||||
})
|
||||
|
||||
describe('synchronisation externe', () => {
|
||||
it('updates the displayed value when modelValue changes', async () => {
|
||||
const wrapper = mountDate({modelValue: '2026-05-19'})
|
||||
await wrapper.setProps({modelValue: '2026-12-25'})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('25/12/2026')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<CalendarField
|
||||
:id="id"
|
||||
:display-value="displayValue"
|
||||
:sync-to="modelValue ?? 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="emit('update:modelValue', null)"
|
||||
>
|
||||
<template #default="{ currentMonth, currentYear, close }">
|
||||
<MonthGrid
|
||||
:month="currentMonth"
|
||||
:year="currentYear"
|
||||
:selected-date="modelValue ?? null"
|
||||
:min="min"
|
||||
:max="max"
|
||||
@select="(iso) => { emit('update:modelValue', iso); close() }"
|
||||
/>
|
||||
</template>
|
||||
</CalendarField>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, watch} from 'vue'
|
||||
import CalendarField from './internal/CalendarField.vue'
|
||||
import MonthGrid from './internal/MonthGrid.vue'
|
||||
import {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
|
||||
|
||||
defineOptions({name: 'MalioDate', 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 displayValue = computed(() => formatIsoToDisplay(props.modelValue ?? null))
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val && !isValidIso(val) && import.meta.dev) {
|
||||
console.warn(`[MalioDate] modelValue invalide ignoré : "${val}"`)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -1,155 +0,0 @@
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import DateRange from './DateRange.vue'
|
||||
|
||||
type RangeValue = {start: string; end: string}
|
||||
type DateRangeProps = {
|
||||
modelValue?: RangeValue | null
|
||||
label?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
error?: string
|
||||
min?: string
|
||||
max?: string
|
||||
clearable?: boolean
|
||||
}
|
||||
|
||||
const DateRangeForTest = DateRange as DefineComponent<DateRangeProps>
|
||||
const mountRange = (props: DateRangeProps = {}) =>
|
||||
mount(DateRangeForTest, {props, attachTo: document.body})
|
||||
|
||||
const openAndClickDays = async (wrapper: ReturnType<typeof mountRange>, isos: string[]) => {
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
for (const iso of isos) {
|
||||
await wrapper.get(`[data-test="day"][data-iso="${iso}"]`).trigger('click')
|
||||
}
|
||||
}
|
||||
|
||||
describe('MalioDateRange', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
it('renders the label and calendar icon', () => {
|
||||
const wrapper = mountRange({label: 'Période'})
|
||||
expect(wrapper.get('label').text()).toBe('Période')
|
||||
expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the formatted range when modelValue is set', () => {
|
||||
const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('19/05/2026 - 25/05/2026')
|
||||
})
|
||||
|
||||
it('shows an empty field without a value', () => {
|
||||
const wrapper = mountRange()
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('')
|
||||
})
|
||||
|
||||
it('opens on the start month when a range is set', async () => {
|
||||
const wrapper = mountRange({modelValue: {start: '2025-12-10', end: '2025-12-20'}})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
|
||||
})
|
||||
|
||||
it('does not emit on the first click', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-19'])
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('emits the range and closes on the second click', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-19', '2026-05-25'])
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-25'}])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('auto-inverts when the second click is before the first', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-25', '2026-05-19'])
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-25'}])
|
||||
})
|
||||
|
||||
it('allows a single-day range', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-19', '2026-05-19'])
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-19'}])
|
||||
})
|
||||
|
||||
it('restarts a new range on the third click', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-19', '2026-05-25'])
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-10"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-12"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-10', end: '2026-05-12'}])
|
||||
})
|
||||
|
||||
it('previews the range on hover while selecting', async () => {
|
||||
const wrapper = mountRange()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-22"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('does not preview before selecting', async () => {
|
||||
const wrapper = mountRange()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-22"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('none')
|
||||
})
|
||||
|
||||
it('marks start, end and in-range roles for a committed range', async () => {
|
||||
const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-19"]').attributes('data-range-role')).toBe('start')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-25"]').attributes('data-range-role')).toBe('end')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-22"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('cancels an in-progress selection on outside click', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-19'])
|
||||
document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-19"]').attributes('data-range-role')).toBe('none')
|
||||
})
|
||||
|
||||
it('emits null on clear', async () => {
|
||||
const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
})
|
||||
|
||||
it('disables days outside min/max', async () => {
|
||||
const wrapper = mountRange({min: '2026-05-10', max: '2026-05-20'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
|
||||
expect((outside.element as HTMLButtonElement).disabled).toBe(true)
|
||||
await outside.trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('sets aria-invalid on error', () => {
|
||||
const wrapper = mountRange({error: 'Période requise'})
|
||||
expect(wrapper.get('[data-test="date-input"]').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.text()).toContain('Période requise')
|
||||
})
|
||||
|
||||
it('does not open when disabled', async () => {
|
||||
const wrapper = mountRange({disabled: true})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
@@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<CalendarField
|
||||
:id="id"
|
||||
:display-value="displayValue"
|
||||
:sync-to="validRange?.start ?? 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="rangeStart"
|
||||
:range-end="rangeEnd"
|
||||
:preview-date="previewDate"
|
||||
:min="min"
|
||||
:max="max"
|
||||
@select="(iso) => onSelectDay(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 {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
|
||||
import {normalizeRange, type DateRangeValue} from './composables/dateRange'
|
||||
|
||||
defineOptions({name: 'MalioDateRange', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: DateRangeValue | 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: DateRangeValue | null): void}>()
|
||||
|
||||
const pendingStart = ref<string | null>(null)
|
||||
const hoverDate = ref<string | null>(null)
|
||||
const isSelecting = computed(() => pendingStart.value !== null)
|
||||
|
||||
const validRange = computed<DateRangeValue | null>(() => {
|
||||
const v = props.modelValue
|
||||
if (v && isValidIso(v.start) && isValidIso(v.end)) return v
|
||||
return null
|
||||
})
|
||||
|
||||
const rangeStart = computed(() =>
|
||||
isSelecting.value ? pendingStart.value : (validRange.value?.start ?? null),
|
||||
)
|
||||
const rangeEnd = computed(() =>
|
||||
isSelecting.value ? null : (validRange.value?.end ?? null),
|
||||
)
|
||||
const previewDate = computed(() => (isSelecting.value ? hoverDate.value : null))
|
||||
|
||||
const displayValue = computed(() => {
|
||||
if (isSelecting.value || !validRange.value) return ''
|
||||
return `${formatIsoToDisplay(validRange.value.start)} - ${formatIsoToDisplay(validRange.value.end)}`
|
||||
})
|
||||
|
||||
const onSelectDay = (iso: string, close: () => void) => {
|
||||
if (pendingStart.value === null) {
|
||||
pendingStart.value = iso
|
||||
hoverDate.value = null
|
||||
return
|
||||
}
|
||||
emit('update:modelValue', normalizeRange(pendingStart.value, iso))
|
||||
pendingStart.value = null
|
||||
hoverDate.value = null
|
||||
close()
|
||||
}
|
||||
|
||||
const onHover = (iso: string | null) => {
|
||||
if (isSelecting.value) hoverDate.value = iso
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
pendingStart.value = null
|
||||
hoverDate.value = null
|
||||
}
|
||||
|
||||
const onClear = () => {
|
||||
emit('update:modelValue', null)
|
||||
pendingStart.value = null
|
||||
hoverDate.value = null
|
||||
}
|
||||
</script>
|
||||
@@ -1,122 +0,0 @@
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import DateWeek from './DateWeek.vue'
|
||||
|
||||
type DateWeekProps = {
|
||||
modelValue?: string | null
|
||||
label?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
error?: string
|
||||
min?: string
|
||||
max?: string
|
||||
}
|
||||
|
||||
const DateWeekForTest = DateWeek as DefineComponent<DateWeekProps>
|
||||
const mountWeek = (props: DateWeekProps = {}) =>
|
||||
mount(DateWeekForTest, {props, attachTo: document.body})
|
||||
|
||||
describe('MalioDateWeek', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
it('renders the label and calendar icon', () => {
|
||||
const wrapper = mountWeek({label: 'Semaine'})
|
||||
expect(wrapper.get('label').text()).toBe('Semaine')
|
||||
expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the formatted week when modelValue is set', () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('Semaine 21 (18/05 → 24/05/2026)')
|
||||
})
|
||||
|
||||
it('shows an empty field without a value', () => {
|
||||
const wrapper = mountWeek()
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('')
|
||||
})
|
||||
|
||||
it('opens on the month of the selected week', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W01'}) // lundi 2025-12-29
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
|
||||
})
|
||||
|
||||
it('selects the week when a day is clicked', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('selects the week when the week number is clicked', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('previews the whole week on day hover', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-24"]').attributes('data-range-role')).toBe('end')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('previews the whole week on week-number hover', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-22"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('marks the committed week number', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').attributes('data-marked')).toBe('true')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
|
||||
})
|
||||
|
||||
it('emits null on clear', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
})
|
||||
|
||||
it('disables a week fully outside min/max', async () => {
|
||||
const wrapper = mountWeek({min: '2026-05-18', max: '2026-05-31'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const earlyWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-11"]')
|
||||
expect((earlyWeek.element as HTMLButtonElement).disabled).toBe(true)
|
||||
const selectableWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]')
|
||||
expect((selectableWeek.element as HTMLButtonElement).disabled).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open when disabled', async () => {
|
||||
const wrapper = mountWeek({disabled: true})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open when readonly', async () => {
|
||||
const wrapper = mountWeek({readonly: true, modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('sets aria-invalid on error', () => {
|
||||
const wrapper = mountWeek({error: 'Semaine requise'})
|
||||
expect(wrapper.get('[data-test="date-input"]').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.text()).toContain('Semaine requise')
|
||||
})
|
||||
})
|
||||
@@ -1,123 +0,0 @@
|
||||
<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>
|
||||
@@ -1,62 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {formatIsoToDisplay, isDateInRange, isValidIso, parseDisplayToIso} from './dateFormat'
|
||||
|
||||
describe('dateFormat', () => {
|
||||
describe('isValidIso', () => {
|
||||
it('accepts a real ISO date', () => {
|
||||
expect(isValidIso('2026-05-19')).toBe(true)
|
||||
})
|
||||
it('rejects a malformed string', () => {
|
||||
expect(isValidIso('19/05/2026')).toBe(false)
|
||||
expect(isValidIso('2026-5-9')).toBe(false)
|
||||
expect(isValidIso('')).toBe(false)
|
||||
})
|
||||
it('rejects an impossible date', () => {
|
||||
expect(isValidIso('2026-02-30')).toBe(false)
|
||||
expect(isValidIso('2026-13-01')).toBe(false)
|
||||
})
|
||||
it('accepts Feb 29 on a leap year and rejects it otherwise', () => {
|
||||
expect(isValidIso('2024-02-29')).toBe(true)
|
||||
expect(isValidIso('2026-02-29')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('formatIsoToDisplay', () => {
|
||||
it('formats ISO to DD/MM/YYYY', () => {
|
||||
expect(formatIsoToDisplay('2026-05-19')).toBe('19/05/2026')
|
||||
})
|
||||
it('returns empty string for null or invalid input', () => {
|
||||
expect(formatIsoToDisplay(null)).toBe('')
|
||||
expect(formatIsoToDisplay('nope')).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
describe('parseDisplayToIso', () => {
|
||||
it('parses DD/MM/YYYY to ISO', () => {
|
||||
expect(parseDisplayToIso('19/05/2026')).toBe('2026-05-19')
|
||||
})
|
||||
it('returns null for malformed or impossible input', () => {
|
||||
expect(parseDisplayToIso('2026-05-19')).toBeNull()
|
||||
expect(parseDisplayToIso('31/02/2026')).toBeNull()
|
||||
expect(parseDisplayToIso('')).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('isDateInRange', () => {
|
||||
it('returns true when no bounds are given', () => {
|
||||
expect(isDateInRange('2026-05-19')).toBe(true)
|
||||
})
|
||||
it('respects the min bound (inclusive)', () => {
|
||||
expect(isDateInRange('2026-05-19', '2026-05-19')).toBe(true)
|
||||
expect(isDateInRange('2026-05-18', '2026-05-19')).toBe(false)
|
||||
})
|
||||
it('respects the max bound (inclusive)', () => {
|
||||
expect(isDateInRange('2026-05-19', undefined, '2026-05-19')).toBe(true)
|
||||
expect(isDateInRange('2026-05-20', undefined, '2026-05-19')).toBe(false)
|
||||
})
|
||||
it('respects both bounds', () => {
|
||||
expect(isDateInRange('2026-05-15', '2026-05-10', '2026-05-20')).toBe(true)
|
||||
expect(isDateInRange('2026-05-25', '2026-05-10', '2026-05-20')).toBe(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,26 +0,0 @@
|
||||
export function isValidIso(iso: string): boolean {
|
||||
if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return false
|
||||
const [y, m, d] = iso.split('-').map(Number)
|
||||
const date = new Date(y, m - 1, d)
|
||||
return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d
|
||||
}
|
||||
|
||||
export function formatIsoToDisplay(iso: string | null): string {
|
||||
if (!iso || !isValidIso(iso)) return ''
|
||||
const [y, m, d] = iso.split('-')
|
||||
return `${d}/${m}/${y}`
|
||||
}
|
||||
|
||||
export function parseDisplayToIso(display: string): string | null {
|
||||
const match = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(display.trim())
|
||||
if (!match) return null
|
||||
const [, dd, mm, yyyy] = match
|
||||
const iso = `${yyyy}-${mm}-${dd}`
|
||||
return isValidIso(iso) ? iso : null
|
||||
}
|
||||
|
||||
export function isDateInRange(iso: string, min?: string, max?: string): boolean {
|
||||
if (min && iso < min) return false
|
||||
if (max && iso > max) return false
|
||||
return true
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {dayRangeRole, normalizeRange, resolveRangeBounds} from './dateRange'
|
||||
|
||||
describe('dateRange', () => {
|
||||
describe('normalizeRange', () => {
|
||||
it('keeps an already ordered pair', () => {
|
||||
expect(normalizeRange('2026-05-19', '2026-05-25')).toEqual({start: '2026-05-19', end: '2026-05-25'})
|
||||
})
|
||||
it('swaps a reversed pair', () => {
|
||||
expect(normalizeRange('2026-05-25', '2026-05-19')).toEqual({start: '2026-05-19', end: '2026-05-25'})
|
||||
})
|
||||
it('handles an equal pair', () => {
|
||||
expect(normalizeRange('2026-05-19', '2026-05-19')).toEqual({start: '2026-05-19', end: '2026-05-19'})
|
||||
})
|
||||
})
|
||||
|
||||
describe('resolveRangeBounds', () => {
|
||||
it('returns null without a start', () => {
|
||||
expect(resolveRangeBounds(null, null, null)).toBeNull()
|
||||
})
|
||||
it('returns a single-point range when only start is set', () => {
|
||||
expect(resolveRangeBounds('2026-05-19', null, null)).toEqual({lo: '2026-05-19', hi: '2026-05-19'})
|
||||
})
|
||||
it('orders start and committed end', () => {
|
||||
expect(resolveRangeBounds('2026-05-19', '2026-05-25', null)).toEqual({lo: '2026-05-19', hi: '2026-05-25'})
|
||||
})
|
||||
it('uses preview when end is not set', () => {
|
||||
expect(resolveRangeBounds('2026-05-19', null, '2026-05-22')).toEqual({lo: '2026-05-19', hi: '2026-05-22'})
|
||||
})
|
||||
it('inverts when preview is before start', () => {
|
||||
expect(resolveRangeBounds('2026-05-19', null, '2026-05-10')).toEqual({lo: '2026-05-10', hi: '2026-05-19'})
|
||||
})
|
||||
it('prioritises committed end over preview', () => {
|
||||
expect(resolveRangeBounds('2026-05-19', '2026-05-25', '2026-05-30')).toEqual({lo: '2026-05-19', hi: '2026-05-25'})
|
||||
})
|
||||
})
|
||||
|
||||
describe('dayRangeRole', () => {
|
||||
const bounds = {lo: '2026-05-19', hi: '2026-05-25'}
|
||||
it('returns none without bounds', () => {
|
||||
expect(dayRangeRole('2026-05-20', null)).toBe('none')
|
||||
})
|
||||
it('returns single when lo === hi and matches', () => {
|
||||
expect(dayRangeRole('2026-05-19', {lo: '2026-05-19', hi: '2026-05-19'})).toBe('single')
|
||||
expect(dayRangeRole('2026-05-20', {lo: '2026-05-19', hi: '2026-05-19'})).toBe('none')
|
||||
})
|
||||
it('returns start, end and in-range', () => {
|
||||
expect(dayRangeRole('2026-05-19', bounds)).toBe('start')
|
||||
expect(dayRangeRole('2026-05-25', bounds)).toBe('end')
|
||||
expect(dayRangeRole('2026-05-22', bounds)).toBe('in-range')
|
||||
})
|
||||
it('returns none outside the bounds', () => {
|
||||
expect(dayRangeRole('2026-05-10', bounds)).toBe('none')
|
||||
expect(dayRangeRole('2026-05-30', bounds)).toBe('none')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,31 +0,0 @@
|
||||
export type DateRangeValue = {start: string; end: string}
|
||||
|
||||
export function normalizeRange(a: string, b: string): DateRangeValue {
|
||||
return a <= b ? {start: a, end: b} : {start: b, end: a}
|
||||
}
|
||||
|
||||
export function resolveRangeBounds(
|
||||
start: string | null,
|
||||
end: string | null,
|
||||
preview: string | null,
|
||||
): {lo: string; hi: string} | null {
|
||||
if (!start) return null
|
||||
const other = end ?? preview
|
||||
if (!other) return {lo: start, hi: start}
|
||||
return start <= other ? {lo: start, hi: other} : {lo: other, hi: start}
|
||||
}
|
||||
|
||||
export type DayRangeRole = 'none' | 'single' | 'start' | 'end' | 'in-range'
|
||||
|
||||
export function dayRangeRole(
|
||||
iso: string,
|
||||
bounds: {lo: string; hi: string} | null,
|
||||
): DayRangeRole {
|
||||
if (!bounds) return 'none'
|
||||
const {lo, hi} = bounds
|
||||
if (lo === hi) return iso === lo ? 'single' : 'none'
|
||||
if (iso === lo) return 'start'
|
||||
if (iso === hi) return 'end'
|
||||
if (iso > lo && iso < hi) return 'in-range'
|
||||
return 'none'
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {
|
||||
formatWeekDisplay,
|
||||
isValidIsoWeek,
|
||||
isoWeekToMonday,
|
||||
mondayOf,
|
||||
sundayOf,
|
||||
toIsoWeek,
|
||||
} from './dateWeek'
|
||||
|
||||
describe('dateWeek', () => {
|
||||
describe('mondayOf / sundayOf', () => {
|
||||
it('returns Monday and Sunday of a midweek date', () => {
|
||||
expect(mondayOf('2026-05-20')).toBe('2026-05-18') // mercredi
|
||||
expect(sundayOf('2026-05-20')).toBe('2026-05-24')
|
||||
})
|
||||
it('keeps Monday on a Monday', () => {
|
||||
expect(mondayOf('2026-05-18')).toBe('2026-05-18')
|
||||
})
|
||||
it('returns the preceding Monday for a Sunday', () => {
|
||||
expect(mondayOf('2026-05-24')).toBe('2026-05-18')
|
||||
})
|
||||
})
|
||||
|
||||
describe('toIsoWeek', () => {
|
||||
it('returns the ISO week of a date', () => {
|
||||
expect(toIsoWeek('2026-05-20')).toBe('2026-W21')
|
||||
})
|
||||
it('handles year boundaries', () => {
|
||||
expect(toIsoWeek('2026-01-01')).toBe('2026-W01')
|
||||
expect(toIsoWeek('2025-12-31')).toBe('2026-W01')
|
||||
expect(toIsoWeek('2027-01-01')).toBe('2026-W53')
|
||||
})
|
||||
})
|
||||
|
||||
describe('isoWeekToMonday', () => {
|
||||
it('returns the Monday of a week string', () => {
|
||||
expect(isoWeekToMonday('2026-W21')).toBe('2026-05-18')
|
||||
})
|
||||
it('round-trips with toIsoWeek', () => {
|
||||
for (const w of ['2026-W01', '2026-W21', '2026-W53', '2024-W09']) {
|
||||
const monday = isoWeekToMonday(w)
|
||||
expect(monday).not.toBeNull()
|
||||
expect(toIsoWeek(monday as string)).toBe(w)
|
||||
}
|
||||
})
|
||||
it('returns null for invalid input', () => {
|
||||
expect(isoWeekToMonday('2026-21')).toBeNull()
|
||||
expect(isoWeekToMonday('2026-W00')).toBeNull()
|
||||
expect(isoWeekToMonday('2026-W54')).toBeNull()
|
||||
expect(isoWeekToMonday('2025-W53')).toBeNull() // 2025 n'a que 52 semaines ISO
|
||||
})
|
||||
})
|
||||
|
||||
describe('isValidIsoWeek', () => {
|
||||
it('accepts a real ISO week', () => {
|
||||
expect(isValidIsoWeek('2026-W21')).toBe(true)
|
||||
})
|
||||
it('rejects malformed or impossible weeks', () => {
|
||||
expect(isValidIsoWeek('2026-21')).toBe(false)
|
||||
expect(isValidIsoWeek('2026-W00')).toBe(false)
|
||||
expect(isValidIsoWeek('2026-W54')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('formatWeekDisplay', () => {
|
||||
it('formats a week as a human label', () => {
|
||||
expect(formatWeekDisplay('2026-W21')).toBe('Semaine 21 (18/05 → 24/05/2026)')
|
||||
})
|
||||
it('returns empty string for invalid input', () => {
|
||||
expect(formatWeekDisplay('2026-W54')).toBe('')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,67 +0,0 @@
|
||||
import {formatIsoToDisplay} from './dateFormat'
|
||||
|
||||
const parseUtc = (iso: string): Date => {
|
||||
const [y, m, d] = iso.split('-').map(Number)
|
||||
return new Date(Date.UTC(y, m - 1, d))
|
||||
}
|
||||
|
||||
const toIso = (d: Date): string => {
|
||||
const y = d.getUTCFullYear()
|
||||
const m = String(d.getUTCMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getUTCDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${day}`
|
||||
}
|
||||
|
||||
export function mondayOf(iso: string): string {
|
||||
const d = parseUtc(iso)
|
||||
const dayNum = d.getUTCDay() || 7 // dimanche = 7
|
||||
d.setUTCDate(d.getUTCDate() - (dayNum - 1))
|
||||
return toIso(d)
|
||||
}
|
||||
|
||||
export function sundayOf(iso: string): string {
|
||||
const d = parseUtc(mondayOf(iso))
|
||||
d.setUTCDate(d.getUTCDate() + 6)
|
||||
return toIso(d)
|
||||
}
|
||||
|
||||
export function toIsoWeek(iso: string): string {
|
||||
const d = parseUtc(iso)
|
||||
const dayNum = d.getUTCDay() || 7
|
||||
d.setUTCDate(d.getUTCDate() + 4 - dayNum) // jeudi de la semaine
|
||||
const isoYear = d.getUTCFullYear()
|
||||
const yearStart = new Date(Date.UTC(isoYear, 0, 1))
|
||||
const week = Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
|
||||
return `${isoYear}-W${String(week).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
export function isoWeekToMonday(week: string): string | null {
|
||||
const m = /^(\d{4})-W(\d{2})$/.exec(week)
|
||||
if (!m) return null
|
||||
const year = Number(m[1])
|
||||
const w = Number(m[2])
|
||||
if (w < 1 || w > 53) return null
|
||||
// Lundi de la semaine 1 = lundi de la semaine contenant le 4 janvier
|
||||
const jan4 = new Date(Date.UTC(year, 0, 4))
|
||||
const jan4Day = jan4.getUTCDay() || 7
|
||||
const monday = new Date(jan4)
|
||||
monday.setUTCDate(jan4.getUTCDate() - (jan4Day - 1) + (w - 1) * 7)
|
||||
const iso = toIso(monday)
|
||||
// Garde-fou : la semaine 53 n'existe pas pour toutes les années
|
||||
if (toIsoWeek(iso) !== week) return null
|
||||
return iso
|
||||
}
|
||||
|
||||
export function isValidIsoWeek(week: string): boolean {
|
||||
return isoWeekToMonday(week) !== null
|
||||
}
|
||||
|
||||
export function formatWeekDisplay(week: string): string {
|
||||
const monday = isoWeekToMonday(week)
|
||||
if (!monday) return ''
|
||||
const sunday = sundayOf(monday)
|
||||
const w = Number(week.slice(6))
|
||||
const startDdMm = formatIsoToDisplay(monday).slice(0, 5) // "18/05"
|
||||
const endFull = formatIsoToDisplay(sunday) // "24/05/2026"
|
||||
return `Semaine ${w} (${startDdMm} → ${endFull})`
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {defineComponent, h, ref} from 'vue'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import {useCalendarPopover} from './useCalendarPopover'
|
||||
|
||||
const mountHost = () => {
|
||||
const api: ReturnType<typeof useCalendarPopover> = {} as never
|
||||
const Host = defineComponent({
|
||||
setup() {
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
Object.assign(api, useCalendarPopover(root))
|
||||
return () => h('div', {ref: root}, 'host')
|
||||
},
|
||||
})
|
||||
const wrapper = mount(Host, {attachTo: document.body})
|
||||
return {wrapper, api}
|
||||
}
|
||||
|
||||
describe('useCalendarPopover', () => {
|
||||
it('starts closed in days view', () => {
|
||||
const {api} = mountHost()
|
||||
expect(api.isOpen.value).toBe(false)
|
||||
expect(api.viewMode.value).toBe('days')
|
||||
})
|
||||
|
||||
it('open() opens in days view', () => {
|
||||
const {api} = mountHost()
|
||||
api.open()
|
||||
expect(api.isOpen.value).toBe(true)
|
||||
expect(api.viewMode.value).toBe('days')
|
||||
})
|
||||
|
||||
it('toggleView() switches between days and months', () => {
|
||||
const {api} = mountHost()
|
||||
api.open()
|
||||
api.toggleView()
|
||||
expect(api.viewMode.value).toBe('months')
|
||||
api.toggleView()
|
||||
expect(api.viewMode.value).toBe('days')
|
||||
})
|
||||
|
||||
it('close() resets isOpen and viewMode', () => {
|
||||
const {api} = mountHost()
|
||||
api.open()
|
||||
api.toggleView()
|
||||
api.close()
|
||||
expect(api.isOpen.value).toBe(false)
|
||||
expect(api.viewMode.value).toBe('days')
|
||||
})
|
||||
|
||||
it('closes on outside mousedown', () => {
|
||||
const {api} = mountHost()
|
||||
api.open()
|
||||
document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
|
||||
expect(api.isOpen.value).toBe(false)
|
||||
})
|
||||
|
||||
it('stays open on inside mousedown', () => {
|
||||
const {wrapper, api} = mountHost()
|
||||
api.open()
|
||||
wrapper.element.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
|
||||
expect(api.isOpen.value).toBe(true)
|
||||
})
|
||||
})
|
||||
@@ -1,28 +0,0 @@
|
||||
import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
|
||||
|
||||
export function useCalendarPopover(rootRef: Ref<HTMLElement | null>) {
|
||||
const isOpen = ref(false)
|
||||
const viewMode = ref<'days' | 'months'>('days')
|
||||
|
||||
const open = () => {
|
||||
isOpen.value = true
|
||||
viewMode.value = 'days'
|
||||
}
|
||||
const close = () => {
|
||||
isOpen.value = false
|
||||
viewMode.value = 'days'
|
||||
}
|
||||
const toggleView = () => {
|
||||
viewMode.value = viewMode.value === 'days' ? 'months' : 'days'
|
||||
}
|
||||
|
||||
const onMouseDown = (event: MouseEvent) => {
|
||||
if (!isOpen.value || !rootRef.value) return
|
||||
if (!rootRef.value.contains(event.target as Node)) close()
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('mousedown', onMouseDown))
|
||||
onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
|
||||
|
||||
return {isOpen, viewMode, open, close, toggleView}
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {ref} from 'vue'
|
||||
import {useCalendarView} from './useCalendarView'
|
||||
|
||||
describe('useCalendarView', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
it('initialises to the current month and year', () => {
|
||||
const {currentMonth, currentYear} = useCalendarView(ref('days'))
|
||||
expect(currentMonth.value).toBe(4)
|
||||
expect(currentYear.value).toBe(2026)
|
||||
})
|
||||
|
||||
it('goToNext advances the month in days view', () => {
|
||||
const {currentMonth, goToNext} = useCalendarView(ref('days'))
|
||||
goToNext()
|
||||
expect(currentMonth.value).toBe(5)
|
||||
})
|
||||
|
||||
it('rolls December to January and bumps the year', () => {
|
||||
const {currentMonth, currentYear, goToNext} = useCalendarView(ref('days'))
|
||||
currentMonth.value = 11
|
||||
goToNext()
|
||||
expect(currentMonth.value).toBe(0)
|
||||
expect(currentYear.value).toBe(2027)
|
||||
})
|
||||
|
||||
it('rolls January to December backwards', () => {
|
||||
const {currentMonth, currentYear, goToPrev} = useCalendarView(ref('days'))
|
||||
currentMonth.value = 0
|
||||
goToPrev()
|
||||
expect(currentMonth.value).toBe(11)
|
||||
expect(currentYear.value).toBe(2025)
|
||||
})
|
||||
|
||||
it('navigates the year in months view', () => {
|
||||
const {currentYear, goToNext, goToPrev} = useCalendarView(ref('months'))
|
||||
goToNext()
|
||||
expect(currentYear.value).toBe(2027)
|
||||
goToPrev()
|
||||
expect(currentYear.value).toBe(2026)
|
||||
})
|
||||
|
||||
it('selectMonth sets the current month', () => {
|
||||
const {currentMonth, selectMonth} = useCalendarView(ref('days'))
|
||||
selectMonth(0)
|
||||
expect(currentMonth.value).toBe(0)
|
||||
})
|
||||
|
||||
it('syncToIso sets month/year from a valid ISO', () => {
|
||||
const {currentMonth, currentYear, syncToIso} = useCalendarView(ref('days'))
|
||||
syncToIso('2025-12-25')
|
||||
expect(currentMonth.value).toBe(11)
|
||||
expect(currentYear.value).toBe(2025)
|
||||
})
|
||||
|
||||
it('syncToIso falls back to today for null/invalid', () => {
|
||||
const {currentMonth, currentYear, syncToIso} = useCalendarView(ref('days'))
|
||||
syncToIso('2025-12-25')
|
||||
syncToIso(null)
|
||||
expect(currentMonth.value).toBe(4)
|
||||
expect(currentYear.value).toBe(2026)
|
||||
})
|
||||
})
|
||||
@@ -1,51 +0,0 @@
|
||||
import {ref, type Ref} from 'vue'
|
||||
import {isValidIso} from './dateFormat'
|
||||
|
||||
export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
|
||||
const today = new Date()
|
||||
const currentMonth = ref(today.getMonth())
|
||||
const currentYear = ref(today.getFullYear())
|
||||
|
||||
const goToPrev = () => {
|
||||
if (viewMode.value === 'months') {
|
||||
currentYear.value -= 1
|
||||
return
|
||||
}
|
||||
if (currentMonth.value === 0) {
|
||||
currentMonth.value = 11
|
||||
currentYear.value -= 1
|
||||
} else {
|
||||
currentMonth.value -= 1
|
||||
}
|
||||
}
|
||||
|
||||
const goToNext = () => {
|
||||
if (viewMode.value === 'months') {
|
||||
currentYear.value += 1
|
||||
return
|
||||
}
|
||||
if (currentMonth.value === 11) {
|
||||
currentMonth.value = 0
|
||||
currentYear.value += 1
|
||||
} else {
|
||||
currentMonth.value += 1
|
||||
}
|
||||
}
|
||||
|
||||
const selectMonth = (m: number) => {
|
||||
currentMonth.value = m
|
||||
}
|
||||
|
||||
const syncToIso = (iso: string | null) => {
|
||||
if (iso && isValidIso(iso)) {
|
||||
currentMonth.value = Number(iso.slice(5, 7)) - 1
|
||||
currentYear.value = Number(iso.slice(0, 4))
|
||||
} else {
|
||||
const now = new Date()
|
||||
currentMonth.value = now.getMonth()
|
||||
currentYear.value = now.getFullYear()
|
||||
}
|
||||
}
|
||||
|
||||
return {currentMonth, currentYear, goToPrev, goToNext, selectMonth, syncToIso}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {ref} from 'vue'
|
||||
import {useMonthMatrix} from './useMonthMatrix'
|
||||
|
||||
describe('useMonthMatrix', () => {
|
||||
it('always produces 6 weeks of 7 days', () => {
|
||||
const {weeks} = useMonthMatrix(ref(4), ref(2026)) // mai 2026
|
||||
expect(weeks.value).toHaveLength(6)
|
||||
weeks.value.forEach(week => expect(week.days).toHaveLength(7))
|
||||
})
|
||||
|
||||
it('starts every week on a Monday', () => {
|
||||
const {weeks} = useMonthMatrix(ref(4), ref(2026))
|
||||
weeks.value.forEach(week => {
|
||||
const first = new Date(`${week.days[0].isoDate}T00:00:00`)
|
||||
expect(first.getDay()).toBe(1) // 1 = lundi
|
||||
})
|
||||
})
|
||||
|
||||
it('flags exactly the days of the current month', () => {
|
||||
const {weeks} = useMonthMatrix(ref(4), ref(2026)) // mai = 31 jours
|
||||
const currentMonthDays = weeks.value
|
||||
.flatMap(w => w.days)
|
||||
.filter(d => d.isCurrentMonth)
|
||||
expect(currentMonthDays).toHaveLength(31)
|
||||
expect(currentMonthDays.every(d => d.isoDate.startsWith('2026-05'))).toBe(true)
|
||||
})
|
||||
|
||||
it('handles leap year February (29 days)', () => {
|
||||
const {weeks} = useMonthMatrix(ref(1), ref(2024)) // février 2024
|
||||
const days = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth)
|
||||
expect(days).toHaveLength(29)
|
||||
})
|
||||
|
||||
it('assigns ISO week 1 to the week containing Jan 4th', () => {
|
||||
const {weeks} = useMonthMatrix(ref(0), ref(2026)) // janvier 2026
|
||||
const weekWithJan4 = weeks.value.find(w =>
|
||||
w.days.some(d => d.isoDate === '2026-01-04'),
|
||||
)
|
||||
expect(weekWithJan4?.weekNumber).toBe(1)
|
||||
})
|
||||
|
||||
it('reacts to month/year changes', () => {
|
||||
const month = ref(4)
|
||||
const year = ref(2026)
|
||||
const {weeks} = useMonthMatrix(month, year)
|
||||
const mayCount = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth).length
|
||||
month.value = 1 // février
|
||||
year.value = 2024
|
||||
const febCount = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth).length
|
||||
expect(mayCount).toBe(31)
|
||||
expect(febCount).toBe(29)
|
||||
})
|
||||
|
||||
describe('isToday', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
it('flags only today', () => {
|
||||
const {weeks} = useMonthMatrix(ref(4), ref(2026))
|
||||
const todays = weeks.value.flatMap(w => w.days).filter(d => d.isToday)
|
||||
expect(todays).toHaveLength(1)
|
||||
expect(todays[0].isoDate).toBe('2026-05-19')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,60 +0,0 @@
|
||||
import {computed, type ComputedRef, type Ref} from 'vue'
|
||||
|
||||
export type DayCell = {
|
||||
isoDate: string
|
||||
day: number
|
||||
isCurrentMonth: boolean
|
||||
isToday: boolean
|
||||
}
|
||||
export type WeekRow = {
|
||||
weekNumber: number
|
||||
days: DayCell[]
|
||||
}
|
||||
|
||||
const toIso = (d: Date): string => {
|
||||
const y = d.getFullYear()
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${day}`
|
||||
}
|
||||
|
||||
const isoWeek = (d: Date): number => {
|
||||
const target = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))
|
||||
const dayNum = target.getUTCDay() || 7 // dimanche = 7
|
||||
target.setUTCDate(target.getUTCDate() + 4 - dayNum) // jeudi de la semaine
|
||||
const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1))
|
||||
return Math.ceil((((target.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
|
||||
}
|
||||
|
||||
export function useMonthMatrix(
|
||||
month: Ref<number>,
|
||||
year: Ref<number>,
|
||||
): {weeks: ComputedRef<WeekRow[]>} {
|
||||
const weeks = computed<WeekRow[]>(() => {
|
||||
const todayIso = toIso(new Date())
|
||||
const first = new Date(year.value, month.value, 1)
|
||||
// recule jusqu'au lundi (getDay : 0 = dimanche)
|
||||
const offset = (first.getDay() + 6) % 7
|
||||
const start = new Date(year.value, month.value, 1 - offset)
|
||||
|
||||
const rows: WeekRow[] = []
|
||||
const cursor = new Date(start)
|
||||
for (let w = 0; w < 6; w++) {
|
||||
const days: DayCell[] = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const iso = toIso(cursor)
|
||||
days.push({
|
||||
isoDate: iso,
|
||||
day: cursor.getDate(),
|
||||
isCurrentMonth: cursor.getMonth() === month.value,
|
||||
isToday: iso === todayIso,
|
||||
})
|
||||
cursor.setDate(cursor.getDate() + 1)
|
||||
}
|
||||
rows.push({weekNumber: isoWeek(new Date(`${days[0].isoDate}T00:00:00`)), days})
|
||||
}
|
||||
return rows
|
||||
})
|
||||
|
||||
return {weeks}
|
||||
}
|
||||
@@ -1,239 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
ref="root"
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
data-test="date-input"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:value="displayValue"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:aria-expanded="isOpen"
|
||||
aria-haspopup="dialog"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@click="onFieldClick"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||
<button
|
||||
v-if="showClear"
|
||||
type="button"
|
||||
data-test="clear"
|
||||
class="text-m-muted hover:text-m-primary"
|
||||
aria-label="Effacer la date"
|
||||
@click.stop="emit('clear')"
|
||||
>
|
||||
<Icon
|
||||
icon="mdi:close"
|
||||
:width="16"
|
||||
:height="16"
|
||||
/>
|
||||
</button>
|
||||
<Icon
|
||||
data-test="calendar-icon"
|
||||
icon="mdi:calendar-blank"
|
||||
:width="24"
|
||||
:height="24"
|
||||
:class="iconStateClass"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="isOpen"
|
||||
data-test="popover"
|
||||
role="dialog"
|
||||
class="absolute left-0 right-0 top-full z-20 box-border w-full rounded-b-md bg-white p-[10px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
|
||||
>
|
||||
<CalendarHeader
|
||||
:view-mode="viewMode"
|
||||
:current-month="currentMonth"
|
||||
:current-year="currentYear"
|
||||
@prev="goToPrev"
|
||||
@next="goToNext"
|
||||
@toggle-view="toggleView"
|
||||
/>
|
||||
<slot
|
||||
v-if="viewMode === 'days'"
|
||||
:current-month="currentMonth"
|
||||
:current-year="currentYear"
|
||||
:close="closePopover"
|
||||
/>
|
||||
<MonthPicker
|
||||
v-else
|
||||
:selected-month="currentMonth"
|
||||
@select="onSelectMonth"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
|
||||
'mt-1 ml-[2px] text-xs',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useAttrs, useId, watch} from 'vue'
|
||||
import {Icon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import CalendarHeader from './CalendarHeader.vue'
|
||||
import MonthPicker from './MonthPicker.vue'
|
||||
import {useCalendarPopover} from '../composables/useCalendarPopover'
|
||||
import {useCalendarView} from '../composables/useCalendarView'
|
||||
|
||||
defineOptions({name: 'MalioCalendarField', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
displayValue: string
|
||||
syncTo: string | null
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
label: '',
|
||||
placeholder: 'JJ/MM/AAAA',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
clearable: true,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'clear' | 'close'): void}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
|
||||
const {isOpen, viewMode, open, close: closePopover, toggleView} = useCalendarPopover(root)
|
||||
const {currentMonth, currentYear, goToPrev, goToNext, selectMonth, syncToIso} = useCalendarView(viewMode)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-date-${generatedId}`)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const isFilled = computed(() => props.displayValue.length > 0)
|
||||
const showClear = computed(() =>
|
||||
props.clearable && isFilled.value && !props.disabled && !props.readonly,
|
||||
)
|
||||
const describedBy = computed(() =>
|
||||
(props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
watch(isOpen, (value) => {
|
||||
if (!value) emit('close')
|
||||
})
|
||||
|
||||
const onFieldClick = () => {
|
||||
if (props.disabled || props.readonly) return
|
||||
if (isOpen.value) {
|
||||
closePopover()
|
||||
return
|
||||
}
|
||||
syncToIso(props.syncTo)
|
||||
open()
|
||||
}
|
||||
|
||||
watch(() => props.syncTo, (value) => {
|
||||
if (isOpen.value) syncToIso(value)
|
||||
})
|
||||
|
||||
const onSelectMonth = (m: number) => {
|
||||
selectMonth(m)
|
||||
toggleView()
|
||||
}
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge('relative flex h-12 w-full items-center', props.groupClass),
|
||||
)
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : '',
|
||||
hasError.value
|
||||
? 'border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
isOpen.value ? 'border-m-primary !py-[9px] !rounded-b-none' : '',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left font-medium text-sm transition-transform duration-150',
|
||||
(isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: isOpen.value
|
||||
? 'text-m-primary'
|
||||
: 'peer-placeholder-shown:text-m-muted text-black',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (isOpen.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return 'text-m-muted'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="flex h-[36px] justify-between border-b border-black/60 mb-3">
|
||||
<button
|
||||
type="button"
|
||||
data-test="header-prev"
|
||||
class="ml-2 flex self-start rounded"
|
||||
:aria-label="viewMode === 'days' ? 'Mois précédent' : 'Année précédente'"
|
||||
@click="emit('prev')"
|
||||
>
|
||||
<Icon
|
||||
icon="mdi:chevron-left"
|
||||
:width="25"
|
||||
:height="25"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-test="header-toggle"
|
||||
class="flex gap-1 rounded text-base font-medium"
|
||||
@click="emit('toggle-view')"
|
||||
>
|
||||
<span class="mt-[2px]">{{ label }}</span>
|
||||
<Icon
|
||||
icon="mdi:chevron-down"
|
||||
:width="25"
|
||||
:height="25"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-test="header-next"
|
||||
class="mr-2 flex self-start rounded"
|
||||
:aria-label="viewMode === 'days' ? 'Mois suivant' : 'Année suivante'"
|
||||
@click="emit('next')"
|
||||
>
|
||||
<Icon
|
||||
icon="mdi:chevron-right"
|
||||
:width="25"
|
||||
:height="25"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed} from 'vue'
|
||||
import {Icon} from '@iconify/vue'
|
||||
|
||||
defineOptions({name: 'MalioDateCalendarHeader'})
|
||||
|
||||
const props = defineProps<{
|
||||
viewMode: 'days' | 'months'
|
||||
currentMonth: number
|
||||
currentYear: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'prev' | 'next' | 'toggle-view'): void
|
||||
}>()
|
||||
|
||||
const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
|
||||
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
|
||||
|
||||
const label = computed(() => {
|
||||
const name = monthsLong[props.currentMonth]
|
||||
return `${name.charAt(0).toUpperCase()}${name.slice(1)} ${props.currentYear}`
|
||||
})
|
||||
</script>
|
||||
@@ -1,178 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
data-test="month-grid"
|
||||
@mouseleave="emit('hover', null)"
|
||||
>
|
||||
<div class="grid grid-cols-[auto_repeat(7,minmax(0,1fr))]">
|
||||
<div class="mr-[12px] flex h-8 w-[35px] items-center justify-center text-[14px] font-medium opacity-[60%]">
|
||||
S
|
||||
</div>
|
||||
<div
|
||||
v-for="d in dayLabels"
|
||||
:key="d"
|
||||
class="flex h-8 items-center justify-center text-[14px] font-medium opacity-[60%]"
|
||||
>
|
||||
{{ d }}
|
||||
</div>
|
||||
|
||||
<template
|
||||
v-for="(week, wIndex) in weeks"
|
||||
:key="week.days[0].isoDate"
|
||||
>
|
||||
<component
|
||||
:is="interactiveWeekNumber ? 'button' : 'div'"
|
||||
data-test="week-number"
|
||||
:data-week-start="week.days[0].isoDate"
|
||||
:data-marked="markedWeekStart === week.days[0].isoDate"
|
||||
:type="interactiveWeekNumber ? 'button' : undefined"
|
||||
:disabled="interactiveWeekNumber ? !weekSelectable(week) : undefined"
|
||||
class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center p-[10px] text-sm"
|
||||
:class="[
|
||||
weekNumberClass(week),
|
||||
wIndex === 0 ? 'rounded-t-md' : '',
|
||||
wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
|
||||
]"
|
||||
@click="onWeekNumberClick(week)"
|
||||
@mouseenter="onWeekNumberHover(week)"
|
||||
>
|
||||
{{ week.weekNumber }}
|
||||
</component>
|
||||
<button
|
||||
v-for="cell in week.days"
|
||||
:key="cell.isoDate"
|
||||
type="button"
|
||||
data-test="day"
|
||||
:data-iso="cell.isoDate"
|
||||
:data-range-role="roleOf(cell)"
|
||||
:disabled="!inRange(cell.isoDate)"
|
||||
:aria-label="ariaLabel(cell)"
|
||||
:aria-disabled="!inRange(cell.isoDate)"
|
||||
class="relative flex h-[45px] w-full items-center justify-center"
|
||||
:class="inRange(cell.isoDate) ? 'cursor-pointer' : 'cursor-not-allowed'"
|
||||
@click="onSelect(cell.isoDate)"
|
||||
@mouseenter="emit('hover', cell.isoDate)"
|
||||
>
|
||||
<span
|
||||
v-if="roleOf(cell) === 'in-range'"
|
||||
class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 bg-m-primary-light"
|
||||
/>
|
||||
<span
|
||||
v-else-if="roleOf(cell) === 'start'"
|
||||
class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-l-full bg-m-primary-light"
|
||||
/>
|
||||
<span
|
||||
v-else-if="roleOf(cell) === 'end'"
|
||||
class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-r-full bg-m-primary-light"
|
||||
/>
|
||||
<span
|
||||
class="relative flex h-10 w-10 items-center justify-center rounded-full text-sm font-medium transition-colors duration-100"
|
||||
:class="cellClass(cell)"
|
||||
>
|
||||
{{ cell.day }}
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, toRef} from 'vue'
|
||||
import {useMonthMatrix, type DayCell, type WeekRow} from '../composables/useMonthMatrix'
|
||||
import {isDateInRange} from '../composables/dateFormat'
|
||||
import {dayRangeRole, resolveRangeBounds, type DayRangeRole} from '../composables/dateRange'
|
||||
|
||||
defineOptions({name: 'MalioDateMonthGrid'})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
month: number
|
||||
year: number
|
||||
selectedDate?: string | null
|
||||
rangeStart?: string | null
|
||||
rangeEnd?: string | null
|
||||
previewDate?: string | null
|
||||
interactiveWeekNumber?: boolean
|
||||
markedWeekStart?: string | null
|
||||
min?: string
|
||||
max?: string
|
||||
}>(),
|
||||
{
|
||||
selectedDate: null,
|
||||
rangeStart: undefined,
|
||||
rangeEnd: undefined,
|
||||
previewDate: undefined,
|
||||
interactiveWeekNumber: false,
|
||||
markedWeekStart: null,
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', iso: string): void
|
||||
(e: 'hover', iso: string | null): void
|
||||
}>()
|
||||
|
||||
const dayLabels = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
|
||||
const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
|
||||
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
|
||||
|
||||
const {weeks} = useMonthMatrix(toRef(props, 'month'), toRef(props, 'year'))
|
||||
|
||||
const inRange = (iso: string) => isDateInRange(iso, props.min, props.max)
|
||||
|
||||
const weekSelectable = (week: WeekRow) => week.days.some(d => inRange(d.isoDate))
|
||||
|
||||
const weekNumberClass = (week: WeekRow) => {
|
||||
if (props.markedWeekStart === week.days[0].isoDate) return 'bg-m-primary text-white'
|
||||
const parts = ['bg-m-primary-light']
|
||||
parts.push(week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60')
|
||||
if (props.interactiveWeekNumber && weekSelectable(week)) parts.push('cursor-pointer')
|
||||
return parts.join(' ')
|
||||
}
|
||||
|
||||
const onWeekNumberClick = (week: WeekRow) => {
|
||||
if (!props.interactiveWeekNumber || !weekSelectable(week)) return
|
||||
emit('select', week.days[0].isoDate)
|
||||
}
|
||||
|
||||
const onWeekNumberHover = (week: WeekRow) => {
|
||||
if (!props.interactiveWeekNumber || !weekSelectable(week)) return
|
||||
emit('hover', week.days[0].isoDate)
|
||||
}
|
||||
|
||||
const isRangeMode = computed(() => props.rangeStart !== undefined)
|
||||
const bounds = computed(() =>
|
||||
isRangeMode.value
|
||||
? resolveRangeBounds(props.rangeStart ?? null, props.rangeEnd ?? null, props.previewDate ?? null)
|
||||
: null,
|
||||
)
|
||||
|
||||
const roleOf = (cell: DayCell): DayRangeRole => {
|
||||
if (isRangeMode.value) return dayRangeRole(cell.isoDate, bounds.value)
|
||||
return props.selectedDate === cell.isoDate ? 'single' : 'none'
|
||||
}
|
||||
|
||||
const ariaLabel = (cell: DayCell) => {
|
||||
const [, m, d] = cell.isoDate.split('-')
|
||||
return `${Number(d)} ${monthsLong[Number(m) - 1]} ${cell.isoDate.slice(0, 4)}`
|
||||
}
|
||||
|
||||
const cellClass = (cell: DayCell) => {
|
||||
if (!inRange(cell.isoDate)) return 'text-m-muted/30'
|
||||
const role = roleOf(cell)
|
||||
if (role === 'start' || role === 'end' || role === 'single') return 'bg-m-primary text-white'
|
||||
if (role === 'in-range') return 'text-black'
|
||||
const parts = ['hover:bg-m-primary/10']
|
||||
if (cell.isToday) parts.push('border border-m-primary text-m-primary')
|
||||
else if (cell.isCurrentMonth) parts.push('text-black')
|
||||
else parts.push('opacity-[60%]')
|
||||
return parts.join(' ')
|
||||
}
|
||||
|
||||
const onSelect = (iso: string) => {
|
||||
if (!inRange(iso)) return
|
||||
emit('select', iso)
|
||||
}
|
||||
</script>
|
||||
@@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
data-test="month-picker"
|
||||
class="grid grid-cols-3 gap-3"
|
||||
>
|
||||
<button
|
||||
v-for="(name, index) in months"
|
||||
:key="name"
|
||||
type="button"
|
||||
data-test="month"
|
||||
:data-month="index"
|
||||
class="flex h-[45px] w-full items-center justify-center"
|
||||
@click="emit('select', index)"
|
||||
>
|
||||
<span
|
||||
class="flex h-[30px] w-full items-center justify-center rounded text-sm transition-colors duration-100"
|
||||
:class="index === selectedMonth
|
||||
? 'bg-m-primary text-white'
|
||||
: 'text-black hover:bg-m-primary/10'"
|
||||
>
|
||||
{{ name }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({name: 'MalioDateMonthPicker'})
|
||||
|
||||
defineProps<{selectedMonth?: number}>()
|
||||
|
||||
const emit = defineEmits<{(e: 'select', month: number): void}>()
|
||||
|
||||
const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
|
||||
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
|
||||
</script>
|
||||
@@ -1,22 +1,15 @@
|
||||
import { afterEach, describe, expect, it } from 'vitest'
|
||||
import { enableAutoUnmount, mount } from '@vue/test-utils'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import type { DefineComponent } from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import Drawer from './Drawer.vue'
|
||||
|
||||
type DrawerProps = {
|
||||
id?: string
|
||||
modelValue?: boolean
|
||||
side?: 'right' | 'left'
|
||||
title?: string
|
||||
showClose?: boolean
|
||||
dismissable?: boolean
|
||||
closeOnEscape?: boolean
|
||||
ariaLabel?: string
|
||||
id?: string
|
||||
drawerClass?: string
|
||||
overlayClass?: string
|
||||
headerClass?: string
|
||||
bodyClass?: string
|
||||
footerClass?: string
|
||||
}
|
||||
|
||||
const DrawerForTest = Drawer as DefineComponent<DrawerProps>
|
||||
@@ -25,38 +18,64 @@ function mountComponent(props: DrawerProps = {}, slots?: Record<string, string>)
|
||||
return mount(DrawerForTest, {
|
||||
props,
|
||||
slots,
|
||||
global: { stubs: { Teleport: true } },
|
||||
global: {
|
||||
stubs: {
|
||||
Teleport: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioDrawer', () => {
|
||||
enableAutoUnmount(afterEach)
|
||||
|
||||
afterEach(() => {
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
|
||||
it('does not render when modelValue is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: false })
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders the panel when modelValue is true', () => {
|
||||
it('renders when modelValue is true', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('renders default slot in the body', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ default: '<p data-test="content">Contenu</p>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="body"] [data-test="content"]').text()).toBe('Contenu')
|
||||
it('renders the title', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, title: 'Mon tiroir' })
|
||||
expect(wrapper.find('h2').text()).toBe('Mon tiroir')
|
||||
})
|
||||
|
||||
it('works in uncontrolled mode (defaults closed)', () => {
|
||||
const wrapper = mountComponent()
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
it('renders slot content', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ default: '<p data-test="content">Contenu du drawer</p>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="content"]').text()).toBe('Contenu du drawer')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false on backdrop click', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
})
|
||||
|
||||
it('emits update:modelValue false on close button click', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="close-button"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
})
|
||||
|
||||
it('shows close button by default', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('hides close button when showClose is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, showClose: false })
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('close button renders mdi:close icon', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const icon = wrapper.findComponent(IconifyIcon)
|
||||
expect(icon.props('icon')).toBe('mdi:close')
|
||||
})
|
||||
|
||||
it('uses custom id when provided', () => {
|
||||
@@ -66,276 +85,38 @@ describe('MalioDrawer', () => {
|
||||
|
||||
it('generates an id when not provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-drawer-/)
|
||||
const id = wrapper.find('.fixed').attributes('id')
|
||||
expect(id).toMatch(/^malio-drawer-/)
|
||||
})
|
||||
|
||||
it('has role="dialog" and aria-modal on the panel', () => {
|
||||
it('has role="dialog" and aria-modal on panel', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('role')).toBe('dialog')
|
||||
expect(panel.attributes('aria-modal')).toBe('true')
|
||||
})
|
||||
|
||||
it('aria-labelledby links to title id', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, id: 'test-drawer' })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-labelledby')).toBe('test-drawer-title')
|
||||
expect(wrapper.find('h2').attributes('id')).toBe('test-drawer-title')
|
||||
})
|
||||
|
||||
it('applies drawerClass to the panel', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-2xl' })
|
||||
expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
|
||||
const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-lg' })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.classes()).toContain('max-w-lg')
|
||||
})
|
||||
|
||||
it('renders the #header slot inside the header bar', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ header: '<h2 data-test="title">Titre</h2>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="header"] [data-test="title"]').text()).toBe('Titre')
|
||||
})
|
||||
|
||||
it('renders the header bar when showClose is true even without #header', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="header"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render the header bar when no #header and showClose is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, showClose: false })
|
||||
expect(wrapper.find('[data-test="header"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows the close button by default', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('hides the close button when showClose is false', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, showClose: false },
|
||||
{ header: '<h2>Titre</h2>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('close button renders mdi:cancel-bold icon', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const icon = wrapper.findComponent(IconifyIcon)
|
||||
expect(icon.props('icon')).toBe('mdi:cancel-bold')
|
||||
it('works in uncontrolled mode', () => {
|
||||
const wrapper = mountComponent()
|
||||
// Without modelValue, defaults to closed
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('close button has aria-label "Fermer"', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false and close on close button click', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="close-button"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('sets aria-labelledby to the header id when #header is provided', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, id: 'test-drawer' },
|
||||
{ header: '<h2>Titre</h2>' },
|
||||
)
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-labelledby')).toBe('test-drawer-header')
|
||||
expect(wrapper.find('[data-test="header-content"]').attributes('id')).toBe('test-drawer-header')
|
||||
})
|
||||
|
||||
it('sets aria-label from ariaLabel when no #header is provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, ariaLabel: 'Panneau latéral' })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-label')).toBe('Panneau latéral')
|
||||
expect(panel.attributes('aria-labelledby')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applies headerClass to the header bar', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, headerClass: 'bg-m-primary' })
|
||||
expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
|
||||
})
|
||||
|
||||
it('renders the #footer slot inside the body (scrollable zone)', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ footer: '<button data-test="save">Enregistrer</button>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="body"] [data-test="footer"] [data-test="save"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render the footer wrapper when no #footer slot', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="footer"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('applies bodyClass to the body', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, bodyClass: 'px-10' })
|
||||
expect(wrapper.find('[data-test="body"]').classes()).toContain('px-10')
|
||||
})
|
||||
|
||||
it('applies footerClass to the footer wrapper', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, footerClass: 'sticky bottom-0' },
|
||||
{ footer: '<span>pied</span>' },
|
||||
)
|
||||
const footer = wrapper.find('[data-test="footer"]')
|
||||
expect(footer.classes()).toContain('sticky')
|
||||
expect(footer.classes()).toContain('bottom-0')
|
||||
})
|
||||
|
||||
it('aligns to the right by default', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('.fixed').classes()).toContain('justify-end')
|
||||
})
|
||||
|
||||
it('aligns to the left when side is "left"', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, side: 'left' })
|
||||
expect(wrapper.find('.fixed').classes()).toContain('justify-start')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false and close on backdrop click (dismissable)', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not close on backdrop click when dismissable is false', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true, dismissable: false })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applies overlayClass to the backdrop', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, overlayClass: 'bg-black/70' })
|
||||
expect(wrapper.find('[data-test="backdrop"]').classes()).toContain('bg-black/70')
|
||||
})
|
||||
|
||||
it('closes on Escape key when closeOnEscape is true', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not close on Escape when closeOnEscape is false', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true, closeOnEscape: false })
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('locks body scroll when opened and restores it when closed', async () => {
|
||||
const wrapper = mountComponent({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
await wrapper.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
})
|
||||
|
||||
it('moves focus into the panel when opened', async () => {
|
||||
const wrapper = mount(DrawerForTest, {
|
||||
props: { modelValue: false, showClose: false },
|
||||
slots: { default: '<button data-test="first">OK</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
const first = wrapper.find('[data-test="first"]').element
|
||||
expect(document.activeElement).toBe(first)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('restores focus to the trigger when closed', async () => {
|
||||
const trigger = document.createElement('button')
|
||||
document.body.appendChild(trigger)
|
||||
trigger.focus()
|
||||
expect(document.activeElement).toBe(trigger)
|
||||
|
||||
const wrapper = mount(DrawerForTest, {
|
||||
props: { modelValue: false },
|
||||
slots: { default: '<button>OK</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
await wrapper.setProps({ modelValue: false })
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(document.activeElement).toBe(trigger)
|
||||
|
||||
wrapper.unmount()
|
||||
trigger.remove()
|
||||
})
|
||||
|
||||
it('moves focus to the close button on open (default showClose)', async () => {
|
||||
const wrapper = mount(DrawerForTest, {
|
||||
props: { modelValue: false, showClose: true },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="close-button"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('wraps focus to the first element when Tab is pressed on the last element', async () => {
|
||||
const wrapper = mount(DrawerForTest, {
|
||||
props: { modelValue: true, showClose: false },
|
||||
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
const last = wrapper.find('[data-test="btn2"]').element as HTMLElement
|
||||
last.focus()
|
||||
expect(document.activeElement).toBe(last)
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab' })
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="btn1"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('wraps focus to the last element when Shift+Tab is pressed on the first element', async () => {
|
||||
const wrapper = mount(DrawerForTest, {
|
||||
props: { modelValue: true, showClose: false },
|
||||
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
const first = wrapper.find('[data-test="btn1"]').element as HTMLElement
|
||||
first.focus()
|
||||
expect(document.activeElement).toBe(first)
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab', shiftKey: true })
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('does not release body scroll-lock when one stacked drawer closes while another is still open', async () => {
|
||||
const wrapperA = mount(DrawerForTest, {
|
||||
props: { modelValue: false },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
const wrapperB = mount(DrawerForTest, {
|
||||
props: { modelValue: false },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
|
||||
// Open drawer A → scroll locked
|
||||
await wrapperA.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
// Open drawer B → still locked
|
||||
await wrapperB.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
// Close drawer B → A is still open, scroll must remain locked
|
||||
await wrapperB.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
// Close drawer A → both closed, scroll-lock released
|
||||
await wrapperA.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,76 +1,59 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
:name="`drawer-${side}`"
|
||||
name="drawer"
|
||||
appear
|
||||
@after-leave="isRendered = false"
|
||||
>
|
||||
<div
|
||||
v-if="isRendered && isOpen"
|
||||
:id="componentId"
|
||||
class="fixed inset-0 z-50 flex"
|
||||
:class="side === 'right' ? 'justify-end' : 'justify-start'"
|
||||
class="fixed inset-0 z-50 flex justify-end"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<div
|
||||
:class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
|
||||
class="absolute inset-0 bg-black/40"
|
||||
data-test="backdrop"
|
||||
@click="onBackdropClick"
|
||||
@click="close"
|
||||
/>
|
||||
|
||||
<div
|
||||
ref="panelRef"
|
||||
:class="twMerge(
|
||||
'relative z-50 flex h-full w-full max-w-md flex-col bg-white',
|
||||
'relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl',
|
||||
drawerClass,
|
||||
)"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-labelledby="hasHeader ? headerId : undefined"
|
||||
:aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
|
||||
tabindex="-1"
|
||||
:aria-modal="true"
|
||||
:aria-labelledby="titleId"
|
||||
data-test="panel"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<div
|
||||
v-if="hasHeader || showClose"
|
||||
:class="twMerge('flex items-center justify-between gap-4 px-5 py-[25px]', headerClass)"
|
||||
data-test="header"
|
||||
>
|
||||
<div
|
||||
:id="headerId"
|
||||
class="min-w-0 flex-1"
|
||||
data-test="header-content"
|
||||
<div class="flex items-center justify-between px-5 pb-8 pt-8">
|
||||
<h2
|
||||
:id="titleId"
|
||||
class="text-[32px] font-semibold text-m-primary"
|
||||
>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
{{ title }}
|
||||
</h2>
|
||||
<button
|
||||
v-if="showClose"
|
||||
type="button"
|
||||
aria-label="Fermer"
|
||||
class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
|
||||
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
|
||||
data-test="close-button"
|
||||
@click="close"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="mdi:cancel-bold"
|
||||
:width="16"
|
||||
:height="16"
|
||||
icon="mdi:close"
|
||||
:width="24"
|
||||
:height="24"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
:class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
|
||||
data-test="body"
|
||||
class="flex-1 overflow-y-auto px-5"
|
||||
>
|
||||
<slot />
|
||||
<div
|
||||
v-if="$slots.footer"
|
||||
:class="footerClass"
|
||||
data-test="footer"
|
||||
>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,17 +62,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
useAttrs,
|
||||
useId,
|
||||
useSlots,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { computed, ref, useAttrs, useId, watch } from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
@@ -99,195 +72,68 @@ const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
modelValue?: boolean
|
||||
side?: 'right' | 'left'
|
||||
title?: string
|
||||
showClose?: boolean
|
||||
dismissable?: boolean
|
||||
closeOnEscape?: boolean
|
||||
ariaLabel?: string
|
||||
drawerClass?: string
|
||||
overlayClass?: string
|
||||
headerClass?: string
|
||||
bodyClass?: string
|
||||
footerClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
modelValue: undefined,
|
||||
side: 'right',
|
||||
title: '',
|
||||
showClose: true,
|
||||
dismissable: true,
|
||||
closeOnEscape: true,
|
||||
ariaLabel: '',
|
||||
drawerClass: '',
|
||||
overlayClass: '',
|
||||
headerClass: '',
|
||||
bodyClass: '',
|
||||
footerClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
|
||||
const componentId = computed(() => props.id || `malio-drawer-${generatedId}`)
|
||||
|
||||
const slots = useSlots()
|
||||
const headerId = computed(() => `${componentId.value}-header`)
|
||||
const hasHeader = computed(() => !!slots.header)
|
||||
const titleId = computed(() => `${componentId.value}-title`)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const localValue = ref(false)
|
||||
|
||||
const isOpen = computed(() =>
|
||||
isControlled.value ? props.modelValue! : localValue.value,
|
||||
)
|
||||
|
||||
const isRendered = ref(isOpen.value)
|
||||
|
||||
const panelRef = ref<HTMLElement | null>(null)
|
||||
|
||||
let previouslyFocused: HTMLElement | null = null
|
||||
// Per-instance flag: true while this drawer holds a scroll-lock count slot.
|
||||
let lockedByThisInstance = false
|
||||
|
||||
function getFocusable(container: HTMLElement): HTMLElement[] {
|
||||
return Array.from(
|
||||
container.querySelectorAll<HTMLElement>(
|
||||
'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',
|
||||
),
|
||||
).filter((el) => el.tabIndex !== -1)
|
||||
}
|
||||
|
||||
function onOpen() {
|
||||
previouslyFocused = (document.activeElement as HTMLElement | null) ?? null
|
||||
if (!lockedByThisInstance) {
|
||||
lockedByThisInstance = true
|
||||
openDrawerCount++
|
||||
if (openDrawerCount === 1) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
const panel = panelRef.value
|
||||
if (!panel) return
|
||||
const focusable = getFocusable(panel)
|
||||
;(focusable[0] ?? panel).focus()
|
||||
})
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
if (lockedByThisInstance) {
|
||||
lockedByThisInstance = false
|
||||
openDrawerCount = Math.max(0, openDrawerCount - 1)
|
||||
if (openDrawerCount === 0) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
previouslyFocused?.focus?.()
|
||||
previouslyFocused = null
|
||||
}
|
||||
|
||||
watch(isOpen, (val) => {
|
||||
if (val) {
|
||||
isRendered.value = true
|
||||
onOpen()
|
||||
}
|
||||
else {
|
||||
onClose()
|
||||
}
|
||||
if (val) isRendered.value = true
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (isOpen.value) onOpen()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// If this instance is still holding a scroll-lock slot, release it.
|
||||
if (lockedByThisInstance) {
|
||||
lockedByThisInstance = false
|
||||
openDrawerCount = Math.max(0, openDrawerCount - 1)
|
||||
if (openDrawerCount === 0) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function onBackdropClick() {
|
||||
if (props.dismissable) close()
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' && props.closeOnEscape) {
|
||||
e.stopPropagation()
|
||||
close()
|
||||
return
|
||||
}
|
||||
if (e.key !== 'Tab') return
|
||||
|
||||
const panel = panelRef.value
|
||||
if (!panel) return
|
||||
const focusable = getFocusable(panel)
|
||||
if (focusable.length === 0) {
|
||||
e.preventDefault()
|
||||
panel.focus()
|
||||
return
|
||||
}
|
||||
const first = focusable[0]!
|
||||
const last = focusable[focusable.length - 1]!
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault()
|
||||
last.focus()
|
||||
}
|
||||
else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault()
|
||||
first.focus()
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (!isControlled.value) localValue.value = false
|
||||
if (!isControlled.value) {
|
||||
localValue.value = false
|
||||
}
|
||||
emit('update:modelValue', false)
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
// Shared across all MalioDrawer instances: only the last open drawer releases the body scroll-lock.
|
||||
let openDrawerCount = 0
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-right-enter-active,
|
||||
.drawer-right-leave-active,
|
||||
.drawer-left-enter-active,
|
||||
.drawer-left-leave-active {
|
||||
.drawer-enter-active,
|
||||
.drawer-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.drawer-right-enter-active > div:last-child,
|
||||
.drawer-right-leave-active > div:last-child,
|
||||
.drawer-left-enter-active > div:last-child,
|
||||
.drawer-left-leave-active > div:last-child {
|
||||
.drawer-enter-active > div:last-child,
|
||||
.drawer-leave-active > div:last-child {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.drawer-right-enter-from,
|
||||
.drawer-right-leave-to,
|
||||
.drawer-left-enter-from,
|
||||
.drawer-left-leave-to {
|
||||
.drawer-enter-from,
|
||||
.drawer-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drawer-right-enter-from > div:last-child,
|
||||
.drawer-right-leave-to > div:last-child {
|
||||
.drawer-enter-from > div:last-child,
|
||||
.drawer-leave-to > div:last-child {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.drawer-left-enter-from > div:last-child,
|
||||
.drawer-left-leave-to > div:last-child {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<Story title="Date/Date">
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioDate
|
||||
v-model="simpleValue"
|
||||
label="Date de naissance"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioDate
|
||||
v-model="initialValue"
|
||||
label="Date du jour"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
|
||||
<MalioDate
|
||||
v-model="boundedValue"
|
||||
label="Date du rendez-vous"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
|
||||
<MalioDate
|
||||
v-model="initialValue"
|
||||
label="Date verrouillée"
|
||||
:clearable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioDate
|
||||
v-model="initialValue"
|
||||
label="Désactivé"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Lecture seule</h2>
|
||||
<MalioDate
|
||||
v-model="initialValue"
|
||||
label="Lecture seule"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioDate
|
||||
v-model="errorValue"
|
||||
label="Date limite"
|
||||
error="Date invalide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioDate
|
||||
v-model="initialValue"
|
||||
label="Date confirmée"
|
||||
success="Enregistrée"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioDate from '../../components/malio/date/Date.vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const simpleValue = ref<string | null>(null)
|
||||
const initialValue = ref<string | null>(todayIso)
|
||||
const boundedValue = ref<string | null>(null)
|
||||
const errorValue = ref<string | null>(null)
|
||||
</script>
|
||||
@@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<Story title="Date/DateRange">
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioDateRange
|
||||
v-model="simpleValue"
|
||||
label="Période"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioDateRange
|
||||
v-model="initialValue"
|
||||
label="Séjour"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
|
||||
<MalioDateRange
|
||||
v-model="boundedValue"
|
||||
label="Plage bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
|
||||
<MalioDateRange
|
||||
v-model="initialValue"
|
||||
label="Période verrouillée"
|
||||
:clearable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioDateRange
|
||||
v-model="initialValue"
|
||||
label="Désactivé"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioDateRange
|
||||
v-model="errorValue"
|
||||
label="Période"
|
||||
error="Période invalide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioDateRange from '../../components/malio/date/DateRange.vue'
|
||||
|
||||
type RangeValue = {start: string; end: string}
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const simpleValue = ref<RangeValue | null>(null)
|
||||
const initialValue = ref<RangeValue | null>({start: todayIso, end: maxIso})
|
||||
const boundedValue = ref<RangeValue | null>(null)
|
||||
const errorValue = ref<RangeValue | null>(null)
|
||||
</script>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<Story title="Date/DateWeek">
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioDateWeek
|
||||
v-model="simpleValue"
|
||||
label="Semaine"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Semaine de livraison"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
|
||||
<MalioDateWeek
|
||||
v-model="boundedValue"
|
||||
label="Semaine bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +60 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Semaine verrouillée"
|
||||
:clearable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Désactivé"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioDateWeek
|
||||
v-model="errorValue"
|
||||
label="Semaine"
|
||||
error="Semaine invalide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioDateWeek from '../../components/malio/date/DateWeek.vue'
|
||||
|
||||
const simpleValue = ref<string | null>(null)
|
||||
const initialValue = ref<string | null>('2026-W21')
|
||||
const boundedValue = ref<string | null>(null)
|
||||
const errorValue = ref<string | null>(null)
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
|
||||
</script>
|
||||
@@ -1,51 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineOptions({ name: 'DrawerStory' })
|
||||
|
||||
const showRight = ref(false)
|
||||
const showLeft = ref(false)
|
||||
const showForm = ref(false)
|
||||
const showNoDismiss = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story title="Overlay/Drawer">
|
||||
<Variant title="Droite (défaut)">
|
||||
<Variant title="Simple">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showRight = true"
|
||||
@click="showSimple = true"
|
||||
>
|
||||
Ouvrir à droite
|
||||
Ouvrir le drawer
|
||||
</button>
|
||||
<MalioDrawer v-model="showRight">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Détails</h2>
|
||||
</template>
|
||||
<MalioDrawer v-model="showSimple" title="Détails">
|
||||
<p>Contenu simple du drawer.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Gauche">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showLeft = true"
|
||||
>
|
||||
Ouvrir à gauche
|
||||
</button>
|
||||
<MalioDrawer v-model="showLeft" side="left">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Navigation</h2>
|
||||
</template>
|
||||
<p>Ce drawer glisse depuis la gauche.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Avec footer collant">
|
||||
<Variant title="Avec formulaire">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@@ -53,38 +22,102 @@ const showNoDismiss = ref(false)
|
||||
>
|
||||
Ouvrir le formulaire
|
||||
</button>
|
||||
<MalioDrawer v-model="showForm">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Nouveau contact</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<MalioInputText label="Nom" />
|
||||
<MalioInputText label="Prénom" />
|
||||
<MalioDrawer v-model="showForm" title="Nouveau contact">
|
||||
<div class="flex flex-col gap-4">
|
||||
<MalioInputText v-model="formNom" label="Nom" />
|
||||
<MalioInputText v-model="formPrenom" label="Prénom" />
|
||||
<MalioButton label="Enregistrer" button-class="w-full" @click="showForm = false" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="sticky bottom-0 flex gap-3 bg-white py-4">
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
|
||||
</div>
|
||||
</template>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Non dismissable">
|
||||
<Variant title="Sans bouton fermer">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showNoDismiss = true"
|
||||
@click="showNoClose = true"
|
||||
>
|
||||
Ouvrir
|
||||
Ouvrir (sans croix)
|
||||
</button>
|
||||
<MalioDrawer v-model="showNoDismiss" :dismissable="false" :close-on-escape="false">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Action requise</h2>
|
||||
</template>
|
||||
<p>Ni le backdrop ni Échap ne ferment ce drawer. Utilisez la croix.</p>
|
||||
<MalioDrawer v-model="showNoClose" title="Information" :show-close="false">
|
||||
<p>Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Largeur personnalisée">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showWide = true"
|
||||
>
|
||||
Ouvrir (large)
|
||||
</button>
|
||||
<MalioDrawer v-model="showWide" title="Drawer large" drawer-class="max-w-2xl">
|
||||
<p>Ce drawer utilise une largeur personnalisée via la prop drawerClass.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioDrawer
|
||||
|
||||
Panneau latéral (drawer) qui s'ouvre depuis la droite avec un fond semi-transparent.
|
||||
|
||||
## Props détaillées
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto-généré | Identifiant HTML du drawer |
|
||||
| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
|
||||
| `title` | `string` | `''` | Titre affiché dans le header |
|
||||
| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
|
||||
| `drawerClass` | `string` | `''` | Classes CSS additionnelles sur le panneau (fusionnées via `twMerge`) |
|
||||
|
||||
## Comportement
|
||||
|
||||
- Le drawer s'ouvre en glissant depuis la droite avec une transition
|
||||
- Un backdrop semi-transparent couvre le reste de la page
|
||||
- Clic sur le backdrop ferme le drawer
|
||||
- Bouton de fermeture (croix) en haut à droite, masquable via `showClose`
|
||||
- Contenu scrollable si plus haut que la fenêtre
|
||||
- Teleport vers `<body>` pour éviter les problèmes de z-index
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `role="dialog"` et `aria-modal="true"` sur le panneau
|
||||
- `aria-labelledby` lié au titre
|
||||
- Bouton fermer avec `aria-label="Fermer"`
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Payload | Description |
|
||||
|-------|---------|-------------|
|
||||
| `update:modelValue` | `boolean` | Émis à la fermeture (backdrop ou bouton) |
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Description |
|
||||
|------|-------------|
|
||||
| `default` | Contenu du drawer |
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MalioDrawer from '../../components/malio/drawer/Drawer.vue'
|
||||
import MalioInputText from '../../components/malio/input/InputText.vue'
|
||||
import MalioButton from '../../components/malio/button/Button.vue'
|
||||
|
||||
defineOptions({ name: 'DrawerStory' })
|
||||
|
||||
const showSimple = ref(false)
|
||||
const showForm = ref(false)
|
||||
const showNoClose = ref(false)
|
||||
const showWide = ref(false)
|
||||
|
||||
const formNom = ref('Dupont')
|
||||
const formPrenom = ref('Jean')
|
||||
</script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,780 +0,0 @@
|
||||
# MalioDateWeek — Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Composant `<MalioDateWeek>` (sélection d'une semaine ISO en un clic, hover de semaine), réutilisant le shell + le rendu pilule de `DateRange`.
|
||||
|
||||
**Architecture:** Une semaine sélectionnée est une plage lundi→dimanche : `DateWeek` calcule ces bornes et les passe à `MonthGrid` (rendu pilule réutilisé). Ajout de 2 props additives à `MonthGrid` (n° de semaine cliquable + repère) et d'un module pur `dateWeek.ts`.
|
||||
|
||||
**Tech Stack:** Nuxt 4 layer, Vue 3 `<script setup lang="ts">`, TypeScript strict, Tailwind (`m-*`), `@iconify/vue`, Vitest + `@vue/test-utils` (jsdom).
|
||||
|
||||
**Référence spec :** `docs/superpowers/specs/2026-05-20-dateweek-design.md`
|
||||
|
||||
---
|
||||
|
||||
## Conventions
|
||||
|
||||
- Tests ciblés : `npx vitest run <chemin>` ; commits avec `--no-verify` en cas de hook flaky (suite complète lancée par le hook).
|
||||
- `data-test` réutilisés (`date-input`, `popover`, `header-*`, `day`+`data-iso`, `clear`, `calendar-icon`, `month`, `week-number`).
|
||||
- Nouveaux attributs sur la cellule n° de semaine : `data-week-start` (lundi de la ligne), `data-marked` (`"true"`/`"false"`).
|
||||
- Ordre : 1) `dateWeek.ts` → 2) extension `MonthGrid` → 3) `DateWeek.vue` + tests → 4) story + playground.
|
||||
|
||||
---
|
||||
|
||||
## Task 1 : Helpers purs `dateWeek.ts`
|
||||
|
||||
**Files:**
|
||||
- Create: `app/components/malio/date/composables/dateWeek.ts`
|
||||
- Test: `app/components/malio/date/composables/dateWeek.test.ts`
|
||||
|
||||
- [ ] **Step 1 : Écrire les tests (échouent)**
|
||||
|
||||
```ts
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {
|
||||
formatWeekDisplay,
|
||||
isValidIsoWeek,
|
||||
isoWeekToMonday,
|
||||
mondayOf,
|
||||
sundayOf,
|
||||
toIsoWeek,
|
||||
} from './dateWeek'
|
||||
|
||||
describe('dateWeek', () => {
|
||||
describe('mondayOf / sundayOf', () => {
|
||||
it('returns Monday and Sunday of a midweek date', () => {
|
||||
expect(mondayOf('2026-05-20')).toBe('2026-05-18') // mercredi
|
||||
expect(sundayOf('2026-05-20')).toBe('2026-05-24')
|
||||
})
|
||||
it('keeps Monday on a Monday', () => {
|
||||
expect(mondayOf('2026-05-18')).toBe('2026-05-18')
|
||||
})
|
||||
it('returns the preceding Monday for a Sunday', () => {
|
||||
expect(mondayOf('2026-05-24')).toBe('2026-05-18')
|
||||
})
|
||||
})
|
||||
|
||||
describe('toIsoWeek', () => {
|
||||
it('returns the ISO week of a date', () => {
|
||||
expect(toIsoWeek('2026-05-20')).toBe('2026-W21')
|
||||
})
|
||||
it('handles year boundaries', () => {
|
||||
expect(toIsoWeek('2026-01-01')).toBe('2026-W01')
|
||||
expect(toIsoWeek('2025-12-31')).toBe('2026-W01')
|
||||
expect(toIsoWeek('2027-01-01')).toBe('2026-W53')
|
||||
})
|
||||
})
|
||||
|
||||
describe('isoWeekToMonday', () => {
|
||||
it('returns the Monday of a week string', () => {
|
||||
expect(isoWeekToMonday('2026-W21')).toBe('2026-05-18')
|
||||
})
|
||||
it('round-trips with toIsoWeek', () => {
|
||||
for (const w of ['2026-W01', '2026-W21', '2026-W53', '2024-W09']) {
|
||||
const monday = isoWeekToMonday(w)
|
||||
expect(monday).not.toBeNull()
|
||||
expect(toIsoWeek(monday as string)).toBe(w)
|
||||
}
|
||||
})
|
||||
it('returns null for invalid input', () => {
|
||||
expect(isoWeekToMonday('2026-21')).toBeNull()
|
||||
expect(isoWeekToMonday('2026-W00')).toBeNull()
|
||||
expect(isoWeekToMonday('2026-W54')).toBeNull()
|
||||
expect(isoWeekToMonday('2025-W53')).toBeNull() // 2025 n'a que 52 semaines ISO
|
||||
})
|
||||
})
|
||||
|
||||
describe('isValidIsoWeek', () => {
|
||||
it('accepts a real ISO week', () => {
|
||||
expect(isValidIsoWeek('2026-W21')).toBe(true)
|
||||
})
|
||||
it('rejects malformed or impossible weeks', () => {
|
||||
expect(isValidIsoWeek('2026-21')).toBe(false)
|
||||
expect(isValidIsoWeek('2026-W00')).toBe(false)
|
||||
expect(isValidIsoWeek('2026-W54')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('formatWeekDisplay', () => {
|
||||
it('formats a week as a human label', () => {
|
||||
expect(formatWeekDisplay('2026-W21')).toBe('Semaine 21 (18/05 → 24/05/2026)')
|
||||
})
|
||||
it('returns empty string for invalid input', () => {
|
||||
expect(formatWeekDisplay('2026-W54')).toBe('')
|
||||
})
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Lancer, vérifier l'échec** — `npx vitest run app/components/malio/date/composables/dateWeek.test.ts` → FAIL (import non résolu)
|
||||
|
||||
- [ ] **Step 3 : Implémenter**
|
||||
|
||||
```ts
|
||||
// app/components/malio/date/composables/dateWeek.ts
|
||||
import {formatIsoToDisplay} from './dateFormat'
|
||||
|
||||
const parseUtc = (iso: string): Date => {
|
||||
const [y, m, d] = iso.split('-').map(Number)
|
||||
return new Date(Date.UTC(y, m - 1, d))
|
||||
}
|
||||
|
||||
const toIso = (d: Date): string => {
|
||||
const y = d.getUTCFullYear()
|
||||
const m = String(d.getUTCMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getUTCDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${day}`
|
||||
}
|
||||
|
||||
export function mondayOf(iso: string): string {
|
||||
const d = parseUtc(iso)
|
||||
const dayNum = d.getUTCDay() || 7 // dimanche = 7
|
||||
d.setUTCDate(d.getUTCDate() - (dayNum - 1))
|
||||
return toIso(d)
|
||||
}
|
||||
|
||||
export function sundayOf(iso: string): string {
|
||||
const d = parseUtc(mondayOf(iso))
|
||||
d.setUTCDate(d.getUTCDate() + 6)
|
||||
return toIso(d)
|
||||
}
|
||||
|
||||
export function toIsoWeek(iso: string): string {
|
||||
const d = parseUtc(iso)
|
||||
const dayNum = d.getUTCDay() || 7
|
||||
d.setUTCDate(d.getUTCDate() + 4 - dayNum) // jeudi de la semaine
|
||||
const isoYear = d.getUTCFullYear()
|
||||
const yearStart = new Date(Date.UTC(isoYear, 0, 1))
|
||||
const week = Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
|
||||
return `${isoYear}-W${String(week).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
export function isoWeekToMonday(week: string): string | null {
|
||||
const m = /^(\d{4})-W(\d{2})$/.exec(week)
|
||||
if (!m) return null
|
||||
const year = Number(m[1])
|
||||
const w = Number(m[2])
|
||||
if (w < 1 || w > 53) return null
|
||||
// Lundi de la semaine 1 = lundi de la semaine contenant le 4 janvier
|
||||
const jan4 = new Date(Date.UTC(year, 0, 4))
|
||||
const jan4Day = jan4.getUTCDay() || 7
|
||||
const monday = new Date(jan4)
|
||||
monday.setUTCDate(jan4.getUTCDate() - (jan4Day - 1) + (w - 1) * 7)
|
||||
const iso = toIso(monday)
|
||||
// Garde-fou : la semaine 53 n'existe pas pour toutes les années
|
||||
if (toIsoWeek(iso) !== week) return null
|
||||
return iso
|
||||
}
|
||||
|
||||
export function isValidIsoWeek(week: string): boolean {
|
||||
return isoWeekToMonday(week) !== null
|
||||
}
|
||||
|
||||
export function formatWeekDisplay(week: string): string {
|
||||
const monday = isoWeekToMonday(week)
|
||||
if (!monday) return ''
|
||||
const sunday = sundayOf(monday)
|
||||
const w = Number(week.slice(6))
|
||||
const startDdMm = formatIsoToDisplay(monday).slice(0, 5) // "18/05"
|
||||
const endFull = formatIsoToDisplay(sunday) // "24/05/2026"
|
||||
return `Semaine ${w} (${startDdMm} → ${endFull})`
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 4 : Lancer, vérifier le succès** — PASS
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/date/composables/dateWeek.ts app/components/malio/date/composables/dateWeek.test.ts
|
||||
git commit -m "feat : helpers purs de semaine ISO (#MUI-33)" --no-verify
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 2 : Ajouts additifs à `MonthGrid.vue`
|
||||
|
||||
**Files:**
|
||||
- Modify: `app/components/malio/date/internal/MonthGrid.vue`
|
||||
|
||||
Couvert par `DateWeek.test.ts` (Task 3) ; non-régression par `Date.test.ts` / `DateRange.test.ts`.
|
||||
|
||||
- [ ] **Step 1 : Remplacer la cellule n° de semaine** par un élément polymorphe interactif
|
||||
|
||||
Dans le template, remplacer le bloc actuel :
|
||||
|
||||
```vue
|
||||
<div
|
||||
data-test="week-number"
|
||||
class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center bg-m-primary-light p-[10px] text-sm"
|
||||
:class="[
|
||||
week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60',
|
||||
wIndex === 0 ? 'rounded-t-md' : '',
|
||||
wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
|
||||
]"
|
||||
>
|
||||
{{ week.weekNumber }}
|
||||
</div>
|
||||
```
|
||||
|
||||
par :
|
||||
|
||||
```vue
|
||||
<component
|
||||
:is="interactiveWeekNumber ? 'button' : 'div'"
|
||||
data-test="week-number"
|
||||
:data-week-start="week.days[0].isoDate"
|
||||
:data-marked="markedWeekStart === week.days[0].isoDate"
|
||||
:type="interactiveWeekNumber ? 'button' : undefined"
|
||||
:disabled="interactiveWeekNumber ? !weekSelectable(week) : undefined"
|
||||
class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center p-[10px] text-sm"
|
||||
:class="[
|
||||
weekNumberClass(week),
|
||||
wIndex === 0 ? 'rounded-t-md' : '',
|
||||
wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
|
||||
]"
|
||||
@click="onWeekNumberClick(week)"
|
||||
@mouseenter="onWeekNumberHover(week)"
|
||||
>
|
||||
{{ week.weekNumber }}
|
||||
</component>
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Ajouter les props et la logique** (script)
|
||||
|
||||
Modifier les `defineProps`/`withDefaults` pour ajouter `interactiveWeekNumber` et `markedWeekStart`, importer `WeekRow`, et ajouter les helpers. Remplacer le bloc props :
|
||||
|
||||
```ts
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
month: number
|
||||
year: number
|
||||
selectedDate?: string | null
|
||||
rangeStart?: string | null
|
||||
rangeEnd?: string | null
|
||||
previewDate?: string | null
|
||||
interactiveWeekNumber?: boolean
|
||||
markedWeekStart?: string | null
|
||||
min?: string
|
||||
max?: string
|
||||
}>(),
|
||||
{
|
||||
selectedDate: null,
|
||||
rangeStart: undefined,
|
||||
rangeEnd: undefined,
|
||||
previewDate: undefined,
|
||||
interactiveWeekNumber: false,
|
||||
markedWeekStart: null,
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
Mettre à jour l'import du composable pour récupérer `WeekRow` :
|
||||
|
||||
```ts
|
||||
import {useMonthMatrix, type DayCell, type WeekRow} from '../composables/useMonthMatrix'
|
||||
```
|
||||
|
||||
Ajouter, après `const inRange = ...` :
|
||||
|
||||
```ts
|
||||
const weekSelectable = (week: WeekRow) => week.days.some(d => inRange(d.isoDate))
|
||||
|
||||
const weekNumberClass = (week: WeekRow) => {
|
||||
if (props.markedWeekStart === week.days[0].isoDate) return 'bg-m-primary text-white'
|
||||
const parts = ['bg-m-primary-light']
|
||||
parts.push(week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60')
|
||||
if (props.interactiveWeekNumber && weekSelectable(week)) parts.push('cursor-pointer')
|
||||
return parts.join(' ')
|
||||
}
|
||||
|
||||
const onWeekNumberClick = (week: WeekRow) => {
|
||||
if (!props.interactiveWeekNumber || !weekSelectable(week)) return
|
||||
emit('select', week.days[0].isoDate)
|
||||
}
|
||||
|
||||
const onWeekNumberHover = (week: WeekRow) => {
|
||||
if (!props.interactiveWeekNumber || !weekSelectable(week)) return
|
||||
emit('hover', week.days[0].isoDate)
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 3 : Non-régression `Date` et `DateRange`**
|
||||
|
||||
Run: `npx vitest run app/components/malio/date/Date.test.ts app/components/malio/date/DateRange.test.ts`
|
||||
Expected: PASS (21 + 17). La cellule n° reste un `<div>` non interactif quand `interactiveWeekNumber` est `false`.
|
||||
|
||||
- [ ] **Step 4 : Lint** — `npx eslint app/components/malio/date/internal/MonthGrid.vue` → 0 erreur
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/date/internal/MonthGrid.vue
|
||||
git commit -m "feat : MonthGrid n° de semaine interactif + repère (mode semaine) (#MUI-33)" --no-verify
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 3 : `DateWeek.vue` + tests
|
||||
|
||||
**Files:**
|
||||
- Create: `app/components/malio/date/DateWeek.vue`
|
||||
- Test: `app/components/malio/date/DateWeek.test.ts`
|
||||
|
||||
- [ ] **Step 1 : Créer `DateWeek.vue`**
|
||||
|
||||
```vue
|
||||
<!-- app/components/malio/date/DateWeek.vue -->
|
||||
<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 {isValidIsoWeek, isoWeekToMonday, mondayOf, sundayOf, toIsoWeek, formatWeekDisplay} 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>
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Écrire `DateWeek.test.ts`**
|
||||
|
||||
```ts
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import DateWeek from './DateWeek.vue'
|
||||
|
||||
type DateWeekProps = {
|
||||
modelValue?: string | null
|
||||
label?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
error?: string
|
||||
min?: string
|
||||
max?: string
|
||||
}
|
||||
|
||||
const DateWeekForTest = DateWeek as DefineComponent<DateWeekProps>
|
||||
const mountWeek = (props: DateWeekProps = {}) =>
|
||||
mount(DateWeekForTest, {props, attachTo: document.body})
|
||||
|
||||
describe('MalioDateWeek', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
it('renders the label and calendar icon', () => {
|
||||
const wrapper = mountWeek({label: 'Semaine'})
|
||||
expect(wrapper.get('label').text()).toBe('Semaine')
|
||||
expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the formatted week when modelValue is set', () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('Semaine 21 (18/05 → 24/05/2026)')
|
||||
})
|
||||
|
||||
it('shows an empty field without a value', () => {
|
||||
const wrapper = mountWeek()
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('')
|
||||
})
|
||||
|
||||
it('opens on the month of the selected week', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W01'}) // lundi 2025-12-29
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
|
||||
})
|
||||
|
||||
it('selects the week when a day is clicked', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('selects the week when the week number is clicked', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('previews the whole week on day hover', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-24"]').attributes('data-range-role')).toBe('end')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('previews the whole week on week-number hover', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-22"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('marks the committed week number', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').attributes('data-marked')).toBe('true')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
|
||||
})
|
||||
|
||||
it('emits null on clear', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
})
|
||||
|
||||
it('disables a week fully outside min/max', async () => {
|
||||
const wrapper = mountWeek({min: '2026-05-18', max: '2026-05-31'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const earlyWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-11"]')
|
||||
expect((earlyWeek.element as HTMLButtonElement).disabled).toBe(true)
|
||||
const selectableWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]')
|
||||
expect((selectableWeek.element as HTMLButtonElement).disabled).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open when disabled', async () => {
|
||||
const wrapper = mountWeek({disabled: true})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open when readonly', async () => {
|
||||
const wrapper = mountWeek({readonly: true, modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('sets aria-invalid on error', () => {
|
||||
const wrapper = mountWeek({error: 'Semaine requise'})
|
||||
expect(wrapper.get('[data-test="date-input"]').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.text()).toContain('Semaine requise')
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 3 : Lancer, vérifier le succès** — `npx vitest run app/components/malio/date/DateWeek.test.ts` → PASS (~14)
|
||||
|
||||
- [ ] **Step 4 : Lint + suite date complète**
|
||||
|
||||
Run: `npx eslint app/components/malio/date/ && npx vitest run app/components/malio/date/`
|
||||
Expected: 0 erreur lint ; tout vert (dont `Date` 21 et `DateRange` 17 inchangés).
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/date/DateWeek.vue app/components/malio/date/DateWeek.test.ts
|
||||
git commit -m "feat : composant MalioDateWeek (sélection semaine ISO) (#MUI-33)" --no-verify
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 4 : Story + playground
|
||||
|
||||
**Files:**
|
||||
- Create: `app/story/date/dateWeek.story.vue`
|
||||
- Create: `.playground/pages/composant/date/dateWeek.vue`
|
||||
|
||||
- [ ] **Step 1 : Créer la story**
|
||||
|
||||
```vue
|
||||
<!-- app/story/date/dateWeek.story.vue -->
|
||||
<template>
|
||||
<Story title="Date/DateWeek">
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioDateWeek
|
||||
v-model="simpleValue"
|
||||
label="Semaine"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Semaine de livraison"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
|
||||
<MalioDateWeek
|
||||
v-model="boundedValue"
|
||||
label="Semaine bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +60 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Semaine verrouillée"
|
||||
:clearable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Désactivé"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioDateWeek
|
||||
v-model="errorValue"
|
||||
label="Semaine"
|
||||
error="Semaine invalide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioDateWeek from '../../components/malio/date/DateWeek.vue'
|
||||
|
||||
const simpleValue = ref<string | null>(null)
|
||||
const initialValue = ref<string | null>('2026-W21')
|
||||
const boundedValue = ref<string | null>(null)
|
||||
const errorValue = ref<string | null>(null)
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Créer la page playground**
|
||||
|
||||
```vue
|
||||
<!-- .playground/pages/composant/date/dateWeek.vue -->
|
||||
<template>
|
||||
<div class="space-y-6 p-4">
|
||||
<h1 class="text-2xl font-bold">MalioDateWeek</h1>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-10">
|
||||
<div class="w-[480px] space-y-3">
|
||||
<h2 class="font-semibold">Large (480px)</h2>
|
||||
<MalioDateWeek
|
||||
v-model="value"
|
||||
label="Semaine"
|
||||
hint="Clique un jour ou un n° de semaine"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur : <code>{{ value ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded bg-m-primary px-3 py-1.5 text-white"
|
||||
@click="value = '2026-W52'"
|
||||
>
|
||||
Forcer 2026-W52
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border px-3 py-1.5"
|
||||
@click="value = null"
|
||||
>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[396px] space-y-3">
|
||||
<h2 class="font-semibold">ERP (396px)</h2>
|
||||
<MalioDateWeek
|
||||
v-model="erpValue"
|
||||
label="Semaine"
|
||||
hint="Largeur cible ERP"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur : <code>{{ erpValue ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<MalioDateWeek
|
||||
v-model="bounded"
|
||||
label="Semaine bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +60 jours"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
|
||||
|
||||
const value = ref<string | null>(null)
|
||||
const erpValue = ref<string | null>(null)
|
||||
const bounded = ref<string | null>(null)
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 3 : Vérification visuelle** — `npm run dev` → menu "Date" → page DateWeek : hover de semaine (ligne entière), clic jour/n° → sélection, repère n° en bleu plein, bornes. Et `npm run story:dev`.
|
||||
|
||||
- [ ] **Step 4 : Lint** — `npx eslint app/story/date/dateWeek.story.vue .playground/pages/composant/date/dateWeek.vue` → 0 erreur
|
||||
|
||||
- [ ] **Step 5 : Commit**
|
||||
|
||||
```bash
|
||||
git add app/story/date/dateWeek.story.vue .playground/pages/composant/date/dateWeek.vue
|
||||
git commit -m "feat : story et page playground de MalioDateWeek (#MUI-33)" --no-verify
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Self-Review (effectuée à l'écriture)
|
||||
|
||||
**Couverture spec :** `dateWeek.ts` (mondayOf/sundayOf/toIsoWeek/isoWeekToMonday/isValidIsoWeek/formatWeekDisplay) ✓ T1 ; `MonthGrid` `interactiveWeekNumber`+`markedWeekStart`+`data-week-start`/`data-marked`+weekSelectable ✓ T2 ; `DateWeek` API + un clic + hover semaine + repère + clear + min/max overlap + invalide→null ✓ T3 ; affichage `"Semaine 21 (...)"` ✓ T1/T3 ; story+playground ✓ T4. modelValue `YYYY-Www` ✓.
|
||||
|
||||
**Placeholders :** aucun ; code complet.
|
||||
|
||||
**Cohérence des types :** `toIsoWeek(iso)→string`, `isoWeekToMonday(week)→string|null`, `mondayOf`/`sundayOf(iso)→string`, `formatWeekDisplay(week)→string` définis T1, consommés T3. `MonthGrid` props `interactiveWeekNumber`/`markedWeekStart` T2 → passées par `DateWeek` T3. Events `select`/`hover` (iso jour) réutilisés ; `DateWeek.onSelect` mappe via `toIsoWeek`, `onHover` via `mondayOf`. `WeekRow` importé de `useMonthMatrix` (déjà exporté). Le rendu pilule s'appuie sur `rangeStart`/`rangeEnd` (inchangés) → `Date`/`DateRange` non impactés.
|
||||
|
||||
**Écart assumé :** `MonthGrid` gagne `data-week-start`/`data-marked` (testabilité), conforme à la spec.
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,302 +0,0 @@
|
||||
# Refonte du playground — Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Remplacer la fausse-SPA du playground (sidebar maison + chargement dynamique dans `index.vue`) par du vrai routage Nuxt fichier + un layout par défaut qui embarque le composant `MalioSidebar` de production.
|
||||
|
||||
**Architecture:** Une config de navigation centralisée (`.playground/playground.nav.ts`) alimente un layout par défaut (`.playground/layouts/default.vue`) contenant `<MalioSidebar>` + `<slot />`. Les pages de démo existantes sous `.playground/pages/composant/**` deviennent automatiquement des routes et héritent du layout. `index.vue` devient une simple page d'accueil. Le `app/app.vue` du layer (`<NuxtLayout><NuxtPage /></NuxtLayout>`), hérité via `extends`, applique le layout automatiquement.
|
||||
|
||||
**Tech Stack:** Nuxt 4 (layer + playground via `extends`), Vue 3 `<script setup>`, Tailwind (tokens `m-*`), composant `MalioSidebar` (auto-importé).
|
||||
|
||||
**Note sur les tests :** Le playground est un harnais de dev, non livré. Vitest est scopé à `app/**/*.test.ts` (la bibliothèque) et aucune page playground n'a de test. Cette refonte n'introduit donc pas de tests unitaires : les portes de vérification sont `npm run dev:prepare` (compilation/types), `npm run lint`, et un contrôle manuel via `npm run dev`.
|
||||
|
||||
**Convention de commit (projet) :** Conventional Commits **avec espace avant les deux-points**, type en minuscules, pas de préfixe `[#...]`, suffixe ticket `(#MUI-34)`. Terminer par le trailer `Co-Authored-By`. Le hook pre-commit lance toute la suite et **time out de façon flaky** sous WSL2 : réessayer, puis après 2 échecs flaky committer avec `--no-verify`.
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
| Fichier | Rôle | Action |
|
||||
|---------|------|--------|
|
||||
| `.playground/playground.nav.ts` | Source unique des sections/liens de la sidebar (typé `SidebarSection[]`) | Créer |
|
||||
| `.playground/layouts/default.vue` | Layout par défaut : `MalioSidebar` + zone de contenu `<slot />` | Créer |
|
||||
| `.playground/pages/index.vue` | Page d'accueil simple (remplace la fausse-SPA) | Réécrire |
|
||||
| `.claude/skills/creating-malio-component/SKILL.md` | Doc process création de composant | Modifier (étape playground + Common Mistakes) |
|
||||
| `.playground/pages/composant/**/*.vue` | Pages de démo | **Inchangées** (déjà des routes) |
|
||||
|
||||
---
|
||||
|
||||
## Task 1 : Config de navigation centralisée
|
||||
|
||||
**Files:**
|
||||
- Create: `.playground/playground.nav.ts`
|
||||
|
||||
- [ ] **Step 1 : Créer le fichier de navigation**
|
||||
|
||||
Créer `.playground/playground.nav.ts` avec ce contenu exact. Chaque `to` correspond exactement à un fichier existant sous `.playground/pages/composant/`. Le type est importé du SFC `MalioSidebar`.
|
||||
|
||||
```ts
|
||||
import type {SidebarSection} from '../app/components/malio/sidebar/Sidebar.vue'
|
||||
|
||||
export const navSections: SidebarSection[] = [
|
||||
{
|
||||
label: 'BOUTONS',
|
||||
icon: 'mdi:gesture-tap-button',
|
||||
items: [
|
||||
{label: 'Button', to: '/composant/button/button'},
|
||||
{label: 'Button Icon', to: '/composant/button/buttonIcon'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'CHAMPS',
|
||||
icon: 'mdi:form-textbox',
|
||||
items: [
|
||||
{label: 'Texte', to: '/composant/input/inputText'},
|
||||
{label: 'Nombre', to: '/composant/input/inputNumber'},
|
||||
{label: 'Montant', to: '/composant/input/inputAmount'},
|
||||
{label: 'Email', to: '/composant/input/inputEmail'},
|
||||
{label: 'Mot de passe', to: '/composant/input/inputPassword'},
|
||||
{label: 'Téléphone', to: '/composant/input/inputPhone'},
|
||||
{label: 'Zone de texte', to: '/composant/input/inputTextArea'},
|
||||
{label: 'Saisie assistée', to: '/composant/input/inputAutocomplete'},
|
||||
{label: 'Upload', to: '/composant/input/inputUpload'},
|
||||
{label: 'Éditeur riche', to: '/composant/input/inputRichText'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'SÉLECTIONS',
|
||||
icon: 'mdi:form-dropdown',
|
||||
items: [
|
||||
{label: 'Select', to: '/composant/select/select'},
|
||||
{label: 'Select Checkbox', to: '/composant/select/selectCheckbox'},
|
||||
{label: 'Checkbox', to: '/composant/checkbox/checkbox'},
|
||||
{label: 'Radio', to: '/composant/radio/radioButton'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'NAVIGATION',
|
||||
icon: 'mdi:navigation-variant',
|
||||
items: [
|
||||
{label: 'Sidebar', to: '/composant/sidebar/sidebar'},
|
||||
{label: 'Drawer', to: '/composant/drawer/drawer'},
|
||||
{label: 'Onglets', to: '/composant/tab/tabList'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'DONNÉES',
|
||||
icon: 'mdi:table',
|
||||
items: [
|
||||
{label: 'DataTable', to: '/composant/datatable/datatable'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'DIVERS',
|
||||
icon: 'mdi:dots-horizontal',
|
||||
items: [
|
||||
{label: 'Heure', to: '/composant/time/time'},
|
||||
{label: 'Sélecteur de site', to: '/composant/site/siteSelector'},
|
||||
{label: 'Formulaire client', to: '/composant/form/client'},
|
||||
],
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Vérifier le lint du fichier**
|
||||
|
||||
Run: `npx eslint .playground/playground.nav.ts`
|
||||
Expected: aucune erreur (0 problems). Si ESLint signale un import de type non résolu depuis le `.vue`, c'est un faux positif de résolution ; il ne bloque pas (warnings only). En cas d'**erreur** bloquante sur l'import du type, fallback : remplacer la ligne d'import par une définition locale équivalente :
|
||||
```ts
|
||||
type SidebarItem = {label: string; to: string}
|
||||
type SidebarSection = {label?: string; icon?: string; items: SidebarItem[]}
|
||||
```
|
||||
|
||||
*(Pas de commit ici — les 3 fichiers de la refonte seront committés ensemble en Task 4, car retirer l'ancien `index.vue` casse temporairement le glob.)*
|
||||
|
||||
---
|
||||
|
||||
## Task 2 : Layout par défaut
|
||||
|
||||
**Files:**
|
||||
- Create: `.playground/layouts/default.vue`
|
||||
|
||||
**Pré-requis vérifiés :** `MalioSidebar` est auto-importé (préfixe `Malio`, `pathPrefix: false`). Ses slots sont `logo` et `logo-collapsed`. Sa prop requise est `sections: SidebarSection[]`. Les logos `LOGO_MALIO.png` / `LOGO_MALIO_COLLAPSED.png` sont servis depuis le `public/` du layer (donc accessibles à la racine `/`).
|
||||
|
||||
- [ ] **Step 1 : Créer le layout**
|
||||
|
||||
Créer `.playground/layouts/default.vue`. Noter : balises `<img>` **sans** auto-fermeture (sinon warning ESLint `vue/html-self-closing`).
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="flex h-screen">
|
||||
<MalioSidebar :sections="navSections">
|
||||
<template #logo>
|
||||
<NuxtLink to="/">
|
||||
<img src="/LOGO_MALIO.png" alt="Malio">
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template #logo-collapsed>
|
||||
<NuxtLink to="/">
|
||||
<img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio">
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</MalioSidebar>
|
||||
|
||||
<main class="flex-1 overflow-y-auto p-6">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {navSections} from '../playground.nav'
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Vérifier le lint du layout**
|
||||
|
||||
Run: `npx eslint .playground/layouts/default.vue`
|
||||
Expected: aucune erreur bloquante (0 errors).
|
||||
|
||||
---
|
||||
|
||||
## Task 3 : Réécrire `index.vue` en page d'accueil
|
||||
|
||||
**Files:**
|
||||
- Modify (réécriture complète): `.playground/pages/index.vue`
|
||||
|
||||
- [ ] **Step 1 : Remplacer tout le contenu de `index.vue`**
|
||||
|
||||
Remplacer **l'intégralité** du fichier `.playground/pages/index.vue` (supprime la sidebar maison + le chargement dynamique par glob) par :
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="mx-auto max-w-2xl py-16 text-center">
|
||||
<h1 class="text-3xl font-bold text-m-text">
|
||||
Playground @malio/layer-ui
|
||||
</h1>
|
||||
<p class="mt-4 text-m-muted">
|
||||
Sélectionne un composant dans la barre latérale pour afficher sa page de démonstration.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
*(Page sans `<script>` : contenu purement statique. Elle hérite du layout `default` automatiquement.)*
|
||||
|
||||
- [ ] **Step 2 : Vérifier le lint de la page**
|
||||
|
||||
Run: `npx eslint .playground/pages/index.vue`
|
||||
Expected: aucune erreur bloquante (0 errors).
|
||||
|
||||
---
|
||||
|
||||
## Task 4 : Vérification end-to-end + commit de la refonte
|
||||
|
||||
**Files:** (commit groupé)
|
||||
- `.playground/playground.nav.ts`
|
||||
- `.playground/layouts/default.vue`
|
||||
- `.playground/pages/index.vue`
|
||||
|
||||
- [ ] **Step 1 : Régénérer les types Nuxt (compilation)**
|
||||
|
||||
Run: `npm run dev:prepare`
|
||||
Expected: « Types generated in .playground/.nuxt. » sans erreur de compilation. Valide que le layout, le nav et `index.vue` compilent et que l'import du type `SidebarSection` se résout.
|
||||
|
||||
- [ ] **Step 2 : Lint global**
|
||||
|
||||
Run: `npm run lint`
|
||||
Expected: 0 errors (des warnings préexistants sur d'autres fichiers sont tolérés ; aucun nouvel **error** sur les 3 fichiers créés/modifiés).
|
||||
|
||||
- [ ] **Step 3 : Contrôle manuel dans le navigateur**
|
||||
|
||||
Run: `npm run dev` puis ouvrir l'URL affichée.
|
||||
Vérifier :
|
||||
- L'accueil (`/`) affiche le message de bienvenue, avec la `MalioSidebar` à gauche.
|
||||
- La sidebar liste les 6 sections et tous les liens.
|
||||
- Cliquer un item (ex. « Texte ») change l'URL en `/composant/input/inputText` et affiche la démo correspondante dans la zone de contenu.
|
||||
- Le bouton collapse de la sidebar fonctionne (plier/déplier).
|
||||
- Cliquer le logo ramène à `/`.
|
||||
|
||||
Arrêter le serveur (Ctrl+C) une fois vérifié.
|
||||
|
||||
- [ ] **Step 4 : Commit de la refonte**
|
||||
|
||||
```bash
|
||||
git add .playground/playground.nav.ts .playground/layouts/default.vue .playground/pages/index.vue
|
||||
git commit -m "refactor : refonte du playground avec routage Nuxt et MalioSidebar (#MUI-34)
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
Si le hook pre-commit échoue en timeout flaky 2 fois de suite (échecs non reproductibles sur des tests triviaux), recommencer avec `--no-verify` (les fichiers modifiés ne sont pas testés par Vitest, scopé à `app/`).
|
||||
|
||||
---
|
||||
|
||||
## Task 5 : Mettre à jour le skill `creating-malio-component`
|
||||
|
||||
Le skill décrit encore l'ancien fonctionnement (auto-découverte par `index.vue` via glob). Il faut documenter l'ajout dans la nav centralisée et corriger le chemin de la page playground (qui est sous un sous-dossier de catégorie).
|
||||
|
||||
**Files:**
|
||||
- Modify: `.claude/skills/creating-malio-component/SKILL.md`
|
||||
|
||||
- [ ] **Step 1 : Réécrire l'étape 5 (page playground)**
|
||||
|
||||
Remplacer le bloc de l'étape « ### 5. Créer la page playground » — du titre jusqu'à la ligne `**Variantes typiques :**` exclue — par :
|
||||
|
||||
```markdown
|
||||
### 5. Créer la page playground
|
||||
|
||||
**Fichier :** `.playground/pages/composant/<categorie>/<nomComposant>.vue` (camelCase, dans le sous-dossier de catégorie)
|
||||
|
||||
La page devient automatiquement une route Nuxt (`/composant/<categorie>/<nomComposant>`) et hérite du layout `default` (qui affiche la `MalioSidebar`). **Ajouter ensuite le lien dans la nav centralisée** `.playground/playground.nav.ts` : insérer un `{label, to}` dans la section appropriée (ou créer une nouvelle section), où `to` = `/composant/<categorie>/<nomComposant>`.
|
||||
|
||||
Inclure des variantes représentatives dans une grille :
|
||||
|
||||
\`\`\`html
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Titre variante</h2>
|
||||
<MalioMonComposant ... />
|
||||
</div>
|
||||
</div>
|
||||
\`\`\`
|
||||
```
|
||||
|
||||
- [ ] **Step 2 : Mettre à jour la table « Common Mistakes »**
|
||||
|
||||
Remplacer la ligne :
|
||||
```markdown
|
||||
| Page playground non détectée | Vérifier le nom du fichier en camelCase dans `.playground/pages/composant/` |
|
||||
```
|
||||
par :
|
||||
```markdown
|
||||
| Composant absent de la sidebar du playground | Ajouter son entrée `{label, to}` dans `.playground/playground.nav.ts` (la page n'est plus auto-découverte) |
|
||||
```
|
||||
|
||||
- [ ] **Step 3 : Vérifier la cohérence du diagramme workflow**
|
||||
|
||||
Lire le bloc `digraph` en tête du skill. L'étape « 5. Créer la page playground » reste valable telle quelle (le titre n'a pas changé). Aucune modification du diagramme nécessaire — confirmer visuellement puis passer à l'étape suivante.
|
||||
|
||||
- [ ] **Step 4 : Commit de la mise à jour du skill**
|
||||
|
||||
```bash
|
||||
git add .claude/skills/creating-malio-component/SKILL.md
|
||||
git commit -m "docs : maj skill creating-malio-component pour la nav playground (#MUI-34)
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
(Ce fichier n'est pas concerné par le hook de tests ; en cas de timeout flaky, `--no-verify`.)
|
||||
|
||||
---
|
||||
|
||||
## Vérification finale (après toutes les tâches)
|
||||
|
||||
- [ ] `npm run lint` → 0 errors.
|
||||
- [ ] `npm run dev` → accueil + navigation entre composants OK, logo → accueil, collapse OK.
|
||||
- [ ] `git log --oneline -3` → 2 nouveaux commits au format `type : … (#MUI-34)`.
|
||||
- [ ] Plus aucune trace de sidebar maison / `import.meta.glob` dans `.playground/pages/index.vue`.
|
||||
|
||||
## Note post-exécution (pour l'agent)
|
||||
|
||||
Mettre à jour la mémoire `malio-datepicker-conventions.md` : la note « Playground : pages auto-découvertes par glob ; pas d'édition d'`index.vue` » est désormais fausse. Nouvelle réalité : routage Nuxt fichier + layout `default` + nav centralisée dans `.playground/playground.nav.ts` à éditer pour chaque nouveau composant.
|
||||
@@ -1,373 +0,0 @@
|
||||
# MalioDate — Design Spec
|
||||
|
||||
Composant de sélection de date avec champ + popover calendrier. Première brique d'une famille de pickers temporels (futurs `DateRange`, `DateTime`).
|
||||
|
||||
**Ticket :** MUI-33
|
||||
**Branche :** `feature/MUI-33-developper-le-composant-datepicker`
|
||||
|
||||
## Périmètre v1
|
||||
|
||||
Sélection d'une date unique via un calendrier. Le champ est **readonly** (clic uniquement, pas de saisie clavier en v1). Locale FR hardcodée, semaine commençant le lundi.
|
||||
|
||||
**Inclus en v1 :**
|
||||
- Affichage `JJ/MM/AAAA` dans le champ, valeur ISO `YYYY-MM-DD` en `modelValue`
|
||||
- Surlignage du jour sélectionné et du jour "aujourd'hui"
|
||||
- Jours du mois précédent/suivant affichés grisés mais cliquables (naviguent vers le mois cible)
|
||||
- Bornes `min` / `max` (jours hors bornes désactivés)
|
||||
- Bouton effacer (croix) si `clearable`
|
||||
- Vue mois (grille 4×3) accessible via clic sur `Mois Année ⌄` dans le header
|
||||
- Numéros de semaine ISO 8601 dans une colonne à fond `m-primary/10`
|
||||
|
||||
**Reporté à plus tard :**
|
||||
- Saisie clavier dans le champ (parsing `JJ/MM/AAAA` manuel)
|
||||
- Navigation clavier dans la grille (flèches, Enter, Escape)
|
||||
- Vue années (sélection rapide d'une année)
|
||||
- Prop `disabledDates` (prédicat ou array)
|
||||
- i18n (autres langues)
|
||||
|
||||
## Architecture
|
||||
|
||||
Composant public unique `<MalioDate>` (autoimporté depuis `app/components/malio/date/Date.vue`), composé de sous-composants internes et de modules utilitaires colocalisés.
|
||||
|
||||
```
|
||||
app/components/malio/date/
|
||||
Date.vue # composant public (orchestration)
|
||||
Date.test.ts
|
||||
internal/
|
||||
CalendarHeader.vue # header mois/année + chevrons + toggle vue
|
||||
MonthGrid.vue # grille 6×7 jours + colonne semaine
|
||||
MonthPicker.vue # grille 4×3 mois
|
||||
composables/
|
||||
useMonthMatrix.ts # calcule la matrice 6×7 + n° semaines ISO
|
||||
dateFormat.ts # fonctions pures de format/parsing/validation
|
||||
useCalendarPopover.ts # état ouvert/fermé + click outside
|
||||
```
|
||||
|
||||
Les sous-composants `internal/` ne sont pas destinés à être consommés directement. Ils seront réutilisés par `DateRange` et `DateTime` à venir.
|
||||
|
||||
## Type `modelValue`
|
||||
|
||||
`string | null`, au format ISO `YYYY-MM-DD`. Le composant interne convertit en affichage `JJ/MM/AAAA` via `dateFormat.formatIsoToDisplay()`. Cette représentation a été retenue pour :
|
||||
- Cohérence avec `<MalioTime>` qui émet déjà une string (`"HH:MM"`)
|
||||
- Sérialisation directe vers une API REST/JSON sans conversion
|
||||
- Pas de piège de fuseau horaire (un objet `Date` JS porte une heure + un fuseau)
|
||||
- Comparaison lexicographique = comparaison chronologique (utile pour `min`/`max`)
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto-généré | Identifiant HTML du champ |
|
||||
| `name` | `string` | `''` | Attribut `name` pour les `<form>` |
|
||||
| `label` | `string` | `''` | Label flottant |
|
||||
| `modelValue` | `string \| null` | `undefined` | Date ISO `YYYY-MM-DD` (v-model) |
|
||||
| `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder du champ |
|
||||
| `required` | `boolean` | `false` | Attribut required |
|
||||
| `disabled` | `boolean` | `false` | Verrouille champ et calendrier |
|
||||
| `readonly` | `boolean` | `false` | Affiche la valeur mais bloque l'ouverture |
|
||||
| `hint` | `string` | `''` | Texte d'aide sous le champ |
|
||||
| `error` | `string` | `''` | Message d'erreur (bordure et texte rouges) |
|
||||
| `success` | `string` | `''` | Message succès (bordure et texte verts) |
|
||||
| `min` | `string` | `undefined` | Borne inférieure incluse, format ISO |
|
||||
| `max` | `string` | `undefined` | Borne supérieure incluse, format ISO |
|
||||
| `clearable` | `boolean` | `true` | Affiche une croix pour effacer la valeur |
|
||||
| `inputClass` | `string` | `''` | Override classes input (twMerge) |
|
||||
| `labelClass` | `string` | `''` | Override classes label (twMerge) |
|
||||
| `groupClass` | `string` | `''` | Override classes wrapper (twMerge) |
|
||||
|
||||
Si `min`/`max` sont invalides (format incorrect ou `min > max`), ils sont ignorés silencieusement avec un warning console en dev.
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Payload | Description |
|
||||
|-------|---------|-------------|
|
||||
| `update:modelValue` | `string \| null` | Date ISO sélectionnée, ou `null` si effacée |
|
||||
|
||||
## Slots
|
||||
|
||||
Aucun slot en v1. L'icône calendrier est fixée (`mdi:calendar-outline`).
|
||||
|
||||
## Sous-composants internes
|
||||
|
||||
### `CalendarHeader.vue`
|
||||
|
||||
Affiche la barre du haut du popover : `[‹] Mois Année [⌄] [›]`.
|
||||
|
||||
**Props :**
|
||||
- `viewMode: 'days' | 'months'`
|
||||
- `currentMonth: number` (0-11)
|
||||
- `currentYear: number`
|
||||
|
||||
**Events :**
|
||||
- `prev` — chevron gauche (interprété par le parent : mois précédent en vue jours, année précédente en vue mois)
|
||||
- `next` — chevron droit (idem)
|
||||
- `toggle-view` — clic sur le bouton central
|
||||
|
||||
### `MonthGrid.vue`
|
||||
|
||||
Rend la grille 6 lignes × 8 colonnes (semaine + 7 jours).
|
||||
|
||||
**Props :**
|
||||
- `month: number` (0-11)
|
||||
- `year: number`
|
||||
- `selectedDate?: string | null` (ISO)
|
||||
- `min?: string` (ISO)
|
||||
- `max?: string` (ISO)
|
||||
|
||||
**Events :**
|
||||
- `select` payload `string` — date ISO `YYYY-MM-DD` du jour cliqué
|
||||
|
||||
Utilise `useMonthMatrix(month, year)` pour générer les 6 lignes. La grille fait toujours 6 lignes (forcé) pour stabiliser la hauteur du popover entre les mois.
|
||||
|
||||
### `MonthPicker.vue`
|
||||
|
||||
Rend la grille 4×3 des mois.
|
||||
|
||||
**Props :**
|
||||
- `selectedMonth?: number` (0-11, mois courant à surligner)
|
||||
|
||||
**Events :**
|
||||
- `select` payload `number` (0-11)
|
||||
|
||||
Pas de gestion `min`/`max` au niveau mois en v1 — `MonthGrid` filtrera les jours hors bornes au retour vue jours.
|
||||
|
||||
## Composables
|
||||
|
||||
### `useMonthMatrix.ts`
|
||||
|
||||
```ts
|
||||
type DayCell = {
|
||||
isoDate: string // "YYYY-MM-DD"
|
||||
day: number // 1-31
|
||||
isCurrentMonth: boolean
|
||||
isToday: boolean
|
||||
}
|
||||
|
||||
type WeekRow = {
|
||||
weekNumber: number // ISO 8601, 1-53
|
||||
days: DayCell[] // toujours 7, Lun → Dim
|
||||
}
|
||||
|
||||
function useMonthMatrix(
|
||||
month: Ref<number>,
|
||||
year: Ref<number>
|
||||
): { weeks: ComputedRef<WeekRow[]> }
|
||||
```
|
||||
|
||||
Le premier jour de la grille est le lundi de la semaine contenant le 1er du mois affiché. La grille fait **toujours** 6 lignes (`WeekRow[]` de longueur 6), au besoin en débordant sur le mois suivant.
|
||||
|
||||
Les numéros de semaine suivent **ISO 8601** : la semaine 1 contient le premier jeudi de l'année.
|
||||
|
||||
### `dateFormat.ts`
|
||||
|
||||
Module de fonctions pures, **pas un composable réactif**. Le nommage sans préfixe `use` reflète sa nature.
|
||||
|
||||
```ts
|
||||
function formatIsoToDisplay(iso: string | null): string
|
||||
// "2026-05-19" → "19/05/2026", null/invalide → ""
|
||||
|
||||
function parseDisplayToIso(display: string): string | null
|
||||
// "19/05/2026" → "2026-05-19", invalide → null
|
||||
|
||||
function isValidIso(iso: string): boolean
|
||||
// "2026-05-19" → true, "2026-13-45" → false
|
||||
|
||||
function isDateInRange(iso: string, min?: string, max?: string): boolean
|
||||
// Comparaison lexicographique (= chronologique pour ISO)
|
||||
```
|
||||
|
||||
`parseDisplayToIso` est écrit dès la v1 même si non utilisé (le champ est readonly) — il sera réutilisé en v2 quand on rendra le champ éditable.
|
||||
|
||||
### `useCalendarPopover.ts`
|
||||
|
||||
```ts
|
||||
function useCalendarPopover(rootRef: Ref<HTMLElement | null>): {
|
||||
isOpen: Ref<boolean>
|
||||
viewMode: Ref<'days' | 'months'>
|
||||
open: () => void
|
||||
close: () => void
|
||||
toggleView: () => void
|
||||
}
|
||||
```
|
||||
|
||||
- `isOpen` et `viewMode` reset à `false` / `'days'` à la fermeture
|
||||
- Listener `mousedown` global attaché à `onMounted`, retiré à `onBeforeUnmount`
|
||||
- Fermeture si le clic est hors de `rootRef`
|
||||
- Pas de gestion clavier en v1
|
||||
|
||||
## Comportements détaillés
|
||||
|
||||
### Ouverture du popover
|
||||
|
||||
Clic sur le champ ou l'icône calendrier (sauf si `disabled` ou `readonly`) → `open()`. Vue initiale :
|
||||
- Si `modelValue` valide → grille du mois de cette date
|
||||
- Sinon → grille du mois courant (`new Date()`)
|
||||
|
||||
Le champ passe en mode "popover ouvert" : bordure du bas retirée, `rounded-b-none`, bordure latérale colorée (`m-primary` ou `m-danger`/`m-success` selon état).
|
||||
|
||||
### Sélection d'un jour (vue jours)
|
||||
|
||||
Clic sur une cellule jour cliquable :
|
||||
1. Émission `update:modelValue` avec la date ISO
|
||||
2. Fermeture du popover
|
||||
3. Réaffichage du champ avec la valeur formatée `JJ/MM/AAAA`
|
||||
|
||||
Cas spéciaux :
|
||||
- Jour hors mois courant : sélection normale, le popover se ferme (peu importe que la vue interne saute au mois cible, elle n'est plus visible)
|
||||
- Jour hors `min`/`max` : non cliquable, `cursor-not-allowed`, pas d'émission
|
||||
- Re-clic sur la date déjà sélectionnée : ré-émission de la même valeur, popover ferme
|
||||
|
||||
### Navigation chevrons (vue jours)
|
||||
|
||||
- Chevron gauche : `currentMonth -= 1` (décembre + `year -= 1` si on était en janvier)
|
||||
- Chevron droit : symétrique
|
||||
- Pas de bornage de navigation par `min`/`max` — on peut naviguer où on veut, seuls les jours sont désactivés
|
||||
|
||||
### Bascule vers la vue mois
|
||||
|
||||
Clic sur `Mois Année ⌄` → `toggleView()` → `viewMode = 'months'`.
|
||||
|
||||
En vue mois :
|
||||
- Header inchangé visuellement, mais les chevrons naviguent désormais l'**année** (`year ± 1`)
|
||||
- Le bouton central reste cliquable : un nouveau clic ramène à `viewMode = 'days'` (toggle binaire, validé Q4b)
|
||||
- Clic sur un mois dans la grille 4×3 → `currentMonth = mois cliqué`, retour `viewMode = 'days'` sans sélection de date
|
||||
|
||||
### Fermeture sans sélection
|
||||
|
||||
Clic en dehors du champ ET du popover → `close()`. `modelValue` inchangé. L'état interne (`currentMonth`, `currentYear`, `viewMode`) est **reset à la prochaine ouverture** selon la règle "Ouverture du popover" (pas de mémorisation).
|
||||
|
||||
### Bouton effacer
|
||||
|
||||
Si `modelValue !== null && clearable && !disabled && !readonly` :
|
||||
- Une croix `mdi:close` apparaît à gauche de l'icône calendrier
|
||||
- Clic émet `null` et `stopPropagation` pour ne pas ouvrir le popover
|
||||
|
||||
### États
|
||||
|
||||
- `disabled` : opacity réduite, curseur not-allowed, clic sans effet, croix masquée
|
||||
- `readonly` : affichage normal, clic sans effet sur l'ouverture, croix masquée
|
||||
|
||||
### Synchronisation `modelValue` externe
|
||||
|
||||
Si le parent change `modelValue` programmatiquement :
|
||||
- Le champ se met à jour (re-format)
|
||||
- Si le popover est ouvert, la vue saute au mois de la nouvelle valeur
|
||||
- Si la nouvelle valeur a un format invalide, le composant traite comme `null` et log un warning console en dev
|
||||
|
||||
## Style / CSS
|
||||
|
||||
### Popover
|
||||
|
||||
- `min-w-[320px]`, hauteur fixe ~`360px` (6 semaines × ~38px + header)
|
||||
- Position : `absolute top-[calc(100%-4px)] left-0 z-20`
|
||||
- `bg-white border border-t-0` (couleur selon état : `m-primary` / `m-danger` / `m-success`)
|
||||
- `rounded-b-md`
|
||||
- Transition : `opacity` 150ms à l'apparition, respect `prefers-reduced-motion`
|
||||
|
||||
### Header
|
||||
|
||||
- Hauteur `h-12`, `border-b border-m-primary/20`
|
||||
- Chevrons (`mdi:chevron-left` / `mdi:chevron-right`) : 20px, padding cliquable 8px, `hover:bg-m-primary/10 rounded`
|
||||
- Texte central : `text-base font-medium`, cliquable, `mdi:chevron-down` 16px à côté
|
||||
|
||||
### Grille jours
|
||||
|
||||
- En-tête `Sem | Lun | Mar | Mer | Jeu | Ven | Sam | Dim` : `text-xs uppercase text-m-muted font-medium`, 32px de hauteur
|
||||
- Cellule : `w-10 h-10 text-sm`, centrée
|
||||
- Colonne semaine : `bg-m-primary/10`, `text-m-primary/70`, non cliquable
|
||||
- Jour du mois courant : `text-black`
|
||||
- Jour hors mois : `text-m-muted/50`
|
||||
- Jour "aujourd'hui" : `border border-m-primary`, `text-m-primary font-semibold`
|
||||
- Jour sélectionné : `bg-m-primary text-white font-medium rounded-full` (prime sur "aujourd'hui")
|
||||
- Jour hors `min`/`max` : `text-m-muted/30 cursor-not-allowed`, non cliquable
|
||||
- Hover : `hover:bg-m-primary/10 rounded-full`
|
||||
|
||||
### Grille mois (MonthPicker)
|
||||
|
||||
- `grid grid-cols-4 gap-2 p-3`
|
||||
- Cellule : `py-3 text-sm rounded`
|
||||
- Libellés : `Janv | Févr | Mars | Avr | Mai | Juin | Juil | Août | Sept | Oct | Nov | Déc`
|
||||
- Mois sélectionné : `bg-m-primary text-white`
|
||||
- Hover : `hover:bg-m-primary/10`
|
||||
|
||||
### Champ
|
||||
|
||||
Reprend le pattern de `<MalioInputAutocomplete>` : label flottant, bordure `m-muted` au repos, `m-primary` au focus/open, `m-danger`/`m-success` selon état.
|
||||
|
||||
- Icône calendrier `mdi:calendar-outline` 20px, à droite, couleur dynamique selon état
|
||||
- Croix d'effacement `mdi:close` 16px, à gauche de l'icône, `text-m-muted hover:text-black`
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `aria-invalid` synchronisé sur `error`
|
||||
- `aria-describedby` lié au texte de `hint`/`error`/`success`
|
||||
- `aria-expanded` sur le champ pour signaler l'état du popover
|
||||
- `aria-haspopup="dialog"` sur le champ
|
||||
- Label `<label for>` lié au champ
|
||||
- Cellules jour : `role="button"`, `aria-label="19 mai 2026"` (jour en toutes lettres pour les lecteurs d'écran)
|
||||
- Cellules désactivées : `aria-disabled="true"`
|
||||
- Navigation clavier dans la grille : **reportée v2** (Escape, flèches, Enter)
|
||||
|
||||
## Tests
|
||||
|
||||
### `Date.test.ts` (~30 cas)
|
||||
|
||||
Tests groupés par `describe` :
|
||||
- **Rendu** : label, placeholder, icône calendrier, affichage de la valeur formatée
|
||||
- **Popover** : ouverture au clic, fermeture au click outside, vue initiale selon `modelValue`
|
||||
- **Navigation** : chevrons en vue jours, passage décembre↔janvier avec changement d'année
|
||||
- **Sélection** : émission ISO correcte, fermeture après sélection, sélection d'un jour hors mois
|
||||
- **Bornes** : jours hors `min`/`max` non cliquables, comparaison ISO
|
||||
- **Vue mois** : bascule, chevrons en vue mois naviguent l'année, clic mois retourne en vue jours
|
||||
- **Clearable** : présence/absence de la croix, émission `null`, pas d'ouverture
|
||||
- **États** : `disabled` et `readonly` bloquent l'ouverture
|
||||
- **A11y** : `aria-invalid`, `aria-describedby`
|
||||
- **Synchro externe** : changement de `modelValue` programmatique
|
||||
|
||||
### `useMonthMatrix.test.ts` (~10 cas)
|
||||
|
||||
- Mois standard (mai 2026) produit 6×7 cellules
|
||||
- Mois commençant un lundi (toutes les cases du premier lundi sont du mois courant)
|
||||
- Mois finissant un dimanche
|
||||
- Année bissextile (février 2024 : 29 jours)
|
||||
- Numéro de semaine ISO en début d'année (janvier 2026 commence en semaine 1 ou 52/53 de 2025 ?)
|
||||
- Numéro de semaine ISO en fin d'année
|
||||
|
||||
### `dateFormat.test.ts` (~10 cas)
|
||||
|
||||
- `formatIsoToDisplay` : nominal, null, format invalide
|
||||
- `parseDisplayToIso` : nominal, format invalide, jour ou mois hors borne
|
||||
- `isValidIso` : nominal, faux positifs (32 jours, mois 13)
|
||||
- `isDateInRange` : sans bornes, avec min seul, avec max seul, avec les deux
|
||||
|
||||
Helper `mountComponent(props)` reprend le pattern existant des autres tests Malio. Environnement Vitest + jsdom (déjà configurés).
|
||||
|
||||
## Story Histoire `Date.story.vue`
|
||||
|
||||
Dans `app/story/date/Date.story.vue`. Variants :
|
||||
1. **Default** — vierge, label "Date de naissance"
|
||||
2. **Avec valeur initiale** — `modelValue="2026-05-19"`
|
||||
3. **Avec min/max** — borné aujourd'hui → +30 jours, label "Date du rendez-vous"
|
||||
4. **États** — disabled, readonly, error, success, hint
|
||||
5. **Non-clearable** — `clearable=false`
|
||||
6. **Required** — avec error si vide
|
||||
7. **Override de classes** — `inputClass`, `groupClass` custom
|
||||
|
||||
## Playground `.playground/pages/composant/date.vue`
|
||||
|
||||
Page de test dev :
|
||||
- Un `<MalioDate>` standalone
|
||||
- Affichage de la valeur courante en dessous
|
||||
- Boutons pour reset (`value = null`) et forcer une date (`value = '2026-12-25'`)
|
||||
- Un cas avec `min`/`max`
|
||||
|
||||
Lien ajouté dans `.playground/pages/index.vue`.
|
||||
|
||||
## Découpage de l'implémentation
|
||||
|
||||
Le plan d'implémentation (généré ensuite via `writing-plans`) découpera en étapes ordonnées :
|
||||
1. Composables purs (`dateFormat`, `useMonthMatrix`, `useCalendarPopover`) + leurs tests
|
||||
2. Sous-composants internes (`CalendarHeader`, `MonthGrid`, `MonthPicker`)
|
||||
3. Composant public `Date.vue`
|
||||
4. Tests d'intégration `Date.test.ts`
|
||||
5. Story Histoire + page playground
|
||||
@@ -1,243 +0,0 @@
|
||||
# MalioDateRange — Design Spec
|
||||
|
||||
Composant de sélection d'une **période** (date début / date fin) via un champ + popover calendrier. Deuxième brique de la famille temporelle, construite sur un shell partagé extrait de `MalioDate`.
|
||||
|
||||
**Ticket :** MUI-33 (suite)
|
||||
**Branche :** `feature/MUI-33-developper-le-composant-datepicker`
|
||||
**Spec liée :** `docs/superpowers/specs/2026-05-19-datepicker-design.md`
|
||||
|
||||
## Contexte & roadmap
|
||||
|
||||
`MalioDate` (sélection simple) est déjà livré. Suivront `DateWeek` et `DateTime`. Les 4 composants partagent le **même champ + popover + header + vue mois** ; seule la sélection diffère. On extrait donc un shell réutilisable `CalendarField` (Approche 3 retenue parce que la famille comptera 4 variantes — la duplication de coquille ×4 et la maintenance front en parallèle sont le vrai risque).
|
||||
|
||||
## Périmètre
|
||||
|
||||
Sélection d'une période sur **un seul mois** affiché (popover = largeur du champ, comme `Date`). Visuellement identique à `Date`, sauf :
|
||||
- on sélectionne **deux dates** (début/fin)
|
||||
- les jours **entre** les bornes ont un fond `bg-m-primary-light` (bleu clair)
|
||||
- les bornes (start/end) gardent le cercle plein `bg-m-primary`
|
||||
- **aperçu au survol** (hover preview) de la plage pendant la sélection
|
||||
|
||||
**Inclus :** sélection 2 clics, auto-inversion, hover preview, surlignage de plage (demi-barre aux bornes), bornes `min`/`max`, effacement, vue mois conservée.
|
||||
|
||||
**Reporté :** deux mois côte à côte, ajustement de la borne la plus proche au 3e clic (on garde le reset standard), saisie clavier, navigation clavier.
|
||||
|
||||
## Architecture (Approche 3 — shell partagé)
|
||||
|
||||
```
|
||||
app/components/malio/date/
|
||||
Date.vue # ENVELOPPE (refacto) — sélection simple
|
||||
DateRange.vue # ENVELOPPE (nouveau) — sélection période
|
||||
Date.test.ts # inchangé (filet de sécurité du refacto)
|
||||
DateRange.test.ts # nouveau
|
||||
internal/
|
||||
CalendarField.vue # NOUVEAU — shell : champ + popover + header + MonthPicker
|
||||
CalendarHeader.vue # inchangé
|
||||
MonthGrid.vue # étendu : props range + émission hover + data-range-role
|
||||
MonthPicker.vue # inchangé
|
||||
composables/
|
||||
useCalendarView.ts # NOUVEAU — état mois/année + navigation (extrait de Date.vue)
|
||||
useCalendarView.test.ts
|
||||
useCalendarPopover.ts # inchangé
|
||||
dateRange.ts # NOUVEAU — helpers purs de plage
|
||||
dateRange.test.ts
|
||||
dateFormat.ts # inchangé
|
||||
useMonthMatrix.ts # inchangé
|
||||
app/story/date/dateRange.story.vue
|
||||
.playground/pages/composant/date/dateRange.vue
|
||||
```
|
||||
|
||||
Flux :
|
||||
|
||||
```
|
||||
DateRange.vue (enveloppe)
|
||||
├─ état de sélection range ({start,end} + pendingStart + hoverDate)
|
||||
├─ displayValue ("19/05/2026 - 25/05/2026")
|
||||
└─ <CalendarField :display-value :sync-to=start ... @clear @close>
|
||||
├─ champ + popover (useCalendarPopover) + navigation (useCalendarView)
|
||||
├─ header + MonthPicker (viewMode='months')
|
||||
└─ <slot :current-month :current-year :close> ← viewMode='days'
|
||||
└─ <MonthGrid> mode range (rangeStart/rangeEnd/previewDate, @select, @hover)
|
||||
```
|
||||
|
||||
`CalendarField` ne connaît **rien** de la sélection : il gère champ, ouverture, navigation, et expose `{ currentMonth, currentYear, close }` au slot. Chaque enveloppe branche son `MonthGrid` et décide quand appeler `close()`.
|
||||
|
||||
## `useCalendarView.ts`
|
||||
|
||||
```ts
|
||||
function useCalendarView(viewMode: Ref<'days' | 'months'>): {
|
||||
currentMonth: Ref<number> // 0-11
|
||||
currentYear: Ref<number>
|
||||
goToPrev: () => void // viewMode==='months' ? année-1 : mois-1 (roulement déc↔jan)
|
||||
goToNext: () => void // idem +1
|
||||
selectMonth: (m: number) => void // currentMonth = m
|
||||
syncToIso: (iso: string | null) => void // mois/année depuis un ISO valide, sinon mois courant
|
||||
}
|
||||
```
|
||||
|
||||
Reprend la logique `onPrev`/`onNext`/`syncViewToValue` actuelle de `Date.vue`. Pur, testable seul.
|
||||
|
||||
## `CalendarField.vue` (shell)
|
||||
|
||||
**Props :**
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `displayValue` | `string` | **requis** | Texte affiché dans le champ (`''` si rien/incomplet) |
|
||||
| `syncTo` | `string \| null` | **requis** | ISO servant à caler le mois à l'ouverture |
|
||||
| `id`,`name`,`label`,`placeholder` | `string` | `''` / `'JJ/MM/AAAA'` | Champ |
|
||||
| `required`,`disabled`,`readonly` | `boolean` | `false` | États |
|
||||
| `hint`,`error`,`success` | `string` | `''` | Messages |
|
||||
| `clearable` | `boolean` | `true` | Croix d'effacement |
|
||||
| `inputClass`,`labelClass`,`groupClass` | `string` | `''` | Overrides twMerge |
|
||||
|
||||
**Events :**
|
||||
|
||||
| Event | Payload | Description |
|
||||
|-------|---------|-------------|
|
||||
| `clear` | — | Croix cliquée → l'enveloppe met son `modelValue` à `null` |
|
||||
| `close` | — | Popover fermé (clic dehors ou programmatique) → l'enveloppe annule sa sélection en cours |
|
||||
|
||||
**Slot par défaut** (scoped, rendu quand `viewMode==='days'`) : `{ currentMonth: number, currentYear: number, close: () => void }`.
|
||||
|
||||
**Comportement** (repris à l'identique de l'actuel `Date.vue`) : input readonly, label flottant (bleu à l'ouverture), icône calendrier, croix (si `clearable && displayValue && !disabled && !readonly`), grossissement calibré 48px, bordures/états, popover ombré largeur champ collé sous le champ, header (`prev`/`next`→`useCalendarView`, `toggle`→`useCalendarPopover.toggleView`), `MonthPicker` en vue mois (clic mois → `selectMonth` + retour vue jours), `syncToIso(syncTo)` à l'ouverture + watch resync. `isFilled` dérivé de `displayValue.length > 0`.
|
||||
|
||||
## `dateRange.ts` (helpers purs)
|
||||
|
||||
```ts
|
||||
type DateRangeValue = { start: string; end: string }
|
||||
|
||||
function normalizeRange(a: string, b: string): DateRangeValue
|
||||
// réordonne pour garantir start ≤ end
|
||||
|
||||
function resolveRangeBounds(
|
||||
start: string | null, end: string | null, preview: string | null,
|
||||
): { lo: string; hi: string } | null
|
||||
// pas de start → null ; end committé prioritaire, sinon preview, sinon {lo:start,hi:start}
|
||||
|
||||
type DayRangeRole = 'none' | 'single' | 'start' | 'end' | 'in-range'
|
||||
function dayRangeRole(iso: string, bounds: { lo: string; hi: string } | null): DayRangeRole
|
||||
```
|
||||
|
||||
## `MonthGrid.vue` — extension
|
||||
|
||||
**Nouvelles props (optionnelles) :** `rangeStart?`, `rangeEnd?`, `previewDate?` (ISO ou null). Mode plage actif dès que `rangeStart` est passé ; sinon mode simple (`selectedDate`, comportement actuel inchangé).
|
||||
|
||||
**Nouvel event :** `hover` payload `string | null` — `mouseenter` d'un jour → ISO, `mouseleave` de la grille → `null`.
|
||||
|
||||
**Attribut testabilité :** chaque bouton jour porte `:data-range-role="role"` (`none`/`single`/`start`/`end`/`in-range`).
|
||||
|
||||
**Rendu d'un jour en mode plage** — bouton `relative` superposant 2 couches :
|
||||
1. Barre de fond absolue `bg-m-primary-light` : `in-range` → pleine largeur (`inset-0`) ; `start` → moitié droite (`left-1/2 right-0`) ; `end` → moitié gauche (`left-0 right-1/2`) ; `single`/`none` → aucune.
|
||||
2. Cercle (span `h-10 w-10`) au-dessus : `start`/`end`/`single` → `bg-m-primary` blanc ; `in-range` → transparent, texte noir ; `none` → rendu simple actuel (aujourd'hui, hors-mois…).
|
||||
|
||||
La barre passe sous les cercles, colonnes jointives → plage continue démarrant/finissant au centre des cercles.
|
||||
|
||||
## `DateRange.vue` (enveloppe)
|
||||
|
||||
**Props :** identiques à `Date` sauf `modelValue?: { start: string; end: string } | null`. (`id`,`name`,`label`,`placeholder`,`required`,`disabled`,`readonly`,`hint`,`error`,`success`,`min`,`max`,`clearable`,`inputClass`,`labelClass`,`groupClass`.)
|
||||
|
||||
**Emit :** `update:modelValue` → `{ start: string; end: string } | null`.
|
||||
|
||||
**État interne :**
|
||||
```ts
|
||||
pendingStart = ref<string | null>(null) // 1er clic en attente du 2e
|
||||
hoverDate = ref<string | null>(null) // survol pour le preview
|
||||
const isSelecting = computed(() => pendingStart.value !== null)
|
||||
```
|
||||
|
||||
**Passé au `<MonthGrid>` :**
|
||||
```ts
|
||||
rangeStart = isSelecting ? pendingStart : (modelValue?.start ?? null)
|
||||
rangeEnd = isSelecting ? null : (modelValue?.end ?? null)
|
||||
previewDate = isSelecting ? hoverDate : null
|
||||
// + :min :max :month :year (slot)
|
||||
```
|
||||
|
||||
**`displayValue` :** `''` pendant la sélection (1 seul jour choisi) ; `"JJ/MM/AAAA - JJ/MM/AAAA"` si plage complète ; `''` sinon. **`syncTo`** = `modelValue?.start ?? null`.
|
||||
|
||||
**Machine à états :**
|
||||
```
|
||||
onSelectDay(iso):
|
||||
si pendingStart === null: # 1er clic (ou reset après plage complète)
|
||||
pendingStart = iso ; hoverDate = null
|
||||
sinon: # 2e clic → complète
|
||||
{ start, end } = normalizeRange(pendingStart, iso) # auto-inversion
|
||||
emit('update:modelValue', { start, end })
|
||||
pendingStart = null ; hoverDate = null
|
||||
close() # ferme le popover (slot)
|
||||
|
||||
onHover(iso): # émis par MonthGrid
|
||||
si isSelecting: hoverDate = iso # preview seulement pendant la sélection
|
||||
|
||||
onClose(): # CalendarField émet 'close'
|
||||
pendingStart = null ; hoverDate = null # annule la sélection en cours, modelValue inchangé
|
||||
|
||||
onClear(): # CalendarField émet 'clear'
|
||||
emit('update:modelValue', null)
|
||||
pendingStart = null ; hoverDate = null
|
||||
```
|
||||
|
||||
- **3e clic** (plage complète) : `pendingStart===null` → nouveau `start`, ancienne plage masquée pendant la sélection (`rangeEnd=null`), remplacée à la complétion.
|
||||
- **min/max** : `MonthGrid` désactive les jours hors bornes → les 2 clics sont contraints.
|
||||
- **modelValue invalide** (start/end mal formés) : traité comme `null` + warning dev.
|
||||
|
||||
## Refacto `Date.vue`
|
||||
|
||||
API publique **inchangée**. Devient une enveloppe (~80 lignes) :
|
||||
```vue
|
||||
<CalendarField :display-value="displayValue" :sync-to="modelValue ?? null" ...props
|
||||
@clear="emit('update:modelValue', null)">
|
||||
<template #default="{ currentMonth, currentYear, close }">
|
||||
<MonthGrid :month="currentMonth" :year="currentYear"
|
||||
:selected-date="modelValue ?? null" :min="min" :max="max"
|
||||
@select="(iso) => { emit('update:modelValue', iso); close() }" />
|
||||
</template>
|
||||
</CalendarField>
|
||||
```
|
||||
`displayValue = formatIsoToDisplay(modelValue)`. Watch modelValue invalide → warning dev (conservé). Mode simple : pas de `@close` (rien à annuler), pas de `@hover`.
|
||||
|
||||
**Les 21 tests de `Date.test.ts` doivent passer sans modification** : tous les `data-test` sont rendus par `CalendarField`/`MonthGrid`, donc présents dans le DOM monté de `Date`. C'est le filet de sécurité du refacto.
|
||||
|
||||
## Tests
|
||||
|
||||
### `dateRange.test.ts` (~12)
|
||||
- `normalizeRange` : ordonné, inversé, égal
|
||||
- `resolveRangeBounds` : pas de start → null ; start seul → `{lo,hi}=start` ; start+end ordonné ; start+preview ; preview avant start (inversion) ; end prioritaire sur preview
|
||||
- `dayRangeRole` : none (pas de bornes / hors plage), single (lo===hi), start, end, in-range
|
||||
|
||||
### `useCalendarView.test.ts` (~8, fake timers)
|
||||
- mois/année initiaux = aujourd'hui ; `goToNext`/`goToPrev` vue jours (+ roulement déc↔jan avec année) ; `goToNext`/`goToPrev` vue mois (année ±1) ; `selectMonth` ; `syncToIso` valide / null
|
||||
|
||||
### `Date.test.ts`
|
||||
Inchangé — doit rester vert (filet du refacto).
|
||||
|
||||
### `DateRange.test.ts` (~18)
|
||||
- Rendu : label, icône, `"19/05/2026 - 25/05/2026"` si modelValue, champ vide sinon
|
||||
- Ouverture popover, vue sur le mois du `start`
|
||||
- 1er clic → pas d'émission ; 2e clic → émet `{start,end}` + ferme
|
||||
- 2e clic avant le 1er → auto-inversion (start ≤ end)
|
||||
- Même jour ×2 → `{start:x, end:x}`
|
||||
- 3e clic → repart sur un nouveau start (pas d'émission avant le 2e)
|
||||
- Hover pendant sélection → `data-range-role="in-range"` sur jours intermédiaires ; pas de preview hors sélection
|
||||
- Rôles : `start`/`end`/`in-range` corrects via `data-range-role`
|
||||
- Clic dehors pendant sélection → annulation, `modelValue` inchangé
|
||||
- `clear` → émet `null`
|
||||
- min/max → jours hors bornes non cliquables
|
||||
- a11y : `aria-invalid` sur error
|
||||
|
||||
### Story `dateRange.story.vue`
|
||||
Default vide, plage initiale, min/max, états (disabled/readonly/error/success), non-clearable.
|
||||
|
||||
### Playground `.playground/pages/composant/date/dateRange.vue`
|
||||
`<MalioDateRange>` standalone + affichage `start → end`, boutons set/reset, cas borné.
|
||||
|
||||
## Découpage d'implémentation
|
||||
|
||||
1. Helpers purs `dateRange.ts` + tests
|
||||
2. Composable `useCalendarView.ts` + tests
|
||||
3. Shell `CalendarField.vue` (extraction depuis `Date.vue`)
|
||||
4. Refacto `Date.vue` en enveloppe → `Date.test.ts` doit rester vert
|
||||
5. Extension `MonthGrid.vue` (range + hover + data-range-role)
|
||||
6. `DateRange.vue` + `DateRange.test.ts`
|
||||
7. Story + playground
|
||||
@@ -1,168 +0,0 @@
|
||||
# MalioDateWeek — Design Spec
|
||||
|
||||
Composant de sélection d'une **semaine ISO complète** (lundi→dimanche) via le shell calendrier partagé. Troisième brique de la famille temporelle.
|
||||
|
||||
**Ticket :** MUI-33 (suite)
|
||||
**Branche :** `feature/MUI-33-developper-le-composant-datepicker`
|
||||
**Specs liées :** `2026-05-19-datepicker-design.md`, `2026-05-20-daterange-design.md`
|
||||
|
||||
## Périmètre
|
||||
|
||||
Sélection d'une semaine entière en **un clic** (sur n'importe quel jour OU le numéro de semaine). Visuellement : la ligne de la semaine se surligne en pilule `bg-m-primary-light` (lundi arrondi gauche, dimanche arrondi droit), exactement comme une plage `DateRange` figée lun→dim. Survol = aperçu de la semaine. La cellule n° de la semaine sélectionnée passe en `bg-m-primary` (repère).
|
||||
|
||||
**Inclus :** clic jour/n° → semaine, hover de semaine, surlignage pilule, repère n° semaine, bornes `min`/`max` (semaine sélectionnable si elle chevauche), effacement, vue mois conservée.
|
||||
|
||||
**Reporté :** deux mois, saisie/navigation clavier.
|
||||
|
||||
## Donnée retournée
|
||||
|
||||
`modelValue: string | null` au format **ISO 8601 semaine `YYYY-Www`** (ex. `"2026-W21"`), comme l'`<input type="week">` natif. L'année est l'**année ISO de numérotation** (peut différer de l'année calendaire aux bords d'année). Affichage humain dans le champ : `"Semaine 21 (18/05 → 24/05/2026)"` (le `modelValue` reste `2026-W21`).
|
||||
|
||||
## Architecture (Approche 1 — réutilisation du rendu plage)
|
||||
|
||||
Une semaine sélectionnée **est** une plage lundi→dimanche : on réutilise le rendu pilule de `MonthGrid` (mode plage) en passant les bornes de la semaine active. Les events `select`/`hover` (jour) sont réutilisés ; l'enveloppe `DateWeek` mappe jour → semaine.
|
||||
|
||||
```
|
||||
app/components/malio/date/
|
||||
DateWeek.vue # NOUVEAU — enveloppe
|
||||
DateWeek.test.ts # nouveau
|
||||
internal/
|
||||
MonthGrid.vue # étendu : interactiveWeekNumber + markedWeekStart (additifs)
|
||||
CalendarField.vue # inchangé (shell réutilisé)
|
||||
CalendarHeader.vue # inchangé
|
||||
MonthPicker.vue # inchangé
|
||||
composables/
|
||||
dateWeek.ts # NOUVEAU — helpers semaine ISO (purs)
|
||||
dateWeek.test.ts # nouveau
|
||||
dateRange.ts # inchangé (rendu pilule réutilisé)
|
||||
dateFormat.ts # inchangé
|
||||
useCalendarView.ts # inchangé
|
||||
useCalendarPopover.ts # inchangé
|
||||
useMonthMatrix.ts # inchangé
|
||||
app/story/date/dateWeek.story.vue
|
||||
.playground/pages/composant/date/dateWeek.vue
|
||||
```
|
||||
|
||||
Flux :
|
||||
|
||||
```
|
||||
DateWeek.vue (enveloppe)
|
||||
├─ état : hoverWeekStart (lundi de la semaine survolée)
|
||||
├─ validWeek = isValidIsoWeek(modelValue) ? { monday: isoWeekToMonday(modelValue) } : null
|
||||
├─ activeMonday = hoverWeekStart ?? validWeek.monday → activeSunday = sundayOf(activeMonday)
|
||||
├─ displayValue = formatWeekDisplay(modelValue)
|
||||
└─ <CalendarField :display-value :sync-to=validWeek.monday @clear @close>
|
||||
└─ <MonthGrid
|
||||
:range-start=activeMonday :range-end=activeSunday ← pilule lun→dim réutilisée
|
||||
:marked-week-start=validWeek.monday ← repère n° semaine
|
||||
interactive-week-number ← n° semaine cliquable/hoverable
|
||||
:min :max
|
||||
@select="(iso)=>onSelect(iso, close)" @hover="onHover" />
|
||||
```
|
||||
|
||||
## `dateWeek.ts` (helpers purs)
|
||||
|
||||
```ts
|
||||
function mondayOf(iso: string): string // "2026-05-20" → "2026-05-18"
|
||||
function sundayOf(iso: string): string // "2026-05-20" → "2026-05-24"
|
||||
function toIsoWeek(iso: string): string // "2026-05-20" → "2026-W21" (année ISO + n° semaine)
|
||||
function isoWeekToMonday(week: string): string | null // "2026-W21" → "2026-05-18" ; invalide → null
|
||||
function isValidIsoWeek(week: string): boolean // "2026-W21" → true ; "2026-W54"/"2026-21" → false
|
||||
function formatWeekDisplay(week: string): string // "2026-W21" → "Semaine 21 (18/05 → 24/05/2026)" ; invalide → ""
|
||||
```
|
||||
|
||||
- Algo ISO 8601 : jeudi de la semaine pour l'année de numérotation ; lundi de la semaine contenant le 4 janvier = semaine 1.
|
||||
- `formatWeekDisplay` : `Semaine {n° sans zéro} ({JJ/MM lundi} → {JJ/MM/AAAA dimanche})`, réutilise `formatIsoToDisplay`.
|
||||
- Cas pièges testés : `2025-12-31` → `2026-W01`, `2027-01-01` → `2026-W53`, `2026-01-01` → `2026-W01`.
|
||||
|
||||
## `MonthGrid.vue` — ajouts additifs
|
||||
|
||||
Nouvelles props optionnelles (n'altèrent pas les modes simple/plage) :
|
||||
```ts
|
||||
interactiveWeekNumber?: boolean // défaut false
|
||||
markedWeekStart?: string | null // défaut null — lundi de la semaine repère
|
||||
```
|
||||
|
||||
Quand `interactiveWeekNumber === true` :
|
||||
- La cellule n° de semaine devient un `<button>` : `@click` émet `select(week.days[0].isoDate)`, `@mouseenter` émet `hover(week.days[0].isoDate)`. `:disabled` si `!weekSelectable`, où `weekSelectable = week.days.some(d => inRange(d.isoDate))`. `cursor-pointer` si sélectionnable.
|
||||
- Repère : si `week.days[0].isoDate === markedWeekStart`, la cellule n° passe en `bg-m-primary text-white` (au lieu de `bg-m-primary-light`).
|
||||
|
||||
Toujours (inoffensif hors mode semaine) : la cellule n° porte `:data-week-start="week.days[0].isoDate"` et `:data-marked="week.days[0].isoDate === markedWeekStart"`.
|
||||
|
||||
Inchangé : rendu pilule des jours piloté par `rangeStart`/`rangeEnd` ; events `select`/`hover` jour ; quand `interactiveWeekNumber` est `false`, la cellule n° reste un `<div>` non cliquable (aucune régression `Date`/`DateRange`).
|
||||
|
||||
## `DateWeek.vue` (enveloppe)
|
||||
|
||||
**Props :** identiques à `Date` sauf `modelValue?: string | null` (`YYYY-Www`).
|
||||
**Emit :** `update:modelValue` → `string | null`.
|
||||
|
||||
**État :**
|
||||
```ts
|
||||
hoverWeekStart = ref<string | null>(null)
|
||||
const validWeek = computed(() =>
|
||||
(props.modelValue && isValidIsoWeek(props.modelValue))
|
||||
? {monday: isoWeekToMonday(props.modelValue) as string}
|
||||
: null)
|
||||
const activeMonday = computed(() => hoverWeekStart.value ?? validWeek.value?.monday ?? null)
|
||||
const activeSunday = computed(() => activeMonday.value ? sundayOf(activeMonday.value) : null)
|
||||
```
|
||||
|
||||
**Passé à `MonthGrid` :** `range-start=activeMonday`, `range-end=activeSunday`, `marked-week-start=validWeek?.monday ?? null`, `interactive-week-number`, `min`, `max`, month/year du slot.
|
||||
|
||||
**`displayValue`** = `validWeek ? formatWeekDisplay(modelValue) : ''`. **`syncTo`** = `validWeek?.monday ?? null`.
|
||||
|
||||
**Comportement (1 clic) :**
|
||||
```
|
||||
onSelect(iso, close): # jour OU n° de semaine (= lundi)
|
||||
emit('update:modelValue', toIsoWeek(iso))
|
||||
hoverWeekStart = null
|
||||
close()
|
||||
|
||||
onHover(iso): # jour/n° survolé ; null au mouseleave
|
||||
hoverWeekStart = iso ? mondayOf(iso) : null
|
||||
|
||||
onClose(): hoverWeekStart = null
|
||||
onClear(): emit('update:modelValue', null) ; hoverWeekStart = null
|
||||
```
|
||||
|
||||
- Survol → toute la ligne en pilule via `activeMonday`.
|
||||
- Sélection en un clic → `YYYY-Www` + fermeture.
|
||||
- Repère de la semaine committée conservé pendant le survol d'une autre.
|
||||
- `modelValue` invalide → traité comme `null` + warning dev.
|
||||
|
||||
## Tests
|
||||
|
||||
### `dateWeek.test.ts` (~14)
|
||||
- `mondayOf`/`sundayOf` : mercredi, lundi (idempotent), dimanche
|
||||
- `toIsoWeek` : nominal + bords d'année (`2025-12-31`→`2026-W01`, `2027-01-01`→`2026-W53`, `2026-01-01`→`2026-W01`)
|
||||
- `isoWeekToMonday` : `2026-W21`→`2026-05-18` ; round-trip ; invalide → null
|
||||
- `isValidIsoWeek` : valide / `W00` / `W54` / format faux
|
||||
- `formatWeekDisplay` : `2026-W21`→`"Semaine 21 (18/05 → 24/05/2026)"` ; invalide → `""`
|
||||
|
||||
### `DateWeek.test.ts` (~14, `setSystemTime(2026-05-19)`)
|
||||
- Rendu label/icône, affichage `"Semaine ..."` si modelValue, champ vide sinon
|
||||
- Ouverture sur le mois de la semaine du modelValue
|
||||
- Clic d'un jour → émet le `YYYY-Www` de sa semaine + ferme
|
||||
- Clic du n° de semaine (`[data-test="week-number"][data-week-start="..."]`) → émet + ferme
|
||||
- Hover d'un jour → `data-range-role` start/in-range/end sur les 7 jours de la ligne ; autre ligne `none`
|
||||
- Hover du n° de semaine → même surlignage
|
||||
- Semaine committée → roles corrects + `data-marked="true"` sur la cellule n°
|
||||
- `clear` → émet `null`
|
||||
- min/max : semaine hors bornes n° désactivé + jours non cliquables ; semaine qui chevauche reste sélectionnable
|
||||
- `disabled`/`readonly` → pas d'ouverture
|
||||
- a11y : `aria-invalid` sur error
|
||||
|
||||
`Date.test.ts` / `DateRange.test.ts` restent verts (props additives).
|
||||
|
||||
### Story `dateWeek.story.vue`
|
||||
Default vide, semaine initiale, min/max, états (disabled/readonly/error/success), non-clearable.
|
||||
|
||||
### Playground `.playground/pages/composant/date/dateWeek.vue`
|
||||
Comparatif Large (480px) / ERP (396px), affichage `modelValue` + bornes du champ, boutons set/reset, cas borné.
|
||||
|
||||
## Découpage d'implémentation
|
||||
|
||||
1. `dateWeek.ts` (purs) + tests
|
||||
2. Extension `MonthGrid.vue` (interactiveWeekNumber + markedWeekStart + data attrs)
|
||||
3. `DateWeek.vue` + `DateWeek.test.ts`
|
||||
4. Story + playground
|
||||
@@ -1,146 +0,0 @@
|
||||
# Refonte du composant `<MalioDrawer>` — Design
|
||||
|
||||
> Ticket : MUI-35 — Revoir le design du composant Drawer
|
||||
> Date : 2026-05-21
|
||||
> Statut : design validé, à implémenter
|
||||
|
||||
## Contexte & problème
|
||||
|
||||
Le `<MalioDrawer>` actuel fait le strict minimum et ne tient pas la comparaison
|
||||
avec les drawers des libs modernes (shadcn/Sheet, PrimeVue, Element Plus, Nuxt UI) :
|
||||
|
||||
- glisse **uniquement depuis la droite**, pas de choix de côté ;
|
||||
- **un seul slot** (le contenu), pas de header/footer structurés ;
|
||||
- **aucune accessibilité réelle** : pas de focus-trap, pas de restitution du focus,
|
||||
pas de fermeture au clavier (Échap) ;
|
||||
- **pas de scroll-lock** du body quand le drawer est ouvert.
|
||||
|
||||
Objectif : refondre le composant en gardant l'esprit du layer Malio
|
||||
(hand-rollé, 1 composant `.vue`, props communes, `twMerge`), sans introduire de
|
||||
dépendance ni refondre les autres composants.
|
||||
|
||||
## Décisions structurantes
|
||||
|
||||
- **Hand-rollé**, pas de dépendance type Reka UI. Cohérence avec le reste du layer.
|
||||
- **Un seul composant** `<MalioDrawer>` (props + slots). Pas de primitives composables.
|
||||
- **Breaking change assumé** → bump de version **majeure** via semantic-release.
|
||||
Les apps consommatrices migreront (cf. section Migration).
|
||||
- Périmètre : **le drawer uniquement**. Les autres composants ne bougent pas.
|
||||
|
||||
## API
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot | Rôle |
|
||||
|------|------|
|
||||
| `#header` | Contenu d'en-tête (titre + ce que veut le consommateur). **Aucune prop `title`.** |
|
||||
| _défaut_ | Le body, dans la zone scrollable. |
|
||||
| `#footer` | Rendu **dans la zone scrollable**, juste après le body. **Aucune classe de positionnement imposée.** |
|
||||
|
||||
### Props
|
||||
|
||||
| Prop | Type | Défaut | Rôle |
|
||||
|------|------|--------|------|
|
||||
| `modelValue` | `boolean` | `undefined` | v-model d'ouverture (pattern contrôlé/non-contrôlé Malio) |
|
||||
| `id` | `string` | `''` (auto) | id du composant |
|
||||
| `side` | `'right' \| 'left'` | `'right'` | côté d'apparition |
|
||||
| `showClose` | `boolean` | `true` | affiche le bouton de fermeture (croix) |
|
||||
| `dismissable` | `boolean` | `true` | clic sur le backdrop ferme le drawer |
|
||||
| `closeOnEscape` | `boolean` | `true` | touche Échap ferme le drawer |
|
||||
| `ariaLabel` | `string` | `''` | nom accessible de secours quand `#header` est absent |
|
||||
| `drawerClass` | `string` | `''` | override du panneau (largeur réglée ici, ex. `max-w-2xl`) |
|
||||
| `overlayClass` | `string` | `''` | override du backdrop |
|
||||
| `headerClass` | `string` | `''` | override de la barre header |
|
||||
| `bodyClass` | `string` | `''` | override de la zone scrollable |
|
||||
| `footerClass` | `string` | `''` | override du wrapper du `#footer` |
|
||||
|
||||
> **Largeur/hauteur** : pas de prop `size`. Tout se règle via `drawerClass`
|
||||
> (comme aujourd'hui).
|
||||
|
||||
### Emits
|
||||
|
||||
| Event | Payload | Quand |
|
||||
|-------|---------|-------|
|
||||
| `update:modelValue` | `boolean` | ouverture/fermeture |
|
||||
| `close` | — | à la fermeture (pratique pour la logique appelante) |
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ [slot #header] [ ✕ ] │ ← barre header (rendue si #header OU showClose)
|
||||
├─────────────────────────────┤
|
||||
│ │
|
||||
│ slot par défaut (body) │ ← zone scrollable (flex-1, overflow-y-auto)
|
||||
│ [slot #footer] │ ← rendu juste après le body, dans le même scroll,
|
||||
│ │ SANS classe de position par défaut
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
- La **barre header** n'est rendue que si le slot `#header` est fourni **ou** si
|
||||
`showClose` est vrai. Le bouton croix vit dans cette barre, à droite. L'icône de
|
||||
fermeture est **`mdi:cancel-bold`** (on conserve l'icône actuelle ; c'est le test
|
||||
qui sera adapté).
|
||||
- La **zone scrollable** (`flex-1 overflow-y-auto`) contient le slot par défaut
|
||||
puis, si fourni, le wrapper `#footer`.
|
||||
- Le **`#footer`** n'a **aucune** classe `sticky`/`flex-shrink-0`/position. Par défaut
|
||||
il scrolle avec le contenu. Pour le coller en bas, le consommateur passe
|
||||
`footer-class="sticky bottom-0 bg-white"`.
|
||||
|
||||
## Comportements (les manques actuels corrigés)
|
||||
|
||||
1. **Échap** ferme le drawer si `closeOnEscape` (listener `keydown` global, ajouté à
|
||||
l'ouverture, retiré à la fermeture).
|
||||
2. **Scroll-lock du body** : `overflow: hidden` sur `document.body` à l'ouverture,
|
||||
restauré à la fermeture.
|
||||
3. **Focus-trap** : à l'ouverture, focus sur le premier élément focusable du panneau
|
||||
(ou le panneau lui-même) ; `Tab`/`Shift+Tab` bouclent à l'intérieur du panneau.
|
||||
4. **Restitution du focus** : mémoriser `document.activeElement` à l'ouverture, le
|
||||
restaurer à la fermeture.
|
||||
5. **ARIA** :
|
||||
- `role="dialog"`, `aria-modal="true"` sur le panneau ;
|
||||
- `aria-labelledby` pointant sur l'id du wrapper `#header` **si** le slot est fourni ;
|
||||
- sinon `aria-label` = prop `ariaLabel` (fallback accessible).
|
||||
|
||||
## Transition
|
||||
|
||||
- Backdrop : fondu (`opacity`).
|
||||
- Panneau : translation selon `side` —
|
||||
- `right` : `translateX(100%)` → `0` ;
|
||||
- `left` : `translateX(-100%)` → `0`.
|
||||
- Conserver le pattern actuel `<Teleport to="body">` + `<Transition>` +
|
||||
`isRendered` (démontage après l'animation de sortie).
|
||||
|
||||
## Migration (breaking)
|
||||
|
||||
| Avant | Après |
|
||||
|-------|-------|
|
||||
| `title="Titre"` | `<template #header><h2>Titre</h2></template>` (ou composant de titre Malio) |
|
||||
| `<MalioDrawer>contenu</MalioDrawer>` | inchangé (slot par défaut = body) |
|
||||
| `drawer-class` | inchangé |
|
||||
| `show-close` | inchangé |
|
||||
| _(nouveau)_ | `side`, `dismissable`, `closeOnEscape`, `ariaLabel`, slots `#header`/`#footer` |
|
||||
|
||||
Les défauts des nouvelles props reproduisent au plus près le comportement actuel
|
||||
(`side="right"`, `showClose=true`, `dismissable=true`).
|
||||
|
||||
## Tests (Vitest + @vue/test-utils, jsdom)
|
||||
|
||||
À couvrir, en plus des tests de rendu/props/emits existants :
|
||||
|
||||
- rendu des 3 slots (`#header`, défaut, `#footer`) ;
|
||||
- `side` left/right → classes/transition attendues ;
|
||||
- `showClose` toggle la croix ; clic croix → ferme + emit ;
|
||||
- `dismissable` : clic backdrop ferme / ne ferme pas ;
|
||||
- `closeOnEscape` : Échap ferme / ne ferme pas ;
|
||||
- scroll-lock : `body` `overflow:hidden` à l'ouverture, restauré à la fermeture ;
|
||||
- focus-trap : focus initial dans le panneau ; restitution au déclencheur ;
|
||||
- ARIA : `aria-labelledby` quand `#header`, `aria-label` sinon ;
|
||||
- pattern contrôlé/non-contrôlé.
|
||||
|
||||
## Hors périmètre (YAGNI)
|
||||
|
||||
- côtés `top`/`bottom` (sheets) — extensible plus tard via `side` ;
|
||||
- prop `size` sémantique — `drawerClass` suffit ;
|
||||
- hook `before-close` ;
|
||||
- empilement de plusieurs drawers (un seul scroll-lock géré simplement).
|
||||
@@ -1,124 +0,0 @@
|
||||
# Refonte du système de playground
|
||||
|
||||
Date : 2026-05-21
|
||||
Branche : `feature/MUI-34-revoir-le-systeme-de-playground`
|
||||
|
||||
## Contexte
|
||||
|
||||
Le playground actuel (`.playground/`) est une **fausse SPA** : une unique page
|
||||
`index.vue` contient une sidebar codée à la main et charge dynamiquement les
|
||||
pages de démo via `import.meta.glob` + `<component :is>`. Il n'y a ni vrai
|
||||
routage, ni layout, et la sidebar ne réutilise pas le composant `MalioSidebar`
|
||||
de la bibliothèque.
|
||||
|
||||
Les pages de démo existent déjà dans `.playground/pages/composant/<catégorie>/<nom>.vue`
|
||||
mais ne sont pas exploitées comme de vraies routes.
|
||||
|
||||
## Objectif
|
||||
|
||||
Refondre le playground autour du **vrai routage fichier de Nuxt** et d'un
|
||||
**layout par défaut** qui embarque le composant `MalioSidebar` de production
|
||||
(dogfooding du composant).
|
||||
|
||||
## Décisions validées
|
||||
|
||||
| Sujet | Décision |
|
||||
|-------|----------|
|
||||
| Navigation | Vrai routage Nuxt + layout dédié |
|
||||
| Construction de la sidebar | Liste manuelle centralisée |
|
||||
| Habillage du layout | Sidebar + contenu seul (épuré, chaque page gère son titre) |
|
||||
| Page d'accueil | Page de bienvenue simple |
|
||||
| Surbrillance lien actif | Hors périmètre (MalioSidebar inchangé) |
|
||||
|
||||
## Architecture
|
||||
|
||||
### 1. Config de navigation centralisée
|
||||
|
||||
Nouveau fichier `.playground/playground.nav.ts` exportant un tableau
|
||||
`SidebarSection[]` (type exporté par `MalioSidebar`). Les sections sont
|
||||
définies manuellement ; chaque item est un `{ label, to }` pointant vers la
|
||||
route de démo.
|
||||
|
||||
```ts
|
||||
import type { SidebarSection } from '../app/components/malio/sidebar/Sidebar.vue'
|
||||
|
||||
export const navSections: SidebarSection[] = [
|
||||
{
|
||||
label: 'BOUTONS',
|
||||
icon: 'mdi:gesture-tap-button',
|
||||
items: [
|
||||
{ label: 'Button', to: '/composant/button/button' },
|
||||
{ label: 'Button Icon', to: '/composant/button/buttonIcon' },
|
||||
],
|
||||
},
|
||||
// … autres sections (Champs, Sélections, Navigation, Données, Divers)
|
||||
]
|
||||
```
|
||||
|
||||
Les routes correspondent exactement aux fichiers existants dans
|
||||
`.playground/pages/composant/`. Liste à couvrir :
|
||||
|
||||
- **button/** : `button`, `buttonIcon`
|
||||
- **checkbox/** : `checkbox`
|
||||
- **radio/** : `radioButton`
|
||||
- **input/** : `inputText`, `inputNumber`, `inputAmount`, `inputEmail`,
|
||||
`inputPassword`, `inputPhone`, `inputTextArea`, `inputAutocomplete`,
|
||||
`inputUpload`, `inputRichText`
|
||||
- **select/** : `select`, `selectCheckbox`
|
||||
- **time/** : `time`
|
||||
- **tab/** : `tabList`
|
||||
- **sidebar/** : `sidebar`
|
||||
- **drawer/** : `drawer`
|
||||
- **datatable/** : `datatable`
|
||||
- **site/** : `siteSelector`
|
||||
- **form/** : `client`
|
||||
|
||||
Le regroupement en sections et les libellés affichés sont au choix du
|
||||
développeur (manuel). Les routes, elles, sont imposées par les fichiers.
|
||||
|
||||
### 2. Layout par défaut
|
||||
|
||||
Nouveau fichier `.playground/layouts/default.vue` :
|
||||
|
||||
- Conteneur `flex` pleine hauteur (`h-screen`).
|
||||
- `<MalioSidebar :sections="navSections">` à gauche.
|
||||
- Slots `logo` / `logo-collapsed` : logos `LOGO_MALIO.png` /
|
||||
`LOGO_MALIO_COLLAPSED.png` (servis depuis le `public/` du layer),
|
||||
enveloppés dans un `<NuxtLink to="/">` pour revenir à l'accueil.
|
||||
- Collapse géré en interne par le composant (mode non-contrôlé).
|
||||
- `<main class="flex-1 overflow-y-auto p-6"><slot /></main>` à droite.
|
||||
|
||||
Le layout `default` s'applique automatiquement à toutes les pages du
|
||||
playground — aucune page n'a besoin de `definePageMeta({ layout })`.
|
||||
|
||||
### 3. Page d'accueil
|
||||
|
||||
`.playground/pages/index.vue` réécrite en page de bienvenue simple :
|
||||
titre + invitation à choisir un composant dans la sidebar. Toute la logique
|
||||
de glob / chargement dynamique / sidebar maison est supprimée.
|
||||
|
||||
### 4. Pages de démo
|
||||
|
||||
**Inchangées.** Elles sont déjà des routes `/composant/<cat>/<nom>` et
|
||||
hériteront automatiquement du layout `default`.
|
||||
|
||||
### 5. Mise à jour du skill `creating-malio-component`
|
||||
|
||||
Ajouter une étape au skill : lors de la création d'un nouveau composant,
|
||||
ajouter son entrée dans `.playground/playground.nav.ts` pour qu'il apparaisse
|
||||
dans la sidebar.
|
||||
|
||||
## Hors périmètre
|
||||
|
||||
- Surbrillance de l'item actif dans `MalioSidebar` (ticket dédié si besoin).
|
||||
- Toute autre évolution de `MalioSidebar`.
|
||||
- Refonte du contenu des pages de démo existantes.
|
||||
|
||||
## Critères de réussite
|
||||
|
||||
- `npm run dev` lance le playground avec `MalioSidebar` dans un layout.
|
||||
- Cliquer sur un item de la sidebar change l'URL et affiche la bonne démo.
|
||||
- Le logo ramène à l'accueil ; l'accueil affiche le message de bienvenue.
|
||||
- Plus aucune trace de la sidebar maison ni du chargement dynamique dans
|
||||
`index.vue`.
|
||||
- `npm run lint` et `npm run test` passent.
|
||||
@@ -12,7 +12,6 @@ export default defineNuxtConfig({
|
||||
path: join(dir, 'app/components/malio'),
|
||||
prefix: 'Malio',
|
||||
pathPrefix: false,
|
||||
extensions: ['vue'],
|
||||
},
|
||||
],
|
||||
|
||||
|
||||
@@ -20,7 +20,6 @@ export default {
|
||||
colors: {
|
||||
m: {
|
||||
primary: 'rgb(var(--m-primary) / <alpha-value>)',
|
||||
'primary-light': 'rgb(var(--m-primary-light) / <alpha-value>)',
|
||||
surface: 'rgb(var(--m-surface) / <alpha-value>)',
|
||||
border: 'rgb(var(--m-border) / <alpha-value>)',
|
||||
text: 'rgb(var(--m-text) / <alpha-value>)',
|
||||
|
||||
Reference in New Issue
Block a user