@cnamts/synapse 1.0.4 → 1.0.6

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

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
+import AmeliproCustomSelector from './AmeliproCustomSelector.vue'
+
+const meta = {
+	argTypes: {
+		'ariaRequired': { description: 'Permet de rendre la selection obligatoire d’au moins une option' },
+		'change:selected': { description: 'Événement émis au click sur une checkbox/bouton radio retourne le ou les éléments sélectionnés selon si la property unique est activé ou non et un identifiant pour le groupe' },
+		'disabled': { description: 'Permet de désactiver le CustomSelector' },
+		'groupLabel': { description: 'Label du groupe de checkbox/boutons radios' },
+		'itemsPerLine': { description: 'Nombre de boutons par ligne' },
+		'labelDescription': { description: 'Id de la tooltip associée au label si il y en a une' },
+		'labelInfo': { description: 'Slot pour ajouter une tooltip après le label du groupe si besoin' },
+		'labelMarginBottom': { description: 'Valeur du margin-bottom du label' },
+		'modelValue': {
+			description: 'Tableau d’objets qui permet de générer les checkbox/boutons radios',
+			table: {
+				type: {
+					detail: `Array<{
+	disabled?: boolean;
+	isChecked: boolean;
+	label: string;
+	value: string;
+}[]>`,
+					summary: 'AmeliproCustomSelectorItem[]',
+				},
+			},
+		},
+		'multipleRequired': { description: 'Permet de rendre la selection multiple obligatoire' },
+		'multipleRequiredErrorMessage': { description: 'Message d’erreur affiché lorsque la props multipleRequired est active' },
+		'requiredErrorMessage': { description: 'Message d’erreur affiché lorsque la props ariaRequired est active' },
+		'unique': { description: 'Pour avoir seulement un item sélectionnable ' },
+		'uniqueId': { description: 'Id unique du groupe de checkbox/boutons radios' },
+		'update:model-value': { description: 'Événement émis au changement du v-model' },
+	},
+	component: AmeliproCustomSelector,
+	title: 'Composants/Amelipro/Formulaires/AmeliproCustomSelector',
+} as Meta<typeof AmeliproCustomSelector>
+
+export default meta
+
+type Story = StoryObj<typeof AmeliproCustomSelector>
+
+const items = [
+	{
+		id: 'item',
+		isChecked: false,
+		label: 'option 1',
+		value: 'toto',
+	},
+	{
+		id: 'item2',
+		isChecked: false,
+		label: 'option 2',
+		value: 'titi',
+	},
+	{
+		id: 'item3',
+		isChecked: true,
+		label: 'option 3',
+		value: 'tutu',
+	},
+	{
+		id: 'item4',
+		isChecked: false,
+		label: 'option 4',
+		value: 'tata',
+	},
+]
+
+export const Default: Story = {
+	args: {
+		groupLabel: 'Mon label',
+		modelValue: items,
+		uniqueId: 'custom-selector-id',
+	},
+	parameters: {
+		args: {},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproCustomSelector
+		v-model="value"
+		group-label="Mon label"
+		unique-id="custom-selector-id"
+	/>
+</template>`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { ref } from 'vue';
+	import { AmeliproCustomSelector } from '@cnamts/synapse';
+
+	const value = ref([
+		{
+			id: 'item',
+			isChecked: false,
+			label: 'option 1',
+			value: 'toto',
+		},
+		{
+			id: 'item2',
+			isChecked: false,
+			label: 'option 2',
+			value: 'titi',
+		},
+		{
+			id: 'item3',
+			isChecked: true,
+			label: 'option 3',
+			value: 'tutu',
+		},
+		{
+			id: 'item4',
+			isChecked: false,
+			label: 'option 4',
+			value: 'tata',
+		},
+	]);
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproCustomSelector },
+		setup() {
+			const model = ref(args.modelValue)
+
+			// Optional: Keeps v-model in sync with storybook args
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+<AmeliproCustomSelector
+	v-bind="args"
+	v-model="model"
+/>`,
+	}),
+}

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

