@vueuse/components
Version:
Renderless components for VueUse
1,141 lines (1,080 loc) • 33.9 kB
JavaScript
(function(exports, __vueuse_core, vue, __vueuse_shared) {
//#region rolldown:runtime
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
//#endregion
__vueuse_core = __toESM(__vueuse_core);
vue = __toESM(vue);
__vueuse_shared = __toESM(__vueuse_shared);
//#region ../core/onClickOutside/component.ts
const OnClickOutside = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, emit }) => {
const target = (0, vue.shallowRef)();
(0, __vueuse_core.onClickOutside)(target, (e) => {
emit("trigger", e);
}, props.options);
return () => {
if (slots.default) return (0, vue.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 = (0, __vueuse_core.onClickOutside)(el, binding.value, { capture });
else {
const [handler, options] = binding.value;
stop = (0, __vueuse_core.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") (0, __vueuse_core.onKeyStroke)(keys, binding.value, { target: el });
else {
const [handler, options] = binding.value;
(0, __vueuse_core.onKeyStroke)(keys, handler, {
target: el,
...options
});
}
} };
//#endregion
//#region ../core/onLongPress/component.ts
const OnLongPress = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, emit }) => {
const target = (0, vue.shallowRef)();
const data = (0, __vueuse_core.onLongPress)(target, (e) => {
emit("trigger", e);
}, props.options);
return () => {
if (slots.default) return (0, vue.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") (0, __vueuse_core.onLongPress)(el, binding.value, { modifiers: binding.modifiers });
else (0, __vueuse_core.onLongPress)(el, ...binding.value);
} };
/** @deprecated use `vOnLongPress` instead */
const VOnLongPress = vOnLongPress;
//#endregion
//#region ../core/useActiveElement/component.ts
const UseActiveElement = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)({ element: (0, __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.useBattery)(props));
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UseBattery",
props: ["navigator"]
});
//#endregion
//#region ../core/useBrowserLocation/component.ts
const UseBrowserLocation = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.useBrowserLocation)(props));
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UseBrowserLocation",
props: ["window"]
});
//#endregion
//#region ../core/useClipboard/component.ts
const UseClipboard = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const mode = (0, __vueuse_core.useColorMode)(props);
const data = (0, vue.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const isDark = (0, __vueuse_core.useDark)(props);
const data = (0, vue.reactive)({
isDark,
toggleDark: (0, __vueuse_shared.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.useDeviceOrientation)(props));
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UseDeviceOrientation",
props: ["window"]
});
//#endregion
//#region ../core/useDevicePixelRatio/component.ts
const UseDevicePixelRatio = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.useDevicePixelRatio)(props));
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UseDevicePixelRatio",
props: ["window"]
});
//#endregion
//#region ../core/useDevicesList/component.ts
const UseDevicesList = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)({ visibility: (0, __vueuse_core.useDocumentVisibility)(props) });
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UseDocumentVisibility",
props: ["document"]
});
//#endregion
//#region ../core/useDraggable/component.ts
const UseDraggable = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const target = (0, vue.shallowRef)();
const handle = (0, vue.computed)(() => {
var _toValue;
return (_toValue = (0, vue.toValue)(props.handle)) !== null && _toValue !== void 0 ? _toValue : target.value;
});
const containerElement = (0, vue.computed)(() => {
var _ref;
return (_ref = props.containerElement) !== null && _ref !== void 0 ? _ref : void 0;
});
const disabled = (0, vue.computed)(() => !!props.disabled);
const storageValue = props.storageKey && (0, __vueuse_core.useStorage)(props.storageKey, (0, vue.toValue)(props.initialValue) || {
x: 0,
y: 0
}, __vueuse_core.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 = (0, vue.reactive)((0, __vueuse_core.useDraggable)(target, {
...props,
handle,
initialValue,
onEnd,
disabled,
containerElement
}));
return () => {
if (slots.default) return (0, vue.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const target = (0, vue.shallowRef)();
const data = (0, vue.reactive)((0, __vueuse_core.useElementBounding)(target, props));
return () => {
if (slots.default) return (0, vue.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 } = (0, __vueuse_core.useElementBounding)(el, options);
(0, vue.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") (0, vue.watch)((0, __vueuse_core.useElementHover)(el), (v) => value(v));
else {
const [handler, options] = value;
(0, vue.watch)((0, __vueuse_core.useElementHover)(el, options), (v) => handler(v));
}
} };
//#endregion
//#region ../core/useElementSize/component.ts
const UseElementSize = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
var _toValue, _toValue2;
const target = (0, vue.shallowRef)();
const { width, height } = (0, vue.toRefs)(props);
const data = (0, vue.reactive)((0, __vueuse_core.useElementSize)(target, {
width: (_toValue = (0, vue.toValue)(width)) !== null && _toValue !== void 0 ? _toValue : 0,
height: (_toValue2 = (0, vue.toValue)(height)) !== null && _toValue2 !== void 0 ? _toValue2 : 0
}, {
box: props.box,
window: props.window
}));
return () => {
if (slots.default) return (0, vue.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 } = (0, __vueuse_core.useElementSize)(el, ...typeof binding.value === "function" ? [] : binding.value.slice(1));
(0, vue.watch)([width, height], ([width$1, height$1]) => handler({
width: width$1,
height: height$1
}));
} };
//#endregion
//#region ../core/useElementVisibility/component.ts
const UseElementVisibility = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const target = (0, vue.shallowRef)();
const data = (0, vue.reactive)({ isVisible: (0, __vueuse_core.useElementVisibility)(target, props) });
return () => {
if (slots.default) return (0, vue.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;
(0, vue.watch)((0, __vueuse_core.useElementVisibility)(el), (v) => handler(v), { immediate: true });
} else {
const [handler, options] = binding.value;
(0, vue.watch)((0, __vueuse_core.useElementVisibility)(el, options), (v) => handler(v), { immediate: true });
}
} };
//#endregion
//#region ../core/useEyeDropper/component.ts
const UseEyeDropper = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.useEyeDropper)(props));
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UseEyeDropper",
props: ["initialValue"]
});
//#endregion
//#region ../core/useFullscreen/component.ts
const UseFullscreen = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const target = (0, vue.shallowRef)();
const data = (0, vue.reactive)((0, __vueuse_core.useFullscreen)(target, props));
return () => {
if (slots.default) return (0, vue.h)(props.as || "div", { ref: target }, slots.default(data));
};
}, {
name: "UseFullscreen",
props: [
"as",
"autoExit",
"document"
]
});
//#endregion
//#region ../core/useGeolocation/component.ts
const UseGeolocation = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.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 (0, vue.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") (0, __vueuse_core.useInfiniteScroll)(el, binding.value);
else (0, __vueuse_core.useInfiniteScroll)(el, ...binding.value);
} };
//#endregion
//#region ../core/useIntersectionObserver/directive.ts
const vIntersectionObserver = { mounted(el, binding) {
if (typeof binding.value === "function") (0, __vueuse_core.useIntersectionObserver)(el, binding.value);
else (0, __vueuse_core.useIntersectionObserver)(el, ...binding.value);
} };
//#endregion
//#region ../core/useMouse/component.ts
const UseMouse = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const target = (0, vue.shallowRef)();
const data = (0, vue.reactive)((0, __vueuse_core.useMouseInElement)(target, props));
return () => {
if (slots.default) return (0, vue.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;
(0, vue.watch)((0, __vueuse_shared.reactiveOmit)((0, vue.reactive)((0, __vueuse_core.useMouseInElement)(el, options)), "stop"), (val) => handler(val));
} };
//#endregion
//#region ../core/useMousePressed/component.ts
const UseMousePressed = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const target = (0, vue.shallowRef)();
const data = (0, vue.reactive)((0, __vueuse_core.useMousePressed)({
...props,
target
}));
return () => {
if (slots.default) return (0, vue.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.useNetwork)(props));
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UseNetwork",
props: ["window"]
});
//#endregion
//#region ../core/useNow/component.ts
const UseNow = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const { object } = (0, __vueuse_shared.toRefs)(props);
const url = (0, __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots, emit }) => {
const data = (0, vue.reactive)((0, __vueuse_core.useOffsetPagination)({
...props,
total: (0, vue.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)({ isOnline: (0, __vueuse_core.useOnline)(props) });
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UseOnline",
props: ["window"]
});
//#endregion
//#region ../core/usePageLeave/component.ts
const UsePageLeave = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)({ isLeft: (0, __vueuse_core.usePageLeave)(props) });
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UsePageLeave",
props: ["window"]
});
//#endregion
//#region ../core/usePointer/component.ts
const UsePointer = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const el = (0, vue.shallowRef)(null);
const data = (0, vue.reactive)((0, __vueuse_core.usePointer)({
...props,
target: props.target === "self" ? el : __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const target = (0, vue.shallowRef)();
const data = (0, vue.reactive)((0, __vueuse_core.usePointerLock)(target));
return () => {
if (slots.default) return (0, vue.h)(props.as || "div", { ref: target }, slots.default(data));
};
}, {
name: "UsePointerLock",
props: ["as", "document"]
});
//#endregion
//#region ../core/usePreferredColorScheme/component.ts
const UsePreferredColorScheme = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)({ colorScheme: (0, __vueuse_core.usePreferredColorScheme)(props) });
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UsePreferredColorScheme",
props: ["window"]
});
//#endregion
//#region ../core/usePreferredContrast/component.ts
const UsePreferredContrast = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)({ contrast: (0, __vueuse_core.usePreferredContrast)(props) });
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UsePreferredContrast",
props: ["window"]
});
//#endregion
//#region ../core/usePreferredDark/component.ts
const UsePreferredDark = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)({ prefersDark: (0, __vueuse_core.usePreferredDark)(props) });
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UsePreferredDark",
props: ["window"]
});
//#endregion
//#region ../core/usePreferredLanguages/component.ts
const UsePreferredLanguages = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)({ languages: (0, __vueuse_core.usePreferredLanguages)(props) });
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UsePreferredLanguages",
props: ["window"]
});
//#endregion
//#region ../core/usePreferredReducedMotion/component.ts
const UsePreferredReducedMotion = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)({ motion: (0, __vueuse_core.usePreferredReducedMotion)(props) });
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UsePreferredReducedMotion",
props: ["window"]
});
//#endregion
//#region ../core/usePreferredReducedTransparency/component.ts
const UsePreferredReducedTransparency = /* @__PURE__ */ (0, vue.defineComponent)({
name: "UsePreferredReducedTransparency",
setup(props, { slots }) {
const data = (0, vue.reactive)({ transparency: (0, __vueuse_core.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") (0, __vueuse_core.useResizeObserver)(el, binding.value);
else (0, __vueuse_core.useResizeObserver)(el, ...binding.value);
} };
//#endregion
//#region ../core/useScreenSafeArea/component.ts
const UseScreenSafeArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.useScreenSafeArea)());
return () => {
if (slots.default) return (0, vue.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 = (0, __vueuse_core.useScroll)(el, {
onScroll() {
handler(state);
},
onStop() {
handler(state);
}
});
} else {
const [handler, options] = binding.value;
const state = (0, __vueuse_core.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 = (0, vue.shallowRef)(false);
return (el, binding) => {
state.value = binding.value;
if (isMounted) return;
isMounted = true;
const isLocked = (0, __vueuse_core.useScrollLock)(el, binding.value);
(0, vue.watch)(state, (v) => isLocked.value = v);
};
}
const vScrollLock = onScrollLock();
//#endregion
//#region ../core/useTimeAgo/component.ts
const UseTimeAgo = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.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__ */ (0, vue.defineComponent)((props, { slots, expose }) => {
const { list: listRef } = (0, vue.toRefs)(props);
const { list, containerProps, wrapperProps, scrollTo } = (0, __vueuse_core.useVirtualList)(listRef, props.options);
expose({ scrollTo });
if (containerProps.style && typeof containerProps.style === "object" && !Array.isArray(containerProps.style)) containerProps.style.height = props.height || "300px";
return () => (0, vue.h)("div", { ...containerProps }, [(0, vue.h)("div", { ...wrapperProps.value }, list.value.map((item) => (0, vue.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__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)({ focused: (0, __vueuse_core.useWindowFocus)(props) });
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UseWindowFocus",
props: ["window"]
});
//#endregion
//#region ../core/useWindowSize/component.ts
const UseWindowSize = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
const data = (0, vue.reactive)((0, __vueuse_core.useWindowSize)(props));
return () => {
if (slots.default) return slots.default(data);
};
}, {
name: "UseWindowSize",
props: [
"includeScrollbar",
"initialHeight",
"initialWidth",
"listenOrientation",
"type",
"window"
]
});
//#endregion
exports.OnClickOutside = OnClickOutside;
exports.OnLongPress = OnLongPress;
exports.UseActiveElement = UseActiveElement;
exports.UseBattery = UseBattery;
exports.UseBrowserLocation = UseBrowserLocation;
exports.UseClipboard = UseClipboard;
exports.UseColorMode = UseColorMode;
exports.UseDark = UseDark;
exports.UseDeviceMotion = UseDeviceMotion;
exports.UseDeviceOrientation = UseDeviceOrientation;
exports.UseDevicePixelRatio = UseDevicePixelRatio;
exports.UseDevicesList = UseDevicesList;
exports.UseDocumentVisibility = UseDocumentVisibility;
exports.UseDraggable = UseDraggable;
exports.UseElementBounding = UseElementBounding;
exports.UseElementSize = UseElementSize;
exports.UseElementVisibility = UseElementVisibility;
exports.UseEyeDropper = UseEyeDropper;
exports.UseFullscreen = UseFullscreen;
exports.UseGeolocation = UseGeolocation;
exports.UseIdle = UseIdle;
exports.UseImage = UseImage;
exports.UseMouse = UseMouse;
exports.UseMouseInElement = UseMouseInElement;
exports.UseMousePressed = UseMousePressed;
exports.UseNetwork = UseNetwork;
exports.UseNow = UseNow;
exports.UseObjectUrl = UseObjectUrl;
exports.UseOffsetPagination = UseOffsetPagination;
exports.UseOnline = UseOnline;
exports.UsePageLeave = UsePageLeave;
exports.UsePointer = UsePointer;
exports.UsePointerLock = UsePointerLock;
exports.UsePreferredColorScheme = UsePreferredColorScheme;
exports.UsePreferredContrast = UsePreferredContrast;
exports.UsePreferredDark = UsePreferredDark;
exports.UsePreferredLanguages = UsePreferredLanguages;
exports.UsePreferredReducedMotion = UsePreferredReducedMotion;
exports.UsePreferredReducedTransparency = UsePreferredReducedTransparency;
exports.UseScreenSafeArea = UseScreenSafeArea;
exports.UseTimeAgo = UseTimeAgo;
exports.UseTimestamp = UseTimestamp;
exports.UseVirtualList = UseVirtualList;
exports.UseWindowFocus = UseWindowFocus;
exports.UseWindowSize = UseWindowSize;
exports.VOnClickOutside = VOnClickOutside;
exports.VOnLongPress = VOnLongPress;
exports.vElementBounding = vElementBounding;
exports.vElementHover = vElementHover;
exports.vElementSize = vElementSize;
exports.vElementVisibility = vElementVisibility;
exports.vInfiniteScroll = vInfiniteScroll;
exports.vIntersectionObserver = vIntersectionObserver;
exports.vMouseInElement = vMouseInElement;
exports.vOnClickOutside = vOnClickOutside;
exports.vOnKeyStroke = vOnKeyStroke;
exports.vOnLongPress = vOnLongPress;
exports.vResizeObserver = vResizeObserver;
exports.vScroll = vScroll;
exports.vScrollLock = vScrollLock;
})(this.VueUse = this.VueUse || {}, VueUse, Vue, VueUse);