@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

package/src/components/PeriodField/PeriodField.stories.ts

@@ -58,7 +58,7 @@ const meta: Meta<typeof PeriodField> = {
 			control: 'boolean',
 			description: 'Icône à la fin du champ',
 		},
-		isDisabled: {
+		disabled: {
 			control: 'boolean',
 			description: 'Désactive le champ',
 		},
@@ -78,6 +78,14 @@ const meta: Meta<typeof PeriodField> = {
 			control: 'object',
 			description: 'Règles d\'avertissement',
 		},
+		disableErrorHandling: {
+			control: 'boolean',
+			description: 'Désactive la gestion des erreurs',
+		},
+		showSuccessMessages: {
+			control: 'boolean',
+			description: 'Affiche les messages de succès',
+		},
 	},
 } as Meta<typeof PeriodField>
 
@@ -118,25 +126,23 @@ export const Default: Story = {
 		required: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
-	render: (args) => {
-		return {
-			components: { PeriodField: PeriodField },
-			setup() {
-				const value = ref({ from: null, to: null })
-				return { args, value }
-			},
-			template: `
+	render: args => ({
+		components: { PeriodField: PeriodField },
+		setup() {
+			const value = ref({ from: null, to: null })
+			return { args, value }
+		},
+		template: `
               <div class="pa-4">
                 <PeriodField v-bind="args" v-model="value"/>
                 <p>Période sélectionnée : {{ value }}</p>
               </div>
             `,
-		}
-	},
+	}),
 }
 
 export const CustomPlaceholders: Story = {
@@ -176,25 +182,23 @@ export const CustomPlaceholders: Story = {
 		required: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
-	render: (args) => {
-		return {
-			components: { PeriodField: PeriodField },
-			setup() {
-				const value = ref({ from: null, to: null })
-				return { args, value }
-			},
-			template: `
+	render: args => ({
+		components: { PeriodField: PeriodField },
+		setup() {
+			const value = ref({ from: null, to: null })
+			return { args, value }
+		},
+		template: `
               <div class="pa-4">
                 <PeriodField v-bind="args" v-model="value"/>
                 <p>Période sélectionnée : {{ value }}</p>
               </div>
             `,
-		}
-	},
+	}),
 }
 
 export const Disabled: Story = {
@@ -206,7 +210,7 @@ export const Disabled: Story = {
 				<template>
 					<PeriodField 
 						v-model="selectedPeriod" 
-						is-disabled
+						disabled
 					/>
 				</template>
 				`,
@@ -232,24 +236,22 @@ export const Disabled: Story = {
 		required: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: true,
+		disabled: true,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
-	render: (args) => {
-		return {
-			components: { PeriodField: PeriodField },
-			setup() {
-				const value = ref({ from: null, to: null })
-				return { args, value }
-			},
-			template: `
+	render: args => ({
+		components: { PeriodField: PeriodField },
+		setup() {
+			const value = ref({ from: null, to: null })
+			return { args, value }
+		},
+		template: `
               <div class="pa-4">
                 <PeriodField v-bind="args" v-model="value"/>
               </div>
             `,
-		}
-	},
+	}),
 }
 
 export const Required: Story = {
@@ -288,25 +290,23 @@ export const Required: Story = {
 		required: true,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
-	render: (args) => {
-		return {
-			components: { PeriodField: PeriodField },
-			setup() {
-				const value = ref({ from: null, to: null })
-				return { args, value }
-			},
-			template: `
+	render: args => ({
+		components: { PeriodField: PeriodField },
+		setup() {
+			const value = ref({ from: null, to: null })
+			return { args, value }
+		},
+		template: `
               <div class="pa-4">
                 <PeriodField v-bind="args" v-model="value"/>
                 <p>Période sélectionnée : {{ value }}</p>
               </div>
             `,
-		}
-	},
+	}),
 }
 
 export const AppendIcon: Story = {
@@ -344,25 +344,23 @@ export const AppendIcon: Story = {
 		required: true,
 		displayIcon: true,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
-	render: (args) => {
-		return {
-			components: { PeriodField: PeriodField },
-			setup() {
-				const value = ref({ from: null, to: null })
-				return { args, value }
-			},
-			template: `
+	render: args => ({
+		components: { PeriodField: PeriodField },
+		setup() {
+			const value = ref({ from: null, to: null })
+			return { args, value }
+		},
+		template: `
               <div class="pa-4">
                 <PeriodField v-bind="args" v-model="value"/>
                 <p>Période sélectionnée : {{ value }}</p>
               </div>
             `,
-		}
-	},
+	}),
 }
 
 export const WithoutIcon: Story = {
@@ -401,25 +399,23 @@ export const WithoutIcon: Story = {
 		required: true,
 		displayIcon: false,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
-	render: (args) => {
-		return {
-			components: { PeriodField: PeriodField },
-			setup() {
-				const value = ref({ from: null, to: null })
-				return { args, value }
-			},
-			template: `
+	render: args => ({
+		components: { PeriodField: PeriodField },
+		setup() {
+			const value = ref({ from: null, to: null })
+			return { args, value }
+		},
+		template: `
               <div class="pa-4">
                 <PeriodField v-bind="args" v-model="value"/>
                 <p>Période sélectionnée : {{ value }}</p>
               </div>
             `,
-		}
-	},
+	}),
 }
 
 export const WithError: Story = {
@@ -460,28 +456,26 @@ export const WithError: Story = {
 		required: true,
 		displayIcon: false,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: '01/01/2100', to: '05/01/2100' },
 		customRules: [
 			{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd\'hui' } },
 		],
 	},
-	render: (args) => {
-		return {
-			components: { PeriodField: PeriodField },
-			setup() {
-				const value = ref({ from: '01/01/2100', to: '05/01/2100' })
-				return { args, value }
-			},
-			template: `
+	render: args => ({
+		components: { PeriodField: PeriodField },
+		setup() {
+			const value = ref({ from: '01/01/2100', to: '05/01/2100' })
+			return { args, value }
+		},
+		template: `
               <div class="pa-4">
                 <PeriodField v-bind="args" v-model="value"/>
                 <p>Période sélectionnée : {{ value }}</p>
               </div>
             `,
-		}
-	},
+	}),
 }
 
 export const WithWarning: Story = {
@@ -527,7 +521,7 @@ export const WithWarning: Story = {
 		required: true,
 		displayIcon: false,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: '20/12/2023', to: '21/12/2023' },
 		customWarningRules: [
@@ -540,21 +534,19 @@ export const WithWarning: Story = {
 			},
 		],
 	},
-	render: (args) => {
-		return {
-			components: { PeriodField: PeriodField },
-			setup() {
-				const value = ref({ from: '20/12/2023', to: '21/12/2023' })
-				return { args, value }
-			},
-			template: `
+	render: args => ({
+		components: { PeriodField: PeriodField },
+		setup() {
+			const value = ref({ from: '20/12/2023', to: '21/12/2023' })
+			return { args, value }
+		},
+		template: `
               <div class="pa-4">
                 <PeriodField v-bind="args" v-model="value"/>
                 <p>Période sélectionnée : {{ value }}</p>
               </div>
             `,
-		}
-	},
+	}),
 }
 
 export const WithSuccess: Story = {
@@ -594,7 +586,7 @@ export const WithSuccess: Story = {
 		dateFormatReturn: '',
 		displayIcon: false,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: '22/01/2024', to: '23/01/2024' },
 		customRules: [
@@ -607,21 +599,19 @@ export const WithSuccess: Story = {
 			},
 		],
 	},
-	render: (args) => {
-		return {
-			components: { PeriodField: PeriodField },
-			setup() {
-				const value = ref({ from: '22/01/2024', to: '23/01/2024' })
-				return { args, value }
-			},
-			template: `
+	render: args => ({
+		components: { PeriodField: PeriodField },
+		setup() {
+			const value = ref({ from: '22/01/2024', to: '23/01/2024' })
+			return { args, value }
+		},
+		template: `
               <div class="pa-4">
                 <PeriodField v-bind="args" v-model="value"/>
                 <p>Période sélectionnée : {{ value }}</p>
               </div>
             `,
-		}
-	},
+	}),
 }
 
 export const DifferentFormats: Story = {
@@ -679,22 +669,21 @@ export const DifferentFormats: Story = {
 		required: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: '12/10/2023', to: '15/10/2023' },
 	},
-	render: (args) => {
-		return {
-			components: { PeriodField: PeriodField },
-			setup() {
-				const value1 = ref({ from: '12/10/2023', to: '15/10/2023' })
-				const value2 = ref({ from: '10/12/2023', to: '10/15/2023' })
-				const value3 = ref({ from: '2023-10-12', to: '2023-10-15' })
-				const value4 = ref({ from: '12-10-23', to: '15-10-23' })
-				const value5 = ref({ from: '12.10.2023', to: '15.10.2023' })
-				return { args, value1, value2, value3, value4, value5 }
-			},
-			template: `
+	render: args => ({
+		components: { PeriodField: PeriodField },
+		setup() {
+			const value1 = ref({ from: '12/10/2023', to: '15/10/2023' })
+			const value2 = ref({ from: '10/12/2023', to: '10/15/2023' })
+			const value3 = ref({ from: '2023-10-12', to: '2023-10-15' })
+			const value4 = ref({ from: '12-10-23', to: '15-10-23' })
+			const value5 = ref({ from: '12.10.2023', to: '15.10.2023' })
+			return { args, value1, value2, value3, value4, value5 }
+		},
+		template: `
               <div class="pa-4">
                 <PeriodField v-bind="args" v-model="value1" format="DD/MM/YYYY" class="mb-4" />
                 <PeriodField v-bind="args" v-model="value2" format="MM/DD/YYYY" class="mb-4" />
@@ -703,8 +692,7 @@ export const DifferentFormats: Story = {
                 <PeriodField v-bind="args" v-model="value5" format="DD.MM.YYYY"/>
               </div>
             `,
-		}
-	},
+	}),
 }
 
 export const WithDateFormatReturn: Story = {
@@ -759,23 +747,22 @@ export const WithDateFormatReturn: Story = {
 		required: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
-	render: (args) => {
-		return {
-			components: { PeriodField: PeriodField },
-			setup() {
-				const value1 = ref({ from: '12/10/2023', to: '15/10/2023' })
-				const value2 = ref({ from: '12/10/2023', to: '15/10/2023' })
-				const value3 = ref({ from: '12/10/2023', to: '15/10/2023' })
-				const valueReturn1 = ref({ from: '12/10/2023', to: '15/10/2023' })
-				const valueReturn2 = ref({ from: '10/12/2023', to: '10/15/2023' })
-				const valueReturn3 = ref({ from: '2023/12/10', to: '2023/15/10' })
-				return { args, value1, value2, value3, valueReturn1, valueReturn2, valueReturn3 }
-			},
-			template: `
+	render: args => ({
+		components: { PeriodField: PeriodField },
+		setup() {
+			const value1 = ref({ from: '12/10/2023', to: '15/10/2023' })
+			const value2 = ref({ from: '12/10/2023', to: '15/10/2023' })
+			const value3 = ref({ from: '12/10/2023', to: '15/10/2023' })
+			const valueReturn1 = ref({ from: '12/10/2023', to: '15/10/2023' })
+			const valueReturn2 = ref({ from: '10/12/2023', to: '10/15/2023' })
+			const valueReturn3 = ref({ from: '2023/12/10', to: '2023/15/10' })
+			return { args, value1, value2, value3, valueReturn1, valueReturn2, valueReturn3 }
+		},
+		template: `
               <div class="pa-4">
                 <span>Période de retour : {{ valueReturn1 }}<br/><br/></span>
                 <PeriodField
@@ -802,6 +789,115 @@ export const WithDateFormatReturn: Story = {
                 />
               </div>
             `,
-		}
+	}),
+}
+
+export const ValidationBehaviors: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				code: `<template>
+	<div class="mb-8">
+		<h3 class="mb-4">Par défaut (avec validation)</h3>
+		<PeriodField
+			v-model="periodDefault"
+			required
+		/>
+	</div>
+
+	<div class="mb-8">
+		<h3 class="mb-4">Validation désactivée (disableErrorHandling=true)</h3>
+		<PeriodField
+			v-model="periodNoErrors"
+			required
+			:disable-error-handling="true"
+		/>
+	</div>
+
+	<div class="mb-8">
+		<h3 class="mb-4">Messages de succès désactivés (showSuccessMessages=false)</h3>
+		<PeriodField
+			v-model="periodNoSuccess"
+			required
+			:show-success-messages="false"
+		/>
+	</div>
+
+	<div class="mb-8">
+		<h3 class="mb-4">Validation et messages de succès désactivés</h3>
+		<PeriodField
+			v-model="periodNoValidation"
+			required
+			:disable-error-handling="true"
+			:show-success-messages="false"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import PeriodField from '../PeriodField.vue'
+
+const periodDefault = ref({ from: null, to: null })
+const periodNoErrors = ref({ from: null, to: null })
+const periodNoSuccess = ref({ from: null, to: null })
+const periodNoValidation = ref({ from: null, to: null })
+</script>`,
+			},
+		],
 	},
