wave-ui 1.61.0 → 1.62.0

package/dist/wave-ui.es.js

@@ -1815,7 +1815,7 @@ var render$G = function() {
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "w-confirm" }, [_c("w-menu", _vm._b({ scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
     var on = ref.on;
-    return [_c("w-button", _vm._g(_vm._b({ staticClass: "w-confirm__button" }, "w-button", _vm.buttonProps, false), Object.assign({}, _vm.$listeners, on)), [_vm._t("default")], 2)];
+    return [_c("w-button", _vm._g(_vm._b({ staticClass: "w-confirm__button" }, "w-button", _vm.buttonProps, false), Object.assign({}, _vm.$listeners, _vm.disablePrompt ? {} : on)), [_vm._t("default")], 2)];
   } }], null, true), model: { value: _vm.showPopup, callback: function($$v) {
     _vm.showPopup = $$v;
   }, expression: "showPopup" } }, "w-menu", _vm.wMenuProps, false), [_c("w-flex", { attrs: { "column": !_vm.inline, "align-center": "" } }, [_c("div", [_vm._t("question", function() {
@@ -1843,6 +1843,7 @@ const __vue2_script$G = {
     bgColor: { type: String },
     color: { type: String },
     icon: { type: String },
+    disablePrompt: { type: Boolean },
     mainButton: { type: Object },
     question: { type: String, default: "Are you sure?" },
     cancel: { type: [Boolean, Object, String], default: void 0 },
@@ -3408,7 +3409,7 @@ const __vue2_script$u = {
           this.$emit("item-select", this.cleanLi(li));
         } else if (e.keyCode === 27)
           this.$emit("keydown:escape");
-        else if (this.arrowsNavigation) {
+        else if (this.arrowsNavigation && [38, 40].includes(e.keyCode)) {
           e.preventDefault();
           if (e.keyCode === 38)
             this.focusPrevNextItem(li._index, false);
@@ -4755,7 +4756,7 @@ var render$l = function() {
     }, "blur": _vm.onBlur, "keydown": function($event) {
       !_vm.isDisabled && !_vm.isReadonly && _vm.onKeydown($event);
     } } }), _vm._l(_vm.inputValue.length ? _vm.inputValue : [{}], function(val, i) {
-      return _c("input", { key: i, attrs: { "type": "hidden", "name": _vm.inputName + (_vm.multiple ? "[]" : "") }, domProps: { "value": val.value || "" } });
+      return _c("input", { key: i, attrs: { "type": "hidden", "name": _vm.inputName + (_vm.multiple ? "[]" : "") }, domProps: { "value": val.value === void 0 ? "" : val.value.toString() } });
     }), _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--inside w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default", function() {
       return [_vm._v(_vm._s(_vm.label))];
     })], 2) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-select__icon w-select__icon--inner-right", attrs: { "tag": "label" }, on: { "click": function($event) {
@@ -4931,7 +4932,7 @@ const __vue2_script$l = {
       this.$emit("input", selection);
     },
     checkSelection(items) {
-      items = Array.isArray(items) ? items : items ? [items] : [];
+      items = Array.isArray(items) ? items : items !== void 0 ? [items] : [];
       const allValues = this.selectItems.map((item) => item.value);
       return items.map((item) => {
         let value = item;
@@ -5323,7 +5324,7 @@ var render$h = function() {
   })], 2) : _vm._e()] : _vm._e(), _c("div", _vm._g({ staticClass: "w-switch__input", class: _vm.inputClasses, on: { "click": function($event) {
     _vm.$refs.input.focus();
     _vm.$refs.input.click();
-  } } }, _vm.$listeners), [_vm.$slots.track ? _c("div", { staticClass: "w-switch__track" }, [_vm._t("track")], 2) : _vm._e(), _vm.$slots.thumb || _vm.loading ? _c("div", { staticClass: "w-switch__thumb" }, [_vm.loading ? _c("w-progress", _vm._b({ attrs: { "circle": "", "color": "inherit" } }, "w-progress", typeof _vm.loading === "number" ? { "model-value": _vm.loading } : {}, false)) : _vm._t("thumb")], 2) : _vm._e()]), _vm.hasLabel && !_vm.labelOnLeft ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-switch__label w-switch__label--right w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-switch--" + _vm._uid } }, [_vm._t("default", function() {
+  } } }, _vm.$listeners), [_vm.$slots.track ? _c("div", { staticClass: "w-switch__track" }, [_vm._t("track")], 2) : _vm._e(), _vm.$slots.thumb || _vm.loading ? _c("div", { staticClass: "w-switch__thumb" }, [_vm.loading ? _c("w-progress", _vm._b({ attrs: { "circle": "", "color": "inherit" } }, "w-progress", typeof _vm.loading === "number" ? { value: _vm.loading } : {}, false)) : _vm._t("thumb")], 2) : _vm._e()]), _vm.hasLabel && !_vm.labelOnLeft ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-switch__label w-switch__label--right w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-switch--" + _vm._uid } }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
   })], 2) : _vm._e()] : _vm._e()], 2);
 };
