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