wave-ui 1.45.14 → 1.48.0

package/dist/wave-ui.es.js

@@ -1600,15 +1600,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 +1619,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 +1642,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 +2531,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 +2544,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 +2565,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 +2603,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 +2629,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 +2687,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 +2703,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,29 +2724,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);
     },
-    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);
@@ -2696,7 +2762,7 @@ const __vue2_script$u = {
   },
   mounted() {
     setTimeout(() => {
-      if (this.$refs.input.matches(":-webkit-autofill"))
+      if (this.$refs.input && this.$refs.input.matches(":-webkit-autofill"))
         this.isAutofilled = true;
     }, 400);
   },
@@ -3012,34 +3078,154 @@ function __vue2_injectStyles$t(context) {
 var wList = /* @__PURE__ */ function() {
   return __component__$t.exports;
 }();
+var DetachableMixin = {
+  computed: {
+    appendToTarget() {
+      const defaultTarget = ".w-app";
+      if (this.detachTo && !this.appendTo) {
+        consoleWarn(`The ${this.$options.name} prop \`detach-to\` is deprecated. You can replace it with \`append-to\`.`);
+      }
+      let target = this.appendTo || this.detachTo || defaultTarget;
+      if (target === true)
+        target = defaultTarget;
+      else if (this.appendTo === "activator")
+        target = this.$el.previousElementSibling;
+      else if (target && !["object", "string"].includes(typeof target))
+        target = defaultTarget;
+      else if (typeof target === "object" && !target.nodeType) {
+        target = defaultTarget;
+        consoleWarn(`Invalid node provided in ${this.$options.name} \`append-to\`. Falling back to .w-app.`);
+      }
+      if (typeof target === "string")
+        target = document.querySelector(target);
+      if (!target) {
+        consoleWarn(`Unable to locate ${this.appendTo ? `target ${this.appendTo}` : defaultTarget}`);
+        target = document.querySelector(defaultTarget);
+      }
+      return target;
+    },
+    detachableParentEl() {
+      return this.appendToTarget;
+    }
+  },
+  methods: {
+    getActivatorCoordinates(e) {
+      const { top, left, width, height } = (e ? e.target : this.activatorEl).getBoundingClientRect();
+      let coords = { top, left, width, height };
+      if (!this.fixed) {
+        const { top: targetTop, left: targetLeft } = this.detachableParentEl.getBoundingClientRect();
+        const computedStyles2 = window.getComputedStyle(this.detachableParentEl, null);
+        coords = __spreadProps(__spreadValues({}, coords), {
+          top: top - targetTop + this.detachableParentEl.scrollTop - parseInt(computedStyles2.getPropertyValue("border-top-width")),
+          left: left - targetLeft + this.detachableParentEl.scrollLeft - parseInt(computedStyles2.getPropertyValue("border-left-width"))
+        });
+      }
+      return coords;
+    },
+    computeDetachableCoords(e) {
+      let { top, left, width, height } = this.getActivatorCoordinates(e);
+      this.detachableEl.style.visibility = "hidden";
+      this.detachableEl.style.display = "flex";
+      const computedStyles2 = window.getComputedStyle(this.detachableEl, null);
+      switch (this.position) {
+        case "top": {
+          top -= this.detachableEl.offsetHeight;
+          if (this.alignRight) {
+            left += width - this.detachableEl.offsetWidth + parseInt(computedStyles2.getPropertyValue("border-right-width"));
+          } else if (!this.alignLeft)
+            left += (width - this.detachableEl.offsetWidth) / 2;
+          break;
+        }
+        case "bottom": {
+          top += height;
+          if (this.alignRight) {
+            left += width - this.detachableEl.offsetWidth + parseInt(computedStyles2.getPropertyValue("border-right-width"));
+          } else if (!this.alignLeft)
+            left += (width - this.detachableEl.offsetWidth) / 2;
+          break;
+        }
+        case "left": {
+          left -= this.detachableEl.offsetWidth;
+          if (this.alignBottom)
+            top += height - this.detachableEl.offsetHeight;
+          else if (!this.alignTop)
+            top += (height - this.detachableEl.offsetHeight) / 2;
+          break;
+        }
+        case "right": {
+          left += width;
+          if (this.alignBottom) {
+            top += height - this.detachableEl.offsetHeight + parseInt(computedStyles2.getPropertyValue("margin-top"));
+          } else if (!this.alignTop) {
+            top += (height - this.detachableEl.offsetHeight) / 2 + parseInt(computedStyles2.getPropertyValue("margin-top"));
+          }
+          break;
+        }
+      }
+      this.detachableEl.style.visibility = null;
+      if (!this.detachableVisible)
+        this.detachableEl.style.display = "none";
+      this.detachableCoords = { top, left };
+    },
+    onResize() {
+      if (this.minWidth === "activator")
+        this.activatorWidth = this.activatorEl.offsetWidth;
+      this.computeDetachableCoords();
+    },
+    onOutsideMousedown(e) {
+      if (!this.detachableEl.contains(e.target) && !this.activatorEl.contains(e.target)) {
+        this.$emit("update:modelValue", this.detachableVisible = false);
+        this.$emit("input", false);
+        this.$emit("close");
+        document.removeEventListener("mousedown", this.onOutsideMousedown);
+        window.removeEventListener("resize", this.onResize);
+      }
+    },
+    insertInDOM() {
+      return new Promise((resolve) => {
+        this.$nextTick(() => {
+          var _a;
+          this.detachableEl = ((_a = this.$refs.detachable) == null ? void 0 : _a.$el) || this.$refs.detachable;
+          this.appendToTarget.appendChild(this.detachableEl);
+          resolve();
+        });
+      });
+    },
+    removeFromDOM() {
+      if (this.detachableEl && this.detachableEl.parentNode)
+        this.detachableEl.remove();
+    }
+  }
+};
 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.menuVisible ? _c("div", { ref: "menu", staticClass: "w-menu", class: _vm.classes, style: _vm.styles, on: { "click": function($event) {
-    _vm.hideOnMenuClick && _vm.closeMenu(true);
+  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) {
+    _vm.hideOnMenuClick && _vm.close(true);
   }, "mouseenter": function($event) {
     _vm.showOnHover && (_vm.hoveringMenu = true);
   }, "mouseleave": function($event) {
-    _vm.showOnHover && (_vm.hoveringMenu = false, _vm.closeMenu());
-  } } }, [_vm._t("default")], 2) : _vm.menuVisible ? _c("w-card", { ref: "menu", 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.closeMenu(true);
+    _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.hideOnMenuClick && _vm.close(true);
   }, "mouseenter": function($event) {
     _vm.showOnHover && (_vm.hoveringMenu = true);
   }, "mouseleave": function($event) {
-    _vm.showOnHover && (_vm.hoveringMenu = false, _vm.closeMenu());
+    _vm.showOnHover && (_vm.hoveringMenu = false, _vm.close());
   } }, 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")];
-  }, 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.menuVisible, "persistent": _vm.persistent, "z-index": (_vm.zIndex || 200) - 1 }, on: { "input": function($event) {
-    _vm.menuVisible = false;
+  }, 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) {
+    _vm.detachableVisible = false;
   } } }, "w-overlay", _vm.overlayProps, false)) : _vm._e()], 2);
 };
 var staticRenderFns$s = [];
 var wMenu_vue_vue_type_style_index_0_lang = "";
 const __vue2_script$s = {
   name: "w-menu",
+  mixins: [DetachableMixin],
   props: {
     value: {},
     showOnHover: { type: Boolean },
@@ -3056,7 +3242,8 @@ const __vue2_script$s = {
     titleClass: { type: [String, Object, Array] },
     contentClass: { type: [String, Object, Array] },
     arrow: { type: Boolean },
-    detachTo: { type: [String, Boolean, Object] },
+    detachTo: { type: [String, Boolean, Object], deprecated: true },
+    appendTo: { type: [String, Boolean, Object] },
     fixed: { type: Boolean },
     top: { type: Boolean },
     bottom: { type: Boolean },
@@ -3076,56 +3263,34 @@ const __vue2_script$s = {
   },
   emits: ["input", "update:modelValue", "open", "close"],
   data: () => ({
-    menuVisible: false,
+    detachableVisible: false,
     hoveringActivator: false,
     hoveringMenu: false,
-    menuCoordinates: {
+    detachableCoords: {
       top: 0,
       left: 0
     },
     activatorEl: null,
     activatorWidth: 0,
-    menuEl: null,
+    detachableEl: null,
     timeoutId: null
   }),
   computed: {
     transitionName() {
       return this.transition || "scale-fade";
     },
-    detachToTarget() {
-      const defaultTarget = ".w-app";
-      let target = this.detachTo || defaultTarget;
-      if (target === true)
-        target = defaultTarget;
-      else if (target && !["object", "string"].includes(typeof target))
-        target = defaultTarget;
-      else if (typeof target === "object" && !target.nodeType) {
-        target = defaultTarget;
-        consoleWarn("Invalid node provided in w-menu `detach-to`. Falling back to .w-app.");
-      }
-      if (typeof target === "string")
-        target = document.querySelector(target);
-      if (!target) {
-        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : defaultTarget}`);
-        target = document.querySelector(defaultTarget);
-      }
-      return target;
-    },
-    menuParentEl() {
-      return this.detachToTarget;
-    },
     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;
       else
         return isNaN(this.minWidth) ? this.minWidth : this.minWidth ? `${this.minWidth}px` : 0;
     },
-    alignment() {
-      return (this.top || this.bottom) && this.alignLeft && "left" || (this.top || this.bottom) && this.alignRight && "right" || (this.left || this.right) && this.alignTop && "top" || (this.left || this.right) && this.alignBottom && "bottom" || "";
-    },
     menuClasses() {
       return objectifyClasses(this.menuClass);
     },
@@ -3156,8 +3321,8 @@ const __vue2_script$s = {
     styles() {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || this.overlay && !this.zIndex && 200 || null,
-        top: this.menuCoordinates.top && `${~~this.menuCoordinates.top}px` || null,
-        left: this.menuCoordinates.left && `${~~this.menuCoordinates.left}px` || null,
+        top: this.detachableCoords.top && `${~~this.detachableCoords.top}px` || null,
+        left: this.detachableCoords.left && `${~~this.detachableCoords.left}px` || null,
         minWidth: this.minWidth && this.menuMinWidth || null,
         "--w-menu-bg-color": this.arrow && this.$waveui.colors[this.bgColor || "white"]
       };
@@ -3170,13 +3335,13 @@ const __vue2_script$s = {
           blur: this.toggleMenu,
           mouseenter: (e) => {
             this.hoveringActivator = true;
-            this.openMenu(e);
+            this.open(e);
           },
           mouseleave: (e) => {
             this.hoveringActivator = false;
             setTimeout(() => {
               if (!this.hoveringMenu)
-                this.closeMenu();
+                this.close();
             }, 10);
           }
         };
@@ -3190,7 +3355,7 @@ const __vue2_script$s = {
   },
   methods: {
     toggleMenu(e) {
-      let shouldShowMenu = this.menuVisible;
+      let shouldShowMenu = this.detachableVisible;
       if ("ontouchstart" in window && this.showOnHover && e.type === "click") {
         shouldShowMenu = !shouldShowMenu;
       } else if (e.type === "click" && !this.showOnHover)
@@ -3204,20 +3369,20 @@ const __vue2_script$s = {
       }
       this.timeoutId = clearTimeout(this.timeoutId);
       if (shouldShowMenu) {
-        this.$emit("update:modelValue", this.menuVisible = true);
+        this.$emit("update:modelValue", this.detachableVisible = true);
         this.$emit("input", true);
         this.$emit("open");
-        this.openMenu(e);
+        this.open(e);
       } else
-        this.closeMenu();
+        this.close();
     },
-    async openMenu(e) {
-      this.menuVisible = true;
-      await this.insertMenu();
+    async open(e) {
+      this.detachableVisible = true;
+      await this.insertInDOM();
       if (this.minWidth === "activator")
         this.activatorWidth = this.activatorEl.offsetWidth;
       if (!this.noPosition)
-        this.computeMenuPosition(e);
+        this.computeDetachableCoords(e);
       this.timeoutId = setTimeout(() => {
         this.$emit("update:modelValue", true);
         this.$emit("input", true);
@@ -3228,105 +3393,19 @@ const __vue2_script$s = {
       if (!this.noPosition)
         window.addEventListener("resize", this.onResize);
     },
-    async closeMenu(force = false) {
-      if (!this.menuVisible)
+    async close(force = false) {
+      if (!this.detachableVisible)
         return;
       if (this.showOnHover && !force) {
         await new Promise((resolve) => setTimeout(resolve, 10));
         if (this.showOnHover && (this.hoveringMenu || this.hoveringActivator))
           return;
       }
-      this.$emit("update:modelValue", this.menuVisible = false);
+      this.$emit("update:modelValue", this.detachableVisible = false);
       this.$emit("input", false);
       this.$emit("close");
       document.removeEventListener("mousedown", this.onOutsideMousedown);
       window.removeEventListener("resize", this.onResize);
-    },
-    onOutsideMousedown(e) {
-      if (!this.menuEl.contains(e.target) && !this.activatorEl.contains(e.target)) {
-        this.$emit("update:modelValue", this.menuVisible = false);
-        this.$emit("input", false);
-        this.$emit("close");
-        document.removeEventListener("mousedown", this.onOutsideMousedown);
-        window.removeEventListener("resize", this.onResize);
-      }
-    },
-    onResize() {
-      if (this.minWidth === "activator")
-        this.activatorWidth = this.activatorEl.offsetWidth;
-      this.computeMenuPosition();
-    },
-    getCoordinates(e) {
-      const { top, left, width, height } = (e ? e.target : this.activatorEl).getBoundingClientRect();
-      let coords = { top, left, width, height };
-      if (!this.fixed) {
-        const { top: targetTop, left: targetLeft } = this.menuParentEl.getBoundingClientRect();
-        const computedStyles2 = window.getComputedStyle(this.menuParentEl, null);
-        coords = __spreadProps(__spreadValues({}, coords), {
-          top: top - targetTop + this.menuParentEl.scrollTop - parseInt(computedStyles2.getPropertyValue("border-top-width")),
-          left: left - targetLeft + this.menuParentEl.scrollLeft - parseInt(computedStyles2.getPropertyValue("border-left-width"))
-        });
-      }
-      return coords;
-    },
-    computeMenuPosition(e) {
-      let { top, left, width, height } = this.getCoordinates(e);
-      this.menuEl.style.visibility = "hidden";
-      this.menuEl.style.display = "flex";
-      const computedStyles2 = window.getComputedStyle(this.menuEl, null);
-      switch (this.position) {
-        case "top": {
-          top -= this.menuEl.offsetHeight;
-          if (this.alignRight) {
-            left += width - this.menuEl.offsetWidth + parseInt(computedStyles2.getPropertyValue("border-right-width"));
-          } else if (!this.alignLeft)
-            left += (width - this.menuEl.offsetWidth) / 2;
-          break;
-        }
-        case "bottom": {
-          top += height;
-          if (this.alignRight) {
-            left += width - this.menuEl.offsetWidth + parseInt(computedStyles2.getPropertyValue("border-right-width"));
-          } else if (!this.alignLeft)
-            left += (width - this.menuEl.offsetWidth) / 2;
-          break;
-        }
-        case "left": {
-          left -= this.menuEl.offsetWidth;
-          if (this.alignBottom)
-            top += height - this.menuEl.offsetHeight;
-          else if (!this.alignTop)
-            top += (height - this.menuEl.offsetHeight) / 2;
-          break;
-        }
-        case "right": {
-          left += width;
-          if (this.alignBottom) {
-            top += height - this.menuEl.offsetHeight + parseInt(computedStyles2.getPropertyValue("margin-top"));
-          } else if (!this.alignTop) {
-            top += (height - this.menuEl.offsetHeight) / 2 + parseInt(computedStyles2.getPropertyValue("margin-top"));
-          }
-          break;
-        }
-      }
-      this.menuEl.style.visibility = null;
-      if (!this.menuVisible)
-        this.menuEl.style.display = "none";
-      this.menuCoordinates = { top, left };
-    },
-    insertMenu() {
-      return new Promise((resolve) => {
-        this.$nextTick(() => {
-          var _a;
-          this.menuEl = ((_a = this.$refs.menu) == null ? void 0 : _a.$el) || this.$refs.menu;
-          this.detachToTarget.appendChild(this.menuEl);
-          resolve();
-        });
-      });
-    },
-    removeMenu() {
-      if (this.menuEl && this.menuEl.parentNode)
-        this.menuEl.remove();
     }
   },
   mounted() {
@@ -3342,7 +3421,7 @@ const __vue2_script$s = {
       this.toggleMenu({ type: "click", target: this.activatorEl });
   },
   beforeDestroy() {
-    this.removeMenu();
+    this.removeFromDOM();
     if (this.overlay && this.overlayEl.parentNode)
       this.overlayEl.remove();
     if (this.activatorEl && this.activatorEl.parentNode)
@@ -3350,12 +3429,16 @@ const __vue2_script$s = {
   },
   watch: {
     value(bool) {
-      if (!!bool !== this.menuVisible)
+      if (!!bool !== this.detachableVisible)
         this.toggleMenu({ type: "click", target: this.activatorEl });
     },
     detachTo() {
-      this.removeMenu();
-      this.insertMenu();
+      this.removeFromDOM();
+      this.insertInDOM();
+    },
+    appendTo() {
+      this.removeFromDOM();
+      this.insertInDOM();
     }
   }
 };
@@ -4020,7 +4103,7 @@ 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", "detach-to": (_vm.menuProps || {}).detachTo !== void 0 ? (_vm.menuProps || {}).detachTo : ".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" }, 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) {
@@ -5493,13 +5576,13 @@ var render$8 = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "w-tooltip-wrap", class: { "w-tooltip-wrap--attached": !_vm.detachTo } }, [_vm._t("activator", null, { "on": _vm.eventHandlers }), _c("transition", { attrs: { "name": _vm.transitionName, "appear": "" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.showTooltip, expression: "showTooltip" }], ref: "tooltip", staticClass: "w-tooltip", class: _vm.classes, style: _vm.styles }, [_vm._t("default")], 2)])], 2);
+  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);
 };
 var staticRenderFns$8 = [];
 var wTooltip_vue_vue_type_style_index_0_lang = "";
-const marginFromWindowSide = 4;
 const __vue2_script$8 = {
   name: "w-tooltip",
+  mixins: [DetachableMixin],
   props: {
     value: {},
     showOnClick: { type: Boolean },
@@ -5511,25 +5594,31 @@ const __vue2_script$8 = {
     round: { type: Boolean },
     transition: { type: String },
     tooltipClass: { type: [String, Object, Array] },
-    detachTo: {},
+    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 },
-    zIndex: { type: [Number, String, Boolean] }
+    alignTop: { type: Boolean },
+    alignBottom: { type: Boolean },
+    alignLeft: { type: Boolean },
+    alignRight: { type: Boolean },
+    zIndex: { type: [Number, String, Boolean] },
+    persistent: { type: Boolean },
+    noPosition: { type: Boolean }
   },
   emits: ["input", "update:modelValue", "open", "close"],
   data: () => ({
-    showTooltip: false,
-    coordinates: {
+    detachableVisible: false,
+    hoveringActivator: false,
+    detachableCoords: {
       top: 0,
-      left: 0,
-      width: 0,
-      height: 0
+      left: 0
     },
     activatorEl: null,
-    tooltipEl: null,
+    detachableEl: null,
     timeoutId: null
   }),
   computed: {
@@ -5540,69 +5629,23 @@ 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}`;
     },
-    detachToTarget() {
-      const defaultTarget = ".w-app";
-      let target = this.detachTo || defaultTarget;
-      if (target === true)
-        target = defaultTarget;
-      else if (target && !["object", "string"].includes(typeof target))
-        target = defaultTarget;
-      else if (typeof target === "object" && !target.nodeType) {
-        target = defaultTarget;
-        consoleWarn("Invalid node provided in w-tooltip `attach-to`. Falling back to .w-app.");
-      }
-      if (typeof target === "string")
-        target = document.querySelector(target);
-      if (!target) {
-        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : defaultTarget}`);
-        target = document.querySelector(defaultTarget);
-      }
-      return target;
-    },
-    tooltipParentEl() {
-      return this.detachTo ? this.detachToTarget : this.$el;
-    },
     position() {
       return this.top && "top" || this.bottom && "bottom" || this.left && "left" || this.right && "right" || "bottom";
     },
-    tooltipCoordinates() {
-      const coords = {};
-      const { top, left, width, height } = this.coordinates;
-      switch (this.position) {
-        case "top": {
-          coords.top = top;
-          coords.left = left + width / 2;
-          break;
-        }
-        case "bottom": {
-          coords.top = top + height;
-          coords.left = left + width / 2;
-          break;
-        }
-        case "left": {
-          coords.top = top + height / 2;
-          coords.left = left;
-          break;
-        }
-        case "right": {
-          coords.top = top + height / 2;
-          coords.left = left + width;
-          break;
-        }
-      }
-      return coords;
+    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,
         [`${this.bgColor}--bg`]: this.bgColor
       }, this.tooltipClasses), {
-        [`w-tooltip--${this.position}`]: true,
+        [`w-tooltip--${this.position}`]: !this.noPosition,
+        [`w-tooltip--align-${this.alignment}`]: !this.noPosition && this.alignment,
         "w-tooltip--tile": this.tile,
         "w-tooltip--round": this.round,
         "w-tooltip--shadow": this.shadow,
         "w-tooltip--fixed": this.fixed,
-        "w-tooltip--active": this.showTooltip,
         "w-tooltip--no-border": this.noBorder || this.bgColor,
         "w-tooltip--custom-transition": this.transition
       });
@@ -5610,8 +5653,8 @@ const __vue2_script$8 = {
     styles() {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || null,
-        top: this.tooltipCoordinates.top && `${~~this.tooltipCoordinates.top}px` || null,
-        left: this.tooltipCoordinates.left && `${~~this.tooltipCoordinates.left}px` || null,
+        top: this.detachableCoords.top && `${~~this.detachableCoords.top}px` || null,
+        left: this.detachableCoords.left && `${~~this.detachableCoords.left}px` || null,
         "--w-tooltip-bg-color": this.$waveui.colors[this.bgColor || "white"]
       };
     },
@@ -5623,8 +5666,14 @@ const __vue2_script$8 = {
         handlers = {
           focus: this.toggle,
           blur: this.toggle,
-          mouseenter: this.toggle,
-          mouseleave: this.toggle
+          mouseenter: (e) => {
+            this.hoveringActivator = true;
+            this.open(e);
+          },
+          mouseleave: (e) => {
+            this.hoveringActivator = false;
+            this.close();
+          }
         };
         if (typeof window !== "undefined" && "ontouchstart" in window)
           handlers.click = this.toggle;
@@ -5634,7 +5683,7 @@ const __vue2_script$8 = {
   },
   methods: {
     toggle(e) {
-      let shouldShowTooltip = this.showTooltip;
+      let shouldShowTooltip = this.detachableVisible;
       if (typeof window !== "undefined" && "ontouchstart" in window) {
         if (e.type === "click")
           shouldShowTooltip = !shouldShowTooltip;
@@ -5646,89 +5695,69 @@ const __vue2_script$8 = {
         shouldShowTooltip = false;
       this.timeoutId = clearTimeout(this.timeoutId);
       if (shouldShowTooltip) {
-        this.coordinates = this.getCoordinates(e);
-        this.timeoutId = setTimeout(() => {
-          this.showTooltip = true;
-          this.$emit("update:modelValue", true);
-          this.$emit("input", true);
-          this.$emit("open");
-        }, 10);
-      } else {
-        this.showTooltip = false;
-        this.$emit("update:modelValue", false);
-        this.$emit("input", false);
-        this.$emit("close");
-      }
-    },
-    getCoordinates() {
-      const { top, left, width, height } = this.activatorEl.getBoundingClientRect();
-      let coords = { top, left, width, height };
-      if (!this.fixed) {
-        const { top: targetTop, left: targetLeft } = this.tooltipParentEl.getBoundingClientRect();
-        coords = __spreadProps(__spreadValues({}, coords), { top: top - targetTop, left: left - targetLeft });
-      }
-      const tooltipEl = this.$refs.tooltip;
-      tooltipEl.style.visibility = "hidden";
-      tooltipEl.style.display = "table";
-      const computedStyles2 = window.getComputedStyle(tooltipEl, null);
-      if (this.position === "top" && top - tooltipEl.offsetHeight < 0) {
-        const margin = -parseInt(computedStyles2.getPropertyValue("margin-top"));
-        coords.top -= top - tooltipEl.offsetHeight - margin - marginFromWindowSide;
-      } else if (this.position === "left" && left - tooltipEl.offsetWidth < 0) {
-        const margin = -parseInt(computedStyles2.getPropertyValue("margin-left"));
-        coords.left -= left - tooltipEl.offsetWidth - margin - marginFromWindowSide;
-      } else if (this.position === "right" && left + width + tooltipEl.offsetWidth > window.innerWidth) {
-        const margin = parseInt(computedStyles2.getPropertyValue("margin-left"));
-        coords.left -= left + width + tooltipEl.offsetWidth - window.innerWidth + margin + marginFromWindowSide;
-      } else if (this.position === "bottom" && top + height + tooltipEl.offsetHeight > window.innerHeight) {
-        const margin = parseInt(computedStyles2.getPropertyValue("margin-top"));
-        coords.top -= top + height + tooltipEl.offsetHeight - window.innerHeight + margin + marginFromWindowSide;
-      }
-      if (this.transition) {
-        if (["top", "bottom"].includes(this.position))
-          coords.left -= tooltipEl.offsetWidth / 2;
-        if (["left", "right"].includes(this.position))
-          coords.top -= tooltipEl.offsetHeight / 2;
-        if (this.position === "left")
-          coords.left -= tooltipEl.offsetWidth;
-        if (this.position === "top")
-          coords.top -= tooltipEl.offsetHeight;
-      }
-      tooltipEl.style.visibility = null;
-      tooltipEl.style.display = "none";
-      return coords;
+        this.$emit("update:modelValue", this.detachableVisible = true);
+        this.$emit("input", true);
+        this.$emit("open");
+        this.open(e);
+      } else
+        this.close();
     },
-    insertTooltip() {
-      const wrapper = this.$el;
-      this.tooltipEl = this.$refs.tooltip.$el || this.$refs.tooltip;
-      wrapper.parentNode.insertBefore(this.activatorEl, wrapper);
-      this.detachToTarget.appendChild(this.$refs.tooltip);
+    async open(e) {
+      this.detachableVisible = true;
+      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);
     },
-    removeTooltip() {
-      if (this.tooltipEl && this.tooltipEl.parentNode)
-        this.tooltipEl.remove();
+    async close(force = false) {
+      if (!this.detachableVisible)
+        return;
+      if (this.showOnHover && !force) {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        if (this.showOnHover && this.hoveringActivator)
+          return;
+      }
+      this.$emit("update:modelValue", this.detachableVisible = false);
+      this.$emit("input", false);
+      this.$emit("close");
+      document.removeEventListener("mousedown", this.onOutsideMousedown);
+      window.removeEventListener("resize", this.onResize);
     }
   },
   mounted() {
-    this.activatorEl = this.$el.firstElementChild;
-    if (this.detachTo)
-      this.insertTooltip();
+    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.removeTooltip();
+    this.removeFromDOM();
     if (this.activatorEl && this.activatorEl.parentNode)
       this.activatorEl.remove();
   },
   watch: {
     value(bool) {
-      if (bool !== this.showTooltip)
+      if (bool !== this.detachableVisible)
         this.toggle({ type: "click", target: this.activatorEl });
     },
     detachTo() {
-      this.removeTooltip();
-      this.insertTooltip();
+      this.removeFromDOM();
+      this.insertInDOM();
+    },
+    appendTo() {
+      this.removeFromDOM();
+      this.insertInDOM();
     }
   }
 };