wave-ui 1.68.1 → 1.70.0

package/dist/wave-ui.es.js

@@ -34,6 +34,8 @@ var __privateWrapper = (obj, member, setter, getter) => {
 };
 var _instance, _uid, _notificationDefaults;
 import Vue from "vue";
+const consoleWarn = (message) => console.warn(`Wave UI: ${message}`);
+const consoleError = (message) => console.error(`Wave UI: ${message}`);
 const config = Vue.observable({
   breakpoints: {
     xs: 600,
@@ -506,8 +508,24 @@ const colorPalette = [
   { label: "inherit", color: "inherit" }
 ];
 const injectPresets = (component, presets) => {
+  var _a, _b;
   for (const preset in presets) {
-    component.props[preset].default = presets[preset];
+    if (!((_a = component.props) == null ? void 0 : _a[preset])) {
+      let foundProp = false;
+      if (Array.isArray(component.mixins) && component.mixins.length) {
+        for (const mixin of component.mixins) {
+          if ((_b = mixin == null ? void 0 : mixin.props) == null ? void 0 : _b[preset]) {
+            mixin.props[preset].default = presets[preset];
+            foundProp = true;
+            break;
+          }
+        }
+        if (!foundProp)
+          consoleWarn(`Attempting to set a preset on a prop that doesn't exist: \`${component.name}.${preset}\`.`);
+        continue;
+      }
+    } else
+      component.props[preset].default = presets[preset];
   }
 };
 const _WaveUI = class {
@@ -568,7 +586,7 @@ const _WaveUI = class {
 let WaveUI = _WaveUI;
 __publicField(WaveUI, "instance", null);
 __publicField(WaveUI, "vueInstance", null);
-var render$S = function() {
+var render$T = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -601,7 +619,7 @@ var render$S = function() {
     }, { "item": _vm.getOriginalItem(item), "expanded": item._expanded, "index": i + 1 })], 2) : _vm._e()])], 1);
   }), 0);
 };
-var staticRenderFns$S = [];
+var staticRenderFns$T = [];
 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;
@@ -657,7 +675,7 @@ function normalizeComponent(scriptExports, render2, staticRenderFns2, functional
     options
   };
 }
