before liquid glass

src/components/pnBottomSheetDialog.vue

@@ -11,6 +11,7 @@
       style="
         border-top-left-radius: var(--top-radius) !important;
         border-top-right-radius: var(--top-radius) !important;
+        max-height: calc(100vh - 48px);
       "
       >
         <div
@@ -22,7 +23,7 @@
             <slot name="btnSlot">
               <q-btn
                 icon="mdi-close"
-                @click="modelValue=false"
+                @click="modelValue = false"
                 flat round
               />
             </slot>
@@ -36,17 +37,20 @@
             :hideShadows="false"
             :height="bodyHeight"
             >
-            <div ref="cardBodyInnerRef" class="q-px-md q-ma-none">
+            <div ref="cardBodyInnerRef" class="q-pa-none q-ma-none">
               <q-resize-observer @resize="updateDimensions" />
               <slot/>
             </div>
           </pn-shadow-scroll>
         </div>
         <div
-          ref="cardFooterRef"
-          class="q-pa-md"
+          style="overflow: hidden"
+          :style="{ height: footerHeight + 'px'}"
           >
-          <slot name="footer"/>
+          <div ref="cardFooterInnerRef" class="q-pa-md">
+            <q-resize-observer @resize="updateDimensions" />
+            <slot name="footer"/>
+          </div>
         </div>
     </q-card>
   
@@ -54,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue'
+  import { ref, watch, nextTick } from 'vue'
   import { useSlots } from 'vue'
 
   const modelValue = defineModel<boolean>({
@@ -67,8 +71,7 @@
 
   const slots = useSlots()
   const cardHeaderRef = ref<HTMLElement | null>(null)
-  const cardFooterRef = ref<HTMLElement | null>(null)
-  const cardBodyRef = ref<HTMLElement | null>(null)
+  const cardFooterInnerRef = ref<HTMLElement | null>(null)
   const cardBodyInnerRef = ref<HTMLElement | null>(null)
 
   const headerHeight = ref(0)
@@ -76,17 +79,20 @@
   const bodyInnerHeight = ref(0)
   const bodyHeight = ref(0)
 
-  const updateDimensions = () => {
+  const updateDimensions = async () => {
+    await nextTick(() => {
     headerHeight.value = cardHeaderRef.value?.offsetHeight || 0
-    footerHeight.value = cardFooterRef.value?.offsetHeight || 0
+    footerHeight.value = cardFooterInnerRef.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' })
+  watch(modelValue, updateDimensions)
 
 </script>