wave-ui 1.62.0 → 1.63.1

package/dist/wave-ui.es.js

@@ -32,7 +32,7 @@ var __privateWrapper = (obj, member, setter, getter) => {
     }
   };
 };
-var _uid, _notificationDefaults, _notificationManager;
+var _instance, _uid, _notificationDefaults;
 import Vue from "vue";
 const config = Vue.observable({
   breakpoints: {
@@ -51,10 +51,10 @@ const config = Vue.observable({
   colors: {
     primary: "#234781",
     secondary: "#d3ebff",
-    success: "#54b946",
-    error: "#f65555",
+    info: "#3d9ff5",
     warning: "#f80",
-    info: "#3d9ff5"
+    success: "#54b946",
+    error: "#f65555"
   },
   icons: [],
   iconsLigature: false,
@@ -65,22 +65,27 @@ const config = Vue.observable({
   presets: {}
 });
 const mergeConfig = (options, conf = config) => {
-  for (const key in options) {
-    const option = options[key];
-    if (typeof option === "object")
-      mergeConfig(options[key], conf[key]);
-    else
-      conf[key] = option;
+  if (!Object.keys(conf).length)
+    conf = Object.assign(conf, options);
+  else {
+    for (const key in options) {
+      const option = options[key];
+      if (typeof option === "object") {
+        mergeConfig(options[key], conf[key]);
+      } else
+        conf[key] = option;
+    }
   }
+  return conf;
 };
 const _NotificationManager$1 = class {
   constructor() {
     __publicField(this, "notifications");
     __privateAdd(this, _uid, void 0);
     __privateAdd(this, _notificationDefaults, void 0);
-    if (_NotificationManager$1.instance)
-      return _NotificationManager$1.instance;
-    _NotificationManager$1.instance = this;
+    if (__privateGet(_NotificationManager$1, _instance))
+      return __privateGet(_NotificationManager$1, _instance);
+    __privateSet(_NotificationManager$1, _instance, this);
     this.notifications = [];
     __privateSet(this, _uid, 0);
     __privateSet(this, _notificationDefaults, {
@@ -113,10 +118,46 @@ const _NotificationManager$1 = class {
   }
 };
 let NotificationManager$1 = _NotificationManager$1;
+_instance = new WeakMap();
 _uid = new WeakMap();
 _notificationDefaults = new WeakMap();
-__publicField(NotificationManager$1, "instance");
-var colors = [
+__privateAdd(NotificationManager$1, _instance, void 0);
+const shadeColor = (color, amount) => {
+  return "#" + color.slice(1).match(/../g).map((x) => {
+    x = +`0x${x}` + amount;
+    return (x < 0 ? 0 : x > 255 ? 255 : x).toString(16).padStart(2, 0);
+  }).join("");
+};
+const generateColorShades = (config2) => {
+  config2.shades = {};
+  for (let color in config2.colors) {
+    color = { label: color, color: config2.colors[color].replace("#", "") };
+    const col = color.color;
+    if (col.length === 3)
+      color.color = col[0] + "" + col[0] + col[1] + col[1] + col[2] + col[2];
+    for (let i = 1; i <= 3; i++) {
+      const lighterColor = shadeColor(`#${color.color}`, i * 40);
+      const darkerColor = shadeColor(`#${color.color}`, -i * 40);
+      config2.shades[`${color.label}-light${i}`] = lighterColor;
+      config2.shades[`${color.label}-dark${i}`] = darkerColor;
+    }
+  }
+};
+const flattenColors = (themeColors, colorPalette2) => {
+  const colors = {
+    ...colorPalette2.reduce((obj, color) => {
+      obj[color.label] = color.color;
+      const shades = (color.shades || []).reduce((obj2, color2) => {
+        obj2[color2.label] = color2.color;
+        return obj2;
+      }, {});
+      return { ...obj, ...shades };
+    }, { ...themeColors, ...themeColors.shades })
+  };
+  delete colors.shades;
+  return colors;
+};
+const colorPalette = [
   {
     label: "pink",
     color: "#e91e63",
@@ -458,59 +499,50 @@ var colors = [
       { label: "grey-dark5", color: "#353535" },
       { label: "grey-dark6", color: "#252525" }
     ]
-  }
+  },
+  { label: "black", color: "#000" },
+  { label: "white", color: "#fff" },
+  { label: "transparent", color: "transparent" },
+  { label: "inherit", color: "inherit" }
 ];
-const shadeColor = (color, amount) => {
-  return "#" + color.slice(1).match(/../g).map((x) => (x = +`0x${x}` + amount, x < 0 ? 0 : x > 255 ? 255 : x).toString(16).padStart(2, 0)).join("");
+const injectPresets = (component, presets) => {
+  for (const preset in presets) {
+    component.props[preset].default = presets[preset];
+  }
 };
 const _WaveUI = class {
   constructor(options = {}) {
-    __privateAdd(this, _notificationManager, void 0);
-    __publicField(this, "breakpoint", {
-      name: "",
-      xs: false,
-      sm: false,
-      md: false,
-      lg: false,
-      xl: false
+    __publicField(this, "$waveui", {
+      breakpoint: {
+        name: "",
+        xs: false,
+        sm: false,
+        md: false,
+        lg: false,
+        xl: false
+      },
+      config: {},
+      colors: {},
+      _notificationManager: null,
+      notify(...args) {
+        this._notificationManager.notify(...args);
+      }
     });
-    __publicField(this, "colors", colors.reduce((obj, color) => {
-      obj[color.label] = color.color;
-      color.shades.forEach((shade) => obj[shade.label] = shade.color);
-      return obj;
-    }, { ...config.colors, black: "#000", white: "#fff", transparent: "transparent", inherit: "inherit" }));
-    __publicField(this, "config", {});
     if (_WaveUI.instance)
       return _WaveUI.instance;
-    else {
-      __privateSet(this, _notificationManager, new NotificationManager$1());
-      mergeConfig(options);
-      if (config.css.colorShades) {
-        config.colorShades = {};
-        for (let color in config.colors) {
-          color = { label: color, color: config.colors[color].replace("#", "") };
-          const col = color.color;
-          if (col.length === 3)
-            color.color = col[0] + "" + col[0] + col[1] + col[1] + col[2] + col[2];
-          this.colors[color.label] = `#${color.color}`;
-          for (let i = 1; i <= 3; i++) {
-            const lighterColor = shadeColor(`#${color.color}`, i * 40);
-            const darkerColor = shadeColor(`#${color.color}`, -i * 40);
-            this.colors[`${color.label}-light${i}`] = lighterColor;
-            this.colors[`${color.label}-dark${i}`] = darkerColor;
-            config.colorShades[`${color.label}-light${i}`] = lighterColor;
-            config.colorShades[`${color.label}-dark${i}`] = darkerColor;
-          }
-        }
-      }
-      this.config = config;
-      this.notify = (...args) => notificationManager.notify(...args);
-      _WaveUI.instance = this;
-      _WaveUI.vueInstance.prototype.$waveui = _WaveUI.vueInstance.observable(this);
-      delete _WaveUI.vueInstance;
-    }
+    this.$waveui._notificationManager = new NotificationManager$1();
+    this.$waveui.config = mergeConfig(options);
+    const config2 = this.$waveui.config;
+    if (config2.css.colorShades)
+      generateColorShades(config2);
+    this.$waveui.colors = flattenColors(config2.colors, colorPalette);
+    _WaveUI.instance = this;
+    const $waveui = _WaveUI.vueInstance.observable(this.$waveui);
+    _WaveUI.vueInstance.prototype.$waveui = $waveui;
+    delete _WaveUI.vueInstance;
   }
   static install(Vue2, options = {}) {
+    var _a;
     Vue2.directive("focus", {
       inserted: (el) => setTimeout(() => el.focus(), 0)
     });
@@ -526,19 +558,17 @@ const _WaveUI = class {
     const { components: components2 = {} } = options || {};
     for (let id in components2) {
       const component = components2[id];
+      if ((_a = options.presets) == null ? void 0 : _a[component.name])
+        injectPresets(component, options.presets[component.name]);
       Vue2.component(component.name, component);
     }
     _WaveUI.vueInstance = Vue2;
   }
-  notify(...args) {
-    __privateGet(this, _notificationManager).notify(...args);
-  }
 };
 let WaveUI = _WaveUI;
-_notificationManager = new WeakMap();
 __publicField(WaveUI, "instance", null);
 __publicField(WaveUI, "vueInstance", null);
-var render$R = function() {
+var render$S = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -571,7 +601,7 @@ var render$R = function() {
     }, { "item": _vm.getOriginalItem(item), "expanded": item._expanded, "index": i + 1 })], 2) : _vm._e()])], 1);
   }), 0);
 };
-var staticRenderFns$R = [];
+var staticRenderFns$S = [];
 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;
@@ -627,7 +657,7 @@ function normalizeComponent(scriptExports, render2, staticRenderFns2, functional
     options
   };
 }
-const __vue2_script$R = {
+const __vue2_script$S = {
   name: "w-accordion",
   props: {
     value: { type: Array },
@@ -716,26 +746,26 @@ const __vue2_script$R = {
     }
   }
 };
-const __cssModules$R = {};
-var __component__$R = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$R,
-  render$R,
-  staticRenderFns$R,
+const __cssModules$S = {};
+var __component__$S = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$S,
+  render$S,
+  staticRenderFns$S,
   false,
-  __vue2_injectStyles$R,
+  __vue2_injectStyles$S,
   null,
   null,
   null
 );
-function __vue2_injectStyles$R(context) {
-  for (let o in __cssModules$R) {
-    this[o] = __cssModules$R[o];
+function __vue2_injectStyles$S(context) {
+  for (let o in __cssModules$S) {
+    this[o] = __cssModules$S[o];
   }
 }
 var wAccordion = /* @__PURE__ */ function() {
-  return __component__$R.exports;
+  return __component__$S.exports;
 }();
-var render$Q = function() {
+var render$R = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -745,9 +775,9 @@ var render$Q = function() {
     _vm.$emit("close", false);
   } } }) : _vm._e()] : _vm._t("default")], 2) : _vm._e();
 };
