@cnamts/synapse 0.0.4-alpha → 0.0.5-alpha

package/src/components/Customs/SyBtnSelect/SyBtnSelect.vue

@@ -0,0 +1,246 @@
+<script lang="ts" setup>
+	import { ref, watch, computed, onMounted, useSlots } from 'vue'
+	import { useDisplay } from 'vuetify'
+
+	const props = defineProps({
+		modelValue: {
+			type: [Object, String, null],
+			default: null,
+		},
+		menuItems: {
+			type: Array,
+			default: () => [],
+		},
+		label: {
+			type: String,
+			default: 'Sélectionnez une option',
+		},
+		required: {
+			type: Boolean,
+			default: false,
+		},
+		menuId: {
+			type: String,
+			default: 'custom-btn-select-menu',
+		},
+		textKey: {
+			type: String,
+			default: 'text',
+		},
+		valueKey: {
+			type: String,
+			default: 'value',
+		},
+		primaryInfo: {
+			type: String,
+			default: 'Information principale',
+		},
+		secondaryInfo: {
+			type: String,
+			default: undefined,
+		},
+		hideIcon: {
+			type: Boolean,
+			default: false,
+		},
+		hideLogoutBtn: {
+			type: Boolean,
+			default: false,
+		},
+		isMobileView: {
+			type: Boolean,
+			default: false,
+		},
+		iconOnly: {
+			type: Boolean,
+			default: false,
+		},
+		options: {
+			type: Object,
+			default: () => ({ menu: {}, btn: {}, list: {} }),
+		},
+	})
+
+	const emit = defineEmits(['update:modelValue', 'logout'])
+	const slots = useSlots()
+	const { smAndDown } = useDisplay()
+
+	const isOpen = ref(false)
+	const selectedItem = ref<Record<string, unknown> | string | null>(props.modelValue as Record<string, unknown> | string | null)
+	const toggleMenu = () => {
+		isOpen.value = !isOpen.value
+	}
+
+	const buttonRef = ref<HTMLElement | null>(null)
+	const buttonWidth = ref('')
+
+	onMounted(() => {
+		if (buttonRef.value && !isMobileVersion.value) {
+			buttonWidth.value = `${buttonRef.value.getBoundingClientRect().width}px`
+		}
+	})
+
+	const selectItem = (item: unknown) => {
+		selectedItem.value = item as string | Record<string, unknown> | null
+		emit('update:modelValue', item)
+		isOpen.value = false
+	}
+
+	const getItemText = (item: unknown) => {
+		return (item as Record<string, unknown>)[props.textKey]
+	}
+
+	const formattedItems = computed(() => {
+		return props.menuItems.map((item) => {
+			if (typeof item === 'string') {
+				return { [props.textKey]: item, [props.valueKey]: item }
+			}
+			return item
+		})
+	})
+
+	const btnPadding = computed(() => {
+		if (props.hideIcon) {
+			return 'pa-1 pa-sm-2'
+		}
+		return isMobileVersion.value ? 'pa-0' : 'pa-1 pa-sm-3'
+	})
+
+	const hasListContent = computed(() => {
+		return Boolean(slots.default || !props.hideLogoutBtn)
+	})
+
+	const isMobileVersion = computed(() => {
+		return props.isMobileView || smAndDown.value || props.iconOnly
+	})
+
+	watch(() => props.modelValue, (newValue) => {
+		selectedItem.value = newValue
+	})
+
+	const generatedId = ref(`custom-btn-select-${Math.random().toString(36).substring(7)}`)
+
+	defineExpose({
+		isOpen,
+		formattedItems,
+		selectedItem,
+	})
+</script>
+
+<template>
+	<div
+		ref="buttonRef"
+		class="vd-user-menu-btn-ctn d-inline-block"
+	>
+		<VMenu
+			:id="generatedId"
+			:disabled="!hasListContent"
+			location="bottom end"
+			transition="fade-transition"
+			v-bind="props.options['menu']"
+			z-index="9999"
+		>
+			<template #activator="{ props: menuProps }">
+				<VBtn
+					:id="generatedId"
+					:class="btnPadding"
+					:height="iconOnly ? 'auto' : undefined"
+					:width="iconOnly ? 'auto' : undefined"
+					:icon="iconOnly"
+					:size="iconOnly ? 'x-large' : 'default'"
+					class="vd-user-menu-btn"
+					v-bind="{
+						...menuProps,
+						...props.options['btn'],
+					}"
+					@click="toggleMenu"
+				>
+					<div
+						:class="['text-'+props?.options['btn']?.color]"
+						class="d-flex align-center"
+					>
+						<slot name="prepend-icon" />
+						<span class="d-sr-only">{{ props.label }}</span>
+						<span
+							v-if="!isMobileVersion && !iconOnly"
+							class="d-flex flex-column align-end py-1 mr-1"
+						>
+							<span
+								:class="`text-${props?.options['btn']?.textColor}`"
+								class="font-weight-bold"
+							>{{ props.primaryInfo }}
+							</span>
+							<span
+								:class="`text-${props?.options['btn']?.textColor}`"
+								class="text-grey text-darken-2 font-weight-medium"
+							>{{ props.secondaryInfo }}
+							</span>
+						</span>
+						<span
+							v-if="isMobileVersion && !iconOnly"
+							:class="`text-${props?.options['btn']?.textColor}`"
+							class="font-weight-bold text-caption"
+						>{{ props.primaryInfo }}</span>
+						<slot name="append-icon" />
+					</div>
+				</VBtn>
+			</template>
+			<slot name="content">
+				<VList
+					v-if="hasListContent"
+					v-bind="props.options['list']"
+				>
+					<VListItem
+						v-for="(item, index) in formattedItems"
+						:key="index"
+						:class="`text-${props?.options['list']?.textColor}`"
+						v-bind="props.options['list']"
+						@click="selectItem(item)"
+					>
+						<VListItemTitle v-bind="props.options['list']">
+							{{ getItemText(item) }}
+						</VListItemTitle>
+					</VListItem>
+					<slot />
+					<slot name="footer-list-item" />
+				</VList>
+			</slot>
+		</VMenu>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens.scss';
+
+.vd-user-menu-btn-ctn {
+  position: relative;
+  z-index: 1;
+
+  .v-btn.v-btn--density-default {
+    height: auto !important;
+  }
+}
+
+.vd-user-menu-btn {
+  outline: none;
+  padding: 12px !important;
+
+  &:hover:before {
+    background: #000;
+    opacity: 0.05;
+  }
+
+  &:focus:before {
+    background: tokens.$blue-base;
+    opacity: 0.08;
+  }
+
+  &:focus {
+    background: rgba(tokens.$blue-base, 0.08) !important;
+  }
+}
+
+:deep(.vd-user-menu-btn:focus > .v-btn__overlay) {
+  opacity: 0 !important;
+}
+</style>