@@ -0,0 +1,351 @@
+<script setup lang="ts">
+	import { type PropType, computed, onUpdated, ref } from 'vue'
+	import type { AmeliproCustomSelectorItem } from './types'
+	import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
+	import type { IndexedObject } from '../types'
+
+	const props = defineProps({
+		ariaRequired: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		groupLabel: {
+			type: String,
+			required: true,
+		},
+		itemsPerLine: {
+			type: Number,
+			default: 1,
+		},
+		labelDescription: {
+			type: String,
+			default: undefined,
+		},
+		labelMarginBottom: {
+			type: String,
+			default: undefined,
+		},
+		modelValue: {
+			type: Array as PropType<AmeliproCustomSelectorItem[]>,
+			default: () => [],
+		},
+		multipleRequired: {
+			type: Boolean,
+			default: false,
+		},
+		multipleRequiredErrorMessage: {
+			type: String,
+			default: 'Vous devez cocher au moins deux options',
+		},
+		requiredErrorMessage: {
+			type: String,
+			default: 'Sélection obligatoire',
+		},
+		unique: {
+			type: Boolean,
+			default: false,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const emit = defineEmits(['update:model-value', 'change:selected'])
+
+	const currentValue = computed<AmeliproCustomSelectorItem[]>({
+		get: () => props.modelValue,
+		set: (newValue: AmeliproCustomSelectorItem[]) => {
+			emit('update:model-value', newValue)
+		},
+	})
+
+	const isAlreadyCheckedOnce = ref(false)
+
+	const selectedValue = computed<string | null>(() => {
+		const checkedItem = currentValue.value.filter(e => e.isChecked)
+		return checkedItem.length === 1 ? checkedItem[0].value : null
+	})
+
+	const emitChangeEvent = (item: AmeliproCustomSelectorItem): void => {
+		currentValue.value = currentValue.value.map((currentItem: AmeliproCustomSelectorItem) => {
+			if (currentItem.value === item.value) {
+				currentItem.isChecked = true
+			}
+			else {
+				currentItem.isChecked = false
+			}
+			return currentItem
+		})
+		emit('change:selected', selectedValue.value, props.uniqueId)
+	}
+
+	const updateItems = (item: AmeliproCustomSelectorItem, isChecked: boolean) => {
+		if (!props.disabled && !item.disabled) {
+			isAlreadyCheckedOnce.value = true
+			currentValue.value = currentValue.value.map((currentItem: AmeliproCustomSelectorItem) => {
+				if (currentItem === item) {
+					currentItem.isChecked = isChecked
+				}
+				return currentItem
+			})
+			const selectedItems = currentValue.value.filter(e => e.isChecked === true)
+			emit('change:selected', selectedItems)
+		}
+	}
+
+	const isSingleRequiredErrorMessage = computed(() => props.ariaRequired === true && (currentValue.value.filter(item => item.isChecked).length < 1))
+	const isMultipleRequiredErrorMessage = computed(() => props.multipleRequired === true && !props.unique && (currentValue.value.filter(item => item.isChecked).length < 2))
+	const error = computed<string>(() => {
+		if (isAlreadyCheckedOnce.value === true) {
+			if (isSingleRequiredErrorMessage.value) {
+				return props.requiredErrorMessage
+			}
+			else if (!props.unique && isMultipleRequiredErrorMessage.value) {
+				return props.multipleRequiredErrorMessage
+			}
+		}
+		return ''
+	})
+	const checkErrorCondition = computed<boolean>(() => {
+		if (isAlreadyCheckedOnce.value === true) {
+			if (isSingleRequiredErrorMessage.value) {
+				return true
+			}
+			else if (!props.unique && isMultipleRequiredErrorMessage.value) {
+				return true
+			}
+		}
+		return false
+	})
+
+	const labelMarginBottomValue = computed<IndexedObject | undefined>(() => (props.labelMarginBottom ? { marginBottom: props.labelMarginBottom } : undefined))
+
+	onUpdated(() => {
+		isAlreadyCheckedOnce.value = true
+	})
+</script>
+
+<template>
+	<div
+		:id="`${uniqueId}-container`"
+		:aria-describedby="checkErrorCondition && unique ? `${uniqueId}-error` : undefined"
+		:aria-labelledby="unique ? uniqueId : undefined"
+		class="amelipro-custom-selector"
+		:role="unique ? 'radiogroup' : undefined"
+	>
+		<div
+			class="d-flex align-center amelipro-custom-selector__label-wrapper"
+			:style="labelMarginBottomValue"
+		>
+			<p
+				:id="uniqueId"
+				:aria-describedby="labelDescription"
+				class="mb-1 text-ap-grey-darken-1 amelipro-custom-selector__label"
+			>
+				{{ groupLabel }}
+
+				<span
+					v-if="ariaRequired || multipleRequired"
+					aria-hidden="true"
+					class="d-inline-flex"
+				>
+					&nbsp;*
+				</span>
+
+				<span
+					v-if="ariaRequired || multipleRequired"
+					class="d-sr-only"
+				>
+					&nbsp;Champ obligatoire
+				</span>
+			</p>
+
+			<slot name="labelInfo" />
+		</div>
+
+		<div
+			v-if="unique"
+			class="d-flex flex-wrap justify-start amelipro-custom-selector__group"
+		>
+			<div
+				v-for="(item, index) in currentValue"
+				:key="index"
+				class="d-block item-spacing amelipro-custom-selector__item"
+				:class="{
+					'item-per-line-2': itemsPerLine === 2,
+					'item-per-line-3': itemsPerLine === 3,
+				}"
+			>
+				<label
+					:id="`${uniqueId}-label-${index}`"
+					class="d-block"
+					:for="`${uniqueId}-input-${index}`"
+				>
+					<input
+						:id="`${uniqueId}-input-${index}`"
+						:aria-checked="item.isChecked"
+						:checked="item.isChecked"
+						:disabled="item.disabled || disabled"
+						:name="`${uniqueId}-name`"
+						type="radio"
+						:value="item.value"
+						@input="emitChangeEvent(item)"
+					>
+
+					<span
+						:id="`${uniqueId}-label-text-${index}`"
+						class="select-item text-ap-grey-darken-1 text-body-1 d-block"
+					>
+						{{ item.label }}
+					</span>
+				</label>
+			</div>
+		</div>
+
+		<div
+			v-else
+			:aria-describedby="checkErrorCondition ? `${uniqueId}-error` : undefined"
+			:aria-disabled="disabled ? true : undefined"
+			:aria-invalid="checkErrorCondition ? true : undefined"
+			:aria-labelledby="uniqueId"
+			:aria-required="ariaRequired || multipleRequired ? true : undefined"
+			class="d-flex flex-wrap justify-start amelipro-custom-selector__group"
+			role="group"
+		>
+			<ul class="list-style-none w-100">
+				<li
+					v-for="(item, index) in currentValue"
+					:key="index"
+					class="d-block item-spacing amelipro-custom-selector__item"
+					:class="{
+						'item-per-line-2': itemsPerLine === 2,
+						'item-per-line-3': itemsPerLine === 3,
+					}"
+				>
+					<div
+						:id="`${uniqueId}-input-${index}`"
+						:aria-checked="item.isChecked"
+						:aria-disabled="disabled || item.disabled ? true : undefined"
+						class="d-block checkbox-input"
+						role="checkbox"
+						:tabindex="disabled || item.disabled ? '-1' : '0'"
+						@click="updateItems(item, !item.isChecked)"
+						@keydown.space="updateItems(item, !item.isChecked)"
+					>
+						<span
+							:id="`${uniqueId}-label-text-${index}`"
+							class="select-item text-ap-grey-darken-1 text-body-1 d-block"
+						>
+							{{ item.label }}
+						</span>
+					</div>
+				</li>
+			</ul>
+		</div>
+
+		<AmeliproMessage
+			v-if="checkErrorCondition"
+			no-icon
+			text
+			type="error"
+			:unique-id="`${uniqueId}-error`"
+		>
+			<p class="mb-0">
+				{{ error }}
+			</p>
+		</AmeliproMessage>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.amelipro-custom-selector__label {
+	font-size: apTokens.$font-size-sm;
+	font-weight: apTokens.$ap-font-weight-bold;
+}
+
+.amelipro-custom-selector__item {
+	width: 100%;
+
+	&.item-per-line-2 {
+		@media #{apTokens.$media-up-sm} {
+			width: calc(50% - 8px);
+			margin-left: 8px;
+
+			&:nth-child(2n+1) {
+				margin-left: 0;
+			}
+		}
+	}
+
+	&.item-per-line-3 {
+		@media #{apTokens.$media-up-sm} {
+			width: calc((100% / 3) - (16px / 3));
+			margin-left: 8px;
+
+			&:nth-child(3n+1) {
+				margin-left: 0;
+			}
+		}
+	}
+}
+
+.item-spacing {
+	&:not(:last-child) {
+		margin-bottom: 8px;
+	}
+}
+
+input {
+	position: absolute;
+	width: 0;
+	height: 0;
+	opacity: 0;
+}
+
+.select-item {
+	input + &,
+	.checkbox-input & {
+		position: relative;
+		padding: 0.75rem 3rem 0.75rem 1rem;
+		border-radius: 5px;
+		border: 1px solid apTokens.$ap-grey;
+		background-color: apTokens.$ap-white;
+		cursor: pointer;
+	}
+
+	input:checked + &,
+	.checkbox-input[aria-checked='true'] & {
+		background-color: apTokens.$ap-blue-lighten3;
+
+		&::after {
+			position: absolute;
+			top: 1rem;
+			right: 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:disabled + &,
+	.checkbox-input[aria-disabled='true'] & {
+		background-color: apTokens.$ap-grey-lighten2;
+		cursor: default;
+
+		&::after {
+			border-bottom-color: apTokens.$ap-grey-darken1;
+			border-left-color: apTokens.$ap-grey-darken1;
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,50 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproCustomSelector from '../AmeliproCustomSelector.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproCustomSelector', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproCustomSelector, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				groupLabel: 'Libellé du groupe',
+				modelValue: [
+					{
+						disabled: true,
+						isChecked: true,
+						label: '1',
+						value: 'Valeur 1',
+					},
+					{
+						description: 'ma-tooltip',
+						disabled: true,
+						isChecked: false,
+						label: '2',
+						value: 'Valeur 2',
+					},
+					{
+						isChecked: false,
+						label: '3',
+						value: 'Valeur 3',
+					},
+					{
+						isChecked: false,
+						label: '4',
+						value: 'Valeur 4',
+					},
+					{
+						isChecked: false,
+						label: '5',
+						value: 'Valeur 5',
+					},
+				],
+				uniqueId: 'my-custom-selector-group-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})