-var staticRenderFns$Q = [];
+var staticRenderFns$R = [];
 var wAlert_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$Q = {
+const __vue2_script$R = {
   name: "w-alert",
   props: {
     value: { default: true },
@@ -823,26 +853,26 @@ const __vue2_script$Q = {
     }
   }
 };
-const __cssModules$Q = {};
-var __component__$Q = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$Q,
-  render$Q,
-  staticRenderFns$Q,
+const __cssModules$R = {};
+var __component__$R = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$R,
+  render$R,
+  staticRenderFns$R,
   false,
-  __vue2_injectStyles$Q,
+  __vue2_injectStyles$R,
   null,
   null,
   null
 );
-function __vue2_injectStyles$Q(context) {
-  for (let o in __cssModules$Q) {
-    this[o] = __cssModules$Q[o];
+function __vue2_injectStyles$R(context) {
+  for (let o in __cssModules$R) {
+    this[o] = __cssModules$R[o];
   }
 }
 var wAlert = /* @__PURE__ */ function() {
-  return __component__$Q.exports;
+  return __component__$R.exports;
 }();
-var render$P = function() {
+var render$Q = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -854,9 +884,9 @@ var render$P = function() {
     }, expression: "notif._value" } }, "w-alert", _vm.notifProps(notif), false), [_c("div", { domProps: { "innerHTML": _vm._s(notif.message) } })]) : _vm._e()];
   })], 2);
 };
