windmill-components 1.79.0 → 1.82.0

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

@@ -1,5 +1,5 @@
 <script>import Button from '../../../common/button/Button.svelte';
-import { faChevronDown, faChevronUp, faCopy, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
 import InputsSpecsEditor from './InputsSpecsEditor.svelte';
@@ -15,42 +15,48 @@ 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 { deleteGridItem } from '../appUtils';
+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';
-export let component;
+export let componentSettings = undefined;
 export let rowColumns = false;
 export let onDelete = undefined;
-export let parent;
 export let noGrid = false;
 export let duplicateMoveAllowed = true;
 let editor = undefined;
-const { app, runnableComponents, selectedComponent, worldStore, focusedGrid, stateId, state } = getContext('AppViewerContext');
+const { app, runnableComponents, selectedComponent, worldStore, focusedGrid, stateId, state, errorByComponent, jobs } = getContext('AppViewerContext');
 const { history, ontextfocus } = getContext('AppEditorContext');
 $: editor && ($ontextfocus = () => editor?.focus());
 function removeGridElement() {
     push(history, $app);
+    if (componentSettings?.item.id) {
+        $errorByComponent = clearErrorByComponentId(componentSettings?.item.id, $errorByComponent);
+        $jobs = clearJobsByComponentId(componentSettings?.item.id, $jobs);
+    }
     $selectedComponent = undefined;
     $focusedGrid = undefined;
-    if (component && !noGrid) {
-        let ids = deleteGridItem($app, component, parent, false);
+    if (componentSettings?.item && !noGrid) {
+        let ids = deleteGridItem($app, componentSettings?.item.data, componentSettings?.parent, false);
         for (const key of ids) {
             delete $runnableComponents[key];
         }
     }
-    delete $runnableComponents[component.id];
+    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, $state, false)
+    componentSettings?.item?.data?.componentInput?.type === 'template' && $worldStore
+        ? buildExtraLib($worldStore?.outputsById ?? {}, componentSettings?.item?.data?.id, false, $state, false)
         : undefined;
 function keydown(event) {
     switch (event.key) {
@@ -61,14 +67,22 @@ function keydown(event) {
         }
     }
 }
+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 component}
+{#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={component.componentInput.fieldType === 'any' ? 'By Runnable' : 'Input'}>
+			<PanelSection title="Data Source">
 				<svelte:fragment slot="action">
 					<span
 						class={classNames(
@@ -88,37 +102,50 @@ function keydown(event) {
 					{/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
-								bind:this={editor}
-								fontSize={12}
-								bind:code={component.componentInput.eval}
-								{extraLib}
+					<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
 							/>
-						</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' ||
-								component.type == 'formbuttoncomponent'}
-						/>
-					{/if}
-				</div>
+						{: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 component.componentInput?.type === 'runnable'}
-						{#if Object.keys(component.componentInput.fields ?? {}).length > 0}
+					{#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(component.componentInput.fields ?? {}).length
+										Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length
 									})`}
 								>
 									<svelte:fragment slot="action">
@@ -131,7 +158,7 @@ function keydown(event) {
 									<InputsSpecsEditor
 										id={component.id}
 										shouldCapitalize={false}
-										bind:inputSpecs={component.componentInput.fields}
+										bind:inputSpecs={componentSettings.item.data.componentInput.fields}
 										userInputEnabled={component.type === 'formcomponent' ||
 											component.type === 'formbuttoncomponent'}
 										{rowColumns}
@@ -143,33 +170,37 @@ function keydown(event) {
 				{/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>
 		{/if}
 
-		{#if component.type === 'tabscomponent'}
-			<GridTab bind:tabs={component.tabs} {component} />
-		{:else if component.type === 'verticalsplitpanescomponent' || component.type === 'horizontalsplitpanescomponent'}
-			<GridPane bind:panes={component.panes} {component} />
-		{:else 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' || component.type === 'formbuttoncomponent'}
-			<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}
 
 		<div class="grow shrink" />
 
-		{#if Object.keys(component.customCss ?? {}).length > 0}
+		{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
 			<PanelSection title="Custom CSS">
 				<div slot="action">
 					<Button
@@ -183,10 +214,15 @@ function keydown(event) {
 				</div>
 				{#if viewCssOptions}
 					<div transition:slide|local>
-						{#each Object.keys(component.customCss ?? {}) as name}
-							{#if component?.customCss?.[name]}
+						{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
+							{#if componentSettings.item.data?.customCss != undefined}
 								<div class="w-full mb-2">
-									<CssProperty {name} bind:value={component.customCss[name]} />
+									<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}

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

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from '../component';
+import type { GridItem } from '../../types';
 declare const __propDef: {
     props: {
-        component: AppComponent;
+        componentSettings?: {
+            item: GridItem;
+            parent: string | undefined;
+        } | undefined;
         rowColumns?: boolean | undefined;
         onDelete?: (() => void) | undefined;
-        parent: string | undefined;
         noGrid?: boolean | undefined;
         duplicateMoveAllowed?: boolean | undefined;
     };

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

@@ -21,7 +21,6 @@ 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];
         }

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

@@ -17,104 +17,123 @@ 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 placeholder;
 const { connectingInput } = getContext('AppViewerContext');
+$: if (componentInput == undefined) {
+    //@ts-ignore
+    componentInput = {
+        type: 'static',
+        value: undefined
+    };
+}
 </script>
 
-{#if componentInput.ctype == undefined}
-	{#if !(resourceOnly && (componentInput.fieldType !== 'object' || !componentInput.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 componentInput.tooltip}
-						<Tooltip>
-							{componentInput.tooltip}
-						</Tooltip>
-					{/if}
-				</span>
+{#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">
-						{componentInput.fieldType === 'array' && componentInput.subFieldType
-							? `${capitalize(fieldTypeToTsType(componentInput.subFieldType))}[]`
-							: capitalize(fieldTypeToTsType(componentInput.fieldType))}
-					</Badge>
+			<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 !componentInput.onlyStatic && componentInput.type != 'eval'}
-						<ToggleButtonGroup
-							bind:selected={componentInput.type}
-							on:selected={(e) => {
-								if (e.detail == 'connected' && !componentInput['connection']) {
-									$connectingInput = {
-										opened: true,
-										input: undefined,
-										hoveredComponent: undefined
-									}
+				{#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="left"
-									value="static"
-									startIcon={{ icon: faPen }}
+									position="center"
+									value="user"
+									startIcon={{ icon: faUser }}
 									size="xs"
 									iconOnly
 								/>
-								<svelte:fragment slot="text">Static</svelte:fragment>
+								<svelte:fragment slot="text">User Input</svelte:fragment>
 							</Popover>
-							{#if userInputEnabled && !componentInput.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' in componentInput}
-								<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}
+						{/if}
+						{#if 'fileUpload' in componentInput}
 							<Popover placement="bottom" notClickable disapperTimoout={0}>
 								<ToggleButton
-									position="right"
-									value="connected"
-									startIcon={{ icon: faArrowRight }}
+									position="center"
+									value="upload"
+									startIcon={{ icon: faUpload }}
 									size="xs"
 									iconOnly
 								/>
-								<svelte:fragment slot="text">Connect</svelte:fragment>
+								<svelte:fragment slot="text">Upload</svelte:fragment>
 							</Popover>
-						</ToggleButtonGroup>
-					{/if}
-				</div>
+						{/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>
-
-			{#if componentInput.type === 'connected'}
-				<ConnectedInputEditor bind:componentInput />
-			{:else if componentInput.type === 'row'}
-				<RowInputEditor bind:componentInput />
-			{:else if componentInput.type === 'static'}
-				<StaticInputEditor bind:componentInput />
-			{:else if componentInput.type === 'eval'}
-				<EvalInputEditor {hasRows} {id} bind:componentInput />
-			{:else if componentInput.type === 'upload'}
-				<UploadInputEditor bind:componentInput />
-			{: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}
+
+		{#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 />
+		{: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/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { RichConfiguration } from '../../types';
+import type { InputType } from '../../inputType';
 declare const __propDef: {
     props: {
         id: string;
@@ -9,6 +10,13 @@ declare const __propDef: {
         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;
+        placeholder: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,6 +1,8 @@
 <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;
@@ -9,8 +11,22 @@ export let resourceOnly = false;
 
 {#if inputSpecs}
 	<div class="w-full flex flex-col gap-4">
-		{#each Object.keys(inputSpecs) as k}
-			{#if inputSpecs[k].ctype == undefined}
+		{#each Object.keys(inputSpecsConfiguration) as k}
+			{#if inputSpecs[k] && inputSpecs[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]}
+				<!-- {JSON.stringify(meta)} -->
 				<InputsSpecEditor
 					key={k}
 					bind:componentInput={inputSpecs[k]}
@@ -19,6 +35,13 @@ export let resourceOnly = false;
 					{shouldCapitalize}
 					{resourceOnly}
 					hasRows={rowColumns}
+					fieldType={meta?.['fieldType']}
+					subFieldType={meta?.['subFieldType']}
+					format={meta?.['format']}
+					selectOptions={meta?.['selectOptions']}
+					tooltip={meta?.['tooltip']}
+					onlyStatic={meta?.['onlyStatic']}
+					placeholder={meta?.['placeholder']}
 				/>
 			{/if}
 		{/each}

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

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         id: string;
         inputSpecs: RichConfigurations;
+        inputSpecsConfiguration?: RichConfigurations | undefined;
         userInputEnabled?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;
         rowColumns?: boolean | undefined;

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

@@ -0,0 +1,52 @@
+<script>import Tooltip from '../../../Tooltip.svelte';
+import InputsSpecEditor from './InputsSpecEditor.svelte';
+export let key;
+export let oneOf;
+export let inputSpecsConfiguration;
+export let labels;
+export let shouldCapitalize;
+export let id;
+export let resourceOnly;
+export let rowColumns;
+export let tooltip;
+$: if (oneOf.configuration[oneOf.selected] == undefined) {
+    oneOf.configuration[oneOf.selected] = {};
+}
+</script>
+
+<div class="p-2 border">
+	<h4 class="mb-2">{key}&nbsp;<Tooltip>{tooltip}</Tooltip></h4>
+	<select
+		class="w-full border border-gray-300 rounded-md p-2"
+		value={oneOf.selected}
+		on:change={(e) => {
+			oneOf = { ...oneOf, selected: e?.target?.['value'] }
+		}}
+	>
+		{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
+			<option value={choice}>{labels?.[choice] ?? choice}</option>
+		{/each}
+	</select>
+	<div class="mb-4" />
+	<div class="flex flex-col gap-4">
+		{#each Object.keys(inputSpecsConfiguration?.[oneOf.selected] ?? {}) as nestedKey}
+			{@const config = inputSpecsConfiguration?.[oneOf.selected]?.[nestedKey]}
+			{#if config && oneOf.configuration[oneOf.selected]}
+				<InputsSpecEditor
+					key={nestedKey}
+					bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
+					{id}
+					userInputEnabled={false}
+					{shouldCapitalize}
+					{resourceOnly}
+					hasRows={rowColumns}
+					fieldType={config?.['fieldType']}
+					subFieldType={config?.['subFieldType']}
+					format={config?.['format']}
+					selectOptions={config?.['selectOptions']}
+					placeholder={config?.['placeholder']}
+				/>
+			{/if}
+		{/each}
+	</div>
+</div>

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
+declare const __propDef: {
+    props: {
+        key: string;
+        oneOf: {
+            selected: string;
+            configuration: RichConfiguration;
+        } | any;
+        inputSpecsConfiguration: RichConfiguration | any;
+        labels: Record<string, string> | undefined;
+        shouldCapitalize: boolean;
+        id: string;
+        resourceOnly: boolean;
+        rowColumns: boolean;
+        tooltip: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OneOfInputSpecsEditorProps = typeof __propDef.props;
+export type OneOfInputSpecsEditorEvents = typeof __propDef.events;
+export type OneOfInputSpecsEditorSlots = typeof __propDef.slots;
+export default class OneOfInputSpecsEditor extends SvelteComponentTyped<OneOfInputSpecsEditorProps, OneOfInputSpecsEditorEvents, OneOfInputSpecsEditorSlots> {
+}
+export {};