@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

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',
@@ -109,12 +113,12 @@ const meta = {
 			control: 'boolean',
 			default: false,
 		},
-		'isDisabled': {
+		'disabled': {
 			description: 'Désactive le champ',
 			control: 'boolean',
 			default: false,
 		},
-		'isReadOnly': {
+		'readOnly': {
 			description: 'Rend le champ en lecture seule',
 			control: 'boolean',
 			default: false,
@@ -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>`,
+			},
+		],
+	},
+}

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -30,7 +30,7 @@
 			errorMessages?: string[] | null
 			warningMessages?: string[] | null
 			successMessages?: string[] | null
-			isReadOnly?: boolean
+			readOnly?: boolean
 			isActive?: boolean
 			baseColor?: string
 			bgColor?: string
@@ -41,7 +41,7 @@
 			density?: 'default' | 'comfortable' | 'compact'
 			direction?: 'horizontal' | 'vertical'
 			isDirty?: boolean
-			isDisabled?: boolean
+			disabled?: boolean
 			isOnError?: boolean
 			isFlat?: boolean
 			isFocused?: boolean
@@ -77,6 +77,7 @@
 			customSuccessRules?: ValidationRule[]
 			showSuccessMessages?: boolean
 			isValidateOnBlur?: boolean
+			disableErrorHandling?: boolean
 		}>(),
 		{
 			modelValue: undefined,
@@ -93,7 +94,7 @@
 			errorMessages: null,
 			warningMessages: null,
 			successMessages: null,
-			isReadOnly: false,
+			readOnly: false,
 			isClearable: false,
 			isActive: false,
 			baseColor: undefined,
@@ -104,7 +105,7 @@
 			density: 'default',
 			direction: 'horizontal',
 			isDirty: false,
-			isDisabled: false,
+			disabled: false,
 			isOnError: false,
 			isFlat: false,
 			isFocused: false,
@@ -140,6 +141,7 @@
 			customSuccessRules: () => [],
 			showSuccessMessages: true,
 			isValidateOnBlur: true,
+			disableErrorHandling: false,
 		},
 	)
 
@@ -177,6 +179,7 @@
 		successRules: props.customSuccessRules,
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.label,
+		disableErrorHandling: props.disableErrorHandling,
 	})
 
 	// Synchronisation des messages externes
@@ -310,7 +313,7 @@
 		:density="props.density"
 		:direction="props.direction"
 		:dirty="props.isDirty"
-		:disabled="props.isDisabled"
+		:disabled="props.disabled"
 		:display-asterisk="isShouldDisplayAsterisk"
 		:error="hasError"
 		:error-messages="errors"
@@ -333,7 +336,7 @@
 		:persistent-placeholder="displayPersistentPlaceholder"
 		:placeholder="props.placeholder"
 		:prefix="props.prefix"
-		:readonly="props.isReadOnly"
+		:readonly="props.readOnly"
 		:reverse="props.isReversed"
 		:role="props.role"
 		:rounded="props.rounded"

package/src/components/DataList/DataList.vue

@@ -89,7 +89,7 @@
 	<div
 		:aria-label="label"
 		:style="widthStyles"
-		class="vd-data-list"
+		class="sy-data-list"
 	>
 		<VFadeTransition mode="out-in">
 			<DataListLoading
@@ -124,7 +124,7 @@
 						:placeholder="placeholder"
 						:vuetify-options="item.options"
 						:class="getItemClass(index, item.class)"
-						class="vd-data-list-item text-body-1"
+						class="sy-data-list-item text-body-1"
 						@click:action="emit('click:item-action', index)"
 					/>
 				</ul>

package/src/components/DataList/DataListLoading/DataListLoading.vue

@@ -24,7 +24,7 @@
 <template>
 	<div
 		aria-hidden="true"
-		class="vd-data-list-loading"
+		class="sy-data-list-loading"
 	>
 		<HeaderLoading
 			v-if="heading"
@@ -38,7 +38,7 @@
 				v-for="index in itemsNumber"
 				:key="index + '-loading-item'"
 				:class="{ 'mb-4': index !== itemsNumber }"
-				class="vd-data-list-loading-item"
+				class="sy-data-list-loading-item"
 			>
 				<HeaderLoading
 					v-if="!row"

package/src/components/DataList/DataListLoading/tests/DataListLoading.spec.ts

@@ -17,7 +17,7 @@ describe('DataListLoading', () => {
 			},
 		})
 
-		const elExists = wrapper.find('.vd-data-list-loading-item').exists()
+		const elExists = wrapper.find('.sy-data-list-loading-item').exists()
 		expect(elExists).toBe(true)
 	})
 })

package/src/components/DataList/tests/DataList.spec.ts

@@ -31,11 +31,11 @@ describe('DataList', () => {
 			},
 		})
 
-		const elExists = wrapper.find('.vd-data-list').exists()
+		const elExists = wrapper.find('.sy-data-list').exists()
 		expect(elExists).toBe(true)
 
 		// Check items exists
-		const itemsExists = wrapper.find('.vd-data-list-item').exists()
+		const itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(true)
 
 		const titleExists = wrapper.find('h4').exists()
@@ -68,7 +68,7 @@ describe('DataList', () => {
 		})
 
 		// Check items does not exist
-		const itemsExists = wrapper.find('.vd-data-list-item').exists()
+		const itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(false)
 	})
 
@@ -91,7 +91,7 @@ describe('DataList', () => {
 		})
 
 		// Check items does not exist
-		const itemsExists = wrapper.find('.vd-data-list-item .v-icon').exists()
+		const itemsExists = wrapper.find('.sy-data-list-item .v-icon').exists()
 		expect(itemsExists).toBe(true)
 	})
 
@@ -112,7 +112,7 @@ describe('DataList', () => {
 
 		// Check that items now exist
 		const itemsExists = wrapper
-			.find('.vd-data-list-item.custom-class')
+			.find('.sy-data-list-item.custom-class')
 			.exists()
 
 		expect(itemsExists).toBe(true)
@@ -132,7 +132,7 @@ describe('DataList', () => {
 		})
 
 		// Check that items does not exist
-		let itemsExists = wrapper.find('.vd-data-list-item').exists()
+		let itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(false)
 
 		await wrapper.setProps({
@@ -140,7 +140,7 @@ describe('DataList', () => {
 		})
 
 		// Check that items now exist
-		itemsExists = wrapper.find('.vd-data-list-item').exists()
+		itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(true)
 	})
 
@@ -159,7 +159,7 @@ describe('DataList', () => {
 			},
 		})
 
-		const itemWithAction = wrapper.findAll('.vd-data-list-item').at(1)
+		const itemWithAction = wrapper.findAll('.sy-data-list-item').at(1)
 		expect(itemWithAction?.exists()).toBe(true)
 	})
 
@@ -179,11 +179,11 @@ describe('DataList', () => {
 		})
 
 		// Find the second item element
-		const itemWithAction = wrapper.findAll('.vd-data-list-item').at(2)
+		const itemWithAction = wrapper.findAll('.sy-data-list-item').at(2)
 		expect(itemWithAction?.exists()).toBe(true)
 
 		const actionBtn = (itemWithAction as DOMWrapper<Element>).find(
-			'.vd-data-list-item-action-btn',
+			'.sy-data-list-item-action-btn',
 		)
 		expect(actionBtn.exists()).toBe(true)
 

package/src/components/DataListGroup/tests/DataListGroup.spec.ts

@@ -31,7 +31,7 @@ describe('DataListGroup', () => {
 			},
 		})
 
-		expect(wrapper.find('.vd-data-list-loading').exists()).toBe(true)
+		expect(wrapper.find('.sy-data-list-loading').exists()).toBe(true)
 	})
 
 	it('emit the right event when clicking on a item button', async () => {

package/src/components/DataListItem/DataListItem.vue

@@ -49,7 +49,7 @@
 </script>
 
 <template>
-	<li class="vd-data-list-item d-flex flex-wrap">
+	<li class="sy-data-list-item d-flex flex-wrap">
 		<slot name="icon">
 			<VIcon
 				v-if="icon"
@@ -59,16 +59,16 @@
 			</VIcon>
 		</slot>
 
-		<div class="vd-data-list-item-content">
-			<div :class="{ 'vd-row': row }">
+		<div class="sy-data-list-item-content">
+			<div :class="{ 'sy-row': row }">
 				<div
-					class="vd-data-list-item-label text-caption"
+					class="sy-data-list-item-label text-caption"
 					:style="{ color: labelColor }"
 				>
 					{{ label }}
 				</div>
 
-				<div class="vd-data-list-item-value">
+				<div class="sy-data-list-item-value">
 					<slot
 						name="value"
 						v-bind="{ itemValue }"
@@ -99,7 +99,7 @@
 				<VBtn
 					v-if="action"
 					v-bind="options.actionBtn"
-					class="vd-data-list-item-action-btn"
+					class="sy-data-list-item-action-btn"
 					@click="emits('click:action')"
 				>
 					{{ action }}
@@ -110,11 +110,11 @@
 </template>
 
 <style lang="scss" scoped>
-.vd-row {
+.sy-row {
 	display: flex;
 	flex-wrap: wrap;
 
-	.vd-data-list-item-label {
+	.sy-data-list-item-label {
 		align-self: center;
 
 		&::after {
@@ -124,7 +124,7 @@
 	}
 }
 
-.vd-data-list-item-action-btn.v-btn {
+.sy-data-list-item-action-btn.v-btn {
 	min-width: 0;
 	margin: 0 -1px;
 }

package/src/components/DataListItem/tests/DataListItem.spec.ts

@@ -66,7 +66,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elValue = wrapper.find('.vd-data-list-item-value span')
+		const elValue = wrapper.find('.sy-data-list-item-value span')
 
 		expect(elValue.text()).toBe('<span>Custom Value</span>')
 	})
@@ -83,7 +83,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elValue = wrapper.find('.vd-data-list-item-value span')
+		const elValue = wrapper.find('.sy-data-list-item-value span')
 
 		expect(elValue.text()).toBe('Paul Dupont')
 	})
@@ -115,7 +115,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elAction = wrapper.find('.vd-data-list-item-action-btn')
+		const elAction = wrapper.find('.sy-data-list-item-action-btn')
 		expect(elAction.text()).toBe('Click Me')
 	})
 
@@ -130,7 +130,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const button = wrapper.find('.vd-data-list-item-action-btn')
+		const button = wrapper.find('.sy-data-list-item-action-btn')
 		await button.trigger('click')
 
 		expect(wrapper.emitted('click:action')).toBeTruthy()
@@ -150,7 +150,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elRow = wrapper.find('.vd-row')
+		const elRow = wrapper.find('.sy-row')
 		expect(elRow.exists()).toBe(true)
 	})
 })

package/src/components/DatePicker/DatePicker.mdx

@@ -89,7 +89,7 @@ Les séparateurs peuvent être `/`, `-` ou `.`
 - **Description** : Indique si le champ est obligatoire
 - **Défaut** : `false`
 
-### isDisabled
+### disabled
 - **Type** : `boolean`
 - **Description** : Désactive le champ
 - **Défaut** : `false`