windmill-components 1.122.0 → 1.138.2

package/package/components/apps/components/inputs/AppQuillEditor.svelte

@@ -6,7 +6,6 @@ import InitializeComponent from '../helpers/InitializeComponent.svelte';
 export let id;
 export let configuration;
 export let render;
-import { onMount } from 'svelte';
 let editor;
 let quill;
 export let toolbarOptions = [
@@ -22,7 +21,13 @@ let defaultValue = undefined;
 let outputs = initOutput($worldStore, id, {
     result: ''
 });
-onMount(async () => {
+$: if (!render) {
+    quill = undefined;
+}
+$: if (!quill && render) {
+    loadQuill();
+}
+async function loadQuill() {
     const { default: Quill } = await import('quill');
     quill = new Quill(editor, {
         modules: {
@@ -37,7 +42,7 @@ onMount(async () => {
     quill.on('text-change', function (delta, oldDelta, source) {
         setOutput();
     });
-});
+}
 $componentControl[id] = {
     setValue(nvalue) {
         if (quill) {
@@ -76,3 +81,24 @@ function handleDefault(defaultValue) {
 		<div bind:this={editor} />
 	</div>
 {/if}
+
+<style>
+	:global(.ql-toolbar .ql-stroke) {
+		fill: none;
+		stroke: rgb(var(--color-text-primary) / 1);
+	}
+
+	:global(.ql-toolbar .ql-fill) {
+		fill: rgb(var(--color-text-primary) / 1);
+		stroke: none;
+}
+
+	:global(.ql-toolbar .ql-picker) {
+		--tw-text-opacity: 1;
+		color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
+}
+
+	:global(.ql-container) {
+		--tw-text-opacity: 1;
+		color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
+}</style>

package/package/components/apps/components/inputs/AppSelect.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import Select from 'svelte-select';
+import Select from '../../svelte-select/lib/index';
 import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults';
@@ -16,9 +16,11 @@ export let extraKey = undefined;
 export let preclickAction = undefined;
 export let recomputeIds = undefined;
 export let controls = undefined;
-const { app, worldStore, connectingInput, selectedComponent, runnableComponents, componentControl } = getContext('AppViewerContext');
+const { app, worldStore, connectingInput, selectedComponent, runnableComponents, componentControl, darkMode } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
+const rowContext = getContext('RowWrapperContext');
+const rowInputs = getContext('RowInputs');
 $componentControl[id] = {
     setValue(nvalue) {
         setValue(JSON.stringify(nvalue));
@@ -57,6 +59,9 @@ function handleItems() {
     if (iterContext && listInputs) {
         listInputs(id, rawValue);
     }
+    if (rowContext && rowInputs) {
+        rowInputs(id, rawValue);
+    }
 }
 function onChange(e) {
     e?.stopPropagation();
@@ -80,13 +85,16 @@ function setValue(nvalue) {
     if (iterContext && listInputs) {
         listInputs(id, result);
     }
+    if (rowContext && rowInputs) {
+        rowInputs(id, result);
+    }
     if (recomputeIds) {
         recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((f) => f()));
     }
 }
 function onClear() {
     value = undefined;
-    outputs?.result.set(undefined);
+    outputs?.result.set(undefined, true);
     if (iterContext && listInputs) {
         listInputs(id, undefined);
     }
@@ -141,11 +149,14 @@ let filterText = '';
 			on:filter={handleFilter}
 			on:clear={onClear}
 			on:change={onChange}
+			inAppEditor={true}
 			items={listItems}
 			listAutoWidth={resolvedConfig.fullWidth}
 			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
 			containerStyles={'border-color: #999;' +
-				SELECT_INPUT_DEFAULT_STYLE.containerStyles +
+				($darkMode
+					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+					: SELECT_INPUT_DEFAULT_STYLE.containerStyles) +
 				css?.input?.style}
 			{value}
 			placeholder={resolvedConfig.placeholder}
@@ -155,9 +166,9 @@ let filterText = '';
 				}
 			}}
 		>
-			<div slot="item" let:item
+			<svelte:fragment slot="item" let:item
 				>{#if resolvedConfig.create}{item.created ? 'Add new: ' : ''}{/if}{item.label}
-			</div>
+			</svelte:fragment>
 		</Select>
 	</div>
 </AlignWrapper>
@@ -167,5 +178,5 @@ let filterText = '';
 		padding: 0 !important;
 	}
 	:global(.svelte-select-list) {
-		z-index: 1000 !important;
+		z-index: 5000 !important;
 	}</style>

package/package/components/apps/components/inputs/AppSelectTab.svelte

@@ -31,18 +31,13 @@ function setDefaultValue() {
     if (resolvedConfig.defaultValue === undefined) {
         selected = resolvedConfig.items[0].value;
     }
-    else if (resolvedConfig.defaultValue?.value) {
-        selected = resolvedConfig.defaultValue?.value;
+    else if (resolvedConfig.defaultValue) {
+        selected = resolvedConfig.defaultValue;
     }
 }
 function handleSelection(value) {
     outputs?.result.set(value);
 }
-function onPointerDown(e) {
-    if (!e.shiftKey) {
-        e.stopPropagation();
-    }
-}
 $: selected && handleSelection(selected);
 $: css = concatCustomCss($app.css?.selecttabcomponent, customCss);
 </script>
@@ -59,7 +54,7 @@ $: css = concatCustomCss($app.css?.selecttabcomponent, customCss);
 <InitializeComponent {id} />
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	<div class="w-full" on:pointerdown={onPointerDown}>
+	<div class="w-full">
 		<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
 			{#each resolvedConfig?.items ?? [] as item}
 				<Tab

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

@@ -54,6 +54,7 @@ $: css = concatCustomCss($app.css?.[appCssKey], customCss);
 			style="resize:none; {css?.input?.style ?? ''}"
 			on:pointerdown|stopPropagation={(e) =>
 				!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+			on:keydown|stopPropagation
 			bind:value
 			{placeholder}
 		/>
@@ -68,6 +69,7 @@ $: css = concatCustomCss($app.css?.[appCssKey], customCss);
 					style={css?.input?.style ?? ''}
 					on:pointerdown|stopPropagation={(e) =>
 						!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+					on:keydown|stopPropagation
 					type="password"
 					bind:value
 					{placeholder}
@@ -81,6 +83,7 @@ $: css = concatCustomCss($app.css?.[appCssKey], customCss);
 					style={css?.input?.style ?? ''}
 					on:pointerdown|stopPropagation={(e) =>
 						!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+					on:keydown|stopPropagation
 					type="text"
 					bind:value
 					{placeholder}
@@ -94,6 +97,7 @@ $: css = concatCustomCss($app.css?.[appCssKey], customCss);
 					style={css?.input?.style ?? ''}
 					on:pointerdown|stopPropagation={(e) =>
 						!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+					on:keydown|stopPropagation
 					type="email"
 					bind:value
 					{placeholder}

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

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

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

@@ -79,6 +79,7 @@ $: css = concatCustomCss($app.css?.drawercomponent, customCss);
 				appDrawer?.toggleDrawer()
 				$focusedGrid = undefined
 			}}
+			fullScreen={$mode !== 'dnd'}
 		>
 			<div
 				class="h-full"
@@ -98,7 +99,6 @@ $: css = concatCustomCss($app.css?.drawercomponent, customCss);
 						visible={open && render}
 						{id}
 						subGridId={`${id}-0`}
-						containerHeight={1200}
 						on:focus={() => {
 							if (!$connectingInput.opened) {
 								$selectedComponent = [id]

package/package/components/apps/components/layout/AppList.svelte

@@ -43,70 +43,62 @@ let inputs = {};
 
 <InitializeComponent {id} />
 
-{#if render}
-	<RunnableWrapper
-		{outputs}
-		{render}
-		autoRefresh
-		{componentInput}
-		{id}
-		bind:initializing
-		bind:result
+<RunnableWrapper
+	render={true}
+	{outputs}
+	autoRefresh
+	{componentInput}
+	{id}
+	bind:initializing
+	bind:result
+>
+	<div
+		class="w-full flex flex-wrap overflow-auto {isCard ? 'h-full gap-2' : 'divide-y max-h-full'}"
 	>
-		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-
-		<div
-			class="w-full flex flex-wrap overflow-auto {isCard ? 'h-full gap-2' : 'divide-y max-h-full'}"
-		>
-			{#if $app.subgrids?.[`${id}-0`]}
-				{#if Array.isArray(result) && result.length > 0}
-					{#each result ?? [] as value, index}
-						<div
-							style={`${
-								isCard
-									? `min-width: ${resolvedConfig.width?.configuration?.card?.minWidthPx}px; `
-									: ''
-							} max-height: ${resolvedConfig.heightPx}px;`}
-							class="overflow-auto {!isCard ? 'w-full' : 'border'}"
+		{#if $app.subgrids?.[`${id}-0`]}
+			{#if Array.isArray(result) && result.length > 0}
+				{#each result ?? [] as value, index}
+					<div
+						style={`${
+							isCard
+								? `min-width: ${resolvedConfig.width?.configuration?.card?.minWidthPx}px; `
+								: ''
+						} max-height: ${resolvedConfig.heightPx}px;`}
+						class="overflow-auto {!isCard ? 'w-full' : 'border'}"
+					>
+						<ListWrapper
+							on:inputsChange={() => {
+								outputs?.inputs.set(inputs, true)
+							}}
+							bind:inputs
+							{value}
+							{index}
 						>
-							<ListWrapper
-								on:inputsChange={() => {
-									outputs?.inputs.set(inputs, true)
+							<SubGridEditor
+								visible={render}
+								{id}
+								class={css?.container?.class}
+								style={css?.container?.style}
+								subGridId={`${id}-0`}
+								containerHeight={resolvedConfig.heightPx}
+								on:focus={() => {
+									if (!$connectingInput.opened) {
+										$selectedComponent = [id]
+									}
+									onFocus()
 								}}
-								bind:inputs
-								{value}
-								{index}
-							>
-								<SubGridEditor
-									visible={render}
-									{id}
-									class={css?.container?.class}
-									style={css?.container?.style}
-									subGridId={`${id}-0`}
-									containerHeight={resolvedConfig.heightPx}
-									on:focus={() => {
-										if (!$connectingInput.opened) {
-											$selectedComponent = [id]
-										}
-										onFocus()
-									}}
-								/>
-							</ListWrapper>
-						</div>
-					{/each}
-				{:else}
-					<ListWrapper disabled value={undefined} index={0}>
-						<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-					</ListWrapper>
-					{#if !Array.isArray(result)}
-						<div class="text-center text-gray-500">Input data is not an array</div>
-					{/if}
+							/>
+						</ListWrapper>
+					</div>
+				{/each}
+			{:else}
+				<ListWrapper disabled value={undefined} index={0}>
+					<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+				</ListWrapper>
+				{#if !Array.isArray(result)}
+					<div class="text-center text-tertiary">Input data is not an array</div>
 				{/if}
 			{/if}
-		</div>
-	</RunnableWrapper>
-{:else}
-	<ListWrapper disabled value={undefined} index={0}>
-		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-	</ListWrapper>
-{/if}
+		{/if}
+	</div>
+</RunnableWrapper>

package/package/components/apps/components/layout/AppModal.svelte

@@ -18,7 +18,7 @@ export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
 export let render;
-const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode } = getContext('AppViewerContext');
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl } = getContext('AppViewerContext');
 //used so that we can count number of outputs setup for first refresh
 initOutput($worldStore, id, {});
 $: css = concatCustomCss($app.css?.modalcomponent, customCss);
@@ -36,6 +36,14 @@ function closeDrawer() {
     open = false;
 }
 let resolvedConfig = initConfig(components['modalcomponent'].initialData.configuration, configuration);
+$componentControl[id] = {
+    openModal: () => {
+        open = true;
+    },
+    closeModal: () => {
+        open = false;
+    }
+};
 </script>
 
 <svelte:window on:keyup={handleKeyUp} />
@@ -92,10 +100,10 @@ let resolvedConfig = initConfig(components['modalcomponent'].initialData.configu
 		<div
 			style={css?.popup?.style}
 			class={twMerge(
-				'm-24 max-h-[80%] bg-white overflow-y-auto rounded-lg relative',
+				'm-24 max-h-[80%] bg-surface overflow-y-auto rounded-lg relative',
 				css?.popup?.class
 			)}
-			use:clickOutside
+			use:clickOutside={false}
 			on:click_outside={() => {
 				if ($mode !== 'dnd') {
 					closeDrawer()
@@ -110,9 +118,9 @@ let resolvedConfig = initConfig(components['modalcomponent'].initialData.configu
 							open = false
 						}}
 						style={css?.button?.style}
-						class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
+						class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
 					>
-						<X class="text-gray-500" />
+						<X class="text-tertiary" />
 					</button>
 				</div>
 			</div>

package/package/components/apps/components/layout/AppStepper.svelte

@@ -143,7 +143,7 @@ let directionClicked = undefined;
 		<div bind:clientHeight={footerHeight}>
 			<div class="flex justify-between h-10 p-2">
 				<div class="flex items-center gap-2">
-					<span class="text-sm font-medium text-gray-500">
+					<span class="text-sm font-medium text-tertiary">
 						Step {selectedIndex + 1} of {tabs.length}
 					</span>
 				</div>

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

@@ -79,20 +79,20 @@ let resolvedDisabledTabs = [];
 						selectedStyle={css?.selectedTab?.style}
 						disabled={resolvedDisabledTabs[index]}
 					>
-						<span class="font-semibold">{res}</span>
+						<span class="font-semibold text-primary">{res}</span>
 					</Tab>
 				{/each}
 			</Tabs>
 		</div>
 	{:else if resolvedConfig.tabsKind == 'sidebar'}
 		<div
-			class="flex gap-y-2 flex-col w-1/6 max-w-[160px] bg-white text-[#2e3440] opacity-80 px-4 pt-4 border-r border-gray-400"
+			class="flex gap-y-2 flex-col w-1/6 max-w-[160px] bg-surface text-[#2e3440] opacity-80 px-4 pt-4 border-r border-gray-400"
 		>
 			{#each tabs ?? [] as res}
 				<button
 					class="rounded-sm !truncate text-sm hover:bg-gray-100 hover:border hover:text-black px-1 py-2 {selected ==
 					res
-						? 'outline outline-gray-500 outline-1 bg-white text-black'
+						? 'outline outline-gray-500 outline-1 bg-surface text-black'
 						: ''}"
 					on:pointerdown|stopPropagation
 					on:click={() => (selected = res)}>{res}</button

package/package/components/apps/components/layout/ListWrapper.svelte

@@ -15,7 +15,6 @@ setContext('ListInputs', (id, value) => {
     else {
         inputs[id][index] = value;
     }
-    console.log('foo');
     dispatch('inputsChange');
 });
 </script>

package/package/components/apps/components/layout/RowWrapper.svelte

@@ -0,0 +1,22 @@
+<script>import { createEventDispatcher, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+export let index;
+export let value;
+export let disabled = false;
+export let inputs = {};
+const dispatch = createEventDispatcher();
+const ctx = writable({ index, value, disabled });
+$: $ctx = { index, value, disabled };
+setContext('RowWrapperContext', ctx);
+setContext('RowInputs', (id, value) => {
+    if (!inputs[id]) {
+        inputs[id] = { [index]: value };
+    }
+    else {
+        inputs[id][index] = value;
+    }
+    dispatch('inputsChange');
+});
+</script>
+
+<slot />

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        index: number;
+        value: any;
+        disabled?: boolean | undefined;
+        inputs?: Record<string, Record<number, any>> | undefined;
+    };
+    events: {
+        inputsChange: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RowWrapperProps = typeof __propDef.props;
+export type RowWrapperEvents = typeof __propDef.events;
+export type RowWrapperSlots = typeof __propDef.slots;
+export default class RowWrapper extends SvelteComponentTyped<RowWrapperProps, RowWrapperEvents, RowWrapperSlots> {
+}
+export {};

package/package/components/apps/editor/AppComponentInput.svelte

@@ -19,7 +19,7 @@ export let resourceOnly = false;
 				}
 				return false
 			}).length === 0}
-			<span class="text-sm text-gray-600">No resource input</span>
+			<span class="text-sm text-secondary">No resource input</span>
 		{:else}
 			<InputsSpecsEditor
 				id={component.id}

package/package/components/apps/editor/AppDeploymentHistory.svelte

@@ -0,0 +1,34 @@
+<script>import { Drawer, DrawerContent } from '../../common';
+import { AppService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { sendUserToast } from '../../../toast';
+import DeploymentHistory from './DeploymentHistory.svelte';
+let versions = [];
+let historyBrowserDrawerOpen = false;
+export function open(newVersions) {
+    versions = newVersions;
+    historyBrowserDrawerOpen = true;
+}
+async function updateApp(app) {
+    await AppService.updateApp({
+        workspace: $workspaceStore,
+        path: app.path,
+        requestBody: {
+            ...app
+        }
+    });
+    historyBrowserDrawerOpen = false;
+}
+</script>
+
+<Drawer bind:open={historyBrowserDrawerOpen} size="1200px">
+	<DrawerContent title="Deployment History" on:close={() => (historyBrowserDrawerOpen = false)}>
+		<DeploymentHistory
+			on:restore={(e) => {
+				sendUserToast('App restored from previous deployment')
+				updateApp(e.detail)
+			}}
+			{versions}
+		/>
+	</DrawerContent>
+</Drawer>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: ((newVersions: number[]) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDeploymentHistoryProps = typeof __propDef.props;
+export type AppDeploymentHistoryEvents = typeof __propDef.events;
+export type AppDeploymentHistorySlots = typeof __propDef.slots;
+export default class AppDeploymentHistory extends SvelteComponentTyped<AppDeploymentHistoryProps, AppDeploymentHistoryEvents, AppDeploymentHistorySlots> {
+    get open(): (newVersions: number[]) => void;
+}
+export {};

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

@@ -30,6 +30,7 @@ import SettingsPanel from './SettingsPanel.svelte';
 import { secondaryMenu, SecondaryMenu } from './settingsPanel/secondaryMenu';
 import Popover from '../../Popover.svelte';
 import { BG_PREFIX, migrateApp } from '../utils';
+import DarkModeObserver from '../../DarkModeObserver.svelte';
 export let app;
 export let path;
 export let policy;
@@ -53,12 +54,14 @@ const focusedGrid = writable(undefined);
 const pickVariableCallback = writable(undefined);
 let context = {
     email: $userStore?.email,
+    groups: $userStore?.groups,
     username: $userStore?.username,
     query: Object.fromEntries($page.url.searchParams.entries()),
     hash: $page.url.hash,
     workspace: $workspaceStore,
     mode: 'editor'
 };
+const darkMode = writable(document.documentElement.classList.contains('dark'));
 const worldStore = buildWorld(context);
 setContext('AppViewerContext', {
     worldStore,
@@ -85,7 +88,8 @@ setContext('AppViewerContext', {
     state: writable({}),
     componentControl: writable({}),
     hoverStore: writable(undefined),
-    allIdsInPath: writable([])
+    allIdsInPath: writable([]),
+    darkMode
 });
 setContext('AppEditorContext', {
     history,
@@ -169,8 +173,13 @@ $: if ($connectingInput.opened) {
 else {
     secondaryMenu.close();
 }
+function onThemeChange() {
+    $darkMode = document.documentElement.classList.contains('dark');
+}
 </script>
 
+<DarkModeObserver on:change={onThemeChange} />
+
 <svelte:window on:hashchange={hashchange} />
 
 {#if !$userStore?.operator}
@@ -212,7 +221,7 @@ else {
 											$focusedGrid = undefined
 										}}
 										class={twMerge(
-											'bg-gray-100 h-full w-full relative',
+											'bg-surface h-full w-full relative',
 											$appStore.css?.['app']?.['viewer']?.class
 										)}
 										style={$appStore.css?.['app']?.['viewer']?.style}
@@ -277,7 +286,7 @@ else {
 											<SettingsPanel />
 											<SecondaryMenu />
 										{:else}
-											<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
+											<div class="min-w-[150px] text-sm text-secondary text-center py-8 px-2">
 												Select a component to see the settings&nbsp;for&nbsp;it
 											</div>
 										{/if}
@@ -317,7 +326,7 @@ else {
 >
 	<div
 		slot="submission"
-		class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+		class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
 	>
 		<Button
 			variant="border"