wave-ui 1.58.0 → 1.60.0

package/dist/wave-ui.es.js

@@ -422,8 +422,6 @@ var colors = [
     ]
   }
 ];
-const consoleWarn = (message) => console.warn(`Wave UI: ${message}`);
-const consoleError = (message) => console.error(`Wave UI: ${message}`);
 const shadeColor = (col, amt) => {
   return "#" + col.slice(1).match(/../g).map((x) => (x = +`0x${x}` + amt, x < 0 ? 0 : x > 255 ? 255 : x).toString(16).padStart(2, 0)).join("");
 };
@@ -476,7 +474,7 @@ const _WaveUI = class {
   }
   static install(Vue2, options = {}) {
     Vue2.directive("focus", {
-      inserted: (el) => el.focus()
+      inserted: (el) => setTimeout(() => el.focus(), 0)
     });
     Vue2.directive("scroll", {
       inserted: (el, binding) => {
@@ -502,7 +500,7 @@ let WaveUI = _WaveUI;
 _notificationManager = new WeakMap();
 __publicField(WaveUI, "instance", null);
 __publicField(WaveUI, "vueInstance", null);
-var render$P = function() {
+var render$Q = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -516,14 +514,14 @@ var render$P = function() {
         return null;
       }
       !item._disabled && _vm.toggleItem(item, $event);
-    } } }, [_vm.expandIcon && !_vm.expandIconRight ? _c("w-button", { staticClass: "w-accordion__expand-icon", class: { "w-accordion__expand-icon--expanded": item._expanded }, attrs: { "icon": item._expanded && _vm.collapseIcon || _vm.expandIcon, "disabled": item._disabled || null, "tabindex": -1, "text": "" }, on: { "keypress": function($event) {
+    } } }, [_vm.expandIcon && !_vm.expandIconRight ? _c("w-button", { staticClass: "w-accordion__expand-icon", class: { "w-accordion__expand-icon--expanded": item._expanded, "w-accordion__expand-icon--rotate90": _vm.expandIconRotate90 }, attrs: { "icon": item._expanded && _vm.collapseIcon || _vm.expandIcon, "icon-props": _vm.expandIconProps, "disabled": item._disabled || null, "tabindex": -1, "text": "" }, on: { "keypress": function($event) {
       $event.stopPropagation();
     }, "click": function($event) {
       $event.stopPropagation();
       !item._disabled && _vm.toggleItem(item, $event);
     } } }) : _vm._e(), _vm.$scopedSlots["item-title." + (item.id || i + 1)] ? _vm._t("item-title." + (item.id || i + 1), null, { "item": _vm.getOriginalItem(item), "expanded": item._expanded, "index": i + 1 }) : _vm._t("item-title", function() {
       return [_c("div", { staticClass: "grow", domProps: { "innerHTML": _vm._s(item[_vm.itemTitleKey]) } })];
-    }, { "item": _vm.getOriginalItem(item), "expanded": item._expanded, "index": i + 1 }), _vm.expandIcon && _vm.expandIconRight ? _c("w-button", { staticClass: "w-accordion__expand-icon", class: { "w-accordion__expand-icon--expanded": item._expanded }, attrs: { "icon": item._expanded && _vm.collapseIcon || _vm.expandIcon, "text": "" }, on: { "keypress": function($event) {
+    }, { "item": _vm.getOriginalItem(item), "expanded": item._expanded, "index": i + 1 }), _vm.expandIcon && _vm.expandIconRight ? _c("w-button", { staticClass: "w-accordion__expand-icon", class: { "w-accordion__expand-icon--expanded": item._expanded, "w-accordion__expand-icon--rotate90": _vm.expandIconRotate90 }, attrs: { "icon": item._expanded && _vm.collapseIcon || _vm.expandIcon, "text": "" }, on: { "keypress": function($event) {
       $event.stopPropagation();
     }, "click": function($event) {
       $event.stopPropagation();
@@ -535,7 +533,7 @@ var render$P = function() {
     }, { "item": _vm.getOriginalItem(item), "expanded": item._expanded, "index": i + 1 })], 2) : _vm._e()])], 1);
   }), 0);
 };
-var staticRenderFns$P = [];
+var staticRenderFns$Q = [];
 var wAccordion_vue_vue_type_style_index_0_lang = "";
 function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
   var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
@@ -591,7 +589,7 @@ function normalizeComponent(scriptExports, render2, staticRenderFns2, functional
     options
   };
 }
