@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/CookieBanner/CookieBanner.vue

@@ -158,7 +158,6 @@
 </template>
 
 <style lang="scss" scoped>
-
 .vd-cookie-banner {
 	position: fixed;
 	left: 50%;
@@ -176,16 +175,17 @@
 	display: flex;
 	flex-direction: column;
 	width: 100%;
-  background: transparent;
+	background: transparent;
 }
 
 .vd-cookie-banner-content {
 	overflow-y: auto;
 	padding-right: 8px;
-  background: transparent;
-  div {
-    background: transparent;
-  }
+	background: transparent;
+
+	div {
+		background: transparent;
+	}
 }
 
 .vd-cookie-banner-action-ctn .v-btn {
@@ -193,12 +193,13 @@
 }
 
 .v-btn--icon {
-	color: rgba(0, 0, 0, 0.54);
+	color: rgb(0 0 0 / 54%);
 	position: absolute;
 	right: 24px;
 }
 
-.height-enter-active, .height-leave-active {
+.height-enter-active,
+.height-leave-active {
 	box-sizing: border-box;
 	transition: height 2s ease;
 	interpolate-size: allow-keywords;
@@ -214,11 +215,13 @@
 	transition: height 0.1s ease;
 }
 
-.height-enter-from, .height-leave-to {
+.height-enter-from,
+.height-leave-to {
 	height: 0;
 }
 
-.height-enter-to, .height-leave-from {
+.height-enter-to,
+.height-leave-from {
 	height: auto;
 }
 

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

@@ -42,9 +42,9 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -77,9 +77,9 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -96,9 +96,10 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
       </details>
       <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
         <!---->
-        <div class="v-input__control">
-          <!---->
-          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-7-messages">
+        <div class="v-input__control"><label class="v-label" id="radio-group-7">
+            <!---->Accepter les cookies de type Cookies fonctionnels, ce champ est requis.
+          </label>
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" label="Accepter les cookies de type Cookies fonctionnels, ce champ est requis." aria-describedby="radio-group-7-messages" aria-labelledby="radio-group-7">
             <div data-v-2ca04413="" class="v-spacer"></div>
             <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
               <div class="v-selection-control__wrapper">
@@ -133,9 +134,9 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -152,9 +153,10 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
       </details>
       <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
         <!---->
-        <div class="v-input__control">
-          <!---->
-          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-12-messages">
+        <div class="v-input__control"><label class="v-label" id="radio-group-12">
+            <!---->Accepter les cookies de type Cookies d’analyse, ce champ est requis.
+          </label>
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" label="Accepter les cookies de type Cookies d’analyse, ce champ est requis." aria-describedby="radio-group-12-messages" aria-labelledby="radio-group-12">
             <div data-v-2ca04413="" class="v-spacer"></div>
             <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
               <div class="v-selection-control__wrapper">

package/src/components/CookiesSelection/CookiesInformation/CookiesInformation.vue

@@ -73,6 +73,7 @@
 			:rules="[required]"
 			data-test-id="radio-group"
 			inline
+			:label="locales.fieldLabel(locales[type].title)"
 			hide-details="auto"
 			class="vd-cookies-information__radio-group"
 			@update:model-value="status = $event === 'accept'"
@@ -96,7 +97,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 details > summary {
 	cursor: pointer;
@@ -119,5 +120,9 @@ details > summary {
 	:deep(.v-messages) {
 		text-align: end;
 	}
+
+	:deep(.v-label) {
+		justify-content: end;
+	}
 }
 </style>

package/src/components/CookiesSelection/CookiesInformation/locales.ts

@@ -18,4 +18,5 @@ export const locales = {
 	hideInformation: 'Masquer les cookies',
 	reject: 'Refuser',
 	accept: 'Accepter',
+	fieldLabel: (cookieCategory: string) => `Accepter les cookies de type ${cookieCategory}, ce champ est requis.`,
 } as const

package/src/components/CookiesSelection/CookiesTable/CookiesTable.vue

@@ -14,6 +14,7 @@
 					:key="index"
 					:style="{ width: item.width }"
 					class="text-left"
+					scope="col"
 				>
 					{{ item.label }}
 				</th>

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

@@ -42,9 +42,9 @@ exports[`CookiesSelection > renders correctly 1`] = `
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -77,9 +77,9 @@ exports[`CookiesSelection > renders correctly 1`] = `
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -96,9 +96,10 @@ exports[`CookiesSelection > renders correctly 1`] = `
       </details>
       <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
         <!---->
-        <div class="v-input__control">
-          <!---->
-          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-2-messages">
+        <div class="v-input__control"><label class="v-label" id="radio-group-2">
+            <!---->Accepter les cookies de type Cookies fonctionnels, ce champ est requis.
+          </label>
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" label="Accepter les cookies de type Cookies fonctionnels, ce champ est requis." aria-describedby="radio-group-2-messages" aria-labelledby="radio-group-2">
             <div data-v-2ca04413="" class="v-spacer"></div>
             <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
               <div class="v-selection-control__wrapper">
@@ -133,9 +134,9 @@ exports[`CookiesSelection > renders correctly 1`] = `
             <table>
               <thead data-v-d0e8c396="">
                 <tr data-v-d0e8c396="">
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
-                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
-                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left" scope="col">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left" scope="col">Durée de conservation</th>
                 </tr>
               </thead>
               <tbody data-v-d0e8c396="">
@@ -152,9 +153,10 @@ exports[`CookiesSelection > renders correctly 1`] = `
       </details>
       <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
         <!---->
-        <div class="v-input__control">
-          <!---->
-          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-7-messages">
+        <div class="v-input__control"><label class="v-label" id="radio-group-7">
+            <!---->Accepter les cookies de type Cookies d’analyse, ce champ est requis.
+          </label>
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" label="Accepter les cookies de type Cookies d’analyse, ce champ est requis." aria-describedby="radio-group-7-messages" aria-labelledby="radio-group-7">
             <div data-v-2ca04413="" class="v-spacer"></div>
             <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
               <div class="v-selection-control__wrapper">

package/src/components/CopyBtn/CopyBtn.vue

@@ -86,17 +86,17 @@
 </template>
 
 <style lang="scss">
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .vd-copy-tooltip-menu {
-  padding: 6px 16px;
-  box-shadow: none;
-  margin-top: 2px;
-  background: rgba(84, 88, 89, 0.95);
-  color: white;
+	padding: 6px 16px;
+	box-shadow: none;
+	margin-top: 2px;
+	background: rgb(84 88 89 / 95%);
+	color: white;
 }
 
 .v-btn--icon .v-icon {
-  color: tokens.$grey-lighten-20;
+	color: tokens.$grey-lighten-20;
 }
 </style>

package/src/components/Customs/SyBtnSelect/SyBtnSelect.vue

@@ -213,42 +213,42 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 @use '@/assets/tokens' as *;
 
 .vd-user-menu-btn-ctn {
-  position: relative;
-  z-index: 1;
+	position: relative;
+	z-index: 1;
 
-  .v-btn.v-btn--density-default {
-    height: auto !important;
-  }
+	.v-btn.v-btn--density-default {
+		height: auto !important;
+	}
 
-  .v-btn {
-    text-transform: none !important;
-  }
+	.v-btn {
+		text-transform: none !important;
+	}
 }
 
 .vd-user-menu-btn {
-  outline: none;
-  padding: 12px !important;
-
-  &:hover:before {
-    background: #000;
-    opacity: 0.05;
-  }
-
-  &:focus:before {
-    background: tokens.$blue-base;
-    opacity: 0.08;
-  }
-
-  &:focus {
-    background: rgba(tokens.$blue-base, 0.08) !important;
-  }
+	outline: none;
+	padding: 12px !important;
+
+	&:hover::before {
+		background: #000;
+		opacity: 0.05;
+	}
+
+	&:focus::before {
+		background: tokens.$blue-base;
+		opacity: 0.08;
+	}
+
+	&:focus {
+		background: rgba(tokens.$blue-base, 0.08) !important;
+	}
 }
 
 :deep(.vd-user-menu-btn:focus > .v-btn__overlay) {
-  opacity: 0 !important;
+	opacity: 0 !important;
 }
 </style>

package/src/components/Customs/SyInputSelect/SyInputSelect.vue

@@ -200,53 +200,53 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .sy-input-select {
-  text-transform: none !important;
-  font-size: 16px;
+	text-transform: none !important;
+	font-size: 16px;
 }
 
 .v-input {
-  cursor: pointer;
-  position: relative;
+	cursor: pointer;
+	position: relative;
 }
 
 .v-list {
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  background-color: white;
-  min-width: fit-content;
-  max-width: 100px;
-  padding: 0;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08);
-  border-radius: 4px;
-  overflow-y: auto;
-  max-height: 300px;
+	position: absolute;
+	width: 100%;
+	z-index: 1;
+	background-color: white;
+	min-width: fit-content;
+	max-width: 100px;
+	padding: 0;
+	box-shadow: 0 2px 5px rgb(0 0 0 / 12%), 0 2px 10px rgb(0 0 0 / 8%);
+	border-radius: 4px;
+	overflow-y: auto;
+	max-height: 300px;
 }
 
 .v-list-item:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+	background-color: rgb(0 0 0 / 4%);
 }
 
 :deep(.v-list-item[aria-selected='true']) {
-  background-color: rgba(0, 0, 0, 0.08);
+	background-color: rgb(0 0 0 / 8%);
 
-  .v-list-item-title {
-    font-weight: bold;
-  }
+	.v-list-item-title {
+		font-weight: bold;
+	}
 }
 
 .error {
-  border-color: tokens.$danger-default;
+	border-color: tokens.$danger-default;
 }
 
 .v-btn {
-  color: tokens.$blue-base;
+	color: tokens.$blue-base;
 }
 
 .text-color {
-  color: tokens.$blue-base;
+	color: tokens.$blue-base;
 }
 </style>

package/src/components/Customs/SySelect/SySelect.stories.ts

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
 import { ref } from 'vue'
-import SyAlert from '@/components/SyAlert/SyAlert.vue'
 
-const meta = {
+const meta: Meta<typeof SySelect> = {
 	title: 'Composants/Formulaires/SySelect',
 	component: SySelect,
 	parameters: {
@@ -64,7 +64,7 @@ export const Default: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="pa-4">
 					<SySelect
 						v-bind="args"
 					/>
@@ -119,7 +119,7 @@ export const Required: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="pa-4">
 					<SySelect
 						v-bind="args"
 						:required="args.required"
@@ -188,13 +188,13 @@ export const withCustomError: Story = {
 				return { args, errorMessages, triggerError }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="pa-4">
 					<SySelect
 						v-bind="args"
 						:error-messages="errorMessages"
 					/>
 				</div>
-				<div class="d-flex flex-wrap align-center px-4">
+				<div class="px-4">
 					<VBtn @click="triggerError">
 						Trigger Error
 					</VBtn>
@@ -247,7 +247,7 @@ export const withCustomKey: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="pa-4">
 					<SySelect
 						v-bind="args"
 						text-key="customKey"

package/src/components/Customs/SySelect/SySelect.vue

@@ -4,7 +4,7 @@
 
 	const props = defineProps({
 		modelValue: {
-			type: [Object, String],
+			type: [Object, String, Number],
 			default: null,
 		},
 		items: {
@@ -13,7 +13,7 @@
 		},
 		label: {
 			type: String,
-			default: 'Sélectionnez une option',
+			default: '',
 		},
 		errorMessages: {
 			type: [String, Array] as PropType<string | readonly string[]>,
@@ -23,6 +23,10 @@
 			type: Boolean,
 			default: false,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 		menuId: {
 			type: String,
 			default: 'sy-select-menu',
@@ -44,7 +48,7 @@
 	const emit = defineEmits(['update:modelValue'])
 
 	const isOpen = ref(false)
-	const selectedItem = ref<Record<string, unknown > | string | null | undefined>(props.modelValue)
+	const selectedItem = ref<Record<string, unknown > | string | number | null | undefined>(props.modelValue)
 	const hasError = ref(false)
 
 	const labelWidth = ref(0)
@@ -131,7 +135,8 @@
 			color="primary"
 			tabindex="0"
 			readonly
-			:label="selectedItem ? label : ''"
+			:disabled="disabled"
+			:label="selectedItem ? label : 'Sélectionnez une option'"
 			:aria-label="selectedItem ? label : 'Sélectionnez une option'"
 			:error-messages="errorMessages"
 			:variant="outlined ? 'outlined' : 'underlined'"
@@ -183,56 +188,57 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .sy-select {
-  display: flex;
-  flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 .v-field {
-  position: relative;
+	position: relative;
 }
+
 .v-field--focused {
-  .v-icon.arrow {
-    transform: rotateX(180deg);
-  }
+	.v-icon.arrow {
+		transform: rotateX(180deg);
+	}
 }
 
 .v-list {
-  position: absolute;
-  left: inherit !important;
-  margin-top: -22px;
-  background-color: white;
-  max-height: 300px;
-  padding: 0;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08);
-  border-radius: 4px;
-  overflow-y: auto;
-  z-index: 2;
+	position: absolute;
+	left: inherit !important;
+	margin-top: -22px;
+	background-color: white;
+	max-height: 300px;
+	padding: 0;
+	box-shadow: 0 2px 5px rgb(0 0 0 / 12%), 0 2px 10px rgb(0 0 0 / 8%);
+	border-radius: 4px;
+	overflow-y: auto;
+	z-index: 2;
 }
 
 .v-list-item:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+	background-color: rgb(0 0 0 / 4%);
 }
 
 .v-list-item[aria-selected='true'] {
-  background-color: rgba(0, 0, 0, 0.08);
+	background-color: rgb(0 0 0 / 8%);
 }
 
 .v-icon {
-  position: absolute;
-  right: 10px;
-  color: tokens.$grey-darken-20;
+	position: absolute;
+	right: 10px;
+	color: tokens.$grey-darken-20;
 }
 
 :deep(.v-field__input) {
- color: tokens.$grey-darken-20
+	color: tokens.$grey-darken-20;
 }
 
 .hidden-label {
-  visibility: hidden;
-  position: absolute;
-  white-space: nowrap;
+	visibility: hidden;
+	position: absolute;
+	white-space: nowrap;
 }
 </style>

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

@@ -11,7 +11,7 @@ describe('SySelect.vue', () => {
 			},
 		})
 		expect(wrapper.exists()).toBe(true)
-		expect(wrapper.find('.sy-select').text()).toBe('')
+		expect(wrapper.find('.sy-select').exists()).toBe(true)
 	})
 
 	it('displays the selected item text', async () => {
@@ -84,7 +84,7 @@ describe('SySelect.vue', () => {
 		})
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 		const instance = wrapper.vm as any
-		expect(instance.selectedItemText).toBe('Sélectionnez une option')
+		expect(instance.selectedItemText).toBe('')
 	})
 
 	it('returns the correct text when selectedItem is an object', async () => {