wave-ui 1.46.0 → 1.49.1

package/dist/wave-ui.es.js

@@ -804,7 +804,7 @@ var render$M = function() {
       return _vm.notifManager.dismiss(notif._uid);
     } }, model: { value: notif._value, callback: function($$v) {
       _vm.$set(notif, "_value", $$v);
-    }, expression: "notif._value" } }, "w-alert", notif, false), [_vm._v(_vm._s(notif.message))]) : _vm._e()];
+    }, expression: "notif._value" } }, "w-alert", _vm.notifProps(notif), false), [_c("div", { domProps: { "innerHTML": _vm._s(notif.message) } })]) : _vm._e()];
   })], 2);
 };
 var staticRenderFns$M = [];
@@ -826,6 +826,12 @@ const __vue2_script$M = {
       return this.conf.transition ? this.conf.transition.replace("default", `slide-${this.conf.align === "left" ? "right" : "left"}`) : "";
     }
   },
+  methods: {
+    notifProps(notif) {
+      const _a = notif, { _value, _uid: _uid2, message, timeout } = _a, props = __objRest(_a, ["_value", "_uid", "message", "timeout"]);
+      return props;
+    }
+  },
   created() {
     this.notifManager = new NotificationManager$1();
   },
@@ -1600,15 +1606,15 @@ var render$E = function() {
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "w-confirm" }, [_c("w-menu", _vm._b({ scopedSlots: _vm._u([{ key: "activator", fn: function(ref) {
     var on = ref.on;
-    return [_c("w-button", _vm._g(_vm._b({ staticClass: "w-confirm__button" }, "w-button", _vm.buttonProps, false), on), [_vm._t("default")], 2)];
+    return [_c("w-button", _vm._g(_vm._b({ staticClass: "w-confirm__button" }, "w-button", _vm.buttonProps, false), Object.assign({}, _vm.$listeners, on)), [_vm._t("default")], 2)];
   } }], null, true), model: { value: _vm.showPopup, callback: function($$v) {
     _vm.showPopup = $$v;
   }, expression: "showPopup" } }, "w-menu", _vm.wMenuProps, false), [_c("w-flex", { attrs: { "column": !_vm.inline, "align-center": "" } }, [_c("div", [_vm._t("question", function() {
-    return [_vm._v("Are you sure?")];
-  })], 2), _c("div", { staticClass: "w-flex justify-end", class: _vm.inline ? "ml2" : "mt2" }, [!_vm.noCancel ? _c("w-button", _vm._b({ staticClass: "mr2", attrs: { "bg-color": (_vm.cancelButton || {}).bgColor || "error" }, on: { "click": _vm.onCancel } }, "w-button", _vm.cancelButton, false), [_vm._t("cancel", function() {
-    return [_vm._v("Cancel")];
-  })], 2) : _vm._e(), _c("w-button", _vm._b({ attrs: { "bg-color": (_vm.confirmButton || {}).bgColor || "success" }, on: { "click": _vm.onConfirm } }, "w-button", _vm.confirmButton, false), [_vm._t("confirm", function() {
-    return [_vm._v("Confirm")];
+    return [_vm._v(_vm._s(_vm.question))];
+  })], 2), _c("div", { staticClass: "w-flex justify-end", class: _vm.inline ? "ml2" : "mt2" }, [_vm.cancel !== false ? _c("w-button", _vm._b({ staticClass: "mr2", attrs: { "bg-color": (_vm.cancelButton || {}).bgColor || "error" }, on: { "click": _vm.onCancel } }, "w-button", _vm.cancelButtonProps, false), [_vm._t("cancel", function() {
+    return [_vm._v(_vm._s(_vm.cancelButton.label))];
+  })], 2) : _vm._e(), _c("w-button", _vm._b({ attrs: { "bg-color": (_vm.confirmButton || {}).bgColor || "success" }, on: { "click": _vm.onConfirm } }, "w-button", _vm.confirmButtonProps, false), [_vm._t("confirm", function() {
+    return [_vm._v(_vm._s(_vm.confirmButton.label))];
   })], 2)], 1)])], 1)], 1);
 };
 var staticRenderFns$E = [];