-const __vue2_script$P = {
+const __vue2_script$Q = {
   name: "w-accordion",
   props: {
     value: { type: Array },
@@ -606,6 +604,8 @@ const __vue2_script$P = {
     contentClass: { type: String },
     expandIcon: { type: [String, Boolean], default: "wi-triangle-down" },
     expandIconRight: { type: Boolean },
+    expandIconRotate90: { type: Boolean },
+    expandIconProps: { type: Object, default: () => ({}) },
     expandSingle: { type: Boolean },
     collapseIcon: { type: String },
     shadow: { type: Boolean },
@@ -678,26 +678,26 @@ const __vue2_script$P = {
     }
   }
 };
-const __cssModules$P = {};
-var __component__$P = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$P,
-  render$P,
-  staticRenderFns$P,
+const __cssModules$Q = {};
+var __component__$Q = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$Q,
+  render$Q,
+  staticRenderFns$Q,
   false,
-  __vue2_injectStyles$P,
+  __vue2_injectStyles$Q,
   null,
   null,
   null
 );
-function __vue2_injectStyles$P(context) {
-  for (let o in __cssModules$P) {
-    this[o] = __cssModules$P[o];
+function __vue2_injectStyles$Q(context) {
+  for (let o in __cssModules$Q) {
+    this[o] = __cssModules$Q[o];
   }
 }
 var wAccordion = /* @__PURE__ */ function() {
-  return __component__$P.exports;
+  return __component__$Q.exports;
 }();
-var render$O = function() {
+var render$P = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -707,9 +707,9 @@ var render$O = function() {
     _vm.$emit("close", false);
   } } }) : _vm._e()] : _vm._t("default")], 2) : _vm._e();
 };
-var staticRenderFns$O = [];
+var staticRenderFns$P = [];
 var wAlert_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$O = {
+const __vue2_script$P = {
   name: "w-alert",
   props: {
     value: { default: true },
@@ -785,26 +785,26 @@ const __vue2_script$O = {
     }
   }
 };
-const __cssModules$O = {};
-var __component__$O = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$O,
-  render$O,
-  staticRenderFns$O,
+const __cssModules$P = {};
+var __component__$P = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$P,
+  render$P,
+  staticRenderFns$P,
   false,
-  __vue2_injectStyles$O,
+  __vue2_injectStyles$P,
   null,
   null,
   null
 );
-function __vue2_injectStyles$O(context) {
-  for (let o in __cssModules$O) {
-    this[o] = __cssModules$O[o];
+function __vue2_injectStyles$P(context) {
+  for (let o in __cssModules$P) {
+    this[o] = __cssModules$P[o];
   }
 }
 var wAlert = /* @__PURE__ */ function() {
-  return __component__$O.exports;
+  return __component__$P.exports;
 }();
-var render$N = function() {
+var render$O = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -816,9 +816,9 @@ var render$N = function() {
     }, expression: "notif._value" } }, "w-alert", _vm.notifProps(notif), false), [_c("div", { domProps: { "innerHTML": _vm._s(notif.message) } })]) : _vm._e()];
   })], 2);
 };
-var staticRenderFns$N = [];
+var staticRenderFns$O = [];
 var wNotificationManager_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$N = {
+const __vue2_script$O = {
   name: "w-notification-manager",
   data: () => ({
     notifManager: null
@@ -849,24 +849,24 @@ const __vue2_script$N = {
     delete this.notifManager;
   }
 };
-const __cssModules$N = {};
-var __component__$N = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$N,
-  render$N,
-  staticRenderFns$N,
+const __cssModules$O = {};
+var __component__$O = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$O,
+  render$O,
+  staticRenderFns$O,
   false,
-  __vue2_injectStyles$N,
+  __vue2_injectStyles$O,
   null,
   null,
   null
 );
-function __vue2_injectStyles$N(context) {
-  for (let o in __cssModules$N) {
-    this[o] = __cssModules$N[o];
+function __vue2_injectStyles$O(context) {
+  for (let o in __cssModules$O) {
+    this[o] = __cssModules$O[o];
   }
 }
 var NotificationManager = /* @__PURE__ */ function() {
-  return __component__$N.exports;
+  return __component__$O.exports;
 }();
 const cssVars = {
   cssScope: ".w-app",
@@ -980,16 +980,16 @@ var dynamicCSS = (config2) => {
     styles += genBreakpointLayoutClasses(breakpointsDef2);
   return styles;
 };
-var render$M = function() {
+var render$N = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "w-app", class: _vm.classes }, [_vm._t("default"), _c("notification-manager")], 2);
 };
-var staticRenderFns$M = [];
+var staticRenderFns$N = [];
 var wApp_vue_vue_type_style_index_0_lang = "";
 let breakpointsDef = { keys: [], values: [] };
-const __vue2_script$M = {
+const __vue2_script$N = {
   name: "w-app",
   props: {
     dark: { type: Boolean },
@@ -1070,26 +1070,26 @@ const __vue2_script$M = {
     window.removeEventListener("resize", this.getBreakpoint);
   }
 };
-const __cssModules$M = {};
-var __component__$M = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$M,
-  render$M,
-  staticRenderFns$M,
+const __cssModules$N = {};
+var __component__$N = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$N,
+  render$N,
+  staticRenderFns$N,
   false,
-  __vue2_injectStyles$M,
+  __vue2_injectStyles$N,
   null,
   null,
   null
 );
-function __vue2_injectStyles$M(context) {
-  for (let o in __cssModules$M) {
-    this[o] = __cssModules$M[o];
+function __vue2_injectStyles$N(context) {
+  for (let o in __cssModules$N) {
+    this[o] = __cssModules$N[o];
   }
 }
 var wApp = /* @__PURE__ */ function() {
-  return __component__$M.exports;
+  return __component__$N.exports;
 }();
-var render$L = function() {
+var render$M = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1097,9 +1097,9 @@ var render$L = function() {
     return [_vm._v(_vm._s(_vm.value === true ? "" : _vm.value || ""))];
   }) : _vm._e()], 2) : _vm._e()])], 2);
 };
