motion-plus-vue/dist/es/components/Carousel/CarouselView.vue.mjs

Motion Plus Vue

import { defineComponent as M, computed as u, ref as T, watch as _, onMounted as B, toRefs as b, renderSlot as j } from "vue";
import { useMotionValueEvent as E, clamp as k, JSAnimation as J, animate as V } from "motion-v";
import { wheel as W } from "motion-plus-dom";
import { calcPageInsets as $ } from "./utils/calc-page-insets.mjs";
import { getLayoutStrategy as q } from "../Ticker/utils/layout-strategy.mjs";
import { calcCurrentPage as z } from "./utils/calc-current-page.mjs";
import { findNextPageInset as D } from "./utils/find-next-page.mjs";
import { limitSpring as F } from "./const.mjs";
import { findPrevPageInset as G } from "./utils/find-prev-page.mjs";
import { provideCarousel as H } from "./context.mjs";
import { useTicker as K } from "../Ticker/context.mjs";
const it = /* @__PURE__ */ M({
  __name: "CarouselView",
  props: {
    offset: {},
    targetOffset: {},
    tugOffset: {},
    loop: { type: Boolean },
    transition: {},
    axis: { default: "x" },
    snap: { type: [String, Boolean], default: "page" },
    tickerRef: {}
  },
  setup(L) {
    const t = L;
    let c = !0;
    const { state: o, gap: v, clampOffset: m } = K(), g = u(() => o.totalItemLength + v.value), l = u(
      () => $(o.itemPositions, o.containerLength, o.maxInset)
    ), C = u(() => l.value.insets.length), n = u(() => q(t.axis, o.direction).sign);
    function O(e) {
      const a = z(
        e * n.value,
        l.value.insets,
        g.value,
        o.maxInset
      ), i = t.loop ? !0 : e * -n.value < o.maxInset, s = t.loop ? !0 : e * -n.value > 0;
      return { current: a, isNextActive: i, isPrevActive: s };
    }
    const f = T(O(t.targetOffset.get()));
    function d() {
      const e = O(t.targetOffset.get());
      (e.current !== f.value.current || e.isNextActive !== f.value.isNextActive || e.isPrevActive !== f.value.isPrevActive) && (f.value = e);
    }
    _([() => o.containerLength, () => o.totalItemLength], d, {
      immediate: !0,
      flush: "post"
    }), E(t.targetOffset, "change", (e) => {
      t.offset.set(e), d();
    });
    let r = null;
    function P() {
      r && (r.stop(), r = null);
    }
    B(() => {
      t.offset.attach((e, a) => {
        P(), c ? a(e) : r = new J({
          keyframes: [t.offset.get(), e],
          velocity: k(-2e3, 2e3, t.offset.getVelocity()),
          ...t.transition,
          onUpdate: a,
          onComplete: () => {
            r = null;
          }
        }), c = !0;
      }, P);
    });
    function h(e) {
      const a = m(e);
      t.targetOffset.stop(), c = !1, t.targetOffset.set(a * n.value);
    }
    function x(e, a) {
      const i = -e(
        -t.targetOffset.get() * n.value,
        l.value.visibleLength,
        o.itemPositions,
        v.value
      ), s = m(i);
      s * n.value === t.targetOffset.get() ? V(t.tugOffset, 0, {
        velocity: a * n.value * 400,
        ...F
      }) : h(s);
    }
    const I = () => x(D, -1), A = () => x(G, 1);
    function R(e) {
      const i = (t.loop ? Math.floor(-t.targetOffset.get() * n.value / g.value) : 0) * -g.value;
      h(-l.value.insets[e] + i);
    }
    const { axis: S, snap: w, offset: y } = b(t);
    return _([S, w, y, n, () => t.tickerRef], (e, a, i) => {
      t.tickerRef && i(W(t.tickerRef, {
        axis: S.value,
        onSwipe: w.value ? (s) => {
          s * n.value === 1 ? I() : A();
        } : void 0,
        onWheel: (s) => {
          const p = y.value.get() + s, N = n.value > 0 ? m(p) : k(0, o.maxInset, p);
          t.targetOffset.jump(o.maxInset ? N : p);
        }
      }));
    }, {
      immediate: !0,
      flush: "post"
    }), H({
      paginationState: f,
      totalPages: C,
      nextPage: I,
      prevPage: A,
      gotoPage: R,
      targetOffset: t.targetOffset
    }), (e, a) => j(e.$slots, "default");
  }
});
export {
  it as default
};