-var staticRenderFns$P = [];
+var staticRenderFns$Q = [];
 var wNotificationManager_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$P = {
+const __vue2_script$Q = {
   name: "w-notification-manager",
   data: () => ({
     notifManager: null
@@ -887,24 +917,24 @@ const __vue2_script$P = {
     delete this.notifManager;
   }
 };
-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 NotificationManager = /* @__PURE__ */ function() {
-  return __component__$P.exports;
+  return __component__$Q.exports;
 }();
 const cssVars = {
   cssScope: ".w-app",
@@ -913,12 +943,12 @@ const cssVars = {
 const generateColors = (config2) => {
   let styles = "";
   const { cssScope } = cssVars;
-  const { info, warning, success, error, ...colors2 } = config2.colors;
-  for (const color in colors2) {
+  const { info, warning, success, error, ...colors } = config2.colors;
+  for (const color in colors) {
     styles += `${cssScope} .${color}--bg{background-color:${config2.colors[color]}}${cssScope} .${color}{color:${config2.colors[color]}}`;
   }
-  if (config2.css.colorShades && config2.colorShades) {
-    Object.entries(config2.colorShades).forEach(([label, color]) => {
+  if (config2.css.colorShades && config2.shades) {
+    Object.entries(config2.shades).forEach(([label, color]) => {
       styles += `${cssScope} .${label}--bg{background-color:${color}}${cssScope} .${label}{color:${color}}`;
     });
   }
@@ -1018,16 +1048,16 @@ var dynamicCSS = (config2) => {
     styles += genBreakpointLayoutClasses(breakpointsDef2);
   return styles;
 };
-var render$O = function() {
+var render$P = 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$O = [];
+var staticRenderFns$P = [];
 var wApp_vue_vue_type_style_index_0_lang = "";
 let breakpointsDef = { keys: [], values: [] };
-const __vue2_script$O = {
+const __vue2_script$P = {
   name: "w-app",
   props: {
     dark: { type: Boolean },
@@ -1108,26 +1138,26 @@ const __vue2_script$O = {
     window.removeEventListener("resize", this.getBreakpoint);
   }
 };
-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 wApp = /* @__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;
@@ -1135,9 +1165,9 @@ var render$N = function() {
     return [_vm._v(_vm._s(_vm.value === true ? "" : _vm.value || ""))];
   }) : _vm._e()], 2) : _vm._e()])], 2);
 };
-var staticRenderFns$N = [];
+var staticRenderFns$O = [];
 var wBadge_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$N = {
+const __vue2_script$O = {
   name: "w-badge",
   props: {
     value: { default: true },
@@ -1199,26 +1229,26 @@ const __vue2_script$N = {
     }
   }
 };
-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 wBadge = /* @__PURE__ */ function() {
-  return __component__$N.exports;
+  return __component__$O.exports;
 }();
-var render$M = function() {
+var render$N = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1226,9 +1256,9 @@ var render$M = 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$M = [];
+var staticRenderFns$N = [];
 var wBreadcrumbs_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$M = {
+const __vue2_script$N = {
   name: "w-breadcrumbs",
   props: {
     items: { type: Array, required: true },
@@ -1259,26 +1289,26 @@ const __vue2_script$M = {
     }
   }
 };
-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 wBreadcrumbs = /* @__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;
@@ -1286,9 +1316,9 @@ var render$L = 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$L = [];
+var staticRenderFns$M = [];
 var button_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$L = {
+const __vue2_script$M = {
   props: {
     color: { type: String },
     bgColor: { type: String },
@@ -1381,26 +1411,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 ButtonPartial = /* @__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;
@@ -1409,8 +1439,8 @@ var render$K = function() {
     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$K = [];
-const __vue2_script$K = {
+var staticRenderFns$L = [];
+const __vue2_script$L = {
   name: "w-button",
   inheritAttrs: false,
   props: {
@@ -1451,28 +1481,32 @@ const __vue2_script$K = {
   computed: {
     buttonProps() {
       const { tooltip, tooltipProps, ...props } = this.$props;
-      return { ...props, ...this.$attrs };
+      return {
+        ...props,
+        ...this.$attrs,
+        class: this.tooltip && this.$vnode.data.staticClass
+      };
     }
   }
 };
-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 index$1 = /* @__PURE__ */ function() {
-  return __component__$K.exports;
+  return __component__$L.exports;
 }();
 const objectifyClasses = (classes = {}) => {
   if (typeof classes === "string")
@@ -1481,15 +1515,15 @@ const objectifyClasses = (classes = {}) => {
     classes = { [classes.join(" ")]: true };
   return classes;
 };
-var render$J = function() {
+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);
 };
-var staticRenderFns$J = [];
+var staticRenderFns$K = [];
 var wCard_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$J = {
+const __vue2_script$K = {
   name: "w-card",
   props: {
     color: { type: String },
@@ -1537,24 +1571,24 @@ const __vue2_script$J = {
     }
   }
 };
-const __cssModules$J = {};
-var __component__$J = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$J,
-  render$J,
-  staticRenderFns$J,
+const __cssModules$K = {};
+var __component__$K = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$K,
+  render$K,
+  staticRenderFns$K,
   false,
-  __vue2_injectStyles$J,
+  __vue2_injectStyles$K,
   null,
   null,
   null
 );
-function __vue2_injectStyles$J(context) {
-  for (let o in __cssModules$J) {
-    this[o] = __cssModules$J[o];
+function __vue2_injectStyles$K(context) {
+  for (let o in __cssModules$K) {
+    this[o] = __cssModules$K[o];
   }
 }
 var wCard = /* @__PURE__ */ function() {
-  return __component__$J.exports;
+  return __component__$K.exports;
 }();
 var FormElementMixin = {
   inject: {
@@ -1598,7 +1632,7 @@ var FormElementMixin = {
     }
   }
 };
-var render$I = function() {
+var render$J = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1627,9 +1661,9 @@ var render$I = function() {
     return [_vm._v(_vm._s(_vm.label))];
   })], 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$I = [];
+var staticRenderFns$J = [];
 var wCheckbox_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$I = {
+const __vue2_script$J = {
   name: "w-checkbox",
   mixins: [FormElementMixin],
   inject: { wCheckboxes: { default: null } },
@@ -1696,26 +1730,26 @@ const __vue2_script$I = {
     }
   }
 };
-const __cssModules$I = {};
-var __component__$I = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$I,
-  render$I,
-  staticRenderFns$I,
+const __cssModules$J = {};
+var __component__$J = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$J,
+  render$J,
+  staticRenderFns$J,
   false,
-  __vue2_injectStyles$I,
+  __vue2_injectStyles$J,
   null,
   null,
   null
 );
-function __vue2_injectStyles$I(context) {
-  for (let o in __cssModules$I) {
-    this[o] = __cssModules$I[o];
+function __vue2_injectStyles$J(context) {
+  for (let o in __cssModules$J) {
+    this[o] = __cssModules$J[o];
   }
 }
 var wCheckbox = /* @__PURE__ */ function() {
-  return __component__$I.exports;
+  return __component__$J.exports;
 }();
-var render$H = function() {
+var render$I = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1731,9 +1765,9 @@ var render$H = function() {
     } } }, "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$H = [];
+var staticRenderFns$I = [];
 var wCheckboxes_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$H = {
+const __vue2_script$I = {
   name: "w-checkboxes",
   mixins: [FormElementMixin],
   props: {
@@ -1790,26 +1824,26 @@ const __vue2_script$H = {
     }
   }
 };
-const __cssModules$H = {};
-var __component__$H = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$H,
-  render$H,
-  staticRenderFns$H,
+const __cssModules$I = {};
+var __component__$I = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$I,
+  render$I,
+  staticRenderFns$I,
   false,
-  __vue2_injectStyles$H,
+  __vue2_injectStyles$I,
   null,
   null,
   null
 );
-function __vue2_injectStyles$H(context) {
-  for (let o in __cssModules$H) {
-    this[o] = __cssModules$H[o];
+function __vue2_injectStyles$I(context) {
+  for (let o in __cssModules$I) {
+    this[o] = __cssModules$I[o];
   }
 }
 var wCheckboxes = /* @__PURE__ */ function() {
-  return __component__$H.exports;
+  return __component__$I.exports;
 }();
-var render$G = function() {
+var render$H = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1836,8 +1870,8 @@ var render$G = function() {
     return [_vm._v(_vm._s(_vm.confirmButton.label))];
   })], 2)], 1)])], 1)], 1);
 };
-var staticRenderFns$G = [];
-const __vue2_script$G = {
+var staticRenderFns$H = [];
+const __vue2_script$H = {
   name: "w-confirm",
   props: {
     bgColor: { type: String },
@@ -1934,34 +1968,34 @@ const __vue2_script$G = {
     }
   }
 };
-const __cssModules$G = {};
-var __component__$G = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$G,
-  render$G,
-  staticRenderFns$G,
+const __cssModules$H = {};
+var __component__$H = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$H,
+  render$H,
+  staticRenderFns$H,
   false,
-  __vue2_injectStyles$G,
+  __vue2_injectStyles$H,
   null,
   null,
   null
 );
-function __vue2_injectStyles$G(context) {
-  for (let o in __cssModules$G) {
-    this[o] = __cssModules$G[o];
+function __vue2_injectStyles$H(context) {
+  for (let o in __cssModules$H) {
+    this[o] = __cssModules$H[o];
   }
 }
 var wConfirm = /* @__PURE__ */ function() {
-  return __component__$G.exports;
+  return __component__$H.exports;
 }();
-var render$F = function() {
+var render$G = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "w-date-picker", class: _vm.classes, style: _vm.styles }, [_vm._t("default")], 2);
 };
-var staticRenderFns$F = [];
+var staticRenderFns$G = [];
 var wDatePicker_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$F = {
+const __vue2_script$G = {
   name: "w-date-picker",
   props: {},
   emits: [],
@@ -1974,26 +2008,26 @@ const __vue2_script$F = {
     }
   }
 };
-const __cssModules$F = {};
-var __component__$F = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$F,
-  render$F,
-  staticRenderFns$F,
+const __cssModules$G = {};
+var __component__$G = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$G,
+  render$G,
+  staticRenderFns$G,
   false,
-  __vue2_injectStyles$F,
+  __vue2_injectStyles$G,
   null,
   null,
   null
 );
-function __vue2_injectStyles$F(context) {
-  for (let o in __cssModules$F) {
-    this[o] = __cssModules$F[o];
+function __vue2_injectStyles$G(context) {
+  for (let o in __cssModules$G) {
+    this[o] = __cssModules$G[o];
   }
 }
 var wDatePicker = /* @__PURE__ */ function() {
-  return __component__$F.exports;
+  return __component__$G.exports;
 }();
-var render$E = function() {
+var render$F = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -2003,9 +2037,9 @@ var render$E = function() {
     return [_vm._t("actions")];
   }, proxy: true } : null], null, true) }, [_vm._t("default")], 2)], 1)], 1);
 };
