motion-plus-vue 1.3.1 → 1.5.0-beta.1

package/dist/components/Ticker/index.d.ts

@@ -4,6 +4,6 @@ import { MotionProps } from 'motion-v';
 export { default as TickerItem } from './TickerItem';
 export type { TickerItemProps } from './TickerItem';
 export type { ItemPosition, TickerState, ItemSize } from './types';
-export { useItemOffset } from './use-item-offset';
+export { useTickerItem, useTicker } from './context';
 export declare const Ticker: DefineComponent<MotionProps<"div"> & TickerProps>;
 export type { TickerProps };

package/dist/components/Ticker/types.d.ts

@@ -2,10 +2,25 @@ export interface ItemPosition {
     start: number;
     end: number;
 }
-export type ItemSize = 'auto' | 'fill';
+export type ItemSize = 'auto' | 'fill' | 'manual';
+export type Direction = 'ltr' | 'rtl';
+export interface LayoutStrategy {
+    sign: 1 | -1;
+    direction: 'left' | 'top' | 'right' | 'bottom';
+    lengthProp: 'offsetWidth' | 'offsetHeight';
+    viewportLengthProp: 'innerWidth' | 'innerHeight';
+    paddingStartProp: 'paddingLeft' | 'paddingTop' | 'paddingRight';
+    measureItem: (item: HTMLElement, container: HTMLElement) => ItemPosition;
+    getCumulativeInset: (element: HTMLElement) => number;
+}
 export interface TickerState {
+    direction: Direction;
     visibleLength: number;
     inset: number;
     totalItemLength: number;
+    containerLength: number;
     itemPositions: ItemPosition[];
+    isMeasured: boolean;
+    maxInset: number | null;
 }
+export type Axis = 'x' | 'y';

package/dist/components/Ticker/utils/layout-strategy.d.ts

@@ -0,0 +1,2 @@
+import { Axis, Direction, LayoutStrategy } from '../types';
+export declare function getLayoutStrategy(axis: Axis, direction: Direction): LayoutStrategy;

package/dist/components/Typewriter/Typewriter.d.ts

@@ -0,0 +1,98 @@
+import { CSSProperties, IntrinsicElementAttributes } from 'vue';
+import { AsTag, ComponentProps, ElementType } from 'motion-v';
+type TypewriterOwnProps<T extends AsTag = 'span'> = {
+    /**
+     * The HTML element or component to render as (defaults to "span")
+     *
+     * @default "span"
+     */
+    as?: T;
+    /**
+     * Typing speed preset (default: "normal")
+     * - slow: 130ms per character
+     * - normal: 75ms per character
+     * - fast: 30ms per character
+     *
+     * @default "normal"
+     */
+    speed?: number | 'slow' | 'normal' | 'fast';
+    /**
+     * Amount of variance in timing between characters as a factor of the speed.
+     * Defaults to "natural" for realistic human typing patterns.
+     *
+     * @default "natural"
+     */
+    variance?: number | 'natural';
+    /**
+     * Whether the animation should be playing (default: true)
+     * This is useful to manually start the animation
+     * when the component enters the viewport.
+     *
+     * @default true
+     */
+    play?: boolean;
+    /**
+     * Custom className for the cursor element
+     */
+    cursorClassName?: string;
+    /**
+     * Custom styles for the cursor element
+     */
+    cursorStyle?: CSSProperties;
+    /**
+     * Custom className for the text element
+     */
+    textClassName?: string;
+    /**
+     * Custom styles for the text element
+     */
+    textStyle?: CSSProperties;
+    /**
+     * The duration of the cursor blink animation in seconds (default: 0.5)
+     *
+     * @default 0.5
+     */
+    cursorBlinkDuration?: number;
+    /**
+     * Callback when typing animation completes
+     *
+     * @default undefined
+     */
+    onComplete?: () => void;
+    /**
+     * Replacement method for changed content:
+     * - "all": Replace all text instantly
+     * - "type": Type from current text to new text
+     *
+     * @default "type"
+     */
+    replace?: 'all' | 'type';
+    /**
+     * When using replace: "type", how to backspace to the common prefix.
+     * - "character": Backspace one character at a time
+     * - "word": Backspace one word at a time (like option-backspace)
+     * - "all": Jump immediately to the common prefix
+     *
+     * @default "character"
+     */
+    backspace?: 'character' | 'word' | 'all';
+    /**
+     * The speed factor for backspacing relative to typing speed
+     * @default 0.2 - backspace 5x faster than typing
+     */
+    backspaceFactor?: number;
+};
+export type TypewriterProps<T extends AsTag = 'span'> = TypewriterOwnProps<T> & /** @vue-ignore */ (T extends ElementType ? IntrinsicElementAttributes[T] : ComponentProps<T>);
+declare const _default: <T extends AsTag>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & TypewriterProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: __VLS_PrettifyGlobal<__VLS_OmitStringIndex<any>>;
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/Typewriter/index.d.ts

