From 355a92a3df033d1fc0746b6bee7e1023c5a8bfab Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Fri, 13 Jun 2025 17:34:23 +0200 Subject: [PATCH] appSvelte5 --- .../src/lib/components/AppTutorials.svelte | 7 +- .../apps/components/buttons/AppForm.svelte | 4 +- .../apps/components/display/AppMap.svelte | 4 +- .../display/dbtable/AppDbExplorer.svelte | 11 +- .../components/apps/editor/AppEditor.svelte | 65 ++++--- .../apps/editor/AppEditorHeader.svelte | 72 +++---- .../apps/editor/AppEditorTutorial.svelte | 10 +- .../components/apps/editor/AppPreview.svelte | 172 ++++++++++------- .../components/apps/editor/GridEditor.svelte | 181 +++++++++--------- .../apps/editor/RecomputeAllComponents.svelte | 26 ++- .../apps/editor/SettingsPanel.svelte | 90 ++++----- .../apps/editor/SubGridEditor.svelte | 8 +- .../components/apps/editor/appUtilsInfer.ts | 5 +- .../component/ComponentCallbacks.svelte | 50 ++--- .../editor/component/ComponentInner.svelte | 27 ++- .../editor/component/ComponentRendered.svelte | 88 +++++---- .../editor/component/ComponentWrapper.svelte | 4 +- .../componentsPanel/ComponentList.svelte | 109 ++++++----- .../editor/componentsPanel/CssSettings.svelte | 3 +- .../contextPanel/ComponentOutput.svelte | 52 +++-- .../editor/contextPanel/ContextPanel.svelte | 52 +++-- .../editor/contextPanel/DebugPanel.svelte | 64 +++---- .../editor/contextPanel/SubGridOutput.svelte | 67 ++++--- .../components/BackgroundScriptOutput.svelte | 28 +-- .../components/BackgroundScriptsOutput.svelte | 2 +- .../contextPanel/components/IdEditor.svelte | 18 +- .../components/OutputHeader.svelte | 92 +++++---- .../EmptyInlineScript.svelte | 39 ++-- .../InlineScriptEditor.svelte | 8 +- .../InlineScriptEditorPanel.svelte | 8 +- .../InlineScriptsPanel.svelte | 64 ++++--- .../InlineScriptsPanelList.svelte | 60 +++--- .../settingsPanel/AlignmentEditor.svelte | 16 +- .../ComponentInputTypeEditor.svelte | 3 +- .../settingsPanel/ComponentPanel.svelte | 99 +++++----- .../settingsPanel/DeleteComponent.svelte | 2 +- .../editor/settingsPanel/GridCondition.svelte | 6 +- .../apps/editor/settingsPanel/GridPane.svelte | 3 +- .../apps/editor/settingsPanel/GridTab.svelte | 6 +- .../settingsPanel/InputsSpecEditor.svelte | 5 +- .../editor/settingsPanel/MenuItems.svelte | 6 +- .../settingsPanel/SelectedRunnable.svelte | 5 +- .../editor/settingsPanel/TableActions.svelte | 6 +- .../settingsPanel/common/PanelSection.svelte | 38 +++- .../decisionTree/DecisionTreePreview.svelte | 3 +- .../inputEditor/ConnectedInputEditor.svelte | 4 +- .../inputEditor/StaticInputEditor.svelte | 147 ++++++++------ .../script/shared/ScriptTriggers.svelte | 3 +- .../components/apps/svelte-grid/Grid.svelte | 125 +++++++----- frontend/src/lib/components/apps/types.ts | 16 +- .../common/button/AnimatedButton.svelte | 32 +++- .../raw_apps/RawAppInlineScriptEditor.svelte | 4 +- .../raw_apps/RawAppInputsSpecEditor.svelte | 4 +- .../tutorials/app/AppTutorial.svelte | 25 +-- .../tutorials/app/ConnectionTutorial.svelte | 3 +- .../components/wizards/AgChartWizard.svelte | 35 ++-- .../components/wizards/AgGridWizard.svelte | 98 +++++----- .../components/wizards/ChartJSWizard.svelte | 17 +- .../wizards/DBExplorerWizard.svelte | 62 +++--- .../components/wizards/PlotlyWizard.svelte | 27 ++- .../wizards/TableColumnWizard.svelte | 25 ++- 61 files changed, 1284 insertions(+), 1031 deletions(-) diff --git a/frontend/src/lib/components/AppTutorials.svelte b/frontend/src/lib/components/AppTutorials.svelte index f32c613bb3..3c78ae4ab7 100644 --- a/frontend/src/lib/components/AppTutorials.svelte +++ b/frontend/src/lib/components/AppTutorials.svelte @@ -4,9 +4,9 @@ import BackgroundRunnablesTutorial from './tutorials/app/BackgroundRunnablesTutorial.svelte' import ConnectionTutorial from './tutorials/app/ConnectionTutorial.svelte' - let backgroundRunnablesTutorial: BackgroundRunnablesTutorial | undefined = undefined - let connectionTutorial: ConnectionTutorial | undefined = undefined - let appTutorial: AppTutorial | undefined = undefined + let backgroundRunnablesTutorial: BackgroundRunnablesTutorial | undefined = $state(undefined) + let connectionTutorial: ConnectionTutorial | undefined = $state(undefined) + let appTutorial: AppTutorial | undefined = $state(undefined) export function runTutorialById(id: string, options?: { skipStepsCount?: number }) { if (id === 'backgroundrunnables') { @@ -23,6 +23,7 @@ } +P { @@ -98,7 +98,7 @@ {customCss} {key} bind:css={css[key]} - componentStyle={$app.css?.formcomponent} + componentStyle={app.css?.formcomponent} /> {/each} diff --git a/frontend/src/lib/components/apps/components/display/AppMap.svelte b/frontend/src/lib/components/apps/components/display/AppMap.svelte index 5decac3bad..3c7e8b72e3 100644 --- a/frontend/src/lib/components/apps/components/display/AppMap.svelte +++ b/frontend/src/lib/components/apps/components/display/AppMap.svelte @@ -224,9 +224,7 @@ //@ts-ignore gridItem.data.configuration.longitude.value = center[0] //@ts-ignore - gridItem.data.configuration.latitude.value = center[1] - - $app = $app + gridItem.data.configuration.latitude.value = center[1] // $app = $app } } diff --git a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte index 7021dcb1f4..edc1c6c6f3 100644 --- a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte +++ b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte @@ -380,8 +380,7 @@ //@ts-ignore gridItem.data.configuration.columnDefs.loading = true - gridItem.data = gridItem.data - $app = $app + gridItem.data = gridItem.data // $app = $app let tableMetadata = await loadTableMetaData( resolvedConfig.type.configuration[selected].resource, @@ -404,9 +403,7 @@ if (shouldReturnEarly(newMap, oldMap)) { //@ts-ignore gridItem.data.configuration.columnDefs.loading = false - gridItem.data = gridItem.data - - $app = $app + gridItem.data = gridItem.data // $app = $app return } @@ -457,9 +454,7 @@ //@ts-ignore gridItem.data.configuration.columnDefs = { value: ncols, type: 'static', loading: false } - gridItem.data = gridItem.data - - $app = $app + gridItem.data = gridItem.data // $app = $app let oldS = $selectedComponent $selectedComponent = [] await tick() diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte index 3530a1fcd8..2235e92848 100644 --- a/frontend/src/lib/components/apps/editor/AppEditor.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte @@ -100,7 +100,7 @@ migrateApp(app) - const appStore = writable(app) + const appStore = $state(app) const selectedComponent = writable(undefined) // $: selectedComponent.subscribe((s) => { @@ -242,7 +242,7 @@ timeout && clearTimeout(timeout) timeout = setTimeout(() => { try { - localStorage.setItem(path != '' ? `app-${path}` : 'app', encodeState($appStore)) + localStorage.setItem(path != '' ? `app-${path}` : 'app', encodeState(appStore)) } catch (err) { console.error('Error storing frontend draft in localStorage', err) } @@ -262,7 +262,7 @@ selectedTab = 'settings' if (befSelected) { if (!['ctx', 'state'].includes(befSelected) && !befSelected?.startsWith(BG_PREFIX)) { - let item = findGridItem($appStore, befSelected) + let item = findGridItem(appStore, befSelected) if (item?.data.type === 'containercomponent' || item?.data.type === 'listcomponent') { $focusedGrid = { parentComponentId: befSelected, @@ -284,7 +284,7 @@ ($worldStore.outputsById?.[befSelected]?.selectedTabIndex?.peak() as number) ?? 0 } } else { - let subgrid = findGridItemParentGrid($appStore, befSelected) + let subgrid = findGridItemParentGrid(appStore, befSelected) if (subgrid) { try { $focusedGrid = { @@ -388,22 +388,25 @@ let css: string | undefined = $state(undefined) let lastTheme: string | undefined = undefined - appStore.subscribe(async (currentAppStore) => { - if (!currentAppStore.theme) { - return - } - - if (JSON.stringify(currentAppStore.theme) != lastTheme) { - if (currentAppStore.theme.type === 'inlined') { - css = currentAppStore.theme.css - } else if (currentAppStore.theme.type === 'path' && currentAppStore.theme?.path) { - let loadedCss = await getTheme($workspaceStore!, currentAppStore.theme.path) - if (loadedCss) { - css = loadedCss.value - } + $effect(() => { + appStore.theme + untrack(async () => { + if (!appStore.theme) { + return } - lastTheme = JSON.stringify(currentAppStore.theme) - } + + if (JSON.stringify(appStore.theme) != lastTheme) { + if (appStore.theme.type === 'inlined') { + css = appStore.theme.css + } else if (appStore.theme.type === 'path' && appStore.theme?.path) { + let loadedCss = await getTheme($workspaceStore!, appStore.theme.path) + if (loadedCss) { + css = loadedCss.value + } + } + lastTheme = JSON.stringify(appStore.theme) + } + }) }) function addOrRemoveCss(isPremium: boolean, isPreview: boolean = false) { @@ -760,15 +763,15 @@ path && untrack(() => onPathChange()) }) $effect(() => { - $appStore && untrack(() => saveFrontendDraft()) + appStore && untrack(() => saveFrontendDraft()) }) $effect(() => { context.mode = $mode == 'dnd' ? 'editor' : 'viewer' }) let width = $derived( - $breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false + $breakpoint === 'sm' && appStore?.mobileViewOnSmallerScreens !== false ? 'min-w-[400px] max-w-[656px]' - : `min-w-[710px] ${$appStore.fullscreen ? 'w-full' : 'max-w-7xl'}` + : `min-w-[710px] ${appStore.fullscreen ? 'w-full' : 'max-w-7xl'}` ) $effect(() => { if ($selectedComponent?.[0] != befSelected) { @@ -846,7 +849,7 @@ /> {#if !$userStore?.operator} - {#if $appStore} + {#if appStore} {#if leftPanelSize === 0} @@ -1085,7 +1088,7 @@ )} style={$componentActive ? `top: -${$yTop}px;` : ''} > - {#if $appStore.grid} + {#if appStore.grid} {#if !$connectingInput?.opened} {/if} @@ -1102,7 +1105,7 @@ {/if} - {#if !$appStore?.mobileViewOnSmallerScreens && $breakpoint === 'sm'} + {#if !appStore?.mobileViewOnSmallerScreens && $breakpoint === 'sm'}
@@ -1119,7 +1122,7 @@ variant="border" size="xs" on:click={() => { - $appStore.mobileViewOnSmallerScreens = true + appStore.mobileViewOnSmallerScreens = true }} startIcon={{ icon: Smartphone diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte index fa61a3d155..679232f0fb 100644 --- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte @@ -187,7 +187,7 @@ } async function computeTriggerables() { - const items = allItems($app.grid, $app.subgrids) + const items = allItems(app.grid, app.subgrids) console.debug('items', items) @@ -277,7 +277,7 @@ return processed as Promise<[string, TriggerableV2] | undefined>[] }) .concat( - Object.values($app.hiddenInlineScripts ?? {}).map(async (v, i) => { + Object.values(app.hiddenInlineScripts ?? {}).map(async (v, i) => { return await processRunnable(BG_PREFIX + i, v, v.fields) }) as Promise<[string, TriggerableV2] | undefined>[] ) @@ -294,7 +294,7 @@ .map((x) => { const c = x.data as AppComponent const config = c.configuration as any - return computeS3FileInputPolicy(config?.type?.configuration?.s3, $app) + return computeS3FileInputPolicy(config?.type?.configuration?.s3, app) }) .filter(Boolean) as { allowed_resources: string[] @@ -345,7 +345,7 @@ fields: Record ): Promise<[string, TriggerableV2] | undefined> { const staticInputs = collectStaticFields(fields) - const oneOfInputs = collectOneOfFields(fields, $app) + const oneOfInputs = collectOneOfFields(fields, app) const allowUserResources: string[] = Object.entries(fields) .map(([k, v]) => { return v['allowUserResources'] ? k : undefined @@ -382,7 +382,7 @@ await AppService.createApp({ workspace: $workspaceStore!, requestBody: { - value: $app, + value: app, path, summary: $summary, policy, @@ -392,7 +392,7 @@ }) savedApp = { summary: $summary, - value: structuredClone($app), + value: structuredClone($state.snapshot(app)), path: path, policy: policy, custom_path: customPath @@ -425,12 +425,12 @@ if ( deployedValue && savedApp && - $app && + app && orderedJsonStringify(deployedValue) === orderedJsonStringify( replaceFalseWithUndefined({ summary: $summary, - value: $app, + value: app, path: newEditedPath || savedApp.draft?.path || savedApp.path, policy, custom_path: customPath @@ -475,7 +475,7 @@ workspace: $workspaceStore!, path: $appPath!, requestBody: { - value: $app!, + value: app!, summary: $summary, policy, path: npath, @@ -488,7 +488,7 @@ }) savedApp = { summary: $summary, - value: structuredClone($app), + value: structuredClone($state.snapshot(app)), path: npath, policy, custom_path: customPath @@ -548,7 +548,7 @@ await AppService.createApp({ workspace: $workspaceStore!, requestBody: { - value: $app, + value: app, path: newEditedPath, summary: $summary, policy, @@ -562,7 +562,7 @@ path: newEditedPath, typ: 'app', value: { - value: $app, + value: app, path: newEditedPath, summary: $summary, policy, @@ -572,13 +572,13 @@ }) savedApp = { summary: $summary, - value: structuredClone($app), + value: structuredClone($state.snapshot(app)), path: newEditedPath, policy, draft_only: true, draft: { summary: $summary, - value: structuredClone($app), + value: structuredClone($state.snapshot(app)), path: newEditedPath, policy, custom_path: customPath @@ -606,7 +606,7 @@ const draftOrDeployed = cleanValueProperties(savedApp.draft || savedApp) const current = cleanValueProperties({ summary: $summary, - value: $app, + value: app, path: newEditedPath || savedApp.draft?.path || savedApp.path, policy }) @@ -633,7 +633,7 @@ await AppService.createApp({ workspace: $workspaceStore!, requestBody: { - value: $app!, + value: app!, summary: $summary, policy, path: newEditedPath || path, @@ -648,7 +648,7 @@ path: savedApp.draft_only ? newEditedPath || path : path, typ: 'app', value: { - value: $app!, + value: app!, summary: $summary, policy, path: newEditedPath || path @@ -660,7 +660,7 @@ ...(savedApp?.draft_only ? { summary: $summary, - value: structuredClone($app), + value: structuredClone($state.snapshot(app)), path: savedApp.draft_only ? newEditedPath || path : path, policy, draft_only: true, @@ -669,7 +669,7 @@ : savedApp), draft: { summary: $summary, - value: structuredClone($app), + value: structuredClone($state.snapshot(app)), path: newEditedPath || path, policy, custom_path: customPath @@ -726,13 +726,13 @@ switch (event.key) { case 'Z': if (event.ctrlKey || event.metaKey) { - $app = redo(history) + // app = redo(history) event.preventDefault() } break case 'z': if (event.ctrlKey || event.metaKey) { - $app = undo(history, $app) + // app = undo(history, app) event.preventDefault() } @@ -781,7 +781,7 @@ displayName: 'Export', icon: FileJson, action: () => { - appExport?.open($app) + appExport?.open(app) } }, // { @@ -796,7 +796,7 @@ displayName: 'Hub compatible JSON', icon: FileUp, action: () => { - appExport?.open(toStatic($app, $staticExporter, $summary).app) + appExport?.open(toStatic(app, $staticExporter, $summary).app) } }, { @@ -832,7 +832,7 @@ draft: savedApp.draft, current: { summary: $summary, - value: $app, + value: app, path: newEditedPath || savedApp.draft?.path || savedApp.path, policy, custom_path: customPath @@ -885,7 +885,7 @@ } let priorDarkMode = document.documentElement.classList.contains('dark') - setTheme($app?.darkMode) + setTheme(app?.darkMode) let customPath = $state(savedApp?.custom_path) let dirtyCustomPath = $state(false) @@ -951,7 +951,7 @@ savedValue: savedApp, modifiedValue: { summary: $summary, - value: $app, + value: app, path: newEditedPath || savedApp?.draft?.path || savedApp?.path, policy, custom_path: customPath @@ -967,7 +967,7 @@ bind:deployedValue currentValue={{ summary: $summary, - value: $app, + value: app, path: newEditedPath || savedApp?.draft?.path || savedApp?.path, policy, custom_path: customPath @@ -1123,7 +1123,7 @@ draft: savedApp.draft, current: { summary: $summary, - value: $app, + value: app, path: newEditedPath || savedApp.draft?.path || savedApp.path, policy, custom_path: customPath @@ -1313,19 +1313,19 @@ undoProps={{ disabled: $history?.index === 0 }} redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }} on:undo={() => { - $app = undo(history, $app) + // app = undo(history, app) }} on:redo={() => { - $app = redo(history) + // app = redo(history) }} /> - {#if $app} + {#if app} { - $app.fullscreen = detail === 'true' + app.fullscreen = detail === 'true' }} > {#snippet children({ item })} @@ -1346,14 +1346,14 @@ {/snippet} {/if} - {#if $app} + {#if app} { const theme = detail === 'dark' ? true : detail === 'sun' ? false : undefined setTheme(theme) }} - selected={$app.darkMode === undefined ? 'auto' : $app.darkMode ? 'dark' : 'sun'} + selected={app.darkMode === undefined ? 'auto' : app.darkMode ? 'dark' : 'sun'} > {#snippet children({ item })} {/if} diff --git a/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte b/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte index aadd8cf589..ded126879e 100644 --- a/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte @@ -11,8 +11,8 @@ import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte' import { isAppTainted } from '$lib/components/tutorials/utils' - let appTutorials: AppTutorials | undefined = undefined - let targetTutorial: string | undefined = undefined + let appTutorials: AppTutorials | undefined = $state(undefined) + let targetTutorial: string | undefined = $state(undefined) const { app } = getContext('AppViewerContext') @@ -23,7 +23,7 @@ const forkedFromTemplate = urlParams.get('template') if ( - !isAppTainted($app) && + !isAppTainted(app) && !$ignoredTutorials.includes(7) && $tutorialsToDo.includes(7) && !forkedFromTheHub && @@ -81,7 +81,7 @@ {#key $tutorialsToDo} - + {#snippet buttonReplacement()} +
{/snippet} diff --git a/frontend/src/lib/components/apps/editor/component/ComponentRendered.svelte b/frontend/src/lib/components/apps/editor/component/ComponentRendered.svelte index 52d9679ea0..29ca29e70f 100644 --- a/frontend/src/lib/components/apps/editor/component/ComponentRendered.svelte +++ b/frontend/src/lib/components/apps/editor/component/ComponentRendered.svelte @@ -1,8 +1,10 @@ - - - + +
{ + onmouseover={stopPropagation(() => { outTimeout && clearTimeout(outTimeout) if (component.id !== $hoverStore) { $hoverStore = component.id } - }} - on:mouseout|stopPropagation={mouseOut} + })} + onmouseout={stopPropagation(mouseOut)} class={twMerge( 'h-full flex flex-col w-full component relative', initializing ? 'overflow-hidden h-0' : '' @@ -162,7 +180,7 @@
{#if initializing && render && showSkeleton} - - + +
{ + onmouseover={stopPropagation(() => { if (component.id !== $hoverStore) { $hoverStore = component.id } - }} - on:mouseout|stopPropagation={() => { + })} + onmouseout={stopPropagation(() => { if ($hoverStore !== undefined) { $hoverStore = undefined } - }} + })} class="absolute inset-0 center-center flex-col border animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms]" >
{/if} diff --git a/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte b/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte index 900aeeee0f..c289ebfaa9 100644 --- a/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte +++ b/frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte @@ -13,7 +13,7 @@ function selectComponent(e: PointerEvent, id: string) { if (!$connectingInput.opened) { - selectId(e, id, selectedComponent, $app) + selectId(e, id, selectedComponent, app) } } @@ -29,7 +29,7 @@ if (!$connectingInput.opened) { selectComponent(e, id) } else { - const allIdsInPath = dfs($app.grid, id, $app.subgrids ?? {}) ?? [] + const allIdsInPath = dfs(app.grid, id, app.subgrids ?? {}) ?? [] allIdsInPath.forEach((id) => { $manuallyOpened[id] = true diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte index 4f3b353789..43dbdba5cb 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte @@ -1,6 +1,6 @@ @@ -217,22 +221,25 @@
{#each components as item (item)} + {@const SvelteComponent = componentsRecord[item].icon}
{#if DEPRECATED_COMPONENTS[item]}
-
- {DEPRECATED_COMPONENTS[item]} -
+ {#snippet text()} +
+ {DEPRECATED_COMPONENTS[item]} +
+ {/snippet}
Deprecated
{/if}
{componentsRecord[item].name} @@ -257,17 +264,15 @@ {/each} {#if presets} {#each presets as presetItem (presetItem)} + {@const SvelteComponent_1 = presetsRecord[presetItem].icon}
{presetsRecord[presetItem].name} @@ -286,7 +291,7 @@ {#each groups as group (group.path)}
Components - {#each $app.grid as gridItem, index (gridItem.id)} + {#each app.grid as gridItem, index (gridItem.id)} {/each}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte index 820d68bb12..d8cf6d6fa2 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte @@ -74,7 +74,8 @@ >Status
Action
+ >Action
{#each unintitializedComponents as c} @@ -82,41 +83,38 @@ {#if !item}
Item {c} not found
{:else} - -
- - {c} - -
+ +
+ + {c} + +
-
- - {item?.data?.type || 'Unknown'} - -
+
+ + {item?.data?.type || 'Unknown'} + +
-
- Uninitialized -
-
- - -
+
+ Uninitialized +
+
+ +
{/if} - {/each}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte index 1c025bdaaa..cacae7b48f 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte @@ -1,33 +1,31 @@ {#each subgridItems as { k, items }, index (k)}
{#if subGrids.length > 1 && render} - - + +
{ + onclick={() => { selected = index }} > @@ -78,9 +94,6 @@ gridItem={subGridItem} first={index === 0} {expanded} - on:select={({ detail }) => { - $connectingInput = connectInput($connectingInput, subGridItem.id, detail) - }} /> {/each} {:else} diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte index 3ef4011c65..ffe3a2976d 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte @@ -7,17 +7,23 @@ const { connectingInput } = getContext('AppViewerContext') - export let id: string - export let name: string - export let first: boolean = false + interface Props { + id: string + name: string + first?: boolean + } + + let { id, name, first = false }: Props = $props() - - { - $connectingInput = connectInput($connectingInput, id, detail) - }} - /> + + {#snippet children({ render })} + { + $connectingInput = connectInput($connectingInput, id, detail) + }} + /> + {/snippet} diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte index ceb562384b..ac777b3bc9 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte @@ -7,7 +7,7 @@ const { app } = getContext('AppViewerContext') -{#each $app.hiddenInlineScripts ?? [] as action, index} +{#each app.hiddenInlineScripts ?? [] as action, index} {#if !action.hidden} {/if} diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte index 88882ced5b..50f0cd5502 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte @@ -8,11 +8,15 @@ const { app, selectedComponent } = getContext('AppViewerContext') - export let id: string + interface Props { + id: string + } + + let { id }: Props = $props() const dispatch = createEventDispatcher() - $: reservedIds = allItems($app.grid, $app.subgrids).map((item) => item.id) + let reservedIds = $derived(allItems(app.grid, app.subgrids).map((item) => item.id)) - + {#snippet trigger()} - - + {/snippet} + {#snippet content({ close })} close()} @@ -42,5 +46,5 @@ }} {reservedIds} /> - + {/snippet} diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte index 3273677583..c084a2553f 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte @@ -1,4 +1,6 @@ - +
{#if render && ($search == '' || inSearch)} - - + +
{ + onmouseenter={stopPropagation(() => { if (id !== $hoverStore) { $hoverStore = id } - }} - on:mouseleave|stopPropagation={() => { + })} + onmouseleave={stopPropagation(() => { if ($hoverStore !== undefined) { $hoverStore = undefined } - }} + })} class={classNames( 'flex items-center justify-between p-1 cursor-pointer gap-1 truncate', hoverColor[color], $selectedComponent?.includes(id) ? openBackground[color] : $connectingInput.hoveredComponent === id - ? 'bg-[#fab157]' - : 'bg-surface-secondary', + ? 'bg-[#fab157]' + : 'bg-surface-secondary', first ? 'border-t' : '', nested ? 'border-l' : '', 'transition-all' )} - on:click={() => { + onclick={() => { if (!disabled) { $manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true } @@ -238,7 +258,7 @@
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte index 12cfedd2cf..9899b4cae0 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte @@ -20,14 +20,23 @@ import type { Preview } from '$lib/gen' import type { InlineScript } from '../../types' - export let componentType: string | undefined = undefined - export let showScriptPicker = false - export let rawApps = false - export let unusedInlineScripts: { name: string; inlineScript: InlineScript }[] + interface Props { + componentType?: string | undefined + showScriptPicker?: boolean + rawApps?: boolean + unusedInlineScripts: { name: string; inlineScript: InlineScript }[] + } - let tab = 'workspacescripts' - let filter: string = '' - let picker: Drawer + let { + componentType = undefined, + showScriptPicker = false, + rawApps = false, + unusedInlineScripts + }: Props = $props() + + let tab = $state('workspacescripts') + let filter: string = $state('') + let picker: Drawer | undefined = $state() const dispatch = createEventDispatcher() @@ -78,13 +87,15 @@ newInlineScript(script.content, script.language) } - $: langs = processLangs(undefined, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages)) - .map((l) => [defaultScriptLanguages[l], l]) - .filter( - (x) => - x[1] != 'docker' && - ($defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1])) - ) as [string, Preview['language']][] + let langs = $derived( + processLangs(undefined, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages)) + .map((l) => [defaultScriptLanguages[l], l]) + .filter( + (x) => + x[1] != 'docker' && + ($defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1])) + ) as [string, Preview['language']][] + ) diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte index 703aea891f..b374255ce0 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte @@ -196,7 +196,7 @@ $stateId++ } } - $app = $app + // $app = $app } } @@ -271,7 +271,7 @@ placeholder="Inline script name" class="!text-xs !rounded-sm !shadow-none" onkeyup={() => { - $app = $app + // $app = $app if (stateId) { $stateId++ } @@ -385,7 +385,7 @@ loadSchemaAndInputsByName() } } - $app = $app + // $app = $app }} args={Object.entries(fields).reduce((acc, [key, obj]) => { acc[key] = obj.type === 'static' ? obj.value : undefined @@ -413,7 +413,7 @@ }} on:change={async (e) => { inferSuggestions(e.detail.code) - $app = $app + // $app = $app }} /> {/if} diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte index 0fa3cb864e..0f5b57f60c 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte @@ -18,8 +18,7 @@ function clear() { if (componentInput && componentInput.type == 'runnable') { - componentInput = clearResultAppInput(componentInput) - $app = $app + componentInput = clearResultAppInput(componentInput) // $app = $app } } @@ -76,7 +75,7 @@ /> {:else} { @@ -87,8 +86,7 @@ ) { componentInput.runnable.inlineScript = e.detail componentInput.autoRefresh = true - componentInput.recomputeOnInputChanged = true - $app = $app + componentInput.recomputeOnInputChanged = true // $app = $app } }} /> diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte index 87f60209f1..9064e8e4e7 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte @@ -18,11 +18,11 @@ function deleteBackgroundScript(index: number) { // remove the script from the array at the index - if ($app.hiddenInlineScripts.length - 1 == index) { - $app.hiddenInlineScripts.splice(index, 1) - $app.hiddenInlineScripts = [...$app.hiddenInlineScripts] + if (app.hiddenInlineScripts.length - 1 == index) { + app.hiddenInlineScripts.splice(index, 1) + app.hiddenInlineScripts = [...app.hiddenInlineScripts] } else { - $app.hiddenInlineScripts[index] = { + app.hiddenInlineScripts[index] = { hidden: true, inlineScript: undefined, name: `Background Runnable ${index}`, @@ -30,7 +30,7 @@ type: 'runnableByName', recomputeIds: undefined } - $app.hiddenInlineScripts = $app.hiddenInlineScripts + app.hiddenInlineScripts = app.hiddenInlineScripts } $selectedComponentInEditor = undefined @@ -40,24 +40,33 @@ } } - $: gridItem = + let gridItem = $derived( $selectedComponentInEditor && !$selectedComponentInEditor.startsWith(BG_PREFIX) - ? findGridItem($app, $selectedComponentInEditor?.split('_')?.[0]) + ? findGridItem(app, $selectedComponentInEditor?.split('_')?.[0]) : undefined - - $: hiddenInlineScript = $app?.hiddenInlineScripts?.findIndex((k_, index) => { - const [prefix, id] = $selectedComponentInEditor?.split('_') || [] - - if (prefix !== 'bg') return false - - return Number(id) === index - }) - - $: unusedInlineScript = $app?.unusedInlineScripts?.findIndex( - (k_, index) => `unused-${index}` === $selectedComponentInEditor ) - export let width: number | undefined = undefined + let hiddenInlineScript = $derived( + app?.hiddenInlineScripts?.findIndex((k_, index) => { + const [prefix, id] = $selectedComponentInEditor?.split('_') || [] + + if (prefix !== 'bg') return false + + return Number(id) === index + }) + ) + + let unusedInlineScript = $derived( + app?.unusedInlineScripts?.findIndex( + (k_, index) => `unused-${index}` === $selectedComponentInEditor + ) + ) + + interface Props { + width?: number | undefined + } + + let { width = undefined }: Props = $props() {/key} - {:else if unusedInlineScript > -1 && $app.unusedInlineScripts?.[unusedInlineScript]} + {:else if unusedInlineScript > -1 && app.unusedInlineScripts?.[unusedInlineScript]} {#key unusedInlineScript} sendUserToast('Cannot save to workspace unused scripts', true)} id={`unused-${unusedInlineScript}`} - bind:name={$app.unusedInlineScripts[unusedInlineScript].name} - bind:inlineScript={$app.unusedInlineScripts[unusedInlineScript].inlineScript} + bind:name={app.unusedInlineScripts[unusedInlineScript].name} + bind:inlineScript={app.unusedInlineScripts[unusedInlineScript].inlineScript} on:delete={() => { // remove the script from the array at the index - $app.unusedInlineScripts.splice(unusedInlineScript, 1) - $app.unusedInlineScripts = [...$app.unusedInlineScripts] + app.unusedInlineScripts.splice(unusedInlineScript, 1) + app.unusedInlineScripts = [...app.unusedInlineScripts] }} /> {/key} {:else if hiddenInlineScript > -1} {#key hiddenInlineScript} - {#if $app.hiddenInlineScripts?.[hiddenInlineScript]} + {#if app.hiddenInlineScripts?.[hiddenInlineScript]} { createScriptFromInlineScript( @@ -111,13 +120,12 @@ e.detail, $workspaceStore ?? '', $appPath - ) - $app = $app + ) // app = app }} transformer={$selectedComponentInEditor?.endsWith('_transformer')} on:delete={() => deleteBackgroundScript(hiddenInlineScript)} id={BG_PREFIX + hiddenInlineScript} - bind:runnable={$app.hiddenInlineScripts[hiddenInlineScript]} + bind:runnable={app.hiddenInlineScripts[hiddenInlineScript]} />{/if}{/key} {:else}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte index 195558b9db..b145804f31 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte @@ -1,7 +1,7 @@ - + {#snippet action()}
- + {/snippet}
@@ -109,7 +109,7 @@ {$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50' : 'hover:bg-blue-50 dark:hover:bg-frost-900/50'}" - on:click={() => selectScript(id)} + onclick={() => selectScript(id)} > {name}
@@ -124,7 +124,7 @@ {$selectedComponentInEditor === id + '_transformer' ? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50' : 'hover:bg-blue-50 dark:hover:bg-frost-900/50'}" - on:click={() => selectScript(id + '_transformer')} + onclick={() => selectScript(id + '_transformer')} > Transformer @@ -140,7 +140,7 @@ {$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50' : 'hover:bg-blue-50'}" - on:click={() => selectScript(id)} + onclick={() => selectScript(id)} > {name} {id} @@ -153,7 +153,7 @@ {$selectedComponentInEditor === id + '_transformer' ? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50' : 'hover:bg-blue-50 dark:hover:bg-frost-900/50'}" - on:click={() => selectScript(id + '_transformer')} + onclick={() => selectScript(id + '_transformer')} > Transformer @@ -161,9 +161,9 @@ {/if} {/each} - {#if $app.unusedInlineScripts?.length > 0} + {#if app.unusedInlineScripts?.length > 0}
- {#each $app.unusedInlineScripts as unusedInlineScript, index (index)} + {#each app.unusedInlineScripts as unusedInlineScript, index (index)} {@const id = `unused-${index}`}
{/if} - {#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0 && runnables.imported.length == 0} + {#if runnables.inline.length == 0 && app.unusedInlineScripts?.length == 0 && runnables.imported.length == 0}
No scripts/flows
{/if}
@@ -210,8 +210,8 @@
- {#if $app.hiddenInlineScripts?.length > 0} - {#each $app.hiddenInlineScripts as { name, hidden, transformer }, index (index)} + {#if app.hiddenInlineScripts?.length > 0} + {#each app.hiddenInlineScripts as { name, hidden, transformer }, index (index)} {#if !hidden} {@const id = BG_PREFIX + index} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte index eb28ce77b4..cb451894ba 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte @@ -7,14 +7,10 @@ AlignStartHorizontal, AlignStartVertical } from 'lucide-svelte' - import { getContext } from 'svelte' - import type { AppViewerContext } from '../../types' import type { AppComponent } from '../component' import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte' import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte' - const { app } = getContext('AppViewerContext') - interface Props { component: AppComponent } @@ -26,11 +22,7 @@
Alignment
{#if component.horizontalAlignment} - ($app = $app)} - bind:selected={component.horizontalAlignment} - > + {#snippet children({ item })} @@ -39,11 +31,7 @@ {/if} {#if component.type !== 'formcomponent' && component.verticalAlignment} - ($app = $app)} - bind:selected={component.verticalAlignment} - > + {#snippet children({ item })} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte index 0146164060..568c49f576 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte @@ -45,8 +45,7 @@ } ] } - evalV2editor?.setCode(expr) - $app = $app + evalV2editor?.setCode(expr) // $app = $app } let clientWidth: number = $state(0) diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index b706095172..48bce13544 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -46,11 +46,19 @@ import { twMerge } from 'tailwind-merge' import Popover from '$lib/components/Popover.svelte' - export let componentSettings: { item: GridItem; parent: string | undefined } | undefined = - undefined - export let onDelete: (() => void) | undefined = undefined - export let noGrid = false - export let duplicateMoveAllowed = true + interface Props { + componentSettings?: { item: GridItem; parent: string | undefined } | undefined + onDelete?: (() => void) | undefined + noGrid?: boolean + duplicateMoveAllowed?: boolean + } + + let { + componentSettings = $bindable(undefined), + onDelete = undefined, + noGrid = false, + duplicateMoveAllowed = true + }: Props = $props() const { app, @@ -67,7 +75,7 @@ const { history, movingcomponents } = getContext('AppEditorContext') function removeGridElement() { - push(history, $app) + push(history, app) const id = componentSettings?.item?.id const onDeleteComponentControl = id ? $componentControl[id]?.onDelete : undefined @@ -91,7 +99,7 @@ $selectedComponent = undefined $focusedGrid = undefined if (componentSettings?.item && !noGrid) { - let ids = deleteGridItem($app, componentSettings?.item.data, componentSettings?.parent) + let ids = deleteGridItem(app, componentSettings?.item.data, componentSettings?.parent) for (const key of ids) { delete $runnableComponents[key] } @@ -100,7 +108,7 @@ if (componentSettings?.item?.data?.id) { delete $runnableComponents[componentSettings?.item?.data?.id] } - $app = $app + // $app = $app $runnableComponents = $runnableComponents onDelete?.() @@ -108,10 +116,10 @@ let viewCssOptions = false - $: extraLib = + let extraLib = $derived( (componentSettings?.item?.data?.componentInput?.type === 'template' || componentSettings?.item?.data?.componentInput?.type === 'templatev2') && - $worldStore + $worldStore ? buildExtraLib( $worldStore?.outputsById ?? {}, componentSettings?.item?.data?.id, @@ -119,6 +127,7 @@ false ) : undefined + ) // ` // /** The current's app state */ @@ -144,7 +153,7 @@ ? isTriggerable(componentSettings?.item.data.type) : false - let evalV2editor: EvalV2InputEditor | undefined = undefined + let evalV2editor: EvalV2InputEditor | undefined = $state(undefined) function transformToFrontend() { if (componentSettings?.item.data.componentInput) { @@ -173,17 +182,17 @@ } - + -{#if componentSettings?.item?.id && isTableAction(componentSettings?.item?.id, $app)} +{#if componentSettings?.item?.id && isTableAction(componentSettings?.item?.id, app)}
- + {#snippet text()}
Back to table component
- + {/snippet} -
+ {#snippet action()} +
+ +
+ {/snippet}
Full height
{#if componentSettings?.item?.[12]?.fullHeight !== undefined} @@ -525,20 +536,22 @@ {#if duplicateMoveAllowed} -
- -
+ {#snippet action()} +
+ +
+ {/snippet}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DeleteComponent.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DeleteComponent.svelte index db0245cefb..49ea54f231 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/DeleteComponent.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/DeleteComponent.svelte @@ -53,7 +53,7 @@ if (componentSetting?.item?.data?.id) { delete $runnableComponents[componentSetting?.item?.data?.id] } - $app = $app + // $app = $app $runnableComponents = $runnableComponents onDelete?.() diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte index 9c1ef855d6..b7614d9586 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte @@ -60,8 +60,7 @@ $app!.subgrids = { ...$app!.subgrids, ...newSubgrids - } - $app = $app + } // $app = $app tick().then(() => { const targetIndex = items.findIndex((i) => i.id === e.detail.info.id) @@ -94,8 +93,7 @@ }) items = nitems - delete $app!.subgrids![`${component.id}-${items.length + 1}`] - $app = $app + delete $app!.subgrids![`${component.id}-${items.length + 1}`] // $app = $app } function addCondition(): void { diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte index 6ba0dafe38..9fbe02cee5 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte @@ -41,8 +41,7 @@ delete $app!.subgrids![`${component.id}-${panes.length}`] panes = panes - component.numberOfSubgrids = panes.length - $app = $app + component.numberOfSubgrids = panes.length // $app = $app } diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte index b4b438111b..e41db98200 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte @@ -84,8 +84,7 @@ }) items = items - delete $app!.subgrids![`${component.id}-${items.length}`] - $app = $app + delete $app!.subgrids![`${component.id}-${items.length}`] // $app = $app } function handleConsider(e: CustomEvent): void { @@ -127,8 +126,7 @@ $app!.subgrids = { ...$app!.subgrids, ...newSubgrids - } - $app = $app + } // $app = $app tick().then(() => { const targetIndex = items.findIndex((i) => i.id === e.detail.info.id) diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte index e87761c27f..4daac5762d 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte @@ -97,7 +97,7 @@ } }) - const { connectingInput, app, workspace } = getContext('AppViewerContext') + const { connectingInput, workspace } = getContext('AppViewerContext') const dispatch = createEventDispatcher() @@ -129,8 +129,7 @@ { componentId: connection.componentId, id: connection.path.split('.')[0].split('[')[0] } ] } - evalV2editor?.setCode(expr) - $app = $app + evalV2editor?.setCode(expr) // $app = $app } function closeConnection() { diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte index 584cc5d2aa..1b0678ff5f 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte @@ -23,8 +23,7 @@ ...appComponentFromType('buttoncomponent')(`${id}_${actionId}`), recomputeIds: [] } - components = [...components, newComponent] - $app = $app + components = [...components, newComponent] // $app = $app } function deleteComponent(cid: string) { @@ -32,8 +31,7 @@ delete $errorByComponent[cid] - $selectedComponent = [id] - $app = $app + $selectedComponent = [id] // $app = $app } diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte index 94c0af27cf..a1bb878a2b 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte @@ -21,8 +21,7 @@ $app.unusedInlineScripts.push({ name: appInput.runnable.name, inlineScript: appInput.runnable.inlineScript - }) - $app = $app + }) // $app = $app appInput = clearResultAppInput(appInput) } } @@ -56,7 +55,7 @@ color: 'light', callback: detach } - ] as const) + ] as const) : []), { label: 'Clear', diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte index 07ccf996e5..938d7cd0e3 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte @@ -68,8 +68,7 @@ } ] - components = [...components, newComponent] - $app = $app + components = [...components, newComponent] // $app = $app } function deleteComponent(cid: string, index: number) { @@ -79,8 +78,7 @@ components = components.filter((x) => x.id !== cid) delete $errorByComponent[cid] - $selectedComponent = [id] - $app = $app + $selectedComponent = [id] // $app = $app // Remove the corresponding item from the items array items = items.filter((item) => item.originalIndex !== index) } diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte index 53c37bf7b1..ecd0605da8 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte @@ -2,18 +2,36 @@ import { classNames } from '$lib/utils' import Tooltip from '../../../../Tooltip.svelte' - export let title: string - export let noPadding: boolean = false - export let fullHeight: boolean = true - export let titlePadding: string = '' - export let tooltip = '' - export let documentationLink: string | undefined = undefined - export let id: string | undefined = undefined + interface Props { + title: string + noPadding?: boolean + fullHeight?: boolean + titlePadding?: string + tooltip?: string + documentationLink?: string | undefined + id?: string | undefined + class?: string + action?: import('svelte').Snippet + children?: import('svelte').Snippet + } + + let { + title, + noPadding = false, + fullHeight = true, + titlePadding = '', + tooltip = '', + documentationLink = undefined, + id = undefined, + class: className = '', + action, + children + }: Props = $props()
{/if}
- + {@render action?.()}
- + {@render children?.()}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte index a9fc5bfbdf..9e26579c0c 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte @@ -86,8 +86,7 @@ delete $app!.subgrids![`${component.id}-${nodes.length}`] nodes = nodes - component.numberOfSubgrids = nodes.length - $app = $app + component.numberOfSubgrids = nodes.length // $app = $app } function nodeCallbackHandler( diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte index 720adcb956..06b4d6da17 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte @@ -11,7 +11,7 @@ function applyConnection(connection: InputConnection) { componentInput.connection = connection - $app = $app + // $app = $app } @@ -33,7 +33,7 @@ if (componentInput.type === 'connected') { componentInput.connection = undefined } - $app = $app + // $app = $app }} > Disconnect diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte index d3ddb5abdc..bcfee7e6cf 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte @@ -1,4 +1,7 @@ {#key subFieldType} {#if componentInput?.type === 'static'} {#if fieldType === 'number' || fieldType === 'integer'} - + {:else if fieldType === 'textarea'} - {:else if fieldType === 'date'} - + {:else if fieldType === 'time'} - + {:else if fieldType === 'datetime'} {:else if fieldType === 'boolean'} @@ -60,7 +77,7 @@ {#if subFieldType === 'db-table'} {:else} - {#each selectOptions ?? [] as option} {#if typeof option == 'string'}
@@ -300,13 +321,15 @@ />
- - - + {#snippet trigger()} + + + + {/snippet}
@@ -321,13 +344,15 @@ />
- - - + {#snippet trigger()} + + + + {/snippet}
@@ -342,13 +367,15 @@ />
- - - + {#snippet trigger()} + + + + {/snippet}
@@ -364,13 +391,15 @@
- - - + {#snippet trigger()} + + + + {/snippet}
@@ -401,7 +430,7 @@