MazDialogPromise

MazDialogPromise is a standalone component that dialogs with the user to show important information and propose confirmation. You should wait for this response with await.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

INFO

This component uses MazDialog, so it inherits all its props

TIP

This component uses <Teleport to="body"> with MazBackdrop, so you can implement this component anywhere and it inherits all its props

Basic usage

<template>
  <MazBtn @click="askToUser">Ask user</MazBtn>

  <MazDialogPromise
    :data="dataPromiseOne"
    identifier="one"
  />
  <MazDialogPromise identifier="two" :buttons="buttons">
    <template #title>
      Do you really want to delete this user?
    </template>
    <template #default>
      Are you really sure you want to delete this user?
    </template>
  </MazDialogPromise>

  <MazDialog v-model="confirmDialog">
    <template #title>
      User deleted
    </template>
    <template #default>
      User has been deleted!
    </template>
    <template #footer="{ close }">
      <MazBtn @click="close">
        Ok
      </MazBtn>
    </template>
  </MazDialog>
</template>

<script setup>
  import { ref } from 'vue'

  import MazDialogPromise, {
    useMazDialogPromise, type DialogCustomButton, type DialogData
  } from 'maz-ui/components/MazDialogPromise'

  import MazDialog from 'maz-ui/components/MazDialog'

  const confirmDialog = ref(false)

  const { showDialogAndWaitChoice, data } = useMazDialogPromise()

  data.value = {
    title: 'Delete user',
    message: 'Are you sure you want to delete this user?',
  }

  const buttons: DialogCustomButton[] = [
    {
      text: 'Cancel',
      type: 'reject',
      color: 'danger',
      response: new Error('cancel'),
      size: 'sm',
    },
    {
      text: 'Delete!',
      type: 'resolve',
      color: 'success',
      response: 'delete',
      size: 'lg',
    },
  ]

  async function askToUser () {
    try {
      const responseOne = await showDialogAndWaitChoice('one')
      toast.success(responseOne, {
        position: 'top-right'
      })
      const responseTwo = await showDialogAndWaitChoice('two')
      toast.success(responseTwo, {
        position: 'top-right'
      })
      confirmDialog.value = true
    } catch (error) {
      toast.error(error.message ?? error, {
        position: 'top-right'
      })
    }
  }
</script>

Types

type DialogData = {
  /**
   * Dialog title
   */
  title?: string
  /**
   * Dialog message
   */
  message?: string
  /**
   * Dialog cancel text
   * @default 'Cancel'
   */
  cancelText?: string
  /**
   * Dialog cancel button
   */
  cancelButton?: false | DialogButton
  /**
   * Dialog confirm text
   * @default 'Confirm'
   */
  confirmText?: string
  /**
   * Dialog confirm button
   */
  confirmButton?: false | DialogButton
  /**
   * Dialog custom buttons
   */
  buttons?: DialogCustomButton[]
}

 type DialogButton = {
  text?: string
  block?: boolean
  color?: Color
  disabled?: boolean
  loading?: boolean
  outline?: boolean
  rounded?: boolean
  size?: Size
}

type DialogCustomButton = DialogButton & {
  text: string
  type: 'resolve' | 'reject'
  response?: unknown
}

type Color =
  | 'primary'
  | 'secondary'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'
  | 'white'
  | 'black'
  | 'transparent'

type Size = 'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'

Props & Slots

Props

Prop name	Description	Type	Values	Default
data	Dialog Data - @type DialogData	DialogData	-	undefined
identifier	Uniq identifier	string	-
buttons	Custom buttons - @type DialogCustomButton[]	Array	-	undefined

Slots

Name	Description	Bindings
title	title slot - Place your title
default	Default slot - Place your content	resolve Function - resolve function reject Function - reject function
footer-button	Footer slot	resolve Function - resolve function reject Function - reject function
cancel-text	cancel-text slot - Place your cancel text
confirm-text	confirm-text slot - Place your confirm text