y-design-ssr 0.2.0 → 0.2.2

package/libs/swipe/index.mjs

@@ -1,11 +1,40 @@
-import { ref as x, reactive as w, getCurrentInstance as V, provide as ce, isVNode as ue, inject as fe, onUnmounted as de, computed as p, defineComponent as J, createVNode as S, watch as ve, onMounted as me, nextTick as he, onBeforeUnmount as ge } from "vue";
-const I = (t, o) => o ? typeof o == "string" ? ` ${t}--${o}` : Array.isArray(o) ? o.reduce((s, n) => s + I(t, n), "") : Object.keys(o).reduce(
-  (s, n) => s + (o[n] ? I(t, n) : ""),
-  ""
-) : "", ye = (t) => (o, s) => {
-  let n = o, d = s;
-  return n && typeof n != "string" && (d = n, n = ""), n = n ? `${t}__${n}` : t, `${n}${I(n, d)}`;
-}, we = () => (t, o) => o ? `${I(`y-${t}`, o)}` : `y-${t}`, pe = {
+import { ref, reactive, getCurrentInstance, provide, isVNode, inject, onUnmounted, computed, defineComponent, createVNode, watch, onMounted, nextTick, onBeforeUnmount } 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 I = (t, o) => o ? typeof o == "string" ? ` ${t}--${o}` : Array.isArray(o)
     validateMessage: "请输入正确内容"
   }
 };
