windmill-components 1.85.0 → 1.87.0

package/dist/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -0,0 +1,89 @@
+<script>import { getContext } from 'svelte';
+import SplitPanesWrapper from '../../../splitPanes/SplitPanesWrapper.svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
+import InlineScriptEditor from './InlineScriptEditor.svelte';
+import EmptyInlineScript from './EmptyInlineScript.svelte';
+import InlineScriptsPanelWithTable from './InlineScriptsPanelWithTable.svelte';
+import { findGridItem } from '../appUtils';
+const { app, runnableComponents } = getContext('AppViewerContext');
+const { selectedComponentInEditor } = getContext('AppEditorContext');
+function deleteBackgroundScript(index) {
+    // remove the script from the array at the index
+    if ($app.hiddenInlineScripts.length - 1 == index) {
+        $app.hiddenInlineScripts.splice(index, 1);
+        $app.hiddenInlineScripts = [...$app.hiddenInlineScripts];
+    }
+    else {
+        $app.hiddenInlineScripts[index].inlineScript = undefined;
+        $app.hiddenInlineScripts[index].name = `Background Script ${index}`;
+        $app.hiddenInlineScripts = $app.hiddenInlineScripts;
+    }
+    delete $runnableComponents[`bg_${index}`];
+}
+$: gridItem =
+    $selectedComponentInEditor && !$selectedComponentInEditor.startsWith('bg_')
+        ? findGridItem($app, $selectedComponentInEditor?.split('_')?.[0])
+        : undefined;
+$: hiddenInlineScript = $app?.hiddenInlineScripts?.findIndex((k_, index) => `bg_${index}` === $selectedComponentInEditor);
+$: unusedInlineScript = $app?.unusedInlineScripts?.findIndex((k_, index) => `unused-${index}` === $selectedComponentInEditor);
+</script>
+
+<SplitPanesWrapper>
+	<Splitpanes class="!overflow-visible">
+		<Pane size={25}>
+			<InlineScriptsPanelList />
+		</Pane>
+		<Pane size={75}>
+			{#if !$selectedComponentInEditor}
+				<div class="text-sm text-gray-500 text-center py-8 px-2">
+					Select a script on the left panel
+				</div>
+			{:else if gridItem}
+				{#key gridItem?.id}
+					<InlineScriptsPanelWithTable bind:gridItem />
+				{/key}
+			{:else if unusedInlineScript > -1 && $app.unusedInlineScripts?.[unusedInlineScript]}
+				{#key unusedInlineScript}
+					<InlineScriptEditor
+						id={`unused-${unusedInlineScript}`}
+						bind:name={$app.unusedInlineScripts[unusedInlineScript].name}
+						bind:inlineScript={$app.unusedInlineScripts[unusedInlineScript].inlineScript}
+						on:delete={() => {
+							// remove the script from the array at the index
+							$app.unusedInlineScripts.splice(unusedInlineScript, 1)
+							$app.unusedInlineScripts = [...$app.unusedInlineScripts]
+						}}
+					/>
+				{/key}
+			{:else if hiddenInlineScript > -1}
+				{#key hiddenInlineScript}
+					{#if $app.hiddenInlineScripts?.[hiddenInlineScript]?.inlineScript}
+						<InlineScriptEditor
+							id={`bg_${hiddenInlineScript}`}
+							bind:inlineScript={$app.hiddenInlineScripts[hiddenInlineScript].inlineScript}
+							bind:name={$app.hiddenInlineScripts[hiddenInlineScript].name}
+							bind:fields={$app.hiddenInlineScripts[hiddenInlineScript].fields}
+							syncFields
+							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
+						/>
+					{:else}
+						<EmptyInlineScript
+							name={$app.hiddenInlineScripts[hiddenInlineScript].name}
+							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
+							on:new={(e) => {
+								if ($app.hiddenInlineScripts[hiddenInlineScript]) {
+									$app.hiddenInlineScripts[hiddenInlineScript].inlineScript = e.detail
+								}
+							}}
+						/>
+					{/if}
+				{/key}
+			{:else}
+				<div class="text-sm text-gray-500 text-center py-8 px-2">
+					No script found at id {$selectedComponentInEditor}
+				</div>
+			{/if}
+		</Pane>
+	</Splitpanes>
+</SplitPanesWrapper>

package/dist/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte

@@ -0,0 +1,75 @@
+<script>import { ToggleButton, ToggleButtonGroup } from '../../../common';
+import { faArrowRight, faCode, faPen } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+export let componentInput;
+export let disableStatic = false;
+const { onchange } = getContext('AppViewerContext');
+$: if (componentInput.fieldType == 'template' && componentInput.type == 'static') {
+    //@ts-ignore
+    componentInput.type = 'template';
+    componentInput['eval'] = componentInput.value;
+}
+const brackets = '${}';
+let clientWidth;
+</script>
+
+{#if componentInput.fieldType !== 'any'}
+	<div class="w-full">
+		<div class="mx-auto" bind:clientWidth>
+			<ToggleButtonGroup on:selected={() => onchange?.()} bind:selected={componentInput.type}>
+				{#if componentInput.fieldType === 'template'}
+					<ToggleButton
+						title={`Templated string (use \$\{<output>.x\} )`}
+						position="left"
+						value="template"
+						size="xs"
+						disable={disableStatic}
+					>
+						<span class="font-mono text-2xs h-3 -mt-0.5">
+							{brackets}
+						</span>
+						{#if clientWidth > 250}
+							&nbsp;Template
+						{/if}
+					</ToggleButton>
+				{:else}
+					<ToggleButton
+						title="Static"
+						position="left"
+						value="static"
+						startIcon={{ icon: faPen }}
+						size="xs"
+						disable={disableStatic}
+					>
+						{#if clientWidth > 250}
+							Static
+						{/if}
+					</ToggleButton>
+				{/if}
+
+				<ToggleButton
+					title="Connect to an output"
+					value="connected"
+					position="center"
+					startIcon={{ icon: faArrowRight }}
+					size="xs"
+				>
+					{#if clientWidth > 250}
+						Connect
+					{/if}
+				</ToggleButton>
+				<ToggleButton
+					title="Compute it with a script/flow"
+					position="right"
+					value="runnable"
+					startIcon={{ icon: faCode }}
+					size="xs"
+				>
+					{#if clientWidth > 250}
+						Compute
+					{/if}
+				</ToggleButton>
+			</ToggleButtonGroup>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,293 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import PanelSection from './common/PanelSection.svelte';
+import InputsSpecsEditor from './InputsSpecsEditor.svelte';
+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, getModifierKey, isMac } from '../../../../utils';
+import { buildExtraLib, fieldTypeToTsType } from '../../utils';
+import Recompute from './Recompute.svelte';
+import Tooltip from '../../../Tooltip.svelte';
+import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
+import AlignmentEditor from './AlignmentEditor.svelte';
+import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte';
+import TemplateEditor from '../../../TemplateEditor.svelte';
+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;
+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() {
+    push(history, $app);
+    if (componentSettings?.item.id) {
+        delete $worldStore.outputsById[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);
+        }
+    }
+    $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 =
+    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>
+
+<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 title="Data Source">
+				<svelte:fragment slot="action">
+					<span
+						class={classNames(
+							'text-white px-2 text-2xs py-0.5 font-bold rounded-sm w-fit',
+							'bg-indigo-500'
+						)}
+					>
+						{`${component.id}`}
+					</span>
+					{#if component.componentInput.fieldType !== 'any'}
+						<Badge color="blue">
+							{component.componentInput.fieldType === 'array' &&
+							component.componentInput.subFieldType
+								? `${capitalize(fieldTypeToTsType(component.componentInput.subFieldType))}[]`
+								: capitalize(fieldTypeToTsType(component.componentInput.fieldType))}
+						</Badge>
+					{/if}
+				</svelte:fragment>
+
+				{#if componentSettings.item.data.componentInput}
+					<ComponentInputTypeEditor
+						bind:componentInput={componentSettings.item.data.componentInput}
+					/>
+
+					<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'}
+							/>
+						{/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(initialConfiguration).length > 0}
+			<PanelSection title={`Configuration (${Object.values(initialConfiguration).length})`}>
+				<InputsSpecsEditor
+					{rowColumns}
+					id={component.id}
+					inputSpecsConfiguration={initialConfiguration}
+					bind:inputSpecs={componentSettings.item.data.configuration}
+					userInputEnabled={false}
+				/>
+			</PanelSection>
+		{:else}
+			<div class="h-full w-full text-sm text-gray-500 text-center py-8 px-2"
+				>{ccomponents[component.type].name} has no configuration</div
+			>
+		{/if}
+
+		{#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}
+
+		{#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}
+
+		<div class="grow shrink" />
+		<AlignmentEditor bind:component={componentSettings.item.data} />
+
+		{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
+			<PanelSection title="Styling">
+				<div slot="action" class="flex justify-end flex-wrap gap-1">
+					<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/dist/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -0,0 +1,140 @@
+<script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
+import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
+import { faArrowRight, faPen, faUpload, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fieldTypeToTsType } from '../../utils';
+import Tooltip from '../../../Tooltip.svelte';
+import Popover from '../../../Popover.svelte';
+import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
+import EvalInputEditor from './inputEditor/EvalInputEditor.svelte';
+import RowInputEditor from './inputEditor/RowInputEditor.svelte';
+import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
+import UploadInputEditor from './inputEditor/UploadInputEditor.svelte';
+import { getContext } from 'svelte';
+export let id;
+export let componentInput;
+export let key;
+export let hasRows = false;
+export let userInputEnabled = false;
+export let shouldCapitalize = true;
+export let resourceOnly = false;
+export let tooltip = undefined;
+export let onlyStatic = false;
+export let fieldType;
+export let subFieldType;
+export let format;
+export let selectOptions;
+export let fileUpload = undefined;
+export let placeholder;
+const { connectingInput } = getContext('AppViewerContext');
+$: if (componentInput == undefined) {
+    //@ts-ignore
+    componentInput = {
+        type: 'static',
+        value: undefined
+    };
+}
+</script>
+
+{#if !(resourceOnly && (fieldType !== 'object' || !format?.startsWith('resource-')))}
+	<div class="flex flex-col gap-1">
+		<div class="flex justify-between items-end gap-1">
+			<span class="text-sm font-semibold truncate">
+				{shouldCapitalize ? capitalize(addWhitespaceBeforeCapitals(key)) : key}
+				{#if tooltip}
+					<Tooltip>
+						{tooltip}
+					</Tooltip>
+				{/if}
+			</span>
+
+			<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
+				<Badge color="blue">
+					{fieldType === 'array' && subFieldType
+						? `${capitalize(fieldTypeToTsType(subFieldType))}[]`
+						: capitalize(fieldTypeToTsType(fieldType))}
+				</Badge>
+
+				{#if !onlyStatic && componentInput?.type && componentInput.type != 'eval'}
+					<ToggleButtonGroup
+						bind:selected={componentInput.type}
+						on:selected={(e) => {
+							if (e.detail == 'connected' && !componentInput['connection']) {
+								$connectingInput = {
+									opened: true,
+									input: undefined,
+									hoveredComponent: undefined
+								}
+							}
+						}}
+					>
+						<Popover placement="bottom" notClickable disapperTimoout={0}>
+							<ToggleButton
+								position="left"
+								value="static"
+								startIcon={{ icon: faPen }}
+								size="xs"
+								iconOnly
+							/>
+							<svelte:fragment slot="text">Static</svelte:fragment>
+						</Popover>
+						{#if userInputEnabled && !format?.startsWith('resource-')}
+							<Popover placement="bottom" notClickable disapperTimoout={0}>
+								<ToggleButton
+									position="center"
+									value="user"
+									startIcon={{ icon: faUser }}
+									size="xs"
+									iconOnly
+								/>
+								<svelte:fragment slot="text">User Input</svelte:fragment>
+							</Popover>
+						{/if}
+						{#if fileUpload}
+							<Popover placement="bottom" notClickable disapperTimoout={0}>
+								<ToggleButton
+									position="center"
+									value="upload"
+									startIcon={{ icon: faUpload }}
+									size="xs"
+									iconOnly
+								/>
+								<svelte:fragment slot="text">Upload</svelte:fragment>
+							</Popover>
+						{/if}
+						<Popover placement="bottom" notClickable disapperTimoout={0}>
+							<ToggleButton
+								position="right"
+								value="connected"
+								startIcon={{ icon: faArrowRight }}
+								size="xs"
+								iconOnly
+							/>
+							<svelte:fragment slot="text">Connect</svelte:fragment>
+						</Popover>
+					</ToggleButtonGroup>
+				{/if}
+			</div>
+		</div>
+
+		{#if componentInput?.type === 'connected'}
+			<ConnectedInputEditor bind:componentInput />
+		{:else if componentInput?.type === 'row'}
+			<RowInputEditor bind:componentInput />
+		{:else if componentInput?.type === 'static'}
+			<StaticInputEditor
+				{fieldType}
+				{subFieldType}
+				{selectOptions}
+				{format}
+				{placeholder}
+				bind:componentInput
+			/>
+		{:else if componentInput?.type === 'eval'}
+			<EvalInputEditor {hasRows} {id} bind:componentInput />
+		{:else if componentInput?.type === 'upload'}
+			<UploadInputEditor bind:componentInput {fileUpload} />
+		{:else if componentInput?.type === 'user'}
+			<span class="text-2xs italic text-gray-600">Field's value is set by the user</span>
+		{/if}
+	</div>
+{/if}

package/dist/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
+import type { InputType, UploadAppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: RichConfiguration;
+        key: string;
+        hasRows?: boolean | undefined;
+        userInputEnabled?: boolean | undefined;
+        shouldCapitalize?: boolean | undefined;
+        resourceOnly?: boolean | undefined;
+        tooltip?: string | undefined;
+        onlyStatic?: boolean | undefined;
+        fieldType: InputType;
+        subFieldType: InputType | undefined;
+        format: string | undefined;
+        selectOptions: string[] | undefined;
+        fileUpload?: UploadAppInput['fileUpload'] | undefined;
+        placeholder: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputsSpecEditorProps = typeof __propDef.props;
+export type InputsSpecEditorEvents = typeof __propDef.events;
+export type InputsSpecEditorSlots = typeof __propDef.slots;
+export default class InputsSpecEditor extends SvelteComponentTyped<InputsSpecEditorProps, InputsSpecEditorEvents, InputsSpecEditorSlots> {
+}
+export {};

package/dist/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -0,0 +1,51 @@
+<script>import InputsSpecEditor from './InputsSpecEditor.svelte';
+import OneOfInputSpecsEditor from './OneOfInputSpecsEditor.svelte';
+export let id;
+export let inputSpecs;
+export let inputSpecsConfiguration = inputSpecs;
+export let userInputEnabled = false;
+export let shouldCapitalize = true;
+export let rowColumns = false;
+export let resourceOnly = false;
+</script>
+
+{#if inputSpecs}
+	<div class="w-full flex flex-col gap-4">
+		{#each Object.keys(inputSpecsConfiguration) as k}
+			{#if inputSpecsConfiguration[k]?.type == 'oneOf'}
+				<OneOfInputSpecsEditor
+					key={k}
+					bind:oneOf={inputSpecs[k]}
+					{id}
+					{shouldCapitalize}
+					{resourceOnly}
+					{rowColumns}
+					inputSpecsConfiguration={inputSpecsConfiguration?.[k]?.['configuration']}
+					labels={inputSpecsConfiguration?.[k]?.['labels']}
+					tooltip={inputSpecsConfiguration?.[k]?.['tooltip']}
+				/>
+			{:else}
+				{@const meta = inputSpecsConfiguration?.[k]}
+				<InputsSpecEditor
+					key={k}
+					bind:componentInput={inputSpecs[k]}
+					{id}
+					{userInputEnabled}
+					{shouldCapitalize}
+					{resourceOnly}
+					hasRows={rowColumns}
+					fieldType={meta?.['fieldType']}
+					subFieldType={meta?.['subFieldType']}
+					format={meta?.['format']}
+					selectOptions={meta?.['selectOptions']}
+					tooltip={meta?.['tooltip']}
+					onlyStatic={meta?.['onlyStatic']}
+					fileUpload={meta?.['fileUpload']}
+					placeholder={meta?.['placeholder']}
+				/>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<div class="text-gray-500 text-sm">No inputs</div>
+{/if}