@vueuse/components 12.5.0 → 12.6.1
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 +30 -17
- package/index.d.mts +30 -17
- package/index.d.ts +30 -17
- 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.d.ts
CHANGED
|
@@ -7,12 +7,25 @@ interface ConfigurableWindow {
|
|
|
7
7
|
window?: Window;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
interface Position {
|
|
11
|
+
x: number;
|
|
12
|
+
y: number;
|
|
13
|
+
}
|
|
14
|
+
interface RenderableComponent {
|
|
15
|
+
/**
|
|
16
|
+
* The element that the component should be rendered as
|
|
17
|
+
*
|
|
18
|
+
* @default 'div'
|
|
19
|
+
*/
|
|
20
|
+
as?: object | string;
|
|
21
|
+
}
|
|
22
|
+
|
|
10
23
|
type VueInstance = ComponentPublicInstance;
|
|
11
24
|
type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
|
|
12
25
|
type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<T>;
|
|
13
26
|
type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
|
|
14
27
|
|
|
15
|
-
interface OnClickOutsideOptions extends ConfigurableWindow {
|
|
28
|
+
interface OnClickOutsideOptions<Controls extends boolean = false> extends ConfigurableWindow {
|
|
16
29
|
/**
|
|
17
30
|
* List of elements that should not trigger the event.
|
|
18
31
|
*/
|
|
@@ -27,32 +40,26 @@ interface OnClickOutsideOptions extends ConfigurableWindow {
|
|
|
27
40
|
* @default false
|
|
28
41
|
*/
|
|
29
42
|
detectIframe?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Use controls to cancel/trigger listener.
|
|
45
|
+
* @default false
|
|
46
|
+
*/
|
|
47
|
+
controls?: Controls;
|
|
30
48
|
}
|
|
31
49
|
type OnClickOutsideHandler<T extends {
|
|
32
50
|
detectIframe: OnClickOutsideOptions['detectIframe'];
|
|
51
|
+
controls: boolean;
|
|
33
52
|
} = {
|
|
34
53
|
detectIframe: false;
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
interface Position {
|
|
38
|
-
x: number;
|
|
39
|
-
y: number;
|
|
40
|
-
}
|
|
41
|
-
interface RenderableComponent {
|
|
42
|
-
/**
|
|
43
|
-
* The element that the component should be rendered as
|
|
44
|
-
*
|
|
45
|
-
* @default 'div'
|
|
46
|
-
*/
|
|
47
|
-
as?: object | string;
|
|
48
|
-
}
|
|
54
|
+
controls: false;
|
|
55
|
+
}> = (event: T['controls'] extends true ? Event | (T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) : T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) => void;
|
|
49
56
|
|
|
50
57
|
interface OnClickOutsideProps extends RenderableComponent {
|
|
51
|
-
options?: OnClickOutsideOptions
|
|
58
|
+
options?: Omit<OnClickOutsideOptions, 'controls'>;
|
|
52
59
|
}
|
|
53
60
|
declare const OnClickOutside: vue.DefineComponent<OnClickOutsideProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<OnClickOutsideProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
|
|
54
61
|
|
|
55
|
-
declare const vOnClickOutside: ObjectDirective<HTMLElement, OnClickOutsideHandler | [(evt: any) => void, OnClickOutsideOptions]>;
|
|
62
|
+
declare const vOnClickOutside: ObjectDirective<HTMLElement, OnClickOutsideHandler | [(evt: any) => void, Omit<OnClickOutsideOptions, 'controls'>]>;
|
|
56
63
|
|
|
57
64
|
type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
|
|
58
65
|
interface OnKeyStrokeOptions {
|
|
@@ -453,6 +460,12 @@ interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseInters
|
|
|
453
460
|
* The element that is used as the viewport for checking visibility of the target.
|
|
454
461
|
*/
|
|
455
462
|
scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
|
|
463
|
+
/**
|
|
464
|
+
* Stop tracking when element visibility changes for the first time
|
|
465
|
+
*
|
|
466
|
+
* @default false
|
|
467
|
+
*/
|
|
468
|
+
once?: boolean;
|
|
456
469
|
}
|
|
457
470
|
|
|
458
471
|
type BindingValueFunction$5 = (state: boolean) => void;
|
package/index.iife.js
CHANGED
|
@@ -17,12 +17,12 @@
|
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
|
|
20
|
-
const defaultWindow = shared.isClient ? window :
|
|
20
|
+
const defaultWindow = shared.isClient ? window : void 0;
|
|
21
21
|
|
|
22
22
|
function unrefElement(elRef) {
|
|
23
23
|
var _a;
|
|
24
24
|
const plain = vue.toValue(elRef);
|
|
25
|
-
return (_a = plain == null ?
|
|
25
|
+
return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
function useEventListener(...args) {
|
|
@@ -37,13 +37,13 @@
|
|
|
37
37
|
};
|
|
38
38
|
const firstParamTargets = vue.computed(() => {
|
|
39
39
|
const test = shared.toArray(vue.toValue(args[0])).filter((e) => e != null);
|
|
40
|
-
return test.every((e) => typeof e !== "string") ? test :
|
|
40
|
+
return test.every((e) => typeof e !== "string") ? test : void 0;
|
|
41
41
|
});
|
|
42
42
|
const stopWatch = shared.watchImmediate(
|
|
43
43
|
() => {
|
|
44
44
|
var _a, _b;
|
|
45
45
|
return [
|
|
46
|
-
(_b = (_a = firstParamTargets.value) == null ?
|
|
46
|
+
(_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
|
|
47
47
|
shared.toArray(vue.toValue(firstParamTargets.value ? args[1] : args[0])),
|
|
48
48
|
shared.toArray(vue.unref(firstParamTargets.value ? args[2] : args[1])),
|
|
49
49
|
// @ts-expect-error - TypeScript gets the correct types, but somehow still complains
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
},
|
|
53
53
|
([raw_targets, raw_events, raw_listeners, raw_options]) => {
|
|
54
54
|
cleanup();
|
|
55
|
-
if (!(raw_targets == null ?
|
|
55
|
+
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))
|
|
56
56
|
return;
|
|
57
57
|
const optionsClone = shared.isObject(raw_options) ? { ...raw_options } : raw_options;
|
|
58
58
|
cleanups.push(
|
|
@@ -75,9 +75,10 @@
|
|
|
75
75
|
|
|
76
76
|
let _iOSWorkaround = false;
|
|
77
77
|
function onClickOutside(target, handler, options = {}) {
|
|
78
|
-
const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
|
|
79
|
-
if (!window)
|
|
80
|
-
return shared.noop;
|
|
78
|
+
const { window = defaultWindow, ignore = [], capture = true, detectIframe = false, controls = false } = options;
|
|
79
|
+
if (!window) {
|
|
80
|
+
return controls ? { stop: shared.noop, cancel: shared.noop, trigger: shared.noop } : shared.noop;
|
|
81
|
+
}
|
|
81
82
|
if (shared.isIOS && !_iOSWorkaround) {
|
|
82
83
|
_iOSWorkaround = true;
|
|
83
84
|
const listenerOptions = { passive: true };
|
|
@@ -114,7 +115,7 @@
|
|
|
114
115
|
return;
|
|
115
116
|
if (!el || el === event.target || event.composedPath().includes(el))
|
|
116
117
|
return;
|
|
117
|
-
if (event.detail === 0)
|
|
118
|
+
if ("detail" in event && event.detail === 0)
|
|
118
119
|
shouldListen = !shouldIgnore(event);
|
|
119
120
|
if (!shouldListen) {
|
|
120
121
|
shouldListen = true;
|
|
@@ -141,13 +142,26 @@
|
|
|
141
142
|
setTimeout(() => {
|
|
142
143
|
var _a;
|
|
143
144
|
const el = unrefElement(target);
|
|
144
|
-
if (((_a = window.document.activeElement) == null ?
|
|
145
|
+
if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement))) {
|
|
145
146
|
handler(event);
|
|
146
147
|
}
|
|
147
148
|
}, 0);
|
|
148
149
|
}, { passive: true })
|
|
149
150
|
].filter(Boolean);
|
|
150
151
|
const stop = () => cleanup.forEach((fn) => fn());
|
|
152
|
+
if (controls) {
|
|
153
|
+
return {
|
|
154
|
+
stop,
|
|
155
|
+
cancel: () => {
|
|
156
|
+
shouldListen = false;
|
|
157
|
+
},
|
|
158
|
+
trigger: (event) => {
|
|
159
|
+
shouldListen = true;
|
|
160
|
+
listener(event);
|
|
161
|
+
shouldListen = false;
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
}
|
|
151
165
|
return stop;
|
|
152
166
|
}
|
|
153
167
|
|
|
@@ -215,7 +229,7 @@
|
|
|
215
229
|
const vOnKeyStroke = {
|
|
216
230
|
mounted(el, binding) {
|
|
217
231
|
var _a, _b;
|
|
218
|
-
const keys = (_b = (_a = binding.arg) == null ?
|
|
232
|
+
const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
|
|
219
233
|
if (typeof binding.value === "function") {
|
|
220
234
|
onKeyStroke(keys, binding.value, {
|
|
221
235
|
target: el
|
|
@@ -242,23 +256,23 @@
|
|
|
242
256
|
function clear() {
|
|
243
257
|
if (timeout) {
|
|
244
258
|
clearTimeout(timeout);
|
|
245
|
-
timeout =
|
|
259
|
+
timeout = void 0;
|
|
246
260
|
}
|
|
247
|
-
posStart =
|
|
248
|
-
startTimestamp =
|
|
261
|
+
posStart = void 0;
|
|
262
|
+
startTimestamp = void 0;
|
|
249
263
|
hasLongPressed = false;
|
|
250
264
|
}
|
|
251
265
|
function onRelease(ev) {
|
|
252
266
|
var _a2, _b2, _c;
|
|
253
267
|
const [_startTimestamp, _posStart, _hasLongPressed] = [startTimestamp, posStart, hasLongPressed];
|
|
254
268
|
clear();
|
|
255
|
-
if (!(options == null ?
|
|
269
|
+
if (!(options == null ? void 0 : options.onMouseUp) || !_posStart || !_startTimestamp)
|
|
256
270
|
return;
|
|
257
|
-
if (((_a2 = options == null ?
|
|
271
|
+
if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
|
|
258
272
|
return;
|
|
259
|
-
if ((_b2 = options == null ?
|
|
273
|
+
if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
|
|
260
274
|
ev.preventDefault();
|
|
261
|
-
if ((_c = options == null ?
|
|
275
|
+
if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
|
|
262
276
|
ev.stopPropagation();
|
|
263
277
|
const dx = ev.x - _posStart.x;
|
|
264
278
|
const dy = ev.y - _posStart.y;
|
|
@@ -267,12 +281,12 @@
|
|
|
267
281
|
}
|
|
268
282
|
function onDown(ev) {
|
|
269
283
|
var _a2, _b2, _c, _d;
|
|
270
|
-
if (((_a2 = options == null ?
|
|
284
|
+
if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
|
|
271
285
|
return;
|
|
272
286
|
clear();
|
|
273
|
-
if ((_b2 = options == null ?
|
|
287
|
+
if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
|
|
274
288
|
ev.preventDefault();
|
|
275
|
-
if ((_c = options == null ?
|
|
289
|
+
if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
|
|
276
290
|
ev.stopPropagation();
|
|
277
291
|
posStart = {
|
|
278
292
|
x: ev.x,
|
|
@@ -284,28 +298,28 @@
|
|
|
284
298
|
hasLongPressed = true;
|
|
285
299
|
handler(ev);
|
|
286
300
|
},
|
|
287
|
-
(_d = options == null ?
|
|
301
|
+
(_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
|
|
288
302
|
);
|
|
289
303
|
}
|
|
290
304
|
function onMove(ev) {
|
|
291
305
|
var _a2, _b2, _c, _d;
|
|
292
|
-
if (((_a2 = options == null ?
|
|
306
|
+
if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
|
|
293
307
|
return;
|
|
294
|
-
if (!posStart || (options == null ?
|
|
308
|
+
if (!posStart || (options == null ? void 0 : options.distanceThreshold) === false)
|
|
295
309
|
return;
|
|
296
|
-
if ((_b2 = options == null ?
|
|
310
|
+
if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
|
|
297
311
|
ev.preventDefault();
|
|
298
|
-
if ((_c = options == null ?
|
|
312
|
+
if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
|
|
299
313
|
ev.stopPropagation();
|
|
300
314
|
const dx = ev.x - posStart.x;
|
|
301
315
|
const dy = ev.y - posStart.y;
|
|
302
316
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
303
|
-
if (distance >= ((_d = options == null ?
|
|
317
|
+
if (distance >= ((_d = options == null ? void 0 : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
|
|
304
318
|
clear();
|
|
305
319
|
}
|
|
306
320
|
const listenerOptions = {
|
|
307
|
-
capture: (_a = options == null ?
|
|
308
|
-
once: (_b = options == null ?
|
|
321
|
+
capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
|
|
322
|
+
once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
|
|
309
323
|
};
|
|
310
324
|
const cleanup = [
|
|
311
325
|
useEventListener(elementRef, "pointerdown", onDown, listenerOptions),
|
|
@@ -393,7 +407,7 @@
|
|
|
393
407
|
const data = vue.reactive(core.useClipboard(props));
|
|
394
408
|
return () => {
|
|
395
409
|
var _a;
|
|
396
|
-
return (_a = slots.default) == null ?
|
|
410
|
+
return (_a = slots.default) == null ? void 0 : _a.call(slots, data);
|
|
397
411
|
};
|
|
398
412
|
}
|
|
399
413
|
});
|
|
@@ -413,7 +427,7 @@
|
|
|
413
427
|
const ssrWidthSymbol = Symbol("vueuse-ssr-width");
|
|
414
428
|
function useSSRWidth() {
|
|
415
429
|
const ssrWidth = vue.hasInjectionContext() ? shared.injectLocal(ssrWidthSymbol, null) : null;
|
|
416
|
-
return typeof ssrWidth === "number" ? ssrWidth :
|
|
430
|
+
return typeof ssrWidth === "number" ? ssrWidth : void 0;
|
|
417
431
|
}
|
|
418
432
|
|
|
419
433
|
function useMounted() {
|
|
@@ -670,7 +684,7 @@
|
|
|
670
684
|
const updateHTMLAttrs = getSSRHandler(
|
|
671
685
|
"updateHTMLAttrs",
|
|
672
686
|
(selector2, attribute2, value) => {
|
|
673
|
-
const el = typeof selector2 === "string" ? window == null ?
|
|
687
|
+
const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
|
|
674
688
|
if (!el)
|
|
675
689
|
return;
|
|
676
690
|
const classesToAdd = /* @__PURE__ */ new Set();
|
|
@@ -854,18 +868,18 @@
|
|
|
854
868
|
});
|
|
855
869
|
const containerElement = vue.computed(() => {
|
|
856
870
|
var _a;
|
|
857
|
-
return (_a = props.containerElement) != null ? _a :
|
|
871
|
+
return (_a = props.containerElement) != null ? _a : void 0;
|
|
858
872
|
});
|
|
859
873
|
const disabled = vue.computed(() => !!props.disabled);
|
|
860
874
|
const storageValue = props.storageKey && core.useStorage(
|
|
861
875
|
props.storageKey,
|
|
862
876
|
vue.toValue(props.initialValue) || { x: 0, y: 0 },
|
|
863
|
-
core.isClient ? props.storageType === "session" ? sessionStorage : localStorage :
|
|
877
|
+
core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0
|
|
864
878
|
);
|
|
865
879
|
const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
|
|
866
880
|
const onEnd = (position, event) => {
|
|
867
881
|
var _a;
|
|
868
|
-
(_a = props.onEnd) == null ?
|
|
882
|
+
(_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
|
|
869
883
|
if (!storageValue)
|
|
870
884
|
return;
|
|
871
885
|
storageValue.value.x = position.x;
|
|
@@ -906,7 +920,7 @@
|
|
|
906
920
|
const cleanup = () => {
|
|
907
921
|
if (observer) {
|
|
908
922
|
observer.disconnect();
|
|
909
|
-
observer =
|
|
923
|
+
observer = void 0;
|
|
910
924
|
}
|
|
911
925
|
};
|
|
912
926
|
const targets = vue.computed(() => {
|
|
@@ -926,7 +940,7 @@
|
|
|
926
940
|
{ immediate: true, flush: "post" }
|
|
927
941
|
);
|
|
928
942
|
const takeRecords = () => {
|
|
929
|
-
return observer == null ?
|
|
943
|
+
return observer == null ? void 0 : observer.takeRecords();
|
|
930
944
|
};
|
|
931
945
|
const stop = () => {
|
|
932
946
|
stopWatch();
|
|
@@ -947,7 +961,7 @@
|
|
|
947
961
|
const cleanup = () => {
|
|
948
962
|
if (observer) {
|
|
949
963
|
observer.disconnect();
|
|
950
|
-
observer =
|
|
964
|
+
observer = void 0;
|
|
951
965
|
}
|
|
952
966
|
};
|
|
953
967
|
const targets = vue.computed(() => {
|
|
@@ -1072,14 +1086,14 @@
|
|
|
1072
1086
|
function onElementRemoval(target, callback, options = {}) {
|
|
1073
1087
|
const {
|
|
1074
1088
|
window = defaultWindow,
|
|
1075
|
-
document = window == null ?
|
|
1089
|
+
document = window == null ? void 0 : window.document,
|
|
1076
1090
|
flush = "sync"
|
|
1077
1091
|
} = options;
|
|
1078
1092
|
if (!window || !document)
|
|
1079
1093
|
return shared.noop;
|
|
1080
1094
|
let stopFn;
|
|
1081
1095
|
const cleanupAndUpdate = (fn) => {
|
|
1082
|
-
stopFn == null ?
|
|
1096
|
+
stopFn == null ? void 0 : stopFn();
|
|
1083
1097
|
stopFn = fn;
|
|
1084
1098
|
};
|
|
1085
1099
|
const stopWatch = vue.watchEffect(() => {
|
|
@@ -1123,7 +1137,7 @@
|
|
|
1123
1137
|
const delay = entering ? delayEnter : delayLeave;
|
|
1124
1138
|
if (timer) {
|
|
1125
1139
|
clearTimeout(timer);
|
|
1126
|
-
timer =
|
|
1140
|
+
timer = void 0;
|
|
1127
1141
|
}
|
|
1128
1142
|
if (delay)
|
|
1129
1143
|
timer = setTimeout(() => isHovered.value = entering, delay);
|
|
@@ -1174,7 +1188,7 @@
|
|
|
1174
1188
|
const { window = defaultWindow, box = "content-box" } = options;
|
|
1175
1189
|
const isSVG = vue.computed(() => {
|
|
1176
1190
|
var _a, _b;
|
|
1177
|
-
return (_b = (_a = unrefElement(target)) == null ?
|
|
1191
|
+
return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
|
|
1178
1192
|
});
|
|
1179
1193
|
const width = vue.ref(initialSize.width);
|
|
1180
1194
|
const height = vue.ref(initialSize.height);
|
|
@@ -1230,7 +1244,7 @@
|
|
|
1230
1244
|
const vElementSize = {
|
|
1231
1245
|
mounted(el, binding) {
|
|
1232
1246
|
var _a;
|
|
1233
|
-
const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ?
|
|
1247
|
+
const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
|
|
1234
1248
|
const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
|
|
1235
1249
|
const { width, height } = useElementSize(el, ...options);
|
|
1236
1250
|
vue.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
|
|
@@ -1316,10 +1330,11 @@
|
|
|
1316
1330
|
window = defaultWindow,
|
|
1317
1331
|
scrollTarget,
|
|
1318
1332
|
threshold = 0,
|
|
1319
|
-
rootMargin
|
|
1333
|
+
rootMargin,
|
|
1334
|
+
once = false
|
|
1320
1335
|
} = options;
|
|
1321
1336
|
const elementIsVisible = vue.ref(false);
|
|
1322
|
-
useIntersectionObserver(
|
|
1337
|
+
const { stop } = useIntersectionObserver(
|
|
1323
1338
|
element,
|
|
1324
1339
|
(intersectionObserverEntries) => {
|
|
1325
1340
|
let isIntersecting = elementIsVisible.value;
|
|
@@ -1331,6 +1346,11 @@
|
|
|
1331
1346
|
}
|
|
1332
1347
|
}
|
|
1333
1348
|
elementIsVisible.value = isIntersecting;
|
|
1349
|
+
if (once) {
|
|
1350
|
+
shared.watchOnce(elementIsVisible, () => {
|
|
1351
|
+
stop();
|
|
1352
|
+
});
|
|
1353
|
+
}
|
|
1334
1354
|
},
|
|
1335
1355
|
{
|
|
1336
1356
|
root: scrollTarget,
|
|
@@ -1420,11 +1440,11 @@
|
|
|
1420
1440
|
const state = shallow ? vue.shallowRef(initialState) : vue.ref(initialState);
|
|
1421
1441
|
const isReady = vue.ref(false);
|
|
1422
1442
|
const isLoading = vue.ref(false);
|
|
1423
|
-
const error = vue.shallowRef(
|
|
1443
|
+
const error = vue.shallowRef(void 0);
|
|
1424
1444
|
async function execute(delay2 = 0, ...args) {
|
|
1425
1445
|
if (resetOnExecute)
|
|
1426
1446
|
state.value = initialState;
|
|
1427
|
-
error.value =
|
|
1447
|
+
error.value = void 0;
|
|
1428
1448
|
isReady.value = false;
|
|
1429
1449
|
isLoading.value = true;
|
|
1430
1450
|
if (delay2 > 0)
|
|
@@ -1504,7 +1524,7 @@
|
|
|
1504
1524
|
function useImage(options, asyncStateOptions = {}) {
|
|
1505
1525
|
const state = useAsyncState(
|
|
1506
1526
|
() => loadImage(vue.toValue(options)),
|
|
1507
|
-
|
|
1527
|
+
void 0,
|
|
1508
1528
|
{
|
|
1509
1529
|
resetOnExecute: true,
|
|
1510
1530
|
...asyncStateOptions
|
|
@@ -1589,7 +1609,7 @@
|
|
|
1589
1609
|
return internalX.value;
|
|
1590
1610
|
},
|
|
1591
1611
|
set(x2) {
|
|
1592
|
-
scrollTo(x2,
|
|
1612
|
+
scrollTo(x2, void 0);
|
|
1593
1613
|
}
|
|
1594
1614
|
});
|
|
1595
1615
|
const y = vue.computed({
|
|
@@ -1597,7 +1617,7 @@
|
|
|
1597
1617
|
return internalY.value;
|
|
1598
1618
|
},
|
|
1599
1619
|
set(y2) {
|
|
1600
|
-
scrollTo(
|
|
1620
|
+
scrollTo(void 0, y2);
|
|
1601
1621
|
}
|
|
1602
1622
|
});
|
|
1603
1623
|
function scrollTo(_x, _y) {
|
|
@@ -1607,12 +1627,12 @@
|
|
|
1607
1627
|
const _element = vue.toValue(element);
|
|
1608
1628
|
if (!_element)
|
|
1609
1629
|
return;
|
|
1610
|
-
(_c = _element instanceof Document ? window.document.body : _element) == null ?
|
|
1630
|
+
(_c = _element instanceof Document ? window.document.body : _element) == null ? void 0 : _c.scrollTo({
|
|
1611
1631
|
top: (_a = vue.toValue(_y)) != null ? _a : y.value,
|
|
1612
1632
|
left: (_b = vue.toValue(_x)) != null ? _b : x.value,
|
|
1613
1633
|
behavior: vue.toValue(behavior)
|
|
1614
1634
|
});
|
|
1615
|
-
const scrollContainer = ((_d = _element == null ?
|
|
1635
|
+
const scrollContainer = ((_d = _element == null ? void 0 : _element.document) == null ? void 0 : _d.documentElement) || (_element == null ? void 0 : _element.documentElement) || _element;
|
|
1616
1636
|
if (x != null)
|
|
1617
1637
|
internalX.value = scrollContainer.scrollLeft;
|
|
1618
1638
|
if (y != null)
|
|
@@ -1646,7 +1666,7 @@
|
|
|
1646
1666
|
var _a;
|
|
1647
1667
|
if (!window)
|
|
1648
1668
|
return;
|
|
1649
|
-
const el = ((_a = target == null ?
|
|
1669
|
+
const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
|
|
1650
1670
|
const { display, flexDirection, direction } = getComputedStyle(el);
|
|
1651
1671
|
const directionMultipler = direction === "rtl" ? -1 : 1;
|
|
1652
1672
|
const scrollLeft = el.scrollLeft;
|
|
@@ -1826,7 +1846,7 @@
|
|
|
1826
1846
|
page: (event) => [event.pageX, event.pageY],
|
|
1827
1847
|
client: (event) => [event.clientX, event.clientY],
|
|
1828
1848
|
screen: (event) => [event.screenX, event.screenY],
|
|
1829
|
-
movement: (event) => event instanceof
|
|
1849
|
+
movement: (event) => event instanceof MouseEvent ? [event.movementX, event.movementY] : null
|
|
1830
1850
|
};
|
|
1831
1851
|
function useMouse(options = {}) {
|
|
1832
1852
|
const {
|
|
@@ -1908,7 +1928,7 @@
|
|
|
1908
1928
|
} = options;
|
|
1909
1929
|
const type = options.type || "page";
|
|
1910
1930
|
const { x, y, sourceType } = useMouse(options);
|
|
1911
|
-
const targetRef = vue.ref(target != null ? target : window == null ?
|
|
1931
|
+
const targetRef = vue.ref(target != null ? target : window == null ? void 0 : window.document.body);
|
|
1912
1932
|
const elementX = vue.ref(0);
|
|
1913
1933
|
const elementY = vue.ref(0);
|
|
1914
1934
|
const elementPositionX = vue.ref(0);
|
|
@@ -2046,17 +2066,17 @@
|
|
|
2046
2066
|
...props,
|
|
2047
2067
|
onPageChange(...args) {
|
|
2048
2068
|
var _a;
|
|
2049
|
-
(_a = props.onPageChange) == null ?
|
|
2069
|
+
(_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
|
|
2050
2070
|
emit("page-change", ...args);
|
|
2051
2071
|
},
|
|
2052
2072
|
onPageSizeChange(...args) {
|
|
2053
2073
|
var _a;
|
|
2054
|
-
(_a = props.onPageSizeChange) == null ?
|
|
2074
|
+
(_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
|
|
2055
2075
|
emit("page-size-change", ...args);
|
|
2056
2076
|
},
|
|
2057
2077
|
onPageCountChange(...args) {
|
|
2058
2078
|
var _a;
|
|
2059
|
-
(_a = props.onPageCountChange) == null ?
|
|
2079
|
+
(_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
|
|
2060
2080
|
emit("page-count-change", ...args);
|
|
2061
2081
|
}
|
|
2062
2082
|
}));
|
|
@@ -2218,15 +2238,15 @@
|
|
|
2218
2238
|
const variable = vue.ref(initialValue);
|
|
2219
2239
|
const elRef = vue.computed(() => {
|
|
2220
2240
|
var _a;
|
|
2221
|
-
return unrefElement(target) || ((_a = window == null ?
|
|
2241
|
+
return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
|
|
2222
2242
|
});
|
|
2223
2243
|
function updateCssVar() {
|
|
2224
2244
|
var _a;
|
|
2225
2245
|
const key = vue.toValue(prop);
|
|
2226
2246
|
const el = vue.toValue(elRef);
|
|
2227
2247
|
if (el && window && key) {
|
|
2228
|
-
const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ?
|
|
2229
|
-
variable.value = value || initialValue;
|
|
2248
|
+
const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
|
|
2249
|
+
variable.value = value || variable.value || initialValue;
|
|
2230
2250
|
}
|
|
2231
2251
|
}
|
|
2232
2252
|
if (observe) {
|
|
@@ -2241,21 +2261,20 @@
|
|
|
2241
2261
|
if (old[0] && old[1])
|
|
2242
2262
|
old[0].style.removeProperty(old[1]);
|
|
2243
2263
|
updateCssVar();
|
|
2244
|
-
}
|
|
2245
|
-
{ immediate: true }
|
|
2264
|
+
}
|
|
2246
2265
|
);
|
|
2247
2266
|
vue.watch(
|
|
2248
|
-
variable,
|
|
2249
|
-
(val) => {
|
|
2250
|
-
var _a;
|
|
2267
|
+
[variable, elRef],
|
|
2268
|
+
([val, el]) => {
|
|
2251
2269
|
const raw_prop = vue.toValue(prop);
|
|
2252
|
-
if ((
|
|
2270
|
+
if ((el == null ? void 0 : el.style) && raw_prop) {
|
|
2253
2271
|
if (val == null)
|
|
2254
|
-
|
|
2272
|
+
el.style.removeProperty(raw_prop);
|
|
2255
2273
|
else
|
|
2256
|
-
|
|
2274
|
+
el.style.setProperty(raw_prop, val);
|
|
2257
2275
|
}
|
|
2258
|
-
}
|
|
2276
|
+
},
|
|
2277
|
+
{ immediate: true }
|
|
2259
2278
|
);
|
|
2260
2279
|
return variable;
|
|
2261
2280
|
}
|
|
@@ -2351,12 +2370,12 @@
|
|
|
2351
2370
|
...options,
|
|
2352
2371
|
onScroll(e) {
|
|
2353
2372
|
var _a;
|
|
2354
|
-
(_a = options.onScroll) == null ?
|
|
2373
|
+
(_a = options.onScroll) == null ? void 0 : _a.call(options, e);
|
|
2355
2374
|
handler(state);
|
|
2356
2375
|
},
|
|
2357
2376
|
onStop(e) {
|
|
2358
2377
|
var _a;
|
|
2359
|
-
(_a = options.onStop) == null ?
|
|
2378
|
+
(_a = options.onStop) == null ? void 0 : _a.call(options, e);
|
|
2360
2379
|
handler(state);
|
|
2361
2380
|
}
|
|
2362
2381
|
});
|
|
@@ -2429,7 +2448,7 @@
|
|
|
2429
2448
|
if (!el || !isLocked.value)
|
|
2430
2449
|
return;
|
|
2431
2450
|
if (shared.isIOS)
|
|
2432
|
-
stopTouchMoveListener == null ?
|
|
2451
|
+
stopTouchMoveListener == null ? void 0 : stopTouchMoveListener();
|
|
2433
2452
|
el.style.overflow = initialOverflow;
|
|
2434
2453
|
elInitialOverflow.delete(el);
|
|
2435
2454
|
isLocked.value = false;
|