@vueuse/components 7.2.2 → 7.4.2

package/index.cjs

@@ -123,6 +123,232 @@ const UseBrowserLocation = vueDemi.defineComponent({
   }
 });
 
+const globalKey = "__vueuse_ssr_handlers__";
+globalThis[globalKey] = globalThis[globalKey] || {};
+const handlers = globalThis[globalKey];
+function getSSRHandler(key, fallback) {
+  return handlers[key] || fallback;
+}
+
+function guessSerializerType(rawInit) {
+  return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : 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.entries()))
+  }
+};
+function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorage", () => {
+  var _a;
+  return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+})(), options = {}) {
+  var _a;
+  const {
+    flush = "pre",
+    deep = true,
+    listenToStorageChanges = true,
+    writeDefaults = true,
+    shallow,
+    window = defaultWindow,
+    eventFilter,
+    onError = (e) => {
+      console.error(e);
+    }
+  } = options;
+  const rawInit = vueDemi.unref(initialValue);
+  const type = guessSerializerType(rawInit);
+  const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(initialValue);
+  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
+  function read(event) {
+    if (!storage || event && event.key !== key)
+      return;
+    try {
+      const rawValue = event ? event.newValue : storage.getItem(key);
+      if (rawValue == null) {
+        data.value = rawInit;
+        if (writeDefaults && rawInit !== null)
+          storage.setItem(key, serializer.write(rawInit));
+      } else if (typeof rawValue !== "string") {
+        data.value = rawValue;
+      } else {
+        data.value = serializer.read(rawValue);
+      }
+    } catch (e) {
+      onError(e);
+    }
+  }
+  read();
+  if (window && listenToStorageChanges)
+    useEventListener(window, "storage", (e) => setTimeout(() => read(e), 0));
+  if (storage) {
+    shared.watchWithFilter(data, () => {
+      try {
+        if (data.value == null)
+          storage.removeItem(key);
+        else
+          storage.setItem(key, serializer.write(data.value));
+      } catch (e) {
+        onError(e);
+      }
+    }, {
+      flush,
+      deep,
+      eventFilter
+    });
+  }
+  return data;
+}
+
+function useMediaQuery(query, options = {}) {
+  const { window = defaultWindow } = options;
+  let mediaQuery;
+  const matches = vueDemi.ref(false);
+  const update = () => {
+    if (!window)
+      return;
+    if (!mediaQuery)
+      mediaQuery = window.matchMedia(query);
+    matches.value = mediaQuery.matches;
+  };
+  shared.tryOnMounted(() => {
+    update();
+    if (!mediaQuery)
+      return;
+    if ("addEventListener" in mediaQuery)
+      mediaQuery.addEventListener("change", update);
+    else
+      mediaQuery.addListener(update);
+    shared.tryOnScopeDispose(() => {
+      if ("removeEventListener" in update)
+        mediaQuery.removeEventListener("change", update);
+      else
+        mediaQuery.removeListener(update);
+    });
+  });
+  return matches;
+}
+
+function usePreferredDark(options) {
+  return useMediaQuery("(prefers-color-scheme: dark)", options);
+}
+
+var __defProp$7 = Object.defineProperty;
+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;
+};
+function useColorMode(options = {}) {
+  const {
+    selector = "html",
+    attribute = "class",
+    window = defaultWindow,
+    storage = getSSRHandler("getDefaultStorage", () => {
+      var _a;
+      return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+    })(),
+    storageKey = "vueuse-color-scheme",
+    listenToStorageChanges = true,
+    storageRef
+  } = options;
+  const modes = __spreadValues$7({
+    auto: "",
+    light: "light",
+    dark: "dark"
+  }, options.modes || {});
+  const preferredDark = usePreferredDark({ window });
+  const preferredMode = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
+  const store = storageRef || (storageKey == null ? vueDemi.ref("auto") : useStorage(storageKey, "auto", storage, { window, listenToStorageChanges }));
+  const state = vueDemi.computed({
+    get() {
+      return store.value === "auto" ? preferredMode.value : store.value;
+    },
+    set(v) {
+      store.value = v;
+    }
+  });
+  const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector2, attribute2, value) => {
+    const el = window == null ? void 0 : window.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 _a;
+    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
+  }
+  function onChanged(mode) {
+    if (options.onChanged)
+      options.onChanged(mode, defaultOnChanged);
+    else
+      defaultOnChanged(mode);
+  }
+  vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
+  shared.tryOnMounted(() => onChanged(state.value));
+  return state;
+}
+
+const UseColorMode = vueDemi.defineComponent({
+  name: "UseColorMode",
+  props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage"],
+  setup(props, { slots }) {
+    const mode = useColorMode(props);
+    const data = vueDemi.reactive({
+      mode
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+
 const UseDark = vueDemi.defineComponent({
   name: "UseDark",
   props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
@@ -535,6 +761,97 @@ const UsePreferredLanguages = vueDemi.defineComponent({
   }
 });
 
+function useCssVar(prop, target, { window = defaultWindow } = {}) {
+  const variable = vueDemi.ref("");
+  const elRef = vueDemi.computed(() => {
+    var _a;
+    return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+  });
+  vueDemi.watch(elRef, (el) => {
+    if (el && window)
+      variable.value = window.getComputedStyle(el).getPropertyValue(prop);
+  }, { immediate: true });
+  vueDemi.watch(variable, (val) => {
+    var _a;
+    if ((_a = elRef.value) == null ? void 0 : _a.style)
+      elRef.value.style.setProperty(prop, val);
+  });
+  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 = vueDemi.ref("");
+  const right = vueDemi.ref("");
+  const bottom = vueDemi.ref("");
+  const left = vueDemi.ref("");
+  if (shared.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", shared.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);
+}
+
+const UseScreenSafeArea = vueDemi.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 vueDemi.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$2 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
@@ -558,7 +875,7 @@ const UseTimeAgo = vueDemi.defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages"],
   setup(props, { slots }) {
-    const { time } = vueDemi.toRefs(props);
+    const time = vueDemi.toRef(props, "time");
     const data = vueDemi.reactive(core.useTimeAgo(time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
     return () => {
       if (slots.default)
@@ -660,6 +977,7 @@ exports.OnClickOutside = OnClickOutside;
 exports.UseActiveElement = UseActiveElement;
 exports.UseBattery = UseBattery;
 exports.UseBrowserLocation = UseBrowserLocation;
+exports.UseColorMode = UseColorMode;
 exports.UseDark = UseDark;
 exports.UseDeviceMotion = UseDeviceMotion;
 exports.UseDeviceOrientation = UseDeviceOrientation;
@@ -685,6 +1003,7 @@ exports.UsePointer = UsePointer;
 exports.UsePreferredColorScheme = UsePreferredColorScheme;
 exports.UsePreferredDark = UsePreferredDark;
 exports.UsePreferredLanguages = UsePreferredLanguages;
+exports.UseScreenSafeArea = UseScreenSafeArea;
 exports.UseTimeAgo = UseTimeAgo;
 exports.UseTimestamp = UseTimestamp;
 exports.UseVirtualList = UseVirtualList;

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue_demi from 'vue-demi';
-import { FunctionDirective } from 'vue-demi';
-import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, TimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
-import { MaybeRef } from '@vueuse/shared';
+import { FunctionDirective, Ref } from 'vue-demi';
+import { ConfigurableEventFilter, ConfigurableFlush, MaybeRef } from '@vueuse/shared';
+import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
 
 interface ConfigurableWindow {
     window?: Window;
@@ -35,6 +35,102 @@ declare const UseBrowserLocation: vue_demi.DefineComponent<{}, () => vue_demi.VN
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
 
+interface StorageLike {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+}
+
+declare type Serializer<T> = {
+    read(raw: string): T;
+    write(value: T): string;
+};
+interface StorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
+    /**
+     * Watch for deep changes
+     *
+     * @default true
+     */
+    deep?: boolean;
+    /**
+     * Listen to storage changes, useful for multiple tabs application
+     *
+     * @default true
+     */
+    listenToStorageChanges?: boolean;
+    /**
+     * Write the default value to the storage when it does not existed
+     *
+     * @default true
+     */
+    writeDefaults?: boolean;
+    /**
+     * Custom data serialization
+     */
+    serializer?: Serializer<T>;
+    /**
+     * On error callback
+     *
+     * Default log error to `console.error`
+     */
+    onError?: (error: unknown) => void;
+    /**
+     * Use shallow ref as reference
+     *
+     * @default false
+     */
+    shallow?: boolean;
+}
+
+declare type BasicColorSchema = 'light' | 'dark' | 'auto';
+interface UseColorModeOptions<T extends string = BasicColorSchema> extends StorageOptions<T | BasicColorSchema> {
+    /**
+     * CSS Selector for the target element applying to
+     *
+     * @default 'html'
+     */
+    selector?: string;
+    /**
+     * HTML attribute applying the target element
+     *
+     * @default 'class'
+     */
+    attribute?: string;
+    /**
+     * Prefix when adding value to the attribute
+     */
+    modes?: Partial<Record<T | BasicColorSchema, string>>;
+    /**
+     * A custom handler for handle the updates.
+     * When specified, the default behavior will be overridded.
+     *
+     * @default undefined
+     */
+    onChanged?: (mode: T | BasicColorSchema, defaultHandler: ((mode: T | BasicColorSchema) => void)) => void;
+    /**
+     * Custom storage ref
+     *
+     * When provided, `useStorage` will be skipped
+     */
+    storageRef?: Ref<T | BasicColorSchema>;
+    /**
+     * Key to persist the data into localStorage/sessionStorage.
+     *
+     * Pass `null` to disable persistence
+     *
+     * @default 'vueuse-color-scheme'
+     */
+    storageKey?: string | null;
+    /**
+     * Storage object, can be localStorage or sessionStorage
+     *
+     * @default localStorage
+     */
+    storage?: StorageLike;
+}
+
+declare const UseColorMode: vue_demi.DefineComponent<UseColorModeOptions<BasicColorSchema>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseColorModeOptions<BasicColorSchema>>, {}>;
+
 declare const UseDark: vue_demi.DefineComponent<UseDarkOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDarkOptions>, {}>;
 
 declare const UseDeviceMotion: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
@@ -143,7 +239,31 @@ declare const UsePreferredLanguages: vue_demi.DefineComponent<{}, () => vue_demi
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
 
-interface UseTimeAgoComponentOptions extends Omit<TimeAgoOptions<true>, 'controls'> {
+declare const UseScreenSafeArea: vue_demi.DefineComponent<{
+    top: BooleanConstructor;
+    right: BooleanConstructor;
+    bottom: BooleanConstructor;
+    left: BooleanConstructor;
+}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+    [key: string]: any;
+}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
+    top?: unknown;
+    right?: unknown;
+    bottom?: unknown;
+    left?: unknown;
+} & {
+    left: boolean;
+    right: boolean;
+    top: boolean;
+    bottom: boolean;
+} & {}>, {
+    left: boolean;
+    right: boolean;
+    top: boolean;
+    bottom: boolean;
+}>;
+
+interface UseTimeAgoComponentOptions extends Omit<UseTimeAgoOptions<true>, 'controls'> {
     time: MaybeRef<Date | number | string>;
 }
 declare const UseTimeAgo: vue_demi.DefineComponent<UseTimeAgoComponentOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseTimeAgoComponentOptions>, {}>;
@@ -178,4 +298,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
 
 declare const UseWindowSize: vue_demi.DefineComponent<WindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<WindowSizeOptions>, {}>;
 
-export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, VOnClickOutside };
+export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, VOnClickOutside };

package/index.iife.js

@@ -179,6 +179,232 @@
     }
   });
 
+  const globalKey = "__vueuse_ssr_handlers__";
+  globalThis[globalKey] = globalThis[globalKey] || {};
+  const handlers = globalThis[globalKey];
+  function getSSRHandler(key, fallback) {
+    return handlers[key] || fallback;
+  }
+
+  function guessSerializerType(rawInit) {
+    return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : 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.entries()))
+    }
+  };
+  function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorage", () => {
+    var _a;
+    return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+  })(), options = {}) {
+    var _a;
+    const {
+      flush = "pre",
+      deep = true,
+      listenToStorageChanges = true,
+      writeDefaults = true,
+      shallow,
+      window = defaultWindow,
+      eventFilter,
+      onError = (e) => {
+        console.error(e);
+      }
+    } = options;
+    const rawInit = vueDemi.unref(initialValue);
+    const type = guessSerializerType(rawInit);
+    const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(initialValue);
+    const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
+    function read(event) {
+      if (!storage || event && event.key !== key)
+        return;
+      try {
+        const rawValue = event ? event.newValue : storage.getItem(key);
+        if (rawValue == null) {
+          data.value = rawInit;
+          if (writeDefaults && rawInit !== null)
+            storage.setItem(key, serializer.write(rawInit));
+        } else if (typeof rawValue !== "string") {
+          data.value = rawValue;
+        } else {
+          data.value = serializer.read(rawValue);
+        }
+      } catch (e) {
+        onError(e);
+      }
+    }
+    read();
+    if (window && listenToStorageChanges)
+      useEventListener(window, "storage", (e) => setTimeout(() => read(e), 0));
+    if (storage) {
+      shared.watchWithFilter(data, () => {
+        try {
+          if (data.value == null)
+            storage.removeItem(key);
+          else
+            storage.setItem(key, serializer.write(data.value));
+        } catch (e) {
+          onError(e);
+        }
+      }, {
+        flush,
+        deep,
+        eventFilter
+      });
+    }
+    return data;
+  }
+
+  function useMediaQuery(query, options = {}) {
+    const { window = defaultWindow } = options;
+    let mediaQuery;
+    const matches = vueDemi.ref(false);
+    const update = () => {
+      if (!window)
+        return;
+      if (!mediaQuery)
+        mediaQuery = window.matchMedia(query);
+      matches.value = mediaQuery.matches;
+    };
+    shared.tryOnMounted(() => {
+      update();
+      if (!mediaQuery)
+        return;
+      if ("addEventListener" in mediaQuery)
+        mediaQuery.addEventListener("change", update);
+      else
+        mediaQuery.addListener(update);
+      shared.tryOnScopeDispose(() => {
+        if ("removeEventListener" in update)
+          mediaQuery.removeEventListener("change", update);
+        else
+          mediaQuery.removeListener(update);
+      });
+    });
+    return matches;
+  }
+
+  function usePreferredDark(options) {
+    return useMediaQuery("(prefers-color-scheme: dark)", options);
+  }
+
+  var __defProp$7 = Object.defineProperty;
+  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;
+  };
+  function useColorMode(options = {}) {
+    const {
+      selector = "html",
+      attribute = "class",
+      window = defaultWindow,
+      storage = getSSRHandler("getDefaultStorage", () => {
+        var _a;
+        return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+      })(),
+      storageKey = "vueuse-color-scheme",
+      listenToStorageChanges = true,
+      storageRef
+    } = options;
+    const modes = __spreadValues$7({
+      auto: "",
+      light: "light",
+      dark: "dark"
+    }, options.modes || {});
+    const preferredDark = usePreferredDark({ window });
+    const preferredMode = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
+    const store = storageRef || (storageKey == null ? vueDemi.ref("auto") : useStorage(storageKey, "auto", storage, { window, listenToStorageChanges }));
+    const state = vueDemi.computed({
+      get() {
+        return store.value === "auto" ? preferredMode.value : store.value;
+      },
+      set(v) {
+        store.value = v;
+      }
+    });
+    const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector2, attribute2, value) => {
+      const el = window == null ? void 0 : window.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 _a;
+      updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
+    }
+    function onChanged(mode) {
+      if (options.onChanged)
+        options.onChanged(mode, defaultOnChanged);
+      else
+        defaultOnChanged(mode);
+    }
+    vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
+    shared.tryOnMounted(() => onChanged(state.value));
+    return state;
+  }
+
+  const UseColorMode = vueDemi.defineComponent({
+    name: "UseColorMode",
+    props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage"],
+    setup(props, { slots }) {
+      const mode = useColorMode(props);
+      const data = vueDemi.reactive({
+        mode
+      });
+      return () => {
+        if (slots.default)
+          return slots.default(data);
+      };
+    }
+  });
+
   const UseDark = vueDemi.defineComponent({
     name: "UseDark",
     props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
@@ -591,6 +817,97 @@
     }
   });
 
