@cnamts/synapse 1.0.1 → 1.0.2

package/src/components/ToolbarContainer/ToolbarContainer.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+	import { onMounted, ref } from 'vue'
+
+	const toolbar = ref<HTMLDivElement>()
+
+	let tools: Array<HTMLElement>
+
+	onMounted(() => {
+		tools = Array.from(toolbar.value?.querySelectorAll<HTMLElement>('button:not([disabled]), a:not([disabled]), input:not([disabled])') || [])
+		tools?.forEach((el) => {
+			el.setAttribute('tabindex', '-1')
+		})
+	})
+
+	function selectNextElement(e: Event & { target: HTMLElement }) {
+		const currentIndex = tools.findIndex(tool => tool === e.target)
+
+		const nextIndex = currentIndex < tools.length - 1 ? currentIndex + 1 : 0
+
+		const nextElem = tools.at(nextIndex)
+
+		e.target.setAttribute('tabindex', '-1')
+		nextElem?.setAttribute('tabindex', '0')
+		nextElem?.focus()
+	}
+
+	function selectPrevElement(e: Event & { target: HTMLElement }) {
+		let currentIndex = tools.findIndex(tool => tool === e.target)
+
+		const prevIndex = currentIndex > 0 ? currentIndex - 1 : tools.length - 1
+
+		const nextElem = tools.at(prevIndex)
+
+		e.target.setAttribute('tabindex', '-1')
+		nextElem?.setAttribute('tabindex', '0')
+		nextElem?.focus()
+	}
+
+	function selectFirstElement() {
+		const firstElement = tools.at(0)
+		if (!firstElement) {
+			return
+		}
+		document.activeElement?.setAttribute('tabindex', '-1')
+		firstElement.setAttribute('tabindex', '0')
+		firstElement.focus()
+	}
+
+	function selectLastElement() {
+		const lastElement = tools.at(-1)
+		if (!lastElement) {
+			return
+		}
+		document.activeElement?.setAttribute('tabindex', '-1')
+		lastElement.setAttribute('tabindex', '0')
+		lastElement.focus()
+	}
+
+	let lastElementFocused: HTMLElement | undefined = undefined
+
+	function setupFocus() {
+		// Remove the ability to tab into the toolbar to be able to shift focus to previous focusable element
+		toolbar.value?.setAttribute('tabindex', '-1')
+
+		if (lastElementFocused) {
+			// If there is a last focused element, restore focus to it
+			lastElementFocused.setAttribute('tabindex', '0')
+			lastElementFocused.focus()
+		}
+		else {
+			selectFirstElement()
+		}
+	}
+
+	function saveFocus(e: FocusEvent) {
+		// Save the last focused element to restore focus later
+		if (e.target !== e.currentTarget) {
+			lastElementFocused = e.target as HTMLElement
+		}
+	}
+
+	function blurToolbar(e: FocusEvent) {
+		// When an item of the toolbar is blured it should not be focusable anymore
+		(e.target as HTMLElement)?.setAttribute('tabindex', '-1')
+
+		// When the toolbar loses focus, we need to set its focusable
+		if (toolbar.value?.contains(e.relatedTarget as HTMLElement)) {
+			return
+		}
+		toolbar.value?.setAttribute('tabindex', '0')
+	}
+</script>
+
+<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+<template>
+	<div
+		ref="toolbar"
+		role="toolbar"
+		tabindex="0"
+		class="sy-toolbar"
+		@keydown.left="selectPrevElement"
+		@keydown.right="selectNextElement"
+		@keydown.up="selectPrevElement"
+		@keydown.down="selectNextElement"
+		@keydown.home.prevent="selectFirstElement"
+		@keydown.end.prevent="selectLastElement"
+		@focus="setupFocus"
+		@focus.capture="saveFocus"
+		@blur.capture="blurToolbar"
+	>
+		<slot />
+	</div>
+</template>
+
+<style scoped>
+.sy-toolbar:has(:focus-visible) {
+	position: relative;
+}
+
+.sy-toolbar:has(:focus-visible)::after {
+	content: '';
+	display: block;
+	position: absolute;
+	inset: -6px;
+	border-radius: 5px;
+	border: 2px solid rgb(var(--v-theme-primary));
+}
+</style>

package/src/components/ToolbarContainer/tests/ToolbarContainer.spec.ts

