@cnamts/synapse 0.0.9-alpha → 0.0.11-alpha

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

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 	import { computed, ref, watch } from 'vue'
 	import type { IconType, VariantStyle, ColorType } from './types'
+	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
+	import type { RuleOptions } from '@/composables/rules/useFieldValidation'
 	import {
 		mdiAlertOutline,
 		mdiCheck,
@@ -24,6 +26,8 @@
 			label?: string
 			required?: boolean
 			errorMessages?: string[] | null
+			warningMessages?: string[] | null
+			successMessages?: string[] | null
 			isReadOnly?: boolean
 			isActive?: boolean
 			baseColor?: string
@@ -66,6 +70,9 @@
 			width?: string | number
 			displayAsterisk?: boolean
 			noIcon?: boolean
+			customRules?: { type: string, options: RuleOptions }[]
+			customWarningRules?: { type: string, options: RuleOptions }[]
+			showSuccessMessages?: boolean
 		}>(),
 		{
 			modelValue: undefined,
@@ -77,6 +84,8 @@
 			color: 'primary',
 			label: 'custom label',
 			errorMessages: null,
+			warningMessages: null,
+			successMessages: null,
 			isReadOnly: false,
 			isClearable: false,
 			isActive: false,
@@ -119,6 +128,9 @@
 			width: undefined,
 			displayAsterisk: false,
 			noIcon: false,
+			customRules: () => [],
+			customWarningRules: () => [],
+			showSuccessMessages: true,
 		},
 	)
 
@@ -139,21 +151,136 @@
 	})
 
 	const isBlurred = ref(false)
+	const errors = ref<string[]>([])
+	const warnings = ref<string[]>([])
+	const successes = ref<string[]>([])
 
-	const hasError = computed(() => {
-		return (props.required && isBlurred.value && !model.value) || (props.errorMessages && props.errorMessages.length > 0)
+	watch(() => props.errorMessages, (newVal) => {
+		errors.value = newVal || []
+	}, { immediate: true })
+
+	watch(() => props.warningMessages, (newVal) => {
+		warnings.value = newVal || []
+	}, { immediate: true })
+
+	watch(() => props.successMessages, (newVal) => {
+		successes.value = newVal || []
+	}, { immediate: true })
+
+	type Rule = { type: string, options?: RuleOptions }
+
+	const customRules = ref<Rule[]>(props.customRules || [])
+	const customWarningRules = ref<Rule[]>(props.customWarningRules || [])
+
+	const { generateRules } = useFieldValidation()
+
+	const validationRules = computed(() => {
+		const defaultRules: Rule[] = props.required
+			? [{
+				type: 'required',
+				options: {
+					message: `Le champ ${props.label || 'ce champ'} est requis.`,
+					fieldIdentifier: props.label,
+				},
+			}]
+			: []
+
+		return generateRules([...defaultRules, ...customRules.value])
+	})
+
+	const warningValidationRules = computed(() => {
+		const rulesWithWarning = customWarningRules.value.map(rule => ({
+			type: rule.type,
+			options: { ...(rule.options || {}), isWarning: true },
+		}))
+		return generateRules(rulesWithWarning)
 	})
 
+	const validateField = (value: string | number | null) => {
+		errors.value = []
+		warnings.value = []
+		successes.value = []
+
+		// Si le champ est vide et non requis, on ne fait pas de validation
+		if (!value && !props.required) {
+			return true
+		}
+
+		let hasSuccess = false
+
+		// Validation des règles standard
+		validationRules.value.forEach((rule) => {
+			const result = rule(value)
+			if (result.error) {
+				errors.value.push(result.error)
+			}
+			else if (props.showSuccessMessages && result.success && !errors.value.length && !hasSuccess) {
+				successes.value = [result.success]
+				hasSuccess = true
+			}
+		})
+
+		// Si on a des erreurs, on n'affiche pas les warnings ni les succès
+		if (errors.value.length) {
+			warnings.value = []
+			successes.value = []
+			return false
+		}
+
+		// Validation des règles d'avertissement
+		warningValidationRules.value.forEach((rule) => {
+			const result = rule(value)
+			if (result.warning) {
+				warnings.value.push(result.warning)
+			}
+		})
+
+		// Si on a des warnings, on n'affiche pas les succès
+		if (warnings.value.length) {
+			successes.value = []
+		}
+
+		return true
+	}
+
+	const validateOnSubmit = () => {
+		isBlurred.value = true
+		// On s'assure que model.value n'est pas undefined
+		return validateField(model.value ?? null)
+	}
+
+	const hasError = computed(() => errors.value.length > 0)
+	const hasWarning = computed(() => warnings.value.length > 0)
+	const hasSuccess = computed(() => successes.value.length > 0 && !hasError.value && !hasWarning.value)
+
 	const checkErrorOnBlur = () => {
 		isBlurred.value = true
+		validateField(model.value ?? null)
 	}
 
+	watch(model, (newValue) => {
+		validateField(newValue ?? null)
+		if (props.isClearable && newValue === '') {
+			emit('clear')
+		}
+	})
+
 	const appendInnerIconColor = computed(() => {
+		if (hasError.value) return 'error'
+		if (hasWarning.value) return 'warning'
+		if (hasSuccess.value) return 'success'
 		return props.appendInnerIcon === 'error' || props.appendInnerIcon === 'success' || props.appendInnerIcon === 'warning'
 			? props.appendInnerIcon
 			: 'black'
 	})
 
+	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(() => {
 		return props.displayAsterisk && props.required
 	})
@@ -171,14 +298,12 @@
 
 	const emit = defineEmits(['update:model-value', 'clear', 'prepend-icon-click', 'append-icon-click'])
 
-	watch(model, (newValue) => {
-		if (props.isClearable && newValue === '') {
-			emit('clear')
-		}
-	})
-
 	defineExpose({
 		appendInnerIconColor,
+		validateOnSubmit,
+		errors,
+		warnings,
+		successes,
 	})
 </script>
 
@@ -200,8 +325,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 +336,7 @@
 		:loading="props.loading"
 		:max-errors="props.maxErrors"
 		:max-width="props.maxWidth"
-		:messages="props.messages"
+		:messages="hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : [])"
 		:min-width="props.minWidth"
 		:name="props.name"
 		:no-icon="props.noIcon"
@@ -225,7 +350,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,6 +357,11 @@
 		:type="props.type"
 		:variant="props.variantStyle"
 		:width="props.width"
+		:class="{
+			'error-field': hasError,
+			'warning-field': hasWarning,
+			'success-field': hasSuccess
+		}"
 		@blur="checkErrorOnBlur"
 	>
 		<template
@@ -280,16 +409,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 +426,72 @@
 		</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;
+		}
+	}
+}
+</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'],
+}

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

