change

src/components/pnSimpleScrollDialog.vue

@@ -0,0 +1,73 @@
+<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>