@@ -5688,7 +5689,13 @@ var render$e = function() {
       var _obj, _obj$1;
       return [_vm.$scopedSlots["item-cell." + header.key] || _vm.$scopedSlots["item-cell." + (j + 1)] || _vm.$scopedSlots["item-cell"] ? _c("td", { key: j + "-a", staticClass: "w-table__cell", class: (_obj = {}, _obj["text-" + (header.align || "left")] = true, _obj["w-table__cell--sticky"] = header.sticky, _obj), attrs: { "data-label": header.label } }, [_vm.$scopedSlots["item-cell." + header.key] ? _vm._t("item-cell." + header.key, null, { "header": header, "item": item, "label": item[header.key] || "", "index": i + 1 }) : _vm.$scopedSlots["item-cell." + (j + 1)] ? _vm._t("item-cell." + (j + 1), null, { "header": header, "item": item, "label": item[header.key] || "", "index": i + 1 }) : _vm.$scopedSlots["item-cell"] ? _vm._t("item-cell", null, { "header": header, "item": item, "label": item[header.key] || "", "index": i + 1 }) : _vm._e(), j < _vm.headers.length - 1 && _vm.resizableColumns ? _c("span", { staticClass: "w-table__col-resizer", class: { "w-table__col-resizer--hover": _vm.colResizing.hover === j, "w-table__col-resizer--active": _vm.colResizing.columnIndex === j } }) : _vm._e()], 2) : _c("td", { key: j + "-b", staticClass: "w-table__cell", class: (_obj$1 = {}, _obj$1["text-" + (header.align || "left")] = true, _obj$1["w-table__cell--sticky"] = header.sticky, _obj$1), attrs: { "data-label": header.label } }, [_c("div", { domProps: { "innerHTML": _vm._s(item[header.key] || "") } }), j < _vm.headers.length - 1 && _vm.resizableColumns ? _c("span", { staticClass: "w-table__col-resizer", class: { "w-table__col-resizer--hover": _vm.colResizing.hover === j, "w-table__col-resizer--active": _vm.colResizing.columnIndex === j } }) : _vm._e()])];
     })], 2), _vm.expandedRowsByUid[item._uid] ? _c("tr", { staticClass: "w-table__row w-table__row--expansion" }, [_c("td", { staticClass: "w-table__cell", attrs: { "colspan": _vm.headers.length } }, [_c("w-transition-expand", { attrs: { "y": "" } }, [_vm.expandedRowsByUid[item._uid] ? _c("div", [_vm._t("row-expansion", null, { "item": item, "index": i + 1 })], 2) : _vm._e(), i < _vm.headers.length - 1 && _vm.resizableColumns ? _c("span", { staticClass: "w-table__col-resizer", class: { "w-table__col-resizer--hover": _vm.colResizing.hover === i, "w-table__col-resizer--active": _vm.colResizing.columnIndex === _vm.j } }) : _vm._e()])], 1)]) : _vm._e()];