-x("zh-CN");
-w({
-  "zh-CN": pe
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const Q = (t) => {
-  const o = `y-${t}`;
-  return [o, ye(o), we()];
-}, q = (t, o) => typeof t == "string" && t.includes("%") && t.includes("%") ? o * Number(t.replace(/%/g, "")) / 100 : Number(t), be = (t) => {
-  const o = [], s = (n) => {
-    Array.isArray(n) && n.forEach((d) => {
-      var c;
-      ue(d) && (o.push(d), (c = d.component) != null && c.subTree && s(d.component.subTree.children), d.children && s(d.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 s(t), o;
-}, Se = (t, o) => {
-  const s = be(o.subTree.children);
-  t.sort((n, d) => s.indexOf(n.vnode) - s.indexOf(d.vnode));
-}, Ee = (t) => {
-  const o = V(), s = w([]);
   return {
-    childrens: s,
-    initProvide: (d) => {
-      ce(t, {
-        addChild: (r) => {
-          r.proxy && (s.push(r), o && Se(s, o));
-        },
-        removeChild: (r) => {
-          const l = s.indexOf(r);
-          s.splice(l, 1);
-        },
-        childrens: s,
-        ...d
-      });
-    }
+    childrens,
+    initProvide
   };
-}, ze = (t) => {
-  const o = fe(t, null), s = V();
-  if (o && s) {
-    const { childrens: n, addChild: d, removeChild: c } = o;
-    return d(s), de(() => c(s)), {
-      index: p(() => n.indexOf(s)),
-      parent: o
+};
+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: x(-1)
+    index: ref(-1)
   };
-}, [Ne, xe] = Q("swipe-item"), F = /* @__PURE__ */ J({
-  name: Ne,
+};
+const [name$1, bem$1] = createNamespace("swipe-item");
+const YSwipeItem = /* @__PURE__ */ defineComponent({
+  name: name$1,
   props: {
     clonenNode: {
       type: Object,
@@ -78,39 +144,66 @@ const Q = (t) => {
       default: -1
     }
   },
-  setup(t, {
-    slots: o
+  setup(props, {
+    slots
   }) {
-    const s = V(), {
-      parent: n
-    } = ze(ee);
-    !t.clonenNode && s && (n == null || n.children.push(s));
-    const d = p(() => t.clonenNode ? t.index : n == null ? void 0 : n.children.findIndex((u) => u.proxy === (s == null ? void 0 : s.proxy))), c = p(() => {
-      const u = `${(n == null ? void 0 : n.itemDetail.size) || 0}px`;
-      let r = "auto";
-      const l = `${(n == null ? void 0 : n.itemDetail.space) || 0}px`;
-      return n != null && n.props.autoHeight && (n == null ? void 0 : n.activeIndex) !== d.value && (r = "0"), n != null && n.props.vertical ? {
-        height: u,
-        width: r,
-        marginBottom: l
-      } : {
-        width: u,
-        height: r,
-        marginRight: l
+    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 r, l;
-      const u = ((r = n == null ? void 0 : n.itemShowedList) == null ? void 0 : r.list[d.value || 0]) || !1;
-      return S("div", {
-        class: xe(),
-        style: c.value
-      }, [u ? t.clonenNode || ((l = o.default) == null ? void 0 : l.call(o)) : 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$1(),
+        "style": style2.value
+      }, [isShow ? props.clonenNode || ((_b = slots.default) == null ? void 0 : _b.call(slots)) : null]);
     };
   }
 });
-var P = /* @__PURE__ */ ((t) => (t.left = "left", t.top = "top", t.bottom = "bottom", t.right = "right", t))(P || {}), D = /* @__PURE__ */ ((t) => (t.start = "start", t.center = "center", t.end = "end", t))(D || {});
-const Ce = {
+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 Ce = {
   },
   loop: {
     type: Boolean,
-    default: !0
+    default: true
   },
   dots: {
     type: Boolean,
-    default: !0
+    default: true
   },
   dotsPosition: {
     type: String,
@@ -141,15 +234,15 @@ const Ce = {
   },
   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 Ce = {
   },
   touchable: {
     type: Boolean,
-    default: !0
+    default: true
   },
   isFollowHand: {
     type: Boolean,
-    default: !0
+    default: true
   },
   align: {
     type: String,
     default: "center"
   }
-}, [Z, O] = Q("swipe"), ee = Z, R = /* @__PURE__ */ J({
-  name: Z,
+};
+const [name, bem] = createNamespace("swipe");
+const SWIPE_PROVIDE_KEY = name;
+const Swipe = /* @__PURE__ */ defineComponent({
+  name,
   components: {
-    YSwipeItem: F
+    YSwipeItem
   },
-  props: Ce,
-  setup(t, {
-    slots: o,
-    emit: s,
-    expose: n
+  props: swipeProps,
+  setup(props, {
+    slots,
+    emit,
+    expose
   }) {
     const {
-      initProvide: d
-    } = Ee(ee), c = w([]), u = x(Number(t.initIndex)), r = w({
+      initProvide
+    } = setRelation(SWIPE_PROVIDE_KEY);
+    const itemList = reactive([]);
+    const activeIndex = ref(Number(props.initIndex));
+    const itemDetail = reactive({
       // 元素尺寸
       size: 0,
       // 间距
       space: 0,
       // 元素宽度比swipe小，占满整个视窗
-      isFillViewport: !1
-    }), l = w({
+      isFillViewport: false
+    });
+    const trackDetail = reactive({
       // 偏移量
       offset: 0,
       // 视窗大小
       viewportSize: 0,
       // 重复节点个数
       cloneNodeCount: 0
-    }), b = x(), $ = x(), A = () => {
-      const e = c.length, i = [];
-      for (let f = 0; f < e; f++)
-        i.push(!t.lazy);
-      return i;
-    }, _ = () => {
-      if (!t.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 e = r.size + r.space, i = c.length * e;
-      let f = -(l.offset + a.offset) - l.cloneNodeCount * e;
-      f < 0 && (f += i);
-      const m = f + l.viewportSize;
-      for (let v = 0; v < c.length; v++)
-        if (!C.list[v]) {
-          const h = e * v, g = h + r.size;
-          (h >= f && h < m || g > f && g < m || h < f && g > m) && (C.list[v] = !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;
+          }
         }
-    }, C = w({
-      list: A()
-    }), H = () => {
-      C.list = A(), _();
+      }
     };
-    ve(() => [...c], H);
-    const j = (e, i) => {
-      e ? r.size = q(e, i) : r.size = i, r.space = Number(t.itemSpace) || 0, r.isFillViewport = r.size >= i, l.viewportSize = i, l.cloneNodeCount = te();
-    }, te = () => {
-      if (k.value) {
-        const e = r.size + r.space;
-        if (e === 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 i = l.viewportSize * 2 - e, f = Math.ceil(i / e);
-        return Math.min(f, c.length - 1);
+        const freeSize = trackDetail.viewportSize * 2 - sizeSpace;
+        const count = Math.ceil(freeSize / sizeSpace);
+        return Math.min(count, itemList.length - 1);
       }
       return 0;
-    }, E = () => {
-      if (!b.value)
+    };
+    const resize = () => {
+      if (!swipeRef.value)
         return;
       const {
-        width: e,
-        height: i
-      } = b.value.getBoundingClientRect();
-      t.vertical ? j(t.itemSize, i) : j(t.itemSize, e), u.value = u.value >= c.length ? c.length - 1 : u.value, u.value < 0 && (u.value = 0), B(u.value), H(), W();
+        width,
+        height
+      } = swipeRef.value.getBoundingClientRect();
+      if (props.vertical) {
+        setItemSize(props.itemSize, height);
+      } else {
+        setItemSize(props.itemSize, width);
+      }
+      activeIndex.value = activeIndex.value >= itemList.length ? itemList.length - 1 : activeIndex.value;
+      if (activeIndex.value < 0) {
+        activeIndex.value = 0;
+      }
+      updateTransform(activeIndex.value);
+      initItemShowList();
+      startAutoplay();
     };
-    me(() => {
-      if (he(E).catch(() => {
-      }), t.touchable && b.value) {
-        const e = b.value;
-        e.addEventListener("touchstart", L, !1), e.addEventListener("mousedown", L, !1), e.addEventListener("touchmove", T, !1), e.addEventListener("mousemove", T, !1), e.addEventListener("touchend", y, !1), e.addEventListener("mouseup", y, !1), e.addEventListener("mouseleave", y, !1), e.addEventListener("touchcancel", y, !1);
+    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", E, !1), window.addEventListener("orientationchange", E, !1);
-    }), ge(() => {
-      if (ne(), t.touchable && b.value) {
-        const e = b.value;
-        e.removeEventListener("touchstart", L, !1), e.removeEventListener("mousedown", L, !1), e.removeEventListener("mousemove", T, !1), e.removeEventListener("touchmove", T, !1), e.removeEventListener("mouseup", y, !1), e.removeEventListener("touchend", y, !1), e.removeEventListener("mouseleave", y, !1), e.removeEventListener("touchcancel", y, !1);
+      window.addEventListener("resize", resize, false);
+      window.addEventListener("orientationchange", resize, false);
+    });
+    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", E, !1), window.removeEventListener("orientationchange", E, !1);
+      window.removeEventListener("resize", resize, false);
+      window.removeEventListener("orientationchange", resize, false);
     });
-    const G = p(() => {
-      let e = 0;
-      switch (t.align) {
-        case D.start:
-          e = 0;
+    const positionOffset = computed(() => {
+      let offset = 0;
+      switch (props.align) {
+        case Align.start:
+          offset = 0;
           break;
-        case D.center:
-          e = (l.viewportSize - r.size) / 2;
+        case Align.center:
+          offset = (trackDetail.viewportSize - itemDetail.size) / 2;
           break;
-        case D.end:
-          e = l.viewportSize - r.size;
+        case Align.end:
+          offset = trackDetail.viewportSize - itemDetail.size;
           break;
         default:
-          e = 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();
+      }
+    };
+    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);
       }
-      return e;
-    }), k = p(() => t.loop && c.length > 1), B = (e) => {
-      const i = r.size + r.space;
-      k.value ? l.offset = -i * (e + l.cloneNodeCount) + G.value : (l.offset = -i * e + G.value, t.align !== "center" && (e === 0 && (l.offset = 0), e === c.length - 1 && (l.offset = -i * e + l.viewportSize - r.size)));
-    }, U = () => {
-      B(u.value), s("afterChange", u.value);
-    }, Y = (e) => (c.length + e) % c.length, M = (e, i = !0) => {
-      u.value = Y(e), B(e), _(), s("change", u.value), i ? (a.transitionEnabled = !0, $.value && $.value.addEventListener("transitionend", () => {
-        a.transitionEnabled = !1, U();
-      }, {
-        once: !0
-      })) : U();
-    }, K = (e = !0) => {
-      M(u.value - 1, e);
-    }, X = (e = !0) => {
-      M(u.value + 1, e);
     };
-    let z = null;
-    const ne = () => {
-      t.autoplayTime && z && clearInterval(z);
-    }, W = () => {
-      t.autoplayTime && c.length > 1 && (z && clearInterval(z), z = setInterval(() => {
-        X();
-      }, Number(t.autoplayTime)));
-    }, a = w({
+    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,103 +514,184 @@ const Ce = {
       // 开始拖动时间
       startTime: /* @__PURE__ */ new Date(),
       // 是否在执行动画
-      transitionEnabled: !1
-    }), L = (e) => {
-      if (a.transitionEnabled)
-        return;
-      let i = 0, f = 0;
-      "touches" in e ? (i = e.touches[0].clientX, f = e.touches[0].clientY) : (i = e.clientX, f = e.clientY), a.startX = i, a.startY = f, a.isDragging = !0, a.isFirstTouch = !0, a.startTime = /* @__PURE__ */ new Date();
-    }, T = (e) => {
-      if (!a.isDragging)
+      transitionEnabled: false
+    });
+    const onTouchStart = (e) => {
+      if (dragDetail.transitionEnabled) {
         return;
-      let i = 0, f = 0;
-      "touches" in e ? (i = e.touches[0].clientX, f = e.touches[0].clientY) : (i = e.clientX, f = e.clientY);
-      const m = i - a.startX, v = f - a.startY;
-      if (a.isFirstTouch && (a.isFirstTouch = !1, Math.abs(m) < Math.abs(v) !== t.vertical)) {
-        a.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;
       }
-      e.preventDefault(), a.offset = t.vertical ? v : m, _(), s("dragging", {
-        percent: a.offset / (r.size + r.space),
-        offset: a.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
       });
-    }, y = () => {
-      if (!a.isDragging)
+    };
+    const onTouchEnd = () => {
+      if (!dragDetail.isDragging) {
         return;
-      a.isDragging = !1;
-      const i = (/* @__PURE__ */ new Date()).getTime() - a.startTime.getTime();
-      oe() && (Math.abs(a.offset) > ie.value || Math.abs(a.offset) / i > 0.5) && (a.offset > 0 ? K() : X()), a.offset = 0, W();
-    }, ie = p(() => q(t.minSwipeDistance, r.size + r.space)), oe = () => {
-      if (k.value)
-        return !0;
-      const e = a.offset > 0 ? u.value - 1 : u.value + 1;
-      return e >= 0 && e < c.length;
-    }, se = p(() => {
-      const e = a.isDragging && !t.isFollowHand ? l.offset : l.offset + a.offset, i = {};
-      return t.vertical ? (i.transform = `translate3d(0, ${e}px, 0)`, i.transitionDuration = a.transitionEnabled ? `${t.duration}ms` : "0ms") : (i.transform = `translate3d(${e}px, 0, 0)`, i.transitionDuration = a.transitionEnabled ? `${t.duration}ms` : "0ms"), a.isDragging && (i.transition = "none"), t.vertical && (i.flexDirection = "column"), t.autoHeight && (i.display = "block", i.whiteSpace = "nowrap"), i;
-    }), re = p(() => ["y-swipe__dots", `y-swipe__dots--${t.dotsPosition || (t.vertical ? P.left : P.bottom)}`]);
-    n({
-      moveTo: M,
-      next: X,
-      prev: K,
-      resize: E
+      }
+      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 ae = w({
-      children: c,
-      activeIndex: u,
-      props: t,
-      itemDetail: r,
-      itemShowedList: C
+    const dotsClass = computed(() => {
+      const position = props.dotsPosition || (props.vertical ? Position.left : Position.bottom);
+      return ["y-swipe__dots", `y-swipe__dots--${position}`];
     });
-    d(ae);
-    const le = () => t.dots ? S("div", {
-      class: re.value
-    }, [c.map((e, i) => {
-      const f = O("dot", {
-        active: i === u.value
-      });
-      return S("div", {
-        class: f,
-        style: {
-          backgroundColor: t.dotsColor
-        },
-        key: i
-      }, 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("dot", {
+            active: index === activeIndex.value
+          });
+          return createVNode("div", {
+            "class": className,
+            "style": {
+              backgroundColor: props.dotsColor
+            },
+            "key": index
+          }, null);
+        })]);
+      }
+      return null;
+    };
     return () => {
-      var e;
-      return S("div", {
-        class: O(),
-        ref: b
-      }, [S("div", {
-        class: O("track"),
-        style: se.value,
-        ref: $
-      }, [Array(l.cloneNodeCount).fill("").map((i, f) => {
-        var h, g, N;
-        const m = Y(f - l.cloneNodeCount), v = (N = (h = c[m]) == null ? void 0 : (g = h.slots).default) == null ? void 0 : N.call(g);
-        return v ? S(F, {
-          clonenNode: v,
-          index: m
+      var _a;
+      return createVNode("div", {
+        "class": bem(),
+        "ref": swipeRef
+      }, [createVNode("div", {
+        "class": bem("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;
-      }), (e = o.default) == null ? void 0 : e.call(o), Array(l.cloneNodeCount).fill("").map((i, f) => {
-        var h, g, N;
-        const m = Y(f), v = (N = (h = c[m]) == null ? void 0 : (g = h.slots).default) == null ? void 0 : N.call(g);
-        return v ? S(F, {
-          clonenNode: v,
-          index: m
+      }), (_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;
-      })]), o.dots ? o.dots() : le()]);
+      })]), slots.dots ? slots.dots() : renderDots()]);
     };
   }
 });
-R.install = (t) => {
-  const { name: o } = R;
-  t.component(o, R);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+Swipe.install = (Vue) => {
+  const { name: name2 } = Swipe;
+  Vue.component(name2, Swipe);
 };
 export {
-  D as Align,
-  P as Position,
-  R as default,
-  Ce as swipeProps
+  Align,
+  Position,
+  Swipe as default,
+  swipeProps
 };