@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

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

@@ -0,0 +1,420 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import SyInputSelect from './SyInputSelect.vue'
+import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
+import { ref } from 'vue'
+import Alert from '../../Alert/Alert.vue'
+
+const meta = {
+	title: 'Composants/Formulaires/SyInputSelect',
+	component: SyInputSelect,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['selectedValue', 'isOpen', 'toggleMenu', 'closeList', 'selectItem', 'selectedItem', 'getItemText'] },
+	},
+	argTypes: {
+		selectedValue: { control: 'text' },
+		items: { control: 'object' },
+		errorMessages: { control: 'object' },
+		required: { control: 'boolean' },
+		textKey: { control: 'text' },
+		valueKey: { control: 'text' },
+		vuetifyOptions: { control: 'object' },
+	},
+} as Meta<typeof SyInputSelect>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyInputSelect
+						v-model="value"
+						:items="items"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyInputSelect from '@cnamts/SyInputSelect'
+					
+					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 {
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyInputSelect
+						v-bind="args"
+						:vuetify-options="args.vuetifyOptions"
+					/>
+				</div>
+				<br/><br/><br/><br/>
+			`,
+		}
+	},
+}
+
+export const Outlined: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyInputSelect
+						v-model="value"
+						:items="items"
+						outlined
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyInputSelect from '@cnamts/SyInputSelect'
+					
+					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' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyInputSelect
+						v-bind="args"
+						outlined
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const Required: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyInputSelect
+						v-model="value"
+						:items="items"
+						required
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyInputSelect from '@cnamts/SyInputSelect'
+					
+					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: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyInputSelect
+						v-bind="args"
+						:required="args.required"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const withCustomError: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyInputSelect
+						v-model="value"
+						:items="items"
+						:error-messages="errorMessages"
+					/>
+					<VBtn @click="triggerError">
+						Trigger Error
+					</VBtn>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyInputSelect from '@cnamts/SyInputSelect'
+					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' },
+			{ text: 'Option 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			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">
+					<SyInputSelect
+						v-bind="args"
+						:error-messages="errorMessages"
+					/>
+					<VBtn @click="triggerError">
+						Trigger Error
+					</VBtn>
+				</div>
+			`,
+		}
+	},
+}
+
+export const withCustomKey: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyInputSelect
+						v-model="value"
+						:items="items"
+						text-key="customKey"
+						outlined
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyInputSelect from '@cnamts/SyInputSelect'
+					
+					const items =  [
+						{ customKey: 'Choix 1', value: '1' },
+						{ customKey: 'Choix 2', value: '2' }
+					]
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		items: [
+			{ customKey: 'Choix 1', value: '1' },
+			{ customKey: 'Choix 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyInputSelect
+						v-bind="args"
+						outlined
+						text-key="customKey"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const withCustomStyles: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyInputSelect
+						v-model="value"
+						:items="items"
+						:vuetify-options="vuetifyOptions
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyInputSelect from '@cnamts/SyInputSelect'
+					
+					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: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyInputSelect
+						v-bind="args"
+						:items="args.items"
+						:vuetify-options="args.vuetifyOptions"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const Info: Story = {
+	render: (args) => {
+		return {
+			components: { Alert },
+			setup() {
+				return { args }
+			},
+			template: `
+				<Alert v-model="args.modelValue" :type="args.type" :variant="tonal" :closable="false">
+					<template #default>
+						<b>Format des items :</b>
+						<ul>
+							<li>- Si les items passés en props sont des objets, le composant les utilisera directement.</li>
+							<li>- Si les items sont un tableau de string, le composant les utilisera directement.</li>
+						</ul>
+					</template>
+				</Alert>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/Customs/{CustomInputSelect/CustomInputSelect.vue → SyInputSelect/SyInputSelect.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
@@ -55,7 +43,7 @@
 		isOpen.value = false
 	}
 
-	const inputId = ref(`custom-input-select-${Math.random().toString(36).substring(7)}`)
+	const inputId = ref(`sy-input-select-${Math.random().toString(36).substring(7)}`)
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 	const selectItem = (item: any) => {
@@ -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,44 @@
 			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
+	}
+
+	defineExpose({
+		isOpen,
+		closeList,
+		selectItem,
+		selectedItem,
+		getItemText,
+	})
 </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="['sy-input-select', buttonClass, 'text-'+options.menu.color]"
 			role="menu"
 			tabindex="0"
 			@click="toggleMenu"
@@ -116,24 +144,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 +176,7 @@
 	</v-input>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @use '@/assets/tokens.scss';
 
 .v-input {
@@ -154,12 +186,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 +202,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/SyInputSelect/config.ts

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