ZvDialogPromise ​

<template>
  <ZvDialogPromise
    identifier="basic-promise-dialog"
    title="Basic Dialog"
    :data="{
      cancelText: 'Cancel Custom Text',
      confirmText: 'Next',
    }"
  >
    Basic Promise Dialog
  </ZvDialogPromise>

  <ZvDialogPromise identifier="advanced-promise-dialog" :buttons="buttons" :data="data" />

  <ZvButton @click="openDialog"> Open Promise Dialog </ZvButton>
</template>

<script lang="ts" setup>
  import { ZvButton } from '@zadigetvoltaire/ui/components'
  import ZvDialogPromise, {
    useZvDialogPromise,
    type DialogButton,
    type DialogData,
  } from '@zadigetvoltaire/ui/components/ZvDialogPromise.vue'

  const { showDialogAndWaitForChoice } = useZvDialogPromise()

  const buttons: DialogButton[] = [
    {
      color: 'black',
      response: 'cancel',
      type: 'reject',
      text: 'Cancel',
    },
    {
      color: 'black',
      response: 'next',
      type: 'resolve',
      text: 'Confirm',
    },
  ]

  const data = ref<DialogData>({
    title: 'Advanced Promise Dialog',
    message: 'Advanced Promise Dialog Content',
  })

  async function openDialog() {
    try {
      const basicResponse = await showDialogAndWaitForChoice('basic-promise-dialog')
      console.log('basicResponse', basicResponse)
      const advancedResponse = await showDialogAndWaitForChoice('advanced-promise-dialog')
      console.log('advancedResponse', advancedResponse)
    } catch (error) {
      console.log('error', error)
    }
  }
</script>