windmill-components 1.60.3 → 1.70.0

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

@@ -0,0 +1,52 @@
+<script>import { Loader2 } from 'lucide-svelte';
+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 const staticOutputs = ['result', 'loading'];
+let result = undefined;
+let divEl = null;
+let vegaEmbed;
+onMount(async () => {
+    if (divEl) {
+        //@ts-ignore
+        await import('https://cdn.jsdelivr.net/npm/vega@5.22.1');
+        //@ts-ignore
+        await import('https://cdn.jsdelivr.net/npm/vega-lite@5.6.0');
+        //@ts-ignore
+        await import('https://cdn.jsdelivr.net/npm/vega-embed@6.21.0');
+        vegaEmbed = window['vegaEmbed'];
+    }
+});
+let h = undefined;
+let w = undefined;
+let canvas = false;
+$: vegaEmbed &&
+    result &&
+    divEl &&
+    h &&
+    w &&
+    vegaEmbed(divEl, { ...result, ...{ width: w - 100 } }, {
+        mode: 'vega-lite',
+        actions: false,
+        renderer: canvas ? 'canvas' : 'svg',
+        height: h - 75,
+        width: w - 75
+    });
+</script>
+
+<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}
+		<div on:pointerdown bind:this={divEl} />
+	</RunnableWrapper>
+</div>

package/components/apps/components/{dataDisplay → display}/VegaLiteHtml.svelte.d.ts

@@ -4,12 +4,13 @@ declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         configuration: Record<string, AppInput>;
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -0,0 +1,12 @@
+export { default as AppTable } from './table/AppTable.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 AppPieChart } from './AppPieChart.svelte';
+export { default as AppScatterChart } from './AppScatterChart.svelte';
+export { default as AppText } from './AppText.svelte';
+export { default as AppTimeseries } from './AppTimeseries.svelte';
+export { default as PlotlyHtml } from './PlotlyHtml.svelte';
+export { default as VegaLiteHtml } from './VegaLiteHtml.svelte';

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

@@ -0,0 +1,12 @@
+export { default as AppTable } from './table/AppTable.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 AppPieChart } from './AppPieChart.svelte';
+export { default as AppScatterChart } from './AppScatterChart.svelte';
+export { default as AppText } from './AppText.svelte';
+export { default as AppTimeseries } from './AppTimeseries.svelte';
+export { default as PlotlyHtml } from './PlotlyHtml.svelte';
+export { default as VegaLiteHtml } from './VegaLiteHtml.svelte';

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

