@cnamts/synapse 1.0.26 → 1.0.27

package/src/components/Customs/Selects/SelectBtnField/SelectBtnField.stories.ts

@@ -418,6 +418,10 @@ export const itemUnique: Story = {
 						aria-labelledby="contact-method"
 					/>
 				</div>
+                <p class="text-caption" style="margin-top: 20px;">
+                  Les items marqués avec <code>unique: true</code> sont exclusifs&nbsp;: lorsqu’ils sont sélectionnés,
+                  tous les autres items sont automatiquement désélectionnés.
+                </p>
             `,
 		}
 	},

package/src/components/Customs/Selects/SelectBtnField/SelectBtnField.vue

@@ -331,15 +331,15 @@
 	color: rgb(var(--v-theme-primary));
 	border: 1px solid rgb(var(--v-theme-primary));
 	min-height: 56px;
-	border-radius: 4px;
+	border-radius: var(--v-radius-rounded);
 	cursor: pointer;
 	position: relative;
 	transition: background-color 0.2s, color 0.2s;
 	background-color: rgb(var(--v-theme-surface));
 
 	&--selected {
-		color: rgb(var(--v-theme-textOnDark));
 		background-color: rgb(var(--v-theme-primary));
+		color: rgb(var(--v-theme-onPrimary));
 	}
 
 	&:focus-visible {
@@ -355,16 +355,17 @@
 		width: 100%;
 		height: 100%;
 		transition: background-color 0.2s;
+		border-radius: var(--v-radius-rounded);
 	}
 
 	&:hover::before {
 		/* stylelint-disable-next-line custom-property-pattern */
-		background-color: rgba(var(--v-theme-overlayOnLight), 0.2);
+		background-color: rgba(var(--v-theme-interactionDarkHover), 0.2);
 	}
 
 	&--selected:hover::before {
 		/* stylelint-disable-next-line custom-property-pattern */
-		background-color: rgba(var(--v-theme-overlayOnDark), 0.2);
+		background-color: rgba(var(--v-theme-interactionLightenHover), 0.2);
 	}
 }
 
@@ -377,7 +378,7 @@
 }
 
 .select-btn-field__options--error .select-btn-field__item {
-	color: rgb(var(--v-theme-textError));
-	border-color: rgb(var(--v-theme-borderError));
+	color: rgb(var(--v-theme-error));
+	border-color: rgb(var(--v-theme-error));
 }
 </style>

package/src/components/Customs/Selects/SelectBtnField/tests/SelectBtnField.spec.ts

@@ -321,4 +321,227 @@ describe('SelectBtnField', () => {
 		await wrapper.find('[role="option"]').trigger('click')
 		expect(wrapper.emitted()).not.toHaveProperty('update:modelValue')
 	})
+
+	it('emits update:error and update:error-messages when an item is selected', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [{ text: 'Test', value: 'test' }],
+				error: true,
+				errorMessages: ['Champ requis'],
+			},
+		})
+
+		await wrapper.find('[role="option"]').trigger('click')
+
+		expect(wrapper.emitted('update:error')).toEqual([[false]])
+		expect(wrapper.emitted('update:error-messages')).toEqual([[undefined]])
+	})
+
+	it('filters out items with null or undefined value', () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'Valide', value: 'valide' },
+					{ text: 'Null', value: null as unknown as string },
+					{ text: 'Undefined', value: undefined as unknown as string },
+				],
+			},
+		})
+
+		const options = wrapper.findAll('[role="option"]')
+		expect(options).toHaveLength(1)
+		expect(options[0]!.text()).toContain('Valide')
+	})
+
+	it('syncs internalValue when modelValue prop changes externally', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+				],
+				modelValue: 'a',
+			},
+		})
+
+		let selectedItem = wrapper.find('[aria-selected="true"]')
+		expect(selectedItem.text()).toContain('A')
+
+		await wrapper.setProps({ modelValue: 'b' })
+
+		selectedItem = wrapper.find('[aria-selected="true"]')
+		expect(selectedItem.text()).toContain('B')
+	})
+
+	it('syncs internalValue array when modelValue changes in multiple mode', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+				],
+				multiple: true,
+				modelValue: ['a'],
+			},
+		})
+
+		expect(wrapper.find('li:nth-child(1)').attributes('aria-checked')).toBe('true')
+		expect(wrapper.find('li:nth-child(2)').attributes('aria-checked')).toBe('false')
+
+		await wrapper.setProps({ modelValue: ['a', 'b'] })
+
+		expect(wrapper.find('li:nth-child(2)').attributes('aria-checked')).toBe('true')
+	})
+
+	it('sets correct ARIA attributes on the listbox', () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				label: 'Choix',
+				multiple: true,
+				inline: true,
+				error: true,
+			},
+		})
+
+		const listbox = wrapper.find('[role="listbox"]')
+		expect(listbox.attributes('aria-label')).toBe('Choix')
+		expect(listbox.attributes('aria-multiselectable')).toBe('true')
+		expect(listbox.attributes('aria-orientation')).toBe('horizontal')
+		expect(listbox.attributes('aria-invalid')).toBe('true')
+	})
+
+	it('sets aria-readonly on the listbox when readonly', () => {
+		const wrapper = mount(SelectBtnField, {
+			props: { readonly: true },
+		})
+
+		expect(wrapper.find('[role="listbox"]').attributes('aria-readonly')).toBe('true')
+	})
+
+	it('navigates to next item with ArrowRight key', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+					{ text: 'C', value: 'c' },
+				],
+			},
+		})
+
+		await wrapper.find('[role="listbox"]').trigger('keydown', { key: 'ArrowRight' })
+		await wrapper.find('[role="listbox"]').trigger('keydown', { key: 'ArrowRight' })
+
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted!.length).toBeGreaterThanOrEqual(1)
+	})
+
+	it('wraps around to first item when navigating past last with ArrowDown', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+				],
+				modelValue: 'b',
+			},
+		})
+
+		await wrapper.find('[role="listbox"]').trigger('keydown', { key: 'ArrowDown' })
+
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted![emitted!.length - 1]![0]).toBe('a')
+	})
+
+	it('wraps around to last item when navigating before first with ArrowUp', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+				],
+				modelValue: 'a',
+			},
+		})
+
+		await wrapper.find('[role="listbox"]').trigger('keydown', { key: 'ArrowUp' })
+
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted![emitted!.length - 1]![0]).toBe('b')
+	})
+
+	it('selects item with Space key', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [{ text: 'Test', value: 'test' }],
+			},
+		})
+
+		await wrapper.find('[role="option"]').trigger('keydown', { key: ' ' })
+
+		expect(wrapper.emitted('update:modelValue')).toEqual([['test']])
+	})
+
+	it('selecting unique item when others are selected replaces all', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				multiple: true,
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+					{ text: 'Unique', value: 'unique', unique: true },
+				],
+				modelValue: ['a', 'b'],
+			},
+		})
+
+		await wrapper.find('li:nth-child(3)[role="option"]').trigger('click')
+
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted![emitted!.length - 1]![0]).toEqual(['unique'])
+	})
+
+	it('re-selecting a unique item in multiple mode deselects it', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				multiple: true,
+				items: [
+					{ text: 'Unique', value: 'unique', unique: true },
+				],
+				modelValue: ['unique'],
+			},
+		})
+
+		await wrapper.find('[role="option"]').trigger('click')
+
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted![emitted!.length - 1]![0]).toEqual([])
+	})
+
+	it('displays hint when no errorMessages', () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				hint: 'Aide contextuelle',
+				items: [{ text: 'A', value: 'a' }],
+			},
+		})
+
+		expect(wrapper.text()).toContain('Aide contextuelle')
+	})
+
+	it('displays errorMessages instead of hint when both are provided', () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				hint: 'Aide contextuelle',
+				errorMessages: ['Champ invalide'],
+				items: [{ text: 'A', value: 'a' }],
+			},
+		})
+
+		expect(wrapper.text()).toContain('Champ invalide')
+		expect(wrapper.text()).not.toContain('Aide contextuelle')
+	})
 })