@cnamts/synapse 1.0.24 → 1.0.25

package/src/composables/unifyValidation/documentationValidationProps.ts

@@ -0,0 +1,235 @@
+const RuleGeneralType = `'required' | 'custom'`
+const StringRuleType = `'minLength' | 'maxLength' | 'exactLength' | 'email' | 'matchPattern'`
+const NumberRuleType = `'min' | 'max'`
+const DateRuleType = `'noWeekend' | 'noBeforeToday' | 'notAfterToday' | 'notBeforeDate' | 'notAfterDate' | 'dateExact' | 'isHolidayDay'`
+
+function generateBuiltInRuleType(type: 'base' | 'date' | 'number' | 'string' | 'all' = 'all') {
+	switch (type) {
+		case 'base':
+			return RuleGeneralType
+		case 'date':
+			return `${RuleGeneralType} | ${DateRuleType}`
+		case 'number':
+			return `${RuleGeneralType} | ${NumberRuleType}`
+		case 'string':
+			return `${RuleGeneralType} | ${StringRuleType}`
+		case 'all':
+			return `${RuleGeneralType} | ${NumberRuleType} | ${StringRuleType} | ${DateRuleType}`
+	}
+}
+
+export function getValidationDocumentation(type: 'date' | 'number' | 'string' | 'all' = 'all') {
+	const builtInRuleType = generateBuiltInRuleType(type)
+
+	return {
+		readonly: {
+			description: 'Permet de rendre le champ en lecture seule, le champ deviens grisé.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		disabled: {
+			description: 'Désactive le champ sans changement visuel pour l\'utilisateur.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		required: {
+			description: 'Indique que le champ est requis.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		isValidateOnBlur: {
+			description: 'Détermine si la validation doit être déclenchée lors de la saisie ou du blur de l\'input.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+				category: 'props',
+			},
+		},
+		showSuccessMessages: {
+			description: 'Affiche les messages de succès lorsque la validation est réussie.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+				category: 'props',
+			},
+		},
+		disableErrorHandling: {
+			description: 'Désactive la gestion des erreurs, utile lorsque vous souhaitez gérer les erreurs manuellement.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		useVuetifyValidation: {
+			description: 'Indique si la validation doit être gérée par Vuetify (true) ou par Synapse (false).',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		label: {
+			description: 'Le label du champ.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				category: 'props',
+			},
+		},
+		rules: {
+			description: 'Les règles de validation Vuetify à appliquer au champ si useVuetifyValidation est true.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'array',
+					detail: `
+						(value: unknown) => boolean | string
+					`,
+				},
+				category: 'props',
+			},
+		},
+		customRules: {
+			description: 'Les règles de validation personnalisées à appliquer au champ.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'array',
+					detail: `
+{
+	type: ${builtInRuleType},
+	options: {
+		validate: (value: unknown) => boolean | string,
+		message: string,
+		[key: string]: unknown
+	}
+}
+					`,
+				},
+				category: 'props',
+			},
+		},
+		customWarningRules: {
+			description: 'Les règles de validation personnalisées pour les avertissements à appliquer au champ.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'array',
+					detail: `
+{
+	type: ${builtInRuleType},
+	options: {
+		validate: (value: unknown) => boolean | string,
+		message: string,
+		[key: string]: unknown
+	}
+}
+					`,
+				},
+				category: 'props',
+			},
+		},
+		customSuccessRules: {
+			description: 'Les règles de validation personnalisées pour les succès à appliquer au champ.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'array',
+					detail: `
+{
+	type: ${builtInRuleType},
+	options: {
+		validate: (value: unknown) => boolean | string,
+		message: string,
+		[key: string]: unknown
+	}
+}
+					`,
+				},
+				category: 'props',
+			},
+		},
+		errorMessages: {
+			description: 'Permet de forcer des messages d\'erreur spécifiques.',
+			control: 'object',
+			table: {
+				type: { summary: 'array<string>' },
+				category: 'props',
+			},
+		},
+		warningMessages: {
+			description: 'Permet de forcer des messages d\'avertissement spécifiques.',
+			control: 'object',
+			table: {
+				type: { summary: 'array<string>' },
+				category: 'props',
+			},
+		},
+		successMessages: {
+			description: 'Permet de forcer des messages de succès spécifiques.',
+			control: 'object',
+			table: {
+				type: { summary: 'array<string>' },
+				category: 'props',
+			},
+		},
+		hasError: {
+			description: 'Indique si le champ a une erreur, peut être utilisé pour forcer l\'état d\'erreur.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				category: 'props',
+			},
+		},
+		hasWarning: {
+			description: 'Indique si le champ a un avertissement, peut être utilisé pour forcer l\'état d\'avertissement.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				category: 'props',
+			},
+		},
+		hasSuccess: {
+			description: 'Indique si le champ a un succès, peut être utilisé pour forcer l\'état de succès.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				category: 'props',
+			},
+		},
+		hideDetails: {
+			description: 'Masque la section des détails (messages d\'erreur, compteur)',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		maxErrors: {
+			description: 'Le nombre maximum d\'erreurs à afficher, applicable uniquement si useVuetifyValidation est true.',
+			control: 'number',
+			table: {
+				type: { summary: 'number' },
+				category: 'props',
+			},
+		},
+	}
+}

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'

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/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

