48 lines
1.8 KiB
Vue
48 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { Trash2 } from '@lucide/vue';
|
|
import { toRef } from 'vue';
|
|
import ConfirmDialog from '@/components/ConfirmDialog.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { useDestroy } from '@/composables/useDestroy';
|
|
|
|
const props = defineProps<{
|
|
actionUrl: string;
|
|
title?: string;
|
|
description?: string;
|
|
errorMessage?: string;
|
|
tooltip?: string;
|
|
tooltipClass?: string;
|
|
buttonClass?: string;
|
|
disabled?: boolean;
|
|
onSuccess?: () => void;
|
|
onError?: (errors: Record<string, string>) => string | void;
|
|
}>();
|
|
|
|
const { open, processing, destroy } = useDestroy({
|
|
url: toRef(props, 'actionUrl'),
|
|
errorMessage: props.errorMessage ?? 'Gagal menghapus data.',
|
|
onSuccess: props.onSuccess,
|
|
onError: props.onError,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Tooltip>
|
|
<TooltipTrigger as-child>
|
|
<span class="inline-flex">
|
|
<Button variant="ghost" size="icon" class="text-destructive hover:text-destructive size-8 delete-btn"
|
|
:class="buttonClass" :disabled="disabled" @click="!disabled && (open = true)">
|
|
<Trash2 class="size-4" />
|
|
<span class="sr-only">{{ tooltip || 'Hapus' }}</span>
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent :class="tooltipClass">{{ tooltip || 'Hapus' }}</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<ConfirmDialog v-model:open="open" :title="title || 'Hapus data?'"
|
|
:description="description || 'Data akan dihapus secara permanen. Tindakan ini tidak dapat dibatalkan.'"
|
|
confirm-label="Hapus" cancel-label="Batal" destructive :loading="processing" @confirm="destroy" />
|
|
</template>
|