headlessui-float-vue - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/float.d.ts

 import { Ref, PropType, VNode } from 'vue';
-import { Placement, Strategy, Middleware } from '@floating-ui/dom';
-import { AuthUpdateOptions } from './useFloating';
 import { OriginClassResolver } from './origin-class-resolvers';
+import type { Options as OffsetOptions } from '@floating-ui/core/src/middleware/offset';
+import type { Options as ShiftOptions } from '@floating-ui/core/src/middleware/shift';
+import type { Options as FlipOptions } from '@floating-ui/core/src/middleware/flip';
+import type { Options as AutoPlacementOptions } from '@floating-ui/core/src/middleware/autoPlacement';
+import type { Options as HideOptions } from '@floating-ui/core/src/middleware/hide';
+import type { Placement, Strategy, Middleware } from '@floating-ui/dom';
+import type { Options as AutoUpdateOptions } from '@floating-ui/dom/src/autoUpdate';
 interface ArrowState {
@@ -21,9 +26,13 @@ ref: Ref<HTMLElement | null>;
     };
-    offset: NumberConstructor;
+    offset: PropType<OffsetOptions>;
     shift: {
-        type: (NumberConstructor | BooleanConstructor)[];
+        type: PropType<number | boolean | (ShiftOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        })>;
         default: boolean;
     };
     flip: {
-        type: BooleanConstructor;
+        type: PropType<boolean | (FlipOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        })>;
         default: boolean;
@@ -36,11 +45,15 @@ };
     autoPlacement: {
-        type: (BooleanConstructor | ObjectConstructor)[];
+        type: PropType<boolean | (AutoPlacementOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        })>;
         default: boolean;
     };
     hide: {
-        type: BooleanConstructor;
+        type: PropType<boolean | (HideOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        })>;
         default: boolean;
     };
     autoUpdate: {
-        type: PropType<boolean | AuthUpdateOptions>;
+        type: PropType<boolean | AutoUpdateOptions>;
         default: boolean;
@@ -58,2 +71,7 @@ };
     leaveTo: StringConstructor;
+    originClass: PropType<string | OriginClassResolver>;
+    tailwindcssOriginClass: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     portal: {
@@ -63,9 +81,15 @@ type: (StringConstructor | BooleanConstructor)[];
     };
-    originClass: PropType<string | OriginClassResolver>;
-    tailwindcssOriginClass: {
+    wrapFloating: {
         type: BooleanConstructor;
         default: boolean;
     };
+    transform: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     middleware: {
-        type: PropType<Middleware[]>;
+        type: PropType<Middleware[] | ((refs: {
+            referenceEl: Ref<HTMLElement | null>;
+            floatingEl: Ref<HTMLElement | null>;
+        }) => Middleware[])>;
         default: () => never[];
@@ -75,3 +99,3 @@ };
     [key: string]: any;
-}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show" | "hide")[], "show" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show" | "hide" | "update")[], "show" | "hide" | "update", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     placement: {
@@ -85,9 +109,13 @@ type: PropType<Placement>;
     };
-    offset: NumberConstructor;
+    offset: PropType<OffsetOptions>;
     shift: {
-        type: (NumberConstructor | BooleanConstructor)[];
+        type: PropType<number | boolean | (ShiftOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        })>;
         default: boolean;
     };
     flip: {
-        type: BooleanConstructor;
+        type: PropType<boolean | (FlipOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        })>;
         default: boolean;
@@ -100,11 +128,15 @@ };
     autoPlacement: {
-        type: (BooleanConstructor | ObjectConstructor)[];
+        type: PropType<boolean | (AutoPlacementOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        })>;
         default: boolean;
     };
     hide: {
-        type: BooleanConstructor;
+        type: PropType<boolean | (HideOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+            boundary: import("@floating-ui/dom").Boundary;
+        })>;
         default: boolean;
     };
     autoUpdate: {
-        type: PropType<boolean | AuthUpdateOptions>;
+        type: PropType<boolean | AutoUpdateOptions>;
         default: boolean;
@@ -122,2 +154,7 @@ };
     leaveTo: StringConstructor;
+    originClass: PropType<string | OriginClassResolver>;
+    tailwindcssOriginClass: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     portal: {
@@ -127,9 +164,15 @@ type: (StringConstructor | BooleanConstructor)[];
     };
-    originClass: PropType<string | OriginClassResolver>;
-    tailwindcssOriginClass: {
+    wrapFloating: {
         type: BooleanConstructor;
         default: boolean;
     };
+    transform: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     middleware: {
-        type: PropType<Middleware[]>;
+        type: PropType<Middleware[] | ((refs: {
+            referenceEl: Ref<HTMLElement | null>;
+            floatingEl: Ref<HTMLElement | null>;
+        }) => Middleware[])>;
         default: () => never[];
@@ -140,15 +183,29 @@ };
     onHide?: ((...args: any[]) => any) | undefined;
+    onUpdate?: ((...args: any[]) => any) | undefined;
 }, {
     placement: Placement;
     strategy: Strategy;
-    middleware: Middleware[];
+    middleware: Middleware[] | ((refs: {
+        referenceEl: Ref<HTMLElement | null>;
+        floatingEl: Ref<HTMLElement | null>;
+    }) => Middleware[]);
     arrow: number | boolean;
-    hide: boolean;
-    shift: number | boolean;
-    flip: boolean;
-    autoPlacement: boolean | Record<string, any>;
-    autoUpdate: boolean | AuthUpdateOptions;
+    hide: boolean | (HideOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+        boundary: import("@floating-ui/dom").Boundary;
+    });
+    shift: number | boolean | (ShiftOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+        boundary: import("@floating-ui/dom").Boundary;
+    });
+    flip: boolean | (FlipOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+        boundary: import("@floating-ui/dom").Boundary;
+    });
+    autoPlacement: boolean | (AutoPlacementOptions & Omit<import("@floating-ui/core/src/detectOverflow").Options, "boundary"> & {
+        boundary: import("@floating-ui/dom").Boundary;
+    });
+    autoUpdate: boolean | AutoUpdateOptions;
     zIndex: number;
+    tailwindcssOriginClass: boolean;
     portal: string | boolean;
-    tailwindcssOriginClass: boolean;
+    wrapFloating: boolean;
+    transform: boolean;
 }>;
