windmill-components 1.70.0 → 1.77.0

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

@@ -3,13 +3,16 @@ export let id;
 export let name;
 export let inlineScript;
 export let fields;
+export let autoRefresh = false;
 let result = undefined;
 export const staticOutputs = ['result', 'loading'];
 </script>
 
 <RunnableComponent
+	render={false}
 	{id}
-	bind:fields
+	{fields}
+	{autoRefresh}
 	bind:result
 	runnable={{
 		name,
@@ -17,6 +20,7 @@ export const staticOutputs = ['result', 'loading'];
 		type: 'runnableByName'
 	}}
 	wrapperClass="hidden"
+	recomputable
 >
 	<slot />
 </RunnableComponent>

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         name: string;
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        autoRefresh?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

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

@@ -1,35 +1,71 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
-import { getContext } from 'svelte';
+import { deepEqual } from 'fast-equals';
+import { createEventDispatcher, getContext } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
+import { computeGlobalContext, eval_like } from './eval';
 export let input;
 export let value;
 export let id = undefined;
 export let error = '';
-const { worldStore } = getContext('AppEditorContext');
-$: state = $worldStore?.state;
-$: 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);
+export let extraContext = {};
+const { componentControl } = getContext('AppViewerContext');
+const dispatch = createEventDispatcher();
+if (input == undefined) {
+    dispatch('done');
+}
+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, state, mode } = getContext('AppViewerContext');
+$: stateId = $worldStore?.stateId;
+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' &&
+    $stateId &&
+    $state &&
+    debounce(async () => {
+        value = await getValue(lastInput);
+        dispatch('done');
+    });
+$: lastInput &&
+    lastInput.type == 'eval' &&
+    $stateId &&
+    $state &&
+    debounce(async () => (value = await evalExpr(lastInput)));
+async function handleConnection() {
+    if (lastInput.type === 'connected') {
+        $worldStore?.connect(lastInput, onValueChange, id);
     }
-    else if (input.type === 'static' || input.type == 'template') {
-        setTimeout(() => (value = getValue(input)), 0);
+    else if (lastInput.type === 'static' || lastInput.type == 'template') {
+        value = await getValue(lastInput);
     }
-    else if (input.type == 'eval') {
-        setTimeout(() => ((value = evalExpr(input)), 0));
+    else if (lastInput.type == 'eval') {
+        value = await 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;
     }
+    dispatch('done');
 }
-function evalExpr(input) {
+async function evalExpr(input) {
     try {
-        const r = eval_like(input.expr, computeGlobalContext());
+        const r = await eval_like(input.expr, computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
         error = '';
         return r;
     }
@@ -38,20 +74,10 @@ function evalExpr(input) {
         return value;
     }
 }
-function computeGlobalContext() {
-    return Object.fromEntries(Object.entries($worldStore?.outputsById ?? {})
-        .filter(([k, _]) => k != id)
-        .map(([key, value]) => {
-        return [
-            key,
-            Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
-        ];
-    }));
-}
-export function getValue(input) {
+async function getValue(input) {
     if (input.type === 'template' && isCodeInjection(input.eval)) {
         try {
-            const r = eval_like('`' + input.eval + '`', computeGlobalContext());
+            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
             error = '';
             return r;
         }
@@ -66,29 +92,9 @@ export function getValue(input) {
         return input.eval;
     }
 }
-function create_context_function_template(eval_string, context) {
-    return `
-  return function (context) {
-    "use strict";
-    ${Object.keys(context).length > 0
-        ? `let ${Object.keys(context).map((key) => ` ${key} = context['${key}']`)};`
-        : ``}
-    return ${eval_string};
-  }                                                                                                                   
-  `;
-}
-function make_context_evaluator(eval_string, context) {
-    let template = create_context_function_template(eval_string, context);
-    let functor = Function(template);
-    return functor();
-}
-function eval_like(text, context = {}) {
-    let evaluator = make_context_evaluator(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/InputValue.svelte.d.ts

@@ -2,13 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        input: AppInput;
+        input: AppInput | undefined;
         value: string | number | boolean | Record<string | number, any> | undefined;
         id?: string | undefined;
         error?: string | undefined;
-        getValue?: ((input: AppInput) => any) | undefined;
+        extraContext?: Record<string, any> | undefined;
     };
     events: {
+        done: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -17,6 +19,5 @@ export type InputValueProps = typeof __propDef.props;
 export type InputValueEvents = typeof __propDef.events;
 export type InputValueSlots = typeof __propDef.slots;
 export default class InputValue extends SvelteComponentTyped<InputValueProps, InputValueEvents, InputValueSlots> {
-    get getValue(): (input: AppInput) => any;
 }
 export {};

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

@@ -1,15 +1,14 @@
-<script>import Button from '../../../common/button/Button.svelte';
-import { faRefresh } from '@fortawesome/free-solid-svg-icons';
-import { RefreshCcw, RefreshCw } from 'lucide-svelte';
+<script>import { 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]?.();
 }
 let loading = false;
 $: $worldStore?.outputsById[componentId]?.['loading']?.subscribe({
+    id: 'refresh-' + componentId,
     next: (value) => {
         loading = value;
     }

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 {};