windmill-components 1.408.2 → 1.430.2

package/package/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -13,6 +13,7 @@ export let color = 'indigo';
 export let selectable = true;
 export let renamable = true;
 export let disabled = false;
+export let render = true;
 const { manuallyOpened, search, hasResult } = getContext('ContextPanel');
 const { selectedComponent, app, hoverStore, allIdsInPath, connectingInput, worldStore } = getContext('AppViewerContext');
 $: subids = $search != '' ? allsubIds($app, id) : [];
@@ -163,95 +164,98 @@ function processRunnable(from, to, runnable) {
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class={$search == '' || inSearch ? '' : 'invisible h-0 overflow-hidden'}>
-	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		on:mouseenter|stopPropagation={() => {
-			if (id !== $hoverStore) {
-				$hoverStore = id
-			}
-		}}
-		on:mouseleave|stopPropagation={() => {
-			if ($hoverStore !== undefined) {
-				$hoverStore = undefined
-			}
-		}}
-		class={classNames(
-			'flex items-center justify-between p-1 cursor-pointer gap-1 truncate',
-			hoverColor[color],
-			$selectedComponent?.includes(id)
-				? openBackground[color]
-				: $connectingInput.hoveredComponent === id
-				? 'bg-orange-300 '
-				: 'bg-surface-secondary',
-			first ? 'border-t' : '',
-			nested ? 'border-l' : '',
-			'transition-all'
-		)}
-		on:click={() => {
-			if (!disabled) {
-				$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
-			}
-		}}
-		id={`output-${id}`}
-	>
-		<div class="flex">
-			<button
-				disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
-				title="Select component"
-				on:click|stopPropagation={() => ($selectedComponent = [id])}
-				class="flex items-center ml-0.5 rounded-sm bg-surface-selected hover:text-primary text-tertiary"
-			>
-				<div
-					class={classNames(
-						'text-2xs  font-bold px-2 py-0.5 rounded-sm',
-						$selectedComponent?.includes(id) ? idClass[color] : ''
-					)}
+<div class={render && ($search == '' || inSearch) ? '' : 'invisible h-0 overflow-hidden'}>
+	{#if render && ($search == '' || inSearch)}
+		<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			on:mouseenter|stopPropagation={() => {
+				if (id !== $hoverStore) {
+					$hoverStore = id
+				}
+			}}
+			on:mouseleave|stopPropagation={() => {
+				if ($hoverStore !== undefined) {
+					$hoverStore = undefined
+				}
+			}}
+			class={classNames(
+				'flex items-center justify-between p-1 cursor-pointer gap-1 truncate',
+				hoverColor[color],
+				$selectedComponent?.includes(id)
+					? openBackground[color]
+					: $connectingInput.hoveredComponent === id
+					? 'bg-[#fab157]'
+					: 'bg-surface-secondary',
+				first ? 'border-t' : '',
+				nested ? 'border-l' : '',
+				'transition-all'
+			)}
+			on:click={() => {
+				if (!disabled) {
+					$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
+				}
+			}}
+			id={`output-${id}`}
+		>
+			<div class="flex">
+				<button
+					disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
+					title="Select component"
+					on:click|stopPropagation={() => ($selectedComponent = [id])}
+					class="flex items-center ml-0.5 rounded-sm bg-surface-selected hover:text-primary text-tertiary"
 				>
-					{id}
-				</div>
-				{#if selectable && !$selectedComponent?.includes(id)}
-					<div class="px-1">
-						<Pointer size={14} />
+					<div
+						class={classNames(
+							'text-2xs  font-bold px-2 py-0.5 rounded-sm',
+							$selectedComponent?.includes(id) ? idClass[color] : ''
+						)}
+					>
+						{id}
 					</div>
+					{#if selectable && !$selectedComponent?.includes(id)}
+						<div class="px-1">
+							<Pointer size={14} />
+						</div>
+					{/if}
+				</button>
+				{#if selectable && renamable && $selectedComponent?.includes(id)}
+					<div class="h-3">
+						<IdEditor
+							{id}
+							on:selected={() => ($selectedComponent = [id])}
+							on:save={({ detail }) => renameId(detail)}
+						/></div
+					>
 				{/if}
-			</button>
-			{#if selectable && renamable && $selectedComponent?.includes(id)}
-				<div class="h-3">
-					<IdEditor
-						{id}
-						on:selected={() => ($selectedComponent = [id])}
-						on:save={({ detail }) => renameId(detail)}
-					/></div
-				>
-			{/if}
-		</div>
-		<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
-			{#if ['ctx', 'state'].includes(id)}
-				<DocLink
-					docLink={id === 'state'
-						? 'https://www.windmill.dev/docs/apps/outputs#state'
-						: id === 'ctx'
-						? 'https://www.windmill.dev/docs/apps/outputs#app-context'
-						: ''}
-					size="xs2"
-				/>
-			{/if}
-			{name}
-			<div class={classNames('bg-surface-secondary rounded-sm')}>
-				{#if !open}
-					<ChevronDown size={14} color="gray" />
-				{:else if $manuallyOpened[id]}
-					<ChevronUp size={14} class={manuallyOpenColor[color]} strokeWidth={4} />
-				{:else}
-					<ChevronUp size={14} color="gray" />
+			</div>
+			<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
+				{#if ['ctx', 'state'].includes(id)}
+					<DocLink
+						docLink={id === 'state'
+							? 'https://www.windmill.dev/docs/apps/outputs#state'
+							: id === 'ctx'
+							? 'https://www.windmill.dev/docs/apps/outputs#app-context'
+							: ''}
+						size="xs2"
+					/>
 				{/if}
+				{name}
+				<div class={classNames('bg-surface-secondary rounded-sm')}>
+					{#if !open}
+						<ChevronDown size={14} color="gray" />
+					{:else if $manuallyOpened[id]}
+						<ChevronUp size={14} class={manuallyOpenColor[color]} strokeWidth={4} />
+					{:else}
+						<ChevronUp size={14} color="gray" />
+					{/if}
+				</div>
 			</div>
 		</div>
-	</div>
+	{/if}
+
 	<div
-		class="border-b {open
+		class="border-b {render && open
 			? 'h-full'
 			: 'h-0 overflow-hidden invisible'} {$connectingInput.hoveredComponent === id &&
 		!$selectedComponent?.includes(id)
@@ -259,7 +263,7 @@ function processRunnable(from, to, runnable) {
 			: ''}"
 	>
 		<div class={classNames(nested ? 'border-l ml-2' : '', open ? 'border-t' : '')}>
-			<slot />
+			<slot render={open && render} />
 		</div>
 	</div>
 </div>

package/package/components/apps/editor/contextPanel/components/OutputHeader.svelte.d.ts

@@ -9,12 +9,15 @@ declare const __propDef: {
         selectable?: boolean | undefined;
         renamable?: boolean | undefined;
         disabled?: boolean | undefined;
+        render?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            render: boolean;
+        };
     };
 };
 export type OutputHeaderProps = typeof __propDef.props;

package/package/components/apps/editor/contextPanel/components/TableActionsOutput.svelte

@@ -1,19 +1,20 @@
 <script>import Output from './Output.svelte';
 export let gridItem;
+export let render;
 </script>
 
 <div class="my-1">
 	{#if gridItem.data.type === 'tablecomponent' && gridItem.data.actionButtons.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.actionButtons as action, index}
-				<Output id={action.id} first={index === 0} label="Table action" />
+				<Output renderRec={render} id={action.id} first={index === 0} label="Table action" />
 			{/each}
 		</div>
 	{/if}
 	{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee' || gridItem.data.type === 'dbexplorercomponent' || gridItem.data.type === 'aggridinfinitecomponent' || gridItem.data.type === 'aggridinfinitecomponentee') && gridItem.data.actions?.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.actions as action, index}
-				<Output id={action.id} first={index === 0} label="Table action" />
+				<Output renderRec={render} id={action.id} first={index === 0} label="Table action" />
 			{/each}
 		</div>
 	{/if}

package/package/components/apps/editor/contextPanel/components/TableActionsOutput.svelte.d.ts

@@ -3,6 +3,7 @@ import type { GridItem } from '../../../types';
 declare const __propDef: {
     props: {
         gridItem: GridItem;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -211,30 +211,42 @@ function handleItemsChange() {
     componentInput.value = items.map((item) => item.value).filter((item) => item != undefined);
 }
 let raw = false;
-// let mounted = false
-// $: if (componentInput.value && mounted) {
-// 	const newItems = (Array.isArray(componentInput.value) ? componentInput.value : [])
-// 		.filter((x) => x != undefined)
-// 		.map((item, index) => {
-// 			return { value: item, id: generateRandomString() }
-// 		})
-// 	if (
-// 		JSON.stringify(newItems.map((i) => i.value)) !== JSON.stringify(items.map((i) => i.value))
-// 	) {
-// 		items = newItems
-// 	}
-// }
-// onMount(() => {
-// 	mounted = true
-// })
+let refreshCount = 0;
 </script>
 
 <div class="flex gap-2 flex-col mt-2 w-full">
 	{#if Array.isArray(items) && componentInput.value}
-		<div class="flex flex-row items-center justify-between">
+		<div class="flex flex-row items-center justify-between mr-1">
 			<div class="text-xs text-tertiary font-semibold">{pluralize(items.length, 'item')}</div>
-
-			{#if subFieldType === 'ag-grid' || subFieldType === 'table-column'}
+			{#if subFieldType == 'labeledselect'}
+				<Toggle
+					options={{
+						right: 'w/ value'
+					}}
+					size="xs"
+					on:change={(e) => {
+						if (e.detail) {
+							items = items.map((item) => {
+								if (typeof item.value === 'string') {
+									return { ...item, value: { label: item.value, value: item.value } }
+								} else {
+									return item
+								}
+							})
+						} else {
+							items = items.map((item) => {
+								if (typeof item.value === 'object' && item.value.hasOwnProperty('label')) {
+									return { ...item, value: item.value.value }
+								} else {
+									return { ...item, value: JSON.stringify(item.value) }
+								}
+							})
+						}
+						refreshCount += 1
+					}}
+					checked={items.some((x) => typeof x.value != 'string')}
+				/>
+			{:else if subFieldType === 'ag-grid' || subFieldType === 'table-column'}
 				<Toggle
 					options={{
 						right: 'Raw'
@@ -244,49 +256,51 @@ let raw = false;
 				/>
 			{/if}
 		</div>
-		<section
-			use:dragHandleZone={{
-				items,
-				flipDurationMs,
-				dropTargetStyle: {}
-			}}
-			on:consider={handleConsider}
-			on:finalize={handleFinalize}
-		>
-			{#each items as item, index (item.id)}
-				<div class="border-0 outline-none w-full">
-					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+		{#key refreshCount}
+			<section
+				use:dragHandleZone={{
+					items,
+					flipDurationMs,
+					dropTargetStyle: {}
+				}}
+				on:consider={handleConsider}
+				on:finalize={handleFinalize}
+			>
+				{#each items as item, index (item.id)}
+					<div class="border-0 outline-none w-full">
+						<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 
-					<div class="flex flex-row gap-2 items-center relative my-1 w-full">
-						<div class="grow min-w-0">
-							<SubTypeEditor
-								{id}
-								subFieldType={raw ? 'object' : subFieldType}
-								bind:componentInput
-								bind:value={item.value}
-								on:remove={() => deleteElementByType(index)}
-							/>
-						</div>
+						<div class="flex flex-row gap-2 items-center relative my-1 w-full">
+							<div class="grow min-w-0">
+								<SubTypeEditor
+									{id}
+									subFieldType={raw ? 'object' : subFieldType}
+									bind:componentInput
+									bind:value={item.value}
+									on:remove={() => deleteElementByType(index)}
+								/>
+							</div>
 
-						<div class="flex justify-between flex-col items-center">
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
-							<div class="w-4 h-4 cursor-move handle" use:dragHandle>
-								<GripVertical size={16} />
+							<div class="flex justify-between flex-col items-center">
+								<!-- svelte-ignore a11y-no-static-element-interactions -->
+								<div class="w-4 h-4 cursor-move handle" use:dragHandle>
+									<GripVertical size={16} />
+								</div>
+								{#if subFieldType !== 'db-explorer'}
+									<button
+										class="z-10 rounded-full p-1 duration-200 hover:bg-surface-hover"
+										aria-label="Remove item"
+										on:click|preventDefault|stopPropagation={() => deleteElementByType(index)}
+									>
+										<X size={14} />
+									</button>
+								{/if}
 							</div>
-							{#if subFieldType !== 'db-explorer'}
-								<button
-									class="z-10 rounded-full p-1 duration-200 hover:bg-surface-hover"
-									aria-label="Remove item"
-									on:click|preventDefault|stopPropagation={() => deleteElementByType(index)}
-								>
-									<X size={14} />
-								</button>
-							{/if}
 						</div>
 					</div>
-				</div>
-			{/each}
-		</section>
+				{/each}
+			</section>
+		{/key}
 	{/if}
 	{#if subFieldType === 'db-explorer'}
 		{#if componentInput.loading}

package/package/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte

@@ -1,12 +1,13 @@
-<script>import { getContext } from 'svelte';
-import { Code, CurlyBraces, FunctionSquare, Pen, Plug, Plug2 } from 'lucide-svelte';
+<script>import { getContext, createEventDispatcher } from 'svelte';
+import { Code, CurlyBraces, FunctionSquare, Pen, Plug2 } from 'lucide-svelte';
 import ToggleButtonGroup from '../../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
-import { Button } from '../../../common';
+import ConnectionButton from '../../../common/button/ConnectionButton.svelte';
 export let componentInput;
 export let disableStatic = false;
 export let evalV2editor;
 const { onchange, connectingInput, app } = getContext('AppViewerContext');
+const dispatch = createEventDispatcher();
 $: if (componentInput.fieldType == 'template' && componentInput.type == 'static') {
     //@ts-ignore
     componentInput.type = 'templatev2';
@@ -37,7 +38,7 @@ const iconOnlyThreshold = 300;
 
 {#if componentInput.fieldType !== 'any'}
 	<div class="w-full">
-		<div class="mx-auto flex gap-2" bind:clientWidth>
+		<div class="flex gap-2 justify-end" bind:clientWidth>
 			<ToggleButtonGroup
 				on:selected={() => {
 					onchange?.()
@@ -95,14 +96,19 @@ const iconOnlyThreshold = 300;
 					id="data-source-compute"
 				/>
 			</ToggleButtonGroup>
+
 			<div class="flex">
-				<Button
-					size="xs"
-					variant="border"
-					color="light"
-					title="Connect"
-					id={`plug`}
-					on:click={() => {
+				<ConnectionButton
+					closeConnection={() => {
+						$connectingInput = {
+							opened: false,
+							hoveredComponent: undefined,
+							input: undefined,
+							onConnect: () => {}
+						}
+						dispatch('select', true)
+					}}
+					openConnection={() => {
 						$connectingInput = {
 							opened: true,
 							input: undefined,
@@ -110,9 +116,8 @@ const iconOnlyThreshold = 300;
 							onConnect: applyConnection
 						}
 					}}
-				>
-					<Plug size={12} />
-				</Button>
+					isOpen={!!$connectingInput.opened}
+				/>
 			</div>
 		</div>
 	</div>

package/package/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         evalV2editor: EvalV2InputEditor | undefined;
     };
     events: {
+        select: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -444,7 +444,7 @@ function transformToFrontend() {
 						Show
 					</Button>
 				</div>
-				<div class="flex gap-2 items-center">
+				<div class="flex gap-2 items-center flex-wrap">
 					<div class="!text-2xs">Full height</div>
 					{#if componentSettings?.item?.[12]?.fullHeight !== undefined}
 						<Toggle
@@ -503,7 +503,7 @@ function transformToFrontend() {
 					</Button>
 				</div>
 
-				<div class="grid grid-cols-2 gap-1 text-tertiary">
+				<div class="overflow-auto grid grid-cols-2 gap-1 text-tertiary">
 					<div>
 						<span class="text-secondary text-xs">Copy:</span>
 					</div>

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -8,10 +8,10 @@ import UploadInputEditor from './inputEditor/UploadInputEditor.svelte';
 import { getContext } from 'svelte';
 import ToggleButtonGroup from '../../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
-import { FunctionSquare, Loader2, Pen, Plug, Plug2, Upload, User } from 'lucide-svelte';
+import { FunctionSquare, Loader2, Pen, Plug2, Upload, User } from 'lucide-svelte';
 import { fieldTypeToTsType } from '../../utils';
 import EvalV2InputEditor from './inputEditor/EvalV2InputEditor.svelte';
-import { Button } from '../../../common';
+import ConnectionButton from '../../../common/button/ConnectionButton.svelte';
 import Toggle from '../../../Toggle.svelte';
 export let id;
 export let componentInput;
@@ -61,6 +61,22 @@ $: if (componentInput == undefined) {
         value: undefined
     };
 }
+function closeConnection() {
+    $connectingInput = {
+        opened: false,
+        hoveredComponent: undefined,
+        input: undefined,
+        onConnect: () => { }
+    };
+}
+function openConnection() {
+    $connectingInput = {
+        opened: true,
+        input: undefined,
+        hoveredComponent: undefined,
+        onConnect: applyConnection
+    };
+}
 </script>
 
 {#if !(resourceOnly && (fieldType !== 'object' || !format?.startsWith('resource-')))}
@@ -127,25 +143,7 @@ $: if (componentInput == undefined) {
 						{/if}
 						<ToggleButton value="evalv2" icon={FunctionSquare} iconOnly tooltip="Eval" />
 					</ToggleButtonGroup>
-					<div>
-						<Button
-							size="xs"
-							variant="border"
-							color="light"
-							title="Connect"
-							on:click={() => {
-								$connectingInput = {
-									opened: true,
-									input: undefined,
-									hoveredComponent: undefined,
-									onConnect: applyConnection
-								}
-							}}
-							id="schema-plug"
-						>
-							<Plug size={14} />
-						</Button>
-					</div>
+					<ConnectionButton {closeConnection} {openConnection} isOpen={!!$connectingInput.opened} />
 				{/if}
 			</div>
 		</div>
@@ -185,7 +183,7 @@ $: if (componentInput == undefined) {
 		{:else if componentInput?.type === 'user'}
 			<span class="text-2xs italic text-tertiary">Field's value is set by the user</span>
 		{/if}
-		{#if (componentInput?.type === 'evalv2' || componentInput?.type === 'connected' || componentInput?.type === 'user') && fieldType == 'object' && format?.startsWith('resource-')}
+		{#if (componentInput?.type === 'evalv2' || componentInput?.type === 'connected' || componentInput?.type === 'user') && ((fieldType == 'object' && format?.startsWith('resource-') && format !== 'resource-s3_object') || fieldType == 'resource')}
 			<div class="flex flex-row items-center">
 				<Toggle
 					size="xs"

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

@@ -146,6 +146,12 @@ $: componentInput && onchange?.();
 						: undefined}
 					showSchemaExplorer
 				/>
+			{:else if fieldType == 'labeledselect' && typeof componentInput.value == 'string'}
+				<input
+					class="text-xs px-2 border-y w-full flex flex-row items-center border-r rounded-r-md h-8"
+					bind:value={componentInput.value}
+					placeholder="Label"
+				/>
 			{:else}
 				<div class="flex w-full flex-col">
 					<JsonEditor

package/package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte

@@ -1,18 +1,11 @@
 <script>import { fly } from 'svelte/transition';
 import { secondaryMenuLeft, secondaryMenuRight } from './';
-import { getContext } from 'svelte';
 import CloseButton from '../../../../common/CloseButton.svelte';
 import { zIndexes } from '../../../../../zIndexes';
 import DocLink from '../DocLink.svelte';
-const { selectedComponent } = getContext('AppViewerContext');
 export let right;
 let secondaryMenu = right ? secondaryMenuRight : secondaryMenuLeft;
 let width;
-let lastSelected = $selectedComponent;
-$: if (right && lastSelected !== $selectedComponent) {
-    secondaryMenu.close();
-    lastSelected = $selectedComponent;
-}
 </script>
 
 <div

package/package/components/apps/inputType.d.ts

@@ -109,7 +109,7 @@ export type StaticOptions = {
         label: string;
     }[];
 };
-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, 'db-table'> & 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'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', object[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'array', object[], 'number-tuple'> | AppInputSpec<'app-path', string>;
+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, 'db-table'> & 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'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', (object | string)[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'array', object[], 'number-tuple'> | AppInputSpec<'app-path', string>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;

package/package/components/apps/svelte-grid/Grid.svelte

@@ -29,6 +29,7 @@ export let scroller = undefined;
 export let sensor = 20;
 export let root = false;
 export let parentWidth = undefined;
+export let disableMove = false;
 let getComputedCols;
 let container;
 $: [gapX, gapY] = gap;
@@ -258,7 +259,15 @@ export function handleInitMove(id) {
 }
 </script>
 
-<svelte:window on:keydown={handleKeyDown} on:keyup={handleKeyUp} />
+<svelte:window
+	on:focus={() => {
+		if ($isCtrlOrMetaPressedStore) {
+			$isCtrlOrMetaPressedStore = false
+		}
+	}}
+	on:keydown={handleKeyDown}
+	on:keyup={handleKeyUp}
+/>
 
 <div
 	class="svlt-grid-container"
@@ -390,6 +399,7 @@ export function handleInitMove(id) {
 				overlapped={$overlappedStore}
 				moveMode={$isCtrlOrMetaPressedStore ? 'insert' : 'move'}
 				type={item.data['type']}
+				{disableMove}
 			>
 				{#if item[getComputedCols]}
 					<slot