dialog

Displays messages to your users in flexible and promised dialogs

It is a simple and easy-to-use plugin that allows you to display messages to your users in flexible and promised dialogs. The plugin will mount the MazDialogConfirm component to the root of your application and provide you with a handler to open the dialog, close it and return a promise.

TIP

This plugin has a composable for easier use, after installing it you can use useDialog

Installation

Vue

import { createApp } from 'vue'
import { DialogPlugin, DialogOptions } from 'maz-ui/plugins/dialog'

const app = createApp(App)

const dialogOptions: DialogOptions = {
  // ...
}

app.use(DialogPlugin, dialogOptions)

app.mount('#app')

Nuxt

export default defineNuxtConfig({
  modules: ['@maz-ui/nuxt'],
  mazUi: {
    composables: {
      useDialog: true,
    },
  },
})

Basic usage

You can display a simple dialog with a title and a message. The dialog will have a confirm and a cancel button. The confirm button will resolve the promise and the cancel button will reject it.

<script lang="ts" setup>
import { useDialog, useToast } from 'maz-ui/composables'

const dialog = useDialog()
const toast = useToast()

async function openDialog() {
  dialog.open({
    title: 'Dialog title',
    message: 'Dialog message',
    acceptText: 'Accept',
    rejectText: 'Reject',
    onAccept: (response) => {
      toast.success(`Dialog accepted`, {
        position: 'bottom',
      })
    },
    onReject: (response) => {
      toast.error(`Dialog rejected`, {
        position: 'bottom',
      })
    },
  })
}
</script>

<template>
  <MazBtn color="contrast" @click="openDialog">
    Show dialog
  </MazBtn>
</template>

Custom buttons with on click actions

The buttons property allows you to display custom buttons in the dialog and replace the default confirm and cancel buttons. You can use all props of MazBtn component. Each button can have a custom action to execute when clicked.

<script lang="ts" setup>
import { useDialog, useToast } from 'maz-ui/composables'

const dialog = useDialog()
const toast = useToast()

function openDialogActions() {
  dialog.open({
    title: 'Dialog title',
    message: 'Dialog message',
    buttons: [
      {
        text: 'Cancel 😱',
        color: 'contrast',
        outlined: true,
        onClick: () => {
          toast.info('Cancel button clicked', {
            position: 'bottom',
          })
        },
      },
      {
        text: 'Confirm 🚀',
        color: 'contrast',
        onClick: () => {
          toast.success('Confirm button clicked', {
            position: 'bottom',
          })
        },
      }
    ],
  })
}
</script>

<template>
  <MazBtn color="contrast" @click="openDialogActions">
    Show dialog with custom buttons
  </MazBtn>
</template>

Custom response

The buttons property allows you to display custom buttons in the dialog and replace the default confirm and cancel buttons. Each button can have a custom response to return when clicked. The type property allows you to define the type of the button. The response property allows you to define the response of the promise when the button is clicked.

<script lang="ts" setup>
import { useDialog, useToast } from 'maz-ui/composables'

const dialog = useDialog()
const toast = useToast()

async function openDialogResponse() {
  const { promise } = dialog.open({
    title: 'Dialog title',
    message: 'Dialog message',
    buttons: [
      {
        text: 'Reject',
        type: 'reject',
        response: 'Rejected Response',
        color: 'destructive',
      },
      {
        text: 'Accept',
        type: 'resolve',
        response: 'Accepted Response',
        color: 'secondary',
      }
    ],
    onAccept: (response) => {
      toast.success(`Dialog accepted with: ${response}`, {
        position: 'bottom',
      })
    },
    onReject: (response) => {
      toast.error(`Dialog rejected with: ${response}`, {
        position: 'bottom',
      })
    },
  })
}
</script>

<template>
  <MazBtn color="contrast" @click="openDialogResponse">
    Show dialog with custom response
  </MazBtn>
</template>

Close dialog

You can close the dialog programmatically by calling the close method returned by the open method.

<script lang="ts" setup>
import { useDialog, useToast } from 'maz-ui/composables'

const dialog = useDialog()

function openAndCloseDialog() {
  const { close } = dialog.open({
    title: 'Dialog title',
    message: 'Wait 5 seconds to close the dialog',
    buttons: [],
    persistent: true,
  })

  setTimeout(() => {
    close()
  }, 5000)
}
</script>

<template>
  <MazBtn color="contrast" @click="openAndCloseDialog">
    Open and close dialog
  </MazBtn>
</template>

Options

Usage

import { useDialog } from 'maz-ui/composables/useDialog'

const dialog = useDialog()

const options: DialogOptions = {
  title: 'Dialog title',
  message: 'Dialog message',
}

dialog.open(options)

Type

import type { MazBtnProps } from 'maz-ui/components/MazBtn'

type DialogOptions = Partial<Omit<MazDialogConfirmProps, 'modelValue'>> & {
  /**
   * Dialog identifier - identifier to manage multiple dialogs
   * @default 'main-dialog'
   */
  identifier?: string
  /**
   * Custom buttons to display in the dialog and replace the default confirm and cancel buttons
   * @default [{ text: 'Confirm', color: 'success', type: 'accept' }, { text: 'Cancel', color: 'destructive', type: 'reject' }]
   */
  buttons?: MazDialogConfirmButton[]
  /**
   * Function to execute when the dialog is accepted (when the user click on the confirm button)
   * Only available if the button type is 'accept'
   */
  onAccept?: () => unknown
  /**
   * Function to execute when the dialog is rejected (when the user click on the cancel button)
   * Only available if the button type is 'reject'
   */
  onReject?: () => unknown
  /**
   * Function to execute when the dialog is closed
   */
  onClose?: () => unknown
}