@pinia/colada-devtools 0.1.8 → 0.2.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 (43) hide show
  1. package/dist/index.js +488 -372
  2. package/dist/index.js.map +1 -1
  3. package/dist-panel/(unselected)-B-_Xdo2t.js +17 -0
  4. package/dist-panel/(unselected)-B-_Xdo2t.js.map +1 -0
  5. package/dist-panel/{index-oPdQg_Hb.js → (unselected)-BFwQCIEo.js} +5 -5
  6. package/dist-panel/(unselected)-BFwQCIEo.js.map +1 -0
  7. package/dist-panel/_mutationId_-BG1E7StK.js +306 -0
  8. package/dist-panel/_mutationId_-BG1E7StK.js.map +1 -0
  9. package/dist-panel/_queryId_-BHPtMxoe.js +423 -0
  10. package/dist-panel/_queryId_-BHPtMxoe.js.map +1 -0
  11. package/dist-panel/braces-B9tH-Qp5.js +294 -0
  12. package/dist-panel/braces-B9tH-Qp5.js.map +1 -0
  13. package/dist-panel/index-CTwvPt67.js +6403 -0
  14. package/dist-panel/index-CTwvPt67.js.map +1 -0
  15. package/dist-panel/{index-CWKID_IB.js → index-kHk614RY.js} +2 -2
  16. package/dist-panel/{index-CWKID_IB.js.map → index-kHk614RY.js.map} +1 -1
  17. package/dist-panel/index.js +1 -1
  18. package/dist-panel/{loader-DJMHHUla.js → loader-nEPBwFfz.js} +2 -2
  19. package/dist-panel/loader-nEPBwFfz.js.map +1 -0
  20. package/dist-panel/{mouse-pointer-click-C2_foU25.js → mouse-pointer-click-DQLuAnaZ.js} +2 -2
  21. package/dist-panel/mouse-pointer-click-DQLuAnaZ.js.map +1 -0
  22. package/dist-panel/mutations-BZWQwG2S.js +297 -0
  23. package/dist-panel/mutations-BZWQwG2S.js.map +1 -0
  24. package/dist-panel/queries-D3ybdTKc.js +286 -0
  25. package/dist-panel/queries-D3ybdTKc.js.map +1 -0
  26. package/dist-panel/{settings-T9huR8_1.js → settings-DddAyvXJ.js} +2 -2
  27. package/dist-panel/{settings-T9huR8_1.js.map → settings-DddAyvXJ.js.map} +1 -1
  28. package/dist-panel/use-container-media-query-BWmwm2oB.js +555 -0
  29. package/dist-panel/use-container-media-query-BWmwm2oB.js.map +1 -0
  30. package/dist-shared/index.d.ts +105 -9
  31. package/dist-shared/index.js.map +1 -1
  32. package/package.json +13 -13
  33. package/dist-panel/_queryId_-B8mNYXBL.js +0 -701
  34. package/dist-panel/_queryId_-B8mNYXBL.js.map +0 -1
  35. package/dist-panel/index-UPnYYHaa.js +0 -6340
  36. package/dist-panel/index-UPnYYHaa.js.map +0 -1
  37. package/dist-panel/index-oPdQg_Hb.js.map +0 -1
  38. package/dist-panel/loader-DJMHHUla.js.map +0 -1
  39. package/dist-panel/mouse-pointer-click-C2_foU25.js.map +0 -1
  40. package/dist-panel/mutations-DJc8p7YC.js +0 -13
  41. package/dist-panel/mutations-DJc8p7YC.js.map +0 -1
  42. package/dist-panel/queries-CLrIueL2.js +0 -795
  43. package/dist-panel/queries-CLrIueL2.js.map +0 -1
