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 { }