vue-emerge/dist/vue-emerge.es.js

A simple Vue component to animate elements when they enter the viewport on scroll.

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("[v-cloak]{display:none}@keyframes vue-emerge-animation{0%{opacity:0;transform:var(--vue-emerge-initial-transform)}to{opacity:1;transform:var(--vue-emerge-final-transform)}}.vue-emerge--animated[data-v-45cb40b6]{animation-name:var(--vue-emerge-animation-name);animation-duration:var(--vue-emerge-animation-duration);animation-timing-function:var(--vue-emerge-timing-function);animation-fill-mode:forwards;animation-delay:var(--vue-emerge-animation-delay);pointer-events:var(--vue-emerge-pointer-events)}.vue-emerge--animated.vue-emerge--animation-completed[data-v-45cb40b6]{pointer-events:auto}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
import { ref as s, onMounted as d, onUnmounted as v, defineComponent as p, reactive as y, watch as h, computed as l, createBlock as b, openBlock as O, resolveDynamicComponent as S, mergeProps as x, unref as E, withCtx as $, renderSlot as w } from "vue";
function A(t, e = {}) {
  const o = s(!1);
  let n = null;
  return d(() => {
    let r = null;
    if (e.trigger && (r = document.querySelector(e.trigger), r || console.warn(`vue-emerge: Trigger element with selector "${e.trigger}" not found. Falling back to observing the component itself.`)), !r) {
      if (!t.value) return;
      r = t.value.$el ?? t.value;
    }
    if (!(r instanceof Element)) {
      console.warn("vue-emerge: The element to be observed is not a valid DOM node.");
      return;
    }
    let a = null;
    e.root && (a = document.querySelector(e.root), a || console.warn(`vue-emerge: Root element with selector "${e.root}" not found. Falling back to the browser viewport.`)), n = new IntersectionObserver(
      (u) => {
        u[0].isIntersecting && (o.value = !0, n == null || n.disconnect());
      },
      {
        root: a,
        rootMargin: `0px 0px ${e.triggerOffset} 0px`,
        threshold: e.threshold
      }
    ), n.observe(r);
  }), v(() => {
    n == null || n.disconnect();
  }), {
    isVisible: o
  };
}
const k = /* @__PURE__ */ p({
  __name: "Emerge",
  props: {
    root: {
      type: String,
      default: void 0
    },
    triggerOffset: {
      type: String,
      default: "0px"
    },
    threshold: {
      type: [Number, Array],
      default: 0,
      validator: (t) => {
        const e = (o) => o >= 0 && o <= 1;
        return Array.isArray(t) ? t.every(e) : e(t);
      }
    },
    trigger: {
      type: String,
      default: void 0
    },
    tag: {
      type: [String, Object],
      default: "div"
    },
    direction: {
      type: String,
      default: "vertical",
      validator: (t) => ["vertical", "horizontal"].includes(t)
    },
    moveAmount: {
      type: String,
      default: "3rem"
    },
    finalMoveAmount: {
      type: String,
      default: "0"
    },
    animationDuration: {
      type: Number,
      default: 1e3
    },
    animationDelay: {
      type: Number,
      default: 0
    },
    timingFunction: {
      type: String,
      default: "ease"
    },
    blockHoverOnEnter: {
      type: Boolean,
      default: !0
    },
    componentProps: {
      type: Object,
      default: () => ({})
    }
  },
  setup(t) {
    const e = t, o = s(null), n = s(!1), r = y({
      name: "vue-emerge-animation",
      duration: `${e.animationDuration}ms`,
      delay: `${e.animationDelay}ms`,
      timingFunction: e.timingFunction
    }), { isVisible: a } = A(o, {
      root: e.root,
      triggerOffset: e.triggerOffset,
      threshold: e.threshold,
      trigger: e.trigger
    }), u = () => {
      n.value = !0;
    };
    h(
      a,
      (i) => {
        if (i) {
          if (!e.blockHoverOnEnter) return;
          setTimeout(() => {
            u();
          }, e.animationDuration + e.animationDelay);
        }
      },
      { once: !0 }
    );
    const m = l(() => `translate${e.direction === "horizontal" ? "X" : "Y"}(${e.moveAmount})`), c = l(() => e.finalMoveAmount === "0" || !e.finalMoveAmount ? "translate(0, 0)" : `translate${e.direction === "horizontal" ? "X" : "Y"}(${e.finalMoveAmount})`), g = l(() => e.blockHoverOnEnter ? "none" : "auto"), f = l(() => {
      const i = {
        "--vue-emerge-initial-transform": m.value,
        "--vue-emerge-final-transform": c.value,
        "--vue-emerge-animation-name": r.name,
        "--vue-emerge-animation-duration": r.duration,
        "--vue-emerge-animation-delay": r.delay,
        "--vue-emerge-timing-function": r.timingFunction,
        "--vue-emerge-pointer-events": g.value
      };
      return a.value ? i : {
        transform: m.value,
        ...i
      };
    });
    return (i, M) => (O(), b(S(t.tag), x({
      ref_key: "element",
      ref: o,
      style: [{ opacity: "0" }, f.value],
      class: ["vue-emerge", { "vue-emerge--animated": E(a), "vue-emerge--animation-completed": n.value }]
    }, t.componentProps), {
      default: $(() => [
        w(i.$slots, "default", {}, void 0, !0)
      ]),
      _: 3
    }, 16, ["style", "class"]));
  }
}), _ = (t, e) => {
  const o = t.__vccOpts || t;
  for (const [n, r] of e)
    o[n] = r;
  return o;
}, D = /* @__PURE__ */ _(k, [["__scopeId", "data-v-45cb40b6"]]), T = {
  install(t) {
    t.component("Emerge", D);
  }
};
export {
  D as Emerge,
  T as default
};