@cnamts/synapse 1.0.26 → 1.0.27

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

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 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, onMounted } from 'vue'
+import { ref } from 'vue'
 import { fn } from '@storybook/test'
 import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
 
@@ -29,7 +28,7 @@ const meta: Meta<typeof SySelect> = {
 		},
 		allowHtml: {
 			control: 'boolean',
-			description: 'Permet d\'afficher du texte en HTML',
+			description: 'Permet d\'afficher le texte des options en HTML. À utiliser avec plainTextKey pour le filtrage en texte brut.',
 		},
 		valueKey: {
 			control: 'text',
@@ -37,7 +36,7 @@ const meta: Meta<typeof SySelect> = {
 		},
 		returnObject: {
 			control: 'boolean',
-			description: 'Retourne l\'objet complet sélectionné',
+			description: 'Retourne l\'objet complet sélectionné au lieu de la seule valeur de valueKey.',
 		},
 		clearable: {
 			control: 'boolean',
@@ -54,11 +53,12 @@ const meta: Meta<typeof SySelect> = {
 		variantStyle: {
 			control: 'select',
 			options: ['outlined', 'plain', 'underlined', 'filled', 'solo', 'solo-inverted', 'solo-filled'],
+			description: 'Style visuel du champ. Par défaut le composant utilise le style outlined.',
 		},
 		color: {
 			control: 'select',
 			options: ['primary', 'secondary', 'success', 'error', 'warning'],
-			description: 'Couleur du champ',
+			description: 'Couleur principale du champ (bordure et label au focus).',
 		},
 		density: {
 			control: 'select',
@@ -71,18 +71,18 @@ const meta: Meta<typeof SySelect> = {
 		},
 		helpText: {
 			control: 'text',
-			description: 'Texte d\'aide à la saisie',
+			description: 'Texte d\'aide affiché sous le champ. Remplace les messages de validation si aucun n\'est présent, sinon s\'affiche en dessous.',
 		},
 		prependTooltip: {
-			description: 'Si le texte du prepend tooltip est renseigné alors l\'icône du  tooltip s\'affiche',
+			description: 'Texte du tooltip affiché au survol de l\'icône prepend. Si renseigné, l\'icône tooltip est automatiquement affichée.',
 			control: 'text',
 		},
 		appendTooltip: {
-			description: 'Si le texte du append tooltip est renseigné alors l\'icône du  tooltip s\'affiche',
+			description: 'Texte du tooltip affiché au survol de l\'icône append. Si renseigné, l\'icône tooltip est automatiquement affichée.',
 			control: 'text',
 		},
 		tooltipLocation: {
-			description: 'Position des tooltips',
+			description: 'Position des tooltips des icônes prepend et append.',
 			control: 'select',
 			options: ['top', 'bottom', 'start', 'end'],
 			default: 'top',
@@ -393,273 +393,6 @@ const items = [
 	},
 }
 
-export const WithError: Story = {
-	parameters: {
-		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: [
@@ -1113,218 +846,3 @@ export const Info: Story = {
 	},
 	tags: ['!dev'],
 }
-
-export const FormValidation: Story = {
-	parameters: {
-		docs: {
-			description: {
-				story: 'Exemple d\'utilisation du SySelect dans un formulaire.',
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-<template>
-  <SyForm @submit="onSubmit">
-    <SySelect
-      v-model="formData.option"
-      :items="options"
-      label="Option"
-      required
-      display-asterisk
-      class="mb-4"
-    />
-    <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 formData = ref({
-  option: ''
-})
-
-const options = [
-  { text: 'Option 1', value: '1' },
-  { text: 'Option 2', value: '2' },
-  { text: 'Option 3', value: '3' },
-]
-
-const onSubmit = (event) => {
-  if (event.isValid) {
-    alert('Formulaire valide : ' + JSON.stringify(formData.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',
-		'required': true,
-		'displayAsterisk': true,
-		'onUpdate:modelValue': fn(),
-	},
-	render: (args) => {
-		return {
-			components: { SySelect, SyForm, VBtn },
-			setup() {
-				const formData = ref({
-					option: '',
-				})
-
-				const onSubmit = (event: { isValid: boolean }) => {
-					if (event.isValid) {
-						alert(`Formulaire valide : ${JSON.stringify(formData.value)}`)
-					}
-					else {
-						alert('Formulaire invalide : veuillez choisir une option.')
-					}
-				}
-
-				return { args, formData, onSubmit }
-			},
-			template: `
-				<div class="pa-4">
-					<SyForm @submit="onSubmit">
-						<SySelect
-							v-model="formData.option"
-							v-bind="args"
-							class="mb-4"
-						/>
-						<VBtn
-							type="submit"
-							color="primary"
-							class="mt-4"
-						>
-							Soumettre
-						</VBtn>
-					</SyForm>
-				</div>
-			`,
-		}
-	},
-}
-
-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>
-		`,
-	}),
-}