windmill-components 1.309.7 → 1.339.2

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

@@ -4,10 +4,11 @@ import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
 import Grid from '../svelte-grid/Grid.svelte';
-import { expandGriditem, findGridItem, selectId } from './appUtils';
+import { expandGriditem, findGridItem, maxHeight, selectId } from './appUtils';
 import Component from './component/Component.svelte';
 import ComponentWrapper from './component/ComponentWrapper.svelte';
 import GridViewer from './GridViewer.svelte';
+import GridEditorMenu from './GridEditorMenu.svelte';
 export let containerHeight = undefined;
 export let containerWidth = undefined;
 let classes = '';
@@ -44,6 +45,7 @@ function lock(dataItem) {
     $app = $app;
 }
 let container = undefined;
+$: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $breakpoint);
 </script>
 
 <div
@@ -83,9 +85,8 @@ let container = undefined;
 					}}
 					selectedIds={$selectedComponent}
 					let:dataItem
-					rowHeight={36}
+					let:hidden
 					cols={columnConfiguration}
-					gap={[4, 2]}
 					scroller={container}
 					parentWidth={$parentWidth - 17}
 					{containerWidth}
@@ -99,31 +100,44 @@ let container = undefined;
 							'top-0'
 						)}
 					>
-						<Component
-							render={visible}
-							component={dataItem.data}
-							selected={Boolean($selectedComponent?.includes(dataItem.id))}
-							locked={isFixed(dataItem)}
-							on:lock={() => lock(dataItem)}
-							on:expand={() => {
-								const parentGridItem = findGridItem($app, id)
+						<GridEditorMenu id={dataItem.id}>
+							<Component
+								{hidden}
+								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+								render={visible}
+								component={dataItem.data}
+								selected={Boolean($selectedComponent?.includes(dataItem.id))}
+								locked={isFixed(dataItem)}
+								on:lock={() => lock(dataItem)}
+								on:expand={() => {
+									const parentGridItem = findGridItem($app, id)
 
-								if (!parentGridItem) {
-									return
-								}
+									if (!parentGridItem) {
+										return
+									}
 
-								$selectedComponent = [dataItem.id]
-								push(editorContext?.history, $app)
+									$selectedComponent = [dataItem.id]
+									push(editorContext?.history, $app)
 
-								expandGriditem(
-									$app.subgrids?.[subGridId] ?? [],
-									dataItem.id,
-									$breakpoint,
-									parentGridItem
-								)
-								$app = $app
-							}}
-						/>
+									expandGriditem(
+										$app.subgrids?.[subGridId] ?? [],
+										dataItem.id,
+										$breakpoint,
+										parentGridItem
+									)
+									$app = $app
+								}}
+								on:fillHeight={() => {
+									const gridItem = findGridItem($app, dataItem.id)
+									const b = $breakpoint === 'sm' ? 3 : 12
+
+									if (gridItem?.[b]) {
+										gridItem[b].fullHeight = !gridItem[b].fullHeight
+									}
+									$app = $app
+								}}
+							/>
+						</GridEditorMenu>
 					</ComponentWrapper>
 				</Grid>
 			</div>
@@ -132,11 +146,12 @@ let container = undefined;
 				allIdsInPath={$allIdsInPath}
 				items={$app.subgrids?.[subGridId] ?? []}
 				let:dataItem
-				rowHeight={36}
+				let:hidden
 				cols={columnConfiguration}
-				gap={[4, 2]}
+				breakpoint={$breakpoint}
 				parentWidth={$parentWidth - 17}
 				{containerWidth}
+				{maxRow}
 			>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
@@ -144,10 +159,12 @@ let container = undefined;
 					class={classNames('h-full w-full center-center', 'top-0')}
 				>
 					<Component
+						fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
 						render={visible}
 						component={dataItem.data}
 						selected={Boolean($selectedComponent?.includes(dataItem.id))}
 						locked={isFixed(dataItem)}
