y-design-ssr 0.2.0 → 0.2.2

package/libs/tooltip/index.mjs

@@ -1,11 +1,40 @@
-import { ref as N, reactive as P, defineComponent as j, getCurrentInstance as k, watch as W, onMounted as H, onBeforeUnmount as X, createVNode as h, Teleport as Y, withDirectives as G, vShow as R, nextTick as M, onBeforeUpdate as q, Fragment as J, mergeProps as B, isVNode as K, h as Q, render as Z } from "vue";
-const b = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((o, n) => o + b(e, n), "") : Object.keys(t).reduce(
-  (o, n) => o + (t[n] ? b(e, n) : ""),
-  ""
-) : "", ee = (e) => (t, o) => {
-  let n = t, r = o;
-  return n && typeof n != "string" && (r = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${b(n, r)}`;
-}, te = () => (e, t) => t ? `${b(`y-${e}`, t)}` : `y-${e}`, ne = {
+import { ref, reactive, defineComponent, getCurrentInstance, watch, onMounted, onBeforeUnmount, createVNode, Teleport, withDirectives, vShow, nextTick, onBeforeUpdate, Fragment, mergeProps, isVNode, h, render } from "vue";
+const getMods = (el, mods) => {
+  if (!mods) {
+    return "";
+  }
+  if (typeof mods === "string") {
+    return ` ${el}--${mods}`;
+  }
+  if (Array.isArray(mods)) {
+    return mods.reduce((acc, cur) => acc + getMods(el, cur), "");
+  }
+  return Object.keys(mods).reduce(
+    (acc, cur) => acc + (mods[cur] ? getMods(el, cur) : ""),
+    ""
+  );
+};
+const createBEM = (block) => {
+  return (el, mods) => {
+    let _el = el;
+    let _mods = mods;
+    if (_el && typeof _el !== "string") {
+      _mods = _el;
+      _el = "";
+    }
+    _el = _el ? `${block}__${_el}` : block;
+    return `${_el}${getMods(_el, _mods)}`;
+  };
+};
+const createGlobalBem = () => {
+  return (el, mods) => {
+    if (!mods) {
+      return `y-${el}`;
+    }
+    return `${getMods(`y-${el}`, mods)}`;
+  };
+};
+const defaultLang = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -17,23 +46,30 @@ const b = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t)
     validateMessage: "请输入正确内容"
   }
 };
-N("zh-CN");
-P({
-  "zh-CN": ne
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const F = (e) => {
-  const t = `y-${e}`;
-  return [t, ee(t), te()];
-}, _ = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, I = {
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
+};
+const parseUnit = (val) => {
+  if (isNaN(Number(val)) && typeof val === "string") {
+    return val;
+  }
+  return `${val}px`;
+};
+const tooltipProps = {
   // 是否显示
   modelValue: {
     type: Boolean,
-    default: !1
+    default: false
   },
   // 是否只能通过 v-model 控制显隐
   manual: {
     type: Boolean,
-    default: !1
+    default: false
   },
   text: {
     type: String,
@@ -71,7 +107,7 @@ const F = (e) => {
   // 当tooltip显示超出视窗时会自动在另一侧渲染
   autoFlipping: {
     type: Boolean,
-    default: !0
+    default: true
   },
   // 展示位置
   position: {
@@ -79,194 +115,296 @@ const F = (e) => {
     default: "top"
     /* Top */
   }
-}, [oe, S] = F("popper"), U = (e) => e.parentElement ? getComputedStyle(e.parentElement).position !== "static" ? e.parentElement : U(e.parentElement) : e, C = (e, t, o) => {
-  let n = t || e.offsetTop, r = o || e.offsetLeft;
-  return e.parentElement ? (getComputedStyle(e.parentElement).position !== "static" && (n += e.parentElement.offsetTop, r += e.parentElement.offsetLeft), C(e.parentElement, n, r)) : {
-    offsetLeft: r,
-    offsetTop: n
+};
+const [name$1, bem] = createNamespace("popper");
+const getNoStaticParent = (el) => {
+  if (!el.parentElement)
+    return el;
+  if (getComputedStyle(el.parentElement).position !== "static")
+    return el.parentElement;
+  return getNoStaticParent(el.parentElement);
+};
+const getElementToPageTop = (el, offsetTop, offsetLeft) => {
+  let top = offsetTop || el.offsetTop;
+  let left = offsetLeft || el.offsetLeft;
+  if (el.parentElement) {
+    if (getComputedStyle(el.parentElement).position !== "static") {
+      top += el.parentElement.offsetTop;
+      left += el.parentElement.offsetLeft;
+    }
+    return getElementToPageTop(el.parentElement, top, left);
+  }
+  return {
+    offsetLeft: left,
+    offsetTop: top
   };
-}, L = /* @__PURE__ */ j({
-  name: oe,
+};
+const Popper = /* @__PURE__ */ defineComponent({
+  name: name$1,
   props: {
-    ...I,
+    ...tooltipProps,
     reference: {
       type: Object,
       default: null
     }
   },
-  setup(e, {
-    slots: t
+  setup(props, {
+    slots
   }) {
-    const o = k(), n = N(e.modelValue), r = P({
+    const instance = getCurrentInstance();
+    const visible = ref(props.modelValue);
+    const positionInfo = reactive({
       placement: "",
       align: ""
-    }), i = P({
+    });
+    const offset = reactive({
       top: 0,
       left: 0
-    }), m = () => {
-      var V;
-      const l = e.reference, c = (V = o == null ? void 0 : o.proxy) == null ? void 0 : V.$refs.popper;
-      if (!l || !c)
+    });
+    const setPosition = () => {
+      var _a;
+      const $el = props.reference;
+      const $popper = (_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.$refs.popper;
+      if (!$el || !$popper)
         return;
       const {
-        offsetWidth: f,
-        offsetHeight: p
-      } = l, {
-        offsetTop: s,
-        offsetLeft: u
-      } = C(l), {
-        offsetWidth: d,
-        offsetHeight: g
-      } = c, {
-        placement: y,
-        align: v
-      } = r, {
-        offsetLeft: E,
-        offsetTop: z
-      } = C(U(c)), a = {
+        offsetWidth,
+        offsetHeight
+      } = $el;
+      const {
+        offsetTop,
+        offsetLeft
+      } = getElementToPageTop($el);
+      const {
+        offsetWidth: tipWidth,
+        offsetHeight: tipHeight
+      } = $popper;
+      const {
+        placement,
+        align
+      } = positionInfo;
+      const {
+        offsetLeft: noStaticEleLeft,
+        offsetTop: noStaticEleTop
+      } = getElementToPageTop(getNoStaticParent($popper));
+      const p = {
         x: 0,
         y: 0,
-        newPlacement: y
+        newPlacement: placement
       };
-      e.autoFlipping && (y === "left" && u - d < pageXOffset ? a.newPlacement = "right" : y === "right" && u + f + d > pageXOffset + innerWidth ? a.newPlacement = "left" : y === "top" && s - g < pageYOffset ? a.newPlacement = "bottom" : y === "bottom" && s + p + g > pageYOffset + innerHeight && (a.newPlacement = "top"));
-      const A = a.newPlacement === "top" ? -g : p, D = a.newPlacement === "left" ? -d : f;
-      switch (a.newPlacement) {
+      if (props.autoFlipping) {
+        if (placement === "left" && offsetLeft - tipWidth < pageXOffset) {
+          p.newPlacement = "right";
+        } else if (placement === "right" && offsetLeft + offsetWidth + tipWidth > pageXOffset + innerWidth) {
+          p.newPlacement = "left";
+        } else if (placement === "top" && offsetTop - tipHeight < pageYOffset) {
+          p.newPlacement = "bottom";
+        } else if (placement === "bottom" && offsetTop + offsetHeight + tipHeight > pageYOffset + innerHeight)
+          p.newPlacement = "top";
+      }
+      const realHeight = p.newPlacement === "top" ? -tipHeight : offsetHeight;
+      const realWidth = p.newPlacement === "left" ? -tipWidth : offsetWidth;
+      switch (p.newPlacement) {
         case "top":
         case "bottom":
-          a.y = s + A, v === "start" ? a.x = u : v === "end" ? a.x = u + f - d : a.x = u + f / 2 - d / 2;
+          p.y = offsetTop + realHeight;
+          if (align === "start")
+            p.x = offsetLeft;
+          else if (align === "end")
+            p.x = offsetLeft + offsetWidth - tipWidth;
+          else
+            p.x = offsetLeft + offsetWidth / 2 - tipWidth / 2;
           break;
         case "left":
         case "right":
-          a.x = u + D, v === "start" ? a.y = s : v === "end" ? a.y = s + p - g : a.y = s + p / 2 - g / 2;
+          p.x = offsetLeft + realWidth;
+          if (align === "start")
+            p.y = offsetTop;
+          else if (align === "end")
+            p.y = offsetTop + offsetHeight - tipHeight;
+          else
+            p.y = offsetTop + offsetHeight / 2 - tipHeight / 2;
           break;
       }
-      i.left = a.x - E, i.top = a.y - z, r.placement = a.newPlacement;
-    }, $ = (l) => {
-      var p;
-      const c = (p = o == null ? void 0 : o.proxy) == null ? void 0 : p.$refs.popper, f = e.reference;
-      f && c && !f.contains(l.target) && !c.contains(l.target) && (n.value = !1);
-    }, T = () => {
-      n.value = !n.value;
-    }, O = () => {
-      const [l, c] = e.position.split("-");
-      r.align = c, r.placement = l;
-    }, w = () => {
-      e.manual && (n.value = e.modelValue), e.modelValue || n.value ? M(m).catch((l) => {
-        throw new Error(l);
-      }) : (i.left = 0, i.top = 0);
+      offset.left = p.x - noStaticEleLeft;
+      offset.top = p.y - noStaticEleTop;
+      positionInfo.placement = p.newPlacement;
+    };
+    const handleHide = (e) => {
+      var _a;
+      const $popper = (_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.$refs.popper;
+      const $el = props.reference;
+      if ($el && $popper && !$el.contains(e.target) && !$popper.contains(e.target)) {
+        visible.value = false;
+      }
+    };
+    const toggle = () => {
+      visible.value = !visible.value;
+    };
+    const setPositionInfo = () => {
+      const [placement, align] = props.position.split("-");
+      positionInfo.align = align;
+      positionInfo.placement = placement;
+    };
+    const showPopper = () => {
+      if (props.manual) {
+        visible.value = props.modelValue;
+      }
+      if (props.modelValue || visible.value) {
+        nextTick(setPosition).catch((error) => {
+          throw new Error(error);
+        });
+      } else {
+        offset.left = 0;
+        offset.top = 0;
+      }
     };
-    return W(() => e.position, () => {
-      O(), w();
-    }), W([() => n.value, () => e.modelValue, () => e.reference], w), H(() => {
-      var l;
-      O(), w(), e.manual || ((l = e.reference) == null || l.addEventListener("click", T), document.addEventListener("touchstart", $), document.addEventListener("mousedown", $));
-    }), X(() => {
-      var l;
-      e.manual || ((l = e.reference) == null || l.removeEventListener("click", T), document.removeEventListener("touchstart", $), document.removeEventListener("mousedown", $));
-    }), () => {
+    watch(() => props.position, () => {
+      setPositionInfo();
+      showPopper();
+    });
+    watch([() => visible.value, () => props.modelValue, () => props.reference], showPopper);
+    onMounted(() => {
+      var _a;
+      setPositionInfo();
+      showPopper();
+      if (!props.manual) {
+        (_a = props.reference) == null ? void 0 : _a.addEventListener("click", toggle);
+        document.addEventListener("touchstart", handleHide);
+        document.addEventListener("mousedown", handleHide);
+      }
+    });
+    onBeforeUnmount(() => {
+      var _a;
+      if (!props.manual) {
+        (_a = props.reference) == null ? void 0 : _a.removeEventListener("click", toggle);
+        document.removeEventListener("touchstart", handleHide);
+        document.removeEventListener("mousedown", handleHide);
+      }
+    });
+    return () => {
       const {
-        left: l,
-        top: c
-      } = i, {
-        width: f,
-        color: p,
-        bgColor: s,
-        modelValue: u,
-        minWidth: d,
-        popperClass: g,
-        popperStyle: y,
-        text: v
-      } = e;
-      return h(Y, {
-        to: e.teleport
+        left,
+        top
+      } = offset;
+      const {
+        width,
+        color,
+        bgColor,
+        modelValue,
+        minWidth,
+        popperClass,
+        popperStyle,
+        text
+      } = props;
+      return createVNode(Teleport, {
+        "to": props.teleport
       }, {
         default: () => {
-          var E;
-          return [G(h("div", {
-            class: [S({
-              [r.placement]: r.placement
-            }), g],
-            ref: "popper",
-            style: {
-              ...y,
-              left: `${l}px`,
-              top: `${c}px`
+          var _a;
+          return [withDirectives(createVNode("div", {
+            "class": [bem({
+              [positionInfo.placement]: positionInfo.placement
+            }), popperClass],
+            "ref": "popper",
+            "style": {
+              ...popperStyle,
+              left: `${left}px`,
+              top: `${top}px`
             }
-          }, [h("div", {
-            class: S("content"),
-            style: {
-              color: p,
-              width: _(f),
-              minWidth: _(d),
-              backgroundColor: s
+          }, [createVNode("div", {
+            "class": bem("content"),
+            "style": {
+              color,
+              width: parseUnit(width),
+              minWidth: parseUnit(minWidth),
+              backgroundColor: bgColor
             }
-          }, [((E = t.default) == null ? void 0 : E.call(t)) || v]), h("div", {
-            class: S("arrow", [`${r.placement}${r.align ? `-${r.align}` : ""}`]),
-            style: {
-              color: s
+          }, [((_a = slots.default) == null ? void 0 : _a.call(slots)) || text]), createVNode("div", {
+            "class": bem("arrow", [`${positionInfo.placement}${positionInfo.align ? `-${positionInfo.align}` : ""}`]),
+            "style": {
+              color: bgColor
             }
-          }, null)]), [[R, u || n.value]])];
+          }, null)]), [[vShow, modelValue || visible.value]])];
         }
       });
     };
   }
 });
-function re(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !K(e);
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const [le] = F("tooltip"), x = /* @__PURE__ */ j({
-  name: le,
-  props: I,
-  setup(e, {
-    slots: t
+const [name] = createNamespace("tooltip");
+const Tooltip = /* @__PURE__ */ defineComponent({
+  name,
+  props: tooltipProps,
+  setup(props, {
+    slots
   }) {
-    const o = k(), n = N(), r = () => {
-      var m;
-      const i = (m = o == null ? void 0 : o.proxy) == null ? void 0 : m.$el;
-      return i == null ? void 0 : i.nextElementSibling;
+    const instance = getCurrentInstance();
+    const $dom = ref();
+    const getEl = () => {
+      var _a;
+      const $root = (_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.$el;
+      return $root == null ? void 0 : $root.nextElementSibling;
     };
-    return H(() => {
-      n.value = r();
-    }), q(() => {
-      M(() => {
-        n.value = r();
-      }).catch((i) => {
-        throw Error(i);
+    onMounted(() => {
+      $dom.value = getEl();
+    });
+    onBeforeUpdate(() => {
+      nextTick(() => {
+        $dom.value = getEl();
+      }).catch((e) => {
+        throw Error(e);
       });
-    }), () => {
-      var m;
-      let i;
-      return h(J, null, [(m = t.default) == null ? void 0 : m.call(t)[0], n.value && (t.popper ? h(L, B(e, {
-        reference: n.value
-      }), re(i = t.popper()) ? i : {
-        default: () => [i]
-      }) : h(L, B(e, {
-        reference: n.value
+    });
+    return () => {
+      var _a;
+      let _slot;
+      return createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots)[0], $dom.value && (slots.popper ? createVNode(Popper, mergeProps(props, {
+        "reference": $dom.value
+      }), _isSlot(_slot = slots.popper()) ? _slot : {
+        default: () => [_slot]
+      }) : createVNode(Popper, mergeProps(props, {
+        "reference": $dom.value
       }), null))]);
     };
   }
-}), ae = {
-  install: (e) => {
-    e.directive("tooltip", {
-      getSSRProps: (t) => ({ ...t }),
+});
+const tooltipDirective = {
+  install: (app) => {
+    app.directive("tooltip", {
+      getSSRProps: (binding) => {
+        return { ...binding };
+      },
       // 指令是具有一组生命周期的钩子：
       // 在绑定元素的 attribute 或事件监听器被应用之前调用
       // 在绑定元素的父组件挂载之前调用
-      mounted: (t, o) => {
-        const n = Q(L, { ...o.value, reference: t });
-        t.$popper = document.createElement("div"), document.body.appendChild(t.$popper), n.appContext = e._context, Z(n, t.$popper);
+      mounted: (el, binding) => {
+        const tooltipComponent = h(Popper, { ...binding.value, reference: el });
+        el.$popper = document.createElement("div");
+        document.body.appendChild(el.$popper);
+        tooltipComponent.appContext = app._context;
+        render(tooltipComponent, el.$popper);
       },
-      unmounted: (t) => {
-        t.$popper && t.$popper.remove();
+      unmounted: (el) => {
+        el.$popper && el.$popper.remove();
       }
     });
   }
 };
-x.install = (e) => {
-  const { name: t } = x;
-  e.component(t, x), e.use(ae);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+Tooltip.install = (app) => {
+  const { name: name2 } = Tooltip;
+  app.component(name2, Tooltip);
+  app.use(tooltipDirective);
 };
 export {
-  x as default,
-  ae as tooltipDirective
+  Tooltip as default,
+  tooltipDirective
 };