Окно подтверждения

Сфокусированный confirmation dialog с cancel и submit actions.

Установка

npx alixan-ui-nuxt add confirm-dialog

Использование

<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

Свойство	Тип	По умолчанию	Описание
data.title	string	-	Заголовок диалога.
data.description	string	-	Короткое пояснение под заголовком.
data.cancelLabel	string	-	Текст кнопки отмены.
data.submitLabel	string	-	Текст кнопки подтверждения.
data.submitColor	'default' \| 'primary' \| 'secondary' \| 'destructive'	'primary'	Цвет кнопки подтверждения.
data.onCancel	() => void	-	Callback, вызываемый перед закрытием через cancel.
data.onSubmit	() => unknown \| Promise<unknown>	-	Callback, вызываемый перед закрытием через submit.