-var staticRenderFns$L = [];
+var staticRenderFns$M = [];
 var wBadge_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$L = {
+const __vue2_script$M = {
   name: "w-badge",
   props: {
     value: { default: true },
@@ -1161,26 +1161,26 @@ const __vue2_script$L = {
     }
   }
 };
-const __cssModules$L = {};
-var __component__$L = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$L,
-  render$L,
-  staticRenderFns$L,
+const __cssModules$M = {};
+var __component__$M = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$M,
+  render$M,
+  staticRenderFns$M,
   false,
-  __vue2_injectStyles$L,
+  __vue2_injectStyles$M,
   null,
   null,
   null
 );
-function __vue2_injectStyles$L(context) {
-  for (let o in __cssModules$L) {
-    this[o] = __cssModules$L[o];
+function __vue2_injectStyles$M(context) {
+  for (let o in __cssModules$M) {
+    this[o] = __cssModules$M[o];
   }
 }
 var wBadge = /* @__PURE__ */ function() {
-  return __component__$L.exports;
+  return __component__$M.exports;
 }();
-var render$K = function() {
+var render$L = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1188,9 +1188,9 @@ var render$K = function() {
     return [i && _vm.$scopedSlots.separator ? _c("span", { key: i + "a", staticClass: "w-breadcrumbs__separator", class: _vm.separatorColor }, [_vm._t("separator", null, { "index": i })], 2) : i ? _c("w-icon", { key: i + "b", staticClass: "w-breadcrumbs__separator", class: _vm.separatorColor }, [_vm._v(_vm._s(_vm.icon))]) : _vm._e(), item[_vm.itemRouteKey] && (i < _vm.items.length - 1 || _vm.linkLastItem) ? [_vm.$scopedSlots.item ? _c(_vm.hasRouter ? "router-link" : "a", { key: i + "c", tag: "component", staticClass: "w-breadcrumbs__item", class: _vm.color || null, attrs: { "to": _vm.hasRouter && item[_vm.itemRouteKey], "href": item[_vm.itemRouteKey] } }, [_vm._t("item", null, { "item": item, "index": i + 1, "isLast": i === _vm.items.length - 1 })], 2) : _c(_vm.hasRouter ? "router-link" : "a", { key: i + "d", tag: "component", staticClass: "w-breadcrumbs__item", class: _vm.color || null, attrs: { "to": _vm.hasRouter && item[_vm.itemRouteKey], "href": item[_vm.itemRouteKey] }, domProps: { "innerHTML": _vm._s(item[_vm.itemLabelKey]) } })] : _vm.$scopedSlots.item ? _vm._t("item", null, { "item": item, "index": i + 1, "isLast": i === _vm.items.length - 1 }) : _c("span", { key: i + "f", domProps: { "innerHTML": _vm._s(item[_vm.itemLabelKey]) } })];
   })], 2);
 };
-var staticRenderFns$K = [];
+var staticRenderFns$L = [];
 var wBreadcrumbs_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$K = {
+const __vue2_script$L = {
   name: "w-breadcrumbs",
   props: {
     items: { type: Array, required: true },
@@ -1221,37 +1221,36 @@ const __vue2_script$K = {
     }
   }
 };
-const __cssModules$K = {};
-var __component__$K = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$K,
-  render$K,
-  staticRenderFns$K,
+const __cssModules$L = {};
+var __component__$L = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$L,
+  render$L,
+  staticRenderFns$L,
   false,
-  __vue2_injectStyles$K,
+  __vue2_injectStyles$L,
   null,
   null,
   null
 );