-  })] : _vm._e(), _vm.$slots["extra-row"] ? _c("div", { staticClass: "w-table__extra-row" }, [_vm._t("extra-row")], 2) : _vm._e()], 2), _vm.$slots.footer || _vm.$slots["footer-row"] ? _c("tfoot", { staticClass: "w-table__footer" }, [_vm.$slots["footer-row"] ? _vm._t("footer-row") : _c("tr", { staticClass: "w-table__row" }, [_c("td", { staticClass: "w-table__cell", attrs: { "colspan": _vm.headers.length } }, [_vm._t("footer")], 2)])], 2) : _vm._e()])]);
+  })] : _vm._e(), _vm.$slots["extra-row"] ? _c("div", { staticClass: "w-table__extra-row" }, [_vm._t("extra-row")], 2) : _vm._e()], 2), _vm.$slots.footer || _vm.$slots["footer-row"] || _vm.pagination ? _c("tfoot", { staticClass: "w-table__footer" }, [_vm.$slots["footer-row"] ? _vm._t("footer-row") : _vm.$slots.footer ? _c("tr", { staticClass: "w-table__row" }, [_c("td", { staticClass: "w-table__cell", attrs: { "colspan": _vm.headers.length } }, [_vm._t("footer")], 2)]) : _vm._e(), _vm.pagination && _vm.paginationConfig ? _c("tr", { staticClass: "w-table__row w-table__pagination-wrap" }, [_c("td", { staticClass: "w-table__cell", attrs: { "colspan": _vm.headers.length } }, [_c("div", { staticClass: "w-table__pagination" }, [_vm.paginationConfig.itemsPerPageOptions ? _c("w-select", { staticClass: "pagination-number pagination-number--items-per-page", attrs: { "items": _vm.paginationConfig.itemsPerPageOptions, "label-position": "left", "label": "Items per page", "label-color": "inherit" }, model: { value: _vm.paginationConfig.itemsPerPage, callback: function($$v) {
+    _vm.$set(_vm.paginationConfig, "itemsPerPage", $$v);
+  }, expression: "paginationConfig.itemsPerPage" } }) : _vm._e(), _c("span", { staticClass: "pagination-number pagination-number--results" }, [_vm._v(_vm._s(_vm.paginationConfig.start) + "-" + _vm._s(_vm.paginationConfig.end) + " of " + _vm._s(_vm.paginationConfig.total))]), _c("div", { staticClass: "pagination-arrows" }, [_c("w-button", { staticClass: "pagination-arrow pagination-arrow--prev", attrs: { "icon": "wi-chevron-left", "text": "", "lg": "" }, on: { "click": function($event) {
+    _vm.paginationConfig.page--;
+  } } }), _c("w-button", { staticClass: "pagination-arrow pagination-arrow--next", attrs: { "icon": "wi-chevron-right", "text": "", "lg": "" }, on: { "click": function($event) {
+    _vm.paginationConfig.page++;
+  } } })], 1)], 1)])]) : _vm._e()], 2) : _vm._e()])]);
 };
 var staticRenderFns$e = [];
 var wTable_vue_vue_type_style_index_0_lang = "";
