57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<template>
|
|
<div v-if="modelValue" class="fixed inset-0 z-50">
|
|
<Transition name="drawer-backdrop">
|
|
<div class="absolute inset-0 bg-black/40" @click="close" />
|
|
</Transition>
|
|
<Transition name="drawer-panel">
|
|
<div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl">
|
|
<div class="flex items-center justify-between border-b border-neutral-200 bg-tertiary-500 px-6 py-4">
|
|
<h2 class="text-lg font-semibold text-neutral-900">
|
|
{{ title }}
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
class="rounded-md p-2 text-neutral-500 hover:bg-neutral-100"
|
|
@click="close"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{ modelValue: boolean; title?: string }>()
|
|
const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
|
|
|
|
const close = () => emit('update:modelValue', false)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.drawer-backdrop-enter-active,
|
|
.drawer-backdrop-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.drawer-backdrop-enter-from,
|
|
.drawer-backdrop-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.drawer-panel-enter-active,
|
|
.drawer-panel-leave-active {
|
|
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
.drawer-panel-enter-from,
|
|
.drawer-panel-leave-to {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
</style>
|