@cnamts/synapse 0.0.14-alpha → 0.0.16-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,7 +126,7 @@
 	<div :id="menuId">
 		<VMenu
 			v-bind="options.menu"
-			:id="isMenuOpen ? 'lang-menu' : menuId "
+			id="lang-menu"
 			v-model="menu"
 			scroll-strategy="none"
 			role="menu"
@@ -110,15 +135,16 @@
 			<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 }}
@@ -134,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">
@@ -160,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;
 
@@ -167,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/PageContainer/Accessibilite.stories.ts

@@ -2,6 +2,7 @@ import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPane
 import type { StoryObj } from '@storybook/vue3'
 import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
 import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 
 const checkIcon = mdiCheckboxMarkedCircle
 const iconEye = mdiEye
@@ -15,14 +16,22 @@ export const AccessibilitePanel: StoryObj = {
 
 	render: () => {
 		return {
-			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, SyAlert },
 
 			setup() {
 				const icon = checkIcon
 
-				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye, SyAlert }
 			},
 			template: `
+				<div class="mt-6 mb-6">
+					<SyAlert
+						title="Attention au contraste"
+						:closable="false"
+					>
+						<p> Le composant étant libre dans son implémentation, l'utilisateur doit veiller à la conformité de ce critère au regard de son intégration.</p>
+					</SyAlert>
+				</div>
 				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
 					<v-col cols="6">
 						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
@@ -138,28 +147,32 @@ export const Legende: StoryObj = {
 				return { args }
 			},
 			template: `
-			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
-			  <div>
-				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
-				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
-				  l'accessibilité du site.</p>
-				<div style="font-size: 14px">
-				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
-				  <div>
-					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Audit
-					</v-btn>
-					Problèmes relevés par le projet
-				  </div>
-				  <div>
-					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Tanaguru
-					</v-btn>
-					Problèmes relevés par Tanaguru
-				  </div>
+				<p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+				<div>
+					<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+					<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+						l'accessibilité du site.</p>
+					<div style="font-size: 14px">
+						<p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+						<div>
+							<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+								Audit
+							</v-btn>
+							Problèmes relevés par le projet
+						</div>
+						<div>
+							<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+								Tanaguru
+							</v-btn>
+							Problèmes relevés par Tanaguru
+						</div>
+					</div>
 				</div>
-			  </div>
-            `,
+				<div class="mt-4">
+					<p>Rapport d’audit manuel : <a href="/audits/PageContainer.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+					<p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4011" target="_blank" style="color:#0C41BD;">issue #4011</a>)</p>
+				</div>
+			`,
 		}
 	},
 	tags: ['!dev'],

package/src/components/PaginatedTable/PaginatedTable.stories.ts

@@ -56,7 +56,7 @@ const meta = {
 			control: { type: 'number' },
 		},
 		suffix: {
-			description: 'Suffixe pour la pagination',
+			description: 'Suffixe permettant de gérer individuellement le stockage des options d’un tableau d’une page à l’autre. S’il n’est pas renseigné, le stockage s’effectue globalement pour tous les tableaux.',
 			control: { type: 'text' },
 		},
 		itemsPerPage: {
@@ -133,12 +133,12 @@ export const Default: Story = {
 							email: 'thierry.bobu@example.com',
 						},
 						{
-                            firstname: 'Bernadette',
+							firstname: 'Bernadette',
 							lastname: 'Langelier',
 							email: 'bernadette.langelier@exemple.com'
 						},
 						{
-                            firstname: 'Agate',
+							firstname: 'Agate',
 							lastname: 'Roy',
 							email: 'agate.roy@exemple.com'
 						}
@@ -207,14 +207,14 @@ export const Default: Story = {
 				return { args }
 			},
 			template: `
-              <div class="pa-4">
-                <PaginatedTable
+				<div class="pa-4">
+				<PaginatedTable
 					v-model:options="args.options"
 					:items="args.items"
 					:headers="args.headers"
 				/>
-              </div>
-            `,
+				</div>
+			`,
 		}
 	},
 }
@@ -255,7 +255,7 @@ export const SortBy: Story = {
 							key: 'firstname',
 						},
 						{
-                            title: 'Email',
+							title: 'Email',
 							value: 'email',
 						},
 					])
@@ -282,12 +282,12 @@ export const SortBy: Story = {
 							email: 'thierry.bobu@example.com',
 						},
 						{
-                            firstname: 'Bernadette',
+							firstname: 'Bernadette',
 							lastname: 'Langelier',
 							email: 'bernadette.langelier@exemple.com'
 						},
 						{
-                            firstname: 'Agate',
+							firstname: 'Agate',
 							lastname: 'Roy',
 							email: 'agate.roy@exemple.com'
 						}
@@ -356,14 +356,14 @@ export const SortBy: Story = {
 				return { args }
 			},
 			template: `
-              <div class="pa-4">
-                <PaginatedTable
+			<div class="pa-4">
+				<PaginatedTable
 					v-model:options="args.options"
 					:items="args.items"
 					:headers="args.headers"
 				/>
-              </div>
-            `,
+			</div>
+			`,
 		}
 	},
 }
