motion-plus-vue 1.1.5 → 1.2.0-alpha.0

package/dist/es/components/Ticker/Ticker.vue.mjs

@@ -0,0 +1,183 @@
+import { defineComponent as ae, reactive as oe, ref as se, computed as s, useSlots as re, watch as le, createVNode as A, toRef as ue, createBlock as z, openBlock as d, unref as u, mergeProps as ce, withCtx as F, normalizeStyle as de, createElementBlock as N, Fragment as q, renderList as H, resolveDynamicComponent as K, isVNode as fe } from "vue";
+import { useMotionValue as y, useTransform as pe, wrap as me, useDomRef as W, useInView as ge, useReducedMotion as Se, resize as ve, useAnimationFrame as ze, motion as G, animate as J } from "motion-v";
+import Q from "./TickerItem.vue.mjs";
+import { useKeyboardFocus as ye } from "./use-keyboard-focus.mjs";
+import { defaultBounds as U } from "./const.mjs";
+import { flattenSlots as xe } from "../../utils/flatten-slots.mjs";
+function Pe(f) {
+  return typeof f == "function" || Object.prototype.toString.call(f) === "[object Object]" && !fe(f);
+}
+const be = /* @__PURE__ */ ae({
+  __name: "Ticker",
+  props: {
+    axis: {
+      default: "x"
+    },
+    style: {},
+    velocity: {
+      default: 50
+    },
+    hoverFactor: {
+      default: 1
+    },
+    gap: {
+      default: 10
+    },
+    align: {
+      default: "center"
+    },
+    offset: {}
+  },
+  setup(f) {
+    const a = f, e = oe({
+      listSize: 0,
+      containerSize: 0,
+      containerPaddingStart: 0,
+      containerPaddingEnd: 0,
+      itemSizes: []
+    }), x = se(!1), P = y(1), O = y(0), p = s(() => a.offset ?? O), h = y(0);
+    pe(() => (h.set(me(-e.listSize - a.gap - e.containerPaddingStart, -e.containerPaddingStart, p.value.get())), h.get()));
+    const w = y(0), v = s(() => x.value ? w : h), X = s(() => a.align === "start" ? "flex-start" : a.align === "center" ? "center" : "flex-end"), r = W(), k = W(), C = ge(r, {
+      margin: "100px"
+    }), Y = Se();
+    function M() {
+      if (!r.value || !k.value) return;
+      const {
+        axis: n
+      } = a, t = n === "x" ? "offsetWidth" : "offsetHeight", i = n === "x" ? "offsetLeft" : "offsetTop", o = n === "x" ? "paddingLeft" : "paddingTop", g = n === "x" ? "paddingRight" : "paddingBottom", S = r.value, b = k.value.querySelectorAll(".ticker-item");
+      if (!b.length) return;
+      let T = !1;
+      const c = [];
+      for (let l = 0; l < b.length; l++) {
+        const B = b[l];
+        c.push({
+          start: B[i],
+          end: B[i] + B[t]
+        }), (!e.itemSizes[l] || c[l].start !== e.itemSizes[l].start || c[l].end !== e.itemSizes[l].end) && (T = !0);
+      }
+      const j = S[t], L = c[c.length - 1].end - c[0].start, D = window.getComputedStyle(S), ne = parseInt(D[o] ?? 0), ie = parseInt(D[g] ?? 0);
+      (L !== e.listSize || j !== e.containerSize || T) && (e.listSize = L, e.containerSize = j, e.containerPaddingStart = ne, e.containerPaddingEnd = ie, e.itemSizes = c);
+    }
+    const m = re(), I = s(() => {
+      var n;
+      return xe((n = m == null ? void 0 : m.items) == null ? void 0 : n.call(m));
+    });
+    le([I, C, r], (n, t, i) => {
+      if (!C.value || !r.value) return;
+      M();
+      const o = ve(r.value, M);
+      i(o);
+    }, {
+      immediate: !0,
+      flush: "pre"
+    });
+    const R = s(() => e.containerSize > 0 && e.listSize > 0);
+    ze((n, t) => {
+      if (R.value && C.value && p.value === O && !Y.value) {
+        const i = t / 1e3 * (a.velocity * P.get());
+        p.value.set(p.value.get() - i);
+      }
+    });
+    const _ = s(() => {
+      let n = 0;
+      if (!R.value || !e.containerSize) return 0;
+      let t = 0;
+      const i = Math.max(...e.itemSizes.map((o) => o.end - o.start));
+      for (; t < e.containerSize + e.containerPaddingStart; )
+        t = (e.listSize + a.gap) * (n + 1) - i, n++;
+      return Math.max(n - 1, 0);
+    }), E = s(() => e.listSize === 0 ? 0 : (e.listSize + a.gap) * (_.value + 1)), Z = s(() => {
+      const n = [];
+      for (let t = 0; t < _.value; t++)
+        I.value.forEach((i, o) => {
+          const g = e.itemSizes[o], S = (e.listSize + a.gap) * (t + 1), $ = g ? {
+            start: g.start + S,
+            end: g.end + S
+          } : U;
+          n.push(A(Q, {
+            key: `clone-${t}-${o}`,
+            offset: v.value,
+            axis: a.axis,
+            listSize: E.value,
+            cloneIndex: o,
+            bounds: $,
+            containerPaddingStart: e.containerPaddingStart
+          }, Pe(i) ? i : {
+            default: () => [i]
+          }));
+        });
+      return n;
+    }), V = ue(a, "axis");
+    ye(r, V, w);
+    const ee = {
+      display: "flex",
+      position: "relative",
+      overflow: "hidden"
+    }, te = s(() => ({
+      display: "flex",
+      position: "relative",
+      willChange: "transform",
+      listStyleType: "none",
+      padding: 0,
+      margin: 0,
+      justifyContent: "flex-start",
+      flexDirection: a.axis === "x" ? "row" : "column",
+      gap: `${a.gap}px`,
+      alignItems: X.value,
+      x: a.axis === "x" ? v.value : 0,
+      y: a.axis === "y" ? v.value : 0,
+      opacity: R.value ? 1 : 0
+    }));
+    return (n, t) => (d(), z(u(G).div, ce({
+      ...n.$attrs
+    }, {
+      ref_key: "containerRef",
+      ref: r,
+      "data-size": e.listSize,
+      style: {
+        ...ee,
+        ...a.style
+      },
+      onFocusCapture: t[0] || (t[0] = () => {
+        x.value = !0;
+      }),
+      onBlurCapture: t[1] || (t[1] = () => {
+        x.value = !1, p.value.set(u(w).get());
+      }),
+      onPointerenter: t[2] || (t[2] = () => {
+        u(J)(u(P), n.hoverFactor);
+      }),
+      onPointerleave: t[3] || (t[3] = () => {
+        u(J)(u(P), 1);
+      })
+    }), {
+      default: F(() => [A(u(G).ul, {
+        ref_key: "listRef",
+        ref: k,
+        style: de(te.value)
+      }, {
+        default: F(() => [(d(!0), N(q, null, H(I.value, (i, o) => (d(), z(Q, {
+          key: `original-${o}`,
+          axis: V.value,
+          offset: v.value,
+          "list-size": E.value,
+          "item-index": o,
+          bounds: e.itemSizes[o] ?? u(U),
+          "container-padding-start": e.containerPaddingStart
+        }, {
+          default: F(() => [(d(), z(K(i), {
+            index: o
+          }, null, 8, ["index"]))]),
+          _: 2
+        }, 1032, ["axis", "offset", "list-size", "item-index", "bounds", "container-padding-start"]))), 128)), (d(!0), N(q, null, H(Z.value, (i) => (d(), z(K(i), {
+          key: i.key
+        }))), 128))]),
+        _: 1
+      }, 8, ["style"])]),
+      _: 1
+    }, 16, ["data-size", "style"]));
+  }
+});
+export {
+  be as default
+};

