windmill-components 1.448.50 → 1.472.2

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

@@ -17,12 +17,15 @@ export let render;
 export let disabledTabs;
 export let onTabChange = undefined;
 let resolvedConfig = initConfig(components['tabscomponent'].initialData.configuration, configuration);
+let everRender = render;
+$: render && !everRender && (everRender = true);
 const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl, connectingInput, runnableComponents } = getContext('AppViewerContext');
 let selected = tabs[0];
 let tabHeight = 0;
 let outputs = initOutput($worldStore, id, {
     selectedTabIndex: 0
 });
+const titleBarHeight = 40; // Example height of a single accordion title bar in pixels
 function handleTabSelection() {
     selectedIndex = tabs?.indexOf(selected);
     outputs?.selectedTabIndex.set(selectedIndex);
@@ -85,83 +88,134 @@ let resolvedDisabledTabs = [];
 	/>
 {/each}
 
-<div class={resolvedConfig.tabsKind == 'sidebar' ? 'flex gap-4 w-full h-full' : 'w-full'}>
-	{#if !resolvedConfig.tabsKind || resolvedConfig.tabsKind == 'tabs' || (resolvedConfig.tabsKind == 'invisibleOnView' && $mode == 'dnd')}
-		<div bind:clientHeight={tabHeight}>
-			<Tabs
-				bind:selected
-				class={twMerge(css?.tabRow?.class, 'wm-tabs-tabRow')}
+{#if everRender}
+	<div class={resolvedConfig.tabsKind == 'sidebar' ? 'flex gap-4 w-full h-full' : 'w-full'}>
+		{#if !resolvedConfig.tabsKind || resolvedConfig.tabsKind == 'tabs' || (resolvedConfig.tabsKind == 'invisibleOnView' && $mode == 'dnd')}
+			<div bind:clientHeight={tabHeight}>
+				<Tabs
+					bind:selected
+					class={twMerge(css?.tabRow?.class, 'wm-tabs-tabRow')}
+					style={css?.tabRow?.style}
+				>
+					{#each tabs ?? [] as res, index}
+						<Tab
+							value={res}
+							class={twMerge(css?.allTabs?.class, 'wm-tabs-alltabs')}
+							style={css?.allTabs?.style}
+							selectedClass={twMerge(css?.selectedTab?.class, 'wm-tabs-selectedTab')}
+							selectedStyle={css?.selectedTab?.style}
+							disabled={resolvedDisabledTabs[index]}
+						>
+							<span class="font-semibold">{res}</span>
+						</Tab>
+					{/each}
+				</Tabs>
+			</div>
+		{:else if resolvedConfig.tabsKind == 'sidebar'}
+			<div
+				class={twMerge(
+					'flex gap-y-2 flex-col w-1/6 max-w-[160px] bg-surface text-secondary opacity-80 px-4 pt-4 border-r ',
+					css?.tabRow?.class,
+					'wm-tabs-tabRow'
+				)}
 				style={css?.tabRow?.style}
 			>
-				{#each tabs ?? [] as res, index}
-					<Tab
-						value={res}
-						class={twMerge(css?.allTabs?.class, 'wm-tabs-alltabs')}
-						style={css?.allTabs?.style}
-						selectedClass={twMerge(css?.selectedTab?.class, 'wm-tabs-selectedTab')}
-						selectedStyle={css?.selectedTab?.style}
-						disabled={resolvedDisabledTabs[index]}
+				{#each tabs ?? [] as res}
+					<button
+						on:pointerdown|stopPropagation
+						on:click={() => (selected = res)}
+						class={twMerge(
+							'rounded-sm !truncate text-sm  hover:text-primary px-1 py-2',
+							css?.allTabs?.class,
+							'wm-tabs-alltabs',
+							selected == res
+								? twMerge(
+										'border-r  border-primary border-l bg-surface text-primary',
+										css?.selectedTab?.class,
+										'wm-tabs-selectedTab'
+								  )
+								: ''
+						)}
+						style={selected == res
+							? [css?.allTabs?.style, css?.selectedTab?.style].filter(Boolean).join(';')
+							: css?.allTabs?.style}
 					>
-						<span class="font-semibold">{res}</span>
-					</Tab>
+						{res}
+					</button>
 				{/each}
-			</Tabs>
-		</div>
-	{:else if resolvedConfig.tabsKind == 'sidebar'}
-		<div
-			class={twMerge(
-				'flex gap-y-2 flex-col w-1/6 max-w-[160px] bg-surface text-secondary opacity-80 px-4 pt-4 border-r ',
-				css?.tabRow?.class,
-				'wm-tabs-tabRow'
-			)}
-			style={css?.tabRow?.style}
-		>
-			{#each tabs ?? [] as res}
-				<button
-					on:pointerdown|stopPropagation
-					on:click={() => (selected = res)}
-					class={twMerge(
-						'rounded-sm !truncate text-sm  hover:text-primary px-1 py-2',
-						css?.allTabs?.class,
-						'wm-tabs-alltabs',
-						selected == res
-							? twMerge(
-									'border-r  border-primary border-l bg-surface text-primary',
-									css?.selectedTab?.class,
-									'wm-tabs-selectedTab'
-							  )
-							: ''
-					)}
-					style={selected == res
-						? [css?.allTabs?.style, css?.selectedTab?.style].filter(Boolean).join(';')
-						: css?.allTabs?.style}
-				>
-					{res}
-				</button>
-			{/each}
-		</div>
-	{/if}
-
-	<div class="w-full">
-		{#if $app.subgrids}
-			{#each tabs ?? [] as _res, i}
-				<SubGridEditor
-					{id}
-					visible={render && i === selectedIndex}
-					subGridId={`${id}-${i}`}
-					class={twMerge(css?.container?.class, 'wm-tabs-container')}
-					style={css?.container?.style}
-					containerHeight={resolvedConfig.tabsKind !== 'sidebar' && $mode !== 'preview'
-						? componentContainerHeight - tabHeight
-						: componentContainerHeight}
-					on:focus={() => {
-						if (!$connectingInput.opened) {
-							$selectedComponent = [id]
-							handleTabSelection()
-						}
-					}}
-				/>
-			{/each}
+			</div>
+		{/if}
+		{#if resolvedConfig.tabsKind == 'accordion'}
+			<div class="flex flex-col w-full">
+				{#each tabs ?? [] as res, index}
+					<div class="border-b">
+						<button
+							on:pointerdown|stopPropagation
+							on:click={() => (selected = res)}
+							class={twMerge(
+								'w-full text-left bg-surface !truncate text-sm hover:text-primary px-1 py-2',
+								css?.allTabs?.class,
+								'wm-tabs-alltabs',
+								selected == res
+									? twMerge(
+											'bg-surface text-primary ',
+											css?.selectedTab?.class,
+											'wm-tabs-selectedTab'
+									  )
+									: 'text-secondary'
+							)}
+						>
+							<span class="mr-2 w-8 font-mono">{selected == res ? '-' : '+'}</span>
+							{res}
+						</button>
+						{#if selected == res}
+							<div class="p-2 border-t">
+								<SubGridEditor
+									{id}
+									visible={render && index === selectedIndex}
+									subGridId={`${id}-${index}`}
+									class={twMerge(css?.container?.class, 'wm-tabs-container')}
+									style={css?.container?.style}
+									containerHeight={componentContainerHeight - (titleBarHeight * tabs.length + 40)}
+									on:focus={() => {
+										if (!$connectingInput.opened) {
+											$selectedComponent = [id]
+											handleTabSelection()
+										}
+									}}
+								/>
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<div class="w-full">
+				{#if $app.subgrids}
+					{#each tabs ?? [] as _res, i}
+						<SubGridEditor
+							{id}
+							visible={render && i === selectedIndex}
+							subGridId={`${id}-${i}`}
+							class={twMerge(css?.container?.class, 'wm-tabs-container')}
+							style={css?.container?.style}
+							containerHeight={resolvedConfig.tabsKind !== 'sidebar' && $mode !== 'preview'
+								? componentContainerHeight - tabHeight
+								: componentContainerHeight}
+							on:focus={() => {
+								if (!$connectingInput.opened) {
+									$selectedComponent = [id]
+									handleTabSelection()
+								}
+							}}
+						/>
+					{/each}
+				{/if}
+			</div>
 		{/if}
 	</div>
-</div>
+{:else if $app.subgrids}
+	{#each tabs ?? [] as _res, i}
+		<SubGridEditor {id} visible={false} subGridId={`${id}-${i}`} />
+	{/each}
+{/if}

package/package/components/apps/editor/AppEditor.svelte

@@ -81,7 +81,11 @@ let context = {
 const darkMode = writable(document.documentElement.classList.contains('dark'));
 const worldStore = buildWorld(context);
 const previewTheme = writable(undefined);
-const initialized = writable({ initialized: false, initializedComponents: [] });
+const initialized = writable({
+    initialized: false,
+    initializedComponents: [],
+    runnableInitialized: {}
+});
 const panzoomActive = writable(false);
 $secondaryMenuRightStore.isOpen = false;
 $secondaryMenuLeftStore.isOpen = false;
@@ -160,7 +164,7 @@ function saveFrontendDraft() {
             localStorage.setItem(path != '' ? `app-${path}` : 'app', encodeState($appStore));
         }
         catch (err) {
-            console.error(err);
+            console.error('Error storing frontend draft in localStorage', err);
         }
     }, 500);
 }
@@ -657,7 +661,21 @@ $: forceDeactivatePanzoom = isModifierKeyPressed && handMode;
 			on:hideRightPanel={() => hideRightPanel()}
 			on:hideBottomPanel={() => hideBottomPanel()}
 			on:showBottomPanel={() => showBottomPanel()}
-		/>
+		>
+			<svelte:fragment
+				slot="unsavedConfirmationModal"
+				let:diffDrawer
+				let:additionalExitAction
+				let:getInitialAndModifiedValues
+			>
+				<slot
+					name="unsavedConfirmationModal"
+					{diffDrawer}
+					{additionalExitAction}
+					{getInitialAndModifiedValues}
+				/>
+			</svelte:fragment>
+		</AppEditorHeader>
 		{#if $mode === 'preview'}
 			<SplitPanesWrapper>
 				<div

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

@@ -33,7 +33,30 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        unsavedConfirmationModal: {
+            diffDrawer: DiffDrawer | undefined;
+            additionalExitAction: () => void;
+            getInitialAndModifiedValues: () => {
+                savedValue: {
+                    value: App;
+                    draft?: any;
+                    path: string;
+                    summary: string;
+                    policy: any;
+                    draft_only?: boolean | undefined;
+                    custom_path?: string | undefined;
+                } | undefined;
+                modifiedValue: {
+                    summary: string;
+                    value: App;
+                    path: any;
+                    policy: Policy;
+                    custom_path: string | undefined;
+                };
+            };
+        };
+    };
 };
 export type AppEditorProps = typeof __propDef.props;
 export type AppEditorEvents = typeof __propDef.events;

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -11,7 +11,7 @@ import Toggle from '../../Toggle.svelte';
 import { AppService, DraftService } from '../../../gen';
 import { redo, undo } from '../../../history';
 import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
-import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, MoreVertical, RefreshCw, Save, Smartphone, FileClock, Sun, Moon, SunMoon } from 'lucide-svelte';
+import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, RefreshCw, Save, Smartphone, FileClock, Sun, Moon, SunMoon, Zap } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { classNames, cleanValueProperties, truncateRev, orderedJsonStringify, replaceFalseWithUndefined, isFlowPreview } from '../../../utils';
@@ -22,15 +22,13 @@ import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import PreviewToggle from './PreviewToggle.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
-//	import UnsavedConfirmationModal from '../../common/confirmationModal/UnsavedConfirmationModal.svelte'
 import Tooltip from '../../Tooltip.svelte';
 import { Sha256 } from '@aws-crypto/sha256-js';
 import { sendUserToast } from '../../../toast';
 import DeploymentHistory from './DeploymentHistory.svelte';
 import Awareness from '../../Awareness.svelte';
 import { secondaryMenuLeftStore, secondaryMenuRightStore } from './settingsPanel/secondaryMenu';
-import ButtonDropdown from '../../common/button/ButtonDropdown.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
+import Dropdown from '../../DropdownV2.svelte';
 import AppEditorTutorial from './AppEditorTutorial.svelte';
 import AppTimeline from './AppTimeline.svelte';
 import AppReportsDrawer from './AppReportsDrawer.svelte';
@@ -44,13 +42,13 @@ import { getUpdateInput } from '../components/display/dbtable/queries/update';
 import { getDeleteInput } from '../components/display/dbtable/queries/delete';
 import { collectOneOfFields } from './appUtils';
 import Summary from '../../Summary.svelte';
-import ToggleEnable from '../../common/toggleButton-v2/ToggleEnable.svelte';
 import HideButton from './settingsPanel/HideButton.svelte';
 import DeployOverrideConfirmationModal from '../../common/confirmationModal/DeployOverrideConfirmationModal.svelte';
 import { computeS3FileInputPolicy, computeWorkspaceS3FileInputPolicy } from './appUtilsS3';
 import { isCloudHosted } from '../../../cloud';
 import { base } from '../../../base';
 import ClipboardPanel from '../../details/ClipboardPanel.svelte';
+import LazyModePanel from './contextPanel/LazyModePanel.svelte';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -103,6 +101,7 @@ let saveDrawerOpen = false;
 let inputsDrawerOpen = fromHub;
 let historyBrowserDrawerOpen = false;
 let debugAppDrawerOpen = false;
+let lazyDrawerOpen = false;
 let deploymentMsg = undefined;
 function closeSaveDrawer() {
     saveDrawerOpen = false;
@@ -713,6 +712,13 @@ let moreItems = [
         action: () => {
             debugAppDrawerOpen = true;
         }
+    },
+    {
+        displayName: 'Lazy mode',
+        icon: Zap,
+        action: () => {
+            lazyDrawerOpen = true;
+        }
     }
 ];
 let appEditorTutorial = undefined;
@@ -774,21 +780,26 @@ $: customPath !== undefined && validateCustomPath(customPath);
 <svelte:window on:keydown={onKeyDown} />
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
-<!-- <UnsavedConfirmationModal -->
-<!-- 	{diffDrawer} -->
-<!-- 	savedValue={savedApp} -->
-<!-- 	modifiedValue={{ -->
-<!-- 		summary: $summary, -->
-<!-- 		value: $app, -->
-<!-- 		path: newEditedPath || savedApp?.draft?.path || savedApp?.path, -->
-<!-- 		policy, -->
-<!-- 		custom_path: customPath -->
-<!-- 	}} -->
-<!-- 	additionalExitAction={() => { -->
-<!-- 		setTheme(priorDarkMode) -->
-<!-- 	}} -->
-<!-- /> -->
 
+{#if $$slots.unsavedConfirmationModal}
+	<slot
+		name="unsavedConfirmationModal"
+		{diffDrawer}
+		additionalExitAction={() => {
+			setTheme(priorDarkMode)
+		}}
+		getInitialAndModifiedValues={() => ({
+			savedValue: savedApp,
+			modifiedValue: {
+				summary: $summary,
+				value: $app,
+				path: newEditedPath || savedApp?.draft?.path || savedApp?.path,
+				policy,
+				custom_path: customPath
+			}
+		})}
+	/>
+{/if}
 <DeployOverrideConfirmationModal
 	bind:deployedBy
 	bind:confirmCallback
@@ -1101,6 +1112,11 @@ $: customPath !== undefined && validateCustomPath(customPath);
 	</DrawerContent>
 </Drawer>
 
+<Drawer bind:open={lazyDrawerOpen} size="800px">
+	<DrawerContent title="Lazy Mode" on:close={() => (lazyDrawerOpen = false)}>
+		<LazyModePanel />
+	</DrawerContent>
+</Drawer>
 <Drawer bind:open={$jobsDrawerOpen} size="900px">
 	<DrawerContent
 		noPadding
@@ -1367,70 +1383,92 @@ $: customPath !== undefined && validateCustomPath(customPath);
 			/>
 
 			{#if $app}
-				<ToggleButtonGroup class="h-[30px]" bind:selected={$app.fullscreen}>
+				<ToggleButtonGroup
+					class="h-[30px]"
+					selected={$app.fullscreen ? 'true' : 'false'}
+					on:selected={({ detail }) => {
+						$app.fullscreen = detail === 'true'
+					}}
+					let:item
+				>
 					<ToggleButton
 						icon={AlignHorizontalSpaceAround}
-						value={false}
+						value={'false'}
 						tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
 						iconProps={{ size: 16 }}
+						{item}
 					/>
 					<ToggleButton
 						tooltip="The width is of the app if the full width of its container"
 						icon={Expand}
-						value={true}
+						value={'true'}
 						iconProps={{ size: 16 }}
+						{item}
 					/>
 				</ToggleButtonGroup>
 			{/if}
 			{#if $app}
 				<ToggleButtonGroup
 					class="h-[30px]"
-					on:selected={(e) => {
-						setTheme(e.detail)
+					on:selected={({ detail }) => {
+						console.log('dbg detail', detail)
+						const theme = detail === 'dark' ? true : detail === 'sun' ? false : undefined
+						console.log('dbg settheme', theme)
+						setTheme(theme)
 					}}
-					bind:selected={$app.darkMode}
+					selected={$app.darkMode === undefined ? 'auto' : $app.darkMode ? 'dark' : 'sun'}
+					let:item
 				>
 					<ToggleButton
 						icon={SunMoon}
-						value={undefined}
+						value={'auto'}
 						tooltip="The app mode between dark/light is automatic"
 						iconProps={{ size: 16 }}
+						{item}
 					/>
 					<ToggleButton
 						icon={Sun}
-						value={false}
+						value={'sun'}
 						tooltip="Force light mode"
 						iconProps={{ size: 16 }}
+						{item}
 					/>
 					<ToggleButton
 						tooltip="Force dark mode"
 						icon={Moon}
-						value={true}
+						value={'dark'}
 						iconProps={{ size: 16 }}
+						{item}
 					/>
 				</ToggleButtonGroup>
 			{/if}
 			<div class="flex flex-row gap-2">
-				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
+				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint} let:item>
 					<ToggleButton
 						tooltip="Computer View"
 						icon={Laptop2}
 						value={'lg'}
 						iconProps={{ size: 16 }}
+						{item}
 					/>
 					<ToggleButton
 						tooltip="Mobile View"
 						icon={Smartphone}
 						value={'sm'}
 						iconProps={{ size: 16 }}
+						{item}
 					/>
 					{#if $breakpoint === 'sm'}
-						<ToggleEnable
-							tooltip="Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view"
-							label="Enable mobile view for smaller screens"
+						<Toggle
+							size="xs"
+							options={{
+								right: 'Enable mobile view for smaller screens',
+								rightTooltip:
+									'Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view'
+							}}
+							textClass="text-2xs whitespace-nowrap white !w-full"
 							bind:checked={$app.mobileViewOnSmallerScreens}
-							iconProps={{ size: 16 }}
-							iconOnly={false}
+							class="flex flex-row px-2 items-center"
 						/>
 					{/if}
 				</ToggleButtonGroup>
@@ -1479,33 +1517,7 @@ $: customPath !== undefined && validateCustomPath(customPath);
 		<Awareness />
 	{/if}
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
-		<ButtonDropdown hasPadding={false}>
-			<svelte:fragment slot="buttonReplacement">
-				<Button nonCaptureEvent size="xs" color="light">
-					<div class="flex flex-row items-center">
-						<MoreVertical size={14} />
-					</div>
-				</Button>
-			</svelte:fragment>
-			<svelte:fragment slot="items">
-				{#each moreItems as item}
-					<MenuItem
-						on:click={item.action}
-						disabled={item.disabled}
-						class={item.disabled ? 'opacity-50' : ''}
-					>
-						<div
-							class={classNames(
-								'text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-							)}
-						>
-							<svelte:component this={item.icon} size={14} />
-							{item.displayName}
-						</div>
-					</MenuItem>
-				{/each}
-			</svelte:fragment>
-		</ButtonDropdown>
+		<Dropdown items={moreItems} />
 		<AppEditorTutorial bind:this={appEditorTutorial} />
 
 		<div class="hidden md:inline relative overflow-visible">

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

@@ -37,7 +37,30 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        unsavedConfirmationModal: {
+            diffDrawer: DiffDrawer | undefined;
+            additionalExitAction: () => void;
+            getInitialAndModifiedValues: () => {
+                savedValue: {
+                    value: App;
+                    draft?: any;
+                    path: string;
+                    summary: string;
+                    policy: any;
+                    draft_only?: boolean | undefined;
+                    custom_path?: string | undefined;
+                } | undefined;
+                modifiedValue: {
+                    summary: string;
+                    value: App;
+                    path: any;
+                    policy: Policy;
+                    custom_path: string | undefined;
+                };
+            };
+        };
+    };
 };
 export type AppEditorHeaderProps = typeof __propDef.props;
 export type AppEditorHeaderEvents = typeof __propDef.events;