MazDialogConfirm

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

Before use it, you should install the MazUi plugin 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

<script setup>
import MazDialogConfirm, { useMazDialogConfirm } from 'maz-ui/components/MazDialogConfirm'
import MazDialog from 'maz-ui/components/MazDialog'

import { ref } from 'vue'

const confirmDialog = ref(false)

const { showDialogAndWaitChoice, data } = useMazDialogConfirm()

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

const buttons: DialogCustomButton[] = [
  {
    text: 'Cancel',
    type: 'reject',
    color: 'destructive',
    outlined: true,
    response: 'cancel',
    size: 'sm',
  },
  {
    text: 'Delete!',
    type: 'resolve',
    color: 'success',
    response: 'delete',
    size: 'lg',
  },
]

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

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

  <MazDialogConfirm
    :data="dataPromiseOne"
    identifier="one"
  />

  <MazDialogConfirm 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>
  </MazDialogConfirm>

  <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>

Types

interface MazDialogConfirmData {
  /**
   * Dialog title
   */
  title?: string
  /**
   * Dialog message
   */
  message?: string
  /**
   * Dialog custom buttons
   * @default [{ text: 'Confirm', color: 'success', type: 'accept' }, { text: 'Cancel', color: 'destructive', type: 'reject' }]
   * @type {MazDialogConfirmButton[]}
   */
  buttons?: MazDialogConfirmButton[]
}

// All props of MazBtn
interface MazDialogConfirmButton {
  text?: string
  block?: boolean
  color?: Color
  disabled?: boolean
  loading?: boolean
  outlined?: boolean
  rounded?: boolean
  size?: Size
  text: string
  type: 'accept' | 'reject'
  response?: unknown
}

type Color = 'primary'
    | 'secondary'
    | 'info'
    | 'success'
    | 'warning'
    | 'destructive'
    | 'accent'
    | 'contrast'
    | 'transparent'

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

Props

Name	Description	Type	Required	Default	Possible values
identifier	Uniq identifier of the dialog - This is used to identify the dialog in the state	string	Yes	-	-
title	Dialog title displayed in the header Title of the modal in header	string	No	-	-
message	Dialog message displayed in the body	string	No	-	-
reject-text	Text for the reject button - will be applied only if buttons props is not provided	string	No	-	-
reject-props	Props for the reject button - will be applied only if buttons props is not provided	(Omit<MazBtnProps, "type"> & MazDialogConfirmButton)	No	{ color: 'destructive', type: 'reject', text: 'Cancel', response: 'reject' }	-
hide-reject-button	Hide the reject button (unset: the value of useMazDialogConfirm().data, else shown)	boolean	No	false	-
accept-text	Text for the accept button	string	No	-	-
accept-props	Props for the accept button - will be applied only if buttons props is not provided	(Omit<MazBtnProps, "type"> & MazDialogConfirmButton)	No	{ color: 'success', type: 'accept', text: 'Confirm', response: 'accept' }	-
hide-accept-button	Hide the accept button (unset: the value of useMazDialogConfirm().data, else shown)	boolean	No	false	-
buttons	Buttons to display in the footer	MazDialogConfirmButton[]	No	-	-
model-value	Modal's model value	boolean	No	-	-
hide-close-button	Remove the close button in header	boolean	No	-	-
max-width	Modal's max-width.	string	No	Theme preset components.dialog.max-widthviavar(--maz-dialog-max-width, 38rem)``	-
min-width	Modal's min-width.	string	No	Theme preset components.dialog.min-widthviavar(--maz-dialog-min-width, 32rem)``	-
scrollable	Modal's content becomes scrollable - warning: a overflow is applied	boolean	No	-	-
persistent	Persistent dialog (not closable by clicking outside and remove close button)	boolean	No	-	-
teleport-selector	Teleport selector	string	No	-	-
before-close	Function called before modal is close	(() => void | Promise<void>)	No	-	-
close-on-escape	Prevent close on escape key	boolean	No	true	-
transition-name	Transition name	string	No	-	-
backdrop-class	Backdrop class	ClassValue	No	-	-
backdrop-content-class	Backdrop content class	ClassValue	No	-	-
content-padding	Add padding to the content	boolean	No	-	-
justify	Justify content	"none" | "center" | "end" | "start" | "space-between" | "space-around"	No	-	'none' | 'center' | 'end' | 'start' | 'space-between' | 'space-around'
align	Align content	"none" | "center" | "end" | "start"	No	-	'none' | 'center' | 'end' | 'start'
variant	Variant	"bottom-sheet" | "dialog" | "drawer"	No	-	'bottom-sheet' | 'dialog' | 'drawer'
aria-labelledby	ID for aria-labelledby	string	No	-	-
aria-describedby	ID for aria-describedby	string	No	-	-

Events

Event name	Payload	Description
open	value?: void | undefined	Emitted when modal is open
close	value?: void | undefined	Emitted when modal is close

Slots

Name	Description	Bindings
title	title slot - Place your title	-
default	Default slot - Place your content	accept (reason?: unknown) => Promise<unknown> - accept function reject (reason?: unknown) => Promise<unknown> - reject function
footer-button	Footer slot	accept (reason?: unknown) => Promise<unknown> - accept function reject (reason?: unknown) => Promise<unknown> - reject function

Expose

close

Close the dialog

isActive

Check if the dialog is active