@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/Customs/Selects/SelectBtnField/tests/__snapshots__/SelectBtnField.spec.ts.snap

@@ -74,17 +74,21 @@ exports[`SelectBtnField > display correctly in dark mode with an error 1`] = `
             </div>
           </li>
         </ul>
-        <p class="
-          mb-0
+        <div class="
           mt-2
-          opacity-100
           px-3
-          text-error
-          theme--light
-          v-messages
+          select-btn-field__messages
         ">
-          Test
-        </p>
+          <p class="
+            mb-0
+            opacity-100
+            select-btn-field__message
+            select-btn-field__message--error
+            v-messages
+          ">
+            Test
+          </p>
+        </div>
       </div>
     </div>
   </div>
@@ -180,21 +184,25 @@ exports[`SelectBtnField > display correctly with an error 1`] = `
       </div>
     </li>
   </ul>
-  <p class="
-    mb-0
+  <div class="
     mt-2
-    opacity-100
     px-3
-    text-error
-    theme--light
-    v-messages
+    select-btn-field__messages
   ">
-    Test
-  </p>
+    <p class="
+      mb-0
+      opacity-100
+      select-btn-field__message
+      select-btn-field__message--error
+      v-messages
+    ">
+      Test
+    </p>
+  </div>
 </div>
 `;
 
-exports[`SelectBtnField > display correctly with in dark mode with an hint 1`] = `
+exports[`SelectBtnField > display correctly with in dark mode with a help text 1`] = `
 <div class="
   v-application
   v-layout
@@ -267,16 +275,18 @@ exports[`SelectBtnField > display correctly with in dark mode with an hint 1`] =
             </div>
           </li>
         </ul>
-        <p class="
-          mb-0
+        <div class="
           mt-2
-          opacity-100
           px-3
-          theme--light
-          v-messages
+          select-btn-field__messages
         ">
-          Test
-        </p>
+          <p class="
+            mb-0
+            select-btn-field__help-text
+          ">
+            Test
+          </p>
+        </div>
       </div>
     </div>
   </div>
@@ -371,16 +381,18 @@ exports[`SelectBtnField > render correctly in multiple mode 1`] = `
       </div>
     </li>
   </ul>
-  <p class="
-    mb-0
+  <div class="
     mt-2
-    opacity-100
     px-3
-    theme--light
-    v-messages
+    select-btn-field__messages
   ">
-    Test
-  </p>
+    <p class="
+      mb-0
+      select-btn-field__help-text
+    ">
+      Test
+    </p>
+  </div>
 </div>
 `;
 
@@ -490,15 +502,17 @@ exports[`SelectBtnField > renders correctly with props 1`] = `
       </div>
     </li>
   </ul>
-  <p class="
-    mb-0
+  <div class="
     mt-2
-    opacity-100
     px-3
-    theme--light
-    v-messages
+    select-btn-field__messages
   ">
