windmill-components 1.60.4 → 1.83.1

package/components/apps/components/helpers/eval.js

@@ -0,0 +1,94 @@
+import { sendUserToast } from '../../../../utils';
+import { isPlainObject } from 'lodash';
+export function computeGlobalContext(world, extraContext = {}) {
+    return {
+        ...Object.fromEntries(Object.entries(world?.outputsById ?? {})
+            .filter(([k, _]) => k != 'state')
+            .map(([key, value]) => {
+            return [
+                key,
+                Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
+            ];
+        })),
+        ...extraContext
+    };
+}
+function create_context_function_template(eval_string, context, noReturn) {
+    return `
+return async function (context, state, goto, setTab, recompute) {
+"use strict";
+${Object.keys(context).length > 0
+        ? `let ${Object.keys(context).map((key) => ` ${key} = context['${key}']`)};`
+        : ``}
+${noReturn ? `return ${eval_string}` : eval_string}
+}                                                                                                                   
+`;
+}
+function make_context_evaluator(eval_string, context, noReturn) {
+    let template = create_context_function_template(eval_string, context, noReturn);
+    let functor = Function(template);
+    return functor();
+}
+function isSerializable(obj) {
+    var isNestedSerializable;
+    function isPlain(val) {
+        return (val == null ||
+            typeof val === 'undefined' ||
+            typeof val === 'string' ||
+            typeof val === 'boolean' ||
+            typeof val === 'number' ||
+            Array.isArray(val) ||
+            isPlainObject(val));
+    }
+    if (!isPlain(obj)) {
+        return false;
+    }
+    for (var property in obj) {
+        if (obj.hasOwnProperty(property)) {
+            if (!isPlain(obj[property])) {
+                return false;
+            }
+            if (typeof obj[property] == 'object') {
+                isNestedSerializable = isSerializable(obj[property]);
+                if (!isNestedSerializable) {
+                    return false;
+                }
+            }
+        }
+    }
+    return true;
+}
+export async function eval_like(text, context = {}, noReturn, state, editor, controlComponents, worldStore, runnableComponents) {
+    const proxiedState = new Proxy(state, {
+        set(target, key, value) {
+            if (typeof key !== 'string') {
+                throw new Error('Invalid key');
+            }
+            let o = worldStore?.newOutput('state', key, value);
+            if (isSerializable(value)) {
+                o?.set(value, true);
+            }
+            else {
+                o?.set('Not serializable object usable only by frontend scripts', true);
+            }
+            target[key] = value;
+            return true;
+        }
+    });
+    let evaluator = make_context_evaluator(text, context, noReturn);
+    return await evaluator(context, proxiedState, async (x, newTab) => {
+        if (newTab || editor) {
+            if (!newTab) {
+                sendUserToast('In editor mode, `goto` opens a new tab to prevent losing your work. To test the redirection , use the preview mode.');
+            }
+            window.open(x, '_blank');
+        }
+        else {
+            await newTab(x);
+        }
+    }, (id, index) => {
+        controlComponents[id]?.setTab?.(index);
+    }, (id) => {
+        runnableComponents[id]?.cb?.();
+    });
+}

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

@@ -0,0 +1,10 @@
+export { default as AlignWrapper } from './AlignWrapper.svelte';
+export { default as DebouncedInput } from './DebouncedInput.svelte';
+export { default as HiddenComponent } from './HiddenComponent.svelte';
+export { default as InputDefaultValue } from './InputDefaultValue.svelte';
+export { default as InputValue } from './InputValue.svelte';
+export { default as MissingConnectionWarning } from './MissingConnectionWarning.svelte';
+export { default as NonRunnableComponent } from './NonRunnableComponent.svelte';
+export { default as RefreshButton } from './RefreshButton.svelte';
+export { default as RunnableComponent } from './RunnableComponent.svelte';
+export { default as RunnableWrapper } from './RunnableWrapper.svelte';

package/components/apps/components/helpers/index.js

@@ -0,0 +1,10 @@
+export { default as AlignWrapper } from './AlignWrapper.svelte';
+export { default as DebouncedInput } from './DebouncedInput.svelte';
+export { default as HiddenComponent } from './HiddenComponent.svelte';
+export { default as InputDefaultValue } from './InputDefaultValue.svelte';
+export { default as InputValue } from './InputValue.svelte';
+export { default as MissingConnectionWarning } from './MissingConnectionWarning.svelte';
+export { default as NonRunnableComponent } from './NonRunnableComponent.svelte';
+export { default as RefreshButton } from './RefreshButton.svelte';
+export { default as RunnableComponent } from './RunnableComponent.svelte';
+export { default as RunnableWrapper } from './RunnableWrapper.svelte';

