74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
|
<q-dialog v-model="modelValue">
|
|
<q-card
|
|
class="q-pa-none q-ma-none w100 no-scroll"
|
|
>
|
|
<q-card-section class="row items-center q-pb-none">
|
|
<div class="flex no-wrap items-center w100">
|
|
<q-resize-observer @resize="onHeaderResize"/>
|
|
<span class="text-bold">
|
|
{{ $t(title)}}
|
|
</span>
|
|
<q-space />
|
|
<q-btn icon="close" flat round dense v-close-popup />
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<div>
|
|
<pn-shadow-scroll :height="scrollAreaHeight" :hideShadows="false">
|
|
<div>
|
|
<q-resize-observer @resize="onBodyResize"/>
|
|
<slot/>
|
|
</div>
|
|
</pn-shadow-scroll>
|
|
</div>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch, nextTick } from 'vue'
|
|
import pnShadowScroll from './pnShadowScroll.vue'
|
|
|
|
defineProps<{
|
|
title: string
|
|
}>()
|
|
|
|
const modelValue = defineModel<boolean>({
|
|
required: true
|
|
})
|
|
|
|
const headerHeight = ref(0)
|
|
const bodyHeight = ref(0)
|
|
const scrollAreaHeight = ref(0)
|
|
|
|
interface sizeParams {
|
|
height: number,
|
|
width: number
|
|
}
|
|
|
|
function onHeaderResize (size: sizeParams) {
|
|
headerHeight.value = size.height
|
|
}
|
|
|
|
function onBodyResize (size: sizeParams) {
|
|
bodyHeight.value = size.height
|
|
}
|
|
|
|
async function updateScrollAreaHeight () {
|
|
await nextTick(() => {
|
|
scrollAreaHeight.value = Math.min(
|
|
bodyHeight.value + 16,
|
|
window.innerHeight - headerHeight.value - 64
|
|
)
|
|
})
|
|
}
|
|
|
|
watch(bodyHeight, updateScrollAreaHeight)
|
|
watch(headerHeight, updateScrollAreaHeight)
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|