@cnamts/synapse 1.0.26 → 1.1.0

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

@@ -4,7 +4,7 @@
 		inheritAttrs: false,
 	})
 	import { mdiAlertCircle, mdiAlertOutline, mdiCheck, mdiChevronDown, mdiClose, mdiCloseCircle, mdiInformationOutline } from '@mdi/js'
-	import { ref, watch, watchEffect, onMounted, onBeforeUnmount, computed, nextTick, useAttrs, toRef, type Ref } from 'vue'
+	import { ref, watch, watchEffect, onMounted, onBeforeUnmount, computed, nextTick, useAttrs } from 'vue'
 	import { useSySelectKeyboard } from './composables/useSySelectKeyboard'
 	import type { ColorType, IconType, VariantStyle } from '@/types/vuetifyTypes'
 	import type { VList, VTextField } from 'vuetify/components'
@@ -13,8 +13,8 @@
 	import IconSlot from '@/components/Common/IconSlot/IconSlot.vue'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 	import { locales } from './locales'
-	import type { ValidationRule } from '@/composables/validation/useValidation'
-	import { useValidation, validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+	import { validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+	import { useSySelectValidation } from './composables/useSySelectValidation'
 
 	export type ItemType = {
 		[key: string]: unknown
@@ -121,9 +121,9 @@
 
 	const iconColor = computed(() => {
 		if (hasError.value) return 'error'
-		if (hasWarning.value) return 'warning'
-		if (hasSuccess.value) return 'success'
-		return 'rgb(var(--v-theme-iconBase))'
+		if (hasWarning.value) return 'onWarningVariant'
+		if (hasSuccess.value) return 'onSuccessVariant'
+		return 'rgb(var(--v-theme-onSurface))'
 	})
 
 	const variant = computed(() => {
@@ -134,46 +134,11 @@
 	const isOpen = ref(false)
 	// Initialize selectedItem with props.modelValue or empty array for multiple mode
 	const selectedItem = ref<SelectItemValueType | SelectItemArrayType>(props.modelValue)
-	const focused = ref(false)
 	const menuMinWidth = ref<number | null>(null)
 
-	const defaultRules = computed<ValidationRule[]>(() => props.required
-		? [{
-			type: 'required',
-			options: {
-				message: `Le champ ${props.label || 'ce champ'} est requis.`,
-				fieldIdentifier: props.label,
-			},
-		}]
-		: [],
-	)
-
-	const { validate, clearValidation, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
-		modelValue: toRef(props, 'modelValue') as Ref<unknown>,
-		readonly: toRef(props, 'readonly'),
-		disabled: toRef(props, 'disabled'),
-		required: toRef(props, 'required'),
-		isValidateOnBlur: toRef(props, 'isValidateOnBlur'),
-		showSuccessMessages: toRef(props, 'showSuccessMessages'),
-		disableErrorHandling: toRef(props, 'disableErrorHandling'),
-		useVuetifyValidation: toRef(props, 'useVuetifyValidation'),
-		label: toRef(props, 'label'),
-		rules: toRef(props, 'rules'),
-		customRules: computed(() => [...defaultRules.value, ...(props.customRules ?? [])]),
-		customWarningRules: toRef(props, 'customWarningRules'),
-		customSuccessRules: toRef(props, 'customSuccessRules'),
-		errorMessages: toRef(props, 'errorMessages'),
-		warningMessages: toRef(props, 'warningMessages'),
-		successMessages: toRef(props, 'successMessages'),
-		hasErrorProp: toRef(props, 'hasError'),
-		hasWarningProp: toRef(props, 'hasWarning'),
-		hasSuccessProp: toRef(props, 'hasSuccess'),
-		maxErrors: toRef(props, 'maxErrors'),
-		focused: focused,
-	})
+	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[]>([])
@@ -223,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)
@@ -500,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
@@ -525,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)
@@ -567,14 +525,6 @@
 		return formattedErrorMessages.value || 'Le champ contient une erreur.'
 	})
 
