windmill-components 1.70.0 → 1.75.0

package/components/apps/components/display/VegaLiteHtml.svelte

@@ -1,11 +1,11 @@
-<script>import { Loader2 } from 'lucide-svelte';
-import { onMount } from 'svelte';
+<script>import { onMount } from 'svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
+export let render;
 export const staticOutputs = ['result', 'loading'];
 let result = undefined;
 let divEl = null;
@@ -41,12 +41,7 @@ $: vegaEmbed &&
 <InputValue {id} input={configuration.canvas} bind:value={canvas} />
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
-	<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
-		{#if !vegaEmbed}
-			<div class="p-2">
-				<Loader2 class="animate-spin" />
-			</div>
-		{/if}
+	<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

package/components/apps/components/display/VegaLiteHtml.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/index.d.ts

@@ -1,9 +1,12 @@
 export { default as AppTable } from './table/AppTable.svelte';
+export { default as AppAggridTable } from './table/AppAggridTable.svelte';
 export { default as AppBarChart } from './AppBarChart.svelte';
 export { default as AppDisplayComponent } from './AppDisplayComponent.svelte';
 export { default as AppHtml } from './AppHtml.svelte';
 export { default as AppIcon } from './AppIcon.svelte';
 export { default as AppImage } from './AppImage.svelte';
+export { default as AppMap } from './AppMap.svelte';
+export { default as AppPdf } from './AppPdf.svelte';
 export { default as AppPieChart } from './AppPieChart.svelte';
 export { default as AppScatterChart } from './AppScatterChart.svelte';
 export { default as AppText } from './AppText.svelte';

package/components/apps/components/display/index.js

@@ -1,9 +1,12 @@
 export { default as AppTable } from './table/AppTable.svelte';
+export { default as AppAggridTable } from './table/AppAggridTable.svelte';
 export { default as AppBarChart } from './AppBarChart.svelte';
 export { default as AppDisplayComponent } from './AppDisplayComponent.svelte';
 export { default as AppHtml } from './AppHtml.svelte';
 export { default as AppIcon } from './AppIcon.svelte';
 export { default as AppImage } from './AppImage.svelte';
+export { default as AppMap } from './AppMap.svelte';
+export { default as AppPdf } from './AppPdf.svelte';
 export { default as AppPieChart } from './AppPieChart.svelte';
 export { default as AppScatterChart } from './AppScatterChart.svelte';
 export { default as AppText } from './AppText.svelte';

package/components/apps/components/display/table/AppAggridTable.svelte

@@ -10,9 +10,10 @@ export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
+export let render;
 export const staticOutputs = ['selectedRow', 'loading', 'result', 'selectedRowIndex'];
 let result = undefined;
-const { worldStore, staticOutputs: staticOutputsStore, selectedComponent } = getContext('AppEditorContext');
+const { worldStore, selectedComponent } = getContext('AppViewerContext');
 let selectedRowIndex = -1;
 function toggleRow(row, rowIndex) {
     if (selectedRowIndex !== rowIndex) {
@@ -38,6 +39,8 @@ let clientHeight;
 let clientWidth;
 let columnDefs = undefined;
 let allEditable = undefined;
+let pagination = undefined;
+let pageSize = 10;
 function onCellValueChanged(event) {
     if (result) {
         let dataCell = event.newValue;
@@ -52,8 +55,10 @@ function onCellValueChanged(event) {
 
 <InputValue {id} input={configuration.columnDefs} bind:value={columnDefs} />
 <InputValue {id} input={configuration.allEditable} bind:value={allEditable} />
+<InputValue {id} input={configuration.pagination} bind:value={pagination} />
+<InputValue {id} input={configuration.pageSize} bind:value={pageSize} />
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
+<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div
 			class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full"
@@ -68,11 +73,15 @@ function onCellValueChanged(event) {
 				style:width="{clientWidth}px"
 				class="ag-theme-alpine"
 			>
-				<AgGridSvelte
-					bind:rowData={result}
-					{columnDefs}
-					defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
-				/>
+				{#key pagination}
+					<AgGridSvelte
+						bind:rowData={result}
+						{columnDefs}
+						{pagination}
+						paginationPageSize={pageSize}
+						defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
+					/>
+				{/key}
 			</div>
 		</div>
 	{:else if result != undefined}

package/components/apps/components/display/table/AppAggridTable.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/table/AppTable.svelte

@@ -9,11 +9,15 @@ import DebouncedInput from '../../helpers/DebouncedInput.svelte';
 import AppTableFooter from './AppTableFooter.svelte';
 import { tableOptions } from './tableOptions';
 import Alert from '../../../../common/alert/Alert.svelte';
+import { concatCustomCss } from '../../../utils';
+import { twMerge } from 'tailwind-merge';
 export let id;
 export let componentInput;
 export let configuration;
 export let actionButtons;
 export let initializing = undefined;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = [
     'selectedRow',
     'loading',
@@ -35,13 +39,13 @@ const options = writable({
     columns: []
 });
 let table = createSvelteTable(options);
-const { worldStore, staticOutputs: staticOutputsStore } = getContext('AppEditorContext');
+const { app, worldStore, staticOutputs: staticOutputsStore } = getContext('AppViewerContext');
 let selectedRowIndex = -1;
-function toggleRow(row, rowIndex) {
-    if (selectedRowIndex !== rowIndex) {
+function toggleRow(row, rowIndex, force = false) {
+    if (selectedRowIndex !== rowIndex || force) {
         selectedRowIndex = rowIndex;
-        outputs?.selectedRow.set(row.original);
-        outputs?.selectedRowIndex.set(rowIndex);
+        outputs?.selectedRow.set(row.original, force);
+        outputs?.selectedRowIndex.set(rowIndex, force);
     }
 }
 let mounted = false;
@@ -95,15 +99,26 @@ $: (search === 'By Runnable' || search === 'Disabled') && (filteredResult = resu
 $: outputs = $worldStore?.outputsById[id];
 function rerender() {
     table = createSvelteTable(options);
+    if (result) {
+        toggleRow({ original: result[0] }, 0, true);
+    }
 }
 $: result && rerender();
+$: css = concatCustomCss($app.css?.tablecomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.search} bind:value={search} />
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
+<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
-		<div class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full">
+		<div
+			class={twMerge(
+				'border border-gray-300 shadow-sm divide-y divide-gray-300 h-full',
+				css?.container?.class ?? '',
+				'flex flex-col'
+			)}
+			style={css?.container?.style ?? ''}
+		>
 			{#if search !== 'Disabled'}
 				<div class="px-2 py-1">
 					<div class="flex items-center">
@@ -116,7 +131,14 @@ $: result && rerender();
 
 			<div class="overflow-x-auto flex-1 w-full">
 				<table class="relative w-full border-b border-b-gray-200">
-					<thead class="sticky top-0 z-40 bg-gray-50 text-left">
+					<thead
+						class={twMerge(
+							'bg-gray-50 text-left',
+							css?.tableHeader?.class ?? '',
+							'sticky top-0 z-40'
+						)}
+						style={css?.tableHeader?.style ?? ''}
+					>
 						{#each $table.getHeaderGroups() as headerGroup}
 							<tr class="divide-x">
 								{#each headerGroup.headers as header}
@@ -142,7 +164,10 @@ $: result && rerender();
 							</tr>
 						{/each}
 					</thead>
-					<tbody class="divide-y divide-gray-200 bg-white ">
+					<tbody
+						class={twMerge('divide-y divide-gray-200 bg-white', css?.tableBody?.class ?? '')}
+						style={css?.tableBody?.style ?? ''}
+					>
 						{#each $table.getRowModel().rows as row, rowIndex (row.id)}
 							<tr
 								class={classNames(
@@ -179,16 +204,30 @@ $: result && rerender();
 									<td class="p-2 " on:click={() => toggleRow(row, rowIndex)}>
 										<div class="center-center h-full w-full flex-wrap gap-1">
 											{#each actionButtons as actionButton, actionIndex (actionIndex)}
-												<AppButton
-													noWFull
-													{...actionButton}
-													preclickAction={async () => {
-														toggleRow(row, rowIndex)
-													}}
-													extraQueryParams={{ row: row.original }}
-													bind:componentInput={actionButton.componentInput}
-													bind:staticOutputs={$staticOutputsStore[actionButton.id]}
-												/>
+												{#if rowIndex == 0}
+													<AppButton
+														{render}
+														noWFull
+														{...actionButton}
+														preclickAction={async () => {
+															toggleRow(row, rowIndex)
+														}}
+														extraQueryParams={{ row: row.original }}
+														bind:componentInput={actionButton.componentInput}
+														bind:staticOutputs={$staticOutputsStore[actionButton.id]}
+													/>
+												{:else}
+													<AppButton
+														{render}
+														noWFull
+														{...actionButton}
+														preclickAction={async () => {
+															toggleRow(row, rowIndex)
+														}}
+														extraQueryParams={{ row: row.original }}
+														bind:componentInput={actionButton.componentInput}
+													/>
+												{/if}
 											{/each}
 										</div>
 									</td>
@@ -199,7 +238,13 @@ $: result && rerender();
 				</table>
 			</div>
 
-			<AppTableFooter paginationEnabled={pagination} {result} {table} />
+			<AppTableFooter
+				paginationEnabled={pagination}
+				{result}
+				{table}
+				class={css?.tableFooter.class}
+				style={css?.tableFooter.style}
+			/>
 		</div>
 	{:else if result != undefined}
 		<Alert title="Parsing issues" type="error" size="xs">

package/components/apps/components/display/table/AppTable.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BaseAppComponent } from '../../../types';
+import type { BaseAppComponent, ComponentCustomCSS } from '../../../types';
 import type { AppInput } from '../../../inputType';
 import type { ButtonComponent } from '../../../editor/component';
 declare const __propDef: {
@@ -9,6 +9,8 @@ declare const __propDef: {
         configuration: Record<string, AppInput>;
         actionButtons: (BaseAppComponent & ButtonComponent)[];
         initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'container' | 'tableHeader' | 'tableBody' | 'tableFooter'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/table/AppTableFooter.svelte

@@ -1,10 +1,14 @@
 <script>import Button from '../../../../common/button/Button.svelte';
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
 import { ChevronLeft, ChevronRight } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
 import { tableOptions } from './tableOptions';
 export let result;
 export let paginationEnabled = false;
 export let table;
+let c = '';
+export { c as class };
+export let style = '';
 function downloadResultAsJSON() {
     const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(result));
     const downloadAnchorNode = document.createElement('a');
@@ -16,7 +20,10 @@ function downloadResultAsJSON() {
 }
 </script>
 
-<div class="px-2 py-1 text-xs flex flex-row gap-2 items-center justify-between">
+<div
+	class={twMerge('px-2 py-1 text-xs gap-2 items-center justify-between', c, 'flex flex-row')}
+	{style}
+>
 	{#if paginationEnabled && result.length > (tableOptions.initialState?.pagination?.pageSize ?? 25)}
 		<div class="flex items-center gap-2 flex-row">
 			<Button

package/components/apps/components/display/table/AppTableFooter.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         result: Record<string, any>[];
         paginationEnabled?: boolean | undefined;
         table: Readable<Table<Record<string, any>>>;
+        class?: string | undefined;
+        style?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/AlignWrapper.svelte

@@ -1,14 +1,18 @@
-<script>import { classNames } from '../../../../utils';
+<script>import { twMerge } from 'tailwind-merge';
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
+let c = '';
+export { c as class };
+export let style = '';
+export let render = true;
 function tailwindHorizontalAlignment(alignment) {
     if (!alignment)
         return '';
     const classes = {
         left: 'justify-start',
         center: 'justify-center',
-        right: 'justify-end',
+        right: 'justify-end'
     };
     return classes[alignment];
 }
@@ -18,13 +22,15 @@ function tailwindVerticalAlignment(alignment) {
     const classes = {
         top: 'items-start',
         center: 'items-center',
-        bottom: 'items-end',
+        bottom: 'items-end'
     };
     return classes[alignment];
 }
-$: classes = classNames('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '', $$props.class || '');
+$: classes = twMerge('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '', c);
 </script>
 
-<div class={classes}>
-	<slot />
-</div>
+{#if render}
+	<div class={classes} {style}>
+		<slot />
+	</div>
+{/if}

package/components/apps/components/helpers/AlignWrapper.svelte.d.ts

@@ -2,10 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 import type { HorizontalAlignment, VerticalAlignment } from '../../types';
 declare const __propDef: {
     props: {
-        [x: string]: any;
         horizontalAlignment?: HorizontalAlignment | undefined;
         verticalAlignment?: VerticalAlignment | undefined;
         noWFull?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+        render?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/HiddenComponent.svelte

@@ -8,8 +8,9 @@ export const staticOutputs = ['result', 'loading'];
 </script>
 
 <RunnableComponent
+	render={false}
 	{id}
-	bind:fields
+	{fields}
 	bind:result
 	runnable={{
 		name,

package/components/apps/components/helpers/InputValue.svelte

@@ -1,30 +1,53 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
+import { deepEqual } from 'fast-equals';
 import { getContext } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
 export let input;
 export let value;
 export let id = undefined;
 export let error = '';
-const { worldStore } = getContext('AppEditorContext');
+let lastInput = input ? JSON.parse(JSON.stringify(input)) : undefined;
+$: if (input && !deepEqual(input, lastInput)) {
+    lastInput = JSON.parse(JSON.stringify(input));
+    // Needed because of file uploads
+    if (input?.['value'] instanceof ArrayBuffer) {
+        lastInput.value = input?.['value'];
+    }
+}
+const { worldStore } = getContext('AppViewerContext');
 $: state = $worldStore?.state;
-$: input && $worldStore && handleConnection();
-$: input && input.type == 'template' && $state && (value = getValue(input));
-$: input && input.type == 'eval' && $state && (value = evalExpr(input));
+let timeout = undefined;
+const debounce_ms = 50;
+function debounce(cb) {
+    if (timeout) {
+        clearTimeout(timeout);
+    }
+    timeout = setTimeout(cb, debounce_ms);
+}
+$: lastInput && $worldStore && debounce(handleConnection);
+$: lastInput &&
+    lastInput.type == 'template' &&
+    $state &&
+    debounce(() => (value = getValue(lastInput)));
+$: lastInput &&
+    lastInput.type == 'eval' &&
+    $state &&
+    debounce(() => (value = evalExpr(lastInput)));
 function handleConnection() {
-    if (input.type === 'connected') {
-        $worldStore?.connect(input, onValueChange);
+    if (lastInput.type === 'connected') {
+        $worldStore?.connect(lastInput, onValueChange);
     }
-    else if (input.type === 'static' || input.type == 'template') {
-        setTimeout(() => (value = getValue(input)), 0);
+    else if (lastInput.type === 'static' || lastInput.type == 'template') {
+        value = getValue(lastInput);
     }
-    else if (input.type == 'eval') {
-        setTimeout(() => ((value = evalExpr(input)), 0));
+    else if (lastInput.type == 'eval') {
+        value = evalExpr(lastInput);
     }
-    else if (input.type == 'upload') {
-        setTimeout(() => ((value = input.value), 0));
+    else if (lastInput.type == 'upload') {
+        value = lastInput.value;
     }
     else {
-        setTimeout(() => (value = undefined), 0);
+        value = undefined;
     }
 }
 function evalExpr(input) {
@@ -87,8 +110,8 @@ function eval_like(text, context = {}) {
     return evaluator(context);
 }
 function onValueChange(newValue) {
-    if (input.type === 'connected' && newValue !== undefined && newValue !== null) {
-        const { connection } = input;
+    if (lastInput.type === 'connected' && newValue !== undefined && newValue !== null) {
+        const { connection } = lastInput;
         if (!connection) {
             // No connection
             return;

package/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -1,10 +1,13 @@
-<script>import { getContext } from 'svelte';
+<script>import { Loader2 } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { fade } from 'svelte/transition';
 import InputValue from './InputValue.svelte';
 export let componentInput;
 export let id;
 export let result;
+export let render;
 // Sync the result to the output
-const { worldStore } = getContext('AppEditorContext');
+const { worldStore } = getContext('AppViewerContext');
 $: outputs = $worldStore?.outputsById[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
@@ -19,4 +22,16 @@ $: result && outputs && setOutput(result);
 	<InputValue {id} input={componentInput} bind:value={result} />
 {/if}
 
-<slot />
+{#if render}
+	<slot />
+{:else}
+	<div class="w-full h-full">
+		<div
+			out:fade|local={{ duration: 50 }}
+			class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+		>
+			<Loader2 class="animate-spin" size={16} />
+			<span class="text-xs mt-1">Loading</span>
+		</div>
+	</div>
+{/if}

package/components/apps/components/helpers/NonRunnableComponent.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         componentInput: AppInput;
         id: string;
         result: any;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/RefreshButton.svelte

@@ -3,7 +3,7 @@ import { faRefresh } from '@fortawesome/free-solid-svg-icons';
 import { RefreshCcw, RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
 export let componentId;
-const { runnableComponents, worldStore } = getContext('AppEditorContext');
+const { runnableComponents, worldStore } = getContext('AppViewerContext');
 async function refresh() {
     window.dispatchEvent(new Event('pointerup'));
     await $runnableComponents[componentId]?.();

package/components/apps/components/helpers/ResizeWrapper.svelte

@@ -0,0 +1,24 @@
+<script>import { getContext } from 'svelte';
+import { findGridItem } from '../../editor/appUtils';
+export let id;
+export let shouldWrap = false;
+const { app, breakpoint } = getContext('AppViewerContext');
+$: gridItem = findGridItem($app, id);
+let wrapper;
+$: {
+    if (wrapper && gridItem && shouldWrap) {
+        const wrapperHeight = wrapper.getBoundingClientRect().height;
+        const width = $breakpoint === 'sm' ? 3 : 12;
+        gridItem[width].h = Math.ceil(wrapperHeight / 36);
+        gridItem = gridItem;
+    }
+}
+</script>
+
+{#if shouldWrap}
+	<div bind:this={wrapper}>
+		<slot />
+	</div>
+{:else}
+	<slot />
+{/if}

package/components/apps/components/helpers/ResizeWrapper.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        shouldWrap?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ResizeWrapperProps = typeof __propDef.props;
+export type ResizeWrapperEvents = typeof __propDef.events;
+export type ResizeWrapperSlots = typeof __propDef.slots;
+export default class ResizeWrapper extends SvelteComponentTyped<ResizeWrapperProps, ResizeWrapperEvents, ResizeWrapperSlots> {
+}
+export {};