-    Test
-  </p>
+    <p class="
+      mb-0
+      select-btn-field__help-text
+    ">
+      Test
+    </p>
+  </div>
 </div>
 `;

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

@@ -404,7 +404,7 @@
 					:disable-error-handling="disableErrorHandling"
 					:loading="loading"
 					:help-text="helpText"
-					:are-details-hidden="hideDetails"
+					:hide-details="hideDetails"
 					:aria-label="hasInlineSelections ? label : undefined"
 					@click="openAndFocus"
 					@update:model-value="handleInput"

package/src/components/Customs/Selects/SyAutocomplete/tests/SyAutocomplete.spec.ts

@@ -931,6 +931,7 @@ describe('SyAutocomplete', () => {
 					label: 'Test success',
 					textKey: 'text',
 					valueKey: 'value',
+					showSuccessMessages: true,
 					customSuccessRules: [successRule],
 				},
 			})
@@ -1059,6 +1060,7 @@ describe('SyAutocomplete', () => {
 					label: 'Test successMessages',
 					textKey: 'text',
 					valueKey: 'value',
+					showSuccessMessages: true,
 					successMessages: ['Succès externe'],
 				},
 			})

package/src/components/Customs/Selects/SyAutocomplete/tests/SyAutocomplete.visual.cy.ts

@@ -0,0 +1,63 @@
+import SyAutocomplete from '../SyAutocomplete.vue'
+
+const defaultItems = [
+	{ text: 'Paris', value: 'paris' },
+	{ text: 'Lyon', value: 'lyon' },
+	{ text: 'Marseille', value: 'marseille' },
+	{ text: 'Toulouse', value: 'toulouse' },
+]
+
+describe('SyAutocomplete - Visual regression tests', () => {
+	it('displays the autocomplete by default', () => {
+		cy.mountWithVuetify(SyAutocomplete, {
+			props: {
+				items: defaultItems,
+				label: 'Ville',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-autocomplete-default', cy.get('.v-text-field'))
+	})
+
+	it('displays the autocomplete with a selected value', () => {
+		cy.mountWithVuetify(SyAutocomplete, {
+			props: {
+				items: defaultItems,
+				label: 'Ville',
+				modelValue: 'paris',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-autocomplete-with-value', cy.get('.v-text-field'))
+	})
+
+	it('displays the autocomplete with multiple selection', () => {
+		cy.mountWithVuetify(SyAutocomplete, {
+			props: {
+				items: defaultItems,
+				label: 'Villes',
+				multiple: true,
+				chips: true,
+				modelValue: ['paris', 'lyon'],
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-autocomplete-multiple', cy.get('.v-text-field'))
+	})
+
+	it('displays the autocomplete with loading state', () => {
+		cy.mountWithVuetify(SyAutocomplete, {
+			props: {
+				items: defaultItems,
+				label: 'Ville',
+				loading: true,
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-autocomplete-loading', cy.get('.v-text-field'))
+	})
+})

package/src/components/Customs/Selects/SyAutocomplete/validation/Validation.stories.ts

@@ -301,99 +301,6 @@ onMounted(() => {
 	}),
 }
 
-export const NoSuccessMessage: Story = {
-	parameters: {
-		docs: {
-			description: {
-				story: 'Avec `showSuccessMessages: false`, l\'état visuel de succès reste actif (bordure verte, icône) mais le message texte n\'est pas affiché. Utile quand un retour positif silencieux est suffisant.',
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-<template>
-  <SyAutocomplete
-    ref="autocompleteRef"
-    v-model="value"
-    :items="items"
-    label="Option"
-    :show-success-messages="false"
-    :customSuccessRules="[
-      {
-        type: 'custom',
-        options: {
-          validate: (v) => v !== null && v !== undefined,
-          successMessage: 'Option sélectionnée avec succès.'
-        }
-      }
-    ]"
-  />
-</template>`,
-			},
-			{
-				name: 'Script',
-				code: `
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { SyAutocomplete } from '@cnamts/synapse'
-
-const value = ref('1')
-const items = [
-  { text: 'Option 1', value: '1' },
-  { text: 'Option 2', value: '2' },
-  { text: 'Option 3', value: '3' },
-]
-
-const autocompleteRef = ref(null)
-
-onMounted(() => {
-  autocompleteRef.value?.validateOnSubmit()
-})
-</script>`,
-			},
-		],
-	},
-	args: {
-		'items': items,
-		'label': 'Option',
-		'filter': false,
-		'showSuccessMessages': false,
-		'onUpdate:modelValue': fn(),
-	},
-	render: args => ({
-		components: { SyAutocomplete },
-		setup() {
-			const value = ref('1')
-			const autocompleteRef = ref<{ validateOnSubmit: () => Promise<boolean> } | null>(null)
-
-			onMounted(() => {
-				autocompleteRef.value?.validateOnSubmit()
-			})
-
-			return { args, value, autocompleteRef }
-		},
-		template: `
-			<div class="pa-4">
-				<SyAutocomplete
-					ref="autocompleteRef"
-					v-model="value"
-					v-bind="args"
-					:customSuccessRules="[
-						{
-							type: 'custom',
-							options: {
-								validate: (v) => v !== null && v !== undefined,
-								successMessage: 'Option sélectionnée avec succès.'
-							}
-						}
-					]"
-				/>
-			</div>
-		`,
-	}),
-}
-
 export const NoValidateOnBlur: Story = {
 	parameters: {
 		docs: {

package/src/components/Customs/Selects/SyInputSelect/tests/SyInputSelect.visual.cy.ts

@@ -0,0 +1,48 @@
+import SyInputSelect from '../SyInputSelect.vue'
+
+const defaultItems = [
+	{ text: 'Option A', value: 'a' },
+	{ text: 'Option B', value: 'b' },
+	{ text: 'Option C', value: 'c' },
+]
+
+describe('SyInputSelect - Visual regression tests', () => {
+	it('displays the input select by default', () => {
+		cy.mountWithVuetify(SyInputSelect, {
+			props: {
+				items: defaultItems,
+				label: 'Sélectionner',
+			},
+		})
+
+		cy.get('.sy-input-select').should('be.visible')
+		cy.matchImageSnapshot('sy-input-select-default', cy.get('.sy-input-select'))
+	})
+
+	it('displays the input select with a value', () => {
+		cy.mountWithVuetify(SyInputSelect, {
+			props: {
+				items: defaultItems,
+				label: 'Sélectionner',
+				modelValue: 'b',
+			},
+		})
+
+		cy.get('.sy-input-select').should('be.visible')
+		cy.matchImageSnapshot('sy-input-select-with-value', cy.get('.sy-input-select'))
+	})
+
+	it('displays the input select as required', () => {
+		cy.mountWithVuetify(SyInputSelect, {
+			props: {
+				items: defaultItems,
+				label: 'Sélectionner',
+				required: true,
+				displayAsterisk: true,
+			},
+		})
+
+		cy.get('.sy-input-select').should('be.visible')
+		cy.matchImageSnapshot('sy-input-select-required', cy.get('.sy-input-select'))
+	})
+})

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

@@ -139,7 +139,6 @@
 	const { focused, validate, clearValidation, errors, warnings, successes, hasError, hasWarning, hasSuccess, validationIcon } = useSySelectValidation(props)
 
 	const labelWidth = ref(0)
-	const labelRef = ref<HTMLElement | null>(null)
 	const list = ref<VList | null>(null)
 	const textInput = ref<InstanceType<typeof VTextField> | null>(null)
 	const htmlItemRefs = ref<HTMLElement[]>([])
@@ -189,12 +188,8 @@
 	const inputId = ref(`sy-select-${Math.random().toString(36).substring(7)}`)
 	// text d'aide
 	const helpTextId = computed(() => `${inputId.value}-help`)
-	// messages d'erreur, success avertissement
-	const messagesId = computed(() => `${inputId.value}-sr-messages`)
 	// live region pour le lecteur ecran
 	const liveRegionId = computed(() => `${inputId.value}-live`)
-	// un libellé caché pour la popup/grid
-	const overlayLabelId = computed(() => `${inputId.value}-overlay-label`)
 
 	// Generate unique menu ID for each component instance to avoid conflicts and validation issues
 	const uniqueMenuId = ref(props.menuId === 'sy-select-menu' ? `sy-select-menu-${Math.random().toString(36).substring(7)}` : props.menuId)
@@ -466,10 +461,11 @@
 		return props.required === true
 	})
 
-	// Détecte s'il y a des messages d'erreur, de succès ou d'avertissement
+	// Détecte s'il y a un message réellement affiché (le succès ne compte que s'il est affiché
+	// via showSuccessMessages, sinon le helpText doit occuper la position du message sans espace vide)
 	const hasMessages = computed(() => {
 		if (props.disableErrorHandling) return false
-		return hasError.value || hasWarning.value || hasSuccess.value
+		return hasError.value || hasWarning.value || (hasSuccess.value && props.showSuccessMessages)
 	})
 
 	// Détermine si le helpText doit être affiché à la position du message ou en dessous
@@ -491,10 +487,6 @@
 		if ((showHelpTextAsMessage.value || showHelpTextBelow.value) && props.helpText) {
 			ids.push(helpTextId.value)
 		}
-		// messages affichés
-		if (!props.hideDetails && hasMessages.value) {
-			ids.push(messagesId.value)
-		}
 		// live region si erreur
 		if (hasError.value || errors.value.length > 0) {
 			ids.push(liveRegionId.value)
@@ -765,10 +757,6 @@
 	}
 
 	onMounted(() => {
-		if (labelRef.value) {
-			labelWidth.value = labelRef.value.offsetWidth + 64
-		}
-
 		nextTick(() => {
 			setupAriaAttributes()
 
@@ -874,7 +862,6 @@
 		else {
 			listElement.removeAttribute('aria-multiselectable')
 		}
-		listElement.setAttribute('aria-labelledby', overlayLabelId.value)
 	}
 
 	const focusInput = () => {
@@ -973,6 +960,7 @@
 							'warning-field': hasWarning,
 							'success-field': hasSuccess,
 							'basic-field': !hasError && !hasWarning && !hasSuccess,
+							'help-text-as-hint': showHelpTextAsMessage,
 						}"
 						v-bind="{
 							...Object.fromEntries(Object.entries($attrs).filter(([key]) => key !== 'display-asterisk')),
@@ -1074,6 +1062,7 @@
 								:icon="validationIcon"
 								:decorative="true"
 								role="presentation"
+								width="24"
 							/>
 							<button
 								v-if="props.clearable && hasSelectionToClear"
@@ -1089,43 +1078,32 @@
 									class="sy-select__clear-icon"
 									:icon="mdiCloseCircle"
 									:decorative="true"
+									width="24"
 								/>
 							</button>
 							<SyIcon
 								class="arrow"
 								:icon="mdiChevronDown"
 								:decorative="true"
+								width="24"
 							/>
 						</template>
 					</VTextField>
 				</div>
-				<span
-					ref="labelRef"
-					class="hidden-label"
-				>{{ label }}</span>
 			</template>
 
-			<!--
-				Libellé caché utilisé pour nommer la popup/grid.
-			-->
-			<span
-				:id="overlayLabelId"
-				class="d-sr-only"
-			>
-				{{ accessibleLabel }}
-			</span>
-
 			<VList
 				:id="uniqueMenuId"
 				ref="list"
 				class="v-list sy-select-grid"
 				role="listbox"
 				:aria-multiselectable="props.multiple ? 'true' : undefined"
-				:aria-labelledby="overlayLabelId"
+				:aria-labelledby="`${inputId}-label`"
 				:title="accessibleLabel"
 				:style="{
 					minWidth: `${textInput?.$el.offsetWidth}px`
 				}"
+				tag="ul"
 				bg-color="white"
 				tabindex="-1"
 				@keydown.esc.prevent="closeList"
@@ -1139,7 +1117,7 @@
 				@keydown.page-down.prevent="handlePageDownKey"
 				@click.stop
 			>
-				<div
+				<li
 					v-for="(item, index) in formattedItems"
 					:id="`option-${index}`"
 					:key="index"
@@ -1186,7 +1164,7 @@
 							</span>
 						</VListItemTitle>
 					</div>
-				</div>
+				</li>
 			</VList>
 		</VMenu>
 
@@ -1199,14 +1177,7 @@
 		</div>
 
 		<div
-			v-if="!props.hideDetails && hasMessages"
-			:id="messagesId"
-			class="d-sr-only"
-		>
-			{{ hasError ? errors.join(' ') : (hasWarning ? warnings.join(' ') : successes.join(' ')) }}
-		</div>
-
-		<div
+			v-if="props.hideDetails && hasMessages"
 			:id="liveRegionId"
 			class="d-sr-only"
 			aria-live="polite"
@@ -1359,6 +1330,16 @@
 	}
 }
 
+.help-text-as-hint {
+	:deep(.v-messages) {
+		opacity: 1 !important;
+
+		.v-messages__message {
+			color: rgba(var(--v-theme-onSurface), var(--v-medium-emphasis-opacity)) !important;
+		}
+	}
+}
+
 .v-field {
 	position: relative;
 }
@@ -1497,12 +1478,6 @@
 	white-space: normal;
 }
 
