wave-ui 1.66.0 → 1.67.0

package/dist/wave-ui.es.js

@@ -556,7 +556,7 @@ const _WaveUI = class {
       }
     });
     const { components: components2 = {} } = options || {};
-    for (let id in components2) {
+    for (const id in components2) {
       const component = components2[id];
       if ((_a = options.presets) == null ? void 0 : _a[component.name])
         injectPresets(component, options.presets[component.name]);
@@ -1508,7 +1508,7 @@ var render$K = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-card", class: _vm.classes }, [_vm.$slots.title ? _c("div", { staticClass: "w-card__title", class: Object.assign({}, { "w-card__title--has-toolbar": _vm.titleHasToolbar }, _vm.titleClasses) }, [_vm._t("title")], 2) : _vm.title ? _c("div", { staticClass: "w-card__title", class: _vm.titleClasses, domProps: { "innerHTML": _vm._s(_vm.title) } }) : _vm._e(), _vm.image ? _c("w-image", _vm._b({ staticClass: "w-card__image", attrs: { "src": _vm.image } }, "w-image", _vm.imgProps, false), [_vm._t("image-content")], 2) : _vm._e(), _c("div", { staticClass: "w-card__content", class: _vm.contentClasses }, [_vm._t("default")], 2), _vm.$slots.actions ? _c("div", { staticClass: "w-card__actions", class: { "w-card__actions--has-toolbar": _vm.actionsHasToolbar } }, [_vm._t("actions")], 2) : _vm._e()], 1);
+  return _c("div", { staticClass: "w-card", class: _vm.classes }, [_vm.$slots.title ? _c("div", { staticClass: "w-card__title", class: Object.assign({}, { "w-card__title--has-toolbar": _vm.$slots.title && _vm.titleHasToolbar }, _vm.titleClasses) }, [_vm._t("title")], 2) : _vm.title ? _c("div", { staticClass: "w-card__title", class: Object.assign({}, { "w-card__title--has-toolbar": _vm.title && _vm.titleHasToolbar }, _vm.titleClasses), domProps: { "innerHTML": _vm._s(_vm.title) } }) : _vm._e(), _vm.image ? _c("w-image", _vm._b({ staticClass: "w-card__image", attrs: { "src": _vm.image } }, "w-image", _vm.imgProps, false), [_vm._t("image-content")], 2) : _vm._e(), _c("div", { staticClass: "w-card__content", class: _vm.contentClasses }, [_vm._t("default")], 2), _vm.$slots.actions ? _c("div", { staticClass: "w-card__actions", class: { "w-card__actions--has-toolbar": _vm.actionsHasToolbar } }, [_vm._t("actions")], 2) : _vm._e()], 1);
 };
 var staticRenderFns$K = [];
 var wCard_vue_vue_type_style_index_0_lang = "";
@@ -1943,7 +1943,9 @@ const __vue2_script$H = {
         icon: this.icon,
         tooltip: label,
         tooltipProps,
-        ...this.mainButton
+        ...this.mainButton,
+        ...this.$attrs,
+        class: [this.$vnode.data.staticClass, this.$vnode.data.class]
       };
     }
   },
@@ -4327,7 +4329,7 @@ var render$q = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-progress", class: _vm.classes, style: _vm.styles }, [!_vm.circle ? _c("div", { staticClass: "w-progress__progress", class: { full: _vm.progressValue === 100 }, style: "width: " + _vm.progressValue + "%" }) : _c("svg", { attrs: { "viewBox": _vm.circleCenter / 2 + " " + _vm.circleCenter / 2 + " " + _vm.circleCenter + " " + _vm.circleCenter } }, [_vm.bgColor || this.progressValue > -1 ? _c("circle", { staticClass: "bg", class: _vm.bgColor, attrs: { "cx": _vm.circleCenter, "cy": _vm.circleCenter, "r": _vm.circleRadius, "fill": "transparent", "stroke-dasharray": _vm.circleCircumference, "stroke-width": _vm.stroke } }) : _vm._e(), _c("circle", { staticClass: "w-progress__progress", style: "stroke-dashoffset: " + (1 - _vm.progressValue / 100) * _vm.circleCircumference, attrs: { "cx": _vm.circleCenter, "cy": _vm.circleCenter, "r": _vm.circleRadius, "fill": "transparent", "stroke-width": _vm.stroke, "stroke-linecap": _vm.roundCap && "round", "stroke-dasharray": _vm.circleCircumference } })]), _vm.label || _vm.$slots.default ? _c("div", { staticClass: "w-progress__label", class: _vm.labelColor || false }, [_vm._t("default", function() {
+  return _c("div", { staticClass: "w-progress", class: _vm.classes, style: _vm.styles }, [!_vm.circle ? _c("div", { staticClass: "w-progress__progress", class: { full: _vm.progressValue === 100 }, style: "width: " + _vm.progressValue + "%" }) : _c("svg", { attrs: { "viewBox": _vm.circleCenter / 2 + " " + _vm.circleCenter / 2 + " " + _vm.circleCenter + " " + _vm.circleCenter } }, [_vm.bgColor || this.progressValue > -1 ? _c("circle", { staticClass: "bg", class: _vm.bgColor || null, attrs: { "cx": _vm.circleCenter, "cy": _vm.circleCenter, "r": _vm.circleRadius, "fill": "transparent", "stroke-dasharray": _vm.circleCircumference, "stroke-width": _vm.stroke } }) : _vm._e(), _c("circle", { staticClass: "w-progress__progress", style: "stroke-dashoffset: " + (1 - _vm.progressValue / 100) * _vm.circleCircumference, attrs: { "cx": _vm.circleCenter, "cy": _vm.circleCenter, "r": _vm.circleRadius, "fill": "transparent", "stroke-width": _vm.stroke, "stroke-linecap": _vm.roundCap && "round", "stroke-dasharray": _vm.circleCircumference } })]), _vm.label || _vm.$slots.default ? _c("div", { staticClass: "w-progress__label", class: _vm.labelColor || false }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(Math.round(_vm.progressValue)) + _vm._s(_vm.circle ? "" : "%"))];
   })], 2) : _vm._e()]);
 };
