@cnamts/synapse 0.0.6-alpha → 0.0.8-alpha

package/src/components/NotificationBar/NotificationBar.vue

@@ -203,8 +203,8 @@
 			<template #actions>
 				<div
 					class="d-flex ga-2"
-					style="width:100%"
-					:class="hasLongContent ? 'action-section-longText' : 'action-section-shortText'"
+					style="width: 100%;"
+					:class="hasLongContent ? 'action-section-long-text' : 'action-section-short-text'"
 				>
 					<slot name="action" />
 					<VBtn
@@ -228,67 +228,69 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .vd-notification-content {
-  display: flex;
-  align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 .vd-notification-bar :deep(.v-snack__wrapper) {
-  padding: 16px;
-  min-width: 0;
-  max-width: none;
+	padding: 16px;
+	min-width: 0;
+	max-width: none;
 }
 
 :deep(.v-snackbar__content) {
-  padding: tokens.$padding-4 !important;
+	padding: tokens.$padding-4 !important;
 }
+
 :deep(.v-snackbar__actions) {
-  margin-inline-end: 10px;
+	margin-inline-end: 10px;
 }
 
 .vd-notification-bar.v-snackbar--vertical :deep() {
-  .v-snackbar--vertical .v-snackbar__wrapper .v-snackbar__actions {
-    width: 100% !important;
-    align-self: auto;
-  }
-  .v-snack__wrapper {
-    align-items: stretch;
-    flex-direction: row;
-  }
-
-  .v-snack__action {
-    align-self: stretch;
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .v-snackbar__content {
-    margin: 0;
-    width: 100%;
-    display: flex;
-  }
-
-  .vd-notification-content {
-    flex-direction: column;
-    display: flex;
-  }
+	.v-snackbar--vertical .v-snackbar__wrapper .v-snackbar__actions {
+		width: 100% !important;
+		align-self: auto;
+	}
+
+	.v-snack__wrapper {
+		align-items: stretch;
+		flex-direction: row;
+	}
+
+	.v-snack__action {
+		align-self: stretch;
+		align-items: stretch;
+		flex-direction: column;
+	}
+
+	.v-snackbar__content {
+		margin: 0;
+		width: 100%;
+		display: flex;
+	}
+
+	.vd-notification-content {
+		flex-direction: column;
+		display: flex;
+	}
 }
 
 .long-text :deep(.v-snackbar__actions) {
-  width: 98% !important;
+	width: 98% !important;
 }
 
 .short-text :deep(.v-snackbar__actions) {
-  width: 48% !important;
+	width: 48% !important;
 }
 
-.action-section-longText {
-  justify-content: space-around;
+.action-section-long-text {
+	justify-content: space-around;
 }
 
-.action-section-shortText {
-  justify-content: end !important;
+.action-section-short-text {
+	justify-content: end !important;
 }
 </style>

package/src/components/PageContainer/PageContainer.stories.ts

@@ -11,12 +11,12 @@ const meta = {
 	},
 	argTypes: {
 		size: {
-			options: ['xl', 'l', 'm', 's'],
+			options: ['xl', 'lg', 'md', 'sm', 'xs'],
 			control: { type: 'select' },
-			default: 'xl',
+			default: undefined,
 		},
 		spacing: {
-			options: ['xs', 'sm', 'md', 'lg', 'xl'],
+			options: ['xl', 'lg', 'md', 'sm', 'xs'],
 			control: { type: 'select' },
 			default: undefined,
 		},
@@ -77,7 +77,7 @@ export const Size: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-	<PageContainer size="s">
+	<PageContainer size="sm">
 		Contenu de la page
 	</PageContainer>
 </template>
@@ -94,7 +94,7 @@ export const Size: Story = {
 	},
 	args: {
 		default: 'Contenu de la page',
-		size: 's',
+		size: 'sm',
 	},
 	render: (args) => {
 		return {

package/src/components/PageContainer/PageContainer.vue

@@ -3,11 +3,11 @@
 	import { useDisplay } from 'vuetify'
 
 	const props = withDefaults(defineProps<{
-		size?: 'xl' | 'l' | 'm' | 's'
-		spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+		size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+		spacing?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
 		color?: string
 	}>(), {
-		size: 'xl',
+		size: undefined,
 		spacing: undefined,
 		color: 'transparent',
 	})
@@ -38,7 +38,12 @@
 	})
 
 	const containerSize = computed(() => {
-		return sizeMapping[display.name.value] ?? sizeMapping[props.size ?? 'xl']
+		if (props.size) {
+			return sizeMapping[props.size]
+		}
+		else {
+			return sizeMapping[display.name.value] ?? sizeMapping['xl']
+		}
 	})
 
 	defineExpose({
@@ -60,9 +65,9 @@
 
 <style lang="scss" scoped>
 .vd-page-container {
-  flex: 1;
-  width: 100%;
-  max-width: 1712px;
-  margin: 0 auto;
+	flex: 1;
+	width: 100%;
+	max-width: 1712px;
+	margin: 0 auto;
 }
 </style>

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

@@ -44,7 +44,7 @@ describe('PageContainer', () => {
 	it('containerSize computed property', async () => {
 		const wrapper = mount(PageContainer, {
 			props: {
-				size: 'l',
+				size: 'md',
 			},
 			global: {
 				plugins: [vuetify],

package/src/components/PasswordField/PasswordField.mdx

@@ -0,0 +1,70 @@
+import {Canvas, Meta, Controls, Source} from '@storybook/blocks';
+import * as PasswordFieldStories from './PasswordField.stories';
+import PasswordField from './PasswordField.vue';
+
+<Meta title="Composants/Formulaires/PasswordField" component={PasswordField}/>
+
+# PasswordField
+
+Le composant `PasswordField` est utilisé pour afficher un champ de saisie de mot de passe et gérer sa validation.
+Il permet également d’afficher ou de masquer le contenu du champ à l’aide d’une icône.
+
+<Canvas story={{height: '150px'}} of={PasswordFieldStories.Default}/>
+
+# API
+
+<Controls of={PasswordFieldStories.Default}/>
+
+## Utilisation de base
+
+    <Source
+        dark
+        code={`
+<script setup lang="ts">
+    import { ref } from 'vue'
+    import { PasswordField } from '@cnamts/synapse'
+
+    const password = ref('')
+    const passwordFieldRef = ref() // Référence Vue pour accéder au composant enfant
+
+    function handleSubmit() {
+    // Appeler la méthode exposée validateOnSubmit via la référence
+    const isValid = passwordFieldRef.value?.validateOnSubmit()
+    if (!isValid) {
+    alert('Veuillez corriger les erreurs avant de soumettre.')
+} else {
+    alert('Formulaire soumis avec succès !')
+}
+}
+</script>
+
+    <template>
+      <form @submit.prevent="handleSubmit">
+        <PasswordField
+          ref="passwordFieldRef"
+          v-model="password"
+          outlined
+          :is-validate-on-blur="true"
+        />
+        <button type="submit">Soumettre</button>
+      </form>
+    </template>
+`}
+/>
+
+## Gestion de la validation
+
+### Validation par défaut
+
+- **required** : Si `true`, le champ est obligatoire et affiche une erreur si le champ est vide.
+- **isValidateOnBlur** : Si `true`, la validation se déclenche automatiquement lors du blur (perte de focus).
+
+### Règles de validation personnalisées (props `customRules`)
+
+Vous pouvez définir des règles de validation personnalisées sous forme de tableau d’objets.
+
+Pour savoir comment utiliser les règles personnalisées, veuillez consulter la section [Comment utiliser les rules](/docs/guide-du-dev-comment-utiliser-les-rules--docs).
+
+
+
+

package/src/components/PasswordField/PasswordField.stories.ts

@@ -0,0 +1,213 @@
+import type { StoryObj, Meta } from '@storybook/vue3'
+import PasswordField from './PasswordField.vue'
+
+const meta = {
+	title: 'Composants/Formulaires/PasswordField',
+	component: PasswordField,
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
+	parameters: {
+		layout: 'fullscreen',
+	},
+	argTypes: {
+		modelValue: {
+			description: 'La valeur du modèle pour le champ.',
+			control: 'text',
+			default: null,
+			table: {
+				type: {
+					summary: 'string | null',
+				},
+			},
+		},
+		outlined: {
+			description: 'Définit la variante du champ (outlined ou underlined).',
+			control: 'boolean',
+			default: true,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		required: {
+			description: 'Indique si le champ est requis.',
+			control: 'boolean',
+			default: false,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		isValidateOnBlur: {
+			description: 'Active ou non la validation lors du blur.',
+			control: 'boolean',
+			default: true,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		customRules: {
+			description: 'Règles de validation personnalisées.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'array',
+				},
+			},
+		},
+	},
+} satisfies Meta<typeof PasswordField>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/**
+ * Story par défaut
+ */
+export const Default: Story = {
+	args: {
+		modelValue: '',
+		outlined: true,
+		required: false,
+		isValidateOnBlur: true,
+		customRules: [],
+	},
+	render: (args) => {
+		return {
+			components: { PasswordField },
+			setup() {
+				return { args }
+			},
+			template: `
+                <PasswordField v-bind="args" v-model="args.modelValue"/>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <PasswordField
+    v-model="password"
+    :required="false"
+    :isValidateOnBlur="true"
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import PasswordField from '@cnamts/synapse'
+
+const password = ref('')
+</script>
+        `,
+			},
+		],
+	},
+}
+
+/**
+ * Story avec champ requis
+ */
+export const Required: Story = {
+	args: {
+		...Default.args,
+		required: true,
+	},
+	parameters: {
+		...Default.parameters,
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <PasswordField
+    v-model="password"
+    :required="true"
+    :isValidateOnBlur="true"
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import PasswordField  from '@cnamts/synapse'
+
+const password = ref('')
+</script>
+        `,
+			},
+		],
+	},
+}
+
+export const WithCustomRules: Story = {
+	args: {
+		...Default.args,
+		customRules: [
+			{
+				type: 'minLength',
+				options: {
+					length: 8,
+					message: 'Le mot de passe doit comporter au moins 8 caractères.',
+					successMessage: 'Le mot de passe est suffisamment long.',
+				},
+			},
+		],
+	},
+	parameters: {
+		...Default.parameters,
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <PasswordField
+    v-model="password"
+    :required="false"
+    :isValidateOnBlur="true"
+    :customRules="[
+      { 
+        type: 'minLength', 
+        options: { 
+          length: 8, 
+          message: 'Le mot de passe doit comporter au moins 8 caractères.', 
+          successMessage: 'Le mot de passe est suffisamment long.' 
+        } 
+      },
+    ]"
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import PasswordField  from '@cnamts/synapse'
+
+const password = ref('')
+</script>
+        `,
+			},
+		],
+	},
+}

package/src/components/PasswordField/PasswordField.vue

@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+	import { ref, computed, watch } from 'vue'
+	import { config } from './config'
+	import { locales } from './locales'
+	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
+	import { mdiEye, mdiEyeOff } from '@mdi/js'
+	// import deepMerge from 'deepmerge'
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+
+	type Rule = (value: string | null) => { error?: string, success?: string }
+
+	const props = withDefaults(defineProps<{
+		modelValue?: string | null
+		outlined?: boolean
+		required?: boolean
+		isValidateOnBlur?: boolean
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		customRules?: any
+	} & CustomizableOptions>(), {
+		modelValue: null,
+		outlined: true,
+		required: false,
+		isValidateOnBlur: true,
+		customRules: [],
+	})
+
+	const options = useCustomizableOptions(config, props)
+	const emit = defineEmits(['update:modelValue', 'submit'])
+
+	const eyeIcon = mdiEye
+	const eyeOffIcon = mdiEyeOff
+	const showEyeIcon = ref(false)
+
+	const btnLabel = computed(() => {
+		return showEyeIcon.value ? locales.hidePassword : locales.showPassword
+	})
+
+	const password = ref<string | null>(props.modelValue)
+	watch(
+		() => props.modelValue,
+		(newVal) => {
+			password.value = newVal
+		},
+	)
+
+	const { generateRules } = useFieldValidation()
+
+	const defaultRules = [
+		...(props.required
+			? [{
+				type: 'required',
+				options: { message: 'Le mot de passe est requis.', fieldIdentifier: 'password' },
+			}]
+			: []),
+	]
+
+	const rules = computed(() => {
+		const baseRules = (props.required ? defaultRules : [])
+		return props.customRules ? generateRules([...baseRules, ...props.customRules]) : generateRules(baseRules)
+	})
+
+	const errors = ref<string[]>([])
+	const successes = ref<string[]>([])
+
+	const isValidating = ref(false)
+
+	watch(() => password.value, () => {
+		validateFields()
+	}, { immediate: true })
+
+	watch(
+		() => props.isValidateOnBlur,
+		() => {
+			validateFields()
+		},
+		{ immediate: true },
+	)
+
+	watch(
+		() => props.required,
+		() => {
+			validateFields()
+		},
+		{ immediate: true },
+	)
+
+	function validateFieldSet(value: string | null, rules: Rule[]) {
+		rules.forEach((rule) => {
+			const { error, success } = rule(value)
+			if (error) errors.value.push(error)
+			if (success && success !== 'Le champ est valide.') successes.value.push(success)
+		})
+	}
+
+	function validateFields(onBlur = false): void {
+		errors.value = []
+		successes.value = []
+
+		const shouldValidate = onBlur || !props.isValidateOnBlur
+
+		if (!shouldValidate) return
+
+		validateFieldSet(password.value, rules.value)
+	}
+
+	function emitChangeEvent(value: string): void {
+		emit('update:modelValue', value)
+		validateFields()
+	}
+
+	function handleKeydown(event: KeyboardEvent): void {
+		if (event.key === 'Enter') {
+			emit('submit')
+		}
+	}
+
+	function validateOnSubmit() {
+		isValidating.value = true
+		validateFields(true)
+		return errors.value.length === 0
+	}
+
+	defineExpose({
+		validateOnSubmit,
+	})
+</script>
+
+<template>
+	<VTextField
+		v-model="password"
+		:error-messages="errors"
+		:messages="successes"
+		:type="showEyeIcon ? 'text' : 'password'"
+		:variant="outlined ? 'outlined' : 'underlined'"
+		class="vd-password"
+		color="primary"
+		title="password"
+		validate-on="blur lazy"
+		:class="{
+			'v-messages__message--success': successes.length > 0
+		}"
+		@blur="validateFields(true)"
+		@keydown="handleKeydown"
+		@update:model-value="emitChangeEvent"
+	>
+		<template #append-inner>
+			<VBtn
+				:aria-label="btnLabel"
+				class="mx-auto"
+				v-bind="options.btn"
+				@click="showEyeIcon = !showEyeIcon"
+			>
+				<VIcon v-bind="options.icon">
+					{{ showEyeIcon ? eyeIcon : eyeOffIcon }}
+				</VIcon>
+			</VBtn>
+		</template>
+	</VTextField>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.vd-password {
+	.v-btn--icon.v-btn--density-default {
+		width: var(--v-btn-height);
+		height: var(--v-btn-height);
+	}
+
+	:deep(.v-field.v-field--variant-underlined .v-field__append-inner) {
+		padding-top: 0;
+		padding-bottom: 0;
+		display: flex;
+		align-items: center;
+	}
+
+	:deep(.v-field.v-field--variant-underlined .v-field__input) {
+		padding-top: calc(var(--v-field-input-padding-top) - 15px);
+	}
+}
+
+.v-messages__message--success {
+	color: tokens.$colors-border-success !important;
+
+	.v-field--active & {
+		color: tokens.$colors-border-success !important;
+	}
+}
+</style>

package/src/components/PasswordField/config.ts

@@ -0,0 +1,11 @@
+import { cnamColorsTokens } from '@/designTokens/tokens/cnam/cnamColors'
+
+export const config = {
+	btn: {
+		variant: 'text',
+		icon: true,
+	},
+	icon: {
+		color: cnamColorsTokens.grey.lighten20,
+	},
+} as const

package/src/components/PasswordField/locales.ts

@@ -0,0 +1,4 @@
+export const locales = {
+	hidePassword: 'Masquer le mot de passe',
+	showPassword: 'Afficher le mot de passe',
+}