Digging deeper

Options

declare interface DialogOptions {
    message: MessageWithTitle;
    html: boolean;
    loader: boolean;
    reverse: boolean;
    backdropClose: boolean;
    okText: string;
    cancelText: string;
    type: ConfirmTypeEnum;
    clicksCount: number;
    animation: 'zoom' | 'bounce' | 'fade';
    customClass: {
        [k: string]: string;
    };
    verification: string;
    verificationHelp: string;
    promptHelp: string;
}

Animation

There are three options to choose from so you have some flexibility with how the dialog transitions into view.

   

<template>
  <UIExamplesButton @click="openDialog('zoom')">Zoom</UIExamplesButton>&nbsp;
  <UIExamplesButton @click="openDialog('fade')">Fade</UIExamplesButton>&nbsp;
  <UIExamplesButton @click="openDialog('bounce')">Bounce</UIExamplesButton>
</template>

<script setup>
  import {inject} from 'vue'
  import {injectionKey} from "../../../src/plugin/index.ts";

  defineOptions({
    name: "OptionsExampleAnimation"
  })

  const $dialog = inject(injectionKey)
  const openDialog = (animation) => $dialog.alert({
    title: 'Alert example',
    body: 'Session expired. Please login again to continue.',
  }, {
    okText: 'Dismiss',
    animation,
    backdropClose: true,
  })
</script>

Loader

You may use the loader option to indicate that an asynchronous task is being performed after the user decides to proceed.

<template>
  <UIExamplesButton @click="openDialog()">Show dialog</UIExamplesButton>
</template>

<script setup>
  import {inject} from 'vue'
  import {injectionKey} from "../../../src/plugin/index.ts";

  defineOptions({
    name: "OptionsExampleLoader"
  })

  const $dialog = inject(injectionKey)
  const openDialog = () => $dialog.confirm({
    title: 'Confirmation!',
    body: 'Delete is permanent. Do you wish to proceed?',
  }, {
    okText: 'Delete',
    loader: true,
  }).then(({ canceled, close }) => {
    if (canceled) return
    setTimeout(close, 2000)
  })
</script>

Custom component

// Todo