windmill-components 1.82.4 → 1.82.5

package/components/apps/components/display/table/AppTable.svelte

@@ -9,11 +9,9 @@ import DebouncedInput from '../../helpers/DebouncedInput.svelte';
 import AppTableFooter from './AppTableFooter.svelte';
 import { tableOptions } from './tableOptions';
 import Alert from '../../../../common/alert/Alert.svelte';
-import { components } from '../../../editor/component';
 import { concatCustomCss } from '../../../utils';
 import { twMerge } from 'tailwind-merge';
-import { initConfig, initOutput } from '../../../editor/appUtils';
-import ResolveConfig from '../../helpers/ResolveConfig.svelte';
+import { initOutput } from '../../../editor/appUtils';
 export let id;
 export let componentInput;
 export let configuration;
@@ -22,16 +20,9 @@ export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 let result = undefined;
-const { app, worldStore, componentControl, selectedComponent, hoverStore, mode } = getContext('AppViewerContext');
+let search = undefined;
 let searchValue = '';
-let outputs = initOutput($worldStore, id, {
-    selectedRowIndex: 0,
-    selectedRow: undefined,
-    loading: false,
-    result: [],
-    search: '',
-    page: 1
-});
+let pagination = true;
 $: setSearch(searchValue);
 function setSearch(srch) {
     outputs?.search?.set(srch);
@@ -42,7 +33,7 @@ const options = writable({
     columns: []
 });
 let table = createSvelteTable(options);
-let resolvedConfig = initConfig(components['tablecomponent'].initialData.configuration, configuration);
+const { app, worldStore, componentControl, selectedComponent, hoverStore, mode } = getContext('AppViewerContext');
 let selectedRowIndex = -1;
 function toggleRow(row, rowIndex, force = false) {
     if (selectedRowIndex !== rowIndex || force) {
@@ -62,6 +53,22 @@ $: selectedRowIndex === -1 &&
     mounted &&
     outputs &&
     toggleRow({ original: result[0] }, 0);
+function setOptions(filteredResult) {
+    if (!Array.isArray(result)) {
+        return;
+    }
+    const headers = Array.from(new Set(result.flatMap((row) => Object.keys(row))));
+    $options = {
+        ...tableOptions,
+        data: filteredResult,
+        columns: headers.map((header) => {
+            return {
+                accessorKey: header,
+                cell: (info) => info.getValue()
+            };
+        })
+    };
+}
 function searchInResult(result, searchValue) {
     if (searchValue === '') {
         return result;
@@ -80,41 +87,23 @@ function cellIsObject(x, props) {
     return typeof x != 'string' && typeof x(props) == 'object';
 }
 let filteredResult = [];
-function setFilteredResult() {
-    if (resolvedConfig.search === 'By Runnable' || resolvedConfig.search === 'Disabled') {
-        filteredResult = result ?? [];
-    }
-    else {
-        filteredResult = searchInResult(result ?? [], searchValue);
-    }
-}
-$: (result || resolvedConfig.search || searchValue) && setFilteredResult();
-$: outputs.page.set($table.getState().pagination.pageIndex);
+$: filteredResult && setOptions(filteredResult);
+$: search === 'By Component' && (filteredResult = searchInResult(result ?? [], searchValue));
+$: (search === 'By Runnable' || search === 'Disabled') && (filteredResult = result ?? []);
+let outputs = initOutput($worldStore, id, {
+    selectedRowIndex: 0,
+    selectedRow: undefined,
+    loading: false,
+    result: [],
+    search: ''
+});
 function rerender() {
-    if (!Array.isArray(result)) {
-        return;
-    }
-    const headers = Array.from(new Set(result.flatMap((row) => (typeof row == 'object' ? Object.keys(row) : []))));
-    $options = {
-        ...tableOptions,
-        manualPagination: resolvedConfig.manualPagination,
-        data: filteredResult,
-        columns: headers.map((header) => {
-            return {
-                accessorKey: header,
-                cell: (info) => info.getValue()
-            };
-        })
-    };
     table = createSvelteTable(options);
     if (result) {
         toggleRow({ original: result[0] }, 0, true);
     }
-    if (outputs.page.peak()) {
-        $table.setPageIndex(outputs?.page.peak());
-    }
 }
-$: filteredResult && rerender();
+$: result && rerender();
 $: css = concatCustomCss($app.css?.tablecomponent, customCss);
 $componentControl[id] = {
     right: (skipActions) => {
@@ -123,7 +112,7 @@ $componentControl[id] = {
         }
         const hasActions = actionButtons.length >= 1;
         if (hasActions) {
-            $selectedComponent = [actionButtons[0].id];
+            $selectedComponent = actionButtons[0].id;
             return true;
         }
         return false;
@@ -131,14 +120,7 @@ $componentControl[id] = {
 };
 </script>
 
-{#each Object.keys(components['tablecomponent'].initialData.configuration) as key (key)}
-	<ResolveConfig
-		{id}
-		{key}
-		bind:resolvedConfig={resolvedConfig[key]}
-		configuration={configuration[key]}
-	/>
-{/each}
+<InputValue {id} input={configuration.search} bind:value={search} />
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
@@ -150,7 +132,7 @@ $componentControl[id] = {
 			)}
 			style={css?.container?.style ?? ''}
 		>
-			{#if resolvedConfig.search !== 'Disabled'}
+			{#if search !== 'Disabled'}
 				<div class="px-2 py-1">
 					<div class="flex items-center">
 						<div class="grow max-w-[300px]">
@@ -239,8 +221,7 @@ $componentControl[id] = {
 										on:click={() => toggleRow(row, rowIndex)}
 									>
 										<div class="center-center h-full w-full flex-wrap gap-1 ">
-											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
-												<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+											{#each actionButtons as actionButton, actionIndex (actionIndex)}
 												<div
 													on:mouseover|stopPropagation={() => {
 														if (actionButton.id !== $hoverStore) {
@@ -252,13 +233,13 @@ $componentControl[id] = {
 															$hoverStore = undefined
 														}
 													}}
-													class={($selectedComponent?.includes(actionButton.id) ||
+													class={(actionButton.id === $selectedComponent ||
 														$hoverStore === actionButton.id) &&
 													$mode !== 'preview'
 														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
 														: ''}
 												>
-													{#if $selectedComponent?.includes(actionButton.id) || $hoverStore === actionButton.id}
+													{#if actionButton.id === $selectedComponent || $hoverStore === actionButton.id}
 														<span
 															title={`Id: ${actionButton.id}`}
 															class={classNames(
@@ -274,22 +255,19 @@ $componentControl[id] = {
 															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
+															{...actionButton}
 															preclickAction={async () => {
 																toggleRow(row, rowIndex)
 															}}
-															id={actionButton.id}
-															customCss={actionButton.customCss}
-															configuration={actionButton.configuration}
-															recomputeIds={actionButton.recomputeIds}
 															extraQueryParams={{ row: row.original }}
-															componentInput={actionButton.componentInput}
+															bind:componentInput={actionButton.componentInput}
 															controls={{
 																left: () => {
 																	if (actionIndex === 0) {
-																		$selectedComponent = [id]
+																		$selectedComponent = id
 																		return true
 																	} else if (actionIndex > 0) {
-																		$selectedComponent = [actionButtons[actionIndex - 1].id]
+																		$selectedComponent = actionButtons[actionIndex - 1].id
 																		return true
 																	}
 																	return false
@@ -298,7 +276,7 @@ $componentControl[id] = {
 																	if (actionIndex === actionButtons.length - 1) {
 																		return id
 																	} else if (actionIndex < actionButtons.length - 1) {
-																		$selectedComponent = [actionButtons[actionIndex + 1].id]
+																		$selectedComponent = actionButtons[actionIndex + 1].id
 																		return true
 																	}
 																	return false
@@ -310,15 +288,12 @@ $componentControl[id] = {
 															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
-															id={actionButton.id}
-															customCss={actionButton.customCss}
-															configuration={actionButton.configuration}
-															recomputeIds={actionButton.recomputeIds}
+															{...actionButton}
 															preclickAction={async () => {
 																toggleRow(row, rowIndex)
 															}}
 															extraQueryParams={{ row: row.original }}
-															componentInput={actionButton.componentInput}
+															bind:componentInput={actionButton.componentInput}
 														/>
 													{/if}
 												</div>
@@ -333,9 +308,8 @@ $componentControl[id] = {
 			</div>
 
 			<AppTableFooter
-				paginationEnabled
-				manualPagination={resolvedConfig.manualPagination}
-				result={filteredResult}
+				paginationEnabled={pagination}
+				{result}
 				{table}
 				class={css?.tableFooter?.class}
 				style={css?.tableFooter?.style}
@@ -345,9 +319,9 @@ $componentControl[id] = {
 		<div class="flex flex-col h-full w-full overflow-auto">
 			<Alert title="Parsing issues" type="error" size="xs" class="h-full w-full ">
 				The result should be an array of objects. Received:
-				<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap"
-					>{JSON.stringify(result, null, 4)}</pre
-				>
+				<pre class="w-full bg-white p-2 rounded-md">
+				{JSON.stringify(result, null, 4)}
+				</pre>
 			</Alert>
 		</div>
 	{/if}

package/components/apps/components/display/table/AppTable.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { BaseAppComponent, ComponentCustomCSS, RichConfigurations } from '../../../types';
 import type { AppInput } from '../../../inputType';
-import { type ButtonComponent } from '../../../editor/component';
+import type { ButtonComponent } from '../../../editor/component';
 declare const __propDef: {
     props: {
         id: string;

package/components/apps/components/display/table/AppTableFooter.svelte

@@ -5,7 +5,6 @@ import { twMerge } from 'tailwind-merge';
 import { tableOptions } from './tableOptions';
 export let result;
 export let paginationEnabled = false;
-export let manualPagination;
 export let table;
 let c = '';
 export { c as class };
@@ -25,7 +24,7 @@ function downloadResultAsJSON() {
 	class={twMerge('px-2 py-1 text-xs gap-2 items-center justify-between', c, 'flex flex-row')}
 	{style}
 >
-	{#if (paginationEnabled && result.length > (tableOptions.initialState?.pagination?.pageSize ?? 25)) || manualPagination}
+	{#if paginationEnabled && result.length > (tableOptions.initialState?.pagination?.pageSize ?? 25)}
 		<div class="flex items-center gap-2 flex-row">
 			<Button
 				size="xs"

package/components/apps/components/display/table/AppTableFooter.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
     props: {
         result: Record<string, any>[];
         paginationEnabled?: boolean | undefined;
-        manualPagination: boolean;
         table: Readable<Table<Record<string, any>>>;
         class?: string | undefined;
         style?: string | undefined;

package/components/apps/components/display/table/tableOptions.js

@@ -9,6 +9,6 @@ const tableOptions = {
         pagination: {
             pageSize: 25
         }
-    }
+    },
 };
 export { tableOptions };

package/components/apps/components/helpers/DebouncedInput.svelte

@@ -18,7 +18,6 @@ function debounce(event) {
 <input
 	bind:value
 	{placeholder}
-	on:pointerdown|stopPropagation
 	on:keyup={debounce}
 	class={parentClass}
 	{...$$restProps}

package/components/apps/components/helpers/DebouncedInput.svelte.d.ts

@@ -8,8 +8,6 @@ declare const __propDef: {
         class?: string | undefined;
     };
     events: {
-        pointerdown: PointerEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/components/helpers/HiddenComponent.svelte

@@ -5,8 +5,7 @@ export let id;
 export let name;
 export let inlineScript;
 export let fields;
-export let doNotRecomputeOnInputChanged;
-export let recomputableByRefreshButton;
+export let doNotRecomputeOnInputChanged = false;
 let result = undefined;
 const { worldStore } = getContext('AppViewerContext');
 let outputs = initOutput($worldStore, id, {
@@ -29,8 +28,8 @@ let outputs = initOutput($worldStore, id, {
 		type: 'runnableByName'
 	}}
 	wrapperClass="hidden"
+	recomputable
 	{outputs}
-	{recomputableByRefreshButton}
 >
 	<slot />
 </RunnableComponent>

package/components/apps/components/helpers/HiddenComponent.svelte.d.ts

@@ -7,8 +7,7 @@ declare const __propDef: {
         name: string;
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        doNotRecomputeOnInputChanged: boolean;
-        recomputableByRefreshButton: boolean;
+        doNotRecomputeOnInputChanged?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/InputValue.svelte

@@ -9,7 +9,7 @@ export let id = undefined;
 export let error = '';
 export let extraContext = {};
 export let key = '';
-const { componentControl, runnableComponents } = getContext('AppViewerContext');
+const { componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 if (input == undefined) {
     dispatch('done');
@@ -67,7 +67,7 @@ async function handleConnection() {
 }
 async function evalExpr(input) {
     try {
-        const r = await eval_like(input.expr, computeGlobalContext($worldStore, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+        const r = await eval_like(input.expr, computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
         error = '';
         return r;
     }
@@ -81,7 +81,7 @@ async function getValue(input) {
         return;
     if (input.type === 'template' && isCodeInjection(input.eval)) {
         try {
-            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
             error = '';
             return r;
         }

package/components/apps/components/helpers/RefreshButton.svelte

@@ -1,11 +1,18 @@
 <script>import { RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
 export let componentId;
-export let loading;
-const { runnableComponents } = getContext('AppViewerContext');
+const { runnableComponents, worldStore } = getContext('AppViewerContext');
 async function refresh() {
-    await $runnableComponents[componentId]?.cb?.();
+    window.dispatchEvent(new Event('pointerup'));
+    await $runnableComponents[componentId]?.();
 }
+let loading = false;
+$: $worldStore?.outputsById[componentId]?.['loading']?.subscribe({
+    id: 'refresh-' + componentId,
+    next: (value) => {
+        loading = value;
+    }
+});
 </script>
 
 <button

package/components/apps/components/helpers/RefreshButton.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         componentId: string;
-        loading: boolean;
     };
     events: {
         pointerdown: PointerEvent;

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -23,25 +23,22 @@ export let wrapperClass = '';
 export let wrapperStyle = '';
 export let initializing = undefined;
 export let render;
+export let recomputable = false;
 export let outputs;
 export let extraKey = '';
 export let doNotRecomputeOnInputChanged = false;
-export let loading = false;
-export let recomputableByRefreshButton = true;
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
-$runnableComponents[id] = {
-    autoRefresh: autoRefresh && recomputableByRefreshButton,
-    cb: async (inlineScript) => {
+if (recomputable || autoRefresh) {
+    $runnableComponents[id] = async (inlineScript) => {
         await executeComponent(true, inlineScript);
-    }
-};
-$runnableComponents = $runnableComponents;
+    };
+    $runnableComponents = $runnableComponents;
+}
 let args = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
 let executeTimeout = undefined;
-$: outputs.loading?.set(loading);
 function setDebouncedExecute() {
     executeTimeout && clearTimeout(executeTimeout);
     executeTimeout = setTimeout(() => {
@@ -106,16 +103,16 @@ function stripSchema(inputs, s) {
 }
 async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
-        loading = true;
+        outputs.loading?.set(true);
         try {
-            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, id, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore);
             await setResult(r);
             $state = $state;
         }
         catch (e) {
             sendUserToast('Error running frontend script: ' + e.message, true);
         }
-        loading = false;
+        outputs.loading?.set(false);
         return;
     }
     if (noBackend) {
@@ -127,7 +124,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
         return;
     }
-    loading = true;
+    outputs.loading?.set(true);
     try {
         let njob = await testJobLoader?.abstractRun(() => {
             const nonStaticRunnableInputs = {};
@@ -175,8 +172,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         }
     }
     catch (e) {
-        setResult({ error: e.body ?? e.message });
-        loading = false;
+        outputs.loading?.set(false);
     }
 }
 export async function runComponent() {
@@ -184,7 +180,7 @@ export async function runComponent() {
         await executeComponent();
     }
     catch (e) {
-        setResult({ error: e.body ?? e.message });
+        console.error(e);
     }
 }
 let lastStartedAt = Date.now();
@@ -200,7 +196,7 @@ async function setResult(res) {
     const hasRes = res !== undefined && res !== null;
     if (transformer) {
         $worldStore.newOutput(id, 'raw', res);
-        res = await eval_like(transformer.content, computeGlobalContext($worldStore, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+        res = await eval_like(transformer.content, computeGlobalContext($worldStore, id, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore);
         if (hasRes && res === undefined) {
             res = {
                 error: {
@@ -260,7 +256,7 @@ async function setResult(res) {
 				setResult(e.detail.result)
 			}
 		}
-		loading = false
+		outputs.loading?.set(false)
 	}}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
@@ -311,7 +307,7 @@ async function setResult(res) {
 		{/if}
 		{#if !initializing && autoRefresh === true}
 			<div class="flex absolute top-1 right-1 z-50">
-				<RefreshButton {loading} componentId={id} />
+				<RefreshButton componentId={id} />
 			</div>
 		{/if}
 	</div>

package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -18,14 +18,13 @@ declare const __propDef: {
         wrapperStyle?: string | undefined;
         initializing?: boolean | undefined;
         render: boolean;
+        recomputable?: boolean | undefined;
         outputs: {
             result: Output<any>;
             loading: Output<boolean>;
         };
         extraKey?: string | undefined;
         doNotRecomputeOnInputChanged?: boolean | undefined;
-        loading?: boolean | undefined;
-        recomputableByRefreshButton?: boolean | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -8,7 +8,6 @@ export let componentInput;
 export let id;
 export let result = undefined;
 export let initializing = true;
-export let loading = false;
 export let extraQueryParams = {};
 export let autoRefresh = true;
 export let runnableComponent = undefined;
@@ -35,7 +34,7 @@ function isRunnableDefined(componentInput) {
 }
 export function onSuccess() {
     if (recomputeIds) {
-        recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb());
+        recomputeIds.map((id) => $runnableComponents?.[id]?.());
     }
     if (!doOnSuccess)
         return;
@@ -74,7 +73,6 @@ export function onSuccess() {
 {:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
 	<RunnableComponent
 		{extraKey}
-		bind:loading
 		bind:this={runnableComponent}
 		fields={componentInput.fields}
 		bind:result

package/components/apps/components/helpers/RunnableWrapper.svelte.d.ts

@@ -8,7 +8,6 @@ declare const __propDef: {
         id: string;
         result?: any;
         initializing?: boolean | undefined;
-        loading?: boolean | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         autoRefresh?: boolean | undefined;
         runnableComponent?: RunnableComponent | undefined;

package/components/apps/components/helpers/eval.d.ts

@@ -1,7 +1,5 @@
 import type { World } from '../../rx';
-export declare function computeGlobalContext(world: World | undefined, extraContext?: any): any;
+export declare function computeGlobalContext(world: World | undefined, id: string | undefined, extraContext?: any): any;
 export declare function eval_like(text: string, context: {} | undefined, noReturn: boolean, state: Record<string, any>, editor: boolean, controlComponents: Record<string, {
     setTab?: (index: number) => void;
-}>, worldStore: World | undefined, runnableComponents: Record<string, {
-    cb?: () => void;
-}>): Promise<any>;
+}>, worldStore: World | undefined): Promise<any>;

package/components/apps/components/helpers/eval.js

@@ -1,9 +1,9 @@
 import { sendUserToast } from '../../../../utils';
 import { isPlainObject } from 'lodash';
-export function computeGlobalContext(world, extraContext = {}) {
+export function computeGlobalContext(world, id, extraContext = {}) {
     return {
         ...Object.fromEntries(Object.entries(world?.outputsById ?? {})
-            .filter(([k, _]) => k != 'state')
+            .filter(([k, _]) => k != id && k != 'state')
             .map(([key, value]) => {
             return [
                 key,
@@ -15,7 +15,7 @@ export function computeGlobalContext(world, extraContext = {}) {
 }
 function create_context_function_template(eval_string, context, noReturn) {
     return `
-return async function (context, state, goto, setTab, recompute) {
+return async function (context, state, goto, setTab) {
 "use strict";
 ${Object.keys(context).length > 0
         ? `let ${Object.keys(context).map((key) => ` ${key} = context['${key}']`)};`
@@ -58,7 +58,7 @@ function isSerializable(obj) {
     }
     return true;
 }
-export async function eval_like(text, context = {}, noReturn, state, editor, controlComponents, worldStore, runnableComponents) {
+export async function eval_like(text, context = {}, noReturn, state, editor, controlComponents, worldStore) {
     const proxiedState = new Proxy(state, {
         set(target, key, value) {
             if (typeof key !== 'string') {
@@ -88,7 +88,5 @@ export async function eval_like(text, context = {}, noReturn, state, editor, con
         }
     }, (id, index) => {
         controlComponents[id]?.setTab?.(index);
-    }, (id) => {
-        runnableComponents[id]?.cb?.();
     });
 }

package/components/apps/components/inputs/AppCheckbox.svelte

@@ -27,6 +27,10 @@ $: css = concatCustomCss($app.css?.checkboxcomponent, customCss);
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<Toggle
+		on:pointerdown={(e) => {
+			e?.stopPropagation()
+			window.dispatchEvent(new Event('pointerup'))
+		}}
 		checked={defaultValue}
 		options={{ right: labelValue }}
 		textClass={css?.text?.class ?? ''}

package/components/apps/components/inputs/AppDateInput.svelte

@@ -35,14 +35,14 @@ $: css = concatCustomCss($app.css?.dateinputcomponent, customCss);
 <AlignWrapper {render} {verticalAlignment}>
 	{#if inputType === 'date'}
 		<input
-			on:focus={() => ($selectedComponent = [id])}
+			on:focus={() => ($selectedComponent = id)}
 			on:pointerdown|stopPropagation
 			type="date"
 			bind:value
 			min={minValue}
 			max={maxValue}
 			placeholder="Type..."
-			class={twMerge(css?.input?.class ?? '')}
+			class={twMerge('mx-0.5', css?.input?.class ?? '')}
 			style={css?.input?.style ?? ''}
 		/>
 	{/if}