@cnamts/synapse 1.0.17 → 1.0.19

package/src/components/Amelipro/AmeliproContentLayout/AmeliproContentLayout.mdx

@@ -1,9 +1,11 @@
-import { Controls, Canvas, Meta } from '@storybook/blocks';
+import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
 
 import * as AmeliproContentLayoutStories from './AmeliproContentLayout.stories';
 
 <Meta of={AmeliproContentLayoutStories} />
 
+<Story of={AmeliproContentLayoutStories.Info} />
+
 # AmeliproContentLayout
 
 L’élément `AmeliproContentLayout` est un layout de contenu principal pour les pages déviant du style classique Amelipro

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import AmeliproContentLayout from './AmeliproContentLayout.vue'
+import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
 
 const meta = {
 	argTypes: {
@@ -40,5 +41,22 @@ export const Default: Story = {
 </AmeliproContentLayout>
 		`,
 	}),
+}
 
+export const Info: Story = {
+	render: (args) => {
+		return {
+			components: { AmeliproMessage },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <AmeliproMessage :closable="false" class="mb-4" type="warning">
+				<strong>Ce composant est déprécié</strong>, il ne sera plus maintenu ou mis à jour.
+				Nous vous recommandons d'utiliser à la place le composant <strong><a href='https://cnam-design-system.netlify.app/?path=/docs/composants-layout-pagecontainer--docs'>PageContainer</a></strong>.
+			  </AmeliproMessage>
+			`,
+		}
+	},
+	tags: ['!dev'],
 }

package/src/components/Amelipro/AmeliproCopyBtn/AmeliproCopyBtn.vue

@@ -52,22 +52,22 @@
 </template>
 
 <style lang="scss" scoped>
-	@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
-	.amelipro-copy-btn-wrapper {
-		position: relative;
-		display: inline-block;
-	}
+.amelipro-copy-btn-wrapper {
+	position: relative;
+	display: inline-block;
+}
 
-	.validation-msg {
-		position: absolute;
-		top: -10px;
-		right: 30px;
-		padding: 8px 16px;
-		max-width: 200px;
-		background: apTokens.$ap-white;
-		border: 1px solid apTokens.$ap-grey-lighten3;
-		border-radius: apTokens.$card-radius;
-		z-index: 10;
-	}
+.validation-msg {
+	position: absolute;
+	top: -10px;
+	right: 30px;
+	padding: 8px 16px;
+	max-width: 200px;
+	background: apTokens.$ap-white;
+	border: 1px solid apTokens.$ap-grey-lighten3;
+	border-radius: apTokens.$card-radius;
+	z-index: 10;
+}
 </style>

package/src/components/Amelipro/AmeliproCustomSelector/AmeliproCustomSelector.vue