package/dist/es/components/Ticker/Ticker.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./Ticker.vue.mjs";
+export {
+  f as default
+};

package/dist/es/components/Ticker/TickerItem.vue.mjs

@@ -0,0 +1,46 @@
+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
+};

package/dist/es/components/Ticker/TickerItem.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./TickerItem.vue.mjs";
+export {
+  f as default
+};

package/dist/es/components/Ticker/const.mjs

@@ -0,0 +1,4 @@
+const t = { start: 0, end: 0 };
+export {
+  t as defaultBounds
+};

package/dist/es/components/Ticker/context.mjs

@@ -0,0 +1,6 @@
+import { createContext as e } from "motion-v";
+const [o, r] = e("TickerItemContext");
+export {
+  r as provideTickerItemContext,
+  o as useTickerItemContext
+};

package/dist/es/components/Ticker/index.mjs

@@ -0,0 +1,5 @@
+import o from "./Ticker.vue.mjs";
+const c = o;
+export {
+  c as Ticker
+};

package/dist/es/components/Ticker/use-item-offset.mjs

@@ -0,0 +1,12 @@
+import { invariant as t } from "motion-v";
+import { useTickerItemContext as o } from "./context.mjs";
+function n() {
+  const e = o(null);
+  return t(
+    !!e,
+    "useItemOffset must be used within a TickerItem"
+  ), e == null ? void 0 : e.offset;
+}
+export {
+  n as useItemOffset
+};

