windmill-components 1.82.4 → 1.82.6

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

@@ -32,6 +32,8 @@ if (controls) {
     $componentControl[id] = controls;
 }
 let runnableComponent;
+let isLoading = false;
+let ownClick = false;
 let beforeIconComponent;
 let afterIconComponent;
 $: resolvedConfig.beforeIcon && handleBeforeIcon();
@@ -47,6 +49,19 @@ 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 != '')
@@ -55,10 +70,11 @@ let runnableWrapper;
 async function handleClick(event) {
     event?.stopPropagation();
     event?.preventDefault();
-    $selectedComponent = [id];
+    $selectedComponent = id;
     if (preclickAction) {
         await preclickAction();
     }
+    ownClick = true;
     if (!runnableComponent) {
         runnableWrapper.onSuccess();
     }
@@ -66,7 +82,6 @@ async function handleClick(event) {
         await runnableComponent?.runComponent();
     }
 }
-let loading = false;
 </script>
 
 {#each Object.keys(components['buttoncomponent'].initialData.configuration) as key (key)}
@@ -85,7 +100,6 @@ let loading = false;
 	bind:this={runnableWrapper}
 	{recomputeIds}
 	bind:runnableComponent
-	bind:loading
 	{componentInput}
 	doOnSuccess={resolvedConfig.onSuccess}
 	{id}

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

@@ -28,8 +28,16 @@ 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)}
@@ -45,7 +53,6 @@ let loading = false;
 	{recomputeIds}
 	{render}
 	bind:runnableComponent
-	bind:loading
 	{componentInput}
 	{id}
 	doOnSuccess={resolvedConfig.onSuccess}
@@ -82,6 +89,7 @@ let loading = false;
 						style={css?.button?.style ?? ''}
 						on:pointerdown={(e) => {
 							e?.stopPropagation()
+							window.dispatchEvent(new Event('pointerup'))
 						}}
 						on:click={() => {
 							runnableComponent?.runComponent()

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

@@ -3,12 +3,14 @@ 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;
@@ -25,7 +27,10 @@ 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');
@@ -34,9 +39,18 @@ $: 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)}
@@ -48,63 +62,73 @@ let loading = false;
 	/>
 {/each}
 
-<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}
+<Portal>
+	<Modal
+		{open}
+		title={resolvedConfig.label ?? ''}
+		class={css?.popup?.class}
+		style={css?.popup?.style}
+		on:canceled={() => {
+			open = false
+		}}
+		on:confirmed={() => {
+			open = false
+		}}
 	>
-		<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()
-					}}
-					on:click={async () => {
-						if (!runnableComponent) {
-							runnableWrapper.onSuccess()
-						} else {
-							await runnableComponent?.runComponent()
-						}
-						getModal().close()
-					}}
-					size="xs"
-					color="dark"
-				>
-					Submit
-				</Button>
+		<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>
-		</div>
-	</RunnableWrapper>
-</AlwaysMountedModal>
+		</RunnableWrapper>
+	</Modal>
+</Portal>
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	{#if errorsMessage}
@@ -117,7 +141,7 @@ let loading = false;
 		btnClasses={css?.button?.class ?? ''}
 		style={css?.button?.style ?? ''}
 		on:click={(e) => {
-			getModal().open()
+			open = true
 		}}
 	>
 		{resolvedConfig.label}

package/components/apps/components/display/AppDisplayComponent.svelte

@@ -19,28 +19,22 @@ const outputs = initOutput($worldStore, id, {
 </script>
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-	<div class="flex flex-col w-full h-full">
-		<div
-			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
-				$app.css?.['displaycomponent']?.['header']?.class,
-				customCss?.header?.class
-			)}
-		>
-			Results
-		</div>
-		<div
-			style={twMerge(
-				$app.css?.['displaycomponent']?.['container']?.style,
-				customCss?.container?.style
-			)}
-			class={twMerge(
-				'p-2 grow',
-				$app.css?.['displaycomponent']?.['container']?.class,
-				customCss?.container?.class
-			)}
-		>
-			<DisplayResult {result} {requireHtmlApproval} />
-		</div>
+	<div
+		class={twMerge(
+			'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+			$app.css?.['displaycomponent']?.['header']?.class,
+			customCss?.header?.class
+		)}
+	>
+		Results
+	</div>
+	<div
+		class={twMerge(
+			'p-2',
+			$app.css?.['displaycomponent']?.['container']?.class,
+			customCss?.container?.class
+		)}
+	>
+		<DisplayResult {result} {requireHtmlApproval} />
 	</div>
 </RunnableWrapper>

package/components/apps/components/display/AppHtml.svelte

@@ -7,7 +7,7 @@ export let componentInput;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -26,10 +26,6 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
-	<button
-		class="absolute bottom-0 left-0 text-xs border px-2 py-0.5 bg-white/80"
-		on:click={() => ($selectedComponent = [id])}>Select</button
-	>
 	<RunnableWrapper
 		{outputs}
 		{render}
@@ -50,7 +46,5 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 					: 'No html'}
 			/>
 		{/key}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
 	</RunnableWrapper>
 </div>