+						{hidden}
 					/>
 				</div>
 			</GridViewer>

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

@@ -3,7 +3,7 @@ import type { App, BaseAppComponent, ConnectingInput, EditorBreakpoint, FocusedG
 import { components, type AppComponent, type BaseComponent, type InitialAppComponent, type TypedComponent } from './component';
 import type { Output, World } from '../rx';
 import type { FilledItem } from '../svelte-grid/types';
-import type { StaticAppInput, EvalAppInput, EvalV2AppInput, StaticAppInputOnDemand } from '../inputType';
+import type { StaticAppInput, EvalAppInput, EvalV2AppInput, StaticAppInputOnDemand, AppInputs } from '../inputType';
 import { type Writable } from 'svelte/store';
 export declare function findComponentSettings(app: App, id: string | undefined): {
     item: GridItem;
@@ -72,4 +72,9 @@ export declare function expandGriditem(grid: GridItem[], id: string, $breakpoint
 export declare function sortGridItemsPosition<T>(gridItems: FilledItem<T>[], width: number): FilledItem<T>[];
 export declare function connectInput(connectingInput: ConnectingInput, componentId: string, path: string, componentType?: TypedComponent['type']): ConnectingInput;
 export declare function recursivelyFilterKeyInJSON(json: object, search: string, extraSearch?: string | undefined): object;
+export declare function collectOneOfFields(fields: AppInputs, app: App): Record<string, any[]>;
+export declare const ROW_HEIGHT = 36;
+export declare const ROW_GAP_Y = 2;
+export declare const ROW_GAP_X = 4;
+export declare function maxHeight(grid: GridItem[], windowHeight: number, breakpoint?: EditorBreakpoint): number;
 export {};

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

@@ -43,7 +43,9 @@ export function dfs(grid, id, subgrids) {
         }
         else if ((item.data.type == 'aggridcomponent' ||
             item.data.type == 'aggridcomponentee' ||
-            item.data.type == 'dbexplorercomponent') &&
+            item.data.type == 'dbexplorercomponent' ||
+            item.data.type == 'aggridinfinitecomponent' ||
+            item.data.type == 'aggridinfinitecomponentee') &&
             item.data.actions?.find((x) => id == x.id)) {
             return [item.id, id];
         }
@@ -128,7 +130,9 @@ export function allsubIds(app, parentId) {
             }
             if ((item.data.type === 'aggridcomponent' ||
                 item.data.type === 'aggridcomponentee' ||
-                item.data.type === 'dbexplorercomponent') &&
+                item.data.type === 'dbexplorercomponent' ||
+                item.data.type === 'aggridinfinitecomponent' ||
+                item.data.type === 'aggridinfinitecomponentee') &&
                 Array.isArray(item.data.actions)) {
                 subIds.push(...item.data.actions?.map((x) => x.id));
             }
@@ -150,7 +154,9 @@ export function getNextGridItemId(app) {
         }
         else if ((x.data.type === 'aggridcomponent' ||
             x.data.type === 'aggridcomponentee' ||
-            x.data.type === 'dbexplorercomponent') &&
+            x.data.type === 'dbexplorercomponent' ||
+            x.data.type === 'aggridinfinitecomponent' ||
+            x.data.type === 'aggridinfinitecomponentee') &&
             Array.isArray(x.data.actions)) {
             return [x.id, ...x.data.actions.map((x) => x.id)];
         }
