@vueuse/components/dist/index.js

Renderless components for VueUse

import { defaultWindow, isClient, onClickOutside, onKeyStroke, onLongPress, useActiveElement, useBattery, useBrowserLocation, useClipboard, useColorMode, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useDraggable, useElementBounding, useElementHover, useElementSize, useElementVisibility, useEyeDropper, useFullscreen, useGeolocation, useIdle, useImage, useInfiniteScroll, useIntersectionObserver, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePreferredLanguages, usePreferredReducedMotion, usePreferredReducedTransparency, useResizeObserver, useScreenSafeArea, useScroll, useScrollLock, useStorage, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from "@vueuse/core";
import { computed, defineComponent, h, reactive, shallowRef, toRefs, toValue, watch } from "vue";
import { reactiveOmit, toRefs as toRefs$1, useToggle } from "@vueuse/shared";

//#region ../core/onClickOutside/component.ts
const OnClickOutside = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
	const target = shallowRef();
	onClickOutside(target, (e) => {
		emit("trigger", e);
	}, props.options);
	return () => {
		if (slots.default) return h(props.as || "div", { ref: target }, slots.default());
	};
}, {
	name: "OnClickOutside",
	props: ["as", "options"],
	emits: ["trigger"]
});

//#endregion
//#region ../core/onClickOutside/directive.ts
const stopClickOutsideMap = /* @__PURE__ */ new WeakMap();
const vOnClickOutside = {
	mounted(el, binding) {
		const capture = !binding.modifiers.bubble;
		let stop;
		if (typeof binding.value === "function") stop = onClickOutside(el, binding.value, { capture });
		else {
			const [handler, options] = binding.value;
			stop = onClickOutside(el, handler, Object.assign({ capture }, options));
		}
		stopClickOutsideMap.set(el, stop);
	},
	unmounted(el) {
		const stop = stopClickOutsideMap.get(el);
		if (stop && typeof stop === "function") stop();
		else stop === null || stop === void 0 || stop.stop();
		stopClickOutsideMap.delete(el);
	}
};
/** @deprecated use `vOnClickOutside` instead */
const VOnClickOutside = vOnClickOutside;

//#endregion
//#region ../core/onKeyStroke/directive.ts
const vOnKeyStroke = { mounted(el, binding) {
	var _binding$arg$split, _binding$arg;
	const keys = (_binding$arg$split = (_binding$arg = binding.arg) === null || _binding$arg === void 0 ? void 0 : _binding$arg.split(",")) !== null && _binding$arg$split !== void 0 ? _binding$arg$split : true;
	if (typeof binding.value === "function") onKeyStroke(keys, binding.value, { target: el });
	else {
		const [handler, options] = binding.value;
		onKeyStroke(keys, handler, {
			target: el,
			...options
		});
	}
} };

//#endregion
//#region ../core/onLongPress/component.ts
const OnLongPress = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
	const target = shallowRef();
	const data = onLongPress(target, (e) => {
		emit("trigger", e);
	}, props.options);
	return () => {
		if (slots.default) return h(props.as || "div", { ref: target }, slots.default(data));
	};
}, {
	name: "OnLongPress",
	props: ["as", "options"],
	emits: ["trigger"]
});

//#endregion
//#region ../core/onLongPress/directive.ts
const vOnLongPress = { mounted(el, binding) {
	if (typeof binding.value === "function") onLongPress(el, binding.value, { modifiers: binding.modifiers });
	else onLongPress(el, ...binding.value);
} };
/** @deprecated use `vOnLongPress` instead */
const VOnLongPress = vOnLongPress;

//#endregion
//#region ../core/useActiveElement/component.ts
const UseActiveElement = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive({ element: useActiveElement(props) });
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseActiveElement",
	props: [
		"deep",
		"triggerOnRemoval",
		"window",
		"document"
	]
});

//#endregion
//#region ../core/useBattery/component.ts
const UseBattery = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useBattery(props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseBattery",
	props: ["navigator"]
});

//#endregion
//#region ../core/useBrowserLocation/component.ts
const UseBrowserLocation = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useBrowserLocation(props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseBrowserLocation",
	props: ["window"]
});

