windmill-components 1.60.4 → 1.83.1

package/components/apps/editor/settingsPanel/StylePanel.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import { type AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        component: AppComponent | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StylePanelProps = typeof __propDef.props;
+export type StylePanelEvents = typeof __propDef.events;
+export type StylePanelSlots = typeof __propDef.slots;
+export default class StylePanel extends SvelteComponentTyped<StylePanelProps, StylePanelEvents, StylePanelSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/SubTypeEditor.svelte

@@ -1,15 +1,17 @@
 <script>import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 export let value;
 export let componentInput;
+export let subFieldType;
 let fakeComponentInput = {
     ...componentInput,
-    value,
-    // We don't support array of arrays
-    // @ts-ignore
-    fieldType: componentInput.subFieldType
+    value
 };
 // Bubble up changes to the real componentInput
 $: fakeComponentInput && (value = fakeComponentInput.value);
 </script>
 
-<StaticInputEditor bind:componentInput={fakeComponentInput} />
+<StaticInputEditor
+	noVariablePicker
+	fieldType={subFieldType}
+	bind:componentInput={fakeComponentInput}
+/>

package/components/apps/editor/settingsPanel/SubTypeEditor.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { StaticAppInput } from '../../inputType';
+import type { InputType, StaticInput } from '../../inputType';
 declare const __propDef: {
     props: {
         value: any;
-        componentInput: StaticAppInput;
+        componentInput: StaticInput<any>;
+        subFieldType: InputType | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/TableActionLabel.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
+import type { RichConfiguration } from '../../types';
 declare const __propDef: {
     props: {
-        componentInput: AppInput | undefined;
+        componentInput: RichConfiguration | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -5,57 +5,27 @@ import { classNames } from '../../../../utils';
 import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
+import { appComponentFromType, clearErrorByComponentId, clearJobsByComponentId } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
 import TableActionLabel from './TableActionLabel.svelte';
 export let components;
 export let id;
-const { selectedComponent, staticOutputs } = getContext('AppEditorContext');
+const { selectedComponent, app, errorByComponent, jobs } = getContext('AppViewerContext');
 function addComponent() {
     const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
     const newComponent = {
-        id: `${id}_${actionId}`,
-        type: 'buttoncomponent',
-        configuration: {
-            label: {
-                type: 'static',
-                value: 'Action',
-                fieldType: 'text'
-            },
-            color: {
-                fieldType: 'select',
-                type: 'static',
-                value: 'dark',
-                optionValuesKey: 'buttonColorOptions'
-            },
-            size: {
-                fieldType: 'select',
-                type: 'static',
-                value: 'xs',
-                optionValuesKey: 'buttonSizeOptions'
-            },
-            disabled: {
-                fieldType: 'boolean',
-                type: 'eval',
-                expr: 'false'
-            }
-        },
-        componentInput: {
-            type: 'runnable',
-            fieldType: 'any',
-            fields: {},
-            runnable: undefined,
-            value: undefined
-        },
-        recomputeIds: undefined,
-        card: false
+        ...appComponentFromType('buttoncomponent')(`${id}_${actionId}`),
+        recomputeIds: []
     };
     components = [...components, newComponent];
+    $app = $app;
 }
 function deleteComponent(cid) {
     components = components.filter((x) => x.id !== cid);
-    delete $staticOutputs[cid];
-    $staticOutputs = $staticOutputs;
-    $selectedComponent = id;
+    $errorByComponent = clearErrorByComponentId(cid, $errorByComponent);
+    $jobs = clearJobsByComponentId(cid, $jobs);
+    $selectedComponent = [id];
+    $app = $app;
 }
 </script>
 
@@ -79,24 +49,35 @@ function deleteComponent(cid) {
 			class={classNames(
 				'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
 				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
-				$selectedComponent === component.id ? 'outline outline-blue-500 bg-red-400' : ''
+				$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
 			)}
 			on:click={() => {
-				$selectedComponent = component.id
+				$selectedComponent = [component.id]
 			}}
 			on:keypress
 		>
+			<Badge color="dark-indigo">
+				{component.id}
+			</Badge>
+
+			<div>
+				<TableActionLabel componentInput={component.configuration.label} />
+			</div>
 			<div>
 				<Button variant="border" color="red" on:click={() => deleteComponent(component.id)}>
 					<Icon class="h-3" data={faTrashAlt} />
 				</Button>
 			</div>
-			<div>
-				<TableActionLabel componentInput={component.configuration.label} />
-			</div>
-			<Badge color="dark-indigo">
-				{component.id}
-			</Badge>
 		</div>
 	{/each}
+	<div class="w-full">
+		<Button
+			btnClasses="w-full"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addComponent}
+			iconOnly
+		/>
+	</div>
 </PanelSection>

package/components/apps/editor/settingsPanel/TableActions.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ButtonComponent, BaseAppComponent } from '../../types';
+import type { BaseAppComponent } from '../../types';
+import type { ButtonComponent } from '../component';
 declare const __propDef: {
     props: {
         components: (BaseAppComponent & ButtonComponent)[];

package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -1,7 +1,6 @@
 <script>import { classNames } from '../../../../../utils';
 import Tooltip from '../../../../Tooltip.svelte';
 export let title;
-export let smallPadding = false;
 export let noPadding = false;
 export let titlePadding = '';
 export let tooltip = '';
@@ -11,14 +10,16 @@ export let tooltip = '';
 	class={classNames(
 		$$props.class,
 		'flex flex-col h-full gap-2 items-start',
-		noPadding ? '' : smallPadding ? 'p-2' : 'p-4'
+		noPadding ? '' : 'p-3'
 	)}
 >
-	<div class="flex justify-between items-center w-full gap-1">
-		<div class="text-sm font-extrabold {titlePadding}">
-			{title}
+	<div class="flex justify-between flex-wrap items-center w-full gap-1">
+		<div class="text-sm inline-flex items-center font-extrabold {titlePadding} gap-1">
+			<span class="truncate">
+				{title}
+			</span>
 			{#if tooltip}
-				<Tooltip>
+				<Tooltip light>
 					{tooltip}
 				</Tooltip>
 			{/if}

package/components/apps/editor/settingsPanel/common/PanelSection.svelte.d.ts

@@ -3,7 +3,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title: string;
-        smallPadding?: boolean | undefined;
         noPadding?: boolean | undefined;
         titlePadding?: string | undefined;
         tooltip?: string | undefined;

package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte

@@ -0,0 +1,48 @@
+<script>import { createEventDispatcher } from 'svelte';
+import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
+import { ClearableInput } from '../../../../common';
+export let value = '#fff';
+const dispatch = createEventDispatcher();
+let isOpen = false;
+$: dispatch('change', value);
+</script>
+
+<div class="color-picker-input grow">
+	<ClearableInput readonly bind:value on:focus={() => (isOpen = true)} />
+	<ColorPicker
+		bind:isOpen
+		bind:hex={value}
+		label={value}
+		canChangeMode={false}
+		components={ChromeVariant}
+		toRight
+		--focus-color="#e0e7ff"
+	/>
+</div>
+
+<style global>
+	:global(.color-picker-input) :global(span) > :global(label) {
+		display: none;
+	}
+
+	:global(.color-picker-input) :global(span) > :global(div.wrapper) {
+		box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.25) !important;
+		border-style: none !important;
+		border-radius: 0.375rem !important;
+		z-index: 20;
+	}
+
+	:global(.color-picker-input) :global(.slider-wrapper) {
+		overflow: visible !important;
+	}
+
+	:global(.color-picker-input) :global(.slider-indicator) {
+		width: 14px !important;
+		height: 14px !important;
+		border-radius: 7px !important;
+		margin-top: 0 !important;
+		background-color: #fafafa !important;
+		border: 1px solid #2e2e2eaf !important;
+		top: -2px !important;
+		box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5) !important;
+	}</style>

package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorInputProps = typeof __propDef.props;
+export type ColorInputEvents = typeof __propDef.events;
+export type ColorInputSlots = typeof __propDef.slots;
+export default class ColorInput extends SvelteComponentTyped<ColorInputProps, ColorInputEvents, ColorInputSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte

@@ -2,7 +2,7 @@
 import { faArrowRight, faClose } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 export let componentInput;
-const { connectingInput } = getContext('AppEditorContext');
+const { connectingInput, app, worldStore } = getContext('AppViewerContext');
 function applyConnection() {
     if (!$connectingInput.opened &&
         $connectingInput.input !== undefined &&
@@ -14,13 +14,8 @@ function applyConnection() {
             hoveredComponent: undefined
         };
     }
-}
-function startConnecting() {
-    $connectingInput = {
-        opened: true,
-        input: undefined,
-        hoveredComponent: undefined
-    };
+    $app = $app;
+    $worldStore = $worldStore;
 }
 $: $connectingInput && applyConnection();
 </script>
@@ -47,6 +42,7 @@ $: $connectingInput && applyConnection();
 			if (componentInput.type === 'connected') {
 				componentInput.connection = undefined
 			}
+			$app = $app
 		}}
 	>
 		Disconnect

package/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte

@@ -4,11 +4,10 @@ import { buildExtraLib } from '../../../utils';
 export let componentInput;
 export let id;
 export let hasRows = false;
-const { onchange, worldStore } = getContext('AppEditorContext');
-$: componentInput && onchange?.();
+const { onchange, worldStore, state } = getContext('AppViewerContext');
 $: extraLib =
     componentInput?.expr && $worldStore
-        ? buildExtraLib($worldStore?.outputsById ?? {}, id, hasRows)
+        ? buildExtraLib($worldStore?.outputsById ?? {}, id, hasRows, $state, false)
         : undefined;
 </script>
 
@@ -20,6 +19,11 @@ $: extraLib =
 			shouldBindKey={false}
 			{extraLib}
 			autoHeight
+			on:change={() => {
+				if (onchange) {
+					onchange()
+				}
+			}}
 		/>
 	</div>
 {/if}

package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte

@@ -0,0 +1,119 @@
+<script>import { Loader2, X } from 'lucide-svelte';
+import { Popup } from '../../../../common';
+import { fade } from 'svelte/transition';
+export let componentInput;
+let anchor;
+let loading = false;
+let items;
+let filteredItems;
+let search = '';
+let openPopup;
+$: if (search) {
+    filteredItems = items.filter((item) => {
+        return item.label.toLowerCase().includes(search.toLowerCase());
+    });
+}
+else {
+    filteredItems = items;
+}
+async function getData() {
+    if (items) {
+        return openPopup();
+    }
+    loading = true;
+    const data = await import('lucide-svelte/dist/svelte/icons');
+    filteredItems = items = Object.entries(data)
+        .filter(([key]) => !(key.endsWith('Icon') || key.startsWith('Lucide')))
+        .map(([key, icon]) => ({ label: key, icon }));
+    loading = false;
+    openPopup();
+}
+function formatName(name) {
+    // Inserts space before capital letters and numbers
+    return (name
+        ?.replace(/([A-Z])/g, ' $1')
+        .trim()
+        .replace(/([a-z])(\d)/i, '$1 $2') || '');
+}
+function select(label) {
+    componentInput.value = label;
+    const elem = document.activeElement;
+    if (elem.blur) {
+        elem.blur();
+    }
+}
+</script>
+
+<div class="relative">
+	<input
+		readonly
+		value={formatName(componentInput.value)}
+		bind:this={anchor}
+		on:focus={getData}
+		class="pr-8"
+	/>
+	{#if loading}
+		<div class="center-center absolute right-2 top-1/2 transform -translate-y-1/2 p-0.5">
+			<Loader2 class="animate-spin" size={16} />
+		</div>
+	{:else if componentInput.value}
+		<button
+			class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
+			on:click|stopPropagation|preventDefault={() => (componentInput.value = undefined)}
+			title="Clear"
+			aria-label="Clear"
+		>
+			<X size="14" />
+		</button>
+	{/if}
+</div>
+{#if anchor}
+	<Popup
+		ref={anchor}
+		options={{ placement: 'bottom' }}
+		bind:open={openPopup}
+		let:close
+		transition={fade}
+	>
+		{#if !loading}
+			<div class="max-w-xs shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
+				{#if filteredItems}
+					<input
+						on:keydown|stopPropagation
+						bind:value={search}
+						type="text"
+						placeholder="Search"
+						class="col-span-4 mb-2"
+					/>
+					<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
+						{#each filteredItems as { label, icon }}
+							{@const formatedLabel = formatName(label)}
+							<button
+								type="button"
+								title={formatedLabel}
+								on:click={() => {
+									select(label)
+									close()
+								}}
+								class="w-full center-center flex-col font-normal p-1 
+									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 
+									{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
+							>
+								<svelte:component this={icon} size={22} />
+								<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
+									{formatedLabel}
+								</span>
+							</button>
+						{:else}
+							<div class="col-span-4 text-center text-gray-700 text-sm p-2">
+								No icons match your search
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<div class="text-center text-sm text-gray-600 p-2"> Couldn't load options </div>
+				{/if}
+			</div>
+		{/if}
+	</Popup>
+{/if}

package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { StaticInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: StaticInput<string>;
+    };
+    events: {
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconSelectInputProps = typeof __propDef.props;
+export type IconSelectInputEvents = typeof __propDef.events;
+export type IconSelectInputSlots = typeof __propDef.slots;
+export default class IconSelectInput extends SvelteComponentTyped<IconSelectInputProps, IconSelectInputEvents, IconSelectInputSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte

@@ -1,22 +1,23 @@
 <script>import SimpleEditor from '../../../../SimpleEditor.svelte';
 export let code;
-export let value;
+export let value = undefined;
+export let error = '';
+export let editor = undefined;
 function parseJson() {
     try {
-        value = JSON.parse(code);
+        value = JSON.parse(code ?? '');
         error = '';
     }
     catch (e) {
         error = e.message;
     }
 }
-let error = '';
 $: code && parseJson();
 </script>
 
 <div class="flex flex-col w-full">
 	<div class="border border-gray-300 w-full">
-		<SimpleEditor autoHeight lang="json" bind:code />
+		<SimpleEditor on:focus bind:this={editor} on:change autoHeight lang="json" bind:code />
 	</div>
 	{#if error != ''}
 		<span class="text-red-600 text-xs">{error}</span>

package/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte.d.ts

@@ -1,10 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
+import SimpleEditor from '../../../../SimpleEditor.svelte';
 declare const __propDef: {
     props: {
-        code: string;
-        value: any;
+        code: string | undefined;
+        value?: any;
+        error?: string | undefined;
+        editor?: SimpleEditor | undefined;
     };
     events: {
+        focus: CustomEvent<any>;
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte

@@ -3,11 +3,11 @@ import RunnableSelector from '../mainInput/RunnableSelector.svelte';
 import SelectedRunnable from '../SelectedRunnable.svelte';
 export let appInput;
 export let defaultUserInput = false;
-$: isRunnableSelected = isScriptByPathDefined(appInput) || isScriptByNameDefined(appInput);
+export let appComponent;
 </script>
 
-{#if isRunnableSelected}
-	<SelectedRunnable bind:appInput />
-{:else}
-	<RunnableSelector {defaultUserInput} bind:appInput />
+{#if isScriptByPathDefined(appInput) || isScriptByNameDefined(appInput)}
+	<SelectedRunnable {appComponent} bind:appInput />
+{:else if appInput !== undefined}
+	<RunnableSelector id={appComponent.id} {defaultUserInput} bind:appInput />
 {/if}

package/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ResultAppInput } from '../../../inputType';
+import type { AppComponent } from '../../component';
 declare const __propDef: {
     props: {
         appInput: ResultAppInput;
         defaultUserInput?: boolean | undefined;
+        appComponent: AppComponent;
     };
     events: {
         [evt: string]: CustomEvent<any>;