windmill-components 1.82.0 → 1.82.1

package/components/Multiselect.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Multiselect extends SvelteComponentTyped<{
     value?: any[] | undefined;
     id?: string | undefined;
-    readonly?: boolean | undefined;
     placeholder?: string | undefined;
+    readonly?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,8 +20,8 @@ declare const __propDef: {
     props: {
         value?: any[] | undefined;
         id?: string | undefined;
-        readonly?: boolean | undefined;
         placeholder?: string | undefined;
+        readonly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/buttons/AppButton.svelte

@@ -32,8 +32,6 @@ if (controls) {
     $componentControl[id] = controls;
 }
 let runnableComponent;
-let isLoading = false;
-let ownClick = false;
 let beforeIconComponent;
 let afterIconComponent;
 $: resolvedConfig.beforeIcon && handleBeforeIcon();
@@ -49,19 +47,6 @@ async function handleAfterIcon() {
     }
 }
 $: resolvedConfig?.triggerOnAppLoad && runnableComponent?.runComponent();
-$: if (outputs?.loading != undefined) {
-    outputs.loading.set(false, true);
-}
-$: outputs?.loading.subscribe({
-    id: 'loading-' + id,
-    next: (value) => {
-        isLoading = value;
-        if (ownClick && !value) {
-            ownClick = false;
-        }
-    }
-});
-$: loading = isLoading && ownClick;
 let errors = {};
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
@@ -74,7 +59,6 @@ async function handleClick(event) {
     if (preclickAction) {
         await preclickAction();
     }
-    ownClick = true;
     if (!runnableComponent) {
         runnableWrapper.onSuccess();
     }
@@ -82,6 +66,7 @@ async function handleClick(event) {
         await runnableComponent?.runComponent();
     }
 }
+let loading = false;
 </script>
 
 {#each Object.keys(components['buttoncomponent'].initialData.configuration) as key (key)}
@@ -100,6 +85,7 @@ async function handleClick(event) {
 	bind:this={runnableWrapper}
 	{recomputeIds}
 	bind:runnableComponent
+	bind:loading
 	{componentInput}
 	doOnSuccess={resolvedConfig.onSuccess}
 	{id}

package/components/apps/components/buttons/AppForm.svelte

@@ -28,16 +28,8 @@ let isLoading = false;
 $: noInputs =
     $stateId != undefined &&
         (componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0);
-$: if (outputs?.loading != undefined) {
-    outputs.loading.set(false, true);
-}
-$: outputs?.loading.subscribe({
-    id: 'loading-' + id,
-    next: (value) => {
-        isLoading = value;
-    }
-});
 $: css = concatCustomCss($app.css?.formcomponent, customCss);
+let loading = false;
 </script>
 
 {#each Object.keys(components['formcomponent'].initialData.configuration) as key (key)}
@@ -53,6 +45,7 @@ $: css = concatCustomCss($app.css?.formcomponent, customCss);
 	{recomputeIds}
 	{render}
 	bind:runnableComponent
+	bind:loading
 	{componentInput}
 	{id}
 	doOnSuccess={resolvedConfig.onSuccess}

package/components/apps/components/buttons/AppFormButton.svelte

@@ -3,14 +3,12 @@ import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import Portal from 'svelte-portal';
-import Modal from '../../../common/modal/Modal.svelte';
 import { concatCustomCss } from '../../utils';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import AlwaysMountedModal, { getModal } from '../../../common/modal/AlwaysMountedModal.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -27,10 +25,7 @@ let outputs = initOutput($worldStore, id, {
 });
 let resolvedConfig = initConfig(components['formbuttoncomponent'].initialData.configuration, configuration);
 let runnableComponent;
-let isLoading = false;
-let ownClick = false;
 let errors = {};
-let open = false;
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
     .join('\n');
@@ -39,18 +34,9 @@ $: noInputs =
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
-$: outputs?.loading.subscribe({
-    id: 'loading-' + id,
-    next: (value) => {
-        isLoading = value;
-        if (ownClick && !value) {
-            ownClick = false;
-        }
-    }
-});
-$: loading = isLoading && ownClick;
 $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 let runnableWrapper;
+let loading = false;
 </script>
 
 {#each Object.keys(components['formbuttoncomponent'].initialData.configuration) as key (key)}
@@ -62,73 +48,64 @@ let runnableWrapper;
 	/>
 {/each}
 
-<Portal>
-	<Modal
-		{open}
-		title={resolvedConfig.label ?? ''}
-		class={css?.popup?.class}
-		style={css?.popup?.style}
-		on:canceled={() => {
-			open = false
-		}}
-		on:confirmed={() => {
-			open = false
-		}}
+<AlwaysMountedModal
+	title={resolvedConfig.label ?? ''}
+	class={css?.popup?.class}
+	style={css?.popup?.style}
+>
+	<RunnableWrapper
+		bind:this={runnableWrapper}
+		{recomputeIds}
+		{render}
+		bind:runnableComponent
+		{componentInput}
+		{id}
+		{extraQueryParams}
+		autoRefresh={false}
+		forceSchemaDisplay={true}
+		runnableClass="!block"
+		{outputs}
+		doOnSuccess={resolvedConfig.onSuccess}
 	>
-		<RunnableWrapper
-			bind:this={runnableWrapper}
-			{recomputeIds}
-			{render}
-			bind:runnableComponent
-			{componentInput}
-			{id}
-			{extraQueryParams}
-			autoRefresh={false}
-			forceSchemaDisplay={true}
-			runnableClass="!block"
-			{outputs}
-			doOnSuccess={resolvedConfig.onSuccess}
-		>
-			<div class="flex flex-col gap-2 px-4 w-full">
-				<div>
-					{#if noInputs}
-						<div class="text-gray-600 italic text-sm my-4">
-							Run forms are associated with a runnable that has user inputs.
-							<br />
-							Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
-							<strong>
-								User Input
-								<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
-							</strong>
-						</div>
-					{/if}
-				</div>
-				<div class="flex justify-end">
-					<Button
-						{loading}
-						btnClasses="my-1"
-						on:pointerdown={(e) => {
-							e?.stopPropagation()
-							window.dispatchEvent(new Event('pointerup'))
-						}}
-						on:click={async () => {
-							if (!runnableComponent) {
-								runnableWrapper.onSuccess()
-							} else {
-								await runnableComponent?.runComponent()
-							}
-							open = false
-						}}
-						size="xs"
-						color="dark"
-					>
-						Submit
-					</Button>
-				</div>
+		<div class="flex flex-col gap-2 px-4 w-full">
+			<div>
+				{#if noInputs}
+					<div class="text-gray-600 italic text-sm my-4">
+						Run forms are associated with a runnable that has user inputs.
+						<br />
+						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
+						<strong>
+							User Input
+							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+						</strong>
+					</div>
+				{/if}
+			</div>
+			<div class="flex justify-end">
+				<Button
+					{loading}
+					btnClasses="my-1"
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+						window.dispatchEvent(new Event('pointerup'))
+					}}
+					on:click={async () => {
+						if (!runnableComponent) {
+							runnableWrapper.onSuccess()
+						} else {
+							await runnableComponent?.runComponent()
+						}
+						getModal().close()
+					}}
+					size="xs"
+					color="dark"
+				>
+					Submit
+				</Button>
 			</div>
-		</RunnableWrapper>
-	</Modal>
-</Portal>
+		</div>
+	</RunnableWrapper>
+</AlwaysMountedModal>
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	{#if errorsMessage}
@@ -141,7 +118,7 @@ let runnableWrapper;
 		btnClasses={css?.button?.class ?? ''}
 		style={css?.button?.style ?? ''}
 		on:click={(e) => {
-			open = true
+			getModal().open()
 		}}
 	>
 		{resolvedConfig.label}

package/components/apps/components/display/PlotlyHtml.svelte

@@ -27,7 +27,7 @@ $: Plotly &&
     divEl &&
     h &&
     w &&
-    Plotly.newPlot(divEl, [result], { width: w, height: h, margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 } }, { responsive: true, displayModeBar: false });
+    Plotly.newPlot(divEl, Array.isArray(result) ? result : [result], { width: w, height: h, margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 } }, { responsive: true, displayModeBar: false });
 </script>
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>

package/components/apps/components/display/table/AppTable.svelte

@@ -221,7 +221,8 @@ $componentControl[id] = {
 										on:click={() => toggleRow(row, rowIndex)}
 									>
 										<div class="center-center h-full w-full flex-wrap gap-1 ">
-											{#each actionButtons as actionButton, actionIndex (actionIndex)}
+											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
+												<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 												<div
 													on:mouseover|stopPropagation={() => {
 														if (actionButton.id !== $hoverStore) {
@@ -255,12 +256,15 @@ $componentControl[id] = {
 															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
-															{...actionButton}
 															preclickAction={async () => {
 																toggleRow(row, rowIndex)
 															}}
+															id={actionButton.id}
+															customCss={actionButton.customCss}
+															configuration={actionButton.configuration}
+															recomputeIds={actionButton.recomputeIds}
 															extraQueryParams={{ row: row.original }}
-															bind:componentInput={actionButton.componentInput}
+															componentInput={actionButton.componentInput}
 															controls={{
 																left: () => {
 																	if (actionIndex === 0) {
@@ -288,12 +292,15 @@ $componentControl[id] = {
 															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
-															{...actionButton}
+															id={actionButton.id}
+															customCss={actionButton.customCss}
+															configuration={actionButton.configuration}
+															recomputeIds={actionButton.recomputeIds}
 															preclickAction={async () => {
 																toggleRow(row, rowIndex)
 															}}
 															extraQueryParams={{ row: row.original }}
-															bind:componentInput={actionButton.componentInput}
+															componentInput={actionButton.componentInput}
 														/>
 													{/if}
 												</div>
@@ -319,9 +326,9 @@ $componentControl[id] = {
 		<div class="flex flex-col h-full w-full overflow-auto">
 			<Alert title="Parsing issues" type="error" size="xs" class="h-full w-full ">
 				The result should be an array of objects. Received:
-				<pre class="w-full bg-white p-2 rounded-md">
-				{JSON.stringify(result, null, 4)}
-				</pre>
+				<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap"
+					>{JSON.stringify(result, null, 4)}</pre
+				>
 			</Alert>
 		</div>
 	{/if}

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -27,6 +27,7 @@ export let recomputable = false;
 export let outputs;
 export let extraKey = '';
 export let doNotRecomputeOnInputChanged = false;
+export let loading = false;
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 if (recomputable || autoRefresh) {
@@ -39,6 +40,7 @@ let args = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
 let executeTimeout = undefined;
+$: outputs.loading?.set(loading);
 function setDebouncedExecute() {
     executeTimeout && clearTimeout(executeTimeout);
     executeTimeout = setTimeout(() => {
@@ -103,7 +105,7 @@ function stripSchema(inputs, s) {
 }
 async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
-        outputs.loading?.set(true);
+        loading = true;
         try {
             const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, id, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore);
             await setResult(r);
@@ -112,7 +114,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         catch (e) {
             sendUserToast('Error running frontend script: ' + e.message, true);
         }
-        outputs.loading?.set(false);
+        loading = false;
         return;
     }
     if (noBackend) {
@@ -124,7 +126,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
         return;
     }
-    outputs.loading?.set(true);
+    loading = true;
     try {
         let njob = await testJobLoader?.abstractRun(() => {
             const nonStaticRunnableInputs = {};
@@ -172,7 +174,8 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         }
     }
     catch (e) {
-        outputs.loading?.set(false);
+        setResult({ error: e.body ?? e.message });
+        loading = false;
     }
 }
 export async function runComponent() {
@@ -180,7 +183,7 @@ export async function runComponent() {
         await executeComponent();
     }
     catch (e) {
-        console.error(e);
+        setResult({ error: e.body ?? e.message });
     }
 }
 let lastStartedAt = Date.now();
@@ -256,7 +259,7 @@ async function setResult(res) {
 				setResult(e.detail.result)
 			}
 		}
-		outputs.loading?.set(false)
+		loading = false
 	}}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}

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

@@ -25,6 +25,7 @@ declare const __propDef: {
         };
         extraKey?: string | undefined;
         doNotRecomputeOnInputChanged?: boolean | undefined;
+        loading?: boolean | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {

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

@@ -8,6 +8,7 @@ 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;
@@ -73,6 +74,7 @@ export function onSuccess() {
 {:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
 	<RunnableComponent
 		{extraKey}
+		bind:loading
 		bind:this={runnableComponent}
 		fields={componentInput.fields}
 		bind:result

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         id: string;
         result?: any;
         initializing?: boolean | undefined;
+        loading?: boolean | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         autoRefresh?: boolean | undefined;
         runnableComponent?: RunnableComponent | undefined;

package/components/apps/editor/AppEditor.svelte

@@ -10,8 +10,7 @@ import Tabs from '../../common/tabs/Tabs.svelte';
 import TabContent from '../../common/tabs/TabContent.svelte';
 import { Alert, Button, Tab } from '../../common';
 import ComponentList from './componentsPanel/ComponentList.svelte';
-import Icon from 'svelte-awesome';
-import { faCode, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
 import { classNames, encodeState } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
@@ -26,6 +25,8 @@ import { initHistory } from '../../../history';
 import ComponentNavigation from './component/ComponentNavigation.svelte';
 import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
+import { SecondaryMenu } from './settingsPanel/secondaryMenu';
+import { Component, Paintbrush, Plus } from 'lucide-svelte';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -160,7 +161,7 @@ let variableEditor = undefined;
 					<Pane size={15} minSize={5} maxSize={33}>
 						<ContextPanel />
 					</Pane>
-					<Pane size={64}>
+					<Pane size={63}>
 						<SplitPanesWrapper>
 							<Splitpanes horizontal>
 								<Pane size={70}>
@@ -201,31 +202,32 @@ let variableEditor = undefined;
 							</Splitpanes>
 						</SplitPanesWrapper>
 					</Pane>
-					<Pane size={21} minSize={5} maxSize={33}>
+					<Pane size={22} minSize={5} maxSize={33}>
 						<div class="relative flex flex-col h-full">
 							<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
 								<Tab value="insert" size="xs">
-									<div class="m-1 center-center gap-2">
-										<Icon data={faPlus} />
+									<div class="m-1 center-center gap-1">
+										<Plus size={18} />
 										<span>Insert</span>
 									</div>
 								</Tab>
 								<Tab value="settings" size="xs">
-									<div class="m-1 center-center gap-2">
-										<Icon data={faSliders} />
-										<span>Settings</span>
+									<div class="m-1 center-center gap-1">
+										<Component size={18} />
+										<span>Component</span>
 									</div>
 								</Tab>
 								<Tab value="css" size="xs">
-									<div class="m-1 center-center gap-2">
-										<Icon data={faCode} />
-										<span>CSS</span>
+									<div class="m-1 center-center gap-1">
+										<Paintbrush size={18} />
+										<span>Styling</span>
 									</div>
 								</Tab>
 								<div slot="content" class="h-full overflow-y-auto">
 									<TabContent class="overflow-auto h-full" value="settings">
 										{#if $selectedComponent !== undefined}
 											<SettingsPanel />
+											<SecondaryMenu />
 										{:else}
 											<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
 												Select a component to see the settings&nbsp;for&nbsp;it

package/components/apps/editor/AppPreview.svelte

@@ -82,8 +82,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 				)}
 			>
 				<div
-					class="w-full sticky top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
-					style="z-index: 1000;"
+					class="w-full sticky z-[1001] top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
 				>
 					<h2 class="truncate">{summary}</h2>
 					<RecomputeAllComponents />

package/components/apps/editor/component/Component.svelte

@@ -143,7 +143,7 @@ $: hasError = componentWithErrors.includes(component.id);
 				customCss={component.customCss}
 				bind:initializing
 				componentInput={component.componentInput}
-				bind:actionButtons={component.actionButtons}
+				actionButtons={component.actionButtons}
 				{render}
 			/>
 		{:else if component.type === 'aggridcomponent'}

package/components/apps/editor/component/ComponentNavigation.svelte

@@ -144,7 +144,8 @@ function handlePaste(event) {
 function keydown(event) {
     // Ignore keydown events if the user is typing in monaco
     let classes = event.target?.['className'];
-    if (typeof classes === 'string' && classes.includes('inputarea')) {
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
         return;
     }
     switch (event.key) {

package/components/apps/editor/component/README.md

@@ -8,6 +8,10 @@
    1. Add the component to one of the component sets: `layout`, `buttons`,
       `inputs` or `display` _(this controls which group the component will be
       placed in in the **Insert** menu)_
+1. [**`quickStyleProperties.ts`**](../componentsPanel/quickStyleProperties.ts):
+   1. Add the component to the `quickStyleProperties` record
+   1. _(optional)_ Add the CSS properties that could be applied to the component
+      parts
 1. [**`Component.svelte`**](./Component.svelte):
    1. Add the new component in the Svelte `if` statement
 1. [**`default-codes.ts`**](./default-codes.ts):