@fiscozen/checkbox 0.2.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/checkbox.js +2376 -0
- package/dist/checkbox.umd.cjs +13 -0
- package/dist/index.d.ts +1 -0
- package/dist/src/FzCheckbox.vue.d.ts +102 -0
- package/dist/src/FzCheckboxGroup.vue.d.ts +72 -0
- package/dist/src/__tests__/FzCheckbox.spec.d.ts +1 -0
- package/dist/src/__tests__/FzCheckboxGroup.spec.d.ts +1 -0
- package/dist/src/common.d.ts +23 -0
- package/dist/src/components/ErrorAlert.vue.d.ts +34 -0
- package/dist/src/components/FzCheckboxGroupOption.vue.d.ts +86 -0
- package/dist/src/index.d.ts +4 -0
- package/dist/src/types.d.ts +192 -0
- package/dist/src/utils.d.ts +24 -0
- package/dist/style.css +1 -0
- package/package.json +9 -13
- package/src/__tests__/FzCheckbox.spec.ts +748 -0
- package/src/__tests__/FzCheckboxGroup.spec.ts +764 -0
- package/src/__tests__/__snapshots__/FzCheckbox.spec.ts.snap +427 -0
- package/src/__tests__/__snapshots__/FzCheckboxGroup.spec.ts.snap +805 -0
- package/src/components/ErrorAlert.vue +1 -1
- package/tsconfig.tsbuildinfo +1 -0
- package/vitest.config.ts +9 -1
- package/coverage/base.css +0 -224
- package/coverage/block-navigation.js +0 -87
- package/coverage/clover.xml +0 -1031
- package/coverage/coverage-final.json +0 -7
- package/coverage/favicon.png +0 -0
- package/coverage/index.html +0 -131
- package/coverage/prettify.css +0 -1
- package/coverage/prettify.js +0 -2
- package/coverage/sort-arrow-sprite.png +0 -0
- package/coverage/sorter.js +0 -196
- package/coverage/src/FzCheckbox.vue.html +0 -1489
- package/coverage/src/FzCheckboxGroup.vue.html +0 -682
- package/coverage/src/common.ts.html +0 -157
- package/coverage/src/components/ErrorAlert.vue.html +0 -268
- package/coverage/src/components/FzCheckboxGroupOption.vue.html +0 -652
- package/coverage/src/components/index.html +0 -131
- package/coverage/src/index.html +0 -161
- package/coverage/src/utils.ts.html +0 -265
- package/src/__test__/FzCheckbox.test.ts +0 -206
- package/src/__test__/FzCheckboxGroup.test.ts +0 -263
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
(function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@fiscozen/icons")):typeof define=="function"&&define.amd?define(["exports","vue","@fiscozen/icons"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w.FzCheckbox={},w.Vue,w.icons))})(this,function(w,e,$){"use strict";function W(t){const o=Date.now()-16e11,n=Math.random().toString(36).slice(2,7);return`${t}-${o}-${n}`}function L(){return W("fz-checkbox")}function j(){return W("fz-checkbox-group")}const F=new DOMRect(0,0,window.innerWidth,window.innerHeight),E=(t,o,n,a,s)=>{let l=s?"bottom":"right",d=s?"bottom-start":"right-start";F.width=window.innerWidth,F.height=window.innerHeight,F.x=0,F.y=0;const f=t?t.getBoundingClientRect():F,x=o.getBoundingClientRect(),b=n.getBoundingClientRect(),u=(b.left-f.left-x.width)/f.width,i=(f.right-b.right-x.width)/f.width,c=(b.top-f.top-x.height)/f.height,p=(f.bottom-b.bottom-x.height)/f.height;let r=[{key:"right",space:i},{key:"top",space:c},{key:"bottom",space:p},{key:"left",space:u}].sort((m,y)=>y.space-m.space);if(s&&(r=r.filter(m=>m.key==="top"||m.key==="bottom")),l=r[0].key,!a){const m=(x.height-b.height)/2;switch(l){case"right":case"left":f.top>b.top-m&&(a="end"),f.bottom<b.top-m&&(a="start");break}}return d=a?`${l}-${a}`:l,d},Y=(t,o,n,a)=>({x:o.x+t.width*n/100,y:o.y+t.height*a/100}),M=t=>typeof t=="string"?document.querySelector(t):t,J=t=>({left:parseFloat(t.marginLeft),right:parseFloat(t.marginRight),top:parseFloat(t.marginTop),bottom:parseFloat(t.marginBottom)}),Z={bottom:(t,o)=>({position:{x:t.left-o.left+t.width/2,y:t.bottom},transform:{x:-50,y:0}}),"bottom-start":(t,o)=>({position:{x:t.left-o.left,y:t.bottom},transform:{x:0,y:0}}),"bottom-end":(t,o)=>({position:{x:t.right+o.right,y:t.bottom},transform:{x:-100,y:0}}),top:(t,o)=>({position:{x:t.left-o.left+t.width/2,y:t.top-o.bottom},transform:{x:-50,y:-100}}),"top-start":(t,o)=>({position:{x:t.left-o.left,y:t.top-o.bottom},transform:{x:0,y:-100}}),"top-end":(t,o)=>({position:{x:t.right+o.right,y:t.top-o.bottom},transform:{x:-100,y:-100}}),left:(t,o)=>({position:{x:t.left-o.right,y:t.top-o.top+t.height/2},transform:{x:-100,y:-50}}),"left-start":(t,o)=>({position:{x:t.left-o.right,y:t.top-o.top},transform:{x:-100,y:0}}),"left-end":(t,o)=>({position:{x:t.left-o.right,y:t.bottom+o.bottom},transform:{x:-100,y:-100}}),right:(t,o)=>({position:{x:t.right+o.left,y:t.top-o.top+t.height/2},transform:{x:0,y:-50}}),"right-start":(t,o)=>({position:{x:t.right+o.left,y:t.top-o.top},transform:{x:0,y:0}}),"right-end":(t,o)=>({position:{x:t.right+o.left,y:t.bottom+o.bottom},transform:{x:0,y:-100}})},_=(t,o,n)=>{const a=Z[t];return a?a(o,n):{position:{x:0,y:0},transform:{x:0,y:0}}},ee={bottom:(t,o)=>({position:{x:t.left+t.width/2,y:t.bottom-o.height},transform:{x:-50,y:0}}),"bottom-start":(t,o)=>({position:{x:t.left,y:t.bottom-o.height},transform:{x:0,y:0}}),"bottom-end":(t,o)=>({position:{x:t.right-o.width,y:t.bottom-o.height},transform:{x:0,y:0}}),top:t=>({position:{x:t.left+t.width/2,y:t.top},transform:{x:-50,y:0}}),"top-start":t=>({position:{x:t.left,y:t.top},transform:{x:0,y:0}}),"top-end":(t,o)=>({position:{x:t.right-o.width,y:t.top},transform:{x:0,y:0}}),left:(t,o)=>({position:{x:t.left,y:t.top+(t.height-o.height)/2},transform:{x:0,y:0}}),"left-start":t=>({position:{x:t.left,y:t.top},transform:{x:0,y:0}}),"left-end":(t,o)=>({position:{x:t.left,y:t.bottom-o.height},transform:{x:0,y:0}}),right:(t,o)=>({position:{x:t.right-o.width,y:t.top+(t.height-o.height)/2},transform:{x:0,y:0}}),"right-start":(t,o)=>({position:{x:t.right-o.width,y:t.top},transform:{x:0,y:0}}),"right-end":(t,o)=>({position:{x:t.right-o.width,y:t.bottom-o.height},transform:{x:0,y:0}})},te=(t,o,n)=>{const a=ee[t];return a?a(o,n):{position:{x:0,y:0},transform:{x:0,y:0}}},oe=(t,o,n,a)=>{const s={...t},l={...a};if(t.x<n.left&&(s.x=n.left,l.x=0),t.x+o.width>n.right){const d=n.right-o.width;d>0&&(s.x=d),l.x=0}if(t.y<n.top&&(s.y=n.top,l.y=0),t.y+o.height>n.bottom){const d=n.bottom-o.height;d>0&&(s.y=d),l.y=0}return{position:s,transform:l}},ae=(t,o,n,a,s)=>{const l=s?null:o;switch(t){case"auto":return E(l,n,a);case"auto-vertical":return E(l,n,a,void 0,!0);case"auto-start":return E(l,n,a,"start");case"auto-vertical-start":return E(l,n,a,"start",!0);case"auto-end":return E(l,n,a,"end");case"auto-vertical-end":return E(l,n,a,"end",!0);default:return"bottom-start"}},ne=t=>t.startsWith("auto"),re=t=>{const o=e.ref("auto"),n=e.ref(),a=e.ref(),s=e.ref(),l=e.ref(),d=e.reactive({position:{x:0,y:0}}),f={root:null,rootMargin:"0px",threshold:1,...t.element.value.intersectionOptions},x=e.ref(new IntersectionObserver(()=>{},f)),b=()=>{var m,y;const c=M(t.element.value.domRef.value);if(!c)return null;const p=(m=t.container)!=null&&m.value?M(t.container.value.domRef.value)??document.body:document.body,r=(y=t.opener)!=null&&y.value?M(t.opener.value.domRef.value):null;return{element:c,container:p,opener:r}},u=c=>{var p;return{element:c.element.getBoundingClientRect(),container:c.container.getBoundingClientRect(),opener:((p=c.opener)==null?void 0:p.getBoundingClientRect())??null}},i=(c=!1)=>e.nextTick(()=>{var C,S,z;n.value=((C=t.position)==null?void 0:C.value)??"auto";const p=b();if(!p)return;Object.assign(p.element.style,{position:"fixed",top:"0px",left:"0px"});const r=u(p);a.value=r.element,s.value=r.opener??void 0,l.value=r.container,x.value.observe(p.element),x.value.observe(p.container),ne(n.value)&&p.opener&&(n.value=ae(n.value,p.container,p.element,p.opener,((S=t.useViewport)==null?void 0:S.value)??!1));const m=J(window.getComputedStyle(p.element)),y=p.opener&&r.opener?_(n.value,r.opener,m):te(n.value,r.container,r.element),g=Y(r.element,y.position,y.transform.x,y.transform.y),k=oe(g,r.element,r.container,y.transform);d.position.x=k.position.x,d.position.y=k.position.y,Object.assign(p.element.style,{top:`${d.position.y}px`,left:`${d.position.x}px`,position:"fixed",display:"flex"}),a.value=p.element.getBoundingClientRect(),(z=t.callback)!=null&&z.value&&!c&&t.callback.value(a,s,l,o,n)});return e.onUnmounted(()=>{x.value.disconnect()}),{float:d,rect:a,setPosition:i,position:o,actualPosition:n,openerRect:s,containerRect:l}};function le(t){const o=window.matchMedia(t),n=e.ref(o.matches);function a(s){n.value=s.matches}return e.onMounted(()=>{o.addEventListener("change",a)}),e.onUnmounted(()=>{o.removeEventListener("change",a)}),e.computed(()=>n.value)}const P={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"}}}},ie={safeColorNames:["blue","purple","orange","pink","yellow","grey","core"]},se={semanticColorNames:["error","warning","success","info"]},ce=ie.safeColorNames,de=se.semanticColorNames,V={};ce.forEach(t=>{const o=P.global[t];o&&Object.keys(o).forEach(n=>{var s;const a=(s=o[n])==null?void 0:s.value;a&&(V[t]||(V[t]={}),V[t][n]=a)})});const U=P.global.semantic;U&&de.forEach(t=>{const o=U[t];o&&typeof o=="object"&&Object.keys(o).forEach(n=>{var s;const a=(s=o[n])==null?void 0:s.value;if(a){const l=`semantic-${t}`;V[l]||(V[l]={}),V[l][n]=a}})});const ue=Object.entries(P.global.breakpoint).reduce((t,[o,n])=>(t[o]=n.value,t),{}),pe=e.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(t,{expose:o,emit:n}){const a=t,s=n,l=e.ref(null),d=e.ref(null),f=e.useSlots(),x=le(`(max-width: ${ue.xs})`);let b=!1,u=!1,i=null,c=null;const p={position:a.position,element:{domRef:l},container:{domRef:e.toRef(a.container||document.body)},opener:{domRef:e.toRef(null)},useViewport:a.useViewport,callback(...h){s("fzfloating:setPosition",...h)}},r=e.toRefs(p);f.opener&&(p.opener={domRef:d});const m=re(r),y=()=>{b||!u||(b=!0,requestAnimationFrame(()=>{u&&a.isOpen&&m.setPosition(),b=!1}))};e.onMounted(()=>{u=!0});const g=()=>{y()},k=()=>{y()},C=()=>{window.addEventListener("scroll",g,!0),window.addEventListener("resize",k),l.value&&!i&&(i=new ResizeObserver(()=>{y()}),i.observe(l.value)),d.value&&!c&&(c=new ResizeObserver(()=>{y()}),c.observe(d.value))},S=()=>{window.removeEventListener("scroll",g,!0),window.removeEventListener("resize",k),i&&(i.disconnect(),i=null),c&&(c.disconnect(),c=null)};e.watch(()=>a.position,()=>y()),e.watch(()=>a.isOpen,h=>{var A;if(!h||!l.value||!u){S();return}C();const N=(A=d.value)==null?void 0:A.getBoundingClientRect();l.value.style.position="fixed",l.value.style.top="0px",l.value.style.left="0px",l.value.style.transform="none",l.value.style.width=x.value?(N==null?void 0:N.width)+"px":"auto",m.setPosition()}),e.watch(()=>a.overrideOpener,h=>{h&&r.opener&&r.opener.value&&(r.opener.value={domRef:h})}),e.onBeforeUnmount(()=>{u=!1,S()});const z=h=>h.startsWith("bottom")?"mt-4":h.startsWith("top")?"mb-4":h.startsWith("left")?"mr-4":h.startsWith("right")?"ml-4":"mt-4",R=e.computed(()=>{var N;const h=((N=m.actualPosition)==null?void 0:N.value)??a.position;return z(h)}),I=e.computed(()=>a.overrideContentClass?a.contentClass:["bg-core-white fixed",R.value,a.contentClass]);return o({setPosition:m.setPosition}),(h,N)=>(e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(h.$slots,"opener-start"),e.createElementVNode("div",{ref_key:"opener",ref:d,class:"inline-flex w-full sm:w-auto"},[e.renderSlot(h.$slots,"opener",{isOpen:t.isOpen,floating:e.unref(m)})],512),e.renderSlot(h.$slots,"opener-end"),t.teleport?e.createCommentVNode("",!0):e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"content",ref:l,class:e.normalizeClass(["fz__floating__content w-full sm:w-auto",I.value])},[e.renderSlot(h.$slots,"default",{isOpen:t.isOpen,floating:e.unref(m)})],2)),[[e.vShow,h.$slots.default&&(!h.$slots.opener||h.$slots.opener&&t.isOpen)]]),t.teleport?(e.openBlock(),e.createBlock(e.Teleport,{key:1,to:"body"},[e.withDirectives(e.createElementVNode("div",{ref_key:"content",ref:l,class:e.normalizeClass(["fz__floating__content",I.value])},[e.renderSlot(h.$slots,"default",{isOpen:t.isOpen,floating:e.unref(m)})],2),[[e.vShow,h.$slots.default&&(!h.$slots.opener||h.$slots.opener&&t.isOpen)]])])):e.createCommentVNode("",!0)]))}}),T={xs:"backoffice",sm:"backoffice",md:"backoffice",lg:"frontoffice"},fe=["disabled","aria-disabled"],H=e.defineComponent({__name:"FzButton",props:{label:{},tooltip:{},variant:{default:"primary"},size:{},environment:{},disabled:{type:Boolean,default:!1},iconName:{},iconVariant:{},iconPosition:{default:"before"},containerClass:{},overrideContainerClass:{type:Boolean}},setup(t){const o=t,n=e.useSlots();e.watch(()=>o.tooltip,i=>{i&&console.warn('[FzButton] The "tooltip" prop is deprecated and will be removed in a future version. Please use the FzTooltip component to wrap your button instead.')},{immediate:!0}),e.watch(()=>o.size,i=>{if(i!==void 0){const c=T[i];o.environment&&o.environment!==c?console.warn(`[FzButton] Both "size" and "environment" props are provided. "environment=${o.environment}" will be used and "size=${i}" will be ignored. Please remove the deprecated "size" prop.`):console.warn(`[FzButton] The "size" prop is deprecated and will be removed in a future version. Please use environment="${c}" instead of size="${i}".`)}},{immediate:!0});const a=e.computed(()=>!o.disabled),s=e.computed(()=>{switch(o.variant){case"secondary":return{"bg-core-white":!0,"text-grey-500":!0,"!border-grey-200":!0,"hover:bg-grey-100":a.value,"hover:!border-grey-200":a.value,"focus:bg-core-white":a.value,"focus:!border-blue-600":a.value,"disabled:bg-grey-50":!0,"disabled:text-grey-200":!0,"disabled:!border-grey-200":!0};case"invisible":return{"bg-transparent":!0,"text-grey-500":!0,"!border-transparent":!0,"hover:bg-grey-100":a.value,"hover:!border-grey-100":a.value,"focus:bg-transparent":a.value,"focus:!border-blue-600":a.value,"disabled:bg-grey-50":!0,"disabled:text-grey-200":!0,"disabled:!border-grey-200":!0};case"danger":return{"bg-semantic-error-200":!0,"text-core-white":!0,"hover:bg-semantic-error-300":a.value,"focus:bg-semantic-error-200":a.value,"focus:!border-semantic-error-300":a.value,"disabled:bg-semantic-error-100":!0};case"success":return{"bg-semantic-success-200":!0,"text-core-white":!0,"hover:bg-semantic-success-300":a.value,"focus:bg-semantic-success-200":a.value,"focus:!border-semantic-success-300":a.value,"disabled:bg-semantic-success-100":!0};case"primary":default:return{"bg-blue-500":!0,"text-core-white":!0,"hover:bg-blue-600":a.value,"focus:bg-blue-500":a.value,"focus:!border-blue-600":a.value,"disabled:bg-blue-200":!0}}}),l=e.computed(()=>o.environment?o.environment:o.size?T[o.size]:"frontoffice"),d=e.computed(()=>{const i=!!(o.label||n.default),c=!!o.iconName,p=o.overrideContainerClass&&c;return i&&c||p}),f=["relative","rounded","flex","flex-shrink","items-center","justify-center","font-normal","!text-[16px]","!leading-[20px]","border-1","border-transparent","gap-8"],x=["flex","items-center","justify-items-center"],b=e.computed(()=>{const i=l.value;return{"h-32":i==="backoffice","h-44":i==="frontoffice","px-12":!0,"min-w-96":!0,...s.value}}),u=e.computed(()=>o.overrideContainerClass?o.containerClass:["truncate","font-normal","!text-[16px]","!leading-[20px]",o.containerClass]);return(i,c)=>(e.openBlock(),e.createElementBlock("button",{type:"button",disabled:t.disabled,"aria-disabled":t.disabled?"true":"false",class:e.normalizeClass([f,b.value])},[e.unref(n).before||d.value&&t.iconPosition==="before"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(x)},[e.renderSlot(i.$slots,"before",{},()=>[t.iconName?(e.openBlock(),e.createBlock(e.unref($.FzIcon),{key:0,name:t.iconName,size:"md",variant:t.iconVariant},null,8,["name","variant"])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0),t.label||e.unref(n).default?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(u.value)},[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],2)):e.createCommentVNode("",!0),e.unref(n).after||d.value&&t.iconPosition==="after"?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(x)},[e.renderSlot(i.$slots,"after",{},()=>[t.iconName?(e.openBlock(),e.createBlock(e.unref($.FzIcon),{key:0,name:t.iconName,size:"md",variant:t.iconVariant},null,8,["name","variant"])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0)],10,fe))}}),me=e.defineComponent({inheritAttrs:!1,__name:"FzIconButton",props:{tooltip:{},variant:{default:"primary"},environment:{},size:{},disabled:{type:Boolean,default:!1},iconName:{},iconVariant:{default:"far"},iconSize:{},hasNotification:{type:Boolean,default:!1},ariaLabel:{}},setup(t){const o=t;e.watch(()=>o.tooltip,l=>{l&&console.warn('[FzIconButton] The "tooltip" prop is deprecated and will be removed in a future version. Please use the FzTooltip component to wrap your button instead.')},{immediate:!0}),e.watch(()=>o.size,l=>{if(l!==void 0){const d=T[l];o.environment&&o.environment!==d?console.warn(`[FzIconButton] Both "size" and "environment" props are provided. "environment=${o.environment}" will be used and "size=${l}" will be ignored. Please remove the deprecated "size" prop.`):console.warn(`[FzIconButton] The "size" prop is deprecated and will be removed in a future version. Please use environment="${d}" instead of size="${l}".`)}},{immediate:!0}),e.watch(()=>o.iconSize,l=>{l!==void 0&&console.warn('[FzIconButton] The "iconSize" prop is deprecated and will be removed in a future version. Icon size has now a fixed dimension. Please remove the "iconSize" prop from your code.')},{immediate:!0});const n=e.computed(()=>o.environment?o.environment:o.size?T[o.size]:"frontoffice"),a=e.computed(()=>{const l=o.ariaLabel||"";return o.hasNotification?`${l}, hai delle notifiche`:l}),s=e.computed(()=>{const l={"rounded-full":!0,"w-8":!0,"h-8":!0,absolute:!0,"-top-[2px]":!0,"-right-[2px]":!0};return o.disabled?o.variant==="primary"?{...l,"bg-orange-200":!0}:{...l,"bg-grey-200":!0}:o.variant==="primary"?{...l,"bg-orange-500":!0}:{...l,"bg-blue-500":!0}});return(l,d)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["fz-icon-button-wrapper","relative",{"fz-icon-button-wrapper--backoffice":n.value==="backoffice","fz-icon-button-wrapper--frontoffice":n.value==="frontoffice"}])},[e.createVNode(H,e.mergeProps(l.$attrs,{disabled:o.disabled,environment:n.value,variant:o.variant,"aria-label":a.value,"icon-name":o.iconName,"icon-variant":o.iconVariant,"icon-position":"before",overrideContainerClass:""}),null,16,["disabled","environment","variant","aria-label","icon-name","icon-variant"]),o.hasNotification?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(s.value),"aria-hidden":"true"},null,2)):e.createCommentVNode("",!0)],2))}}),O=(t,o)=>{const n=t.__vccOpts||t;for(const[a,s]of o)n[a]=s;return n},G=O(me,[["__scopeId","data-v-b4be112d"]]),K=O(e.defineComponent({__name:"FzContainer",props:{main:{type:Boolean,default:!1},gap:{default:"base"},tag:{default:"div"},alignItems:{default:void 0},horizontal:{type:Boolean,default:!1},layout:{}},setup(t){const o=t,n=e.computed(()=>o.alignItems??(o.horizontal?"center":"stretch"));if(!o.horizontal&&"layout"in o){const s=o.layout;s&&s!=="default"&&console.error(`[FzContainer] The "layout" prop only works when horizontal is true. Current horizontal: ${o.horizontal}, layout: "${s}".`)}const a=e.computed(()=>{const s=o.main?"main-content":"section-content",d=[o.horizontal?"fz-container--horizontal":"fz-container--vertical",`gap-${s}-${o.gap}`,`align-items-${n.value}`];if(o.horizontal){const f=("layout"in o?o.layout:void 0)||"default";d.push(`layout-${f}`)}return d});return(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:e.normalizeClass(["fz-container",a.value])},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default",{},void 0,!0)]),_:3},8,["class"]))}}),[["__scopeId","data-v-8c40daeb"]]),be=["aria-disabled"],ye=["href","target","rel"],X=e.defineComponent({__name:"FzLink",props:{type:{default:"default"},linkStyle:{default:"default"},size:{default:"md"},disabled:{type:Boolean,default:!1},to:{},external:{type:Boolean,default:!1},replace:{type:Boolean,default:!1},target:{}},setup(t){const o=t;e.watch(()=>o.size==="xs",r=>{r&&console.warn('[FzLink] The size prop value "xs" is deprecated and will be removed in a future version. Please use "sm" instead. The component will automatically map "xs" to "sm" for now.')},{immediate:!0}),e.watch(()=>o.size==="lg",r=>{r&&console.warn('[FzLink] The size prop value "lg" is deprecated and will be removed in a future version. Please use "md" instead. The component will automatically map "lg" to "md" for now.')},{immediate:!0});const n=e.computed(()=>o.size==="xs"?"sm":o.size==="lg"?"md":o.size),a=e.computed(()=>["border-1 border-transparent inline-block",{"text-sm leading-xs":n.value==="sm","text-base leading-base":n.value==="md",underline:o.linkStyle==="underline"}]),s=r=>r.type==="default"&&r.linkStyle==="underline",l=r=>r.type==="default"&&r.linkStyle!=="underline",d=r=>r.type==="danger"&&r.linkStyle==="underline",f=r=>r.type==="danger"&&r.linkStyle!=="underline",x=r=>r.type==="default"&&r.disabled,b=r=>r.type==="danger"&&r.disabled,u=e.computed(()=>{const r=[...a.value,"focus:outline-none","focus:border-solid","focus:no-underline"];switch(!0){case s(o):r.push("text-blue-500","hover:text-blue-600","focus:text-blue-600","focus:border-blue-600");break;case l(o):r.push("text-blue-500","hover:text-blue-600","hover:underline","focus:text-blue-600","focus:border-blue-600");break;case d(o):r.push("text-semantic-error-200","hover:text-semantic-error-300","focus:text-semantic-error-300","focus:border-semantic-error-300");break;case f(o):r.push("text-semantic-error-200","hover:text-semantic-error-300","hover:underline","focus:text-semantic-error-300","focus:border-semantic-error-300");break}return r}),i=e.computed(()=>{const r=[...a.value,"cursor-not-allowed"];switch(!0){case x(o):r.push("text-blue-200");break;case b(o):r.push("text-semantic-error-100");break}return r}),c=e.computed(()=>o.external?o.to:""),p=e.computed(()=>{if(o.external&&o.target==="_blank")return"noopener noreferrer"});return(r,m)=>{const y=e.resolveComponent("router-link");return t.disabled?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(i.value),"aria-disabled":t.disabled?"true":"false",role:"link","aria-label":"Link disabled"},[e.renderSlot(r.$slots,"default")],10,be)):t.external?(e.openBlock(),e.createElementBlock("a",{key:1,href:c.value,class:e.normalizeClass(u.value),target:t.target,rel:p.value},[e.renderSlot(r.$slots,"default")],10,ye)):(e.openBlock(),e.createBlock(y,{key:2,to:t.to,replace:t.replace,class:e.normalizeClass(u.value),target:t.target},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},8,["to","replace","class","target"]))}}}),he=["aria-label","aria-describedby","tabindex"],xe=["aria-hidden"],ge=100,ve="text-core-white max-w-[200px] p-8 text-sm leading-[16px] flex flex-row items-start justify-center",ke=O(e.defineComponent({__name:"FzTooltip",props:{position:{default:"auto"},status:{default:"neutral"},text:{},withIcon:{type:Boolean,default:!1},ariaLabel:{},interactive:{type:[Boolean,String],default:"auto"},_forceOpenForDesignReview:{type:Boolean,default:!1}},setup(t){const o=t,n=e.useSlots(),a=[H,G,X];function s(v){const B=v.type;return a.includes(B)}function l(v){if(s(v))return!0;if(typeof v.type=="symbol"){const B=v.children;if(Array.isArray(B))return B.some(D=>typeof D=="object"&&D!==null&&"type"in D?l(D):!1)}return!1}const d=e.computed(()=>{if(!n.default)return!1;const v=n.default();return v.length===0?!1:v.some(B=>l(B))}),f={neutral:{icon:"",bgClass:"!bg-core-black"},informative:{icon:"circle-info",bgClass:"bg-semantic-info-200"},alert:{icon:"triangle-exclamation",bgClass:"bg-semantic-warning-200"},error:{icon:"circle-exclamation",bgClass:"bg-semantic-error-200"},positive:{icon:"circle-check",bgClass:"bg-semantic-success-200"}},x=e.computed(()=>{var v;return((v=f[o.status])==null?void 0:v.icon)||""}),b=e.computed(()=>{var B;const v=(B=f[o.status])==null?void 0:B.bgClass;return v?{[v]:!0}:{}}),u=`tooltip-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,i=e.ref(!1),c=e.ref(!1),p=e.ref(!1),r=e.ref(null),m=e.computed(()=>o.withIcon&&o.status!=="neutral"),y=e.computed(()=>i.value?u:void 0),g=e.computed(()=>typeof o.interactive=="boolean"?o.interactive?void 0:0:d.value?void 0:0);function k(){(o.text||n.text)&&(i.value=!0)}function C(){o._forceOpenForDesignReview||(i.value=!1)}function S(){r.value&&(clearTimeout(r.value),r.value=null),k()}function z(){r.value&&(clearTimeout(r.value),r.value=null),r.value=setTimeout(()=>{!c.value&&!p.value&&C()},ge)}function R(){c.value=!0,r.value&&(clearTimeout(r.value),r.value=null)}function I(){c.value=!1,r.value&&(clearTimeout(r.value),r.value=null),p.value||C()}function h(){p.value=!0,k()}function N(){p.value=!1,r.value&&(clearTimeout(r.value),r.value=null),c.value||C()}function A(v){v.key==="Escape"&&C()}return e.onMounted(()=>{o._forceOpenForDesignReview&&k()}),e.watch(()=>o._forceOpenForDesignReview,v=>{v?k():C()}),e.onUnmounted(()=>{r.value&&clearTimeout(r.value)}),(v,B)=>(e.openBlock(),e.createBlock(e.unref(pe),{teleport:!0,"is-open":i.value,position:t.position,class:"fz__tooltip flex h-max",contentClass:["rounded",b.value,"z-80"]},{opener:e.withCtx(()=>[e.createElementVNode("span",{"aria-label":o.ariaLabel,"aria-describedby":y.value,tabindex:g.value,onMouseover:S,onMouseleave:z,onFocusin:h,onFocusout:N,onKeydown:A},[e.renderSlot(v.$slots,"default",{},void 0,!0)],40,he)]),default:e.withCtx(()=>[e.createElementVNode("div",{id:u,class:e.normalizeClass(ve),role:"tooltip","aria-hidden":!i.value,onMouseenter:R,onMouseleave:I},[m.value?(e.openBlock(),e.createBlock(e.unref($.FzIcon),{key:0,size:"md",name:x.value,class:e.normalizeClass(["mr-4","!w-[16px]","!h-[16px]","grow-0","shrink-0",{"text-core-black":o.status==="alert"}]),"aria-hidden":!0},null,8,["name","class"])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(["basis-0 grow shrink-0 break-normal fz__tooltip__text",{"text-core-black":o.status==="alert"}])},[e.renderSlot(v.$slots,"text",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)],!0)],2)],40,xe)]),_:3},8,["is-open","position","contentClass"]))}}),[["__scopeId","data-v-94597a6c"]]),Ce={class:"flex flex-col flex-1"},we={key:0,class:"leading-[20px]"},ze=O(e.defineComponent({__name:"FzAlert",props:{tone:{},alertStyle:{default:"default"},showButtonAction:{type:Boolean,default:!0},buttonActionLabel:{},buttonActionTooltip:{},isDismissible:{type:Boolean},showLinkAction:{type:Boolean},linkActionLabel:{},linkActionLocation:{},linkActionTarget:{},linkActionExternal:{type:Boolean},size:{},environment:{default:"frontoffice"},title:{},defaultOpen:{type:Boolean,default:!0},variant:{}},emits:["fzAlert:click","fzAlert:dismiss"],setup(t,{emit:o}){const n=t,a=o,s=e.ref(n.defaultOpen),l={info:"bg-semantic-info-50 border-semantic-info",error:"bg-semantic-error-50 border-semantic-error",danger:"bg-semantic-error-50 border-semantic-error",warning:"bg-semantic-warning-50 border-semantic-warning",success:"bg-semantic-success-50 border-semantic-success"},d={sm:"backoffice",md:"frontoffice",lg:"frontoffice"},f=e.computed(()=>["flex select-none gap-12 rounded justify-between",l[n.tone],y.value==="backoffice"?"p-6":"",...g.value==="accordion"?["cursor-pointer"]:[]]),x=e.computed(()=>({info:"circle-info",error:"circle-xmark",danger:"triangle-exclamation",warning:"triangle-exclamation",success:"circle-check"})[n.tone]),b=e.computed(()=>[{info:"text-semantic-info",error:"text-semantic-error",danger:"text-semantic-error",warning:"text-semantic-warning",success:"text-semantic-success"}[n.tone]]),u=e.computed(()=>["font-normal","!leading-[20px]",{"mt-8":n.title,"mb-16":n.showButtonAction||n.showLinkAction}]),i=e.computed(()=>g.value==="background"?!0:s.value),c=e.computed(()=>s.value?"angle-up":"angle-down"),p=e.computed(()=>{if(g.value==="accordion")return c.value;if(n.isDismissible)return"xmark"}),r=e.computed(()=>g.value!=="accordion"?!0:s.value);function m(z){z.stopPropagation(),a("fzAlert:click")}const y=e.computed(()=>n.size?d[n.size]:n.environment),g=e.computed(()=>n.variant?n.variant:["default","simple"].includes(n.alertStyle)?"background":"accordion"),k=e.computed(()=>g.value==="accordion"||n.isDismissible),C=()=>{g.value==="accordion"&&(s.value=!s.value),n.isDismissible&&a("fzAlert:dismiss")},S=()=>{g.value==="accordion"&&(s.value=!s.value)};return(z,R)=>{const I=e.resolveDirective("bold");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(f.value),onClick:S},[e.createVNode(e.unref(K),{horizontal:"",gap:"sm",class:e.normalizeClass(["flex-1",y.value==="backoffice"?"p-6":"p-12"]),alignItems:"start"},{default:e.withCtx(()=>[e.createVNode(e.unref($.FzIcon),{name:x.value,size:"md",class:e.normalizeClass(b.value)},null,8,["name","class"]),e.createElementVNode("div",Ce,[t.title?e.withDirectives((e.openBlock(),e.createElementBlock("p",we,[e.createTextVNode(e.toDisplayString(t.title),1)])),[[I]]):e.createCommentVNode("",!0),r.value?(e.openBlock(),e.createElementBlock("p",{key:1,class:e.normalizeClass(u.value)},[e.renderSlot(z.$slots,"default",{},void 0,!0)],2)):e.createCommentVNode("",!0),i.value?e.renderSlot(z.$slots,"action",{key:2},()=>[e.createVNode(e.unref(K),{horizontal:"",gap:"sm"},{default:e.withCtx(()=>[t.showButtonAction?(e.openBlock(),e.createBlock(e.unref(H),{key:0,onClick:m,tooltip:t.buttonActionTooltip,environment:y.value,variant:"secondary"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.buttonActionLabel),1)]),_:1},8,["tooltip","environment"])):e.createCommentVNode("",!0),t.showLinkAction?(e.openBlock(),e.createBlock(e.unref(X),{key:1,to:t.linkActionLocation,onClick:m,size:"md",target:t.linkActionTarget,external:t.linkActionExternal},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.linkActionLabel),1)]),_:1},8,["to","target","external"])):e.createCommentVNode("",!0)]),_:1})],!0):e.createCommentVNode("",!0)])]),_:3},8,["class"]),k.value?(e.openBlock(),e.createBlock(e.unref(G),{key:0,iconName:p.value,environment:y.value,variant:"invisible",onClick:e.withModifiers(C,["stop"])},null,8,["iconName","environment"])):e.createCommentVNode("",!0)],2)}}}),[["__scopeId","data-v-f72b7e4a"]]),Q=e.defineComponent({__name:"ErrorAlert",props:{id:{}},setup(t){return(o,n)=>(e.openBlock(),e.createBlock(e.unref(ze),{id:t.id,tone:"error",alertStyle:"simple",role:"alert","aria-live":"assertive","aria-atomic":"true",size:"md"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3},8,["id"]))}}),Be={class:"flex justify-center flex-col w-fit gap-4"},Se=["data-emphasis","data-error","data-disabled"],Ne=["id","disabled","required","value","aria-checked","aria-label","aria-required","aria-invalid","aria-describedby","aria-labelledby","aria-owns"],$e=["id","for"],Ee="w-0 h-0 peer fz-hidden-input",Ve=`
|
|
2
|
+
flex gap-6 items-start hover:cursor-pointer text-core-black
|
|
3
|
+
peer-focus:[&_div]:after:border-1
|
|
4
|
+
peer-focus:[&_div]:after:border-solid
|
|
5
|
+
peer-focus:[&_div]:after:rounded-[2px]
|
|
6
|
+
peer-focus:[&_div]:after:border-blue-200
|
|
7
|
+
peer-focus:[&_div]:after:content-['']
|
|
8
|
+
peer-focus:[&_div]:after:top-0
|
|
9
|
+
peer-focus:[&_div]:after:left-0
|
|
10
|
+
peer-focus:[&_div]:after:right-0
|
|
11
|
+
peer-focus:[&_div]:after:bottom-0
|
|
12
|
+
peer-focus:[&_div]:after:absolute
|
|
13
|
+
`,Ie="relative",q=O(e.defineComponent({__name:"FzCheckbox",props:e.mergeModels({label:{},value:{type:[String,Number,Boolean]},size:{},indeterminate:{type:Boolean,default:!1},emphasis:{type:Boolean},disabled:{type:Boolean},error:{type:Boolean},required:{type:Boolean},standalone:{type:Boolean},tooltip:{},ariaOwns:{},checkboxId:{}},{modelValue:{type:[null,Boolean,Array],required:!0},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(t,{emit:o}){const n=t;e.watch(()=>n.size,g=>{g!==void 0&&console.warn('[FzCheckbox] The "size" prop is deprecated and will be removed in a future version. Checkboxes now have a fixed size.')},{immediate:!0});const a=Object.freeze({INDETERMINATE:"square-minus",CHECKED:"square-check",UNCHECKED:"square"}),s=Object.freeze({SOLID:"fas",REGULAR:"far"}),l=e.computed(()=>n.value??n.label),d=n.checkboxId||L(),f=e.useModel(t,"modelValue"),x=o,b=e.shallowRef(null),u=e.computed(()=>f.value==null?!1:typeof f.value=="boolean"?f.value:f.value.includes(l.value)),i=e.computed(()=>n.disabled?"text-grey-300 [&_div]:text-grey-300":n.error?"text-semantic-error-200 [&_div]:text-semantic-error-200 peer-checked:[&_div]:text-semantic-error-200 peer-indeterminate:[&_div]:text-semantic-error-200":n.emphasis?"text-core-black [&_div]:text-blue-500 peer-checked:[&_div]:text-blue-500 peer-indeterminate:[&_div]:text-blue-500":"text-core-black peer-checked:[&_div]:text-grey-500 peer-indeterminate:[&_div]:text-grey-500"),c=e.computed(()=>n.disabled?"text-grey-300":n.error?"text-semantic-error-200":n.emphasis?"text-blue-500":"text-grey-400"),p=e.computed(()=>["text-base",i.value]),r=e.computed(()=>[c.value]),m=e.computed(()=>n.indeterminate?a.INDETERMINATE:u.value?a.CHECKED:a.UNCHECKED),y=e.computed(()=>n.indeterminate||u.value?s.SOLID:s.REGULAR);return e.onMounted(()=>{var g,k;f.value!=null&&(typeof f.value=="boolean"?f.value&&((g=b.value)==null||g.dispatchEvent(new Event("change"))):f.value.includes(l.value)&&((k=b.value)==null||k.dispatchEvent(new Event("change"))))}),(g,k)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("div",{class:"flex items-start group","data-emphasis":t.emphasis||void 0,"data-error":t.error||void 0,"data-disabled":t.disabled||void 0},[e.withDirectives(e.createElementVNode("input",{type:"checkbox",id:e.unref(d),disabled:t.disabled,class:e.normalizeClass(Ee),required:t.required,value:t.value,onChange:k[0]||(k[0]=C=>x("change",C)),"onUpdate:modelValue":k[1]||(k[1]=C=>f.value=C),"aria-checked":t.indeterminate?"mixed":u.value,"aria-label":t.standalone?t.label:void 0,"aria-required":t.required?"true":"false","aria-invalid":t.error?"true":"false","aria-describedby":t.error&&g.$slots.error?`${e.unref(d)}-error`:void 0,"aria-labelledby":t.standalone?void 0:`${e.unref(d)}-label`,"aria-owns":n.ariaOwns,ref_key:"refCheckbox",ref:b},null,40,Ne),[[e.vModelCheckbox,f.value]]),e.createElementVNode("label",{id:`${e.unref(d)}-label`,for:e.unref(d),class:e.normalizeClass([Ve,p.value])},[e.createVNode(e.unref($.FzIcon),{name:m.value,size:"md",class:e.normalizeClass([Ie,r.value]),variant:y.value,"aria-hidden":"true"},null,8,["name","class","variant"]),t.standalone?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.label),1)],64))],10,$e),t.tooltip?(e.openBlock(),e.createBlock(e.unref(ke),e.mergeProps({key:0},t.tooltip,{class:"ml-6"}),{default:e.withCtx(()=>[e.createVNode(e.unref($.FzIcon),{name:"info-circle",size:"md",class:"text-semantic-info",role:"img","aria-label":"Informazioni aggiuntive"})]),_:1},16)):e.createCommentVNode("",!0)],8,Se),t.error&&g.$slots.error?(e.openBlock(),e.createBlock(Q,{key:0,id:`${e.unref(d)}-error`},{default:e.withCtx(()=>[e.renderSlot(g.$slots,"error",{},void 0,!0)]),_:3},8,["id"])):e.createCommentVNode("",!0),e.renderSlot(g.$slots,"children",{},void 0,!0)]))}}),[["__scopeId","data-v-2b198cc9"]]),Fe="flex flex-col justify-center gap-8 pl-24",Oe=e.defineComponent({__name:"FzCheckboxGroupOption",props:e.mergeModels({label:{},value:{type:[String,Number,Boolean]},indeterminate:{type:Boolean},emphasis:{type:Boolean},disabled:{type:Boolean},error:{type:Boolean},required:{type:Boolean},standalone:{type:Boolean},tooltip:{},ariaOwns:{},checkboxId:{},children:{}},{modelValue:{required:!0,default:[]},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=t,n=e.computed(()=>o.value??o.label),a=e.useModel(t,"modelValue"),s=L(),l=e.computed(()=>{var u;return(u=o.children)==null?void 0:u.map((i,c)=>`${s}-child-${c}`).join(" ")}),d=e.computed(()=>[]),f=e.computed(()=>{if(!o.children)return!1;const u=o.children.filter(i=>a.value.includes(i.value??i.label)).length;return u>0&&u<o.children.length});function x(){if(!o.children)return;o.children.filter(i=>a.value.includes(i.value??i.label)).length===o.children.length?a.value.includes(n.value)||(a.value=a.value.concat(n.value)):a.value.includes(n.value)&&(a.value=a.value.filter(i=>i!==n.value))}function b(){var u;o.children&&(a.value.includes(n.value)?a.value=a.value.concat((u=o.children)==null?void 0:u.map(i=>i.value??i.label).filter(i=>!a.value.includes(i))):a.value=a.value.filter(i=>{var c;return!((c=o.children)!=null&&c.map(p=>p.value??p.label).includes(i))}))}return(u,i)=>{var c,p;return e.openBlock(),e.createBlock(q,{modelValue:a.value,"onUpdate:modelValue":i[1]||(i[1]=r=>a.value=r),value:o.value,label:o.label,disabled:t.disabled,emphasis:t.emphasis,error:t.error,indeterminate:f.value,"aria-owns":(c=t.children)!=null&&c.length?l.value:void 0,onChange:b},e.createSlots({_:2},[(p=t.children)!=null&&p.length?{name:"children",fn:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass([Fe,d.value])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.children,(r,m)=>(e.openBlock(),e.createBlock(q,e.mergeProps({key:r.value?r.value.toString():r.label,modelValue:a.value,"onUpdate:modelValue":i[0]||(i[0]=y=>a.value=y),disabled:t.disabled},{ref_for:!0},r,{emphasis:t.emphasis,error:t.error,"checkbox-id":`${e.unref(s)}-child-${m}`,onChange:x}),null,16,["modelValue","disabled","emphasis","error","checkbox-id"]))),128))],2)]),key:"0"}:void 0]),1032,["modelValue","value","label","disabled","emphasis","error","indeterminate","aria-owns"])}}}),Te=["id"],Re={key:0},Ae=["id"],De=["id","aria-labelledby","aria-describedby","aria-required","aria-invalid"],Le="flex flex-col",Me="flex flex-col gap-10",Pe="flex items-start",He=e.defineComponent({__name:"FzCheckboxGroup",props:e.mergeModels({label:{},size:{},options:{},emphasis:{type:Boolean},disabled:{type:Boolean},error:{type:Boolean},required:{type:Boolean},horizontal:{type:Boolean}},{modelValue:{required:!0,default:[]},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const o=t,n=e.useSlots();e.watch(()=>o.size,u=>{u!==void 0&&console.warn('[FzCheckboxGroup] The "size" prop is deprecated and will be removed in a future version. Checkboxes now have a fixed size.')},{immediate:!0});const a=j(),s=e.computed(()=>["text-sm",o.disabled?"text-grey-400":"text-grey-500"]),l=e.useModel(t,"modelValue"),d=e.computed(()=>["text-base","gap-6",o.disabled?"text-grey-400":"text-core-black"]),f=e.computed(()=>["text-base"]),x=e.computed(()=>["text-base",o.horizontal?"gap-16":"gap-8",o.horizontal?"flex-row":"flex-col"]),b=e.computed(()=>{const u=[];return n.help&&u.push(`${a}-help`),o.error&&n.error&&u.push(`${a}-error`),u.length>0?u.join(" "):void 0});return(u,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([Me,f.value])},[e.createElementVNode("label",{id:e.unref(a)+"-label",class:e.normalizeClass([Le,d.value])},[e.createElementVNode("span",null,[e.createTextVNode(e.toDisplayString(t.label),1),t.required?(e.openBlock(),e.createElementBlock("span",Re," *")):e.createCommentVNode("",!0)]),u.$slots.help?(e.openBlock(),e.createElementBlock("p",{key:0,id:e.unref(a)+"-help",class:e.normalizeClass(s.value)},[e.renderSlot(u.$slots,"help")],10,Ae)):e.createCommentVNode("",!0)],10,Te),e.createElementVNode("div",{class:e.normalizeClass([Pe,x.value]),id:e.unref(a),role:"group","aria-labelledby":e.unref(a)+"-label","aria-describedby":b.value,"aria-required":t.required?"true":"false","aria-invalid":t.error?"true":"false"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,c=>(e.openBlock(),e.createBlock(Oe,e.mergeProps({key:c.value?c.value.toString():c.label,modelValue:l.value,"onUpdate:modelValue":i[0]||(i[0]=p=>l.value=p),disabled:t.disabled},{ref_for:!0},c,{emphasis:t.emphasis,error:t.error}),null,16,["modelValue","disabled","emphasis","error"]))),128))],10,De),t.error&&u.$slots.error?(e.openBlock(),e.createBlock(Q,{key:0,id:e.unref(a)+"-error"},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"error")]),_:3},8,["id"])):e.createCommentVNode("",!0)],2))}});w.FzCheckbox=q,w.FzCheckboxGroup=He,w.generateCheckboxId=L,w.generateGroupId=j,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/index'
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
2
|
+
modelValue: {
|
|
3
|
+
required: true;
|
|
4
|
+
type: import('vue').PropType<boolean | (string | number | boolean)[] | null | undefined>;
|
|
5
|
+
};
|
|
6
|
+
label: {
|
|
7
|
+
type: import('vue').PropType<string>;
|
|
8
|
+
required: true;
|
|
9
|
+
};
|
|
10
|
+
value: {
|
|
11
|
+
type: import('vue').PropType<string | number | boolean>;
|
|
12
|
+
};
|
|
13
|
+
error: {
|
|
14
|
+
type: import('vue').PropType<boolean>;
|
|
15
|
+
};
|
|
16
|
+
size: {
|
|
17
|
+
type: import('vue').PropType<"sm" | "md">;
|
|
18
|
+
};
|
|
19
|
+
disabled: {
|
|
20
|
+
type: import('vue').PropType<boolean>;
|
|
21
|
+
};
|
|
22
|
+
required: {
|
|
23
|
+
type: import('vue').PropType<boolean>;
|
|
24
|
+
};
|
|
25
|
+
tooltip: {
|
|
26
|
+
type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipProps>;
|
|
27
|
+
};
|
|
28
|
+
indeterminate: {
|
|
29
|
+
type: import('vue').PropType<boolean>;
|
|
30
|
+
default: boolean;
|
|
31
|
+
};
|
|
32
|
+
emphasis: {
|
|
33
|
+
type: import('vue').PropType<boolean>;
|
|
34
|
+
};
|
|
35
|
+
standalone: {
|
|
36
|
+
type: import('vue').PropType<boolean>;
|
|
37
|
+
};
|
|
38
|
+
ariaOwns: {
|
|
39
|
+
type: import('vue').PropType<string>;
|
|
40
|
+
};
|
|
41
|
+
checkboxId: {
|
|
42
|
+
type: import('vue').PropType<string>;
|
|
43
|
+
};
|
|
44
|
+
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
45
|
+
change: (event: Event) => void;
|
|
46
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
47
|
+
modelValue: {
|
|
48
|
+
required: true;
|
|
49
|
+
type: import('vue').PropType<boolean | (string | number | boolean)[] | null | undefined>;
|
|
50
|
+
};
|
|
51
|
+
label: {
|
|
52
|
+
type: import('vue').PropType<string>;
|
|
53
|
+
required: true;
|
|
54
|
+
};
|
|
55
|
+
value: {
|
|
56
|
+
type: import('vue').PropType<string | number | boolean>;
|
|
57
|
+
};
|
|
58
|
+
error: {
|
|
59
|
+
type: import('vue').PropType<boolean>;
|
|
60
|
+
};
|
|
61
|
+
size: {
|
|
62
|
+
type: import('vue').PropType<"sm" | "md">;
|
|
63
|
+
};
|
|
64
|
+
disabled: {
|
|
65
|
+
type: import('vue').PropType<boolean>;
|
|
66
|
+
};
|
|
67
|
+
required: {
|
|
68
|
+
type: import('vue').PropType<boolean>;
|
|
69
|
+
};
|
|
70
|
+
tooltip: {
|
|
71
|
+
type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipProps>;
|
|
72
|
+
};
|
|
73
|
+
indeterminate: {
|
|
74
|
+
type: import('vue').PropType<boolean>;
|
|
75
|
+
default: boolean;
|
|
76
|
+
};
|
|
77
|
+
emphasis: {
|
|
78
|
+
type: import('vue').PropType<boolean>;
|
|
79
|
+
};
|
|
80
|
+
standalone: {
|
|
81
|
+
type: import('vue').PropType<boolean>;
|
|
82
|
+
};
|
|
83
|
+
ariaOwns: {
|
|
84
|
+
type: import('vue').PropType<string>;
|
|
85
|
+
};
|
|
86
|
+
checkboxId: {
|
|
87
|
+
type: import('vue').PropType<string>;
|
|
88
|
+
};
|
|
89
|
+
}>> & Readonly<{
|
|
90
|
+
onChange?: ((event: Event) => any) | undefined;
|
|
91
|
+
}>, {
|
|
92
|
+
indeterminate: boolean;
|
|
93
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
|
|
94
|
+
error?(_: {}): any;
|
|
95
|
+
children?(_: {}): any;
|
|
96
|
+
}>;
|
|
97
|
+
export default _default;
|
|
98
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
99
|
+
new (): {
|
|
100
|
+
$slots: S;
|
|
101
|
+
};
|
|
102
|
+
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
2
|
+
modelValue: {
|
|
3
|
+
required: true;
|
|
4
|
+
type: import('vue').PropType<(string | number | boolean)[]>;
|
|
5
|
+
};
|
|
6
|
+
label: {
|
|
7
|
+
type: import('vue').PropType<string>;
|
|
8
|
+
required: true;
|
|
9
|
+
};
|
|
10
|
+
size: {
|
|
11
|
+
type: import('vue').PropType<"sm" | "md">;
|
|
12
|
+
};
|
|
13
|
+
options: {
|
|
14
|
+
type: import('vue').PropType<import('./types').ParentCheckbox[]>;
|
|
15
|
+
required: true;
|
|
16
|
+
};
|
|
17
|
+
emphasis: {
|
|
18
|
+
type: import('vue').PropType<boolean>;
|
|
19
|
+
};
|
|
20
|
+
disabled: {
|
|
21
|
+
type: import('vue').PropType<boolean>;
|
|
22
|
+
};
|
|
23
|
+
error: {
|
|
24
|
+
type: import('vue').PropType<boolean>;
|
|
25
|
+
};
|
|
26
|
+
required: {
|
|
27
|
+
type: import('vue').PropType<boolean>;
|
|
28
|
+
};
|
|
29
|
+
horizontal: {
|
|
30
|
+
type: import('vue').PropType<boolean>;
|
|
31
|
+
};
|
|
32
|
+
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
33
|
+
modelValue: {
|
|
34
|
+
required: true;
|
|
35
|
+
type: import('vue').PropType<(string | number | boolean)[]>;
|
|
36
|
+
};
|
|
37
|
+
label: {
|
|
38
|
+
type: import('vue').PropType<string>;
|
|
39
|
+
required: true;
|
|
40
|
+
};
|
|
41
|
+
size: {
|
|
42
|
+
type: import('vue').PropType<"sm" | "md">;
|
|
43
|
+
};
|
|
44
|
+
options: {
|
|
45
|
+
type: import('vue').PropType<import('./types').ParentCheckbox[]>;
|
|
46
|
+
required: true;
|
|
47
|
+
};
|
|
48
|
+
emphasis: {
|
|
49
|
+
type: import('vue').PropType<boolean>;
|
|
50
|
+
};
|
|
51
|
+
disabled: {
|
|
52
|
+
type: import('vue').PropType<boolean>;
|
|
53
|
+
};
|
|
54
|
+
error: {
|
|
55
|
+
type: import('vue').PropType<boolean>;
|
|
56
|
+
};
|
|
57
|
+
required: {
|
|
58
|
+
type: import('vue').PropType<boolean>;
|
|
59
|
+
};
|
|
60
|
+
horizontal: {
|
|
61
|
+
type: import('vue').PropType<boolean>;
|
|
62
|
+
};
|
|
63
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
|
|
64
|
+
help?(_: {}): any;
|
|
65
|
+
error?(_: {}): any;
|
|
66
|
+
}>;
|
|
67
|
+
export default _default;
|
|
68
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
69
|
+
new (): {
|
|
70
|
+
$slots: S;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared utilities for the Fiscozen Checkbox component library.
|
|
3
|
+
*
|
|
4
|
+
* @module @fiscozen/checkbox/common
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Maps checkbox size variants to corresponding Tailwind CSS text size classes.
|
|
8
|
+
*
|
|
9
|
+
* Used to maintain consistent typography across checkbox labels and helper text.
|
|
10
|
+
* Applied to both FzCheckbox and FzCheckboxGroup components.
|
|
11
|
+
*
|
|
12
|
+
* @constant
|
|
13
|
+
* @type {Record<"sm" | "md", string>}
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* const labelClass = mapSizeToClasses[props.size]; // "text-sm" or "text-base"
|
|
17
|
+
*/
|
|
18
|
+
export declare const mapSizeToClasses: {
|
|
19
|
+
/** Small size: 14px font size (0.875rem) */
|
|
20
|
+
sm: string;
|
|
21
|
+
/** Medium size: 16px font size (1rem) - default */
|
|
22
|
+
md: string;
|
|
23
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
+
/**
|
|
3
|
+
* Unique ID for the error alert element.
|
|
4
|
+
* Used for aria-describedby relationships.
|
|
5
|
+
*
|
|
6
|
+
* @example "checkbox-123-error"
|
|
7
|
+
*/
|
|
8
|
+
id: string;
|
|
9
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
10
|
+
/**
|
|
11
|
+
* Unique ID for the error alert element.
|
|
12
|
+
* Used for aria-describedby relationships.
|
|
13
|
+
*
|
|
14
|
+
* @example "checkbox-123-error"
|
|
15
|
+
*/
|
|
16
|
+
id: string;
|
|
17
|
+
}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
|
|
18
|
+
default?(_: {}): any;
|
|
19
|
+
}>;
|
|
20
|
+
export default _default;
|
|
21
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
22
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
23
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
24
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
25
|
+
} : {
|
|
26
|
+
type: import('vue').PropType<T[K]>;
|
|
27
|
+
required: true;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
31
|
+
new (): {
|
|
32
|
+
$slots: S;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
2
|
+
modelValue: {
|
|
3
|
+
required: true;
|
|
4
|
+
type: import('vue').PropType<(string | number | boolean)[]>;
|
|
5
|
+
};
|
|
6
|
+
label: {
|
|
7
|
+
type: import('vue').PropType<string>;
|
|
8
|
+
required: true;
|
|
9
|
+
};
|
|
10
|
+
value: {
|
|
11
|
+
type: import('vue').PropType<string | number | boolean>;
|
|
12
|
+
};
|
|
13
|
+
error: {
|
|
14
|
+
type: import('vue').PropType<boolean>;
|
|
15
|
+
};
|
|
16
|
+
disabled: {
|
|
17
|
+
type: import('vue').PropType<boolean>;
|
|
18
|
+
};
|
|
19
|
+
required: {
|
|
20
|
+
type: import('vue').PropType<boolean>;
|
|
21
|
+
};
|
|
22
|
+
tooltip: {
|
|
23
|
+
type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipProps>;
|
|
24
|
+
};
|
|
25
|
+
indeterminate: {
|
|
26
|
+
type: import('vue').PropType<boolean>;
|
|
27
|
+
};
|
|
28
|
+
emphasis: {
|
|
29
|
+
type: import('vue').PropType<boolean>;
|
|
30
|
+
};
|
|
31
|
+
standalone: {
|
|
32
|
+
type: import('vue').PropType<boolean>;
|
|
33
|
+
};
|
|
34
|
+
ariaOwns: {
|
|
35
|
+
type: import('vue').PropType<string>;
|
|
36
|
+
};
|
|
37
|
+
checkboxId: {
|
|
38
|
+
type: import('vue').PropType<string>;
|
|
39
|
+
};
|
|
40
|
+
children: {
|
|
41
|
+
type: import('vue').PropType<import('../types').ChildCheckbox[]>;
|
|
42
|
+
};
|
|
43
|
+
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
44
|
+
modelValue: {
|
|
45
|
+
required: true;
|
|
46
|
+
type: import('vue').PropType<(string | number | boolean)[]>;
|
|
47
|
+
};
|
|
48
|
+
label: {
|
|
49
|
+
type: import('vue').PropType<string>;
|
|
50
|
+
required: true;
|
|
51
|
+
};
|
|
52
|
+
value: {
|
|
53
|
+
type: import('vue').PropType<string | number | boolean>;
|
|
54
|
+
};
|
|
55
|
+
error: {
|
|
56
|
+
type: import('vue').PropType<boolean>;
|
|
57
|
+
};
|
|
58
|
+
disabled: {
|
|
59
|
+
type: import('vue').PropType<boolean>;
|
|
60
|
+
};
|
|
61
|
+
required: {
|
|
62
|
+
type: import('vue').PropType<boolean>;
|
|
63
|
+
};
|
|
64
|
+
tooltip: {
|
|
65
|
+
type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipProps>;
|
|
66
|
+
};
|
|
67
|
+
indeterminate: {
|
|
68
|
+
type: import('vue').PropType<boolean>;
|
|
69
|
+
};
|
|
70
|
+
emphasis: {
|
|
71
|
+
type: import('vue').PropType<boolean>;
|
|
72
|
+
};
|
|
73
|
+
standalone: {
|
|
74
|
+
type: import('vue').PropType<boolean>;
|
|
75
|
+
};
|
|
76
|
+
ariaOwns: {
|
|
77
|
+
type: import('vue').PropType<string>;
|
|
78
|
+
};
|
|
79
|
+
checkboxId: {
|
|
80
|
+
type: import('vue').PropType<string>;
|
|
81
|
+
};
|
|
82
|
+
children: {
|
|
83
|
+
type: import('vue').PropType<import('../types').ChildCheckbox[]>;
|
|
84
|
+
};
|
|
85
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
86
|
+
export default _default;
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { FzTooltipProps } from '@fiscozen/tooltip';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Props for the FzCheckbox component.
|
|
5
|
+
*
|
|
6
|
+
* Supports both single-selection (boolean v-model) and multi-selection (array v-model).
|
|
7
|
+
* Can be used standalone or as part of a checkbox group.
|
|
8
|
+
*/
|
|
9
|
+
export type FzCheckboxProps = {
|
|
10
|
+
/**
|
|
11
|
+
* Text label displayed next to the checkbox.
|
|
12
|
+
* Used for aria-labelledby when not in standalone mode.
|
|
13
|
+
*/
|
|
14
|
+
label: string;
|
|
15
|
+
/**
|
|
16
|
+
* Value associated with the checkbox when used in array v-model.
|
|
17
|
+
* Falls back to label if not provided.
|
|
18
|
+
*
|
|
19
|
+
* @default label
|
|
20
|
+
*/
|
|
21
|
+
value?: string | number | boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Visual size of the checkbox.
|
|
24
|
+
*
|
|
25
|
+
* @deprecated This prop is deprecated and will be removed in a future version.
|
|
26
|
+
* Checkboxes now have a fixed size equivalent to the former "md" size.
|
|
27
|
+
*/
|
|
28
|
+
size?: "sm" | "md";
|
|
29
|
+
/**
|
|
30
|
+
* Displays indeterminate state (partial selection).
|
|
31
|
+
* Used for parent checkboxes when some (but not all) children are selected.
|
|
32
|
+
* Screen readers announce this as "mixed" via aria-checked="mixed".
|
|
33
|
+
*
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
indeterminate?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Applies emphasis styling with blue icon when checked.
|
|
39
|
+
* Highlights important or primary selection options.
|
|
40
|
+
*
|
|
41
|
+
* @default false
|
|
42
|
+
*/
|
|
43
|
+
emphasis?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Disables the checkbox, preventing user interaction.
|
|
46
|
+
*
|
|
47
|
+
* @default false
|
|
48
|
+
*/
|
|
49
|
+
disabled?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Shows error state with red styling.
|
|
52
|
+
* Use with error slot to display validation messages.
|
|
53
|
+
*
|
|
54
|
+
* @default false
|
|
55
|
+
*/
|
|
56
|
+
error?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Marks the checkbox as required for form validation.
|
|
59
|
+
* Adds aria-required attribute for accessibility.
|
|
60
|
+
*
|
|
61
|
+
* @default false
|
|
62
|
+
*/
|
|
63
|
+
required?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Renders only the checkbox icon without label text.
|
|
66
|
+
* Label is used for aria-label instead of being displayed.
|
|
67
|
+
* Useful for compact UIs or table cells.
|
|
68
|
+
*
|
|
69
|
+
* @default false
|
|
70
|
+
*/
|
|
71
|
+
standalone?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Configuration for optional tooltip icon.
|
|
74
|
+
* Displays info icon next to checkbox with hover tooltip.
|
|
75
|
+
*/
|
|
76
|
+
tooltip?: FzTooltipProps;
|
|
77
|
+
/**
|
|
78
|
+
* Space-separated list of child checkbox IDs for aria-owns.
|
|
79
|
+
* Establishes semantic parent-child relationships for screen readers.
|
|
80
|
+
* Automatically managed by FzCheckboxGroupOption in hierarchical structures.
|
|
81
|
+
*
|
|
82
|
+
* @example "checkbox-child-0 checkbox-child-1 checkbox-child-2"
|
|
83
|
+
*/
|
|
84
|
+
ariaOwns?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Custom ID for the checkbox input element.
|
|
87
|
+
* Auto-generated if not provided using timestamp + random suffix.
|
|
88
|
+
* Used by FzCheckboxGroupOption for deterministic ARIA relationships.
|
|
89
|
+
*
|
|
90
|
+
* @example "my-custom-checkbox-id"
|
|
91
|
+
*/
|
|
92
|
+
checkboxId?: string;
|
|
93
|
+
};
|
|
94
|
+
/**
|
|
95
|
+
* Props for the FzCheckboxGroup component.
|
|
96
|
+
*
|
|
97
|
+
* Container component for managing multiple related checkboxes with shared labeling,
|
|
98
|
+
* validation, and accessibility features. Supports both flat lists and hierarchical
|
|
99
|
+
* parent-child checkbox structures with automatic indeterminate state management.
|
|
100
|
+
*/
|
|
101
|
+
export type FzCheckboxGroupProps = {
|
|
102
|
+
/**
|
|
103
|
+
* Label text for the entire checkbox group.
|
|
104
|
+
* Connected to group via aria-labelledby for screen reader accessibility.
|
|
105
|
+
*/
|
|
106
|
+
label: string;
|
|
107
|
+
/**
|
|
108
|
+
* Visual size for all checkboxes in the group.
|
|
109
|
+
*
|
|
110
|
+
* @deprecated This prop is deprecated and will be removed in a future version.
|
|
111
|
+
* Checkboxes now have a fixed size equivalent to the former "md" size.
|
|
112
|
+
*/
|
|
113
|
+
size?: "sm" | "md";
|
|
114
|
+
/**
|
|
115
|
+
* Array of checkbox options to render.
|
|
116
|
+
* Supports flat lists and hierarchical parent-child structures.
|
|
117
|
+
* Parent checkboxes automatically show indeterminate state when partially selected.
|
|
118
|
+
*
|
|
119
|
+
* @example
|
|
120
|
+
* // Flat list
|
|
121
|
+
* [
|
|
122
|
+
* { label: "Option 1", value: "opt1" },
|
|
123
|
+
* { label: "Option 2", value: "opt2" }
|
|
124
|
+
* ]
|
|
125
|
+
*
|
|
126
|
+
* @example
|
|
127
|
+
* // Hierarchical structure
|
|
128
|
+
* [
|
|
129
|
+
* {
|
|
130
|
+
* label: "Parent",
|
|
131
|
+
* value: "parent",
|
|
132
|
+
* children: [
|
|
133
|
+
* { label: "Child 1", value: "child1" },
|
|
134
|
+
* { label: "Child 2", value: "child2" }
|
|
135
|
+
* ]
|
|
136
|
+
* }
|
|
137
|
+
* ]
|
|
138
|
+
*/
|
|
139
|
+
options: ParentCheckbox[];
|
|
140
|
+
/**
|
|
141
|
+
* Applies emphasis styling to all checkboxes in the group.
|
|
142
|
+
* Icons turn blue when checked.
|
|
143
|
+
*
|
|
144
|
+
* @default false
|
|
145
|
+
*/
|
|
146
|
+
emphasis?: boolean;
|
|
147
|
+
/**
|
|
148
|
+
* Disables all checkboxes in the group.
|
|
149
|
+
*
|
|
150
|
+
* @default false
|
|
151
|
+
*/
|
|
152
|
+
disabled?: boolean;
|
|
153
|
+
/**
|
|
154
|
+
* Shows error state for all checkboxes.
|
|
155
|
+
* Use with error slot to display validation messages.
|
|
156
|
+
*
|
|
157
|
+
* @default false
|
|
158
|
+
*/
|
|
159
|
+
error?: boolean;
|
|
160
|
+
/**
|
|
161
|
+
* Marks the group as required for form validation.
|
|
162
|
+
* Adds aria-required to the group container.
|
|
163
|
+
*
|
|
164
|
+
* @default false
|
|
165
|
+
*/
|
|
166
|
+
required?: boolean;
|
|
167
|
+
/**
|
|
168
|
+
* Arranges checkboxes horizontally instead of vertically.
|
|
169
|
+
* Useful for compact layouts or inline forms.
|
|
170
|
+
*
|
|
171
|
+
* @default false
|
|
172
|
+
*/
|
|
173
|
+
horizontal?: boolean;
|
|
174
|
+
};
|
|
175
|
+
/**
|
|
176
|
+
* Checkbox option that can optionally have child checkboxes.
|
|
177
|
+
* Used for hierarchical structures with parent-child relationships.
|
|
178
|
+
* Parent checkboxes automatically display indeterminate state when children are partially selected.
|
|
179
|
+
*/
|
|
180
|
+
export type ParentCheckbox = ChildCheckbox & {
|
|
181
|
+
/**
|
|
182
|
+
* Optional array of child checkboxes for hierarchical structures.
|
|
183
|
+
* Parent shows indeterminate state when some (but not all) children are selected.
|
|
184
|
+
* Parent checkbox controls all children when toggled.
|
|
185
|
+
*/
|
|
186
|
+
children?: ChildCheckbox[];
|
|
187
|
+
};
|
|
188
|
+
/**
|
|
189
|
+
* Individual checkbox option within a group.
|
|
190
|
+
* Inherits all FzCheckboxProps except 'size' which is controlled by the parent group.
|
|
191
|
+
*/
|
|
192
|
+
export type ChildCheckbox = Omit<FzCheckboxProps, "size">;
|