@@ -0,0 +1,156 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Toolbar from '../ToolbarContainer.vue'
+import { VBtn } from 'vuetify/components'
+import { vuetify } from '@tests/unit/setup'
+import { defineComponent } from 'vue'
+
+describe('ToolbarContainer.vue', () => {
+	it('renders default slot content', () => {
+		const wrapper = mount(Toolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			slots: {
+				default: '<div class="toolbar-content">Toolbar Content</div>',
+			},
+		})
+
+		expect(wrapper.find('.toolbar-content').exists()).toBe(true)
+	})
+
+	it('applies custom classes', () => {
+		const wrapper = mount(Toolbar, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				class: 'custom-toolbar',
+			},
+		})
+
+		expect(wrapper.classes()).toContain('custom-toolbar')
+	})
+
+	it('set the focus to the first button', async () => {
+		const wrapper = mount(Toolbar, {
+			attachTo: document.body,
+			global: {
+				plugins: [vuetify],
+			},
+			slots: {
+				default: `
+				<div>
+					<VBtn>Action 1</VBtn>
+					<VBtn>Action 2</VBtn>
+				</div>
+				`,
+			},
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+		const firstButton = wrapper.find('button.v-btn')
+
+		await toolbar.trigger('focus')
+		expect(document.activeElement).toBe(firstButton.element)
+	})
+
+	it('focuses the button when the navigation key are pressed', async () => {
+		const wrapper = mount(Toolbar, {
+			attachTo: document.body,
+			global: {
+				plugins: [vuetify],
+			},
+			slots: {
+				default: `
+					<div>
+						<VBtn>Action 1</VBtn>
+						<VBtn>Action 2</VBtn>
+					</div>
+				`,
+			},
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+		const firstButton = wrapper.find('button.v-btn')
+		const secondButton = wrapper.findAll('button.v-btn')[1]
+
+		await toolbar.trigger('focus')
+		await firstButton.trigger('keydown', { key: 'ArrowRight' })
+		expect(document.activeElement).toBe(secondButton.element)
+		await secondButton.trigger('keydown', { key: 'ArrowLeft' })
+		expect(document.activeElement).toBe(firstButton.element)
+		await firstButton.trigger('keydown', { key: 'ArrowDown' })
+		expect(document.activeElement).toBe(secondButton.element)
+		await secondButton.trigger('keydown', { key: 'ArrowUp' })
+		expect(document.activeElement).toBe(firstButton.element)
+	})
+
+	it('focuses the first and last buttons when Home and End keys are pressed', async () => {
+		const wrapper = mount(Toolbar, {
+			attachTo: document.body,
+			global: {
+				plugins: [vuetify],
+			},
+			slots: {
+				default: `
+					<div>
+						<VBtn>Action 1</VBtn>
+						<VBtn>Action 2</VBtn>
+						<VBtn>Action 3</VBtn>
+						<VBtn>Action 4</VBtn>
+					</div>
+				`,
+			},
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+		const firstButton = wrapper.find('button.v-btn')
+		const lastButton = wrapper.findAll('button.v-btn')[3]
+
+		await toolbar.trigger('focus')
+		await firstButton.trigger('keydown', { key: 'End' })
+		expect(document.activeElement).toBe(lastButton.element)
+		await lastButton.trigger('keydown', { key: 'Home' })
+		expect(document.activeElement).toBe(firstButton.element)
+	})
+
+	it('keeps in memory the last focused button', async () => {
+		const TestComponent = defineComponent({
+			components: {
+				Toolbar,
+				VBtn,
+			},
+			template: `
+				<div>
+					<Toolbar>
+						<VBtn>Action 1</VBtn>
+						<VBtn>Action 2</VBtn>
+						<VBtn>Action 3</VBtn>
+					</Toolbar>
+					<VBtn>Action 4</VBtn>
+				</div>
+			`,
+		})
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+		const firstButton = wrapper.find('button.v-btn')
+		const secondButton = wrapper.findAll('button.v-btn')[1]
+		const lastButton = wrapper.findAll<HTMLElement>('button.v-btn')[3]
+
+		await toolbar.trigger('focus')
+		expect(document.activeElement).toBe(firstButton.element)
+		await firstButton.trigger('keydown', { key: 'ArrowRight' })
+		expect(document.activeElement).toBe(secondButton.element)
+		await lastButton.element.focus()
+		expect(document.activeElement).toBe(lastButton.element)
+		await toolbar.trigger('focus')
+		expect(document.activeElement).toBe(secondButton.element)
+	})
+})

package/src/components/UserMenuBtn/UserMenuBtn.stories.ts

@@ -111,6 +111,13 @@ const meta = {
 				},
 			},
 		},
+		'default': {
+			control: false,
+			description: 'Ecrase le contenu du menu utilisateur',
+			table: {
+				category: 'slots',
+			},
+		},
 		'onLogout': {
 			action: 'logout',
 			description: 'Événement déclenché lors de la déconnexion de l\'utilisateur',
@@ -594,3 +601,70 @@ export const LogoutEvent: Story = {
 		}
 	},
 }
+
+export const Slot: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<UserMenuBtn
+		v-model="selected"
+		:full-name="fullName"
+	>
+		<div class="ma-6 text-center">
+			<p class="text-h6">
+				Bienvenue, {{ fullName }}
+			</p>
+
+			<p class="mt-2">
+				La création de votre compte est en cours,<br> vos services seront accessibles dans les prochains jours.
+			</p>
+		</div>
+	</UserMenuBtn>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { ref } from 'vue'
+	import { UserMenuBtn } from '@cnamts/synapse'
+
+	const selected = ref(null)
+	const fullName = ref('John Doe')
+
+</script>`,
+			},
+		],
+	},
+	args: {
+		modelValue: null,
+		hideLogoutBtn: false,
+		hideUserIcon: false,
+		isMobileView: false,
+		vuetifyOptions: undefined,
+		fullName: 'John Doe',
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args">
+			<div class="ma-6 text-center">
+			<p class="text-h6">
+				Bienvenue, {{ args.fullName }}
+			</p>
+
+			<p class="mt-2">
+				La création de votre compte est en cours,<br> vos services seront accessibles dans les prochains jours.
+			</p>
+		</div>
+	</UserMenuBtn>
+</div>`,
+		}
+	},
+}

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -64,23 +64,25 @@
 			</VIcon>
 		</template>
 		<template #footer-list-item>
