<template>
  <ModalTarget />
</template>

<script setup lang="ts">
import { closeModal, confirmModal } from '@kolirt/vue-modal'

const props = defineProps({
  test: {}
})
</script>

<template>
  <SimpleModal title="Test modal" size="sm">
    <pre>props: {{ props }}</pre>

    <template #footer>
      <button @click="confirmModal({ value: 'some values' })" class="btn btn-primary">Confirm</button>
      <button @click="closeModal()" class="btn btn-primary">Close</button>
    </template>
  </SimpleModal>
</template>

<script setup lang="ts">
import { openModal } from '@kolirt/vue-modal'
import { defineAsyncComponent } from 'vue'

import TestModal from '@/components/modals/TestModal.vue'

function runModal() {
  openModal(TestModal, {
    test: 'some props'
  })
    // runs when modal is closed via confirmModal
    .then((data) => {
      console.log('success', data)
    })
    // runs when modal is closed via closeModal or esc
    .catch(() => {
      console.log('catch')
    })
}

function runDynamicModal() {
  openModal(
    defineAsyncComponent(() => import('@/components/modals/TestModal.vue')),
    {
      test: 'some props'
    }
  )
    // runs when modal is closed via confirmModal
    .then((data) => {
      console.log('success', data)
    })
    // runs when modal is closed via closeModal or esc
    .catch(() => {
      console.log('catch')
    })
}
</script>

<template>
  <button @click="runModal">Open modal</button>
</template>