windmill-components 1.89.1 → 1.103.1

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

@@ -8,7 +8,7 @@ import UploadInputEditor from './inputEditor/UploadInputEditor.svelte';
 import { getContext } from 'svelte';
 import ToggleButtonGroup from '../../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
-import { Pen, Plug2, Upload, User } from 'lucide-svelte';
+import { FunctionSquare, Pen, Plug2, Upload, User } from 'lucide-svelte';
 import { fieldTypeToTsType } from '../../utils';
 export let id;
 export let componentInput;
@@ -27,7 +27,14 @@ export let fileUpload = undefined;
 export let placeholder;
 export let customTitle = undefined;
 export let displayType = false;
-const { connectingInput } = getContext('AppViewerContext');
+export let noVariablePicker = undefined;
+const { connectingInput, app } = getContext('AppViewerContext');
+function applyConnection(connection) {
+    if (componentInput.type === 'connected') {
+        componentInput.connection = connection;
+        $app = $app;
+    }
+}
 $: if (componentInput == undefined) {
     //@ts-ignore
     componentInput = {
@@ -53,7 +60,7 @@ $: if (componentInput == undefined) {
 						? capitalize(addWhitespaceBeforeCapitals(key))
 						: key}
 					{#if tooltip}
-						<Tooltip>
+						<Tooltip light>
 							{tooltip}
 						</Tooltip>
 					{/if}
@@ -68,7 +75,7 @@ $: if (componentInput == undefined) {
 			</div>
 
 			<div class={classNames('flex gap-x-2 gap-y-1 flex-wrap justify-end items-center')}>
-				{#if !onlyStatic && componentInput?.type && componentInput.type != 'eval'}
+				{#if !onlyStatic && componentInput?.type}
 					<ToggleButtonGroup
 						class="h-7"
 						bind:selected={componentInput.type}
@@ -77,8 +84,15 @@ $: if (componentInput == undefined) {
 								$connectingInput = {
 									opened: true,
 									input: undefined,
-									hoveredComponent: undefined
+									hoveredComponent: undefined,
+									onConnect: applyConnection
 								}
+							} else if (
+								e.detail == 'eval' &&
+								componentInput['value'] != undefined &&
+								(componentInput['expr'] == '' || componentInput['expr'] == undefined)
+							) {
+								componentInput['expr'] = JSON.stringify(componentInput['value'])
 							}
 						}}
 					>
@@ -90,6 +104,7 @@ $: if (componentInput == undefined) {
 							<ToggleButton value="upload" icon={Upload} iconOnly tooltip="Upload" />
 						{/if}
 						<ToggleButton value="connected" icon={Plug2} iconOnly tooltip="Connect" />
+						<ToggleButton value="eval" icon={FunctionSquare} iconOnly tooltip="Eval" />
 					</ToggleButtonGroup>
 				{/if}
 			</div>
@@ -100,13 +115,14 @@ $: if (componentInput == undefined) {
 		{:else if componentInput?.type === 'row'}
 			<RowInputEditor bind:componentInput />
 		{:else if componentInput?.type === 'static'}
-			<div class={onlyStatic ? 'w-2/3 flex justify-end' : 'w-full'}>
+			<div class={onlyStatic ? 'w-2/3 flex justify-end' : 'w-full flex flex-row-reverse'}>
 				<StaticInputEditor
 					{fieldType}
 					{subFieldType}
 					{selectOptions}
 					{format}
 					{placeholder}
+					noVariablePicker={noVariablePicker ?? false}
 					bind:componentInput
 				/>
 			</div>

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

@@ -20,6 +20,7 @@ declare const __propDef: {
         placeholder: string | undefined;
         customTitle?: string | undefined;
         displayType?: boolean | undefined;
+        noVariablePicker?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,18 +2,19 @@
 import OneOfInputSpecsEditor from './OneOfInputSpecsEditor.svelte';
 export let id;
 export let inputSpecs;
-export let inputSpecsConfiguration = inputSpecs;
+export let inputSpecsConfiguration = undefined;
 export let userInputEnabled = false;
 export let shouldCapitalize = true;
 export let rowColumns = false;
 export let resourceOnly = false;
 export let displayType = false;
+$: finalInputSpecsConfiguration = inputSpecsConfiguration ?? inputSpecs;
 </script>
 
 {#if inputSpecs}
 	<div class="w-full flex flex-col gap-4">
-		{#each Object.keys(inputSpecsConfiguration) as k}
-			{#if inputSpecsConfiguration[k]?.type == 'oneOf'}
+		{#each Object.keys(finalInputSpecsConfiguration) as k}
+			{#if finalInputSpecsConfiguration[k]?.type == 'oneOf'}
 				<OneOfInputSpecsEditor
 					key={k}
 					bind:oneOf={inputSpecs[k]}
@@ -21,12 +22,12 @@ export let displayType = false;
 					{shouldCapitalize}
 					{resourceOnly}
 					{rowColumns}
-					inputSpecsConfiguration={inputSpecsConfiguration?.[k]?.['configuration']}
-					labels={inputSpecsConfiguration?.[k]?.['labels']}
-					tooltip={inputSpecsConfiguration?.[k]?.['tooltip']}
+					inputSpecsConfiguration={finalInputSpecsConfiguration?.[k]?.['configuration']}
+					labels={finalInputSpecsConfiguration?.[k]?.['labels']}
+					tooltip={finalInputSpecsConfiguration?.[k]?.['tooltip']}
 				/>
 			{:else}
-				{@const meta = inputSpecsConfiguration?.[k]}
+				{@const meta = finalInputSpecsConfiguration?.[k]}
 				<InputsSpecEditor
 					key={k}
 					bind:componentInput={inputSpecs[k]}
@@ -44,6 +45,7 @@ export let displayType = false;
 					fileUpload={meta?.['fileUpload']}
 					placeholder={meta?.['placeholder']}
 					customTitle={meta?.['customTitle']}
+					noVariablePicker={meta?.['noVariablePicker']}
 					{displayType}
 				/>
 			{/if}

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

@@ -44,7 +44,7 @@ $: {
 			<option value={choice}>{labels?.[choice] ?? choice}</option>
 		{/each}
 	</select>
-	{#if oneOf.selected !== 'none'}
+	{#if oneOf.selected !== 'none' && oneOf.selected !== 'errorOverlay'}
 		<div class="mb-4" />
 	{/if}
 	<div class="flex flex-col gap-4">
@@ -66,6 +66,7 @@ $: {
 					placeholder={config?.['placeholder']}
 					onlyStatic={config?.['onlyStatic']}
 					customTitle={config?.['customTitle']}
+					noVariablePicker={config?.['noVariablePicker']}
 				/>
 			{/if}
 		{/each}

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

@@ -1,11 +1,12 @@
 <script>import Badge from '../../../common/badge/Badge.svelte';
 import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
+import Toggle from '../../../Toggle.svelte';
 export let recomputeIds = undefined;
 export let ownId;
 const { runnableComponents } = getContext('AppViewerContext');
-function onChange(event, id) {
-    if (event.currentTarget.checked) {
+function onChange(checked, id) {
+    if (checked) {
         recomputeIds = [...(recomputeIds ?? []), id];
     }
     else {
@@ -15,8 +16,8 @@ function onChange(event, id) {
 </script>
 
 <PanelSection
-	title="Recompute others"
-	tooltip="Select components to recompute after running this script"
+	title="Trigger Runnable"
+	tooltip="Select components to recompute after running this runnable as a success"
 	documentationLink="https://docs.windmill.dev/docs/apps/app_settings#recompute-others"
 >
 	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
@@ -34,14 +35,14 @@ function onChange(event, id) {
 			<tbody>
 				{#each Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId) as id}
 					<tr>
-						<td class="whitespace-nowrap px-4 py-2 text-xs">
-							<Badge color="dark-indigo">{id}</Badge>
+						<td class="whitespace-nowrap px-4 text-xs">
+							<Badge color="indigo">{id}</Badge>
 						</td>
-						<td class="relative whitespace-nowrap px-4 py-2">
-							<input
+						<td class="relative whitespace-nowrap px-4">
+							<Toggle
 								class="windmillapp"
-								type="checkbox"
-								on:change={(event) => onChange(event, id)}
+								size="xs"
+								on:change={(e) => onChange(e.detail, id)}
 								checked={recomputeIds?.includes(id)}
 							/>
 						</td>

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

@@ -1,14 +1,13 @@
-<script>import Button from '../../../common/button/Button.svelte';
-import Toggle from '../../../Toggle.svelte';
-import Tooltip from '../../../Tooltip.svelte';
-import { faClose } from '@fortawesome/free-solid-svg-icons';
-import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { clearResultAppInput } from '../../utils';
-import ComponentTriggerList from './triggerLists/ComponentTriggerList.svelte';
+import ComponentScriptSettings, {} from './script/ComponentScriptSettings.svelte';
+import { ExternalLink, X } from 'lucide-svelte';
 const { app } = getContext('AppViewerContext');
-const { selectedComponentInEditor } = getContext('AppEditorContext');
 export let appInput;
 export let appComponent;
+$: if (appInput.autoRefresh === undefined) {
+    appInput.autoRefresh = true;
+}
 function detach() {
     if (appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript) {
         $app.unusedInlineScripts.push({
@@ -32,97 +31,42 @@ $: {
         appInput.doNotRecomputeOnInputChanged = undefined;
     }
 }
+$: hasScript =
+    appInput?.runnable?.type === 'runnableByPath' ||
+        (appInput?.runnable?.type === 'runnableByName' && appInput.runnable?.inlineScript !== undefined);
+function getActions(hasScript) {
+    if (hasScript) {
+        return [
+            ...(appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript
+                ? [
+                    {
+                        label: 'Detach',
+                        icon: ExternalLink,
+                        color: 'light',
+                        callback: detach
+                    }
+                ]
+                : []),
+            {
+                label: 'Clear',
+                icon: X,
+                color: 'red',
+                callback: clear
+            }
+        ];
+    }
+    else {
+        return [
+            {
+                label: 'Clear',
+                icon: X,
+                color: 'red',
+                callback: clear
+            }
+        ];
+    }
+}
+$: actions = getActions(hasScript);
 </script>
 
-<div class="flex justify-between w-full items-center gap-1">
-	<span class="text-xs font-semibold truncate">
-		{#if appInput.runnable?.type === 'runnableByName'}
-			{appInput.runnable.name}
-		{:else if appInput.runnable?.type === 'runnableByPath'}
-			{appInput.runnable.path}
-		{/if}
-	</span>
-	<div class="flex gap-1 justify-center">
-		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
-			<Button size="xs" color="light" variant="border" on:click={detach}>
-				Detach&nbsp;
-				<Tooltip>
-					Detaching an inline script keep it for later to be reused by another component
-				</Tooltip>
-			</Button>
-		{/if}
-		<Button size="xs" color="red" variant="border" startIcon={{ icon: faClose }} on:click={clear}>
-			Clear
-		</Button>
-	</div>
-</div>
-<div>
-	<div class="w-full"><div class="mx-auto w-0">&downarrow;</div></div>
-	<div class="flex gap-1 justify-between items-center">
-		<span class="text-xs font-semibold truncate">
-			Transformer &nbsp;
-			<Tooltip>
-				A transformer is an optional frontend script that is executed right after the component's
-				script whose purpose is to do lightweight transformation in the browser. It takes the
-				previous computation's result as `result`
-			</Tooltip>
-		</span>
-		<div class="flex gap-1">
-			{#if !appInput.transformer}
-				<div>
-					<Button
-						variant="border"
-						color="light"
-						size="xs"
-						on:click={() => {
-							appInput.transformer = {
-								language: 'frontend',
-								content: 'return result'
-							}
-							$selectedComponentInEditor = appComponent.id + '_transformer'
-						}}
-					>
-						Add Transformer
-					</Button>
-				</div>
-			{:else}
-				<Button
-					size="xs"
-					color="red"
-					variant="border"
-					startIcon={{ icon: faClose }}
-					on:click={() => {
-						appInput.transformer = undefined
-					}}
-				>
-					Clear
-				</Button>
-			{/if}
-		</div></div
-	>
-</div>
-
-{#if !['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes(appComponent.type)}
-	<div class="flex items-center">
-		<Toggle
-			size="xs"
-			bind:checked={appInput.recomputeOnInputChanged}
-			options={{ right: 'recompute on any input changes' }}
-		/>
-	</div>
-{/if}
-{#if appInput.runnable?.type === 'runnableByName'}
-	<div>
-		<ComponentTriggerList
-			bind:runnable={appInput.runnable}
-			{appComponent}
-			fields={appInput.fields}
-			recomputeOnInputChanged={appInput.recomputeOnInputChanged}
-		/>
-	</div>
-{/if}
-{#if appInput.runnable?.type === 'runnableByName' && !appInput.runnable.inlineScript}
-	<span class="text-xs text-gray-500">
-		Please configure the language in the inline script panel
-	</span>
-{/if}
+<ComponentScriptSettings bind:appInput bind:appComponent {hasScript} {actions} />

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

@@ -1,5 +1,5 @@
 <script>import { Button } from '../../../common';
-import { sendUserToast } from '../../../../utils';
+import { sendUserToast } from '../../../../toast';
 import { Copy } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { ccomponents } from '../component';
@@ -53,6 +53,7 @@ function applyToAllInstances() {
 				quickStyleProperties={quickStyleProperties?.[component.type]?.[name]}
 				forceStyle={ccomponents[component.type].customCss[name].style !== undefined}
 				forceClass={ccomponents[component.type].customCss[name].class !== undefined}
+				tooltip={ccomponents[component.type].customCss[name].tooltip}
 				{name}
 				componentType={component.type}
 				bind:value={component.customCss[name]}

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

@@ -2,19 +2,20 @@
 import Button from '../../../common/button/Button.svelte';
 import { getNextId } from '../../../flows/idUtils';
 import { classNames } from '../../../../utils';
-import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import { appComponentFromType, clearErrorByComponentId, clearJobsByComponentId } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
 import TableActionLabel from './TableActionLabel.svelte';
+import { Inspect, List, ToggleRightIcon } from 'lucide-svelte';
 export let components;
 export let id;
 const { selectedComponent, app, errorByComponent, jobs } = getContext('AppViewerContext');
-function addComponent() {
+function addComponent(typ) {
     const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
     const newComponent = {
-        ...appComponentFromType('buttoncomponent')(`${id}_${actionId}`),
+        ...appComponentFromType(typ)(`${id}_${actionId}`),
         recomputeIds: []
     };
     components = [...components, newComponent];
@@ -29,18 +30,7 @@ function deleteComponent(cid) {
 }
 </script>
 
-<PanelSection title={`Table actions ${components.length > 0 ? `(${components.length})` : ''}`}>
-	<svelte:fragment slot="action">
-		<Button
-			size="xs"
-			color="light"
-			variant="border"
-			startIcon={{ icon: faPlus }}
-			on:click={addComponent}
-			iconOnly
-		/>
-	</svelte:fragment>
-
+<PanelSection title={`Table actions`}>
 	{#if components.length == 0}
 		<span class="text-xs text-gray-500">No action buttons</span>
 	{/if}
@@ -70,14 +60,36 @@ function deleteComponent(cid) {
 			</div>
 		</div>
 	{/each}
-	<div class="w-full">
+	<div class="w-full flex gap-2">
 		<Button
-			btnClasses="w-full"
+			btnClasses="gap-1 flex items-center text-sm text-gray-600"
+			wrapperClasses="w-full"
 			color="light"
 			variant="border"
-			startIcon={{ icon: faPlus }}
-			on:click={addComponent}
-			iconOnly
-		/>
+			on:click={() => addComponent('buttoncomponent')}
+			title="Add Button"
+		>
+			+ <Inspect size={14} />
+		</Button>
+		<Button
+			btnClasses="gap-1 flex items-center text-sm text-gray-600"
+			wrapperClasses="w-full"
+			color="light"
+			variant="border"
+			on:click={() => addComponent('checkboxcomponent')}
+			title="Add Toggle"
+		>
+			+ <ToggleRightIcon size={14} />
+		</Button>
+		<Button
+			btnClasses="gap-1 flex items-center text-sm text-gray-600"
+			wrapperClasses="w-full"
+			color="light"
+			variant="border"
+			on:click={() => addComponent('selectcomponent')}
+			title="Add Select"
+		>
+			+ <List size={14} />
+		</Button>
 	</div>
 </PanelSection>

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { BaseAppComponent } from '../../types';
-import type { ButtonComponent } from '../component';
+import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../component';
 declare const __propDef: {
     props: {
-        components: (BaseAppComponent & ButtonComponent)[];
+        components: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[];
         id: string;
     };
     events: {

package/package/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte

@@ -4,20 +4,10 @@ import { getContext } from 'svelte';
 import { Plug } from 'lucide-svelte';
 export let componentInput;
 const { connectingInput, app } = getContext('AppViewerContext');
-function applyConnection() {
-    if (!$connectingInput.opened &&
-        $connectingInput.input !== undefined &&
-        !componentInput.connection) {
-        componentInput.connection = $connectingInput.input.connection;
-        $connectingInput = {
-            opened: false,
-            input: undefined,
-            hoveredComponent: undefined
-        };
-        $app = $app;
-    }
+function applyConnection(connection) {
+    componentInput.connection = connection;
+    $app = $app;
 }
-$: $connectingInput && applyConnection();
 </script>
 
 {#if componentInput.connection}
@@ -51,7 +41,8 @@ $: $connectingInput && applyConnection();
 				$connectingInput = {
 					opened: true,
 					input: undefined,
-					hoveredComponent: undefined
+					hoveredComponent: undefined,
+					onConnect: applyConnection
 				}
 			}
 		}}

package/package/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte

@@ -12,7 +12,7 @@ $: extraLib =
 </script>
 
 {#if componentInput?.type === 'eval'}
-	<div class="border border-gray-300 ">
+	<div class="border border-gray-300">
 		<SimpleEditor
 			lang="javascript"
 			bind:code={componentInput.expr}

package/package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte

@@ -28,13 +28,6 @@ async function getData() {
     loading = false;
     openPopup();
 }
-function formatName(name) {
-    // Inserts space before capital letters and numbers
-    return (name
-        ?.replace(/([A-Z])/g, ' $1')
-        .trim()
-        .replace(/([a-z])(\d)/i, '$1 $2') || '');
-}
 function select(label) {
     componentInput.value = label;
     const elem = document.activeElement;
@@ -47,7 +40,7 @@ function select(label) {
 <div bind:this={anchor} class="relative">
 	<ClearableInput
 		readonly
-		value={formatName(componentInput.value)}
+		value={componentInput.value}
 		on:change={({ detail }) => (componentInput.value = detail)}
 		on:focus={getData}
 		class="!pr-6"
@@ -88,10 +81,9 @@ function select(label) {
 					/>
 					<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
 						{#each filteredItems as { label, icon }}
-							{@const formatedLabel = formatName(label)}
 							<button
 								type="button"
-								title={formatedLabel}
+								title={label}
 								on:click={() => {
 									select(label)
 									close()
@@ -102,7 +94,7 @@ function select(label) {
 							>
 								<svelte:component this={icon} size={22} />
 								<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
-									{formatedLabel}
+									{label}
 								</span>
 							</button>
 						{:else}

package/package/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte

@@ -3,6 +3,7 @@ export let code;
 export let value = undefined;
 export let error = '';
 export let editor = undefined;
+$: tooBig = code && code?.length > 1000000;
 function parseJson() {
     try {
         value = JSON.parse(code ?? '');
@@ -15,11 +16,15 @@ function parseJson() {
 $: code && parseJson();
 </script>
 
-<div class="flex flex-col w-full">
-	<div class="border border-gray-300 w-full">
-		<SimpleEditor on:focus bind:this={editor} on:change autoHeight lang="json" bind:code />
+{#if tooBig}
+	<span class="text-gray-600">JSON to edit is too big</span>
+{:else}
+	<div class="flex flex-col w-full">
+		<div class="border border-gray-300 w-full">
+			<SimpleEditor on:focus bind:this={editor} on:change autoHeight lang="json" bind:code />
+		</div>
+		{#if error != ''}
+			<span class="text-red-600 text-xs">{error}</span>
+		{/if}
 	</div>
-	{#if error != ''}
-		<span class="text-red-600 text-xs">{error}</span>
-	{/if}
-</div>
+{/if}

package/package/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte

@@ -1,13 +1,29 @@
 <script>import { isScriptByNameDefined, isScriptByPathDefined } from '../../../utils';
+import { getContext } from 'svelte';
 import RunnableSelector from '../mainInput/RunnableSelector.svelte';
 import SelectedRunnable from '../SelectedRunnable.svelte';
 export let appInput;
 export let defaultUserInput = false;
 export let appComponent;
+const { selectedComponentInEditor } = getContext('AppEditorContext');
+function onPick({ runnable, fields }) {
+    if (appInput.type === 'runnable') {
+        appInput = { ...appInput, runnable, fields };
+        $selectedComponentInEditor = appComponent.id;
+    }
+    else {
+        console.warn('Cannot pick runnable for non-runnable input');
+    }
+}
 </script>
 
 {#if isScriptByPathDefined(appInput) || isScriptByNameDefined(appInput)}
 	<SelectedRunnable {appComponent} bind:appInput />
 {:else if appInput !== undefined}
-	<RunnableSelector id={appComponent.id} {defaultUserInput} bind:appInput />
+	<RunnableSelector
+		hideCreateScript={appComponent.type === 'flowstatuscomponent'}
+		onlyFlow={appComponent.type === 'flowstatuscomponent'}
+		{defaultUserInput}
+		on:pick={(e) => onPick(e.detail)}
+	/>
 {/if}

package/package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -7,6 +7,8 @@ import ColorInput from './ColorInput.svelte';
 import TabSelectInput from './TabSelectInput.svelte';
 import { DollarSign } from 'lucide-svelte';
 import Popover from '../../../../Popover.svelte';
+import Toggle from '../../../../Toggle.svelte';
+import SchemaEditor from '../../../../SchemaEditor.svelte';
 export let componentInput;
 export let fieldType = undefined;
 export let subFieldType = undefined;
@@ -27,7 +29,7 @@ $: componentInput && onchange?.();
 	{:else if fieldType === 'date'}
 		<input on:keydown|stopPropagation type="date" bind:value={componentInput.value} />
 	{:else if fieldType === 'boolean'}
-		<input type="checkbox" class="!w-4 !h-4 !rounded-sm" bind:checked={componentInput.value} />
+		<Toggle bind:checked={componentInput.value} size="xs" />
 	{:else if fieldType === 'select' && selectOptions}
 		<select on:keydown|stopPropagation on:keydown|stopPropagation bind:value={componentInput.value}>
 			{#each selectOptions ?? [] as option}
@@ -102,8 +104,12 @@ $: componentInput && onchange?.();
 		{/if}
 	{:else if fieldType === 'array'}
 		<ArrayStaticInputEditor {subFieldType} bind:componentInput on:deleteArrayItem />
+	{:else if fieldType === 'schema'}
+		<div class="w-full">
+			<SchemaEditor bind:schema={componentInput.value} lightMode />
+		</div>
 	{:else}
-		<div class="flex gap-1 relative">
+		<div class="flex gap-1 relative w-full">
 			<input
 				on:keydown|stopPropagation
 				type="text"

package/package/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte

@@ -2,7 +2,7 @@
 import { getContext } from 'svelte';
 export let componentInput;
 const { app } = getContext('AppViewerContext');
-const tabComponents = allItems($app.grid, $app.subgrids).filter((component) => component.data.type === 'tabscomponent');
+const tabComponents = allItems($app.grid, $app.subgrids).filter((component) => component.data.type === 'tabscomponent' || component.data.type === 'conditionalwrapper');
 </script>
 
 {#if componentInput.value && tabComponents.length > 0}