@cnamts/synapse 1.0.15 → 1.0.16

package/src/components/Amelipro/AmeliproTextArea/AmeliproTextArea.stories.ts

@@ -5,10 +5,10 @@ import AmeliproTextArea from './AmeliproTextArea.vue'
 const meta = {
 	argTypes: {
 		'append': { description: 'Permet d\'ajouter un élément juste après le champ' },
-		'ariaRequired': {
+		'required': {
 			default: false,
 			description: 'Défini que le champ est obligatoire',
-			name: 'aria-required',
+			name: 'required',
 			type: 'boolean',
 		},
 		'classes': { description: 'Classes à appliquer à la racine du composant' },
@@ -193,19 +193,19 @@ export const Required: Story = {
 	args: {
 		label: 'Champ obligatoire',
 		uniqueId: 'text-area-required',
-		ariaRequired: true,
+		required: true,
 	},
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `<template>
-	<p>Le champ est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+	<p>Le champ est obligatoire grâce à la prop <code>required</code>.</p>
 	<AmeliproTextArea
 		v-model="model"
 		label="Champ obligatoire"
 		unique-id="text-area-required"
-		aria-required
+		required
 	/>
 </template>`,
 			},
@@ -230,7 +230,7 @@ export const Required: Story = {
 			return { args, model }
 		},
 		template: `
-<p>Le champ est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+<p>Le champ est obligatoire grâce à la prop <code>required</code>.</p>
 <AmeliproTextArea
 	v-bind="args"
 	v-model="model"

package/src/components/Amelipro/AmeliproTextArea/AmeliproTextArea.vue

@@ -9,7 +9,7 @@
 	import { isRequired } from '@/utils/rules/isRequired'
 
 	const props = defineProps({
-		ariaRequired: {
+		required: {
 			type: Boolean,
 			default: false,
 		},
@@ -108,7 +108,7 @@
 			...props.rules,
 		]
 
-		if (props.ariaRequired) {
+		if (props.required) {
 			rules.push(isRequired)
 		}
 
@@ -227,7 +227,7 @@
 			>
 				{{ label }}
 
-				<span v-if="ariaRequired">
+				<span v-if="required">
 					<span aria-hidden="true">
 						&nbsp;*
 					</span>
@@ -250,7 +250,7 @@
 			v-model="inputValue"
 			:aria-describedby="displayError ? undefined : errorId"
 			:aria-invalid="displayError ? true : undefined"
-			:aria-required="ariaRequired"
+			:required="required"
 			auto-grow
 			:bg-color="disabled ? 'ap-grey-lighten-2' : 'ap-white'"
 			class="amelipro-textarea-input"

package/src/components/Amelipro/AmeliproTextArea/__tests__/AmeliproTextArea.spec.ts

@@ -1,4 +1,4 @@
-import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { mount, shallowMount, VueWrapper } from '@vue/test-utils'
 import { beforeEach, describe, expect, it } from 'vitest'
 import AmeliproTextArea from '../AmeliproTextArea.vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
@@ -9,7 +9,7 @@ import type { ValidateOnType } from '../../types'
 import type { ValidationRule } from '@/utils/rules/types'
 
 const expectedPropOptions: ExpectedPropOptions<typeof AmeliproTextArea> = {
-	ariaRequired: {
+	required: {
 		type: Boolean,
 		default: false,
 	},
@@ -92,7 +92,7 @@ const requiredPropValues = (): ComponentProps<typeof AmeliproTextArea> => ({
 })
 
 const modifiedPropValues = (): ComponentProps<typeof AmeliproTextArea> => ({
-	ariaRequired: true,
+	required: true,
 	classes: 'modified-classes',
 	counter: 100,
 	disabled: true,

package/src/components/Amelipro/AmeliproTextArea/__tests__/__snapshots__/AmeliproTextArea.spec.ts.snap

@@ -49,7 +49,6 @@ exports[`AmeliproTextArea > Snapshots > renders the component with all propertie
   </div>
   <textarea
     aria-describedby="modified-unique-id-error"
-    aria-required="true"
     auto-grow=""
     bg-color="ap-grey-lighten-2"
     class="amelipro-textarea-input"
@@ -59,6 +58,7 @@ exports[`AmeliproTextArea > Snapshots > renders the component with all propertie
     id="modified-unique-id"
     modelvalue="Modified model value"
     readonly=""
+    required=""
     rules="() => true,(value) => {
     let valid;
     if (Array.isArray(value)) {
@@ -110,7 +110,6 @@ exports[`AmeliproTextArea > Snapshots > renders the component with only required
   </div>
   <textarea
     aria-describedby="required-unique-id-error"
-    aria-required="false"
     auto-grow=""
     bg-color="ap-white"
     class="amelipro-textarea-input"

package/src/components/Amelipro/AmeliproTextField/AmeliproTextField.stories.ts

@@ -5,10 +5,10 @@ import AmeliproTextField from './AmeliproTextField.vue'
 const meta = {
 	argTypes: {
 		'append': { description: 'Permet d\'ajouter un élément juste après le champ' },
-		'ariaRequired': {
+		'required': {
 			default: false,
 			description: 'Défini que le champ est obligatoire',
-			name: 'aria-required',
+			name: 'required',
 			type: 'boolean',
 		},
 		'classes': { description: 'Classes à appliquer à la racine du composant' },
@@ -101,7 +101,7 @@ export const Default: Story = {
 
 export const Date: Story = {
 	args: {
-		ariaRequired: true,
+		required: true,
 		label: 'Mon label',
 		maxDate: '2024-02-20',
 		minDate: '2024-01-20',
@@ -117,7 +117,7 @@ export const Date: Story = {
 <template>
 	<AmeliproTextField
 		v-model="model"
-		aria-required
+		required
 		classes="mt-2"
 		label="Mon label"
 		max-date="2024-02-20"
@@ -160,7 +160,7 @@ export const Date: Story = {
 
 export const Number: Story = {
 	args: {
-		ariaRequired: true,
+		required: true,
 		label: 'Mon label',
 		maxNumber: '10',
 		minNumber: '0',
@@ -176,7 +176,7 @@ export const Number: Story = {
 <template>
 	<AmeliproTextField
 		v-model="model"
-		aria-required
+		required
 		classes="mt-2"
 		label="Mon label"
 		max-number="10"
@@ -736,19 +736,19 @@ export const Required: Story = {
 		label: 'Champ requis',
 		modelValue: '',
 		uniqueId: 'text-required',
-		ariaRequired: true,
+		required: true,
 	},
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `<template>
-	<p>Le champ est requis grâce à la prop <code>ariaRequired</code>.</p>
+	<p>Le champ est requis grâce à la prop <code>required</code>.</p>
 	<AmeliproTextField
 		v-model="model"
 		label="Champ requis"
 		unique-id="text-required"
-		aria-required
+		required
 	/>
 </template>`,
 			},
@@ -773,7 +773,7 @@ export const Required: Story = {
 			return { args, model }
 		},
 		template: `
-<p>Le champ est requis grâce à la prop <code>ariaRequired</code>.</p>
+          <p>Le champ est requis grâce à la prop <code>required</code>.</p>
 <AmeliproTextField
 	v-bind="args"
 	v-model="model"

package/src/components/Amelipro/AmeliproTextField/AmeliproTextField.vue

@@ -13,7 +13,7 @@
 	import { isRequired } from '@/utils/rules/isRequired'
 
 	const props = defineProps({
-		ariaRequired: {
+		required: {
 			type: Boolean,
 			default: false,
 		},
@@ -152,7 +152,7 @@
 			...props.rules,
 		]
 
-		if (props.ariaRequired) {
+		if (props.required) {
 			rules.push(isRequired)
 		}
 
@@ -278,7 +278,7 @@
 				>
 					{{ label }}
 
-					<span v-if="ariaRequired">
+					<span v-if="required">
 						<span aria-hidden="true">
 							&nbsp;*
 						</span>
@@ -301,7 +301,7 @@
 				v-model="inputValue"
 				:aria-describedby="displayError ? errorId : undefined"
 				:aria-invalid="displayError ? true : undefined"
-				:aria-required="ariaRequired"
+				:required="required"
 				:bg-color="disabled ? 'ap-grey-lighten-2' : 'ap-white'"
 				class="pt-0 amelipro-text-field"
 				:clearable="clearable"

package/src/components/Amelipro/AmeliproTextField/__tests__/AmeliproTextField.spec.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { VueWrapper, config, mount, shallowMount } from '@vue/test-utils'
+import { config, mount, shallowMount, VueWrapper } from '@vue/test-utils'
 import { beforeEach, describe, expect, it } from 'vitest'
 import AmeliproTextField from '../AmeliproTextField.vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
@@ -36,7 +36,7 @@ const VTextFieldStub = defineComponent({
 			type: String,
 			default: undefined,
 		},
-		ariaRequired: {
+		required: {
 			type: [Boolean, String],
 			default: false,
 		},
@@ -85,7 +85,7 @@ const VTextFieldStub = defineComponent({
 	template: `
 		<div
 			class="v-text-field-stub"
-			:aria-required="ariaRequired"
+            :aria-required="required"
 			:style="style"
 		>
 			<slot />
@@ -99,7 +99,7 @@ config.global.stubs = config.global.stubs || {}
 config.global.stubs.VTextField = VTextFieldStub
 
 const expectedPropOptions: ExpectedPropOptions<typeof AmeliproTextField> = {
-	ariaRequired: {
+	required: {
 		type: Boolean,
 		default: false,
 	},
@@ -222,7 +222,7 @@ const requiredPropValues = (): ComponentProps<typeof AmeliproTextField> => ({
 })
 
 const modifiedPropValues = (): ComponentProps<typeof AmeliproTextField> => ({
-	ariaRequired: true,
+	required: true,
 	classes: 'modified-classes',
 	clearable: true,
 	counter: 5,

package/src/components/Amelipro/AmeliproTextField/tests/__snapshots__/AmeliproTextField.spec.ts.snap

@@ -0,0 +1,162 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTextField > render correctly 1`] = `
+<div
+  class=""
+  id="my-textfield-id-container"
+  style="margin-bottom: 12px;"
+>
+  <div class="
+    amelipro-text-field__wrapper
+    d-flex
+    flex-column
+    w-100
+  ">
+    <div class="
+      align-baseline
+      d-inline-flex
+      mb-1
+    ">
+      <label
+        class="
+          amelipro-text-field__label
+          mr-2
+        "
+        for="my-textfield-id"
+        id="my-textfield-id-label"
+      >
+        Mon label
+        <!-- v-if -->
+      </label>
+    </div>
+    <div class="
+      amelipro-text-field
+      pt-0
+      v-input
+      v-input--center-affix
+      v-input--density-compact
+      v-input--horizontal
+      v-locale--is-ltr
+      v-text-field
+      v-theme--light
+    ">
+      <!---->
+      <div class="v-input__control">
+        <div class="
+          bg-ap-white
+          v-field
+          v-field--center-affix
+          v-field--has-background
+          v-field--no-label
+          v-field--variant-outlined
+          v-locale--is-ltr
+          v-theme--light
+        ">
+          <div class="v-field__overlay"></div>
+          <div class="v-field__loader">
+            <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="
+                  bg-ap-blue-darken-1
+                  v-progress-linear__background
+                "
+                style="opacity: NaN;"
+              ></div>
+              <div
+                class="
+                  bg-ap-blue-darken-1
+                  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="
+                    bg-ap-blue-darken-1
+                    long
+                    v-progress-linear__indeterminate
+                  "></div>
+                  <div class="
+                    bg-ap-blue-darken-1
+                    short
+                    v-progress-linear__indeterminate
+                  "></div>
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <div
+            class="v-field__field"
+            data-no-activator=""
+          >
+            <!---->
+            <!---->
+            <!---->
+            <input
+              class="v-field__input"
+              id="my-textfield-id"
+              size="1"
+              type="text"
+            />
+            <!---->
+          </div>
+          <!---->
+          <!---->
+          <div class="v-field__outline">
+            <div class="v-field__outline__start"></div>
+            <!---->
+            <div class="v-field__outline__end"></div>
+            <!---->
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div
+        aria-live="polite"
+        class="v-input__details"
+        id="my-textfield-id-messages"
+        role="alert"
+      >
+        <transition-group-stub
+          appear="false"
+          class="v-messages"
+          css="true"
+          name="slide-y-transition"
+          persisted="false"
+          tag="div"
+        >
+          <!---->
+        </transition-group-stub>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <!-- v-if -->
+</div>
+`;

package/src/components/Amelipro/AmeliproTileBtn/AmeliproTileBtn.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import AmeliproTileBtn from './AmeliproTileBtn.vue'
+import AmeliproTooltips from '../AmeliproTooltips/AmeliproTooltips.vue'
 
 const meta = {
 	argTypes: {
@@ -169,6 +170,49 @@ export const Desactivee: Story = {
 	}),
 }
 
+// --- Tuile bouton avec tooltip ---
+export const tooltip: Story = {
+	name: 'Avec tooltip',
+	args: {
+		imgSrc: '/amelipro/img/tile-example.svg',
+		label: 'Label du bouton',
+		tileMinHeight: '100%',
+		uniqueId: 'tile-btn-tooltip',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<AmeliproTileBtn
+  img-src="/amelipro/img/tile-example.svg"
+  label="Bouton désactivé"
+  tile-min-height="100%"
+  unique-id="tile-btn-disabled"
+/>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTileBtn, AmeliproTooltips },
+		setup() {
+			return { args }
+		},
+		template: `
+          <p>Le slot <code>labelInfo</code> permet d'ajouter une tooltip à droite du titre du bouton.</p>
+
+          <AmeliproTileBtn v-bind="args">
+            <template #labelInfo>
+              <AmeliproTooltips
+                  tooltip-text="Contenu de mon infobulle"
+                  unique-id="amelipro-tooltip-id"
+              />
+            </template>
+          </AmeliproTileBtn>
+        `,
+	}),
+}
+
 // --- Tuile bouton avec message informatif ---
 export const AvecMessageInfo: Story = {
 	name: 'Avec message informatif',

package/src/components/Amelipro/AmeliproTileBtn/AmeliproTileBtn.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { type PropType, computed, ref } from 'vue'
+	import { type PropType, type ComponentPublicInstance, computed, ref, nextTick, onMounted, watch, shallowRef } from 'vue'
 	import AmeliproIcon from '../AmeliproIcon/AmeliproIcon.vue'
 	import type { IndexedObject } from '../types'
 	import type { RouteLocationRaw } from 'vue-router'
@@ -97,6 +97,10 @@
 
 	const hover = ref(false)
 	const focus = ref(false)
+	const button = shallowRef<ComponentPublicInstance | null>(null)
+	const labelText = ref<HTMLElement | null>(null)
+	const labelInfo = ref<HTMLElement | null>(null)
+	const labelStyle = ref({})
 
 	const tileStyles = computed<IndexedObject>(() => {
 		const btnStyles: IndexedObject = {
@@ -127,6 +131,35 @@
 		return btnStyles
 	})
 
+	const updateLabelPadding = () => {
+		nextTick(() => {
+			if (!labelText.value || !labelInfo.value) {
+				labelStyle.value = { paddingRight: '0px' }
+				return
+			}
+			const btn = button.value?.$?.subTree?.el as HTMLElement
+			const btnWidth = btn?.getBoundingClientRect().width ?? 0
+
+			const styles = getComputedStyle(btn)
+			const textWidth = labelText.value.offsetWidth
+
+			const paddingLeft = parseFloat(styles.paddingLeft)
+			const paddingRight = parseFloat(styles.paddingRight)
+			const horizontalPadding = paddingLeft + paddingRight
+
+			const minGap = 8
+			const labelPaddingRight = 36
+
+			const availableWidth = btnWidth - horizontalPadding - minGap
+
+			labelStyle.value = {
+				paddingRight: textWidth >= availableWidth
+					? `${labelPaddingRight}px`
+					: '0px',
+			}
+		})
+	}
+
 	const imgStyles = computed<IndexedObject>(() => {
 		const styles: IndexedObject = { width: props.imgWidth }
 		if (props.imgMaxWidth) {
@@ -162,11 +195,19 @@
 
 	const emit = defineEmits(['click'])
 	const emitClickEvent = () => emit('click', props.uniqueId)
+
+	onMounted(() => {
+		updateLabelPadding()
+	})
+
+	watch([labelText, labelInfo], () => updateLabelPadding())
+
 </script>
 
 <template>
 	<VBtn
 		:id="uniqueId"
+		ref="button"
 		class="amelipro-tile-btn text-none"
 		:disabled="disabled"
 		:elevation="1"
@@ -186,9 +227,18 @@
 		<span v-if="alignTopStyle || complementaryInfoLine1 || complementaryInfoLine2 || message">
 			<span
 				:id="uniqueId ? `${uniqueId}-text` : undefined"
+				ref="labelText"
 				class="d-block text-h5 text-center font-weight-bold amelipro-tile-btn__content"
+				:style="labelStyle"
 			>
 				{{ label }}
+				<span
+					v-if="$slots.labelInfo"
+					ref="labelInfo"
+					class="amelipro-tile-btn__label-info"
+				>
+					<slot name="labelInfo" />
+				</span>
 
 				<span
 					v-if="labelBottom"
@@ -262,9 +312,18 @@
 		<span
 			v-if="!complementaryInfoLine1 && !complementaryInfoLine2 && !alignTopStyle && !message"
 			:id="uniqueId ? `${uniqueId}-text` : undefined"
+			ref="labelText"
 			class="d-block text-h5 text-center font-weight-bold amelipro-tile-btn__content"
+			:style="labelStyle"
 		>
 			{{ label }}
+			<span
+				v-if="$slots.labelInfo"
+				ref="labelInfo"
+				class="amelipro-tile-btn__label-info"
+			>
+				<slot name="labelInfo" />
+			</span>
 
 			<span
 				v-if="labelBottom"
@@ -357,4 +416,23 @@
 	bottom: 0;
 	right: 10px;
 }
+
+.amelipro-tile-btn__content {
+	white-space: normal;
+}
+
+.amelipro-tile-btn__label {
+	display: inline-block;
+	word-break: break-word;
+	width: 100%;
+	box-sizing: border-box;
+	text-align: center;
+}
+
+.amelipro-tile-btn__label-info {
+	position: absolute;
+	top: 44px;
+	transform: translateY(-50%);
+	right: 22px;
+}
 </style>

package/src/components/Amelipro/AmeliproTooltips/__tests__/__snapshots__/AmeliproTooltips.spec.ts.snap

@@ -29,7 +29,6 @@ exports[`AmeliproTooltips > Snapshots > renders the component with all propertie
     right=""
     scrim="false"
     scrollstrategy="reposition"
-    sticktotarget="false"
     zindex="2000"
   ></v-tooltip-stub>
 </div>
@@ -64,7 +63,6 @@ exports[`AmeliproTooltips > Snapshots > renders the component with only required
     right=""
     scrim="false"
     scrollstrategy="reposition"
-    sticktotarget="false"
     zindex="2000"
   ></v-tooltip-stub>
 </div>

package/src/components/Amelipro/AmeliproUpload/AmeliproUpload.stories.ts

@@ -4,7 +4,7 @@ import { ref, watch } from 'vue'
 
 const meta = {
 	argTypes: {
-		'ariaRequired': { description: 'Défini si le champ est obligatoire' },
+		'required': { description: 'Défini si le champ est obligatoire' },
 		'change': {
 			table: { category: 'events' },
 			description: 'Événement émis au changement de la liste de fichiers par utilisation du click sur le champs, renvoie la liste de fichiers',
@@ -16,7 +16,7 @@ const meta = {
 		'fileTypeAccepted': {	description: 'Tableau de string au format MIME pour le type de fichier accepté. Exemple : application/pdf (string au format MIME)' },
 		'inputLabel': { description: 'Libellé du champ' },
 		'maxFileNumber': { description: 'Nombre maximum de fichiers autorisés' },
-		'rules': { description: 'Liste des règles supplémentaires à respecter pour valider le champ, en plus des règles par défaut. Si une règle est refusée, l’envoi du formulaire est impossible. Par défaut seule la règle `required` est appliquée (si la prop `ariaRequired` vaut `true`). ' },
+		'rules': { description: 'Liste des règles supplémentaires à respecter pour valider le champ, en plus des règles par défaut. Si une règle est refusée, l’envoi du formulaire est impossible. Par défaut seule la règle `required` est appliquée (si la prop `required` vaut `true`). ' },
 		'uniqueId': { description: 'Identifiant unique pour le champ' },
 		'value': { description: 'Liste des fichiers actuelle' },
 		'warningRules': { description: '' },