y-design-ssr 0.2.0 → 0.2.2

package/libs/tabs/index.mjs

@@ -1,11 +1,40 @@
-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 = {
+import { ref, reactive, getCurrentInstance, provide, isVNode, inject, onUnmounted, computed, defineComponent, createVNode, watch, onMounted, nextTick, onBeforeUnmount, onBeforeUpdate } 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,57 +46,94 @@ const V = (e, n) => n ? typeof n == "string" ? ` ${e}--${n}` : Array.isArray(n)
     validateMessage: "请输入正确内容"
   }
 };
-z("zh-CN");
-N({
-  "zh-CN": $e
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-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));
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
+};
+const parsePercent = (val, baseNumber) => {
+  if (typeof val === "string" && val.includes("%")) {
+    if (!val.includes("%"))
+      return Number(val);
+    return baseNumber * Number(val.replace(/%/g, "")) / 100;
+  }
+  return Number(val);
+};
+const filterChildren = (children) => {
+  const vnodes = [];
+  const _filterChildren = (childrens) => {
+    if (Array.isArray(childrens)) {
+      childrens.forEach((child) => {
+        var _a;
+        if (isVNode(child)) {
+          vnodes.push(child);
+          if ((_a = child.component) == null ? void 0 : _a.subTree) {
+            _filterChildren(child.component.subTree.children);
+          }
+          if (child.children) {
+            _filterChildren(child.children);
+          }
+        }
+      });
+    }
+  };
+  _filterChildren(children);
+  return vnodes;
+};
+const sortChildren = (childrens, instance) => {
+  const vnodes = filterChildren(instance.subTree.children);
+  childrens.sort((a, b) => vnodes.indexOf(a.vnode) - vnodes.indexOf(b.vnode));
+};
+const setRelation = (key) => {
+  const instance = getCurrentInstance();
+  const childrens = reactive([]);
+  const initProvide = (value) => {
+    const addChild = (child) => {
+      if (child.proxy) {
+        childrens.push(child);
+        instance && sortChildren(childrens, instance);
+      }
+    };
+    const removeChild = (child) => {
+      const index = childrens.indexOf(child);
+      childrens.splice(index, 1);
+    };
+    provide(key, {
+      addChild,
+      removeChild,
+      childrens,
+      ...value
     });
   };
-  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
-      });
-    }
+    childrens,
+    initProvide
   };
