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

Motion Plus Vue

import { defineComponent as z, computed as l, toRefs as b, renderSlot as c, createBlock as S, openBlock as T, unref as B, normalizeProps as w, mergeProps as P, withCtx as _ } from "vue";
import { useTransform as m, motion as j } from "motion-v";
import { useTicker as C, provideTickerItem as O } from "./context.mjs";
import { getLayoutStrategy as L } from "./utils/layout-strategy.mjs";
const F = /* @__PURE__ */ z({
  __name: "TickerItem",
  props: {
    offset: {},
    axis: {},
    listSize: { default: 0 },
    bounds: {},
    numItems: { default: 0 },
    itemIndex: {},
    cloneIndex: {},
    alignItems: {},
    size: { default: "auto" },
    safeMargin: {},
    reproject: { type: Boolean, default: !0 }
  },
  setup(p) {
    const e = p, { state: o } = C(), s = l(() => L(e.axis, o.direction).sign), n = m(() => {
      if (!e.reproject)
        return 0;
      const { offset: t, bounds: i, listSize: r, safeMargin: a } = e, { start: y, end: d } = i;
      if (!y && !d || !r)
        return 0;
      const f = t.get();
      if (f * s.value + d <= -o.inset - a)
        return r * s.value;
      if (a > 0) {
        const k = o.visibleLength - a - o.inset;
        if (f * s.value + i.start >= k)
          return -r * s.value;
      }
      return 0;
    }), v = m(() => {
      const t = e.offset.get(), i = n.get();
      return !e.bounds.start && !e.bounds.end || !e.listSize ? 0 : t * s.value + e.bounds.start + i * s.value;
    }), x = l(() => e.cloneIndex === void 0 ? {
      "aria-hidden": !1,
      "aria-posinset": e.itemIndex + 1,
      "aria-setsize": e.numItems
    } : {
      "aria-hidden": !0
    }), u = l(() => {
      const t = e.size === "fill", i = e.alignItems === "stretch" ? "100%" : "fit-content";
      return {
        class: e.cloneIndex === void 0 ? "ticker-item" : "clone-item",
        style: {
          flexGrow: 0,
          flexShrink: 0,
          position: "relative",
          flexBasis: t ? "100%" : void 0,
          display: t ? "grid" : void 0,
          gridTemplateColumns: t ? "1fr" : void 0,
          gridTemplateRows: t ? "1fr" : void 0,
          minWidth: t ? 0 : void 0,
          minHeight: t ? 0 : void 0,
          height: e.axis === "x" ? i : void 0,
          width: e.axis === "y" ? i : void 0,
          x: e.axis === "x" ? n : 0,
          y: e.axis === "y" ? n : 0
        },
        ...x.value
      };
    }), { bounds: g, itemIndex: I, cloneIndex: h } = b(e);
    return O({
      offset: v,
      bounds: g,
      projection: n,
      itemIndex: I,
      cloneIndex: h,
      props: u
    }), (t, i) => t.size === "manual" ? c(t.$slots, "default", { key: 0 }) : (T(), S(B(j).li, w(P({ key: 1 }, u.value)), {
      default: _(() => [
        c(t.$slots, "default")
      ]),
      _: 3
    }, 16));
  }
});
export {
  F as default
};