@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

package/src/components/HeaderBar/{HeaderComplexMenu/HeaderComplexMenu.vue → HeaderBurgerMenu/HeaderBurgerMenu.vue}

@@ -1,54 +1,73 @@
 <script setup lang="ts">
+	import throttleDisplayFn from '@/utils/functions/throttleDisplayFn/throttleDisplayFn'
 	import { computed, inject, nextTick, onMounted, onUnmounted, readonly, ref, watch, type CSSProperties, type Ref } from 'vue'
 	import HeaderMenuBtn from '../HeaderMenuBtn/HeaderMenuBtn.vue'
 	import { registerHeaderMenuKey } from '../consts'
+	import useHeaderResponsiveMode from '../useHeaderResponsiveMode'
 	import locals from './locals'
 	import useHandleSubMenus from './useHandleSubMenus'
 
-	const menuWrapper = ref<HTMLElement | null>(null)
+	const headerMenuWrapper = ref<HTMLElement | null>(null)
 	const menuBtnWrapper = ref<HTMLDivElement | null>(null)
 	const outerBtn = ref<HTMLElement | null>(null)
 	const innerBtn = ref<HTMLElement | null>(null)
 	const menuLeft = ref(0)
 	const menuTop = ref(0)
+	const menuHeight = ref('70vh')
 
 	function positionMenu() {
-		// todo debounce
-		menuLeft.value = menuBtnWrapper.value!.getBoundingClientRect().left
-		menuTop.value = menuBtnWrapper.value!.getBoundingClientRect().top
+		const rect = menuBtnWrapper.value!.getBoundingClientRect()
+		menuLeft.value = rect.left
+		menuTop.value = rect.top
+		menuHeight.value = `calc(100vh - ${rect.top}px - 48px)`
+	}
+	const throttledPositionMenu = throttleDisplayFn(positionMenu, 16)
+	const optimizedPositionMenu = () => {
+		if (menuOpen.value) {
+			throttledPositionMenu()
+		}
 	}
 
 	onMounted(() => {
 		positionMenu()
-		window.addEventListener('scroll', positionMenu)
-		window.addEventListener('resize', positionMenu)
+		togglePageScroll()
+		window.addEventListener('scroll', optimizedPositionMenu)
+		window.addEventListener('resize', optimizedPositionMenu)
 		window.addEventListener('click', handleClickOutside, { capture: true })
 	})
 
 	onUnmounted(() => {
-		window.removeEventListener('scroll', positionMenu)
-		window.removeEventListener('resize', positionMenu)
+		window.removeEventListener('scroll', optimizedPositionMenu)
+		window.removeEventListener('resize', optimizedPositionMenu)
 		window.removeEventListener('click', handleClickOutside, { capture: true })
+
+		document.documentElement.style.overflow = 'auto'
+		document.body.style.overflow = 'auto'
 	})
 
-	const menuOpen = ref(false)
+	const menuOpen = defineModel<boolean>({
+		default: false,
+	})
 
 	watch(menuOpen, async (newVal) => {
-		document.documentElement.style.overflow = newVal ? 'hidden' : 'auto'
-		document.body.style.overflow = newVal ? 'hidden' : 'auto'
+		togglePageScroll()
 
 		if (newVal) {
+			positionMenu() // the menu position can have changed since the component was mounted
+
 			await nextTick()
-			innerBtn.value!.focus()
+			innerBtn.value?.focus()
 		}
 		else {
-			outerBtn.value!.focus()
+			outerBtn.value?.focus()
 		}
-	})
+	}, { immediate: true })
 
+	const { isDesktop } = useHeaderResponsiveMode()
 	const menuStyle = computed<CSSProperties>(() => ({
 		left: `${menuLeft.value}px`,
 		top: `${menuTop.value}px`,
+		height: isDesktop.value ? menuHeight.value : undefined,
 	}))
 
 	function handleClickOutside(event: MouseEvent | KeyboardEvent) {
@@ -57,17 +76,25 @@
 		// do not close menu if click is inside the menu
 		let walkElement = event.target as HTMLElement | null
 		while (walkElement && walkElement !== document.body) {
-			if (walkElement === menuWrapper.value) return
+			if (walkElement === headerMenuWrapper.value) return
 			walkElement = walkElement.parentElement
 		}
 
+		event.stopPropagation()
 		menuOpen.value = false
 	}
 