-function __vue2_injectStyles$K(context) {
-  for (let o in __cssModules$K) {
-    this[o] = __cssModules$K[o];
+function __vue2_injectStyles$L(context) {
+  for (let o in __cssModules$L) {
+    this[o] = __cssModules$L[o];
   }
 }
 var wBreadcrumbs = /* @__PURE__ */ function() {
-  return __component__$K.exports;
+  return __component__$L.exports;
 }();
-var render$J = function() {
+var render$K = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c(_vm.route ? "a" : "button", _vm._g(_vm._b({ tag: "component", staticClass: "w-button", class: _vm.classes, style: _vm.styles, attrs: { "type": !_vm.route && _vm.type, "href": _vm.route && (_vm.externalLink ? _vm.route : _vm.resolvedRoute) || null, "disabled": !!_vm.disabled || null } }, "component", _vm.$attrs, false), _vm.listeners), [_vm.icon ? _c("w-icon", _vm._b({}, "w-icon", _vm.iconProps || {}, false), [_vm._v(_vm._s(_vm.icon))]) : _vm._t("default"), _c("transition", { attrs: { "name": "scale-fade" } }, [_vm.loading ? _c("div", { staticClass: "w-button__loader" }, [_vm._t("loading", function() {
+  return _c(_vm.route ? "a" : "button", _vm._g({ tag: "component", staticClass: "w-button", class: _vm.classes, style: _vm.styles, attrs: { "type": !_vm.route && _vm.type, "href": _vm.route && (_vm.externalLink ? _vm.route : _vm.resolvedRoute) || null, "disabled": !!_vm.disabled || null } }, _vm.listeners), [_vm.icon ? _c("w-icon", _vm._b({}, "w-icon", _vm.iconProps || {}, false), [_vm._v(_vm._s(_vm.icon))]) : _vm._t("default"), _c("transition", { attrs: { "name": "scale-fade" } }, [_vm.loading ? _c("div", { staticClass: "w-button__loader" }, [_vm._t("loading", function() {
     return [_c("svg", { attrs: { "viewBox": "0 0 40 40" } }, [_c("circle", { attrs: { "cx": "20", "cy": "20", "r": "18", "fill": "transparent", "stroke": "currentColor", "stroke-width": "4", "stroke-linecap": "round" } })])];
   })], 2) : _vm._e()])], 2);
 };
-var staticRenderFns$J = [];
-var wButton_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$J = {
-  name: "w-button",
+var staticRenderFns$K = [];
+var button_vue_vue_type_style_index_0_lang = "";
+const __vue2_script$K = {
   props: {
     color: { type: String },
     bgColor: { type: String },
@@ -1344,6 +1343,80 @@ const __vue2_script$J = {
     }
   }
 };
+const __cssModules$K = {};
+var __component__$K = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$K,
+  render$K,
+  staticRenderFns$K,
+  false,
+  __vue2_injectStyles$K,
+  null,
+  null,
+  null
+);
+function __vue2_injectStyles$K(context) {
+  for (let o in __cssModules$K) {
+    this[o] = __cssModules$K[o];
+  }
+}
+var ButtonPartial = /* @__PURE__ */ function() {
+  return __component__$K.exports;
+}();
+var render$J = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _vm.tooltip ? _c("w-tooltip", _vm._b({ tag: "component", scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
+    var on = ref.on;
+    return [_c("button-partial", _vm._g(_vm._b({}, "button-partial", _vm.buttonProps, false), Object.assign({}, _vm.$listeners, on)), [_vm._t("default")], 2)];
+  } }], null, true) }, "component", _vm.tooltipProps || {}, false), [_c("div", { domProps: { "innerHTML": _vm._s(_vm.tooltip) } })]) : _c("button-partial", _vm._g(_vm._b({}, "button-partial", _vm.buttonProps, false), _vm.$listeners), [_vm._t("default")], 2);
+};
+var staticRenderFns$J = [];
+const __vue2_script$J = {
+  name: "w-button",
+  inheritAttrs: false,
+  props: {
+    color: { type: String },
+    bgColor: { type: String },
+    dark: { type: Boolean },
+    outline: { type: Boolean },
+    text: { type: Boolean },
+    round: { type: Boolean },
+    shadow: { type: Boolean },
+    tile: { type: Boolean },
+    tooltip: { type: String },
+    tooltipProps: { type: Object, default: () => ({}) },
+    route: { type: [String, Object] },
+    forceLink: { type: Boolean },
+    type: { type: String, default: "button" },
+    disabled: { type: Boolean },
+    loading: { type: Boolean },
+    icon: { type: String, default: null },
+    iconProps: { type: Object, default: () => ({}) },
+    absolute: { type: Boolean },
+    fixed: { type: Boolean },
+    top: { type: Boolean },
+    bottom: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    zIndex: { type: [Number, String] },
+    width: { type: [Number, String] },
+    height: { type: [Number, String] },
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean }
+  },
+  components: { ButtonPartial },
+  emits: [],
+  computed: {
+    buttonProps() {
+      const { tooltip, tooltipProps, ...props } = this.$props;
+      return { ...props, ...this.$attrs };
+    }
+  }
+};
 const __cssModules$J = {};
 var __component__$J = /* @__PURE__ */ normalizeComponent(
   __vue2_script$J,
@@ -1360,7 +1433,7 @@ function __vue2_injectStyles$J(context) {
     this[o] = __cssModules$J[o];
   }
 }
-var wButton = /* @__PURE__ */ function() {
+var index$1 = /* @__PURE__ */ function() {
   return __component__$J.exports;
 }();
 const objectifyClasses = (classes = {}) => {
@@ -1507,14 +1580,14 @@ var render$H = function() {
       return null;
     }
     return _vm.onInput.apply(null, arguments);
-  } } }), _vm.hasLabel && _vm.labelOnLeft ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pr2", class: _vm.labelClasses, attrs: { "for": "w-checkbox--" + _vm._uid } }, [_vm._t("default", function() {
+  } } }), _vm.hasLabel && _vm.labelOnLeft ? [_vm.$slots.default ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pr2", class: _vm.labelClasses, attrs: { "for": "w-checkbox--" + _vm._uid } }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
-  })], 2) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-checkbox__input", class: this.color, on: { "click": function($event) {
+  })], 2) : _vm.label ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pr2", class: _vm.labelClasses, attrs: { "for": "w-checkbox--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-checkbox__input", class: this.color, on: { "click": function($event) {
     _vm.$refs.input.focus();
     _vm.$refs.input.click();
