Modal Drag Resize

  <script setup lang="ts">
  import { ModalsContainer, useModal } from 'vue-final-modal'

  const { open, destroy } = useModal({
    keepAlive: true,
    component: defineAsyncComponent(() => import('./ModalDragResize.vue')),
  })

  onBeforeUnmount(() => {
    destroy()
  })
  </script>

  <template>
    <VButton @click="() => open()">
      Open Modal
    </VButton>

    <ModalsContainer />
  </template>

  <script setup lang="ts">
  import { VueFinalModal } from 'vue-final-modal'
  import VueDragResize from 'vue3-drag-resize'

  const emit = defineEmits<{
    (e: 'update:modelValue', modelValue: boolean): void
  }>()

  const width = ref(0)
  const height = ref(0)
  const top = ref(0)
  const left = ref(0)

  function dragResize(newRect) {
    width.value = newRect.width
    height.value = newRect.height
    top.value = newRect.top
    left.value = newRect.left
  }
  </script>

  <template>
    <VueFinalModal
      display-directive="show"
      background="interactive"
      content-transition="vfm-fade"
      :hide-overlay="true"
      @update:model-value="val => emit('update:modelValue', val)"
    >
      <!-- in case you use Nuxt, make sure to wrap with `<ClientOnly>` -->
      <!-- in case you don't use Nuxt, you don't need `<ClientOnly>` -->
      <ClientOnly>
        <VueDragResize
          :is-active="true"
          :w="200"
          :h="200"
          class="bg-primary-100 dark:bg-gray-800"
          @resizing="dragResize"
          @dragging="dragResize"
        >
          <h3>Hello World!</h3>
          <p>{{ top }} х {{ left }} </p>
          <p>{{ width }} х {{ height }}</p>
          <button class="absolute top-0 right-0 mt-2 mr-2 px-2 border rounded-md " @pointerup="emit('update:modelValue', false)">
            X
          </button>
        </VueDragResize>
      </ClientOnly>
    </VueFinalModal>
  </template>