windmill-components 1.56.2 → 1.57.1

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -1,6 +1,6 @@
 <script>import Button from '../../../common/button/Button.svelte';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher, onMount } from 'svelte';
+import { createEventDispatcher, getContext, onMount } from 'svelte';
 import { CheckCircle, Code2, X } from 'lucide-svelte';
 import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
 import { inferArgs } from '../../../../infer';
@@ -8,9 +8,13 @@ import Badge from '../../../common/badge/Badge.svelte';
 import { fly } from 'svelte/transition';
 import Editor from '../../../Editor.svelte';
 import { scriptLangToEditorLang } from '../../../../utils';
+import Tooltip from '../../../Tooltip.svelte';
 let inlineScriptEditorDrawer;
 export let inlineScript;
 export let name = undefined;
+export let id;
+const { runnableComponents } = getContext('AppEditorContext');
+let editor;
 let validCode = false;
 async function inferInlineScriptSchema(language, content, schema) {
     try {
@@ -29,12 +33,13 @@ onMount(async () => {
     }
 });
 const dispatch = createEventDispatcher();
+let runLoading = false;
 </script>
 
-<InlineScriptEditorDrawer bind:this={inlineScriptEditorDrawer} bind:inlineScript />
+<InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
 
-<div class="h-full p-4 flex flex-col gap-2" transition:fly={{ duration: 50 }}>
-	<div class="flex justify-between w-full gap-1 flex-row items-center">
+<div class="h-full flex flex-col gap-1" transition:fly={{ duration: 50 }}>
+	<div class="flex justify-between w-full gap-1 px-2 pt-1 flex-row items-center">
 		{#if name !== undefined}
 			<input bind:value={name} placeholder="Inline script name" />
 		{/if}
@@ -50,13 +55,41 @@ const dispatch = createEventDispatcher();
 			{/if}
 
 			<Button
-				size="xs"
-				color="light"
 				variant="border"
-				iconOnly
-				startIcon={{ icon: faTrash }}
-				on:click={() => dispatch('delete')}
-			/>
+				size="xs"
+				color="blue"
+				on:click={async () => {
+					editor.format()
+				}}
+			>
+				Format&nbsp;<Tooltip>Ctrl+S</Tooltip>
+			</Button>
+			{#if id.startsWith('unused-')}
+				<Button
+					size="xs"
+					color="light"
+					variant="border"
+					iconOnly
+					startIcon={{ icon: faTrash }}
+					on:click={() => dispatch('delete')}
+				/>
+			{:else}
+				<Button
+					loading={runLoading}
+					size="xs"
+					color="blue"
+					on:click={async () => {
+						runLoading = true
+						await $runnableComponents[id]?.()
+						runLoading = false
+					}}
+				>
+					Run&nbsp;<Tooltip
+						>Ctrl+Enter to run the script and see the result in the component directly</Tooltip
+					>
+				</Button>
+			{/if}
+
 			<Button
 				size="xs"
 				color="blue"
@@ -74,20 +107,23 @@ const dispatch = createEventDispatcher();
 
 	<div class="border h-full">
 		<Editor
+			bind:this={editor}
 			class="flex flex-1 grow h-full"
 			lang={scriptLangToEditorLang(inlineScript?.language)}
 			bind:code={inlineScript.content}
-			fixedOverflowWidgets={false}
-			on:change={async () => {
+			fixedOverflowWidgets={true}
+			cmdEnterAction={async () => {
+				runLoading = true
+				await $runnableComponents[id]?.()
+				runLoading = false
+			}}
+			on:change={async (e) => {
 				if (inlineScript) {
-					let schema = await inferInlineScriptSchema(
-						inlineScript?.language,
-						inlineScript.content,
-						inlineScript.schema
-					)
-
-					inlineScript.schema = schema
-					inlineScript = inlineScript
+					const oldSchema = JSON.stringify(inlineScript.schema)
+					await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
+					if (JSON.stringify(inlineScript.schema) != oldSchema) {
+						inlineScript = inlineScript
+					}
 				}
 			}}
 		/>

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         inlineScript: InlineScript;
         name?: string | undefined;
+        id: string;
     };
     events: {
         delete: CustomEvent<any>;

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte

@@ -3,6 +3,7 @@ import ScriptEditor from '../../../ScriptEditor.svelte';
 import { faSave } from '@fortawesome/free-solid-svg-icons';
 let scriptEditorDrawer;
 export let inlineScript;
+export let editor = undefined;
 export function openDrawer() {
     scriptEditorDrawer.openDrawer?.();
 }
@@ -13,7 +14,10 @@ export function openDrawer() {
 		title="Script Editor"
 		noPadding
 		forceOverflowVisible
-		on:close={scriptEditorDrawer.closeDrawer}
+		on:close={() => {
+			scriptEditorDrawer.closeDrawer()
+			editor?.setCode(inlineScript.content)
+		}}
 	>
 		{#if inlineScript}
 			<ScriptEditor

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type Editor from '../../../Editor.svelte';
 import type { InlineScript } from '../../types';
 declare const __propDef: {
     props: {
         inlineScript: InlineScript;
+        editor?: Editor | undefined;
         openDrawer?: (() => void) | undefined;
     };
     events: {

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -1,14 +1,22 @@
-<script>import Button from '../../../common/button/Button.svelte';
+<script>import { Drawer, DrawerContent } from '../../../common';
+import Button from '../../../common/button/Button.svelte';
 import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
-import { getScriptByPath } from '../../../../utils';
-import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
+import FlowPathViewer from '../../../flows/content/FlowPathViewer.svelte';
+import { inferArgs } from '../../../../infer';
+import { emptySchema, getScriptByPath } from '../../../../utils';
+import { faCodeBranch, faExternalLinkAlt, faEye, faPen } from '@fortawesome/free-solid-svg-icons';
 import { clearResultAppInput } from '../../utils';
 import EmptyInlineScript from './EmptyInlineScript.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
 export let componentInput;
+export let id;
 async function fork(path) {
-    const { content, language, schema } = await getScriptByPath(path);
+    let { content, language, schema } = await getScriptByPath(path);
     if (componentInput && componentInput.type == 'runnable') {
+        if (!schema || Object.keys(schema).length == 0) {
+            schema = emptySchema();
+            await inferArgs(language, content, schema);
+        }
         componentInput.runnable = {
             type: 'runnableByName',
             name: path,
@@ -24,13 +32,21 @@ async function fork(path) {
         console.error('componentInput is undefined');
     }
 }
-// $: inlineScript && (componentInput = componentInput)
+let drawerFlowViewer;
+let flowPath = '';
 </script>
 
+<Drawer bind:this={drawerFlowViewer} size="1200px">
+	<DrawerContent title="Flow {flowPath}" on:close={drawerFlowViewer.closeDrawer}>
+		<FlowPathViewer path={flowPath ?? ''} />
+	</DrawerContent>
+</Drawer>
+
 {#if componentInput && componentInput.type == 'runnable'}
 	{#if componentInput?.runnable?.type === 'runnableByName' && componentInput?.runnable?.name !== undefined}
 		{#if componentInput.runnable.inlineScript}
 			<InlineScriptEditor
+				{id}
 				bind:inlineScript={componentInput.runnable.inlineScript}
 				bind:name={componentInput.runnable.name}
 				on:delete={() => {
@@ -41,6 +57,7 @@ async function fork(path) {
 			/>
 		{:else}
 			<EmptyInlineScript
+				{id}
 				name={componentInput.runnable.name}
 				on:new={(e) => {
 					if (
@@ -55,25 +72,57 @@ async function fork(path) {
 		{/if}
 	{:else if componentInput?.runnable?.type === 'runnableByPath' && componentInput?.runnable?.path}
 		<div class="p-2 h-full flex flex-col gap-2 ">
-			<div>
-				<Button
-					size="xs"
-					startIcon={{ icon: faCodeBranch }}
-					on:click={() => {
-						if (
-							componentInput &&
-							componentInput.type == 'runnable' &&
-							componentInput.runnable?.type === 'runnableByPath'
-						) {
-							fork(componentInput.runnable.path)
-						}
-					}}
-				>
-					Fork
-				</Button>
-			</div>
+			{#if componentInput.runnable.runType == 'script' || componentInput.runnable.runType == 'hubscript'}
+				<div>
+					<Button
+						size="xs"
+						startIcon={{ icon: faCodeBranch }}
+						on:click={() => {
+							if (
+								componentInput &&
+								componentInput.type == 'runnable' &&
+								componentInput.runnable?.type === 'runnableByPath'
+							) {
+								fork(componentInput.runnable.path)
+							}
+						}}
+					>
+						Fork
+					</Button>
+				</div>
+			{/if}
 			<div class="border w-full">
-				<FlowModuleScript path={componentInput.runnable.path} />
+				{#if componentInput.runnable.runType == 'script' || componentInput.runnable.runType == 'hubscript'}
+					<FlowModuleScript path={componentInput.runnable.path} />
+				{:else if componentInput.runnable.runType == 'flow'}
+					<div class="py-1 flex gap-2 w-full flex-row-reverse">
+						<Button
+							size="xs"
+							startIcon={{ icon: faEye }}
+							on:click={() => {
+								flowPath = componentInput?.['runnable']?.path
+								drawerFlowViewer.openDrawer()
+							}}>Expand</Button
+						>
+						<Button
+							size="xs"
+							startIcon={{ icon: faPen }}
+							endIcon={{ icon: faExternalLinkAlt }}
+							target="_blank"
+							href="/flows/edit/{componentInput?.['runnable']?.path}?nodraft=true">Edit</Button
+						>
+						<Button
+							size="xs"
+							startIcon={{ icon: faEye }}
+							endIcon={{ icon: faExternalLinkAlt }}
+							target="_blank"
+							href="/flows/get/{componentInput?.['runnable']?.path}">Details page</Button
+						>
+					</div>
+					<FlowPathViewer path={componentInput.runnable.path} />
+				{:else}
+					Unrecognized runType {componentInput.runnable.runType}
+				{/if}
 			</div>
 		</div>
 	{/if}

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte.d.ts

@@ -3,6 +3,7 @@ import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         componentInput: AppInput | undefined;
+        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,35 +1,43 @@
 <script>import { getContext } from 'svelte';
 import SplitPanesWrapper from '../../../splitPanes/SplitPanesWrapper.svelte';
-import { Pane } from 'svelte-splitpanes';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
 import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
 import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
-const { app } = getContext('AppEditorContext');
+const { lazyGrid, app } = getContext('AppEditorContext');
 let selectedScriptComponentId = undefined;
 </script>
 
 <SplitPanesWrapper>
-	<Pane size={25}>
-		<InlineScriptsPanelList bind:selectedScriptComponentId />
-	</Pane>
-	<Pane size={75}>
-		{#each $app.grid as gridComponent, index (index)}
-			{#if gridComponent.data.id === selectedScriptComponentId}
-				<InlineScriptEditorPanel bind:componentInput={gridComponent.data.componentInput} />
-			{/if}
+	<Splitpanes class="!overflow-visible">
+		<Pane size={25}>
+			<InlineScriptsPanelList bind:selectedScriptComponentId />
+		</Pane>
+		<Pane size={75}>
+			{#each $lazyGrid as gridComponent, index (index)}
+				{#if gridComponent.data.id === selectedScriptComponentId}
+					<InlineScriptEditorPanel
+						id={gridComponent.data.id}
+						bind:componentInput={gridComponent.data.componentInput}
+					/>
+				{/if}
 
-			{#if gridComponent.data.type === 'tablecomponent'}
-				{#each gridComponent.data.actionButtons as actionButton, index (index)}
-					{#if actionButton.id === selectedScriptComponentId}
-						<InlineScriptEditorPanel bind:componentInput={actionButton.componentInput} />
-					{/if}
-				{/each}
-			{/if}
-		{/each}
-		{#if Array.isArray($app.unusedInlineScripts)}
+				{#if gridComponent.data.type === 'tablecomponent'}
+					{#each gridComponent.data.actionButtons as actionButton, index (index)}
+						{#if actionButton.id === selectedScriptComponentId}
+							<InlineScriptEditorPanel
+								id={actionButton.id}
+								bind:componentInput={actionButton.componentInput}
+							/>
+						{/if}
+					{/each}
+				{/if}
+			{/each}
 			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
-				{#if unusedInlineScript.name === selectedScriptComponentId}
+				{#if `unused-${index}` === selectedScriptComponentId}
 					<InlineScriptEditor
+						id={`unused-${index}`}
+						bind:name={unusedInlineScript.name}
 						bind:inlineScript={unusedInlineScript.inlineScript}
 						on:delete={() => {
 							// remove the script from the array at the index
@@ -39,6 +47,6 @@ let selectedScriptComponentId = undefined;
 					/>
 				{/if}
 			{/each}
-		{/if}
-	</Pane>
+		</Pane>
+	</Splitpanes>
 </SplitPanesWrapper>

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -3,12 +3,14 @@ import { classNames } from '../../../../utils';
 import { getContext } from 'svelte';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 export let selectedScriptComponentId = undefined;
-const { app, selectedComponent } = getContext('AppEditorContext');
-function selectInlineScript(id, subId) {
-    selectedScriptComponentId = subId ? subId : id;
-    $selectedComponent = selectedScriptComponentId;
+const { app, selectedComponent, lazyGrid } = getContext('AppEditorContext');
+function selectInlineScript(id) {
+    selectedScriptComponentId = id;
+    if (!id.startsWith('unused-')) {
+        $selectedComponent = selectedScriptComponentId;
+    }
 }
-$: runnablesByName = $app.grid.reduce((acc, gridComponent) => {
+$: runnablesByName = $lazyGrid.reduce((acc, gridComponent) => {
     const component = gridComponent.data;
     if (component.type === 'tablecomponent') {
         component.actionButtons.forEach((actionButton) => {
@@ -16,8 +18,7 @@ $: runnablesByName = $app.grid.reduce((acc, gridComponent) => {
                 if (actionButton.componentInput.runnable?.type === 'runnableByName') {
                     acc.push({
                         name: actionButton.componentInput.runnable.name,
-                        id: gridComponent.id,
-                        subId: actionButton.id
+                        id: actionButton.id
                     });
                 }
             }
@@ -34,7 +35,7 @@ $: runnablesByName = $app.grid.reduce((acc, gridComponent) => {
     }
     return acc;
 }, []);
-$: runnablesByPath = $app.grid.reduce((acc, gridComponent) => {
+$: runnablesByPath = $lazyGrid.reduce((acc, gridComponent) => {
     const component = gridComponent.data;
     if (component.type === 'tablecomponent') {
         component.actionButtons.forEach((actionButton) => {
@@ -42,8 +43,7 @@ $: runnablesByPath = $app.grid.reduce((acc, gridComponent) => {
                 if (actionButton.componentInput.runnable?.type === 'runnableByPath') {
                     acc.push({
                         name: actionButton.componentInput.runnable.path,
-                        id: gridComponent.id,
-                        subId: actionButton.id
+                        id: actionButton.id
                     });
                 }
             }
@@ -68,73 +68,74 @@ $: {
 }
 </script>
 
-<PanelSection title="Inline scripts" smallPadding>
-	<div class="flex flex-col gap-2 w-full">
-		{#if runnablesByName.length > 0}
-			<div class="flex gap-2 flex-col ">
-				{#each runnablesByName as { name, id, subId }, index (index)}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						class="{classNames(
-							'border flex  gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-sm cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-							selectedScriptComponentId === (subId ? subId : id) ? 'border-blue-500 border' : ''
-						)},"
-						on:click={() => selectInlineScript(id, subId)}
-					>
-						<span class="text-xs truncate">{name}</span>
-						<div>
-							<Badge color="dark-indigo">{id}</Badge>
-							{#if subId}
-								<Badge color="dark-indigo">{subId}</Badge>
-							{/if}
+<div class="h-full flex flex-col gap-4">
+	<PanelSection title="Inline scripts" smallPadding>
+		<div class="flex flex-col gap-2 w-full">
+			{#if runnablesByName.length > 0}
+				<div class="flex gap-2 flex-col ">
+					{#each runnablesByName as { name, id }, index (index)}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<div
+							class="{classNames(
+								'border flex  gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-sm cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+								selectedScriptComponentId === id ? 'border-blue-500 border' : ''
+							)},"
+							on:click={() => selectInlineScript(id)}
+						>
+							<span class="text-xs truncate">{name}</span>
+							<div>
+								<Badge color="dark-indigo">{id}</Badge>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+
+			{#if $app.unusedInlineScripts?.length > 0}
+				<div class="flex gap-2 flex-col ">
+					{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<div
+							class="{classNames(
+								'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+								selectedScriptComponentId === `unused-${index}` ? 'bg-blue-100 text-blue-600' : ''
+							)},"
+							on:click={() => selectInlineScript(`unused-${index}`)}
+						>
+							<span class="text-xs truncate">{unusedInlineScript.name}</span>
+							<Badge color="red">Detached</Badge>
 						</div>
-					</div>
-				{/each}
-			</div>
-		{:else}
-			<div class="text-sm text-gray-500">No inline scripts</div>
-		{/if}
+					{/each}
+				</div>
+			{/if}
 
-		{#if Array.isArray($app.unusedInlineScripts) && $app.unusedInlineScripts.length > 0}
-			<div class="flex gap-2 flex-col ">
-				{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						class="{classNames(
-							'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-							selectedScriptComponentId === '' ? 'bg-blue-100 text-blue-600' : ''
-						)},"
-						on:click={() => selectInlineScript(unusedInlineScript.name)}
-					>
-						<span class="text-xs truncate">{unusedInlineScript.name}</span>
-						<Badge color="red">Unused</Badge>
-					</div>
-				{/each}
-			</div>
-		{/if}
-	</div>
-</PanelSection>
+			{#if runnablesByName.length == 0 && $app.unusedInlineScripts?.length == 0}
+				<div class="text-sm text-gray-500">No inline scripts</div>
+			{/if}
+		</div>
+	</PanelSection>
 
-<PanelSection title="Runnable by path" smallPadding>
-	<div class="flex flex-col gap-2 w-full">
-		{#if runnablesByPath.length > 0}
-			<div class="flex gap-2 flex-col ">
-				{#each runnablesByPath as { name, id }, index (index)}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						class="{classNames(
-							'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-							selectedScriptComponentId === id ? 'bg-blue-100 text-blue-600' : ''
-						)},"
-						on:click={() => selectInlineScript(id)}
-					>
-						<span class="text-xs truncate">{name}</span>
-						<Badge color="dark-indigo">{id}</Badge>
-					</div>
-				{/each}
-			</div>
-		{:else}
-			<div class="text-sm text-gray-500">No inline scripts</div>
-		{/if}
-	</div>
-</PanelSection>
+	<PanelSection title="Others" smallPadding>
+		<div class="flex flex-col gap-2 w-full">
+			{#if runnablesByPath.length > 0}
+				<div class="flex gap-2 flex-col ">
+					{#each runnablesByPath as { name, id }, index (index)}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<div
+							class="{classNames(
+								'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+								selectedScriptComponentId === id ? 'bg-blue-100 text-blue-600' : ''
+							)},"
+							on:click={() => selectInlineScript(id)}
+						>
+							<span class="text-xs truncate">{name}</span>
+							<Badge color="dark-indigo">{id}</Badge>
+						</div>
+					{/each}
+				</div>
+			{:else}
+				<div class="text-sm text-gray-500">No items</div>
+			{/if}
+		</div>
+	</PanelSection>
+</div>

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

@@ -6,38 +6,43 @@ export let component;
 
 {#if component.verticalAlignment !== undefined}
 	<PanelSection title="Alignment">
-		{#if component.horizontalAlignment}
-			<div class="w-full text-xs font-semibold">Horizontal</div>
-
-			<div class="w-full">
-				<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
-					<ToggleButton position="left" value="left" size="xs">
-						<AlignStartVertical size={16} />
-					</ToggleButton>
-					<ToggleButton position="center" value="center" size="xs">
-						<AlignCenterVertical size={16} />
-					</ToggleButton>
-					<ToggleButton position="right" value="right" size="xs">
-						<AlignEndVertical size={16} />
-					</ToggleButton>
-				</ToggleButtonGroup>
-			</div>
-		{/if}
-		{#if component.type !== 'formcomponent' && component.verticalAlignment}
-			<div class="w-full text-xs font-semibold">Vertical</div>
-			<div class="w-full">
-				<ToggleButtonGroup bind:selected={component.verticalAlignment}>
-					<ToggleButton position="left" value="top" size="xs">
-						<AlignStartHorizontal size={16} />
-					</ToggleButton>
-					<ToggleButton position="center" value="center" size="xs">
-						<AlignCenterHorizontal size={16} />
-					</ToggleButton>
-					<ToggleButton position="right" value="bottom" size="xs">
-						<AlignEndHorizontal size={16} />
-					</ToggleButton>
-				</ToggleButtonGroup>
-			</div>
-		{/if}
+		<div class="flex flex-wrap gap-2">
+			{#if component.horizontalAlignment}
+				<div class="flex flex-col gap-0.5">
+					<div class="text-xs font-semibold">Horizontal</div>
+					<div>
+						<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
+							<ToggleButton position="left" value="left" size="xs">
+								<AlignStartVertical size={16} />
+							</ToggleButton>
+							<ToggleButton position="center" value="center" size="xs">
+								<AlignCenterVertical size={16} />
+							</ToggleButton>
+							<ToggleButton position="right" value="right" size="xs">
+								<AlignEndVertical size={16} />
+							</ToggleButton>
+						</ToggleButtonGroup>
+					</div>
+				</div>
+			{/if}
+			{#if component.type !== 'formcomponent' && component.verticalAlignment}
+				<div class="flex flex-col gap-0.5">
+					<div class="text-xs font-semibold">Vertical</div>
+					<div>
+						<ToggleButtonGroup bind:selected={component.verticalAlignment}>
+							<ToggleButton position="left" value="top" size="xs">
+								<AlignStartHorizontal size={16} />
+							</ToggleButton>
+							<ToggleButton position="center" value="center" size="xs">
+								<AlignCenterHorizontal size={16} />
+							</ToggleButton>
+							<ToggleButton position="right" value="bottom" size="xs">
+								<AlignEndHorizontal size={16} />
+							</ToggleButton>
+						</ToggleButtonGroup>
+					</div>
+				</div>
+			{/if}
+		</div>
 	</PanelSection>
 {/if}