-const __vue2_script$S = {
+const __vue2_script$T = {
   name: "w-accordion",
   props: {
     value: { type: Array },
@@ -746,26 +764,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 wAccordion = /* @__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;
@@ -775,9 +793,9 @@ var render$R = function() {
     _vm.$emit("close", false);
   } } }) : _vm._e()] : _vm._t("default")], 2) : _vm._e();
 };
-var staticRenderFns$R = [];
+var staticRenderFns$S = [];
 var wAlert_vue_vue_type_style_index_0_lang = "";
-const __vue2_script$R = {
+const __vue2_script$S = {
   name: "w-alert",
   props: {
     value: { default: true },
@@ -853,6 +871,282 @@ const __vue2_script$R = {
     }
   }
 };
+const __cssModules$S = {};
+var __component__$S = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$S,
+  render$S,
+  staticRenderFns$S,
+  false,
+  __vue2_injectStyles$S,
+  null,
+  null,
+  null
+);
+function __vue2_injectStyles$S(context) {
+  for (let o in __cssModules$S) {
+    this[o] = __cssModules$S[o];
+  }
+}
+var wAlert = /* @__PURE__ */ function() {
+  return __component__$S.exports;
+}();
+var render$R = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", { staticClass: "w-autocomplete", class: _vm.classes, on: { "click": _vm.onClick } }, [_vm.selection.length ? _vm._l(_vm.selection, function(item, i) {
+    return _c("div", { staticClass: "w-autocomplete__selection" }, [_vm._t("selection", function() {
+      return [_c("span", { domProps: { "innerHTML": _vm._s(item[_vm.itemLabelKey]) } }), _c("w-button", { attrs: { "icon": "wi-cross", "xs": "", "text": "", "color": "currentColor" }, on: { "click": function($event) {
+        $event.stopPropagation();
+        return _vm.unselectItem(i);
+      } } })];
+    }, { "item": item, "unselect": function(i2) {
+      return _vm.unselectItem(i2);
+    } })], 2);
+  }) : _vm._e(), !_vm.selection.length && !_vm.keywords && _vm.placeholder ? _c("div", { staticClass: "w-autocomplete__placeholder", domProps: { "innerHTML": _vm._s(_vm.placeholder) } }) : _vm._e(), _c("input", _vm._g({ ref: "input", staticClass: "w-autocomplete__input", domProps: { "value": _vm.keywords } }, _vm.inputEventListeners)), _c("w-transition-slide-fade", [_vm.menuOpen ? _c("ul", { ref: "menu", staticClass: "w-autocomplete__menu", on: { "mousedown": function($event) {
+    _vm.menuIsBeingClicked = true;
+  }, "mouseup": _vm.setEndOfMenuClick, "touchstart": function($event) {
+    _vm.menuIsBeingClicked = true;
+  }, "touchend": _vm.setEndOfMenuClick } }, [_vm._l(_vm.filteredItems, function(item, i) {
+    return _c("li", { key: i, class: { highlighted: _vm.highlightedItem === item.uid }, on: { "click": function($event) {
+      $event.stopPropagation();
+      _vm.selectItem(item), _vm.$emit("item-click", item);
+    } } }, [_vm._t("item", function() {
+      return [_c("span", { domProps: { "innerHTML": _vm._s(item[_vm.itemLabelKey]) } })];
+    }, { "item": item, "highlighted": _vm.highlightedItem === item.uid })], 2);
+  }), !_vm.filteredItems.length ? _c("li", { staticClass: "w-autocomplete__no-match", class: { "w-autocomplete__no-match--default": !_vm.$slots.noMatch } }, [_vm._t("no-match", function() {
+    return [_c("div", { staticClass: "caption", domProps: { "innerHTML": _vm._s(_vm.noMatch !== void 0 ? _vm.noMatch : "No match.") } })];
+  })], 2) : _vm._e(), _vm.$slots["extra-item"] ? _c("li", { staticClass: "w-autocomplete__extra-item", class: { highlighted: _vm.highlightedItem === "extra-item" }, on: { "click": _vm.selectExtraItem } }, [_vm._t("extra-item")], 2) : _vm._e()], 2) : _vm._e()])], 2);
+};
+var staticRenderFns$R = [];
+var wAutocomplete_vue_vue_type_style_index_0_lang = "";
+const __vue2_script$R = {
+  name: "w-autocomplete",
+  props: {
+    items: { type: Array, required: true },
+    value: { type: [String, Number, Array] },
+    placeholder: { type: String },
+    openOnKeydown: { type: Boolean },
+    multiple: { type: Boolean },
+    allowDuplicates: { type: Boolean },
+    noMatch: { type: String },
+    itemValueKey: { type: String, default: "value" },
+    itemLabelKey: { type: String, default: "label" },
+    itemSearchableKey: { type: String, default: "searchable" }
+  },
+  emits: ["update:modelValue", "input", "focus", "blur", "keydown", "item-click", "item-select", "extra-item-select"],
+  data: () => ({
+    keywords: "",
+    selection: [],
+    menuOpen: false,
+    highlightedItem: null,
+    menuIsBeingClicked: false
+  }),
+  computed: {
+    normalizedKeywords() {
+      return this.normalize(this.keywords);
+    },
+    normalizedSelection() {
+      return this.selection.map((item) => this.normalize(item == null ? void 0 : item.searchable));
+    },
+    optimizedItemsForSearch() {
+      return this.items.map((item, i) => ({
+        ...item,
+        uid: i,
+        searchable: this.normalize(item[this.itemSearchableKey] || "")
+      }));
+    },
+    filteredItems() {
+      let items = this.optimizedItemsForSearch;
+      const selection = this.normalizedSelection.join(",");
+      const isItemNotSelected = (item) => !selection.includes(item.searchable);
+      if (this.keywords) {
+        items = items.filter((item) => {
+          if (!item.searchable.includes(this.normalizedKeywords))
+            return false;
+          else if (this.multiple && !this.allowDuplicates)
+            return isItemNotSelected(item);
+          else
+            return true;
+        });
+      } else if (this.multiple && !this.allowDuplicates)
+        items = items.filter(isItemNotSelected);
+      return items;
+    },
+    highlightedItemIndex() {
+      if (this.highlightedItem === null)
+        return -1;
+      else if (this.highlightedItem === "extra-item")
+        return this.filteredItems.length;
+      return this.filteredItems.findIndex((item) => item.uid === this.highlightedItem);
+    },
+    inputEventListeners() {
+      return {
+        ...this.$attrs,
+        input: (e) => {
+          this.keywords = e.target.value;
+        },
+        focus: (e) => {
+          if (this.menuIsBeingClicked)
+            return;
+          this.onFocus(e);
+          this.$emit("focus", e);
+        },
+        blur: (e) => {
+          if (!this.menuIsBeingClicked)
+            this.$emit("blur", e);
+        },
+        keydown: (e) => {
+          this.onKeydown(e);
+          this.$emit("keydown", e);
+        },
+        drop: this.onDrop,
+        compositionstart: this.onCompositionStart,
+        compositionupdate: this.onCompositionUpdate
+      };
+    },
+    classes() {
+      return {
+        "w-autocomplete--open": this.menuOpen,
+        "w-autocomplete--filled": this.selection.length,
+        "w-autocomplete--has-keywords": this.keywords,
+        "w-autocomplete--empty": !this.selection.length && !this.keywords
+      };
+    }
+  },
+  methods: {
+    normalize(string) {
+      return string.toLowerCase().normalize("NFKD").replace(/\p{Diacritic}/gu, "").replace(/œ/g, "oe");
+    },
+    selectItem(item) {
+      if (!this.multiple)
+        this.selection = [];
+      this.selection.push(item);
+      this.highlightedItem = item.uid;
+      this.keywords = "";
+      const emitPayload = this.multiple ? this.selection.map((item2) => item2[this.itemValueKey]) : item[this.itemValueKey];
+      this.$emit("item-select", item);
+      this.$emit("update:modelValue", emitPayload);
+      this.$emit("input", emitPayload);
+      this.$refs.input.focus();
+      if (!this.multiple)
+        this.closeMenu();
+    },
+    unselectItem(i) {
+      this.selection.splice(i != null ? i : this.selection.length - 1, 1);
+      this.highlightedItem = null;
+      this.$emit("update:modelValue", null);
+      this.$emit("input", null);
+      this.$refs.input.focus();
+    },
+    selectExtraItem() {
+      this.keywords = "";
+      this.$emit("extra-item-select");
+      this.closeMenu();
+    },
+    setEndOfMenuClick() {
+      setTimeout(() => this.menuIsBeingClicked = false, 100);
+    },
+    onClick() {
+      if (!this.openOnKeydown)
+        this.openMenu();
+      this.$refs.input.focus();
+    },
+    onFocus() {
+      if (!this.openOnKeydown)
+        this.openMenu();
+    },
+    onKeydown(e) {
+      var _a;
+      const itemsCount = this.filteredItems.length + (this.$slots["extra-item"] ? 1 : 0);
+      if (!this.openOnKeydown || (this.keywords || e.key.length === 1) && !this.menuOpen)
+        this.openMenu();
+      if (e.keyCode === 9)
+        this.closeMenu();
+      else if (e.keyCode === 8 && (!this.keywords || !e.target.selectionStart && !e.target.selectionEnd)) {
+        this.unselectItem();
+      } else if (e.keyCode === 13) {
+        e.preventDefault();
+        if (this.highlightedItem === "extra-item")
+          this.selectExtraItem();
+        else if (this.highlightedItemIndex >= 0)
+          this.selectItem(this.filteredItems[this.highlightedItemIndex]);
+      } else if ([38, 40].includes(e.keyCode)) {
+        e.preventDefault();
+        let index2 = this.highlightedItemIndex;
+        if (index2 === -1)
+          index2 = e.keyCode === 38 ? itemsCount - 1 : 0;
+        else
+          index2 = (index2 + (e.keyCode === 38 ? -1 : 1) + itemsCount) % itemsCount;
+        if (this.$slots["extra-item"] && index2 === itemsCount - 1)
+          this.highlightedItem = "extra-item";
+        else
+          this.highlightedItem = ((_a = this.filteredItems[index2]) == null ? void 0 : _a.uid) || 0;
+        const menuEl = this.$refs.menu;
+        if (menuEl) {
+          if (this.$slots["extra-item"] && index2 === itemsCount - 1)
+            menuEl.scrollTop = menuEl.scrollHeight;
+          else {
+            const { offsetHeight: itemElHeight, offsetTop: itemElTop } = menuEl.childNodes[index2] || {};
+            if (menuEl.scrollTop + menuEl.offsetHeight - itemElHeight < itemElTop) {
+              menuEl.scrollTop = itemElTop - menuEl.offsetHeight + itemElHeight;
+            } else if (menuEl.scrollTop > itemElTop)
+              menuEl.scrollTop = itemElTop;
+          }
+        }
+      } else if (!this.multiple && this.selection.length && e.key.length === 1)
+        e.preventDefault();
+    },
+    onDrop(e) {
+      if (!this.multiple && this.selection.length)
+        e.preventDefault();
+    },
+    onCompositionStart(e) {
+      if (!this.multiple && this.selection.length)
+        e.target.setAttribute("readonly", true);
+    },
+    onCompositionUpdate(e) {
+      if (!this.multiple && this.selection.length)
+        setTimeout(() => e.target.removeAttribute("readonly"), 200);
+    },
+    openMenu() {
+      if (this.menuOpen)
+        return;
+      this.menuOpen = true;
+      document.addEventListener("click", this.onDocumentClick);
+    },
+    closeMenu() {
+      this.menuOpen = false;
+      document.removeEventListener("click", this.onDocumentClick);
+    },
+    onDocumentClick(e) {
+      if (!this.$el.contains(e.target) && !this.$el.isSameNode(e.target))
+        this.closeMenu();
+    }
+  },
+  created() {
+    if (this.value) {
+      const arrayOfValues = Array.isArray(this.value) ? this.value : [this.value];
+      arrayOfValues.forEach((value) => {
+        this.selection.push(this.optimizedItemsForSearch.find((item) => item[this.itemValueKey] === +value));
+      });
+    }
+  },
+  beforeDestroy() {
+    document.removeEventListener("click", this.onDocumentClick);
+  },
+  watch: {
+    value(value) {
+      this.selection = [];
+      if (value) {
+        const arrayOfValues = Array.isArray(value) ? value : [value];
+        arrayOfValues.forEach((value2) => {
+          this.selection.push(this.optimizedItemsForSearch.find((item) => item[this.itemValueKey] === +value2));
+        });
+      }
+    }
+  }
+};
 const __cssModules$R = {};
 var __component__$R = /* @__PURE__ */ normalizeComponent(
   __vue2_script$R,
@@ -869,7 +1163,7 @@ function __vue2_injectStyles$R(context) {
     this[o] = __cssModules$R[o];
   }
 }
