diff --git a/workspace/extension/src/App.svelte b/workspace/extension/src/App.svelte index 9c3a900..21a0af1 100644 --- a/workspace/extension/src/App.svelte +++ b/workspace/extension/src/App.svelte @@ -144,7 +144,7 @@ {#if app.selected?.type === 'component'}

Props

- + @@ -154,7 +154,7 @@

State

- + {:else if app.selected?.type === 'block' || app.selected?.type === 'iteration'}

State

diff --git a/workspace/extension/src/lib/panel/PropertyList.svelte b/workspace/extension/src/lib/panel/PropertyList.svelte index d346d77..f665867 100644 --- a/workspace/extension/src/lib/panel/PropertyList.svelte +++ b/workspace/extension/src/lib/panel/PropertyList.svelte @@ -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 }>({}); {#if entries.length}
    {#each entries as { key, value, readonly = false } (key)} - {@const id = `${app.selected?.id}+${keys.join('.')}.${key}`} + {@const keys = [...parents, key]} {@const type = typeof value}
  • { event.stopPropagation(); - expanded = !expanded; + expanded[key] = !expanded[key]; }} > {key}: @@ -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} inject([...keys, key], updated)} + onchange={(updated) => inject(keys, updated)} /> {:else if type === 'number' || type === 'boolean'} inject([...keys, key], updated)} + onchange={(updated) => inject(keys, updated)} /> {:else if Array.isArray(value)} Array [{value.length || ''}] - {#if value.length && expanded} + {#if value.length && expanded[key]} {@const entries = value.map((v, i) => ({ key: `${i}`, value: v, readonly }))} - + {/if} {:else if type === 'object'} {#if value.__is === 'function'} function {value.name || ''}() - {#if expanded}
    {value.source}
    {/if} + {#if expanded[key]}
    {value.source}
    {/if} {:else if value.__is === 'symbol'} {value.name || 'Symbol()'} {:else if Object.keys(value).length} Object {…} - {#if expanded} + {#if expanded[key]} {@const entries = Object.entries(value).map(([key, v]) => { return { key, value: v, readonly }; })} - + {/if} {:else} Object { }