@cnamts/synapse 1.0.13 → 1.0.15

package/src/components/Captcha/CaptchaBase.vue

@@ -14,6 +14,7 @@
 		urlCreate: string
 		urlGetImage: string
 		urlGetAudio: string
+		locale: string
 		locales: typeof defaultLocales
 	}>()
 
@@ -81,6 +82,7 @@
 				state.value = 'resolved'
 			},
 			onCreateCaptchaError,
+			props.locale,
 		)
 	}
 
@@ -106,6 +108,7 @@
 				state.value = 'resolved'
 			},
 			onCreateCaptchaError,
+			props.locale,
 		)
 	}
 

package/src/components/Captcha/captchaApi.ts

@@ -59,7 +59,6 @@ export function createCaptchaImage(
 		type: 'IMAGE',
 		locale,
 	})
-
 	createCaptcha(urlCreate, body, cbsuccess, cberror)
 }
 

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

@@ -3,7 +3,7 @@
 	defineOptions({
 		inheritAttrs: false,
 	})
-	import { mdiInformation, mdiChevronDown, mdiCloseCircle } from '@mdi/js'
+	import { mdiAlertCircle, mdiChevronDown, mdiCloseCircle } from '@mdi/js'
 	import { ref, watch, onMounted, computed, nextTick, type PropType } from 'vue'
 	import { useSySelectKeyboard } from './composables/useSySelectKeyboard'
 	import { vRgaaSvgFix } from '../../../../directives/rgaaSvgFix'
@@ -816,7 +816,7 @@
 						v-if="hasError"
 						class="mr-6"
 						color="error"
-						:icon="mdiInformation"
+						:icon="mdiAlertCircle"
 						:decorative="false"
 						label="Information"
 						role="img"

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
 import { ref, watch } from 'vue'
+import { fn } from '@storybook/test'
 
 // Interface pour typer correctement le composant SyCheckbox avec sa méthode validateOnSubmit
 interface SyCheckboxInstance {
@@ -109,6 +110,10 @@ export const Default: Story = {
 			},
 		],
 	},