package/src/components/Customs/SyBtnSelect/tests/SyBtnSelect.spec.ts

@@ -0,0 +1,168 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SyBtnSelect from '../SyBtnSelect.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('SyBtnSelect', () => {
+	it('renders the component with default props', () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+			},
+		})
+
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.text()).toContain('John Doe')
+	})
+
+	it('shows secondaryInfo if provided', () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+				secondaryInfo: 'Additional Info',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Additional Info')
+	})
+
+	it('emits "update:modelValue" when an item is selected', async () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				menuItems: [
+					{ text: 'Option 1', value: 'option1' },
+					{ text: 'Option 2', value: 'option2' },
+				],
+				primaryInfo: 'John Doe',
+			},
+		})
+
+		const button = wrapper.find('.vd-user-menu-btn')
+		await button.trigger('click')
+
+		expect(wrapper.vm.isOpen).toBe(true)
+
+		const listItem = wrapper.findAllComponents({ name: 'VListItem' }).at(0)
+		expect(listItem).toBeTruthy()
+		await listItem?.trigger('click')
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')![0]).toEqual([
+			{ text: 'Option 1', value: 'option1' },
+		])
+	})
+
+	it('toggles the menu open and closed', async () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+			},
+		})
+
+		const button = wrapper.find('.vd-user-menu-btn')
+		expect(wrapper.vm.isOpen).toBe(false)
+
+		await button.trigger('click')
+		expect(wrapper.vm.isOpen).toBe(true)
+
+		await button.trigger('click')
+		expect(wrapper.vm.isOpen).toBe(false)
+	})
+
+	it('formats menu items correctly', () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+				menuItems: ['Option 1', 'Option 2'],
+			},
+		})
+
+		const formattedItems = wrapper.vm.formattedItems
+		expect(formattedItems).toEqual([
+			{ text: 'Option 1', value: 'Option 1' },
+			{ text: 'Option 2', value: 'Option 2' },
+		])
+	})
+
+	it('updates selectedItem when modelValue changes', async () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: 'initial-value',
+				primaryInfo: 'John Doe',
+			},
+		})
+
+		expect(wrapper.vm.selectedItem).toBe('initial-value')
+
+		await wrapper.setProps({ modelValue: 'new-value' })
+		expect(wrapper.vm.selectedItem).toBe('new-value')
+	})
+
+	it('renders the primaryInfo in a span when isMobileVersion and hideIcon are true', async () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+				isMobileView: true,
+				hideIcon: true,
+			},
+		})
+
+		const span = wrapper.find('span.font-weight-bold.text-caption')
+
+		expect(span.text()).toBe('John Doe')
+	})
+
+	it('does not render the span if isMobileVersion is false', () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+				isMobileView: false,
+				hideIcon: true,
+			},
+		})
+
+		const span = wrapper.find('span.font-weight-bold.text-sm-caption')
+		expect(span.exists()).toBe(false)
+	})
+
+	it('does not render the span if hideIcon is false', () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+				isMobileView: true,
+				hideIcon: false,
+			},
+		})
+
+		const span = wrapper.find('span.font-weight-bold.text-sm-caption')
+		expect(span.exists()).toBe(false)
+	})
+})

