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

SSR component library of YUI with Vue3

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) : ""),
  ""
) : "", 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 = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
N("zh-CN");
x({
  "zh-CN": re
});
const I = (e) => {
  const t = `y-${e}`;
  return [t, te(t), ne()];
};
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 = {
  // 是否显示
  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: {}
  },
  // 当tooltip显示超出视窗时会自动在另一侧渲染
  autoFlipping: {
    type: Boolean,
    default: !0
  },
  // 展示位置
  position: {
    type: String,
    default: M.Top
  }
}, [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
  };
}, C = /* @__PURE__ */ k({
  name: oe,
  props: {
    ...R,
    reference: {
      type: Object,
      default: null
    }
  },
  setup(e, {
    slots: t
  }) {
    const r = H(), n = N(e.modelValue), o = x({
      placement: "",
      align: ""
    }), c = x({
      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;
      }
      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;
    }, 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);
    };
    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));
    }), () => {
      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
      }, {
        default: () => {
          var E;
          return [G(y("div", {
            class: [b({
              [o.placement]: o.placement
            }), g],
            ref: "popper",
            style: {
              ...h,
              left: `${a}px`,
              top: `${f}px`
            }
          }, [y("div", {
            class: b("content"),
            style: {
              color: i,
              width: W(p),
              minWidth: W(d),
              backgroundColor: s
            }
          }, [((E = t.default) == null ? void 0 : E.call(t)) || v]), y("div", {
            class: b("arrow", [`${o.placement}${o.align ? `-${o.align}` : ""}`]),
            style: {
              color: s
            }
          }, null)]), [[q, u || n.value]])];
        }
      });
    };
  }
});
function ae(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Q(e);
}
const [le] = I("tooltip"), ce = /* @__PURE__ */ k({
  name: le,
  props: R,
  setup(e, {
    slots: t
  }) {
    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;
    };
    return T(() => {
      n.value = o();
    }), J(() => {
      A(() => {
        n.value = o();
      }).catch((c) => {
        throw Error(c);
      });
    }), () => {
      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
      }), 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);
  }
}, fe = {
  getSSRProps: (e) => ({ ...e }),
  // 指令是具有一组生命周期的钩子：
  // 在绑定元素的 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);
  },
  updated: (e, t) => {
    t.oldValue !== t.value && j(e, t);
  },
  unmounted: (e) => {
    e.instance && e.instance.$el.remove();
  }
};
function pe(e) {
  const t = e;
  return t.install = (r) => {
    const { name: n } = e;
    n && r.component(n, e);
  }, t;
}
const ue = pe(ce);
export {
  ue as default,
  fe as directive,
  se as tooltipDirective
};