windmill-components 1.448.50 → 1.472.2

package/package/components/apps/editor/AppEditorTutorial.svelte

@@ -1,10 +1,7 @@
 <script>import Button from '../../common/button/Button.svelte';
 import AppTutorials from '../../AppTutorials.svelte';
-import { BookOpen } from 'lucide-svelte';
-import ButtonDropdown from '../../common/button/ButtonDropdown.svelte';
-import TutorialItem from '../../tutorials/TutorialItem.svelte';
-import MenuItem from '../../common/menu/MenuItem.svelte';
-import { classNames } from '../../../utils';
+import { BookOpen, CheckCircle, Circle, RefreshCw, CheckCheck } from 'lucide-svelte';
+import Dropdown from '../../DropdownV2.svelte';
 import { resetAllTodos, skipAllTodos } from '../../../tutorialUtils';
 import { getContext, onMount } from 'svelte';
 import { ignoredTutorials } from '../../tutorials/ignoredTutorials';
@@ -33,63 +30,59 @@ export function toggleTutorial() {
         appTutorials?.runTutorialById('simpleapptutorial');
     }
 }
+async function getTutorialItems() {
+    return [
+        {
+            displayName: 'App tutorial',
+            action: () => appTutorials?.runTutorialById('simpleapptutorial'),
+            index: 7,
+            icon: $tutorialsToDo.includes(7) ? Circle : CheckCircle,
+            iconColor: $tutorialsToDo.includes(7) ? undefined : 'green'
+        },
+        {
+            displayName: 'Background runnables',
+            action: () => appTutorials?.runTutorialById('backgroundrunnables'),
+            index: 5,
+            icon: $tutorialsToDo.includes(5) ? Circle : CheckCircle,
+            iconColor: $tutorialsToDo.includes(5) ? undefined : 'green'
+        },
+        {
+            displayName: 'Connection',
+            action: () => appTutorials?.runTutorialById('connection'),
+            index: 6,
+            icon: $tutorialsToDo.includes(6) ? Circle : CheckCircle,
+            iconColor: $tutorialsToDo.includes(6) ? undefined : 'green'
+        },
+        {
+            displayName: 'Reset tutorials',
+            action: () => resetAllTodos(),
+            icon: RefreshCw
+        },
+        {
+            displayName: 'Skip tutorials',
+            action: () => skipAllTodos(),
+            icon: CheckCheck
+        }
+    ];
+}
 </script>
 
