windmill-components 1.448.50 → 1.472.2

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

@@ -2,15 +2,19 @@
 import { Pencil } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import IdEditorInput from '../../../../IdEditorInput.svelte';
-import { Popup } from '../../../../common';
+import Popover from '../../../../meltComponents/Popover.svelte';
 const { app, selectedComponent } = getContext('AppViewerContext');
 export let id;
 const dispatch = createEventDispatcher();
 $: reservedIds = allItems($app.grid, $app.subgrids).map((item) => item.id);
 </script>
 
-<Popup let:close floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}>
-	<svelte:fragment slot="button">
+<Popover
+	floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}
+	closeOnOtherPopoverOpen
+	contentClasses="p-4"
+>
+	<svelte:fragment slot="trigger">
 		<button
 			on:click={() => {
 				$selectedComponent = [id]
@@ -22,13 +26,15 @@ $: reservedIds = allItems($app.grid, $app.subgrids).map((item) => item.id);
 			<Pencil size={14} />
 		</button>
 	</svelte:fragment>
-	<IdEditorInput
-		initialId={id}
-		on:close={() => close(null)}
-		on:save={(e) => {
-			dispatch('save', e.detail)
-			close(null)
-		}}
-		{reservedIds}
-	/>
-</Popup>
+	<svelte:fragment slot="content" let:close>
+		<IdEditorInput
+			initialId={id}
+			on:close={() => close()}
+			on:save={(e) => {
+				dispatch('save', e.detail)
+				close()
+			}}
+			{reservedIds}
+		/>
+	</svelte:fragment>
+</Popover>

package/package/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte

@@ -1,11 +1,12 @@
 <script>import Toggle from '../../../Toggle.svelte';
-import { Button, Popup, SecondsInput } from '../../../common';
-import { autoPlacement } from '@floating-ui/core';
+import { Button, SecondsInput } from '../../../common';
 import { Database } from 'lucide-svelte';
+import Popover from '../../../meltComponents/Popover.svelte';
+import { autoPlacement } from '@floating-ui/core';
 export let cache_ttl;
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{
 		middleware: [
 			autoPlacement({
@@ -13,8 +14,10 @@ export let cache_ttl;
 			})
 		]
 	}}
+	closeButton
+	contentClasses="block text-primary p-4"
 >
-	<svelte:fragment slot="button">
+	<svelte:fragment slot="trigger">
 		<Button
 			nonCaptureEvent={true}
 			btnClasses={Boolean(cache_ttl)
@@ -28,7 +31,7 @@ export let cache_ttl;
 			title="Cache settings"
 		/>
 	</svelte:fragment>
-	<div class="block text-primary">
+	<svelte:fragment slot="content">
 		<Toggle
 			checked={Boolean(cache_ttl)}
 			on:change={() => {
@@ -51,5 +54,5 @@ export let cache_ttl;
 				<SecondsInput disabled />
 			{/if}
 		</div>
-	</div>
-</Popup>
+	</svelte:fragment>
+</Popover>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -1,4 +1,4 @@
-<script>import { Button, Drawer, DrawerContent, Popup } from '../../../common';
+<script>import { Button, Drawer, DrawerContent } from '../../../common';
 import { base } from '../../../../base';
 import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
 import FlowPathViewer from '../../../flows/content/FlowPathViewer.svelte';
@@ -14,6 +14,7 @@ import { getScriptByPath } from '../../../../scripts';
 import { sendUserToast } from '../../../../toast';
 import { autoPlacement } from '@floating-ui/core';
 import { ExternalLink, Eye, GitFork, Pen, RefreshCw, Trash } from 'lucide-svelte';
+import Popover from '../../../meltComponents/Popover.svelte';
 export let runnable;
 export let fields;
 export let id;
@@ -166,7 +167,7 @@ $: refresh(runnable);
 				Fork
 			</Button>
 		{/if}
-		<Popup
+		<Popover
 			floatingConfig={{
 				middleware: [
 					autoPlacement({
@@ -181,8 +182,10 @@ $: refresh(runnable);
 					})
 				]
 			}}
+			closeButton
+			contentClasses="block text-primary text-xs p-4 w-[20vh]"
 		>
-			<svelte:fragment slot="button">
+			<svelte:fragment slot="trigger">
 				<Button
 					nonCaptureEvent={true}
 					btnClasses={'bg-surface text-primay hover:bg-hover'}
@@ -191,11 +194,12 @@ $: refresh(runnable);
 					size="xs">Cache</Button
 				>
 			</svelte:fragment>
-			<div class="block text-primary">
+			<svelte:fragment slot="content">
 				Since this is a reference to a workspace {runnable.runType}, set the cache in the {runnable.runType}
-				settings directly by editing it. The cache will be shared by any app or flow that uses this {runnable.runType}.
-			</div>
-		</Popup>
+				settings directly by editing it. The cache will be shared by any app or flow that uses this
+				{runnable.runType}.
+			</svelte:fragment>
+		</Popover>
 
 		<input
 			on:keydown|stopPropagation

package/package/components/apps/editor/inlineScriptsPanel/RunButton.svelte

@@ -35,13 +35,13 @@ let cancelable = undefined;
 			size="xs"
 			color="red"
 			variant="border"
-			btnClasses="!px-2 !py-1.5"
+			btnClasses="!px-2 !py-1 !ml-[3px]"
 			on:click={async () => {
 				cancelable?.forEach((f) => f.cancel())
 				runLoading = false
 			}}
 		>
-			<Loader2 size={14} class="animate-spin mr-2" />
+			<Loader2 size={12} class="animate-spin mr-2" />
 			Cancel
 		</Button>
 	{/if}

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

@@ -14,10 +14,11 @@ export let component;
 				noWFull
 				on:selected={() => ($app = $app)}
 				bind:selected={component.horizontalAlignment}
+				let:item
 			>
-				<ToggleButton value="left" icon={AlignStartVertical} />
-				<ToggleButton value="center" icon={AlignCenterVertical} />
-				<ToggleButton value="right" icon={AlignEndVertical} />
+				<ToggleButton value="left" icon={AlignStartVertical} {item} />
+				<ToggleButton value="center" icon={AlignCenterVertical} {item} />
+				<ToggleButton value="right" icon={AlignEndVertical} {item} />
 			</ToggleButtonGroup>
 		{/if}
 		{#if component.type !== 'formcomponent' && component.verticalAlignment}
@@ -25,10 +26,11 @@ export let component;
 				noWFull
 				on:selected={() => ($app = $app)}
 				bind:selected={component.verticalAlignment}
+				let:item
 			>
-				<ToggleButton value="top" icon={AlignStartHorizontal} />
-				<ToggleButton value="center" icon={AlignCenterHorizontal} />
-				<ToggleButton value="bottom" icon={AlignEndHorizontal} />
+				<ToggleButton value="top" icon={AlignStartHorizontal} {item} />
+				<ToggleButton value="center" icon={AlignCenterHorizontal} {item} />
+				<ToggleButton value="bottom" icon={AlignEndHorizontal} {item} />
 			</ToggleButtonGroup>
 		{/if}
 	</div>

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

@@ -45,6 +45,7 @@ const iconOnlyThreshold = 300;
 				}}
 				noWFull
 				bind:selected={componentInput.type}
+				let:item
 			>
 				{#if componentInput.fieldType === 'template'}
 					{#if componentInput.type == 'template'}
@@ -54,6 +55,7 @@ const iconOnlyThreshold = 300;
 							disabled={disableStatic}
 							icon={CurlyBraces}
 							label="Template"
+							{item}
 						/>
 					{:else}
 						<ToggleButton
@@ -62,6 +64,7 @@ const iconOnlyThreshold = 300;
 							disabled={disableStatic}
 							icon={CurlyBraces}
 							label="Template"
+							{item}
 						/>
 					{/if}
 				{:else if componentInput.noStatic !== true}
@@ -71,6 +74,7 @@ const iconOnlyThreshold = 300;
 						disabled={disableStatic}
 						iconOnly={clientWidth < iconOnlyThreshold}
 						icon={Pen}
+						{item}
 					/>
 				{/if}
 				{#if componentInput.type == 'connected'}
@@ -79,6 +83,7 @@ const iconOnlyThreshold = 300;
 						icon={Plug2}
 						iconOnly={clientWidth < iconOnlyThreshold}
 						label="Connect"
+						{item}
 					/>
 				{/if}
 				<ToggleButton
@@ -86,6 +91,7 @@ const iconOnlyThreshold = 300;
 					icon={FunctionSquare}
 					iconOnly={clientWidth < iconOnlyThreshold}
 					label="Eval"
+					{item}
 				/>
 
 				<ToggleButton
@@ -93,6 +99,7 @@ const iconOnlyThreshold = 300;
 					icon={Code}
 					iconOnly={clientWidth < iconOnlyThreshold}
 					label="Compute"
+					{item}
 					id="data-source-compute"
 				/>
 			</ToggleButtonGroup>

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

@@ -333,19 +333,22 @@ function datasetToAgChartJson() {
 	<div class="p-2">
 		<ToggleButtonGroup
 			bind:selected
-			on:selected={() => {
-				handleSelected(selected)
+			on:selected={({ detail }) => {
+				handleSelected(detail)
 			}}
+			let:item
 		>
 			<ToggleButton
 				value="ui-editor"
 				label="UI Editor"
 				tooltip="Use the UI editor to quickly create a plotly chart."
+				{item}
 			/>
 			<ToggleButton
 				value="json"
 				label="JSON"
 				tooltip="Switch to JSON mode for complete customization of Plotly settings."
+				{item}
 			/>
 		</ToggleButtonGroup>
 	</div>

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         btnClasses?: string | undefined;
         size?: ButtonType.Size | undefined;
-        direction?: "bottom" | "right" | "left" | undefined;
+        direction?: "right" | "bottom" | "left" | undefined;
         hidden?: boolean | undefined;
     };
     events: {

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

@@ -5,7 +5,7 @@ import EvalInputEditor from './inputEditor/EvalInputEditor.svelte';
 import RowInputEditor from './inputEditor/RowInputEditor.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 import UploadInputEditor from './inputEditor/UploadInputEditor.svelte';
-import { getContext } from 'svelte';
+import { getContext, createEventDispatcher } from 'svelte';
 import ToggleButtonGroup from '../../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
 import { FunctionSquare, Loader2, Pen, Plug2, Upload, User } from 'lucide-svelte';
@@ -39,6 +39,7 @@ export let documentationLink = undefined;
 export let markdownTooltip = undefined;
 export let securedContext = false;
 const { connectingInput, app } = getContext('AppViewerContext');
+const dispatch = createEventDispatcher();
 let evalV2editor;
 function applyConnection(connection) {
     const expr = `${connection.componentId}.${connection.path}`;
@@ -62,6 +63,7 @@ $: if (componentInput == undefined) {
     };
 }
 function closeConnection() {
+    dispatch('closeConnection');
     $connectingInput = {
         opened: false,
         hoveredComponent: undefined,
@@ -70,6 +72,7 @@ function closeConnection() {
     };
 }
 function openConnection() {
+    dispatch('openConnection');
     $connectingInput = {
         opened: true,
         input: undefined,
@@ -127,21 +130,28 @@ function openConnection() {
 								componentInput['expr'] = JSON.stringify(JSON.parse(componentInput['expr']), null, 4)
 							}
 						}}
+						let:item
 					>
-						<ToggleButton value="static" icon={Pen} iconOnly tooltip="Static" />
+						<ToggleButton value="static" icon={Pen} iconOnly tooltip="Static" {item} />
 						{#if userInputEnabled}
-							<ToggleButton value="user" icon={User} iconOnly tooltip="User Input" />
+							<ToggleButton value="user" icon={User} iconOnly tooltip="User Input" {item} />
 						{/if}
 						{#if fileUpload}
-							<ToggleButton value="upload" icon={Upload} iconOnly tooltip="Upload" />
+							<ToggleButton value="upload" icon={Upload} iconOnly tooltip="Upload" {item} />
 						{/if}
 						{#if componentInput?.type === 'connected'}
-							<ToggleButton value="connected" icon={Plug2} iconOnly tooltip="Connect" />
+							<ToggleButton value="connected" icon={Plug2} iconOnly tooltip="Connect" {item} />
 						{/if}
 						{#if componentInput?.type === 'eval'}
-							<ToggleButton value="eval" icon={FunctionSquare} iconOnly tooltip="Eval Legacy" />
+							<ToggleButton
+								value="eval"
+								icon={FunctionSquare}
+								iconOnly
+								tooltip="Eval Legacy"
+								{item}
+							/>
 						{/if}
-						<ToggleButton value="evalv2" icon={FunctionSquare} iconOnly tooltip="Eval" />
+						<ToggleButton value="evalv2" icon={FunctionSquare} iconOnly tooltip="Eval" {item} />
 					</ToggleButtonGroup>
 					<ConnectionButton {closeConnection} {openConnection} isOpen={!!$connectingInput.opened} />
 				{/if}

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

@@ -30,6 +30,9 @@ declare const __propDef: {
         securedContext?: boolean | undefined;
     };
     events: {
+        closeConnection: CustomEvent<any>;
+        openConnection: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -34,6 +34,12 @@ function addComponent(typ) {
         ...appComponentFromType(typ)(`${id}_${actionId}`),
         recomputeIds: []
     };
+    if (typ == 'buttoncomponent') {
+        if (newComponent?.configuration?.size) {
+            // @ts-ignore
+            newComponent.configuration.size = { type: 'static', value: 'xs2' };
+        }
+    }
     items = [
         ...items,
         {
@@ -133,7 +139,10 @@ function handleFinalize(e) {
 								</div>
 							</div>
 							<div class="flex flex-row items-center gap-1">
-								<CloseButton small on:close={() => deleteComponent(component.id, index)} />
+								<CloseButton
+									small
+									on:close={() => deleteComponent(component.id, item.originalIndex)}
+								/>
 							</div>
 						</div>
 						{#if actionsOrder === undefined}

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

@@ -1,6 +1,7 @@
 <script>import { Loader2 } from 'lucide-svelte';
-import { ClearableInput, Popup } from '../../../../common';
+import { ClearableInput } from '../../../../common';
 import { AllIcons } from './icons';
+import Popover from '../../../../meltComponents/Popover.svelte';
 export let value = '';
 let loading = false;
 let items;
@@ -31,11 +32,10 @@ export let floatingConfig = {
     strategy: 'absolute',
     placement: 'bottom-end'
 };
-export let shouldUsePortal = true;
 </script>
 
-<Popup let:close {floatingConfig} {shouldUsePortal}>
-	<svelte:fragment slot="button">
+<Popover {floatingConfig} closeOnOtherPopoverOpen contentClasses="p-4">
+	<svelte:fragment slot="trigger">
 		<div class="relative">
 			<ClearableInput
 				readonly
@@ -51,52 +51,54 @@ export let shouldUsePortal = true;
 			{/if}
 		</div>
 	</svelte:fragment>
-	{#if !loading}
-		{#if filteredItems}
-			<div class="w-72">
-				<input
-					on:keydown={(event) => {
-						if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
-							event.stopPropagation()
-						}
-					}}
-					bind:value={search}
-					type="text"
-					placeholder="Search"
-					class="col-span-4 mb-2"
-				/>
-				<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
-					{#each filteredItems as label}
-						<button
-							type="button"
-							title={label}
-							on:click={() => {
-								select(label)
-								close(null)
-							}}
-							class="w-full center-center flex-col font-normal p-1
-									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 dark:hover:bg-frost-900 dark:focus:bg-frost-900
-									{label === value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
-						>
-							<!-- svelte-ignore a11y-missing-attribute -->
-							<img
-								class="dark:invert"
-								loading="lazy"
-								src="https://cdn.jsdelivr.net/npm/lucide-static@0.367.0/icons/{label}.svg"
-							/>
-							<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
-								{label}
-							</span>
-						</button>
-					{:else}
-						<div class="col-span-4 text-center text-secondary text-sm p-2">
-							No icons match your search
-						</div>
-					{/each}
+	<svelte:fragment slot="content" let:close>
+		{#if !loading}
+			{#if filteredItems}
+				<div class="w-72">
+					<input
+						on:keydown={(event) => {
+							if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
+								event.stopPropagation()
+							}
+						}}
+						bind:value={search}
+						type="text"
+						placeholder="Search"
+						class="col-span-4 mb-2"
+					/>
+					<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
+						{#each filteredItems as label}
+							<button
+								type="button"
+								title={label}
+								on:click={() => {
+									select(label)
+									close()
+								}}
+								class="w-full center-center flex-col font-normal p-1
+											hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 dark:hover:bg-frost-900 dark:focus:bg-frost-900
+											{label === value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
+							>
+								<!-- svelte-ignore a11y-missing-attribute -->
+								<img
+									class="dark:invert"
+									loading="lazy"
+									src="https://cdn.jsdelivr.net/npm/lucide-static@0.367.0/icons/{label}.svg"
+								/>
+								<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
+									{label}
+								</span>
+							</button>
+						{:else}
+							<div class="col-span-4 text-center text-secondary text-sm p-2">
+								No icons match your search
+							</div>
+						{/each}
+					</div>
 				</div>
-			</div>
-		{:else}
-			<div class="text-center text-sm text-secondary p-2"> Couldn't load options </div>
+			{:else}
+				<div class="text-center text-sm text-secondary p-2"> Couldn't load options </div>
+			{/if}
 		{/if}
-	{/if}
-</Popup>
+	</svelte:fragment>
+</Popover>

package/package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte.d.ts

@@ -4,7 +4,6 @@ declare const __propDef: {
     props: {
         value?: string | undefined;
         floatingConfig?: ComputeConfig | undefined;
-        shouldUsePortal?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,6 +1,5 @@
 <script>import ArrayStaticInputEditor from '../ArrayStaticInputEditor.svelte';
 import ResourcePicker from '../../../../ResourcePicker.svelte';
-import JsonEditor from './JsonEditor.svelte';
 import { getContext } from 'svelte';
 import IconSelectInput from './IconSelectInput.svelte';
 import ColorInput from './ColorInput.svelte';
@@ -20,6 +19,7 @@ import DateTimeInput from '../../../../DateTimeInput.svelte';
 import DBTableSelect from './DBTableSelect.svelte';
 import EditableSchemaDrawer from '../../../../schema/EditableSchemaDrawer.svelte';
 import AppPicker from '../../../../wizards/AppPicker.svelte';
+import JsonEditor from '../../../../JsonEditor.svelte';
 export let componentInput;
 export let fieldType = undefined;
 export let subFieldType = undefined;

package/package/components/apps/rx.d.ts

@@ -3,7 +3,7 @@ import type { InputConnectionEval } from './inputType';
 import { type Writable } from 'svelte/store';
 export interface Subscriber<T> {
     id?: string;
-    next(v: T): void;
+    next(v: T, force?: boolean): void;
 }
 export interface Observable<T> {
     subscribe(x: Subscriber<T>, previousValue: T): () => void;
@@ -17,7 +17,7 @@ export interface Input<T> extends Subscriber<T> {
 }
 export type World = {
     outputsById: Record<string, Record<string, Output<any>>>;
-    connect: <T>(connection: InputConnectionEval, next: (x: T) => void, id: string, previousValue: any) => Input<T>;
+    connect: <T>(connection: InputConnectionEval, next: (x: T, force?: boolean) => void, id: string, previousValue: any) => Input<T>;
     stateId: Writable<number>;
     newOutput: <T>(id: string, name: string, previousValue: T) => Output<T>;
 };
@@ -26,5 +26,5 @@ export declare function buildObservableWorld(): {
     connect: <T>(connection: InputConnectionEval, next: (x: T) => void, id: string, previousValue: T) => Input<T>;
     newOutput: <T_1>(id: string, name: string, state: Writable<number>, previousValue: T_1) => Output<T_1>;
 };
-export declare function cachedInput<T>(nextParan: (x: T) => void, id?: string): Input<T>;
+export declare function cachedInput<T>(nextParam: (x: T, force?: boolean) => void, id?: string): Input<T>;
 export declare function settableOutput<T>(state: Writable<number>, previousValue: T): Output<T>;

package/package/components/apps/rx.js

@@ -67,14 +67,14 @@ export function buildObservableWorld() {
         newOutput
     };
 }
-export function cachedInput(nextParan, id) {
+export function cachedInput(nextParam, id) {
     let value = undefined;
     function peak() {
         return value;
     }
-    function next(x) {
+    function next(x, force) {
         value = x;
-        nextParan(x);
+        nextParam(x, force);
     }
     return {
         id,
@@ -95,7 +95,7 @@ export function settableOutput(state, previousValue) {
         }
         // Send the current value to the new subscriber if it already exists
         if (value !== undefined && !deepEqual(value, npreviousValue)) {
-            x.next(value);
+            x.next(value, false);
         }
         // return a callback to unsubscribe
         return () => {
@@ -122,7 +122,7 @@ export function settableOutput(state, previousValue) {
             else {
                 value = x;
             }
-            subscribers.forEach((x) => x.next(value));
+            subscribers.forEach((x) => x.next(value, force));
         }
     }
     function peak() {