windmill-components 1.75.0 → 1.78.0

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

@@ -7,7 +7,6 @@ declare const __propDef: {
         configuration: Record<string, AppInput>;
         inputType?: string | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'input'> | undefined;
         appCssKey?: "textinputcomponent" | "passwordinputcomponent" | "emailinputcomponent" | undefined;
         render: boolean;
@@ -23,6 +22,5 @@ export type AppTextInputProps = typeof __propDef.props;
 export type AppTextInputEvents = typeof __propDef.events;
 export type AppTextInputSlots = typeof __propDef.slots;
 export default class AppTextInput extends SvelteComponentTyped<AppTextInputProps, AppTextInputEvents, AppTextInputSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -1,4 +1,5 @@
-<script>import { getContext } from 'svelte';
+<script>import { initOutput } from '../../../editor/appUtils';
+import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { concatCustomCss } from '../../../utils';
 import AlignWrapper from '../../helpers/AlignWrapper.svelte';
@@ -7,10 +8,12 @@ import CurrencyInput from './CurrencyInput.svelte';
 export let id;
 export let configuration;
 export let verticalAlignment = undefined;
-export const staticOutputs = ['result'];
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
+initOutput($worldStore, id, {
+    result: undefined
+});
 let defaultValue = undefined;
 let isNegativeAllowed = undefined;
 let currency = undefined;

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         id: string;
         configuration: Record<string, AppInput>;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'input'> | undefined;
         render: boolean;
     };
@@ -19,6 +18,5 @@ export type AppCurrencyInputProps = typeof __propDef.props;
 export type AppCurrencyInputEvents = typeof __propDef.events;
 export type AppCurrencyInputSlots = typeof __propDef.slots;
 export default class AppCurrencyInput extends SvelteComponentTyped<AppCurrencyInputProps, AppCurrencyInputEvents, AppCurrencyInputSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/layout/AppContainer.svelte

@@ -1,14 +1,11 @@
 <script>import { getContext } 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 customCss = undefined;
 export let render;