@@ -1619,9 +1625,9 @@ const __vue2_script$E = {
     color: { type: String },
     icon: { type: String },
     mainButton: { type: Object },
-    noCancel: { type: Boolean },
-    cancelButton: { type: [Boolean, Object] },
-    confirmButton: { type: Object },
+    question: { type: String, default: "Are you sure?" },
+    cancel: { type: [Boolean, Object, String], default: void 0 },
+    confirm: { type: [Object, String] },
     inline: { type: Boolean },
     menu: { type: Object },
     noArrow: { type: Boolean },
@@ -1642,6 +1648,26 @@ const __vue2_script$E = {
     props: []
   }),
   computed: {
+    cancelButton() {
+      let button = { label: typeof this.cancel === "string" ? this.cancel : "Cancel" };
+      if (typeof this.cancel === "object")
+        button = Object.assign({}, button, this.cancel);
+      return button;
+    },
+    cancelButtonProps() {
+      const _a = this.cancelButton, { label } = _a, props = __objRest(_a, ["label"]);
+      return props;
+    },
+    confirmButton() {
+      let button = { label: typeof this.confirm === "string" ? this.confirm : "Confirm" };
+      if (typeof this.confirm === "object")
+        button = Object.assign({}, button, this.confirm);
+      return button;
+    },
+    confirmButtonProps() {
+      const _a = this.confirmButton, { label } = _a, props = __objRest(_a, ["label"]);
+      return props;
+    },
     wMenuProps() {
       return __spreadValues({
         top: this.top,
@@ -2511,7 +2537,6 @@ var wImage = /* @__PURE__ */ function() {
   return __component__$v.exports;
 }();
 var render$u = function() {
-  var _obj, _obj$1;
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -2525,7 +2550,7 @@ var render$u = function() {
       return;
     }
     _vm.inputValue = $event.target.value;
-  } } }) : [_vm.labelPosition === "left" ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _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) {
+  } } }) : [_vm.labelPosition === "left" ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _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) {
     var $$a = _vm.inputValue, $$el = $event.target, $$c = $$el.checked ? true : false;
@@ -2546,15 +2571,15 @@ var render$u = 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 }, 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, "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))]);
-  })], 2)], _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.isFocused && (_obj = {}, _obj[_vm.valid === false ? "error" : _vm.color] = _vm.color || _vm.valid === false, _obj), attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.isFocused && (_obj$1 = {}, _obj$1[_vm.valid === false ? "error" : _vm.color] = _vm.color || _vm.valid === false, _obj$1), attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _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 _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 ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _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()], 2), _vm.type === "file" && _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 wi-file w-input__file-preview primary" })];
-  })], 2) : _vm._e(), _vm.labelPosition === "right" ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _vm.loading ? _c("w-progress", { staticClass: "fill-width", attrs: { "size": "2", "color": _vm.progressColor || _vm.color } }) : _vm._e()]], 2);
+  } } }, [_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) {
+    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 ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e()]], 2);
 };
 var staticRenderFns$u = [];
 var wInput_vue_vue_type_style_index_0_lang = "";
@@ -2584,10 +2609,12 @@ const __vue2_script$u = {
     shadow: { type: Boolean },
     tile: { type: Boolean },
     multiple: { type: Boolean },
-    preview: { type: Boolean },
-    loading: { type: Boolean }
+    preview: { type: [Boolean, String], default: true },
+    loading: { type: [Boolean, Number], default: false },
+    showProgress: { type: [Boolean] },
+    files: { type: Array }
   },