+	function togglePageScroll() {
+		if (typeof window !== 'undefined') {
+			document.documentElement.style.overflow = menuOpen.value ? 'hidden' : 'auto'
+			document.body.style.overflow = menuOpen.value ? 'hidden' : 'auto'
+		}
+	}
+
 	const { haveOpenSubMenu } = useHandleSubMenus(readonly(menuOpen))
 
 	const registerHeaderMenu = inject<(menuOpen: Ref<boolean>) => void>(registerHeaderMenuKey)
-	if (registerHeaderMenu) registerHeaderMenu(menuOpen)
+	if (registerHeaderMenu) registerHeaderMenu(readonly(menuOpen))
 </script>
 <template>
 	<div
@@ -81,37 +108,39 @@
 				v-model="menuOpen"
 			/>
 		</div>
-		<Transition name="menu">
-			<div
-				v-show="menuOpen"
-				class="overlay"
-			>
+		<Teleport to="body">
+			<Transition name="menu">
 				<div
-					ref="menuWrapper"
-					role="menu"
-					class="menu-wrapper"
-					:style="menuStyle"
+					v-if="menuOpen"
+					class="overlay"
 				>
-					<HeaderMenuBtn
-						ref="innerBtn"
-						v-model="menuOpen"
-					/>
-					<nav
-						id="header-menu-wrapper"
-						class="header-menu-wrapper"
-						:class="{
-							'header-menu-wrapper--submenu-open': haveOpenSubMenu,
-						}"
-						role="navigation"
-						:aria-label="locals.publicMenu"
+					<div
+						role="menu"
+						class="menu-wrapper"
+						:style="menuStyle"
 					>
-						<div class="header-menu">
-							<slot />
-						</div>
-					</nav>
+						<HeaderMenuBtn
+							ref="innerBtn"
+							v-model="menuOpen"
+						/>
+						<nav
+							id="header-menu-wrapper"
+							ref="headerMenuWrapper"
+							class="header-menu-wrapper"
+							:class="{
+								'header-menu-wrapper--submenu-open': haveOpenSubMenu,
+							}"
+							role="navigation"
+							:aria-label="locals.publicMenu"
+						>
+							<div class="header-menu">
+								<slot />
+							</div>
+						</nav>
+					</div>
 				</div>
-			</div>
-		</Transition>
+			</Transition>
+		</Teleport>
 	</div>
 </template>
 
@@ -124,6 +153,7 @@
 	position: fixed;
 	z-index: 1000;
 	background-color: rgba(3, 16, 37, .5);
+	backdrop-filter: blur(2px);
 }
 
 .menu-wrapper {
@@ -151,7 +181,6 @@
 	}
 
 	.header-menu-wrapper {
-		height: $menu-height;
 		width: $menu-width;
 		overflow: visible;
 	}
@@ -160,7 +189,7 @@
 		background-color: $neutral-white;
 		overflow-y : auto;
 		overflow-x: hidden;
-		height: $menu-height;
+		height: 100%;
 	}
 }
 

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.mdx

