@cnamts/synapse 1.0.10 → 1.0.12

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

@@ -1,4 +1,3 @@
-import { vuetify } from '@tests/unit/setup'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { VList } from 'vuetify/components'
@@ -11,9 +10,6 @@ type ItemType = {
 describe('SySelect.vue', () => {
 	it('renders the component with default props', () => {
 		const wrapper = mount(SySelect, {
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		expect(wrapper.exists()).toBe(true)
@@ -26,9 +22,6 @@ describe('SySelect.vue', () => {
 		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
 		const wrapper = mount(SySelect, {
 			props: { items, modelValue: { text: 'Option 1', value: '1' } },
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		await wrapper.find('.sy-select').trigger('click')
@@ -45,9 +38,6 @@ describe('SySelect.vue', () => {
 		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
 		const wrapper = mount(SySelect, {
 			props: { items },
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		await wrapper.find('.sy-select').trigger('click')
@@ -63,9 +53,6 @@ describe('SySelect.vue', () => {
 		const errorMessages = ['Error 1']
 		const wrapper = mount(SySelect, {
 			props: { errorMessages, hideMessages: false },
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		const message = wrapper.find('.v-messages__message')
@@ -77,9 +64,6 @@ describe('SySelect.vue', () => {
 
 	it('does not render error messages when not provided', () => {
 		const wrapper = mount(SySelect, {
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		expect(wrapper.find('.v-messages__message').exists()).toBe(false)
@@ -90,9 +74,6 @@ describe('SySelect.vue', () => {
 	it('returns the correct item text using getItemText', () => {
 		const wrapper = mount(SySelect, {
 			props: { textKey: 'text' },
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		const item = { text: 'Option 1', value: '1' }
@@ -105,9 +86,6 @@ describe('SySelect.vue', () => {
 
 	it('returns default text when selectedItem is null', () => {
 		const wrapper = mount(SySelect, {
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -124,9 +102,6 @@ describe('SySelect.vue', () => {
 				textKey: 'text',
 				returnObject: true,
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -144,9 +119,6 @@ describe('SySelect.vue', () => {
 				modelValue: '1',
 				textKey: 'text',
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -162,9 +134,6 @@ describe('SySelect.vue', () => {
 		const items = ['Option 1', 'Option 2'] as unknown as ItemType[]
 		const wrapper = mount(SySelect, {
 			props: { items, textKey: 'text', valueKey: 'value' },
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -180,9 +149,6 @@ describe('SySelect.vue', () => {
 	it('applies the correct button class when outlined is true', () => {
 		const wrapper = mount(SySelect, {
 			props: { outlined: true },
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		expect(wrapper.find('.v-field--variant-outlined').exists()).toBe(true)
@@ -193,9 +159,6 @@ describe('SySelect.vue', () => {
 	it('does not apply the outlined button class when outlined is false', () => {
 		const wrapper = mount(SySelect, {
 			props: { outlined: false },
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		expect(wrapper.find('.sy-select').classes()).not.toContain('v-btn--variant-outlined')
@@ -206,9 +169,6 @@ describe('SySelect.vue', () => {
 	it('updates selectedItem when v-model changes', async () => {
 		const wrapper = mount(SySelect, {
 			props: { modelValue: { text: 'Option 1', value: '1' }, textKey: 'text' },
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -225,9 +185,6 @@ describe('SySelect.vue', () => {
 		const wrapper = mount(SySelect, {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 			props: { modelValue: null as any, textKey: 'text' },
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -244,9 +201,6 @@ describe('SySelect.vue', () => {
 			props: {
 				items: [{ text: 'Option 1', value: '1' }],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 
@@ -273,9 +227,6 @@ describe('SySelect.vue', () => {
 					required: true,
 					label: 'Test Label',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -292,9 +243,6 @@ describe('SySelect.vue', () => {
 					required: true,
 					label: 'Test Label',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -312,9 +260,6 @@ describe('SySelect.vue', () => {
 					required: false,
 					label: 'Test Label',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -333,9 +278,6 @@ describe('SySelect.vue', () => {
 					readonly: true,
 					items: [{ text: 'Option 1', value: '1' }],
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -359,9 +301,6 @@ describe('SySelect.vue', () => {
 					textKey: 'text',
 					returnObject: true,
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -381,9 +320,6 @@ describe('SySelect.vue', () => {
 					modelValue: { text: 'Option 1', value: '1' },
 					returnObject: true,
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -399,9 +335,6 @@ describe('SySelect.vue', () => {
 					modelValue: { text: 'Option 1', value: '1' },
 					returnObject: true,
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -417,9 +350,6 @@ describe('SySelect.vue', () => {
 					modelValue: { text: 'Option 1', value: '1' },
 					returnObject: true,
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -442,9 +372,6 @@ describe('SySelect.vue', () => {
 					label: 'Test Label',
 					modelValue: undefined,
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -468,9 +395,6 @@ describe('SySelect.vue', () => {
 					modelValue: { text: 'Option 1', value: '1' },
 					returnObject: true,
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -494,9 +418,6 @@ describe('SySelect.vue', () => {
 					modelValue: undefined,
 					disableErrorHandling: true,
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -519,9 +440,6 @@ describe('SySelect.vue', () => {
 				props: {
 					items: [{ text: 'Option 1', value: '1' }],
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 			function findList() {
@@ -542,9 +460,6 @@ describe('SySelect.vue', () => {
 				props: {
 					items: [{ text: 'Option 1', value: '1' }],
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -568,9 +483,6 @@ describe('SySelect.vue', () => {
 				props: {
 					items: [{ text: 'Option 1', value: '1' }],
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -592,9 +504,6 @@ describe('SySelect.vue', () => {
 			props: {
 				items: [{ text: 'Option 1', value: '1' }],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 
@@ -615,9 +524,6 @@ describe('SySelect.vue', () => {
 
 	it('use closeList method', async () => {
 		const wrapper = mount(SySelect, {
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		wrapper.vm.closeList()
@@ -632,9 +538,6 @@ describe('SySelect.vue', () => {
 				returnObject: false,
 				items: [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		await wrapper.find('.sy-select').trigger('click')
@@ -656,10 +559,6 @@ describe('SySelect.vue', () => {
 				returnObject: true,
 				items: [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }],
 			},
-			global: {
-				plugins: [vuetify],
-			},
-
 			attachTo: document.body,
 		})
 
@@ -684,9 +583,6 @@ describe('SySelect.vue', () => {
 				valueKey: 'theValue',
 				items: [{ theText: 'Option 1', theValue: '1' }, { theText: 'Option 2', theValue: '2' }],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		await wrapper.find('.sy-select').trigger('click')
@@ -710,9 +606,6 @@ describe('SySelect.vue', () => {
 				valueKey: 'theValue',
 				items: [{ theText: 'Option 1', theValue: '1' }, { theText: 'Option 2', theValue: '2' }],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 
@@ -734,10 +627,6 @@ describe('SySelect.vue', () => {
 			props: {
 				items: ['Option 1', 'Option 2'] as unknown as ItemType[],
 			},
-			global: {
-				plugins: [vuetify],
-			},
-
 			attachTo: document.body,
 		})
 
@@ -761,9 +650,6 @@ describe('SySelect.vue', () => {
 				clearable: true,
 				items: [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 
@@ -791,9 +677,6 @@ describe('SySelect.vue', () => {
 					textKey: 'text',
 					valueKey: 'value',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -833,9 +716,6 @@ describe('SySelect.vue', () => {
 					textKey: 'text',
 					valueKey: 'value',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -868,9 +748,6 @@ describe('SySelect.vue', () => {
 					textKey: 'text',
 					valueKey: 'value',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -907,9 +784,6 @@ describe('SySelect.vue', () => {
 					textKey: 'text',
 					valueKey: 'value',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -937,9 +811,6 @@ describe('SySelect.vue', () => {
 					textKey: 'text',
 					valueKey: 'value',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -969,9 +840,6 @@ describe('SySelect.vue', () => {
 					textKey: 'text',
 					valueKey: 'value',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 
@@ -999,9 +867,6 @@ describe('SySelect.vue', () => {
 					textKey: 'text',
 					valueKey: 'value',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 				attachTo: document.body,
 			})
 

package/src/components/Customs/SyCheckbox/SyCheckbox.stories.ts

@@ -384,7 +384,7 @@ La propriété \`controlsIds\` permet de créer une relation sémantique entre u
 					:indeterminate="parentIndeterminate" 
 					@update:indeterminate="parentIndeterminate = $event"
 					:controls-ids="['child-1', 'child-2', 'child-3']"
-					label="Parent" 
+					label="Parent"
 				/>
 				<div style="margin-left: 24px;">
 					<SyCheckbox v-model="childChecked1" id="child-1" label="Enfant 1" />

package/src/components/Customs/SyCheckbox/SyCheckbox.vue

@@ -46,7 +46,7 @@
 			disabled: false,
 			readonly: false,
 			required: false,
-			hideDetails: false,
+			hideDetails: 'auto',
 			density: 'default',
 			errorMessages: null,
 			warningMessages: null,

package/src/components/Customs/SyCheckbox/tests/SyCheckbox.spec.ts

@@ -2,27 +2,13 @@ import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 import { nextTick } from 'vue'
 import SyCheckbox from '../SyCheckbox.vue'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
 
 describe('SyCheckbox', () => {
-	// Configuration de Vuetify pour les tests
-	const vuetify = createVuetify({
-		components,
-		directives,
-	})
-
-	const global = {
-		plugins: [vuetify],
-	}
-
 	it('should render correctly', () => {
 		const wrapper = mount(SyCheckbox, {
 			props: {
 				label: 'Test checkbox',
 			},
-			global,
 		})
 
 		expect(wrapper.find('.v-checkbox').exists()).toBe(true)
@@ -35,7 +21,6 @@ describe('SyCheckbox', () => {
 				'modelValue': false,
 				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
 			},
-			global,
 		})
 
 		await wrapper.find('input[type="checkbox"]').setValue(true)
@@ -51,7 +36,6 @@ describe('SyCheckbox', () => {
 				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
 				'onUpdate:indeterminate': e => wrapper.setProps({ indeterminate: e }),
 			},
-			global,
 		})
 
 		// Vérifier que l'état indéterminé est actif
@@ -70,7 +54,6 @@ describe('SyCheckbox', () => {
 				modelValue: false,
 				controlsIds: ['child-1', 'child-2'],
 			},
-			global,
 		})
 
 		// État initial: non coché
@@ -125,7 +108,6 @@ describe('SyCheckbox', () => {
 				'required': true,
 				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
 			},
-			global,
 		})
 
 		// Simuler un événement blur pour déclencher la validation
@@ -155,7 +137,6 @@ describe('SyCheckbox', () => {
 				'isValidateOnBlur': false, // Valider immédiatement
 				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
 			},
-			global,
 		})
 
 		// Vérifier l'état initial
@@ -186,7 +167,6 @@ describe('SyCheckbox', () => {
 				'readonly': true,
 				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
 			},
-			global,
 		})
 
 		// Cliquer sur une case à cocher en lecture seule ne devrait pas changer sa valeur

package/src/components/Customs/SyForm/SyForm.mdx

@@ -45,9 +45,7 @@ Vous pouvez implémenter des règles de validation personnalisées et accéder a
 
 ## Sans validation automatique
 
-Si vous souhaitez gérer vous-même la validation, vous pouvez désactiver la validation automatique.
-
-<Canvas of={SyFormStories.WithoutAutoValidation} />
+Si vous souhaitez gérer vous-même la validation, vous pouvez désactiver la validation automatique en passant `validate-on-submit="false"`.
 
 <Source dark code={'\n<script setup lang="ts">\nimport { ref } from "vue"\nimport SyForm from "@cnamts/synapse"\nimport SyTextField from "@cnamts/synapse"\n\nconst name = ref("")\nconst email = ref("")\n\nconst onSubmit = () => {\n  // La validation ne se fait pas automatiquement\n  alert("Soumission du formulaire sans validation automatique. Vous devez gérer la validation manuellement.")\n}\n</script>\n\n<template>\n  <SyForm :validate-on-submit="false" @submit="onSubmit">\n    <div class="d-flex flex-column gap-4">\n      <SyTextField v-model="name" label="Nom" required />\n      <SyTextField v-model="email" label="Email" required :rules="[v => /.+@.+/.test(v) || \'E-mail invalide\']" />\n      <v-btn type="submit" color="primary">Soumettre</v-btn>\n    </div>\n  </SyForm>\n</template>'} />