-var staticRenderFns$E = [];
+var staticRenderFns$F = [];
 var wDialog_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$E = {
+const __vue2_script$F = {
   name: "w-dialog",
   props: {
     value: { default: true },
@@ -2079,34 +2113,34 @@ const __vue2_script$E = {
     }
   }
 };
-const __cssModules$E = {};
-var __component__$E = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$E,
-  render$E,
-  staticRenderFns$E,
+const __cssModules$F = {};
+var __component__$F = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$F,
+  render$F,
+  staticRenderFns$F,
   false,
-  __vue2_injectStyles$E,
+  __vue2_injectStyles$F,
   null,
   null,
   null
 );
-function __vue2_injectStyles$E(context) {
-  for (let o in __cssModules$E) {
-    this[o] = __cssModules$E[o];
+function __vue2_injectStyles$F(context) {
+  for (let o in __cssModules$F) {
+    this[o] = __cssModules$F[o];
   }
 }
 var wDialog = /* @__PURE__ */ function() {
-  return __component__$E.exports;
+  return __component__$F.exports;
 }();
-var render$D = function() {
+var render$E = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "w-divider", class: _vm.classes, attrs: { "role": _vm.$slots.default ? null : "presentation", "aria-orientation": _vm.vertical ? "vertical" : "horizontal" } }, [_vm._t("default")], 2);
 };
-var staticRenderFns$D = [];
+var staticRenderFns$E = [];
 var wDivider_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$D = {
+const __vue2_script$E = {
   name: "w-divider",
   props: {
     vertical: { type: Boolean },
@@ -2123,26 +2157,26 @@ const __vue2_script$D = {
     }
   }
 };
-const __cssModules$D = {};
-var __component__$D = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$D,
-  render$D,
-  staticRenderFns$D,
+const __cssModules$E = {};
+var __component__$E = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$E,
+  render$E,
+  staticRenderFns$E,
   false,
-  __vue2_injectStyles$D,
+  __vue2_injectStyles$E,
   null,
   null,
   null
 );
-function __vue2_injectStyles$D(context) {
-  for (let o in __cssModules$D) {
-    this[o] = __cssModules$D[o];
+function __vue2_injectStyles$E(context) {
+  for (let o in __cssModules$E) {
+    this[o] = __cssModules$E[o];
   }
 }
 var wDivider = /* @__PURE__ */ function() {
-  return __component__$D.exports;
+  return __component__$E.exports;
 }();
-var render$C = function() {
+var render$D = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -2156,10 +2190,10 @@ var render$C = function() {
     _vm.noOverlay && _vm.onBeforeClose();
   }, "after-leave": _vm.onClose } }, [_vm.showDrawer ? _c(_vm.tag || "aside", { ref: "drawer", tag: "component", staticClass: "w-drawer", class: _vm.drawerClasses, style: _vm.styles }, [_vm._t("default")], 2) : _vm._e()], 1)]], 2) : _vm._e();
 };
-var staticRenderFns$C = [];
+var staticRenderFns$D = [];
 var wDrawer_vue_vue_type_style_index_0_lang = "";
 const oppositeSides = { left: "right", right: "left", top: "down", bottom: "up" };
-const __vue2_script$C = {
+const __vue2_script$D = {
   name: "w-drawer",
   props: {
     value: { default: true },
@@ -2272,34 +2306,34 @@ const __vue2_script$C = {
     }
   }
 };
-const __cssModules$C = {};
-var __component__$C = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$C,
-  render$C,
-  staticRenderFns$C,
+const __cssModules$D = {};
+var __component__$D = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$D,
+  render$D,
+  staticRenderFns$D,
   false,
-  __vue2_injectStyles$C,
+  __vue2_injectStyles$D,
   null,
   null,
   null
 );
