@cnamts/synapse 0.0.4-alpha → 0.0.6-alpha

package/src/components/Customs/{CustomTextField/CustomTextField.stories.ts → SyTextField/SyTextField.stories.ts}

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import CustomTextField from '@/components/Customs/CustomTextField/CustomTextField.vue'
+import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 import { VIcon } from 'vuetify/components'
 import { ref } from 'vue'
 import { mdiAccountBox } from '@mdi/js'
 
 const meta = {
-	title: 'Composants/Formulaires/CustomTextField',
-	component: CustomTextField,
+	title: 'Composants/Formulaires/SyTextField',
+	component: SyTextField,
 	parameters: {
 		layout: 'fullscreen',
 		controls: { exclude: ['modelValue', 'appendInnerIconColor'] },
@@ -39,7 +39,7 @@ const meta = {
 			options: ['primary', 'secondary', 'success', 'error', 'warning'],
 		},
 	},
-} as Meta<typeof CustomTextField>
+} as Meta<typeof SyTextField>
 
 export default meta
 
@@ -51,7 +51,7 @@ export const Default: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField v-model="value" />
+					<SyTextField v-model="value" />
 				</template>
 				`,
 			},
@@ -59,7 +59,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -74,19 +74,130 @@ export const Default: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField v-bind="args" />
+					<SyTextField v-bind="args" />
 				</div>
 			`,
 		}
 	},
 }
 
