42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import {computed} from "vue";
|
|
import {Modal} from "@/components";
|
|
import {useConfirmStore} from "./useConfirm";
|
|
|
|
const confirmStore = useConfirmStore();
|
|
|
|
const modalOpen = computed({
|
|
get: () => confirmStore.open,
|
|
set: value => {
|
|
if (!value) {
|
|
confirmStore.cancel();
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Modal v-model:open="modalOpen">
|
|
<div class="bg-slate-800 rounded pb-4 w-96">
|
|
<span class="m-2">{{ confirmStore.options.title ?? "Confirm" }}</span>
|
|
<hr />
|
|
<div class="m-4">{{ confirmStore.options.message }}</div>
|
|
<div class="flex justify-end">
|
|
<button class="me-2" @click="confirmStore.cancel">{{ confirmStore.options.cancelLabel ?? "Cancel" }}</button>
|
|
<button class="confirm me-4" :class="confirmStore.options.danger ? 'danger' : ''" @click="confirmStore.accept">{{ confirmStore.options.confirmLabel ?? "Confirm" }}</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "@/style.css";
|
|
|
|
button.confirm {
|
|
@apply border-emerald-500 bg-emerald-500 hover:bg-emerald-600;
|
|
|
|
&.danger {
|
|
@apply border-amber-900 bg-amber-900 hover:bg-amber-800;
|
|
}
|
|
}
|
|
</style> |