@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.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 : undefined;
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 ? undefined : plain.$el) != null ? _a : plain;
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 : undefined;
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 ? undefined : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != 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 ? undefined : raw_targets.length) || !(raw_events == null ? undefined : raw_events.length) || !(raw_listeners == null ? undefined : raw_listeners.length))
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 ? undefined : _a.tagName) === "IFRAME" && !(el == null ? undefined : el.contains(window.document.activeElement))) {
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 ? undefined : _a.split(",")) != null ? _b : true;
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 = undefined;
260
+ timeout = void 0;
247
261
  }
248
- posStart = undefined;
249
- startTimestamp = undefined;
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 ? undefined : options.onMouseUp) || !_posStart || !_startTimestamp)
270
+ if (!(options == null ? void 0 : options.onMouseUp) || !_posStart || !_startTimestamp)
257
271
  return;
258
- if (((_a2 = options == null ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
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 ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
274
+ if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
261
275
  ev.preventDefault();
262
- if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
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 ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
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 ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
288
+ if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
275
289
  ev.preventDefault();
276
- if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
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 ? undefined : options.delay) != null ? _d : DEFAULT_DELAY
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 ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
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 ? undefined : options.distanceThreshold) === false)
309
+ if (!posStart || (options == null ? void 0 : options.distanceThreshold) === false)
296
310
  return;
297
- if ((_b2 = options == null ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
311
+ if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
298
312
  ev.preventDefault();
299
- if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
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 ? undefined : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
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 ? undefined : options.modifiers) == null ? undefined : _a.capture,
309
- once: (_b = options == null ? undefined : options.modifiers) == null ? undefined : _b.once
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 ? undefined : _a.call(slots, data);
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 : undefined;
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 ? undefined : window.document.querySelector(selector2) : unrefElement(selector2);
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 : undefined;
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 : undefined
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 ? undefined : _a.call(props, position, event);
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 = undefined;
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 ? undefined : observer.takeRecords();
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 = undefined;
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 ? undefined : window.document,
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 ? undefined : stopFn();
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 = undefined;
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 ? undefined : _a.namespaceURI) == null ? undefined : _b.includes("svg");
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 ? undefined : _a[0];
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(undefined);
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 = undefined;
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
- undefined,
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, undefined);
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(undefined, y2);
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 ? undefined : _c.scrollTo({
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 ? undefined : _element.document) == null ? undefined : _d.documentElement) || (_element == null ? undefined : _element.documentElement) || _element;
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 ? undefined : target.document) == null ? undefined : _a.documentElement) || (target == null ? undefined : target.documentElement) || unrefElement(target);
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 Touch ? null : [event.movementX, event.movementY]
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 ? undefined : window.document.body);
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 ? undefined : _a.call(props, ...args);
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 ? undefined : _a.call(props, ...args);
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 ? undefined : _a.call(props, ...args);
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 ? undefined : window.document) == null ? undefined : _a.documentElement);
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 ? undefined : _a.trim();
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 (((_a = elRef.value) == null ? undefined : _a.style) && raw_prop) {
2271
+ if ((el == null ? void 0 : el.style) && raw_prop) {
2254
2272
  if (val == null)
2255
- elRef.value.style.removeProperty(raw_prop);
2273
+ el.style.removeProperty(raw_prop);
2256
2274
  else
2257
- elRef.value.style.setProperty(raw_prop, val);
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 ? undefined : _a.call(options, e);
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 ? undefined : _a.call(options, e);
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 ? undefined : stopTouchMoveListener();
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.5.0",
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.5.0",
46
- "@vueuse/shared": "12.5.0"
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"