simrsx-fe/app/components/pub/my-ui/confirmation/confirmation.vue

<script setup lang="ts">
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import { Button } from '~/components/pub/ui/button'

interface ConfirmationProps {
  open?: boolean
  title?: string
  message?: string
  confirmText?: string
  cancelText?: string
  variant?: 'default' | 'destructive' | 'warning'
  size?: 'sm' | 'md' | 'lg' | 'xl'
}

interface ConfirmationEmits {
  'update:open': [value: boolean]
  'confirm': []
  'cancel': []
}

const props = withDefaults(defineProps<ConfirmationProps>(), {
  open: false,
  title: 'Konfirmasi',
  message: 'Apakah Anda yakin ingin melanjutkan?',
  confirmText: 'Ya',
  cancelText: 'Batal',
  variant: 'default',
  size: 'md',
})

const emit = defineEmits<ConfirmationEmits>()

const isOpen = computed({
  get: () => props.open,
  set: (value) => emit('update:open', value),
})

const variantClasses = computed(() => {
  const variants = {
    default: {
      icon: 'i-lucide-help-circle',
      iconColor: 'text-blue-500',
      confirmVariant: 'default' as const,
    },
    destructive: {
      icon: 'i-lucide-alert-triangle',
      iconColor: 'text-red-500',
      confirmVariant: 'destructive' as const,
    },
    warning: {
      icon: 'i-lucide-alert-circle',
      iconColor: 'text-yellow-500',
      confirmVariant: 'default' as const,
    },
  }
  return variants[props.variant]
})

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

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

<template>
  <Dialog v-model:open="isOpen" :title="title" :size="size">
    <div class="space-y-4">
      <!-- Icon dan pesan -->
      <div class="flex items-center gap-3">
        <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
        <div class="flex-1">
          <p class="text-sm text-muted-foreground leading-relaxed">
            {{ message }}
          </p>
        </div>
      </div>

      <!-- Slot untuk konten custom -->
      <div v-if="$slots.default">
        <slot />
      </div>

      <!-- Footer buttons -->
      <div class="flex justify-end gap-3 pt-4">
        <Button variant="outline" @click="handleCancel">
          {{ cancelText }}
        </Button>
        <Button :variant="variantClasses.confirmVariant" @click="handleConfirm">
          {{ confirmText }}
        </Button>
      </div>
    </div>
  </Dialog>
</template>