@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/Amelipro/AmeliproSelect/AmeliproSelect.vue

@@ -0,0 +1,373 @@
+<script setup lang="ts">
+	/* eslint-disable vuejs-accessibility/label-has-for */
+	import type { IndexedObject, ValidateOnType } from '../types'
+	import type { InputSelect, SelectItem } from './types'
+	import { type PropType, computed, onMounted, onUnmounted, ref } from 'vue'
+	import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
+	import type { ValidationRule } from '@/utils/rules/types'
+	import { convertToHex } from '@/utils/functions/convertToHex'
+	import { isRequired } from '@/utils/rules/isRequired'
+
+	const props = defineProps({
+		ariaRequired: {
+			type: Boolean,
+			default: false,
+		},
+		classes: {
+			type: String,
+			default: undefined,
+		},
+		clearable: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		fullWidthErrorMsg: {
+			type: Boolean,
+			default: false,
+		},
+		globalMaxWidth: {
+			type: String,
+			default: undefined,
+		},
+		globalMinWidth: {
+			type: String,
+			default: undefined,
+		},
+		globalWidth: {
+			type: String,
+			default: undefined,
+		},
+		hideErrorMessage: {
+			type: Boolean,
+			default: false,
+		},
+		horizontal: {
+			type: Boolean,
+			default: false,
+		},
+		inputMaxWidth: {
+			type: String,
+			default: undefined,
+		},
+		inputMinWidth: {
+			type: String,
+			default: undefined,
+		},
+		items: {
+			type: Array as PropType<string[] | SelectItem[]>,
+			required: true,
+		},
+		label: {
+			type: String,
+			required: true,
+		},
+		labelMaxWidth: {
+			type: String,
+			default: undefined,
+		},
+		labelMinWidth: {
+			type: String,
+			default: undefined,
+		},
+		modelValue: {
+			type: [Object, Number, String] as PropType<SelectItem | number | string>,
+			default: undefined,
+		},
+		placeholder: {
+			type: String,
+			default: undefined,
+		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		rules: {
+			type: Array as PropType<ValidationRule[]>,
+			default: () => [],
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+		validateOn: {
+			default: 'input',
+			type: String as PropType<ValidateOnType>,
+			validator(value: string): boolean {
+				return ['lazy', 'blur', 'input', 'submit', 'blur lazy', 'input lazy', 'submit lazy', 'lazy blur', 'lazy input', 'lazy submit'].includes(value.toLowerCase())
+			},
+		},
+	})
+
+	// VSelect ref
+	const inputSelect = ref<InputSelect>()
+
+	const emit = defineEmits(['update:model-value'])
+	// v-model
+	const inputValue = computed({
+		get: () => props.modelValue,
+		set: (value: object | number | string | undefined) => {
+			emit('update:model-value', value)
+		},
+	})
+
+	const focused = ref(false)
+	const errorId = computed<string>(() => `${props.uniqueId}-error`)
+	const messagesToDisplay = computed(() => (displayError.value ? inputSelect.value?.errorMessages : undefined))
+	const displayError = computed(() => (inputSelect.value?.isValid !== null && !inputSelect.value?.isValid) && (inputSelect.value?.errorMessages && inputSelect.value?.errorMessages.length > 0))
+	const selectRules = computed<ValidationRule[]>(() => {
+		// const { rules } = props; => provoque des mutations indésirables de props.rules
+		const rules = [
+			...props.rules,
+		]
+		if (props.ariaRequired) {
+			rules.push(isRequired)
+		}
+		return rules
+	})
+
+	// Fallback : nécessaire pour le bon fonctionnement d'autres composants
+	defineExpose({ messagesToDisplay })
+
+	const selectClasses = computed<string>(() => {
+		const classes = ['d-flex', 'flex-column']
+		if (props.horizontal) {
+			classes.push('flex-md-row')
+		}
+		return classes.join(' ')
+	})
+
+	const labelClasses = computed<string>(() => {
+		let classes = ''
+		if (props.horizontal) {
+			classes = 'mt-md-2 mr-md-2'
+		}
+		return classes
+	})
+
+	const globalFieldStyles = computed<IndexedObject>(() => {
+		const styles: IndexedObject = { marginBottom: '12px' }
+		if (props.globalMaxWidth) {
+			styles.maxWidth = props.globalMaxWidth
+		}
+		if (props.globalMinWidth) {
+			styles.minWidth = props.globalMinWidth
+		}
+		if (props.globalWidth) {
+			styles.width = props.globalWidth
+		}
+		return styles
+	})
+
+	const inputStyles = computed<IndexedObject>(() => {
+		const styles: IndexedObject = {}
+		if (props.inputMaxWidth) {
+			styles.maxWidth = props.inputMaxWidth
+		}
+		if (props.inputMinWidth) {
+			styles.minWidth = props.inputMinWidth
+		}
+		return styles
+	})
+
+	const labelStyles = computed<IndexedObject>(() => {
+		const styles: IndexedObject = {}
+		if (props.labelMaxWidth) {
+			styles.maxWidth = props.labelMaxWidth
+		}
+		if (props.labelMinWidth) {
+			styles.minWidth = props.labelMinWidth
+		}
+		return styles
+	})
+
+	const inputBorderStyle = computed<string>(() => {
+		let borderColor = convertToHex('ap-grey-darken-1')
+		if (focused.value) {
+			borderColor = convertToHex('ap-blue-darken-1')
+		}
+		if (displayError.value) {
+			borderColor = convertToHex('ap-red')
+		}
+		if (props.disabled) {
+			borderColor = convertToHex('ap-grey-lighten-2')
+		}
+		return borderColor
+	})
+
+	const fixAccessibility = () => {
+		document.querySelector(`#${props.uniqueId}`)?.removeAttribute('aria-label')
+		document.querySelector(`#${props.uniqueId}`)?.removeAttribute('title')
+	}
+
+	// the observer is used to remove wrong vuetify accessibility attributes each time they appears (when you open or close option list)
+	const inputEl = ref<HTMLElement | null>(null)
+	const observer = ref<MutationObserver | null>(null)
+	onMounted(() => {
+		// remove the native label of VSelect because we have our own one
+		document.querySelectorAll(`label[for="${props.uniqueId}"]`)[1]?.remove()
+
+		fixAccessibility()
+		inputEl.value = document.querySelector(`#${props.uniqueId}`)
+		observer.value = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				if (mutation.type === 'attributes') {
+					fixAccessibility()
+				}
+			})
+		})
+
+		if (inputEl.value) {
+			observer.value.observe(inputEl.value, { attributes: true })
+		}
+	})
+
+	onUnmounted(() => {
+		if (observer.value) {
+			observer.value.disconnect()
+		}
+	})
+</script>
+
+<template>
+	<div
+		:id="`${uniqueId}-container`"
+		:class="classes"
+		:style="globalFieldStyles"
+	>
+		<div
+			class="w-100 amelipro-select__wrapper"
+			:class="selectClasses"
+		>
+			<div
+				class="d-inline-flex align-start"
+				:class="labelClasses"
+			>
+				<label
+					:id="`${uniqueId}-label`"
+					class="mr-2 amelipro-select__label"
+					:for="uniqueId"
+					:style="labelStyles"
+				>
+					{{ label }}
+
+					<span v-if="ariaRequired">
+						<span aria-hidden="true">
+							&nbsp;*
+						</span>
+
+						<span class="d-sr-only">
+							&nbsp;Champ obligatoire
+						</span>
+					</span>
+				</label>
+
+				<slot name="labelInfo" />
+			</div>
+
+			<VSelect
+				:id="uniqueId"
+				ref="inputSelect"
+				v-model="inputValue"
+				:aria-describedby="displayError ? errorId : undefined"
+				:aria-invalid="displayError ? true : undefined"
+				:aria-required="ariaRequired"
+				:bg-color="disabled ? 'ap-grey-lighten-2' : 'ap-white'"
+				class="pt-0 amelipro-select"
+				:clearable="clearable"
+				color="ap-blue-darken-1"
+				density="compact"
+				:disabled="disabled"
+				:error="displayError"
+				:hide-details="hideErrorMessage || fullWidthErrorMsg"
+				:item-props="true"
+				:items="items"
+				:placeholder="placeholder"
+				:readonly="readonly"
+				:rules="selectRules"
+				:style="inputStyles"
+				:validate-on="validateOn"
+				variant="outlined"
+				v-bind="$attrs"
+				@blur="focused = false"
+				@focus="focused = true"
+			>
+				<template
+					v-if="$slots.append"
+					#append
+				>
+					<slot name="append" />
+				</template>
+
+				<template #message="{ message }">
+					<AmeliproMessage
+						no-icon
+						text
+						type="error"
+						:unique-id="errorId"
+					>
+						<p class="mb-0">
+							{{ message }}
+						</p>
+					</AmeliproMessage>
+				</template>
+			</VSelect>
+		</div>
+
+		<AmeliproMessage
+			v-if="fullWidthErrorMsg && messagesToDisplay && messagesToDisplay.length > 0"
+			no-icon
+			text
+			type="error"
+			:unique-id="errorId"
+		>
+			<p class="mb-0">
+				{{ messagesToDisplay[0] }}
+			</p>
+		</AmeliproMessage>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.v-select {
+	& :deep(.v-select__selection--comma) {
+		line-height: 1.5rem;
+	}
+
+	& :deep(.v-field__outline) {
+		border-color: v-bind(inputBorderStyle);
+
+		--v-field-border-opacity: 1 !important;
+	}
+
+	& :deep(.v-field.v-field--variant-outlined.v-field--focused .v-field__outline) {
+		--v-field-border-width: 1px !important;
+	}
+}
+
+:deep(.v-input__slot) {
+	min-height: apTokens.$input-min-height !important;
+	border-radius: apTokens.$input-radius;
+
+	fieldset {
+		border: 0;
+	}
+}
+
+.amelipro-select__label {
+	margin-bottom: 4px;
+	font-size: apTokens.$font-size-xs;
+	font-weight: apTokens.$label-font-weight;
+}
+
+.v-list {
+	& :deep(.v-list-item) .v-list-item__title {
+		line-height: 1.5rem;
+	}
+}
+</style>

