Yvv
a9e586cda1
- nuxt.config: extends ['../../yvv-nuxt-base'] - useMood.ts: délègue à useMood(moods) du layer, exporté useLibreMood (évite la collision avec l'auto-import du layer) - MoodSwitcher.vue + app.vue: appellent useLibreMood() - moods.css inchangé (couleurs = identité projet) Mécanisme partagé (application DOM, persistance, sync color-mode) mutualisé sans toucher le contrat CSS. Vérifié headless (Playwright) : 4 moods × light/dark × desktop/mobile OK, persistance au reload OK, zéro erreur JS, zéro régression. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
25 lines
1.1 KiB
TypeScript
25 lines
1.1 KiB
TypeScript
// Ambiances libreDecision — délègue le mécanisme au layer @yvv/nuxt-base.
|
|
// Les couleurs (identité du projet) restent dans assets/css/moods.css (classes .mood-*).
|
|
// Le layer fournit l'auto-import `useMood(moods, options)` ; on l'enveloppe ici
|
|
// sous le nom `useLibreMood` pour éviter la collision avec ce composable auto-importé.
|
|
|
|
export interface Mood {
|
|
id: string
|
|
label: string
|
|
description: string
|
|
icon: string
|
|
color: string
|
|
isDark: boolean
|
|
}
|
|
|
|
const moods: Mood[] = [
|
|
{ id: 'peps', label: 'Peps', description: 'Chaud et tonique', icon: 'i-lucide-sun', color: '#d44a10', isDark: false },
|
|
{ id: 'zen', label: 'Zen', description: 'Nature vivante', icon: 'i-lucide-leaf', color: '#2e8b48', isDark: false },
|
|
{ id: 'chagrine', label: 'Chagrine', description: 'Nuit profonde', icon: 'i-lucide-moon', color: '#6488d8', isDark: true },
|
|
{ id: 'grave', label: 'Grave', description: 'Ambre mineral', icon: 'i-lucide-shield', color: '#d8a030', isDark: true },
|
|
]
|
|
|
|
export function useLibreMood() {
|
|
return useMood(moods, { storageKey: 'libredecision_mood', defaultId: 'peps' })
|
|
}
|