@pinia/colada-devtools 0.1.9 → 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.
- package/dist/index.js +488 -372
- package/dist/index.js.map +1 -1
- package/dist-panel/(unselected)-B-_Xdo2t.js +17 -0
- package/dist-panel/(unselected)-B-_Xdo2t.js.map +1 -0
- package/dist-panel/{index-BNGmSTu0.js → (unselected)-BFwQCIEo.js} +5 -5
- package/dist-panel/(unselected)-BFwQCIEo.js.map +1 -0
- package/dist-panel/_mutationId_-BG1E7StK.js +306 -0
- package/dist-panel/_mutationId_-BG1E7StK.js.map +1 -0
- package/dist-panel/_queryId_-BHPtMxoe.js +423 -0
- package/dist-panel/_queryId_-BHPtMxoe.js.map +1 -0
- package/dist-panel/braces-B9tH-Qp5.js +294 -0
- package/dist-panel/braces-B9tH-Qp5.js.map +1 -0
- package/dist-panel/index-CTwvPt67.js +6403 -0
- package/dist-panel/index-CTwvPt67.js.map +1 -0
- package/dist-panel/{index-goOYcO8U.js → index-kHk614RY.js} +2 -2
- package/dist-panel/{index-goOYcO8U.js.map → index-kHk614RY.js.map} +1 -1
- package/dist-panel/index.js +1 -1
- package/dist-panel/{loader-t1YDOb8H.js → loader-nEPBwFfz.js} +2 -2
- package/dist-panel/loader-nEPBwFfz.js.map +1 -0
- package/dist-panel/{mouse-pointer-click-BMFWvdTu.js → mouse-pointer-click-DQLuAnaZ.js} +2 -2
- package/dist-panel/mouse-pointer-click-DQLuAnaZ.js.map +1 -0
- package/dist-panel/mutations-BZWQwG2S.js +297 -0
- package/dist-panel/mutations-BZWQwG2S.js.map +1 -0
- package/dist-panel/queries-D3ybdTKc.js +286 -0
- package/dist-panel/queries-D3ybdTKc.js.map +1 -0
- package/dist-panel/{settings-BRfTfxFz.js → settings-DddAyvXJ.js} +2 -2
- package/dist-panel/{settings-BRfTfxFz.js.map → settings-DddAyvXJ.js.map} +1 -1
- package/dist-panel/use-container-media-query-BWmwm2oB.js +555 -0
- package/dist-panel/use-container-media-query-BWmwm2oB.js.map +1 -0
- package/dist-shared/index.d.ts +105 -9
- package/dist-shared/index.js.map +1 -1
- package/package.json +9 -10
- package/dist-panel/_queryId_-BizYY_I8.js +0 -701
- package/dist-panel/_queryId_-BizYY_I8.js.map +0 -1
- package/dist-panel/index-BNGmSTu0.js.map +0 -1
- package/dist-panel/index-CIfbEdr_.js +0 -6340
- package/dist-panel/index-CIfbEdr_.js.map +0 -1
- package/dist-panel/loader-t1YDOb8H.js.map +0 -1
- package/dist-panel/mouse-pointer-click-BMFWvdTu.js.map +0 -1
- package/dist-panel/mutations-BNe8aMZH.js +0 -13
- package/dist-panel/mutations-BNe8aMZH.js.map +0 -1
- package/dist-panel/queries-0xQLbzuX.js +0 -795
- package/dist-panel/queries-0xQLbzuX.js.map +0 -1
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
import { getValueTypeClass as _, formatValue as $, isPlainObject as k } from "@pinia/colada-devtools/shared";
|
|
2
|
+
import { m as l, c as s, o as r, a as o, d as y, j, b as w, n as d, T as V, f as b, e as m, t as v, g as f, F as C, h as M, r as z, X as S, I as A, J as E, Y as H, P as g, q as O, Z as T, _ as J } from "./index-CTwvPt67.js";
|
|
3
|
+
const L = {
|
|
4
|
+
viewBox: "0 0 24 24",
|
|
5
|
+
width: "1.2em",
|
|
6
|
+
height: "1.2em"
|
|
7
|
+
};
|
|
8
|
+
function N(e, t) {
|
|
9
|
+
return r(), s("svg", L, [...t[0] || (t[0] = [
|
|
10
|
+
o("path", {
|
|
11
|
+
fill: "none",
|
|
12
|
+
stroke: "currentColor",
|
|
13
|
+
"stroke-linecap": "round",
|
|
14
|
+
"stroke-linejoin": "round",
|
|
15
|
+
"stroke-width": "2",
|
|
16
|
+
d: "m9 18l6-6l-6-6"
|
|
17
|
+
}, null, -1)
|
|
18
|
+
])]);
|
|
19
|
+
}
|
|
20
|
+
const P = l({ name: "lucide-chevron-right", render: N }), Y = ["title"], D = /* @__PURE__ */ y({
|
|
21
|
+
__name: "JsonItem",
|
|
22
|
+
props: {
|
|
23
|
+
itemKey: {},
|
|
24
|
+
value: { type: [String, Number, Boolean, null, Array, Object, Map, Set] },
|
|
25
|
+
depth: {}
|
|
26
|
+
},
|
|
27
|
+
setup(e) {
|
|
28
|
+
const t = e, c = j(!1), a = w(() => {
|
|
29
|
+
const { value: n } = t;
|
|
30
|
+
return Array.isArray(n) && n.length > 0 || k(n) && Object.keys(n).length > 0 || n instanceof Map && n.size > 0 || n instanceof Set && n.size > 0;
|
|
31
|
+
}), i = w(() => {
|
|
32
|
+
const { value: n } = t;
|
|
33
|
+
return Array.isArray(n) ? n.map((h, u) => [u, h]) : k(n) ? Object.entries(n) : n instanceof Map ? n.entries() : n instanceof Set ? Array.from(n).map((h, u) => [u, h]) : [];
|
|
34
|
+
});
|
|
35
|
+
function p() {
|
|
36
|
+
a.value && (c.value = !c.value);
|
|
37
|
+
}
|
|
38
|
+
return (n, h) => {
|
|
39
|
+
const u = P, B = z("JsonItem", !0);
|
|
40
|
+
return r(), s("div", {
|
|
41
|
+
style: V({ paddingLeft: `${e.depth * 0.35}em` }),
|
|
42
|
+
class: d(["ring-(--ui-bg-muted)", {
|
|
43
|
+
"hover:ring": a.value,
|
|
44
|
+
"rounded-tl": e.depth > 0
|
|
45
|
+
}])
|
|
46
|
+
}, [
|
|
47
|
+
o("div", {
|
|
48
|
+
class: d(["flex items-center gap-2 py-0.5 bg-transparent hover:bg-(--ui-bg-muted) duration-200 transition-colors", e.depth > 0 && "rounded-l"])
|
|
49
|
+
}, [
|
|
50
|
+
a.value ? (r(), m(u, {
|
|
51
|
+
key: 0,
|
|
52
|
+
class: d(["size-3 text-(--ui-text-dimmed) transition-transform duration-200 cursor-pointer", { "rotate-90": c.value }]),
|
|
53
|
+
onClick: p
|
|
54
|
+
}, null, 8, ["class"])) : b("", !0),
|
|
55
|
+
o("span", {
|
|
56
|
+
class: d(["text-(--devtools-syntax-gray)", !a.value && "ml-5"])
|
|
57
|
+
}, v(e.itemKey) + ": ", 3),
|
|
58
|
+
o("span", {
|
|
59
|
+
class: d([f(_)(e.value), a.value && "cursor-pointer"]),
|
|
60
|
+
title: a.value ? "Click to expand" : void 0,
|
|
61
|
+
onClick: p
|
|
62
|
+
}, v(f($)(e.value)), 11, Y)
|
|
63
|
+
], 2),
|
|
64
|
+
a.value && c.value ? (r(!0), s(C, { key: 0 }, M(i.value, ([x, I]) => (r(), m(B, {
|
|
65
|
+
key: x,
|
|
66
|
+
"item-key": String(x),
|
|
67
|
+
value: I,
|
|
68
|
+
depth: e.depth + 1
|
|
69
|
+
}, null, 8, ["item-key", "value", "depth"]))), 128)) : b("", !0)
|
|
70
|
+
], 6);
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
function F(e) {
|
|
75
|
+
return !!e && (Array.isArray(e) || k(e) || e instanceof Map || e instanceof Set);
|
|
76
|
+
}
|
|
77
|
+
const pe = /* @__PURE__ */ y({
|
|
78
|
+
__name: "JsonViewer",
|
|
79
|
+
props: {
|
|
80
|
+
data: {}
|
|
81
|
+
},
|
|
82
|
+
setup(e) {
|
|
83
|
+
return (t, c) => F(e.data) ? (r(!0), s(C, { key: 0 }, M(Object.entries(e.data), ([a, i]) => (r(), m(D, {
|
|
84
|
+
key: a,
|
|
85
|
+
"item-key": a,
|
|
86
|
+
value: i,
|
|
87
|
+
depth: 0
|
|
88
|
+
}, null, 8, ["item-key", "value"]))), 128)) : (r(), s("span", {
|
|
89
|
+
key: 1,
|
|
90
|
+
class: d(f(_)(e.data))
|
|
91
|
+
}, v(f($)(e.data)), 3));
|
|
92
|
+
}
|
|
93
|
+
}), R = {
|
|
94
|
+
viewBox: "0 0 24 24",
|
|
95
|
+
width: "1.2em",
|
|
96
|
+
height: "1.2em"
|
|
97
|
+
};
|
|
98
|
+
function U(e, t) {
|
|
99
|
+
return r(), s("svg", R, [...t[0] || (t[0] = [
|
|
100
|
+
o("path", {
|
|
101
|
+
fill: "none",
|
|
102
|
+
stroke: "currentColor",
|
|
103
|
+
"stroke-linecap": "round",
|
|
104
|
+
"stroke-linejoin": "round",
|
|
105
|
+
"stroke-width": "2",
|
|
106
|
+
d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
|
|
107
|
+
}, null, -1)
|
|
108
|
+
])]);
|
|
109
|
+
}
|
|
110
|
+
const he = l({ name: "lucide-trash", render: U }), X = {
|
|
111
|
+
viewBox: "0 0 24 24",
|
|
112
|
+
width: "1.2em",
|
|
113
|
+
height: "1.2em"
|
|
114
|
+
};
|
|
115
|
+
function q(e, t) {
|
|
116
|
+
return r(), s("svg", X, [...t[0] || (t[0] = [
|
|
117
|
+
o("g", {
|
|
118
|
+
fill: "none",
|
|
119
|
+
stroke: "currentColor",
|
|
120
|
+
"stroke-linecap": "round",
|
|
121
|
+
"stroke-linejoin": "round",
|
|
122
|
+
"stroke-width": "2"
|
|
123
|
+
}, [
|
|
124
|
+
o("path", { d: "M3 12a9 9 0 1 0 9-9a9.75 9.75 0 0 0-6.74 2.74L3 8" }),
|
|
125
|
+
o("path", { d: "M3 3v5h5" })
|
|
126
|
+
], -1)
|
|
127
|
+
])]);
|
|
128
|
+
}
|
|
129
|
+
const me = l({ name: "lucide-rotate-ccw", render: q }), G = { class: "collapse collapse-arrow" }, K = { class: "collapse-title px-2 py-0.5 bg-neutral-200 dark:bg-neutral-800 theme-neutral" }, W = { class: "font-semibold text-sm flex gap-x-1 items-center" }, Z = /* @__PURE__ */ y({
|
|
130
|
+
__name: "UCollapse.ce",
|
|
131
|
+
props: /* @__PURE__ */ S({
|
|
132
|
+
title: { type: String },
|
|
133
|
+
icon: { type: null },
|
|
134
|
+
noPadding: { type: Boolean }
|
|
135
|
+
}, {
|
|
136
|
+
open: { type: Boolean, default: !0 },
|
|
137
|
+
openModifiers: {}
|
|
138
|
+
}),
|
|
139
|
+
emits: ["update:open"],
|
|
140
|
+
setup(e) {
|
|
141
|
+
const t = A(e, "open");
|
|
142
|
+
function c(a) {
|
|
143
|
+
if (a.target instanceof HTMLElement) {
|
|
144
|
+
const i = {
|
|
145
|
+
block: "nearest",
|
|
146
|
+
inline: "nearest",
|
|
147
|
+
behavior: "smooth"
|
|
148
|
+
};
|
|
149
|
+
a.target.scrollIntoView(i);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
return (a, i) => (r(), s("div", G, [
|
|
153
|
+
E(o("input", {
|
|
154
|
+
"onUpdate:modelValue": i[0] || (i[0] = (p) => t.value = p),
|
|
155
|
+
type: "checkbox"
|
|
156
|
+
}, null, 512), [
|
|
157
|
+
[H, t.value]
|
|
158
|
+
]),
|
|
159
|
+
o("div", K, [
|
|
160
|
+
g(a.$slots, "title", {
|
|
161
|
+
open: t.value,
|
|
162
|
+
title: e.title
|
|
163
|
+
}, () => [
|
|
164
|
+
o("h3", W, [
|
|
165
|
+
g(a.$slots, "icon", {}, () => [
|
|
166
|
+
e.icon ? (r(), m(T(e.icon), {
|
|
167
|
+
key: 0,
|
|
168
|
+
class: "size-4"
|
|
169
|
+
})) : b("", !0)
|
|
170
|
+
], !0),
|
|
171
|
+
O(" " + v(e.title ?? "Group"), 1)
|
|
172
|
+
])
|
|
173
|
+
], !0)
|
|
174
|
+
]),
|
|
175
|
+
o("div", {
|
|
176
|
+
class: d([!e.noPadding && "px-2", "collapse-content text-sm overflow-hidden"]),
|
|
177
|
+
onTransitionend: c
|
|
178
|
+
}, [
|
|
179
|
+
g(a.$slots, "default", { open: t.value }, void 0, !0)
|
|
180
|
+
], 34)
|
|
181
|
+
]));
|
|
182
|
+
}
|
|
183
|
+
}), Q = '.collapse[data-v-46c2be51]:not(td,tr,colgroup){visibility:visible}.collapse[data-v-46c2be51]{position:relative;display:grid;overflow:hidden;width:100%;grid-template-rows:max-content 0fr;transition:grid-template-rows .2s;isolation:isolate}.collapse>input[data-v-46c2be51]:is([type=checkbox],[type=radio]){grid-column-start:1;grid-row-start:1;appearance:none;opacity:0}.collapse[data-v-46c2be51]:is([open],:focus),.collapse[data-v-46c2be51]:has(>input:is([type=checkbox],[type=radio]):checked){grid-template-rows:max-content 1fr}.collapse:is([open],:focus)>.collapse-content[data-v-46c2be51],.collapse[data-v-46c2be51]:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){visibility:visible;min-height:fit-content}.collapse[data-v-46c2be51]:focus-visible,.collapse[data-v-46c2be51]:has(>input:is([type=checkbox],[type=radio]):focus-visible){outline-color:var(--ui-text);outline-style:solid;outline-width:2px;outline-offset:2px}.collapse:not(.collapse-close)>input[type=checkbox][data-v-46c2be51],.collapse:not(.collapse-close)>input[type=radio][data-v-46c2be51]:not(:checked),.collapse:not(.collapse-close)>.collapse-title[data-v-46c2be51]{cursor:pointer}.collapse:focus:not(.collapse-close,.collapse[open])>.collapse-title[data-v-46c2be51]{cursor:unset}.collapse:is([open]).collapse-arrow>.collapse-title[data-v-46c2be51]:after{transform:translateY(-50%) rotate(225deg)}.collapse.collapse-arrow:focus>.collapse-title[data-v-46c2be51]:after{transform:translateY(-50%) rotate(225deg)}.collapse.collapse-arrow>input:is([type=checkbox],[type=radio]):checked~.collapse-title[data-v-46c2be51]:after{transform:translateY(-50%) rotate(225deg)}.collapse>input[data-v-46c2be51]:is([type=checkbox],[type=radio]){z-index:1;width:100%}.collapse-title[data-v-46c2be51],.collapse-content[data-v-46c2be51]{grid-column-start:1;grid-row-start:1}.collapse-content[data-v-46c2be51]{visibility:hidden;grid-column-start:1;grid-row-start:2;min-height:0;cursor:unset;transition:visibility .2s}.collapse-arrow>.collapse-title[data-v-46c2be51]:after{position:absolute;display:block;height:.5rem;width:.5rem;transform:translateY(-100%) rotate(45deg);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;top:50%;right:.8em;inset-inline-end:.75rem;content:"";transform-origin:75% 75%;box-shadow:2px 2px;pointer-events:none}.collapse-title[data-v-46c2be51]{position:relative;width:100%;transition:background-color .2s ease-out}', ve = /* @__PURE__ */ J(Z, [["styles", [Q]], ["__scopeId", "data-v-46c2be51"]]), ee = {
|
|
184
|
+
viewBox: "0 0 24 24",
|
|
185
|
+
width: "1.2em",
|
|
186
|
+
height: "1.2em"
|
|
187
|
+
};
|
|
188
|
+
function te(e, t) {
|
|
189
|
+
return r(), s("svg", ee, [...t[0] || (t[0] = [
|
|
190
|
+
o("path", {
|
|
191
|
+
fill: "none",
|
|
192
|
+
stroke: "currentColor",
|
|
193
|
+
"stroke-linecap": "round",
|
|
194
|
+
"stroke-linejoin": "round",
|
|
195
|
+
"stroke-width": "2",
|
|
196
|
+
d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"
|
|
197
|
+
}, null, -1)
|
|
198
|
+
])]);
|
|
199
|
+
}
|
|
200
|
+
const fe = l({ name: "lucide-wrench", render: te }), oe = {
|
|
201
|
+
viewBox: "0 0 24 24",
|
|
202
|
+
width: "1.2em",
|
|
203
|
+
height: "1.2em"
|
|
204
|
+
};
|
|
205
|
+
function ne(e, t) {
|
|
206
|
+
return r(), s("svg", oe, [...t[0] || (t[0] = [
|
|
207
|
+
o("g", {
|
|
208
|
+
fill: "none",
|
|
209
|
+
stroke: "currentColor",
|
|
210
|
+
"stroke-linecap": "round",
|
|
211
|
+
"stroke-linejoin": "round",
|
|
212
|
+
"stroke-width": "2"
|
|
213
|
+
}, [
|
|
214
|
+
o("circle", {
|
|
215
|
+
cx: "12",
|
|
216
|
+
cy: "12",
|
|
217
|
+
r: "10"
|
|
218
|
+
}),
|
|
219
|
+
o("path", { d: "M12 16v-4m0-4h.01" })
|
|
220
|
+
], -1)
|
|
221
|
+
])]);
|
|
222
|
+
}
|
|
223
|
+
const ge = l({ name: "lucide-info", render: ne }), ae = {
|
|
224
|
+
viewBox: "0 0 24 24",
|
|
225
|
+
width: "1.2em",
|
|
226
|
+
height: "1.2em"
|
|
227
|
+
};
|
|
228
|
+
function re(e, t) {
|
|
229
|
+
return r(), s("svg", ae, [...t[0] || (t[0] = [
|
|
230
|
+
o("g", {
|
|
231
|
+
fill: "none",
|
|
232
|
+
stroke: "currentColor",
|
|
233
|
+
"stroke-linecap": "round",
|
|
234
|
+
"stroke-linejoin": "round",
|
|
235
|
+
"stroke-width": "2"
|
|
236
|
+
}, [
|
|
237
|
+
o("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
|
|
238
|
+
o("path", { d: "M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8" })
|
|
239
|
+
], -1)
|
|
240
|
+
])]);
|
|
241
|
+
}
|
|
242
|
+
const ke = l({ name: "lucide-file-text", render: re }), se = {
|
|
243
|
+
viewBox: "0 0 24 24",
|
|
244
|
+
width: "1.2em",
|
|
245
|
+
height: "1.2em"
|
|
246
|
+
};
|
|
247
|
+
function ie(e, t) {
|
|
248
|
+
return r(), s("svg", se, [...t[0] || (t[0] = [
|
|
249
|
+
o("g", {
|
|
250
|
+
fill: "none",
|
|
251
|
+
stroke: "currentColor",
|
|
252
|
+
"stroke-linecap": "round",
|
|
253
|
+
"stroke-linejoin": "round",
|
|
254
|
+
"stroke-width": "2"
|
|
255
|
+
}, [
|
|
256
|
+
o("circle", {
|
|
257
|
+
cx: "12",
|
|
258
|
+
cy: "12",
|
|
259
|
+
r: "10"
|
|
260
|
+
}),
|
|
261
|
+
o("path", { d: "m15 9l-6 6m0-6l6 6" })
|
|
262
|
+
], -1)
|
|
263
|
+
])]);
|
|
264
|
+
}
|
|
265
|
+
const be = l({ name: "lucide-circle-x", render: ie }), le = {
|
|
266
|
+
viewBox: "0 0 24 24",
|
|
267
|
+
width: "1.2em",
|
|
268
|
+
height: "1.2em"
|
|
269
|
+
};
|
|
270
|
+
function ce(e, t) {
|
|
271
|
+
return r(), s("svg", le, [...t[0] || (t[0] = [
|
|
272
|
+
o("path", {
|
|
273
|
+
fill: "none",
|
|
274
|
+
stroke: "currentColor",
|
|
275
|
+
"stroke-linecap": "round",
|
|
276
|
+
"stroke-linejoin": "round",
|
|
277
|
+
"stroke-width": "2",
|
|
278
|
+
d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2a2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1m8 0h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"
|
|
279
|
+
}, null, -1)
|
|
280
|
+
])]);
|
|
281
|
+
}
|
|
282
|
+
const ye = l({ name: "lucide-braces", render: ce });
|
|
283
|
+
export {
|
|
284
|
+
ge as I,
|
|
285
|
+
ve as _,
|
|
286
|
+
fe as a,
|
|
287
|
+
ke as b,
|
|
288
|
+
be as c,
|
|
289
|
+
ye as d,
|
|
290
|
+
me as e,
|
|
291
|
+
he as f,
|
|
292
|
+
pe as g
|
|
293
|
+
};
|
|
294
|
+
//# sourceMappingURL=braces-B9tH-Qp5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"braces-B9tH-Qp5.js","sources":["../src/panel/components/editable-json/JsonItem.vue","../src/panel/components/editable-json/JsonViewer.vue","../src/panel/components/UCollapse.ce.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport type { JSONValue } from '@pinia/colada-devtools/shared'\nimport { formatValue, getValueTypeClass, isPlainObject } from '@pinia/colada-devtools/shared'\n\nconst props = defineProps<{\n itemKey: string\n value: JSONValue | Map<PropertyKey, any> | Set<unknown>\n depth: number\n}>()\n\nconst isExpanded = ref(false)\n\nconst isExpandable = computed(() => {\n const { value } = props\n return (\n (Array.isArray(value) && value.length > 0) ||\n (isPlainObject(value) && Object.keys(value).length > 0) ||\n (value instanceof Map && value.size > 0) ||\n (value instanceof Set && value.size > 0)\n )\n})\n\nconst keyValuePairs = computed<Iterable<[PropertyKey, any]>>(() => {\n const { value } = props\n if (Array.isArray(value)) {\n return value.map((v, i) => [i, v] as const)\n } else if (isPlainObject(value)) {\n return Object.entries(value)\n } else if (value instanceof Map) {\n return value.entries()\n } else if (value instanceof Set) {\n return Array.from(value).map((v, i) => [i, v] as const)\n }\n return []\n})\n\nfunction toggleExpansion() {\n if (!isExpandable.value) return\n isExpanded.value = !isExpanded.value\n}\n\n// TODO: rework the indentation of nested items, it's currently bugged: it increases too much and is too small at the beginning\n</script>\n\n<template>\n <div\n :style=\"{ paddingLeft: `${depth * 0.35}em` }\"\n class=\"ring-(--ui-bg-muted)\"\n :class=\"{\n 'hover:ring': isExpandable,\n 'rounded-tl': depth > 0,\n }\"\n >\n <div\n class=\"flex items-center gap-2 py-0.5 bg-transparent hover:bg-(--ui-bg-muted) duration-200 transition-colors\"\n :class=\"depth > 0 && 'rounded-l'\"\n >\n <ILucideChevronRight\n v-if=\"isExpandable\"\n class=\"size-3 text-(--ui-text-dimmed) transition-transform duration-200 cursor-pointer\"\n :class=\"{ 'rotate-90': isExpanded }\"\n @click=\"toggleExpansion\"\n />\n\n <!-- Maintain alignment by adding left margin when chevron is absent -->\n <span class=\"text-(--devtools-syntax-gray)\" :class=\"!isExpandable && 'ml-5'\">\n {{ itemKey }}:\n </span>\n\n <!-- Value or Collection Label -->\n <span\n :class=\"[getValueTypeClass(value), isExpandable && 'cursor-pointer']\"\n :title=\"isExpandable ? 'Click to expand' : undefined\"\n @click=\"toggleExpansion\"\n >\n {{ formatValue(value) }}\n </span>\n\n <!-- Edit button -->\n <!-- <UButton v-if=\"isHovered && !isExpandable\" size=\"xs\"> -->\n <!-- Edit -->\n <!-- </UButton> -->\n </div>\n\n <!-- Expanded children -->\n <template v-if=\"isExpandable && isExpanded\">\n <JsonItem\n v-for=\"[childKey, childValue] of keyValuePairs\"\n :key=\"childKey\"\n :item-key=\"String(childKey)\"\n :value=\"childValue\"\n :depth=\"depth + 1\"\n />\n </template>\n </div>\n</template>\n","<script lang=\"ts\">\nfunction isExpandable(\n value: unknown,\n): value is unknown[] | Record<string, unknown> | Map<unknown, unknown> | Set<unknown> {\n return (\n !!value &&\n (Array.isArray(value) || isPlainObject(value) || value instanceof Map || value instanceof Set)\n )\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { formatValue, getValueTypeClass, isPlainObject } from '@pinia/colada-devtools/shared'\nimport JsonItem from './JsonItem.vue'\n\ndefineProps<{\n data: unknown\n}>()\n</script>\n\n<template>\n <!-- Handle expandable items -->\n <template v-if=\"isExpandable(data)\">\n <JsonItem\n v-for=\"[key, value] in Object.entries(data)\"\n :key=\"key\"\n :item-key=\"key\"\n :value=\"value\"\n :depth=\"0\"\n />\n </template>\n <!-- Handle primitive root values -->\n <template v-else>\n <span :class=\"getValueTypeClass(data)\">{{ formatValue(data) }}</span>\n </template>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from 'vue'\n\ndefineProps<{\n title?: string\n icon?: Component\n noPadding?: boolean\n}>()\n\nconst open = defineModel<boolean>('open', {\n default: true,\n})\n\nfunction scrollIfNeeded(event: TransitionEvent) {\n if (event.target instanceof HTMLElement) {\n const scrollOptions: ScrollIntoViewOptions = {\n block: 'nearest',\n inline: 'nearest',\n behavior: 'smooth',\n }\n event.target.scrollIntoView(scrollOptions)\n }\n}\n</script>\n\n<template>\n <div class=\"collapse collapse-arrow\">\n <input v-model=\"open\" type=\"checkbox\" />\n <div class=\"collapse-title px-2 py-0.5 bg-neutral-200 dark:bg-neutral-800 theme-neutral\">\n <slot name=\"title\" :open :title>\n <h3 class=\"font-semibold text-sm flex gap-x-1 items-center\">\n <slot name=\"icon\">\n <component :is=\"icon\" v-if=\"icon\" class=\"size-4\" />\n </slot>\n {{ title ?? 'Group' }}\n </h3>\n </slot>\n </div>\n <div\n :class=\"!noPadding && 'px-2'\"\n class=\"collapse-content text-sm overflow-hidden\"\n @transitionend=\"scrollIfNeeded\"\n >\n <slot :open />\n </div>\n </div>\n</template>\n\n<style scoped>\n.collapse:not(td, tr, colgroup) {\n visibility: visible;\n}\n\n.collapse {\n position: relative;\n display: grid;\n overflow: hidden;\n width: 100%;\n grid-template-rows: max-content 0fr;\n transition: grid-template-rows 0.2s;\n isolation: isolate;\n\n > input:is([type='checkbox'], [type='radio']) {\n grid-column-start: 1;\n grid-row-start: 1;\n appearance: none;\n opacity: 0;\n }\n\n &:is([open], :focus),\n &:has(> input:is([type='checkbox'], [type='radio']):checked) {\n grid-template-rows: max-content 1fr;\n }\n\n &:is([open], :focus) > .collapse-content,\n &:not(.collapse-close)\n > :where(input:is([type='checkbox'], [type='radio']):checked ~ .collapse-content) {\n visibility: visible;\n min-height: fit-content;\n }\n &:focus-visible,\n &:has(> input:is([type='checkbox'], [type='radio']):focus-visible) {\n outline-color: var(--ui-text);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n\n &:not(.collapse-close) {\n > input[type='checkbox'],\n > input[type='radio']:not(:checked),\n > .collapse-title {\n cursor: pointer;\n }\n }\n\n &:focus:not(.collapse-close, .collapse[open]) > .collapse-title {\n cursor: unset;\n }\n\n &:is([open]) {\n &.collapse-arrow {\n > .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n }\n\n &.collapse-arrow:focus {\n > .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n\n &.collapse-arrow {\n > input:is([type='checkbox'], [type='radio']):checked ~ .collapse-title:after {\n transform: translateY(-50%) rotate(225deg);\n }\n }\n\n > input:is([type='checkbox'], [type='radio']) {\n z-index: 1;\n width: 100%;\n }\n}\n\n.collapse-title,\n.collapse-content {\n grid-column-start: 1;\n grid-row-start: 1;\n}\n\n.collapse-content {\n visibility: hidden;\n grid-column-start: 1;\n grid-row-start: 2;\n min-height: 0;\n cursor: unset;\n transition: visibility 0.2s;\n}\n\n.collapse-arrow {\n > .collapse-title:after {\n position: absolute;\n display: block;\n height: 0.5rem;\n width: 0.5rem;\n transform: translateY(-100%) rotate(45deg);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 0.2s;\n top: 50%;\n right: 0.8em;\n inset-inline-end: 0.75rem;\n content: '';\n transform-origin: 75% 75%;\n box-shadow: 2px 2px;\n pointer-events: none;\n }\n}\n\n.collapse-title {\n position: relative;\n width: 100%;\n transition: background-color 0.2s ease-out;\n}\n</style>\n"],"names":["props","__props","isExpanded","ref","isExpandable","computed","value","isPlainObject","keyValuePairs","v","i","toggleExpansion","_createElementBlock","_createElementVNode","_normalizeClass","_createBlock","_component_ILucideChevronRight","_toDisplayString","_unref","getValueTypeClass","formatValue","_hoisted_1","_openBlock","_Fragment","_renderList","childKey","childValue","_component_JsonItem","key","JsonItem","open","_useModel","scrollIfNeeded","event","scrollOptions","$event","_hoisted_2","_renderSlot","_ctx","_hoisted_3","_resolveDynamicComponent","_createTextVNode"],"mappings":"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"}
|