@fiscozen/composables 1.0.0 → 1.0.1

package/dist/composables.umd.cjs

@@ -0,0 +1 @@
+(function(p,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(p=typeof globalThis<"u"?globalThis:p||self,n(p.FzComposables={},p.Vue))})(this,function(p,n){"use strict";const L=(e,t)=>{const o=Math.pow(10,t);return Math.trunc(e*o)/o},P=(e,{minimumFractionDigits:t=0,maximumFractionDigits:o=2,roundDecimals:l=!0,useGrouping:a=!0}={})=>e==null||isNaN(e)||!isFinite(e)?"":(l?e:L(e,o)).toLocaleString("it-IT",{minimumFractionDigits:t,maximumFractionDigits:o,useGrouping:a}),$=e=>{if(!e||typeof e!="string")return NaN;let t=e.trim();return t.includes(",")&&(t=t.replace(/\./g,""),t=t.replace(",",".")),parseFloat(t)},U=(e,t)=>{let o=t;const l=t%e,a=t>=0?e:-e;return l!==0&&(o=Math.abs(l)>=e/2?t+a-l:t-l),o},T=(e,t,o)=>Math.max(e,Math.min(t,o)),C=new DOMRect(0,0,window.innerWidth,window.innerHeight),b=(e,t,o,l,a)=>{let r=a?"bottom":"right",u=a?"bottom-start":"right-start";C.width=window.innerWidth,C.height=window.innerHeight,C.x=0,C.y=0;const v=e?e.getBoundingClientRect():C,x=t.getBoundingClientRect(),h=o.getBoundingClientRect(),g=(h.left-v.left-x.width)/v.width,m=(v.right-h.right-x.width)/v.width,y=(h.top-v.top-x.height)/v.height,s=(v.bottom-h.bottom-x.height)/v.height;let c=[{key:"right",space:m},{key:"top",space:y},{key:"bottom",space:s},{key:"left",space:g}].sort((f,d)=>d.space-f.space);if(a&&(c=c.filter(f=>f.key==="top"||f.key==="bottom")),r=c[0].key,!l){const f=(x.height-h.height)/2;switch(r){case"right":case"left":v.top>h.top-f&&(l="end"),v.bottom<h.top-f&&(l="start");break}}return u=l?`${r}-${l}`:r,u},F=(e,t,o,l)=>({x:t.x+e.width*o/100,y:t.y+e.height*l/100}),M=e=>typeof e=="string"?document.querySelector(e):e,V=e=>({left:parseFloat(e.marginLeft),right:parseFloat(e.marginRight),top:parseFloat(e.marginTop),bottom:parseFloat(e.marginBottom)}),j={bottom:(e,t)=>({position:{x:e.left-t.left+e.width/2,y:e.bottom},transform:{x:-50,y:0}}),"bottom-start":(e,t)=>({position:{x:e.left-t.left,y:e.bottom},transform:{x:0,y:0}}),"bottom-end":(e,t)=>({position:{x:e.right+t.right,y:e.bottom},transform:{x:-100,y:0}}),top:(e,t)=>({position:{x:e.left-t.left+e.width/2,y:e.top-t.bottom},transform:{x:-50,y:-100}}),"top-start":(e,t)=>({position:{x:e.left-t.left,y:e.top-t.bottom},transform:{x:0,y:-100}}),"top-end":(e,t)=>({position:{x:e.right+t.right,y:e.top-t.bottom},transform:{x:-100,y:-100}}),left:(e,t)=>({position:{x:e.left-t.right,y:e.top-t.top+e.height/2},transform:{x:-100,y:-50}}),"left-start":(e,t)=>({position:{x:e.left-t.right,y:e.top-t.top},transform:{x:-100,y:0}}),"left-end":(e,t)=>({position:{x:e.left-t.right,y:e.bottom+t.bottom},transform:{x:-100,y:-100}}),right:(e,t)=>({position:{x:e.right+t.left,y:e.top-t.top+e.height/2},transform:{x:0,y:-50}}),"right-start":(e,t)=>({position:{x:e.right+t.left,y:e.top-t.top},transform:{x:0,y:0}}),"right-end":(e,t)=>({position:{x:e.right+t.left,y:e.bottom+t.bottom},transform:{x:0,y:-100}})},I=(e,t,o)=>{const l=j[e];return l?l(t,o):{position:{x:0,y:0},transform:{x:0,y:0}}},K={bottom:(e,t)=>({position:{x:e.left+e.width/2,y:e.bottom-t.height},transform:{x:-50,y:0}}),"bottom-start":(e,t)=>({position:{x:e.left,y:e.bottom-t.height},transform:{x:0,y:0}}),"bottom-end":(e,t)=>({position:{x:e.right-t.width,y:e.bottom-t.height},transform:{x:0,y:0}}),top:e=>({position:{x:e.left+e.width/2,y:e.top},transform:{x:-50,y:0}}),"top-start":e=>({position:{x:e.left,y:e.top},transform:{x:0,y:0}}),"top-end":(e,t)=>({position:{x:e.right-t.width,y:e.top},transform:{x:0,y:0}}),left:(e,t)=>({position:{x:e.left,y:e.top+(e.height-t.height)/2},transform:{x:0,y:0}}),"left-start":e=>({position:{x:e.left,y:e.top},transform:{x:0,y:0}}),"left-end":(e,t)=>({position:{x:e.left,y:e.bottom-t.height},transform:{x:0,y:0}}),right:(e,t)=>({position:{x:e.right-t.width,y:e.top+(e.height-t.height)/2},transform:{x:0,y:0}}),"right-start":(e,t)=>({position:{x:e.right-t.width,y:e.top},transform:{x:0,y:0}}),"right-end":(e,t)=>({position:{x:e.right-t.width,y:e.bottom-t.height},transform:{x:0,y:0}})},q=(e,t,o)=>{const l=K[e];return l?l(t,o):{position:{x:0,y:0},transform:{x:0,y:0}}},Q=(e,t,o,l)=>{const a={...e},r={...l};if(e.x<o.left&&(a.x=o.left,r.x=0),e.x+t.width>o.right){const u=o.right-t.width;u>0&&(a.x=u),r.x=0}if(e.y<o.top&&(a.y=o.top,r.y=0),e.y+t.height>o.bottom){const u=o.bottom-t.height;u>0&&(a.y=u),r.y=0}return{position:a,transform:r}},G=(e,t,o,l,a)=>{const r=a?null:t;switch(e){case"auto":return b(r,o,l);case"auto-vertical":return b(r,o,l,void 0,!0);case"auto-start":return b(r,o,l,"start");case"auto-vertical-start":return b(r,o,l,"start",!0);case"auto-end":return b(r,o,l,"end");case"auto-vertical-end":return b(r,o,l,"end",!0);default:return"bottom-start"}},X=e=>e.startsWith("auto"),W=e=>{const t=n.ref("auto"),o=n.ref(),l=n.ref(),a=n.ref(),r=n.ref(),u=n.reactive({position:{x:0,y:0}}),v={root:null,rootMargin:"0px",threshold:1,...e.element.value.intersectionOptions},x=n.ref(new IntersectionObserver(()=>{},v)),h=()=>{var f,d;const y=M(e.element.value.domRef.value);if(!y)return null;const s=(f=e.container)!=null&&f.value?M(e.container.value.domRef.value)??document.body:document.body,c=(d=e.opener)!=null&&d.value?M(e.opener.value.domRef.value):null;return{element:y,container:s,opener:c}},g=y=>{var s;return{element:y.element.getBoundingClientRect(),container:y.container.getBoundingClientRect(),opener:((s=y.opener)==null?void 0:s.getBoundingClientRect())??null}},m=(y=!1)=>n.nextTick(()=>{var O,z,B;o.value=((O=e.position)==null?void 0:O.value)??"auto";const s=h();if(!s)return;Object.assign(s.element.style,{position:"fixed",top:"0px",left:"0px"});const c=g(s);l.value=c.element,a.value=c.opener??void 0,r.value=c.container,x.value.observe(s.element),x.value.observe(s.container),X(o.value)&&s.opener&&(o.value=G(o.value,s.container,s.element,s.opener,((z=e.useViewport)==null?void 0:z.value)??!1));const f=V(window.getComputedStyle(s.element)),d=s.opener&&c.opener?I(o.value,c.opener,f):q(o.value,c.container,c.element),E=F(c.element,d.position,d.transform.x,d.transform.y),k=Q(E,c.element,c.container,d.transform);u.position.x=k.position.x,u.position.y=k.position.y,Object.assign(s.element.style,{top:`${u.position.y}px`,left:`${u.position.x}px`,position:"fixed",display:"flex"}),l.value=s.element.getBoundingClientRect(),(B=e.callback)!=null&&B.value&&!y&&e.callback.value(l,a,r,t,o)});return n.onUnmounted(()=>{x.value.disconnect()}),{float:u,rect:l,setPosition:m,position:t,actualPosition:o,openerRect:a,containerRect:r}};function R(e){const t=window.matchMedia(e),o=n.ref(t.matches);function l(a){o.value=a.matches}return n.onMounted(()=>{t.addEventListener("change",l)}),n.onUnmounted(()=>{t.removeEventListener("change",l)}),n.computed(()=>o.value)}function Y(e){return{isGreater(t){return R(`(min-width: ${e[t]})`)},isSmaller(t){return R(`(max-width: ${e[t]})`)},isInBetween(t,o){return R(`(min-width: ${e[t]}) and (max-width: ${e[o]})`)}}}function J(e,t,o){if(!e)throw new Error("A target component has to be provided.");if(!t)throw new Error("A callback has to be provided.");const l=a=>{!e.value||a.target===e.value||a.composedPath().includes(e.value)||typeof t=="function"&&t()};o&&n.watch(o,(a,r)=>{r&&r.removeEventListener("click",l),a==null||a.addEventListener("click",l)}),n.onMounted(()=>{o||document.addEventListener("click",l)}),n.onBeforeUnmount(()=>{var a;if(o){(a=o.value)==null||a.removeEventListener("click",l);return}document.removeEventListener("click",l)})}function Z(e,t){if(!e)throw new Error("A target component has to be provided.");if(!t||typeof t!="function")throw new Error("A callback has to be provided.");const o=l=>{t(l)};n.onMounted(()=>{e.value.addEventListener("keydown",o)}),n.onBeforeUnmount(()=>{e.value.removeEventListener("keydown",o)})}function _(e,t){if(!e||typeof e!="function")throw new Error("A callback has to be provided.");const o=l=>{e(l)};n.onMounted(()=>{if(!t){document.addEventListener("keyup",o);return}t.value.addEventListener("keyup",o)}),n.onBeforeUnmount(()=>{if(!t){document.removeEventListener("keyup",o);return}t.value.removeEventListener("keyup",o)})}const ee=e=>({format:P,parse:$}),N={global:{blue:{50:{value:"#eff1ff",type:"color"},100:{value:"#dee2ff",type:"color"},200:{value:"#bdc5ff",type:"color"},300:{value:"#9ca8ff",type:"color"},400:{value:"#7b8bff",type:"color"},500:{value:"#5a6eff",type:"color"},600:{value:"#4858cc",type:"color"},700:{value:"#364299",type:"color"},800:{value:"#242c66",type:"color"},900:{value:"#1b214c",type:"color"}},purple:{50:{value:"#f8f4ff",type:"color"},100:{value:"#f0e9ff",type:"color"},200:{value:"#e1d3ff",type:"color"},300:{value:"#d2bdff",type:"color"},400:{value:"#c3a7ff",type:"color"},500:{value:"#b491ff",type:"color"},600:{value:"#9074cc",type:"color"},700:{value:"#6c5799",type:"color"},800:{value:"#483a66",type:"color"},900:{value:"#241d33",type:"color"}},orange:{50:{value:"#fff2ef",type:"color"},100:{value:"#ffe4de",type:"color"},200:{value:"#ffc9bd",type:"color"},300:{value:"#ffae9c",type:"color"},400:{value:"#ff937b",type:"color"},500:{value:"#ff785a",type:"color"},600:{value:"#cc6048",type:"color"},700:{value:"#994836",type:"color"},800:{value:"#663024",type:"color"},900:{value:"#331812",type:"color"}},pink:{50:{value:"#fff5f5",type:"color"},100:{value:"#ffe0e0",type:"color"},200:{value:"#ffcbcb",type:"color"},300:{value:"#ffc0c0",type:"color"},400:{value:"#ffabab",type:"color"},500:{value:"#ff9696",type:"color"},600:{value:"#cc7878",type:"color"},700:{value:"#995a5a",type:"color"},800:{value:"#663c3c",type:"color"},900:{value:"#331e1e",type:"color"}},yellow:{50:{value:"#fffbf4",type:"color"},100:{value:"#fff3de",type:"color"},200:{value:"#ffebc8",type:"color"},300:{value:"#ffe7bd",type:"color"},400:{value:"#ffdfa7",type:"color"},500:{value:"#ffd791",type:"color"},600:{value:"#ccac74",type:"color"},700:{value:"#998157",type:"color"},800:{value:"#806c49",type:"color"},900:{value:"#4c402b",type:"color"}},semantic:{error:{50:{value:"#fef3f3",type:"color"},100:{value:"#f8baba",type:"color"},200:{value:"#f04242",type:"color"},300:{value:"#aa2f2f",type:"color"}},warning:{50:{value:"#fff8f3",type:"color"},100:{value:"#ffdabd",type:"color"},200:{value:"#ffae4f",type:"color"},300:{value:"#b47b38",type:"color"}},success:{50:{value:"#f2f8f6",type:"color"},100:{value:"#b5d8ce",type:"color"},200:{value:"#0fa88c",type:"color"},300:{value:"#0b7763",type:"color"}},info:{50:{value:"#f3f7ff",type:"color"},100:{value:"#b4c8e1",type:"color"},200:{value:"#4e9fff",type:"color"},300:{value:"#3770b4",type:"color"}}},background:{"white-smoke":{value:"#f7f6f3",type:"color"},seashell:{value:"#f8ece7",type:"color"},"pale-purple":{value:"#f2e6ff",type:"color"},"alice-blue":{value:"#ecf2fc",type:"color"}},grey:{100:{value:"#e9edf0",type:"color"},200:{value:"#d1dde6",type:"color"},300:{value:"#9da9b2",type:"color"},400:{value:"#6e777e",type:"color"},500:{value:"#596167",type:"color"}},core:{white:{value:"#ffffff",type:"color"},black:{value:"#2c282f",type:"color"}},"font-sans":{"sharp-grotesk":{value:'"Sharp Grotesk", sans-serif',type:"fontFamilies"},inter:{value:'"Inter", sans-serif',type:"fontFamilies"}},font:{light:{value:"300",type:"fontWeights"},normal:{value:"400",type:"fontWeights"},medium:{value:"500",type:"fontWeights"}},spacing:{0:{value:"0px",type:"spacing"},1:{value:"1px",type:"spacing"},2:{value:"2px",type:"spacing"},4:{value:"4px",type:"spacing"},6:{value:"6px",type:"spacing"},8:{value:"8px",type:"spacing"},10:{value:"10px",type:"spacing"},12:{value:"12px",type:"spacing"},14:{value:"14px",type:"spacing"},16:{value:"16px",type:"spacing"},20:{value:"20px",type:"spacing"},24:{value:"24px",type:"spacing"},28:{value:"28px",type:"spacing"},32:{value:"32px",type:"spacing"},36:{value:"36px",type:"spacing"},40:{value:"40px",type:"spacing"},44:{value:"44px",type:"spacing"},48:{value:"48px",type:"spacing"},56:{value:"56px",type:"spacing"},64:{value:"64px",type:"spacing"},80:{value:"80px",type:"spacing"},96:{value:"96px",type:"spacing"},112:{value:"112px",type:"spacing"},128:{value:"128px",type:"spacing"},144:{value:"144px",type:"spacing"},160:{value:"160px",type:"spacing"},176:{value:"176px",type:"spacing"},192:{value:"192px",type:"spacing"},208:{value:"208px",type:"spacing"},224:{value:"224px",type:"spacing"},240:{value:"240px",type:"spacing"},256:{value:"256px",type:"spacing"},288:{value:"288px",type:"spacing"},320:{value:"320px",type:"spacing"},384:{value:"384px",type:"spacing"}},border:{0:{value:"0px",type:"borderWidth"},1:{value:"1px",type:"borderWidth"},2:{value:"2px",type:"borderWidth"},4:{value:"4px",type:"borderWidth"},8:{value:"8px",type:"borderWidth"}},rounded:{none:{value:"0px",type:"borderRadius"},sm:{value:"2px",type:"borderRadius"},base:{value:"4px",type:"borderRadius"},md:{value:"6px",type:"borderRadius"},lg:{value:"8px",type:"borderRadius"},xl:{value:"12px",type:"borderRadius"},"2xl":{value:"16px",type:"borderRadius"},"3xl":{value:"24px",type:"borderRadius"},full:{value:"9999px",type:"borderRadius"}},breakpoint:{xs:{value:"376px",type:"sizing"},sm:{value:"640px",type:"sizing"},md:{value:"768px",type:"sizing"},lg:{value:"1024px",type:"sizing"},xl:{value:"1280px",type:"sizing"},"2xl":{value:"1440px",type:"sizing"},"3xl":{value:"1536px",type:"sizing"}},shadow:{none:{value:{color:"#000000",type:"dropShadow",x:"0",y:"0",blur:"0",spread:"0"},type:"boxShadow"},sm:{value:{color:"#0000000d",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},type:"boxShadow"},base:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},{color:"#0000001a",type:"dropShadow",x:"0",y:"1",blur:"3",spread:"0"}],type:"boxShadow"},md:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"2",blur:"4",spread:"-1"},{color:"#0000001a",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-1"}],type:"boxShadow"},lg:{value:[{color:"#0000000d",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-2"},{color:"#0000001a",type:"dropShadow",x:"0",y:"10",blur:"15",spread:"-3"}],type:"boxShadow"},xl:{value:[{color:"#0000000a",type:"dropShadow",x:"0",y:"10",blur:"10",spread:"-5"},{color:"#0000001a",type:"dropShadow",x:"0",y:"20",blur:"25",spread:"-5"}],type:"boxShadow"},"2xl":{value:{color:"#00000040",type:"dropShadow",x:"0",y:"25",blur:"50",spread:"-12"},type:"boxShadow"},inner:{value:{color:"#0000000f",type:"innerShadow",x:"0",y:"2",blur:"4",spread:"0"},type:"boxShadow"}},underline:{value:"underline",type:"textDecoration"},text:{xs:{value:"12px",type:"fontSizes"},sm:{value:"14px",type:"fontSizes"},base:{value:"16px",type:"fontSizes"},lg:{value:"18px",type:"fontSizes"},xl:{value:"20px",type:"fontSizes"},"2xl":{value:"24px",type:"fontSizes"},"3xl":{value:"30px",type:"fontSizes"},"4xl":{value:"36px",type:"fontSizes"},"5xl":{value:"48px",type:"fontSizes"},"6xl":{value:"60px",type:"fontSizes"},"7xl":{value:"72px",type:"fontSizes"},"8xl":{value:"96px",type:"fontSizes"},"9xl":{value:"128px",type:"fontSizes"}},leading:{xs:{value:"16px",type:"lineHeights"},sm:{value:"18px",type:"lineHeights"},base:{value:"20px",type:"lineHeights"},lg:{value:"24px",type:"lineHeights"},xl:{value:"28px",type:"lineHeights"},"2xl":{value:"32px",type:"lineHeights"},"3xl":{value:"36px",type:"lineHeights"},"4xl":{value:"40px",type:"lineHeights"},"5xl":{value:"48px",type:"lineHeights"},"6xl":{value:"60px",type:"lineHeights"},"7xl":{value:"72px",type:"lineHeights"},"8xl":{value:"96px",type:"lineHeights"},"9xl":{value:"128px",type:"lineHeights"}}}},te={safeColorNames:["blue","purple","orange","pink","yellow","grey","core"]},oe={semanticColorNames:["error","warning","success","info"]},le=te.safeColorNames,ne=oe.semanticColorNames,S={};le.forEach(e=>{const t=N.global[e];t&&Object.keys(t).forEach(o=>{var a;const l=(a=t[o])==null?void 0:a.value;l&&(S[e]||(S[e]={}),S[e][o]=l)})});const H=N.global.semantic;H&&ne.forEach(e=>{const t=H[e];t&&typeof t=="object"&&Object.keys(t).forEach(o=>{var a;const l=(a=t[o])==null?void 0:a.value;if(l){const r=`semantic-${e}`;S[r]||(S[r]={}),S[r][o]=l}})});const re=Object.entries(N.global.breakpoint).reduce((e,[t,o])=>(e[t]=o.value,e),{}),ae=n.defineComponent({__name:"FzFloating",props:{isOpen:{type:Boolean,default:!1},position:{default:"auto"},container:{},contentClass:{},openerClass:{},overrideContentClass:{type:Boolean},overrideOpener:{},teleport:{type:Boolean,default:!1},useViewport:{type:Boolean}},emits:["fzfloating:setPosition"],setup(e,{expose:t,emit:o}){const l=e,a=o,r=n.ref(null),u=n.ref(null),v=n.useSlots(),x=R(`(max-width: ${re.xs})`);let h=!1,g=!1,m=null,y=null;const s={position:l.position,element:{domRef:r},container:{domRef:n.toRef(l.container||document.body)},opener:{domRef:n.toRef(null)},useViewport:l.useViewport,callback(...i){a("fzfloating:setPosition",...i)}},c=n.toRefs(s);v.opener&&(s.opener={domRef:u});const f=W(c),d=()=>{h||!g||(h=!0,requestAnimationFrame(()=>{g&&l.isOpen&&f.setPosition(),h=!1}))};n.onMounted(()=>{g=!0});const E=()=>{d()},k=()=>{d()},O=()=>{window.addEventListener("scroll",E,!0),window.addEventListener("resize",k),r.value&&!m&&(m=new ResizeObserver(()=>{d()}),m.observe(r.value)),u.value&&!y&&(y=new ResizeObserver(()=>{d()}),y.observe(u.value))},z=()=>{window.removeEventListener("scroll",E,!0),window.removeEventListener("resize",k),m&&(m.disconnect(),m=null),y&&(y.disconnect(),y=null)};n.watch(()=>l.position,()=>d()),n.watch(()=>l.isOpen,i=>{var D;if(!i||!r.value||!g){z();return}O();const w=(D=u.value)==null?void 0:D.getBoundingClientRect();r.value.style.position="fixed",r.value.style.top="0px",r.value.style.left="0px",r.value.style.transform="none",r.value.style.width=x.value?(w==null?void 0:w.width)+"px":"auto",f.setPosition()}),n.watch(()=>l.overrideOpener,i=>{i&&c.opener&&c.opener.value&&(c.opener.value={domRef:i})}),n.onBeforeUnmount(()=>{g=!1,z()});const B=i=>i.startsWith("bottom")?"mt-4":i.startsWith("top")?"mb-4":i.startsWith("left")?"mr-4":i.startsWith("right")?"ml-4":"mt-4",ie=n.computed(()=>{var w;const i=((w=f.actualPosition)==null?void 0:w.value)??l.position;return B(i)}),A=n.computed(()=>l.overrideContentClass?l.contentClass:["bg-core-white fixed",ie.value,l.contentClass]);return t({setPosition:f.setPosition}),(i,w)=>(n.openBlock(),n.createElementBlock("div",null,[n.renderSlot(i.$slots,"opener-start"),n.createElementVNode("div",{ref_key:"opener",ref:u,class:"inline-flex w-full sm:w-auto"},[n.renderSlot(i.$slots,"opener",{isOpen:e.isOpen,floating:n.unref(f)})],512),n.renderSlot(i.$slots,"opener-end"),e.teleport?n.createCommentVNode("",!0):n.withDirectives((n.openBlock(),n.createElementBlock("div",{key:0,ref_key:"content",ref:r,class:n.normalizeClass(["fz__floating__content w-full sm:w-auto",A.value])},[n.renderSlot(i.$slots,"default",{isOpen:e.isOpen,floating:n.unref(f)})],2)),[[n.vShow,i.$slots.default&&(!i.$slots.opener||i.$slots.opener&&e.isOpen)]]),e.teleport?(n.openBlock(),n.createBlock(n.Teleport,{key:1,to:"body"},[n.withDirectives(n.createElementVNode("div",{ref_key:"content",ref:r,class:n.normalizeClass(["fz__floating__content",A.value])},[n.renderSlot(i.$slots,"default",{isOpen:e.isOpen,floating:n.unref(f)})],2),[[n.vShow,i.$slots.default&&(!i.$slots.opener||i.$slots.opener&&e.isOpen)]])])):n.createCommentVNode("",!0)]))}});p.FzFloating=ae,p.calcRealPos=F,p.clamp=T,p.format=P,p.getHighestAvailableSpacePos=b,p.parse=$,p.roundTo=U,p.truncateDecimals=L,p.useBreakpoints=Y,p.useClickOutside=J,p.useCurrency=ee,p.useFloating=W,p.useKeyDown=Z,p.useKeyUp=_,p.useMediaQuery=R,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@fiscozen/composables",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Riccardo Agnoletto",
   "dependencies": {
-    "@fiscozen/style": "^0.1.8-next.0"
+    "@fiscozen/style": "0.2.0"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
@@ -28,9 +28,9 @@
     "vite": "^5.0.10",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
-    "@fiscozen/prettier-config": "^0.1.0",
+    "@fiscozen/eslint-config": "^0.1.0",
     "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/eslint-config": "^0.1.0"
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

package/src/__tests__/__snapshots__/FzFloating.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`FzFloating > should match snapshot 1`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mb-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -13,7 +13,7 @@ exports[`FzFloating > should match snapshot 1`] = `
 exports[`FzFloating > should match snapshot 2`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mb-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -23,7 +23,7 @@ exports[`FzFloating > should match snapshot 2`] = `
 exports[`FzFloating > should match snapshot 3`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mb-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -33,7 +33,7 @@ exports[`FzFloating > should match snapshot 3`] = `
 exports[`FzFloating > should match snapshot 4`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mr-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -43,7 +43,7 @@ exports[`FzFloating > should match snapshot 4`] = `
 exports[`FzFloating > should match snapshot 5`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mr-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -53,7 +53,7 @@ exports[`FzFloating > should match snapshot 5`] = `
 exports[`FzFloating > should match snapshot 6`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mr-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -63,7 +63,7 @@ exports[`FzFloating > should match snapshot 6`] = `
 exports[`FzFloating > should match snapshot 7`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mt-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -73,7 +73,7 @@ exports[`FzFloating > should match snapshot 7`] = `
 exports[`FzFloating > should match snapshot 8`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mt-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -83,7 +83,7 @@ exports[`FzFloating > should match snapshot 8`] = `
 exports[`FzFloating > should match snapshot 9`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mt-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -93,7 +93,7 @@ exports[`FzFloating > should match snapshot 9`] = `
 exports[`FzFloating > should match snapshot 10`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed ml-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -103,7 +103,7 @@ exports[`FzFloating > should match snapshot 10`] = `
 exports[`FzFloating > should match snapshot 11`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed ml-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -113,7 +113,7 @@ exports[`FzFloating > should match snapshot 11`] = `
 exports[`FzFloating > should match snapshot 12`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed ml-4">
     <div>content</div>
   </div>
   <!--v-if-->

package/src/__tests__/useFloating.spec.ts

@@ -23,6 +23,7 @@ describe('useFloating', () => {
     mockElement = document.createElement('div')
     mockElement.style.width = '200px'
     mockElement.style.height = '100px'
+    mockElement.style.margin = '0px' // Set explicit margins to avoid NaN from parseFloat
     document.body.appendChild(mockElement)
 
     mockOpener = document.createElement('button')
@@ -207,7 +208,8 @@ describe('useFloating', () => {
       const args = toRefs({
         position: ref<FzFloatingPosition>('bottom-end'),
         element: { domRef: ref(mockElement) },
-        opener: { domRef: ref(mockOpener) }
+        opener: { domRef: ref(mockOpener) },
+        container: { domRef: ref(mockContainer) }
       })
 
       const floating = useFloating(args)
@@ -215,6 +217,9 @@ describe('useFloating', () => {
       await nextTick()
 
       // Element should be adjusted to fit within container
+      // Position values should be valid numbers (not NaN)
+      expect(Number.isNaN(floating.float.position.x)).toBe(false)
+      expect(Number.isNaN(floating.float.position.y)).toBe(false)
       expect(floating.float.position.x).toBeLessThanOrEqual(1024)
       expect(floating.float.position.y).toBeLessThanOrEqual(768)
     })
@@ -305,7 +310,7 @@ describe('useFloating', () => {
   })
 
   describe('error handling', () => {
-    it('should throw error when element ref is missing', async () => {
+    it('should handle missing element ref gracefully', async () => {
       const args = toRefs({
         position: ref<FzFloatingPosition>('bottom'),
         opener: { domRef: ref(mockOpener) },
@@ -314,10 +319,13 @@ describe('useFloating', () => {
 
       const floating = useFloating(args)
 
-      await expect(async () => {
-        await floating.setPosition()
-        await nextTick()
-      }).rejects.toThrow('missing reference element for floating behavior')
+      // Should not throw, just return early when element is missing
+      await floating.setPosition()
+      await nextTick()
+      
+      // Position should remain at initial values (0, 0)
+      expect(floating.float.position.x).toBe(0)
+      expect(floating.float.position.y).toBe(0)
     })
   })
 

package/src/composables/useFloating.ts

@@ -472,7 +472,9 @@ export const useFloating = (
   const resolveDOMRefs = (): DOMRefs | null => {
     const element = resolveElement(args.element.value.domRef.value)
     if (!element) {
-      throw new Error('missing reference element for floating behavior')
+      // Return null instead of throwing - the element might be unmounted
+      // or not yet rendered. Callers should handle null gracefully.
+      return null
     }
 
     const container = args.container?.value

package/vitest.config.ts

@@ -9,11 +9,19 @@ export default mergeConfig(
       environment: 'jsdom',
       exclude: [...configDefaults.exclude, 'e2e/*'],
       root: fileURLToPath(new URL('./', import.meta.url)),
+      setupFiles: ['../vitest.setup.ts'],
       coverage: {
         provider: 'v8',
         include: ['**/src/**'],
-        exclude: ['**/index.ts']
+        exclude: ['**/index.ts', '**/__tests__/**', '**/*.stories.ts'],
+        thresholds: {
+          statements: 80,
+          branches: 75,
+          functions: 80,
+          lines: 80
+        }
       }
     }
   })
 )
+