@@ -574,8 +574,8 @@ export const TableServer: Story = {
 				return { args, headers, users, options, state, fetchData, totalUsers, StateEnum }
 			},
 			template: `
-              <div class="pa-4">
-                <PaginatedTable
+			<div class="pa-4">
+				<PaginatedTable
 					v-model:options="options"
 					:items="users"
 					:headers="headers"
@@ -584,8 +584,134 @@ export const TableServer: Story = {
 					suffix="api-example"
 					@update:options="fetchData"
 				/>
-              </div>
-            `,
+			</div>
+			`,
+		}
+	},
+}
+
+export const ManyTables: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div class="pa-4">
+						<PaginatedTable
+							suffix="table1"
+							:items="itemsTable1"
+						/>
+						<hr class="my-4">
+						<PaginatedTable
+							suffix="table2"
+							:items="itemsTable2"
+						/>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { PaginatedTable } from '@cnamts/synapse'
+
+	const itemsTable1 = ref([
+		{
+			id: 1,
+			lastname: 'Doe',
+			firstname: 'John',
+		},
+		{
+			id: 2,
+			lastname: 'Smith',
+			firstname: 'Jane',
+		},
+		{
+			id: 3,
+			lastname: 'Brown',
+			firstname: 'Charlie',
+		},
+	])
+
+	const itemsTable2 = ref([
+		{
+			id: 1,
+			lastname: 'Smith',
+			firstname: 'Jane',
+		},
+		{
+			id: 2,
+			lastname: 'Doe',
+			firstname: 'John',
+		},
+		{
+			id: 3,
+			lastname: 'Brown',
+			firstname: 'Charlie',
+		},
+	])
+</script>
+				`,
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { PaginatedTable },
+			setup() {
+				const itemsTable1 = ref([
+					{
+						id: 1,
+						lastname: 'Doe',
+						firstname: 'John',
+					},
+					{
+						id: 2,
+						lastname: 'Smith',
+						firstname: 'Jane',
+					},
+					{
+						id: 3,
+						lastname: 'Brown',
+						firstname: 'Charlie',
+					},
+				])
+
+				const itemsTable2 = ref([
+					{
+						id: 1,
+						lastname: 'Smith',
+						firstname: 'Jane',
+					},
+					{
+						id: 2,
+						lastname: 'Doe',
+						firstname: 'John',
+					},
+					{
+						id: 3,
+						lastname: 'Brown',
+						firstname: 'Charlie',
+					},
+				])
+				return { args, itemsTable1, itemsTable2 }
+			},
+			template: `
+			<div class="pa-4">
+				<PaginatedTable
+					suffix="table1"
+					:items="itemsTable1"
+				/>
+				<hr class="my-4">
+				<PaginatedTable
+					suffix="table2"
+					:items="itemsTable2"
+				/>
+			</div>
+			`,
 		}
 	},
 }

