22373a0b87
- Replace all AppDrawer with MalioDrawer across 10 drawer components - Replace native <button> with MalioButton/MalioButtonIcon in all pages and components - Fix TimeTrackingExportDrawer: use MalioSelectCheckbox for multi-select filters - Add Malio design system colors (m-btn-*, m-disabled, m-surface) to tailwind.config.ts - Align toggle button heights with MalioButton (h-[40px]) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<template>
|
|
<Teleport v-if="modelValue" to="body">
|
|
<Transition name="drawer" appear>
|
|
<div
|
|
class="fixed inset-0 z-40 flex justify-end"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-black/30"
|
|
@click="close"
|
|
/>
|
|
<div
|
|
class="relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl"
|
|
>
|
|
<div class="flex items-center justify-between border-b border-neutral-200 px-6 py-4">
|
|
<h2 class="text-lg font-bold text-neutral-900">{{ title }}</h2>
|
|
<MalioButtonIcon
|
|
icon="mdi:close"
|
|
aria-label="Fermer"
|
|
variant="ghost"
|
|
icon-size="24"
|
|
@click="close"
|
|
/>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto px-6 py-4">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
modelValue: boolean
|
|
title: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: boolean): void
|
|
}>()
|
|
|
|
function close() {
|
|
emit('update:modelValue', false)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.drawer-enter-active,
|
|
.drawer-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.drawer-enter-active > div:last-child,
|
|
.drawer-leave-active > div:last-child {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.drawer-enter-from,
|
|
.drawer-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.drawer-enter-from > div:last-child,
|
|
.drawer-leave-to > div:last-child {
|
|
transform: translateX(100%);
|
|
}
|
|
</style>
|