@@ -0,0 +1,38 @@
+import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
+import * as HeaderMenuItemStories from "./HeaderMenuItem.stories";
+
+<Meta of={HeaderMenuItemStories} />
+
+# HeaderMenuItem
+
+Le composant `HeaderMenuItem` est un composant de menu qui permet de wrapper un lien de navigation. Cela peut être un lien `a`, `router-link` ou `nuxt-link`.
+Ce composant doit être utilisé dans un composant `HeaderMenuSection` afin de respecter la structure du menu et de garantir la bonne accessibilité de celui ci.
+
+<Source
+  dark
+  code={`
+<HeaderMenuSection>
+	<HeaderMenuItem>
+		<a href="/">Home</a>
+	</HeaderMenuItem>
+	<HeaderMenuItem>
+		<a href="/about">About</a>
+	</HeaderMenuItem>
+	<HeaderMenuItem>
+		<RouterLink to="/services">Services</RouterLink>
+	</HeaderMenuItem>
+	<HeaderMenuItem>
+		<NuxtLink to="/contact">Contact</NuxtLink>
+	</HeaderMenuItem>
+</HeaderMenuSection>
+`}
+/>
+
+Pour plus de détails sur le contexte d'utilisation de ce composant, veuillez consulter le composant `HeaderBurgerMenu`.
+
+
+<Canvas of={HeaderMenuItemStories.Default} />
+
+## API
+
+<Controls of={HeaderMenuItemStories.Default} />

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import HeaderMenuItem from './HeaderMenuItem.vue'
+import HeaderBurgerMenu from '../HeaderBurgerMenu.vue'
+import HeaderBar from '../../HeaderBar.vue'
+import HeaderMenuSection from '../HeaderMenuSection/HeaderMenuSection.vue'
+
+const meta = {
+	title: 'Composants/Structure/HeaderBar/HeaderBurgerMenu/HeaderMenuItem',
+	component: HeaderMenuItem,
+	argTypes: {
+		default: {
+			control: { type: 'text' },
+			description: 'Le lien (`a`; `router-link`, `nuxt-link`) et son contenu',
+			table: {
+				type: { summary: '{}' },
+			},
+		},
+	},
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof HeaderMenuItem>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		default: 'lorem ipsum',
+	},
+	render: (args) => {
+		return {
+			components: { HeaderMenuItem, HeaderBurgerMenu, HeaderBar, HeaderMenuSection },
+			setup() {
+				return { args }
+			},
+			template: `
+				<HeaderBar>
+					<template #menu>
+						<HeaderBurgerMenu>
+							<HeaderMenuSection>
+								<HeaderMenuItem>
+									<a href="">{{ args.default }}</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+						</HeaderBurgerMenu>
+					</template>
+				</HeaderBar>
+			`,
+		}
+	},
+	play: async ({ canvasElement }) => {
+		const menuBtn = canvasElement.querySelector('button')
+		setTimeout(() => {
+			menuBtn!.click()
+		}, 1000)
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<Template>
+					<HeaderBar>
+						<template #menu>
+							<HeaderBurgerMenu>
+								<HeaderMenuSection>
+									<HeaderMenuItem>
+										<a href="">lorem ipsum</a>
+									</HeaderMenuItem>
+								</HeaderMenuSection>
+							</HeaderBurgerMenu>
+						</template>
+					</HeaderBar>
+				</Template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup>
+					import { HeaderBurgerMenu, HeaderBar, HeaderMenuSection, HeaderMenuItem } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+}

package/src/components/HeaderBar/{HeaderComplexMenu → HeaderBurgerMenu}/HeaderMenuItem/tests/__snapshots__/HeaderMenuItem.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`HeaderMenuItem > should render the component 1`] = `"<li data-v-8ba695ac="" class="header-menu-item"><a>Test</a></li>"`;
+exports[`HeaderMenuItem > should render the component 1`] = `"<li data-v-bc776fc3="" class="header-menu-item"><a>Test</a></li>"`;

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.mdx

@@ -0,0 +1,17 @@
+import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
+import * as HeaderMenuSectionStories from "./HeaderMenuSection.stories";
+
+<Meta of={HeaderMenuSectionStories} />
+
+# HeaderMenuSection
+
+Le composant `HeaderMenuSection` permet de regrouper des éléments de menu dans une section. Il s'utilise dans le composant `HeaderComplexMenu` ou `HeaderSubMenu` et doit contenir des éléments de menu (`HeaderMenuItem`).
+
+
+<Canvas of={HeaderMenuSectionStories.Default} />
+
+## API
+
+<Controls of={HeaderMenuSectionStories.Default} />
+
+

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.stories.ts

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import HeaderMenuSection from './HeaderMenuSection.vue'
+import HeaderMenuItem from '../HeaderMenuItem/HeaderMenuItem.vue'
+import HeaderBurgerMenu from '../HeaderBurgerMenu.vue'
+import HeaderBar from '../../HeaderBar.vue'
+
+const meta = {
+	title: 'Composants/Structure/HeaderBar/HeaderBurgerMenu/HeaderMenuSection',
+	component: HeaderMenuSection,
+	argTypes: {
+		title: {
+			description: 'Titre de la section',
+			control: { type: 'text' },
+			table: {
+				category: 'slots',
+			},
+		},
+		default: {
+			control: { type: 'text' },
+			description: 'Contenu de la section, construit avec des composants `HeaderMenuItem`',
+			table: {
+				type: { summary: '{}' },
+			},
+		},
+	},
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof HeaderMenuSection>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		title: 'section 1',
+	},
+	render: (args) => {
+		return {
+			components: { HeaderMenuItem, HeaderBurgerMenu, HeaderBar, HeaderMenuSection },
+			setup() {
+				return { args }
+			},
+			template: `
+				<HeaderBar>
+					<template #menu>
+						<HeaderBurgerMenu>
+							<HeaderMenuSection>
+								<template #title>
+									{{ args.title }}
+								</template>
+								<HeaderMenuItem>
+									<a>lorem ipsum</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+
+							<HeaderMenuSection>
+								<template #title>
+									section 2
+								</template>
+
+								<HeaderMenuItem>
+									<a>lorem ipsum</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+						</HeaderBurgerMenu>
+					</template>
+				</HeaderBar>
+			`,
+		}
+	},
+	play: async ({ canvasElement }) => {
+		const menuBtn = canvasElement.querySelector('button')
+		setTimeout(() => {
+			menuBtn!.click()
+		}, 1000)
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<Template>
+					<HeaderBar>
+						<template #menu>
+							<HeaderBurgerMenu>
+								<HeaderMenuSection>
+									<template #title>
+										{{ args.title }}
+									</template>
+									<HeaderMenuItem>
+										<a>lorem ipsum</a>
+									</HeaderMenuItem>
+								</HeaderMenuSection>
+
+								<HeaderMenuSection>
+									<template #title>
+										section 2
+									</template>
+									<HeaderMenuItem>
+										<a>lorem ipsum</a>
+									</HeaderMenuItem>
+								</HeaderMenuSection>
+							</HeaderBurgerMenu>
+						</template>
+					</HeaderBar>
+				</Template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup>
+					import { HeaderBurgerMenu, HeaderBar, HeaderMenuSection, HeaderMenuItem } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+}

