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,