@cnamts/synapse 0.0.13-alpha → 0.0.14-alpha

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.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'],
@@ -216,7 +217,7 @@
 @use '@/assets/tokens';
 @use '@/assets/tokens' as *;
 
-.vd-user-menu-btn-ctn {
+.sy-user-menu-btn-ctn {
 	position: relative;
 	z-index: 1;
 
@@ -229,7 +230,7 @@
 	}
 }
 
-.vd-user-menu-btn {
+.sy-user-menu-btn {
 	outline: none;
 	padding: 12px !important;
 
@@ -248,7 +249,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"
+						:read-only="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"
+		:read-only="props.readOnly"
 		@click="checkForErrors"
 	>
 		<div

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

@@ -56,6 +56,14 @@
 			type: Boolean,
 			default: false,
 		},
+		bgColor: {
+			type: String,
+			default: undefined,
+		},
+		readOnly: {
+			type: Boolean,
+			default: false,
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -68,6 +76,7 @@
 	const labelRef = ref<HTMLElement | null>(null)
 
 	const toggleMenu = () => {
+		if (props.readOnly) return
 		isOpen.value = !isOpen.value
 	}
 	const closeList = () => {
@@ -177,7 +186,6 @@
 			:title="labelWithAsterisk"
 			color="primary"
 			tabindex="0"
-			readonly
 			:disabled="disabled"
 			:label="labelWithAsterisk"
 			:aria-label="labelWithAsterisk"
@@ -185,6 +193,8 @@
 			:variant="outlined ? 'outlined' : 'underlined'"
 			:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
 			:display-asterisk="displayAsterisk"
+			:bg-color="props.bgColor"
+			:readonly="props.readOnly"
 			class="sy-select"
 			:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
 			@click="toggleMenu"
@@ -211,6 +221,7 @@
 			v-if="isOpen"
 			class="v-list"
 			:style="`min-width: ${input?.$el.offsetWidth}px`"
+			bg-color="white"
 			@keydown.esc.prevent="isOpen = false"
 		>
 			<VListItem
@@ -253,7 +264,6 @@
 	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%);

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"

package/src/components/DataList/DataListLoading/tests/DataListLoading.spec.ts

@@ -17,7 +17,7 @@ describe('DataListLoading', () => {
 			},
 		})
 
-		const elExists = wrapper.find('.vd-data-list-loading-item').exists()
+		const elExists = wrapper.find('.sy-data-list-loading-item').exists()
 		expect(elExists).toBe(true)
 	})
 })

package/src/components/DataList/tests/DataList.spec.ts

@@ -31,11 +31,11 @@ describe('DataList', () => {
 			},
 		})
 
-		const elExists = wrapper.find('.vd-data-list').exists()
+		const elExists = wrapper.find('.sy-data-list').exists()
 		expect(elExists).toBe(true)
 
 		// Check items exists
-		const itemsExists = wrapper.find('.vd-data-list-item').exists()
+		const itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(true)
 
 		const titleExists = wrapper.find('h4').exists()
@@ -68,7 +68,7 @@ describe('DataList', () => {
 		})
 
 		// Check items does not exist
-		const itemsExists = wrapper.find('.vd-data-list-item').exists()
+		const itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(false)
 	})
 
@@ -91,7 +91,7 @@ describe('DataList', () => {
 		})
 
 		// Check items does not exist
-		const itemsExists = wrapper.find('.vd-data-list-item .v-icon').exists()
+		const itemsExists = wrapper.find('.sy-data-list-item .v-icon').exists()
 		expect(itemsExists).toBe(true)
 	})
 
@@ -112,7 +112,7 @@ describe('DataList', () => {
 
 		// Check that items now exist
 		const itemsExists = wrapper
-			.find('.vd-data-list-item.custom-class')
+			.find('.sy-data-list-item.custom-class')
 			.exists()
 
 		expect(itemsExists).toBe(true)
@@ -132,7 +132,7 @@ describe('DataList', () => {
 		})
 
 		// Check that items does not exist
-		let itemsExists = wrapper.find('.vd-data-list-item').exists()
+		let itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(false)
 
 		await wrapper.setProps({
@@ -140,7 +140,7 @@ describe('DataList', () => {
 		})
 
 		// Check that items now exist
-		itemsExists = wrapper.find('.vd-data-list-item').exists()
+		itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(true)
 	})
 
@@ -159,7 +159,7 @@ describe('DataList', () => {
 			},
 		})
 
-		const itemWithAction = wrapper.findAll('.vd-data-list-item').at(1)
+		const itemWithAction = wrapper.findAll('.sy-data-list-item').at(1)
 		expect(itemWithAction?.exists()).toBe(true)
 	})
 
