Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: individual expanded state #211

Merged
merged 1 commit into from
Apr 25, 2024
Merged

fix: individual expanded state #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions workspace/extension/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@

{#if app.selected?.type === 'component'}
<h2>Props</h2>
<PropertyList entries={app.selected?.detail.attributes} />
<PropertyList entries={app.selected.detail.attributes} />

<Divider type="horizontal" />

Expand All @@ -154,7 +154,7 @@
<Divider type="horizontal" />

<h2>State</h2>
<PropertyList entries={app.selected?.detail.ctx} />
<PropertyList entries={app.selected.detail.ctx} />
{:else if app.selected?.type === 'block' || app.selected?.type === 'iteration'}
<h2>State</h2>
<PropertyList entries={app.selected.detail.ctx} />
Expand Down
28 changes: 14 additions & 14 deletions workspace/extension/src/lib/panel/PropertyList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,24 @@
keys?: string[];
}

const { entries = [], keys = [] }: Props = $props();
const { entries = [], keys: parents = [] }: Props = $props();

let expanded = $state(false);
const expanded = $state<{ [k: string]: boolean }>({});
</script>

{#if entries.length}
<ul>
{#each entries as { key, value, readonly = false } (key)}
{@const id = `${app.selected?.id}+${keys.join('.')}.${key}`}
{@const keys = [...parents, key]}
{@const type = typeof value}

<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<li
data-tooltip={errors[id] || null}
data-tooltip={errors[`${app.selected?.id}+${keys.join('.')}`] || null}
style:--indent="-3px"
style:--y-pad="0.125rem"
class:expanded
class:expanded={expanded[key]}
class:expandable={value != null &&
value === value &&
type === 'object' &&
Expand All @@ -41,7 +41,7 @@
Object.keys(value).length)}
onclick={(event) => {
event.stopPropagation();
expanded = !expanded;
expanded[key] = !expanded[key];
}}
>
<span>{key}:</span>
Expand All @@ -52,45 +52,45 @@
{readonly}
type="string"
{value}
onchange={(updated) => inject([...keys, key], updated)}
onchange={(updated) => inject(keys, updated)}
/>
{:else if value == null || value !== value}
<Editable
{readonly}
type="null"
value={value === null ? 'null' : 'undefined'}
onchange={(updated) => inject([...keys, key], updated)}
onchange={(updated) => inject(keys, updated)}
/>
{:else if type === 'number' || type === 'boolean'}
<Editable
{readonly}
type="number"
{value}
onchange={(updated) => inject([...keys, key], updated)}
onchange={(updated) => inject(keys, updated)}
/>
{:else if Array.isArray(value)}
<span class="object">Array [{value.length || ''}]</span>

{#if value.length && expanded}
{#if value.length && expanded[key]}
{@const entries = value.map((v, i) => ({ key: `${i}`, value: v, readonly }))}

<PropertyList {entries} keys={[...keys, key]} />
<PropertyList {entries} {keys} />
{/if}
{:else if type === 'object'}
{#if value.__is === 'function'}
<span class="function">function {value.name || ''}()</span>
{#if expanded}<pre style:width="100%">{value.source}</pre>{/if}
{#if expanded[key]}<pre style:width="100%">{value.source}</pre>{/if}
{:else if value.__is === 'symbol'}
<span class="symbol">{value.name || 'Symbol()'}</span>
{:else if Object.keys(value).length}
<span class="object">Object &lbrace;&hellip;&rbrace;</span>

{#if expanded}
{#if expanded[key]}
{@const entries = Object.entries(value).map(([key, v]) => {
return { key, value: v, readonly };
})}

<PropertyList {entries} keys={[...keys, key]} />
<PropertyList {entries} {keys} />
{/if}
{:else}
<span class="object">Object &lbrace; &rbrace;</span>
Expand Down
Loading