-}, 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
+};
+const useRelation = (key) => {
+  const parent = inject(key, null);
+  const currentInstance = getCurrentInstance();
+  if (parent && currentInstance) {
+    const { childrens, addChild, removeChild } = parent;
+    addChild(currentInstance);
+    onUnmounted(() => removeChild(currentInstance));
+    const index = computed(() => childrens.indexOf(currentInstance));
+    return {
+      index,
+      parent
     };
   }
   return {
     parent: null,
-    index: z(-1)
+    index: ref(-1)
   };
-}, [Be, De] = U("swipe-item"), K = /* @__PURE__ */ H({
-  name: Be,
+};
+const [name$3, bem$3] = createNamespace("swipe-item");
+const YSwipeItem = /* @__PURE__ */ defineComponent({
+  name: name$3,
   props: {
     clonenNode: {
       type: Object,
@@ -78,39 +144,66 @@ const U = (e) => {
       default: -1
     }
   },
-  setup(e, {
-    slots: n
+  setup(props, {
+    slots
   }) {
-    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
+    const instance = getCurrentInstance();
+    const {
+      parent
+    } = useRelation(SWIPE_PROVIDE_KEY);
+    if (!props.clonenNode && instance) {
+      parent == null ? void 0 : parent.children.push(instance);
+    }
+    const index = computed(() => {
+      if (props.clonenNode) {
+        return props.index;
+      }
+      return parent == null ? void 0 : parent.children.findIndex((item) => item.proxy === (instance == null ? void 0 : instance.proxy));
+    });
+    const style2 = computed(() => {
+      const width = `${(parent == null ? void 0 : parent.itemDetail.size) || 0}px`;
+      let height = "auto";
+      const spacing = `${(parent == null ? void 0 : parent.itemDetail.space) || 0}px`;
+      if ((parent == null ? void 0 : parent.props.autoHeight) && (parent == null ? void 0 : parent.activeIndex) !== index.value) {
+        height = "0";
+      }
+      if (parent == null ? void 0 : parent.props.vertical) {
+        return {
+          height: width,
+          width: height,
+          marginBottom: spacing
+        };
+      }
+      return {
+        width,
+        height,
+        marginRight: spacing
       };
     });
     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 _a, _b;
+      const isShow = ((_a = parent == null ? void 0 : parent.itemShowedList) == null ? void 0 : _a.list[index.value || 0]) || false;
+      return createVNode("div", {
+        "class": bem$3(),
+        "style": style2.value
+      }, [isShow ? props.clonenNode || ((_b = slots.default) == null ? void 0 : _b.call(slots)) : 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 = {
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["left"] = "left";
+  Position2["top"] = "top";
+  Position2["bottom"] = "bottom";
+  Position2["right"] = "right";
+  return Position2;
+})(Position || {});
+var Align = /* @__PURE__ */ ((Align2) => {
+  Align2["start"] = "start";
+  Align2["center"] = "center";
+  Align2["end"] = "end";
+  return Align2;
+})(Align || {});
+const swipeProps = {
   autoplayTime: {
     type: Number,
     default: 0
@@ -125,11 +218,11 @@ const ke = {
   },
   loop: {
     type: Boolean,
-    default: !0
+    default: true
   },
   dots: {
     type: Boolean,
-    default: !0
+    default: true
   },
   dotsPosition: {
     type: String,
@@ -141,15 +234,15 @@ const ke = {
   },
   lazy: {
     type: Boolean,
-    default: !1
+    default: false
   },
   vertical: {
     type: Boolean,
-    default: !1
+    default: false
   },
   autoHeight: {
     type: Boolean,
-    default: !1
+    default: false
   },
   itemSize: {
     type: [Number, String],
@@ -165,144 +258,253 @@ const ke = {
   },
   touchable: {
     type: Boolean,
-    default: !0
+    default: true
   },
   isFollowHand: {
     type: Boolean,
-    default: !0
+    default: true
   },
   align: {
     type: String,
     default: "center"
   }
-}, [de, q] = U("swipe"), ve = de, _e = /* @__PURE__ */ H({
-  name: de,
+};
+const [name$2, bem$2] = createNamespace("swipe");
+const SWIPE_PROVIDE_KEY = name$2;
+const Swipe = /* @__PURE__ */ defineComponent({
+  name: name$2,
   components: {
-    YSwipeItem: K
+    YSwipeItem
   },
-  props: ke,
-  setup(e, {
-    slots: n,
-    emit: o,
-    expose: l
+  props: swipeProps,
+  setup(props, {
+    slots,
+    emit,
+    expose
   }) {
     const {
-      initProvide: v
-    } = ue(ve), u = N([]), c = z(Number(e.initIndex)), s = N({
+      initProvide
+    } = setRelation(SWIPE_PROVIDE_KEY);
+    const itemList = reactive([]);
+    const activeIndex = ref(Number(props.initIndex));
+    const itemDetail = reactive({
       // 元素尺寸
       size: 0,
       // 间距
       space: 0,
       // 元素宽度比swipe小，占满整个视窗
-      isFillViewport: !1
-    }), f = N({
+      isFillViewport: false
+    });
+    const trackDetail = reactive({
       // 偏移量
       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)
+    });
+    const swipeRef = ref();
+    const swipeTrackRef = ref();
+    const getBooleanList = () => {
+      const l = itemList.length;
+      const result = [];
+      for (let i = 0; i < l; i++) {
+        result.push(!props.lazy);
+      }
+      return result;
+    };
+    const checkItemShowed = () => {
+      if (!props.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);
+      const itemSizeSpace = itemDetail.size + itemDetail.space;
+      const trackSize = itemList.length * itemSizeSpace;
+      let viewportLeft = -(trackDetail.offset + dragDetail.offset) - trackDetail.cloneNodeCount * itemSizeSpace;
+      if (viewportLeft < 0) {
+        viewportLeft += trackSize;
+      }
+      const viewportRight = viewportLeft + trackDetail.viewportSize;
+      for (let i = 0; i < itemList.length; i++) {
+        if (!itemShowedList.list[i]) {
+          const left = itemSizeSpace * i;
+          const right = left + itemDetail.size;
+          if (left >= viewportLeft && left < viewportRight || right > viewportLeft && right < viewportRight || left < viewportLeft && right > viewportRight) {
+            itemShowedList.list[i] = true;
+          }
         }
-    }, 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)
+      }
+    };
+    const itemShowedList = reactive({
+      list: getBooleanList()
+    });
+    const initItemShowList = () => {
+      itemShowedList.list = getBooleanList();
+      checkItemShowed();
+    };
+    watch(() => [...itemList], initItemShowList);
+    const setItemSize = (itemSize, viewportSize) => {
+      if (itemSize) {
+        itemDetail.size = parsePercent(itemSize, viewportSize);
+      } else {
+        itemDetail.size = viewportSize;
+      }
+      itemDetail.space = Number(props.itemSpace) || 0;
+      itemDetail.isFillViewport = itemDetail.size >= viewportSize;
+      trackDetail.viewportSize = viewportSize;
+      trackDetail.cloneNodeCount = getCloneNodeCount();
+    };
+    const getCloneNodeCount = () => {
+      if (needLoop.value) {
+        const sizeSpace = itemDetail.size + itemDetail.space;
+        if (sizeSpace === 0)
           return 0;
-        const a = f.viewportSize * 2 - t, m = Math.ceil(a / t);
-        return Math.min(m, u.length - 1);
+        const freeSize = trackDetail.viewportSize * 2 - sizeSpace;
+        const count = Math.ceil(freeSize / sizeSpace);
+        return Math.min(count, itemList.length - 1);
       }
       return 0;
-    }, L = () => {
-      if (!T.value)
+    };
+    const resize = () => {
+      if (!swipeRef.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);
+        width,
+        height
+      } = swipeRef.value.getBoundingClientRect();
+      if (props.vertical) {
+        setItemSize(props.itemSize, height);
+      } else {
+        setItemSize(props.itemSize, width);
       }
-      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);
+      activeIndex.value = activeIndex.value >= itemList.length ? itemList.length - 1 : activeIndex.value;
+      if (activeIndex.value < 0) {
+        activeIndex.value = 0;
       }
-      window.removeEventListener("resize", L, !1), window.removeEventListener("orientationchange", L, !1);
+      updateTransform(activeIndex.value);
+      initItemShowList();
+      startAutoplay();
+    };
+    onMounted(() => {
+      nextTick(resize).catch(() => {
+      });
+      if (props.touchable && swipeRef.value) {
+        const swipeEl = swipeRef.value;
+        swipeEl.addEventListener("touchstart", onTouchStart, false);
+        swipeEl.addEventListener("mousedown", onTouchStart, false);
+        swipeEl.addEventListener("touchmove", onTouch, false);
+        swipeEl.addEventListener("mousemove", onTouch, false);
+        swipeEl.addEventListener("touchend", onTouchEnd, false);
+        swipeEl.addEventListener("mouseup", onTouchEnd, false);
+        swipeEl.addEventListener("mouseleave", onTouchEnd, false);
+        swipeEl.addEventListener("touchcancel", onTouchEnd, false);
+      }
+      window.addEventListener("resize", resize, false);
+      window.addEventListener("orientationchange", resize, false);
     });
-    const j = C(() => {
-      let t = 0;
-      switch (e.align) {
-        case W.start:
-          t = 0;
+    onBeforeUnmount(() => {
+      stopAutoPlay();
+      if (props.touchable && swipeRef.value) {
+        const swipeEl = swipeRef.value;
+        swipeEl.removeEventListener("touchstart", onTouchStart, false);
+        swipeEl.removeEventListener("mousedown", onTouchStart, false);
+        swipeEl.removeEventListener("mousemove", onTouch, false);
+        swipeEl.removeEventListener("touchmove", onTouch, false);
+        swipeEl.removeEventListener("mouseup", onTouchEnd, false);
+        swipeEl.removeEventListener("touchend", onTouchEnd, false);
+        swipeEl.removeEventListener("mouseleave", onTouchEnd, false);
+        swipeEl.removeEventListener("touchcancel", onTouchEnd, false);
+      }
+      window.removeEventListener("resize", resize, false);
+      window.removeEventListener("orientationchange", resize, false);
+    });
+    const positionOffset = computed(() => {
+      let offset = 0;
+      switch (props.align) {
+        case Align.start:
+          offset = 0;
           break;
-        case W.center:
-          t = (f.viewportSize - s.size) / 2;
+        case Align.center:
+          offset = (trackDetail.viewportSize - itemDetail.size) / 2;
           break;
-        case W.end:
-          t = f.viewportSize - s.size;
+        case Align.end:
+          offset = trackDetail.viewportSize - itemDetail.size;
           break;
         default:
-          t = 0;
+          offset = 0;
+      }
+      return offset;
+    });
+    const needLoop = computed(() => {
+      return props.loop && itemList.length > 1;
+    });
+    const updateTransform = (index) => {
+      const itemSizeSpace = itemDetail.size + itemDetail.space;
+      if (needLoop.value) {
+        trackDetail.offset = -itemSizeSpace * (index + trackDetail.cloneNodeCount) + positionOffset.value;
+      } else {
+        trackDetail.offset = -itemSizeSpace * index + positionOffset.value;
+        if (props.align !== "center") {
+          if (index === 0) {
+            trackDetail.offset = 0;
+          }
+          if (index === itemList.length - 1) {
+            trackDetail.offset = -itemSizeSpace * index + trackDetail.viewportSize - itemDetail.size;
+          }
+        }
+      }
+    };
+    const afterChange = () => {
+      updateTransform(activeIndex.value);
+      emit("afterChange", activeIndex.value);
+    };
+    const getIndex = (index) => {
+      return (itemList.length + index) % itemList.length;
+    };
+    const moveTo = (index, withAnimation = true) => {
+      activeIndex.value = getIndex(index);
+      updateTransform(index);
+      checkItemShowed();
+      emit("change", activeIndex.value);
+      if (withAnimation) {
+        dragDetail.transitionEnabled = true;
+        if (swipeTrackRef.value) {
+          swipeTrackRef.value.addEventListener("transitionend", () => {
+            dragDetail.transitionEnabled = false;
+            afterChange();
+          }, {
+            once: true
+          });
+        }
+      } else {
+        afterChange();
       }
-      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({
+    };
+    const prev = (withAnimation = true) => {
+      moveTo(activeIndex.value - 1, withAnimation);
+    };
+    const next = (withAnimation = true) => {
+      moveTo(activeIndex.value + 1, withAnimation);
+    };
+    let timer = null;
+    const stopAutoPlay = () => {
+      if (props.autoplayTime && timer) {
+        clearInterval(timer);
+      }
+    };
+    const startAutoplay = () => {
+      if (props.autoplayTime && itemList.length > 1) {
+        if (timer) {
+          clearInterval(timer);
+        }
+        timer = setInterval(() => {
+          next();
+        }, Number(props.autoplayTime));
+      }
+    };
+    const dragDetail = reactive({
       // 拖拽中
-      isDragging: !1,
+      isDragging: false,
       // 是否首次拖动
-      isFirstTouch: !0,
+      isFirstTouch: true,
       // 拖拽起始位置X
       startX: 0,
       // 拖拽起始位置Y
@@ -312,105 +514,182 @@ const ke = {
       // 开始拖动时间
       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)
+      transitionEnabled: false
+    });
+    const onTouchStart = (e) => {
+      if (dragDetail.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);
-      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;
+      }
+      let clientX = 0;
+      let clientY = 0;
+      if ("touches" in e) {
+        clientX = e.touches[0].clientX;
+        clientY = e.touches[0].clientY;
+      } else {
+        clientX = e.clientX;
+        clientY = e.clientY;
+      }
+      dragDetail.startX = clientX;
+      dragDetail.startY = clientY;
+      dragDetail.isDragging = true;
+      dragDetail.isFirstTouch = true;
+      dragDetail.startTime = /* @__PURE__ */ new Date();
+    };
+    const onTouch = (e) => {
+      if (!dragDetail.isDragging) {
         return;
       }
-      t.preventDefault(), r.offset = e.vertical ? y : w, R(), o("dragging", {
-        percent: r.offset / (s.size + s.space),
-        offset: r.offset
+      let clientX = 0;
+      let clientY = 0;
+      if ("touches" in e) {
+        clientX = e.touches[0].clientX;
+        clientY = e.touches[0].clientY;
+      } else {
+        clientX = e.clientX;
+        clientY = e.clientY;
+      }
+      const offsetX = clientX - dragDetail.startX;
+      const offsetY = clientY - dragDetail.startY;
+      if (dragDetail.isFirstTouch) {
+        dragDetail.isFirstTouch = false;
+        const isVerticalTouch = Math.abs(offsetX) < Math.abs(offsetY);
+        if (isVerticalTouch !== props.vertical) {
+          dragDetail.isDragging = false;
+          return;
+        }
+      }
+      e.preventDefault();
+      dragDetail.offset = props.vertical ? offsetY : offsetX;
+      checkItemShowed();
+      emit("dragging", {
+        percent: dragDetail.offset / (itemDetail.size + itemDetail.space),
+        offset: dragDetail.offset
       });
-    }, $ = () => {
-      if (!r.isDragging)
+    };
+    const onTouchEnd = () => {
+      if (!dragDetail.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
+      }
+      dragDetail.isDragging = false;
+      const now = /* @__PURE__ */ new Date();
+      const dragTime = now.getTime() - dragDetail.startTime.getTime();
+      if (canGoForward() && (Math.abs(dragDetail.offset) > minSwipeDistance.value || Math.abs(dragDetail.offset) / dragTime > 0.5)) {
+        dragDetail.offset > 0 ? prev() : next();
+        dragDetail.offset = 0;
+      } else {
+        dragDetail.offset = 0;
+      }
+      startAutoplay();
+    };
+    const minSwipeDistance = computed(() => {
+      return parsePercent(props.minSwipeDistance, itemDetail.size + itemDetail.space);
+    });
+    const canGoForward = () => {
+      if (needLoop.value) {
+        return true;
+      }
+      const nextIndex = dragDetail.offset > 0 ? activeIndex.value - 1 : activeIndex.value + 1;
+      return nextIndex >= 0 && nextIndex < itemList.length;
+    };
+    const trackStyle = computed(() => {
+      const offset = dragDetail.isDragging && !props.isFollowHand ? trackDetail.offset : trackDetail.offset + dragDetail.offset;
+      const style2 = {};
+      if (props.vertical) {
+        style2.transform = `translate3d(0, ${offset}px, 0)`;
+        style2.transitionDuration = dragDetail.transitionEnabled ? `${props.duration}ms` : "0ms";
+      } else {
+        style2.transform = `translate3d(${offset}px, 0, 0)`;
+        style2.transitionDuration = dragDetail.transitionEnabled ? `${props.duration}ms` : "0ms";
+      }
+      if (dragDetail.isDragging) {
+        style2.transition = "none";
+      }
+      if (props.vertical) {
+        style2.flexDirection = "column";
+      }
+      if (props.autoHeight) {
+        style2.display = "block";
+        style2.whiteSpace = "nowrap";
+      }
+      return style2;
     });
-    const we = N({
-      children: u,
-      activeIndex: c,
-      props: e,
-      itemDetail: s,
-      itemShowedList: k
+    const dotsClass = computed(() => {
+      const position = props.dotsPosition || (props.vertical ? Position.left : Position.bottom);
+      return ["y-swipe__dots", `y-swipe__dots--${position}`];
     });
-    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;
+    expose({
+      moveTo,
+      next,
+      prev,
+      resize
+    });
+    const tabs = reactive({
+      children: itemList,
+      activeIndex,
+      props,
+      itemDetail,
+      itemShowedList
+    });
+    initProvide(tabs);
+    const renderDots = () => {
+      if (props.dots) {
+        return createVNode("div", {
+          "class": dotsClass.value
+        }, [itemList.map((_, index) => {
+          const className = bem$2("dot", {
+            active: index === activeIndex.value
+          });
+          return createVNode("div", {
+            "class": className,
+            "style": {
+              backgroundColor: props.dotsColor
+            },
+            "key": index
+          }, null);
+        })]);
+      }
+      return 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
+      var _a;
+      return createVNode("div", {
+        "class": bem$2(),
+        "ref": swipeRef
+      }, [createVNode("div", {
+        "class": bem$2("track"),
+        "style": trackStyle.value,
+        "ref": swipeTrackRef
+      }, [Array(trackDetail.cloneNodeCount).fill("").map((_, index) => {
+        var _a2, _b, _c;
+        const nodeIndex = getIndex(index - trackDetail.cloneNodeCount);
+        const item = (_c = (_a2 = itemList[nodeIndex]) == null ? void 0 : (_b = _a2.slots).default) == null ? void 0 : _c.call(_b);
+        return item ? createVNode(YSwipeItem, {
+          "clonenNode": item,
+          "index": nodeIndex
         }, 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
+      }), (_a = slots.default) == null ? void 0 : _a.call(slots), Array(trackDetail.cloneNodeCount).fill("").map((_, index) => {
+        var _a2, _b, _c;
+        const nodeIndex = getIndex(index);
+        const item = (_c = (_a2 = itemList[nodeIndex]) == null ? void 0 : (_b = _a2.slots).default) == null ? void 0 : _c.call(_b);
+        return item ? createVNode(YSwipeItem, {
+          "clonenNode": item,
+          "index": nodeIndex
         }, null) : null;
-      })]), n.dots ? n.dots() : pe()]);
+      })]), slots.dots ? slots.dots() : renderDots()]);
     };
   }
-}), [Ae, oe] = U("tabs-title"), se = /* @__PURE__ */ H({
-  name: Ae,
+});
+const [name$1, bem$1] = createNamespace("tabs-title");
+const YTabTitle = /* @__PURE__ */ defineComponent({
+  name: name$1,
   props: {
     active: {
       type: Boolean,
-      default: !1
+      default: false
     },
     scrollable: {
       type: Boolean,
-      default: !1
+      default: false
     },
     title: {
       type: String,
@@ -422,39 +701,47 @@ const ke = {
     },
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
-  setup(e) {
+  setup(props) {
     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
-      } : {}
-    }));
+      parent
+    } = useRelation(TABS_KEY);
+    const titleClass = computed(() => {
+      return [{
+        "y-el--clickable": !props.disabled
+      }, bem$1({
+        scrollable: props.scrollable,
+        disabled: props.disabled
+      }), bem$1(`${(parent == null ? void 0 : parent.props.size) || "middle"}`, {
+        active: props.active
+      }), parent == null ? void 0 : parent.props.titleClass, props.active ? parent == null ? void 0 : parent.props.titleActiveClass : ""];
+    });
+    const titleStyle = computed(() => {
+      return {
+        ...parent == null ? void 0 : parent.props.titleStyle,
+        ...props.active ? {
+          ...parent == null ? void 0 : parent.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]);
+        title,
+        titleSlot
+      } = props;
+      return createVNode("div", {
+        "class": titleClass.value,
+        "title": title,
+        "style": titleStyle.value,
+        "role": "presentation"
+      }, [titleSlot ? titleSlot() : title]);
     };
   }
-}), J = null, Ye = {
+});
+const unknownProp = null;
+const acceptProps = {
   initIndex: {
     type: Number,
     default: 0
@@ -469,7 +756,7 @@ const ke = {
   },
   lazy: {
     type: Boolean,
-    default: !1
+    default: false
   },
   lineColor: {
     type: String,
@@ -483,7 +770,7 @@ const ke = {
     type: [Number, String],
     default: "3px"
   },
-  titleWrapperClass: J,
+  titleWrapperClass: unknownProp,
   titleScrollThreshold: {
     type: Number,
     default: 5
@@ -493,7 +780,7 @@ const ke = {
     default: null
   },
   titleClass: {
-    type: J,
+    type: unknownProp,
     default: null
   },
   titleActiveStyle: {
@@ -501,16 +788,16 @@ const ke = {
     default: null
   },
   titleActiveClass: {
-    type: J,
+    type: unknownProp,
     default: null
   },
   touchable: {
     type: Boolean,
-    default: !0
+    default: true
   },
   changeWithAnimation: {
     type: Boolean,
-    default: !1
+    default: false
   },
   size: {
     type: String,
@@ -521,153 +808,207 @@ const ke = {
     default: "center"
   }
 };
-function Oe(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !re(e);
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const [le, Q] = U("tabs"), me = le, Z = /* @__PURE__ */ H({
-  name: le,
+const [name, bem] = createNamespace("tabs");
+const TABS_KEY = name;
+const Tabs = /* @__PURE__ */ defineComponent({
+  name,
   components: {
-    YTabTitle: se
+    YTabTitle
   },
-  props: Ye,
-  setup(e, {
-    slots: n,
-    emit: o,
-    expose: l
+  props: acceptProps,
+  setup(props, {
+    slots,
+    emit,
+    expose
   }) {
     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);
-      }
+      initProvide
+    } = setRelation(TABS_KEY);
+    const inited = ref(false);
+    const childrenList = reactive([]);
+    const swiperRef = ref();
+    const isTabScrollable = computed(() => childrenList.length > props.titleScrollThreshold);
+    const getCurIndexByName = (titleName) => {
+      return childrenList.findIndex((node) => (node.$props ? node.$props.name : "") === titleName);
+    };
+    const activeIndex = ref(props.initName ? getCurIndexByName(props.initName) : props.initIndex);
+    const scrollTo = (index) => {
+      activeIndex.value = index;
+      const swiper = swiperRef.value;
+      Boolean(swiper) && (swiper == null ? void 0 : swiper.moveTo(index, props.changeWithAnimation));
+    };
+    const scrollToByIndex = (index) => {
+      scrollTo(index);
+    };
+    const scrollToByName = (tabName) => {
+      const curIndex = getCurIndexByName(tabName);
+      scrollTo(curIndex);
+    };
+    expose({
+      scrollToByIndex,
+      scrollToByName
     });
-    const p = z([]), D = z(), G = (i) => (d) => {
-      p.value[i] = d;
-    }, L = (i) => {
+    const titlesRef = ref([]);
+    const tabListRef = ref();
+    const getTitlesRef = (index) => (titleRef) => {
+      titlesRef.value[index] = titleRef;
+    };
+    const clickTitle = (index) => {
       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)
+        title,
+        name: clickedName,
+        disabled
+      } = childrenList[index].$props || {};
+      if (activeIndex.value === index)
+        return;
+      emit(disabled ? "disabledClick" : "click", index, title, clickedName);
+      if (disabled)
+        return;
+      scrollTo(index);
+    };
+    const titleScrollToView = async () => {
+      await nextTick(() => {
+        if (!isTabScrollable.value || !tabListRef.value)
           return;
-        const i = D.value;
-        if (!i || !p.value[g.value])
+        const tabListEl = tabListRef.value;
+        if (!tabListEl || !titlesRef.value[activeIndex.value])
           return;
-        const d = p.value[g.value].$el, h = d.offsetLeft - (i.offsetWidth - d.offsetWidth) / 2 - i.scrollLeft;
-        i.scrollBy({
-          left: h,
+        const curTitleEl = titlesRef.value[activeIndex.value].$el;
+        const scrollDistance = curTitleEl.offsetLeft - (tabListEl.offsetWidth - curTitleEl.offsetWidth) / 2 - tabListEl.scrollLeft;
+        tabListEl.scrollBy({
+          left: scrollDistance,
           behavior: "smooth"
         });
       });
     };
-    ze(() => {
-      p.value = [];
+    onBeforeUpdate(() => {
+      titlesRef.value = [];
     });
-    const x = N({
+    const lintState = reactive({
       transform: "translateX(50%)",
       transition: "all 0ms ease-out"
-    }), I = async () => {
-      await te(() => {
-        if (!p.value || p.value.length === 0)
+    });
+    const updateLineStyle = async () => {
+      await nextTick(() => {
+        if (!titlesRef.value || titlesRef.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;
+        const curIndex = activeIndex.value >= titlesRef.value.length ? 0 : activeIndex.value;
+        const curTitle = titlesRef.value[curIndex].$el;
+        const left = curTitle.offsetLeft + curTitle.offsetWidth / 2;
+        lintState.transform = `translateX(${left}px) translateX(-50%)`;
+        if (inited.value) {
+          lintState.transition = `all ${props.duration}ms ease-out`;
+        }
+        inited.value = true;
       });
-    }, F = (i) => {
+    };
+    const swipeChange = (index) => {
       const {
-        title: d,
-        name: h
-      } = c[i].$props || {};
-      o("change", i, d, h), g.value = i;
-    }, _ = (i) => {
+        title,
+        name: swiperedName
+      } = childrenList[index].$props || {};
+      emit("change", index, title, swiperedName);
+      activeIndex.value = index;
+    };
+    const swipeAfterChange = (index) => {
       const {
-        title: d,
-        name: h
-      } = c[i].$props || {};
-      o("afterChange", i, d, h), g.value = i;
-    }, A = N({
-      children: c,
-      activeIndex: g,
-      props: e
+        title,
+        name: afterSwiperedName
+      } = childrenList[index].$props || {};
+      emit("afterChange", index, title, afterSwiperedName);
+      activeIndex.value = index;
+    };
+    const tabs = reactive({
+      children: childrenList,
+      activeIndex,
+      props
+    });
+    initProvide(tabs);
+    const getSize = (value) => {
+      if (isString(value))
+        return /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value;
+      return value;
+    };
+    const isString = (value) => {
+      return Object.prototype.toString.call(value) === `[object String]`;
+    };
+    onMounted(async () => {
+      await updateLineStyle();
     });
-    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;
+    watch(() => activeIndex.value, async () => {
+      await updateLineStyle();
+      await titleScrollToView();
+    });
+    watch(() => {
+      var _a;
+      return (_a = slots.default) == null ? void 0 : _a.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
+      await updateLineStyle();
+    });
+    return () => {
+      let _slot;
+      return createVNode("div", {
+        "class": name
+      }, [createVNode("div", {
+        "class": bem("list")
+      }, [createVNode("div", {
+        "ref": tabListRef,
+        "class": bem("list-child-wrapper", {
+          scrollable: isTabScrollable.value,
+          [props.size]: props.size,
+          [props.align]: props.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
+      }, [childrenList.length > 0 && childrenList.map((node, index) => {
+        return createVNode(YTabTitle, {
+          "title": node.title,
+          "disabled": node.disabled,
+          "title-slot": node.$slots.title,
+          "key": index,
+          "ref": getTitlesRef(index),
+          "active": activeIndex.value === index,
+          "scrollable": isTabScrollable.value,
+          "onClick": () => clickTitle(index)
+        }, null);
+      }), createVNode("div", {
+        "class": bem("line"),
+        "style": {
+          ...lintState,
+          width: getSize(props.lineWidth),
+          height: getSize(props.lineHeight),
+          backgroundColor: props.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)])]), slots.default ? createVNode(Swipe, {
+        "ref": swiperRef,
+        "dots": false,
+        "loop": false,
+        "initIndex": activeIndex.value,
+        "lazy": props.lazy,
+        "touchable": props.touchable,
+        "duration": props.duration,
+        "is-follow-hand": props.changeWithAnimation,
+        "onChange": swipeChange,
+        "onAfterChange": swipeAfterChange
+      }, _isSlot(_slot = slots.default()) ? _slot : {
+        default: () => [_slot]
       }) : null]);
     };
   }
 });
-Z.install = (e) => {
-  const { name: n } = Z;
-  e.component(n, Z);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+Tabs.install = (Vue) => {
+  const { name: name2 } = Tabs;
+  Vue.component(name2, Tabs);
 };
 export {
-  Ye as acceptProps,
-  Z as default,
-  J as unknownProp
+  acceptProps,
+  Tabs as default,
+  unknownProp
 };