@@ -179,11 +179,11 @@ describe('DataList', () => {
 		})
 
 		// Find the second item element
-		const itemWithAction = wrapper.findAll('.vd-data-list-item').at(2)
+		const itemWithAction = wrapper.findAll('.sy-data-list-item').at(2)
 		expect(itemWithAction?.exists()).toBe(true)
 
 		const actionBtn = (itemWithAction as DOMWrapper<Element>).find(
-			'.vd-data-list-item-action-btn',
+			'.sy-data-list-item-action-btn',
 		)
 		expect(actionBtn.exists()).toBe(true)
 

package/src/components/DataListGroup/tests/DataListGroup.spec.ts

@@ -31,7 +31,7 @@ describe('DataListGroup', () => {
 			},
 		})
 
-		expect(wrapper.find('.vd-data-list-loading').exists()).toBe(true)
+		expect(wrapper.find('.sy-data-list-loading').exists()).toBe(true)
 	})
 
 	it('emit the right event when clicking on a item button', async () => {

package/src/components/DataListItem/DataListItem.vue

@@ -49,7 +49,7 @@
 </script>
 
 <template>
-	<li class="vd-data-list-item d-flex flex-wrap">
+	<li class="sy-data-list-item d-flex flex-wrap">
 		<slot name="icon">
 			<VIcon
 				v-if="icon"
@@ -59,16 +59,16 @@
 			</VIcon>
 		</slot>
 
-		<div class="vd-data-list-item-content">
-			<div :class="{ 'vd-row': row }">
+		<div class="sy-data-list-item-content">
+			<div :class="{ 'sy-row': row }">
 				<div
-					class="vd-data-list-item-label text-caption"
+					class="sy-data-list-item-label text-caption"
 					:style="{ color: labelColor }"
 				>
 					{{ label }}
 				</div>
 
-				<div class="vd-data-list-item-value">
+				<div class="sy-data-list-item-value">
 					<slot
 						name="value"
 						v-bind="{ itemValue }"
@@ -99,7 +99,7 @@
 				<VBtn
 					v-if="action"
 					v-bind="options.actionBtn"
-					class="vd-data-list-item-action-btn"
+					class="sy-data-list-item-action-btn"
 					@click="emits('click:action')"
 				>
 					{{ action }}
@@ -110,11 +110,11 @@
 </template>
 
 <style lang="scss" scoped>
-.vd-row {
+.sy-row {
 	display: flex;
 	flex-wrap: wrap;
 
-	.vd-data-list-item-label {
+	.sy-data-list-item-label {
 		align-self: center;
 
 		&::after {
@@ -124,7 +124,7 @@
 	}
 }
 
-.vd-data-list-item-action-btn.v-btn {
+.sy-data-list-item-action-btn.v-btn {
 	min-width: 0;
 	margin: 0 -1px;
 }

package/src/components/DataListItem/tests/DataListItem.spec.ts

@@ -66,7 +66,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elValue = wrapper.find('.vd-data-list-item-value span')
+		const elValue = wrapper.find('.sy-data-list-item-value span')
 
 		expect(elValue.text()).toBe('<span>Custom Value</span>')
 	})
@@ -83,7 +83,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elValue = wrapper.find('.vd-data-list-item-value span')
+		const elValue = wrapper.find('.sy-data-list-item-value span')
 
 		expect(elValue.text()).toBe('Paul Dupont')
 	})
@@ -115,7 +115,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elAction = wrapper.find('.vd-data-list-item-action-btn')
+		const elAction = wrapper.find('.sy-data-list-item-action-btn')
 		expect(elAction.text()).toBe('Click Me')
 	})
 
@@ -130,7 +130,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const button = wrapper.find('.vd-data-list-item-action-btn')
+		const button = wrapper.find('.sy-data-list-item-action-btn')
 		await button.trigger('click')
 
 		expect(wrapper.emitted('click:action')).toBeTruthy()
@@ -150,7 +150,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elRow = wrapper.find('.vd-row')
+		const elRow = wrapper.find('.sy-row')
 		expect(elRow.exists()).toBe(true)
 	})
 })

package/src/components/DatePicker/DatePicker.mdx

@@ -89,7 +89,7 @@ Les séparateurs peuvent être `/`, `-` ou `.`
 - **Description** : Indique si le champ est obligatoire
 - **Défaut** : `false`
 
-### isDisabled
+### disabled
 - **Type** : `boolean`
 - **Description** : Désactive le champ
 - **Défaut** : `false`