package/src/components/Amelipro/AmeliproSelect/tests/AmeliproSelect.spec.ts

@@ -0,0 +1,42 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproSelect from '../AmeliproSelect.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproSelect', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [
+					{
+						title: 'Lille',
+						value: 1,
+					},
+					{
+						title: 'Paris',
+						value: 2,
+					},
+					{
+						title: 'Bordeaux',
+						value: 3,
+					},
+					{
+						title: 'Tours',
+						value: 4,
+					},
+					{
+						title: 'Marseille',
+						value: 5,
+					},
+				],
+				label: 'Label du select',
+				uniqueId: 'my-select-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

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

@@ -0,0 +1,186 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproSelect > render correctly 1`] = `
+<div
+  class=""
+  id="my-select-id-container"
+  style="margin-bottom: 12px;"
+>
+  <div class="
+    amelipro-select__wrapper
+    d-flex
+    flex-column
+    w-100
+  ">
+    <div class="
+      align-start
+      d-inline-flex
+    ">
+      <label
+        class="
+          amelipro-select__label
+          mr-2
+        "
+        for="my-select-id"
+        id="my-select-id-label"
+      >
+        Label du select
+        <!-- v-if -->
+      </label>
+    </div>
+    <div class="
+      amelipro-select
+      pt-0
+      v-input
+      v-input--center-affix
+      v-input--density-compact
+      v-input--horizontal
+      v-locale--is-ltr
+      v-select
+      v-select--single
+      v-text-field
+      v-theme--light
+    ">
+      <!---->
+      <div class="v-input__control">
+        <div
+          class="
+            bg-ap-white
+            v-field
+            v-field--appended
+            v-field--center-affix
+            v-field--has-background
+            v-field--no-label
+            v-field--variant-outlined
+            v-locale--is-ltr
+            v-theme--light
+          "
+          role="combobox"
+        >
+          <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=""
+          >
+            <!---->
+            <!---->
+            <!---->
+            <div
+              class="v-field__input"
+              data-no-activator=""
+            >
+              <!---->
+              <!---->
+              <input
+                aria-label="Open"
+                aria-required="false"
+                id="my-select-id"
+                inputmode="none"
+                size="1"
+                title="Open"
+                type="text"
+                value=""
+              />
+            </div>
+            <!---->
+          </div>
+          <!---->
+          <div class="v-field__append-inner">
+            <!---->
+            <i
+              aria-hidden="true"
+              class="
+                mdi
+                mdi-menu-down
+                notranslate
+                v-icon
+                v-icon--size-default
+                v-select__menu-icon
+                v-theme--light
+              "
+            ></i>
+            <!---->
+          </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-select-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/AmeliproSelect/types.d.ts

