@cnamts/synapse 0.0.13-alpha → 0.0.15-alpha

package/src/components/LangBtn/LangBtn.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-	import { computed, ref, watch } from 'vue'
+	import { computed, nextTick, ref, watch } from 'vue'
 	import type { AllLanguagesChar } from '@/components/LangBtn/types'
 	import { mdiMenuDown } from '@mdi/js'
 	import { locales } from './locales'
 	import ISO6391 from 'iso-639-1'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import defaultOptions from './config'
+	import type { VBtn, VListItem } from 'vuetify/components'
 
 	const props = withDefaults(defineProps<CustomizableOptions & {
 		modelValue?: string
@@ -90,6 +91,30 @@
 		}
 	})
 
+	const itemRef = ref<Array<VListItem>>([])
+	const btnRef = ref<VBtn | null>(null)
+	watch(
+		menu,
+		(newVal) => {
+			setTimeout(async () => {
+				if (newVal) {
+					setTimeout(() => {
+						requestAnimationFrame(() => {
+							const inputElement = itemRef.value[0]?.$el
+							if (inputElement) {
+								inputElement.focus()
+							}
+						})
+					}, 0)
+				}
+				else {
+					await nextTick()
+					btnRef.value?.$el.focus()
+				}
+			}, 0)
+		},
+	)
+
 	defineExpose({
 		currentLangData,
 		updateLang,
@@ -101,23 +126,25 @@
 	<div :id="menuId">
 		<VMenu
 			v-bind="options.menu"
-			:id="isMenuOpen ? 'lang-menu' : menuId "
+			id="lang-menu"
 			v-model="menu"
+			scroll-strategy="none"
 			role="menu"
 			location="bottom"
 		>
 			<template #activator="{ props: activatorProps }">
 				<VBtn
 					id="lang-menu-btn"
+					v-bind="{
+						...options.btn,
+						...activatorProps,
+					}"
+					ref="btnRef"
 					:aria-label="`${props.ariaLabel} ${currentLangData.name}`"
 					aria-haspopup="menu"
 					:aria-controls="menuId"
 					:aria-owns="menuId"
 					:aria-expanded="isMenuOpen"
-					v-bind="{
-						...options.btn,
-						...activatorProps,
-					}"
 					class="vd-lang-btn"
 				>
 					{{ currentLangData.name }}
@@ -133,15 +160,22 @@
 			<VList
 				v-bind="options.list"
 				aria-labelledby="lang-menu-btn"
+				color="secondary"
+				:aria-activedescendant="`lang-item-${selectedLanguage}`"
+				role="menu"
 			>
 				<VListItem
-					v-for="(langData, code, index) in languagesData"
+					v-for="(langData, code) in languagesData"
 					v-bind="options.listTile"
+					:id="`lang-item-${code}`"
 					:key="code"
+					ref="itemRef"
+					:active="selectedLanguage === code"
 					role="menuitem"
-					:tabindex="index + 1"
+					:lang="code"
+					color="primary"
+					tabindex="0"
 					:aria-label="`${props.ariaLabel} ${langData.nativeName}`"
-					:aria-labelledby="`${menuId} ${langData.nativeName}`"
 					@click="updateLang(code)"
 				>
 					<VListItemTitle v-bind="options.listTileTitle">
@@ -159,6 +193,17 @@
 	background-color: rgba(tokens.$colors-overlay, 0.005);
 }
 
+.v-list-item:focus-visible {
+	&::after {
+		color: rgb(var(--v-theme-primary));
+		opacity: 1;
+	}
+
+	:deep(.v-list-item__overlay) {
+		display: none;
+	}
+}
+
 .vd-lang-btn {
 	font-size: 16px;
 
@@ -166,5 +211,20 @@
 
 	text-transform: none;
 	letter-spacing: inherit;
+
+	&:deep() {
+		.v-btn__underlay,
+		.v-btn__overlay {
+			display: none;
+		}
+	}
+}
+
+.vd-lang-btn:focus-visible {
+	outline: 0;
+}
+
+.vd-lang-btn:focus-visible::after {
+	opacity: 1;
 }
 </style>

package/src/components/LangBtn/config.ts

@@ -2,7 +2,6 @@ import type { VariantType } from '@/types/vuetifyTypes'
 
 const defaultOptions = {
 	menu: {
-		offsetY: true,
 	},
 	btn: {
 		color: 'primary',

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

@@ -78,6 +78,28 @@ describe('LangBtn', () => {
 	})
 
 	it('updates language when a language is selected', async () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				availableLanguages: ['fr', 'co', 'es'],
+				modelValue: 'es',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+
+		const activatorButton = wrapper.find('.vd-lang-btn')
+		await activatorButton.trigger('click')
+		await wrapper.vm.$nextTick()
+
+		const languageItem = document.body.querySelectorAll('.v-list-item')[1] as HTMLElement
+		languageItem.click()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.find('.vd-lang-btn').text()).toBe('corsu')
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['co'])
 	})
 
 	it('opens the menu when clicked', async () => {
@@ -103,7 +125,10 @@ describe('LangBtn', () => {
 
 	it('hides down arrow when hideDownArrow is true', () => {
 		wrapper = mount(LangBtn, {
-			props: { hideDownArrow: true },
+			props: {
+				hideDownArrow: true,
+				availableLanguages: ['fr', 'co', 'es'],
+			},
 			global: {
 				plugins: [vuetify],
 			},
@@ -113,7 +138,10 @@ describe('LangBtn', () => {
 
 	it('shows down arrow when hideDownArrow is false', () => {
 		wrapper = mount(LangBtn, {
-			props: { hideDownArrow: false },
+			props: {
+				hideDownArrow: false,
+				availableLanguages: ['fr', 'co', 'es'],
+			},
 			global: {
 				plugins: [vuetify],
 			},

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

@@ -165,7 +165,7 @@ const meta: Meta<typeof NirField> = {
 				},
 			},
 		},
-		isDisabled: {
+		disabled: {
 			description: 'Indique si le champ est désactivé.',
 			control: 'boolean',
 			default: false,
@@ -362,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('')
@@ -477,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('')
@@ -514,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('')
@@ -656,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('')
@@ -704,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('')
@@ -752,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('')

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
@@ -61,7 +59,7 @@
 		showSuccessMessages: true,
 		width: '100%',
 		bgColor: undefined,
-		isDisabled: false,
+		disabled: false,
 		density: 'default',
 		hideDetails: false,
 		hideSpinButtons: false,
@@ -250,7 +248,7 @@
 
 	// Synchronisation avec modelValue
 	watch(modelValueRef, (newValue) => {
-		if (newValue === undefined) {
+		if (newValue === undefined || newValue === null) {
 			numberValue.value = ''
 			keyValue.value = ''
 			return
@@ -267,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 = ''
@@ -413,7 +411,7 @@
 				: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"
@@ -455,7 +453,7 @@
 				:hint="props.hint || locales.keyHint"
 				: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"
@@ -480,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;
 }