-  } } }, [_c("svg", { attrs: { "width": "11px", "height": "9px", "viewbox": "0 0 12 9" } }, [_c("polyline", { attrs: { "points": "1 5 4 8 10 2" } })])]), _vm.hasLabel && !_vm.labelOnLeft ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pl2", class: _vm.labelClasses, attrs: { "for": "w-checkbox--" + _vm._uid } }, [_vm._t("default", function() {
+  } } }, [_c("svg", { attrs: { "viewBox": "-0.5 0 12 10" } }, [_c("polyline", { attrs: { "points": "1 5 4 8 10 2" } })])]), _vm.hasLabel && !_vm.labelOnLeft ? [_vm.$slots.default ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pl2", class: _vm.labelClasses, attrs: { "for": "w-checkbox--" + _vm._uid } }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
-  })], 2) : _vm._e()] : _vm._e()], 2);
+  })], 2) : _vm.label ? _c("label", { staticClass: "w-checkbox__label w-form-el-shakable pl2", class: _vm.labelClasses, attrs: { "for": "w-checkbox--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e()], 2);
 };
 var staticRenderFns$H = [];
 var wCheckbox_vue_vue_type_style_index_0_lang = "";
@@ -1617,7 +1690,7 @@ var render$G = function() {
       return _vm.toggleCheck(item, $event);
     }, "focus": function($event) {
       return _vm.$emit("focus", $event);
-    } } }, "w-checkbox", { label: item.label, color: item.color, labelOnLeft: _vm.labelOnLeft, labelColor: _vm.labelColor, round: _vm.round }, false), [_vm.$slots["item." + (i + 1)] || _vm.$slots.item ? _vm._t(_vm.$slots["item." + (i + 1)] ? "item." + (i + 1) : "item", null, { "item": _vm.getOriginalItem(item), "checked": !!item._isChecked, "index": i + 1 }) : _vm._e()], 2);
+    } } }, "w-checkbox", { label: item.label, color: item.color, labelOnLeft: _vm.labelOnLeft, labelColor: _vm.labelColor, round: _vm.round }, false), [_vm.$scopedSlots["item." + (i + 1)] || _vm.$scopedSlots.item ? _vm._t(_vm.$scopedSlots["item." + (i + 1)] ? "item." + (i + 1) : "item", null, { "item": _vm.getOriginalItem(item), "checked": !!item._isChecked, "index": i + 1 }) : _vm._e()], 2);
   }), 1);
 };
 var staticRenderFns$G = [];
@@ -1709,9 +1782,19 @@ var render$F = function() {
     _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() {
     return [_vm._v(_vm._s(_vm.question))];
-  })], 2), _c("div", { staticClass: "w-flex justify-end", class: _vm.inline ? "ml2" : "mt2" }, [_vm.cancel !== false ? _c("w-button", _vm._b({ staticClass: "mr2", attrs: { "bg-color": (_vm.cancelButton || {}).bgColor || "error" }, on: { "click": _vm.onCancel } }, "w-button", _vm.cancelButtonProps, false), [_vm._t("cancel", function() {
+  })], 2), _c("div", { staticClass: "w-flex justify-end", class: _vm.inline ? "ml2" : "mt2" }, [_vm.cancel !== false ? _c("w-button", _vm._b({ staticClass: "mr2", attrs: { "bg-color": (_vm.cancelButton || {}).bgColor || "error" }, on: { "keyup": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "escape", void 0, $event.key, void 0)) {
+      return null;
+    }
+    !_vm.persistent && _vm.onCancel();
+  }, "click": _vm.onCancel } }, "w-button", _vm.cancelButtonProps, false), [_vm._t("cancel", function() {
     return [_vm._v(_vm._s(_vm.cancelButton.label))];
-  })], 2) : _vm._e(), _c("w-button", _vm._b({ attrs: { "bg-color": (_vm.confirmButton || {}).bgColor || "success" }, on: { "click": _vm.onConfirm } }, "w-button", _vm.confirmButtonProps, false), [_vm._t("confirm", function() {
+  })], 2) : _vm._e(), _c("w-button", _vm._b({ directives: [{ name: "focus", rawName: "v-focus" }], attrs: { "bg-color": (_vm.confirmButton || {}).bgColor || "success" }, on: { "keyup": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "escape", void 0, $event.key, void 0)) {
+      return null;
+    }
+    !_vm.persistent && _vm.onCancel();
+  }, "click": _vm.onConfirm } }, "w-button", _vm.confirmButtonProps, false), [_vm._t("confirm", function() {
     return [_vm._v(_vm._s(_vm.confirmButton.label))];
   })], 2)], 1)])], 1)], 1);
 };
@@ -1727,7 +1810,8 @@ const __vue2_script$F = {
     cancel: { type: [Boolean, Object, String], default: void 0 },
     confirm: { type: [Object, String] },
     inline: { type: Boolean },
-    menu: { type: Object },
+    menu: { type: Object, default: () => ({}) },
+    tooltip: { type: [Boolean, Object, String] },
     noArrow: { type: Boolean },
     top: { type: Boolean },
     bottom: { type: Boolean },
@@ -1782,11 +1866,20 @@ const __vue2_script$F = {
         ...this.menu
       };
     },
