y-design-ssr 0.1.1 → 0.2.0

package/libs/tabs/index.mjs

@@ -0,0 +1,673 @@
+import { ref as z, reactive as N, getCurrentInstance as ie, provide as Se, isVNode as re, inject as Ne, onUnmounted as Ce, computed as C, defineComponent as H, createVNode as b, watch as ee, onMounted as ce, nextTick as te, onBeforeUnmount as Te, onBeforeUpdate as ze } from "vue";
+const V = (e, n) => n ? typeof n == "string" ? ` ${e}--${n}` : Array.isArray(n) ? n.reduce((o, l) => o + V(e, l), "") : Object.keys(n).reduce(
+  (o, l) => o + (n[l] ? V(e, l) : ""),
+  ""
+) : "", Ee = (e) => (n, o) => {
+  let l = n, v = o;
+  return l && typeof l != "string" && (v = l, l = ""), l = l ? `${e}__${l}` : e, `${l}${V(l, v)}`;
+}, Le = () => (e, n) => n ? `${V(`y-${e}`, n)}` : `y-${e}`, $e = {
+  "pull-refresh": {
+    pulling: "下拉刷新...",
+    loosing: "释放刷新...",
+    loading: "数据加载中...",
+    success: "数据已更新",
+    failed: "数据跟新失败，请稍后再试"
+  },
+  "form-item": {
+    validateMessage: "请输入正确内容"
+  }
+};
+z("zh-CN");
+N({
+  "zh-CN": $e
+});
+const U = (e) => {
+  const n = `y-${e}`;
+  return [n, Ee(n), Le()];
+}, ae = (e, n) => typeof e == "string" && e.includes("%") && e.includes("%") ? n * Number(e.replace(/%/g, "")) / 100 : Number(e), xe = (e) => {
+  const n = [], o = (l) => {
+    Array.isArray(l) && l.forEach((v) => {
+      var u;
+      re(v) && (n.push(v), (u = v.component) != null && u.subTree && o(v.component.subTree.children), v.children && o(v.children));
+    });
+  };
+  return o(e), n;
+}, Ie = (e, n) => {
+  const o = xe(n.subTree.children);
+  e.sort((l, v) => o.indexOf(l.vnode) - o.indexOf(v.vnode));
+}, ue = (e) => {
+  const n = ie(), o = N([]);
+  return {
+    childrens: o,
+    initProvide: (v) => {
+      Se(e, {
+        addChild: (s) => {
+          s.proxy && (o.push(s), n && Ie(o, n));
+        },
+        removeChild: (s) => {
+          const f = o.indexOf(s);
+          o.splice(f, 1);
+        },
+        childrens: o,
+        ...v
+      });
+    }
+  };
+}, fe = (e) => {
+  const n = Ne(e, null), o = ie();
+  if (n && o) {
+    const { childrens: l, addChild: v, removeChild: u } = n;
+    return v(o), Ce(() => u(o)), {
+      index: C(() => l.indexOf(o)),
+      parent: n
+    };
+  }
+  return {
+    parent: null,
+    index: z(-1)
+  };
+}, [Be, De] = U("swipe-item"), K = /* @__PURE__ */ H({
+  name: Be,
+  props: {
+    clonenNode: {
+      type: Object,
+      default: null
+    },
+    index: {
+      type: Number,
+      default: -1
+    }
+  },
+  setup(e, {
+    slots: n
+  }) {
+    const o = ie(), {
+      parent: l
+    } = fe(ve);
+    !e.clonenNode && o && (l == null || l.children.push(o));
+    const v = C(() => e.clonenNode ? e.index : l == null ? void 0 : l.children.findIndex((c) => c.proxy === (o == null ? void 0 : o.proxy))), u = C(() => {
+      const c = `${(l == null ? void 0 : l.itemDetail.size) || 0}px`;
+      let s = "auto";
+      const f = `${(l == null ? void 0 : l.itemDetail.space) || 0}px`;
+      return l != null && l.props.autoHeight && (l == null ? void 0 : l.activeIndex) !== v.value && (s = "0"), l != null && l.props.vertical ? {
+        height: c,
+        width: s,
+        marginBottom: f
+      } : {
+        width: c,
+        height: s,
+        marginRight: f
+      };
+    });
+    return () => {
+      var s, f;
+      const c = ((s = l == null ? void 0 : l.itemShowedList) == null ? void 0 : s.list[v.value || 0]) || !1;
+      return b("div", {
+        class: De(),
+        style: u.value
+      }, [c ? e.clonenNode || ((f = n.default) == null ? void 0 : f.call(n)) : null]);
+    };
+  }
+});
+var ne = /* @__PURE__ */ ((e) => (e.left = "left", e.top = "top", e.bottom = "bottom", e.right = "right", e))(ne || {}), W = /* @__PURE__ */ ((e) => (e.start = "start", e.center = "center", e.end = "end", e))(W || {});
+const ke = {
+  autoplayTime: {
+    type: Number,
+    default: 0
+  },
+  duration: {
+    type: Number,
+    default: 300
+  },
+  initIndex: {
+    type: Number,
+    default: 0
+  },
+  loop: {
+    type: Boolean,
+    default: !0
+  },
+  dots: {
+    type: Boolean,
+    default: !0
+  },
+  dotsPosition: {
+    type: String,
+    default: null
+  },
+  dotsColor: {
+    type: String,
+    default: ""
+  },
+  lazy: {
+    type: Boolean,
+    default: !1
+  },
+  vertical: {
+    type: Boolean,
+    default: !1
+  },
+  autoHeight: {
+    type: Boolean,
+    default: !1
+  },
+  itemSize: {
+    type: [Number, String],
+    default: ""
+  },
+  itemSpace: {
+    type: [Number, String],
+    default: 0
+  },
+  minSwipeDistance: {
+    type: [Number, String],
+    default: "50%"
+  },
+  touchable: {
+    type: Boolean,
+    default: !0
+  },
+  isFollowHand: {
+    type: Boolean,
+    default: !0
+  },
+  align: {
+    type: String,
+    default: "center"
+  }
+}, [de, q] = U("swipe"), ve = de, _e = /* @__PURE__ */ H({
+  name: de,
+  components: {
+    YSwipeItem: K
+  },
+  props: ke,
+  setup(e, {
+    slots: n,
+    emit: o,
+    expose: l
+  }) {
+    const {
+      initProvide: v
+    } = ue(ve), u = N([]), c = z(Number(e.initIndex)), s = N({
+      // 元素尺寸
+      size: 0,
+      // 间距
+      space: 0,
+      // 元素宽度比swipe小，占满整个视窗
+      isFillViewport: !1
+    }), f = N({
+      // 偏移量
+      offset: 0,
+      // 视窗大小
+      viewportSize: 0,
+      // 重复节点个数
+      cloneNodeCount: 0
+    }), T = z(), g = z(), B = () => {
+      const t = u.length, a = [];
+      for (let m = 0; m < t; m++)
+        a.push(!e.lazy);
+      return a;
+    }, R = () => {
+      if (!e.lazy)
+        return;
+      const t = s.size + s.space, a = u.length * t;
+      let m = -(f.offset + r.offset) - f.cloneNodeCount * t;
+      m < 0 && (m += a);
+      const w = m + f.viewportSize;
+      for (let y = 0; y < u.length; y++)
+        if (!k.list[y]) {
+          const S = t * y, E = S + s.size;
+          (S >= m && S < w || E > m && E < w || S < m && E > w) && (k.list[y] = !0);
+        }
+    }, k = N({
+      list: B()
+    }), p = () => {
+      k.list = B(), R();
+    };
+    ee(() => [...u], p);
+    const D = (t, a) => {
+      t ? s.size = ae(t, a) : s.size = a, s.space = Number(e.itemSpace) || 0, s.isFillViewport = s.size >= a, f.viewportSize = a, f.cloneNodeCount = G();
+    }, G = () => {
+      if (x.value) {
+        const t = s.size + s.space;
+        if (t === 0)
+          return 0;
+        const a = f.viewportSize * 2 - t, m = Math.ceil(a / t);
+        return Math.min(m, u.length - 1);
+      }
+      return 0;
+    }, L = () => {
+      if (!T.value)
+        return;
+      const {
+        width: t,
+        height: a
+      } = T.value.getBoundingClientRect();
+      e.vertical ? D(e.itemSize, a) : D(e.itemSize, t), c.value = c.value >= u.length ? u.length - 1 : c.value, c.value < 0 && (c.value = 0), I(c.value), p(), h();
+    };
+    ce(() => {
+      if (te(L).catch(() => {
+      }), e.touchable && T.value) {
+        const t = T.value;
+        t.addEventListener("touchstart", M, !1), t.addEventListener("mousedown", M, !1), t.addEventListener("touchmove", P, !1), t.addEventListener("mousemove", P, !1), t.addEventListener("touchend", $, !1), t.addEventListener("mouseup", $, !1), t.addEventListener("mouseleave", $, !1), t.addEventListener("touchcancel", $, !1);
+      }
+      window.addEventListener("resize", L, !1), window.addEventListener("orientationchange", L, !1);
+    }), Te(() => {
+      if (d(), e.touchable && T.value) {
+        const t = T.value;
+        t.removeEventListener("touchstart", M, !1), t.removeEventListener("mousedown", M, !1), t.removeEventListener("mousemove", P, !1), t.removeEventListener("touchmove", P, !1), t.removeEventListener("mouseup", $, !1), t.removeEventListener("touchend", $, !1), t.removeEventListener("mouseleave", $, !1), t.removeEventListener("touchcancel", $, !1);
+      }
+      window.removeEventListener("resize", L, !1), window.removeEventListener("orientationchange", L, !1);
+    });
+    const j = C(() => {
+      let t = 0;
+      switch (e.align) {
+        case W.start:
+          t = 0;
+          break;
+        case W.center:
+          t = (f.viewportSize - s.size) / 2;
+          break;
+        case W.end:
+          t = f.viewportSize - s.size;
+          break;
+        default:
+          t = 0;
+      }
+      return t;
+    }), x = C(() => e.loop && u.length > 1), I = (t) => {
+      const a = s.size + s.space;
+      x.value ? f.offset = -a * (t + f.cloneNodeCount) + j.value : (f.offset = -a * t + j.value, e.align !== "center" && (t === 0 && (f.offset = 0), t === u.length - 1 && (f.offset = -a * t + f.viewportSize - s.size)));
+    }, F = () => {
+      I(c.value), o("afterChange", c.value);
+    }, _ = (t) => (u.length + t) % u.length, A = (t, a = !0) => {
+      c.value = _(t), I(t), R(), o("change", c.value), a ? (r.transitionEnabled = !0, g.value && g.value.addEventListener("transitionend", () => {
+        r.transitionEnabled = !1, F();
+      }, {
+        once: !0
+      })) : F();
+    }, Y = (t = !0) => {
+      A(c.value - 1, t);
+    }, O = (t = !0) => {
+      A(c.value + 1, t);
+    };
+    let i = null;
+    const d = () => {
+      e.autoplayTime && i && clearInterval(i);
+    }, h = () => {
+      e.autoplayTime && u.length > 1 && (i && clearInterval(i), i = setInterval(() => {
+        O();
+      }, Number(e.autoplayTime)));
+    }, r = N({
+      // 拖拽中
+      isDragging: !1,
+      // 是否首次拖动
+      isFirstTouch: !0,
+      // 拖拽起始位置X
+      startX: 0,
+      // 拖拽起始位置Y
+      startY: 0,
+      // 拖拽距离
+      offset: 0,
+      // 开始拖动时间
+      startTime: /* @__PURE__ */ new Date(),
+      // 是否在执行动画
+      transitionEnabled: !1
+    }), M = (t) => {
+      if (r.transitionEnabled)
+        return;
+      let a = 0, m = 0;
+      "touches" in t ? (a = t.touches[0].clientX, m = t.touches[0].clientY) : (a = t.clientX, m = t.clientY), r.startX = a, r.startY = m, r.isDragging = !0, r.isFirstTouch = !0, r.startTime = /* @__PURE__ */ new Date();
+    }, P = (t) => {
+      if (!r.isDragging)
+        return;
+      let a = 0, m = 0;
+      "touches" in t ? (a = t.touches[0].clientX, m = t.touches[0].clientY) : (a = t.clientX, m = t.clientY);
+      const w = a - r.startX, y = m - r.startY;
+      if (r.isFirstTouch && (r.isFirstTouch = !1, Math.abs(w) < Math.abs(y) !== e.vertical)) {
+        r.isDragging = !1;
+        return;
+      }
+      t.preventDefault(), r.offset = e.vertical ? y : w, R(), o("dragging", {
+        percent: r.offset / (s.size + s.space),
+        offset: r.offset
+      });
+    }, $ = () => {
+      if (!r.isDragging)
+        return;
+      r.isDragging = !1;
+      const a = (/* @__PURE__ */ new Date()).getTime() - r.startTime.getTime();
+      ge() && (Math.abs(r.offset) > he.value || Math.abs(r.offset) / a > 0.5) && (r.offset > 0 ? Y() : O()), r.offset = 0, h();
+    }, he = C(() => ae(e.minSwipeDistance, s.size + s.space)), ge = () => {
+      if (x.value)
+        return !0;
+      const t = r.offset > 0 ? c.value - 1 : c.value + 1;
+      return t >= 0 && t < u.length;
+    }, ye = C(() => {
+      const t = r.isDragging && !e.isFollowHand ? f.offset : f.offset + r.offset, a = {};
+      return e.vertical ? (a.transform = `translate3d(0, ${t}px, 0)`, a.transitionDuration = r.transitionEnabled ? `${e.duration}ms` : "0ms") : (a.transform = `translate3d(${t}px, 0, 0)`, a.transitionDuration = r.transitionEnabled ? `${e.duration}ms` : "0ms"), r.isDragging && (a.transition = "none"), e.vertical && (a.flexDirection = "column"), e.autoHeight && (a.display = "block", a.whiteSpace = "nowrap"), a;
+    }), be = C(() => ["y-swipe__dots", `y-swipe__dots--${e.dotsPosition || (e.vertical ? ne.left : ne.bottom)}`]);
+    l({
+      moveTo: A,
+      next: O,
+      prev: Y,
+      resize: L
+    });
+    const we = N({
+      children: u,
+      activeIndex: c,
+      props: e,
+      itemDetail: s,
+      itemShowedList: k
+    });
+    v(we);
+    const pe = () => e.dots ? b("div", {
+      class: be.value
+    }, [u.map((t, a) => {
+      const m = q("dot", {
+        active: a === c.value
+      });
+      return b("div", {
+        class: m,
+        style: {
+          backgroundColor: e.dotsColor
+        },
+        key: a
+      }, null);
+    })]) : null;
+    return () => {
+      var t;
+      return b("div", {
+        class: q(),
+        ref: T
+      }, [b("div", {
+        class: q("track"),
+        style: ye.value,
+        ref: g
+      }, [Array(f.cloneNodeCount).fill("").map((a, m) => {
+        var S, E, X;
+        const w = _(m - f.cloneNodeCount), y = (X = (S = u[w]) == null ? void 0 : (E = S.slots).default) == null ? void 0 : X.call(E);
+        return y ? b(K, {
+          clonenNode: y,
+          index: w
+        }, null) : null;
+      }), (t = n.default) == null ? void 0 : t.call(n), Array(f.cloneNodeCount).fill("").map((a, m) => {
+        var S, E, X;
+        const w = _(m), y = (X = (S = u[w]) == null ? void 0 : (E = S.slots).default) == null ? void 0 : X.call(E);
+        return y ? b(K, {
+          clonenNode: y,
+          index: w
+        }, null) : null;
+      })]), n.dots ? n.dots() : pe()]);
+    };
+  }
+}), [Ae, oe] = U("tabs-title"), se = /* @__PURE__ */ H({
+  name: Ae,
+  props: {
+    active: {
+      type: Boolean,
+      default: !1
+    },
+    scrollable: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    titleSlot: {
+      type: Function,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const {
+      parent: n
+    } = fe(me), o = C(() => [{
+      "y-el--clickable": !e.disabled
+    }, oe({
+      scrollable: e.scrollable,
+      disabled: e.disabled
+    }), oe(`${(n == null ? void 0 : n.props.size) || "middle"}`, {
+      active: e.active
+    }), n == null ? void 0 : n.props.titleClass, e.active ? n == null ? void 0 : n.props.titleActiveClass : ""]), l = C(() => ({
+      ...n == null ? void 0 : n.props.titleStyle,
+      ...e.active ? {
+        ...n == null ? void 0 : n.props.titleActiveStyle
+      } : {}
+    }));
+    return () => {
+      const {
+        title: v,
+        titleSlot: u
+      } = e;
+      return b("div", {
+        class: o.value,
+        title: v,
+        style: l.value,
+        role: "presentation"
+      }, [u ? u() : v]);
+    };
+  }
+}), J = null, Ye = {
+  initIndex: {
+    type: Number,
+    default: 0
+  },
+  initName: {
+    type: [Number, String],
+    default: null
+  },
+  duration: {
+    type: Number,
+    default: 300
+  },
+  lazy: {
+    type: Boolean,
+    default: !1
+  },
+  lineColor: {
+    type: String,
+    default: ""
+  },
+  lineWidth: {
+    type: [Number, String],
+    default: "12px"
+  },
+  lineHeight: {
+    type: [Number, String],
+    default: "3px"
+  },
+  titleWrapperClass: J,
+  titleScrollThreshold: {
+    type: Number,
+    default: 5
+  },
+  titleStyle: {
+    type: [Object],
+    default: null
+  },
+  titleClass: {
+    type: J,
+    default: null
+  },
+  titleActiveStyle: {
+    type: [Object],
+    default: null
+  },
+  titleActiveClass: {
+    type: J,
+    default: null
+  },
+  touchable: {
+    type: Boolean,
+    default: !0
+  },
+  changeWithAnimation: {
+    type: Boolean,
+    default: !1
+  },
+  size: {
+    type: String,
+    default: "large"
+  },
+  align: {
+    type: String,
+    default: "center"
+  }
+};
+function Oe(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !re(e);
+}
+const [le, Q] = U("tabs"), me = le, Z = /* @__PURE__ */ H({
+  name: le,
+  components: {
+    YTabTitle: se
+  },
+  props: Ye,
+  setup(e, {
+    slots: n,
+    emit: o,
+    expose: l
+  }) {
+    const {
+      initProvide: v
+    } = ue(me), u = z(!1), c = N([]), s = z(), f = C(() => c.length > e.titleScrollThreshold), T = (i) => c.findIndex((d) => (d.$props ? d.$props.name : "") === i), g = z(e.initName ? T(e.initName) : e.initIndex), B = (i) => {
+      g.value = i;
+      const d = s.value;
+      d && (d == null || d.moveTo(i, e.changeWithAnimation));
+    };
+    l({
+      scrollToByIndex: (i) => {
+        B(i);
+      },
+      scrollToByName: (i) => {
+        const d = T(i);
+        B(d);
+      }
+    });
+    const p = z([]), D = z(), G = (i) => (d) => {
+      p.value[i] = d;
+    }, L = (i) => {
+      const {
+        title: d,
+        name: h,
+        disabled: r
+      } = c[i].$props || {};
+      g.value !== i && (o(r ? "disabledClick" : "click", i, d, h), !r && B(i));
+    }, j = async () => {
+      await te(() => {
+        if (!f.value || !D.value)
+          return;
+        const i = D.value;
+        if (!i || !p.value[g.value])
+          return;
+        const d = p.value[g.value].$el, h = d.offsetLeft - (i.offsetWidth - d.offsetWidth) / 2 - i.scrollLeft;
+        i.scrollBy({
+          left: h,
+          behavior: "smooth"
+        });
+      });
+    };
+    ze(() => {
+      p.value = [];
+    });
+    const x = N({
+      transform: "translateX(50%)",
+      transition: "all 0ms ease-out"
+    }), I = async () => {
+      await te(() => {
+        if (!p.value || p.value.length === 0)
+          return;
+        const i = g.value >= p.value.length ? 0 : g.value, d = p.value[i].$el, h = d.offsetLeft + d.offsetWidth / 2;
+        x.transform = `translateX(${h}px) translateX(-50%)`, u.value && (x.transition = `all ${e.duration}ms ease-out`), u.value = !0;
+      });
+    }, F = (i) => {
+      const {
+        title: d,
+        name: h
+      } = c[i].$props || {};
+      o("change", i, d, h), g.value = i;
+    }, _ = (i) => {
+      const {
+        title: d,
+        name: h
+      } = c[i].$props || {};
+      o("afterChange", i, d, h), g.value = i;
+    }, A = N({
+      children: c,
+      activeIndex: g,
+      props: e
+    });
+    v(A);
+    const Y = (i) => O(i) && /^\d+(\.\d+)?$/.test(i) ? `${i}px` : i, O = (i) => Object.prototype.toString.call(i) === "[object String]";
+    return ce(async () => {
+      await I();
+    }), ee(() => g.value, async () => {
+      await I(), await j();
+    }), ee(() => {
+      var i;
+      return (i = n.default) == null ? void 0 : i.length;
+    }, async () => {
+      await I();
+    }), () => {
+      let i;
+      return b("div", {
+        class: le
+      }, [b("div", {
+        class: Q("list")
+      }, [b("div", {
+        ref: D,
+        class: Q("list-child-wrapper", {
+          scrollable: f.value,
+          [e.size]: e.size,
+          [e.align]: e.align
+        })
+      }, [c.length > 0 && c.map((d, h) => b(se, {
+        title: d.title,
+        disabled: d.disabled,
+        "title-slot": d.$slots.title,
+        key: h,
+        ref: G(h),
+        active: g.value === h,
+        scrollable: f.value,
+        onClick: () => L(h)
+      }, null)), b("div", {
+        class: Q("line"),
+        style: {
+          ...x,
+          width: Y(e.lineWidth),
+          height: Y(e.lineHeight),
+          backgroundColor: e.lineColor
+        }
+      }, null)])]), n.default ? b(_e, {
+        ref: s,
+        dots: !1,
+        loop: !1,
+        initIndex: g.value,
+        lazy: e.lazy,
+        touchable: e.touchable,
+        duration: e.duration,
+        "is-follow-hand": e.changeWithAnimation,
+        onChange: F,
+        onAfterChange: _
+      }, Oe(i = n.default()) ? i : {
+        default: () => [i]
+      }) : null]);
+    };
+  }
+});
+Z.install = (e) => {
+  const { name: n } = Z;
+  e.component(n, Z);
+};
+export {
+  Ye as acceptProps,
+  Z as default,
+  J as unknownProp
+};