munawwirul_jamal
baf6ab1fda
+ my-ui/confirmation/confirmation noTrueSlot from record-confirmation + my-ui/confirmation/confirmation additional message + my-ui/confirmation/record-confirmation supplies noTrueSlot + my-ui/modal/modal text size + my-ui/doc-entry semicolon export
104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
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
|
|
noTrueSlot?: boolean
|
|
skipClosingMessage?: boolean
|
|
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-start gap-3">
|
|
<div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-4 h-4 2xl:h-5 2xl:h-6 flex-shrink-0" />
|
|
<div class="flex-1">
|
|
{{ message }} {{ !noTrueSlot ? ' dengan informasi sebagai berikut:' : '.' }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slot untuk konten custom -->
|
|
<div>
|
|
<slot />
|
|
</div>
|
|
|
|
<div v-if="!skipClosingMessage" class="">
|
|
Lanjutkan Proses?
|
|
</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>
|