-<ButtonDropdown hasPadding={false}>
-	<svelte:fragment slot="buttonReplacement">
-		<Button
-			nonCaptureEvent
-			size="xs"
-			color="light"
-			variant="border"
-			iconOnly
-			startIcon={{
-				icon: BookOpen
-			}}
-		/>
-	</svelte:fragment>
-	<svelte:fragment slot="items">
-		<TutorialItem
-			on:click={() => appTutorials?.runTutorialById('simpleapptutorial')}
-			label="App tutorial"
-			index={7}
-		/>
-		<TutorialItem
-			on:click={() => appTutorials?.runTutorialById('backgroundrunnables')}
-			label="Background runnables"
-			index={5}
-		/>
-		<TutorialItem
-			on:click={() => appTutorials?.runTutorialById('connection')}
-			label="Connection"
-			index={6}
-		/>
-
-		<div class="border-t border-surface-hover" />
-		<MenuItem
-			on:click={() => {
-				resetAllTodos()
-			}}
-		>
-			<div
-				class={classNames(
-					'text-primary flex flex-row items-center text-left gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-				)}
-			>
-				Reset tutorials
-			</div>
-		</MenuItem>
-		<MenuItem on:click={() => skipAllTodos()}>
-			<div
-				class={classNames(
-					'text-primary flex flex-row items-center text-left gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-				)}
-			>
-				Skip tutorials
-			</div>
-		</MenuItem>
-	</svelte:fragment>
-</ButtonDropdown>
+{#key $tutorialsToDo}
+	<Dropdown items={getTutorialItems}>
+		<svelte:fragment slot="buttonReplacement">
+			<Button
+				nonCaptureEvent
+				size="xs"
+				color="light"
+				variant="border"
+				iconOnly
+				startIcon={{
+					icon: BookOpen
+				}}
+			/>
+		</svelte:fragment>
+	</Dropdown>
+{/key}
 
 <AppTutorials
 	bind:this={appTutorials}

package/package/components/apps/editor/AppJsonEditor.svelte

@@ -1,7 +1,7 @@
 <script>import { Badge, Button } from '../../common';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
-import JsonEditor from './settingsPanel/inputEditor/JsonEditor.svelte';
+import JsonEditor from '../../JsonEditor.svelte';
 import { AppService, DraftService } from '../../../gen';
 import { sendUserToast } from '../../../toast';
 import { userStore, workspaceStore } from '../../../stores';

package/package/components/apps/editor/AppPreview.svelte

@@ -6,7 +6,6 @@ import { Unlock } from 'lucide-svelte';
 import GridViewer from './GridViewer.svelte';
 import Component from './component/Component.svelte';
 import { twMerge } from 'tailwind-merge';
-import { columnConfiguration } from '../gridUtils';
 import { deepEqual } from 'fast-equals';
 import { dfs, maxHeight } from './appUtils';
 import { BG_PREFIX, migrateApp } from '../utils';
@@ -93,7 +92,11 @@ function onPathChange() {
 }
 setContext('AppViewerContext', {
     worldStore: worldStore,
-    initialized: writable({ initialized: false, initializedComponents: [] }),
+    initialized: writable({
+        initialized: false,
+        initializedComponents: [],
+        runnableInitialized: {}
+    }),
     app: appStore,
     summary: writable(summary),
     selectedComponent,
@@ -249,8 +252,6 @@ $: maxRow = maxHeight($appStore.grid, appHeight, $breakpoint);
 					allIdsInPath={$allIdsInPath}
 					items={app.grid}
 					let:dataItem
-					let:hidden
-					cols={columnConfiguration}
 					{maxRow}
 					breakpoint={$breakpoint}
 				>
@@ -265,7 +266,6 @@ $: maxRow = maxHeight($appStore.grid, appHeight, $breakpoint);
 							selected={false}
 							locked={true}
 							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-							{hidden}
 						/>
 					</div>
 				</GridViewer>

package/package/components/apps/editor/AppReportsDrawerInner.svelte

@@ -598,6 +598,7 @@ $: disabled =
 				{#if selectedTab !== 'custom' || customPath !== undefined}
 					{#key selectedTab + JSON.stringify(customPathSchema ?? {})}
 						<SchemaForm
+							onlyMaskPassword
 							bind:isValid={areArgsValid}
 							bind:args
 							schema={selectedTab !== 'custom'

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

@@ -1,8 +1,8 @@
 <script>import { classNames } from '../../../utils';
-import { Anchor, ArrowDownFromLine, Bug, Network, Pen, Plug } from 'lucide-svelte';
+import { Anchor, ArrowDownFromLine, Bug, Expand, Network, Pen, Plug } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
-import Popover from '../../Popover.svelte';
-import { Button, Popup } from '../../common';
+import Popover from '../../meltComponents/Popover.svelte';
+import { Button } from '../../common';
 import { twMerge } from 'tailwind-merge';
 import { connectOutput } from './appUtils';
 import TabsDebug from './TabsDebug.svelte';
@@ -46,19 +46,23 @@ function checkComponentOptions() {
 }
 let connectingPopupHover = false;
 $: connectingPopupHover && dispatch('mouseover');
+let hoverHeader = false;
 </script>
 
 {#if connecting}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 	<div
 		class="absolute z-50 overflow-auto -top-[18px]"
 		style="left: {id_width}px;"
 		data-connection-button
 	>
-		<Popup
+		<Popover
 			floatingConfig={{ strategy: 'fixed', placement: 'bottom-start' }}
-			bind:popupHover={connectingPopupHover}
+			closeOnOtherPopoverOpen
+			contentClasses="p-4"
 		>
-			<svelte:fragment slot="button">
+			<svelte:fragment slot="trigger">
 				<AnimatedButton
 					animate={true}
 					baseRadius="9999px"
@@ -74,13 +78,15 @@ $: connectingPopupHover && dispatch('mouseover');
 					>
 				</AnimatedButton>
 			</svelte:fragment>
-			<ComponentOutputViewer
-				suffix="connect"
-				on:select={({ detail }) =>
-					connectOutput(connectingInput, component.type, component.id, detail)}
-				componentId={component.id}
-			/>
-		</Popup>
+			<svelte:fragment slot="content">
+				<ComponentOutputViewer
+					suffix="connect"
+					on:select={({ detail }) =>
+						connectOutput(connectingInput, component.type, component.id, detail)}
+					componentId={component.id}
+				/>
+			</svelte:fragment>
+		</Popover>
 	</div>
 {/if}
 
@@ -90,8 +96,12 @@ $: connectingPopupHover && dispatch('mouseover');
 	<div class="-top-[18px] -left-[8px] flex flex-row flex-nowrap w-fit h-fit absolute gap-0.5">
 		<div
 			on:mouseover|stopPropagation={() => {
+				hoverHeader = true
 				dispatch('mouseover')
 			}}
+			on:mouseleave|stopPropagation={() => {
+				hoverHeader = false
+			}}
 			on:mousedown|stopPropagation|capture
 			draggable="false"
 			title={`Id: ${component.id}`}
@@ -124,7 +134,7 @@ $: connectingPopupHover && dispatch('mouseover');
 						on:click={() => dispatch('fillHeight')}
 						on:pointerdown|stopPropagation
 					>
-						<ArrowDownFromLine aria-label="Expand position" size={11} />
+						<ArrowDownFromLine aria-label="Full height" size={11} />
 					</button>
 
 					<button
@@ -142,6 +152,18 @@ $: connectingPopupHover && dispatch('mouseover');
 							<Anchor aria-label="Lock position" size={11} />
 						{/if}
 					</button>
+					{#if hoverHeader}
+						<button
+							title="Expand"
+							class={twMerge(
+								'px-1 py-0.5 text-2xs font-bold rounded cursor-pointer w-fit h-full text-white hover:bg-blue-400 hover:text-white'
+							)}
+							on:click={() => dispatch('expand')}
+							on:pointerdown|stopPropagation
+						>
+							<Expand aria-label="Expand" size={11} />
+						</button>
+					{/if}
 				</div>
 			{/if}
 		</div>
@@ -243,13 +265,15 @@ $: connectingPopupHover && dispatch('mouseover');
 			'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-1  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer'
 		)}
 	>
-		<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
-			<Bug size={14} />
-			<span slot="text">
+		<Popover notClickable placement="bottom" contentClasses="!bg-surface border w-96 p-4">
+			<svelte:fragment slot="trigger">
+				<Bug size={14} />
+			</svelte:fragment>
+			<svelte:fragment slot="content">
 				<div class="bg-surface">
-					<pre class=" whitespace-pre-wrap text-red-600 bg-surface border w-full p-4 text-xs mb-2"
+					<pre class="whitespace-pre-wrap text-red-600 bg-surface border w-full p-4 text-xs mb-2"
 						>{error ?? ''}	
-								</pre>
+						</pre>
 				</div>
 				<Button
 					color="red"
@@ -257,7 +281,7 @@ $: connectingPopupHover && dispatch('mouseover');
 					on:click={() => $openDebugRun?.($errorByComponent[component.id]?.id ?? '')}
 					>Open Debug Runs</Button
 				>
-			</span>
+			</svelte:fragment>
 		</Popover>
 	</span>
 {/if}

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

@@ -19,6 +19,7 @@ declare const __propDef: {
         mouseover: CustomEvent<any>;
         fillHeight: CustomEvent<any>;
         lock: CustomEvent<any>;
+        expand: CustomEvent<any>;
         triggerInlineEditor: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/DecisionTreeDebug.svelte

@@ -1,6 +1,5 @@
-<script>import ButtonDropdown from '../../common/button/ButtonDropdown.svelte';
+<script>import Dropdown from '../../DropdownV2.svelte';
 import { classNames } from '../../../utils';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
 import { createEventDispatcher, getContext } from 'svelte';
 import { isDebugging } from './settingsPanel/decisionTree/utils';
 import { X, Bug } from 'lucide-svelte';
@@ -45,81 +44,65 @@ function onNodesChange(newNodes) {
     }
 }
 $: onNodesChange(nodes);
+async function getDropdownItems() {
+    return [
+        // Debug node items
+        ...(nodes ?? []).map((node, index) => ({
+            displayName: `Debug node ${node.label}`,
+            action: () => {
+                $componentControl?.[id]?.setTab?.(index);
+                $debuggingComponents[id] = index;
+            },
+            type: 'action'
+        })),
+        // Reset debug mode item
+        {
+            displayName: 'Reset debug mode',
+            action: () => {
+                $componentControl?.[id]?.setTab?.(0);
+                $debuggingComponents = Object.fromEntries(Object.entries($debuggingComponents).filter(([key]) => key !== id));
+            },
+            type: 'delete'
+        }
+    ];
+}
 </script>
 
 {#key renderCount}
-	<button
-		title={'Debug tabs'}
-		class={classNames(
-			'px-1 text-2xs font-bold rounded cursor-pointer w-fit h-full',
-			componentIsDebugging
-				? ' hover:bg-red-300 hover:text-red-800'
-				: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
-		)}
-		on:click={() => dispatch('triggerInlineEditor')}
-		on:pointerdown|stopPropagation
-	>
-		<ButtonDropdown hasPadding={false}>
-			<svelte:fragment slot="buttonReplacement">
-				<div class="px-1 w-fit">
-					{#if componentIsDebugging}
-						<div class="flex flex-row items-center gap-2">
-							{`${isSmall ? '' : 'Debugging node'} ${nodes[$debuggingComponents[id] ?? 0]?.id}`}
-							<button
-								on:click={() => {
-									$componentControl?.[id]?.setTab?.(0)
+	<Dropdown items={getDropdownItems} class="w-fit h-auto" usePointerDownOutside={true}>
+		<svelte:fragment slot="buttonReplacement">
+			<button
+				title={'Debug tabs'}
+				class={classNames(
+					'px-1 text-2xs font-bold rounded cursor-pointer w-fit h-full',
+					componentIsDebugging
+						? ' hover:bg-red-300 hover:text-red-800'
+						: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
+				)}
+				on:click={() => dispatch('triggerInlineEditor')}
+				on:pointerdown|stopPropagation
+			>
+				{#if componentIsDebugging}
+					<div class="flex flex-row items-center gap-2">
+						{`${isSmall ? '' : 'Debugging node'} ${nodes[$debuggingComponents[id] ?? 0]?.id}`}
+						<button
+							on:click={() => {
+								$componentControl?.[id]?.setTab?.(0)
 
-									$debuggingComponents = Object.fromEntries(
-										Object.entries($debuggingComponents).filter(([key]) => key !== id)
-									)
-								}}
-							>
-								<X size={11} />
-							</button>
-						</div>
-					{:else if isSmall}
-						<div class="flex h-full w-fit items-center"><Bug size={11} /></div>
-					{:else}<div class="whitespace-nowrap h-full"
-							>{`Debug nodes (current node: ${currentNodeId})`}</div
-						>{/if}
-				</div>
-			</svelte:fragment>
-			<svelte:fragment slot="items">
-				{#each nodes ?? [] as node, index}
-					<MenuItem
-						on:click={() => {
-							$componentControl?.[id]?.setTab?.(index)
-
-							$debuggingComponents[id] = index
-						}}
-					>
-						<div
-							class={classNames(
-								'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
-							)}
+								$debuggingComponents = Object.fromEntries(
+									Object.entries($debuggingComponents).filter(([key]) => key !== id)
+								)
+							}}
 						>
-							{`Debug node ${node.label}`}
-						</div>
-					</MenuItem>
-				{/each}
-				<MenuItem
-					on:click={() => {
-						$componentControl?.[id]?.setTab?.(0)
-
-						$debuggingComponents = Object.fromEntries(
-							Object.entries($debuggingComponents).filter(([key]) => key !== id)
-						)
-					}}
-				>
-					<div
-						class={classNames(
-							'!text-red-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
-						)}
-					>
-						{`Reset debug mode`}
+							<X size={11} />
+						</button>
 					</div>
-				</MenuItem>
-			</svelte:fragment>
-		</ButtonDropdown>
-	</button>
+				{:else if isSmall}
+					<div class="flex h-full w-fit items-center"><Bug size={11} /></div>
+				{:else}<div class="whitespace-nowrap h-full"
+						>{`Debug nodes (current node: ${currentNodeId})`}</div
+					>{/if}
+			</button>
+		</svelte:fragment>
+	</Dropdown>
 {/key}

package/package/components/apps/editor/GridEditor.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import { columnConfiguration, gridColumns, isFixed, toggleFixed } from '../gridUtils';
+import { gridColumns, isFixed, toggleFixed } from '../gridUtils';
 import { twMerge } from 'tailwind-merge';
 import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 import Component from './component/Component.svelte';
@@ -143,11 +143,9 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 				}}
 				root
 				let:dataItem
-				let:hidden
 				let:overlapped
 				let:moveMode
 				let:componentDraggedId
-				cols={columnConfiguration}
 				on:dropped={(e) => {
 					const { id, overlapped, x, y } = e.detail
 
@@ -200,7 +198,6 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 						fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
 					>
 						<Component
-							{hidden}
 							render={true}
 							component={dataItem.data}
 							selected={Boolean($selectedComponent?.includes(dataItem.id))}
@@ -212,6 +209,12 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 							on:fillHeight={() => {
 								handleFillHeight(dataItem.id)
 							}}
+							on:expand={() => {
+								push(history, $app)
+								$selectedComponent = [dataItem.id]
+								expandGriditem($app.grid, dataItem.id, $breakpoint)
+								$app = $app
+							}}
 							{overlapped}
 							{moveMode}
 							{componentDraggedId}

package/package/components/apps/editor/GridViewer.svelte

@@ -1,12 +1,13 @@
-<script>import { ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT } from './appUtils';
-import { onMount, createEventDispatcher } from 'svelte';
+<script>import { columnConfiguration, WIDE_GRID_COLUMNS } from '../gridUtils';
+import { ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT } from './appUtils';
+import { onMount, createEventDispatcher, getContext } from 'svelte';
 import { getColumn, throttle } from '../svelte-grid/utils/other';
 import { getContainerHeight } from '../svelte-grid/utils/container';
 import { specifyUndefinedColumns } from '../svelte-grid/utils/item';
 const dispatch = createEventDispatcher();
+const { app } = getContext('AppViewerContext');
 export let items;
 export let rowHeight = ROW_HEIGHT;
-export let cols;
 export let gap = [ROW_GAP_X, ROW_GAP_Y];
 export let throttleUpdate = 100;
 export let maxRow;
@@ -14,7 +15,9 @@ export let breakpoint;
 export let allIdsInPath = undefined;
 export let containerWidth = undefined;
 export let parentWidth = undefined;
-let getComputedCols;
+const cols = columnConfiguration;
+let showSkeleton = false;
+let getComputedCols = $app.mobileViewOnSmallerScreens == false ? WIDE_GRID_COLUMNS : undefined;
 let container;
 $: [gapX, gapY] = gap;
 let xPerPx = 0;
@@ -30,12 +33,17 @@ const onResize = throttle(() => {
     });
 }, throttleUpdate);
 onMount(() => {
+    setTimeout(() => {
+        showSkeleton = true;
+    }, 100);
     const sizeObserver = new ResizeObserver((entries) => {
         requestAnimationFrame(() => {
             let width = entries[0].contentRect.width;
             if (width === containerWidth)
                 return;
-            getComputedCols = getColumn(parentWidth ?? width, cols);
+            if ($app.mobileViewOnSmallerScreens != false || !getComputedCols) {
+                getComputedCols = getColumn(parentWidth ?? width, cols);
+            }
             xPerPx = width / getComputedCols;
             if (!containerWidth) {
                 items = specifyUndefinedColumns(items, getComputedCols, cols);
@@ -57,7 +65,7 @@ onMount(() => {
 </script>
 
 <div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
-	{#if xPerPx}
+	{#if xPerPx && getComputedCols}
 		{#each items as item (item.id)}
 			{@const onTop = allIdsInPath?.includes(item.id)}
 			{@const width =
@@ -79,10 +87,14 @@ onMount(() => {
 					: ''} top: {top}px; left: {left}px;"
 			>
 				{#if item[getComputedCols]}
-					<slot dataItem={item} item={item[getComputedCols]} hidden={false} />
+					<slot dataItem={item} item={item[getComputedCols]} />
 				{/if}
 			</div>
 		{/each}
+	{:else if showSkeleton}
+		<div
+			class="h-full w-full flex-col animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms]"
+		/>
 	{/if}
 </div>
 

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

@@ -5,7 +5,6 @@ declare class __sveltets_Render<T> {
     props(): {
         items: FilledItem<T>[];
         rowHeight?: number | undefined;
-        cols: [number, number][];
         gap?: number[] | undefined;
         throttleUpdate?: number | undefined;
         maxRow: number;
@@ -23,8 +22,7 @@ declare class __sveltets_Render<T> {
     slots(): {
         default: {
             dataItem: FilledItem<T>;
-            item: Required<import("../svelte-grid/types").ItemLayout>;
-            hidden: boolean;
+            item: any;
         };
     };
 }

package/package/components/apps/editor/PreviewToggle.svelte

@@ -13,6 +13,7 @@ const { mode, jobs, jobsById } = getContext('AppViewerContext');
 		jobsById.set({})
 		jobs.set([])
 	}}
+	let:item
 >
 	<ToggleButton
 		label="Editor"
@@ -21,6 +22,7 @@ const { mode, jobs, jobsById } = getContext('AppViewerContext');
 		disabled={loading}
 		iconProps={{ size: 16 }}
 		class="gap-2"
+		{item}
 	/>
 	<ToggleButton
 		label="Preview"
@@ -31,5 +33,6 @@ const { mode, jobs, jobsById } = getContext('AppViewerContext');
 		id="app-editor-preview-toggle"
 		iconProps={{ size: 16 }}
 		class="gap-2"
+		{item}
 	/>
 </ToggleButtonGroup>