v11

src/components/pnFabDialog.vue

@@ -0,0 +1,64 @@
+<template>
+<!--   <div :style="{ visibility: !modelValue ? 'inherit' : 'hidden' }">
+    <slot name="btn"/>
+  </div> -->
+<!--   <div
+    :class="modelValue ? 'absolute' : ''"
+    :style="{ left: fabPosLeft + 'px', top: fabPosTop + 'px' }"
+    >
+    <slot name="btn"/>
+  </div> -->
+  <q-dialog v-model="modelValue" :transition-duration="0">
+    <div class="position-relative q-px-md">
+
+        <q-card
+          class="q-pa-none q-mx-md no-scroll rounded-card absolute"
+          :style="{ left: 0, top: fabPosTop - cardHeight - 16 + 'px' }"
+          align="center"
+          >
+
+          <q-resize-observer @resize="onCardResize"/>
+          <slot name="card"/>
+        </q-card>
+      <div
+        class="absolute bg-red"
+        :style="{ left: fabPosLeft + 100+ 'px', top: fabPosTop +100+ 'px', height: '100px', width: '100px' }"
+        id="fabDialog"
+        >
+        {{ fabPosLeft }} {{ fabPosTop }}
+      </div>
+    </div>
+
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const modelValue = defineModel<boolean>({
+    required: true
+  })
+  
+  withDefaults(defineProps<{
+      fabPosLeft?: number
+      fabPosTop?: number
+    }>(), 
+    {
+      fabPosLeft: 0,
+      fabPosTop: 0
+    }
+  )
+
+  interface sizeParams {
+    height: number,
+    width: number
+  }
+  
+  const cardHeight = ref(0)
+  function onCardResize (size: sizeParams) {
+    cardHeight.value = size.height
+  }
+</script>
+
+<style scoped>
+</style>