@vueuse/components 9.2.0 → 9.3.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
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var vueDemi = require('vue-demi');
6
4
  var core = require('@vueuse/core');
7
5
  var shared = require('@vueuse/shared');
@@ -71,23 +69,21 @@ function onClickOutside(target, handler, options = {}) {
71
69
  const listener = (event) => {
72
70
  window.clearTimeout(fallback);
73
71
  const el = unrefElement(target);
74
- const composedPath = event.composedPath();
75
- if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value)
72
+ if (!el || el === event.target || event.composedPath().includes(el) || !shouldListen.value)
76
73
  return;
77
- if (ignore && ignore.length > 0) {
78
- if (ignore.some((target2) => {
79
- const el2 = unrefElement(target2);
80
- return el2 && (event.target === el2 || composedPath.includes(el2));
81
- }))
82
- return;
83
- }
84
74
  handler(event);
85
75
  };
76
+ const shouldIgnore = (event) => {
77
+ return ignore && ignore.some((target2) => {
78
+ const el = unrefElement(target2);
79
+ return el && (event.target === el || event.composedPath().includes(el));
80
+ });
81
+ };
86
82
  const cleanup = [
87
83
  useEventListener(window, "click", listener, { passive: true, capture }),
88
84
  useEventListener(window, "pointerdown", (e) => {
89
85
  const el = unrefElement(target);
90
- shouldListen.value = !!el && !e.composedPath().includes(el);
86
+ shouldListen.value = !!el && !e.composedPath().includes(el) && !shouldIgnore(e);
91
87
  }, { passive: true }),
92
88
  useEventListener(window, "pointerup", (e) => {
93
89
  if (e.button === 0) {
@@ -107,18 +103,20 @@ function onClickOutside(target, handler, options = {}) {
107
103
  return stop;
108
104
  }
109
105
 
110
- const handler = () => {
111
- let stop = null;
112
- return (el, binding) => {
113
- if (stop) {
114
- stop();
115
- stop = onClickOutside(el, binding.value);
116
- return;
106
+ const vOnClickOutside = {
107
+ [shared.directiveHooks.mounted](el, binding) {
108
+ const capture = !binding.modifiers.bubble;
109
+ if (typeof binding.value === "function") {
110
+ el.__onClickOutside_stop = onClickOutside(el, binding.value, { capture });
111
+ } else {
112
+ const [handler, options] = binding.value;
113
+ el.__onClickOutside_stop = onClickOutside(el, handler, Object.assign({ capture }, options));
117
114
  }
118
- stop = onClickOutside(el, binding.value);
119
- };
115
+ },
116
+ [shared.directiveHooks.unmounted](el) {
117
+ el.__onClickOutside_stop();
118
+ }
120
119
  };
121
- const vOnClickOutside = handler();
122
120
 
123
121
  const createKeyPredicate = (keyFilter) => {
124
122
  if (typeof keyFilter === "function")
@@ -127,12 +125,29 @@ const createKeyPredicate = (keyFilter) => {
127
125
  return (event) => event.key === keyFilter;
128
126
  else if (Array.isArray(keyFilter))
129
127
  return (event) => keyFilter.includes(event.key);
130
- else if (keyFilter)
131
- return () => true;
132
- else
133
- return () => false;
128
+ return () => true;
134
129
  };
135
- function onKeyStroke(key, handler, options = {}) {
130
+ function onKeyStroke(...args) {
131
+ let key;
132
+ let handler;
133
+ let options = {};
134
+ if (args.length === 3) {
135
+ key = args[0];
136
+ handler = args[1];
137
+ options = args[2];
138
+ } else if (args.length === 2) {
139
+ if (typeof args[1] === "object") {
140
+ key = true;
141
+ handler = args[0];
142
+ options = args[1];
143
+ } else {
144
+ key = args[0];
145
+ handler = args[1];
146
+ }
147
+ } else {
148
+ key = true;
149
+ handler = args[0];
150
+ }
136
151
  const { target = defaultWindow, eventName = "keydown", passive = false } = options;
137
152
  const predicate = createKeyPredicate(key);
138
153
  const listener = (e) => {
@@ -161,7 +176,7 @@ var __spreadValues$d = (a, b) => {
161
176
  const vOnKeyStroke = {
162
177
  [shared.directiveHooks.mounted](el, binding) {
163
178
  var _a, _b;
164
- const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : [];
179
+ const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
165
180
  if (typeof binding.value === "function") {
166
181
  onKeyStroke(keys, binding.value, {
167
182
  target: el
@@ -375,8 +390,6 @@ function useStorage(key, defaults, storage, options = {}) {
375
390
  }
376
391
  }
377
392
  function read(event) {
378
- if (event && event.key !== key)
379
- return;
380
393
  pauseWatch();
381
394
  try {
382
395
  const rawValue = event ? event.newValue : storage.getItem(key);
@@ -403,6 +416,12 @@ function useStorage(key, defaults, storage, options = {}) {
403
416
  }
404
417
  }
405
418
  function update(event) {
419
+ if (event && event.storageArea !== storage)
420
+ return;
421
+ if (event && event.key === null) {
422
+ data.value = rawInit;
423
+ return;
424
+ }
406
425
  if (event && event.key !== key)
407
426
  return;
408
427
  data.value = read(event);
@@ -422,28 +441,27 @@ function useMediaQuery(query, options = {}) {
422
441
  const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
423
442
  let mediaQuery;
424
443
  const matches = vueDemi.ref(false);
444
+ const cleanup = () => {
445
+ if (!mediaQuery)
446
+ return;
447
+ if ("removeEventListener" in mediaQuery)
448
+ mediaQuery.removeEventListener("change", update);
449
+ else
450
+ mediaQuery.removeListener(update);
451
+ };
425
452
  const update = () => {
426
453
  if (!isSupported.value)
427
454
  return;
428
- if (!mediaQuery)
429
- mediaQuery = window.matchMedia(query);
455
+ cleanup();
456
+ mediaQuery = window.matchMedia(shared.resolveRef(query).value);
430
457
  matches.value = mediaQuery.matches;
431
- };
432
- shared.tryOnBeforeMount(() => {
433
- update();
434
- if (!mediaQuery)
435
- return;
436
458
  if ("addEventListener" in mediaQuery)
437
459
  mediaQuery.addEventListener("change", update);
438
460
  else
439
461
  mediaQuery.addListener(update);
440
- shared.tryOnScopeDispose(() => {
441
- if ("removeEventListener" in mediaQuery)
442
- mediaQuery.removeEventListener("change", update);
443
- else
444
- mediaQuery.removeListener(update);
445
- });
446
- });
462
+ };
463
+ vueDemi.watchEffect(update);
464
+ shared.tryOnScopeDispose(() => cleanup());
447
465
  return matches;
448
466
  }
449
467
 
@@ -1015,10 +1033,38 @@ function useScroll(element, options = {}) {
1015
1033
  eventListenerOptions = {
1016
1034
  capture: false,
1017
1035
  passive: true
1018
- }
1036
+ },
1037
+ behavior = "auto"
1019
1038
  } = options;
1020
- const x = vueDemi.ref(0);
1021
- const y = vueDemi.ref(0);
1039
+ const internalX = vueDemi.ref(0);
1040
+ const internalY = vueDemi.ref(0);
1041
+ const x = vueDemi.computed({
1042
+ get() {
1043
+ return internalX.value;
1044
+ },
1045
+ set(x2) {
1046
+ scrollTo(x2, void 0);
1047
+ }
1048
+ });
1049
+ const y = vueDemi.computed({
1050
+ get() {
1051
+ return internalY.value;
1052
+ },
1053
+ set(y2) {
1054
+ scrollTo(void 0, y2);
1055
+ }
1056
+ });
1057
+ function scrollTo(_x, _y) {
1058
+ var _a, _b, _c;
1059
+ const _element = shared.resolveUnref(element);
1060
+ if (!_element)
1061
+ return;
1062
+ (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
1063
+ top: (_a = shared.resolveUnref(_y)) != null ? _a : y.value,
1064
+ left: (_b = shared.resolveUnref(_x)) != null ? _b : x.value,
1065
+ behavior: shared.resolveUnref(behavior)
1066
+ });
1067
+ }
1022
1068
  const isScrolling = vueDemi.ref(false);
1023
1069
  const arrivedState = vueDemi.reactive({
1024
1070
  left: true,
@@ -1043,19 +1089,19 @@ function useScroll(element, options = {}) {
1043
1089
  const onScrollHandler = (e) => {
1044
1090
  const eventTarget = e.target === document ? e.target.documentElement : e.target;
1045
1091
  const scrollLeft = eventTarget.scrollLeft;
1046
- directions.left = scrollLeft < x.value;
1047
- directions.right = scrollLeft > x.value;
1092
+ directions.left = scrollLeft < internalX.value;
1093
+ directions.right = scrollLeft > internalY.value;
1048
1094
  arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
1049
1095
  arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
1050
- x.value = scrollLeft;
1096
+ internalX.value = scrollLeft;
1051
1097
  let scrollTop = eventTarget.scrollTop;
1052
1098
  if (e.target === document && !scrollTop)
1053
1099
  scrollTop = document.body.scrollTop;
1054
- directions.top = scrollTop < y.value;
1055
- directions.bottom = scrollTop > y.value;
1100
+ directions.top = scrollTop < internalY.value;
1101
+ directions.bottom = scrollTop > internalY.value;
1056
1102
  arrivedState.top = scrollTop <= 0 + (offset.top || 0);
1057
1103
  arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
1058
- y.value = scrollTop;
1104
+ internalY.value = scrollTop;
1059
1105
  isScrolling.value = true;
1060
1106
  onScrollEnd(e);
1061
1107
  onScroll(e);
package/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as vue_demi from 'vue-demi';
2
- import { FunctionDirective, ObjectDirective, ComponentPublicInstance, Ref, UnwrapNestedRefs, ComputedRef } from 'vue-demi';
3
- import { MaybeComputedRef, MaybeRef, ConfigurableEventFilter, ConfigurableFlush } from '@vueuse/shared';
2
+ import { ComponentPublicInstance, ObjectDirective, Ref, UnwrapNestedRefs, ComputedRef, FunctionDirective } from 'vue-demi';
3
+ import { MaybeRef, MaybeComputedRef, ConfigurableEventFilter, ConfigurableFlush } from '@vueuse/shared';
4
4
  import { 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 {
@@ -18,7 +18,34 @@ interface RenderableComponent {
18
18
 
19
19
  declare const OnClickOutside: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
20
20
 
21
- declare const vOnClickOutside: FunctionDirective<any, <E = PointerEvent>(evt: E) => void>;
21
+ declare type VueInstance = ComponentPublicInstance;
22
+ declare type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
23
+ declare type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>;
24
+ declare type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
25
+
26
+ interface OnClickOutsideOptions extends ConfigurableWindow {
27
+ /**
28
+ * List of elements that should not trigger the event.
29
+ */
30
+ ignore?: MaybeElementRef[];
31
+ /**
32
+ * Use capturing phase for internal event listener.
33
+ * @default true
34
+ */
35
+ capture?: boolean;
36
+ /**
37
+ * Run handler function if focus moves to an iframe.
38
+ * @default false
39
+ */
40
+ detectIframe?: boolean;
41
+ }
42
+ declare type OnClickOutsideHandler<T extends {
43
+ detectIframe: OnClickOutsideOptions['detectIframe'];
44
+ } = {
45
+ detectIframe: false;
46
+ }> = (evt: T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) => void;
47
+
48
+ declare const vOnClickOutside: ObjectDirective<HTMLElement, OnClickOutsideHandler | [(evt: any) => void, OnClickOutsideOptions]>;
22
49
 
23
50
  declare type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
24
51
  interface OnKeyStrokeOptions {
@@ -31,11 +58,6 @@ declare type BindingValueFunction$7 = (event: KeyboardEvent) => void;
31
58
  declare type BindingValueArray$6 = [BindingValueFunction$7, OnKeyStrokeOptions];
32
59
  declare const vOnKeyStroke: ObjectDirective<HTMLElement, BindingValueFunction$7 | BindingValueArray$6>;
33
60
 
34
- declare type VueInstance = ComponentPublicInstance;
35
- declare type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
36
- declare type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>;
37
- declare type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
38
-
39
61
  interface OnLongPressOptions {
40
62
  /**
41
63
  * Time in ms till `longpress` gets called
@@ -159,7 +181,7 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseSt
159
181
  modes?: Partial<Record<T | BasicColorSchema, string>>;
160
182
  /**
161
183
  * A custom handler for handle the updates.
162
- * When specified, the default behavior will be overridded.
184
+ * When specified, the default behavior will be overridden.
163
185
  *
164
186
  * @default undefined
165
187
  */
@@ -350,6 +372,13 @@ interface UseScrollOptions {
350
372
  * @default {capture: false, passive: true}
351
373
  */
352
374
  eventListenerOptions?: boolean | AddEventListenerOptions;
375
+ /**
376
+ * Optionally specify a scroll behavior of `auto` (default, not smooth scrolling) or
377
+ * `smooth` (for smooth scrolling) which takes effect when changing the `x` or `y` refs.
378
+ *
379
+ * @default 'auto'
380
+ */
381
+ behavior?: MaybeComputedRef<ScrollBehavior>;
353
382
  }
354
383
  /**
355
384
  * Reactive scroll.
@@ -359,8 +388,8 @@ interface UseScrollOptions {
359
388
  * @param options
360
389
  */
361
390
  declare function useScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
362
- x: vue_demi.Ref<number>;
363
- y: vue_demi.Ref<number>;
391
+ x: vue_demi.WritableComputedRef<number>;
392
+ y: vue_demi.WritableComputedRef<number>;
364
393
  isScrolling: vue_demi.Ref<boolean>;
365
394
  arrivedState: {
366
395
  left: boolean;
package/index.iife.js CHANGED
@@ -1,74 +1,115 @@
1
- ;var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
1
+ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
2
2
  if (VueDemi.install) {
3
3
  return VueDemi
4
4
  }
5
- if (Vue) {
6
- if (Vue.version.slice(0, 4) === '2.7.') {
7
- for (var key in Vue) {
8
- VueDemi[key] = Vue[key]
5
+ if (!Vue) {
6
+ console.error('[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.')
7
+ return VueDemi
8
+ }
9
+
10
+ // Vue 2.7
11
+ if (Vue.version.slice(0, 4) === '2.7.') {
12
+ for (var key in Vue) {
13
+ VueDemi[key] = Vue[key]
14
+ }
15
+ VueDemi.isVue2 = true
16
+ VueDemi.isVue3 = false
17
+ VueDemi.install = function () {}
18
+ VueDemi.Vue = Vue
19
+ VueDemi.Vue2 = Vue
20
+ VueDemi.version = Vue.version
21
+ VueDemi.warn = Vue.util.warn
22
+ function createApp(rootComponent, rootProps) {
23
+ var vm
24
+ var provide = {}
25
+ var app = {
26
+ config: Vue.config,
27
+ use: Vue.use.bind(Vue),
28
+ mixin: Vue.mixin.bind(Vue),
29
+ component: Vue.component.bind(Vue),
30
+ provide: function (key, value) {
31
+ provide[key] = value
32
+ return this
33
+ },
34
+ directive: function (name, dir) {
35
+ if (dir) {
36
+ Vue.directive(name, dir)
37
+ return app
38
+ } else {
39
+ return Vue.directive(name)
40
+ }
41
+ },
42
+ mount: function (el, hydrating) {
43
+ if (!vm) {
44
+ vm = new Vue(Object.assign({ propsData: rootProps }, rootComponent, { provide: Object.assign(provide, rootComponent.provide) }))
45
+ vm.$mount(el, hydrating)
46
+ return vm
47
+ } else {
48
+ return vm
49
+ }
50
+ },
51
+ unmount: function () {
52
+ if (vm) {
53
+ vm.$destroy()
54
+ vm = undefined
55
+ }
56
+ },
57
+ }
58
+ return app
59
+ }
60
+ VueDemi.createApp = createApp
61
+ }
62
+ // Vue 2.6.x
63
+ else if (Vue.version.slice(0, 2) === '2.') {
64
+ if (VueCompositionAPI) {
65
+ for (var key in VueCompositionAPI) {
66
+ VueDemi[key] = VueCompositionAPI[key]
9
67
  }
10
68
  VueDemi.isVue2 = true
11
69
  VueDemi.isVue3 = false
12
- VueDemi.install = function (){}
70
+ VueDemi.install = function () {}
13
71
  VueDemi.Vue = Vue
14
72
  VueDemi.Vue2 = Vue
15
73
  VueDemi.version = Vue.version
74
+ } else {
75
+ console.error('[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.')
16
76
  }
17
- else if (Vue.version.slice(0, 2) === '2.') {
18
- if (VueCompositionAPI) {
19
- for (var key in VueCompositionAPI) {
20
- VueDemi[key] = VueCompositionAPI[key]
21
- }
22
- VueDemi.isVue2 = true
23
- VueDemi.isVue3 = false
24
- VueDemi.install = function (){}
25
- VueDemi.Vue = Vue
26
- VueDemi.Vue2 = Vue
27
- VueDemi.version = Vue.version
28
- } else {
29
- console.error(
30
- '[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.'
31
- )
32
- }
33
- } else if (Vue.version.slice(0, 2) === '3.') {
34
- for (var key in Vue) {
35
- VueDemi[key] = Vue[key]
36
- }
37
- VueDemi.isVue2 = false
38
- VueDemi.isVue3 = true
39
- VueDemi.install = function (){}
40
- VueDemi.Vue = Vue
41
- VueDemi.Vue2 = undefined
42
- VueDemi.version = Vue.version
43
- VueDemi.set = function(target, key, val) {
44
- if (Array.isArray(target)) {
45
- target.length = Math.max(target.length, key)
46
- target.splice(key, 1, val)
47
- return val
48
- }
49
- target[key] = val
77
+ }
78
+ // Vue 3
79
+ else if (Vue.version.slice(0, 2) === '3.') {
80
+ for (var key in Vue) {
81
+ VueDemi[key] = Vue[key]
82
+ }
83
+ VueDemi.isVue2 = false
84
+ VueDemi.isVue3 = true
85
+ VueDemi.install = function () {}
86
+ VueDemi.Vue = Vue
87
+ VueDemi.Vue2 = undefined
88
+ VueDemi.version = Vue.version
89
+ VueDemi.set = function (target, key, val) {
90
+ if (Array.isArray(target)) {
91
+ target.length = Math.max(target.length, key)
92
+ target.splice(key, 1, val)
50
93
  return val
51
94
  }
52
- VueDemi.del = function(target, key) {
53
- if (Array.isArray(target)) {
54
- target.splice(key, 1)
55
- return
56
- }
57
- delete target[key]
95
+ target[key] = val
96
+ return val
97
+ }
98
+ VueDemi.del = function (target, key) {
99
+ if (Array.isArray(target)) {
100
+ target.splice(key, 1)
101
+ return
58
102
  }
59
- } else {
60
- console.error('[vue-demi] Vue version ' + Vue.version + ' is unsupported.')
103
+ delete target[key]
61
104
  }
62
105
  } else {
63
- console.error(
64
- '[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.'
65
- )
106
+ console.error('[vue-demi] Vue version ' + Vue.version + ' is unsupported.')
66
107
  }
67
108
  return VueDemi
68
109
  })(
69
- this.VueDemi = this.VueDemi || (typeof VueDemi !== "undefined" ? VueDemi : {}),
70
- this.Vue || (typeof Vue !== "undefined" ? Vue : undefined),
71
- this.VueCompositionAPI || (typeof VueCompositionAPI !== "undefined" ? VueCompositionAPI : undefined)
110
+ (this.VueDemi = this.VueDemi || (typeof VueDemi !== 'undefined' ? VueDemi : {})),
111
+ this.Vue || (typeof Vue !== 'undefined' ? Vue : undefined),
112
+ this.VueCompositionAPI || (typeof VueCompositionAPI !== 'undefined' ? VueCompositionAPI : undefined)
72
113
  );
73
114
  ;
74
115
  ;(function (exports, vueDemi, core, shared) {
@@ -139,23 +180,21 @@
139
180
  const listener = (event) => {
140
181
  window.clearTimeout(fallback);
141
182
  const el = unrefElement(target);
142
- const composedPath = event.composedPath();
143
- if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value)
183
+ if (!el || el === event.target || event.composedPath().includes(el) || !shouldListen.value)
144
184
  return;
145
- if (ignore && ignore.length > 0) {
146
- if (ignore.some((target2) => {
147
- const el2 = unrefElement(target2);
148
- return el2 && (event.target === el2 || composedPath.includes(el2));
149
- }))
150
- return;
151
- }
152
185
  handler(event);
153
186
  };
187
+ const shouldIgnore = (event) => {
188
+ return ignore && ignore.some((target2) => {
189
+ const el = unrefElement(target2);
190
+ return el && (event.target === el || event.composedPath().includes(el));
191
+ });
192
+ };
154
193
  const cleanup = [
155
194
  useEventListener(window, "click", listener, { passive: true, capture }),
156
195
  useEventListener(window, "pointerdown", (e) => {
157
196
  const el = unrefElement(target);
158
- shouldListen.value = !!el && !e.composedPath().includes(el);
197
+ shouldListen.value = !!el && !e.composedPath().includes(el) && !shouldIgnore(e);
159
198
  }, { passive: true }),
160
199
  useEventListener(window, "pointerup", (e) => {
161
200
  if (e.button === 0) {
@@ -175,18 +214,20 @@
175
214
  return stop;
176
215
  }
177
216
 
178
- const handler = () => {
179
- let stop = null;
180
- return (el, binding) => {
181
- if (stop) {
182
- stop();
183
- stop = onClickOutside(el, binding.value);
184
- return;
217
+ const vOnClickOutside = {
218
+ [shared.directiveHooks.mounted](el, binding) {
219
+ const capture = !binding.modifiers.bubble;
220
+ if (typeof binding.value === "function") {
221
+ el.__onClickOutside_stop = onClickOutside(el, binding.value, { capture });
222
+ } else {
223
+ const [handler, options] = binding.value;
224
+ el.__onClickOutside_stop = onClickOutside(el, handler, Object.assign({ capture }, options));
185
225
  }
186
- stop = onClickOutside(el, binding.value);
187
- };
226
+ },
227
+ [shared.directiveHooks.unmounted](el) {
228
+ el.__onClickOutside_stop();
229
+ }
188
230
  };
189
- const vOnClickOutside = handler();
190
231
 
191
232
  const createKeyPredicate = (keyFilter) => {
192
233
  if (typeof keyFilter === "function")
@@ -195,12 +236,29 @@
195
236
  return (event) => event.key === keyFilter;
196
237
  else if (Array.isArray(keyFilter))
197
238
  return (event) => keyFilter.includes(event.key);
198
- else if (keyFilter)
199
- return () => true;
200
- else
201
- return () => false;
239
+ return () => true;
202
240
  };
203
- function onKeyStroke(key, handler, options = {}) {
241
+ function onKeyStroke(...args) {
242
+ let key;
243
+ let handler;
244
+ let options = {};
245
+ if (args.length === 3) {
246
+ key = args[0];
247
+ handler = args[1];
248
+ options = args[2];
249
+ } else if (args.length === 2) {
250
+ if (typeof args[1] === "object") {
251
+ key = true;
252
+ handler = args[0];
253
+ options = args[1];
254
+ } else {
255
+ key = args[0];
256
+ handler = args[1];
257
+ }
258
+ } else {
259
+ key = true;
260
+ handler = args[0];
261
+ }
204
262
  const { target = defaultWindow, eventName = "keydown", passive = false } = options;
205
263
  const predicate = createKeyPredicate(key);
206
264
  const listener = (e) => {
@@ -229,7 +287,7 @@
229
287
  const vOnKeyStroke = {
230
288
  [shared.directiveHooks.mounted](el, binding) {
231
289
  var _a, _b;
232
- const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : [];
290
+ const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
233
291
  if (typeof binding.value === "function") {
234
292
  onKeyStroke(keys, binding.value, {
235
293
  target: el
@@ -443,8 +501,6 @@
443
501
  }
444
502
  }
445
503
  function read(event) {
446
- if (event && event.key !== key)
447
- return;
448
504
  pauseWatch();
449
505
  try {
450
506
  const rawValue = event ? event.newValue : storage.getItem(key);
@@ -471,6 +527,12 @@
471
527
  }
472
528
  }
473
529
  function update(event) {
530
+ if (event && event.storageArea !== storage)
531
+ return;
532
+ if (event && event.key === null) {
533
+ data.value = rawInit;
534
+ return;
535
+ }
474
536
  if (event && event.key !== key)
475
537
  return;
476
538
  data.value = read(event);
@@ -490,28 +552,27 @@
490
552
  const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
491
553
  let mediaQuery;
492
554
  const matches = vueDemi.ref(false);
555
+ const cleanup = () => {
556
+ if (!mediaQuery)
557
+ return;
558
+ if ("removeEventListener" in mediaQuery)
559
+ mediaQuery.removeEventListener("change", update);
560
+ else
561
+ mediaQuery.removeListener(update);
562
+ };
493
563
  const update = () => {
494
564
  if (!isSupported.value)
495
565
  return;
496
- if (!mediaQuery)
497
- mediaQuery = window.matchMedia(query);
566
+ cleanup();
567
+ mediaQuery = window.matchMedia(shared.resolveRef(query).value);
498
568
  matches.value = mediaQuery.matches;
499
- };
500
- shared.tryOnBeforeMount(() => {
501
- update();
502
- if (!mediaQuery)
503
- return;
504
569
  if ("addEventListener" in mediaQuery)
505
570
  mediaQuery.addEventListener("change", update);
506
571
  else
507
572
  mediaQuery.addListener(update);
508
- shared.tryOnScopeDispose(() => {
509
- if ("removeEventListener" in mediaQuery)
510
- mediaQuery.removeEventListener("change", update);
511
- else
512
- mediaQuery.removeListener(update);
513
- });
514
- });
573
+ };
574
+ vueDemi.watchEffect(update);
575
+ shared.tryOnScopeDispose(() => cleanup());
515
576
  return matches;
516
577
  }
517
578
 
@@ -1083,10 +1144,38 @@
1083
1144
  eventListenerOptions = {
1084
1145
  capture: false,
1085
1146
  passive: true
1086
- }
1147
+ },
1148
+ behavior = "auto"
1087
1149
  } = options;
1088
- const x = vueDemi.ref(0);
1089
- const y = vueDemi.ref(0);
1150
+ const internalX = vueDemi.ref(0);
1151
+ const internalY = vueDemi.ref(0);
1152
+ const x = vueDemi.computed({
1153
+ get() {
1154
+ return internalX.value;
1155
+ },
1156
+ set(x2) {
1157
+ scrollTo(x2, void 0);
1158
+ }
1159
+ });
1160
+ const y = vueDemi.computed({
1161
+ get() {
1162
+ return internalY.value;
1163
+ },
1164
+ set(y2) {
1165
+ scrollTo(void 0, y2);
1166
+ }
1167
+ });
1168
+ function scrollTo(_x, _y) {
1169
+ var _a, _b, _c;
1170
+ const _element = shared.resolveUnref(element);
1171
+ if (!_element)
1172
+ return;
1173
+ (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
1174
+ top: (_a = shared.resolveUnref(_y)) != null ? _a : y.value,
1175
+ left: (_b = shared.resolveUnref(_x)) != null ? _b : x.value,
1176
+ behavior: shared.resolveUnref(behavior)
1177
+ });
1178
+ }
1090
1179
  const isScrolling = vueDemi.ref(false);
1091
1180
  const arrivedState = vueDemi.reactive({
1092
1181
  left: true,
@@ -1111,19 +1200,19 @@
1111
1200
  const onScrollHandler = (e) => {
1112
1201
  const eventTarget = e.target === document ? e.target.documentElement : e.target;
1113
1202
  const scrollLeft = eventTarget.scrollLeft;
1114
- directions.left = scrollLeft < x.value;
1115
- directions.right = scrollLeft > x.value;
1203
+ directions.left = scrollLeft < internalX.value;
1204
+ directions.right = scrollLeft > internalY.value;
1116
1205
  arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
1117
1206
  arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
1118
- x.value = scrollLeft;
1207
+ internalX.value = scrollLeft;
1119
1208
  let scrollTop = eventTarget.scrollTop;
1120
1209
  if (e.target === document && !scrollTop)
1121
1210
  scrollTop = document.body.scrollTop;
1122
- directions.top = scrollTop < y.value;
1123
- directions.bottom = scrollTop > y.value;
1211
+ directions.top = scrollTop < internalY.value;
1212
+ directions.bottom = scrollTop > internalY.value;
1124
1213
  arrivedState.top = scrollTop <= 0 + (offset.top || 0);
1125
1214
  arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
1126
- y.value = scrollTop;
1215
+ internalY.value = scrollTop;
1127
1216
  isScrolling.value = true;
1128
1217
  onScrollEnd(e);
1129
1218
  onScroll(e);
@@ -1930,6 +2019,4 @@
1930
2019
  exports.vScroll = vScroll;
1931
2020
  exports.vScrollLock = vScrollLock;
1932
2021
 
1933
- Object.defineProperty(exports, '__esModule', { value: true });
1934
-
1935
2022
  })(this.VueUse = this.VueUse || {}, VueDemi, VueUse, VueUse);
package/index.iife.min.js CHANGED
@@ -1 +1 @@
1
- var VueDemi=function(l,n,d){if(l.install)return l;if(n)if(n.version.slice(0,4)==="2.7."){for(var u in n)l[u]=n[u];l.isVue2=!0,l.isVue3=!1,l.install=function(){},l.Vue=n,l.Vue2=n,l.version=n.version}else if(n.version.slice(0,2)==="2.")if(d){for(var u in d)l[u]=d[u];l.isVue2=!0,l.isVue3=!1,l.install=function(){},l.Vue=n,l.Vue2=n,l.version=n.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(n.version.slice(0,2)==="3."){for(var u in n)l[u]=n[u];l.isVue2=!1,l.isVue3=!0,l.install=function(){},l.Vue=n,l.Vue2=void 0,l.version=n.version,l.set=function(C,h,S){return Array.isArray(C)?(C.length=Math.max(C.length,h),C.splice(h,1,S),S):(C[h]=S,S)},l.del=function(C,h){if(Array.isArray(C)){C.splice(h,1);return}delete C[h]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");return l}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(l,n,d,u){"use strict";const C=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return d.onClickOutside(o,a=>{r("trigger",a)}),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}});function h(t){var e;const r=u.resolveUnref(t);return(e=r==null?void 0:r.$el)!=null?e:r}const S=u.isClient?window:void 0;function $(...t){let e,r,o,a;if(u.isString(t[0])?([r,o,a]=t,e=S):[e,r,o,a]=t,!e)return u.noop;let i=u.noop;const s=n.watch(()=>h(e),f=>{i(),!!f&&(f.addEventListener(r,o,a),i=()=>{f.removeEventListener(r,o,a),i=u.noop})},{immediate:!0,flush:"post"}),c=()=>{s(),i()};return u.tryOnScopeDispose(c),c}function W(t,e,r={}){const{window:o=S,ignore:a,capture:i=!0,detectIframe:s=!1}=r;if(!o)return;const c=n.ref(!0);let f;const v=p=>{o.clearTimeout(f);const _=h(t),P=p.composedPath();!_||_===p.target||P.includes(_)||!c.value||a&&a.length>0&&a.some(y=>{const U=h(y);return U&&(p.target===U||P.includes(U))})||e(p)},g=[$(o,"click",v,{passive:!0,capture:i}),$(o,"pointerdown",p=>{const _=h(t);c.value=!!_&&!p.composedPath().includes(_)},{passive:!0}),$(o,"pointerup",p=>{if(p.button===0){const _=p.composedPath();p.composedPath=()=>_,f=o.setTimeout(()=>v(p),50)}},{passive:!0}),s&&$(o,"blur",p=>{var _;const P=h(t);((_=document.activeElement)==null?void 0:_.tagName)==="IFRAME"&&!(P==null?void 0:P.contains(document.activeElement))&&e(p)})].filter(Boolean);return()=>g.forEach(p=>p())}const k=(()=>{let t=null;return(e,r)=>{if(t){t(),t=W(e,r.value);return}t=W(e,r.value)}})(),Me=t=>typeof t=="function"?t:typeof t=="string"?e=>e.key===t:Array.isArray(t)?e=>t.includes(e.key):t?()=>!0:()=>!1;function F(t,e,r={}){const{target:o=S,eventName:a="keydown",passive:i=!1}=r,s=Me(t);return $(o,a,f=>{s(f)&&e(f)},i)}var Ve=Object.defineProperty,K=Object.getOwnPropertySymbols,Ae=Object.prototype.hasOwnProperty,Te=Object.prototype.propertyIsEnumerable,J=(t,e,r)=>e in t?Ve(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ne=(t,e)=>{for(var r in e||(e={}))Ae.call(e,r)&&J(t,r,e[r]);if(K)for(var r of K(e))Te.call(e,r)&&J(t,r,e[r]);return t};const Re={[u.directiveHooks.mounted](t,e){var r,o;const a=(o=(r=e.arg)==null?void 0:r.split(","))!=null?o:[];if(typeof e.value=="function")F(a,e.value,{target:t});else{const[i,s]=e.value;F(a,i,Ne({target:t},s))}}},ze=500;function N(t,e,r){var o,a;const i=n.computed(()=>h(t));let s;function c(){s&&(clearTimeout(s),s=void 0)}function f(g){var O,p,_,P;((O=r==null?void 0:r.modifiers)==null?void 0:O.self)&&g.target!==i.value||(c(),((p=r==null?void 0:r.modifiers)==null?void 0:p.prevent)&&g.preventDefault(),((_=r==null?void 0:r.modifiers)==null?void 0:_.stop)&&g.stopPropagation(),s=setTimeout(()=>e(g),(P=r==null?void 0:r.delay)!=null?P:ze))}const v={capture:(o=r==null?void 0:r.modifiers)==null?void 0:o.capture,once:(a=r==null?void 0:r.modifiers)==null?void 0:a.once};$(i,"pointerdown",f,v),$(i,"pointerup",c,v),$(i,"pointerleave",c,v)}const He=n.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return N(o,a=>{r("trigger",a)},t.options),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}}),G={[u.directiveHooks.mounted](t,e){typeof e.value=="function"?N(t,e.value,{modifiers:e.modifiers}):N(t,...e.value)}},Be=n.defineComponent({name:"UseActiveElement",setup(t,{slots:e}){const r=n.reactive({element:d.useActiveElement()});return()=>{if(e.default)return e.default(r)}}}),We=n.defineComponent({name:"UseBattery",setup(t,{slots:e}){const r=n.reactive(d.useBattery(t));return()=>{if(e.default)return e.default(r)}}}),ke=n.defineComponent({name:"UseBrowserLocation",setup(t,{slots:e}){const r=n.reactive(d.useBrowserLocation());return()=>{if(e.default)return e.default(r)}}}),R=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},z="__vueuse_ssr_handlers__";R[z]=R[z]||{};const Fe=R[z];function q(t,e){return Fe[t]||e}function Ke(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":t instanceof Date?"date":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"||Array.isArray(t)?"object":Number.isNaN(t)?"any":"number"}var Je=Object.defineProperty,Q=Object.getOwnPropertySymbols,Ge=Object.prototype.hasOwnProperty,qe=Object.prototype.propertyIsEnumerable,X=(t,e,r)=>e in t?Je(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Y=(t,e)=>{for(var r in e||(e={}))Ge.call(e,r)&&X(t,r,e[r]);if(Q)for(var r of Q(e))qe.call(e,r)&&X(t,r,e[r]);return t};const Qe={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t))},date:{read:t=>new Date(t),write:t=>t.toISOString()}};function Xe(t,e,r,o={}){var a;const{flush:i="pre",deep:s=!0,listenToStorageChanges:c=!0,writeDefaults:f=!0,mergeDefaults:v=!1,shallow:g,window:O=S,eventFilter:p,onError:_=m=>{console.error(m)}}=o,P=(g?n.shallowRef:n.ref)(e);if(!r)try{r=q("getDefaultStorage",()=>{var m;return(m=S)==null?void 0:m.localStorage})()}catch(m){_(m)}if(!r)return P;const y=u.resolveUnref(e),U=Ke(y),w=(a=o.serializer)!=null?a:Qe[U],{pause:b,resume:j}=u.pausableWatch(P,()=>L(P.value),{flush:i,deep:s,eventFilter:p});return O&&c&&$(O,"storage",A),A(),P;function L(m){try{m==null?r.removeItem(t):r.setItem(t,w.write(m))}catch(E){_(E)}}function I(m){if(!(m&&m.key!==t)){b();try{const E=m?m.newValue:r.getItem(t);if(E==null)return f&&y!==null&&r.setItem(t,w.write(y)),y;if(!m&&v){const T=w.read(E);return u.isFunction(v)?v(T,y):U==="object"&&!Array.isArray(T)?Y(Y({},y),T):T}else return typeof E!="string"?E:w.read(E)}catch(E){_(E)}finally{j()}}}function A(m){m&&m.key!==t||(P.value=I(m))}}function H(t,e=!1){const r=n.ref(),o=()=>r.value=Boolean(t());return o(),u.tryOnMounted(o,e),r}function Ye(t,e={}){const{window:r=S}=e,o=H(()=>r&&"matchMedia"in r&&typeof r.matchMedia=="function");let a;const i=n.ref(!1),s=()=>{!o.value||(a||(a=r.matchMedia(t)),i.value=a.matches)};return u.tryOnBeforeMount(()=>{s(),!!a&&("addEventListener"in a?a.addEventListener("change",s):a.addListener(s),u.tryOnScopeDispose(()=>{"removeEventListener"in a?a.removeEventListener("change",s):a.removeListener(s)}))}),i}function Ze(t){return Ye("(prefers-color-scheme: dark)",t)}var xe=Object.defineProperty,Z=Object.getOwnPropertySymbols,De=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable,x=(t,e,r)=>e in t?xe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,tt=(t,e)=>{for(var r in e||(e={}))De.call(e,r)&&x(t,r,e[r]);if(Z)for(var r of Z(e))et.call(e,r)&&x(t,r,e[r]);return t};function rt(t={}){const{selector:e="html",attribute:r="class",initialValue:o="auto",window:a=S,storage:i,storageKey:s="vueuse-color-scheme",listenToStorageChanges:c=!0,storageRef:f,emitAuto:v}=t,g=tt({auto:"",light:"light",dark:"dark"},t.modes||{}),O=Ze({window:a}),p=n.computed(()=>O.value?"dark":"light"),_=f||(s==null?n.ref(o):Xe(s,o,i,{window:a,listenToStorageChanges:c})),P=n.computed({get(){return _.value==="auto"&&!v?p.value:_.value},set(b){_.value=b}}),y=q("updateHTMLAttrs",(b,j,L)=>{const I=a==null?void 0:a.document.querySelector(b);if(!!I)if(j==="class"){const A=L.split(/\s/g);Object.values(g).flatMap(m=>(m||"").split(/\s/g)).filter(Boolean).forEach(m=>{A.includes(m)?I.classList.add(m):I.classList.remove(m)})}else I.setAttribute(j,L)});function U(b){var j;const L=b==="auto"?p.value:b;y(e,r,(j=g[L])!=null?j:L)}function w(b){t.onChanged?t.onChanged(b,U):U(b)}return n.watch(P,w,{flush:"post",immediate:!0}),v&&n.watch(p,()=>w(P.value),{flush:"post"}),u.tryOnMounted(()=>w(P.value)),P}const nt=n.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage","emitAuto"],setup(t,{slots:e}){const r=rt(t),o=n.reactive({mode:r});return()=>{if(e.default)return e.default(o)}}}),ot=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=d.useDark(t),o=n.reactive({isDark:r,toggleDark:u.useToggle(r)});return()=>{if(e.default)return e.default(o)}}}),at=n.defineComponent({name:"UseDeviceMotion",setup(t,{slots:e}){const r=n.reactive(d.useDeviceMotion());return()=>{if(e.default)return e.default(r)}}}),st=n.defineComponent({name:"UseDeviceOrientation",setup(t,{slots:e}){const r=n.reactive(d.useDeviceOrientation());return()=>{if(e.default)return e.default(r)}}}),lt=n.defineComponent({name:"UseDevicePixelRatio",setup(t,{slots:e}){const r=n.reactive({pixelRatio:d.useDevicePixelRatio()});return()=>{if(e.default)return e.default(r)}}}),it=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(t,{slots:e}){const r=n.reactive(d.useDevicesList(t));return()=>{if(e.default)return e.default(r)}}}),ut=n.defineComponent({name:"UseDocumentVisibility",setup(t,{slots:e}){const r=n.reactive({visibility:d.useDocumentVisibility()});return()=>{if(e.default)return e.default(r)}}});var ct=Object.defineProperty,ft=Object.defineProperties,dt=Object.getOwnPropertyDescriptors,D=Object.getOwnPropertySymbols,pt=Object.prototype.hasOwnProperty,vt=Object.prototype.propertyIsEnumerable,ee=(t,e,r)=>e in t?ct(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,gt=(t,e)=>{for(var r in e||(e={}))pt.call(e,r)&&ee(t,r,e[r]);if(D)for(var r of D(e))vt.call(e,r)&&ee(t,r,e[r]);return t},_t=(t,e)=>ft(t,dt(e));const Ot=n.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle"],setup(t,{slots:e}){const r=n.ref(),o=n.computed(()=>{var s;return(s=t.handle)!=null?s:r.value}),a=t.storageKey?d.useStorage(t.storageKey,u.resolveUnref(t.initialValue)||{x:0,y:0},d.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0):t.initialValue||{x:0,y:0},i=n.reactive(d.useDraggable(r,_t(gt({},t),{handle:o,initialValue:a})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r,style:`touch-action:none;${i.style}`},e.default(i))}}}),Pt=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(d.useElementBounding(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});function mt(t){const e=n.ref(!1);return $(t,"mouseenter",()=>e.value=!0),$(t,"mouseleave",()=>e.value=!1),e}const yt={[u.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=mt(t);n.watch(r,o=>e.value(o))}}},ht=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(d.useElementSize(r,{width:t.width,height:t.height},{box:t.box}));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var te=Object.getOwnPropertySymbols,wt=Object.prototype.hasOwnProperty,bt=Object.prototype.propertyIsEnumerable,Ut=(t,e)=>{var r={};for(var o in t)wt.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&te)for(var o of te(t))e.indexOf(o)<0&&bt.call(t,o)&&(r[o]=t[o]);return r};function St(t,e,r={}){const o=r,{window:a=S}=o,i=Ut(o,["window"]);let s;const c=H(()=>a&&"ResizeObserver"in a),f=()=>{s&&(s.disconnect(),s=void 0)},v=n.watch(()=>h(t),O=>{f(),c.value&&a&&O&&(s=new ResizeObserver(e),s.observe(O,i))},{immediate:!0,flush:"post"}),g=()=>{f(),v()};return u.tryOnScopeDispose(g),{isSupported:c,stop:g}}function $t(t,e={width:0,height:0},r={}){const{box:o="content-box"}=r,a=n.ref(e.width),i=n.ref(e.height);return St(t,([s])=>{const c=o==="border-box"?s.borderBoxSize:o==="content-box"?s.contentBoxSize:s.devicePixelContentBoxSize;c?(a.value=c.reduce((f,{inlineSize:v})=>f+v,0),i.value=c.reduce((f,{blockSize:v})=>f+v,0)):(a.value=s.contentRect.width,i.value=s.contentRect.height)},r),n.watch(()=>h(t),s=>{a.value=s?e.width:0,i.value=s?e.height:0}),{width:a,height:i}}const Ct={[u.directiveHooks.mounted](t,e){var r;const o=typeof e.value=="function"?e.value:(r=e.value)==null?void 0:r[0],a=typeof e.value=="function"?[]:e.value.slice(1),{width:i,height:s}=$t(t,...a);n.watch([i,s],([c,f])=>o({width:c,height:f}))}},Et=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive({isVisible:d.useElementVisibility(r)});return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});function re(t,{window:e=S,scrollTarget:r}={}){const o=n.ref(!1),a=()=>{if(!e)return;const i=e.document,s=h(t);if(!s)o.value=!1;else{const c=s.getBoundingClientRect();o.value=c.top<=(e.innerHeight||i.documentElement.clientHeight)&&c.left<=(e.innerWidth||i.documentElement.clientWidth)&&c.bottom>=0&&c.right>=0}};return n.watch(()=>h(t),()=>a(),{immediate:!0,flush:"post"}),e&&$(r||e,"scroll",a,{capture:!1,passive:!0}),o}const jt={[u.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=e.value,o=re(t);n.watch(o,a=>r(a),{immediate:!0})}else{const[r,o]=e.value,a=re(t,o);n.watch(a,i=>r(i),{immediate:!0})}}},Lt=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(t,{slots:e}){const r=n.reactive(d.useEyeDropper());return()=>{if(e.default)return e.default(r)}}}),It=n.defineComponent({name:"UseFullscreen",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(d.useFullscreen(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),Mt=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(t,{slots:e}){const r=n.reactive(d.useGeolocation(t));return()=>{if(e.default)return e.default(r)}}}),Vt=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(t,{slots:e}){const r=n.reactive(d.useIdle(t.timeout,t));return()=>{if(e.default)return e.default(r)}}});function At(t,e,r){const{immediate:o=!0,delay:a=0,onError:i=u.noop,resetOnExecute:s=!0,shallow:c=!0,throwError:f}=r??{},v=c?n.shallowRef(e):n.ref(e),g=n.ref(!1),O=n.ref(!1),p=n.ref(void 0);async function _(P=0,...y){s&&(v.value=e),p.value=void 0,g.value=!1,O.value=!0,P>0&&await u.promiseTimeout(P);const U=typeof t=="function"?t(...y):t;try{const w=await U;v.value=w,g.value=!0}catch(w){if(p.value=w,i(w),f)throw p}finally{O.value=!1}return v.value}return o&&_(a),{state:v,isReady:g,isLoading:O,error:p,execute:_}}var Tt=Object.defineProperty,ne=Object.getOwnPropertySymbols,Nt=Object.prototype.hasOwnProperty,Rt=Object.prototype.propertyIsEnumerable,oe=(t,e,r)=>e in t?Tt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,zt=(t,e)=>{for(var r in e||(e={}))Nt.call(e,r)&&oe(t,r,e[r]);if(ne)for(var r of ne(e))Rt.call(e,r)&&oe(t,r,e[r]);return t};async function Ht(t){return new Promise((e,r)=>{const o=new Image,{src:a,srcset:i,sizes:s}=t;o.src=a,i&&(o.srcset=i),s&&(o.sizes=s),o.onload=()=>e(o),o.onerror=r})}const Bt=(t,e={})=>{const r=At(()=>Ht(u.resolveUnref(t)),void 0,zt({resetOnExecute:!0},e));return n.watch(()=>u.resolveUnref(t),()=>r.execute(e.delay),{deep:!0}),r},Wt=n.defineComponent({name:"UseImage",props:["src","srcset","sizes","as"],setup(t,{slots:e}){const r=n.reactive(Bt(t));return()=>r.isLoading&&e.loading?e.loading(r):r.error&&e.error?e.error(r.error):e.default?e.default(r):n.h(t.as||"img",t)}}),ae=1;function B(t,e={}){const{throttle:r=0,idle:o=200,onStop:a=u.noop,onScroll:i=u.noop,offset:s={left:0,right:0,top:0,bottom:0},eventListenerOptions:c={capture:!1,passive:!0}}=e,f=n.ref(0),v=n.ref(0),g=n.ref(!1),O=n.reactive({left:!0,right:!1,top:!0,bottom:!1}),p=n.reactive({left:!1,right:!1,top:!1,bottom:!1}),_=u.useDebounceFn(y=>{g.value=!1,p.left=!1,p.right=!1,p.top=!1,p.bottom=!1,a(y)},r+o),P=y=>{const U=y.target===document?y.target.documentElement:y.target,w=U.scrollLeft;p.left=w<f.value,p.right=w>f.value,O.left=w<=0+(s.left||0),O.right=w+U.clientWidth>=U.scrollWidth-(s.right||0)-ae,f.value=w;let b=U.scrollTop;y.target===document&&!b&&(b=document.body.scrollTop),p.top=b<v.value,p.bottom=b>v.value,O.top=b<=0+(s.top||0),O.bottom=b+U.clientHeight>=U.scrollHeight-(s.bottom||0)-ae,v.value=b,g.value=!0,_(y),i(y)};return $(t,"scroll",r?u.useThrottleFn(P,r):P,c),{x:f,y:v,isScrolling:g,arrivedState:O,directions:p}}var kt=Object.defineProperty,Ft=Object.defineProperties,Kt=Object.getOwnPropertyDescriptors,se=Object.getOwnPropertySymbols,Jt=Object.prototype.hasOwnProperty,Gt=Object.prototype.propertyIsEnumerable,le=(t,e,r)=>e in t?kt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ie=(t,e)=>{for(var r in e||(e={}))Jt.call(e,r)&&le(t,r,e[r]);if(se)for(var r of se(e))Gt.call(e,r)&&le(t,r,e[r]);return t},qt=(t,e)=>Ft(t,Kt(e));function ue(t,e,r={}){var o,a;const i=(o=r.direction)!=null?o:"bottom",s=n.reactive(B(t,qt(ie({},r),{offset:ie({[i]:(a=r.distance)!=null?a:0},r.offset)})));n.watch(()=>s.arrivedState[i],async c=>{var f,v;if(c){const g=u.resolveUnref(t),O={height:(f=g==null?void 0:g.scrollHeight)!=null?f:0,width:(v=g==null?void 0:g.scrollWidth)!=null?v:0};await e(s),r.preserveScrollPosition&&g&&n.nextTick(()=>{g.scrollTo({top:g.scrollHeight-O.height,left:g.scrollWidth-O.width})})}})}const Qt={[u.directiveHooks.mounted](t,e){typeof e.value=="function"?ue(t,e.value):ue(t,...e.value)}};function ce(t,e,r={}){const{root:o,rootMargin:a="0px",threshold:i=.1,window:s=S}=r,c=H(()=>s&&"IntersectionObserver"in s);let f=u.noop;const v=c.value?n.watch(()=>({el:h(t),root:h(o)}),({el:O,root:p})=>{if(f(),!O)return;const _=new IntersectionObserver(e,{root:p,rootMargin:a,threshold:i});_.observe(O),f=()=>{_.disconnect(),f=u.noop}},{immediate:!0,flush:"post"}):u.noop,g=()=>{f(),v()};return u.tryOnScopeDispose(g),{isSupported:c,stop:g}}const Xt={[u.directiveHooks.mounted](t,e){typeof e.value=="function"?ce(t,e.value):ce(t,...e.value)}},Yt=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(t,{slots:e}){const r=n.reactive(d.useMouse(t));return()=>{if(e.default)return e.default(r)}}}),Zt=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(d.useMouseInElement(r,t));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var xt=Object.defineProperty,Dt=Object.defineProperties,er=Object.getOwnPropertyDescriptors,fe=Object.getOwnPropertySymbols,tr=Object.prototype.hasOwnProperty,rr=Object.prototype.propertyIsEnumerable,de=(t,e,r)=>e in t?xt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,nr=(t,e)=>{for(var r in e||(e={}))tr.call(e,r)&&de(t,r,e[r]);if(fe)for(var r of fe(e))rr.call(e,r)&&de(t,r,e[r]);return t},or=(t,e)=>Dt(t,er(e));const ar=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(d.useMousePressed(or(nr({},t),{target:r})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),sr=n.defineComponent({name:"UseNetwork",setup(t,{slots:e}){const r=n.reactive(d.useNetwork());return()=>{if(e.default)return e.default(r)}}});var lr=Object.defineProperty,ir=Object.defineProperties,ur=Object.getOwnPropertyDescriptors,pe=Object.getOwnPropertySymbols,cr=Object.prototype.hasOwnProperty,fr=Object.prototype.propertyIsEnumerable,ve=(t,e,r)=>e in t?lr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,dr=(t,e)=>{for(var r in e||(e={}))cr.call(e,r)&&ve(t,r,e[r]);if(pe)for(var r of pe(e))fr.call(e,r)&&ve(t,r,e[r]);return t},pr=(t,e)=>ir(t,ur(e));const vr=n.defineComponent({name:"UseNow",props:["interval"],setup(t,{slots:e}){const r=n.reactive(d.useNow(pr(dr({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}}),gr=n.defineComponent({name:"UseObjectUrl",props:["object"],setup(t,{slots:e}){const r=n.toRef(t,"object"),o=d.useObjectUrl(r);return()=>{if(e.default&&o.value)return e.default(o)}}});var _r=Object.defineProperty,Or=Object.defineProperties,Pr=Object.getOwnPropertyDescriptors,ge=Object.getOwnPropertySymbols,mr=Object.prototype.hasOwnProperty,yr=Object.prototype.propertyIsEnumerable,_e=(t,e,r)=>e in t?_r(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,hr=(t,e)=>{for(var r in e||(e={}))mr.call(e,r)&&_e(t,r,e[r]);if(ge)for(var r of ge(e))yr.call(e,r)&&_e(t,r,e[r]);return t},wr=(t,e)=>Or(t,Pr(e));const br=n.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(t,{slots:e,emit:r}){const o=n.reactive(d.useOffsetPagination(wr(hr({},t),{onPageChange(...a){var i;(i=t.onPageChange)==null||i.call(t,...a),r("page-change",...a)},onPageSizeChange(...a){var i;(i=t.onPageSizeChange)==null||i.call(t,...a),r("page-size-change",...a)},onPageCountChange(...a){var i;(i=t.onPageCountChange)==null||i.call(t,...a),r("page-count-change",...a)}})));return()=>{if(e.default)return e.default(o)}}}),Ur=n.defineComponent({name:"UseOnline",setup(t,{slots:e}){const r=n.reactive({isOnline:d.useOnline()});return()=>{if(e.default)return e.default(r)}}}),Sr=n.defineComponent({name:"UsePageLeave",setup(t,{slots:e}){const r=n.reactive({isLeft:d.usePageLeave()});return()=>{if(e.default)return e.default(r)}}});var $r=Object.defineProperty,Cr=Object.defineProperties,Er=Object.getOwnPropertyDescriptors,Oe=Object.getOwnPropertySymbols,jr=Object.prototype.hasOwnProperty,Lr=Object.prototype.propertyIsEnumerable,Pe=(t,e,r)=>e in t?$r(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ir=(t,e)=>{for(var r in e||(e={}))jr.call(e,r)&&Pe(t,r,e[r]);if(Oe)for(var r of Oe(e))Lr.call(e,r)&&Pe(t,r,e[r]);return t},Mr=(t,e)=>Cr(t,Er(e));const Vr=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(t,{slots:e}){const r=n.ref(null),o=n.reactive(d.usePointer(Mr(Ir({},t),{target:t.target==="self"?r:S})));return()=>{if(e.default)return e.default(o,{ref:r})}}}),Ar=n.defineComponent({name:"UsePreferredColorScheme",setup(t,{slots:e}){const r=n.reactive({colorScheme:d.usePreferredColorScheme()});return()=>{if(e.default)return e.default(r)}}}),Tr=n.defineComponent({name:"UsePreferredContrast",setup(t,{slots:e}){const r=n.reactive({contrast:d.usePreferredContrast()});return()=>{if(e.default)return e.default(r)}}}),Nr=n.defineComponent({name:"UsePreferredDark",setup(t,{slots:e}){const r=n.reactive({prefersDark:d.usePreferredDark()});return()=>{if(e.default)return e.default(r)}}}),Rr=n.defineComponent({name:"UsePreferredLanguages",setup(t,{slots:e}){const r=n.reactive({languages:d.usePreferredLanguages()});return()=>{if(e.default)return e.default(r)}}}),zr=n.defineComponent({name:"UsePreferredReducedMotion",setup(t,{slots:e}){const r=n.reactive({motion:d.usePreferredReducedMotion()});return()=>{if(e.default)return e.default(r)}}});function M(t,e,{window:r=S,initialValue:o=""}={}){const a=n.ref(o),i=n.computed(()=>{var s;return h(e)||((s=r==null?void 0:r.document)==null?void 0:s.documentElement)});return n.watch([i,()=>u.resolveUnref(t)],([s,c])=>{var f;if(s&&r){const v=(f=r.getComputedStyle(s).getPropertyValue(c))==null?void 0:f.trim();a.value=v||o}},{immediate:!0}),n.watch(a,s=>{var c;((c=i.value)==null?void 0:c.style)&&i.value.style.setProperty(u.resolveUnref(t),s)}),a}const me="--vueuse-safe-area-top",ye="--vueuse-safe-area-right",he="--vueuse-safe-area-bottom",we="--vueuse-safe-area-left";function Hr(){const t=n.ref(""),e=n.ref(""),r=n.ref(""),o=n.ref("");if(u.isClient){const i=M(me),s=M(ye),c=M(he),f=M(we);i.value="env(safe-area-inset-top, 0px)",s.value="env(safe-area-inset-right, 0px)",c.value="env(safe-area-inset-bottom, 0px)",f.value="env(safe-area-inset-left, 0px)",a(),$("resize",u.useDebounceFn(a))}function a(){t.value=V(me),e.value=V(ye),r.value=V(he),o.value=V(we)}return{top:t,right:e,bottom:r,left:o,update:a}}function V(t){return getComputedStyle(document.documentElement).getPropertyValue(t)}const Br=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(t,{slots:e}){const{top:r,right:o,bottom:a,left:i}=Hr();return()=>{if(e.default)return n.h("div",{style:{paddingTop:t.top?r.value:"",paddingRight:t.right?o.value:"",paddingBottom:t.bottom?a.value:"",paddingLeft:t.left?i.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var Wr=Object.defineProperty,kr=Object.defineProperties,Fr=Object.getOwnPropertyDescriptors,be=Object.getOwnPropertySymbols,Kr=Object.prototype.hasOwnProperty,Jr=Object.prototype.propertyIsEnumerable,Ue=(t,e,r)=>e in t?Wr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Gr=(t,e)=>{for(var r in e||(e={}))Kr.call(e,r)&&Ue(t,r,e[r]);if(be)for(var r of be(e))Jr.call(e,r)&&Ue(t,r,e[r]);return t},qr=(t,e)=>kr(t,Fr(e));const Qr={[u.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=e.value,o=B(t,{onScroll(){r(o)},onStop(){r(o)}})}else{const[r,o]=e.value,a=B(t,qr(Gr({},o),{onScroll(i){var s;(s=o.onScroll)==null||s.call(o,i),r(a)},onStop(i){var s;(s=o.onStop)==null||s.call(o,i),r(a)}}))}}};function Xr(t){const e=t||window.event;return e.touches.length>1?!0:(e.preventDefault&&e.preventDefault(),!1)}function Yr(t,e=!1){const r=n.ref(e);let o=null,a;n.watch(u.resolveRef(t),c=>{if(c){const f=c;a=f.style.overflow,r.value&&(f.style.overflow="hidden")}},{immediate:!0});const i=()=>{const c=u.resolveUnref(t);!c||r.value||(u.isIOS&&(o=$(c,"touchmove",Xr,{passive:!1})),c.style.overflow="hidden",r.value=!0)},s=()=>{const c=u.resolveUnref(t);!c||!r.value||(u.isIOS&&(o==null||o()),c.style.overflow=a,r.value=!1)};return u.tryOnScopeDispose(s),n.computed({get(){return r.value},set(c){c?i():s()}})}const Zr=(()=>{let t=!1;const e=n.ref(!1);return(r,o)=>{if(e.value=o.value,t)return;t=!0;const a=Yr(r,o.value);n.watch(e,i=>a.value=i)}})();var xr=Object.defineProperty,Dr=Object.defineProperties,en=Object.getOwnPropertyDescriptors,Se=Object.getOwnPropertySymbols,tn=Object.prototype.hasOwnProperty,rn=Object.prototype.propertyIsEnumerable,$e=(t,e,r)=>e in t?xr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,nn=(t,e)=>{for(var r in e||(e={}))tn.call(e,r)&&$e(t,r,e[r]);if(Se)for(var r of Se(e))rn.call(e,r)&&$e(t,r,e[r]);return t},on=(t,e)=>Dr(t,en(e));const an=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(t,{slots:e}){const r=n.reactive(d.useTimeAgo(()=>t.time,on(nn({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var sn=Object.defineProperty,ln=Object.defineProperties,un=Object.getOwnPropertyDescriptors,Ce=Object.getOwnPropertySymbols,cn=Object.prototype.hasOwnProperty,fn=Object.prototype.propertyIsEnumerable,Ee=(t,e,r)=>e in t?sn(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,dn=(t,e)=>{for(var r in e||(e={}))cn.call(e,r)&&Ee(t,r,e[r]);if(Ce)for(var r of Ce(e))fn.call(e,r)&&Ee(t,r,e[r]);return t},pn=(t,e)=>ln(t,un(e));const vn=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(t,{slots:e}){const r=n.reactive(d.useTimestamp(pn(dn({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var gn=Object.defineProperty,je=Object.getOwnPropertySymbols,_n=Object.prototype.hasOwnProperty,On=Object.prototype.propertyIsEnumerable,Le=(t,e,r)=>e in t?gn(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ie=(t,e)=>{for(var r in e||(e={}))_n.call(e,r)&&Le(t,r,e[r]);if(je)for(var r of je(e))On.call(e,r)&&Le(t,r,e[r]);return t};const Pn=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(t,{slots:e}){const{list:r}=n.toRefs(t),{list:o,containerProps:a,wrapperProps:i}=d.useVirtualList(r,t.options);return a.style.height=t.height||"300px",()=>n.h("div",Ie({},a),[n.h("div",Ie({},i.value),o.value.map(s=>n.h("div",{style:{overFlow:"hidden",height:s.height}},e.default?e.default(s):"Please set content!")))])}}),mn=n.defineComponent({name:"UseWindowFocus",setup(t,{slots:e}){const r=n.reactive({focused:d.useWindowFocus()});return()=>{if(e.default)return e.default(r)}}}),yn=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(t,{slots:e}){const r=n.reactive(d.useWindowSize(t));return()=>{if(e.default)return e.default(r)}}});l.OnClickOutside=C,l.OnLongPress=He,l.UseActiveElement=Be,l.UseBattery=We,l.UseBrowserLocation=ke,l.UseColorMode=nt,l.UseDark=ot,l.UseDeviceMotion=at,l.UseDeviceOrientation=st,l.UseDevicePixelRatio=lt,l.UseDevicesList=it,l.UseDocumentVisibility=ut,l.UseDraggable=Ot,l.UseElementBounding=Pt,l.UseElementSize=ht,l.UseElementVisibility=Et,l.UseEyeDropper=Lt,l.UseFullscreen=It,l.UseGeolocation=Mt,l.UseIdle=Vt,l.UseImage=Wt,l.UseMouse=Yt,l.UseMouseInElement=Zt,l.UseMousePressed=ar,l.UseNetwork=sr,l.UseNow=vr,l.UseObjectUrl=gr,l.UseOffsetPagination=br,l.UseOnline=Ur,l.UsePageLeave=Sr,l.UsePointer=Vr,l.UsePreferredColorScheme=Ar,l.UsePreferredContrast=Tr,l.UsePreferredDark=Nr,l.UsePreferredLanguages=Rr,l.UsePreferredReducedMotion=zr,l.UseScreenSafeArea=Br,l.UseTimeAgo=an,l.UseTimestamp=vn,l.UseVirtualList=Pn,l.UseWindowFocus=mn,l.UseWindowSize=yn,l.VOnClickOutside=k,l.VOnLongPress=G,l.vElementHover=yt,l.vElementSize=Ct,l.vElementVisibility=jt,l.vInfiniteScroll=Qt,l.vIntersectionObserver=Xt,l.vOnClickOutside=k,l.vOnKeyStroke=Re,l.vOnLongPress=G,l.vScroll=Qr,l.vScrollLock=Zr,Object.defineProperty(l,"__esModule",{value:!0})})(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);
1
+ var VueDemi=function(s,n,f){if(s.install)return s;if(!n)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),s;if(n.version.slice(0,4)==="2.7."){let m=function(h,w){var M,N={},R={config:n.config,use:n.use.bind(n),mixin:n.mixin.bind(n),component:n.component.bind(n),provide:function(A,T){return N[A]=T,this},directive:function(A,T){return T?(n.directive(A,T),R):n.directive(A)},mount:function(A,T){return M||(M=new n(Object.assign({propsData:w},h,{provide:Object.assign(N,h.provide)})),M.$mount(A,T),M)},unmount:function(){M&&(M.$destroy(),M=void 0)}};return R};var Ae=m;for(var c in n)s[c]=n[c];s.isVue2=!0,s.isVue3=!1,s.install=function(){},s.Vue=n,s.Vue2=n,s.version=n.version,s.warn=n.util.warn,s.createApp=m}else if(n.version.slice(0,2)==="2.")if(f){for(var c in f)s[c]=f[c];s.isVue2=!0,s.isVue3=!1,s.install=function(){},s.Vue=n,s.Vue2=n,s.version=n.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(n.version.slice(0,2)==="3."){for(var c in n)s[c]=n[c];s.isVue2=!1,s.isVue3=!0,s.install=function(){},s.Vue=n,s.Vue2=void 0,s.version=n.version,s.set=function(m,h,w){return Array.isArray(m)?(m.length=Math.max(m.length,h),m.splice(h,1,w),w):(m[h]=w,w)},s.del=function(m,h){if(Array.isArray(m)){m.splice(h,1);return}delete m[h]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");return s}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(s,n,f,c){"use strict";const Ae=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return f.onClickOutside(o,a=>{r("trigger",a)}),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}});function m(t){var e;const r=c.resolveUnref(t);return(e=r==null?void 0:r.$el)!=null?e:r}const h=c.isClient?window:void 0;function w(...t){let e,r,o,a;if(c.isString(t[0])?([r,o,a]=t,e=h):[e,r,o,a]=t,!e)return c.noop;let i=c.noop;const l=n.watch(()=>m(e),d=>{i(),!!d&&(d.addEventListener(r,o,a),i=()=>{d.removeEventListener(r,o,a),i=c.noop})},{immediate:!0,flush:"post"}),u=()=>{l(),i()};return c.tryOnScopeDispose(u),u}function M(t,e,r={}){const{window:o=h,ignore:a,capture:i=!0,detectIframe:l=!1}=r;if(!o)return;const u=n.ref(!0);let d;const p=v=>{o.clearTimeout(d);const g=m(t);!g||g===v.target||v.composedPath().includes(g)||!u.value||e(v)},_=v=>a&&a.some(g=>{const y=m(g);return y&&(v.target===y||v.composedPath().includes(y))}),P=[w(o,"click",p,{passive:!0,capture:i}),w(o,"pointerdown",v=>{const g=m(t);u.value=!!g&&!v.composedPath().includes(g)&&!_(v)},{passive:!0}),w(o,"pointerup",v=>{if(v.button===0){const g=v.composedPath();v.composedPath=()=>g,d=o.setTimeout(()=>p(v),50)}},{passive:!0}),l&&w(o,"blur",v=>{var g;const y=m(t);((g=document.activeElement)==null?void 0:g.tagName)==="IFRAME"&&!(y==null?void 0:y.contains(document.activeElement))&&e(v)})].filter(Boolean);return()=>P.forEach(v=>v())}const N={[c.directiveHooks.mounted](t,e){const r=!e.modifiers.bubble;if(typeof e.value=="function")t.__onClickOutside_stop=M(t,e.value,{capture:r});else{const[o,a]=e.value;t.__onClickOutside_stop=M(t,o,Object.assign({capture:r},a))}},[c.directiveHooks.unmounted](t){t.__onClickOutside_stop()}},R=t=>typeof t=="function"?t:typeof t=="string"?e=>e.key===t:Array.isArray(t)?e=>t.includes(e.key):()=>!0;function A(...t){let e,r,o={};t.length===3?(e=t[0],r=t[1],o=t[2]):t.length===2?typeof t[1]=="object"?(e=!0,r=t[0],o=t[1]):(e=t[0],r=t[1]):(e=!0,r=t[0]);const{target:a=h,eventName:i="keydown",passive:l=!1}=o,u=R(e);return w(a,i,p=>{u(p)&&r(p)},l)}var T=Object.defineProperty,J=Object.getOwnPropertySymbols,Te=Object.prototype.hasOwnProperty,Ne=Object.prototype.propertyIsEnumerable,G=(t,e,r)=>e in t?T(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Re=(t,e)=>{for(var r in e||(e={}))Te.call(e,r)&&G(t,r,e[r]);if(J)for(var r of J(e))Ne.call(e,r)&&G(t,r,e[r]);return t};const He={[c.directiveHooks.mounted](t,e){var r,o;const a=(o=(r=e.arg)==null?void 0:r.split(","))!=null?o:!0;if(typeof e.value=="function")A(a,e.value,{target:t});else{const[i,l]=e.value;A(a,i,Re({target:t},l))}}},ze=500;function k(t,e,r){var o,a;const i=n.computed(()=>m(t));let l;function u(){l&&(clearTimeout(l),l=void 0)}function d(_){var P,U,v,g;((P=r==null?void 0:r.modifiers)==null?void 0:P.self)&&_.target!==i.value||(u(),((U=r==null?void 0:r.modifiers)==null?void 0:U.prevent)&&_.preventDefault(),((v=r==null?void 0:r.modifiers)==null?void 0:v.stop)&&_.stopPropagation(),l=setTimeout(()=>e(_),(g=r==null?void 0:r.delay)!=null?g:ze))}const p={capture:(o=r==null?void 0:r.modifiers)==null?void 0:o.capture,once:(a=r==null?void 0:r.modifiers)==null?void 0:a.once};w(i,"pointerdown",d,p),w(i,"pointerup",u,p),w(i,"pointerleave",u,p)}const Ve=n.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return k(o,a=>{r("trigger",a)},t.options),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}}),q={[c.directiveHooks.mounted](t,e){typeof e.value=="function"?k(t,e.value,{modifiers:e.modifiers}):k(t,...e.value)}},ke=n.defineComponent({name:"UseActiveElement",setup(t,{slots:e}){const r=n.reactive({element:f.useActiveElement()});return()=>{if(e.default)return e.default(r)}}}),Be=n.defineComponent({name:"UseBattery",setup(t,{slots:e}){const r=n.reactive(f.useBattery(t));return()=>{if(e.default)return e.default(r)}}}),We=n.defineComponent({name:"UseBrowserLocation",setup(t,{slots:e}){const r=n.reactive(f.useBrowserLocation());return()=>{if(e.default)return e.default(r)}}}),B=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},W="__vueuse_ssr_handlers__";B[W]=B[W]||{};const Fe=B[W];function Q(t,e){return Fe[t]||e}function Ke(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":t instanceof Date?"date":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"||Array.isArray(t)?"object":Number.isNaN(t)?"any":"number"}var Je=Object.defineProperty,X=Object.getOwnPropertySymbols,Ge=Object.prototype.hasOwnProperty,qe=Object.prototype.propertyIsEnumerable,Y=(t,e,r)=>e in t?Je(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Z=(t,e)=>{for(var r in e||(e={}))Ge.call(e,r)&&Y(t,r,e[r]);if(X)for(var r of X(e))qe.call(e,r)&&Y(t,r,e[r]);return t};const Qe={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t))},date:{read:t=>new Date(t),write:t=>t.toISOString()}};function Xe(t,e,r,o={}){var a;const{flush:i="pre",deep:l=!0,listenToStorageChanges:u=!0,writeDefaults:d=!0,mergeDefaults:p=!1,shallow:_,window:P=h,eventFilter:U,onError:v=O=>{console.error(O)}}=o,g=(_?n.shallowRef:n.ref)(e);if(!r)try{r=Q("getDefaultStorage",()=>{var O;return(O=h)==null?void 0:O.localStorage})()}catch(O){v(O)}if(!r)return g;const y=c.resolveUnref(e),S=Ke(y),C=(a=o.serializer)!=null?a:Qe[S],{pause:L,resume:b}=c.pausableWatch(g,()=>$(g.value),{flush:i,deep:l,eventFilter:U});return P&&u&&w(P,"storage",j),j(),g;function $(O){try{O==null?r.removeItem(t):r.setItem(t,C.write(O))}catch(I){v(I)}}function E(O){L();try{const I=O?O.newValue:r.getItem(t);if(I==null)return d&&y!==null&&r.setItem(t,C.write(y)),y;if(!O&&p){const V=C.read(I);return c.isFunction(p)?p(V,y):S==="object"&&!Array.isArray(V)?Z(Z({},y),V):V}else return typeof I!="string"?I:C.read(I)}catch(I){v(I)}finally{b()}}function j(O){if(!(O&&O.storageArea!==r)){if(O&&O.key===null){g.value=y;return}O&&O.key!==t||(g.value=E(O))}}}function F(t,e=!1){const r=n.ref(),o=()=>r.value=Boolean(t());return o(),c.tryOnMounted(o,e),r}function Ye(t,e={}){const{window:r=h}=e,o=F(()=>r&&"matchMedia"in r&&typeof r.matchMedia=="function");let a;const i=n.ref(!1),l=()=>{!a||("removeEventListener"in a?a.removeEventListener("change",u):a.removeListener(u))},u=()=>{!o.value||(l(),a=r.matchMedia(c.resolveRef(t).value),i.value=a.matches,"addEventListener"in a?a.addEventListener("change",u):a.addListener(u))};return n.watchEffect(u),c.tryOnScopeDispose(()=>l()),i}function Ze(t){return Ye("(prefers-color-scheme: dark)",t)}var xe=Object.defineProperty,x=Object.getOwnPropertySymbols,De=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable,D=(t,e,r)=>e in t?xe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,tt=(t,e)=>{for(var r in e||(e={}))De.call(e,r)&&D(t,r,e[r]);if(x)for(var r of x(e))et.call(e,r)&&D(t,r,e[r]);return t};function rt(t={}){const{selector:e="html",attribute:r="class",initialValue:o="auto",window:a=h,storage:i,storageKey:l="vueuse-color-scheme",listenToStorageChanges:u=!0,storageRef:d,emitAuto:p}=t,_=tt({auto:"",light:"light",dark:"dark"},t.modes||{}),P=Ze({window:a}),U=n.computed(()=>P.value?"dark":"light"),v=d||(l==null?n.ref(o):Xe(l,o,i,{window:a,listenToStorageChanges:u})),g=n.computed({get(){return v.value==="auto"&&!p?U.value:v.value},set(L){v.value=L}}),y=Q("updateHTMLAttrs",(L,b,$)=>{const E=a==null?void 0:a.document.querySelector(L);if(!!E)if(b==="class"){const j=$.split(/\s/g);Object.values(_).flatMap(O=>(O||"").split(/\s/g)).filter(Boolean).forEach(O=>{j.includes(O)?E.classList.add(O):E.classList.remove(O)})}else E.setAttribute(b,$)});function S(L){var b;const $=L==="auto"?U.value:L;y(e,r,(b=_[$])!=null?b:$)}function C(L){t.onChanged?t.onChanged(L,S):S(L)}return n.watch(g,C,{flush:"post",immediate:!0}),p&&n.watch(U,()=>C(g.value),{flush:"post"}),c.tryOnMounted(()=>C(g.value)),g}const nt=n.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage","emitAuto"],setup(t,{slots:e}){const r=rt(t),o=n.reactive({mode:r});return()=>{if(e.default)return e.default(o)}}}),ot=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=f.useDark(t),o=n.reactive({isDark:r,toggleDark:c.useToggle(r)});return()=>{if(e.default)return e.default(o)}}}),at=n.defineComponent({name:"UseDeviceMotion",setup(t,{slots:e}){const r=n.reactive(f.useDeviceMotion());return()=>{if(e.default)return e.default(r)}}}),st=n.defineComponent({name:"UseDeviceOrientation",setup(t,{slots:e}){const r=n.reactive(f.useDeviceOrientation());return()=>{if(e.default)return e.default(r)}}}),lt=n.defineComponent({name:"UseDevicePixelRatio",setup(t,{slots:e}){const r=n.reactive({pixelRatio:f.useDevicePixelRatio()});return()=>{if(e.default)return e.default(r)}}}),it=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(t,{slots:e}){const r=n.reactive(f.useDevicesList(t));return()=>{if(e.default)return e.default(r)}}}),ct=n.defineComponent({name:"UseDocumentVisibility",setup(t,{slots:e}){const r=n.reactive({visibility:f.useDocumentVisibility()});return()=>{if(e.default)return e.default(r)}}});var ut=Object.defineProperty,ft=Object.defineProperties,dt=Object.getOwnPropertyDescriptors,ee=Object.getOwnPropertySymbols,pt=Object.prototype.hasOwnProperty,vt=Object.prototype.propertyIsEnumerable,te=(t,e,r)=>e in t?ut(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,_t=(t,e)=>{for(var r in e||(e={}))pt.call(e,r)&&te(t,r,e[r]);if(ee)for(var r of ee(e))vt.call(e,r)&&te(t,r,e[r]);return t},gt=(t,e)=>ft(t,dt(e));const Ot=n.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle"],setup(t,{slots:e}){const r=n.ref(),o=n.computed(()=>{var l;return(l=t.handle)!=null?l:r.value}),a=t.storageKey?f.useStorage(t.storageKey,c.resolveUnref(t.initialValue)||{x:0,y:0},f.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0):t.initialValue||{x:0,y:0},i=n.reactive(f.useDraggable(r,gt(_t({},t),{handle:o,initialValue:a})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r,style:`touch-action:none;${i.style}`},e.default(i))}}}),mt=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(f.useElementBounding(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});function Pt(t){const e=n.ref(!1);return w(t,"mouseenter",()=>e.value=!0),w(t,"mouseleave",()=>e.value=!1),e}const yt={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=Pt(t);n.watch(r,o=>e.value(o))}}},ht=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(f.useElementSize(r,{width:t.width,height:t.height},{box:t.box}));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var re=Object.getOwnPropertySymbols,wt=Object.prototype.hasOwnProperty,bt=Object.prototype.propertyIsEnumerable,Ut=(t,e)=>{var r={};for(var o in t)wt.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&re)for(var o of re(t))e.indexOf(o)<0&&bt.call(t,o)&&(r[o]=t[o]);return r};function St(t,e,r={}){const o=r,{window:a=h}=o,i=Ut(o,["window"]);let l;const u=F(()=>a&&"ResizeObserver"in a),d=()=>{l&&(l.disconnect(),l=void 0)},p=n.watch(()=>m(t),P=>{d(),u.value&&a&&P&&(l=new ResizeObserver(e),l.observe(P,i))},{immediate:!0,flush:"post"}),_=()=>{d(),p()};return c.tryOnScopeDispose(_),{isSupported:u,stop:_}}function $t(t,e={width:0,height:0},r={}){const{box:o="content-box"}=r,a=n.ref(e.width),i=n.ref(e.height);return St(t,([l])=>{const u=o==="border-box"?l.borderBoxSize:o==="content-box"?l.contentBoxSize:l.devicePixelContentBoxSize;u?(a.value=u.reduce((d,{inlineSize:p})=>d+p,0),i.value=u.reduce((d,{blockSize:p})=>d+p,0)):(a.value=l.contentRect.width,i.value=l.contentRect.height)},r),n.watch(()=>m(t),l=>{a.value=l?e.width:0,i.value=l?e.height:0}),{width:a,height:i}}const Ct={[c.directiveHooks.mounted](t,e){var r;const o=typeof e.value=="function"?e.value:(r=e.value)==null?void 0:r[0],a=typeof e.value=="function"?[]:e.value.slice(1),{width:i,height:l}=$t(t,...a);n.watch([i,l],([u,d])=>o({width:u,height:d}))}},Et=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive({isVisible:f.useElementVisibility(r)});return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});function ne(t,{window:e=h,scrollTarget:r}={}){const o=n.ref(!1),a=()=>{if(!e)return;const i=e.document,l=m(t);if(!l)o.value=!1;else{const u=l.getBoundingClientRect();o.value=u.top<=(e.innerHeight||i.documentElement.clientHeight)&&u.left<=(e.innerWidth||i.documentElement.clientWidth)&&u.bottom>=0&&u.right>=0}};return n.watch(()=>m(t),()=>a(),{immediate:!0,flush:"post"}),e&&w(r||e,"scroll",a,{capture:!1,passive:!0}),o}const jt={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=e.value,o=ne(t);n.watch(o,a=>r(a),{immediate:!0})}else{const[r,o]=e.value,a=ne(t,o);n.watch(a,i=>r(i),{immediate:!0})}}},Lt=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(t,{slots:e}){const r=n.reactive(f.useEyeDropper());return()=>{if(e.default)return e.default(r)}}}),It=n.defineComponent({name:"UseFullscreen",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(f.useFullscreen(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),Mt=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(t,{slots:e}){const r=n.reactive(f.useGeolocation(t));return()=>{if(e.default)return e.default(r)}}}),At=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(t,{slots:e}){const r=n.reactive(f.useIdle(t.timeout,t));return()=>{if(e.default)return e.default(r)}}});function Tt(t,e,r){const{immediate:o=!0,delay:a=0,onError:i=c.noop,resetOnExecute:l=!0,shallow:u=!0,throwError:d}=r??{},p=u?n.shallowRef(e):n.ref(e),_=n.ref(!1),P=n.ref(!1),U=n.ref(void 0);async function v(g=0,...y){l&&(p.value=e),U.value=void 0,_.value=!1,P.value=!0,g>0&&await c.promiseTimeout(g);const S=typeof t=="function"?t(...y):t;try{const C=await S;p.value=C,_.value=!0}catch(C){if(U.value=C,i(C),d)throw U}finally{P.value=!1}return p.value}return o&&v(a),{state:p,isReady:_,isLoading:P,error:U,execute:v}}var Nt=Object.defineProperty,oe=Object.getOwnPropertySymbols,Rt=Object.prototype.hasOwnProperty,Ht=Object.prototype.propertyIsEnumerable,ae=(t,e,r)=>e in t?Nt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,zt=(t,e)=>{for(var r in e||(e={}))Rt.call(e,r)&&ae(t,r,e[r]);if(oe)for(var r of oe(e))Ht.call(e,r)&&ae(t,r,e[r]);return t};async function Vt(t){return new Promise((e,r)=>{const o=new Image,{src:a,srcset:i,sizes:l}=t;o.src=a,i&&(o.srcset=i),l&&(o.sizes=l),o.onload=()=>e(o),o.onerror=r})}const kt=(t,e={})=>{const r=Tt(()=>Vt(c.resolveUnref(t)),void 0,zt({resetOnExecute:!0},e));return n.watch(()=>c.resolveUnref(t),()=>r.execute(e.delay),{deep:!0}),r},Bt=n.defineComponent({name:"UseImage",props:["src","srcset","sizes","as"],setup(t,{slots:e}){const r=n.reactive(kt(t));return()=>r.isLoading&&e.loading?e.loading(r):r.error&&e.error?e.error(r.error):e.default?e.default(r):n.h(t.as||"img",t)}}),se=1;function K(t,e={}){const{throttle:r=0,idle:o=200,onStop:a=c.noop,onScroll:i=c.noop,offset:l={left:0,right:0,top:0,bottom:0},eventListenerOptions:u={capture:!1,passive:!0},behavior:d="auto"}=e,p=n.ref(0),_=n.ref(0),P=n.computed({get(){return p.value},set(b){v(b,void 0)}}),U=n.computed({get(){return _.value},set(b){v(void 0,b)}});function v(b,$){var E,j,O;const I=c.resolveUnref(t);!I||(O=I instanceof Document?document.body:I)==null||O.scrollTo({top:(E=c.resolveUnref($))!=null?E:U.value,left:(j=c.resolveUnref(b))!=null?j:P.value,behavior:c.resolveUnref(d)})}const g=n.ref(!1),y=n.reactive({left:!0,right:!1,top:!0,bottom:!1}),S=n.reactive({left:!1,right:!1,top:!1,bottom:!1}),C=c.useDebounceFn(b=>{g.value=!1,S.left=!1,S.right=!1,S.top=!1,S.bottom=!1,a(b)},r+o),L=b=>{const $=b.target===document?b.target.documentElement:b.target,E=$.scrollLeft;S.left=E<p.value,S.right=E>_.value,y.left=E<=0+(l.left||0),y.right=E+$.clientWidth>=$.scrollWidth-(l.right||0)-se,p.value=E;let j=$.scrollTop;b.target===document&&!j&&(j=document.body.scrollTop),S.top=j<_.value,S.bottom=j>_.value,y.top=j<=0+(l.top||0),y.bottom=j+$.clientHeight>=$.scrollHeight-(l.bottom||0)-se,_.value=j,g.value=!0,C(b),i(b)};return w(t,"scroll",r?c.useThrottleFn(L,r):L,u),{x:P,y:U,isScrolling:g,arrivedState:y,directions:S}}var Wt=Object.defineProperty,Ft=Object.defineProperties,Kt=Object.getOwnPropertyDescriptors,le=Object.getOwnPropertySymbols,Jt=Object.prototype.hasOwnProperty,Gt=Object.prototype.propertyIsEnumerable,ie=(t,e,r)=>e in t?Wt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ce=(t,e)=>{for(var r in e||(e={}))Jt.call(e,r)&&ie(t,r,e[r]);if(le)for(var r of le(e))Gt.call(e,r)&&ie(t,r,e[r]);return t},qt=(t,e)=>Ft(t,Kt(e));function ue(t,e,r={}){var o,a;const i=(o=r.direction)!=null?o:"bottom",l=n.reactive(K(t,qt(ce({},r),{offset:ce({[i]:(a=r.distance)!=null?a:0},r.offset)})));n.watch(()=>l.arrivedState[i],async u=>{var d,p;if(u){const _=c.resolveUnref(t),P={height:(d=_==null?void 0:_.scrollHeight)!=null?d:0,width:(p=_==null?void 0:_.scrollWidth)!=null?p:0};await e(l),r.preserveScrollPosition&&_&&n.nextTick(()=>{_.scrollTo({top:_.scrollHeight-P.height,left:_.scrollWidth-P.width})})}})}const Qt={[c.directiveHooks.mounted](t,e){typeof e.value=="function"?ue(t,e.value):ue(t,...e.value)}};function fe(t,e,r={}){const{root:o,rootMargin:a="0px",threshold:i=.1,window:l=h}=r,u=F(()=>l&&"IntersectionObserver"in l);let d=c.noop;const p=u.value?n.watch(()=>({el:m(t),root:m(o)}),({el:P,root:U})=>{if(d(),!P)return;const v=new IntersectionObserver(e,{root:U,rootMargin:a,threshold:i});v.observe(P),d=()=>{v.disconnect(),d=c.noop}},{immediate:!0,flush:"post"}):c.noop,_=()=>{d(),p()};return c.tryOnScopeDispose(_),{isSupported:u,stop:_}}const Xt={[c.directiveHooks.mounted](t,e){typeof e.value=="function"?fe(t,e.value):fe(t,...e.value)}},Yt=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(t,{slots:e}){const r=n.reactive(f.useMouse(t));return()=>{if(e.default)return e.default(r)}}}),Zt=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(f.useMouseInElement(r,t));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var xt=Object.defineProperty,Dt=Object.defineProperties,er=Object.getOwnPropertyDescriptors,de=Object.getOwnPropertySymbols,tr=Object.prototype.hasOwnProperty,rr=Object.prototype.propertyIsEnumerable,pe=(t,e,r)=>e in t?xt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,nr=(t,e)=>{for(var r in e||(e={}))tr.call(e,r)&&pe(t,r,e[r]);if(de)for(var r of de(e))rr.call(e,r)&&pe(t,r,e[r]);return t},or=(t,e)=>Dt(t,er(e));const ar=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(f.useMousePressed(or(nr({},t),{target:r})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),sr=n.defineComponent({name:"UseNetwork",setup(t,{slots:e}){const r=n.reactive(f.useNetwork());return()=>{if(e.default)return e.default(r)}}});var lr=Object.defineProperty,ir=Object.defineProperties,cr=Object.getOwnPropertyDescriptors,ve=Object.getOwnPropertySymbols,ur=Object.prototype.hasOwnProperty,fr=Object.prototype.propertyIsEnumerable,_e=(t,e,r)=>e in t?lr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,dr=(t,e)=>{for(var r in e||(e={}))ur.call(e,r)&&_e(t,r,e[r]);if(ve)for(var r of ve(e))fr.call(e,r)&&_e(t,r,e[r]);return t},pr=(t,e)=>ir(t,cr(e));const vr=n.defineComponent({name:"UseNow",props:["interval"],setup(t,{slots:e}){const r=n.reactive(f.useNow(pr(dr({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}}),_r=n.defineComponent({name:"UseObjectUrl",props:["object"],setup(t,{slots:e}){const r=n.toRef(t,"object"),o=f.useObjectUrl(r);return()=>{if(e.default&&o.value)return e.default(o)}}});var gr=Object.defineProperty,Or=Object.defineProperties,mr=Object.getOwnPropertyDescriptors,ge=Object.getOwnPropertySymbols,Pr=Object.prototype.hasOwnProperty,yr=Object.prototype.propertyIsEnumerable,Oe=(t,e,r)=>e in t?gr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,hr=(t,e)=>{for(var r in e||(e={}))Pr.call(e,r)&&Oe(t,r,e[r]);if(ge)for(var r of ge(e))yr.call(e,r)&&Oe(t,r,e[r]);return t},wr=(t,e)=>Or(t,mr(e));const br=n.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(t,{slots:e,emit:r}){const o=n.reactive(f.useOffsetPagination(wr(hr({},t),{onPageChange(...a){var i;(i=t.onPageChange)==null||i.call(t,...a),r("page-change",...a)},onPageSizeChange(...a){var i;(i=t.onPageSizeChange)==null||i.call(t,...a),r("page-size-change",...a)},onPageCountChange(...a){var i;(i=t.onPageCountChange)==null||i.call(t,...a),r("page-count-change",...a)}})));return()=>{if(e.default)return e.default(o)}}}),Ur=n.defineComponent({name:"UseOnline",setup(t,{slots:e}){const r=n.reactive({isOnline:f.useOnline()});return()=>{if(e.default)return e.default(r)}}}),Sr=n.defineComponent({name:"UsePageLeave",setup(t,{slots:e}){const r=n.reactive({isLeft:f.usePageLeave()});return()=>{if(e.default)return e.default(r)}}});var $r=Object.defineProperty,Cr=Object.defineProperties,Er=Object.getOwnPropertyDescriptors,me=Object.getOwnPropertySymbols,jr=Object.prototype.hasOwnProperty,Lr=Object.prototype.propertyIsEnumerable,Pe=(t,e,r)=>e in t?$r(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ir=(t,e)=>{for(var r in e||(e={}))jr.call(e,r)&&Pe(t,r,e[r]);if(me)for(var r of me(e))Lr.call(e,r)&&Pe(t,r,e[r]);return t},Mr=(t,e)=>Cr(t,Er(e));const Ar=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(t,{slots:e}){const r=n.ref(null),o=n.reactive(f.usePointer(Mr(Ir({},t),{target:t.target==="self"?r:h})));return()=>{if(e.default)return e.default(o,{ref:r})}}}),Tr=n.defineComponent({name:"UsePreferredColorScheme",setup(t,{slots:e}){const r=n.reactive({colorScheme:f.usePreferredColorScheme()});return()=>{if(e.default)return e.default(r)}}}),Nr=n.defineComponent({name:"UsePreferredContrast",setup(t,{slots:e}){const r=n.reactive({contrast:f.usePreferredContrast()});return()=>{if(e.default)return e.default(r)}}}),Rr=n.defineComponent({name:"UsePreferredDark",setup(t,{slots:e}){const r=n.reactive({prefersDark:f.usePreferredDark()});return()=>{if(e.default)return e.default(r)}}}),Hr=n.defineComponent({name:"UsePreferredLanguages",setup(t,{slots:e}){const r=n.reactive({languages:f.usePreferredLanguages()});return()=>{if(e.default)return e.default(r)}}}),zr=n.defineComponent({name:"UsePreferredReducedMotion",setup(t,{slots:e}){const r=n.reactive({motion:f.usePreferredReducedMotion()});return()=>{if(e.default)return e.default(r)}}});function H(t,e,{window:r=h,initialValue:o=""}={}){const a=n.ref(o),i=n.computed(()=>{var l;return m(e)||((l=r==null?void 0:r.document)==null?void 0:l.documentElement)});return n.watch([i,()=>c.resolveUnref(t)],([l,u])=>{var d;if(l&&r){const p=(d=r.getComputedStyle(l).getPropertyValue(u))==null?void 0:d.trim();a.value=p||o}},{immediate:!0}),n.watch(a,l=>{var u;((u=i.value)==null?void 0:u.style)&&i.value.style.setProperty(c.resolveUnref(t),l)}),a}const ye="--vueuse-safe-area-top",he="--vueuse-safe-area-right",we="--vueuse-safe-area-bottom",be="--vueuse-safe-area-left";function Vr(){const t=n.ref(""),e=n.ref(""),r=n.ref(""),o=n.ref("");if(c.isClient){const i=H(ye),l=H(he),u=H(we),d=H(be);i.value="env(safe-area-inset-top, 0px)",l.value="env(safe-area-inset-right, 0px)",u.value="env(safe-area-inset-bottom, 0px)",d.value="env(safe-area-inset-left, 0px)",a(),w("resize",c.useDebounceFn(a))}function a(){t.value=z(ye),e.value=z(he),r.value=z(we),o.value=z(be)}return{top:t,right:e,bottom:r,left:o,update:a}}function z(t){return getComputedStyle(document.documentElement).getPropertyValue(t)}const kr=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(t,{slots:e}){const{top:r,right:o,bottom:a,left:i}=Vr();return()=>{if(e.default)return n.h("div",{style:{paddingTop:t.top?r.value:"",paddingRight:t.right?o.value:"",paddingBottom:t.bottom?a.value:"",paddingLeft:t.left?i.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var Br=Object.defineProperty,Wr=Object.defineProperties,Fr=Object.getOwnPropertyDescriptors,Ue=Object.getOwnPropertySymbols,Kr=Object.prototype.hasOwnProperty,Jr=Object.prototype.propertyIsEnumerable,Se=(t,e,r)=>e in t?Br(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Gr=(t,e)=>{for(var r in e||(e={}))Kr.call(e,r)&&Se(t,r,e[r]);if(Ue)for(var r of Ue(e))Jr.call(e,r)&&Se(t,r,e[r]);return t},qr=(t,e)=>Wr(t,Fr(e));const Qr={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=e.value,o=K(t,{onScroll(){r(o)},onStop(){r(o)}})}else{const[r,o]=e.value,a=K(t,qr(Gr({},o),{onScroll(i){var l;(l=o.onScroll)==null||l.call(o,i),r(a)},onStop(i){var l;(l=o.onStop)==null||l.call(o,i),r(a)}}))}}};function Xr(t){const e=t||window.event;return e.touches.length>1?!0:(e.preventDefault&&e.preventDefault(),!1)}function Yr(t,e=!1){const r=n.ref(e);let o=null,a;n.watch(c.resolveRef(t),u=>{if(u){const d=u;a=d.style.overflow,r.value&&(d.style.overflow="hidden")}},{immediate:!0});const i=()=>{const u=c.resolveUnref(t);!u||r.value||(c.isIOS&&(o=w(u,"touchmove",Xr,{passive:!1})),u.style.overflow="hidden",r.value=!0)},l=()=>{const u=c.resolveUnref(t);!u||!r.value||(c.isIOS&&(o==null||o()),u.style.overflow=a,r.value=!1)};return c.tryOnScopeDispose(l),n.computed({get(){return r.value},set(u){u?i():l()}})}const Zr=(()=>{let t=!1;const e=n.ref(!1);return(r,o)=>{if(e.value=o.value,t)return;t=!0;const a=Yr(r,o.value);n.watch(e,i=>a.value=i)}})();var xr=Object.defineProperty,Dr=Object.defineProperties,en=Object.getOwnPropertyDescriptors,$e=Object.getOwnPropertySymbols,tn=Object.prototype.hasOwnProperty,rn=Object.prototype.propertyIsEnumerable,Ce=(t,e,r)=>e in t?xr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,nn=(t,e)=>{for(var r in e||(e={}))tn.call(e,r)&&Ce(t,r,e[r]);if($e)for(var r of $e(e))rn.call(e,r)&&Ce(t,r,e[r]);return t},on=(t,e)=>Dr(t,en(e));const an=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(t,{slots:e}){const r=n.reactive(f.useTimeAgo(()=>t.time,on(nn({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var sn=Object.defineProperty,ln=Object.defineProperties,cn=Object.getOwnPropertyDescriptors,Ee=Object.getOwnPropertySymbols,un=Object.prototype.hasOwnProperty,fn=Object.prototype.propertyIsEnumerable,je=(t,e,r)=>e in t?sn(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,dn=(t,e)=>{for(var r in e||(e={}))un.call(e,r)&&je(t,r,e[r]);if(Ee)for(var r of Ee(e))fn.call(e,r)&&je(t,r,e[r]);return t},pn=(t,e)=>ln(t,cn(e));const vn=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(t,{slots:e}){const r=n.reactive(f.useTimestamp(pn(dn({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var _n=Object.defineProperty,Le=Object.getOwnPropertySymbols,gn=Object.prototype.hasOwnProperty,On=Object.prototype.propertyIsEnumerable,Ie=(t,e,r)=>e in t?_n(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Me=(t,e)=>{for(var r in e||(e={}))gn.call(e,r)&&Ie(t,r,e[r]);if(Le)for(var r of Le(e))On.call(e,r)&&Ie(t,r,e[r]);return t};const mn=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(t,{slots:e}){const{list:r}=n.toRefs(t),{list:o,containerProps:a,wrapperProps:i}=f.useVirtualList(r,t.options);return a.style.height=t.height||"300px",()=>n.h("div",Me({},a),[n.h("div",Me({},i.value),o.value.map(l=>n.h("div",{style:{overFlow:"hidden",height:l.height}},e.default?e.default(l):"Please set content!")))])}}),Pn=n.defineComponent({name:"UseWindowFocus",setup(t,{slots:e}){const r=n.reactive({focused:f.useWindowFocus()});return()=>{if(e.default)return e.default(r)}}}),yn=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(t,{slots:e}){const r=n.reactive(f.useWindowSize(t));return()=>{if(e.default)return e.default(r)}}});s.OnClickOutside=Ae,s.OnLongPress=Ve,s.UseActiveElement=ke,s.UseBattery=Be,s.UseBrowserLocation=We,s.UseColorMode=nt,s.UseDark=ot,s.UseDeviceMotion=at,s.UseDeviceOrientation=st,s.UseDevicePixelRatio=lt,s.UseDevicesList=it,s.UseDocumentVisibility=ct,s.UseDraggable=Ot,s.UseElementBounding=mt,s.UseElementSize=ht,s.UseElementVisibility=Et,s.UseEyeDropper=Lt,s.UseFullscreen=It,s.UseGeolocation=Mt,s.UseIdle=At,s.UseImage=Bt,s.UseMouse=Yt,s.UseMouseInElement=Zt,s.UseMousePressed=ar,s.UseNetwork=sr,s.UseNow=vr,s.UseObjectUrl=_r,s.UseOffsetPagination=br,s.UseOnline=Ur,s.UsePageLeave=Sr,s.UsePointer=Ar,s.UsePreferredColorScheme=Tr,s.UsePreferredContrast=Nr,s.UsePreferredDark=Rr,s.UsePreferredLanguages=Hr,s.UsePreferredReducedMotion=zr,s.UseScreenSafeArea=kr,s.UseTimeAgo=an,s.UseTimestamp=vn,s.UseVirtualList=mn,s.UseWindowFocus=Pn,s.UseWindowSize=yn,s.VOnClickOutside=N,s.VOnLongPress=q,s.vElementHover=yt,s.vElementSize=Ct,s.vElementVisibility=jt,s.vInfiniteScroll=Qt,s.vIntersectionObserver=Xt,s.vOnClickOutside=N,s.vOnKeyStroke=He,s.vOnLongPress=q,s.vScroll=Qr,s.vScrollLock=Zr})(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);
package/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
- import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, toRef, toRefs } from 'vue-demi';
1
+ import { defineComponent, ref, h, watch, computed, reactive, shallowRef, watchEffect, nextTick, toRef, toRefs } from 'vue-demi';
2
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, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
3
- import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, directiveHooks, pausableWatch, isFunction, tryOnMounted, tryOnBeforeMount, useToggle, promiseTimeout, useDebounceFn, useThrottleFn, resolveRef, isIOS } from '@vueuse/shared';
3
+ import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, directiveHooks, pausableWatch, isFunction, tryOnMounted, resolveRef, useToggle, promiseTimeout, useDebounceFn, useThrottleFn, isIOS } from '@vueuse/shared';
4
4
 
5
5
  const OnClickOutside = defineComponent({
6
6
  name: "OnClickOutside",
@@ -67,23 +67,21 @@ function onClickOutside(target, handler, options = {}) {
67
67
  const listener = (event) => {
68
68
  window.clearTimeout(fallback);
69
69
  const el = unrefElement(target);
70
- const composedPath = event.composedPath();
71
- if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value)
70
+ if (!el || el === event.target || event.composedPath().includes(el) || !shouldListen.value)
72
71
  return;
73
- if (ignore && ignore.length > 0) {
74
- if (ignore.some((target2) => {
75
- const el2 = unrefElement(target2);
76
- return el2 && (event.target === el2 || composedPath.includes(el2));
77
- }))
78
- return;
79
- }
80
72
  handler(event);
81
73
  };
74
+ const shouldIgnore = (event) => {
75
+ return ignore && ignore.some((target2) => {
76
+ const el = unrefElement(target2);
77
+ return el && (event.target === el || event.composedPath().includes(el));
78
+ });
79
+ };
82
80
  const cleanup = [
83
81
  useEventListener(window, "click", listener, { passive: true, capture }),
84
82
  useEventListener(window, "pointerdown", (e) => {
85
83
  const el = unrefElement(target);
86
- shouldListen.value = !!el && !e.composedPath().includes(el);
84
+ shouldListen.value = !!el && !e.composedPath().includes(el) && !shouldIgnore(e);
87
85
  }, { passive: true }),
88
86
  useEventListener(window, "pointerup", (e) => {
89
87
  if (e.button === 0) {
@@ -103,18 +101,20 @@ function onClickOutside(target, handler, options = {}) {
103
101
  return stop;
104
102
  }
105
103
 
106
- const handler = () => {
107
- let stop = null;
108
- return (el, binding) => {
109
- if (stop) {
110
- stop();
111
- stop = onClickOutside(el, binding.value);
112
- return;
104
+ const vOnClickOutside = {
105
+ [directiveHooks.mounted](el, binding) {
106
+ const capture = !binding.modifiers.bubble;
107
+ if (typeof binding.value === "function") {
108
+ el.__onClickOutside_stop = onClickOutside(el, binding.value, { capture });
109
+ } else {
110
+ const [handler, options] = binding.value;
111
+ el.__onClickOutside_stop = onClickOutside(el, handler, Object.assign({ capture }, options));
113
112
  }
114
- stop = onClickOutside(el, binding.value);
115
- };
113
+ },
114
+ [directiveHooks.unmounted](el) {
115
+ el.__onClickOutside_stop();
116
+ }
116
117
  };
117
- const vOnClickOutside = handler();
118
118
 
119
119
  const createKeyPredicate = (keyFilter) => {
120
120
  if (typeof keyFilter === "function")
@@ -123,12 +123,29 @@ const createKeyPredicate = (keyFilter) => {
123
123
  return (event) => event.key === keyFilter;
124
124
  else if (Array.isArray(keyFilter))
125
125
  return (event) => keyFilter.includes(event.key);
126
- else if (keyFilter)
127
- return () => true;
128
- else
129
- return () => false;
126
+ return () => true;
130
127
  };
131
- function onKeyStroke(key, handler, options = {}) {
128
+ function onKeyStroke(...args) {
129
+ let key;
130
+ let handler;
131
+ let options = {};
132
+ if (args.length === 3) {
133
+ key = args[0];
134
+ handler = args[1];
135
+ options = args[2];
136
+ } else if (args.length === 2) {
137
+ if (typeof args[1] === "object") {
138
+ key = true;
139
+ handler = args[0];
140
+ options = args[1];
141
+ } else {
142
+ key = args[0];
143
+ handler = args[1];
144
+ }
145
+ } else {
146
+ key = true;
147
+ handler = args[0];
148
+ }
132
149
  const { target = defaultWindow, eventName = "keydown", passive = false } = options;
133
150
  const predicate = createKeyPredicate(key);
134
151
  const listener = (e) => {
@@ -157,7 +174,7 @@ var __spreadValues$d = (a, b) => {
157
174
  const vOnKeyStroke = {
158
175
  [directiveHooks.mounted](el, binding) {
159
176
  var _a, _b;
160
- const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : [];
177
+ const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
161
178
  if (typeof binding.value === "function") {
162
179
  onKeyStroke(keys, binding.value, {
163
180
  target: el
@@ -371,8 +388,6 @@ function useStorage(key, defaults, storage, options = {}) {
371
388
  }
372
389
  }
373
390
  function read(event) {
374
- if (event && event.key !== key)
375
- return;
376
391
  pauseWatch();
377
392
  try {
378
393
  const rawValue = event ? event.newValue : storage.getItem(key);
@@ -399,6 +414,12 @@ function useStorage(key, defaults, storage, options = {}) {
399
414
  }
400
415
  }
401
416
  function update(event) {
417
+ if (event && event.storageArea !== storage)
418
+ return;
419
+ if (event && event.key === null) {
420
+ data.value = rawInit;
421
+ return;
422
+ }
402
423
  if (event && event.key !== key)
403
424
  return;
404
425
  data.value = read(event);
@@ -418,28 +439,27 @@ function useMediaQuery(query, options = {}) {
418
439
  const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
419
440
  let mediaQuery;
420
441
  const matches = ref(false);
442
+ const cleanup = () => {
443
+ if (!mediaQuery)
444
+ return;
445
+ if ("removeEventListener" in mediaQuery)
446
+ mediaQuery.removeEventListener("change", update);
447
+ else
448
+ mediaQuery.removeListener(update);
449
+ };
421
450
  const update = () => {
422
451
  if (!isSupported.value)
423
452
  return;
424
- if (!mediaQuery)
425
- mediaQuery = window.matchMedia(query);
453
+ cleanup();
454
+ mediaQuery = window.matchMedia(resolveRef(query).value);
426
455
  matches.value = mediaQuery.matches;
427
- };
428
- tryOnBeforeMount(() => {
429
- update();
430
- if (!mediaQuery)
431
- return;
432
456
  if ("addEventListener" in mediaQuery)
433
457
  mediaQuery.addEventListener("change", update);
434
458
  else
435
459
  mediaQuery.addListener(update);
436
- tryOnScopeDispose(() => {
437
- if ("removeEventListener" in mediaQuery)
438
- mediaQuery.removeEventListener("change", update);
439
- else
440
- mediaQuery.removeListener(update);
441
- });
442
- });
460
+ };
461
+ watchEffect(update);
462
+ tryOnScopeDispose(() => cleanup());
443
463
  return matches;
444
464
  }
445
465
 
@@ -1011,10 +1031,38 @@ function useScroll(element, options = {}) {
1011
1031
  eventListenerOptions = {
1012
1032
  capture: false,
1013
1033
  passive: true
1014
- }
1034
+ },
1035
+ behavior = "auto"
1015
1036
  } = options;
1016
- const x = ref(0);
1017
- const y = ref(0);
1037
+ const internalX = ref(0);
1038
+ const internalY = ref(0);
1039
+ const x = computed({
1040
+ get() {
1041
+ return internalX.value;
1042
+ },
1043
+ set(x2) {
1044
+ scrollTo(x2, void 0);
1045
+ }
1046
+ });
1047
+ const y = computed({
1048
+ get() {
1049
+ return internalY.value;
1050
+ },
1051
+ set(y2) {
1052
+ scrollTo(void 0, y2);
1053
+ }
1054
+ });
1055
+ function scrollTo(_x, _y) {
1056
+ var _a, _b, _c;
1057
+ const _element = resolveUnref(element);
1058
+ if (!_element)
1059
+ return;
1060
+ (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
1061
+ top: (_a = resolveUnref(_y)) != null ? _a : y.value,
1062
+ left: (_b = resolveUnref(_x)) != null ? _b : x.value,
1063
+ behavior: resolveUnref(behavior)
1064
+ });
1065
+ }
1018
1066
  const isScrolling = ref(false);
1019
1067
  const arrivedState = reactive({
1020
1068
  left: true,
@@ -1039,19 +1087,19 @@ function useScroll(element, options = {}) {
1039
1087
  const onScrollHandler = (e) => {
1040
1088
  const eventTarget = e.target === document ? e.target.documentElement : e.target;
1041
1089
  const scrollLeft = eventTarget.scrollLeft;
1042
- directions.left = scrollLeft < x.value;
1043
- directions.right = scrollLeft > x.value;
1090
+ directions.left = scrollLeft < internalX.value;
1091
+ directions.right = scrollLeft > internalY.value;
1044
1092
  arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
1045
1093
  arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
1046
- x.value = scrollLeft;
1094
+ internalX.value = scrollLeft;
1047
1095
  let scrollTop = eventTarget.scrollTop;
1048
1096
  if (e.target === document && !scrollTop)
1049
1097
  scrollTop = document.body.scrollTop;
1050
- directions.top = scrollTop < y.value;
1051
- directions.bottom = scrollTop > y.value;
1098
+ directions.top = scrollTop < internalY.value;
1099
+ directions.bottom = scrollTop > internalY.value;
1052
1100
  arrivedState.top = scrollTop <= 0 + (offset.top || 0);
1053
1101
  arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
1054
- y.value = scrollTop;
1102
+ internalY.value = scrollTop;
1055
1103
  isScrolling.value = true;
1056
1104
  onScrollEnd(e);
1057
1105
  onScroll(e);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vueuse/components",
3
- "version": "9.2.0",
3
+ "version": "9.3.1",
4
4
  "description": "Renderless components for VueUse",
5
5
  "author": "Jacob Clevenger<https://github.com/wheatjs>",
6
6
  "license": "MIT",
@@ -33,8 +33,8 @@
33
33
  "jsdelivr": "./index.iife.min.js",
34
34
  "types": "./index.d.ts",
35
35
  "dependencies": {
36
- "@vueuse/core": "9.2.0",
37
- "@vueuse/shared": "9.2.0",
36
+ "@vueuse/core": "9.3.1",
37
+ "@vueuse/shared": "9.3.1",
38
38
  "vue-demi": "*"
39
39
  }
40
40
  }