@@ -4736,7 +4738,8 @@ const __vue2_script$n = {
         "w-rating__button--half": isHalf,
         [this.icon]: true,
         [`size--${this.size}`]: true,
-        [isOn ? this.color : this.bgColor]: true
+        [this.color]: isOn,
+        [this.bgColor]: this.bgColor && !isOn
       };
     }
   },
@@ -4769,15 +4772,166 @@ var render$m = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-scrollbar" });
+  return _c("div", _vm._b({ ref: "scrollable", staticClass: "w-scrollable", class: _vm.scrollableClasses, style: _vm.scrollableStyles, on: { "mouseenter": _vm.onMouseEnter, "mouseleave": _vm.onMouseLeave, "mousewheel": _vm.onMouseWheel } }, "div", _vm.$attrs, false), [_vm._t("default"), _c("div", { ref: "track", staticClass: "w-scrollbar", class: _vm.scrollbarClasses, on: { "mousedown": _vm.onTrackMouseDown } }, [_c("div", { ref: "thumb", staticClass: "w-scrollbar__thumb", style: _vm.thumbStyles })])], 2);
 };
 var staticRenderFns$m = [];
-var wScrollbar_vue_vue_type_style_index_0_lang = "";
+var wScrollable_vue_vue_type_style_index_0_lang = "";
+const domProps = {
+  h: {
+    horizOrVert: "horizontal",
+    topOrLeft: "left",
+    widthOrHeight: "width",
+    offsetWidthOrHeight: "offsetWidth",
+    maxWidthOrHeight: "max-width",
+    scrollWidthOrHeight: "scrollWidth",
+    clientXorY: "clientX",
+    deltaXorY: "deltaX",
+    scrollTopOrLeft: "scrollLeft"
+  },
+  v: {
+    horizOrVert: "vertical",
+    topOrLeft: "top",
+    widthOrHeight: "height",
+    offsetWidthOrHeight: "offsetHeight",
+    maxWidthOrHeight: "max-height",
+    scrollWidthOrHeight: "scrollHeight",
+    clientXorY: "clientY",
+    deltaXorY: "deltaY",
+    scrollTopOrLeft: "scrollTop"
+  }
+};
 const __vue2_script$m = {
-  name: "w-scrollbar",
-  props: {},
+  name: "w-scrollable",
+  props: {
+    color: { type: String, default: "primary" },
+    bgColor: { type: String },
+    width: { type: [Number, String] },
+    height: { type: [Number, String] }
+  },
   emits: [],
-  data: () => ({})
+  data: () => ({
+    mounted: false,
+    scrollable: {
+      top: null,
+      left: null,
+      hovered: false
+    },
+    scrollValuePercent: 0
+  }),
+  computed: {
+    isHorizontal() {
+      var _a, _b, _c, _d;
+      if (!this.mounted)
+        return false;
+      console.log("\u{1F482}\u200D\u2642\uFE0F", (_a = this.$refs.scrollable) == null ? void 0 : _a.scrollWidth, (_b = this.$refs.scrollable) == null ? void 0 : _b.offsetWidth);
+      return this.width && !this.height || ((_c = this.$refs.scrollable) == null ? void 0 : _c.scrollWidth) > ((_d = this.$refs.scrollable) == null ? void 0 : _d.offsetWidth);
+    },
+    m() {
+      return domProps[this.isHorizontal ? "h" : "v"];
+    },
+    scrollableClasses() {
+      return {
+        [`w-scrollable--${this.m.horizOrVert}`]: true
+      };
+    },
+    scrollbarClasses() {
+      return {
+        [`w-scrollbar--${this.m.horizOrVert}`]: true
+      };
+    },
+    thumbSizePercent() {
+      var _a, _b;
+      if (!this.mounted)
+        return 0;
+      console.log("\u{1F612}", this[this.m.widthOrHeight], this.$refs.scrollable[[this.m.offsetWidthOrHeight]]);
+      const widthOrHeight = (_a = this[this.m.widthOrHeight]) != null ? _a : this.$refs.scrollable[[this.m.offsetWidthOrHeight]];
+      return widthOrHeight * 100 / ((_b = this.$refs.scrollable) == null ? void 0 : _b[this.m.scrollWidthOrHeight]) || 0;
+    },
+    scrollableStyles() {
+      return {
+        [this.m.maxWidthOrHeight]: `${this[this.m.widthOrHeight]}px`
+      };
+    },
+    thumbStyles() {
+      let topOrLeftValue = this.scrollValuePercent;
+      topOrLeftValue = Math.max(0, Math.min(topOrLeftValue, 100 - this.thumbSizePercent));
+      return {
+        [this.m.widthOrHeight]: `${this.thumbSizePercent}%`,
+        [this.m.topOrLeft]: `${topOrLeftValue}%`
+      };
+    }
+  },
+  methods: {
+    onTrackMouseDown(e) {
+      if (this.isDisabled || this.isReadonly)
+        return;
+      if ("ontouchstart" in window && e.type === "mousedown")
+        return;
+      const { top, left, width, height } = this.$refs.track.getBoundingClientRect();
+      if (this.isHorizontal) {
+        this.$refs.track.width = width;
+        this.$refs.track.left = left;
+      } else {
+        this.$refs.track.height = height;
+        this.$refs.track.top = top;
+      }
+      this.dragging = true;
+      this.computeScroll(e.type === "touchstart" ? e.touches[0][this.m.clientXorY] : e[this.m.clientXorY]);
+      this.scroll();
+      document.addEventListener(e.type === "touchstart" ? "touchmove" : "mousemove", this.onDrag);
+      document.addEventListener(e.type === "touchstart" ? "touchend" : "mouseup", this.onMouseUp, { once: true });
+    },
+    onDrag(e) {
+      this.computeScroll(e.type === "touchmove" ? e.touches[0][this.m.clientXorY] : e[this.m.clientXorY]);
+      this.scroll();
+    },
+    onMouseUp(e) {
+      this.dragging = false;
+      document.removeEventListener(e.type === "touchend" ? "touchmove" : "mousemove", this.onDrag);
+      if (this.$refs.thumb)
+        this.$refs.thumb.focus();
+    },
+    onMouseEnter() {
+      this.scrollable.hovered = true;
+    },
+    onMouseLeave() {
+      this.scrollable.hovered = false;
+    },
+    onMouseWheel(e) {
+      if (!this.scrollable.hovered)
+        return;
+      if (this.scrollValuePercent <= 0 && e[this.m.deltaXorY] < 0)
+        return;
+      else if (this.scrollValuePercent >= 100 - this.thumbSizePercent && e[this.m.deltaXorY] > 0)
+        return;
+      e.preventDefault();
+      this.scrollValuePercent += e[this.m.deltaXorY] * 0.05;
+      this.scrollValuePercent = Math.max(0, Math.min(this.scrollValuePercent, 100));
+      this.scroll();
+    },
+    computeScroll(cursorPositionXorY) {
+      const { top, left, width, height } = this.$refs.scrollable.getBoundingClientRect();
+      const topOrLeft = this.isHorizontal ? left : top;
+      const widthOrHeight = this.isHorizontal ? width : height;
+      this.scrollValuePercent = Math.max(0, Math.min((cursorPositionXorY - topOrLeft) / widthOrHeight * 100, 100));
+    },
+    scroll() {
+      var _a;
+      this.$refs.scrollable[this.m.scrollTopOrLeft] = this.scrollValuePercent * ((_a = this.$refs.scrollable) == null ? void 0 : _a[this.m.scrollWidthOrHeight]) / 100;
+      this.updateThumbPosition();
+    },
+    updateThumbPosition() {
+      this.$refs.thumb.style[this.m.topOrLeft] = this.scrollValuePercent;
+    }
+  },
+  mounted() {
+    this.mounted = true;
+    const { top, left } = this.$refs.scrollable.getBoundingClientRect();
+    this.scrollable.top = top;
+    this.scrollable.left = left;
+    this.$el.parentNode.style.position = "relative";
+    this.$el.parentNode.style[this.m.maxWidthOrHeight] = `${this[this.m.widthOrHeight]}px`;
+  }
 };
 const __cssModules$m = {};
 var __component__$m = /* @__PURE__ */ normalizeComponent(
@@ -4795,7 +4949,7 @@ function __vue2_injectStyles$m(context) {
     this[o] = __cssModules$m[o];
   }
 }
