change

src/components/pnBottomSheetDialog.vue

@@ -0,0 +1,97 @@
+<template>
+  <q-dialog
+    v-model="modelValue"
+    maximized
+    transition-show="slide-up"
+    transition-hide="slide-down"
+    position="bottom"
+    >
+    <q-card
+      class="fix-card-width flex column no-scroll no-wrap q-px-none"
+      style="
+        border-top-left-radius: var(--top-radius) !important;
+        border-top-right-radius: var(--top-radius) !important;
+      "
+      >
+        <div
+          ref="cardHeaderRef"
+          class="flex items-center no-wrap justify-between w100 q-my-none q-pa-md"
+          >
+          <div class="text-h6 q-mx-xs ellipsis">{{ $t(title) }}</div>
+          <div class="flex items-center justify-between no-wrap">
+            <slot name="btnSlot">
+              <q-btn
+                icon="mdi-close"
+                @click="modelValue=false"
+                flat round
+              />
+            </slot>
+          </div>
+        </div>
+        <div 
+          ref="cardBodyRef"
+          class="q-px-none q-ma-none"
+          >
+          <pn-shadow-scroll
+            :hideShadows="false"
+            :height="bodyHeight"
+            >
+            <div ref="cardBodyInnerRef" class="q-px-md q-ma-none">
+              <q-resize-observer @resize="updateDimensions" />
+              <slot/>
+            </div>
+          </pn-shadow-scroll>
+        </div>
+        <div
+          ref="cardFooterRef"
+          class="q-pa-md"
+          >
+          <slot name="footer"/>
+        </div>
+    </q-card>
+  
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue'
+  import { useSlots } from 'vue'
+
+  const modelValue = defineModel<boolean>({
+    required: true
+  })
+
+  defineProps<{
+    title: string
+  }>()
+
+  const slots = useSlots()
+  const cardHeaderRef = ref<HTMLElement | null>(null)
+  const cardFooterRef = ref<HTMLElement | null>(null)
+  const cardBodyRef = ref<HTMLElement | null>(null)
+  const cardBodyInnerRef = ref<HTMLElement | null>(null)
+
+  const headerHeight = ref(0)
+  const footerHeight = ref(0)
+  const bodyInnerHeight = ref(0)
+  const bodyHeight = ref(0)
+
+  const updateDimensions = () => {
+    headerHeight.value = cardHeaderRef.value?.offsetHeight || 0
+    footerHeight.value = cardFooterRef.value?.offsetHeight || 0
+    bodyInnerHeight.value = cardBodyInnerRef.value?.offsetHeight || 0
+    const needScroll = headerHeight.value + footerHeight.value + bodyInnerHeight.value > window.innerHeight - 48
+    bodyHeight.value = needScroll
+      ? window.innerHeight - 48 - headerHeight.value - footerHeight.value
+      : bodyInnerHeight.value + 16
+  }
+
+  watch(() => slots.body?.(), updateDimensions, { flush: 'post' })
+
+</script>
+
+<style scoped>
+  .fix-card-width {
+    width: var(--body-width) !important;
+  }
+</style>