@tresjs/leches 0.9.0 → 0.9.1

package/dist/style.css

@@ -1,6 +1,6 @@
 /**
  * name: @tresjs/leches
- * version: v0.9.0
+ * version: v0.9.1
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)

package/dist/tresleches.js

@@ -1,11 +1,11 @@
 /**
  * name: @tresjs/leches
- * version: v0.9.0
+ * version: v0.9.1
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { unref as T, isRef as P, toRefs as E, customRef as ae, ref as h, watch as W, computed as D, defineComponent as M, reactive as U, h as ce, provide as ie, isReactive as ue, openBlock as f, createElementBlock as m, createElementVNode as c, toDisplayString as k, normalizeClass as S, withDirectives as q, vShow as J, createTextVNode as pe, normalizeStyle as fe, Fragment as A, renderList as X, createCommentVNode as N, createBlock as C, createVNode as de, Transition as ve, withCtx as Q } from "vue";
+import { unref as T, isRef as P, toRefs as E, customRef as ae, ref as h, watch as W, computed as D, defineComponent as M, reactive as U, h as ce, provide as ie, isReactive as ue, openBlock as d, createElementBlock as m, createElementVNode as c, toDisplayString as k, normalizeClass as S, withDirectives as q, vShow as J, createTextVNode as pe, normalizeStyle as fe, Fragment as A, renderList as X, createCommentVNode as N, createBlock as C, createVNode as de, Transition as ve, withCtx as Q } from "vue";
 import { useWindowSize as Z, useEventListener as B, useStorage as ge, isClient as he, useMouse as j, useFps as ye, useRafFn as be } from "@vueuse/core";
 function I(e) {
   return typeof e == "function" ? e() : T(e);
@@ -45,19 +45,19 @@ function xe(e, l = {}) {
     exact: r,
     onMove: a,
     onEnd: p,
-    onStart: d,
+    onStart: v,
     initialValue: _,
     axis: i = "both",
     draggingElement: o = _e,
     handle: u = e
   } = l, { width: w } = Z();
-  let v = w.value;
+  let f = w.value;
   const b = h(
     I(_) ?? { x: 0, y: 0 }
   );
   W(w, () => {
-    const y = w.value - v;
-    b.value.x += y, v = w.value;
+    const y = w.value - f;
+    b.value.x += y, f = w.value;
   });
   const x = h(), g = (y) => n ? n.includes(y.pointerType) : !0, $ = (y) => {
     I(t) && y.preventDefault(), I(s) && y.stopPropagation();
@@ -68,7 +68,7 @@ function xe(e, l = {}) {
       x: y.clientX - V.left,
       y: y.clientY - V.top
     };
-    (d == null ? void 0 : d(z, y)) !== !1 && (x.value = z, $(y));
+    (v == null ? void 0 : v(z, y)) !== !1 && (x.value = z, $(y));
   }, se = (y) => {
     if (!g(y) || !x.value)
       return;
@@ -119,9 +119,9 @@ const we = /* @__PURE__ */ M({
       ...e,
       handle: t,
       initialValue: r,
-      onEnd: (d, _) => {
+      onEnd: (v, _) => {
         var i;
-        (i = e.onEnd) == null || i.call(e, d, _), s && (s.value.x = d.x, s.value.y = d.y);
+        (i = e.onEnd) == null || i.call(e, v, _), s && (s.value.x = v.x, s.value.y = v.y);
       }
     }));
     return () => {
@@ -152,24 +152,24 @@ const K = (e) => {
     const o = L("fpsgraph", null, "fpsgraph", null);
     return F[p].fpsgraph = o, t.fpsgraph = o, E(U(t));
   }
-  const d = F[p], _ = ue(r), i = _ ? E(r) : {};
+  const v = F[p], _ = ue(r), i = _ ? E(r) : {};
   for (const o in r) {
     let u = r[o];
     if (_ && i[o] && (u = i[o]), typeof u == "object" && !P(u) && !Array.isArray(u) && u.value !== void 0) {
-      const v = u, b = P(v.value) ? v.value : h(v.value), x = K(v), g = L(o, b, x, s);
-      x === "select" && (g.options = h(v.options)), x === "range" && (g.min = h(v.min), g.max = h(v.max), g.step = h(v.step)), d[o] = g, t[o] = g;
+      const f = u, b = P(f.value) ? f.value : h(f.value), x = K(f), g = L(o, b, x, s);
+      x === "select" && (g.options = h(f.options)), x === "range" && (g.min = h(f.min || 0), g.max = h(f.max || 1), g.step = h(f.step || 0.1)), g.label.value = f.label || o, g.visible.value = f.visible !== void 0 ? f.visible : !0, v[o] = g, t[o] = g;
       continue;
     }
     if (P(u)) {
-      const v = L(o, u, K(u.value), s);
-      d[o] = v, t[o] = v;
+      const f = L(o, u, K(u.value), s);
+      v[o] = f, t[o] = f;
       continue;
     } else if (typeof u == "object" && !Array.isArray(u)) {
-      const v = E(u);
-      v[o] && (u = v[o]);
+      const f = E(u);
+      f[o] && (u = f[o]);
     }
     const w = L(o, u, K(u), s);
-    d[o] = w, t[o] = w;
+    v[o] = w, t[o] = w;
   }
   return Object.keys(t).length > 1 ? E(U(t)) : Object.values(t)[0];
 }, ke = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Me = { class: "text-gray-500 w-1/3" }, Te = ["value", "min", "max", "step"], Ie = /* @__PURE__ */ M({
@@ -187,7 +187,7 @@ const K = (e) => {
     }
     const s = j(), r = h(0), a = h(!1), p = (i) => {
       r.value = i.clientX, a.value = !0;
-    }, d = () => {
+    }, v = () => {
       a.value = !1;
     }, _ = (i) => Math.floor(Math.abs(i) / 10);
     return W(s.x, (i) => {
@@ -195,7 +195,7 @@ const K = (e) => {
         const o = i - r.value, u = _(o);
         o > 0 ? l("change", n.control.value + 1 + u) : o < 0 && l("change", n.control.value - 1 + u), n.control.min !== void 0 && n.control.value < n.control.min && l("change", n.control.min), n.control.max !== void 0 && n.control.value > n.control.max && l("change", n.control.max), r.value = i;
       }
-    }), (i, o) => (f(), m("div", ke, [
+    }), (i, o) => (d(), m("div", ke, [
       c("label", Me, k(i.label), 1),
       c("input", {
         value: i.control.value,
@@ -206,7 +206,7 @@ const K = (e) => {
         step: i.control.step,
         onInput: t,
         onMousedown: p,
-        onMouseup: d
+        onMouseup: v
       }, null, 42, Te)
     ]));
   }
@@ -222,7 +222,7 @@ const K = (e) => {
       const { target: s } = t;
       l("change", s.value);
     }
-    return (t, s) => (f(), m("div", Se, [
+    return (t, s) => (d(), m("div", Se, [
       c("label", Ae, k(t.label), 1),
       c("input", {
         value: t.control.value,
@@ -244,7 +244,7 @@ const K = (e) => {
       const { target: s } = t;
       l("change", s.checked);
     }
-    return (t, s) => (f(), m("div", Fe, [
+    return (t, s) => (d(), m("div", Fe, [
       c("label", Ve, k(t.label), 1),
       c("input", {
         id: t.control.label,
@@ -282,7 +282,7 @@ const K = (e) => {
     }
     const s = D(() => ({
       backgroundImage: `linear-gradient(to right, #333 0% ${100 * (n.control.value - (n.control.min || 0)) / ((n.control.max || 100) - (n.control.min || 0))}%, #e2e2e2 0%)`
-    })), r = j(), a = h(0), p = h(!1), d = (o) => {
+    })), r = j(), a = h(0), p = h(!1), v = (o) => {
       a.value = o.clientX, p.value = !0;
     }, _ = () => {
       p.value = !1;
@@ -292,7 +292,7 @@ const K = (e) => {
         const u = o - a.value, w = i(u);
         u > 0 ? l("change", n.control.value + 1 + w) : u < 0 && l("change", n.control.value - 1 + w), n.control.min !== void 0 && n.control.value < n.control.min && l("change", n.control.min), n.control.max !== void 0 && n.control.value > n.control.max && l("change", n.control.max), a.value = o;
       }
-    }), (o, u) => (f(), m("div", Le, [
+    }), (o, u) => (d(), m("div", Le, [
       c("label", {
         class: S(["text-gray-500 w-1/3", { "flex justify-between items-center": o.control.icon }])
       }, [
@@ -319,7 +319,7 @@ const K = (e) => {
         max: o.control.max,
         step: o.control.step,
         onInput: t,
-        onMousedown: d,
+        onMousedown: v,
         onMouseup: _
       }, null, 42, Ne)
     ]));
@@ -342,7 +342,7 @@ const Be = (e, l) => {
       const { target: s } = t;
       l("change", s.value);
     }
-    return (t, s) => (f(), m("div", Re, [
+    return (t, s) => (d(), m("div", Re, [
       c("label", je, k(t.label), 1),
       c("input", {
         value: t.control.value,
@@ -384,35 +384,35 @@ const Qe = { class: "flex px-4 justify-between gap-1 items-center mb-2" }, Ze =
   },
   emits: ["change"],
   setup(e, { emit: l }) {
-    const n = e, t = j(), s = h(0), r = h(!1), a = h(0), p = (v, b) => {
-      a.value = b, s.value = v.clientX, r.value = !0;
-    }, d = (v, b) => {
+    const n = e, t = j(), s = h(0), r = h(!1), a = h(0), p = (f, b) => {
+      a.value = b, s.value = f.clientX, r.value = !0;
+    }, v = (f, b) => {
       a.value = b, r.value = !1;
-    }, _ = (v) => Math.floor(Math.abs(v) / 10), i = D(() => qe(n.control.value)), o = h(["x", "y", "z"]), u = D(() => Je(n.control.value) || ne(n.control.value));
-    function w(v, b) {
-      const { value: x } = n.control, { target: g } = v;
+    }, _ = (f) => Math.floor(Math.abs(f) / 10), i = D(() => qe(n.control.value)), o = h(["x", "y", "z"]), u = D(() => Je(n.control.value) || ne(n.control.value));
+    function w(f, b) {
+      const { value: x } = n.control, { target: g } = f;
       a.value = b, x[u.value ? o.value[a.value] : a.value] = parseInt(g.value, 10), l("change", x);
     }
-    return W(t.x, (v) => {
+    return W(t.x, (f) => {
       if (r.value) {
-        const b = v - s.value, x = _(b), { value: g } = n.control, $ = u.value ? o.value[a.value] : a.value;
-        b > 0 ? g[$] += 0.1 + x : b < 0 && (g[$] -= 0.1 + x), n.control.min !== void 0 && g < n.control.min && (g[$] = n.control.min), n.control.max !== void 0 && g > n.control.max && (g[$] = n.control.max), l("change", g), s.value = v;
+        const b = f - s.value, x = _(b), { value: g } = n.control, $ = u.value ? o.value[a.value] : a.value;
+        b > 0 ? g[$] += 0.1 + x : b < 0 && (g[$] -= 0.1 + x), n.control.min !== void 0 && g < n.control.min && (g[$] = n.control.min), n.control.max !== void 0 && g > n.control.max && (g[$] = n.control.max), l("change", g), s.value = f;
       }
-    }), (v, b) => (f(), m("div", Qe, [
-      c("label", Ze, k(v.label), 1),
+    }), (f, b) => (d(), m("div", Qe, [
+      c("label", Ze, k(f.label), 1),
       c("div", et, [
-        (f(!0), m(A, null, X(i.value, (x, g) => (f(), m("div", {
-          key: v.label + g,
+        (d(!0), m(A, null, X(i.value, (x, g) => (d(), m("div", {
+          key: f.label + g,
           class: "flex items-center w-1/3 bg-gray-100 rounded"
         }, [
-          o.value[g] && u.value ? (f(), m("span", tt, k(o.value[g]), 1)) : N("", !0),
+          o.value[g] && u.value ? (d(), m("span", tt, k(o.value[g]), 1)) : N("", !0),
           c("input", {
             type: "text",
             class: S(["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": r.value }]),
             value: i.value[g].toFixed(2),
             onInput: ($) => w($, g),
             onMousedown: ($) => p($, g),
-            onMouseup: ($) => d($, g)
+            onMouseup: ($) => v($, g)
           }, null, 42, nt)
         ]))), 128))
       ])
@@ -429,13 +429,13 @@ const Qe = { class: "flex px-4 justify-between gap-1 items-center mb-2" }, Ze =
     let r = performance.now();
     return be(({ timestamp: a }) => {
       a - r >= H && (r = a, t.value.push(l.value), t.value.length > s.value && t.value.shift(), n.value = t.value.map(
-        (p, d) => `${d * O},${R + G - O / 2 - p * (R + G - O) / 120}`
+        (p, v) => `${v * O},${R + G - O / 2 - p * (R + G - O) / 120}`
       ).join(" "));
-    }), (a, p) => (f(), m("div", lt, [
+    }), (a, p) => (d(), m("div", lt, [
       c("label", st, k(a.label), 1),
       c("div", rt, [
         c("div", at, k(Math.round(T(l))) + " FPS ", 1),
-        (f(), m("svg", {
+        (d(), m("svg", {
           width: Y,
           height: R,
           xmlns: "http://www.w3.org/2000/svg",
@@ -464,14 +464,14 @@ const Qe = { class: "flex px-4 justify-between gap-1 items-center mb-2" }, Ze =
     function n(t) {
       l("change", t.target.value);
     }
-    return (t, s) => (f(), m("div", ut, [
+    return (t, s) => (d(), m("div", ut, [
       c("label", pt, k(t.label), 1),
       c("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: n
       }, [
-        (f(!0), m(A, null, X(t.control.options, (r) => (f(), m("option", {
+        (d(!0), m(A, null, X(t.control.options, (r) => (d(), m("option", {
           key: r.value,
           value: r.value
         }, k(r.text), 9, dt))), 128))
@@ -488,42 +488,42 @@ const Qe = { class: "flex px-4 justify-between gap-1 items-center mb-2" }, Ze =
     function n(t) {
       l("change", t);
     }
-    return (t, s) => t.control.visible ? (f(), m(A, { key: 0 }, [
-      t.control.type === "color" ? (f(), C(Ge, {
+    return (t, s) => t.control.visible ? (d(), m(A, { key: 0 }, [
+      t.control.type === "color" ? (d(), C(Ge, {
         key: 0,
         label: t.control.label,
         control: t.control,
         onChange: n
-      }, null, 8, ["label", "control"])) : t.control.type === "select" ? (f(), C(vt, {
+      }, null, 8, ["label", "control"])) : t.control.type === "select" ? (d(), C(vt, {
         key: 1,
         label: t.control.label,
         control: t.control,
         onChange: n
-      }, null, 8, ["label", "control"])) : t.control.type === "vector" ? (f(), C(ot, {
+      }, null, 8, ["label", "control"])) : t.control.type === "vector" ? (d(), C(ot, {
         key: 2,
         label: t.control.label,
         control: t.control,
         onChange: n
-      }, null, 8, ["label", "control"])) : t.control.type === "boolean" ? (f(), C(Xe, {
+      }, null, 8, ["label", "control"])) : t.control.type === "boolean" ? (d(), C(Xe, {
         key: 3,
         label: t.control.label,
         control: t.control,
         onChange: n
-      }, null, 8, ["label", "control"])) : t.control.type === "fpsgraph" ? (f(), C(it, {
+      }, null, 8, ["label", "control"])) : t.control.type === "fpsgraph" ? (d(), C(it, {
         key: 4,
         label: t.control.label,
         control: t.control
-      }, null, 8, ["label", "control"])) : t.control.type === "number" ? (f(), C(Ie, {
+      }, null, 8, ["label", "control"])) : t.control.type === "number" ? (d(), C(Ie, {
         key: 5,
         label: t.control.label,
         control: t.control,
         onChange: n
-      }, null, 8, ["label", "control"])) : t.control.type === "range" ? (f(), C(Ke, {
+      }, null, 8, ["label", "control"])) : t.control.type === "range" ? (d(), C(Ke, {
         key: 6,
         label: t.control.label,
         control: t.control,
         onChange: n
-      }, null, 8, ["label", "control"])) : (f(), C(Ee, {
+      }, null, 8, ["label", "control"])) : (d(), C(Ee, {
         key: 7,
         label: t.control.label,
         control: t.control,
@@ -544,7 +544,7 @@ const Qe = { class: "flex px-4 justify-between gap-1 items-center mb-2" }, Ze =
     const n = h(!1), t = () => {
       n.value = !n.value;
     };
-    return (s, r) => (f(), m("div", gt, [
+    return (s, r) => (d(), m("div", gt, [
       c("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
@@ -561,7 +561,7 @@ const Qe = { class: "flex px-4 justify-between gap-1 items-center mb-2" }, Ze =
       }, {
         default: Q(() => [
           q(c("div", ht, [
-            (f(!0), m(A, null, X(s.controls, (a) => (f(), C(oe, {
+            (d(!0), m(A, null, X(s.controls, (a) => (d(), C(oe, {
               key: a.label,
               control: a,
               onChange: (p) => l(p, a)
@@ -589,21 +589,21 @@ const Qe = { class: "flex px-4 justify-between gap-1 items-center mb-2" }, Ze =
   },
   setup(e) {
     const l = e, { uuid: n } = E(l), { width: t } = Z(), s = h(null), r = Ce(n == null ? void 0 : n.value);
-    function a(d, _) {
-      r[T(d)].value = _, r[T(d)][T(d)] = _;
+    function a(v, _) {
+      r[T(v)].value = _, r[T(v)][T(v)] = _;
     }
     const p = D(() => {
-      const d = {};
+      const v = {};
       for (const _ in r) {
         const i = r[_], o = i.folder || "default";
-        d[o] || (d[o] = []), d[o].push(i);
+        v[o] || (v[o] = []), v[o].push(i);
       }
-      return d;
+      return v;
     });
-    return (d, _) => (f(), C(T(we), {
+    return (v, _) => (d(), C(T(we), {
       id: T(n),
       "initial-value": { x: T(t) - $t - 40, y: 10 },
-      class: S(["absolute select-none z-24 w-280px font-sans text-xs", d.$attrs.class]),
+      class: S(["absolute select-none z-24 w-280px font-sans text-xs", v.$attrs.class]),
       handle: s.value
     }, {
       default: Q(() => [
@@ -613,13 +613,13 @@ const Qe = { class: "flex px-4 justify-between gap-1 items-center mb-2" }, Ze =
             ref: s,
             class: "relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"
           }, wt, 512),
-          (f(!0), m(A, null, X(p.value, (i, o) => (f(), m(A, { key: o }, [
-            o !== "default" ? (f(), C(yt, {
+          (d(!0), m(A, null, X(p.value, (i, o) => (d(), m(A, { key: o }, [
+            o !== "default" ? (d(), C(yt, {
               key: 0,
               label: o,
               controls: i
             }, null, 8, ["label", "controls"])) : N("", !0),
-            o === "default" ? (f(!0), m(A, { key: 1 }, X(i, (u) => (f(), C(oe, {
+            o === "default" ? (d(!0), m(A, { key: 1 }, X(i, (u) => (d(), C(oe, {
               key: u.label,
               control: u,
               onChange: (w) => a(u.label, w)

package/dist/tresleches.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/leches
- * version: v0.9.0
+ * version: v0.9.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 je="";function E(t){return typeof t=="function"?t():e.unref(t)}const M=typeof window<"u"&&typeof document<"u";function R(t,r={}){if(!e.isRef(t))return e.toRefs(t);const o=Array.isArray(t.value)?Array.from({length:t.value.length}):{};for(const n in t.value)o[n]=e.customRef(()=>({get(){return t.value[n]},set(a){var c;if((c=E(r.replaceRef))!=null?c:!0)if(Array.isArray(t.value)){const p=[...t.value];p[n]=a,t.value=p}else{const p={...t.value,[n]:a};Object.setPrototypeOf(p,Object.getPrototypeOf(t.value)),t.value=p}else t.value[n]=a}}));return o}const U=M?window:void 0;function P(t,r={}){const{pointerTypes:o,preventDefault:n,stopPropagation:a,exact:c,onMove:s,onEnd:p,onStart:f,initialValue:y,axis:i="both",draggingElement:l=U,handle:d=t}=r,{width:_}=x.useWindowSize();let u=_.value;const h=e.ref(E(y)??{x:0,y:0});e.watch(_,()=>{const g=_.value-u;h.value.x+=g,u=_.value});const b=e.ref(),m=g=>o?o.includes(g.pointerType):!0,k=g=>{E(n)&&g.preventDefault(),E(a)&&g.stopPropagation()},Pe=g=>{if(!m(g)||E(c)&&g.target!==E(t))return;const V=E(t).getBoundingClientRect(),$={x:g.clientX-V.left,y:g.clientY-V.top};(f==null?void 0:f($,g))!==!1&&(b.value=$,k(g))},Xe=g=>{if(!m(g)||!b.value)return;let{x:V,y:$}=h.value;(i==="x"||i==="both")&&(V=g.clientX-b.value.x),(i==="y"||i==="both")&&($=g.clientY-b.value.y),h.value={x:V,y:$},s==null||s(h.value,g),k(g)},We=g=>{m(g)&&b.value&&(b.value=void 0,p==null||p(h.value,g),k(g))};if(M){const g={capture:r.capture??!0};x.useEventListener(d,"pointerdown",Pe,g),x.useEventListener(l,"pointermove",Xe,g),x.useEventListener(l,"pointerup",We,g)}return{...R(h),position:h,isDragging:e.computed(()=>!!b.value),style:e.computed(()=>`left:${h.value.x}px;top:${h.value.y}px;`)}}const X=e.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(t,{slots:r}){const o=e.ref(),n=e.computed(()=>t.handle??o.value),a=t.storageKey&&x.useStorage(t.storageKey,E(t.initialValue)||{x:0,y:0},x.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0),c=a||t.initialValue||{x:0,y:0},s=(f,y)=>{var i;(i=t.onEnd)==null||i.call(t,f,y),a&&(a.value.x=f.x,a.value.y=f.y)},p=e.reactive(P(o,{...t,handle:n,initialValue:c,onEnd:s}));return()=>{if(r.default)return e.h(t.as||"div",{ref:o,style:`touch-action:none;${p.style}`},r.default(p))}}}),W=Symbol("CONTROLS_CONTEXT_KEY"),T="default",C=e.reactive({});function F(t=T){return e.provide(W,C),C[t]}const S=t=>{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 t=="boolean"?"boolean":typeof t=="number"?"number":typeof t=="string"&&r.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)&&t.options.every(o=>"text"in o&&"value"in o)?"select":"unknown"},N=(t,r,o,n)=>{const a={label:e.ref(t),name:e.ref(t),type:e.ref(o),value:e.ref(r),visible:e.ref(!0),[t]:e.ref(r)};return n&&(a.folder=e.ref(n)),a},j=(t,r,o)=>{const n={},a=typeof t=="string"?t:null,c=a?r:t,s=a&&a!=="fpsgraph"?o:r,p=(s==null?void 0:s.uuid)||T;if(C[p]||(C[p]=e.reactive({})),t==="fpsgraph"){const l=N("fpsgraph",null,"fpsgraph",null);return C[p].fpsgraph=l,n.fpsgraph=l,e.toRefs(e.reactive(n))}const f=C[p],y=e.isReactive(c),i=y?e.toRefs(c):{};for(const l in c){let d=c[l];if(y&&i[l]&&(d=i[l]),typeof d=="object"&&!e.isRef(d)&&!Array.isArray(d)&&d.value!==void 0){const u=d,h=e.isRef(u.value)?u.value:e.ref(u.value),b=S(u),m=N(l,h,b,a);b==="select"&&(m.options=e.ref(u.options)),b==="range"&&(m.min=e.ref(u.min),m.max=e.ref(u.max),m.step=e.ref(u.step)),f[l]=m,n[l]=m;continue}if(e.isRef(d)){const u=N(l,d,S(d.value),a);f[l]=u,n[l]=u;continue}else if(typeof d=="object"&&!Array.isArray(d)){const u=e.toRefs(d);u[l]&&(d=u[l])}const _=N(l,d,S(d),a);f[l]=_,n[l]=_}return Object.keys(n).length>1?e.toRefs(e.reactive(n)):Object.values(n)[0]},K={class:"flex px-4 justify-between gap-4 items-center mb-2"},Y={class:"text-gray-500 w-1/3"},q=["value","min","max","step"],H=e.defineComponent({__name:"NumberControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){const o=t;function n(i){const{target:l}=i;r("change",l.valueAsNumber)}const a=x.useMouse(),c=e.ref(0),s=e.ref(!1),p=i=>{c.value=i.clientX,s.value=!0},f=()=>{s.value=!1},y=i=>Math.floor(Math.abs(i)/10);return e.watch(a.x,i=>{if(s.value){const l=i-c.value,d=y(l);l>0?r("change",o.control.value+1+d):l<0&&r("change",o.control.value-1+d),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=i}}),(i,l)=>(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("label",Y,e.toDisplayString(i.label),1),e.createElementVNode("input",{value:i.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:i.control.min,max:i.control.max,step:i.control.step,onInput:n,onMousedown:p,onMouseup:f},null,42,q)]))}}),G={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},J={class:"text-gray-500 w-1/3"},Q=["value"],Z=e.defineComponent({__name:"TextControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){function o(n){const{target:a}=n;r("change",a.value)}return(n,a)=>(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("label",J,e.toDisplayString(n.label),1),e.createElementVNode("input",{value:n.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,Q)]))}}),v={class:"flex px-4 justify-start gap-2 items-center mb-2 min-h-32px"},ee={class:"text-gray-500 w-1/3"},te=["id","checked"],ne=["for"],oe={class:"i-ic:baseline-check text-light"},le=e.defineComponent({__name:"BooleanControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){function o(n){const{target:a}=n;r("change",a.checked)}return(n,a)=>(e.openBlock(),e.createElementBlock("div",v,[e.createElementVNode("label",ee,e.toDisplayString(n.label),1),e.createElementVNode("input",{id:n.control.label,checked:n.control.value,class:"hidden",type:"checkbox",onInput:o},null,40,te),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",oe,null,512),[[e.vShow,n.control.value]])],2)],8,ne)]))}}),re={class:"px-4 relative flex justify-between gap-4 items-center mb-2"},ae=["value","min","max","step"],se=["value","min","max","step"],ce=e.defineComponent({__name:"SliderControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){const o=t;function n(l){const{target:d}=l;r("change",d.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%)`})),c=x.useMouse(),s=e.ref(0),p=e.ref(!1),f=l=>{s.value=l.clientX,p.value=!0},y=()=>{p.value=!1},i=l=>Math.floor(Math.abs(l)/10);return e.watch(c.x,l=>{if(p.value){const d=l-s.value,_=i(d);d>0?r("change",o.control.value+1+_):d<0&&r("change",o.control.value-1+_),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=l}}),(l,d)=>(e.openBlock(),e.createElementBlock("div",re,[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:n},null,44,ae),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":p.value}]),type:"number",min:l.control.min,max:l.control.max,step:l.control.step,onInput:n,onMousedown:f,onMouseup:y},null,42,se)]))}}),Ke="",ie=((t,r)=>{const o=t.__vccOpts||t;for(const[n,a]of r)o[n]=a;return o})(ce,[["__scopeId","data-v-9e6267fe"]]),de={class:"flex px-4 justify-between gap-4 items-center mb-2"},pe={class:"text-gray-500 w-1/3"},fe=["value"],ue=["value"],me=e.defineComponent({__name:"ColorControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){function o(n){const{target:a}=n;r("change",a.value)}return(n,a)=>(e.openBlock(),e.createElementBlock("div",de,[e.createElementVNode("label",pe,e.toDisplayString(n.label),1),e.createElementVNode("input",{value:n.control.value,type:"color",onInput:o},null,40,fe),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:o},null,40,ue)]))}}),qe="";function ge(t){if(typeof t=="number")return[t,t,t];if(I(t)){const{x:r,y:o,z:n}=t;return[r,o,n]}return t}function he(t){return t&&typeof t.x=="number"&&typeof t.y=="number"&&typeof t.z>"u"}function I(t){return t&&typeof t.x=="number"&&typeof t.y=="number"&&typeof t.z=="number"}const ye={class:"flex px-4 justify-between gap-1 items-center mb-2"},be={class:"text-gray-500 w-1/3"},_e={class:"w-2/3 flex justify-between gap-0.5"},ke={key:0,class:"font-bold px-1 py-1 text-0.65rem text-gray-300"},xe=["value","onInput","onMousedown","onMouseup"],we=e.defineComponent({__name:"VectorControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){const o=t,n=x.useMouse(),a=e.ref(0),c=e.ref(!1),s=e.ref(0),p=(u,h)=>{s.value=h,a.value=u.clientX,c.value=!0},f=(u,h)=>{s.value=h,c.value=!1},y=u=>Math.floor(Math.abs(u)/10),i=e.computed(()=>ge(o.control.value)),l=e.ref(["x","y","z"]),d=e.computed(()=>he(o.control.value)||I(o.control.value));function _(u,h){const{value:b}=o.control,{target:m}=u;s.value=h,b[d.value?l.value[s.value]:s.value]=parseInt(m.value,10),r("change",b)}return e.watch(n.x,u=>{if(c.value){const h=u-a.value,b=y(h),{value:m}=o.control,k=d.value?l.value[s.value]:s.value;h>0?m[k]+=.1+b:h<0&&(m[k]-=.1+b),o.control.min!==void 0&&m<o.control.min&&(m[k]=o.control.min),o.control.max!==void 0&&m>o.control.max&&(m[k]=o.control.max),r("change",m),a.value=u}}),(u,h)=>(e.openBlock(),e.createElementBlock("div",ye,[e.createElementVNode("label",be,e.toDisplayString(u.label),1),e.createElementVNode("div",_e,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(b,m)=>(e.openBlock(),e.createElementBlock("div",{key:u.label+m,class:"flex items-center w-1/3 bg-gray-100 rounded"},[l.value[m]&&d.value?(e.openBlock(),e.createElementBlock("span",ke,e.toDisplayString(l.value[m]),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":c.value}]),value:i.value[m].toFixed(2),onInput:k=>_(k,m),onMousedown:k=>p(k,m),onMouseup:k=>f(k,m)},null,42,xe)]))),128))])]))}}),Ee={class:"flex px-4 justify-between gap-4 items-center mb-2"},Ce={class:"text-gray-500 w-1/3"},Be={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"},Ve={class:"absolute bottom-0.5 right-0.5 font-sans text-xs"},$e=["points"],z=160,D=40,B=2,A=100,L=20,Ne=e.defineComponent({__name:"FPSGraph",props:{label:{},control:{}},setup(t){const r=x.useFps({every:A}),o=e.ref(""),n=e.ref([]),a=e.ref(z/B);let c=performance.now();return x.useRafFn(({timestamp:s})=>{s-c>=A&&(c=s,n.value.push(r.value),n.value.length>a.value&&n.value.shift(),o.value=n.value.map((p,f)=>`${f*B},${D+L-B/2-p*(D+L-B)/120}`).join(" "))}),(s,p)=>(e.openBlock(),e.createElementBlock("div",Ee,[e.createElementVNode("label",Ce,e.toDisplayString(s.label),1),e.createElementVNode("div",Be,[e.createElementVNode("div",Ve,e.toDisplayString(Math.round(e.unref(r)))+" FPS ",1),(e.openBlock(),e.createElementBlock("svg",{width:z,height:D,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,$e)]))])]))}}),Se={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},De={class:"text-gray-500 w-1/3"},Me=["value"],Te=["value"],Fe=e.defineComponent({__name:"SelectControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){function o(n){r("change",n.target.value)}return(n,a)=>(e.openBlock(),e.createElementBlock("div",Se,[e.createElementVNode("label",De,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:o},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.control.options,c=>(e.openBlock(),e.createElementBlock("option",{key:c.value,value:c.value},e.toDisplayString(c.text),9,Te))),128))],40,Me)]))}}),O=e.defineComponent({__name:"ControlInput",props:{control:{}},emits:["change"],setup(t,{emit:r}){function o(n){r("change",n)}return(n,a)=>n.control.visible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[n.control.type==="color"?(e.openBlock(),e.createBlock(me,{key:0,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="select"?(e.openBlock(),e.createBlock(Fe,{key:1,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="vector"?(e.openBlock(),e.createBlock(we,{key:2,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="boolean"?(e.openBlock(),e.createBlock(le,{key:3,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="fpsgraph"?(e.openBlock(),e.createBlock(Ne,{key:4,label:n.control.label,control:n.control},null,8,["label","control"])):n.control.type==="number"?(e.openBlock(),e.createBlock(H,{key:5,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="range"?(e.openBlock(),e.createBlock(ie,{key:6,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):(e.openBlock(),e.createBlock(Z,{key:7,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"]))],64)):e.createCommentVNode("",!0)}}),Ie={class:"mb-4"},ze={class:"bg-white rounded-b pt-4"},Ae=e.defineComponent({__name:"Folder",props:{controls:{},label:{}},setup(t){function r(a,c){c.value=a}const o=e.ref(!1),n=()=>{o.value=!o.value};return(a,c)=>(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 focus:outline-none font-sans cursor-pointer",onClick:n},[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)]),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",ze,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.controls,s=>(e.openBlock(),e.createBlock(O,{key:s.label,control:s,onChange:p=>r(p,s)},null,8,["control","onChange"]))),128))],512),[[e.vShow,o.value]])]),_:1})]))}}),Le={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,Ue=e.defineComponent({__name:"TresLeches",props:{uuid:{}},setup(t){const r=t,{uuid:o}=e.toRefs(r),{width:n}=x.useWindowSize(),a=e.ref(null),c=F(o==null?void 0:o.value);function s(f,y){c[e.unref(f)].value=y,c[e.unref(f)][e.unref(f)]=y}const p=e.computed(()=>{const f={};for(const y in c){const i=c[y],l=i.folder||"default";f[l]||(f[l]=[]),f[l].push(i)}return f});return(f,y)=>(e.openBlock(),e.createBlock(e.unref(X),{id:e.unref(o),"initial-value":{x:e.unref(n)-Re-40,y:10},class:e.normalizeClass(["absolute select-none z-24 w-280px font-sans text-xs",f.$attrs.class]),handle:a.value},{default:e.withCtx(()=>[e.createElementVNode("div",Le,[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(p.value,(i,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l},[l!=="default"?(e.openBlock(),e.createBlock(Ae,{key:0,label:l,controls:i},null,8,["label","controls"])):e.createCommentVNode("",!0),l==="default"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(i,d=>(e.openBlock(),e.createBlock(O,{key:d.label,control:d,onChange:_=>s(d.label,_)},null,8,["control","onChange"]))),128)):e.createCommentVNode("",!0)],64))),128))])]),_:1},8,["id","initial-value","class","handle"]))}});w.TresLeches=Ue,w.useControls=j,w.useControlsProvider=F,Object.defineProperty(w,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 je="";function E(t){return typeof t=="function"?t():e.unref(t)}const M=typeof window<"u"&&typeof document<"u";function R(t,r={}){if(!e.isRef(t))return e.toRefs(t);const o=Array.isArray(t.value)?Array.from({length:t.value.length}):{};for(const n in t.value)o[n]=e.customRef(()=>({get(){return t.value[n]},set(a){var c;if((c=E(r.replaceRef))!=null?c:!0)if(Array.isArray(t.value)){const p=[...t.value];p[n]=a,t.value=p}else{const p={...t.value,[n]:a};Object.setPrototypeOf(p,Object.getPrototypeOf(t.value)),t.value=p}else t.value[n]=a}}));return o}const U=M?window:void 0;function P(t,r={}){const{pointerTypes:o,preventDefault:n,stopPropagation:a,exact:c,onMove:s,onEnd:p,onStart:u,initialValue:y,axis:i="both",draggingElement:l=U,handle:d=t}=r,{width:_}=x.useWindowSize();let f=_.value;const h=e.ref(E(y)??{x:0,y:0});e.watch(_,()=>{const g=_.value-f;h.value.x+=g,f=_.value});const b=e.ref(),m=g=>o?o.includes(g.pointerType):!0,k=g=>{E(n)&&g.preventDefault(),E(a)&&g.stopPropagation()},Pe=g=>{if(!m(g)||E(c)&&g.target!==E(t))return;const V=E(t).getBoundingClientRect(),$={x:g.clientX-V.left,y:g.clientY-V.top};(u==null?void 0:u($,g))!==!1&&(b.value=$,k(g))},Xe=g=>{if(!m(g)||!b.value)return;let{x:V,y:$}=h.value;(i==="x"||i==="both")&&(V=g.clientX-b.value.x),(i==="y"||i==="both")&&($=g.clientY-b.value.y),h.value={x:V,y:$},s==null||s(h.value,g),k(g)},We=g=>{m(g)&&b.value&&(b.value=void 0,p==null||p(h.value,g),k(g))};if(M){const g={capture:r.capture??!0};x.useEventListener(d,"pointerdown",Pe,g),x.useEventListener(l,"pointermove",Xe,g),x.useEventListener(l,"pointerup",We,g)}return{...R(h),position:h,isDragging:e.computed(()=>!!b.value),style:e.computed(()=>`left:${h.value.x}px;top:${h.value.y}px;`)}}const X=e.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(t,{slots:r}){const o=e.ref(),n=e.computed(()=>t.handle??o.value),a=t.storageKey&&x.useStorage(t.storageKey,E(t.initialValue)||{x:0,y:0},x.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0),c=a||t.initialValue||{x:0,y:0},s=(u,y)=>{var i;(i=t.onEnd)==null||i.call(t,u,y),a&&(a.value.x=u.x,a.value.y=u.y)},p=e.reactive(P(o,{...t,handle:n,initialValue:c,onEnd:s}));return()=>{if(r.default)return e.h(t.as||"div",{ref:o,style:`touch-action:none;${p.style}`},r.default(p))}}}),W=Symbol("CONTROLS_CONTEXT_KEY"),T="default",C=e.reactive({});function F(t=T){return e.provide(W,C),C[t]}const S=t=>{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 t=="boolean"?"boolean":typeof t=="number"?"number":typeof t=="string"&&r.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)&&t.options.every(o=>"text"in o&&"value"in o)?"select":"unknown"},N=(t,r,o,n)=>{const a={label:e.ref(t),name:e.ref(t),type:e.ref(o),value:e.ref(r),visible:e.ref(!0),[t]:e.ref(r)};return n&&(a.folder=e.ref(n)),a},j=(t,r,o)=>{const n={},a=typeof t=="string"?t:null,c=a?r:t,s=a&&a!=="fpsgraph"?o:r,p=(s==null?void 0:s.uuid)||T;if(C[p]||(C[p]=e.reactive({})),t==="fpsgraph"){const l=N("fpsgraph",null,"fpsgraph",null);return C[p].fpsgraph=l,n.fpsgraph=l,e.toRefs(e.reactive(n))}const u=C[p],y=e.isReactive(c),i=y?e.toRefs(c):{};for(const l in c){let d=c[l];if(y&&i[l]&&(d=i[l]),typeof d=="object"&&!e.isRef(d)&&!Array.isArray(d)&&d.value!==void 0){const f=d,h=e.isRef(f.value)?f.value:e.ref(f.value),b=S(f),m=N(l,h,b,a);b==="select"&&(m.options=e.ref(f.options)),b==="range"&&(m.min=e.ref(f.min||0),m.max=e.ref(f.max||1),m.step=e.ref(f.step||.1)),m.label.value=f.label||l,m.visible.value=f.visible!==void 0?f.visible:!0,u[l]=m,n[l]=m;continue}if(e.isRef(d)){const f=N(l,d,S(d.value),a);u[l]=f,n[l]=f;continue}else if(typeof d=="object"&&!Array.isArray(d)){const f=e.toRefs(d);f[l]&&(d=f[l])}const _=N(l,d,S(d),a);u[l]=_,n[l]=_}return Object.keys(n).length>1?e.toRefs(e.reactive(n)):Object.values(n)[0]},K={class:"flex px-4 justify-between gap-4 items-center mb-2"},Y={class:"text-gray-500 w-1/3"},q=["value","min","max","step"],H=e.defineComponent({__name:"NumberControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){const o=t;function n(i){const{target:l}=i;r("change",l.valueAsNumber)}const a=x.useMouse(),c=e.ref(0),s=e.ref(!1),p=i=>{c.value=i.clientX,s.value=!0},u=()=>{s.value=!1},y=i=>Math.floor(Math.abs(i)/10);return e.watch(a.x,i=>{if(s.value){const l=i-c.value,d=y(l);l>0?r("change",o.control.value+1+d):l<0&&r("change",o.control.value-1+d),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=i}}),(i,l)=>(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("label",Y,e.toDisplayString(i.label),1),e.createElementVNode("input",{value:i.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:i.control.min,max:i.control.max,step:i.control.step,onInput:n,onMousedown:p,onMouseup:u},null,42,q)]))}}),G={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},J={class:"text-gray-500 w-1/3"},Q=["value"],Z=e.defineComponent({__name:"TextControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){function o(n){const{target:a}=n;r("change",a.value)}return(n,a)=>(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("label",J,e.toDisplayString(n.label),1),e.createElementVNode("input",{value:n.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,Q)]))}}),v={class:"flex px-4 justify-start gap-2 items-center mb-2 min-h-32px"},ee={class:"text-gray-500 w-1/3"},te=["id","checked"],ne=["for"],oe={class:"i-ic:baseline-check text-light"},le=e.defineComponent({__name:"BooleanControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){function o(n){const{target:a}=n;r("change",a.checked)}return(n,a)=>(e.openBlock(),e.createElementBlock("div",v,[e.createElementVNode("label",ee,e.toDisplayString(n.label),1),e.createElementVNode("input",{id:n.control.label,checked:n.control.value,class:"hidden",type:"checkbox",onInput:o},null,40,te),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",oe,null,512),[[e.vShow,n.control.value]])],2)],8,ne)]))}}),re={class:"px-4 relative flex justify-between gap-4 items-center mb-2"},ae=["value","min","max","step"],se=["value","min","max","step"],ce=e.defineComponent({__name:"SliderControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){const o=t;function n(l){const{target:d}=l;r("change",d.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%)`})),c=x.useMouse(),s=e.ref(0),p=e.ref(!1),u=l=>{s.value=l.clientX,p.value=!0},y=()=>{p.value=!1},i=l=>Math.floor(Math.abs(l)/10);return e.watch(c.x,l=>{if(p.value){const d=l-s.value,_=i(d);d>0?r("change",o.control.value+1+_):d<0&&r("change",o.control.value-1+_),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=l}}),(l,d)=>(e.openBlock(),e.createElementBlock("div",re,[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:n},null,44,ae),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":p.value}]),type:"number",min:l.control.min,max:l.control.max,step:l.control.step,onInput:n,onMousedown:u,onMouseup:y},null,42,se)]))}}),Ke="",ie=((t,r)=>{const o=t.__vccOpts||t;for(const[n,a]of r)o[n]=a;return o})(ce,[["__scopeId","data-v-9e6267fe"]]),de={class:"flex px-4 justify-between gap-4 items-center mb-2"},pe={class:"text-gray-500 w-1/3"},fe=["value"],ue=["value"],me=e.defineComponent({__name:"ColorControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){function o(n){const{target:a}=n;r("change",a.value)}return(n,a)=>(e.openBlock(),e.createElementBlock("div",de,[e.createElementVNode("label",pe,e.toDisplayString(n.label),1),e.createElementVNode("input",{value:n.control.value,type:"color",onInput:o},null,40,fe),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:o},null,40,ue)]))}}),qe="";function ge(t){if(typeof t=="number")return[t,t,t];if(I(t)){const{x:r,y:o,z:n}=t;return[r,o,n]}return t}function he(t){return t&&typeof t.x=="number"&&typeof t.y=="number"&&typeof t.z>"u"}function I(t){return t&&typeof t.x=="number"&&typeof t.y=="number"&&typeof t.z=="number"}const ye={class:"flex px-4 justify-between gap-1 items-center mb-2"},be={class:"text-gray-500 w-1/3"},_e={class:"w-2/3 flex justify-between gap-0.5"},ke={key:0,class:"font-bold px-1 py-1 text-0.65rem text-gray-300"},xe=["value","onInput","onMousedown","onMouseup"],we=e.defineComponent({__name:"VectorControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){const o=t,n=x.useMouse(),a=e.ref(0),c=e.ref(!1),s=e.ref(0),p=(f,h)=>{s.value=h,a.value=f.clientX,c.value=!0},u=(f,h)=>{s.value=h,c.value=!1},y=f=>Math.floor(Math.abs(f)/10),i=e.computed(()=>ge(o.control.value)),l=e.ref(["x","y","z"]),d=e.computed(()=>he(o.control.value)||I(o.control.value));function _(f,h){const{value:b}=o.control,{target:m}=f;s.value=h,b[d.value?l.value[s.value]:s.value]=parseInt(m.value,10),r("change",b)}return e.watch(n.x,f=>{if(c.value){const h=f-a.value,b=y(h),{value:m}=o.control,k=d.value?l.value[s.value]:s.value;h>0?m[k]+=.1+b:h<0&&(m[k]-=.1+b),o.control.min!==void 0&&m<o.control.min&&(m[k]=o.control.min),o.control.max!==void 0&&m>o.control.max&&(m[k]=o.control.max),r("change",m),a.value=f}}),(f,h)=>(e.openBlock(),e.createElementBlock("div",ye,[e.createElementVNode("label",be,e.toDisplayString(f.label),1),e.createElementVNode("div",_e,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(b,m)=>(e.openBlock(),e.createElementBlock("div",{key:f.label+m,class:"flex items-center w-1/3 bg-gray-100 rounded"},[l.value[m]&&d.value?(e.openBlock(),e.createElementBlock("span",ke,e.toDisplayString(l.value[m]),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":c.value}]),value:i.value[m].toFixed(2),onInput:k=>_(k,m),onMousedown:k=>p(k,m),onMouseup:k=>u(k,m)},null,42,xe)]))),128))])]))}}),Ee={class:"flex px-4 justify-between gap-4 items-center mb-2"},Ce={class:"text-gray-500 w-1/3"},Be={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"},Ve={class:"absolute bottom-0.5 right-0.5 font-sans text-xs"},$e=["points"],z=160,D=40,B=2,A=100,L=20,Ne=e.defineComponent({__name:"FPSGraph",props:{label:{},control:{}},setup(t){const r=x.useFps({every:A}),o=e.ref(""),n=e.ref([]),a=e.ref(z/B);let c=performance.now();return x.useRafFn(({timestamp:s})=>{s-c>=A&&(c=s,n.value.push(r.value),n.value.length>a.value&&n.value.shift(),o.value=n.value.map((p,u)=>`${u*B},${D+L-B/2-p*(D+L-B)/120}`).join(" "))}),(s,p)=>(e.openBlock(),e.createElementBlock("div",Ee,[e.createElementVNode("label",Ce,e.toDisplayString(s.label),1),e.createElementVNode("div",Be,[e.createElementVNode("div",Ve,e.toDisplayString(Math.round(e.unref(r)))+" FPS ",1),(e.openBlock(),e.createElementBlock("svg",{width:z,height:D,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,$e)]))])]))}}),Se={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},De={class:"text-gray-500 w-1/3"},Me=["value"],Te=["value"],Fe=e.defineComponent({__name:"SelectControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:r}){function o(n){r("change",n.target.value)}return(n,a)=>(e.openBlock(),e.createElementBlock("div",Se,[e.createElementVNode("label",De,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:o},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.control.options,c=>(e.openBlock(),e.createElementBlock("option",{key:c.value,value:c.value},e.toDisplayString(c.text),9,Te))),128))],40,Me)]))}}),O=e.defineComponent({__name:"ControlInput",props:{control:{}},emits:["change"],setup(t,{emit:r}){function o(n){r("change",n)}return(n,a)=>n.control.visible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[n.control.type==="color"?(e.openBlock(),e.createBlock(me,{key:0,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="select"?(e.openBlock(),e.createBlock(Fe,{key:1,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="vector"?(e.openBlock(),e.createBlock(we,{key:2,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="boolean"?(e.openBlock(),e.createBlock(le,{key:3,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="fpsgraph"?(e.openBlock(),e.createBlock(Ne,{key:4,label:n.control.label,control:n.control},null,8,["label","control"])):n.control.type==="number"?(e.openBlock(),e.createBlock(H,{key:5,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="range"?(e.openBlock(),e.createBlock(ie,{key:6,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):(e.openBlock(),e.createBlock(Z,{key:7,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"]))],64)):e.createCommentVNode("",!0)}}),Ie={class:"mb-4"},ze={class:"bg-white rounded-b pt-4"},Ae=e.defineComponent({__name:"Folder",props:{controls:{},label:{}},setup(t){function r(a,c){c.value=a}const o=e.ref(!1),n=()=>{o.value=!o.value};return(a,c)=>(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 focus:outline-none font-sans cursor-pointer",onClick:n},[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)]),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",ze,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.controls,s=>(e.openBlock(),e.createBlock(O,{key:s.label,control:s,onChange:p=>r(p,s)},null,8,["control","onChange"]))),128))],512),[[e.vShow,o.value]])]),_:1})]))}}),Le={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,Ue=e.defineComponent({__name:"TresLeches",props:{uuid:{}},setup(t){const r=t,{uuid:o}=e.toRefs(r),{width:n}=x.useWindowSize(),a=e.ref(null),c=F(o==null?void 0:o.value);function s(u,y){c[e.unref(u)].value=y,c[e.unref(u)][e.unref(u)]=y}const p=e.computed(()=>{const u={};for(const y in c){const i=c[y],l=i.folder||"default";u[l]||(u[l]=[]),u[l].push(i)}return u});return(u,y)=>(e.openBlock(),e.createBlock(e.unref(X),{id:e.unref(o),"initial-value":{x:e.unref(n)-Re-40,y:10},class:e.normalizeClass(["absolute select-none z-24 w-280px font-sans text-xs",u.$attrs.class]),handle:a.value},{default:e.withCtx(()=>[e.createElementVNode("div",Le,[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(p.value,(i,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l},[l!=="default"?(e.openBlock(),e.createBlock(Ae,{key:0,label:l,controls:i},null,8,["label","controls"])):e.createCommentVNode("",!0),l==="default"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(i,d=>(e.openBlock(),e.createBlock(O,{key:d.label,control:d,onChange:_=>s(d.label,_)},null,8,["control","onChange"]))),128)):e.createCommentVNode("",!0)],64))),128))])]),_:1},8,["id","initial-value","class","handle"]))}});w.TresLeches=Ue,w.useControls=j,w.useControlsProvider=F,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@tresjs/leches",
-  "description": "Tasty GUI for Vue controls 🍰",
-  "version": "0.9.0",
   "type": "module",
+  "version": "0.9.1",
   "packageManager": "pnpm@8.3.1",
+  "description": "Tasty GUI for Vue controls 🍰",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
+  "keywords": [
+    "vue",
+    "gui",
+    "pane",
+    "controls"
+  ],
   "sideEffects": false,
-  "main": "./dist/tresleches.js",
-  "module": "./dist/tresleches.js",
-  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -18,6 +21,9 @@
     "./styles": "./dist/style.css",
     "./*": "./*"
   },
+  "main": "./dist/tresleches.js",
+  "module": "./dist/tresleches.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "*.d.ts"
@@ -25,12 +31,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "keywords": [
-    "vue",
-    "gui",
-    "pane",
-    "controls"
-  ],
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",