@vueuse/components 6.9.0 → 7.0.1

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) => {
@@ -169,7 +176,7 @@ const UseDevicePixelRatio = vueDemi.defineComponent({
 
 const UseDevicesList = vueDemi.defineComponent({
   name: "UseDevicesList",
-  props: ["onUpdated", "requestPermissions"],
+  props: ["onUpdated", "requestPermissions", "constraints"],
   setup(props, { slots }) {
     const data = vueDemi.reactive(core.useDevicesList(props));
     return () => {
@@ -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));

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,6 +65,20 @@ 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>, {}>;

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) => {
@@ -225,7 +232,7 @@
 
   const UseDevicesList = vueDemi.defineComponent({
     name: "UseDevicesList",
-    props: ["onUpdated", "requestPermissions"],
+    props: ["onUpdated", "requestPermissions", "constraints"],
     setup(props, { slots }) {
       const data = vueDemi.reactive(core.useDevicesList(props));
       return () => {
@@ -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));

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 p in u)n[p]=u[p];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 p in a)n[p]=a[p];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,c){return Array.isArray(f)?(f.length=Math.max(f.length,l),f.splice(l,1,c),c):(f[l]=c,c)},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 p=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 c(...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),g=>{d(),!!g&&(g.addEventListener(t,o,i),d=()=>{g.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?c(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)}}}),B=n.defineComponent({name:"UseBrowserLocation",setup(r,{slots:e}){const t=n.reactive(a.useBrowserLocation());return()=>{if(e.default)return e.default(t)}}}),T=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)}}}),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)}}}),k=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,O=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(O)for(var t of O(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:"UseEyeDropper",props:{sRGBHex:String},setup(r,{slots:e}){const t=n.reactive(a.useEyeDropper());return()=>{if(e.default)return e.default(t)}}}),te=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))}}}),re=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)}}}),ne=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)}}}),ae=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)}}}),se=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 oe=Object.defineProperty,ie=Object.defineProperties,ue=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,fe=Object.prototype.hasOwnProperty,le=Object.prototype.propertyIsEnumerable,v=(r,e,t)=>e in r?oe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,de=(r,e)=>{for(var t in e||(e={}))fe.call(e,t)&&v(r,t,e[t]);if(m)for(var t of m(e))le.call(e,t)&&v(r,t,e[t]);return r},pe=(r,e)=>ie(r,ue(e));const ce=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(r,{slots:e}){const t=n.ref(),o=n.reactive(a.useMousePressed(pe(de({},r),{target:t})));return()=>{if(e.default)return n.h(r.as||"div",{ref:t},e.default(o))}}}),_e=n.defineComponent({name:"UseNetwork",setup(r,{slots:e}){const t=n.reactive(a.useNetwork());return()=>{if(e.default)return e.default(t)}}});var Pe=Object.defineProperty,ge=Object.defineProperties,Oe=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertySymbols,Ue=Object.prototype.hasOwnProperty,me=Object.prototype.propertyIsEnumerable,w=(r,e,t)=>e in r?Pe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,ve=(r,e)=>{for(var t in e||(e={}))Ue.call(e,t)&&w(r,t,e[t]);if(y)for(var t of y(e))me.call(e,t)&&w(r,t,e[t]);return r},ye=(r,e)=>ge(r,Oe(e));const we=n.defineComponent({name:"UseNow",props:["interval"],setup(r,{slots:e}){const t=n.reactive(a.useNow(ye(ve({},r),{controls:!0})));return()=>{if(e.default)return e.default(t)}}}),he=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 $e=Object.defineProperty,Ve=Object.defineProperties,Ce=Object.getOwnPropertyDescriptors,h=Object.getOwnPropertySymbols,Ee=Object.prototype.hasOwnProperty,Se=Object.prototype.propertyIsEnumerable,b=(r,e,t)=>e in r?$e(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,je=(r,e)=>{for(var t in e||(e={}))Ee.call(e,t)&&b(r,t,e[t]);if(h)for(var t of h(e))Se.call(e,t)&&b(r,t,e[t]);return r},Le=(r,e)=>Ve(r,Ce(e));const Ie=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(r,{slots:e}){const t=n.ref(null),o=n.reactive(a.usePointer(Le(je({},r),{target:r.target==="self"?t:l})));return()=>{if(e.default)return e.default(o,{ref:t})}}}),Me=n.defineComponent({name:"UsePreferredColorScheme",setup(r,{slots:e}){const t=n.reactive({colorScheme:a.usePreferredColorScheme()});return()=>{if(e.default)return e.default(t)}}}),Ne=n.defineComponent({name:"UsePreferredDark",setup(r,{slots:e}){const t=n.reactive({prefersDark:a.usePreferredDark()});return()=>{if(e.default)return e.default(t)}}}),Ae=n.defineComponent({name:"UsePreferredLanguages",setup(r,{slots:e}){const t=n.reactive({languages:a.usePreferredLanguages()});return()=>{if(e.default)return e.default(t)}}});var Be=Object.defineProperty,Te=Object.defineProperties,Fe=Object.getOwnPropertyDescriptors,$=Object.getOwnPropertySymbols,We=Object.prototype.hasOwnProperty,ze=Object.prototype.propertyIsEnumerable,V=(r,e,t)=>e in r?Be(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,Re=(r,e)=>{for(var t in e||(e={}))We.call(e,t)&&V(r,t,e[t]);if($)for(var t of $(e))ze.call(e,t)&&V(r,t,e[t]);return r},ke=(r,e)=>Te(r,Fe(e));const Ge=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(Re({},r),{controls:!0})));return()=>{if(e.default)return e.default(o)}}});var Ke=Object.defineProperty,He=Object.defineProperties,qe=Object.getOwnPropertyDescriptors,C=Object.getOwnPropertySymbols,Je=Object.prototype.hasOwnProperty,Qe=Object.prototype.propertyIsEnumerable,E=(r,e,t)=>e in r?Ke(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)&&E(r,t,e[t]);if(C)for(var t of C(e))Qe.call(e,t)&&E(r,t,e[t]);return r},Ye=(r,e)=>He(r,qe(e));const Ze=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(r,{slots:e}){const t=n.reactive(a.useTimestamp(Ye(Xe({},r),{controls:!0})));return()=>{if(e.default)return e.default(t)}}});var xe=Object.defineProperty,S=Object.getOwnPropertySymbols,De=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable,j=(r,e,t)=>e in r?xe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,L=(r,e)=>{for(var t in e||(e={}))De.call(e,t)&&j(r,t,e[t]);if(S)for(var t of S(e))et.call(e,t)&&j(r,t,e[t]);return r};const tt=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!")))])}}),rt=n.defineComponent({name:"UseWindowFocus",setup(r,{slots:e}){const t=n.reactive({focused:a.useWindowFocus()});return()=>{if(e.default)return e.default(t)}}}),nt=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=p,s.UseActiveElement=N,s.UseBattery=A,s.UseBrowserLocation=B,s.UseDark=T,s.UseDeviceMotion=F,s.UseDeviceOrientation=W,s.UseDevicePixelRatio=z,s.UseDevicesList=R,s.UseDocumentVisibility=k,s.UseDraggable=Y,s.UseElementBounding=Z,s.UseElementSize=x,s.UseElementVisibility=D,s.UseEyeDropper=ee,s.UseFullscreen=te,s.UseGeolocation=re,s.UseIdle=ne,s.UseMouse=ae,s.UseMouseInElement=se,s.UseMousePressed=ce,s.UseNetwork=_e,s.UseNow=we,s.UseOnline=he,s.UsePageLeave=be,s.UsePointer=Ie,s.UsePreferredColorScheme=Me,s.UsePreferredDark=Ne,s.UsePreferredLanguages=Ae,s.UseTimeAgo=Ge,s.UseTimestamp=Ze,s.UseVirtualList=tt,s.UseWindowFocus=rt,s.UseWindowSize=nt,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","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);

package/index.mjs

@@ -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) => {
@@ -165,7 +172,7 @@ const UseDevicePixelRatio = defineComponent({
 
 const UseDevicesList = defineComponent({
   name: "UseDevicesList",
-  props: ["onUpdated", "requestPermissions"],
+  props: ["onUpdated", "requestPermissions", "constraints"],
   setup(props, { slots }) {
     const data = reactive(useDevicesList(props));
     return () => {
@@ -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));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "6.9.0",
+  "version": "7.0.1",
   "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.9.0",
-    "@vueuse/shared": "6.9.0",
+    "@vueuse/core": "7.0.1",
+    "@vueuse/shared": "7.0.1",
     "vue-demi": "*"
   }
 }