v-spotlight/dist/index.js

Vue 3 spotlight overlay component for product tours, feature highlights, onboarding flows, and contextual walkthroughs. TypeScript ESM.

import { createElementBlock, defineComponent, onMounted, onUnmounted, openBlock, ref } from "vue";
// \0/plugin-vue/export-helper
var export_helper_default = (sfc, props) => {
	const target = sfc.__vccOpts || sfc;
	for (const [key, val] of props) target[key] = val;
	return target;
};
// src/components/VSpotlight.vue
const SIZE = "transparent 160px, rgba(0, 0, 0, 0.9) 200px)";
const PRESSED_SIZE = "transparent 130px, rgba(0, 0, 0, 0.95) 150px)";
var VSpotlight_default = /*#__PURE__*/ export_helper_default(/* @__PURE__ */ defineComponent({
	__name: "VSpotlight",
	setup(__props) {
		const spotlight = ref(null);
		const spotlightSize = ref(SIZE);
		const onMouseMove = (e) => {
			updateSpotlight(e);
		};
		const onMouseDown = (e) => {
			if (e.button === 0) {
				spotlightSize.value = PRESSED_SIZE;
				updateSpotlight(e);
			}
		};
		const onMouseUp = (e) => {
			spotlightSize.value = SIZE;
			updateSpotlight(e);
		};
		onMounted(() => {
			window.addEventListener("mousemove", onMouseMove);
			window.addEventListener("mousedown", onMouseDown);
			window.addEventListener("mouseup", onMouseUp);
		});
		onUnmounted(() => {
			window.removeEventListener("mousemove", onMouseMove);
			window.removeEventListener("mousedown", onMouseDown);
			window.removeEventListener("mouseup", onMouseUp);
		});
		const updateSpotlight = (e) => {
			if (spotlight.value) spotlight.value.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize.value}`;
		};
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", {
				ref_key: "spotlight",
				ref: spotlight,
				class: "radial pointer-events-none absolute h-screen w-screen"
			}, null, 512);
		};
	}
}), [["__scopeId", "data-v-0c3a0032"]]);
// src/install.ts
let installed = false;
const install = (app) => {
	if (!installed) {
		app.component("VSpotlight", VSpotlight_default);
		installed = true;
	}
};
export { VSpotlight_default as VSpotlight, install as default };

//# sourceMappingURL=index.js.map