-let noPadding = undefined;
-export const staticOutputs = [];
 const { app, focusedGrid, selectedComponent } = getContext('AppViewerContext');
 function onFocus() {
     $focusedGrid = {
@@ -20,13 +17,10 @@ $: $selectedComponent === id && onFocus();
 $: css = concatCustomCss($app.css?.containercomponent, customCss);
 </script>
 
-<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
-
-<div>
+<div class="w-full h-full">
 	{#if $app.subgrids?.[`${id}-0`]}
 		<SubGridEditor
 			visible={render}
-			{noPadding}
 			{id}
 			class={css?.container.class}
 			style={css?.container.style}

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

@@ -8,7 +8,6 @@ declare const __propDef: {
         componentContainerHeight: number;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,6 +18,5 @@ export type AppContainerProps = typeof __propDef.props;
 export type AppContainerEvents = typeof __propDef.events;
 export type AppContainerSlots = typeof __propDef.slots;
 export default class AppContainer extends SvelteComponentTyped<AppContainerProps, AppContainerEvents, AppContainerSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -15,7 +15,6 @@ 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;
@@ -54,7 +53,6 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 </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} />
@@ -73,7 +71,6 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 			{#if $app.subgrids?.[`${id}-0`]}
 				<SubGridEditor
 					visible={open && render}
-					{noPadding}
 					{id}
 					class={css?.container.class}
 					style={css?.container.style}

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

@@ -11,9 +11,7 @@ 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;
+const { app, focusedGrid, selectedComponent, componentControl } = getContext('AppViewerContext');
 function onFocus() {
     $focusedGrid = {
         parentComponentId: id,
@@ -54,8 +52,6 @@ $: {
 }
 </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)}
@@ -64,7 +60,6 @@ $: {
 					<SubGridEditor
 						visible={render}
 						noYPadding
-						{noPadding}
 						{id}
 						shouldHighlight={$focusedGrid?.subGridIndex === index}
 						class={css?.container.class}

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

@@ -1,5 +1,6 @@
 <script>import { Tab, Tabs } from '../../../common';
 import { getContext, onMount } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { concatCustomCss } from '../../utils';
 import InputValue from '../helpers/InputValue.svelte';
@@ -9,12 +10,14 @@ export let componentContainerHeight;
 export let tabs;
 export let customCss = undefined;
 export let render;
-export const staticOutputs = ['selectedTabIndex'];
-const { app, worldStore, focusedGrid, selectedComponent } = getContext('AppViewerContext');
-const { componentControl } = getContext('AppEditorContext');
+export let initializing = configuration.tabsKind != undefined;
+const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl } = getContext('AppViewerContext');
 let selected = tabs[0];
-let noPadding = undefined;
+let kind = undefined;
 let tabHeight = 0;
+let outputs = initOutput($worldStore, id, {
+    selectedTabIndex: 0
+});
 function handleTabSelection() {
     const selectedIndex = tabs?.indexOf(selected);
     outputs?.selectedTabIndex.set(selectedIndex, true);
@@ -54,46 +57,71 @@ $componentControl[id] = {
             return true;
         }
         return false;
+    },
+    setTab: (tab) => {
+        selected = tabs[tab];
     }
 };
 $: selected && handleTabSelection();
-$: outputs = $worldStore?.outputsById[id];
 $: selectedIndex = tabs?.indexOf(selected) ?? -1;
 $: css = concatCustomCss($app.css?.tabscomponent, customCss);
+let subgridWidth = undefined;
 </script>
 
-<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
+<InputValue
+	on:done={() => initializing && (initializing = false)}
+	{id}
+	input={configuration.tabsKind}
+	bind:value={kind}
+/>
 
-<div>
-	<div bind:clientHeight={tabHeight} on:pointerdown|stopPropagation>
-		<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
+<div class={kind == 'sidebar' ? 'flex gap-4 w-full' : 'w-full'}>
+	{#if !kind || kind == 'tabs' || (kind == 'invisibleOnView' && $mode == 'dnd')}
+		<div bind:clientHeight={tabHeight}>
+			<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
+				{#each tabs ?? [] as 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}
+			</Tabs>
+		</div>
+	{:else if kind == '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"
+		>
 			{#each tabs ?? [] as res}
-				<Tab
-					value={res}
-					class={css?.tabs?.class}
-					style={css?.tabs?.style}
-					selectedClass={css?.selectedTab?.class}
-					selectedStyle={css?.selectedTab?.style}
+				<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'
+						: ''}"
+					on:pointerdown|stopPropagation
+					on:click={() => (selected = res)}>{res}</button
 				>
-					<span class="font-semibold">{res}</span>
-				</Tab>
 			{/each}
-		</Tabs>
-	</div>
-	{#if $app.subgrids}
-		{#each tabs ?? [] as res, i}
-			<SubGridEditor
-				{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
-				}}
-			/>
-		{/each}
+		</div>
 	{/if}
+
+	<div bind:clientWidth={subgridWidth} class="w-full">
+		{#if $app.subgrids}
+			{#each tabs ?? [] as res, i}<SubGridEditor
+					{id}
+					visible={render && i === selectedIndex}
+					bind:subGrid={$app.subgrids[`${id}-${i}`]}
+					class={css?.container?.class}
+					style={css?.container?.style}
+					containerHeight={componentContainerHeight - tabHeight}
+					on:focus={() => {
+						$selectedComponent = id
+					}}
+				/>{/each}
+		{/if}
+	</div>
 </div>

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

@@ -9,7 +9,7 @@ declare const __propDef: {
         tabs: string[];
         customCss?: ComponentCustomCSS<'tabRow' | 'tabs' | 'selectedTab' | 'container'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
+        initializing?: boolean | undefined;
     };
     events: {
         pointerdown: PointerEvent;
@@ -22,6 +22,5 @@ export type AppTabsProps = typeof __propDef.props;
 export type AppTabsEvents = typeof __propDef.events;
 export type AppTabsSlots = typeof __propDef.slots;
 export default class AppTabs extends SvelteComponentTyped<AppTabsProps, AppTabsEvents, AppTabsSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/editor/AppComponentInput.svelte

@@ -25,7 +25,8 @@ export let resourceOnly = false;
 				id={component.id}
 				shouldCapitalize={false}
 				bind:inputSpecs={component.componentInput.fields}
-				userInputEnabled={component.type !== 'buttoncomponent'}
+				userInputEnabled={component.type === 'formcomponent' ||
+					component.type === 'formbuttoncomponent'}
 				{resourceOnly}
 			/>
 		{/if}

package/components/apps/editor/AppEditor.svelte

@@ -33,8 +33,6 @@ export let policy;
 export let summary;
 export let fromHub = false;
 const appStore = writable(app);
-const worldStore = writable(undefined);
-const staticOutputs = writable({});
 const selectedComponent = writable(undefined);
 const mode = writable(initialMode);
 const breakpoint = writable('lg');
@@ -49,9 +47,14 @@ const runnableComponents = writable({});
 const errorByComponent = writable({});
 const focusedGrid = writable(undefined);
 const pickVariableCallback = writable(undefined);
+let context = {
+    email: $userStore?.email,
+    username: $userStore?.username,
+    query: Object.fromEntries($page.url.searchParams.entries()),
+    hash: $page.url.hash
+};
 setContext('AppViewerContext', {
-    worldStore,
-    staticOutputs,
+    worldStore: buildWorld(context),
     app: appStore,
     summary: summaryStore,
     selectedComponent,
@@ -70,12 +73,14 @@ setContext('AppViewerContext', {
     openDebugRun: writable(undefined),
     focusedGrid,
     stateId: writable(0),
-    parentWidth: writable(0)
+    parentWidth: writable(0),
+    state: writable({}),
+    componentControl: writable({})
 });
 setContext('AppEditorContext', {
     history,
-    componentControl: writable({}),
-    pickVariableCallback
+    pickVariableCallback,
+    ontextfocus: writable(undefined)
 });
 let timeout = undefined;
 $: $appStore && saveDraft();
@@ -94,17 +99,10 @@ let mounted = false;
 onMount(() => {
     mounted = true;
 });
-let context = {
-    email: $userStore?.email,
-    username: $userStore?.username,
-    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';
 let selectedTab = 'insert';
@@ -129,144 +127,148 @@ let variableEditor = undefined;
 	/>
 {/if}
 {#if !$userStore?.operator}
-	{#if initialMode !== 'preview'}
-		<AppEditorHeader {policy} {fromHub} />
-	{/if}
+	{#if $appStore}
+		{#if initialMode !== 'preview'}
+			<AppEditorHeader {policy} {fromHub} />
+		{/if}
 
-	{#if previewing}
-		<SplitPanesWrapper>
-			<div
-				class={twMerge('h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
-				style={$appStore.css?.['app']?.['viewer']?.style}
-			>
-				<AppPreview
-					workspace={$workspaceStore ?? ''}
-					summary={$summaryStore}
-					app={$appStore}
-					appPath={path}
-					{breakpoint}
-					{policy}
-					isEditor
-					{context}
-					noBackend={false}
-				/>
-			</div>
-		</SplitPanesWrapper>
-	{:else}
-		<SplitPanesWrapper>
-			<Splitpanes class="max-w-full overflow-hidden">
-				<Pane size={$connectingInput?.opened ? 40 : 15} minSize={5} maxSize={33}>
-					<ContextPanel />
-				</Pane>
-				<Pane size={64}>
-					<SplitPanesWrapper>
-						<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
-									)}
-									style={$appStore.css?.['app']?.['viewer']?.style}
-								>
+		{#if previewing}
+			<SplitPanesWrapper>
+				<div
+					class={twMerge('h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
+					style={$appStore.css?.['app']?.['viewer']?.style}
+				>
+					<AppPreview
+						workspace={$workspaceStore ?? ''}
+						summary={$summaryStore}
+						app={$appStore}
+						appPath={path}
+						{breakpoint}
+						{policy}
+						isEditor
+						{context}
+						noBackend={false}
+					/>
+				</div>
+			</SplitPanesWrapper>
+		{:else}
+			<SplitPanesWrapper>
+				<Splitpanes class="max-w-full overflow-hidden">
+					<Pane size={15} minSize={5} maxSize={33}>
+						<ContextPanel />
+					</Pane>
+					<Pane size={64}>
+						<SplitPanesWrapper>
+							<Splitpanes horizontal>
+								<Pane size={70}>
 									<div
-										class={classNames(
-											'relative mx-auto w-full h-full overflow-auto',
-											app.fullscreen ? '' : 'max-w-6xl'
+										on:pointerdown={(e) => {
+											$selectedComponent = undefined
+											$focusedGrid = undefined
+										}}
+										class={twMerge(
+											'bg-gray-100 h-full w-full',
+											$appStore.css?.['app']?.['viewer']?.class
 										)}
+										style={$appStore.css?.['app']?.['viewer']?.style}
 									>
-										{#if $appStore.grid}
-											<ComponentNavigation />
+										<div
+											class={classNames(
+												'relative mx-auto w-full h-full overflow-auto',
+												app.fullscreen ? '' : 'max-w-6xl'
+											)}
+										>
+											{#if $appStore.grid}
+												<ComponentNavigation />
 
-											<div on:pointerdown|stopPropagation class={width}>
-												<GridEditor {policy} />
-											</div>
+												<div on:pointerdown|stopPropagation class={width}>
+													<GridEditor {policy} />
+												</div>
 
-											<div id="app-editor-top-level-drawer" />
-										{/if}
+												<div id="app-editor-top-level-drawer" />
+											{/if}
+										</div>
 									</div>
+								</Pane>
+								<Pane size={$connectingInput?.opened ? 0 : 30}>
+									<div class="relative h-full w-full">
+										<InlineScriptsPanel />
+									</div>
+								</Pane>
+							</Splitpanes>
+						</SplitPanesWrapper>
+					</Pane>
+					<Pane size={21} minSize={5} maxSize={33}>
+						<div class="relative flex flex-col h-full">
+							<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">
+									<div class="m-1 center-center gap-2">
+										<Icon data={faSliders} />
+										<span>Settings</span>
+									</div>
+								</Tab>
+								<Tab value="css" size="xs">
+									<div class="m-1 center-center gap-2">
+										<Icon data={faCode} />
+										<span>CSS</span>
+									</div>
+								</Tab>
+								<div slot="content" class="h-full overflow-y-auto pb-4">
+									<TabContent class="overflow-auto h-full" value="settings">
+										{#if $selectedComponent !== undefined}
+											<SettingsPanel />
+										{:else}
+											<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
+												Select a component to see the settings&nbsp;for&nbsp;it
+											</div>
+										{/if}
+									</TabContent>
+									<TabContent value="insert">
+										<ComponentList />
+									</TabContent>
+									<TabContent value="css">
+										<CssSettings />
+									</TabContent>
 								</div>
-							</Pane>
-							<Pane size={$connectingInput?.opened ? 0 : 30}>
-								<div class="relative h-full w-full">
-									<InlineScriptsPanel />
-								</div>
-							</Pane>
-						</Splitpanes>
-					</SplitPanesWrapper>
-				</Pane>
-				<Pane size={21} minSize={5} maxSize={33}>
-					<div class="relative flex flex-col h-full">
-						<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">
-								<div class="m-1 center-center gap-2">
-									<Icon data={faSliders} />
-									<span>Settings</span>
-								</div>
-							</Tab>
-							<Tab value="css" size="xs">
-								<div class="m-1 center-center gap-2">
-									<Icon data={faCode} />
-									<span>CSS</span>
-								</div>
-							</Tab>
-							<div slot="content" class="h-full overflow-y-auto pb-4">
-								<TabContent class="overflow-auto" value="settings">
-									{#if $selectedComponent !== undefined}
-										<SettingsPanel />
-									{:else}
-										<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
-											Select a component to see the settings&nbsp;for&nbsp;it
-										</div>
-									{/if}
-								</TabContent>
-								<TabContent value="insert">
-									<ComponentList />
-								</TabContent>
-								<TabContent value="css">
-									<CssSettings />
-								</TabContent>
-							</div>
-						</Tabs>
-						{#if $connectingInput.opened}
-							<div
-								class="fixed top-32  p-2 z-50 flex justify-center items-center"
-								transition:fly|local={{ duration: 100, y: -100 }}
-							>
-								<Alert title="Connecting" type="info">
-									<div class="flex gap-2 flex-col">
-										Click on the output of the component you want to connect to on the left panel.
-										<div>
-											<Button
-												color="blue"
-												variant="border"
-												size="xs"
-												on:click={() => {
-													$connectingInput.opened = false
-													$connectingInput.input = undefined
-												}}
-											>
-												Stop connecting
-											</Button>
+							</Tabs>
+							{#if $connectingInput.opened}
+								<div
+									class="fixed top-32  p-2 z-50 flex justify-center items-center"
+									transition:fly|local={{ duration: 100, y: -100 }}
+								>
+									<Alert title="Connecting" type="info">
+										<div class="flex gap-2 flex-col">
+											Click on the output of the component you want to connect to on the left panel.
+											<div>
+												<Button
+													color="blue"
+													variant="border"
+													size="xs"
+													on:click={() => {
+														$connectingInput.opened = false
+														$connectingInput.input = undefined
+													}}
+												>
+													Stop connecting
+												</Button>
+											</div>
 										</div>
-									</div>
-								</Alert>
-							</div>
-						{/if}
-					</div>
-				</Pane>
-			</Splitpanes>
-		</SplitPanesWrapper>
+									</Alert>
+								</div>
+							{/if}
+						</div>
+					</Pane>
+				</Splitpanes>
+			</SplitPanesWrapper>
+		{/if}
+	{:else}
+		App is null
 	{/if}
 {:else}
 	App editor not available to operators