@loickit-v/swiper/dist/components/Slide/index.vue.js

loickit swiper components for vue

import { defineComponent as T, reactive as A, provide as H, ref as N, watch as k, computed as _, onMounted as V, createElementBlock as Z, openBlock as $, withModifiers as f, createElementVNode as B, normalizeStyle as X, unref as c, renderSlot as y, nextTick as Y } from "vue";
import { u_setStyle as b } from "@likcheung/shared";
import { u_setTransform as m, u_setFlush as j } from "../../utils/index.js";
import { SLIDE_DIRECTION as v } from "../constant/index.js";
import { checkDirection as z } from "../../utils/slide.js";
import { COMMON_SLIDE_PROVIDE_NAME as O } from "../constant/private.js";
import { useSlideState as F } from "../Provide/index.js";
import { defaultState as U } from "../../hooks/defineSlide/default.js";
import { useSlidePrivateProvide as q } from "./provide.js";
const oe = /* @__PURE__ */ T({
  name: "LSlide",
  __name: "index",
  props: {
    name: { default: O },
    list: { default: () => [] },
    loadMore: {}
  },
  emits: ["switch"],
  setup(S, { emit: g }) {
    const n = S, w = g, a = () => {
      b(r.value, "transition-duration", `${e.duration}ms`), m(e.direction, r.value, -s.value);
    }, x = q({
      name: n.name,
      itemsInfo: []
    }), e = n.name !== O ? F(n.name) : (() => {
      const t = A(U);
      return H(n.name, t), t;
    })(), p = () => n.list.slice(e.currentIndex, e.currentIndex + 3), o = e.infinite ? N(p()) : null;
    e.infinite && k(
      () => n.list,
      () => {
        o.value = p();
      },
      { once: !0 }
    ), k(() => e.currentIndex, a);
    const r = N(), s = _(
      () => (
        // 通过收集所有 slide-item 的宽和高, 叠加计算
        x.itemsInfo.slice(0, e.currentIndex).reduce((t, i) => (t += i[e.direction === v.HORIZONTAL ? "width" : "height"], t), 0)
      )
    ), D = _(
      () => e.currentIndex === 0 && !e.isNext || e.currentIndex === x.itemsInfo.length - 1 && e.isNext
    ), l = { x: 0, y: 0 };
    let u = !1;
    const L = (t) => {
      u = !0, l.x = t.pageX, l.y = t.pageY;
    }, { isConsistent: M, checkDirectionConsistent: P, resetCheckDirection: C } = z(e.direction), E = (t) => {
      if (!u) return;
      const i = t.pageX - l.x, I = t.pageY - l.y, d = e.direction === v.HORIZONTAL ? i : I;
      e.isNext = d < 0, !D.value && (P(i, I), M.value && (j(r.value), m(
        e.direction,
        r.value,
        Math.min(-s.value + d, e.isNext ? -s.value : 0)
      ), e.shouldNext = Math.abs(d) > e.judgeValue));
    }, h = () => {
      e.shouldNext = !1, u = !1, C();
    }, R = () => {
      if (!e.shouldNext)
        return a(), h();
      e.currentIndex += e.isNext ? 1 : -1, a(), w("switch", {
        index: e.currentIndex
      }), h(), e.infinite && e.currentIndex === o.value.length - 1 && Y(async () => {
        var i;
        (o == null ? void 0 : o.value.length) === n.list.length && await ((i = n.loadMore) == null ? void 0 : i.call(n));
        const t = n.list[e.currentIndex + 1];
        t && o.value.push(t);
      });
    };
    return V(() => {
      m(e.direction, r.value, -s.value);
    }), (t, i) => ($(), Z(
      "div",
      {
        class: "loickit-slide",
        id: "loickit-slide",
        onPointerdown: f(L, ["prevent"]),
        onPointermove: f(E, ["prevent"]),
        onPointerup: f(R, ["prevent"])
      },
      [
        B(
          "div",
          {
            class: "loickit-slide-list",
            style: X({
              // 根据方向设置 flex-direction
              flexDirection: c(e).direction === c(v).HORIZONTAL ? "row" : "column"
            }),
            ref_key: "slideListRef",
            ref: r
          },
          [
            c(e).infinite ? y(t.$slots, "default", {
              key: 1,
              cacheList: c(o)
            }) : y(t.$slots, "default", { key: 0 })
          ],
          4
          /* STYLE */
        )
      ],
      32
      /* NEED_HYDRATION */
    ));
  }
});
export {
  oe as default
};