-	const validationIcon = computed(() => {
-		if (props.useVuetifyValidation) return null
-		if (hasError.value) return mdiAlertCircle
-		if (hasWarning.value) return mdiAlertOutline
-		if (hasSuccess.value) return mdiCheck
-		return null
-	})
-
 	watch(() => props.modelValue, (newValue) => {
 		selectedItem.value = newValue
 	})
@@ -807,10 +757,6 @@
 	}
 
 	onMounted(() => {
-		if (labelRef.value) {
-			labelWidth.value = labelRef.value.offsetWidth + 64
-		}
-
 		nextTick(() => {
 			setupAriaAttributes()
 
@@ -916,7 +862,6 @@
 		else {
 			listElement.removeAttribute('aria-multiselectable')
 		}
-		listElement.setAttribute('aria-labelledby', overlayLabelId.value)
 	}
 
 	const focusInput = () => {
@@ -944,6 +889,14 @@
 			}
 		}
 
+		const onBlur = () => {
+			// Trigger blur validation only when focus truly leaves the component.
+			// Skip if the menu is open — focus is moving to the dropdown list, not exiting.
+			if (!isOpen.value) {
+				validate()
+			}
+		}
+
 		return {
 			...activatorProps,
 			onKeydown: undefined,
@@ -953,7 +906,8 @@
 				textInput.value = el
 				activatorProps.ref?.(el)
 			},
-			onFocus: onFocus,
+			onFocus,
+			onBlur,
 		}
 	}
 </script>
@@ -1006,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')),
@@ -1107,6 +1062,7 @@
 								:icon="validationIcon"
 								:decorative="true"
 								role="presentation"
+								width="24"
 							/>
 							<button
 								v-if="props.clearable && hasSelectionToClear"
@@ -1122,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"
@@ -1172,7 +1117,7 @@
 				@keydown.page-down.prevent="handlePageDownKey"
 				@click.stop
 			>
-				<div
+				<li
 					v-for="(item, index) in formattedItems"
 					:id="`option-${index}`"
 					:key="index"
@@ -1219,7 +1164,7 @@
 							</span>
 						</VListItemTitle>
 					</div>
-				</div>
+				</li>
 			</VList>
 		</VMenu>
 
@@ -1232,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"
@@ -1270,12 +1208,12 @@
 
 	:deep(.v-input__prepend > .v-icon__svg),
 	:deep(.v-input__append > .v-icon__svg) {
-		fill: rgb(var(--v-theme-iconBase));
+		fill: rgb(var(--v-theme-onSurface));
 	}
 
 	:deep(.v-input__prepend .v-icon:focus-visible),
 	:deep(.v-input__append .v-icon:focus-visible) {
-		outline: 2px solid rgb(var(--v-theme-borderAccentPrimary));
+		outline: 2px solid rgb(var(--v-theme-primary));
 		outline-offset: 2px;
 		opacity: 1;
 	}