+export const Required: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField 
+						v-model="value" 
+						required
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { SyTextField } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		showDivider: false,
+		variantStyle: 'outlined',
+		color: 'primary',
+		isClearable: true,
+		label: 'Label',
+		required: true,
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyTextField v-bind="args" />
+				</div>
+			`,
+		}
+	},
+}
+
+export const WithCustomError: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField 
+						v-model="value" 
+						:error-messages="errorMessages"
+					/>
+					<VBtn @click="triggerError">
+						Trigger Error
+					</VBtn>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { SyTextField } from '@cnamts/synapse'
+					
+					const errorMessages = ref([])
+					
+					const triggerError = () => {
+						errorMessages.value = ['This is a test error message']
+					}
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		showDivider: false,
+		variantStyle: 'outlined',
+		color: 'primary',
+		isClearable: true,
+		label: 'Label',
+		required: false,
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				const errorMessages = ref([])
+				const triggerError = () => {
+					// @ts-expect-error test error message
+					errorMessages.value = ['This is a test error message']
+				}
+				return { args, errorMessages, triggerError }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyTextField v-bind="args" :error-messages="errorMessages" />
+				</div>
+				<VBtn class="ml-8" @click="triggerError">
+					Trigger Error
+				</VBtn>
+			`,
+		}
+	},
+}
+
 export const SlotPrepend: Story = {
 	parameters: {
 		sourceCode: [
@@ -94,7 +205,7 @@ export const SlotPrepend: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField 
+					<SyTextField 
 						v-model="value" 
 						prepend-icon="info"
 					/>
@@ -105,7 +216,7 @@ export const SlotPrepend: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -121,13 +232,13 @@ export const SlotPrepend: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 						:label="args.label"
 						:prepend-icon="args.prependIcon"
@@ -145,7 +256,7 @@ export const SlotAppend: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField 
+					<SyTextField 
 						v-model="value" 
 						append-icon="success"
 					/>
@@ -156,7 +267,7 @@ export const SlotAppend: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -172,13 +283,13 @@ export const SlotAppend: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 						:append-icon="args.appendIcon"
 					/>
@@ -195,7 +306,7 @@ export const SlotPrependInner: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField 
+					<SyTextField 
 						v-model="value" 
 						prepend-inner-icon="info"
 					/>
@@ -206,7 +317,7 @@ export const SlotPrependInner: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -222,13 +333,13 @@ export const SlotPrependInner: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 						:prepend-inner-icon="args.prependInnerIcon"
 					/>
@@ -245,7 +356,7 @@ export const SlotPrependInnerDivider: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField 
+					<SyTextField 
 						v-model="value" 
 						prepend-inner-icon="info"
 						show-divider
@@ -257,7 +368,7 @@ export const SlotPrependInnerDivider: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -273,13 +384,13 @@ export const SlotPrependInnerDivider: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 						:prepend-inner-icon="args.prependInnerIcon"
 						:show-divider="args.showDivider"
@@ -297,7 +408,7 @@ export const SlotAppendInner: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField 
+					<SyTextField 
 						v-model="value" 
 						append-inner-icon="success"
 					/>
@@ -308,7 +419,7 @@ export const SlotAppendInner: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -324,13 +435,13 @@ export const SlotAppendInner: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 						:append-inner-icon="args.appendInnerIcon"
 					/>
@@ -347,13 +458,13 @@ export const SlotCustomIcon: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomTextField  v-model="value">
+					<SyTextField v-model="value">
 						<template #append-inner>
 							<VIcon>
 								{{ iconName }}
 							</VIcon>
 						</template>
-					</CustomTextField>
+					</SyTextField>
 				</template>
 				`,
 			},
@@ -361,7 +472,7 @@ export const SlotCustomIcon: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 					import { mdiAccountBox } from '@mdi/js'
 					
 					const iconName = mdiAccountBox
@@ -379,7 +490,7 @@ export const SlotCustomIcon: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomTextField, VIcon },
+			components: { SyTextField, VIcon },
 			setup() {
 				const iconName = ref(mdiAccountBox)
 
@@ -387,7 +498,7 @@ export const SlotCustomIcon: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomTextField
+					<SyTextField
 						v-bind="args"
 					>
 						<template #append-inner>
@@ -395,7 +506,7 @@ export const SlotCustomIcon: Story = {
 								{{ iconName }}
 							</VIcon>
 						</template>
-					</CustomTextField>
+					</SyTextField>
 				</div>
 			`,
 		}

package/src/components/Customs/{CustomTextField/CustomTextField.vue → SyTextField/SyTextField.vue}

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 	import { computed, ref } from 'vue'
 	import type { IconType, VariantStyle, ColorType } from './types'
 	import {
@@ -22,6 +22,8 @@
 			isClearable?: boolean
 			showDivider?: boolean
 			label?: string
+			required?: boolean
+			errorMessages?: string[]
 		}>(),
 		{
 			variantStyle: 'outlined', // Remplacez par la valeur par défaut souhaitée
@@ -37,6 +39,15 @@
 	}
 
 	const model = ref('')
+	const isBlurred = ref(false)
+
+	const hasError = computed(() => {
+		return (props.required && isBlurred.value && !model.value) || (props.errorMessages && props.errorMessages.length > 0)
+	})
+
+	const checkErrorOnBlur = () => {
+		isBlurred.value = true
+	}
 
 	const appendInnerIconColor = computed(() => {
 		return props.appendInnerIcon === 'error' || props.appendInnerIcon === 'success'
@@ -59,12 +70,15 @@
 <template>
 	<VTextField
 		v-model="model"
-		:variant="props.variantStyle"
-		:color="props.color"
-		:clearable="props.isClearable"
-		:clear-icon="ICONS.close"
 		:aria-label="props.label"
+		:clear-icon="ICONS.close"
+		:clearable="props.isClearable"
+		:color="props.color"
+		:error-messages="props.errorMessages"
 		:label="props.label"
+		:rules="props.required ? ['Le champ est requis.'] : []"
+		:variant="props.variantStyle"
+		@blur="checkErrorOnBlur"
 	>
 		<template #prepend>
 			<slot name="prepend">
@@ -91,20 +105,26 @@
 			</slot>
 			<VDivider
 				v-if="props.showDivider"
-				v-bind="dividerProps"
 				class="mt-4 pa-1"
+				v-bind="dividerProps"
 				vertical
 			/>
 		</template>
 		<template #append-inner>
 			<slot name="append-inner">
+				<VIcon v-if="hasError">
+					{{ mdiInformation }}
+				</VIcon>
 				<VIcon
 					v-if="props.appendInnerIcon"
-					:icon="ICONS[props.appendInnerIcon]"
 					:class="{ 'error-icon': props.appendInnerIcon === 'error' }"
 					:color="appendInnerIconColor"
+					:icon="ICONS[props.appendInnerIcon]"
 				/>
 			</slot>
 		</template>
+		<template #details>
+			<slot name="details" />
+		</template>
 	</VTextField>
 </template>

package/src/components/Customs/SyTextField/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/Customs/{CustomTextField/tests/CustomTextField.spec.ts → SyTextField/tests/SyTextField.spec.ts}

@@ -1,12 +1,12 @@
 import { mount } from '@vue/test-utils'
-import CustomTextField from '../CustomTextField.vue'
+import SyTextField from '../SyTextField.vue'
 import { expect, describe, it } from 'vitest'
 import { VIcon } from 'vuetify/components'
 import { vuetify } from '@tests/unit/setup'
 
-describe('CustomTextField', () => {
+describe('SyTextField', () => {
 	const factory = (props = {}, slots = {}) => {
-		return mount(CustomTextField, {
+		return mount(SyTextField, {
 			props,
 			slots,
 			global: {

package/src/components/Customs/{CustomTextField/tests/__snapshots__/CustomTextField.spec.ts.snap → SyTextField/tests/__snapshots__/SyTextField.spec.ts.snap}

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CustomTextField > matches snapshot 1`] = `
+exports[`SyTextField > matches snapshot 1`] = `
 "<div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
   <div class="v-input__prepend"><i class="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
     <!---->
@@ -27,17 +27,16 @@ exports[`CustomTextField > matches snapshot 1`] = `
         <hr class="v-divider v-divider--vertical v-theme--light text-primary mt-4 pa-1" style="height: 25px; border-right-width: 2px; --v-border-opacity: 1;" aria-orientation="vertical" role="separator">
       </div>
       <div class="v-field__field" data-no-activator="">
-        <!----><label class="v-label v-field-label" for="input-0">
-          <!---->
-          <!---->
-        </label>
+        <!---->
+        <!---->
         <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" class="v-field__input" value="">
         <!---->
       </div>
       <transition-stub name="expand-x-transition" appear="false" persisted="false" css="true">
         <div class="v-field__clearable" style="display: none;"><i class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Clear "></i></div>
       </transition-stub>
-      <div class="v-field__append-inner"><i class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error error-icon" aria-hidden="true"></i>
+      <div class="v-field__append-inner">
+        <!--v-if--><i class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error error-icon" aria-hidden="true"></i>
         <!---->
       </div>
       <div class="v-field__outline">

package/src/components/DataList/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />