windmill-components 1.522.0 → 1.531.0

package/package/components/apps/components/layout/AppDecisionTree.svelte

@@ -10,6 +10,7 @@ import { initOutput } from '../../editor/appUtils';
 import Badge from '../../../common/badge/Badge.svelte';
 import { getFirstNode, isDebugging } from '../../editor/settingsPanel/decisionTree/utils';
 import InputValue from '../helpers/InputValue.svelte';
+import { sendUserToast } from '../../../../toast';
 let { id, componentContainerHeight, customCss = undefined, render, nodes } = $props();
 let resolvedConditions = $state(createResolvedConditions());
 function createResolvedConditions() {
@@ -25,10 +26,12 @@ function createResolvedNext() {
         return acc;
     }, {});
 }
+let counter = $state(0);
 $effect(() => {
     nodes;
     resolvedConditions = untrack(() => createResolvedConditions());
     resolvedNext = untrack(() => createResolvedNext());
+    untrack(() => (counter += 1));
 });
 let everRender = $state(render);
 $effect.pre(() => {
@@ -75,6 +78,7 @@ function next() {
             return;
         }
     }
+    sendUserToast('No next node was an available option', true);
 }
 function updateFocusedGrid(nodeId) {
     currentNodeId = nodeId;
@@ -133,30 +137,37 @@ $effect.pre(() => {
 
 <!-- {JSON.stringify(resolvedConditions)}
 {JSON.stringify(resolvedNext)} -->
-{#if Object.keys(resolvedConditions).length === nodes.length}
-	{#each nodes ?? [] as node (node.id)}
-		{#each node.next ?? [] as next, conditionIndex}
-			{#if next.condition}
+
+{#key counter}
+	{#if Object.keys(resolvedConditions).length === nodes.length}
+		{#each nodes ?? [] as node (node.id)}
+			{#each node.next ?? [] as next, conditionIndex}
+				{#if next.condition}
+					<InputValue
+						key={`condition-${node.id}-${conditionIndex}`}
+						{id}
+						input={next.condition}
+						bind:value={resolvedConditions[node.id][conditionIndex]}
+						field={`condition-${node.id}-${conditionIndex}`}
+					/>
+				{/if}
+			{/each}
+		{/each}
+	{/if}
+
+	{#if Object.keys(resolvedConditions).length === nodes.length}
+		{#each nodes ?? [] as node (node.id)}
+			{#if node.allowed}
 				<InputValue
-					key={`condition-${node.id}-${conditionIndex}`}
+					key="allowed-{node.id}"
 					{id}
-					input={next.condition}
-					bind:value={resolvedConditions[node.id][conditionIndex]}
-					field={`condition-${node.id}-${conditionIndex}`}
+					input={node.allowed}
+					bind:value={resolvedNext[node.id]}
 				/>
 			{/if}
 		{/each}
-	{/each}
-{/if}
-
-{#if Object.keys(resolvedConditions).length === nodes.length}
-	{#each nodes ?? [] as node (node.id)}
-		{#if node.allowed}
-			<InputValue key="allowed" {id} input={node.allowed} bind:value={resolvedNext[node.id]} />
-		{/if}
-	{/each}
-{/if}
-
+	{/if}
+{/key}
 {#each Object.keys(css ?? {}) as key (key)}
 	<ResolveStyle
 		{id}
@@ -181,7 +192,7 @@ $effect.pre(() => {
 						style={css?.container?.style}
 						subGridId={`${id}-${i}`}
 						containerHeight={componentContainerHeight - 40}
-						on:focus={() => {
+						onFocus={() => {
 							if (!$connectingInput.opened) {
 								$selectedComponent = [id]
 							}

package/package/components/apps/components/layout/AppDrawer.svelte

@@ -138,7 +138,7 @@ let css = $state(initCss($app.css?.drawercomponent, customCss));
 								{id}
 								{containerHeight}
 								subGridId={`${id}-0`}
-								on:focus={() => {
+								onFocus={() => {
 									if (!$connectingInput.opened) {
 										$selectedComponent = [id]
 										$focusedGrid = {

package/package/components/apps/components/layout/AppList.svelte

@@ -94,8 +94,12 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 
 <InitializeComponent {id} />
 
+{#snippet nonRenderedPlaceholder()}
+	<ListWrapper disabled value={undefined} index={0}>
+		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+	</ListWrapper>
+{/snippet}
 <RunnableWrapper
-	hasChildrens
 	{render}
 	{outputs}
 	autoRefresh
@@ -104,6 +108,7 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 	bind:initializing
 	bind:result
 	bind:loading
+	{nonRenderedPlaceholder}
 >
 	{#if everRender}
 		<div
@@ -170,7 +175,7 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 									{id}
 									subGridId={`${id}-0`}
 									containerHeight={resolvedConfig.heightPx}
-									on:focus={() => {
+									onFocus={() => {
 										if (!$connectingInput.opened) {
 											$selectedComponent = [id]
 										}
@@ -181,9 +186,7 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 						</div>
 					{/each}
 				{:else}
-					<ListWrapper disabled value={undefined} index={0}>
-						<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-					</ListWrapper>
+					{@render nonRenderedPlaceholder?.()}
 					{#if !Array.isArray(result)}
 						<div class="text-center text-tertiary">Input data is not an array</div>
 					{/if}
@@ -239,8 +242,6 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 			{/if}
 		</div>
 	{:else if $app.subgrids}
-		<ListWrapper disabled value={undefined} index={0}>
-			<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-		</ListWrapper>
+		{@render nonRenderedPlaceholder?.()}
 	{/if}
 </RunnableWrapper>

package/package/components/apps/components/layout/AppModal.svelte

@@ -191,7 +191,7 @@ async function getMenuElements() {
 									{id}
 									{containerHeight}
 									subGridId={`${id}-0`}
-									on:focus={() => {
+									onFocus={() => {
 										if (!$connectingInput.opened) {
 											$selectedComponent = [id]
 											$focusedGrid = {

package/package/components/apps/components/layout/AppSplitpanes.svelte

@@ -11,7 +11,9 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentContainerHeight, customCss = undefined, horizontal = false, panes, render } = $props();
 const { app, focusedGrid, selectedComponent, componentControl, worldStore, connectingInput } = getContext('AppViewerContext');
 //used so that we can count number of outputs setup for first refresh
-initOutput($worldStore, id, {});
+initOutput($worldStore, id, {
+    selectedPaneIndex: 0
+});
 let everRender = $state(render);
 $effect.pre(() => {
     render && !everRender && (everRender = true);
@@ -97,13 +99,14 @@ $effect.pre(() => {
 									style={css?.container?.style}
 									subGridId={`${id}-${index}`}
 									containerHeight={horizontal ? undefined : componentContainerHeight - 8}
-									on:focus={() => {
+									onFocus={() => {
 										if (!$connectingInput.opened) {
 											$selectedComponent = [id]
 											$focusedGrid = {
 												parentComponentId: id,
 												subGridIndex: index
 											}
+											$worldStore.outputsById[id].selectedPaneIndex.set(index)
 										}
 									}}
 								/>

package/package/components/apps/components/layout/AppStepper.svelte

@@ -115,8 +115,13 @@ let directionClicked = $state(undefined);
 {/each}
 
 <InitializeComponent {id} />
+
+{#snippet nonRenderedPlaceholder()}
+	{#each tabs ?? [] as _res, i}
+		<SubGridEditor {id} visible={false} subGridId={`${id}-${i}`} />
+	{/each}
+{/snippet}
 <RunnableWrapper
-	hasChildrens
 	{recomputeIds}
 	{render}
 	bind:runnableComponent
@@ -129,6 +134,7 @@ let directionClicked = $state(undefined);
 	{outputs}
 	bind:result
 	errorHandledByComponent={true}
+	{nonRenderedPlaceholder}
 >
 	{#if everRender}
 		<div class="w-full overflow-auto">
@@ -160,7 +166,7 @@ let directionClicked = $state(undefined);
 							class={twMerge(css?.container?.class, 'wm-stepper')}
 							style={css?.container?.style}
 							containerHeight={componentContainerHeight - tabHeight - footerHeight}
-							on:focus={() => {
+							onFocus={() => {
 								if (!$connectingInput.opened) {
 									$selectedComponent = [id]
 									handleTabSelection()
@@ -231,8 +237,6 @@ let directionClicked = $state(undefined);
 			{/if}
 		</div>
 	{:else if $app.subgrids}
-		{#each tabs ?? [] as _res, i}
-			<SubGridEditor {id} visible={false} subGridId={`${id}-${i}`} />
-		{/each}
+		{@render nonRenderedPlaceholder?.()}
 	{/if}
 </RunnableWrapper>

package/package/components/apps/components/layout/AppTabs.svelte

@@ -209,7 +209,7 @@ let resolvedDisabledTabs = $state([]);
 								class={twMerge(css?.container?.class, 'wm-tabs-container')}
 								style={css?.container?.style}
 								containerHeight={componentContainerHeight - (titleBarHeight * tabs.length + 40)}
-								on:focus={() => {
+								onFocus={() => {
 									if (!$connectingInput.opened) {
 										$selectedComponent = [id]
 										handleTabSelection()
@@ -233,7 +233,7 @@ let resolvedDisabledTabs = $state([]);
 							containerHeight={resolvedConfig.tabsKind !== 'sidebar' && $mode !== 'preview'
 								? componentContainerHeight - tabHeight
 								: componentContainerHeight}
-							on:focus={() => {
+							onFocus={() => {
 								if (!$connectingInput.opened) {
 									$selectedComponent = [id]
 									handleTabSelection()

package/package/components/apps/editor/AppJobsDrawer.svelte

@@ -233,8 +233,8 @@ $effect(() => {
 												{#if job?.id}
 													<FlowStatusViewer
 														jobId={job?.id}
-														on:jobsLoaded={({ detail }) => {
-															job = detail
+														onJobsLoaded={({ job: newJob }) => {
+															job = newJob
 														}}
 													/>
 												{:else}

package/package/components/apps/editor/GridEditor.svelte

@@ -45,7 +45,7 @@ function handleFillHeight(id) {
     }
     $app = $app;
 }
-export function moveComponentBetweenSubgrids(componentId, parentComponentId, subGridIndex, position) {
+export function moveComponentBetweenSubgrids(componentId, subgrid, position) {
     // Find the component in the source subgrid
     const component = findGridItem($app, componentId);
     if (!component) {
@@ -60,14 +60,17 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
         $app.grid = $app.grid.filter((item) => item.id !== component?.id);
     }
     const gridItem = component;
-    insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), { parentComponentId: parentComponentId, subGridIndex: subGridIndex }, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), component.id, position, undefined, undefined, undefined, true);
+    insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), subgrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), component.id, position, undefined, undefined, undefined, true);
     // Update the app state
     $app = $app;
-    $selectedComponent = [parentComponentId];
-    $focusedGrid = {
-        parentComponentId,
-        subGridIndex
-    };
+    if (subgrid) {
+        $selectedComponent = [subgrid.parentComponentId];
+        $focusedGrid = subgrid;
+    }
+    else {
+        $selectedComponent = [componentId];
+        $focusedGrid = undefined;
+    }
 }
 </script>
 
@@ -144,32 +147,34 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 				allIdsInPath={$allIdsInPath}
 				selectedIds={$selectedComponent}
 				items={$app.grid}
-				on:redraw={(e) => {
+				onRedraw={(grid) => {
 					push(history, $app)
-					$app.grid = e.detail
+					$app.grid = grid
 				}}
 				root
-				on:dropped={(e) => {
-					const { id, overlapped, x, y } = e.detail
-
-					const overlappedComponent = findGridItem($app, overlapped)
+				onDropped={({ id, overlapped, x, y }) => {
+					const overlappedComponent = overlapped ? findGridItem($app, overlapped) : undefined
 
 					if (overlappedComponent && !isContainer(overlappedComponent.data.type)) {
 						return
 					}
 
-					if (!overlapped) {
-						return
-					}
-
 					if (id === overlapped) {
 						return
 					}
 
 					moveComponentBetweenSubgrids(
 						id,
-						overlapped,
-						subGridIndexKey(overlappedComponent?.data?.type, overlapped, $worldStore),
+						overlapped
+							? {
+									parentComponentId: overlapped,
+									subGridIndex: subGridIndexKey(
+										overlappedComponent?.data?.type,
+										overlapped,
+										$worldStore
+									)
+								}
+							: undefined,
 						{ x, y }
 					)
 				}}

package/package/components/apps/editor/GridEditor.svelte.d.ts

@@ -3,7 +3,10 @@ interface Props {
     policy: Policy;
 }
 declare const GridEditor: import("svelte").Component<Props, {
-    moveComponentBetweenSubgrids: (componentId: string, parentComponentId: string, subGridIndex: number, position?: {
+    moveComponentBetweenSubgrids: (componentId: string, subgrid: {
+        parentComponentId: string;
+        subGridIndex: number;
+    } | undefined, position?: {
         x: number;
         y: number;
     }) => void;

package/package/components/apps/editor/GridViewer.svelte

@@ -80,7 +80,7 @@ onMount(() => {
 			{@const left = (item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
 
 			<div
-				id={`wm-${item.id}-grid-item`}
+				id={`wm-component-${item.id}`}
 				class="svlt-grid-item"
 				style="width: {width}px; height:{height}px; {onTop
 					? 'z-index: 1000;'

package/package/components/apps/editor/SubGridEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
 import { push } from '../../../history.svelte';
 import { classNames } from '../../../utils';
-import { createEventDispatcher, getContext, onDestroy } from 'svelte';
+import { getContext, onDestroy } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { gridColumns, isFixed, toggleFixed } from '../gridUtils';
 import Grid from '../svelte-grid/Grid.svelte';
@@ -10,8 +10,7 @@ import Component from './component/Component.svelte';
 import ComponentWrapper from './component/ComponentWrapper.svelte';
 import GridViewer from './GridViewer.svelte';
 import GridEditorMenu from './GridEditorMenu.svelte';
-let { containerHeight = undefined, containerWidth = undefined, class: classes = '', style = '', noPadding = false, noYPadding = false, subGridId, visible = true, id, shouldHighlight = true } = $props();
-const dispatch = createEventDispatcher();
+let { containerHeight = undefined, containerWidth = undefined, class: classes = '', style = '', noPadding = false, noYPadding = false, subGridId, visible = true, id, shouldHighlight = true, onFocus } = $props();
 const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath, worldStore } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 let isActive = $state(false);
@@ -25,7 +24,7 @@ onDestroy(() => {
 });
 let highlight = $derived(id === $focusedGrid?.parentComponentId && shouldHighlight);
 const onpointerdown = (e) => {
-    dispatch('focus');
+    onFocus?.();
 };
 function selectComponent(e, id) {
     if (!$connectingInput.opened) {
@@ -113,7 +112,7 @@ export function moveToRoot(componentId, position) {
 			{#if $mode !== 'preview'}
 				<div
 					class={highlight
-						? `outline !outline-dashed outline-2 min-h-full ${
+						? `!outline-dashed outline-2 min-h-full ${
 								isActive && !$selectedComponent?.includes(id)
 									? 'outline-orange-600'
 									: 'outline-gray-400 dark:outline-gray-600'
@@ -124,19 +123,17 @@ export function moveToRoot(componentId, position) {
 					<Grid
 						allIdsInPath={$allIdsInPath}
 						items={$app.subgrids?.[subGridId] ?? []}
-						on:redraw={(e) => {
+						onRedraw={(grid) => {
 							push(editorContext?.history, $app)
 							if ($app.subgrids) {
-								$app.subgrids[subGridId] = e.detail
+								$app.subgrids[subGridId] = grid
 							}
 						}}
 						selectedIds={$selectedComponent}
 						scroller={container}
 						parentWidth={$parentWidth - 17}
 						{containerWidth}
-						on:dropped={(e) => {
-							const { id, overlapped, x, y } = e.detail
-
+						onDropped={({ id, overlapped, x, y }) => {
 							if (!overlapped) {
 								moveToRoot(id, { x, y })
 							} else {
@@ -152,7 +149,6 @@ export function moveToRoot(componentId, position) {
 								if (id === overlapped) {
 									return
 								}
-
 								moveComponentBetweenSubgrids(
 									id,
 									overlapped,

package/package/components/apps/editor/SubGridEditor.svelte.d.ts

@@ -9,25 +9,9 @@ interface Props {
     visible?: boolean;
     id: string;
     shouldHighlight?: boolean;
+    onFocus?: () => void;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SubGridEditor: $$__sveltets_2_IsomorphicComponent<Props, {
-    focus: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+declare const SubGridEditor: import("svelte").Component<Props, {
     moveComponentBetweenSubgrids: (componentId: string, parentComponentId: string, subGridIndex: number, position?: {
         x: number;
         y: number;
@@ -37,5 +21,5 @@ declare const SubGridEditor: $$__sveltets_2_IsomorphicComponent<Props, {
         y: number;
     }) => void;
 }, "">;
-type SubGridEditor = InstanceType<typeof SubGridEditor>;
+type SubGridEditor = ReturnType<typeof SubGridEditor>;
 export default SubGridEditor;

package/package/components/apps/editor/appUtils.js

@@ -1,6 +1,6 @@
 import { ccomponents, components, getRecommendedDimensionsByComponent } from './component';
 import { gridColumns } from '../gridUtils';
-import { allItems } from '../utils';
+import { allItems, processSubcomponents } from '../utils';
 import { get } from 'svelte/store';
 import { deepMergeWithPriority } from '../../../utils';
 import { sendUserToast } from '../../../toast';
@@ -453,43 +453,11 @@ export function copyComponent(app, item, parentGrid, subgrids, alreadyVisited) {
         alreadyVisited.push(item.id);
     }
     const newItem = insertNewGridItem(app, (id) => {
-        if (item.data.type === 'tablecomponent') {
-            return {
-                ...item.data,
-                id,
-                actionButtons: item.data.actionButtons.map((x) => ({
-                    ...x,
-                    id: x.id.replace(`${item.id}_`, `${id}_`)
-                })) ?? []
-            };
-        }
-        else if (item.data.type === 'aggridcomponent' ||
-            item.data.type === 'aggridcomponentee' ||
-            item.data.type === 'dbexplorercomponent' ||
-            item.data.type === 'aggridinfinitecomponent' ||
-            item.data.type === 'aggridinfinitecomponentee') {
-            return {
-                ...item.data,
-                id,
-                actionButtons: (item.data.actions ?? []).map((x) => ({
-                    ...x,
-                    id: x.id.replace(`${item.id}_`, `${id}_`)
-                })) ?? []
-            };
-        }
-        else if (item.data.type === 'menucomponent') {
-            return {
-                ...item.data,
-                id,
-                menuItems: item.data.menuItems.map((x) => ({
-                    ...x,
-                    id: x.id.replace(`${item.id}_`, `${id}_`)
-                })) ?? []
-            };
-        }
-        else {
-            return { ...item.data, id };
-        }
+        let newComponent = { ...item.data, id };
+        processSubcomponents(newComponent, (c) => {
+            c.id = c.id.replace(item.id + '_', id + '_');
+        });
+        return newComponent;
     }, parentGrid, Object.fromEntries(gridColumns.map((column) => [column, item[column]])));
     for (let i = 0; i < (item?.data?.numberOfSubgrids ?? 0); i++) {
         subgrids[`${item.id}-${i}`].forEach((subgridItem) => {
@@ -501,19 +469,9 @@ export function copyComponent(app, item, parentGrid, subgrids, alreadyVisited) {
 export function getAllSubgridsAndComponentIds(app, component) {
     const subgrids = [];
     let components = [component.id];
-    if (component.type === 'tablecomponent') {
-        components.push(...component.actionButtons?.map((x) => x.id));
-    }
-    if (component.type === 'aggridcomponent' ||
-        component.type === 'aggridcomponentee' ||
-        component.type === 'dbexplorercomponent' ||
-        component.type === 'aggridinfinitecomponent' ||
-        component.type === 'aggridinfinitecomponentee') {
-        components.push(...(component.actions?.map((x) => x.id) ?? []));
-    }
-    if (component.type === 'menucomponent') {
-        components.push(...component.menuItems?.map((x) => x.id));
-    }
+    processSubcomponents(component, (c) => {
+        components.push(c.id);
+    });
     if (app.subgrids && component.numberOfSubgrids) {
         for (let i = 0; i < component.numberOfSubgrids; i++) {
             const key = `${component.id}-${i}`;
@@ -534,21 +492,11 @@ export function getAllGridItems(app) {
     return app.grid
         .concat(Object.values(app.subgrids ?? {}).flat())
         .map((x) => {
-        if (x?.data?.type === 'tablecomponent') {
-            return [x, ...x?.data?.actionButtons?.map((x) => ({ data: x, id: x.id }))];
-        }
-        else if ((x?.data?.type === 'aggridcomponent' ||
-            x?.data?.type === 'aggridcomponentee' ||
-            x?.data?.type === 'dbexplorercomponent' ||
-            x?.data?.type === 'aggridinfinitecomponent' ||
-            x?.data?.type === 'aggridinfinitecomponentee') &&
-            Array.isArray(x?.data?.actions)) {
-            return [x, ...x?.data?.actions?.map((x) => ({ data: x, id: x.id }))];
-        }
-        else if (x?.data?.type === 'menucomponent') {
-            return [x, ...x?.data?.menuItems?.map((x) => ({ data: x, id: x.id }))];
-        }
-        return [x];
+        let r = [];
+        processSubcomponents(x.data, (c) => {
+            r.push({ data: c, id: c.id });
+        });
+        return [x, ...r];
     })
         .flat();
 }
@@ -929,10 +877,11 @@ export function isContainer(type) {
 export function subGridIndexKey(type, id, world) {
     switch (type) {
         case 'containercomponent':
-        case 'verticalsplitpanescomponent':
-        case 'horizontalsplitpanescomponent':
         case 'listcomponent':
             return 0;
+        case 'verticalsplitpanescomponent':
+        case 'horizontalsplitpanescomponent':
+            return world?.outputsById?.[id]?.selectedPaneIndex?.peak() ?? 0;
         case 'tabscomponent': {
             return world?.outputsById?.[id]?.selectedTabIndex?.peak() ?? 0;
         }