@tresjs/leches 0.11.0 → 0.12.1

package/dist/tresleches.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/leches
- * version: v0.11.0
+ * version: v0.12.1
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w.tresleches={},w.Vue,w.VueUseCore))})(this,function(w,e,x){"use strict";const We="";function E(n){return typeof n=="function"?n():e.unref(n)}const T=typeof window<"u"&&typeof document<"u";function U(n,r={}){if(!e.isRef(n))return e.toRefs(n);const o=Array.isArray(n.value)?Array.from({length:n.value.length}):{};for(const t in n.value)o[t]=e.customRef(()=>({get(){return n.value[t]},set(a){var s;if((s=E(r.replaceRef))!=null?s:!0)if(Array.isArray(n.value)){const f=[...n.value];f[t]=a,n.value=f}else{const f={...n.value,[t]:a};Object.setPrototypeOf(f,Object.getPrototypeOf(n.value)),n.value=f}else n.value[t]=a}}));return o}const O=T?window:void 0;function R(n,r={}){const{pointerTypes:o,preventDefault:t,stopPropagation:a,exact:s,onMove:c,onEnd:f,onStart:p,initialValue:_,axis:d="both",draggingElement:l=O,handle:u=n}=r,{width:y}=x.useWindowSize();let C=y.value;const i=e.ref(E(_)??{x:0,y:0});e.watch(y,()=>{const g=y.value-C;i.value.x+=g,C=y.value});const h=e.ref(),k=g=>o?o.includes(g.pointerType):!0,m=g=>{E(t)&&g.preventDefault(),E(a)&&g.stopPropagation()},b=g=>{if(!k(g)||E(s)&&g.target!==E(n))return;const $=E(n).getBoundingClientRect(),N={x:g.clientX-$.left,y:g.clientY-$.top};(p==null?void 0:p(N,g))!==!1&&(h.value=N,m(g))},Xe=g=>{if(!k(g)||!h.value)return;let{x:$,y:N}=i.value;(d==="x"||d==="both")&&($=g.clientX-h.value.x),(d==="y"||d==="both")&&(N=g.clientY-h.value.y),i.value={x:$,y:N},c==null||c(i.value,g),m(g)},je=g=>{k(g)&&h.value&&(h.value=void 0,f==null||f(i.value,g),m(g))};if(T){const g={capture:r.capture??!0};x.useEventListener(u,"pointerdown",b,g),x.useEventListener(l,"pointermove",Xe,g),x.useEventListener(l,"pointerup",je,g)}return{...U(i),position:i,isDragging:e.computed(()=>!!h.value),style:e.computed(()=>`left:${i.value.x}px;top:${i.value.y}px;`)}}const P=e.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(n,{slots:r}){const o=e.ref(),t=e.computed(()=>n.handle??o.value),a=n.storageKey&&x.useStorage(n.storageKey,E(n.initialValue)||{x:0,y:0},x.isClient?n.storageType==="session"?sessionStorage:localStorage:void 0),s=a||n.initialValue||{x:0,y:0},c=(p,_)=>{var d;(d=n.onEnd)==null||d.call(n,p,_),a&&(a.value.x=p.x,a.value.y=p.y)},f=e.reactive(R(o,{...n,handle:t,initialValue:s,onEnd:c}));return()=>{if(r.default)return e.h(n.as||"div",{ref:o,style:`touch-action:none;${f.style}`},r.default(f))}}}),X=Symbol("CONTROLS_CONTEXT_KEY"),F="default",B=e.reactive({});function z(n=F){return e.provide(X,B),B[n]}const D=n=>{const r=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;return typeof n=="boolean"?"boolean":typeof n=="number"?"number":typeof n=="string"&&r.test(n)?"color":typeof n=="string"?"string":n.isVector3||n.isVector2||n.isEuler||n instanceof Array?"vector":n.min!==void 0||n.max!==void 0||n.step!==void 0?"range":n.options&&Array.isArray(n.options)?"select":"unknown"},S=(n,r,o,t)=>{const a={key:e.ref(n),label:e.ref(n),name:e.ref(n),type:e.ref(o),value:e.ref(r),visible:e.ref(!0),[n]:e.ref(r)};return t&&(a.folder=e.ref(t)),a},j=(n,r)=>{let o=1,t=`${n}_${o}`;for(;r[t];)o++,t=`${n}_${o}`;return t},W=(n,r,o)=>{const t={},a=typeof n=="string"?n:null,s=a?r:n,c=a&&a!=="fpsgraph"?o:r,f=(c==null?void 0:c.uuid)||F;if(B[f]||(B[f]=e.reactive({})),n==="fpsgraph"){const l=S("fpsgraph",null,"fpsgraph",null);return B[f].fpsgraph=l,t.fpsgraph=l,e.toRefs(e.reactive(t))}const p=B[f],_=e.isReactive(s),d=_?e.toRefs(s):{};for(const l in s){let u=s[l],y=l;if(_&&d[l]&&(u=d[l]),a&&(y=`${a}${l.charAt(0).toUpperCase()+l.slice(1)}`),!a&&p[y]&&(y=j(l,p)),typeof u=="object"&&!e.isRef(u)&&!Array.isArray(u)&&u.value!==void 0){const i=u,h=e.isRef(i.value)?i.value:e.ref(i.value),k=D(i),m=S(l,h,k,a);k==="select"&&(m.options=e.ref(i.options.map(b=>typeof b=="object"&&b.text&&b.value?b:{text:b,value:b}))),k==="range"&&(m.min=e.ref(i.min||0),m.max=e.ref(i.max||1),m.step=e.ref(i.step||.1)),m.label.value=i.label||l,m.visible.value=i.visible!==void 0?i.visible:!0,p[y]=m,t[y]=m;continue}if(e.isRef(u)){const i=S(l,u,D(u.value),a);p[y]=i,t[y]=i;continue}else if(typeof u=="object"&&!Array.isArray(u)){const i=e.toRefs(u);i[l]&&(u=i[l])}const C=S(l,u,D(u),a);p[y]=C,t[y]=C,C.uniqueKey=y}return Object.keys(t).length>1?e.toRefs(e.reactive(t)):Object.values(t)[0]},Y={class:"flex px-4 justify-between gap-4 items-center mb-2"},H=["for"],v=["id","value","min","max","step"],G=e.defineComponent({__name:"NumberControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(d){const{target:l}=d;r("change",l.valueAsNumber)}const a=x.useMouse(),s=e.ref(0),c=e.ref(!1),f=d=>{s.value=d.clientX,c.value=!0},p=()=>{c.value=!1},_=d=>Math.floor(Math.abs(d)/10);return e.watch(a.x,d=>{if(c.value){const l=d-s.value,u=_(l);l>0?r("change",o.control.value+1+u):l<0&&r("change",o.control.value-1+u),o.control.min!==void 0&&o.control.value<o.control.min&&r("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&r("change",o.control.max),s.value=d}}),(d,l)=>(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("label",{class:"text-gray-500 w-1/3",for:d.control.uniqueKey},e.toDisplayString(d.label),9,H),e.createElementVNode("input",{id:d.control.uniqueKey,value:d.control.value,class:e.normalizeClass(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":c.value}]),type:"number",min:d.control.min,max:d.control.max,step:d.control.step,onInput:t,onMousedown:f,onMouseup:p},null,42,v)]))}}),J={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},Q=["for"],Z=["id","value","aria-label"],ee=e.defineComponent({__name:"TextControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){const{target:a}=t;r("change",a.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("label",{for:t.control.uniqueKey,class:"text-gray-500 w-1/3"},e.toDisplayString(t.label),9,Q),e.createElementVNode("input",{id:t.control.uniqueKey,value:t.control.value,type:"text",tabindex:"0",class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 border-none font-sans","aria-label":t.label,placeholder:"Enter value here...",onChange:o},null,40,Z)]))}}),te={class:"flex px-4 justify-start gap-2 items-center mb-2 min-h-32px"},ne={class:"text-gray-500 w-1/3"},oe=["id","checked"],le=["for"],re=["aria-checked"],ae={class:"i-ic:baseline-check text-light"},se=e.defineComponent({__name:"BooleanControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(s){const{target:c}=s;r("change",c.checked)}function a(s){(s.code==="Space"||s.code==="Enter")&&(s.preventDefault(),r("change",!o.control.value))}return(s,c)=>(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("label",ne,e.toDisplayString(s.label),1),e.createElementVNode("input",{id:s.control.uniqueKey,checked:s.control.value,class:"hidden",type:"checkbox",onInput:t},null,40,oe),e.createElementVNode("label",{for:s.control.uniqueKey,class:"inline-flex items-center cursor-pointer"},[e.createElementVNode("span",{tabindex:"0",role:"checkbox","aria-checked":s.control.value.toString(),class:e.normalizeClass([{"bg-dark-500":s.control.value,"bg-gray-200":!s.control.value},"w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),onKeydown:a},[e.withDirectives(e.createElementVNode("i",ae,null,512),[[e.vShow,s.control.value]])],42,re)],8,le)]))}}),ce={class:"px-4 relative flex justify-between gap-4 items-center mb-2"},ie=["value","min","max","step"],de=["value","min","max","step"],ue=e.defineComponent({__name:"SliderControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(l){const{target:u}=l;r("change",u.valueAsNumber)}const a=e.computed(()=>({backgroundImage:`linear-gradient(to right, #333 0% ${100*(o.control.value-(o.control.min||0))/((o.control.max||100)-(o.control.min||0))}%, #e2e2e2 0%)`})),s=x.useMouse(),c=e.ref(0),f=e.ref(!1),p=l=>{c.value=l.clientX,f.value=!0},_=()=>{f.value=!1},d=l=>Math.floor(Math.abs(l)/10);return e.watch(s.x,l=>{if(f.value){const u=l-c.value,y=d(u);u>0?r("change",o.control.value+1+y):u<0&&r("change",o.control.value-1+y),o.control.min!==void 0&&o.control.value<o.control.min&&r("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&r("change",o.control.max),c.value=l}}),(l,u)=>(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("label",{class:e.normalizeClass(["text-gray-500 w-1/3",{"flex justify-between items-center":l.control.icon}])},[e.createTextVNode(e.toDisplayString(l.label)+" ",1),e.createElementVNode("i",{class:e.normalizeClass(`i-${l.control.icon}`)},null,2)],2),e.createElementVNode("input",{value:l.control.value,class:"w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",style:e.normalizeStyle(a.value),type:"range",min:l.control.min,max:l.control.max,step:l.control.step,onInput:t},null,44,ie),e.createElementVNode("input",{value:l.control.value,class:e.normalizeClass(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":f.value}]),type:"number",min:l.control.min,max:l.control.max,step:l.control.step,onInput:t,onMousedown:p,onMouseup:_},null,42,de)]))}}),Ye="",fe=((n,r)=>{const o=n.__vccOpts||n;for(const[t,a]of r)o[t]=a;return o})(ue,[["__scopeId","data-v-9e6267fe"]]),pe={class:"flex px-4 justify-between gap-4 items-center mb-2"},me={class:"text-gray-500 w-1/3"},ge=["id","value","aria-label"],ye=["id","aria-label","value"],he=e.defineComponent({__name:"ColorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){const{target:a}=t;r("change",a.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",pe,[e.createElementVNode("label",me,e.toDisplayString(t.label),1),e.createElementVNode("input",{id:t.control.uniqueKey,tabindex:"0",value:t.control.value,"aria-label":t.label,class:e.normalizeClass(["focus:outline-none focus:ring-2 focus:ring-blue-600",{"important-outline-gray-200":t.control.value==="#ffffff"}]),type:"color",onInput:o},null,42,ge),e.createElementVNode("input",{id:t.control.uniqueKey,tabindex:"0","aria-label":t.label,value:t.control.value,class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 border-none font-sans",type:"text",onInput:o},null,40,ye)]))}}),ve="";function be(n){if(typeof n=="number")return[n,n,n];if(A(n)){const{x:r,y:o,z:t}=n;return[r,o,t]}return n}function _e(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z>"u"}function A(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z=="number"}const ke={class:"text-gray-500 w-1/3"},xe={class:"w-2/3 flex justify-between gap-0.5"},we={key:0,class:"font-bold px-1 py-1 text-0.65rem text-gray-300"},Ee=["id","value","onInput","onMousedown","onMouseup"],Ce=e.defineComponent({__name:"VectorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n,t=x.useMouse(),a=e.ref(0),s=e.ref(!1),c=e.ref(0),f=(i,h)=>{c.value=h,a.value=i.clientX,s.value=!0},p=(i,h)=>{c.value=h,s.value=!1},_=()=>{s.value=!1},d=i=>Math.floor(Math.abs(i)/10),l=e.computed(()=>be(o.control.value)),u=e.ref(["x","y","z"]),y=e.computed(()=>_e(o.control.value)||A(o.control.value));function C(i,h){const{value:k}=o.control,{target:m}=i;c.value=h,k[y.value?u.value[c.value]:c.value]=parseFloat(m.value),r("change",k)}return e.watch(t.x,i=>{if(s.value){const h=i-a.value,k=d(h),{value:m}=o.control,b=y.value?u.value[c.value]:c.value;h>0?m[b]+=.1+k:h<0&&(m[b]-=.1+k),o.control.min!==void 0&&m<o.control.min&&(m[b]=o.control.min),o.control.max!==void 0&&m>o.control.max&&(m[b]=o.control.max),r("change",m),a.value=i}}),(i,h)=>(e.openBlock(),e.createElementBlock("div",{class:"flex px-4 justify-between gap-1 items-center mb-2",onMouseup:h[0]||(h[0]=k=>_())},[e.createElementVNode("label",ke,e.toDisplayString(i.label),1),e.createElementVNode("div",xe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(k,m)=>(e.openBlock(),e.createElementBlock("div",{key:i.label+m,class:"flex items-center w-1/3 bg-gray-100 rounded"},[u.value[m]&&y.value?(e.openBlock(),e.createElementBlock("span",we,e.toDisplayString(u.value[m]),1)):e.createCommentVNode("",!0),e.createElementVNode("input",{id:`${i.control.uniqueKey}-${u.value[m]}`,type:"number",step:"0.1",class:e.normalizeClass(["w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none",{"cursor-ew-resize":s.value}]),value:l.value[m].toFixed(2),onInput:b=>C(b,m),onMousedown:b=>f(b,m),onMouseup:b=>p(b,m)},null,42,Ee)]))),128))])],32))}}),Be={class:"flex px-4 justify-between gap-4 items-center mb-2"},Ve={class:"text-gray-500 w-1/3"},$e={class:"relative w-2/3 p-1 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans"},Ne={class:"absolute bottom-0.5 right-0.5 font-sans text-xs"},Se=["points"],I=160,M=40,V=2,K=100,q=20,De=e.defineComponent({__name:"FPSGraph",props:{label:{},control:{}},setup(n){const r=x.useFps({every:K}),o=e.ref(""),t=e.ref([]),a=e.ref(I/V);let s=performance.now();return x.useRafFn(({timestamp:c})=>{c-s>=K&&(s=c,t.value.push(r.value),t.value.length>a.value&&t.value.shift(),o.value=t.value.map((f,p)=>`${p*V},${M+q-V/2-f*(M+q-V)/120}`).join(" "))}),(c,f)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("label",Ve,e.toDisplayString(c.label),1),e.createElementVNode("div",$e,[e.createElementVNode("div",Ne,e.toDisplayString(Math.round(e.unref(r)))+" FPS ",1),(e.openBlock(),e.createElementBlock("svg",{width:I,height:M,xmlns:"http://www.w3.org/2000/svg",class:"bg-gray-100"},[e.createElementVNode("polyline",{points:o.value,fill:"none",stroke:"lightgray","stroke-width":V,"stroke-linecap":"round","stroke-linejoin":"round"},null,8,Se)]))])]))}}),Me={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},Te=["for"],Fe=["id","value"],ze=["value"],Ae=e.defineComponent({__name:"SelectControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){r("change",t.target.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",Me,[e.createElementVNode("label",{class:"text-gray-500 w-1/3",for:t.control.uniqueKey},e.toDisplayString(t.label),9,Te),e.createElementVNode("select",{id:t.control.uniqueKey,value:t.control.value,class:"p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",onChange:o},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.control.options,s=>(e.openBlock(),e.createElementBlock("option",{key:s.value,value:s.value},e.toDisplayString(s.text),9,ze))),128))],40,Fe)]))}}),L=e.defineComponent({__name:"ControlInput",props:{control:{}},emits:["change"],setup(n,{emit:r}){function o(t){r("change",t)}return(t,a)=>t.control.visible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.control.type==="color"?(e.openBlock(),e.createBlock(he,{key:0,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="select"?(e.openBlock(),e.createBlock(Ae,{key:1,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="vector"?(e.openBlock(),e.createBlock(Ce,{key:2,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="boolean"?(e.openBlock(),e.createBlock(se,{key:3,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="fpsgraph"?(e.openBlock(),e.createBlock(De,{key:4,label:t.control.label,control:t.control},null,8,["label","control"])):t.control.type==="number"?(e.openBlock(),e.createBlock(G,{key:5,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="range"?(e.openBlock(),e.createBlock(fe,{key:6,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):(e.openBlock(),e.createBlock(ee,{key:7,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"]))],64)):e.createCommentVNode("",!0)}}),Ie={class:"mb-4"},Ke=["aria-expanded","data-folder"],qe={class:"bg-white rounded-b pt-4",role:"menu"},Le=e.defineComponent({__name:"Folder",props:{controls:{},label:{}},setup(n){function r(a,s){s.value=a}const o=e.ref(!1),t=()=>{o.value=!o.value};return(a,s)=>(e.openBlock(),e.createElementBlock("div",Ie,[e.createElementVNode("button",{class:"flex items-center justify-between w-full py-2 px-4 bg-gray-100 border-none text-gray-400 font-bold text-xs font-sans cursor-pointer","aria-expanded":o.value,"aria-haspopup":"true",role:"button","data-folder":a.label,tabindex:"0",onClick:t},[e.createElementVNode("span",null,e.toDisplayString(a.label),1),e.createElementVNode("i",{class:e.normalizeClass(o.value?"i-ic:baseline-keyboard-arrow-up":"i-ic:baseline-keyboard-arrow-down")},null,2)],8,Ke),e.createVNode(e.Transition,{name:"slide","enter-active-class":" animate-fade-in animate-duration-200 animate-ease-in-out","leave-active-class":" animate-fade-out animate-duration-200 animate-ease-in-out"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",qe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.controls,c=>(e.openBlock(),e.createBlock(L,{key:c.label,control:c,role:"menuitem",onChange:f=>r(f,c)},null,8,["control","onChange"]))),128))],512),[[e.vShow,o.value]])]),_:1})]))}}),Ue={tabindex:"0",class:"bg-white shadow-xl rounded border-4 border-solid border-black"},Oe=[e.createElementVNode("i",{class:"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs"},"🍰",-1),e.createElementVNode("div",null,[e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"})],-1),e.createElementVNode("div",null,null,-1)],Re=280,Pe=e.defineComponent({__name:"TresLeches",props:{uuid:{}},setup(n){const r=n,{uuid:o}=e.toRefs(r),{width:t}=x.useWindowSize(),a=e.ref(null),s=z(o==null?void 0:o.value);function c(p,_){s[e.unref(p)].value=_,s[e.unref(p)][e.unref(p)]=_}const f=e.computed(()=>{const p={};for(const _ in s){const d=s[_],l=d.folder||"default";p[l]||(p[l]=[]),p[l].push(d)}return p});return(p,_)=>(e.openBlock(),e.createBlock(e.unref(P),{id:e.unref(o),"initial-value":{x:e.unref(t)-Re-40,y:10},class:e.normalizeClass(["absolute select-none z-24 w-280px font-sans text-xs",p.$attrs.class]),handle:a.value},{default:e.withCtx(()=>[e.createElementVNode("div",Ue,[e.createElementVNode("header",{ref_key:"handle",ref:a,class:"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"},Oe,512),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(d,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l},[l!=="default"?(e.openBlock(),e.createBlock(Le,{key:0,label:l,controls:d},null,8,["label","controls"])):e.createCommentVNode("",!0),l==="default"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(d,u=>(e.openBlock(),e.createBlock(L,{key:u.label,control:u,onChange:y=>c(u.key,y)},null,8,["control","onChange"]))),128)):e.createCommentVNode("",!0)],64))),128))])]),_:1},8,["id","initial-value","class","handle"]))}});w.TresLeches=Pe,w.useControls=W,w.useControlsProvider=z,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
+(function(V,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core"],e):(V=typeof globalThis<"u"?globalThis:V||self,e(V.tresleches={},V.Vue,V.VueUseCore))})(this,function(V,e,k){"use strict";const Ye="";function N(n){return typeof n=="function"?n():e.unref(n)}const I=typeof window<"u"&&typeof document<"u";function j(n,i={}){if(!e.isRef(n))return e.toRefs(n);const o=Array.isArray(n.value)?Array.from({length:n.value.length}):{};for(const l in n.value)o[l]=e.customRef(()=>({get(){return n.value[l]},set(t){var d;if((d=N(i.replaceRef))!=null?d:!0)if(Array.isArray(n.value)){const c=[...n.value];c[l]=t,n.value=c}else{const c={...n.value,[l]:t};Object.setPrototypeOf(c,Object.getPrototypeOf(n.value)),n.value=c}else n.value[l]=t}}));return o}const W=I?window:void 0;function v(n,i={}){const{pointerTypes:o,preventDefault:l,stopPropagation:t,exact:d,onMove:a,onEnd:c,onStart:u,initialValue:h,axis:y="both",draggingElement:s=W,handle:r=n}=i,{width:m}=k.useWindowSize();let x=m.value;const f=e.ref(N(h)??{x:0,y:0});e.watch(m,()=>{const p=m.value-x;f.value.x+=p,x=m.value});const E=e.ref(),$=p=>o?o.includes(p.pointerType):!0,w=p=>{N(l)&&p.preventDefault(),N(t)&&p.stopPropagation()},C=p=>{if(!$(p)||N(d)&&p.target!==N(n))return;const g=N(n).getBoundingClientRect(),_={x:p.clientX-g.left,y:p.clientY-g.top};(u==null?void 0:u(_,p))!==!1&&(E.value=_,w(p))},S=p=>{if(!$(p)||!E.value)return;let{x:g,y:_}=f.value;(y==="x"||y==="both")&&(g=p.clientX-E.value.x),(y==="y"||y==="both")&&(_=p.clientY-E.value.y),f.value={x:g,y:_},a==null||a(f.value,p),w(p)},T=p=>{$(p)&&E.value&&(E.value=void 0,c==null||c(f.value,p),w(p))};if(I){const p={capture:i.capture??!0};k.useEventListener(r,"pointerdown",C,p),k.useEventListener(s,"pointermove",S,p),k.useEventListener(s,"pointerup",T,p)}return{...j(f),position:f,isDragging:e.computed(()=>!!E.value),style:e.computed(()=>`left:${f.value.x}px;top:${f.value.y}px;`)}}const Y=e.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(n,{slots:i}){const o=e.ref(),l=e.computed(()=>n.handle??o.value),t=n.storageKey&&k.useStorage(n.storageKey,N(n.initialValue)||{x:0,y:0},k.isClient?n.storageType==="session"?sessionStorage:localStorage:void 0),d=t||n.initialValue||{x:0,y:0},a=(u,h)=>{var y;(y=n.onEnd)==null||y.call(n,u,h),t&&(t.value.x=u.x,t.value.y=u.y)},c=e.reactive(v(o,{...n,handle:l,initialValue:d,onEnd:a}));return()=>{if(i.default)return e.h(n.as||"div",{ref:o,style:`touch-action:none;${c.style}`},i.default(c))}}}),H=Symbol("CONTROLS_CONTEXT_KEY"),q="default",D=e.reactive({});function L(n=q){return e.provide(H,D),D[n]}const z=n=>{const i=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;return typeof n=="boolean"?"boolean":typeof n=="number"?"number":typeof n=="string"&&i.test(n)?"color":typeof n=="string"?"string":n.isVector3||n.isVector2||n.isEuler||n instanceof Array?"vector":n.min!==void 0||n.max!==void 0||n.step!==void 0?"range":n.options&&Array.isArray(n.options)?"select":"unknown"},K=(n,i,o,l)=>{const t={key:e.ref(n),label:e.ref(n),name:e.ref(n),type:e.ref(o),value:e.ref(i),visible:e.ref(!0),[n]:e.ref(i)};return l&&(t.folder=e.ref(l)),t},G=(n,i,o)=>{const l={},t=typeof n=="string"?n:null,d=t?i:n,a=t&&t!=="fpsgraph"?o:i,c=(a==null?void 0:a.uuid)||q;if(D[c]||(D[c]=e.reactive({})),n==="fpsgraph"){const s=K("fpsgraph",null,"fpsgraph",null);return D[c].fpsgraph=s,l.fpsgraph=s,e.toRefs(e.reactive(l))}const u=D[c],h=e.isReactive(d),y=h?e.toRefs(d):{};for(const s in d){let r=d[s],m=s;if(h&&y[s]&&(r=y[s]),t&&(m=`${t}${s.charAt(0).toUpperCase()+s.slice(1)}`),typeof r=="object"&&!e.isRef(r)&&!Array.isArray(r)&&r.value!==void 0){const f=r,E=e.isRef(f.value)?f.value:e.ref(f.value),$=z(f),w=K(s,E,$,t);$==="select"&&(w.options=e.ref(f.options.map(C=>typeof C=="object"&&C.text&&C.value?C:{text:C,value:C}))),$==="range"&&(w.min=e.ref(f.min||0),w.max=e.ref(f.max||1),w.step=e.ref(f.step||.1)),w.label.value=f.label||s,w.visible.value=f.visible!==void 0?f.visible:!0,u[m]=w,l[m]=w;continue}if(e.isRef(r)){const f=K(s,r,z(r.value),t);u[m]=f,l[m]=f;continue}else if(typeof r=="object"&&!Array.isArray(r)){const f=e.toRefs(r);f[s]&&(r=f[s])}const x=K(s,r,z(r),t);u[m]=x,l[m]=x,x.uniqueKey=m}return Object.keys(l).length>1?e.toRefs(e.reactive(l)):Object.values(l)[0]},J={class:"flex px-4 justify-between gap-4 items-center mb-2"},Q=["for"],Z=["id","value","min","max","step"],ee=e.defineComponent({__name:"NumberControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:i}){const o=n,l=i;function t(s){const{target:r}=s;l("change",r.valueAsNumber)}const d=k.useMouse(),a=e.ref(0),c=e.ref(!1),u=s=>{a.value=s.clientX,c.value=!0},h=()=>{c.value=!1},y=s=>Math.floor(Math.abs(s)/10);return e.watch(d.x,s=>{if(c.value){const r=s-a.value,m=y(r);r>0?l("change",o.control.value+1+m):r<0&&l("change",o.control.value-1+m),o.control.min!==void 0&&o.control.value<o.control.min&&l("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&l("change",o.control.max),a.value=s}}),(s,r)=>(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("label",{class:"text-gray-500 w-1/3",for:s.control.uniqueKey},e.toDisplayString(s.label),9,Q),e.createElementVNode("input",{id:s.control.uniqueKey,value:s.control.value,class:e.normalizeClass(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":c.value}]),type:"number",min:s.control.min,max:s.control.max,step:s.control.step,onInput:t,onMousedown:u,onMouseup:h},null,42,Z)]))}}),te={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},ne=["for"],oe=["id","value","aria-label"],le=e.defineComponent({__name:"TextControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:i}){const o=i;function l(t){const{target:d}=t;o("change",d.value)}return(t,d)=>(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("label",{for:t.control.uniqueKey,class:"text-gray-500 w-1/3"},e.toDisplayString(t.label),9,ne),e.createElementVNode("input",{id:t.control.uniqueKey,value:t.control.value,type:"text",tabindex:"0",class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 border-none font-sans","aria-label":t.label,placeholder:"Enter value here...",onChange:l},null,40,oe)]))}}),re={class:"flex px-4 justify-start gap-2 items-center mb-2 min-h-32px"},ae={class:"text-gray-500 w-1/3"},se=["id","checked"],ce=["for"],ie=["aria-checked"],ue={class:"i-ic:baseline-check text-light"},de=e.defineComponent({__name:"BooleanControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:i}){const o=n,l=i;function t(a){const{target:c}=a;l("change",c.checked)}function d(a){(a.code==="Space"||a.code==="Enter")&&(a.preventDefault(),l("change",!o.control.value))}return(a,c)=>(e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("label",ae,e.toDisplayString(a.label),1),e.createElementVNode("input",{id:a.control.uniqueKey,checked:a.control.value,class:"hidden",type:"checkbox",onInput:t},null,40,se),e.createElementVNode("label",{for:a.control.uniqueKey,class:"inline-flex items-center cursor-pointer"},[e.createElementVNode("span",{tabindex:"0",role:"checkbox","aria-checked":a.control.value.toString(),class:e.normalizeClass([{"bg-dark-500":a.control.value,"bg-gray-200":!a.control.value},"w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),onKeydown:d},[e.withDirectives(e.createElementVNode("i",ue,null,512),[[e.vShow,a.control.value]])],42,ie)],8,ce)]))}}),fe={class:"px-4 relative flex justify-between gap-4 items-center mb-2"},pe=["value","min","max","step"],me=["value","min","max","step"],ge=e.defineComponent({__name:"SliderControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:i}){const o=n,l=i;function t(r){const{target:m}=r;l("change",m.valueAsNumber)}const d=e.computed(()=>({backgroundImage:`linear-gradient(to right, #333 0% ${100*(o.control.value-(o.control.min||0))/((o.control.max||100)-(o.control.min||0))}%, #e2e2e2 0%)`})),a=k.useMouse(),c=e.ref(0),u=e.ref(!1),h=r=>{c.value=r.clientX,u.value=!0},y=()=>{u.value=!1},s=r=>Math.floor(Math.abs(r)/10);return e.watch(a.x,r=>{if(u.value){const m=r-c.value,x=s(m);m>0?l("change",o.control.value+1+x):m<0&&l("change",o.control.value-1+x),o.control.min!==void 0&&o.control.value<o.control.min&&l("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&l("change",o.control.max),c.value=r}}),(r,m)=>(e.openBlock(),e.createElementBlock("div",fe,[e.createElementVNode("label",{class:e.normalizeClass(["text-gray-500 w-1/3",{"flex justify-between items-center":r.control.icon}])},[e.createTextVNode(e.toDisplayString(r.label)+" ",1),e.createElementVNode("i",{class:e.normalizeClass(`i-${r.control.icon}`)},null,2)],2),e.createElementVNode("input",{value:r.control.value,class:"w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",style:e.normalizeStyle(d.value),type:"range",min:r.control.min,max:r.control.max,step:r.control.step,onInput:t},null,44,pe),e.createElementVNode("input",{value:r.control.value,class:e.normalizeClass(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":u.value}]),type:"number",min:r.control.min,max:r.control.max,step:r.control.step,onInput:t,onMousedown:h,onMouseup:y},null,42,me)]))}}),He="",ye=((n,i)=>{const o=n.__vccOpts||n;for(const[l,t]of i)o[l]=t;return o})(ge,[["__scopeId","data-v-9e6267fe"]]),he={class:"flex px-4 justify-between gap-4 items-center mb-2"},be={class:"text-gray-500 w-1/3"},_e=["id","value","aria-label"],ke=["id","aria-label","value"],we=e.defineComponent({__name:"ColorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:i}){const o=i;function l(t){const{target:d}=t;o("change",d.value)}return(t,d)=>(e.openBlock(),e.createElementBlock("div",he,[e.createElementVNode("label",be,e.toDisplayString(t.label),1),e.createElementVNode("input",{id:t.control.uniqueKey,tabindex:"0",value:t.control.value,"aria-label":t.label,class:e.normalizeClass(["focus:outline-none focus:ring-2 focus:ring-blue-600",{"important-outline-gray-200":t.control.value==="#ffffff"}]),type:"color",onInput:l},null,42,_e),e.createElementVNode("input",{id:t.control.uniqueKey,tabindex:"0","aria-label":t.label,value:t.control.value,class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 border-none font-sans",type:"text",onInput:l},null,40,ke)]))}}),Je="";function xe(n){if(typeof n=="number")return[n,n,n];if(U(n)){const{x:i,y:o,z:l}=n;return[i,o,l]}return n}function Ee(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z>"u"}function U(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z=="number"}const Ce={class:"text-gray-500 w-1/3"},Be={class:"relative w-2/3 flex justify-between gap-0.5"},Ve={key:0,class:"font-bold px-1 py-1 text-0.65rem text-gray-300"},$e=["id","step","value","onInput","onMousedown","onMouseup","onFocus"],Ne=e.defineComponent({__name:"VectorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:i}){const o=n,l=i,t=k.useMouse(),{pressed:d}=k.useMousePressed(),a=e.ref(0),c=e.ref(!1),u=e.ref(0),h=e.ref(null),y=e.ref(1),s=k.useKeyModifier("Shift"),r=k.useKeyModifier("Alt");e.watch(s,g=>{y.value=g?10:1}),e.watch(r,g=>{y.value=g?.1:1});const m=g=>{h.value=g},x=()=>{h.value=null},f=(g,_)=>{u.value=_,a.value=g.clientX,c.value=!0},E=(g,_)=>{u.value=_,c.value=!1},$=()=>{c.value=!1};e.watch(d,g=>{g||(c.value=!1)});const w=g=>Math.floor(Math.abs(g)/10),C=e.computed(()=>xe(o.control.value)),S=e.ref(["x","y","z"]),T=e.computed(()=>Ee(o.control.value)||U(o.control.value));function p(g,_){const{value:M}=o.control,{target:b}=g;u.value=_,M[T.value?S.value[u.value]:u.value]=parseFloat(b.value),l("change",M)}return e.watch(t.x,g=>{if(c.value){const _=g-a.value,M=w(_),{value:b}=o.control,B=T.value?S.value[u.value]:u.value;_>0?b[B]+=y.value+M:_<0&&(b[B]-=y.value+M),o.control.min!==void 0&&b<o.control.min&&(b[B]=o.control.min),o.control.max!==void 0&&b>o.control.max&&(b[B]=o.control.max),l("change",b),a.value=g}}),(g,_)=>(e.openBlock(),e.createElementBlock("div",{class:"flex px-4 justify-between gap-1 items-center mb-2",onMouseup:_[0]||(_[0]=M=>$())},[e.createElementVNode("label",Ce,e.toDisplayString(g.label),1),e.createElementVNode("div",Be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C.value,(M,b)=>(e.openBlock(),e.createElementBlock("div",{key:g.label+b,class:e.normalizeClass(["flex items-center w-1/3 bg-gray-100 rounded",{"w-2/5":h.value===b}])},[S.value[b]&&T.value?(e.openBlock(),e.createElementBlock("span",Ve,e.toDisplayString(S.value[b]),1)):e.createCommentVNode("",!0),e.createElementVNode("input",{id:`${g.control.uniqueKey}-${S.value[b]}`,type:"number",step:y.value,class:e.normalizeClass(["w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none",{"cursor-ew-resize":c.value}]),value:C.value[b].toFixed(2),onInput:B=>p(B,b),onMousedown:B=>f(B,b),onMouseup:B=>E(B,b),onFocus:B=>m(b),onBlur:x},null,42,$e)],2))),128))])],32))}}),Se={class:"flex px-4 justify-between gap-4 items-center mb-2"},Me={class:"text-gray-500 w-1/3"},De={class:"relative w-2/3 p-1 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans"},Fe={class:"absolute bottom-0.5 right-0.5 font-sans text-xs"},Te=["points"],O=160,A=40,F=2,R=100,P=20,Ke=e.defineComponent({__name:"FPSGraph",props:{label:{},control:{}},setup(n){const i=k.useFps({every:R}),o=e.ref(""),l=e.ref([]),t=e.ref(O/F);let d=performance.now();return k.useRafFn(({timestamp:a})=>{a-d>=R&&(d=a,l.value.push(i.value),l.value.length>t.value&&l.value.shift(),o.value=l.value.map((c,u)=>`${u*F},${A+P-F/2-c*(A+P-F)/120}`).join(" "))}),(a,c)=>(e.openBlock(),e.createElementBlock("div",Se,[e.createElementVNode("label",Me,e.toDisplayString(a.label),1),e.createElementVNode("div",De,[e.createElementVNode("div",Fe,e.toDisplayString(Math.round(e.unref(i)))+" FPS ",1),(e.openBlock(),e.createElementBlock("svg",{width:O,height:A,xmlns:"http://www.w3.org/2000/svg",class:"bg-gray-100"},[e.createElementVNode("polyline",{points:o.value,fill:"none",stroke:"lightgray","stroke-width":F,"stroke-linecap":"round","stroke-linejoin":"round"},null,8,Te)]))])]))}}),ze={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},Ae=["for"],Ie=["id","value"],qe=["value"],Le=e.defineComponent({__name:"SelectControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:i}){const o=i;function l(t){o("change",t.target.value)}return(t,d)=>(e.openBlock(),e.createElementBlock("div",ze,[e.createElementVNode("label",{class:"text-gray-500 w-1/3",for:t.control.uniqueKey},e.toDisplayString(t.label),9,Ae),e.createElementVNode("select",{id:t.control.uniqueKey,value:t.control.value,class:"p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",onChange:l},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.control.options,a=>(e.openBlock(),e.createElementBlock("option",{key:a.value,value:a.value},e.toDisplayString(a.text),9,qe))),128))],40,Ie)]))}}),X=e.defineComponent({__name:"ControlInput",props:{control:{}},emits:["change"],setup(n,{emit:i}){const o=i;function l(t){o("change",t)}return(t,d)=>t.control.visible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.control.type==="color"?(e.openBlock(),e.createBlock(we,{key:0,label:t.control.label,control:t.control,onChange:l},null,8,["label","control"])):t.control.type==="select"?(e.openBlock(),e.createBlock(Le,{key:1,label:t.control.label,control:t.control,onChange:l},null,8,["label","control"])):t.control.type==="vector"?(e.openBlock(),e.createBlock(Ne,{key:2,label:t.control.label,control:t.control,onChange:l},null,8,["label","control"])):t.control.type==="boolean"?(e.openBlock(),e.createBlock(de,{key:3,label:t.control.label,control:t.control,onChange:l},null,8,["label","control"])):t.control.type==="fpsgraph"?(e.openBlock(),e.createBlock(Ke,{key:4,label:t.control.label,control:t.control},null,8,["label","control"])):t.control.type==="number"?(e.openBlock(),e.createBlock(ee,{key:5,label:t.control.label,control:t.control,onChange:l},null,8,["label","control"])):t.control.type==="range"?(e.openBlock(),e.createBlock(ye,{key:6,label:t.control.label,control:t.control,onChange:l},null,8,["label","control"])):(e.openBlock(),e.createBlock(le,{key:7,label:t.control.label,control:t.control,onChange:l},null,8,["label","control"]))],64)):e.createCommentVNode("",!0)}}),Ue={class:"mb-4"},Oe=["aria-expanded","data-folder"],Re={class:"bg-white rounded-b pt-4",role:"menu"},Pe=e.defineComponent({__name:"Folder",props:{controls:{},label:{}},setup(n){function i(t,d){d.value=t}const o=e.ref(!1),l=()=>{o.value=!o.value};return(t,d)=>(e.openBlock(),e.createElementBlock("div",Ue,[e.createElementVNode("button",{class:"flex items-center justify-between w-full py-2 px-4 bg-gray-100 border-none text-gray-400 font-bold text-xs font-sans cursor-pointer","aria-expanded":o.value,"aria-haspopup":"true",role:"button","data-folder":t.label,tabindex:"0",onClick:l},[e.createElementVNode("span",null,e.toDisplayString(t.label),1),e.createElementVNode("i",{class:e.normalizeClass(o.value?"i-ic:baseline-keyboard-arrow-up":"i-ic:baseline-keyboard-arrow-down")},null,2)],8,Oe),e.createVNode(e.Transition,{name:"slide","enter-active-class":" animate-fade-in animate-duration-200 animate-ease-in-out","leave-active-class":" animate-fade-out animate-duration-200 animate-ease-in-out"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",Re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.controls,a=>(e.openBlock(),e.createBlock(X,{key:a.label,control:a,role:"menuitem",onChange:c=>i(c,a)},null,8,["control","onChange"]))),128))],512),[[e.vShow,o.value]])]),_:1})]))}}),Xe={tabindex:"0",class:"bg-white shadow-xl rounded border-4 border-solid border-black"},je=[e.createElementVNode("i",{class:"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs"},"🍰",-1),e.createElementVNode("div",null,[e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"})],-1),e.createElementVNode("div",null,null,-1)],We=280,ve=e.defineComponent({__name:"TresLeches",props:{uuid:{}},setup(n){const i=n,{uuid:o}=e.toRefs(i),{width:l}=k.useWindowSize(),t=e.ref(null),d=L(o==null?void 0:o.value);function a(u,h){d[e.unref(u)].value=h,d[e.unref(u)][e.unref(u)]=h}const c=e.computed(()=>{const u={};for(const h in d){const y=d[h],s=y.folder||"default";u[s]||(u[s]=[]),u[s].push(y)}return u});return(u,h)=>(e.openBlock(),e.createBlock(e.unref(Y),{id:e.unref(o),"initial-value":{x:e.unref(l)-We-40,y:10},class:e.normalizeClass(["absolute select-none z-24 w-280px font-sans text-xs",u.$attrs.class]),handle:t.value},{default:e.withCtx(()=>[e.createElementVNode("div",Xe,[e.createElementVNode("header",{ref_key:"handle",ref:t,class:"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"},je,512),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(y,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:s},[s!=="default"?(e.openBlock(),e.createBlock(Pe,{key:0,label:s,controls:y},null,8,["label","controls"])):e.createCommentVNode("",!0),s==="default"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(y,r=>(e.openBlock(),e.createBlock(X,{key:r.label,control:r,onChange:m=>a(r.key,m)},null,8,["control","onChange"]))),128)):e.createCommentVNode("",!0)],64))),128))])]),_:1},8,["id","initial-value","class","handle"]))}});V.TresLeches=ve,V.useControls=G,V.useControlsProvider=L,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/leches",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "packageManager": "pnpm@8.3.1",
   "description": "Tasty GUI for Vue controls 🍰",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -55,40 +55,41 @@
     "vue": ">=3.3.4"
   },
   "dependencies": {
-    "@vueuse/components": "^10.4.1"
+    "@unocss/core": "^0.57.1",
+    "@vueuse/components": "^10.5.0"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.17.1",
+    "@histoire/plugin-vue": "^0.17.4",
     "@iconify-json/ic": "^1.1.14",
-    "@release-it/conventional-changelog": "^7.0.0",
+    "@release-it/conventional-changelog": "^7.0.2",
     "@tresjs/eslint-config-vue": "^0.2.1",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@vitest/browser": "^0.34.3",
-    "@vitest/ui": "^0.34.3",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitest/browser": "^0.34.6",
+    "@vitest/ui": "^0.34.6",
     "@vue/test-utils": "^2.4.1",
-    "@vueuse/core": "^10.4.1",
-    "@vueuse/shared": "^10.4.1",
-    "eslint": "^8.48.0",
+    "@vueuse/core": "^10.5.0",
+    "@vueuse/shared": "^10.5.0",
+    "eslint": "^8.52.0",
     "eslint-plugin-vitest-globals": "^1.4.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "histoire": "^0.17.0",
+    "eslint-plugin-vue": "^9.18.1",
+    "histoire": "^0.17.4",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.1",
-    "release-it": "^16.1.5",
+    "release-it": "^16.2.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.2",
     "typescript": "^5.2.2",
-    "unocss": "^0.54.0",
-    "unplugin-vue-components": "^0.25.1",
-    "vite": "^4.4.9",
-    "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "^3.5.3",
-    "vitepress": "1.0.0-rc.10",
-    "vitest": "^0.34.3",
-    "vue": "^3.3.4",
-    "vue-tsc": "^1.8.8",
-    "webdriverio": "^8.15.9"
+    "unocss": "^0.57.1",
+    "unplugin-vue-components": "^0.25.2",
+    "vite": "^4.5.0",
+    "vite-plugin-banner": "^0.7.1",
+    "vite-plugin-dts": "^3.6.3",
+    "vitepress": "1.0.0-rc.24",
+    "vitest": "^0.34.6",
+    "vue": "^3.3.7",
+    "vue-tsc": "^1.8.22",
+    "webdriverio": "^8.21.0"
   }
 }