windmill-components 1.70.0 → 1.75.0

package/components/apps/components/layout/AppDivider.svelte

@@ -1,20 +1,40 @@
-<script>import AlignWrapper from '../helpers/AlignWrapper.svelte';
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
+export let customCss = undefined;
 export let position;
+export let render;
+const { app } = getContext('AppViewerContext');
 let size = 2;
 let color = '#00000060';
+$: css = concatCustomCss($app.css?.[position + 'dividercomponent'], customCss);
 </script>
 
 <InputValue {id} input={configuration.size} bind:value={size} />
 <InputValue {id} input={configuration.color} bind:value={color} />
 
-<AlignWrapper {horizontalAlignment} {verticalAlignment} class="h-full">
+<AlignWrapper
+	{horizontalAlignment}
+	{verticalAlignment}
+	class={twMerge(css?.container?.class, 'h-full')}
+	style={css?.container?.style}
+	{render}
+>
 	<div
-		class="rounded-full {position === 'horizontal' ? 'w-full' : 'h-full'}"
-		style="{position === 'horizontal' ? 'height' : 'width'}: {size}px; background-color: {color}"
+		class={twMerge(
+			`rounded-full ${position === 'horizontal' ? 'w-full' : 'h-full'}`,
+			css?.divider?.class ?? ''
+		)}
+		style="
+			{position === 'horizontal' ? 'height' : 'width'}: {size}px;
+			background-color: {color};
+			{css?.divider?.style ?? ''}
+		"
 	/>
 </AlignWrapper>

package/components/apps/components/layout/AppDivider.svelte.d.ts

@@ -1,13 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
-import type { HorizontalAlignment, VerticalAlignment } from '../../types';
+import type { ComponentCustomCSS, HorizontalAlignment, VerticalAlignment } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
         horizontalAlignment?: HorizontalAlignment | undefined;
         verticalAlignment?: VerticalAlignment | undefined;
