@tanstack/devtools-ui 0.3.5 → 0.4.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/esm/components/tree.d.ts +4 -2
- package/dist/esm/components/tree.js +29 -9
- package/dist/esm/components/tree.js.map +1 -1
- package/dist/esm/styles/use-styles.js +4 -2
- package/dist/esm/styles/use-styles.js.map +1 -1
- package/dist/esm/utils/deep-keys.d.ts +5 -0
- package/package.json +3 -3
- package/src/components/tree.tsx +49 -4
- package/src/styles/use-styles.ts +5 -2
- package/src/utils/deep-keys.ts +18 -0
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { CollapsiblePaths } from '../utils/deep-keys.js';
|
|
2
|
+
export declare function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {
|
|
3
|
+
value: TData;
|
|
3
4
|
copyable?: boolean;
|
|
4
5
|
defaultExpansionDepth?: number;
|
|
6
|
+
collapsePaths?: Array<TName>;
|
|
5
7
|
}): import("solid-js").JSX.Element;
|
|
@@ -16,6 +16,10 @@ function JsonTree(props) {
|
|
|
16
16
|
depth: 0,
|
|
17
17
|
get defaultExpansionDepth() {
|
|
18
18
|
return props.defaultExpansionDepth ?? 1;
|
|
19
|
+
},
|
|
20
|
+
path: "",
|
|
21
|
+
get collapsePaths() {
|
|
22
|
+
return props.collapsePaths;
|
|
19
23
|
}
|
|
20
24
|
});
|
|
21
25
|
}
|
|
@@ -27,7 +31,9 @@ function JsonValue(props) {
|
|
|
27
31
|
isLastKey,
|
|
28
32
|
copyable,
|
|
29
33
|
defaultExpansionDepth,
|
|
30
|
-
depth
|
|
34
|
+
depth,
|
|
35
|
+
collapsePaths,
|
|
36
|
+
path
|
|
31
37
|
} = props;
|
|
32
38
|
const styles = useStyles();
|
|
33
39
|
return (() => {
|
|
@@ -96,7 +102,9 @@ function JsonValue(props) {
|
|
|
96
102
|
depth,
|
|
97
103
|
copyable,
|
|
98
104
|
keyName,
|
|
99
|
-
value
|
|
105
|
+
value,
|
|
106
|
+
collapsePaths,
|
|
107
|
+
path
|
|
100
108
|
});
|
|
101
109
|
}
|
|
102
110
|
if (typeof value === "object") {
|
|
@@ -105,7 +113,9 @@ function JsonValue(props) {
|
|
|
105
113
|
depth,
|
|
106
114
|
copyable,
|
|
107
115
|
keyName,
|
|
108
|
-
value
|
|
116
|
+
value,
|
|
117
|
+
collapsePaths,
|
|
118
|
+
path
|
|
109
119
|
});
|
|
110
120
|
}
|
|
111
121
|
return _tmpl$();
|
|
@@ -128,10 +138,12 @@ const ArrayValue = ({
|
|
|
128
138
|
keyName,
|
|
129
139
|
copyable,
|
|
130
140
|
defaultExpansionDepth,
|
|
131
|
-
depth
|
|
141
|
+
depth,
|
|
142
|
+
collapsePaths,
|
|
143
|
+
path
|
|
132
144
|
}) => {
|
|
133
145
|
const styles = useStyles();
|
|
134
|
-
const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth);
|
|
146
|
+
const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth && !collapsePaths?.includes(path));
|
|
135
147
|
if (value.length === 0) {
|
|
136
148
|
return (() => {
|
|
137
149
|
var _el$16 = _tmpl$8(), _el$17 = _el$16.firstChild;
|
|
@@ -197,7 +209,11 @@ const ArrayValue = ({
|
|
|
197
209
|
value: item,
|
|
198
210
|
isLastKey,
|
|
199
211
|
defaultExpansionDepth,
|
|
200
|
-
depth: depth + 1
|
|
212
|
+
depth: depth + 1,
|
|
213
|
+
collapsePaths,
|
|
214
|
+
get path() {
|
|
215
|
+
return path ? `${path}[${i()}]` : `[${i()}]`;
|
|
216
|
+
}
|
|
201
217
|
});
|
|
202
218
|
}
|
|
203
219
|
}));
|
|
@@ -239,10 +255,12 @@ const ObjectValue = ({
|
|
|
239
255
|
keyName,
|
|
240
256
|
copyable,
|
|
241
257
|
defaultExpansionDepth,
|
|
242
|
-
depth
|
|
258
|
+
depth,
|
|
259
|
+
collapsePaths,
|
|
260
|
+
path
|
|
243
261
|
}) => {
|
|
244
262
|
const styles = useStyles();
|
|
245
|
-
const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth);
|
|
263
|
+
const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth && !collapsePaths?.includes(path));
|
|
246
264
|
const keys = Object.keys(value);
|
|
247
265
|
const lastKeyName = keys[keys.length - 1];
|
|
248
266
|
if (keys.length === 0) {
|
|
@@ -311,7 +329,9 @@ const ObjectValue = ({
|
|
|
311
329
|
isLastKey: lastKeyName === k,
|
|
312
330
|
copyable,
|
|
313
331
|
defaultExpansionDepth,
|
|
314
|
-
depth: depth + 1
|
|
332
|
+
depth: depth + 1,
|
|
333
|
+
collapsePaths,
|
|
334
|
+
path: `${path}${path ? "." : ""}${k}`
|
|
315
335
|
})
|
|
316
336
|
}));
|
|
317
337
|
effect(() => className(_el$42, styles().tree.expandedLine(Boolean(keyName))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { css, useStyles } from '../styles/use-styles'\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\n\nexport function JsonTree(props: {\n value: any\n copyable?: boolean\n defaultExpansionDepth?: number\n}) {\n return (\n <JsonValue\n isRoot\n value={props.value}\n copyable={props.copyable}\n depth={0}\n defaultExpansionDepth={props.defaultExpansionDepth ?? 1}\n />\n )\n}\n\nfunction JsonValue(props: {\n value: any\n keyName?: string\n isRoot?: boolean\n isLastKey?: boolean\n copyable?: boolean\n defaultExpansionDepth: number\n depth: number\n}) {\n const {\n value,\n keyName,\n isRoot = false,\n isLastKey,\n copyable,\n defaultExpansionDepth,\n depth,\n } = props\n const styles = useStyles()\n\n return (\n <span class={styles().tree.valueContainer(isRoot)}>\n {keyName && typeof value !== 'object' && !Array.isArray(value) && (\n <span class={styles().tree.valueKey}>"{keyName}": </span>\n )}\n {(() => {\n if (typeof value === 'string') {\n return (\n <span class={styles().tree.valueString}>"{value}"</span>\n )\n }\n if (typeof value === 'number') {\n return <span class={styles().tree.valueNumber}>{value}</span>\n }\n if (typeof value === 'boolean') {\n return <span class={styles().tree.valueBoolean}>{String(value)}</span>\n }\n if (value === null) {\n return <span class={styles().tree.valueNull}>null</span>\n }\n if (value === undefined) {\n return <span class={styles().tree.valueNull}>undefined</span>\n }\n if (typeof value === 'function') {\n return (\n <span class={styles().tree.valueFunction}>{String(value)}</span>\n )\n }\n if (Array.isArray(value)) {\n return (\n <ArrayValue\n defaultExpansionDepth={defaultExpansionDepth}\n depth={depth}\n copyable={copyable}\n keyName={keyName}\n value={value}\n />\n )\n }\n if (typeof value === 'object') {\n return (\n <ObjectValue\n defaultExpansionDepth={defaultExpansionDepth}\n depth={depth}\n copyable={copyable}\n keyName={keyName}\n value={value}\n />\n )\n }\n return <span />\n })()}\n {copyable && (\n <div class={clsx(styles().tree.actions, 'actions')}>\n <CopyButton value={value} />\n </div>\n )}\n {isLastKey || isRoot ? '' : <span>,</span>}\n </span>\n )\n}\n\nconst ArrayValue = ({\n value,\n keyName,\n copyable,\n defaultExpansionDepth,\n depth,\n}: {\n value: Array<any>\n copyable?: boolean\n keyName?: string\n defaultExpansionDepth: number\n depth: number\n}) => {\n const styles = useStyles()\n const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)\n\n if (value.length === 0) {\n return (\n <span class={styles().tree.expanderContainer}>\n {keyName && (\n <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n "{keyName}":{' '}\n </span>\n )}\n <span class={styles().tree.valueBraces}>[]</span>\n </span>\n )\n }\n return (\n <span class={styles().tree.expanderContainer}>\n <Expander\n onClick={() => setExpanded(!expanded())}\n expanded={expanded()}\n />\n {keyName && (\n <span\n onclick={(e) => {\n e.stopPropagation()\n e.stopImmediatePropagation()\n setExpanded(!expanded())\n }}\n class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n >\n "{keyName}":{' '}\n <span class={styles().tree.info}>{value.length} items</span>\n </span>\n )}\n <span class={styles().tree.valueBraces}>[</span>\n <Show when={expanded()}>\n <span class={styles().tree.expandedLine(Boolean(keyName))}>\n <For each={value}>\n {(item, i) => {\n const isLastKey = i() === value.length - 1\n return (\n <JsonValue\n copyable={copyable}\n value={item}\n isLastKey={isLastKey}\n defaultExpansionDepth={defaultExpansionDepth}\n depth={depth + 1}\n />\n )\n }}\n </For>\n </span>\n </Show>\n <Show when={!expanded()}>\n <span\n onClick={(e) => {\n e.stopPropagation()\n e.stopImmediatePropagation()\n setExpanded(!expanded())\n }}\n class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n >\n {`...`}\n </span>\n </Show>\n <span class={styles().tree.valueBraces}>]</span>\n </span>\n )\n}\n\nconst ObjectValue = ({\n value,\n keyName,\n copyable,\n defaultExpansionDepth,\n depth,\n}: {\n value: Record<string, any>\n keyName?: string\n copyable?: boolean\n defaultExpansionDepth: number\n depth: number\n}) => {\n const styles = useStyles()\n const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)\n const keys = Object.keys(value)\n const lastKeyName = keys[keys.length - 1]\n\n if (keys.length === 0) {\n return (\n <span class={styles().tree.expanderContainer}>\n {keyName && (\n <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n "{keyName}":{' '}\n </span>\n )}\n <span class={styles().tree.valueBraces}>{'{}'}</span>\n </span>\n )\n }\n return (\n <span class={styles().tree.expanderContainer}>\n {keyName && (\n <Expander\n onClick={() => setExpanded(!expanded())}\n expanded={expanded()}\n />\n )}\n {keyName && (\n <span\n onClick={(e) => {\n e.stopPropagation()\n e.stopImmediatePropagation()\n setExpanded(!expanded())\n }}\n class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n >\n "{keyName}":{' '}\n <span class={styles().tree.info}>{keys.length} items</span>\n </span>\n )}\n <span class={styles().tree.valueBraces}>{'{'}</span>\n <Show when={expanded()}>\n <span class={styles().tree.expandedLine(Boolean(keyName))}>\n <For each={keys}>\n {(k) => (\n <>\n <JsonValue\n value={value[k]}\n keyName={k}\n isLastKey={lastKeyName === k}\n copyable={copyable}\n defaultExpansionDepth={defaultExpansionDepth}\n depth={depth + 1}\n />\n </>\n )}\n </For>\n </span>\n </Show>\n <Show when={!expanded()}>\n <span\n onClick={(e) => {\n e.stopPropagation()\n e.stopImmediatePropagation()\n setExpanded(!expanded())\n }}\n class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n >\n {`...`}\n </span>\n </Show>\n <span class={styles().tree.valueBraces}>{'}'}</span>\n </span>\n )\n}\n\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nconst CopyButton = (props: { value: unknown }) => {\n const styles = useStyles()\n const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')\n\n return (\n <button\n class={styles().tree.actionButton}\n title=\"Copy object to clipboard\"\n aria-label={`${\n copyState() === 'NoCopy'\n ? 'Copy object to clipboard'\n : copyState() === 'SuccessCopy'\n ? 'Object copied to clipboard'\n : 'Error copying object to clipboard'\n }`}\n onClick={\n copyState() === 'NoCopy'\n ? () => {\n navigator.clipboard\n .writeText(JSON.stringify(props.value, null, 2))\n .then(\n () => {\n setCopyState('SuccessCopy')\n setTimeout(() => {\n setCopyState('NoCopy')\n }, 1500)\n },\n (err) => {\n console.error('Failed to copy: ', err)\n setCopyState('ErrorCopy')\n setTimeout(() => {\n setCopyState('NoCopy')\n }, 1500)\n },\n )\n }\n : undefined\n }\n >\n <Switch>\n <Match when={copyState() === 'NoCopy'}>\n <Copier />\n </Match>\n <Match when={copyState() === 'SuccessCopy'}>\n <CopiedCopier theme={'dark'} />\n </Match>\n <Match when={copyState() === 'ErrorCopy'}>\n <ErrorCopier />\n </Match>\n </Switch>\n </button>\n )\n}\n\nconst Expander = (props: { expanded: boolean; onClick: () => void }) => {\n const styles = useStyles()\n return (\n <span\n onClick={props.onClick}\n class={clsx(\n styles().tree.expander,\n css`\n transform: rotate(${props.expanded ? 90 : 0}deg);\n `,\n props.expanded &&\n css`\n & svg {\n top: -1px;\n }\n `,\n )}\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 12L10 8L6 4\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","depth","defaultExpansionDepth","keyName","isLastKey","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","Array","isArray","_el$2","_tmpl$2","_el$3","firstChild","_el$5","nextSibling","_$effect","_$className","tree","valueKey","_el$6","_tmpl$3","_el$7","_el$9","valueString","_el$0","valueNumber","_el$1","String","valueBoolean","_el$10","_tmpl$4","valueNull","undefined","_el$11","_tmpl$5","_el$12","valueFunction","ArrayValue","ObjectValue","_el$14","_tmpl$6","CopyButton","clsx","actions","_tmpl$7","valueContainer","expanded","setExpanded","createSignal","length","_el$16","_tmpl$8","_el$17","_el$18","_el$19","_el$21","collapsible","_p$","_v$","expanderContainer","_v$2","valueBraces","e","t","_el$22","_tmpl$0","_el$23","_el$26","Expander","onClick","_el$27","_tmpl$1","_el$28","_el$33","_el$29","_el$31","_el$32","$$click","stopPropagation","stopImmediatePropagation","_v$6","_v$7","info","Show","when","children","_el$24","For","each","item","i","expandedLine","Boolean","_el$25","_tmpl$9","_v$3","_v$4","_v$5","a","keys","Object","lastKeyName","_el$34","_tmpl$10","_el$35","_el$36","_el$37","_el$39","_v$8","_v$9","_el$40","_tmpl$11","_el$41","_el$44","_el$45","_el$46","_el$51","_el$47","_el$49","_el$50","_v$11","_v$12","_el$42","k","_el$43","_v$0","_v$1","_v$10","copyState","setCopyState","_el$52","_tmpl$12","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","Switch","Match","Copier","CopiedCopier","theme","ErrorCopier","_v$13","actionButton","_v$14","_$setAttribute","_el$53","_tmpl$13","expander","css","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { css, useStyles } from '../styles/use-styles'\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\nimport type { CollapsiblePaths } from '../utils/deep-keys'\n\nexport function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {\n value: TData\n copyable?: boolean\n defaultExpansionDepth?: number\n collapsePaths?: Array<TName>\n}) {\n return (\n <JsonValue\n isRoot\n value={props.value}\n copyable={props.copyable}\n depth={0}\n defaultExpansionDepth={props.defaultExpansionDepth ?? 1}\n path=\"\"\n collapsePaths={props.collapsePaths}\n />\n )\n}\n\nfunction JsonValue(props: {\n value: any\n keyName?: string\n isRoot?: boolean\n isLastKey?: boolean\n copyable?: boolean\n\n defaultExpansionDepth: number\n depth: number\n\n collapsePaths?: Array<string>\n path: string\n}) {\n const {\n value,\n keyName,\n isRoot = false,\n isLastKey,\n copyable,\n defaultExpansionDepth,\n depth,\n collapsePaths,\n path,\n } = props\n const styles = useStyles()\n\n return (\n <span class={styles().tree.valueContainer(isRoot)}>\n {keyName && typeof value !== 'object' && !Array.isArray(value) && (\n <span class={styles().tree.valueKey}>"{keyName}": </span>\n )}\n {(() => {\n if (typeof value === 'string') {\n return (\n <span class={styles().tree.valueString}>"{value}"</span>\n )\n }\n if (typeof value === 'number') {\n return <span class={styles().tree.valueNumber}>{value}</span>\n }\n if (typeof value === 'boolean') {\n return <span class={styles().tree.valueBoolean}>{String(value)}</span>\n }\n if (value === null) {\n return <span class={styles().tree.valueNull}>null</span>\n }\n if (value === undefined) {\n return <span class={styles().tree.valueNull}>undefined</span>\n }\n if (typeof value === 'function') {\n return (\n <span class={styles().tree.valueFunction}>{String(value)}</span>\n )\n }\n if (Array.isArray(value)) {\n return (\n <ArrayValue\n defaultExpansionDepth={defaultExpansionDepth}\n depth={depth}\n copyable={copyable}\n keyName={keyName}\n value={value}\n collapsePaths={collapsePaths}\n path={path}\n />\n )\n }\n if (typeof value === 'object') {\n return (\n <ObjectValue\n defaultExpansionDepth={defaultExpansionDepth}\n depth={depth}\n copyable={copyable}\n keyName={keyName}\n value={value}\n collapsePaths={collapsePaths}\n path={path}\n />\n )\n }\n return <span />\n })()}\n {copyable && (\n <div class={clsx(styles().tree.actions, 'actions')}>\n <CopyButton value={value} />\n </div>\n )}\n {isLastKey || isRoot ? '' : <span>,</span>}\n </span>\n )\n}\n\nconst ArrayValue = ({\n value,\n keyName,\n copyable,\n defaultExpansionDepth,\n depth,\n collapsePaths,\n path,\n}: {\n value: Array<any>\n copyable?: boolean\n keyName?: string\n defaultExpansionDepth: number\n depth: number\n collapsePaths?: Array<string>\n path: string\n}) => {\n const styles = useStyles()\n\n const [expanded, setExpanded] = createSignal(\n depth <= defaultExpansionDepth && !collapsePaths?.includes(path),\n )\n\n if (value.length === 0) {\n return (\n <span class={styles().tree.expanderContainer}>\n {keyName && (\n <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n "{keyName}":{' '}\n </span>\n )}\n\n <span class={styles().tree.valueBraces}>[]</span>\n </span>\n )\n }\n return (\n <span class={styles().tree.expanderContainer}>\n <Expander\n onClick={() => setExpanded(!expanded())}\n expanded={expanded()}\n />\n\n {keyName && (\n <span\n onclick={(e) => {\n e.stopPropagation()\n e.stopImmediatePropagation()\n setExpanded(!expanded())\n }}\n class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n >\n "{keyName}":{' '}\n <span class={styles().tree.info}>{value.length} items</span>\n </span>\n )}\n\n <span class={styles().tree.valueBraces}>[</span>\n\n <Show when={expanded()}>\n <span class={styles().tree.expandedLine(Boolean(keyName))}>\n <For each={value}>\n {(item, i) => {\n const isLastKey = i() === value.length - 1\n return (\n <JsonValue\n copyable={copyable}\n value={item}\n isLastKey={isLastKey}\n defaultExpansionDepth={defaultExpansionDepth}\n depth={depth + 1}\n collapsePaths={collapsePaths}\n path={path ? `${path}[${i()}]` : `[${i()}]`}\n />\n )\n }}\n </For>\n </span>\n </Show>\n\n <Show when={!expanded()}>\n <span\n onClick={(e) => {\n e.stopPropagation()\n e.stopImmediatePropagation()\n setExpanded(!expanded())\n }}\n class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n >\n {`...`}\n </span>\n </Show>\n <span class={styles().tree.valueBraces}>]</span>\n </span>\n )\n}\n\nconst ObjectValue = ({\n value,\n keyName,\n copyable,\n defaultExpansionDepth,\n depth,\n collapsePaths,\n path,\n}: {\n value: Record<string, any>\n keyName?: string\n copyable?: boolean\n defaultExpansionDepth: number\n depth: number\n collapsePaths?: Array<string>\n path: string\n}) => {\n const styles = useStyles()\n\n const [expanded, setExpanded] = createSignal(\n depth <= defaultExpansionDepth && !collapsePaths?.includes(path),\n )\n\n const keys = Object.keys(value)\n const lastKeyName = keys[keys.length - 1]\n\n if (keys.length === 0) {\n return (\n <span class={styles().tree.expanderContainer}>\n {keyName && (\n <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n "{keyName}":{' '}\n </span>\n )}\n\n <span class={styles().tree.valueBraces}>{'{}'}</span>\n </span>\n )\n }\n\n return (\n <span class={styles().tree.expanderContainer}>\n {keyName && (\n <Expander\n onClick={() => setExpanded(!expanded())}\n expanded={expanded()}\n />\n )}\n\n {keyName && (\n <span\n onClick={(e) => {\n e.stopPropagation()\n e.stopImmediatePropagation()\n setExpanded(!expanded())\n }}\n class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n >\n "{keyName}":{' '}\n <span class={styles().tree.info}>{keys.length} items</span>\n </span>\n )}\n\n <span class={styles().tree.valueBraces}>{'{'}</span>\n\n <Show when={expanded()}>\n <span class={styles().tree.expandedLine(Boolean(keyName))}>\n <For each={keys}>\n {(k) => (\n <>\n <JsonValue\n value={value[k]}\n keyName={k}\n isLastKey={lastKeyName === k}\n copyable={copyable}\n defaultExpansionDepth={defaultExpansionDepth}\n depth={depth + 1}\n collapsePaths={collapsePaths}\n path={`${path}${path ? '.' : ''}${k}`}\n />\n </>\n )}\n </For>\n </span>\n </Show>\n\n <Show when={!expanded()}>\n <span\n onClick={(e) => {\n e.stopPropagation()\n e.stopImmediatePropagation()\n setExpanded(!expanded())\n }}\n class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n >\n {`...`}\n </span>\n </Show>\n\n <span class={styles().tree.valueBraces}>{'}'}</span>\n </span>\n )\n}\n\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nconst CopyButton = (props: { value: unknown }) => {\n const styles = useStyles()\n const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')\n\n return (\n <button\n class={styles().tree.actionButton}\n title=\"Copy object to clipboard\"\n aria-label={`${\n copyState() === 'NoCopy'\n ? 'Copy object to clipboard'\n : copyState() === 'SuccessCopy'\n ? 'Object copied to clipboard'\n : 'Error copying object to clipboard'\n }`}\n onClick={\n copyState() === 'NoCopy'\n ? () => {\n navigator.clipboard\n .writeText(JSON.stringify(props.value, null, 2))\n .then(\n () => {\n setCopyState('SuccessCopy')\n setTimeout(() => {\n setCopyState('NoCopy')\n }, 1500)\n },\n (err) => {\n console.error('Failed to copy: ', err)\n setCopyState('ErrorCopy')\n setTimeout(() => {\n setCopyState('NoCopy')\n }, 1500)\n },\n )\n }\n : undefined\n }\n >\n <Switch>\n <Match when={copyState() === 'NoCopy'}>\n <Copier />\n </Match>\n <Match when={copyState() === 'SuccessCopy'}>\n <CopiedCopier theme={'dark'} />\n </Match>\n <Match when={copyState() === 'ErrorCopy'}>\n <ErrorCopier />\n </Match>\n </Switch>\n </button>\n )\n}\n\nconst Expander = (props: { expanded: boolean; onClick: () => void }) => {\n const styles = useStyles()\n return (\n <span\n onClick={props.onClick}\n class={clsx(\n styles().tree.expander,\n css`\n transform: rotate(${props.expanded ? 90 : 0}deg);\n `,\n props.expanded &&\n css`\n & svg {\n top: -1px;\n }\n `,\n )}\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 12L10 8L6 4\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","depth","defaultExpansionDepth","path","collapsePaths","keyName","isLastKey","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","Array","isArray","_el$2","_tmpl$2","_el$3","firstChild","_el$5","nextSibling","_$effect","_$className","tree","valueKey","_el$6","_tmpl$3","_el$7","_el$9","valueString","_el$0","valueNumber","_el$1","String","valueBoolean","_el$10","_tmpl$4","valueNull","undefined","_el$11","_tmpl$5","_el$12","valueFunction","ArrayValue","ObjectValue","_el$14","_tmpl$6","CopyButton","clsx","actions","_tmpl$7","valueContainer","expanded","setExpanded","createSignal","includes","length","_el$16","_tmpl$8","_el$17","_el$18","_el$19","_el$21","collapsible","_p$","_v$","expanderContainer","_v$2","valueBraces","e","t","_el$22","_tmpl$0","_el$23","_el$26","Expander","onClick","_el$27","_tmpl$1","_el$28","_el$33","_el$29","_el$31","_el$32","$$click","stopPropagation","stopImmediatePropagation","_v$6","_v$7","info","Show","when","children","_el$24","For","each","item","i","expandedLine","Boolean","_el$25","_tmpl$9","_v$3","_v$4","_v$5","a","keys","Object","lastKeyName","_el$34","_tmpl$10","_el$35","_el$36","_el$37","_el$39","_v$8","_v$9","_el$40","_tmpl$11","_el$41","_el$44","_el$45","_el$46","_el$51","_el$47","_el$49","_el$50","_v$11","_v$12","_el$42","k","_el$43","_v$0","_v$1","_v$10","copyState","setCopyState","_el$52","_tmpl$12","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","Switch","Match","Copier","CopiedCopier","theme","ErrorCopier","_v$13","actionButton","_v$14","_$setAttribute","_el$53","_tmpl$13","expander","css","_$delegateEvents"],"mappings":"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"}
|
|
@@ -51,6 +51,7 @@ const stylesFactory = (theme = "dark") => {
|
|
|
51
51
|
const { colors, font, size, alpha, border } = tokens;
|
|
52
52
|
const { fontFamily } = font;
|
|
53
53
|
const t = (light, dark) => theme === "light" ? light : dark;
|
|
54
|
+
const wrapperSize = 320;
|
|
54
55
|
return {
|
|
55
56
|
logo: css`
|
|
56
57
|
cursor: pointer;
|
|
@@ -69,7 +70,7 @@ const stylesFactory = (theme = "dark") => {
|
|
|
69
70
|
`,
|
|
70
71
|
selectWrapper: css`
|
|
71
72
|
width: 100%;
|
|
72
|
-
max-width:
|
|
73
|
+
max-width: ${wrapperSize}px;
|
|
73
74
|
display: flex;
|
|
74
75
|
flex-direction: column;
|
|
75
76
|
gap: 0.375rem;
|
|
@@ -120,7 +121,7 @@ const stylesFactory = (theme = "dark") => {
|
|
|
120
121
|
`,
|
|
121
122
|
inputWrapper: css`
|
|
122
123
|
width: 100%;
|
|
123
|
-
max-width:
|
|
124
|
+
max-width: ${wrapperSize}px;
|
|
124
125
|
display: flex;
|
|
125
126
|
flex-direction: column;
|
|
126
127
|
gap: 0.375rem;
|
|
@@ -143,6 +144,7 @@ const stylesFactory = (theme = "dark") => {
|
|
|
143
144
|
`,
|
|
144
145
|
input: css`
|
|
145
146
|
appearance: none;
|
|
147
|
+
box-sizing: border-box;
|
|
146
148
|
width: 100%;
|
|
147
149
|
padding: 0.75rem;
|
|
148
150
|
border-radius: 0.5rem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '../components/theme'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\nimport type { Theme } from '../components/theme'\n\nconst buttonVariantColors: Record<\n ButtonVariant,\n { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n primary: {\n bg: tokens.colors.purple[500],\n hover: tokens.colors.purple[600],\n active: tokens.colors.purple[700],\n text: '#fff',\n border: tokens.colors.purple[500],\n },\n secondary: {\n bg: tokens.colors.gray[800],\n hover: tokens.colors.gray[700],\n active: tokens.colors.gray[600],\n text: tokens.colors.gray[100],\n border: tokens.colors.gray[700],\n },\n info: {\n bg: tokens.colors.blue[500],\n hover: tokens.colors.blue[600],\n active: tokens.colors.blue[700],\n text: '#fff',\n border: tokens.colors.blue[500],\n },\n warning: {\n bg: tokens.colors.yellow[500],\n hover: tokens.colors.yellow[600],\n active: tokens.colors.yellow[700],\n text: '#fff',\n border: tokens.colors.yellow[500],\n },\n danger: {\n bg: tokens.colors.red[500],\n hover: tokens.colors.red[600],\n active: tokens.colors.red[700],\n text: '#fff',\n border: tokens.colors.red[500],\n },\n success: {\n bg: tokens.colors.green[500],\n hover: tokens.colors.green[600],\n active: tokens.colors.green[700],\n text: '#fff',\n border: tokens.colors.green[500],\n },\n}\nexport const css = goober.css\nconst stylesFactory = (theme: Theme = 'dark') => {\n const { colors, font, size, alpha, border } = tokens\n const { fontFamily } = font\n\n const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n return {\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n width: ${size[12]};\n height: ${size[12]};\n font-family: ${fontFamily.sans};\n gap: ${tokens.size[0.5]};\n padding: 0px;\n &:hover {\n opacity: 0.7;\n }\n `,\n\n selectWrapper: css`\n width: 100%;\n max-width: 300px;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n `,\n selectContainer: css`\n width: 100%;\n `,\n selectLabel: css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${t(colors.gray[900], colors.gray[100])};\n text-align: left;\n `,\n selectDescription: css`\n font-size: 0.8rem;\n color: ${t(colors.gray[500], colors.gray[400])};\n margin: 0;\n line-height: 1.3;\n text-align: left;\n `,\n select: css`\n appearance: none;\n width: 100%;\n padding: 0.75rem 3rem 0.75rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n color: ${t(colors.gray[900], colors.gray[100])};\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n font-size: 0.875rem;\n transition: all 0.2s ease;\n cursor: pointer;\n\n /* Custom arrow */\n background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n background-repeat: no-repeat;\n background-position: right 0.75rem center;\n background-size: 1.25rem;\n\n &:hover {\n border-color: ${t(colors.gray[400], colors.gray[600])};\n }\n\n &:focus {\n outline: none;\n border-color: ${colors.purple[400]};\n box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n }\n `,\n inputWrapper: css`\n width: 100%;\n max-width: 300px;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n `,\n inputContainer: css`\n width: 100%;\n `,\n inputLabel: css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${t(colors.gray[900], colors.gray[100])};\n text-align: left;\n `,\n inputDescription: css`\n font-size: 0.8rem;\n color: ${t(colors.gray[500], colors.gray[400])};\n margin: 0;\n line-height: 1.3;\n text-align: left;\n `,\n input: css`\n appearance: none;\n width: 100%;\n padding: 0.75rem;\n border-radius: 0.5rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n color: ${t(colors.gray[900], colors.gray[100])};\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n font-size: 0.875rem;\n font-family: ${fontFamily.mono};\n transition: all 0.2s ease;\n\n &::placeholder {\n color: ${t(colors.gray[400], colors.gray[500])};\n }\n\n &:hover {\n border-color: ${t(colors.gray[400], colors.gray[600])};\n }\n\n &:focus {\n outline: none;\n border-color: ${t(colors.purple[500], colors.purple[400])};\n box-shadow: 0 0 0 3px\n ${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};\n }\n `,\n checkboxWrapper: css`\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n cursor: pointer;\n user-select: none;\n padding: 0.5rem;\n border-radius: 0.5rem;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ${t(colors.gray[100], colors.darkGray[800])};\n }\n `,\n checkboxContainer: css`\n width: 100%;\n `,\n checkboxLabelContainer: css`\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n flex: 1;\n `,\n checkbox: css`\n appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid ${t(colors.gray[300], colors.gray[700])};\n border-radius: 0.375rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n display: grid;\n place-items: center;\n transition: all 0.2s ease;\n flex-shrink: 0;\n margin-top: 0.125rem;\n\n &:hover {\n border-color: ${t(colors.purple[500], colors.purple[400])};\n }\n\n &:checked {\n background-color: ${t(colors.purple[500], colors.purple[700])};\n border-color: ${t(colors.purple[500], colors.purple[700])};\n }\n\n &:checked::after {\n content: '';\n width: 0.4rem;\n height: 0.6rem;\n border: solid ${t('#fff', colors.gray[100])};\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n margin-top: -3px;\n }\n `,\n checkboxLabel: css`\n color: ${t(colors.gray[900], colors.gray[100])};\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.4;\n text-align: left;\n `,\n checkboxDescription: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n font-size: 0.8rem;\n line-height: 1.3;\n text-align: left;\n `,\n button: {\n base: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: ${tokens.font.fontFamily.sans};\n font-size: 0.8rem;\n font-weight: 500;\n border-radius: 0.2rem;\n padding: 0.2rem 0.6rem;\n cursor: pointer;\n transition:\n background 0.2s,\n color 0.2s,\n border 0.2s,\n box-shadow 0.2s;\n outline: none;\n border-width: 1px;\n border-style: solid;\n `,\n variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n const v = buttonVariantColors[variant]\n if (ghost) {\n return css`\n background: transparent;\n color: ${t(v.bg, v.bg)};\n border-color: transparent;\n &:hover {\n background: ${t(colors.purple[100], colors.darkGray[700])};\n }\n &:active {\n background: ${t(colors.purple[200], colors.darkGray[800])};\n }\n `\n }\n if (outline) {\n return css`\n background: transparent;\n color: ${t(v.bg, v.bg)};\n border-color: ${t(v.bg, v.bg)};\n &:hover {\n background: ${t(colors.purple[100], colors.darkGray[700])};\n border-color: ${t(v.hover, v.hover)};\n }\n &:active {\n background: ${t(colors.purple[200], colors.darkGray[800])};\n border-color: ${t(v.active, v.active)};\n }\n `\n }\n // Default solid button\n return css`\n background: ${t(v.bg, v.bg)};\n color: ${t(v.text, v.text)};\n border-color: ${t(v.border, v.border)};\n &:hover {\n background: ${t(v.hover, v.hover)};\n border-color: ${t(v.hover, v.hover)};\n }\n &:active {\n background: ${t(v.active, v.active)};\n border-color: ${t(v.active, v.active)};\n }\n `\n },\n },\n tag: {\n dot: (color: keyof typeof tokens.colors) => css`\n width: ${tokens.size[1.5]};\n height: ${tokens.size[1.5]};\n border-radius: ${tokens.border.radius.full};\n background-color: ${t(\n tokens.colors[color][500],\n tokens.colors[color][500],\n )};\n `,\n base: css`\n display: flex;\n gap: ${tokens.size[1.5]};\n box-sizing: border-box;\n height: ${tokens.size[6.5]};\n background: ${t(colors.gray[50], colors.darkGray[500])};\n color: ${t(colors.gray[700], colors.gray[300])};\n border-radius: ${tokens.border.radius.sm};\n font-size: ${font.size.sm};\n padding: ${tokens.size[1]};\n padding-left: ${tokens.size[1.5]};\n align-items: center;\n font-weight: ${font.weight.medium};\n border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n user-select: none;\n position: relative;\n &:focus-visible {\n outline-offset: 2px;\n outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n }\n `,\n label: css`\n font-size: ${font.size.xs};\n `,\n count: css`\n font-size: ${font.size.xs};\n padding: 0 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${t(colors.gray[500], colors.gray[400])};\n background-color: ${t(colors.gray[200], colors.darkGray[300])};\n border-radius: 2px;\n font-variant-numeric: tabular-nums;\n height: ${tokens.size[4.5]};\n `,\n },\n tree: {\n info: css`\n color: ${t(colors.gray[500], colors.gray[500])};\n font-size: ${font.size.xs};\n margin-right: ${size[1]};\n `,\n actionButton: css`\n background-color: transparent;\n color: ${t(colors.gray[500], colors.gray[500])};\n border: none;\n display: inline-flex;\n padding: 0px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: ${size[3]};\n height: ${size[3]};\n position: relative;\n z-index: 1;\n\n &:hover svg {\n color: ${t(colors.gray[600], colors.gray[400])};\n }\n\n &:focus-visible {\n border-radius: ${border.radius.xs};\n outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n outline-offset: 2px;\n }\n `,\n expanderContainer: css`\n position: relative;\n `,\n expander: css`\n position: absolute;\n cursor: pointer;\n left: -16px;\n top: 3px;\n & path {\n stroke: ${t(colors.blue[400], colors.blue[300])};\n }\n & svg {\n width: ${size[3]};\n height: ${size[3]};\n }\n\n display: inline-flex;\n align-items: center;\n transition: all 0.1s ease;\n `,\n expandedLine: (hasBorder: boolean) => css`\n display: block;\n padding-left: 0.75rem;\n margin-left: -0.7rem;\n ${hasBorder\n ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`\n : ''}\n `,\n collapsible: css`\n cursor: pointer;\n transition: all 0.2s ease;\n &:hover {\n background-color: ${t(colors.gray[100], colors.darkGray[700])};\n border-radius: ${tokens.border.radius.sm};\n padding: 0 ${tokens.size[1]};\n }\n `,\n actions: css`\n display: inline-flex;\n margin-left: ${size[2]};\n gap: ${size[2]};\n align-items: center;\n & svg {\n height: 12px;\n width: 12px;\n }\n `,\n valueCollapsed: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n `,\n valueFunction: css`\n color: ${t(colors.cyan[500], colors.cyan[400])};\n `,\n valueString: css`\n color: ${t(colors.green[500], colors.green[400])};\n `,\n valueNumber: css`\n color: ${t(colors.yellow[500], colors.yellow[400])};\n `,\n valueBoolean: css`\n color: ${t(colors.pink[500], colors.pink[400])};\n `,\n valueNull: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n font-style: italic;\n `,\n valueKey: css`\n color: ${t(colors.blue[400], colors.blue[300])};\n `,\n valueBraces: css`\n color: ${colors.gray[500]};\n `,\n valueContainer: (isRoot: boolean) => css`\n display: block;\n margin-left: ${isRoot ? '0' : '1rem'};\n\n &:not(:hover) .actions {\n display: none;\n }\n\n &:hover .actions {\n display: inline-flex;\n }\n `,\n },\n header: {\n row: css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ${tokens.size[2]} ${tokens.size[2.5]};\n gap: ${tokens.size[2.5]};\n border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;\n align-items: center;\n `,\n logoAndToggleContainer: css`\n display: flex;\n gap: ${tokens.size[3]};\n align-items: center;\n & > button {\n padding: 0;\n background: transparent;\n border: none;\n display: flex;\n gap: ${size[0.5]};\n flex-direction: column;\n }\n `,\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n gap: ${tokens.size[0.5]};\n padding: 0px;\n &:hover {\n opacity: 0.7;\n }\n &:focus-visible {\n outline-offset: 4px;\n border-radius: ${border.radius.xs};\n outline: 2px solid ${colors.blue[800]};\n }\n `,\n tanstackLogo: css`\n font-size: ${font.size.md};\n font-weight: ${font.weight.bold};\n line-height: ${font.lineHeight.xs};\n white-space: nowrap;\n color: ${t(colors.gray[700], colors.gray[300])};\n `,\n flavorLogo: (flavorLight: string, flavorDark: string) => css`\n font-weight: ${font.weight.semibold};\n font-size: ${font.size.xs};\n background: linear-gradient(to right, ${t(flavorLight, flavorDark)});\n background-clip: text;\n -webkit-background-clip: text;\n line-height: 1;\n -webkit-text-fill-color: transparent;\n white-space: nowrap;\n `,\n },\n section: {\n main: css`\n margin-bottom: 2rem;\n padding: 1.5rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n border-radius: 0.75rem;\n box-shadow: ${t(\n '0 1px 3px rgba(0,0,0,0.06)',\n '0 1px 3px rgba(0,0,0,0.18)',\n )};\n `,\n title: css`\n font-size: 1.125rem;\n font-weight: 600;\n color: ${t(colors.gray[900], colors.gray[100])};\n margin: 0 0 1rem 0;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n `,\n icon: css`\n height: 20px;\n width: 20px;\n & > svg {\n height: 100%;\n width: 100%;\n }\n color: ${t(colors.purple[500], colors.purple[400])};\n `,\n description: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n font-size: 0.875rem;\n margin: 0 0 1.5rem 0;\n line-height: 1.5;\n text-align: left;\n `,\n },\n mainPanel: {\n panel: (withPadding: boolean) => css`\n padding: ${withPadding ? tokens.size[4] : 0};\n background: ${t(colors.gray[50], colors.darkGray[700])};\n overflow-y: auto;\n height: 100%;\n `,\n },\n }\n}\n\nexport function useStyles() {\n const { theme } = useTheme()\n const [styles, setStyles] = createSignal(stylesFactory(theme()))\n createEffect(() => {\n setStyles(stylesFactory(theme()))\n })\n return styles\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '../components/theme'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\nimport type { Theme } from '../components/theme'\n\nconst buttonVariantColors: Record<\n ButtonVariant,\n { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n primary: {\n bg: tokens.colors.purple[500],\n hover: tokens.colors.purple[600],\n active: tokens.colors.purple[700],\n text: '#fff',\n border: tokens.colors.purple[500],\n },\n secondary: {\n bg: tokens.colors.gray[800],\n hover: tokens.colors.gray[700],\n active: tokens.colors.gray[600],\n text: tokens.colors.gray[100],\n border: tokens.colors.gray[700],\n },\n info: {\n bg: tokens.colors.blue[500],\n hover: tokens.colors.blue[600],\n active: tokens.colors.blue[700],\n text: '#fff',\n border: tokens.colors.blue[500],\n },\n warning: {\n bg: tokens.colors.yellow[500],\n hover: tokens.colors.yellow[600],\n active: tokens.colors.yellow[700],\n text: '#fff',\n border: tokens.colors.yellow[500],\n },\n danger: {\n bg: tokens.colors.red[500],\n hover: tokens.colors.red[600],\n active: tokens.colors.red[700],\n text: '#fff',\n border: tokens.colors.red[500],\n },\n success: {\n bg: tokens.colors.green[500],\n hover: tokens.colors.green[600],\n active: tokens.colors.green[700],\n text: '#fff',\n border: tokens.colors.green[500],\n },\n}\nexport const css = goober.css\nconst stylesFactory = (theme: Theme = 'dark') => {\n const { colors, font, size, alpha, border } = tokens\n const { fontFamily } = font\n\n const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n const wrapperSize = 320\n\n return {\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n width: ${size[12]};\n height: ${size[12]};\n font-family: ${fontFamily.sans};\n gap: ${tokens.size[0.5]};\n padding: 0px;\n &:hover {\n opacity: 0.7;\n }\n `,\n\n selectWrapper: css`\n width: 100%;\n max-width: ${wrapperSize}px;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n `,\n selectContainer: css`\n width: 100%;\n `,\n selectLabel: css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${t(colors.gray[900], colors.gray[100])};\n text-align: left;\n `,\n selectDescription: css`\n font-size: 0.8rem;\n color: ${t(colors.gray[500], colors.gray[400])};\n margin: 0;\n line-height: 1.3;\n text-align: left;\n `,\n select: css`\n appearance: none;\n width: 100%;\n padding: 0.75rem 3rem 0.75rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n color: ${t(colors.gray[900], colors.gray[100])};\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n font-size: 0.875rem;\n transition: all 0.2s ease;\n cursor: pointer;\n\n /* Custom arrow */\n background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n background-repeat: no-repeat;\n background-position: right 0.75rem center;\n background-size: 1.25rem;\n\n &:hover {\n border-color: ${t(colors.gray[400], colors.gray[600])};\n }\n\n &:focus {\n outline: none;\n border-color: ${colors.purple[400]};\n box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n }\n `,\n inputWrapper: css`\n width: 100%;\n max-width: ${wrapperSize}px;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n `,\n inputContainer: css`\n width: 100%;\n `,\n inputLabel: css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${t(colors.gray[900], colors.gray[100])};\n text-align: left;\n `,\n inputDescription: css`\n font-size: 0.8rem;\n color: ${t(colors.gray[500], colors.gray[400])};\n margin: 0;\n line-height: 1.3;\n text-align: left;\n `,\n input: css`\n appearance: none;\n box-sizing: border-box;\n width: 100%;\n padding: 0.75rem;\n border-radius: 0.5rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n color: ${t(colors.gray[900], colors.gray[100])};\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n font-size: 0.875rem;\n font-family: ${fontFamily.mono};\n transition: all 0.2s ease;\n\n &::placeholder {\n color: ${t(colors.gray[400], colors.gray[500])};\n }\n\n &:hover {\n border-color: ${t(colors.gray[400], colors.gray[600])};\n }\n\n &:focus {\n outline: none;\n border-color: ${t(colors.purple[500], colors.purple[400])};\n box-shadow: 0 0 0 3px\n ${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};\n }\n `,\n checkboxWrapper: css`\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n cursor: pointer;\n user-select: none;\n padding: 0.5rem;\n border-radius: 0.5rem;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ${t(colors.gray[100], colors.darkGray[800])};\n }\n `,\n checkboxContainer: css`\n width: 100%;\n `,\n checkboxLabelContainer: css`\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n flex: 1;\n `,\n checkbox: css`\n appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid ${t(colors.gray[300], colors.gray[700])};\n border-radius: 0.375rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n display: grid;\n place-items: center;\n transition: all 0.2s ease;\n flex-shrink: 0;\n margin-top: 0.125rem;\n\n &:hover {\n border-color: ${t(colors.purple[500], colors.purple[400])};\n }\n\n &:checked {\n background-color: ${t(colors.purple[500], colors.purple[700])};\n border-color: ${t(colors.purple[500], colors.purple[700])};\n }\n\n &:checked::after {\n content: '';\n width: 0.4rem;\n height: 0.6rem;\n border: solid ${t('#fff', colors.gray[100])};\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n margin-top: -3px;\n }\n `,\n checkboxLabel: css`\n color: ${t(colors.gray[900], colors.gray[100])};\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.4;\n text-align: left;\n `,\n checkboxDescription: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n font-size: 0.8rem;\n line-height: 1.3;\n text-align: left;\n `,\n button: {\n base: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: ${tokens.font.fontFamily.sans};\n font-size: 0.8rem;\n font-weight: 500;\n border-radius: 0.2rem;\n padding: 0.2rem 0.6rem;\n cursor: pointer;\n transition:\n background 0.2s,\n color 0.2s,\n border 0.2s,\n box-shadow 0.2s;\n outline: none;\n border-width: 1px;\n border-style: solid;\n `,\n variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n const v = buttonVariantColors[variant]\n if (ghost) {\n return css`\n background: transparent;\n color: ${t(v.bg, v.bg)};\n border-color: transparent;\n &:hover {\n background: ${t(colors.purple[100], colors.darkGray[700])};\n }\n &:active {\n background: ${t(colors.purple[200], colors.darkGray[800])};\n }\n `\n }\n if (outline) {\n return css`\n background: transparent;\n color: ${t(v.bg, v.bg)};\n border-color: ${t(v.bg, v.bg)};\n &:hover {\n background: ${t(colors.purple[100], colors.darkGray[700])};\n border-color: ${t(v.hover, v.hover)};\n }\n &:active {\n background: ${t(colors.purple[200], colors.darkGray[800])};\n border-color: ${t(v.active, v.active)};\n }\n `\n }\n // Default solid button\n return css`\n background: ${t(v.bg, v.bg)};\n color: ${t(v.text, v.text)};\n border-color: ${t(v.border, v.border)};\n &:hover {\n background: ${t(v.hover, v.hover)};\n border-color: ${t(v.hover, v.hover)};\n }\n &:active {\n background: ${t(v.active, v.active)};\n border-color: ${t(v.active, v.active)};\n }\n `\n },\n },\n tag: {\n dot: (color: keyof typeof tokens.colors) => css`\n width: ${tokens.size[1.5]};\n height: ${tokens.size[1.5]};\n border-radius: ${tokens.border.radius.full};\n background-color: ${t(\n tokens.colors[color][500],\n tokens.colors[color][500],\n )};\n `,\n base: css`\n display: flex;\n gap: ${tokens.size[1.5]};\n box-sizing: border-box;\n height: ${tokens.size[6.5]};\n background: ${t(colors.gray[50], colors.darkGray[500])};\n color: ${t(colors.gray[700], colors.gray[300])};\n border-radius: ${tokens.border.radius.sm};\n font-size: ${font.size.sm};\n padding: ${tokens.size[1]};\n padding-left: ${tokens.size[1.5]};\n align-items: center;\n font-weight: ${font.weight.medium};\n border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n user-select: none;\n position: relative;\n &:focus-visible {\n outline-offset: 2px;\n outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n }\n `,\n label: css`\n font-size: ${font.size.xs};\n `,\n count: css`\n font-size: ${font.size.xs};\n padding: 0 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${t(colors.gray[500], colors.gray[400])};\n background-color: ${t(colors.gray[200], colors.darkGray[300])};\n border-radius: 2px;\n font-variant-numeric: tabular-nums;\n height: ${tokens.size[4.5]};\n `,\n },\n tree: {\n info: css`\n color: ${t(colors.gray[500], colors.gray[500])};\n font-size: ${font.size.xs};\n margin-right: ${size[1]};\n `,\n actionButton: css`\n background-color: transparent;\n color: ${t(colors.gray[500], colors.gray[500])};\n border: none;\n display: inline-flex;\n padding: 0px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: ${size[3]};\n height: ${size[3]};\n position: relative;\n z-index: 1;\n\n &:hover svg {\n color: ${t(colors.gray[600], colors.gray[400])};\n }\n\n &:focus-visible {\n border-radius: ${border.radius.xs};\n outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n outline-offset: 2px;\n }\n `,\n expanderContainer: css`\n position: relative;\n `,\n expander: css`\n position: absolute;\n cursor: pointer;\n left: -16px;\n top: 3px;\n & path {\n stroke: ${t(colors.blue[400], colors.blue[300])};\n }\n & svg {\n width: ${size[3]};\n height: ${size[3]};\n }\n\n display: inline-flex;\n align-items: center;\n transition: all 0.1s ease;\n `,\n expandedLine: (hasBorder: boolean) => css`\n display: block;\n padding-left: 0.75rem;\n margin-left: -0.7rem;\n ${hasBorder\n ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`\n : ''}\n `,\n collapsible: css`\n cursor: pointer;\n transition: all 0.2s ease;\n &:hover {\n background-color: ${t(colors.gray[100], colors.darkGray[700])};\n border-radius: ${tokens.border.radius.sm};\n padding: 0 ${tokens.size[1]};\n }\n `,\n actions: css`\n display: inline-flex;\n margin-left: ${size[2]};\n gap: ${size[2]};\n align-items: center;\n & svg {\n height: 12px;\n width: 12px;\n }\n `,\n valueCollapsed: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n `,\n valueFunction: css`\n color: ${t(colors.cyan[500], colors.cyan[400])};\n `,\n valueString: css`\n color: ${t(colors.green[500], colors.green[400])};\n `,\n valueNumber: css`\n color: ${t(colors.yellow[500], colors.yellow[400])};\n `,\n valueBoolean: css`\n color: ${t(colors.pink[500], colors.pink[400])};\n `,\n valueNull: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n font-style: italic;\n `,\n valueKey: css`\n color: ${t(colors.blue[400], colors.blue[300])};\n `,\n valueBraces: css`\n color: ${colors.gray[500]};\n `,\n valueContainer: (isRoot: boolean) => css`\n display: block;\n margin-left: ${isRoot ? '0' : '1rem'};\n\n &:not(:hover) .actions {\n display: none;\n }\n\n &:hover .actions {\n display: inline-flex;\n }\n `,\n },\n header: {\n row: css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ${tokens.size[2]} ${tokens.size[2.5]};\n gap: ${tokens.size[2.5]};\n border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;\n align-items: center;\n `,\n logoAndToggleContainer: css`\n display: flex;\n gap: ${tokens.size[3]};\n align-items: center;\n & > button {\n padding: 0;\n background: transparent;\n border: none;\n display: flex;\n gap: ${size[0.5]};\n flex-direction: column;\n }\n `,\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n gap: ${tokens.size[0.5]};\n padding: 0px;\n &:hover {\n opacity: 0.7;\n }\n &:focus-visible {\n outline-offset: 4px;\n border-radius: ${border.radius.xs};\n outline: 2px solid ${colors.blue[800]};\n }\n `,\n tanstackLogo: css`\n font-size: ${font.size.md};\n font-weight: ${font.weight.bold};\n line-height: ${font.lineHeight.xs};\n white-space: nowrap;\n color: ${t(colors.gray[700], colors.gray[300])};\n `,\n flavorLogo: (flavorLight: string, flavorDark: string) => css`\n font-weight: ${font.weight.semibold};\n font-size: ${font.size.xs};\n background: linear-gradient(to right, ${t(flavorLight, flavorDark)});\n background-clip: text;\n -webkit-background-clip: text;\n line-height: 1;\n -webkit-text-fill-color: transparent;\n white-space: nowrap;\n `,\n },\n section: {\n main: css`\n margin-bottom: 2rem;\n padding: 1.5rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n border-radius: 0.75rem;\n box-shadow: ${t(\n '0 1px 3px rgba(0,0,0,0.06)',\n '0 1px 3px rgba(0,0,0,0.18)',\n )};\n `,\n title: css`\n font-size: 1.125rem;\n font-weight: 600;\n color: ${t(colors.gray[900], colors.gray[100])};\n margin: 0 0 1rem 0;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n `,\n icon: css`\n height: 20px;\n width: 20px;\n & > svg {\n height: 100%;\n width: 100%;\n }\n color: ${t(colors.purple[500], colors.purple[400])};\n `,\n description: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n font-size: 0.875rem;\n margin: 0 0 1.5rem 0;\n line-height: 1.5;\n text-align: left;\n `,\n },\n mainPanel: {\n panel: (withPadding: boolean) => css`\n padding: ${withPadding ? tokens.size[4] : 0};\n background: ${t(colors.gray[50], colors.darkGray[700])};\n overflow-y: auto;\n height: 100%;\n `,\n },\n }\n}\n\nexport function useStyles() {\n const { theme } = useTheme()\n const [styles, setStyles] = createSignal(stylesFactory(theme()))\n createEffect(() => {\n setStyles(stylesFactory(theme()))\n })\n return styles\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
type CollapsibleKeys<T, TPrefix extends string = ''> = T extends ReadonlyArray<infer U> ? (TPrefix extends '' ? '' : TPrefix) | CollapsibleKeys<U, `${TPrefix}[${number}]`> : T extends object ? (TPrefix extends '' ? '' : TPrefix) | {
|
|
2
|
+
[K in Extract<keyof T, string>]: CollapsibleKeys<T[K], TPrefix extends '' ? `${K}` : `${TPrefix}.${K}`>;
|
|
3
|
+
}[Extract<keyof T, string>] : never;
|
|
4
|
+
export type CollapsiblePaths<T> = CollapsibleKeys<T> extends string ? CollapsibleKeys<T> : never;
|
|
5
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/devtools-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -46,13 +46,13 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"clsx": "^2.1.1",
|
|
48
48
|
"goober": "^2.1.16",
|
|
49
|
-
"solid-js": "^1.9.
|
|
49
|
+
"solid-js": "^1.9.9"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"solid-js": ">=1.9.7"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
-
"vite-plugin-solid": "^2.11.
|
|
55
|
+
"vite-plugin-solid": "^2.11.8"
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
58
|
"clean": "premove ./build ./dist",
|
package/src/components/tree.tsx
CHANGED
|
@@ -2,11 +2,13 @@ import { For, Match, Show, Switch, createSignal } from 'solid-js'
|
|
|
2
2
|
import clsx from 'clsx'
|
|
3
3
|
import { css, useStyles } from '../styles/use-styles'
|
|
4
4
|
import { CopiedCopier, Copier, ErrorCopier } from './icons'
|
|
5
|
+
import type { CollapsiblePaths } from '../utils/deep-keys'
|
|
5
6
|
|
|
6
|
-
export function JsonTree(props: {
|
|
7
|
-
value:
|
|
7
|
+
export function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {
|
|
8
|
+
value: TData
|
|
8
9
|
copyable?: boolean
|
|
9
10
|
defaultExpansionDepth?: number
|
|
11
|
+
collapsePaths?: Array<TName>
|
|
10
12
|
}) {
|
|
11
13
|
return (
|
|
12
14
|
<JsonValue
|
|
@@ -15,6 +17,8 @@ export function JsonTree(props: {
|
|
|
15
17
|
copyable={props.copyable}
|
|
16
18
|
depth={0}
|
|
17
19
|
defaultExpansionDepth={props.defaultExpansionDepth ?? 1}
|
|
20
|
+
path=""
|
|
21
|
+
collapsePaths={props.collapsePaths}
|
|
18
22
|
/>
|
|
19
23
|
)
|
|
20
24
|
}
|
|
@@ -25,8 +29,12 @@ function JsonValue(props: {
|
|
|
25
29
|
isRoot?: boolean
|
|
26
30
|
isLastKey?: boolean
|
|
27
31
|
copyable?: boolean
|
|
32
|
+
|
|
28
33
|
defaultExpansionDepth: number
|
|
29
34
|
depth: number
|
|
35
|
+
|
|
36
|
+
collapsePaths?: Array<string>
|
|
37
|
+
path: string
|
|
30
38
|
}) {
|
|
31
39
|
const {
|
|
32
40
|
value,
|
|
@@ -36,6 +44,8 @@ function JsonValue(props: {
|
|
|
36
44
|
copyable,
|
|
37
45
|
defaultExpansionDepth,
|
|
38
46
|
depth,
|
|
47
|
+
collapsePaths,
|
|
48
|
+
path,
|
|
39
49
|
} = props
|
|
40
50
|
const styles = useStyles()
|
|
41
51
|
|
|
@@ -75,6 +85,8 @@ function JsonValue(props: {
|
|
|
75
85
|
copyable={copyable}
|
|
76
86
|
keyName={keyName}
|
|
77
87
|
value={value}
|
|
88
|
+
collapsePaths={collapsePaths}
|
|
89
|
+
path={path}
|
|
78
90
|
/>
|
|
79
91
|
)
|
|
80
92
|
}
|
|
@@ -86,6 +98,8 @@ function JsonValue(props: {
|
|
|
86
98
|
copyable={copyable}
|
|
87
99
|
keyName={keyName}
|
|
88
100
|
value={value}
|
|
101
|
+
collapsePaths={collapsePaths}
|
|
102
|
+
path={path}
|
|
89
103
|
/>
|
|
90
104
|
)
|
|
91
105
|
}
|
|
@@ -107,15 +121,22 @@ const ArrayValue = ({
|
|
|
107
121
|
copyable,
|
|
108
122
|
defaultExpansionDepth,
|
|
109
123
|
depth,
|
|
124
|
+
collapsePaths,
|
|
125
|
+
path,
|
|
110
126
|
}: {
|
|
111
127
|
value: Array<any>
|
|
112
128
|
copyable?: boolean
|
|
113
129
|
keyName?: string
|
|
114
130
|
defaultExpansionDepth: number
|
|
115
131
|
depth: number
|
|
132
|
+
collapsePaths?: Array<string>
|
|
133
|
+
path: string
|
|
116
134
|
}) => {
|
|
117
135
|
const styles = useStyles()
|
|
118
|
-
|
|
136
|
+
|
|
137
|
+
const [expanded, setExpanded] = createSignal(
|
|
138
|
+
depth <= defaultExpansionDepth && !collapsePaths?.includes(path),
|
|
139
|
+
)
|
|
119
140
|
|
|
120
141
|
if (value.length === 0) {
|
|
121
142
|
return (
|
|
@@ -125,6 +146,7 @@ const ArrayValue = ({
|
|
|
125
146
|
"{keyName}":{' '}
|
|
126
147
|
</span>
|
|
127
148
|
)}
|
|
149
|
+
|
|
128
150
|
<span class={styles().tree.valueBraces}>[]</span>
|
|
129
151
|
</span>
|
|
130
152
|
)
|
|
@@ -135,6 +157,7 @@ const ArrayValue = ({
|
|
|
135
157
|
onClick={() => setExpanded(!expanded())}
|
|
136
158
|
expanded={expanded()}
|
|
137
159
|
/>
|
|
160
|
+
|
|
138
161
|
{keyName && (
|
|
139
162
|
<span
|
|
140
163
|
onclick={(e) => {
|
|
@@ -148,7 +171,9 @@ const ArrayValue = ({
|
|
|
148
171
|
<span class={styles().tree.info}>{value.length} items</span>
|
|
149
172
|
</span>
|
|
150
173
|
)}
|
|
174
|
+
|
|
151
175
|
<span class={styles().tree.valueBraces}>[</span>
|
|
176
|
+
|
|
152
177
|
<Show when={expanded()}>
|
|
153
178
|
<span class={styles().tree.expandedLine(Boolean(keyName))}>
|
|
154
179
|
<For each={value}>
|
|
@@ -161,12 +186,15 @@ const ArrayValue = ({
|
|
|
161
186
|
isLastKey={isLastKey}
|
|
162
187
|
defaultExpansionDepth={defaultExpansionDepth}
|
|
163
188
|
depth={depth + 1}
|
|
189
|
+
collapsePaths={collapsePaths}
|
|
190
|
+
path={path ? `${path}[${i()}]` : `[${i()}]`}
|
|
164
191
|
/>
|
|
165
192
|
)
|
|
166
193
|
}}
|
|
167
194
|
</For>
|
|
168
195
|
</span>
|
|
169
196
|
</Show>
|
|
197
|
+
|
|
170
198
|
<Show when={!expanded()}>
|
|
171
199
|
<span
|
|
172
200
|
onClick={(e) => {
|
|
@@ -190,15 +218,23 @@ const ObjectValue = ({
|
|
|
190
218
|
copyable,
|
|
191
219
|
defaultExpansionDepth,
|
|
192
220
|
depth,
|
|
221
|
+
collapsePaths,
|
|
222
|
+
path,
|
|
193
223
|
}: {
|
|
194
224
|
value: Record<string, any>
|
|
195
225
|
keyName?: string
|
|
196
226
|
copyable?: boolean
|
|
197
227
|
defaultExpansionDepth: number
|
|
198
228
|
depth: number
|
|
229
|
+
collapsePaths?: Array<string>
|
|
230
|
+
path: string
|
|
199
231
|
}) => {
|
|
200
232
|
const styles = useStyles()
|
|
201
|
-
|
|
233
|
+
|
|
234
|
+
const [expanded, setExpanded] = createSignal(
|
|
235
|
+
depth <= defaultExpansionDepth && !collapsePaths?.includes(path),
|
|
236
|
+
)
|
|
237
|
+
|
|
202
238
|
const keys = Object.keys(value)
|
|
203
239
|
const lastKeyName = keys[keys.length - 1]
|
|
204
240
|
|
|
@@ -210,10 +246,12 @@ const ObjectValue = ({
|
|
|
210
246
|
"{keyName}":{' '}
|
|
211
247
|
</span>
|
|
212
248
|
)}
|
|
249
|
+
|
|
213
250
|
<span class={styles().tree.valueBraces}>{'{}'}</span>
|
|
214
251
|
</span>
|
|
215
252
|
)
|
|
216
253
|
}
|
|
254
|
+
|
|
217
255
|
return (
|
|
218
256
|
<span class={styles().tree.expanderContainer}>
|
|
219
257
|
{keyName && (
|
|
@@ -222,6 +260,7 @@ const ObjectValue = ({
|
|
|
222
260
|
expanded={expanded()}
|
|
223
261
|
/>
|
|
224
262
|
)}
|
|
263
|
+
|
|
225
264
|
{keyName && (
|
|
226
265
|
<span
|
|
227
266
|
onClick={(e) => {
|
|
@@ -235,7 +274,9 @@ const ObjectValue = ({
|
|
|
235
274
|
<span class={styles().tree.info}>{keys.length} items</span>
|
|
236
275
|
</span>
|
|
237
276
|
)}
|
|
277
|
+
|
|
238
278
|
<span class={styles().tree.valueBraces}>{'{'}</span>
|
|
279
|
+
|
|
239
280
|
<Show when={expanded()}>
|
|
240
281
|
<span class={styles().tree.expandedLine(Boolean(keyName))}>
|
|
241
282
|
<For each={keys}>
|
|
@@ -248,12 +289,15 @@ const ObjectValue = ({
|
|
|
248
289
|
copyable={copyable}
|
|
249
290
|
defaultExpansionDepth={defaultExpansionDepth}
|
|
250
291
|
depth={depth + 1}
|
|
292
|
+
collapsePaths={collapsePaths}
|
|
293
|
+
path={`${path}${path ? '.' : ''}${k}`}
|
|
251
294
|
/>
|
|
252
295
|
</>
|
|
253
296
|
)}
|
|
254
297
|
</For>
|
|
255
298
|
</span>
|
|
256
299
|
</Show>
|
|
300
|
+
|
|
257
301
|
<Show when={!expanded()}>
|
|
258
302
|
<span
|
|
259
303
|
onClick={(e) => {
|
|
@@ -266,6 +310,7 @@ const ObjectValue = ({
|
|
|
266
310
|
{`...`}
|
|
267
311
|
</span>
|
|
268
312
|
</Show>
|
|
313
|
+
|
|
269
314
|
<span class={styles().tree.valueBraces}>{'}'}</span>
|
|
270
315
|
</span>
|
|
271
316
|
)
|
package/src/styles/use-styles.ts
CHANGED
|
@@ -59,6 +59,8 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
59
59
|
|
|
60
60
|
const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
|
|
61
61
|
|
|
62
|
+
const wrapperSize = 320
|
|
63
|
+
|
|
62
64
|
return {
|
|
63
65
|
logo: css`
|
|
64
66
|
cursor: pointer;
|
|
@@ -78,7 +80,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
78
80
|
|
|
79
81
|
selectWrapper: css`
|
|
80
82
|
width: 100%;
|
|
81
|
-
max-width:
|
|
83
|
+
max-width: ${wrapperSize}px;
|
|
82
84
|
display: flex;
|
|
83
85
|
flex-direction: column;
|
|
84
86
|
gap: 0.375rem;
|
|
@@ -129,7 +131,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
129
131
|
`,
|
|
130
132
|
inputWrapper: css`
|
|
131
133
|
width: 100%;
|
|
132
|
-
max-width:
|
|
134
|
+
max-width: ${wrapperSize}px;
|
|
133
135
|
display: flex;
|
|
134
136
|
flex-direction: column;
|
|
135
137
|
gap: 0.375rem;
|
|
@@ -152,6 +154,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
152
154
|
`,
|
|
153
155
|
input: css`
|
|
154
156
|
appearance: none;
|
|
157
|
+
box-sizing: border-box;
|
|
155
158
|
width: 100%;
|
|
156
159
|
padding: 0.75rem;
|
|
157
160
|
border-radius: 0.5rem;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
type CollapsibleKeys<T, TPrefix extends string = ''> =
|
|
2
|
+
T extends ReadonlyArray<infer U>
|
|
3
|
+
?
|
|
4
|
+
| (TPrefix extends '' ? '' : TPrefix)
|
|
5
|
+
| CollapsibleKeys<U, `${TPrefix}[${number}]`>
|
|
6
|
+
: T extends object
|
|
7
|
+
?
|
|
8
|
+
| (TPrefix extends '' ? '' : TPrefix)
|
|
9
|
+
| {
|
|
10
|
+
[K in Extract<keyof T, string>]: CollapsibleKeys<
|
|
11
|
+
T[K],
|
|
12
|
+
TPrefix extends '' ? `${K}` : `${TPrefix}.${K}`
|
|
13
|
+
>
|
|
14
|
+
}[Extract<keyof T, string>]
|
|
15
|
+
: never
|
|
16
|
+
|
|
17
|
+
export type CollapsiblePaths<T> =
|
|
18
|
+
CollapsibleKeys<T> extends string ? CollapsibleKeys<T> : never
|