wave-ui 1.65.2 → 1.66.0

package/dist/wave-ui.es.js

@@ -113,8 +113,8 @@ const _NotificationManager$1 = class {
     if (~~notification.timeout !== 0)
       setTimeout(() => this.dismiss(notification._uid), notification.timeout);
   }
-  dismiss(uid) {
-    this.notifications = this.notifications.filter((item) => item._uid !== uid);
+  dismiss(uid2) {
+    this.notifications = this.notifications.filter((item) => item._uid !== uid2);
   }
 };
 let NotificationManager$1 = _NotificationManager$1;
@@ -5493,10 +5493,13 @@ var render$g = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-tabs__content" }, [_vm._t("default")], 2);
+  return _c("div", { staticClass: "w-tabs__content" }, [_vm._t("default", null, { "item": _vm.item })], 2);
 };
 var staticRenderFns$g = [];
-const __vue2_script$g = {};
+const __vue2_script$g = {
+  name: "tab-content",
+  props: { item: Object }
+};
 const __cssModules$g = {};
 var __component__$g = /* @__PURE__ */ normalizeComponent(
   __vue2_script$g,
@@ -5520,25 +5523,33 @@ var render$f = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-tabs", class: _vm.tabsClasses }, [_c("div", { ref: "tabs-bar", staticClass: "w-tabs__bar", class: _vm.tabsBarClasses }, [_vm._l(_vm.tabsItems, function(item, i) {
-    return _c("div", { key: i, staticClass: "w-tabs__bar-item", class: _vm.barItemClasses(item), attrs: { "tabindex": !item._disabled && 0, "aria-selected": item._index === _vm.activeTabIndex ? "true" : "false", "role": "tab" }, on: { "click": function($event) {
-      !item._disabled && _vm.openTab(item);
+  return _c("div", { staticClass: "w-tabs", class: _vm.tabsClasses }, [_c("div", { ref: "tabs-bar", staticClass: "w-tabs__bar", class: _vm.tabsBarClasses }, [_vm._l(_vm.tabs, function(tab, i) {
+    return _c("div", { key: i, staticClass: "w-tabs__bar-item", class: _vm.barItemClasses(tab), attrs: { "tabindex": !tab._disabled && 0, "aria-selected": tab._uid === _vm.activeTabUid ? "true" : "false", "role": "tab" }, on: { "click": function($event) {
+      !tab._disabled && tab._uid !== _vm.activeTabUid && _vm.openTab(tab._uid);
     }, "focus": function($event) {
-      _vm.$emit("focus", _vm.getOriginalItem(item));
+      _vm.$emit("focus", _vm.getOriginalItem(tab));
     }, "keypress": function($event) {
       if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
         return null;
       }
-      !item._disabled && _vm.openTab(item);
-    } } }, [_vm.$scopedSlots["item-title." + (item.id || i + 1)] ? _vm._t("item-title." + (item.id || i + 1), null, { "item": _vm.getOriginalItem(item), "index": i + 1, "active": item._index === _vm.activeTabIndex }) : _vm._t("item-title", function() {
-      return [_c("div", { domProps: { "innerHTML": _vm._s(item[_vm.itemTitleKey]) } })];
-    }, { "item": _vm.getOriginalItem(item), "index": i + 1, "active": item._index === _vm.activeTabIndex })], 2);
-  }), _vm.$scopedSlots["tabs-bar-extra"] ? _c("div", { staticClass: "w-tabs__bar-extra" }, [_vm._t("tabs-bar-extra")], 2) : _vm._e(), !_vm.noSlider && !_vm.card ? _c("div", { staticClass: "w-tabs__slider", class: _vm.sliderColor, style: _vm.sliderStyles }) : _vm._e()], 2), _vm.tabsItems.length ? _c("div", { staticClass: "w-tabs__content-wrap" }, [_c("transition", { attrs: { "name": _vm.transitionName, "mode": _vm.transitionMode } }, [_c("keep-alive", [_c("tab-content", { key: _vm.activeTab._index, class: _vm.contentClass }, [_vm.$scopedSlots["item-content." + (_vm.activeTab.id || _vm.activeTab._index + 1)] ? _vm._t("item-content." + (_vm.activeTab.id || _vm.activeTab._index + 1), null, { "item": _vm.getOriginalItem(_vm.activeTab), "index": _vm.activeTab._index + 1, "active": _vm.activeTab._index === _vm.activeTabIndex }) : _vm._t("item-content", function() {
-    return [_c("div", { domProps: { "innerHTML": _vm._s(_vm.activeTab[_vm.itemContentKey]) } })];
-  }, { "item": _vm.getOriginalItem(_vm.activeTab), "index": _vm.activeTab._index + 1, "active": _vm.activeTab._index === _vm.activeTabIndex })], 2)], 1)], 1)], 1) : _vm._e()]);
+      !tab._disabled && _vm.openTab(tab._uid);
+    } } }, [_vm.$scopedSlots["item-title." + (tab.id || i + 1)] ? _vm._t("item-title." + (tab.id || i + 1), null, { "item": _vm.getOriginalItem(tab), "index": i + 1, "active": tab._uid === _vm.activeTabUid }) : _vm._t("item-title", function() {
+      return [_c("div", { domProps: { "innerHTML": _vm._s(tab[_vm.itemTitleKey]) } })];
+    }, { "item": _vm.getOriginalItem(tab), "index": i + 1, "active": tab._uid === _vm.activeTabUid })], 2);
+  }), _vm.$scopedSlots["tabs-bar-extra"] ? _c("div", { staticClass: "w-tabs__bar-extra" }, [_vm._t("tabs-bar-extra")], 2) : _vm._e(), !_vm.noSlider && !_vm.card ? _c("div", { staticClass: "w-tabs__slider", class: _vm.sliderColor, style: _vm.sliderStyles }) : _vm._e()], 2), _vm.tabs.length ? _c("div", { staticClass: "w-tabs__content-wrap" }, [_vm.keepInDom ? _c("transition-group", { attrs: { "name": _vm.transitionName } }, _vm._l(_vm.tabs, function(tab, i) {
+    return _c("tab-content", { directives: [{ name: "show", rawName: "v-show", value: tab._uid === _vm.activeTab._uid, expression: "tab._uid === activeTab._uid" }], key: tab._uid, class: _vm.contentClass, attrs: { "item": tab } }, [_vm.$scopedSlots["item-content." + (tab._index + 1)] ? _vm._t("item-content." + (tab._index + 1), null, { "item": _vm.getOriginalItem(tab), "index": tab._index + 1, "active": tab._index === _vm.activeTab._index }) : _vm._t("item-content", function() {
+      return [tab[_vm.itemContentKey] ? _c("div", { domProps: { "innerHTML": _vm._s(tab[_vm.itemContentKey]) } }) : _vm._e()];
+    }, { "item": _vm.getOriginalItem(tab), "index": tab._index + 1, "active": tab._index === _vm.activeTab._index })], 2);
+  }), 1) : _c("transition", { attrs: { "name": _vm.transitionName, "mode": _vm.transitionMode } }, [_c("keep-alive", { attrs: { "exclude": _vm.keepAlive ? "" : "tab-content" } }, [_c("tab-content", { key: _vm.activeTabUid, class: _vm.contentClass, attrs: { "item": _vm.activeTab }, scopedSlots: _vm._u([{ key: "default", fn: function(ref) {
+    var item = ref.item;
+    return [item ? [_vm.$scopedSlots["item-content." + (item._index + 1)] ? _vm._t("item-content." + (item._index + 1), null, { "item": _vm.getOriginalItem(item), "index": item._index + 1, "active": item._uid === _vm.activeTabUid }) : _vm._t("item-content", function() {
+      return [item[_vm.itemContentKey] ? _c("div", { domProps: { "innerHTML": _vm._s(item[_vm.itemContentKey]) } }) : _vm._e()];
+    }, { "item": _vm.getOriginalItem(item), "index": item._index + 1, "active": item._uid === _vm.activeTabUid })] : _vm._e()];
+  } }], null, true) })], 1)], 1)], 1) : _vm._e()]);
 };
 var staticRenderFns$f = [];
 var index_vue_vue_type_style_index_0_lang = "";
