@vueuse/components 6.8.0 → 7.0.0

package/index.cjs

@@ -63,18 +63,25 @@ function useEventListener(...args) {
 }
 
 function onClickOutside(target, handler, options = {}) {
-  const { window = defaultWindow, event = "pointerdown" } = options;
+  const { window = defaultWindow } = options;
   if (!window)
     return;
-  const listener = (event2) => {
+  const shouldListen = vueDemi.ref(true);
+  const listener = (event) => {
     const el = unrefElement(target);
-    if (!el)
-      return;
-    if (el === event2.target || event2.composedPath().includes(el))
+    if (!el || el === event.target || event.composedPath().includes(el) || !shouldListen.value)
       return;
-    handler(event2);
+    handler(event);
   };
-  return useEventListener(window, event, listener, { passive: true });
+  const cleanup = [
+    useEventListener(window, "click", listener, { passive: true, capture: true }),
+    useEventListener(window, "pointerdown", (e) => {
+      const el = unrefElement(target);
+      shouldListen.value = !!el && !e.composedPath().includes(el);
+    }, { passive: true })
+  ];
+  const stop = () => cleanup.forEach((fn) => fn());
+  return stop;
 }
 
 const VOnClickOutside = (el, binding) => {
@@ -239,7 +246,7 @@ const UseElementBounding = vueDemi.defineComponent({
   props: ["box", "as"],
   setup(props, { slots }) {
     const target = vueDemi.ref();
-    const data = vueDemi.reactive(core.useElementBounding(target, { box: props.box, window: props.window }));
+    const data = vueDemi.reactive(core.useElementBounding(target));
     return () => {
       if (slots.default)
         return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
@@ -275,6 +282,20 @@ const UseElementVisibility = vueDemi.defineComponent({
   }
 });
 
+const UseEyeDropper = vueDemi.defineComponent({
+  name: "UseEyeDropper",
+  props: {
+    sRGBHex: String
+  },
+  setup(props, { slots }) {
+    const data = vueDemi.reactive(core.useEyeDropper());
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+
 const UseFullscreen = vueDemi.defineComponent({
   name: "UseFullscreen",
   props: ["as"],
@@ -648,6 +669,7 @@ exports.UseDraggable = UseDraggable;
 exports.UseElementBounding = UseElementBounding;
 exports.UseElementSize = UseElementSize;
 exports.UseElementVisibility = UseElementVisibility;
+exports.UseEyeDropper = UseEyeDropper;
 exports.UseFullscreen = UseFullscreen;
 exports.UseGeolocation = UseGeolocation;
 exports.UseIdle = UseIdle;

package/index.d.ts

@@ -14,26 +14,10 @@ interface RenderableComponent {
 
 declare const OnClickOutside: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
-interface ConfigurableWindow {
-    window?: Window;
-}
-
-interface ResizeObserverOptions extends ConfigurableWindow {
-    /**
-     * Sets which box model the observer will observe changes to. Possible values
-     * are `content-box` (the default), and `border-box`.
-     *
-     * @default 'content-box'
-     */
-    box?: 'content-box' | 'border-box';
-}
-
-declare type OnClickOutsideEvents = Pick<WindowEventMap, 'click' | 'mousedown' | 'mouseup' | 'touchstart' | 'touchend' | 'pointerdown' | 'pointerup'>;
-
 /**
  * TODO: Test that this actually works
  */
-declare const VOnClickOutside: FunctionDirective<any, (evt: OnClickOutsideEvents['pointerdown']) => void>;
+declare const VOnClickOutside: FunctionDirective<any, (evt: PointerEvent) => void>;
 
 declare const UseActiveElement: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
@@ -81,12 +65,36 @@ interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
 }
 declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDraggableProps>, {}>;
 
+interface ConfigurableWindow {
+    window?: Window;
+}
+
+interface ResizeObserverOptions extends ConfigurableWindow {
+    /**
+     * Sets which box model the observer will observe changes to. Possible values
+     * are `content-box` (the default), and `border-box`.
+     *
+     * @default 'content-box'
+     */
+    box?: 'content-box' | 'border-box';
+}
+
 declare const UseElementBounding: vue_demi.DefineComponent<ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ResizeObserverOptions & RenderableComponent>, {}>;
 
 declare const UseElementSize: vue_demi.DefineComponent<ElementSize & ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize & ResizeObserverOptions & RenderableComponent>, {}>;
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
+declare const UseEyeDropper: vue_demi.DefineComponent<{
+    sRGBHex: StringConstructor;
+}, () => 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<{
+    sRGBHex?: unknown;
+} & {} & {
+    sRGBHex?: string | undefined;
+}>, {}>;
+
 declare const UseFullscreen: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
 declare const UseGeolocation: vue_demi.DefineComponent<GeolocationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<GeolocationOptions>, {}>;
@@ -170,4 +178,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, 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, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, VOnClickOutside };

package/index.iife.js

@@ -119,18 +119,25 @@
   }
 
   function onClickOutside(target, handler, options = {}) {
-    const { window = defaultWindow, event = "pointerdown" } = options;
+    const { window = defaultWindow } = options;
     if (!window)
       return;
-    const listener = (event2) => {
+    const shouldListen = vueDemi.ref(true);
+    const listener = (event) => {
       const el = unrefElement(target);
-      if (!el)
-        return;
-      if (el === event2.target || event2.composedPath().includes(el))
+      if (!el || el === event.target || event.composedPath().includes(el) || !shouldListen.value)
         return;
-      handler(event2);
+      handler(event);
     };
-    return useEventListener(window, event, listener, { passive: true });
+    const cleanup = [
+      useEventListener(window, "click", listener, { passive: true, capture: true }),
+      useEventListener(window, "pointerdown", (e) => {
+        const el = unrefElement(target);
+        shouldListen.value = !!el && !e.composedPath().includes(el);
+      }, { passive: true })
+    ];
+    const stop = () => cleanup.forEach((fn) => fn());
+    return stop;
   }
 
   const VOnClickOutside = (el, binding) => {
@@ -295,7 +302,7 @@
     props: ["box", "as"],
     setup(props, { slots }) {
       const target = vueDemi.ref();
-      const data = vueDemi.reactive(core.useElementBounding(target, { box: props.box, window: props.window }));
+      const data = vueDemi.reactive(core.useElementBounding(target));
       return () => {
         if (slots.default)
           return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
@@ -331,6 +338,20 @@
     }
   });
 
+  const UseEyeDropper = vueDemi.defineComponent({
+    name: "UseEyeDropper",
+    props: {
+      sRGBHex: String
+    },
+    setup(props, { slots }) {
+      const data = vueDemi.reactive(core.useEyeDropper());
+      return () => {
+        if (slots.default)
+          return slots.default(data);
+      };
+    }
+  });
+
   const UseFullscreen = vueDemi.defineComponent({
     name: "UseFullscreen",
     props: ["as"],
@@ -704,6 +725,7 @@
   exports.UseElementBounding = UseElementBounding;
   exports.UseElementSize = UseElementSize;
   exports.UseElementVisibility = UseElementVisibility;
+  exports.UseEyeDropper = UseEyeDropper;
   exports.UseFullscreen = UseFullscreen;
   exports.UseGeolocation = UseGeolocation;
   exports.UseIdle = UseIdle;

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 u=s.VueCompositionAPI;if(u){for(var c in u)n[c]=u[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(f,l,p){return Array.isArray(f)?(f.length=Math.max(f.length,l),f.splice(l,1,p),p):(f[l]=p,p)},n.del=function(f,l){if(Array.isArray(f)){f.splice(l,1);return}delete f[l]}}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,u){"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 f(r){var e;const t=n.unref(r);return(e=t==null?void 0:t.$el)!=null?e:t}const l=u.isClient?window:void 0;function p(...r){let e,t,o,i;if(u.isString(r[0])?([t,o,i]=r,e=l):[e,t,o,i]=r,!e)return u.noop;let d=u.noop;const P=n.watch(()=>n.unref(e),O=>{d(),!!O&&(O.addEventListener(t,o,i),d=()=>{O.removeEventListener(t,o,i),d=u.noop})},{immediate:!0,flush:"post"}),_=()=>{P(),d()};return u.tryOnScopeDispose(_),_}function I(r,e,t={}){const{window:o=l,event:i="pointerdown"}=t;return o?p(o,i,P=>{const _=f(r);!_||_===P.target||P.composedPath().includes(_)||e(P)},{passive:!0}):void 0}const M=(r,e)=>{I(r,e.value)},N=n.defineComponent({name:"UseActiveElement",setup(r,{slots:e}){const t=n.reactive({element:a.useActiveElement()});return()=>{if(e.default)return e.default(t)}}}),A=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)}}}),B=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:u.useToggle(t)});return()=>{if(e.default)return e.default(o)}}}),F=n.defineComponent({name:"UseDeviceMotion",setup(r,{slots:e}){const t=n.reactive(a.useDeviceMotion());return()=>{if(e.default)return e.default(t)}}}),W=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"],setup(r,{slots:e}){const t=n.reactive(a.useDevicesList(r));return()=>{if(e.default)return e.default(t)}}}),R=n.defineComponent({name:"UseDocumentVisibility",setup(r,{slots:e}){const t=n.reactive({visibility:a.useDocumentVisibility()});return()=>{if(e.default)return e.default(t)}}});var G=Object.defineProperty,K=Object.defineProperties,H=Object.getOwnPropertyDescriptors,g=Object.getOwnPropertySymbols,q=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable,U=(r,e,t)=>e in r?G(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,Q=(r,e)=>{for(var t in e||(e={}))q.call(e,t)&&U(r,t,e[t]);if(g)for(var t of g(e))J.call(e,t)&&U(r,t,e[t]);return r},X=(r,e)=>K(r,H(e));const Y=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,X(Q({},r),{initialValue:o})));return()=>{if(e.default)return n.h(r.as||"div",{ref:t,style:`touch-action:none;${i.style}`},e.default(i))}}}),Z=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(r,{slots:e}){const t=n.ref(),o=n.reactive(a.useElementBounding(t,{box:r.box,window:r.window}));return()=>{if(e.default)return n.h(r.as||"div",{ref:t},e.default(o))}}}),x=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))}}}),D=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))}}}),ee=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))}}}),te=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)}}}),re=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)}}}),ne=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)}}}),ae=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 se=Object.defineProperty,oe=Object.defineProperties,ie=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,ue=Object.prototype.hasOwnProperty,fe=Object.prototype.propertyIsEnumerable,v=(r,e,t)=>e in r?se(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,le=(r,e)=>{for(var t in e||(e={}))ue.call(e,t)&&v(r,t,e[t]);if(m)for(var t of m(e))fe.call(e,t)&&v(r,t,e[t]);return r},de=(r,e)=>oe(r,ie(e));const ce=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(r,{slots:e}){const t=n.ref(),o=n.reactive(a.useMousePressed(de(le({},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 _e=Object.defineProperty,Pe=Object.defineProperties,Oe=Object.getOwnPropertyDescriptors,w=Object.getOwnPropertySymbols,ge=Object.prototype.hasOwnProperty,Ue=Object.prototype.propertyIsEnumerable,y=(r,e,t)=>e in r?_e(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)&&y(r,t,e[t]);if(w)for(var t of w(e))Ue.call(e,t)&&y(r,t,e[t]);return r},ve=(r,e)=>Pe(r,Oe(e));const we=n.defineComponent({name:"UseNow",props:["interval"],setup(r,{slots:e}){const t=n.reactive(a.useNow(ve(me({},r),{controls:!0})));return()=>{if(e.default)return e.default(t)}}}),ye=n.defineComponent({name:"UseOnline",setup(r,{slots:e}){const t=n.reactive({isOnline:a.useOnline()});return()=>{if(e.default)return e.default(t)}}}),he=n.defineComponent({name:"UsePageLeave",setup(r,{slots:e}){const t=n.reactive({isLeft:a.usePageLeave()});return()=>{if(e.default)return e.default(t)}}});var be=Object.defineProperty,$e=Object.defineProperties,Ve=Object.getOwnPropertyDescriptors,h=Object.getOwnPropertySymbols,Ce=Object.prototype.hasOwnProperty,Ee=Object.prototype.propertyIsEnumerable,b=(r,e,t)=>e in r?be(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,Se=(r,e)=>{for(var t in e||(e={}))Ce.call(e,t)&&b(r,t,e[t]);if(h)for(var t of h(e))Ee.call(e,t)&&b(r,t,e[t]);return r},je=(r,e)=>$e(r,Ve(e));const Le=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(r,{slots:e}){const t=n.ref(null),o=n.reactive(a.usePointer(je(Se({},r),{target:r.target==="self"?t:l})));return()=>{if(e.default)return e.default(o,{ref:t})}}}),Ie=n.defineComponent({name:"UsePreferredColorScheme",setup(r,{slots:e}){const t=n.reactive({colorScheme:a.usePreferredColorScheme()});return()=>{if(e.default)return e.default(t)}}}),Me=n.defineComponent({name:"UsePreferredDark",setup(r,{slots:e}){const t=n.reactive({prefersDark:a.usePreferredDark()});return()=>{if(e.default)return e.default(t)}}}),Ne=n.defineComponent({name:"UsePreferredLanguages",setup(r,{slots:e}){const t=n.reactive({languages:a.usePreferredLanguages()});return()=>{if(e.default)return e.default(t)}}});var Ae=Object.defineProperty,Te=Object.defineProperties,Be=Object.getOwnPropertyDescriptors,$=Object.getOwnPropertySymbols,Fe=Object.prototype.hasOwnProperty,We=Object.prototype.propertyIsEnumerable,V=(r,e,t)=>e in r?Ae(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,ze=(r,e)=>{for(var t in e||(e={}))Fe.call(e,t)&&V(r,t,e[t]);if($)for(var t of $(e))We.call(e,t)&&V(r,t,e[t]);return r},ke=(r,e)=>Te(r,Be(e));const Re=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,ke(ze({},r),{controls:!0})));return()=>{if(e.default)return e.default(o)}}});var Ge=Object.defineProperty,Ke=Object.defineProperties,He=Object.getOwnPropertyDescriptors,C=Object.getOwnPropertySymbols,qe=Object.prototype.hasOwnProperty,Je=Object.prototype.propertyIsEnumerable,E=(r,e,t)=>e in r?Ge(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,Qe=(r,e)=>{for(var t in e||(e={}))qe.call(e,t)&&E(r,t,e[t]);if(C)for(var t of C(e))Je.call(e,t)&&E(r,t,e[t]);return r},Xe=(r,e)=>Ke(r,He(e));const Ye=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(r,{slots:e}){const t=n.reactive(a.useTimestamp(Xe(Qe({},r),{controls:!0})));return()=>{if(e.default)return e.default(t)}}});var Ze=Object.defineProperty,S=Object.getOwnPropertySymbols,xe=Object.prototype.hasOwnProperty,De=Object.prototype.propertyIsEnumerable,j=(r,e,t)=>e in r?Ze(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,L=(r,e)=>{for(var t in e||(e={}))xe.call(e,t)&&j(r,t,e[t]);if(S)for(var t of S(e))De.call(e,t)&&j(r,t,e[t]);return r};const et=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",L({},o),[n.h("div",L({},i.value),t.value.map(d=>n.h("div",{style:{overFlow:"hidden",height:d.height}},e.default?e.default(d):"Please set content!")))])}}),tt=n.defineComponent({name:"UseWindowFocus",setup(r,{slots:e}){const t=n.reactive({focused:a.useWindowFocus()});return()=>{if(e.default)return e.default(t)}}}),rt=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=N,s.UseBattery=A,s.UseBrowserLocation=T,s.UseDark=B,s.UseDeviceMotion=F,s.UseDeviceOrientation=W,s.UseDevicePixelRatio=z,s.UseDevicesList=k,s.UseDocumentVisibility=R,s.UseDraggable=Y,s.UseElementBounding=Z,s.UseElementSize=x,s.UseElementVisibility=D,s.UseFullscreen=ee,s.UseGeolocation=te,s.UseIdle=re,s.UseMouse=ne,s.UseMouseInElement=ae,s.UseMousePressed=ce,s.UseNetwork=pe,s.UseNow=we,s.UseOnline=ye,s.UsePageLeave=he,s.UsePointer=Le,s.UsePreferredColorScheme=Ie,s.UsePreferredDark=Me,s.UsePreferredLanguages=Ne,s.UseTimeAgo=Re,s.UseTimestamp=Ye,s.UseVirtualList=et,s.UseWindowFocus=tt,s.UseWindowSize=rt,s.VOnClickOutside=M,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 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"],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);

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, 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, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
 import { isClient, isString, noop, tryOnScopeDispose, useToggle } from '@vueuse/shared';
 
 const OnClickOutside = defineComponent({
@@ -59,18 +59,25 @@ function useEventListener(...args) {
 }
 
 function onClickOutside(target, handler, options = {}) {
-  const { window = defaultWindow, event = "pointerdown" } = options;
+  const { window = defaultWindow } = options;
   if (!window)
     return;
-  const listener = (event2) => {
+  const shouldListen = ref(true);
+  const listener = (event) => {
     const el = unrefElement(target);
-    if (!el)
-      return;
-    if (el === event2.target || event2.composedPath().includes(el))
+    if (!el || el === event.target || event.composedPath().includes(el) || !shouldListen.value)
       return;
-    handler(event2);
+    handler(event);
   };
-  return useEventListener(window, event, listener, { passive: true });
+  const cleanup = [
+    useEventListener(window, "click", listener, { passive: true, capture: true }),
+    useEventListener(window, "pointerdown", (e) => {
+      const el = unrefElement(target);
+      shouldListen.value = !!el && !e.composedPath().includes(el);
+    }, { passive: true })
+  ];
+  const stop = () => cleanup.forEach((fn) => fn());
+  return stop;
 }
 
 const VOnClickOutside = (el, binding) => {
@@ -235,7 +242,7 @@ const UseElementBounding = defineComponent({
   props: ["box", "as"],
   setup(props, { slots }) {
     const target = ref();
-    const data = reactive(useElementBounding(target, { box: props.box, window: props.window }));
+    const data = reactive(useElementBounding(target));
     return () => {
       if (slots.default)
         return h(props.as || "div", { ref: target }, slots.default(data));
@@ -271,6 +278,20 @@ const UseElementVisibility = defineComponent({
   }
 });
 
+const UseEyeDropper = defineComponent({
+  name: "UseEyeDropper",
+  props: {
+    sRGBHex: String
+  },
+  setup(props, { slots }) {
+    const data = reactive(useEyeDropper());
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+
 const UseFullscreen = defineComponent({
   name: "UseFullscreen",
   props: ["as"],
@@ -630,4 +651,4 @@ const UseWindowSize = defineComponent({
   }
 });
 
-export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, 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, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, VOnClickOutside };

package/package.json

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