@cnamts/synapse 1.0.10 → 1.0.12

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import SyForm from './SyForm.vue'
 import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
@@ -33,9 +33,17 @@ export const Basic: Story = {
 		setup() {
 			const name = ref('')
 			const email = ref('')
+			const form = ref<{ validate: () => Promise<boolean> } | null>(null)
 
-			const onSubmit = (event: { isValid: boolean }) => {
-				if (event.isValid) {
+			// Règles de validation selon le design system
+			const emailRules = [
+				{ type: 'email', options: { message: 'Format d\'email invalide' } },
+				{ type: 'required', options: { message: 'L\'email est obligatoire' } },
+			]
+
+			const submitForm = async () => {
+				const isValid = await form.value?.validate()
+				if (isValid) {
 					alert('Formulaire valide !')
 				}
 				else {
@@ -43,13 +51,13 @@ export const Basic: Story = {
 				}
 			}
 
-			return { name, email, onSubmit, args }
+			return { name, email, emailRules, form, submitForm, args }
 		},
 		template: `
-      <SyForm v-bind="args" @submit="onSubmit">
+      <SyForm ref="form" v-bind="args" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
           <SyTextField v-model="name" label="Nom" required />
-          <SyTextField v-model="email" label="Email" required :rules="[v => /.+@.+/.test(v) || 'E-mail invalide']" />
+          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" />
           <v-btn type="submit" color="primary">Soumettre</v-btn>
         </div>
       </SyForm>
@@ -64,13 +72,13 @@ export const Basic: Story = {
 				name: 'Template',
 				code: `
 <template>
-  <SyForm @submit="onSubmit">
-    <div class="d-flex flex-column gap-4">
-      <SyTextField v-model="name" label="Nom" required />
-      <SyTextField v-model="email" label="Email" required :rules="[v => /.+@.+/.test(v) || 'E-mail invalide']" />
-      <v-btn type="submit" color="primary">Soumettre</v-btn>
-    </div>
-  </SyForm>
+      <SyForm ref="form" v-bind="args" @submit="submitForm">
+        <div class="d-flex flex-column gap-4">
+          <SyTextField v-model="name" label="Nom" required />
+          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" />
+          <v-btn type="submit" color="primary">Soumettre</v-btn>
+        </div>
+      </SyForm>
 </template>
 `,
 			},
@@ -78,13 +86,16 @@ export const Basic: Story = {
 				name: 'Script',
 				code: `
 <script setup lang="ts">
-import { ref } from 'vue'
-import SyForm from '@cnamts/synapse'
-import SyTextField from '@cnamts/synapse'
 
 const name = ref('')
 const email = ref('')
 
+// Règles de validation selon le design system
+const emailRules = [
+	{ type: 'email', options: { message: "Format d'email invalide" } },
+	{ type: 'required', options: { message: "L'email est obligatoire" } },
+]
+
 const onSubmit = (event: { isValid: boolean }) => {
   if (event.isValid) {
     alert('Formulaire valide !')
@@ -107,45 +118,56 @@ export const CustomValidation: Story = {
 			const username = ref('')
 			const password = ref('')
 			const confirmPassword = ref('')
+			const form = ref<{ validate: () => Promise<boolean> } | null>(null)
 
-			const validatePasswordMatch = () => {
-				return password.value === confirmPassword.value || 'Les mots de passe ne correspondent pas'
-			}
+			// Règles de validation
+			const passwordRules = computed(() => [
+				{ type: 'minLength', options: { length: 8, message: 'Minimum 8 caractères' } },
+				{ type: 'required', options: { message: 'Le mot de passe est obligatoire' } },
+			])
 
-			const onSubmit = (event: { isValid: boolean }) => {
-				if (event.isValid) {
+			const confirmPasswordRules = computed(() => [
+				{ type: 'custom', options: {
+					validate: value => value === password.value || 'Les mots de passe ne correspondent pas',
+					message: 'Les mots de passe ne correspondent pas',
+				} },
+				{ type: 'required', options: { message: 'Veuillez confirmer le mot de passe' } },
+			])
+
+			const submitForm = async () => {
+				const isValid = await form.value?.validate()
+				if (isValid) {
 					alert('Inscription réussie !')
 				}
+				else {
+					alert('Formulaire invalide, veuillez corriger les erreurs.')
+				}
 			}
 
-			// Utilisez un type pour form.value avec une propriété validate
-			interface FormRef {
-				validate: () => Promise<boolean>
-			}
-
-			const form = ref<FormRef | null>(null)
-			const validateManually = () => {
-				if (form.value && form.value.validate) {
-					form.value.validate().then((isValid: boolean) => {
-						alert(isValid ? 'Formulaire valide !' : 'Formulaire invalide !')
-					})
+			const validateManually = async () => {
+				const isValid = await form.value?.validate()
+				if (isValid) {
+					alert('Formulaire valide !')
+				}
+				else {
+					alert('Formulaire invalide !')
 				}
 			}
 
-			return { username, password, confirmPassword, validatePasswordMatch, onSubmit, form, validateManually, args }
+			return { username, password, confirmPassword, passwordRules, confirmPasswordRules, form, submitForm, validateManually, args }
 		},
 		template: `
       <div>
-        <SyForm ref="form" v-bind="args" @submit="onSubmit">
+        <SyForm ref="form" v-bind="args" @submit="submitForm">
           <div class="d-flex flex-column gap-4">
             <SyTextField v-model="username" label="Nom d'utilisateur" required />
-            <SyTextField v-model="password" label="Mot de passe" type="password" required :rules="[v => v.length >= 8 || 'Minimum 8 caractères']" />
+            <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" />
             <SyTextField 
               v-model="confirmPassword" 
               label="Confirmer le mot de passe" 
               type="password" 
               required 
-              :rules="[validatePasswordMatch]" 
+              :custom-rules="confirmPasswordRules" 
             />
             <div class="d-flex gap-3">
               <v-btn type="submit" color="primary">S'inscrire</v-btn>
@@ -166,13 +188,12 @@ export const CustomValidation: Story = {
     <SyForm ref="form" @submit="onSubmit">
       <div class="d-flex flex-column gap-4">
         <SyTextField v-model="username" label="Nom d'utilisateur" required />
-        <SyTextField v-model="password" label="Mot de passe" type="password" required :rules="[v => v.length >= 8 || 'Minimum 8 caractères']" />
+        <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" />
         <SyTextField 
           v-model="confirmPassword" 
           label="Confirmer le mot de passe" 
           type="password" 
-          required 
-          :rules="[validatePasswordMatch]" 
+          :custom-rules="confirmPasswordRules" 
         />
         <div class="d-flex gap-3">
           <v-btn type="submit" color="primary">S'inscrire</v-btn>
@@ -188,15 +209,26 @@ export const CustomValidation: Story = {
 				name: 'Script',
 				code: `
 <script setup lang="ts">
-import { ref } from 'vue'
-import SyForm from '@cnamts/synapse'
-import SyTextField from '@cnamts/synapse'
+import { ref, computed } from 'vue'
 
 const username = ref('')
 const password = ref('')
 const confirmPassword = ref('')
 const form = ref(null)
 
+const passwordRules = computed(() => [
+	{ type: 'minLength', options: { length: 8, message: 'Minimum 8 caractères' } },
+	{ type: 'required', options: { message: 'Le mot de passe est obligatoire' } },
+])
+
+const confirmPasswordRules = computed(() => [
+	{ type: 'custom', options: {
+		validate: value => value === password.value || 'Les mots de passe ne correspondent pas',
+		message: 'Les mots de passe ne correspondent pas',
+	} },
+	{ type: 'required', options: { message: 'Veuillez confirmer le mot de passe' } },
+])
+	
 const validatePasswordMatch = () => {
   return password.value === confirmPassword.value || 'Les mots de passe ne correspondent pas'
 }
@@ -227,8 +259,20 @@ export const MixedFields: Story = {
 				name: '',
 				email: '',
 				country: '',
-				subscribe: false,
 			})
+			const form = ref<{ validate: () => Promise<boolean> } | null>(null)
+
+			// Règles de validation
+			const emailCustomRules = [
+				{
+					type: 'email',
+					options: {
+						message: 'L\'email n\'est pas valide',
+						successMessage: 'L\'email est valide',
+					},
+				},
+				{ type: 'required', options: { message: 'L\'email est obligatoire' } },
+			]
 
 			const countries = [
 				{ text: 'France', value: 'fr' },
@@ -237,21 +281,24 @@ export const MixedFields: Story = {
 				{ text: 'Italie', value: 'it' },
 			]
 
-			const onSubmit = (event: { isValid: boolean }) => {
-				if (event.isValid) {
+			const submitForm = async () => {
+				const isValid = await form.value?.validate()
+				if (isValid) {
 					alert(`Formulaire valide ! Données: ${JSON.stringify(formData.value)}`)
 				}
+				else {
+					alert('Formulaire invalide, veuillez corriger les erreurs.')
+				}
 			}
 
-			return { formData, countries, onSubmit, args }
+			return { formData, countries, form, submitForm, emailCustomRules, args }
 		},
 		template: `
-      <SyForm v-bind="args" @submit="onSubmit">
+      <SyForm ref="form" v-bind="args" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
           <SyTextField v-model="formData.name" label="Nom complet" required />
-          <SyTextField v-model="formData.email" label="Email" required :rules="[v => /.+@.+/.test(v) || 'E-mail invalide']" />
+          <SyTextField v-model="formData.email" label="Email" :custom-rules="emailCustomRules" />
           <SySelect v-model="formData.country" :items="countries" label="Pays" required />
-          <SyCheckbox v-model="formData.subscribe" label="S'abonner à la newsletter" />
           <v-btn type="submit" color="primary">Enregistrer</v-btn>
         </div>
       </SyForm>
@@ -263,111 +310,52 @@ export const MixedFields: Story = {
 				name: 'Template',
 				code: `
 <template>
-  <SyForm @submit="onSubmit">
-    <div class="d-flex flex-column gap-4">
-      <SyTextField v-model="formData.name" label="Nom complet" required />
-      <SyTextField v-model="formData.email" label="Email" required :rules="[v => /.+@.+/.test(v) || 'E-mail invalide']" />
-      <SySelect v-model="formData.country" :items="countries" label="Pays" required />
-      <SyCheckbox v-model="formData.subscribe" label="S'abonner à la newsletter" />
-      <v-btn type="submit" color="primary">Enregistrer</v-btn>
-    </div>
-  </SyForm>
-</template>
-`,
-			},
-			{
-				name: 'Script',
-				code: `
-<script setup lang="ts">
-import { ref } from 'vue'
-import SyForm from '@cnamts/synapse'
-import SyTextField from '@cnamts/synapse'
-import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
-import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
-
-const formData = ref({
-  name: '',
-  email: '',
-  country: '',
-  subscribe: false,
-})
-
-const countries = [
-  { text: 'France', value: 'fr' },
-  { text: 'Allemagne', value: 'de' },
-  { text: 'Espagne', value: 'es' },
-  { text: 'Italie', value: 'it' },
-]
-
-const onSubmit = (event: { isValid: boolean }) => {
-  if (event.isValid) {
-    alert('Formulaire valide ! Données: ' + JSON.stringify(formData.value))
-  }
-}
-</script>
-`,
-			},
-		],
-	},
-}
-
-export const WithoutAutoValidation: Story = {
-	render: args => ({
-		components: { SyForm, SyTextField, VBtn },
-		setup() {
-			const name = ref('')
-			const email = ref('')
-
-			const onSubmit = () => {
-				alert(`Soumission du formulaire sans validation automatique. Vous devez gérer la validation manuellement.`)
-			}
-
-			return { name, email, onSubmit, args }
-		},
-		template: `
-      <SyForm v-bind="args" @submit="onSubmit">
+      <SyForm ref="form" v-bind="args" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
-          <SyTextField v-model="name" label="Nom" required />
-          <SyTextField v-model="email" label="Email" required :rules="[v => /.+@.+/.test(v) || 'E-mail invalide']" />
-          <v-btn type="submit" color="primary">Soumettre</v-btn>
+          <SyTextField v-model="formData.name" label="Nom complet" required />
+          <SyTextField v-model="formData.email" label="Email" :customRules="emailCustomRules" />
+          <SySelect v-model="formData.country" :items="countries" label="Pays" required />
+          <v-btn type="submit" color="primary">Enregistrer</v-btn>
         </div>
       </SyForm>
-    `,
-	}),
-	args: {
-		validateOnSubmit: false,
-	},
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-<template>
-  <SyForm :validate-on-submit="false" @submit="onSubmit">
-    <div class="d-flex flex-column gap-4">
-      <SyTextField v-model="name" label="Nom" required />
-      <SyTextField v-model="email" label="Email" required :rules="[v => /.+@.+/.test(v) || 'E-mail invalide']" />
-      <v-btn type="submit" color="primary">Soumettre</v-btn>
-    </div>
-  </SyForm>
 </template>
 `,
 			},
 			{
 				name: 'Script',
 				code: `
-<script setup lang="ts">
-import { ref } from 'vue'
-import SyForm from '@cnamts/synapse'
-import SyTextField from '@cnamts/synapse'
+		<script setup lang="ts">
 
-const name = ref('')
-const email = ref('')
+			const formData = ref({
+			name: '',
+			email: '',
+			country: '',
+			})
 
-const onSubmit = () => {
-  alert('Soumission du formulaire sans validation automatique. Vous devez gérer la validation manuellement.')
-}
-</script>
+			const countries = [
+			{ text: 'France', value: 'fr' },
+			{ text: 'Allemagne', value: 'de' },
+			{ text: 'Espagne', value: 'es' },
+			{ text: 'Italie', value: 'it' },
+			]
+
+			const emailCustomRules = [
+				{
+					type: 'email',
+					options: {
+						message: "L'email n'est pas valide:",
+						successMessage: "L'email est valide:",
+					},
+				},
+				{ type: 'required', options: { message: "L'email est obligatoire" } },
+			]
+
+			const onSubmit = (event: { isValid: boolean }) => {
+			if (event.isValid) {
+				alert('Formulaire valide ! Données: ' + JSON.stringify(formData.value))
+			}
+			}
+		</script>
 `,
 			},
 		],

package/src/components/Customs/SyTabs/tests/SyTabs.spec.ts

@@ -2,7 +2,6 @@ import { describe, it, expect, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import SyTabs from '@/components/Customs/SyTabs/SyTabs.vue'
-import { vuetify } from '@tests/unit/setup'
 
 // Mock RouterLink component
 const RouterLink = {
@@ -25,7 +24,6 @@ describe('SyTabs', () => {
 			items: testItems,
 		},
 		global: {
-			plugins: [vuetify],
 			// Mock vue-router and provide RouterLink component
 			components: {
 				RouterLink,

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-	// Prevent display-asterisk from being passed to the DOM
+// Prevent display-asterisk from being passed to the DOM
 	defineOptions({
 		inheritAttrs: false,
 	})
@@ -8,7 +8,7 @@
 		mdiCheck,
 		mdiInformationOutline,
 		mdiClose,
-		mdiInformation,
+		mdiAlertCircle,
 		mdiCalendar,
 	} from '@mdi/js'
 	import { computed, onMounted, ref, watch, nextTick, type ComponentPublicInstance } from 'vue'
@@ -166,7 +166,7 @@
 		info: mdiInformationOutline,
 		success: mdiCheck,
 		warning: mdiAlertOutline,
-		error: mdiInformation,
+		error: mdiAlertCircle,
 		close: mdiClose,
 		calendar: mdiCalendar,
 	}
@@ -189,6 +189,16 @@
 
 	const isBlurred = ref(false)
 
+	const showClear = computed(() => {
+		if (!props.isClearable) return false
+		if (props.readonly || props.disabled) return false
+		return model.value !== undefined && model.value !== null && String(model.value) !== '' && String(model.value) !== '__/__/____'
+	})
+
+	const clearField = () => {
+		model.value = ''
+	}
+
 	// Initialisation du composable de validation
 	const validation = useValidation({
 		customRules: props.customRules,
@@ -549,8 +559,6 @@
 		:base-color="props.baseColor"
 		:bg-color="props.bgColor"
 		:center-affix="props.centerAffix"
-		:clear-icon="ICONS.close"
-		:clearable="props.isClearable"
 		:color="props.color"
 		:counter-value="props.counterValue"
 		:density="props.density"
@@ -695,6 +703,16 @@
 		<!-- Append inner -->
 		<template #append-inner>
 			<slot name="append-inner">
+				<!-- Keyboard-focusable clear button -->
+				<VBtn
+					v-if="showClear"
+					class="v-btn v-btn--density-compact mr-1"
+					:aria-label="props.label ? `Vider ${props.label}` : 'Vider'"
+					:title="props.label ? `Vider ${props.label}` : 'Vider'"
+					:icon="mdiClose"
+					variant="text"
+					@click="clearField"
+				/>
 				<SyIcon
 					v-if="validationIcon && !props.appendInnerIcon"
 					:icon="validationIcon"
@@ -788,6 +806,10 @@
 		opacity: 1 !important;
 	}
 
+	:deep(.v-icon__svg) {
+		fill: tokens.$colors-text-success !important;
+	}
+
 	:deep(.v-field) {
 		color: tokens.$colors-border-success !important;
 

package/src/components/Customs/SyTextField/tests/SyTextField.spec.ts

@@ -1,26 +1,15 @@
 import { describe, it, expect, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
 import { VIcon } from 'vuetify/components'
 
 import SyTextField from '../SyTextField.vue'
 import type { IconType } from '../types'
 
-const vuetify = createVuetify({
-	components,
-	directives,
-})
-
 describe('SyTextField.vue', () => {
 	let wrapper: ReturnType<typeof mount<typeof SyTextField>>
 
 	beforeEach(() => {
 		wrapper = mount(SyTextField, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: undefined,
 				required: true,
@@ -37,7 +26,6 @@ describe('SyTextField.vue', () => {
 
 	it('applies the correct variant style', () => {
 		wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			props: { variantStyle: 'filled' },
 		})
 		const textField = wrapper.findComponent({ name: 'VTextField' })
@@ -46,7 +34,6 @@ describe('SyTextField.vue', () => {
 
 	it('renders default slots correctly', () => {
 		wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			slots: {
 				prepend: '<div data-testid="prepend-slot">Prepend Slot Content</div>',
 				append: '<div data-testid="append-slot">Append Slot Content</div>',
@@ -62,7 +49,6 @@ describe('SyTextField.vue', () => {
 
 	it('renders inner slots correctly', () => {
 		wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			slots: {
 				'prepend-inner': '<div data-testid="prepend-inner-slot">Prepend Inner Slot Content</div>',
 				'append-inner': '<div data-testid="append-inner-slot">Append Inner Slot Content</div>',
@@ -80,7 +66,6 @@ describe('SyTextField.vue', () => {
 
 	it('should update icon when validation state changes', async () => {
 		wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			props: { appendInnerIcon: 'success' as IconType },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('success')
@@ -88,7 +73,6 @@ describe('SyTextField.vue', () => {
 
 	it('should update icon when validation state changes with warning', async () => {
 		wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			props: { appendInnerIcon: 'warning' as IconType },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('warning')
@@ -96,7 +80,6 @@ describe('SyTextField.vue', () => {
 
 	it('should update icon when validation state changes with error', async () => {
 		wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			props: { appendInnerIcon: 'error' as IconType },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('error')
@@ -104,7 +87,6 @@ describe('SyTextField.vue', () => {
 
 	it('should update icon when validation state changes with success', async () => {
 		wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			props: { appendInnerIcon: 'success' as IconType },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('success')
@@ -112,7 +94,6 @@ describe('SyTextField.vue', () => {
 
 	it('emits prepend-icon-click event when prepend icon is clicked', async () => {
 		const wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			props: { prependIcon: 'info' as IconType },
 		})
 
@@ -126,7 +107,6 @@ describe('SyTextField.vue', () => {
 
 	it('emits append-icon-click event when append icon is clicked', async () => {
 		const wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			props: { appendIcon: 'info' as IconType },
 		})
 
@@ -140,7 +120,6 @@ describe('SyTextField.vue', () => {
 
 	it('shows validation error message', async () => {
 		const wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			props: {
 				required: true,
 				label: 'Test Field',
@@ -161,7 +140,6 @@ describe('SyTextField.vue', () => {
 		}
 
 		wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			props: { customRules: [customRule] },
 		})
 
@@ -184,7 +162,6 @@ describe('SyTextField.vue', () => {
 		}
 
 		const wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			props: {
 				modelValue: 'test',
 				customWarningRules: [warningRule],
@@ -203,9 +180,7 @@ describe('SyTextField.vue', () => {
 	})
 
 	it('maintains input value without validation rules', async () => {
-		wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
-		})
+		wrapper = mount(SyTextField)
 		const input = wrapper.find('input')
 
 		await input.setValue('test value')
@@ -222,7 +197,6 @@ describe('SyTextField.vue', () => {
 		}
 
 		wrapper = mount(SyTextField, {
-			global: { plugins: [vuetify] },
 			props: {
 				customRules: [customRule],
 				isValidateOnBlur: false,

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

@@ -1,15 +1,11 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { vuetify } from '@tests/unit/setup'
 
 import DataListLoading from '../DataListLoading.vue'
 
 describe('DataListLoading', () => {
 	it('renders correctly', () => {
 		const wrapper = mount(DataListLoading, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				heading: true,
 				itemsNumber: 3,