wave-ui 1.50.1 → 1.52.0

package/dist/wave-ui.es.js

@@ -675,13 +675,6 @@ const __vue2_script$P = {
         [item[this.itemColorKey]]: item[this.itemColorKey]
       };
     }
-  },
-  watch: {
-    value(array) {
-      this.accordionItems.forEach((item, i) => {
-        this.$set(item, "expanded", Array.isArray(array) && array[i] || false);
-      });
-    }
   }
 };
 const __cssModules$P = {};
@@ -1315,7 +1308,7 @@ var render$I = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-card", class: _vm.classes, style: _vm.styles }, [_vm.$slots.title ? _c("div", { staticClass: "w-card__title", class: Object.assign({}, { "w-card__title--has-toolbar": _vm.titleHasToolbar }, _vm.titleClasses) }, [_vm._t("title")], 2) : _vm.title ? _c("div", { staticClass: "w-card__title", class: _vm.titleClasses, domProps: { "innerHTML": _vm._s(_vm.title) } }) : _vm._e(), _vm.image ? _c("w-image", _vm._b({ staticClass: "w-card__image", attrs: { "src": _vm.image } }, "w-image", _vm.imgProps, false), [_vm._t("image-content")], 2) : _vm._e(), _c("div", { staticClass: "w-card__content", class: _vm.contentClasses }, [_vm._t("default")], 2), _vm.$slots.actions ? _c("div", { staticClass: "w-card__actions", class: { "w-card__actions--has-toolbar": _vm.actionsHasToolbar } }, [_vm._t("actions")], 2) : _vm._e()], 1);
+  return _c("div", { staticClass: "w-card", class: _vm.classes }, [_vm.$slots.title ? _c("div", { staticClass: "w-card__title", class: Object.assign({}, { "w-card__title--has-toolbar": _vm.titleHasToolbar }, _vm.titleClasses) }, [_vm._t("title")], 2) : _vm.title ? _c("div", { staticClass: "w-card__title", class: _vm.titleClasses, domProps: { "innerHTML": _vm._s(_vm.title) } }) : _vm._e(), _vm.image ? _c("w-image", _vm._b({ staticClass: "w-card__image", attrs: { "src": _vm.image } }, "w-image", _vm.imgProps, false), [_vm._t("image-content")], 2) : _vm._e(), _c("div", { staticClass: "w-card__content", class: _vm.contentClasses }, [_vm._t("default")], 2), _vm.$slots.actions ? _c("div", { staticClass: "w-card__actions", class: { "w-card__actions--has-toolbar": _vm.actionsHasToolbar } }, [_vm._t("actions")], 2) : _vm._e()], 1);
 };
 var staticRenderFns$I = [];
 var wCard_vue_vue_type_style_index_0_lang = "";
@@ -1363,9 +1356,6 @@ const __vue2_script$I = {
         "w-card--tile": this.tile,
         "w-card--shadow": this.shadow
       };
-    },
-    styles() {
-      return false;
     }
   }
 };
