@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/LunarCalendar/LunarCalendar.stories.ts

@@ -1,10 +1,21 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
 import LunarCalendar from './LunarCalendar.vue'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
 
 const meta = {
 	title: 'Composants/Formulaires/LunarCalendar',
 	component: LunarCalendar,
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
+	parameters: {
+		layout: 'fullscreen',
+	},
 	argTypes: {
+		...getValidationDocumentation('date'),
 		modelValue: {
 			description: 'La valeur du calendrier lunaire au format DD/MM/YYYY',
 			control: { type: 'text' },
@@ -13,10 +24,6 @@ const meta = {
 				category: 'props',
 			},
 		},
-		successMessages: {
-			description: 'Messages de succès à afficher sous le champ',
-			control: { type: 'text' },
-		},
 		minYear: {
 			description: 'Année minimale autorisée',
 			control: { type: 'number' },
@@ -25,10 +32,6 @@ const meta = {
 			description: 'Année maximale autorisée',
 			control: { type: 'number' },
 		},
-		required: {
-			description: 'Indique si le champ est requis',
-			control: { type: 'boolean' },
-		},
 		placeholder: {
 			description: 'Texte affiché lorsque le champ est vide',
 			control: { type: 'text' },
@@ -45,10 +48,58 @@ const meta = {
 			description: 'Affiche une icône à la fin du champ',
 			control: { type: 'boolean' },
 		},
+		// Nouvelles props iso SyTextField
+		helpText: {
+			description: 'Texte d\'aide affiché sous le champ',
+			control: { type: 'text' },
+		},
+		noIcon: {
+			description: 'Désactive les icônes du champ',
+			control: { type: 'boolean' },
+		},
+		displayAsterisk: {
+			description: 'Affiche l\'astérisque pour les champs requis',
+			control: { type: 'boolean' },
+		},
+		variantStyle: {
+			description: 'Style visuel du champ',
+			control: { type: 'select' },
+			options: ['outlined', 'plain', 'underlined', 'filled', 'solo', 'solo-inverted', 'solo-filled'],
+		},
+		color: {
+			description: 'Couleur du champ',
+			control: { type: 'select' },
+			options: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
+		},
+		density: {
+			description: 'Densité du champ',
+			control: { type: 'select' },
+			options: ['default', 'comfortable', 'compact'],
+		},
+		loading: {
+			description: 'État de chargement du champ',
+			control: { type: 'boolean' },
+		},
+		hint: {
+			description: 'Indice affiché sous le champ',
+			control: { type: 'text' },
+		},
+		bgColor: {
+			description: 'Couleur de fond du champ',
+			control: { type: 'text' },
+		},
+		counter: {
+			description: 'Compteur de caractères',
+			control: { type: 'boolean' },
+		},
 	},
 	args: {
 		label: 'Date de naissance',
 		modelValue: '',
+		required: false,
+		readonly: false,
+		disabled: false,
+		isValidateOnBlur: true,
 	},
 } satisfies Meta<typeof LunarCalendar>
 
@@ -56,9 +107,50 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<LunarCalendar
+						label="Date de naissance"
+						v-model="dateValue"
+					/>
+				</template>
+
+				<script setup lang="ts">
+				import { ref } from 'vue'
+
+				const dateValue = ref('')
+				</script>
+				`,
+			},
+		],
+	},
 	args: {
 		modelValue: '',
 	},
+	render: (args) => {
+		return {
+			components: { LunarCalendar },
+			setup() {
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center">
+					<LunarCalendar v-bind="args" v-model="value" />
+				</div>
+			`,
+		}
+	},
+}
+
+export const Required: Story = {
 	parameters: {
 		sourceCode: [
 			{
@@ -68,6 +160,7 @@ export const Default: Story = {
 					<LunarCalendar
 						label="Date de naissance"
 						v-model="dateValue"
+						required
 					/>
 				</template>
 
@@ -80,14 +173,30 @@ export const Default: Story = {
 			},
 		],
 	},
-}
-
-export const WithYearConstraints: Story = {
 	args: {
-		modelValue: '16/08/1550',
-		minYear: 1400,
-		maxYear: 1500,
+		modelValue: '',
+		required: true,
+	},
+	render: (args) => {
+		return {
+			components: { LunarCalendar },
+			setup() {
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center">
+					<LunarCalendar v-bind="args" v-model="value" />
+				</div>
+			`,
+		}
 	},
+}
+
+export const WithClearable: Story = {
 	parameters: {
 		sourceCode: [
 			{
@@ -97,27 +206,45 @@ export const WithYearConstraints: Story = {
 					<LunarCalendar
 						label="Date de naissance"
 						v-model="dateValue"
-						:min-year="1400"
-						:max-year="1500"
+						placeholder="21/13/1442"
+						is-clearable
 					/>
 				</template>
 
 				<script setup lang="ts">
 				import { ref } from 'vue'
 
-				const dateValue = ref('16/08/1550')
+				const dateValue = ref('12/13/1564')
 				</script>
 				`,
 			},
 		],
 	},
-}
-
-export const WithMinYearOnly: Story = {
 	args: {
-		modelValue: '12/12/1445',
-		minYear: 1420,
+		modelValue: '12/13/1564',
+		placeholder: '21/13/1442',
+		isClearable: true,
 	},
+	render: (args) => {
+		return {
+			components: { LunarCalendar },
+			setup() {
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center">
+					<LunarCalendar v-bind="args" v-model="value" />
+				</div>
+			`,
+		}
+	},
+}
+
+export const HelpText: Story = {
 	parameters: {
 		sourceCode: [
 			{
@@ -127,26 +254,43 @@ export const WithMinYearOnly: Story = {
 					<LunarCalendar
 						label="Date de naissance"
 						v-model="dateValue"
-						:min-year="1420"
+						help-text="Format attendu : JJ/MM/AAAA"
 					/>
 				</template>
 
 				<script setup lang="ts">
 				import { ref } from 'vue'
 
-				const dateValue = ref('12/12/1445')
+				const dateValue = ref('')
 				</script>
 				`,
 			},
 		],
 	},
-}
-
-export const WithMaxYearOnly: Story = {
 	args: {
-		modelValue: '12/12/1445',
-		maxYear: 1450,
+		modelValue: '',
+		helpText: 'Format attendu : JJ/MM/AAAA',
 	},
+	render: (args) => {
+		return {
+			components: { LunarCalendar },
+			setup() {
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center">
+					<LunarCalendar v-bind="args" v-model="value" />
+				</div>
+			`,
+		}
+	},
+}
+
+export const WithLoading: Story = {
 	parameters: {
 		sourceCode: [
 			{
@@ -156,7 +300,7 @@ export const WithMaxYearOnly: Story = {
 					<LunarCalendar
 						label="Date de naissance"
 						v-model="dateValue"
-						:max-year="1450"
+						loading
 					/>
 				</template>
 
@@ -169,13 +313,30 @@ export const WithMaxYearOnly: Story = {
 			},
 		],
 	},
-}
-
-export const required: Story = {
 	args: {
-		modelValue: '',
-		required: true,
+		modelValue: '12/12/1445',
+		loading: true,
+	},
+	render: (args) => {
+		return {
+			components: { LunarCalendar },
+			setup() {
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center">
+					<LunarCalendar v-bind="args" v-model="value" />
+				</div>
+			`,
+		}
 	},
+}
+
+export const Disabled: Story = {
 	parameters: {
 		sourceCode: [
 			{
@@ -185,27 +346,43 @@ export const required: Story = {
 					<LunarCalendar
 						label="Date de naissance"
 						v-model="dateValue"
-						required
+						disabled
 					/>
 				</template>
 
 				<script setup lang="ts">
 				import { ref } from 'vue'
 
-				const dateValue = ref('')
+				const dateValue = ref('12/12/1445')
 				</script>
 				`,
 			},
 		],
 	},
-}
-
-export const WithClearable: Story = {
 	args: {
-		modelValue: '12/13/1564',
-		placeholder: '21/13/1442',
-		isClearable: true,
+		modelValue: '12/12/1445',
+		disabled: true,
+	},
+	render: (args) => {
+		return {
+			components: { LunarCalendar },
+			setup() {
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center">
+					<LunarCalendar v-bind="args" v-model="value" />
+				</div>
+			`,
+		}
 	},
+}
+
+export const Readonly: Story = {
 	parameters: {
 		sourceCode: [
 			{
@@ -215,18 +392,38 @@ export const WithClearable: Story = {
 					<LunarCalendar
 						label="Date de naissance"
 						v-model="dateValue"
-						:placeholder="'21/13/1442'"
-						:is-clearable="true"
+						readonly
 					/>
 				</template>
 
 				<script setup lang="ts">
 				import { ref } from 'vue'
 
-				const dateValue = ref('12/13/1564')
+				const dateValue = ref('12/12/1445')
 				</script>
 				`,
 			},
 		],
 	},
+	args: {
+		modelValue: '12/12/1445',
+		readonly: true,
+	},
+	render: (args) => {
+		return {
+			components: { LunarCalendar },
+			setup() {
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center">
+					<LunarCalendar v-bind="args" v-model="value" />
+				</div>
+			`,
+		}
+	},
 }

package/src/components/LunarCalendar/LunarCalendar.vue

@@ -2,56 +2,91 @@
 	import { vMaska } from 'maska/vue'
 	import { computed } from 'vue'
 	import SyTextField from '../Customs/SyTextField/SyTextField.vue'
+	import { validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
 	import { useLunarCalendarValidation } from './useLunarCalendarValidation'
+	import type { LunarCalendarProps } from './types'
 
 	const model = defineModel<string>()
 	const mask = '##/##/####'
 
-	const props = withDefaults(defineProps<{
-		label: string
-		successMessages?: string
-		required?: boolean
-		maxYear?: number
-		minYear?: number
-		placeholder?: string
-		isClearable?: boolean
-		displayPrependIcon?: boolean
-		displayAppendIcon?: boolean
-	}>(), {
-		successMessages: undefined,
-		required: false,
+	const props = withDefaults(defineProps<LunarCalendarProps & FieldValidationProps>(), {
+		label: '',
 		maxYear: undefined,
 		minYear: undefined,
 		placeholder: undefined,
 		isClearable: false,
 		displayAppendIcon: false,
 		displayPrependIcon: true,
+		// Nouvelles props avec defaults
+		helpText: '',
+		noIcon: false,
+		displayAsterisk: false,
+		prependTooltip: undefined,
+		appendTooltip: undefined,
+		tooltipLocation: 'top',
+		variantStyle: 'outlined',
+		color: 'primary',
+		density: 'default',
+		loading: false,
+		hint: undefined,
+		bgColor: 'white',
+		baseColor: undefined,
+		counter: false,
+		id: undefined,
+		name: undefined,
+		hideDetails: false,
+		autocomplete: 'off',
+		...validationPropsDefaults,
 	})
 
-	const validation = useLunarCalendarValidation(
-		computed(() => model.value),
-		computed(() => props.label),
-		computed(() => props.successMessages),
-		computed(() => props.required),
-		computed(() => props.minYear),
-		computed(() => props.maxYear),
-	)
+	const { focused, validate, errors, warnings, successes, hasError, hasWarning, hasSuccess, clearValidation } = useLunarCalendarValidation(computed(() => model.value), props)
+
+	defineExpose({
+		validateOnSubmit: validate,
+		clearValidation,
+	})
 
 </script>
 
 <template>
 	<SyTextField
+		:id="props.id"
 		v-model="model"
 		v-maska="mask"
 		:label="props.label"
-		:error-messages="validation.errors.value"
-		:show-success-messages="props.successMessages !== undefined"
-		:success-messages="validation.successes.value"
-		:has-success="validation.successes.value.length > 0"
+		:error-messages="errors"
+		:warning-messages="warnings"
+		:success-messages="successes"
+		:has-error="hasError"
+		:has-warning="hasWarning"
+		:has-success="hasSuccess"
+		:show-success-messages="props.showSuccessMessages"
 		:placeholder
 		:is-clearable
 		:append-icon="props.displayAppendIcon ? 'calendar' : undefined"
 		:prepend-icon="props.displayPrependIcon ? 'calendar' : undefined"
-		@blur="validation.validate()"
+		:help-text="props.helpText"
+		:no-icon="props.noIcon"
+		:display-asterisk="props.displayAsterisk"
+		:prepend-tooltip="props.prependTooltip"
+		:append-tooltip="props.appendTooltip"
+		:tooltip-location="props.tooltipLocation"
+		:variant-style="props.variantStyle"
+		:color="props.color"
+		:density="props.density"
+		:loading="props.loading"
+		:hint="props.hint"
+		:bg-color="props.bgColor"
+		:base-color="props.baseColor"
+		:counter="props.counter"
+		:name="props.name"
+		:autocomplete="props.autocomplete"
+		:disabled="props.disabled"
+		:readonly="props.readonly"
+		:required="props.required"
+		:hide-details="props.hideDetails"
+		:disable-error-handling="true"
+		@focus="focused = true"
+		@blur="focused = false"
 	/>
 </template>