pleroma-fe

commit: 0684f19d1b903a7d941aa7cfa366044b98d97659
parent a0b886459bf5e146b8b7654d97ba8838bfac29de
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Wed,  9 Feb 2022 15:50:25 -0500

Add ConfirmModal comp

Diffstat:
A
src/components/confirm_modal/confirm_modal.js
42
++++++++++++++++++++++++++++++++++++++++++
A
src/components/confirm_modal/confirm_modal.vue
28
++++++++++++++++++++++++++++

2 files changed, 70 insertions(+), 0 deletions(-)
diff --git a/src/components/confirm_modal/confirm_modal.js 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
@@ -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>