-  emits: ["input", "update:modelValue", "focus", "blur", "click:inner-icon-left", "click:inner-icon-right"],
+  emits: ["input", "update:modelValue", "focus", "blur", "click:inner-icon-left", "click:inner-icon-right", "update:overallProgress"],
   data() {
     return {
       inputValue: this.value,
@@ -2608,14 +2635,48 @@ const __vue2_script$u = {
       return listeners;
     },
     hasValue() {
-      return this.inputValue || this.inputValue === 0 || ["date", "time"].includes(this.type) || this.type === "number" && this.inputNumberError || this.type === "file" && this.inputFiles.length;
+      switch (this.type) {
+        case "file":
+          return !!this.inputFiles.length;
+        case "number":
+          return this.inputNumberError;
+        case "date":
+        case "time":
+          return true;
+        default:
+          return this.inputValue || this.inputValue === 0;
+      }
     },
     hasLabel() {
       return this.label || this.$slots.default;
     },
+    hasLoading() {
+      return ![void 0, false].includes(this.loading);
+    },
+    loadingValue() {
+      let value;
+      if (typeof this.loading === "number")
+        value = this.loading;
+      else if (this.loading) {
+        value = this.type === "file" && this.overallFilesProgress ? this.overallFilesProgress : void 0;
+      }
+      return value;
+    },
     showLabelInside() {
       return !this.staticLabel || !this.hasValue && !this.placeholder;
     },
+    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);
+      return total;
+    },
+    uploadInProgress() {
+      return this.overallFilesProgress > 0 && this.overallFilesProgress < 100;
+    },
+    uploadComplete() {
+      return this.overallFilesProgress === 100;
+    },
     classes() {
       return {
         "w-input": true,
@@ -2632,6 +2693,11 @@ const __vue2_script$u = {
         "w-input--inner-icon-right": this.innerIconRight
       };
     },
+    validationClasses() {
+      return this.isFocused && {
+        [this.valid === false ? "error" : this.color]: this.color || this.valid === false
+      };
+    },
     inputWrapClasses() {
       return {
         [this.valid === false ? "error" : this.color]: this.color || this.valid === false,
@@ -2643,7 +2709,8 @@ const __vue2_script$u = {
         "w-input__input-wrap--underline": !this.outline,
         "w-input__input-wrap--shadow": this.shadow,
         "w-input__input-wrap--no-padding": !this.outline && !this.bgColor && !this.shadow && !this.round,
-        "w-input__input-wrap--loading": this.loading
+        "w-input__input-wrap--loading": this.loading || this.showProgress && this.uploadInProgress,
+        "w-input__input-wrap--upload-complete": this.uploadComplete
       };
     }
   },
@@ -2663,31 +2730,34 @@ const __vue2_script$u = {
     },
     onFileChange(e) {
       this.$set(this, "inputFiles", [...e.target.files].map((original) => {
-        const [, base, extension] = original.name.match(/^(.*)(\..*?)$/);
+        const [, base = "", extension = "", full = ""] = original.name.match(/^(.*?)\.([^.]*)$|(.*)/);
         const file = Object.assign({}, {
           name: original.name,
-          base,
+          base: base || full,
           extension,
           type: original.type,
           size: original.size,
           lastModified: original.lastModified,
           preview: null,
-          progress: 0
+          progress: 0,
+          file: original
         });
-        this.filePreview(original, file);
+        this.readFile(original, file);
         return file;
       }));
       this.$emit("update:modelValue", this.inputFiles);
       this.$emit("input", this.inputFiles);
-      this.$emit("change", this.inputFiles);
     },
-    filePreview(original, file) {
+    readFile(original, file) {
       const reader = new FileReader();
-      if (original.type && original.type.startsWith("image/")) {
+      const isPreviewAnIcon = typeof this.preview === "string";
+      const isFileAnImage = original.type && original.type.startsWith("image/");
+      if (this.preview && !isPreviewAnIcon && isFileAnImage) {
         reader.addEventListener("load", (e) => {
           this.$set(file, "preview", e.target.result);
         });
-      }
+      } else
+        delete file.preview;
       reader.addEventListener("progress", (event) => {
         if (event.loaded && event.total) {
           this.$set(file, "progress", event.loaded * 100 / event.total);
@@ -3015,6 +3085,25 @@ var wList = /* @__PURE__ */ function() {
   return __component__$t.exports;
 }();
 var DetachableMixin = {
+  props: {
+    detachTo: { type: [String, Boolean, Object], deprecated: true },
+    appendTo: { type: [String, Boolean, Object] },
+    fixed: { type: Boolean },
+    top: { type: Boolean },
+    bottom: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    alignTop: { type: Boolean },
+    alignBottom: { type: Boolean },
+    alignLeft: { type: Boolean },
+    alignRight: { type: Boolean },
+    noPosition: { type: Boolean },
+    zIndex: { type: [Number, String, Boolean] },
+    activator: { type: String }
+  },
+  data: () => ({
+    docAEventListenersHandlers: []
+  }),
   computed: {
     appendToTarget() {
       const defaultTarget = ".w-app";
@@ -3042,6 +3131,24 @@ var DetachableMixin = {
     },
     detachableParentEl() {
       return this.appendToTarget;
+    },
+    hasSeparateActivator() {
+      return !this.$scopedSlots.activator && typeof this.activator === "string";
+    },
+    activatorEl: {
+      get() {
+        if (this.hasSeparateActivator)
+          return document.querySelector(this.activator);
+        return this.$el.firstElementChild;
+      },
+      set() {
+      }
+    },
+    position() {
+      return this.top && "top" || this.bottom && "bottom" || this.left && "left" || this.right && "right" || "bottom";
+    },
+    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" || "";
     }
   },
   methods: {
@@ -3122,14 +3229,72 @@ var DetachableMixin = {
         this.$nextTick(() => {
           var _a;
           this.detachableEl = ((_a = this.$refs.detachable) == null ? void 0 : _a.$el) || this.$refs.detachable;
-          this.appendToTarget.appendChild(this.detachableEl);
+          if (this.detachableEl)
+            this.appendToTarget.appendChild(this.detachableEl);
           resolve();
         });
       });
     },
     removeFromDOM() {
-      if (this.detachableEl && this.detachableEl.parentNode)
+      document.removeEventListener("mousedown", this.onOutsideMousedown);
+      window.removeEventListener("resize", this.onResize);
+      if (this.detachableEl && this.detachableEl.parentNode) {
+        this.detachableVisible = false;
         this.detachableEl.remove();
+        this.detachableEl = null;
+      }
+    }
+  },
+  mounted() {
+    var _a;
+    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 });
+      });
+    }
+    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 });
+  },
+  beforeDestroy() {
+    var _a;
+    this.close();
+    this.removeFromDOM();
+    if (this.docAEventListenersHandlers.length) {
+      this.docAEventListenersHandlers.forEach(({ eventName, handler }) => {
+        document.removeEventListener(eventName, handler);
+      });
+    }
+    if (this.overlay && this.overlayEl.parentNode)
+      this.overlayEl.remove();
+    if (((_a = this.activatorEl) == null ? void 0 : _a.parentNode) && this.$scopedSlots.activator)
+      this.activatorEl.remove();
+  },
+  watch: {
+    value(bool) {
+      if (!!bool !== this.detachableVisible)
+        this.toggle({ type: "click", target: this.activatorEl });
+    },
+    detachTo() {
+      this.removeFromDOM();
+      this.insertInDOM();
+    },
+    appendTo() {
+      this.removeFromDOM();
+      this.insertInDOM();
     }
   }
 };