package/src/composantsVuetify/VSkeletonLoader/v-skeleton-loader.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VSkeletonLoader } from 'vuetify/components'
+
+const meta: Meta<typeof VSkeletonLoader> = {
+	title: 'Composants/Composants Vuetify/VSkeletonLoader',
+	tags: ['!dev'],
+	component: VSkeletonLoader,
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) =>
+					src.replace(/VSkeletonLoader/g, 'v-skeleton-loader'),
+			},
+		},
+	},
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			options: ['article', 'avatar', 'card', 'list-item-avatar'],
+			description: 'Type de skeleton loader',
+		},
+		loading: {
+			control: { type: 'boolean' },
+			description: 'Affiche le skeleton loader',
+		},
+		boilerplate: {
+			control: { type: 'boolean' },
+			description: 'Affiche une version simplifiée du skeleton loader',
+		},
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof VSkeletonLoader>
+
+export const Default: Story = {
+	args: {
+		type: 'card',
+		loading: true,
+	},
+}
+
+export const Article: Story = {
+	args: {
+		type: 'article',
+		loading: true,
+	},
+}
+
+export const Avatar: Story = {
+	args: {
+		type: 'avatar',
+		loading: true,
+	},
+}
+
+export const Card: Story = {
+	args: {
+		type: 'card',
+		loading: true,
+	},
+}
+
+export const ListItem: Story = {
+	args: {
+		type: 'list-item-avatar',
+		loading: true,
+	},
+}
+
+export const Boilerplate: Story = {
+	args: {
+		type: 'card',
+		boilerplate: true,
+	},
+}

package/src/composantsVuetify/VSwitch/VSwitch.mdx

@@ -0,0 +1,47 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VSwitchStories from './v-switch.stories'
+
+<Meta title="Composants/Composants Vuetify/VSwitch" />
+
+<div className="header">
+    <h1>VSwitch</h1>
+Ce composant utilise directement le composant natif `v-switch` 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-switch/#props).
+</div>
+
+## Primary
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VSwitchStories.PrimaryOn} />
+  <Canvas of={VSwitchStories.PrimaryOff} />
+  <Canvas of={VSwitchStories.PrimaryInsetOn} />
+  <Canvas of={VSwitchStories.PrimaryInsetOff} />
+</div>
+
+## Primary – Désactivé
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VSwitchStories.PrimaryOnDisabled} />
+  <Canvas of={VSwitchStories.PrimaryOffDisabled} />
+</div>
+
+## Secondary
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VSwitchStories.SecondaryOn} />
+  <Canvas of={VSwitchStories.SecondaryOff} />
+  <Canvas of={VSwitchStories.SecondaryInsetOn} />
+  <Canvas of={VSwitchStories.SecondaryInsetOff} />
+</div>
+
+## Secondary – Désactivé
+
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
+  <Canvas of={VSwitchStories.SecondaryOnDisabled} />
+  <Canvas of={VSwitchStories.SecondaryOffDisabled} />
+</div>
+
+## Variants disponibles
+
+- `default` – Switch standard
+- `inset` – Switch avec style inset (plus large)