wave-ui 2.30.0 → 2.31.0

package/dist/wave-ui.es.js

@@ -500,7 +500,7 @@ let WaveUI = _WaveUI;
 __publicField(WaveUI, "instance", null);
 __publicField(WaveUI, "vueInstance", null);
 WaveUI.version = "__VERSION__";
-const _hoisted_1$t = ["aria-expanded"];
+const _hoisted_1$u = ["aria-expanded"];
 const _hoisted_2$e = ["onClick", "onFocus", "onKeypress", "tabindex"];
 const _hoisted_3$b = ["innerHTML"];
 const _hoisted_4$a = ["innerHTML"];
@@ -585,7 +585,7 @@ function render$O(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           _: 2
         }, 1024)
-      ], 10, _hoisted_1$t);
+      ], 10, _hoisted_1$u);
     }), 128))
   ], 2);
 }
@@ -670,7 +670,7 @@ const _sfc_main$O = {
   }
 };
 var wAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", render$O]]);
-const _hoisted_1$s = { class: "w-alert__content" };
+const _hoisted_1$t = { class: "w-alert__content" };
 function render$N(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_icon = resolveComponent("w-icon");
   const _component_w_button = resolveComponent("w-button");
@@ -688,7 +688,7 @@ function render$N(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       })) : createCommentVNode("", true),
-      createElementVNode("div", _hoisted_1$s, [
+      createElementVNode("div", _hoisted_1$t, [
         renderSlot(_ctx.$slots, "default")
       ]),
       $props.dismiss ? (openBlock(), createBlock(_component_w_button, {
@@ -785,6 +785,7 @@ const _sfc_main$N = {
   }
 };
 var wAlert = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", render$N]]);
+const _hoisted_1$s = ["innerHTML"];
 function render$M(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_w_alert = resolveComponent("w-alert");
   return openBlock(), createBlock(TransitionGroup, {
@@ -803,9 +804,11 @@ function render$M(_ctx, _cache, $props, $setup, $data, $options) {
             modelValue: notif._value,
             "onUpdate:modelValue": ($event) => notif._value = $event,
             onClose: ($event) => _ctx.notifManager.dismiss(notif._uid)
-          }, notif), {
+          }, $options.notifProps(notif)), {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(notif.message), 1)
+              createElementVNode("div", {
+                innerHTML: notif.message
+              }, null, 8, _hoisted_1$s)
             ]),
             _: 2
           }, 1040, ["modelValue", "onUpdate:modelValue", "onClose"])) : createCommentVNode("", true)
@@ -833,6 +836,12 @@ const _sfc_main$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, message, timeout } = _a, props = __objRest(_a, ["_value", "_uid", "message", "timeout"]);
+      return props;
+    }
+  },
   created() {
     this.notifManager = new NotificationManager$1();
   },
@@ -1766,7 +1775,7 @@ function render$E(_ctx, _cache, $props, $setup, $data, $options) {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = $event)
     }, $options.wMenuProps), {
       activator: withCtx(({ on }) => [
-        createVNode(_component_w_button, mergeProps({ class: "w-confirm__button" }, toHandlers(__spreadValues(__spreadValues({}, _ctx.$listeners), on)), $options.buttonProps), {
+        createVNode(_component_w_button, mergeProps({ class: "w-confirm__button" }, __spreadValues(__spreadValues(__spreadValues({}, _ctx.$attrs), $options.buttonProps), on)), {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default")
           ]),
@@ -2843,7 +2852,7 @@ const _hoisted_1$i = ["name"];
 const _hoisted_2$a = ["for"];
 const _hoisted_3$9 = ["for", "innerHTML"];
 const _hoisted_4$8 = ["id", "type", "name", "placeholder", "step", "min", "max", "minlength", "maxlength", "readonly", "aria-readonly", "disabled", "required", "tabindex"];
-const _hoisted_5$7 = ["id", "name", "multiple"];
+const _hoisted_5$7 = ["id", "name", "multiple", "data-progress"];
 const _hoisted_6$4 = {
   class: "w-input__no-file",
   key: "no-file"
@@ -2880,16 +2889,16 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
         $props.labelPosition === "left" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
             key: 0,
-            class: "w-input__label w-input__label--left w-form-el-shakable",
+            class: normalizeClass(["w-input__label w-input__label--left w-form-el-shakable", $options.validationClasses]),
             for: `w-input--${_ctx._.uid}`
           }, [
             renderSlot(_ctx.$slots, "default")
-          ], 8, _hoisted_2$a)) : $props.label ? (openBlock(), createElementBlock("label", {
+          ], 10, _hoisted_2$a)) : $props.label ? (openBlock(), createElementBlock("label", {
             key: 1,
-            class: "w-input__label w-input__label--left w-form-el-shakable",
+            class: normalizeClass(["w-input__label w-input__label--left w-form-el-shakable", $options.validationClasses]),
             for: `w-input--${_ctx._.uid}`,
             innerHTML: $props.label
-          }, null, 8, _hoisted_3$9)) : createCommentVNode("", true)
+          }, null, 10, _hoisted_3$9)) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["w-input__input-wrap", $options.inputWrapClasses])
@@ -2941,7 +2950,9 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
               onBlur: _cache[7] || (_cache[7] = (...args) => $options.onBlur && $options.onBlur(...args)),
               onChange: _cache[8] || (_cache[8] = (...args) => $options.onFileChange && $options.onFileChange(...args)),
               multiple: $props.multiple || null