//#endregion
//#region ../core/useClipboard/component.ts
const UseClipboard = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useClipboard(props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseClipboard",
	props: [
		"source",
		"read",
		"navigator",
		"copiedDuring",
		"legacy"
	]
});

//#endregion
//#region ../core/useColorMode/component.ts
const UseColorMode = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const mode = useColorMode(props);
	const data = reactive({
		mode,
		system: mode.system,
		store: mode.store
	});
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseColorMode",
	props: [
		"attribute",
		"deep",
		"disableTransition",
		"emitAuto",
		"eventFilter",
		"flush",
		"initOnMounted",
		"initialValue",
		"listenToStorageChanges",
		"mergeDefaults",
		"modes",
		"onChanged",
		"onError",
		"selector",
		"serializer",
		"shallow",
		"storage",
		"storageKey",
		"storageRef",
		"window",
		"writeDefaults"
	]
});

//#endregion
//#region ../core/useDark/component.ts
const UseDark = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const isDark = useDark(props);
	const data = reactive({
		isDark,
		toggleDark: useToggle(isDark)
	});
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseDark",
	props: [
		"attribute",
		"deep",
		"disableTransition",
		"emitAuto",
		"eventFilter",
		"flush",
		"initOnMounted",
		"initialValue",
		"listenToStorageChanges",
		"mergeDefaults",
		"onChanged",
		"onError",
		"selector",
		"serializer",
		"shallow",
		"storage",
		"storageKey",
		"storageRef",
		"valueDark",
		"valueLight",
		"window",
		"writeDefaults"
	]
});

//#endregion
//#region ../core/useDeviceMotion/component.ts
const UseDeviceMotion = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = useDeviceMotion(props);
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseDeviceMotion",
	props: [
		"eventFilter",
		"requestPermissions",
		"window"
	]
});

//#endregion
//#region ../core/useDeviceOrientation/component.ts
const UseDeviceOrientation = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useDeviceOrientation(props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseDeviceOrientation",
	props: ["window"]
});

//#endregion
//#region ../core/useDevicePixelRatio/component.ts
const UseDevicePixelRatio = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useDevicePixelRatio(props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseDevicePixelRatio",
	props: ["window"]
});

//#endregion
//#region ../core/useDevicesList/component.ts
const UseDevicesList = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useDevicesList(props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseDevicesList",
	props: [
		"constraints",
		"navigator",
		"onUpdated",
		"requestPermissions"
	]
});

//#endregion
//#region ../core/useDocumentVisibility/component.ts
const UseDocumentVisibility = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive({ visibility: useDocumentVisibility(props) });
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseDocumentVisibility",
	props: ["document"]
});

//#endregion
//#region ../core/useDraggable/component.ts
const UseDraggable = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const target = shallowRef();
	const handle = computed(() => {
		var _toValue;
		return (_toValue = toValue(props.handle)) !== null && _toValue !== void 0 ? _toValue : target.value;
	});
	const containerElement = computed(() => {
		var _ref;
		return (_ref = props.containerElement) !== null && _ref !== void 0 ? _ref : void 0;
	});
	const disabled = computed(() => !!props.disabled);
	const storageValue = props.storageKey && useStorage(props.storageKey, toValue(props.initialValue) || {
		x: 0,
		y: 0
	}, isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0);
	const initialValue = storageValue || props.initialValue || {
		x: 0,
		y: 0
	};
	const onEnd = (position, event) => {
		var _props$onEnd;
		(_props$onEnd = props.onEnd) === null || _props$onEnd === void 0 || _props$onEnd.call(props, position, event);
		if (!storageValue) return;
		storageValue.value.x = position.x;
		storageValue.value.y = position.y;
	};
	const data = reactive(useDraggable(target, {
		...props,
		handle,
		initialValue,
		onEnd,
		disabled,
		containerElement
	}));
	return () => {
		if (slots.default) return h(props.as || "div", {
			ref: target,
			style: `touch-action:none;${data.style}`
		}, slots.default(data));
	};
}, {
	name: "UseDraggable",
	props: [
		"storageKey",
		"storageType",
		"initialValue",
		"exact",
		"preventDefault",
		"stopPropagation",
		"pointerTypes",
		"as",
		"handle",
		"axis",
		"onStart",
		"onMove",
		"onEnd",
		"disabled",
		"buttons",
		"containerElement",
		"capture",
		"draggingElement"
	]
});