@@ -1,795 +0,0 @@
1
- import { d as A, u as Ee, b as P, c as b, o as _, a as m, _ as Ne, m as Q, s as te, e as ve, f as Te, r as me, g as V, w as H, h as G, n as I, i as M, F as W, j as ne, t as ae, k as E, l as Be, p as Oe, v as De, q as Ve, x as B, y as J, z as pe, A as he, B as T, C as fe, D as ee, E as q, G as qe, H as Ie, I as Ae, J as je, K as Qe, L as le, M as Ue, N as Fe, O as He } from "./index-UPnYYHaa.js";
2
- import { _ as Je, a as Ke } from "./loader-DJMHHUla.js";
3
- import { miniJsonParse as We } from "@pinia/colada-devtools/shared";
4
- const Xe = {
5
- class: "progress-bar",
6
- "aria-hidden": ""
7
- }, Ye = /* @__PURE__ */ A({
8
- __name: "UCircleProgress.ce",
9
- props: {
10
- value: { type: Number },
11
- min: { default: 0, type: Number },
12
- max: { default: 100, type: Number },
13
- strokeWidth: { default: 2, type: Number }
14
- },
15
- setup(u) {
16
- Ee((h) => ({
17
- dfc273d4: o.value,
18
- b5e811ce: h.strokeWidth
19
- }));
20
- const o = P(() => Math.round((u.value - u.min) / (u.max - u.min) * 100));
21
- return (h, r) => (_(), b("div", Xe, [...r[0] || (r[0] = [
22
- m("svg", null, [
23
- m("circle", { class: "bg" }),
24
- m("circle", { class: "fg" })
25
- ], -1)
26
- ])]));
27
- }
28
- }), Ze = ".progress-bar>svg[data-v-138f773b]{--progress-value: var(--dfc273d4);--size: 1em;--half-size: calc(var(--size) / 2);--stroke-width: calc(var(--b5e811ce) * var(--size) / 10);--radius: calc((var(--size) - var(--stroke-width)) / 2);--circumference: calc(var(--radius) * pi * 2);--dash: calc((var(--progress-value) * var(--circumference)) / 100);animation:progress-animation 100s linear 0s 1 forwards;width:var(--size);height:var(--size)}.progress-bar circle[data-v-138f773b]{cx:var(--half-size);cy:var(--half-size);r:var(--radius);stroke-width:var(--stroke-width);fill:none;stroke-linecap:butt}.progress-bar circle.bg[data-v-138f773b]{stroke:color-mix(in hsl,currentColor 25%,var(--ui-bg))}.progress-bar circle.fg[data-v-138f773b]{transform:rotate(-90deg);transform-origin:var(--half-size) var(--half-size);stroke-dasharray:var(--dash) calc(var(--circumference) - var(--dash));transition:stroke-dasharray .3s linear 0s;stroke:currentColor}", Ge = /* @__PURE__ */ Ne(Ye, [["styles", [Ze]], ["__scopeId", "data-v-138f773b"]]), et = {
29
- viewBox: "0 0 24 24",
30
- width: "1.2em",
31
- height: "1.2em"
32
- };
33
- function tt(u, o) {
34
- return _(), b("svg", et, [...o[0] || (o[0] = [
35
- m("g", {
36
- fill: "none",
37
- stroke: "currentColor",
38
- "stroke-linecap": "round",
39
- "stroke-linejoin": "round",
40
- "stroke-width": "2"
41
- }, [
42
- m("circle", {
43
- cx: "12",
44
- cy: "12",
45
- r: "10"
46
- }),
47
- m("path", { d: "m9 15l6-6" })
48
- ], -1)
49
- ])]);
50
- }
51
- const nt = Q({ name: "lucide-circle-slash", render: tt }), at = {
52
- viewBox: "0 0 24 24",
53
- width: "1.2em",
54
- height: "1.2em"
55
- };
56
- function st(u, o) {
57
- return _(), b("svg", at, [...o[0] || (o[0] = [
58
- m("g", {
59
- fill: "none",
60
- stroke: "currentColor",
61
- "stroke-linecap": "round",
62
- "stroke-linejoin": "round",
63
- "stroke-width": "2"
64
- }, [
65
- m("rect", {
66
- width: "5",
67
- height: "18",
68
- x: "14",
69
- y: "3",
70
- rx: "1"
71
- }),
72
- m("rect", {
73
- width: "5",
74
- height: "18",
75
- x: "5",
76
- y: "3",
77
- rx: "1"
78
- })
79
- ], -1)
80
- ])]);
81
- }
82
- const it = Q({ name: "lucide-pause", render: st }), ot = {
83
- viewBox: "0 0 24 24",
84
- width: "1.2em",
85
- height: "1.2em"
86
- };
87
- function rt(u, o) {
88
- return _(), b("svg", ot, [...o[0] || (o[0] = [
89
- m("path", {
90
- fill: "none",
91
- stroke: "currentColor",
92
- "stroke-linecap": "round",
93
- "stroke-linejoin": "round",
94
- "stroke-width": "2",
95
- d: "M20 6L9 17l-5-5"
96
- }, null, -1)
97
- ])]);
98
- }
99
- const lt = Q({ name: "lucide-check", render: rt }), ut = {
100
- viewBox: "0 0 24 24",
101
- width: "1.2em",
102
- height: "1.2em"
103
- };
104
- function ct(u, o) {
105
- return _(), b("svg", ut, [...o[0] || (o[0] = [
106
- m("path", {
107
- fill: "none",
108
- stroke: "currentColor",
109
- "stroke-linecap": "round",
110
- "stroke-linejoin": "round",
111
- "stroke-width": "2",
112
- d: "M18 6L7 17l-5-5m20-2l-7.5 7.5L13 16"
113
- }, null, -1)
114
- ])]);
115
- }
116
- const dt = Q({ name: "lucide-check-check", render: ct });
117
- function ge(u) {
118
- return u.asyncStatus === "loading" ? "loading" : u.state.status === "error" ? "error" : u.state.status === "pending" ? "pending" : u.stale ? "stale" : u.state.status === "success" ? "fresh" : "unknown";
119
- }
120
- const K = {
121
- loading: {
122
- base: "bg-purple-400",
123
- clear: "bg-purple-200",
124
- text: "text-purple-100"
125
- },
126
- fresh: {
127
- base: "bg-success-500",
128
- clear: "bg-success-200",
129
- text: "text-success-100"
130
- },
131
- error: {
132
- base: "bg-error-500",
133
- clear: "bg-error-200",
134
- text: "text-error-100"
135
- },
136
- stale: {
137
- base: "bg-info-500",
138
- clear: "bg-info-200",
139
- text: "text-info-100"
140
- },
141
- pending: {
142
- base: "bg-warning-500",
143
- clear: "bg-warning-200",
144
- text: "text-warning-100"
145
- },
146
- inactive: {
147
- base: "bg-neutral-400",
148
- clear: "bg-neutral-200",
149
- text: "text-neutral-100"
150
- },
151
- unknown: {
152
- base: "bg-gray-400",
153
- clear: "bg-gray-200",
154
- text: "text-gray-100"
155
- }
156
- }, ue = te(performance.timeOrigin + performance.now());
157
- let F, ce = 0;
158
- function vt() {
159
- return F || (F = setInterval(() => {
160
- ue.value = performance.timeOrigin + performance.now();
161
- }, 50)), ce++, ve(() => {
162
- --ce <= 0 && (clearInterval(F), F = void 0);
163
- }), ue;
164
- }
165
- const mt = { class: "h-full w-6 relative" }, pt = ["title"], ht = ["href", "title", "onClick"], ft = { class: "flex font-mono flex-grow gap-0.5 overflow-auto items-center" }, gt = { class: "text-wrap break-words rounded bg-(--ui-text)/5 px-0.5" }, xt = {
166
- key: 0,
167
- "aria-hidden": "true"
168
- }, _t = {
169
- key: 0,
170
- title: "This query is disabled"
171
- }, zt = { class: "rounded bg-theme/70 theme-neutral p-0.5 text-xs flex gap-x-0.5 items-center" }, yt = {
172
- key: 1,
173
- title: "This query will be garbage collected"
174
- }, bt = /* @__PURE__ */ A({
175
- __name: "ListQueryEntry",
176
- props: {
177
- entry: {}
178
- },
179
- setup(u) {
180
- const o = Te(), h = vt();
181
- function r(y) {
182
- y.preventDefault(), y.stopPropagation(), o.push("/queries");
183
- }
184
- const s = P(() => u.entry.key.map((y) => {
185
- let f = y;
186
- try {
187
- f = typeof y == "string" ? JSON.parse(y) : y;
188
- } catch {
189
- }
190
- return f && typeof f == "object" ? We(f) : String(f);
191
- })), z = P(() => ge(u.entry));
192
- return (y, f) => {
193
- const g = Je, c = dt, x = Ke, S = lt, k = it, C = nt, $ = Ge, w = me("RouterLink");
194
- return _(), V(w, {
195
- to: { name: "/queries/[queryId]", params: { queryId: u.entry.keyHash } },
196
- custom: ""
197
- }, {
198
- default: H(({ isActive: v, navigate: O, href: D }) => [
199
- m("div", {
200
- class: I(["grid grid-cols-[minmax(0,auto)_1fr] grid-flow-col items-center gap-x-2 p-1 relative text-sm @container", [
201
- v ? "bg-neutral-200 dark:bg-neutral-700" : "hover:bg-(--ui-bg-elevated)",
202
- u.entry.active ? "" : "text-(--ui-text)/50"
203
- ]])
204
- }, [
205
- m("div", mt, [
206
- m("div", {
207
- class: I(["absolute -inset-1 right-0 flex items-center justify-center", M(K)[z.value].base]),
208
- title: z.value
209
- }, [
210
- z.value === "loading" ? (_(), V(g, {
211
- key: 0,
212
- title: "Loading",
213
- "aria-label": "Loading icon"
214
- })) : z.value === "fresh" ? (_(), V(c, {
215
- key: 1,
216
- title: "Fresh successful data",
217
- "aria-label": "Fresh successful data icon"
218
- })) : z.value === "error" ? (_(), V(x, {
219
- key: 2,
220
- title: "Error",
221
- "aria-label": "Error icon"
222
- })) : z.value === "stale" ? (_(), V(S, {
223
- key: 3,
224
- title: "Stale",
225
- "aria-label": "Stale icon"
226
- })) : z.value === "pending" ? (_(), V(k, {
227
- key: 4,
228
- title: "Pending",
229
- "aria-label": "Pending icon"
230
- })) : G("", !0)
231
- ], 10, pt)
232
- ]),
233
- m("a", {
234
- href: D,
235
- class: "hover:cursor-pointer block overflow-hidden",
236
- title: u.entry.active ? "Active query" : "Inactive query",
237
- onClick: (N) => v ? r(N) : O(N)
238
- }, [
239
- m("ol", ft, [
240
- (_(!0), b(W, null, ne(s.value, (N, X) => (_(), b(W, { key: N }, [
241
- m("li", gt, ae(N), 1),
242
- X < s.value.length - 1 ? (_(), b("li", xt, "/")) : G("", !0)
243
- ], 64))), 128))
244
- ])
245
- ], 8, ht),
246
- u.entry.options?.enabled === !1 ? (_(), b("div", _t, [
247
- m("span", zt, [
248
- E(C, { "aria-hidden": "" }),
249
- f[0] || (f[0] = m("span", { class: "@max-md:hidden" }, "disabled", -1))
250
- ])
251
- ])) : !u.entry.active && u.entry.gcTimeout && u.entry.devtools.inactiveAt && typeof u.entry.options?.gcTime == "number" && Number.isFinite(u.entry.options.gcTime) && u.entry.options.gcTime <= 3e4 ? (_(), b("div", yt, [
252
- E($, {
253
- class: "size-[1em] dark:text-neutral-500 text-neutral-400",
254
- max: u.entry.options.gcTime,
255
- value: u.entry.devtools.inactiveAt + u.entry.options.gcTime - M(h)
256
- }, null, 8, ["max", "value"])
257
- ])) : G("", !0)
258
- ], 2)
259
- ]),
260
- _: 1
261
- }, 8, ["to"]);
262
- };
263
- }
264
- }), wt = /* @__PURE__ */ A({
265
- __name: "UInput.ce",
266
- props: {
267
- modelValue: {},
268
- modelModifiers: {}
269
- },
270
- emits: ["update:modelValue"],
271
- setup(u) {
272
- const o = Be(u, "modelValue");
273
- return (h, r) => Oe((_(), b("input", {
274
- "onUpdate:modelValue": r[0] || (r[0] = (s) => o.value = s),
275
- class: "py-1.5 pl-8 pr-2 rounded border border-(--ui-border) focus:ring-1 focus:ring-theme focus:outline-none transition-colors theme-primary",
276
- placeholder: "Search Queries"
277
- }, null, 512)), [
278
- [De, o.value]
279
- ]);
280
- }
281
- }), St = {
282
- viewBox: "0 0 24 24",
283
- width: "1.2em",
284
- height: "1.2em"
285
- };
286
- function kt(u, o) {
287
- return _(), b("svg", St, [...o[0] || (o[0] = [
288
- m("g", {
289
- fill: "none",
290
- stroke: "currentColor",
291
- "stroke-linecap": "round",
292
- "stroke-linejoin": "round",
293
- "stroke-width": "2"
294
- }, [
295
- m("path", { d: "m21 21l-4.34-4.34" }),
296
- m("circle", {
297
- cx: "11",
298
- cy: "11",
299
- r: "8"
300
- })
301
- ], -1)
302
- ])]);
303
- }
304
- const Pt = Q({ name: "lucide-search", render: kt }), Ct = /* @__PURE__ */ A({
305
- __name: "splitpanes",
306
- props: {
307
- horizontal: { type: Boolean, default: !1 },
308
- pushOtherPanes: { type: Boolean, default: !0 },
309
- maximizePanes: { type: Boolean, default: !0 },
310
- // Maximize pane on splitter double click/tap.
311
- rtl: { type: Boolean, default: !1 },
312
- // Right to left direction.
313
- firstSplitter: { type: Boolean, default: !1 }
314
- },
315
- emits: [
316
- "ready",
317
- "resize",
318
- "resized",
319
- "pane-click",
320
- "pane-maximize",
321
- "pane-add",
322
- "pane-remove",
323
- "splitter-click",
324
- "splitter-dblclick"
325
- ],
326
- setup(u, { emit: o }) {
327
- const h = o, r = u;
328
- Ve();
329
- const s = B([]), z = P(
330
- () => s.value.reduce((e, t) => (e[~~t.id] = t) && e, {})
331
- ), y = P(() => s.value.length), f = B(null), g = B(!1), c = B({
332
- mouseDown: !1,
333
- dragging: !1,
334
- activeSplitter: null,
335
- cursorOffset: 0
336
- // Cursor offset within the splitter.
337
- }), x = B({
338
- // Used to detect double click on touch devices.
339
- splitter: null,
340
- timeoutId: null
341
- }), S = P(() => ({
342
- [`splitpanes splitpanes--${r.horizontal ? "horizontal" : "vertical"}`]: !0,
343
- "splitpanes--dragging": c.value.dragging
344
- }));
345
- let k = () => {
346
- };
347
- function C(e) {
348
- e.addEventListener("mousemove", w, { passive: !1 }), e.addEventListener("mouseup", v), "ontouchstart" in window && (e.addEventListener("touchmove", w, { passive: !1 }), e.addEventListener("touchend", v)), k = () => {
349
- e.removeEventListener("mousemove", w), e.removeEventListener("mouseup", v), "ontouchstart" in window && (e.removeEventListener("touchmove", w), e.removeEventListener("touchend", v)), k = () => {
350
- };
351
- };
352
- }
353
- const $ = (e, t) => {
354
- const a = e.target.closest(".splitpanes__splitter");
355
- if (a) {
356
- const { left: n, top: i } = a.getBoundingClientRect(), { clientX: d, clientY: l } = "touches" in e ? e.touches[0] : e;
357
- c.value.cursorOffset = r.horizontal ? l - i : d - n;
358
- }
359
- C(e.target.ownerDocument || document), c.value.mouseDown = !0, c.value.activeSplitter = t;
360
- }, w = (e) => {
361
- c.value.mouseDown && (e.preventDefault(), c.value.dragging = !0, requestAnimationFrame(() => {
362
- _e(X(e)), L("resize", { event: e }, !0);
363
- }));
364
- }, v = (e) => {
365
- c.value.dragging && L("resized", { event: e }, !0), c.value.mouseDown = !1, c.value.activeSplitter = null, setTimeout(() => {
366
- c.value.dragging = !1, k();
367
- }, 100);
368
- }, O = (e, t) => {
369
- "ontouchstart" in window && (e.preventDefault(), x.value.splitter === t ? (clearTimeout(x.value.timeoutId), x.value.timeoutId = null, D(e, t), x.value.splitter = null) : (x.value.splitter = t, x.value.timeoutId = setTimeout(() => x.value.splitter = null, 500))), c.value.dragging || L("splitter-click", { event: e, index: t }, !0);
370
- }, D = (e, t) => {
371
- if (L("splitter-dblclick", { event: e, index: t }, !0), r.maximizePanes) {
372
- let a = 0;
373
- s.value = s.value.map((n, i) => (n.size = i === t ? n.max : n.min, i !== t && (a += n.min), n)), s.value[t].size -= a, L("pane-maximize", {
374
- event: e,
375
- index: t,
376
- pane: s.value[t]
377
- }), L("resized", { event: e, index: t }, !0);
378
- }
379
- }, N = (e, t) => {
380
- L("pane-click", {
381
- event: e,
382
- index: z.value[t].index,
383
- pane: z.value[t]
384
- });
385
- }, X = (e) => {
386
- var t;
387
- const a = (t = f.value) == null ? void 0 : t.getBoundingClientRect(), { clientX: n, clientY: i } = "ontouchstart" in window && e.touches ? e.touches[0] : e;
388
- return {
389
- x: n - (r.horizontal ? 0 : c.value.cursorOffset) - a.left,
390
- y: i - (r.horizontal ? c.value.cursorOffset : 0) - a.top
391
- };
392
- }, xe = (e) => {
393
- e = e[r.horizontal ? "y" : "x"];
394
- const t = f.value[r.horizontal ? "clientHeight" : "clientWidth"];
395
- return r.rtl && !r.horizontal && (e = t - e), e * 100 / t;
396
- }, _e = (e) => {
397
- const t = c.value.activeSplitter;
398
- let a = {
399
- prevPanesSize: se(t),
400
- nextPanesSize: j(t),
401
- prevReachedMinPanes: 0,
402
- nextReachedMinPanes: 0
403
- };
404
- const n = 0 + (r.pushOtherPanes ? 0 : a.prevPanesSize), i = 100 - (r.pushOtherPanes ? 0 : a.nextPanesSize), d = Math.max(Math.min(xe(e), i), n);
405
- let l = [t, t + 1], p = s.value[l[0]], R = s.value[l[1]];
406
- if (!p || !R) return;
407
- const oe = p.max < 100 && d >= p.max + a.prevPanesSize, Le = R.max < 100 && d <= 100 - (R.max + j(t + 1));
408
- if (oe || Le) {
409
- oe ? (p.size = p.max, R.size = Math.max(100 - p.max - a.prevPanesSize - a.nextPanesSize, 0)) : (p.size = Math.max(
410
- 100 - R.max - a.prevPanesSize - j(t + 1),
411
- 0
412
- ), R.size = R.max);
413
- return;
414
- }
415
- if (r.pushOtherPanes) {
416
- const re = ze(a, d);
417
- if (!re) return;
418
- ({ sums: a, panesToResize: l } = re), p = s.value[l[0]], R = s.value[l[1]];
419
- }
420
- p && (p.size = Math.min(
421
- Math.max(d - a.prevPanesSize - a.prevReachedMinPanes, p.min),
422
- p.max
423
- )), R && (R.size = Math.min(
424
- Math.max(100 - d - a.nextPanesSize - a.nextReachedMinPanes, R.min),
425
- R.max
426
- ));
427
- }, ze = (e, t) => {
428
- const a = c.value.activeSplitter, n = [a, a + 1];
429
- let i = s.value[n[0]], d = s.value[n[1]];
430
- return i && t < e.prevPanesSize + i.min && (n[0] = ye(a).index, e.prevReachedMinPanes = 0, n[0] < a && s.value.forEach((l, p) => {
431
- p > n[0] && p <= a && (l.size = l.min, e.prevReachedMinPanes += l.min);
432
- }), e.prevPanesSize = se(n[0]), n[0] === void 0) ? (e.prevReachedMinPanes = 0, s.value[0].size = s.value[0].min, s.value.forEach((l, p) => {
433
- p > 0 && p <= a && (l.size = l.min, e.prevReachedMinPanes += l.min);
434
- }), d.size = 100 - e.prevReachedMinPanes - s.value[0].min - e.prevPanesSize - e.nextPanesSize, null) : t > 100 - e.nextPanesSize - s.value[n[1]].min && (n[1] = be(a).index, e.nextReachedMinPanes = 0, n[1] > a + 1 && s.value.forEach((l, p) => {
435
- p > a && p < n[1] && (l.size = l.min, e.nextReachedMinPanes += l.min);
436
- }), e.nextPanesSize = j(n[1] - 1), n[1] === void 0) ? (e.nextReachedMinPanes = 0, s.value.forEach((l, p) => {
437
- p < y.value - 1 && p >= a + 1 && (l.size = l.min, e.nextReachedMinPanes += l.min);
438
- }), s.value[n[0]].size = 100 - e.prevPanesSize - j(n[0] - 1), null) : { sums: e, panesToResize: n };
439
- }, se = (e) => s.value.reduce((t, a, n) => t + (n < e ? a.size : 0), 0), j = (e) => s.value.reduce((t, a, n) => t + (n > e + 1 ? a.size : 0), 0), ye = (e) => [...s.value].reverse().find((t) => t.index < e && t.size > t.min) || {}, be = (e) => s.value.find((t) => t.index > e + 1 && t.size > t.min) || {}, we = () => {
440
- var e;
441
- const t = Array.from(((e = f.value) == null ? void 0 : e.children) || []);
442
- for (const a of t) {
443
- const n = a.classList.contains("splitpanes__pane"), i = a.classList.contains("splitpanes__splitter");
444
- !n && !i && (a.remove(), console.warn(
445
- "Splitpanes: Only <pane> elements are allowed at the root of <splitpanes>. One of your DOM nodes was removed."
446
- ));
447
- }
448
- }, ie = (e, t, a = !1) => {
449
- const n = e - 1, i = document.createElement("div");
450
- i.classList.add("splitpanes__splitter"), a || (i.onmousedown = (d) => $(d, n), typeof window < "u" && "ontouchstart" in window && (i.ontouchstart = (d) => $(d, n)), i.onclick = (d) => O(d, n + 1)), i.ondblclick = (d) => D(d, n + 1), t.parentNode.insertBefore(i, t);
451
- }, Se = (e) => {
452
- e.onmousedown = void 0, e.onclick = void 0, e.ondblclick = void 0, e.remove();
453
- }, U = () => {
454
- var e;
455
- const t = Array.from(((e = f.value) == null ? void 0 : e.children) || []);
456
- for (const n of t)
457
- n.className.includes("splitpanes__splitter") && Se(n);
458
- let a = 0;
459
- for (const n of t)
460
- n.className.includes("splitpanes__pane") && (!a && r.firstSplitter ? ie(a, n, !0) : a && ie(a, n), a++);
461
- }, ke = ({ uid: e, ...t }) => {
462
- const a = z.value[e];
463
- for (const [n, i] of Object.entries(t)) a[n] = i;
464
- }, Pe = (e) => {
465
- var t;
466
- let a = -1;
467
- Array.from(((t = f.value) == null ? void 0 : t.children) || []).some((n) => (n.className.includes("splitpanes__pane") && a++, n.isSameNode(e.el))), s.value.splice(a, 0, { ...e, index: a }), s.value.forEach((n, i) => n.index = i), g.value && ee(() => {
468
- U(), Y({ addedPane: s.value[a] }), L("pane-add", { pane: s.value[a] });
469
- });
470
- }, Ce = (e) => {
471
- const t = s.value.findIndex((n) => n.id === e);
472
- s.value[t].el = null;
473
- const a = s.value.splice(t, 1)[0];
474
- s.value.forEach((n, i) => n.index = i), ee(() => {
475
- U(), L("pane-remove", { pane: a }), Y({ removedPane: { ...a } });
476
- });
477
- }, Y = (e = {}) => {
478
- !e.addedPane && !e.removedPane ? $e() : s.value.some((t) => t.givenSize !== null || t.min || t.max < 100) ? Re(e) : Me(), g.value && L("resized");
479
- }, Me = () => {
480
- const e = 100 / y.value;
481
- let t = 0;
482
- const a = [], n = [];
483
- for (const i of s.value)
484
- i.size = Math.max(Math.min(e, i.max), i.min), t -= i.size, i.size >= i.max && a.push(i.id), i.size <= i.min && n.push(i.id);
485
- t > 0.1 && Z(t, a, n);
486
- }, $e = () => {
487
- let e = 100;
488
- const t = [], a = [];
489
- let n = 0;
490
- for (const d of s.value)
491
- e -= d.size, d.givenSize !== null && n++, d.size >= d.max && t.push(d.id), d.size <= d.min && a.push(d.id);
492
- let i = 100;
493
- if (e > 0.1) {
494
- for (const d of s.value)
495
- d.givenSize === null && (d.size = Math.max(
496
- Math.min(e / (y.value - n), d.max),
497
- d.min
498
- )), i -= d.size;
499
- i > 0.1 && Z(i, t, a);
500
- }
501
- }, Re = ({ addedPane: e, removedPane: t } = {}) => {
502
- let a = 100 / y.value, n = 0;
503
- const i = [], d = [];
504
- (e?.givenSize ?? null) !== null && (a = (100 - e.givenSize) / (y.value - 1));
505
- for (const l of s.value)
506
- n -= l.size, l.size >= l.max && i.push(l.id), l.size <= l.min && d.push(l.id);
507
- if (!(Math.abs(n) < 0.1)) {
508
- for (const l of s.value)
509
- e?.givenSize !== null && e?.id === l.id || (l.size = Math.max(Math.min(a, l.max), l.min)), n -= l.size, l.size >= l.max && i.push(l.id), l.size <= l.min && d.push(l.id);
510
- n > 0.1 && Z(n, i, d);
511
- }
512
- }, Z = (e, t, a) => {
513
- let n;
514
- e > 0 ? n = e / (y.value - t.length) : n = e / (y.value - a.length), s.value.forEach((i, d) => {
515
- if (e > 0 && !t.includes(i.id)) {
516
- const l = Math.max(Math.min(i.size + n, i.max), i.min), p = l - i.size;
517
- e -= p, i.size = l;
518
- } else if (!a.includes(i.id)) {
519
- const l = Math.max(Math.min(i.size + n, i.max), i.min), p = l - i.size;
520
- e -= p, i.size = l;
521
- }
522
- }), Math.abs(e) > 0.1 && ee(() => {
523
- g.value && console.warn("Splitpanes: Could not resize panes correctly due to their constraints.");
524
- });
525
- }, L = (e, t = void 0, a = !1) => {
526
- const n = t?.index ?? c.value.activeSplitter ?? null;
527
- h(e, {
528
- ...t,
529
- ...n !== null && { index: n },
530
- ...a && n !== null && {
531
- prevPane: s.value[n - (r.firstSplitter ? 1 : 0)],
532
- nextPane: s.value[n + (r.firstSplitter ? 0 : 1)]
533
- },
534
- panes: s.value.map((i) => ({
535
- min: i.min,
536
- max: i.max,
537
- size: i.size
538
- }))
539
- });
540
- };
541
- return J(
542
- () => r.firstSplitter,
543
- () => U()
544
- ), pe(() => {
545
- we(), U(), Y(), L("ready"), g.value = !0;
546
- }), he(() => g.value = !1), T("panes", s), T("indexedPanes", z), T(
547
- "horizontal",
548
- P(() => r.horizontal)
549
- ), T("requestUpdate", ke), T("onPaneAdd", Pe), T("onPaneRemove", Ce), T("onPaneClick", N), (e, t) => (_(), b("div", {
550
- class: I(S.value),
551
- ref_key: "containerEl",
552
- ref: f
553
- }, [
554
- fe(e.$slots, "default")
555
- ], 2));
556
- }
557
- }), de = /* @__PURE__ */ A({
558
- __name: "pane",
559
- props: {
560
- size: { type: [Number, String] },
561
- minSize: { type: [Number, String], default: 0 },
562
- maxSize: { type: [Number, String], default: 100 }
563
- },
564
- setup(u) {
565
- var o;
566
- const h = u, r = q("requestUpdate"), s = q("onPaneAdd"), z = q("horizontal"), y = q("onPaneRemove"), f = q("onPaneClick"), g = (o = qe()) == null ? void 0 : o.uid, c = q("indexedPanes"), x = P(() => c.value[g]), S = B(null), k = P(() => {
567
- const v = isNaN(h.size) || h.size === void 0 ? 0 : parseFloat(h.size);
568
- return Math.max(Math.min(v, $.value), C.value);
569
- }), C = P(() => {
570
- const v = parseFloat(h.minSize);
571
- return isNaN(v) ? 0 : v;
572
- }), $ = P(() => {
573
- const v = parseFloat(h.maxSize);
574
- return isNaN(v) ? 100 : v;
575
- }), w = P(() => {
576
- var v;
577
- return `${z.value ? "height" : "width"}: ${(v = x.value) == null ? void 0 : v.size}%`;
578
- });
579
- return J(
580
- () => k.value,
581
- (v) => r({ uid: g, size: v })
582
- ), J(
583
- () => C.value,
584
- (v) => r({ uid: g, min: v })
585
- ), J(
586
- () => $.value,
587
- (v) => r({ uid: g, max: v })
588
- ), pe(() => {
589
- s({
590
- id: g,
591
- el: S.value,
592
- min: C.value,
593
- max: $.value,
594
- // The given size (useful to know the user intention).
595
- givenSize: h.size === void 0 ? null : k.value,
596
- size: k.value
597
- // The computed current size at any time.
598
- });
599
- }), he(() => y(g)), (v, O) => (_(), b("div", {
600
- ref_key: "paneEl",
601
- ref: S,
602
- class: "splitpanes__pane",
603
- onClick: O[0] || (O[0] = (D) => M(f)(D, M(g))),
604
- style: Ie(w.value)
605
- }, [
606
- fe(v.$slots, "default")
607
- ], 4));
608
- }
609
- }), Mt = "bae45330cd3d4e0e96b60d26b57009b5";
610
- let $t = 0;
611
- const Rt = () => `${Mt}-${Date.now()}-${$t++}`;
612
- class Lt extends Event {
613
- constructor(o, h, r) {
614
- super(o), this.container = h, this.matches = r;
615
- }
616
- }
617
- class Et extends EventTarget {
618
- #e;
619
- #t = new AbortController();
620
- container;
621
- matches;
622
- constructor(o, h) {
623
- super(), this.container = h;
624
- const r = `container-query-observer-${Rt()}`, s = `data-${r}`;
625
- o.setAttribute(s, "");
626
- const z = `--${r}`, y = `
627
- @property ${z} {
628
- syntax: '<custom-ident>';
629
- inherits: false;
630
- initial-value: --false;
631
- }
632
- `.trim(), f = `
633
- @container ${h} {
634
- [${s}] {
635
- ${z}: --true;
636
- }
637
- }
638
- `.trim(), g = o.getRootNode();
639
- if (!(g instanceof ShadowRoot) && !(g instanceof Document))
640
- throw console.error("root node of element isn't a ShadowRoot or Document", g), new TypeError("Root node must be a ShadowRoot or Document");
641
- const c = new CSSStyleSheet();
642
- if (c.replaceSync(y), document.adoptedStyleSheets.push(c), g.ownerDocument === document) {
643
- const k = new CSSStyleSheet();
644
- k.replaceSync(f), g.adoptedStyleSheets.push(k);
645
- }
646
- const S = getComputedStyle(o);
647
- this.matches = S.getPropertyValue(z) === "--true", this.#e = o, this.#n(z, h, o);
648
- }
649
- #n(o, h, r) {
650
- const s = {};
651
- r.style.setProperty("transition", `${o} 0.001ms step-start`), r.style.setProperty("transition-behavior", "allow-discrete"), r.addEventListener(
652
- "transitionrun",
653
- (f) => {
654
- if (r === f.target) {
655
- const g = getComputedStyle(r), c = {}, x = g.getPropertyValue(o), S = s[o];
656
- if (x !== S && (c[o] = x, s[o] = x, o in c)) {
657
- const C = c[o] === "--true";
658
- this.matches = C;
659
- const $ = new Lt("change", h, C);
660
- this.dispatchEvent($);
661
- }
662
- }
663
- },
664
- { signal: this.#t.signal }
665
- );
666
- const y = getComputedStyle(r).getPropertyValue(o);
667
- s[o] = y;
668
- }
669
- dispose() {
670
- this.#e.style.removeProperty("transition"), this.#e.style.removeProperty("transition-behavior"), this.#t.abort();
671
- }
672
- }
673
- typeof window < "u" && (HTMLElement.prototype.matchContainer || (HTMLElement.prototype.matchContainer = function(o) {
674
- return new Et(this, o);
675
- }));
676
- function Nt(u, o) {
677
- const h = Qe(
678
- () => typeof document < "u" && typeof document.body.matchContainer == "function"
679
- ), r = te(), s = te(!1);
680
- return Ae(() => {
681
- h.value && (r.value?.dispose(), r.value = le(o)?.matchContainer(le(u)), s.value = !!r.value?.matches);
682
- }), ve(() => {
683
- r.value?.dispose();
684
- }), je(
685
- r,
686
- "change",
687
- (z) => {
688
- s.value = z.matches;
689
- },
690
- { passive: !0 }
691
- ), P(() => s.value);
692
- }
693
- const Tt = { class: "grid grid-rows-[auto_1fr] overflow-hidden @container" }, Bt = { class: "flex items-center p-2 border-b border-(--ui-border) gap-2" }, Ot = { class: "relative flex-grow" }, Dt = { class: "flex gap-x-1" }, Vt = ["title"], qt = { class: "@max-[750px]:hidden" }, It = {
694
- role: "list",
695
- class: "divide-y divide-(--ui-border)"
696
- }, Ut = /* @__PURE__ */ A({
697
- __name: "queries",
698
- setup(u) {
699
- const o = B(""), h = Ue(), r = P(() => {
700
- let c = h.value;
701
- if (o.value) {
702
- const x = o.value.toLowerCase();
703
- c = c.filter((S) => S.key.some((C) => String(C).toLowerCase().includes(x)));
704
- }
705
- return c.sort((x, S) => S.devtools.updatedAt - x.devtools.updatedAt);
706
- }), s = P(() => ({
707
- loading: [],
708
- fresh: [],
709
- error: [],
710
- pending: [],
711
- inactive: r.value.filter((c) => !c.active),
712
- ...Object.groupBy(r.value, (c) => ge(c))
713
- })), z = Fe("split-panes-container"), y = Nt("(width < 768px)", () => z.value?.$el), f = He("pc-devtools-query-list-panel-size", [30, 70]);
714
- function g({ panes: c }) {
715
- f.value = c.map((x) => x.size);
716
- }
717
- return (c, x) => {
718
- const S = Pt, k = wt, C = bt, $ = me("RouterView");
719
- return _(), b("section", Tt, [
720
- m("div", Bt, [
721
- m("div", Ot, [
722
- E(S, { class: "absolute left-2 top-1/2 -translate-y-1/2 text-ui-text-muted size-4" }),
723
- E(k, {
724
- modelValue: o.value,
725
- "onUpdate:modelValue": x[0] || (x[0] = (w) => o.value = w),
726
- type: "search",
727
- class: "w-full",
728
- placeholder: "Search Queries"
729
- }, null, 8, ["modelValue"])
730
- ]),
731
- m("div", Dt, [
732
- (_(!0), b(W, null, ne(s.value, (w, v) => (_(), b("div", {
733
- key: v,
734
- class: I(["theme-neutral bg-(--ui-bg-muted) rounded p-1 text-xs font-semibold flex items-center gap-x-1", (w?.length ?? 0) === 0 ? "text-(--ui-text-muted)" : ""]),
735
- title: `${w?.length ?? 0} ${v} queries (after filtering)`
736
- }, [
737
- m("div", {
738
- class: I(["rounded-full size-2", M(K)[v].base])
739
- }, null, 2),
740
- m("span", qt, ae(v), 1),
741
- m("div", {
742
- class: I([
743
- "px-1.5 py-0.5 rounded min-w-[1.65em] flex justify-center",
744
- (w?.length ?? 0) === 0 ? "bg-(--ui-bg-accented)" : [M(K)[v].base, M(K)[v].text]
745
- ])
746
- }, [
747
- m("span", null, ae(w?.length ?? 0), 1)
748
- ], 2)
749
- ], 10, Vt))), 128))
750
- ])
751
- ]),
752
- E(M(Ct), {
753
- ref: "split-panes-container",
754
- class: "overflow-hidden",
755
- horizontal: M(y),
756
- onResized: g
757
- }, {
758
- default: H(() => [
759
- E(M(de), {
760
- "min-size": "15",
761
- size: M(f)[0],
762
- class: "flex flex-col"
763
- }, {
764
- default: H(() => [
765
- m("ol", It, [
766
- (_(!0), b(W, null, ne(r.value, (w) => (_(), b("li", {
767
- key: w.keyHash
768
- }, [
769
- E(C, { entry: w }, null, 8, ["entry"])
770
- ]))), 128))
771
- ])
772
- ]),
773
- _: 1
774
- }, 8, ["size"]),
775
- E(M(de), {
776
- "min-size": "30",
777
- size: M(f)[1],
778
- class: "flex flex-col"
779
- }, {
780
- default: H(() => [
781
- E($)
782
- ]),
783
- _: 1
784
- }, 8, ["size"])
785
- ]),
786
- _: 1
787
- }, 8, ["horizontal"])
788
- ]);
789
- };
790
- }
791
- });
792
- export {
793
- Ut as default
794
- };
795
- //# sourceMappingURL=queries-CLrIueL2.js.map