-            }, $options.attrs), null, 16, _hoisted_5$7),
+            }, $options.attrs, {
+              "data-progress": $options.overallFilesProgress
+            }), null, 16, _hoisted_5$7),
             createVNode(TransitionGroup, {
               class: "w-input__input w-input__input--file",
               tag: "label",
@@ -2965,7 +2976,7 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
                       class: "filename",
                       key: `${i}b`
                     }, toDisplayString(file.base), 1)),
-                    createTextVNode(toDisplayString(file.extension), 1)
+                    createTextVNode(toDisplayString(file.extension ? `.${file.extension}` : ""), 1)
                   ]);
                 }), 128))
               ]),
@@ -2975,13 +2986,13 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
           $props.labelPosition === "inside" && $options.showLabelInside ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
             _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
               key: 0,
-              class: normalizeClass(["w-input__label w-input__label--inside w-form-el-shakable", $data.isFocused && { [_ctx.valid === false ? "error" : $props.color]: $props.color || _ctx.valid === false }]),
+              class: normalizeClass(["w-input__label w-input__label--inside w-form-el-shakable", $options.validationClasses]),
               for: `w-input--${_ctx._.uid}`
             }, [
               renderSlot(_ctx.$slots, "default")
             ], 10, _hoisted_8$3)) : $props.label ? (openBlock(), createElementBlock("label", {
               key: 1,
-              class: normalizeClass(["w-input__label w-input__label--inside w-form-el-shakable", $data.isFocused && { [_ctx.valid === false ? "error" : $props.color]: $props.color || _ctx.valid === false }]),
+              class: normalizeClass(["w-input__label w-input__label--inside w-form-el-shakable", $options.validationClasses]),
               for: `w-input--${_ctx._.uid}`,
               innerHTML: $props.label
             }, null, 10, _hoisted_9$3)) : createCommentVNode("", true)
@@ -2997,9 +3008,16 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
               createTextVNode(toDisplayString($props.innerIconRight), 1)
             ]),
             _: 1
-          }, 8, ["for"])) : createCommentVNode("", true)
+          }, 8, ["for"])) : createCommentVNode("", true),
+          $options.hasLoading || $props.showProgress && ($options.uploadInProgress || $options.uploadComplete) ? (openBlock(), createBlock(_component_w_progress, {
+            key: 5,
+            class: "fill-width",
+            size: "2",
+            color: $props.progressColor || $props.color,
+            "model-value": $props.showProgress ? ($options.uploadInProgress || $options.uploadComplete) && $options.overallFilesProgress : $options.loadingValue
+          }, null, 8, ["color", "model-value"])) : createCommentVNode("", true)
         ], 2),
-        $props.type === "file" && $data.inputFiles.length ? (openBlock(), createElementBlock("label", {
+        $props.type === "file" && $props.preview && $data.inputFiles.length ? (openBlock(), createElementBlock("label", {
           key: 1,
           class: "d-flex",
           for: `w-input--${_ctx._.uid}`
@@ -3015,32 +3033,26 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
                 src: file.preview,
                 alt: ""
               }, null, 8, _hoisted_11$2)) : (openBlock(), createElementBlock("i", {
-                class: "w-icon wi-file w-input__file-preview primary",
+                class: normalizeClass(["w-icon w-input__file-preview primary size--md", $props.preview && typeof $props.preview === "string" ? $props.preview : "wi-file"]),
                 key: `${i}c`
-              }))
+              }, null, 2))
             ], 64);
           }), 256))
         ], 8, _hoisted_10$3)) : createCommentVNode("", true),
         $props.labelPosition === "right" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
             key: 0,
