@vueuse/components 10.5.0 → 10.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 CHANGED
@@ -114,8 +114,7 @@ function onClickOutside(target, handler, options = {}) {
114
114
  useEventListener(window, "click", listener, { passive: true, capture }),
115
115
  useEventListener(window, "pointerdown", (e) => {
116
116
  const el = unrefElement(target);
117
- if (el)
118
- shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
117
+ shouldListen = !shouldIgnore(e) && !!(el && !e.composedPath().includes(el));
119
118
  }, { passive: true }),
120
119
  detectIframe && useEventListener(window, "blur", (event) => {
121
120
  setTimeout(() => {
@@ -238,8 +237,12 @@ function onLongPress(target, handler, options) {
238
237
  capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
239
238
  once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
240
239
  };
241
- useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
242
- useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions);
240
+ const cleanup = [
241
+ useEventListener(elementRef, "pointerdown", onDown, listenerOptions),
242
+ useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions)
243
+ ].filter(Boolean);
244
+ const stop = () => cleanup.forEach((fn) => fn());
245
+ return stop;
243
246
  }
244
247
 
245
248
  const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
@@ -306,6 +309,24 @@ const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompone
306
309
  }
307
310
  });
308
311
 
312
+ const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
313
+ name: "UseClipboard",
314
+ props: [
315
+ "source",
316
+ "read",
317
+ "navigator",
318
+ "copiedDuring",
319
+ "legacy"
320
+ ],
321
+ setup(props, { slots }) {
322
+ const data = vueDemi.reactive(core.useClipboard(props));
323
+ return () => {
324
+ var _a;
325
+ return (_a = slots.default) == null ? void 0 : _a.call(slots, data);
326
+ };
327
+ }
328
+ });
329
+
309
330
  const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
310
331
  const globalKey = "__vueuse_ssr_handlers__";
311
332
  const handlers = /* @__PURE__ */ getHandlers();
@@ -370,9 +391,10 @@ function useStorage(key, defaults, storage, options = {}) {
370
391
  eventFilter,
371
392
  onError = (e) => {
372
393
  console.error(e);
373
- }
394
+ },
395
+ initOnMounted
374
396
  } = options;
