Newer
Older
gnexus-tasks / frontend / src / components / ConfirmDialog.vue
<script setup lang="ts">
// Диалог подтверждения поверх GnConfirmDialog кита. У кита порядок кнопок
// зашит («Отмена» слева), вариант и иконка кнопки подтверждения не настраиваются
// — собираем на публичных GnModal + GnButton: подтверждение первым, у кнопки
// опциональная иконка. Поведение то же: confirm/cancel закрывают диалог.
const props = defineProps<{
  open: boolean
  title: string
  message?: string
  confirmText: string
  cancelText: string
  /** Вариант кнопки подтверждения (warning/danger/...) */
  confirmVariant?: string
  /** Иконка на кнопке подтверждения (например ph-trash) */
  confirmIcon?: string
}>()

const emit = defineEmits<{
  'update:open': [value: boolean]
  confirm: []
  cancel: []
}>()

function confirm() {
  emit('confirm')
  emit('update:open', false)
}

function cancel() {
  emit('cancel')
  emit('update:open', false)
}
</script>

<template>
  <GnModal :open="props.open" :title="props.title" @update:open="emit('update:open', $event)">
    <slot>
      <p v-if="props.message">{{ props.message }}</p>
    </slot>
    <template #actions>
      <GnButton :variant="props.confirmVariant ?? 'primary'" :icon="props.confirmIcon" @click="confirm">
        {{ props.confirmText }}
      </GnButton>
      <GnButton variant="primary" @click="cancel">{{ props.cancelText }}</GnButton>
    </template>
  </GnModal>
</template>