@cnamts/synapse 0.0.13-alpha → 0.0.14-alpha

package/src/components/DatePicker/DatePicker.stories.ts

@@ -61,7 +61,7 @@ const meta = {
 			control: 'boolean',
 			description: 'Icône à la fin du champ',
 		},
-		isDisabled: {
+		disabled: {
 			control: 'boolean',
 			description: 'Désactive le champ',
 		},
@@ -129,7 +129,7 @@ export const Default: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '',
@@ -189,7 +189,7 @@ export const DateRange: Story = {
 		displayRange: true,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: ['', ''],
@@ -249,7 +249,7 @@ export const WithAppendIcon: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '',
@@ -309,7 +309,7 @@ export const WithoutIcon: Story = {
 		displayRange: false,
 		displayIcon: false,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '',
@@ -369,7 +369,7 @@ export const BirthDate: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '',
@@ -430,7 +430,7 @@ export const WithError: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '01/01/2100',
@@ -498,7 +498,7 @@ export const WithWarning: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '20/12/2023',
@@ -569,7 +569,7 @@ export const WithSuccess: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '22/01/2024',
@@ -755,7 +755,7 @@ export const WithDateFormatReturn: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '24/12/2025',
@@ -1027,7 +1027,7 @@ export const WithErrorDisabled: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		disableErrorHandling: true,

package/src/components/DatePicker/DatePicker.vue

@@ -28,14 +28,15 @@
 		customRules?: { type: string, options: any }[]
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
 		customWarningRules?: { type: string, options: any }[]
-		isDisabled?: boolean
+		disabled?: boolean
 		noIcon?: boolean
 		noCalendar?: boolean
 		isOutlined?: boolean
-		isReadOnly?: boolean
+		readOnly?: boolean
 		width?: string
 		disableErrorHandling?: boolean
 		showSuccessMessages?: boolean
+		bgColor?: string
 	}>(), {
 		modelValue: undefined,
 		placeholder: 'Sélectionner une date',
@@ -50,14 +51,15 @@
 		displayPrependIcon: true,
 		customRules: () => [],
 		customWarningRules: () => [],
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		isOutlined: true,
-		isReadOnly: false,
+		readOnly: false,
 		width: '100%',
 		disableErrorHandling: false,
 		showSuccessMessages: true,
+		bgColor: undefined,
 	})
 
 	const emit = defineEmits<{
@@ -388,7 +390,7 @@
 	}
 
 	const showDatePicker = () => {
-		if (props.isDisabled || props.isReadOnly) return
+		if (props.disabled || props.readOnly) return
 
 		isDatePickerVisible.value = true
 
@@ -529,8 +531,8 @@
 				:required="props.required"
 				:custom-rules="props.customRules"
 				:custom-warning-rules="props.customWarningRules"
-				:is-disabled="props.isDisabled"
-				:is-read-only="props.isReadOnly"
+				:disabled="props.disabled"
+				:read-only="props.readOnly"
 				:is-outlined="props.isOutlined"
 				:display-icon="props.displayIcon"
 				:display-append-icon="props.displayAppendIcon"
@@ -538,6 +540,7 @@
 				:no-icon="props.noIcon"
 				:disable-error-handling="props.disableErrorHandling"
 				:show-success-messages="props.showSuccessMessages"
+				:bg-color="props.bgColor"
 				title="Date text input"
 				@focus="emit('focus')"
 				@blur="emit('blur')"
@@ -552,14 +555,15 @@
 				:error-messages="errorMessages"
 				:warning-messages="warningMessages"
 				:success-messages="props.showSuccessMessages ? successMessages : []"
-				:is-disabled="props.isDisabled"
-				:is-read-only="true"
+				:disabled="props.disabled"
+				:read-only="true"
 				:label="props.placeholder"
 				:no-icon="props.noIcon"
 				:prepend-icon="displayIcon && !displayAppendIcon ? 'calendar' : undefined"
 				:variant-style="props.isOutlined ? 'outlined' : 'underlined'"
 				color="primary"
 				:show-success-messages="props.showSuccessMessages"
+				:bg-color="props.bgColor"
 				is-clearable
 				title="Date Picker"
 				@focus="openDatePicker"
@@ -577,6 +581,7 @@
 				location="bottom"
 				:close-on-content-click="false"
 				:open-on-click="false"
+				scroll-strategy="none"
 				transition="fade-transition"
 				attach="body"
 				:offset="[-20, 5]"

package/src/components/DatePicker/DateTextInput.vue

@@ -16,8 +16,8 @@
 		dateFormatReturn?: string
 		label?: string
 		required?: boolean
-		isDisabled?: boolean
-		isReadOnly?: boolean
+		disabled?: boolean
+		readOnly?: boolean
 		isOutlined?: boolean
 		displayIcon?: boolean
 		displayAppendIcon?: boolean
@@ -34,8 +34,8 @@
 		dateFormatReturn: undefined,
 		label: undefined,
 		required: false,
-		isDisabled: false,
-		isReadOnly: false,
+		disabled: false,
+		readOnly: false,
 		isOutlined: true,
 		displayIcon: true,
 		displayAppendIcon: false,
@@ -454,8 +454,8 @@
 		:warning-messages="warningMessages"
 		:success-messages="showSuccessMessages ? successMessages : []"
 		:is-on-error="isOnError"
-		:is-disabled="isDisabled"
-		:is-read-only="isReadOnly"
+		:disabled="disabled"
+		:read-only="readOnly"
 		:display-icon="displayIcon"
 		:display-append-icon="displayAppendIcon"
 		:no-icon="noIcon"

package/src/components/DatePicker/tests/DateTextInput.spec.ts

@@ -221,15 +221,15 @@ describe('DateTextInput.vue', () => {
 	})
 
 	it('handles disabled state', async () => {
-		await wrapper.setProps({ isDisabled: true })
+		await wrapper.setProps({ disabled: true })
 		const textField = wrapper.findComponent(SyTextField)
-		expect(textField.props('isDisabled')).toBe(true)
+		expect(textField.props('disabled')).toBe(true)
 	})
 
 	it('handles readonly state', async () => {
-		await wrapper.setProps({ isReadOnly: true })
+		await wrapper.setProps({ readOnly: true })
 		const textField = wrapper.findComponent(SyTextField)
-		expect(textField.props('isReadOnly')).toBe(true)
+		expect(textField.props('readOnly')).toBe(true)
 	})
 
 	it('emits focus and blur events', async () => {

package/src/components/DialogBox/DialogBox.vue

@@ -87,7 +87,7 @@
 		:persistent="props.persistent"
 		:retain-focus="false"
 		aria-modal="true"
-		class="vd-dialog-box"
+		class="sy-dialog-box"
 		@keydown.tab="handleFocus"
 	>
 		<VCard
@@ -124,7 +124,7 @@
 			<div
 				v-if="!props.hideActions"
 				v-bind="options.actionsCtn"
-				class="vd-dialog-box-actions-ctn"
+				class="sy-dialog-box-actions-ctn"
 			>
 				<VSpacer v-bind="options.actionsSpacer" />
 
@@ -167,7 +167,7 @@ h2 {
 	text-wrap: balance;
 }
 
-.vd-dialog-box-actions-ctn {
+.sy-dialog-box-actions-ctn {
 	display: flex;
 	flex-direction: column-reverse;
 	justify-content: stretch;
@@ -175,7 +175,7 @@ h2 {
 }
 
 @media screen and (min-width: $container-mobile-max-width) {
-	.vd-dialog-box-actions-ctn {
+	.sy-dialog-box-actions-ctn {
 		flex-direction: row;
 	}
 }

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

@@ -290,7 +290,7 @@ describe('DialogBox', () => {
 
 			const modal = wrapper.getComponent(VCard)
 
-			const cancelBtn = modal.find('.vd-dialog-box-actions-ctn button')
+			const cancelBtn = modal.find('.sy-dialog-box-actions-ctn button')
 			await cancelBtn.trigger('click')
 
 			expect(wrapper.emitted('cancel')).toBeTruthy()

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

@@ -1,18 +1,63 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
-"<div data-v-e77b7070="" modelvalue="true" width="600px" persistent="false" retain-focus="false" aria-modal="true" class="vd-dialog-box">
-  <div data-v-e77b7070="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6" id="dialogContent" aria-labelledby="Test title">
+<div
+  aria-modal="true"
+  class="sy-dialog-box"
+  modelvalue="true"
+  persistent="false"
+  retain-focus="false"
+  width="600px"
+>
+  <div
+    aria-labelledby="Test title"
+    class="
+      pa-6
+      v-card
+      v-card--density-default
+      v-card--variant-elevated
+      v-theme--light
+    "
+    id="dialogContent"
+  >
     <!---->
     <div class="v-card__loader">
-      <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+      <div
+        aria-hidden="true"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        class="
+          v-locale--is-ltr
+          v-progress-linear
+          v-theme--light
+        "
+        role="progressbar"
+        style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+      >
         <!---->
-        <div class="v-progress-linear__background" style="opacity: NaN;"></div>
-        <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
-        <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+        <div
+          class="v-progress-linear__background"
+          style="opacity: NaN;"
+        ></div>
+        <div
+          class="v-progress-linear__buffer"
+          style="opacity: NaN; width: 0%;"
+        ></div>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="fade-transition"
+          persisted="false"
+        >
           <div class="v-progress-linear__indeterminate">
-            <div class="v-progress-linear__indeterminate long"></div>
-            <div class="v-progress-linear__indeterminate short"></div>
+            <div class="
+              long
+              v-progress-linear__indeterminate
+            "></div>
+            <div class="
+              short
+              v-progress-linear__indeterminate
+            "></div>
           </div>
         </transition-stub>
         <!---->
@@ -20,27 +65,121 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
     </div>
     <!---->
     <!---->
-    <div data-v-e77b7070="" class="v-card-title d-flex align-start flex-nowrap pa-0 mb-6 mr-6">
-      <h2 data-v-e77b7070="" class="text-h6 font-weight-bold">Test title</h2>
-      <div data-v-e77b7070="" class="v-spacer"></div><button data-v-e77b7070="" type="button" class="v-btn v-btn--elevated v-btn--icon v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-elevated mt-n2 mr-n2 ml-4" style="height: 32px; width: 32px;" aria-label="Fermer la boîte de dialogue"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><i data-v-e77b7070="" class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+    <div class="
+      align-start
+      d-flex
+      flex-nowrap
+      mb-6
+      mr-6
+      pa-0
+      v-card-title
+    ">
+      <h2 class="
+        font-weight-bold
+        text-h6
+      ">
+        Test title
+      </h2>
+      <div class="v-spacer"></div>
+      <button
+        aria-label="Fermer la boîte de dialogue"
+        class="
+          elevation-0
+          ml-4
+          mr-n2
+          mt-n2
+          v-btn
+          v-btn--density-default
+          v-btn--elevated
+          v-btn--icon
+          v-btn--size-default
+          v-btn--variant-elevated
+          v-theme--light
+        "
+        style="height: 32px; width: 32px;"
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          <i
+            aria-hidden="true"
+            class="
+              M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z
+              mdi
+              notranslate
+              v-icon
+              v-icon--size-default
+              v-theme--light
+            "
+          ></i>
+        </span>
         <!---->
         <!---->
       </button>
     </div>
-    <div data-v-e77b7070="" class="d-flex flex-wrap mt-6 vd-dialog-box-actions-ctn">
-      <div data-v-e77b7070="" class="v-spacer"></div><button data-v-e77b7070="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator="">Cancel</span>
+    <div class="
+      d-flex
+      flex-wrap
+      mt-6
+      sy-dialog-box-actions-ctn
+    ">
+      <div class="v-spacer"></div>
+      <button
+        class="
+          text-primary
+          v-btn
+          v-btn--density-default
+          v-btn--size-default
+          v-btn--variant-text
+          v-theme--light
+        "
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          Cancel
+        </span>
         <!---->
         <!---->
-      </button><button data-v-e77b7070="" type="button" class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated" data-test-id="confirm-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator="">Confirm</span>
+      </button>
+      <button
+        class="
+          bg-primary
+          v-btn
+          v-btn--density-default
+          v-btn--elevated
+          v-btn--size-default
+          v-btn--variant-elevated
+          v-theme--light
+        "
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          Confirm
+        </span>
         <!---->
         <!---->
       </button>
     </div>
     <!---->
-    <!----><span class="v-card__underlay"></span>
+    <!---->
+    <span class="v-card__underlay"></span>
   </div>
-</div>"
+</div>
 `;

package/src/components/DownloadBtn/DownloadBtn.stories.ts

@@ -68,6 +68,18 @@ const meta = {
 				category: 'props',
 			},
 		},
+		backgroundColor: {
+			control: { type: 'text' },
+			description: 'Couleur de fond du bouton parmi la palette du thème.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'white',
+				},
+			},
+		},
 	},
 	args: {
 		vuetifyOptions: {
@@ -222,6 +234,7 @@ export const Dark: Story = {
 	<VThemeProvider theme="dark" with-background class="pa-4">
 		<DownloadBtn
 			:file-promise="download"
+			background-color="black"
 			@error="console.log('error')"
 			@success="console.log('success')"
 		>
@@ -259,6 +272,7 @@ export const Dark: Story = {
 	args: {
 		filePromise: () => axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f'),
 		default: 'Télécharger',
+		backgroundColor: 'black',
 		onError: fn(),
 		onSuccess: fn(),
 	},
@@ -381,13 +395,13 @@ export const Customization: Story = {
     
     const vuetifyOptions = {
 		btn: {
-			variant: 'plain',
+			variant: 'flat',
 			ripple: true,
 			color: 'secondary',
 		},
 		icon: {
 			class: 'ml-2 mr-2',
-			color: 'secondary',
+			color: 'white',
 		},
 	}
 </script>
@@ -402,13 +416,13 @@ export const Customization: Story = {
 		onSuccess: fn(),
 		vuetifyOptions: {
 			btn: {
-				variant: 'plain',
+				variant: 'flat',
 				ripple: true,
 				color: 'secondary',
 			},
 			icon: {
 				class: 'ml-2 mr-2',
-				color: 'secondary',
+				color: 'white',
 			},
 		},
 	},

package/src/components/DownloadBtn/DownloadBtn.vue

@@ -6,6 +6,7 @@
 	import deepmerge from 'deepmerge'
 	import { computed, ref, useAttrs } from 'vue'
 	import { config } from './config'
+	import { locales as defaultLocales } from './locales'
 
 	type State = 'idle' | 'loading' | 'success' | 'error'
 
@@ -17,6 +18,8 @@
 	export interface Props {
 		filePromise: () => Promise<AxiosResponse<Blob>>
 		fallbackFilename?: string
+		backgroundColor?: string
+		locales?: typeof defaultLocales
 	}
 
 	defineOptions({
@@ -25,6 +28,8 @@
 
 	const props = withDefaults(defineProps<Props & CustomizableOptions>(), {
 		fallbackFilename: undefined,
+		backgroundColor: 'white',
+		locales: () => defaultLocales,
 	})
 	const emits = defineEmits(['error', 'success'])
 	const attrs = useAttrs()
@@ -82,8 +87,8 @@
 	<VBtn
 		v-bind="btnOptions"
 		:loading="state === 'loading'"
-		:class="btnOptions.variant === 'outlined' ? 'outlined-style' : ''"
-		class="vd-download-btn"
+		class="sy-download-btn"
+		:class="[`bg-${backgroundColor}`, btnOptions.variant === 'outlined' ? 'outlined-style' : '']"
 		data-testid="download-btn"
 		@click="download"
 	>
@@ -94,11 +99,25 @@
 		</slot>
 
 		<slot />
+
+		<template #loader>
+			<p
+				class="d-sr-only"
+				aria-live="polite"
+			>
+				{{ locales.loader }}
+			</p>
+			<VProgressCircular
+				color="currentColor"
+				indeterminate
+				width="2"
+			/>
+		</template>
 	</VBtn>
 </template>
 
 <style lang="scss" scoped>
-.vd-download-btn :deep() {
+.sy-download-btn :deep() {
 	.v-btn__content {
 		flex-wrap: wrap;
 	}
@@ -108,6 +127,21 @@
 	}
 }
 
+.v-btn:deep() {
+	.v-btn__underlay,
+	.v-btn__overlay {
+		display: none;
+	}
+}
+
+.sy-download-btn:focus-visible {
+	outline: 0;
+}
+
+.sy-download-btn:focus-visible::after {
+	opacity: 1;
+}
+
 .outlined-style {
 	border: 1px solid currentcolor;
 }

package/src/components/DownloadBtn/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	loader: 'Téléchargement en cours...',
+}