@cnamts/synapse 1.0.24 → 1.0.25

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

@@ -663,6 +663,72 @@ describe('SyAutocomplete', () => {
 		expect(option0?.getAttribute('aria-selected')).toBe('false')
 	})
 
+	describe('disabled', () => {
+		it('does not open menu when input is clicked on a disabled field', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test Disabled',
+					textKey: 'text',
+					valueKey: 'value',
+					disabled: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			const input = wrapper.find('input')
+			await input.trigger('click')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+			expect(isMenuOverlayActive()).toBe(false)
+		})
+
+		it('does not emit update:modelValue when selectItem is called on a disabled field', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test Disabled Select',
+					textKey: 'text',
+					valueKey: 'value',
+					disabled: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			// openAndFocus is guarded, but selectItem itself is not — the field input
+			// is natively disabled so users cannot interact; we verify the menu stays closed.
+			expect(isMenuOverlayActive()).toBe(false)
+			await wrapper.vm.$nextTick()
+			expect(isMenuOverlayActive()).toBe(false)
+		})
+
+		it('passes disabled prop to SyTextField', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test Disabled TextField',
+					textKey: 'text',
+					valueKey: 'value',
+					disabled: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			const textField = wrapper.findComponent(SyTextField)
+			expect(textField.props('disabled')).toBe(true)
+		})
+	})
+
 	describe('hideDetails', () => {
 		it('hides the details zone when hideDetails is true', async () => {
 			wrapper.unmount()

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

@@ -303,11 +303,9 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-input-select {
 	text-transform: none !important;
-	font-size: 16px;
+	font-size: var(--v-fontSize-corpsDeTexte);
 }
 
 .v-input {
@@ -346,14 +344,14 @@
 }
 
 .error {
-	border-color: tokens.$danger-default;
+	border-color: rgb(var(--v-theme-error));
 }
 
 .v-btn {
-	color: tokens.$blue-base;
+	color: rgb(var(--v-theme-blue-base));
 }
 
 .text-color {
-	color: tokens.$blue-base;
+	color: rgb(var(--v-theme-blue-base));
 }
 </style>

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

@@ -11,7 +11,7 @@ const meta: Meta<typeof SySelect> = {
 	component: SySelect,
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['selectedValue', 'isOpen', 'closeList'] },
+		controls: { exclude: ['onUpdate:modelValue', 'selectedValue', 'isOpen', 'closeList'] },
 	},
 	argTypes: {
 		selectedValue: { control: 'text' },
@@ -115,9 +115,6 @@ export default meta
 type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -180,7 +177,6 @@ export const Default: Story = {
 						v-bind="args"
 					/>
 				</div>
-				<br/><br/><br/><br/>
 			`,
 		}
 	},
@@ -188,9 +184,6 @@ export const Default: Story = {
 
 export const HelpText: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -257,7 +250,6 @@ export const HelpText: Story = {
 						v-bind="args"
 					/>
 				</div>
-				<br/><br/><br/><br/>
 			`,
 		}
 	},
@@ -265,9 +257,6 @@ export const HelpText: Story = {
 
 export const Required: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -326,9 +315,6 @@ export const Required: Story = {
 
 export const RequiredWithAsterisk: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		docs: {
 			description: {
 				story: 'Version du champ de sélection requis avec un astérisque visuel.',
@@ -394,9 +380,6 @@ const items = [
 
 export const SlotPrepend: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -461,9 +444,6 @@ export const SlotPrepend: Story = {
 
 export const SlotAppend: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -561,9 +541,6 @@ export const WithTooltips: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		docs: {
 			description: {
 				story: 'Exemple de champ avec des tooltips d\'information. Les icônes d\'information apparaissent automatiquement lorsque les props prependTooltip et/ou appendTooltip sont renseignées. La position des tooltips peut être contrôlée avec la prop tooltipLocation.',
@@ -606,9 +583,6 @@ export const WithTooltips: Story = {
 
 export const MultipleSelection: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		docs: {
 			description: {
 				story: 'Exemple de sélection multiple avec SySelect. Les options dans le menu déroulant sont affichées avec des cases à cocher pour faciliter la sélection multiple.',
@@ -699,9 +673,6 @@ const options = [
 
 export const ChipsDisplay: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		docs: {
 			description: {
 				story: 'Exemple de sélection multiple avec affichage en chips. Les options sélectionnées sont affichées sous forme de chips dans le champ, et les options dans le menu déroulant sont affichées avec des cases à cocher.',
@@ -776,9 +747,6 @@ const options = [
 
 export const withCustomError: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -854,9 +822,6 @@ export const withCustomError: Story = {
 
 export const withCustomKey: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -935,9 +900,6 @@ export const Info: Story = {
 
 export const FormValidation: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		docs: {
 			description: {
 				story: 'Exemple d\'utilisation du SySelect dans un formulaire.',