package/src/components/PasswordField/PasswordField.stories.ts

@@ -53,7 +53,7 @@ const meta = {
 			control: 'object',
 			description: 'Messages de succès à afficher',
 		},
-		readOnly: {
+		readonly: {
 			control: 'boolean',
 			description: 'Indique si le champ est en lecture seule',
 		},
@@ -99,7 +99,7 @@ const meta = {
 		errorMessages: null,
 		warningMessages: null,
 		successMessages: null,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 		placeholder: 'Entrez votre mot de passe',
 		customRules: [],
@@ -162,7 +162,7 @@ export const Default: Story = {
 				:error-messages="args.errorMessages"
 				:warning-messages="args.warningMessages"
 				:success-messages="args.successMessages"
-				:read-only="args.readOnly"
+				:readonly="args.readonly"
 				:disabled="args.disabled"
 				:placeholder="args.placeholder"
 				:custom-rules="args.customRules"
@@ -301,7 +301,7 @@ export const ReadOnly: Story = {
 					<PasswordField
 						v-model="password"
 						label="Mot de passe"
-						:read-only="true"
+						:readonly="true"
 					/>
 				</template>
 				`,
@@ -320,7 +320,7 @@ export const ReadOnly: Story = {
 		],
 	},
 	args: {
-		readOnly: true,
+		readonly: true,
 		modelValue: 'MonMotDePasse123',
 	},
 }
@@ -832,7 +832,7 @@ export const WithCustomRules: Story = {
 				:color="args.color"
 				:label="args.label"
 				:required="args.required"
-				:read-only="args.readOnly"
+				:readonly="args.readonly"
 				:disabled="args.disabled"
 				:placeholder="args.placeholder"
 				:custom-rules="customRules"

package/src/components/PasswordField/PasswordField.vue

@@ -23,7 +23,7 @@
 		errorMessages?: string[] | null
 		warningMessages?: string[] | null
 		successMessages?: string[] | null
-		readOnly?: boolean
+		readonly?: boolean
 		disabled?: boolean
 		placeholder?: string
 		customRules?: ValidationRule[]
@@ -42,7 +42,7 @@
 		errorMessages: null,
 		warningMessages: null,
 		successMessages: null,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 		placeholder: undefined,
 		customRules: () => [],
@@ -191,7 +191,7 @@
 		:error-messages="errors"
 		:warning-messages="warnings"
 		:success-messages="successes"
-		:read-only="props.readOnly"
+		:readonly="props.readonly"
 		:disabled="props.disabled"
 		:placeholder="props.placeholder"
 		:type="showEyeIcon ? 'text' : 'password'"

package/src/components/PeriodField/PeriodField.vue

@@ -28,7 +28,7 @@
 		customRules?: ValidationRule[]
 		customWarningRules?: ValidationRule[]
 		disableErrorHandling?: boolean
-		readOnly?: boolean
+		readonly?: boolean
 	}>(), {
 		modelValue: () => ({ from: null, to: null }),
 		placeholderFrom: 'Début',
@@ -47,7 +47,7 @@
 		customRules: () => [],
 		customWarningRules: () => [],
 		disableErrorHandling: false,
-		readOnly: false,
+		readonly: false,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -347,7 +347,7 @@
 				:show-week-number="props.showWeekNumber"
 				:show-success-messages="showSuccessMessagesActual"
 				:success-message="fromDateValidation.hasSuccess"
-				:read-only="props.readOnly"
+				:readonly="props.readonly"
 				@closed="handleFromDateClosed"
 			/>
 		</div>
@@ -371,7 +371,7 @@
 				:show-week-number="props.showWeekNumber"
 				:show-success-messages="showSuccessMessagesActual"
 				:success-message="toDateValidation.hasSuccess"
-				:read-only="props.readOnly"
+				:readonly="props.readonly"
 				@closed="handleToDateClosed"
 			/>
 		</div>