motion-plus-vue/dist/es/components/Ticker/TickerItem.vue.mjs

Motion Plus Vue

import { defineComponent as p, createBlock as x, openBlock as S, unref as i, mergeProps as g, withCtx as k, renderSlot as I } from "vue";
import { useMotionValue as a, useTransform as d, motion as h } from "motion-v";
import { provideTickerItemContext as v } from "./context.mjs";
const b = /* @__PURE__ */ p({
  __name: "TickerItem",
  props: {
    offset: {},
    axis: {},
    listSize: {},
    containerPaddingStart: {},
    bounds: {},
    itemIndex: {},
    cloneIndex: {}
  },
  setup(c) {
    const t = c, r = a(0);
    d(() => {
      const e = t.offset.get(), { start: n, end: s } = t.bounds;
      return !n && !s || !t.listSize ? r.set(0) : e + s <= -t.containerPaddingStart ? r.set(t.listSize) : r.set(0);
    });
    const o = a(0);
    return d(() => {
      const { offset: e, listSize: n, bounds: s } = t, { start: f, end: l } = s, u = e.get(), m = r.get();
      return !f && !l || !n ? o.set(0) : o.set(u + f + m);
    }), v({
      offset: o
    }), (e, n) => (S(), x(i(h).li, g(e.$attrs, {
      class: e.cloneIndex === void 0 ? "ticker-item" : "clone-item",
      "aria-hidden": e.cloneIndex !== void 0 ? !0 : void 0,
      style: {
        flexShrink: 0,
        flexGrow: 0,
        x: e.axis === "x" ? i(r) : 0,
        y: e.axis === "y" ? i(r) : 0
      }
    }), {
      default: k(() => [
        I(e.$slots, "default")
      ]),
      _: 3
    }, 16, ["class", "aria-hidden", "style"]));
  }
});
export {
  b as default
};