matthieu
b240dc6fc4
- Add explicit imports for useClientService/useProjectService (not auto-imported from services/) - Fix AppDrawer v-if placement on Teleport to avoid slot warning - Add json format support in API Platform config (415 fix) - Support both hydra:member and member keys in extractHydraMembers - Add Vite/Nitro dev proxy for API calls - Update CLAUDE.md with full project documentation - Use tertiary-500 background for project cards Co-Authored-By: Claude Opus 4.6 <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>
|
|
<button
|
|
type="button"
|
|
class="rounded p-1 text-neutral-400 hover:text-neutral-600"
|
|
@click="close"
|
|
>
|
|
<Icon name="mdi:close" size="24" />
|
|
</button>
|
|
</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>
|