@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 	import { computed, ref, watch } from 'vue'
 	import type { IconType, VariantStyle, ColorType } from './types'
+	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import {
 		mdiAlertOutline,
 		mdiCheck,
@@ -17,6 +18,9 @@
 			appendIcon?: IconType
 			prependInnerIcon?: IconType
 			appendInnerIcon?: IconType
+			prependTooltip?: string
+			appendTooltip?: string
+			tooltipLocation?: 'top' | 'bottom' | 'start' | 'end'
 			variantStyle?: VariantStyle
 			color?: ColorType
 			isClearable?: boolean
@@ -24,6 +28,8 @@
 			label?: string
 			required?: boolean
 			errorMessages?: string[] | null
+			warningMessages?: string[] | null
+			successMessages?: string[] | null
 			isReadOnly?: boolean
 			isActive?: boolean
 			baseColor?: string
@@ -66,6 +72,11 @@
 			width?: string | number
 			displayAsterisk?: boolean
 			noIcon?: boolean
+			customRules?: ValidationRule[]
+			customWarningRules?: ValidationRule[]
+			customSuccessRules?: ValidationRule[]
+			showSuccessMessages?: boolean
+			isValidateOnBlur?: boolean
 		}>(),
 		{
 			modelValue: undefined,
@@ -73,10 +84,15 @@
 			appendIcon: undefined,
 			appendInnerIcon: undefined,
 			prependInnerIcon: undefined,
+			prependTooltip: undefined,
+			appendTooltip: undefined,
+			tooltipLocation: 'top',
 			variantStyle: 'outlined',
 			color: 'primary',
 			label: 'custom label',
 			errorMessages: null,
+			warningMessages: null,
+			successMessages: null,
 			isReadOnly: false,
 			isClearable: false,
 			isActive: false,
@@ -97,7 +113,7 @@
 			hint: undefined,
 			id: undefined,
 			loading: false,
-			maxErrors: 2,
+			maxErrors: undefined,
 			maxWidth: undefined,
 			messages: undefined,
 			minWidth: undefined,
@@ -119,6 +135,11 @@
 			width: undefined,
 			displayAsterisk: false,
 			noIcon: false,
+			customRules: () => [],
+			customWarningRules: () => [],
+			customSuccessRules: () => [],
+			showSuccessMessages: true,
+			isValidateOnBlur: true,
 		},
 	)
 
@@ -131,27 +152,123 @@
 		calendar: mdiCalendar,
 	}
 
