@tresjs/leches 0.10.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/tresleches.js +398 -383
  3. package/dist/tresleches.umd.cjs +2 -2
  4. package/package.json +1 -1
package/dist/style.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * name: @tresjs/leches
3
- * version: v0.10.0
3
+ * version: v0.11.0
4
4
  * (c) 2023
5
5
  * description: Tasty GUI for Vue controls 🍰
6
6
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
package/dist/tresleches.js CHANGED
@@ -1,99 +1,99 @@
1
1
  /**
2
2
  * name: @tresjs/leches
3
- * version: v0.10.0
3
+ * version: v0.11.0
4
4
  * (c) 2023
5
5
  * description: Tasty GUI for Vue controls 🍰
6
6
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
7
7
  */
8
- import { unref as D, isRef as K, toRefs as F, customRef as se, ref as v, watch as W, computed as E, defineComponent as S, reactive as X, h as ce, provide as ie, isReactive as ue, openBlock as d, createElementBlock as x, createElementVNode as c, toDisplayString as M, normalizeClass as T, withDirectives as J, vShow as Q, createTextVNode as pe, normalizeStyle as de, Fragment as I, renderList as L, createCommentVNode as N, createBlock as k, createVNode as fe, Transition as ve, withCtx as Z } from "vue";
9
- import { useWindowSize as ee, useEventListener as j, useStorage as ge, isClient as be, useMouse as Y, useFps as he, useRafFn as ye } from "@vueuse/core";
10
- function A(e) {
11
- return typeof e == "function" ? e() : D(e);
8
+ import { unref as A, isRef as L, toRefs as E, customRef as se, ref as y, watch as N, computed as K, defineComponent as M, reactive as z, h as ie, provide as ce, isReactive as ue, openBlock as v, createElementBlock as _, createElementVNode as d, toDisplayString as k, normalizeClass as S, withDirectives as J, vShow as Q, createTextVNode as de, normalizeStyle as fe, Fragment as I, renderList as O, createCommentVNode as P, createBlock as C, createVNode as pe, Transition as ve, withCtx as Z } from "vue";
9
+ import { useWindowSize as ee, useEventListener as W, useStorage as ge, isClient as ye, useMouse as R, useFps as be, useRafFn as he } from "@vueuse/core";
10
+ function D(n) {
11
+ return typeof n == "function" ? n() : A(n);
12
12
  }
13
13
  const ne = typeof window < "u" && typeof document < "u";
14
- function me(e, a = {}) {
15
- if (!K(e))
16
- return F(e);
17
- const t = Array.isArray(e.value) ? Array.from({ length: e.value.length }) : {};
18
- for (const n in e.value)
19
- t[n] = se(() => ({
14
+ function me(n, l = {}) {
15
+ if (!L(n))
16
+ return E(n);
17
+ const t = Array.isArray(n.value) ? Array.from({ length: n.value.length }) : {};
18
+ for (const e in n.value)
19
+ t[e] = se(() => ({
20
20
  get() {
21
- return e.value[n];
21
+ return n.value[e];
22
22
  },
23
- set(r) {
24
- var l;
25
- if ((l = A(a.replaceRef)) != null ? l : !0)
26
- if (Array.isArray(e.value)) {
27
- const p = [...e.value];
28
- p[n] = r, e.value = p;
23
+ set(a) {
24
+ var r;
25
+ if ((r = D(l.replaceRef)) != null ? r : !0)
26
+ if (Array.isArray(n.value)) {
27
+ const f = [...n.value];
28
+ f[e] = a, n.value = f;
29
29
  } else {
30
- const p = { ...e.value, [n]: r };
31
- Object.setPrototypeOf(p, Object.getPrototypeOf(e.value)), e.value = p;
30
+ const f = { ...n.value, [e]: a };
31
+ Object.setPrototypeOf(f, Object.getPrototypeOf(n.value)), n.value = f;
32
32
  }
33
33
  else
34
- e.value[n] = r;
34
+ n.value[e] = a;
35
35
  }
36
36
  }));
37
37
  return t;
38
38
  }
39
39
  const _e = ne ? window : void 0;
40
- function xe(e, a = {}) {
40
+ function xe(n, l = {}) {
41
41
  const {
42
42
  pointerTypes: t,
43
- preventDefault: n,
44
- stopPropagation: r,
45
- exact: l,
46
- onMove: s,
47
- onEnd: p,
48
- onStart: f,
43
+ preventDefault: e,
44
+ stopPropagation: a,
45
+ exact: r,
46
+ onMove: i,
47
+ onEnd: f,
48
+ onStart: p,
49
49
  initialValue: w,
50
- axis: u = "both",
50
+ axis: c = "both",
51
51
  draggingElement: o = _e,
52
- handle: i = e
53
- } = a, { width: $ } = ee();
54
- let m = $.value;
55
- const h = v(
56
- A(w) ?? { x: 0, y: 0 }
52
+ handle: u = n
53
+ } = l, { width: h } = ee();
54
+ let T = h.value;
55
+ const s = y(
56
+ D(w) ?? { x: 0, y: 0 }
57
57
  );
58
- W($, () => {
59
- const b = $.value - m;
60
- h.value.x += b, m = $.value;
58
+ N(h, () => {
59
+ const b = h.value - T;
60
+ s.value.x += b, T = h.value;
61
61
  });
62
- const y = v(), _ = (b) => t ? t.includes(b.pointerType) : !0, g = (b) => {
63
- A(n) && b.preventDefault(), A(r) && b.stopPropagation();
64
- }, C = (b) => {
65
- if (!_(b) || A(l) && b.target !== A(e))
62
+ const m = y(), $ = (b) => t ? t.includes(b.pointerType) : !0, g = (b) => {
63
+ D(e) && b.preventDefault(), D(a) && b.stopPropagation();
64
+ }, x = (b) => {
65
+ if (!$(b) || D(r) && b.target !== D(n))
66
66
  return;
67
- const z = A(e).getBoundingClientRect(), O = {
68
- x: b.clientX - z.left,
69
- y: b.clientY - z.top
67
+ const V = D(n).getBoundingClientRect(), q = {
68
+ x: b.clientX - V.left,
69
+ y: b.clientY - V.top
70
70
  };
71
- (f == null ? void 0 : f(O, b)) !== !1 && (y.value = O, g(b));
71
+ (p == null ? void 0 : p(q, b)) !== !1 && (m.value = q, g(b));
72
72
  }, ae = (b) => {
73
- if (!_(b) || !y.value)
73
+ if (!$(b) || !m.value)
74
74
  return;
75
- let { x: z, y: O } = h.value;
76
- (u === "x" || u === "both") && (z = b.clientX - y.value.x), (u === "y" || u === "both") && (O = b.clientY - y.value.y), h.value = {
77
- x: z,
78
- y: O
79
- }, s == null || s(h.value, b), g(b);
75
+ let { x: V, y: q } = s.value;
76
+ (c === "x" || c === "both") && (V = b.clientX - m.value.x), (c === "y" || c === "both") && (q = b.clientY - m.value.y), s.value = {
77
+ x: V,
78
+ y: q
79
+ }, i == null || i(s.value, b), g(b);
80
80
  }, re = (b) => {
81
- _(b) && y.value && (y.value = void 0, p == null || p(h.value, b), g(b));
81
+ $(b) && m.value && (m.value = void 0, f == null || f(s.value, b), g(b));
82
82
  };
83
83
  if (ne) {
84
- const b = { capture: a.capture ?? !0 };
85
- j(i, "pointerdown", C, b), j(o, "pointermove", ae, b), j(o, "pointerup", re, b);
84
+ const b = { capture: l.capture ?? !0 };
85
+ W(u, "pointerdown", x, b), W(o, "pointermove", ae, b), W(o, "pointerup", re, b);
86
86
  }
87
87
  return {
88
- ...me(h),
89
- position: h,
90
- isDragging: E(() => !!y.value),
91
- style: E(
92
- () => `left:${h.value.x}px;top:${h.value.y}px;`
88
+ ...me(s),
89
+ position: s,
90
+ isDragging: K(() => !!m.value),
91
+ style: K(
92
+ () => `left:${s.value.x}px;top:${s.value.y}px;`
93
93
  )
94
94
  };
95
95
  }
96
- const we = /* @__PURE__ */ S({
96
+ const we = /* @__PURE__ */ M({
97
97
  name: "UseDraggable",
98
98
  props: [
99
99
  "storageKey",
@@ -110,273 +110,282 @@ const we = /* @__PURE__ */ S({
110
110
  "onMove",
111
111
  "onEnd"
112
112
  ],
113
- setup(e, { slots: a }) {
114
- const t = v(), n = E(() => e.handle ?? t.value), r = e.storageKey && ge(
115
- e.storageKey,
116
- A(e.initialValue) || { x: 0, y: 0 },
117
- be ? e.storageType === "session" ? sessionStorage : localStorage : void 0
118
- ), l = r || e.initialValue || { x: 0, y: 0 }, p = X(xe(t, {
119
- ...e,
120
- handle: n,
121
- initialValue: l,
122
- onEnd: (f, w) => {
123
- var u;
124
- (u = e.onEnd) == null || u.call(e, f, w), r && (r.value.x = f.x, r.value.y = f.y);
113
+ setup(n, { slots: l }) {
114
+ const t = y(), e = K(() => n.handle ?? t.value), a = n.storageKey && ge(
115
+ n.storageKey,
116
+ D(n.initialValue) || { x: 0, y: 0 },
117
+ ye ? n.storageType === "session" ? sessionStorage : localStorage : void 0
118
+ ), r = a || n.initialValue || { x: 0, y: 0 }, f = z(xe(t, {
119
+ ...n,
120
+ handle: e,
121
+ initialValue: r,
122
+ onEnd: (p, w) => {
123
+ var c;
124
+ (c = n.onEnd) == null || c.call(n, p, w), a && (a.value.x = p.x, a.value.y = p.y);
125
125
  }
126
126
  }));
127
127
  return () => {
128
- if (a.default)
129
- return ce(e.as || "div", { ref: t, style: `touch-action:none;${p.style}` }, a.default(p));
128
+ if (l.default)
129
+ return ie(n.as || "div", { ref: t, style: `touch-action:none;${f.style}` }, l.default(f));
130
130
  };
131
131
  }
132
- }), $e = Symbol("CONTROLS_CONTEXT_KEY"), te = "default", V = X({});
133
- function Ce(e = te) {
134
- return ie($e, V), V[e];
132
+ }), $e = Symbol("CONTROLS_CONTEXT_KEY"), te = "default", F = z({});
133
+ function Ce(n = te) {
134
+ return ce($e, F), F[n];
135
135
  }
136
- const B = (e) => {
137
- const a = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
138
- return typeof e == "boolean" ? "boolean" : typeof e == "number" ? "number" : typeof e == "string" && a.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";
139
- }, P = (e, a, t, n) => {
140
- const r = {
141
- key: v(e),
142
- label: v(e),
143
- name: v(e),
144
- type: v(t),
145
- value: v(a),
146
- visible: v(!0),
147
- [e]: v(a)
136
+ const j = (n) => {
137
+ const l = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
138
+ return typeof n == "boolean" ? "boolean" : typeof n == "number" ? "number" : typeof n == "string" && l.test(n) ? "color" : typeof n == "string" ? "string" : n.isVector3 || n.isVector2 || n.isEuler || n instanceof Array ? "vector" : n.min !== void 0 || n.max !== void 0 || n.step !== void 0 ? "range" : n.options && Array.isArray(n.options) ? "select" : "unknown";
139
+ }, X = (n, l, t, e) => {
140
+ const a = {
141
+ key: y(n),
142
+ label: y(n),
143
+ name: y(n),
144
+ type: y(t),
145
+ value: y(l),
146
+ visible: y(!0),
147
+ [n]: y(l)
148
148
  };
149
- return n && (r.folder = v(n)), r;
150
- }, Tn = (e, a, t) => {
151
- const n = {}, r = typeof e == "string" ? e : null, l = r ? a : e, s = r && r !== "fpsgraph" ? t : a, p = (s == null ? void 0 : s.uuid) || te;
152
- if (V[p] || (V[p] = X({})), e === "fpsgraph") {
153
- const o = P("fpsgraph", null, "fpsgraph", null);
154
- return V[p].fpsgraph = o, n.fpsgraph = o, F(X(n));
149
+ return e && (a.folder = y(e)), a;
150
+ }, ke = (n, l) => {
151
+ let t = 1, e = `${n}_${t}`;
152
+ for (; l[e]; )
153
+ t++, e = `${n}_${t}`;
154
+ return e;
155
+ }, An = (n, l, t) => {
156
+ const e = {}, a = typeof n == "string" ? n : null, r = a ? l : n, i = a && a !== "fpsgraph" ? t : l, f = (i == null ? void 0 : i.uuid) || te;
157
+ if (F[f] || (F[f] = z({})), n === "fpsgraph") {
158
+ const o = X("fpsgraph", null, "fpsgraph", null);
159
+ return F[f].fpsgraph = o, e.fpsgraph = o, E(z(e));
155
160
  }
156
- const f = V[p], w = ue(l), u = w ? F(l) : {};
157
- for (const o in l) {
158
- let i = l[o];
159
- if (w && u[o] && (i = u[o]), typeof i == "object" && !K(i) && !Array.isArray(i) && i.value !== void 0) {
160
- const m = i, h = K(m.value) ? m.value : v(m.value), y = B(m), _ = P(o, h, y, r);
161
- y === "select" && (_.options = v(m.options.map((g) => typeof g == "object" && g.text && g.value ? g : {
162
- text: g,
163
- value: g
164
- }))), y === "range" && (_.min = v(m.min || 0), _.max = v(m.max || 1), _.step = v(m.step || 0.1)), _.label.value = m.label || o, _.visible.value = m.visible !== void 0 ? m.visible : !0, f[o] = _, n[o] = _;
161
+ const p = F[f], w = ue(r), c = w ? E(r) : {};
162
+ for (const o in r) {
163
+ let u = r[o], h = o;
164
+ if (w && c[o] && (u = c[o]), a && (h = `${a}${o.charAt(0).toUpperCase() + o.slice(1)}`), !a && p[h] && (h = ke(o, p)), typeof u == "object" && !L(u) && !Array.isArray(u) && u.value !== void 0) {
165
+ const s = u, m = L(s.value) ? s.value : y(s.value), $ = j(s), g = X(o, m, $, a);
166
+ $ === "select" && (g.options = y(s.options.map((x) => typeof x == "object" && x.text && x.value ? x : {
167
+ text: x,
168
+ value: x
169
+ }))), $ === "range" && (g.min = y(s.min || 0), g.max = y(s.max || 1), g.step = y(s.step || 0.1)), g.label.value = s.label || o, g.visible.value = s.visible !== void 0 ? s.visible : !0, p[h] = g, e[h] = g;
165
170
  continue;
166
171
  }
167
- if (K(i)) {
168
- const m = P(o, i, B(i.value), r);
169
- f[o] = m, n[o] = m;
172
+ if (L(u)) {
173
+ const s = X(o, u, j(u.value), a);
174
+ p[h] = s, e[h] = s;
170
175
  continue;
171
- } else if (typeof i == "object" && !Array.isArray(i)) {
172
- const m = F(i);
173
- m[o] && (i = m[o]);
176
+ } else if (typeof u == "object" && !Array.isArray(u)) {
177
+ const s = E(u);
178
+ s[o] && (u = s[o]);
174
179
  }
175
- const $ = P(o, i, B(i), r);
176
- f[o] = $, n[o] = $;
180
+ const T = X(o, u, j(u), a);
181
+ p[h] = T, e[h] = T, T.uniqueKey = h;
177
182
  }
178
- return Object.keys(n).length > 1 ? F(X(n)) : Object.values(n)[0];
179
- }, ke = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Me = { class: "text-gray-500 w-1/3" }, Se = ["value", "min", "max", "step"], Te = /* @__PURE__ */ S({
183
+ return Object.keys(e).length > 1 ? E(z(e)) : Object.values(e)[0];
184
+ }, Me = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Se = ["for"], Te = ["id", "value", "min", "max", "step"], Ae = /* @__PURE__ */ M({
180
185
  __name: "NumberControl",
181
186
  props: {
182
187
  label: {},
183
188
  control: {}
184
189
  },
185
190
  emits: ["change"],
186
- setup(e, { emit: a }) {
187
- const t = e;
188
- function n(u) {
189
- const { target: o } = u;
190
- a("change", o.valueAsNumber);
191
+ setup(n, { emit: l }) {
192
+ const t = n;
193
+ function e(c) {
194
+ const { target: o } = c;
195
+ l("change", o.valueAsNumber);
191
196
  }
192
- const r = Y(), l = v(0), s = v(!1), p = (u) => {
193
- l.value = u.clientX, s.value = !0;
194
- }, f = () => {
195
- s.value = !1;
196
- }, w = (u) => Math.floor(Math.abs(u) / 10);
197
- return W(r.x, (u) => {
198
- if (s.value) {
199
- const o = u - l.value, i = w(o);
200
- o > 0 ? a("change", t.control.value + 1 + i) : o < 0 && a("change", t.control.value - 1 + i), t.control.min !== void 0 && t.control.value < t.control.min && a("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && a("change", t.control.max), l.value = u;
197
+ const a = R(), r = y(0), i = y(!1), f = (c) => {
198
+ r.value = c.clientX, i.value = !0;
199
+ }, p = () => {
200
+ i.value = !1;
201
+ }, w = (c) => Math.floor(Math.abs(c) / 10);
202
+ return N(a.x, (c) => {
203
+ if (i.value) {
204
+ const o = c - r.value, u = w(o);
205
+ o > 0 ? l("change", t.control.value + 1 + u) : o < 0 && l("change", t.control.value - 1 + u), t.control.min !== void 0 && t.control.value < t.control.min && l("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && l("change", t.control.max), r.value = c;
201
206
  }
202
- }), (u, o) => (d(), x("div", ke, [
203
- c("label", Me, M(u.label), 1),
204
- c("input", {
205
- value: u.control.value,
206
- class: T(["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 }]),
207
+ }), (c, o) => (v(), _("div", Me, [
208
+ d("label", {
209
+ class: "text-gray-500 w-1/3",
210
+ for: c.control.uniqueKey
211
+ }, k(c.label), 9, Se),
212
+ d("input", {
213
+ id: c.control.uniqueKey,
214
+ value: c.control.value,
215
+ class: S(["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 }]),
207
216
  type: "number",
208
- min: u.control.min,
209
- max: u.control.max,
210
- step: u.control.step,
211
- onInput: n,
212
- onMousedown: p,
213
- onMouseup: f
214
- }, null, 42, Se)
217
+ min: c.control.min,
218
+ max: c.control.max,
219
+ step: c.control.step,
220
+ onInput: e,
221
+ onMousedown: f,
222
+ onMouseup: p
223
+ }, null, 42, Te)
215
224
  ]));
216
225
  }
217
- }), De = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Ae = ["for"], Ie = ["id", "value", "aria-label"], Ee = /* @__PURE__ */ S({
226
+ }), De = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Ie = ["for"], Ke = ["id", "value", "aria-label"], Ee = /* @__PURE__ */ M({
218
227
  __name: "TextControl",
219
228
  props: {
220
229
  label: {},
221
230
  control: {}
222
231
  },
223
232
  emits: ["change"],
224
- setup(e, { emit: a }) {
225
- function t(n) {
226
- const { target: r } = n;
227
- a("change", r.value);
233
+ setup(n, { emit: l }) {
234
+ function t(e) {
235
+ const { target: a } = e;
236
+ l("change", a.value);
228
237
  }
229
- return (n, r) => (d(), x("div", De, [
230
- c("label", {
231
- for: `input-${n.label}`,
238
+ return (e, a) => (v(), _("div", De, [
239
+ d("label", {
240
+ for: e.control.uniqueKey,
232
241
  class: "text-gray-500 w-1/3"
233
- }, M(n.label), 9, Ae),
234
- c("input", {
235
- id: `input-${n.label}`,
236
- value: n.control.value,
242
+ }, k(e.label), 9, Ie),
243
+ d("input", {
244
+ id: e.control.uniqueKey,
245
+ value: e.control.value,
237
246
  type: "text",
238
247
  tabindex: "0",
239
248
  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",
240
- "aria-label": n.label,
249
+ "aria-label": e.label,
241
250
  placeholder: "Enter value here...",
242
251
  onChange: t
243
- }, null, 40, Ie)
252
+ }, null, 40, Ke)
244
253
  ]));
245
254
  }
246
- }), Fe = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, Ve = { class: "text-gray-500 w-1/3" }, ze = ["id", "checked"], Oe = ["for"], Ue = ["aria-checked"], Xe = { class: "i-ic:baseline-check text-light" }, Le = /* @__PURE__ */ S({
255
+ }), Fe = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, Ve = { class: "text-gray-500 w-1/3" }, qe = ["id", "checked"], Ue = ["for"], ze = ["aria-checked"], Oe = { class: "i-ic:baseline-check text-light" }, Xe = /* @__PURE__ */ M({
247
256
  __name: "BooleanControl",
248
257
  props: {
249
258
  label: {},
250
259
  control: {}
251
260
  },
252
261
  emits: ["change"],
253
- setup(e, { emit: a }) {
254
- const t = e;
255
- function n(l) {
256
- const { target: s } = l;
257
- a("change", s.checked);
262
+ setup(n, { emit: l }) {
263
+ const t = n;
264
+ function e(r) {
265
+ const { target: i } = r;
266
+ l("change", i.checked);
258
267
  }
259
- function r(l) {
260
- (l.code === "Space" || l.code === "Enter") && (l.preventDefault(), a("change", !t.control.value));
268
+ function a(r) {
269
+ (r.code === "Space" || r.code === "Enter") && (r.preventDefault(), l("change", !t.control.value));
261
270
  }
262
- return (l, s) => (d(), x("div", Fe, [
263
- c("label", Ve, M(l.label), 1),
264
- c("input", {
265
- id: l.control.label,
266
- checked: l.control.value,
271
+ return (r, i) => (v(), _("div", Fe, [
272
+ d("label", Ve, k(r.label), 1),
273
+ d("input", {
274
+ id: r.control.uniqueKey,
275
+ checked: r.control.value,
267
276
  class: "hidden",
268
277
  type: "checkbox",
269
- onInput: n
270
- }, null, 40, ze),
271
- c("label", {
272
- for: l.control.label,
278
+ onInput: e
279
+ }, null, 40, qe),
280
+ d("label", {
281
+ for: r.control.uniqueKey,
273
282
  class: "inline-flex items-center cursor-pointer"
274
283
  }, [
275
- c("span", {
284
+ d("span", {
276
285
  tabindex: "0",
277
286
  role: "checkbox",
278
- "aria-checked": l.control.value.toString(),
279
- class: T([{ "bg-dark-500": l.control.value, "bg-gray-200": !l.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),
280
- onKeydown: r
287
+ "aria-checked": r.control.value.toString(),
288
+ class: S([{ "bg-dark-500": r.control.value, "bg-gray-200": !r.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),
289
+ onKeydown: a
281
290
  }, [
282
- J(c("i", Xe, null, 512), [
283
- [Q, l.control.value]
291
+ J(d("i", Oe, null, 512), [
292
+ [Q, r.control.value]
284
293
  ])
285
- ], 42, Ue)
286
- ], 8, Oe)
294
+ ], 42, ze)
295
+ ], 8, Ue)
287
296
  ]));
288
297
  }
289
- }), Pe = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, Ke = ["value", "min", "max", "step"], Ne = ["value", "min", "max", "step"], We = /* @__PURE__ */ S({
298
+ }), Le = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, Pe = ["value", "min", "max", "step"], Ne = ["value", "min", "max", "step"], We = /* @__PURE__ */ M({
290
299
  __name: "SliderControl",
291
300
  props: {
292
301
  label: {},
293
302
  control: {}
294
303
  },
295
304
  emits: ["change"],
296
- setup(e, { emit: a }) {
297
- const t = e;
298
- function n(o) {
299
- const { target: i } = o;
300
- a("change", i.valueAsNumber);
305
+ setup(n, { emit: l }) {
306
+ const t = n;
307
+ function e(o) {
308
+ const { target: u } = o;
309
+ l("change", u.valueAsNumber);
301
310
  }
302
- const r = E(() => ({
311
+ const a = K(() => ({
303
312
  backgroundImage: `linear-gradient(to right, #333 0% ${100 * (t.control.value - (t.control.min || 0)) / ((t.control.max || 100) - (t.control.min || 0))}%, #e2e2e2 0%)`
304
- })), l = Y(), s = v(0), p = v(!1), f = (o) => {
305
- s.value = o.clientX, p.value = !0;
313
+ })), r = R(), i = y(0), f = y(!1), p = (o) => {
314
+ i.value = o.clientX, f.value = !0;
306
315
  }, w = () => {
307
- p.value = !1;
308
- }, u = (o) => Math.floor(Math.abs(o) / 10);
309
- return W(l.x, (o) => {
310
- if (p.value) {
311
- const i = o - s.value, $ = u(i);
312
- i > 0 ? a("change", t.control.value + 1 + $) : i < 0 && a("change", t.control.value - 1 + $), t.control.min !== void 0 && t.control.value < t.control.min && a("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && a("change", t.control.max), s.value = o;
316
+ f.value = !1;
317
+ }, c = (o) => Math.floor(Math.abs(o) / 10);
318
+ return N(r.x, (o) => {
319
+ if (f.value) {
320
+ const u = o - i.value, h = c(u);
321
+ u > 0 ? l("change", t.control.value + 1 + h) : u < 0 && l("change", t.control.value - 1 + h), t.control.min !== void 0 && t.control.value < t.control.min && l("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && l("change", t.control.max), i.value = o;
313
322
  }
314
- }), (o, i) => (d(), x("div", Pe, [
315
- c("label", {
316
- class: T(["text-gray-500 w-1/3", { "flex justify-between items-center": o.control.icon }])
323
+ }), (o, u) => (v(), _("div", Le, [
324
+ d("label", {
325
+ class: S(["text-gray-500 w-1/3", { "flex justify-between items-center": o.control.icon }])
317
326
  }, [
318
- pe(M(o.label) + " ", 1),
319
- c("i", {
320
- class: T(`i-${o.control.icon}`)
327
+ de(k(o.label) + " ", 1),
328
+ d("i", {
329
+ class: S(`i-${o.control.icon}`)
321
330
  }, null, 2)
322
331
  ], 2),
323
- c("input", {
332
+ d("input", {
324
333
  value: o.control.value,
325
334
  class: "w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",
326
- style: de(r.value),
335
+ style: fe(a.value),
327
336
  type: "range",
328
337
  min: o.control.min,
329
338
  max: o.control.max,
330
339
  step: o.control.step,
331
- onInput: n
332
- }, null, 44, Ke),
333
- c("input", {
340
+ onInput: e
341
+ }, null, 44, Pe),
342
+ d("input", {
334
343
  value: o.control.value,
335
- class: T(["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 }]),
344
+ class: S(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": f.value }]),
336
345
  type: "number",
337
346
  min: o.control.min,
338
347
  max: o.control.max,
339
348
  step: o.control.step,
340
- onInput: n,
341
- onMousedown: f,
349
+ onInput: e,
350
+ onMousedown: p,
342
351
  onMouseup: w
343
352
  }, null, 42, Ne)
344
353
  ]));
345
354
  }
346
355
  });
347
- const je = (e, a) => {
348
- const t = e.__vccOpts || e;
349
- for (const [n, r] of a)
350
- t[n] = r;
356
+ const je = (n, l) => {
357
+ const t = n.__vccOpts || n;
358
+ for (const [e, a] of l)
359
+ t[e] = a;
351
360
  return t;
352
- }, Be = /* @__PURE__ */ je(We, [["__scopeId", "data-v-9e6267fe"]]), Re = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Ye = { class: "text-gray-500 w-1/3" }, He = ["id", "value", "aria-label"], Ge = ["id", "aria-label", "value"], qe = /* @__PURE__ */ S({
361
+ }, Be = /* @__PURE__ */ je(We, [["__scopeId", "data-v-9e6267fe"]]), Re = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Ye = { class: "text-gray-500 w-1/3" }, He = ["id", "value", "aria-label"], Ge = ["id", "aria-label", "value"], Je = /* @__PURE__ */ M({
353
362
  __name: "ColorControl",
354
363
  props: {
355
364
  label: {},
356
365
  control: {}
357
366
  },
358
367
  emits: ["change"],
359
- setup(e, { emit: a }) {
360
- function t(n) {
361
- const { target: r } = n;
362
- a("change", r.value);
368
+ setup(n, { emit: l }) {
369
+ function t(e) {
370
+ const { target: a } = e;
371
+ l("change", a.value);
363
372
  }
364
- return (n, r) => (d(), x("div", Re, [
365
- c("label", Ye, M(n.label), 1),
366
- c("input", {
367
- id: `input-${n.label}`,
373
+ return (e, a) => (v(), _("div", Re, [
374
+ d("label", Ye, k(e.label), 1),
375
+ d("input", {
376
+ id: e.control.uniqueKey,
368
377
  tabindex: "0",
369
- value: n.control.value,
370
- "aria-label": n.label,
371
- class: T(["focus:outline-none focus:ring-2 focus:ring-blue-600", { "important-outline-gray-200": n.control.value === "#ffffff" }]),
378
+ value: e.control.value,
379
+ "aria-label": e.label,
380
+ class: S(["focus:outline-none focus:ring-2 focus:ring-blue-600", { "important-outline-gray-200": e.control.value === "#ffffff" }]),
372
381
  type: "color",
373
382
  onInput: t
374
383
  }, null, 42, He),
375
- c("input", {
376
- id: `input-${n.label}`,
384
+ d("input", {
385
+ id: e.control.uniqueKey,
377
386
  tabindex: "0",
378
- "aria-label": n.label,
379
- value: n.control.value,
387
+ "aria-label": e.label,
388
+ value: e.control.value,
380
389
  class: "p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 border-none font-sans",
381
390
  type: "text",
382
391
  onInput: t
@@ -384,227 +393,233 @@ const je = (e, a) => {
384
393
  ]));
385
394
  }
386
395
  });
387
- function Je(e) {
388
- if (typeof e == "number")
389
- return [e, e, e];
390
- if (oe(e)) {
391
- const { x: a, y: t, z: n } = e;
392
- return [a, t, n];
396
+ function Qe(n) {
397
+ if (typeof n == "number")
398
+ return [n, n, n];
399
+ if (oe(n)) {
400
+ const { x: l, y: t, z: e } = n;
401
+ return [l, t, e];
393
402
  }
394
- return e;
403
+ return n;
395
404
  }
396
- function Qe(e) {
397
- return e && typeof e.x == "number" && typeof e.y == "number" && typeof e.z > "u";
405
+ function Ze(n) {
406
+ return n && typeof n.x == "number" && typeof n.y == "number" && typeof n.z > "u";
398
407
  }
399
- function oe(e) {
400
- return e && typeof e.x == "number" && typeof e.y == "number" && typeof e.z == "number";
408
+ function oe(n) {
409
+ return n && typeof n.x == "number" && typeof n.y == "number" && typeof n.z == "number";
401
410
  }
402
- const Ze = { class: "text-gray-500 w-1/3" }, en = { class: "w-2/3 flex justify-between gap-0.5" }, nn = {
411
+ const en = { class: "text-gray-500 w-1/3" }, nn = { class: "w-2/3 flex justify-between gap-0.5" }, tn = {
403
412
  key: 0,
404
413
  class: "font-bold px-1 py-1 text-0.65rem text-gray-300"
405
- }, tn = ["value", "onInput", "onMousedown", "onMouseup"], on = /* @__PURE__ */ S({
414
+ }, on = ["id", "value", "onInput", "onMousedown", "onMouseup"], ln = /* @__PURE__ */ M({
406
415
  __name: "VectorControl",
407
416
  props: {
408
417
  label: {},
409
418
  control: {}
410
419
  },
411
420
  emits: ["change"],
412
- setup(e, { emit: a }) {
413
- const t = e, n = Y(), r = v(0), l = v(!1), s = v(0), p = (h, y) => {
414
- s.value = y, r.value = h.clientX, l.value = !0;
415
- }, f = (h, y) => {
416
- s.value = y, l.value = !1;
421
+ setup(n, { emit: l }) {
422
+ const t = n, e = R(), a = y(0), r = y(!1), i = y(0), f = (s, m) => {
423
+ i.value = m, a.value = s.clientX, r.value = !0;
424
+ }, p = (s, m) => {
425
+ i.value = m, r.value = !1;
417
426
  }, w = () => {
418
- l.value = !1;
419
- }, u = (h) => Math.floor(Math.abs(h) / 10), o = E(() => Je(t.control.value)), i = v(["x", "y", "z"]), $ = E(() => Qe(t.control.value) || oe(t.control.value));
420
- function m(h, y) {
421
- const { value: _ } = t.control, { target: g } = h;
422
- s.value = y, _[$.value ? i.value[s.value] : s.value] = parseFloat(g.value), a("change", _);
427
+ r.value = !1;
428
+ }, c = (s) => Math.floor(Math.abs(s) / 10), o = K(() => Qe(t.control.value)), u = y(["x", "y", "z"]), h = K(() => Ze(t.control.value) || oe(t.control.value));
429
+ function T(s, m) {
430
+ const { value: $ } = t.control, { target: g } = s;
431
+ i.value = m, $[h.value ? u.value[i.value] : i.value] = parseFloat(g.value), l("change", $);
423
432
  }
424
- return W(n.x, (h) => {
425
- if (l.value) {
426
- const y = h - r.value, _ = u(y), { value: g } = t.control, C = $.value ? i.value[s.value] : s.value;
427
- y > 0 ? g[C] += 0.1 + _ : y < 0 && (g[C] -= 0.1 + _), t.control.min !== void 0 && g < t.control.min && (g[C] = t.control.min), t.control.max !== void 0 && g > t.control.max && (g[C] = t.control.max), a("change", g), r.value = h;
433
+ return N(e.x, (s) => {
434
+ if (r.value) {
435
+ const m = s - a.value, $ = c(m), { value: g } = t.control, x = h.value ? u.value[i.value] : i.value;
436
+ m > 0 ? g[x] += 0.1 + $ : m < 0 && (g[x] -= 0.1 + $), t.control.min !== void 0 && g < t.control.min && (g[x] = t.control.min), t.control.max !== void 0 && g > t.control.max && (g[x] = t.control.max), l("change", g), a.value = s;
428
437
  }
429
- }), (h, y) => (d(), x("div", {
438
+ }), (s, m) => (v(), _("div", {
430
439
  class: "flex px-4 justify-between gap-1 items-center mb-2",
431
- onMouseup: y[0] || (y[0] = (_) => w())
440
+ onMouseup: m[0] || (m[0] = ($) => w())
432
441
  }, [
433
- c("label", Ze, M(h.label), 1),
434
- c("div", en, [
435
- (d(!0), x(I, null, L(o.value, (_, g) => (d(), x("div", {
436
- key: h.label + g,
442
+ d("label", en, k(s.label), 1),
443
+ d("div", nn, [
444
+ (v(!0), _(I, null, O(o.value, ($, g) => (v(), _("div", {
445
+ key: s.label + g,
437
446
  class: "flex items-center w-1/3 bg-gray-100 rounded"
438
447
  }, [
439
- i.value[g] && $.value ? (d(), x("span", nn, M(i.value[g]), 1)) : N("", !0),
440
- c("input", {
448
+ u.value[g] && h.value ? (v(), _("span", tn, k(u.value[g]), 1)) : P("", !0),
449
+ d("input", {
450
+ id: `${s.control.uniqueKey}-${u.value[g]}`,
441
451
  type: "number",
442
452
  step: "0.1",
443
- class: T(["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": l.value }]),
453
+ class: S(["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": r.value }]),
444
454
  value: o.value[g].toFixed(2),
445
- onInput: (C) => m(C, g),
446
- onMousedown: (C) => p(C, g),
447
- onMouseup: (C) => f(C, g)
448
- }, null, 42, tn)
455
+ onInput: (x) => T(x, g),
456
+ onMousedown: (x) => f(x, g),
457
+ onMouseup: (x) => p(x, g)
458
+ }, null, 42, on)
449
459
  ]))), 128))
450
460
  ])
451
461
  ], 32));
452
462
  }
453
- }), ln = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, an = { class: "text-gray-500 w-1/3" }, rn = { 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" }, sn = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, cn = ["points"], H = 160, R = 40, U = 2, G = 100, q = 20, un = /* @__PURE__ */ S({
463
+ }), an = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, rn = { class: "text-gray-500 w-1/3" }, sn = { 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" }, cn = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, un = ["points"], Y = 160, B = 40, U = 2, H = 100, G = 20, dn = /* @__PURE__ */ M({
454
464
  __name: "FPSGraph",
455
465
  props: {
456
466
  label: {},
457
467
  control: {}
458
468
  },
459
- setup(e) {
460
- const a = he({ every: G }), t = v(""), n = v([]), r = v(H / U);
461
- let l = performance.now();
462
- return ye(({ timestamp: s }) => {
463
- s - l >= G && (l = s, n.value.push(a.value), n.value.length > r.value && n.value.shift(), t.value = n.value.map(
464
- (p, f) => `${f * U},${R + q - U / 2 - p * (R + q - U) / 120}`
469
+ setup(n) {
470
+ const l = be({ every: H }), t = y(""), e = y([]), a = y(Y / U);
471
+ let r = performance.now();
472
+ return he(({ timestamp: i }) => {
473
+ i - r >= H && (r = i, e.value.push(l.value), e.value.length > a.value && e.value.shift(), t.value = e.value.map(
474
+ (f, p) => `${p * U},${B + G - U / 2 - f * (B + G - U) / 120}`
465
475
  ).join(" "));
466
- }), (s, p) => (d(), x("div", ln, [
467
- c("label", an, M(s.label), 1),
468
- c("div", rn, [
469
- c("div", sn, M(Math.round(D(a))) + " FPS ", 1),
470
- (d(), x("svg", {
471
- width: H,
472
- height: R,
476
+ }), (i, f) => (v(), _("div", an, [
477
+ d("label", rn, k(i.label), 1),
478
+ d("div", sn, [
479
+ d("div", cn, k(Math.round(A(l))) + " FPS ", 1),
480
+ (v(), _("svg", {
481
+ width: Y,
482
+ height: B,
473
483
  xmlns: "http://www.w3.org/2000/svg",
474
484
  class: "bg-gray-100"
475
485
  }, [
476
- c("polyline", {
486
+ d("polyline", {
477
487
  points: t.value,
478
488
  fill: "none",
479
489
  stroke: "lightgray",
480
490
  "stroke-width": U,
481
491
  "stroke-linecap": "round",
482
492
  "stroke-linejoin": "round"
483
- }, null, 8, cn)
493
+ }, null, 8, un)
484
494
  ]))
485
495
  ])
486
496
  ]));
487
497
  }
488
- }), pn = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, dn = { class: "text-gray-500 w-1/3" }, fn = ["value"], vn = ["value"], gn = /* @__PURE__ */ S({
498
+ }), fn = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, pn = ["for"], vn = ["id", "value"], gn = ["value"], yn = /* @__PURE__ */ M({
489
499
  __name: "SelectControl",
490
500
  props: {
491
501
  label: {},
492
502
  control: {}
493
503
  },
494
504
  emits: ["change"],
495
- setup(e, { emit: a }) {
496
- function t(n) {
497
- a("change", n.target.value);
505
+ setup(n, { emit: l }) {
506
+ function t(e) {
507
+ l("change", e.target.value);
498
508
  }
499
- return (n, r) => (d(), x("div", pn, [
500
- c("label", dn, M(n.label), 1),
501
- c("select", {
502
- value: n.control.value,
509
+ return (e, a) => (v(), _("div", fn, [
510
+ d("label", {
511
+ class: "text-gray-500 w-1/3",
512
+ for: e.control.uniqueKey
513
+ }, k(e.label), 9, pn),
514
+ d("select", {
515
+ id: e.control.uniqueKey,
516
+ value: e.control.value,
503
517
  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",
504
518
  onChange: t
505
519
  }, [
506
- (d(!0), x(I, null, L(n.control.options, (l) => (d(), x("option", {
507
- key: l.value,
508
- value: l.value
509
- }, M(l.text), 9, vn))), 128))
510
- ], 40, fn)
520
+ (v(!0), _(I, null, O(e.control.options, (r) => (v(), _("option", {
521
+ key: r.value,
522
+ value: r.value
523
+ }, k(r.text), 9, gn))), 128))
524
+ ], 40, vn)
511
525
  ]));
512
526
  }
513
- }), le = /* @__PURE__ */ S({
527
+ }), le = /* @__PURE__ */ M({
514
528
  __name: "ControlInput",
515
529
  props: {
516
530
  control: {}
517
531
  },
518
532
  emits: ["change"],
519
- setup(e, { emit: a }) {
520
- function t(n) {
521
- a("change", n);
533
+ setup(n, { emit: l }) {
534
+ function t(e) {
535
+ l("change", e);
522
536
  }
523
- return (n, r) => n.control.visible ? (d(), x(I, { key: 0 }, [
524
- n.control.type === "color" ? (d(), k(qe, {
537
+ return (e, a) => e.control.visible ? (v(), _(I, { key: 0 }, [
538
+ e.control.type === "color" ? (v(), C(Je, {
525
539
  key: 0,
526
- label: n.control.label,
527
- control: n.control,
540
+ label: e.control.label,
541
+ control: e.control,
528
542
  onChange: t
529
- }, null, 8, ["label", "control"])) : n.control.type === "select" ? (d(), k(gn, {
543
+ }, null, 8, ["label", "control"])) : e.control.type === "select" ? (v(), C(yn, {
530
544
  key: 1,
531
- label: n.control.label,
532
- control: n.control,
545
+ label: e.control.label,
546
+ control: e.control,
533
547
  onChange: t
534
- }, null, 8, ["label", "control"])) : n.control.type === "vector" ? (d(), k(on, {
548
+ }, null, 8, ["label", "control"])) : e.control.type === "vector" ? (v(), C(ln, {
535
549
  key: 2,
536
- label: n.control.label,
537
- control: n.control,
550
+ label: e.control.label,
551
+ control: e.control,
538
552
  onChange: t
539
- }, null, 8, ["label", "control"])) : n.control.type === "boolean" ? (d(), k(Le, {
553
+ }, null, 8, ["label", "control"])) : e.control.type === "boolean" ? (v(), C(Xe, {
540
554
  key: 3,
541
- label: n.control.label,
542
- control: n.control,
555
+ label: e.control.label,
556
+ control: e.control,
543
557
  onChange: t
544
- }, null, 8, ["label", "control"])) : n.control.type === "fpsgraph" ? (d(), k(un, {
558
+ }, null, 8, ["label", "control"])) : e.control.type === "fpsgraph" ? (v(), C(dn, {
545
559
  key: 4,
546
- label: n.control.label,
547
- control: n.control
548
- }, null, 8, ["label", "control"])) : n.control.type === "number" ? (d(), k(Te, {
560
+ label: e.control.label,
561
+ control: e.control
562
+ }, null, 8, ["label", "control"])) : e.control.type === "number" ? (v(), C(Ae, {
549
563
  key: 5,
550
- label: n.control.label,
551
- control: n.control,
564
+ label: e.control.label,
565
+ control: e.control,
552
566
  onChange: t
553
- }, null, 8, ["label", "control"])) : n.control.type === "range" ? (d(), k(Be, {
567
+ }, null, 8, ["label", "control"])) : e.control.type === "range" ? (v(), C(Be, {
554
568
  key: 6,
555
- label: n.control.label,
556
- control: n.control,
569
+ label: e.control.label,
570
+ control: e.control,
557
571
  onChange: t
558
- }, null, 8, ["label", "control"])) : (d(), k(Ee, {
572
+ }, null, 8, ["label", "control"])) : (v(), C(Ee, {
559
573
  key: 7,
560
- label: n.control.label,
561
- control: n.control,
574
+ label: e.control.label,
575
+ control: e.control,
562
576
  onChange: t
563
577
  }, null, 8, ["label", "control"]))
564
- ], 64)) : N("", !0);
578
+ ], 64)) : P("", !0);
565
579
  }
566
- }), bn = { class: "mb-4" }, hn = ["aria-expanded"], yn = {
580
+ }), bn = { class: "mb-4" }, hn = ["aria-expanded", "data-folder"], mn = {
567
581
  class: "bg-white rounded-b pt-4",
568
582
  role: "menu"
569
- }, mn = /* @__PURE__ */ S({
583
+ }, _n = /* @__PURE__ */ M({
570
584
  __name: "Folder",
571
585
  props: {
572
586
  controls: {},
573
587
  label: {}
574
588
  },
575
- setup(e) {
576
- function a(r, l) {
577
- l.value = r;
589
+ setup(n) {
590
+ function l(a, r) {
591
+ r.value = a;
578
592
  }
579
- const t = v(!1), n = () => {
593
+ const t = y(!1), e = () => {
580
594
  t.value = !t.value;
581
595
  };
582
- return (r, l) => (d(), x("div", bn, [
583
- c("button", {
596
+ return (a, r) => (v(), _("div", bn, [
597
+ d("button", {
584
598
  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",
585
599
  "aria-expanded": t.value,
586
600
  "aria-haspopup": "true",
587
601
  role: "button",
602
+ "data-folder": a.label,
588
603
  tabindex: "0",
589
- onClick: n
604
+ onClick: e
590
605
  }, [
591
- c("span", null, M(r.label), 1),
592
- c("i", {
593
- class: T(t.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
606
+ d("span", null, k(a.label), 1),
607
+ d("i", {
608
+ class: S(t.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
594
609
  }, null, 2)
595
610
  ], 8, hn),
596
- fe(ve, {
611
+ pe(ve, {
597
612
  name: "slide",
598
613
  "enter-active-class": " animate-fade-in animate-duration-200 animate-ease-in-out",
599
614
  "leave-active-class": " animate-fade-out animate-duration-200 animate-ease-in-out"
600
615
  }, {
601
616
  default: Z(() => [
602
- J(c("div", yn, [
603
- (d(!0), x(I, null, L(r.controls, (s) => (d(), k(le, {
604
- key: s.label,
605
- control: s,
617
+ J(d("div", mn, [
618
+ (v(!0), _(I, null, O(a.controls, (i) => (v(), C(le, {
619
+ key: i.label,
620
+ control: i,
606
621
  role: "menuitem",
607
- onChange: (p) => a(p, s)
622
+ onChange: (f) => l(f, i)
608
623
  }, null, 8, ["control", "onChange"]))), 128))
609
624
  ], 512), [
610
625
  [Q, t.value]
@@ -614,59 +629,59 @@ const Ze = { class: "text-gray-500 w-1/3" }, en = { class: "w-2/3 flex justify-b
614
629
  })
615
630
  ]));
616
631
  }
617
- }), _n = {
632
+ }), xn = {
618
633
  tabindex: "0",
619
634
  class: "bg-white shadow-xl rounded border-4 border-solid border-black"
620
- }, xn = /* @__PURE__ */ c("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), wn = /* @__PURE__ */ c("div", null, [
621
- /* @__PURE__ */ c("i", { class: "i-ic-baseline-drag-indicator" }),
622
- /* @__PURE__ */ c("i", { class: "i-ic-baseline-drag-indicator" }),
623
- /* @__PURE__ */ c("i", { class: "i-ic-baseline-drag-indicator" })
624
- ], -1), $n = /* @__PURE__ */ c("div", null, null, -1), Cn = [
625
- xn,
635
+ }, wn = /* @__PURE__ */ d("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), $n = /* @__PURE__ */ d("div", null, [
636
+ /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" }),
637
+ /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" }),
638
+ /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" })
639
+ ], -1), Cn = /* @__PURE__ */ d("div", null, null, -1), kn = [
626
640
  wn,
627
- $n
628
- ], kn = 280, Dn = /* @__PURE__ */ S({
641
+ $n,
642
+ Cn
643
+ ], Mn = 280, Dn = /* @__PURE__ */ M({
629
644
  __name: "TresLeches",
630
645
  props: {
631
646
  uuid: {}
632
647
  },
633
- setup(e) {
634
- const a = e, { uuid: t } = F(a), { width: n } = ee(), r = v(null), l = Ce(t == null ? void 0 : t.value);
635
- function s(f, w) {
636
- l[D(f)].value = w, l[D(f)][D(f)] = w;
648
+ setup(n) {
649
+ const l = n, { uuid: t } = E(l), { width: e } = ee(), a = y(null), r = Ce(t == null ? void 0 : t.value);
650
+ function i(p, w) {
651
+ r[A(p)].value = w, r[A(p)][A(p)] = w;
637
652
  }
638
- const p = E(() => {
639
- const f = {};
640
- for (const w in l) {
641
- const u = l[w], o = u.folder || "default";
642
- f[o] || (f[o] = []), f[o].push(u);
653
+ const f = K(() => {
654
+ const p = {};
655
+ for (const w in r) {
656
+ const c = r[w], o = c.folder || "default";
657
+ p[o] || (p[o] = []), p[o].push(c);
643
658
  }
644
- return f;
659
+ return p;
645
660
  });
646
- return (f, w) => (d(), k(D(we), {
647
- id: D(t),
648
- "initial-value": { x: D(n) - kn - 40, y: 10 },
649
- class: T(["absolute select-none z-24 w-280px font-sans text-xs", f.$attrs.class]),
650
- handle: r.value
661
+ return (p, w) => (v(), C(A(we), {
662
+ id: A(t),
663
+ "initial-value": { x: A(e) - Mn - 40, y: 10 },
664
+ class: S(["absolute select-none z-24 w-280px font-sans text-xs", p.$attrs.class]),
665
+ handle: a.value
651
666
  }, {
652
667
  default: Z(() => [
653
- c("div", _n, [
654
- c("header", {
668
+ d("div", xn, [
669
+ d("header", {
655
670
  ref_key: "handle",
656
- ref: r,
671
+ ref: a,
657
672
  class: "relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"
658
- }, Cn, 512),
659
- (d(!0), x(I, null, L(p.value, (u, o) => (d(), x(I, { key: o }, [
660
- o !== "default" ? (d(), k(mn, {
673
+ }, kn, 512),
674
+ (v(!0), _(I, null, O(f.value, (c, o) => (v(), _(I, { key: o }, [
675
+ o !== "default" ? (v(), C(_n, {
661
676
  key: 0,
662
677
  label: o,
663
- controls: u
664
- }, null, 8, ["label", "controls"])) : N("", !0),
665
- o === "default" ? (d(!0), x(I, { key: 1 }, L(u, (i) => (d(), k(le, {
666
- key: i.label,
667
- control: i,
668
- onChange: ($) => s(i.key, $)
669
- }, null, 8, ["control", "onChange"]))), 128)) : N("", !0)
678
+ controls: c
679
+ }, null, 8, ["label", "controls"])) : P("", !0),
680
+ o === "default" ? (v(!0), _(I, { key: 1 }, O(c, (u) => (v(), C(le, {
681
+ key: u.label,
682
+ control: u,
683
+ onChange: (h) => i(u.key, h)
684
+ }, null, 8, ["control", "onChange"]))), 128)) : P("", !0)
670
685
  ], 64))), 128))
671
686
  ])
672
687
  ]),
@@ -676,6 +691,6 @@ const Ze = { class: "text-gray-500 w-1/3" }, en = { class: "w-2/3 flex justify-b
676
691
  });
677
692
  export {
678
693
  Dn as TresLeches,
679
- Tn as useControls,
694
+ An as useControls,
680
695
  Ce as useControlsProvider
681
696
  };
package/dist/tresleches.umd.cjs CHANGED
@@ -1,8 +1,8 @@
1
1
  /**
2
2
  * name: @tresjs/leches
3
- * version: v0.10.0
3
+ * version: v0.11.0
4
4
  * (c) 2023
5
5
  * description: Tasty GUI for Vue controls 🍰
6
6
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
7
7
  */
8
- (function(E,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):(E=typeof globalThis<"u"?globalThis:E||self,e(E.tresleches={},E.Vue,E.VueUseCore))})(this,function(E,e,x){"use strict";const Ke="";function C(t){return typeof t=="function"?t():e.unref(t)}const T=typeof window<"u"&&typeof document<"u";function U(t,a={}){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(s){var r;if((r=C(a.replaceRef))!=null?r:!0)if(Array.isArray(t.value)){const p=[...t.value];p[n]=s,t.value=p}else{const p={...t.value,[n]:s};Object.setPrototypeOf(p,Object.getPrototypeOf(t.value)),t.value=p}else t.value[n]=s}}));return o}const P=T?window:void 0;function X(t,a={}){const{pointerTypes:o,preventDefault:n,stopPropagation:s,exact:r,onMove:c,onEnd:p,onStart:f,initialValue:_,axis:d="both",draggingElement:l=P,handle:i=t}=a,{width:k}=x.useWindowSize();let b=k.value;const g=e.ref(C(_)??{x:0,y:0});e.watch(k,()=>{const m=k.value-b;g.value.x+=m,b=k.value});const h=e.ref(),y=m=>o?o.includes(m.pointerType):!0,u=m=>{C(n)&&m.preventDefault(),C(s)&&m.stopPropagation()},w=m=>{if(!y(m)||C(r)&&m.target!==C(t))return;const $=C(t).getBoundingClientRect(),N={x:m.clientX-$.left,y:m.clientY-$.top};(f==null?void 0:f(N,m))!==!1&&(h.value=N,u(m))},je=m=>{if(!y(m)||!h.value)return;let{x:$,y:N}=g.value;(d==="x"||d==="both")&&($=m.clientX-h.value.x),(d==="y"||d==="both")&&(N=m.clientY-h.value.y),g.value={x:$,y:N},c==null||c(g.value,m),u(m)},We=m=>{y(m)&&h.value&&(h.value=void 0,p==null||p(g.value,m),u(m))};if(T){const m={capture:a.capture??!0};x.useEventListener(i,"pointerdown",w,m),x.useEventListener(l,"pointermove",je,m),x.useEventListener(l,"pointerup",We,m)}return{...U(g),position:g,isDragging:e.computed(()=>!!h.value),style:e.computed(()=>`left:${g.value.x}px;top:${g.value.y}px;`)}}const j=e.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(t,{slots:a}){const o=e.ref(),n=e.computed(()=>t.handle??o.value),s=t.storageKey&&x.useStorage(t.storageKey,C(t.initialValue)||{x:0,y:0},x.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0),r=s||t.initialValue||{x:0,y:0},c=(f,_)=>{var d;(d=t.onEnd)==null||d.call(t,f,_),s&&(s.value.x=f.x,s.value.y=f.y)},p=e.reactive(X(o,{...t,handle:n,initialValue:r,onEnd:c}));return()=>{if(a.default)return e.h(t.as||"div",{ref:o,style:`touch-action:none;${p.style}`},a.default(p))}}}),W=Symbol("CONTROLS_CONTEXT_KEY"),F="default",B=e.reactive({});function z(t=F){return e.provide(W,B),B[t]}const D=t=>{const a=/^#([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"&&a.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"},S=(t,a,o,n)=>{const s={key:e.ref(t),label:e.ref(t),name:e.ref(t),type:e.ref(o),value:e.ref(a),visible:e.ref(!0),[t]:e.ref(a)};return n&&(s.folder=e.ref(n)),s},K=(t,a,o)=>{const n={},s=typeof t=="string"?t:null,r=s?a:t,c=s&&s!=="fpsgraph"?o:a,p=(c==null?void 0:c.uuid)||F;if(B[p]||(B[p]=e.reactive({})),t==="fpsgraph"){const l=S("fpsgraph",null,"fpsgraph",null);return B[p].fpsgraph=l,n.fpsgraph=l,e.toRefs(e.reactive(n))}const f=B[p],_=e.isReactive(r),d=_?e.toRefs(r):{};for(const l in r){let i=r[l];if(_&&d[l]&&(i=d[l]),typeof i=="object"&&!e.isRef(i)&&!Array.isArray(i)&&i.value!==void 0){const b=i,g=e.isRef(b.value)?b.value:e.ref(b.value),h=D(b),y=S(l,g,h,s);h==="select"&&(y.options=e.ref(b.options.map(u=>typeof u=="object"&&u.text&&u.value?u:{text:u,value:u}))),h==="range"&&(y.min=e.ref(b.min||0),y.max=e.ref(b.max||1),y.step=e.ref(b.step||.1)),y.label.value=b.label||l,y.visible.value=b.visible!==void 0?b.visible:!0,f[l]=y,n[l]=y;continue}if(e.isRef(i)){const b=S(l,i,D(i.value),s);f[l]=b,n[l]=b;continue}else if(typeof i=="object"&&!Array.isArray(i)){const b=e.toRefs(i);b[l]&&(i=b[l])}const k=S(l,i,D(i),s);f[l]=k,n[l]=k}return Object.keys(n).length>1?e.toRefs(e.reactive(n)):Object.values(n)[0]},Y={class:"flex px-4 justify-between gap-4 items-center mb-2"},q={class:"text-gray-500 w-1/3"},H=["value","min","max","step"],G=e.defineComponent({__name:"NumberControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:a}){const o=t;function n(d){const{target:l}=d;a("change",l.valueAsNumber)}const s=x.useMouse(),r=e.ref(0),c=e.ref(!1),p=d=>{r.value=d.clientX,c.value=!0},f=()=>{c.value=!1},_=d=>Math.floor(Math.abs(d)/10);return e.watch(s.x,d=>{if(c.value){const l=d-r.value,i=_(l);l>0?a("change",o.control.value+1+i):l<0&&a("change",o.control.value-1+i),o.control.min!==void 0&&o.control.value<o.control.min&&a("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&a("change",o.control.max),r.value=d}}),(d,l)=>(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("label",q,e.toDisplayString(d.label),1),e.createElementVNode("input",{value:d.control.value,class:e.normalizeClass(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":c.value}]),type:"number",min:d.control.min,max:d.control.max,step:d.control.step,onInput:n,onMousedown:p,onMouseup:f},null,42,H)]))}}),v={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},J=["for"],Q=["id","value","aria-label"],Z=e.defineComponent({__name:"TextControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:a}){function o(n){const{target:s}=n;a("change",s.value)}return(n,s)=>(e.openBlock(),e.createElementBlock("div",v,[e.createElementVNode("label",{for:`input-${n.label}`,class:"text-gray-500 w-1/3"},e.toDisplayString(n.label),9,J),e.createElementVNode("input",{id:`input-${n.label}`,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:o},null,40,Q)]))}}),ee={class:"flex px-4 justify-start gap-2 items-center mb-2 min-h-32px"},te={class:"text-gray-500 w-1/3"},ne=["id","checked"],oe=["for"],le=["aria-checked"],re={class:"i-ic:baseline-check text-light"},ae=e.defineComponent({__name:"BooleanControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:a}){const o=t;function n(r){const{target:c}=r;a("change",c.checked)}function s(r){(r.code==="Space"||r.code==="Enter")&&(r.preventDefault(),a("change",!o.control.value))}return(r,c)=>(e.openBlock(),e.createElementBlock("div",ee,[e.createElementVNode("label",te,e.toDisplayString(r.label),1),e.createElementVNode("input",{id:r.control.label,checked:r.control.value,class:"hidden",type:"checkbox",onInput:n},null,40,ne),e.createElementVNode("label",{for:r.control.label,class:"inline-flex items-center cursor-pointer"},[e.createElementVNode("span",{tabindex:"0",role:"checkbox","aria-checked":r.control.value.toString(),class:e.normalizeClass([{"bg-dark-500":r.control.value,"bg-gray-200":!r.control.value},"w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),onKeydown:s},[e.withDirectives(e.createElementVNode("i",re,null,512),[[e.vShow,r.control.value]])],42,le)],8,oe)]))}}),se={class:"px-4 relative flex justify-between gap-4 items-center mb-2"},ce=["value","min","max","step"],ie=["value","min","max","step"],de=e.defineComponent({__name:"SliderControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:a}){const o=t;function n(l){const{target:i}=l;a("change",i.valueAsNumber)}const s=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%)`})),r=x.useMouse(),c=e.ref(0),p=e.ref(!1),f=l=>{c.value=l.clientX,p.value=!0},_=()=>{p.value=!1},d=l=>Math.floor(Math.abs(l)/10);return e.watch(r.x,l=>{if(p.value){const i=l-c.value,k=d(i);i>0?a("change",o.control.value+1+k):i<0&&a("change",o.control.value-1+k),o.control.min!==void 0&&o.control.value<o.control.min&&a("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&a("change",o.control.max),c.value=l}}),(l,i)=>(e.openBlock(),e.createElementBlock("div",se,[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(s.value),type:"range",min:l.control.min,max:l.control.max,step:l.control.step,onInput:n},null,44,ce),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:_},null,42,ie)]))}}),Ye="",pe=((t,a)=>{const o=t.__vccOpts||t;for(const[n,s]of a)o[n]=s;return o})(de,[["__scopeId","data-v-9e6267fe"]]),fe={class:"flex px-4 justify-between gap-4 items-center mb-2"},ue={class:"text-gray-500 w-1/3"},me=["id","value","aria-label"],ge=["id","aria-label","value"],he=e.defineComponent({__name:"ColorControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:a}){function o(n){const{target:s}=n;a("change",s.value)}return(n,s)=>(e.openBlock(),e.createElementBlock("div",fe,[e.createElementVNode("label",ue,e.toDisplayString(n.label),1),e.createElementVNode("input",{id:`input-${n.label}`,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:o},null,42,me),e.createElementVNode("input",{id:`input-${n.label}`,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:o},null,40,ge)]))}}),He="";function be(t){if(typeof t=="number")return[t,t,t];if(A(t)){const{x:a,y:o,z:n}=t;return[a,o,n]}return t}function ye(t){return t&&typeof t.x=="number"&&typeof t.y=="number"&&typeof t.z>"u"}function A(t){return t&&typeof t.x=="number"&&typeof t.y=="number"&&typeof t.z=="number"}const _e={class:"text-gray-500 w-1/3"},ke={class:"w-2/3 flex justify-between gap-0.5"},xe={key:0,class:"font-bold px-1 py-1 text-0.65rem text-gray-300"},we=["value","onInput","onMousedown","onMouseup"],Ee=e.defineComponent({__name:"VectorControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:a}){const o=t,n=x.useMouse(),s=e.ref(0),r=e.ref(!1),c=e.ref(0),p=(g,h)=>{c.value=h,s.value=g.clientX,r.value=!0},f=(g,h)=>{c.value=h,r.value=!1},_=()=>{r.value=!1},d=g=>Math.floor(Math.abs(g)/10),l=e.computed(()=>be(o.control.value)),i=e.ref(["x","y","z"]),k=e.computed(()=>ye(o.control.value)||A(o.control.value));function b(g,h){const{value:y}=o.control,{target:u}=g;c.value=h,y[k.value?i.value[c.value]:c.value]=parseFloat(u.value),a("change",y)}return e.watch(n.x,g=>{if(r.value){const h=g-s.value,y=d(h),{value:u}=o.control,w=k.value?i.value[c.value]:c.value;h>0?u[w]+=.1+y:h<0&&(u[w]-=.1+y),o.control.min!==void 0&&u<o.control.min&&(u[w]=o.control.min),o.control.max!==void 0&&u>o.control.max&&(u[w]=o.control.max),a("change",u),s.value=g}}),(g,h)=>(e.openBlock(),e.createElementBlock("div",{class:"flex px-4 justify-between gap-1 items-center mb-2",onMouseup:h[0]||(h[0]=y=>_())},[e.createElementVNode("label",_e,e.toDisplayString(g.label),1),e.createElementVNode("div",ke,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(y,u)=>(e.openBlock(),e.createElementBlock("div",{key:g.label+u,class:"flex items-center w-1/3 bg-gray-100 rounded"},[i.value[u]&&k.value?(e.openBlock(),e.createElementBlock("span",xe,e.toDisplayString(i.value[u]),1)):e.createCommentVNode("",!0),e.createElementVNode("input",{type:"number",step:"0.1",class:e.normalizeClass(["w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none",{"cursor-ew-resize":r.value}]),value:l.value[u].toFixed(2),onInput:w=>b(w,u),onMousedown:w=>p(w,u),onMouseup:w=>f(w,u)},null,42,we)]))),128))])],32))}}),Ce={class:"flex px-4 justify-between gap-4 items-center mb-2"},Be={class:"text-gray-500 w-1/3"},Ve={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"},$e={class:"absolute bottom-0.5 right-0.5 font-sans text-xs"},Ne=["points"],I=160,M=40,V=2,L=100,O=20,Se=e.defineComponent({__name:"FPSGraph",props:{label:{},control:{}},setup(t){const a=x.useFps({every:L}),o=e.ref(""),n=e.ref([]),s=e.ref(I/V);let r=performance.now();return x.useRafFn(({timestamp:c})=>{c-r>=L&&(r=c,n.value.push(a.value),n.value.length>s.value&&n.value.shift(),o.value=n.value.map((p,f)=>`${f*V},${M+O-V/2-p*(M+O-V)/120}`).join(" "))}),(c,p)=>(e.openBlock(),e.createElementBlock("div",Ce,[e.createElementVNode("label",Be,e.toDisplayString(c.label),1),e.createElementVNode("div",Ve,[e.createElementVNode("div",$e,e.toDisplayString(Math.round(e.unref(a)))+" FPS ",1),(e.openBlock(),e.createElementBlock("svg",{width:I,height:M,xmlns:"http://www.w3.org/2000/svg",class:"bg-gray-100"},[e.createElementVNode("polyline",{points:o.value,fill:"none",stroke:"lightgray","stroke-width":V,"stroke-linecap":"round","stroke-linejoin":"round"},null,8,Ne)]))])]))}}),De={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},Me={class:"text-gray-500 w-1/3"},Te=["value"],Fe=["value"],ze=e.defineComponent({__name:"SelectControl",props:{label:{},control:{}},emits:["change"],setup(t,{emit:a}){function o(n){a("change",n.target.value)}return(n,s)=>(e.openBlock(),e.createElementBlock("div",De,[e.createElementVNode("label",Me,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,r=>(e.openBlock(),e.createElementBlock("option",{key:r.value,value:r.value},e.toDisplayString(r.text),9,Fe))),128))],40,Te)]))}}),R=e.defineComponent({__name:"ControlInput",props:{control:{}},emits:["change"],setup(t,{emit:a}){function o(n){a("change",n)}return(n,s)=>n.control.visible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[n.control.type==="color"?(e.openBlock(),e.createBlock(he,{key:0,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="select"?(e.openBlock(),e.createBlock(ze,{key:1,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="vector"?(e.openBlock(),e.createBlock(Ee,{key:2,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="boolean"?(e.openBlock(),e.createBlock(ae,{key:3,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="fpsgraph"?(e.openBlock(),e.createBlock(Se,{key:4,label:n.control.label,control:n.control},null,8,["label","control"])):n.control.type==="number"?(e.openBlock(),e.createBlock(G,{key:5,label:n.control.label,control:n.control,onChange:o},null,8,["label","control"])):n.control.type==="range"?(e.openBlock(),e.createBlock(pe,{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)}}),Ae={class:"mb-4"},Ie=["aria-expanded"],Le={class:"bg-white rounded-b pt-4",role:"menu"},Oe=e.defineComponent({__name:"Folder",props:{controls:{},label:{}},setup(t){function a(s,r){r.value=s}const o=e.ref(!1),n=()=>{o.value=!o.value};return(s,r)=>(e.openBlock(),e.createElementBlock("div",Ae,[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",tabindex:"0",onClick:n},[e.createElementVNode("span",null,e.toDisplayString(s.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,Ie),e.createVNode(e.Transition,{name:"slide","enter-active-class":" animate-fade-in animate-duration-200 animate-ease-in-out","leave-active-class":" animate-fade-out animate-duration-200 animate-ease-in-out"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",Le,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.controls,c=>(e.openBlock(),e.createBlock(R,{key:c.label,control:c,role:"menuitem",onChange:p=>a(p,c)},null,8,["control","onChange"]))),128))],512),[[e.vShow,o.value]])]),_:1})]))}}),Re={tabindex:"0",class:"bg-white shadow-xl rounded border-4 border-solid border-black"},Ue=[e.createElementVNode("i",{class:"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs"},"🍰",-1),e.createElementVNode("div",null,[e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"})],-1),e.createElementVNode("div",null,null,-1)],Pe=280,Xe=e.defineComponent({__name:"TresLeches",props:{uuid:{}},setup(t){const a=t,{uuid:o}=e.toRefs(a),{width:n}=x.useWindowSize(),s=e.ref(null),r=z(o==null?void 0:o.value);function c(f,_){r[e.unref(f)].value=_,r[e.unref(f)][e.unref(f)]=_}const p=e.computed(()=>{const f={};for(const _ in r){const d=r[_],l=d.folder||"default";f[l]||(f[l]=[]),f[l].push(d)}return f});return(f,_)=>(e.openBlock(),e.createBlock(e.unref(j),{id:e.unref(o),"initial-value":{x:e.unref(n)-Pe-40,y:10},class:e.normalizeClass(["absolute select-none z-24 w-280px font-sans text-xs",f.$attrs.class]),handle:s.value},{default:e.withCtx(()=>[e.createElementVNode("div",Re,[e.createElementVNode("header",{ref_key:"handle",ref:s,class:"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"},Ue,512),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(d,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l},[l!=="default"?(e.openBlock(),e.createBlock(Oe,{key:0,label:l,controls:d},null,8,["label","controls"])):e.createCommentVNode("",!0),l==="default"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(d,i=>(e.openBlock(),e.createBlock(R,{key:i.label,control:i,onChange:k=>c(i.key,k)},null,8,["control","onChange"]))),128)):e.createCommentVNode("",!0)],64))),128))])]),_:1},8,["id","initial-value","class","handle"]))}});E.TresLeches=Xe,E.useControls=K,E.useControlsProvider=z,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
8
+ (function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w.tresleches={},w.Vue,w.VueUseCore))})(this,function(w,e,x){"use strict";const We="";function E(n){return typeof n=="function"?n():e.unref(n)}const T=typeof window<"u"&&typeof document<"u";function U(n,r={}){if(!e.isRef(n))return e.toRefs(n);const o=Array.isArray(n.value)?Array.from({length:n.value.length}):{};for(const t in n.value)o[t]=e.customRef(()=>({get(){return n.value[t]},set(a){var s;if((s=E(r.replaceRef))!=null?s:!0)if(Array.isArray(n.value)){const f=[...n.value];f[t]=a,n.value=f}else{const f={...n.value,[t]:a};Object.setPrototypeOf(f,Object.getPrototypeOf(n.value)),n.value=f}else n.value[t]=a}}));return o}const O=T?window:void 0;function R(n,r={}){const{pointerTypes:o,preventDefault:t,stopPropagation:a,exact:s,onMove:c,onEnd:f,onStart:p,initialValue:_,axis:d="both",draggingElement:l=O,handle:u=n}=r,{width:y}=x.useWindowSize();let C=y.value;const i=e.ref(E(_)??{x:0,y:0});e.watch(y,()=>{const g=y.value-C;i.value.x+=g,C=y.value});const h=e.ref(),k=g=>o?o.includes(g.pointerType):!0,m=g=>{E(t)&&g.preventDefault(),E(a)&&g.stopPropagation()},b=g=>{if(!k(g)||E(s)&&g.target!==E(n))return;const $=E(n).getBoundingClientRect(),N={x:g.clientX-$.left,y:g.clientY-$.top};(p==null?void 0:p(N,g))!==!1&&(h.value=N,m(g))},Xe=g=>{if(!k(g)||!h.value)return;let{x:$,y:N}=i.value;(d==="x"||d==="both")&&($=g.clientX-h.value.x),(d==="y"||d==="both")&&(N=g.clientY-h.value.y),i.value={x:$,y:N},c==null||c(i.value,g),m(g)},je=g=>{k(g)&&h.value&&(h.value=void 0,f==null||f(i.value,g),m(g))};if(T){const g={capture:r.capture??!0};x.useEventListener(u,"pointerdown",b,g),x.useEventListener(l,"pointermove",Xe,g),x.useEventListener(l,"pointerup",je,g)}return{...U(i),position:i,isDragging:e.computed(()=>!!h.value),style:e.computed(()=>`left:${i.value.x}px;top:${i.value.y}px;`)}}const P=e.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(n,{slots:r}){const o=e.ref(),t=e.computed(()=>n.handle??o.value),a=n.storageKey&&x.useStorage(n.storageKey,E(n.initialValue)||{x:0,y:0},x.isClient?n.storageType==="session"?sessionStorage:localStorage:void 0),s=a||n.initialValue||{x:0,y:0},c=(p,_)=>{var d;(d=n.onEnd)==null||d.call(n,p,_),a&&(a.value.x=p.x,a.value.y=p.y)},f=e.reactive(R(o,{...n,handle:t,initialValue:s,onEnd:c}));return()=>{if(r.default)return e.h(n.as||"div",{ref:o,style:`touch-action:none;${f.style}`},r.default(f))}}}),X=Symbol("CONTROLS_CONTEXT_KEY"),F="default",B=e.reactive({});function z(n=F){return e.provide(X,B),B[n]}const D=n=>{const r=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;return typeof n=="boolean"?"boolean":typeof n=="number"?"number":typeof n=="string"&&r.test(n)?"color":typeof n=="string"?"string":n.isVector3||n.isVector2||n.isEuler||n instanceof Array?"vector":n.min!==void 0||n.max!==void 0||n.step!==void 0?"range":n.options&&Array.isArray(n.options)?"select":"unknown"},S=(n,r,o,t)=>{const a={key:e.ref(n),label:e.ref(n),name:e.ref(n),type:e.ref(o),value:e.ref(r),visible:e.ref(!0),[n]:e.ref(r)};return t&&(a.folder=e.ref(t)),a},j=(n,r)=>{let o=1,t=`${n}_${o}`;for(;r[t];)o++,t=`${n}_${o}`;return t},W=(n,r,o)=>{const t={},a=typeof n=="string"?n:null,s=a?r:n,c=a&&a!=="fpsgraph"?o:r,f=(c==null?void 0:c.uuid)||F;if(B[f]||(B[f]=e.reactive({})),n==="fpsgraph"){const l=S("fpsgraph",null,"fpsgraph",null);return B[f].fpsgraph=l,t.fpsgraph=l,e.toRefs(e.reactive(t))}const p=B[f],_=e.isReactive(s),d=_?e.toRefs(s):{};for(const l in s){let u=s[l],y=l;if(_&&d[l]&&(u=d[l]),a&&(y=`${a}${l.charAt(0).toUpperCase()+l.slice(1)}`),!a&&p[y]&&(y=j(l,p)),typeof u=="object"&&!e.isRef(u)&&!Array.isArray(u)&&u.value!==void 0){const i=u,h=e.isRef(i.value)?i.value:e.ref(i.value),k=D(i),m=S(l,h,k,a);k==="select"&&(m.options=e.ref(i.options.map(b=>typeof b=="object"&&b.text&&b.value?b:{text:b,value:b}))),k==="range"&&(m.min=e.ref(i.min||0),m.max=e.ref(i.max||1),m.step=e.ref(i.step||.1)),m.label.value=i.label||l,m.visible.value=i.visible!==void 0?i.visible:!0,p[y]=m,t[y]=m;continue}if(e.isRef(u)){const i=S(l,u,D(u.value),a);p[y]=i,t[y]=i;continue}else if(typeof u=="object"&&!Array.isArray(u)){const i=e.toRefs(u);i[l]&&(u=i[l])}const C=S(l,u,D(u),a);p[y]=C,t[y]=C,C.uniqueKey=y}return Object.keys(t).length>1?e.toRefs(e.reactive(t)):Object.values(t)[0]},Y={class:"flex px-4 justify-between gap-4 items-center mb-2"},H=["for"],v=["id","value","min","max","step"],G=e.defineComponent({__name:"NumberControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(d){const{target:l}=d;r("change",l.valueAsNumber)}const a=x.useMouse(),s=e.ref(0),c=e.ref(!1),f=d=>{s.value=d.clientX,c.value=!0},p=()=>{c.value=!1},_=d=>Math.floor(Math.abs(d)/10);return e.watch(a.x,d=>{if(c.value){const l=d-s.value,u=_(l);l>0?r("change",o.control.value+1+u):l<0&&r("change",o.control.value-1+u),o.control.min!==void 0&&o.control.value<o.control.min&&r("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&r("change",o.control.max),s.value=d}}),(d,l)=>(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("label",{class:"text-gray-500 w-1/3",for:d.control.uniqueKey},e.toDisplayString(d.label),9,H),e.createElementVNode("input",{id:d.control.uniqueKey,value:d.control.value,class:e.normalizeClass(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":c.value}]),type:"number",min:d.control.min,max:d.control.max,step:d.control.step,onInput:t,onMousedown:f,onMouseup:p},null,42,v)]))}}),J={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},Q=["for"],Z=["id","value","aria-label"],ee=e.defineComponent({__name:"TextControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){const{target:a}=t;r("change",a.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("label",{for:t.control.uniqueKey,class:"text-gray-500 w-1/3"},e.toDisplayString(t.label),9,Q),e.createElementVNode("input",{id:t.control.uniqueKey,value:t.control.value,type:"text",tabindex:"0",class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 border-none font-sans","aria-label":t.label,placeholder:"Enter value here...",onChange:o},null,40,Z)]))}}),te={class:"flex px-4 justify-start gap-2 items-center mb-2 min-h-32px"},ne={class:"text-gray-500 w-1/3"},oe=["id","checked"],le=["for"],re=["aria-checked"],ae={class:"i-ic:baseline-check text-light"},se=e.defineComponent({__name:"BooleanControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(s){const{target:c}=s;r("change",c.checked)}function a(s){(s.code==="Space"||s.code==="Enter")&&(s.preventDefault(),r("change",!o.control.value))}return(s,c)=>(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("label",ne,e.toDisplayString(s.label),1),e.createElementVNode("input",{id:s.control.uniqueKey,checked:s.control.value,class:"hidden",type:"checkbox",onInput:t},null,40,oe),e.createElementVNode("label",{for:s.control.uniqueKey,class:"inline-flex items-center cursor-pointer"},[e.createElementVNode("span",{tabindex:"0",role:"checkbox","aria-checked":s.control.value.toString(),class:e.normalizeClass([{"bg-dark-500":s.control.value,"bg-gray-200":!s.control.value},"w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),onKeydown:a},[e.withDirectives(e.createElementVNode("i",ae,null,512),[[e.vShow,s.control.value]])],42,re)],8,le)]))}}),ce={class:"px-4 relative flex justify-between gap-4 items-center mb-2"},ie=["value","min","max","step"],de=["value","min","max","step"],ue=e.defineComponent({__name:"SliderControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(l){const{target:u}=l;r("change",u.valueAsNumber)}const a=e.computed(()=>({backgroundImage:`linear-gradient(to right, #333 0% ${100*(o.control.value-(o.control.min||0))/((o.control.max||100)-(o.control.min||0))}%, #e2e2e2 0%)`})),s=x.useMouse(),c=e.ref(0),f=e.ref(!1),p=l=>{c.value=l.clientX,f.value=!0},_=()=>{f.value=!1},d=l=>Math.floor(Math.abs(l)/10);return e.watch(s.x,l=>{if(f.value){const u=l-c.value,y=d(u);u>0?r("change",o.control.value+1+y):u<0&&r("change",o.control.value-1+y),o.control.min!==void 0&&o.control.value<o.control.min&&r("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&r("change",o.control.max),c.value=l}}),(l,u)=>(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("label",{class:e.normalizeClass(["text-gray-500 w-1/3",{"flex justify-between items-center":l.control.icon}])},[e.createTextVNode(e.toDisplayString(l.label)+" ",1),e.createElementVNode("i",{class:e.normalizeClass(`i-${l.control.icon}`)},null,2)],2),e.createElementVNode("input",{value:l.control.value,class:"w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",style:e.normalizeStyle(a.value),type:"range",min:l.control.min,max:l.control.max,step:l.control.step,onInput:t},null,44,ie),e.createElementVNode("input",{value:l.control.value,class:e.normalizeClass(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":f.value}]),type:"number",min:l.control.min,max:l.control.max,step:l.control.step,onInput:t,onMousedown:p,onMouseup:_},null,42,de)]))}}),Ye="",fe=((n,r)=>{const o=n.__vccOpts||n;for(const[t,a]of r)o[t]=a;return o})(ue,[["__scopeId","data-v-9e6267fe"]]),pe={class:"flex px-4 justify-between gap-4 items-center mb-2"},me={class:"text-gray-500 w-1/3"},ge=["id","value","aria-label"],ye=["id","aria-label","value"],he=e.defineComponent({__name:"ColorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){const{target:a}=t;r("change",a.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",pe,[e.createElementVNode("label",me,e.toDisplayString(t.label),1),e.createElementVNode("input",{id:t.control.uniqueKey,tabindex:"0",value:t.control.value,"aria-label":t.label,class:e.normalizeClass(["focus:outline-none focus:ring-2 focus:ring-blue-600",{"important-outline-gray-200":t.control.value==="#ffffff"}]),type:"color",onInput:o},null,42,ge),e.createElementVNode("input",{id:t.control.uniqueKey,tabindex:"0","aria-label":t.label,value:t.control.value,class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 border-none font-sans",type:"text",onInput:o},null,40,ye)]))}}),ve="";function be(n){if(typeof n=="number")return[n,n,n];if(A(n)){const{x:r,y:o,z:t}=n;return[r,o,t]}return n}function _e(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z>"u"}function A(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z=="number"}const ke={class:"text-gray-500 w-1/3"},xe={class:"w-2/3 flex justify-between gap-0.5"},we={key:0,class:"font-bold px-1 py-1 text-0.65rem text-gray-300"},Ee=["id","value","onInput","onMousedown","onMouseup"],Ce=e.defineComponent({__name:"VectorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n,t=x.useMouse(),a=e.ref(0),s=e.ref(!1),c=e.ref(0),f=(i,h)=>{c.value=h,a.value=i.clientX,s.value=!0},p=(i,h)=>{c.value=h,s.value=!1},_=()=>{s.value=!1},d=i=>Math.floor(Math.abs(i)/10),l=e.computed(()=>be(o.control.value)),u=e.ref(["x","y","z"]),y=e.computed(()=>_e(o.control.value)||A(o.control.value));function C(i,h){const{value:k}=o.control,{target:m}=i;c.value=h,k[y.value?u.value[c.value]:c.value]=parseFloat(m.value),r("change",k)}return e.watch(t.x,i=>{if(s.value){const h=i-a.value,k=d(h),{value:m}=o.control,b=y.value?u.value[c.value]:c.value;h>0?m[b]+=.1+k:h<0&&(m[b]-=.1+k),o.control.min!==void 0&&m<o.control.min&&(m[b]=o.control.min),o.control.max!==void 0&&m>o.control.max&&(m[b]=o.control.max),r("change",m),a.value=i}}),(i,h)=>(e.openBlock(),e.createElementBlock("div",{class:"flex px-4 justify-between gap-1 items-center mb-2",onMouseup:h[0]||(h[0]=k=>_())},[e.createElementVNode("label",ke,e.toDisplayString(i.label),1),e.createElementVNode("div",xe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(k,m)=>(e.openBlock(),e.createElementBlock("div",{key:i.label+m,class:"flex items-center w-1/3 bg-gray-100 rounded"},[u.value[m]&&y.value?(e.openBlock(),e.createElementBlock("span",we,e.toDisplayString(u.value[m]),1)):e.createCommentVNode("",!0),e.createElementVNode("input",{id:`${i.control.uniqueKey}-${u.value[m]}`,type:"number",step:"0.1",class:e.normalizeClass(["w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none",{"cursor-ew-resize":s.value}]),value:l.value[m].toFixed(2),onInput:b=>C(b,m),onMousedown:b=>f(b,m),onMouseup:b=>p(b,m)},null,42,Ee)]))),128))])],32))}}),Be={class:"flex px-4 justify-between gap-4 items-center mb-2"},Ve={class:"text-gray-500 w-1/3"},$e={class:"relative w-2/3 p-1 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans"},Ne={class:"absolute bottom-0.5 right-0.5 font-sans text-xs"},Se=["points"],I=160,M=40,V=2,K=100,q=20,De=e.defineComponent({__name:"FPSGraph",props:{label:{},control:{}},setup(n){const r=x.useFps({every:K}),o=e.ref(""),t=e.ref([]),a=e.ref(I/V);let s=performance.now();return x.useRafFn(({timestamp:c})=>{c-s>=K&&(s=c,t.value.push(r.value),t.value.length>a.value&&t.value.shift(),o.value=t.value.map((f,p)=>`${p*V},${M+q-V/2-f*(M+q-V)/120}`).join(" "))}),(c,f)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("label",Ve,e.toDisplayString(c.label),1),e.createElementVNode("div",$e,[e.createElementVNode("div",Ne,e.toDisplayString(Math.round(e.unref(r)))+" FPS ",1),(e.openBlock(),e.createElementBlock("svg",{width:I,height:M,xmlns:"http://www.w3.org/2000/svg",class:"bg-gray-100"},[e.createElementVNode("polyline",{points:o.value,fill:"none",stroke:"lightgray","stroke-width":V,"stroke-linecap":"round","stroke-linejoin":"round"},null,8,Se)]))])]))}}),Me={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},Te=["for"],Fe=["id","value"],ze=["value"],Ae=e.defineComponent({__name:"SelectControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){r("change",t.target.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",Me,[e.createElementVNode("label",{class:"text-gray-500 w-1/3",for:t.control.uniqueKey},e.toDisplayString(t.label),9,Te),e.createElementVNode("select",{id:t.control.uniqueKey,value:t.control.value,class:"p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",onChange:o},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.control.options,s=>(e.openBlock(),e.createElementBlock("option",{key:s.value,value:s.value},e.toDisplayString(s.text),9,ze))),128))],40,Fe)]))}}),L=e.defineComponent({__name:"ControlInput",props:{control:{}},emits:["change"],setup(n,{emit:r}){function o(t){r("change",t)}return(t,a)=>t.control.visible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.control.type==="color"?(e.openBlock(),e.createBlock(he,{key:0,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="select"?(e.openBlock(),e.createBlock(Ae,{key:1,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="vector"?(e.openBlock(),e.createBlock(Ce,{key:2,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="boolean"?(e.openBlock(),e.createBlock(se,{key:3,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="fpsgraph"?(e.openBlock(),e.createBlock(De,{key:4,label:t.control.label,control:t.control},null,8,["label","control"])):t.control.type==="number"?(e.openBlock(),e.createBlock(G,{key:5,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="range"?(e.openBlock(),e.createBlock(fe,{key:6,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):(e.openBlock(),e.createBlock(ee,{key:7,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"]))],64)):e.createCommentVNode("",!0)}}),Ie={class:"mb-4"},Ke=["aria-expanded","data-folder"],qe={class:"bg-white rounded-b pt-4",role:"menu"},Le=e.defineComponent({__name:"Folder",props:{controls:{},label:{}},setup(n){function r(a,s){s.value=a}const o=e.ref(!1),t=()=>{o.value=!o.value};return(a,s)=>(e.openBlock(),e.createElementBlock("div",Ie,[e.createElementVNode("button",{class:"flex items-center justify-between w-full py-2 px-4 bg-gray-100 border-none text-gray-400 font-bold text-xs font-sans cursor-pointer","aria-expanded":o.value,"aria-haspopup":"true",role:"button","data-folder":a.label,tabindex:"0",onClick:t},[e.createElementVNode("span",null,e.toDisplayString(a.label),1),e.createElementVNode("i",{class:e.normalizeClass(o.value?"i-ic:baseline-keyboard-arrow-up":"i-ic:baseline-keyboard-arrow-down")},null,2)],8,Ke),e.createVNode(e.Transition,{name:"slide","enter-active-class":" animate-fade-in animate-duration-200 animate-ease-in-out","leave-active-class":" animate-fade-out animate-duration-200 animate-ease-in-out"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",qe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.controls,c=>(e.openBlock(),e.createBlock(L,{key:c.label,control:c,role:"menuitem",onChange:f=>r(f,c)},null,8,["control","onChange"]))),128))],512),[[e.vShow,o.value]])]),_:1})]))}}),Ue={tabindex:"0",class:"bg-white shadow-xl rounded border-4 border-solid border-black"},Oe=[e.createElementVNode("i",{class:"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs"},"🍰",-1),e.createElementVNode("div",null,[e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"})],-1),e.createElementVNode("div",null,null,-1)],Re=280,Pe=e.defineComponent({__name:"TresLeches",props:{uuid:{}},setup(n){const r=n,{uuid:o}=e.toRefs(r),{width:t}=x.useWindowSize(),a=e.ref(null),s=z(o==null?void 0:o.value);function c(p,_){s[e.unref(p)].value=_,s[e.unref(p)][e.unref(p)]=_}const f=e.computed(()=>{const p={};for(const _ in s){const d=s[_],l=d.folder||"default";p[l]||(p[l]=[]),p[l].push(d)}return p});return(p,_)=>(e.openBlock(),e.createBlock(e.unref(P),{id:e.unref(o),"initial-value":{x:e.unref(t)-Re-40,y:10},class:e.normalizeClass(["absolute select-none z-24 w-280px font-sans text-xs",p.$attrs.class]),handle:a.value},{default:e.withCtx(()=>[e.createElementVNode("div",Ue,[e.createElementVNode("header",{ref_key:"handle",ref:a,class:"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"},Oe,512),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(d,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l},[l!=="default"?(e.openBlock(),e.createBlock(Le,{key:0,label:l,controls:d},null,8,["label","controls"])):e.createCommentVNode("",!0),l==="default"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(d,u=>(e.openBlock(),e.createBlock(L,{key:u.label,control:u,onChange:y=>c(u.key,y)},null,8,["control","onChange"]))),128)):e.createCommentVNode("",!0)],64))),128))])]),_:1},8,["id","initial-value","class","handle"]))}});w.TresLeches=Pe,w.useControls=W,w.useControlsProvider=z,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tresjs/leches",
3
3
  "type": "module",
4
- "version": "0.10.0",
4
+ "version": "0.11.0",
5
5
  "packageManager": "pnpm@8.3.1",
6
6
  "description": "Tasty GUI for Vue controls 🍰",
7
7
  "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",