-            class: "w-input__label w-input__label--right w-form-el-shakable",
+            class: normalizeClass(["w-input__label w-input__label--right w-form-el-shakable", $options.validationClasses]),
             for: `w-input--${_ctx._.uid}`
           }, [
             renderSlot(_ctx.$slots, "default")
-          ], 8, _hoisted_12$1)) : $props.label ? (openBlock(), createElementBlock("label", {
+          ], 10, _hoisted_12$1)) : $props.label ? (openBlock(), createElementBlock("label", {
             key: 1,
-            class: "w-input__label w-input__label--right w-form-el-shakable",
+            class: normalizeClass(["w-input__label w-input__label--right w-form-el-shakable", $options.validationClasses]),
             for: `w-input--${_ctx._.uid}`,
             innerHTML: $props.label
-          }, null, 8, _hoisted_13$1)) : createCommentVNode("", true)
-        ], 64)) : createCommentVNode("", true),
-        $props.loading ? (openBlock(), createBlock(_component_w_progress, {
-          key: 3,
-          class: "fill-width",
-          size: "2",
-          color: $props.progressColor || $props.color
-        }, null, 8, ["color"])) : createCommentVNode("", true)
+          }, null, 10, _hoisted_13$1)) : createCommentVNode("", true)
+        ], 64)) : createCommentVNode("", true)
       ], 64))
     ]),
     _: 3
@@ -3073,10 +3085,12 @@ const _sfc_main$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.modelValue,
@@ -3101,14 +3115,48 @@ const _sfc_main$u = {
       return htmlAttrs;
     },
     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,
@@ -3125,6 +3173,11 @@ const _sfc_main$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,
@@ -3136,7 +3189,8 @@ const _sfc_main$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
       };
     }
   },
@@ -3156,31 +3210,34 @@ const _sfc_main$u = {
     },
     onFileChange(e) {
       this.inputFiles = [...e.target.files].map((original) => {
-        const [, base, extension] = original.name.match(/^(.*)(\..*?)$/);
+        const [, base = "", extension = "", full = ""] = original.name.match(/^(.*?)\.([^.]*)$|(.*)/);
         const file = reactive({
           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) => {
           file.preview = e.target.result;
         });
-      }
+      } else
+        delete file.preview;
       reader.addEventListener("progress", (e) => {
         if (e.loaded && e.total)
           file.progress = e.loaded * 100 / e.total;
@@ -3536,6 +3593,25 @@ const _sfc_main$t = {
 };
 var wList = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", render$t]]);
 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";
@@ -3563,6 +3639,24 @@ var DetachableMixin = {
     },
     detachableParentEl() {
       return this.appendToTarget;
+    },
+    hasSeparateActivator() {
+      return !this.$slots.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: {
@@ -3643,14 +3737,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.$slots.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.modelValue)
+      this.toggleMenu({ type: "click", target: this.activatorEl });
+  },
+  beforeUnmount() {
+    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.$slots.activator)
+      this.activatorEl.remove();
+  },
+  watch: {
+    modelValue(bool) {
+      if (!!bool !== this.detachableVisible)
+        this.toggle({ type: "click", target: this.activatorEl });
+    },
+    detachTo() {
+      this.removeFromDOM();
+      this.insertInDOM();
+    },
+    appendTo() {
+      this.removeFromDOM();
+      this.insertInDOM();
     }
   }
 };
@@ -3717,7 +3869,7 @@ function render$s(_ctx, _cache, $props, $setup, $data, $options) {
       persistent: $props.persistent,
       class: $options.overlayClasses
     }, $props.overlayProps, {
-      "z-index": ($props.zIndex || 200) - 1,
+      "z-index": (_ctx.zIndex || 200) - 1,
       "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => _ctx.detachableVisible = false)
     }), null, 16, ["model-value", "persistent", "class", "z-index"])) : createCommentVNode("", true)
   ]);
