@cnamts/synapse 0.0.13-alpha → 0.0.15-alpha

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/CopyBtn/CopyBtn.stories.ts

@@ -40,7 +40,7 @@ const meta = {
 					location: 'end center',
 					offset: 16,
 					zIndex: 8,
-					contentClass: 'vd-copy-tooltip-menu text-white text-body-2 ml-2',
+					contentClass: 'sy-copy-tooltip-menu text-white text-body-2 ml-2',
 				},
 				btn: {
 					icon: true,
@@ -98,7 +98,7 @@ export const Default: Story = {
 				location: 'end center',
 				offset: 16,
 				zIndex: 8,
-				contentClass: 'vd-copy-tooltip-menu text-white text-body-2 ml-2',
+				contentClass: 'sy-copy-tooltip-menu text-white text-body-2 ml-2',
 			},
 			btn: {
 				icon: true,

package/src/components/CopyBtn/CopyBtn.vue

@@ -15,11 +15,11 @@
 		hideTooltip?: boolean
 		tooltipDuration?: number
 	}>(), {
-		ariaLabel: 'copy-btn',
+		ariaLabel: 'bouton de copie',
 		ariaOwns: 'copy-btn',
 		textToCopy: '',
 		hideTooltip: false,
-		tooltipDuration: 2500,
+		tooltipDuration: 5000,
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -53,18 +53,18 @@
 <template>
 	<div
 		:id="props.ariaOwns"
-		class="vd-copy-btn"
+		class="sy-copy-btn"
 	>
-		<VMenu
-			v-bind="options.menu"
-			:id="props.ariaOwns"
+		<VTooltip
 			v-model="tooltip"
-			:disabled="props.hideTooltip"
-			transition="fade-transition"
+			location="right"
+			:open-on-click="true"
+			:open-on-hover="false"
+			:disabled="hideTooltip"
 		>
-			<template #activator="{ props: menuProps }">
+			<template #activator="{ props: tooltipProps }">
 				<VBtn
-					v-bind="{ ...menuProps, ...options.btn }"
+					v-bind="{...tooltipProps,...options.btn}"
 					:aria-label="props.ariaLabel"
 					:aria-owns="props.ariaOwns"
 					:data-test-id="props.ariaOwns"
@@ -77,23 +77,29 @@
 					</slot>
 				</VBtn>
 			</template>
-
-			<slot name="tooltip">
-				{{ locales.tooltip }}
-			</slot>
-		</VMenu>
+			<span
+				role="status"
+			><slot name="tooltip">{{ locales.tooltip }}</slot></span>
+		</VTooltip>
 	</div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @use '@/assets/tokens';
 
-.vd-copy-tooltip-menu {
-	padding: 6px 16px;
-	box-shadow: none;
-	margin-top: 2px;
-	background: rgb(84 88 89 / 95%);
-	color: white;
+.v-btn:deep() {
+	.v-btn__underlay,
+	.v-btn__overlay {
+		display: none;
+	}
+}
+
+.v-btn {
+	outline: 0;
+}
+
+.v-btn:focus-visible {
+	background: rgb(84 88 89 / 7%);
 }
 
 .v-btn--icon .v-icon {

package/src/components/CopyBtn/config.ts

@@ -5,12 +5,13 @@ export const config = {
 		location: 'end center' as locationType,
 		offset: 16,
 		zIndex: 8,
-		contentClass: 'vd-copy-tooltip-menu text-white text-body-2 ml-2',
+		contentClass: 'sy-copy-tooltip-menu text-white text-body-2 ml-2',
 	},
 	btn: {
 		icon: true,
 		variant: 'text' as VariantType,
 		density: 'comfortable' as DensityType,
+		rounded: 'pill',
 	},
 	icon: {
 		// TODO refactor to use our theme color

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

@@ -1,7 +1,32 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CopyBtn > renders correctly 1`] = `
-"<div id="copy-btn" class="vd-copy-btn" label="test">
-  <v-menu-stub offset="16" contentclass="vd-copy-tooltip-menu text-white text-body-2 ml-2" id="copy-btn" submenu="false" attach="false" closeonback="true" contained="false" disabled="false" noclickanimation="false" modelvalue="false" persistent="false" scrim="false" zindex="8" activatorprops="[object Object]" openonhover="false" closeoncontentclick="true" closedelay="250" opendelay="300" eager="false" locationstrategy="connected" location="end center" origin="auto" scrollstrategy="reposition" transition="fade-transition"></v-menu-stub>
-</div>"
+<div
+  class="sy-copy-btn"
+  id="copy-btn"
+  label="test"
+>
+  <v-tooltip-stub
+    activatorprops="[object Object]"
+    attach="false"
+    closeonback="false"
+    closeoncontentclick="false"
+    contained="false"
+    disabled="false"
+    eager="true"
+    location="right"
+    locationstrategy="connected"
+    minwidth="0"
+    modelvalue="false"
+    noclickanimation="false"
+    offset="10"
+    openonclick="true"
+    openonhover="false"
+    origin="auto"
+    scrim="false"
+    scrollstrategy="reposition"
+    transition="false"
+    zindex="2000"
+  ></v-tooltip-stub>
+</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

@@ -128,7 +128,7 @@
 <template>
 	<div
 		ref="buttonRef"
-		class="vd-user-menu-btn-ctn d-inline-block"
+		class="sy-user-menu-btn-ctn d-inline-block"
 	>
 		<VMenu
 			:id="generatedId"
@@ -136,6 +136,7 @@
 			location="bottom end"
 			transition="fade-transition"
 			v-bind="props.options['menu']"
+			scroll-strategy="none"
 			z-index="9999"
 		>
 			<template #activator="{ props: menuProps }">
@@ -146,7 +147,7 @@
 					:icon="iconOnly"
 					:size="iconOnly ? 'x-large' : 'default'"
 					:width="iconOnly ? 'auto' : undefined"
-					class="vd-user-menu-btn"
+					class="sy-user-menu-btn"
 					v-bind="{
 						...menuProps,
 						...props.options['btn'],
@@ -214,9 +215,8 @@
 
 <style lang="scss" scoped>
 @use '@/assets/tokens';
-@use '@/assets/tokens' as *;
 
-.vd-user-menu-btn-ctn {
+.sy-user-menu-btn-ctn {
 	position: relative;
 	z-index: 1;
 
@@ -229,7 +229,7 @@
 	}
 }
 
-.vd-user-menu-btn {
+.sy-user-menu-btn {
 	outline: none;
 	padding: 12px !important;
 
@@ -248,7 +248,7 @@
 	}
 }
 
-:deep(.vd-user-menu-btn:focus > .v-btn__overlay) {
+:deep(.sy-user-menu-btn:focus > .v-btn__overlay) {
 	opacity: 0 !important;
 }
 </style>

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

@@ -47,7 +47,7 @@ describe('SyBtnSelect', () => {
 			},
 		})
 
-		const button = wrapper.find('.vd-user-menu-btn')
+		const button = wrapper.find('.sy-user-menu-btn')
 		await button.trigger('click')
 
 		expect(wrapper.vm.isOpen).toBe(true)
@@ -72,7 +72,7 @@ describe('SyBtnSelect', () => {
 			},
 		})
 
-		const button = wrapper.find('.vd-user-menu-btn')
+		const button = wrapper.find('.sy-user-menu-btn')
 		expect(wrapper.vm.isOpen).toBe(false)
 
 		await button.trigger('click')

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

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

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

@@ -15,6 +15,7 @@
 		errorMessages?: string | string[]
 		isHeaderToolbar?: boolean
 		displayAsterisk?: boolean
+		readonly?: boolean
 	}>(), {
 		modelValue: null,
 		items: () => [],
@@ -26,6 +27,7 @@
 		errorMessages: () => [],
 		isHeaderToolbar: false,
 		displayAsterisk: false,
+		readonly: false,
 	})
 
 	const options = useCustomizableOptions(defaultOptions, props)
@@ -37,6 +39,7 @@
 	const hasError = ref(false)
 
 	const toggleMenu = () => {
+		if (props.readonly) return
 		isOpen.value = !isOpen.value
 	}
 
@@ -157,6 +160,7 @@
 		:label="labelWithAsterisk"
 		:title="labelWithAsterisk"
 		role="menu"
+		: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: {
@@ -56,6 +61,18 @@
 			type: Boolean,
 			default: false,
 		},
+		bgColor: {
+			type: String,
+			default: undefined,
+		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		clearable: {
+			type: Boolean,
+			default: false,
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -68,16 +85,36 @@
 	const labelRef = ref<HTMLElement | null>(null)
 
 	const toggleMenu = () => {
+		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)
 		}
@@ -155,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({
@@ -177,7 +225,6 @@
 			:title="labelWithAsterisk"
 			color="primary"
 			tabindex="0"
-			readonly
 			:disabled="disabled"
 			:label="labelWithAsterisk"
 			:aria-label="labelWithAsterisk"
@@ -185,6 +232,8 @@
 			:variant="outlined ? 'outlined' : 'underlined'"
 			:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
 			:display-asterisk="displayAsterisk"
+			:bg-color="props.bgColor"
+			readonly
 			class="sy-select"
 			:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
 			@click="toggleMenu"
@@ -198,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>
@@ -210,7 +268,11 @@
 		<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"
 		>
 			<VListItem
@@ -219,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>
@@ -250,10 +318,8 @@
 }
 
 .v-list {
-	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%);
@@ -270,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/SyTextField.stories.ts

@@ -113,12 +113,12 @@ const meta = {
 			control: 'boolean',
 			default: false,
 		},
-		'isDisabled': {
+		'disabled': {
 			description: 'Désactive le champ',
 			control: 'boolean',
 			default: false,
 		},
-		'isReadOnly': {
+		'readonly': {
 			description: 'Rend le champ en lecture seule',
 			control: 'boolean',
 			default: false,

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -30,7 +30,7 @@
 			errorMessages?: string[] | null
 			warningMessages?: string[] | null
 			successMessages?: string[] | null
-			isReadOnly?: boolean
+			readonly?: boolean
 			isActive?: boolean
 			baseColor?: string
 			bgColor?: string
@@ -41,7 +41,7 @@
 			density?: 'default' | 'comfortable' | 'compact'
 			direction?: 'horizontal' | 'vertical'
 			isDirty?: boolean
-			isDisabled?: boolean
+			disabled?: boolean
 			isOnError?: boolean
 			isFlat?: boolean
 			isFocused?: boolean
@@ -94,7 +94,7 @@
 			errorMessages: null,
 			warningMessages: null,
 			successMessages: null,
-			isReadOnly: false,
+			readonly: false,
 			isClearable: false,
 			isActive: false,
 			baseColor: undefined,
@@ -105,7 +105,7 @@
 			density: 'default',
 			direction: 'horizontal',
 			isDirty: false,
-			isDisabled: false,
+			disabled: false,
 			isOnError: false,
 			isFlat: false,
 			isFocused: false,
@@ -313,7 +313,7 @@
 		:density="props.density"
 		:direction="props.direction"
 		:dirty="props.isDirty"
-		:disabled="props.isDisabled"
+		:disabled="props.disabled"
 		:display-asterisk="isShouldDisplayAsterisk"
 		:error="hasError"
 		:error-messages="errors"
@@ -336,7 +336,7 @@
 		:persistent-placeholder="displayPersistentPlaceholder"
 		:placeholder="props.placeholder"
 		:prefix="props.prefix"
-		:readonly="props.isReadOnly"
+		:readonly="props.readonly"
 		:reverse="props.isReversed"
 		:role="props.role"
 		:rounded="props.rounded"

package/src/components/DataList/DataList.vue

@@ -89,7 +89,7 @@
 	<div
 		:aria-label="label"
 		:style="widthStyles"
-		class="vd-data-list"
+		class="sy-data-list"
 	>
 		<VFadeTransition mode="out-in">
 			<DataListLoading
@@ -124,7 +124,7 @@
 						:placeholder="placeholder"
 						:vuetify-options="item.options"
 						:class="getItemClass(index, item.class)"
-						class="vd-data-list-item text-body-1"
+						class="sy-data-list-item text-body-1"
 						@click:action="emit('click:item-action', index)"
 					/>
 				</ul>

package/src/components/DataList/DataListLoading/DataListLoading.vue

@@ -24,7 +24,7 @@
 <template>
 	<div
 		aria-hidden="true"
-		class="vd-data-list-loading"
+		class="sy-data-list-loading"
 	>
 		<HeaderLoading
 			v-if="heading"
@@ -38,7 +38,7 @@
 				v-for="index in itemsNumber"
 				:key="index + '-loading-item'"
 				:class="{ 'mb-4': index !== itemsNumber }"
-				class="vd-data-list-loading-item"
+				class="sy-data-list-loading-item"
 			>
 				<HeaderLoading
 					v-if="!row"