Modal Long Scroll

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

  const p = `<p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper,
        ex at blandit iaculis, nibh urna lacinia tellus, a auctor lorem libero a
        lectus. Nulla bibendum mollis sapien, nec euismod mi mattis cursus.
        Curabitur accumsan erat eu viverra fringilla. Interdum et malesuada fames
        ac ante ipsum primis in faucibus. Phasellus ut neque eu diam vehicula
        efficitur. Vivamus ultricies purus facilisis augue porttitor vestibulum a
        non neque. Nunc egestas risus elit, sed fringilla velit posuere et.
      </p>`

  const { open, close } = useModal({
    component: ModalLongScroll,
    attrs: {
      title: 'Hello World!',
      onConfirm: () => close(),
    },
    slots: {
      default: p + p + p + p + p + p + p + p + p + p + p + p,
    },
  })
  </script>

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

    <ModalsContainer />
  </template>

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

  defineProps<{
    title?: string
  }>()

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

  <template>
    <VueFinalModal
      content-transition="vfm-fade"
      overlay-transition="vfm-fade"
      content-class="absolute inset-0"
      @update:model-value="(val) => emit('update:modelValue', val)"
    >
      <div
        class="absolute inset-0 h-full overflow-auto"
        @click.self="() => emit('update:modelValue', false)"
      >
        <div class="flex flex-col max-w-xl my-12 mx-auto p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2">
          <h1 class="text-xl">
            {{ title }}
          </h1>
          <slot />
          <button class="mt-1 ml-auto px-2 border rounded-lg" @click="() => emit('confirm')">
            Confirm
          </button>
        </div>
      </div>
    </VueFinalModal>
  </template>