y-design-ssr/libs/swipe/index.mjs

SSR component library of YUI with Vue3

import { ref as D, reactive as w, getCurrentInstance as P, provide as le, isVNode as ce, inject as ue, onUnmounted as fe, computed as b, defineComponent as J, createVNode as E, watch as de, onMounted as ve, nextTick as me, onBeforeUnmount as he } from "vue";
const I = (t, s) => s ? typeof s == "string" ? ` ${t}--${s}` : Array.isArray(s) ? s.reduce((a, n) => a + I(t, n), "") : Object.keys(s).reduce(
  (a, n) => a + (s[n] ? I(t, n) : ""),
  ""
) : "", ge = (t) => (s, a) => {
  let n = s, d = a;
  return n && typeof n != "string" && (d = n, n = ""), n = n ? `${t}__${n}` : t, `${n}${I(n, d)}`;
}, ye = () => (t, s) => s ? `${I(`y-${t}`, s)}` : `y-${t}`, we = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
D("zh-CN");
w({
  "zh-CN": we
});
const Q = (t) => {
  const s = `y-${t}`;
  return [s, ge(s), ye()];
};
var R = /* @__PURE__ */ ((t) => (t.left = "left", t.top = "top", t.bottom = "bottom", t.right = "right", t))(R || {}), T = /* @__PURE__ */ ((t) => (t.start = "start", t.center = "center", t.end = "end", t))(T || {});
const q = (t, s) => typeof t == "string" && t.includes("%") && t.includes("%") ? s * Number(t.replace(/%/g, "")) / 100 : Number(t), be = (t) => {
  const s = [], a = (n) => {
    Array.isArray(n) && n.forEach((d) => {
      var c;
      ce(d) && (s.push(d), (c = d.component) != null && c.subTree && a(d.component.subTree.children), d.children && a(d.children));
    });
  };
  return a(t), s;
}, pe = (t, s) => {
  const a = be(s.subTree.children);
  t.sort((n, d) => a.indexOf(n.vnode) - a.indexOf(d.vnode));
}, Ee = (t) => {
  const s = P(), a = w([]);
  return {
    children: a,
    initProvide: (d) => {
      le(t, {
        addChild: (r) => {
          r.proxy && (a.push(r), s && pe(a, s));
        },
        removeChild: (r) => {
          const l = a.indexOf(r);
          a.splice(l, 1);
        },
        children: a,
        ...d
      });
    }
  };
}, ze = (t) => {
  const s = ue(t, null), a = P();
  if (s && a) {
    const { children: n, addChild: d, removeChild: c } = s;
    return d(a), fe(() => c(a)), {
      index: b(() => n.indexOf(a)),
      parent: s
    };
  }
  return {
    parent: null,
    index: D(-1)
  };
}, [Ne, Se] = Q("swipe-item"), F = /* @__PURE__ */ J({
  name: Ne,
  props: {
    clonenNode: {
      type: Object,
      default: null
    },
    index: {
      type: Number,
      default: -1
    }
  },
  setup(t, {
    slots: s
  }) {
    const a = P(), {
      parent: n
    } = ze(ee);
    !t.clonenNode && a && (n == null || n.children.push(a));
    const d = b(() => t.clonenNode ? t.index : n == null ? void 0 : n.children.findIndex((u) => u.proxy === (a == null ? void 0 : a.proxy))), c = b(() => {
      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
      };
    });
    return () => {
      var r, l;
      const u = ((r = n == null ? void 0 : n.itemShowedList) == null ? void 0 : r.list[d.value || 0]) || !1;
      return E("div", {
        class: Se(),
        style: c.value
      }, [u ? t.clonenNode || ((l = s.default) == null ? void 0 : l.call(s)) : null]);
    };
  }
}), De = {
  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"
  }
}, [Z, O] = Q("swipe"), ee = Z, xe = /* @__PURE__ */ J({
  name: Z,
  components: {
    YSwipeItem: F
  },
  props: De,
  setup(t, {
    slots: s,
    emit: a,
    expose: n
  }) {
    const {
      initProvide: d
    } = Ee(ee), c = w([]), u = D(Number(t.initIndex)), r = w({
      // 元素尺寸
      size: 0,
      // 间距
      space: 0,
      // 元素宽度比swipe小，占满整个视窗
      isFillViewport: !1
    }), l = w({
      // 偏移量
      offset: 0,
      // 视窗大小
      viewportSize: 0,
      // 重复节点个数
      cloneNodeCount: 0
    }), p = D(), $ = D(), V = () => {
      const e = c.length, i = [];
      for (let f = 0; f < e; f++)
        i.push(!t.lazy);
      return i;
    }, _ = () => {
      if (!t.lazy)
        return;
      const e = r.size + r.space, i = c.length * e;
      let f = -(l.offset + o.offset) - l.cloneNodeCount * e;
      f < 0 && (f += i);
      const m = f + l.viewportSize;
      for (let v = 0; v < c.length; v++)
        if (!x.list[v]) {
          const h = e * v, g = h + r.size;
          (h >= f && h < m || g > f && g < m || h < f && g > m) && (x.list[v] = !0);
        }
    }, x = w({
      list: V()
    }), A = () => {
      x.list = V(), _();
    };
    de(() => [...c], A);
    const H = (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)
          return 0;
        const i = l.viewportSize * 2 - e, f = Math.ceil(i / e);
        return Math.min(f, c.length - 1);
      }
      return 0;
    }, z = () => {
      if (!p.value)
        return;
      const {
        width: e,
        height: i
      } = p.value.getBoundingClientRect();
      t.vertical ? H(t.itemSize, i) : H(t.itemSize, e), u.value = u.value >= c.length ? c.length - 1 : u.value, u.value < 0 && (u.value = 0), B(u.value), A(), W();
    };
    ve(() => {
      if (me(z).catch(() => {
      }), t.touchable && p.value) {
        const e = p.value;
        e.addEventListener("touchstart", C, !1), e.addEventListener("mousedown", C, !1), e.addEventListener("touchmove", L, !1), e.addEventListener("mousemove", L, !1), e.addEventListener("touchend", y, !1), e.addEventListener("mouseup", y, !1), e.addEventListener("mouseleave", y, !1), e.addEventListener("touchcancel", y, !1);
      }
      window.addEventListener("resize", z, !1), window.addEventListener("orientationchange", z, !1);
    }), he(() => {
      if (K(), t.touchable && p.value) {
        const e = p.value;
        e.removeEventListener("touchstart", C, !1), e.removeEventListener("mousedown", C, !1), e.removeEventListener("mousemove", L, !1), e.removeEventListener("touchmove", L, !1), e.removeEventListener("mouseup", y, !1), e.removeEventListener("touchend", y, !1), e.removeEventListener("mouseleave", y, !1), e.removeEventListener("touchcancel", y, !1);
      }
      window.removeEventListener("resize", z, !1), window.removeEventListener("orientationchange", z, !1);
    });
    const j = b(() => {
      let e = 0;
      switch (t.align) {
        case T.start:
          e = 0;
          break;
        case T.center:
          e = (l.viewportSize - r.size) / 2;
          break;
        case T.end:
          e = l.viewportSize - r.size;
          break;
        default:
          e = 0;
      }
      return e;
    }), k = b(() => t.loop && c.length > 1), B = (e) => {
      const i = r.size + r.space;
      k.value ? l.offset = -i * (e + l.cloneNodeCount) + j.value : (l.offset = -i * e + j.value, t.align !== "center" && (e === 0 && (l.offset = 0), e === c.length - 1 && (l.offset = -i * e + l.viewportSize - r.size)));
    }, G = () => {
      B(u.value), a("afterChange", u.value);
    }, Y = (e) => (c.length + e) % c.length, M = (e, i = !0) => {
      u.value = Y(e), B(e), _(), a("change", u.value), i ? (o.transitionEnabled = !0, $.value && $.value.addEventListener("transitionend", () => {
        o.transitionEnabled = !1, G();
      }, {
        once: !0
      })) : G();
    }, U = (e = !0) => {
      M(u.value - 1, e);
    }, X = (e = !0) => {
      M(u.value + 1, e);
    };
    let N = null;
    const K = () => {
      t.autoplayTime && N && clearInterval(N);
    }, W = () => {
      t.autoplayTime && c.length > 1 && (N && clearInterval(N), N = setInterval(() => {
        X();
      }, Number(t.autoplayTime)));
    }, o = w({
      // 拖拽中
      isDragging: !1,
      // 是否首次拖动
      isFirstTouch: !0,
      // 拖拽起始位置X
      startX: 0,
      // 拖拽起始位置Y
      startY: 0,
      // 拖拽距离
      offset: 0,
      // 开始拖动时间
      startTime: /* @__PURE__ */ new Date(),
      // 是否在执行动画
      transitionEnabled: !1,
      // 当前次拖拽不满足翻页条件
      isDissatisfy: !1
    }), C = (e) => {
      if (o.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), o.startX = i, o.startY = f, o.isDragging = !0, o.isFirstTouch = !0, o.startTime = /* @__PURE__ */ new Date(), K();
    }, L = (e) => {
      if (!o.isDragging)
        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 - o.startX, v = f - o.startY;
      if (o.isFirstTouch && (o.isFirstTouch = !1, Math.abs(m) < Math.abs(v) !== t.vertical)) {
        o.isDragging = !1;
        return;
      }
      e.preventDefault(), o.offset = t.vertical ? v : m, _(), a("dragging", {
        percent: o.offset / (r.size + r.space),
        offset: o.offset
      }), o.isDissatisfy = !1;
    }, y = () => {
      if (!o.isDragging)
        return;
      o.isDragging = !1;
      const i = (/* @__PURE__ */ new Date()).getTime() - o.startTime.getTime();
      ie() && (Math.abs(o.offset) > ne.value || Math.abs(o.offset) / i > 0.5) ? (o.offset > 0 ? U() : X(), o.offset = 0, o.isDissatisfy = !1) : (o.offset = 0, o.isDissatisfy = !0), W();
    }, ne = b(() => q(t.minSwipeDistance, r.size + r.space)), ie = () => {
      if (k.value)
        return !0;
      const e = o.offset > 0 ? u.value - 1 : u.value + 1;
      return e >= 0 && e < c.length;
    }, se = b(() => {
      const e = o.isDragging && !t.isFollowHand ? l.offset : l.offset + o.offset, i = {};
      return t.vertical ? (i.transform = `translate3d(0, ${e}px, 0)`, i.transitionDuration = o.transitionEnabled || o.isDissatisfy ? `${t.duration}ms` : "0ms") : (i.transform = `translate3d(${e}px, 0, 0)`, i.transitionDuration = o.transitionEnabled || o.isDissatisfy ? `${t.duration}ms` : "0ms"), o.isDragging && (i.transition = "none"), t.vertical && (i.flexDirection = "column"), t.autoHeight && (i.display = "block", i.whiteSpace = "nowrap"), i;
    }), oe = b(() => ["y-swipe__dots", `y-swipe__dots--${t.dotsPosition || (t.vertical ? R.left : R.bottom)}`]);
    n({
      moveTo: M,
      next: X,
      prev: U,
      resize: z
    });
    const ae = w({
      children: c,
      activeIndex: u,
      props: t,
      itemDetail: r,
      itemShowedList: x
    });
    d(ae);
    const re = () => t.dots ? E("div", {
      class: oe.value
    }, [c.map((e, i) => {
      const f = O("dot", {
        active: i === u.value
      });
      return E("div", {
        class: f,
        style: {
          backgroundColor: t.dotsColor
        },
        key: i
      }, null);
    })]) : null;
    return () => {
      var e;
      return E("div", {
        class: O(),
        ref: p
      }, [E("div", {
        class: O("track"),
        style: se.value,
        ref: $
      }, [Array(l.cloneNodeCount).fill("").map((i, f) => {
        var h, g, S;
        const m = Y(f - l.cloneNodeCount), v = (S = (h = c[m]) == null ? void 0 : (g = h.slots).default) == null ? void 0 : S.call(g);
        return v ? E(F, {
          clonenNode: v,
          index: m
        }, null) : null;
      }), (e = s.default) == null ? void 0 : e.call(s), Array(l.cloneNodeCount).fill("").map((i, f) => {
        var h, g, S;
        const m = Y(f), v = (S = (h = c[m]) == null ? void 0 : (g = h.slots).default) == null ? void 0 : S.call(g);
        return v ? E(F, {
          clonenNode: v,
          index: m
        }, null) : null;
      })]), s.dots ? s.dots() : re()]);
    };
  }
});
function Ce(t) {
  const s = t;
  return s.install = (a) => {
    const { name: n } = t;
    n && a.component(n, t);
  }, s;
}
const Te = Ce(xe);
export {
  Te as default,
  De as swipeProps
};