@@ -5731,7 +5738,21 @@ const __vue2_script$e = {
     filter: { type: Function },
     sortFunction: { type: Function },
     mobileBreakpoint: { type: Number, default: 0 },
-    resizableColumns: { type: Boolean }
+    resizableColumns: { type: Boolean },
+    pagination: {
+      type: [Boolean, Object, String],
+      validator: (object) => {
+        if (!object)
+          return true;
+        else if (typeof object === "object" && (!object.itemsPerPage || object.page && isNaN(object.page))) {
+          consoleError(
+            "Wrong pagination config received in the w-table's `pagination` prop (received: `" + JSON.stringify(object) + "`). \nExpected object: { itemsPerPage: Integer, page: Integer } or { itemsPerPage: Integer, start: Integer }."
+          );
+          return false;
+        }
+        return true;
+      }
+    }
   },
   emits: [
     "row-select",
@@ -5755,7 +5776,8 @@ const __vue2_script$e = {
       nextColWidth: null,
       columnEl: null,
       nextColumnEl: null
-    }
+    },
+    paginationConfig: {}
   }),
   computed: {
     tableItems() {
@@ -5953,6 +5975,20 @@ const __vue2_script$e = {
         this.colResizing.colWidth = null;
         this.colResizing.nextColWidth = null;
       }, 0);
+    },
+    updatePaginationConfig() {
+      var _a, _b, _c, _d, _e;
+      const itemsPerPage = ((_a = this.pagination) == null ? void 0 : _a.itemsPerPage) || 10;
+      const total = ((_b = this.pagination) == null ? void 0 : _b.total) || this.items.length;
+      const page = ((_c = this.pagination) == null ? void 0 : _c.page) || 1;
+      this.paginationConfig = {
+        itemsPerPage,
+        itemsPerPageOptions: ((_d = this.pagination) == null ? void 0 : _d.itemsPerPageOptions) || [{ label: "10", value: 10 }, { label: "100", value: 100 }, { label: "All", value: 0 }],
+        page,
+        start: ((_e = this.pagination) == null ? void 0 : _e.start) || 1,
+        end: total >= itemsPerPage * page ? itemsPerPage * page : total % (itemsPerPage * page),
+        total
+      };
     }
   },
   created() {
@@ -5964,6 +6000,8 @@ const __vue2_script$e = {
       this.expandedRowsInternal = this.expandedRows;
     if ((this.selectedRows || []).length)
       this.selectedRowsInternal = this.selectedRows;
+    if (this.pagination)
+      this.updatePaginationConfig();
   },
   watch: {
     sort(sorting) {
@@ -6592,6 +6630,7 @@ const __vue2_script$7 = {
   },
   data: () => ({
     el: {
+      savedState: false,
       originalStyles: "",
       width: 0,
       height: 0,
@@ -6621,7 +6660,7 @@ const __vue2_script$7 = {
   methods: {
     beforeAppear(el) {
       if (this.cleanTransitionCycle)
-        this.saveOriginalStyles(el);
+        this.saveOriginalInlineStyles(el);
       this.cleanTransitionCycle = false;
     },
     appear(el, done) {
@@ -6636,7 +6675,7 @@ const __vue2_script$7 = {
     },
     beforeEnter(el) {
       if (this.cleanTransitionCycle)
-        this.saveOriginalStyles(el);
+        this.saveOriginalInlineStyles(el);
       this.cleanTransitionCycle = false;
     },
     enter(el, done) {
@@ -6650,6 +6689,8 @@ const __vue2_script$7 = {
       this.cleanTransitionCycle = false;
     },
     beforeLeave(el) {
+      if (!this.el.savedState)
+        this.saveComputedStyles(el);
       this.beforeHide(el);
       this.cleanTransitionCycle = false;
     },
@@ -6661,6 +6702,7 @@ const __vue2_script$7 = {
     afterLeave(el) {
       this.applyOriginalStyles(el);
       this.cleanTransitionCycle = true;
+      this.el.savedState = false;
     },
     applyHideStyles(el) {
       if (this.animX) {
@@ -6707,10 +6749,23 @@ const __vue2_script$7 = {
     applyOriginalStyles(el) {
       el.style.cssText = this.el.originalStyles;
     },
-    saveOriginalStyles(el) {
+    saveOriginalInlineStyles(el) {
       this.el.originalStyles = el.style.cssText;
     },
     show(el, done) {
+      this.saveComputedStyles(el);
+      this.applyHideStyles(el);
+      setTimeout(() => this.applyShowStyles(el), 20);
+      setTimeout(done, this.duration);
+    },
+    beforeHide(el) {
+      this.applyShowStyles(el);
+    },
+    hide(el, done) {
+      setTimeout(() => this.applyHideStyles(el), 20);
+      setTimeout(done, this.duration);
+    },
+    saveComputedStyles(el) {
       const computedStyles = window.getComputedStyle(el, null);
       if (this.animX) {
         this.el.width = el.offsetWidth;
@@ -6730,16 +6785,7 @@ const __vue2_script$7 = {
         this.el.borderTopWidth = computedStyles.getPropertyValue("borderTopWidth");
         this.el.borderBottomWidth = computedStyles.getPropertyValue("borderBottomWidth");
       }
-      this.applyHideStyles(el);
-      setTimeout(() => this.applyShowStyles(el), 20);
-      setTimeout(done, this.duration);
-    },
-    beforeHide(el) {
-      this.applyShowStyles(el);
-    },
-    hide(el, done) {
-      setTimeout(() => this.applyHideStyles(el), 20);
-      setTimeout(done, this.duration);
+      this.el.savedState = true;
     }
   }
 };
@@ -6994,7 +7040,7 @@ var render = function() {
     }, "keydown": function($event) {
       !_vm.disabled && _vm.onLabelKeydown(item, $event);
     } } }, [(item.children || item.branch) && (_vm.expandOpenIcon && item.open || _vm.expandIcon) && !(_vm.unexpandableEmpty && !item.children) ? _c("w-button", { staticClass: "w-tree__item-expand", attrs: { "color": "inherit", "icon": item.open && _vm.expandOpenIcon || _vm.expandIcon, "icon-props": { rotate90a: !item.open }, "tabindex": -1, "disabled": _vm.disabled, "text": "", "sm": "" } }) : _vm._e(), _vm._t("item-label", function() {
-      return [_vm.itemIcon(item) ? _c("w-icon", { staticClass: "w-tree__item-icon" }, [_vm._v(_vm._s(_vm.itemIcon(item)))]) : _vm._e(), _c("span", [_vm._v(_vm._s(item.label))]), _vm.counts && (item.children || item.branch) ? _c("span", { staticClass: "ml1" }, [_vm._v("(" + _vm._s(item.originalItem.children ? item.originalItem.children.length : 0) + ")")]) : _vm._e()];
+      return [_vm.itemIcon(item) ? _c("w-icon", { staticClass: "w-tree__item-icon", attrs: { "color": item.originalItem[_vm.itemIconColorKey] || _vm.iconColor } }, [_vm._v(_vm._s(_vm.itemIcon(item)))]) : _vm._e(), _c("span", [_vm._v(_vm._s(item.label))]), _vm.counts && (item.children || item.branch) ? _c("span", { staticClass: "ml1" }, [_vm._v("(" + _vm._s(item.originalItem.children ? item.originalItem.children.length : 0) + ")")]) : _vm._e()];
     }, { "item": item.originalItem, "depth": _vm.depth, "open": item.open })], 2), _c(_vm.noTransition ? "div" : "w-transition-expand", { tag: "component", attrs: { "y": !_vm.noTransition || null }, on: { "after-enter": function($event) {
       return _vm.$emit("open", { item: item.originalItem, open: item.open, depth: _vm.depth });
     }, "after-leave": function($event) {
@@ -7041,8 +7087,11 @@ const __vue2_script = {
     disabled: { type: Boolean },
     noTransition: { type: Boolean },
     selectable: { type: Boolean },
-    depthReactivity: { type: Boolean },
-    counts: { type: Boolean }
+    deepReactivity: { type: Boolean },
+    counts: { type: Boolean },
+    itemIconKey: { type: String, default: "icon" },
+    iconColor: { type: String },
+    itemIconColorKey: { type: String, default: "iconColor" }
   },
   emits: ["input", "before-open", "open", "before-close", "close", "click", "select"],
   data: () => ({
@@ -7071,7 +7120,7 @@ const __vue2_script = {
           children: !!item.children,
           branch: item.branch,
           depth: this.depth,
-          open: ((_a = oldItems[i]) == null ? void 0 : _a.open) || false
+          open: !!(((_a = oldItems[i]) == null ? void 0 : _a.open) || this.expandAll)
         });
       });
     },
@@ -7147,7 +7196,7 @@ const __vue2_script = {
       liNode && liNode.querySelector(".w-tree__item-label").focus();
     },
     itemIcon(item) {
-      return item.originalItem.icon || !item.children && !item.branch && this.leafIcon || (item.children || item.branch) && (item.open && this.branchOpenIcon || this.branchIcon);
+      return item.originalItem[this.itemIconKey] || !item.children && !item.branch && this.leafIcon || (item.children || item.branch) && (item.open && this.branchOpenIcon || this.branchIcon);
     },
     itemClasses(item) {
       return {
@@ -7162,7 +7211,7 @@ const __vue2_script = {
     this.dataPropUnwatch = this.$watch(
       "data",
       (items) => this.updateCurrentDepthTree(items, this.currentDepthItems),
-      { deep: !!this.depthReactivity }
+      { deep: !!this.deepReactivity }
     );
   },
   destroyed() {