@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

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

@@ -5,7 +5,7 @@ import { ref } from 'vue'
 import Alert from '../../Alert/Alert.vue'
 
 const meta = {
-	title: 'Components/CustomInputSelect',
+	title: 'Composants/Formulaires/CustomInputSelect',
 	component: CustomInputSelect,
 	parameters: {
 		layout: 'fullscreen',
@@ -15,6 +15,10 @@ const meta = {
 		selectedValue: { control: 'text' },
 		items: { control: 'object' },
 		errorMessages: { control: 'object' },
+		required: { control: 'boolean' },
+		textKey: { control: 'text' },
+		valueKey: { control: 'text' },
+		vuetifyOptions: { control: 'object' },
 	},
 } as Meta<typeof CustomInputSelect>
 
@@ -22,11 +26,47 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomInputSelect
+						v-model="value"
+						:items="items"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					
+					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' },
 		],
+		vuetifyOptions: {
+			menu: {
+				color: 'primary',
+			},
+			option: {
+				color: 'primary',
+			},
+		},
 	},
 	render: (args) => {
 		return {
@@ -38,6 +78,7 @@ export const Default: Story = {
 				<div class="d-flex flex-wrap align-center pa-4">
 					<CustomInputSelect
 						v-bind="args"
+						:vuetify-options="args.vuetifyOptions"
 					/>
 				</div>
 				<br/><br/><br/><br/>
@@ -47,6 +88,35 @@ export const Default: Story = {
 }
 
 export const Outlined: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomInputSelect
+						v-model="value"
+						:items="items"
+						outlined
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					
+					const items =  [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+				</script>
+				`,
+			},
+		],
+	},
 	args: {
 		items: [
 			{ text: 'Option 1', value: '1' },
@@ -71,7 +141,101 @@ export const Outlined: Story = {
 	},
 }
 
-export const withError: Story = {
+export const Required: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomInputSelect
+						v-model="value"
+						:items="items"
+						required
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					
+					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 {
+			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomInputSelect
+						v-bind="args"
+						:required="args.required"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const withCustomError: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomInputSelect
+						v-model="value"
+						:items="items"
+						:error-messages="errorMessages"
+					/>
+					<VBtn @click="triggerError">
+						Trigger Error
+					</VBtn>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					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' },
@@ -105,10 +269,40 @@ export const withError: Story = {
 }
 
 export const withCustomKey: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomInputSelect
+						v-model="value"
+						:items="items"
+						text-key="customKey"
+						outlined
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					
+					const items =  [
+						{ customKey: 'Choix 1', value: '1' },
+						{ customKey: 'Choix 2', value: '2' }
+					]
+				</script>
+				`,
+			},
+		],
+	},
 	args: {
 		items: [
-			{ customKey: 'Option 1', value: '1' },
-			{ customKey: 'Option 2', value: '2' },
+			{ customKey: 'Choix 1', value: '1' },
+			{ customKey: 'Choix 2', value: '2' },
 		],
 	},
 	render: (args) => {
@@ -130,6 +324,78 @@ export const withCustomKey: Story = {
 	},
 }
 
+export const withCustomStyles: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomInputSelect
+						v-model="value"
+						:items="items"
+						:vuetify-options="vuetifyOptions
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					
+					const items =  [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					]
+					
+					const vuetifyOptions = {
+						menu: {
+							color: 'secondary',
+						},
+						option: {
+							color: 'secondary',
+						},
+					}
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		items: [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+		vuetifyOptions: {
+			menu: {
+				color: 'secondary',
+			},
+			option: {
+				color: 'secondary',
+			},
+		},
+	},
+	render: (args) => {
+		return {
+			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomInputSelect
+						v-bind="args"
+						:items="args.items"
+						:vuetify-options="args.vuetifyOptions"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
 export const Info: Story = {
 	render: (args) => {
 		return {

package/src/components/Customs/CustomInputSelect/CustomInputSelect.vue

@@ -1,51 +1,39 @@
-<script setup lang="ts">
-	import { mdiMenuDown } from '@mdi/js'
-	import { ref, watch, computed, type PropType } from 'vue'
+<script lang="ts" setup>
+	import { mdiChevronDown } from '@mdi/js'
+	import { computed, onMounted, ref, watch } from 'vue'
 	import { VIcon, VList, VListItem, VListItemTitle } from 'vuetify/components'
 
-	const props = defineProps({
-		modelValue: {
-			type: [Object, String],
-			default: null,
-		},
-		items: {
-			type: Array,
-			default: () => [],
-		},
-		label: {
-			type: String,
-			default: 'Sélectionnez une option',
-		},
-		errorMessages: {
-			type: [String, Array] as PropType<string | readonly string[]>,
-			default: () => [],
-		},
-		required: {
-			type: Boolean,
-			default: false,
-		},
-		menuId: {
-			type: String,
-			default: 'custom-select-menu',
-		},
-		outlined: {
-			type: Boolean,
-			default: false,
-		},
-		textKey: {
-			type: String,
-			default: 'text',
-		},
-		valueKey: {
-			type: String,
-			default: 'value',
-		},
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import defaultOptions from './config'
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+		modelValue?: Record<string, unknown> | string | null
+		items?: Record<string, unknown>[] | string[]
+		textKey?: string
+		valueKey?: string
+		label?: string
+		outlined?: boolean
+		required?: boolean
+		errorMessages?: string | string[]
+		isHeaderToolbar?: boolean
+	}>(), {
+		modelValue: null,
+		items: () => [],
+		textKey: 'text',
+		valueKey: 'value',
+		label: 'Sélectionnez une option',
+		outlined: false,
+		required: false,
+		errorMessages: () => [],
+		isHeaderToolbar: false,
 	})
 
+	const options = useCustomizableOptions(defaultOptions, props)
+
 	const emit = defineEmits(['update:modelValue'])
 
 	const isOpen = ref(false)
-	const selectedItem = ref<Record<string, unknown > | string | null>(props.modelValue)
+	const selectedItem = ref<Record<string, unknown> | string | null>(props.modelValue)
 
 	const toggleMenu = () => {
 		isOpen.value = !isOpen.value
@@ -81,6 +69,24 @@
 		selectedItem.value = newValue
 	})
 
+	watch(() => props.errorMessages, (newValue) => {
+		localErrorMessages.value = newValue
+	})
+
+	const menu = ref<HTMLElement | null>(null)
+	const menuWidth = ref('')
+	onMounted(() => {
+		watch(
+			[() => isOpen.value, () => menu.value?.getBoundingClientRect().width],
+			([newValue, newWidth]) => {
+				if (newValue && newWidth) {
+					const totalWidth = newWidth + (props.isHeaderToolbar ? 32 : 0)
+					menuWidth.value = `${totalWidth}`
+				}
+			},
+		)
+	})
+
 	const buttonClass = computed(() => {
 		return props.outlined ? 'v-btn v-btn--density-default v-btn--size-default v-btn--variant-outlined' : 'text-color'
 	})
@@ -93,22 +99,36 @@
 			return item
 		})
 	})
+
+	const localErrorMessages = ref<string | string[]>(props.errorMessages as string | string[])
+	const checkForErrors = () => {
+		if (props.required && !selectedItem.value) {
+			localErrorMessages.value = ['Le champ est requis.']
+			return false
+		}
+		if (props.errorMessages.length > 0) {
+			localErrorMessages.value = props.errorMessages
+			return false
+		}
+		localErrorMessages.value = []
+		return true
+	}
 </script>
 
 <template>
 	<v-input
 		:id="inputId"
 		v-model="selectedItem"
+		:error-messages="localErrorMessages"
 		:label="props.label"
 		:title="props.label"
 		role="menu"
-		:error-messages="errorMessages"
-		:required="required"
+		@click="checkForErrors"
 	>
 		<div
 			ref="menu"
 			v-click-outside="closeList"
-			:class="['custom-select', buttonClass, 'primary']"
+			:class="['custom-select', buttonClass, 'text-'+options.menu.color]"
 			role="menu"
 			tabindex="0"
 			@click="toggleMenu"
@@ -116,24 +136,28 @@
 			@keydown.space.prevent="toggleMenu"
 		>
 			<span>{{ selectedItemText }}</span>
-			<VIcon> {{ mdiMenuDown }}</VIcon>
+			<VIcon> {{ mdiChevronDown }}</VIcon>
 		</div>
 		<VList
 			v-if="isOpen"
-			class="v-list"
-			:style="`max-width: ${$refs.menu ? $refs.menu.getBoundingClientRect().width : 0}px;`"
 			:aria-label="props.label"
+			:is-header-toolbar="props.isHeaderToolbar"
+			:style="`min-width:${menuWidth}px; ${props.outlined ? 'top: 36px;' : 'top: 30px;'}`"
 			:title="props.label"
+			class="v-list"
+			v-bind="options.list"
 			@keydown.esc.prevent="isOpen = false"
 		>
 			<VListItem
 				v-for="(item, index) in formattedItems"
 				:key="index"
 				:ref="'options-' + index"
-				role="option"
-				class="v-list-item"
 				:aria-selected="selectedItem === item"
+				:base-color="options.option.color"
 				:tabindex="index + 1"
+				class="v-list-item"
+				role="option"
+				v-bind="options.option"
 				@click="selectItem(item)"
 			>
 				<VListItemTitle>
@@ -144,7 +168,7 @@
 	</v-input>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @use '@/assets/tokens.scss';
 
 .v-input {
@@ -154,12 +178,11 @@
 
 .v-list {
   position: absolute;
-  top: 36px;
   width: 100%;
   z-index: 1;
   background-color: white;
   min-width: fit-content;
-  max-width: 150px;
+  max-width: 100px;
   padding: 0;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08);
   border-radius: 4px;
@@ -171,8 +194,12 @@
   background-color: rgba(0, 0, 0, 0.04);
 }
 
-.v-list-item[aria-selected='true'] {
+:deep(.v-list-item[aria-selected='true']) {
   background-color: rgba(0, 0, 0, 0.08);
+
+  .v-list-item-title {
+    font-weight: bold;
+  }
 }
 
 .v-btn {

package/src/components/Customs/CustomInputSelect/config.ts

@@ -0,0 +1,10 @@
+const defaultOptions = {
+	menu: {
+		color: 'primary',
+	},
+	option: {
+		color: 'primary',
+	},
+}
+
+export default defaultOptions

package/src/components/Customs/CustomSelect/CustomSelect.mdx

@@ -20,14 +20,14 @@ Le composant `CustomSelect` est utilisé pour proposer une alternative au `v-sel
 <Source dark code={`
 <script setup lang="ts">
 	import { ref } from 'vue'
-	import CustomSelect from '@/components/Customs/CustomSelect/CustomSelect.vue'
+	import CustomSelect from '@cnamts/synapse'
 
 	const selectedValue = ref(undefined)
 
-	const items = ref([
+	const items = [
 		{ text: 'Option 1', value: '1' },
 		{ text: 'Option 2', value: '2' },
-	])
+	]
 </script>
 
 <template>