motion-plus-vue/dist/es/components/Typewriter/Typewriter.vue.mjs

Motion Plus Vue

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
};