@vueuse/components 9.12.0 → 9.13.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 CHANGED
@@ -4,7 +4,7 @@ var vueDemi = require('vue-demi');
4
4
  var core = require('@vueuse/core');
5
5
  var shared = require('@vueuse/shared');
6
6
 
7
- const OnClickOutside = /* @__PURE__ */ vueDemi.defineComponent({
7
+ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
8
8
  name: "OnClickOutside",
9
9
  props: ["as", "options"],
10
10
  emits: ["trigger"],
@@ -50,16 +50,16 @@ function useEventListener(...args) {
50
50
  cleanups.forEach((fn) => fn());
51
51
  cleanups.length = 0;
52
52
  };
53
- const register = (el, event, listener) => {
54
- el.addEventListener(event, listener, options);
55
- return () => el.removeEventListener(event, listener, options);
53
+ const register = (el, event, listener, options2) => {
54
+ el.addEventListener(event, listener, options2);
55
+ return () => el.removeEventListener(event, listener, options2);
56
56
  };
57
- const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
57
+ const stopWatch = vueDemi.watch(() => [unrefElement(target), shared.resolveUnref(options)], ([el, options2]) => {
58
58
  cleanup();
59
59
  if (!el)
60
60
  return;
61
61
  cleanups.push(...events.flatMap((event) => {
62
- return listeners.map((listener) => register(el, event, listener));
62
+ return listeners.map((listener) => register(el, event, listener, options2));
63
63
  }));
64
64
  }, { immediate: true, flush: "post" });
65
65
  const stop = () => {
@@ -70,12 +70,16 @@ function useEventListener(...args) {
70
70
  return stop;
71
71
  }
72
72
 
73
+ let _iOSWorkaround = false;
73
74
  function onClickOutside(target, handler, options = {}) {
74
75
  const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
75
76
  if (!window)
76
77
  return;
78
+ if (shared.isIOS && !_iOSWorkaround) {
79
+ _iOSWorkaround = true;
80
+ Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", shared.noop));
81
+ }
77
82
  let shouldListen = true;
78
- let fallback;
79
83
  const shouldIgnore = (event) => {
80
84
  return ignore.some((target2) => {
81
85
  if (typeof target2 === "string") {
@@ -87,7 +91,6 @@ function onClickOutside(target, handler, options = {}) {
87
91
  });
88
92
  };
89
93
  const listener = (event) => {
90
- window.clearTimeout(fallback);
91
94
  const el = unrefElement(target);
92
95
  if (!el || el === event.target || event.composedPath().includes(el))
93
96
  return;
@@ -106,13 +109,6 @@ function onClickOutside(target, handler, options = {}) {
106
109
  if (el)
107
110
  shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
108
111
  }, { passive: true }),
109
- useEventListener(window, "pointerup", (e) => {
110
- if (e.button === 0) {
111
- const path = e.composedPath();
112
- e.composedPath = () => path;
113
- fallback = window.setTimeout(() => listener(e), 50);
114
- }
115
- }, { passive: true }),
116
112
  detectIframe && useEventListener(window, "blur", (event) => {
117
113
  var _a;
118
114
  const el = unrefElement(target);
@@ -242,7 +238,7 @@ function onLongPress(target, handler, options) {
242
238
  useEventListener(elementRef, "pointerleave", clear, listenerOptions);
243
239
  }
244
240
 
245
- const OnLongPress = /* @__PURE__ */ vueDemi.defineComponent({
241
+ const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
246
242
  name: "OnLongPress",
247
243
  props: ["as", "options"],
248
244
  emits: ["trigger"],
@@ -267,7 +263,7 @@ const vOnLongPress = {
267
263
  }
268
264
  };
269
265
 
270
- const UseActiveElement = /* @__PURE__ */ vueDemi.defineComponent({
266
+ const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
271
267
  name: "UseActiveElement",
272
268
  setup(props, { slots }) {
273
269
  const data = vueDemi.reactive({
@@ -280,7 +276,7 @@ const UseActiveElement = /* @__PURE__ */ vueDemi.defineComponent({
280
276
  }
281
277
  });
282
278
 
283
- const UseBattery = /* @__PURE__ */ vueDemi.defineComponent({
279
+ const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
284
280
  name: "UseBattery",
285
281
  setup(props, { slots }) {
286
282
  const data = vueDemi.reactive(core.useBattery(props));
@@ -291,7 +287,7 @@ const UseBattery = /* @__PURE__ */ vueDemi.defineComponent({
291
287
  }
292
288
  });
293
289
 
294
- const UseBrowserLocation = /* @__PURE__ */ vueDemi.defineComponent({
290
+ const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
295
291
  name: "UseBrowserLocation",
296
292
  setup(props, { slots }) {
297
293
  const data = vueDemi.reactive(core.useBrowserLocation());
@@ -364,6 +360,7 @@ const StorageSerializers = {
364
360
  write: (v) => v.toISOString()
365
361
  }
366
362
  };
363
+ const customStorageEventName = "vueuse-storage";
367
364
  function useStorage(key, defaults, storage, options = {}) {
368
365
  var _a;
369
366
  const {
@@ -396,8 +393,10 @@ function useStorage(key, defaults, storage, options = {}) {
396
393
  const type = guessSerializerType(rawInit);
397
394
  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
398
395
  const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(data, () => write(data.value), { flush, deep, eventFilter });
399
- if (window && listenToStorageChanges)
396
+ if (window && listenToStorageChanges) {
400
397
  useEventListener(window, "storage", update);
398
+ useEventListener(window, customStorageEventName, updateFromCustomEvent);
399
+ }
401
400
  update();
402
401
  return data;
403
402
  function write(v) {
@@ -410,11 +409,13 @@ function useStorage(key, defaults, storage, options = {}) {
410
409
  if (oldValue !== serialized) {
411
410
  storage.setItem(key, serialized);
412
411
  if (window) {
413
- window == null ? void 0 : window.dispatchEvent(new StorageEvent("storage", {
414
- key,
415
- oldValue,
416
- newValue: serialized,
417
- storageArea: storage
412
+ window.dispatchEvent(new CustomEvent(customStorageEventName, {
413
+ detail: {
414
+ key,
415
+ oldValue,
416
+ newValue: serialized,
417
+ storageArea: storage
418
+ }
418
419
  }));
419
420
  }
420
421
  }
@@ -442,6 +443,9 @@ function useStorage(key, defaults, storage, options = {}) {
442
443
  return serializer.read(rawValue);
443
444
  }
444
445
  }
446
+ function updateFromCustomEvent(event) {
447
+ update(event.detail);
448
+ }
445
449
  function update(event) {
446
450
  if (event && event.storageArea !== storage)
447
451
  return;
@@ -584,7 +588,7 @@ function useColorMode(options = {}) {
584
588
  return state;
585
589
  }
586
590
 
587
- const UseColorMode = /* @__PURE__ */ vueDemi.defineComponent({
591
+ const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
588
592
  name: "UseColorMode",
589
593
  props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
590
594
  setup(props, { slots }) {
@@ -599,7 +603,7 @@ const UseColorMode = /* @__PURE__ */ vueDemi.defineComponent({
599
603
  }
600
604
  });
601
605
 
602
- const UseDark = /* @__PURE__ */ vueDemi.defineComponent({
606
+ const UseDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
603
607
  name: "UseDark",
604
608
  props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
605
609
  setup(props, { slots }) {
@@ -615,7 +619,7 @@ const UseDark = /* @__PURE__ */ vueDemi.defineComponent({
615
619
  }
616
620
  });
617
621
 
618
- const UseDeviceMotion = /* @__PURE__ */ vueDemi.defineComponent({
622
+ const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
619
623
  name: "UseDeviceMotion",
620
624
  setup(props, { slots }) {
621
625
  const data = vueDemi.reactive(core.useDeviceMotion());
@@ -626,7 +630,7 @@ const UseDeviceMotion = /* @__PURE__ */ vueDemi.defineComponent({
626
630
  }
627
631
  });
628
632
 
629
- const UseDeviceOrientation = /* @__PURE__ */ vueDemi.defineComponent({
633
+ const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
630
634
  name: "UseDeviceOrientation",
631
635
  setup(props, { slots }) {
632
636
  const data = vueDemi.reactive(core.useDeviceOrientation());
@@ -637,7 +641,7 @@ const UseDeviceOrientation = /* @__PURE__ */ vueDemi.defineComponent({
637
641
  }
638
642
  });
639
643
 
640
- const UseDevicePixelRatio = /* @__PURE__ */ vueDemi.defineComponent({
644
+ const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
641
645
  name: "UseDevicePixelRatio",
642
646
  setup(props, { slots }) {
643
647
  const data = vueDemi.reactive({
@@ -650,7 +654,7 @@ const UseDevicePixelRatio = /* @__PURE__ */ vueDemi.defineComponent({
650
654
  }
651
655
  });
652
656
 
653
- const UseDevicesList = /* @__PURE__ */ vueDemi.defineComponent({
657
+ const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
654
658
  name: "UseDevicesList",
655
659
  props: ["onUpdated", "requestPermissions", "constraints"],
656
660
  setup(props, { slots }) {
@@ -662,7 +666,7 @@ const UseDevicesList = /* @__PURE__ */ vueDemi.defineComponent({
662
666
  }
663
667
  });
664
668
 
665
- const UseDocumentVisibility = /* @__PURE__ */ vueDemi.defineComponent({
669
+ const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
666
670
  name: "UseDocumentVisibility",
667
671
  setup(props, { slots }) {
668
672
  const data = vueDemi.reactive({
@@ -694,7 +698,7 @@ var __spreadValues$a = (a, b) => {
694
698
  return a;
695
699
  };
696
700
  var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
697
- const UseDraggable = /* @__PURE__ */ vueDemi.defineComponent({
701
+ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
698
702
  name: "UseDraggable",
699
703
  props: [
700
704
  "storageKey",
@@ -733,7 +737,7 @@ const UseDraggable = /* @__PURE__ */ vueDemi.defineComponent({
733
737
  }
734
738
  });
735
739
 
736
- const UseElementBounding = /* @__PURE__ */ vueDemi.defineComponent({
740
+ const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
737
741
  name: "UseElementBounding",
738
742
  props: ["box", "as"],
739
743
  setup(props, { slots }) {
@@ -746,10 +750,26 @@ const UseElementBounding = /* @__PURE__ */ vueDemi.defineComponent({
746
750
  }
747
751
  });
748
752
 
749
- function useElementHover(el) {
753
+ function useElementHover(el, options = {}) {
754
+ const delayEnter = options ? options.delayEnter : 0;
755
+ const delayLeave = options ? options.delayLeave : 0;
750
756
  const isHovered = vueDemi.ref(false);
751
- useEventListener(el, "mouseenter", () => isHovered.value = true);
752
- useEventListener(el, "mouseleave", () => isHovered.value = false);
757
+ let timer;
758
+ const toggle = (entering) => {
759
+ const delay = entering ? delayEnter : delayLeave;
760
+ if (timer) {
761
+ clearTimeout(timer);
762
+ timer = void 0;
763
+ }
764
+ if (delay)
765
+ timer = setTimeout(() => isHovered.value = entering, delay);
766
+ else
767
+ isHovered.value = entering;
768
+ };
769
+ if (!window)
770
+ return isHovered;
771
+ useEventListener(el, "mouseenter", () => toggle(true), { passive: true });
772
+ useEventListener(el, "mouseleave", () => toggle(false), { passive: true });
753
773
  return isHovered;
754
774
  }
755
775
 
@@ -762,7 +782,7 @@ const vElementHover = {
762
782
  }
763
783
  };
764
784
 
765
- const UseElementSize = /* @__PURE__ */ vueDemi.defineComponent({
785
+ const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
766
786
  name: "UseElementSize",
767
787
  props: ["width", "height", "box"],
768
788
  setup(props, { slots }) {
@@ -866,7 +886,7 @@ const vElementSize = {
866
886
  }
867
887
  };
868
888
 
869
- const UseElementVisibility = /* @__PURE__ */ vueDemi.defineComponent({
889
+ const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
870
890
  name: "UseElementVisibility",
871
891
  props: ["as"],
872
892
  setup(props, { slots }) {
@@ -919,7 +939,7 @@ const vElementVisibility = {
919
939
  }
920
940
  };
921
941
 
922
- const UseEyeDropper = /* @__PURE__ */ vueDemi.defineComponent({
942
+ const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
923
943
  name: "UseEyeDropper",
924
944
  props: {
925
945
  sRGBHex: String
@@ -933,7 +953,7 @@ const UseEyeDropper = /* @__PURE__ */ vueDemi.defineComponent({
933
953
  }
934
954
  });
935
955
 
936
- const UseFullscreen = /* @__PURE__ */ vueDemi.defineComponent({
956
+ const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
937
957
  name: "UseFullscreen",
938
958
  props: ["as"],
939
959
  setup(props, { slots }) {
@@ -946,7 +966,7 @@ const UseFullscreen = /* @__PURE__ */ vueDemi.defineComponent({
946
966
  }
947
967
  });
948
968
 
949
- const UseGeolocation = /* @__PURE__ */ vueDemi.defineComponent({
969
+ const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
950
970
  name: "UseGeolocation",
951
971
  props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
952
972
  setup(props, { slots }) {
@@ -958,7 +978,7 @@ const UseGeolocation = /* @__PURE__ */ vueDemi.defineComponent({
958
978
  }
959
979
  });
960
980
 
961
- const UseIdle = /* @__PURE__ */ vueDemi.defineComponent({
981
+ const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
962
982
  name: "UseIdle",
963
983
  props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
964
984
  setup(props, { slots }) {
@@ -1056,7 +1076,7 @@ const useImage = (options, asyncStateOptions = {}) => {
1056
1076
  return state;
1057
1077
  };
1058
1078
 
1059
- const UseImage = /* @__PURE__ */ vueDemi.defineComponent({
1079
+ const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1060
1080
  name: "UseImage",
1061
1081
  props: [
1062
1082
  "src",
@@ -1139,14 +1159,17 @@ function useScroll(element, options = {}) {
1139
1159
  top: false,
1140
1160
  bottom: false
1141
1161
  });
1142
- const onScrollEnd = shared.useDebounceFn((e) => {
1162
+ const onScrollEnd = (e) => {
1163
+ if (!isScrolling.value)
1164
+ return;
1143
1165
  isScrolling.value = false;
1144
1166
  directions.left = false;
1145
1167
  directions.right = false;
1146
1168
  directions.top = false;
1147
1169
  directions.bottom = false;
1148
1170
  onStop(e);
1149
- }, throttle + idle);
1171
+ };
1172
+ const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
1150
1173
  const onScrollHandler = (e) => {
1151
1174
  const eventTarget = e.target === document ? e.target.documentElement : e.target;
1152
1175
  const scrollLeft = eventTarget.scrollLeft;
@@ -1164,10 +1187,11 @@ function useScroll(element, options = {}) {
1164
1187
  arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
1165
1188
  internalY.value = scrollTop;
1166
1189
  isScrolling.value = true;
1167
- onScrollEnd(e);
1190
+ onScrollEndDebounced(e);
1168
1191
  onScroll(e);
1169
1192
  };
1170
1193
  useEventListener(element, "scroll", throttle ? shared.useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler, eventListenerOptions);
1194
+ useEventListener(element, "scrollend", onScrollEnd, eventListenerOptions);
1171
1195
  return {
1172
1196
  x,
1173
1197
  y,
@@ -1281,7 +1305,7 @@ const vIntersectionObserver = {
1281
1305
  }
1282
1306
  };
1283
1307
 
1284
- const UseMouse = /* @__PURE__ */ vueDemi.defineComponent({
1308
+ const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1285
1309
  name: "UseMouse",
1286
1310
  props: ["touch", "resetOnTouchEnds", "initialValue"],
1287
1311
  setup(props, { slots }) {
@@ -1293,7 +1317,7 @@ const UseMouse = /* @__PURE__ */ vueDemi.defineComponent({
1293
1317
  }
1294
1318
  });
1295
1319
 
1296
- const UseMouseInElement = /* @__PURE__ */ vueDemi.defineComponent({
1320
+ const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1297
1321
  name: "UseMouseElement",
1298
1322
  props: ["handleOutside", "as"],
1299
1323
  setup(props, { slots }) {
@@ -1325,7 +1349,7 @@ var __spreadValues$7 = (a, b) => {
1325
1349
  return a;
1326
1350
  };
1327
1351
  var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
1328
- const UseMousePressed = /* @__PURE__ */ vueDemi.defineComponent({
1352
+ const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1329
1353
  name: "UseMousePressed",
1330
1354
  props: ["touch", "initialValue", "as"],
1331
1355
  setup(props, { slots }) {
@@ -1338,7 +1362,7 @@ const UseMousePressed = /* @__PURE__ */ vueDemi.defineComponent({
1338
1362
  }
1339
1363
  });
1340
1364
 
1341
- const UseNetwork = /* @__PURE__ */ vueDemi.defineComponent({
1365
+ const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1342
1366
  name: "UseNetwork",
1343
1367
  setup(props, { slots }) {
1344
1368
  const data = vueDemi.reactive(core.useNetwork());
@@ -1368,7 +1392,7 @@ var __spreadValues$6 = (a, b) => {
1368
1392
  return a;
1369
1393
  };
1370
1394
  var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
1371
- const UseNow = /* @__PURE__ */ vueDemi.defineComponent({
1395
+ const UseNow = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1372
1396
  name: "UseNow",
1373
1397
  props: ["interval"],
1374
1398
  setup(props, { slots }) {
@@ -1380,7 +1404,7 @@ const UseNow = /* @__PURE__ */ vueDemi.defineComponent({
1380
1404
  }
1381
1405
  });
1382
1406
 
1383
- const UseObjectUrl = /* @__PURE__ */ vueDemi.defineComponent({
1407
+ const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1384
1408
  name: "UseObjectUrl",
1385
1409
  props: [
1386
1410
  "object"
@@ -1414,7 +1438,7 @@ var __spreadValues$5 = (a, b) => {
1414
1438
  return a;
1415
1439
  };
1416
1440
  var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
1417
- const UseOffsetPagination = /* @__PURE__ */ vueDemi.defineComponent({
1441
+ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1418
1442
  name: "UseOffsetPagination",
1419
1443
  props: [
1420
1444
  "total",
@@ -1454,7 +1478,7 @@ const UseOffsetPagination = /* @__PURE__ */ vueDemi.defineComponent({
1454
1478
  }
1455
1479
  });
1456
1480
 
1457
- const UseOnline = /* @__PURE__ */ vueDemi.defineComponent({
1481
+ const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1458
1482
  name: "UseOnline",
1459
1483
  setup(props, { slots }) {
1460
1484
  const data = vueDemi.reactive({
@@ -1467,7 +1491,7 @@ const UseOnline = /* @__PURE__ */ vueDemi.defineComponent({
1467
1491
  }
1468
1492
  });
1469
1493
 
1470
- const UsePageLeave = /* @__PURE__ */ vueDemi.defineComponent({
1494
+ const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1471
1495
  name: "UsePageLeave",
1472
1496
  setup(props, { slots }) {
1473
1497
  const data = vueDemi.reactive({
@@ -1499,7 +1523,7 @@ var __spreadValues$4 = (a, b) => {
1499
1523
  return a;
1500
1524
  };
1501
1525
  var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
1502
- const UsePointer = /* @__PURE__ */ vueDemi.defineComponent({
1526
+ const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1503
1527
  name: "UsePointer",
1504
1528
  props: [
1505
1529
  "pointerTypes",
@@ -1518,7 +1542,7 @@ const UsePointer = /* @__PURE__ */ vueDemi.defineComponent({
1518
1542
  }
1519
1543
  });
1520
1544
 
1521
- const UsePointerLock = vueDemi.defineComponent({
1545
+ const UsePointerLock = /* #__PURE__ */ vueDemi.defineComponent({
1522
1546
  name: "UsePointerLock",
1523
1547
  props: ["as"],
1524
1548
  setup(props, { slots }) {
@@ -1531,7 +1555,7 @@ const UsePointerLock = vueDemi.defineComponent({
1531
1555
  }
1532
1556
  });
1533
1557
 
1534
- const UsePreferredColorScheme = /* @__PURE__ */ vueDemi.defineComponent({
1558
+ const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1535
1559
  name: "UsePreferredColorScheme",
1536
1560
  setup(props, { slots }) {
1537
1561
  const data = vueDemi.reactive({
@@ -1544,7 +1568,7 @@ const UsePreferredColorScheme = /* @__PURE__ */ vueDemi.defineComponent({
1544
1568
  }
1545
1569
  });
1546
1570
 
1547
- const UsePreferredContrast = /* @__PURE__ */ vueDemi.defineComponent({
1571
+ const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1548
1572
  name: "UsePreferredContrast",
1549
1573
  setup(props, { slots }) {
1550
1574
  const data = vueDemi.reactive({
@@ -1557,7 +1581,7 @@ const UsePreferredContrast = /* @__PURE__ */ vueDemi.defineComponent({
1557
1581
  }
1558
1582
  });
1559
1583
 
1560
- const UsePreferredDark = /* @__PURE__ */ vueDemi.defineComponent({
1584
+ const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1561
1585
  name: "UsePreferredDark",
1562
1586
  setup(props, { slots }) {
1563
1587
  const data = vueDemi.reactive({
@@ -1570,7 +1594,7 @@ const UsePreferredDark = /* @__PURE__ */ vueDemi.defineComponent({
1570
1594
  }
1571
1595
  });
1572
1596
 
1573
- const UsePreferredLanguages = /* @__PURE__ */ vueDemi.defineComponent({
1597
+ const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1574
1598
  name: "UsePreferredLanguages",
1575
1599
  setup(props, { slots }) {
1576
1600
  const data = vueDemi.reactive({
@@ -1583,7 +1607,7 @@ const UsePreferredLanguages = /* @__PURE__ */ vueDemi.defineComponent({
1583
1607
  }
1584
1608
  });
1585
1609
 
1586
- const UsePreferredReducedMotion = /* @__PURE__ */ vueDemi.defineComponent({
1610
+ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1587
1611
  name: "UsePreferredReducedMotion",
1588
1612
  setup(props, { slots }) {
1589
1613
  const data = vueDemi.reactive({
@@ -1656,7 +1680,7 @@ function getValue(position) {
1656
1680
  return getComputedStyle(document.documentElement).getPropertyValue(position);
1657
1681
  }
1658
1682
 
1659
- const UseScreenSafeArea = /* @__PURE__ */ vueDemi.defineComponent({
1683
+ const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1660
1684
  name: "UseScreenSafeArea",
1661
1685
  props: {
1662
1686
  top: Boolean,
@@ -1741,7 +1765,7 @@ const vScroll = {
1741
1765
 
1742
1766
  function checkOverflowScroll(ele) {
1743
1767
  const style = window.getComputedStyle(ele);
1744
- if (style.overflowX === "scroll" || style.overflowY === "scroll") {
1768
+ if (style.overflowX === "scroll" || style.overflowY === "scroll" || style.overflowX === "auto" && ele.clientHeight < ele.scrollHeight || style.overflowY === "auto" && ele.clientWidth < ele.scrollWidth) {
1745
1769
  return true;
1746
1770
  } else {
1747
1771
  const parent = ele.parentNode;
@@ -1842,7 +1866,7 @@ var __spreadValues$2 = (a, b) => {
1842
1866
  return a;
1843
1867
  };
1844
1868
  var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
1845
- const UseTimeAgo = /* @__PURE__ */ vueDemi.defineComponent({
1869
+ const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1846
1870
  name: "UseTimeAgo",
1847
1871
  props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
1848
1872
  setup(props, { slots }) {
@@ -1873,7 +1897,7 @@ var __spreadValues$1 = (a, b) => {
1873
1897
  return a;
1874
1898
  };
1875
1899
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
1876
- const UseTimestamp = /* @__PURE__ */ vueDemi.defineComponent({
1900
+ const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1877
1901
  name: "UseTimestamp",
1878
1902
  props: ["immediate", "interval", "offset"],
1879
1903
  setup(props, { slots }) {
@@ -1901,7 +1925,7 @@ var __spreadValues = (a, b) => {
1901
1925
  }
1902
1926
  return a;
1903
1927
  };
1904
- const UseVirtualList = /* @__PURE__ */ vueDemi.defineComponent({
1928
+ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1905
1929
  name: "UseVirtualList",
1906
1930
  props: [
1907
1931
  "list",
@@ -1919,7 +1943,7 @@ const UseVirtualList = /* @__PURE__ */ vueDemi.defineComponent({
1919
1943
  }
1920
1944
  });
1921
1945
 
1922
- const UseWindowFocus = /* @__PURE__ */ vueDemi.defineComponent({
1946
+ const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1923
1947
  name: "UseWindowFocus",
1924
1948
  setup(props, { slots }) {
1925
1949
  const data = vueDemi.reactive({
@@ -1932,7 +1956,7 @@ const UseWindowFocus = /* @__PURE__ */ vueDemi.defineComponent({
1932
1956
  }
1933
1957
  });
1934
1958
 
1935
- const UseWindowSize = /* @__PURE__ */ vueDemi.defineComponent({
1959
+ const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1936
1960
  name: "UseWindowSize",
1937
1961
  props: ["initialWidth", "initialHeight"],
1938
1962
  setup(props, { slots }) {