@@ -3178,24 +3343,12 @@ const __vue2_script$s = {
     titleClass: { type: [String, Object, Array] },
     contentClass: { type: [String, Object, Array] },
     arrow: { type: Boolean },
-    detachTo: { type: [String, Boolean, Object], deprecated: true },
-    appendTo: { type: [String, Boolean, Object] },
-    fixed: { type: Boolean },
-    top: { type: Boolean },
-    bottom: { type: Boolean },
-    left: { type: Boolean },
-    right: { type: Boolean },
-    alignTop: { type: Boolean },
-    alignBottom: { type: Boolean },
-    alignLeft: { type: Boolean },
-    alignRight: { type: Boolean },
-    zIndex: { type: [Number, String, Boolean] },
     minWidth: { type: [Number, String] },
     overlay: { type: Boolean },
     overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object },
     persistent: { type: Boolean },
-    noPosition: { type: Boolean }
+    delay: { type: Number }
   },
   emits: ["input", "update:modelValue", "open", "close"],
   data: () => ({
@@ -3206,7 +3359,6 @@ const __vue2_script$s = {
       top: 0,
       left: 0
     },
-    activatorEl: null,
     activatorWidth: 0,
     detachableEl: null,
     timeoutId: null
@@ -3215,12 +3367,6 @@ const __vue2_script$s = {
     transitionName() {
       return this.transition || "scale-fade";
     },
-    position() {
-      return this.top && "top" || this.bottom && "bottom" || this.left && "left" || this.right && "right" || "bottom";
-    },
-    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" || "";
-    },
     menuMinWidth() {
       if (this.minWidth === "activator")
         return this.activatorWidth ? `${this.activatorWidth}px` : 0;
@@ -3267,8 +3413,8 @@ const __vue2_script$s = {
       let handlers = {};
       if (this.showOnHover) {
         handlers = {
-          focus: this.toggleMenu,
-          blur: this.toggleMenu,
+          focus: this.toggle,
+          blur: this.toggle,
           mouseenter: (e) => {
             this.hoveringActivator = true;
             this.open(e);
@@ -3282,15 +3428,15 @@ const __vue2_script$s = {
           }
         };
         if (typeof window !== "undefined" && "ontouchstart" in window) {
-          handlers.click = this.toggleMenu;
+          handlers.click = this.toggle;
         }
       } else
-        handlers = { click: this.toggleMenu };
+        handlers = { click: this.toggle };
       return handlers;
     }
   },
   methods: {
-    toggleMenu(e) {
+    toggle(e) {
       let shouldShowMenu = this.detachableVisible;
       if ("ontouchstart" in window && this.showOnHover && e.type === "click") {
         shouldShowMenu = !shouldShowMenu;
@@ -3304,16 +3450,17 @@ const __vue2_script$s = {
         shouldShowMenu = false;
       }
       this.timeoutId = clearTimeout(this.timeoutId);
-      if (shouldShowMenu) {
-        this.$emit("update:modelValue", this.detachableVisible = true);
-        this.$emit("input", true);
-        this.$emit("open");
+      if (shouldShowMenu)
         this.open(e);
-      } else
+      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;
@@ -3343,39 +3490,6 @@ const __vue2_script$s = {
       document.removeEventListener("mousedown", this.onOutsideMousedown);
       window.removeEventListener("resize", this.onResize);
     }
-  },
-  mounted() {
-    var _a;
-    const wrapper = this.$el;
-    this.activatorEl = wrapper.firstElementChild;
-    wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
-    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 });
-  },
-  beforeDestroy() {
-    this.removeFromDOM();
-    if (this.overlay && this.overlayEl.parentNode)
-      this.overlayEl.remove();
-    if (this.activatorEl && this.activatorEl.parentNode)
-      this.activatorEl.remove();
-  },
-  watch: {
-    value(bool) {
-      if (!!bool !== this.detachableVisible)
-        this.toggleMenu({ type: "click", target: this.activatorEl });
-    },
-    detachTo() {
-      this.removeFromDOM();
-      this.insertInDOM();
-    },
-    appendTo() {
-      this.removeFromDOM();
-      this.insertInDOM();
-    }
   }
 };
 const __cssModules$s = {};
@@ -4232,8 +4346,9 @@ const __vue2_script$k = {
     openMenu() {
       this.showMenu = true;
       setTimeout(() => {
+        var _a;
         const itemIndex = this.inputValue.length ? this.inputValue[0].index : 0;
-        this.$refs["w-list"].$el.querySelector(`#w-select-menu--${this._uid}_item-${itemIndex + 1}`).focus();
+        (_a = this.$refs["w-list"].$el.querySelector(`#w-select-menu--${this._uid}_item-${itemIndex + 1}`)) == null ? void 0 : _a.focus();
       }, 100);
     },
     closeMenu() {
@@ -5512,7 +5627,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.eventHandlers }), _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", { 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 = "";
@@ -5530,20 +5645,8 @@ const __vue2_script$8 = {
     round: { type: Boolean },
     transition: { type: String },
     tooltipClass: { type: [String, Object, Array] },
-    detachTo: { type: [String, Boolean, Object], deprecated: true },
-    appendTo: { type: [String, Boolean, Object] },
-    fixed: { type: Boolean },
-    top: { type: Boolean },
-    bottom: { type: Boolean },
-    left: { type: Boolean },
-    right: { type: Boolean },
-    alignTop: { type: Boolean },
-    alignBottom: { type: Boolean },
-    alignLeft: { type: Boolean },
-    alignRight: { type: Boolean },
-    zIndex: { type: [Number, String, Boolean] },
     persistent: { type: Boolean },
-    noPosition: { type: Boolean }
+    delay: { type: Number }
   },
   emits: ["input", "update:modelValue", "open", "close"],
   data: () => ({
@@ -5553,7 +5656,6 @@ const __vue2_script$8 = {
       top: 0,
       left: 0
     },
-    activatorEl: null,
     detachableEl: null,
     timeoutId: null
   }),
@@ -5565,12 +5667,6 @@ const __vue2_script$8 = {
       const direction = this.position.replace(/top|bottom/, (m) => ({ top: "up", bottom: "down" })[m]);
       return this.transition || `w-tooltip-slide-fade-${direction}`;
     },
-    position() {
-      return this.top && "top" || this.bottom && "bottom" || this.left && "left" || this.right && "right" || "bottom";
-    },
-    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" || "";
-    },
     classes() {
       return __spreadProps(__spreadValues({
         [this.color]: this.color,
@@ -5594,7 +5690,7 @@ const __vue2_script$8 = {
         "--w-tooltip-bg-color": this.$waveui.colors[this.bgColor || "white"]
       };
     },
-    eventHandlers() {
+    activatorEventHandlers() {
       let handlers = {};
       if (this.showOnClick)
         handlers = { click: this.toggle };
@@ -5630,16 +5726,17 @@ const __vue2_script$8 = {
       else if (["mouseleave", "blur"].includes(e.type) && !this.showOnClick)
         shouldShowTooltip = false;
       this.timeoutId = clearTimeout(this.timeoutId);
-      if (shouldShowTooltip) {
-        this.$emit("update:modelValue", this.detachableVisible = true);
-        this.$emit("input", true);
-        this.$emit("open");
+      if (shouldShowTooltip)
         this.open(e);
-      } else
+      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;
@@ -5669,32 +5766,6 @@ const __vue2_script$8 = {
       document.removeEventListener("mousedown", this.onOutsideMousedown);
       window.removeEventListener("resize", this.onResize);
     }
-  },
-  mounted() {
-    const wrapper = this.$el;
-    this.activatorEl = wrapper.firstElementChild;
-    wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
-    if (this.value)
-      this.toggle({ type: "click", target: this.activatorEl });
-  },
-  beforeDestroy() {
-    this.removeFromDOM();
-    if (this.activatorEl && this.activatorEl.parentNode)
-      this.activatorEl.remove();
-  },
-  watch: {
-    value(bool) {
-      if (bool !== this.detachableVisible)
-        this.toggle({ type: "click", target: this.activatorEl });
-    },
-    detachTo() {
-      this.removeFromDOM();
-      this.insertInDOM();
-    },
-    appendTo() {
-      this.removeFromDOM();
-      this.insertInDOM();
-    }
   }
 };
 const __cssModules$8 = {};