windmill-components 1.84.6 → 1.86.0

package/components/apps/editor/AppEditorHeader.svelte

@@ -1,6 +1,6 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import { Alert, Badge, ButtonPopup, ButtonPopupItem, Drawer, DrawerContent, UndoRedo } from '../../common';
+import { Alert, Badge, Drawer, DrawerContent, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import { dirtyStore } from '../../common/confirmationModal/dirtyStore';
 import Skeleton from '../../common/skeleton/Skeleton.svelte';
@@ -188,19 +188,19 @@ function onKeyDown(event) {
     lock = true;
     switch (event.key) {
         case 'Z':
-            if (event.ctrlKey) {
+            if (event.ctrlKey || event.metaKey) {
                 $app = redo(history);
                 event.preventDefault();
             }
             break;
         case 'z':
-            if (event.ctrlKey) {
+            if (event.ctrlKey || event.metaKey) {
                 $app = undo(history, $app);
                 event.preventDefault();
             }
             break;
         case 's':
-            if (event.ctrlKey) {
+            if (event.ctrlKey || event.metaKey) {
                 save();
                 event.preventDefault();
             }
@@ -265,7 +265,7 @@ function onKeyDown(event) {
 				<PanelSection title="Past Runs">
 					<div class="flex flex-col gap-2 w-full">
 						{#if $jobs.length > 0}
-							<div class="flex gap-2 flex-col ">
+							<div class="flex gap-2 flex-col">
 								{#each $jobs ?? [] as { job, component } (job)}
 									<!-- svelte-ignore a11y-click-events-have-key-events -->
 									<div
@@ -441,10 +441,15 @@ function onKeyDown(event) {
 </Drawer>
 
 <div
-	class="border-b flex flex-row justify-between py-1 gap-4  gap-y-2 px-3 items-center overflow-y-visible"
+	class="border-b flex flex-row justify-between py-1 gap-4 gap-y-2 px-3 items-center overflow-y-visible"
 >
 	<div class="min-w-64 w-64">
-		<input type="text" placeholder="App summary" class="text-sm w-full" bind:value={$summary} />
+		<input
+			type="text"
+			placeholder="App summary"
+			class="text-sm w-full font-semibold"
+			bind:value={$summary}
+		/>
 	</div>
 	<UndoRedo
 		undoProps={{ disabled: $history?.index === 0 }}
@@ -589,20 +594,23 @@ function onKeyDown(event) {
 				<span class="hidden md:inline">Save</span>
 			</Button>
 		{:else}
-			<ButtonPopup
+			<Button
 				loading={loading.save}
 				startIcon={{ icon: faSave }}
 				on:click={save}
 				color="dark"
 				size="xs"
+				dropdownItems={[
+					{
+						label: 'Fork',
+						onClick: () => {
+							window.open(`/apps/add?template=${appPath}`)
+						}
+					}
+				]}
 			>
-				<svelte:fragment slot="main">Save</svelte:fragment>
-				<ButtonPopupItem
-					on:click={() => {
-						window.open(`/apps/add?template=${appPath}`)
-					}}>Fork</ButtonPopupItem
-				>
-			</ButtonPopup>
+				Save
+			</Button>
 		{/if}
 	</div>
 </div>

package/components/apps/editor/AppPreview.svelte

@@ -34,6 +34,7 @@ const allIdsInPath = writable([]);
 const parentWidth = writable(0);
 setContext('AppViewerContext', {
     worldStore: buildWorld(context),
+    initialized: writable({ initialized: false, initializedComponents: [] }),
     app: appStore,
     summary: writable(summary),
     selectedComponent,
@@ -58,7 +59,7 @@ setContext('AppViewerContext', {
     hoverStore: writable(undefined),
     allIdsInPath
 });
-let ncontext = context;
+let ncontext = { ...context, workspace };
 function hashchange(e) {
     ncontext.hash = e.newURL.split('#')[1];
     ncontext = ncontext;
@@ -80,7 +81,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 
 <div class="relative">
 	<div
-		class="{$$props.class} {lockedClasses} h-full 
+		class="{$$props.class} {lockedClasses} h-full
 	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto"
 	>
 		{#if $appStore.grid}
@@ -151,8 +152,9 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
-				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
+				recomputeOnInputChanged={script.recomputeOnInputChanged ?? true}
 				recomputableByRefreshButton={script.autoRefresh ?? false}
+				noBackendValue={script.noBackendValue}
 			/>
 		{/if}
 	{/each}

package/components/apps/editor/ComponentHeader.svelte

@@ -1,5 +1,5 @@
 <script>import { classNames } from '../../../utils';
-import { Anchor, Bug, Expand, Move } from 'lucide-svelte';
+import { Anchor, Bug, Expand, Move, Pen } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import Popover from '../../Popover.svelte';
 import { Alert, Button } from '../../common';
@@ -10,6 +10,8 @@ export let selected;
 export let locked = false;
 export let hover = false;
 export let shouldHideActions = false;
+export let hasInlineEditor = false;
+export let inlineEditorOpened = false;
 const dispatch = createEventDispatcher();
 const { errorByComponent, openDebugRun, jobs, connectingInput } = getContext('AppViewerContext');
 $: error = getErrorFromLatestResult(component.id, $errorByComponent, $jobs);
@@ -40,6 +42,23 @@ function openDebugRuns() {
 
 {#if selected && !shouldHideActions}
 	<div class="top-[-9px] -right-[8px] flex flex-row absolute gap-1.5 z-50">
+		{#if hasInlineEditor}
+			<button
+				title="Expand"
+				class={classNames(
+					'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+					'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+				)}
+				on:click={() => dispatch('triggerInlineEditor')}
+				on:pointerdown|stopPropagation
+			>
+				{#if inlineEditorOpened}
+					<Pen aria-label="Unlock position" size={14} class="text-orange-500" />
+				{:else}
+					<Pen aria-label="Lock position" size={14} />
+				{/if}
+			</button>
+		{/if}
 		<button
 			title="Expand"
 			class={classNames(

package/components/apps/editor/ComponentHeader.svelte.d.ts

@@ -7,10 +7,13 @@ declare const __propDef: {
         locked?: boolean | undefined;
         hover?: boolean | undefined;
         shouldHideActions?: boolean | undefined;
+        hasInlineEditor?: boolean | undefined;
+        inlineEditorOpened?: boolean | undefined;
     };
     events: {
         mousedown: MouseEvent;
         pointerdown: PointerEvent;
+        triggerInlineEditor: CustomEvent<any>;
         expand: CustomEvent<any>;
         lock: CustomEvent<any>;
     } & {

package/components/apps/editor/GridEditor.svelte

@@ -59,7 +59,7 @@ function removeGridElement(component) {
 			<RecomputeAllComponents />
 		{/if}
 		<div class="flex text-2xs text-gray-600 gap-1 items-center">
-			<div class="py-2 pr-2  text-gray-600 flex gap-2 items-center">
+			<div class="py-2 pr-2 text-gray-600 flex gap-2 items-center">
 				Hide bar on view
 				<input class="windmillapp" type="checkbox" bind:checked={$app.norefreshbar} />
 			</div>
@@ -136,7 +136,7 @@ function removeGridElement(component) {
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
-				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
+				recomputeOnInputChanged={script.recomputeOnInputChanged ?? true}
 				recomputableByRefreshButton={script.autoRefresh ?? false}
 			/>
 		{/if}

package/components/apps/editor/RecomputeAllComponents.svelte

@@ -3,14 +3,14 @@ import { ChevronDown, RefreshCw } from 'lucide-svelte';
 import { getContext, onMount } from 'svelte';
 import Button from '../../common/button/Button.svelte';
 import { allItems } from '../utils';
-const { runnableComponents, app, worldStore } = getContext('AppViewerContext');
+const { runnableComponents, app, initialized } = getContext('AppViewerContext');
 let loading = false;
 let timeout = undefined;
 let interval = undefined;
 let shouldRefresh = false;
 let firstLoad = false;
 $: !firstLoad &&
-    $worldStore.initializedOutputs ==
+    $initialized.initializedComponents?.length ==
         allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length &&
     refresh();
 $: componentNumber = Object.values($runnableComponents).filter((x) => x.autoRefresh).length;
@@ -33,13 +33,16 @@ function setInter(inter) {
     onClick(!inter);
 }
 function refresh() {
+    let isFirstLoad = false;
     if (!firstLoad) {
-        $worldStore.initialized = true;
+        $initialized.initialized = true;
         firstLoad = true;
+        isFirstLoad = true;
     }
     loading = true;
     Promise.all(Object.keys($runnableComponents).map((id) => {
-        if (!$runnableComponents?.[id]?.autoRefresh) {
+        if (!$runnableComponents?.[id]?.autoRefresh &&
+            (!isFirstLoad || !$runnableComponents?.[id]?.refreshOnStart)) {
             return;
         }
         return $runnableComponents?.[id]?.cb?.();

package/components/apps/editor/SettingsPanel.svelte

@@ -94,6 +94,7 @@ function findComponentSettings(app, id) {
 					fields={hiddenInlineScript.script.fields}
 					autoRefresh={hiddenInlineScript.script.autoRefresh}
 					id={`bg_${hiddenInlineScript.index}`}
+					bind:recomputeOnInputChanged={hiddenInlineScript.script.recomputeOnInputChanged}
 					bind:doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged}
 					bind:inlineScript={hiddenInlineScript.script.inlineScript}
 				/>

package/components/apps/editor/SubGridEditor.svelte

@@ -1,13 +1,13 @@
-<script>import { classNames } from '../../../utils';
+<script>import { push } from '../../../history';
+import { classNames } from '../../../utils';
 import { createEventDispatcher, getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
-import Component from './component/Component.svelte';
-import { expandGriditem, findGridItem, selectId } from './appUtils';
-import { push } from '../../../history';
 import Grid from '../svelte-grid/Grid.svelte';
-import GridViewer from './GridViewer.svelte';
+import { expandGriditem, findGridItem, selectId } from './appUtils';
+import Component from './component/Component.svelte';
 import ComponentWrapper from './component/ComponentWrapper.svelte';
+import GridViewer from './GridViewer.svelte';
 export let containerHeight = undefined;
 export let containerWidth = undefined;
 let classes = '';

package/components/apps/editor/appUtils.js

@@ -1,10 +1,10 @@
-import { getNextId } from '../../flows/flowStateUtils';
 import { ccomponents, components, getRecommendedDimensionsByComponent } from './component';
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
 import gridHelp from '../svelte-grid/utils/helper';
 import { get } from 'svelte/store';
 import { sendUserToast } from '../../../utils';
+import { getNextId } from '../../flows/idUtils';
 export function dfs(grid, id, subgrids) {
     for (const item of grid) {
         if (item.id === id) {
@@ -25,6 +25,14 @@ export function dfs(grid, id, subgrids) {
     return undefined;
 }
 export function selectId(e, id, selectedComponent, app) {
+    // this ensure handleClickOutside are triggered
+    let event = new MouseEvent('click', {
+        view: window,
+        bubbles: true,
+        cancelable: true,
+        relatedTarget: e.target
+    });
+    window.dispatchEvent(event);
     if (e.shiftKey) {
         selectedComponent.update((old) => {
             if (old && old?.[0]) {
@@ -337,7 +345,6 @@ function isOverlapping(item1, item2) {
         item1.y + item1.h > item2.y);
 }
 export function initOutput(world, id, init) {
-    world.initializedOutputs += 1;
     if (!world) {
         return {};
     }
@@ -421,6 +428,9 @@ export function connectInput(connectingInput, componentId, path) {
     return connectingInput;
 }
 export function recursivelyFilterKeyInJSON(json, search, extraSearch) {
+    if (json === null || json === undefined || typeof json != 'object') {
+        return json;
+    }
     if (!search || search == '') {
         return json;
     }
@@ -435,7 +445,7 @@ export function recursivelyFilterKeyInJSON(json, search, extraSearch) {
         }
         else if (typeof json[key] === 'object') {
             const res = recursivelyFilterKeyInJSON(json[key], search, extraSearch);
-            if (Object.keys(res).length !== 0) {
+            if (Object.keys(res ?? {}).length !== 0) {
                 filteredJSON[key] = res;
             }
         }

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

@@ -14,6 +14,7 @@ $: ismoving =
     movingcomponents != undefined && $mode == 'dnd' && $movingcomponents?.includes(component.id);
 let initializing = undefined;
 let componentContainerHeight = 0;
+let inlineEditorOpened = false;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -40,11 +41,18 @@ let componentContainerHeight = 0;
 			on:lock
 			on:expand
 			{locked}
+			{inlineEditorOpened}
+			hasInlineEditor={component.type === 'textcomponent' &&
+				component.componentInput &&
+				component.componentInput.type !== 'connected'}
+			on:triggerInlineEditor={() => {
+				inlineEditorOpened = !inlineEditorOpened
+			}}
 		/>
 	{/if}
 
 	{#if ismoving}
-		<div class="absolute -top-8 w-40 ">
+		<div class="absolute -top-8 w-40">
 			<button
 				class="border p-0.5 text-xs"
 				on:click={() => {
@@ -166,6 +174,7 @@ let componentContainerHeight = 0;
 				configuration={component.configuration}
 				customCss={component.customCss}
 				bind:initializing
+				bind:editorMode={inlineEditorOpened}
 				componentInput={component.componentInput}
 				{render}
 			/>
@@ -413,5 +422,18 @@ let componentContainerHeight = 0;
 	</div>
 </div>
 {#if initializing}
-	<div class="absolute inset-0 center-center flex-col bg- border animate-skeleton" />
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<div
+		on:mouseover|stopPropagation={() => {
+			if (component.id !== $hoverStore) {
+				$hoverStore = component.id
+			}
+		}}
+		on:mouseout|stopPropagation={() => {
+			if ($hoverStore !== undefined) {
+				$hoverStore = undefined
+			}
+		}}
+		class="absolute inset-0 center-center flex-col bg- border animate-skeleton"
+	/>
 {/if}

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

@@ -49,6 +49,11 @@ function onPointerDown(e) {
 			e.stopPropagation()
 		}
 	}}
+	on:focus={(e) => {
+		if ($connectingInput.opened) {
+			e.stopPropagation()
+		}
+	}}
 	on:pointerdown={onPointerDown}
 	on:click|capture={(event) => preventInteraction(event, type === 'tabscomponent')}
 	on:drag|capture={preventInteraction}