@@ -181,7 +187,8 @@ export function createNewGridItem(grid, id, data, columns) {
     const newComponent = {
         fixed: false,
         x: 0,
-        y: 0
+        y: 0,
+        fullHeight: false
     };
     let newData = JSON.parse(JSON.stringify(data));
     newData.id = id;
@@ -333,7 +340,9 @@ export function copyComponent(app, item, parentGrid, subgrids, alreadyVisited) {
         }
         else if (item.data.type === 'aggridcomponent' ||
             item.data.type === 'aggridcomponentee' ||
-            item.data.type === 'dbexplorercomponent') {
+            item.data.type === 'dbexplorercomponent' ||
+            item.data.type === 'aggridinfinitecomponent' ||
+            item.data.type === 'aggridinfinitecomponentee') {
             return {
                 ...item.data,
                 id,
@@ -372,7 +381,9 @@ export function getAllSubgridsAndComponentIds(app, component) {
     }
     if (component.type === 'aggridcomponent' ||
         component.type === 'aggridcomponentee' ||
-        component.type === 'dbexplorercomponent') {
+        component.type === 'dbexplorercomponent' ||
+        component.type === 'aggridinfinitecomponent' ||
+        component.type === 'aggridinfinitecomponentee') {
         components.push(...(component.actions?.map((x) => x.id) ?? []));
     }
     if (component.type === 'menucomponent') {
@@ -403,7 +414,9 @@ export function getAllGridItems(app) {
         }
         else if ((x?.data?.type === 'aggridcomponent' ||
             x?.data?.type === 'aggridcomponentee' ||
-            x?.data?.type === 'dbexplorercomponent') &&
+            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 }))];
         }
@@ -629,3 +642,68 @@ export function recursivelyFilterKeyInJSON(json, search, extraSearch) {
     });
     return filteredJSON;
 }
