@transsionfe/semi-ui-vue 0.0.1 → 0.0.2

package/lib/es/components/tooltip/Tooltip.vue2.js

@@ -0,0 +1,594 @@
+import { defineComponent as Ae, useAttrs as Oe, ref as g, computed as P, onMounted as xe, nextTick as I, onBeforeUnmount as be, watch as ce, createElementBlock as V, openBlock as D, Fragment as de, createElementVNode as Z, createBlock as J, createCommentVNode as Q, normalizeClass as $, renderSlot as Le, unref as w, normalizeStyle as W, withCtx as Fe, withModifiers as He, createTextVNode as $e, toDisplayString as Ne, resolveDynamicComponent as Xe } from "vue";
+import ee from "classnames";
+import { BASE_CLASS_PREFIX as Ke } from "@douyinfe/semi-foundation/base/constants";
+import We from "@douyinfe/semi-foundation/tooltip/foundation";
+import { numbers as k, cssClasses as te } from "@douyinfe/semi-foundation/tooltip/constants";
+import { getUuidShort as _e } from "@douyinfe/semi-foundation/utils/uuid";
+import Ue from "../_portal/Portal.vue.js";
+import ze from "./TriangleArrow.vue.js";
+import Ye from "./TriangleArrowVertical.vue.js";
+import qe from "./ContentRenderer.js";
+const je = ["id", "role", "x-placement"], at = /* @__PURE__ */ Ae({
+  inheritAttrs: !1,
+  __name: "Tooltip",
+  props: {
+    children: {},
+    motion: { type: Boolean, default: !0 },
+    autoAdjustOverflow: { type: Boolean, default: !0 },
+    position: { default: "top" },
+    getPopupContainer: {},
+    mouseEnterDelay: { default: k.MOUSE_ENTER_DELAY },
+    mouseLeaveDelay: { default: k.MOUSE_LEAVE_DELAY },
+    trigger: { default: "hover" },
+    className: {},
+    clickToHide: { type: Boolean },
+    visible: { type: Boolean },
+    style: {},
+    content: {},
+    prefixCls: { default: te.PREFIX },
+    onVisibleChange: {},
+    onClickOutSide: {},
+    spacing: { default: k.SPACING },
+    margin: { default: k.MARGIN },
+    showArrow: { type: Boolean, default: !0 },
+    zIndex: { default: k.DEFAULT_Z_INDEX },
+    rePosKey: {},
+    role: { default: "tooltip" },
+    arrowBounding: { default: () => k.ARROW_BOUNDING },
+    transformFromCenter: { type: Boolean, default: !0 },
+    arrowPointAtCenter: { type: Boolean, default: !0 },
+    wrapWhenSpecial: { type: Boolean, default: !0 },
+    stopPropagation: { type: Boolean },
+    clickTriggerToHide: { type: Boolean },
+    wrapperClassName: {},
+    closeOnEsc: { type: Boolean, default: !1 },
+    guardFocus: { type: Boolean, default: !1 },
+    returnFocusOnClose: { type: Boolean, default: !1 },
+    onEscKeyDown: {},
+    disableArrowKeyDown: { type: Boolean, default: !1 },
+    wrapperId: {},
+    preventScroll: { type: Boolean },
+    disableFocusListener: { type: Boolean, default: !1 },
+    afterClose: {},
+    keepDOM: { type: Boolean, default: !1 }
+  },
+  emits: ["update:visible", "visibleChange", "clickOutside", "escKeyDown"],
+  setup(A, { expose: fe, emit: pe }) {
+    const n = A, ve = Oe(), N = pe, c = g(null), E = g(null), _ = g(null);
+    let oe = null;
+    const ge = (e) => {
+      oe = e;
+    }, O = g(!1), x = g(""), R = g(!1), b = g(!1), T = g(n.position || "top"), y = g({}), U = g(!1), z = g(n.wrapperId || ""), Y = g(!1), M = g(!1), ne = g(null), B = /* @__PURE__ */ new Map();
+    let C = null;
+    const L = /* @__PURE__ */ new Map();
+    let X = 0, h = null, q = 0;
+    const F = () => {
+      var e;
+      return ((e = n.getPopupContainer) == null ? void 0 : e.call(n)) || document.body;
+    }, H = P(() => n.prefixCls), me = P(() => typeof n.content == "function"), ye = P(() => ee("semi-tooltip-trigger", ve.class)), he = P(
+      () => ee(n.className, n.wrapperClassName, {
+        [`${H.value}-wrapper`]: !0,
+        [`${H.value}-wrapper-show`]: O.value,
+        [`${H.value}-with-arrow`]: !!n.showArrow,
+        [`${te.PREFIX}-animation-show`]: n.motion && x.value === "enter" && b.value,
+        [`${te.PREFIX}-animation-hide`]: n.motion && x.value === "leave"
+      })
+    ), we = P(() => {
+      const e = {};
+      return y.value.left !== void 0 && (e.left = `${y.value.left}px`), y.value.top !== void 0 && (e.top = `${y.value.top}px`), y.value.transform && (e.transform = y.value.transform), e;
+    }), Ce = P(() => {
+      var o;
+      const e = { ...n.style };
+      U.value && (e.display = "none"), n.motion && b.value && y.value.transformOrigin && (e.transformOrigin = y.value.transformOrigin);
+      const t = (o = n.style) == null ? void 0 : o.opacity;
+      return t !== void 0 && (e.opacity = t), e;
+    }), Se = P(() => {
+      if (n.showArrow && typeof n.showArrow != "boolean")
+        return n.showArrow;
+      const e = T.value;
+      return e != null && e.includes("left") || e != null && e.includes("right") ? Ye : ze;
+    }), Pe = P(() => {
+      if (!(n.showArrow && typeof n.showArrow != "boolean"))
+        return ee([`${H.value}-icon-arrow`]);
+    }), Ee = P(() => {
+      var t;
+      return n.showArrow && typeof n.showArrow != "boolean" ? void 0 : {
+        color: (t = n.style) == null ? void 0 : t.backgroundColor,
+        fill: "currentColor"
+      };
+    }), j = {
+      getProps: () => n,
+      getProp: (e) => n[e],
+      getState: (e) => ({
+        visible: O.value,
+        isInsert: R.value,
+        placement: T.value
+      })[e],
+      getStates: () => ({
+        visible: O.value,
+        isInsert: R.value,
+        placement: T.value
+      }),
+      setState: () => {
+      },
+      getContext: () => null,
+      getContexts: () => ({}),
+      getCache: () => null,
+      setCache: () => {
+      },
+      getCaches: () => ({}),
+      stopPropagation: (e) => {
+        var t;
+        return (t = e == null ? void 0 : e.stopPropagation) == null ? void 0 : t.call(e);
+      },
+      persistEvent: () => {
+      },
+      notifyVisibleChange: (e) => {
+        N("update:visible", e), N("visibleChange", e);
+      },
+      notifyEscKeydown: (e) => {
+        N("escKeyDown", e);
+      },
+      insertPortal: (e, { position: t, ...o }) => {
+        R.value = !0, x.value = "enter", y.value = { ...y.value, ...o }, T.value = t, X = Date.now();
+        const r = n.trigger === "hover" ? 100 : 0;
+        setTimeout(() => {
+          j.on("portalInserted", null);
+        }, r);
+      },
+      removePortal: () => {
+        R.value = !1, b.value = !1;
+      },
+      setDisplayNone: (e, t) => {
+        U.value = e, I(() => t == null ? void 0 : t());
+      },
+      getEventName: () => ({
+        mouseEnter: "onMouseEnter",
+        mouseLeave: "onMouseLeave",
+        mouseOut: "onMouseOut",
+        mouseOver: "onMouseOver",
+        click: "onClick",
+        focus: "onFocus",
+        blur: "onBlur",
+        keydown: "onKeyDown",
+        contextMenu: "onContextMenu"
+      }),
+      registerTriggerEvent: (e) => {
+        l.setState({ triggerEventSet: e }), I(() => {
+          c.value && (L.forEach((t, o) => {
+            t.forEach((r) => {
+              var i;
+              (i = c.value) == null || i.removeEventListener(o, r);
+            });
+          }), L.clear(), Object.keys(e).forEach((t) => {
+            var i, s;
+            const o = t.replace("on", "").toLowerCase(), r = e[t];
+            (i = c.value) == null || i.addEventListener(o, r), L.has(o) || L.set(o, []), (s = L.get(o)) == null || s.push(r);
+          }));
+        });
+      },
+      registerPortalEvent: () => {
+      },
+      getTriggerBounding: () => {
+        if (c.value) {
+          if (window.getComputedStyle(c.value).display === "contents") {
+            const t = c.value.children[0];
+            if (t)
+              return t.getBoundingClientRect();
+          }
+          return c.value.getBoundingClientRect();
+        }
+        return new DOMRect();
+      },
+      getPopupContainerRect: () => {
+        const e = F();
+        if (e) {
+          const t = e.getBoundingClientRect();
+          return {
+            left: t.left,
+            top: t.top,
+            right: t.right,
+            bottom: t.bottom,
+            width: t.width,
+            height: t.height,
+            x: t.x,
+            y: t.y,
+            scrollLeft: e.scrollLeft,
+            scrollTop: e.scrollTop,
+            scrollHeight: e.scrollHeight,
+            scrollWidth: e.scrollWidth
+          };
+        }
+        return null;
+      },
+      containerIsBody: () => F() === document.body,
+      containerIsRelative: () => window.getComputedStyle(F()).getPropertyValue("position") === "relative",
+      containerIsRelativeOrAbsolute: () => {
+        const t = window.getComputedStyle(F()).getPropertyValue("position");
+        return ["relative", "absolute"].includes(t);
+      },
+      getWrapperBounding: () => {
+        const e = E.value;
+        return (e == null ? void 0 : e.getBoundingClientRect()) || new DOMRect();
+      },
+      getDocumentElementBounding: () => document.documentElement.getBoundingClientRect(),
+      setPosition: ({ position: e, ...t }) => {
+        y.value = { ...y.value, ...t }, T.value = e, b.value = !0, setTimeout(() => {
+          j.on("positionUpdated", null);
+        }, 0);
+      },
+      updatePlacementAttr: (e) => {
+        T.value = e;
+      },
+      /**
+       * 切换 Portal 的可见性
+       * 处理 hover 触发时的防抖和边界情况检查
+       */
+      togglePortalVisible: (e, t) => {
+        var o;
+        if (!(!e && n.trigger === "hover" && !b.value && O.value)) {
+          if (!e && n.trigger === "hover") {
+            const r = c.value;
+            if (r) {
+              const i = Date.now() - X, s = (o = r.matches) == null ? void 0 : o.call(r, ":hover");
+              if (i < 300 || s)
+                return;
+              if (h) {
+                const a = E.value, d = c.value;
+                if (a) {
+                  const u = a.getBoundingClientRect(), v = 10;
+                  if (h.x >= u.left - v && h.x <= u.right + v && h.y >= u.top - v && h.y <= u.bottom + v)
+                    return;
+                }
+                const m = document.elementFromPoint(
+                  h.x,
+                  h.y
+                );
+                if (m && (a && a.contains(m) || d && d.contains(m) && s))
+                  return;
+              }
+            }
+          }
+          x.value = e ? "enter" : "leave", O.value = e, !e && !n.motion ? I(() => {
+            var r;
+            n.keepDOM ? l.setDisplayNone(!0) : l.removePortal(), l.unBindEvent(), (r = n.afterClose) == null || r.call(n), t == null || t();
+          }) : I(() => {
+            t == null || t();
+          });
+        }
+      },
+      registerClickOutsideHandler: (e) => {
+        C && (C(), C = null);
+        const t = (o) => {
+          var ue;
+          if (!M.value) return;
+          const r = c.value, i = E.value, s = o.target;
+          if (!i || !R.value || Date.now() - X < 150) return;
+          const a = ((ue = o.composedPath) == null ? void 0 : ue.call(o)) || [s], d = r && (r.contains(s) || a.includes(r));
+          if (d && !n.clickTriggerToHide) return;
+          const m = n.clickTriggerToHide && d, u = document.querySelectorAll('[class*="semi-tooltip-portal-inner"]');
+          let v = !1;
+          for (const S of u)
+            if (S.contains(s) || a.includes(S)) {
+              v = !0;
+              break;
+            }
+          const f = (() => {
+            if (s.getAttribute("aria-haspopup") === "true" || s.classList.contains("semi-dropdown-item") && s.querySelector('[aria-haspopup="true"]'))
+              return !0;
+            let S = s.parentElement;
+            for (; S; ) {
+              if (S.getAttribute("aria-haspopup") === "true" || S.classList.contains("semi-dropdown-item") && S.querySelector('[aria-haspopup="true"]'))
+                return !0;
+              S = S.parentElement;
+            }
+            return !1;
+          })();
+          (r && !r.contains(s) && i && !i.contains(s) && !(a.includes(i) || a.includes(r)) && !v && !f || m) && (N("clickOutside", o), e());
+        };
+        return window.addEventListener("mousedown", t), C = () => {
+          window.removeEventListener("mousedown", t), C = null;
+        }, C;
+      },
+      unregisterClickOutsideHandler: () => {
+        C && (C(), C = null);
+      },
+      registerResizeHandler: (e) => {
+        const t = () => M.value && e();
+        return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+      },
+      unregisterResizeHandler: () => {
+      },
+      registerScrollHandler: (e) => {
+        const t = (o) => {
+          if (!M.value) return;
+          const r = c.value, i = o.target;
+          i.contains(r) && e({ x: i.scrollLeft, y: i.scrollTop });
+        };
+        return window.addEventListener("scroll", t, !0), () => window.removeEventListener("scroll", t, !0);
+      },
+      unregisterScrollHandler: () => {
+      },
+      canMotion: () => !!n.motion,
+      updateContainerPosition: () => {
+      },
+      getContainerPosition: () => window.getComputedStyle(F()).getPropertyValue("position"),
+      getContainer: () => _.value,
+      getTriggerNode: () => c.value,
+      getTriggerDOM: () => {
+        var t, o;
+        const e = c.value;
+        if (e && n.trigger === "hover") {
+          const r = Date.now() - X, i = (t = e.matches) == null ? void 0 : t.call(e, ":hover"), s = E.value, p = (o = s == null ? void 0 : s.matches) == null ? void 0 : o.call(s, ":hover"), a = r < 300;
+          let d = !1, m = !1;
+          if (h)
+            try {
+              const u = document.elementFromPoint(
+                h.x,
+                h.y
+              );
+              if (u) {
+                const v = document.querySelectorAll('[class*="semi-tooltip-portal-inner"]');
+                for (const f of v)
+                  if (f.contains(u)) {
+                    d = !0;
+                    break;
+                  }
+                if (!d)
+                  if (e && (e.contains(u) || u === e))
+                    i && (m = !0);
+                  else {
+                    let f = u.parentElement;
+                    for (; f; ) {
+                      if (e && (e.contains(f) || f === e)) {
+                        i && (m = !0);
+                        break;
+                      }
+                      f = f.parentElement;
+                    }
+                  }
+              }
+            } catch {
+            }
+          if (a || p || i || d || m) {
+            const u = Object.create(Object.getPrototypeOf(e));
+            return Object.assign(u, e), u.matches = function(v) {
+              var f;
+              return v === ":hover" ? !0 : ((f = e == null ? void 0 : e.matches) == null ? void 0 : f.call(e, v || "")) || !1;
+            }, u;
+          }
+        }
+        return e;
+      },
+      getFocusableElements: () => [],
+      getActiveElement: () => document.activeElement,
+      setInitialFocus: () => {
+        const e = () => {
+          var p, a, d, m, u, v, f;
+          const t = oe;
+          if (!t)
+            return !1;
+          if (t instanceof HTMLElement && typeof t.focus == "function")
+            return t.focus({ preventScroll: n.preventScroll }), !0;
+          if (typeof t.focus == "function")
+            return t.focus({ preventScroll: n.preventScroll }), !0;
+          const o = (a = (p = t == null ? void 0 : t.$) == null ? void 0 : p.exposed) == null ? void 0 : a.focus;
+          if (typeof o == "function")
+            return o({ preventScroll: n.preventScroll }), !0;
+          const r = ((d = t == null ? void 0 : t.inputRef) == null ? void 0 : d.value) || ((v = (u = (m = t == null ? void 0 : t.$) == null ? void 0 : m.exposed) == null ? void 0 : u.inputRef) == null ? void 0 : v.value);
+          if (r && typeof r.focus == "function")
+            return r.focus({ preventScroll: n.preventScroll }), !0;
+          const i = (t == null ? void 0 : t.$el) || null, s = (f = i == null ? void 0 : i.querySelector) == null ? void 0 : f.call(i, 'input,textarea,[tabindex]:not([tabindex="-1"])');
+          return s && typeof s.focus == "function" ? (s.focus({ preventScroll: n.preventScroll }), !0) : !1;
+        };
+        e() || I(() => {
+          e() || requestAnimationFrame(() => {
+            e() || setTimeout(() => {
+              e() || setTimeout(() => {
+                e();
+              }, 120);
+            }, 0);
+          });
+        });
+      },
+      on: (e, t) => {
+        var o;
+        if (e)
+          if (t)
+            B.has(e) || B.set(e, []), (o = B.get(e)) == null || o.push(t);
+          else {
+            const r = B.get(e);
+            r && [...r].forEach((i) => {
+              i();
+            });
+          }
+      },
+      off: (e, t) => {
+        if (e)
+          if (t) {
+            const o = B.get(e);
+            if (o) {
+              const r = o.indexOf(t);
+              r > -1 && o.splice(r, 1);
+            }
+          } else
+            B.delete(e);
+      },
+      setId: () => {
+        z.value = _e();
+      },
+      getAnimatingState: () => Y.value
+    }, l = new We(j);
+    ne.value = l;
+    const K = (e) => (t) => {
+      n.stopPropagation && t.stopPropagation(), e == null || e(t);
+    }, re = K(() => {
+      n.clickToHide && l.hide();
+    }), ie = K(), le = K(), se = K(), Te = (e) => {
+      l.handleContainerKeydown(e);
+    }, Ie = (e) => {
+      if (n.trigger !== "custom") {
+        const t = Date.now();
+        if (q > 0 && t - q < 100)
+          return;
+        const o = E.value, r = c.value;
+        if (e != null && e.relatedTarget) {
+          const i = e.relatedTarget, s = o == null ? void 0 : o.contains(i), p = r == null ? void 0 : r.contains(i);
+          if (s || p) {
+            l.clearDelayTimer();
+            return;
+          }
+          if (e && o) {
+            const a = o.getBoundingClientRect(), d = 10;
+            if (e.clientX >= a.left - d && e.clientX <= a.right + d && e.clientY >= a.top - d && e.clientY <= a.bottom + d) {
+              l.clearDelayTimer();
+              return;
+            }
+          }
+          return;
+        }
+        if (e && o) {
+          const i = o.getBoundingClientRect(), s = 10;
+          if (e.clientX >= i.left - s && e.clientX <= i.right + s && e.clientY >= i.top - s && e.clientY <= i.bottom + s) {
+            l.clearDelayTimer();
+            return;
+          }
+        }
+        l.clearDelayTimer();
+      }
+    }, ae = (e) => {
+      h = { x: e.clientX, y: e.clientY };
+    }, Re = (e) => {
+      if (n.trigger !== "custom") {
+        if (e != null && e.relatedTarget) {
+          const t = e.relatedTarget, o = E.value, r = c.value, i = o == null ? void 0 : o.contains(t), s = r == null ? void 0 : r.contains(t);
+          if (i)
+            return;
+          if (s && e && o) {
+            const p = o.getBoundingClientRect(), a = 10;
+            if (e.clientX >= p.left - a && e.clientX <= p.right + a && e.clientY >= p.top - a && e.clientY <= p.bottom + a)
+              return;
+          }
+        }
+        q = Date.now(), l.delayHide();
+      }
+    }, Me = () => {
+    }, Be = () => {
+      Y.value = !0;
+    }, De = () => {
+      var e;
+      x.value === "leave" && (n.keepDOM ? l.setDisplayNone(!0) : l.removePortal(), l.unBindEvent(), (e = n.afterClose) == null || e.call(n)), Y.value = !1;
+    }, G = () => l == null ? void 0 : l.calcPosition();
+    return fe({
+      rePosition: G,
+      focusTrigger: () => l == null ? void 0 : l.focusTrigger(),
+      getPopupId: () => z.value
+    }), ne.value = l, xe(() => {
+      M.value = !0, document.addEventListener("mousemove", ae), I(() => {
+        l.init(), n.visible !== void 0 && n.visible && (["hover", "focus"].includes(n.trigger) ? l.delayShow() : l.show()), setTimeout(() => {
+          if (c.value)
+            try {
+              l.updateStateIfCursorOnTrigger(c.value);
+            } catch {
+            }
+        }, 10);
+      });
+    }), be(() => {
+      M.value = !1, l && l.destroy(), document.removeEventListener("mousemove", ae);
+    }), ce(
+      () => n.visible,
+      (e, t) => {
+        !l || !M.value || e === t || (e !== void 0 ? ["hover", "focus"].includes(n.trigger) ? e ? l.delayShow() : l.delayHide() : e ? l.show() : l.hide() : t !== void 0 && (["hover", "focus"].includes(n.trigger) ? l.delayHide() : l.hide()));
+      }
+    ), ce(
+      () => n.rePosKey,
+      (e, t) => {
+        e !== t && l && I(() => {
+          const o = () => {
+            const r = E.value, i = _.value;
+            if (r) {
+              const s = r.getBoundingClientRect().width;
+              if (((i == null ? void 0 : i.getBoundingClientRect().width) || 0) < 10 && s < 10) {
+                setTimeout(o, 50);
+                return;
+              }
+              G();
+            } else
+              setTimeout(() => G(), 100);
+          };
+          setTimeout(o, 50);
+        });
+      }
+    ), (e, t) => (D(), V(de, null, [
+      Z("span", {
+        ref_key: "triggerWrapperRef",
+        ref: c,
+        class: $(ye.value),
+        style: { display: "contents" }
+      }, [
+        Le(e.$slots, "default", {}, void 0, !0)
+      ], 2),
+      R.value ? (D(), J(w(Ue), {
+        key: 0,
+        "get-popup-container": n.getPopupContainer,
+        style: W({ zIndex: n.zIndex })
+      }, {
+        default: Fe(() => [
+          Z("div", {
+            ref_key: "portalInnerRef",
+            ref: E,
+            class: $(`${w(Ke)}-portal-inner`),
+            style: W(we.value),
+            onClick: t[0] || (t[0] = //@ts-ignore
+            (...o) => w(re) && w(re)(...o)),
+            onMousedown: t[1] || (t[1] = //@ts-ignore
+            (...o) => w(ie) && w(ie)(...o)),
+            onFocus: t[2] || (t[2] = //@ts-ignore
+            (...o) => w(le) && w(le)(...o)),
+            onBlur: t[3] || (t[3] = //@ts-ignore
+            (...o) => w(se) && w(se)(...o)),
+            onKeydown: Te,
+            onMouseenter: Ie,
+            onMouseleave: Re,
+            onContextmenu: He(Me, ["prevent"])
+          }, [
+            U.value ? Q("", !0) : (D(), V("div", {
+              key: 0,
+              id: z.value,
+              ref_key: "containerRef",
+              ref: _,
+              class: $(he.value),
+              style: W(Ce.value),
+              role: A.role,
+              "x-placement": T.value,
+              onAnimationstart: Be,
+              onAnimationend: De
+            }, [
+              Z("div", {
+                class: $(`${H.value}-content`)
+              }, [
+                me.value ? (D(), J(w(qe), {
+                  key: 0,
+                  content: A.content,
+                  initialFocusRef: ge
+                }, null, 8, ["content"])) : (D(), V(de, { key: 1 }, [
+                  $e(Ne(A.content), 1)
+                ], 64))
+              ], 2),
+              A.showArrow ? (D(), J(Xe(Se.value), {
+                key: 0,
+                class: $(Pe.value),
+                style: W(Ee.value)
+              }, null, 8, ["class", "style"])) : Q("", !0)
+            ], 46, je))
+          ], 38)
+        ]),
+        _: 1
+      }, 8, ["get-popup-container", "style"])) : Q("", !0)
+    ], 64));
+  }
+});
+export {
+  at as default
+};
+//# sourceMappingURL=Tooltip.vue2.js.map