y-design-ssr 1.1.12 → 1.1.14

package/libs/tooltip/index.mjs

@@ -1,11 +1,11 @@
-import { ref as N, reactive as x, defineComponent as k, getCurrentInstance as H, watch as V, onMounted as T, onBeforeUnmount as X, createVNode as y, Teleport as Y, withDirectives as G, vShow as q, nextTick as A, onBeforeUpdate as J, Fragment as K, mergeProps as P, isVNode as Q, createApp as Z, h as ee } from "vue";
-const $ = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((r, n) => r + $(e, n), "") : Object.keys(t).reduce(
-  (r, n) => r + (t[n] ? $(e, n) : ""),
+import { ref as V, reactive as S, defineComponent as Q, getCurrentInstance as Z, watch as U, nextTick as y, onMounted as z, onBeforeUnmount as ft, createVNode as w, Teleport as lt, onBeforeUpdate as ht, Fragment as pt, mergeProps as D, isVNode as ct, createApp as ut, h as mt } from "vue";
+const N = (t, e) => e ? typeof e == "string" ? ` ${t}--${e}` : Array.isArray(e) ? e.reduce((s, o) => s + N(t, o), "") : Object.keys(e).reduce(
+  (s, o) => s + (e[o] ? N(t, o) : ""),
   ""
-) : "", te = (e) => (t, r) => {
-  let n = t, o = r;
-  return n && typeof n != "string" && (o = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${$(n, o)}`;
-}, ne = () => (e, t) => t ? `${$(`y-${e}`, t)}` : `y-${e}`, re = {
+) : "", dt = (t) => (e, s) => {
+  let o = e, n = s;
+  return o && typeof o != "string" && (n = o, o = ""), o = o ? `${t}__${o}` : t, `${o}${N(o, n)}`;
+}, gt = () => (t, e) => e ? `${N(`y-${t}`, e)}` : `y-${t}`, wt = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -17,16 +17,16 @@ const $ = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t)
     validateMessage: "请输入正确内容"
   }
 };
-N("zh-CN");
-x({
-  "zh-CN": re
+V("zh-CN");
+S({
+  "zh-CN": wt
 });
-const I = (e) => {
-  const t = `y-${e}`;
-  return [t, te(t), ne()];
+const R = (t) => {
+  const e = `y-${t}`;
+  return [e, dt(e), gt()];
 };
-var M = /* @__PURE__ */ ((e) => (e.Top = "top", e.TopStart = "top-start", e.TopEnd = "top-end", e.Right = "right", e.RightStart = "right-start", e.RightEnd = "right-end", e.Left = "left", e.LeftStart = "left-start", e.LeftEnd = "left-end", e.Bottom = "bottom", e.BottomStart = "bottom-start", e.BottomEnd = "bottom-end", e))(M || {});
-const W = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, R = {
+var tt = /* @__PURE__ */ ((t) => (t.Top = "top", t.TopStart = "top-start", t.TopEnd = "top-end", t.Right = "right", t.RightStart = "right-start", t.RightEnd = "right-end", t.Left = "left", t.LeftStart = "left-start", t.LeftEnd = "left-end", t.Bottom = "bottom", t.BottomStart = "bottom-start", t.BottomEnd = "bottom-end", t))(tt || {});
+const L = (t) => isNaN(Number(t)) && typeof t == "string" ? t : `${t}px`, ot = {
   // 是否显示
   modelValue: {
     type: Boolean,
@@ -70,7 +70,7 @@ const W = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, R = {
     type: Object,
     default: {}
   },
-  // 当tooltip显示超出视窗时会自动在另一侧渲染
+  // 自动查找最佳位置
   autoFlipping: {
     type: Boolean,
     default: !0
@@ -78,208 +78,432 @@ const W = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, R = {
   // 展示位置
   position: {
     type: String,
-    default: M.Top
+    default: tt.Top
+  },
+  marginToEdge: {
+    type: Number,
+    default: 8
+  }
+}, [xt, _] = R("popper"), M = 12, et = (t) => t.parentElement ? getComputedStyle(t.parentElement).position !== "static" ? t.parentElement : et(t.parentElement) : t, nt = (t, e, s) => {
+  let o = e || t.offsetTop, n = s || t.offsetLeft;
+  return t.parentElement ? (getComputedStyle(t.parentElement).position !== "static" && (o += t.parentElement.offsetTop, n += t.parentElement.offsetLeft), nt(t.parentElement, o, n)) : {
+    offsetLeft: n,
+    offsetTop: o
+  };
+}, bt = (t) => {
+  const e = t.getBoundingClientRect();
+  return {
+    top: e.top + window.pageYOffset,
+    left: e.left + window.pageXOffset,
+    width: e.width,
+    height: e.height,
+    bottom: e.bottom + window.pageYOffset,
+    right: e.right + window.pageXOffset
+  };
+}, yt = (t) => {
+  switch (t) {
+    case "top":
+      return "bottom";
+    case "bottom":
+      return "top";
+    case "left":
+      return "right";
+    case "right":
+      return "left";
+    default:
+      return "bottom";
+  }
+}, Mt = (t) => [t, yt(t), "top", "bottom", "left", "right"].filter((s, o, n) => n.indexOf(s) === o), $t = ({
+  referenceRect: t,
+  rectWidth: e,
+  rectHeight: s,
+  preferredPosition: o,
+  align: n,
+  marginToEdge: a
+}) => ({
+  ...Et(t, e, s, o, n, a)
+}), Et = (t, e, s, o, n, a) => {
+  let i = 0, f = 0;
+  const m = window.pageXOffset + a, $ = window.pageXOffset + window.innerWidth - a;
+  switch (o) {
+    case "top":
+      f = t.top - s, n === "start" ? i = t.left : n === "end" ? i = t.right - e : i = Math.min(Math.max(t.left + t.width / 2 - e / 2, m), $);
+      break;
+    case "bottom":
+      f = t.bottom, n === "start" ? i = t.left : n === "end" ? i = t.right - e : i = Math.min(Math.max(t.left + t.width / 2 - e / 2, m), $);
+      break;
+    case "left":
+      i = Math.min(Math.max(t.left - e - M, m), $), n === "start" ? f = t.top : n === "end" ? f = t.bottom - s : f = t.top + t.height / 2 - s / 2;
+      break;
+    case "right":
+      i = t.right, n === "start" ? f = t.top : n === "end" ? f = t.bottom - s : f = t.top + t.height / 2 - s / 2;
+      break;
+    default:
+      f = t.bottom, n === "start" ? i = t.left : n === "end" ? i = t.right - e : i = t.left + t.width / 2 - e / 2;
+      break;
+  }
+  return {
+    x: i,
+    y: f
+  };
+}, H = (t, e, s, o) => {
+  if (s === "start")
+    return {
+      left: `${Math.max(o, Math.min(t.left + o, t.left + t.width - o))}px`
+    };
+  if (s === "end")
+    return {
+      right: `${Math.max(o, Math.min(e - t.left - t.width + o, t.width - o))}px`
+    };
+  const n = t.left + t.width / 2;
+  return {
+    left: `${Math.max(o, Math.min(n, e - o))}px`
+  };
+}, G = (t, e, s, o) => {
+  if (s === "start")
+    return {
+      top: `${Math.max(o, Math.min(t.top + o, t.top + t.height - o))}px`
+    };
+  if (s === "end")
+    return {
+      bottom: `${Math.max(o, Math.min(e - t.top - t.height + o, t.height - o))}px`
+    };
+  const n = t.top + t.height / 2;
+  return {
+    top: `${Math.max(o, Math.min(n, e - o))}px`
+  };
+}, Pt = (t, e, s, o) => {
+  const a = {};
+  let i = "";
+  const f = {
+    left: t.left - e.x,
+    top: t.top - e.y,
+    width: t.width,
+    height: t.height
+  };
+  switch (s) {
+    case "top":
+      Object.assign(a, {
+        bottom: "0px"
+      }), Object.assign(a, H(f, e.width, o, 12)), i = o ? `top-${o}` : "top";
+      break;
+    case "bottom":
+      Object.assign(a, {
+        top: "0px"
+      }), Object.assign(a, H(f, e.width, o, 12)), i = o ? `bottom-${o}` : "bottom";
+      break;
+    case "left":
+      Object.assign(a, {
+        right: "0px"
+      }), Object.assign(a, G(f, e.height, o, 12)), i = o ? `left-${o}` : "left";
+      break;
+    case "right":
+      Object.assign(a, {
+        left: "0px"
+      }), Object.assign(a, G(f, e.height, o, 12)), i = o ? `right-${o}` : "right";
+      break;
+    default:
+      Object.assign(a, {
+        top: "0px"
+      }), Object.assign(a, H(f, e.width, o || "center", 12)), i = "bottom";
+      break;
   }
-}, [oe, b] = I("popper"), F = (e) => e.parentElement ? getComputedStyle(e.parentElement).position !== "static" ? e.parentElement : F(e.parentElement) : e, L = (e, t, r) => {
-  let n = t || e.offsetTop, o = r || e.offsetLeft;
-  return e.parentElement ? (getComputedStyle(e.parentElement).position !== "static" && (n += e.parentElement.offsetTop, o += e.parentElement.offsetLeft), L(e.parentElement, n, o)) : {
-    offsetLeft: o,
-    offsetTop: n
+  return {
+    arrowPositionInfo: a,
+    arrowClassName: i
   };
-}, C = /* @__PURE__ */ k({
-  name: oe,
+};
+function q(t, e, s, o) {
+  const n = window.pageXOffset + o, a = window.pageXOffset + window.innerWidth - o;
+  switch (e) {
+    case "top":
+    case "bottom":
+      return s === "start" ? Math.max(0, a - t.left) : s === "end" ? Math.max(0, t.right - n) : Math.max(0, a - n);
+    case "left":
+      return Math.max(0, t.left - M - n);
+    case "right":
+      return Math.max(0, a - t.right - M);
+    default:
+      return Math.max(0, a - n);
+  }
+}
+function J(t, e, s, o) {
+  const n = window.pageYOffset + o, a = window.pageYOffset + window.innerHeight - o;
+  switch (e) {
+    case "top":
+      return Math.max(0, t.top - M - n);
+    case "bottom":
+      return Math.max(0, a - t.bottom - M);
+    case "left":
+    case "right": {
+      if (s === "start")
+        return Math.max(0, a - t.top);
+      if (s === "end")
+        return Math.max(0, t.bottom - n);
+      const i = t.top + t.height / 2, f = i - n, m = a - i;
+      return Math.max(0, Math.min(f, m) * 2);
+    }
+    default:
+      return Math.max(0, a - n);
+  }
+}
+const W = /* @__PURE__ */ Q({
+  name: xt,
   props: {
-    ...R,
+    ...ot,
     reference: {
       type: Object,
       default: null
     }
   },
-  setup(e, {
-    slots: t
+  setup(t, {
+    slots: e
   }) {
-    const r = H(), n = N(e.modelValue), o = x({
-      placement: "",
-      align: ""
-    }), c = x({
+    const s = Z(), o = V(t.modelValue), n = S({
+      position: "",
+      align: "",
+      maxWidth: 0,
+      maxHeight: 0
+    }), a = S({
+      position: {},
+      className: ""
+    }), i = S({
       top: 0,
       left: 0
-    }), m = () => {
-      var O;
-      const a = e.reference, f = (O = r == null ? void 0 : r.proxy) == null ? void 0 : O.$refs.popper;
-      if (!a || !f)
-        return;
-      const {
-        offsetWidth: p,
-        offsetHeight: i
-      } = a, {
-        offsetTop: s,
-        offsetLeft: u
-      } = L(a), {
-        offsetWidth: d,
-        offsetHeight: g
-      } = f, {
-        placement: h,
-        align: v
-      } = o, {
-        offsetLeft: E,
-        offsetTop: U
-      } = L(F(f)), l = {
-        x: 0,
-        y: 0,
-        newPlacement: h
-      };
-      e.autoFlipping && (h === "left" && u - d < pageXOffset ? l.newPlacement = "right" : h === "right" && u + p + d > pageXOffset + innerWidth ? l.newPlacement = "left" : h === "top" && s - g < pageYOffset ? l.newPlacement = "bottom" : h === "bottom" && s + i + g > pageYOffset + innerHeight && (l.newPlacement = "top"));
-      const z = l.newPlacement === "top" ? -g : i, D = l.newPlacement === "left" ? -d : p;
-      switch (l.newPlacement) {
-        case "top":
-        case "bottom":
-          l.y = s + z, v === "start" ? l.x = u : v === "end" ? l.x = u + p - d : l.x = u + p / 2 - d / 2;
-          break;
-        case "left":
-        case "right":
-          l.x = u + D, v === "start" ? l.y = s : v === "end" ? l.y = s + i - g : l.y = s + i / 2 - g / 2;
-          break;
+    }), {
+      marginToEdge: f
+    } = t, m = () => {
+      var l;
+      return ((l = s == null ? void 0 : s.proxy) == null ? void 0 : l.$refs.popper).getBoundingClientRect();
+    }, $ = ({
+      referenceRect: r,
+      position: h,
+      align: l,
+      tipWidth: c,
+      tipHeight: x,
+      autoFlipping: E
+    }) => {
+      let u = "", p = 0, d = 0;
+      if (E) {
+        const P = Mt(h);
+        for (const g of P)
+          if (p = q(r, g, l, f), d = J(r, g, l, f), c <= p && x <= d) {
+            u = g;
+            break;
+          }
       }
-      c.left = l.x - E, c.top = l.y - U, o.placement = l.newPlacement;
-    }, w = (a) => {
-      var i;
-      const f = (i = r == null ? void 0 : r.proxy) == null ? void 0 : i.$refs.popper, p = e.reference;
-      p && f && !p.contains(a.target) && !f.contains(a.target) && (n.value = !1);
-    }, _ = () => {
-      n.value = !n.value;
+      return u || (p = q(r, h, l, f), d = J(r, h, l, f)), {
+        bestPosition: u,
+        maxWidth: p,
+        maxHeight: d
+      };
+    }, st = () => {
+      var F;
+      const r = t.reference, h = (F = s == null ? void 0 : s.proxy) == null ? void 0 : F.$refs.popper;
+      if (!r || !h)
+        return;
+      const l = bt(r), c = m(), x = c.width, E = c.height, {
+        position: u,
+        align: p
+      } = n, d = et(h), {
+        offsetLeft: P,
+        offsetTop: g
+      } = nt(d), {
+        bestPosition: b,
+        maxWidth: T,
+        maxHeight: X
+      } = $({
+        referenceRect: l,
+        position: u,
+        align: p,
+        tipWidth: x,
+        tipHeight: E,
+        autoFlipping: t.autoFlipping
+      });
+      b || (n.maxWidth = T, n.maxHeight = X), b && b !== u && (n.position = b), y(() => {
+        const {
+          width: v,
+          height: Y
+        } = m(), k = b || u, O = $t({
+          referenceRect: l,
+          rectWidth: v,
+          rectHeight: Y,
+          preferredPosition: k,
+          align: p,
+          marginToEdge: t.marginToEdge,
+          paddingToTarget: M
+        });
+        i.left = O.x - P, i.top = O.y - g, n.position = k, n.maxWidth = T, n.maxHeight = X;
+        const at = {
+          x: O.x,
+          y: O.y,
+          width: v,
+          height: Y
+        }, {
+          arrowPositionInfo: it,
+          arrowClassName: rt
+        } = Pt(l, at, k, p);
+        a.position = it, a.className = rt;
+      }).catch((v) => {
+        throw new Error(v);
+      });
+    }, A = (r) => {
+      var c;
+      const h = (c = s == null ? void 0 : s.proxy) == null ? void 0 : c.$refs.popper, l = t.reference;
+      l && h && !l.contains(r.target) && !h.contains(r.target) && (o.value = !1, C());
+    }, I = () => {
+      o.value = !o.value, o.value || C();
+    }, C = () => {
+      n.maxWidth = 0, n.maxHeight = 0, i.left = 0, i.top = 0;
+    }, j = () => {
+      C();
+      const [r, h] = t.position.split("-");
+      n.align = h, n.position = r;
     }, B = () => {
-      const [a, f] = e.position.split("-");
-      o.align = f, o.placement = a;
-    }, S = () => {
-      e.manual && (n.value = e.modelValue), e.modelValue || n.value ? A(m).catch((a) => {
-        throw new Error(a);
-      }) : (c.left = 0, c.top = 0);
+      t.manual && (o.value = t.modelValue), t.modelValue || o.value ? y(st).catch((r) => {
+        throw new Error(r);
+      }) : (i.left = 0, i.top = 0);
     };
-    return V(() => e.position, () => {
-      B(), S();
-    }), V([() => n.value, () => e.modelValue, () => e.reference], S), T(() => {
-      var a;
-      B(), S(), e.manual || ((a = e.reference) == null || a.addEventListener("click", _), document.addEventListener("touchstart", w), document.addEventListener("mousedown", w));
-    }), X(() => {
-      var a;
-      e.manual || ((a = e.reference) == null || a.removeEventListener("click", _), document.removeEventListener("touchstart", w), document.removeEventListener("mousedown", w));
+    return U(() => t.position, () => {
+      j(), y(() => {
+        B();
+      }).catch((r) => {
+        throw new Error(r);
+      });
+    }), U([() => o.value, () => t.modelValue, () => t.reference], () => {
+      j(), y(() => {
+        B();
+      }).catch((r) => {
+        throw new Error(r);
+      });
+    }), z(() => {
+      var r;
+      j(), y(() => B()).catch((h) => {
+        throw new Error(h);
+      }), t.manual || ((r = t.reference) == null || r.addEventListener("click", I), document.addEventListener("touchstart", A));
+    }), ft(() => {
+      var r;
+      t.manual || ((r = t.reference) == null || r.removeEventListener("click", I), document.removeEventListener("touchstart", A));
     }), () => {
       const {
-        left: a,
-        top: f
-      } = c, {
-        width: p,
-        color: i,
-        bgColor: s,
-        modelValue: u,
-        minWidth: d,
-        popperClass: g,
-        popperStyle: h,
-        text: v
-      } = e;
-      return y(Y, {
-        to: e.teleport
+        left: r,
+        top: h
+      } = i, {
+        width: l,
+        color: c,
+        bgColor: x,
+        modelValue: E,
+        minWidth: u,
+        popperClass: p,
+        popperStyle: d,
+        text: P
+      } = t;
+      return w(lt, {
+        to: t.teleport
       }, {
         default: () => {
-          var E;
-          return [G(y("div", {
-            class: [b({
-              [o.placement]: o.placement
-            }), g],
+          var g;
+          return [w("div", {
+            class: [_({
+              [n.position]: n.position
+            }), p],
             ref: "popper",
             style: {
-              ...h,
-              left: `${a}px`,
-              top: `${f}px`
+              ...d,
+              left: `${r}px`,
+              top: `${h}px`,
+              opacity: E || o.value ? 1 : 0
             }
-          }, [y("div", {
-            class: b("content"),
+          }, [w("div", {
+            class: _("content"),
             style: {
-              color: i,
-              width: W(p),
-              minWidth: W(d),
-              backgroundColor: s
+              color: c,
+              width: l ? L(l) : "auto",
+              maxWidth: n.maxWidth ? L(n.maxWidth) : "",
+              maxHeight: n.maxHeight ? L(n.maxHeight) : "",
+              minWidth: L(u),
+              backgroundColor: x
             }
-          }, [((E = t.default) == null ? void 0 : E.call(t)) || v]), y("div", {
-            class: b("arrow", [`${o.placement}${o.align ? `-${o.align}` : ""}`]),
+          }, [((g = e.default) == null ? void 0 : g.call(e)) || P]), w("div", {
+            class: _("arrow", [a.className]),
             style: {
-              color: s
+              color: x,
+              ...a.position
             }
-          }, null)]), [[q, u || n.value]])];
+          }, null)])];
         }
       });
     };
   }
 });
-function ae(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Q(e);
+function vt(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !ct(t);
 }
-const [le] = I("tooltip"), ce = /* @__PURE__ */ k({
-  name: le,
-  props: R,
-  setup(e, {
-    slots: t
+const [Ot] = R("tooltip"), Lt = /* @__PURE__ */ Q({
+  name: Ot,
+  props: ot,
+  setup(t, {
+    slots: e
   }) {
-    const r = H(), n = N(), o = () => {
-      var m;
-      const c = (m = r == null ? void 0 : r.proxy) == null ? void 0 : m.$el;
-      return c == null ? void 0 : c.nextElementSibling;
+    const s = Z(), o = V(), n = () => {
+      var i;
+      const a = (i = s == null ? void 0 : s.proxy) == null ? void 0 : i.$el;
+      return a == null ? void 0 : a.nextElementSibling;
     };
-    return T(() => {
-      n.value = o();
-    }), J(() => {
-      A(() => {
-        n.value = o();
-      }).catch((c) => {
-        throw Error(c);
+    return z(() => {
+      o.value = n();
+    }), ht(() => {
+      y(() => {
+        o.value = n();
+      }).catch((a) => {
+        throw Error(a);
       });
     }), () => {
-      var m;
-      let c;
-      return y(K, null, [(m = t.default) == null ? void 0 : m.call(t)[0], n.value && (t.popper ? y(C, P(e, {
-        reference: n.value
-      }), ae(c = t.popper()) ? c : {
-        default: () => [c]
-      }) : y(C, P(e, {
-        reference: n.value
+      var i;
+      let a;
+      return w(pt, null, [(i = e.default) == null ? void 0 : i.call(e)[0], o.value && (e.popper ? w(W, D(t, {
+        reference: o.value
+      }), vt(a = e.popper()) ? a : {
+        default: () => [a]
+      }) : w(W, D(t, {
+        reference: o.value
       }), null))]);
     };
   }
-}), j = (e, t) => {
-  t.value ? (e.classList.add("y-popper__wrap"), e.appendChild(e.instance.$el)) : (e.classList.remove("y-popper__wrap"), e.removeChild(e.instance.$el));
-}, se = {
-  install: (e) => {
-    e.directive("tooltip", fe);
+}), K = (t, e) => {
+  e.value ? (t.classList.add("y-popper__wrap"), t.appendChild(t.instance.$el)) : (t.classList.remove("y-popper__wrap"), t.removeChild(t.instance.$el));
+}, jt = {
+  install: (t) => {
+    t.directive("tooltip", St);
   }
-}, fe = {
-  getSSRProps: (e) => ({ ...e }),
+}, St = {
+  getSSRProps: (t) => ({ ...t }),
   // 指令是具有一组生命周期的钩子：
   // 在绑定元素的 attribute 或事件监听器被应用之前调用
   // 在绑定元素的父组件挂载之前调用
-  mounted: (e, t) => {
-    const n = Z({
-      render: () => ee(C, { ...t.value, reference: e })
-    }), o = document.createElement("div");
-    e.instance = n.mount(o), t.value && j(e, t);
+  mounted: (t, e) => {
+    const o = ut({
+      render: () => mt(W, { ...e.value, reference: t })
+    }), n = document.createElement("div");
+    t.instance = o.mount(n), e.value && K(t, e);
   },
-  updated: (e, t) => {
-    t.oldValue !== t.value && j(e, t);
+  updated: (t, e) => {
+    e.oldValue !== e.value && K(t, e);
   },
-  unmounted: (e) => {
-    e.instance && e.instance.$el.remove();
+  unmounted: (t) => {
+    t.instance && t.instance.$el.remove();
   }
 };
-function pe(e) {
-  const t = e;
-  return t.install = (r) => {
-    const { name: n } = e;
-    n && r.component(n, e);
-  }, t;
+function Nt(t) {
+  const e = t;
+  return e.install = (s) => {
+    const { name: o } = t;
+    o && s.component(o, t);
+  }, e;
 }
-const ue = pe(ce);
+const Bt = Nt(Lt);
 export {
-  ue as default,
-  fe as directive,
-  se as tooltipDirective
+  Bt as default,
+  St as directive,
+  jt as tooltipDirective
 };