43 lines
1.8 KiB
Vue
43 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui';
|
|
import { useTranslations } from '@/composables/useVanguard';
|
|
|
|
withDefaults(defineProps<{ header?: string; width?: string }>(), { width: '40rem' });
|
|
|
|
const open = defineModel<boolean>('open', { default: false });
|
|
|
|
const { __ } = useTranslations();
|
|
</script>
|
|
|
|
<template>
|
|
<DialogRoot v-model:open="open">
|
|
<DialogPortal>
|
|
<DialogOverlay class="fixed inset-0 z-40 bg-black/50" />
|
|
|
|
<DialogContent
|
|
class="fixed top-1/2 left-1/2 z-50 flex max-h-[90vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-lg bg-white shadow-xl focus:outline-none"
|
|
:style="{ maxWidth: width }"
|
|
>
|
|
<div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
|
|
<DialogTitle class="text-lg font-medium text-slate-800">{{ header }}</DialogTitle>
|
|
|
|
<DialogClose
|
|
class="focus-visible:outline-primary-600 cursor-pointer rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
|
|
:aria-label="__('Close')"
|
|
>
|
|
<i class="fas fa-times" aria-hidden="true" />
|
|
</DialogClose>
|
|
</div>
|
|
|
|
<div class="overflow-y-auto px-6 py-4">
|
|
<slot />
|
|
</div>
|
|
|
|
<div v-if="$slots.footer" class="flex justify-end gap-2 border-t border-slate-100 px-6 py-4">
|
|
<slot name="footer" />
|
|
</div>
|
|
</DialogContent>
|
|
</DialogPortal>
|
|
</DialogRoot>
|
|
</template>
|