Confirm Dialog

A focused confirmation dialog with cancel and submit actions.

Installation

npx alixan-ui-nuxt add confirm-dialog

Usage

<script setup lang="ts">
import ConfirmDialog from '~/components/ui/confirm-dialog/ConfirmDialog.vue'

const dialog = useDialog()

const openConfirm = () => {
  dialog.open(ConfirmDialog, {
    width: '360px',
    height: '240px',
    data: {
      title: 'confirmDialogPreview.title',
      description: 'confirmDialogPreview.description',
      cancelLabel: 'actions.cancel',
      submitLabel: 'confirmDialogPreview.delete',
      submitColor: 'destructive',
      onSubmit: () => console.log('confirmed'),
    },
  })
}
</script>

<template>
  <Button color="destructive" @click="openConfirm">
    {{ $t('confirmDialogPreview.delete') }}
  </Button>
</template>

API Reference

Prop	Type	Default	Description
data.title	string	-	Dialog title.
data.description	string	-	Short explanation shown under the title.
data.cancelLabel	string	-	Cancel action label.
data.submitLabel	string	-	Submit action label.
data.submitColor	'default' \| 'primary' \| 'secondary' \| 'destructive'	'primary'	Submit action button color.
data.onCancel	() => void	-	Callback called before closing from cancel.
data.onSubmit	() => unknown \| Promise<unknown>	-	Callback called before closing from submit.