windmill-components 1.82.3 → 1.82.4

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

@@ -9,9 +9,11 @@ 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 { initOutput } from '../../../editor/appUtils';
+import { initConfig, initOutput } from '../../../editor/appUtils';
+import ResolveConfig from '../../helpers/ResolveConfig.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -20,9 +22,16 @@ export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 let result = undefined;
-let search = undefined;
+const { app, worldStore, componentControl, selectedComponent, hoverStore, mode } = getContext('AppViewerContext');
 let searchValue = '';
-let pagination = true;
+let outputs = initOutput($worldStore, id, {
+    selectedRowIndex: 0,
+    selectedRow: undefined,
+    loading: false,
+    result: [],
+    search: '',
+    page: 1
+});
 $: setSearch(searchValue);
 function setSearch(srch) {
     outputs?.search?.set(srch);
@@ -33,7 +42,7 @@ const options = writable({
     columns: []
 });
 let table = createSvelteTable(options);
-const { app, worldStore, componentControl, selectedComponent, hoverStore, mode } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['tablecomponent'].initialData.configuration, configuration);
 let selectedRowIndex = -1;
 function toggleRow(row, rowIndex, force = false) {
     if (selectedRowIndex !== rowIndex || force) {
@@ -53,22 +62,6 @@ $: 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;
@@ -87,23 +80,41 @@ function cellIsObject(x, props) {
     return typeof x != 'string' && typeof x(props) == 'object';
 }
 let filteredResult = [];
-$: 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 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);
 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());
+    }
 }
