75 lines
1.6 KiB
Vue
75 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
import AppBox from '../app/AppBox.vue';
|
|
|
|
defineProps<{
|
|
width?: string;
|
|
maxWidth?: string;
|
|
close?: (...args: unknown[]) => void;
|
|
}>();
|
|
|
|
const dialogState = defineModel('state', { default: true });
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog v-model="dialogState" full-width full-height>
|
|
<AppBox
|
|
style="
|
|
padding: 0;
|
|
border-radius: var(--radius-2);
|
|
max-height: 100%;
|
|
flex-wrap: nowrap;
|
|
"
|
|
class="column"
|
|
>
|
|
<div class="row items-center q-py-sm q-px-md bordered-b">
|
|
<div style="flex: 1"><slot name="title" /></div>
|
|
<div>
|
|
<q-btn
|
|
round
|
|
flat
|
|
icon="mdi-close"
|
|
padding="xs"
|
|
class="close-btn"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
v-close-popup
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="dialog-body"
|
|
style="
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
"
|
|
>
|
|
<slot />
|
|
</div>
|
|
<div
|
|
class="row items-center q-py-sm q-px-md bordered-t"
|
|
v-if="$slots.footer"
|
|
>
|
|
<slot name="footer" />
|
|
</div>
|
|
</AppBox>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.close-btn {
|
|
color: hsl(var(--negative-bg));
|
|
background-color: hsla(var(--negative-bg) / 0.1);
|
|
|
|
&.dark {
|
|
background-color: transparent;
|
|
border: 1px solid hsl(var(--negative-bg));
|
|
}
|
|
}
|
|
|
|
.dialog-body > :deep(*) {
|
|
max-height: calc(100vh - 200px);
|
|
}
|
|
</style>
|