@@ -1283,30 +1221,30 @@
 
 .warning-field {
 	:deep(.v-icon__svg) {
-		fill: rgb(var(--v-theme-textWarning)) !important;
+		fill: rgb(var(--v-theme-onWarningVariant)) !important;
 	}
 
 	:deep(.v-icon.arrow) {
-		color: rgb(var(--v-theme-iconBase)) !important;
+		color: rgb(var(--v-theme-primary)) !important;
 	}
 
 	:deep(.v-icon.arrow .v-icon__svg) {
-		fill: rgb(var(--v-theme-iconBase)) !important;
+		fill: rgb(var(--v-theme-primary)) !important;
 	}
 
 	:deep(.sy-select__clear-icon .v-icon__svg) {
-		fill: rgb(var(--v-theme-iconBase)) !important;
+		fill: rgb(var(--v-theme-primary)) !important;
 	}
 
 	:deep(.v-field) {
-		color: rgb(var(--v-theme-borderWarning)) !important;
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 
 		.v-field__outline {
 			--v-field-border-opacity: 1;
 
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			color: rgb(var(--v-theme-onWarningVariant)) !important;
 		}
 	}
 
@@ -1314,19 +1252,19 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			color: rgb(var(--v-theme-onWarningVariant)) !important;
 		}
 	}
 }
 
 .error-field {
 	:deep(.v-field) {
-		color: rgb(var(--v-theme-borderError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 
 		.v-field__outline {
 			--v-field-border-opacity: 1;
 
-			color: rgb(var(--v-theme-borderError)) !important;
+			color: rgb(var(--v-theme-error)) !important;
 		}
 	}
 
@@ -1334,45 +1272,45 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderError)) !important;
+			color: rgb(var(--v-theme-error)) !important;
 		}
 	}
 
 	:deep(.v-icon.arrow) {
-		color: rgb(var(--v-theme-iconSubdued)) !important;
+		color: rgb(var(--v-theme-onSurfaceVariant)) !important;
 	}
 
 	:deep(.v-icon.arrow .v-icon__svg) {
-		fill: rgb(var(--v-theme-iconSubdued)) !important;
+		fill: rgb(var(--v-theme-onSurfaceVariant)) !important;
 	}
 }
 
 .success-field {
 	:deep(.v-icon__svg) {
-		fill: rgb(var(--v-theme-textSuccess)) !important;
+		fill: rgb(var(--v-theme-onSuccessVariant)) !important;
 	}
 
 	:deep(.v-icon.arrow) {
-		color: rgb(var(--v-theme-iconBase)) !important;
+		color: rgb(var(--v-theme-onSurface)) !important;
 	}
 
 	:deep(.v-icon.arrow .v-icon__svg) {
-		fill: rgb(var(--v-theme-iconBase)) !important;
+		fill: rgb(var(--v-theme-onSurface)) !important;
 	}
 
 	:deep(.sy-select__clear-icon .v-icon__svg) {
-		fill: rgb(var(--v-theme-iconBase)) !important;
+		fill: rgb(var(--v-theme-onSurface)) !important;
 	}
 
 	:deep(.v-field) {
-		color: rgb(var(--v-theme-borderSuccess)) !important;
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 
 		.v-field__outline {
 			--v-field-border-opacity: 1;
 
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 
@@ -1380,15 +1318,25 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 }
 
 .basic-field {
 	:deep(.v-field--focused .v-field__outline) {
-		color: rgb(var(--v-theme-borderAccentPrimary)) !important;
+		color: rgb(var(--v-theme-primary)) !important;
+		opacity: 1 !important;
+	}
+}
+
+.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;
+		}
 	}
 }
 
@@ -1415,29 +1363,29 @@
 }
 
 .help-text {
-	color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+	color: rgba(var(--v-theme-onSurface), var(--v-medium-emphasis-opacity));
 	font-size: var(--v-fontSize-liensEtLibelles);
 	line-height: 1.2;
 }
 
 .help-text.text-disabled {
-	color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+	color: rgba(var(--v-theme-onSurface), var(--v-disabled-opacity));
 }
 
 .help-text-below {
-	color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+	color: rgba(var(--v-theme-onSurface), var(--v-medium-emphasis-opacity));
 	font-size: var(--v-fontSize-liensEtLibelles);
 	line-height: 1.2;
 }
 
 .help-text-below.text-disabled {
-	color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+	color: rgba(var(--v-theme-onSurface), var(--v-disabled-opacity));
 }
 
 /* Ensure focus styles match selection styles for keyboard navigation */
 .v-list-item:focus-visible,
 .v-list-item.keyboard-focused {
-	outline: 2px solid rgb(var(--v-theme-borderAccentPrimary));
+	outline: 2px solid rgb(var(--v-theme-primary));
 	outline-offset: -2px;
 	background-color: rgb(0 0 0 / 8%);
 }
@@ -1467,7 +1415,7 @@
 }
 
 .sy-select__clear-icon {
-	color: rgb(var(--v-theme-iconBase)) !important;
+	color: rgb(var(--v-theme-onSurface)) !important;
 	opacity: var(--v-medium-emphasis-opacity) !important;
 }
 
