windmill-components 1.82.4 → 1.82.5

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

@@ -35,22 +35,14 @@ function handleItems() {
     }
 }
 $: value && outputs?.result.set(value.map((v) => v.value));
-$: css = concatCustomCss($app.css?.multiselectcomponent, customCss);
+$: css = concatCustomCss($app.css?.selectcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.items} bind:value={labels} />
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	<div
-		class="app-select w-full"
-		style="height: 100%; overflow: auto;"
-		on:pointerdown={(e) => {
-			if (!e.shiftKey) {
-				e.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"
@@ -59,18 +51,18 @@ $: css = concatCustomCss($app.css?.multiselectcomponent, customCss);
 				on:change={(e) => e.stopPropagation()}
 				{items}
 				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={'border-color: #999; min-height: 100%;' +
+				containerStyles={'border-color: #999;' +
 					SELECT_INPUT_DEFAULT_STYLE.containerStyles +
 					css?.input?.style}
 				bind:value
 				{placeholder}
 				on:click={() => {
 					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
+						$selectedComponent = id
 					}
 				}}
 				on:focus={() => {
-					$selectedComponent = [id]
+					$selectedComponent = id
 				}}
 				floatingConfig={{
 					strategy: 'fixed'

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

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

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,15 +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={(e) => {
-			if (!e.shiftKey) {
-				e.stopPropagation()
-			}
-		}}
-	>
+	<div class="app-select w-full mx-0.5" style="height: 34px;" on:pointerdown|stopPropagation>
 		<Select
 			--border-radius="0"
 			--border-color="#999"
@@ -112,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/AppSelect.svelte.d.ts

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

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>

package/components/apps/components/inputs/AppTextInput.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initOutput } from '../../editor/appUtils';
-import { concatCustomCss, selectId } from '../../utils';
+import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
@@ -29,55 +29,45 @@ $: css = concatCustomCss($app.css?.[appCssKey], customCss);
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
 
-{#if inputType === 'textarea'}
-	<textarea
-		class={twMerge(
-			'windmillapp w-full h-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
-			css?.input?.class ?? ''
-		)}
-		style="resize:none; {css?.input?.style ?? ''}"
-		on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
-		bind:value
-		{placeholder}
-	/>
-{:else}
-	<AlignWrapper {render} {verticalAlignment}>
-		{#if inputType === 'password'}
-			<input
-				class={twMerge(
-					'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
-					css?.input?.class ?? ''
-				)}
-				style={css?.input?.style ?? ''}
-				on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
-				type="password"
-				bind:value
-				{placeholder}
-			/>
-		{:else if inputType === 'text'}
-			<input
-				class={twMerge(
-					'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
-					css?.input?.class ?? ''
-				)}
-				style={css?.input?.style ?? ''}
-				on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
-				type="text"
-				bind:value
-				{placeholder}
-			/>
-		{:else if inputType === 'email'}
-			<input
-				class={twMerge(
-					'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
-					css?.input?.class ?? ''
-				)}
-				style={css?.input?.style ?? ''}
-				on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
-				type="email"
-				bind:value
-				{placeholder}
-			/>
-		{/if}
-	</AlignWrapper>
-{/if}
+<AlignWrapper {render} {verticalAlignment}>
+	{#if inputType === 'password'}
+		<input
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				css?.input?.class ?? ''
+			)}
+			style={css?.input?.style ?? ''}
+			on:focus|stopPropagation={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+			type="password"
+			bind:value
+			{placeholder}
+		/>
+	{:else if inputType === 'text'}
+		<input
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				css?.input?.class ?? ''
+			)}
+			style={css?.input?.style ?? ''}
+			on:focus={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+			type="text"
+			bind:value
+			{placeholder}
+		/>
+	{:else if inputType === 'email'}
+		<input
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				css?.input?.class ?? ''
+			)}
+			style={css?.input?.style ?? ''}
+			on:focus={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+			type="email"
+			bind:value
+			{placeholder}
+		/>
+	{/if}
+</AlignWrapper>

package/components/apps/components/inputs/AppTextInput.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         inputType?: string | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         customCss?: ComponentCustomCSS<'textinputcomponent'> | undefined;
-        appCssKey?: "textinputcomponent" | "textareainputcomponent" | "passwordinputcomponent" | "emailinputcomponent" | undefined;
+        appCssKey?: "textinputcomponent" | "passwordinputcomponent" | "emailinputcomponent" | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -40,7 +40,7 @@ $: css = concatCustomCss($app.css?.currencycomponent, customCss);
 	{#key isNegativeAllowed}
 		{#key locale}
 			{#key currency}
-				<div class="w-full" on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}>
+				<div class="w-full" on:pointerdown|stopPropagation={() => ($selectedComponent = id)}>
 					<CurrencyInput
 						inputClasses={{
 							formatted: twMerge('px-2 w-full py-1.5 windmillapp', css?.input?.class),

package/components/apps/components/layout/AppContainer.svelte

@@ -15,6 +15,7 @@ function onFocus() {
         subGridIndex: 0
     };
 }
+$: $selectedComponent === id && onFocus();
 $: css = concatCustomCss($app.css?.containercomponent, customCss);
 </script>
 
@@ -28,8 +29,7 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 			subGridId={`${id}-0`}
 			containerHeight={componentContainerHeight}
 			on:focus={() => {
-				$selectedComponent = [id]
-				onFocus()
+				$selectedComponent = id
 			}}
 		/>
 	{/if}

package/components/apps/components/layout/AppDrawer.svelte

@@ -38,6 +38,7 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 			{disabled}
 			on:pointerdown={(e) => {
 				e?.stopPropagation()
+				window.dispatchEvent(new Event('pointerup'))
 			}}
 			on:click={async (e) => {
 				$focusedGrid = {
@@ -79,7 +80,7 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 					subGridId={`${id}-0`}
 					containerHeight={1200}
 					on:focus={() => {
-						$selectedComponent = [id]
+						$selectedComponent = id
 					}}
 				/>
 			{/if}

package/components/apps/components/layout/AppSplitpanes.svelte

@@ -19,7 +19,7 @@ function onFocus() {
         subGridIndex: 0
     };
 }
-$: $selectedComponent?.includes(id) && onFocus();
+$: $selectedComponent === id && onFocus();
 $: css = concatCustomCss($app.css?.containercomponent, customCss);
 $componentControl[id] = {
     left: () => {
@@ -60,7 +60,7 @@ $: {
 				<div
 					class="w-full h-full"
 					on:pointerdown|stopPropagation={() => {
-						$selectedComponent = [id]
+						$selectedComponent = id
 						$focusedGrid = {
 							parentComponentId: id,
 							subGridIndex: index
@@ -77,7 +77,7 @@ $: {
 							subGridId={`${id}-${index}`}
 							containerHeight={horizontal ? undefined : componentContainerHeight - 8}
 							on:focus={() => {
-								$selectedComponent = [id]
+								$selectedComponent = id
 								$focusedGrid = {
 									parentComponentId: id,
 									subGridIndex: index

package/components/apps/components/layout/AppTabs.svelte

@@ -103,7 +103,7 @@ $: css = concatCustomCss($app.css?.tabscomponent, customCss);
 						? componentContainerHeight - tabHeight
 						: componentContainerHeight}
 					on:focus={() => {
-						$selectedComponent = [id]
+						$selectedComponent = id
 					}}
 				/>
 			{/each}

package/components/apps/editor/AppEditor.svelte

@@ -10,7 +10,8 @@ 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 { faPlus } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { faCode, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
 import { classNames, encodeState } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
@@ -25,10 +26,6 @@ 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';
-import { findGridItem, findGridItemParentGrid } from './appUtils';
-import { findItemsById } from '../svelte-grid/utils/matrix';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -64,7 +61,7 @@ setContext('AppViewerContext', {
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents: writable({}),
+    runnableComponents,
     appPath: path,
     workspace: $workspaceStore ?? '',
     onchange: () => saveDraft(),
@@ -79,14 +76,13 @@ setContext('AppViewerContext', {
     parentWidth: writable(0),
     state: writable({}),
     componentControl: writable({}),
-    hoverStore: writable(undefined),
-    allIdsInPath: writable([])
+    hoverStore: writable(undefined)
 });
 setContext('AppEditorContext', {
     history,
     pickVariableCallback,
     ontextfocus: writable(undefined),
-    movingcomponents: writable(undefined),
+    movingcomponent: writable(undefined),
     selectedComponentInEditor: writable(undefined)
 });
 let timeout = undefined;
@@ -113,36 +109,11 @@ function hashchange(e) {
 $: previewing = $mode === 'preview';
 $: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
 let selectedTab = 'insert';
-let befSelected = undefined;
-$: if ($selectedComponent?.[0] != befSelected) {
-    befSelected = $selectedComponent?.[0];
+$: if ($selectedComponent) {
     selectedTab = 'settings';
-    if (befSelected) {
-        if (!['ctx', 'state'].includes(befSelected) && !befSelected?.startsWith('bg_')) {
-            let item = findGridItem($appStore, befSelected);
-            if (item?.data.type === 'containercomponent') {
-                $focusedGrid = {
-                    parentComponentId: befSelected,
-                    subGridIndex: 0
-                };
-            }
-            else {
-                let subgrid = findGridItemParentGrid($appStore, befSelected);
-                if (subgrid) {
-                    try {
-                        $focusedGrid = {
-                            parentComponentId: subgrid.split('-')[0],
-                            subGridIndex: parseInt(subgrid.split('-')[1])
-                        };
-                    }
-                    catch { }
-                }
-                else {
-                    $focusedGrid = undefined;
-                }
-            }
-        }
-    }
+}
+else {
+    selectedTab = 'insert';
 }
 let itemPicker = undefined;
 $: if ($pickVariableCallback) {
@@ -189,7 +160,7 @@ let variableEditor = undefined;
 					<Pane size={15} minSize={5} maxSize={33}>
 						<ContextPanel />
 					</Pane>
-					<Pane size={63}>
+					<Pane size={64}>
 						<SplitPanesWrapper>
 							<Splitpanes horizontal>
 								<Pane size={70}>
@@ -213,7 +184,7 @@ let variableEditor = undefined;
 											{#if $appStore.grid}
 												<ComponentNavigation />
 
-												<div on:pointerdown|stopPropagation class={twMerge(width, 'mx-auto')}>
+												<div on:pointerdown|stopPropagation class={width}>
 													<GridEditor {policy} />
 												</div>
 
@@ -230,30 +201,31 @@ let variableEditor = undefined;
 							</Splitpanes>
 						</SplitPanesWrapper>
 					</Pane>
-					<Pane size={22} minSize={5} maxSize={33}>
+					<Pane size={21} 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-1">
-										<Plus size={18} />
+									<div class="m-1 center-center gap-2">
+										<Icon data={faPlus} />
+										<span>Insert</span>
 									</div>
 								</Tab>
 								<Tab value="settings" size="xs">
-									<div class="m-1 center-center gap-1">
-										<Component size={18} />
-										<span>Component</span>
+									<div class="m-1 center-center gap-2">
+										<Icon data={faSliders} />
+										<span>Settings</span>
 									</div>
 								</Tab>
 								<Tab value="css" size="xs">
-									<div class="m-1 center-center gap-1">
-										<Paintbrush size={18} />
+									<div class="m-1 center-center gap-2">
+										<Icon data={faCode} />
+										<span>CSS</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/AppEditorHeader.svelte

@@ -177,11 +177,6 @@ let lock = false;
 function onKeyDown(event) {
     if (lock)
         return;
-    let classes = event.target?.['className'];
-    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
-        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
-        return;
-    }
     lock = true;
     switch (event.key) {
         case 'Z':

package/components/apps/editor/AppPreview.svelte

@@ -10,8 +10,6 @@ import { Component } from './component';
 import { twMerge } from 'tailwind-merge';
 import { columnConfiguration } from '../gridUtils';
 import { HiddenComponent } from '../components';
-import { deepEqual } from 'fast-equals';
-import { dfs } from './appUtils';
 export let app;
 export let appPath;
 export let breakpoint;
@@ -30,7 +28,7 @@ const connectingInput = writable({
     input: undefined,
     hoveredComponent: undefined
 });
-const allIdsInPath = writable([]);
+const runnableComponents = writable({});
 const parentWidth = writable(0);
 setContext('AppViewerContext', {
     worldStore: buildWorld(context),
@@ -40,7 +38,7 @@ setContext('AppViewerContext', {
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents: writable({}),
+    runnableComponents,
     appPath,
     workspace,
     onchange: undefined,
@@ -55,21 +53,13 @@ setContext('AppViewerContext', {
     parentWidth,
     state: writable({}),
     componentControl: writable({}),
-    hoverStore: writable(undefined),
-    allIdsInPath
+    hoverStore: writable(undefined)
 });
 let ncontext = context;
 function hashchange(e) {
     ncontext.hash = e.newURL.split('#')[1];
     ncontext = ncontext;
 }
-let previousSelectedIds = undefined;
-$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-    previousSelectedIds = $selectedComponent;
-    $allIdsInPath = ($selectedComponent ?? [])
-        .flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
-        .filter((x) => x != undefined);
-}
 $: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
 $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
 </script>
@@ -92,7 +82,8 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 				)}
 			>
 				<div
-					class="w-full sticky z-[1001] top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
+					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;"
 				>
 					<h2 class="truncate">{summary}</h2>
 					<RecomputeAllComponents />
@@ -110,7 +101,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 		>
 			<div>
 				<GridViewer
-					allIdsInPath={$allIdsInPath}
+					onTopId={$selectedComponent}
 					items={app.grid}
 					let:dataItem
 					rowHeight={36}
@@ -120,7 +111,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class={'h-full w-full center-center'}
-						on:pointerdown={() => ($selectedComponent = [dataItem.id])}
+						on:pointerdown={() => ($selectedComponent = dataItem.id)}
 					>
 						<Component render={true} component={dataItem.data} selected={false} locked={true} />
 					</div>
@@ -151,8 +142,6 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
-				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
-				recomputableByRefreshButton={script.autoRefresh ?? false}
 			/>
 		{/if}
 	{/each}

package/components/apps/editor/ComponentHeader.svelte

@@ -21,7 +21,6 @@ function openDebugRuns() {
 
 {#if selected || hover}
 	<span
-		on:mousedown|stopPropagation|capture
 		draggable="false"
 		title={`Id: ${component.id}`}
 		class={twMerge(

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

@@ -8,8 +8,8 @@ declare const __propDef: {
         hover?: boolean | undefined;
     };
     events: {
-        mousedown: MouseEvent;
         pointerdown: PointerEvent;
+        mousedown: MouseEvent;
         expand: CustomEvent<any>;
         lock: CustomEvent<any>;
     } & {