package/dist/es/components/Ticker/use-keyboard-focus.mjs

@@ -0,0 +1,68 @@
+import { isHTMLElement as f, frame as F, wrap as T } from "motion-v";
+import { onMounted as A, onUnmounted as K } from "vue";
+function D(s, r, w) {
+  let i = !1;
+  A(() => {
+    const t = s.value;
+    if (!t)
+      return;
+    const d = r.value === "x" ? "scrollLeft" : "scrollTop", y = r.value === "x" ? "offsetLeft" : "offsetTop", E = r.value === "x" ? "ArrowLeft" : "ArrowUp", L = r.value === "x" ? "ArrowRight" : "ArrowDown";
+    let c = [], o = 0;
+    const m = () => {
+      const e = c[o];
+      e.focus(), w.set(-e[y]), t[d] = 0, F.render(() => {
+        t[d] = 0;
+      });
+    }, b = (e) => {
+      if (e.key === "Tab") {
+        e.preventDefault(), u();
+        const n = Array.from(
+          document.querySelectorAll(
+            'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]'
+          )
+        ).filter(f);
+        n.sort(M);
+        const g = n[e.shiftKey ? 0 : n.length - 1], h = e.shiftKey ? n.length - 1 : 0;
+        if (t.contains(g)) {
+          n[h].focus();
+          return;
+        } else {
+          const v = n.indexOf(
+            c[o]
+          ), I = e.shiftKey ? -1 : 1;
+          for (let l = v; l < n.length && l >= 0; l += I) {
+            const p = n[l];
+            if (!t.contains(p)) {
+              p.focus();
+              return;
+            }
+          }
+        }
+        return;
+      } else e.key === E ? o-- : e.key === L && o++;
+      o = T(0, c.length, o), m();
+    }, k = () => {
+      i || (i = !0, c = Array.from(
+        t.querySelectorAll(
+          '.ticker-item a, .ticker-item button, .ticker-item input, .ticker-item textarea, .ticker-item select, .ticker-item [tabindex]:not([tabindex="-1"]), .ticker-item [contenteditable="true"]'
+        )
+      ).filter(f), o = 0, m(), window.addEventListener("focus", a, !0), window.addEventListener("blur", a, !0), t.addEventListener("keydown", b));
+    }, a = (e) => {
+      (!e.target || !(e.target instanceof HTMLElement) || !t.contains(e.target)) && u();
+    }, u = () => {
+      i && (i = !1, window.removeEventListener("focus", a, !0), window.removeEventListener("blur", a, !0), t.removeEventListener("keydown", b));
+    }, x = (e) => {
+      const { target: n } = e;
+      f(n) && (i || k());
+    };
+    t.addEventListener("focus", x, !0), K(() => {
+      t.removeEventListener("focus", x), u();
+    });
+  });
+}
+function M(s, r) {
+  return s.tabIndex >= 1 && r.tabIndex >= 1 ? s.tabIndex - r.tabIndex : s.tabIndex >= 1 && r.tabIndex <= 0 ? -1 : r.tabIndex >= 1 && s.tabIndex <= 0 ? 1 : 0;
+}
+export {
+  D as useKeyboardFocus
+};

