@cnamts/synapse 0.0.7-alpha → 0.0.8-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.vue

@@ -183,56 +183,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/DataList/DataList.stories.ts

@@ -421,8 +421,9 @@ export const ActionBtn: Story = {
 				code: `
 				<script setup lang="ts">
 					import { DataList } from '@cnamts/synapse'
+					import { ref } from 'vue'
 							
-					const items = [
+					const items = ref([
 						{
 							key: 'Nom',
 							value: 'Dupont',
@@ -436,7 +437,7 @@ export const ActionBtn: Story = {
 							value: '24/09/1970',
 							action: 'Modifier',
 						},
-					]
+					])
 					
 					const updateBirthdate = (index: number) => {
 						items[index].value = '25/09/1970'

package/src/components/DataList/DataList.vue

@@ -135,6 +135,6 @@
 
 <style lang="scss" scoped>
 :deep(ul) {
-  list-style: none;
+	list-style: none;
 }
 </style>

package/src/components/DataListGroup/DataListGroup.stories.ts

@@ -332,8 +332,9 @@ export const ActionBtn: Story = {
 				code: `
 				<script setup lang="ts">
 					import { DataListGroup } from '@cnamts/synapse'
+					import { ref } from 'vue'
 										
-					const items = [
+					const items = ref([
 						{
 							title: 'Informations patient',
 							items: [
@@ -374,7 +375,7 @@ export const ActionBtn: Story = {
 								},
 							],
 						},
-					]
+					])
 					
 					const updateBirthdate = (eventValue: object) => {
 						items.value[eventValue.dataListIndex].items[eventValue.itemIndex].value = '25/09/1970'

package/src/components/DataListItem/DataListItem.vue

@@ -111,25 +111,25 @@
 
 <style lang="scss" scoped>
 .vd-row {
-  display: flex;
-  flex-wrap: wrap;
+	display: flex;
+	flex-wrap: wrap;
 
-  .vd-data-list-item-label {
-    align-self: center;
+	.vd-data-list-item-label {
+		align-self: center;
 
-    &::after {
-      content: ':';
-      margin: 0 4px;
-    }
-  }
+		&::after {
+			content: ':';
+			margin: 0 4px;
+		}
+	}
 }
 
 .vd-data-list-item-action-btn.v-btn {
-  min-width: 0;
-  margin: 0 -1px;
+	min-width: 0;
+	margin: 0 -1px;
 }
 
 .v-icon.v-theme--light {
-  color: rgba(0, 0, 0, 0.54);
+	color: rgb(0 0 0 / 54%);
 }
 </style>

package/src/components/DialogBox/DialogBox.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
 import * as DialogBoxStories from './DialogBox.stories';
 
 <Meta of={DialogBoxStories} />
@@ -11,4 +11,30 @@ L’élément `DialogBox` est utilisé pour afficher une boîte de dialogue avec
 
 # API
 
-<Controls of={DialogBoxStories.Default} />
+<Controls of={DialogBoxStories.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+    import { DialogBox } from '@cnamts/synapse'
+    import { ref } from 'vue'
+
+    const dialogOpen = ref(false)
+</script>
+
+<template>
+    <VBtn
+        color="primary"
+        @click="dialogOpen = !dialogOpen"
+    >Toggle DialogBox</VBtn>
+    <DialogBox
+        v-model="dialogOpen"
+        title="DialogBox title"
+        @confirm="dialogOpen = false"
+        @cancel="dialogOpen = false"
+    >
+        DialogBox content
+    </DialogBox>
+</template>
+`} />

package/src/components/DialogBox/DialogBox.stories.ts

@@ -429,7 +429,7 @@ export const Persistent: Story = {
 					<DialogBox
 						v-model="dialogOpen"
 						title="DialogBox title"
-						Persistent
+						persistent
 						@confirm="dialogOpen = false"
 						@cancel="dialogOpen = false"
 					>