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

loickit swiper components for vue

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