ant-design-x-vue-next/es/x-markdown/AnimationText.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { defineComponent as f, ref as r, watch as p, computed as d, createElementBlock as l, openBlock as u, Fragment as v, renderList as x, normalizeStyle as g, toDisplayString as k } from "vue";
const _ = /* @__PURE__ */ f({
  name: "AXXMarkdownAnimationText",
  __name: "AnimationText",
  props: {
    text: null,
    animationConfig: null
  },
  setup(s) {
    const i = s, t = r([]), n = r("");
    p(
      () => i.text,
      (e) => {
        if (e === n.value) return;
        if (!(n.value && e.indexOf(n.value) === 0)) {
          t.value = [e], n.value = e;
          return;
        }
        const a = e.slice(n.value.length);
        a && (t.value = [...t.value, a], n.value = e);
      },
      { immediate: !0 }
    );
    const m = d(() => {
      const { fadeDuration: e = 200, easing: a = "ease-in-out" } = i.animationConfig || {};
      return {
        animation: `x-markdown-fade-in ${e}ms ${a} forwards`,
        color: "inherit"
      };
    });
    return (e, a) => (u(!0), l(v, null, x(t.value, (o, c) => (u(), l("span", {
      key: `${c}-${o.slice(0, 8)}`,
      class: "x-markdown-animation-text",
      style: g(m.value)
    }, k(o), 5))), 128));
  }
});
export {
  _ as default
};