@cnamts/synapse 0.0.12-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.mdx

@@ -5,7 +5,7 @@ import * as SyBtnSelectStories from "./SyBtnSelect.stories";
 
 # SyBtnSelect
 
-Le composant `SyBtnSelect` est utilisé pour proposer une sélection d'options avec un bouton personnalisé, conforme au style du Design System et qui respecte les règles d'accessibilité RGAA.<br/>
+Le composant `SyBtnSelect` est utilisé pour proposer une sélection d'options avec un bouton personnalisé, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.<br/>
 Il est basé sur un `v-btn`.
 
 <Canvas of={SyBtnSelectStories.Default}/>

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.mdx

@@ -5,7 +5,7 @@ import * as SyInputSelectStories from "./SyInputSelect.stories";
 
 # SyInputSelect
 
-Le composant `SyInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles RGAA.<br/>
+Le composant `SyInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.<br/>
 Il est basé sur un `v-input`.
 
 <Canvas of={SyInputSelectStories.Default} />

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.mdx

@@ -5,7 +5,7 @@ import * as SySelectStories from "./SySelect.stories";
 
 # SySelect
 
-Le composant `SySelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles d'accessibilité RGAA.<br/>
+Le composant `SySelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles d'accessibilité <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.<br/>
 Il est basé sur un `v-textfield`.
 
 <Canvas of={SySelectStories.Default} />

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

@@ -52,6 +52,18 @@
 			type: Boolean,
 			default: false,
 		},
+		disableErrorHandling: {
+			type: Boolean,
+			default: false,
+		},
+		bgColor: {
+			type: String,
+			default: undefined,
+		},
+		readOnly: {
+			type: Boolean,
+			default: false,
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -64,6 +76,7 @@
 	const labelRef = ref<HTMLElement | null>(null)
 
 	const toggleMenu = () => {
+		if (props.readOnly) return
 		isOpen.value = !isOpen.value
 	}
 	const closeList = () => {
@@ -118,6 +131,8 @@
 	})
 
 	const isRequired = computed(() => {
+		// Si la gestion des erreurs est désactivée, on ne considère jamais le champ comme requis
+		if (props.disableErrorHandling) return false
 		return (props.required || props.errorMessages.length > 0) && !selectedItem.value
 	})
 
@@ -129,7 +144,13 @@
 
 	watch([isOpen, hasError], ([newIsOpen, newHasError]) => {
 		if (!newIsOpen) {
-			hasError.value = (!selectedItem.value && isRequired.value) || props.errorMessages.length > 0
+			// Si la gestion des erreurs est désactivée, on ne met jamais hasError à true
+			if (props.disableErrorHandling) {
+				hasError.value = false
+			}
+			else {
+				hasError.value = (!selectedItem.value && isRequired.value) || props.errorMessages.length > 0
+			}
 		}
 		else {
 			hasError.value = newHasError
@@ -137,7 +158,10 @@
 	})
 
 	watch(() => props.errorMessages, (newValue) => {
-		hasError.value = newValue.length > 0
+		// Si la gestion des erreurs est désactivée, on ne met jamais hasError à true
+		if (!props.disableErrorHandling) {
+			hasError.value = newValue.length > 0
+		}
 	})
 
 	onMounted(() => {
@@ -162,14 +186,15 @@
 			:title="labelWithAsterisk"
 			color="primary"
 			tabindex="0"
-			readonly
 			:disabled="disabled"
 			:label="labelWithAsterisk"
 			:aria-label="labelWithAsterisk"
-			:error-messages="errorMessages"
+			:error-messages="props.disableErrorHandling ? [] : errorMessages"
 			:variant="outlined ? 'outlined' : 'underlined'"
-			:rules="isRequired ? ['Le champ est requis.'] : []"
+			: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"
@@ -196,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
@@ -238,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.mdx

@@ -1,11 +1,11 @@
 import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
-import * as SyTextFieldStories from "./SyTextField.stories";
+import * as SyTextFieldStories from "./SyTextField.stories.ts";
 
 <Meta of={SyTextFieldStories} />
 
 # SyTextField
 
-Le composant `SyTextField` est utilisé pour proposer une alternative au `TextField` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité RGAA.
+Le composant `SyTextField` est utilisé pour proposer une alternative au `TextField` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.
 
 Il étend les fonctionnalités de base de Vuetify avec :