classcard-ui 0.2.1510 → 0.2.1512

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.1510",
+  "version": "0.2.1512",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CIconDropdown/CIconDropdown.vue

@@ -50,7 +50,8 @@
             @mouseleave="showTooltipIndex = null"
           >
             <a
-              @mousedown.stop.prevent="dropdownAction(item)"
+              @mousedown.prevent
+              @click.stop="dropdownAction(item, index)"
               class="flex cursor-pointer justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 disabled:pointer-events-none disabled:opacity-50"
               :class="[
                 item.class,
@@ -96,7 +97,9 @@
               <slot v-if="item.name" :name="item.name"></slot>
             </a>
             <c-tooltip
-              v-if="item.tooltip && item.tooltip.text && showTooltipIndex === index"
+              v-if="
+                item.tooltip && item.tooltip.text && showTooltipIndex === index
+              "
               :tooltipText="item.tooltip.text"
               :isTopAligned="true"
               :classes="item.tooltip.classes"
@@ -114,10 +117,12 @@
 import { getActionID } from "../../helper";
 import CIcon from "../CIcon/CIcon.vue";
 import CTooltip from "../CToolTip/CToolTip.vue";
-
 export default {
   name: "CIconDropdown",
-  components: { CIcon, CTooltip },
+  components: {
+    CIcon,
+    CTooltip,
+  },
   props: {
     id: {
       type: String,
@@ -164,6 +169,7 @@ export default {
     return {
       toggleDropdown: false,
       showTooltipIndex: null,
+      pendingCloseIndex: null,
     };
   },
   methods: {
@@ -192,12 +198,35 @@ export default {
         }
       }
     },
-    dropdownAction(item) {
+    dropdownAction(item, index) {
       this.$emit("action", item);
-      this.close();
+
+      this.$nextTick(() => {
+        const currentItem = this.items[index];
+        if (currentItem && currentItem.isLoading) {
+          this.pendingCloseIndex = index;
+          return;
+        }
+        this.close();
+      });
     },
     close() {
       this.toggleDropdown = false;
+      this.pendingCloseIndex = null;
+    },
+  },
+  watch: {
+    items: {
+      // Once the items are updated, check if the pending close index is not null and the item is not loading, if so, close the dropdown
+      handler(newItems) {
+        if (this.pendingCloseIndex === null) return;
+        const item = newItems[this.pendingCloseIndex];
+        if (!item || !item.isLoading) {
+          this.pendingCloseIndex = null;
+          this.close();
+        }
+      },
+      deep: true,
     },
   },
 };

package/src/icons.js

@@ -867,4 +867,8 @@ export default {
     "M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z",
   "arrow-right-solid-v2":
     "M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z",
+  "panel-right-open-outline-v2":
+    "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z M15 3v18 M10 15l-3-3 3-3", //lucid icon
+  "panel-left-open-outline-v2":
+    "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z M9 3v18 M14 9l3 3-3 3", //lucid icon
 };