From 9288aa75f346bfd2d26bb7f09faeb3b3ebf04f3c Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:50:25 -0500
Subject: [PATCH] Add ConfirmModal comp
---
src/components/confirm_modal/confirm_modal.js | 42 +++++++++++++++++++
.../confirm_modal/confirm_modal.vue | 28 +++++++++++++
2 files changed, 70 insertions(+)
create mode 100644 src/components/confirm_modal/confirm_modal.js
create mode 100644 src/components/confirm_modal/confirm_modal.vue
diff --git a/src/components/confirm_modal/confirm_modal.js b/src/components/confirm_modal/confirm_modal.js
new file mode 100644
index 00000000..bb5e9d97
--- /dev/null
+++ b/src/components/confirm_modal/confirm_modal.js
@@ -0,0 +1,42 @@
+import DialogModal from '../dialog_modal/dialog_modal.vue'
+
+/**
+ * This component emits the following events:
+ * cancelled, emitted when the action should not be performed;
+ * accepted, emitted when the action should be performed;
+ *
+ * The caller should close this dialog after receiving any of the two events.
+ */
+const ConfirmModal = {
+ components: {
+ DialogModal
+ },
+ data: {
+ },
+ props: {
+ showing: {
+ type: Boolean
+ },
+ title: {
+ type: String
+ },
+ cancelText: {
+ type: String
+ },
+ confirmText: {
+ type: String
+ }
+ },
+ computed: {
+ },
+ methods: {
+ onCancel () {
+ this.$emit('cancelled')
+ },
+ onAccept () {
+ this.$emit('accepted')
+ }
+ }
+}
+
+export default ConfirmModal
diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
new file mode 100644
index 00000000..250a6984
--- /dev/null
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -0,0 +1,28 @@
+<template>
+ <dialog-modal
+ v-if="showing"
+ :onCancel="onCancel"
+ >
+ <template v-slot:header>
+ <span v-text="title"></span>
+ </template>
+
+ <slot></slot>
+
+ <template v-slot:footer>
+ <button
+ class="btn button-default"
+ v-text="confirmText"
+ @click.prevent="onAccept"
+ ></button>
+
+ <button
+ class="btn button-default"
+ v-text="cancelText"
+ @click.prevent="onCancel"
+ ></button>
+ </template>
+ </dialog-modal>
+</template>
+
+<script src="./confirm_modal.js"></script>