+	args: {
+		'onUpdate:modelValue': fn(),
+		'onUpdate:indeterminate': fn(),
+	},
 	render: args => ({
 		components: { SyCheckbox },
 		setup() {

package/src/components/Customs/SyCheckbox/SyCheckbox.vue

@@ -214,7 +214,7 @@
 
 		// Create messageId for checkboxes with IDs
 		if (props.id) {
-			return `${props.id}-messages`
+			return `${props.id}`
 		}
 		return undefined
 	})

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 
 import SyTabs from './SyTabs.vue'
 import { ref } from 'vue'
+import { mdiHome } from '@mdi/js'
 
 // Plus d'informations sur la configuration de Storybook pour Vue:
 // https://storybook.js.org/docs/vue/writing-stories/introduction
@@ -165,7 +166,177 @@ const items = [
 }
 
 /**
- * Exemple avec slots personnalisés pour le contenu des onglets.
+ * Exemple avec slot tabs prepend
+ */
+export const WithTabsPrependSlot: Story = {
+	render: args => ({
+		components: { SyTabs },
+		setup() {
+			return { args }
+		},
+		template: `
+      <SyTabs :items="args.items">
+        <template #tabs-prepend>
+            <div class="p-4 bg-info-light rounded">
+              <p class="mr-4">Tabs prepend content</p>
+            </div>
+        </template>
+      </SyTabs>
+    `,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: ` 
+              <SyTabs :items="args.items">
+        <template #tabs-prepend>
+            <div class="p-4 bg-info-light rounded">
+                <p class="mr-4">Tabs prepend content</p>
+            </div>
+        </template>
+      </SyTabs>
+      `,
+			},
+		],
+	},
+}
+
+/**
+ * Exemple avec slot tabs append
+ */
+export const WithTabsAppendSlot: Story = {
+	render: args => ({
+		components: { SyTabs },
+		setup() {
+			return { args }
+		},
+		template: `
+      <SyTabs :items="args.items">
+        <template #tabs-append>
+            <div class="p-4 bg-info-light rounded">
+              <p class="mr-4">Tabs append content</p>
+            </div>
+        </template>
+      </SyTabs>
+    `,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: ` 
+              <SyTabs :items="args.items">
+        <template #tabs-append>
+            <div class="p-4 bg-info-light rounded">
+                <p class="mr-4">Tabs append content</p>
+            </div>
+        </template>
+      </SyTabs>
+      `,
+			},
+		],
+	},
+}
+
+/**
+ * Exemple avec slot tab prepend
+ */
+export const WithTabPrependSlot: Story = {
+	render: args => ({
+		components: { SyTabs },
+		setup() {
+			return { args, mdiHome }
+		},
+		template: `
+      <SyTabs :items="args.items">
+        <template #tab-prepend="{ item, index, isActive }">
+          <VIcon
+              v-if="index === 0"
+              class="mr-2"
+              :color="isActive ? 'primary' : 'grey'"
+              :icon="mdiHome"
+          />
+        </template>
+      </SyTabs>
+    `,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: ` 
+              <SyTabs :items="args.items">
+        <template #tab-prepend="{ item, index, isActive }">
+          <VIcon
+              v-if="index === 0"
+              class="mr-2"
+              :color="isActive ? 'primary' : 'grey'"
+              :icon="mdiHome"
+          />
+        </template>
+      </SyTabs>
+      `,
+				script: `
+<script setup>
+import { mdiHome } from '@mdi/js'
+</script>
+                `,
+			},
+		],
+	},
+}
+
+/**
+ * Exemple avec slot tab append
+ */
+export const WithTabAppendSlot: Story = {
+	render: args => ({
+		components: { SyTabs },
+		setup() {
+			return { args, mdiHome }
+		},
+		template: `
+      <SyTabs :items="args.items">
+        <template #tab-append="{ item, index, isActive }">
+          <VIcon
+              v-if="index === 0"
+              class="ml-2"
+              :color="isActive ? 'primary' : 'grey'"
+              :icon="mdiHome"
+          />
+        </template>
+      </SyTabs>
+    `,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: ` 
+              <SyTabs :items="args.items">
+        <template #tab-append="{ item, index, isActive }">
+        <VIcon
+              v-if="index === 0"
+              class="ml-2"
+              :color="isActive ? 'primary' : 'grey'"
+              :icon="mdiHome"
+          />
+      </template>
+      </SyTabs>
+      `,
+				script: `
+        <script setup>
+        import { mdiHome } from '@mdi/js'
+        </script>
+                `,
+			},
+		],
+	},
+}
+
+/**
+ * Exemple avec slot pannel
  */
 export const WithCustomContent: Story = {
 	render: args => ({
@@ -183,7 +354,7 @@ export const WithCustomContent: Story = {
         </template>
         <template #panel-1>
           <div class="p-4 bg-success-light rounded">
-            <h3 class="text-h6 font-weight-bold">Contenu personnalisé pour l'onglet 2</h3>
+            <h3 class="text-h6 font-weight-bold text-secondary">Contenu personnalisé pour l'onglet 2</h3>
             <p>Ce panneau utilise un style différent.</p>
           </div>
         </template>
@@ -204,20 +375,13 @@ export const WithCustomContent: Story = {
         </template>
         <template #panel-1>
           <div class="p-4 bg-success-light rounded">
-            <h3 class="text-h6 font-weight-bold">Contenu personnalisé pour l'onglet 2</h3>
+            <h3 class="text-h6 font-weight-bold text-secondary">Contenu personnalisé pour l'onglet 2</h3>
             <p>Ce panneau utilise un style différent.</p>
           </div>
         </template>
       </SyTabs>
       `,
 			},
-			{
-				name: 'Script',
-				code: `
-
-        `,
-
-			},
 		],
 	},
 }

package/src/components/Customs/SyTabs/SyTabs.vue

@@ -49,6 +49,8 @@
 		'tabs-prepend': () => unknown
 		'tabs-append': () => unknown
 		'default': () => unknown
+		'tab-prepend': (props: { item: TabItem, index: number, isActive: boolean }) => unknown
+		'tab-append': (props: { item: TabItem, index: number, isActive: boolean }) => unknown
 	}>()
 
 	const options = useCustomizableOptions(config, { vuetifyOptions: props.vuetifyOptions })
@@ -355,7 +357,19 @@
 									}
 								}"
 							>
+								<slot
+									name="tab-prepend"
+									:item="item"
+									:index="index"
+									:is-active="activeItemIndex === index"
+								/>
 								{{ item.label.toUpperCase() }}
+								<slot
+									name="tab-append"
+									:item="item"
+									:index="index"
+									:is-active="activeItemIndex === index"
+								/>
 							</RouterLink>
 							<!-- Use regular anchor for external links -->
 							<a
@@ -387,7 +401,19 @@
 									}
 								}"
 							>
+								<slot
+									name="tab-prepend"
+									:item="item"
+									:index="index"
+									:is-active="activeItemIndex === index"
+								/>
 								{{ item.label.toUpperCase() }}
+								<slot
+									name="tab-append"
+									:item="item"
+									:index="index"
+									:is-active="activeItemIndex === index"
+								/>
 							</a>
 							<!-- Fallback button for items without navigation -->
 							<!-- Version désactivée du RouterLink -->
@@ -406,7 +432,19 @@
 								tabindex="-1"
 								disabled
 							>
+								<slot
+									name="tab-prepend"
+									:item="item"
+									:index="index"
+									:is-active="activeItemIndex === index"
+								/>
 								{{ item.label.toUpperCase() }}
+								<slot
+									name="tab-append"
+									:item="item"
+									:index="index"
+									:is-active="activeItemIndex === index"
+								/>
 							</button>
 							<!-- Version désactivée du lien -->
 							<button
@@ -424,7 +462,19 @@
 								tabindex="-1"
 								disabled
 							>
+								<slot
+									name="tab-prepend"
+									:item="item"
+									:index="index"
+									:is-active="activeItemIndex === index"
+								/>
 								{{ item.label.toUpperCase() }}
+								<slot
+									name="tab-append"
+									:item="item"
+									:index="index"
+									:is-active="activeItemIndex === index"
+								/>
 							</button>
 							<!-- Fallback button pour les onglets standards -->
 							<button
@@ -449,7 +499,19 @@
 									}
 								}"
 							>
+								<slot
+									name="tab-prepend"
+									:item="item"
+									:index="index"
+									:is-active="activeItemIndex === index"
+								/>
 								{{ item.label.toUpperCase() }}
+								<slot
+									name="tab-append"
+									:item="item"
+									:index="index"
+									:is-active="activeItemIndex === index"
+								/>
 							</button>
 						</li>
 					</ul>

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

@@ -438,4 +438,102 @@ describe('SyTabs', () => {
 			expect(tabItems.length).toBe(testItems.length)
 		})
 	})
+
+	// Tests des slots
+	describe('Slots', () => {
+		it('doit afficher le contenu du slot tabs-prepend', () => {
+			const wrapper = createWrapper({
+				slots: {
+					'tabs-prepend': '<div data-test="tabs-prepend">prepend</div>',
+				},
+			})
+
+			const prepend = wrapper.find('[data-test="tabs-prepend"]')
+			expect(prepend.exists()).toBe(true)
+			expect(prepend.text()).toBe('prepend')
+		})
+
+		it('doit afficher le contenu du slot tabs-append', () => {
+			const wrapper = createWrapper({
+				slots: {
+					'tabs-append': '<div data-test="tabs-append">append</div>',
+				},
+			})
+
+			const append = wrapper.find('[data-test="tabs-append"]')
+			expect(append.exists()).toBe(true)
+			expect(append.text()).toBe('append')
+		})
+
+		it('doit passer correctement item, index et isActive au slot tab-prepend', async () => {
+			const wrapper = createWrapper({
+				slots: {
+					'tab-prepend': `
+						<template #default="{ item, index, isActive }">
+							<span
+								data-test="tab-prepend-slot"
+								:data-index="index"
+								:data-value="item.value"
+								:data-active="isActive"
+							/>
+						</template>
+					`,
+				},
+			})
+
+			// Vérifier l'état initial : premier onglet actif
+			let markers = wrapper.findAll('[data-test="tab-prepend-slot"]')
+			expect(markers.length).toBe(testItems.length)
+			// Premier onglet actif, les autres inactifs
+			expect(markers[0].attributes('data-active')).toBe('true')
+			for (let i = 1; i < markers.length; i++) {
+				expect(markers[i].attributes('data-active')).toBe('false')
+			}
+
+			// Changer d'onglet actif
+			const secondTab = wrapper.findAll('.sy-tabs__button')[1]
+			await secondTab.trigger('click')
+			await nextTick()
+
+			// Recalcule des marqueurs
+			markers = wrapper.findAll('[data-test="tab-prepend-slot"]')
+			expect(markers[1].attributes('data-active')).toBe('true')
+			expect(markers[0].attributes('data-active')).toBe('false')
+		})
+
+		it('doit passer correctement item, index et isActive au slot tab-append', async () => {
+			const wrapper = createWrapper({
+				slots: {
+					'tab-append': `
+						<template #default="{ item, index, isActive }">
+							<span
+								data-test="tab-append-slot"
+								:data-index="index"
+								:data-value="item.value"
+								:data-active="isActive"
+							/>
+						</template>
+					`,
+				},
+			})
+
+			// Vérifier l'état initial : premier onglet actif
+			let markers = wrapper.findAll('[data-test="tab-append-slot"]')
+			expect(markers.length).toBe(testItems.length)
+			expect(markers[0].attributes('data-active')).toBe('true')
+			for (let i = 1; i < markers.length; i++) {
+				expect(markers[i].attributes('data-active')).toBe('false')
+			}
+
+			// Changer d'onglet actif
+			const thirdTab = wrapper.findAll('.sy-tabs__button')[2]
+			await thirdTab.trigger('click')
+			await nextTick()
+
+			// Recalcule des marqueurs
+			markers = wrapper.findAll('[data-test="tab-append-slot"]')
+			expect(markers[2].attributes('data-active')).toBe('true')
+			expect(markers[0].attributes('data-active')).toBe('false')
+		})
+	})
 })

package/src/components/DatePicker/CalendarMode/DatePicker.stories.ts

@@ -1037,27 +1037,27 @@ export const DifferentFormats: Story = {
 					<div class="d-flex flex-column gap-4">
 						<DatePicker
 							v-model="value1"
-							placeholder="Format DD/MM/YYYY"
+							placeholder="Format JJ/MM/AAAA"
 							format="DD/MM/YYYY"
 						/>
 						<DatePicker
 							v-model="value2"
-							placeholder="Format MM/DD/YYYY"
+							placeholder="Format MM/JJ/AAAA"
 							format="MM/DD/YYYY"
 						/>
 						<DatePicker
 							v-model="value3"
-							placeholder="Format YYYY-MM-DD"
+							placeholder="Format AAAA-MM-JJ"
 							format="YYYY-MM-DD"
 						/>
 						<DatePicker
 							v-model="value4"
-							placeholder="Format DD-MM-YY"
+							placeholder="Format JJ-MM-AA"
 							format="DD-MM-YY"
 						/>
 						<DatePicker
 							v-model="value5"
-							placeholder="Format DD.MM.YYYY"
+							placeholder="Format JJ.MM.AAAA"
 							format="DD.MM.YYYY"
 						/>
 					</div>
@@ -1096,13 +1096,13 @@ export const DifferentFormats: Story = {
               <div class="d-flex flex-column gap-4 pa-4">
                 <DatePicker
                     v-model="value1"
-                    placeholder="Format DD/MM/YYYY"
+                    placeholder="Format JJ/MM/AAAA"
                     format="DD/MM/YYYY"
                     class="py-4"
                 />
                 <DatePicker
                     v-model="value2"
-                    placeholder="Format MM/DD/YYYY"
+                    placeholder="Format MM/JJ/AAAA"
                     format="MM/DD/YYYY"
 					class="py-4"
                 />
@@ -1141,14 +1141,14 @@ export const WithDateFormatReturn: Story = {
                 <span class="mb-4">Date de retour : {{ value1 }}</span>
                 <DatePicker
                     v-model="value1"
-                    placeholder="Format DD/MM/YYYY, retour par défaut"
+                    placeholder="Format JJ/MM/AAAA, retour par défaut"
                     format="DD/MM/YYYY"
                 />
 
                 <span class="mb-4">Date de retour : {{ value2 }}</span>
                 <DatePicker
                     v-model="value2"
-                    placeholder="Format DD/MM/YYYY, retour MM/DD/YYYY"
+                    placeholder="Format JJ/MM/AAAA, retour MM/DD/YYYY"
                     format="DD/MM/YYYY"
                     date-format-return="MM/DD/YYYY"
                 />
@@ -1156,7 +1156,7 @@ export const WithDateFormatReturn: Story = {
                 <span class="mb-4">Date de retour : {{ value3 }}</span>
                 <DatePicker
                     v-model="value3"
-                    placeholder="Format DD/MM/YYYY, retour YYYY-MM-DD"
+                    placeholder="Format JJ/MM/AAAA, retour YYYY-MM-DD"
                     format="DD/MM/YYYY"
                     date-format-return="YYYY-MM-DD"
                 />
@@ -1212,14 +1212,14 @@ export const WithDateFormatReturn: Story = {
                 <span class="mb-4">Date de retour : {{ value1 }}</span>
                 <DatePicker
                     v-model="value1"
-                    placeholder="Format DD/MM/YYYY, retour par défaut"
+                    placeholder="Format JJ/MM/AAAA, retour par défaut"
                     format="DD/MM/YYYY"
                 />
 
                 <span class="mb-4">Date de retour : {{ value2 }}</span>
                 <DatePicker
                     v-model="value2"
-                    placeholder="Format DD/MM/YYYY, retour MM/DD/YYYY"
+                    placeholder="Format JJ/MM/AAAA, retour MM/DD/YYYY"
                     format="DD/MM/YYYY"
 					date-format-return="MM/DD/YYYY"
                 />
@@ -1228,7 +1228,7 @@ export const WithDateFormatReturn: Story = {
                 <span class="mb-4">Date de retour : {{ value3 }}</span>
                 <DatePicker
                     v-model="value3"
-                    placeholder="Format DD/MM/YYYY, retour YYYY-MM-DD"
+                    placeholder="Format JJ/MM/AAAA, retour YYYY-MM-DD"
                     format="DD/MM/YYYY"
 					date-format-return="YYYY-MM-DD"
                 />

package/src/components/DatePicker/CalendarMode/DatePicker.vue

@@ -516,6 +516,19 @@
 		}
 	})
 
+	watch(displayFormattedDate, (newValue, oldValue) => {
+		if (
+			props.disabled
+			&& !props.noCalendar
+			&& !props.useCombinedMode
+			&& !newValue
+			&& !!oldValue
+			&& props.modelValue
+		) {
+			syncFromModelValue(props.modelValue)
+		}
+	})
+
 	// Fonction pour mettre à jour displayFormattedDate quand le VDatePicker change
 	const updateDisplayFormattedDate = () => {
 		if (displayFormattedDateComputed.value) {