@cnamts/synapse 1.0.8 → 1.0.9

package/src/components/Amelipro/AmeliproTextField/AmeliproTextField.stories.ts

@@ -14,7 +14,7 @@ const meta = {
 		'classes': { description: 'Classes à appliquer à la racine du composant' },
 		'clearable': { description: 'Affiche un bouton permettant de vider le champ' },
 		'counter': { description: 'Défini la valeur du compteur de caractères' },
-		'disabled': {	description: 'Désactive le champ de texte' },
+		'disabled': { description: 'Désactive le champ de texte' },
 		'fullWidthErrorMsg': { description: 'Donne au messages d’erreurs la largeur totale du composant au lieu de la limiter à la largeur du champ' },
 		'globalMaxWidth': { description: 'Gère la largeur maximale du composant, attend une valeur et une unité valide css (ex : 400px ou 25%)' },
 		'globalMinWidth': { description: 'Gère la largeur minimale du composant, attend une valeur et une unité valide css (ex : 400px ou 25%)' },
@@ -87,19 +87,15 @@ export const Default: Story = {
 		components: { AmeliproTextField },
 		setup() {
 			const model = ref()
-
-			// Optional: Keeps v-model in sync with storybook args
 			watch(() => args.modelValue, (newValue) => {
 				model.value = newValue
 			})
 			return { args, model }
 		},
-		template: `
-			<AmeliproTextField
-				v-bind="args"
-				v-model="model"
-			/>
-		`,
+		template: `<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>`,
 	}),
 }
 
