Yusron alamsyah
98 lines
2.1 KiB
Vue
98 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
type ConfirmDialogMode = {
|
|
modelValue: boolean;
|
|
title?: string;
|
|
message?: string;
|
|
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
|
|
confirmColor?: string;
|
|
cancelColor?: string;
|
|
|
|
persistent?: boolean;
|
|
maxWidth?: number | string;
|
|
|
|
loading?: boolean;
|
|
|
|
// Kalau true: klik "Ya" langsung tutup.
|
|
// Kalau false: parent yang nutup (cocok untuk async delete/update).
|
|
closeOnConfirm?: boolean;
|
|
};
|
|
|
|
const props = withDefaults(defineProps<ConfirmDialogMode>(), {
|
|
title: 'Konfirmasi',
|
|
message: 'Apakah Anda yakin?',
|
|
confirmText: 'Ya',
|
|
cancelText: 'Tidak',
|
|
confirmColor: 'success',
|
|
cancelColor: 'error',
|
|
persistent: true,
|
|
maxWidth: 500,
|
|
loading: false,
|
|
closeOnConfirm: true,
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: boolean): void;
|
|
(e: 'confirm'): void;
|
|
(e: 'cancel'): void;
|
|
}>();
|
|
|
|
const close = () => emit('update:modelValue', false);
|
|
|
|
const onCancel = () => {
|
|
emit('cancel');
|
|
close();
|
|
};
|
|
|
|
const onConfirm = () => {
|
|
emit('confirm');
|
|
if (props.closeOnConfirm) close();
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<v-dialog
|
|
location="top"
|
|
transition="dialog-top-transition"
|
|
:model-value="props.modelValue"
|
|
@update:model-value="emit('update:modelValue', $event)"
|
|
:persistent="props.persistent"
|
|
:max-width="props.maxWidth"
|
|
>
|
|
<v-card class="pa-6">
|
|
<v-card-title class="text-h5">
|
|
<slot name="title">{{ props.title }}</slot>
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<slot>{{ props.message }}</slot>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
:color="props.cancelColor"
|
|
variant="tonal"
|
|
flat
|
|
:disabled="props.loading"
|
|
@click="onCancel"
|
|
>
|
|
{{ props.cancelText }}
|
|
</v-btn>
|
|
|
|
<v-btn
|
|
:color="props.confirmColor"
|
|
variant="tonal"
|
|
flat
|
|
:loading="props.loading"
|
|
:disabled="props.loading"
|
|
@click="onConfirm"
|
|
>
|
|
{{ props.confirmText }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template> |