@cnamts/synapse 0.0.14-alpha → 0.0.16-alpha

package/dist/vuetifyConfig.d.ts

@@ -66,6 +66,7 @@ export declare const createVuetifyInstance: () => {
             getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
             getWeekArray: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown[][];
             getWeekdays: (firstDayOfWeek?: string | number | undefined) => string[];
+            getWeek: (date: unknown, firstDayOfWeek?: string | number | undefined, firstWeekMinSize?: number | undefined) => number;
             getMonth: (date: unknown) => number;
             setMonth: (date: unknown, month: number) => unknown;
             getDate: (date: unknown) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "0.0.14-alpha",
+  "version": "0.0.16-alpha",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",

package/src/components/BackBtn/Accessibilite.stories.ts

@@ -159,6 +159,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/BackBtn.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/4006" target="_blank" style="color:#0C41BD;">issue #4006</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/BackBtn/BackBtn.vue

@@ -16,6 +16,7 @@
 	const buttonVariant = computed(() => isDark.value ? 'outlined' : 'text')
 	const buttonTheme = computed(() => isDark.value ? 'dark' : 'light')
 	const buttonColor = computed(() => isDark.value ? 'white' : 'primary')
+	const buttonBgColor = computed(() => isDark.value ? 'transparent' : props.backgroundColor)
 
 	const buttonClasses = computed(() => ({
 		'px-0': !isDark.value,
@@ -30,7 +31,7 @@
 		:variant="buttonVariant"
 		:theme="buttonTheme"
 		:color="buttonColor"
-		:class="['sy-back-btn', 'text-none', buttonClasses, `bg-${props.backgroundColor}`]"
+		:class="['sy-back-btn', 'text-none', buttonClasses, `bg-${buttonBgColor}`]"
 	>
 		<slot name="icon">
 			<VIcon

package/src/components/BackToTopBtn/Accessibilite.stories.ts

@@ -158,6 +158,10 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+				<div class="mt-4">
+					<p>Rapport d’audit manuel : <a href="/audits/BackToTopBtn.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/4022" target="_blank" style="color:#0C41BD;">issue #4022</a>)</p>
+				</div>
 			  </div>
             `,
 		}

package/src/components/BackToTopBtn/BackToTopBtn.stories.ts

@@ -12,24 +12,69 @@ const meta = {
 	argTypes: {
 		threshold: {
 			control: { type: 'range', max: 2000 },
+			description: 'Distance par rapport au bas de la page à partir de laquelle le bouton apparaît',
+			table: {
+				type: { summary: 'number' },
+			},
 		},
 		nudgeRight: {
 			control: { type: 'range' },
+			description: 'Décalage du bouton par rapport au bord droit de la fenêtre',
 			default: 16,
+			table: {
+				type: { summary: 'number' },
+			},
 		},
 		nudgeBottom: {
 			control: { type: 'range' },
+			description: 'Décalage du bouton par rapport au bord inférieur de la fenêtre',
 			default: 16,
+			table: {
+				type: { summary: 'number' },
+			},
 		},
 		target: {
 			control: { type: 'text' },
+			description: 'ID du conteneur devant être scrollé',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		default: {
+			description: 'Texte du bouton',
 			control: { type: 'text' },
 		},
 		icon: {
+			description: 'Icône du bouton',
 			control: { type: 'text' },
 		},
+		vuetifyOptions: {
+			control: { type: 'object' },
+			description: 'Options de personnalisation du bouton',
+			default: () => ({
+				btn: {
+					variant: 'outlined',
+					color: 'primary',
+					class: 'text-wrap px-0 px-md-4',
+				},
+				icon: {
+					color: 'primary',
+					size: 'medium',
+					class: 'ml-0 ml-md-2',
+				},
+			}),
+			table: {
+				category: 'props',
+				type: {
+					summary: 'object',
+					detail: `
+{
+	btn: Record<string, unknown>,
+	icon: Record<string, unknown>,
+}`,
+				},
+			},
+		},
 	},
 	args: {
 		threshold: 120,
@@ -92,8 +137,8 @@ export const Default: Story = {
 			},
 			icon: {
 				color: 'primary',
-				size: 'small',
-				class: 'ml-0 ml-md-1',
+				size: 'medium',
+				class: 'ml-0 ml-md-2',
 			},
 		},
 	},
@@ -105,16 +150,20 @@ export const Default: Story = {
 				VSheet,
 			},
 			setup() {
-				return { args }
+				const { default: defaultSlot, ...props } = args
+				return {
+					defaultSlot,
+					props,
+				}
 			},
 			template: `
-				<VCard
-					id="target"
-					width="100%"
-					max-height="200px"
-					class="overflow-y-auto"
-					style="scroll-behavior: smooth"
-				>
+			<VCard
+				id="target"
+				width="100%"
+				max-height="200px"
+				class="overflow-y-auto"
+				style="scroll-behavior: smooth"
+			>
 					<VSheet
 						height="600px"
 						class="d-flex flex-column align-center"
@@ -123,8 +172,8 @@ export const Default: Story = {
 							Haut de la section.
 						</p>
 					</VSheet>
-					<BackToTopBtn v-bind="args" :vuetify-options="args.vuetifyOptions">
-						{{args.default}}
+					<BackToTopBtn v-bind="props" :vuetify-options="props.vuetifyOptions">
+						{{ defaultSlot }}
 					</BackToTopBtn>
 				</VCard>
 			`,
@@ -208,7 +257,11 @@ export const Customization: Story = {
 				BackToTopBtn,
 			},
 			setup() {
-				return { args }
+				const { default: defaultSlot, ...props } = args
+				return {
+					defaultSlot,
+					props,
+				}
 			},
 			template: `
 				<VCard
@@ -226,8 +279,8 @@ export const Customization: Story = {
 							Haut de la section.
 						</p>
 					</VSheet>
-					<BackToTopBtn v-bind="args" :vuetify-options="args.vuetifyOptions">
-						{{args.default}}
+					<BackToTopBtn v-bind="props" :vuetify-options="props.vuetifyOptions">
+						{{defaultSlot}}
 					</BackToTopBtn>
 				</VCard>
 			`,
@@ -311,7 +364,11 @@ export const CustomPosition: Story = {
 				BackToTopBtn,
 			},
 			setup() {
-				return { args }
+				const { default: defaultSlot, ...props } = args
+				return {
+					defaultSlot,
+					props,
+				}
 			},
 			template: `
 				<VCard
@@ -330,12 +387,12 @@ export const CustomPosition: Story = {
 						</p>
 					</VSheet>
 					<BackToTopBtn 
-						v-bind="args" 
-						:nudge-right="args.nudgeRight"
-						:nudge-bottom="args.nudgeBottom"
-						:vuetify-options="args.vuetifyOptions"
+						v-bind="props" 
+						:nudge-right="props.nudgeRight"
+						:nudge-bottom="props.nudgeBottom"
+						:vuetify-options="props.vuetifyOptions"
 					>
-						{{args.default}}
+						{{defaultSlot}}
 					</BackToTopBtn>
 				</VCard>
 			`,

package/src/components/BackToTopBtn/BackToTopBtn.vue

@@ -135,4 +135,19 @@
 .v-btn--variant-outlined {
 	background: white;
 }
+
+.vd-back-to-top-btn:deep() {
+	.v-btn__underlay,
+	.v-btn__overlay {
+		display: none;
+	}
+}
+
+.vd-back-to-top-btn:focus-visible {
+	outline: 0;
+}
+
+.vd-back-to-top-btn:focus-visible::after {
+	opacity: 1;
+}
 </style>

package/src/components/BackToTopBtn/config.ts

@@ -6,7 +6,7 @@ export const config = {
 	},
 	icon: {
 		color: 'primary',
-		size: 'small',
-		class: 'ml-0 ml-md-1',
+		size: 'medium',
+		class: 'ml-0 ml-md-2',
 	},
 }

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

@@ -39,13 +39,13 @@ exports[`BackToTopBtn > renders correctly 1`] = `
           M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z
           mdi
           ml-0
-          ml-md-1
+          ml-md-2
           notranslate
           text-primary
           v-icon
-          v-icon--size-small
           v-theme--light
         "
+        style="font-size: medium;"
       ></i>
     </span>
     <!---->
@@ -93,13 +93,13 @@ exports[`BackToTopBtn > renders correctly when nudgeBottom and nudgeRight are se
           M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z
           mdi
           ml-0
-          ml-md-1
+          ml-md-2
           notranslate
           text-primary
           v-icon
-          v-icon--size-small
           v-theme--light
         "
+        style="font-size: medium;"
       ></i>
     </span>
     <!---->

package/src/components/CopyBtn/Accessibilite.stories.ts

@@ -159,6 +159,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/CopyBtn.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/4008" target="_blank" style="color:#0C41BD;">issue #4008</a>)</p>
+			  </div>
             `,
 		}
 	},

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

@@ -506,7 +506,7 @@ export const WithCustomStyles: Story = {
       <VIcon 
       	:icon="mdiAccount" 
       	class="mr-2"
-      	color="red" 
+      	color="secondary" 
       />
     </template>
   </SyBtnSelect>
@@ -544,7 +544,7 @@ const items = ['Option 1', 'Option 2']
                     <VIcon
                         :icon="mdiAccount"
                         class="mr-2"
-                        color="red"
+                        color="secondary"
                     />
                   </template>
                 </SyBtnSelect>

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

@@ -215,7 +215,6 @@
 
 <style lang="scss" scoped>
 @use '@/assets/tokens';
-@use '@/assets/tokens' as *;
 
 .sy-user-menu-btn-ctn {
 	position: relative;

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

@@ -21,7 +21,7 @@ const meta = {
 		valueKey: { control: 'text' },
 		vuetifyOptions: { control: 'object' },
 		displayAsterisk: { control: 'boolean' },
-		readOnly: { control: 'boolean' },
+		readonly: { control: 'boolean' },
 	},
 } as Meta<typeof SyInputSelect>
 
@@ -73,7 +73,7 @@ export const Default: Story = {
 				color: 'primary',
 			},
 		},
-		readOnly: false,
+		readonly: false,
 	},
 	render: (args) => {
 		return {
@@ -86,7 +86,7 @@ export const Default: Story = {
 					<SyInputSelect
 						v-bind="args"
 						:vuetify-options="args.vuetifyOptions"
-						:read-only="args.readOnly"
+						:readonly="args.readonly"
 					/>
 				</div>
 				<br/><br/><br/><br/>

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

@@ -15,7 +15,7 @@
 		errorMessages?: string | string[]
 		isHeaderToolbar?: boolean
 		displayAsterisk?: boolean
-		readOnly?: boolean
+		readonly?: boolean
 	}>(), {
 		modelValue: null,
 		items: () => [],
@@ -27,7 +27,7 @@
 		errorMessages: () => [],
 		isHeaderToolbar: false,
 		displayAsterisk: false,
-		readOnly: false,
+		readonly: false,
 	})
 
 	const options = useCustomizableOptions(defaultOptions, props)
@@ -39,7 +39,7 @@
 	const hasError = ref(false)
 
 	const toggleMenu = () => {
-		if (props.readOnly) return
+		if (props.readonly) return
 		isOpen.value = !isOpen.value
 	}
 
@@ -160,7 +160,7 @@
 		:label="labelWithAsterisk"
 		:title="labelWithAsterisk"
 		role="menu"
-		:read-only="props.readOnly"
+		:readonly="props.readonly"
 		@click="checkForErrors"
 	>
 		<div

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

@@ -30,6 +30,10 @@ const meta: Meta<typeof SySelect> = {
 			control: 'boolean',
 			description: 'Retourne l\'objet complet sélectionné',
 		},
+		clearable: {
+			control: 'boolean',
+			description: 'Permet de vider la sélection',
+		},
 	},
 } as Meta<typeof SySelect>
 

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-	import { mdiInformation, mdiMenuDown } from '@mdi/js'
-	import { ref, watch, onMounted, computed, type PropType } from 'vue'
+	import { mdiInformation, mdiMenuDown, mdiCloseCircle } from '@mdi/js'
+	import { ref, watch, onMounted, onUnmounted, computed, type PropType } from 'vue'
 	import type { VTextField } from 'vuetify/components'
+	import { locales } from './locales'
+
+	export type ItemType = {
+		[key: string]: unknown
+	}
 
 	const props = defineProps({
 		modelValue: {
@@ -9,7 +14,7 @@
 			default: null,
 		},
 		items: {
-			type: Array,
+			type: Array as PropType<ItemType[]>,
 			default: () => [],
 		},
 		label: {
@@ -60,7 +65,11 @@
 			type: String,
 			default: undefined,
 		},
-		readOnly: {
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		clearable: {
 			type: Boolean,
 			default: false,
 		},
@@ -76,17 +85,36 @@
 	const labelRef = ref<HTMLElement | null>(null)
 
 	const toggleMenu = () => {
-		if (props.readOnly) return
+		if (props.readonly) return
 		isOpen.value = !isOpen.value
+		if (isOpen.value) updateListPosition()
 	}
 	const closeList = () => {
 		isOpen.value = false
 	}
 	const inputId = ref(`sy-select-${Math.random().toString(36).substring(7)}`)
 
+	const listStyles = ref<Record<string, string>>({})
+	const updateListPosition = () => {
+		if (input.value?.$el) {
+			const rect = input.value.$el.getBoundingClientRect()
+			listStyles.value = {
+				position: 'fixed',
+				top: `${rect.bottom}px`,
+				left: `${rect.left}px`,
+				width: `${rect.width}px`,
+				zIndex: '999',
+			}
+		}
+	}
+
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 	const selectItem = (item: any) => {
-		if (props.returnObject) {
+		if (item === null) {
+			selectedItem.value = null
+			emit('update:modelValue', null)
+		}
+		else if (props.returnObject) {
 			selectedItem.value = item
 			emit('update:modelValue', item)
 		}
@@ -164,10 +192,21 @@
 		}
 	})
 
+	watch(isOpen, (open) => {
+		if (open) updateListPosition()
+	})
+
 	onMounted(() => {
 		if (labelRef.value) {
 			labelWidth.value = labelRef.value.offsetWidth + 64
 		}
+		window.addEventListener('scroll', updateListPosition, true)
+		window.addEventListener('resize', updateListPosition)
+	})
+
+	onUnmounted(() => {
+		window.removeEventListener('scroll', updateListPosition, true)
+		window.removeEventListener('resize', updateListPosition)
 	})
 
 	defineExpose({
@@ -194,7 +233,7 @@
 			:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
 			:display-asterisk="displayAsterisk"
 			:bg-color="props.bgColor"
-			:readonly="props.readOnly"
+			readonly
 			class="sy-select"
 			:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
 			@click="toggleMenu"
@@ -208,6 +247,15 @@
 				>
 					{{ mdiInformation }}
 				</VIcon>
+				<VIcon
+					v-if="props.clearable && selectedItemText"
+					class="sy-select__clear-icon"
+					:class="hasError ? 'mr-14' : 'mr-8'"
+					:aria-label="locales.clear"
+					@click.stop.prevent="selectItem(null)"
+				>
+					{{ mdiCloseCircle }}
+				</VIcon>
 				<VIcon class="arrow">
 					{{ mdiMenuDown }}
 				</VIcon>
@@ -220,7 +268,10 @@
 		<VList
 			v-if="isOpen"
 			class="v-list"
-			:style="`min-width: ${input?.$el.offsetWidth}px`"
+			:style="{
+				minWidth: `${input?.$el.offsetWidth}px`,
+				...listStyles
+			}"
 			bg-color="white"
 			@keydown.esc.prevent="isOpen = false"
 		>
@@ -230,8 +281,14 @@
 				:ref="'options-' + index"
 				role="option"
 				class="v-list-item"
-				:aria-selected="selectedItem === item"
+				:aria-selected="props.returnObject
+					? selectedItem && selectedItem[props.valueKey] === item[props.valueKey]
+					: selectedItem === item[props.valueKey]"
 				:tabindex="index + 1"
+				:class="{ active: props.returnObject
+					? selectedItem && selectedItem[props.valueKey] === item[props.valueKey]
+					: selectedItem === item[props.valueKey]
+				}"
 				@click="selectItem(item)"
 			>
 				<VListItemTitle>
@@ -261,7 +318,6 @@
 }
 
 .v-list {
-	position: absolute;
 	left: inherit !important;
 	margin-top: -22px;
 	max-height: 300px;
@@ -280,12 +336,21 @@
 	background-color: rgb(0 0 0 / 8%);
 }
 
+.v-list-item.active {
+	background-color: rgb(0 0 0 / 8%);
+}
+
 .v-icon {
 	position: absolute;
 	right: 10px;
 	color: tokens.$grey-darken-20;
 }
 
+.sy-select__clear-icon {
+	color: tokens.$grey-darken-20 !important;
+	opacity: var(--v-medium-emphasis-opacity) !important;
+}
+
 :deep(.v-field__input) {
 	color: tokens.$grey-darken-20;
 }

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

@@ -0,0 +1,3 @@
+export const locales = {
+	clear: 'Effacer la sélection',
+}

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

@@ -3,6 +3,10 @@ import { expect, describe, it } from 'vitest'
 import SySelect from '../SySelect.vue'
 import { vuetify } from '@tests/unit/setup'
 
+type ItemType = {
+	[key: string]: unknown
+}
+
 describe('SySelect.vue', () => {
 	it('renders the component with default props', () => {
 		const wrapper = mount(SySelect, {
@@ -123,7 +127,7 @@ describe('SySelect.vue', () => {
 	})
 
 	it('formats items correctly', () => {
-		const items = ['Option 1', 'Option 2']
+		const items = ['Option 1', 'Option 2'] as unknown as ItemType[]
 		const wrapper = mount(SySelect, {
 			props: { items, textKey: 'text', valueKey: 'value' },
 			global: {
@@ -306,7 +310,7 @@ describe('SySelect.vue', () => {
 	it('emit the value when items is an array of string', async () => {
 		const wrapper = mount(SySelect, {
 			props: {
-				items: ['Option 1', 'Option 2'],
+				items: ['Option 1', 'Option 2'] as unknown as ItemType[],
 			},
 			global: {
 				plugins: [vuetify],
@@ -323,4 +327,22 @@ describe('SySelect.vue', () => {
 		await secondItem!.trigger('click')
 		expect(wrapper.emitted()['update:modelValue'][1]).toEqual(['Option 2'])
 	})
+
+	it('is clearable when clearable is true', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				modelValue: '1',
+				clearable: true,
+				items: [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const clearBtn = wrapper.find('.sy-select__clear-icon')
+		expect(clearBtn.exists()).toBe(true)
+		await clearBtn.trigger('click')
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([null])
+	})
 })

package/src/components/Customs/SyTextField/Accessibilite.stories.ts

@@ -217,6 +217,13 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/SyTextField.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/4028" target="_blank"
+					  style="color:#0C41BD;">issue #4028</a>)</p>
+			  </div>
             `,
 		}
 	},