windmill-components 1.60.3 → 1.83.1

package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -1,5 +1,5 @@
 <script>import Button from '../../../common/button/Button.svelte';
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
 import InputsSpecsEditor from './InputsSpecsEditor.svelte';
@@ -7,7 +7,7 @@ import TableActions from './TableActions.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
 import Badge from '../../../common/badge/Badge.svelte';
-import { capitalize, classNames } from '../../../../utils';
+import { capitalize, classNames, getModifierKey, isMac } from '../../../../utils';
 import { buildExtraLib, fieldTypeToTsType } from '../../utils';
 import Recompute from './Recompute.svelte';
 import Tooltip from '../../../Tooltip.svelte';
@@ -15,58 +15,78 @@ import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
 import AlignmentEditor from './AlignmentEditor.svelte';
 import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte';
 import TemplateEditor from '../../../TemplateEditor.svelte';
-export let component;
-export let onDelete = undefined;
+import { ccomponents } from '../component';
+import CssProperty from '../componentsPanel/CssProperty.svelte';
+import GridTab from './GridTab.svelte';
+import { clearErrorByComponentId, clearJobsByComponentId, deleteGridItem } from '../appUtils';
+import GridPane from './GridPane.svelte';
+import { slide } from 'svelte/transition';
+import { push } from '../../../../history';
+import Kbd from '../../../common/kbd/Kbd.svelte';
+import { secondaryMenu } from './secondaryMenu';
+import StylePanel from './StylePanel.svelte';
+import { Delete } from 'lucide-svelte';
+export let componentSettings = undefined;
 export let rowColumns = false;