+export function collectOneOfFields(fields, app) {
+    return Object.fromEntries(Object.entries(fields ?? {})
+        .filter(([k, v]) => v.type == 'evalv2')
+        .map(([k, v]) => {
+        let field = v;
+        if (!field.connections || field.connections.length !== 1) {
+            return [k, undefined];
+        }
+        const c = field.connections[0];
+        const gridItem = findGridItem(app, c.componentId);
+        if (field.expr !== c.componentId + '.' + c.id) {
+            return [k, undefined];
+        }
+        if (gridItem) {
+            const c = gridItem.data;
+            if (c) {
+                if (c.type === 'resourceselectcomponent' ||
+                    c.type === 'selectcomponent' ||
+                    c.type === 'multiselectcomponent' ||
+                    c.type === 'multiselectcomponentv2') {
+                    if ((c.type === 'selectcomponent' ||
+                        c.type === 'multiselectcomponent' ||
+                        c.type === 'multiselectcomponentv2') &&
+                        c.configuration?.create?.type === 'static' &&
+                        c.configuration?.create?.value === true) {
+                        return [k, undefined];
+                    }
+                    if (c.configuration?.items?.type === 'static') {
+                        const items = c.configuration.items.value;
+                        if (items && Array.isArray(items)) {
+                            if (c.type === 'multiselectcomponent' || c.type === 'multiselectcomponentv2') {
+                                return [k, items];
+                            }
+                            else {
+                                const options = items
+                                    .filter((item) => item && typeof item === 'object' && 'value' in item && item.value)
+                                    .map((item) => item.value);
+                                return [k, options];
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return [k, undefined];
+    })
+        .filter(([k, v]) => v !== undefined));
+}
+export const ROW_HEIGHT = 36;
+export const ROW_GAP_Y = 2;
+export const ROW_GAP_X = 4;
+export function maxHeight(grid, windowHeight, breakpoint = 'lg') {
+    const totalRowHeight = ROW_HEIGHT + ROW_GAP_Y;
+    let maxRows = Math.floor((windowHeight - ROW_GAP_Y) / totalRowHeight);
+    if (!grid.length) {
+        return maxRows;
+    }
+    const breakpointKey = breakpoint === 'sm' ? 3 : 12;
+    const maxRowPerGrid = grid.reduce((max, item) => {
+        const y = item[breakpointKey].y;
+        const h = item[breakpointKey].h;
+        return Math.max(max, y + h);
+    }, 0);
+    return Math.max(maxRowPerGrid, maxRows);
+}

package/package/components/apps/editor/component/Component.svelte

@@ -5,8 +5,8 @@ let outTimeout = undefined;
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import ComponentHeader from '../ComponentHeader.svelte';
-import { AppBarChart, AppDisplayComponent, AppTable, AppText, AppButton, AppPieChart, AppSelect, AppCheckbox, AppTextInput, AppNumberInput, AppDateInput, AppForm, AppScatterChart, AppTimeseries, AppHtml, AppMarkdown, AppSliderInputs, AppFormButton, VegaLiteHtml, PlotlyHtml, PlotlyHtmlV2, AppRangeInput, AppTabs, AppIcon, AppCurrencyInput, AppDivider, AppFileInput, AppImage, AppContainer, AppAggridTable, AppDrawer, AppMap, AppSplitpanes, AppPdf } from '../../components';
 import AppMultiSelect from '../../components/inputs/AppMultiSelect.svelte';
+import AppMultiSelectV2 from '../../components/inputs/AppMultiSelectV2.svelte';
 import AppModal from '../../components/layout/AppModal.svelte';
 import AppSchemaForm from '../../components/buttons/AppSchemaForm.svelte';
 import AppStepper from '../../components/layout/AppStepper.svelte';
@@ -35,10 +35,48 @@ import AppAlert from '../../components/display/AppAlert.svelte';
 import AppDateSliderInput from '../../components/inputs/AppDateSliderInput.svelte';
 import AppTimeInput from '../../components/inputs/AppTimeInput.svelte';
 import AppDateTimeInput from '../../components/inputs/AppDateTimeInput.svelte';
+import AppAggridInfiniteTable from '../../components/display/table/AppAggridInfiniteTable.svelte';
+import AppAggridInfiniteTableEe from '../../components/display/table/AppAggridInfiniteTableEe.svelte';
+import AppDisplayComponent from '../../components/display/AppDisplayComponent.svelte';
+import AppTimeseries from '../../components/display/AppTimeseries.svelte';
+import AppHtml from '../../components/display/AppHtml.svelte';
+import AppMarkdown from '../../components/display/AppMarkdown.svelte';
+import VegaLiteHtml from '../../components/display/VegaLiteHtml.svelte';
+import PlotlyHtml from '../../components/display/PlotlyHtml.svelte';
+import PlotlyHtmlV2 from '../../components/display/PlotlyHtmlV2.svelte';
+import AppScatterChart from '../../components/display/AppScatterChart.svelte';
+import AppPieChart from '../../components/display/AppPieChart.svelte';
+import AppTable from '../../components/display/table/AppTable.svelte';
+import AppAggridTable from '../../components/display/table/AppAggridTable.svelte';
+import AppText from '../../components/display/AppText.svelte';
+import AppButton from '../../components/buttons/AppButton.svelte';
+import AppForm from '../../components/buttons/AppForm.svelte';
+import AppFormButton from '../../components/buttons/AppFormButton.svelte';
+import AppCheckbox from '../../components/inputs/AppCheckbox.svelte';
+import AppTextInput from '../../components/inputs/AppTextInput.svelte';
+import AppDateInput from '../../components/inputs/AppDateInput.svelte';
+import AppSelect from '../../components/inputs/AppSelect.svelte';
+import AppBarChart from '../../components/display/AppBarChart.svelte';
+import AppDivider from '../../components/layout/AppDivider.svelte';
+import AppRangeInput from '../../components/inputs/AppRangeInput.svelte';
+import AppTabs from '../../components/layout/AppTabs.svelte';
+import AppContainer from '../../components/layout/AppContainer.svelte';
+import AppSplitpanes from '../../components/layout/AppSplitpanes.svelte';
+import AppIcon from '../../components/display/AppIcon.svelte';
+import AppFileInput from '../../components/inputs/AppFileInput.svelte';
+import AppImage from '../../components/display/AppImage.svelte';
+import AppDrawer from '../../components/layout/AppDrawer.svelte';
+import AppMap from '../../components/display/AppMap.svelte';
+import AppPdf from '../../components/display/AppPdf.svelte';
+import AppCurrencyInput from '../../components/inputs/currency/AppCurrencyInput.svelte';
+import AppSliderInputs from '../../components/inputs/AppSliderInputs.svelte';
+import AppNumberInput from '../../components/inputs/AppNumberInput.svelte';
 export let component;
 export let selected;
 export let locked = false;
 export let render;
+export let hidden;
+export let fullHeight;
 const { mode, app, hoverStore, connectingInput } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 const movingcomponents = editorContext?.movingcomponents;
@@ -68,7 +106,9 @@ function mouseOut() {
 		}
 	}}
 	on:mouseout|stopPropagation={mouseOut}
-	class="h-full flex flex-col w-full component {initializing ? 'overflow-hidden h-0' : ''}"
+	class="h-full flex flex-col w-full component {initializing
+		? 'overflow-hidden h-0'
+		: ''} {hidden && $mode === 'preview' ? 'hidden' : ''} "
 >
 	{#if $mode !== 'preview'}
 		<ComponentHeader
@@ -82,9 +122,11 @@ function mouseOut() {
 			hover={$hoverStore === component.id}
 			{component}
 			{selected}
+			{fullHeight}
 			connecting={$connectingInput.opened}
 			on:lock
 			on:expand
+			on:fillHeight
 			{locked}
 			{inlineEditorOpened}
 			hasInlineEditor={component.type === 'textcomponent' &&
@@ -321,6 +363,27 @@ function mouseOut() {
 				actions={component.actions ?? []}
 				{render}
 			/>
+		{:else if component.type === 'aggridinfinitecomponent'}
+			<AppAggridInfiniteTable
+				id={component.id}
+				configuration={component.configuration}
+				bind:initializing
+				componentInput={component.componentInput}
+				customCss={component.customCss}
+				actions={component.actions ?? []}
+				{render}
+			/>
+		{:else if component.type === 'aggridinfinitecomponentee'}
+			<AppAggridInfiniteTableEe
+				license={component.license}
+				id={component.id}
+				configuration={component.configuration}
+				bind:initializing
+				componentInput={component.componentInput}
+				customCss={component.customCss}
+				actions={component.actions ?? []}
+				{render}
+			/>
 		{:else if component.type === 'textcomponent'}
 			<AppText
 				id={component.id}
@@ -369,6 +432,15 @@ function mouseOut() {
 				id={component.id}
 				configuration={component.configuration}
 				customCss={component.customCss}
+				verticalAlignment={component.verticalAlignment}
+				{render}
+			/>
+		{:else if component.type === 'multiselectcomponentv2'}
+			<AppMultiSelectV2
+				id={component.id}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				verticalAlignment={component.verticalAlignment}
 				{render}
 			/>
 		{:else if component.type === 'formcomponent'}
@@ -629,6 +701,8 @@ function mouseOut() {
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
+				onOpenRecomputeIds={component.onOpenRecomputeIds}
+				onCloseRecomputeIds={component.onCloseRecomputeIds}
 				{render}
 			/>
 		{:else if component.type === 'mapcomponent'}
@@ -652,6 +726,8 @@ function mouseOut() {
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
+				onOpenRecomputeIds={component.onOpenRecomputeIds}
+				onCloseRecomputeIds={component.onCloseRecomputeIds}
 				{render}
 			/>
 		{:else if component.type === 'schemaformcomponent'}

package/package/components/apps/editor/component/Component.svelte.d.ts

@@ -6,10 +6,13 @@ declare const __propDef: {
         selected: boolean;
         locked?: boolean | undefined;
         render: boolean;
+        hidden: boolean;
+        fullHeight: boolean;
     };
     events: {
         lock: CustomEvent<any>;
         expand: CustomEvent<any>;
+        fillHeight: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };