@vueuse/components 12.5.0 → 12.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs +92 -73
- package/index.d.cts +17 -4
- package/index.d.mts +17 -4
- package/index.d.ts +17 -4
- package/index.iife.js +92 -73
- package/index.iife.min.js +1 -1
- package/index.mjs +93 -74
- package/package.json +3 -3
package/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useClipboard, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding as useElementBounding$1, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse as useMouse$1, useMouseInElement as useMouseInElement$1, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, usePreferredReducedTransparency, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
|
|
2
2
|
import { defineComponent, ref, h, toValue, computed, unref, reactive, hasInjectionContext, getCurrentInstance, onMounted, shallowRef, watchEffect, watch, nextTick, toRefs } from 'vue';
|
|
3
|
-
import { isClient, toArray, watchImmediate, isObject, tryOnScopeDispose, noop, isIOS, injectLocal, pxValue, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn, tryOnUnmounted, reactiveOmit } from '@vueuse/shared';
|
|
3
|
+
import { isClient, toArray, watchImmediate, isObject, tryOnScopeDispose, noop, isIOS, injectLocal, pxValue, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, watchOnce, promiseTimeout, until, useDebounceFn, useThrottleFn, tryOnUnmounted, reactiveOmit } from '@vueuse/shared';
|
|
4
4
|
|
|
5
5
|
const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
|
|
6
6
|
name: "OnClickOutside",
|
|
@@ -18,12 +18,12 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
|
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
20
|
|
|
21
|
-
const defaultWindow = isClient ? window :
|
|
21
|
+
const defaultWindow = isClient ? window : void 0;
|
|
22
22
|
|
|
23
23
|
function unrefElement(elRef) {
|
|
24
24
|
var _a;
|
|
25
25
|
const plain = toValue(elRef);
|
|
26
|
-
return (_a = plain == null ?
|
|
26
|
+
return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
function useEventListener(...args) {
|
|
@@ -38,13 +38,13 @@ function useEventListener(...args) {
|
|
|
38
38
|
};
|
|
39
39
|
const firstParamTargets = computed(() => {
|
|
40
40
|
const test = toArray(toValue(args[0])).filter((e) => e != null);
|
|
41
|
-
return test.every((e) => typeof e !== "string") ? test :
|
|
41
|
+
return test.every((e) => typeof e !== "string") ? test : void 0;
|
|
42
42
|
});
|
|
43
43
|
const stopWatch = watchImmediate(
|
|
44
44
|
() => {
|
|
45
45
|
var _a, _b;
|
|
46
46
|
return [
|
|
47
|
-
(_b = (_a = firstParamTargets.value) == null ?
|
|
47
|
+
(_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
|
|
48
48
|
toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
|
|
49
49
|
toArray(unref(firstParamTargets.value ? args[2] : args[1])),
|
|
50
50
|
// @ts-expect-error - TypeScript gets the correct types, but somehow still complains
|
|
@@ -53,7 +53,7 @@ function useEventListener(...args) {
|
|
|
53
53
|
},
|
|
54
54
|
([raw_targets, raw_events, raw_listeners, raw_options]) => {
|
|
55
55
|
cleanup();
|
|
56
|
-
if (!(raw_targets == null ?
|
|
56
|
+
if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
|
|
57
57
|
return;
|
|
58
58
|
const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
|
|
59
59
|
cleanups.push(
|
|
@@ -76,9 +76,10 @@ function useEventListener(...args) {
|
|
|
76
76
|
|
|
77
77
|
let _iOSWorkaround = false;
|
|
78
78
|
function onClickOutside(target, handler, options = {}) {
|
|
79
|
-
const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
|
|
80
|
-
if (!window)
|
|
81
|
-
return noop;
|
|
79
|
+
const { window = defaultWindow, ignore = [], capture = true, detectIframe = false, controls = false } = options;
|
|
80
|
+
if (!window) {
|
|
81
|
+
return controls ? { stop: noop, cancel: noop, trigger: noop } : noop;
|
|
82
|
+
}
|
|
82
83
|
if (isIOS && !_iOSWorkaround) {
|
|
83
84
|
_iOSWorkaround = true;
|
|
84
85
|
const listenerOptions = { passive: true };
|
|
@@ -115,7 +116,7 @@ function onClickOutside(target, handler, options = {}) {
|
|
|
115
116
|
return;
|
|
116
117
|
if (!el || el === event.target || event.composedPath().includes(el))
|
|
117
118
|
return;
|
|
118
|
-
if (event.detail === 0)
|
|
119
|
+
if ("detail" in event && event.detail === 0)
|
|
119
120
|
shouldListen = !shouldIgnore(event);
|
|
120
121
|
if (!shouldListen) {
|
|
121
122
|
shouldListen = true;
|
|
@@ -142,13 +143,26 @@ function onClickOutside(target, handler, options = {}) {
|
|
|
142
143
|
setTimeout(() => {
|
|
143
144
|
var _a;
|
|
144
145
|
const el = unrefElement(target);
|
|
145
|
-
if (((_a = window.document.activeElement) == null ?
|
|
146
|
+
if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement))) {
|
|
146
147
|
handler(event);
|
|
147
148
|
}
|
|
148
149
|
}, 0);
|
|
149
150
|
}, { passive: true })
|
|
150
151
|
].filter(Boolean);
|
|
151
152
|
const stop = () => cleanup.forEach((fn) => fn());
|
|
153
|
+
if (controls) {
|
|
154
|
+
return {
|
|
155
|
+
stop,
|
|
156
|
+
cancel: () => {
|
|
157
|
+
shouldListen = false;
|
|
158
|
+
},
|
|
159
|
+
trigger: (event) => {
|
|
160
|
+
shouldListen = true;
|
|
161
|
+
listener(event);
|
|
162
|
+
shouldListen = false;
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
}
|
|
152
166
|
return stop;
|
|
153
167
|
}
|
|
154
168
|
|
|
@@ -216,7 +230,7 @@ function onKeyStroke(...args) {
|
|
|
216
230
|
const vOnKeyStroke = {
|
|
217
231
|
mounted(el, binding) {
|
|
218
232
|
var _a, _b;
|
|
219
|
-
const keys = (_b = (_a = binding.arg) == null ?
|
|
233
|
+
const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
|
|
220
234
|
if (typeof binding.value === "function") {
|
|
221
235
|
onKeyStroke(keys, binding.value, {
|
|
222
236
|
target: el
|
|
@@ -243,23 +257,23 @@ function onLongPress(target, handler, options) {
|
|
|
243
257
|
function clear() {
|
|
244
258
|
if (timeout) {
|
|
245
259
|
clearTimeout(timeout);
|
|
246
|
-
timeout =
|
|
260
|
+
timeout = void 0;
|
|
247
261
|
}
|
|
248
|
-
posStart =
|
|
249
|
-
startTimestamp =
|
|
262
|
+
posStart = void 0;
|
|
263
|
+
startTimestamp = void 0;
|
|
250
264
|
hasLongPressed = false;
|
|
251
265
|
}
|
|
252
266
|
function onRelease(ev) {
|
|
253
267
|
var _a2, _b2, _c;
|
|
254
268
|
const [_startTimestamp, _posStart, _hasLongPressed] = [startTimestamp, posStart, hasLongPressed];
|
|
255
269
|
clear();
|
|
256
|
-
if (!(options == null ?
|
|
270
|
+
if (!(options == null ? void 0 : options.onMouseUp) || !_posStart || !_startTimestamp)
|
|
257
271
|
return;
|
|
258
|
-
if (((_a2 = options == null ?
|
|
272
|
+
if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
|
|
259
273
|
return;
|
|
260
|
-
if ((_b2 = options == null ?
|
|
274
|
+
if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
|
|
261
275
|
ev.preventDefault();
|
|
262
|
-
if ((_c = options == null ?
|
|
276
|
+
if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
|
|
263
277
|
ev.stopPropagation();
|
|
264
278
|
const dx = ev.x - _posStart.x;
|
|
265
279
|
const dy = ev.y - _posStart.y;
|
|
@@ -268,12 +282,12 @@ function onLongPress(target, handler, options) {
|
|
|
268
282
|
}
|
|
269
283
|
function onDown(ev) {
|
|
270
284
|
var _a2, _b2, _c, _d;
|
|
271
|
-
if (((_a2 = options == null ?
|
|
285
|
+
if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
|
|
272
286
|
return;
|
|
273
287
|
clear();
|
|
274
|
-
if ((_b2 = options == null ?
|
|
288
|
+
if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
|
|
275
289
|
ev.preventDefault();
|
|
276
|
-
if ((_c = options == null ?
|
|
290
|
+
if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
|
|
277
291
|
ev.stopPropagation();
|
|
278
292
|
posStart = {
|
|
279
293
|
x: ev.x,
|
|
@@ -285,28 +299,28 @@ function onLongPress(target, handler, options) {
|
|
|
285
299
|
hasLongPressed = true;
|
|
286
300
|
handler(ev);
|
|
287
301
|
},
|
|
288
|
-
(_d = options == null ?
|
|
302
|
+
(_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
|
|
289
303
|
);
|
|
290
304
|
}
|
|
291
305
|
function onMove(ev) {
|
|
292
306
|
var _a2, _b2, _c, _d;
|
|
293
|
-
if (((_a2 = options == null ?
|
|
307
|
+
if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
|
|
294
308
|
return;
|
|
295
|
-
if (!posStart || (options == null ?
|
|
309
|
+
if (!posStart || (options == null ? void 0 : options.distanceThreshold) === false)
|
|
296
310
|
return;
|
|
297
|
-
if ((_b2 = options == null ?
|
|
311
|
+
if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
|
|
298
312
|
ev.preventDefault();
|
|
299
|
-
if ((_c = options == null ?
|
|
313
|
+
if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
|
|
300
314
|
ev.stopPropagation();
|
|
301
315
|
const dx = ev.x - posStart.x;
|
|
302
316
|
const dy = ev.y - posStart.y;
|
|
303
317
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
304
|
-
if (distance >= ((_d = options == null ?
|
|
318
|
+
if (distance >= ((_d = options == null ? void 0 : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
|
|
305
319
|
clear();
|
|
306
320
|
}
|
|
307
321
|
const listenerOptions = {
|
|
308
|
-
capture: (_a = options == null ?
|
|
309
|
-
once: (_b = options == null ?
|
|
322
|
+
capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
|
|
323
|
+
once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
|
|
310
324
|
};
|
|
311
325
|
const cleanup = [
|
|
312
326
|
useEventListener(elementRef, "pointerdown", onDown, listenerOptions),
|
|
@@ -394,7 +408,7 @@ const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
|
|
|
394
408
|
const data = reactive(useClipboard(props));
|
|
395
409
|
return () => {
|
|
396
410
|
var _a;
|
|
397
|
-
return (_a = slots.default) == null ?
|
|
411
|
+
return (_a = slots.default) == null ? void 0 : _a.call(slots, data);
|
|
398
412
|
};
|
|
399
413
|
}
|
|
400
414
|
});
|
|
@@ -414,7 +428,7 @@ function getSSRHandler(key, fallback) {
|
|
|
414
428
|
const ssrWidthSymbol = Symbol("vueuse-ssr-width");
|
|
415
429
|
function useSSRWidth() {
|
|
416
430
|
const ssrWidth = hasInjectionContext() ? injectLocal(ssrWidthSymbol, null) : null;
|
|
417
|
-
return typeof ssrWidth === "number" ? ssrWidth :
|
|
431
|
+
return typeof ssrWidth === "number" ? ssrWidth : void 0;
|
|
418
432
|
}
|
|
419
433
|
|
|
420
434
|
function useMounted() {
|
|
@@ -671,7 +685,7 @@ function useColorMode(options = {}) {
|
|
|
671
685
|
const updateHTMLAttrs = getSSRHandler(
|
|
672
686
|
"updateHTMLAttrs",
|
|
673
687
|
(selector2, attribute2, value) => {
|
|
674
|
-
const el = typeof selector2 === "string" ? window == null ?
|
|
688
|
+
const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
|
|
675
689
|
if (!el)
|
|
676
690
|
return;
|
|
677
691
|
const classesToAdd = /* @__PURE__ */ new Set();
|
|
@@ -855,18 +869,18 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
|
|
|
855
869
|
});
|
|
856
870
|
const containerElement = computed(() => {
|
|
857
871
|
var _a;
|
|
858
|
-
return (_a = props.containerElement) != null ? _a :
|
|
872
|
+
return (_a = props.containerElement) != null ? _a : void 0;
|
|
859
873
|
});
|
|
860
874
|
const disabled = computed(() => !!props.disabled);
|
|
861
875
|
const storageValue = props.storageKey && useStorage$1(
|
|
862
876
|
props.storageKey,
|
|
863
877
|
toValue(props.initialValue) || { x: 0, y: 0 },
|
|
864
|
-
isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage :
|
|
878
|
+
isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0
|
|
865
879
|
);
|
|
866
880
|
const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
|
|
867
881
|
const onEnd = (position, event) => {
|
|
868
882
|
var _a;
|
|
869
|
-
(_a = props.onEnd) == null ?
|
|
883
|
+
(_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
|
|
870
884
|
if (!storageValue)
|
|
871
885
|
return;
|
|
872
886
|
storageValue.value.x = position.x;
|
|
@@ -907,7 +921,7 @@ function useMutationObserver(target, callback, options = {}) {
|
|
|
907
921
|
const cleanup = () => {
|
|
908
922
|
if (observer) {
|
|
909
923
|
observer.disconnect();
|
|
910
|
-
observer =
|
|
924
|
+
observer = void 0;
|
|
911
925
|
}
|
|
912
926
|
};
|
|
913
927
|
const targets = computed(() => {
|
|
@@ -927,7 +941,7 @@ function useMutationObserver(target, callback, options = {}) {
|
|
|
927
941
|
{ immediate: true, flush: "post" }
|
|
928
942
|
);
|
|
929
943
|
const takeRecords = () => {
|
|
930
|
-
return observer == null ?
|
|
944
|
+
return observer == null ? void 0 : observer.takeRecords();
|
|
931
945
|
};
|
|
932
946
|
const stop = () => {
|
|
933
947
|
stopWatch();
|
|
@@ -948,7 +962,7 @@ function useResizeObserver(target, callback, options = {}) {
|
|
|
948
962
|
const cleanup = () => {
|
|
949
963
|
if (observer) {
|
|
950
964
|
observer.disconnect();
|
|
951
|
-
observer =
|
|
965
|
+
observer = void 0;
|
|
952
966
|
}
|
|
953
967
|
};
|
|
954
968
|
const targets = computed(() => {
|
|
@@ -1073,14 +1087,14 @@ const vElementBounding = {
|
|
|
1073
1087
|
function onElementRemoval(target, callback, options = {}) {
|
|
1074
1088
|
const {
|
|
1075
1089
|
window = defaultWindow,
|
|
1076
|
-
document = window == null ?
|
|
1090
|
+
document = window == null ? void 0 : window.document,
|
|
1077
1091
|
flush = "sync"
|
|
1078
1092
|
} = options;
|
|
1079
1093
|
if (!window || !document)
|
|
1080
1094
|
return noop;
|
|
1081
1095
|
let stopFn;
|
|
1082
1096
|
const cleanupAndUpdate = (fn) => {
|
|
1083
|
-
stopFn == null ?
|
|
1097
|
+
stopFn == null ? void 0 : stopFn();
|
|
1084
1098
|
stopFn = fn;
|
|
1085
1099
|
};
|
|
1086
1100
|
const stopWatch = watchEffect(() => {
|
|
@@ -1124,7 +1138,7 @@ function useElementHover(el, options = {}) {
|
|
|
1124
1138
|
const delay = entering ? delayEnter : delayLeave;
|
|
1125
1139
|
if (timer) {
|
|
1126
1140
|
clearTimeout(timer);
|
|
1127
|
-
timer =
|
|
1141
|
+
timer = void 0;
|
|
1128
1142
|
}
|
|
1129
1143
|
if (delay)
|
|
1130
1144
|
timer = setTimeout(() => isHovered.value = entering, delay);
|
|
@@ -1175,7 +1189,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
|
|
|
1175
1189
|
const { window = defaultWindow, box = "content-box" } = options;
|
|
1176
1190
|
const isSVG = computed(() => {
|
|
1177
1191
|
var _a, _b;
|
|
1178
|
-
return (_b = (_a = unrefElement(target)) == null ?
|
|
1192
|
+
return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
|
|
1179
1193
|
});
|
|
1180
1194
|
const width = ref(initialSize.width);
|
|
1181
1195
|
const height = ref(initialSize.height);
|
|
@@ -1231,7 +1245,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
|
|
|
1231
1245
|
const vElementSize = {
|
|
1232
1246
|
mounted(el, binding) {
|
|
1233
1247
|
var _a;
|
|
1234
|
-
const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ?
|
|
1248
|
+
const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
|
|
1235
1249
|
const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
|
|
1236
1250
|
const { width, height } = useElementSize(el, ...options);
|
|
1237
1251
|
watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
|
|
@@ -1317,10 +1331,11 @@ function useElementVisibility(element, options = {}) {
|
|
|
1317
1331
|
window = defaultWindow,
|
|
1318
1332
|
scrollTarget,
|
|
1319
1333
|
threshold = 0,
|
|
1320
|
-
rootMargin
|
|
1334
|
+
rootMargin,
|
|
1335
|
+
once = false
|
|
1321
1336
|
} = options;
|
|
1322
1337
|
const elementIsVisible = ref(false);
|
|
1323
|
-
useIntersectionObserver(
|
|
1338
|
+
const { stop } = useIntersectionObserver(
|
|
1324
1339
|
element,
|
|
1325
1340
|
(intersectionObserverEntries) => {
|
|
1326
1341
|
let isIntersecting = elementIsVisible.value;
|
|
@@ -1332,6 +1347,11 @@ function useElementVisibility(element, options = {}) {
|
|
|
1332
1347
|
}
|
|
1333
1348
|
}
|
|
1334
1349
|
elementIsVisible.value = isIntersecting;
|
|
1350
|
+
if (once) {
|
|
1351
|
+
watchOnce(elementIsVisible, () => {
|
|
1352
|
+
stop();
|
|
1353
|
+
});
|
|
1354
|
+
}
|
|
1335
1355
|
},
|
|
1336
1356
|
{
|
|
1337
1357
|
root: scrollTarget,
|
|
@@ -1421,11 +1441,11 @@ function useAsyncState(promise, initialState, options) {
|
|
|
1421
1441
|
const state = shallow ? shallowRef(initialState) : ref(initialState);
|
|
1422
1442
|
const isReady = ref(false);
|
|
1423
1443
|
const isLoading = ref(false);
|
|
1424
|
-
const error = shallowRef(
|
|
1444
|
+
const error = shallowRef(void 0);
|
|
1425
1445
|
async function execute(delay2 = 0, ...args) {
|
|
1426
1446
|
if (resetOnExecute)
|
|
1427
1447
|
state.value = initialState;
|
|
1428
|
-
error.value =
|
|
1448
|
+
error.value = void 0;
|
|
1429
1449
|
isReady.value = false;
|
|
1430
1450
|
isLoading.value = true;
|
|
1431
1451
|
if (delay2 > 0)
|
|
@@ -1505,7 +1525,7 @@ async function loadImage(options) {
|
|
|
1505
1525
|
function useImage(options, asyncStateOptions = {}) {
|
|
1506
1526
|
const state = useAsyncState(
|
|
1507
1527
|
() => loadImage(toValue(options)),
|
|
1508
|
-
|
|
1528
|
+
void 0,
|
|
1509
1529
|
{
|
|
1510
1530
|
resetOnExecute: true,
|
|
1511
1531
|
...asyncStateOptions
|
|
@@ -1590,7 +1610,7 @@ function useScroll(element, options = {}) {
|
|
|
1590
1610
|
return internalX.value;
|
|
1591
1611
|
},
|
|
1592
1612
|
set(x2) {
|
|
1593
|
-
scrollTo(x2,
|
|
1613
|
+
scrollTo(x2, void 0);
|
|
1594
1614
|
}
|
|
1595
1615
|
});
|
|
1596
1616
|
const y = computed({
|
|
@@ -1598,7 +1618,7 @@ function useScroll(element, options = {}) {
|
|
|
1598
1618
|
return internalY.value;
|
|
1599
1619
|
},
|
|
1600
1620
|
set(y2) {
|
|
1601
|
-
scrollTo(
|
|
1621
|
+
scrollTo(void 0, y2);
|
|
1602
1622
|
}
|
|
1603
1623
|
});
|
|
1604
1624
|
function scrollTo(_x, _y) {
|
|
@@ -1608,12 +1628,12 @@ function useScroll(element, options = {}) {
|
|
|
1608
1628
|
const _element = toValue(element);
|
|
1609
1629
|
if (!_element)
|
|
1610
1630
|
return;
|
|
1611
|
-
(_c = _element instanceof Document ? window.document.body : _element) == null ?
|
|
1631
|
+
(_c = _element instanceof Document ? window.document.body : _element) == null ? void 0 : _c.scrollTo({
|
|
1612
1632
|
top: (_a = toValue(_y)) != null ? _a : y.value,
|
|
1613
1633
|
left: (_b = toValue(_x)) != null ? _b : x.value,
|
|
1614
1634
|
behavior: toValue(behavior)
|
|
1615
1635
|
});
|
|
1616
|
-
const scrollContainer = ((_d = _element == null ?
|
|
1636
|
+
const scrollContainer = ((_d = _element == null ? void 0 : _element.document) == null ? void 0 : _d.documentElement) || (_element == null ? void 0 : _element.documentElement) || _element;
|
|
1617
1637
|
if (x != null)
|
|
1618
1638
|
internalX.value = scrollContainer.scrollLeft;
|
|
1619
1639
|
if (y != null)
|
|
@@ -1647,7 +1667,7 @@ function useScroll(element, options = {}) {
|
|
|
1647
1667
|
var _a;
|
|
1648
1668
|
if (!window)
|
|
1649
1669
|
return;
|
|
1650
|
-
const el = ((_a = target == null ?
|
|
1670
|
+
const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
|
|
1651
1671
|
const { display, flexDirection, direction } = getComputedStyle(el);
|
|
1652
1672
|
const directionMultipler = direction === "rtl" ? -1 : 1;
|
|
1653
1673
|
const scrollLeft = el.scrollLeft;
|
|
@@ -1827,7 +1847,7 @@ const UseMouseBuiltinExtractors = {
|
|
|
1827
1847
|
page: (event) => [event.pageX, event.pageY],
|
|
1828
1848
|
client: (event) => [event.clientX, event.clientY],
|
|
1829
1849
|
screen: (event) => [event.screenX, event.screenY],
|
|
1830
|
-
movement: (event) => event instanceof
|
|
1850
|
+
movement: (event) => event instanceof MouseEvent ? [event.movementX, event.movementY] : null
|
|
1831
1851
|
};
|
|
1832
1852
|
function useMouse(options = {}) {
|
|
1833
1853
|
const {
|
|
@@ -1909,7 +1929,7 @@ function useMouseInElement(target, options = {}) {
|
|
|
1909
1929
|
} = options;
|
|
1910
1930
|
const type = options.type || "page";
|
|
1911
1931
|
const { x, y, sourceType } = useMouse(options);
|
|
1912
|
-
const targetRef = ref(target != null ? target : window == null ?
|
|
1932
|
+
const targetRef = ref(target != null ? target : window == null ? void 0 : window.document.body);
|
|
1913
1933
|
const elementX = ref(0);
|
|
1914
1934
|
const elementY = ref(0);
|
|
1915
1935
|
const elementPositionX = ref(0);
|
|
@@ -2047,17 +2067,17 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
|
|
|
2047
2067
|
...props,
|
|
2048
2068
|
onPageChange(...args) {
|
|
2049
2069
|
var _a;
|
|
2050
|
-
(_a = props.onPageChange) == null ?
|
|
2070
|
+
(_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
|
|
2051
2071
|
emit("page-change", ...args);
|
|
2052
2072
|
},
|
|
2053
2073
|
onPageSizeChange(...args) {
|
|
2054
2074
|
var _a;
|
|
2055
|
-
(_a = props.onPageSizeChange) == null ?
|
|
2075
|
+
(_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
|
|
2056
2076
|
emit("page-size-change", ...args);
|
|
2057
2077
|
},
|
|
2058
2078
|
onPageCountChange(...args) {
|
|
2059
2079
|
var _a;
|
|
2060
|
-
(_a = props.onPageCountChange) == null ?
|
|
2080
|
+
(_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
|
|
2061
2081
|
emit("page-count-change", ...args);
|
|
2062
2082
|
}
|
|
2063
2083
|
}));
|
|
@@ -2219,15 +2239,15 @@ function useCssVar(prop, target, options = {}) {
|
|
|
2219
2239
|
const variable = ref(initialValue);
|
|
2220
2240
|
const elRef = computed(() => {
|
|
2221
2241
|
var _a;
|
|
2222
|
-
return unrefElement(target) || ((_a = window == null ?
|
|
2242
|
+
return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
|
|
2223
2243
|
});
|
|
2224
2244
|
function updateCssVar() {
|
|
2225
2245
|
var _a;
|
|
2226
2246
|
const key = toValue(prop);
|
|
2227
2247
|
const el = toValue(elRef);
|
|
2228
2248
|
if (el && window && key) {
|
|
2229
|
-
const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ?
|
|
2230
|
-
variable.value = value || initialValue;
|
|
2249
|
+
const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
|
|
2250
|
+
variable.value = value || variable.value || initialValue;
|
|
2231
2251
|
}
|
|
2232
2252
|
}
|
|
2233
2253
|
if (observe) {
|
|
@@ -2242,21 +2262,20 @@ function useCssVar(prop, target, options = {}) {
|
|
|
2242
2262
|
if (old[0] && old[1])
|
|
2243
2263
|
old[0].style.removeProperty(old[1]);
|
|
2244
2264
|
updateCssVar();
|
|
2245
|
-
}
|
|
2246
|
-
{ immediate: true }
|
|
2265
|
+
}
|
|
2247
2266
|
);
|
|
2248
2267
|
watch(
|
|
2249
|
-
variable,
|
|
2250
|
-
(val) => {
|
|
2251
|
-
var _a;
|
|
2268
|
+
[variable, elRef],
|
|
2269
|
+
([val, el]) => {
|
|
2252
2270
|
const raw_prop = toValue(prop);
|
|
2253
|
-
if ((
|
|
2271
|
+
if ((el == null ? void 0 : el.style) && raw_prop) {
|
|
2254
2272
|
if (val == null)
|
|
2255
|
-
|
|
2273
|
+
el.style.removeProperty(raw_prop);
|
|
2256
2274
|
else
|
|
2257
|
-
|
|
2275
|
+
el.style.setProperty(raw_prop, val);
|
|
2258
2276
|
}
|
|
2259
|
-
}
|
|
2277
|
+
},
|
|
2278
|
+
{ immediate: true }
|
|
2260
2279
|
);
|
|
2261
2280
|
return variable;
|
|
2262
2281
|
}
|
|
@@ -2352,12 +2371,12 @@ const vScroll = {
|
|
|
2352
2371
|
...options,
|
|
2353
2372
|
onScroll(e) {
|
|
2354
2373
|
var _a;
|
|
2355
|
-
(_a = options.onScroll) == null ?
|
|
2374
|
+
(_a = options.onScroll) == null ? void 0 : _a.call(options, e);
|
|
2356
2375
|
handler(state);
|
|
2357
2376
|
},
|
|
2358
2377
|
onStop(e) {
|
|
2359
2378
|
var _a;
|
|
2360
|
-
(_a = options.onStop) == null ?
|
|
2379
|
+
(_a = options.onStop) == null ? void 0 : _a.call(options, e);
|
|
2361
2380
|
handler(state);
|
|
2362
2381
|
}
|
|
2363
2382
|
});
|
|
@@ -2430,7 +2449,7 @@ function useScrollLock(element, initialState = false) {
|
|
|
2430
2449
|
if (!el || !isLocked.value)
|
|
2431
2450
|
return;
|
|
2432
2451
|
if (isIOS)
|
|
2433
|
-
stopTouchMoveListener == null ?
|
|
2452
|
+
stopTouchMoveListener == null ? void 0 : stopTouchMoveListener();
|
|
2434
2453
|
el.style.overflow = initialOverflow;
|
|
2435
2454
|
elInitialOverflow.delete(el);
|
|
2436
2455
|
isLocked.value = false;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vueuse/components",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "12.
|
|
4
|
+
"version": "12.6.0",
|
|
5
5
|
"description": "Renderless components for VueUse",
|
|
6
6
|
"author": "Jacob Clevenger<https://github.com/wheatjs>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"vue": "^3.5.13",
|
|
45
|
-
"@vueuse/core": "12.
|
|
46
|
-
"@vueuse/shared": "12.
|
|
45
|
+
"@vueuse/core": "12.6.0",
|
|
46
|
+
"@vueuse/shared": "12.6.0"
|
|
47
47
|
},
|
|
48
48
|
"scripts": {
|
|
49
49
|
"build": "rollup --config=rollup.config.ts --configPlugin=rollup-plugin-esbuild"
|