@@ -56,14 +56,15 @@ describe('SyTextField', () => {
 	})
 
 	it('matches snapshot', () => {
-		const wrapper = factory({
-			prependIcon: 'info',
-			appendIcon: 'success',
-			prependInnerIcon: 'warning',
-			appendInnerIcon: 'error',
-			variantStyle: 'filled',
-			isClearable: true,
-			showDivider: true,
+		const wrapper = mount(SyTextField, {
+			props: {
+				label: 'custom label',
+				modelValue: '',
+				errorMessages: ['Test error message'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
 		})
 
 		expect(wrapper.html()).toMatchSnapshot()

package/src/components/Customs/SyTextField/tests/__snapshots__/SyTextField.spec.ts.snap

@@ -1,58 +1,56 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SyTextField > matches snapshot 1`] = `
-"<div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
-  <div class="v-input__prepend"><i class="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="custom label - bouton info"></i>
-    <!---->
-  </div>
+"<div data-v-8f0b2baf="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--error v-text-field error-field">
+  <!---->
   <div class="v-input__control">
-    <div class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-filled v-theme--light v-locale--is-ltr">
+    <div class="v-field v-field--appended v-field--center-affix v-field--error v-field--prepended v-field--variant-outlined v-theme--light v-locale--is-ltr">
       <div class="v-field__overlay"></div>
       <div class="v-field__loader">
         <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
           <!---->
-          <div class="v-progress-linear__background bg-primary" style="opacity: NaN;"></div>
-          <div class="v-progress-linear__buffer bg-primary" style="opacity: NaN; width: 0%;"></div>
+          <div class="v-progress-linear__background bg-error" style="opacity: NaN;"></div>
+          <div class="v-progress-linear__buffer bg-error" style="opacity: NaN; width: 0%;"></div>
           <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
             <div class="v-progress-linear__indeterminate">
-              <div class="v-progress-linear__indeterminate long bg-primary"></div>
-              <div class="v-progress-linear__indeterminate short bg-primary"></div>
+              <div class="v-progress-linear__indeterminate long bg-error"></div>
+              <div class="v-progress-linear__indeterminate short bg-error"></div>
             </div>
           </transition-stub>
           <!---->
         </div>
       </div>
       <div class="v-field__prepend-inner">
-        <!----><i class="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16 mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="custom label - bouton warning"></i>
-        <hr class="v-divider v-divider--vertical v-theme--light text-primary mt-4 pa-1" style="height: 25px; border-right-width: 2px; --v-border-opacity: 1;" aria-orientation="vertical" role="separator">
+        <!---->
+        <!--v-if-->
+        <!--v-if-->
       </div>
-      <div class="v-field__field" data-no-activator=""><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-0">
-          <!---->custom label
-        </label><label class="v-label v-field-label" for="input-0">
+      <div class="v-field__field" data-no-activator="">
+        <!----><label class="v-label v-field-label" for="input-0">
           <!---->custom label
         </label>
-        <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" aria-label="custom label" display-asterisk="false" no-icon="false" class="v-field__input">
+        <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" aria-label="custom label" display-asterisk="false" no-icon="false" class="v-field__input" value="">
         <!---->
       </div>
-      <transition-stub name="expand-x-transition" appear="false" persisted="false" css="true">
-        <div class="v-field__clearable" style="display: none;"><i class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Clear custom label"></i></div>
-      </transition-stub>
-      <div class="v-field__append-inner">
-        <!--v-if--><i class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error error-icon" aria-hidden="true" aria-label="custom label - bouton error"></i>
+      <!---->
+      <div class="v-field__append-inner"><i data-v-8f0b2baf="" class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+        <!--v-if-->
         <!---->
       </div>
       <div class="v-field__outline">
-        <!---->
+        <div class="v-field__outline__start"></div>
+        <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-0">
+            <!---->custom label
+          </label></div>
+        <div class="v-field__outline__end"></div>
         <!---->
       </div>
     </div>
   </div>
-  <div class="v-input__append">
-    <!----><i class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="custom label - bouton success"></i>
-  </div>
+  <!---->
   <div id="input-0-messages" class="v-input__details" role="alert" aria-live="polite">
     <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
-      <!---->
+      <div class="v-messages__message">Test error message</div>
     </transition-group-stub>
     <!---->
   </div>

package/src/components/DatePicker/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />