@tresjs/leches 0.13.0 → 0.14.0-next.0

package/dist/tresleches.umd.cjs

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/leches",
   "type": "module",
-  "version": "0.13.0",
+  "version": "0.14.0-next.0",
   "packageManager": "pnpm@8.3.1",
   "description": "Tasty GUI for Vue controls 🍰",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -32,7 +32,7 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "cd playground && npm run dev",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
     "playground": "cd playground && npm run dev",
@@ -55,12 +55,13 @@
     "vue": ">=3.3.4"
   },
   "dependencies": {
-    "@unocss/core": "^0.57.1",
+    "@unocss/core": "^0.57.2",
     "@vueuse/components": "^10.5.0"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.4",
     "@iconify-json/ic": "^1.1.14",
+    "@iconify/json": "^2.2.138",
     "@release-it/conventional-changelog": "^7.0.2",
     "@tresjs/eslint-config-vue": "^0.2.1",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
@@ -71,7 +72,7 @@
     "@vue/test-utils": "^2.4.1",
     "@vueuse/core": "^10.5.0",
     "@vueuse/shared": "^10.5.0",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-plugin-vitest-globals": "^1.4.0",
     "eslint-plugin-vue": "^9.18.1",
     "histoire": "^0.17.4",
@@ -81,12 +82,12 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.2",
     "typescript": "^5.2.2",
-    "unocss": "^0.57.1",
+    "unocss": "^0.57.2",
     "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",
+    "vitepress": "1.0.0-rc.25",
     "vitest": "^0.34.6",
     "vue": "^3.3.7",
     "vue-tsc": "^1.8.22",