@vitejs/devtools 0.0.0-alpha.21 → 0.0.0-alpha.23

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.
@@ -0,0 +1,815 @@
1
+ import { A as getCurrentScope, B as unref, E as watchEffect, F as ref, I as shallowRef, L as toRef$1, M as onScopeDispose, P as readonly, T as watch, _ as inject, g as hasInjectionContext, h as getCurrentInstance, k as customRef, o as computed, v as nextTick, y as onMounted, z as toValue } from "./vue.runtime.esm-bundler-B98sE5ly.js";
2
+
3
+ //#region ../../node_modules/.pnpm/@vueuse+shared@14.1.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.js
4
+ /**
5
+ * Call onScopeDispose() if it's inside an effect scope lifecycle, if not, do nothing
6
+ *
7
+ * @param fn
8
+ */
9
+ function tryOnScopeDispose(fn, failSilently) {
10
+ if (getCurrentScope()) {
11
+ onScopeDispose(fn, failSilently);
12
+ return true;
13
+ }
14
+ return false;
15
+ }
16
+ const localProvidedStateMap = /* @__PURE__ */ new WeakMap();
17
+ /**
18
+ * On the basis of `inject`, it is allowed to directly call inject to obtain the value after call provide in the same component.
19
+ *
20
+ * @example
21
+ * ```ts
22
+ * injectLocal('MyInjectionKey', 1)
23
+ * const injectedValue = injectLocal('MyInjectionKey') // injectedValue === 1
24
+ * ```
25
+ *
26
+ * @__NO_SIDE_EFFECTS__
27
+ */
28
+ const injectLocal = (...args) => {
29
+ var _getCurrentInstance;
30
+ const key = args[0];
31
+ const instance = (_getCurrentInstance = getCurrentInstance()) === null || _getCurrentInstance === void 0 ? void 0 : _getCurrentInstance.proxy;
32
+ const owner = instance !== null && instance !== void 0 ? instance : getCurrentScope();
33
+ if (owner == null && !hasInjectionContext()) throw new Error("injectLocal must be called in setup");
34
+ if (owner && localProvidedStateMap.has(owner) && key in localProvidedStateMap.get(owner)) return localProvidedStateMap.get(owner)[key];
35
+ return inject(...args);
36
+ };
37
+ const isClient = typeof window !== "undefined" && typeof document !== "undefined";
38
+ const isWorker = typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
39
+ const notNullish = (val) => val != null;
40
+ const toString = Object.prototype.toString;
41
+ const isObject = (val) => toString.call(val) === "[object Object]";
42
+ const noop = () => {};
43
+ function toRef(...args) {
44
+ if (args.length !== 1) return toRef$1(...args);
45
+ const r = args[0];
46
+ return typeof r === "function" ? readonly(customRef(() => ({
47
+ get: r,
48
+ set: noop
49
+ }))) : ref(r);
50
+ }
51
+ /**
52
+ * @internal
53
+ */
54
+ function createFilterWrapper(filter, fn) {
55
+ function wrapper(...args) {
56
+ return new Promise((resolve, reject) => {
57
+ Promise.resolve(filter(() => fn.apply(this, args), {
58
+ fn,
59
+ thisArg: this,
60
+ args
61
+ })).then(resolve).catch(reject);
62
+ });
63
+ }
64
+ return wrapper;
65
+ }
66
+ const bypassFilter = (invoke$1) => {
67
+ return invoke$1();
68
+ };
69
+ /**
70
+ * Create an EventFilter that debounce the events
71
+ */
72
+ function debounceFilter(ms, options = {}) {
73
+ let timer;
74
+ let maxTimer;
75
+ let lastRejector = noop;
76
+ const _clearTimeout = (timer$1) => {
77
+ clearTimeout(timer$1);
78
+ lastRejector();
79
+ lastRejector = noop;
80
+ };
81
+ let lastInvoker;
82
+ const filter = (invoke$1) => {
83
+ const duration = toValue(ms);
84
+ const maxDuration = toValue(options.maxWait);
85
+ if (timer) _clearTimeout(timer);
86
+ if (duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) {
87
+ if (maxTimer) {
88
+ _clearTimeout(maxTimer);
89
+ maxTimer = void 0;
90
+ }
91
+ return Promise.resolve(invoke$1());
92
+ }
93
+ return new Promise((resolve, reject) => {
94
+ lastRejector = options.rejectOnCancel ? reject : resolve;
95
+ lastInvoker = invoke$1;
96
+ if (maxDuration && !maxTimer) maxTimer = setTimeout(() => {
97
+ if (timer) _clearTimeout(timer);
98
+ maxTimer = void 0;
99
+ resolve(lastInvoker());
100
+ }, maxDuration);
101
+ timer = setTimeout(() => {
102
+ if (maxTimer) _clearTimeout(maxTimer);
103
+ maxTimer = void 0;
104
+ resolve(invoke$1());
105
+ }, duration);
106
+ });
107
+ };
108
+ return filter;
109
+ }
110
+ /**
111
+ * EventFilter that gives extra controls to pause and resume the filter
112
+ *
113
+ * @param extendFilter Extra filter to apply when the PausableFilter is active, default to none
114
+ * @param options Options to configure the filter
115
+ */
116
+ function pausableFilter(extendFilter = bypassFilter, options = {}) {
117
+ const { initialState = "active" } = options;
118
+ const isActive = toRef(initialState === "active");
119
+ function pause() {
120
+ isActive.value = false;
121
+ }
122
+ function resume() {
123
+ isActive.value = true;
124
+ }
125
+ const eventFilter = (...args) => {
126
+ if (isActive.value) extendFilter(...args);
127
+ };
128
+ return {
129
+ isActive: readonly(isActive),
130
+ pause,
131
+ resume,
132
+ eventFilter
133
+ };
134
+ }
135
+ /**
136
+ * Get a px value for SSR use, do not rely on this method outside of SSR as REM unit is assumed at 16px, which might not be the case on the client
137
+ */
138
+ function pxValue(px) {
139
+ return px.endsWith("rem") ? Number.parseFloat(px) * 16 : Number.parseFloat(px);
140
+ }
141
+ function toArray(value) {
142
+ return Array.isArray(value) ? value : [value];
143
+ }
144
+ function cacheStringFunction(fn) {
145
+ const cache = Object.create(null);
146
+ return ((str) => {
147
+ return cache[str] || (cache[str] = fn(str));
148
+ });
149
+ }
150
+ const hyphenateRE = /\B([A-Z])/g;
151
+ const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, "-$1").toLowerCase());
152
+ const camelizeRE = /-(\w)/g;
153
+ const camelize = cacheStringFunction((str) => {
154
+ return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
155
+ });
156
+ function getLifeCycleTarget(target) {
157
+ return target || getCurrentInstance();
158
+ }
159
+ /**
160
+ * Debounce execution of a function.
161
+ *
162
+ * @see https://vueuse.org/useDebounceFn
163
+ * @param fn A function to be executed after delay milliseconds debounced.
164
+ * @param ms A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
165
+ * @param options Options
166
+ *
167
+ * @return A new, debounce, function.
168
+ *
169
+ * @__NO_SIDE_EFFECTS__
170
+ */
171
+ function useDebounceFn(fn, ms = 200, options = {}) {
172
+ return createFilterWrapper(debounceFilter(ms, options), fn);
173
+ }
174
+ function watchWithFilter(source, cb, options = {}) {
175
+ const { eventFilter = bypassFilter, ...watchOptions } = options;
176
+ return watch(source, createFilterWrapper(eventFilter, cb), watchOptions);
177
+ }
178
+ function watchPausable(source, cb, options = {}) {
179
+ const { eventFilter: filter, initialState = "active", ...watchOptions } = options;
180
+ const { eventFilter, pause, resume, isActive } = pausableFilter(filter, { initialState });
181
+ return {
182
+ stop: watchWithFilter(source, cb, {
183
+ ...watchOptions,
184
+ eventFilter
185
+ }),
186
+ pause,
187
+ resume,
188
+ isActive
189
+ };
190
+ }
191
+ /** @deprecated use `watchPausable` instead */
192
+ const pausableWatch = watchPausable;
193
+ /**
194
+ * Call onMounted() if it's inside a component lifecycle, if not, just call the function
195
+ *
196
+ * @param fn
197
+ * @param sync if set to false, it will run in the nextTick() of Vue
198
+ * @param target
199
+ */
200
+ function tryOnMounted(fn, sync = true, target) {
201
+ if (getLifeCycleTarget(target)) onMounted(fn, target);
202
+ else if (sync) fn();
203
+ else nextTick(fn);
204
+ }
205
+ /**
206
+ * Shorthand for watching value with {immediate: true}
207
+ *
208
+ * @see https://vueuse.org/watchImmediate
209
+ */
210
+ function watchImmediate(source, cb, options) {
211
+ return watch(source, cb, {
212
+ ...options,
213
+ immediate: true
214
+ });
215
+ }
216
+
217
+ //#endregion
218
+ //#region ../../node_modules/.pnpm/@vueuse+core@14.1.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.js
219
+ const defaultWindow = isClient ? window : void 0;
220
+ const defaultDocument = isClient ? window.document : void 0;
221
+ const defaultNavigator = isClient ? window.navigator : void 0;
222
+ const defaultLocation = isClient ? window.location : void 0;
223
+ /**
224
+ * Get the dom element of a ref of element or Vue component instance
225
+ *
226
+ * @param elRef
227
+ */
228
+ function unrefElement(elRef) {
229
+ var _$el;
230
+ const plain = toValue(elRef);
231
+ return (_$el = plain === null || plain === void 0 ? void 0 : plain.$el) !== null && _$el !== void 0 ? _$el : plain;
232
+ }
233
+ function useEventListener(...args) {
234
+ const register = (el, event, listener, options) => {
235
+ el.addEventListener(event, listener, options);
236
+ return () => el.removeEventListener(event, listener, options);
237
+ };
238
+ const firstParamTargets = computed(() => {
239
+ const test = toArray(toValue(args[0])).filter((e) => e != null);
240
+ return test.every((e) => typeof e !== "string") ? test : void 0;
241
+ });
242
+ return watchImmediate(() => {
243
+ var _firstParamTargets$va, _firstParamTargets$va2;
244
+ return [
245
+ (_firstParamTargets$va = (_firstParamTargets$va2 = firstParamTargets.value) === null || _firstParamTargets$va2 === void 0 ? void 0 : _firstParamTargets$va2.map((e) => unrefElement(e))) !== null && _firstParamTargets$va !== void 0 ? _firstParamTargets$va : [defaultWindow].filter((e) => e != null),
246
+ toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
247
+ toArray(unref(firstParamTargets.value ? args[2] : args[1])),
248
+ toValue(firstParamTargets.value ? args[3] : args[2])
249
+ ];
250
+ }, ([raw_targets, raw_events, raw_listeners, raw_options], _, onCleanup) => {
251
+ if (!(raw_targets === null || raw_targets === void 0 ? void 0 : raw_targets.length) || !(raw_events === null || raw_events === void 0 ? void 0 : raw_events.length) || !(raw_listeners === null || raw_listeners === void 0 ? void 0 : raw_listeners.length)) return;
252
+ const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
253
+ const cleanups = raw_targets.flatMap((el) => raw_events.flatMap((event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))));
254
+ onCleanup(() => {
255
+ cleanups.forEach((fn) => fn());
256
+ });
257
+ }, { flush: "post" });
258
+ }
259
+ /**
260
+ * Mounted state in ref.
261
+ *
262
+ * @see https://vueuse.org/useMounted
263
+ *
264
+ * @__NO_SIDE_EFFECTS__
265
+ */
266
+ function useMounted() {
267
+ const isMounted = shallowRef(false);
268
+ const instance = getCurrentInstance();
269
+ if (instance) onMounted(() => {
270
+ isMounted.value = true;
271
+ }, instance);
272
+ return isMounted;
273
+ }
274
+ /* @__NO_SIDE_EFFECTS__ */
275
+ function useSupported(callback) {
276
+ const isMounted = useMounted();
277
+ return computed(() => {
278
+ isMounted.value;
279
+ return Boolean(callback());
280
+ });
281
+ }
282
+ /**
283
+ * Watch for changes being made to the DOM tree.
284
+ *
285
+ * @see https://vueuse.org/useMutationObserver
286
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
287
+ * @param target
288
+ * @param callback
289
+ * @param options
290
+ */
291
+ function useMutationObserver(target, callback, options = {}) {
292
+ const { window: window$1 = defaultWindow, ...mutationOptions } = options;
293
+ let observer;
294
+ const isSupported = /* @__PURE__ */ useSupported(() => window$1 && "MutationObserver" in window$1);
295
+ const cleanup = () => {
296
+ if (observer) {
297
+ observer.disconnect();
298
+ observer = void 0;
299
+ }
300
+ };
301
+ const stopWatch = watch(computed(() => {
302
+ const items = toArray(toValue(target)).map(unrefElement).filter(notNullish);
303
+ return new Set(items);
304
+ }), (newTargets) => {
305
+ cleanup();
306
+ if (isSupported.value && newTargets.size) {
307
+ observer = new MutationObserver(callback);
308
+ newTargets.forEach((el) => observer.observe(el, mutationOptions));
309
+ }
310
+ }, {
311
+ immediate: true,
312
+ flush: "post"
313
+ });
314
+ const takeRecords = () => {
315
+ return observer === null || observer === void 0 ? void 0 : observer.takeRecords();
316
+ };
317
+ const stop = () => {
318
+ stopWatch();
319
+ cleanup();
320
+ };
321
+ tryOnScopeDispose(stop);
322
+ return {
323
+ isSupported,
324
+ stop,
325
+ takeRecords
326
+ };
327
+ }
328
+ const ssrWidthSymbol = Symbol("vueuse-ssr-width");
329
+ /* @__NO_SIDE_EFFECTS__ */
330
+ function useSSRWidth() {
331
+ const ssrWidth = hasInjectionContext() ? injectLocal(ssrWidthSymbol, null) : null;
332
+ return typeof ssrWidth === "number" ? ssrWidth : void 0;
333
+ }
334
+ /**
335
+ * Reactive Media Query.
336
+ *
337
+ * @see https://vueuse.org/useMediaQuery
338
+ * @param query
339
+ * @param options
340
+ */
341
+ function useMediaQuery(query, options = {}) {
342
+ const { window: window$1 = defaultWindow, ssrWidth = /* @__PURE__ */ useSSRWidth() } = options;
343
+ const isSupported = /* @__PURE__ */ useSupported(() => window$1 && "matchMedia" in window$1 && typeof window$1.matchMedia === "function");
344
+ const ssrSupport = shallowRef(typeof ssrWidth === "number");
345
+ const mediaQuery = shallowRef();
346
+ const matches = shallowRef(false);
347
+ const handler = (event) => {
348
+ matches.value = event.matches;
349
+ };
350
+ watchEffect(() => {
351
+ if (ssrSupport.value) {
352
+ ssrSupport.value = !isSupported.value;
353
+ matches.value = toValue(query).split(",").some((queryString) => {
354
+ const not = queryString.includes("not all");
355
+ const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
356
+ const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
357
+ let res = Boolean(minWidth || maxWidth);
358
+ if (minWidth && res) res = ssrWidth >= pxValue(minWidth[1]);
359
+ if (maxWidth && res) res = ssrWidth <= pxValue(maxWidth[1]);
360
+ return not ? !res : res;
361
+ });
362
+ return;
363
+ }
364
+ if (!isSupported.value) return;
365
+ mediaQuery.value = window$1.matchMedia(toValue(query));
366
+ matches.value = mediaQuery.value.matches;
367
+ });
368
+ useEventListener(mediaQuery, "change", handler, { passive: true });
369
+ return computed(() => matches.value);
370
+ }
371
+ const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
372
+ const globalKey = "__vueuse_ssr_handlers__";
373
+ const handlers = /* @__PURE__ */ getHandlers();
374
+ function getHandlers() {
375
+ if (!(globalKey in _global)) _global[globalKey] = _global[globalKey] || {};
376
+ return _global[globalKey];
377
+ }
378
+ function getSSRHandler(key, fallback) {
379
+ return handlers[key] || fallback;
380
+ }
381
+ function guessSerializerType(rawInit) {
382
+ return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
383
+ }
384
+ const StorageSerializers = {
385
+ boolean: {
386
+ read: (v) => v === "true",
387
+ write: (v) => String(v)
388
+ },
389
+ object: {
390
+ read: (v) => JSON.parse(v),
391
+ write: (v) => JSON.stringify(v)
392
+ },
393
+ number: {
394
+ read: (v) => Number.parseFloat(v),
395
+ write: (v) => String(v)
396
+ },
397
+ any: {
398
+ read: (v) => v,
399
+ write: (v) => String(v)
400
+ },
401
+ string: {
402
+ read: (v) => v,
403
+ write: (v) => String(v)
404
+ },
405
+ map: {
406
+ read: (v) => new Map(JSON.parse(v)),
407
+ write: (v) => JSON.stringify(Array.from(v.entries()))
408
+ },
409
+ set: {
410
+ read: (v) => new Set(JSON.parse(v)),
411
+ write: (v) => JSON.stringify(Array.from(v))
412
+ },
413
+ date: {
414
+ read: (v) => new Date(v),
415
+ write: (v) => v.toISOString()
416
+ }
417
+ };
418
+ const customStorageEventName = "vueuse-storage";
419
+ /**
420
+ * Reactive LocalStorage/SessionStorage.
421
+ *
422
+ * @see https://vueuse.org/useStorage
423
+ */
424
+ function useStorage(key, defaults$1, storage, options = {}) {
425
+ var _options$serializer;
426
+ const { flush = "pre", deep = true, listenToStorageChanges = true, writeDefaults = true, mergeDefaults = false, shallow, window: window$1 = defaultWindow, eventFilter, onError = (e) => {
427
+ console.error(e);
428
+ }, initOnMounted } = options;
429
+ const data = (shallow ? shallowRef : ref)(typeof defaults$1 === "function" ? defaults$1() : defaults$1);
430
+ const keyComputed = computed(() => toValue(key));
431
+ if (!storage) try {
432
+ storage = getSSRHandler("getDefaultStorage", () => defaultWindow === null || defaultWindow === void 0 ? void 0 : defaultWindow.localStorage)();
433
+ } catch (e) {
434
+ onError(e);
435
+ }
436
+ if (!storage) return data;
437
+ const rawInit = toValue(defaults$1);
438
+ const type = guessSerializerType(rawInit);
439
+ const serializer = (_options$serializer = options.serializer) !== null && _options$serializer !== void 0 ? _options$serializer : StorageSerializers[type];
440
+ const { pause: pauseWatch, resume: resumeWatch } = pausableWatch(data, (newValue) => write(newValue), {
441
+ flush,
442
+ deep,
443
+ eventFilter
444
+ });
445
+ watch(keyComputed, () => update(), { flush });
446
+ let firstMounted = false;
447
+ const onStorageEvent = (ev) => {
448
+ if (initOnMounted && !firstMounted) return;
449
+ update(ev);
450
+ };
451
+ const onStorageCustomEvent = (ev) => {
452
+ if (initOnMounted && !firstMounted) return;
453
+ updateFromCustomEvent(ev);
454
+ };
455
+ /**
456
+ * The custom event is needed for same-document syncing when using custom
457
+ * storage backends, but it doesn't work across different documents.
458
+ *
459
+ * TODO: Consider implementing a BroadcastChannel-based solution that fixes this.
460
+ */
461
+ if (window$1 && listenToStorageChanges) if (storage instanceof Storage) useEventListener(window$1, "storage", onStorageEvent, { passive: true });
462
+ else useEventListener(window$1, customStorageEventName, onStorageCustomEvent);
463
+ if (initOnMounted) tryOnMounted(() => {
464
+ firstMounted = true;
465
+ update();
466
+ });
467
+ else update();
468
+ function dispatchWriteEvent(oldValue, newValue) {
469
+ if (window$1) {
470
+ const payload = {
471
+ key: keyComputed.value,
472
+ oldValue,
473
+ newValue,
474
+ storageArea: storage
475
+ };
476
+ window$1.dispatchEvent(storage instanceof Storage ? new StorageEvent("storage", payload) : new CustomEvent(customStorageEventName, { detail: payload }));
477
+ }
478
+ }
479
+ function write(v) {
480
+ try {
481
+ const oldValue = storage.getItem(keyComputed.value);
482
+ if (v == null) {
483
+ dispatchWriteEvent(oldValue, null);
484
+ storage.removeItem(keyComputed.value);
485
+ } else {
486
+ const serialized = serializer.write(v);
487
+ if (oldValue !== serialized) {
488
+ storage.setItem(keyComputed.value, serialized);
489
+ dispatchWriteEvent(oldValue, serialized);
490
+ }
491
+ }
492
+ } catch (e) {
493
+ onError(e);
494
+ }
495
+ }
496
+ function read(event) {
497
+ const rawValue = event ? event.newValue : storage.getItem(keyComputed.value);
498
+ if (rawValue == null) {
499
+ if (writeDefaults && rawInit != null) storage.setItem(keyComputed.value, serializer.write(rawInit));
500
+ return rawInit;
501
+ } else if (!event && mergeDefaults) {
502
+ const value = serializer.read(rawValue);
503
+ if (typeof mergeDefaults === "function") return mergeDefaults(value, rawInit);
504
+ else if (type === "object" && !Array.isArray(value)) return {
505
+ ...rawInit,
506
+ ...value
507
+ };
508
+ return value;
509
+ } else if (typeof rawValue !== "string") return rawValue;
510
+ else return serializer.read(rawValue);
511
+ }
512
+ function update(event) {
513
+ if (event && event.storageArea !== storage) return;
514
+ if (event && event.key == null) {
515
+ data.value = rawInit;
516
+ return;
517
+ }
518
+ if (event && event.key !== keyComputed.value) return;
519
+ pauseWatch();
520
+ try {
521
+ const serializedData = serializer.write(data.value);
522
+ if (event === void 0 || (event === null || event === void 0 ? void 0 : event.newValue) !== serializedData) data.value = read(event);
523
+ } catch (e) {
524
+ onError(e);
525
+ } finally {
526
+ if (event) nextTick(resumeWatch);
527
+ else resumeWatch();
528
+ }
529
+ }
530
+ function updateFromCustomEvent(event) {
531
+ update(event.detail);
532
+ }
533
+ return data;
534
+ }
535
+ /**
536
+ * Manipulate CSS variables.
537
+ *
538
+ * @see https://vueuse.org/useCssVar
539
+ * @param prop
540
+ * @param target
541
+ * @param options
542
+ */
543
+ function useCssVar(prop, target, options = {}) {
544
+ const { window: window$1 = defaultWindow, initialValue, observe = false } = options;
545
+ const variable = shallowRef(initialValue);
546
+ const elRef = computed(() => {
547
+ var _window$document;
548
+ return unrefElement(target) || (window$1 === null || window$1 === void 0 || (_window$document = window$1.document) === null || _window$document === void 0 ? void 0 : _window$document.documentElement);
549
+ });
550
+ function updateCssVar() {
551
+ const key = toValue(prop);
552
+ const el = toValue(elRef);
553
+ if (el && window$1 && key) {
554
+ var _window$getComputedSt;
555
+ variable.value = ((_window$getComputedSt = window$1.getComputedStyle(el).getPropertyValue(key)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.trim()) || variable.value || initialValue;
556
+ }
557
+ }
558
+ if (observe) useMutationObserver(elRef, updateCssVar, {
559
+ attributeFilter: ["style", "class"],
560
+ window: window$1
561
+ });
562
+ watch([elRef, () => toValue(prop)], (_, old) => {
563
+ if (old[0] && old[1]) old[0].style.removeProperty(old[1]);
564
+ updateCssVar();
565
+ }, { immediate: true });
566
+ watch([variable, elRef], ([val, el]) => {
567
+ const raw_prop = toValue(prop);
568
+ if ((el === null || el === void 0 ? void 0 : el.style) && raw_prop) if (val == null) el.style.removeProperty(raw_prop);
569
+ else el.style.setProperty(raw_prop, val);
570
+ }, { immediate: true });
571
+ return variable;
572
+ }
573
+ /**
574
+ * Reports changes to the dimensions of an Element's content or the border-box
575
+ *
576
+ * @see https://vueuse.org/useResizeObserver
577
+ * @param target
578
+ * @param callback
579
+ * @param options
580
+ */
581
+ function useResizeObserver(target, callback, options = {}) {
582
+ const { window: window$1 = defaultWindow, ...observerOptions } = options;
583
+ let observer;
584
+ const isSupported = /* @__PURE__ */ useSupported(() => window$1 && "ResizeObserver" in window$1);
585
+ const cleanup = () => {
586
+ if (observer) {
587
+ observer.disconnect();
588
+ observer = void 0;
589
+ }
590
+ };
591
+ const stopWatch = watch(computed(() => {
592
+ const _targets = toValue(target);
593
+ return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
594
+ }), (els) => {
595
+ cleanup();
596
+ if (isSupported.value && window$1) {
597
+ observer = new ResizeObserver(callback);
598
+ for (const _el of els) if (_el) observer.observe(_el, observerOptions);
599
+ }
600
+ }, {
601
+ immediate: true,
602
+ flush: "post"
603
+ });
604
+ const stop = () => {
605
+ cleanup();
606
+ stopWatch();
607
+ };
608
+ tryOnScopeDispose(stop);
609
+ return {
610
+ isSupported,
611
+ stop
612
+ };
613
+ }
614
+ /**
615
+ * Reactive bounding box of an HTML element.
616
+ *
617
+ * @see https://vueuse.org/useElementBounding
618
+ * @param target
619
+ */
620
+ function useElementBounding(target, options = {}) {
621
+ const { reset = true, windowResize = true, windowScroll = true, immediate = true, updateTiming = "sync" } = options;
622
+ const height = shallowRef(0);
623
+ const bottom = shallowRef(0);
624
+ const left = shallowRef(0);
625
+ const right = shallowRef(0);
626
+ const top = shallowRef(0);
627
+ const width = shallowRef(0);
628
+ const x = shallowRef(0);
629
+ const y = shallowRef(0);
630
+ function recalculate() {
631
+ const el = unrefElement(target);
632
+ if (!el) {
633
+ if (reset) {
634
+ height.value = 0;
635
+ bottom.value = 0;
636
+ left.value = 0;
637
+ right.value = 0;
638
+ top.value = 0;
639
+ width.value = 0;
640
+ x.value = 0;
641
+ y.value = 0;
642
+ }
643
+ return;
644
+ }
645
+ const rect = el.getBoundingClientRect();
646
+ height.value = rect.height;
647
+ bottom.value = rect.bottom;
648
+ left.value = rect.left;
649
+ right.value = rect.right;
650
+ top.value = rect.top;
651
+ width.value = rect.width;
652
+ x.value = rect.x;
653
+ y.value = rect.y;
654
+ }
655
+ function update() {
656
+ if (updateTiming === "sync") recalculate();
657
+ else if (updateTiming === "next-frame") requestAnimationFrame(() => recalculate());
658
+ }
659
+ useResizeObserver(target, update);
660
+ watch(() => unrefElement(target), (ele) => !ele && update());
661
+ useMutationObserver(target, update, { attributeFilter: ["style", "class"] });
662
+ if (windowScroll) useEventListener("scroll", update, {
663
+ capture: true,
664
+ passive: true
665
+ });
666
+ if (windowResize) useEventListener("resize", update, { passive: true });
667
+ tryOnMounted(() => {
668
+ if (immediate) update();
669
+ });
670
+ return {
671
+ height,
672
+ bottom,
673
+ left,
674
+ right,
675
+ top,
676
+ width,
677
+ x,
678
+ y,
679
+ update
680
+ };
681
+ }
682
+ /**
683
+ * Reactive LocalStorage.
684
+ *
685
+ * @see https://vueuse.org/useLocalStorage
686
+ * @param key
687
+ * @param initialValue
688
+ * @param options
689
+ */
690
+ function useLocalStorage(key, initialValue, options = {}) {
691
+ const { window: window$1 = defaultWindow } = options;
692
+ return useStorage(key, initialValue, window$1 === null || window$1 === void 0 ? void 0 : window$1.localStorage, options);
693
+ }
694
+ const topVarName = "--vueuse-safe-area-top";
695
+ const rightVarName = "--vueuse-safe-area-right";
696
+ const bottomVarName = "--vueuse-safe-area-bottom";
697
+ const leftVarName = "--vueuse-safe-area-left";
698
+ /**
699
+ * Reactive `env(safe-area-inset-*)`
700
+ *
701
+ * @see https://vueuse.org/useScreenSafeArea
702
+ */
703
+ function useScreenSafeArea() {
704
+ const top = shallowRef("");
705
+ const right = shallowRef("");
706
+ const bottom = shallowRef("");
707
+ const left = shallowRef("");
708
+ if (isClient) {
709
+ const topCssVar = useCssVar(topVarName);
710
+ const rightCssVar = useCssVar(rightVarName);
711
+ const bottomCssVar = useCssVar(bottomVarName);
712
+ const leftCssVar = useCssVar(leftVarName);
713
+ topCssVar.value = "env(safe-area-inset-top, 0px)";
714
+ rightCssVar.value = "env(safe-area-inset-right, 0px)";
715
+ bottomCssVar.value = "env(safe-area-inset-bottom, 0px)";
716
+ leftCssVar.value = "env(safe-area-inset-left, 0px)";
717
+ tryOnMounted(update);
718
+ useEventListener("resize", useDebounceFn(update), { passive: true });
719
+ }
720
+ function update() {
721
+ top.value = getValue(topVarName);
722
+ right.value = getValue(rightVarName);
723
+ bottom.value = getValue(bottomVarName);
724
+ left.value = getValue(leftVarName);
725
+ }
726
+ return {
727
+ top,
728
+ right,
729
+ bottom,
730
+ left,
731
+ update
732
+ };
733
+ }
734
+ function getValue(position) {
735
+ return getComputedStyle(document.documentElement).getPropertyValue(position);
736
+ }
737
+ const DEFAULT_UNITS = [
738
+ {
739
+ max: 6e4,
740
+ value: 1e3,
741
+ name: "second"
742
+ },
743
+ {
744
+ max: 276e4,
745
+ value: 6e4,
746
+ name: "minute"
747
+ },
748
+ {
749
+ max: 72e6,
750
+ value: 36e5,
751
+ name: "hour"
752
+ },
753
+ {
754
+ max: 5184e5,
755
+ value: 864e5,
756
+ name: "day"
757
+ },
758
+ {
759
+ max: 24192e5,
760
+ value: 6048e5,
761
+ name: "week"
762
+ },
763
+ {
764
+ max: 28512e6,
765
+ value: 2592e6,
766
+ name: "month"
767
+ },
768
+ {
769
+ max: Number.POSITIVE_INFINITY,
770
+ value: 31536e6,
771
+ name: "year"
772
+ }
773
+ ];
774
+ /**
775
+ * Reactive window size.
776
+ *
777
+ * @see https://vueuse.org/useWindowSize
778
+ * @param options
779
+ *
780
+ * @__NO_SIDE_EFFECTS__
781
+ */
782
+ function useWindowSize(options = {}) {
783
+ const { window: window$1 = defaultWindow, initialWidth = Number.POSITIVE_INFINITY, initialHeight = Number.POSITIVE_INFINITY, listenOrientation = true, includeScrollbar = true, type = "inner" } = options;
784
+ const width = shallowRef(initialWidth);
785
+ const height = shallowRef(initialHeight);
786
+ const update = () => {
787
+ if (window$1) if (type === "outer") {
788
+ width.value = window$1.outerWidth;
789
+ height.value = window$1.outerHeight;
790
+ } else if (type === "visual" && window$1.visualViewport) {
791
+ const { width: visualViewportWidth, height: visualViewportHeight, scale } = window$1.visualViewport;
792
+ width.value = Math.round(visualViewportWidth * scale);
793
+ height.value = Math.round(visualViewportHeight * scale);
794
+ } else if (includeScrollbar) {
795
+ width.value = window$1.innerWidth;
796
+ height.value = window$1.innerHeight;
797
+ } else {
798
+ width.value = window$1.document.documentElement.clientWidth;
799
+ height.value = window$1.document.documentElement.clientHeight;
800
+ }
801
+ };
802
+ update();
803
+ tryOnMounted(update);
804
+ const listenerOptions = { passive: true };
805
+ useEventListener("resize", update, listenerOptions);
806
+ if (window$1 && type === "visual" && window$1.visualViewport) useEventListener(window$1.visualViewport, "resize", update, listenerOptions);
807
+ if (listenOrientation) watch(useMediaQuery("(orientation: portrait)"), () => update());
808
+ return {
809
+ width,
810
+ height
811
+ };
812
+ }
813
+
814
+ //#endregion
815
+ export { useWindowSize as a, useScreenSafeArea as i, useEventListener as n, watchImmediate as o, useLocalStorage as r, useElementBounding as t };