package/components/apps/components/icon.d.ts

@@ -0,0 +1 @@
+export declare function loadIcon(name: string): Promise<any>;

package/components/apps/components/icon.js

@@ -0,0 +1,18 @@
+import { toKebabCase } from '../utils';
+export async function loadIcon(name) {
+    let iconComponent;
+    try {
+        if (name) {
+            name = toKebabCase(name).replace(/([a-z])(\d)/i, '$1-$2');
+            iconComponent = (await import(`../../../../../node_modules/lucide-svelte/dist/svelte/icons/${name}.svelte`)).default;
+            return iconComponent;
+        }
+        else {
+            iconComponent = undefined;
+        }
+    }
+    catch (error) {
+        console.error(error);
+        iconComponent = undefined;
+    }
+}

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

@@ -0,0 +1,5 @@
+export * from './buttons';
+export * from './display';
+export * from './inputs';
+export * from './layout';
+export * from './helpers';

package/components/apps/components/index.js

@@ -0,0 +1,5 @@
+export * from './buttons';
+export * from './display';
+export * from './inputs';
+export * from './layout';
+export * from './helpers';

package/components/apps/components/inputs/AppCheckbox.svelte

@@ -0,0 +1,38 @@
+<script>import Toggle from '../../../Toggle.svelte';
+import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+let defaultValue = undefined;
+let labelValue = '';
+// As the checkbox is a special case and has no input
+// we need to manually set the output
+let outputs = initOutput($worldStore, id, {
+    result: false
+});
+$: defaultValue != undefined && outputs?.result.set(defaultValue);
+$: css = concatCustomCss($app.css?.checkboxcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+	<Toggle
+		checked={defaultValue}
+		options={{ right: labelValue }}
+		textClass={css?.text?.class ?? ''}
+		textStyle={css?.text?.style ?? ''}
+		on:change={(e) => {
+			outputs.result.set(e.detail)
+		}}
+	/>
+</AlignWrapper>

package/components/apps/components/{selectInputs → inputs}/AppCheckbox.svelte.d.ts

@@ -1,12 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'checkboxcomponent'> | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,6 +18,5 @@ export type AppCheckboxProps = typeof __propDef.props;
 export type AppCheckboxEvents = typeof __propDef.events;
 export type AppCheckboxSlots = typeof __propDef.slots;
 export default class AppCheckbox extends SvelteComponentTyped<AppCheckboxProps, AppCheckboxEvents, AppCheckboxSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/AppDateInput.svelte

@@ -0,0 +1,49 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let inputType;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
+let labelValue = 'Title';
+let minValue = '';
+let maxValue = '';
+let defaultValue = undefined;
+let value = undefined;
+let outputs = initOutput($worldStore, id, {
+    result: undefined
+});
+$: handleDefault(defaultValue);
+$: outputs?.result.set(value);
+function handleDefault(defaultValue) {
+    value = defaultValue;
+}
+$: css = concatCustomCss($app.css?.dateinputcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.minDate} bind:value={minValue} />
+<InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+
+<AlignWrapper {render} {verticalAlignment}>
+	{#if inputType === 'date'}
+		<input
+			on:focus={() => ($selectedComponent = [id])}
+			on:pointerdown|stopPropagation
+			type="date"
+			bind:value
+			min={minValue}
+			max={maxValue}
+			placeholder="Type..."
+			class={twMerge(css?.input?.class ?? '')}
+			style={css?.input?.style ?? ''}
+		/>
+	{/if}
+</AlignWrapper>

package/components/apps/components/{dateInputs → inputs}/AppDateInput.svelte.d.ts

@@ -1,14 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        configuration: Record<string, AppInput>;
-        inputType: 'date' | 'time' | 'datetime-local';
+        configuration: RichConfigurations;
+        inputType: 'date';
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'dateinputcomponent'> | undefined;
+        render: boolean;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -17,6 +20,5 @@ export type AppDateInputProps = typeof __propDef.props;
 export type AppDateInputEvents = typeof __propDef.events;
 export type AppDateInputSlots = typeof __propDef.slots;
 export default class AppDateInput extends SvelteComponentTyped<AppDateInputProps, AppDateInputEvents, AppDateInputSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/AppFileInput.svelte

@@ -0,0 +1,44 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { FileInput } from '../../../common';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+let acceptedFileTypes = undefined;
+let allowMultiple = undefined;
+let text = undefined;
+let outputs = initOutput($worldStore, id, {
+    result: []
+});
+// Receives Base64 encoded strings from the input component
+async function handleChange(files) {
+    outputs?.result.set(files);
+}
+$: css = concatCustomCss($app.css?.fileinputcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.acceptedFileTypes} bind:value={acceptedFileTypes} />
+<InputValue {id} input={configuration.allowMultiple} bind:value={allowMultiple} />
+<InputValue {id} input={configuration.text} bind:value={text} />
+
+{#if render}
+	<div class="w-full h-full p-1">
+		<FileInput
+			accept={acceptedFileTypes?.length ? acceptedFileTypes?.join(', ') : undefined}
+			multiple={allowMultiple}
+			convertTo="base64"
+			on:change={({ detail }) => {
+				handleChange(detail)
+			}}
+			class={twMerge('w-full h-full', css?.container?.class)}
+			style={css?.container?.style}
+		>
+			{text}
+		</FileInput>
+	</div>
+{/if}

package/components/apps/components/inputs/AppFileInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'containercomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppFileInputProps = typeof __propDef.props;
+export type AppFileInputEvents = typeof __propDef.events;
+export type AppFileInputSlots = typeof __propDef.slots;
+export default class AppFileInput extends SvelteComponentTyped<AppFileInputProps, AppFileInputEvents, AppFileInputSlots> {
+}
+export {};

package/components/apps/components/inputs/AppMultiSelect.svelte

@@ -0,0 +1,93 @@
+<script>import { getContext } from 'svelte';
+import Select from 'svelte-select';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults';
+import { initOutput } from '../../editor/appUtils';
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, connectingInput, selectedComponent } = getContext('AppViewerContext');
+let items;
+let placeholder = 'Select an item';
+let outputs = initOutput($worldStore, id, {
+    result: []
+});
+// $: outputs && handleOutputs()
+// function handleOutputs() {
+// 	value = outputs.result.peak()
+// }
+let value = outputs?.result.peak();
+$: labels && handleItems();
+let labels = [];
+function handleItems() {
+    if (labels) {
+        items = labels?.map((label) => {
+            return {
+                label,
+                value: label
+            };
+        });
+    }
+}
+$: value && outputs?.result.set(value.map((v) => v.value));
+$: css = concatCustomCss($app.css?.multiselectcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.items} bind:value={labels} />
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+	<div
+		class="app-select w-full"
+		style="height: 100%; overflow: auto;"
+		on:pointerdown={(e) => {
+			if (!e.shiftKey) {
+				e.stopPropagation()
+			}
+		}}
+	>
+		{#if !value || Array.isArray(value)}
+			<Select
+				--border-radius="0"
+				--border-color="#999"
+				multiple
+				on:change={(e) => e.stopPropagation()}
+				{items}
+				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+				containerStyles={'border-color: #999; min-height: 100%;' +
+					SELECT_INPUT_DEFAULT_STYLE.containerStyles +
+					css?.input?.style}
+				bind:value
+				{placeholder}
+				on:click={() => {
+					if (!$connectingInput.opened) {
+						$selectedComponent = [id]
+					}
+				}}
+				on:focus={() => {
+					if (!$connectingInput.opened) {
+						$selectedComponent = [id]
+					}
+				}}
+				floatingConfig={{
+					strategy: 'fixed'
+				}}
+			/>
+		{:else}
+			Value {value} is not an array
+		{/if}
+	</div>
+</AlignWrapper>
+
+<style global>
+	:global(.app-select) :global(.value-container) {
+		padding: 0 !important;
+	}
+	:global(.svelte-select-list) {
+		z-index: 1000 !important;
+	}</style>

package/components/apps/components/inputs/AppMultiSelect.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'multiselectcomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppMultiSelectProps = typeof __propDef.props;
+export type AppMultiSelectEvents = typeof __propDef.events;
+export type AppMultiSelectSlots = typeof __propDef.slots;
+export default class AppMultiSelect extends SvelteComponentTyped<AppMultiSelectProps, AppMultiSelectEvents, AppMultiSelectSlots> {
+}
+export {};

package/components/apps/components/inputs/AppNumberInput.svelte

@@ -0,0 +1,54 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
+let defaultValue = undefined;
+let placeholder = undefined;
+let value = undefined;
+let min = undefined;
+let max = undefined;
+let step = 1;
+let outputs = initOutput($worldStore, id, {
+    result: undefined
+});
+$: handleDefault(defaultValue);
+$: outputs?.result.set(value);
+function handleDefault(defaultValue) {
+    value = defaultValue;
+}
+$: css = concatCustomCss($app.css?.numberinputcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.step} bind:value={step} />
+<InputValue {id} input={configuration.min} bind:value={min} />
+<InputValue {id} input={configuration.max} bind:value={max} />
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+
+<AlignWrapper {render} {verticalAlignment}>
+	<input
+		on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
+		on:focus={() => ($selectedComponent = [id])}
+		class={twMerge(
+			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2',
+			css?.input?.class ?? ''
+		)}
+		style={css?.input?.style ?? ''}
+		bind:value
+		{min}
+		{max}
+		{step}
+		type="number"
+		inputmode="numeric"
+		pattern="\d*"
+		{placeholder}
+	/>
+</AlignWrapper>

package/components/apps/components/{numberInputs → inputs}/AppNumberInput.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'numberinputcomponent'> | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,6 +17,5 @@ export type AppNumberInputProps = typeof __propDef.props;
 export type AppNumberInputEvents = typeof __propDef.events;
 export type AppNumberInputSlots = typeof __propDef.slots;
 export default class AppNumberInput extends SvelteComponentTyped<AppNumberInputProps, AppNumberInputEvents, AppNumberInputSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/AppRangeInput.svelte

@@ -0,0 +1,94 @@
+<script>import RangeSlider from 'svelte-range-slider-pips';
+import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import { concatCustomCss } from '../../utils';
+import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
+export let id;
+export let configuration;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+export let initializing = true;
+const { app, worldStore } = getContext('AppViewerContext');
+let min = 0;
+let max = 42;
+let step = 1;
+let slider;
+let values = [0, 0];
+let outputs = initOutput($worldStore, id, {
+    result: null
+});
+console.log('reset');
+$: outputs?.result.set(values);
+$: css = concatCustomCss($app.css?.rangecomponent, customCss);
+let lastStyle = undefined;
+$: if (css && slider && lastStyle !== css?.handles?.style) {
+    const handles = slider.querySelectorAll('.rangeNub');
+    if (handles) {
+        lastStyle = css?.handles?.style;
+        handles.forEach((handle) => (handle.style.cssText = css?.handles?.style ?? ''));
+    }
+}
+</script>
+
+<InputValue {id} input={configuration.step} bind:value={step} />
+<InputValue {id} input={configuration.min} bind:value={min} />
+<InputValue {id} input={configuration.max} bind:value={max} />
+<InputValue {id} input={configuration.defaultLow} bind:value={values[0]} />
+<InputValue
+	on:done={() => (initializing = false)}
+	{id}
+	input={configuration.defaultHigh}
+	bind:value={values[1]}
+/>
+
+<AlignWrapper {render} {verticalAlignment}>
+	<div class="flex flex-col w-full">
+		<div class="flex items-center w-full gap-1 px-1">
+			<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
+				{+min}
+			</span>
+			<div
+				class="grow"
+				style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
+					''}"
+				on:pointerdown|stopPropagation
+			>
+				<RangeSlider
+					bind:slider
+					bind:values
+					{step}
+					min={!min ? 0 : +min}
+					max={!max ? 1 : +max}
+					range
+				/>
+				<!-- <RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values /> -->
+			</div>
+			<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
+				{+max}
+			</span>
+		</div>
+		<div class="flex justify-between px-1">
+			<span
+				class={twMerge(
+					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
+					css?.values?.class ?? ''
+				)}
+				style={css?.values?.style ?? ''}
+			>
+				{values[0]}
+			</span>
+			<span
+				class={twMerge(
+					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
+					css?.values?.class ?? ''
+				)}
+				style={css?.values?.style ?? ''}
+			>
+				{values[1]}
+			</span>
+		</div>
+	</div>
+</AlignWrapper>