@cnamts/synapse 0.0.2-alpha → 0.0.3-alpha

package/src/components/HeaderBar/HeaderComplexMenu/HeaderSubMenu/HeaderSubMenu.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+	import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
+	import { inject, readonly, ref, useId, type DeepReadonly, type Ref } from 'vue'
+	import { registerSubMenuKey } from '../conts'
+	import useHandleSubMenus from '../useHandleSubMenus'
+
+	const menuOpen = ref(false)
+	const submenuId = useId()
+	const btnId = `${submenuId}-btn`
+
+	const registerSubMenu = inject<((r: DeepReadonly<Ref<boolean>>, c: () => void) => void) | undefined>(registerSubMenuKey, undefined)
+	if (!registerSubMenu) throw new Error('The HeaderSubMenu component must be used inside a HeaderComplexMenu component')
+	registerSubMenu(menuOpen, () => {
+		menuOpen.value = false
+	})
+
+	const { haveOpenSubMenu } = useHandleSubMenus(readonly(menuOpen))
+</script>
+
+<template>
+	<div
+		class="sub-menu"
+		:class="{
+			'sub-menu--open': menuOpen,
+			'sub-menu--child-open': haveOpenSubMenu,
+		}"
+	>
+		<button
+			:id="btnId"
+			class="sub-menu-btn"
+			type="button"
+			:aria-expanded="menuOpen ? 'true' : 'false'"
+			:aria-controls="submenuId"
+			:title="menuOpen ? 'Close submenu' : 'Open submenu'"
+			@click="menuOpen = !menuOpen"
+		>
+			<slot name="title" />
+
+			<VIcon
+				size="36"
+				class="sub-menu-btn__icon"
+			>
+				{{ menuOpen ? mdiChevronLeft : mdiChevronRight }}
+			</VIcon>
+		</button>
+		<transition name="slide-fade">
+			<div
+				v-show="menuOpen"
+				:id="submenuId"
+				class="sub-menu-content-wrapper"
+				:aria-labelledby="btnId"
+			>
+				<div class="sub-menu-content">
+					<slot />
+				</div>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	@use "@/assets/tokens.scss" as *;
+	@use '../../consts' as *;
+
+	.sub-menu-btn {
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		width: 100%;
+		padding: 16px 50px 16px 20px;
+		text-align: left;
+		color: $primary-base;
+
+		&:hover {
+			background-color: $primary-base;
+			color: $neutral-white;
+			text-decoration: underline;
+
+			> :deep(*) {
+				color: $neutral-white !important;
+			}
+		}
+
+		&::first-letter {
+			text-transform: uppercase;
+		}
+	}
+
+	.sub-menu-btn__icon {
+		position: absolute;
+		right: 20px;
+	}
+
+	@media screen and (max-width: ($header-breakpoint - 1)) {
+		.sub-menu--open {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			overflow-y: auto;
+			background-color: $neutral-white;
+			padding-top: 40px;
+			z-index: 10;
+		}
+
+		// If a submenu is open, the parent menu should not scroll, the child menu should
+		.sub-menu--child-open {
+			overflow-y: clip;
+		}
+
+		.sub-menu--open > .sub-menu-btn {
+			padding: 0 16px 8px 40px;
+			border-bottom: 1px solid $menu-border-color;
+			color: #000;
+			background-color: transparent;
+		}
+
+		.sub-menu--open > .sub-menu-btn > :deep(.sub-menu-btn__icon) {
+			left: 10px;
+			right: auto;
+		}
+	}
+
+	@media screen and (min-width: $header-breakpoint) {
+		.sub-menu-btn {
+			position: relative;
+		}
+
+		.sub-menu--open > .sub-menu-btn {
+			background-color: $primary-base;
+			color: $neutral-white;
+			transition: color 0.15s linear, background-color 0.15s linear;
+		}
+
+		.sub-menu-content-wrapper {
+			position: absolute;
+			top: 0;
+			left: $menu-width;
+		}
+
+		.sub-menu-content {
+			width: $menu-width + 1px;
+			height: $menu-height;
+			background: #f9f9f9;
+			border-left: 1px solid $menu-border-color;
+			overflow-y: auto;
+			overflow-x: hidden;
+
+			> .sub-menu--open .sub-menu-content {
+				left: $menu-width * 2;
+
+				> .sub-menu--open .sub-menu-content {
+					left: $menu-width * 3;
+				}
+			}
+		}
+
+		/* Transitions */
+
+		.slide-fade-enter-active {
+			transition: opacity 0.17s ease-out, transform 0.17s ease-out;
+		}
+
+		.slide-fade-leave-active {
+			transition: opacity 0.08s ease-in, transform 0.08s ease-in;
+		}
+
+		.slide-fade-enter-from, .slide-fade-leave-to {
+			opacity: 0;
+			transform: translateX(-10px);
+		}
+
+		@media (prefers-reduced-motion) {
+			.slide-fade-enter-active, .slide-fade-leave-active {
+				transition: none;
+			}
+		}
+	}
+</style>