+	const emit = defineEmits([
+		'update:modelValue',
+		'clear',
+		'prepend-icon-click',
+		'append-icon-click',
+	])
+
 	const model = computed({
-		get: () => props.modelValue,
-		set: (value) => {
-			emit('update:model-value', value)
+		get() {
+			return props.modelValue
+		},
+		set(value) {
+			emit('update:modelValue', value)
 		},
 	})
 
 	const isBlurred = ref(false)
 
-	const hasError = computed(() => {
-		return (props.required && isBlurred.value && !model.value) || (props.errorMessages && props.errorMessages.length > 0)
+	// Initialisation du composable de validation
+	const validation = useValidation({
+		customRules: props.customRules,
+		warningRules: props.customWarningRules,
+		successRules: props.customSuccessRules,
+		showSuccessMessages: props.showSuccessMessages,
+		fieldIdentifier: props.label,
 	})
 
+	// Synchronisation des messages externes
+	watch(() => props.errorMessages, (newVal) => {
+		validation.errors.value = newVal || []
+	}, { immediate: true })
+
+	watch(() => props.warningMessages, (newVal) => {
+		validation.warnings.value = newVal || []
+	}, { immediate: true })
+
+	watch(() => props.successMessages, (newVal) => {
+		validation.successes.value = newVal || []
+	}, { immediate: true })
+
+	// Construction des règles de validation
+	const defaultRules = computed<ValidationRule[]>(() => props.required
+		? [{
+			type: 'required',
+			options: {
+				message: `Le champ ${props.label || 'ce champ'} est requis.`,
+				fieldIdentifier: props.label,
+			},
+		}]
+		: [],
+	)
+
+	const validateField = (value: string | number | null) => {
+		// Si le champ est vide et non requis, on ne fait pas de validation
+		if (!value && !props.required) {
+			validation.clearValidation()
+			return true
+		}
+
+		const result = validation.validateField(
+			value,
+			[...defaultRules.value, ...props.customRules],
+			props.customWarningRules,
+		)
+
+		return !result.hasError
+	}
+
+	const validateOnSubmit = () => {
+		isBlurred.value = true
+		return validateField(model.value ?? null)
+	}
+
 	const checkErrorOnBlur = () => {
 		isBlurred.value = true
+		validateField(model.value ?? null)
+		emit('update:modelValue', model.value)
 	}
 
+	watch(model, (newValue) => {
+		if (!props.isValidateOnBlur) {
+			validateField(newValue ?? null)
+		}
+		if (props.isClearable && newValue === '') {
+			emit('clear')
+		}
+	})
+
+	// Computed pour l'affichage des états
+	const hasError = computed(() => validation.hasError.value)
+	const hasWarning = computed(() => validation.hasWarning.value)
+	const hasSuccess = computed(() => validation.hasSuccess.value)
+
+	const errors = computed(() => validation.errors.value)
+	const warnings = computed(() => validation.warnings.value)
+	const successes = computed(() => validation.successes.value)
+
+	// Computed pour les icônes
 	const appendInnerIconColor = computed(() => {
-		return props.appendInnerIcon === 'error' || props.appendInnerIcon === 'success' || props.appendInnerIcon === 'warning'
-			? props.appendInnerIcon
-			: 'black'
+		if (props.appendInnerIcon === 'error') return 'error'
+		if (props.appendInnerIcon === 'success') return 'success'
+		return 'rgba(0, 0, 0, 1)'
+	})
+
+	const handlePrependIconClick = () => {
+		emit('prepend-icon-click')
+	}
+
+	const handleAppendIconClick = () => {
+		emit('append-icon-click')
+	}
+
+	const validationIcon = computed(() => {
+		if (hasError.value) return ICONS['error']
+		if (hasWarning.value) return ICONS['warning']
+		if (hasSuccess.value) return ICONS['success']
+		return null
 	})
 
 	const isShouldDisplayAsterisk = computed(() => {
@@ -169,16 +286,10 @@
 		opacity: '1',
 	}
 
-	const emit = defineEmits(['update:model-value', 'clear', 'prepend-icon-click', 'append-icon-click'])
-
-	watch(model, (newValue) => {
-		if (props.isClearable && newValue === '') {
-			emit('clear')
-		}
-	})
-
 	defineExpose({
-		appendInnerIconColor,
+		validation,
+		validateOnSubmit,
+		checkErrorOnBlur,
 	})
 </script>
 
@@ -187,6 +298,7 @@
 		:id="props.id"
 		v-model="model"
 		:active="props.isActive"
+		:title="props.label"
 		:aria-label="props.label"
 		:base-color="props.baseColor"
 		:bg-color="props.bgColor"
@@ -200,8 +312,8 @@
 		:dirty="props.isDirty"
 		:disabled="props.isDisabled"
 		:display-asterisk="isShouldDisplayAsterisk"
-		:error="props.isOnError"
-		:error-messages="props.errorMessages"
+		:error="hasError"
+		:error-messages="errors"
 		:flat="props.isFlat"
 		:focused="props.isFocused"
 		:hide-details="props.areDetailsHidden"
@@ -211,7 +323,7 @@
 		:loading="props.loading"
 		:max-errors="props.maxErrors"
 		:max-width="props.maxWidth"
-		:messages="props.messages"
+		:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
 		:min-width="props.minWidth"
 		:name="props.name"
 		:no-icon="props.noIcon"
@@ -225,7 +337,6 @@
 		:reverse="props.isReversed"
 		:role="props.role"
 		:rounded="props.rounded"
-		:rules="props.required ? ['Le champ est requis.'] : []"
 		:single-line="props.isOnSingleLine"
 		:suffix="props.suffix"
 		:theme="props.theme"
@@ -233,33 +344,73 @@
 		:type="props.type"
 		:variant="props.variantStyle"
 		:width="props.width"
+		:class="{
+			'error-field': hasError,
+			'warning-field': hasWarning,
+			'success-field': hasSuccess,
+			'basic-field': !hasError && !hasWarning && !hasSuccess
+		}"
 		@blur="checkErrorOnBlur"
 	>
 		<template
-			v-if="props.prependIcon && !props.noIcon"
+			v-if="props.prependIcon || props.prependTooltip"
 			#prepend
 		>
 			<slot name="prepend">
+				<template v-if="props.prependTooltip">
+					<VTooltip
+						:text="props.prependTooltip"
+						:location="props.tooltipLocation"
+					>
+						<template #activator="{ props: tooltipProps }">
+							<VIcon
+								v-bind="tooltipProps"
+								:aria-label="props.label ? `${props.label} - info` : 'Info'"
+								:color="appendInnerIconColor"
+								:icon="ICONS.info"
+								role="button"
+							/>
+						</template>
+					</VTooltip>
+				</template>
 				<VIcon
+					v-else-if="props.prependIcon"
 					:aria-label="props.label ? `${props.label} - bouton ${props.prependIcon}` : `Bouton ${props.prependIcon}`"
 					:color="appendInnerIconColor"
 					:icon="ICONS[props.prependIcon]"
 					role="button"
-					@click="$emit('prepend-icon-click')"
+					@click="handlePrependIconClick"
 				/>
 			</slot>
 		</template>
 		<template
-			v-if="props.appendIcon && !props.noIcon"
+			v-if="props.appendIcon || props.appendTooltip"
 			#append
 		>
 			<slot name="append">
+				<template v-if="props.appendTooltip">
+					<VTooltip
+						:text="props.appendTooltip"
+						:location="props.tooltipLocation"
+					>
+						<template #activator="{ props: tooltipProps }">
+							<VIcon
+								v-bind="tooltipProps"
+								:aria-label="props.label ? `${props.label} - info` : 'Info'"
+								:color="appendInnerIconColor"
+								:icon="ICONS.info"
+								role="button"
+							/>
+						</template>
+					</VTooltip>
+				</template>
 				<VIcon
+					v-else-if="props.appendIcon"
 					:aria-label="props.label ? `${props.label} - bouton ${props.appendIcon}` : `Bouton ${props.appendIcon}`"
 					:color="appendInnerIconColor"
 					:icon="ICONS[props.appendIcon]"
 					role="button"
-					@click="$emit('append-icon-click')"
+					@click="handleAppendIconClick"
 				/>
 			</slot>
 		</template>
@@ -280,16 +431,16 @@
 		</template>
 		<template #append-inner>
 			<slot name="append-inner">
-				<VIcon v-if="hasError && !props.appendInnerIcon">
-					{{ mdiInformation }}
-				</VIcon>
+				<VIcon
+					v-if="validationIcon && !props.appendInnerIcon"
+					:icon="validationIcon"
+				/>
 				<VIcon
 					v-if="props.appendInnerIcon && !props.noIcon"
-					:aria-label="props.label ? `${props.label} - bouton ${props.appendInnerIcon}` : `Bouton ${props.appendInnerIcon}`"
-					:class="{ 'error-icon': props.appendInnerIcon === 'error' }"
 					:color="appendInnerIconColor"
-					:icon="ICONS[props.appendInnerIcon]"
-				/>
+				>
+					{{ ICONS[props.appendInnerIcon] }}
+				</VIcon>
 			</slot>
 		</template>
 		<template #details>
@@ -297,3 +448,78 @@
 		</template>
 	</VTextField>
 </template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+:deep(.v-field__input input::placeholder),
+:deep(input.v-field__input::placeholder),
+:deep(textarea.v-field__input::placeholder) {
+	opacity: 0;
+}
+
+.warning-field {
+	:deep(.v-input__details > .v-icon),
+	:deep(.v-input__prepend > .v-icon),
+	:deep(.v-input__append > .v-icon) {
+		opacity: 1 !important;
+	}
+
+	:deep(.v-field) {
+		color: tokens.$colors-border-warning !important;
+
+		.v-field__outline {
+			color: tokens.$colors-border-warning !important;
+		}
+	}
+
+	:deep(.v-messages) {
+		opacity: 1 !important;
+
+		.v-messages__message {
+			color: tokens.$colors-border-warning !important;
+		}
+	}
+}
+
+.error-field {
+	:deep(.v-input__control),
+	:deep(.v-messages__message) {
+		color: tokens.$colors-text-error !important;
+	}
+
+	.v-field--active & {
+		color: tokens.$colors-border-error !important;
+	}
+}
+
+.success-field {
+	:deep(.v-input__details > .v-icon),
+	:deep(.v-input__prepend > .v-icon),
+	:deep(.v-input__append > .v-icon) {
+		opacity: 1 !important;
+	}
+
+	:deep(.v-field) {
+		color: tokens.$colors-border-success !important;
+
+		.v-field__outline {
+			color: tokens.$colors-border-success !important;
+		}
+	}
+
+	:deep(.v-messages) {
+		opacity: 1 !important;
+
+		.v-messages__message {
+			color: tokens.$colors-border-success !important;
+		}
+	}
+}
+
+.basic-field {
+	:deep(.v-icon__svg) {
+		fill: rgb(0 0 0 / 100%);
+	}
+}
+</style>

package/src/components/Customs/SyTextField/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/Customs/SyTextField/Usages.stories.ts

@@ -0,0 +1,41 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Formulaires/SyTextField/Usages',
+}
+
+const itemsToDo = [
+	'Utiliser un libellé clair et concis.',
+	'Indiquer les erreurs en temps réel avec un message explicite (si possible).',
+	'Respecter un bon constraste entre texte et le fond pour la lisibilité.',
+]
+
+const itemsNotToDo = [
+	'Utiliser un "input field" simple quand une version spécifique est disponible (phone field, NIR Field).',
+	'L\'utiliser lorsque le texte à saisir est long. Utilisez plutôt le composant textarea.',
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}