@tresjs/leches 0.12.1 → 0.13.0

package/dist/style.css

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

package/dist/tresleches.js

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

package/dist/tresleches.umd.cjs

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

package/dist/utils/is.d.ts

@@ -1,7 +1,6 @@
 export declare function isVector2(obj: {
     x: number;
     y: number;
-    z: number;
 }): boolean;
 export declare function isVector3(obj: {
     x: number;

package/dist/utils/normalize.d.ts

@@ -3,6 +3,10 @@ export interface Vector3Prop {
     y: number;
     z: number;
 }
+export interface Vector2Prop {
+    x: number;
+    y: number;
+}
 export type SizeFlexibleParams = number[] | {
     width: number;
     height: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/leches",
   "type": "module",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "packageManager": "pnpm@8.3.1",
   "description": "Tasty GUI for Vue controls 🍰",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",