@@ -0,0 +1,83 @@
+<script>import AgGridSvelte from 'ag-grid-svelte/AgGridSvelte.svelte';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import { getContext, onMount } from 'svelte';
+import InputValue from '../../helpers/InputValue.svelte';
+import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
+import { isObject } from '../../../../../utils';
+import Alert from '../../../../common/alert/Alert.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let initializing = undefined;
+export const staticOutputs = ['selectedRow', 'loading', 'result', 'selectedRowIndex'];
+let result = undefined;
+const { worldStore, staticOutputs: staticOutputsStore, selectedComponent } = getContext('AppEditorContext');
+let selectedRowIndex = -1;
+function toggleRow(row, rowIndex) {
+    if (selectedRowIndex !== rowIndex) {
+        selectedRowIndex = rowIndex;
+        outputs?.selectedRow.set(row.original);
+        outputs?.selectedRowIndex.set(rowIndex);
+    }
+}
+let mounted = false;
+onMount(() => {
+    mounted = true;
+});
+$: selectedRowIndex === -1 &&
+    Array.isArray(result) &&
+    result.length > 0 &&
+    // We need to wait until the component is mounted so the world is created
+    mounted &&
+    outputs &&
+    toggleRow({ original: result[0] }, 0);
+$: outputs = $worldStore?.outputsById[id];
+$: outputs?.result?.set(result);
+let clientHeight;
+let clientWidth;
+let columnDefs = undefined;
+let allEditable = undefined;
+function onCellValueChanged(event) {
+    if (result) {
+        let dataCell = event.newValue;
+        try {
+            dataCell = JSON.parse(dataCell);
+        }
+        catch (e) { }
+        result[event.node.rowIndex][event.column.colId] = dataCell;
+    }
+}
+</script>
+
+<InputValue {id} input={configuration.columnDefs} bind:value={columnDefs} />
+<InputValue {id} input={configuration.allEditable} bind:value={allEditable} />
+
+<RunnableWrapper flexWrap bind: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"
+			bind:clientHeight
+			bind:clientWidth
+		>
+			<div
+				on:pointerdown|stopPropagation={() => {
+					$selectedComponent = id
+				}}
+				style:height="{clientHeight}px"
+				style:width="{clientWidth}px"
+				class="ag-theme-alpine"
+			>
+				<AgGridSvelte
+					bind:rowData={result}
+					{columnDefs}
+					defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
+				/>
+			</div>
+		</div>
+	{:else if result != undefined}
+		<Alert title="Parsing issues" type="error" size="xs">
+			The result should be an array of objects
+		</Alert>
+	{/if}
+</RunnableWrapper>

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import type { AppInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: Record<string, AppInput>;
+        initializing?: boolean | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppAggridTableProps = typeof __propDef.props;
+export type AppAggridTableEvents = typeof __propDef.events;
+export type AppAggridTableSlots = typeof __propDef.slots;
+export default class AppAggridTable extends SvelteComponentTyped<AppAggridTableProps, AppAggridTableEvents, AppAggridTableSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/{table → display/table}/AppTable.svelte

@@ -1,19 +1,26 @@
-<script>import { getContext } from 'svelte';
-import InputValue from '../helpers/InputValue.svelte';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+<script>import { getContext, onMount } from 'svelte';
+import InputValue from '../../helpers/InputValue.svelte';
+import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { writable } from 'svelte/store';
 import { createSvelteTable, flexRender } from '@tanstack/svelte-table';
-import AppButton from '../buttons/AppButton.svelte';
-import { classNames, isObject } from '../../../../utils';
-import DebouncedInput from '../helpers/DebouncedInput.svelte';
+import AppButton from '../../buttons/AppButton.svelte';
+import { classNames, isObject } from '../../../../../utils';
+import DebouncedInput from '../../helpers/DebouncedInput.svelte';
 import AppTableFooter from './AppTableFooter.svelte';
 import { tableOptions } from './tableOptions';
-import Alert from '../../../common/alert/Alert.svelte';
+import Alert from '../../../../common/alert/Alert.svelte';
 export let id;
 export let componentInput;
 export let configuration;
 export let actionButtons;
-export const staticOutputs = ['selectedRow', 'loading', 'result', 'search'];
+export let initializing = undefined;
+export const staticOutputs = [
+    'selectedRow',
+    'loading',
+    'result',
+    'search',
+    'selectedRowIndex'
+];
 let result = undefined;
 let search = undefined;
 let searchValue = '';
@@ -29,13 +36,25 @@ const options = writable({
 });
 let table = createSvelteTable(options);
 const { worldStore, staticOutputs: staticOutputsStore } = getContext('AppEditorContext');
-let selectedRowIndex = 0;
+let selectedRowIndex = -1;
 function toggleRow(row, rowIndex) {
     if (selectedRowIndex !== rowIndex) {
         selectedRowIndex = rowIndex;
         outputs?.selectedRow.set(row.original);
+        outputs?.selectedRowIndex.set(rowIndex);
     }
 }
+let mounted = false;
+onMount(() => {
+    mounted = true;
+});
+$: selectedRowIndex === -1 &&
+    Array.isArray(result) &&
+    result.length > 0 &&
+    // We need to wait until the component is mounted so the world is created
+    mounted &&
+    outputs &&
+    toggleRow({ original: result[0] }, 0);
 function setOptions(filteredResult) {
     if (!Array.isArray(result)) {
         return;
@@ -82,7 +101,7 @@ $: result && rerender();
 
 <InputValue {id} input={configuration.search} bind:value={search} />
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap bind: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">
 			{#if search !== 'Disabled'}
@@ -157,19 +176,21 @@ $: result && rerender();
 								{/each}
 
 								{#if actionButtons.length > 0}
-									<td
-										class="flex w-full flex-row gap-2 p-4"
-										on:click={() => toggleRow(row, rowIndex)}
-									>
-										{#each actionButtons as actionButton, actionIndex (actionIndex)}
-											<AppButton
-												noWFull
-												{...actionButton}
-												extraQueryParams={{ row: row.original }}
-												bind:componentInput={actionButton.componentInput}
-												bind:staticOutputs={$staticOutputsStore[actionButton.id]}
-											/>
-										{/each}
+									<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]}
+												/>
+											{/each}
+										</div>
 									</td>
 								{/if}
 							</tr>

package/components/apps/components/{table → display/table}/AppTable.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BaseAppComponent, ButtonComponent } from '../../types';
-import type { AppInput } from '../../inputType';
+import type { BaseAppComponent } from '../../../types';
+import type { AppInput } from '../../../inputType';
+import type { ButtonComponent } from '../../../editor/component';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
         actionButtons: (BaseAppComponent & ButtonComponent)[];
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/{table → display/table}/AppTableFooter.svelte

@@ -1,4 +1,4 @@
-<script>import Button from '../../../common/button/Button.svelte';
+<script>import Button from '../../../../common/button/Button.svelte';
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
 import { ChevronLeft, ChevronRight } from 'lucide-svelte';
 import { tableOptions } from './tableOptions';

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

@@ -2,27 +2,27 @@
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
-function tailwindHorizontalAlignment(horizontalAlignment) {
-    switch (horizontalAlignment) {
-        case 'left':
-            return 'justify-start';
-        case 'center':
-            return 'justify-center';
-        case 'right':
-            return 'justify-end';
-    }
+function tailwindHorizontalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        left: 'justify-start',
+        center: 'justify-center',
+        right: 'justify-end',
+    };
+    return classes[alignment];
 }
-function tailwindVerticalAlignment(verticalAlignment) {
-    switch (verticalAlignment) {
-        case 'top':
-            return 'items-start';
-        case 'center':
-            return 'items-center';
-        case 'bottom':
-            return 'items-end';
-    }
+function tailwindVerticalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        top: 'items-start',
+        center: 'items-center',
+        bottom: 'items-end',
+    };
+    return classes[alignment];
 }
-$: classes = classNames('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '');
+$: classes = classNames('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '', $$props.class || '');
 </script>
 
 <div class={classes}>

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

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HorizontalAlignment, VerticalAlignment } from '../../types';
 declare const __propDef: {
     props: {
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        [x: string]: any;
+        horizontalAlignment?: HorizontalAlignment | undefined;
+        verticalAlignment?: VerticalAlignment | undefined;
         noWFull?: boolean | undefined;
     };
     events: {

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

@@ -0,0 +1,22 @@
+<script>import RunnableComponent from './RunnableComponent.svelte';
+export let id;
+export let name;
+export let inlineScript;
+export let fields;
+let result = undefined;
+export const staticOutputs = ['result', 'loading'];
+</script>
+
+<RunnableComponent
+	{id}
+	bind:fields
+	bind:result
+	runnable={{
+		name,
+		inlineScript,
+		type: 'runnableByName'
+	}}
+	wrapperClass="hidden"
+>
+	<slot />
+</RunnableComponent>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { InlineScript } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        name: string;
+        inlineScript: InlineScript | undefined;
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HiddenComponentProps = typeof __propDef.props;
+export type HiddenComponentEvents = typeof __propDef.events;
+export type HiddenComponentSlots = typeof __propDef.slots;
+export default class HiddenComponent extends SvelteComponentTyped<HiddenComponentProps, HiddenComponentEvents, HiddenComponentSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/helpers/InputDefaultValue.svelte

@@ -0,0 +1,17 @@
+<script>export let input = undefined;
+export let defaultValue = undefined;
+function setInputValueToDefaultValue() {
+    if (defaultValue !== undefined && input) {
+        input.value = String(defaultValue);
+    }
+}
+function clearInputValue() {
+    if (input) {
+        input.value = '';
+    }
+}
+$: input && defaultValue && setInputValueToDefaultValue();
+$: input &&
+    (defaultValue === '' || defaultValue === undefined || defaultValue === null) &&
+    clearInputValue();
+</script>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        input?: HTMLInputElement | undefined;
+        defaultValue?: (string | number | boolean) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputDefaultValueProps = typeof __propDef.props;
+export type InputDefaultValueEvents = typeof __propDef.events;
+export type InputDefaultValueSlots = typeof __propDef.slots;
+export default class InputDefaultValue extends SvelteComponentTyped<InputDefaultValueProps, InputDefaultValueEvents, InputDefaultValueSlots> {
+}
+export {};

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

@@ -4,26 +4,25 @@ import { accessPropertyByPath } from '../../utils';
 export let input;
 export let value;
 export let id = undefined;
-export let row = {};
 export let error = '';
 const { worldStore } = getContext('AppEditorContext');
 $: state = $worldStore?.state;
-$: input && $worldStore && row && handleConnection();
+$: input && $worldStore && handleConnection();
 $: input && input.type == 'template' && $state && (value = getValue(input));
 $: input && input.type == 'eval' && $state && (value = evalExpr(input));
 function handleConnection() {
     if (input.type === 'connected') {
         $worldStore?.connect(input, onValueChange);
     }
-    else if (input.type === 'row') {
-        setTimeout(() => (value = row?.[input['column']]), 0);
-    }
     else if (input.type === 'static' || input.type == 'template') {
         setTimeout(() => (value = getValue(input)), 0);
     }
     else if (input.type == 'eval') {
         setTimeout(() => ((value = evalExpr(input)), 0));
     }
+    else if (input.type == 'upload') {
+        setTimeout(() => ((value = input.value), 0));
+    }
     else {
         setTimeout(() => (value = undefined), 0);
     }
@@ -47,8 +46,7 @@ function computeGlobalContext() {
             key,
             Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
         ];
-    })
-        .concat(row ? [['row', row]] : []));
+    }));
 }
 export function getValue(input) {
     if (input.type === 'template' && isCodeInjection(input.eval)) {

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

@@ -5,7 +5,6 @@ declare const __propDef: {
         input: AppInput;
         value: string | number | boolean | Record<string | number, any> | undefined;
         id?: string | undefined;
-        row?: Record<string, any> | undefined;
         error?: string | undefined;
         getValue?: ((input: AppInput) => any) | undefined;
     };