@@ -117,7 +113,8 @@ export const Date: Story = {
 		sourceCode: [
 			{
 				name: 'Template',
-				code: `<template>
+				code: `<p>Exemple de champ texte de type date.</p>
+<template>
 	<AmeliproTextField
 		v-model="model"
 		aria-required
@@ -147,26 +144,17 @@ export const Date: Story = {
 		components: { AmeliproTextField },
 		setup() {
 			const model = ref()
-
-			// Optional: Keeps v-model in sync with storybook args
 			watch(() => args.modelValue, (newValue) => {
 				model.value = newValue
 			})
 			return { args, model }
 		},
 		template: `
-			<AmeliproTextField
-				:aria-required="args.ariaRequired"
-				class="mt-2"
-				:label="args.label"
-				:max-date="args.maxDate"
-				:min-date="args.minDate"
-				:type="args.type"
-				:unique-id="args.id"
-				v-bind="args"
-				v-model="model"
-			/>
-		`,
+<p>Exemple de champ texte de type date.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>`,
 	}),
 }
 
@@ -184,7 +172,8 @@ export const Number: Story = {
 		sourceCode: [
 			{
 				name: 'Template',
-				code: `<template>
+				code: `<p>Exemple de champ texte de type number.</p>
+<template>
 	<AmeliproTextField
 		v-model="model"
 		aria-required
@@ -214,25 +203,632 @@ export const Number: Story = {
 		components: { AmeliproTextField },
 		setup() {
 			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p>Exemple de champ texte de type number.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>`,
+	}),
+}
 
-			// Optional: Keeps v-model in sync with storybook args
+export const Clearable: Story = {
+	args: {
+		label: 'Champ effaçable',
+		modelValue: 'Texte à effacer',
+		uniqueId: 'text-clearable',
+		clearable: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>Le champ peut être effacé grâce à la prop <code>clearable</code>.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Champ effaçable"
+		unique-id="text-clearable"
+		clearable
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref('Texte à effacer')
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref('Texte à effacer')
+			watch(() => args.modelValue, (newValue) => {
+				model.value = String(newValue)
+			})
+			return { args, model }
+		},
+		template: `
+<p>Le champ peut être effacé grâce à la prop <code>clearable</code>.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>
+`,
+	}),
+}
+
+export const Counter: Story = {
+	args: {
+		label: 'Champ avec compteur',
+		modelValue: '',
+		uniqueId: 'text-counter',
+		counter: 20,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>Le champ affiche un compteur de caractères grâce à la prop <code>counter</code>.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Champ avec compteur"
+		unique-id="text-counter"
+		:counter="20"
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+<p>Le champ affiche un compteur de caractères grâce à la prop <code>counter</code>.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>
+`,
+	}),
+}
+
+export const CustomWidth: Story = {
+	args: {
+		label: 'Largeur personnalisée',
+		modelValue: '',
+		uniqueId: 'text-width',
+		globalWidth: '400px',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>La largeur du champ est personnalisée grâce à la prop <code>globalWidth</code>.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Largeur personnalisée"
+		unique-id="text-width"
+		global-width="400px"
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+<p>La largeur du champ est personnalisée grâce à la prop <code>globalWidth</code>.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>
+`,
+	}),
+}
+
+export const Disabled: Story = {
+	args: {
+		label: 'Champ désactivé',
+		modelValue: '',
+		uniqueId: 'text-disabled',
+		disabled: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>Le champ est désactivé grâce à la prop <code>disabled</code>.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Champ désactivé"
+		unique-id="text-disabled"
+		disabled
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+<p>Le champ est désactivé grâce à la prop <code>disabled</code>.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>`,
+	}),
+}
+
+export const FullWidthErrorMsg: Story = {
+	args: {
+		label: 'Message d’erreur pleine largeur',
+		modelValue: '',
+		uniqueId: 'text-fullwidth-error',
+		rules: [v => !!v || 'Affichage d’un long message d’erreur pour la démonstration'],
+		fullWidthErrorMsg: true,
+		inputMaxWidth: '100px',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>Le message d’erreur occupe toute la largeur grâce à la prop <code>fullWidthErrorMsg</code>.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Message d’erreur pleine largeur"
+		unique-id="text-fullwidth-error"
+		:rules="[v => !!v || 'Affichage d’un long message d’erreur pour la démonstration']"
+		:full-width-error-msg="true"
+		input-max-width="100px"
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+<p>Le message d’erreur occupe toute la largeur grâce à la prop <code>fullWidthErrorMsg</code>.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>
+`,
+	}),
+}
+
+export const HideErrorMessage: Story = {
+	args: {
+		label: 'Masquer le message d’erreur',
+		modelValue: '',
+		uniqueId: 'text-hide-error',
+		rules: [v => !!v || 'Erreur obligatoire'],
+		hideErrorMessage: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>Le message d’erreur est masqué grâce à la prop <code>hideErrorMessage</code>.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Masquer le message d’erreur"
+		unique-id="text-hide-error"
+		:rules="[v => !!v || 'Erreur obligatoire']"
+		:hide-error-message="true"
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+<p>Le message d’erreur est masqué grâce à la prop <code>hideErrorMessage</code>.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>
+`,
+	}),
+}
+
+export const Horizontal: Story = {
+	args: {
+		label: 'Champ horizontal',
+		modelValue: '',
+		uniqueId: 'text-horizontal',
+		horizontal: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>Le champ est affiché en mode horizontal grâce à la prop <code>horizontal</code>.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Champ horizontal"
+		unique-id="text-horizontal"
+		horizontal
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+<p>Le champ est affiché en mode horizontal grâce à la prop <code>horizontal</code>.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>
+`,
+	}),
+}
+
+export const LabelMaxWidth: Story = {
+	args: {
+		label: 'Un très long label dont la largeur est personnalisée',
+		modelValue: '',
+		uniqueId: 'text-label-maxwidth',
+		labelMaxWidth: '200px',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>La largeur du label est limitée grâce à la prop <code>labelMaxWidth</code>.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Un très long label dont la largeur est personnalisée"
+		unique-id="text-label-maxwidth"
+		label-max-width="200px"
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+<p>La largeur du label est limitée grâce à la prop <code>labelMaxWidth</code>.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>
+`,
+	}),
+}
+
+export const Placeholder: Story = {
+	args: {
+		label: 'Champ avec placeholder',
+		modelValue: '',
+		uniqueId: 'text-placeholder',
+		placeholder: 'Saisissez votre texte ici...',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>Le champ affiche un placeholder grâce à la prop <code>placeholder</code>.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Champ avec placeholder"
+		unique-id="text-placeholder"
+		placeholder="Saisissez votre texte ici..."
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+<p>Le champ affiche un placeholder grâce à la prop <code>placeholder</code>.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>
+`,
+	}),
+}
+
+export const Readonly: Story = {
+	args: {
+		label: 'Lecture seule',
+		modelValue: 'Valeur non modifiable',
+		uniqueId: 'text-readonly',
+		readonly: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>Le champ est en lecture seule grâce à la prop <code>readonly</code>.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Lecture seule"
+		unique-id="text-readonly"
+		readonly
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref('Valeur non modifiable')
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref('Valeur non modifiable')
+			watch(() => args.modelValue, (newValue) => {
+				model.value = String(newValue)
+			})
+			return { args, model }
+		},
+		template: `
+<p>Le champ est en lecture seule grâce à la prop <code>readonly</code>.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>
+`,
+	}),
+}
+
+export const Required: Story = {
+	args: {
+		label: 'Champ requis',
+		modelValue: '',
+		uniqueId: 'text-required',
+		ariaRequired: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>Le champ est requis grâce à la prop <code>ariaRequired</code>.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Champ requis"
+		unique-id="text-required"
+		aria-required
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+<p>Le champ est requis grâce à la prop <code>ariaRequired</code>.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>
+`,
+	}),
+}
+
+export const Validation: Story = {
+	args: {
+		label: 'Champ avec validation',
+		modelValue: '',
+		uniqueId: 'text-validation',
+		rules: [v => !!v || 'Ce champ est obligatoire'],
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<p>Le champ utilise la prop <code>rules</code> pour valider la saisie.</p>
+	<AmeliproTextField
+		v-model="model"
+		label="Champ avec validation"
+		unique-id="text-validation"
+		:rules="[v => !!v || 'Ce champ est obligatoire']"
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproTextField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref()
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTextField },
+		setup() {
+			const model = ref()
 			watch(() => args.modelValue, (newValue) => {
 				model.value = newValue
 			})
 			return { args, model }
 		},
 		template: `
-			<AmeliproTextField
-				v-bind="args"
-				:aria-required="args.ariaRequired"
-				class="mt-2"
-				:label="args.label"
-				:max-number="args.maxNumber"
-				:min-number="args.minNumber"
-				:type="args.type"
-				:uniqueId="args.id"
-				v-model="model"
-			/>
-		`,
+<p>Le champ utilise la prop <code>rules</code> pour valider la saisie.</p>
+<AmeliproTextField
+	v-bind="args"
+	v-model="model"
+/>
+`,
 	}),
 }