@tresjs/leches 0.7.0 → 0.8.0

package/dist/tresleches.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/leches
- * version: v0.7.0
+ * version: v0.8.0
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(_,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):(_=typeof globalThis<"u"?globalThis:_||self,e(_.tresleches={},_.Vue,_.VueUseCore))})(this,function(_,e,w){"use strict";const tt="";function V(o){return e.getCurrentScope()?(e.onScopeDispose(o),!0):!1}function E(o){return typeof o=="function"?o():e.unref(o)}const v=typeof window<"u",S=()=>{},M=A();function A(){var o;return v&&((o=window==null?void 0:window.navigator)==null?void 0:o.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent)}function R(...o){if(o.length!==1)return e.toRef(...o);const l=o[0];return typeof l=="function"?e.readonly(e.customRef(()=>({get:l,set:S}))):e.ref(l)}function X(o){var l;const t=E(o);return(l=t==null?void 0:t.$el)!=null?l:t}const U=v?window:void 0;function W(...o){let l,t,n,r;if(typeof o[0]=="string"||Array.isArray(o[0])?([t,n,r]=o,l=U):[l,t,n,r]=o,!l)return S;Array.isArray(t)||(t=[t]),Array.isArray(n)||(n=[n]);const a=[],s=()=>{a.forEach(u=>u()),a.length=0},i=(u,c,p,k)=>(u.addEventListener(c,p,k),()=>u.removeEventListener(c,p,k)),f=e.watch(()=>[X(l),E(r)],([u,c])=>{s(),u&&a.push(...t.flatMap(p=>n.map(k=>i(u,p,k,c))))},{immediate:!0,flush:"post"}),b=()=>{f(),s()};return V(b),b}var K=Object.defineProperty,Y=Object.defineProperties,H=Object.getOwnPropertyDescriptors,D=Object.getOwnPropertySymbols,q=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable,N=(o,l,t)=>l in o?K(o,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[l]=t,J=(o,l)=>{for(var t in l||(l={}))q.call(l,t)&&N(o,t,l[t]);if(D)for(var t of D(l))G.call(l,t)&&N(o,t,l[t]);return o},Q=(o,l)=>Y(o,H(l));const Z=e.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(o,{slots:l}){const t=e.ref(),n=e.computed(()=>{var f;return(f=o.handle)!=null?f:t.value}),r=o.storageKey&&w.useStorage(o.storageKey,E(o.initialValue)||{x:0,y:0},w.isClient?o.storageType==="session"?sessionStorage:localStorage:void 0),a=r||o.initialValue||{x:0,y:0},s=(f,b)=>{var u;(u=o.onEnd)==null||u.call(o,f,b),r&&(r.value.x=f.x,r.value.y=f.y)},i=e.reactive(w.useDraggable(t,Q(J({},o),{handle:n,initialValue:a,onEnd:s})));return()=>{if(l.default)return e.h(o.as||"div",{ref:t,style:`touch-action:none;${i.style}`},l.default(i))}}});function I(o){const l=window.getComputedStyle(o);if(l.overflowX==="scroll"||l.overflowY==="scroll"||l.overflowX==="auto"&&o.clientWidth<o.scrollWidth||l.overflowY==="auto"&&o.clientHeight<o.scrollHeight)return!0;{const t=o.parentNode;return!t||t.tagName==="BODY"?!1:I(t)}}function F(o){const l=o||window.event,t=l.target;return I(t)?!1:l.touches.length>1?!0:(l.preventDefault&&l.preventDefault(),!1)}function O(o,l=!1){const t=e.ref(l);let n=null,r;e.watch(R(o),i=>{if(i){const f=i;r=f.style.overflow,t.value&&(f.style.overflow="hidden")}},{immediate:!0});const a=()=>{const i=E(o);!i||t.value||(M&&(n=W(i,"touchmove",f=>{F(f)},{passive:!1})),i.style.overflow="hidden",t.value=!0)},s=()=>{const i=E(o);!i||!t.value||(M&&(n==null||n()),i.style.overflow=r,t.value=!1)};return V(s),e.computed({get(){return t.value},set(i){i?a():s()}})}function ee(){let o=!1;const l=e.ref(!1);return(t,n)=>{if(l.value=n.value,o)return;o=!0;const r=O(t,n.value);e.watch(l,a=>r.value=a)}}ee();const te=Symbol("CONTROLS_CONTEXT_KEY"),m=e.reactive({});function oe(){return e.provide(te,m),m}function C(o){return Object.entries(o).map(([l,t])=>{let n="string",r;const a=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;return!e.isRef(t)&&t.value||e.isRef(t)?(n=typeof t.value,r=t.value):(n=typeof t,r=t),n==="number"&&(t.step||t.max||t.min)&&(n="range"),n==="string"&&a.test(r)&&(n="color"),(r.isVector3||r instanceof Array)&&(n="vector"),!e.isRef(t)&&t.value?{...t,label:t.label||l,value:t.value,type:n,visible:!0}:{label:t.label||l,value:t,type:n,visible:!0}})}function ne(){for(const o in m)delete m[o]}function le(o,l,t){const n=e.ref();if(typeof o=="string")o==="fpsgraph"?(m[o]={label:"fpsgraph",visible:!0,type:"fpsgraph"},n.value=m[o]):(m[o]={label:o,visible:!0,type:"folder",controls:l?C(l):[]},n.value=m[o]);else if(typeof o=="object"&&o.options)m[o.label||"Dropdown"]={...t,label:o.label||"Dropdown",visible:!0,value:o.value,type:"select",ref:o,options:o.options},n.value=m[o.label||"Dropdown"];else if(typeof o=="object"&&typeof l=="string")m[l]={...t,label:l,visible:!0,value:o[l],type:typeof o[l],ref:o},n.value=m[l];else if(e.isReactive(o)){const r=e.toRefs(o),a=C(r);for(const s of a)m[s.label]=s;n.value=a}else{const r=C(o);for(const a of r)m[a.label]=a;n.value=r}return e.onUnmounted(ne),n}const re={class:"flex px-4 justify-between gap-4 items-center mb-2"},ae={class:"text-gray-500 w-1/3"},se=["value","min","max","step"],ce=e.defineComponent({__name:"NumberControl",props:{label:{},control:{}},emits:["change"],setup(o,{emit:l}){const t=o;function n(u){const{target:c}=u;l("change",c.valueAsNumber)}const r=w.useMouse(),a=e.ref(0),s=e.ref(!1),i=u=>{a.value=u.clientX,s.value=!0},f=()=>{s.value=!1},b=u=>Math.floor(Math.abs(u)/10);return e.watch(r.x,u=>{if(s.value){const c=u-a.value,p=b(c);c>0?l("change",t.control.value+1+p):c<0&&l("change",t.control.value-1+p),t.control.min!==void 0&&t.control.value<t.control.min&&l("change",t.control.min),t.control.max!==void 0&&t.control.value>t.control.max&&l("change",t.control.max),a.value=u}}),(u,c)=>(e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("label",ae,e.toDisplayString(u.label),1),e.createElementVNode("input",{value:u.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":s.value}]),type:"number",min:u.control.min,max:u.control.max,step:u.control.step,onInput:n,onMousedown:i,onMouseup:f},null,42,se)]))}}),ie={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},ue={class:"text-gray-500 w-1/3"},fe=["value"],pe=e.defineComponent({__name:"TextControl",props:{label:{},control:{}},emits:["change"],setup(o,{emit:l}){function t(n){l("change",n)}return(n,r)=>(e.openBlock(),e.createElementBlock("div",ie,[e.createElementVNode("label",ue,e.toDisplayString(n.label),1),e.createElementVNode("input",{value:n.control.value,type:"string",class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",onChange:t},null,40,fe)]))}}),de={class:"flex px-4 justify-start gap-2 items-center mb-2 min-h-32px"},me={class:"text-gray-500 w-1/3"},ge=["id","checked"],be=["for"],ye={class:"i-ic:baseline-check text-light"},he=e.defineComponent({__name:"BooleanControl",props:{label:{},control:{}},emits:["change"],setup(o,{emit:l}){function t(n){const{target:r}=n;l("change",r.checked)}return(n,r)=>(e.openBlock(),e.createElementBlock("div",de,[e.createElementVNode("label",me,e.toDisplayString(n.label),1),e.createElementVNode("input",{id:n.control.label,checked:n.control.value,class:"hidden",type:"checkbox",onInput:t},null,40,ge),e.createElementVNode("label",{for:n.control.label,class:"inline-flex items-center cursor-pointer"},[e.createElementVNode("span",{class:e.normalizeClass([{"bg-dark-500":n.control.value,"bg-gray-200":!n.control.value},"w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"])},[e.withDirectives(e.createElementVNode("i",ye,null,512),[[e.vShow,n.control.value]])],2)],8,be)]))}}),_e={class:"px-4 relative flex justify-between gap-4 items-center mb-2"},we=["value","min","max","step"],ke=["value","min","max","step"],xe=e.defineComponent({__name:"SliderControl",props:{label:{},control:{}},emits:["change"],setup(o,{emit:l}){const t=o;function n(c){const{target:p}=c;l("change",p.valueAsNumber)}const r=e.computed(()=>({backgroundImage:`linear-gradient(to right, #333 0% ${100*(t.control.value-(t.control.min||0))/((t.control.max||100)-(t.control.min||0))}%, #e2e2e2 0%)`})),a=w.useMouse(),s=e.ref(0),i=e.ref(!1),f=c=>{s.value=c.clientX,i.value=!0},b=()=>{i.value=!1},u=c=>Math.floor(Math.abs(c)/10);return e.watch(a.x,c=>{if(i.value){const p=c-s.value,k=u(p);p>0?l("change",t.control.value+1+k):p<0&&l("change",t.control.value-1+k),t.control.min!==void 0&&t.control.value<t.control.min&&l("change",t.control.min),t.control.max!==void 0&&t.control.value>t.control.max&&l("change",t.control.max),s.value=c}}),(c,p)=>(e.openBlock(),e.createElementBlock("div",_e,[e.createElementVNode("label",{class:e.normalizeClass(["text-gray-500 w-1/3",{"flex justify-between items-center":c.control.icon}])},[e.createTextVNode(e.toDisplayString(c.label)+" ",1),e.createElementVNode("i",{class:e.normalizeClass(`i-${c.control.icon}`)},null,2)],2),e.createElementVNode("input",{value:c.control.value,class:"w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",style:e.normalizeStyle(r.value),type:"range",min:c.control.min,max:c.control.max,step:c.control.step,onInput:n},null,44,we),e.createElementVNode("input",{value:c.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":i.value}]),type:"number",min:c.control.min,max:c.control.max,step:c.control.step,onInput:n,onMousedown:f,onMouseup:b},null,42,ke)]))}}),ot="",Ee=((o,l)=>{const t=o.__vccOpts||o;for(const[n,r]of l)t[n]=r;return t})(xe,[["__scopeId","data-v-743fd350"]]),Be={class:"flex px-4 justify-between gap-4 items-center mb-2"},Ce={class:"text-gray-500 w-1/3"},$e=["value"],Ve=["value"],ve=e.defineComponent({__name:"ColorControl",props:{label:{},control:{}},emits:["change"],setup(o,{emit:l}){function t(n){const{target:r}=n;l("change",r.value)}return(n,r)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("label",Ce,e.toDisplayString(n.label),1),e.createElementVNode("input",{value:n.control.value,type:"color",onInput:t},null,40,$e),e.createElementVNode("input",{value:n.control.value,class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",type:"text",onInput:t},null,40,Ve)]))}}),lt="";function Se(o){if(typeof o=="number")return[o,o,o];if(T(o)){const{x:l,y:t,z:n}=o;return[l,t,n]}return o}function Me(o){return o&&typeof o.x=="number"&&typeof o.y=="number"&&typeof o.z>"u"}function T(o){return o&&typeof o.x=="number"&&typeof o.y=="number"&&typeof o.z=="number"}const De={class:"flex px-4 justify-between gap-2 items-center mb-2"},Ne={class:"text-gray-500 w-1/3"},Ie={class:"w-2/3 flex justify-between gap-1"},Te={key:0,class:"font-bold px-0.5 py-1 text-0.65rem text-gray-300"},je=["value","onInput","onMousedown","onMouseup"],Pe=e.defineComponent({__name:"VectorControl",props:{label:{},control:{}},emits:["change"],setup(o,{emit:l}){const t=o,n=w.useMouse(),r=e.ref(0),a=e.ref(!1),s=e.ref(0),i=(g,y)=>{s.value=y,r.value=g.clientX,a.value=!0},f=(g,y)=>{s.value=y,a.value=!1},b=g=>Math.floor(Math.abs(g)/10),u=e.computed(()=>Se(t.control.value)),c=e.computed(()=>Object.keys(t.control.value)),p=e.computed(()=>Me(t.control.value)||T(t.control.value));function k(g,y){const{value:x}=t.control,{target:d}=g;s.value=y,x[p.value?c.value[s.value]:s.value]=parseInt(d.value,10),l("change",x)}return e.watch(n.x,g=>{if(a.value){const y=g-r.value,x=b(y),{value:d}=t.control,h=p.value?c.value[s.value]:s.value;y>0?d[h]+=1+x:y<0&&(d[h]-=1+x),t.control.min!==void 0&&d<t.control.min&&(d[h]=t.control.min),t.control.max!==void 0&&d>t.control.max&&(d[h]=t.control.max),l("change",d),r.value=g}}),(g,y)=>(e.openBlock(),e.createElementBlock("div",De,[e.createElementVNode("label",Ne,e.toDisplayString(g.label),1),e.createElementVNode("div",Ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,(x,d)=>(e.openBlock(),e.createElementBlock("div",{key:g.label+d,class:"flex items-center w-1/3 bg-gray-100 rounded"},[c.value[d]&&p.value?(e.openBlock(),e.createElementBlock("span",Te,e.toDisplayString(c.value[d]),1)):e.createCommentVNode("",!0),e.createElementVNode("input",{type:"text",class:e.normalizeClass(["w-full pl-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":a.value}]),value:u.value[d].toFixed(2),onInput:h=>k(h,d),onMousedown:h=>i(h,d),onMouseup:h=>f(h,d)},null,42,je)]))),128))])]))}}),ze={class:"mb-4"},Le={class:"bg-white rounded-b pt-4"},Ae=e.defineComponent({__name:"Folder",props:{control:{}},setup(o){function l(r,a){a.value=r}const t=e.ref(!1),n=()=>{t.value=!t.value};return(r,a)=>(e.openBlock(),e.createElementBlock("div",ze,[e.createElementVNode("button",{class:"flex items-center justify-between w-full p-4 bg-gray-100 border-none text-gray-400 font-bold text-xs focus:outline-none font-sans cursor-pointer",onClick:n},[e.createElementVNode("span",null,e.toDisplayString(r.control.label),1),e.createElementVNode("i",{class:e.normalizeClass(t.value?"i-ic:baseline-keyboard-arrow-up":"i-ic:baseline-keyboard-arrow-down")},null,2)]),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",Le,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.control.controls,s=>(e.openBlock(),e.createBlock(L,{key:s.label,control:s,onChange:i=>l(i,s)},null,8,["control","onChange"]))),128))],512),[[e.vShow,t.value]])]),_:1})]))}}),Re={class:"flex px-4 justify-between gap-4 items-center mb-2"},Xe={class:"text-gray-500 w-1/3"},Ue={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"},We={class:"absolute bottom-0.5 right-0.5 font-sans text-xs"},Ke=["points"],j=160,$=40,B=2,P=100,z=20,Ye=e.defineComponent({__name:"FPSGraph",props:{label:{},control:{}},setup(o){const l=w.useFps({every:P}),t=e.ref(""),n=e.ref([]),r=e.ref(j/B);let a=performance.now();return w.useRafFn(({timestamp:s})=>{s-a>=P&&(a=s,n.value.push(l.value),n.value.length>r.value&&n.value.shift(),t.value=n.value.map((i,f)=>`${f*B},${$+z-B/2-i*($+z-B)/120}`).join(" "))}),(s,i)=>(e.openBlock(),e.createElementBlock("div",Re,[e.createElementVNode("label",Xe,e.toDisplayString(s.label),1),e.createElementVNode("div",Ue,[e.createElementVNode("div",We,e.toDisplayString(Math.round(e.unref(l)))+" FPS",1),(e.openBlock(),e.createElementBlock("svg",{width:j,height:$,xmlns:"http://www.w3.org/2000/svg",class:"bg-gray-100"},[e.createElementVNode("polyline",{points:t.value,fill:"none",stroke:"lightgray","stroke-width":B,"stroke-linecap":"round","stroke-linejoin":"round"},null,8,Ke)]))])]))}}),He={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},qe={class:"text-gray-500 w-1/3"},Ge=["value"],Je=["value"],Qe=e.defineComponent({__name:"SelectControl",props:{label:{},control:{}},emits:["change"],setup(o,{emit:l}){function t(n){l("change",n.target.value)}return(n,r)=>(e.openBlock(),e.createElementBlock("div",He,[e.createElementVNode("label",qe,e.toDisplayString(n.label),1),e.createElementVNode("select",{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:t},[(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,Je))),128))],40,Ge)]))}}),L=e.defineComponent({__name:"ControlInput",props:{control:{}},emits:["change"],setup(o,{emit:l}){function t(n){l("change",n)}return(n,r)=>n.control.visible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[n.control.type==="color"?(e.openBlock(),e.createBlock(ve,{key:0,label:n.control.label,control:n.control,onChange:t},null,8,["label","control"])):n.control.type==="vector"?(e.openBlock(),e.createBlock(Pe,{key:1,label:n.control.label,control:n.control,onChange:t},null,8,["label","control"])):n.control.type==="boolean"?(e.openBlock(),e.createBlock(he,{key:2,label:n.control.label,control:n.control,onChange:t},null,8,["label","control"])):n.control.type==="fpsgraph"?(e.openBlock(),e.createBlock(Ye,{key:3,label:n.control.label,control:n.control},null,8,["label","control"])):n.control.type==="folder"?(e.openBlock(),e.createBlock(Ae,{key:4,label:n.control.label,control:n.control},null,8,["label","control"])):n.control.type==="number"?(e.openBlock(),e.createBlock(ce,{key:5,label:n.control.label,control:n.control,onChange:t},null,8,["label","control"])):n.control.type==="range"?(e.openBlock(),e.createBlock(Ee,{key:6,label:n.control.label,control:n.control,onChange:t},null,8,["label","control"])):n.control.type==="select"?(e.openBlock(),e.createBlock(Qe,{key:7,label:n.control.label,control:n.control,onChange:t},null,8,["label","control"])):(e.openBlock(),e.createBlock(pe,{key:8,label:n.control.label,control:n.control,onChange:t},null,8,["label","control"]))],64)):e.createCommentVNode("",!0)}}),Ze={class:"bg-white shadow-xl rounded border-4 border-solid border-black"},Fe=[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)],Oe=280,et=e.defineComponent({__name:"TresLeches",setup(o){const{width:l}=w.useWindowSize(),t=e.ref(null),n=oe();function r(a,s){s.ref&&(s.ref[s.label]=a),s.value=a}return(a,s)=>(e.openBlock(),e.createBlock(e.unref(Z),{"initial-value":{x:e.unref(l)-Oe-20,y:10},class:e.normalizeClass(["absolute select-none z-24 w-280px font-sans text-xs",a.$attrs.class]),handle:t.value},{default:e.withCtx(()=>[e.createElementVNode("div",Ze,[e.createElementVNode("header",{ref_key:"handle",ref:t,class:"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"},Fe,512),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(n),i=>(e.openBlock(),e.createBlock(L,{key:i.label,control:i,onChange:f=>r(f,i)},null,8,["control","onChange"]))),128))])]),_:1},8,["initial-value","class","handle"]))}});_.TresLeches=et,_.useControls=le,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})});
+(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 Ke="";function E(n){return typeof n=="function"?n():e.unref(n)}const M=typeof window<"u"&&typeof document<"u";function O(n,l={}){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(r){var i;if((i=E(l.replaceRef))!=null?i:!0)if(Array.isArray(n.value)){const p=[...n.value];p[t]=r,n.value=p}else{const p={...n.value,[t]:r};Object.setPrototypeOf(p,Object.getPrototypeOf(n.value)),n.value=p}else n.value[t]=r}}));return o}const X=M?window:void 0;function P(n,l={}){const{pointerTypes:o,preventDefault:t,stopPropagation:r,exact:i,onMove:c,onEnd:p,onStart:u,initialValue:f,axis:a="both",draggingElement:s=X,handle:d=n}=l,{width:k}=x.useWindowSize();let y=k.value;e.watch(k,()=>{const g=k.value-y;m.value.x+=g,y=k.value});const m=e.ref(E(f)??{x:0,y:0}),b=e.ref(),h=g=>o?o.includes(g.pointerType):!0,_=g=>{E(t)&&g.preventDefault(),E(r)&&g.stopPropagation()},Pe=g=>{if(!h(g)||E(i)&&g.target!==E(n))return;const V=E(n).getBoundingClientRect(),$={x:g.clientX-V.left,y:g.clientY-V.top};(u==null?void 0:u($,g))!==!1&&(b.value=$,_(g))},We=g=>{if(!h(g)||!b.value)return;let{x:V,y:$}=m.value;(a==="x"||a==="both")&&(V=g.clientX-b.value.x),(a==="y"||a==="both")&&($=g.clientY-b.value.y),m.value={x:V,y:$},c==null||c(m.value,g),_(g)},Re=g=>{h(g)&&b.value&&(b.value=void 0,p==null||p(m.value,g),_(g))};if(M){const g={capture:l.capture??!0};x.useEventListener(d,"pointerdown",Pe,g),x.useEventListener(s,"pointermove",We,g),x.useEventListener(s,"pointerup",Re,g)}return{...O(m),position:m,isDragging:e.computed(()=>!!b.value),style:e.computed(()=>`left:${m.value.x}px;top:${m.value.y}px;`)}}const W=e.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(n,{slots:l}){const o=e.ref(),t=e.computed(()=>n.handle??o.value),r=n.storageKey&&x.useStorage(n.storageKey,E(n.initialValue)||{x:0,y:0},x.isClient?n.storageType==="session"?sessionStorage:localStorage:void 0),i=r||n.initialValue||{x:0,y:0},c=(u,f)=>{var a;(a=n.onEnd)==null||a.call(n,u,f),r&&(r.value.x=u.x,r.value.y=u.y)},p=e.reactive(P(o,{...n,handle:t,initialValue:i,onEnd:c}));return()=>{if(l.default)return e.h(n.as||"div",{ref:o,style:`touch-action:none;${p.style}`},l.default(p))}}}),R={class:"flex px-4 justify-between gap-4 items-center mb-2"},K={class:"text-gray-500 w-1/3"},j=["value","min","max","step"],Y=e.defineComponent({__name:"NumberControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:l}){const o=n;function t(a){const{target:s}=a;l("change",s.valueAsNumber)}const r=x.useMouse(),i=e.ref(0),c=e.ref(!1),p=a=>{i.value=a.clientX,c.value=!0},u=()=>{c.value=!1},f=a=>Math.floor(Math.abs(a)/10);return e.watch(r.x,a=>{if(c.value){const s=a-i.value,d=f(s);s>0?l("change",o.control.value+1+d):s<0&&l("change",o.control.value-1+d),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=a}}),(a,s)=>(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("label",K,e.toDisplayString(a.label),1),e.createElementVNode("input",{value:a.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:a.control.min,max:a.control.max,step:a.control.step,onInput:t,onMousedown:p,onMouseup:u},null,42,j)]))}}),q={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},H={class:"text-gray-500 w-1/3"},G=["value"],J=e.defineComponent({__name:"TextControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:l}){function o(t){const{target:r}=t;l("change",r.value)}return(t,r)=>(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("label",H,e.toDisplayString(t.label),1),e.createElementVNode("input",{value:t.control.value,type:"text",class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",onChange:o},null,40,G)]))}}),Q={class:"flex px-4 justify-start gap-2 items-center mb-2 min-h-32px"},Z={class:"text-gray-500 w-1/3"},v=["id","checked"],ee=["for"],te={class:"i-ic:baseline-check text-light"},ne=e.defineComponent({__name:"BooleanControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:l}){function o(t){const{target:r}=t;l("change",r.checked)}return(t,r)=>(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("label",Z,e.toDisplayString(t.label),1),e.createElementVNode("input",{id:t.control.label,checked:t.control.value,class:"hidden",type:"checkbox",onInput:o},null,40,v),e.createElementVNode("label",{for:t.control.label,class:"inline-flex items-center cursor-pointer"},[e.createElementVNode("span",{class:e.normalizeClass([{"bg-dark-500":t.control.value,"bg-gray-200":!t.control.value},"w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"])},[e.withDirectives(e.createElementVNode("i",te,null,512),[[e.vShow,t.control.value]])],2)],8,ee)]))}}),oe={class:"px-4 relative flex justify-between gap-4 items-center mb-2"},le=["value","min","max","step"],re=["value","min","max","step"],ae=e.defineComponent({__name:"SliderControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:l}){const o=n;function t(s){const{target:d}=s;l("change",d.valueAsNumber)}const r=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%)`})),i=x.useMouse(),c=e.ref(0),p=e.ref(!1),u=s=>{c.value=s.clientX,p.value=!0},f=()=>{p.value=!1},a=s=>Math.floor(Math.abs(s)/10);return e.watch(i.x,s=>{if(p.value){const d=s-c.value,k=a(d);d>0?l("change",o.control.value+1+k):d<0&&l("change",o.control.value-1+k),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=s}}),(s,d)=>(e.openBlock(),e.createElementBlock("div",oe,[e.createElementVNode("label",{class:e.normalizeClass(["text-gray-500 w-1/3",{"flex justify-between items-center":s.control.icon}])},[e.createTextVNode(e.toDisplayString(s.label)+" ",1),e.createElementVNode("i",{class:e.normalizeClass(`i-${s.control.icon}`)},null,2)],2),e.createElementVNode("input",{value:s.control.value,class:"w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",style:e.normalizeStyle(r.value),type:"range",min:s.control.min,max:s.control.max,step:s.control.step,onInput:t},null,44,le),e.createElementVNode("input",{value:s.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":p.value}]),type:"number",min:s.control.min,max:s.control.max,step:s.control.step,onInput:t,onMousedown:u,onMouseup:f},null,42,re)]))}}),je="",se=((n,l)=>{const o=n.__vccOpts||n;for(const[t,r]of l)o[t]=r;return o})(ae,[["__scopeId","data-v-743fd350"]]),ce={class:"flex px-4 justify-between gap-4 items-center mb-2"},ie={class:"text-gray-500 w-1/3"},de=["value"],pe=["value"],ue=e.defineComponent({__name:"ColorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:l}){function o(t){const{target:r}=t;l("change",r.value)}return(t,r)=>(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("label",ie,e.toDisplayString(t.label),1),e.createElementVNode("input",{value:t.control.value,type:"color",onInput:o},null,40,de),e.createElementVNode("input",{value:t.control.value,class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",type:"text",onInput:o},null,40,pe)]))}}),qe="";function fe(n){if(typeof n=="number")return[n,n,n];if(T(n)){const{x:l,y:o,z:t}=n;return[l,o,t]}return n}function me(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z>"u"}function T(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z=="number"}const ge={class:"flex px-4 justify-between gap-1 items-center mb-2"},he={class:"text-gray-500 w-1/3"},ye={class:"w-2/3 flex justify-between gap-0.5"},be={key:0,class:"font-bold px-1 py-1 text-0.65rem text-gray-300"},_e=["value","onInput","onMousedown","onMouseup"],ke=e.defineComponent({__name:"VectorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:l}){const o=n,t=x.useMouse(),r=e.ref(0),i=e.ref(!1),c=e.ref(0),p=(y,m)=>{c.value=m,r.value=y.clientX,i.value=!0},u=(y,m)=>{c.value=m,i.value=!1},f=y=>Math.floor(Math.abs(y)/10),a=e.computed(()=>fe(o.control.value)),s=e.ref(["x","y","z"]),d=e.computed(()=>me(o.control.value)||T(o.control.value));function k(y,m){const{value:b}=o.control,{target:h}=y;c.value=m,b[d.value?s.value[c.value]:c.value]=parseInt(h.value,10),l("change",b)}return e.watch(t.x,y=>{if(i.value){const m=y-r.value,b=f(m),{value:h}=o.control,_=d.value?s.value[c.value]:c.value;m>0?h[_]+=.1+b:m<0&&(h[_]-=.1+b),o.control.min!==void 0&&h<o.control.min&&(h[_]=o.control.min),o.control.max!==void 0&&h>o.control.max&&(h[_]=o.control.max),l("change",h),r.value=y}}),(y,m)=>(e.openBlock(),e.createElementBlock("div",ge,[e.createElementVNode("label",he,e.toDisplayString(y.label),1),e.createElementVNode("div",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(b,h)=>(e.openBlock(),e.createElementBlock("div",{key:y.label+h,class:"flex items-center w-1/3 bg-gray-100 rounded"},[s.value[h]&&d.value?(e.openBlock(),e.createElementBlock("span",be,e.toDisplayString(s.value[h]),1)):e.createCommentVNode("",!0),e.createElementVNode("input",{type:"text",class:e.normalizeClass(["w-full pl-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":i.value}]),value:a.value[h].toFixed(2),onInput:_=>k(_,h),onMousedown:_=>p(_,h),onMouseup:_=>u(_,h)},null,42,_e)]))),128))])]))}}),xe={class:"flex px-4 justify-between gap-4 items-center mb-2"},we={class:"text-gray-500 w-1/3"},Ee={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"},Ce={class:"absolute bottom-0.5 right-0.5 font-sans text-xs"},Be=["points"],F=160,S=40,B=2,I=100,z=20,Ve=e.defineComponent({__name:"FPSGraph",props:{label:{},control:{}},setup(n){const l=x.useFps({every:I}),o=e.ref(""),t=e.ref([]),r=e.ref(F/B);let i=performance.now();return x.useRafFn(({timestamp:c})=>{c-i>=I&&(i=c,t.value.push(l.value),t.value.length>r.value&&t.value.shift(),o.value=t.value.map((p,u)=>`${u*B},${S+z-B/2-p*(S+z-B)/120}`).join(" "))}),(c,p)=>(e.openBlock(),e.createElementBlock("div",xe,[e.createElementVNode("label",we,e.toDisplayString(c.label),1),e.createElementVNode("div",Ee,[e.createElementVNode("div",Ce,e.toDisplayString(Math.round(e.unref(l)))+" FPS",1),(e.openBlock(),e.createElementBlock("svg",{width:F,height:S,xmlns:"http://www.w3.org/2000/svg",class:"bg-gray-100"},[e.createElementVNode("polyline",{points:o.value,fill:"none",stroke:"lightgray","stroke-width":B,"stroke-linecap":"round","stroke-linejoin":"round"},null,8,Be)]))])]))}}),$e={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},Ne={class:"text-gray-500 w-1/3"},Se=["value"],De=["value"],Me=e.defineComponent({__name:"SelectControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:l}){function o(t){l("change",t.target.value)}return(t,r)=>(e.openBlock(),e.createElementBlock("div",$e,[e.createElementVNode("label",Ne,e.toDisplayString(t.label),1),e.createElementVNode("select",{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,i=>(e.openBlock(),e.createElementBlock("option",{key:i.value,value:i.value},e.toDisplayString(i.text),9,De))),128))],40,Se)]))}}),A=e.defineComponent({__name:"ControlInput",props:{control:{}},emits:["change"],setup(n,{emit:l}){function o(t){l("change",t)}return(t,r)=>t.control.visible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.control.type==="color"?(e.openBlock(),e.createBlock(ue,{key:0,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="select"?(e.openBlock(),e.createBlock(Me,{key:1,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="vector"?(e.openBlock(),e.createBlock(ke,{key:2,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="boolean"?(e.openBlock(),e.createBlock(ne,{key:3,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="fpsgraph"?(e.openBlock(),e.createBlock(Ve,{key:4,label:t.control.label,control:t.control},null,8,["label","control"])):t.control.type==="number"?(e.openBlock(),e.createBlock(Y,{key:5,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="range"?(e.openBlock(),e.createBlock(se,{key:6,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):(e.openBlock(),e.createBlock(J,{key:7,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"]))],64)):e.createCommentVNode("",!0)}}),Te={class:"mb-4"},Fe={class:"bg-white rounded-b pt-4"},Ie=e.defineComponent({__name:"Folder",props:{controls:{},label:{}},setup(n){function l(r,i){i.value=r}const o=e.ref(!1),t=()=>{o.value=!o.value};return(r,i)=>(e.openBlock(),e.createElementBlock("div",Te,[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 focus:outline-none font-sans cursor-pointer",onClick:t},[e.createElementVNode("span",null,e.toDisplayString(r.label),1),e.createElementVNode("i",{class:e.normalizeClass(o.value?"i-ic:baseline-keyboard-arrow-up":"i-ic:baseline-keyboard-arrow-down")},null,2)]),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",Fe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.controls,c=>(e.openBlock(),e.createBlock(A,{key:c.label,control:c,onChange:p=>l(p,c)},null,8,["control","onChange"]))),128))],512),[[e.vShow,o.value]])]),_:1})]))}}),ze=Symbol("CONTROLS_CONTEXT_KEY"),L="default";function U(n=L){return e.provide(ze,C),C[n]}const C=e.reactive({}),D=n=>{const l=/^#([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"&&l.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)&&n.options.every(o=>"text"in o&&"value"in o)?"select":"unknown"},N=(n,l,o,t)=>{const r={label:e.ref(n),name:e.ref(n),type:e.ref(o),value:e.ref(l),visible:e.ref(!0),[n]:e.ref(l)};return t&&(r.folder=e.ref(t)),r},Ae=(n,l,o)=>{const t=[],r=typeof n=="string"?n:null,i=r?l:n,c=r&&r!=="fpsgraph"?o:l,p=(c==null?void 0:c.uuid)||L;if(C[p]||(C[p]=e.reactive({})),n==="fpsgraph"){const f=N("fpsgraph",null,"fpsgraph",null);return C[p].fpsgraph=f,t.push(f),t.length===1?t[0]:t}const u=C[p];for(const f in i){let a=i[f];if(typeof a=="object"&&!e.isRef(a)&&!Array.isArray(a)&&a.value!==void 0){const d=a,k=e.isRef(d.value)?d.value:e.ref(d.value),y=D(d),m=N(f,k,y,r);y==="select"&&(m.options=e.ref(d.options)),y==="range"&&(m.min=e.ref(d.min),m.max=e.ref(d.max),m.step=e.ref(d.step)),u[f]=m,t.push(m);continue}if(e.isRef(a)){const d=N(f,a,D(a.value),r);u[f]=d,t.push(d);continue}else if(typeof a=="object"&&!Array.isArray(a)){const d=e.toRefs(a);d[f]&&(a=d[f])}const s=N(f,a,D(a),r);u[f]=s,t.push(s)}return t.length===1?t[0]:t},Le={class:"bg-white shadow-xl rounded border-4 border-solid border-black"},Ue=[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)],Oe=280,Xe=e.defineComponent({__name:"TresLeches",props:{uuid:{}},setup(n){const l=n,{uuid:o}=e.toRefs(l),{width:t}=x.useWindowSize(),r=e.ref(null),i=U(o==null?void 0:o.value);function c(u,f){i[e.unref(u)].value=f}const p=e.computed(()=>{const u={};for(const f in i){const a=i[f],s=a.folder||"default";u[s]||(u[s]=[]),u[s].push(a)}return u});return(u,f)=>(e.openBlock(),e.createBlock(e.unref(W),{id:e.unref(o),"initial-value":{x:e.unref(t)-Oe-40,y:10},class:e.normalizeClass(["absolute select-none z-24 w-280px font-sans text-xs",u.$attrs.class]),handle:r.value},{default:e.withCtx(()=>[e.createElementVNode("div",Le,[e.createElementVNode("header",{ref_key:"handle",ref:r,class:"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"},Ue,512),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(a,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:s},[s!=="default"?(e.openBlock(),e.createBlock(Ie,{key:0,label:s,controls:a},null,8,["label","controls"])):e.createCommentVNode("",!0),s==="default"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(a,d=>(e.openBlock(),e.createBlock(A,{key:d.label,control:d,onChange:k=>c(d.label,k)},null,8,["control","onChange"]))),128)):e.createCommentVNode("",!0)],64))),128))])]),_:1},8,["id","initial-value","class","handle"]))}});w.TresLeches=Xe,w.useControls=Ae,w.useControlsProvider=U,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});

package/dist/utils/is.d.ts

@@ -8,3 +8,9 @@ export declare function isVector3(obj: {
     y: number;
     z: number;
 }): boolean;
+export declare function isEuler(obj: {
+    x: number;
+    y: number;
+    z: number;
+    isEuler?: boolean;
+}): boolean | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/leches",
   "description": "Tasty GUI for Vue controls 🍰",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "packageManager": "pnpm@8.3.1",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -39,48 +39,58 @@
     "test": "vitest",
     "test:ci": "vitest run",
     "test:ui": "vitest --ui",
+    "test:browser": "BROWSER_TEST=true HEADLESS=true vitest",
+    "test:browser:ui": "BROWSER_TEST=true vitest",
     "release": "release-it",
     "coverage": "vitest run --coverage",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
-    "story:preview": "histoire preview"
+    "story:preview": "histoire preview",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "peerDependencies": {
     "vue": ">=3.3"
   },
   "dependencies": {
-    "@vueuse/components": "^10.3.0"
+    "@vueuse/components": "^10.4.1"
   },
   "devDependencies": {
     "@alvarosabu/prettier-config": "^1.3.0",
-    "@histoire/plugin-vue": "^0.16.1",
+    "@histoire/plugin-vue": "^0.17.1",
     "@iconify-json/ic": "^1.1.14",
     "@release-it/conventional-changelog": "^7.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitest/ui": "^0.34.1",
-    "@vueuse/core": "^10.3.0",
-    "@vueuse/shared": "^10.3.0",
-    "eslint": "^8.47.0",
+    "@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",
+    "@vue/test-utils": "^2.4.1",
+    "@vueuse/core": "^10.4.1",
+    "@vueuse/shared": "^10.4.1",
+    "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-vitest-globals": "^1.4.0",
     "eslint-plugin-vue": "^9.17.0",
-    "histoire": "^0.16.2",
+    "histoire": "^0.17.0",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.1",
-    "prettier": "^3.0.1",
-    "release-it": "^16.1.4",
+    "prettier": "^3.0.2",
+    "release-it": "^16.1.5",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.2",
-    "typescript": "^5.1.6",
-    "unocss": "^0.55.0",
+    "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.2",
-    "vitest": "^0.34.1",
+    "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"
+    "vue-tsc": "^1.8.8",
+    "webdriverio": "^8.15.9"
   }
 }