@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

package/src/components/LangBtn/tests/__snapshots__/LangBtn.spec.ts.snap

@@ -1,11 +1,49 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`LangBtn > renders correctly 1`] = `
-"<div data-v-42678988="" id="lang-menu-id"><button data-v-42678988="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined vd-lang-btn" id="lang-menu-btn" aria-label="Choix de la langue. Actuellement Français" aria-haspopup="menu" aria-controls="lang-menu-id" aria-owns="lang-menu-id" aria-expanded="false"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-    <!----><span class="v-btn__content" data-no-activator="">Français <i data-v-42678988="" class="M7,10L12,15L17,10H7Z mdi v-icon notranslate v-theme--light v-icon--size-default ml-1" aria-hidden="true"></i></span>
+<div id="lang-menu-id">
+  <button
+    aria-controls="lang-menu-id"
+    aria-expanded="false"
+    aria-haspopup="menu"
+    aria-label="Choix de la langue. Actuellement Français"
+    aria-owns="lang-menu-id"
+    class="
+      text-primary
+      v-btn
+      v-btn--density-default
+      v-btn--size-default
+      v-btn--variant-outlined
+      v-theme--light
+      vd-lang-btn
+    "
+    id="lang-menu-btn"
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      Français
+      <i
+        aria-hidden="true"
+        class="
+          M7,10L12,15L17,10H7Z
+          mdi
+          ml-1
+          notranslate
+          v-icon
+          v-icon--size-default
+          v-theme--light
+        "
+      ></i>
+    </span>
     <!---->
     <!---->
   </button>
   <!---->
-</div>"
+</div>
 `;

package/src/components/LogoBrandSection/tests/__snapshots__/LogoBrandSection.spec.ts.snap

@@ -1,14 +1,61 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`LogoBrandSection > renders correctly 1`] = `
-"<div data-v-7f5c1754="" height="64px" class="vd-logo-brand-section d-flex"><a data-v-7f5c1754="" href="/" class="vd-home-link">
-    <logo-stub data-v-7f5c1754="" hidesignature="false" hideorganism="false" risquepro="false" avatar="false" dark="false" size="normal" class=""></logo-stub>
-  </a><svg data-v-7f5c1754="" width="22" height="64" fill="#0c419a" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 64" class="vd-divider">
-    <path data-v-7f5c1754="" d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z"></path>
+<div
+  class="
+    d-flex
+    vd-logo-brand-section
+  "
+  height="64px"
+>
+  <a
+    class="vd-home-link"
+    href="/"
+  >
+    <logo-stub
+    avatar="false"
+    class=""
+    dark="false"
+    hideorganism="false"
+    hidesignature="false"
+    risquepro="false"
+    size="normal"
+  ></logo-stub>
+  </a>
+  <svg
+    aria-hidden="true"
+    class="vd-divider"
+    fill="#0c419a"
+    focusable="false"
+    height="64"
+    role="img"
+    viewBox="0 0 22 64"
+    width="22"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z" />
   </svg>
-  <div data-v-7f5c1754="" class="vd-title-container d-flex justify-center flex-column text-primary">
-    <h1 data-v-7f5c1754="" class="vd-title text-caption text-md-subtitle-1 font-weight-medium">Service Title</h1>
-    <h2 data-v-7f5c1754="" class="vd-title text-caption">Service Sub Title</h2>
+  <div class="
+    d-flex
+    flex-column
+    justify-center
+    text-primary
+    vd-title-container
+  ">
+    <h1 class="
+      font-weight-medium
+      text-caption
+      text-md-subtitle-1
+      vd-title
+    ">
+      Service Title
+    </h1>
+    <h2 class="
+      text-caption
+      vd-title
+    ">
+      Service Sub Title
+    </h2>
   </div>
-</div>"
+</div>
 `;

package/src/components/MaintenancePage/tests/__snapshots__/MaintenancePage.spec.ts.snap

@@ -1,3 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`MaintenancePage > renders correctly 1`] = `"<error-page-stub data-v-25a0ed68="" pagetitle="Maintenance en cours" message="L’application n’est pas disponible pour le moment, veuillez nous excuser pour la gêne occasionnée." codeerrortext="Code d'erreur&nbsp;: " btnlink="/" hidebtn="false" no-btn=""></error-page-stub>"`;
+exports[`MaintenancePage > renders correctly 1`] = `
+<error-page-stub
+  btnlink="/"
+  codeerrortext="Code d'erreur : "
+  hidebtn="false"
+  message="L’application n’est pas disponible pour le moment, veuillez nous excuser pour la gêne occasionnée."
+  no-btn=""
+  pagetitle="Maintenance en cours"
+></error-page-stub>
+`;

package/src/components/NirField/NirField.stories.ts

@@ -21,6 +21,7 @@ const meta: Meta<typeof NirField> = {
 			table: {
 				type: {
 					summary: 'string',
+					detail: 'ex: 1840275123456 74',
 				},
 			},
 		},