@@ -0,0 +1,10 @@
+export interface SelectItem {
+	title: string | number
+	value: string | number
+	disabled?: boolean
+}
+
+export interface InputSelect {
+	errorMessages: string[]
+	isValid: boolean
+}

package/src/components/Amelipro/AmeliproStateTile/AmeliproStateTile.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproStateTileStories from './AmeliproStateTile.stories';
+
+<Meta of={AmeliproStateTileStories} />
+
+# AmeliproStateTile
+
+L’élément `AmeliproStateTile` est utilisé pour afficher toutes les tuiles à états existants dans la charte Amelipro
+
+<Canvas of={AmeliproStateTileStories.Default} />
+
+## API
+
+<Controls of={AmeliproStateTileStories.Default} />

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

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproStateTile from './AmeliproStateTile.vue'
+
+const meta = {
+	argTypes: {
+		btnStyledText: { description: 'Partie du texte qui s’affiche dans la tuile sous forme de bouton' },
+		click: { description: 'Événement émis au click sur les tuiles cliquables. Retourne `uniqueId`', type: 'string | undefined' },
+		contentMinHeight: { description: 'Hauteur minimale du contenu de la tuile' },
+		disabled: { description: 'Pour désactiver la tuile' },
+		href: { description: 'Url de destination du lien.' },
+		labelFirstLine: { description: 'Première ligne de texte de la tuile' },
+		labelSecondLine: { description: 'Deuxième ligne de texte de la tuile' },
+		labelThirdLine: { description: 'Troisième ligne de texte de la tuile' },
+		noPdfIcon: { description: 'Pour masquer l’icône "PDF"' },
+		tileMinHeight: { description: 'La hauteur minimale du bouton/lien.' },
+		tilePaddingX: { description: 'Padding sur les côtés de la tuile.' },
+		tileType: {
+			description: 'Type de la tuile parmi : `date`, `toDo`, `toDoNoCertificate`, `toDoNoCertificateBlue`, `optionnal`, `done`, `doneNoCertificate` et `doneNoCertificateBlue`.',
+			options: [
+				'date',
+				'toDo',
+				'toDoNoCertificate',
+				'toDoNoCertificateBlue',
+				'optionnal',
+				'done',
+				'doneNoCertificate',
+				'doneNoCertificateBlue',
+			],
+		},
+		tileWidth: { description: 'La largeur de la tuile.' },
+		to: { description: 'Route de destination du lien.' },
+		uniqueId: { description: 'Ajoute un id au bouton' },
+	},
+	component: AmeliproStateTile,
+	title: 'Composants/Amelipro/Tuiles/AmeliproStateTile',
+} as Meta<typeof AmeliproStateTile>
+export default meta
+
+type Story = StoryObj<typeof AmeliproStateTile>
+
+export const Default: Story = {
+	args: {
+		btnStyledText: 'Réaliser cet examen',
+		labelFirstLine: 'Au cours de',
+		labelSecondLine: 'Xème période',
+		tileMinHeight: '100%',
+		tileType: 'toDoNoCertificate',
+		tileWidth: '300px',
+		uniqueId: 'amelipro-state-tile-unique-id',
+	},
+	parameters: {
+		args: {},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproStateTile
+		btn-styled-text="Réaliser cet examen"
+		label-first-line="Au cours de"
+		label-second-line="Xème période"
+		tile-min-height="100%"
+		tile-type="toDoNoCertificate"
+		tile-width="300px"
+		unique-id="amelipro-state-tile-unique-id"
+	/>
+</template>`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { AmeliproStateTile } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStateTile },
+		setup() {
+			return { args }
+		},
+		template: `
+<AmeliproStateTile
+	v-bind="args"
+/>`,
+	}),
+}