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

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

@@ -0,0 +1,129 @@
+import { defineComponent as N, mergeDefaults as T, useSlots as _, watchEffect as C, ref as S, computed as w, onMounted as D, createBlock as B, openBlock as E, resolveDynamicComponent as F, unref as p, withCtx as V, createElementVNode as k, normalizeStyle as h, normalizeClass as b, createVNode as I } from "vue";
+import { useMotionValue as M, RowValue as R, delayInMs as z, animate as P } from "motion-v";
+import { getTypewriterDelay as j, getNextText as G } from "motion-plus-dom";
+import { TYPING_SPEEDS as Y } from "./types.mjs";
+const K = /* @__PURE__ */ N({
+  __name: "Typewriter",
+  props: /* @__PURE__ */ T({
+    as: {},
+    speed: {},
+    variance: {},
+    play: { type: Boolean },
+    cursorClassName: {},
+    cursorStyle: {},
+    textClassName: {},
+    textStyle: {},
+    cursorBlinkDuration: {},
+    onComplete: { type: Function },
+    replace: {},
+    backspace: {},
+    backspaceFactor: {}
+  }, {
+    as: "span",
+    speed: "normal",
+    variance: "natural",
+    cursorClassName: "motion-typewriter-cursor",
+    play: !0,
+    cursorBlinkDuration: 0.5,
+    replace: "type",
+    backspace: "character",
+    backspaceFactor: 0.2
+  }),
+  setup(g) {
+    const e = g, r = _();
+    function s() {
+      var l;
+      return (((l = r == null ? void 0 : r.default) == null ? void 0 : l.call(r)) ?? []).map((o) => typeof o.children == "string" ? o.children : "").join("");
+    }
+    let i = s();
+    const n = M("");
+    C(() => {
+      const t = s();
+      e.replace === "all" && t !== i && n.set(""), i = t;
+    });
+    const u = S();
+    let c = null;
+    const v = w(() => typeof e.speed == "number" ? e.speed : Y[e.speed]);
+    function m() {
+      u.value && (c = P(
+        u.value,
+        {
+          opacity: [1, 1, 0, 0]
+        },
+        {
+          duration: e.cursorBlinkDuration,
+          times: [0, 0.5, 0.5, 1],
+          ease: "linear",
+          repeat: 1 / 0,
+          repeatType: "reverse"
+        }
+      ));
+    }
+    let a = null;
+    function f() {
+      a == null || a(), a = null;
+    }
+    function y() {
+      if (!e.play) {
+        m(), f();
+        return;
+      }
+      c == null || c.cancel();
+      const t = s(), l = () => {
+        var x;
+        const d = G(
+          n.get(),
+          t,
+          e.replace,
+          e.backspace
+        );
+        n.set(d), d !== t ? o() : (m(), (x = e.onComplete) == null || x.call(e));
+      }, o = () => {
+        a = z(
+          l,
+          j(
+            t,
+            n.get(),
+            v.value,
+            e.variance,
+            e.backspaceFactor
+          )
+        );
+      };
+      a || o();
+    }
+    return C((t) => {
+      y(), t(f);
+    }), D(() => {
+      y();
+    }), (t, l) => (E(), B(F(e.as), { "aria-label": p(i) }, {
+      default: V(() => [
+        k("span", {
+          class: b(e.textClassName),
+          style: h(e.textStyle)
+        }, [
+          I(p(R), { value: p(n) }, null, 8, ["value"])
+        ], 6),
+        k("span", {
+          ref_key: "cursorRef",
+          ref: u,
+          class: b(e.cursorClassName),
+          style: h({
+            display: "inline-block",
+            width: "2px",
+            height: "1em",
+            backgroundColor: "currentColor",
+            position: "relative",
+            top: "0.1em",
+            left: "0.2em",
+            ...e.cursorStyle
+          })
+        }, null, 6)
+      ]),
+      _: 1
+    }, 8, ["aria-label"]));
+  }
+});
+export {
+  K as default
+};

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

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

package/dist/es/components/Typewriter/types.mjs

@@ -0,0 +1,8 @@
+const o = {
+  slow: 130,
+  normal: 75,
+  fast: 30
+};
+export {
+  o as TYPING_SPEEDS
+};

package/dist/es/index.mjs

@@ -1,20 +1,27 @@
 import { AnimateNumber as o } from "./components/AnimateNumber/index.mjs";
