maz-ui/components/MazAnimatedElement.mjs

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

import { defineComponent as i, computed as l, ref as o, onMounted as d, onBeforeUnmount as r, openBlock as c, createElementBlock as m, normalizeStyle as u, renderSlot as f } from "vue";
import './assets/MazAnimatedElement.BkcmWrHr.css';const v = /* @__PURE__ */ i({
  __name: "MazAnimatedElement",
  props: {
    direction: { default: "up" },
    delay: { default: 0 },
    duration: { default: 2e3 },
    once: { type: Boolean, default: !0 }
  },
  setup(a) {
    const s = l(() => `animate-slide-${a.direction}-blur`), n = o();
    let t = null;
    return d(() => {
      t = new IntersectionObserver(([e]) => {
        e.isIntersecting ? (e.target.classList.remove("--invisible"), e.target.classList.add(s.value), a.once === !0 && (t == null || t.unobserve(e.target))) : a.once === !1 && (e.target.classList.add("--invisible"), e.target.classList.remove(s.value));
      }), n.value && t.observe(n.value);
    }), r(() => t == null ? void 0 : t.disconnect()), (e, g) => (c(), m(
      "div",
      {
        ref_key: "element",
        ref: n,
        class: "m-animated-element m-reset-css --invisible",
        style: u({
          animationDuration: `${e.duration}ms`,
          animationDelay: `${e.delay}ms`
        })
      },
      [
        f(e.$slots, "default", {}, void 0, !0)
      ],
      4
      /* STYLE */
    ));
  }
}), p = (a, s) => {
  const n = a.__vccOpts || a;
  for (const [t, e] of s)
    n[t] = e;
  return n;
}, b = /* @__PURE__ */ p(v, [["__scopeId", "data-v-d3a853a6"]]);
export {
  b as default
};