@@ -1512,7 +1460,7 @@
 
 .sy-select :deep(.v-field__input) {
 	opacity: 1;
-	color: rgb(var(--v-theme-iconBase)) !important;
+	color: rgb(var(--v-theme-onSurface)) !important;
 	cursor: pointer;
 	caret-color: transparent;
 	padding-right: 25px;
@@ -1530,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/composables/useSySelectKeyboard.ts

@@ -12,6 +12,7 @@ export interface UseSySelectKeyboardOptions {
 	getItemText: (item: unknown) => unknown
 	optionIdPrefix?: string
 	focusListItem?: boolean
+	skipInitialFocus?: Ref<boolean>
 }
 
 export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
@@ -23,6 +24,7 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 		getItemText,
 		optionIdPrefix = 'option',
 		focusListItem = true,
+		skipInitialFocus,
 	} = options
 
 	const getOptionId = (index: number) => `${optionIdPrefix}-${index}`
@@ -339,6 +341,7 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 	// Gérer l'ouverture et la fermeture de la liste
 	watch(isOpen, (open) => {
 		if (open) {
+			if (skipInitialFocus?.value) return
 			// À l'ouverture, restaurer le dernier focus ou initialiser au premier élément
 			nextTick(() => {
 				if (lastFocusedIndex.value >= 0 && lastFocusedIndex.value < formattedItems.value.length) {

package/src/components/Customs/Selects/SySelect/composables/useSySelectValidation.ts

@@ -0,0 +1,64 @@
+import { computed, ref } from 'vue'
+import { mdiAlertCircle, mdiAlertOutline, mdiCheck } from '@mdi/js'
+import { useValidation, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+import type { ValidationRule } from '@/composables/validation/useValidation'
+
+export function useSySelectValidation(props: FieldValidationProps & { modelValue?: unknown }) {
+	const focused = ref(false)
+
+	const defaultRules = computed<ValidationRule[]>(() => props.required
+		? [{
+				type: 'required',
+				options: {
+					message: `Le champ ${props.label || 'ce champ'} est requis.`,
+					fieldIdentifier: props.label,
+				},
+			}]
+		: [],
+	)
+
+	const { validate, clearValidation, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
+		modelValue: computed(() => props.modelValue),
+		readonly: computed(() => props.readonly ?? false),
+		disabled: computed(() => props.disabled ?? false),
+		required: computed(() => props.required ?? false),
+		isValidateOnBlur: computed(() => props.isValidateOnBlur ?? false),
+		showSuccessMessages: computed(() => props.showSuccessMessages ?? false),
+		disableErrorHandling: computed(() => props.disableErrorHandling ?? false),
+		useVuetifyValidation: computed(() => props.useVuetifyValidation ?? false),
+		label: computed(() => props.label ?? ''),
+		rules: computed(() => props.rules ?? []),
+		customRules: computed(() => [...defaultRules.value, ...(props.customRules ?? [])]),
+		customWarningRules: computed(() => props.customWarningRules ?? []),
+		customSuccessRules: computed(() => props.customSuccessRules ?? []),
+		errorMessages: computed(() => props.errorMessages ?? []),
+		warningMessages: computed(() => props.warningMessages ?? []),
+		successMessages: computed(() => props.successMessages ?? []),
+		hasErrorProp: computed(() => props.hasError ?? false),
+		hasWarningProp: computed(() => props.hasWarning ?? false),
+		hasSuccessProp: computed(() => props.hasSuccess ?? false),
+		maxErrors: computed(() => props.maxErrors ?? 1),
+		focused,
+	})
+
+	const validationIcon = computed(() => {
+		if (props.useVuetifyValidation) return null
+		if (hasError.value) return mdiAlertCircle
+		if (hasWarning.value) return mdiAlertOutline
+		if (hasSuccess.value) return mdiCheck
+		return null
+	})
+
+	return {
+		focused,
+		validate,
+		clearValidation,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+		validationIcon,
+	}
+}