package/src/components/HeaderBar/HeaderComplexMenu/HeaderSubMenu/tests/HeaderSubMenu.spec.ts

@@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { vuetify } from '@tests/unit/setup'
+import { registerSubMenuKey } from '../../conts'
+import HeaderSubMenu from '../HeaderSubMenu.vue'
+
+const registerSubMenu = vi.fn()
+describe('HeaderSubMenu', () => {
+	afterEach(() => {
+		vi.resetAllMocks()
+	})
+
+	it('should render the component', async () => {
+		const wrapper = mount(HeaderSubMenu, {
+			slots: {
+				title: '<h2>Sub menu title</h2>',
+				default: '<ul><li><a>Test 1</a></li></ul>',
+			},
+			global: {
+				plugins: [vuetify],
+				provide: {
+					[registerSubMenuKey]: registerSubMenu,
+				},
+			},
+		})
+
+		const content = wrapper.find('.sub-menu-content-wrapper')
+
+		expect(wrapper.find('h2').text()).toBe('Sub menu title')
+		expect(wrapper.find('.sub-menu-content').element.children[0].textContent).toBe('Test 1')
+		expect(registerSubMenu.mock.calls.length).toBe(1)
+		const sharedStatus = registerSubMenu.mock.calls[0][0]
+		const sharedClose = registerSubMenu.mock.calls[0][1]
+
+		expect(sharedStatus.value).toBe(false)
+		expect(content.attributes('style')).toContain('display: none;')
+
+		const btn = wrapper.find('.sub-menu-btn')
+		await btn.trigger('click')
+
+		expect(sharedStatus.value).toBe(true)
+		expect(content.attributes('style')).toBeUndefined()
+
+		await sharedClose()
+		expect(sharedStatus.value).toBe(false)
+		expect(content.attributes('style')).toContain('display: none;')
+	})
+
+	it('throws an error if no register function is provided', async () => {
+		const mountWithoutInject = () => mount(HeaderSubMenu, {
+			slots: {
+				title: '<h2>Sub menu title</h2>',
+				default: '<ul><li><a>Test 1</a></li></ul>',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(mountWithoutInject).toThrowError('The HeaderSubMenu component must be used inside a HeaderComplexMenu component')
+	})
+})

package/src/components/HeaderBar/HeaderComplexMenu/conts.ts

@@ -0,0 +1 @@
+export const registerSubMenuKey = Symbol('registerSubMenu')

package/src/components/HeaderBar/HeaderComplexMenu/locals.ts

@@ -0,0 +1,4 @@
+export default {
+	mainMenu: 'Menu principal',
+	publicMenu: 'Menu public',
+}

package/src/components/HeaderBar/HeaderComplexMenu/tests/HeaderComplexMenu.spec.ts

@@ -0,0 +1,129 @@
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { afterEach } from 'node:test'
+import { describe, expect, it, vi } from 'vitest'
+import { registerHeaderMenuKey } from '../../consts'
+import HeaderComplexMenu from '../HeaderComplexMenu.vue'
+
+describe('HeaderComplexMenu', () => {
+	const BtnTestComponent = {
+		setup() {
+			const props = defineProps({ modelValue: Boolean })
+			return { open: props.modelValue }
+		},
+		template: `<button @click="$emit('update:modelValue', !open)">Test</button>`,
+	}
+
+	afterEach(() => {
+		vi.resetAllMocks()
+		document.body.innerHTML = ''
+	})
+
+	it('should render the component', async () => {
+		const wrapper = mount(HeaderComplexMenu, {
+			global: {
+				plugins: [vuetify],
+				provide: {
+					[registerHeaderMenuKey]: () => {},
+				},
+			},
+			slots: {
+				default: '<div>Default slot</div>',
+			},
+			stubs: {
+				HeaderMenuBtn: BtnTestComponent,
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+
+		const menu = wrapper.find('.overlay')
+		expect(menu.attributes('style')).toContain('display: none;')
+
+		const btn = wrapper.find('.header-menu-btn')
+		await btn.trigger('click')
+		expect(menu.attributes('style')).toBeUndefined()
+	})
+
+	it('should close the menu when clicking outside', async () => {
+		const wrapper = mount(HeaderComplexMenu, {
+			global: {
+				plugins: [vuetify],
+				provide: {
+					[registerHeaderMenuKey]: () => {},
+				},
+			},
+			stubs: {
+				HeaderMenuBtn: BtnTestComponent,
+			},
+			slots: {
+				default: '<div>Default slot</div>',
+			},
+			attachTo: document.body,
+		})
+
+		const overlay = wrapper.find('.overlay')
+		const btn = wrapper.find('.header-menu-btn')
+
+		await btn.trigger('click')
+		expect(overlay.attributes('style')).toBeUndefined()
+
+		await overlay.trigger('click')
+		expect(overlay.attributes('style')).toContain('display: none;')
+
+		wrapper.unmount()
+	})
+
+	it('should not close the menu when clicking inside', async () => {
+		const wrapper = mount(HeaderComplexMenu, {
+			global: {
+				plugins: [vuetify],
+				provide: {
+					[registerHeaderMenuKey]: () => {},
+				},
+			},
+			stubs: {
+				HeaderMenuBtn: BtnTestComponent,
+			},
+			slots: {
+				default: '<div>Default slot</div>',
+			},
+			attachTo: document.body,
+		})
+
+		const menu = wrapper.find('.overlay')
+		const btn = wrapper.find('button')
+		await btn.trigger('click')
+		expect(menu.attributes('style')).toBeUndefined()
+
+		await wrapper.find('.header-menu').trigger('click')
+		expect(menu.attributes('style')).toBeUndefined()
+
+		wrapper.unmount()
+	})
+
+	it('should listen to the button to open and close the menu', async () => {
+		const wrapper = mount(HeaderComplexMenu, {
+			global: {
+				plugins: [vuetify],
+				provide: {
+					[registerHeaderMenuKey]: () => {},
+				},
+			},
+			stubs: {
+				HeaderMenuBtn: BtnTestComponent,
+			},
+			slots: {
+				default: '<div>Default slot</div>',
+			},
+		})
+
+		const menu = wrapper.find('.overlay')
+		const btn = wrapper.find('button')
+		await btn.trigger('click')
+		expect(menu.attributes('style')).toBeUndefined()
+
+		await btn.trigger('click')
+		expect(menu.attributes('style')).toContain('display: none;')
+	})
+})

package/src/components/HeaderBar/HeaderComplexMenu/tests/__snapshots__/HeaderComplexMenu.spec.ts.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HeaderComplexMenu > should render the component 1`] = `
+"<div data-v-10d9bc74="" role="dialog" aria-modal="true" aria-label="Menu principal">
+  <div data-v-10d9bc74=""><button data-v-70557900="" data-v-10d9bc74="" class="header-menu-btn" style="background-color: #1867C0; color: #fff;" type="button" aria-label="Ouvrir le menu" title="Ouvrir le menu"><i data-v-70557900="" class="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z mdi v-icon notranslate v-theme--light" style="font-size: 48px; height: 48px; width: 48px;" aria-hidden="true"></i><span data-v-70557900="" class="header-menu-btn__label">Menu</span></button></div>
+  <transition-stub data-v-10d9bc74="" name="menu" appear="false" persisted="true" css="true">
+    <div data-v-10d9bc74="" class="overlay" style="display: none;">
+      <div data-v-10d9bc74="" role="menu" class="menu-wrapper" style="left: 0px; top: 0px;"><button data-v-70557900="" data-v-10d9bc74="" class="header-menu-btn" style="background-color: #1867C0; color: #fff;" type="button" aria-label="Ouvrir le menu" title="Ouvrir le menu"><i data-v-70557900="" class="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z mdi v-icon notranslate v-theme--light" style="font-size: 48px; height: 48px; width: 48px;" aria-hidden="true"></i><span data-v-70557900="" class="header-menu-btn__label">Menu</span></button>
+        <nav data-v-10d9bc74="" id="header-menu-wrapper" class="header-menu-wrapper" role="navigation" aria-label="Menu public">
+          <div data-v-10d9bc74="" class="header-menu">
+            <div>Default slot</div>
+          </div>
+        </nav>
+      </div>
+    </div>
+  </transition-stub>
+</div>"
+`;

package/src/components/HeaderBar/HeaderComplexMenu/tests/useHandleSubMenus.spec.ts

@@ -0,0 +1,158 @@
+/* eslint-disable vue/one-component-per-file */
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { computed, defineComponent, inject, readonly, ref, type DeepReadonly, type Ref } from 'vue'
+import { registerSubMenuKey } from '../conts'
+import useHandleSubMenus from '../useHandleSubMenus'
+
+describe('useHandleSubMenus', () => {
+	const TestParentComponent = defineComponent({
+		setup() {
+			const openStatus = ref(false)
+			const { haveOpenSubMenu } = useHandleSubMenus(readonly(openStatus))
+			const rootClasses = computed(() => ({
+				'parent-open': openStatus.value,
+				'has-open-submenu': haveOpenSubMenu.value,
+			}))
+
+			return { rootClasses, openStatus }
+		},
+		template: `
+			<button @click="openStatus = !openStatus" class="parent-menu-btn">Toggle</button>
+			<div :class="rootClasses"><slot/></div>
+		`,
+	})
+
+	const TestChildrenComponent = defineComponent({
+		setup() {
+			const openStatus = ref(false)
+			const registerSubMenu = inject<((r: DeepReadonly<Ref<boolean>>, c: () => void) => void) | undefined>(registerSubMenuKey)!
+
+			registerSubMenu(readonly(openStatus), () => {
+				openStatus.value = false
+			})
+
+			const rootClasses = computed(() => ({
+				'children-open': openStatus.value,
+			}))
+
+			return { rootClasses, openStatus }
+		},
+		template: `
+			<button @click="openStatus = !openStatus" class="child-menu-btn">Toggle</button>
+			<div :class="rootClasses"></div>
+		`,
+	})
+
+	it('if close the submenu if the parent menu is closed', async () => {
+		const wrapper = mount({
+			components: {
+				TestParentComponent,
+				TestChildrenComponent,
+			},
+			template: `
+				<TestParentComponent>
+					<TestChildrenComponent />
+				</TestParentComponent>
+			`,
+		}, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.parent-open').exists()).toBe(false)
+		expect(wrapper.find('.children-open').exists()).toBe(false)
+
+		const parentBtn = wrapper.find('.parent-menu-btn')
+		await parentBtn.trigger('click')
+		expect(wrapper.find('.parent-open').exists()).toBe(true)
+		expect(wrapper.find('.children-open').exists()).toBe(false)
+
+		const childBtn = wrapper.find('.child-menu-btn')
+		await childBtn.trigger('click')
+		expect(wrapper.find('.parent-open').exists()).toBe(true)
+		expect(wrapper.find('.children-open').exists()).toBe(true)
+
+		await parentBtn.trigger('click')
+		expect(wrapper.find('.parent-open').exists()).toBe(false)
+		expect(wrapper.find('.children-open').exists()).toBe(false)
+
+		await parentBtn.trigger('click')
+		expect(wrapper.find('.parent-open').exists()).toBe(true)
+		expect(wrapper.find('.children-open').exists()).toBe(false)
+	})
+
+	it('if close the submenu if another submenu is opened', async () => {
+		const wrapper = mount({
+			components: {
+				TestParentComponent,
+				TestChildrenComponent,
+			},
+			template: `
+				<TestParentComponent>
+					<TestChildrenComponent />
+					<TestChildrenComponent />
+				</TestParentComponent>
+			`,
+		}, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.parent-open').exists()).toBe(false)
+		expect(wrapper.findAll('.children-open').length).toBe(0)
+
+		const parentBtn = wrapper.find('.parent-menu-btn')
+		await parentBtn.trigger('click')
+		expect(wrapper.find('.parent-open').exists()).toBe(true)
+		expect(wrapper.findAll('.children-open').length).toBe(0)
+
+		const childBtns = wrapper.findAll('.child-menu-btn')
+		await childBtns[0].trigger('click')
+		expect(wrapper.find('.parent-open').exists()).toBe(true)
+		expect(wrapper.findAll('.children-open').length).toBe(1)
+
+		await childBtns[1].trigger('click')
+		expect(wrapper.find('.parent-open').exists()).toBe(true)
+		expect(wrapper.findAll('.children-open').length).toBe(1)
+	})
+
+	it('return haveOpenSubMenu and update it when the component have a submenu open', async () => {
+		const wrapper = mount({
+			components: {
+				TestParentComponent,
+				TestChildrenComponent,
+			},
+			template: `
+				<TestParentComponent>
+					<TestChildrenComponent />
+					<TestChildrenComponent />
+				</TestParentComponent>
+			`,
+		}, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const parentBtn = wrapper.find('.parent-menu-btn')
+		await parentBtn.trigger('click')
+		const parentMenu = wrapper.find('.parent-open')
+
+		expect(parentMenu!.classes()).not.toContain('has-open-submenu')
+
+		const childBtns = wrapper.findAll('.child-menu-btn')
+
+		await childBtns[0].trigger('click')
+		expect(parentMenu!.classes()).toContain('has-open-submenu')
+
+		await childBtns[0].trigger('click')
+		expect(parentMenu!.classes()).not.toContain('has-open-submenu')
+
+		await childBtns[1].trigger('click')
+		expect(parentMenu!.classes()).toContain('has-open-submenu')
+	})
+})

package/src/components/HeaderBar/HeaderComplexMenu/useHandleSubMenus.ts

@@ -0,0 +1,49 @@
+import { computed, provide, ref, watch, type DeepReadonly, type Ref } from 'vue'
+import { registerSubMenuKey } from './conts'
+
+export default function useHandleSubMenus(openStatus: DeepReadonly<Ref<boolean>>) {
+	type SubMenu = { id: string, status: Ref<boolean>, close: () => void }
+	const subMenus: Ref<SubMenu[]> = ref([])
+
+	function registerSubMenu(status: Ref<boolean>, close: () => void) {
+		const id = String(subMenus.value.length)
+		const newSubMenu = { id, status, close }
+
+		// Register the new submenu
+		subMenus.value.push(newSubMenu)
+
+		// Watch for changes to the status of this specific submenu
+		watch(status, (newStatus) => {
+			if (newStatus) {
+				closeOtherSubMenus(newSubMenu)
+			}
+		})
+	}
+
+	function closeOtherSubMenus(subMenu: SubMenu) {
+		subMenus.value.forEach((otherSubMenu) => {
+			if (otherSubMenu.id !== subMenu.id && otherSubMenu.status) {
+				otherSubMenu.close()
+			}
+		})
+	}
+
+	// When the current menu is closed, close its submenus
+	watch(openStatus, (newOpenStatus) => {
+		if (!newOpenStatus) {
+			subMenus.value.forEach((subMenu) => {
+				if (subMenu.status) {
+					subMenu.close()
+				}
+			})
+		}
+	})
+
+	const haveOpenSubMenu = computed(() => subMenus.value.some(subMenu => subMenu.status))
+
+	provide(registerSubMenuKey, registerSubMenu)
+
+	return {
+		haveOpenSubMenu,
+	}
+}