-function __vue2_injectStyles$C(context) {
-  for (let o in __cssModules$C) {
-    this[o] = __cssModules$C[o];
+function __vue2_injectStyles$D(context) {
+  for (let o in __cssModules$D) {
+    this[o] = __cssModules$D[o];
   }
 }
 var wDrawer = /* @__PURE__ */ function() {
-  return __component__$C.exports;
+  return __component__$D.exports;
 }();
-var render$B = function() {
+var render$C = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c(_vm.tag, { tag: "component", staticClass: "w-flex", class: _vm.classes }, [_vm._t("default")], 2);
 };
-var staticRenderFns$B = [];
+var staticRenderFns$C = [];
 var wFlex_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$B = {
+const __vue2_script$C = {
   name: "w-flex",
   props: {
     tag: { type: String, default: "div" },
@@ -2347,32 +2381,32 @@ const __vue2_script$B = {
     }
   }
 };
-const __cssModules$B = {};
-var __component__$B = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$B,
-  render$B,
-  staticRenderFns$B,
+const __cssModules$C = {};
+var __component__$C = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$C,
+  render$C,
+  staticRenderFns$C,
   false,
-  __vue2_injectStyles$B,
+  __vue2_injectStyles$C,
   null,
   null,
   null
 );
-function __vue2_injectStyles$B(context) {
-  for (let o in __cssModules$B) {
-    this[o] = __cssModules$B[o];
+function __vue2_injectStyles$C(context) {
+  for (let o in __cssModules$C) {
+    this[o] = __cssModules$C[o];
   }
 }
 var wFlex = /* @__PURE__ */ function() {
-  return __component__$B.exports;
+  return __component__$C.exports;
 }();
-var render$A = function() {
+var render$B = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("form", { staticClass: "w-form", class: _vm.classes, attrs: { "novalidate": "" }, on: { "submit": _vm.onSubmit, "reset": _vm.reset } }, [_vm._t("default")], 2);
 };
-var staticRenderFns$A = [];
+var staticRenderFns$B = [];
 const asyncSome = async (array, predicate) => {
   for (const item of array) {
     if (await predicate(item))
@@ -2380,7 +2414,7 @@ const asyncSome = async (array, predicate) => {
   }
   return false;
 };
-const __vue2_script$A = {
+const __vue2_script$B = {
   name: "w-form",
   props: {
     value: {},
@@ -2501,34 +2535,34 @@ const __vue2_script$A = {
     }
   }
 };
-const __cssModules$A = {};
-var __component__$A = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$A,
-  render$A,
-  staticRenderFns$A,
+const __cssModules$B = {};
+var __component__$B = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$B,
+  render$B,
+  staticRenderFns$B,
   false,
-  __vue2_injectStyles$A,
+  __vue2_injectStyles$B,
   null,
   null,
   null
 );
-function __vue2_injectStyles$A(context) {
-  for (let o in __cssModules$A) {
-    this[o] = __cssModules$A[o];
+function __vue2_injectStyles$B(context) {
+  for (let o in __cssModules$B) {
+    this[o] = __cssModules$B[o];
   }
 }
 var wForm = /* @__PURE__ */ function() {
-  return __component__$A.exports;
+  return __component__$B.exports;
 }();
-var render$z = function() {
+var render$A = 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.$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$z = [];
+var staticRenderFns$A = [];
 var wFormElement_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$z = {
+const __vue2_script$A = {
   name: "w-form-element",
   props: {
     valid: { required: true },
@@ -2608,34 +2642,34 @@ const __vue2_script$z = {
       this.formUnregister(this);
   }
 };
-const __cssModules$z = {};
-var __component__$z = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$z,
-  render$z,
-  staticRenderFns$z,
+const __cssModules$A = {};
+var __component__$A = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$A,
+  render$A,
+  staticRenderFns$A,
   false,
-  __vue2_injectStyles$z,
+  __vue2_injectStyles$A,
   null,
   null,
   null
 );
-function __vue2_injectStyles$z(context) {
-  for (let o in __cssModules$z) {
-    this[o] = __cssModules$z[o];
+function __vue2_injectStyles$A(context) {
+  for (let o in __cssModules$A) {
+    this[o] = __cssModules$A[o];
   }
 }
 var wFormElement = /* @__PURE__ */ function() {
-  return __component__$z.exports;
+  return __component__$A.exports;
 }();
-var render$y = function() {
+var render$z = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c(_vm.tag, { tag: "component", staticClass: "w-grid", class: _vm.classes }, [_vm._t("default")], 2);
 };
-var staticRenderFns$y = [];
+var staticRenderFns$z = [];
 var wGrid_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$y = {
+const __vue2_script$z = {
   name: "w-grid",
   props: {
     tag: { type: String, default: "div" },
@@ -2691,34 +2725,34 @@ const __vue2_script$y = {
     }
   }
 };
-const __cssModules$y = {};
-var __component__$y = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$y,
-  render$y,
-  staticRenderFns$y,
+const __cssModules$z = {};
+var __component__$z = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$z,
+  render$z,
+  staticRenderFns$z,
   false,
-  __vue2_injectStyles$y,
+  __vue2_injectStyles$z,
   null,
   null,
   null
 );
-function __vue2_injectStyles$y(context) {
-  for (let o in __cssModules$y) {
-    this[o] = __cssModules$y[o];
+function __vue2_injectStyles$z(context) {
+  for (let o in __cssModules$z) {
+    this[o] = __cssModules$z[o];
   }
 }
 var wGrid = /* @__PURE__ */ function() {
-  return __component__$y.exports;
+  return __component__$z.exports;
 }();
-var render$x = function() {
+var render$y = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c(_vm.tag || "i", _vm._g({ tag: "component", staticClass: "w-icon", class: _vm.classes, style: _vm.readIcon() && _vm.styles, attrs: { "role": "icon", "aria-hidden": "true" } }, _vm.$listeners), [_vm.hasLigature ? [_vm._v(_vm._s(_vm.icon))] : _vm._e()], 2);
 };
-var staticRenderFns$x = [];
+var staticRenderFns$y = [];
 var wIcon_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$x = {
+const __vue2_script$y = {
   name: "w-icon",
   props: {
     tag: { type: String, default: "i" },
@@ -2791,36 +2825,36 @@ const __vue2_script$x = {
     }
   }
 };
-const __cssModules$x = {};
-var __component__$x = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$x,
-  render$x,
-  staticRenderFns$x,
+const __cssModules$y = {};
+var __component__$y = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$y,
+  render$y,
+  staticRenderFns$y,
   false,
-  __vue2_injectStyles$x,
+  __vue2_injectStyles$y,
   null,
   null,
   null
 );
-function __vue2_injectStyles$x(context) {
-  for (let o in __cssModules$x) {
-    this[o] = __cssModules$x[o];
+function __vue2_injectStyles$y(context) {
+  for (let o in __cssModules$y) {
+    this[o] = __cssModules$y[o];
   }
 }
 var wIcon = /* @__PURE__ */ function() {
-  return __component__$x.exports;
+  return __component__$y.exports;
 }();
 const consoleWarn = (message) => console.warn(`Wave UI: ${message}`);
 const consoleError = (message) => console.error(`Wave UI: ${message}`);
-var render$w = function() {
+var render$x = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c(_vm.wrapperTag, { tag: "component", staticClass: "w-image-wrap", class: _vm.wrapperClasses, style: _vm.wrapperStyles }, [_c("transition", { attrs: { "name": _vm.transition, "appear": "" } }, [_vm.loaded ? _c(_vm.tag, { tag: "component", staticClass: "w-image", class: _vm.imageClasses, style: _vm.imageStyles, attrs: { "src": _vm.tag === "img" ? _vm.imgSrc : null } }) : _vm._e()], 1), !_vm.noSpinner && _vm.loading ? _c("div", { staticClass: "w-image__loader" }, [_vm.$slots.loading ? _vm._t("loading") : _c("w-progress", _vm._b({ attrs: { "circle": "", "indeterminate": "" } }, "w-progress", _vm.spinnerColor ? { color: _vm.spinnerColor } : {}, false))], 2) : _vm._e(), _vm.$slots.default ? _c(_vm.wrapperTag, { tag: "component", staticClass: "w-image__content", class: _vm.contentClass }, [_vm._t("default")], 2) : _vm._e()], 1);
 };
-var staticRenderFns$w = [];
+var staticRenderFns$x = [];
 var wImage_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$w = {
+const __vue2_script$x = {
   name: "w-image",
   props: {
     tag: { type: String, default: "span" },
@@ -2944,26 +2978,26 @@ const __vue2_script$w = {
     }
   }
 };
-const __cssModules$w = {};
-var __component__$w = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$w,
-  render$w,
-  staticRenderFns$w,
+const __cssModules$x = {};
+var __component__$x = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$x,
+  render$x,
+  staticRenderFns$x,
   false,
-  __vue2_injectStyles$w,
+  __vue2_injectStyles$x,
   null,
   null,
   null
 );
-function __vue2_injectStyles$w(context) {
-  for (let o in __cssModules$w) {
-    this[o] = __cssModules$w[o];
+function __vue2_injectStyles$x(context) {
+  for (let o in __cssModules$x) {
+    this[o] = __cssModules$x[o];
   }
 }
 var wImage = /* @__PURE__ */ function() {
-  return __component__$w.exports;
+  return __component__$x.exports;
 }();
-var render$v = function() {
+var render$w = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -3014,9 +3048,9 @@ var render$v = function() {
     return [_vm._v(_vm._s(_vm.label))];
   })], 2) : _vm._e()] : _vm._e()]], 2);
 };
-var staticRenderFns$v = [];
+var staticRenderFns$w = [];
 var wInput_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$v = {
+const __vue2_script$w = {
   name: "w-input",
   mixins: [FormElementMixin],
   props: {
@@ -3209,26 +3243,26 @@ const __vue2_script$v = {
     }
   }
 };
-const __cssModules$v = {};
-var __component__$v = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$v,
-  render$v,
-  staticRenderFns$v,
+const __cssModules$w = {};
+var __component__$w = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$w,
+  render$w,
+  staticRenderFns$w,
   false,
-  __vue2_injectStyles$v,
+  __vue2_injectStyles$w,
   null,
   null,
   null
 );
-function __vue2_injectStyles$v(context) {
-  for (let o in __cssModules$v) {
-    this[o] = __cssModules$v[o];
+function __vue2_injectStyles$w(context) {
+  for (let o in __cssModules$w) {
+    this[o] = __cssModules$w[o];
   }
 }
 var wInput = /* @__PURE__ */ function() {
-  return __component__$v.exports;
+  return __component__$w.exports;
 }();
-var render$u = function() {
+var render$v = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -3268,9 +3302,9 @@ var render$u = function() {
     } }], null, true) }, "w-list", _vm.$props, false)) : _vm._e()], 2);
   }), 0);
 };
-var staticRenderFns$u = [];
+var staticRenderFns$v = [];
 var wList_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$u = {
+const __vue2_script$v = {
   name: "w-list",
   props: {
     items: { type: [Array, Number], required: true },
@@ -3485,7 +3519,11 @@ const __vue2_script$u = {
     applySelectionOnItems(selection) {
       if (!this.isMultipleSelect)
         this.listItems.forEach((item) => item._selected = false);
-      this.checkSelection(selection).forEach((val) => this.listItems.find((item) => item._value === val)._selected = true);
+      this.checkSelection(selection).forEach((val) => {
+        const foundItem = this.listItems.find((item) => item._value === val);
+        if (foundItem)
+          foundItem._selected = true;
+      });
     }
   },
   created() {
@@ -3514,24 +3552,24 @@ const __vue2_script$u = {
     }
   }
 };
-const __cssModules$u = {};
-var __component__$u = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$u,
-  render$u,
-  staticRenderFns$u,
+const __cssModules$v = {};
+var __component__$v = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$v,
+  render$v,
+  staticRenderFns$v,
   false,
-  __vue2_injectStyles$u,
+  __vue2_injectStyles$v,
   null,
   null,
   null
 );
-function __vue2_injectStyles$u(context) {
-  for (let o in __cssModules$u) {
-    this[o] = __cssModules$u[o];
+function __vue2_injectStyles$v(context) {
+  for (let o in __cssModules$v) {
+    this[o] = __cssModules$v[o];
   }
 }
 var wList = /* @__PURE__ */ function() {
-  return __component__$u.exports;
+  return __component__$v.exports;
 }();
 var DetachableMixin = {
   props: {
@@ -3792,7 +3830,7 @@ var DetachableMixin = {
     }
   }
 };
-var render$t = function() {
+var render$u = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -3816,9 +3854,9 @@ var render$t = function() {
     _vm.detachableVisible = false;
   } } }, "w-overlay", _vm.overlayProps, false)) : _vm._e()], 2);
 };
