windmill-components 1.60.4 → 1.75.0

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 } = getContext('AppViewerContext');
 function applyConnection() {
     if (!$connectingInput.opened &&
         $connectingInput.input !== undefined &&

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

@@ -4,7 +4,7 @@ import { buildExtraLib } from '../../../utils';
 export let componentInput;
 export let id;
 export let hasRows = false;
-const { onchange, worldStore } = getContext('AppEditorContext');
+const { onchange, worldStore } = getContext('AppViewerContext');
 $: componentInput && onchange?.();
 $: extraLib =
     componentInput?.expr && $worldStore

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

@@ -0,0 +1,107 @@
+<script>import { Loader2, X } from 'lucide-svelte';
+import { Popup } from '../../../../common';
+export let componentInput;
+let anchor;
+let loading = false;
+let items;
+let filteredItems;
+let search = '';
+$: if (search) {
+    filteredItems = items.filter((item) => {
+        return item.label.toLowerCase().includes(search.toLowerCase());
+    });
+}
+else {
+    filteredItems = items;
+}
+async function getData() {
+    if (items)
+        return;
+    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;
+}
+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;
+    if (document.activeElement?.blur) {
+        ;
+        document.activeElement.blur();
+    }
+}
+</script>
+
+<div class="relative">
+	<input
+		readonly
+		value={formatName(componentInput.value)}
+		bind:this={anchor}
+		on:focus={getData}
+		class="pr-8"
+	/>
+	{#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' }} let:close>
+		<div class="max-w-xs shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
+			{#if loading}
+				<div class="center-center p-2">
+					<Loader2 class="animate-spin" size={18} />
+				</div>
+			{:else 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>
+	</Popup>
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput, StaticInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: StaticInput<string> & Extract<AppInput, {
+            fieldType: 'icon-select';
+        }>;
+    };
+    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,6 +1,7 @@
 <script>import SimpleEditor from '../../../../SimpleEditor.svelte';
 export let code;
-export let value;
+export let value = undefined;
+export let error = '';
 function parseJson() {
     try {
         value = JSON.parse(code);
@@ -10,7 +11,6 @@ function parseJson() {
         error = e.message;
     }
 }
-let error = '';
 $: code && parseJson();
 </script>
 

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

@@ -2,7 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         code: string;
-        value: any;
+        value?: any;
+        error?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -4,26 +4,60 @@ import ArrayStaticInputEditor from '../ArrayStaticInputEditor.svelte';
 import ResourcePicker from '../../../../ResourcePicker.svelte';
 import JsonEditor from './JsonEditor.svelte';
 import { getContext } from 'svelte';
+import IconSelectInput from './IconSelectInput.svelte';
+import ColorInput from './ColorInput.svelte';
+import { Icon } from 'svelte-awesome';
+import { faDollarSign } from '@fortawesome/free-solid-svg-icons';
 export let componentInput;
-const { onchange } = getContext('AppEditorContext');
+const { onchange } = getContext('AppViewerContext');
+const { pickVariableCallback } = getContext('AppEditorContext');
 $: componentInput && onchange?.();
 </script>
 
 {#if componentInput?.type === 'static'}
 	{#if componentInput.fieldType === 'number'}
-		<input type="number" bind:value={componentInput.value} />
+		<input on:keydown|stopPropagation type="number" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'textarea'}
-		<textarea bind:value={componentInput.value} />
+		<textarea on:keydown|stopPropagation bind:value={componentInput.value} />
+	{:else if componentInput.fieldType === 'date'}
+		<input on:keydown|stopPropagation type="date" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
 	{:else if componentInput.fieldType === 'select'}
-		<select bind:value={componentInput.value}>
+		<select on:keydown|stopPropagation on:keydown|stopPropagation bind:value={componentInput.value}>
 			{#each staticValues[componentInput.optionValuesKey] || [] as option}
 				<option value={option}>
 					{option}
 				</option>
 			{/each}
 		</select>
+	{:else if componentInput.fieldType === 'icon-select'}
+		<IconSelectInput bind:componentInput />
+	{:else if componentInput.fieldType === 'labeledresource'}
+		{#if componentInput?.value && typeof componentInput?.value == 'object' && 'label' in componentInput?.value}
+			<div class="flex flex-col gap-1 w-full">
+				<input
+					on:keydown|stopPropagation
+					placeholder="Label"
+					type="text"
+					bind:value={componentInput.value['label']}
+				/>
+				<ResourcePicker
+					initialValue={componentInput.value?.['value']?.split('$res:')[1] || ''}
+					on:change={(e) => {
+						let path = e.detail
+
+						if (componentInput && path) {
+							componentInput.value['value'] = `$res:${path}`
+						}
+					}}
+				/>
+			</div>
+		{:else}
+			Inconsistent labeled resource object
+		{/if}
+	{:else if componentInput.fieldType === 'color'}
+		<ColorInput bind:componentInput />
 	{:else if componentInput.fieldType === 'object'}
 		{#if componentInput?.format?.startsWith('resource-')}
 			<ResourcePicker
@@ -48,8 +82,27 @@ $: componentInput && onchange?.();
 			</div>
 		{/if}
 	{:else if componentInput.fieldType === 'array'}
-		<ArrayStaticInputEditor bind:componentInput />
+		<ArrayStaticInputEditor bind:componentInput on:deleteArrayItem />
 	{:else}
-		<input type="text" placeholder="Static value" bind:value={componentInput.value} />
+		<div class="flex gap-1">
+			<input
+				on:keydown|stopPropagation
+				type="text"
+				placeholder="Static value"
+				bind:value={componentInput.value}
+			/>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<div
+				class="min-w-min min-h-[34px] items-center leading-4 px-3 text-gray-600 cursor-pointer border border-gray-700 rounded center-center"
+				on:click={() => {
+					$pickVariableCallback = (variable) => {
+						if (componentInput) {
+							componentInput.value = `$var:${variable}`
+						}
+					}
+				}}
+				><Icon data={faDollarSign} />
+			</div>
+		</div>
 	{/if}
 {/if}

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

@@ -5,6 +5,9 @@ declare const __propDef: {
         componentInput: StaticAppInput | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
+        deleteArrayItem: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -0,0 +1,21 @@
+<script>import { FileInput } from '../../../../common';
+export let componentInput;
+</script>
+
+<FileInput
+	accept={componentInput?.fileUpload?.accept}
+	multiple={componentInput?.fileUpload?.multiple}
+	convertTo={componentInput?.fileUpload?.convertTo}
+	iconSize={24}
+	class="text-sm py-4"
+	on:change={({ detail }) => {
+		if (componentInput) {
+			componentInput.value = componentInput?.fileUpload?.multiple ? detail : detail?.[0]
+		}
+	}}
+>
+	<svelte:fragment slot="selected-title">
+		<!-- Removing the title when there is a selected file -->
+		<span />
+	</svelte:fragment>
+</FileInput>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { UploadAppInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: UploadAppInput | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UploadInputEditorProps = typeof __propDef.props;
+export type UploadInputEditorEvents = typeof __propDef.events;
+export type UploadInputEditorSlots = typeof __propDef.slots;
+export default class UploadInputEditor extends SvelteComponentTyped<UploadInputEditorProps, UploadInputEditorEvents, UploadInputEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte

@@ -14,6 +14,7 @@ const dispatch = createEventDispatcher();
 <div class="w-full flex mt-1 items-center gap-2">
 	<slot />
 	<input
+		on:keydown|stopPropagation
 		type="text"
 		placeholder="Search inline scripts"
 		bind:value={filter}

package/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         inlineScripts?: string[] | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
         pick: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -6,14 +6,14 @@ import InlineScriptList from './InlineScriptList.svelte';
 import WorkspaceScriptList from './WorkspaceScriptList.svelte';
 import WorkspaceFlowList from './WorkspaceFlowList.svelte';
 import { getContext } from 'svelte';
-import { loadSchema, schemaToInputsSpec } from '../../../utils';
+import { getAllScriptNames, loadSchema, schemaToInputsSpec } from '../../../utils';
 import { emptySchema } from '../../../../../utils';
 export let appInput;
 export let defaultUserInput = false;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
-const { app, workspace } = getContext('AppEditorContext');
+const { app, workspace } = getContext('AppViewerContext');
 async function loadSchemaFromTriggerable(path, runType) {
     return loadSchema(workspace, path, runType) ?? emptySchema();
 }
@@ -72,26 +72,9 @@ function pickInlineScript(name) {
 function createScript() {
     let index = 0;
     let newScriptPath = `Inline Script ${index}`;
-    const names = $app.grid.reduce((acc, gridItem) => {
-        const { componentInput } = gridItem.data;
-        if (componentInput?.type === 'runnable' &&
-            componentInput?.runnable?.type === 'runnableByName') {
-            acc.push(componentInput.runnable.name);
-        }
-        if (componentInput?.type === 'tablecomponent') {
-            componentInput.actionButtons.forEach((actionButton) => {
-                if (actionButton.componentInput?.type === 'runnable') {
-                    if (actionButton.componentInput.runnable?.type === 'runnableByName') {
-                        acc.push(actionButton.componentInput.runnable.name);
-                    }
-                }
-            });
-        }
-        return acc;
-    }, []);
-    const unusedNames = $app.unusedInlineScripts.map((x) => x.name);
+    const names = getAllScriptNames($app);
     // Find a name that is not used by any other inline script
-    while (names.includes(newScriptPath) || unusedNames.includes(newScriptPath)) {
+    while (names.includes(newScriptPath)) {
         newScriptPath = `Inline Script ${++index}`;
     }
     appInput.runnable = {

package/components/apps/gridUtils.d.ts

@@ -4,10 +4,12 @@ declare const Breakpoints: {
     sm: number;
     lg: number;
 };
+declare const WIDE_GRID_COLUMNS: 12;
+declare const NARROW_GRID_COLUMNS: 3;
 declare const columnConfiguration: ColumnConfiguration;
 declare const gridColumns: number[];
 declare function disableDrag(component: GridItem): GridItem;
 declare function toggleFixed(component: GridItem): GridItem;
 declare function isFixed(component: GridItem): boolean;
 declare function enableDrag(component: GridItem): GridItem;
-export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };
+export { gridColumns, WIDE_GRID_COLUMNS, NARROW_GRID_COLUMNS, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };

package/components/apps/gridUtils.js

@@ -2,9 +2,11 @@ const Breakpoints = {
     sm: 640,
     lg: 1024
 };
+const WIDE_GRID_COLUMNS = 12;
+const NARROW_GRID_COLUMNS = 3;
 const columnConfiguration = [
-    [Breakpoints.lg, 12],
-    [Breakpoints.sm, 3]
+    [Breakpoints.lg, WIDE_GRID_COLUMNS],
+    [Breakpoints.sm, NARROW_GRID_COLUMNS]
 ];
 const gridColumns = columnConfiguration.map((value) => value[1]);
 function disableDrag(component) {
@@ -37,4 +39,4 @@ function enableDrag(component) {
     });
     return component;
 }
-export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };
+export { gridColumns, WIDE_GRID_COLUMNS, NARROW_GRID_COLUMNS, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };

package/components/apps/inputType.d.ts

@@ -1,6 +1,7 @@
+import type { ReadFileAs } from '../common/fileInput/model';
 import type { staticValues } from './editor/componentsPanel/componentStaticValues';
 import type { InlineScript } from './types';
-export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any';
+export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource';
 export type InputConnection = {
     componentId: string;
     path: string;
@@ -13,6 +14,10 @@ export type UserInput<U> = {
     type: 'user';
     value: U | undefined;
 };
+export type UploadInput = {
+    type: 'upload';
+    value: string;
+};
 export type EvalInput = {
     type: 'eval';
     expr: string;
@@ -29,7 +34,7 @@ export type TemplateInput = {
     eval: string;
     type: 'template';
 };
-type RunnableByPath = {
+export type RunnableByPath = {
     path: string;
     schema: any;
     runType: 'script' | 'flow' | 'hubscript';
@@ -43,24 +48,44 @@ type RunnableByName = {
 export type Runnable = RunnableByPath | RunnableByName | undefined;
 export type ResultInput = {
     runnable: Runnable;
-    fields: Record<string, (StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput)>;
+    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
     type: 'runnable';
     value?: any;
 };
-type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | EvalInput | ResultInput | TemplateInput) & InputConfiguration<T, U, V>;
+type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | EvalInput | UploadInput | ResultInput | TemplateInput) & InputConfiguration<T, U, V>;
 type InputConfiguration<T extends InputType, U, V extends InputType> = {
     fieldType: T;
     subFieldType?: V;
     format?: string | undefined;
+    fileUpload?: {
+        /** Use `*` to accept anything. */
+        accept: string;
+        /**
+         * Controls if user is allowed to select multiple files.
+         * @default false
+         */
+        multiple?: boolean;
+        /**
+         * Controls if the uploaded file(s) will be converted or not.
+         * @default false
+         */
+        convertTo?: ReadFileAs;
+    };
+};
+type StaticOptions = {
+    /**
+     * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
+     */
+    optionValuesKey: keyof typeof staticValues;
 };
 export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & {
     /**
      * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
      */
     optionValuesKey: keyof typeof staticValues;
-}) | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & {
+}) | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & {
     optionValuesKey: keyof typeof staticValues;
-});
+}) | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'labeledresource', object>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;
@@ -79,5 +104,8 @@ export type ResultAppInput = Extract<AppInput, {
 export type EvalAppInput = Extract<AppInput, {
     type: 'eval';
 }>;
+export type UploadAppInput = Extract<AppInput, {
+    type: 'upload';
+}>;
 export type AppInputs = Record<string, AppInput>;
 export {};

package/components/apps/rx.js

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { deepEqual } from 'fast-equals';
 export function buildWorld(components, previousWorld, context) {
     const newWorld = buildObservableWorld();
     const state = writable(0);
@@ -95,7 +96,7 @@ export function settableOutput(state, previousValue) {
         }
     }
     function set(x, force = false) {
-        if (value != x || force) {
+        if (!deepEqual(value, x) || force) {
             state.update((x) => x + 1);
             value = x;
             subscribers.forEach((x) => x.next(value));

package/components/apps/store.d.ts

@@ -1,2 +1,7 @@
+import type { Policy } from "../../gen";
 import type { App } from './types';
-export declare const importStore: import("svelte/store").Writable<App | undefined>;
+export declare const importStore: import("svelte/store").Writable<{
+    summary: string;
+    value: App;
+    policy: Policy;
+} | undefined>;