-var wScrollbar = /* @__PURE__ */ function() {
+var wScrollable = /* @__PURE__ */ function() {
   return __component__$m.exports;
 }();
 var render$l = function() {
@@ -4804,12 +4958,14 @@ var render$l = function() {
   var _c = _vm._self._c || _h;
   return _c(_vm.formRegister ? "w-form-element" : "div", _vm._b({ ref: "formEl", tag: "component", class: _vm.classes, attrs: { "valid": _vm.valid, "wrap": _vm.hasLabel && _vm.labelPosition !== "inside" }, on: { "update:valid": function($event) {
     _vm.valid = $event;
-  }, "reset": _vm.onReset } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.selectionString, disabled: _vm.isDisabled, readonly: _vm.isReadonly }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default", function() {
+  }, "reset": _vm.onReset } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.selectionString, disabled: _vm.isDisabled, readonly: _vm.isReadonly, isFocused: _vm.isFocused }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--left 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(), _c("w-menu", _vm._b({ attrs: { "menu-class": "w-select__menu " + (_vm.menuClass || ""), "transition": "slide-fade-down", "append-to": (_vm.menuProps || {}).appendTo !== void 0 ? (_vm.menuProps || {}).appendTo : void 0, "align-left": "", "custom": "", "min-width": "activator" }, scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
+  })], 2) : _vm._e()] : _vm._e(), _c("w-menu", _vm._b({ attrs: { "menu-class": "w-select__menu " + (_vm.menuClass || ""), "transition": "slide-fade-down", "append-to": (_vm.menuProps || {}).appendTo !== void 0 ? (_vm.menuProps || {}).appendTo : void 0, "align-left": "", "custom": "", "min-width": "activator" }, on: { "close": function($event) {
+    !$event && _vm.closeMenu();
+  } }, scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
     ref.on;
     return [_c("div", { staticClass: "w-select__selection-wrap", class: _vm.inputWrapClasses, attrs: { "role": "button", "aria-haspopup": "listbox", "aria-expanded": _vm.showMenu ? "true" : "false", "aria-owns": "w-select-menu--" + _vm._uid, "aria-activedescendant": "w-select-menu--" + _vm._uid + "_item-1" }, on: { "click": function($event) {
-      !_vm.isDisabled && !_vm.isReadonly && (_vm.showMenu ? _vm.closeMenu : _vm.openMenu)();
+      !_vm.isDisabled && !_vm.isReadonly && _vm.onInputFieldClick();
     } } }, [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-select__icon w-select__icon--inner-left", attrs: { "tag": "label" }, on: { "click": function($event) {
       return _vm.$emit("click:inner-icon-left", $event);
     } } }, [_vm._v(_vm._s(_vm.innerIconLeft))]) : _vm._e(), _vm.$scopedSlots.selection ? _c("div", { staticClass: "w-select__selection-slot" }, [_vm._t("selection", null, { "item": _vm.multiple ? _vm.inputValue : _vm.inputValue[0] })], 2) : _vm._e(), _c("div", { ref: "selection-input", staticClass: "w-select__selection", class: { "w-select__selection--placeholder": !_vm.$scopedSlots.selection && !_vm.selectionString && _vm.placeholder }, attrs: { "contenteditable": _vm.isDisabled || _vm.isReadonly ? "false" : "true", "id": "w-select--" + _vm._uid, "disabled": _vm.isDisabled || null, "readonly": "", "aria-readonly": "true", "tabindex": _vm.tabindex || null }, domProps: { "innerHTML": _vm._s((_vm.$scopedSlots.selection ? "" : _vm.selectionString) || _vm.placeholder) }, on: { "focus": function($event) {
@@ -4829,7 +4985,9 @@ var render$l = function() {
     return _vm.$emit("item-click", $event);
   }, "item-select": _vm.onListItemSelect, "keydown:enter": function($event) {
     _vm.noUnselect && !_vm.multiple && _vm.closeMenu();
-  }, "keydown:escape": _vm.closeMenu }, scopedSlots: _vm._u([_vm._l(_vm.items.length, function(i) {
+  }, "keydown:escape": function($event) {
+    _vm.showMenu && (this.showMenu = false);
+  } }, scopedSlots: _vm._u([_vm._l(_vm.items.length, function(i) {
     return { key: "item." + i, fn: function(ref) {
       var item = ref.item;
       var selected = ref.selected;
@@ -4911,7 +5069,10 @@ const __vue2_script$l = {
     },
     selectionString() {
       return this.inputValue && this.inputValue.map(
-        (item) => item[this.itemValueKey] !== void 0 ? item[this.itemLabelKey] : item[this.itemLabelKey] !== void 0 ? item[this.itemLabelKey] : item
+        (item) => {
+          var _a;
+          return item[this.itemValueKey] !== void 0 ? item[this.itemLabelKey] : (_a = item[this.itemLabelKey]) != null ? _a : item;
+        }
       ).join(", ");
     },
     classes() {
@@ -4946,19 +5107,22 @@ const __vue2_script$l = {
   },
   methods: {
     onFocus(e) {
+      if (this.isFocused)
+        return;
       this.isFocused = true;
       this.$emit("focus", e);
       return false;
     },
     onBlur(e) {
+      if (this.showMenu)
+        return;
       this.isFocused = false;
       this.$emit("blur", e);
     },
     onKeydown(e) {
-      e.preventDefault();
-      if ([13, 27, 38, 40].includes(e.keyCode))
+      if (!e.metaKey && !e.ctrlKey && e.keyCode !== 9)
         e.preventDefault();
-      if (e.keyCode === 27)
+      if (e.keyCode === 27 && this.showMenu)
         this.closeMenu();
       else if (e.keyCode === 13)
         this.openMenu();
@@ -4985,10 +5149,16 @@ const __vue2_script$l = {
       this.$emit("update:modelValue", selection);
       this.$emit("input", selection);
     },
+    onInputFieldClick() {
+      if (this.showMenu)
+        this.showMenu = false;
+      else
+        this.openMenu();
+    },
     onListItemSelect(e) {
       this.$emit("item-select", e);
       if (!this.multiple)
-        this.closeMenu();
+        this.showMenu = false;
     },
     onReset() {
       this.inputValue = [];
@@ -5016,7 +5186,8 @@ const __vue2_script$l = {
       }, 100);
     },
     closeMenu() {
-      if ((this.menuProps || {}).hideOnMenuClick === false)
+      var _a;
+      if (((_a = this.menuProps) == null ? void 0 : _a.hideOnMenuClick) === false)
         return;
       this.showMenu = false;
       setTimeout(() => this.$refs["selection-input"].focus(), 50);
@@ -5536,16 +5707,16 @@ var render$f = function() {
     } } }, [_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) {
+  }), _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.keepInDom ? _c("transition-group", { staticClass: "w-tabs__content-wrap", attrs: { "name": _vm.transitionName, "tag": "div" } }, _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) {
+  }), 1) : _c("div", { staticClass: "w-tabs__content-wrap" }, [_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()]);
+  } }], null, true) })], 1)], 1)], 1)], 1);
 };
 var staticRenderFns$f = [];
 var index_vue_vue_type_style_index_0_lang = "";