-var wAlert = /* @__PURE__ */ function() {
+var wAutocomplete = /* @__PURE__ */ function() {
   return __component__$R.exports;
 }();
 var render$Q = function() {
@@ -931,10 +1225,11 @@ const cssVars = {
 };
 const generateColors = (config2) => {
   let styles = "";
+  const cssVariables = {};
   const { cssScope } = cssVars;
   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]}}`;
+  for (const colorName in colors) {
+    styles += `${cssScope} .${colorName}--bg{background-color:${config2.colors[colorName]}}${cssScope} .${colorName}{color:${config2.colors[colorName]}}`;
   }
   if (config2.css.colorShades && config2.shades) {
     Object.entries(config2.shades).forEach(([label, color]) => {
@@ -945,10 +1240,14 @@ const generateColors = (config2) => {
   for (const color in statusColors) {
     styles += `${cssScope} .${color}--bg{background-color:${config2.colors[color]}}${cssScope} .${color}{color:${config2.colors[color]}}`;
   }
-  const cssVariables = [];
-  cssVariables.push(`--primary: ${config2.colors.primary}`);
-  styles += `:root {${cssVariables.join(";")}}`;
-  return styles;
+  const allColors = { ...colors, info, warning, success, error };
+  for (const colorName in allColors)
+    cssVariables[colorName] = allColors[colorName];
+  let cssVariablesString = "";
+  Object.entries(cssVariables).forEach(([colorName, colorHex]) => {
+    cssVariablesString += `--w-${colorName}-color: ${colorHex};`;
+  });
+  return `:root{${cssVariablesString}}${styles}`;
 };
 const generateBreakpoints = (breakpoints, grid) => {
   let styles = "";
@@ -984,6 +1283,7 @@ const genBreakpointLayoutClasses = (breakpoints) => {
     "text-nowrap{white-space:nowrap}",
     "row{flex-direction:row}",
     "column{flex-direction:column}",
+    "column-reverse{flex-direction:column-reverse}",
     "grow{flex-grow:1;flex-basis:auto}",
     "no-grow{flex-grow:0}",
     "shrink{flex-shrink:1;margin-left:auto;margin-right:auto}",
@@ -1699,8 +1999,9 @@ const __vue2_script$J = {
   methods: {
     onInput() {
       this.isChecked = !this.isChecked;
-      this.$emit("update:modelValue", this.isChecked);
-      this.$emit("input", this.isChecked);
+      const returnValue = this.isChecked && this.returnValue !== void 0 ? this.returnValue : this.isChecked;
+      this.$emit("update:modelValue", returnValue);
+      this.$emit("input", returnValue);
       if (!this.noRipple) {
         if (this.isChecked) {
           this.ripple.start = true;
@@ -1765,6 +2066,7 @@ const __vue2_script$I = {
   props: {
     items: { type: Array, required: true },
     value: { type: Array },
+    returnValues: { type: Boolean },
     labelOnLeft: { type: Boolean },
     itemLabelKey: { type: String, default: "label" },
     itemValueKey: { type: String, default: "value" },
@@ -1807,7 +2109,7 @@ const __vue2_script$I = {
     },
     toggleCheck(checkbox, isChecked) {
       checkbox._isChecked = isChecked;
-      const selection = this.checkboxItems.filter((item) => item._isChecked).map((item) => item.value);
+      const selection = this.checkboxItems.filter((item) => item._isChecked).map((item) => this.returnValues ? item.returnValue : item.value);
       this.$emit("update:modelValue", selection);
       this.$emit("input", selection);
     },
@@ -2839,8 +3141,6 @@ function __vue2_injectStyles$y(context) {
 var wIcon = /* @__PURE__ */ function() {
   return __component__$y.exports;
 }();
-const consoleWarn = (message) => console.warn(`Wave UI: ${message}`);
-const consoleError = (message) => console.error(`Wave UI: ${message}`);
 var render$x = function() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -3008,9 +3308,11 @@ var render$w = function() {
     _vm.inputValue = $event.target.value;
   } } }) : [_vm.labelPosition === "left" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
-  })], 2) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-input__input-wrap", class: _vm.inputWrapClasses }, [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-left", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
-    return _vm.$emit("click:inner-icon-left", $event);
-  } } }, [_vm._v(_vm._s(_vm.innerIconLeft))]) : _vm._e(), _vm.type === "checkbox" && _vm.type !== "file" ? _c("input", _vm._g(_vm._b({ directives: [{ name: "model", rawName: "v-model", value: _vm.inputValue, expression: "inputValue" }], ref: "input", staticClass: "w-input__input", attrs: { "id": "w-input--" + _vm._uid, "name": _vm.inputName, "placeholder": _vm.placeholder || null, "step": _vm.step || null, "min": _vm.min || null, "max": _vm.max || null, "minlength": _vm.minlength || null, "maxlength": _vm.maxlength || null, "readonly": _vm.isReadonly || null, "aria-readonly": _vm.isReadonly ? "true" : "false", "disabled": _vm.isDisabled || null, "required": _vm.required || null, "tabindex": _vm.tabindex || null, "type": "checkbox" }, domProps: { "checked": Array.isArray(_vm.inputValue) ? _vm._i(_vm.inputValue, null) > -1 : _vm.inputValue }, on: { "input": _vm.onInput, "focus": _vm.onFocus, "blur": _vm.onBlur, "change": function($event) {
+  })], 2) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-input__input-wrap", class: _vm.inputWrapClasses }, [_vm._t("icon-left", function() {
+    return [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-left", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
+      return _vm.$emit("click:inner-icon-left", $event);
+    } } }, [_vm._v(_vm._s(_vm.innerIconLeft))]) : _vm._e()];
+  }, { "inputId": "w-input--" + _vm._uid }), _vm.type === "checkbox" && _vm.type !== "file" ? _c("input", _vm._g(_vm._b({ directives: [{ name: "model", rawName: "v-model", value: _vm.inputValue, expression: "inputValue" }], ref: "input", staticClass: "w-input__input", attrs: { "id": "w-input--" + _vm._uid, "name": _vm.inputName, "placeholder": _vm.placeholder || null, "step": _vm.step || null, "min": _vm.min || null, "max": _vm.max || null, "minlength": _vm.minlength || null, "maxlength": _vm.maxlength || null, "readonly": _vm.isReadonly || null, "aria-readonly": _vm.isReadonly ? "true" : "false", "disabled": _vm.isDisabled || null, "required": _vm.required || null, "tabindex": _vm.tabindex || null, "type": "checkbox" }, domProps: { "checked": Array.isArray(_vm.inputValue) ? _vm._i(_vm.inputValue, null) > -1 : _vm.inputValue }, on: { "input": _vm.onInput, "focus": _vm.onFocus, "blur": _vm.onBlur, "change": function($event) {
     var $$a = _vm.inputValue, $$el = $event.target, $$c = $$el.checked ? true : false;
     if (Array.isArray($$a)) {
       var $$v = null, $$i = _vm._i($$a, $$v);
@@ -3029,15 +3331,17 @@ var render$w = function() {
       return;
     }
     _vm.inputValue = $event.target.value;
-  }, _vm.onInput], "focus": _vm.onFocus, "blur": _vm.onBlur } }, "input", _vm.attrs, false), _vm.listeners)) : [_c("input", _vm._b({ ref: "input", attrs: { "id": "w-input--" + _vm._uid, "type": "file", "name": _vm.name || null, "multiple": _vm.multiple || null, "data-progress": _vm.overallFilesProgress }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "change": _vm.onFileChange } }, "input", _vm.attrs, false)), _c("transition-group", { staticClass: "w-input__input w-input__input--file", attrs: { "tag": "label", "name": "fade", "for": "w-input--" + _vm._uid } }, [!_vm.inputFiles.length && _vm.isFocused ? _c("span", { key: "no-file", staticClass: "w-input__no-file" }, [_vm._t("no-file", function() {
+  }, _vm.onInput], "focus": _vm.onFocus, "blur": _vm.onBlur } }, "input", _vm.attrs, false), _vm.listeners)) : [_c("input", _vm._b({ ref: "input", attrs: { "id": "w-input--" + _vm._uid, "type": "file", "name": _vm.name || null, "multiple": _vm.multiple || null, "disabled": _vm.isDisabled || null, "data-progress": _vm.overallFilesProgress }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "change": _vm.onFileChange } }, "input", _vm.attrs, false)), _c("transition-group", { staticClass: "w-input__input w-input__input--file", attrs: { "tag": "label", "name": "fade", "for": "w-input--" + _vm._uid } }, [!_vm.inputFiles.length && _vm.isFocused ? _c("span", { key: "no-file", staticClass: "w-input__no-file" }, [_vm._t("no-file", function() {
     return [_vm.$slots["no-file"] === void 0 ? [_vm._v("No file")] : _vm._e()];
   })], 2) : _vm._e(), _vm._l(_vm.inputFiles, function(file, i) {
     return _c("span", { key: file.lastModified }, [_vm._v(_vm._s(i ? ", " : "")), _c("span", { key: i + "b", staticClass: "filename" }, [_vm._v(_vm._s(file.base))]), _vm._v(_vm._s(file.extension ? "." + file.extension : ""))]);
-  })], 2)], _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default", function() {
+  })], 2)], _vm.labelPosition === "inside" && _vm.showLabelInside && (_vm.$slots.default || _vm.label) ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.labelClasses }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
-  })], 2) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-right", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
-    return _vm.$emit("click:inner-icon-right", $event);
-  } } }, [_vm._v(_vm._s(_vm.innerIconRight))]) : _vm._e(), _vm.hasLoading || _vm.showProgress && (_vm.uploadInProgress || _vm.uploadComplete) ? _c("w-progress", { staticClass: "fill-width", attrs: { "size": "2", "color": _vm.progressColor || _vm.color, "value": _vm.showProgress ? (_vm.uploadInProgress || _vm.uploadComplete) && _vm.overallFilesProgress : _vm.loadingValue } }) : _vm._e()], 2), _vm.type === "file" && _vm.preview && _vm.inputFiles.length ? _c("label", { staticClass: "d-flex", attrs: { "for": "w-input--" + _vm._uid } }, [_vm._l(_vm.inputFiles, function(file, i) {
+  })], 2) : _vm._e(), _vm._t("icon-right", function() {
+    return [_vm.innerIconRight ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-right", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
+      return _vm.$emit("click:inner-icon-right", $event);
+    } } }, [_vm._v(_vm._s(_vm.innerIconRight))]) : _vm._e()];
+  }, { "inputId": "w-input--" + _vm._uid }), _vm.hasLoading || _vm.showProgress && (_vm.uploadInProgress || _vm.uploadComplete) ? _c("w-progress", { staticClass: "fill-width", attrs: { "size": "2", "color": _vm.progressColor || _vm.color, "value": _vm.showProgress ? (_vm.uploadInProgress || _vm.uploadComplete) && _vm.overallFilesProgress : _vm.loadingValue } }) : _vm._e()], 2), _vm.type === "file" && _vm.preview && _vm.inputFiles.length ? _c("label", { staticClass: "d-flex", attrs: { "for": "w-input--" + _vm._uid } }, [_vm._l(_vm.inputFiles, function(file, i) {
     return [file.progress < 100 ? _c("i", { key: i, staticClass: "w-icon wi-spinner w-icon--spin size--sm w-input__file-preview primary" }) : file.preview ? _c("img", { key: i, staticClass: "w-input__file-preview", attrs: { "src": file.preview, "alt": "" } }) : _c("i", { key: i, staticClass: "w-icon w-input__file-preview primary size--md", class: _vm.preview && typeof _vm.preview === "string" ? _vm.preview : "wi-file" })];
   })], 2) : _vm._e(), _vm.labelPosition === "right" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
@@ -3133,7 +3437,7 @@ const __vue2_script$w = {
     overallFilesProgress() {
       const progress = +this.inputFiles.reduce((total2, file) => total2 + file.progress, 0);
       const total = progress / this.inputFiles.length;
-      this.$emit("update:overallProgress", this.inputFiles.length ? total : void 0);
+      this.$emit("update:overallProgress", this.inputFiles.length ? total : 0);
       return total;
     },
     uploadInProgress() {
@@ -3394,8 +3698,8 @@ const __vue2_script$v = {
         "w-list__item-label--focused": item._focused,
         "w-list__item-label--hoverable": this.hover,
         "w-list__item-label--selectable": this.isSelectable,
-        [item.color]: !!item.color,
-        [this.SelectionColor]: item._selected && !item.color && this.SelectionColor,
+        [item[this.itemColorKey]]: !!item[this.itemColorKey],
+        [this.SelectionColor]: item._selected && !item[this.itemColorKey] && this.SelectionColor,
         [item[this.itemClassKey] || this.itemClass]: item[this.itemClassKey] || this.itemClass
       };
     },
@@ -3519,10 +3823,9 @@ const __vue2_script$v = {
     applySelectionOnItems(selection) {
       if (!this.isMultipleSelect)
         this.listItems.forEach((item) => item._selected = false);
-      this.checkSelection(selection).forEach((val) => {
-        const foundItem = this.listItems.find((item) => item._value === val);
-        if (foundItem)
-          foundItem._selected = true;
+      const selectedItems = this.checkSelection(selection);
+      this.listItems.forEach((item) => {
+        item._selected = selectedItems.find((val) => item._value === val) !== void 0;
       });
     }
   },
@@ -3591,7 +3894,8 @@ var DetachableMixin = {
     detachableDefaultRoot: { default: null }
   },
   data: () => ({
-    docEventListenersHandlers: []
+    docEventListenersHandlers: [],
+    openTimeout: null
   }),
   computed: {
     appendToTarget() {
@@ -3648,12 +3952,17 @@ var DetachableMixin = {
     },
     alignment() {
       return ["top", "bottom"].includes(this.position) && this.alignLeft && "left" || ["top", "bottom"].includes(this.position) && this.alignRight && "right" || ["left", "right"].includes(this.position) && this.alignTop && "top" || ["left", "right"].includes(this.position) && this.alignBottom && "bottom" || "";
+    },
+    shouldShowOnClick() {
+      return this.$options.props.showOnHover && !this.showOnHover || this.$options.props.showOnClick && this.showOnClick;
     }
   },
   methods: {
     async open(e) {
       if (this.delay)
-        await new Promise((resolve) => setTimeout(resolve, this.delay));
+        await new Promise((resolve) => this.openTimeout = setTimeout(resolve, this.delay));
+      if (this.delay && !this.openTimeout)
+        return;
       this.detachableVisible = true;
       if (this.activator)
         this.activatorEl = e.target;
@@ -3795,15 +4104,17 @@ var DetachableMixin = {
         if (this.activator)
           this.bindActivatorEvents();
         if (this.value)
-          this.toggle({ type: "click", target: this.activatorEl });
+          this.open({ target: this.activatorEl });
       });
     }
     if (this.overlay) {
       this.overlayEl = (_a = this.$refs.overlay) == null ? void 0 : _a.$el;
       wrapper.parentNode.insertBefore(this.overlayEl, wrapper);
     }
-    if (this.value && this.activator)
-      this.toggle({ type: "click", target: this.activatorEl });
+    if (this.value && this.activator) {
+      this.toggle({ type: this.shouldShowOnClick ? "click" : "mouseenter", target: this.activatorEl });
+    } else if (this.value)
+      this.open({ target: this.activatorEl });
   },
   beforeDestroy() {
     var _a;
@@ -3821,8 +4132,12 @@ var DetachableMixin = {
   },
   watch: {
     value(bool) {
-      if (!!bool !== this.detachableVisible)
-        this.toggle({ type: "click", target: this.activatorEl });
+      if (!!bool !== this.detachableVisible) {
+        if (bool)
+          this.open({ target: this.activatorEl });
+        else
+          this.close();
+      }
     },
     appendTo() {
       this.removeFromDOM();
@@ -3877,6 +4192,7 @@ const __vue2_script$u = {
     contentClass: { type: [String, Object, Array] },
     arrow: { type: Boolean },
     minWidth: { type: [Number, String] },
+    maxWidth: { type: [Number, String] },
     overlay: { type: Boolean },
     overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object },
@@ -3914,6 +4230,12 @@ const __vue2_script$u = {
       else
         return isNaN(this.minWidth) ? this.minWidth : this.minWidth ? `${this.minWidth}px` : 0;
     },
+    menuMaxWidth() {
+      if (this.maxWidth === "activator")
+        return this.activatorWidth ? `${this.activatorWidth}px` : 0;
+      else
+        return isNaN(this.maxWidth) ? this.maxWidth : this.maxWidth ? `${this.maxWidth}px` : 0;
+    },
     menuClasses() {
       return objectifyClasses(this.menuClass);
     },
@@ -3950,7 +4272,8 @@ const __vue2_script$u = {
         top: this.detachableCoords.top && `${~~this.detachableCoords.top}px` || null,
         left: this.detachableCoords.left && `${~~this.detachableCoords.left}px` || null,
         minWidth: this.minWidth && this.menuMinWidth || null,
-        "--w-menu-bg-color": this.arrow && this.$waveui.colors[this.bgColor || "white"]
+        maxWidth: this.maxWidth && this.menuMaxWidth || null,
+        "--w-menu-bg-color": this.arrow && (this.$waveui.colors[this.bgColor] || "rgb(var(--w-base-bg-color-rgb))")
       };
     },
     activatorEventHandlers() {
@@ -4000,6 +4323,7 @@ const __vue2_script$u = {
         this.close();
     },
     async close(force = false) {
+      this.openTimeout = clearTimeout(this.openTimeout);
       if (!this.detachableVisible)
         return;
       if (this.showOnHover && !force) {
@@ -4967,35 +5291,36 @@ var render$l = function() {
   var _c = _vm._self._c || _h;
   return _c(_vm.formRegister ? "w-form-element" : "div", _vm._b({ ref: "formEl", tag: "component", class: _vm.classes, attrs: { "valid": _vm.valid, "wrap": _vm.hasLabel && _vm.labelPosition !== "inside" }, on: { "update:valid": function($event) {
     _vm.valid = $event;
-  }, "reset": _vm.onReset } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.selectionString, disabled: _vm.isDisabled, readonly: _vm.isReadonly, isFocused: _vm.isFocused }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default", function() {
+  }, "reset": _vm.onReset } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.selectionString, disabled: _vm.isDisabled, readonly: _vm.isReadonly, isFocused: _vm.isFocused }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", class: _vm.labelClasses, on: { "click": function($event) {
+    return _vm.$refs["selection-input"].click();
+  } } }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
-  })], 2) : _vm._e()] : _vm._e(), _c("w-menu", _vm._b({ attrs: { "menu-class": "w-select__menu " + (_vm.menuClass || ""), "transition": "slide-fade-down", "append-to": (_vm.menuProps || {}).appendTo !== void 0 ? (_vm.menuProps || {}).appendTo : void 0, "align-left": "", "custom": "", "min-width": "activator" }, on: { "close": function($event) {
-    !$event && _vm.closeMenu();
-  } }, scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
-    ref.on;
+  })], 2) : _vm._e()] : _vm._e(), _c("w-menu", _vm._b({ attrs: { "menu-class": "w-select__menu " + (_vm.menuClass || ""), "transition": "slide-fade-down", "append-to": (_vm.menuProps || {}).appendTo !== void 0 ? (_vm.menuProps || {}).appendTo : void 0, "align-left": "", "custom": "", "min-width": "activator" }, on: { "close": _vm.closeMenu }, scopedSlots: _vm._u([{ key: "activator", fn: function() {
     return [_c("div", { staticClass: "w-select__selection-wrap", class: _vm.inputWrapClasses, attrs: { "role": "button", "aria-haspopup": "listbox", "aria-expanded": _vm.showMenu ? "true" : "false", "aria-owns": "w-select-menu--" + _vm._uid, "aria-activedescendant": "w-select-menu--" + _vm._uid + "_item-1" }, on: { "click": function($event) {
       !_vm.isDisabled && !_vm.isReadonly && _vm.onInputFieldClick();
     } } }, [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-select__icon w-select__icon--inner-left", attrs: { "tag": "label" }, on: { "click": function($event) {
       return _vm.$emit("click:inner-icon-left", $event);
-    } } }, [_vm._v(_vm._s(_vm.innerIconLeft))]) : _vm._e(), _vm.$scopedSlots.selection ? _c("div", { staticClass: "w-select__selection-slot" }, [_vm._t("selection", null, { "item": _vm.multiple ? _vm.inputValue : _vm.inputValue[0] })], 2) : _vm._e(), _c("div", { ref: "selection-input", staticClass: "w-select__selection", class: { "w-select__selection--placeholder": !_vm.$scopedSlots.selection && !_vm.selectionString && _vm.placeholder }, attrs: { "contenteditable": _vm.isDisabled || _vm.isReadonly ? "false" : "true", "id": "w-select--" + _vm._uid, "disabled": _vm.isDisabled || null, "readonly": "", "aria-readonly": "true", "tabindex": _vm.tabindex || null }, domProps: { "innerHTML": _vm._s((_vm.$scopedSlots.selection ? "" : _vm.selectionString) || _vm.placeholder) }, on: { "focus": function($event) {
+    } } }, [_vm._v(_vm._s(_vm.innerIconLeft))]) : _vm._e(), _vm.$scopedSlots.selection ? _c("div", { staticClass: "w-select__selection-slot" }, [_vm._t("selection", null, { "item": _vm.multiple ? _vm.inputValue : _vm.inputValue[0] })], 2) : _vm._e(), _c("div", _vm._b({ ref: "selection-input", staticClass: "w-select__selection", domProps: { "innerHTML": _vm._s(_vm.selectionHtml) }, on: { "focus": function($event) {
       !_vm.isDisabled && !_vm.isReadonly && _vm.onFocus($event);
     }, "blur": _vm.onBlur, "keydown": function($event) {
       !_vm.isDisabled && !_vm.isReadonly && _vm.onKeydown($event);
-    } } }), _vm._l(_vm.inputValue.length ? _vm.inputValue : [{}], function(val, i) {
+    } } }, "div", _vm.selectionAttributes, false)), _vm._l(_vm.inputValue.length ? _vm.inputValue : [{}], function(val, i) {
       return _c("input", { key: i, attrs: { "type": "hidden", "name": _vm.inputName + (_vm.multiple ? "[]" : "") }, domProps: { "value": val.value === void 0 ? "" : val.value.toString() } });
-    }), _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--inside w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default", function() {
+    }), _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--inside w-form-el-shakable", class: _vm.labelClasses }, [_vm._t("default", function() {
       return [_vm._v(_vm._s(_vm.label))];
     })], 2) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-select__icon w-select__icon--inner-right", attrs: { "tag": "label" }, on: { "click": function($event) {
       return _vm.$emit("click:inner-icon-right", $event);
     } } }, [_vm._v(_vm._s(_vm.innerIconRight))]) : _vm._e()], 2)];
-  } }], null, true), model: { value: _vm.showMenu, callback: function($$v) {
+  }, proxy: true }], null, true), model: { value: _vm.showMenu, callback: function($$v) {
     _vm.showMenu = $$v;
   }, expression: "showMenu" } }, "w-menu", _vm.menuProps || {}, false), [_c("w-list", { ref: "w-list", attrs: { "value": _vm.inputValue, "items": _vm.selectItems, "multiple": _vm.multiple, "arrows-navigation": "", "return-object": "", "no-unselect": _vm.noUnselect, "selection-color": _vm.selectionColor, "add-ids": "w-select-menu--" + _vm._uid, "item-color-key": _vm.itemColorKey, "role": "listbox", "tabindex": "-1" }, on: { "input": _vm.onInput, "item-click": function($event) {
     return _vm.$emit("item-click", $event);
   }, "item-select": _vm.onListItemSelect, "keydown:enter": function($event) {
     _vm.noUnselect && !_vm.multiple && _vm.closeMenu();
   }, "keydown:escape": function($event) {
-    _vm.showMenu && (this.showMenu = false);
+    _vm.showMenu && (_vm.showMenu = false);
+  } }, nativeOn: { "keydown": function($event) {
+    return _vm.onWListKeydown.apply(null, arguments);
   } }, scopedSlots: _vm._u([_vm._l(_vm.items.length, function(i) {
     return { key: "item." + i, fn: function(ref) {
       var item = ref.item;
@@ -5012,7 +5337,9 @@ var render$l = function() {
     return [_vm._t("item", function() {
       return [_vm._v(_vm._s(item[_vm.itemLabelKey]))];
     }, { "item": item, "selected": selected, "index": index2 })];
-  } }], null, true) })], 1), _vm.labelPosition === "right" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--right w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default", function() {
+  } }], null, true) })], 1), _vm.labelPosition === "right" ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--right w-form-el-shakable", class: _vm.labelClasses, on: { "click": function($event) {
+    return _vm.$refs["selection-input"].click();
+  } } }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
   })], 2) : _vm._e()] : _vm._e()], 2);
 };
@@ -5056,7 +5383,8 @@ const __vue2_script$l = {
     showMenu: false,
     menuMinWidth: 0,
     isFocused: false,
-    selectionWrapRef: void 0
+    selectionWrapRef: void 0,
+    quickLookup: { string: "", timeout: null }
   }),
   computed: {
     selectItems() {
@@ -5067,30 +5395,45 @@ const __vue2_script$l = {
         return obj;
       });
     },
-    hasValue() {
-      return Array.isArray(this.inputValue) ? this.inputValue.length : this.inputValue !== null;
-    },
     hasLabel() {
       return this.label || this.$slots.default;
     },
     showLabelInside() {
-      return !this.staticLabel || !this.hasValue && !this.placeholder;
+      return !this.staticLabel || !this.inputValue.length && !this.placeholder;
+    },
+    selectionAttributes() {
+      var _a;
+      return {
+        class: { "w-select__selection--placeholder": !this.$scopedSlots.selection && !this.selectionString && this.placeholder },
+        disabled: this.isDisabled || null,
+        readonly: true,
+        ariareadonly: "true",
+        tabindex: (_a = this.tabindex) != null ? _a : null,
+        contenteditable: this.isDisabled || this.isReadonly ? "false" : "true"
+      };
     },
     selectionString() {
-      return this.inputValue && this.inputValue.map(
+      return this.inputValue.map(
         (item) => {
           var _a;
           return item[this.itemValueKey] !== void 0 ? item[this.itemLabelKey] : (_a = item[this.itemLabelKey]) != null ? _a : item;
         }
       ).join(", ");
     },
+    selectionHtml() {
+      if (!this.inputValue.length)
+        return this.placeholder || "";
+      if (this.$scopedSlots.selection)
+        return "";
+      return this.selectionString;
+    },
     classes() {
       return {
         "w-select": true,
         "w-select--disabled": this.isDisabled,
         "w-select--fit-to-content": this.fitToContent,
         "w-select--readonly": this.isReadonly,
-        [`w-select--${this.hasValue ? "filled" : "empty"}`]: true,
+        [`w-select--${this.inputValue.length ? "filled" : "empty"}`]: true,
         "w-select--focused": (this.isFocused || this.showMenu) && !this.isReadonly,
         "w-select--dark": this.dark,
         "w-select--floating-label": this.hasLabel && this.labelPosition === "inside" && !this.staticLabel,
@@ -5147,8 +5490,43 @@ const __vue2_script$l = {
             const direction = e.keyCode === 38 ? -1 : 1;
             index2 = (index2 + items.length + direction) % items.length;
           }
-          this.onInput(items[index2]);
+          let allItemsAreDisabled = false;
+          if (items[index2].disabled) {
+            const direction = e.keyCode === 38 ? -1 : 1;
+            let newIndex = (index2 + direction + items.length) % items.length;
+            const itemsCount = items.length;
+            let loop = 0;
+            while (loop < itemsCount && items[newIndex].disabled) {
+              newIndex = (newIndex + items.length + direction) % items.length;
+              loop++;
+            }
+            if (loop >= itemsCount)
+              allItemsAreDisabled = true;
+            index2 = newIndex;
+          }
+          if (!allItemsAreDisabled)
+            this.onInput(items[index2]);
         }
+      } else if (e.key.length === 1)
+        this.focusItemOnQuickLookup(e);
+    },
+    onWListKeydown(e) {
+      if (e.key.length === 1)
+        this.focusItemOnQuickLookup(e);
+    },
+    focusItemOnQuickLookup(e) {
+      var _a, _b, _c;
+      if (this.quickLookup.timeout)
+        clearTimeout(this.quickLookup.timeout);
+      this.quickLookup.timeout = setTimeout(() => this.quickLookup.string = "", 1e3);
+      this.quickLookup.string += e.key;
+      const re = new RegExp(`^${this.quickLookup.string}`, "i");
+      const itemIndexToFocus = this.selectItems.findIndex(
+        (item) => !item.disabled && item[this.itemLabelKey].match(re)
+      ) + 1;
+      if (itemIndexToFocus) {
+        const selector = `.w-list__item:nth-child(${itemIndexToFocus}) .w-list__item-label`;
+        (_c = (_b = (_a = this.$refs["w-list"]) == null ? void 0 : _a.$el) == null ? void 0 : _b.querySelector(selector)) == null ? void 0 : _c.focus();
       }
     },
     onInput(items) {
@@ -5179,9 +5557,10 @@ const __vue2_script$l = {
       items = Array.isArray(items) ? items : items !== void 0 ? [items] : [];
       const allValues = this.selectItems.map((item) => item.value);
       return items.map((item) => {
+        var _a, _b;
         let value = item;
         if (item && typeof item === "object") {
-          value = item[this.itemValueKey] !== void 0 ? item[this.itemValueKey] : item[this.itemLabelKey] !== void 0 ? item[this.itemLabelKey] : item;
+          value = (_b = (_a = item[this.itemValueKey]) != null ? _a : item[this.itemLabelKey]) != null ? _b : item;
         }
         return this.selectItems[allValues.indexOf(value)];
       }).filter((item) => item !== void 0);
@@ -5199,7 +5578,10 @@ const __vue2_script$l = {
       if (((_a = this.menuProps) == null ? void 0 : _a.hideOnMenuClick) === false)
         return;
       this.showMenu = false;
-      setTimeout(() => this.$refs["selection-input"].focus(), 50);
+      setTimeout(() => {
+        var _a2;
+        return (_a2 = this.$refs["selection-input"]) == null ? void 0 : _a2.focus();
+      }, 50);
     }
   },
   created() {
@@ -5979,7 +6361,7 @@ var render$e = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-table-wrap", class: _vm.wrapClasses }, [_c("table", { staticClass: "w-table", class: _vm.classes, on: { "mousedown": _vm.onMouseDown, "mouseover": _vm.onMouseOver, "mouseout": _vm.onMouseOut } }, [_c("colgroup", { ref: "colgroup" }, _vm._l(_vm.headers, function(header, i) {
+  return _c("div", { staticClass: "w-table w-table--wrap", class: _vm.classes }, [_c("div", { staticClass: "w-table__scroll-wrap" }, [_c("table", { staticClass: "w-table__table", on: { "mousedown": _vm.onMouseDown, "mouseover": _vm.onMouseOver, "mouseout": _vm.onMouseOut } }, [_c("colgroup", { ref: "colgroup" }, _vm._l(_vm.headers, function(header, i) {
     return _c("col", { key: i, staticClass: "w-table__col", class: _vm.colClasses[i], attrs: { "width": header.width || null } });
   }), 0), !_vm.noHeaders ? _c("thead", [_c("tr", _vm._l(_vm.headers, function(header, i) {
     return _c("th", { key: i, staticClass: "w-table__header", class: _vm.headerClasses(header), on: { "click": function($event) {
@@ -5994,7 +6376,7 @@ var render$e = function() {
   })], 2)], 1)]) : !_vm.tableItems.length ? _c("tr", { staticClass: "no-data" }, [_c("td", { staticClass: "w-table__cell text-center", attrs: { "colspan": _vm.headers.length } }, [_vm._t("no-data", function() {
     return [_vm._v("No data to show.")];
   })], 2)]) : _vm._e(), _vm.tableItems.length && _vm.loading !== true ? [_vm._l(_vm.paginatedItems, function(item, i) {
-    return [_vm.$scopedSlots["item"] ? _vm._t("item", null, { "item": item, "index": i + 1, "select": function() {
+    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) {
       return _vm.doSelectRow(item, i);
@@ -6002,21 +6384,27 @@ var render$e = function() {
       var _obj, _obj$1;
       return [_vm.$scopedSlots["item-cell." + header.key] || _vm.$scopedSlots["item-cell." + (j + 1)] || _vm.$scopedSlots["item-cell"] ? _c("td", { key: j + "-a", staticClass: "w-table__cell", class: (_obj = {}, _obj["text-" + (header.align || "left")] = true, _obj["w-table__cell--sticky"] = header.sticky, _obj), attrs: { "data-label": header.label } }, [_vm.$scopedSlots["item-cell." + header.key] ? _vm._t("item-cell." + header.key, null, { "header": header, "item": item, "label": item[header.key] || "", "index": i + 1 }) : _vm.$scopedSlots["item-cell." + (j + 1)] ? _vm._t("item-cell." + (j + 1), null, { "header": header, "item": item, "label": item[header.key] || "", "index": i + 1 }) : _vm.$scopedSlots["item-cell"] ? _vm._t("item-cell", null, { "header": header, "item": item, "label": item[header.key] || "", "index": i + 1 }) : _vm._e(), j < _vm.headers.length - 1 && _vm.resizableColumns ? _c("span", { staticClass: "w-table__col-resizer", class: { "w-table__col-resizer--hover": _vm.colResizing.hover === j, "w-table__col-resizer--active": _vm.colResizing.columnIndex === j } }) : _vm._e()], 2) : _c("td", { key: j + "-b", staticClass: "w-table__cell", class: (_obj$1 = {}, _obj$1["text-" + (header.align || "left")] = true, _obj$1["w-table__cell--sticky"] = header.sticky, _obj$1), attrs: { "data-label": header.label } }, [_c("div", { domProps: { "innerHTML": _vm._s(item[header.key] || "") } }), j < _vm.headers.length - 1 && _vm.resizableColumns ? _c("span", { staticClass: "w-table__col-resizer", class: { "w-table__col-resizer--hover": _vm.colResizing.hover === j, "w-table__col-resizer--active": _vm.colResizing.columnIndex === j } }) : _vm._e()])];
     })], 2), _vm.expandedRowsByUid[item._uid] ? _c("tr", { staticClass: "w-table__row w-table__row--expansion" }, [_c("td", { staticClass: "w-table__cell", attrs: { "colspan": _vm.headers.length } }, [_c("w-transition-expand", { attrs: { "y": "" } }, [_vm.expandedRowsByUid[item._uid] ? _c("div", [_vm._t("row-expansion", null, { "item": item, "index": i + 1 })], 2) : _vm._e(), i < _vm.headers.length - 1 && _vm.resizableColumns ? _c("span", { staticClass: "w-table__col-resizer", class: { "w-table__col-resizer--hover": _vm.colResizing.hover === i, "w-table__col-resizer--active": _vm.colResizing.columnIndex === _vm.j } }) : _vm._e()])], 1)]) : _vm._e()];
-  })] : _vm._e(), _vm.$slots["extra-row"] ? _c("div", { staticClass: "w-table__extra-row" }, [_vm._t("extra-row")], 2) : _vm._e()], 2), _vm.$slots.footer || _vm.$slots["footer-row"] || _vm.pagination ? _c("tfoot", { staticClass: "w-table__footer" }, [_vm.$slots["footer-row"] ? _vm._t("footer-row") : _vm.$slots.footer ? _c("tr", { staticClass: "w-table__row" }, [_c("td", { staticClass: "w-table__cell", attrs: { "colspan": _vm.headers.length } }, [_vm._t("footer")], 2)]) : _vm._e(), _vm.pagination && _vm.paginationConfig ? _c("tr", { staticClass: "w-table__row w-table__pagination-wrap" }, [_c("td", { staticClass: "w-table__cell", attrs: { "colspan": _vm.headers.length } }, [_c("div", { staticClass: "w-table__pagination w-pagination" }, [_vm._t("pagination", function() {
+  })] : _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") : _vm.$slots.footer ? _c("tr", { staticClass: "w-table__row" }, [_c("td", { staticClass: "w-table__cell", attrs: { "colspan": _vm.headers.length } }, [_vm._t("footer")], 2)]) : _vm._e()], 2) : _vm._e()])]), _vm.pagination && _vm.paginationConfig ? _c("div", { staticClass: "w-table__pagination w-pagination" }, [_vm._t("pagination", function() {
     return [_vm.paginationConfig.itemsPerPageOptions ? _c("w-select", { staticClass: "w-pagination__items-per-page", attrs: { "items": _vm.paginationConfig.itemsPerPageOptions, "label-position": "left", "label": "Items per page", "label-color": "inherit" }, on: { "input": function($event) {
       return _vm.updatePaginationConfig({ itemsPerPage: _vm.paginationConfig.itemsPerPage });
     } }, model: { value: _vm.paginationConfig.itemsPerPage, callback: function($$v) {
       _vm.$set(_vm.paginationConfig, "itemsPerPage", $$v);
     }, expression: "paginationConfig.itemsPerPage" } }) : _vm._e(), _c("div", { staticClass: "pages-wrap" }, [_c("w-button", { staticClass: "w-pagination__arrow w-pagination__arrow--prev", attrs: { "disabled": _vm.paginationConfig.page <= 1, "icon": "wi-chevron-left", "text": "", "lg": "" }, on: { "click": function($event) {
       return _vm.goToPage("-1");
-    } } }), _vm._l(_vm.paginationConfig.pagesCount, function(i) {
+    } } }), _vm.paginationConfig.pagesCount > 7 ? [_vm._l(_vm.paginationConfig.pagesCount, function(i) {
+      return [[1, _vm.paginationConfig.pagesCount, _vm.paginationConfig.page - 1, _vm.paginationConfig.page, _vm.paginationConfig.page + 1].includes(i) ? _c("w-button", { key: i, staticClass: "w-pagination__page", class: { "w-pagination__page--active": i === _vm.paginationConfig.page }, attrs: { "round": "", "lg": "" }, on: { "click": function($event) {
+        i !== _vm.paginationConfig.page && _vm.goToPage(i);
+      } } }, [_vm._v(_vm._s(i))]) : [1, _vm.paginationConfig.pagesCount, _vm.paginationConfig.page - 1, _vm.paginationConfig.page, _vm.paginationConfig.page + 1].includes(i - 1) ? _c("w-button", { key: i, staticClass: "w-pagination__page", class: { "w-pagination__page--active": i === _vm.paginationConfig.page }, attrs: { "round": "", "lg": "" }, on: { "click": function($event) {
+        i !== _vm.paginationConfig.page && _vm.goToPage(i);
+      } } }, [_vm._v("...")]) : _vm._e()];
+    })] : _vm._l(_vm.paginationConfig.pagesCount, function(i) {
       return _c("w-button", { key: i, staticClass: "w-pagination__page", class: { "w-pagination__page--active": i === _vm.paginationConfig.page }, attrs: { "round": "", "lg": "" }, on: { "click": function($event) {
         i !== _vm.paginationConfig.page && _vm.goToPage(i);
       } } }, [_vm._v(_vm._s(i))]);
     }), _c("w-button", { staticClass: "w-pagination__arrow w-pagination__arrow--next", attrs: { "disabled": _vm.paginationConfig.page >= _vm.paginationConfig.pagesCount, "icon": "wi-chevron-right", "text": "", "lg": "" }, on: { "click": function($event) {
       return _vm.goToPage("+1");
     } } })], 2), _c("span", { staticClass: "w-pagination__results" }, [_vm._v(_vm._s(_vm.paginationConfig.start) + "-" + _vm._s(_vm.paginationConfig.end || _vm.paginationConfig.total) + " of " + _vm._s(_vm.paginationConfig.total))])];
-  }, { "range": _vm.paginationConfig.start + "-" + _vm.paginationConfig.end, "total": _vm.paginationConfig.total })], 2)])]) : _vm._e()], 2) : _vm._e()])]);
+  }, { "range": _vm.paginationConfig.start + "-" + _vm.paginationConfig.end, "total": _vm.paginationConfig.total, "pagesCount": _vm.paginationConfig.pagesCount, "page": _vm.paginationConfig.page, "goToPage": _vm.goToPage })], 2) : _vm._e()]);
 };
 var staticRenderFns$e = [];
 var wTable_vue_vue_type_style_index_0_lang = "";
@@ -6143,16 +6531,6 @@ const __vue2_script$e = {
         return obj;
       }, {});
     },
-    wrapClasses() {
-      return {
-        "w-table-wrap--loading": this.loading
-      };
-    },
-    colClasses() {
-      return this.headers.map((header) => {
-        return { "w-table__col--highlighted": this.activeSortingKeys[header.key] };
-      }) || [];
-    },
     classes() {
       return {
         "w-table--loading": this.loading,
@@ -6166,6 +6544,11 @@ const __vue2_script$e = {
         "w-table--sticky-column": this.hasStickyColumn
       };
     },
+    colClasses() {
+      return this.headers.map((header) => {
+        return { "w-table__col--highlighted": this.activeSortingKeys[header.key] };
+      }) || [];
+    },
     isMobile() {
       return ~~this.mobileBreakpoint && this.$waveui.breakpoint.width <= ~~this.mobileBreakpoint;
     },
@@ -6303,7 +6686,7 @@ const __vue2_script$e = {
       document.removeEventListener("mousemove", this.onResizerMouseMove);
       document.removeEventListener("mouseup", this.onResizerMouseUp);
       setTimeout(() => {
-        const widths = [...this.$refs.colgroup.childNodes].map((column) => {
+        const widths = [...this.$refs.colgroup.children].map((column) => {
           var _a;
           return ((_a = column.style) == null ? void 0 : _a.width) || column.offsetWidth;
         });
@@ -6349,8 +6732,8 @@ const __vue2_script$e = {
       if (itemsPerPage !== void 0) {
         this.paginationConfig.itemsPerPage = itemsPerPage;
         itemsPerPage = itemsPerPage || this.paginationConfig.total;
-        this.paginationConfig.page = 1;
-        ({ page } = this.paginationConfig);
+        this.paginationConfig.page = page || this.paginationConfig.page || 1;
+        page = this.paginationConfig.page;
         total = this.paginationConfig.total;
         this.paginationConfig.start = 1;
         this.paginationConfig.end = total >= itemsPerPage * page ? itemsPerPage * page : total % (itemsPerPage * page);
@@ -6556,7 +6939,7 @@ var render$c = function() {
       return;
     }
     _vm.inputValue = $event.target.value;
-  }, _vm.onInput], "focus": _vm.onFocus, "blur": _vm.onBlur } }, _vm.listeners)), _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-textarea__label w-textarea__label--inside w-form-el-shakable", class: _vm.labelClasses, attrs: { "for": "w-textarea--" + _vm._uid } }, [_vm._t("default", function() {
+  }, _vm.onInput], "focus": _vm.onFocus, "blur": _vm.onBlur } }, _vm.listeners)), _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default || _vm.label ? _c("label", { staticClass: "w-textarea__label w-textarea__label--inside w-form-el-shakable", class: _vm.labelClasses }, [_vm._t("default", function() {
     return [_vm._v(_vm._s(_vm.label))];
   })], 2) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-textarea__icon w-textarea__icon--inner-right", attrs: { "tag": "label", "for": "w-textarea--" + _vm._uid }, on: { "click": function($event) {
     return _vm.$emit("click:inner-icon-right", $event);
@@ -6862,7 +7245,14 @@ const __vue2_script$9 = {
     transition: { type: String },
     tooltipClass: { type: [String, Object, Array] },
     persistent: { type: Boolean },
-    delay: { type: Number }
+    delay: { type: Number },
+    caption: { type: Boolean },
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean },
+    enableTouch: { type: Boolean }
   },
   emits: ["input", "update:modelValue", "open", "close"],
   data: () => ({
@@ -6883,6 +7273,9 @@ const __vue2_script$9 = {
       const direction = this.position.replace(/top|bottom/, (m) => ({ top: "up", bottom: "down" })[m]);
       return this.transition || `w-tooltip-slide-fade-${direction}`;
     },
+    size() {
+      return this.xs && "xs" || this.sm && "sm" || this.sm && "md" || this.lg && "lg" || this.xl && "xl" || (this.caption ? "sm" : "md");
+    },
     classes() {
       return {
         [this.color]: this.color,
@@ -6892,6 +7285,8 @@ const __vue2_script$9 = {
         [`w-tooltip--align-${this.alignment}`]: !this.noPosition && this.alignment,
         "w-tooltip--tile": this.tile,
         "w-tooltip--round": this.round,
+        caption: this.caption,
+        [`size--${this.size}`]: true,
         "w-tooltip--shadow": this.shadow,
         "w-tooltip--fixed": this.fixed,
         "w-tooltip--no-border": this.noBorder || this.bgColor,
@@ -6903,17 +7298,16 @@ const __vue2_script$9 = {
         zIndex: this.zIndex || this.zIndex === 0 || null,
         top: this.detachableCoords.top && `${~~this.detachableCoords.top}px` || null,
         left: this.detachableCoords.left && `${~~this.detachableCoords.left}px` || null,
-        "--w-tooltip-bg-color": this.$waveui.colors[this.bgColor || "white"]
+        "--w-tooltip-bg-color": this.$waveui.colors[this.bgColor] || "rgb(var(--w-base-bg-color-rgb))"
       };
     },
     activatorEventHandlers() {
       let handlers = {};
-      if (this.showOnClick)
-        handlers = { click: this.toggle };
-      else {
+      const isTouchDevice = typeof window !== "undefined" && "ontouchstart" in window;
+      if (!this.showOnClick && !isTouchDevice) {
         handlers = {
-          focus: this.toggle,
-          blur: this.toggle,
+          focus: this.open,
+          blur: this.close,
           mouseenter: (e) => {
             this.hoveringActivator = true;
             this.open(e);
@@ -6923,9 +7317,8 @@ const __vue2_script$9 = {
             this.close();
           }
         };
-        if (typeof window !== "undefined" && "ontouchstart" in window)
-          handlers.click = this.toggle;
-      }
+      } else if (this.enableTouch || this.showOnClick)
+        handlers = { click: this.toggle };
       return handlers;
     }
   },
@@ -6933,7 +7326,9 @@ const __vue2_script$9 = {
     toggle(e) {
       let shouldShowTooltip = this.detachableVisible;
       if (typeof window !== "undefined" && "ontouchstart" in window) {
-        if (e.type === "click")
+        if (!this.enableTouch && !this.showOnClick)
+          shouldShowTooltip = false;
+        else
           shouldShowTooltip = !shouldShowTooltip;
       } else if (e.type === "click" && this.showOnClick)
         shouldShowTooltip = !shouldShowTooltip;
@@ -7153,18 +7548,16 @@ const __vue2_script$7 = {
     saveOriginalInlineStyles(el) {
       this.el.originalStyles = el.style.cssText;
     },
-    show(el, done) {
+    show(el) {
       this.saveComputedStyles(el);
       this.applyHideStyles(el);
       setTimeout(() => this.applyShowStyles(el), 20);
-      setTimeout(done, this.duration);
     },
     beforeHide(el) {
       this.applyShowStyles(el);
     },
-    hide(el, done) {
+    hide(el) {
       setTimeout(() => this.applyHideStyles(el), 20);
-      setTimeout(done, this.duration);
     },
     saveComputedStyles(el) {
       const computedStyles = window.getComputedStyle(el, null);
@@ -7592,20 +7985,20 @@ const __vue2_script = {
       this.emitItemSelection(item, e);
     },
     onLabelKeydown(item, e) {
-      if (!(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) && [13, 32, 37, 38, 39, 40].includes(e.which)) {
+      if (!(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) && [13, 32, 37, 38, 39, 40].includes(e.keyCode)) {
         if (item.children || item.branch) {
-          if ([13, 32].includes(e.which))
+          if ([13, 32].includes(e.keyCode))
             this.expandDepth(item) && e.preventDefault();
-          else if (e.which === 37)
+          else if (e.keyCode === 37)
             this.expandDepth(item, false) && e.preventDefault();
-          else if (e.which === 39)
+          else if (e.keyCode === 39)
             this.expandDepth(item, true) && e.preventDefault();
         }
-        if ([38, 40].includes(e.which)) {
+        if ([38, 40].includes(e.keyCode)) {
           const treeRoot = this.$el.closest(".w-tree--depth0");
           const treeTabbableItems = treeRoot.querySelectorAll('.w-tree__item-label[tabindex="0"]');
           const currLabel = e.target.closest(".w-tree__item-label");
-          const indexModifier = e.which === 38 ? -1 : 1;
+          const indexModifier = e.keyCode === 38 ? -1 : 1;
           [...treeTabbableItems].some((item2, i) => {
             if (item2.isSameNode(currLabel)) {
               treeTabbableItems[i + indexModifier] && treeTabbableItems[i + indexModifier].focus();
@@ -7615,7 +8008,7 @@ const __vue2_script = {
           });
         }
       }
-      if (e.which === 13) {
+      if (e.keyCode === 13) {
         if (this.selectable)
           item.selected = !item.selected;
         this.emitItemSelection(item, e);
@@ -7709,6 +8102,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   __proto__: null,
   WAccordion: wAccordion,
   WAlert: wAlert,
+  WAutocomplete: wAutocomplete,
   WApp: wApp,
   WBadge: wBadge,
   WBreadcrumbs: wBreadcrumbs,