<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>
