87 lines
1.6 KiB
Vue
87 lines
1.6 KiB
Vue
<template>
|
|
<div id="confirm-dialog-overlay" :class="{opened: data !== null}">
|
|
<div v-if="data !== null" id="confirm-dialog">
|
|
<div class="confirm-text">
|
|
<div class="confirm-text-title">{{ data.title }}</div>
|
|
<p>{{ data.text }}</p>
|
|
</div>
|
|
<div class="confirm-buttons">
|
|
<button class="btn btn-cancel" @click="close(false)">Cancel</button>
|
|
<button class="btn btn-danger" @click="close(true)">{{ data.button }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
#confirm-dialog {
|
|
background: var(--body-bg-color);
|
|
color: #fff;
|
|
margin: 10px;
|
|
border-radius: 5px;
|
|
max-width: 500px;
|
|
}
|
|
|
|
#confirm-dialog .confirm-text {
|
|
padding: 15px;
|
|
user-select: text;
|
|
}
|
|
|
|
#confirm-dialog .confirm-text-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#confirm-dialog .confirm-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 15px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
#confirm-dialog .confirm-buttons .btn {
|
|
margin-bottom: 0;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#confirm-dialog .confirm-buttons .btn-cancel {
|
|
border-color: transparent;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import eventbus from "../js/eventbus";
|
|
|
|
export default {
|
|
name: "ConfirmDialog",
|
|
data() {
|
|
return {
|
|
data: null,
|
|
callback: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
eventbus.on("escapekey", this.close);
|
|
eventbus.on("confirm-dialog", this.open);
|
|
},
|
|
destroyed() {
|
|
eventbus.off("escapekey", this.close);
|
|
eventbus.off("confirm-dialog", this.open);
|
|
},
|
|
methods: {
|
|
open(data, callback) {
|
|
this.data = data;
|
|
this.callback = callback;
|
|
},
|
|
close(result) {
|
|
this.data = null;
|
|
|
|
if (this.callback) {
|
|
this.callback(!!result);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|