windmill-components 1.60.4 → 1.70.0

package/components/apps/editor/GridEditor.svelte

@@ -1,20 +1,27 @@
-<script>import { getContext } from 'svelte';
-import Grid from 'svelte-grid';
-import ComponentEditor from './ComponentEditor.svelte';
+<script>import { getContext, afterUpdate } from 'svelte';
+import Grid from '@windmill-labs/svelte-grid';
 import { classNames } from '../../../utils';
 import { columnConfiguration, disableDrag, enableDrag, isFixed, toggleFixed } from '../gridUtils';
+import { twMerge } from 'tailwind-merge';
 import RecomputeAllComponents from './RecomputeAllComponents.svelte';
+import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
+import Component from './component/Component.svelte';
 export let policy;
-const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents, lazyGrid, summary } = getContext('AppEditorContext');
+const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents, lazyGrid, summary, focusedGrid } = getContext('AppEditorContext');
 // The drag is disabled when the user is connecting an input
+// or when the user is previewing the app
+// or when the focused grid is a subgrid
 $: setAllDrags($mode === 'preview' || $connectingInput.opened);
 function setAllDrags(enable) {
-    if (enable) {
-        $app.grid.map((gridItem) => disableDrag(gridItem));
-    }
-    else {
-        $app.grid.map((gridItem) => enableDrag(gridItem));
-    }
+    const fct = enable ? disableDrag : enableDrag;
+    $app.grid.map((gridItem) => {
+        const disabledGridItem = fct(gridItem);
+        if (disabledGridItem.data.subGrids) {
+            disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map((subgrid) => subgrid?.map((subgridItem) => fct(subgridItem)) ?? []);
+        }
+        return disabledGridItem;
+    });
+    Object.values($app.subgrids ?? {}).map((subgrid) => subgrid?.map((subgridItem) => fct(subgridItem)) ?? []);
 }
 function removeGridElement(component) {
     if (component) {
@@ -47,6 +54,7 @@ function removeGridElement(component) {
 function selectComponent(id) {
     if (!$connectingInput.opened) {
         $selectedComponent = id;
+        $focusedGrid = undefined;
     }
 }
 $: $app.grid && recomputeLazyGrid();
@@ -69,29 +77,52 @@ const onpointerdown = () => {
 const onpointerup = () => {
     pointerdown = false;
 };
+afterUpdate(() => {
+    if ($selectedComponent) {
+        const parents = document.querySelectorAll('.svlt-grid-item');
+        parents.forEach((parent) => {
+            const hasActiveChild = !!parent.querySelector('.active-grid-item');
+            if (hasActiveChild) {
+                parent.style.setProperty('z-index', '100');
+            }
+            else {
+                parent.style.removeProperty('z-index');
+            }
+        });
+    }
+});
 </script>
 
-<div class="pb-2 relative z-20">
+<div class="relative w-full z-20 overflow-visible">
 	<div
-		class="w-full flex justify-between border-b {$connectingInput?.opened
+		class="w-full sticky  top-0 flex justify-between border-l border-r border-b {$connectingInput?.opened
 			? ''
-			: 'bg-gray-50 '}px-4 py-2 items-center gap-4"
+			: 'bg-gray-50 '} px-4 py-2 items-center gap-4"
+		style="z-index: 1000;"
 	>
 		<h2 class="truncate">{$summary}</h2>
 		{#if !$connectingInput.opened}
 			<RecomputeAllComponents />
 		{/if}
-		<div class="text-2xs text-gray-600"
-			>{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}</div
-		>
+		<div class="text-2xs text-gray-600">
+			{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
+		</div>
 	</div>
+
 	<div
-		class="px-4 pt-4 {$connectingInput?.opened ? '' : ''}"
+		style={$app.css?.['app']?.['grid']?.style}
+		class={twMerge('px-4 pt-4 pb-2  overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
 		on:pointerdown={onpointerdown}
 		on:pointerleave={onpointerup}
 		on:pointerup={onpointerup}
+		on:click={() => {
+			$selectedComponent = undefined
+			$focusedGrid = undefined
+		}}
 	>
 		<Grid
+			onTopId={$selectedComponent}
+			fillSpace={false}
 			bind:items={$app.grid}
 			let:dataItem
 			rowHeight={36}
@@ -103,13 +134,11 @@ const onpointerup = () => {
 				{#if gridComponent.data.id === dataItem.data.id}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					{#if $connectingInput.opened}
-						{#if $connectingInput.opened}
-							<div
-								on:pointerenter={() => ($connectingInput.hoveredComponent = gridComponent.data.id)}
-								on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
-								class="absolute  w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
-							/>
-						{/if}
+						<div
+							on:pointerenter={() => ($connectingInput.hoveredComponent = gridComponent.data.id)}
+							on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
+							class="absolute  w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+						/>
 						<div
 							style="transform: translate(-50%, -50%);"
 							class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
@@ -118,17 +147,17 @@ const onpointerup = () => {
 					{/if}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
-						on:pointerdown={() => {
-							selectComponent(dataItem.data.id)
-						}}
+						on:click|stopPropagation
+						on:pointerdown={() => selectComponent(dataItem.data.id)}
 						class={classNames(
-							'h-full w-full flex justify-center align-center items-center',
+							'h-full w-full center-center',
+							$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
 							gridComponent.data.card ? 'border border-gray-100' : ''
 						)}
 					>
-						<ComponentEditor
+						<Component
 							{pointerdown}
-							bind:component={gridComponent.data}
+							bind:pComponent={gridComponent.data}
 							selected={$selectedComponent === dataItem.data.id}
 							locked={isFixed(gridComponent)}
 							on:delete={() => removeGridElement(gridComponent.data)}
@@ -146,10 +175,24 @@ const onpointerup = () => {
 	</div>
 </div>
 
-<style>
+{#if $app.hiddenInlineScripts}
+	{#each $app.hiddenInlineScripts as script, index}
+		{#if script}
+			<HiddenComponent
+				id={`bg_${index}`}
+				inlineScript={script.inlineScript}
+				name={script.name}
+				bind:fields={script.fields}
+				bind:staticOutputs={$staticOutputs[`bg_${index}`]}
+			/>
+		{/if}
+	{/each}
+{/if}
+
+<style global>
 	:global(.svlt-grid-shadow) {
 		/* Back shadow */
-		background: rgb(147 197 253) !important;
+		background: #93c4fdd0 !important;
 	}
 	:global(.svlt-grid-active) {
 		opacity: 1 !important;

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

@@ -5,6 +5,8 @@ declare const __propDef: {
         policy: Policy;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/editor/SettingsPanel.svelte

@@ -1,13 +1,41 @@
 <script>import { getContext } from 'svelte';
+import { allItems, allItemsWithParent } from '../utils';
+import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
+import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
 import TablePanel from './TablePanel.svelte';
-const { selectedComponent, lazyGrid } = getContext('AppEditorContext');
+const { selectedComponent, app } = getContext('AppEditorContext');
 </script>
 
-{#each $lazyGrid as gridItem (gridItem.data.id)}
+{#each $app.grid as gridItem (gridItem.data.id)}
 	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel bind:component={gridItem.data} />
+		<ComponentPanel parent={undefined} bind:component={gridItem.data} />
 	{:else if gridItem.data.type === 'tablecomponent'}
 		<TablePanel bind:component={gridItem.data} />
 	{/if}
 {/each}
+
+{#if $app.subgrids}
+	{#each Object.keys($app.subgrids ?? {}) as key (key)}
+		{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
+			{#if gridItem.data.id === $selectedComponent}
+				<ComponentPanel parent={key} bind:component={gridItem.data} />
+			{:else if gridItem.data.type === 'tablecomponent'}
+				<TablePanel bind:component={gridItem.data} />
+			{/if}
+		{/each}
+	{/each}
+{/if}
+
+{#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
+	{#if $selectedComponent === `bg_${index}`}
+		<PanelSection title={`Background script inputs`}>
+			<InputsSpecsEditor
+				id={`bg_${index}`}
+				shouldCapitalize={false}
+				bind:inputSpecs={script.fields}
+				userInputEnabled={false}
+			/>
+		</PanelSection>
+	{/if}
+{/each}

package/components/apps/editor/SubGridEditor.svelte

@@ -0,0 +1,111 @@
+<script>import { classNames } from '../../../utils';
+import { createEventDispatcher, getContext } from 'svelte';
+import Grid from '@windmill-labs/svelte-grid';
+import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
+import Component from './component/Component.svelte';
+export let containerHeight;
+export let noPadding = false;
+//export let id: string
+export let subGrid = [];
+export let visible = true;
+const dispatch = createEventDispatcher();
+const { app, connectingInput, selectedComponent, focusedGrid } = getContext('AppEditorContext');
+let pointerdown = false;
+let onComponent = undefined;
+const onpointerdown = (e) => {
+    if (onComponent === undefined) {
+        dispatch('focus');
+    }
+    else {
+        onComponent = undefined;
+    }
+    pointerdown = true;
+};
+const onpointerup = () => {
+    pointerdown = false;
+};
+function selectComponent(id) {
+    onComponent = id;
+    if (!$connectingInput.opened) {
+        $selectedComponent = id;
+        /*
+        $focusedGrid = {
+            parentComponentId: parentId,
+            subGridIndex: index
+        }
+        */
+    }
+}
+function lock(gridComponent) {
+    let fComponent = $app.grid.find((c) => c.id === gridComponent.id);
+    if (fComponent) {
+        fComponent = toggleFixed(fComponent);
+    }
+}
+// @ts-ignore
+let container;
+</script>
+
+<div class="relative w-full subgrid {visible ? 'visible' : 'invisible h-0 '}" bind:this={container}>
+	<div
+		class:px-2={!noPadding}
+		class="py-2 overflow-auto  {$connectingInput?.opened ? '' : ''}"
+		on:pointerdown|stopPropagation={onpointerdown}
+		on:pointerleave={onpointerup}
+		on:pointerup={onpointerup}
+		style="height: {containerHeight}px;"
+	>
+		<div>
+			<Grid
+				bind:items={subGrid}
+				let:dataItem
+				rowHeight={36}
+				cols={columnConfiguration}
+				fastStart={true}
+				gap={[4, 2]}
+				scroller={container}
+			>
+				{#each subGrid as gridComponent (gridComponent.id)}
+					{#if gridComponent.data.id === dataItem.data.id}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						{#if $connectingInput.opened}
+							{#if $connectingInput.opened}
+								<div
+									on:pointerenter={() =>
+										($connectingInput.hoveredComponent = gridComponent.data.id)}
+									on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
+									class="absolute w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+								/>
+							{/if}
+							<div
+								style="transform: translate(-50%, -50%);"
+								class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
+							>
+								{dataItem.data.id}
+							</div>
+						{/if}
+
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<div
+							on:pointerdown={() => selectComponent(dataItem.data.id)}
+							class={classNames(
+								'h-full w-full center-center',
+								$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
+								gridComponent.data.card ? 'border border-gray-100' : '',
+								'top-0'
+							)}
+						>
+							<Component
+								{pointerdown}
+								bind:pComponent={gridComponent.data}
+								selected={$selectedComponent === dataItem.data.id}
+								locked={isFixed(gridComponent)}
+								on:lock={() => lock(gridComponent)}
+							/>
+						</div>
+					{/if}
+				{/each}
+			</Grid>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        containerHeight: number;
+        noPadding?: boolean | undefined;
+        subGrid?: FilledItem<{
+            data: import("./component").AppComponent;
+            id: string;
+        }>[] | undefined;
+        visible?: boolean | undefined;
+    };
+    events: {
+        focus: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SubGridEditorProps = typeof __propDef.props;
+export type SubGridEditorEvents = typeof __propDef.events;
+export type SubGridEditorSlots = typeof __propDef.slots;
+export default class SubGridEditor extends SvelteComponentTyped<SubGridEditorProps, SubGridEditorEvents, SubGridEditorSlots> {
+}
+export {};

package/components/apps/editor/TablePanel.svelte

@@ -7,6 +7,8 @@ const { selectedComponent } = getContext('AppEditorContext');
 {#each component.actionButtons as actionButton (actionButton.id)}
 	{#if actionButton.id === $selectedComponent}
 		<ComponentPanel
+			parent={undefined}
+			noGrid
 			rowColumns
 			bind:component={actionButton}
 			onDelete={() => {

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TableComponent } from '../types';
+import type { TableComponent } from './component';
 declare const __propDef: {
     props: {
         component: TableComponent;

package/components/apps/editor/appUtils.d.ts

@@ -0,0 +1,9 @@
+import type { App, FocusedGrid, GridItem } from '../types';
+import { type AppComponent } from './component';
+export declare function findGridItem(app: App, id: string): GridItem | undefined;
+export declare function getNextGridItemId(app: App): string;
+export declare function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem;
+export declare function insertNewGridItem(app: App, data: AppComponent, focusedGrid: FocusedGrid | undefined, keepId?: boolean): string;
+export declare function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]];
+export declare function deleteGridItem(app: App, component: AppComponent, parent: string | undefined): string[];
+export declare function duplicateGridItem(app: App, parent: string | undefined, id: string): string | undefined;

package/components/apps/editor/appUtils.js

@@ -0,0 +1,141 @@
+import { getNextId } from '../../flows/flowStateUtils';
+import { Component, getRecommendedDimensionsByComponent } from './component';
+import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper';
+import { gridColumns } from '../gridUtils';
+import { allItems } from '../utils';
+function findGridItemById(root, subGrids, id) {
+    for (const gridItem of root) {
+        if (gridItem.id === id) {
+            return gridItem;
+        }
+        if (subGrids) {
+            const numberOfSubgrids = gridItem.data.numberOfSubgrids;
+            if (numberOfSubgrids) {
+                for (let i = 0; i < numberOfSubgrids; i++) {
+                    const subgrid = subGrids[`${gridItem.id}-${i}`] ?? [];
+                    const found = findGridItemById(subgrid, subGrids, id);
+                    if (found) {
+                        return found;
+                    }
+                }
+            }
+        }
+    }
+    return undefined;
+}
+export function findGridItem(app, id) {
+    return findGridItemById(app.grid, app.subgrids, id);
+}
+export function getNextGridItemId(app) {
+    const subgridsKeys = allItems(app.grid, app.subgrids).map((x) => x.id);
+    const withoutDash = subgridsKeys.map((element) => element.split('-')[0]);
+    const id = getNextId([...new Set(withoutDash)]);
+    return id;
+}
+export function createNewGridItem(grid, id, data) {
+    const appComponent = data;
+    appComponent.id = id;
+    const newComponent = {
+        fixed: false,
+        resizable: true,
+        draggable: true,
+        customDragger: false,
+        customResizer: false,
+        x: 0,
+        y: 0
+    };
+    let newData = JSON.parse(JSON.stringify(appComponent));
+    const newItem = {
+        data: newData,
+        id: id
+    };
+    gridColumns.forEach((column) => {
+        const rec = getRecommendedDimensionsByComponent(appComponent.type, column);
+        newItem[column] = {
+            ...newComponent,
+            min: { w: 1, h: 1 },
+            max: { w: column, h: 100 },
+            w: rec.w,
+            h: rec.h
+        };
+        const position = gridHelp.findSpace(newItem, grid, column);
+        newItem[column] = { ...newItem[column], ...position };
+    });
+    return newItem;
+}
+export function insertNewGridItem(app, data, focusedGrid, keepId) {
+    const id = keepId ? data.id : getNextGridItemId(app);
+    if (!app.subgrids) {
+        app.subgrids = {};
+    }
+    if (!focusedGrid) {
+        const newItem = createNewGridItem(app.grid, id, data);
+        app.grid.push(newItem);
+    }
+    else {
+        const { parentComponentId, subGridIndex } = focusedGrid;
+        const key = `${parentComponentId}-${subGridIndex ?? 0}`;
+        const subGrid = app.subgrids[key] ?? [];
+        subGrid.push(createNewGridItem(subGrid, id, data));
+        app.subgrids[key] = subGrid;
+    }
+    for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
+        app.subgrids[`${id}-${i}`] = [];
+    }
+    return id;
+}
+export function getAllSubgridsAndComponentIds(app, component) {
+    const subgrids = [];
+    let components = [component.id];
+    if (app.subgrids && component.numberOfSubgrids) {
+        for (let i = 0; i < component.numberOfSubgrids; i++) {
+            const key = `${component.id}-${i}`;
+            const subgrid = app.subgrids[key];
+            if (subgrid) {
+                subgrids.push(key);
+                for (const item of subgrid) {
+                    let [recSubgrids, recComponents] = getAllSubgridsAndComponentIds(app, item.data);
+                    subgrids.push(...recSubgrids);
+                    components.push(...recComponents);
+                }
+            }
+        }
+    }
+    return [subgrids, components];
+}
+export function deleteGridItem(app, component, parent) {
+    let [subgrids, components] = getAllSubgridsAndComponentIds(app, component);
+    if (app.subgrids) {
+        subgrids.forEach((id) => {
+            delete app.subgrids[id];
+        });
+    }
+    if (!parent) {
+        let index = app.grid.findIndex((x) => x.id == component.id);
+        if (index > -1) {
+            app.grid.splice(index, 1);
+        }
+    }
+    else {
+        let grid = app.subgrids[parent];
+        let index = grid.findIndex((x) => x.id == component.id);
+        if (index > -1) {
+            grid.splice(index, 1);
+        }
+    }
+    return components;
+}
+export function duplicateGridItem(app, parent, id) {
+    const gridItem = findGridItem(app, id);
+    if (gridItem) {
+        const newId = getNextGridItemId(app);
+        const newItem = JSON.parse(JSON.stringify(gridItem));
+        newItem.id = newId;
+        newItem.data.id = newId;
+        let focusedGrid = parent
+            ? { parentComponentId: parent.split('-')[0], subGridIndex: Number(parent.split('-')[1]) }
+            : undefined;
+        return insertNewGridItem(app, newItem.data, focusedGrid);
+    }
+    return undefined;
+}