hardlounge/client/components/ConfirmDialog.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>