//#endregion
//#region ../core/useElementBounding/component.ts
const UseElementBounding = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const target = shallowRef();
	const data = reactive(useElementBounding(target, props));
	return () => {
		if (slots.default) return h(props.as || "div", { ref: target }, slots.default(data));
	};
}, {
	name: "UseElementBounding",
	props: [
		"as",
		"immediate",
		"reset",
		"updateTiming",
		"windowResize",
		"windowScroll"
	]
});

//#endregion
//#region ../core/useElementBounding/directive.ts
const vElementBounding = { mounted(el, binding) {
	const [handler, options] = typeof binding.value === "function" ? [binding.value, {}] : binding.value;
	const { height, bottom, left, right, top, width, x, y } = useElementBounding(el, options);
	watch([
		height,
		bottom,
		left,
		right,
		top,
		width,
		x,
		y
	], () => handler({
		height,
		bottom,
		left,
		right,
		top,
		width,
		x,
		y
	}));
} };

//#endregion
//#region ../core/useElementHover/directive.ts
const vElementHover = { mounted(el, binding) {
	const value = binding.value;
	if (typeof value === "function") watch(useElementHover(el), (v) => value(v));
	else {
		const [handler, options] = value;
		watch(useElementHover(el, options), (v) => handler(v));
	}
} };

//#endregion
//#region ../core/useElementSize/component.ts
const UseElementSize = /* @__PURE__ */ defineComponent((props, { slots }) => {
	var _toValue, _toValue2;
	const target = shallowRef();
	const { width, height } = toRefs(props);
	const data = reactive(useElementSize(target, {
		width: (_toValue = toValue(width)) !== null && _toValue !== void 0 ? _toValue : 0,
		height: (_toValue2 = toValue(height)) !== null && _toValue2 !== void 0 ? _toValue2 : 0
	}, {
		box: props.box,
		window: props.window
	}));
	return () => {
		if (slots.default) return h(props.as || "div", { ref: target }, slots.default(data));
	};
}, {
	name: "UseElementSize",
	props: [
		"as",
		"box",
		"height",
		"width",
		"window"
	]
});

//#endregion
//#region ../core/useElementSize/directive.ts
const vElementSize = { mounted(el, binding) {
	var _binding$value;
	const handler = typeof binding.value === "function" ? binding.value : (_binding$value = binding.value) === null || _binding$value === void 0 ? void 0 : _binding$value[0];
	const { width, height } = useElementSize(el, ...typeof binding.value === "function" ? [] : binding.value.slice(1));
	watch([width, height], ([width$1, height$1]) => handler({
		width: width$1,
		height: height$1
	}));
} };

//#endregion
//#region ../core/useElementVisibility/component.ts
const UseElementVisibility = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const target = shallowRef();
	const data = reactive({ isVisible: useElementVisibility(target, props) });
	return () => {
		if (slots.default) return h(props.as || "div", { ref: target }, slots.default(data));
	};
}, {
	name: "UseElementVisibility",
	props: [
		"as",
		"once",
		"rootMargin",
		"scrollTarget",
		"threshold",
		"window"
	]
});

//#endregion
//#region ../core/useElementVisibility/directive.ts
const vElementVisibility = { mounted(el, binding) {
	if (typeof binding.value === "function") {
		const handler = binding.value;
		watch(useElementVisibility(el), (v) => handler(v), { immediate: true });
	} else {
		const [handler, options] = binding.value;
		watch(useElementVisibility(el, options), (v) => handler(v), { immediate: true });
	}
} };

//#endregion
//#region ../core/useEyeDropper/component.ts
const UseEyeDropper = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useEyeDropper(props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseEyeDropper",
	props: ["initialValue"]
});