@@ -164,7 +165,7 @@ const meta: Meta<typeof NirField> = {
 				},
 			},
 		},
-		isDisabled: {
+		disabled: {
 			description: 'Indique si le champ est désactivé.',
 			control: 'boolean',
 			default: false,
@@ -361,7 +362,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField  from '@cnamts/synapse'
+     import { NirField } from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -476,7 +477,7 @@ export const WithoutKey: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField  from '@cnamts/synapse'
+     import { NirField } from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -513,7 +514,7 @@ export const WithSuccessMessages: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField  from '@cnamts/synapse'
+     import { NirField } from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -524,6 +525,89 @@ export const WithSuccessMessages: Story = {
 	},
 }
 
+export const WithoutSuccessMessages: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Messages de succès
+
+Cette story illustre l'utilisation de la propriété \`showSuccessMessages\` qui permet de contrôler
+l'affichage des messages de succès lors de la validation. Par défaut, cette propriété est à \`true\`.
+
+Cela peut être utile pour réduire la verbosité de l'interface lorsque les messages de succès
+ne sont pas nécessaires dans certains contextes.
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <!-- Champ avec messages de succès (par défaut) -->
+  <NirField
+    v-model="value"
+    label="NIR avec messages de succès"
+    required
+  />
+
+  <!-- Champ sans messages de succès -->
+  <NirField
+    v-model="value"
+    label="NIR sans messages de succès"
+    required
+    :showSuccessMessages="false"
+  />
+</template>`,
+			},
+		],
+	},
+	render: () => ({
+		components: { NirField },
+		setup() {
+			const value1 = ref('184027512345674')
+			const value2 = ref('184027512345674')
+
+			return { value1, value2 }
+		},
+		template: `
+      <div>
+        <div>
+          <div>
+            <p class="text-subtitle-2 mb-2">Avec messages de succès</p>
+            <NirField
+              v-model="value1"
+              label="NIR avec messages de succès"
+              required
+              showSuccessMessages
+            />
+          </div>
+
+          <div>
+            <p class="text-subtitle-2 mb-2">Sans messages de succès</p>
+            <NirField
+              v-model="value2"
+              label="NIR sans messages de succès"
+              required
+              :showSuccessMessages="false"
+            />
+          </div>
+        </div>
+
+        <div class="mt-4 text-body-2">
+          <p>Observations :</p>
+          <ul>
+            <li>Les deux champs ont la même valeur valide</li>
+            <li>Le premier champ affiche un message de succès et un indicateur visuel vert au blur</li>
+            <li>Le second champ n'affiche pas de message de succès, au blur</li>
+            <li>Essayez de modifier les valeurs pour voir le comportement avec des données invalides puis valides</li>
+          </ul>
+        </div>
+      </div>
+    `,
+	}),
+}
+
 export const CustomRules: Story = {
 	args: {
 		...Default.args,
@@ -572,7 +656,7 @@ export const CustomRules: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField  from '@cnamts/synapse'
+     import { NirField } from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -620,7 +704,7 @@ L'infobulle est positionnée avant le champ et s'affiche au survol de l'icône d
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField  from '@cnamts/synapse'
+     import { NirField } from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -668,7 +752,7 @@ L'infobulle est positionnée après le champ et s'affiche au survol de l'icône
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField  from '@cnamts/synapse'
+     import { NirField } from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -954,3 +1038,84 @@ const onSubmit = async () => {
 		`,
 	}),
 }
