v-spotlight/dist/v-spotlight.js

Tiny reusable Spotlight component for your Vue App

import { defineComponent as l, ref as a, onMounted as d, onUnmounted as p, openBlock as u, createElementBlock as c } from "vue";
const s = "transparent 160px, rgba(0, 0, 0, 0.9) 200px)", v = /* @__PURE__ */ l({
  __name: "VSpotlight",
  setup(o) {
    const r = a(null), n = a(s);
    d(() => {
      window.addEventListener("mousemove", (e) => {
        t(e);
      }), window.addEventListener("mousedown", (e) => {
        e.button === 0 && (n.value = "transparent 130px, rgba(0, 0, 0, 0.95) 150px)", t(e));
      }), window.addEventListener("mouseup", (e) => {
        n.value = s, t(e);
      });
    }), p(() => {
      window.removeEventListener("mousemove", (e) => {
        t(e);
      }), window.removeEventListener("mousedown", (e) => {
        t(e);
      }), window.removeEventListener("mouseup", (e) => {
        n.value = s, t(e);
      });
    });
    const t = (e) => {
      r.value && (r.value.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${n.value}`);
    };
    return (e, g) => (u(), c("div", {
      ref_key: "spotlight",
      ref: r,
      class: "radial pointer-events-none absolute h-screen w-screen"
    }, null, 512));
  }
}), m = (o, r) => {
  const n = o.__vccOpts || o;
  for (const [t, e] of r)
    n[t] = e;
  return n;
}, w = /* @__PURE__ */ m(v, [["__scopeId", "data-v-5d88262e"]]);
let i = !1;
const f = (o) => {
  i || (o.component("VSpotlight", w), i = !0);
};
export {
  w as VSpotlight,
  f as default
};
//# sourceMappingURL=v-spotlight.js.map