+  function useCssVar(prop, target, { window = defaultWindow } = {}) {
+    const variable = vueDemi.ref("");
+    const elRef = vueDemi.computed(() => {
+      var _a;
+      return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+    });
+    vueDemi.watch(elRef, (el) => {
+      if (el && window)
+        variable.value = window.getComputedStyle(el).getPropertyValue(prop);
+    }, { immediate: true });
+    vueDemi.watch(variable, (val) => {
+      var _a;
+      if ((_a = elRef.value) == null ? void 0 : _a.style)
+        elRef.value.style.setProperty(prop, val);
+    });
+    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 = vueDemi.ref("");
+    const right = vueDemi.ref("");
+    const bottom = vueDemi.ref("");
+    const left = vueDemi.ref("");
+    if (shared.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", shared.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);
+  }
+
+  const UseScreenSafeArea = vueDemi.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 vueDemi.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$2 = Object.defineProperty;
   var __defProps$1 = Object.defineProperties;
   var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
@@ -614,7 +931,7 @@
     name: "UseTimeAgo",
     props: ["time", "updateInterval", "max", "fullDateFormatter", "messages"],
     setup(props, { slots }) {
-      const { time } = vueDemi.toRefs(props);
+      const time = vueDemi.toRef(props, "time");
       const data = vueDemi.reactive(core.useTimeAgo(time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
       return () => {
         if (slots.default)
@@ -716,6 +1033,7 @@
   exports.UseActiveElement = UseActiveElement;
   exports.UseBattery = UseBattery;
   exports.UseBrowserLocation = UseBrowserLocation;
+  exports.UseColorMode = UseColorMode;
   exports.UseDark = UseDark;
   exports.UseDeviceMotion = UseDeviceMotion;
   exports.UseDeviceOrientation = UseDeviceOrientation;
@@ -741,6 +1059,7 @@
   exports.UsePreferredColorScheme = UsePreferredColorScheme;
   exports.UsePreferredDark = UsePreferredDark;
   exports.UsePreferredLanguages = UsePreferredLanguages;
+  exports.UseScreenSafeArea = UseScreenSafeArea;
   exports.UseTimeAgo = UseTimeAgo;
   exports.UseTimestamp = UseTimestamp;
   exports.UseVirtualList = UseVirtualList;

package/index.iife.min.js

@@ -1 +1 @@
-(function(s){if(!s.VueDemi){var n={},a=s.Vue;if(a)if(a.version.slice(0,2)==="2."){var f=s.VueCompositionAPI;if(f){for(var c in f)n[c]=f[c];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=a,n.Vue2=a,n.version=a.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if(a.version.slice(0,2)==="3."){for(var c in a)n[c]=a[c];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=a,n.Vue2=void 0,n.version=a.version,n.set=function(u,p,d){return Array.isArray(u)?(u.length=Math.max(u.length,p),u.splice(p,1,d),d):(u[p]=d,d)},n.del=function(u,p){if(Array.isArray(u)){u.splice(p,1);return}delete u[p]}}else console.error("[vue-demi] Vue version "+a.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");s.VueDemi=n}})(window),function(s,n,a,f){"use strict";const c=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(r,{slots:e,emit:t}){const o=n.ref();return a.onClickOutside(o,i=>{t("trigger",i)}),()=>{if(e.default)return n.h(r.as||"div",{ref:o},e.default())}}});function u(r){var e;const t=n.unref(r);return(e=t==null?void 0:t.$el)!=null?e:t}const p=f.isClient?window:void 0;function d(...r){let e,t,o,i;if(f.isString(r[0])?([t,o,i]=r,e=p):[e,t,o,i]=r,!e)return f.noop;let _=f.noop;const P=n.watch(()=>n.unref(e),l=>{_(),!!l&&(l.addEventListener(t,o,i),_=()=>{l.removeEventListener(t,o,i),_=f.noop})},{immediate:!0,flush:"post"}),g=()=>{P(),_()};return f.tryOnScopeDispose(g),g}function M(r,e,t={}){const{window:o=p}=t;if(!o)return;const i=n.ref(!0),P=[d(o,"click",l=>{const O=u(r);!O||O===l.target||l.composedPath().includes(O)||!i.value||e(l)},{passive:!0,capture:!0}),d(o,"pointerdown",l=>{const O=u(r);i.value=!!O&&!l.composedPath().includes(O)},{passive:!0})];return()=>P.forEach(l=>l())}const N=(r,e)=>{M(r,e.value)},A=n.defineComponent({name:"UseActiveElement",setup(r,{slots:e}){const t=n.reactive({element:a.useActiveElement()});return()=>{if(e.default)return e.default(t)}}}),B=n.defineComponent({name:"UseBattery",setup(r,{slots:e}){const t=n.reactive(a.useBattery(r));return()=>{if(e.default)return e.default(t)}}}),T=n.defineComponent({name:"UseBrowserLocation",setup(r,{slots:e}){const t=n.reactive(a.useBrowserLocation());return()=>{if(e.default)return e.default(t)}}}),F=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(r,{slots:e}){const t=a.useDark(r),o=n.reactive({isDark:t,toggleDark:f.useToggle(t)});return()=>{if(e.default)return e.default(o)}}}),W=n.defineComponent({name:"UseDeviceMotion",setup(r,{slots:e}){const t=n.reactive(a.useDeviceMotion());return()=>{if(e.default)return e.default(t)}}}),R=n.defineComponent({name:"UseDeviceOrientation",setup(r,{slots:e}){const t=n.reactive(a.useDeviceOrientation());return()=>{if(e.default)return e.default(t)}}}),z=n.defineComponent({name:"UseDevicePixelRatio",setup(r,{slots:e}){const t=n.reactive({pixelRatio:a.useDevicePixelRatio()});return()=>{if(e.default)return e.default(t)}}}),k=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(r,{slots:e}){const t=n.reactive(a.useDevicesList(r));return()=>{if(e.default)return e.default(t)}}}),G=n.defineComponent({name:"UseDocumentVisibility",setup(r,{slots:e}){const t=n.reactive({visibility:a.useDocumentVisibility()});return()=>{if(e.default)return e.default(t)}}});var K=Object.defineProperty,H=Object.defineProperties,q=Object.getOwnPropertyDescriptors,U=Object.getOwnPropertySymbols,J=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable,m=(r,e,t)=>e in r?K(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,X=(r,e)=>{for(var t in e||(e={}))J.call(e,t)&&m(r,t,e[t]);if(U)for(var t of U(e))Q.call(e,t)&&m(r,t,e[t]);return r},Y=(r,e)=>H(r,q(e));const Z=n.defineComponent({name:"UseDraggable",props:["storageKey","initialValue","exact","preventDefault","pointerTypes","as"],setup(r,{slots:e}){const t=n.ref(),o=r.storageKey?a.useStorage(r.storageKey,n.unref(r.initialValue)||{x:0,y:0},a.isClient?r.storageType==="session"?sessionStorage:localStorage:void 0):r.initialValue||{x:0,y:0},i=n.reactive(a.useDraggable(t,Y(X({},r),{initialValue:o})));return()=>{if(e.default)return n.h(r.as||"div",{ref:t,style:`touch-action:none;${i.style}`},e.default(i))}}}),x=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(r,{slots:e}){const t=n.ref(),o=n.reactive(a.useElementBounding(t));return()=>{if(e.default)return n.h(r.as||"div",{ref:t},e.default(o))}}}),D=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(r,{slots:e}){const t=n.ref(),o=n.reactive(a.useElementSize(t,{width:r.width,height:r.height},{box:r.box}));return()=>{if(e.default)return n.h(r.as||"div",{ref:t},e.default(o))}}}),ee=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(r,{slots:e}){const t=n.ref(),o=n.reactive({isVisible:a.useElementVisibility(t)});return()=>{if(e.default)return n.h(r.as||"div",{ref:t},e.default(o))}}}),te=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(r,{slots:e}){const t=n.reactive(a.useEyeDropper());return()=>{if(e.default)return e.default(t)}}}),re=n.defineComponent({name:"UseFullscreen",props:["as"],setup(r,{slots:e}){const t=n.ref(),o=n.reactive(a.useFullscreen(t));return()=>{if(e.default)return n.h(r.as||"div",{ref:t},e.default(o))}}}),ne=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(r,{slots:e}){const t=n.reactive(a.useGeolocation(r));return()=>{if(e.default)return e.default(t)}}}),ae=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(r,{slots:e}){const t=n.reactive(a.useIdle(r.timeout,r));return()=>{if(e.default)return e.default(t)}}}),se=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(r,{slots:e}){const t=n.reactive(a.useMouse(r));return()=>{if(e.default)return e.default(t)}}}),oe=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(r,{slots:e}){const t=n.ref(),o=n.reactive(a.useMouseInElement(t,r));return()=>{if(e.default)return n.h(r.as||"div",{ref:t},e.default(o))}}});var ie=Object.defineProperty,ue=Object.defineProperties,fe=Object.getOwnPropertyDescriptors,v=Object.getOwnPropertySymbols,le=Object.prototype.hasOwnProperty,pe=Object.prototype.propertyIsEnumerable,y=(r,e,t)=>e in r?ie(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,ce=(r,e)=>{for(var t in e||(e={}))le.call(e,t)&&y(r,t,e[t]);if(v)for(var t of v(e))pe.call(e,t)&&y(r,t,e[t]);return r},de=(r,e)=>ue(r,fe(e));const _e=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(r,{slots:e}){const t=n.ref(),o=n.reactive(a.useMousePressed(de(ce({},r),{target:t})));return()=>{if(e.default)return n.h(r.as||"div",{ref:t},e.default(o))}}}),Pe=n.defineComponent({name:"UseNetwork",setup(r,{slots:e}){const t=n.reactive(a.useNetwork());return()=>{if(e.default)return e.default(t)}}});var Oe=Object.defineProperty,ge=Object.defineProperties,Ue=Object.getOwnPropertyDescriptors,w=Object.getOwnPropertySymbols,me=Object.prototype.hasOwnProperty,ve=Object.prototype.propertyIsEnumerable,h=(r,e,t)=>e in r?Oe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,ye=(r,e)=>{for(var t in e||(e={}))me.call(e,t)&&h(r,t,e[t]);if(w)for(var t of w(e))ve.call(e,t)&&h(r,t,e[t]);return r},we=(r,e)=>ge(r,Ue(e));const he=n.defineComponent({name:"UseNow",props:["interval"],setup(r,{slots:e}){const t=n.reactive(a.useNow(we(ye({},r),{controls:!0})));return()=>{if(e.default)return e.default(t)}}}),$e=n.defineComponent({name:"UseOnline",setup(r,{slots:e}){const t=n.reactive({isOnline:a.useOnline()});return()=>{if(e.default)return e.default(t)}}}),be=n.defineComponent({name:"UsePageLeave",setup(r,{slots:e}){const t=n.reactive({isLeft:a.usePageLeave()});return()=>{if(e.default)return e.default(t)}}});var Ve=Object.defineProperty,Ce=Object.defineProperties,Ee=Object.getOwnPropertyDescriptors,$=Object.getOwnPropertySymbols,Se=Object.prototype.hasOwnProperty,je=Object.prototype.propertyIsEnumerable,b=(r,e,t)=>e in r?Ve(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,Le=(r,e)=>{for(var t in e||(e={}))Se.call(e,t)&&b(r,t,e[t]);if($)for(var t of $(e))je.call(e,t)&&b(r,t,e[t]);return r},Ie=(r,e)=>Ce(r,Ee(e));const Me=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(r,{slots:e}){const t=n.ref(null),o=n.reactive(a.usePointer(Ie(Le({},r),{target:r.target==="self"?t:p})));return()=>{if(e.default)return e.default(o,{ref:t})}}}),Ne=n.defineComponent({name:"UsePreferredColorScheme",setup(r,{slots:e}){const t=n.reactive({colorScheme:a.usePreferredColorScheme()});return()=>{if(e.default)return e.default(t)}}}),Ae=n.defineComponent({name:"UsePreferredDark",setup(r,{slots:e}){const t=n.reactive({prefersDark:a.usePreferredDark()});return()=>{if(e.default)return e.default(t)}}}),Be=n.defineComponent({name:"UsePreferredLanguages",setup(r,{slots:e}){const t=n.reactive({languages:a.usePreferredLanguages()});return()=>{if(e.default)return e.default(t)}}});var Te=Object.defineProperty,Fe=Object.defineProperties,We=Object.getOwnPropertyDescriptors,V=Object.getOwnPropertySymbols,Re=Object.prototype.hasOwnProperty,ze=Object.prototype.propertyIsEnumerable,C=(r,e,t)=>e in r?Te(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,ke=(r,e)=>{for(var t in e||(e={}))Re.call(e,t)&&C(r,t,e[t]);if(V)for(var t of V(e))ze.call(e,t)&&C(r,t,e[t]);return r},Ge=(r,e)=>Fe(r,We(e));const Ke=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(r,{slots:e}){const{time:t}=n.toRefs(r),o=n.reactive(a.useTimeAgo(t,Ge(ke({},r),{controls:!0})));return()=>{if(e.default)return e.default(o)}}});var He=Object.defineProperty,qe=Object.defineProperties,Je=Object.getOwnPropertyDescriptors,E=Object.getOwnPropertySymbols,Qe=Object.prototype.hasOwnProperty,Xe=Object.prototype.propertyIsEnumerable,S=(r,e,t)=>e in r?He(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,Ye=(r,e)=>{for(var t in e||(e={}))Qe.call(e,t)&&S(r,t,e[t]);if(E)for(var t of E(e))Xe.call(e,t)&&S(r,t,e[t]);return r},Ze=(r,e)=>qe(r,Je(e));const xe=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(r,{slots:e}){const t=n.reactive(a.useTimestamp(Ze(Ye({},r),{controls:!0})));return()=>{if(e.default)return e.default(t)}}});var De=Object.defineProperty,j=Object.getOwnPropertySymbols,et=Object.prototype.hasOwnProperty,tt=Object.prototype.propertyIsEnumerable,L=(r,e,t)=>e in r?De(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,I=(r,e)=>{for(var t in e||(e={}))et.call(e,t)&&L(r,t,e[t]);if(j)for(var t of j(e))tt.call(e,t)&&L(r,t,e[t]);return r};const rt=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(r,{slots:e}){const{list:t}=n.toRefs(r),{list:o,containerProps:i,wrapperProps:_}=a.useVirtualList(t,r.options);return i.style.height=r.height||"300px",()=>n.h("div",I({},i),[n.h("div",I({},_.value),o.value.map(P=>n.h("div",{style:{overFlow:"hidden",height:P.height}},e.default?e.default(P):"Please set content!")))])}}),nt=n.defineComponent({name:"UseWindowFocus",setup(r,{slots:e}){const t=n.reactive({focused:a.useWindowFocus()});return()=>{if(e.default)return e.default(t)}}}),at=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(r,{slots:e}){const t=n.reactive(a.useWindowSize(r));return()=>{if(e.default)return e.default(t)}}});s.OnClickOutside=c,s.UseActiveElement=A,s.UseBattery=B,s.UseBrowserLocation=T,s.UseDark=F,s.UseDeviceMotion=W,s.UseDeviceOrientation=R,s.UseDevicePixelRatio=z,s.UseDevicesList=k,s.UseDocumentVisibility=G,s.UseDraggable=Z,s.UseElementBounding=x,s.UseElementSize=D,s.UseElementVisibility=ee,s.UseEyeDropper=te,s.UseFullscreen=re,s.UseGeolocation=ne,s.UseIdle=ae,s.UseMouse=se,s.UseMouseInElement=oe,s.UseMousePressed=_e,s.UseNetwork=Pe,s.UseNow=he,s.UseOnline=$e,s.UsePageLeave=be,s.UsePointer=Me,s.UsePreferredColorScheme=Ne,s.UsePreferredDark=Ae,s.UsePreferredLanguages=Be,s.UseTimeAgo=Ke,s.UseTimestamp=xe,s.UseVirtualList=rt,s.UseWindowFocus=nt,s.UseWindowSize=at,s.VOnClickOutside=N,Object.defineProperty(s,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);
+(function(s){if(!s.VueDemi){var n={},o=s.Vue;if(o)if(o.version.slice(0,2)==="2."){var f=s.VueCompositionAPI;if(f){for(var U in f)n[U]=f[U];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=o,n.Vue2=o,n.version=o.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if(o.version.slice(0,2)==="3."){for(var U in o)n[U]=o[U];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=o,n.Vue2=void 0,n.version=o.version,n.set=function(g,c,O){return Array.isArray(g)?(g.length=Math.max(g.length,c),g.splice(c,1,O),O):(g[c]=O,O)},n.del=function(g,c){if(Array.isArray(g)){g.splice(c,1);return}delete g[c]}}else console.error("[vue-demi] Vue version "+o.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");s.VueDemi=n}})(window),function(s,n,o,f){"use strict";const U=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(t,{slots:e,emit:r}){const a=n.ref();return o.onClickOutside(a,i=>{r("trigger",i)}),()=>{if(e.default)return n.h(t.as||"div",{ref:a},e.default())}}});function g(t){var e;const r=n.unref(t);return(e=r==null?void 0:r.$el)!=null?e:r}const c=f.isClient?window:void 0;function O(...t){let e,r,a,i;if(f.isString(t[0])?([r,a,i]=t,e=c):[e,r,a,i]=t,!e)return f.noop;let u=f.noop;const p=n.watch(()=>n.unref(e),l=>{u(),!!l&&(l.addEventListener(r,a,i),u=()=>{l.removeEventListener(r,a,i),u=f.noop})},{immediate:!0,flush:"post"}),y=()=>{p(),u()};return f.tryOnScopeDispose(y),y}function ee(t,e,r={}){const{window:a=c}=r;if(!a)return;const i=n.ref(!0),p=[O(a,"click",l=>{const v=g(t);!v||v===l.target||l.composedPath().includes(v)||!i.value||e(l)},{passive:!0,capture:!0}),O(a,"pointerdown",l=>{const v=g(t);i.value=!!v&&!l.composedPath().includes(v)},{passive:!0})];return()=>p.forEach(l=>l())}const te=(t,e)=>{ee(t,e.value)},re=n.defineComponent({name:"UseActiveElement",setup(t,{slots:e}){const r=n.reactive({element:o.useActiveElement()});return()=>{if(e.default)return e.default(r)}}}),ne=n.defineComponent({name:"UseBattery",setup(t,{slots:e}){const r=n.reactive(o.useBattery(t));return()=>{if(e.default)return e.default(r)}}}),ae=n.defineComponent({name:"UseBrowserLocation",setup(t,{slots:e}){const r=n.reactive(o.useBrowserLocation());return()=>{if(e.default)return e.default(r)}}}),j="__vueuse_ssr_handlers__";globalThis[j]=globalThis[j]||{};const oe=globalThis[j];function M(t,e){return oe[t]||e}function se(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"||Array.isArray(t)?"object":Number.isNaN(t)?"any":"number"}const ie={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))}};function ue(t,e,r=M("getDefaultStorage",()=>{var i;return(i=c)==null?void 0:i.localStorage})(),a={}){var i;const{flush:u="pre",deep:p=!0,listenToStorageChanges:y=!0,writeDefaults:l=!0,shallow:v,window:E=c,eventFilter:S,onError:w=_=>{console.error(_)}}=a,b=n.unref(e),L=se(b),P=(v?n.shallowRef:n.ref)(e),d=(i=a.serializer)!=null?i:ie[L];function h(_){if(!(!r||_&&_.key!==t))try{const m=_?_.newValue:r.getItem(t);m==null?(P.value=b,l&&b!==null&&r.setItem(t,d.write(b))):typeof m!="string"?P.value=m:P.value=d.read(m)}catch(m){w(m)}}return h(),E&&y&&O(E,"storage",_=>setTimeout(()=>h(_),0)),r&&f.watchWithFilter(P,()=>{try{P.value==null?r.removeItem(t):r.setItem(t,d.write(P.value))}catch(_){w(_)}},{flush:u,deep:p,eventFilter:S}),P}function le(t,e={}){const{window:r=c}=e;let a;const i=n.ref(!1),u=()=>{!r||(a||(a=r.matchMedia(t)),i.value=a.matches)};return f.tryOnMounted(()=>{u(),!!a&&("addEventListener"in a?a.addEventListener("change",u):a.addListener(u),f.tryOnScopeDispose(()=>{"removeEventListener"in u?a.removeEventListener("change",u):a.removeListener(u)}))}),i}function fe(t){return le("(prefers-color-scheme: dark)",t)}var ce=Object.defineProperty,N=Object.getOwnPropertySymbols,de=Object.prototype.hasOwnProperty,pe=Object.prototype.propertyIsEnumerable,A=(t,e,r)=>e in t?ce(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ge=(t,e)=>{for(var r in e||(e={}))de.call(e,r)&&A(t,r,e[r]);if(N)for(var r of N(e))pe.call(e,r)&&A(t,r,e[r]);return t};function _e(t={}){const{selector:e="html",attribute:r="class",window:a=c,storage:i=M("getDefaultStorage",()=>{var d;return(d=c)==null?void 0:d.localStorage})(),storageKey:u="vueuse-color-scheme",listenToStorageChanges:p=!0,storageRef:y}=t,l=ge({auto:"",light:"light",dark:"dark"},t.modes||{}),v=fe({window:a}),E=n.computed(()=>v.value?"dark":"light"),S=y||(u==null?n.ref("auto"):ue(u,"auto",i,{window:a,listenToStorageChanges:p})),w=n.computed({get(){return S.value==="auto"?E.value:S.value},set(d){S.value=d}}),b=M("updateHTMLAttrs",(d,h,_)=>{const m=a==null?void 0:a.document.querySelector(d);if(!!m)if(h==="class"){const Rt=_.split(/\s/g);Object.values(l).flatMap(C=>(C||"").split(/\s/g)).filter(Boolean).forEach(C=>{Rt.includes(C)?m.classList.add(C):m.classList.remove(C)})}else m.setAttribute(h,_)});function L(d){var h;b(e,r,(h=l[d])!=null?h:d)}function P(d){t.onChanged?t.onChanged(d,L):L(d)}return n.watch(w,P,{flush:"post",immediate:!0}),f.tryOnMounted(()=>P(w.value)),w}const me=n.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=_e(t),a=n.reactive({mode:r});return()=>{if(e.default)return e.default(a)}}}),ve=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=o.useDark(t),a=n.reactive({isDark:r,toggleDark:f.useToggle(r)});return()=>{if(e.default)return e.default(a)}}}),Pe=n.defineComponent({name:"UseDeviceMotion",setup(t,{slots:e}){const r=n.reactive(o.useDeviceMotion());return()=>{if(e.default)return e.default(r)}}}),Oe=n.defineComponent({name:"UseDeviceOrientation",setup(t,{slots:e}){const r=n.reactive(o.useDeviceOrientation());return()=>{if(e.default)return e.default(r)}}}),ye=n.defineComponent({name:"UseDevicePixelRatio",setup(t,{slots:e}){const r=n.reactive({pixelRatio:o.useDevicePixelRatio()});return()=>{if(e.default)return e.default(r)}}}),he=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(t,{slots:e}){const r=n.reactive(o.useDevicesList(t));return()=>{if(e.default)return e.default(r)}}}),Ue=n.defineComponent({name:"UseDocumentVisibility",setup(t,{slots:e}){const r=n.reactive({visibility:o.useDocumentVisibility()});return()=>{if(e.default)return e.default(r)}}});var we=Object.defineProperty,be=Object.defineProperties,Se=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,Ce=Object.prototype.hasOwnProperty,Ve=Object.prototype.propertyIsEnumerable,I=(t,e,r)=>e in t?we(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,$e=(t,e)=>{for(var r in e||(e={}))Ce.call(e,r)&&I(t,r,e[r]);if(T)for(var r of T(e))Ve.call(e,r)&&I(t,r,e[r]);return t},Ee=(t,e)=>be(t,Se(e));const Le=n.defineComponent({name:"UseDraggable",props:["storageKey","initialValue","exact","preventDefault","pointerTypes","as"],setup(t,{slots:e}){const r=n.ref(),a=t.storageKey?o.useStorage(t.storageKey,n.unref(t.initialValue)||{x:0,y:0},o.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0):t.initialValue||{x:0,y:0},i=n.reactive(o.useDraggable(r,Ee($e({},t),{initialValue:a})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r,style:`touch-action:none;${i.style}`},e.default(i))}}}),je=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useElementBounding(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Me=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useElementSize(r,{width:t.width,height:t.height},{box:t.box}));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Ne=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive({isVisible:o.useElementVisibility(r)});return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Ae=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(t,{slots:e}){const r=n.reactive(o.useEyeDropper());return()=>{if(e.default)return e.default(r)}}}),Te=n.defineComponent({name:"UseFullscreen",props:["as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useFullscreen(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Ie=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(t,{slots:e}){const r=n.reactive(o.useGeolocation(t));return()=>{if(e.default)return e.default(r)}}}),Be=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(t,{slots:e}){const r=n.reactive(o.useIdle(t.timeout,t));return()=>{if(e.default)return e.default(r)}}}),Fe=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(t,{slots:e}){const r=n.reactive(o.useMouse(t));return()=>{if(e.default)return e.default(r)}}}),ze=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useMouseInElement(r,t));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}});var Re=Object.defineProperty,We=Object.defineProperties,ke=Object.getOwnPropertyDescriptors,B=Object.getOwnPropertySymbols,He=Object.prototype.hasOwnProperty,Ke=Object.prototype.propertyIsEnumerable,F=(t,e,r)=>e in t?Re(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Je=(t,e)=>{for(var r in e||(e={}))He.call(e,r)&&F(t,r,e[r]);if(B)for(var r of B(e))Ke.call(e,r)&&F(t,r,e[r]);return t},Ge=(t,e)=>We(t,ke(e));const qe=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useMousePressed(Ge(Je({},t),{target:r})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Qe=n.defineComponent({name:"UseNetwork",setup(t,{slots:e}){const r=n.reactive(o.useNetwork());return()=>{if(e.default)return e.default(r)}}});var Xe=Object.defineProperty,Ye=Object.defineProperties,Ze=Object.getOwnPropertyDescriptors,z=Object.getOwnPropertySymbols,xe=Object.prototype.hasOwnProperty,De=Object.prototype.propertyIsEnumerable,R=(t,e,r)=>e in t?Xe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,et=(t,e)=>{for(var r in e||(e={}))xe.call(e,r)&&R(t,r,e[r]);if(z)for(var r of z(e))De.call(e,r)&&R(t,r,e[r]);return t},tt=(t,e)=>Ye(t,Ze(e));const rt=n.defineComponent({name:"UseNow",props:["interval"],setup(t,{slots:e}){const r=n.reactive(o.useNow(tt(et({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}}),nt=n.defineComponent({name:"UseOnline",setup(t,{slots:e}){const r=n.reactive({isOnline:o.useOnline()});return()=>{if(e.default)return e.default(r)}}}),at=n.defineComponent({name:"UsePageLeave",setup(t,{slots:e}){const r=n.reactive({isLeft:o.usePageLeave()});return()=>{if(e.default)return e.default(r)}}});var ot=Object.defineProperty,st=Object.defineProperties,it=Object.getOwnPropertyDescriptors,W=Object.getOwnPropertySymbols,ut=Object.prototype.hasOwnProperty,lt=Object.prototype.propertyIsEnumerable,k=(t,e,r)=>e in t?ot(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ft=(t,e)=>{for(var r in e||(e={}))ut.call(e,r)&&k(t,r,e[r]);if(W)for(var r of W(e))lt.call(e,r)&&k(t,r,e[r]);return t},ct=(t,e)=>st(t,it(e));const dt=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(t,{slots:e}){const r=n.ref(null),a=n.reactive(o.usePointer(ct(ft({},t),{target:t.target==="self"?r:c})));return()=>{if(e.default)return e.default(a,{ref:r})}}}),pt=n.defineComponent({name:"UsePreferredColorScheme",setup(t,{slots:e}){const r=n.reactive({colorScheme:o.usePreferredColorScheme()});return()=>{if(e.default)return e.default(r)}}}),gt=n.defineComponent({name:"UsePreferredDark",setup(t,{slots:e}){const r=n.reactive({prefersDark:o.usePreferredDark()});return()=>{if(e.default)return e.default(r)}}}),_t=n.defineComponent({name:"UsePreferredLanguages",setup(t,{slots:e}){const r=n.reactive({languages:o.usePreferredLanguages()});return()=>{if(e.default)return e.default(r)}}});function V(t,e,{window:r=c}={}){const a=n.ref(""),i=n.computed(()=>{var u;return g(e)||((u=r==null?void 0:r.document)==null?void 0:u.documentElement)});return n.watch(i,u=>{u&&r&&(a.value=r.getComputedStyle(u).getPropertyValue(t))},{immediate:!0}),n.watch(a,u=>{var p;((p=i.value)==null?void 0:p.style)&&i.value.style.setProperty(t,u)}),a}const H="--vueuse-safe-area-top",K="--vueuse-safe-area-right",J="--vueuse-safe-area-bottom",G="--vueuse-safe-area-left";function mt(){const t=n.ref(""),e=n.ref(""),r=n.ref(""),a=n.ref("");if(f.isClient){const u=V(H),p=V(K),y=V(J),l=V(G);u.value="env(safe-area-inset-top, 0px)",p.value="env(safe-area-inset-right, 0px)",y.value="env(safe-area-inset-bottom, 0px)",l.value="env(safe-area-inset-left, 0px)",i(),O("resize",f.useDebounceFn(i))}function i(){t.value=$(H),e.value=$(K),r.value=$(J),a.value=$(G)}return{top:t,right:e,bottom:r,left:a,update:i}}function $(t){return getComputedStyle(document.documentElement).getPropertyValue(t)}const vt=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(t,{slots:e}){const{top:r,right:a,bottom:i,left:u}=mt();return()=>{if(e.default)return n.h("div",{style:{paddingTop:t.top?r.value:"",paddingRight:t.right?a.value:"",paddingBottom:t.bottom?i.value:"",paddingLeft:t.left?u.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var Pt=Object.defineProperty,Ot=Object.defineProperties,yt=Object.getOwnPropertyDescriptors,q=Object.getOwnPropertySymbols,ht=Object.prototype.hasOwnProperty,Ut=Object.prototype.propertyIsEnumerable,Q=(t,e,r)=>e in t?Pt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,wt=(t,e)=>{for(var r in e||(e={}))ht.call(e,r)&&Q(t,r,e[r]);if(q)for(var r of q(e))Ut.call(e,r)&&Q(t,r,e[r]);return t},bt=(t,e)=>Ot(t,yt(e));const St=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(t,{slots:e}){const r=n.toRef(t,"time"),a=n.reactive(o.useTimeAgo(r,bt(wt({},t),{controls:!0})));return()=>{if(e.default)return e.default(a)}}});var Ct=Object.defineProperty,Vt=Object.defineProperties,$t=Object.getOwnPropertyDescriptors,X=Object.getOwnPropertySymbols,Et=Object.prototype.hasOwnProperty,Lt=Object.prototype.propertyIsEnumerable,Y=(t,e,r)=>e in t?Ct(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,jt=(t,e)=>{for(var r in e||(e={}))Et.call(e,r)&&Y(t,r,e[r]);if(X)for(var r of X(e))Lt.call(e,r)&&Y(t,r,e[r]);return t},Mt=(t,e)=>Vt(t,$t(e));const Nt=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(t,{slots:e}){const r=n.reactive(o.useTimestamp(Mt(jt({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var At=Object.defineProperty,Z=Object.getOwnPropertySymbols,Tt=Object.prototype.hasOwnProperty,It=Object.prototype.propertyIsEnumerable,x=(t,e,r)=>e in t?At(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,D=(t,e)=>{for(var r in e||(e={}))Tt.call(e,r)&&x(t,r,e[r]);if(Z)for(var r of Z(e))It.call(e,r)&&x(t,r,e[r]);return t};const Bt=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(t,{slots:e}){const{list:r}=n.toRefs(t),{list:a,containerProps:i,wrapperProps:u}=o.useVirtualList(r,t.options);return i.style.height=t.height||"300px",()=>n.h("div",D({},i),[n.h("div",D({},u.value),a.value.map(p=>n.h("div",{style:{overFlow:"hidden",height:p.height}},e.default?e.default(p):"Please set content!")))])}}),Ft=n.defineComponent({name:"UseWindowFocus",setup(t,{slots:e}){const r=n.reactive({focused:o.useWindowFocus()});return()=>{if(e.default)return e.default(r)}}}),zt=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(t,{slots:e}){const r=n.reactive(o.useWindowSize(t));return()=>{if(e.default)return e.default(r)}}});s.OnClickOutside=U,s.UseActiveElement=re,s.UseBattery=ne,s.UseBrowserLocation=ae,s.UseColorMode=me,s.UseDark=ve,s.UseDeviceMotion=Pe,s.UseDeviceOrientation=Oe,s.UseDevicePixelRatio=ye,s.UseDevicesList=he,s.UseDocumentVisibility=Ue,s.UseDraggable=Le,s.UseElementBounding=je,s.UseElementSize=Me,s.UseElementVisibility=Ne,s.UseEyeDropper=Ae,s.UseFullscreen=Te,s.UseGeolocation=Ie,s.UseIdle=Be,s.UseMouse=Fe,s.UseMouseInElement=ze,s.UseMousePressed=qe,s.UseNetwork=Qe,s.UseNow=rt,s.UseOnline=nt,s.UsePageLeave=at,s.UsePointer=dt,s.UsePreferredColorScheme=pt,s.UsePreferredDark=gt,s.UsePreferredLanguages=_t,s.UseScreenSafeArea=vt,s.UseTimeAgo=St,s.UseTimestamp=Nt,s.UseVirtualList=Bt,s.UseWindowFocus=Ft,s.UseWindowSize=zt,s.VOnClickOutside=te,Object.defineProperty(s,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);

package/index.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, unref, watch, reactive, toRefs } from 'vue-demi';
-import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage, isClient as isClient$1, useDraggable, useElementBounding, useElementSize, useElementVisibility, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark, usePreferredLanguages, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { isClient, isString, noop, tryOnScopeDispose, useToggle } from '@vueuse/shared';
+import { defineComponent, ref, h, unref, watch, reactive, shallowRef, computed, toRef, toRefs } from 'vue-demi';
+import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize, useElementVisibility, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark as usePreferredDark$1, usePreferredLanguages, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
+import { isClient, isString, noop, tryOnScopeDispose, watchWithFilter, tryOnMounted, useToggle, useDebounceFn } from '@vueuse/shared';
 
 const OnClickOutside = defineComponent({
   name: "OnClickOutside",
@@ -119,6 +119,232 @@ const UseBrowserLocation = defineComponent({
   }
 });
 
+const globalKey = "__vueuse_ssr_handlers__";
+globalThis[globalKey] = globalThis[globalKey] || {};
+const handlers = globalThis[globalKey];
+function getSSRHandler(key, fallback) {
+  return handlers[key] || fallback;
+}
+
+function guessSerializerType(rawInit) {
+  return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : 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.entries()))
+  }
+};
+function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorage", () => {
+  var _a;
+  return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+})(), options = {}) {
+  var _a;
+  const {
+    flush = "pre",
+    deep = true,
+    listenToStorageChanges = true,
+    writeDefaults = true,
+    shallow,
+    window = defaultWindow,
+    eventFilter,
+    onError = (e) => {
+      console.error(e);
+    }
+  } = options;
+  const rawInit = unref(initialValue);
+  const type = guessSerializerType(rawInit);
+  const data = (shallow ? shallowRef : ref)(initialValue);
+  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
+  function read(event) {
+    if (!storage || event && event.key !== key)
+      return;
+    try {
+      const rawValue = event ? event.newValue : storage.getItem(key);
+      if (rawValue == null) {
+        data.value = rawInit;
+        if (writeDefaults && rawInit !== null)
+          storage.setItem(key, serializer.write(rawInit));
+      } else if (typeof rawValue !== "string") {
+        data.value = rawValue;
+      } else {
+        data.value = serializer.read(rawValue);
+      }
+    } catch (e) {
+      onError(e);
+    }
+  }
+  read();
+  if (window && listenToStorageChanges)
+    useEventListener(window, "storage", (e) => setTimeout(() => read(e), 0));
+  if (storage) {
+    watchWithFilter(data, () => {
+      try {
+        if (data.value == null)
+          storage.removeItem(key);
+        else
+          storage.setItem(key, serializer.write(data.value));
+      } catch (e) {
+        onError(e);
+      }
+    }, {
+      flush,
+      deep,
+      eventFilter
+    });
+  }
+  return data;
+}
+
+function useMediaQuery(query, options = {}) {
+  const { window = defaultWindow } = options;
+  let mediaQuery;
+  const matches = ref(false);
+  const update = () => {
+    if (!window)
+      return;
+    if (!mediaQuery)
+      mediaQuery = window.matchMedia(query);
+    matches.value = mediaQuery.matches;
+  };
+  tryOnMounted(() => {
+    update();
+    if (!mediaQuery)
+      return;
+    if ("addEventListener" in mediaQuery)
+      mediaQuery.addEventListener("change", update);
+    else
+      mediaQuery.addListener(update);
+    tryOnScopeDispose(() => {
+      if ("removeEventListener" in update)
+        mediaQuery.removeEventListener("change", update);
+      else
+        mediaQuery.removeListener(update);
+    });
+  });
+  return matches;
+}
+
+function usePreferredDark(options) {
+  return useMediaQuery("(prefers-color-scheme: dark)", options);
+}
+
+var __defProp$7 = Object.defineProperty;
+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;
+};
+function useColorMode(options = {}) {
+  const {
+    selector = "html",
+    attribute = "class",
+    window = defaultWindow,
+    storage = getSSRHandler("getDefaultStorage", () => {
+      var _a;
+      return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+    })(),
+    storageKey = "vueuse-color-scheme",
+    listenToStorageChanges = true,
+    storageRef
+  } = options;
+  const modes = __spreadValues$7({
+    auto: "",
+    light: "light",
+    dark: "dark"
+  }, options.modes || {});
+  const preferredDark = usePreferredDark({ window });
+  const preferredMode = computed(() => preferredDark.value ? "dark" : "light");
+  const store = storageRef || (storageKey == null ? ref("auto") : useStorage(storageKey, "auto", storage, { window, listenToStorageChanges }));
+  const state = computed({
+    get() {
+      return store.value === "auto" ? preferredMode.value : store.value;
+    },
+    set(v) {
+      store.value = v;
+    }
+  });
+  const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector2, attribute2, value) => {
+    const el = window == null ? void 0 : window.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 _a;
+    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
+  }
+  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;
+}
+
+const UseColorMode = defineComponent({
+  name: "UseColorMode",
+  props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage"],
+  setup(props, { slots }) {
+    const mode = useColorMode(props);
+    const data = reactive({
+      mode
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+
 const UseDark = defineComponent({
   name: "UseDark",
   props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
@@ -226,7 +452,7 @@ const UseDraggable = defineComponent({
   ],
   setup(props, { slots }) {
     const target = ref();
-    const initialValue = props.storageKey ? useStorage(props.storageKey, unref(props.initialValue) || { x: 0, y: 0 }, isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
+    const initialValue = props.storageKey ? useStorage$1(props.storageKey, unref(props.initialValue) || { x: 0, y: 0 }, isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
     const data = reactive(useDraggable(target, __spreadProps$5(__spreadValues$6({}, props), {
       initialValue
     })));
@@ -509,7 +735,7 @@ const UsePreferredDark = defineComponent({
   name: "UsePreferredDark",
   setup(props, { slots }) {
     const data = reactive({
-      prefersDark: usePreferredDark()
+      prefersDark: usePreferredDark$1()
     });
     return () => {
       if (slots.default)
@@ -531,6 +757,97 @@ const UsePreferredLanguages = defineComponent({
   }
 });
 
+function useCssVar(prop, target, { window = defaultWindow } = {}) {
+  const variable = ref("");
+  const elRef = computed(() => {
+    var _a;
+    return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+  });
+  watch(elRef, (el) => {
+    if (el && window)
+      variable.value = window.getComputedStyle(el).getPropertyValue(prop);
+  }, { immediate: true });
+  watch(variable, (val) => {
+    var _a;
+    if ((_a = elRef.value) == null ? void 0 : _a.style)
+      elRef.value.style.setProperty(prop, val);
+  });
+  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);
+}
+
+const UseScreenSafeArea = 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$2 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
@@ -554,7 +871,7 @@ const UseTimeAgo = defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages"],
   setup(props, { slots }) {
-    const { time } = toRefs(props);
+    const time = toRef(props, "time");
     const data = reactive(useTimeAgo(time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
     return () => {
       if (slots.default)
@@ -652,4 +969,4 @@ const UseWindowSize = defineComponent({
   }
 });
 
-export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, VOnClickOutside };
+export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, VOnClickOutside };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "7.2.2",
+  "version": "7.4.2",
   "description": "Renderless components for VueUse",
   "keywords": [
     "vue",
@@ -33,8 +33,8 @@
   },
   "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/components#readme",
   "dependencies": {
-    "@vueuse/core": "7.2.2",
-    "@vueuse/shared": "7.2.2",
+    "@vueuse/core": "7.4.2",
+    "@vueuse/shared": "7.4.2",
     "vue-demi": "*"
   }
 }