//#endregion
//#region ../core/useFullscreen/component.ts
const UseFullscreen = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const target = shallowRef();
	const data = reactive(useFullscreen(target, props));
	return () => {
		if (slots.default) return h(props.as || "div", { ref: target }, slots.default(data));
	};
}, {
	name: "UseFullscreen",
	props: [
		"as",
		"autoExit",
		"document"
	]
});

//#endregion
//#region ../core/useGeolocation/component.ts
const UseGeolocation = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useGeolocation(props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseGeolocation",
	props: [
		"enableHighAccuracy",
		"immediate",
		"maximumAge",
		"navigator",
		"timeout"
	]
});

//#endregion
//#region ../core/useIdle/component.ts
const UseIdle = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useIdle(props.timeout, props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseIdle",
	props: [
		"eventFilter",
		"events",
		"initialState",
		"listenForVisibilityChange",
		"timeout",
		"window"
	]
});

//#endregion
//#region ../core/useImage/component.ts
const UseImage = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useImage(props));
	return () => {
		if (data.isLoading && slots.loading) return slots.loading(data);
		else if (data.error && slots.error) return slots.error(data.error);
		if (slots.default) return slots.default(data);
		return h(props.as || "img", props);
	};
}, {
	name: "UseImage",
	props: [
		"alt",
		"as",
		"class",
		"crossorigin",
		"decoding",
		"fetchPriority",
		"height",
		"ismap",
		"loading",
		"referrerPolicy",
		"sizes",
		"src",
		"srcset",
		"usemap",
		"width"
	]
});

//#endregion
//#region ../core/useInfiniteScroll/directive.ts
const vInfiniteScroll = { mounted(el, binding) {
	if (typeof binding.value === "function") useInfiniteScroll(el, binding.value);
	else useInfiniteScroll(el, ...binding.value);
} };

//#endregion
//#region ../core/useIntersectionObserver/directive.ts
const vIntersectionObserver = { mounted(el, binding) {
	if (typeof binding.value === "function") useIntersectionObserver(el, binding.value);
	else useIntersectionObserver(el, ...binding.value);
} };

//#endregion
//#region ../core/useMouse/component.ts
const UseMouse = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useMouse(props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseMouse",
	props: [
		"eventFilter",
		"initialValue",
		"resetOnTouchEnds",
		"scroll",
		"target",
		"touch",
		"type",
		"window"
	]
});

//#endregion
//#region ../core/useMouseInElement/component.ts
const UseMouseInElement = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const target = shallowRef();
	const data = reactive(useMouseInElement(target, props));
	return () => {
		if (slots.default) return h(props.as || "div", { ref: target }, slots.default(data));
	};
}, {
	name: "UseMouseInElement",
	props: [
		"as",
		"eventFilter",
		"handleOutside",
		"initialValue",
		"resetOnTouchEnds",
		"scroll",
		"target",
		"touch",
		"type",
		"window",
		"windowResize",
		"windowScroll"
	]
});

//#endregion
//#region ../core/useMouseInElement/directive.ts
const vMouseInElement = { mounted(el, binding) {
	const [handler, options] = typeof binding.value === "function" ? [binding.value, {}] : binding.value;
	watch(reactiveOmit(reactive(useMouseInElement(el, options)), "stop"), (val) => handler(val));
} };

//#endregion
//#region ../core/useMousePressed/component.ts
const UseMousePressed = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const target = shallowRef();
	const data = reactive(useMousePressed({
		...props,
		target
	}));
	return () => {
		if (slots.default) return h(props.as || "div", { ref: target }, slots.default(data));
	};
}, {
	name: "UseMousePressed",
	props: [
		"as",
		"capture",
		"drag",
		"initialValue",
		"onPressed",
		"onReleased",
		"touch",
		"window"
	]
});

//#endregion
//#region ../core/useNetwork/component.ts
const UseNetwork = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useNetwork(props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseNetwork",
	props: ["window"]
});

//#endregion
//#region ../core/useNow/component.ts
const UseNow = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useNow({
		...props,
		controls: true
	}));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseNow",
	props: ["immediate", "interval"]
});