@@ -68,7 +68,7 @@
 
 	const selectedValue = computed<string | null>(() => {
 		const checkedItem = currentValue.value.filter(e => e.isChecked)
-		return checkedItem.length === 1 ? checkedItem[0].value : null
+		return checkedItem.length === 1 && checkedItem[0] ? checkedItem[0].value : null
 	})
 
 	const emitChangeEvent = (item: AmeliproCustomSelectorItem): void => {
@@ -263,7 +263,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .amelipro-custom-selector__label {
 	font-size: apTokens.$font-size-sm;

package/src/components/Amelipro/AmeliproDentalChart/AmeliproTooth/AmeliproTooth.vue

@@ -148,36 +148,36 @@
 </template>
 
 <style lang="scss" scoped>
-	@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
-	.tooth-btn {
-		border-radius: 8px;
-		max-width: 100%;
-		min-height: 100%;
+.tooth-btn {
+	border-radius: 8px;
+	max-width: 100%;
+	min-height: 100%;
 
-		&:hover {
-			background-color: apTokens.$ap-blue-lighten4;
-		}
-
-		& img {
-			max-width: 90%;
-			margin: 8px 0;
+	&:hover {
+		background-color: apTokens.$ap-blue-lighten4;
+	}
 
-			@media (width <= 1239.999px) {
-				width: 2.5rem;
-			}
+	& img {
+		max-width: 90%;
+		margin: 8px 0;
 
-			@media (width >= 1240px) {
-				width: 3.125rem;
-			}
+		@media (width <= 1239.999px) {
+			width: 2.5rem;
 		}
 
-		&:disabled {
-			&:hover {
-				background-color: transparent;
-			}
+		@media (width >= 1240px) {
+			width: 3.125rem;
+		}
+	}
 
-			cursor: default;
+	&:disabled {
+		&:hover {
+			background-color: transparent;
 		}
+
+		cursor: default;
 	}
+}
 </style>

package/src/components/Amelipro/AmeliproDialog/AmeliproDialog.vue

@@ -303,7 +303,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .v-dialog {
 	& :deep(.v-overlay__content) {

package/src/components/Amelipro/AmeliproDisclosure/AmeliproDisclosure.vue

@@ -64,7 +64,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .accordion-btn {
 	padding: 0;

package/src/components/Amelipro/AmeliproErrorTemplate/AmeliproErrorTemplate.vue

@@ -65,7 +65,7 @@
 
 	const imgUrl = computed<string>(() => (props.customImgUrl === undefined ? imgUrlDefault.value : props.customImgUrl))
 
-	const loadGlobalData = (templateName: string): void => {
+	const loadGlobalData = (templateName: keyof typeof ErrorTemplateContent): void => {
 		imgUrlDefault.value = ErrorTemplateContent[templateName]?.imgUrl
 		contentText.value = ErrorTemplateContent[templateName]?.contentText
 		contentTitle.value = ErrorTemplateContent[templateName]?.contentTitle
@@ -170,7 +170,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .w-70 {
 	width: 70% !important;

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

@@ -37,7 +37,7 @@ const expectedPropOptions: ExpectedPropOptions<typeof AmeliproErrorTemplate> = {
 		default: undefined,
 	},
 	errorType: {
-		type: String,
+		type: String as PropType<typeof AmeliproErrorTemplate.prototype.$props.errorType>,
 		required: true,
 	},
 	imgMinWidth: {

package/src/components/Amelipro/AmeliproErrorTemplate/errorTemplateTypes.ts

@@ -6,7 +6,7 @@ import url503 from '../../../assets/amelipro/img/visuel_erreur_503.svg'
 import urlDeconnexion from '../../../assets/amelipro/img/visuel_deconnexion.svg'
 import urlObsolete from '../../../assets/amelipro/img/visuel_navigateur_obsolete.svg'
 
-export const ErrorTemplateContent: ErrorTemplateTypes = {
+export const ErrorTemplateContent = {
 	disconnect: {
 		btnText: 'Page d’accueil',
 		contentText: 'Merci pour votre visite, à très bientôt !',
@@ -82,4 +82,4 @@ export const ErrorTemplateContent: ErrorTemplateTypes = {
 		imgUrl: urlDeconnexion,
 		titleText: 'Erreur technique',
 	},
-}
+} as const satisfies ErrorTemplateTypes

package/src/components/Amelipro/AmeliproFilePreview/AmeliproFilePreview.vue

@@ -140,7 +140,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens';
+@use '@/assets/amelipro/apTokens2026' as apTokens;
 
 .download-file-link {
 	&:hover {

package/src/components/Amelipro/AmeliproFilters/AmeliproFilters.mdx

@@ -0,0 +1,14 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import * as AmeliproFiltersStories from './AmeliproFilters.stories'
+
+<Meta of={AmeliproFiltersStories}/>
+
+# AmeliproFilters
+
+Le composant `AmeliproFilters` permet de sélectionner un ou plusieurs filtres.
+
+<Canvas of={AmeliproFiltersStories.Default}/>
+
+## API
+
+<Controls of={AmeliproFiltersStories.Default}/>

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

@@ -0,0 +1,106 @@
+import type { StoryObj } from '@storybook/vue3'
+import AmeliproFilters from '../AmeliproFilters/AmeliproFilters.vue'
+
+const meta = {
+	argTypes: {
+		'groupId': { description: 'Identifiant unique du groupe de filtres' },
+		'groupLabel': { description: 'Libellé du groupe de filtres' },
+		'hiddenLabel': { description: 'Cache le libellé du groupe de filtres' },
+		'value': { description: 'Liste des filtres du du groupe' },
+		'unique': { description: 'Pour avoir seulement un filtre sélectionnable' },
+		'input': {
+			description: 'Event émis au click sur le bouton',
+		},
+		'change:selected': {
+			description: 'Evènement émis au changement du v-model',
+		},
+	},
+	title: 'Composants/Amelipro/AmeliproFilters',
+	component: AmeliproFilters,
+}
+
+export default meta
+type Story = StoryObj<typeof AmeliproFilters>
+
+const value = [
+	{ id: 'f1', label: 'Filtre 1', value: 'f1', isChecked: false },
+	{ id: 'f2', label: 'Filtre 2', value: 'f2', isChecked: true },
+	{ id: 'f3', label: 'Filtre 3', value: 'f3', isChecked: false },
+	{ id: 'f4', label: 'Filtre 4', value: 'f4', isChecked: false },
+]
+
+export const Default: Story = {
+	args: {
+		groupId: 'filters-group',
+		groupLabel: 'Filtres',
+		hiddenLabel: false,
+		unique: false,
+		value: value,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproFilters
+		group-id="filter-group"
+		group-label="Filtres"
+		:hidden-label="false"
+		:unique="false"
+		:value="value"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproFilters },
+		setup() {
+			return { args }
+		},
+		template: `
+          <AmeliproFilters
+              v-bind="args"
+          />
+        `,
+	}),
+}
+
+export const SelectionUnique: Story = {
+	args: {
+		groupId: 'filters-group',
+		groupLabel: 'Filtres',
+		hiddenLabel: false,
+		unique: true,
+		value: value,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproFilters
+		group-id="filter-group"
+		group-label="Filtres"
+		:hidden-label="false"
+		:unique="true"
+		:value="value"
+	/>
+</template>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproFilters },
+		setup() {
+			return { args }
+		},
+		template: `
+          <AmeliproFilters
+              v-bind="args"
+          />
+        `,
+	}),
+}

package/src/components/Amelipro/AmeliproFilters/AmeliproFilters.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import type { PropType } from 'vue'
+	import type { AmeliproFilterItem } from './types'
+	import { useDisplay } from 'vuetify'
+
+	const props = defineProps({
+		groupId: {
+			type: String,
+			required: true,
+		},
+		groupLabel: {
+			type: String,
+			required: true,
+		},
+		hiddenLabel: {
+			type: Boolean,
+			default: false,
+		},
+		unique: {
+			type: Boolean,
+			default: false,
+		},
+		value: {
+			type: Array as PropType<AmeliproFilterItem[]>,
+			default: () => [],
+		},
+	})
+
+	const { smAndUp } = useDisplay()
+
+	const emit = defineEmits(['input', 'change:selected'])
+
+	const currentValue = computed<AmeliproFilterItem[]>({
+		get: () => props.value,
+		set: (newValue: AmeliproFilterItem[]) => {
+			emit('input', newValue)
+		},
+	})
+
+	const selectedValue = computed<string | null>(() => {
+		const checkedItem = currentValue.value.filter(e => e.isChecked)
+
+		if (checkedItem.length === 1) {
+			return checkedItem[0]!.value
+		}
+
+		return null
+	})
+
+	const emitChangeEvent = (item: AmeliproFilterItem): void => {
+		currentValue.value = currentValue.value.map((currentItem: AmeliproFilterItem) => {
+			if (currentItem.value === item.value) {
+				currentItem.isChecked = true
+			}
+			else {
+				currentItem.isChecked = false
+			}
+			return currentItem
+		})
+		emit('change:selected', selectedValue.value, props.groupId)
+	}
+
+	const updateItems = (item: AmeliproFilterItem, isChecked: boolean) => {
+		currentValue.value = currentValue.value.map((currentItem: AmeliproFilterItem) => {
+			if (currentItem === item) {
+				currentItem.isChecked = isChecked
+			}
+			return currentItem
+		})
+		const selectedItems = currentValue.value.filter(e => e.isChecked === true)
+		emit('change:selected', selectedItems)
+	}
+</script>
+
+<template>
+	<div
+		class="amelipro-filters"
+	>
+		<p
+			:id="`${groupId}-label`"
+			class="mb-1 ap-grey--text text--darken-1 amelipro-filters__label"
+			:class="hiddenLabel ? 'd-sr-only' : undefined"
+		>
+			{{ groupLabel }}
+		</p>
+
+		<div
+			v-if="unique"
+			class="d-flex flex-sm-wrap flex-column flex-sm-row justify-center justify-sm-start align-center amelipro-filters__group"
+		>
+			<label
+				v-for="(item, index) in currentValue"
+				:id="`${item.id}-label`"
+				:key="index"
+				:for="item.id"
+				class="mb-2 d-block font-weight-semibold amelipro-filters__item"
+				:class="smAndUp ? 'item-spacing' : undefined"
+			>
+				<input
+					:id="item.id"
+					:checked="!props.unique && item.isChecked ? true : undefined"
+					class="amelipro-filters__filter-input"
+					:name="groupId"
+					:type="unique ? 'radio' : 'checkbox'"
+					:value="item.value"
+					@change="emitChangeEvent(item)"
+				>
+
+				<span
+					:id="`${item.id}-label-text`"
+					class="filter d-block amelipro-filters__filter__label"
+				>
+					{{ item.label }}
+				</span>
+			</label>
+		</div>
+		<div
+			v-else
+			:aria-labelledby="`${groupId}-label`"
+			class="d-block amelipro-filters__group"
+			role="group"
+		>
+			<ul class="list-style-none w-100 d-flex flex-sm-wrap flex-column flex-sm-row justify-center justify-sm-start align-center">
+				<li
+					v-for="(item, index) in currentValue"
+					:id="`${item.id}-item`"
+					:key="index"
+					class="mb-2 d-block font-weight-semibold amelipro-filters__item"
+					:class="smAndUp ? 'item-spacing' : undefined"
+				>
+					<div
+						:id="item.id"
+						:aria-checked="item.isChecked"
+						class="amelipro-filters__filter-input"
+						role="checkbox"
+						tabindex="0"
+						@click="updateItems(item, !item.isChecked)"
+						@keydown.space="updateItems(item, !item.isChecked)"
+						@keydown.enter.prevent="updateItems(item, !item.isChecked)"
+					>
+						<span
+							:id="`${item.id}-label-text`"
+							class="filter d-block amelipro-filters__filter__label"
+						>
+							{{ item.label }}
+						</span>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens2026' as apTokens;
+
+.item-spacing {
+	&:not(:last-child) {
+		@media #{apTokens.$media-up-sm} {
+			margin-right: 16px;
+		}
+	}
+}
+
+.amelipro-filters__item {
+	width: 135px;
+	text-align: center;
+}
+
+input {
+	position: absolute;
+	width: 0;
+	height: 0;
+	opacity: 0;
+}
+
+.filter {
+	padding: apTokens.$filter-padding-y apTokens.$filter-padding-x;
+	font-weight: apTokens.$filter-font-weight;
+
+	input + &,
+	.amelipro-filters__filter-input & {
+		position: relative;
+		border-radius: apTokens.$filter-radius;
+		border: 1px solid apTokens.$ap-blue-darken1;
+		background-color: apTokens.$ap-white;
+		color: apTokens.$ap-blue-darken1;
+		cursor: pointer;
+	}
+
+	input:checked + &,
+	.amelipro-filters__filter-input[aria-checked='true'] & {
+		background-color: apTokens.$ap-blue-lighten3;
+
+		&::after {
+			position: absolute;
+			top: 1.1rem;
+			left: 1.1rem;
+			width: 1rem;
+			height: 0.5rem;
+			border-bottom: 2px solid apTokens.$ap-blue-darken1;
+			border-left: 2px solid apTokens.$ap-blue-darken1;
+			transform: rotate(-50deg);
+			content: '';
+		}
+	}
+
+	input:focus + &,
+	.amelipro-filters__filter-input:focus & {
+		outline: 1px dotted apTokens.$ap-grey-darken1;
+	}
+}
+
+.amelipro-filters__label {
+	font-weight: apTokens.$label-font-weight;
+}
+</style>