@@ -1745,7 +1735,9 @@ var render$D = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("w-overlay", { staticClass: "w-dialog", class: _vm.classes, attrs: { "value": _vm.showWrapper, "persistent": _vm.persistent, "persistent-no-animation": _vm.persistentNoAnimation, "bg-color": _vm.overlayColor, "opacity": _vm.overlayOpacity }, on: { "click": _vm.onOutsideClick } }, [_c("transition", { attrs: { "name": _vm.transition, "appear": "" }, on: { "after-leave": _vm.onClose } }, [_c("w-card", { directives: [{ name: "show", rawName: "v-show", value: _vm.showContent, expression: "showContent" }], staticClass: "w-dialog__content", class: _vm.dialogClass, style: _vm.contentStyles, attrs: { "no-border": "", "color": _vm.color, "bg-color": _vm.bgColor, "title-class": _vm.titleClass, "content-class": _vm.contentClass, "title": _vm.title || void 0 }, scopedSlots: _vm._u([_vm.$slots.title ? { key: "title", fn: function() {
+  return _c("w-overlay", { staticClass: "w-dialog", class: _vm.classes, attrs: { "value": _vm.showWrapper, "persistent": _vm.persistent, "persistent-no-animation": _vm.persistentNoAnimation, "bg-color": _vm.overlayColor, "opacity": _vm.overlayOpacity }, on: { "click": _vm.onOutsideClick, "closed": function($event) {
+    return _vm.$emit("closed");
+  } } }, [_c("transition", { attrs: { "name": _vm.transition, "appear": "" }, on: { "after-leave": _vm.onClose } }, [_c("w-card", { directives: [{ name: "show", rawName: "v-show", value: _vm.showContent, expression: "showContent" }], staticClass: "w-dialog__content", class: _vm.dialogClass, style: _vm.contentStyles, attrs: { "no-border": "", "color": _vm.color, "bg-color": _vm.bgColor, "title-class": _vm.titleClass, "content-class": _vm.contentClass, "title": _vm.title || void 0 }, scopedSlots: _vm._u([_vm.$slots.title ? { key: "title", fn: function() {
     return [_vm._t("title")];
   }, proxy: true } : null, _vm.$slots.actions ? { key: "actions", fn: function() {
     return [_vm._t("actions")];
@@ -1772,7 +1764,7 @@ const __vue2_script$D = {
     bgColor: { type: String },
     overlayOpacity: { type: [Number, String, Boolean] }
   },
-  emits: ["input", "update:modelValue", "close"],
+  emits: ["input", "update:modelValue", "close", "closed"],
   data() {
     return {
       showWrapper: this.value,
@@ -1809,7 +1801,7 @@ const __vue2_script$D = {
       this.showWrapper = false;
       this.$emit("update:modelValue", false);
       this.$emit("input", false);
-      this.$emit("close", false);
+      this.$emit("close");
     }
   },
   watch: {
@@ -1849,7 +1841,7 @@ const __vue2_script$C = {
     classes() {
       return {
         [`w-divider--has-color ${this.color}`]: this.color,
-        "w-divider--vertical": this.vertical,
+        [`w-divider--${this.vertical ? "vertical" : "horizontal"}`]: true,
         "w-divider--has-content": this.$slots.default
       };
     }
@@ -3168,10 +3160,10 @@ var DetachableMixin = {
     alignRight: { type: Boolean },
     noPosition: { type: Boolean },
     zIndex: { type: [Number, String, Boolean] },
-    activator: { type: String }
+    activator: { type: [String, Object, HTMLElement] }
   },
   data: () => ({
-    docAEventListenersHandlers: []
+    docEventListenersHandlers: []
   }),
   computed: {
     appendToTarget() {
@@ -3202,12 +3194,22 @@ var DetachableMixin = {
       return this.appendToTarget;
     },
     hasSeparateActivator() {
-      return !this.$scopedSlots.activator && typeof this.activator === "string";
+      var _a;
+      if (this.$scopedSlots.activator)
+        return false;
+      const activatorIsString = typeof this.activator === "string";
+      const activatorIsDomEl = (((_a = this.activator) == null ? void 0 : _a.$el) || this.activator) instanceof HTMLElement;
+      return activatorIsString || activatorIsDomEl;
     },
     activatorEl: {
       get() {
-        if (this.hasSeparateActivator)
+        var _a;
+        if (this.hasSeparateActivator) {
+          const activator = ((_a = this.activator) == null ? void 0 : _a.$el) || this.activator;
+          if (activator instanceof HTMLElement)
+            return activator;
           return document.querySelector(this.activator);
+        }
         return this.$el.firstElementChild;
       },
       set() {
@@ -3221,8 +3223,29 @@ var DetachableMixin = {
     }
   },
   methods: {
-    getActivatorCoordinates(e) {
-      const { top, left, width, height } = (e ? e.target : this.activatorEl).getBoundingClientRect();
+    async open(e) {
+      if (this.delay)
+        await new Promise((resolve) => setTimeout(resolve, this.delay));
+      this.detachableVisible = true;
+      if (this.activator)
+        this.activatorEl = e.target;
+      await this.insertInDOM();
+      if (this.minWidth === "activator")
+        this.activatorWidth = this.activatorEl.offsetWidth;
+      if (!this.noPosition)
+        this.computeDetachableCoords();
+      this.timeoutId = setTimeout(() => {
+        this.$emit("update:modelValue", true);
+        this.$emit("input", true);
+        this.$emit("open");
+      }, 0);
+      if (!this.persistent)
+        document.addEventListener("mousedown", this.onOutsideMousedown);
+      if (!this.noPosition)
+        window.addEventListener("resize", this.onResize);
+    },
+    getActivatorCoordinates() {
+      const { top, left, width, height } = this.activatorEl.getBoundingClientRect();
       let coords = { top, left, width, height };
       if (!this.fixed) {
         const { top: targetTop, left: targetLeft } = this.detachableParentEl.getBoundingClientRect();
@@ -3234,8 +3257,8 @@ var DetachableMixin = {
       }
       return coords;
     },
-    computeDetachableCoords(e) {
-      let { top, left, width, height } = this.getActivatorCoordinates(e);
+    computeDetachableCoords() {
+      let { top, left, width, height } = this.getActivatorCoordinates();
       this.detachableEl.style.visibility = "hidden";
       this.detachableEl.style.display = "flex";
       const computedStyles2 = window.getComputedStyle(this.detachableEl, null);
@@ -3312,6 +3335,21 @@ var DetachableMixin = {
         this.detachableEl.remove();
         this.detachableEl = null;
       }
+    },
+    bindActivatorEvents() {
+      const activatorIsString = typeof this.activator === "string";
+      Object.entries(this.activatorEventHandlers).forEach(([eventName, handler]) => {
+        eventName = eventName.replace("mouseenter", "mouseover").replace("mouseleave", "mouseout");
+        const handlerWrap = (e) => {
+          var _a;
+          if (activatorIsString && ((_a = e.target) == null ? void 0 : _a.matches) && e.target.matches(this.activator))
+            handler(e);
+          else if (e.target === this.activatorEl || this.activatorEl.contains(e.target))
+            handler(e);
+        };
+        document.addEventListener(eventName, handlerWrap);
+        this.docEventListenersHandlers.push({ eventName, handler: handlerWrap });
+      });
     }
   },
   mounted() {
@@ -3319,31 +3357,28 @@ var DetachableMixin = {
     const wrapper = this.$el;
     if (this.$scopedSlots.activator)
       wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
-    else if (this.activator) {
-      Object.entries(this.activatorEventHandlers).forEach(([eventName, handler]) => {
-        eventName = eventName.replace("mouseenter", "mouseover").replace("mouseleave", "mouseout");
-        const handlerWrap = (e) => {
-          var _a2;
-          if (((_a2 = e.target) == null ? void 0 : _a2.matches) && e.target.matches(this.activator))
-            handler(e);
-        };
-        document.addEventListener(eventName, handlerWrap);
-        this.docAEventListenersHandlers.push({ eventName, handler: handlerWrap });
+    else if (this.activator)
+      this.bindActivatorEvents();
+    else {
+      this.$nextTick(() => {
+        this.activator && this.bindActivatorEvents();
+        if (this.value)
+          this.toggle({ type: "click", 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.toggleMenu({ type: "click", target: this.activatorEl });
+    if (this.value && this.activator)
+      this.toggle({ type: "click", target: this.activatorEl });
   },
   beforeDestroy() {
     var _a;
     this.close();
     this.removeFromDOM();
-    if (this.docAEventListenersHandlers.length) {
-      this.docAEventListenersHandlers.forEach(({ eventName, handler }) => {
+    if (this.docEventListenersHandlers.length) {
+      this.docEventListenersHandlers.forEach(({ eventName, handler }) => {
         document.removeEventListener(eventName, handler);
       });
     }
@@ -3371,13 +3406,13 @@ var render$s = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-menu-wrap" }, [_vm._t("activator", null, { "on": _vm.activatorEventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" } }, [_vm.custom && _vm.detachableVisible ? _c("div", { ref: "detachable", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, on: { "click": function($event) {
+  return _c("div", { staticClass: "w-menu-wrap" }, [_vm._t("activator", null, { "on": _vm.activatorEventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" } }, [_vm.custom && _vm.detachableVisible ? _c("div", _vm._g({ ref: "detachable", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, on: { "click": function($event) {
     _vm.hideOnMenuClick && _vm.close(true);
   }, "mouseenter": function($event) {
     _vm.showOnHover && (_vm.hoveringMenu = true);
   }, "mouseleave": function($event) {
     _vm.showOnHover && (_vm.hoveringMenu = false, _vm.close());
-  } } }, [_vm._t("default")], 2) : _vm.detachableVisible ? _c("w-card", { ref: "detachable", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, attrs: { "tile": _vm.tile, "title-class": _vm.titleClasses, "content-class": _vm.contentClasses, "shadow": _vm.shadow, "no-border": _vm.noBorder }, nativeOn: { "click": function($event) {
+  } } }, _vm.$listeners), [_vm._t("default")], 2) : _vm.detachableVisible ? _c("w-card", _vm._g({ ref: "detachable", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, attrs: { "tile": _vm.tile, "title-class": _vm.titleClasses, "content-class": _vm.contentClasses, "shadow": _vm.shadow, "no-border": _vm.noBorder }, nativeOn: { "click": function($event) {
     _vm.hideOnMenuClick && _vm.close(true);
   }, "mouseenter": function($event) {
     _vm.showOnHover && (_vm.hoveringMenu = true);
@@ -3387,7 +3422,7 @@ var render$s = function() {
     return [_vm._t("title")];
   }, proxy: true } : null, _vm.$slots.actions ? { key: "actions", fn: function() {
     return [_vm._t("actions")];
-  }, proxy: true } : null], null, true) }, [_vm._t("default")], 2) : _vm._e()], 1), _vm.overlay ? _c("w-overlay", _vm._b({ ref: "overlay", class: _vm.overlayClasses, attrs: { "value": _vm.detachableVisible, "persistent": _vm.persistent, "z-index": (_vm.zIndex || 200) - 1 }, on: { "input": function($event) {
+  }, proxy: true } : null], null, true) }, _vm.$listeners), [_vm._t("default")], 2) : _vm._e()], 1), _vm.overlay ? _c("w-overlay", _vm._b({ ref: "overlay", class: _vm.overlayClasses, attrs: { "value": _vm.detachableVisible, "persistent": _vm.persistent, "z-index": (_vm.zIndex || 200) - 1 }, on: { "input": function($event) {
     _vm.detachableVisible = false;
   } } }, "w-overlay", _vm.overlayProps, false)) : _vm._e()], 2);
 };
@@ -3452,7 +3487,9 @@ const __vue2_script$s = {
       return objectifyClasses(this.contentClass);
     },
     overlayClasses() {
-      return objectifyClasses(this.overlayClass);
+      return __spreadProps(__spreadValues({}, objectifyClasses(this.overlayClass)), {
+        "w-overlay--no-pointer-event": this.showOnHover
+      });
     },
     classes() {
       return __spreadProps(__spreadValues({
@@ -3507,7 +3544,7 @@ const __vue2_script$s = {
   methods: {
     toggle(e) {
       let shouldShowMenu = this.detachableVisible;
-      if ("ontouchstart" in window && this.showOnHover && e.type === "click") {
+      if (typeof window !== "undefined" && "ontouchstart" in window && this.showOnHover && e.type === "click") {
         shouldShowMenu = !shouldShowMenu;
       } else if (e.type === "click" && !this.showOnHover)
         shouldShowMenu = !shouldShowMenu;
@@ -3524,27 +3561,6 @@ const __vue2_script$s = {
       else
         this.close();
     },
-    async open(e) {
-      if (this.delay)
-        await new Promise((resolve) => setTimeout(resolve, this.delay));
-      this.detachableVisible = true;
-      if (this.activator)
-        this.activatorEl = e.target;
-      await this.insertInDOM();
-      if (this.minWidth === "activator")
-        this.activatorWidth = this.activatorEl.offsetWidth;
-      if (!this.noPosition)
-        this.computeDetachableCoords(e);
-      this.timeoutId = setTimeout(() => {
-        this.$emit("update:modelValue", true);
-        this.$emit("input", true);
-        this.$emit("open");
-      }, 0);
-      if (!this.persistent)
-        document.addEventListener("mousedown", this.onOutsideMousedown);
-      if (!this.noPosition)
-        window.addEventListener("resize", this.onResize);
-    },
     async close(force = false) {
       if (!this.detachableVisible)
         return;
@@ -3727,7 +3743,7 @@ var render$q = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("transition", { attrs: { "name": "fade", "mode": "out-in", "appear": "" } }, [_vm.value ? _c("div", { directives: [{ name: "focus", rawName: "v-focus" }], staticClass: "w-overlay", class: _vm.classes, style: _vm.value && _vm.styles || null, attrs: { "tabindex": "0" }, on: { "keydown": function($event) {
+  return _c("transition", { attrs: { "name": "fade", "appear": "" }, on: { "after-leave": _vm.onClosed } }, [_vm.showOverlay ? _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.value, expression: "value" }, { name: "focus", rawName: "v-focus" }], staticClass: "w-overlay", class: _vm.classes, style: _vm.value && _vm.styles || null, attrs: { "tabindex": "0" }, on: { "keydown": function($event) {
     if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "escape", void 0, $event.key, void 0)) {
       return null;
     }
@@ -3747,9 +3763,10 @@ const __vue2_script$q = {
     persistent: { type: Boolean },
     persistentNoAnimation: { type: Boolean }
   },
-  emits: ["input", "update:modelValue", "click", "close"],
+  emits: ["input", "update:modelValue", "click", "close", "closed"],
   data: () => ({
-    persistentAnimate: false
+    persistentAnimate: false,
+    showOverlay: false
   }),
   computed: {
     backgroundColor() {
@@ -3777,9 +3794,22 @@ const __vue2_script$q = {
       } else if (!this.persistent) {
         this.$emit("update:modelValue", false);
         this.$emit("input", false);
-        this.$emit("close", false);
+        this.$emit("close");
       }
       this.$emit("click", e);
+    },
+    onClosed() {
+      this.showOverlay = false;
+      this.$emit("closed");
+    }
+  },
+  created() {
+    this.showOverlay = this.value;
+  },
+  watch: {
+    value(bool) {
+      if (bool)
+        this.showOverlay = true;
     }
   }
 };
@@ -4222,10 +4252,14 @@ var render$k = function() {
   var _c = _vm._self._c || _h;
   return _c(_vm.formRegister ? "w-form-element" : "div", _vm._b({ ref: "formEl", tag: "component", class: _vm.classes, attrs: { "valid": _vm.valid, "wrap": _vm.hasLabel && _vm.labelPosition !== "inside" }, on: { "update:valid": function($event) {
     _vm.valid = $event;
-  }, "reset": _vm.onReset } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.selectionString, disabled: _vm.isDisabled, readonly: _vm.isReadonly }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", attrs: { "for": "w-select--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _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 : ".w-app", "align-left": "", "custom": "", "min-width": "activator" }, scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
+  }, "reset": _vm.onReset } }, "component", _vm.formRegister && { validators: _vm.validators, inputValue: _vm.selectionString, disabled: _vm.isDisabled, readonly: _vm.isReadonly }, false), [_vm.labelPosition === "left" ? [_vm.$slots.default ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", attrs: { "for": "w-select--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-select__label w-select__label--left w-form-el-shakable", attrs: { "for": "w-select--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _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 : ".w-app", "align-left": "", "custom": "", "min-width": "activator" }, on: { "mousedown": function($event) {
+    _vm.isFocused = true, _vm.selectingItem = true;
+  }, "mouseup": function($event) {
+    _vm.isFocused = true, _vm.selectingItem = false;
+  } }, scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
     var _obj, _obj$1;
     ref.on;
-    return [_c("div", { ref: "selection-wrap", 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) {
+    return [_c("div", { staticClass: "w-select__selection-wrap", class: _vm.inputWrapClasses, attrs: { "role": "button", "aria-haspopup": "listbox", "aria-expanded": _vm.showMenu ? "true" : "false", "aria-owns": "w-select-menu--" + _vm._uid, "aria-activedescendant": "w-select-menu--" + _vm._uid + "_item-1" }, on: { "click": function($event) {
       !_vm.isDisabled && !_vm.isReadonly && (_vm.showMenu ? _vm.closeMenu : _vm.openMenu)();
     } } }, [_vm.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);
@@ -4299,7 +4333,9 @@ const __vue2_script$k = {
     inputValue: [],
     showMenu: false,
     menuMinWidth: 0,
-    isFocused: false
+    isFocused: false,
+    selectingItem: false,
+    selectionWrapRef: void 0
   }),
   computed: {
     selectItems() {
@@ -4328,7 +4364,7 @@ const __vue2_script$k = {
         "w-select--disabled": this.isDisabled,
         "w-select--readonly": this.isReadonly,
         [`w-select--${this.hasValue ? "filled" : "empty"}`]: true,
-        "w-select--focused": this.isFocused && !this.isReadonly,
+        "w-select--focused": (this.isFocused || this.selectingItem) && !this.isReadonly,
         "w-select--dark": this.dark,
         "w-select--floating-label": this.hasLabel && this.labelPosition === "inside" && !this.staticLabel,
         "w-select--no-padding": !this.outline && !this.bgColor && !this.shadow && !this.round,
@@ -5609,7 +5645,7 @@ var render$a = function() {
   var _c = _vm._self._c || _h;
   return _c("ul", { staticClass: "w-timeline" }, _vm._l(_vm.items, function(item, i) {
     var _obj;
-    return _c("li", { key: i, staticClass: "w-timeline-item" }, [_c(item[_vm.itemIconKey] || _vm.icon ? "w-icon" : "div", { tag: "div", staticClass: "w-timeline-item__bullet", class: (_obj = {}, _obj[item[_vm.itemColorKey] || _vm.color] = item[_vm.itemColorKey] || _vm.color, _obj) }, [_vm._v(_vm._s(item[_vm.itemIconKey] || _vm.icon))]), !_vm.$slots["item." + (i + 1)] ? _vm._t("item", function() {
+    return _c("li", { key: i, staticClass: "w-timeline-item" }, [_c(item[_vm.itemIconKey] || _vm.icon ? "w-icon" : "div", { tag: "component", staticClass: "w-timeline-item__bullet", class: (_obj = {}, _obj[item[_vm.itemColorKey] || _vm.color] = item[_vm.itemColorKey] || _vm.color, _obj) }, [_vm._v(_vm._s(item[_vm.itemIconKey] || _vm.icon))]), !_vm.$slots["item." + (i + 1)] ? _vm._t("item", function() {
       var _obj2;
       return [_c("div", { staticClass: "w-timeline-item__title", class: (_obj2 = {}, _obj2[item[_vm.itemColorKey] || _vm.color] = item[_vm.itemColorKey] || _vm.color, _obj2), domProps: { "innerHTML": _vm._s(item[_vm.itemTitleKey]) } }), _c("div", { staticClass: "w-timeline-item__content", domProps: { "innerHTML": _vm._s(item[_vm.itemContentKey]) } })];
     }, { "item": item, "index": i + 1 }) : _vm._t("item." + (i + 1), null, { "item": item, "index": i + 1 })], 2);
@@ -5656,6 +5692,10 @@ const __vue2_script$9 = {
     absolute: { type: Boolean },
     fixed: { type: Boolean },
     bottom: { type: Boolean },
+    vertical: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    width: { type: [Number, String], default: null },
     height: { type: [Number, String], default: null },
     noBorder: { type: Boolean },
     shadow: { type: Boolean }
@@ -5666,19 +5706,27 @@ const __vue2_script$9 = {
       const h = this.height;
       return h && parseInt(h) == h ? h + "px" : h;
     },
+    toolbarWidth() {
+      const w = this.width;
+      return w && parseInt(w) == w ? w + "px" : w;
+    },
     classes() {
       return {
         [this.color]: !!this.color,
         [`${this.bgColor}--bg`]: !!this.bgColor,
         "w-toolbar--absolute": !!this.absolute,
         "w-toolbar--fixed": !!this.fixed,
-        [`w-toolbar--${this.bottom ? "bottom" : "top"}`]: true,
+        [`w-toolbar--${this.bottom ? "bottom" : "top"}`]: !this.vertical,
+        [`w-toolbar--vertical w-toolbar--${this.right ? "right" : "left"}`]: this.vertical,
         "w-toolbar--no-border": this.noBorder,
         "w-toolbar--shadow": !!this.shadow
       };
     },
     styles() {
-      return this.height ? `height: ${this.toolbarHeight}` : false;
+      return {
+        height: this.height && !this.vertical ? this.toolbarHeight : null,
+        width: this.width && this.vertical ? this.toolbarWidth : null
+      };
     }
   }
 };
@@ -5696,7 +5744,7 @@ var render$8 = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-tooltip-wrap" }, [_vm._t("activator", null, { "on": _vm.activatorEventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" } }, [_vm.detachableVisible ? _c("div", { ref: "detachable", staticClass: "w-tooltip", class: _vm.classes, style: _vm.styles }, [_vm._t("default")], 2) : _vm._e()])], 2);
+  return _c("div", { staticClass: "w-tooltip-wrap" }, [_vm._t("activator", null, { "on": _vm.activatorEventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" } }, [_vm.detachableVisible ? _c("div", { key: _vm._uid, ref: "detachable", staticClass: "w-tooltip", class: _vm.classes, style: _vm.styles }, [_vm._t("default")], 2) : _vm._e()])], 2);
 };
 var staticRenderFns$8 = [];
 var wTooltip_vue_vue_type_style_index_0_lang = "";
@@ -5800,27 +5848,6 @@ const __vue2_script$8 = {
       else
         this.close();
     },
-    async open(e) {
-      if (this.delay)
-        await new Promise((resolve) => setTimeout(resolve, this.delay));
-      this.detachableVisible = true;
-      if (this.activator)
-        this.activatorEl = e.target;
-      await this.insertInDOM();
-      if (this.minWidth === "activator")
-        this.activatorWidth = this.activatorEl.offsetWidth;
-      if (!this.noPosition)
-        this.computeDetachableCoords(e);
-      this.timeoutId = setTimeout(() => {
-        this.$emit("update:modelValue", true);
-        this.$emit("input", true);
-        this.$emit("open");
-      }, 0);
-      if (!this.persistent)
-        document.addEventListener("mousedown", this.onOutsideMousedown);
-      if (!this.noPosition)
-        window.addEventListener("resize", this.onResize);
-    },
     async close(force = false) {
       if (!this.detachableVisible)
         return;