package/dist/es/index.mjs

@@ -1,14 +1,22 @@
-import { AnimateNumber as e } from "./components/AnimateNumber/index.mjs";
-import { default as s } from "./components/Cursor/Cursor.vue.mjs";
-import { useCursorState as m } from "./components/Cursor/hooks/use-cursor-state/index.mjs";
-import { useCursorIsInView as i } from "./components/Cursor/hooks/use-cursor-in-view.mjs";
-import { usePointerPosition as x } from "./components/Cursor/hooks/use-pointer-position.mjs";
-import { useMagneticPull as n } from "./components/Cursor/magnetic/use-magnetic-pull.mjs";
+import { AnimateNumber as o } from "./components/AnimateNumber/index.mjs";
+import { Ticker as s } from "./components/Ticker/index.mjs";
+import { default as m } from "./components/Cursor/Cursor.vue.mjs";
+import { default as p } from "./components/Ticker/TickerItem.vue.mjs";
+import { useCursorState as a } from "./components/Cursor/hooks/use-cursor-state/index.mjs";
+import { useCursorIsInView as n } from "./components/Cursor/hooks/use-cursor-in-view.mjs";
+import { usePointerPosition as l } from "./components/Cursor/hooks/use-pointer-position.mjs";
+import { useMagneticPull as d } from "./components/Cursor/magnetic/use-magnetic-pull.mjs";
+import { useItemOffset as P } from "./components/Ticker/use-item-offset.mjs";
+import { useKeyboardFocus as k } from "./components/Ticker/use-keyboard-focus.mjs";
 export {
-  e as AnimateNumber,
-  s as Cursor,
-  i as useCursorIsInView,
-  m as useCursorState,
-  n as useMagneticPull,
-  x as usePointerPosition
+  o as AnimateNumber,
+  m as Cursor,
+  s as Ticker,
+  p as TickerItem,
+  n as useCursorIsInView,
+  a as useCursorState,
+  P as useItemOffset,
+  k as useKeyboardFocus,
+  d as useMagneticPull,
+  l as usePointerPosition
 };

package/dist/es/utils/flatten-slots.mjs

@@ -0,0 +1,10 @@
+import { Comment as n, Fragment as o } from "vue";
+function i(r = []) {
+  const e = [];
+  for (const t of r)
+    t.type !== n && (t.type === o && Array.isArray(t.children) ? e.push(...i(t.children)) : e.push(t));
+  return e;
+}
+export {
+  i as flattenSlots
+};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export * from './components/AnimateNumber/index';
-export * from './components/Cursor/index';
+export * from './components/AnimateNumber';
+export * from './components/Cursor';
+export * from './components/Ticker';

package/dist/utils/flatten-slots.d.ts

@@ -0,0 +1,2 @@
+import { VNode } from 'vue';
+export declare function flattenSlots(slots?: VNode[]): VNode[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-plus-vue",
-  "version": "1.1.5",
+  "version": "1.2.0-alpha.0",
   "description": "Motion Plus Vue",
   "author": "",
   "license": "ISC",
@@ -25,25 +25,33 @@
   ],
   "typings": "./dist/index.d.ts",
   "peerDependencies": {
-    "motion-v": ">=0.13.0-beta.1",
+    "motion-v": ">=1.2.0",
     "vue": ">=3.0.0"
   },
   "devDependencies": {
-    "motion-v": "^0.13.0-beta.1",
+    "motion-v": "^1.2.0",
     "vue": "^3.5.13"
   },
   "size-limit": [
     {
       "path": "dist/es/components/AnimateNumber/index.mjs",
-      "limit": "3.6 kb",
+      "limit": "3.75 kb",
       "ignore": [
         "vue",
         "motion-v"
       ]
     },
     {
-      "path": "dist/es/components/Cursor/index.mjs",
-      "limit": "2.7 kb",
+      "path": "dist/es/components/Cursor/Cursor.vue.mjs",
+      "limit": "3.1 kb",
+      "ignore": [
+        "vue",
+        "motion-v"
+      ]
+    },
+    {
+      "path": "dist/es/components/Ticker/index.mjs",
+      "limit": "2.8 kb",
       "ignore": [
         "vue",
         "motion-v"