wave-ui 1.48.0 → 1.49.0

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();
   },
@@ -3079,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";
@@ -3106,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: {
@@ -3186,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();
     }
   }
 };
@@ -3242,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: () => ({
@@ -3270,7 +3359,6 @@ const __vue2_script$s = {
       top: 0,
       left: 0
     },
-    activatorEl: null,
     activatorWidth: 0,
     detachableEl: null,
     timeoutId: null
@@ -3279,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;
@@ -3331,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);
@@ -3346,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;
@@ -3368,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;
@@ -3407,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 = {};
@@ -5576,7 +5626,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 = "";
@@ -5594,20 +5644,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: () => ({
@@ -5617,7 +5655,6 @@ const __vue2_script$8 = {
       top: 0,
       left: 0
     },
-    activatorEl: null,
     detachableEl: null,
     timeoutId: null
   }),
@@ -5629,12 +5666,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,
@@ -5658,7 +5689,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 };
@@ -5694,16 +5725,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;
@@ -5733,32 +5765,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 = {};