-.hidden-label {
-	visibility: hidden;
-	position: absolute;
-	white-space: nowrap;
-}
-
 .sy-select--with-chips :deep(.v-field__input input) {
 	position: absolute;
 	z-index: -1;

package/src/components/Customs/Selects/SySelect/tests/SySelect.spec.ts

@@ -640,7 +640,7 @@ describe('SySelect.vue', () => {
 				wrapper.unmount()
 			})
 
-			it('ignore les errorMessages quand disableErrorHandling est true', () => {
+			it('Surcharge les errorMessages quand disableErrorHandling est true et que des messages sont passes', () => {
 				const wrapper = mount(SySelect, {
 					props: {
 						errorMessages: ['Erreur forcée'],
@@ -651,8 +651,8 @@ describe('SySelect.vue', () => {
 
 				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 				const instance = wrapper.vm as any
-				expect(instance.hasError).toBe(false)
-				expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+				expect(instance.hasError).toBe(true)
+				expect(wrapper.find('.v-messages__message').exists()).toBe(true)
 
 				wrapper.unmount()
 			})

package/src/components/Customs/Selects/SySelect/tests/SySelect.visual.cy.ts

@@ -0,0 +1,77 @@
+import SySelect from '../SySelect.vue'
+
+const defaultItems = [
+	{ text: 'Option A', value: 'a' },
+	{ text: 'Option B', value: 'b' },
+	{ text: 'Option C', value: 'c' },
+]
+
+describe('SySelect - Visual regression tests', () => {
+	it('displays the select by default', () => {
+		cy.mountWithVuetify(SySelect, {
+			props: {
+				items: defaultItems,
+				label: 'Choisir une option',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-select-default', cy.get('.v-text-field'))
+	})
+
+	it('displays the select with a selected value', () => {
+		cy.mountWithVuetify(SySelect, {
+			props: {
+				items: defaultItems,
+				label: 'Choisir une option',
+				modelValue: 'b',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-select-with-value', cy.get('.v-text-field'))
+	})
+
+	it('displays the select as required', () => {
+		cy.mountWithVuetify(SySelect, {
+			props: {
+				items: defaultItems,
+				label: 'Choisir une option',
+				required: true,
+				displayAsterisk: true,
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-select-required', cy.get('.v-text-field'))
+	})
+
+	it('displays the select with multiple selection and chips', () => {
+		cy.mountWithVuetify(SySelect, {
+			props: {
+				items: defaultItems,
+				label: 'Choisir plusieurs options',
+				multiple: true,
+				chips: true,
+				modelValue: ['a', 'c'],
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-select-multiple-chips', cy.get('.v-text-field'))
+	})
+
+	it('displays the select with clearable option', () => {
+		cy.mountWithVuetify(SySelect, {
+			props: {
+				items: defaultItems,
+				label: 'Choisir une option',
+				clearable: true,
+				modelValue: 'a',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-select-clearable', cy.get('.v-text-field'))
+	})
+})