+    tooltipObject() {
+      let tooltip = { label: typeof this.tooltip === "string" ? this.tooltip : "" };
+      if (typeof this.tooltip === "object")
+        tooltip = Object.assign({}, tooltip, this.tooltip);
+      return tooltip;
+    },
     buttonProps() {
+      const { label, ...tooltipProps } = this.tooltipObject;
       return {
         bgColor: this.bgColor,
         color: this.color,
         icon: this.icon,
+        tooltip: label,
+        tooltipProps,
         ...this.mainButton
       };
     }
@@ -2390,7 +2483,7 @@ var render$y = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { class: _vm.classes }, [_c("div", { staticClass: "w-flex grow", class: [_vm.column ? "column" : "align-center", _vm.wrap ? "wrap" : ""] }, [_vm._t("default")], 2), _c("w-transition-expand", { attrs: { "y": "" } }, [_vm.Validation.message ? [_vm.$slots["error-message"] ? _c("div", { staticClass: "w-form-el__error", class: _vm.formProps.validationColor }, [_vm._t("error-message", null, { "message": _vm.Validation.message })], 2) : _c("div", { staticClass: "w-form-el__error error", class: _vm.formProps.validationColor, domProps: { "innerHTML": _vm._s(_vm.Validation.message) } })] : _vm._e()], 2)], 1);
+  return _c("div", { class: _vm.classes }, [_c("div", { staticClass: "w-flex grow", class: [_vm.column ? "column" : "align-center", _vm.wrap ? "wrap" : ""] }, [_vm._t("default")], 2), _c("w-transition-expand", { attrs: { "y": "" } }, [_vm.Validation.message ? [_vm.$scopedSlots["error-message"] ? _c("div", { staticClass: "w-form-el__error", class: _vm.formProps.validationColor }, [_vm._t("error-message", null, { "message": _vm.Validation.message })], 2) : _c("div", { staticClass: "w-form-el__error error", class: _vm.formProps.validationColor, domProps: { "innerHTML": _vm._s(_vm.Validation.message) } })] : _vm._e()], 2)], 1);
 };
 var staticRenderFns$y = [];
 var wFormElement_vue_vue_type_style_index_0_lang = "";
@@ -2676,6 +2769,8 @@ function __vue2_injectStyles$w(context) {
 var wIcon = /* @__PURE__ */ function() {
   return __component__$w.exports;
 }();
+const consoleWarn = (message) => console.warn(`Wave UI: ${message}`);
+const consoleError = (message) => console.error(`Wave UI: ${message}`);
 var render$v = function() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -2924,8 +3019,8 @@ const __vue2_script$u = {
   },
   computed: {
     attrs() {
-      const { class: classes, ...attrs } = this.$attrs;
-      return attrs;
+      const { class: classes, ...htmlAttrs } = this.$attrs;
+      return htmlAttrs;
     },
     listeners() {
       const { input, focus, blur, ...listeners } = this.$listeners;
@@ -3684,6 +3779,7 @@ var wMenu_vue_vue_type_style_index_0_lang = "";
 const __vue2_script$s = {
   name: "w-menu",
   mixins: [DetachableMixin],
+  inheritAttrs: false,
   props: {
     value: {},
     showOnHover: { type: Boolean },
@@ -4044,6 +4140,7 @@ const __vue2_script$q = {
     value: {},
     opacity: { type: [Number, String, Boolean] },
     bgColor: { type: String },
+    absolute: { type: Boolean },
     zIndex: { type: [Number, String, Boolean] },
     persistent: { type: Boolean },
     persistentNoAnimation: { type: Boolean }
@@ -4064,7 +4161,8 @@ const __vue2_script$q = {
     },
     classes() {
       return {
-        "w-overlay--persistent-animate": this.persistentAnimate
+        "w-overlay--persistent-animate": this.persistentAnimate,
+        "w-overlay--absolute": this.absolute
       };
     },
     styles() {
@@ -4159,9 +4257,9 @@ var render$o = 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("svg", { staticClass: "w-progress__progress", style: "stroke-dashoffset: " + (1 - _vm.progressValue / 100) * _vm.circleCircumference, attrs: { "viewBox": _vm.circleCenter / 2 + " " + _vm.circleCenter / 2 + " " + _vm.circleCenter + " " + _vm.circleCenter } }, [_c("circle", { 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, 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()], 2);
+  })], 2) : _vm._e()]);
 };
 var staticRenderFns$o = [];
 var wProgress_vue_vue_type_style_index_0_lang = "";
@@ -4267,14 +4365,14 @@ var render$n = function() {
     return _vm.$emit("focus", $event);
   }, "change": function($event) {
     _vm.onInput($event);
-  } } }), _vm.hasLabel && _vm.labelOnLeft ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pr2", class: _vm.labelClasses, attrs: { "for": "w-radio--" + _vm._uid } }, [_vm._t("default", function() {
+  } } }), _vm.hasLabel && _vm.labelOnLeft ? [_vm.$slots.default ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pr2", class: _vm.labelClasses, attrs: { "for": "w-radio--" + _vm._uid } }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
-  })], 2) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-radio__input", class: this.color, on: { "click": function($event) {
+  })], 2) : _vm.label ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pr2", class: _vm.labelClasses, attrs: { "for": "w-radio--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-radio__input", class: this.color, on: { "click": function($event) {
     _vm.$refs.input.focus();
     _vm.$refs.input.click();