//#endregion
//#region ../core/useObjectUrl/component.ts
const UseObjectUrl = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const { object } = toRefs$1(props);
	const url = useObjectUrl(object);
	return () => {
		if (slots.default && url.value) return slots.default(url.value);
	};
}, {
	name: "UseObjectUrl",
	props: ["object"]
});

//#endregion
//#region ../core/useOffsetPagination/component.ts
const UseOffsetPagination = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
	const data = reactive(useOffsetPagination({
		...props,
		total: toValue(props.total) || void 0,
		onPageChange(...args) {
			var _props$onPageChange;
			(_props$onPageChange = props.onPageChange) === null || _props$onPageChange === void 0 || _props$onPageChange.call(props, ...args);
			emit("page-change", ...args);
		},
		onPageSizeChange(...args) {
			var _props$onPageSizeChan;
			(_props$onPageSizeChan = props.onPageSizeChange) === null || _props$onPageSizeChan === void 0 || _props$onPageSizeChan.call(props, ...args);
			emit("page-size-change", ...args);
		},
		onPageCountChange(...args) {
			var _props$onPageCountCha;
			(_props$onPageCountCha = props.onPageCountChange) === null || _props$onPageCountCha === void 0 || _props$onPageCountCha.call(props, ...args);
			emit("page-count-change", ...args);
		}
	}));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseOffsetPagination",
	props: [
		"onPageChange",
		"onPageCountChange",
		"onPageSizeChange",
		"page",
		"pageSize",
		"total"
	]
});

//#endregion
//#region ../core/useOnline/component.ts
const UseOnline = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive({ isOnline: useOnline(props) });
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseOnline",
	props: ["window"]
});

//#endregion
//#region ../core/usePageLeave/component.ts
const UsePageLeave = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive({ isLeft: usePageLeave(props) });
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UsePageLeave",
	props: ["window"]
});

//#endregion
//#region ../core/usePointer/component.ts
const UsePointer = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const el = shallowRef(null);
	const data = reactive(usePointer({
		...props,
		target: props.target === "self" ? el : defaultWindow
	}));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UsePointer",
	props: [
		"initialValue",
		"pointerTypes",
		"target",
		"window"
	]
});

//#endregion
//#region ../core/usePointerLock/component.ts
const UsePointerLock = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const target = shallowRef();
	const data = reactive(usePointerLock(target));
	return () => {
		if (slots.default) return h(props.as || "div", { ref: target }, slots.default(data));
	};
}, {
	name: "UsePointerLock",
	props: ["as", "document"]
});

//#endregion
//#region ../core/usePreferredColorScheme/component.ts
const UsePreferredColorScheme = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive({ colorScheme: usePreferredColorScheme(props) });
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UsePreferredColorScheme",
	props: ["window"]
});

//#endregion
//#region ../core/usePreferredContrast/component.ts
const UsePreferredContrast = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive({ contrast: usePreferredContrast(props) });
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UsePreferredContrast",
	props: ["window"]
});

//#endregion
//#region ../core/usePreferredDark/component.ts
const UsePreferredDark = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive({ prefersDark: usePreferredDark(props) });
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UsePreferredDark",
	props: ["window"]
});

//#endregion
//#region ../core/usePreferredLanguages/component.ts
const UsePreferredLanguages = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive({ languages: usePreferredLanguages(props) });
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UsePreferredLanguages",
	props: ["window"]
});

//#endregion
//#region ../core/usePreferredReducedMotion/component.ts
const UsePreferredReducedMotion = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive({ motion: usePreferredReducedMotion(props) });
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UsePreferredReducedMotion",
	props: ["window"]
});

//#endregion
//#region ../core/usePreferredReducedTransparency/component.ts
const UsePreferredReducedTransparency = /* @__PURE__ */ defineComponent({
	name: "UsePreferredReducedTransparency",
	setup(props, { slots }) {
		const data = reactive({ transparency: usePreferredReducedTransparency() });
		return () => {
			if (slots.default) return slots.default(data);
		};
	}
});

//#endregion
//#region ../core/useResizeObserver/directive.ts
const vResizeObserver = { mounted(el, binding) {
	if (typeof binding.value === "function") useResizeObserver(el, binding.value);
	else useResizeObserver(el, ...binding.value);
} };

