windmill-components 1.82.8 → 1.82.10

package/components/ArgInput.svelte

@@ -211,6 +211,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<input
 						{autofocus}
 						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						{disabled}
@@ -229,6 +230,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<Toggle
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
+						window.dispatchEvent(new Event('pointerup'))
 					}}
 					{disabled}
 					class={valid
@@ -308,6 +310,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<textarea
 						bind:this={el}
 						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						{autofocus}
@@ -328,6 +331,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'enum'}
 				<select
 					on:focus={(e) => {
+						window.dispatchEvent(new Event('pointerup'))
 						dispatch('focus')
 					}}
 					{disabled}
@@ -344,6 +348,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<div class="border my-1 mb-4 w-full border-gray-400">
 					<SimpleEditor
 						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						on:blur={() => dispatch('blur')}
@@ -382,6 +387,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								rows="1"
 								bind:this={el}
 								on:focus={(e) => {
+									window.dispatchEvent(new Event('pointerup'))
 									dispatch('focus')
 								}}
 								on:blur={() => dispatch('blur')}

package/components/FlowBuilder.svelte

@@ -175,11 +175,6 @@ $: selectedId && select(selectedId);
 $: initialPath && $workspaceStore && loadSchedule();
 loadHubScripts();
 function onKeyDown(event) {
-    let classes = event.target?.['className'];
-    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
-        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
-        return;
-    }
     switch (event.key) {
         case 'Z':
             if (event.ctrlKey) {

package/components/LightweightArgInput.svelte

@@ -145,6 +145,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				{:else}
 					<input
 						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						type="number"
@@ -162,6 +163,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<Toggle
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
+						window.dispatchEvent(new Event('pointerup'))
 					}}
 					class={valid
 						? ''
@@ -238,6 +240,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<textarea
 						bind:this={el}
 						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						use:autosize
@@ -255,6 +258,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'enum'}
 				<select
 					on:focus={(e) => {
+						window.dispatchEvent(new Event('pointerup'))
 						dispatch('focus')
 					}}
 					class="px-6"
@@ -287,6 +291,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							rows="1"
 							bind:this={el}
 							on:focus={(e) => {
+								window.dispatchEvent(new Event('pointerup'))
 								dispatch('focus')
 							}}
 							on:blur={() => dispatch('blur')}

package/components/Toggle.svelte

@@ -32,7 +32,7 @@ const dispatch = createEventDispatcher();
 			</span>
 		{/if}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div class="relative" on:click|stopPropagation>
+		<div class="relative" on:pointerdown on:click|stopPropagation>
 			<input
 				on:focus
 				on:click

package/components/Toggle.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
         click: MouseEvent;
         focus: FocusEvent;
         change: CustomEvent<any>;

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

