@cnamts/synapse 1.0.24 → 1.0.26

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

@@ -3,21 +3,21 @@ import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 import SyAlert from '../../../SyAlert/SyAlert.vue'
 import SyForm from '../../SyForm/SyForm.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { fn } from '@storybook/test'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
 
 const meta: Meta<typeof SySelect> = {
 	title: 'Composants/Formulaires/Selects/SySelect',
 	component: SySelect,
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['selectedValue', 'isOpen', 'closeList'] },
+		controls: { exclude: ['onUpdate:modelValue', 'selectedValue', 'isOpen', 'closeList'] },
 	},
 	argTypes: {
+		...getValidationDocumentation('string'),
 		selectedValue: { control: 'text' },
 		items: { control: 'object' },
-		errorMessages: { control: 'object' },
-		required: { control: 'boolean' },
 		displayAsterisk: { control: 'boolean' },
 		textKey: {
 			control: 'text',
@@ -51,10 +51,6 @@ const meta: Meta<typeof SySelect> = {
 			control: 'boolean',
 			description: 'Affiche les options sélectionnées sous forme de chips',
 		},
-		hideMessages: {
-			control: 'boolean',
-			description: 'Masque les messages d\'erreur',
-		},
 		variantStyle: {
 			control: 'select',
 			options: ['outlined', 'plain', 'underlined', 'filled', 'solo', 'solo-inverted', 'solo-filled'],
@@ -115,9 +111,6 @@ export default meta
 type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -166,21 +159,29 @@ export const Default: Story = {
 			{ text: 'Emensis itaque difficultatibus multis et nive obrutis callibus', value: 'Louis' },
 			{ text: 'Plurimis ubi prope Rauracum ventum est ad supercilia', value: 'Valentin' },
 		],
+		'customSuccessRules': [{
+			type: 'custom',
+			options: {
+				validate: (v: unknown) => v !== null && v !== undefined,
+				successMessage: 'Option sélectionnée avec succès.',
+			},
+		}],
 		'onUpdate:modelValue': fn(),
 	},
 	render: (args) => {
 		return {
 			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
-				return { args }
+				const value = ref(null)
+				return { args, value }
 			},
 			template: `
 				<div class="pa-4">
 					<SySelect
+						v-model="value"
 						v-bind="args"
 					/>
 				</div>
-				<br/><br/><br/><br/>
 			`,
 		}
 	},
@@ -188,9 +189,6 @@ export const Default: Story = {
 
 export const HelpText: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -241,23 +239,30 @@ export const HelpText: Story = {
 			{ text: 'Valentin', value: 'Valentin' },
 		],
 		'helpText': 'Texte d\'aide à la saisie',
-		'hideMessages': false,
-		'required': true,
+		'hideDetails': false,
+		'customSuccessRules': [{
+			type: 'custom',
+			options: {
+				validate: (v: unknown) => v !== null && v !== undefined,
+				successMessage: 'Option sélectionnée avec succès.',
+			},
+		}],
 		'onUpdate:modelValue': fn(),
 	},
 	render: (args) => {
 		return {
 			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
-				return { args }
+				const value = ref(null)
+				return { args, value }
 			},
 			template: `
 				<div class="pa-4">
 					<SySelect
+						v-model="value"
 						v-bind="args"
 					/>
 				</div>
-				<br/><br/><br/><br/>
 			`,
 		}
 	},
@@ -265,9 +270,6 @@ export const HelpText: Story = {
 
 export const Required: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -286,12 +288,13 @@ export const Required: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
+					import { ref } from 'vue'
 					import { SySelect } from '@cnamts/synapse'
-					
+					const value = ref(null)
 					const items =  [
 						{ text: 'Option 1', value: '1' },
 						{ text: 'Option 2', value: '2' },
-					],
+					]
 				</script>
 				`,
 			},
@@ -309,14 +312,15 @@ export const Required: Story = {
 		return {
 			components: { SySelect },
 			setup() {
-				return { args }
+				const value = ref(null)
+				return { args, value }
 			},
 			template: `
 				<div class="pa-4">
 					<p class="mb-2 text-caption text-grey-darken-2">Ce champ est obligatoire</p>
 					<SySelect