-var staticRenderFns$t = [];
+var staticRenderFns$u = [];
 var wMenu_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$t = {
+const __vue2_script$u = {
   name: "w-menu",
   mixins: [DetachableMixin],
   inheritAttrs: false,
@@ -3977,26 +4015,26 @@ const __vue2_script$t = {
     }
   }
 };
-const __cssModules$t = {};
-var __component__$t = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$t,
-  render$t,
-  staticRenderFns$t,
+const __cssModules$u = {};
+var __component__$u = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$u,
+  render$u,
+  staticRenderFns$u,
   false,
-  __vue2_injectStyles$t,
+  __vue2_injectStyles$u,
   null,
   null,
   null
 );
-function __vue2_injectStyles$t(context) {
-  for (let o in __cssModules$t) {
-    this[o] = __cssModules$t[o];
+function __vue2_injectStyles$u(context) {
+  for (let o in __cssModules$u) {
+    this[o] = __cssModules$u[o];
   }
 }
 var wMenu = /* @__PURE__ */ function() {
-  return __component__$t.exports;
+  return __component__$u.exports;
 }();
-var render$s = function() {
+var render$t = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4005,9 +4043,9 @@ var render$s = function() {
     _vm.$emit("input", false);
   } } }, "w-alert", _vm.alertProps, false), [_vm._t("default")], 2)], 1) : _vm._e()]);
 };
