taos/packages/vue/dist/index.mjs

TAOS - Tailwind CSS Animation on Scroll Library

import { getCurrentScope as A, onScopeDispose as S, unref as b, ref as u, computed as v, watch as y, defineComponent as N, onMounted as C, onUpdated as O, h as E } from "vue";
function T(e) {
  return A() ? (S(e), !0) : !1;
}
function w(e) {
  return typeof e == "function" ? e() : b(e);
}
const W = typeof window < "u" && typeof document < "u";
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
const j = Object.prototype.toString, Y = (e) => j.call(e) === "[object Object]", x = () => {
};
function L(e) {
  var t;
  const n = w(e);
  return (t = n == null ? void 0 : n.$el) != null ? t : n;
}
const g = W ? window : void 0;
function X(...e) {
  let t, n, o, r;
  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([n, o, r] = e, t = g) : [t, n, o, r] = e, !t)
    return x;
  Array.isArray(n) || (n = [n]), Array.isArray(o) || (o = [o]);
  const s = [], l = () => {
    s.forEach((i) => i()), s.length = 0;
  }, a = (i, c, p, m) => (i.addEventListener(c, p, m), () => i.removeEventListener(c, p, m)), f = y(
    () => [L(t), w(r)],
    ([i, c]) => {
      if (l(), !i)
        return;
      const p = Y(c) ? { ...c } : c;
      s.push(
        ...n.flatMap((m) => o.map((h) => a(i, m, h, p)))
      );
    },
    { immediate: !0, flush: "post" }
  ), d = () => {
    f(), l();
  };
  return T(d), d;
}
function k(e = {}) {
  const { window: t = g, behavior: n = "auto" } = e;
  if (!t)
    return {
      x: u(0),
      y: u(0)
    };
  const o = u(t.scrollX), r = u(t.scrollY), s = v({
    get() {
      return o.value;
    },
    set(a) {
      scrollTo({ left: a, behavior: n });
    }
  }), l = v({
    get() {
      return r.value;
    },
    set(a) {
      scrollTo({ top: a, behavior: n });
    }
  });
  return X(
    t,
    "scroll",
    () => {
      o.value = t.scrollX, r.value = t.scrollY;
    },
    {
      capture: !1,
      passive: !0
    }
  ), { x: s, y: l };
}
const B = N({
  name: "TAOS",
  inheritAttrs: !0,
  props: {
    as: {
      type: String,
      default: "div"
    },
    className: {
      type: String,
      default: ""
    },
    offset: {
      type: Number,
      default: 0
    }
  },
  setup(e) {
    const t = u(null);
    let n = u(""), o = u(null);
    const { y: r } = k(), s = (d) => d.replaceAll("taos:", ""), l = e.className + " taos-init", a = s(l);
    C(() => {
      n.value = s(e.className) + " !duration-[0ms] !delay-[0ms]", window.requestAnimationFrame(
        () => o.value = t.value.getBoundingClientRect().top - window.innerHeight + e.offset + window.scrollY
      );
    });
    let f = !1;
    return O(() => {
      if (!f) {
        f = !0, window.requestAnimationFrame(() => {
          n.value = l;
        });
        return;
      }
    }), y(r, () => {
      if (f && r.value > o.value) {
        n.value = l;
        return;
      }
      n.value = a;
    }), {
      root: t,
      className: n,
      y: r
    };
  },
  render() {
    var e, t;
    return E(
      this.as,
      {
        ref: "root",
        className: this.className
      },
      (t = (e = this.$slots).default) == null ? void 0 : t.call(e)
    );
  }
});
export {
  B as TAOS
};