MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into feature/MUI-33-developper-le-composant-datepicker

Browse Source
This commit is contained in:
Autin
2026-05-21 17:20:44 +02:00
parent e82840e552 f3e298e03b
commit 4e3aaea2d3
8 changed files with 1898 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
app/components/malio/drawer/Drawer.test.ts
View File

@@ -1,15 +1,22 @@
import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import { afterEach, describe, expect, it } from 'vitest'
import { enableAutoUnmount, mount } from '@vue/test-utils'
import type { DefineComponent } from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue'
import Drawer from './Drawer.vue'
type DrawerProps = {
modelValue?: boolean
title?: string
showClose?: boolean
id?: string
modelValue?: boolean
side?: 'right' | 'left'
showClose?: boolean
dismissable?: boolean
closeOnEscape?: boolean
ariaLabel?: string
drawerClass?: string
overlayClass?: string
headerClass?: string
bodyClass?: string
footerClass?: string
}
const DrawerForTest = Drawer as DefineComponent<DrawerProps>
@@ -18,64 +25,38 @@ function mountComponent(props: DrawerProps = {}, slots?: Record<string, string>)
return mount(DrawerForTest, {
props,
slots,
global: {
stubs: {
Teleport: true,
},
},
global: { stubs: { Teleport: true } },
})
}
describe('MalioDrawer', () => {
enableAutoUnmount(afterEach)
afterEach(() => {
document.body.style.overflow = ''
})
it('does not render when modelValue is false', () => {
const wrapper = mountComponent({ modelValue: false })
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
})
it('renders when modelValue is true', () => {
it('renders the panel when modelValue is true', () => {
const wrapper = mountComponent({ modelValue: true })
expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
})
it('renders the title', () => {
const wrapper = mountComponent({ modelValue: true, title: 'Mon tiroir' })
expect(wrapper.find('h2').text()).toBe('Mon tiroir')
})
it('renders slot content', () => {
it('renders default slot in the body', () => {
const wrapper = mountComponent(
{ modelValue: true },
{ default: '<p data-test="content">Contenu du drawer</p>' },
{ default: '<p data-test="content">Contenu</p>' },
)
expect(wrapper.find('[data-test="content"]').text()).toBe('Contenu du drawer')
expect(wrapper.find('[data-test="body"] [data-test="content"]').text()).toBe('Contenu')
})
it('emits update:modelValue false on backdrop click', async () => {
const wrapper = mountComponent({ modelValue: true })
await wrapper.find('[data-test="backdrop"]').trigger('click')
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
})
it('emits update:modelValue false on close button click', async () => {
const wrapper = mountComponent({ modelValue: true })
await wrapper.find('[data-test="close-button"]').trigger('click')
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
})
it('shows close button by default', () => {
const wrapper = mountComponent({ modelValue: true })
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
})
it('hides close button when showClose is false', () => {
const wrapper = mountComponent({ modelValue: true, showClose: false })
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
})
it('close button renders mdi:close icon', () => {
const wrapper = mountComponent({ modelValue: true })
const icon = wrapper.findComponent(IconifyIcon)
expect(icon.props('icon')).toBe('mdi:close')
it('works in uncontrolled mode (defaults closed)', () => {
const wrapper = mountComponent()
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
})
it('uses custom id when provided', () => {
@@ -85,38 +66,276 @@ describe('MalioDrawer', () => {
it('generates an id when not provided', () => {
const wrapper = mountComponent({ modelValue: true })
const id = wrapper.find('.fixed').attributes('id')
expect(id).toMatch(/^malio-drawer-/)
expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-drawer-/)
})
it('has role="dialog" and aria-modal on panel', () => {
it('has role="dialog" and aria-modal on the panel', () => {
const wrapper = mountComponent({ modelValue: true })
const panel = wrapper.find('[data-test="panel"]')
expect(panel.attributes('role')).toBe('dialog')
expect(panel.attributes('aria-modal')).toBe('true')
})
it('aria-labelledby links to title id', () => {
const wrapper = mountComponent({ modelValue: true, id: 'test-drawer' })
const panel = wrapper.find('[data-test="panel"]')
expect(panel.attributes('aria-labelledby')).toBe('test-drawer-title')
expect(wrapper.find('h2').attributes('id')).toBe('test-drawer-title')
})
it('applies drawerClass to the panel', () => {
const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-lg' })
const panel = wrapper.find('[data-test="panel"]')
expect(panel.classes()).toContain('max-w-lg')
const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-2xl' })
expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
})
it('works in uncontrolled mode', () => {
const wrapper = mountComponent()
// Without modelValue, defaults to closed
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
it('renders the #header slot inside the header bar', () => {
const wrapper = mountComponent(
{ modelValue: true },
{ header: '<h2 data-test="title">Titre</h2>' },
)
expect(wrapper.find('[data-test="header"] [data-test="title"]').text()).toBe('Titre')
})
it('renders the header bar when showClose is true even without #header', () => {
const wrapper = mountComponent({ modelValue: true })
expect(wrapper.find('[data-test="header"]').exists()).toBe(true)
})
it('does not render the header bar when no #header and showClose is false', () => {
const wrapper = mountComponent({ modelValue: true, showClose: false })
expect(wrapper.find('[data-test="header"]').exists()).toBe(false)
})
it('shows the close button by default', () => {
const wrapper = mountComponent({ modelValue: true })
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
})
it('hides the close button when showClose is false', () => {
const wrapper = mountComponent(
{ modelValue: true, showClose: false },
{ header: '<h2>Titre</h2>' },
)
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
})
it('close button renders mdi:cancel-bold icon', () => {
const wrapper = mountComponent({ modelValue: true })
const icon = wrapper.findComponent(IconifyIcon)
expect(icon.props('icon')).toBe('mdi:cancel-bold')
})
it('close button has aria-label "Fermer"', () => {
const wrapper = mountComponent({ modelValue: true })
expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
})
it('emits update:modelValue false and close on close button click', async () => {
const wrapper = mountComponent({ modelValue: true })
await wrapper.find('[data-test="close-button"]').trigger('click')
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
expect(wrapper.emitted('close')).toHaveLength(1)
})
it('sets aria-labelledby to the header id when #header is provided', () => {
const wrapper = mountComponent(
{ modelValue: true, id: 'test-drawer' },
{ header: '<h2>Titre</h2>' },
)
const panel = wrapper.find('[data-test="panel"]')
expect(panel.attributes('aria-labelledby')).toBe('test-drawer-header')
expect(wrapper.find('[data-test="header-content"]').attributes('id')).toBe('test-drawer-header')
})
it('sets aria-label from ariaLabel when no #header is provided', () => {
const wrapper = mountComponent({ modelValue: true, ariaLabel: 'Panneau latéral' })
const panel = wrapper.find('[data-test="panel"]')
expect(panel.attributes('aria-label')).toBe('Panneau latéral')
expect(panel.attributes('aria-labelledby')).toBeUndefined()
})
it('applies headerClass to the header bar', () => {
const wrapper = mountComponent({ modelValue: true, headerClass: 'bg-m-primary' })
expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
})
it('renders the #footer slot inside the body (scrollable zone)', () => {
const wrapper = mountComponent(
{ modelValue: true },
{ footer: '<button data-test="save">Enregistrer</button>' },
)
expect(wrapper.find('[data-test="body"] [data-test="footer"] [data-test="save"]').exists()).toBe(true)
})
it('does not render the footer wrapper when no #footer slot', () => {
const wrapper = mountComponent({ modelValue: true })
expect(wrapper.find('[data-test="footer"]').exists()).toBe(false)
})
it('applies bodyClass to the body', () => {
const wrapper = mountComponent({ modelValue: true, bodyClass: 'px-10' })
expect(wrapper.find('[data-test="body"]').classes()).toContain('px-10')
})
it('applies footerClass to the footer wrapper', () => {
const wrapper = mountComponent(
{ modelValue: true, footerClass: 'sticky bottom-0' },
{ footer: '<span>pied</span>' },
)
const footer = wrapper.find('[data-test="footer"]')
expect(footer.classes()).toContain('sticky')
expect(footer.classes()).toContain('bottom-0')
})
it('aligns to the right by default', () => {
const wrapper = mountComponent({ modelValue: true })
expect(wrapper.find('.fixed').classes()).toContain('justify-end')
})
it('aligns to the left when side is "left"', () => {
const wrapper = mountComponent({ modelValue: true, side: 'left' })
expect(wrapper.find('.fixed').classes()).toContain('justify-start')
})
it('emits update:modelValue false and close on backdrop click (dismissable)', async () => {
const wrapper = mountComponent({ modelValue: true })
await wrapper.find('[data-test="backdrop"]').trigger('click')
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
expect(wrapper.emitted('close')).toHaveLength(1)
})
it('does not close on backdrop click when dismissable is false', async () => {
const wrapper = mountComponent({ modelValue: true, dismissable: false })
await wrapper.find('[data-test="backdrop"]').trigger('click')
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
})
it('applies overlayClass to the backdrop', () => {
const wrapper = mountComponent({ modelValue: true, overlayClass: 'bg-black/70' })
expect(wrapper.find('[data-test="backdrop"]').classes()).toContain('bg-black/70')
})
it('closes on Escape key when closeOnEscape is true', async () => {
const wrapper = mountComponent({ modelValue: true })
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
expect(wrapper.emitted('close')).toHaveLength(1)
})
it('does not close on Escape when closeOnEscape is false', async () => {
const wrapper = mountComponent({ modelValue: true, closeOnEscape: false })
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
})
it('locks body scroll when opened and restores it when closed', async () => {
const wrapper = mountComponent({ modelValue: false })
expect(document.body.style.overflow).toBe('')
await wrapper.setProps({ modelValue: true })
expect(document.body.style.overflow).toBe('hidden')
await wrapper.setProps({ modelValue: false })
expect(document.body.style.overflow).toBe('')
})
it('moves focus into the panel when opened', async () => {
const wrapper = mount(DrawerForTest, {
props: { modelValue: false, showClose: false },
slots: { default: '<button data-test="first">OK</button>' },
attachTo: document.body,
global: { stubs: { Teleport: true } },
})
await wrapper.setProps({ modelValue: true })
await wrapper.vm.$nextTick()
const first = wrapper.find('[data-test="first"]').element
expect(document.activeElement).toBe(first)
wrapper.unmount()
})
it('restores focus to the trigger when closed', async () => {
const trigger = document.createElement('button')
document.body.appendChild(trigger)
trigger.focus()
expect(document.activeElement).toBe(trigger)
const wrapper = mount(DrawerForTest, {
props: { modelValue: false },
slots: { default: '<button>OK</button>' },
attachTo: document.body,
global: { stubs: { Teleport: true } },
})
await wrapper.setProps({ modelValue: true })
await wrapper.vm.$nextTick()
await wrapper.setProps({ modelValue: false })
await wrapper.vm.$nextTick()
expect(document.activeElement).toBe(trigger)
wrapper.unmount()
trigger.remove()
})
it('moves focus to the close button on open (default showClose)', async () => {
const wrapper = mount(DrawerForTest, {
props: { modelValue: false, showClose: true },
attachTo: document.body,
global: { stubs: { Teleport: true } },
})
await wrapper.setProps({ modelValue: true })
await wrapper.vm.$nextTick()
expect(document.activeElement).toBe(wrapper.find('[data-test="close-button"]').element)
wrapper.unmount()
})
it('wraps focus to the first element when Tab is pressed on the last element', async () => {
const wrapper = mount(DrawerForTest, {
props: { modelValue: true, showClose: false },
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
attachTo: document.body,
global: { stubs: { Teleport: true } },
})
await wrapper.vm.$nextTick()
const last = wrapper.find('[data-test="btn2"]').element as HTMLElement
last.focus()
expect(document.activeElement).toBe(last)
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab' })
expect(document.activeElement).toBe(wrapper.find('[data-test="btn1"]').element)
wrapper.unmount()
})
it('wraps focus to the last element when Shift+Tab is pressed on the first element', async () => {
const wrapper = mount(DrawerForTest, {
props: { modelValue: true, showClose: false },
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
attachTo: document.body,
global: { stubs: { Teleport: true } },
})
await wrapper.vm.$nextTick()
const first = wrapper.find('[data-test="btn1"]').element as HTMLElement
first.focus()
expect(document.activeElement).toBe(first)
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab', shiftKey: true })
expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
wrapper.unmount()
})
it('does not release body scroll-lock when one stacked drawer closes while another is still open', async () => {
const wrapperA = mount(DrawerForTest, {
props: { modelValue: false },
attachTo: document.body,
global: { stubs: { Teleport: true } },
})
const wrapperB = mount(DrawerForTest, {
props: { modelValue: false },
attachTo: document.body,
global: { stubs: { Teleport: true } },
})
// Open drawer A → scroll locked
await wrapperA.setProps({ modelValue: true })
expect(document.body.style.overflow).toBe('hidden')
// Open drawer B → still locked
await wrapperB.setProps({ modelValue: true })
expect(document.body.style.overflow).toBe('hidden')
// Close drawer B → A is still open, scroll must remain locked
await wrapperB.setProps({ modelValue: false })
expect(document.body.style.overflow).toBe('hidden')
// Close drawer A → both closed, scroll-lock released
await wrapperA.setProps({ modelValue: false })
expect(document.body.style.overflow).toBe('')
})
})

228
app/components/malio/drawer/Drawer.vue
View File

@@ -1,59 +1,76 @@
<template>
<Teleport to="body">
<Transition
name="drawer"
:name="`drawer-${side}`"
appear
@after-leave="isRendered = false"
>
<div
v-if="isRendered && isOpen"
:id="componentId"
class="fixed inset-0 z-50 flex justify-end"
class="fixed inset-0 z-50 flex"
:class="side === 'right' ? 'justify-end' : 'justify-start'"
v-bind="attrs"
>
<div
class="absolute inset-0 bg-black/40"
:class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
data-test="backdrop"
@click="close"
@click="onBackdropClick"
/>
<div
ref="panelRef"
:class="twMerge(
'relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl',
'relative z-50 flex h-full w-full max-w-md flex-col bg-white',
drawerClass,
)"
role="dialog"
:aria-modal="true"
:aria-labelledby="titleId"
aria-modal="true"
:aria-labelledby="hasHeader ? headerId : undefined"
:aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
tabindex="-1"
data-test="panel"
@keydown="onKeydown"
>
<div class="flex items-center justify-between px-5 pb-8 pt-8">
<h2
:id="titleId"
class="text-[32px] font-semibold text-m-primary"
<div
v-if="hasHeader || showClose"
:class="twMerge('flex items-center justify-between gap-4 px-5 py-[25px]', headerClass)"
data-test="header"
>
<div
:id="headerId"
class="min-w-0 flex-1"
data-test="header-content"
>
{{ title }}
</h2>
<slot name="header" />
</div>
<button
v-if="showClose"
type="button"
aria-label="Fermer"
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
data-test="close-button"
@click="close"
>
<IconifyIcon
icon="mdi:close"
:width="24"
:height="24"
icon="mdi:cancel-bold"
:width="16"
:height="16"
/>
</button>
</div>
<div
class="flex-1 overflow-y-auto px-5"
:class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
data-test="body"
>
<slot />
<div
v-if="$slots.footer"
:class="footerClass"
data-test="footer"
>
<slot name="footer" />
</div>
</div>
</div>
</div>
@@ -62,7 +79,17 @@
</template>
<script setup lang="ts">
import { computed, ref, useAttrs, useId, watch } from 'vue'
import {
computed,
nextTick,
onBeforeUnmount,
onMounted,
ref,
useAttrs,
useId,
useSlots,
watch,
} from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue'
import { twMerge } from 'tailwind-merge'
@@ -72,68 +99,195 @@ const props = withDefaults(
defineProps<{
id?: string
modelValue?: boolean
title?: string
side?: 'right' | 'left'
showClose?: boolean
dismissable?: boolean
closeOnEscape?: boolean
ariaLabel?: string
drawerClass?: string
overlayClass?: string
headerClass?: string
bodyClass?: string
footerClass?: string
}>(),
{
id: '',
modelValue: undefined,
title: '',
side: 'right',
showClose: true,
dismissable: true,
closeOnEscape: true,
ariaLabel: '',
drawerClass: '',
overlayClass: '',
headerClass: '',
bodyClass: '',
footerClass: '',
},
)
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void
(e: 'close'): void
}>()
const attrs = useAttrs()
const generatedId = useId()
const componentId = computed(() => props.id || `malio-drawer-${generatedId}`)
const titleId = computed(() => `${componentId.value}-title`)
const slots = useSlots()
const headerId = computed(() => `${componentId.value}-header`)
const hasHeader = computed(() => !!slots.header)
const isControlled = computed(() => props.modelValue !== undefined)
const localValue = ref(false)
const isOpen = computed(() =>
isControlled.value ? props.modelValue! : localValue.value,
)
const isRendered = ref(isOpen.value)
const panelRef = ref<HTMLElement | null>(null)
let previouslyFocused: HTMLElement | null = null
// Per-instance flag: true while this drawer holds a scroll-lock count slot.
let lockedByThisInstance = false
function getFocusable(container: HTMLElement): HTMLElement[] {
return Array.from(
container.querySelectorAll<HTMLElement>(
'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',
),
).filter((el) => el.tabIndex !== -1)
}
function onOpen() {
previouslyFocused = (document.activeElement as HTMLElement | null) ?? null
if (!lockedByThisInstance) {
lockedByThisInstance = true
openDrawerCount++
if (openDrawerCount === 1) {
document.body.style.overflow = 'hidden'
}
}
nextTick(() => {
const panel = panelRef.value
if (!panel) return
const focusable = getFocusable(panel)
;(focusable[0] ?? panel).focus()
})
}
function onClose() {
if (lockedByThisInstance) {
lockedByThisInstance = false
openDrawerCount = Math.max(0, openDrawerCount - 1)
if (openDrawerCount === 0) {
document.body.style.overflow = ''
}
}
previouslyFocused?.focus?.()
previouslyFocused = null
}
watch(isOpen, (val) => {
if (val) isRendered.value = true
if (val) {
isRendered.value = true
onOpen()
}
else {
onClose()
}
})
function close() {
if (!isControlled.value) {
localValue.value = false
onMounted(() => {
if (isOpen.value) onOpen()
})
onBeforeUnmount(() => {
// If this instance is still holding a scroll-lock slot, release it.
if (lockedByThisInstance) {
lockedByThisInstance = false
openDrawerCount = Math.max(0, openDrawerCount - 1)
if (openDrawerCount === 0) {
document.body.style.overflow = ''
}
}
})
function onBackdropClick() {
if (props.dismissable) close()
}
function onKeydown(e: KeyboardEvent) {
if (e.key === 'Escape' && props.closeOnEscape) {
e.stopPropagation()
close()
return
}
if (e.key !== 'Tab') return
const panel = panelRef.value
if (!panel) return
const focusable = getFocusable(panel)
if (focusable.length === 0) {
e.preventDefault()
panel.focus()
return
}
const first = focusable[0]!
const last = focusable[focusable.length - 1]!
if (e.shiftKey && document.activeElement === first) {
e.preventDefault()
last.focus()
}
else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault()
first.focus()
}
}
function close() {
if (!isControlled.value) localValue.value = false
emit('update:modelValue', false)
emit('close')
}
</script>
<script lang="ts">
// Shared across all MalioDrawer instances: only the last open drawer releases the body scroll-lock.
let openDrawerCount = 0
</script>
<style scoped>
.drawer-enter-active,
.drawer-leave-active {
.drawer-right-enter-active,
.drawer-right-leave-active,
.drawer-left-enter-active,
.drawer-left-leave-active {
transition: opacity 0.2s ease;
}
.drawer-enter-active > div:last-child,
.drawer-leave-active > div:last-child {
.drawer-right-enter-active > div:last-child,
.drawer-right-leave-active > div:last-child,
.drawer-left-enter-active > div:last-child,
.drawer-left-leave-active > div:last-child {
transition: transform 0.3s ease;
}
.drawer-enter-from,
.drawer-leave-to {
.drawer-right-enter-from,
.drawer-right-leave-to,
.drawer-left-enter-from,
.drawer-left-leave-to {
opacity: 0;
}
.drawer-enter-from > div:last-child,
.drawer-leave-to > div:last-child {
.drawer-right-enter-from > div:last-child,
.drawer-right-leave-to > div:last-child {
transform: translateX(100%);
}
.drawer-left-enter-from > div:last-child,
.drawer-left-leave-to > div:last-child {
transform: translateX(-100%);
}
</style>