+let uid = 0;
 const __vue2_script$f = {
   name: "w-tabs",
   props: {
@@ -5546,6 +5557,7 @@ const __vue2_script$f = {
     color: { type: String },
     bgColor: { type: String },
     items: { type: [Array, Number] },
+    itemIdKey: { type: String, default: "id" },
     itemTitleKey: { type: String, default: "title" },
     itemContentKey: { type: String, default: "content" },
     titleClass: { type: String },
@@ -5558,12 +5570,16 @@ const __vue2_script$f = {
     fillBar: { type: Boolean },
     center: { type: Boolean },
     right: { type: Boolean },
-    card: { type: Boolean }
+    card: { type: Boolean },
+    keepAlive: { type: Boolean, default: true },
+    keepInDom: { type: Boolean, default: false }
   },
   components: { TabContent },
   emits: ["input", "update:modelValue", "focus"],
   data: () => ({
+    tabs: [],
     activeTabEl: null,
+    activeTabUid: null,
     activeTabIndex: 0,
     prevTabIndex: -1,
     slider: {
@@ -5584,16 +5600,11 @@ const __vue2_script$f = {
     direction() {
       return this.activeTab._index < this.prevTabIndex ? "right" : "left";
     },
-    tabsItems() {
-      const items = typeof this.items === "number" ? Array(this.items).fill({}) : this.items;
-      return items.map((item, _index) => new Vue.observable({
-        ...item,
-        _index,
-        _disabled: !!item.disabled
-      }));
-    },
     activeTab() {
-      return this.tabsItems[this.activeTabIndex] || this.tabsItems[0] || {};
+      return this.tabsByUid[this.activeTabUid] || this.tabs[0] || {};
+    },
+    tabsByUid() {
+      return this.tabs.reduce((obj, tab) => (obj[tab._uid] = tab) && obj, {});
     },
     tabsClasses() {
       return {
@@ -5618,6 +5629,45 @@ const __vue2_script$f = {
     }
   },
   methods: {
+    addTab(item) {
+      var _a, _b, _c;
+      if (!((_b = (_a = item[this.itemIdKey]) != null ? _a : item._uid) != null ? _b : false))
+        item._uid = +`${this._uid}${++uid}`;
+      this.tabs.push({
+        _uid: (_c = item[this.itemIdKey]) != null ? _c : item._uid,
+        _index: this.tabs.length,
+        ...item,
+        _disabled: !!item.disabled
+      });
+    },
+    refreshTabs() {
+      let items = this.items;
+      if (typeof items === "number")
+        items = Array(items).fill().map((_, i) => this.tabs[i] || {});
+      this.tabs = items.map((item, _index) => {
+        var _a, _b, _c;
+        if (!((_b = (_a = item[this.itemIdKey]) != null ? _a : item._uid) != null ? _b : false))
+          item._uid = +`${this._uid}${++uid}`;
+        return {
+          ...item,
+          _uid: (_c = item[this.itemIdKey]) != null ? _c : item._uid,
+          _index,
+          _disabled: !!item.disabled
+        };
+      });
+    },
+    reopenTheActiveTab() {
+      var _a, _b, _c;
+      if (this.tabs.length === 1)
+        return this.openTab(this.tabs[0]._uid);
+      let uid2 = (_a = this.tabsByUid[this.activeTabUid]) == null ? void 0 : _a._uid;
+      if (!uid2)
+        uid2 = (_b = this.tabs[this.activeTabIndex]) == null ? void 0 : _b._uid;
+      if (!uid2)
+        uid2 = (_c = this.tabs[Math.max(this.activeTabIndex - 1, this.tabs.length - 1)]) == null ? void 0 : _c._uid;
+      if (uid2)
+        this.openTab(uid2);
+    },
     onResize() {
       this.updateSlider(false);
     },
@@ -5631,17 +5681,20 @@ const __vue2_script$f = {
         [this.titleClass]: this.titleClass
       };
     },
-    openTab(item) {
+    openTab(uid2) {
       this.prevTabIndex = this.activeTabIndex;
-      this.activeTabIndex = item._index;
-      this.$emit("update:modelValue", item._index);
-      this.$emit("input", item._index);
+      const tab = this.tabsByUid[uid2];
+      this.activeTabIndex = tab._index;
+      this.activeTabUid = tab._uid;
+      this.$emit("update:modelValue", tab._index);
+      this.$emit("input", tab._index);
       if (!this.noSlider)
         this.$nextTick(this.updateSlider);
     },
     updateSlider(domLookup = true) {
       if (domLookup) {
-        this.activeTabEl = this.$refs["tabs-bar"].querySelector(".w-tabs__bar-item--active");
+        const ref = this.$refs["tabs-bar"];
+        this.activeTabEl = ref && ref.querySelector(".w-tabs__bar-item--active");
       }
       if (!this.fillBar && this.activeTabEl) {
         const { left, width } = this.activeTabEl.getBoundingClientRect();
@@ -5651,8 +5704,8 @@ const __vue2_script$f = {
         this.slider.left = `${left - parentLeft - parseInt(borderLeftWidth) + tabsBar.scrollLeft}px`;
         this.slider.width = `${width}px`;
       } else {
-        this.slider.left = `${this.activeTab._index * 100 / this.tabsItems.length}%`;
-        this.slider.width = `${100 / this.tabsItems.length}%`;
+        this.slider.left = `${this.activeTab._index * 100 / this.tabs.length}%`;
+        this.slider.width = `${100 / this.tabs.length}%`;
       }
     },
     updateActiveTab(index2) {
@@ -5660,7 +5713,7 @@ const __vue2_script$f = {
         index2 = ~~index2;
       else if (isNaN(index2) || index2 < 0)
         index2 = 0;
-      this.activeTabIndex = index2;
+      this.openTab(this.tabs[index2]._uid);
       this.$nextTick(() => {
         const ref = this.$refs["tabs-bar"];
         this.activeTabEl = ref && ref.querySelector(`.w-tabs__bar-item:nth-child(${index2 + 1})`);
@@ -5670,10 +5723,13 @@ const __vue2_script$f = {
       });
     },
     getOriginalItem(item) {
-      return this.items[item._index];
+      return this.items[item._index] || {};
     }
   },
   beforeMount() {
+    this.tabs = [];
+    const items = typeof this.items === "number" ? Array(this.items).fill().map(Object) : this.items;
+    items.forEach(this.addTab);
     this.updateActiveTab(this.value);
     this.$nextTick(() => {
       this.updateSlider();
@@ -5687,13 +5743,18 @@ const __vue2_script$f = {
   },
   watch: {
     value(index2) {
-      this.updateActiveTab(index2);
+      if (index2 !== this.activeTabIndex)
+        this.updateActiveTab(index2);
     },
-    items() {
-      while (this.activeTabIndex > 0 && !this.tabsItems[this.activeTabIndex])
-        this.activeTabIndex--;
-      if (!this.noSlider)
-        this.$nextTick(this.updateSlider);
+    items: {
+      handler() {
+        this.refreshTabs();
+        if (this.tabs.length)
+          this.reopenTheActiveTab();
+        if (!this.noSlider)
+          this.$nextTick(this.updateSlider);
+      },
+      deep: true
     },
     fillBar() {
       if (!this.noSlider)
@@ -5898,10 +5959,10 @@ const __vue2_script$e = {
       return this.headers.find((header) => header.sticky);
     },
     selectedRowsByUid() {
-      return this.selectedRowsInternal.reduce((obj, uid) => (obj[uid] = true) && obj, {});
+      return this.selectedRowsInternal.reduce((obj, uid2) => (obj[uid2] = true) && obj, {});
     },
     expandedRowsByUid() {
-      return this.expandedRowsInternal.reduce((obj, uid) => (obj[uid] = true) && obj, {});
+      return this.expandedRowsInternal.reduce((obj, uid2) => (obj[uid2] = true) && obj, {});
     }
   },
   methods: {
@@ -5943,14 +6004,14 @@ const __vue2_script$e = {
           else
             this.expandedRowsInternal.push(item._uid);
         } else
-          this.expandedRowsInternal = this.expandedRowsInternal.filter((uid) => uid !== item._uid);
+          this.expandedRowsInternal = this.expandedRowsInternal.filter((uid2) => uid2 !== item._uid);
         this.$emit(
           "row-expand",
           {
             item,
             index: index2,
             expanded: isExpanding,
-            expandedRows: this.expandedRowsInternal.map((uid) => this.filteredItems[uid])
+            expandedRows: this.expandedRowsInternal.map((uid2) => this.filteredItems[uid2])
           }
         );
         this.$emit("update:expanded-rows", this.expandedRowsInternal);
@@ -5964,7 +6025,7 @@ const __vue2_script$e = {
             this.selectedRowsInternal.push(item._uid);
           updated = true;
         } else if (!this.forceSelection || this.selectedRowsInternal.length > 1) {
-          this.selectedRowsInternal = this.selectedRowsInternal.filter((uid) => uid !== item._uid);
+          this.selectedRowsInternal = this.selectedRowsInternal.filter((uid2) => uid2 !== item._uid);
           updated = true;
         }
         if (updated) {
@@ -5974,7 +6035,7 @@ const __vue2_script$e = {
               item,
               index: index2,
               selected: isSelecting,
-              selectedRows: this.selectedRowsInternal.map((uid) => this.filteredItems[uid])
+              selectedRows: this.selectedRowsInternal.map((uid2) => this.filteredItems[uid2])
             }
           );
           this.$emit("update:selected-rows", this.selectedRowsInternal);