-import { Ticker as f } from "./components/Ticker/index.mjs";
-import { default as s } from "./components/Cursor/Cursor.vue.mjs";
-import { default as p } from "./components/Ticker/TickerItem.vue.mjs";
-import { useCursorState as i } 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 I } from "./components/Cursor/hooks/use-pointer-position.mjs";
-import { useMagneticPull as C } from "./components/Cursor/magnetic/use-magnetic-pull.mjs";
-import { useItemOffset as d } from "./components/Ticker/use-item-offset.mjs";
+import { Ticker as s } from "./components/Ticker/index.mjs";
+import { default as f } from "./components/Cursor/Cursor.vue.mjs";
+import { default as a } from "./components/Ticker/TickerItem.vue.mjs";
+import { default as x } from "./components/Typewriter/Typewriter.vue.mjs";
+import { default as l } from "./components/Carousel/Carousel.vue.mjs";
+import { useCursorState as n } from "./components/Cursor/hooks/use-cursor-state/index.mjs";
+import { useCursorIsInView as T } from "./components/Cursor/hooks/use-cursor-in-view.mjs";
+import { usePointerPosition as k } from "./components/Cursor/hooks/use-pointer-position.mjs";
+import { useMagneticPull as P } from "./components/Cursor/magnetic/use-magnetic-pull.mjs";
+import { useTicker as b, useTickerItem as g } from "./components/Ticker/context.mjs";
+import { useCarousel as A } from "./components/Carousel/context.mjs";
 export {
   o as AnimateNumber,
-  s as Cursor,
-  f as Ticker,
-  p as TickerItem,
-  n as useCursorIsInView,
-  i as useCursorState,
-  d as useItemOffset,
-  C as useMagneticPull,
-  I as usePointerPosition
+  l as Carousel,
+  f as Cursor,
+  s as Ticker,
+  a as TickerItem,
+  x as Typewriter,
+  A as useCarousel,
+  T as useCursorIsInView,
+  n as useCursorState,
+  P as useMagneticPull,
+  k as usePointerPosition,
+  b as useTicker,
+  g as useTickerItem
 };

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

@@ -1,22 +1,28 @@
-import { Comment as s, Fragment as c } from "vue";
-function u(t = []) {
-  const e = [];
-  for (const n of t)
-    n.type !== s && e.push(n);
-  return e;
+import { Comment as i, Fragment as c } from "vue";
+function s(t = []) {
+  var n;
+  const r = [];
+  for (const e of t)
+    if (e.type !== i)
+      if (e.type === c) {
+        const o = Array.isArray(e.children) ? e.children : (n = e.children) == null ? void 0 : n.default();
+        r.push(...s(o));
+      } else
+        r.push(e);
+  return r;
 }
-function f(t) {
+function l(t) {
   var n;
-  const e = [];
-  for (const r of t)
-    if (r.type === c) {
-      const o = Array.isArray(r.children) ? r.children : (n = r.children) == null ? void 0 : n.default();
-      e.push(...f(o));
+  const r = [];
+  for (const e of t)
+    if (e.type === c) {
+      const o = Array.isArray(e.children) ? e.children : (n = e.children) == null ? void 0 : n.default();
+      r.push(...l(o));
     } else
-      e.push(r);
-  return e;
+      r.push(e);
+  return r;
 }
 export {
-  u as flattenSlots,
-  f as renderVNode
+  s as flattenSlots,
+  l as renderVNode
 };

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export * from './components/AnimateNumber';
 export * from './components/Cursor';
 export * from './components/Ticker';
+export * from './components/Typewriter';
+export * from './components/Carousel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-plus-vue",
-  "version": "1.3.1",
+  "version": "1.5.0-beta.1",
   "description": "Motion Plus Vue",
   "author": "",
   "license": "ISC",
@@ -25,9 +25,12 @@
   ],
   "typings": "./dist/index.d.ts",
   "peerDependencies": {
-    "motion-v": "^1.5.0",
+    "motion-v": "^1.7.4",
     "vue": ">=3.0.0"
   },
+  "dependencies": {
+    "motion-plus-dom": "^2.0.2"
+  },
   "size-limit": [
     {
       "path": "dist/es/components/AnimateNumber/index.mjs",

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

@@ -1,12 +0,0 @@
-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/utils/get-cumulative-offset.mjs

@@ -1,9 +0,0 @@
-function l(f, o) {
-  let t = 0, e = f;
-  for (; e; )
-    t += o === "x" ? e.offsetLeft : e.offsetTop, e = e.offsetParent;
-  return t;
-}
-export {
-  l as getCumulativeOffset
-};