y-design-ssr/libs/tooltip/index.mjs

SSR component library of YUI with Vue3

import { ref as A, reactive as S, defineComponent as Q, getCurrentInstance as Z, watch as U, nextTick as M, onMounted as z, onBeforeUnmount as lt, createVNode as w, Teleport as ft, onBeforeUpdate as ht, Fragment as ct, mergeProps as D, isVNode as ut, createApp as mt, h as pt } 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) : ""),
  ""
) : "", 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: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
A("zh-CN");
S({
  "zh-CN": wt
});
const R = (t) => {
  const e = `y-${t}`;
  return [e, dt(e), gt()];
};
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,
    default: !1
  },
  // 是否只能通过 v-model 控制显隐
  manual: {
    type: Boolean,
    default: !1
  },
  text: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: ""
  },
  bgColor: {
    type: String,
    default: ""
  },
  // popper挂载的位置
  teleport: {
    type: String,
    default: "body"
  },
  width: {
    type: [Number, String],
    default: ""
  },
  minWidth: {
    type: [Number, String],
    default: ""
  },
  popperClass: {
    type: String,
    default: ""
  },
  popperStyle: {
    type: Object,
    default: {}
  },
  // 自动查找最佳位置
  autoFlipping: {
    type: Boolean,
    default: !0
  },
  // 展示位置
  position: {
    type: String,
    default: tt.Top
  },
  marginToEdge: {
    type: Number,
    default: 8
  }
}, [xt, _] = R("popper"), $ = 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, l = 0;
  const u = window.pageXOffset + a, x = window.pageXOffset + window.innerWidth - a;
  switch (o) {
    case "top":
      l = 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, u), x - e);
      break;
    case "bottom":
      l = 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, u), x - e);
      break;
    case "left":
      i = Math.min(Math.max(t.left - e - $, u), x), n === "start" ? l = t.top : n === "end" ? l = t.bottom - s : l = t.top + t.height / 2 - s / 2;
      break;
    case "right":
      i = t.right, n === "start" ? l = t.top : n === "end" ? l = t.bottom - s : l = t.top + t.height / 2 - s / 2;
      break;
    default:
      l = 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, u), x - e);
      break;
  }
  return {
    x: i,
    y: l
  };
}, 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 l = {
    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(l, e.width, o, 12)), i = o ? `top-${o}` : "top";
      break;
    case "bottom":
      Object.assign(a, {
        top: "0px"
      }), Object.assign(a, H(l, e.width, o, 12)), i = o ? `bottom-${o}` : "bottom";
      break;
    case "left":
      Object.assign(a, {
        right: "0px"
      }), Object.assign(a, G(l, e.height, o, 12)), i = o ? `left-${o}` : "left";
      break;
    case "right":
      Object.assign(a, {
        left: "0px"
      }), Object.assign(a, G(l, e.height, o, 12)), i = o ? `right-${o}` : "right";
      break;
    default:
      Object.assign(a, {
        top: "0px"
      }), Object.assign(a, H(l, e.width, o || "center", 12)), i = "bottom";
      break;
  }
  return {
    arrowPositionInfo: a,
    arrowClassName: i
  };
};
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 - $ - n);
    case "right":
      return Math.max(0, a - t.right - $);
    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 - $ - n);
    case "bottom":
      return Math.max(0, a - t.bottom - $);
    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, l = i - n, u = a - i;
      return Math.max(0, Math.min(l, u) * 2);
    }
    default:
      return Math.max(0, a - n);
  }
}
const V = /* @__PURE__ */ Q({
  name: xt,
  props: {
    ...ot,
    reference: {
      type: Object,
      default: null
    }
  },
  setup(t, {
    slots: e
  }) {
    const s = Z(), o = A(t.modelValue), n = S({
      position: "",
      align: "",
      maxWidth: 0,
      maxHeight: 0
    }), a = S({
      position: {},
      className: ""
    }), i = S({
      top: 0,
      left: 0
    }), {
      marginToEdge: l
    } = t, u = () => {
      var f;
      return ((f = s == null ? void 0 : s.proxy) == null ? void 0 : f.$refs.popper).getBoundingClientRect();
    }, x = ({
      referenceRect: r,
      position: h,
      align: f,
      tipWidth: m,
      tipHeight: b,
      autoFlipping: E
    }) => {
      let p = "", c = 0, d = 0;
      if (E) {
        const P = Mt(h);
        for (const g of P)
          if (c = q(r, g, f, l), d = J(r, g, f, l), m <= c && b <= d) {
            p = g;
            break;
          }
      }
      return p || (c = q(r, h, f, l), d = J(r, h, f, l)), {
        bestPosition: p,
        maxWidth: c,
        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 f = bt(r), m = u(), b = m.width, E = m.height, {
        position: p,
        align: c
      } = n, d = et(h), {
        offsetLeft: P,
        offsetTop: g
      } = nt(d), {
        bestPosition: y,
        maxWidth: W,
        maxHeight: X
      } = x({
        referenceRect: f,
        position: p,
        align: c,
        tipWidth: b,
        tipHeight: E,
        autoFlipping: t.autoFlipping
      });
      y || (n.maxWidth = W, n.maxHeight = X), y && y !== p && (n.position = y), M(() => {
        const {
          width: v,
          height: Y
        } = u(), k = y || p, O = $t({
          referenceRect: f,
          rectWidth: v,
          rectHeight: Y,
          preferredPosition: k,
          align: c,
          marginToEdge: t.marginToEdge,
          paddingToTarget: $
        });
        i.left = O.x - P, i.top = O.y - g, n.position = k, n.maxWidth = W, n.maxHeight = X;
        const at = {
          x: O.x,
          y: O.y,
          width: v,
          height: Y
        }, {
          arrowPositionInfo: it,
          arrowClassName: rt
        } = Pt(f, at, k, c);
        a.position = it, a.className = rt;
      }).catch((v) => {
        throw new Error(v);
      });
    }, I = (r) => {
      var m;
      const h = (m = s == null ? void 0 : s.proxy) == null ? void 0 : m.$refs.popper, f = t.reference;
      f && h && !f.contains(r.target) && !h.contains(r.target) && (o.value = !1, C());
    }, T = () => {
      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 = () => {
      t.manual && (o.value = t.modelValue), t.modelValue || o.value ? M(st).catch((r) => {
        throw new Error(r);
      }) : (i.left = 0, i.top = 0);
    };
    return U(() => t.position, () => {
      j(), M(() => {
        B();
      }).catch((r) => {
        throw new Error(r);
      });
    }), U([() => o.value, () => t.modelValue, () => t.reference], () => {
      j(), M(() => {
        B();
      }).catch((r) => {
        throw new Error(r);
      });
    }), z(() => {
      var r;
      j(), M(() => B()).catch((h) => {
        throw new Error(h);
      }), t.manual || ((r = t.reference) == null || r.addEventListener("click", T), document.addEventListener("touchstart", I));
    }), lt(() => {
      var r;
      t.manual || ((r = t.reference) == null || r.removeEventListener("click", T), document.removeEventListener("touchstart", I));
    }), () => {
      const {
        left: r,
        top: h
      } = i, {
        width: f,
        color: m,
        bgColor: b,
        modelValue: E,
        minWidth: p,
        popperClass: c,
        popperStyle: d,
        text: P
      } = t;
      return w(ft, {
        to: t.teleport
      }, {
        default: () => {
          var g;
          return [w("div", {
            class: [_({
              [n.position]: n.position
            }), c],
            ref: "popper",
            style: {
              ...d,
              left: `${r}px`,
              top: `${h}px`,
              visibility: E || o.value ? "visible" : "hidden"
            }
          }, [w("div", {
            class: _("content"),
            style: {
              color: m,
              width: f ? L(f) : "auto",
              maxWidth: n.maxWidth ? L(n.maxWidth) : "",
              maxHeight: n.maxHeight ? L(n.maxHeight) : "",
              minWidth: L(p),
              backgroundColor: b
            }
          }, [((g = e.default) == null ? void 0 : g.call(e)) || P]), w("div", {
            class: _("arrow", [a.className]),
            style: {
              color: b,
              ...a.position
            }
          }, null)])];
        }
      });
    };
  }
});
function vt(t) {
  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !ut(t);
}
const [Ot] = R("tooltip"), Lt = /* @__PURE__ */ Q({
  name: Ot,
  props: ot,
  setup(t, {
    slots: e
  }) {
    const s = Z(), o = A(), 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 z(() => {
      o.value = n();
    }), ht(() => {
      M(() => {
        o.value = n();
      }).catch((a) => {
        throw Error(a);
      });
    }), () => {
      var i;
      let a;
      return w(ct, null, [(i = e.default) == null ? void 0 : i.call(e)[0], o.value && (e.popper ? w(V, D(t, {
        reference: o.value
      }), vt(a = e.popper()) ? a : {
        default: () => [a]
      }) : w(V, D(t, {
        reference: o.value
      }), null))]);
    };
  }
}), 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);
  }
}, St = {
  getSSRProps: (t) => ({ ...t }),
  // 指令是具有一组生命周期的钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  // 在绑定元素的父组件挂载之前调用
  mounted: (t, e) => {
    const o = mt({
      render: () => pt(V, { ...e.value, reference: t })
    }), n = document.createElement("div");
    t.instance = o.mount(n), e.value && K(t, e);
  },
  updated: (t, e) => {
    e.oldValue !== e.value && K(t, e);
  },
  unmounted: (t) => {
    t.instance && t.instance.$el.remove();
  }
};
function Nt(t) {
  const e = t;
  return e.install = (s) => {
    const { name: o } = t;
    o && s.component(o, t);
  }, e;
}
const Bt = Nt(Lt);
export {
  Bt as default,
  St as directive,
  jt as tooltipDirective
};