375
- const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(defaults);
397
+ const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(typeof defaults === "function" ? defaults() : defaults);
376
398
  if (!storage) {
377
399
  try {
378
400
  storage = getSSRHandler("getDefaultStorage", () => {
@@ -394,10 +416,15 @@ function useStorage(key, defaults, storage, options = {}) {
394
416
  { flush, deep, eventFilter }
395
417
  );
396
418
  if (window && listenToStorageChanges) {
397
- useEventListener(window, "storage", update);
398
- useEventListener(window, customStorageEventName, updateFromCustomEvent);
419
+ shared.tryOnMounted(() => {
420
+ useEventListener(window, "storage", update);
421
+ useEventListener(window, customStorageEventName, updateFromCustomEvent);
422
+ if (initOnMounted)
423
+ update();
424
+ });
399
425
  }
400
- update();
426
+ if (!initOnMounted)
427
+ update();
401
428
  return data;
402
429
  function write(v) {
403
430
  try {
@@ -853,7 +880,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
853
880
  });
854
881
  const width = vueDemi.ref(initialSize.width);
855
882
  const height = vueDemi.ref(initialSize.height);
856
- useResizeObserver(
883
+ const { stop: stop1 } = useResizeObserver(
857
884
  target,
858
885
  ([entry]) => {
859
886
  const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
@@ -877,16 +904,28 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
877
904
  },
878
905
  options
879
906
  );
880
- vueDemi.watch(
907
+ shared.tryOnMounted(() => {
908
+ const ele = unrefElement(target);
909
+ if (ele) {
910
+ width.value = "offsetWidth" in ele ? ele.offsetWidth : initialSize.width;
911
+ height.value = "offsetHeight" in ele ? ele.offsetHeight : initialSize.height;
912
+ }
913
+ });
914
+ const stop2 = vueDemi.watch(
881
915
  () => unrefElement(target),
882
916
  (ele) => {
883
917
  width.value = ele ? initialSize.width : 0;
884
918
  height.value = ele ? initialSize.height : 0;
885
919
  }
886
920
  );
921
+ function stop() {
922
+ stop1();
923
+ stop2();
924
+ }
887
925
  return {
888
926
  width,
889
- height
927
+ height,
928
+ stop
890
929
  };
891
930
  }
892
931
 
@@ -1307,6 +1346,12 @@ function useScroll(element, options = {}) {
1307
1346
  throttle ? shared.useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler,
1308
1347
  eventListenerOptions
1309
1348
  );
1349
+ shared.tryOnMounted(() => {
1350
+ const _element = shared.toValue(element);
1351
+ if (!_element)
1352
+ return;
1353
+ setArrivedState(_element);
1354
+ });
1310
1355
  useEventListener(
1311
1356
  element,
1312
1357
  "scrollend",
@@ -1665,6 +1710,9 @@ function useMutationObserver(target, callback, options = {}) {
1665
1710
  },
1666
1711
  { immediate: true }
1667
1712
  );
1713
+ const takeRecords = () => {
1714
+ return observer == null ? void 0 : observer.takeRecords();
1715
+ };
1668
1716
  const stop = () => {
1669
1717
  cleanup();
1670
1718
  stopWatch();
@@ -1672,7 +1720,8 @@ function useMutationObserver(target, callback, options = {}) {
1672
1720
  shared.tryOnScopeDispose(stop);
1673
1721
  return {
1674
1722
  isSupported,
1675
- stop
1723
+ stop,
1724
+ takeRecords
1676
1725
  };
1677
1726
  }
1678
1727
 
@@ -1840,6 +1889,7 @@ function preventDefault(rawEvent) {
1840
1889
  e.preventDefault();
1841
1890
  return false;
1842
1891
  }
1892
+ const elInitialOverflow = /* @__PURE__ */ new WeakMap();
1843
1893
  function useScrollLock(element, initialState = false) {
1844
1894
  const isLocked = vueDemi.ref(initialState);
1845
1895
  let stopTouchMoveListener = null;
@@ -1848,7 +1898,8 @@ function useScrollLock(element, initialState = false) {
1848
1898
  const target = resolveElement(shared.toValue(el));
1849
1899
  if (target) {
1850
1900
  const ele = target;
1851
- initialOverflow = ele.style.overflow;
1901
+ if (!elInitialOverflow.get(ele))
1902
+ elInitialOverflow.set(ele, initialOverflow);
1852
1903
  if (isLocked.value)
1853
1904
  ele.style.overflow = "hidden";
1854
1905
  }
@@ -1873,11 +1924,13 @@ function useScrollLock(element, initialState = false) {
1873
1924
  isLocked.value = true;
1874
1925
  };
1875
1926
  const unlock = () => {
1927
+ var _a;
1876
1928
  const el = resolveElement(shared.toValue(element));
1877
1929
  if (!el || !isLocked.value)
1878
1930
  return;
1879
1931
  shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
1880
- el.style.overflow = initialOverflow;
1932
+ el.style.overflow = (_a = elInitialOverflow.get(el)) != null ? _a : "";
1933
+ elInitialOverflow.delete(el);
1881
1934
  isLocked.value = false;
1882
1935
  };
1883
1936
  shared.tryOnScopeDispose(unlock);
@@ -1943,7 +1996,8 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1943
1996
  const { list: listRef } = vueDemi.toRefs(props);
1944
1997
  const { list, containerProps, wrapperProps, scrollTo } = core.useVirtualList(listRef, props.options);
1945
1998
  expose({ scrollTo });
1946
- typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
1999
+ if (containerProps.style && typeof containerProps.style === "object" && !Array.isArray(containerProps.style))
2000
+ containerProps.style.height = props.height || "300px";
1947
2001
  return () => vueDemi.h("div", { ...containerProps }, [
1948
2002
  vueDemi.h("div", { ...wrapperProps.value }, list.value.map((item) => vueDemi.h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
1949
2003
  ]);
@@ -1980,6 +2034,7 @@ exports.OnLongPress = OnLongPress;
1980
2034
  exports.UseActiveElement = UseActiveElement;
1981
2035
  exports.UseBattery = UseBattery;
1982
2036
  exports.UseBrowserLocation = UseBrowserLocation;
2037
+ exports.UseClipboard = UseClipboard;
1983
2038
  exports.UseColorMode = UseColorMode;
1984
2039
  exports.UseDark = UseDark;
1985
2040
  exports.UseDeviceMotion = UseDeviceMotion;
package/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as vue_demi from 'vue-demi';
2
2
  import { ComponentPublicInstance, ObjectDirective, Ref, UnwrapNestedRefs, ComputedRef, FunctionDirective } from 'vue-demi';
3
3
  import { MaybeRef, MaybeRefOrGetter, ConfigurableEventFilter, ConfigurableFlush, Awaitable } from '@vueuse/shared';
4
- import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
4
+ import { UseClipboardOptions, UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
5
5
 
6
6
  interface ConfigurableWindow {
7
7
  window?: Window;
@@ -108,6 +108,10 @@ declare const UseBrowserLocation: vue_demi.DefineComponent<{}, () => vue_demi.VN
108
108
  [key: string]: any;
109
109
  }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
110
110
 
111
+ interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source> {
112
+ }
113
+ declare const UseClipboard: vue_demi.DefineComponent<UseClipboardProps<string>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseClipboardProps<string>>, {}, {}>;
114
+
111
115
  interface StorageLike {
112
116
  getItem(key: string): string | null;
113
117
  setItem(key: string, value: string): void;
@@ -162,6 +166,12 @@ interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWind
162
166
  * @default false
163
167
  */
164
168
  shallow?: boolean;
169
+ /**
170
+ * Wait for the component to be mounted before reading the storage.
171
+ *
172
+ * @default false
173
+ */
174
+ initOnMounted?: boolean;
165
175
  }
166
176
 
167
177
  type BasicColorMode = 'light' | 'dark';
@@ -301,6 +311,7 @@ interface ElementSize {
301
311
  declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
302
312
  width: vue_demi.Ref<number>;
303
313
  height: vue_demi.Ref<number>;
314
+ stop: () => void;
304
315
  };
305
316
 
306
317
  type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0 ? undefined : (((...b: T) => void) extends (a: any, ...b: infer I) => void ? I : []);
@@ -644,4 +655,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
644
655
 
645
656
  declare const UseWindowSize: vue_demi.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseWindowSizeOptions>, {}, {}>;
646
657
 
647
- export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
658
+ export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
package/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as vue_demi from 'vue-demi';
2
2
  import { ComponentPublicInstance, ObjectDirective, Ref, UnwrapNestedRefs, ComputedRef, FunctionDirective } from 'vue-demi';
3
3
  import { MaybeRef, MaybeRefOrGetter, ConfigurableEventFilter, ConfigurableFlush, Awaitable } from '@vueuse/shared';
4
- import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
4
+ import { UseClipboardOptions, UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
5
5
 
6
6
  interface ConfigurableWindow {
7
7
  window?: Window;
@@ -108,6 +108,10 @@ declare const UseBrowserLocation: vue_demi.DefineComponent<{}, () => vue_demi.VN
108
108
  [key: string]: any;
109
109
  }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
110
110
 
111
+ interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source> {
112
+ }
113
+ declare const UseClipboard: vue_demi.DefineComponent<UseClipboardProps<string>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseClipboardProps<string>>, {}, {}>;
114
+
111
115
  interface StorageLike {
112
116
  getItem(key: string): string | null;
113
117
  setItem(key: string, value: string): void;
@@ -162,6 +166,12 @@ interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWind
162
166
  * @default false
163
167
  */
164
168
  shallow?: boolean;
169
+ /**
170
+ * Wait for the component to be mounted before reading the storage.
171
+ *
172
+ * @default false
173
+ */
174
+ initOnMounted?: boolean;
165
175
  }
166
176
 
167
177
  type BasicColorMode = 'light' | 'dark';
@@ -301,6 +311,7 @@ interface ElementSize {
301
311
  declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
302
312
  width: vue_demi.Ref<number>;
303
313
  height: vue_demi.Ref<number>;
314
+ stop: () => void;
304
315
  };
305
316
 
306
317
  type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0 ? undefined : (((...b: T) => void) extends (a: any, ...b: infer I) => void ? I : []);
@@ -644,4 +655,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
644
655
 
645
656
  declare const UseWindowSize: vue_demi.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseWindowSizeOptions>, {}, {}>;
646
657
 
647
- export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
658
+ export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
package/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as vue_demi from 'vue-demi';
2
2
  import { ComponentPublicInstance, ObjectDirective, Ref, UnwrapNestedRefs, ComputedRef, FunctionDirective } from 'vue-demi';
3
3
  import { MaybeRef, MaybeRefOrGetter, ConfigurableEventFilter, ConfigurableFlush, Awaitable } from '@vueuse/shared';
4
- import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
4
+ import { UseClipboardOptions, UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
5
5
 
6
6
  interface ConfigurableWindow {
7
7
  window?: Window;
@@ -108,6 +108,10 @@ declare const UseBrowserLocation: vue_demi.DefineComponent<{}, () => vue_demi.VN
108
108
  [key: string]: any;
109
109
  }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
110
110
 
111
+ interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source> {
112
+ }
113
+ declare const UseClipboard: vue_demi.DefineComponent<UseClipboardProps<string>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseClipboardProps<string>>, {}, {}>;
114
+
111
115
  interface StorageLike {
112
116
  getItem(key: string): string | null;
113
117
  setItem(key: string, value: string): void;
@@ -162,6 +166,12 @@ interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWind
162
166
  * @default false
163
167
  */
164
168
  shallow?: boolean;
169
+ /**
170
+ * Wait for the component to be mounted before reading the storage.
171
+ *
172
+ * @default false
173
+ */
174
+ initOnMounted?: boolean;
165
175
  }
166
176
 
167
177
  type BasicColorMode = 'light' | 'dark';
@@ -301,6 +311,7 @@ interface ElementSize {
301
311
  declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
302
312
  width: vue_demi.Ref<number>;
303
313
  height: vue_demi.Ref<number>;
314
+ stop: () => void;
304
315
  };
305
316
 
306
317
  type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0 ? undefined : (((...b: T) => void) extends (a: any, ...b: infer I) => void ? I : []);
@@ -644,4 +655,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
644
655
 
645
656
  declare const UseWindowSize: vue_demi.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseWindowSizeOptions>, {}, {}>;
646
657
 
647
- export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
658
+ export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
package/index.iife.js CHANGED
@@ -227,8 +227,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
227
227
  useEventListener(window, "click", listener, { passive: true, capture }),
228
228
  useEventListener(window, "pointerdown", (e) => {
229
229
  const el = unrefElement(target);
230
- if (el)
231
- shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
230
+ shouldListen = !shouldIgnore(e) && !!(el && !e.composedPath().includes(el));
232
231
  }, { passive: true }),
233
232
  detectIframe && useEventListener(window, "blur", (event) => {
234
233
  setTimeout(() => {
@@ -351,8 +350,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
351
350
  capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
352
351
  once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
353
352
  };
354
- useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
355
- useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions);
353
+ const cleanup = [
354
+ useEventListener(elementRef, "pointerdown", onDown, listenerOptions),
355
+ useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions)
356
+ ].filter(Boolean);
357
+ const stop = () => cleanup.forEach((fn) => fn());
358
+ return stop;
356
359
  }
357
360
 
358
361
  const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
@@ -419,6 +422,24 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
419
422
  }
420
423
  });
421
424
 
425
+ const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
426
+ name: "UseClipboard",
427
+ props: [
428
+ "source",
429
+ "read",
430
+ "navigator",
431
+ "copiedDuring",
432
+ "legacy"
433
+ ],
434
+ setup(props, { slots }) {
435
+ const data = vueDemi.reactive(core.useClipboard(props));
436
+ return () => {
437
+ var _a;
438
+ return (_a = slots.default) == null ? void 0 : _a.call(slots, data);
439
+ };
440
+ }
441
+ });
442
+
422
443
  const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
423
444
  const globalKey = "__vueuse_ssr_handlers__";
424
445
  const handlers = /* @__PURE__ */ getHandlers();
@@ -483,9 +504,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
483
504
  eventFilter,
484
505
  onError = (e) => {
485
506
  console.error(e);
486
- }
507
+ },
508
+ initOnMounted
487
509
  } = options;
488
- const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(defaults);
510
+ const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(typeof defaults === "function" ? defaults() : defaults);
489
511
  if (!storage) {
490
512
  try {
491
513
  storage = getSSRHandler("getDefaultStorage", () => {
@@ -507,10 +529,15 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
507
529
  { flush, deep, eventFilter }
508
530
  );
509
531
  if (window && listenToStorageChanges) {
510
- useEventListener(window, "storage", update);
511
- useEventListener(window, customStorageEventName, updateFromCustomEvent);
532
+ shared.tryOnMounted(() => {
533
+ useEventListener(window, "storage", update);
534
+ useEventListener(window, customStorageEventName, updateFromCustomEvent);
535
+ if (initOnMounted)
536
+ update();
537
+ });
512
538
  }
513
- update();
539
+ if (!initOnMounted)
540
+ update();
514
541
  return data;
515
542
  function write(v) {
516
543
  try {
@@ -966,7 +993,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
966
993
  });
967
994
  const width = vueDemi.ref(initialSize.width);
968
995
  const height = vueDemi.ref(initialSize.height);
969
- useResizeObserver(
996
+ const { stop: stop1 } = useResizeObserver(
970
997
  target,
971
998
  ([entry]) => {
972
999
  const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
@@ -990,16 +1017,28 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
990
1017
  },
991
1018
  options
992
1019
  );
993
- vueDemi.watch(
1020
+ shared.tryOnMounted(() => {
1021
+ const ele = unrefElement(target);
1022
+ if (ele) {
1023
+ width.value = "offsetWidth" in ele ? ele.offsetWidth : initialSize.width;
1024
+ height.value = "offsetHeight" in ele ? ele.offsetHeight : initialSize.height;
1025
+ }
1026
+ });
1027
+ const stop2 = vueDemi.watch(
994
1028
  () => unrefElement(target),
995
1029
  (ele) => {
996
1030
  width.value = ele ? initialSize.width : 0;
997
1031
  height.value = ele ? initialSize.height : 0;
998
1032
  }
999
1033
  );
1034
+ function stop() {
1035
+ stop1();
1036
+ stop2();
1037
+ }
1000
1038
  return {
1001
1039
  width,
1002
- height
1040
+ height,
1041
+ stop
1003
1042
  };
1004
1043
  }
1005
1044
 
@@ -1420,6 +1459,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
1420
1459
  throttle ? shared.useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler,
1421
1460
  eventListenerOptions
1422
1461
  );
1462
+ shared.tryOnMounted(() => {
1463
+ const _element = shared.toValue(element);
1464
+ if (!_element)
1465
+ return;
1466
+ setArrivedState(_element);
1467
+ });
1423
1468
  useEventListener(
1424
1469
  element,
1425
1470
  "scrollend",
@@ -1778,6 +1823,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
1778
1823
  },
1779
1824
  { immediate: true }
1780
1825
  );
1826
+ const takeRecords = () => {
1827
+ return observer == null ? void 0 : observer.takeRecords();
1828
+ };
1781
1829
  const stop = () => {
1782
1830
  cleanup();
1783
1831
  stopWatch();
@@ -1785,7 +1833,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
1785
1833
  shared.tryOnScopeDispose(stop);
1786
1834
  return {
1787
1835
  isSupported,
1788
- stop
1836
+ stop,
1837
+ takeRecords
1789
1838
  };
1790
1839
  }
1791
1840
 
@@ -1953,6 +2002,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
1953
2002
  e.preventDefault();
1954
2003
  return false;
1955
2004
  }
2005
+ const elInitialOverflow = /* @__PURE__ */ new WeakMap();
1956
2006
  function useScrollLock(element, initialState = false) {
1957
2007
  const isLocked = vueDemi.ref(initialState);
1958
2008
  let stopTouchMoveListener = null;
@@ -1961,7 +2011,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
1961
2011
  const target = resolveElement(shared.toValue(el));
1962
2012
  if (target) {
1963
2013
  const ele = target;
1964
- initialOverflow = ele.style.overflow;
2014
+ if (!elInitialOverflow.get(ele))
2015
+ elInitialOverflow.set(ele, initialOverflow);
1965
2016
  if (isLocked.value)
1966
2017
  ele.style.overflow = "hidden";
1967
2018
  }
@@ -1986,11 +2037,13 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
1986
2037
  isLocked.value = true;
1987
2038
  };
1988
2039
  const unlock = () => {
2040
+ var _a;
1989
2041
  const el = resolveElement(shared.toValue(element));
1990
2042
  if (!el || !isLocked.value)
1991
2043
  return;
1992
2044
  shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
1993
- el.style.overflow = initialOverflow;
2045
+ el.style.overflow = (_a = elInitialOverflow.get(el)) != null ? _a : "";
2046
+ elInitialOverflow.delete(el);
1994
2047
  isLocked.value = false;
1995
2048
  };
1996
2049
  shared.tryOnScopeDispose(unlock);
@@ -2056,7 +2109,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
2056
2109
  const { list: listRef } = vueDemi.toRefs(props);
2057
2110
  const { list, containerProps, wrapperProps, scrollTo } = core.useVirtualList(listRef, props.options);
2058
2111
  expose({ scrollTo });
2059
- typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
2112
+ if (containerProps.style && typeof containerProps.style === "object" && !Array.isArray(containerProps.style))
2113
+ containerProps.style.height = props.height || "300px";
2060
2114
  return () => vueDemi.h("div", { ...containerProps }, [
2061
2115
  vueDemi.h("div", { ...wrapperProps.value }, list.value.map((item) => vueDemi.h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
2062
2116
  ]);
@@ -2093,6 +2147,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
2093
2147
  exports.UseActiveElement = UseActiveElement;
2094
2148
  exports.UseBattery = UseBattery;
2095
2149
  exports.UseBrowserLocation = UseBrowserLocation;
2150
+ exports.UseClipboard = UseClipboard;
2096
2151
  exports.UseColorMode = UseColorMode;
2097
2152
  exports.UseDark = UseDark;
2098
2153
  exports.UseDeviceMotion = UseDeviceMotion;
package/index.iife.min.js CHANGED
@@ -1 +1 @@
1
- var VueDemi=function(s,o,m){if(s.install)return s;if(!o)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),s;if(o.version.slice(0,4)==="2.7."){let U=function(S,L){var T,W={},B={config:o.config,use:o.use.bind(o),mixin:o.mixin.bind(o),component:o.component.bind(o),provide:function(N,I){return W[N]=I,this},directive:function(N,I){return I?(o.directive(N,I),B):o.directive(N)},mount:function(N,I){return T||(T=new o(Object.assign({propsData:L},S,{provide:Object.assign(W,S.provide)})),T.$mount(N,I),T)},unmount:function(){T&&(T.$destroy(),T=void 0)}};return B};var x=U;for(var u in o)s[u]=o[u];s.isVue2=!0,s.isVue3=!1,s.install=function(){},s.Vue=o,s.Vue2=o,s.version=o.version,s.warn=o.util.warn,s.hasInjectionContext=()=>!!s.getCurrentInstance(),s.createApp=U}else if(o.version.slice(0,2)==="2.")if(m){for(var u in m)s[u]=m[u];s.isVue2=!0,s.isVue3=!1,s.install=function(){},s.Vue=o,s.Vue2=o,s.version=o.version,s.hasInjectionContext=()=>!!s.getCurrentInstance()}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(o.version.slice(0,2)==="3."){for(var u in o)s[u]=o[u];s.isVue2=!1,s.isVue3=!0,s.install=function(){},s.Vue=o,s.Vue2=void 0,s.version=o.version,s.set=function(U,S,L){return Array.isArray(U)?(U.length=Math.max(U.length,S),U.splice(S,1,L),L):(U[S]=L,L)},s.del=function(U,S){if(Array.isArray(U)){U.splice(S,1);return}delete U[S]}}else console.error("[vue-demi] Vue version "+o.version+" is unsupported.");return s}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(s,o,m,u){"use strict";const x=o.defineComponent({name:"OnClickOutside",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return m.onClickOutside(r,a=>{n("trigger",a)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}});function U(e){var t;const n=u.toValue(e);return(t=n?.$el)!=null?t:n}const S=u.isClient?window:void 0;function L(...e){let t,n,r,a;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,r,a]=e,t=S):[t,n,r,a]=e,!t)return u.noop;Array.isArray(n)||(n=[n]),Array.isArray(r)||(r=[r]);const i=[],l=()=>{i.forEach(d=>d()),i.length=0},c=(d,v,g,w)=>(d.addEventListener(v,g,w),()=>d.removeEventListener(v,g,w)),f=o.watch(()=>[U(t),u.toValue(a)],([d,v])=>{if(l(),!d)return;const g=u.isObject(v)?{...v}:v;i.push(...n.flatMap(w=>r.map(y=>c(d,w,y,g))))},{immediate:!0,flush:"post"}),p=()=>{f(),l()};return u.tryOnScopeDispose(p),p}let T=!1;function W(e,t,n={}){const{window:r=S,ignore:a=[],capture:i=!0,detectIframe:l=!1}=n;if(!r)return;u.isIOS&&!T&&(T=!0,Array.from(r.document.body.children).forEach(g=>g.addEventListener("click",u.noop)),r.document.documentElement.addEventListener("click",u.noop));let c=!0;const f=g=>a.some(w=>{if(typeof w=="string")return Array.from(r.document.querySelectorAll(w)).some(y=>y===g.target||g.composedPath().includes(y));{const y=U(w);return y&&(g.target===y||g.composedPath().includes(y))}}),d=[L(r,"click",g=>{const w=U(e);if(!(!w||w===g.target||g.composedPath().includes(w))){if(g.detail===0&&(c=!f(g)),!c){c=!0;return}t(g)}},{passive:!0,capture:i}),L(r,"pointerdown",g=>{const w=U(e);w&&(c=!g.composedPath().includes(w)&&!f(g))},{passive:!0}),l&&L(r,"blur",g=>{setTimeout(()=>{var w;const y=U(e);((w=r.document.activeElement)==null?void 0:w.tagName)==="IFRAME"&&!y?.contains(r.document.activeElement)&&t(g)},0)})].filter(Boolean);return()=>d.forEach(g=>g())}const B={[u.directiveHooks.mounted](e,t){const n=!t.modifiers.bubble;if(typeof t.value=="function")e.__onClickOutside_stop=W(e,t.value,{capture:n});else{const[r,a]=t.value;e.__onClickOutside_stop=W(e,r,Object.assign({capture:n},a))}},[u.directiveHooks.unmounted](e){e.__onClickOutside_stop()}};function N(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function I(...e){let t,n,r={};e.length===3?(t=e[0],n=e[1],r=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],r=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:a=S,eventName:i="keydown",passive:l=!1,dedupe:c=!1}=r,f=N(t);return L(a,i,d=>{d.repeat&&u.toValue(c)||f(d)&&n(d)},l)}const de={[u.directiveHooks.mounted](e,t){var n,r;const a=(r=(n=t.arg)==null?void 0:n.split(","))!=null?r:!0;if(typeof t.value=="function")I(a,t.value,{target:e});else{const[i,l]=t.value;I(a,i,{target:e,...l})}}},pe=500;function $(e,t,n){var r,a;const i=o.computed(()=>U(e));let l;function c(){l&&(clearTimeout(l),l=void 0)}function f(d){var v,g,w,y;(v=n?.modifiers)!=null&&v.self&&d.target!==i.value||(c(),(g=n?.modifiers)!=null&&g.prevent&&d.preventDefault(),(w=n?.modifiers)!=null&&w.stop&&d.stopPropagation(),l=setTimeout(()=>t(d),(y=n?.delay)!=null?y:pe))}const p={capture:(r=n?.modifiers)==null?void 0:r.capture,once:(a=n?.modifiers)==null?void 0:a.once};L(i,"pointerdown",f,p),L(i,["pointerup","pointerleave"],c,p)}const ve=o.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return $(r,a=>{n("trigger",a)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}}),Z={[u.directiveHooks.mounted](e,t){typeof t.value=="function"?$(e,t.value,{modifiers:t.modifiers}):$(e,...t.value)}},ge=o.defineComponent({name:"UseActiveElement",setup(e,{slots:t}){const n=o.reactive({element:m.useActiveElement()});return()=>{if(t.default)return t.default(n)}}}),me=o.defineComponent({name:"UseBattery",setup(e,{slots:t}){const n=o.reactive(m.useBattery(e));return()=>{if(t.default)return t.default(n)}}}),he=o.defineComponent({name:"UseBrowserLocation",setup(e,{slots:t}){const n=o.reactive(m.useBrowserLocation());return()=>{if(t.default)return t.default(n)}}}),j=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},F="__vueuse_ssr_handlers__",ye=we();function we(){return F in j||(j[F]=j[F]||{}),j[F]}function D(e,t){return ye[e]||t}function Ue(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const be={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},ee="vueuse-storage";function Se(e,t,n,r={}){var a;const{flush:i="pre",deep:l=!0,listenToStorageChanges:c=!0,writeDefaults:f=!0,mergeDefaults:p=!1,shallow:d,window:v=S,eventFilter:g,onError:w=h=>{console.error(h)}}=r,y=(d?o.shallowRef:o.ref)(t);if(!n)try{n=D("getDefaultStorage",()=>{var h;return(h=S)==null?void 0:h.localStorage})()}catch(h){w(h)}if(!n)return y;const O=u.toValue(t),k=Ue(O),b=(a=r.serializer)!=null?a:be[k],{pause:M,resume:z}=u.pausableWatch(y,()=>E(y.value),{flush:i,deep:l,eventFilter:g});return v&&c&&(L(v,"storage",_),L(v,ee,C)),_(),y;function E(h){try{if(h==null)n.removeItem(e);else{const P=b.write(h),A=n.getItem(e);A!==P&&(n.setItem(e,P),v&&v.dispatchEvent(new CustomEvent(ee,{detail:{key:e,oldValue:A,newValue:P,storageArea:n}})))}}catch(P){w(P)}}function V(h){const P=h?h.newValue:n.getItem(e);if(P==null)return f&&O!==null&&n.setItem(e,b.write(O)),O;if(!h&&p){const A=b.read(P);return typeof p=="function"?p(A,O):k==="object"&&!Array.isArray(A)?{...O,...A}:A}else return typeof P!="string"?P:b.read(P)}function C(h){_(h.detail)}function _(h){if(!(h&&h.storageArea!==n)){if(h&&h.key==null){y.value=O;return}if(!(h&&h.key!==e)){M();try{h?.newValue!==b.write(y.value)&&(y.value=V(h))}catch(P){w(P)}finally{h?o.nextTick(z):z()}}}}}function Ce(){const e=o.ref(!1);return o.getCurrentInstance()&&o.onMounted(()=>{e.value=!0}),e}function K(e){const t=Ce();return o.computed(()=>(t.value,!!e()))}function Oe(e,t={}){const{window:n=S}=t,r=K(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let a;const i=o.ref(!1),l=p=>{i.value=p.matches},c=()=>{a&&("removeEventListener"in a?a.removeEventListener("change",l):a.removeListener(l))},f=o.watchEffect(()=>{r.value&&(c(),a=n.matchMedia(u.toValue(e)),"addEventListener"in a?a.addEventListener("change",l):a.addListener(l),i.value=a.matches)});return u.tryOnScopeDispose(()=>{f(),c(),a=void 0}),i}function Ee(e){return Oe("(prefers-color-scheme: dark)",e)}function Pe(e={}){const{selector:t="html",attribute:n="class",initialValue:r="auto",window:a=S,storage:i,storageKey:l="vueuse-color-scheme",listenToStorageChanges:c=!0,storageRef:f,emitAuto:p,disableTransition:d=!0}=e,v={auto:"",light:"light",dark:"dark",...e.modes||{}},g=Ee({window:a}),w=o.computed(()=>g.value?"dark":"light"),y=f||(l==null?u.toRef(r):Se(l,r,i,{window:a,listenToStorageChanges:c})),O=o.computed(()=>y.value==="auto"?w.value:y.value),k=D("updateHTMLAttrs",(E,V,C)=>{const _=typeof E=="string"?a?.document.querySelector(E):U(E);if(!_)return;let h;if(d){h=a.document.createElement("style");const P="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";h.appendChild(document.createTextNode(P)),a.document.head.appendChild(h)}if(V==="class"){const P=C.split(/\s/g);Object.values(v).flatMap(A=>(A||"").split(/\s/g)).filter(Boolean).forEach(A=>{P.includes(A)?_.classList.add(A):_.classList.remove(A)})}else _.setAttribute(V,C);d&&(a.getComputedStyle(h).opacity,document.head.removeChild(h))});function b(E){var V;k(t,n,(V=v[E])!=null?V:E)}function M(E){e.onChanged?e.onChanged(E,b):b(E)}o.watch(O,M,{flush:"post",immediate:!0}),u.tryOnMounted(()=>M(O.value));const z=o.computed({get(){return p?y.value:O.value},set(E){y.value=E}});try{return Object.assign(z,{store:y,system:w,state:O})}catch{return z}}const Le=o.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage","emitAuto"],setup(e,{slots:t}){const n=Pe(e),r=o.reactive({mode:n,system:n.system,store:n.store});return()=>{if(t.default)return t.default(r)}}}),ke=o.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(e,{slots:t}){const n=m.useDark(e),r=o.reactive({isDark:n,toggleDark:u.useToggle(n)});return()=>{if(t.default)return t.default(r)}}}),Ae=o.defineComponent({name:"UseDeviceMotion",setup(e,{slots:t}){const n=o.reactive(m.useDeviceMotion());return()=>{if(t.default)return t.default(n)}}}),_e=o.defineComponent({name:"UseDeviceOrientation",setup(e,{slots:t}){const n=o.reactive(m.useDeviceOrientation());return()=>{if(t.default)return t.default(n)}}}),Me=o.defineComponent({name:"UseDevicePixelRatio",setup(e,{slots:t}){const n=o.reactive({pixelRatio:m.useDevicePixelRatio()});return()=>{if(t.default)return t.default(n)}}}),Te=o.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(e,{slots:t}){const n=o.reactive(m.useDevicesList(e));return()=>{if(t.default)return t.default(n)}}}),Ve=o.defineComponent({name:"UseDocumentVisibility",setup(e,{slots:t}){const n=o.reactive({visibility:m.useDocumentVisibility()});return()=>{if(t.default)return t.default(n)}}}),Ie=o.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(e,{slots:t}){const n=o.ref(),r=o.computed(()=>{var f;return(f=e.handle)!=null?f:n.value}),a=e.storageKey&&m.useStorage(e.storageKey,u.toValue(e.initialValue)||{x:0,y:0},m.isClient?e.storageType==="session"?sessionStorage:localStorage:void 0),i=a||e.initialValue||{x:0,y:0},l=(f,p)=>{var d;(d=e.onEnd)==null||d.call(e,f,p),a&&(a.value.x=f.x,a.value.y=f.y)},c=o.reactive(m.useDraggable(n,{...e,handle:r,initialValue:i,onEnd:l}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n,style:`touch-action:none;${c.style}`},t.default(c))}}}),ze=o.defineComponent({name:"UseElementBounding",props:["box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useElementBounding(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function Re(e,t={}){const{delayEnter:n=0,delayLeave:r=0,window:a=S}=t,i=o.ref(!1);let l;const c=f=>{const p=f?n:r;l&&(clearTimeout(l),l=void 0),p?l=setTimeout(()=>i.value=f,p):i.value=f};return a&&(L(e,"mouseenter",()=>c(!0),{passive:!0}),L(e,"mouseleave",()=>c(!1),{passive:!0})),i}const Ne={[u.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=Re(e);o.watch(n,r=>t.value(r))}}},He=o.defineComponent({name:"UseElementSize",props:["width","height","box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useElementSize(n,{width:e.width,height:e.height},{box:e.box}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function We(e,t,n={}){const{window:r=S,...a}=n;let i;const l=K(()=>r&&"ResizeObserver"in r),c=()=>{i&&(i.disconnect(),i=void 0)},f=o.computed(()=>Array.isArray(e)?e.map(v=>U(v)):[U(e)]),p=o.watch(f,v=>{if(c(),l.value&&r){i=new ResizeObserver(t);for(const g of v)g&&i.observe(g,a)}},{immediate:!0,flush:"post",deep:!0}),d=()=>{c(),p()};return u.tryOnScopeDispose(d),{isSupported:l,stop:d}}function Be(e,t={width:0,height:0},n={}){const{window:r=S,box:a="content-box"}=n,i=o.computed(()=>{var f,p;return(p=(f=U(e))==null?void 0:f.namespaceURI)==null?void 0:p.includes("svg")}),l=o.ref(t.width),c=o.ref(t.height);return We(e,([f])=>{const p=a==="border-box"?f.borderBoxSize:a==="content-box"?f.contentBoxSize:f.devicePixelContentBoxSize;if(r&&i.value){const d=U(e);if(d){const v=r.getComputedStyle(d);l.value=Number.parseFloat(v.width),c.value=Number.parseFloat(v.height)}}else if(p){const d=Array.isArray(p)?p:[p];l.value=d.reduce((v,{inlineSize:g})=>v+g,0),c.value=d.reduce((v,{blockSize:g})=>v+g,0)}else l.value=f.contentRect.width,c.value=f.contentRect.height},n),o.watch(()=>U(e),f=>{l.value=f?t.width:0,c.value=f?t.height:0}),{width:l,height:c}}const je={[u.directiveHooks.mounted](e,t){var n;const r=typeof t.value=="function"?t.value:(n=t.value)==null?void 0:n[0],a=typeof t.value=="function"?[]:t.value.slice(1),{width:i,height:l}=Be(e,...a);o.watch([i,l],([c,f])=>r({width:c,height:f}))}},Fe=o.defineComponent({name:"UseElementVisibility",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive({isVisible:m.useElementVisibility(n)});return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function X(e,t,n={}){const{root:r,rootMargin:a="0px",threshold:i=.1,window:l=S,immediate:c=!0}=n,f=K(()=>l&&"IntersectionObserver"in l),p=o.computed(()=>{const y=u.toValue(e);return(Array.isArray(y)?y:[y]).map(U).filter(u.notNullish)});let d=u.noop;const v=o.ref(c),g=f.value?o.watch(()=>[p.value,U(r),v.value],([y,O])=>{if(d(),!v.value||!y.length)return;const k=new IntersectionObserver(t,{root:U(O),rootMargin:a,threshold:i});y.forEach(b=>b&&k.observe(b)),d=()=>{k.disconnect(),d=u.noop}},{immediate:c,flush:"post"}):u.noop,w=()=>{d(),g(),v.value=!1};return u.tryOnScopeDispose(w),{isSupported:f,isActive:v,pause(){d(),v.value=!1},resume(){v.value=!0},stop:w}}function q(e,t={}){const{window:n=S,scrollTarget:r}=t,a=o.ref(!1);return X(e,([{isIntersecting:i}])=>{a.value=i},{root:r,window:n,threshold:0}),a}const Ke={[u.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=t.value,r=q(e);o.watch(r,a=>n(a),{immediate:!0})}else{const[n,r]=t.value,a=q(e,r);o.watch(a,i=>n(i),{immediate:!0})}}},Ge=o.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(e,{slots:t}){const n=o.reactive(m.useEyeDropper());return()=>{if(t.default)return t.default(n)}}}),Je=o.defineComponent({name:"UseFullscreen",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useFullscreen(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),Ye=o.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(e,{slots:t}){const n=o.reactive(m.useGeolocation(e));return()=>{if(t.default)return t.default(n)}}}),$e=o.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(e,{slots:t}){const n=o.reactive(m.useIdle(e.timeout,e));return()=>{if(t.default)return t.default(n)}}});function Xe(e,t,n){const{immediate:r=!0,delay:a=0,onError:i=u.noop,onSuccess:l=u.noop,resetOnExecute:c=!0,shallow:f=!0,throwError:p}=n??{},d=f?o.shallowRef(t):o.ref(t),v=o.ref(!1),g=o.ref(!1),w=o.shallowRef(void 0);async function y(b=0,...M){c&&(d.value=t),w.value=void 0,v.value=!1,g.value=!0,b>0&&await u.promiseTimeout(b);const z=typeof e=="function"?e(...M):e;try{const E=await z;d.value=E,v.value=!0,l(E)}catch(E){if(w.value=E,i(E),p)throw E}finally{g.value=!1}return d.value}r&&y(a);const O={state:d,isReady:v,isLoading:g,error:w,execute:y};function k(){return new Promise((b,M)=>{u.until(g).toBe(!1).then(()=>b(O)).catch(M)})}return{...O,then(b,M){return k().then(b,M)}}}async function qe(e){return new Promise((t,n)=>{const r=new Image,{src:a,srcset:i,sizes:l,class:c,loading:f,crossorigin:p,referrerPolicy:d}=e;r.src=a,i&&(r.srcset=i),l&&(r.sizes=l),c&&(r.className=c),f&&(r.loading=f),p&&(r.crossOrigin=p),d&&(r.referrerPolicy=d),r.onload=()=>t(r),r.onerror=n})}function Qe(e,t={}){const n=Xe(()=>qe(u.toValue(e)),void 0,{resetOnExecute:!0,...t});return o.watch(()=>u.toValue(e),()=>n.execute(t.delay),{deep:!0}),n}const xe=o.defineComponent({name:"UseImage",props:["src","srcset","sizes","as","alt","class","loading","crossorigin","referrerPolicy"],setup(e,{slots:t}){const n=o.reactive(Qe(e));return()=>n.isLoading&&t.loading?t.loading(n):n.error&&t.error?t.error(n.error):t.default?t.default(n):o.h(e.as||"img",e)}}),te=1;function Q(e,t={}){const{throttle:n=0,idle:r=200,onStop:a=u.noop,onScroll:i=u.noop,offset:l={left:0,right:0,top:0,bottom:0},eventListenerOptions:c={capture:!1,passive:!0},behavior:f="auto",window:p=S}=t,d=o.ref(0),v=o.ref(0),g=o.computed({get(){return d.value},set(C){y(C,void 0)}}),w=o.computed({get(){return v.value},set(C){y(void 0,C)}});function y(C,_){var h,P,A;if(!p)return;const R=u.toValue(e);R&&((A=R instanceof Document?p.document.body:R)==null||A.scrollTo({top:(h=u.toValue(_))!=null?h:w.value,left:(P=u.toValue(C))!=null?P:g.value,behavior:u.toValue(f)}))}const O=o.ref(!1),k=o.reactive({left:!0,right:!1,top:!0,bottom:!1}),b=o.reactive({left:!1,right:!1,top:!1,bottom:!1}),M=C=>{O.value&&(O.value=!1,b.left=!1,b.right=!1,b.top=!1,b.bottom=!1,a(C))},z=u.useDebounceFn(M,n+r),E=C=>{var _;if(!p)return;const h=C.document?C.document.documentElement:(_=C.documentElement)!=null?_:C,{display:P,flexDirection:A}=getComputedStyle(h),R=h.scrollLeft;b.left=R<d.value,b.right=R>d.value;const le=Math.abs(R)<=0+(l.left||0),ue=Math.abs(R)+h.clientWidth>=h.scrollWidth-(l.right||0)-te;P==="flex"&&A==="row-reverse"?(k.left=ue,k.right=le):(k.left=le,k.right=ue),d.value=R;let H=h.scrollTop;C===p.document&&!H&&(H=p.document.body.scrollTop),b.top=H<v.value,b.bottom=H>v.value;const ce=Math.abs(H)<=0+(l.top||0),fe=Math.abs(H)+h.clientHeight>=h.scrollHeight-(l.bottom||0)-te;P==="flex"&&A==="column-reverse"?(k.top=fe,k.bottom=ce):(k.top=ce,k.bottom=fe),v.value=H},V=C=>{var _;if(!p)return;const h=(_=C.target.documentElement)!=null?_:C.target;E(h),O.value=!0,z(C),i(C)};return L(e,"scroll",n?u.useThrottleFn(V,n,!0,!1):V,c),L(e,"scrollend",M,c),{x:g,y:w,isScrolling:O,arrivedState:k,directions:b,measure(){const C=u.toValue(e);p&&C&&E(C)}}}function G(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function ne(e,t,n={}){var r;const{direction:a="bottom",interval:i=100}=n,l=o.reactive(Q(e,{...n,offset:{[a]:(r=n.distance)!=null?r:0,...n.offset}})),c=o.ref(),f=o.computed(()=>!!c.value),p=o.computed(()=>G(u.toValue(e))),d=q(p);function v(){if(l.measure(),!p.value||!d.value)return;const{scrollHeight:g,clientHeight:w,scrollWidth:y,clientWidth:O}=p.value,k=a==="bottom"||a==="top"?g<=w:y<=O;(l.arrivedState[a]||k)&&(c.value||(c.value=Promise.all([t(l),new Promise(b=>setTimeout(b,i))]).finally(()=>{c.value=null,o.nextTick(()=>v())})))}return o.watch(()=>[l.arrivedState[a],d.value],v,{immediate:!0}),{isLoading:f}}const Ze={[u.directiveHooks.mounted](e,t){typeof t.value=="function"?ne(e,t.value):ne(e,...t.value)}},De={[u.directiveHooks.mounted](e,t){typeof t.value=="function"?X(e,t.value):X(e,...t.value)}},et=o.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(e,{slots:t}){const n=o.reactive(m.useMouse(e));return()=>{if(t.default)return t.default(n)}}}),tt=o.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useMouseInElement(n,e));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),nt=o.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useMousePressed({...e,target:n}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),ot=o.defineComponent({name:"UseNetwork",setup(e,{slots:t}){const n=o.reactive(m.useNetwork());return()=>{if(t.default)return t.default(n)}}}),rt=o.defineComponent({name:"UseNow",props:["interval"],setup(e,{slots:t}){const n=o.reactive(m.useNow({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),at=o.defineComponent({name:"UseObjectUrl",props:["object"],setup(e,{slots:t}){const n=u.toRef(e,"object"),r=m.useObjectUrl(n);return()=>{if(t.default&&r.value)return t.default(r)}}}),st=o.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(e,{slots:t,emit:n}){const r=o.reactive(m.useOffsetPagination({...e,onPageChange(...a){var i;(i=e.onPageChange)==null||i.call(e,...a),n("page-change",...a)},onPageSizeChange(...a){var i;(i=e.onPageSizeChange)==null||i.call(e,...a),n("page-size-change",...a)},onPageCountChange(...a){var i;(i=e.onPageCountChange)==null||i.call(e,...a),n("page-count-change",...a)}}));return()=>{if(t.default)return t.default(r)}}}),it=o.defineComponent({name:"UseOnline",setup(e,{slots:t}){const n=o.reactive({isOnline:m.useOnline()});return()=>{if(t.default)return t.default(n)}}}),lt=o.defineComponent({name:"UsePageLeave",setup(e,{slots:t}){const n=o.reactive({isLeft:m.usePageLeave()});return()=>{if(t.default)return t.default(n)}}}),ut=o.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(e,{slots:t}){const n=o.ref(null),r=o.reactive(m.usePointer({...e,target:e.target==="self"?n:S}));return()=>{if(t.default)return t.default(r,{ref:n})}}}),ct=o.defineComponent({name:"UsePointerLock",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.usePointerLock(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),ft=o.defineComponent({name:"UsePreferredColorScheme",setup(e,{slots:t}){const n=o.reactive({colorScheme:m.usePreferredColorScheme()});return()=>{if(t.default)return t.default(n)}}}),dt=o.defineComponent({name:"UsePreferredContrast",setup(e,{slots:t}){const n=o.reactive({contrast:m.usePreferredContrast()});return()=>{if(t.default)return t.default(n)}}}),pt=o.defineComponent({name:"UsePreferredDark",setup(e,{slots:t}){const n=o.reactive({prefersDark:m.usePreferredDark()});return()=>{if(t.default)return t.default(n)}}}),vt=o.defineComponent({name:"UsePreferredLanguages",setup(e,{slots:t}){const n=o.reactive({languages:m.usePreferredLanguages()});return()=>{if(t.default)return t.default(n)}}}),gt=o.defineComponent({name:"UsePreferredReducedMotion",setup(e,{slots:t}){const n=o.reactive({motion:m.usePreferredReducedMotion()});return()=>{if(t.default)return t.default(n)}}});function mt(e,t,n={}){const{window:r=S,...a}=n;let i;const l=K(()=>r&&"MutationObserver"in r),c=()=>{i&&(i.disconnect(),i=void 0)},f=o.watch(()=>U(e),d=>{c(),l.value&&r&&d&&(i=new MutationObserver(t),i.observe(d,a))},{immediate:!0}),p=()=>{c(),f()};return u.tryOnScopeDispose(p),{isSupported:l,stop:p}}function J(e,t,n={}){const{window:r=S,initialValue:a="",observe:i=!1}=n,l=o.ref(a),c=o.computed(()=>{var p;return U(t)||((p=r?.document)==null?void 0:p.documentElement)});function f(){var p;const d=u.toValue(e),v=u.toValue(c);if(v&&r){const g=(p=r.getComputedStyle(v).getPropertyValue(d))==null?void 0:p.trim();l.value=g||a}}return i&&mt(c,f,{attributeFilter:["style","class"],window:r}),o.watch([c,()=>u.toValue(e)],f,{immediate:!0}),o.watch(l,p=>{var d;(d=c.value)!=null&&d.style&&c.value.style.setProperty(u.toValue(e),p)}),l}const oe="--vueuse-safe-area-top",re="--vueuse-safe-area-right",ae="--vueuse-safe-area-bottom",se="--vueuse-safe-area-left";function ht(){const e=o.ref(""),t=o.ref(""),n=o.ref(""),r=o.ref("");if(u.isClient){const i=J(oe),l=J(re),c=J(ae),f=J(se);i.value="env(safe-area-inset-top, 0px)",l.value="env(safe-area-inset-right, 0px)",c.value="env(safe-area-inset-bottom, 0px)",f.value="env(safe-area-inset-left, 0px)",a(),L("resize",u.useDebounceFn(a))}function a(){e.value=Y(oe),t.value=Y(re),n.value=Y(ae),r.value=Y(se)}return{top:e,right:t,bottom:n,left:r,update:a}}function Y(e){return getComputedStyle(document.documentElement).getPropertyValue(e)}const yt=o.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(e,{slots:t}){const{top:n,right:r,bottom:a,left:i}=ht();return()=>{if(t.default)return o.h("div",{style:{paddingTop:e.top?n.value:"",paddingRight:e.right?r.value:"",paddingBottom:e.bottom?a.value:"",paddingLeft:e.left?i.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},t.default())}}}),wt={[u.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=t.value,r=Q(e,{onScroll(){n(r)},onStop(){n(r)}})}else{const[n,r]=t.value,a=Q(e,{...r,onScroll(i){var l;(l=r.onScroll)==null||l.call(r,i),n(a)},onStop(i){var l;(l=r.onStop)==null||l.call(r,i),n(a)}})}}};function ie(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:ie(n)}}function Ut(e){const t=e||window.event,n=t.target;return ie(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}function bt(e,t=!1){const n=o.ref(t);let r=null,a;o.watch(u.toRef(e),c=>{const f=G(u.toValue(c));if(f){const p=f;a=p.style.overflow,n.value&&(p.style.overflow="hidden")}},{immediate:!0});const i=()=>{const c=G(u.toValue(e));!c||n.value||(u.isIOS&&(r=L(c,"touchmove",f=>{Ut(f)},{passive:!1})),c.style.overflow="hidden",n.value=!0)},l=()=>{const c=G(u.toValue(e));!c||!n.value||(u.isIOS&&r?.(),c.style.overflow=a,n.value=!1)};return u.tryOnScopeDispose(l),o.computed({get(){return n.value},set(c){c?i():l()}})}function St(){let e=!1;const t=o.ref(!1);return(n,r)=>{if(t.value=r.value,e)return;e=!0;const a=bt(n,r.value);o.watch(t,i=>a.value=i)}}const Ct=St(),Ot=o.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages","showSecond"],setup(e,{slots:t}){const n=o.reactive(m.useTimeAgo(()=>e.time,{...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Et=o.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(e,{slots:t}){const n=o.reactive(m.useTimestamp({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Pt=o.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(e,{slots:t,expose:n}){const{list:r}=o.toRefs(e),{list:a,containerProps:i,wrapperProps:l,scrollTo:c}=m.useVirtualList(r,e.options);return n({scrollTo:c}),typeof i.style=="object"&&!Array.isArray(i.style)&&(i.style.height=e.height||"300px"),()=>o.h("div",{...i},[o.h("div",{...l.value},a.value.map(f=>o.h("div",{style:{overFlow:"hidden",height:f.height}},t.default?t.default(f):"Please set content!")))])}}),Lt=o.defineComponent({name:"UseWindowFocus",setup(e,{slots:t}){const n=o.reactive({focused:m.useWindowFocus()});return()=>{if(t.default)return t.default(n)}}}),kt=o.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(e,{slots:t}){const n=o.reactive(m.useWindowSize(e));return()=>{if(t.default)return t.default(n)}}});s.OnClickOutside=x,s.OnLongPress=ve,s.UseActiveElement=ge,s.UseBattery=me,s.UseBrowserLocation=he,s.UseColorMode=Le,s.UseDark=ke,s.UseDeviceMotion=Ae,s.UseDeviceOrientation=_e,s.UseDevicePixelRatio=Me,s.UseDevicesList=Te,s.UseDocumentVisibility=Ve,s.UseDraggable=Ie,s.UseElementBounding=ze,s.UseElementSize=He,s.UseElementVisibility=Fe,s.UseEyeDropper=Ge,s.UseFullscreen=Je,s.UseGeolocation=Ye,s.UseIdle=$e,s.UseImage=xe,s.UseMouse=et,s.UseMouseInElement=tt,s.UseMousePressed=nt,s.UseNetwork=ot,s.UseNow=rt,s.UseObjectUrl=at,s.UseOffsetPagination=st,s.UseOnline=it,s.UsePageLeave=lt,s.UsePointer=ut,s.UsePointerLock=ct,s.UsePreferredColorScheme=ft,s.UsePreferredContrast=dt,s.UsePreferredDark=pt,s.UsePreferredLanguages=vt,s.UsePreferredReducedMotion=gt,s.UseScreenSafeArea=yt,s.UseTimeAgo=Ot,s.UseTimestamp=Et,s.UseVirtualList=Pt,s.UseWindowFocus=Lt,s.UseWindowSize=kt,s.VOnClickOutside=B,s.VOnLongPress=Z,s.vElementHover=Ne,s.vElementSize=je,s.vElementVisibility=Ke,s.vInfiniteScroll=Ze,s.vIntersectionObserver=De,s.vOnClickOutside=B,s.vOnKeyStroke=de,s.vOnLongPress=Z,s.vScroll=wt,s.vScrollLock=Ct})(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);
1
+ var VueDemi=function(s,o,m){if(s.install)return s;if(!o)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),s;if(o.version.slice(0,4)==="2.7."){let U=function(E,_){var V,W={},B={config:o.config,use:o.use.bind(o),mixin:o.mixin.bind(o),component:o.component.bind(o),provide:function(H,R){return W[H]=R,this},directive:function(H,R){return R?(o.directive(H,R),B):o.directive(H)},mount:function(H,R){return V||(V=new o(Object.assign({propsData:_},E,{provide:Object.assign(W,E.provide)})),V.$mount(H,R),V)},unmount:function(){V&&(V.$destroy(),V=void 0)}};return B};var x=U;for(var u in o)s[u]=o[u];s.isVue2=!0,s.isVue3=!1,s.install=function(){},s.Vue=o,s.Vue2=o,s.version=o.version,s.warn=o.util.warn,s.hasInjectionContext=()=>!!s.getCurrentInstance(),s.createApp=U}else if(o.version.slice(0,2)==="2.")if(m){for(var u in m)s[u]=m[u];s.isVue2=!0,s.isVue3=!1,s.install=function(){},s.Vue=o,s.Vue2=o,s.version=o.version,s.hasInjectionContext=()=>!!s.getCurrentInstance()}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(o.version.slice(0,2)==="3."){for(var u in o)s[u]=o[u];s.isVue2=!1,s.isVue3=!0,s.install=function(){},s.Vue=o,s.Vue2=void 0,s.version=o.version,s.set=function(U,E,_){return Array.isArray(U)?(U.length=Math.max(U.length,E),U.splice(E,1,_),_):(U[E]=_,_)},s.del=function(U,E){if(Array.isArray(U)){U.splice(E,1);return}delete U[E]}}else console.error("[vue-demi] Vue version "+o.version+" is unsupported.");return s}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(s,o,m,u){"use strict";const x=o.defineComponent({name:"OnClickOutside",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return m.onClickOutside(r,a=>{n("trigger",a)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}});function U(e){var t;const n=u.toValue(e);return(t=n?.$el)!=null?t:n}const E=u.isClient?window:void 0;function _(...e){let t,n,r,a;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,r,a]=e,t=E):[t,n,r,a]=e,!t)return u.noop;Array.isArray(n)||(n=[n]),Array.isArray(r)||(r=[r]);const i=[],l=()=>{i.forEach(v=>v()),i.length=0},c=(v,f,p,h)=>(v.addEventListener(f,p,h),()=>v.removeEventListener(f,p,h)),d=o.watch(()=>[U(t),u.toValue(a)],([v,f])=>{if(l(),!v)return;const p=u.isObject(f)?{...f}:f;i.push(...n.flatMap(h=>r.map(y=>c(v,h,y,p))))},{immediate:!0,flush:"post"}),g=()=>{d(),l()};return u.tryOnScopeDispose(g),g}let V=!1;function W(e,t,n={}){const{window:r=E,ignore:a=[],capture:i=!0,detectIframe:l=!1}=n;if(!r)return;u.isIOS&&!V&&(V=!0,Array.from(r.document.body.children).forEach(p=>p.addEventListener("click",u.noop)),r.document.documentElement.addEventListener("click",u.noop));let c=!0;const d=p=>a.some(h=>{if(typeof h=="string")return Array.from(r.document.querySelectorAll(h)).some(y=>y===p.target||p.composedPath().includes(y));{const y=U(h);return y&&(p.target===y||p.composedPath().includes(y))}}),v=[_(r,"click",p=>{const h=U(e);if(!(!h||h===p.target||p.composedPath().includes(h))){if(p.detail===0&&(c=!d(p)),!c){c=!0;return}t(p)}},{passive:!0,capture:i}),_(r,"pointerdown",p=>{const h=U(e);c=!d(p)&&!!(h&&!p.composedPath().includes(h))},{passive:!0}),l&&_(r,"blur",p=>{setTimeout(()=>{var h;const y=U(e);((h=r.document.activeElement)==null?void 0:h.tagName)==="IFRAME"&&!y?.contains(r.document.activeElement)&&t(p)},0)})].filter(Boolean);return()=>v.forEach(p=>p())}const B={[u.directiveHooks.mounted](e,t){const n=!t.modifiers.bubble;if(typeof t.value=="function")e.__onClickOutside_stop=W(e,t.value,{capture:n});else{const[r,a]=t.value;e.__onClickOutside_stop=W(e,r,Object.assign({capture:n},a))}},[u.directiveHooks.unmounted](e){e.__onClickOutside_stop()}};function H(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function R(...e){let t,n,r={};e.length===3?(t=e[0],n=e[1],r=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],r=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:a=E,eventName:i="keydown",passive:l=!1,dedupe:c=!1}=r,d=H(t);return _(a,i,v=>{v.repeat&&u.toValue(c)||d(v)&&n(v)},l)}const pe={[u.directiveHooks.mounted](e,t){var n,r;const a=(r=(n=t.arg)==null?void 0:n.split(","))!=null?r:!0;if(typeof t.value=="function")R(a,t.value,{target:e});else{const[i,l]=t.value;R(a,i,{target:e,...l})}}},ve=500;function X(e,t,n){var r,a;const i=o.computed(()=>U(e));let l;function c(){l&&(clearTimeout(l),l=void 0)}function d(p){var h,y,b,C;(h=n?.modifiers)!=null&&h.self&&p.target!==i.value||(c(),(y=n?.modifiers)!=null&&y.prevent&&p.preventDefault(),(b=n?.modifiers)!=null&&b.stop&&p.stopPropagation(),l=setTimeout(()=>t(p),(C=n?.delay)!=null?C:ve))}const g={capture:(r=n?.modifiers)==null?void 0:r.capture,once:(a=n?.modifiers)==null?void 0:a.once},v=[_(i,"pointerdown",d,g),_(i,["pointerup","pointerleave"],c,g)].filter(Boolean);return()=>v.forEach(p=>p())}const ge=o.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return X(r,a=>{n("trigger",a)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}}),D={[u.directiveHooks.mounted](e,t){typeof t.value=="function"?X(e,t.value,{modifiers:t.modifiers}):X(e,...t.value)}},me=o.defineComponent({name:"UseActiveElement",setup(e,{slots:t}){const n=o.reactive({element:m.useActiveElement()});return()=>{if(t.default)return t.default(n)}}}),he=o.defineComponent({name:"UseBattery",setup(e,{slots:t}){const n=o.reactive(m.useBattery(e));return()=>{if(t.default)return t.default(n)}}}),ye=o.defineComponent({name:"UseBrowserLocation",setup(e,{slots:t}){const n=o.reactive(m.useBrowserLocation());return()=>{if(t.default)return t.default(n)}}}),we=o.defineComponent({name:"UseClipboard",props:["source","read","navigator","copiedDuring","legacy"],setup(e,{slots:t}){const n=o.reactive(m.useClipboard(e));return()=>{var r;return(r=t.default)==null?void 0:r.call(t,n)}}}),j=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},F="__vueuse_ssr_handlers__",Ue=be();function be(){return F in j||(j[F]=j[F]||{}),j[F]}function ee(e,t){return Ue[e]||t}function Ce(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const Se={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},te="vueuse-storage";function Oe(e,t,n,r={}){var a;const{flush:i="pre",deep:l=!0,listenToStorageChanges:c=!0,writeDefaults:d=!0,mergeDefaults:g=!1,shallow:v,window:f=E,eventFilter:p,onError:h=w=>{console.error(w)},initOnMounted:y}=r,b=(v?o.shallowRef:o.ref)(typeof t=="function"?t():t);if(!n)try{n=ee("getDefaultStorage",()=>{var w;return(w=E)==null?void 0:w.localStorage})()}catch(w){h(w)}if(!n)return b;const C=u.toValue(t),O=Ce(C),A=(a=r.serializer)!=null?a:Se[O],{pause:z,resume:P}=u.pausableWatch(b,()=>I(b.value),{flush:i,deep:l,eventFilter:p});return f&&c&&u.tryOnMounted(()=>{_(f,"storage",k),_(f,te,T),y&&k()}),y||k(),b;function I(w){try{if(w==null)n.removeItem(e);else{const L=A.write(w),M=n.getItem(e);M!==L&&(n.setItem(e,L),f&&f.dispatchEvent(new CustomEvent(te,{detail:{key:e,oldValue:M,newValue:L,storageArea:n}})))}}catch(L){h(L)}}function S(w){const L=w?w.newValue:n.getItem(e);if(L==null)return d&&C!==null&&n.setItem(e,A.write(C)),C;if(!w&&g){const M=A.read(L);return typeof g=="function"?g(M,C):O==="object"&&!Array.isArray(M)?{...C,...M}:M}else return typeof L!="string"?L:A.read(L)}function T(w){k(w.detail)}function k(w){if(!(w&&w.storageArea!==n)){if(w&&w.key==null){b.value=C;return}if(!(w&&w.key!==e)){z();try{w?.newValue!==A.write(b.value)&&(b.value=S(w))}catch(L){h(L)}finally{w?o.nextTick(P):P()}}}}}function Ee(){const e=o.ref(!1);return o.getCurrentInstance()&&o.onMounted(()=>{e.value=!0}),e}function K(e){const t=Ee();return o.computed(()=>(t.value,!!e()))}function Pe(e,t={}){const{window:n=E}=t,r=K(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let a;const i=o.ref(!1),l=g=>{i.value=g.matches},c=()=>{a&&("removeEventListener"in a?a.removeEventListener("change",l):a.removeListener(l))},d=o.watchEffect(()=>{r.value&&(c(),a=n.matchMedia(u.toValue(e)),"addEventListener"in a?a.addEventListener("change",l):a.addListener(l),i.value=a.matches)});return u.tryOnScopeDispose(()=>{d(),c(),a=void 0}),i}function Le(e){return Pe("(prefers-color-scheme: dark)",e)}function ke(e={}){const{selector:t="html",attribute:n="class",initialValue:r="auto",window:a=E,storage:i,storageKey:l="vueuse-color-scheme",listenToStorageChanges:c=!0,storageRef:d,emitAuto:g,disableTransition:v=!0}=e,f={auto:"",light:"light",dark:"dark",...e.modes||{}},p=Le({window:a}),h=o.computed(()=>p.value?"dark":"light"),y=d||(l==null?u.toRef(r):Oe(l,r,i,{window:a,listenToStorageChanges:c})),b=o.computed(()=>y.value==="auto"?h.value:y.value),C=ee("updateHTMLAttrs",(P,I,S)=>{const T=typeof P=="string"?a?.document.querySelector(P):U(P);if(!T)return;let k;if(v){k=a.document.createElement("style");const w="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";k.appendChild(document.createTextNode(w)),a.document.head.appendChild(k)}if(I==="class"){const w=S.split(/\s/g);Object.values(f).flatMap(L=>(L||"").split(/\s/g)).filter(Boolean).forEach(L=>{w.includes(L)?T.classList.add(L):T.classList.remove(L)})}else T.setAttribute(I,S);v&&(a.getComputedStyle(k).opacity,document.head.removeChild(k))});function O(P){var I;C(t,n,(I=f[P])!=null?I:P)}function A(P){e.onChanged?e.onChanged(P,O):O(P)}o.watch(b,A,{flush:"post",immediate:!0}),u.tryOnMounted(()=>A(b.value));const z=o.computed({get(){return g?y.value:b.value},set(P){y.value=P}});try{return Object.assign(z,{store:y,system:h,state:b})}catch{return z}}const _e=o.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage","emitAuto"],setup(e,{slots:t}){const n=ke(e),r=o.reactive({mode:n,system:n.system,store:n.store});return()=>{if(t.default)return t.default(r)}}}),Ae=o.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(e,{slots:t}){const n=m.useDark(e),r=o.reactive({isDark:n,toggleDark:u.useToggle(n)});return()=>{if(t.default)return t.default(r)}}}),Me=o.defineComponent({name:"UseDeviceMotion",setup(e,{slots:t}){const n=o.reactive(m.useDeviceMotion());return()=>{if(t.default)return t.default(n)}}}),Te=o.defineComponent({name:"UseDeviceOrientation",setup(e,{slots:t}){const n=o.reactive(m.useDeviceOrientation());return()=>{if(t.default)return t.default(n)}}}),Ve=o.defineComponent({name:"UseDevicePixelRatio",setup(e,{slots:t}){const n=o.reactive({pixelRatio:m.useDevicePixelRatio()});return()=>{if(t.default)return t.default(n)}}}),Ie=o.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(e,{slots:t}){const n=o.reactive(m.useDevicesList(e));return()=>{if(t.default)return t.default(n)}}}),Re=o.defineComponent({name:"UseDocumentVisibility",setup(e,{slots:t}){const n=o.reactive({visibility:m.useDocumentVisibility()});return()=>{if(t.default)return t.default(n)}}}),He=o.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(e,{slots:t}){const n=o.ref(),r=o.computed(()=>{var d;return(d=e.handle)!=null?d:n.value}),a=e.storageKey&&m.useStorage(e.storageKey,u.toValue(e.initialValue)||{x:0,y:0},m.isClient?e.storageType==="session"?sessionStorage:localStorage:void 0),i=a||e.initialValue||{x:0,y:0},l=(d,g)=>{var v;(v=e.onEnd)==null||v.call(e,d,g),a&&(a.value.x=d.x,a.value.y=d.y)},c=o.reactive(m.useDraggable(n,{...e,handle:r,initialValue:i,onEnd:l}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n,style:`touch-action:none;${c.style}`},t.default(c))}}}),ze=o.defineComponent({name:"UseElementBounding",props:["box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useElementBounding(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function Ne(e,t={}){const{delayEnter:n=0,delayLeave:r=0,window:a=E}=t,i=o.ref(!1);let l;const c=d=>{const g=d?n:r;l&&(clearTimeout(l),l=void 0),g?l=setTimeout(()=>i.value=d,g):i.value=d};return a&&(_(e,"mouseenter",()=>c(!0),{passive:!0}),_(e,"mouseleave",()=>c(!1),{passive:!0})),i}const We={[u.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=Ne(e);o.watch(n,r=>t.value(r))}}},Be=o.defineComponent({name:"UseElementSize",props:["width","height","box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useElementSize(n,{width:e.width,height:e.height},{box:e.box}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function je(e,t,n={}){const{window:r=E,...a}=n;let i;const l=K(()=>r&&"ResizeObserver"in r),c=()=>{i&&(i.disconnect(),i=void 0)},d=o.computed(()=>Array.isArray(e)?e.map(f=>U(f)):[U(e)]),g=o.watch(d,f=>{if(c(),l.value&&r){i=new ResizeObserver(t);for(const p of f)p&&i.observe(p,a)}},{immediate:!0,flush:"post",deep:!0}),v=()=>{c(),g()};return u.tryOnScopeDispose(v),{isSupported:l,stop:v}}function Fe(e,t={width:0,height:0},n={}){const{window:r=E,box:a="content-box"}=n,i=o.computed(()=>{var f,p;return(p=(f=U(e))==null?void 0:f.namespaceURI)==null?void 0:p.includes("svg")}),l=o.ref(t.width),c=o.ref(t.height),{stop:d}=je(e,([f])=>{const p=a==="border-box"?f.borderBoxSize:a==="content-box"?f.contentBoxSize:f.devicePixelContentBoxSize;if(r&&i.value){const h=U(e);if(h){const y=r.getComputedStyle(h);l.value=Number.parseFloat(y.width),c.value=Number.parseFloat(y.height)}}else if(p){const h=Array.isArray(p)?p:[p];l.value=h.reduce((y,{inlineSize:b})=>y+b,0),c.value=h.reduce((y,{blockSize:b})=>y+b,0)}else l.value=f.contentRect.width,c.value=f.contentRect.height},n);u.tryOnMounted(()=>{const f=U(e);f&&(l.value="offsetWidth"in f?f.offsetWidth:t.width,c.value="offsetHeight"in f?f.offsetHeight:t.height)});const g=o.watch(()=>U(e),f=>{l.value=f?t.width:0,c.value=f?t.height:0});function v(){d(),g()}return{width:l,height:c,stop:v}}const Ke={[u.directiveHooks.mounted](e,t){var n;const r=typeof t.value=="function"?t.value:(n=t.value)==null?void 0:n[0],a=typeof t.value=="function"?[]:t.value.slice(1),{width:i,height:l}=Fe(e,...a);o.watch([i,l],([c,d])=>r({width:c,height:d}))}},Ge=o.defineComponent({name:"UseElementVisibility",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive({isVisible:m.useElementVisibility(n)});return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function q(e,t,n={}){const{root:r,rootMargin:a="0px",threshold:i=.1,window:l=E,immediate:c=!0}=n,d=K(()=>l&&"IntersectionObserver"in l),g=o.computed(()=>{const y=u.toValue(e);return(Array.isArray(y)?y:[y]).map(U).filter(u.notNullish)});let v=u.noop;const f=o.ref(c),p=d.value?o.watch(()=>[g.value,U(r),f.value],([y,b])=>{if(v(),!f.value||!y.length)return;const C=new IntersectionObserver(t,{root:U(b),rootMargin:a,threshold:i});y.forEach(O=>O&&C.observe(O)),v=()=>{C.disconnect(),v=u.noop}},{immediate:c,flush:"post"}):u.noop,h=()=>{v(),p(),f.value=!1};return u.tryOnScopeDispose(h),{isSupported:d,isActive:f,pause(){v(),f.value=!1},resume(){f.value=!0},stop:h}}function Q(e,t={}){const{window:n=E,scrollTarget:r}=t,a=o.ref(!1);return q(e,([{isIntersecting:i}])=>{a.value=i},{root:r,window:n,threshold:0}),a}const Je={[u.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=t.value,r=Q(e);o.watch(r,a=>n(a),{immediate:!0})}else{const[n,r]=t.value,a=Q(e,r);o.watch(a,i=>n(i),{immediate:!0})}}},Ye=o.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(e,{slots:t}){const n=o.reactive(m.useEyeDropper());return()=>{if(t.default)return t.default(n)}}}),$e=o.defineComponent({name:"UseFullscreen",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useFullscreen(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),Xe=o.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(e,{slots:t}){const n=o.reactive(m.useGeolocation(e));return()=>{if(t.default)return t.default(n)}}}),qe=o.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(e,{slots:t}){const n=o.reactive(m.useIdle(e.timeout,e));return()=>{if(t.default)return t.default(n)}}});function Qe(e,t,n){const{immediate:r=!0,delay:a=0,onError:i=u.noop,onSuccess:l=u.noop,resetOnExecute:c=!0,shallow:d=!0,throwError:g}=n??{},v=d?o.shallowRef(t):o.ref(t),f=o.ref(!1),p=o.ref(!1),h=o.shallowRef(void 0);async function y(O=0,...A){c&&(v.value=t),h.value=void 0,f.value=!1,p.value=!0,O>0&&await u.promiseTimeout(O);const z=typeof e=="function"?e(...A):e;try{const P=await z;v.value=P,f.value=!0,l(P)}catch(P){if(h.value=P,i(P),g)throw P}finally{p.value=!1}return v.value}r&&y(a);const b={state:v,isReady:f,isLoading:p,error:h,execute:y};function C(){return new Promise((O,A)=>{u.until(p).toBe(!1).then(()=>O(b)).catch(A)})}return{...b,then(O,A){return C().then(O,A)}}}async function Ze(e){return new Promise((t,n)=>{const r=new Image,{src:a,srcset:i,sizes:l,class:c,loading:d,crossorigin:g,referrerPolicy:v}=e;r.src=a,i&&(r.srcset=i),l&&(r.sizes=l),c&&(r.className=c),d&&(r.loading=d),g&&(r.crossOrigin=g),v&&(r.referrerPolicy=v),r.onload=()=>t(r),r.onerror=n})}function xe(e,t={}){const n=Qe(()=>Ze(u.toValue(e)),void 0,{resetOnExecute:!0,...t});return o.watch(()=>u.toValue(e),()=>n.execute(t.delay),{deep:!0}),n}const De=o.defineComponent({name:"UseImage",props:["src","srcset","sizes","as","alt","class","loading","crossorigin","referrerPolicy"],setup(e,{slots:t}){const n=o.reactive(xe(e));return()=>n.isLoading&&t.loading?t.loading(n):n.error&&t.error?t.error(n.error):t.default?t.default(n):o.h(e.as||"img",e)}}),ne=1;function Z(e,t={}){const{throttle:n=0,idle:r=200,onStop:a=u.noop,onScroll:i=u.noop,offset:l={left:0,right:0,top:0,bottom:0},eventListenerOptions:c={capture:!1,passive:!0},behavior:d="auto",window:g=E}=t,v=o.ref(0),f=o.ref(0),p=o.computed({get(){return v.value},set(S){y(S,void 0)}}),h=o.computed({get(){return f.value},set(S){y(void 0,S)}});function y(S,T){var k,w,L;if(!g)return;const M=u.toValue(e);M&&((L=M instanceof Document?g.document.body:M)==null||L.scrollTo({top:(k=u.toValue(T))!=null?k:h.value,left:(w=u.toValue(S))!=null?w:p.value,behavior:u.toValue(d)}))}const b=o.ref(!1),C=o.reactive({left:!0,right:!1,top:!0,bottom:!1}),O=o.reactive({left:!1,right:!1,top:!1,bottom:!1}),A=S=>{b.value&&(b.value=!1,O.left=!1,O.right=!1,O.top=!1,O.bottom=!1,a(S))},z=u.useDebounceFn(A,n+r),P=S=>{var T;if(!g)return;const k=S.document?S.document.documentElement:(T=S.documentElement)!=null?T:S,{display:w,flexDirection:L}=getComputedStyle(k),M=k.scrollLeft;O.left=M<v.value,O.right=M>v.value;const ue=Math.abs(M)<=0+(l.left||0),ce=Math.abs(M)+k.clientWidth>=k.scrollWidth-(l.right||0)-ne;w==="flex"&&L==="row-reverse"?(C.left=ce,C.right=ue):(C.left=ue,C.right=ce),v.value=M;let N=k.scrollTop;S===g.document&&!N&&(N=g.document.body.scrollTop),O.top=N<f.value,O.bottom=N>f.value;const fe=Math.abs(N)<=0+(l.top||0),de=Math.abs(N)+k.clientHeight>=k.scrollHeight-(l.bottom||0)-ne;w==="flex"&&L==="column-reverse"?(C.top=de,C.bottom=fe):(C.top=fe,C.bottom=de),f.value=N},I=S=>{var T;if(!g)return;const k=(T=S.target.documentElement)!=null?T:S.target;P(k),b.value=!0,z(S),i(S)};return _(e,"scroll",n?u.useThrottleFn(I,n,!0,!1):I,c),u.tryOnMounted(()=>{const S=u.toValue(e);S&&P(S)}),_(e,"scrollend",A,c),{x:p,y:h,isScrolling:b,arrivedState:C,directions:O,measure(){const S=u.toValue(e);g&&S&&P(S)}}}function G(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function oe(e,t,n={}){var r;const{direction:a="bottom",interval:i=100}=n,l=o.reactive(Z(e,{...n,offset:{[a]:(r=n.distance)!=null?r:0,...n.offset}})),c=o.ref(),d=o.computed(()=>!!c.value),g=o.computed(()=>G(u.toValue(e))),v=Q(g);function f(){if(l.measure(),!g.value||!v.value)return;const{scrollHeight:p,clientHeight:h,scrollWidth:y,clientWidth:b}=g.value,C=a==="bottom"||a==="top"?p<=h:y<=b;(l.arrivedState[a]||C)&&(c.value||(c.value=Promise.all([t(l),new Promise(O=>setTimeout(O,i))]).finally(()=>{c.value=null,o.nextTick(()=>f())})))}return o.watch(()=>[l.arrivedState[a],v.value],f,{immediate:!0}),{isLoading:d}}const et={[u.directiveHooks.mounted](e,t){typeof t.value=="function"?oe(e,t.value):oe(e,...t.value)}},tt={[u.directiveHooks.mounted](e,t){typeof t.value=="function"?q(e,t.value):q(e,...t.value)}},nt=o.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(e,{slots:t}){const n=o.reactive(m.useMouse(e));return()=>{if(t.default)return t.default(n)}}}),ot=o.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useMouseInElement(n,e));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),rt=o.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useMousePressed({...e,target:n}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),at=o.defineComponent({name:"UseNetwork",setup(e,{slots:t}){const n=o.reactive(m.useNetwork());return()=>{if(t.default)return t.default(n)}}}),st=o.defineComponent({name:"UseNow",props:["interval"],setup(e,{slots:t}){const n=o.reactive(m.useNow({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),it=o.defineComponent({name:"UseObjectUrl",props:["object"],setup(e,{slots:t}){const n=u.toRef(e,"object"),r=m.useObjectUrl(n);return()=>{if(t.default&&r.value)return t.default(r)}}}),lt=o.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(e,{slots:t,emit:n}){const r=o.reactive(m.useOffsetPagination({...e,onPageChange(...a){var i;(i=e.onPageChange)==null||i.call(e,...a),n("page-change",...a)},onPageSizeChange(...a){var i;(i=e.onPageSizeChange)==null||i.call(e,...a),n("page-size-change",...a)},onPageCountChange(...a){var i;(i=e.onPageCountChange)==null||i.call(e,...a),n("page-count-change",...a)}}));return()=>{if(t.default)return t.default(r)}}}),ut=o.defineComponent({name:"UseOnline",setup(e,{slots:t}){const n=o.reactive({isOnline:m.useOnline()});return()=>{if(t.default)return t.default(n)}}}),ct=o.defineComponent({name:"UsePageLeave",setup(e,{slots:t}){const n=o.reactive({isLeft:m.usePageLeave()});return()=>{if(t.default)return t.default(n)}}}),ft=o.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(e,{slots:t}){const n=o.ref(null),r=o.reactive(m.usePointer({...e,target:e.target==="self"?n:E}));return()=>{if(t.default)return t.default(r,{ref:n})}}}),dt=o.defineComponent({name:"UsePointerLock",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.usePointerLock(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),pt=o.defineComponent({name:"UsePreferredColorScheme",setup(e,{slots:t}){const n=o.reactive({colorScheme:m.usePreferredColorScheme()});return()=>{if(t.default)return t.default(n)}}}),vt=o.defineComponent({name:"UsePreferredContrast",setup(e,{slots:t}){const n=o.reactive({contrast:m.usePreferredContrast()});return()=>{if(t.default)return t.default(n)}}}),gt=o.defineComponent({name:"UsePreferredDark",setup(e,{slots:t}){const n=o.reactive({prefersDark:m.usePreferredDark()});return()=>{if(t.default)return t.default(n)}}}),mt=o.defineComponent({name:"UsePreferredLanguages",setup(e,{slots:t}){const n=o.reactive({languages:m.usePreferredLanguages()});return()=>{if(t.default)return t.default(n)}}}),ht=o.defineComponent({name:"UsePreferredReducedMotion",setup(e,{slots:t}){const n=o.reactive({motion:m.usePreferredReducedMotion()});return()=>{if(t.default)return t.default(n)}}});function yt(e,t,n={}){const{window:r=E,...a}=n;let i;const l=K(()=>r&&"MutationObserver"in r),c=()=>{i&&(i.disconnect(),i=void 0)},d=o.watch(()=>U(e),f=>{c(),l.value&&r&&f&&(i=new MutationObserver(t),i.observe(f,a))},{immediate:!0}),g=()=>i?.takeRecords(),v=()=>{c(),d()};return u.tryOnScopeDispose(v),{isSupported:l,stop:v,takeRecords:g}}function J(e,t,n={}){const{window:r=E,initialValue:a="",observe:i=!1}=n,l=o.ref(a),c=o.computed(()=>{var g;return U(t)||((g=r?.document)==null?void 0:g.documentElement)});function d(){var g;const v=u.toValue(e),f=u.toValue(c);if(f&&r){const p=(g=r.getComputedStyle(f).getPropertyValue(v))==null?void 0:g.trim();l.value=p||a}}return i&&yt(c,d,{attributeFilter:["style","class"],window:r}),o.watch([c,()=>u.toValue(e)],d,{immediate:!0}),o.watch(l,g=>{var v;(v=c.value)!=null&&v.style&&c.value.style.setProperty(u.toValue(e),g)}),l}const re="--vueuse-safe-area-top",ae="--vueuse-safe-area-right",se="--vueuse-safe-area-bottom",ie="--vueuse-safe-area-left";function wt(){const e=o.ref(""),t=o.ref(""),n=o.ref(""),r=o.ref("");if(u.isClient){const i=J(re),l=J(ae),c=J(se),d=J(ie);i.value="env(safe-area-inset-top, 0px)",l.value="env(safe-area-inset-right, 0px)",c.value="env(safe-area-inset-bottom, 0px)",d.value="env(safe-area-inset-left, 0px)",a(),_("resize",u.useDebounceFn(a))}function a(){e.value=Y(re),t.value=Y(ae),n.value=Y(se),r.value=Y(ie)}return{top:e,right:t,bottom:n,left:r,update:a}}function Y(e){return getComputedStyle(document.documentElement).getPropertyValue(e)}const Ut=o.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(e,{slots:t}){const{top:n,right:r,bottom:a,left:i}=wt();return()=>{if(t.default)return o.h("div",{style:{paddingTop:e.top?n.value:"",paddingRight:e.right?r.value:"",paddingBottom:e.bottom?a.value:"",paddingLeft:e.left?i.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},t.default())}}}),bt={[u.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=t.value,r=Z(e,{onScroll(){n(r)},onStop(){n(r)}})}else{const[n,r]=t.value,a=Z(e,{...r,onScroll(i){var l;(l=r.onScroll)==null||l.call(r,i),n(a)},onStop(i){var l;(l=r.onStop)==null||l.call(r,i),n(a)}})}}};function le(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:le(n)}}function Ct(e){const t=e||window.event,n=t.target;return le(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}const $=new WeakMap;function St(e,t=!1){const n=o.ref(t);let r=null,a;o.watch(u.toRef(e),c=>{const d=G(u.toValue(c));if(d){const g=d;$.get(g)||$.set(g,a),n.value&&(g.style.overflow="hidden")}},{immediate:!0});const i=()=>{const c=G(u.toValue(e));!c||n.value||(u.isIOS&&(r=_(c,"touchmove",d=>{Ct(d)},{passive:!1})),c.style.overflow="hidden",n.value=!0)},l=()=>{var c;const d=G(u.toValue(e));!d||!n.value||(u.isIOS&&r?.(),d.style.overflow=(c=$.get(d))!=null?c:"",$.delete(d),n.value=!1)};return u.tryOnScopeDispose(l),o.computed({get(){return n.value},set(c){c?i():l()}})}function Ot(){let e=!1;const t=o.ref(!1);return(n,r)=>{if(t.value=r.value,e)return;e=!0;const a=St(n,r.value);o.watch(t,i=>a.value=i)}}const Et=Ot(),Pt=o.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages","showSecond"],setup(e,{slots:t}){const n=o.reactive(m.useTimeAgo(()=>e.time,{...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Lt=o.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(e,{slots:t}){const n=o.reactive(m.useTimestamp({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),kt=o.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(e,{slots:t,expose:n}){const{list:r}=o.toRefs(e),{list:a,containerProps:i,wrapperProps:l,scrollTo:c}=m.useVirtualList(r,e.options);return n({scrollTo:c}),i.style&&typeof i.style=="object"&&!Array.isArray(i.style)&&(i.style.height=e.height||"300px"),()=>o.h("div",{...i},[o.h("div",{...l.value},a.value.map(d=>o.h("div",{style:{overFlow:"hidden",height:d.height}},t.default?t.default(d):"Please set content!")))])}}),_t=o.defineComponent({name:"UseWindowFocus",setup(e,{slots:t}){const n=o.reactive({focused:m.useWindowFocus()});return()=>{if(t.default)return t.default(n)}}}),At=o.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(e,{slots:t}){const n=o.reactive(m.useWindowSize(e));return()=>{if(t.default)return t.default(n)}}});s.OnClickOutside=x,s.OnLongPress=ge,s.UseActiveElement=me,s.UseBattery=he,s.UseBrowserLocation=ye,s.UseClipboard=we,s.UseColorMode=_e,s.UseDark=Ae,s.UseDeviceMotion=Me,s.UseDeviceOrientation=Te,s.UseDevicePixelRatio=Ve,s.UseDevicesList=Ie,s.UseDocumentVisibility=Re,s.UseDraggable=He,s.UseElementBounding=ze,s.UseElementSize=Be,s.UseElementVisibility=Ge,s.UseEyeDropper=Ye,s.UseFullscreen=$e,s.UseGeolocation=Xe,s.UseIdle=qe,s.UseImage=De,s.UseMouse=nt,s.UseMouseInElement=ot,s.UseMousePressed=rt,s.UseNetwork=at,s.UseNow=st,s.UseObjectUrl=it,s.UseOffsetPagination=lt,s.UseOnline=ut,s.UsePageLeave=ct,s.UsePointer=ft,s.UsePointerLock=dt,s.UsePreferredColorScheme=pt,s.UsePreferredContrast=vt,s.UsePreferredDark=gt,s.UsePreferredLanguages=mt,s.UsePreferredReducedMotion=ht,s.UseScreenSafeArea=Ut,s.UseTimeAgo=Pt,s.UseTimestamp=Lt,s.UseVirtualList=kt,s.UseWindowFocus=_t,s.UseWindowSize=At,s.VOnClickOutside=B,s.VOnLongPress=D,s.vElementHover=We,s.vElementSize=Ke,s.vElementVisibility=Je,s.vInfiniteScroll=et,s.vIntersectionObserver=tt,s.vOnClickOutside=B,s.vOnKeyStroke=pe,s.vOnLongPress=D,s.vScroll=bt,s.vScrollLock=Et})(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);
package/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, getCurrentInstance, onMounted, watchEffect, toRefs } from 'vue-demi';
2
- import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
3
- import { toValue, isClient, noop, isObject, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, toRef, tryOnMounted, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn } from '@vueuse/shared';
2
+ 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, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
3
+ import { toValue, isClient, noop, isObject, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn } from '@vueuse/shared';
4
4
 
5
5
  const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
6
6
  name: "OnClickOutside",
@@ -112,8 +112,7 @@ function onClickOutside(target, handler, options = {}) {
112
112
  useEventListener(window, "click", listener, { passive: true, capture }),
113
113
  useEventListener(window, "pointerdown", (e) => {
114
114
  const el = unrefElement(target);
115
- if (el)
116
- shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
115
+ shouldListen = !shouldIgnore(e) && !!(el && !e.composedPath().includes(el));
117
116
  }, { passive: true }),
118
117
  detectIframe && useEventListener(window, "blur", (event) => {
119
118
  setTimeout(() => {
@@ -236,8 +235,12 @@ function onLongPress(target, handler, options) {
236
235
  capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
237
236
  once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
238
237
  };
239
- useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
240
- useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions);
238
+ const cleanup = [
239
+ useEventListener(elementRef, "pointerdown", onDown, listenerOptions),
240
+ useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions)
241
+ ].filter(Boolean);
242
+ const stop = () => cleanup.forEach((fn) => fn());
243
+ return stop;
241
244
  }
242
245
 
243
246
  const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
@@ -304,6 +307,24 @@ const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
304
307
  }
305
308
  });
306
309
 
310
+ const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
311
+ name: "UseClipboard",
312
+ props: [
313
+ "source",
314
+ "read",
315
+ "navigator",
316
+ "copiedDuring",
317
+ "legacy"
318
+ ],
319
+ setup(props, { slots }) {
320
+ const data = reactive(useClipboard(props));
321
+ return () => {
322
+ var _a;
323
+ return (_a = slots.default) == null ? void 0 : _a.call(slots, data);
324
+ };
325
+ }
326
+ });
327
+
307
328
  const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
308
329
  const globalKey = "__vueuse_ssr_handlers__";
309
330
  const handlers = /* @__PURE__ */ getHandlers();
@@ -368,9 +389,10 @@ function useStorage(key, defaults, storage, options = {}) {
368
389
  eventFilter,
369
390
  onError = (e) => {
370
391
  console.error(e);
371
- }
392
+ },
393
+ initOnMounted
372
394
  } = options;
373
- const data = (shallow ? shallowRef : ref)(defaults);
395
+ const data = (shallow ? shallowRef : ref)(typeof defaults === "function" ? defaults() : defaults);
374
396
  if (!storage) {
375
397
  try {
376
398
  storage = getSSRHandler("getDefaultStorage", () => {
@@ -392,10 +414,15 @@ function useStorage(key, defaults, storage, options = {}) {
392
414
  { flush, deep, eventFilter }
393
415
  );
394
416
  if (window && listenToStorageChanges) {
395
- useEventListener(window, "storage", update);
396
- useEventListener(window, customStorageEventName, updateFromCustomEvent);
417
+ tryOnMounted(() => {
418
+ useEventListener(window, "storage", update);
419
+ useEventListener(window, customStorageEventName, updateFromCustomEvent);
420
+ if (initOnMounted)
421
+ update();
422
+ });
397
423
  }
398
- update();
424
+ if (!initOnMounted)
425
+ update();
399
426
  return data;
400
427
  function write(v) {
401
428
  try {
@@ -851,7 +878,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
851
878
  });
852
879
  const width = ref(initialSize.width);
853
880
  const height = ref(initialSize.height);
854
- useResizeObserver(
881
+ const { stop: stop1 } = useResizeObserver(
855
882
  target,
856
883
  ([entry]) => {
857
884
  const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
@@ -875,16 +902,28 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
875
902
  },
876
903
  options
877
904
  );
878
- watch(
905
+ tryOnMounted(() => {
906
+ const ele = unrefElement(target);
907
+ if (ele) {
908
+ width.value = "offsetWidth" in ele ? ele.offsetWidth : initialSize.width;
909
+ height.value = "offsetHeight" in ele ? ele.offsetHeight : initialSize.height;
910
+ }
911
+ });
912
+ const stop2 = watch(
879
913
  () => unrefElement(target),
880
914
  (ele) => {
881
915
  width.value = ele ? initialSize.width : 0;
882
916
  height.value = ele ? initialSize.height : 0;
883
917
  }
884
918
  );
919
+ function stop() {
920
+ stop1();
921
+ stop2();
922
+ }
885
923
  return {
886
924
  width,
887
- height
925
+ height,
926
+ stop
888
927
  };
889
928
  }
890
929
 
@@ -1305,6 +1344,12 @@ function useScroll(element, options = {}) {
1305
1344
  throttle ? useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler,
1306
1345
  eventListenerOptions
1307
1346
  );
1347
+ tryOnMounted(() => {
1348
+ const _element = toValue(element);
1349
+ if (!_element)
1350
+ return;
1351
+ setArrivedState(_element);
1352
+ });
1308
1353
  useEventListener(
1309
1354
  element,
1310
1355
  "scrollend",
@@ -1663,6 +1708,9 @@ function useMutationObserver(target, callback, options = {}) {
1663
1708
  },
1664
1709
  { immediate: true }
1665
1710
  );
1711
+ const takeRecords = () => {
1712
+ return observer == null ? void 0 : observer.takeRecords();
1713
+ };
1666
1714
  const stop = () => {
1667
1715
  cleanup();
1668
1716
  stopWatch();
@@ -1670,7 +1718,8 @@ function useMutationObserver(target, callback, options = {}) {
1670
1718
  tryOnScopeDispose(stop);
1671
1719
  return {
1672
1720
  isSupported,
1673
- stop
1721
+ stop,
1722
+ takeRecords
1674
1723
  };
1675
1724
  }
1676
1725
 
@@ -1838,6 +1887,7 @@ function preventDefault(rawEvent) {
1838
1887
  e.preventDefault();
1839
1888
  return false;
1840
1889
  }
1890
+ const elInitialOverflow = /* @__PURE__ */ new WeakMap();
1841
1891
  function useScrollLock(element, initialState = false) {
1842
1892
  const isLocked = ref(initialState);
1843
1893
  let stopTouchMoveListener = null;
@@ -1846,7 +1896,8 @@ function useScrollLock(element, initialState = false) {
1846
1896
  const target = resolveElement(toValue(el));
1847
1897
  if (target) {
1848
1898
  const ele = target;
1849
- initialOverflow = ele.style.overflow;
1899
+ if (!elInitialOverflow.get(ele))
1900
+ elInitialOverflow.set(ele, initialOverflow);
1850
1901
  if (isLocked.value)
1851
1902
  ele.style.overflow = "hidden";
1852
1903
  }
@@ -1871,11 +1922,13 @@ function useScrollLock(element, initialState = false) {
1871
1922
  isLocked.value = true;
1872
1923
  };
1873
1924
  const unlock = () => {
1925
+ var _a;
1874
1926
  const el = resolveElement(toValue(element));
1875
1927
  if (!el || !isLocked.value)
1876
1928
  return;
1877
1929
  isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
1878
- el.style.overflow = initialOverflow;
1930
+ el.style.overflow = (_a = elInitialOverflow.get(el)) != null ? _a : "";
1931
+ elInitialOverflow.delete(el);
1879
1932
  isLocked.value = false;
1880
1933
  };
1881
1934
  tryOnScopeDispose(unlock);
@@ -1941,7 +1994,8 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
1941
1994
  const { list: listRef } = toRefs(props);
1942
1995
  const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(listRef, props.options);
1943
1996
  expose({ scrollTo });
1944
- typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
1997
+ if (containerProps.style && typeof containerProps.style === "object" && !Array.isArray(containerProps.style))
1998
+ containerProps.style.height = props.height || "300px";
1945
1999
  return () => h("div", { ...containerProps }, [
1946
2000
  h("div", { ...wrapperProps.value }, list.value.map((item) => h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
1947
2001
  ]);
@@ -1973,4 +2027,4 @@ const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
1973
2027
  }
1974
2028
  });
1975
2029
 
1976
- export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
2030
+ export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vueuse/components",
3
- "version": "10.5.0",
3
+ "version": "10.6.1",
4
4
  "description": "Renderless components for VueUse",
5
5
  "author": "Jacob Clevenger<https://github.com/wheatjs>",
6
6
  "license": "MIT",
@@ -32,8 +32,8 @@
32
32
  "jsdelivr": "./index.iife.min.js",
33
33
  "types": "./index.d.cts",
34
34
  "dependencies": {
35
- "@vueuse/core": "10.5.0",
36
- "@vueuse/shared": "10.5.0",
35
+ "@vueuse/core": "10.6.1",
36
+ "@vueuse/shared": "10.6.1",
37
37
  "vue-demi": ">=0.14.6"
38
38
  }
39
39
  }