@@ -0,0 +1 @@
+export { default as Typewriter, type TypewriterProps } from './Typewriter';

package/dist/components/Typewriter/types.d.ts

@@ -0,0 +1,6 @@
+export declare const TYPING_SPEEDS: {
+    readonly slow: 130;
+    readonly normal: 75;
+    readonly fast: 30;
+};
+export type TypingSpeed = keyof typeof TYPING_SPEEDS;

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

@@ -0,0 +1,79 @@
+import { defineComponent as d, createBlock as u, openBlock as m, unref as o, mergeProps as y, withCtx as t, renderSlot as i, createVNode as c } from "vue";
+import { useMotionValue as r, useTransform as B, useDomRef as k } from "motion-v";
+import { Ticker as O } from "../Ticker/index.mjs";
+import { defaultTransition as C } from "./const.mjs";
+import T from "./CarouselView.vue.mjs";
+const M = /* @__PURE__ */ d({
+  name: "Carousel",
+  inheritAttrs: !1,
+  __name: "Carousel",
+  props: {
+    snap: { type: [String, Boolean], default: "page" },
+    transition: { default: () => ({
+      ...C
+    }) },
+    axis: { default: "x" },
+    gap: {},
+    align: {},
+    itemSize: {},
+    overflow: { type: Boolean },
+    loop: { type: Boolean, default: !0 },
+    safeMargin: {},
+    fade: {},
+    fadeTransition: {},
+    pageTransition: {},
+    _dragX: { type: [Object, Boolean] },
+    _dragY: { type: [Object, Boolean] },
+    as: {},
+    style: {},
+    onDragEnd: {},
+    drag: { type: [Boolean, String] },
+    dragConstraints: { type: [Boolean, Object] },
+    dragMomentum: { type: Boolean }
+  },
+  setup(p) {
+    const l = p, a = r(0), s = r(0), n = r(0), g = B(() => n.get() + s.get()), f = k();
+    return (e, S) => (m(), u(o(O), y({
+      ...l,
+      ...e.$attrs
+    }, {
+      ref_key: "tickerRef",
+      ref: f,
+      role: "region",
+      "aria-roledescription": "carousel",
+      offset: o(g),
+      loop: e.loop,
+      axis: e.axis,
+      drag: e.axis,
+      "_drag-x": e.axis === "x" ? o(a) : !1,
+      "_drag-y": e.axis === "y" ? o(a) : !1,
+      snap: e.snap,
+      "page-transition": e.transition
+    }), {
+      after: t(() => [
+        c(T, {
+          "ticker-ref": o(f),
+          loop: e.loop,
+          offset: o(s),
+          "tug-offset": o(n),
+          "target-offset": o(a),
+          transition: e.transition,
+          snap: e.snap,
+          axis: e.axis
+        }, {
+          default: t(() => [
+            i(e.$slots, "after")
+          ]),
+          _: 3
+        }, 8, ["ticker-ref", "loop", "offset", "tug-offset", "target-offset", "transition", "snap", "axis"])
+      ]),
+      default: t(() => [
+        i(e.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["offset", "loop", "axis", "drag", "_drag-x", "_drag-y", "snap", "page-transition"]));
+  }
+});
+export {
+  M as default
+};

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

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

package/dist/es/components/Carousel/CarouselView.vue.mjs

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

package/dist/es/components/Carousel/CarouselView.vue2.mjs

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

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

@@ -0,0 +1,13 @@
+const i = {
+  type: "spring",
+  stiffness: 200,
+  damping: 40
+}, n = {
+  type: "spring",
+  stiffness: 80,
+  damping: 10
+};
+export {
+  i as defaultTransition,
+  n as limitSpring
+};

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

@@ -0,0 +1,6 @@
+import { createContext as e } from "motion-v";
+const [r, t] = e("CarouselContext");
+export {
+  t as provideCarousel,
+  r as useCarousel
+};

package/dist/es/components/Carousel/utils/calc-current-page.mjs

@@ -0,0 +1,13 @@
+import { wrap as s } from "motion-v";
+function C(f, n, r, x) {
+  const e = -f, o = x === null ? Math.floor(e / r) : 0, a = o * r;
+  for (let t = n.length - 1; t >= 0; t--) {
+    const c = n[t] + a, h = s(0, n.length, t - 1), v = (t === 0 ? o - 1 : o) * r, i = n[h] + v, m = (c - i) / 2, u = s(0, n.length, t + 1), T = (t === n.length - 1 ? o + 1 : o) * r, l = n[u] + T, I = (l - c) / 2;
+    if (e < l - I && e >= i + m)
+      return t;
+  }
+  return 0;
+}
+export {
+  C as calcCurrentPage
+};

package/dist/es/components/Carousel/utils/calc-page-insets.mjs

@@ -0,0 +1,42 @@
+function u(s, a, n, r = !0) {
+  const h = { insets: [], visibleLength: a };
+  if (s.length === 0)
+    return h;
+  const e = [s[0].start];
+  for (let g = 1; g < s.length; g++) {
+    const { start: t, end: f } = s[g];
+    if (e[e.length - 1] + a < f)
+      if (n !== null)
+        if (t <= n)
+          e.push(t);
+        else {
+          e.push(n);
+          break;
+        }
+      else
+        e.push(t);
+  }
+  if (r && n !== null && e.length > 1) {
+    const g = e[e.length - 1], t = [];
+    for (let l = 0; l < e.length - 1; l++)
+      t.push(e[l + 1] - e[l]);
+    const f = t.reduce((l, i) => l + i, 0) / t.length;
+    if (n - g < f * 0.5) {
+      const l = u(
+        s,
+        a * 0.75,
+        n,
+        !1
+      );
+      if (l.insets.length === e.length)
+        return l;
+    }
+  }
+  return {
+    insets: e,
+    visibleLength: a
+  };
+}
+export {
+  u as calcPageInsets
+};

package/dist/es/components/Carousel/utils/find-current-index.mjs

@@ -0,0 +1,13 @@
+function a(e, t, r) {
+  const o = Math.floor(e / r), l = o * r;
+  let f = 0;
+  for (let n = 0; n < t.length; n++) {
+    const { end: d } = t[n];
+    if (f = n, d + l > e)
+      break;
+  }
+  return f + o * t.length;
+}
+export {
+  a as findCurrentIndexFromInset
+};

package/dist/es/components/Carousel/utils/find-next-page.mjs

@@ -0,0 +1,26 @@
+import { wrap as u } from "motion-v";
+import { findCurrentIndexFromInset as g } from "./find-current-index.mjs";
+function m(e, t, n, r) {
+  var o;
+  if (t.length === 0)
+    return 0;
+  const d = t[t.length - 1].end + n, h = r ?? e + (((o = t[0]) == null ? void 0 : o.end) ?? 0);
+  let a = g(
+    e,
+    t,
+    d
+  ) + 1, l = 0, f = !1;
+  for (; !f; ) {
+    const { start: s, end: x } = t[u(0, t.length, a)], c = Math.floor(a / t.length) * d;
+    l = s + c, x + c > h ? f = !0 : a++;
+  }
+  return l;
+}
+function S(e, t, n, r) {
+  const I = e + t;
+  return m(e, n, r, I);
+}
+export {
+  m as findNextItemInset,
+  S as findNextPageInset
+};

package/dist/es/components/Carousel/utils/find-prev-page.mjs

@@ -0,0 +1,31 @@
+import { wrap as p } from "motion-v";
+import { findCurrentIndexFromInset as x } from "./find-current-index.mjs";
+function v(t, e, f, d, r) {
+  if (e.length === 0)
+    return 0;
+  const s = e[e.length - 1].end + f, I = d ?? t - (r ?? 0);
+  let a = x(
+    t,
+    e,
+    s
+  ), l = t, o = !1;
+  for (; !o; ) {
+    const { start: m, end: c } = e[p(0, e.length, a)], h = c - m, u = Math.floor(a / e.length) * s, n = m + u;
+    I <= n + f || n >= t ? (l = n, a--) : I <= n ? (l = n, o = !0) : ((r && h > r || l === t && I >= n) && (l = n), o = !0);
+  }
+  return l;
+}
+function C(t, e, f, d) {
+  const r = t - e;
+  return v(
+    t,
+    f,
+    d,
+    r,
+    e
+  );
+}
+export {
+  v as findPrevItemInset,
+  C as findPrevPageInset
+};