@@ -155,0 +212,0 @@ export declare const FloatArrow: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {

dist/headlessui-float.cjs.js

@@ -1,1 +0,1 @@
-"use strict";var Ie=Object.defineProperty,Ve=Object.defineProperties;var ze=Object.getOwnPropertyDescriptors;var Z=Object.getOwnPropertySymbols;var pe=Object.prototype.hasOwnProperty,ve=Object.prototype.propertyIsEnumerable;var ye=(e,t,n)=>t in e?Ie(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,E=(e,t)=>{for(var n in t||(t={}))pe.call(t,n)&&ye(e,n,t[n]);if(Z)for(var n of Z(t))ve.call(t,n)&&ye(e,n,t[n]);return e},L=(e,t)=>Ve(e,ze(t));var _=(e,t)=>{var n={};for(var o in e)pe.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(e!=null&&Z)for(var o of Z(e))t.indexOf(o)<0&&ve.call(e,o)&&(n[o]=e[o]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var v=require("vue");function M(e){return e.split("-")[0]}function I(e){return e.split("-")[1]}function G(e){return["top","bottom"].includes(M(e))?"x":"y"}function de(e){return e==="y"?"height":"width"}function we(e,t,n){let{reference:o,floating:r}=e;const a=o.x+o.width/2-r.width/2,i=o.y+o.height/2-r.height/2,l=G(t),s=de(l),f=o[s]/2-r[s]/2,d=l==="x";let c;switch(M(t)){case"top":c={x:a,y:o.y-r.height};break;case"bottom":c={x:a,y:o.y+o.height};break;case"right":c={x:o.x+o.width,y:i};break;case"left":c={x:o.x-r.width,y:i};break;default:c={x:o.x,y:o.y}}switch(I(t)){case"start":c[l]-=f*(n&&d?-1:1);break;case"end":c[l]+=f*(n&&d?-1:1)}return c}const Ue=async(e,t,n)=>{const{placement:o="bottom",strategy:r="absolute",middleware:a=[],platform:i}=n,l=await(i.isRTL==null?void 0:i.isRTL(t));let s=await i.getElementRects({reference:e,floating:t,strategy:r}),{x:f,y:d}=we(s,o,l),c=o,m={};for(let b=0;b<a.length;b++){const{name:h,fn:y}=a[b],{x:p,y:g,data:x,reset:u}=await y({x:f,y:d,initialPlacement:o,placement:c,strategy:r,middlewareData:m,rects:s,platform:i,elements:{reference:e,floating:t}});f=p!=null?p:f,d=g!=null?g:d,m=L(E({},m),{[h]:E(E({},m[h]),x)}),u&&(typeof u=="object"&&(u.placement&&(c=u.placement),u.rects&&(s=u.rects===!0?await i.getElementRects({reference:e,floating:t,strategy:r}):u.rects),{x:f,y:d}=we(s,c,l)),b=-1)}return{x:f,y:d,placement:c,strategy:r,middlewareData:m}};function Le(e){return typeof e!="number"?function(t){return E({top:0,right:0,bottom:0,left:0},t)}(e):{top:e,right:e,bottom:e,left:e}}function te(e){return L(E({},e),{top:e.y,left:e.x,right:e.x+e.width,bottom:e.y+e.height})}async function q(e,t){var n;t===void 0&&(t={});const{x:o,y:r,platform:a,rects:i,elements:l,strategy:s}=e,{boundary:f="clippingAncestors",rootBoundary:d="viewport",elementContext:c="floating",altBoundary:m=!1,padding:b=0}=t,h=Le(b),y=l[m?c==="floating"?"reference":"floating":c],p=te(await a.getClippingRect({element:(n=await(a.isElement==null?void 0:a.isElement(y)))==null||n?y:y.contextElement||await(a.getDocumentElement==null?void 0:a.getDocumentElement(l.floating)),boundary:f,rootBoundary:d})),g=te(a.convertOffsetParentRelativeRectToViewportRelativeRect?await a.convertOffsetParentRelativeRectToViewportRelativeRect({rect:c==="floating"?L(E({},i.floating),{x:o,y:r}):i.reference,offsetParent:await(a.getOffsetParent==null?void 0:a.getOffsetParent(l.floating)),strategy:s}):i[c]);return{top:p.top-g.top+h.top,bottom:g.bottom-p.bottom+h.bottom,left:p.left-g.left+h.left,right:g.right-p.right+h.right}}const _e=Math.min,Xe=Math.max;function fe(e,t,n){return Xe(e,_e(t,n))}const Ye=e=>({name:"arrow",options:e,async fn(t){const{element:n,padding:o=0}=e!=null?e:{},{x:r,y:a,placement:i,rects:l,platform:s}=t;if(n==null)return{};const f=Le(o),d={x:r,y:a},c=G(i),m=de(c),b=await s.getDimensions(n),h=c==="y"?"top":"left",y=c==="y"?"bottom":"right",p=l.reference[m]+l.reference[c]-d[c]-l.floating[m],g=d[c]-l.reference[c],x=await(s.getOffsetParent==null?void 0:s.getOffsetParent(n)),u=x?c==="y"?x.clientHeight||0:x.clientWidth||0:0,R=p/2-g/2,T=f[h],w=u-b[m]-f[y],C=u/2-b[m]/2+R,O=fe(T,C,w);return{data:{[c]:O,centerOffset:C-O}}}}),qe={left:"right",right:"left",bottom:"top",top:"bottom"};function ne(e){return e.replace(/left|right|bottom|top/g,t=>qe[t])}function $e(e,t,n){n===void 0&&(n=!1);const o=I(e),r=G(e),a=de(r);let i=r==="x"?o===(n?"end":"start")?"right":"left":o==="start"?"bottom":"top";return t.reference[a]>t.floating[a]&&(i=ne(i)),{main:i,cross:ne(i)}}const Ge={start:"end",end:"start"};function se(e){return e.replace(/start|end/g,t=>Ge[t])}const Pe=["top","right","bottom","left"],Je=Pe.reduce((e,t)=>e.concat(t,t+"-start",t+"-end"),[]),Ke=function(e){return e===void 0&&(e={}),{name:"autoPlacement",options:e,async fn(t){var n,o,r,a,i;const{x:l,y:s,rects:f,middlewareData:d,placement:c,platform:m,elements:b}=t,Q=e,{alignment:h=null,allowedPlacements:y=Je,autoAlignment:p=!0}=Q,g=_(Q,["alignment","allowedPlacements","autoAlignment"]),x=function(A,j,U){return(A?[...U.filter(P=>I(P)===A),...U.filter(P=>I(P)!==A)]:U.filter(P=>M(P)===P)).filter(P=>!A||I(P)===A||!!j&&se(P)!==P)}(h,p,y),u=await q(t,g),R=(n=(o=d.autoPlacement)==null?void 0:o.index)!=null?n:0,T=x[R];if(T==null)return{};const{main:w,cross:C}=$e(T,f,await(m.isRTL==null?void 0:m.isRTL(b.floating)));if(c!==T)return{x:l,y:s,reset:{placement:x[0]}};const O=[u[M(T)],u[w],u[C]],S=[...(r=(a=d.autoPlacement)==null?void 0:a.overflows)!=null?r:[],{placement:T,overflows:O}],$=x[R+1];if($)return{data:{index:R+1,overflows:S},reset:{placement:$}};const B=S.slice().sort((A,j)=>A.overflows[0]-j.overflows[0]),z=(i=B.find(A=>{let{overflows:j}=A;return j.every(U=>U<=0)}))==null?void 0:i.placement,K=z!=null?z:B[0].placement;return K!==c?{data:{index:R+1,overflows:S},reset:{placement:K}}:{}}}},Qe=function(e){return e===void 0&&(e={}),{name:"flip",options:e,async fn(t){var n;const{placement:o,middlewareData:r,rects:a,initialPlacement:i,platform:l,elements:s}=t,O=e,{mainAxis:f=!0,crossAxis:d=!0,fallbackPlacements:c,fallbackStrategy:m="bestFit",flipAlignment:b=!0}=O,h=_(O,["mainAxis","crossAxis","fallbackPlacements","fallbackStrategy","flipAlignment"]),y=M(o),p=c||(y===i||!b?[ne(i)]:function(S){const $=ne(S);return[se(S),$,se($)]}(i)),g=[i,...p],x=await q(t,h),u=[];let R=((n=r.flip)==null?void 0:n.overflows)||[];if(f&&u.push(x[y]),d){const{main:S,cross:$}=$e(o,a,await(l.isRTL==null?void 0:l.isRTL(s.floating)));u.push(x[S],x[$])}if(R=[...R,{placement:o,overflows:u}],!u.every(S=>S<=0)){var T,w;const S=((T=(w=r.flip)==null?void 0:w.index)!=null?T:0)+1,$=g[S];if($)return{data:{index:S,overflows:R},reset:{placement:$}};let B="bottom";switch(m){case"bestFit":{var C;const z=(C=R.slice().sort((K,Q)=>K.overflows.filter(A=>A>0).reduce((A,j)=>A+j,0)-Q.overflows.filter(A=>A>0).reduce((A,j)=>A+j,0))[0])==null?void 0:C.placement;z&&(B=z);break}case"initialPlacement":B=i}if(o!==B)return{reset:{placement:B}}}return{}}}};function be(e,t){return{top:e.top-t.height,right:e.right-t.width,bottom:e.bottom-t.height,left:e.left-t.width}}function xe(e){return Pe.some(t=>e[t]>=0)}const Ze=function(e){let o=e===void 0?{}:e,{strategy:t="referenceHidden"}=o,n=_(o,["strategy"]);return{name:"hide",async fn(r){const{rects:a}=r;switch(t){case"referenceHidden":{const i=be(await q(r,L(E({},n),{elementContext:"reference"})),a.reference);return{data:{referenceHiddenOffsets:i,referenceHidden:xe(i)}}}case"escaped":{const i=be(await q(r,L(E({},n),{altBoundary:!0})),a.floating);return{data:{escapedOffsets:i,escaped:xe(i)}}}default:return{}}}}},et=function(e){return e===void 0&&(e=0),{name:"offset",options:e,async fn(t){const{x:n,y:o,placement:r,rects:a,platform:i,elements:l}=t,s=function(f,d,c,m){m===void 0&&(m=!1);const b=M(f),h=I(f),y=G(f)==="x",p=["left","top"].includes(b)?-1:1,g=m&&y?-1:1,x=typeof c=="function"?c(L(E({},d),{placement:f})):c,u=typeof x=="number";let{mainAxis:R,crossAxis:T,alignmentAxis:w}=u?{mainAxis:x,crossAxis:0,alignmentAxis:null}:E({mainAxis:0,crossAxis:0,alignmentAxis:null},x);return h&&typeof w=="number"&&(T=h==="end"?-1*w:w),y?{x:T*g,y:R*p}:{x:R*p,y:T*g}}(r,a,e,await(i.isRTL==null?void 0:i.isRTL(l.floating)));return{x:n+s.x,y:o+s.y,data:s}}}};function tt(e){return e==="x"?"y":"x"}const nt=function(e){return e===void 0&&(e={}),{name:"shift",options:e,async fn(t){const{x:n,y:o,placement:r}=t,p=e,{mainAxis:a=!0,crossAxis:i=!1,limiter:l={fn:g=>{let{x,y:u}=g;return{x,y:u}}}}=p,s=_(p,["mainAxis","crossAxis","limiter"]),f={x:n,y:o},d=await q(t,s),c=G(M(r)),m=tt(c);let b=f[c],h=f[m];if(a){const g=c==="y"?"bottom":"right";b=fe(b+d[c==="y"?"top":"left"],b,b-d[g])}if(i){const g=m==="y"?"bottom":"right";h=fe(h+d[m==="y"?"top":"left"],h,h-d[g])}const y=l.fn(L(E({},t),{[c]:b,[m]:h}));return L(E({},y),{data:{x:y.x-n,y:y.y-o}})}}};function me(e){return(e==null?void 0:e.toString())==="[object Window]"}function k(e){if(e==null)return window;if(!me(e)){const t=e.ownerDocument;return t&&t.defaultView||window}return e}function J(e){return k(e).getComputedStyle(e)}function D(e){return me(e)?"":e?(e.nodeName||"").toLowerCase():""}function F(e){return e instanceof k(e).HTMLElement}function V(e){return e instanceof k(e).Element}function ge(e){return e instanceof k(e).ShadowRoot||e instanceof ShadowRoot}function le(e){const{overflow:t,overflowX:n,overflowY:o}=J(e);return/auto|scroll|overlay|hidden/.test(t+o+n)}function ot(e){return["table","td","th"].includes(D(e))}function Te(e){const t=navigator.userAgent.toLowerCase().includes("firefox"),n=J(e);return n.transform!=="none"||n.perspective!=="none"||n.contain==="paint"||["transform","perspective"].includes(n.willChange)||t&&n.willChange==="filter"||t&&!!n.filter&&n.filter!=="none"}const Re=Math.min,Y=Math.max,oe=Math.round;function W(e,t){t===void 0&&(t=!1);const n=e.getBoundingClientRect();let o=1,r=1;return t&&F(e)&&(o=e.offsetWidth>0&&oe(n.width)/e.offsetWidth||1,r=e.offsetHeight>0&&oe(n.height)/e.offsetHeight||1),{width:n.width/o,height:n.height/r,top:n.top/r,right:n.right/o,bottom:n.bottom/r,left:n.left/o,x:n.left/o,y:n.top/r}}function H(e){return(t=e,(t instanceof k(t).Node?e.ownerDocument:e.document)||window.document).documentElement;var t}function ae(e){return me(e)?{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}:{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}}function Fe(e){return W(H(e)).left+ae(e).scrollLeft}function rt(e,t,n){const o=F(t),r=H(t),a=W(e,o&&function(s){const f=W(s);return oe(f.width)!==s.offsetWidth||oe(f.height)!==s.offsetHeight}(t));let i={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if(o||!o&&n!=="fixed")if((D(t)!=="body"||le(r))&&(i=ae(t)),F(t)){const s=W(t,!0);l.x=s.x+t.clientLeft,l.y=s.y+t.clientTop}else r&&(l.x=Fe(r));return{x:a.left+i.scrollLeft-l.x,y:a.top+i.scrollTop-l.y,width:a.width,height:a.height}}function he(e){return D(e)==="html"?e:e.assignedSlot||e.parentNode||(ge(e)?e.host:null)||H(e)}function Ce(e){return F(e)&&getComputedStyle(e).position!=="fixed"?e.offsetParent:null}function ue(e){const t=k(e);let n=Ce(e);for(;n&&ot(n)&&getComputedStyle(n).position==="static";)n=Ce(n);return n&&(D(n)==="html"||D(n)==="body"&&getComputedStyle(n).position==="static"&&!Te(n))?t:n||function(o){let r=he(o);for(ge(r)&&(r=r.host);F(r)&&!["html","body"].includes(D(r));){if(Te(r))return r;r=r.parentNode}return null}(e)||t}function Ae(e){if(F(e))return{width:e.offsetWidth,height:e.offsetHeight};const t=W(e);return{width:t.width,height:t.height}}function je(e){const t=he(e);return["html","body","#document"].includes(D(t))?e.ownerDocument.body:F(t)&&le(t)?t:je(t)}function re(e,t){var n;t===void 0&&(t=[]);const o=je(e),r=o===((n=e.ownerDocument)==null?void 0:n.body),a=k(o),i=r?[a].concat(a.visualViewport||[],le(o)?o:[]):o,l=t.concat(i);return r?l:l.concat(re(he(i)))}function Oe(e,t){return t==="viewport"?te(function(n){const o=k(n),r=H(n),a=o.visualViewport;let i=r.clientWidth,l=r.clientHeight,s=0,f=0;return a&&(i=a.width,l=a.height,Math.abs(o.innerWidth/a.scale-a.width)<.01&&(s=a.offsetLeft,f=a.offsetTop)),{width:i,height:l,x:s,y:f}}(e)):V(t)?function(n){const o=W(n),r=o.top+n.clientTop,a=o.left+n.clientLeft;return{top:r,left:a,x:a,y:r,right:a+n.clientWidth,bottom:r+n.clientHeight,width:n.clientWidth,height:n.clientHeight}}(t):te(function(n){var o;const r=H(n),a=ae(n),i=(o=n.ownerDocument)==null?void 0:o.body,l=Y(r.scrollWidth,r.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),s=Y(r.scrollHeight,r.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0);let f=-a.scrollLeft+Fe(n);const d=-a.scrollTop;return J(i||r).direction==="rtl"&&(f+=Y(r.clientWidth,i?i.clientWidth:0)-l),{width:l,height:s,x:f,y:d}}(H(e)))}function it(e){const t=re(e),n=["absolute","fixed"].includes(J(e).position)&&F(e)?ue(e):e;return V(n)?t.filter(o=>V(o)&&function(r,a){const i=a.getRootNode==null?void 0:a.getRootNode();if(r.contains(a))return!0;if(i&&ge(i)){let l=a;do{if(l&&r===l)return!0;l=l.parentNode||l.host}while(l)}return!1}(o,n)&&D(o)!=="body"):[]}const lt={getClippingRect:function(e){let{element:t,boundary:n,rootBoundary:o}=e;const r=[...n==="clippingAncestors"?it(t):[].concat(n),o],a=r[0],i=r.reduce((l,s)=>{const f=Oe(t,s);return l.top=Y(f.top,l.top),l.right=Re(f.right,l.right),l.bottom=Re(f.bottom,l.bottom),l.left=Y(f.left,l.left),l},Oe(t,a));return{width:i.right-i.left,height:i.bottom-i.top,x:i.left,y:i.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{rect:t,offsetParent:n,strategy:o}=e;const r=F(n),a=H(n);if(n===a)return t;let i={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if((r||!r&&o!=="fixed")&&((D(n)!=="body"||le(a))&&(i=ae(n)),F(n))){const s=W(n,!0);l.x=s.x+n.clientLeft,l.y=s.y+n.clientTop}return L(E({},t),{x:t.x-i.scrollLeft+l.x,y:t.y-i.scrollTop+l.y})},isElement:V,getDimensions:Ae,getOffsetParent:ue,getDocumentElement:H,getElementRects:e=>{let{reference:t,floating:n,strategy:o}=e;return{reference:rt(t,ue(n),o),floating:L(E({},Ae(n)),{x:0,y:0})}},getClientRects:e=>Array.from(e.getClientRects()),isRTL:e=>J(e).direction==="rtl"};function at(e,t,n,o){o===void 0&&(o={});const{ancestorScroll:r=!0,ancestorResize:a=!0,elementResize:i=!0,animationFrame:l=!1}=o;let s=!1;const f=r&&!l,d=a&&!l,c=i&&!l,m=f||d?[...V(e)?re(e):[],...re(t)]:[];m.forEach(p=>{f&&p.addEventListener("scroll",n,{passive:!0}),d&&p.addEventListener("resize",n)});let b,h=null;c&&(h=new ResizeObserver(n),V(e)&&h.observe(e),h.observe(t));let y=l?W(e):null;return l&&function p(){if(s)return;const g=W(e);!y||g.x===y.x&&g.y===y.y&&g.width===y.width&&g.height===y.height||n(),y=g,b=requestAnimationFrame(p)}(),()=>{var p;s=!0,m.forEach(g=>{f&&g.removeEventListener("scroll",n),d&&g.removeEventListener("resize",n)}),(p=h)==null||p.disconnect(),h=null,l&&cancelAnimationFrame(b)}}const ct=(e,t,n)=>Ue(e,t,E({platform:lt},n));var ee=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},Ne="Expected a function",Se=0/0,ft="[object Symbol]",st=/^\s+|\s+$/g,ut=/^[-+]0x[0-9a-f]+$/i,dt=/^0b[01]+$/i,mt=/^0o[0-7]+$/i,gt=parseInt,ht=typeof ee=="object"&&ee&&ee.Object===Object&&ee,yt=typeof self=="object"&&self&&self.Object===Object&&self,pt=ht||yt||Function("return this")(),vt=Object.prototype,wt=vt.toString,bt=Math.max,xt=Math.min,ce=function(){return pt.Date.now()};function Tt(e,t,n){var o,r,a,i,l,s,f=0,d=!1,c=!1,m=!0;if(typeof e!="function")throw new TypeError(Ne);t=Ee(t)||0,ie(n)&&(d=!!n.leading,c="maxWait"in n,a=c?bt(Ee(n.maxWait)||0,t):a,m="trailing"in n?!!n.trailing:m);function b(w){var C=o,O=r;return o=r=void 0,f=w,i=e.apply(O,C),i}function h(w){return f=w,l=setTimeout(g,t),d?b(w):i}function y(w){var C=w-s,O=w-f,S=t-C;return c?xt(S,a-O):S}function p(w){var C=w-s,O=w-f;return s===void 0||C>=t||C<0||c&&O>=a}function g(){var w=ce();if(p(w))return x(w);l=setTimeout(g,y(w))}function x(w){return l=void 0,m&&o?b(w):(o=r=void 0,i)}function u(){l!==void 0&&clearTimeout(l),f=0,o=s=r=l=void 0}function R(){return l===void 0?i:x(ce())}function T(){var w=ce(),C=p(w);if(o=arguments,r=this,s=w,C){if(l===void 0)return h(s);if(c)return l=setTimeout(g,t),b(s)}return l===void 0&&(l=setTimeout(g,t)),i}return T.cancel=u,T.flush=R,T}function Rt(e,t,n){var o=!0,r=!0;if(typeof e!="function")throw new TypeError(Ne);return ie(n)&&(o="leading"in n?!!n.leading:o,r="trailing"in n?!!n.trailing:r),Tt(e,t,{leading:o,maxWait:t,trailing:r})}function ie(e){var t=typeof e;return!!e&&(t=="object"||t=="function")}function Ct(e){return!!e&&typeof e=="object"}function At(e){return typeof e=="symbol"||Ct(e)&&wt.call(e)==ft}function Ee(e){if(typeof e=="number")return e;if(At(e))return Se;if(ie(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=ie(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=e.replace(st,"");var n=dt.test(e);return n||mt.test(e)?gt(e.slice(2),n?2:8):ut.test(e)?Se:+e}var Ot=Rt;function N(e){var t;return e=v.unref(e),e==null?null:(t=e==null?void 0:e.$el)!=null?t:e}function De(e={}){const t=v.ref(null),n=v.ref(null),o=v.ref(void 0),r=v.ref(void 0),a=v.ref(e.placement||"bottom"),i=v.ref(e.strategy||"absolute"),l=v.shallowRef({});return{x:o,y:r,placement:a,strategy:i,middlewareData:l,update:()=>{const f=N(t),d=N(n);!f||!d||ct(f,d,{placement:e.placement,strategy:e.strategy,middleware:v.unref(e.middleware)}).then(c=>{o.value=c.x,r.value=c.y,a.value=c.placement,i.value=c.strategy,l.value=c.middlewareData})},reference:t,floating:n}}const St=e=>{const{padding:t}=e;return{name:"arrow",options:e,fn(n){const o=v.unref(e.element);return o?Ye({element:o,padding:t}).fn(n):{}}}},Et=["origin-bottom","origin-top","origin-right","origin-left","origin-bottom-left","origin-bottom-right","origin-top-left","origin-top-right"],We=e=>{switch(e){case"top":return"origin-bottom";case"bottom":return"origin-top";case"left":return"origin-right";case"right":return"origin-left";case"top-start":case"right-end":return"origin-bottom-left";case"top-end":case"left-end":return"origin-bottom-right";case"right-start":case"bottom-start":return"origin-top-left";case"left-start":case"bottom-end":return"origin-top-right";default:return""}};function He(e){return e.reduce((t,n)=>n.type===v.Fragment?t.concat(He(n.children)):t.concat(n),[])}function Lt(e){return e.filter(ke)}function ke(e){return e==null?!1:typeof e.type=="string"||typeof e.type=="object"||typeof e.type=="function"}function X(e){return e&&(e==null?void 0:e.nodeType)!==Node.COMMENT_NODE}const Be=Symbol();function Me(e){let t=v.inject(Be,null);if(t===null){let n=new Error(`<${e} /> must be in the <Float /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,Me),n}return t}const $t=v.defineComponent({name:"Float",props:{placement:{type:String,default:"bottom-start"},strategy:{type:String,default:"absolute"},offset:Number,shift:{type:[Boolean,Number],default:!1},flip:{type:Boolean,default:!1},arrow:{type:[Boolean,Number],default:!1},autoPlacement:{type:[Boolean,Object],default:!1},hide:{type:Boolean,default:!1},autoUpdate:{type:[Boolean,Object],default:!0},zIndex:{type:Number,default:9999},enter:String,enterFrom:String,enterTo:String,leave:String,leaveFrom:String,leaveTo:String,portal:{type:[Boolean,String],default:!1},originClass:[String,Function],tailwindcssOriginClass:{type:Boolean,default:!1},middleware:{type:Array,default:()=>[]}},emits:["show","hide"],setup(e,{slots:t,emit:n}){const o=v.shallowRef(void 0),r=v.ref(null),a=v.ref(void 0),i=v.ref(void 0),{x:l,y:s,placement:f,strategy:d,reference:c,floating:m,middlewareData:b,update:h}=De({placement:e.placement,strategy:e.strategy,middleware:o});v.watch([()=>e.offset,()=>e.shift,()=>e.flip,()=>e.arrow,()=>e.autoPlacement,()=>e.hide,()=>e.middleware],()=>{const u=[];typeof e.offset=="number"&&u.push(et(e.offset)),(e.shift===!0||typeof e.shift=="number")&&u.push(nt({padding:typeof e.shift=="number"?e.shift:void 0})),e.flip&&u.push(Qe()),(e.arrow===!0||typeof e.arrow=="number")&&u.push(St({element:r,padding:e.arrow===!0?0:e.arrow})),e.autoPlacement!==!1&&u.push(Ke(typeof e.autoPlacement=="object"?e.autoPlacement:void 0)),e.hide&&u.push(Ze()),o.value=u.concat(e.middleware),X(N(c))&&X(N(m))&&h()},{immediate:!0});let y;const p=()=>{X(N(c))&&X(N(m))&&e.autoUpdate!==!1&&(y=at(N(c),N(m),Ot(h,16),typeof e.autoUpdate=="object"?e.autoUpdate:void 0))},g=()=>{y&&y(),y=void 0};v.onMounted(()=>{X(N(m))&&(n("show"),p())}),v.watch(b,()=>{const u=b.value.arrow;a.value=u==null?void 0:u.x,i.value=u==null?void 0:u.y});const x={ref:r,placement:f,x:a,y:i};return v.provide(Be,x),()=>{if(t.default){const[u,R]=Lt(He(t.default()||[]));if(!ke(u))return;const T=v.computed(()=>typeof e.originClass=="function"?e.originClass(f.value):typeof e.originClass=="string"?e.originClass:e.tailwindcssOriginClass?We(f.value):""),w={enterActiveClass:`${e.enter} ${T.value}`,enterFromClass:e.enterFrom,enterToClass:e.enterTo,leaveActiveClass:`${e.leave} ${T.value}`,leaveFromClass:e.leaveFrom,leaveToClass:e.leaveTo,onBeforeEnter(){v.nextTick(()=>{n("show"),p()})},onAfterLeave(){g(),n("hide")}},C=O=>e.portal!==!1?v.h(v.Teleport,{to:e.portal===!0?"body":e.portal},[O]):O;return[v.cloneVNode(u,{ref:c}),C(v.h(v.Transition,w,()=>R?v.cloneVNode(R,{ref:m,style:{position:d.value,zIndex:e.zIndex,top:typeof s.value=="number"?`${s.value}px`:"0",left:typeof l.value=="number"?`${l.value}px`:"0"}}):v.createCommentVNode()))]}}}}),Pt=v.defineComponent({name:"FloatArrow",setup(e,{slots:t,attrs:n}){const{ref:o,placement:r,x:a,y:i}=Me("FloatArrow");return()=>{var d;const l={top:"bottom",right:"left",bottom:"top",left:"right"}[r.value.split("-")[0]],s={left:typeof a.value=="number"?`${a.value}px`:"",top:typeof i.value=="number"?`${i.value}px`:"",right:"",bottom:"",[l]:"-4px"},f=(d=t.default)==null?void 0:d.call(t)[0];return f?v.cloneVNode(f,{ref:o,style:s}):v.h("div",Object.assign({},n,{ref:o,style:s}))}}});exports.Float=$t;exports.FloatArrow=Pt;exports.tailwindcssOriginClassResolver=We;exports.tailwindcssOriginSafelist=Et;exports.useFloating=De;
+"use strict";var Z=Object.defineProperty;var k=Object.getOwnPropertySymbols;var ee=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable;var R=(e,t,n)=>t in e?Z(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,V=(e,t)=>{for(var n in t||(t={}))ee.call(t,n)&&R(e,n,t[n]);if(k)for(var n of k(t))te.call(t,n)&&R(e,n,t[n]);return e};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var r=require("vue"),x=require("@floating-ui/dom"),$=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},W="Expected a function",_=0/0,ne="[object Symbol]",re=/^\s+|\s+$/g,ae=/^[-+]0x[0-9a-f]+$/i,ie=/^0b[01]+$/i,oe=/^0o[0-7]+$/i,le=parseInt,fe=typeof $=="object"&&$&&$.Object===Object&&$,ue=typeof self=="object"&&self&&self.Object===Object&&self,ce=fe||ue||Function("return this")(),se=Object.prototype,de=se.toString,me=Math.max,ge=Math.min,P=function(){return ce.Date.now()};function ye(e,t,n){var a,f,d,c,l,s,m=0,g=!1,u=!1,h=!0;if(typeof e!="function")throw new TypeError(W);t=L(t)||0,I(n)&&(g=!!n.leading,u="maxWait"in n,d=u?me(L(n.maxWait)||0,t):d,h="trailing"in n?!!n.trailing:h);function F(i){var b=a,T=f;return a=f=void 0,m=i,c=e.apply(T,b),c}function O(i){return m=i,l=setTimeout(y,t),g?F(i):c}function E(i){var b=i-s,T=i-m,o=t-b;return u?ge(o,d-T):o}function N(i){var b=i-s,T=i-m;return s===void 0||b>=t||b<0||u&&T>=d}function y(){var i=P();if(N(i))return v(i);l=setTimeout(y,E(i))}function v(i){return l=void 0,h&&a?F(i):(a=f=void 0,c)}function C(){l!==void 0&&clearTimeout(l),m=0,a=s=f=l=void 0}function p(){return l===void 0?c:v(P())}function j(){var i=P(),b=N(i);if(a=arguments,f=this,s=i,b){if(l===void 0)return O(s);if(u)return l=setTimeout(y,t),F(s)}return l===void 0&&(l=setTimeout(y,t)),c}return j.cancel=C,j.flush=p,j}function ve(e,t,n){var a=!0,f=!0;if(typeof e!="function")throw new TypeError(W);return I(n)&&(a="leading"in n?!!n.leading:a,f="trailing"in n?!!n.trailing:f),ye(e,t,{leading:a,maxWait:t,trailing:f})}function I(e){var t=typeof e;return!!e&&(t=="object"||t=="function")}function be(e){return!!e&&typeof e=="object"}function he(e){return typeof e=="symbol"||be(e)&&de.call(e)==ne}function L(e){if(typeof e=="number")return e;if(he(e))return _;if(I(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=I(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=e.replace(re,"");var n=ie.test(e);return n||oe.test(e)?le(e.slice(2),n?2:8):ae.test(e)?_:+e}var we=ve;function S(e){var t;return e=r.unref(e),e==null?null:(t=e==null?void 0:e.$el)!=null?t:e}function z(e={}){const t=r.ref(null),n=r.ref(null),a=r.ref(void 0),f=r.ref(void 0),d=r.ref(r.unref(e.placement||"bottom")),c=r.ref(r.unref(e.strategy||"absolute")),l=r.shallowRef({});return{x:a,y:f,placement:d,strategy:c,middlewareData:l,update:()=>{const m=S(t),g=S(n);!m||!g||x.computePosition(m,g,{placement:r.unref(e.placement),strategy:r.unref(e.strategy),middleware:r.unref(e.middleware)}).then(u=>{a.value=u.x,f.value=u.y,d.value=u.placement,c.value=u.strategy,l.value=u.middlewareData})},reference:t,floating:n}}const D=e=>{const{padding:t}=e;return{name:"arrow",options:e,fn(n){const a=r.unref(e.element);return a?x.arrow({element:a,padding:t}).fn(n):{}}}},je=["origin-bottom","origin-top","origin-right","origin-left","origin-bottom-left","origin-bottom-right","origin-top-left","origin-top-right"],H=e=>{switch(e){case"top":return"origin-bottom";case"bottom":return"origin-top";case"left":return"origin-right";case"right":return"origin-left";case"top-start":case"right-end":return"origin-bottom-left";case"top-end":case"left-end":return"origin-bottom-right";case"right-start":case"bottom-start":return"origin-top-left";case"left-start":case"bottom-end":return"origin-top-right";default:return""}};function q(e){return e.reduce((t,n)=>n.type===r.Fragment?t.concat(q(n.children)):t.concat(n),[])}function xe(e){return e.filter(G)}function G(e){return e==null?!1:typeof e.type=="string"||typeof e.type=="object"||typeof e.type=="function"}function w(e){return e=r.unref(e),e&&(e==null?void 0:e.nodeType)!==Node.COMMENT_NODE}const X=Symbol();function Y(e){let t=r.inject(X,null);if(t===null){let n=new Error(`<${e} /> must be in the <Float /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,Y),n}return t}const Fe=r.defineComponent({name:"Float",props:{placement:{type:String,default:"bottom-start"},strategy:{type:String,default:"absolute"},offset:[Number,Object,Function],shift:{type:[Boolean,Number,Object],default:!1},flip:{type:[Boolean,Object],default:!1},arrow:{type:[Boolean,Number],default:!1},autoPlacement:{type:[Boolean,Object],default:!1},hide:{type:[Boolean,Object],default:!1},autoUpdate:{type:[Boolean,Object],default:!0},zIndex:{type:Number,default:9999},enter:String,enterFrom:String,enterTo:String,leave:String,leaveFrom:String,leaveTo:String,originClass:[String,Function],tailwindcssOriginClass:{type:Boolean,default:!1},portal:{type:[Boolean,String],default:!1},wrapFloating:{type:Boolean,default:!0},transform:{type:Boolean,default:!0},middleware:{type:[Array,Function],default:()=>[]}},emits:["show","hide","update"],setup(e,{slots:t,emit:n}){const a=r.ref(e.placement),f=r.ref(e.strategy),d=r.shallowRef(void 0),c=r.ref(null),l=r.ref(void 0),s=r.ref(void 0),{x:m,y:g,placement:u,strategy:h,reference:F,floating:O,middlewareData:E,update:N}=z({placement:a,strategy:f,middleware:d}),y=r.ref(S(F)),v=r.ref(S(O)),C=()=>{y.value=S(F),v.value=S(O)},p=()=>{N(),n("update")};r.watch(()=>e.placement,()=>{a.value=e.placement,C(),w(y)&&w(v)&&p()}),r.watch(()=>e.strategy,()=>{f.value=e.strategy,C(),w(y)&&w(v)&&p()}),r.watch([()=>e.offset,()=>e.shift,()=>e.flip,()=>e.arrow,()=>e.autoPlacement,()=>e.hide,()=>e.middleware],()=>{C();const o=[];(typeof e.offset=="number"||typeof e.offset=="object"||typeof e.offset=="function")&&o.push(x.offset(e.offset)),(e.shift===!0||typeof e.shift=="number"||typeof e.shift=="object")&&o.push(x.shift(V({padding:typeof e.shift=="number"?e.shift:void 0},typeof e.shift=="object"?e.shift:{}))),(e.flip===!0||typeof e.flip=="object")&&o.push(x.flip(typeof e.flip=="object"?e.flip:void 0)),(e.arrow===!0||typeof e.arrow=="number")&&o.push(D({element:c,padding:e.arrow===!0?0:e.arrow})),(e.autoPlacement===!0||typeof e.autoPlacement=="object")&&o.push(x.autoPlacement(typeof e.autoPlacement=="object"?e.autoPlacement:void 0)),o.push(...typeof e.middleware=="function"?e.middleware({referenceEl:y,floatingEl:v}):e.middleware),(e.hide===!0||typeof e.hide=="object")&&o.push(x.hide(typeof e.hide=="object"?e.hide:void 0)),d.value=o,w(y)&&w(v)&&p()},{immediate:!0});let j;const i=()=>{C(),w(y)&&w(v)&&e.autoUpdate!==!1&&(j=x.autoUpdate(y.value,v.value,we(p,16),typeof e.autoUpdate=="object"?e.autoUpdate:void 0))},b=()=>{j&&j(),j=void 0};r.onMounted(()=>{w(S(O))&&(n("show"),i())}),r.watch(E,()=>{const o=E.value.arrow;l.value=o==null?void 0:o.x,s.value=o==null?void 0:o.y});const T={ref:c,placement:u,x:l,y:s};return r.provide(X,T),()=>{if(t.default){const[o,B]=xe(q(t.default()||[]));if(!G(o))return;const M=r.computed(()=>typeof e.originClass=="function"?e.originClass(u.value):typeof e.originClass=="string"?e.originClass:e.tailwindcssOriginClass?H(u.value):""),J={enterActiveClass:`${e.enter} ${M.value}`,enterFromClass:e.enterFrom,enterToClass:e.enterTo,leaveActiveClass:`${e.leave} ${M.value}`,leaveFromClass:e.leaveFrom,leaveToClass:e.leaveTo,onBeforeEnter(){r.nextTick(()=>{n("show"),i()})},onAfterLeave(){b(),n("hide")}},U={ref:O,style:e.transform?{position:h.value,zIndex:e.zIndex,top:"0",left:"0",right:"auto",bottom:"auto",transform:`translate(${Math.round(m.value||0)}px,${Math.round(g.value||0)}px)`}:{position:h.value,zIndex:e.zIndex,top:`${g.value||0}px`,left:`${m.value||0}px`}},K=A=>e.portal===!0||typeof e.portal=="string"?r.h(r.Teleport,{to:e.portal===!0?"body":e.portal},[A]):A,Q=A=>e.wrapFloating?r.h("div",U,A):A;return[r.cloneVNode(o,{ref:F}),K(Q(r.h(r.Transition,J,()=>B?r.cloneVNode(B,e.wrapFloating?null:U):r.createCommentVNode())))]}}}}),Te=r.defineComponent({name:"FloatArrow",setup(e,{slots:t,attrs:n}){const{ref:a,placement:f,x:d,y:c}=Y("FloatArrow");return()=>{var h;const l={top:"bottom",right:"left",bottom:"top",left:"right"}[f.value.split("-")[0]],s={left:typeof d.value=="number"?`${d.value}px`:"",top:typeof c.value=="number"?`${c.value}px`:"",right:"",bottom:"",[l]:"-4px"},m={placement:f.value},g=(h=t.default)==null?void 0:h.call(t,m),[u]=Array.isArray(g)?g:[g];return u?r.cloneVNode(u,{ref:a,style:s}):r.h("div",Object.assign({},n,{ref:a,style:s}))}}}),Se=["Float","FloatArrow"];function Oe(e={}){const{prefix:t=""}=e;return{type:"component",resolve:n=>{if(n.startsWith(t)){const a=n.substring(t.length);if(Se.includes(a))return{importName:a,path:"headlessui-float-vue"}}}}}exports.Float=Fe;exports.FloatArrow=Te;exports.HeadlessUiFloatResolver=Oe;exports.arrow=D;exports.tailwindcssOriginClassResolver=H;exports.tailwindcssOriginSafelist=je;exports.useFloating=z;

dist/headlessui-float.es.js

 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -8,416 +6,15 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a2, b2) => {
-  for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp.call(b2, prop))
-      __defNormalProp(a2, prop, b2[prop]);
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b2)) {
-      if (__propIsEnum.call(b2, prop))
-        __defNormalProp(a2, prop, b2[prop]);
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-  return a2;
+  return a;
 };
-var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { unref, ref, shallowRef, Fragment, defineComponent, watch, onMounted, provide, computed, nextTick, cloneVNode, h as h$2, Transition, createCommentVNode, inject, Teleport } from "vue";
-function t(t2) {
-  return t2.split("-")[0];
-}
-function e(t2) {
-  return t2.split("-")[1];
-}
-function n$1(e2) {
-  return ["top", "bottom"].includes(t(e2)) ? "x" : "y";
-}
-function r$1(t2) {
-  return t2 === "y" ? "height" : "width";
-}
-function i$1(i2, o2, l2) {
-  let { reference: a2, floating: s2 } = i2;
-  const c2 = a2.x + a2.width / 2 - s2.width / 2, f2 = a2.y + a2.height / 2 - s2.height / 2, u2 = n$1(o2), m2 = r$1(u2), g2 = a2[m2] / 2 - s2[m2] / 2, d2 = u2 === "x";
-  let p2;
-  switch (t(o2)) {
-    case "top":
-      p2 = { x: c2, y: a2.y - s2.height };
-      break;
-    case "bottom":
-      p2 = { x: c2, y: a2.y + a2.height };
-      break;
-    case "right":
-      p2 = { x: a2.x + a2.width, y: f2 };
-      break;
-    case "left":
-      p2 = { x: a2.x - s2.width, y: f2 };
-      break;
-    default:
-      p2 = { x: a2.x, y: a2.y };
-  }
-  switch (e(o2)) {
-    case "start":
-      p2[u2] -= g2 * (l2 && d2 ? -1 : 1);
-      break;
-    case "end":
-      p2[u2] += g2 * (l2 && d2 ? -1 : 1);
-  }
-  return p2;
-}
-const o$1 = async (t2, e2, n2) => {
-  const { placement: r2 = "bottom", strategy: o2 = "absolute", middleware: l2 = [], platform: a2 } = n2, s2 = await (a2.isRTL == null ? void 0 : a2.isRTL(e2));
-  let c2 = await a2.getElementRects({ reference: t2, floating: e2, strategy: o2 }), { x: f2, y: u2 } = i$1(c2, r2, s2), m2 = r2, g2 = {};
-  for (let n3 = 0; n3 < l2.length; n3++) {
-    const { name: d2, fn: p2 } = l2[n3], { x: h2, y: y2, data: x2, reset: w2 } = await p2({ x: f2, y: u2, initialPlacement: r2, placement: m2, strategy: o2, middlewareData: g2, rects: c2, platform: a2, elements: { reference: t2, floating: e2 } });
-    f2 = h2 != null ? h2 : f2, u2 = y2 != null ? y2 : u2, g2 = __spreadProps(__spreadValues({}, g2), { [d2]: __spreadValues(__spreadValues({}, g2[d2]), x2) }), w2 && (typeof w2 == "object" && (w2.placement && (m2 = w2.placement), w2.rects && (c2 = w2.rects === true ? await a2.getElementRects({ reference: t2, floating: e2, strategy: o2 }) : w2.rects), { x: f2, y: u2 } = i$1(c2, m2, s2)), n3 = -1);
-  }
-  return { x: f2, y: u2, placement: m2, strategy: o2, middlewareData: g2 };
-};
-function l$1(t2) {
-  return typeof t2 != "number" ? function(t3) {
-    return __spreadValues({ top: 0, right: 0, bottom: 0, left: 0 }, t3);
-  }(t2) : { top: t2, right: t2, bottom: t2, left: t2 };
-}
-function a$1(t2) {
-  return __spreadProps(__spreadValues({}, t2), { top: t2.y, left: t2.x, right: t2.x + t2.width, bottom: t2.y + t2.height });
-}
-async function s$1(t2, e2) {
-  var n2;
-  e2 === void 0 && (e2 = {});
-  const { x: r2, y: i2, platform: o2, rects: s2, elements: c2, strategy: f2 } = t2, { boundary: u2 = "clippingAncestors", rootBoundary: m2 = "viewport", elementContext: g2 = "floating", altBoundary: d2 = false, padding: p2 = 0 } = e2, h2 = l$1(p2), y2 = c2[d2 ? g2 === "floating" ? "reference" : "floating" : g2], x2 = a$1(await o2.getClippingRect({ element: (n2 = await (o2.isElement == null ? void 0 : o2.isElement(y2))) == null || n2 ? y2 : y2.contextElement || await (o2.getDocumentElement == null ? void 0 : o2.getDocumentElement(c2.floating)), boundary: u2, rootBoundary: m2 })), w2 = a$1(o2.convertOffsetParentRelativeRectToViewportRelativeRect ? await o2.convertOffsetParentRelativeRectToViewportRelativeRect({ rect: g2 === "floating" ? __spreadProps(__spreadValues({}, s2.floating), { x: r2, y: i2 }) : s2.reference, offsetParent: await (o2.getOffsetParent == null ? void 0 : o2.getOffsetParent(c2.floating)), strategy: f2 }) : s2[g2]);
-  return { top: x2.top - w2.top + h2.top, bottom: w2.bottom - x2.bottom + h2.bottom, left: x2.left - w2.left + h2.left, right: w2.right - x2.right + h2.right };
-}
-const c$1 = Math.min, f$1 = Math.max;
-function u$1(t2, e2, n2) {
-  return f$1(t2, c$1(e2, n2));
-}
-const m$1 = (t2) => ({ name: "arrow", options: t2, async fn(e2) {
-  const { element: i2, padding: o2 = 0 } = t2 != null ? t2 : {}, { x: a2, y: s2, placement: c2, rects: f2, platform: m2 } = e2;
-  if (i2 == null)
-    return {};
-  const g2 = l$1(o2), d2 = { x: a2, y: s2 }, p2 = n$1(c2), h2 = r$1(p2), y2 = await m2.getDimensions(i2), x2 = p2 === "y" ? "top" : "left", w2 = p2 === "y" ? "bottom" : "right", v2 = f2.reference[h2] + f2.reference[p2] - d2[p2] - f2.floating[h2], b2 = d2[p2] - f2.reference[p2], R2 = await (m2.getOffsetParent == null ? void 0 : m2.getOffsetParent(i2)), A2 = R2 ? p2 === "y" ? R2.clientHeight || 0 : R2.clientWidth || 0 : 0, P2 = v2 / 2 - b2 / 2, T2 = g2[x2], O2 = A2 - y2[h2] - g2[w2], D2 = A2 / 2 - y2[h2] / 2 + P2, L2 = u$1(T2, D2, O2);
-  return { data: { [p2]: L2, centerOffset: D2 - L2 } };
-} }), g$1 = { left: "right", right: "left", bottom: "top", top: "bottom" };
-function d$1(t2) {
-  return t2.replace(/left|right|bottom|top/g, (t3) => g$1[t3]);
-}
-function p$1(t2, i2, o2) {
-  o2 === void 0 && (o2 = false);
-  const l2 = e(t2), a2 = n$1(t2), s2 = r$1(a2);
-  let c2 = a2 === "x" ? l2 === (o2 ? "end" : "start") ? "right" : "left" : l2 === "start" ? "bottom" : "top";
-  return i2.reference[s2] > i2.floating[s2] && (c2 = d$1(c2)), { main: c2, cross: d$1(c2) };
-}
-const h$1 = { start: "end", end: "start" };
-function y$1(t2) {
-  return t2.replace(/start|end/g, (t3) => h$1[t3]);
-}
-const x$1 = ["top", "right", "bottom", "left"], w$1 = x$1.reduce((t2, e2) => t2.concat(e2, e2 + "-start", e2 + "-end"), []);
-const v$1 = function(n2) {
-  return n2 === void 0 && (n2 = {}), { name: "autoPlacement", options: n2, async fn(r2) {
-    var i2, o2, l2, a2, c2;
-    const { x: f2, y: u2, rects: m2, middlewareData: g2, placement: d2, platform: h2, elements: x2 } = r2, _a = n2, { alignment: v2 = null, allowedPlacements: b2 = w$1, autoAlignment: R2 = true } = _a, A2 = __objRest(_a, ["alignment", "allowedPlacements", "autoAlignment"]), P2 = function(n3, r3, i3) {
-      return (n3 ? [...i3.filter((t2) => e(t2) === n3), ...i3.filter((t2) => e(t2) !== n3)] : i3.filter((e2) => t(e2) === e2)).filter((t2) => !n3 || e(t2) === n3 || !!r3 && y$1(t2) !== t2);
-    }(v2, R2, b2), T2 = await s$1(r2, A2), O2 = (i2 = (o2 = g2.autoPlacement) == null ? void 0 : o2.index) != null ? i2 : 0, D2 = P2[O2];
-    if (D2 == null)
-      return {};
-    const { main: L2, cross: k } = p$1(D2, m2, await (h2.isRTL == null ? void 0 : h2.isRTL(x2.floating)));
-    if (d2 !== D2)
-      return { x: f2, y: u2, reset: { placement: P2[0] } };
-    const E2 = [T2[t(D2)], T2[L2], T2[k]], C2 = [...(l2 = (a2 = g2.autoPlacement) == null ? void 0 : a2.overflows) != null ? l2 : [], { placement: D2, overflows: E2 }], B = P2[O2 + 1];
-    if (B)
-      return { data: { index: O2 + 1, overflows: C2 }, reset: { placement: B } };
-    const H2 = C2.slice().sort((t2, e2) => t2.overflows[0] - e2.overflows[0]), V = (c2 = H2.find((t2) => {
-      let { overflows: e2 } = t2;
-      return e2.every((t3) => t3 <= 0);
-    })) == null ? void 0 : c2.placement, F = V != null ? V : H2[0].placement;
-    return F !== d2 ? { data: { index: O2 + 1, overflows: C2 }, reset: { placement: F } } : {};
-  } };
-};
-const b$1 = function(e2) {
-  return e2 === void 0 && (e2 = {}), { name: "flip", options: e2, async fn(n2) {
-    var r2;
-    const { placement: i2, middlewareData: o2, rects: l2, initialPlacement: a2, platform: c2, elements: f2 } = n2, _a = e2, { mainAxis: u2 = true, crossAxis: m2 = true, fallbackPlacements: g2, fallbackStrategy: h2 = "bestFit", flipAlignment: x2 = true } = _a, w2 = __objRest(_a, ["mainAxis", "crossAxis", "fallbackPlacements", "fallbackStrategy", "flipAlignment"]), v2 = t(i2), b2 = g2 || (v2 === a2 || !x2 ? [d$1(a2)] : function(t2) {
-      const e3 = d$1(t2);
-      return [y$1(t2), e3, y$1(e3)];
-    }(a2)), R2 = [a2, ...b2], A2 = await s$1(n2, w2), P2 = [];
-    let T2 = ((r2 = o2.flip) == null ? void 0 : r2.overflows) || [];
-    if (u2 && P2.push(A2[v2]), m2) {
-      const { main: t2, cross: e3 } = p$1(i2, l2, await (c2.isRTL == null ? void 0 : c2.isRTL(f2.floating)));
-      P2.push(A2[t2], A2[e3]);
-    }
-    if (T2 = [...T2, { placement: i2, overflows: P2 }], !P2.every((t2) => t2 <= 0)) {
-      var O2, D2;
-      const t2 = ((O2 = (D2 = o2.flip) == null ? void 0 : D2.index) != null ? O2 : 0) + 1, e3 = R2[t2];
-      if (e3)
-        return { data: { index: t2, overflows: T2 }, reset: { placement: e3 } };
-      let n3 = "bottom";
-      switch (h2) {
-        case "bestFit": {
-          var L2;
-          const t3 = (L2 = T2.slice().sort((t4, e4) => t4.overflows.filter((t5) => t5 > 0).reduce((t5, e5) => t5 + e5, 0) - e4.overflows.filter((t5) => t5 > 0).reduce((t5, e5) => t5 + e5, 0))[0]) == null ? void 0 : L2.placement;
-          t3 && (n3 = t3);
-          break;
-        }
-        case "initialPlacement":
-          n3 = a2;
-      }
-      if (i2 !== n3)
-        return { reset: { placement: n3 } };
-    }
-    return {};
-  } };
-};
-function R$1(t2, e2) {
-  return { top: t2.top - e2.height, right: t2.right - e2.width, bottom: t2.bottom - e2.height, left: t2.left - e2.width };
-}
-function A(t2) {
-  return x$1.some((e2) => t2[e2] >= 0);
-}
-const P = function(t2) {
-  let _a = t2 === void 0 ? {} : t2, { strategy: e2 = "referenceHidden" } = _a, n2 = __objRest(_a, ["strategy"]);
-  return { name: "hide", async fn(t3) {
-    const { rects: r2 } = t3;
-    switch (e2) {
-      case "referenceHidden": {
-        const e3 = R$1(await s$1(t3, __spreadProps(__spreadValues({}, n2), { elementContext: "reference" })), r2.reference);
-        return { data: { referenceHiddenOffsets: e3, referenceHidden: A(e3) } };
-      }
-      case "escaped": {
-        const e3 = R$1(await s$1(t3, __spreadProps(__spreadValues({}, n2), { altBoundary: true })), r2.floating);
-        return { data: { escapedOffsets: e3, escaped: A(e3) } };
-      }
-      default:
-        return {};
-    }
-  } };
-};
-const T$1 = function(r2) {
-  return r2 === void 0 && (r2 = 0), { name: "offset", options: r2, async fn(i2) {
-    const { x: o2, y: l2, placement: a2, rects: s2, platform: c2, elements: f2 } = i2, u2 = function(r3, i3, o3, l3) {
-      l3 === void 0 && (l3 = false);
-      const a3 = t(r3), s3 = e(r3), c3 = n$1(r3) === "x", f3 = ["left", "top"].includes(a3) ? -1 : 1, u3 = l3 && c3 ? -1 : 1, m2 = typeof o3 == "function" ? o3(__spreadProps(__spreadValues({}, i3), { placement: r3 })) : o3, g2 = typeof m2 == "number";
-      let { mainAxis: d2, crossAxis: p2, alignmentAxis: h2 } = g2 ? { mainAxis: m2, crossAxis: 0, alignmentAxis: null } : __spreadValues({ mainAxis: 0, crossAxis: 0, alignmentAxis: null }, m2);
-      return s3 && typeof h2 == "number" && (p2 = s3 === "end" ? -1 * h2 : h2), c3 ? { x: p2 * u3, y: d2 * f3 } : { x: d2 * f3, y: p2 * u3 };
-    }(a2, s2, r2, await (c2.isRTL == null ? void 0 : c2.isRTL(f2.floating)));
-    return { x: o2 + u2.x, y: l2 + u2.y, data: u2 };
-  } };
-};
-function O(t2) {
-  return t2 === "x" ? "y" : "x";
-}
-const D$1 = function(e2) {
-  return e2 === void 0 && (e2 = {}), { name: "shift", options: e2, async fn(r2) {
-    const { x: i2, y: o2, placement: l2 } = r2, _a = e2, { mainAxis: a2 = true, crossAxis: c2 = false, limiter: f2 = { fn: (t2) => {
-      let { x: e3, y: n2 } = t2;
-      return { x: e3, y: n2 };
-    } } } = _a, m2 = __objRest(_a, ["mainAxis", "crossAxis", "limiter"]), g2 = { x: i2, y: o2 }, d2 = await s$1(r2, m2), p2 = n$1(t(l2)), h2 = O(p2);
-    let y2 = g2[p2], x2 = g2[h2];
-    if (a2) {
-      const t2 = p2 === "y" ? "bottom" : "right";
-      y2 = u$1(y2 + d2[p2 === "y" ? "top" : "left"], y2, y2 - d2[t2]);
-    }
-    if (c2) {
-      const t2 = h2 === "y" ? "bottom" : "right";
-      x2 = u$1(x2 + d2[h2 === "y" ? "top" : "left"], x2, x2 - d2[t2]);
-    }
-    const w2 = f2.fn(__spreadProps(__spreadValues({}, r2), { [p2]: y2, [h2]: x2 }));
-    return __spreadProps(__spreadValues({}, w2), { data: { x: w2.x - i2, y: w2.y - o2 } });
-  } };
-};
-function n(t2) {
-  return (t2 == null ? void 0 : t2.toString()) === "[object Window]";
-}
-function o(t2) {
-  if (t2 == null)
-    return window;
-  if (!n(t2)) {
-    const e2 = t2.ownerDocument;
-    return e2 && e2.defaultView || window;
-  }
-  return t2;
-}
-function i(t2) {
-  return o(t2).getComputedStyle(t2);
-}
-function r(t2) {
-  return n(t2) ? "" : t2 ? (t2.nodeName || "").toLowerCase() : "";
-}
-function l(t2) {
-  return t2 instanceof o(t2).HTMLElement;
-}
-function c(t2) {
-  return t2 instanceof o(t2).Element;
-}
-function f(t2) {
-  return t2 instanceof o(t2).ShadowRoot || t2 instanceof ShadowRoot;
-}
-function s(t2) {
-  const { overflow: e2, overflowX: n2, overflowY: o2 } = i(t2);
-  return /auto|scroll|overlay|hidden/.test(e2 + o2 + n2);
-}
-function u(t2) {
-  return ["table", "td", "th"].includes(r(t2));
-}
-function h(t2) {
-  const e2 = navigator.userAgent.toLowerCase().includes("firefox"), n2 = i(t2);
-  return n2.transform !== "none" || n2.perspective !== "none" || n2.contain === "paint" || ["transform", "perspective"].includes(n2.willChange) || e2 && n2.willChange === "filter" || e2 && !!n2.filter && n2.filter !== "none";
-}
-const d = Math.min, a = Math.max, g = Math.round;
-function p(t2, e2) {
-  e2 === void 0 && (e2 = false);
-  const n2 = t2.getBoundingClientRect();
-  let o2 = 1, i2 = 1;
-  return e2 && l(t2) && (o2 = t2.offsetWidth > 0 && g(n2.width) / t2.offsetWidth || 1, i2 = t2.offsetHeight > 0 && g(n2.height) / t2.offsetHeight || 1), { width: n2.width / o2, height: n2.height / i2, top: n2.top / i2, right: n2.right / o2, bottom: n2.bottom / i2, left: n2.left / o2, x: n2.left / o2, y: n2.top / i2 };
-}
-function m(t2) {
-  return (e2 = t2, (e2 instanceof o(e2).Node ? t2.ownerDocument : t2.document) || window.document).documentElement;
-  var e2;
-}
-function w(t2) {
-  return n(t2) ? { scrollLeft: t2.pageXOffset, scrollTop: t2.pageYOffset } : { scrollLeft: t2.scrollLeft, scrollTop: t2.scrollTop };
-}
-function y(t2) {
-  return p(m(t2)).left + w(t2).scrollLeft;
-}
-function v(t2, e2, n2) {
-  const o2 = l(e2), i2 = m(e2), c2 = p(t2, o2 && function(t3) {
-    const e3 = p(t3);
-    return g(e3.width) !== t3.offsetWidth || g(e3.height) !== t3.offsetHeight;
-  }(e2));
-  let f2 = { scrollLeft: 0, scrollTop: 0 };
-  const u2 = { x: 0, y: 0 };
-  if (o2 || !o2 && n2 !== "fixed")
-    if ((r(e2) !== "body" || s(i2)) && (f2 = w(e2)), l(e2)) {
-      const t3 = p(e2, true);
-      u2.x = t3.x + e2.clientLeft, u2.y = t3.y + e2.clientTop;
-    } else
-      i2 && (u2.x = y(i2));
-  return { x: c2.left + f2.scrollLeft - u2.x, y: c2.top + f2.scrollTop - u2.y, width: c2.width, height: c2.height };
-}
-function x(t2) {
-  return r(t2) === "html" ? t2 : t2.assignedSlot || t2.parentNode || (f(t2) ? t2.host : null) || m(t2);
-}
-function b(t2) {
-  return l(t2) && getComputedStyle(t2).position !== "fixed" ? t2.offsetParent : null;
-}
-function L(t2) {
-  const e2 = o(t2);
-  let n2 = b(t2);
-  for (; n2 && u(n2) && getComputedStyle(n2).position === "static"; )
-    n2 = b(n2);
-  return n2 && (r(n2) === "html" || r(n2) === "body" && getComputedStyle(n2).position === "static" && !h(n2)) ? e2 : n2 || function(t3) {
-    let e3 = x(t3);
-    for (f(e3) && (e3 = e3.host); l(e3) && !["html", "body"].includes(r(e3)); ) {
-      if (h(e3))
-        return e3;
-      e3 = e3.parentNode;
-    }
-    return null;
-  }(t2) || e2;
-}
-function R(t2) {
-  if (l(t2))
-    return { width: t2.offsetWidth, height: t2.offsetHeight };
-  const e2 = p(t2);
-  return { width: e2.width, height: e2.height };
-}
-function T(t2) {
-  const e2 = x(t2);
-  return ["html", "body", "#document"].includes(r(e2)) ? t2.ownerDocument.body : l(e2) && s(e2) ? e2 : T(e2);
-}
-function W(t2, e2) {
-  var n2;
-  e2 === void 0 && (e2 = []);
-  const i2 = T(t2), r2 = i2 === ((n2 = t2.ownerDocument) == null ? void 0 : n2.body), l2 = o(i2), c2 = r2 ? [l2].concat(l2.visualViewport || [], s(i2) ? i2 : []) : i2, f2 = e2.concat(c2);
-  return r2 ? f2 : f2.concat(W(x(c2)));
-}
-function C(e2, n2) {
-  return n2 === "viewport" ? a$1(function(t2) {
-    const e3 = o(t2), n3 = m(t2), i2 = e3.visualViewport;
-    let r2 = n3.clientWidth, l2 = n3.clientHeight, c2 = 0, f2 = 0;
-    return i2 && (r2 = i2.width, l2 = i2.height, Math.abs(e3.innerWidth / i2.scale - i2.width) < 0.01 && (c2 = i2.offsetLeft, f2 = i2.offsetTop)), { width: r2, height: l2, x: c2, y: f2 };
-  }(e2)) : c(n2) ? function(t2) {
-    const e3 = p(t2), n3 = e3.top + t2.clientTop, o2 = e3.left + t2.clientLeft;
-    return { top: n3, left: o2, x: o2, y: n3, right: o2 + t2.clientWidth, bottom: n3 + t2.clientHeight, width: t2.clientWidth, height: t2.clientHeight };
-  }(n2) : a$1(function(t2) {
-    var e3;
-    const n3 = m(t2), o2 = w(t2), r2 = (e3 = t2.ownerDocument) == null ? void 0 : e3.body, l2 = a(n3.scrollWidth, n3.clientWidth, r2 ? r2.scrollWidth : 0, r2 ? r2.clientWidth : 0), c2 = a(n3.scrollHeight, n3.clientHeight, r2 ? r2.scrollHeight : 0, r2 ? r2.clientHeight : 0);
-    let f2 = -o2.scrollLeft + y(t2);
-    const s2 = -o2.scrollTop;
-    return i(r2 || n3).direction === "rtl" && (f2 += a(n3.clientWidth, r2 ? r2.clientWidth : 0) - l2), { width: l2, height: c2, x: f2, y: s2 };
-  }(m(e2)));
-}
-function E(t2) {
-  const e2 = W(t2), n2 = ["absolute", "fixed"].includes(i(t2).position) && l(t2) ? L(t2) : t2;
-  return c(n2) ? e2.filter((t3) => c(t3) && function(t4, e3) {
-    const n3 = e3.getRootNode == null ? void 0 : e3.getRootNode();
-    if (t4.contains(e3))
-      return true;
-    if (n3 && f(n3)) {
-      let n4 = e3;
-      do {
-        if (n4 && t4 === n4)
-          return true;
-        n4 = n4.parentNode || n4.host;
-      } while (n4);
-    }
-    return false;
-  }(t3, n2) && r(t3) !== "body") : [];
-}
-const H = { getClippingRect: function(t2) {
-  let { element: e2, boundary: n2, rootBoundary: o2 } = t2;
-  const i2 = [...n2 === "clippingAncestors" ? E(e2) : [].concat(n2), o2], r2 = i2[0], l2 = i2.reduce((t3, n3) => {
-    const o3 = C(e2, n3);
-    return t3.top = a(o3.top, t3.top), t3.right = d(o3.right, t3.right), t3.bottom = d(o3.bottom, t3.bottom), t3.left = a(o3.left, t3.left), t3;
-  }, C(e2, r2));
-  return { width: l2.right - l2.left, height: l2.bottom - l2.top, x: l2.left, y: l2.top };
-}, convertOffsetParentRelativeRectToViewportRelativeRect: function(t2) {
-  let { rect: e2, offsetParent: n2, strategy: o2 } = t2;
-  const i2 = l(n2), c2 = m(n2);
-  if (n2 === c2)
-    return e2;
-  let f2 = { scrollLeft: 0, scrollTop: 0 };
-  const u2 = { x: 0, y: 0 };
-  if ((i2 || !i2 && o2 !== "fixed") && ((r(n2) !== "body" || s(c2)) && (f2 = w(n2)), l(n2))) {
-    const t3 = p(n2, true);
-    u2.x = t3.x + n2.clientLeft, u2.y = t3.y + n2.clientTop;
-  }
-  return __spreadProps(__spreadValues({}, e2), { x: e2.x - f2.scrollLeft + u2.x, y: e2.y - f2.scrollTop + u2.y });
-}, isElement: c, getDimensions: R, getOffsetParent: L, getDocumentElement: m, getElementRects: (t2) => {
-  let { reference: e2, floating: n2, strategy: o2 } = t2;
-  return { reference: v(e2, L(n2), o2), floating: __spreadProps(__spreadValues({}, R(n2)), { x: 0, y: 0 }) };
-}, getClientRects: (t2) => Array.from(t2.getClientRects()), isRTL: (t2) => i(t2).direction === "rtl" };
-function S(t2, e2, n2, o2) {
-  o2 === void 0 && (o2 = {});
-  const { ancestorScroll: i2 = true, ancestorResize: r2 = true, elementResize: l2 = true, animationFrame: f2 = false } = o2;
-  let s2 = false;
-  const u2 = i2 && !f2, h2 = r2 && !f2, d2 = l2 && !f2, a2 = u2 || h2 ? [...c(t2) ? W(t2) : [], ...W(e2)] : [];
-  a2.forEach((t3) => {
-    u2 && t3.addEventListener("scroll", n2, { passive: true }), h2 && t3.addEventListener("resize", n2);
-  });
-  let g2, m2 = null;
-  d2 && (m2 = new ResizeObserver(n2), c(t2) && m2.observe(t2), m2.observe(e2));
-  let w2 = f2 ? p(t2) : null;
-  return f2 && function e3() {
-    if (s2)
-      return;
-    const o3 = p(t2);
-    !w2 || o3.x === w2.x && o3.y === w2.y && o3.width === w2.width && o3.height === w2.height || n2();
-    w2 = o3, g2 = requestAnimationFrame(e3);
-  }(), () => {
-    var t3;
-    s2 = true, a2.forEach((t4) => {
-      u2 && t4.removeEventListener("scroll", n2), h2 && t4.removeEventListener("resize", n2);
-    }), (t3 = m2) == null || t3.disconnect(), m2 = null, f2 && cancelAnimationFrame(g2);
-  };
-}
-const D = (t2, n2, o2) => o$1(t2, n2, __spreadValues({ platform: H }, o2));
+import { unref, ref, shallowRef, Fragment, defineComponent, watch, onMounted, provide, computed, nextTick, cloneVNode, h, Transition, createCommentVNode, inject, Teleport } from "vue";
+import { arrow as arrow$1, computePosition, offset, shift, flip, autoPlacement, hide, autoUpdate } from "@floating-ui/dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -575,6 +172,6 @@ var FUNC_ERROR_TEXT = "Expected a function";
   const floating = ref(null);
-  const x2 = ref(void 0);
-  const y2 = ref(void 0);
-  const placement = ref(options.placement || "bottom");
-  const strategy = ref(options.strategy || "absolute");
+  const x = ref(void 0);
+  const y = ref(void 0);
+  const placement = ref(unref(options.placement || "bottom"));
+  const strategy = ref(unref(options.strategy || "absolute"));
   const middlewareData = shallowRef({});
@@ -587,9 +184,9 @@ const update = () => {
     }
-    D(referenceDom, floatingDom, {
-      placement: options.placement,
-      strategy: options.strategy,
+    computePosition(referenceDom, floatingDom, {
+      placement: unref(options.placement),
+      strategy: unref(options.strategy),
       middleware: unref(options.middleware)
     }).then((data) => {
-      x2.value = data.x;
-      y2.value = data.y;
+      x.value = data.x;
+      y.value = data.y;
       placement.value = data.placement;
@@ -600,3 +197,3 @@ strategy.value = data.strategy;
   };
-  return { x: x2, y: y2, placement, strategy, middlewareData, update, reference, floating };
+  return { x, y, placement, strategy, middlewareData, update, reference, floating };
 }
@@ -611,3 +208,3 @@ const arrow = (options) => {
       if (element) {
-        return m$1({ element, padding }).fn(args);
+        return arrow$1({ element, padding }).fn(args);
       }
@@ -677,2 +274,3 @@ return {};
 function isVisibleDOMElement(input) {
+  input = unref(input);
   return input && (input == null ? void 0 : input.nodeType) !== Node.COMMENT_NODE;
@@ -702,9 +300,9 @@ }
     },
-    offset: Number,
+    offset: [Number, Object, Function],
     shift: {
-      type: [Boolean, Number],
+      type: [Boolean, Number, Object],
       default: false
     },
     flip: {
-      type: Boolean,
+      type: [Boolean, Object],
       default: false
@@ -721,3 +319,3 @@ },
     hide: {
-      type: Boolean,
+      type: [Boolean, Object],
       default: false
@@ -739,2 +337,7 @@ },
     leaveTo: String,
+    originClass: [String, Function],
+    tailwindcssOriginClass: {
+      type: Boolean,
+      default: false
+    },
     portal: {
@@ -744,14 +347,19 @@ type: [Boolean, String],
     },
-    originClass: [String, Function],
-    tailwindcssOriginClass: {
+    wrapFloating: {
       type: Boolean,
-      default: false
+      default: true
     },
+    transform: {
+      type: Boolean,
+      default: true
+    },
     middleware: {
-      type: Array,
+      type: [Array, Function],
       default: () => []
     }
   },
-  emits: ["show", "hide"],
+  emits: ["show", "hide", "update"],
   setup(props, { slots, emit }) {
+    const propPlacement = ref(props.placement);
+    const propStrategy = ref(props.strategy);
     const middleware = shallowRef(void 0);
@@ -761,7 +369,31 @@ const arrowRef = ref(null);
     const arrowY = ref(void 0);
-    const { x: x2, y: y2, placement, strategy, reference, floating, middlewareData, update } = useFloating({
-      placement: props.placement,
-      strategy: props.strategy,
+    const { x, y, placement, strategy, reference, floating, middlewareData, update } = useFloating({
+      placement: propPlacement,
+      strategy: propStrategy,
       middleware
     });
+    const referenceEl = ref(dom(reference));
+    const floatingEl = ref(dom(floating));
+    const updateEl = () => {
+      referenceEl.value = dom(reference);
+      floatingEl.value = dom(floating);
+    };
+    const updateFloating = () => {
+      update();
+      emit("update");
+    };
+    watch(() => props.placement, () => {
+      propPlacement.value = props.placement;
+      updateEl();
+      if (isVisibleDOMElement(referenceEl) && isVisibleDOMElement(floatingEl)) {
+        updateFloating();
+      }
+    });
+    watch(() => props.strategy, () => {
+      propStrategy.value = props.strategy;
+      updateEl();
+      if (isVisibleDOMElement(referenceEl) && isVisibleDOMElement(floatingEl)) {
+        updateFloating();
+      }
+    });
     watch([
@@ -776,13 +408,14 @@ () => props.offset,
     ], () => {
+      updateEl();
       const _middleware = [];
-      if (typeof props.offset === "number") {
-        _middleware.push(T$1(props.offset));
+      if (typeof props.offset === "number" || typeof props.offset === "object" || typeof props.offset === "function") {
+        _middleware.push(offset(props.offset));
       }
-      if (props.shift === true || typeof props.shift === "number") {
-        _middleware.push(D$1({
+      if (props.shift === true || typeof props.shift === "number" || typeof props.shift === "object") {
+        _middleware.push(shift(__spreadValues({
           padding: typeof props.shift === "number" ? props.shift : void 0
-        }));
+        }, typeof props.shift === "object" ? props.shift : {})));
       }
-      if (props.flip) {
-        _middleware.push(b$1());
+      if (props.flip === true || typeof props.flip === "object") {
+        _middleware.push(flip(typeof props.flip === "object" ? props.flip : void 0));
       }
@@ -795,11 +428,15 @@ if (props.arrow === true || typeof props.arrow === "number") {
       }
-      if (props.autoPlacement !== false) {
-        _middleware.push(v$1(typeof props.autoPlacement === "object" ? props.autoPlacement : void 0));
+      if (props.autoPlacement === true || typeof props.autoPlacement === "object") {
+        _middleware.push(autoPlacement(typeof props.autoPlacement === "object" ? props.autoPlacement : void 0));
       }
-      if (props.hide) {
-        _middleware.push(P());
+      _middleware.push(...typeof props.middleware === "function" ? props.middleware({
+        referenceEl,
+        floatingEl
+      }) : props.middleware);
+      if (props.hide === true || typeof props.hide === "object") {
+        _middleware.push(hide(typeof props.hide === "object" ? props.hide : void 0));
       }
-      middleware.value = _middleware.concat(props.middleware);
-      if (isVisibleDOMElement(dom(reference)) && isVisibleDOMElement(dom(floating))) {
-        update();
+      middleware.value = _middleware;
+      if (isVisibleDOMElement(referenceEl) && isVisibleDOMElement(floatingEl)) {
+        updateFloating();
       }
@@ -809,4 +446,5 @@ }, { immediate: true });
     const startAutoUpdate = () => {
-      if (isVisibleDOMElement(dom(reference)) && isVisibleDOMElement(dom(floating)) && props.autoUpdate !== false) {
-        disposeAutoUpdate = S(dom(reference), dom(floating), lodash_throttle(update, 16), typeof props.autoUpdate === "object" ? props.autoUpdate : void 0);
+      updateEl();
+      if (isVisibleDOMElement(referenceEl) && isVisibleDOMElement(floatingEl) && props.autoUpdate !== false) {
+        disposeAutoUpdate = autoUpdate(referenceEl.value, floatingEl.value, lodash_throttle(updateFloating, 16), typeof props.autoUpdate === "object" ? props.autoUpdate : void 0);
       }
@@ -871,19 +509,34 @@ };
         };
+        const floatingProps = {
+          ref: floating,
+          style: props.transform ? {
+            position: strategy.value,
+            zIndex: props.zIndex,
+            top: "0",
+            left: "0",
+            right: "auto",
+            bottom: "auto",
+            transform: `translate(${Math.round(x.value || 0)}px,${Math.round(y.value || 0)}px)`
+          } : {
+            position: strategy.value,
+            zIndex: props.zIndex,
+            top: `${y.value || 0}px`,
+            left: `${x.value || 0}px`
+          }
+        };
         const wrapPortal = (node) => {
-          if (props.portal !== false) {
-            return h$2(Teleport, { to: props.portal === true ? "body" : props.portal }, [node]);
+          if (props.portal === true || typeof props.portal === "string") {
+            return h(Teleport, { to: props.portal === true ? "body" : props.portal }, [node]);
           }
           return node;
         };
+        const wrapFloating = (node) => {
+          if (props.wrapFloating) {
+            return h("div", floatingProps, node);
+          }
+          return node;
+        };
         return [
           cloneVNode(referenceNode, { ref: reference }),
-          wrapPortal(h$2(Transition, transitionProps, () => floatingNode ? cloneVNode(floatingNode, {
-            ref: floating,
-            style: {
-              position: strategy.value,
-              zIndex: props.zIndex,
-              top: typeof y2.value === "number" ? `${y2.value}px` : "0",
-              left: typeof x2.value === "number" ? `${x2.value}px` : "0"
-            }
-          }) : createCommentVNode()))
+          wrapPortal(wrapFloating(h(Transition, transitionProps, () => floatingNode ? cloneVNode(floatingNode, props.wrapFloating ? null : floatingProps) : createCommentVNode())))
         ];
@@ -897,3 +550,3 @@ }
   setup(props, { slots, attrs }) {
-    const { ref: ref2, placement, x: x2, y: y2 } = useArrowContext("FloatArrow");
+    const { ref: ref2, placement, x, y } = useArrowContext("FloatArrow");
     return () => {
@@ -908,4 +561,4 @@ var _a;
       const style = {
-        left: typeof x2.value === "number" ? `${x2.value}px` : "",
-        top: typeof y2.value === "number" ? `${y2.value}px` : "",
+        left: typeof x.value === "number" ? `${x.value}px` : "",
+        top: typeof y.value === "number" ? `${y.value}px` : "",
         right: "",
@@ -915,7 +568,33 @@ bottom: "",
       };
-      const node = (_a = slots.default) == null ? void 0 : _a.call(slots)[0];
-      return node ? cloneVNode(node, { ref: ref2, style }) : h$2("div", Object.assign({}, attrs, { ref: ref2, style }));
+      const slot = { placement: placement.value };
+      const children = (_a = slots.default) == null ? void 0 : _a.call(slots, slot);
+      const [node] = Array.isArray(children) ? children : [children];
+      if (node) {
+        return cloneVNode(node, { ref: ref2, style });
+      }
+      return h("div", Object.assign({}, attrs, { ref: ref2, style }));
     };
   }
 });
-export { Float, FloatArrow, tailwindcssOriginClassResolver, tailwindcssOriginSafelist, useFloating };
+const components = [
+  "Float",
+  "FloatArrow"
+];
+function HeadlessUiFloatResolver(options = {}) {
+  const { prefix = "" } = options;
+  return {
+    type: "component",
+    resolve: (name) => {
+      if (name.startsWith(prefix)) {
+        const componentName = name.substring(prefix.length);
+        if (components.includes(componentName)) {
+          return {
+            importName: componentName,
+            path: "headlessui-float-vue"
+          };
+        }
+      }
+    }
+  };
+}
+export { Float, FloatArrow, HeadlessUiFloatResolver, arrow, tailwindcssOriginClassResolver, tailwindcssOriginSafelist, useFloating };

dist/index.d.ts

 export { Float, FloatArrow } from './float';
-export { useFloating } from './useFloating';
+export * from './useFloating';
 export * from './origin-class-resolvers';
+export * from './resolver';

dist/useFloating.d.ts

@@ -1,14 +0,8 @@
-import { Ref, ShallowRef } from 'vue';
-import { Placement, Strategy, Middleware } from '@floating-ui/dom';
-import { SideObject, MiddlewareData } from '@floating-ui/core';
-export interface AuthUpdateOptions {
-    ancestorScroll: boolean;
-    ancestorResize: boolean;
-    elementResize: boolean;
-    animationFrame: boolean;
-}
+import type { Ref, ShallowRef } from 'vue';
+import type { Placement, Strategy, Middleware } from '@floating-ui/dom';
+import type { SideObject, MiddlewareData } from '@floating-ui/core';
 export declare type UseFloatingOptions = {
-    placement?: Placement;
-    strategy?: Strategy;
-    middleware?: Ref<Middleware[] | undefined> | Middleware[] | undefined;
+    placement?: Ref<Placement> | Placement;
+    strategy?: Ref<Strategy> | Strategy;
+    middleware?: Ref<Middleware[] | undefined> | Middleware[];
 };
@@ -15,0 +9,0 @@ export declare function useFloating(options?: UseFloatingOptions): {

package.json

 {
   "name": "headlessui-float-vue",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Eazy use Headless UI for Vue 3 with Floating UI (Popper.js)",
@@ -41,5 +41,7 @@ "license": "MIT",
   },
+  "dependencies": {
+    "@floating-ui/core": "^0.6.0",
+    "@floating-ui/dom": "^0.4.0"
+  },
   "devDependencies": {
-    "@floating-ui/core": "^0.6.0",
-    "@floating-ui/dom": "^0.4.0",
     "@types/lodash.throttle": "^4.1.6",
@@ -50,2 +52,3 @@ "@types/node": "^17.0.21",
     "typescript": "^4.5.4",
+    "unplugin-vue-components": "^0.17.21",
     "vite": "^2.8.0",
@@ -52,0 +55,0 @@ "vue": "^3.2.0",

README.md

 # Headless UI Float Vue
 
-Eazy use [Headless UI](https://headlessui.dev/) for Vue 3 with [Floating UI](https://floating-ui.com/) (Popper.js).
+English | [繁體中文](README-zh-TW.md)
 
-## Usage
+Eazy use [Headless UI](https://headlessui.dev/) for Vue 3 with [Floating UI](https://floating-ui.com/) (Popper.js) to position floating elements.
 
-Installation package:
+This package is adapted from [headlessui#154 example](https://github.com/tailwindlabs/headlessui/issues/154).
 
+* Eazy use Headless UI & Tailwind CSS
+* Floating UI (New version Popper.js) position floating elements
+* Auto-update floating elements
+* Support Transition
+* Support Portal (Teleport)
+* Support Arrow
+
+[**Example repository**](../../examples/example-vue)
+
+## Installation
+
 ```bash
-# via npm
+# npm
 npm i headlessui-float-vue
-# via yarn
+# yarn
 yarn add headlessui-float-vue
 ```
 
-Basic example using `<Menu>` of Headless UI:
+## Usage
 
+First finding a Headless UI component that needs to positioning element, such as the `<Menu>` component here. Import `<Float>` component:
+
+```html
+<script setup>
+import { Float } from 'headlessui-float-vue'
+</script>
+```
+
+Then wrap `<Float>` around `<MenuButton>` and `<MenuItems>`:
+
+```diff
+<Menu>
++ <Float>
+    <MenuButton class="...">
+      Options
+    </MenuButton>
+
+    <MenuItems class="...">
+      ...
+    </MenuItems>
++ </Float>
+</Menu>
+```
+
+Note that `<Float>` must contain 2 child elements, the first being a reference element, either a Headless UI component or an HTML element, and the second being a float element.
+
+Then remove the `"absolute"`, `"right-0"` and other positioning class from `<MenuItems>`, and add the `placement="bottom-end"` attribute:
+
+```html
+<Menu>
+  <Float placement="bottom-end">
+    ...
+  </Float>
+</Menu>
+```
+
+Remove the `"mt-2"` class from `<MenuItems>`, and add the `:offset="4"` attribute:
+
+```html
+<Menu>
+  <Float placement="bottom-end" :offset="4">
+    ...
+  </Float>
+</Menu>
+```
+
+Then `<Menu>` can be automatically position the inner `<MenuItems>`.
+
+In addition to `<Menu>`, the same can be used on `<Listbox>`, `<Popover>` or `<Combobox>` components, and you can use `<Float>` on any element that requires floating positioning.
+
+## Floating UI Options
+
+### placement
+
+Floating positioning placement:
+
+```html
+<Float placement="left-start">
+```
+
+All 12 placement in the Floating UI can be used:
+
+* top
+* top-start
+* top-end
+* right
+* right-start
+* right-end
+* bottom
+* bottom-start
+* bottom-end
+* left
+* left-start
+* left-end
+
+### strategy
+
+The type of CSS position property, `absolute` or `fixed`：
+
+```html
+<Float strategy="fixed">
+```
+
+### offset
+
+Offset of the floating element from the reference element (px)：
+
+```html
+<Float :offset="8">
+```
+
+> More options supported by `offset`, refer to Floating UI's `offset` documentation: https://floating-ui.com/docs/offset
+
+### shift
+
+Move the reference elements back into the view:
+
+```html
+<Float shift>
+```
+
+Set the offset (px) of the floating element from the view border:
+
+```html
+<Float :shift="8">
+```
+
+> More options supported by `shift`, refer to Floating UI's `shift` documentation: https://floating-ui.com/docs/shift
+
+### flip
+
+Change to the opposite placement to keep it in view:
+
+> `flip` cannot be used with `autoPlacement`
+
+```html
+<Float flip>
+```
+
+> More options supported by `flip`, refer to Floating UI's `flip` documentation: https://floating-ui.com/docs/flip
+
+### autoPlacement
+
+Floating elements chooses the placement with more space left:
+
+> `autoPlacement` cannot be used with `flip`
+
+```html
+<Float auto-placement>
+```
+
+> More options supported by `autoPlacement`, refer to Floating UI's `autoPlacement` documentation: https://floating-ui.com/docs/autoPlacement
+
+<!-- ### hide
+
+When the reference element is not visible, the floating element is hidden: -->
+
+### autoUpdate
+
+Automatically update floating elements when needed, the default value is `true`. Can be set to `false` to disable autoUpdate:
+
+```html
+<Float :auto-update="false">
+```
+
+> More options supported by `autoUpdate`, refer to Floating UI's `autoUpdate` documentation: https://floating-ui.com/docs/autoUpdate
+
+### middleware
+
+If the above basic settings do not satisfy your needs, you can add the Floating UI middleware yourself:
+
+```html
+<Float :middleware="middleware">
+
+<script setup>
+import { offset } from '@floating-ui/dom'
+
+const middleware = [
+  offset({
+    mainAxis: 10,
+    crossAxis: 6,
+  }),
+]
+</script>
+```
+
+Or pass a function to get reference elements and floating elements in the parameters:
+
+```js
+const middleware = ({ referenceEl, floatingEl }) => [
+  ...
+]
+```
+
+## Transition
+
+`<Float>` use the `<transition>` component, just adds the classes of transition:
+
+```html
+<Float
+  enter="transition duration-200 ease-out"
+  enter-from="scale-95 opacity-0"
+  enter-to="scale-100 opacity-100"
+  leave="transition duration-150 ease-in"
+  leave-from="scale-100 opacity-100"
+  leave-to="scale-95 opacity-0"
+  tailwindcss-origin-class
+>
+```
+
+When `tailwindcss-origin-class` is enabled, the corresponding Tailwind CSS `origin` class will be automatically added according to the placement (e.g. `top` corresponds to `origin-bottom` class, `bottom-start` corresponds to `origin-top-left` class).
+
+If use the `tailwindcss-origin-class`, also need to add the `origin` class to the safelist:
+
+*tailwind.config.js*
+```js
+const { tailwindcssOriginSafelist } = require('headlessui-float-vue')
+
+module.exports = {
+  safelist: [...tailwindcssOriginSafelist],
+}
+```
+
+If need to override the `origin` class, can use `origin-class`.
+
+```html
+<Float origin-class="origin-top-left">
+```
+
+## Arrow
+
+First import the `<FloatArrow>` component, and palce it inside the floating element, then add the class:
+
+```html
+<Popover>
+  <Float>
+    ...
+    <PopoverPanel>
+      <!-- add arrow -->
+      <FloatArrow class="absolute bg-white w-5 h-5 rotate-45 border border-gray-200" />
+      <div>
+        Popover & arrow, content...
+      </div>
+    </PopoverPanel>
+  </Float>
+</Popover>
+
+<script setup>
+...
+import { Float, FloatArrow } from 'headlessui-float-vue'
+</script>
+```
+
+Then add the `arrow` prop in `<Float>`, and add `:offset="15"` to keep the arrow away from the reference element:
+
+```html
+<Float arrow :offset="15">
+```
+
+Full example of arrow:
+
 ```vue
 <template>
-  <Menu>
-    <Float placement="bottom-start" :offset="4">
-      <MenuButton class="flex justify-center items-center px-5 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-500 text-sm rounded-md">
-        Options
-      </MenuButton>
+  <Popover>
+    <Float
+      placement="bottom-start"
+      :offset="15"
+      arrow
+    >
+      <PopoverButton class="px-5 py-2 bg-rose-50 hover:bg-rose-100 text-rose-500 rounded">
+        Button
+      </PopoverButton>
 
-      <MenuItems class="w-48 bg-white border border-gray-200 rounded-md shadow-lg overflow-hidden focus:outline-none">
-        <MenuItem v-slot="{ active }">
-          <button type="button" class="block w-full px-4 py-1.5 text-left text-sm" :class="{ 'bg-indigo-500 text-white': active }">
-            Account settings
-          </button>
-        </MenuItem>
-        <MenuItem v-slot="{ active }">
-          <button type="button" class="block w-full px-4 py-1.5 text-left text-sm" :class="{ 'bg-indigo-500 text-white': active }">
-            Documentation
-          </button>
-        </MenuItem>
-        <MenuItem disabled>
-          <span class="block w-full px-4 py-1.5 text-left text-sm opacity-50 cursor-default">
-            Invite a friend (coming soon!)
-          </span>
-        </MenuItem>
-      </MenuItems>
+      <PopoverPanel class="w-[240px] h-[70px] bg-white border border-gray-200 rounded-md shadow-lg focus:outline-none">
+        <FloatArrow class="absolute bg-white w-5 h-5 rotate-45 border border-gray-200" />
+        <div class="relative h-full bg-white p-3 text-rose-500 rounded-md">
+          Popover & arrow, content...
+        </div>
+      </PopoverPanel>
     </Float>
-  </Menu>
+  </Popover>
 </template>
 
-<script>
-import { Float } from 'headlessui-float-vue'
-
-export default {
-  components: { Float },
-}
+<script setup>
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { Float, FloatArrow } from 'headlessui-float-vue'
 </script>
 ```
 
-Of course you can use for `<Menu>`, `<Listbox>`, `<Popover>` and `<Combobox>`. Use `<Float>` whenever you need to floating elements.
+## z-index
 
-## Origin Class
+Set `z-index` CSS property for the floating element, the default value is 9999, and other numbers can be set:
 
-* Origin Class Resolver
-* Origin Safelist
+```html
+<Float :z-index="100">
+```
 
-## z-index
+## Portal (Teleport)
 
-## Floating UI Options
+Append the floating element to `<body>`:
 
-* placement
-* strategy
-* offset
-* shift
-* flip
-* autoPlacement
-* hide
-* autoUpdate
+```html
+<Float portal>
+```
 
-## Floating UI Middleware
+Or can select other elements that already exist:
 
-## Transition
+```html
+<Float portal="#other-root-element">
+```
 
-## Portal (Teleport)
+## High-Order Component
 
-## Placement Origin Class
+High-order component, can be easily applied in projects after custom of `<Float>` component:
 
-## Arrow
+*HighOrderFloat.vue*
+```vue
+<template>
+  <Float
+    :offset="8"
+    flip
+    :shift="6"
+    portal
+    enter="transition duration-200 ease-out"
+    enter-from="scale-95 opacity-0"
+    enter-to="scale-100 opacity-100"
+    leave="transition duration-150 ease-in"
+    leave-from="scale-100 opacity-100"
+    leave-to="scale-95 opacity-0"
+    tailwindcss-origin-class
+  >
+    <slot></slot>
+  </Float>
+</template>
 
-## Event
+<script setup>
+import { Float } from 'headlessui-float-vue'
+</script>
+```
 
-* show
-* hide
+Used in the same way as `<Float>`. It can also override the defined prop in high-order component:
 
-## High-Order Component
+```html
+<Menu>
+  <HighOrderFloat placement="bottom-end" :offset="12">
+    <MenuButton>
+      Options
+    </MenuButton>
+    <MenuItems>
+      ...
+    </MenuItems>
+  </HighOrderFloat>
+</Menu>
+```
+
+## License
+Under the [MIT LICENSE](LICENSE.md)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

9

decreased by-10%

Number of package files

14

increased by7.69%

Number of lines in readme file

366

increased by297.83%

Worsened metrics

Total package byte prevSize

48744

decreased by-29.46%

Dependency count

3

increased by200%

Lines of code

871

decreased by-26.81%

Dependency changes

• + Added@floating-ui/core@^0.6.0

• + Added@floating-ui/dom@^0.4.0

• + Added@floating-ui/core@0.6.2(transitive)

• + Added@floating-ui/dom@0.4.5(transitive)