@cnamts/synapse 1.0.24 → 1.0.26

package/src/composables/validation/useValidation.ts

@@ -1,7 +1,23 @@
 import { ref, computed } from 'vue'
 import { useFieldValidation, type RuleOptions, type ValidationResult as FieldValidationResult } from '../rules/useFieldValidation'
 
-export type BuiltInRuleType = 'required' | 'email' | 'minLength' | 'maxLength'
+type builtInDateRuleType =
+	'noWeekend'
+	| 'noBeforeToday'
+	| 'notAfterToday'
+	| 'notBeforeDate'
+	| 'notAfterDate'
+	| 'dateExact'
+	| 'isHolidayDay'
+
+type BuiltInNumberRuleType = 'min' | 'max'
+type BuiltInStringRuleType = 'minLength' | 'maxLength' | 'exactLength' | 'email' | 'matchPattern'
+type BuiltInRuleGeneralType = 'required' | 'custom'
+export type BuiltInRuleType =
+	| BuiltInRuleGeneralType
+	| BuiltInNumberRuleType
+	| BuiltInStringRuleType
+	| builtInDateRuleType
 
 interface CustomValidationRule {
 	type: 'custom'
@@ -43,6 +59,7 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 	const errors = ref<string[]>([])
 	const warnings = ref<string[]>([])
 	const successes = ref<string[]>([])
+	const successState = ref(false)
 
 	let currentValidationToken = 0
 
@@ -51,13 +68,17 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 	const hasError = computed(() => errors.value.length > 0)
 	const hasWarning = computed(() => warnings.value.length > 0)
 	const hasSuccess = computed(() =>
-		successes.value.length > 0 && !hasError.value && !hasWarning.value,
+		successState.value && !hasError.value && !hasWarning.value,
+	)
+	const displaySuccesses = computed(() =>
+		options.showSuccessMessages !== false ? successes.value : [],
 	)
 
 	const clearValidation = () => {
 		errors.value = []
 		warnings.value = []
 		successes.value = []
+		successState.value = false
 	}
 
 	/**
@@ -160,8 +181,12 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 				}
 			}
 
-			if (!hasValidationError && value && options.showSuccessMessages !== false && successRules.length === 0) {
-				addDefaultSuccessMessage(rules)
+			const isValueFilled = Array.isArray(value) ? value.length > 0 : !!value
+			if (!hasValidationError && isValueFilled && successRules.length === 0) {
+				successState.value = true
+				if (options.showSuccessMessages !== false) {
+					addDefaultSuccessMessage(rules)
+				}
 			}
 
 			if (!hasValidationError && warningRules.length > 0) {
@@ -190,6 +215,8 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 		const successResolved = executeRules(successRules, value, { isSuccess: true })
 
 		return thenOrSync(successResolved, token, (successResults) => {
+			successState.value = successResults.some(result => Boolean(result.success))
+
 			for (const r of successResults) {
 				if (r.success && options.showSuccessMessages !== false) {
 					successes.value.push(r.success)
@@ -207,6 +234,7 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 		errors,
 		warnings,
 		successes,
+		displaySuccesses,
 		hasError,
 		hasWarning,
 		hasSuccess,

package/src/composantsVuetify/VBreadcrumbs/VBreadcrumbs.mdx

@@ -0,0 +1,28 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VBreadcrumbsStories from './v-breadcrumbs.stories'
+
+<Meta title="Composants/Composants Vuetify/VBreadcrumbs" />
+
+<div className="header">
+    <h1>VBreadcrumbs</h1>
+Ce composant utilise directement le composant natif `v-breadcrumbs` de Vuetify avec les couleurs du thème actif du design system.
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-breadcrumbs/#props).
+</div>
+
+## Default
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VBreadcrumbsStories.Default} />
+</div>
+
+## Avec divider personnalisé
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VBreadcrumbsStories.CustomDivider} />
+</div>
+
+## Désactivé
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VBreadcrumbsStories.Disabled} />
+</div>

package/src/composantsVuetify/VBreadcrumbs/v-breadcrumbs.stories.ts

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VBreadcrumbs } from 'vuetify/components'
+
+const meta = {
+	title: 'Composants/Composants Vuetify/VBreadcrumbs',
+	component: VBreadcrumbs,
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) =>
+					src.replace(/VBreadcrumbs/g, 'v-breadcrumbs'),
+			},
+		},
+	},
+	tags: ['!dev'],
+	argTypes: {
+		items: {
+			control: 'object',
+			description: 'Liste des éléments du fil d\'ariane',
+		},
+		divider: {
+			control: 'text',
+			description: 'Caractère de séparation entre les éléments',
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'Désactive tous les liens',
+		},
+		color: {
+			control: 'text',
+			description: 'Couleur appliquée aux liens actifs (ex: primary, secondary, error...)',
+		},
+	},
+} satisfies Meta<typeof VBreadcrumbs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		color: 'primary',
+		items: [
+			{
+				title: 'Accueil',
+				disabled: false,
+				href: 'javascript:void(0)',
+			},
+			{
+				title: 'Catégorie',
+				disabled: false,
+				href: 'javascript:void(0)',
+			},
+			{
+				title: 'Page actuelle',
+				disabled: true,
+				href: 'javascript:void(0)',
+			},
+		],
+	},
+}
+
+export const CustomDivider: Story = {
+	args: {
+		divider: '›',
+		color: 'primary',
+		items: [
+			{
+				title: 'Accueil',
+				disabled: false,
+				href: 'javascript:void(0)',
+			},
+			{
+				title: 'Catégorie',
+				disabled: false,
+				href: 'javascript:void(0)',
+			},
+			{
+				title: 'Sous-catégorie',
+				disabled: false,
+				href: 'javascript:void(0)',
+			},
+			{
+				title: 'Page actuelle',
+				disabled: true,
+			},
+		],
+	},
+}
+
+export const Disabled: Story = {
+	args: {
+		items: [
+			{
+				title: 'Accueil',
+				href: 'javascript:void(0)',
+				disabled: true,
+			},
+			{
+				title: 'Catégorie',
+				href: 'javascript:void(0)',
+				disabled: true,
+			},
+			{
+				title: 'Page actuelle',
+			},
+		],
+	},
+}

package/src/composantsVuetify/VCard/VCard.mdx

@@ -0,0 +1,59 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VCardStories from './v-card.stories'
+
+<Meta title="Composants/Composants Vuetify/VCard" />
+
+<div className="header">
+    <h1>VCard</h1>
+Ce composant utilise directement le composant natif `v-card` de Vuetify avec les couleurs du thème actif du design system.
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-card/#props).
+</div>
+
+### Composants associés
+
+- `v-card-title` : Titre de la carte
+- `v-card-subtitle` : Sous-titre de la carte
+- `v-card-text` : Contenu textuel de la carte
+- `v-card-actions` : Zone pour les boutons d'action
+
+## Variantes
+
+Le composant `v-card` propose plusieurs variantes de style :
+
+- **elevated** : Carte avec une ombre (par défaut)
+- **flat** : Carte sans ombre
+- **outlined** : Carte avec une bordure
+- **tonal** : Carte avec un fond coloré léger
+- **text** : Carte sans fond ni bordure
+- **plain** : Carte sans style
+
+### Primary
+
+<Canvas of={VCardStories.Primary} />
+
+### Primary - Elevated
+
+<Canvas of={VCardStories.PrimaryElevated} />
+
+### Primary - Outlined
+
+<Canvas of={VCardStories.PrimaryOutlined} />
+
+### Primary - Tonal
+
+<Canvas of={VCardStories.PrimaryTonal} />
+
+### En chargement
+
+<Canvas of={VCardStories.Loading} />
+
+### Désactivée
+
+<Canvas of={VCardStories.Disabled} />
+
+## Accessibilité
+
+- Utilisez des titres descriptifs pour les cartes
+- Assurez-vous que les images ont un attribut `alt` approprié
+- Les actions dans la carte doivent être accessibles au clavier
+- Utilisez des couleurs avec un contraste suffisant

package/src/composantsVuetify/VCard/v-card.stories.ts

@@ -0,0 +1,279 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VCard, VCardTitle, VCardText, VCardActions } from 'vuetify/components'
+import { VBtn } from 'vuetify/components'
+
+const meta: Meta<typeof VCard> = {
+	title: 'Composants/Composants Vuetify/VCard',
+	tags: ['!dev'],
+	component: VCard,
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) => {
+					// Extract only the template part
+					const templateMatch = src.match(/template:\s*`([\s\S]*?)`/)
+					if (templateMatch && templateMatch[1]) {
+						return templateMatch[1]
+							.trim()
+							.replace(/<VCard/g, '<v-card')
+							.replace(/<\/VCard>/g, '</v-card>')
+							.replace(/<VCardTitle/g, '<v-card-title')
+							.replace(/<\/VCardTitle>/g, '</v-card-title>')
+							.replace(/<VCardText/g, '<v-card-text')
+							.replace(/<\/VCardText>/g, '</v-card-text>')
+							.replace(/<VCardActions/g, '<v-card-actions')
+							.replace(/<\/VCardActions>/g, '</v-card-actions>')
+							.replace(/<VBtn/g, '<v-btn')
+							.replace(/<\/VBtn>/g, '</v-btn>')
+					}
+					return src
+				},
+			},
+		},
+	},
+	argTypes: {
+		color: {
+			control: { type: 'text' },
+			description: 'Couleur de la carte',
+		},
+		variant: {
+			control: { type: 'select' },
+			options: ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'],
+			description: 'Variante de style de la carte',
+		},
+		elevation: {
+			control: { type: 'number' },
+			description: 'Élévation de la carte (ombre)',
+		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'Désactive la carte',
+		},
+		loading: {
+			control: { type: 'boolean' },
+			description: 'Affiche un état de chargement',
+		},
+		rounded: {
+			control: { type: 'select' },
+			options: ['0', 'sm', 'md', 'lg', 'xl', 'pill', 'circle'],
+			description: 'Arrondi des coins de la carte',
+		},
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof VCard>
+
+export const Primary: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary".
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" style="max-width: 400px;">
+    <v-card-title>Carte Primary</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary".
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const PrimaryTonal: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary Tonal</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et la variant "tonal".
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		variant: 'tonal',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" variant="tonal" style="max-width: 400px;">
+    <v-card-title>Carte Primary Tonal</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et la variant "tonal".
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const PrimaryElevated: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary Elevated</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et la variant "elevated".
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		variant: 'elevated',
+		elevation: 4,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" variant="elevated" :elevation="4" style="max-width: 400px;">
+    <v-card-title>Carte Primary Elevated</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et la variant "elevated".
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const PrimaryOutlined: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText, VCardActions, VBtn },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary Outlined</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et la variant "outlined". Elle contient également des boutons d'action.
+                </VCardText>
+                <VCardActions class="justify-end">
+                    <VBtn variant="text" color="primary">Annuler</VBtn>
+                    <VBtn variant="tonal" color="primary">Confirmer</VBtn>
+                </VCardActions>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		variant: 'outlined',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" variant="outlined" style="max-width: 400px;">
+    <v-card-title>Carte Primary Outlined</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et la variant "outlined". Elle contient également des boutons d'action.
+    </v-card-text>
+    <v-card-actions class="justify-end">
+        <v-btn variant="text" color="primary">Annuler</v-btn>
+        <v-btn variant="tonal" color="primary">Confirmer</v-btn>
+    </v-card-actions>
+</v-card>`,
+			},
+		},
+	},
+}
+
+// États
+
+export const Loading: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary en chargement</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et affiche un état de chargement.
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		loading: true,
+		color: 'primary',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card :loading="true" color="primary" style="max-width: 400px;">
+    <v-card-title>Carte Primary en chargement</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et affiche un état de chargement.
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const Disabled: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText, VCardActions, VBtn },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte désactivée</VCardTitle>
+                <VCardText>
+                    Cette carte est désactivée.
+                </VCardText>
+                <VCardActions class="justify-end">
+                    <VBtn>Action</VBtn>
+                </VCardActions>
+            </VCard>
+        `,
+	}),
+	args: {
+		disabled: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card :disabled="true" style="max-width: 400px;">
+    <v-card-title>Carte désactivée</v-card-title>
+    <v-card-text>
+        Cette carte est désactivée.
+    </v-card-text>
+    <v-card-actions class="justify-end">
+        <v-btn>Action</v-btn>
+    </v-card-actions>
+</v-card>`,
+			},
+		},
+	},
+}

package/src/composantsVuetify/VOtpInput/VOtpInput.mdx

@@ -0,0 +1,39 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VOtpInputStories from './v-otp-input.stories'
+
+<Meta title="Composants/Composants Vuetify/VOtpInput" />
+
+<div className="header">
+    <h1>VOtpInput</h1>
+Ce composant utilise directement le composant natif `v-otp-input` de Vuetify avec les couleurs du thème actif du design system.
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-otp-input/#props).
+</div>
+
+## Variants
+
+<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '24px' }}>
+  <Canvas of={VOtpInputStories.Default} />
+  <Canvas of={VOtpInputStories.Underlined} />
+  <Canvas of={VOtpInputStories.Filled} />
+</div>
+
+## États
+
+<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '24px' }}>
+  <Canvas of={VOtpInputStories.Disabled} />
+  <Canvas of={VOtpInputStories.Error} />
+</div>
+
+## Longueur personnalisée
+
+<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '24px' }}>
+  <Canvas of={VOtpInputStories.FourDigits} />
+</div>
+
+## Variants disponibles
+
+- `outlined` – Avec bordure (défaut)
+- `underlined` – Souligné uniquement
+- `filled` – Avec fond
+- `solo` – Sans bordure avec élévation
+- `plain` – Minimal sans style

package/src/composantsVuetify/VOtpInput/v-otp-input.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta: Meta = {
+	title: 'Composants/Composants Vuetify/VOtpInput',
+	tags: ['!dev'],
+	render: args => ({
+		setup() {
+			return { args }
+		},
+		template: `
+      <v-otp-input 
+        :length="args.length" 
+        :disabled="args.disabled"
+        :error="args.error"
+        :variant="args.variant"
+      />
+    `,
+	}),
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Default ---
+export const Default: Story = {
+	args: { length: 6, disabled: false, error: false, variant: 'outlined' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="6" />` } } },
+}
+
+export const Underlined: Story = {
+	args: { length: 6, disabled: false, error: false, variant: 'underlined' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="6" variant="underlined" />` } } },
+}
+
+export const Filled: Story = {
+	args: { length: 6, disabled: false, error: false, variant: 'filled' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="6" variant="filled" />` } } },
+}
+
+// --- Disabled ---
+export const Disabled: Story = {
+	args: { length: 6, disabled: true, error: false, variant: 'outlined' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="6" disabled />` } } },
+}
+
+// --- Error ---
+export const Error: Story = {
+	args: { length: 6, disabled: false, error: true, variant: 'outlined' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="6" error />` } } },
+}
+
+// --- Different lengths ---
+export const FourDigits: Story = {
+	args: { length: 4, disabled: false, error: false, variant: 'outlined' },
+	parameters: { docs: { source: { code: `<v-otp-input :length="4" />` } } },
+}

package/src/composantsVuetify/VSkeletonLoader/VSkeletonLoader.mdx

@@ -0,0 +1,42 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VSkeletonLoaderStories from './v-skeleton-loader.stories'
+
+<Meta title="Composants/Composants Vuetify/VSkeletonLoader" />
+
+<div className="header">
+    <h1>VSkeletonLoader</h1>
+Ce composant utilise directement le composant natif `v-skeleton-loader` de Vuetify. 
+Il est utilisé pour fournir une indication visuelle qu'un contenu est en cours de chargement. 
+Il améliore l'expérience utilisateur en montrant une structure de placeholder pendant le chargement des données. 
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-skeleton-loader/#props).
+</div>
+
+## Utilisation de base
+
+<Canvas of={VSkeletonLoaderStories.Default} withToolbar={false} />
+
+## Types disponibles
+
+Le composant offre plusieurs types prédéfinis pour différents cas d'usage :
+
+### Article
+<Canvas of={VSkeletonLoaderStories.Article} withToolbar={false} />
+
+### Avatar
+<Canvas of={VSkeletonLoaderStories.Avatar} withToolbar={false} />
+
+### Card
+<Canvas of={VSkeletonLoaderStories.Card} withToolbar={false} />
+
+### List Item
+<Canvas of={VSkeletonLoaderStories.ListItem} withToolbar={false} />
+
+### Boilerplate
+Sans animation (statique) :
+<Canvas of={VSkeletonLoaderStories.Boilerplate} withToolbar={false} />
+
+## Bonnes pratiques
+
+- Utilisez des skeletons qui correspondent à la structure du contenu final
+- Privilégiez l'utilisation de types prédéfinis pour une cohérence visuelle
+- Désactivez l'animation (`boilerplate`) si vous avez de nombreux skeletons sur la page pour améliorer les performances