windmill-components 1.87.0 → 1.89.1

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

@@ -0,0 +1,26 @@
+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>;
+        recomputeOnInputChanged: boolean;
+        recomputableByRefreshButton: boolean;
+        noBackendValue?: any;
+    };
+    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> {
+}
+export {};

package/package/components/apps/components/helpers/InitializeComponent.svelte

@@ -0,0 +1,12 @@
+<script>import { getContext, onDestroy, onMount } from 'svelte';
+export let id;
+const { initialized } = getContext('AppViewerContext');
+onMount(() => {
+    if (!$initialized.initializedComponents.includes(id)) {
+        $initialized.initializedComponents = [...$initialized.initializedComponents, id];
+    }
+});
+onDestroy(() => {
+    $initialized.initializedComponents = $initialized.initializedComponents.filter((c) => c !== id);
+});
+</script>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InitializeComponentProps = typeof __propDef.props;
+export type InitializeComponentEvents = typeof __propDef.events;
+export type InitializeComponentSlots = typeof __propDef.slots;
+export default class InitializeComponent extends SvelteComponentTyped<InitializeComponentProps, InitializeComponentEvents, InitializeComponentSlots> {
+}
+export {};

package/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/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/package/components/apps/components/helpers/InputValue.svelte

@@ -0,0 +1,127 @@
+<script>import { isCodeInjection } from '../../../flows/utils';
+import { deepEqual } from 'fast-equals';
+import { createEventDispatcher, getContext, onDestroy } 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 = '';
+export let extraContext = {};
+export let key = '';
+const { componentControl, runnableComponents } = getContext('AppViewerContext');
+const dispatch = createEventDispatcher();
+if (input == undefined) {
+    dispatch('done');
+}
+let lastInput = input ? JSON.parse(JSON.stringify(input)) : undefined;
+onDestroy(() => (lastInput = 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;
+let firstDebounce = true;
+const debounce_ms = 50;
+function debounce(cb) {
+    if (firstDebounce) {
+        firstDebounce = false;
+        cb();
+        return;
+    }
+    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}-${key}`);
+    }
+    else if (lastInput?.type === 'static' || lastInput?.type == 'template') {
+        value = await getValue(lastInput);
+    }
+    else if (lastInput?.type == 'eval') {
+        value = await evalExpr(lastInput);
+    }
+    else if (lastInput?.type == 'upload') {
+        value = lastInput.value;
+    }
+    else {
+        value = undefined;
+    }
+    dispatch('done');
+}
+async function evalExpr(input) {
+    try {
+        const r = await eval_like(input.expr, computeGlobalContext($worldStore, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+        error = '';
+        return r;
+    }
+    catch (e) {
+        error = e.message;
+        return value;
+    }
+}
+async function getValue(input) {
+    if (!input)
+        return;
+    if (input.type === 'template' && isCodeInjection(input.eval)) {
+        try {
+            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+            error = '';
+            return r;
+        }
+        catch (e) {
+            return e.message;
+        }
+    }
+    else if (input.type === 'static') {
+        return input.value;
+    }
+    else if (input.type === 'template') {
+        return input.eval;
+    }
+}
+function onValueChange(newValue) {
+    if (lastInput?.type === 'connected' && newValue !== undefined && newValue !== null) {
+        const { connection } = lastInput;
+        if (!connection) {
+            // No connection
+            return;
+        }
+        let { path } = connection;
+        path = path.replace(/\[(\d+)\]/g, '.$1').replace(/\[\"(.*)\"\]/g, '.$1');
+        let splitPoint = path.indexOf('.');
+        if (splitPoint != -1) {
+            const realPath = path.substring(splitPoint + 1);
+            value = accessPropertyByPath(newValue, realPath);
+        }
+        else {
+            value = newValue;
+        }
+    }
+    else {
+        // TODO: handle disconnect
+    }
+}
+</script>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { RichConfiguration } from '../../types';
+declare const __propDef: {
+    props: {
+        input: AppInput | RichConfiguration;
+        value: string | number | boolean | Record<string | number, any> | undefined;
+        id?: string | undefined;
+        error?: string | undefined;
+        extraContext?: Record<string, any> | undefined;
+        key?: string | undefined;
+    };
+    events: {
+        done: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/package/components/apps/components/helpers/Loader.svelte

@@ -0,0 +1,18 @@
+<script>import { Loader2 } from 'lucide-svelte';
+import { fade } from 'svelte/transition';
+export let loading;
+</script>
+
+{#if !loading}
+	<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/package/components/apps/components/helpers/Loader.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        loading: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LoaderProps = typeof __propDef.props;
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponentTyped<LoaderProps, LoaderEvents, LoaderSlots> {
+}
+export {};

package/package/components/apps/components/helpers/MissingConnectionWarning.svelte

@@ -0,0 +1,11 @@
+<script>export let input;
+</script>
+
+{#if input.type === 'connected'}
+	<div class="flex gap-2 flex-col">
+		<div>This component is expecting a connected input: </div>
+		<div>
+			<code class="bg-gray-50 border text-gray-600">{input.connection?.path} </code>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        input: AppInput;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MissingConnectionWarningProps = typeof __propDef.props;
+export type MissingConnectionWarningEvents = typeof __propDef.events;
+export type MissingConnectionWarningSlots = typeof __propDef.slots;
+export default class MissingConnectionWarning extends SvelteComponentTyped<MissingConnectionWarningProps, MissingConnectionWarningEvents, MissingConnectionWarningSlots> {
+}
+export {};

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

@@ -0,0 +1,27 @@
+<script>import { getContext } from 'svelte';
+import InputValue from './InputValue.svelte';
+import InitializeComponent from './InitializeComponent.svelte';
+export let componentInput;
+export let id;
+export let result;
+export let render;
+// Sync the result to the output
+const { worldStore } = getContext('AppViewerContext');
+$: outputs = $worldStore?.outputsById?.[id];
+function setOutput(v) {
+    outputs?.result?.set(v, true);
+}
+$: result && outputs && setOutput(result);
+</script>
+
+<InitializeComponent {id} />
+
+{#if componentInput.type !== 'runnable'}
+	<InputValue {id} input={componentInput} bind:value={result} />
+{/if}
+
+{#if render}
+	<slot />
+{:else}
+	<div class="w-full h-full" />
+{/if}

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: AppInput;
+        id: string;
+        result: any;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type NonRunnableComponentProps = typeof __propDef.props;
+export type NonRunnableComponentEvents = typeof __propDef.events;
+export type NonRunnableComponentSlots = typeof __propDef.slots;
+export default class NonRunnableComponent extends SvelteComponentTyped<NonRunnableComponentProps, NonRunnableComponentEvents, NonRunnableComponentSlots> {
+}
+export {};

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

@@ -0,0 +1,17 @@
+<script>import { RefreshCw } from 'lucide-svelte';
+import { getContext } from 'svelte';
+export let componentId;
+export let loading;
+const { runnableComponents } = getContext('AppViewerContext');
+async function refresh() {
+    await $runnableComponents[componentId]?.cb?.();
+}
+</script>
+
+<button
+	on:pointerdown|preventDefault|stopPropagation
+	on:click|preventDefault|stopPropagation={refresh}
+	class="center-center p-1 rounded border bg-white/60  hover:bg-gray-200 z-10"
+>
+	<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
+</button>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        componentId: string;
+        loading: boolean;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RefreshButtonProps = typeof __propDef.props;
+export type RefreshButtonEvents = typeof __propDef.events;
+export type RefreshButtonSlots = typeof __propDef.slots;
+export default class RefreshButton extends SvelteComponentTyped<RefreshButtonProps, RefreshButtonEvents, RefreshButtonSlots> {
+}
+export {};

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

@@ -0,0 +1,23 @@
+<script>import { getContext } from 'svelte';
+import { findGridItem } from '../../editor/appUtils';
+export let id;
+export let shouldWrap = false;
+const { app, breakpoint, mode } = 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);
+    }
+}
+</script>
+
+{#if shouldWrap && $mode !== 'preview'}
+	<div class="h-full w-full" bind:this={wrapper}>
+		<slot />
+	</div>
+{:else}
+	<slot />
+{/if}

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

package/package/components/apps/components/helpers/ResolveConfig.svelte

@@ -0,0 +1,29 @@
+<script>import { InputValue } from '.';
+export let id;
+export let extraKey = '';
+export let key;
+export let resolvedConfig;
+export let configuration;
+$: configuration?.type == 'oneOf' && handleSelected(configuration.selected);
+function handleSelected(selected) {
+    if (resolvedConfig?.selected != undefined && resolvedConfig?.selected != selected) {
+        resolvedConfig.selected = selected;
+    }
+}
+</script>
+
+{#if configuration?.type == 'oneOf' && resolvedConfig?.type == 'oneOf'}
+	{@const choice = resolvedConfig.selected}
+	{#each Object.keys(configuration.configuration?.[choice] ?? {}) as nestedKey (nestedKey)}
+		{#if resolvedConfig.configuration?.[choice] != undefined}
+			<InputValue
+				key={key + choice + nestedKey + extraKey}
+				{id}
+				input={configuration?.configuration?.[choice]?.[nestedKey]}
+				bind:value={resolvedConfig.configuration[choice][nestedKey]}
+			/>
+		{/if}
+	{/each}
+{:else}
+	<InputValue key={key + extraKey} {id} input={configuration} bind:value={resolvedConfig} />
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        extraKey?: string | undefined;
+        key: string;
+        resolvedConfig: any;
+        configuration: RichConfiguration;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ResolveConfigProps = typeof __propDef.props;
+export type ResolveConfigEvents = typeof __propDef.events;
+export type ResolveConfigSlots = typeof __propDef.slots;
+export default class ResolveConfig extends SvelteComponentTyped<ResolveConfigProps, ResolveConfigEvents, ResolveConfigSlots> {
+}
+export {};