@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

package/src/components/Customs/CustomSelect/CustomSelect.stories.ts

@@ -5,7 +5,7 @@ import { ref } from 'vue'
 import Alert from '../../Alert/Alert.vue'
 
 const meta = {
-	title: 'Components/CustomSelect',
+	title: 'Composants/Formulaires/CustomSelect',
 	component: CustomSelect,
 	parameters: {
 		layout: 'fullscreen',
@@ -23,6 +23,34 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomSelect
+						v-model="value"
+						:items="items"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomSelect from '@cnamts/CustomSelect'
+					
+					const items =  [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+				</script>
+				`,
+			},
+		],
+	},
 	args: {
 		items: [
 			{ text: 'Option 1', value: '1' },
@@ -48,6 +76,35 @@ export const Default: Story = {
 }
 
 export const Outlined: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomSelect
+						v-model="value"
+						:items="items"
+						outlined
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomSelect from '@cnamts/CustomSelect'
+					
+					const items =  [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+				</script>
+				`,
+			},
+		],
+	},
 	args: {
 		items: [
 			{ text: 'Option 1', value: '1' },
@@ -73,11 +130,41 @@ export const Outlined: Story = {
 }
 
 export const Required: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomSelect
+						v-model="value"
+						:items="items"
+						required
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomSelect from '@cnamts/CustomSelect'
+					
+					const items =  [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+				</script>
+				`,
+			},
+		],
+	},
 	args: {
 		items: [
 			{ text: 'Option 1', value: '1' },
 			{ text: 'Option 2', value: '2' },
 		],
+		required: true,
 	},
 	render: (args) => {
 		return {
@@ -89,7 +176,7 @@ export const Required: Story = {
 				<div class="d-flex flex-wrap align-center pa-4">
 					<CustomSelect
 						v-bind="args"
-						required
+						:required="args.required"
 					/>
 				</div>
 			`,
@@ -98,6 +185,45 @@ export const Required: Story = {
 }
 
 export const withCustomError: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomSelect
+						v-model="value"
+						:items="items"
+						:error-messages="errorMessages"
+					/>
+					<VBtn @click="triggerError">
+						Trigger Error
+					</VBtn>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomSelect from '@cnamts/CustomSelect'
+					import { ref } from 'vue'
+					
+					const items =  [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+					
+					const errorMessages = ref([])
+					
+					const triggerError = () => {
+						errorMessages.value = ['This is a test error message']
+					}
+				</script>
+				`,
+			},
+		],
+	},
 	args: {
 		items: [
 			{ text: 'Option 1', value: '1' },
@@ -133,6 +259,36 @@ export const withCustomError: Story = {
 }
 
 export const withCustomKey: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+					<template>
+						<CustomSelect
+							v-model="value"
+							:items="items"
+							text-key="customKey"
+							outlined
+						/>
+					</template>
+					`,
+			},
+			{
+				name: 'Script',
+				code: `
+					<script setup lang="ts">
+						import CustomSelect from '@cnamts/CustomSelect'
+						
+						const items =  [
+							{ customKey: 'Choix 1', value: '1' },
+							{ customKey: 'Choix 2', value: '2' },
+						],
+					</script>
+					`,
+			},
+		],
+	},
 	args: {
 		items: [
 			{ customKey: 'Choix 1', value: '1' },

package/src/components/Customs/CustomSelect/CustomSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { mdiMenuDown } from '@mdi/js'
+	import { mdiInformation, mdiMenuDown } from '@mdi/js'
 	import { ref, watch, computed, type PropType } from 'vue'
 	import { VIcon, VTextField, VList, VListItem, VListItemTitle } from 'vuetify/components'
 
@@ -46,6 +46,7 @@
 
 	const isOpen = ref(false)
 	const selectedItem = ref<Record<string, unknown > | string | null>(props.modelValue)
+	const hasError = ref(false)
 
 	const toggleMenu = () => {
 		isOpen.value = !isOpen.value
@@ -91,10 +92,15 @@
 	watch(() => props.modelValue, (newValue) => {
 		selectedItem.value = newValue
 	})
+
+	watch(isOpen, (newValue) => {
+		hasError.value = !newValue && !selectedItem.value && isRequired.value
+	})
+
 </script>
 
 <template>
-	<div class="d-block w-100">
+	<div>
 		<VTextField
 			:id="inputId"
 			ref="input"
@@ -114,7 +120,17 @@
 			@keydown.enter.prevent="toggleMenu"
 			@keydown.space.prevent="toggleMenu"
 		>
-			<VIcon>{{ mdiMenuDown }}</VIcon>
+			<template #append-inner>
+				<VIcon
+					v-if="hasError"
+					class="mr-6"
+				>
+					{{ mdiInformation }}
+				</VIcon>
+				<VIcon>
+					{{ mdiMenuDown }}
+				</VIcon>
+			</template>
 		</VTextField>
 		<VList
 			v-if="isOpen"
@@ -146,6 +162,7 @@
 .custom-select {
   display: flex;
   flex-direction: column;
+  min-width: 225px;
 }
 
 .v-field {
@@ -153,7 +170,7 @@
 }
 .v-field--focused {
   .v-icon {
-    transform: rotateX(180deg) translateY(50%);
+    transform: rotateX(180deg);
   }
 }
 
@@ -181,8 +198,10 @@
 .v-icon {
   position: absolute;
   right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
   color: tokens.$grey-darken-20;
 }
+
+:deep(.v-field__input) {
+ color: tokens.$grey-darken-20
+}
 </style>

package/src/components/Customs/CustomTextField/CustomTextField.mdx

@@ -0,0 +1,44 @@
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
+import * as CustomTextFieldStories from "./CustomTextField.stories";
+
+<Meta of={CustomTextFieldStories} />
+
+# CustomTextField
+
+Le composant `CustomTextField` est utilisé pour proposer une alternative au `TextField` de Vuetify, conforme au style du design-system et qui  respecte les règles d'accessibilité RGAA.
+
+<Canvas of={CustomTextFieldStories.Default} />
+
+
+# API
+
+<Controls of={CustomTextFieldStories.Default} />
+
+
+# Exemple d'utilisation
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import CustomSelect from '@cnamts/synapse'
+
+	const model = ref('')
+
+</script>
+
+<template>
+	<main class="ma-12">
+		Text saisie: {{ model }}
+		<div class="d-flex flex-wrap align-center">
+        <CustomTextField
+				v-model="model"
+				label="Label"
+				color="primary"
+				is-clearable
+			/>
+		</div>
+	</main>
+</template>
+`}
+/>