maz-ui/components/MazAnimatedText.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent as C, computed as f, ref as p, onMounted as b, onBeforeUnmount as G, openBlock as o, createElementBlock as d, createBlock as g, resolveDynamicComponent as k, mergeProps as $, withCtx as _, Fragment as h, renderList as V, createElementVNode as u, normalizeClass as A, normalizeStyle as x, toDisplayString as c, createCommentVNode as z, createTextVNode as D } from "vue";
import './assets/MazAnimatedText.B91Kt1PP.css';function B(s, i, r) {
  const t = {
    maxAttempts: 20,
    interval: 100,
    ...r
  };
  let l = 0;
  function m() {
    const a = s();
    a != null ? t.expectedValue !== void 0 && a !== t.expectedValue ? l < t.maxAttempts ? (l++, setTimeout(m, t.interval)) : console.warn(t.errorMessage || `[maz-ui](checkAvailability) Nothing found after ${t.maxAttempts} attempts for ref ${a}`) : i(a) : l < t.maxAttempts ? (l++, setTimeout(m, t.interval)) : console.warn(t.errorMessage || `[maz-ui](checkAvailability) Nothing found or expected value after ${t.maxAttempts} attempts for ref ${a}`);
  }
  m();
}
const M = { class: "m-reset-css m-animated-text" }, N = { class: "m-animated-text__last-word-inner" }, T = { class: "m-animated-text__last-word-inner-text" }, W = /* @__PURE__ */ C({
  inheritAttrs: !1,
  __name: "MazAnimatedText",
  props: {
    text: {},
    lastWord: {},
    delay: { default: 0 },
    direction: { default: "up" },
    tag: { default: "span" },
    wordDelay: { default: 75 },
    columnGap: { default: 0.5 },
    rowGap: { default: 0 },
    duration: { default: 2e3 },
    once: { type: Boolean, default: !0 }
  },
  setup(s) {
    const i = f(() => s.text.split(" ")), r = f(() => i.value.length), t = p(!1), l = p(!1), m = f(() => t.value ? `maz-animate-slide-${s.direction}-blur` : "maz-invisible"), a = p();
    let n = null;
    return b(() => {
      l.value = !0, n = new IntersectionObserver(([e]) => {
        t.value = e.isIntersecting, s.once && a.value && (n == null || n.unobserve(a.value));
      }), B(() => a.value, (e) => {
        n == null || n.observe(e);
      });
    }), G(() => n == null ? void 0 : n.disconnect()), (e, v) => (o(), d("div", M, [
      l.value ? (o(), g(k(e.tag), $({
        key: 0,
        ref_key: "element",
        ref: a
      }, e.$attrs, {
        class: "m-animated-text__root",
        style: { columnGap: `${e.columnGap}rem`, rowGap: `${e.rowGap}rem` }
      }), {
        default: _(() => [
          (o(!0), d(
            h,
            null,
            V(i.value, (y, w) => (o(), d("span", {
              key: y + w,
              class: "m-animated-text__word"
            }, [
              u(
                "span",
                {
                  class: A(["m-animated-text__word-inner", m.value]),
                  style: x({
                    animationDelay: `${e.delay + w * (e.wordDelay ?? 150)}ms`,
                    animationDuration: `${e.duration}ms`
                  })
                },
                c(y),
                7
                /* TEXT, CLASS, STYLE */
              )
            ]))),
            128
            /* KEYED_FRAGMENT */
          )),
          e.lastWord ? (o(), d(
            "span",
            {
              key: 0,
              class: A(["m-animated-text__last-word", m.value]),
              style: x({
                animationDelay: `${e.delay + r.value * (e.wordDelay ?? 150)}ms`,
                animationDuration: `${e.duration}ms`
              })
            },
            [
              u("span", N, [
                v[0] || (v[0] = u(
                  "span",
                  { class: "m-animated-text__last-word-inner-gradient" },
                  null,
                  -1
                  /* HOISTED */
                )),
                u(
                  "span",
                  T,
                  c(e.lastWord),
                  1
                  /* TEXT */
                )
              ])
            ],
            6
            /* CLASS, STYLE */
          )) : z("v-if", !0)
        ]),
        _: 1
        /* STABLE */
      }, 16, ["style"])) : (o(), g(
        k(e.tag),
        $({ key: 1 }, e.$attrs, { class: "maz-invisible maz-inline-flex" }),
        {
          default: _(() => [
            D(
              c(e.text) + " ",
              1
              /* TEXT */
            ),
            e.lastWord ? (o(), d(
              h,
              { key: 0 },
              [
                D(
                  c(e.lastWord),
                  1
                  /* TEXT */
                )
              ],
              64
              /* STABLE_FRAGMENT */
            )) : z("v-if", !0)
          ]),
          _: 1
          /* STABLE */
        },
        16
        /* FULL_PROPS */
      ))
    ]));
  }
}), I = (s, i) => {
  const r = s.__vccOpts || s;
  for (const [t, l] of i)
    r[t] = l;
  return r;
}, O = /* @__PURE__ */ I(W, [["__scopeId", "data-v-13cab581"]]);
export {
  O as default
};