@@ -55,7 +55,7 @@ let runnableWrapper;
 async function handleClick(event) {
     event?.stopPropagation();
     event?.preventDefault();
-    $selectedComponent = [id];
+    $selectedComponent = id;
     if (preclickAction) {
         await preclickAction();
     }

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

@@ -82,6 +82,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

@@ -87,6 +87,7 @@ let loading = false;
 					btnClasses="my-1"
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
+						window.dispatchEvent(new Event('pointerup'))
 					}}
 					on:click={async () => {
 						if (!runnableComponent) {

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, 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>
 
-{#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"

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

@@ -112,7 +112,7 @@ $componentControl[id] = {
         }
         const hasActions = actionButtons.length >= 1;
         if (hasActions) {
-            $selectedComponent = [actionButtons[0].id];
+            $selectedComponent = actionButtons[0].id;
             return true;
         }
         return false;
@@ -234,13 +234,13 @@ $componentControl[id] = {
 															$hoverStore = undefined
 														}
 													}}
-													class={($selectedComponent?.includes(actionButton.id) ||
+													class={(actionButton.id === $selectedComponent ||
 														$hoverStore === actionButton.id) &&
 													$mode !== 'preview'
 														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
 														: ''}
 												>
-													{#if $selectedComponent?.includes(actionButton.id) || $hoverStore === actionButton.id}
+													{#if actionButton.id === $selectedComponent || $hoverStore === actionButton.id}
 														<span
 															title={`Id: ${actionButton.id}`}
 															class={classNames(
@@ -268,10 +268,10 @@ $componentControl[id] = {
 															controls={{
 																left: () => {
 																	if (actionIndex === 0) {
-																		$selectedComponent = [id]
+																		$selectedComponent = id
 																		return true
 																	} else if (actionIndex > 0) {
-																		$selectedComponent = [actionButtons[actionIndex - 1].id]
+																		$selectedComponent = actionButtons[actionIndex - 1].id
 																		return true
 																	}
 																	return false
@@ -280,7 +280,7 @@ $componentControl[id] = {
 																	if (actionIndex === actionButtons.length - 1) {
 																		return id
 																	} else if (actionIndex < actionButtons.length - 1) {
-																		$selectedComponent = [actionButtons[actionIndex + 1].id]
+																		$selectedComponent = actionButtons[actionIndex + 1].id
 																		return true
 																	}
 																	return false

package/components/apps/components/helpers/HiddenComponent.svelte

@@ -5,8 +5,7 @@ export let id;
 export let name;
 export let inlineScript;
 export let fields;
-export let doNotRecomputeOnInputChanged;
-export let recomputableByRefreshButton;
+export let doNotRecomputeOnInputChanged = false;
 let result = undefined;
 const { worldStore } = getContext('AppViewerContext');
 let outputs = initOutput($worldStore, id, {
@@ -29,8 +28,8 @@ let outputs = initOutput($worldStore, id, {
 		type: 'runnableByName'
 	}}
 	wrapperClass="hidden"
+	recomputable
 	{outputs}
-	{recomputableByRefreshButton}
 >
 	<slot />
 </RunnableComponent>

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

@@ -7,8 +7,7 @@ declare const __propDef: {
         name: string;
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        doNotRecomputeOnInputChanged: boolean;
-        recomputableByRefreshButton: boolean;
+        doNotRecomputeOnInputChanged?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/RefreshButton.svelte

@@ -1,11 +1,18 @@
 <script>import { RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
 export let componentId;
-export let loading;
-const { runnableComponents } = getContext('AppViewerContext');
+const { runnableComponents, worldStore } = getContext('AppViewerContext');
 async function refresh() {
-    await $runnableComponents[componentId]?.cb?.();
+    window.dispatchEvent(new Event('pointerup'));
+    await $runnableComponents[componentId]?.();
 }
+let loading = false;
+$: $worldStore?.outputsById[componentId]?.['loading']?.subscribe({
+    id: 'refresh-' + componentId,
+    next: (value) => {
+        loading = value;
+    }
+});
 </script>
 
 <button

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

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         componentId: string;
-        loading: boolean;
     };
     events: {
         pointerdown: PointerEvent;

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

@@ -23,20 +23,19 @@ export let wrapperClass = '';
 export let wrapperStyle = '';
 export let initializing = undefined;
 export let render;
+export let recomputable = false;
 export let outputs;
 export let extraKey = '';
 export let doNotRecomputeOnInputChanged = false;
 export let loading = false;
-export let recomputableByRefreshButton = true;
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
-$runnableComponents[id] = {
-    autoRefresh: autoRefresh && recomputableByRefreshButton,
-    cb: async (inlineScript) => {
+if (recomputable || autoRefresh) {
+    $runnableComponents[id] = async (inlineScript) => {
         await executeComponent(true, inlineScript);
-    }
-};
-$runnableComponents = $runnableComponents;
+    };
+    $runnableComponents = $runnableComponents;
+}
 let args = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
@@ -311,7 +310,7 @@ async function setResult(res) {
 		{/if}
 		{#if !initializing && autoRefresh === true}
 			<div class="flex absolute top-1 right-1 z-50">
-				<RefreshButton {loading} componentId={id} />
+				<RefreshButton componentId={id} />
 			</div>
 		{/if}
 	</div>

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

@@ -18,6 +18,7 @@ declare const __propDef: {
         wrapperStyle?: string | undefined;
         initializing?: boolean | undefined;
         render: boolean;
+        recomputable?: boolean | undefined;
         outputs: {
             result: Output<any>;
             loading: Output<boolean>;
@@ -25,7 +26,6 @@ declare const __propDef: {
         extraKey?: string | undefined;
         doNotRecomputeOnInputChanged?: boolean | undefined;
         loading?: boolean | undefined;
-        recomputableByRefreshButton?: boolean | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {

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

@@ -35,7 +35,7 @@ function isRunnableDefined(componentInput) {
 }
 export function onSuccess() {
     if (recomputeIds) {
-        recomputeIds.map((id) => $runnableComponents?.cb?.[id]?.());
+        recomputeIds.map((id) => $runnableComponents?.[id]?.());
     }
     if (!doOnSuccess)
         return;

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

@@ -27,6 +27,10 @@ $: css = concatCustomCss($app.css?.checkboxcomponent, customCss);
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<Toggle
+		on:pointerdown={(e) => {
+			e?.stopPropagation()
+			window.dispatchEvent(new Event('pointerup'))
+		}}
 		checked={defaultValue}
 		options={{ right: labelValue }}
 		textClass={css?.text?.class ?? ''}

package/components/apps/components/inputs/AppDateInput.svelte

@@ -35,14 +35,14 @@ $: css = concatCustomCss($app.css?.dateinputcomponent, customCss);
 <AlignWrapper {render} {verticalAlignment}>
 	{#if inputType === 'date'}
 		<input
-			on:focus={() => ($selectedComponent = [id])}
+			on:focus={() => ($selectedComponent = id)}
 			on:pointerdown|stopPropagation
 			type="date"
 			bind:value
 			min={minValue}
 			max={maxValue}
 			placeholder="Type..."
-			class={twMerge(css?.input?.class ?? '')}
+			class={twMerge('mx-0.5', css?.input?.class ?? '')}
 			style={css?.input?.style ?? ''}
 		/>
 	{/if}

package/components/apps/components/inputs/AppMultiSelect.svelte

@@ -42,11 +42,7 @@ $: css = concatCustomCss($app.css?.selectcomponent, customCss);
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	<div
-		class="app-select w-full"
-		style="height: 34px; overflow: auto;"
-		on:pointerdown|stopPropagation
-	>
+	<div class="app-select w-full mx-0.5" style="height: 34px" on:pointerdown|stopPropagation>
 		{#if !value || Array.isArray(value)}
 			<Select
 				--border-radius="0"
@@ -62,11 +58,11 @@ $: css = concatCustomCss($app.css?.selectcomponent, customCss);
 				{placeholder}
 				on:click={() => {
 					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
+						$selectedComponent = id
 					}
 				}}
 				on:focus={() => {
-					$selectedComponent = [id]
+					$selectedComponent = id
 				}}
 				floatingConfig={{
 					strategy: 'fixed'

package/components/apps/components/inputs/AppNumberInput.svelte

@@ -35,10 +35,10 @@ $: css = concatCustomCss($app.css?.numberinputcomponent, customCss);
 
 <AlignWrapper {render} {verticalAlignment}>
 	<input
-		on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
-		on:focus={() => ($selectedComponent = [id])}
+		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',
+			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
 			css?.input?.class ?? ''
 		)}
 		style={css?.input?.style ?? ''}

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

@@ -43,6 +43,7 @@ function handleItems() {
 }
 function onChange(e) {
     e?.stopPropagation();
+    window.dispatchEvent(new Event('pointerup'));
     if (create) {
         listItems = listItems.map((i) => {
             delete i.created;
@@ -87,7 +88,7 @@ let filterText = '';
 <InputValue {id} input={configuration.create} bind:value={create} />
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	<div class="app-select w-full" style="height: 34px;" on:pointerdown|stopPropagation>
+	<div class="app-select w-full mx-0.5" style="height: 34px;" on:pointerdown|stopPropagation>
 		<Select
 			--border-radius="0"
 			--border-color="#999"
@@ -104,11 +105,11 @@ let filterText = '';
 			{placeholder}
 			on:click={() => {
 				if (!$connectingInput.opened) {
-					$selectedComponent = [id]
+					$selectedComponent = id
 				}
 			}}
 			on:focus={() => {
-				$selectedComponent = [id]
+				$selectedComponent = id
 			}}
 			floatingConfig={{
 				strategy: 'fixed'

package/components/apps/components/inputs/AppSliderInputs.svelte

@@ -59,7 +59,7 @@ $: if (css && slider && lastStyle !== css?.handle?.style) {
 			class="grow"
 			style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
 				''}"
-			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
+			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
 		>
 			<RangeSlider bind:slider bind:values {step} min={+min} max={+max} />
 		</div>