package/components/apps/components/display/AppHtml.svelte.d.ts

@@ -10,8 +10,6 @@ declare const __propDef: {
         render: boolean;
     };
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/components/display/AppMap.svelte

@@ -41,7 +41,7 @@ $: if (map && markers) {
 }
 function selectComponent() {
     if (!$connectingInput.opened) {
-        $selectedComponent = [id];
+        $selectedComponent = id;
         $focusedGrid = undefined;
     }
 }

package/components/apps/components/display/AppPdf.svelte

@@ -289,7 +289,7 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 				style="padding-top: {controlsHeight ?? 0}px; {css?.container?.style ?? ''}"
 			/>
 		{/if}
-		{#if $mode !== 'preview' && $selectedComponent?.includes(id)}
+		{#if $mode !== 'preview' && $selectedComponent === id}
 			<button
 				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90 
 			hover:bg-indigo-500 focus:bg-indigo-500 duration-200 text-white text-2xs"

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

@@ -1,15 +1,12 @@
 <script>import { getContext, onMount } from 'svelte';
-import { initConfig, initOutput } from '../../editor/appUtils';
-import { components } from '../../editor/component';
-import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { initOutput } from '../../editor/appUtils';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
-export let configuration;
+// export let configuration: Record<string, AppInput>
 export let initializing = undefined;
 export let render;
 const { worldStore } = getContext('AppViewerContext');
-let resolvedConfig = initConfig(components['plotlycomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -30,23 +27,9 @@ $: Plotly &&
     divEl &&
     h &&
     w &&
-    Plotly.newPlot(divEl, Array.isArray(result) ? result : [result], {
-        width: w,
-        height: h,
-        margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 },
-        ...resolvedConfig.layout
-    }, { responsive: true, displayModeBar: false });
+    Plotly.newPlot(divEl, [result], { width: w, height: h, margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 } }, { responsive: true, displayModeBar: false });
 </script>
 
-{#each Object.keys(components['plotlycomponent'].initialData.configuration) as key (key)}
-	<ResolveConfig
-		{id}
-		{key}
-		bind:resolvedConfig={resolvedConfig[key]}
-		configuration={configuration[key]}
-	/>
-{/each}
-
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
 	<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />

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

@@ -1,11 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
-import type { RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: RichConfigurations;
         initializing?: boolean | undefined;
         render: boolean;
     };

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

@@ -72,7 +72,7 @@ function onCellValueChanged(event) {
 		>
 			<div
 				on:pointerdown|stopPropagation={() => {
-					$selectedComponent = [id]
+					$selectedComponent = id
 				}}
 				style:height="{clientHeight}px"
 				style:width="{clientWidth}px"