y-design-ssr 0.2.2 → 0.2.4

package/libs/tooltip/index.mjs

@@ -1,40 +1,11 @@
-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 = {
+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 = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -46,30 +17,23 @@ const defaultLang = {
     validateMessage: "请输入正确内容"
   }
 };
-ref("zh-CN");
-reactive({
-  "zh-CN": defaultLang
+N("zh-CN");
+P({
+  "zh-CN": ne
 });
-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 = {
+const F = (e) => {
+  const t = `y-${e}`;
+  return [t, ee(t), te()];
+}, _ = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, I = {
   // 是否显示
   modelValue: {
     type: Boolean,
-    default: false
+    default: !1
   },
   // 是否只能通过 v-model 控制显隐
   manual: {
     type: Boolean,
-    default: false
+    default: !1
   },
   text: {
     type: String,
@@ -107,7 +71,7 @@ const tooltipProps = {
   // 当tooltip显示超出视窗时会自动在另一侧渲染
   autoFlipping: {
     type: Boolean,
-    default: true
+    default: !0
   },
   // 展示位置
   position: {
@@ -115,296 +79,194 @@ const tooltipProps = {
     default: "top"
     /* Top */
   }
-};
-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
+}, [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 Popper = /* @__PURE__ */ defineComponent({
-  name: name$1,
+}, L = /* @__PURE__ */ j({
+  name: oe,
   props: {
-    ...tooltipProps,
+    ...I,
     reference: {
       type: Object,
       default: null
     }
   },
-  setup(props, {
-    slots
+  setup(e, {
+    slots: t
   }) {
-    const instance = getCurrentInstance();
-    const visible = ref(props.modelValue);
-    const positionInfo = reactive({
+    const o = k(), n = N(e.modelValue), r = P({
       placement: "",
       align: ""
-    });
-    const offset = reactive({
+    }), i = P({
       top: 0,
       left: 0
-    });
-    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)
+    }), m = () => {
+      var V;
+      const l = e.reference, c = (V = o == null ? void 0 : o.proxy) == null ? void 0 : V.$refs.popper;
+      if (!l || !c)
         return;
       const {
-        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 = {
+        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 = {
         x: 0,
         y: 0,
-        newPlacement: placement
+        newPlacement: y
       };
-      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) {
+      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) {
         case "top":
         case "bottom":
-          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;
+          a.y = s + A, v === "start" ? a.x = u : v === "end" ? a.x = u + f - d : a.x = u + f / 2 - d / 2;
           break;
         case "left":
         case "right":
-          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;
+          a.x = u + D, v === "start" ? a.y = s : v === "end" ? a.y = s + p - g : a.y = s + p / 2 - g / 2;
           break;
       }
-      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;
-      }
+      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);
     };
-    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 () => {
+    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", $));
+    }), () => {
       const {
-        left,
-        top
-      } = offset;
-      const {
-        width,
-        color,
-        bgColor,
-        modelValue,
-        minWidth,
-        popperClass,
-        popperStyle,
-        text
-      } = props;
-      return createVNode(Teleport, {
-        "to": props.teleport
+        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
       }, {
         default: () => {
-          var _a;
-          return [withDirectives(createVNode("div", {
-            "class": [bem({
-              [positionInfo.placement]: positionInfo.placement
-            }), popperClass],
-            "ref": "popper",
-            "style": {
-              ...popperStyle,
-              left: `${left}px`,
-              top: `${top}px`
+          var E;
+          return [G(h("div", {
+            class: [S({
+              [r.placement]: r.placement
+            }), g],
+            ref: "popper",
+            style: {
+              ...y,
+              left: `${l}px`,
+              top: `${c}px`
             }
-          }, [createVNode("div", {
-            "class": bem("content"),
-            "style": {
-              color,
-              width: parseUnit(width),
-              minWidth: parseUnit(minWidth),
-              backgroundColor: bgColor
+          }, [h("div", {
+            class: S("content"),
+            style: {
+              color: p,
+              width: _(f),
+              minWidth: _(d),
+              backgroundColor: 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
+          }, [((E = t.default) == null ? void 0 : E.call(t)) || v]), h("div", {
+            class: S("arrow", [`${r.placement}${r.align ? `-${r.align}` : ""}`]),
+            style: {
+              color: s
             }
-          }, null)]), [[vShow, modelValue || visible.value]])];
+          }, null)]), [[R, u || n.value]])];
         }
       });
     };
   }
 });
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+function re(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !K(e);
 }
-const [name] = createNamespace("tooltip");
-const Tooltip = /* @__PURE__ */ defineComponent({
-  name,
-  props: tooltipProps,
-  setup(props, {
-    slots
+const [le] = F("tooltip"), x = /* @__PURE__ */ j({
+  name: le,
+  props: I,
+  setup(e, {
+    slots: t
   }) {
-    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;
+    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;
     };
-    onMounted(() => {
-      $dom.value = getEl();
-    });
-    onBeforeUpdate(() => {
-      nextTick(() => {
-        $dom.value = getEl();
-      }).catch((e) => {
-        throw Error(e);
+    return H(() => {
+      n.value = r();
+    }), q(() => {
+      M(() => {
+        n.value = r();
+      }).catch((i) => {
+        throw Error(i);
       });
-    });
-    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
+    }), () => {
+      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
       }), null))]);
     };
   }
-});
-const tooltipDirective = {
-  install: (app) => {
-    app.directive("tooltip", {
-      getSSRProps: (binding) => {
-        return { ...binding };
-      },
+}), ae = {
+  install: (e) => {
+    e.directive("tooltip", {
+      getSSRProps: (t) => ({ ...t }),
       // 指令是具有一组生命周期的钩子：
       // 在绑定元素的 attribute 或事件监听器被应用之前调用
       // 在绑定元素的父组件挂载之前调用
-      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);
+      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);
       },
-      unmounted: (el) => {
-        el.$popper && el.$popper.remove();
+      unmounted: (t) => {
+        t.$popper && t.$popper.remove();
       }
     });
   }
 };
-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);
+x.install = (e) => {
+  const { name: t } = x;
+  e.component(t, x), e.use(ae);
 };
 export {
-  Tooltip as default,
-  tooltipDirective
+  x as default,
+  ae as tooltipDirective
 };