-  } } }), _vm.hasLabel && !_vm.labelOnLeft ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pl2", class: _vm.labelClasses, attrs: { "for": "w-radio--" + _vm._uid } }, [_vm._t("default", function() {
+  } } }), _vm.hasLabel && !_vm.labelOnLeft ? [_vm.$slots.default ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pl2", class: _vm.labelClasses, attrs: { "for": "w-radio--" + _vm._uid } }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
-  })], 2) : _vm._e()] : _vm._e()], 2);
+  })], 2) : _vm.label ? _c("label", { staticClass: "w-radio__label w-form-el-shakable pl2", class: _vm.labelClasses, attrs: { "for": "w-radio--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e()], 2);
 };
 var staticRenderFns$n = [];
 var wRadio_vue_vue_type_style_index_0_lang = "";
@@ -4380,7 +4478,7 @@ var render$m = function() {
       return _vm.onInput(item);
     }, "focus": function($event) {
       return _vm.$emit("focus", $event);
-    } } }, "w-radio", { label: item.label, color: item.color, labelOnLeft: _vm.labelOnLeft, labelColor: _vm.labelColor }, false), [_vm.$slots["item." + (i + 1)] || _vm.$slots.item ? _vm._t(_vm.$slots["item." + (i + 1)] ? "item." + (i + 1) : "item", null, { "item": _vm.getOriginalItem(item), "index": i + 1, "checked": item.value === _vm.value }) : _vm._e()], 2);
+    } } }, "w-radio", { label: item.label, color: item.color, labelOnLeft: _vm.labelOnLeft, labelColor: _vm.labelColor }, false), [_vm.$scopedSlots["item." + (i + 1)] || _vm.$scopedSlots.item ? _vm._t(_vm.$scopedSlots["item." + (i + 1)] ? "item." + (i + 1) : "item", null, { "item": _vm.getOriginalItem(item), "index": i + 1, "checked": item.value === _vm.value }) : _vm._e()], 2);
   }), 1);
 };
 var staticRenderFns$m = [];
@@ -5184,7 +5282,7 @@ var render$g = 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 ? _c("div", { staticClass: "w-switch__thumb" }, [_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" ? { "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() {
     return [_vm._v(_vm._s(_vm.label))];
   })], 2) : _vm._e()] : _vm._e()], 2);
 };
@@ -5200,7 +5298,8 @@ const __vue2_script$g = {
     color: { type: String, default: "primary" },
     labelColor: { type: String, default: "primary" },
     thin: { type: Boolean },
-    noRipple: { type: Boolean }
+    noRipple: { type: Boolean },
+    loading: { type: [Boolean, Number], default: false }
   },
   emits: ["input", "update:modelValue", "focus"],
   data() {
@@ -5226,6 +5325,7 @@ const __vue2_script$g = {
         "w-switch--ripple": this.ripple.start,
         "w-switch--custom-thumb": this.$slots.thumb,
         "w-switch--custom-track": this.$slots.track,
+        "w-switch--loading": this.loading,
         "w-switch--rippled": this.ripple.end
       };
     },