+						v-model="value"
 						v-bind="args"
-						:required="args.required"
 					/>
 				</div>
 			`,
@@ -326,9 +330,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.',
@@ -377,14 +378,14 @@ const items = [
 		return {
 			components: { SySelect },
 			setup() {
-				return { args }
+				const value = ref(null)
+				return { args, value }
 			},
 			template: `
 				<div class="pa-4">
 					<SySelect
+						v-model="value"
 						v-bind="args"
-						:required="args.required"
-						:display-asterisk="args.displayAsterisk"
 					/>
 				</div>
 			`,
@@ -392,11 +393,275 @@ const items = [
 	},
 }
 
-export const SlotPrepend: Story = {
+export const WithError: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
+		docs: {
+			description: {
+				story: '« Option 1 » est présélectionnée et déclenche une erreur bloquante au chargement.',
+			},
 		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SySelect
+    ref="selectRef"
+    v-model="value"
+    :items="items"
+    label="Option"
+    :customRules="[
+      {
+        type: 'custom',
+        options: {
+          validate: (v) => v !== '1',
+          message: 'Option 1 n\\'est pas autorisée, choisissez Option 2 ou 3.'
+        }
+      }
+    ]"
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { SySelect } from '@cnamts/synapse'
+const value = ref('1')
+const items = [
+  { text: 'Option 1', value: '1' },
+  { text: 'Option 2', value: '2' },
+  { text: 'Option 3', value: '3' },
+]
+
+const selectRef = ref(null)
+
+onMounted(() => {
+  selectRef.value?.validateOnSubmit()
+})
+</script>`,
+			},
+		],
+	},
+	args: {
+		'items': [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+			{ text: 'Option 3', value: '3' },
+		],
+		'label': 'Option',
+		'onUpdate:modelValue': fn(),
+	},
+	render: args => ({
+		components: { SySelect },
+		setup() {
+			const value = ref('1')
+			const selectRef = ref<{ validateOnSubmit: () => Promise<boolean> } | null>(null)
+
+			onMounted(() => {
+				selectRef.value?.validateOnSubmit()
+			})
+
+			return { args, value, selectRef }
+		},
+		template: `
+			<div class="pa-4">
+				<SySelect
+					ref="selectRef"
+					v-model="value"
+					v-bind="args"
+					:customRules="[
+						{
+							type: 'custom',
+							options: {
+								validate: (v) => v !== '1',
+								message: 'Option 1 n\\'est pas autorisée, choisissez Option 2 ou 3.'
+							}
+						}
+					]"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const WithWarning: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: '« Option 1 » est présélectionnée et déclenche un avertissement (non bloquant) au chargement.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SySelect
+    v-model="value"
+    :items="items"
+    label="Option"
+    :customWarningRules="[
+      {
+        type: 'custom',
+        options: {
+          validate: (v) => v !== '1',
+          message: 'Option 1 est dépréciée, préférez Option 2 ou 3.'
+        }
+      }
+    ]"
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SySelect } from '@cnamts/synapse'
+const value = ref(null)
+const items = [
+  { text: 'Option 1', value: '1' },
+  { text: 'Option 2', value: '2' },
+  { text: 'Option 3', value: '3' },
+]
+</script>`,
+			},
+		],
+	},
+	args: {
+		'items': [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+			{ text: 'Option 3', value: '3' },
+		],
+		'label': 'Option',
+		'onUpdate:modelValue': fn(),
+	},
+	render: args => ({
+		components: { SySelect },
+		setup() {
+			const value = ref('1')
+			const selectRef = ref<{ validateOnSubmit: () => Promise<boolean> } | null>(null)
+
+			onMounted(() => {
+				selectRef.value?.validateOnSubmit()
+			})
+
+			return { args, value, selectRef }
+		},
+		template: `
+			<div class="pa-4">
+				<SySelect
+					ref="selectRef"
+					v-model="value"
+					v-bind="args"
+					:customWarningRules="[
+						{
+							type: 'custom',
+							options: {
+								validate: (v) => v !== '1',
+								message: 'Option 1 est dépréciée, préférez Option 2 ou 3.'
+							}
+						}
+					]"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const WithSuccess: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'Une option est présélectionnée et déclenche la confirmation de succès au chargement.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SySelect
+    v-model="value"
+    :items="items"
+    label="Option"
+    show-success-messages
+    :customSuccessRules="[
+      {
+        type: 'custom',
+        options: {
+          validate: (v) => v !== null && v !== undefined,
+          message: 'Option sélectionnée avec succès.'
+        }
+      }
+    ]"
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SySelect } from '@cnamts/synapse'
+const value = ref(null)
+const items = [
+  { text: 'Option 1', value: '1' },
+  { text: 'Option 2', value: '2' },
+  { text: 'Option 3', value: '3' },
+]
+</script>`,
+			},
+		],
+	},
+	args: {
+		'items': [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+			{ text: 'Option 3', value: '3' },
+		],
+		'label': 'Option',
+		'showSuccessMessages': true,
+		'onUpdate:modelValue': fn(),
+	},
+	render: args => ({
+		components: { SySelect },
+		setup() {
+			const value = ref('1')
+			const selectRef = ref<{ validateOnSubmit: () => Promise<boolean> } | null>(null)
+
+			onMounted(() => {
+				selectRef.value?.validateOnSubmit()
+			})
+
+			return { args, value, selectRef }
+		},
+		template: `
+			<div class="pa-4">
+				<SySelect
+					ref="selectRef"
+					v-model="value"
+					v-bind="args"
+					:customSuccessRules="[
+						{
+							type: 'custom',
+							options: {
+								validate: (v) => v !== null && v !== undefined,
+								message: 'Option sélectionnée avec succès.'
+							}
+						}
+					]"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const SlotPrepend: Story = {
+	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
@@ -461,9 +726,6 @@ export const SlotPrepend: Story = {
 
 export const SlotAppend: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -561,9 +823,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 +865,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.',
@@ -678,7 +934,7 @@ const options = [
 		return {
 			components: { SySelect },
 			setup() {
-				const selectedOptions = ref([])
+				const selectedOptions = ref(null)
 
 				return { args, selectedOptions }
 			},
@@ -699,9 +955,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.',
@@ -758,7 +1011,7 @@ const options = [
 		return {
 			components: { SySelect },
 			setup() {
-				const selectedOptions = ref([])
+				const selectedOptions = ref(null)
 
 				return { args, selectedOptions }
 			},
@@ -774,89 +1027,8 @@ const options = [
 	},
 }
 
-export const withCustomError: Story = {
-	parameters: {
-		a11y: {
-			disable: false,
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<SySelect
-						v-model="value"
-						:items="items"
-						:error-messages="errorMessages"
-					/>
-					<VBtn @click="triggerError">
-						Trigger Error
-					</VBtn>
-				</template>
-				`,
-			},
-			{
-				name: 'Script',
-				code: `
-				<script setup lang="ts">
-					import { SySelect } from '@cnamts/synapse'
-					import { ref } from 'vue'
-					
-					const items =  [
-						{ text: 'Option 1', value: '1' },
-						{ text: 'Option 2', value: '2' },
-					],
-					
-					const errorMessages = ref([])
-					
-					const triggerError = () => {
-						errorMessages.value = ['This is a test error message']
-					}
-				</script>
-				`,
-			},
-		],
-	},
-	args: {
-		'items': [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-		],
-		'onUpdate:modelValue': fn(),
-	},
-	render: (args) => {
-		return {
-			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				const errorMessages = ref([])
-				const triggerError = () => {
-					// @ts-expect-error test error message
-					errorMessages.value = ['This is a test error message']
-				}
-				return { args, errorMessages, triggerError }
-			},
-			template: `
-				<div class="pa-4">
-					<SySelect
-						v-bind="args"
-						:error-messages="errorMessages"
-					/>
-				</div>
-				<div class="px-4">
-					<VBtn @click="triggerError">
-						Trigger Error
-					</VBtn>
-				</div>
-			`,
-		}
-	},
-}
-
 export const withCustomKey: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -890,17 +1062,26 @@ export const withCustomKey: Story = {
 			{ customKey: 'Choix 1', value: '1' },
 			{ customKey: 'Choix 2', value: '2' },
 		],