//#endregion
//#region ../core/useScreenSafeArea/component.ts
const UseScreenSafeArea = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useScreenSafeArea());
	return () => {
		if (slots.default) return h(props.as || "div", { style: {
			paddingTop: props.top ? data.top : "",
			paddingRight: props.right ? data.right : "",
			paddingBottom: props.bottom ? data.bottom : "",
			paddingLeft: props.left ? data.left : "",
			boxSizing: "border-box",
			maxHeight: "100vh",
			maxWidth: "100vw",
			overflow: "auto"
		} }, slots.default(data));
	};
}, {
	name: "UseScreenSafeArea",
	props: [
		"top",
		"right",
		"bottom",
		"left"
	]
});

//#endregion
//#region ../core/useScroll/directive.ts
const vScroll = { mounted(el, binding) {
	if (typeof binding.value === "function") {
		const handler = binding.value;
		const state = useScroll(el, {
			onScroll() {
				handler(state);
			},
			onStop() {
				handler(state);
			}
		});
	} else {
		const [handler, options] = binding.value;
		const state = useScroll(el, {
			...options,
			onScroll(e) {
				var _options$onScroll;
				(_options$onScroll = options.onScroll) === null || _options$onScroll === void 0 || _options$onScroll.call(options, e);
				handler(state);
			},
			onStop(e) {
				var _options$onStop;
				(_options$onStop = options.onStop) === null || _options$onStop === void 0 || _options$onStop.call(options, e);
				handler(state);
			}
		});
	}
} };

//#endregion
//#region ../core/useScrollLock/directive.ts
function onScrollLock() {
	let isMounted = false;
	const state = shallowRef(false);
	return (el, binding) => {
		state.value = binding.value;
		if (isMounted) return;
		isMounted = true;
		const isLocked = useScrollLock(el, binding.value);
		watch(state, (v) => isLocked.value = v);
	};
}
const vScrollLock = onScrollLock();

//#endregion
//#region ../core/useTimeAgo/component.ts
const UseTimeAgo = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useTimeAgo(() => props.time, {
		...props,
		controls: true
	}));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseTimeAgo",
	props: [
		"fullDateFormatter",
		"max",
		"messages",
		"rounding",
		"showSecond",
		"time",
		"units",
		"updateInterval"
	]
});

//#endregion
//#region ../core/useTimestamp/component.ts
const UseTimestamp = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useTimestamp({
		...props,
		controls: true
	}));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseTimestamp",
	props: [
		"callback",
		"immediate",
		"interval",
		"offset"
	]
});

//#endregion
//#region ../core/useVirtualList/component.ts
const UseVirtualList = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
	const { list: listRef } = toRefs(props);
	const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(listRef, props.options);
	expose({ scrollTo });
	if (containerProps.style && typeof containerProps.style === "object" && !Array.isArray(containerProps.style)) containerProps.style.height = props.height || "300px";
	return () => h("div", { ...containerProps }, [h("div", { ...wrapperProps.value }, list.value.map((item) => h("div", { style: {
		overflow: "hidden",
		height: item.height
	} }, slots.default ? slots.default(item) : "Please set content!")))]);
}, {
	name: "UseVirtualList",
	props: [
		"height",
		"list",
		"options"
	]
});

//#endregion
//#region ../core/useWindowFocus/component.ts
const UseWindowFocus = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive({ focused: useWindowFocus(props) });
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseWindowFocus",
	props: ["window"]
});

//#endregion
//#region ../core/useWindowSize/component.ts
const UseWindowSize = /* @__PURE__ */ defineComponent((props, { slots }) => {
	const data = reactive(useWindowSize(props));
	return () => {
		if (slots.default) return slots.default(data);
	};
}, {
	name: "UseWindowSize",
	props: [
		"includeScrollbar",
		"initialHeight",
		"initialWidth",
		"listenOrientation",
		"type",
		"window"
	]
});

//#endregion
export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UsePreferredReducedTransparency, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, VOnClickOutside, VOnLongPress, vElementBounding, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vMouseInElement, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };