@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/SyTextArea/SyTextArea.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
-	import { computed, ref, toRef, watch } from 'vue'
+	import { computed, nextTick, ref, toRef, watch } from 'vue'
+	import { mdiCloseCircle } from '@mdi/js'
 	import type { VTextarea } from 'vuetify/components'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 	import useTextActions from './useTextActions'
-	import { useDefaultValidationRules, type TextareaRule as Rule } from './useDefaultValidationRules'
-	import { useValidation, validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
-	import type { ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
+	import { useSyTextAreaValidation } from './composables/useSyTextAreaValidation'
+	import { validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+	import { useValidatable } from '@/composables/validation/useValidatable'
+	import { locales } from './locales'
 
 	const props = withDefaults(defineProps<{
+		uniqueId: string
+		counter?: boolean | number | string
 		modelValue?: string
 		trim?: boolean
 		replaceTabs?: number
-		rules?: Array<Rule>
 		required?: boolean
 		maxLines?: number
 		autoWrap?: number
@@ -20,11 +24,15 @@
 		color?: string
 		label: string
 		bgColor?: string
+		clearable?: boolean
+		helpText?: string
+		hideDetails?: boolean
+		displayAsterisk?: boolean
 	} & FieldValidationProps>(), {
 		modelValue: '',
 		trim: false,
 		replaceTabs: undefined,
-		rules: () => [],
+		counter: false,
 		maxLines: undefined,
 		autoWrap: undefined,
 		normalize: false,
@@ -32,24 +40,52 @@
 		variant: 'outlined',
 		color: 'primary',
 		bgColor: 'white',
+		clearable: false,
+		helpText: '',
+		hideDetails: false,
+		displayAsterisk: false,
 		...validationPropsDefaults,
 	})
 
 	const emits = defineEmits<{
 		(e: 'update:modelValue', value: string): void
+		(e: 'clear'): void
 	}>()
 
 	const textAreaRef = ref<VTextarea | null>(null)
 	const hasInteracted = ref(false)
-	const focused = ref(false)
 
 	const internalValue = ref(props.modelValue)
+
+	const { changeActions, blurActions } = useTextActions(textAreaRef, {
+		trim: toRef(props, 'trim'),
+		replaceTabs: toRef(props, 'replaceTabs'),
+		autoWrap: toRef(props, 'autoWrap'),
+		normalize: toRef(props, 'normalize'),
+	})
+
+	// Applique les changeActions et blurActions sans mettre hasInteracted à true (pour les changements externes)
+	function applyExternalValue(value: string) {
+		let processedValue = value
+		// Applique d'abord les changeActions (replaceTabs, normalize)
+		changeActions.value.forEach((action) => {
+			processedValue = action(processedValue)
+		})
+		// Puis les blurActions (trim, autoWrap)
+		blurActions.value.forEach((action) => {
+			processedValue = action(processedValue)
+		})
+		return processedValue
+	}
+
 	watch(
 		() => props.modelValue,
 		(newValue) => {
 			if (newValue !== internalValue.value) {
-				execValueChange(newValue)
-				execBlurChange()
+				const processedValue = applyExternalValue(newValue)
+				if (processedValue !== internalValue.value) {
+					internalValue.value = processedValue
+				}
 			}
 		},
 	)
@@ -62,13 +98,6 @@
 		},
 	)
 
-	const { changeActions, blurActions } = useTextActions(textAreaRef, {
-		trim: toRef(props, 'trim'),
-		replaceTabs: toRef(props, 'replaceTabs'),
-		autoWrap: toRef(props, 'autoWrap'),
-		normalize: toRef(props, 'normalize'),
-	})
-
 	function execValueChange(value: string) {
 		changeActions.value.forEach((action) => {
 			value = action(value)
@@ -88,103 +117,233 @@
 		internalValue.value = value
 	}
 
-	const { vuetifyRules: defaultVuetifyRules, customRules: defaultCustomRules } = useDefaultValidationRules({
-		required: toRef(props, 'required'),
-		maxLines: toRef(props, 'maxLines'),
-		hasInteracted,
+	const {
+		focused,
+		validate,
+		clearValidation,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+		validationIcon,
+		mergedVuetifyRules,
+	} = useSyTextAreaValidation(props, { internalValue, hasInteracted })
+
+	const computedLabel = computed(() =>
+		props.displayAsterisk && props.required ? `${props.label} *` : props.label,
+	)
+
+	const hasMessages = computed(() => hasError.value || hasWarning.value || hasSuccess.value)
+
+	const validationIconColor = computed(() => {
+		if (hasError.value) return 'error'
+		if (hasWarning.value) return 'onWarningVariant'
+		if (hasSuccess.value) return 'onSuccessVariant'
+		return 'rgb(var(--v-theme-onSurface))'
 	})
 
-	const mergedCustomRules = computed<SyValidationRule[]>(() => [
-		...defaultCustomRules.value,
-		...(props.customRules || []),
-	])
-
-	const mergedVuetifyRules = computed<Rule[]>(() => [
-		...(props.rules || []),
-		...defaultVuetifyRules.value,
-	])
-
-	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
-		modelValue: internalValue,
-		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: mergedVuetifyRules,
-		customRules: mergedCustomRules,
-		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,
+	const counter = computed(() => props.counter === false ? undefined : props.counter)
+
+	const showClear = computed(() =>
+		props.clearable && !props.disabled && !props.readonly && !!internalValue.value,
+	)
+
+	function clearField() {
+		internalValue.value = ''
+		clearValidation()
+		hasInteracted.value = false
+		emits('clear')
+	}
+
+	const displayMessages = computed(() => {
+		if (hasError.value) return errors.value
+		if (hasWarning.value) return warnings.value
+		if (hasSuccess.value) return successes.value
+		if (props.helpText && !props.hideDetails) return [props.helpText]
+		return []
 	})
 
+	const validateOnSubmit = async () => {
+		hasInteracted.value = true
+		await nextTick()
+		return validate()
+	}
+
+	useValidatable(validateOnSubmit, clearValidation)
+
 	defineExpose({
-		validateOnSubmit: validate,
+		validateOnSubmit,
+		clearField,
+		clearValidation,
 	})
 
 </script>
 
 <template>
-	<VTextarea
-		ref="textAreaRef"
-		:model-value="internalValue"
-		:variant="variant"
-		:color="color"
-		:bg-color="props.bgColor"
-		:error="hasError"
-		:error-messages="errors"
-		:class="{
-			'success-field': hasSuccess && !hasError && !hasWarning,
-			'warning-field': hasWarning && !hasError,
-			'error-field': hasError,
-		}"
-		:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess ? successes : []))"
-		:max-errors="props.maxErrors"
-		:disabled="props.disabled"
-		:readonly="props.readonly"
-		:validate-on="validateOn"
-		:rules="props.useVuetifyValidation ? mergedVuetifyRules : undefined"
-		:label="label"
-		:aria-label="label"
-		:required="required"
-		:aria-required="required ? 'true' : undefined"
-		@update:model-value="execValueChange"
-		@update:focused="(e: boolean) => { focused = e; if (!e) execBlurChange() }"
-	/>
+	<div class="sy-textarea">
+		<VTextarea
+			:id="uniqueId"
+			ref="textAreaRef"
+			:model-value="internalValue"
+			:variant="variant"
+			:color="color"
+			:bg-color="props.bgColor"
+			:counter="counter"
+			:error="hasError"
+			:error-messages="errors"
+			:class="{
+				'success-field': hasSuccess && !hasError && !hasWarning,
+				'warning-field': hasWarning && !hasError,
+				'error-field': hasError,
+			}"
+			:messages="displayMessages"
+			:max-errors="props.maxErrors"
+			:disabled="props.disabled"
+			:readonly="props.readonly"
+			:validate-on="validateOn"
+			:rules="props.useVuetifyValidation ? mergedVuetifyRules : undefined"
+			:label="computedLabel"
+			:aria-label="computedLabel"
+			:required="required"
+			:aria-required="required ? 'true' : undefined"
+			:hide-details="hideDetails && !hasMessages"
+			@update:model-value="execValueChange"
+			@update:focused="(e: boolean) => { focused = e; if (!e) execBlurChange() }"
+		/>
+		<button
+			v-if="showClear"
+			type="button"
+			class="sy-textarea__clear-button"
+			:aria-label="locales.clearField"
+			@click="clearField"
+		>
+			<SyIcon
+				:icon="mdiCloseCircle"
+				class="sy-textarea__clear-icon"
+				:decorative="true"
+			/>
+		</button>
+		<SyIcon
+			v-if="validationIcon"
+			class="sy-textarea__state-icon"
+			:icon="validationIcon"
+			:color="validationIconColor"
+			:decorative="true"
+		/>
+	</div>
 </template>
 
 <style lang="scss" scoped>
+.sy-textarea {
+	position: relative;
+}
+
+.sy-textarea__state-icon {
+	position: absolute;
+	top: 12px;
+	right: 12px;
+	pointer-events: none;
+	z-index: 1;
+}
+
+/* stylelint-disable selector-class-pattern */
+.text-onWarningVariant.sy-textarea__state-icon,
+.text-onSuccessVariant.sy-textarea__state-icon {
+	opacity: 0.6;
+}
+/* stylelint-enable selector-class-pattern */
+
+.sy-textarea__clear-button {
+	position: absolute;
+	top: 12px;
+	right: 12px;
+	background: transparent;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1;
+}
+
+.sy-textarea__clear-icon {
+	color: rgb(var(--v-theme-iconBase)) !important;
+	opacity: var(--v-medium-emphasis-opacity);
+
+	&:hover {
+		opacity: 1;
+	}
+}
+
+.sy-textarea:has(.sy-textarea__state-icon) .sy-textarea__clear-button {
+	right: 40px;
+}
+
+.sy-textarea:has(.sy-textarea__state-icon),
+.sy-textarea:has(.sy-textarea__clear-button) {
+	:deep(.v-field__input) {
+		padding-right: 36px;
+	}
+}
+
+.sy-textarea:has(.sy-textarea__state-icon):has(.sy-textarea__clear-button) {
+	:deep(.v-field__input) {
+		padding-right: 68px;
+	}
+}
+
 .success-field {
+	:deep(.v-field) {
+		color: rgb(var(--v-theme-success)) !important;
+
+		--v-medium-emphasis-opacity: 1;
+	}
+
 	:deep(.v-field__outline) {
 		--v-field-border-opacity: 1;
 
-		color: rgb(var(--v-theme-success));
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
+	}
+
+	:deep(.v-label.v-field-label) {
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
+	}
+
+	:deep(.v-messages) {
+		opacity: 1 !important;
 	}
 
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-success));
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 	}
 }
 
 .warning-field {
+	:deep(.v-field) {
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
+
+		--v-medium-emphasis-opacity: 1;
+	}
+
 	:deep(.v-field__outline) {
 		--v-field-border-opacity: 1;
 
-		color: rgb(var(--v-theme-borderWarning));
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
+	}
+
+	:deep(.v-label.v-field-label) {
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
+	}
+
+	:deep(.v-messages) {
+		opacity: 1 !important;
 	}
 
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-borderWarning));
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
 	}
 }
 </style>

package/src/components/SyTextArea/composables/useSyTextAreaValidation.ts

@@ -0,0 +1,81 @@
+import { computed, ref } from 'vue'
+import { mdiAlertCircle, mdiAlertOutline, mdiCheck } from '@mdi/js'
+import type { Ref } from 'vue'
+import { useDefaultValidationRules } from '../useDefaultValidationRules'
+import { useValidation, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+import type { ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
+
+export function useSyTextAreaValidation(
+	props: FieldValidationProps & { maxLines?: number },
+	{
+		internalValue,
+		hasInteracted,
+	}: {
+		internalValue: Ref<string>
+		hasInteracted: Ref<boolean>
+	},
+) {
+	const focused = ref(false)
+
+	const { vuetifyRules: defaultVuetifyRules, customRules: defaultCustomRules } = useDefaultValidationRules({
+		required: computed(() => props.required ?? false),
+		maxLines: computed(() => props.maxLines),
+		hasInteracted,
+	})
+
+	const mergedCustomRules = computed<SyValidationRule[]>(() => [
+		...defaultCustomRules.value,
+		...(props.customRules ?? []),
+	])
+
+	const mergedVuetifyRules = computed(() => [
+		...(props.rules ?? []),
+		...defaultVuetifyRules.value,
+	])
+
+	const { validate, clearValidation, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
+		modelValue: internalValue,
+		readonly: computed(() => props.readonly ?? false),
+		disabled: computed(() => props.disabled ?? false),
+		required: computed(() => props.required ?? false),
+		isValidateOnBlur: computed(() => props.isValidateOnBlur ?? true),
+		showSuccessMessages: computed(() => props.showSuccessMessages ?? false),
+		disableErrorHandling: computed(() => props.disableErrorHandling ?? false),
+		useVuetifyValidation: computed(() => props.useVuetifyValidation ?? false),
+		label: computed(() => props.label ?? ''),
+		rules: mergedVuetifyRules,
+		customRules: mergedCustomRules,
+		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,
+		mergedVuetifyRules,
+	}
+}

package/src/components/SyTextArea/locales.ts

@@ -1,4 +1,5 @@
 export const locales = {
 	required: 'Ce champ est requis',
 	maxLines: (maxLines: number) => `Ce champ ne peut pas dépasser ${maxLines} lignes`,
+	clearField: 'Effacer le champ',
 }

package/src/components/SyTextArea/tests/SyTextArea.a11y.spec.ts

@@ -10,6 +10,8 @@ describe('SyTextArea – accessibility (axe)', () => {
 	it('has no obvious axe violations with default props', async () => {
 		const wrapper = mount(SyTextArea, {
 			props: {
+				uniqueId: 'textarea-1',
+				counter: 255,
 				label: 'Description',
 			},
 			modelValue: '',
@@ -24,6 +26,8 @@ describe('SyTextArea – accessibility (axe)', () => {
 	it('has no obvious axe violations with value', async () => {
 		const wrapper = mount(SyTextArea, {
 			props: {
+				uniqueId: 'textarea-1',
+				counter: 255,
 				label: 'Description',
 			},
 			modelValue: 'Ceci est une description',
@@ -38,6 +42,8 @@ describe('SyTextArea – accessibility (axe)', () => {
 	it('has no obvious axe violations with required field', async () => {
 		const wrapper = mount(SyTextArea, {
 			props: {
+				uniqueId: 'textarea-1',
+				counter: 255,
 				label: 'Description',
 				required: true,
 			},
@@ -53,6 +59,8 @@ describe('SyTextArea – accessibility (axe)', () => {
 	it('has no obvious axe violations with error messages', async () => {
 		const wrapper = mount(SyTextArea, {
 			props: {
+				uniqueId: 'textarea-1',
+				counter: 255,
 				label: 'Description',
 				required: true,
 			},
@@ -71,6 +79,8 @@ describe('SyTextArea – accessibility (axe)', () => {
 	it('has no obvious axe violations with max lines constraint', async () => {
 		const wrapper = mount(SyTextArea, {
 			props: {
+				uniqueId: 'textarea-1',
+				counter: 255,
 				label: 'Description',
 				maxLines: 3,
 			},
@@ -89,6 +99,8 @@ describe('SyTextArea – accessibility (axe)', () => {
 	it('has no obvious axe violations with custom rules', async () => {
 		const wrapper = mount(SyTextArea, {
 			props: {
+				uniqueId: 'textarea-1',
+				counter: 255,
 				label: 'Description',
 				rules: [(value: string) => value.length >= 10 || 'Minimum 10 caractères'],
 			},
@@ -107,6 +119,8 @@ describe('SyTextArea – accessibility (axe)', () => {
 	it('has no obvious axe violations with different variant', async () => {
 		const wrapper = mount(SyTextArea, {
 			props: {
+				uniqueId: 'textarea-1',
+				counter: 255,
 				label: 'Description',
 				variant: 'filled',
 			},
@@ -122,6 +136,8 @@ describe('SyTextArea – accessibility (axe)', () => {
 	it('has no obvious axe violations with custom color', async () => {
 		const wrapper = mount(SyTextArea, {
 			props: {
+				uniqueId: 'textarea-1',
+				counter: 255,
 				label: 'Description',
 				color: 'secondary',
 			},
@@ -137,6 +153,8 @@ describe('SyTextArea – accessibility (axe)', () => {
 	it('has no obvious axe violations with background color', async () => {
 		const wrapper = mount(SyTextArea, {
 			props: {
+				uniqueId: 'textarea-1',
+				counter: 255,
 				label: 'Description',
 				bgColor: 'grey-lighten-2',
 			},