feat: confirm modal + chore(deps): bump

components/collections/collection.vue

@@ -46,7 +46,7 @@
               </button>
             </div>
             <div>
-              <button class="icon" @click="removeCollection" v-close-popover>
+              <button class="icon" @click="confirmRemove = true" v-close-popover>
                 <i class="material-icons">delete</i>
                 <span>{{ $t("delete") }}</span>
               </button>
@@ -103,6 +103,12 @@
         </li>
       </ul>
     </div>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_collection')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeCollection"
+    />
   </div>
 </template>
 
@@ -121,6 +127,7 @@ export default {
       showChildren: false,
       dragging: false,
       selectedFolder: {},
+      confirmRemove: false,
     }
   },
   methods: {
@@ -135,7 +142,6 @@ export default {
       this.showChildren = !this.showChildren
     },
     removeCollection() {
-      if (!confirm(this.$t("are_you_sure_remove_collection"))) return
       this.$store.commit("postwoman/removeCollection", {
         collectionIndex: this.collectionIndex,
       })

components/collections/folder.vue

@@ -43,7 +43,7 @@
             </button>
           </div>
           <div>
-            <button class="icon" @click="removeFolder" v-close-popover>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
               <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
             </button>
@@ -93,6 +93,12 @@
         </li>
       </ul>
     </div>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_folder')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeFolder"
+    />
   </div>
 </template>
 
@@ -113,6 +119,7 @@ export default {
     return {
       showChildren: false,
       dragging: false,
+      confirmRemove: false,
     }
   },
   methods: {
@@ -127,7 +134,6 @@ export default {
       this.showChildren = !this.showChildren
     },
     removeFolder() {
-      if (!confirm(this.$t("are_you_sure_remove_folder"))) return
       this.$store.commit("postwoman/removeFolder", {
         collectionIndex: this.$props.collectionIndex,
         folderName: this.$props.folder.name,

components/collections/request.vue

@@ -1,53 +1,61 @@
 <template>
-  <div
-    :class="['row-wrapper', dragging ? 'drag-el' : '']"
-    draggable="true"
-    @dragstart="dragStart"
-    @dragover.stop
-    @dragleave="dragging = false"
-    @dragend="dragging = false"
-  >
-    <div>
-      <button
-        class="icon"
-        @click="!doc ? selectRequest() : {}"
-        v-tooltip="!doc ? $t('use_request') : ''"
-      >
-        <span :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
-        <span>{{ request.name }}</span>
-      </button>
+  <div>
+    <div
+      :class="['row-wrapper', dragging ? 'drag-el' : '']"
+      draggable="true"
+      @dragstart="dragStart"
+      @dragover.stop
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <div>
+        <button
+          class="icon"
+          @click="!doc ? selectRequest() : {}"
+          v-tooltip="!doc ? $t('use_request') : ''"
+        >
+          <span :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
+          <span>{{ request.name }}</span>
+        </button>
+      </div>
+      <v-popover>
+        <button class="tooltip-target icon" v-tooltip="$t('more')">
+          <i class="material-icons">more_vert</i>
+        </button>
+        <template slot="popover">
+          <div>
+            <button
+              class="icon"
+              @click="
+                $emit('edit-request', {
+                  collectionIndex,
+                  folderIndex,
+                  folderName,
+                  request,
+                  requestIndex,
+                })
+              "
+              v-close-popover
+            >
+              <i class="material-icons">edit</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </template>
+      </v-popover>
     </div>
-    <v-popover>
-      <button class="tooltip-target icon" v-tooltip="$t('more')">
-        <i class="material-icons">more_vert</i>
-      </button>
-      <template slot="popover">
-        <div>
-          <button
-            class="icon"
-            @click="
-              $emit('edit-request', {
-                collectionIndex,
-                folderIndex,
-                folderName,
-                request,
-                requestIndex,
-              })
-            "
-            v-close-popover
-          >
-            <i class="material-icons">edit</i>
-            <span>{{ $t("edit") }}</span>
-          </button>
-        </div>
-        <div>
-          <button class="icon" @click="removeRequest" v-close-popover>
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
-          </button>
-        </div>
-      </template>
-    </v-popover>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_request')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeRequest"
+    />
   </div>
 </template>
 
@@ -73,6 +81,7 @@ export default {
         delete: "text-red-400",
         default: "text-gray-400",
       },
+      confirmRemove: false,
     }
   },
   methods: {
@@ -94,7 +103,6 @@ export default {
       dataTransfer.setData("requestIndex", this.$props.requestIndex)
     },
     removeRequest() {
-      if (!confirm(this.$t("are_you_sure_remove_request"))) return
       this.$store.commit("postwoman/removeRequest", {
         collectionIndex: this.$props.collectionIndex,
         folderName: this.$props.folderName,

components/environments/environment.vue

@@ -1,30 +1,38 @@
 <template>
-  <div class="row-wrapper">
-    <div>
-      <button class="icon" @click="$emit('edit-environment')">
-        <i class="material-icons">layers</i>
-        <span>{{ environment.name }}</span>
-      </button>
+  <div>
+    <div class="row-wrapper">
+      <div>
+        <button class="icon" @click="$emit('edit-environment')">
+          <i class="material-icons">layers</i>
+          <span>{{ environment.name }}</span>
+        </button>
+      </div>
+      <v-popover>
+        <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+          <i class="material-icons">more_vert</i>
+        </button>
+        <template slot="popover">
+          <div>
+            <button class="icon" @click="$emit('edit-environment')" v-close-popover>
+              <i class="material-icons">create</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </template>
+      </v-popover>
     </div>
-    <v-popover>
-      <button class="tooltip-target icon" v-tooltip.left="$t('more')">
-        <i class="material-icons">more_vert</i>
-      </button>
-      <template slot="popover">
-        <div>
-          <button class="icon" @click="$emit('edit-environment')" v-close-popover>
-            <i class="material-icons">create</i>
-            <span>{{ $t("edit") }}</span>
-          </button>
-        </div>
-        <div>
-          <button class="icon" @click="removeEnvironment" v-close-popover>
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
-          </button>
-        </div>
-      </template>
-    </v-popover>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_environment')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeEnvironment"
+    />
   </div>
 </template>
 
@@ -36,6 +44,11 @@ export default {
     environment: Object,
     environmentIndex: Number,
   },
+  data() {
+    return {
+      confirmRemove: false,
+    }
+  },
   methods: {
     syncEnvironments() {
       if (fb.currentUser !== null) {
@@ -45,7 +58,6 @@ export default {
       }
     },
     removeEnvironment() {
-      if (!confirm(this.$t("are_you_sure_remove_environment"))) return
       this.$store.commit("postwoman/removeEnvironment", this.environmentIndex)
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",

components/ui/confirm-modal.vue

@@ -0,0 +1,71 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("confirm") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body" class="flex flex-col">
+      <label>{{ title }}</label>
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ no }}
+          </button>
+          <button class="icon primary" @click="resolve">
+            {{ yes }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+export default {
+  props: {
+    show: Boolean,
+    title: "",
+    yes: {
+      type: String,
+      default: function () {
+        return this.$t("yes")
+      },
+    },
+    no: {
+      type: String,
+      default: function () {
+        return this.$t("no")
+      },
+    },
+  },
+  async mounted() {
+    this._keyListener = function (e) {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        this.hideModal()
+      }
+    }
+    document.addEventListener("keydown", this._keyListener.bind(this))
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    resolve() {
+      this.$emit("resolve")
+    },
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener)
+  },
+}
+</script>

components/ui/modal.vue

@@ -19,6 +19,7 @@
     </div>
   </transition>
 </template>
+
 <style scoped lang="scss">
 .modal-backdrop {
   @apply fixed;