+
+export const DisableErrorHandling: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Désactivation de la gestion des erreurs
+
+Cette story illustre l'utilisation de la propriété \`disableErrorHandling\` qui permet de désactiver complètement
+la gestion et l'affichage des erreurs dans un champ, même si des règles de validation sont définies.
+
+Cela peut être utile dans des cas particuliers où vous souhaitez définir des règles de validation
+mais gérer leur affichage différemment, ou utiliser la validation uniquement au niveau du formulaire parent.
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <!-- Champ avec validation normale -->
+  <NirField
+    v-model="value"
+    label="NIR avec validation"
+    required
+  />
+  
+  <!-- Champ avec gestion d'erreurs désactivée -->
+  <NirField
+    v-model="value"
+    label="NIR sans gestion d'erreurs"
+    required
+    disableErrorHandling
+  />
+</template>`,
+			},
+		],
+	},
+	render: () => ({
+		components: { NirField },
+		setup() {
+			const value1 = ref('')
+			const value2 = ref('')
+
+			return { value1, value2 }
+		},
+		template: `
+      <div>
+        <div>
+          <div>
+            <p class="text-subtitle-2 mb-2">Validation normale</p>
+            <NirField
+              v-model="value1"
+              label="NIR avec validation"
+              required
+            />
+          </div>
+          
+          <div>
+            <p class="text-subtitle-2 mb-2">Sans gestion d'erreurs</p>
+            <NirField
+              v-model="value2"
+              label="NIR sans gestion d'erreurs"
+              required
+              disableErrorHandling
+            />
+          </div>
+        </div>
+        
+        <div class="mt-4 text-body-2">
+          <p>Instructions :</p>
+          <ol>
+            <li class="ml-4">Cliquez dans un champ puis en dehors pour déclencher la validation</li>
+            <li class="ml-4">Essayez de saisir des valeurs invalides (moins de 13 chiffres)</li>
+            <li class="ml-4">Notez que le premier champ affiche des erreurs, mais pas le second</li>
+          </ol>
+        </div>
+      </div>
+    `,
+	}),
+}

package/src/components/NirField/NirField.vue

@@ -2,14 +2,12 @@
 	import { ref, watch, computed, nextTick, toRef } from 'vue'
 	import { vMaska } from 'maska/vue'
 	import { checkNIR, isNIRKeyValid } from './nirValidation'
-	// import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
-	import { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import SyTextField from '../Customs/SyTextField/SyTextField.vue'
 	import { locales } from './locales'
-	// import defaultOptions from './config'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
-	const props = withDefaults(defineProps<CustomizableOptions & {
-		modelValue?: string | undefined
+
+	const props = withDefaults(defineProps<{
+		modelValue?: string | undefined | null
 		label?: string
 		numberLabel?: string
 		keyLabel?: string
@@ -28,7 +26,7 @@
 		showSuccessMessages?: boolean
 		width?: string
 		bgColor?: string
-		isDisabled?: boolean
+		disabled?: boolean
 		density?: 'default' | 'comfortable' | 'compact'
 		hideDetails?: boolean | 'auto'
 		hideSpinButtons?: boolean
@@ -40,6 +38,7 @@
 		hint?: string
 		persistentHint?: boolean
 		persistentPlaceholder?: boolean
+		disableErrorHandling?: boolean
 	}>(), {
 		modelValue: undefined,
 		label: undefined,
@@ -60,7 +59,7 @@
 		showSuccessMessages: true,
 		width: '100%',
 		bgColor: undefined,
-		isDisabled: false,
+		disabled: false,
 		density: 'default',
 		hideDetails: false,
 		hideSpinButtons: false,
@@ -72,6 +71,7 @@
 		hint: undefined,
 		persistentHint: false,
 		persistentPlaceholder: false,
+		disableErrorHandling: false,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -153,11 +153,13 @@
 	const numberValidation = useValidation({
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.numberLabel,
+		disableErrorHandling: props.disableErrorHandling,
 	})
 
 	const keyValidation = useValidation({
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.keyLabel,
+		disableErrorHandling: props.disableErrorHandling,
 	})
 
 	// Règles de validation
@@ -246,7 +248,7 @@
 
 	// Synchronisation avec modelValue
 	watch(modelValueRef, (newValue) => {
-		if (newValue === undefined) {
+		if (newValue === undefined || newValue === null) {
 			numberValue.value = ''
 			keyValue.value = ''
 			return
@@ -263,7 +265,7 @@
 			numberValue.value = number
 			keyValue.value = key
 		}
-		if (newValue.length === 13) {
+		if (newValue.length <= 13) {
 			const number = newValue
 			numberValue.value = number
 			keyValue.value = ''
@@ -406,10 +408,10 @@
 				:has-warning="hasNumberWarning"
 				:has-success="hasNumberSuccess"
 				:error="hasNumberErrors"
-				:messages="hasNumberErrors ? numberValidation.errors.value : (hasNumberWarning ? numberValidation.warnings.value : (hasNumberSuccess ? numberValidation.successes.value : []))"
+				:messages="hasNumberErrors ? numberValidation.errors.value : (hasNumberWarning ? numberValidation.warnings.value : (hasNumberSuccess && props.showSuccessMessages ? numberValidation.successes.value : []))"
 				:has-error="hasNumberErrors"
 				:required="required"
-				:is-disabled="isDisabled"
+				:disabled="disabled"
 				:bg-color="bgColor"
 				:density="props.density"
 				:hide-details="props.hideDetails"
@@ -449,9 +451,9 @@
 				:has-warning="hasKeyWarning"
 				:has-success="hasKeySuccess"
 				:hint="props.hint || locales.keyHint"
-				:messages="hasKeyErrors ? keyValidation.errors.value : (hasKeyWarning ? keyValidation.warnings.value : (hasKeySuccess ? keyValidation.successes.value : []))"
+				:messages="hasKeyErrors ? keyValidation.errors.value : (hasKeyWarning ? keyValidation.warnings.value : (hasKeySuccess && props.showSuccessMessages ? keyValidation.successes.value : []))"
 				:has-error="hasKeyErrors"
-				:is-disabled="isDisabled"
+				:disabled="disabled"
 				:bg-color="bgColor"
 				:density="props.density"
 				:hide-details="props.hideDetails"
@@ -476,7 +478,7 @@
 .nir-field {
 	display: flex;
 	gap: 16px;
-	width: v-bind('props.width');
+	width: calc(v-bind('props.width') - 16px);
 	align-items: flex-start;
 }