Modal Confirm

  <script setup lang="ts">
  const show = ref(false)

  function confirm() {
    show.value = false
  }
  </script>

  <template>
    <VButton @click="show = true">
      Open Modal
    </VButton>

    <ModalConfirm
      v-model="show"
      title="Hello World!"
      @confirm="() => confirm()"
    >
      <p>The content of the modal</p>
    </ModalConfirm>
  </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
      class="flex justify-center items-center"
      content-class="flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2"
      @update:model-value="val => emit('update:modelValue', val)"
    >
      <h1 class="text-xl">
        {{ title }}
      </h1>
      <slot />
      <button class="mt-1 ml-auto px-2 border rounded-lg" @click="emit('confirm')">
        Confirm
      </button>
    </VueFinalModal>
  </template>