+        customCss?: ComponentCustomCSS<'container' | 'divider'> | undefined;
         position: 'horizontal' | 'vertical';
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,89 @@
+<script>import { getContext } from 'svelte';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import Portal from 'svelte-portal';
+import { concatCustomCss } from '../../utils';
+import { Button, ButtonType, Drawer, DrawerContent } from '../../../common';
+import { twMerge } from 'tailwind-merge';
+import { AlignWrapper } from '../helpers';
+export let customCss = undefined;
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let noWFull = false;
+export let render;
+const { app, focusedGrid, selectedComponent } = getContext('AppViewerContext');
+let gridContent = undefined;
+let noPadding = undefined;
+let drawerTitle = undefined;
+let appDrawer;
+let labelValue;
+let color;
+let size;
+let disabled = undefined;
+let fillContainer = undefined;
+$: css = concatCustomCss($app.css?.containercomponent, customCss);
+</script>
+
+<div class="h-full w-full">
+	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
+		<Button
+			btnClasses={twMerge(
+				$app.css?.['buttoncomponent']?.['button']?.class,
+				fillContainer ? 'w-full h-full' : ''
+			)}
+			{disabled}
+			on:pointerdown={(e) => {
+				e?.stopPropagation()
+				window.dispatchEvent(new Event('pointerup'))
+			}}
+			on:click={async (e) => {
+				$focusedGrid = {
+					parentComponentId: id,
+					subGridIndex: 0
+				}
+				appDrawer.toggleDrawer()
+			}}
+			{size}
+			{color}
+		>
+			<div>{labelValue}</div>
+		</Button>
+	</AlignWrapper>
+</div>
+
+<InputValue {id} input={configuration.gridContent} bind:value={gridContent} />
+<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
+<InputValue {id} input={configuration.drawerTitle} bind:value={drawerTitle} />
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+<InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.fillContainer} bind:value={fillContainer} />
+
+<Portal target="#app-editor-top-level-drawer">
+	<Drawer let:open bind:this={appDrawer} size="800px" alwaysOpen positionClass="!absolute">
+		<DrawerContent
+			title={drawerTitle}
+			on:close={() => {
+				appDrawer?.toggleDrawer()
+				$focusedGrid = undefined
+			}}
+		>
+			{#if $app.subgrids?.[`${id}-0`]}
+				<SubGridEditor
+					visible={open && render}
+					{noPadding}
+					{id}
+					class={css?.container.class}
+					style={css?.container.style}
+					bind:subGrid={$app.subgrids[`${id}-0`]}
+					containerHeight={1200}
+					on:focus={() => {
+						$selectedComponent = id
+					}}
+				/>
+			{/if}
+		</DrawerContent>
+	</Drawer>
+</Portal>

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        customCss?: ComponentCustomCSS<'container'> | undefined;
+        id: string;
+        configuration: Record<string, AppInput>;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        noWFull?: boolean | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDrawerProps = typeof __propDef.props;
+export type AppDrawerEvents = typeof __propDef.events;
+export type AppDrawerSlots = typeof __propDef.slots;
+export default class AppDrawer extends SvelteComponentTyped<AppDrawerProps, AppDrawerEvents, AppDrawerSlots> {
+}
+export {};

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

@@ -0,0 +1,88 @@
+<script>import { getContext } from 'svelte';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import { concatCustomCss } from '../../utils';
+import InputValue from '../helpers/InputValue.svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { deepEqual } from 'fast-equals';
+export let id;
+export let configuration;
+export let componentContainerHeight;
+export let customCss = undefined;
+export let horizontal = false;
+export let panes;
+export let render;
+const { app, focusedGrid, selectedComponent } = getContext('AppViewerContext');
+const { componentControl } = getContext('AppEditorContext');
+let noPadding = undefined;
+function onFocus() {
+    $focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: 0
+    };
+}
+$: $selectedComponent === id && onFocus();
+$: css = concatCustomCss($app.css?.containercomponent, customCss);
+$componentControl[id] = {
+    left: () => {
+        if ($focusedGrid?.subGridIndex) {
+            const index = $focusedGrid?.subGridIndex ?? 0;
+            if (index > 0) {
+                $focusedGrid.subGridIndex = index - 1;
+                return true;
+            }
+        }
+        return false;
+    },
+    right: () => {
+        // subGridIndex can be 0
+        if ($focusedGrid?.subGridIndex !== undefined) {
+            const index = $focusedGrid?.subGridIndex ?? 0;
+            if (index < panes.length - 1) {
+                $focusedGrid.subGridIndex = index + 1;
+                return true;
+            }
+        }
+        return false;
+    }
+};
+let sumedup = [50, 50];
+$: {
+    let ns = panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100);
+    if (!deepEqual(ns, sumedup)) {
+        sumedup = ns;
+    }
+}
+</script>
+
+<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
+
+<div class="h-full w-full border" on:pointerdown|stopPropagation>
+	<Splitpanes {horizontal}>
+		{#each sumedup as paneSize, index (index)}
+			<Pane size={paneSize} minSize={20}>
+				{#if $app.subgrids?.[`${id}-${index}`]}
+					<SubGridEditor
+						visible={render}
+						noYPadding
+						{noPadding}
+						{id}
+						shouldHighlight={$focusedGrid?.subGridIndex === index}
+						class={css?.container.class}
+						style={css?.container.style}
+						bind:subGrid={$app.subgrids[`${id}-${index}`]}
+						containerHeight={horizontal
+							? (componentContainerHeight * paneSize) / 100 - 1
+							: componentContainerHeight - 8}
+						on:focus={() => {
+							$selectedComponent = id
+							$focusedGrid = {
+								parentComponentId: id,
+								subGridIndex: index
+							}
+						}}
+					/>
+				{/if}
+			</Pane>
+		{/each}
+	</Splitpanes>
+</div>

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

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        componentContainerHeight: number;
+        customCss?: ComponentCustomCSS<'container'> | undefined;
+        horizontal?: boolean | undefined;
+        panes: number[];
+        render: boolean;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppSplitpanesProps = typeof __propDef.props;
+export type AppSplitpanesEvents = typeof __propDef.events;
+export type AppSplitpanesSlots = typeof __propDef.slots;
+export default class AppSplitpanes extends SvelteComponentTyped<AppSplitpanesProps, AppSplitpanesEvents, AppSplitpanesSlots> {
+}
+export {};

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

@@ -1,42 +1,80 @@
 <script>import { Tab, Tabs } from '../../../common';
-import { getContext } from 'svelte';
+import { getContext, onMount } from 'svelte';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import { concatCustomCss } from '../../utils';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
 export let componentContainerHeight;
 export let tabs;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = ['selectedTabIndex'];
-const { app, worldStore, focusedGrid, selectedComponent } = getContext('AppEditorContext');
-let selected = '';
+const { app, worldStore, focusedGrid, selectedComponent } = getContext('AppViewerContext');
+const { componentControl } = getContext('AppEditorContext');
+let selected = tabs[0];
 let noPadding = undefined;
-$: selectedIndex = tabs?.indexOf(selected) ?? -1;
-$: if ((tabs && selected === '') || !tabs.includes(selected)) {
-    selected = tabs[0];
-}
-$: outputs = $worldStore?.outputsById[id];
+let tabHeight = 0;
 function handleTabSelection() {
-    outputs?.selectedTabIndex.set(selectedIndex);
+    const selectedIndex = tabs?.indexOf(selected);
+    outputs?.selectedTabIndex.set(selectedIndex, true);
+    if ($selectedComponent != id) {
+        $selectedComponent = id;
+    }
+    if ($focusedGrid?.parentComponentId != id || $focusedGrid?.subGridIndex != selectedIndex) {
+        $focusedGrid = {
+            parentComponentId: id,
+            subGridIndex: selectedIndex
+        };
+    }
 }
-$: selectedIndex >= 0 && handleTabSelection();
-let tabHeight = 0;
-function onFocus() {
-    $focusedGrid = {
-        parentComponentId: id,
-        subGridIndex: selectedIndex ?? 0
-    };
+$: $selectedComponent === id && focusGrid();
+function focusGrid() {
+    const selectedIndex = tabs?.indexOf(selected);
+    if ($focusedGrid?.parentComponentId != id || $focusedGrid?.subGridIndex != selectedIndex) {
+        $focusedGrid = {
+            parentComponentId: id,
+            subGridIndex: selectedIndex
+        };
+    }
 }
-$: $selectedComponent === id && selectedIndex >= 0 && onFocus();
+$componentControl[id] = {
+    left: () => {
+        const index = tabs.indexOf(selected);
+        if (index > 0) {
+            selected = tabs[index - 1];
+            return true;
+        }
+        return false;
+    },
+    right: () => {
+        const index = tabs.indexOf(selected);
+        if (index < tabs.length - 1) {
+            selected = tabs[index + 1];
+            return true;
+        }
+        return false;
+    }
+};
+$: selected && handleTabSelection();
+$: outputs = $worldStore?.outputsById[id];
+$: selectedIndex = tabs?.indexOf(selected) ?? -1;
+$: css = concatCustomCss($app.css?.tabscomponent, customCss);
 </script>
 
-<InputValue {id} input={configuration.tabs} bind:value={tabs} />
 <InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
 
 <div>
 	<div bind:clientHeight={tabHeight} on:pointerdown|stopPropagation>
-		<Tabs bind:selected>
+		<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
 			{#each tabs ?? [] as res}
-				<Tab value={res}>
+				<Tab
+					value={res}
+					class={css?.tabs?.class}
+					style={css?.tabs?.style}
+					selectedClass={css?.selectedTab?.class}
+					selectedStyle={css?.selectedTab?.style}
+				>
 					<span class="font-semibold">{res}</span>
 				</Tab>
 			{/each}
@@ -45,9 +83,12 @@ $: $selectedComponent === id && selectedIndex >= 0 && onFocus();
 	{#if $app.subgrids}
 		{#each tabs ?? [] as res, i}
 			<SubGridEditor
-				visible={i === selectedIndex}
+				{id}
+				visible={render && i === selectedIndex}
 				bind:subGrid={$app.subgrids[`${id}-${i}`]}
 				{noPadding}
+				class={css?.container?.class}
+				style={css?.container?.style}
 				containerHeight={componentContainerHeight - tabHeight}
 				on:focus={() => {
 					$selectedComponent = id

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

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
         componentContainerHeight: number;
         tabs: string[];
+        customCss?: ComponentCustomCSS<'tabRow' | 'tabs' | 'selectedTab' | 'container'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/layout/index.d.ts

@@ -1,3 +1,5 @@
 export { default as AppContainer } from './AppContainer.svelte';
 export { default as AppDivider } from './AppDivider.svelte';
+export { default as AppDrawer } from './AppDrawer.svelte';
+export { default as AppSplitpanes } from './AppSplitpanes.svelte';
 export { default as AppTabs } from './AppTabs.svelte';

package/components/apps/components/layout/index.js

@@ -1,3 +1,5 @@
 export { default as AppContainer } from './AppContainer.svelte';
 export { default as AppDivider } from './AppDivider.svelte';
+export { default as AppDrawer } from './AppDrawer.svelte';
+export { default as AppSplitpanes } from './AppSplitpanes.svelte';
 export { default as AppTabs } from './AppTabs.svelte';

package/components/apps/editor/AppEditor.svelte

@@ -13,16 +13,19 @@ import ComponentList from './componentsPanel/ComponentList.svelte';
 import Icon from 'svelte-awesome';
 import { faCode, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
-import { encodeState } from '../../../utils';
+import { classNames, encodeState } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
 import { userStore, workspaceStore } from '../../../stores';
 import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte';
 import SettingsPanel from './SettingsPanel.svelte';
 import { fly } from 'svelte/transition';
-import UnsavedConfirmationModal from '../../common/confirmationModal/UnsavedConfirmationModal.svelte';
+import { VariableService } from '../../../gen';
 import { page } from '$app/stores';
 import CssSettings from './componentsPanel/CssSettings.svelte';
-import { findGridItem } from './appUtils';
+import { initHistory } from '../../../history';
+import ComponentNavigation from './component/ComponentNavigation.svelte';
+import ItemPicker from '../../ItemPicker.svelte';
+import VariableEditor from '../../VariableEditor.svelte';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -41,14 +44,15 @@ const connectingInput = writable({
     input: undefined,
     hoveredComponent: undefined
 });
+const history = initHistory(app);
 const runnableComponents = writable({});
 const errorByComponent = writable({});
 const focusedGrid = writable(undefined);
-setContext('AppEditorContext', {
+const pickVariableCallback = writable(undefined);
+setContext('AppViewerContext', {
     worldStore,
     staticOutputs,
     app: appStore,
-    lazyGrid: writable([]),
     summary: summaryStore,
     selectedComponent,
     mode,
@@ -64,7 +68,14 @@ setContext('AppEditorContext', {
     noBackend: false,
     errorByComponent,
     openDebugRun: writable(undefined),
-    focusedGrid
+    focusedGrid,
+    stateId: writable(0),
+    parentWidth: writable(0)
+});
+setContext('AppEditorContext', {
+    history,
+    componentControl: writable({}),
+    pickVariableCallback
 });
 let timeout = undefined;
 $: $appStore && saveDraft();
@@ -83,11 +94,16 @@ let mounted = false;
 onMount(() => {
     mounted = true;
 });
-$: context = {
+let context = {
     email: $userStore?.email,
     username: $userStore?.username,
-    query: Object.fromEntries($page.url.searchParams.entries())
+    query: Object.fromEntries($page.url.searchParams.entries()),
+    hash: $page.url.hash
 };
+function hashchange(e) {
+    context.hash = e.newURL.split('#')[1];
+    context = context;
+}
 $: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, context));
 $: previewing = $mode === 'preview';
 $: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
@@ -98,15 +114,21 @@ $: if ($selectedComponent) {
 else {
     selectedTab = 'insert';
 }
+let itemPicker = undefined;
+$: if ($pickVariableCallback) {
+    itemPicker?.openDrawer();
+}
+let variableEditor = undefined;
 </script>
 
+<svelte:window on:hashchange={hashchange} />
+
 {#if $connectingInput.opened}
 	<div
-		class="absolute  w-full h-screen bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+		class="absolute w-full h-screen bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
 	/>
 {/if}
 {#if !$userStore?.operator}
-	<UnsavedConfirmationModal />
 	{#if initialMode !== 'preview'}
 		<AppEditorHeader {policy} {fromHub} />
 	{/if}
@@ -114,7 +136,7 @@ else {
 	{#if previewing}
 		<SplitPanesWrapper>
 			<div
-				class={twMerge('bg-gray-100 h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
+				class={twMerge('h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
 				style={$appStore.css?.['app']?.['viewer']?.style}
 			>
 				<AppPreview
@@ -141,6 +163,10 @@ else {
 						<Splitpanes horizontal>
 							<Pane size={$connectingInput?.opened ? 100 : 70}>
 								<div
+									on:pointerdown={(e) => {
+										$selectedComponent = undefined
+										$focusedGrid = undefined
+									}}
 									class={twMerge(
 										'bg-gray-100 h-full w-full',
 										$appStore.css?.['app']?.['viewer']?.class
@@ -148,14 +174,19 @@ else {
 									style={$appStore.css?.['app']?.['viewer']?.style}
 								>
 									<div
-										class="relative  mx-auto w-full h-full overflow-auto {app.fullscreen
-											? ''
-											: 'max-w-6xl'}"
+										class={classNames(
+											'relative mx-auto w-full h-full overflow-auto',
+											app.fullscreen ? '' : 'max-w-6xl'
+										)}
 									>
 										{#if $appStore.grid}
-											<div class={width}>
+											<ComponentNavigation />
+
+											<div on:pointerdown|stopPropagation class={width}>
 												<GridEditor {policy} />
 											</div>
+
+											<div id="app-editor-top-level-drawer" />
 										{/if}
 									</div>
 								</div>
@@ -170,20 +201,20 @@ else {
 				</Pane>
 				<Pane size={21} minSize={5} maxSize={33}>
 					<div class="relative flex flex-col h-full">
-						<Tabs bind:selected={selectedTab} class="!border-b-2 !border-gray-200">
-							<Tab value="insert" size="xs" class="grow">
+						<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
+							<Tab value="insert" size="xs">
 								<div class="m-1 center-center gap-2">
 									<Icon data={faPlus} />
 									<span>Insert</span>
 								</div>
 							</Tab>
-							<Tab value="settings" size="xs" class="grow">
+							<Tab value="settings" size="xs">
 								<div class="m-1 center-center gap-2">
 									<Icon data={faSliders} />
 									<span>Settings</span>
 								</div>
 							</Tab>
-							<Tab value="css" size="xs" class="grow">
+							<Tab value="css" size="xs">
 								<div class="m-1 center-center gap-2">
 									<Icon data={faCode} />
 									<span>CSS</span>
@@ -240,3 +271,36 @@ else {
 {:else}
 	App editor not available to operators
 {/if}
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, _) => {
+		$pickVariableCallback?.(path)
+	}}
+	itemName="Variable"
+	extraField="path"
+	loadItems={async () =>
+		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+			name: x.path,
+			...x
+		}))}
+>
+	<div
+		slot="submission"
+		class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+	>
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
+			startIcon={{ icon: faPlus }}
+			on:click={() => {
+				variableEditor?.initNew?.()
+			}}
+		>
+			New variable
+		</Button>
+	</div>
+</ItemPicker>
+
+<VariableEditor bind:this={variableEditor} />

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { App, EditorMode } from '../types';
-import type { Policy } from '../../../gen';
+import { type Policy } from '../../../gen';
 declare const __propDef: {
     props: {
         app: App;
@@ -11,6 +11,8 @@ declare const __propDef: {
         fromHub?: boolean | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};