-var staticRenderFns$s = [];
+var staticRenderFns$t = [];
 var wNotification_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$s = {
+const __vue2_script$t = {
   name: "w-notification",
   props: {
     value: { default: true },
@@ -4143,26 +4181,26 @@ const __vue2_script$s = {
     }
   }
 };
-const __cssModules$s = {};
-var __component__$s = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$s,
-  render$s,
-  staticRenderFns$s,
+const __cssModules$t = {};
+var __component__$t = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$t,
+  render$t,
+  staticRenderFns$t,
   false,
-  __vue2_injectStyles$s,
+  __vue2_injectStyles$t,
   null,
   null,
   null
 );
-function __vue2_injectStyles$s(context) {
-  for (let o in __cssModules$s) {
-    this[o] = __cssModules$s[o];
+function __vue2_injectStyles$t(context) {
+  for (let o in __cssModules$t) {
+    this[o] = __cssModules$t[o];
   }
 }
 var wNotification = /* @__PURE__ */ function() {
-  return __component__$s.exports;
+  return __component__$t.exports;
 }();
-var render$r = function() {
+var render$s = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4174,9 +4212,9 @@ var render$r = function() {
     return _vm.onClick.apply(null, arguments);
   }, "click": _vm.onClick } }, [_vm._t("default")], 2) : _vm._e()]);
 };
-var staticRenderFns$r = [];
+var staticRenderFns$s = [];
 var wOverlay_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$r = {
+const __vue2_script$s = {
   name: "w-overlay",
   props: {
     value: {},
@@ -4243,59 +4281,59 @@ const __vue2_script$r = {
     }
   }
 };
-const __cssModules$r = {};
-var __component__$r = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$r,
-  render$r,
-  staticRenderFns$r,
+const __cssModules$s = {};
+var __component__$s = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$s,
+  render$s,
+  staticRenderFns$s,
   false,
-  __vue2_injectStyles$r,
+  __vue2_injectStyles$s,
   null,
   null,
   null
 );
-function __vue2_injectStyles$r(context) {
-  for (let o in __cssModules$r) {
-    this[o] = __cssModules$r[o];
+function __vue2_injectStyles$s(context) {
+  for (let o in __cssModules$s) {
+    this[o] = __cssModules$s[o];
   }
 }
 var wOverlay = /* @__PURE__ */ function() {
-  return __component__$r.exports;
+  return __component__$s.exports;
 }();
-var render$q = function() {
+var render$r = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "w-parallax" });
 };
-var staticRenderFns$q = [];
+var staticRenderFns$r = [];
 var wParallax_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$q = {
+const __vue2_script$r = {
   name: "w-parallax",
   props: {},
   emits: [],
   data: () => ({})
 };
-const __cssModules$q = {};
-var __component__$q = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$q,
-  render$q,
-  staticRenderFns$q,
+const __cssModules$r = {};
+var __component__$r = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$r,
+  render$r,
+  staticRenderFns$r,
   false,
-  __vue2_injectStyles$q,
+  __vue2_injectStyles$r,
   null,
   null,
   null
 );
-function __vue2_injectStyles$q(context) {
-  for (let o in __cssModules$q) {
-    this[o] = __cssModules$q[o];
+function __vue2_injectStyles$r(context) {
+  for (let o in __cssModules$r) {
+    this[o] = __cssModules$r[o];
   }
 }
 var wParallax = /* @__PURE__ */ function() {
-  return __component__$q.exports;
+  return __component__$r.exports;
 }();
-var render$p = function() {
+var render$q = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4303,12 +4341,12 @@ var render$p = function() {
     return [_vm._v(_vm._s(Math.round(_vm.progressValue)) + _vm._s(_vm.circle ? "" : "%"))];
   })], 2) : _vm._e()]);
 };
-var staticRenderFns$p = [];
+var staticRenderFns$q = [];
 var wProgress_vue_vue_type_style_index_0_lang = "";
 const circleSize = 40;
 const circleRadius = circleSize / 2;
 const circleCircumference = Math.round(circleSize * 3.14 * 100) / 100;
-const __vue2_script$p = {
+const __vue2_script$q = {
   name: "w-progress",
   props: {
     value: { type: [Number, String, Boolean], default: -1 },
@@ -4375,26 +4413,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 wProgress = /* @__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;
@@ -4416,9 +4454,9 @@ var render$o = function() {
     return [_vm._v(_vm._s(_vm.label))];
   })], 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$o = [];
+var staticRenderFns$p = [];
 var wRadio_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$o = {
+const __vue2_script$p = {
   name: "w-radio",
   mixins: [FormElementMixin],
   inject: { wRadios: { default: null } },
@@ -4487,26 +4525,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 wRadio = /* @__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;
@@ -4523,9 +4561,9 @@ var render$n = function() {
     } } }, "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$n = [];
+var staticRenderFns$o = [];
 var wRadios_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$n = {
+const __vue2_script$o = {
   name: "w-radios",
   mixins: [FormElementMixin],
   props: {
@@ -4574,26 +4612,26 @@ const __vue2_script$n = {
     }
   }
 };
-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 wRadios = /* @__PURE__ */ function() {
-  return __component__$n.exports;
+  return __component__$o.exports;
 }();
-var render$m = function() {
+var render$n = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -4612,9 +4650,9 @@ var render$m = function() {
     }, "focus": _vm.onFocus, "blur": _vm.onBlur, "keydown": _vm.onKeydown } }, [i - 1 === ~~_vm.rating && _vm.rating - ~~_vm.rating ? _c("i", { staticClass: "w-icon", class: _vm.icon + " " + _vm.color, style: _vm.halfStarStyle, attrs: { "role": "icon", "aria-hidden": "true" } }) : _vm._e()])];
   })], 2);
 };
-var staticRenderFns$m = [];
+var staticRenderFns$n = [];
 var wRating_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$m = {
+const __vue2_script$n = {
   name: "w-rating",
   mixins: [FormElementMixin],
   props: {
@@ -4718,6 +4756,39 @@ const __vue2_script$m = {
     }
   }
 };
+const __cssModules$n = {};
+var __component__$n = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$n,
+  render$n,
+  staticRenderFns$n,
+  false,
+  __vue2_injectStyles$n,
+  null,
+  null,
+  null
+);
+function __vue2_injectStyles$n(context) {
+  for (let o in __cssModules$n) {
+    this[o] = __cssModules$n[o];
+  }
+}
+var wRating = /* @__PURE__ */ function() {
+  return __component__$n.exports;
+}();
+var render$m = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", { staticClass: "w-scrollbar" });
+};
+var staticRenderFns$m = [];
+var wScrollbar_vue_vue_type_style_index_0_lang = "";
+const __vue2_script$m = {
+  name: "w-scrollbar",
+  props: {},
+  emits: [],
+  data: () => ({})
+};
 const __cssModules$m = {};
 var __component__$m = /* @__PURE__ */ normalizeComponent(
   __vue2_script$m,
@@ -4734,7 +4805,7 @@ function __vue2_injectStyles$m(context) {
     this[o] = __cssModules$m[o];
   }
 }