+		'customSuccessRules': [{
+			type: 'custom',
+			options: {
+				validate: (v: unknown) => v !== null && v !== undefined,
+				successMessage: 'Option sélectionnée avec succès.',
+			},
+		}],
 		'onUpdate:modelValue': fn(),
 	},
 	render: (args) => {
 		return {
 			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
-				return { args }
+				const value = ref(null)
+				return { args, value }
 			},
 			template: `
 				<div class="pa-4">
 					<SySelect
+						v-model="value"
 						v-bind="args"
 						text-key="customKey"
 					/>
@@ -935,9 +1116,6 @@ export const Info: Story = {
 
 export const FormValidation: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		docs: {
 			description: {
 				story: 'Exemple d\'utilisation du SySelect dans un formulaire.',
@@ -1049,3 +1227,104 @@ const onSubmit = (event) => {
 		}
 	},
 }
+
+export const VuetifyValidation: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'Exemple d\'utilisation de la validation native Vuetify via la prop `useVuetifyValidation`. Les règles sont définies au format Vuetify : des fonctions retournant `true` ou un message d\'erreur. Soumettez le formulaire pour déclencher la validation.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SyForm @submit="onSubmit">
+    <SySelect
+      v-model="value"
+      :items="items"
+      label="Option"
+      use-vuetify-validation
+      :show-success-messages="false"
+      :rules="[v => !!v || 'Ce champ est requis']"
+    />
+    <VBtn type="submit" color="primary" class="mt-4">
+      Soumettre
+    </VBtn>
+  </SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SySelect, SyForm } from '@cnamts/synapse'
+import { VBtn } from 'vuetify/components'
+
+const value = ref(null)
+const items = [
+  { text: 'Option 1', value: '1' },
+  { text: 'Option 2', value: '2' },
+  { text: 'Option 3', value: '3' },
+]
+
+function onSubmit(event: { isValid: boolean }) {
+  if (event.isValid) {
+    alert('Formulaire valide : ' + value.value)
+  } else {
+    alert('Formulaire invalide : veuillez choisir une option.')
+  }
+}
+</script>`,
+			},
+		],
+	},
+	args: {
+		'items': [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+			{ text: 'Option 3', value: '3' },
+		],
+		'label': 'Option',
+		'useVuetifyValidation': true,
+		'showSuccessMessages': false,
+		'onUpdate:modelValue': fn(),
+	},
+	render: args => ({
+		components: { SySelect, SyForm, VBtn },
+		setup() {
+			const value = ref(null)
+
+			function onSubmit(event: { isValid: boolean }) {
+				if (event.isValid) {
+					alert(`Formulaire valide : ${value.value}`)
+				}
+				else {
+					alert('Formulaire invalide : veuillez choisir une option.')
+				}
+			}
+
+			return { args, value, onSubmit }
+		},
+		template: `
+			<div class="pa-4">
+				<SyForm @submit="onSubmit">
+					<SySelect
+						v-model="value"
+						v-bind="args"
+						:rules="[v => !!v || 'Ce champ est requis']"
+					/>
+					<VBtn
+						type="submit"
+						color="primary"
+						class="mt-4"
+					>
+						Soumettre
+					</VBtn>
+				</SyForm>
+			</div>
+		`,
+	}),
+}