windmill-components 1.85.0 → 1.87.0

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -1,101 +0,0 @@
-<script>import { getContext, onMount } from 'svelte';
-import { isScriptByNameDefined, isScriptByPathDefined } from '../../utils';
-import NonRunnableComponent from './NonRunnableComponent.svelte';
-import RunnableComponent from './RunnableComponent.svelte';
-import { goto } from '$app/navigation';
-import { sendUserToast } from '../../../../utils';
-export let componentInput;
-export let id;
-export let result = undefined;
-export let initializing = true;
-export let loading = false;
-export let extraQueryParams = {};
-export let autoRefresh = true;
-export let runnableComponent = undefined;
-export let forceSchemaDisplay = false;
-export let runnableClass = '';
-export let runnableStyle = '';
-export let doOnSuccess = undefined;
-export let render;
-export let recomputeIds = [];
-export let outputs;
-export let extraKey = undefined;
-const { staticExporter, noBackend, componentControl, runnableComponents } = getContext('AppViewerContext');
-$: if (initializing && result != undefined) {
-    initializing = false;
-}
-if (noBackend && componentInput?.type == 'runnable') {
-    result = componentInput?.['value'];
-}
-onMount(() => {
-    $staticExporter[id] = () => result;
-});
-function isRunnableDefined(componentInput) {
-    return isScriptByNameDefined(componentInput) || isScriptByPathDefined(componentInput);
-}
-export function onSuccess() {
-    if (recomputeIds) {
-        recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb());
-    }
-    if (!doOnSuccess)
-        return;
-    if (doOnSuccess.selected == 'none')
-        return;
-    if (doOnSuccess.selected == 'setTab') {
-        if (Array.isArray(doOnSuccess.configuration.setTab.setTab)) {
-            doOnSuccess.configuration.setTab?.setTab?.forEach((tab) => {
-                if (tab) {
-                    const { id, index } = tab;
-                    $componentControl[id].setTab?.(index);
-                }
-            });
-        }
-    }
-    else if (doOnSuccess.selected == 'gotoUrl' &&
-        doOnSuccess.configuration.gotoUrl.url &&
-        doOnSuccess.configuration.gotoUrl.url != '') {
-        if (doOnSuccess.configuration.gotoUrl.newTab) {
-            window.open(doOnSuccess.configuration.gotoUrl.url, '_blank');
-        }
-        else {
-            goto(doOnSuccess.configuration.gotoUrl.url);
-        }
-    }
-    else if (doOnSuccess.selected == 'sendToast' &&
-        doOnSuccess.configuration.sendToast.message &&
-        doOnSuccess.configuration.sendToast.message != '') {
-        sendUserToast(doOnSuccess.configuration.sendToast.message);
-    }
-}
-</script>
-
-{#if componentInput === undefined}
-	<slot />
-{:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
-	<RunnableComponent
-		{extraKey}
-		bind:loading
-		bind:this={runnableComponent}
-		fields={componentInput.fields}
-		bind:result
-		runnable={componentInput.runnable}
-		transformer={componentInput.transformer}
-		{autoRefresh}
-		bind:doNotRecomputeOnInputChanged={componentInput.doNotRecomputeOnInputChanged}
-		{id}
-		{extraQueryParams}
-		{forceSchemaDisplay}
-		{initializing}
-		wrapperClass={runnableClass}
-		wrapperStyle={runnableStyle}
-		{render}
-		on:success={onSuccess}
-		{outputs}
-	>
-		<slot />
-	</RunnableComponent>
-{:else}
-	<NonRunnableComponent {render} bind:result {id} {componentInput}>
-		<slot />
-	</NonRunnableComponent>
-{/if}

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

@@ -1,58 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
-import type { Output } from '../../rx';
-import RunnableComponent from './RunnableComponent.svelte';
-declare const __propDef: {
-    props: {
-        componentInput: AppInput | undefined;
-        id: string;
-        result?: any;
-        initializing?: boolean | undefined;
-        loading?: boolean | undefined;
-        extraQueryParams?: Record<string, any> | undefined;
-        autoRefresh?: boolean | undefined;
-        runnableComponent?: RunnableComponent | undefined;
-        forceSchemaDisplay?: boolean | undefined;
-        runnableClass?: string | undefined;
-        runnableStyle?: string | undefined;
-        doOnSuccess?: {
-            selected: 'gotoUrl' | 'none' | 'setTab' | 'sendToast';
-            configuration: {
-                gotoUrl: {
-                    url: string | undefined;
-                    newTab: boolean | undefined;
-                };
-                setTab: {
-                    setTab: {
-                        id: string;
-                        index: number;
-                    }[] | undefined;
-                };
-                sendToast: {
-                    message: string | undefined;
-                };
-            };
-        } | undefined;
-        render: boolean;
-        recomputeIds?: string[] | undefined;
-        outputs: {
-            result: Output<any>;
-            loading: Output<boolean>;
-        };
-        extraKey?: string | undefined;
-        onSuccess?: (() => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type RunnableWrapperProps = typeof __propDef.props;
-export type RunnableWrapperEvents = typeof __propDef.events;
-export type RunnableWrapperSlots = typeof __propDef.slots;
-export default class RunnableWrapper extends SvelteComponentTyped<RunnableWrapperProps, RunnableWrapperEvents, RunnableWrapperSlots> {
-    get onSuccess(): () => void;
-}
-export {};

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

@@ -1,38 +0,0 @@
-<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/inputs/AppDateInput.svelte

@@ -1,49 +0,0 @@
-<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/inputs/AppFileInput.svelte

@@ -1,44 +0,0 @@
-<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/AppMultiSelect.svelte

@@ -1,93 +0,0 @@
-<script>import { getContext } from 'svelte';
-import Select from 'svelte-select';
-import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults';
-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, 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/AppNumberInput.svelte

@@ -1,54 +0,0 @@
-<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/inputs/AppRangeInput.svelte

@@ -1,94 +0,0 @@
-<script>import { getContext } from 'svelte';
-import RangeSlider from 'svelte-range-slider-pips';
-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;
-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>

package/components/apps/components/inputs/AppSelect.svelte

@@ -1,144 +0,0 @@
-<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: undefined
-});
-let value = outputs?.result.peak();
-$: items && handleItems();
-let listItems = [];
-function handleItems() {
-    listItems = Array.isArray(items)
-        ? items.map((item) => {
-            return {
-                label: item.label,
-                value: JSON.stringify(item.value)
-            };
-        })
-        : [];
-    let rawValue;
-    if (defaultValue) {
-        rawValue = defaultValue;
-    }
-    else if (listItems.length > 0) {
-        rawValue = items[0].value;
-    }
-    if (rawValue) {
-        value = JSON.stringify(rawValue);
-        outputs?.result.set(rawValue);
-    }
-}
-function onChange(e) {
-    e?.stopPropagation();
-    if (create) {
-        listItems = listItems.map((i) => {
-            delete i.created;
-            return i;
-        });
-    }
-    let result = undefined;
-    try {
-        result = JSON.parse(e.detail?.['value']);
-    }
-    catch (_) { }
-    value = e.detail?.['value'];
-    outputs?.result.set(result);
-}
-$: css = concatCustomCss($app.css?.selectcomponent, customCss);
-let defaultValue = undefined;
-function handleFilter(e) {
-    if (create) {
-        if (e.detail.length === 0 && filterText.length > 0) {
-            const prev = listItems.filter((i) => !i.created);
-            listItems = [
-                ...prev,
-                { value: JSON.stringify(filterText), label: filterText, created: true }
-            ];
-        }
-    }
-}
-$: defaultValue && handleDefault();
-function handleDefault() {
-    if (defaultValue) {
-        value = JSON.stringify(defaultValue);
-        outputs?.result.set(defaultValue);
-    }
-}
-let create = false;
-let filterText = '';
-</script>
-
-<InputValue {id} input={configuration.items} bind:value={items} />
-<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
-<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
-<InputValue {id} input={configuration.create} bind:value={create} />
-
-<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	<div
-		class="app-select w-full"
-		style="height: 34px;"
-		on:pointerdown={(e) => {
-			if (!e.shiftKey) {
-				e.stopPropagation()
-			}
-		}}
-	>
-		<Select
-			--border-radius="0"
-			--border-color="#999"
-			bind:filterText
-			on:filter={handleFilter}
-			on:clear={onChange}
-			on:change={onChange}
-			items={listItems}
-			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-			containerStyles={'border-color: #999;' +
-				SELECT_INPUT_DEFAULT_STYLE.containerStyles +
-				css?.input?.style}
-			{value}
-			{placeholder}
-			on:click={() => {
-				if (!$connectingInput.opened) {
-					$selectedComponent = [id]
-				}
-			}}
-			on:focus={() => {
-				if (!$connectingInput.opened) {
-					$selectedComponent = [id]
-				}
-			}}
-			floatingConfig={{
-				strategy: 'fixed'
-			}}
-		>
-			<div slot="item" let:item>
-				{#if create}
-					{item.created ? 'Add new: ' : ''}
-				{/if}
-
-				{item.label}
-			</div>
-		</Select>
-	</div>
-</AlignWrapper>
-
-<style global>
-	:global(.app-select) :global(.value-container) {
-		padding: 0 !important;
-	}
-	:global(.svelte-select-list) {
-		z-index: 1000 !important;
-	}</style>