-var wRating = /* @__PURE__ */ function() {
+var wScrollbar = /* @__PURE__ */ function() {
   return __component__$m.exports;
 }();
 var render$l = function() {
@@ -7035,12 +7106,16 @@ var render = function() {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("ul", { staticClass: "w-tree", class: _vm.classes }, _vm._l(_vm.currentDepthItems, function(item, i) {
-    return _c("li", { key: i, staticClass: "w-tree__item", class: _vm.itemClasses(item) }, [_c("div", { staticClass: "w-tree__item-label", attrs: { "tabindex": !_vm.disabled && (item.children || item.branch || _vm.selectable) && !(_vm.unexpandableEmpty && !item.children) ? 0 : null }, on: { "click": function($event) {
-      !_vm.disabled && _vm.onLabelClick(item, $event);
+    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) {
+      !_vm.disabled && !item.disabled && _vm.onLabelClick(item, $event);
     }, "keydown": function($event) {
-      !_vm.disabled && _vm.onLabelKeydown(item, $event);
-    } } }, [(item.children || item.branch) && (_vm.expandOpenIcon && item.open || _vm.expandIcon) && !(_vm.unexpandableEmpty && !item.children) ? _c("w-button", { staticClass: "w-tree__item-expand", attrs: { "color": "inherit", "icon": item.open && _vm.expandOpenIcon || _vm.expandIcon, "icon-props": { rotate90a: !item.open }, "tabindex": -1, "disabled": _vm.disabled, "text": "", "sm": "" } }) : _vm._e(), _vm._t("item-label", function() {
-      return [_vm.itemIcon(item) ? _c("w-icon", { staticClass: "w-tree__item-icon", attrs: { "color": item.originalItem[_vm.itemIconColorKey] || _vm.iconColor } }, [_vm._v(_vm._s(_vm.itemIcon(item)))]) : _vm._e(), _c("span", [_vm._v(_vm._s(item.label))]), _vm.counts && (item.children || item.branch) ? _c("span", { staticClass: "ml1" }, [_vm._v("(" + _vm._s(item.originalItem.children ? item.originalItem.children.length : 0) + ")")]) : _vm._e()];
+      !_vm.disabled && !item.disabled && _vm.onLabelKeydown(item, $event);
+    } } }, "component", item.route && (_obj = {}, _obj[!_vm.$router || _vm.hasExternalLink(item) ? "href" : "to"] = item.route, _obj), false), [(item.children || item.branch) && (_vm.expandOpenIcon && item.open || _vm.expandIcon) && !(_vm.unexpandableEmpty && !item.children) ? _c("w-button", { staticClass: "w-tree__item-expand", attrs: { "color": "inherit", "icon": item.open && _vm.expandOpenIcon || _vm.expandIcon, "icon-props": { rotate90a: !item.open }, "tabindex": -1, "disabled": _vm.disabled || item.disabled, "text": "", "sm": "" }, on: { "click": function($event) {
+      $event.stopPropagation();
+      !_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 });
     }, "after-leave": function($event) {
@@ -7059,11 +7134,11 @@ var render = function() {
       return _vm.$emit("select", $event);
     }, "input": function($event) {
       return _vm.$emit("input", $event);
-    } }, scopedSlots: _vm._u([{ key: "item-label", fn: function(ref) {
+    } }, scopedSlots: _vm._u([{ key: "item", fn: function(ref) {
       var item2 = ref.item;
       var depth = ref.depth;
       var open = ref.open;
-      return [_vm._t("item-label", null, { "item": item2, "depth": depth, "open": open })];
+      return [_vm._t("item", null, { "item": item2, "depth": depth, "open": open })];
     } }], null, true) }, "w-tree", _vm.$props, false)) : _vm._e()], 1)], 1);
   }), 0);
 };
@@ -7091,7 +7166,11 @@ const __vue2_script = {
     counts: { type: Boolean },
     itemIconKey: { type: String, default: "icon" },
     iconColor: { type: String },
-    itemIconColorKey: { type: String, default: "iconColor" }
+    itemLabelKey: { type: String, default: "label" },
+    itemIconColorKey: { type: String, default: "iconColor" },
+    itemRouteKey: { type: String, default: "route" },
+    itemDisabledKey: { type: String, default: "disabled" },
+    itemOpenKey: { type: String, default: "open" }
   },
   emits: ["input", "before-open", "open", "before-close", "close", "click", "select"],
   data: () => ({
@@ -7111,16 +7190,23 @@ const __vue2_script = {
   methods: {
     updateCurrentDepthTree(items, oldItems = []) {
       this.currentDepthItems = [];
+      if (!Array.isArray(items) && typeof items !== "object") {
+        return consoleWarn(`[w-tree] the tree items must be of type array or object, ${typeof items} received.`);
+      }
+      if (!Array.isArray(items))
+        items = [items];
       items.forEach((item, i) => {
         var _a;
         this.currentDepthItems.push({
           originalItem: item,
           _uid: this.depth.toString() + (i + 1),
-          label: item.label,
+          label: item[this.itemLabelKey],
           children: !!item.children,
           branch: item.branch,
+          route: item[this.itemRouteKey],
+          disabled: item[this.itemDisabledKey],
           depth: this.depth,
-          open: !!(((_a = oldItems[i]) == null ? void 0 : _a.open) || this.expandAll)
+          open: !!(((_a = oldItems[i]) == null ? void 0 : _a.open) || this.expandAll || item[this.itemOpenKey])
         });
       });
     },
@@ -7137,6 +7223,9 @@ const __vue2_script = {
       return true;
     },
     onLabelClick(item, e) {
+      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);
@@ -7198,9 +7287,13 @@ const __vue2_script = {
     itemIcon(item) {
       return item.originalItem[this.itemIconKey] || !item.children && !item.branch && this.leafIcon || (item.children || item.branch) && (item.open && this.branchOpenIcon || this.branchIcon);
     },
+    hasExternalLink(item) {
+      return /^(https?:)?\/\/|mailto:|tel:/.test(item[this.itemRouteKey]);
+    },
     itemClasses(item) {
       return {
         [item.children || item.branch ? "w-tree__item--branch" : "w-tree__item--leaf"]: true,
+        "w-tree__item--disabled": item[this.itemDisabledKey],
         "w-tree__item--empty": item.branch && !item.children,
         "w-tree__item--unexpandable": item.branch && !item.children && this.unexpandableEmpty
       };
@@ -7269,6 +7362,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   WRadio: wRadio,
   WRadios: wRadios,
   WRating: wRating,
+  WScrollbar: wScrollbar,
   WSelect: wSelect,
   WSlider: wSlider,
   WSpinner: wSpinner,