-$: result && rerender();
+$: filteredResult && rerender();
 $: css = concatCustomCss($app.css?.tablecomponent, customCss);
 $componentControl[id] = {
     right: (skipActions) => {
@@ -112,7 +123,7 @@ $componentControl[id] = {
         }
         const hasActions = actionButtons.length >= 1;
         if (hasActions) {
-            $selectedComponent = actionButtons[0].id;
+            $selectedComponent = [actionButtons[0].id];
             return true;
         }
         return false;
@@ -120,7 +131,14 @@ $componentControl[id] = {
 };
 </script>
 
-<InputValue {id} input={configuration.search} bind:value={search} />
+{#each Object.keys(components['tablecomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
@@ -132,7 +150,7 @@ $componentControl[id] = {
 			)}
 			style={css?.container?.style ?? ''}
 		>
-			{#if search !== 'Disabled'}
+			{#if resolvedConfig.search !== 'Disabled'}
 				<div class="px-2 py-1">
 					<div class="flex items-center">
 						<div class="grow max-w-[300px]">
@@ -221,7 +239,8 @@ $componentControl[id] = {
 										on:click={() => toggleRow(row, rowIndex)}
 									>
 										<div class="center-center h-full w-full flex-wrap gap-1 ">
-											{#each actionButtons as actionButton, actionIndex (actionIndex)}
+											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
+												<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 												<div
 													on:mouseover|stopPropagation={() => {
 														if (actionButton.id !== $hoverStore) {
@@ -233,13 +252,13 @@ $componentControl[id] = {
 															$hoverStore = undefined
 														}
 													}}
-													class={(actionButton.id === $selectedComponent ||
+													class={($selectedComponent?.includes(actionButton.id) ||
 														$hoverStore === actionButton.id) &&
 													$mode !== 'preview'
 														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
 														: ''}
 												>
-													{#if actionButton.id === $selectedComponent || $hoverStore === actionButton.id}
+													{#if $selectedComponent?.includes(actionButton.id) || $hoverStore === actionButton.id}
 														<span
 															title={`Id: ${actionButton.id}`}
 															class={classNames(
@@ -255,19 +274,22 @@ $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 }}
-															bind:componentInput={actionButton.componentInput}
+															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
@@ -276,7 +298,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
@@ -288,12 +310,15 @@ $componentControl[id] = {
 															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
-															{...actionButton}
+															id={actionButton.id}
+															customCss={actionButton.customCss}
+															configuration={actionButton.configuration}
+															recomputeIds={actionButton.recomputeIds}
 															preclickAction={async () => {
 																toggleRow(row, rowIndex)
 															}}
 															extraQueryParams={{ row: row.original }}
-															bind:componentInput={actionButton.componentInput}
+															componentInput={actionButton.componentInput}
 														/>
 													{/if}
 												</div>
@@ -308,8 +333,9 @@ $componentControl[id] = {
 			</div>
 
 			<AppTableFooter
-				paginationEnabled={pagination}
-				{result}
+				paginationEnabled
+				manualPagination={resolvedConfig.manualPagination}
+				result={filteredResult}
 				{table}
 				class={css?.tableFooter?.class}
 				style={css?.tableFooter?.style}
@@ -319,9 +345,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">
-				{JSON.stringify(result, null, 4)}
-				</pre>
+				<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap"
+					>{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,6 +5,7 @@ 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 };
@@ -24,7 +25,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)}
+	{#if (paginationEnabled && result.length > (tableOptions.initialState?.pagination?.pageSize ?? 25)) || manualPagination}
 		<div class="flex items-center gap-2 flex-row">
 			<Button
 				size="xs"

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

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

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

@@ -5,7 +5,8 @@ export let id;
 export let name;
 export let inlineScript;
 export let fields;
-export let doNotRecomputeOnInputChanged = false;
+export let doNotRecomputeOnInputChanged;
+export let recomputableByRefreshButton;
 let result = undefined;
 const { worldStore } = getContext('AppViewerContext');
 let outputs = initOutput($worldStore, id, {
@@ -28,8 +29,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,7 +7,8 @@ declare const __propDef: {
         name: string;
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        doNotRecomputeOnInputChanged?: boolean | undefined;
+        doNotRecomputeOnInputChanged: boolean;
+        recomputableByRefreshButton: boolean;
     };
     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 } = getContext('AppViewerContext');
+const { componentControl, runnableComponents } = 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, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
+        const r = await eval_like(input.expr, computeGlobalContext($worldStore, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
         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, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
+            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
             error = '';
             return r;
         }

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

@@ -1,18 +1,11 @@
 <script>import { RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
 export let componentId;
-const { runnableComponents, worldStore } = getContext('AppViewerContext');
+export let loading;
+const { runnableComponents } = getContext('AppViewerContext');
 async function refresh() {
-    window.dispatchEvent(new Event('pointerup'));
-    await $runnableComponents[componentId]?.();
+    await $runnableComponents[componentId]?.cb?.();
 }
-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,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         componentId: string;
+        loading: boolean;
     };
     events: {
         pointerdown: PointerEvent;

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

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

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

@@ -18,13 +18,14 @@ 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,6 +8,7 @@ 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;
@@ -34,7 +35,7 @@ function isRunnableDefined(componentInput) {
 }
 export function onSuccess() {
     if (recomputeIds) {
-        recomputeIds.map((id) => $runnableComponents?.[id]?.());
+        recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb());
     }
     if (!doOnSuccess)
         return;
@@ -73,6 +74,7 @@ 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,6 +8,7 @@ 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,5 +1,7 @@
 import type { World } from '../../rx';
-export declare function computeGlobalContext(world: World | undefined, id: string | undefined, extraContext?: any): any;
+export declare function computeGlobalContext(world: World | 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): Promise<any>;
+}>, worldStore: World | undefined, runnableComponents: Record<string, {
+    cb?: () => void;
+}>): 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, id, extraContext = {}) {
+export function computeGlobalContext(world, extraContext = {}) {
     return {
         ...Object.fromEntries(Object.entries(world?.outputsById ?? {})
-            .filter(([k, _]) => k != id && k != 'state')
+            .filter(([k, _]) => k != 'state')
             .map(([key, value]) => {
             return [
                 key,
@@ -15,7 +15,7 @@ export function computeGlobalContext(world, id, extraContext = {}) {
 }
 function create_context_function_template(eval_string, context, noReturn) {
     return `
-return async function (context, state, goto, setTab) {
+return async function (context, state, goto, setTab, recompute) {
 "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) {
+export async function eval_like(text, context = {}, noReturn, state, editor, controlComponents, worldStore, runnableComponents) {
     const proxiedState = new Proxy(state, {
         set(target, key, value) {
             if (typeof key !== 'string') {
@@ -88,5 +88,7 @@ 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,10 +27,6 @@ $: 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('mx-0.5', css?.input?.class ?? '')}
+			class={twMerge(css?.input?.class ?? '')}
 			style={css?.input?.style ?? ''}
 		/>
 	{/if}