Растау диалогы

Cancel және submit actions бар фокусталған confirmation dialog.

Орнату

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	-	Cancel арқылы жабылар алдында шақырылатын callback.
data.onSubmit	() => unknown \| Promise<unknown>	-	Submit арқылы жабылар алдында шақырылатын callback.