@cnamts/synapse 1.0.1 → 1.0.2

package/src/components/PasswordField/PasswordField.vue

@@ -33,6 +33,7 @@
 		displayAsterisk?: boolean
 		isValidateOnBlur?: boolean
 		disableErrorHandling?: boolean
+		bgColor?: string
 	} & CustomizableOptions>(), {
 		modelValue: null,
 		variantStyle: 'outlined',
@@ -52,6 +53,7 @@
 		displayAsterisk: false,
 		isValidateOnBlur: true,
 		disableErrorHandling: false,
+		bgColor: 'white',
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -202,6 +204,7 @@
 		:readonly="props.readonly"
 		:disabled="props.disabled"
 		:placeholder="props.placeholder"
+		:bg-color="props.bgColor"
 		:type="showEyeIcon ? 'text' : 'password'"
 		:display-asterisk="props.displayAsterisk"
 		:rules="[...defaultRules, ...props.customRules]"

package/src/components/PeriodField/PeriodField.vue

@@ -349,6 +349,7 @@
 				:no-calendar="props.noCalendar"
 				:no-icon="props.noIcon"
 				:placeholder="props.placeholderFrom"
+				:label="props.placeholderFrom"
 				:required="props.disableErrorHandling ? false : props.required"
 				:show-week-number="props.showWeekNumber"
 				:show-success-messages="showSuccessMessagesActual"
@@ -376,6 +377,7 @@
 				:no-calendar="props.noCalendar"
 				:no-icon="props.noIcon"
 				:placeholder="props.placeholderTo"
+				:label="props.placeholderTo"
 				:required="props.disableErrorHandling ? false : props.required"
 				:show-week-number="props.showWeekNumber"
 				:show-success-messages="showSuccessMessagesActual"

package/src/components/PhoneField/PhoneField.stories.ts

@@ -93,7 +93,7 @@ export const Default: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},
@@ -177,7 +177,7 @@ export const Required: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},
@@ -218,7 +218,7 @@ export const RequiredWithAsterisk: Story = {
 		...Default.args,
 		required: true,
 		displayAsterisk: true,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	parameters: {
 		docs: {
@@ -342,7 +342,7 @@ export const CustomIndicatifs: Story = {
 		],
 		useCustomIndicatifsOnly: true,
 		isValidatedOnBlur: true,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},
@@ -427,7 +427,7 @@ export const NotValidatedOnBlur: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -510,7 +510,7 @@ export const DisplayFormatCode: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -593,7 +593,7 @@ export const DisplayFormatCodeAbbreviation: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -676,7 +676,7 @@ export const DisplayFormatCodeCountry: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -759,7 +759,7 @@ export const DisplayFormatCountry: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -842,7 +842,7 @@ export const DisplayFormatAbbreviation: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -940,7 +940,7 @@ export const DefaultDialCode: Story = {
 		],
 		useCustomIndicatifsOnly: true,
 		isValidatedOnBlur: true,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},
@@ -1025,7 +1025,7 @@ export const DefaultDialCodeStandard: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},
@@ -1121,7 +1121,7 @@ export const DisplayModels: Story = {
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
 		readonly: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -1211,7 +1211,7 @@ export const DisabledErrorHandling: Story = {
 		disableErrorHandling: true,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -1337,7 +1337,7 @@ export const FormValidation: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},

package/src/components/PhoneField/PhoneField.vue

@@ -38,7 +38,7 @@
 		isValidatedOnBlur: { type: Boolean, default: true },
 		displayAsterisk: { type: Boolean, default: false },
 		disableErrorHandling: { type: Boolean, default: false },
-		bgColor: { type: String, default: undefined },
+		bgColor: { type: String, default: 'white' },
 		readonly: { type: Boolean, default: false },
 		disabled: { type: Boolean, default: false },
 	})

package/src/components/RangeField/RangeField.stories.ts

@@ -53,6 +53,15 @@ const meta = {
 				},
 			},
 		},
+		'bgColor': {
+			control: 'color',
+			description: 'Couleur de fond du champ',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
 		'vuetifyOptions': {
 			control: 'object',
 			description: 'Personnalisation des composants Vuetify internes',

package/src/components/RangeField/RangeField.vue

@@ -11,10 +11,12 @@
 		min?: number
 		max?: number
 		step?: number
+		bgColor?: string
 	}>(), {
 		min: 0,
 		max: 100,
 		step: 1,
+		bgColor: 'white',
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -132,6 +134,7 @@
 				:aria-label="locales.minLabel"
 				inputmode="numeric"
 				color="primary"
+				:bg-color="bgColor"
 				:title="locales.minLabel"
 				@update:model-value="updateMin"
 				@update:focused="validateMin"
@@ -144,6 +147,7 @@
 				:aria-label="locales.maxLabel"
 				inputmode="numeric"
 				color="primary"
+				:bg-color="bgColor"
 				:title="locales.maxLabel"
 				@update:model-value="updateMax"
 				@update:focused="validateMax"

package/src/components/RangeField/tests/__snapshots__/RangeField.spec.ts.snap

@@ -117,10 +117,12 @@ exports[`RangeField > render correctly when the modelValue is not defined 1`] =
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light
@@ -263,10 +265,12 @@ exports[`RangeField > render correctly when the modelValue is not defined 1`] =
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light
@@ -516,10 +520,12 @@ exports[`RangeField > renders correctly 1`] = `
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light
@@ -662,10 +668,12 @@ exports[`RangeField > renders correctly 1`] = `
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light
@@ -915,10 +923,12 @@ exports[`RangeField > renders correctly with value NaN 1`] = `
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light
@@ -1061,10 +1071,12 @@ exports[`RangeField > renders correctly with value NaN 1`] = `
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light

package/src/components/SearchListField/SearchListField.vue

@@ -20,6 +20,10 @@
 			type: Boolean,
 			default: true,
 		},
+		bgColor: {
+			type: String,
+			default: 'white',
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -68,6 +72,7 @@
 			:variant="outlined ? 'outlined' : 'underlined'"
 			clearable
 			tabindex="0"
+			:bg-color="props.bgColor"
 		>
 			<template #prepend-inner>
 				<VIcon class="mr-1">

package/src/components/SyTextArea/SyTextArea.vue

@@ -18,6 +18,7 @@
 		variant?: VTextarea['variant']
 		color?: string
 		label: string
+		bgColor?: string
 	}>(), {
 		modelValue: '',
 		trim: false,
@@ -29,6 +30,7 @@
 		validateOn: 'eager input',
 		variant: 'outlined',
 		color: 'primary',
+		bgColor: 'white',
 	})
 
 	const emits = defineEmits<{
@@ -103,6 +105,7 @@
 		:model-value="internalValue"
 		:variant="variant"
 		:color="color"
+		:bg-color="props.bgColor"
 		:validate-on="validateOn"
 		:rules="[...props.rules, ...internalRules]"
 		:label="label"

package/src/components/SyTextArea/tests/SyTextArea.spec.ts

@@ -128,7 +128,6 @@ describe('SyTextArea', () => {
 		await textarea.trigger('blur')
 
 		const expectedValue = 'voici un text probablement trop long pour ce champ\nfdgssssssssssssssssssssssssssssssssssssssssssssss-\nsssssssssssssssssssssssssssssssssssssssssssssssss-\nsssssss top'
-		console.log('emmitted', wrapper.emitted('update:modelValue'))
 
 		expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([expectedValue])
 		expect(textarea.element.value).toBe(expectedValue)