@vueuse/components 7.1.1 → 7.3.0

package/index.cjs

@@ -535,6 +535,79 @@ const UsePreferredLanguages = vueDemi.defineComponent({
   }
 });
 
+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 (core.isClient) {
+    const topCssVar = core.useCssVar(topVarName);
+    const rightCssVar = core.useCssVar(rightVarName);
+    const bottomCssVar = core.useCssVar(bottomVarName);
+    const leftCssVar = core.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();
+    core.useEventListener("resize", core.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;
@@ -622,7 +695,8 @@ const UseVirtualList = vueDemi.defineComponent({
     "height"
   ],
   setup(props, { slots }) {
-    const { list, containerProps, wrapperProps } = core.useVirtualList(props.list, props.options);
+    const { list: listRef } = vueDemi.toRefs(props);
+    const { list, containerProps, wrapperProps } = core.useVirtualList(listRef, props.options);
     containerProps.style.height = props.height || "300px";
     return () => vueDemi.h("div", __spreadValues({}, containerProps), [
       vueDemi.h("div", __spreadValues({}, wrapperProps.value), list.value.map((item) => vueDemi.h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
@@ -684,6 +758,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

@@ -143,6 +143,30 @@ 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<{} & {} & {}>, {}>;
 
+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<TimeAgoOptions<true>, 'controls'> {
     time: MaybeRef<Date | number | string>;
 }
@@ -178,4 +202,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, 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

@@ -591,6 +591,79 @@
     }
   });
 
+  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 (core.isClient) {
+      const topCssVar = core.useCssVar(topVarName);
+      const rightCssVar = core.useCssVar(rightVarName);
+      const bottomCssVar = core.useCssVar(bottomVarName);
+      const leftCssVar = core.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();
+      core.useEventListener("resize", core.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;
@@ -678,7 +751,8 @@
       "height"
     ],
     setup(props, { slots }) {
-      const { list, containerProps, wrapperProps } = core.useVirtualList(props.list, props.options);
+      const { list: listRef } = vueDemi.toRefs(props);
+      const { list, containerProps, wrapperProps } = core.useVirtualList(listRef, props.options);
       containerProps.style.height = props.height || "300px";
       return () => vueDemi.h("div", __spreadValues({}, containerProps), [
         vueDemi.h("div", __spreadValues({}, wrapperProps.value), list.value.map((item) => vueDemi.h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
@@ -740,6 +814,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,_){return Array.isArray(u)?(u.length=Math.max(u.length,p),u.splice(p,1,_),_):(u[p]=_,_)},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 _(...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 d=f.noop;const O=n.watch(()=>n.unref(e),l=>{d(),!!l&&(l.addEventListener(t,o,i),d=()=>{l.removeEventListener(t,o,i),d=f.noop})},{immediate:!0,flush:"post"}),g=()=>{O(),d()};return f.tryOnScopeDispose(g),g}function M(r,e,t={}){const{window:o=p}=t;if(!o)return;const i=n.ref(!0),O=[_(o,"click",l=>{const P=u(r);!P||P===l.target||l.composedPath().includes(P)||!i.value||e(l)},{passive:!0,capture:!0}),_(o,"pointerdown",l=>{const P=u(r);i.value=!!P&&!l.composedPath().includes(P)},{passive:!0})];return()=>O.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)}}}),z=n.defineComponent({name:"UseDeviceOrientation",setup(r,{slots:e}){const t=n.reactive(a.useDeviceOrientation());return()=>{if(e.default)return e.default(t)}}}),k=n.defineComponent({name:"UseDevicePixelRatio",setup(r,{slots:e}){const t=n.reactive({pixelRatio:a.useDevicePixelRatio()});return()=>{if(e.default)return e.default(t)}}}),R=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,de=(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},ce=(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(ce(de({},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,ze=Object.prototype.hasOwnProperty,ke=Object.prototype.propertyIsEnumerable,C=(r,e,t)=>e in r?Te(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,Re=(r,e)=>{for(var t in e||(e={}))ze.call(e,t)&&C(r,t,e[t]);if(V)for(var t of V(e))ke.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(Re({},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,containerProps:o,wrapperProps:i}=a.useVirtualList(r.list,r.options);return o.style.height=r.height||"300px",()=>n.h("div",I({},o),[n.h("div",I({},i.value),t.value.map(d=>n.h("div",{style:{overFlow:"hidden",height:d.height}},e.default?e.default(d):"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=z,s.UseDevicePixelRatio=k,s.UseDevicesList=R,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={},a=s.Vue;if(a)if(a.version.slice(0,2)==="2."){var l=s.VueCompositionAPI;if(l){for(var _ in l)n[_]=l[_];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 _ in a)n[_]=a[_];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=a,n.Vue2=void 0,n.version=a.version,n.set=function(f,d,g){return Array.isArray(f)?(f.length=Math.max(f.length,d),f.splice(d,1,g),g):(f[d]=g,g)},n.del=function(f,d){if(Array.isArray(f)){f.splice(d,1);return}delete f[d]}}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,l){"use strict";const _=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 f(r){var e;const t=n.unref(r);return(e=t==null?void 0:t.$el)!=null?e:t}const d=l.isClient?window:void 0;function g(...r){let e,t,o,i;if(l.isString(r[0])?([t,o,i]=r,e=d):[e,t,o,i]=r,!e)return l.noop;let p=l.noop;const c=n.watch(()=>n.unref(e),u=>{p(),!!u&&(u.addEventListener(t,o,i),p=()=>{u.removeEventListener(t,o,i),p=l.noop})},{immediate:!0,flush:"post"}),m=()=>{c(),p()};return l.tryOnScopeDispose(m),m}function F(r,e,t={}){const{window:o=d}=t;if(!o)return;const i=n.ref(!0),c=[g(o,"click",u=>{const P=f(r);!P||P===u.target||u.composedPath().includes(P)||!i.value||e(u)},{passive:!0,capture:!0}),g(o,"pointerdown",u=>{const P=f(r);i.value=!!P&&!u.composedPath().includes(P)},{passive:!0})];return()=>c.forEach(u=>u())}const W=(r,e)=>{F(r,e.value)},z=n.defineComponent({name:"UseActiveElement",setup(r,{slots:e}){const t=n.reactive({element:a.useActiveElement()});return()=>{if(e.default)return e.default(t)}}}),R=n.defineComponent({name:"UseBattery",setup(r,{slots:e}){const t=n.reactive(a.useBattery(r));return()=>{if(e.default)return e.default(t)}}}),k=n.defineComponent({name:"UseBrowserLocation",setup(r,{slots:e}){const t=n.reactive(a.useBrowserLocation());return()=>{if(e.default)return e.default(t)}}}),G=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:l.useToggle(t)});return()=>{if(e.default)return e.default(o)}}}),H=n.defineComponent({name:"UseDeviceMotion",setup(r,{slots:e}){const t=n.reactive(a.useDeviceMotion());return()=>{if(e.default)return e.default(t)}}}),K=n.defineComponent({name:"UseDeviceOrientation",setup(r,{slots:e}){const t=n.reactive(a.useDeviceOrientation());return()=>{if(e.default)return e.default(t)}}}),q=n.defineComponent({name:"UseDevicePixelRatio",setup(r,{slots:e}){const t=n.reactive({pixelRatio:a.useDevicePixelRatio()});return()=>{if(e.default)return e.default(t)}}}),J=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)}}}),Q=n.defineComponent({name:"UseDocumentVisibility",setup(r,{slots:e}){const t=n.reactive({visibility:a.useDocumentVisibility()});return()=>{if(e.default)return e.default(t)}}});var X=Object.defineProperty,Y=Object.defineProperties,Z=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertySymbols,x=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable,v=(r,e,t)=>e in r?X(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,ee=(r,e)=>{for(var t in e||(e={}))x.call(e,t)&&v(r,t,e[t]);if(O)for(var t of O(e))D.call(e,t)&&v(r,t,e[t]);return r},te=(r,e)=>Y(r,Z(e));const re=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,te(ee({},r),{initialValue:o})));return()=>{if(e.default)return n.h(r.as||"div",{ref:t,style:`touch-action:none;${i.style}`},e.default(i))}}}),ne=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))}}}),ae=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))}}}),se=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))}}}),oe=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)}}}),ie=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))}}}),ue=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)}}}),fe=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)}}}),le=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)}}}),pe=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 de=Object.defineProperty,ce=Object.defineProperties,_e=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertySymbols,ge=Object.prototype.hasOwnProperty,Pe=Object.prototype.propertyIsEnumerable,h=(r,e,t)=>e in r?de(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,me=(r,e)=>{for(var t in e||(e={}))ge.call(e,t)&&h(r,t,e[t]);if(y)for(var t of y(e))Pe.call(e,t)&&h(r,t,e[t]);return r},Ue=(r,e)=>ce(r,_e(e));const Oe=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(r,{slots:e}){const t=n.ref(),o=n.reactive(a.useMousePressed(Ue(me({},r),{target:t})));return()=>{if(e.default)return n.h(r.as||"div",{ref:t},e.default(o))}}}),ve=n.defineComponent({name:"UseNetwork",setup(r,{slots:e}){const t=n.reactive(a.useNetwork());return()=>{if(e.default)return e.default(t)}}});var ye=Object.defineProperty,he=Object.defineProperties,we=Object.getOwnPropertyDescriptors,w=Object.getOwnPropertySymbols,be=Object.prototype.hasOwnProperty,Ve=Object.prototype.propertyIsEnumerable,b=(r,e,t)=>e in r?ye(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,Ce=(r,e)=>{for(var t in e||(e={}))be.call(e,t)&&b(r,t,e[t]);if(w)for(var t of w(e))Ve.call(e,t)&&b(r,t,e[t]);return r},$e=(r,e)=>he(r,we(e));const Ee=n.defineComponent({name:"UseNow",props:["interval"],setup(r,{slots:e}){const t=n.reactive(a.useNow($e(Ce({},r),{controls:!0})));return()=>{if(e.default)return e.default(t)}}}),Se=n.defineComponent({name:"UseOnline",setup(r,{slots:e}){const t=n.reactive({isOnline:a.useOnline()});return()=>{if(e.default)return e.default(t)}}}),Le=n.defineComponent({name:"UsePageLeave",setup(r,{slots:e}){const t=n.reactive({isLeft:a.usePageLeave()});return()=>{if(e.default)return e.default(t)}}});var je=Object.defineProperty,Ie=Object.defineProperties,Ne=Object.getOwnPropertyDescriptors,V=Object.getOwnPropertySymbols,Ae=Object.prototype.hasOwnProperty,Be=Object.prototype.propertyIsEnumerable,C=(r,e,t)=>e in r?je(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,Me=(r,e)=>{for(var t in e||(e={}))Ae.call(e,t)&&C(r,t,e[t]);if(V)for(var t of V(e))Be.call(e,t)&&C(r,t,e[t]);return r},Te=(r,e)=>Ie(r,Ne(e));const Fe=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(r,{slots:e}){const t=n.ref(null),o=n.reactive(a.usePointer(Te(Me({},r),{target:r.target==="self"?t:d})));return()=>{if(e.default)return e.default(o,{ref:t})}}}),We=n.defineComponent({name:"UsePreferredColorScheme",setup(r,{slots:e}){const t=n.reactive({colorScheme:a.usePreferredColorScheme()});return()=>{if(e.default)return e.default(t)}}}),ze=n.defineComponent({name:"UsePreferredDark",setup(r,{slots:e}){const t=n.reactive({prefersDark:a.usePreferredDark()});return()=>{if(e.default)return e.default(t)}}}),Re=n.defineComponent({name:"UsePreferredLanguages",setup(r,{slots:e}){const t=n.reactive({languages:a.usePreferredLanguages()});return()=>{if(e.default)return e.default(t)}}}),$="--vueuse-safe-area-top",E="--vueuse-safe-area-right",S="--vueuse-safe-area-bottom",L="--vueuse-safe-area-left";function ke(){const r=n.ref(""),e=n.ref(""),t=n.ref(""),o=n.ref("");if(a.isClient){const p=a.useCssVar($),c=a.useCssVar(E),m=a.useCssVar(S),u=a.useCssVar(L);p.value="env(safe-area-inset-top, 0px)",c.value="env(safe-area-inset-right, 0px)",m.value="env(safe-area-inset-bottom, 0px)",u.value="env(safe-area-inset-left, 0px)",i(),a.useEventListener("resize",a.useDebounceFn(i))}function i(){r.value=U($),e.value=U(E),t.value=U(S),o.value=U(L)}return{top:r,right:e,bottom:t,left:o,update:i}}function U(r){return getComputedStyle(document.documentElement).getPropertyValue(r)}const Ge=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(r,{slots:e}){const{top:t,right:o,bottom:i,left:p}=ke();return()=>{if(e.default)return n.h("div",{style:{paddingTop:r.top?t.value:"",paddingRight:r.right?o.value:"",paddingBottom:r.bottom?i.value:"",paddingLeft:r.left?p.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var He=Object.defineProperty,Ke=Object.defineProperties,qe=Object.getOwnPropertyDescriptors,j=Object.getOwnPropertySymbols,Je=Object.prototype.hasOwnProperty,Qe=Object.prototype.propertyIsEnumerable,I=(r,e,t)=>e in r?He(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,Xe=(r,e)=>{for(var t in e||(e={}))Je.call(e,t)&&I(r,t,e[t]);if(j)for(var t of j(e))Qe.call(e,t)&&I(r,t,e[t]);return r},Ye=(r,e)=>Ke(r,qe(e));const Ze=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,Ye(Xe({},r),{controls:!0})));return()=>{if(e.default)return e.default(o)}}});var xe=Object.defineProperty,De=Object.defineProperties,et=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertySymbols,tt=Object.prototype.hasOwnProperty,rt=Object.prototype.propertyIsEnumerable,A=(r,e,t)=>e in r?xe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,nt=(r,e)=>{for(var t in e||(e={}))tt.call(e,t)&&A(r,t,e[t]);if(N)for(var t of N(e))rt.call(e,t)&&A(r,t,e[t]);return r},at=(r,e)=>De(r,et(e));const st=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(r,{slots:e}){const t=n.reactive(a.useTimestamp(at(nt({},r),{controls:!0})));return()=>{if(e.default)return e.default(t)}}});var ot=Object.defineProperty,B=Object.getOwnPropertySymbols,it=Object.prototype.hasOwnProperty,ut=Object.prototype.propertyIsEnumerable,M=(r,e,t)=>e in r?ot(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,T=(r,e)=>{for(var t in e||(e={}))it.call(e,t)&&M(r,t,e[t]);if(B)for(var t of B(e))ut.call(e,t)&&M(r,t,e[t]);return r};const ft=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(r,{slots:e}){const{list:t}=n.toRefs(r),{list:o,containerProps:i,wrapperProps:p}=a.useVirtualList(t,r.options);return i.style.height=r.height||"300px",()=>n.h("div",T({},i),[n.h("div",T({},p.value),o.value.map(c=>n.h("div",{style:{overFlow:"hidden",height:c.height}},e.default?e.default(c):"Please set content!")))])}}),lt=n.defineComponent({name:"UseWindowFocus",setup(r,{slots:e}){const t=n.reactive({focused:a.useWindowFocus()});return()=>{if(e.default)return e.default(t)}}}),pt=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=_,s.UseActiveElement=z,s.UseBattery=R,s.UseBrowserLocation=k,s.UseDark=G,s.UseDeviceMotion=H,s.UseDeviceOrientation=K,s.UseDevicePixelRatio=q,s.UseDevicesList=J,s.UseDocumentVisibility=Q,s.UseDraggable=re,s.UseElementBounding=ne,s.UseElementSize=ae,s.UseElementVisibility=se,s.UseEyeDropper=oe,s.UseFullscreen=ie,s.UseGeolocation=ue,s.UseIdle=fe,s.UseMouse=le,s.UseMouseInElement=pe,s.UseMousePressed=Oe,s.UseNetwork=ve,s.UseNow=Ee,s.UseOnline=Se,s.UsePageLeave=Le,s.UsePointer=Fe,s.UsePreferredColorScheme=We,s.UsePreferredDark=ze,s.UsePreferredLanguages=Re,s.UseScreenSafeArea=Ge,s.UseTimeAgo=Ze,s.UseTimestamp=st,s.UseVirtualList=ft,s.UseWindowFocus=lt,s.UseWindowSize=pt,s.VOnClickOutside=W,Object.defineProperty(s,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);

package/index.mjs

@@ -1,5 +1,5 @@
 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 { 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, useCssVar, useEventListener as useEventListener$1, useDebounceFn, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
 import { isClient, isString, noop, tryOnScopeDispose, useToggle } from '@vueuse/shared';
 
 const OnClickOutside = defineComponent({
@@ -531,6 +531,79 @@ const UsePreferredLanguages = defineComponent({
   }
 });
 
+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$1) {
+    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$1("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;
@@ -618,7 +691,8 @@ const UseVirtualList = defineComponent({
     "height"
   ],
   setup(props, { slots }) {
-    const { list, containerProps, wrapperProps } = useVirtualList(props.list, props.options);
+    const { list: listRef } = toRefs(props);
+    const { list, containerProps, wrapperProps } = useVirtualList(listRef, props.options);
     containerProps.style.height = props.height || "300px";
     return () => h("div", __spreadValues({}, containerProps), [
       h("div", __spreadValues({}, wrapperProps.value), list.value.map((item) => h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
@@ -651,4 +725,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, 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.1.1",
+  "version": "7.3.0",
   "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.1.1",
-    "@vueuse/shared": "7.1.1",
+    "@vueuse/core": "7.3.0",
+    "@vueuse/shared": "7.3.0",
     "vue-demi": "*"
   }
 }