-			<VListItem
-				v-if="!hideLogoutBtn"
-				class="logout"
-				v-bind="options['logoutListItem']"
-				@click="$emit('logout')"
-			>
-				<div class="d-flex">
-					<VIcon
-						:icon="mdiLoginVariant"
-						class="mr-4"
-						v-bind="options['logoutIcon']"
-					/>
-					<VListItemTitle class="logout">
-						{{ props.logoutText }}
-					</VListItemTitle>
-				</div>
-			</VListItem>
+			<slot>
+				<VListItem
+					v-if="!hideLogoutBtn"
+					class="logout"
+					v-bind="options['logoutListItem']"
+					@click="$emit('logout')"
+				>
+					<div class="d-flex">
+						<VIcon
+							:icon="mdiLoginVariant"
+							class="mr-4"
+							v-bind="options['logoutIcon']"
+						/>
+						<VListItemTitle class="logout">
+							{{ props.logoutText }}
+						</VListItemTitle>
+					</div>
+				</VListItem>
+			</slot>
 		</template>
 	</SyBtnSelect>
 </template>

package/src/components/index.ts

@@ -1,9 +1,9 @@
 export { default as DatePicker } from '@/components/DatePicker/DatePicker/DatePicker.vue'
+export { useDateFormat } from '../composables/date/useDateFormatDayjs'
 export { useFieldValidation } from '../composables/rules/useFieldValidation'
 export type { RuleOptions } from '../composables/rules/useFieldValidation'
-export { useNotificationService } from '../services/NotificationService'
 export { useValidation } from '../composables/validation/useValidation'
-export { useDateFormat } from '../composables/date/useDateFormatDayjs'
+export { useNotificationService } from '../services/NotificationService'
 export { default as Accordion } from './Accordion/Accordion.vue'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
@@ -23,8 +23,8 @@ export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
 export { default as DataList } from './DataList/DataList.vue'
 export { default as DataListGroup } from './DataListGroup/DataListGroup.vue'
 export { default as DataListItem } from './DataListItem/DataListItem.vue'
-export { default as DialogBox } from './DialogBox/DialogBox.vue'
 export { default as DiacriticPicker } from './DiacriticPicker/DiacriticPicker.vue'
+export { default as DialogBox } from './DialogBox/DialogBox.vue'
 export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
 export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
 export { default as ExternalLinks } from './ExternalLinks/ExternalLinks.vue'
@@ -45,7 +45,6 @@ export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBt
 export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
 export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavigationBar.vue'
 export { default as HeaderToolbar } from './HeaderToolbar/HeaderToolbar.vue'
-export { indicatifs } from './PhoneField/indicatifs'
 export { default as LangBtn } from './LangBtn/LangBtn.vue'
 export { default as Logo } from './Logo/Logo.vue'
 export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'
@@ -59,6 +58,7 @@ export { default as PageContainer } from './PageContainer/PageContainer.vue'
 export { default as PaginatedTable } from './PaginatedTable/PaginatedTable.vue'
 export { default as PasswordField } from './PasswordField/PasswordField.vue'
 export { default as PeriodField } from './PeriodField/PeriodField.vue'
+export { indicatifs } from './PhoneField/indicatifs'
 export { default as PhoneField } from './PhoneField/PhoneField.vue'
 export { default as RangeField } from './RangeField/RangeField.vue'
 export { default as RatingPicker } from './RatingPicker/RatingPicker.vue'
@@ -68,9 +68,11 @@ export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
 export { default as SyAlert } from './SyAlert/SyAlert.vue'
+export { default as SyCheckbox } from './Customs/SyCheckbox/SyCheckbox.vue'
 export { default as SyTextArea } from './SyTextArea/SyTextArea.vue'
+export { default as SyServerTable } from './Tables/SyServerTable/SyServerTable.vue'
+export { default as SyTable } from './Tables/SyTable/SyTable.vue'
 export { default as TableToolbar } from './TableToolbar/TableToolbar.vue'
+export { default as ToolbarContainer } from './ToolbarContainer/ToolbarContainer.vue'
 export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'
-export { default as SyTable } from './Tables/SyTable/SyTable.vue'
-export { default as SyServerTable } from './Tables/SyServerTable/SyServerTable.vue'