@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.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
- }> = (evt: T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) => void;
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 : undefined;
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 ? undefined : plain.$el) != null ? _a : plain;
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 : undefined;
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 ? undefined : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != 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 ? undefined : raw_targets.length) || !(raw_events == null ? undefined : raw_events.length) || !(raw_listeners == null ? undefined : raw_listeners.length))
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 ? undefined : _a.tagName) === "IFRAME" && !(el == null ? undefined : el.contains(window.document.activeElement))) {
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 ? undefined : _a.split(",")) != null ? _b : true;
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 = undefined;
259
+ timeout = void 0;
246
260
  }
247
- posStart = undefined;
248
- startTimestamp = undefined;
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 ? undefined : options.onMouseUp) || !_posStart || !_startTimestamp)
269
+ if (!(options == null ? void 0 : options.onMouseUp) || !_posStart || !_startTimestamp)
256
270
  return;
257
- if (((_a2 = options == null ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
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 ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
273
+ if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
260
274
  ev.preventDefault();
261
- if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
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 ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
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 ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
287
+ if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
274
288
  ev.preventDefault();
275
- if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
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 ? undefined : options.delay) != null ? _d : DEFAULT_DELAY
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 ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
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 ? undefined : options.distanceThreshold) === false)
308
+ if (!posStart || (options == null ? void 0 : options.distanceThreshold) === false)
295
309
  return;
296
- if ((_b2 = options == null ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
310
+ if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
297
311
  ev.preventDefault();
298
- if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
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 ? undefined : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
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 ? undefined : options.modifiers) == null ? undefined : _a.capture,
308
- once: (_b = options == null ? undefined : options.modifiers) == null ? undefined : _b.once
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 ? undefined : _a.call(slots, data);
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 : undefined;
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 ? undefined : window.document.querySelector(selector2) : unrefElement(selector2);
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 : undefined;
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 : undefined
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 ? undefined : _a.call(props, position, event);
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 = undefined;
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 ? undefined : observer.takeRecords();
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 = undefined;
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 ? undefined : window.document,
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 ? undefined : stopFn();
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 = undefined;
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 ? undefined : _a.namespaceURI) == null ? undefined : _b.includes("svg");
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 ? undefined : _a[0];
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(undefined);
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 = undefined;
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
- undefined,
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, undefined);
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(undefined, y2);
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 ? undefined : _c.scrollTo({
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 ? undefined : _element.document) == null ? undefined : _d.documentElement) || (_element == null ? undefined : _element.documentElement) || _element;
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 ? undefined : target.document) == null ? undefined : _a.documentElement) || (target == null ? undefined : target.documentElement) || unrefElement(target);
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 Touch ? null : [event.movementX, event.movementY]
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 ? undefined : window.document.body);
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 ? undefined : _a.call(props, ...args);
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 ? undefined : _a.call(props, ...args);
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 ? undefined : _a.call(props, ...args);
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 ? undefined : window.document) == null ? undefined : _a.documentElement);
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 ? undefined : _a.trim();
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 (((_a = elRef.value) == null ? undefined : _a.style) && raw_prop) {
2270
+ if ((el == null ? void 0 : el.style) && raw_prop) {
2253
2271
  if (val == null)
2254
- elRef.value.style.removeProperty(raw_prop);
2272
+ el.style.removeProperty(raw_prop);
2255
2273
  else
2256
- elRef.value.style.setProperty(raw_prop, val);
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 ? undefined : _a.call(options, e);
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 ? undefined : _a.call(options, e);
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 ? undefined : stopTouchMoveListener();
2451
+ stopTouchMoveListener == null ? void 0 : stopTouchMoveListener();
2433
2452
  el.style.overflow = initialOverflow;
2434
2453
  elInitialOverflow.delete(el);
2435
2454
  isLocked.value = false;