@cnamts/synapse 0.0.12-alpha → 0.0.13-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "0.0.12-alpha",
+  "version": "0.0.13-alpha",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -105,8 +105,10 @@
   "dependencies": {
     "@emotion/css": "^11.13.5",
     "@mdi/js": "^7.4.47",
+    "dayjs": "^1.11.13",
     "deepmerge": "^4.3.1",
     "iso-639-1": "^3.1.3",
+    "marked": "^15.0.7",
     "maska": "^3.0.3",
     "sass-embedded": "^1.83.0",
     "sass-loader": "^16.0.3",

package/src/assets/_radius.scss

@@ -61,26 +61,32 @@ $radius-keys: (0, 'sm', 'md', 'lg', 'xl', 'pill', 'circle');
 	border-radius: var(--radius-md) !important;
 }
 
-.v-btn--rounded-md {
+.v-btn.rounded-md {
 	border-radius: var(--radius-md) !important;
 }
 
-.v-btn--rounded-sm {
+.v-btn.rounded-sm {
 	border-radius: var(--radius-sm) !important;
 }
 
-.v-btn--rounded-lg {
+.v-btn.rounded-lg {
 	border-radius: var(--radius-lg) !important;
 }
 
-.v-btn--rounded-xl {
+.v-btn.rounded-xl {
 	border-radius: var(--radius-xl) !important;
 }
 
-.v-btn--rounded-pill {
+.v-btn.rounded-pill {
 	border-radius: var(--radius-pill) !important;
 }
 
-.v-btn--rounded-circle {
+.v-btn.rounded-circle {
 	border-radius: var(--radius-circle) !important;
 }
+
+.v-date-picker {
+	.v-btn {
+		border-radius: var(--radius-pill) !important;
+	}
+}

package/src/assets/settings.scss

@@ -16,3 +16,11 @@
 .v-tooltip .v-overlay__content {
 	background-color: rgb(0 0 0 / 70%) !important;
 }
+
+.v-messages {
+	font-size: 14px !important;
+
+	.v-messages__message {
+		line-height: 16px !important;
+	}
+}

package/src/components/Amelipro/types/types.ts

@@ -0,0 +1,40 @@
+export interface IndexedObject<T = string> {
+	[key: string]: T
+}
+
+export interface Theme {
+	primary: string
+	secondary: string
+	info: string
+	warning: string
+	error: string
+	success: string
+}
+export interface Color {
+	darken1?: string
+	darken2?: string
+	darken3?: string
+	darken4?: string
+	darken5?: string
+	darken6?: string
+	base: string
+	lighten1?: string
+	lighten2?: string
+	lighten3?: string
+	lighten4?: string
+	lighten5?: string
+	lighten6?: string
+}
+
+export interface Palette {
+	apBlue: Color
+	apGrey: Color
+	apWhite: Color
+	apBlack: Color
+	apYellow: Color
+	apGreen: Color
+	apRed: Color
+	apTurquoise: Color
+	apParme: Color
+	apPink: Color
+}

package/src/components/ChipList/ChipList.stories.ts

@@ -116,9 +116,9 @@ export const Default: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -205,9 +205,9 @@ export const Success: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -298,9 +298,9 @@ export const Info: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -391,9 +391,9 @@ export const Warning: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -484,9 +484,9 @@ export const Error: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -578,9 +578,9 @@ export const ReadOnly: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -659,9 +659,9 @@ export const CustomResetText: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -728,9 +728,9 @@ export const WithOverflow: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@cnamts/synapse'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',
@@ -822,10 +822,9 @@ export const WithEvents: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-import ChipList from '@cnamts/synapse'
-import type { ChipItem } from '@cnamts/synapse/src/components/ChipList/types'
+import { ChipList, type ChipItem } from '@cnamts/synapse'
 
-const items = [
+const items: ChipItem[] = [
 	{
 		text: 'Email',
 		value: 'email',
@@ -933,9 +932,9 @@ export const WithPrependStateIcon: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-import ChipList from '@cnamts/synapse'
+import { ChipList, type ChipItem } from '@cnamts/synapse'
 
-const items = [
+const items: ChipItem[] = [
 	{
 		text: 'Email',
 		value: 'email',
@@ -1011,9 +1010,9 @@ export const WithAppendStateIcon: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-import ChipList from '@cnamts/synapse'
+import { ChipList, type ChipItem } from '@cnamts/synapse'
 
-const items = [
+const items: ChipItem[] = [
 	{
 		text: 'Email',
 		value: 'email',
@@ -1090,10 +1089,10 @@ export const WithCustomIcon: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-import ChipList from '@cnamts/synapse'
+import { ChipList, type ChipItem } from '@cnamts/synapse'
 import { mdiAccount } from '@mdi/js'
 
-const items = [
+const items: ChipItem[] = [
 	{
 		text: 'Email',
 		value: 'email',
@@ -1172,9 +1171,9 @@ export const Customization: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-   import ChipList from '@/components/ChipList/ChipList.vue'
+   import { ChipList, type ChipItem } from '@cnamts/synapse'
    
-	const items = [
+	const items: ChipItem[] = [
 		{
 			text: 'Email',
 			value: 'email',

package/src/components/ChipList/ChipList.vue

@@ -203,7 +203,7 @@
 				color="primary"
 				size="small"
 				data-test-id="reset-btn"
-				class="overflow-btn px-1 ml-0 my-1"
+				class="overflow-btn px-1 ml-1 my-1"
 				@click="emitResetEvent"
 			>
 				{{ resetButtonText }}
@@ -243,4 +243,8 @@
 .overflow-btn :deep(.v-btn__overlay) {
 	display: none;
 }
+
+.remove-chip {
+	padding: 0 !important;
+}
 </style>

package/src/components/ChipList/config.ts

@@ -20,6 +20,7 @@ export const config: ComponentConfig = {
 		size: 'small',
 		density: 'compact',
 		variant: 'text' as VuetifyVariant,
+		rounded: 'pill',
 	},
 	icon: {
 		size: 'medium',

package/src/components/CookiesSelection/CookiesInformation/CookiesInformation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { required } from '@/utils/rules/required'
+	import { isRequired } from '@/utils/rules/isRequired'
 	import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
 	import { computed, ref } from 'vue'
 	import CookiesTable from '../CookiesTable/CookiesTable.vue'
@@ -70,7 +70,7 @@
 		<VRadioGroup
 			v-if="type !== 'essentials'"
 			:model-value="parsedValue"
-			:rules="[required]"
+			:rules="[isRequired]"
 			data-test-id="radio-group"
 			inline
 			:label="locales.fieldLabel(locales[type].title)"

package/src/components/Customs/SyBtnSelect/SyBtnSelect.mdx

@@ -5,7 +5,7 @@ import * as SyBtnSelectStories from "./SyBtnSelect.stories";
 
 # SyBtnSelect
 
-Le composant `SyBtnSelect` est utilisé pour proposer une sélection d'options avec un bouton personnalisé, conforme au style du Design System et qui respecte les règles d'accessibilité RGAA.<br/>
+Le composant `SyBtnSelect` est utilisé pour proposer une sélection d'options avec un bouton personnalisé, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.<br/>
 Il est basé sur un `v-btn`.
 
 <Canvas of={SyBtnSelectStories.Default}/>

package/src/components/Customs/SyInputSelect/SyInputSelect.mdx

@@ -5,7 +5,7 @@ import * as SyInputSelectStories from "./SyInputSelect.stories";
 
 # SyInputSelect
 
-Le composant `SyInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles RGAA.<br/>
+Le composant `SyInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.<br/>
 Il est basé sur un `v-input`.
 
 <Canvas of={SyInputSelectStories.Default} />

package/src/components/Customs/SySelect/SySelect.mdx

@@ -5,7 +5,7 @@ import * as SySelectStories from "./SySelect.stories";
 
 # SySelect
 
-Le composant `SySelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles d'accessibilité RGAA.<br/>
+Le composant `SySelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles d'accessibilité <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.<br/>
 Il est basé sur un `v-textfield`.
 
 <Canvas of={SySelectStories.Default} />

package/src/components/Customs/SySelect/SySelect.vue

@@ -52,6 +52,10 @@
 			type: Boolean,
 			default: false,
 		},
+		disableErrorHandling: {
+			type: Boolean,
+			default: false,
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -118,6 +122,8 @@
 	})
 
 	const isRequired = computed(() => {
+		// Si la gestion des erreurs est désactivée, on ne considère jamais le champ comme requis
+		if (props.disableErrorHandling) return false
 		return (props.required || props.errorMessages.length > 0) && !selectedItem.value
 	})
 
@@ -129,7 +135,13 @@
 
 	watch([isOpen, hasError], ([newIsOpen, newHasError]) => {
 		if (!newIsOpen) {
-			hasError.value = (!selectedItem.value && isRequired.value) || props.errorMessages.length > 0
+			// Si la gestion des erreurs est désactivée, on ne met jamais hasError à true
+			if (props.disableErrorHandling) {
+				hasError.value = false
+			}
+			else {
+				hasError.value = (!selectedItem.value && isRequired.value) || props.errorMessages.length > 0
+			}
 		}
 		else {
 			hasError.value = newHasError
@@ -137,7 +149,10 @@
 	})
 
 	watch(() => props.errorMessages, (newValue) => {
-		hasError.value = newValue.length > 0
+		// Si la gestion des erreurs est désactivée, on ne met jamais hasError à true
+		if (!props.disableErrorHandling) {
+			hasError.value = newValue.length > 0
+		}
 	})
 
 	onMounted(() => {
@@ -166,9 +181,9 @@
 			:disabled="disabled"
 			:label="labelWithAsterisk"
 			:aria-label="labelWithAsterisk"
-			:error-messages="errorMessages"
+			:error-messages="props.disableErrorHandling ? [] : errorMessages"
 			:variant="outlined ? 'outlined' : 'underlined'"
-			:rules="isRequired ? ['Le champ est requis.'] : []"
+			:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
 			:display-asterisk="displayAsterisk"
 			class="sy-select"
 			:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"

package/src/components/Customs/SyTextField/SyTextField.mdx

@@ -1,11 +1,11 @@
 import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
-import * as SyTextFieldStories from "./SyTextField.stories";
+import * as SyTextFieldStories from "./SyTextField.stories.ts";
 
 <Meta of={SyTextFieldStories} />
 
 # SyTextField
 
-Le composant `SyTextField` est utilisé pour proposer une alternative au `TextField` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité RGAA.
+Le composant `SyTextField` est utilisé pour proposer une alternative au `TextField` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.
 
 Il étend les fonctionnalités de base de Vuetify avec :
 

package/src/components/Customs/SyTextField/SyTextField.stories.ts

@@ -75,6 +75,10 @@ const meta = {
 			control: 'boolean',
 			default: true,
 		},
+		'disableErrorHandling': {
+			control: 'boolean',
+			description: 'Désactive complètement la validation des règles et l\'affichage des erreurs',
+		},
 		'isActive': {
 			description: 'Force l\'état actif du champ (label flottant et styles visuels)',
 			control: 'boolean',
@@ -368,6 +372,23 @@ export const Required: Story = {
 		...Default.args,
 		required: true,
 	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
+			},
+			template: `
+    <div class="d-flex flex-wrap align-center">
+     <SyTextField v-bind="args" v-model="value" />
+    </div>
+   `,
+		}
+	},
 	parameters: {
 		docs: {
 			description: {
@@ -408,6 +429,23 @@ export const RequiredWithAsterisk: Story = {
 		required: true,
 		displayAsterisk: true,
 	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
+			},
+			template: `
+    <div class="d-flex flex-wrap align-center">
+     <SyTextField v-bind="args" v-model="value" />
+    </div>
+   `,
+		}
+	},
 	parameters: {
 		docs: {
 			description: {
@@ -1359,3 +1397,204 @@ export const WithPrefixAndSuffix: Story = {
 		],
 	},
 }
+
+export const DisabledErrorHandling: Story = {
+	args: {
+		label: 'Champ requis',
+		required: true,
+		customRules: [
+			{
+				type: 'required',
+				options: {
+					message: 'Ce champ est obligatoire.',
+				},
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField },
+			setup() {
+				const value1 = ref('')
+				const value2 = ref('')
+
+				return { args, value1, value2 }
+			},
+			template: `
+        <div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px;">
+            <div>
+              <p class="text-subtitle-2 mb-2">Validation normale</p>
+              <SyTextField
+                v-model="value1"
+                v-bind="args"
+                is-validate-on-blur
+              />
+            </div>
+            
+            <div>
+              <p class="text-subtitle-2 mb-2">Sans gestion d'erreurs</p>
+              <SyTextField
+                v-model="value2"
+                v-bind="args"
+                disableErrorHandling
+                is-validate-on-blur
+              />
+            </div>
+          </div>
+          
+          <div class="mt-4 text-body-2">
+            <p>Instructions :</p>
+            <ol>
+              <li class="ml-4">Cliquez dans un champ puis en dehors pour déclencher la validation</li>
+              <li class="ml-4">Observez que le champ de gauche affiche un message d'erreur</li>
+              <li class="ml-4">Le champ de droite n'affiche aucune erreur malgré les mêmes règles</li>
+            </ol>
+          </div>
+        </div>
+      `,
+		}
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'La prop `disableErrorHandling` permet de désactiver complètement la gestion des erreurs de validation, même si des règles sont définies.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <!-- Champ avec validation normale -->
+  <SyTextField
+    v-model="value"
+    label="Champ obligatoire"
+    required
+    :custom-rules="[{
+      type: 'required',
+      options: { message: 'Ce champ est obligatoire.' }
+    }]"
+    is-validate-on-blur
+  />
+
+  <!-- Champ avec gestion d'erreur désactivée -->
+  <SyTextField
+    v-model="value"
+    label="Champ obligatoire"
+    required
+    :custom-rules="[{
+      type: 'required',
+      options: { message: 'Ce champ est obligatoire.' }
+    }]"
+    disableErrorHandling
+    is-validate-on-blur
+  />
+</template>`,
+			},
+		],
+	},
+}
+
+export const WithoutSuccessMessages: Story = {
+	args: {
+		label: 'Email',
+		customRules: [
+			{
+				type: 'matchPattern',
+				options: {
+					pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+					message: 'Veuillez entrer une adresse email valide',
+					successMessage: 'Le format de l\'email est correct',
+					fieldIdentifier: 'Email',
+				},
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField },
+			setup() {
+				const value1 = ref('user@example.com')
+				const value2 = ref('user@example.com')
+
+				return { args, value1, value2 }
+			},
+			template: `
+        <div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px;">
+            <div>
+              <p class="text-subtitle-2 mb-2">Avec messages de succès (défaut)</p>
+              <SyTextField
+                v-model="value1"
+                v-bind="args"
+                showSuccessMessages
+              />
+            </div>
+            
+            <div>
+              <p class="text-subtitle-2 mb-2">Sans messages de succès</p>
+              <SyTextField
+                v-model="value2"
+                v-bind="args"
+                :showSuccessMessages="false"
+              />
+            </div>
+          </div>
+          
+          <div class="mt-4 text-body-2">
+            <p>Les deux champs ont la même valeur et passent la validation :</p>
+            <ul >
+              <li class="ml-4">Le champ de gauche affiche le message de succès</li>
+              <li class="ml-4">Le champ de droite n'affiche aucun message</li>
+            </ul>
+            <p class="mt-2">Essayez de modifier les valeurs pour voir le comportement.</p>
+          </div>
+        </div>
+      `,
+		}
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'La prop `showSuccessMessages` (par défaut: `true`) permet de contrôler l\'affichage des messages de succès lors de la validation.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <!-- Champ avec messages de succès (défaut) -->
+  <SyTextField
+    v-model="email"
+    label="Email"
+    :custom-rules="[{
+      type: 'matchPattern',
+      options: {
+        pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/,
+        message: 'Veuillez entrer une adresse email valide',
+        successMessage: 'Le format de l\\'email est correct',
+      }
+    }]"
+  />
+
+  <!-- Champ sans messages de succès -->
+  <SyTextField
+    v-model="email"
+    label="Email"
+    :custom-rules="[{
+      type: 'matchPattern',
+      options: {
+        pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/,
+        message: 'Veuillez entrer une adresse email valide',
+        successMessage: 'Le format de l\\'email est correct',
+      }
+    }]"
+    :showSuccessMessages="false"
+  />
+</template>`,
+			},
+		],
+	},
+}