wave-ui 1.69.0 → 1.70.0

package/dist/wave-ui.es.js

@@ -586,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;
@@ -619,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;
@@ -675,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 },
@@ -764,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;
@@ -793,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 },
@@ -871,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,
@@ -887,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() {
@@ -3032,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);
@@ -3057,11 +3335,13 @@ var render$w = 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))];
@@ -3157,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() {
@@ -5015,24 +5295,23 @@ var render$l = function() {
     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": _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", "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 }, [_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);
@@ -5040,6 +5319,8 @@ var render$l = function() {
     _vm.noUnselect && !_vm.multiple && _vm.closeMenu();
   }, "keydown:escape": function($event) {
     _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;
@@ -5102,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() {
@@ -5113,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,
@@ -5210,6 +5507,26 @@ const __vue2_script$l = {
           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) {
@@ -5240,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);
@@ -5260,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() {
@@ -6040,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) {
@@ -6055,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);
@@ -6063,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 = "";
@@ -6204,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,
@@ -6227,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;
     },
@@ -6364,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;
         });
@@ -6410,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);
@@ -6617,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);
@@ -7226,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);
@@ -7665,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();
@@ -7688,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);
@@ -7782,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,