package/src/components/Customs/SyInputSelect/SyInputSelect.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
+import * as SyInputSelectStories from "./SyInputSelect.stories";
+
+<Meta of={SyInputSelectStories} />
+
+# SyInputSelect
+
+Le composant `SyInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles RGAA.
+
+<Canvas of={SyInputSelectStories.Default} />
+
+<Story of={SyInputSelectStories.Info} />
+
+# API
+
+<Controls of={SyInputSelectStories.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import SyInputSelect from '@cnamts/synapse'
+
+	const items = [
+        { text: 'Option 1', value: '1' },
+        { text: 'Option 2', value: '2' },
+    ],
+</script>
+
+<template>
+	<main>
+		<div class="mt-12 ml-12">
+			<SyInputSelect
+				v-model="value"
+				:items="items"
+			/>
+		</div>
+	</main>
+</template>
+`} />

package/src/components/Customs/{CustomInputSelect/CustomInputSelect.stories.ts → SyInputSelect/SyInputSelect.stories.ts}

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import CustomInputSelect from './CustomInputSelect.vue'
+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/CustomInputSelect',
-	component: CustomInputSelect,
+	title: 'Composants/Formulaires/SyInputSelect',
+	component: SyInputSelect,
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['selectedValue'] },
+		controls: { exclude: ['selectedValue', 'isOpen', 'toggleMenu', 'closeList', 'selectItem', 'selectedItem', 'getItemText'] },
 	},
 	argTypes: {
 		selectedValue: { control: 'text' },
@@ -20,7 +20,7 @@ const meta = {
 		valueKey: { control: 'text' },
 		vuetifyOptions: { control: 'object' },
 	},
-} as Meta<typeof CustomInputSelect>
+} as Meta<typeof SyInputSelect>
 
 export default meta
 
@@ -32,7 +32,7 @@ export const Default: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomInputSelect
+					<SyInputSelect
 						v-model="value"
 						:items="items"
 					/>
@@ -43,7 +43,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					import SyInputSelect from '@cnamts/SyInputSelect'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
@@ -70,13 +70,13 @@ export const Default: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
+					<SyInputSelect
 						v-bind="args"
 						:vuetify-options="args.vuetifyOptions"
 					/>
@@ -94,7 +94,7 @@ export const Outlined: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomInputSelect
+					<SyInputSelect
 						v-model="value"
 						:items="items"
 						outlined
@@ -106,7 +106,7 @@ export const Outlined: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					import SyInputSelect from '@cnamts/SyInputSelect'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
@@ -125,13 +125,13 @@ export const Outlined: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
+					<SyInputSelect
 						v-bind="args"
 						outlined
 					/>
@@ -148,7 +148,7 @@ export const Required: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomInputSelect
+					<SyInputSelect
 						v-model="value"
 						:items="items"
 						required
@@ -160,7 +160,7 @@ export const Required: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					import SyInputSelect from '@cnamts/SyInputSelect'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
@@ -180,13 +180,13 @@ export const Required: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
+					<SyInputSelect
 						v-bind="args"
 						:required="args.required"
 					/>
@@ -203,7 +203,7 @@ export const withCustomError: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomInputSelect
+					<SyInputSelect
 						v-model="value"
 						:items="items"
 						:error-messages="errorMessages"
@@ -218,7 +218,7 @@ export const withCustomError: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					import SyInputSelect from '@cnamts/SyInputSelect'
 					import { ref } from 'vue'
 					
 					const items =  [
@@ -244,7 +244,7 @@ export const withCustomError: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				const errorMessages = ref([])
 				const triggerError = () => {
@@ -255,7 +255,7 @@ export const withCustomError: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
+					<SyInputSelect
 						v-bind="args"
 						:error-messages="errorMessages"
 					/>
@@ -275,7 +275,7 @@ export const withCustomKey: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomInputSelect
+					<SyInputSelect
 						v-model="value"
 						:items="items"
 						text-key="customKey"
@@ -288,7 +288,7 @@ export const withCustomKey: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					import SyInputSelect from '@cnamts/SyInputSelect'
 					
 					const items =  [
 						{ customKey: 'Choix 1', value: '1' },
@@ -307,13 +307,13 @@ export const withCustomKey: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
+					<SyInputSelect
 						v-bind="args"
 						outlined
 						text-key="customKey"
@@ -331,7 +331,7 @@ export const withCustomStyles: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomInputSelect
+					<SyInputSelect
 						v-model="value"
 						:items="items"
 						:vuetify-options="vuetifyOptions
@@ -343,7 +343,7 @@ export const withCustomStyles: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					import SyInputSelect from '@cnamts/SyInputSelect'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
@@ -379,13 +379,13 @@ export const withCustomStyles: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
+					<SyInputSelect
 						v-bind="args"
 						:items="args.items"
 						:vuetify-options="args.vuetifyOptions"