+	render: args => ({
+		components: { PeriodField },
+		setup() {
+			const periodDefault = ref({ from: null, to: null })
+			const periodNoErrors = ref({ from: null, to: null })
+			const periodNoSuccess = ref({ from: null, to: null })
+			const periodNoValidation = ref({ from: null, to: null })
+
+			return {
+				args,
+				periodDefault,
+				periodNoErrors,
+				periodNoSuccess,
+				periodNoValidation,
+			}
+		},
+		template: `
+			<div class="mb-8">
+				<h3 class="mb-4">Par défaut (avec validation)</h3>
+				<PeriodField
+					v-model="periodDefault"
+					required
+				/>
+			</div>
+
+			<div class="mb-8">
+				<h3 class="mb-4">Validation désactivée (disableErrorHandling=true)</h3>
+				<PeriodField
+					v-model="periodNoErrors"
+					required
+					:disable-error-handling="true"
+				/>
+			</div>
+
+			<div class="mb-8">
+				<h3 class="mb-4">Messages de succès désactivés (showSuccessMessages=false)</h3>
+				<PeriodField
+					v-model="periodNoSuccess"
+					required
+					:show-success-messages="false"
+				/>
+			</div>
+
+			<div class="mb-8">
+				<h3 class="mb-4">Validation et messages de succès désactivés</h3>
+				<PeriodField
+					v-model="periodNoValidation"
+					required
+					:disable-error-handling="true"
+					:show-success-messages="false"
+				/>
+			</div>
+		`,
+	}),
 }