@@ -5612,7 +5783,9 @@ const __vue2_script$f = {
         "w-tabs--no-slider": this.noSlider,
         "w-tabs--pill-slider": this.pillSlider,
         "w-tabs--fill-bar": this.fillBar,
-        "w-tabs--init": this.init
+        "w-tabs--init": this.init,
+        "w-tabs--dark": this.dark,
+        "w-tabs--light": this.light
       };
     },
     tabsBarClasses() {
@@ -5709,28 +5882,33 @@ const __vue2_script$f = {
       }
     },
     updateActiveTab(index2) {
+      var _a, _b;
       if (typeof index2 === "string")
         index2 = ~~index2;
       else if (isNaN(index2) || index2 < 0)
         index2 = 0;
-      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})`);
-        if (this.activeTabEl) {
-          this.activeTabEl.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-        }
-      });
+      if ((_a = this.tabs[index2]) == null ? void 0 : _a._uid) {
+        this.openTab((_b = this.tabs[index2]) == null ? void 0 : _b._uid);
+        this.$nextTick(() => {
+          const ref = this.$refs["tabs-bar"];
+          this.activeTabEl = ref && ref.querySelector(`.w-tabs__bar-item:nth-child(${index2 + 1})`);
+          if (this.activeTabEl) {
+            this.activeTabEl.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+          }
+        });
+      }
     },
     getOriginalItem(item) {
       return this.items[item._index] || {};
     }
   },
   beforeMount() {
+    var _a;
     this.tabs = [];
     const items = typeof this.items === "number" ? Array(this.items).fill().map(Object) : this.items;
     items.forEach(this.addTab);
-    this.updateActiveTab(this.value);
+    if ((_a = this.value) != null ? _a : false)
+      this.updateActiveTab(this.value);
     this.$nextTick(() => {
       this.updateSlider();
       setTimeout(() => this.init = false, 0);
@@ -5793,7 +5971,7 @@ var render$e = function() {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "w-table-wrap", class: _vm.wrapClasses }, [_c("table", { staticClass: "w-table", class: _vm.classes, on: { "mousedown": _vm.onMouseDown, "mouseover": _vm.onMouseOver, "mouseout": _vm.onMouseOut } }, [_c("colgroup", { ref: "colgroup" }, _vm._l(_vm.headers, function(header, i) {
-    return _c("col", { key: i, staticClass: "w-table__col", attrs: { "width": header.width || null } });
+    return _c("col", { key: i, staticClass: "w-table__col", class: _vm.colClasses[i], attrs: { "width": header.width || null } });
   }), 0), !_vm.noHeaders ? _c("thead", [_c("tr", _vm._l(_vm.headers, function(header, i) {
     return _c("th", { key: i, staticClass: "w-table__header", class: _vm.headerClasses(header), on: { "click": function($event) {
       !_vm.colResizing.dragging && header.sortable !== false && _vm.sortTable(header);
@@ -5806,7 +5984,7 @@ var render$e = function() {
     return [_vm._v("Loading...")];
   })], 2)], 1)]) : !_vm.tableItems.length ? _c("tr", { staticClass: "no-data" }, [_c("td", { staticClass: "w-table__cell text-center", attrs: { "colspan": _vm.headers.length } }, [_vm._t("no-data", function() {
     return [_vm._v("No data to show.")];
-  })], 2)]) : _vm._e(), _vm.tableItems.length && _vm.loading !== true ? [_vm._l(_vm.sortedItems, function(item, i) {
+  })], 2)]) : _vm._e(), _vm.tableItems.length && _vm.loading !== true ? [_vm._l(_vm.paginatedItems, function(item, i) {
     return [_vm.$scopedSlots["item"] ? _vm._t("item", null, { "item": item, "index": i + 1, "select": function() {
       return _vm.doSelectRow(item, i);
     }, "classes": { "w-table__row": true, "w-table__row--selected": _vm.selectedRowsByUid[item._uid] !== void 0, "w-table__row--expanded": _vm.expandedRowsByUid[item._uid] !== void 0 } }) : _c("tr", { key: i, staticClass: "w-table__row", class: { "w-table__row--selected": _vm.selectedRowsByUid[item._uid] !== void 0, "w-table__row--expanded": _vm.expandedRowsByUid[item._uid] !== void 0 }, on: { "click": function($event) {
@@ -5815,13 +5993,21 @@ 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"] || _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()])]);
+  })] : _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 w-pagination" }, [_vm._t("pagination", function() {
+    return [_vm.paginationConfig.itemsPerPageOptions ? _c("w-select", { staticClass: "w-pagination__items-per-page", attrs: { "items": _vm.paginationConfig.itemsPerPageOptions, "label-position": "left", "label": "Items per page", "label-color": "inherit" }, on: { "input": function($event) {
+      return _vm.updatePaginationConfig({ itemsPerPage: _vm.paginationConfig.itemsPerPage });
+    } }, model: { value: _vm.paginationConfig.itemsPerPage, callback: function($$v) {
+      _vm.$set(_vm.paginationConfig, "itemsPerPage", $$v);
+    }, expression: "paginationConfig.itemsPerPage" } }) : _vm._e(), _c("div", { staticClass: "pages-wrap" }, [_c("w-button", { staticClass: "w-pagination__arrow w-pagination__arrow--prev", attrs: { "disabled": _vm.paginationConfig.page <= 1, "icon": "wi-chevron-left", "text": "", "lg": "" }, on: { "click": function($event) {
+      return _vm.goToPage("-1");
+    } } }), _vm._l(_vm.paginationConfig.pagesCount, function(i) {
+      return _c("w-button", { key: i, staticClass: "w-pagination__page", class: { "w-pagination__page--active": i === _vm.paginationConfig.page }, attrs: { "round": "", "lg": "" }, on: { "click": function($event) {
+        i !== _vm.paginationConfig.page && _vm.goToPage(i);
+      } } }, [_vm._v(_vm._s(i))]);
+    }), _c("w-button", { staticClass: "w-pagination__arrow w-pagination__arrow--next", attrs: { "disabled": _vm.paginationConfig.page >= _vm.paginationConfig.pagesCount, "icon": "wi-chevron-right", "text": "", "lg": "" }, on: { "click": function($event) {
+      return _vm.goToPage("+1");
+    } } })], 2), _c("span", { staticClass: "w-pagination__results" }, [_vm._v(_vm._s(_vm.paginationConfig.start) + "-" + _vm._s(_vm.paginationConfig.end || _vm.paginationConfig.total) + " of " + _vm._s(_vm.paginationConfig.total))])];
+  }, { "range": _vm.paginationConfig.start + "-" + _vm.paginationConfig.end, "total": _vm.paginationConfig.total })], 2)])]) : _vm._e()], 2) : _vm._e()])]);
 };
 var staticRenderFns$e = [];
 var wTable_vue_vue_type_style_index_0_lang = "";
@@ -5837,6 +6023,9 @@ const __vue2_script$e = {
     fixedFooter: { type: Boolean },
     loading: { type: [Boolean, String] },
     sort: { type: [String, Array] },
+    sortFunction: { type: Function },
+    filter: { type: Function },
+    fetch: { type: Function },
     expandableRows: {
       validator: (value) => {
         if (![void 0, true, false, 1, "1", ""].includes(value)) {
@@ -5861,8 +6050,6 @@ const __vue2_script$e = {
     selectedRows: { type: Array },
     forceSelection: { type: Boolean },
     uidKey: { type: String, default: "id" },
-    filter: { type: Function },
-    sortFunction: { type: Function },
     mobileBreakpoint: { type: Number, default: 0 },
     resizableColumns: { type: Boolean },
     pagination: {
@@ -5903,12 +6090,20 @@ const __vue2_script$e = {
       columnEl: null,
       nextColumnEl: null
     },
-    paginationConfig: {}
+    paginationConfig: {
+      itemsPerPage: 0,
+      itemsPerPageOptions: {},
+      start: 0,
+      end: 0,
+      page: 1,
+      total: 0
+    }
   }),
   computed: {
     tableItems() {
       return this.items.map((item, i) => {
-        item._uid = item[this.uidKey] !== void 0 ? item[this.uidKey] : i;
+        var _a;
+        item._uid = (_a = item[this.uidKey]) != null ? _a : i;
         return item;
       });
     },
@@ -5916,7 +6111,7 @@ const __vue2_script$e = {
       return typeof this.filter === "function" ? this.tableItems.filter(this.filter) : this.tableItems;
     },
     sortedItems() {
-      if (!this.activeSorting.length || this.sortFunction)
+      if (!this.activeSorting.length || this.sortFunction || this.fetch)
         return this.filteredItems;
       const sortKey1 = this.activeSorting[0].replace(/^[+-]/, "");
       const sortDesc1 = this.activeSorting[0][0] === "-";
@@ -5930,6 +6125,9 @@ const __vue2_script$e = {
         return (a > b ? 1 : -1) * (sortDesc1 ? -1 : 1);
       });
     },
+    paginatedItems() {
+      return typeof this.fetch === "function" ? this.sortedItems : this.sortedItems.slice(this.paginationConfig.start - 1, this.paginationConfig.end);
+    },
     activeSortingKeys() {
       return this.activeSorting.reduce((obj, item) => {
         obj[item.replace(/^[+-]/, "")] = item[0];
@@ -5941,8 +6139,15 @@ const __vue2_script$e = {
         "w-table-wrap--loading": this.loading
       };
     },
+    colClasses() {
+      return this.headers.map((header) => {
+        return { "w-table__col--highlighted": this.activeSortingKeys[header.key] };
+      }) || [];
+    },
     classes() {
       return {
+        "w-table--loading": this.loading,
+        "w-table--loading-in-header": this.loading === "header",
         "w-table--fixed-layout": this.fixedLayout || this.resizableColumns || this.hasStickyColumn,
         "w-table--mobile": this.isMobile || null,
         "w-table--resizable-cols": this.resizableColumns || null,
@@ -5989,9 +6194,10 @@ const __vue2_script$e = {
       } else
         this.$set(this.activeSorting, 0, (alreadySortingThis ? "-" : "+") + header.key);
       this.$emit("update:sort", this.activeSorting);
-      if (typeof this.sortFunction === "function") {
+      if (typeof this.sortFunction === "function")
         await this.sortFunction(this.activeSorting);
-      }
+      else if (typeof this.fetch === "function")
+        await this.callApiFetch();
     },
     doSelectRow(item, index2) {
       const expandable = this.expandableRows === "" ? true : this.expandableRows;
@@ -6102,19 +6308,70 @@ const __vue2_script$e = {
         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 = {
+    initPagination() {
+      var _a, _b, _c;
+      const itemsPerPage = (_b = (_a = this.pagination) == null ? void 0 : _a.itemsPerPage) != null ? _b : 20;
+      const itemsPerPageOptions = ((_c = this.pagination) == null ? void 0 : _c.itemsPerPageOptions) || [20, 100, { label: "All", value: 0 }];
+      if (!itemsPerPageOptions.find((item) => {
+        var _a2;
+        return ((_a2 = item == null ? void 0 : item.value) != null ? _a2 : item) === +itemsPerPage;
+      })) {
+        itemsPerPageOptions.push(itemsPerPage);
+      }
+      this.paginationConfig.itemsPerPageOptions = itemsPerPageOptions.map((item) => {
+        var _a2;
+        return {
+          label: ["string", "number"].includes(typeof item) ? item.toString() : item.label || item.value,
+          value: ["string", "number"].includes(typeof item) ? ~~item : (_a2 = item.value) != null ? _a2 : item.label
+        };
+      });
+      this.paginationConfig.itemsPerPageOptions.sort((a, b) => a.value < b.value ? -1 : 1);
+      const optionAll = this.paginationConfig.itemsPerPageOptions.shift();
+      this.paginationConfig.itemsPerPageOptions.push(optionAll);
+      this.updatePaginationConfig({
         itemsPerPage,
-        itemsPerPageOptions: ((_d = this.pagination) == null ? void 0 : _d.itemsPerPageOptions) || [{ label: "10", value: 10 }, { label: "100", value: 100 }, { label: "All", value: 0 }],
+        page: this.pagination.page || 1,
+        total: this.pagination.total || this.items.length
+      });
+    },
+    updatePaginationConfig({ itemsPerPage, page, total }) {
+      if (total)
+        this.paginationConfig.total = total;
+      if (itemsPerPage !== void 0) {
+        this.paginationConfig.itemsPerPage = itemsPerPage;
+        itemsPerPage = itemsPerPage || this.paginationConfig.total;
+        this.paginationConfig.page = 1;
+        ({ page } = this.paginationConfig);
+        total = this.paginationConfig.total;
+        this.paginationConfig.start = 1;
+        this.paginationConfig.end = total >= itemsPerPage * page ? itemsPerPage * page : total % (itemsPerPage * page);
+        this.paginationConfig.pagesCount = Math.ceil(total / itemsPerPage);
+      }
+      if (page)
+        this.goToPage(page);
+    },
+    async goToPage(page) {
+      if (["-1", "+1"].includes(page))
+        this.paginationConfig.page += +page;
+      else
+        this.paginationConfig.page = page;
+      const { itemsPerPage, total } = this.paginationConfig;
+      this.paginationConfig.page = Math.max(1, this.paginationConfig.page);
+      this.paginationConfig.start = itemsPerPage * (this.paginationConfig.page - 1) + 1;
+      this.paginationConfig.end = this.paginationConfig.start - 1 + (itemsPerPage || total);
+      if (typeof this.fetch === "function")
+        await this.callApiFetch();
+    },
+    async callApiFetch() {
+      const { page, start, end, total, itemsPerPage } = this.paginationConfig;
+      return await this.fetch({
         page,
-        start: ((_e = this.pagination) == null ? void 0 : _e.start) || 1,
-        end: total >= itemsPerPage * page ? itemsPerPage * page : total % (itemsPerPage * page),
-        total
-      };
+        start,
+        end: end || total,
+        total,
+        itemsPerPage: itemsPerPage || total,
+        sorting: this.activeSorting
+      });
     }
   },
   created() {
@@ -6127,7 +6384,7 @@ const __vue2_script$e = {
     if ((this.selectedRows || []).length)
       this.selectedRowsInternal = this.selectedRows;
     if (this.pagination)
-      this.updatePaginationConfig();
+      this.initPagination();
   },
   watch: {
     sort(sorting) {
@@ -6153,6 +6410,15 @@ const __vue2_script$e = {
     },
     selectedRows(array) {
       this.selectedRowsInternal = Array.isArray(array) && array.length ? this.selectedRows : [];
+    },
+    "pagination.page"(page) {
+      this.updatePaginationConfig({ page });
+    },
+    "pagination.itemsPerPage"(itemsPerPage) {
+      this.updatePaginationConfig({ itemsPerPage });
+    },
+    "pagination.total"(total) {
+      this.updatePaginationConfig({ total });
     }
   }
 };
@@ -7162,7 +7428,7 @@ var render = function() {
   var _c = _vm._self._c || _h;
   return _c("ul", { staticClass: "w-tree", class: _vm.classes }, _vm._l(_vm.currentDepthItems, function(item, i) {
     var _obj;
-    return _c("li", { key: i, staticClass: "w-tree__item", class: _vm.itemClasses(item) }, [_c(!_vm.disabled && !item.disabled && item.route ? !_vm.$router || _vm.hasExternalLink(item) ? "a" : "router-link" : "div", _vm._b({ tag: "component", staticClass: "w-tree__item-label", attrs: { "tabindex": !_vm.disabled && !item.disabled && (item.children || item.branch || _vm.selectable) && !(_vm.unexpandableEmpty && !item.children) ? 0 : null }, on: { "click": function($event) {
+    return _c("li", { key: i, staticClass: "w-tree__item", class: _vm.itemClasses(item) }, [_c(_vm.getTreeItemComponent(item), _vm._b({ tag: "component", staticClass: "w-tree__item-label", attrs: { "tabindex": _vm.getTreeItemTabindex(item) }, on: { "click": function($event) {
       !_vm.disabled && !item.disabled && _vm.onLabelClick(item, $event);
     }, "keydown": function($event) {
       !_vm.disabled && !item.disabled && _vm.onLabelKeydown(item, $event);
@@ -7171,11 +7437,11 @@ var render = function() {
       !_vm.disabled && !item.disabled && _vm.onLabelClick(item, $event);
     } } }) : _vm._e(), _vm._t("item", function() {
       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", { domProps: { "innerHTML": _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 });
+    }, { "item": item.originalItem, "depth": _vm.depth, "path": item.path, "open": item.open })], 2), _c(_vm.noTransition ? "div" : "w-transition-expand", { tag: "component", attrs: { "y": !_vm.noTransition || null }, on: { "after-enter": function($event) {
+      _vm.$emit("open", _vm.emitPayload(item));
     }, "after-leave": function($event) {
-      return _vm.$emit("close", { item: item.originalItem, open: item.open, depth: _vm.depth });
-    } } }, [item.children && item.open ? _c("w-tree", _vm._b({ attrs: { "depth": _vm.depth + 1, "data": item.originalItem.children }, on: { "before-open": function($event) {
+      _vm.$emit("close", _vm.emitPayload(item));
+    } } }, [item.children && item.open ? _c("w-tree", _vm._b({ attrs: { "depth": _vm.depth + 1, "data": item.originalItem.children, "parent": item }, on: { "before-open": function($event) {
       return _vm.$emit("before-open", $event);
     }, "open": function($event) {
       return _vm.$emit("open", $event);
@@ -7192,8 +7458,9 @@ var render = function() {
     } }, scopedSlots: _vm._u([{ key: "item", fn: function(ref) {
       var item2 = ref.item;
       var depth = ref.depth;
+      var path = ref.path;
       var open = ref.open;
-      return [_vm._t("item", null, { "item": item2, "depth": depth, "open": open })];
+      return [_vm._t("item", null, { "item": item2, "depth": depth, "path": path, "open": open })];
     } }], null, true) }, "w-tree", _vm.$props, false)) : _vm._e()], 1)], 1);
   }), 0);
 };
@@ -7205,6 +7472,7 @@ const __vue2_script = {
     value: { type: [Object, Array] },
     data: { type: [Object, Array], required: true },
     depth: { type: Number, default: 0 },
+    parent: { type: Object, default: null },
     branchClass: { type: String },
     leafClass: { type: String },
     branchIcon: { type: String },
@@ -7237,6 +7505,7 @@ const __vue2_script = {
       return {
         [`w-tree--depth${this.depth}`]: true,
         "w-tree--expand-icon": this.expandIcon && !this.depth,
+        "w-tree--selectable": this.selectable,
         "w-tree--disabled": this.disabled && !this.depth,
         "w-tree--no-expand-button": !this.expandIcon
       };
@@ -7251,8 +7520,8 @@ const __vue2_script = {
       if (!Array.isArray(items))
         items = [items];
       items.forEach((item, i) => {
-        var _a;
-        this.currentDepthItems.push({
+        var _a, _b;
+        const itemWrapper = {
           originalItem: item,
           _uid: this.depth.toString() + (i + 1),
           label: item[this.itemLabelKey],
@@ -7260,20 +7529,44 @@ const __vue2_script = {
           branch: item.branch,
           route: item[this.itemRouteKey],
           disabled: item[this.itemDisabledKey],
+          selected: ((_a = oldItems[i]) == null ? void 0 : _a.selected) || false,
           depth: this.depth,
-          open: !!(((_a = oldItems[i]) == null ? void 0 : _a.open) || this.expandAll || item[this.itemOpenKey])
-        });
+          open: !!(((_b = oldItems[i]) == null ? void 0 : _b.open) || this.expandAll || item[this.itemOpenKey]),
+          parent: this.parent || null,
+          path: []
+        };
+        itemWrapper.path = this.getTreeItemPath(itemWrapper);
+        this.currentDepthItems.push(itemWrapper);
       });
     },
+    getTreeItemComponent(item) {
+      return !this.disabled && !item.disabled && item.route ? !this.$router || this.hasExternalLink(item) ? "a" : "router-link" : "div";
+    },
+    getTreeItemTabindex(item) {
+      return !this.disabled && !item.disabled && (item.children || item.branch || this.selectable) && !(this.unexpandableEmpty && !item.children) ? 0 : null;
+    },
+    getTreeItemPath(item) {
+      const ancestorsPath = [item];
+      let ancestor = item.parent;
+      while (ancestor) {
+        ancestorsPath.push(ancestor);
+        ancestor = ancestor.parent;
+      }
+      ancestorsPath.reverse();
+      return ancestorsPath;
+    },
+    getTreeItemPathForOutput(item) {
+      return item.path.map((item2) => item2.originalItem);
+    },
     expandDepth(item, open) {
       if (typeof open === "boolean")
         item.open = open;
       else
         item.open = !item.open;
-      const emitParams = { item: item.originalItem, open: item.open, depth: this.depth };
-      this.$emit(item.open ? "before-open" : "before-close", emitParams);
+      const emitPayload = this.emitPayload(item);
+      this.$emit(item.open ? "before-open" : "before-close", emitPayload);
       if (!this.unexpandableEmpty && !item.children) {
-        this.$emit(item.open ? "open" : "close", emitParams);
+        this.$emit(item.open ? "open" : "close", emitPayload);
       }
       return true;
     },
@@ -7281,19 +7574,13 @@ const __vue2_script = {
       const route = item[this.itemRouteKey];
       if (route && this.$router && !this.hasExternalLink(item))
         e.preventDefault();
-      this.$emit("click", { item: item.originalItem, depth: this.depth, e });
       if (item.children || item.branch && !this.unexpandableEmpty)
         this.expandDepth(item);
       if (this.selectable)
-        this.emitItemSelection(item, e);
-    },
-    emitItemSelection(item, e) {
-      const emitParams = { item: item.originalItem, depth: this.depth, e };
-      if (item.children || item.branch && !this.unexpandableEmpty) {
-        emitParams.open = item.open;
-      }
-      this.$emit("input", emitParams);
-      this.$emit("select", emitParams);
+        item.selected = !item.selected;
+      const emitPayload = this.emitPayload(item, e);
+      this.$emit("click", emitPayload);
+      this.emitItemSelection(item, e);
     },
     onLabelKeydown(item, e) {
       if (!(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) && [13, 32, 37, 38, 39, 40].includes(e.which)) {
@@ -7319,8 +7606,31 @@ const __vue2_script = {
           });
         }
       }
-      if (this.selectable)
+      if (e.which === 13) {
+        if (this.selectable)
+          item.selected = !item.selected;
         this.emitItemSelection(item, e);
+      }
+    },
+    emitItemSelection(item, e) {
+      const emitPayload = this.emitPayload(item, e);
+      this.$emit("update:model-value", emitPayload);
+      if (this.selectable)
+        this.$emit("select", emitPayload);
+    },
+    emitPayload(item, e) {
+      const emitPayload = {
+        item: item.originalItem,
+        depth: this.depth,
+        path: this.getTreeItemPathForOutput(item)
+      };
+      if (e)
+        emitPayload.e = e;
+      if (item.children || item.branch && !this.unexpandableEmpty)
+        emitPayload.open = item.open;
+      if (this.selectable)
+        emitPayload.selected = item.selected;
+      return emitPayload;
     },
     getPreviousSibling(node, selector) {
       while (selector && (node = node.previousElementSibling)) {
@@ -7349,6 +7659,7 @@ const __vue2_script = {
       return {
         [item.children || item.branch ? "w-tree__item--branch" : "w-tree__item--leaf"]: true,
         "w-tree__item--disabled": item[this.itemDisabledKey],
+        "w-tree__item--selected": item.selected,
         "w-tree__item--empty": item.branch && !item.children,
         "w-tree__item--unexpandable": item.branch && !item.children && this.unexpandableEmpty
       };
@@ -7417,7 +7728,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   WRadio: wRadio,
   WRadios: wRadios,
   WRating: wRating,
-  WScrollbar: wScrollbar,
+  WScrollable: wScrollable,
   WSelect: wSelect,
   WSlider: wSlider,
   WSpinner: wSpinner,