@@ -5438,8 +5538,10 @@ const __vue2_script$e = {
       }
       if (!this.fillBar && this.activeTabEl) {
         const { left, width } = this.activeTabEl.getBoundingClientRect();
-        const { left: parentLeft } = this.activeTabEl.parentNode.getBoundingClientRect();
-        this.slider.left = `${left - parentLeft + this.activeTabEl.parentNode.scrollLeft}px`;
+        const tabsBar = this.activeTabEl.parentNode;
+        const { left: parentLeft } = tabsBar.getBoundingClientRect();
+        const { borderLeftWidth } = getComputedStyle(tabsBar);
+        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}%`;
@@ -5532,11 +5634,11 @@ var render$d = function() {
     }, { "header": header, "label": header.label, "index": i + 1 }) : _c("span", { domProps: { "innerHTML": _vm._s(header.label || "") } })] : _vm._e(), header.sortable !== false && header.align !== "right" ? _c("w-icon", { staticClass: "w-table__header-sort", class: _vm.headerSortClasses(header) }, [_vm._v("wi-arrow-down")]) : _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 === i }, on: { "click": function($event) {
       $event.stopPropagation();
     } } }) : _vm._e()], 2);
-  }), 0)]) : _vm._e(), _c("tbody", [_vm.loading ? _c("tr", { staticClass: "w-table__progress-bar" }, [_c("td", { attrs: { "colspan": _vm.headers.length } }, [_c("w-progress", { attrs: { "tile": "" } }), _c("div", { staticClass: "w-table__loading-text" }, [_vm._t("loading", function() {
+  }), 0), _c("w-transition-fade", [_vm.loading === "header" ? _c("tr", { staticClass: "w-table__progress-bar" }, [_c("td", { attrs: { "colspan": _vm.headers.length } }, [_c("w-progress", { attrs: { "tile": "" } })], 1)]) : _vm._e()])], 1) : _vm._e(), _c("tbody", [_vm.loading === true ? _c("tr", { staticClass: "w-table__progress-bar" }, [_c("td", { attrs: { "colspan": _vm.headers.length } }, [_c("w-progress", { attrs: { "tile": "" } }), _c("div", { staticClass: "w-table__loading-text" }, [_vm._t("loading", 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._l(_vm.sortedItems, function(item, i) {
+  })], 2)]) : _vm._e(), _vm.tableItems.length && _vm.loading !== true ? [_vm._l(_vm.sortedItems, 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) {
@@ -5545,7 +5647,7 @@ var render$d = 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.$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"] ? _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()])]);
 };
 var staticRenderFns$d = [];
 var wTable_vue_vue_type_style_index_0_lang = "";
@@ -5559,7 +5661,7 @@ const __vue2_script$d = {
     fixedLayout: { type: Boolean },
     fixedHeaders: { type: Boolean },
     fixedFooter: { type: Boolean },
-    loading: { type: Boolean },
+    loading: { type: [Boolean, String] },
     sort: { type: [String, Array] },
     expandableRows: {
       validator: (value) => {
@@ -5586,6 +5688,7 @@ const __vue2_script$d = {
     forceSelection: { type: Boolean },
     uidKey: { type: String, default: "id" },
     filter: { type: Function },
+    sortFunction: { type: Function },
     mobileBreakpoint: { type: Number, default: 0 },
     resizableColumns: { type: Boolean }
   },
@@ -5624,7 +5727,7 @@ const __vue2_script$d = {
       return typeof this.filter === "function" ? this.tableItems.filter(this.filter) : this.tableItems;
     },
     sortedItems() {
-      if (!this.activeSorting.length)
+      if (!this.activeSorting.length || this.sortFunction)
         return this.filteredItems;
       const sortKey1 = this.activeSorting[0].replace(/^[+-]/, "");
       const sortDesc1 = this.activeSorting[0][0] === "-";
@@ -5690,14 +5793,16 @@ const __vue2_script$d = {
         `m${header.align === "right" ? "r" : "l"}1`
       ];
     },
-    sortTable(header) {
+    async sortTable(header) {
       const alreadySortingThis = this.activeSortingKeys[header.key];
       if (alreadySortingThis && this.activeSortingKeys[header.key] === "-") {
         this.activeSorting = [];
-        return this.$emit("update:sort");
       } else
         this.$set(this.activeSorting, 0, (alreadySortingThis ? "-" : "+") + header.key);
       this.$emit("update:sort", this.activeSorting);
+      if (typeof this.sortFunction === "function") {
+        await this.sortFunction(this.activeSorting);
+      }
     },
     doSelectRow(item, index2) {
       const expandable = this.expandableRows === "" ? true : this.expandableRows;
@@ -6141,7 +6246,7 @@ var render$a = function() {
   var _c = _vm._self._c || _h;
   return _c("ul", { staticClass: "w-timeline" }, _vm._l(_vm.items, function(item, i) {
     var _obj;
-    return _c("li", { key: i, staticClass: "w-timeline-item" }, [_c(item[_vm.itemIconKey] || _vm.icon ? "w-icon" : "div", { tag: "component", staticClass: "w-timeline-item__bullet", class: (_obj = {}, _obj[item[_vm.itemColorKey] || _vm.color] = item[_vm.itemColorKey] || _vm.color, _obj) }, [_vm._v(_vm._s(item[_vm.itemIconKey] || _vm.icon))]), !_vm.$slots["item." + (i + 1)] ? _vm._t("item", function() {
+    return _c("li", { key: i, staticClass: "w-timeline-item" }, [_c(item[_vm.itemIconKey] || _vm.icon ? "w-icon" : "div", { tag: "component", staticClass: "w-timeline-item__bullet", class: (_obj = {}, _obj[item[_vm.itemColorKey] || _vm.color] = item[_vm.itemColorKey] || _vm.color, _obj) }, [_vm._v(_vm._s(item[_vm.itemIconKey] || _vm.icon))]), !_vm.$scopedSlots["item." + (i + 1)] ? _vm._t("item", function() {
       var _obj2;
       return [_c("div", { staticClass: "w-timeline-item__title", class: (_obj2 = {}, _obj2[item[_vm.itemColorKey] || _vm.color] = item[_vm.itemColorKey] || _vm.color, _obj2), domProps: { "innerHTML": _vm._s(item[_vm.itemTitleKey]) } }), _c("div", { staticClass: "w-timeline-item__content", domProps: { "innerHTML": _vm._s(item[_vm.itemContentKey]) } })];
     }, { "item": item, "index": i + 1 }) : _vm._t("item." + (i + 1), null, { "item": item, "index": i + 1 })], 2);
@@ -6845,7 +6950,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   WApp: wApp,
   WBadge: wBadge,
   WBreadcrumbs: wBreadcrumbs,
-  WButton: wButton,
+  WButton: index$1,
   WCard: wCard,
   WCheckbox: wCheckbox,
   WCheckboxes: wCheckboxes,