@halo-dev/components 0.0.0-alpha.1 → 0.0.0-alpha.2

package/dist/halo-components.es.js

@@ -14,7 +14,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { openBlock, createElementBlock, createElementVNode, defineComponent, computed, normalizeClass, unref, renderSlot, createBlock, resolveDynamicComponent, toDisplayString, createVNode, createCommentVNode, createTextVNode, Fragment, renderList, provide, useSlots, ref, inject, withModifiers, Transition, withCtx, withDirectives, vShow, Teleport, withKeys, normalizeStyle, watch, isRef, reactive } from "vue";
+import { openBlock, createElementBlock, createElementVNode, defineComponent, computed, normalizeClass, unref, renderSlot, createBlock, resolveDynamicComponent, toDisplayString, createVNode, createCommentVNode, createTextVNode, Fragment, renderList, provide, useSlots, ref, inject, withModifiers, Transition, withCtx, withDirectives, vShow, Teleport, withKeys, normalizeStyle, isRef, toRefs as toRefs$1, customRef, getCurrentScope, onScopeDispose, watch, getCurrentInstance, onBeforeMount, nextTick, onMounted, readonly, shallowRef, reactive, h, toRef } from "vue";
 import { useRouter, useRoute } from "vue-router";
 var tailwind = "";
 const _hoisted_1$$ = {
@@ -798,7 +798,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-3bf3a1a9"]]);
+var Alert = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-bb026962"]]);
 var Button_vue_vue_type_style_index_0_lang = "";
 const _hoisted_1$l = ["disabled"];
 const _hoisted_2$e = {
@@ -829,7 +829,7 @@ const _hoisted_6$2 = [
   _hoisted_4$8,
   _hoisted_5$3
 ];
-const _hoisted_7$1 = { class: "btn-content" };
+const _hoisted_7$2 = { class: "btn-content" };
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
@@ -891,7 +891,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         _ctx.$slots.icon || __props.loading ? (openBlock(), createElementBlock("span", _hoisted_2$e, [
           __props.loading ? (openBlock(), createElementBlock("svg", _hoisted_3$c, _hoisted_6$2)) : renderSlot(_ctx.$slots, "icon", { key: 1 })
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_7$1, [
+        createElementVNode("span", _hoisted_7$2, [
           renderSlot(_ctx.$slots, "default")
         ])
       ], 10, _hoisted_1$l);
@@ -1913,7 +1913,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         createElementVNode("button", {
           class: normalizeClass([{
             "bg-gray-200": !__props.modelValue,
-            "!bg-themeable-primary-600": __props.modelValue
+            "!bg-primary": __props.modelValue
           }, "switch-inner"]),
           "aria-checked": "false",
           role: "switch",
@@ -1940,7 +1940,7 @@ const _hoisted_3$1 = { class: "text-base text-gray-900 font-bold" };
 const _hoisted_4$1 = { class: "flex items-center gap-4" };
 const _hoisted_5$1 = { class: "flex-1 flex items-stretch" };
 const _hoisted_6$1 = { class: "text-sm text-gray-700" };
-const _hoisted_7 = { class: "flex flex-col sm:flex-row gap-[10px]" };
+const _hoisted_7$1 = { class: "flex flex-col sm:flex-row gap-[10px]" };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "Dialog",
   props: {
@@ -2023,7 +2023,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         onClose: _cache[0] || (_cache[0] = ($event) => handleCancel())
       }, {
         footer: withCtx(() => [
-          createElementVNode("div", _hoisted_7, [
+          createElementVNode("div", _hoisted_7$1, [
             createVNode(unref(_sfc_main$n), {
               loading: loading.value,
               type: "secondary",
@@ -2114,109 +2114,3709 @@ function useDialog() {
 }
 var _a;
 const isClient = typeof window !== "undefined";
+const isString = (val) => typeof val === "string";
+const timestamp = () => +Date.now();
 const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
 const noop = () => {
 };
-isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+const isIOS = isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+function createFilterWrapper(filter, fn) {
+  function wrapper(...args) {
+    filter(() => fn.apply(this, args), { fn, thisArg: this, args });
+  }
+  return wrapper;
+}
+const bypassFilter = (invoke) => {
+  return invoke();
+};
+function debounceFilter(ms, options = {}) {
+  let timer;
+  let maxTimer;
+  const filter = (invoke) => {
+    const duration = unref(ms);
+    const maxDuration = unref(options.maxWait);
+    if (timer)
+      clearTimeout(timer);
+    if (duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) {
+      if (maxTimer) {
+        clearTimeout(maxTimer);
+        maxTimer = null;
+      }
+      return invoke();
+    }
+    if (maxDuration && !maxTimer) {
+      maxTimer = setTimeout(() => {
+        if (timer)
+          clearTimeout(timer);
+        maxTimer = null;
+        invoke();
+      }, maxDuration);
+    }
+    timer = setTimeout(() => {
+      if (maxTimer)
+        clearTimeout(maxTimer);
+      maxTimer = null;
+      invoke();
+    }, duration);
+  };
+  return filter;
+}
+function throttleFilter(ms, trailing = true, leading = true) {
+  let lastExec = 0;
+  let timer;
+  let isLeading = true;
+  const clear = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+  };
+  const filter = (invoke) => {
+    const duration = unref(ms);
+    const elapsed = Date.now() - lastExec;
+    clear();
+    if (duration <= 0) {
+      lastExec = Date.now();
+      return invoke();
+    }
+    if (elapsed > duration && (leading || !isLeading)) {
+      lastExec = Date.now();
+      invoke();
+    } else if (trailing) {
+      timer = setTimeout(() => {
+        lastExec = Date.now();
+        isLeading = true;
+        clear();
+        invoke();
+      }, duration);
+    }
+    if (!leading && !timer)
+      timer = setTimeout(() => isLeading = true, duration);
+    isLeading = false;
+  };
+  return filter;
+}
+function pausableFilter(extendFilter = bypassFilter) {
+  const isActive = ref(true);
+  function pause() {
+    isActive.value = false;
+  }
+  function resume() {
+    isActive.value = true;
+  }
+  const eventFilter = (...args) => {
+    if (isActive.value)
+      extendFilter(...args);
+  };
+  return { isActive, pause, resume, eventFilter };
+}
+const directiveHooks = {
+  mounted: "mounted",
+  updated: "updated",
+  unmounted: "unmounted"
+};
+function promiseTimeout(ms, throwOnTimeout = false, reason = "Timeout") {
+  return new Promise((resolve, reject) => {
+    if (throwOnTimeout)
+      setTimeout(() => reject(reason), ms);
+    else
+      setTimeout(resolve, ms);
+  });
+}
+function createSingletonPromise(fn) {
+  let _promise;
+  function wrapper() {
+    if (!_promise)
+      _promise = fn();
+    return _promise;
+  }
+  wrapper.reset = async () => {
+    const _prev = _promise;
+    _promise = void 0;
+    if (_prev)
+      await _prev;
+  };
+  return wrapper;
+}
+function objectPick(obj, keys2, omitUndefined = false) {
+  return keys2.reduce((n, k) => {
+    if (k in obj) {
+      if (!omitUndefined || obj[k] !== void 0)
+        n[k] = obj[k];
+    }
+    return n;
+  }, {});
+}
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+function useDebounceFn(fn, ms = 200, options = {}) {
+  return createFilterWrapper(debounceFilter(ms, options), fn);
+}
+function useThrottleFn(fn, ms = 200, trailing = true, leading = true) {
+  return createFilterWrapper(throttleFilter(ms, trailing, leading), fn);
+}
 function syncRef(left, right, options = {}) {
   const {
-    flush = "sync",
-    deep = false,
+    flush = "sync",
+    deep = false,
+    immediate = true,
+    direction = "both"
+  } = options;
+  let stop1, stop2;
+  if (direction === "both" || direction === "ltr") {
+    stop1 = watch(left, (newValue) => right.value = newValue, { flush, deep, immediate });
+  }
+  if (direction === "both" || direction === "rtl") {
+    stop2 = watch(right, (newValue) => left.value = newValue, { flush, deep, immediate });
+  }
+  return () => {
+    stop1 == null ? void 0 : stop1();
+    stop2 == null ? void 0 : stop2();
+  };
+}
+var __defProp$7$1 = Object.defineProperty;
+var __defProps$5$1 = Object.defineProperties;
+var __getOwnPropDescs$5$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7$1 = (obj, key, value) => key in obj ? __defProp$7$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$9$1.call(b, prop))
+      __defNormalProp$7$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9$1)
+    for (var prop of __getOwnPropSymbols$9$1(b)) {
+      if (__propIsEnum$9$1.call(b, prop))
+        __defNormalProp$7$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$5$1 = (a, b) => __defProps$5$1(a, __getOwnPropDescs$5$1(b));
+function toRefs(objectRef) {
+  if (!isRef(objectRef))
+    return toRefs$1(objectRef);
+  const result = Array.isArray(objectRef.value) ? new Array(objectRef.value.length) : {};
+  for (const key in objectRef.value) {
+    result[key] = customRef(() => ({
+      get() {
+        return objectRef.value[key];
+      },
+      set(v) {
+        if (Array.isArray(objectRef.value)) {
+          const copy = [...objectRef.value];
+          copy[key] = v;
+          objectRef.value = copy;
+        } else {
+          const newObject = __spreadProps$5$1(__spreadValues$7$1({}, objectRef.value), { [key]: v });
+          Object.setPrototypeOf(newObject, objectRef.value);
+          objectRef.value = newObject;
+        }
+      }
+    }));
+  }
+  return result;
+}
+function tryOnBeforeMount(fn, sync = true) {
+  if (getCurrentInstance())
+    onBeforeMount(fn);
+  else if (sync)
+    fn();
+  else
+    nextTick(fn);
+}
+function tryOnMounted(fn, sync = true) {
+  if (getCurrentInstance())
+    onMounted(fn);
+  else if (sync)
+    fn();
+  else
+    nextTick(fn);
+}
+function useIntervalFn(cb, interval = 1e3, options = {}) {
+  const {
+    immediate = true,
+    immediateCallback = false
+  } = options;
+  let timer = null;
+  const isActive = ref(false);
+  function clean() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+  function pause() {
+    isActive.value = false;
+    clean();
+  }
+  function resume() {
+    if (unref(interval) <= 0)
+      return;
+    isActive.value = true;
+    if (immediateCallback)
+      cb();
+    clean();
+    timer = setInterval(cb, unref(interval));
+  }
+  if (immediate && isClient)
+    resume();
+  if (isRef(interval)) {
+    const stopWatch = watch(interval, () => {
+      if (isActive.value && isClient)
+        resume();
+    });
+    tryOnScopeDispose(stopWatch);
+  }
+  tryOnScopeDispose(pause);
+  return {
+    isActive,
+    pause,
+    resume
+  };
+}
+function useToggle(initialValue = false, options = {}) {
+  const {
+    truthyValue = true,
+    falsyValue = false
+  } = options;
+  const valueIsRef = isRef(initialValue);
+  const innerValue = ref(initialValue);
+  function toggle(value) {
+    if (arguments.length) {
+      innerValue.value = value;
+      return innerValue.value;
+    } else {
+      innerValue.value = innerValue.value === unref(truthyValue) ? unref(falsyValue) : unref(truthyValue);
+      return innerValue.value;
+    }
+  }
+  if (valueIsRef)
+    return toggle;
+  else
+    return [innerValue, toggle];
+}
+var __getOwnPropSymbols$6$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6$1 = Object.prototype.propertyIsEnumerable;
+var __objRest$5 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$6$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$6$1)
+    for (var prop of __getOwnPropSymbols$6$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$6$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function watchWithFilter(source, cb, options = {}) {
+  const _a2 = options, {
+    eventFilter = bypassFilter
+  } = _a2, watchOptions = __objRest$5(_a2, [
+    "eventFilter"
+  ]);
+  return watch(source, createFilterWrapper(eventFilter, cb), watchOptions);
+}
+var __defProp$2$1 = Object.defineProperty;
+var __defProps$2$1 = Object.defineProperties;
+var __getOwnPropDescs$2$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2$1 = (obj, key, value) => key in obj ? __defProp$2$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2$1.call(b, prop))
+      __defNormalProp$2$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2$1)
+    for (var prop of __getOwnPropSymbols$2$1(b)) {
+      if (__propIsEnum$2$1.call(b, prop))
+        __defNormalProp$2$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2$1 = (a, b) => __defProps$2$1(a, __getOwnPropDescs$2$1(b));
+var __objRest$1$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$2$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$2$1)
+    for (var prop of __getOwnPropSymbols$2$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function watchPausable(source, cb, options = {}) {
+  const _a2 = options, {
+    eventFilter: filter
+  } = _a2, watchOptions = __objRest$1$1(_a2, [
+    "eventFilter"
+  ]);
+  const { eventFilter, pause, resume, isActive } = pausableFilter(filter);
+  const stop = watchWithFilter(source, cb, __spreadProps$2$1(__spreadValues$2$1({}, watchOptions), {
+    eventFilter
+  }));
+  return { stop, pause, resume, isActive };
+}
+function unrefElement$1(elRef) {
+  var _a2;
+  const plain = unref(elRef);
+  return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
+}
+const defaultWindow$1 = isClient ? window : void 0;
+const defaultDocument = isClient ? window.document : void 0;
+const defaultNavigator = isClient ? window.navigator : void 0;
+function useEventListener$1(...args) {
+  let target;
+  let event;
+  let listener;
+  let options;
+  if (isString(args[0])) {
+    [event, listener, options] = args;
+    target = defaultWindow$1;
+  } else {
+    [target, event, listener, options] = args;
+  }
+  if (!target)
+    return noop;
+  let cleanup = noop;
+  const stopWatch = watch(() => unrefElement$1(target), (el) => {
+    cleanup();
+    if (!el)
+      return;
+    el.addEventListener(event, listener, options);
+    cleanup = () => {
+      el.removeEventListener(event, listener, options);
+      cleanup = noop;
+    };
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+function onClickOutside(target, handler, options = {}) {
+  const { window: window2 = defaultWindow$1, ignore, capture = true, detectIframe = false } = options;
+  if (!window2)
+    return;
+  const shouldListen = ref(true);
+  let fallback;
+  const listener = (event) => {
+    window2.clearTimeout(fallback);
+    const el = unrefElement$1(target);
+    const composedPath = event.composedPath();
+    if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value)
+      return;
+    if (ignore && ignore.length > 0) {
+      if (ignore.some((target2) => {
+        const el2 = unrefElement$1(target2);
+        return el2 && (event.target === el2 || composedPath.includes(el2));
+      }))
+        return;
+    }
+    handler(event);
+  };
+  const cleanup = [
+    useEventListener$1(window2, "click", listener, { passive: true, capture }),
+    useEventListener$1(window2, "pointerdown", (e) => {
+      const el = unrefElement$1(target);
+      shouldListen.value = !!el && !e.composedPath().includes(el);
+    }, { passive: true }),
+    useEventListener$1(window2, "pointerup", (e) => {
+      if (e.button === 0) {
+        const path = e.composedPath();
+        e.composedPath = () => path;
+        fallback = window2.setTimeout(() => listener(e), 50);
+      }
+    }, { passive: true }),
+    detectIframe && useEventListener$1(window2, "blur", (event) => {
+      var _a2;
+      const el = unrefElement$1(target);
+      if (((_a2 = document.activeElement) == null ? void 0 : _a2.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(document.activeElement)))
+        handler(event);
+    })
+  ].filter(Boolean);
+  const stop = () => cleanup.forEach((fn) => fn());
+  return stop;
+}
+function useActiveElement(options = {}) {
+  const { window: window2 = defaultWindow$1 } = options;
+  const counter = ref(0);
+  if (window2) {
+    useEventListener$1(window2, "blur", () => counter.value += 1, true);
+    useEventListener$1(window2, "focus", () => counter.value += 1, true);
+  }
+  return computed(() => {
+    counter.value;
+    return window2 == null ? void 0 : window2.document.activeElement;
+  });
+}
+function useBattery({ navigator = defaultNavigator } = {}) {
+  const events = ["chargingchange", "chargingtimechange", "dischargingtimechange", "levelchange"];
+  const isSupported = navigator && "getBattery" in navigator;
+  const charging = ref(false);
+  const chargingTime = ref(0);
+  const dischargingTime = ref(0);
+  const level = ref(1);
+  let battery;
+  function updateBatteryInfo() {
+    charging.value = this.charging;
+    chargingTime.value = this.chargingTime || 0;
+    dischargingTime.value = this.dischargingTime || 0;
+    level.value = this.level;
+  }
+  if (isSupported) {
+    navigator.getBattery().then((_battery) => {
+      battery = _battery;
+      updateBatteryInfo.call(battery);
+      for (const event of events)
+        useEventListener$1(battery, event, updateBatteryInfo, { passive: true });
+    });
+  }
+  return {
+    isSupported,
+    charging,
+    chargingTime,
+    dischargingTime,
+    level
+  };
+}
+function useMediaQuery$1(query, options = {}) {
+  const { window: window2 = defaultWindow$1 } = options;
+  const isSupported = Boolean(window2 && "matchMedia" in window2 && typeof window2.matchMedia === "function");
+  let mediaQuery;
+  const matches = ref(false);
+  const update = () => {
+    if (!isSupported)
+      return;
+    if (!mediaQuery)
+      mediaQuery = window2.matchMedia(query);
+    matches.value = mediaQuery.matches;
+  };
+  tryOnBeforeMount(() => {
+    update();
+    if (!mediaQuery)
+      return;
+    if ("addEventListener" in mediaQuery)
+      mediaQuery.addEventListener("change", update);
+    else
+      mediaQuery.addListener(update);
+    tryOnScopeDispose(() => {
+      if ("removeEventListener" in mediaQuery)
+        mediaQuery.removeEventListener("change", update);
+      else
+        mediaQuery.removeListener(update);
+    });
+  });
+  return matches;
+}
+function useBrowserLocation({ window: window2 = defaultWindow$1 } = {}) {
+  const buildState = (trigger) => {
+    const { state: state2, length } = (window2 == null ? void 0 : window2.history) || {};
+    const { hash, host, hostname, href, origin, pathname, port, protocol, search } = (window2 == null ? void 0 : window2.location) || {};
+    return {
+      trigger,
+      state: state2,
+      length,
+      hash,
+      host,
+      hostname,
+      href,
+      origin,
+      pathname,
+      port,
+      protocol,
+      search
+    };
+  };
+  const state = ref(buildState("load"));
+  if (window2) {
+    useEventListener$1(window2, "popstate", () => state.value = buildState("popstate"), { passive: true });
+    useEventListener$1(window2, "hashchange", () => state.value = buildState("hashchange"), { passive: true });
+  }
+  return state;
+}
+function useClamp(value, min, max) {
+  const _value = ref(value);
+  return computed({
+    get() {
+      return _value.value = clamp(_value.value, unref(min), unref(max));
+    },
+    set(value2) {
+      _value.value = clamp(value2, unref(min), unref(max));
+    }
+  });
+}
+const _global$1 = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+const globalKey$1 = "__vueuse_ssr_handlers__";
+_global$1[globalKey$1] = _global$1[globalKey$1] || {};
+const handlers$1 = _global$1[globalKey$1];
+function getSSRHandler$1(key, fallback) {
+  return handlers$1[key] || fallback;
+}
+function guessSerializerType$1(rawInit) {
+  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" : Array.isArray(rawInit) ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
+}
+const StorageSerializers$1 = {
+  boolean: {
+    read: (v) => v === "true",
+    write: (v) => String(v)
+  },
+  object: {
+    read: (v) => JSON.parse(v),
+    write: (v) => JSON.stringify(v)
+  },
+  number: {
+    read: (v) => Number.parseFloat(v),
+    write: (v) => String(v)
+  },
+  any: {
+    read: (v) => v,
+    write: (v) => String(v)
+  },
+  string: {
+    read: (v) => v,
+    write: (v) => String(v)
+  },
+  map: {
+    read: (v) => new Map(JSON.parse(v)),
+    write: (v) => JSON.stringify(Array.from(v.entries()))
+  },
+  set: {
+    read: (v) => new Set(JSON.parse(v)),
+    write: (v) => JSON.stringify(Array.from(v))
+  },
+  date: {
+    read: (v) => new Date(v),
+    write: (v) => v.toISOString()
+  }
+};
+function useStorage$1(key, initialValue, storage, options = {}) {
+  var _a2;
+  const {
+    flush = "pre",
+    deep = true,
+    listenToStorageChanges = true,
+    writeDefaults = true,
+    shallow,
+    window: window2 = defaultWindow$1,
+    eventFilter,
+    onError = (e) => {
+      console.error(e);
+    }
+  } = options;
+  const data = (shallow ? shallowRef : ref)(initialValue);
+  if (!storage) {
+    try {
+      storage = getSSRHandler$1("getDefaultStorage", () => {
+        var _a22;
+        return (_a22 = defaultWindow$1) == null ? void 0 : _a22.localStorage;
+      })();
+    } catch (e) {
+      onError(e);
+    }
+  }
+  if (!storage)
+    return data;
+  const rawInit = unref(initialValue);
+  const type = guessSerializerType$1(rawInit);
+  const serializer = (_a2 = options.serializer) != null ? _a2 : StorageSerializers$1[type];
+  const { pause: pauseWatch, resume: resumeWatch } = watchPausable(data, () => write(data.value), { flush, deep, eventFilter });
+  if (window2 && listenToStorageChanges)
+    useEventListener$1(window2, "storage", update);
+  update();
+  return data;
+  function write(v) {
+    try {
+      if (v == null)
+        storage.removeItem(key);
+      else
+        storage.setItem(key, serializer.write(v));
+    } catch (e) {
+      onError(e);
+    }
+  }
+  function read(event) {
+    if (event && event.key !== key)
+      return;
+    pauseWatch();
+    try {
+      const rawValue = event ? event.newValue : storage.getItem(key);
+      if (rawValue == null) {
+        if (writeDefaults && rawInit !== null)
+          storage.setItem(key, serializer.write(rawInit));
+        return rawInit;
+      } else if (typeof rawValue !== "string") {
+        return rawValue;
+      } else {
+        return serializer.read(rawValue);
+      }
+    } catch (e) {
+      onError(e);
+    } finally {
+      resumeWatch();
+    }
+  }
+  function update(event) {
+    if (event && event.key !== key)
+      return;
+    data.value = read(event);
+  }
+}
+function usePreferredDark$1(options) {
+  return useMediaQuery$1("(prefers-color-scheme: dark)", options);
+}
+var __defProp$h = Object.defineProperty;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$h = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
+    }
+  return a;
+};
+function useColorMode$1(options = {}) {
+  const {
+    selector = "html",
+    attribute = "class",
+    window: window2 = defaultWindow$1,
+    storage,
+    storageKey = "vueuse-color-scheme",
+    listenToStorageChanges = true,
+    storageRef,
+    emitAuto
+  } = options;
+  const modes = __spreadValues$h({
+    auto: "",
+    light: "light",
+    dark: "dark"
+  }, options.modes || {});
+  const preferredDark = usePreferredDark$1({ window: window2 });
+  const preferredMode = computed(() => preferredDark.value ? "dark" : "light");
+  const store = storageRef || (storageKey == null ? ref("auto") : useStorage$1(storageKey, "auto", storage, { window: window2, listenToStorageChanges }));
+  const state = computed({
+    get() {
+      return store.value === "auto" && !emitAuto ? preferredMode.value : store.value;
+    },
+    set(v) {
+      store.value = v;
+    }
+  });
+  const updateHTMLAttrs = getSSRHandler$1("updateHTMLAttrs", (selector2, attribute2, value) => {
+    const el = window2 == null ? void 0 : window2.document.querySelector(selector2);
+    if (!el)
+      return;
+    if (attribute2 === "class") {
+      const current = value.split(/\s/g);
+      Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
+        if (current.includes(v))
+          el.classList.add(v);
+        else
+          el.classList.remove(v);
+      });
+    } else {
+      el.setAttribute(attribute2, value);
+    }
+  });
+  function defaultOnChanged(mode) {
+    var _a2;
+    const resolvedMode = mode === "auto" ? preferredMode.value : mode;
+    updateHTMLAttrs(selector, attribute, (_a2 = modes[resolvedMode]) != null ? _a2 : resolvedMode);
+  }
+  function onChanged(mode) {
+    if (options.onChanged)
+      options.onChanged(mode, defaultOnChanged);
+    else
+      defaultOnChanged(mode);
+  }
+  watch(state, onChanged, { flush: "post", immediate: true });
+  tryOnMounted(() => onChanged(state.value));
+  return state;
+}
+var __defProp$g = Object.defineProperty;
+var __defProps$7$1 = Object.defineProperties;
+var __getOwnPropDescs$7$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$7$1 = (a, b) => __defProps$7$1(a, __getOwnPropDescs$7$1(b));
+function useDark(options = {}) {
+  const {
+    valueDark = "dark",
+    valueLight = "",
+    window: window2 = defaultWindow$1
+  } = options;
+  const mode = useColorMode$1(__spreadProps$7$1(__spreadValues$g({}, options), {
+    onChanged: (mode2, defaultHandler) => {
+      var _a2;
+      if (options.onChanged)
+        (_a2 = options.onChanged) == null ? void 0 : _a2.call(options, mode2 === "dark");
+      else
+        defaultHandler(mode2);
+    },
+    modes: {
+      dark: valueDark,
+      light: valueLight
+    }
+  }));
+  const preferredDark = usePreferredDark$1({ window: window2 });
+  const isDark = computed({
+    get() {
+      return mode.value === "dark";
+    },
+    set(v) {
+      if (v === preferredDark.value)
+        mode.value = "auto";
+      else
+        mode.value = v ? "dark" : "light";
+    }
+  });
+  return isDark;
+}
+function useDeviceMotion(options = {}) {
+  const {
+    window: window2 = defaultWindow$1,
+    eventFilter = bypassFilter
+  } = options;
+  const acceleration = ref({ x: null, y: null, z: null });
+  const rotationRate = ref({ alpha: null, beta: null, gamma: null });
+  const interval = ref(0);
+  const accelerationIncludingGravity = ref({
+    x: null,
+    y: null,
+    z: null
+  });
+  if (window2) {
+    const onDeviceMotion = createFilterWrapper(eventFilter, (event) => {
+      acceleration.value = event.acceleration;
+      accelerationIncludingGravity.value = event.accelerationIncludingGravity;
+      rotationRate.value = event.rotationRate;
+      interval.value = event.interval;
+    });
+    useEventListener$1(window2, "devicemotion", onDeviceMotion);
+  }
+  return {
+    acceleration,
+    accelerationIncludingGravity,
+    rotationRate,
+    interval
+  };
+}
+function useDeviceOrientation(options = {}) {
+  const { window: window2 = defaultWindow$1 } = options;
+  const isSupported = Boolean(window2 && "DeviceOrientationEvent" in window2);
+  const isAbsolute = ref(false);
+  const alpha = ref(null);
+  const beta = ref(null);
+  const gamma = ref(null);
+  if (window2 && isSupported) {
+    useEventListener$1(window2, "deviceorientation", (event) => {
+      isAbsolute.value = event.absolute;
+      alpha.value = event.alpha;
+      beta.value = event.beta;
+      gamma.value = event.gamma;
+    });
+  }
+  return {
+    isSupported,
+    isAbsolute,
+    alpha,
+    beta,
+    gamma
+  };
+}
+const DEVICE_PIXEL_RATIO_SCALES = [
+  1,
+  1.325,
+  1.4,
+  1.5,
+  1.8,
+  2,
+  2.4,
+  2.5,
+  2.75,
+  3,
+  3.5,
+  4
+];
+function useDevicePixelRatio({
+  window: window2 = defaultWindow$1
+} = {}) {
+  if (!window2) {
+    return {
+      pixelRatio: ref(1)
+    };
+  }
+  const pixelRatio = ref(window2.devicePixelRatio);
+  const handleDevicePixelRatio = () => {
+    pixelRatio.value = window2.devicePixelRatio;
+  };
+  useEventListener$1(window2, "resize", handleDevicePixelRatio, { passive: true });
+  DEVICE_PIXEL_RATIO_SCALES.forEach((dppx) => {
+    const mqlMin = useMediaQuery$1(`screen and (min-resolution: ${dppx}dppx)`);
+    const mqlMax = useMediaQuery$1(`screen and (max-resolution: ${dppx}dppx)`);
+    watch([mqlMin, mqlMax], handleDevicePixelRatio);
+  });
+  return { pixelRatio };
+}
+function usePermission(permissionDesc, options = {}) {
+  const {
+    controls = false,
+    navigator = defaultNavigator
+  } = options;
+  const isSupported = Boolean(navigator && "permissions" in navigator);
+  let permissionStatus;
+  const desc = typeof permissionDesc === "string" ? { name: permissionDesc } : permissionDesc;
+  const state = ref();
+  const onChange = () => {
+    if (permissionStatus)
+      state.value = permissionStatus.state;
+  };
+  const query = createSingletonPromise(async () => {
+    if (!isSupported)
+      return;
+    if (!permissionStatus) {
+      try {
+        permissionStatus = await navigator.permissions.query(desc);
+        useEventListener$1(permissionStatus, "change", onChange);
+        onChange();
+      } catch (e) {
+        state.value = "prompt";
+      }
+    }
+    return permissionStatus;
+  });
+  query();
+  if (controls) {
+    return {
+      state,
+      isSupported,
+      query
+    };
+  } else {
+    return state;
+  }
+}
+function useDevicesList(options = {}) {
+  const {
+    navigator = defaultNavigator,
+    requestPermissions = false,
+    constraints = { audio: true, video: true },
+    onUpdated
+  } = options;
+  const devices = ref([]);
+  const videoInputs = computed(() => devices.value.filter((i) => i.kind === "videoinput"));
+  const audioInputs = computed(() => devices.value.filter((i) => i.kind === "audioinput"));
+  const audioOutputs = computed(() => devices.value.filter((i) => i.kind === "audiooutput"));
+  let isSupported = false;
+  const permissionGranted = ref(false);
+  async function update() {
+    if (!isSupported)
+      return;
+    devices.value = await navigator.mediaDevices.enumerateDevices();
+    onUpdated == null ? void 0 : onUpdated(devices.value);
+  }
+  async function ensurePermissions() {
+    if (!isSupported)
+      return false;
+    if (permissionGranted.value)
+      return true;
+    const { state, query } = usePermission("camera", { controls: true });
+    await query();
+    if (state.value !== "granted") {
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      stream.getTracks().forEach((t) => t.stop());
+      update();
+      permissionGranted.value = true;
+    } else {
+      permissionGranted.value = true;
+    }
+    return permissionGranted.value;
+  }
+  if (navigator) {
+    isSupported = Boolean(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices);
+    if (isSupported) {
+      if (requestPermissions)
+        ensurePermissions();
+      useEventListener$1(navigator.mediaDevices, "devicechange", update);
+      update();
+    }
+  }
+  return {
+    devices,
+    ensurePermissions,
+    permissionGranted,
+    videoInputs,
+    audioInputs,
+    audioOutputs,
+    isSupported
+  };
+}
+function useDocumentVisibility({ document: document2 = defaultDocument } = {}) {
+  if (!document2)
+    return ref("visible");
+  const visibility = ref(document2.visibilityState);
+  useEventListener$1(document2, "visibilitychange", () => {
+    visibility.value = document2.visibilityState;
+  });
+  return visibility;
+}
+var __defProp$d = Object.defineProperty;
+var __defProps$4$1 = Object.defineProperties;
+var __getOwnPropDescs$4$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$4$1 = (a, b) => __defProps$4$1(a, __getOwnPropDescs$4$1(b));
+function useDraggable(target, options = {}) {
+  var _a2, _b;
+  const draggingElement = (_a2 = options.draggingElement) != null ? _a2 : defaultWindow$1;
+  const position = ref((_b = options.initialValue) != null ? _b : { x: 0, y: 0 });
+  const pressedDelta = ref();
+  const filterEvent = (e) => {
+    if (options.pointerTypes)
+      return options.pointerTypes.includes(e.pointerType);
+    return true;
+  };
+  const handleEvent = (e) => {
+    if (unref(options.preventDefault))
+      e.preventDefault();
+    if (unref(options.stopPropagation))
+      e.stopPropagation();
+  };
+  const start = (e) => {
+    var _a22;
+    if (!filterEvent(e))
+      return;
+    if (unref(options.exact) && e.target !== unref(target))
+      return;
+    const rect = unref(target).getBoundingClientRect();
+    const pos = {
+      x: e.pageX - rect.left,
+      y: e.pageY - rect.top
+    };
+    if (((_a22 = options.onStart) == null ? void 0 : _a22.call(options, pos, e)) === false)
+      return;
+    pressedDelta.value = pos;
+    handleEvent(e);
+  };
+  const move = (e) => {
+    var _a22;
+    if (!filterEvent(e))
+      return;
+    if (!pressedDelta.value)
+      return;
+    position.value = {
+      x: e.pageX - pressedDelta.value.x,
+      y: e.pageY - pressedDelta.value.y
+    };
+    (_a22 = options.onMove) == null ? void 0 : _a22.call(options, position.value, e);
+    handleEvent(e);
+  };
+  const end = (e) => {
+    var _a22;
+    if (!filterEvent(e))
+      return;
+    if (!pressedDelta.value)
+      return;
+    pressedDelta.value = void 0;
+    (_a22 = options.onEnd) == null ? void 0 : _a22.call(options, position.value, e);
+    handleEvent(e);
+  };
+  if (isClient) {
+    useEventListener$1(target, "pointerdown", start, true);
+    useEventListener$1(draggingElement, "pointermove", move, true);
+    useEventListener$1(draggingElement, "pointerup", end, true);
+  }
+  return __spreadProps$4$1(__spreadValues$d({}, toRefs(position)), {
+    position,
+    isDragging: computed(() => !!pressedDelta.value),
+    style: computed(() => `left:${position.value.x}px;top:${position.value.y}px;`)
+  });
+}
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __objRest$2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function useResizeObserver$1(target, callback, options = {}) {
+  const _a2 = options, { window: window2 = defaultWindow$1 } = _a2, observerOptions = __objRest$2(_a2, ["window"]);
+  let observer;
+  const isSupported = window2 && "ResizeObserver" in window2;
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = watch(() => unrefElement$1(target), (el) => {
+    cleanup();
+    if (isSupported && window2 && el) {
+      observer = new ResizeObserver(callback);
+      observer.observe(el, observerOptions);
+    }
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+function useElementBounding(target, options = {}) {
+  const {
+    reset = true,
+    windowResize = true,
+    windowScroll = true,
+    immediate = true
+  } = options;
+  const height = ref(0);
+  const bottom = ref(0);
+  const left = ref(0);
+  const right = ref(0);
+  const top = ref(0);
+  const width = ref(0);
+  const x = ref(0);
+  const y = ref(0);
+  function update() {
+    const el = unrefElement$1(target);
+    if (!el) {
+      if (reset) {
+        height.value = 0;
+        bottom.value = 0;
+        left.value = 0;
+        right.value = 0;
+        top.value = 0;
+        width.value = 0;
+        x.value = 0;
+        y.value = 0;
+      }
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    height.value = rect.height;
+    bottom.value = rect.bottom;
+    left.value = rect.left;
+    right.value = rect.right;
+    top.value = rect.top;
+    width.value = rect.width;
+    x.value = rect.x;
+    y.value = rect.y;
+  }
+  useResizeObserver$1(target, update);
+  watch(() => unrefElement$1(target), (ele) => !ele && update());
+  if (windowScroll)
+    useEventListener$1("scroll", update, { passive: true });
+  if (windowResize)
+    useEventListener$1("resize", update, { passive: true });
+  tryOnMounted(() => {
+    if (immediate)
+      update();
+  });
+  return {
+    height,
+    bottom,
+    left,
+    right,
+    top,
+    width,
+    x,
+    y,
+    update
+  };
+}
+function useRafFn(fn, options = {}) {
+  const {
+    immediate = true,
+    window: window2 = defaultWindow$1
+  } = options;
+  const isActive = ref(false);
+  let rafId = null;
+  function loop() {
+    if (!isActive.value || !window2)
+      return;
+    fn();
+    rafId = window2.requestAnimationFrame(loop);
+  }
+  function resume() {
+    if (!isActive.value && window2) {
+      isActive.value = true;
+      loop();
+    }
+  }
+  function pause() {
+    isActive.value = false;
+    if (rafId != null && window2) {
+      window2.cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  }
+  if (immediate)
+    resume();
+  tryOnScopeDispose(pause);
+  return {
+    isActive,
+    pause,
+    resume
+  };
+}
+function useElementSize$1(target, initialSize = { width: 0, height: 0 }, options = {}) {
+  const width = ref(initialSize.width);
+  const height = ref(initialSize.height);
+  useResizeObserver$1(target, ([entry]) => {
+    width.value = entry.contentRect.width;
+    height.value = entry.contentRect.height;
+  }, options);
+  watch(() => unrefElement$1(target), (ele) => {
+    width.value = ele ? initialSize.width : 0;
+    height.value = ele ? initialSize.height : 0;
+  });
+  return {
+    width,
+    height
+  };
+}
+function useElementVisibility$1(element, { window: window2 = defaultWindow$1, scrollTarget } = {}) {
+  const elementIsVisible = ref(false);
+  const testBounding = () => {
+    if (!window2)
+      return;
+    const document2 = window2.document;
+    if (!unref(element)) {
+      elementIsVisible.value = false;
+    } else {
+      const rect = unref(element).getBoundingClientRect();
+      elementIsVisible.value = rect.top <= (window2.innerHeight || document2.documentElement.clientHeight) && rect.left <= (window2.innerWidth || document2.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
+    }
+  };
+  tryOnMounted(testBounding);
+  if (window2)
+    tryOnMounted(() => useEventListener$1(unref(scrollTarget) || window2, "scroll", testBounding, { capture: false, passive: true }));
+  return elementIsVisible;
+}
+function useEyeDropper(options = {}) {
+  const { initialValue = "" } = options;
+  const isSupported = Boolean(typeof window !== "undefined" && "EyeDropper" in window);
+  const sRGBHex = ref(initialValue);
+  async function open(openOptions) {
+    if (!isSupported)
+      return;
+    const eyeDropper = new window.EyeDropper();
+    const result = await eyeDropper.open(openOptions);
+    sRGBHex.value = result.sRGBHex;
+    return result;
+  }
+  return { isSupported, sRGBHex, open };
+}
+const functionsMap = [
+  [
+    "requestFullscreen",
+    "exitFullscreen",
+    "fullscreenElement",
+    "fullscreenEnabled",
+    "fullscreenchange",
+    "fullscreenerror"
+  ],
+  [
+    "webkitRequestFullscreen",
+    "webkitExitFullscreen",
+    "webkitFullscreenElement",
+    "webkitFullscreenEnabled",
+    "webkitfullscreenchange",
+    "webkitfullscreenerror"
+  ],
+  [
+    "webkitRequestFullScreen",
+    "webkitCancelFullScreen",
+    "webkitCurrentFullScreenElement",
+    "webkitCancelFullScreen",
+    "webkitfullscreenchange",
+    "webkitfullscreenerror"
+  ],
+  [
+    "mozRequestFullScreen",
+    "mozCancelFullScreen",
+    "mozFullScreenElement",
+    "mozFullScreenEnabled",
+    "mozfullscreenchange",
+    "mozfullscreenerror"
+  ],
+  [
+    "msRequestFullscreen",
+    "msExitFullscreen",
+    "msFullscreenElement",
+    "msFullscreenEnabled",
+    "MSFullscreenChange",
+    "MSFullscreenError"
+  ]
+];
+function useFullscreen(target, options = {}) {
+  const { document: document2 = defaultDocument, autoExit = false } = options;
+  const targetRef = target || (document2 == null ? void 0 : document2.querySelector("html"));
+  const isFullscreen = ref(false);
+  let isSupported = false;
+  let map = functionsMap[0];
+  if (!document2) {
+    isSupported = false;
+  } else {
+    for (const m of functionsMap) {
+      if (m[1] in document2) {
+        map = m;
+        isSupported = true;
+        break;
+      }
+    }
+  }
+  const [REQUEST, EXIT, ELEMENT, , EVENT] = map;
+  async function exit() {
+    if (!isSupported)
+      return;
+    if (document2 == null ? void 0 : document2[ELEMENT])
+      await document2[EXIT]();
+    isFullscreen.value = false;
+  }
+  async function enter() {
+    if (!isSupported)
+      return;
+    await exit();
+    const target2 = unrefElement$1(targetRef);
+    if (target2) {
+      await target2[REQUEST]();
+      isFullscreen.value = true;
+    }
+  }
+  async function toggle() {
+    if (isFullscreen.value)
+      await exit();
+    else
+      await enter();
+  }
+  if (document2) {
+    useEventListener$1(document2, EVENT, () => {
+      isFullscreen.value = !!(document2 == null ? void 0 : document2[ELEMENT]);
+    }, false);
+  }
+  if (autoExit)
+    tryOnScopeDispose(exit);
+  return {
+    isSupported,
+    isFullscreen,
+    enter,
+    exit,
+    toggle
+  };
+}
+function useGeolocation(options = {}) {
+  const {
+    enableHighAccuracy = true,
+    maximumAge = 3e4,
+    timeout = 27e3,
+    navigator = defaultNavigator
+  } = options;
+  const isSupported = navigator && "geolocation" in navigator;
+  const locatedAt = ref(null);
+  const error = ref(null);
+  const coords = ref({
+    accuracy: 0,
+    latitude: Infinity,
+    longitude: Infinity,
+    altitude: null,
+    altitudeAccuracy: null,
+    heading: null,
+    speed: null
+  });
+  function updatePosition(position) {
+    locatedAt.value = position.timestamp;
+    coords.value = position.coords;
+    error.value = null;
+  }
+  let watcher;
+  if (isSupported) {
+    watcher = navigator.geolocation.watchPosition(updatePosition, (err) => error.value = err, {
+      enableHighAccuracy,
+      maximumAge,
+      timeout
+    });
+  }
+  tryOnScopeDispose(() => {
+    if (watcher && navigator)
+      navigator.geolocation.clearWatch(watcher);
+  });
+  return {
+    isSupported,
+    coords,
+    locatedAt,
+    error
+  };
+}
+const defaultEvents$1 = ["mousemove", "mousedown", "resize", "keydown", "touchstart", "wheel"];
+const oneMinute = 6e4;
+function useIdle(timeout = oneMinute, options = {}) {
+  const {
+    initialState = false,
+    listenForVisibilityChange = true,
+    events = defaultEvents$1,
+    window: window2 = defaultWindow$1,
+    eventFilter = throttleFilter(50)
+  } = options;
+  const idle = ref(initialState);
+  const lastActive = ref(timestamp());
+  let timer;
+  const onEvent = createFilterWrapper(eventFilter, () => {
+    idle.value = false;
+    lastActive.value = timestamp();
+    clearTimeout(timer);
+    timer = setTimeout(() => idle.value = true, timeout);
+  });
+  if (window2) {
+    const document2 = window2.document;
+    for (const event of events)
+      useEventListener$1(window2, event, onEvent, { passive: true });
+    if (listenForVisibilityChange) {
+      useEventListener$1(document2, "visibilitychange", () => {
+        if (!document2.hidden)
+          onEvent();
+      });
+    }
+  }
+  timer = setTimeout(() => idle.value = true, timeout);
+  return { idle, lastActive };
+}
+function useMouse(options = {}) {
+  const {
+    type = "page",
+    touch = true,
+    resetOnTouchEnds = false,
+    initialValue = { x: 0, y: 0 },
+    window: window2 = defaultWindow$1,
+    eventFilter
+  } = options;
+  const x = ref(initialValue.x);
+  const y = ref(initialValue.y);
+  const sourceType = ref(null);
+  const mouseHandler = (event) => {
+    if (type === "page") {
+      x.value = event.pageX;
+      y.value = event.pageY;
+    } else if (type === "client") {
+      x.value = event.clientX;
+      y.value = event.clientY;
+    }
+    sourceType.value = "mouse";
+  };
+  const reset = () => {
+    x.value = initialValue.x;
+    y.value = initialValue.y;
+  };
+  const touchHandler = (event) => {
+    if (event.touches.length > 0) {
+      const touch2 = event.touches[0];
+      if (type === "page") {
+        x.value = touch2.pageX;
+        y.value = touch2.pageY;
+      } else if (type === "client") {
+        x.value = touch2.clientX;
+        y.value = touch2.clientY;
+      }
+      sourceType.value = "touch";
+    }
+  };
+  const mouseHandlerWrapper = (event) => {
+    return eventFilter === void 0 ? mouseHandler(event) : eventFilter(() => mouseHandler(event), {});
+  };
+  const touchHandlerWrapper = (event) => {
+    return eventFilter === void 0 ? touchHandler(event) : eventFilter(() => touchHandler(event), {});
+  };
+  if (window2) {
+    useEventListener$1(window2, "mousemove", mouseHandlerWrapper, { passive: true });
+    useEventListener$1(window2, "dragover", mouseHandlerWrapper, { passive: true });
+    if (touch) {
+      useEventListener$1(window2, "touchstart", touchHandlerWrapper, { passive: true });
+      useEventListener$1(window2, "touchmove", touchHandlerWrapper, { passive: true });
+      if (resetOnTouchEnds)
+        useEventListener$1(window2, "touchend", reset, { passive: true });
+    }
+  }
+  return {
+    x,
+    y,
+    sourceType
+  };
+}
+function useMouseInElement(target, options = {}) {
+  const {
+    handleOutside = true,
+    window: window2 = defaultWindow$1
+  } = options;
+  const { x, y, sourceType } = useMouse(options);
+  const targetRef = ref(target != null ? target : window2 == null ? void 0 : window2.document.body);
+  const elementX = ref(0);
+  const elementY = ref(0);
+  const elementPositionX = ref(0);
+  const elementPositionY = ref(0);
+  const elementHeight = ref(0);
+  const elementWidth = ref(0);
+  const isOutside = ref(true);
+  let stop = () => {
+  };
+  if (window2) {
+    stop = watch([targetRef, x, y], () => {
+      const el = unrefElement$1(targetRef);
+      if (!el)
+        return;
+      const {
+        left,
+        top,
+        width,
+        height
+      } = el.getBoundingClientRect();
+      elementPositionX.value = left + window2.pageXOffset;
+      elementPositionY.value = top + window2.pageYOffset;
+      elementHeight.value = height;
+      elementWidth.value = width;
+      const elX = x.value - elementPositionX.value;
+      const elY = y.value - elementPositionY.value;
+      isOutside.value = width === 0 || height === 0 || elX < 0 || elY < 0 || elX > width || elY > height;
+      if (handleOutside || !isOutside.value) {
+        elementX.value = elX;
+        elementY.value = elY;
+      }
+    }, { immediate: true });
+  }
+  return {
+    x,
+    y,
+    sourceType,
+    elementX,
+    elementY,
+    elementPositionX,
+    elementPositionY,
+    elementHeight,
+    elementWidth,
+    isOutside,
+    stop
+  };
+}
+function useMousePressed(options = {}) {
+  const {
+    touch = true,
+    drag = true,
+    initialValue = false,
+    window: window2 = defaultWindow$1
+  } = options;
+  const pressed = ref(initialValue);
+  const sourceType = ref(null);
+  if (!window2) {
+    return {
+      pressed,
+      sourceType
+    };
+  }
+  const onPressed = (srcType) => () => {
+    pressed.value = true;
+    sourceType.value = srcType;
+  };
+  const onReleased = () => {
+    pressed.value = false;
+    sourceType.value = null;
+  };
+  const target = computed(() => unrefElement$1(options.target) || window2);
+  useEventListener$1(target, "mousedown", onPressed("mouse"), { passive: true });
+  useEventListener$1(window2, "mouseleave", onReleased, { passive: true });
+  useEventListener$1(window2, "mouseup", onReleased, { passive: true });
+  if (drag) {
+    useEventListener$1(target, "dragstart", onPressed("mouse"), { passive: true });
+    useEventListener$1(window2, "drop", onReleased, { passive: true });
+    useEventListener$1(window2, "dragend", onReleased, { passive: true });
+  }
+  if (touch) {
+    useEventListener$1(target, "touchstart", onPressed("touch"), { passive: true });
+    useEventListener$1(window2, "touchend", onReleased, { passive: true });
+    useEventListener$1(window2, "touchcancel", onReleased, { passive: true });
+  }
+  return {
+    pressed,
+    sourceType
+  };
+}
+function useNetwork(options = {}) {
+  const { window: window2 = defaultWindow$1 } = options;
+  const navigator = window2 == null ? void 0 : window2.navigator;
+  const isSupported = Boolean(navigator && "connection" in navigator);
+  const isOnline = ref(true);
+  const saveData = ref(false);
+  const offlineAt = ref(void 0);
+  const onlineAt = ref(void 0);
+  const downlink = ref(void 0);
+  const downlinkMax = ref(void 0);
+  const rtt = ref(void 0);
+  const effectiveType = ref(void 0);
+  const type = ref("unknown");
+  const connection = isSupported && navigator.connection;
+  function updateNetworkInformation() {
+    if (!navigator)
+      return;
+    isOnline.value = navigator.onLine;
+    offlineAt.value = isOnline.value ? void 0 : Date.now();
+    onlineAt.value = isOnline.value ? Date.now() : void 0;
+    if (connection) {
+      downlink.value = connection.downlink;
+      downlinkMax.value = connection.downlinkMax;
+      effectiveType.value = connection.effectiveType;
+      rtt.value = connection.rtt;
+      saveData.value = connection.saveData;
+      type.value = connection.type;
+    }
+  }
+  if (window2) {
+    useEventListener$1(window2, "offline", () => {
+      isOnline.value = false;
+      offlineAt.value = Date.now();
+    });
+    useEventListener$1(window2, "online", () => {
+      isOnline.value = true;
+      onlineAt.value = Date.now();
+    });
+  }
+  if (connection)
+    useEventListener$1(connection, "change", updateNetworkInformation, false);
+  updateNetworkInformation();
+  return {
+    isSupported,
+    isOnline,
+    saveData,
+    offlineAt,
+    onlineAt,
+    downlink,
+    downlinkMax,
+    effectiveType,
+    rtt,
+    type
+  };
+}
+var __defProp$5$1 = Object.defineProperty;
+var __getOwnPropSymbols$5$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5$1 = (obj, key, value) => key in obj ? __defProp$5$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5$1.call(b, prop))
+      __defNormalProp$5$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5$1)
+    for (var prop of __getOwnPropSymbols$5$1(b)) {
+      if (__propIsEnum$5$1.call(b, prop))
+        __defNormalProp$5$1(a, prop, b[prop]);
+    }
+  return a;
+};
+function useNow(options = {}) {
+  const {
+    controls: exposeControls = false,
+    interval = "requestAnimationFrame"
+  } = options;
+  const now = ref(new Date());
+  const update = () => now.value = new Date();
+  const controls = interval === "requestAnimationFrame" ? useRafFn(update, { immediate: true }) : useIntervalFn(update, interval, { immediate: true });
+  if (exposeControls) {
+    return __spreadValues$5$1({
+      now
+    }, controls);
+  } else {
+    return now;
+  }
+}
+function useObjectUrl(object) {
+  const url = ref();
+  const release = () => {
+    if (url.value)
+      URL.revokeObjectURL(url.value);
+    url.value = void 0;
+  };
+  watch(() => unref(object), (newObject) => {
+    release();
+    if (newObject)
+      url.value = URL.createObjectURL(newObject);
+  }, { immediate: true });
+  tryOnScopeDispose(release);
+  return readonly(url);
+}
+function useOffsetPagination(options) {
+  const {
+    total = Infinity,
+    pageSize = 10,
+    page = 1,
+    onPageChange = noop,
+    onPageSizeChange = noop,
+    onPageCountChange = noop
+  } = options;
+  const currentPageSize = useClamp(pageSize, 1, Infinity);
+  const pageCount = computed(() => Math.ceil(unref(total) / unref(currentPageSize)));
+  const currentPage = useClamp(page, 1, pageCount);
+  const isFirstPage = computed(() => currentPage.value === 1);
+  const isLastPage = computed(() => currentPage.value === pageCount.value);
+  if (isRef(page))
+    syncRef(page, currentPage);
+  if (isRef(pageSize))
+    syncRef(pageSize, currentPageSize);
+  function prev() {
+    currentPage.value--;
+  }
+  function next() {
+    currentPage.value++;
+  }
+  const returnValue = {
+    currentPage,
+    currentPageSize,
+    pageCount,
+    isFirstPage,
+    isLastPage,
+    prev,
+    next
+  };
+  watch(currentPage, () => {
+    onPageChange(reactive(returnValue));
+  });
+  watch(currentPageSize, () => {
+    onPageSizeChange(reactive(returnValue));
+  });
+  watch(pageCount, () => {
+    onPageCountChange(reactive(returnValue));
+  });
+  return returnValue;
+}
+function useOnline(options = {}) {
+  const { isOnline } = useNetwork(options);
+  return isOnline;
+}
+function usePageLeave(options = {}) {
+  const { window: window2 = defaultWindow$1 } = options;
+  const isLeft = ref(false);
+  const handler = (event) => {
+    if (!window2)
+      return;
+    event = event || window2.event;
+    const from = event.relatedTarget || event.toElement;
+    isLeft.value = !from;
+  };
+  if (window2) {
+    useEventListener$1(window2, "mouseout", handler, { passive: true });
+    useEventListener$1(window2.document, "mouseleave", handler, { passive: true });
+    useEventListener$1(window2.document, "mouseenter", handler, { passive: true });
+  }
+  return isLeft;
+}
+var __defProp$4$1 = Object.defineProperty;
+var __defProps$1$1 = Object.defineProperties;
+var __getOwnPropDescs$1$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4$1 = (obj, key, value) => key in obj ? __defProp$4$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4$1.call(b, prop))
+      __defNormalProp$4$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4$1)
+    for (var prop of __getOwnPropSymbols$4$1(b)) {
+      if (__propIsEnum$4$1.call(b, prop))
+        __defNormalProp$4$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1$1 = (a, b) => __defProps$1$1(a, __getOwnPropDescs$1$1(b));
+const defaultState = {
+  x: 0,
+  y: 0,
+  pointerId: 0,
+  pressure: 0,
+  tiltX: 0,
+  tiltY: 0,
+  width: 0,
+  height: 0,
+  twist: 0,
+  pointerType: null
+};
+const keys = /* @__PURE__ */ Object.keys(defaultState);
+function usePointer(options = {}) {
+  const {
+    target = defaultWindow$1
+  } = options;
+  const isInside = ref(false);
+  const state = ref(options.initialValue || {});
+  Object.assign(state.value, defaultState, state.value);
+  const handler = (event) => {
+    isInside.value = true;
+    if (options.pointerTypes && !options.pointerTypes.includes(event.pointerType))
+      return;
+    state.value = objectPick(event, keys, false);
+  };
+  if (target) {
+    useEventListener$1(target, "pointerdown", handler, { passive: true });
+    useEventListener$1(target, "pointermove", handler, { passive: true });
+    useEventListener$1(target, "pointerleave", () => isInside.value = false, { passive: true });
+  }
+  return __spreadProps$1$1(__spreadValues$4$1({}, toRefs(state)), {
+    isInside
+  });
+}
+var SwipeDirection;
+(function(SwipeDirection2) {
+  SwipeDirection2["UP"] = "UP";
+  SwipeDirection2["RIGHT"] = "RIGHT";
+  SwipeDirection2["DOWN"] = "DOWN";
+  SwipeDirection2["LEFT"] = "LEFT";
+  SwipeDirection2["NONE"] = "NONE";
+})(SwipeDirection || (SwipeDirection = {}));
+function usePreferredColorScheme(options) {
+  const isLight = useMediaQuery$1("(prefers-color-scheme: light)", options);
+  const isDark = useMediaQuery$1("(prefers-color-scheme: dark)", options);
+  return computed(() => {
+    if (isDark.value)
+      return "dark";
+    if (isLight.value)
+      return "light";
+    return "no-preference";
+  });
+}
+function usePreferredLanguages(options = {}) {
+  const { window: window2 = defaultWindow$1 } = options;
+  if (!window2)
+    return ref(["en"]);
+  const navigator = window2.navigator;
+  const value = ref(navigator.languages);
+  useEventListener$1(window2, "languagechange", () => {
+    value.value = navigator.languages;
+  });
+  return value;
+}
+var __defProp$1$1 = Object.defineProperty;
+var __getOwnPropSymbols$1$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1$1 = (obj, key, value) => key in obj ? __defProp$1$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1$1.call(b, prop))
+      __defNormalProp$1$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1$1)
+    for (var prop of __getOwnPropSymbols$1$1(b)) {
+      if (__propIsEnum$1$1.call(b, prop))
+        __defNormalProp$1$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1$1)
+    for (var prop of __getOwnPropSymbols$1$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const UNITS = [
+  { max: 6e4, value: 1e3, name: "second" },
+  { max: 276e4, value: 6e4, name: "minute" },
+  { max: 72e6, value: 36e5, name: "hour" },
+  { max: 5184e5, value: 864e5, name: "day" },
+  { max: 24192e5, value: 6048e5, name: "week" },
+  { max: 28512e6, value: 2592e6, name: "month" },
+  { max: Infinity, value: 31536e6, name: "year" }
+];
+const DEFAULT_MESSAGES = {
+  justNow: "just now",
+  past: (n) => n.match(/\d/) ? `${n} ago` : n,
+  future: (n) => n.match(/\d/) ? `in ${n}` : n,
+  month: (n, past) => n === 1 ? past ? "last month" : "next month" : `${n} month${n > 1 ? "s" : ""}`,
+  year: (n, past) => n === 1 ? past ? "last year" : "next year" : `${n} year${n > 1 ? "s" : ""}`,
+  day: (n, past) => n === 1 ? past ? "yesterday" : "tomorrow" : `${n} day${n > 1 ? "s" : ""}`,
+  week: (n, past) => n === 1 ? past ? "last week" : "next week" : `${n} week${n > 1 ? "s" : ""}`,
+  hour: (n) => `${n} hour${n > 1 ? "s" : ""}`,
+  minute: (n) => `${n} minute${n > 1 ? "s" : ""}`,
+  second: (n) => `${n} second${n > 1 ? "s" : ""}`
+};
+const DEFAULT_FORMATTER = (date) => date.toISOString().slice(0, 10);
+function useTimeAgo(time, options = {}) {
+  const {
+    controls: exposeControls = false,
+    max,
+    updateInterval = 3e4,
+    messages = DEFAULT_MESSAGES,
+    fullDateFormatter = DEFAULT_FORMATTER
+  } = options;
+  const { abs, round } = Math;
+  const _a2 = useNow({ interval: updateInterval, controls: true }), { now } = _a2, controls = __objRest$1(_a2, ["now"]);
+  function getTimeago(from, now2) {
+    var _a22;
+    const diff = +now2 - +from;
+    const absDiff = abs(diff);
+    if (absDiff < 6e4)
+      return messages.justNow;
+    if (typeof max === "number" && absDiff > max)
+      return fullDateFormatter(new Date(from));
+    if (typeof max === "string") {
+      const unitMax = (_a22 = UNITS.find((i) => i.name === max)) == null ? void 0 : _a22.max;
+      if (unitMax && absDiff > unitMax)
+        return fullDateFormatter(new Date(from));
+    }
+    for (const unit of UNITS) {
+      if (absDiff < unit.max)
+        return format(diff, unit);
+    }
+  }
+  function applyFormat(name, val, isPast) {
+    const formatter = messages[name];
+    if (typeof formatter === "function")
+      return formatter(val, isPast);
+    return formatter.replace("{0}", val.toString());
+  }
+  function format(diff, unit) {
+    const val = round(abs(diff) / unit.value);
+    const past = diff > 0;
+    const str = applyFormat(unit.name, val, past);
+    return applyFormat(past ? "past" : "future", str, past);
+  }
+  const timeAgo = computed(() => getTimeago(new Date(unref(time)), unref(now.value)));
+  if (exposeControls) {
+    return __spreadValues$1$1({
+      timeAgo
+    }, controls);
+  } else {
+    return timeAgo;
+  }
+}
+var __defProp$e = Object.defineProperty;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
+    }
+  return a;
+};
+function useTimestamp(options = {}) {
+  const {
+    controls: exposeControls = false,
+    offset = 0,
+    immediate = true,
+    interval = "requestAnimationFrame"
+  } = options;
+  const ts = ref(timestamp() + offset);
+  const update = () => ts.value = timestamp() + offset;
+  const controls = interval === "requestAnimationFrame" ? useRafFn(update, { immediate }) : useIntervalFn(update, interval, { immediate });
+  if (exposeControls) {
+    return __spreadValues$e({
+      timestamp: ts
+    }, controls);
+  } else {
+    return ts;
+  }
+}
+function useVirtualList(list, options) {
+  const containerRef = ref();
+  const size = useElementSize$1(containerRef);
+  const currentList = ref([]);
+  const source = shallowRef(list);
+  const state = ref({ start: 0, end: 10 });
+  const { itemHeight, overscan = 5 } = options;
+  const getViewCapacity = (containerHeight) => {
+    if (typeof itemHeight === "number")
+      return Math.ceil(containerHeight / itemHeight);
+    const { start = 0 } = state.value;
+    let sum = 0;
+    let capacity = 0;
+    for (let i = start; i < source.value.length; i++) {
+      const height = itemHeight(i);
+      sum += height;
+      if (sum >= containerHeight) {
+        capacity = i;
+        break;
+      }
+    }
+    return capacity - start;
+  };
+  const getOffset = (scrollTop) => {
+    if (typeof itemHeight === "number")
+      return Math.floor(scrollTop / itemHeight) + 1;
+    let sum = 0;
+    let offset = 0;
+    for (let i = 0; i < source.value.length; i++) {
+      const height = itemHeight(i);
+      sum += height;
+      if (sum >= scrollTop) {
+        offset = i;
+        break;
+      }
+    }
+    return offset + 1;
+  };
+  const calculateRange = () => {
+    const element = containerRef.value;
+    if (element) {
+      const offset = getOffset(element.scrollTop);
+      const viewCapacity = getViewCapacity(element.clientHeight);
+      const from = offset - overscan;
+      const to = offset + viewCapacity + overscan;
+      state.value = {
+        start: from < 0 ? 0 : from,
+        end: to > source.value.length ? source.value.length : to
+      };
+      currentList.value = source.value.slice(state.value.start, state.value.end).map((ele, index) => ({
+        data: ele,
+        index: index + state.value.start
+      }));
+    }
+  };
+  watch([size.width, size.height, list], () => {
+    calculateRange();
+  });
+  const totalHeight = computed(() => {
+    if (typeof itemHeight === "number")
+      return source.value.length * itemHeight;
+    return source.value.reduce((sum, _, index) => sum + itemHeight(index), 0);
+  });
+  const getDistanceTop = (index) => {
+    if (typeof itemHeight === "number") {
+      const height2 = index * itemHeight;
+      return height2;
+    }
+    const height = source.value.slice(0, index).reduce((sum, _, i) => sum + itemHeight(i), 0);
+    return height;
+  };
+  const scrollTo = (index) => {
+    if (containerRef.value) {
+      containerRef.value.scrollTop = getDistanceTop(index);
+      calculateRange();
+    }
+  };
+  const offsetTop = computed(() => getDistanceTop(state.value.start));
+  const wrapperProps = computed(() => {
+    return {
+      style: {
+        width: "100%",
+        height: `${totalHeight.value - offsetTop.value}px`,
+        marginTop: `${offsetTop.value}px`
+      }
+    };
+  });
+  const containerStyle = { overflowY: "auto" };
+  return {
+    list: currentList,
+    scrollTo,
+    containerProps: {
+      ref: containerRef,
+      onScroll: () => {
+        calculateRange();
+      },
+      style: containerStyle
+    },
+    wrapperProps
+  };
+}
+function useWindowFocus({ window: window2 = defaultWindow$1 } = {}) {
+  if (!window2)
+    return ref(false);
+  const focused = ref(window2.document.hasFocus());
+  useEventListener$1(window2, "blur", () => {
+    focused.value = false;
+  });
+  useEventListener$1(window2, "focus", () => {
+    focused.value = true;
+  });
+  return focused;
+}
+function useWindowSize(options = {}) {
+  const {
+    window: window2 = defaultWindow$1,
+    initialWidth = Infinity,
+    initialHeight = Infinity,
+    listenOrientation = true
+  } = options;
+  const width = ref(initialWidth);
+  const height = ref(initialHeight);
+  const update = () => {
+    if (window2) {
+      width.value = window2.innerWidth;
+      height.value = window2.innerHeight;
+    }
+  };
+  update();
+  tryOnMounted(update);
+  useEventListener$1("resize", update, { passive: true });
+  if (listenOrientation)
+    useEventListener$1("orientationchange", update, { passive: true });
+  return { width, height };
+}
+defineComponent({
+  name: "OnClickOutside",
+  props: ["as"],
+  emits: ["trigger"],
+  setup(props, { slots, emit }) {
+    const target = ref();
+    onClickOutside(target, (e) => {
+      emit("trigger", e);
+    });
+    return () => {
+      if (slots.default)
+        return h(props.as || "div", { ref: target }, slots.default());
+    };
+  }
+});
+function unrefElement(elRef) {
+  var _a2;
+  const plain = unref(elRef);
+  return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
+}
+const defaultWindow = isClient ? window : void 0;
+function useEventListener(...args) {
+  let target;
+  let event;
+  let listener;
+  let options;
+  if (isString(args[0])) {
+    [event, listener, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, event, listener, options] = args;
+  }
+  if (!target)
+    return noop;
+  let cleanup = noop;
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (!el)
+      return;
+    el.addEventListener(event, listener, options);
+    cleanup = () => {
+      el.removeEventListener(event, listener, options);
+      cleanup = noop;
+    };
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+const createKeyPredicate = (keyFilter) => {
+  if (typeof keyFilter === "function")
+    return keyFilter;
+  else if (typeof keyFilter === "string")
+    return (event) => event.key === keyFilter;
+  else if (Array.isArray(keyFilter))
+    return (event) => keyFilter.includes(event.key);
+  else if (keyFilter)
+    return () => true;
+  else
+    return () => false;
+};
+function onKeyStroke(key, handler, options = {}) {
+  const { target = defaultWindow, eventName = "keydown", passive = false } = options;
+  const predicate = createKeyPredicate(key);
+  const listener = (e) => {
+    if (predicate(e))
+      handler(e);
+  };
+  return useEventListener(target, eventName, listener, passive);
+}
+var __defProp$c = Object.defineProperty;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
+    }
+  return a;
+};
+({
+  [directiveHooks.mounted](el, binding) {
+    var _a2, _b;
+    const keys2 = (_b = (_a2 = binding.arg) == null ? void 0 : _a2.split(",")) != null ? _b : [];
+    if (typeof binding.value === "function") {
+      onKeyStroke(keys2, binding.value, {
+        target: el
+      });
+    } else {
+      const [handler, options] = binding.value;
+      onKeyStroke(keys2, handler, __spreadValues$c({
+        target: el
+      }, options));
+    }
+  }
+});
+const DEFAULT_DELAY = 500;
+function onLongPress(target, handler, options) {
+  var _a2, _b;
+  const elementRef = computed(() => unrefElement(target));
+  let timeout = null;
+  function clear() {
+    if (timeout != null) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  }
+  function onDown(ev) {
+    var _a22, _b2, _c, _d;
+    if (((_a22 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a22.self) && ev.target !== elementRef.value)
+      return;
+    clear();
+    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+      ev.preventDefault();
+    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+      ev.stopPropagation();
+    timeout = setTimeout(() => handler(ev), (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY);
+  }
+  const listenerOptions = {
+    capture: (_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.capture,
+    once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
+  };
+  useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
+  useEventListener(elementRef, "pointerup", clear, listenerOptions);
+  useEventListener(elementRef, "pointerleave", clear, listenerOptions);
+}
+defineComponent({
+  name: "OnLongPress",
+  props: ["as", "options"],
+  emits: ["trigger"],
+  setup(props, { slots, emit }) {
+    const target = ref();
+    onLongPress(target, (e) => {
+      emit("trigger", e);
+    }, props.options);
+    return () => {
+      if (slots.default)
+        return h(props.as || "div", { ref: target }, slots.default());
+    };
+  }
+});
+({
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function")
+      onLongPress(el, binding.value, { modifiers: binding.modifiers });
+    else
+      onLongPress(el, ...binding.value);
+  }
+});
+defineComponent({
+  name: "UseActiveElement",
+  setup(props, { slots }) {
+    const data = reactive({
+      element: useActiveElement()
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseBattery",
+  setup(props, { slots }) {
+    const data = reactive(useBattery(props));
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseBrowserLocation",
+  setup(props, { slots }) {
+    const data = reactive(useBrowserLocation());
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+const globalKey = "__vueuse_ssr_handlers__";
+_global[globalKey] = _global[globalKey] || {};
+const handlers = _global[globalKey];
+function getSSRHandler(key, fallback) {
+  return handlers[key] || fallback;
+}
+function guessSerializerType(rawInit) {
+  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" : Array.isArray(rawInit) ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
+}
+const StorageSerializers = {
+  boolean: {
+    read: (v) => v === "true",
+    write: (v) => String(v)
+  },
+  object: {
+    read: (v) => JSON.parse(v),
+    write: (v) => JSON.stringify(v)
+  },
+  number: {
+    read: (v) => Number.parseFloat(v),
+    write: (v) => String(v)
+  },
+  any: {
+    read: (v) => v,
+    write: (v) => String(v)
+  },
+  string: {
+    read: (v) => v,
+    write: (v) => String(v)
+  },
+  map: {
+    read: (v) => new Map(JSON.parse(v)),
+    write: (v) => JSON.stringify(Array.from(v.entries()))
+  },
+  set: {
+    read: (v) => new Set(JSON.parse(v)),
+    write: (v) => JSON.stringify(Array.from(v))
+  },
+  date: {
+    read: (v) => new Date(v),
+    write: (v) => v.toISOString()
+  }
+};
+function useStorage(key, initialValue, storage, options = {}) {
+  var _a2;
+  const {
+    flush = "pre",
+    deep = true,
+    listenToStorageChanges = true,
+    writeDefaults = true,
+    shallow,
+    window: window2 = defaultWindow,
+    eventFilter,
+    onError = (e) => {
+      console.error(e);
+    }
+  } = options;
+  const data = (shallow ? shallowRef : ref)(initialValue);
+  if (!storage) {
+    try {
+      storage = getSSRHandler("getDefaultStorage", () => {
+        var _a22;
+        return (_a22 = defaultWindow) == null ? void 0 : _a22.localStorage;
+      })();
+    } catch (e) {
+      onError(e);
+    }
+  }
+  if (!storage)
+    return data;
+  const rawInit = unref(initialValue);
+  const type = guessSerializerType(rawInit);
+  const serializer = (_a2 = options.serializer) != null ? _a2 : StorageSerializers[type];
+  const { pause: pauseWatch, resume: resumeWatch } = watchPausable(data, () => write(data.value), { flush, deep, eventFilter });
+  if (window2 && listenToStorageChanges)
+    useEventListener(window2, "storage", update);
+  update();
+  return data;
+  function write(v) {
+    try {
+      if (v == null)
+        storage.removeItem(key);
+      else
+        storage.setItem(key, serializer.write(v));
+    } catch (e) {
+      onError(e);
+    }
+  }
+  function read(event) {
+    if (event && event.key !== key)
+      return;
+    pauseWatch();
+    try {
+      const rawValue = event ? event.newValue : storage.getItem(key);
+      if (rawValue == null) {
+        if (writeDefaults && rawInit !== null)
+          storage.setItem(key, serializer.write(rawInit));
+        return rawInit;
+      } else if (typeof rawValue !== "string") {
+        return rawValue;
+      } else {
+        return serializer.read(rawValue);
+      }
+    } catch (e) {
+      onError(e);
+    } finally {
+      resumeWatch();
+    }
+  }
+  function update(event) {
+    if (event && event.key !== key)
+      return;
+    data.value = read(event);
+  }
+}
+function useMediaQuery(query, options = {}) {
+  const { window: window2 = defaultWindow } = options;
+  const isSupported = Boolean(window2 && "matchMedia" in window2 && typeof window2.matchMedia === "function");
+  let mediaQuery;
+  const matches = ref(false);
+  const update = () => {
+    if (!isSupported)
+      return;
+    if (!mediaQuery)
+      mediaQuery = window2.matchMedia(query);
+    matches.value = mediaQuery.matches;
+  };
+  tryOnBeforeMount(() => {
+    update();
+    if (!mediaQuery)
+      return;
+    if ("addEventListener" in mediaQuery)
+      mediaQuery.addEventListener("change", update);
+    else
+      mediaQuery.addListener(update);
+    tryOnScopeDispose(() => {
+      if ("removeEventListener" in mediaQuery)
+        mediaQuery.removeEventListener("change", update);
+      else
+        mediaQuery.removeListener(update);
+    });
+  });
+  return matches;
+}
+function usePreferredDark(options) {
+  return useMediaQuery("(prefers-color-scheme: dark)", options);
+}
+var __defProp$b = Object.defineProperty;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
+    }
+  return a;
+};
+function useColorMode(options = {}) {
+  const {
+    selector = "html",
+    attribute = "class",
+    window: window2 = defaultWindow,
+    storage,
+    storageKey = "vueuse-color-scheme",
+    listenToStorageChanges = true,
+    storageRef,
+    emitAuto
+  } = options;
+  const modes = __spreadValues$b({
+    auto: "",
+    light: "light",
+    dark: "dark"
+  }, options.modes || {});
+  const preferredDark = usePreferredDark({ window: window2 });
+  const preferredMode = computed(() => preferredDark.value ? "dark" : "light");
+  const store = storageRef || (storageKey == null ? ref("auto") : useStorage(storageKey, "auto", storage, { window: window2, listenToStorageChanges }));
+  const state = computed({
+    get() {
+      return store.value === "auto" && !emitAuto ? preferredMode.value : store.value;
+    },
+    set(v) {
+      store.value = v;
+    }
+  });
+  const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector2, attribute2, value) => {
+    const el = window2 == null ? void 0 : window2.document.querySelector(selector2);
+    if (!el)
+      return;
+    if (attribute2 === "class") {
+      const current = value.split(/\s/g);
+      Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
+        if (current.includes(v))
+          el.classList.add(v);
+        else
+          el.classList.remove(v);
+      });
+    } else {
+      el.setAttribute(attribute2, value);
+    }
+  });
+  function defaultOnChanged(mode) {
+    var _a2;
+    const resolvedMode = mode === "auto" ? preferredMode.value : mode;
+    updateHTMLAttrs(selector, attribute, (_a2 = modes[resolvedMode]) != null ? _a2 : resolvedMode);
+  }
+  function onChanged(mode) {
+    if (options.onChanged)
+      options.onChanged(mode, defaultOnChanged);
+    else
+      defaultOnChanged(mode);
+  }
+  watch(state, onChanged, { flush: "post", immediate: true });
+  tryOnMounted(() => onChanged(state.value));
+  return state;
+}
+defineComponent({
+  name: "UseColorMode",
+  props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
+  setup(props, { slots }) {
+    const mode = useColorMode(props);
+    const data = reactive({
+      mode
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseDark",
+  props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
+  setup(props, { slots }) {
+    const isDark = useDark(props);
+    const data = reactive({
+      isDark,
+      toggleDark: useToggle(isDark)
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseDeviceMotion",
+  setup(props, { slots }) {
+    const data = reactive(useDeviceMotion());
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseDeviceOrientation",
+  setup(props, { slots }) {
+    const data = reactive(useDeviceOrientation());
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseDevicePixelRatio",
+  setup(props, { slots }) {
+    const data = reactive({
+      pixelRatio: useDevicePixelRatio()
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseDevicesList",
+  props: ["onUpdated", "requestPermissions", "constraints"],
+  setup(props, { slots }) {
+    const data = reactive(useDevicesList(props));
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseDocumentVisibility",
+  setup(props, { slots }) {
+    const data = reactive({
+      visibility: useDocumentVisibility()
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+var __defProp$a = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+defineComponent({
+  name: "UseDraggable",
+  props: [
+    "storageKey",
+    "storageType",
+    "initialValue",
+    "exact",
+    "preventDefault",
+    "stopPropagation",
+    "pointerTypes",
+    "as"
+  ],
+  setup(props, { slots }) {
+    const target = ref();
+    const initialValue = props.storageKey ? useStorage$1(props.storageKey, unref(props.initialValue) || { x: 0, y: 0 }, isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
+    const data = reactive(useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
+      initialValue
+    })));
+    return () => {
+      if (slots.default)
+        return h(props.as || "div", { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
+    };
+  }
+});
+defineComponent({
+  name: "UseElementBounding",
+  props: ["box", "as"],
+  setup(props, { slots }) {
+    const target = ref();
+    const data = reactive(useElementBounding(target));
+    return () => {
+      if (slots.default)
+        return h(props.as || "div", { ref: target }, slots.default(data));
+    };
+  }
+});
+function useElementHover(el) {
+  const isHovered = ref(false);
+  useEventListener(el, "mouseenter", () => isHovered.value = true);
+  useEventListener(el, "mouseleave", () => isHovered.value = false);
+  return isHovered;
+}
+({
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function") {
+      const isHovered = useElementHover(el);
+      watch(isHovered, (v) => binding.value(v));
+    }
+  }
+});
+defineComponent({
+  name: "UseElementSize",
+  props: ["width", "height", "box"],
+  setup(props, { slots }) {
+    const target = ref();
+    const data = reactive(useElementSize$1(target, { width: props.width, height: props.height }, { box: props.box }));
+    return () => {
+      if (slots.default)
+        return h(props.as || "div", { ref: target }, slots.default(data));
+    };
+  }
+});
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function useResizeObserver(target, callback, options = {}) {
+  const _a2 = options, { window: window2 = defaultWindow } = _a2, observerOptions = __objRest(_a2, ["window"]);
+  let observer;
+  const isSupported = window2 && "ResizeObserver" in window2;
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (isSupported && window2 && el) {
+      observer = new ResizeObserver(callback);
+      observer.observe(el, observerOptions);
+    }
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+  const width = ref(initialSize.width);
+  const height = ref(initialSize.height);
+  useResizeObserver(target, ([entry]) => {
+    width.value = entry.contentRect.width;
+    height.value = entry.contentRect.height;
+  }, options);
+  watch(() => unrefElement(target), (ele) => {
+    width.value = ele ? initialSize.width : 0;
+    height.value = ele ? initialSize.height : 0;
+  });
+  return {
+    width,
+    height
+  };
+}
+({
+  [directiveHooks.mounted](el, binding) {
+    var _a2;
+    const handler = typeof binding.value === "function" ? binding.value : (_a2 = binding.value) == null ? void 0 : _a2[0];
+    const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
+    const { width, height } = useElementSize(el, ...options);
+    watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+  }
+});
+defineComponent({
+  name: "UseElementVisibility",
+  props: ["as"],
+  setup(props, { slots }) {
+    const target = ref();
+    const data = reactive({
+      isVisible: useElementVisibility$1(target)
+    });
+    return () => {
+      if (slots.default)
+        return h(props.as || "div", { ref: target }, slots.default(data));
+    };
+  }
+});
+function useElementVisibility(element, { window: window2 = defaultWindow, scrollTarget } = {}) {
+  const elementIsVisible = ref(false);
+  const testBounding = () => {
+    if (!window2)
+      return;
+    const document2 = window2.document;
+    if (!unref(element)) {
+      elementIsVisible.value = false;
+    } else {
+      const rect = unref(element).getBoundingClientRect();
+      elementIsVisible.value = rect.top <= (window2.innerHeight || document2.documentElement.clientHeight) && rect.left <= (window2.innerWidth || document2.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
+    }
+  };
+  tryOnMounted(testBounding);
+  if (window2)
+    tryOnMounted(() => useEventListener(unref(scrollTarget) || window2, "scroll", testBounding, { capture: false, passive: true }));
+  return elementIsVisible;
+}
+({
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function") {
+      const handler = binding.value;
+      const isVisible = useElementVisibility(el);
+      watch(isVisible, (v) => handler(v), { immediate: true });
+    } else {
+      const [handler, options] = binding.value;
+      const isVisible = useElementVisibility(el, options);
+      watch(isVisible, (v) => handler(v), { immediate: true });
+    }
+  }
+});
+defineComponent({
+  name: "UseEyeDropper",
+  props: {
+    sRGBHex: String
+  },
+  setup(props, { slots }) {
+    const data = reactive(useEyeDropper());
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseFullscreen",
+  props: ["as"],
+  setup(props, { slots }) {
+    const target = ref();
+    const data = reactive(useFullscreen(target));
+    return () => {
+      if (slots.default)
+        return h(props.as || "div", { ref: target }, slots.default(data));
+    };
+  }
+});
+defineComponent({
+  name: "UseGeolocation",
+  props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
+  setup(props, { slots }) {
+    const data = reactive(useGeolocation(props));
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseIdle",
+  props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
+  setup(props, { slots }) {
+    const data = reactive(useIdle(props.timeout, props));
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+function useAsyncState(promise, initialState, options) {
+  const {
     immediate = true,
-    direction = "both"
-  } = options;
-  let stop1, stop2;
-  if (direction === "both" || direction === "ltr") {
-    stop1 = watch(left, (newValue) => right.value = newValue, { flush, deep, immediate });
-  }
-  if (direction === "both" || direction === "rtl") {
-    stop2 = watch(right, (newValue) => left.value = newValue, { flush, deep, immediate });
+    delay = 0,
+    onError = noop,
+    resetOnExecute = true,
+    shallow = true
+  } = options != null ? options : {};
+  const state = shallow ? shallowRef(initialState) : ref(initialState);
+  const isReady = ref(false);
+  const isLoading = ref(false);
+  const error = ref(void 0);
+  async function execute(delay2 = 0, ...args) {
+    if (resetOnExecute)
+      state.value = initialState;
+    error.value = void 0;
+    isReady.value = false;
+    isLoading.value = true;
+    if (delay2 > 0)
+      await promiseTimeout(delay2);
+    const _promise = typeof promise === "function" ? promise(...args) : promise;
+    try {
+      const data = await _promise;
+      state.value = data;
+      isReady.value = true;
+    } catch (e) {
+      error.value = e;
+      onError(e);
+    } finally {
+      isLoading.value = false;
+    }
+    return state.value;
   }
-  return () => {
-    stop1 == null ? void 0 : stop1();
-    stop2 == null ? void 0 : stop2();
+  if (immediate)
+    execute(delay);
+  return {
+    state,
+    isReady,
+    isLoading,
+    error,
+    execute
   };
 }
-isClient ? window : void 0;
-isClient ? window.document : void 0;
-isClient ? window.navigator : void 0;
-isClient ? window.location : void 0;
-function useClamp(value, min, max) {
-  const _value = ref(value);
-  return computed({
-    get() {
-      return _value.value = clamp(_value.value, unref(min), unref(max));
-    },
-    set(value2) {
-      _value.value = clamp(value2, unref(min), unref(max));
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
+  return a;
+};
+async function loadImage(options) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const { src, srcset, sizes } = options;
+    img.src = src;
+    if (srcset)
+      img.srcset = srcset;
+    if (sizes)
+      img.sizes = sizes;
+    img.onload = () => resolve(img);
+    img.onerror = reject;
   });
 }
-const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-const globalKey = "__vueuse_ssr_handlers__";
-_global[globalKey] = _global[globalKey] || {};
-_global[globalKey];
-function useOffsetPagination(options) {
+const useImage = (options, asyncStateOptions = {}) => {
+  const state = useAsyncState(() => loadImage(unref(options)), void 0, __spreadValues$9({
+    resetOnExecute: true
+  }, asyncStateOptions));
+  watch(() => unref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
+  return state;
+};
+defineComponent({
+  name: "UseImage",
+  props: [
+    "src",
+    "srcset",
+    "sizes",
+    "as"
+  ],
+  setup(props, { slots }) {
+    const data = reactive(useImage(props));
+    return () => {
+      if (data.isLoading && slots.loading)
+        return slots.loading(data);
+      else if (data.error && slots.error)
+        return slots.error(data.error);
+      if (slots.default)
+        return slots.default(data);
+      return h(props.as || "img", props);
+    };
+  }
+});
+function useScroll(element, options = {}) {
   const {
-    total = Infinity,
-    pageSize = 10,
-    page = 1,
-    onPageChange = noop,
-    onPageSizeChange = noop,
-    onPageCountChange = noop
+    throttle = 0,
+    idle = 200,
+    onStop = noop,
+    onScroll = noop,
+    offset = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    },
+    eventListenerOptions = {
+      capture: false,
+      passive: true
+    }
   } = options;
-  const currentPageSize = useClamp(pageSize, 1, Infinity);
-  const pageCount = computed(() => Math.ceil(unref(total) / unref(currentPageSize)));
-  const currentPage = useClamp(page, 1, pageCount);
-  const isFirstPage = computed(() => currentPage.value === 1);
-  const isLastPage = computed(() => currentPage.value === pageCount.value);
-  if (isRef(page))
-    syncRef(page, currentPage);
-  if (isRef(pageSize))
-    syncRef(pageSize, currentPageSize);
-  function prev() {
-    currentPage.value--;
+  const x = ref(0);
+  const y = ref(0);
+  const isScrolling = ref(false);
+  const arrivedState = reactive({
+    left: true,
+    right: false,
+    top: true,
+    bottom: false
+  });
+  const directions = reactive({
+    left: false,
+    right: false,
+    top: false,
+    bottom: false
+  });
+  if (element) {
+    const onScrollEnd = useDebounceFn((e) => {
+      isScrolling.value = false;
+      directions.left = false;
+      directions.right = false;
+      directions.top = false;
+      directions.bottom = false;
+      onStop(e);
+    }, throttle + idle);
+    const onScrollHandler = (e) => {
+      const eventTarget = e.target === document ? e.target.documentElement : e.target;
+      const scrollLeft = eventTarget.scrollLeft;
+      directions.left = scrollLeft < x.value;
+      directions.right = scrollLeft > x.value;
+      arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
+      arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0);
+      x.value = scrollLeft;
+      let scrollTop = eventTarget.scrollTop;
+      if (e.target === document && !scrollTop)
+        scrollTop = document.body.scrollTop;
+      directions.top = scrollTop < y.value;
+      directions.bottom = scrollTop > y.value;
+      arrivedState.top = scrollTop <= 0 + (offset.top || 0);
+      arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0);
+      y.value = scrollTop;
+      isScrolling.value = true;
+      onScrollEnd(e);
+      onScroll(e);
+    };
+    useEventListener(element, "scroll", throttle ? useThrottleFn(onScrollHandler, throttle) : onScrollHandler, eventListenerOptions);
   }
-  function next() {
-    currentPage.value++;
+  return {
+    x,
+    y,
+    isScrolling,
+    arrivedState,
+    directions
+  };
+}
+var __defProp$8 = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+function useInfiniteScroll(element, onLoadMore, options = {}) {
+  var _a2, _b;
+  const direction = (_a2 = options.direction) != null ? _a2 : "bottom";
+  const state = reactive(useScroll(element, __spreadProps$7(__spreadValues$8({}, options), {
+    offset: __spreadValues$8({
+      [direction]: (_b = options.distance) != null ? _b : 0
+    }, options.offset)
+  })));
+  watch(() => state.arrivedState[direction], async (v) => {
+    var _a22, _b2;
+    if (v) {
+      const elem = unref(element);
+      const previous = {
+        height: (_a22 = elem == null ? void 0 : elem.scrollHeight) != null ? _a22 : 0,
+        width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
+      };
+      await onLoadMore(state);
+      if (options.preserveScrollPosition && elem) {
+        nextTick(() => {
+          elem.scrollTo({
+            top: elem.scrollHeight - previous.height,
+            left: elem.scrollWidth - previous.width
+          });
+        });
+      }
+    }
+  });
+}
+({
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function")
+      useInfiniteScroll(el, binding.value);
+    else
+      useInfiniteScroll(el, ...binding.value);
   }
-  const returnValue = {
-    currentPage,
-    currentPageSize,
-    pageCount,
-    isFirstPage,
-    isLastPage,
-    prev,
-    next
+});
+function useIntersectionObserver(target, callback, options = {}) {
+  const {
+    root,
+    rootMargin = "0px",
+    threshold = 0.1,
+    window: window2 = defaultWindow
+  } = options;
+  const isSupported = window2 && "IntersectionObserver" in window2;
+  let cleanup = noop;
+  const stopWatch = isSupported ? watch(() => ({
+    el: unrefElement(target),
+    root: unrefElement(root)
+  }), ({ el, root: root2 }) => {
+    cleanup();
+    if (!el)
+      return;
+    const observer = new IntersectionObserver(callback, {
+      root: root2,
+      rootMargin,
+      threshold
+    });
+    observer.observe(el);
+    cleanup = () => {
+      observer.disconnect();
+      cleanup = noop;
+    };
+  }, { immediate: true, flush: "post" }) : noop;
+  const stop = () => {
+    cleanup();
+    stopWatch();
   };
-  watch(currentPage, () => {
-    onPageChange(reactive(returnValue));
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+({
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function")
+      useIntersectionObserver(el, binding.value);
+    else
+      useIntersectionObserver(el, ...binding.value);
+  }
+});
+defineComponent({
+  name: "UseMouse",
+  props: ["touch", "resetOnTouchEnds", "initialValue"],
+  setup(props, { slots }) {
+    const data = reactive(useMouse(props));
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseMouseElement",
+  props: ["handleOutside", "as"],
+  setup(props, { slots }) {
+    const target = ref();
+    const data = reactive(useMouseInElement(target, props));
+    return () => {
+      if (slots.default)
+        return h(props.as || "div", { ref: target }, slots.default(data));
+    };
+  }
+});
+var __defProp$7 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+defineComponent({
+  name: "UseMousePressed",
+  props: ["touch", "initialValue", "as"],
+  setup(props, { slots }) {
+    const target = ref();
+    const data = reactive(useMousePressed(__spreadProps$6(__spreadValues$7({}, props), { target })));
+    return () => {
+      if (slots.default)
+        return h(props.as || "div", { ref: target }, slots.default(data));
+    };
+  }
+});
+defineComponent({
+  name: "UseNetwork",
+  setup(props, { slots }) {
+    const data = reactive(useNetwork());
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+var __defProp$6 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+defineComponent({
+  name: "UseNow",
+  props: ["interval"],
+  setup(props, { slots }) {
+    const data = reactive(useNow(__spreadProps$5(__spreadValues$6({}, props), { controls: true })));
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseObjectUrl",
+  props: [
+    "object"
+  ],
+  setup(props, { slots }) {
+    const object = toRef(props, "object");
+    const url = useObjectUrl(object);
+    return () => {
+      if (slots.default && url.value)
+        return slots.default(url);
+    };
+  }
+});
+var __defProp$5 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+const UseOffsetPagination = defineComponent({
+  name: "UseOffsetPagination",
+  props: [
+    "total",
+    "page",
+    "pageSize",
+    "onPageChange",
+    "onPageSizeChange",
+    "onPageCountChange"
+  ],
+  emits: [
+    "page-change",
+    "page-size-change",
+    "page-count-change"
+  ],
+  setup(props, { slots, emit }) {
+    const data = reactive(useOffsetPagination(__spreadProps$4(__spreadValues$5({}, props), {
+      onPageChange(...args) {
+        var _a2;
+        (_a2 = props.onPageChange) == null ? void 0 : _a2.call(props, ...args);
+        emit("page-change", ...args);
+      },
+      onPageSizeChange(...args) {
+        var _a2;
+        (_a2 = props.onPageSizeChange) == null ? void 0 : _a2.call(props, ...args);
+        emit("page-size-change", ...args);
+      },
+      onPageCountChange(...args) {
+        var _a2;
+        (_a2 = props.onPageCountChange) == null ? void 0 : _a2.call(props, ...args);
+        emit("page-count-change", ...args);
+      }
+    })));
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseOnline",
+  setup(props, { slots }) {
+    const data = reactive({
+      isOnline: useOnline()
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UsePageLeave",
+  setup(props, { slots }) {
+    const data = reactive({
+      isLeft: usePageLeave()
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+var __defProp$4 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+defineComponent({
+  name: "UsePointer",
+  props: [
+    "pointerTypes",
+    "initialValue",
+    "target"
+  ],
+  setup(props, { slots }) {
+    const el = ref(null);
+    const data = reactive(usePointer(__spreadProps$3(__spreadValues$4({}, props), {
+      target: props.target === "self" ? el : defaultWindow
+    })));
+    return () => {
+      if (slots.default)
+        return slots.default(data, { ref: el });
+    };
+  }
+});
+defineComponent({
+  name: "UsePreferredColorScheme",
+  setup(props, { slots }) {
+    const data = reactive({
+      colorScheme: usePreferredColorScheme()
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UsePreferredDark",
+  setup(props, { slots }) {
+    const data = reactive({
+      prefersDark: usePreferredDark$1()
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UsePreferredLanguages",
+  setup(props, { slots }) {
+    const data = reactive({
+      languages: usePreferredLanguages()
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+function useCssVar(prop, target, { window: window2 = defaultWindow, initialValue = "" } = {}) {
+  const variable = ref(initialValue);
+  const elRef = computed(() => {
+    var _a2;
+    return unrefElement(target) || ((_a2 = window2 == null ? void 0 : window2.document) == null ? void 0 : _a2.documentElement);
   });
-  watch(currentPageSize, () => {
-    onPageSizeChange(reactive(returnValue));
+  watch([elRef, () => unref(prop)], ([el, prop2]) => {
+    var _a2;
+    if (el && window2) {
+      const value = (_a2 = window2.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a2.trim();
+      variable.value = value || initialValue;
+    }
+  }, { immediate: true });
+  watch(variable, (val) => {
+    var _a2;
+    if ((_a2 = elRef.value) == null ? void 0 : _a2.style)
+      elRef.value.style.setProperty(unref(prop), val);
   });
-  watch(pageCount, () => {
-    onPageCountChange(reactive(returnValue));
+  return variable;
+}
+const topVarName = "--vueuse-safe-area-top";
+const rightVarName = "--vueuse-safe-area-right";
+const bottomVarName = "--vueuse-safe-area-bottom";
+const leftVarName = "--vueuse-safe-area-left";
+function useScreenSafeArea() {
+  const top = ref("");
+  const right = ref("");
+  const bottom = ref("");
+  const left = ref("");
+  if (isClient) {
+    const topCssVar = useCssVar(topVarName);
+    const rightCssVar = useCssVar(rightVarName);
+    const bottomCssVar = useCssVar(bottomVarName);
+    const leftCssVar = useCssVar(leftVarName);
+    topCssVar.value = "env(safe-area-inset-top, 0px)";
+    rightCssVar.value = "env(safe-area-inset-right, 0px)";
+    bottomCssVar.value = "env(safe-area-inset-bottom, 0px)";
+    leftCssVar.value = "env(safe-area-inset-left, 0px)";
+    update();
+    useEventListener("resize", useDebounceFn(update));
+  }
+  function update() {
+    top.value = getValue(topVarName);
+    right.value = getValue(rightVarName);
+    bottom.value = getValue(bottomVarName);
+    left.value = getValue(leftVarName);
+  }
+  return {
+    top,
+    right,
+    bottom,
+    left,
+    update
+  };
+}
+function getValue(position) {
+  return getComputedStyle(document.documentElement).getPropertyValue(position);
+}
+defineComponent({
+  name: "UseScreenSafeArea",
+  props: {
+    top: Boolean,
+    right: Boolean,
+    bottom: Boolean,
+    left: Boolean
+  },
+  setup(props, { slots }) {
+    const {
+      top,
+      right,
+      bottom,
+      left
+    } = useScreenSafeArea();
+    return () => {
+      if (slots.default) {
+        return h("div", {
+          style: {
+            paddingTop: props.top ? top.value : "",
+            paddingRight: props.right ? right.value : "",
+            paddingBottom: props.bottom ? bottom.value : "",
+            paddingLeft: props.left ? left.value : "",
+            boxSizing: "border-box",
+            maxHeight: "100vh",
+            maxWidth: "100vw",
+            overflow: "auto"
+          }
+        }, slots.default());
+      }
+    };
+  }
+});
+var __defProp$3 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+({
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function") {
+      const handler = binding.value;
+      const state = useScroll(el, {
+        onScroll() {
+          handler(state);
+        },
+        onStop() {
+          handler(state);
+        }
+      });
+    } else {
+      const [handler, options] = binding.value;
+      const state = useScroll(el, __spreadProps$2(__spreadValues$3({}, options), {
+        onScroll(e) {
+          var _a2;
+          (_a2 = options.onScroll) == null ? void 0 : _a2.call(options, e);
+          handler(state);
+        },
+        onStop(e) {
+          var _a2;
+          (_a2 = options.onStop) == null ? void 0 : _a2.call(options, e);
+          handler(state);
+        }
+      }));
+    }
+  }
+});
+function preventDefault(rawEvent) {
+  const e = rawEvent || window.event;
+  if (e.touches.length > 1)
+    return true;
+  if (e.preventDefault)
+    e.preventDefault();
+  return false;
+}
+function useScrollLock(element, initialState = false) {
+  const isLocked = ref(initialState);
+  let stopTouchMoveListener = null;
+  let initialOverflow;
+  watch(() => unref(element), (el) => {
+    if (el) {
+      const ele = el;
+      initialOverflow = ele.style.overflow;
+      if (isLocked.value)
+        ele.style.overflow = "hidden";
+    }
+  }, {
+    immediate: true
+  });
+  const lock = () => {
+    const ele = unref(element);
+    if (!ele || isLocked.value)
+      return;
+    if (isIOS) {
+      stopTouchMoveListener = useEventListener(ele, "touchmove", preventDefault, { passive: false });
+    }
+    ele.style.overflow = "hidden";
+    isLocked.value = true;
+  };
+  const unlock = () => {
+    const ele = unref(element);
+    if (!ele || !isLocked.value)
+      return;
+    isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
+    ele.style.overflow = initialOverflow;
+    isLocked.value = false;
+  };
+  tryOnScopeDispose(unlock);
+  return computed({
+    get() {
+      return isLocked.value;
+    },
+    set(v) {
+      if (v)
+        lock();
+      else
+        unlock();
+    }
   });
-  return returnValue;
 }
-var SwipeDirection;
-(function(SwipeDirection2) {
-  SwipeDirection2["UP"] = "UP";
-  SwipeDirection2["RIGHT"] = "RIGHT";
-  SwipeDirection2["DOWN"] = "DOWN";
-  SwipeDirection2["LEFT"] = "LEFT";
-  SwipeDirection2["NONE"] = "NONE";
-})(SwipeDirection || (SwipeDirection = {}));
+const onScrollLock = () => {
+  let isMounted = false;
+  const state = ref(false);
+  return (el, binding) => {
+    state.value = binding.value;
+    if (isMounted)
+      return;
+    isMounted = true;
+    const isLocked = useScrollLock(el, binding.value);
+    watch(state, (v) => isLocked.value = v);
+  };
+};
+onScrollLock();
+var __defProp$2 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+defineComponent({
+  name: "UseTimeAgo",
+  props: ["time", "updateInterval", "max", "fullDateFormatter", "messages"],
+  setup(props, { slots }) {
+    const time = toRef(props, "time");
+    const data = reactive(useTimeAgo(time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+var __defProp$1 = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+defineComponent({
+  name: "UseTimestamp",
+  props: ["immediate", "interval", "offset"],
+  setup(props, { slots }) {
+    const data = reactive(useTimestamp(__spreadProps(__spreadValues$1({}, props), { controls: true })));
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
+defineComponent({
+  name: "UseVirtualList",
+  props: [
+    "list",
+    "options",
+    "height"
+  ],
+  setup(props, { slots }) {
+    const { list: listRef } = toRefs$1(props);
+    const { list, containerProps, wrapperProps } = useVirtualList(listRef, props.options);
+    containerProps.style.height = props.height || "300px";
+    return () => h("div", __spreadValues2({}, containerProps), [
+      h("div", __spreadValues2({}, wrapperProps.value), list.value.map((item) => h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
+    ]);
+  }
+});
+defineComponent({
+  name: "UseWindowFocus",
+  setup(props, { slots }) {
+    const data = reactive({
+      focused: useWindowFocus()
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+defineComponent({
+  name: "UseWindowSize",
+  props: ["initialWidth", "initialHeight"],
+  setup(props, { slots }) {
+    const data = reactive(useWindowSize(props));
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
 const _hoisted_1 = { class: "bg-white flex items-center justify-between" };
 const _hoisted_2 = { class: "flex-1 flex justify-between sm:hidden items-center" };
-const _hoisted_3 = { class: "text-sm text-gray-500" };
-const _hoisted_4 = { class: "hidden sm:flex-1 sm:flex sm:items-center" };
-const _hoisted_5 = {
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "text-sm text-gray-500" };
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { class: "hidden sm:flex-1 sm:flex sm:items-center" };
+const _hoisted_7 = {
   "aria-label": "Pagination",
-  class: "relative z-0 inline-flex rounded-[4px] shadow-sm -space-x-px"
+  class: "relative z-0 inline-flex rounded-base shadow-sm -space-x-px"
 };
-const _hoisted_6 = ["onClick"];
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Pagination",
   props: {
@@ -2236,69 +5836,77 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:page", "update:size", "change"],
   setup(__props, { emit }) {
     const props = __props;
+    const { page, size, total } = toRefs$1(props);
+    const key = ref(Math.random());
     const onPageChange = ({
-      currentPage: currentPage2,
+      currentPage,
       currentPageSize
     }) => {
-      emit("update:size", props.size);
-      emit("update:page", props.page);
       emit("change", {
-        page: currentPage2,
+        page: currentPage,
         size: currentPageSize
       });
     };
-    const { currentPage, pageCount, prev, next } = useOffsetPagination({
-      total: props.total,
-      page: props.page,
-      pageSize: props.size,
-      onPageChange,
-      onPageSizeChange: onPageChange
+    watch(() => total == null ? void 0 : total.value, () => {
+      key.value = Math.random();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("span", {
-            class: "relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 cursor-pointer",
-            onClick: _cache[0] || (_cache[0] = (...args) => unref(prev) && unref(prev)(...args))
-          }, [
-            createVNode(unref(IconArrowLeft))
-          ]),
-          createElementVNode("span", _hoisted_3, toDisplayString(unref(currentPage)) + " / " + toDisplayString(unref(pageCount)), 1),
-          createElementVNode("span", {
-            class: "ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 cursor-pointer",
-            onClick: _cache[1] || (_cache[1] = (...args) => unref(next) && unref(next)(...args))
-          }, [
-            createVNode(unref(IconArrowRight))
-          ])
-        ]),
-        createElementVNode("div", _hoisted_4, [
-          createElementVNode("nav", _hoisted_5, [
-            createElementVNode("span", {
-              class: "relative inline-flex items-center px-2 py-2 rounded-l-[4px] border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer",
-              onClick: _cache[2] || (_cache[2] = (...args) => unref(prev) && unref(prev)(...args))
-            }, [
-              createVNode(unref(IconArrowLeft))
+      return openBlock(), createBlock(unref(UseOffsetPagination), {
+        key: key.value,
+        page: unref(page),
+        pageSize: unref(size),
+        total: unref(total),
+        onPageChange,
+        onPageSizeChange: onPageChange
+      }, {
+        default: withCtx(({ currentPage, next, prev, pageCount }) => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("span", {
+                class: "relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 cursor-pointer",
+                onClick: prev
+              }, [
+                createVNode(unref(IconArrowLeft))
+              ], 8, _hoisted_3),
+              createElementVNode("span", _hoisted_4, toDisplayString(currentPage) + " / " + toDisplayString(pageCount), 1),
+              createElementVNode("span", {
+                class: "ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 cursor-pointer",
+                onClick: next
+              }, [
+                createVNode(unref(IconArrowRight))
+              ], 8, _hoisted_5)
             ]),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pageCount), (i) => {
-              return openBlock(), createElementBlock("span", {
-                key: i,
-                class: normalizeClass([{
-                  "z-10 bg-themeable-primary-50 border-themeable-primary-500 text-themeable-primary-600": i === unref(currentPage),
-                  "bg-white border-gray-300 text-gray-500 hover:bg-gray-50 ": i !== unref(currentPage)
-                }, "relative inline-flex items-center px-4 py-2 border text-sm font-medium cursor-pointer select-none"]),
-                "aria-current": "page",
-                onClick: ($event) => currentPage.value = i
-              }, toDisplayString(i), 11, _hoisted_6);
-            }), 128)),
-            createElementVNode("span", {
-              class: "relative inline-flex items-center px-2 py-2 rounded-r-[4px] border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer",
-              onClick: _cache[3] || (_cache[3] = (...args) => unref(next) && unref(next)(...args))
-            }, [
-              createVNode(unref(IconArrowRight))
+            createElementVNode("div", _hoisted_6, [
+              createElementVNode("nav", _hoisted_7, [
+                createElementVNode("span", {
+                  class: "relative inline-flex items-center px-2 py-2 rounded-l-[4px] border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer",
+                  onClick: prev
+                }, [
+                  createVNode(unref(IconArrowLeft))
+                ], 8, _hoisted_8),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(pageCount, (i) => {
+                  return openBlock(), createElementBlock("span", {
+                    key: i,
+                    class: normalizeClass([{
+                      "z-10 bg-primary/1 border-primary text-primary": i === currentPage,
+                      "bg-white border-gray-300 text-gray-500 hover:bg-gray-50": i !== currentPage
+                    }, "relative inline-flex items-center px-4 py-2 border text-sm font-medium cursor-pointer select-none"]),
+                    "aria-current": "page",
+                    onClick: ($event) => currentPage.value = i
+                  }, toDisplayString(i), 11, _hoisted_9);
+                }), 128)),
+                createElementVNode("span", {
+                  class: "relative inline-flex items-center px-2 py-2 rounded-r-[4px] border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer",
+                  onClick: next
+                }, [
+                  createVNode(unref(IconArrowRight))
+                ], 8, _hoisted_10)
+              ])
             ])
           ])
-        ])
-      ]);
+        ]),
+        _: 1
+      }, 8, ["page", "pageSize", "total"]);
     };
   }
 });