package/src/components/HeaderBar/{HeaderComplexMenu → HeaderBurgerMenu}/HeaderMenuSection/HeaderMenuSection.vue

@@ -13,11 +13,11 @@
 <template>
 	<div class="header-menu-section">
 		<div
-			v-if="title"
+			v-if="$slots.title"
 			:id="titleId"
 			class="header-menu-section-title"
 		>
-			{{ title }}
+			<slot name="title" />
 		</div>
 		<ul
 			:id="groupId"

package/src/components/HeaderBar/{HeaderComplexMenu → HeaderBurgerMenu}/HeaderMenuSection/tests/HeaderMenuSection.spec.ts

@@ -5,10 +5,8 @@ import HeaderMenuSection from '../HeaderMenuSection.vue'
 describe('HeaderMenuSection', () => {
 	it('should render the component', async () => {
 		const wrapper = mount(HeaderMenuSection, {
-			props: {
-				title: 'Section title',
-			},
 			slots: {
+				title: 'Section title',
 				default: [
 					'<li><a>Test 1</a></li>',
 					'<li><a>Test 2</a></li>',

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.mdx

@@ -0,0 +1,43 @@
+import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
+import * as HeaderSubMenuStories from "./HeaderSubMenu.stories";
+
+<Meta of={HeaderSubMenuStories} />
+
+# HeaderSubMenu
+
+Le composant `HeaderSubMenu` est un sous-composant du composant `HeaderBurgerMenu` qui permet de créer un sous-menu dans le menu principal.
+En mode mobile, les sous-menus s'affichent par dessus du menu parent, en mode desktop, les sous-menus s'affichent à droite du parent.
+Les sous-menus peuvent être imbriqués pour créer des sous-sous-menus.
+
+Le composant `HeaderSubMenu` doit être utilisé dans un composant `HeaderMenuItem` afin de respecter la structure du menu et de garantir la bonne accessibilité du menu.
+On aura donc une structure de composant comme suit :
+
+<Source
+  dark
+  code={`
+<HeaderMenuBurger>
+	<HeaderMenuSection>
+		<HeaderMenuItem>
+			<HeaderSubMenu>
+				<template #title>
+					title
+				</template>
+				<HeaderMenuSection>
+					<HeaderMenuItem>
+						<a>lien de deuxième niveau</a>
+					</HeaderMenuItem>
+				</HeaderMenuSection>
+			</HeaderSubMenu>
+		</HeaderMenuItem>
+	</HeaderMenuSection>
+</HeaderMenuBurger>
+`}
+/>
+
+
+
+<Canvas of={HeaderSubMenuStories.Default} />
+
+## API
+
+<Controls of={HeaderSubMenuStories.Default} />