-const { app, staticOutputs, runnableComponents, selectedComponent, worldStore } = getContext('AppEditorContext');
+export let onDelete = undefined;
+export let noGrid = false;
+export let duplicateMoveAllowed = true;
+let editor = undefined;
+const { app, runnableComponents, selectedComponent, worldStore, focusedGrid, stateId, state, errorByComponent, jobs } = getContext('AppViewerContext');
+const { history, ontextfocus, movingcomponents } = getContext('AppEditorContext');
+$: editor && ($ontextfocus = () => editor?.focus());
 function removeGridElement() {
-    $selectedComponent = undefined;
-    if (onDelete && component) {
-        delete $staticOutputs[component.id];
-        $staticOutputs = $staticOutputs;
-        delete $runnableComponents[component.id];
-        $runnableComponents = $runnableComponents;
-        onDelete();
-        // Delete static inputs
-    }
-    else {
-        if (component) {
-            $app.grid = $app.grid.filter((gridComponent) => gridComponent.data.id !== component?.id);
-            // Delete static inputs
-            delete $staticOutputs[component.id];
-            $staticOutputs = $staticOutputs;
-            delete $runnableComponents[component.id];
-            $runnableComponents = $runnableComponents;
+    push(history, $app);
+    if (componentSettings?.item.id) {
+        $errorByComponent = clearErrorByComponentId(componentSettings?.item.id, $errorByComponent);
+        $jobs = clearJobsByComponentId(componentSettings?.item.id, $jobs);
+        if ($movingcomponents?.includes(componentSettings?.item.id)) {
+            $movingcomponents = $movingcomponents.filter((id) => id !== componentSettings?.item.id);
         }
     }
-    if (component &&
-        component.componentInput?.type === 'runnable' &&
-        component.componentInput?.runnable?.type === 'runnableByName') {
-        const { name, inlineScript } = component.componentInput.runnable;
-        if (inlineScript) {
-            if (!$app.unusedInlineScripts) {
-                $app.unusedInlineScripts = [];
-            }
-            $app.unusedInlineScripts.push({
-                name,
-                inlineScript
-            });
+    $selectedComponent = undefined;
+    $focusedGrid = undefined;
+    if (componentSettings?.item && !noGrid) {
+        let ids = deleteGridItem($app, componentSettings?.item.data, componentSettings?.parent, false);
+        for (const key of ids) {
+            delete $runnableComponents[key];
         }
     }
+    if (componentSettings?.item?.data?.id) {
+        delete $runnableComponents[componentSettings?.item?.data?.id];
+    }
+    $app = $app;
+    $runnableComponents = $runnableComponents;
+    onDelete?.();
 }
+let viewCssOptions = false;
 $: extraLib =
-    component?.componentInput?.type === 'template' && $worldStore
-        ? buildExtraLib($worldStore?.outputsById ?? {}, component?.id, false)
+    componentSettings?.item?.data?.componentInput?.type === 'template' && $worldStore
+        ? buildExtraLib($worldStore?.outputsById ?? {}, componentSettings?.item?.data?.id, false, $state, false)
         : undefined;
+function keydown(event) {
+    const { key, metaKey } = event;
+    if (key === 'Delete' || (key === 'Backspace' && metaKey)) {
+        removeGridElement();
+        event.stopPropagation();
+    }
+}
+const initialConfiguration = componentSettings?.item?.data?.type
+    ? ccomponents[componentSettings.item.data.type].initialData.configuration
+    : {};
+const componentInput = componentSettings?.item?.data?.type
+    ? ccomponents[componentSettings?.item?.data?.type].initialData.componentInput
+    : undefined;
+$: componentSettings?.item?.data && ($app = $app);
 </script>
 
-{#if component}
-	<div class="flex flex-col min-w-[150px] w-full divide-y">
+<svelte:window on:keydown={keydown} />
+
+{#if componentSettings?.item?.data}
+	{@const component = componentSettings.item.data}
+	<div class="flex min-h-full flex-col min-w-[150px] w-full divide-y">
 		{#if component.componentInput}
-			<PanelSection
-				smallPadding
-				title={component.componentInput.fieldType === 'any' ? 'By Runnable' : 'Input'}
-			>
+			<PanelSection title="Data Source">
 				<svelte:fragment slot="action">
 					<span
 						class={classNames(
@@ -86,82 +106,187 @@ $: extraLib =
 					{/if}
 				</svelte:fragment>
 
-				<ComponentInputTypeEditor bind:componentInput={component.componentInput} />
+				{#if componentSettings.item.data.componentInput}
+					<ComponentInputTypeEditor
+						bind:componentInput={componentSettings.item.data.componentInput}
+					/>
 
-				<div class="flex flex-col w-full gap-2 my-2">
-					{#if component.componentInput.type === 'static'}
-						<StaticInputEditor bind:componentInput={component.componentInput} />
-					{:else if component.componentInput.type === 'template' && component.componentInput !== undefined}
-						<div class="py-1 min-h-[28px]  rounded border border-1 border-gray-500">
-							<TemplateEditor fontSize={12} bind:code={component.componentInput.eval} {extraLib} />
-						</div>
-					{:else if component.componentInput.type === 'connected' && component.componentInput !== undefined}
-						<ConnectedInputEditor bind:componentInput={component.componentInput} />
-					{:else if component.componentInput?.type === 'runnable' && component.componentInput !== undefined}
-						<RunnableInputEditor
-							bind:appInput={component.componentInput}
-							defaultUserInput={component.type == 'formcomponent'}
-						/>
-					{/if}
-				</div>
-				{#if component.componentInput?.type === 'runnable' && Object.keys(component.componentInput.fields ?? {}).length > 0}
-					<div class="border w-full">
-						<PanelSection
-							smallPadding
-							title={`Runnable Inputs (${
-								Object.keys(component.componentInput.fields ?? {}).length
-							})`}
-						>
-							<svelte:fragment slot="action">
-								<Tooltip>
-									The runnable inputs of a button component are not settable by the user. They must
-									be defined statically or connected.
-								</Tooltip>
-							</svelte:fragment>
-
-							<InputsSpecsEditor
-								id={component.id}
-								shouldCapitalize={false}
-								bind:inputSpecs={component.componentInput.fields}
-								userInputEnabled={component.type !== 'buttoncomponent'}
-								{rowColumns}
+					<div class="flex flex-col w-full gap-2 my-2">
+						{#if componentSettings.item.data.componentInput.type === 'static'}
+							<StaticInputEditor
+								fieldType={componentInput?.fieldType}
+								subFieldType={componentInput?.subFieldType}
+								format={componentInput?.format}
+								bind:componentInput={componentSettings.item.data.componentInput}
+								noVariablePicker
+							/>
+						{:else if componentSettings.item.data.componentInput.type === 'template' && componentSettings.item.data.componentInput !== undefined}
+							<div class="py-1 min-h-[28px]  rounded border border-1 border-gray-500">
+								<TemplateEditor
+									bind:this={editor}
+									fontSize={12}
+									bind:code={componentSettings.item.data.componentInput.eval}
+									{extraLib}
+								/>
+							</div>
+						{:else if componentSettings.item.data.componentInput.type === 'connected' && component.componentInput !== undefined}
+							<ConnectedInputEditor
+								bind:componentInput={componentSettings.item.data.componentInput}
+							/>
+						{:else if componentSettings.item.data.componentInput?.type === 'runnable' && component.componentInput !== undefined}
+							<RunnableInputEditor
+								appComponent={component}
+								bind:appInput={componentSettings.item.data.componentInput}
+								defaultUserInput={component.type == 'formcomponent' ||
+									component.type == 'formbuttoncomponent'}
 							/>
-						</PanelSection>
+						{/if}
 					</div>
 				{/if}
+				{#key $stateId}
+					{#if componentSettings.item.data.componentInput?.type === 'runnable'}
+						{#if Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length > 0}
+							<div class="border w-full">
+								<PanelSection
+									title={`Runnable Inputs (${
+										Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length
+									})`}
+								>
+									<svelte:fragment slot="action">
+										<Tooltip>
+											The runnable inputs of a button component are not settable by the user. They
+											must be defined statically or connected.
+										</Tooltip>
+									</svelte:fragment>
+
+									<InputsSpecsEditor
+										id={component.id}
+										shouldCapitalize={false}
+										bind:inputSpecs={componentSettings.item.data.componentInput.fields}
+										userInputEnabled={component.type === 'formcomponent' ||
+											component.type === 'formbuttoncomponent'}
+										{rowColumns}
+									/>
+								</PanelSection>
+							</div>
+						{/if}
+					{/if}
+				{/key}
 			</PanelSection>
 		{/if}
-
-		{#if Object.values(component.configuration).length > 0}
-			<PanelSection title={`Configuration (${Object.values(component.configuration).length})`}>
+		{#if Object.values(initialConfiguration).length > 0}
+			<PanelSection title={`Configuration (${Object.values(initialConfiguration).length})`}>
 				<InputsSpecsEditor
 					{rowColumns}
 					id={component.id}
-					bind:inputSpecs={component.configuration}
+					inputSpecsConfiguration={initialConfiguration}
+					bind:inputSpecs={componentSettings.item.data.configuration}
 					userInputEnabled={false}
 				/>
 			</PanelSection>
+		{:else}
+			<div class="h-full w-full font-bold text-gray-400 text-lg py-10 px-4"
+				>{ccomponents[component.type].name} has no configuration</div
+			>
 		{/if}
 
-		{#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}
-			<TableActions id={component.id} bind:components={component.actionButtons} />
+		{#if componentSettings.item.data.type === 'tabscomponent'}
+			<GridTab bind:tabs={componentSettings.item.data.tabs} {component} />
+		{:else if componentSettings.item.data.type === 'verticalsplitpanescomponent' || componentSettings.item.data.type === 'horizontalsplitpanescomponent'}
+			<GridPane bind:panes={componentSettings.item.data.panes} {component} />
+		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actionButtons} />
 		{/if}
 
-		<AlignmentEditor bind:component />
-		{#if component.type === 'buttoncomponent' || component.type === 'formcomponent'}
-			<Recompute bind:recomputeIds={component.recomputeIds} ownId={component.id} />
+		<AlignmentEditor bind:component={componentSettings.item.data} />
+		{#if componentSettings.item.data.type === 'buttoncomponent' || componentSettings.item.data.type === 'formcomponent' || componentSettings.item.data.type === 'formbuttoncomponent'}
+			<Recompute
+				bind:recomputeIds={componentSettings.item.data.recomputeIds}
+				ownId={component.id}
+			/>
 		{/if}
 
-		<PanelSection title="Danger zone">
-			<Button
-				size="xs"
-				color="red"
-				variant="border"
-				startIcon={{ icon: faTrashAlt }}
-				on:click={removeGridElement}
-			>
-				Delete component: {component.id}
-			</Button>
-		</PanelSection>
+		<div class="grow shrink" />
+
+		{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
+			<PanelSection title="Styling">
+				<div slot="action">
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						on:click={() => (viewCssOptions = !viewCssOptions)}
+					>
+						{viewCssOptions ? 'Hide' : 'Show'}
+					</Button>
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						endIcon={{ icon: faChevronRight }}
+						on:click={() => secondaryMenu.open(StylePanel, { component })}
+					>
+						Rich Editor
+					</Button>
+				</div>
+				{#if viewCssOptions}
+					<div transition:slide|local class="w-full">
+						{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
+							{#if componentSettings.item.data?.customCss != undefined}
+								<div class="w-full mb-2">
+									<CssProperty
+										forceStyle={ccomponents[component.type].customCss[name].style != undefined}
+										forceClass={ccomponents[component.type].customCss[name].class != undefined}
+										{name}
+										bind:value={componentSettings.item.data.customCss[name]}
+									/>
+								</div>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+			</PanelSection>
+		{/if}
+
+		{#if duplicateMoveAllowed}
+			<PanelSection title="Copy/Move">
+				<div slot="action">
+					<Button size="xs" color="red" variant="border" on:click={removeGridElement}>
+						Delete&nbsp;&nbsp;
+						{#if isMac()}
+							<Kbd kbdClass="center-center">
+								<span class="text-lg leading-none">⌘</span>
+								<span class="px-0.5">+</span>
+								<Delete size={16} />
+							</Kbd>
+						{:else}
+							<Kbd>Del</Kbd>
+						{/if}
+					</Button>
+				</div>
+				<div class="flex flex-col gap-1">
+					<div>
+						<span class="text-gray-600 text-xs mr-2"> Copy:</span>
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>C</Kbd>,
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
+					</div>
+					<div>
+						<span class="text-gray-600 text-xs mr-2">Move: </span>
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>X</Kbd>,
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
+					</div>
+					<div>
+						<span class="text-gray-600 text-xs mr-2">Navigate:</span>
+						<Kbd>&leftarrow;</Kbd>
+						<Kbd>&uparrow;</Kbd><Kbd>&rightarrow;</Kbd>
+						<Kbd>ESC</Kbd>
+					</div>
+					<div>
+						<span class="text-gray-600 text-xs mr-2">Add to selection:</span>
+						<Kbd>&DoubleUpArrow;</Kbd>+<Kbd>click</Kbd>
+					</div>
+				</div>
+			</PanelSection>
+		{/if}
 	</div>
 {/if}

package/components/apps/editor/settingsPanel/ComponentPanel.svelte.d.ts

@@ -1,10 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from '../../types';
+import type { GridItem } from '../../types';
 declare const __propDef: {
     props: {
-        component: AppComponent | undefined;
-        onDelete?: (() => void) | undefined;
+        componentSettings?: {
+            item: GridItem;
+            parent: string | undefined;
+        } | undefined;
         rowColumns?: boolean | undefined;
+        onDelete?: (() => void) | undefined;
+        noGrid?: boolean | undefined;
+        duplicateMoveAllowed?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/GridPane.svelte

@@ -0,0 +1,73 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { deleteGridItem } from '../appUtils';
+import PanelSection from './common/PanelSection.svelte';
+export let panes;
+export let component;
+const { app, runnableComponents } = getContext('AppViewerContext');
+function addTab() {
+    const numberOfPanes = panes.length;
+    panes = Array(panes.length + 1)
+        .fill(0)
+        .map((_) => Math.floor(100 / (panes.length + 1)));
+    if (!$app.subgrids) {
+        $app.subgrids = {};
+    }
+    $app.subgrids[`${component.id}-${numberOfPanes}`] = [];
+    component.numberOfSubgrids = panes.length;
+}
+function deleteSubgrid(index) {
+    let subgrid = `${component.id}-${index}`;
+    for (const item of $app.subgrids[subgrid]) {
+        const components = deleteGridItem($app, item.data, subgrid, false);
+        console.log(components);
+        for (const key in components) {
+            delete $runnableComponents[key];
+        }
+    }
+    $runnableComponents = $runnableComponents;
+    for (let i = index; i < panes.length - 1; i++) {
+        $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
+    }
+    panes.splice(index, 1);
+    panes = panes;
+    component.numberOfSubgrids = panes.length;
+    $app = $app;
+}
+</script>
+
+<PanelSection title={`panes ${panes.length > 0 ? `(${panes.length})` : ''}`}>
+	{#if panes.length == 0}
+		<span class="text-xs text-gray-500">No panes</span>
+	{/if}
+	<div class="w-full flex gap-2 flex-col mt-2">
+		{#each panes as value, index (index)}
+			<div class="w-full flex flex-row gap-2 items-center relative">
+				<input on:keydown|stopPropagation type="number" bind:value />
+
+				<div class="absolute top-1 right-1">
+					<Button
+						size="xs"
+						color="light"
+						variant="border"
+						on:click={() => {
+							deleteSubgrid(index)
+						}}
+						iconOnly
+						btnClasses="!text-red-500"
+						startIcon={{ icon: faTrashAlt }}
+					/>
+				</div>
+			</div>
+		{/each}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addTab}
+			iconOnly
+		/>
+	</div>
+</PanelSection>

package/components/apps/editor/settingsPanel/GridPane.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        panes: number[];
+        component: AppComponent;
+    };
+    events: {
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridPaneProps = typeof __propDef.props;
+export type GridPaneEvents = typeof __propDef.events;
+export type GridPaneSlots = typeof __propDef.slots;
+export default class GridPane extends SvelteComponentTyped<GridPaneProps, GridPaneEvents, GridPaneSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/GridTab.svelte

@@ -0,0 +1,61 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import CloseButton from '../../../common/CloseButton.svelte';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { deleteGridItem } from '../appUtils';
+import PanelSection from './common/PanelSection.svelte';
+export let tabs;
+export let component;
+const { app, runnableComponents } = getContext('AppViewerContext');
+function addTab() {
+    const numberOfTabs = tabs.length;
+    tabs = [...tabs, `Tab ${numberOfTabs + 1}`];
+    if (!$app.subgrids) {
+        $app.subgrids = {};
+    }
+    $app.subgrids[`${component.id}-${numberOfTabs}`] = [];
+    component.numberOfSubgrids = tabs.length;
+}
+function deleteSubgrid(index) {
+    let subgrid = `${component.id}-${index}`;
+    for (const item of $app.subgrids[subgrid]) {
+        const components = deleteGridItem($app, item.data, subgrid, false);
+        for (const key in components) {
+            delete $runnableComponents[key];
+        }
+    }
+    $runnableComponents = $runnableComponents;
+    for (let i = index; i < tabs.length - 1; i++) {
+        $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
+    }
+    tabs.splice(index, 1);
+    tabs = tabs;
+    component.numberOfSubgrids = tabs.length;
+    $app = $app;
+}
+</script>
+
+<PanelSection title={`Tabs ${tabs.length > 0 ? `(${tabs.length})` : ''}`}>
+	{#if tabs.length == 0}
+		<span class="text-xs text-gray-500">No Tabs</span>
+	{/if}
+	<div class="w-full flex gap-2 flex-col mt-2">
+		{#each tabs as value, index (index)}
+			<div class="w-full flex flex-row gap-2 items-center relative">
+				<input on:keydown|stopPropagation type="text" bind:value />
+
+				<div class="absolute right-1">
+					<CloseButton noBg on:close={() => deleteSubgrid(index)} />
+				</div>
+			</div>
+		{/each}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addTab}
+			iconOnly
+		/>
+	</div>
+</PanelSection>

package/components/apps/editor/settingsPanel/GridTab.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        tabs: string[];
+        component: AppComponent;
+    };
+    events: {
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridTabProps = typeof __propDef.props;
+export type GridTabEvents = typeof __propDef.events;
+export type GridTabSlots = typeof __propDef.slots;
+export default class GridTab extends SvelteComponentTyped<GridTabProps, GridTabEvents, GridTabSlots> {
+}
+export {};