@@ -3742,24 +3894,12 @@ const _sfc_main$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: () => ({
@@ -3770,7 +3910,6 @@ const _sfc_main$s = {
       top: 0,
       left: 0
     },
-    activatorEl: null,
     activatorWidth: 0,
     detachableEl: null,
     timeoutId: null
@@ -3779,12 +3918,6 @@ const _sfc_main$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;
@@ -3831,8 +3964,8 @@ const _sfc_main$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);
@@ -3846,15 +3979,15 @@ const _sfc_main$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;
@@ -3868,16 +4001,17 @@ const _sfc_main$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;
@@ -3907,39 +4041,6 @@ const _sfc_main$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.modelValue)
-      this.toggleMenu({ type: "click", target: this.activatorEl });
-  },
-  beforeUnmount() {
-    this.removeFromDOM();
-    if (this.overlay && this.overlayEl.parentNode)
-      this.overlayEl.remove();
-    if (this.activatorEl && this.activatorEl.parentNode)
-      this.activatorEl.remove();
-  },
-  watch: {
-    modelValue(bool) {
-      if (!!bool !== this.detachableVisible)
-        this.toggleMenu({ type: "click", target: this.activatorEl });
-    },
-    detachTo() {
-      this.removeFromDOM();
-      this.insertInDOM();
-    },
-    appendTo() {
-      this.removeFromDOM();
-      this.insertInDOM();
-    }
   }
 };
 var wMenu = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", render$s]]);
@@ -4561,7 +4662,8 @@ const _hoisted_2$7 = ["disabled", "onMouseenter", "onClick", "tabindex"];
 function render$l(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.formRegister ? "w-form-element" : "div"), mergeProps({ ref: "formEl" }, _ctx.formRegister && { validators: _ctx.validators, inputValue: $data.rating, disabled: _ctx.isDisabled, readonly: _ctx.isReadonly }, {
     valid: _ctx.valid,
-    onReset: _cache[4] || (_cache[4] = ($event) => {
+    "onUpdate:valid": _cache[4] || (_cache[4] = ($event) => _ctx.valid = $event),
+    onReset: _cache[5] || (_cache[5] = ($event) => {
       _ctx.$emit("update:modelValue", $data.rating = null);
       _ctx.$emit("input", null);
     }),
@@ -5056,8 +5158,9 @@ const _sfc_main$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() {
@@ -6750,7 +6853,7 @@ var wToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", render$9]]);
 const _hoisted_1 = { class: "w-tooltip-wrap" };
 function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1, [
-    renderSlot(_ctx.$slots, "activator", { on: $options.eventHandlers }),
+    renderSlot(_ctx.$slots, "activator", { on: $options.activatorEventHandlers }),
     createVNode(Transition, {
       name: $options.transitionName,
       appear: ""
@@ -6784,20 +6887,8 @@ const _sfc_main$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: () => ({
@@ -6807,7 +6898,6 @@ const _sfc_main$8 = {
       top: 0,
       left: 0
     },
-    activatorEl: null,
     detachableEl: null,
     timeoutId: null
   }),
@@ -6819,12 +6909,6 @@ const _sfc_main$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,
@@ -6848,7 +6932,7 @@ const _sfc_main$8 = {
         "--w-tooltip-bg-color": this.$waveui.colors[this.bgColor || "white"]
       };
     },
-    eventHandlers() {
+    activatorEventHandlers() {
       let handlers = {};
       if (this.showOnClick)
         handlers = { click: this.toggle };
@@ -6884,16 +6968,17 @@ const _sfc_main$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;
@@ -6923,32 +7008,6 @@ const _sfc_main$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.modelValue)
-      this.toggle({ type: "click", target: this.activatorEl });
-  },
-  beforeUnmount() {
-    this.removeFromDOM();
-    if (this.activatorEl && this.activatorEl.parentNode)
-      this.activatorEl.remove();
-  },
-  watch: {
-    modelValue(bool) {
-      if (bool !== this.detachableVisible)
-        this.toggle({ type: "click", target: this.activatorEl });
-    },
-    detachTo() {
-      this.removeFromDOM();
-      this.insertInDOM();
-    },
-    appendTo() {
-      this.removeFromDOM();
-      this.insertInDOM();
-    }
   }
 };
 var wTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", render$8]]);