fix: improve default value handling for date & date-time in apps

frontend/src/lib/components/DateInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte'
-	import { format, isValid } from 'date-fns'
+	import { format, isValid, parse } from 'date-fns'
 
 	export let value: string | undefined = undefined
 	export let autofocus: boolean | null = false
@@ -8,10 +8,22 @@
 	export let maxDate: string | undefined = undefined
 	export let dateFormat: string | undefined = 'dd-MM-yyyy'
 
-	let date: string | undefined = undefined
+	let date: string | undefined = computeDate(value)
 
 	const dispatch = createEventDispatcher()
 
+	function computeDate(value: string | undefined) {
+		if (dateFormat === undefined) {
+			dateFormat = 'dd-MM-yyyy'
+		}
+		if (value) {
+			const res = format(parse(value, dateFormat, new Date()), 'yyyy-MM-dd')
+			return res
+		} else {
+			return undefined
+		}
+	}
+
 	function updateValue(newDate: string | undefined) {
 		if (newDate && isValid(new Date(newDate))) {
 			if (dateFormat === undefined) {

frontend/src/lib/components/LightweightArgInput.svelte

@@ -181,9 +181,17 @@
 	}
 
 	let prevDefaultValue: any = undefined
+	let defaultChange = 0
+
 	async function changeDefaultValue(inputCat, defaultValue) {
-		if (value == null || value == undefined || deepEqual(value, prevDefaultValue)) {
+		if (
+			value == null ||
+			value == undefined ||
+			deepEqual(value, prevDefaultValue) ||
+			(prevDefaultValue != undefined && !deepEqual(defaultValue, prevDefaultValue))
+		) {
 			value = defaultValue
+			defaultChange += 1
 		}
 		prevDefaultValue = structuredClone(defaultValue)
 
@@ -498,11 +506,13 @@
 						{/each}
 					</select>
 				{:else if inputCat == 'date'}
-					{#if format === 'date'}
-						<DateInput bind:value dateFormat={extra['dateFormat']} />
-					{:else}
-						<DateTimeInput useDropdown bind:value />
-					{/if}
+					{#key defaultChange}
+						{#if format === 'date'}
+							<DateInput bind:value dateFormat={extra['dateFormat']} />
+						{:else}
+							<DateTimeInput useDropdown bind:value />
+						{/if}
+					{/key}
 				{:else if inputCat == 'base64'}
 					<div class="flex flex-col my-6 w-full">
 						<input

frontend/src/lib/components/LightweightSchemaForm.svelte

@@ -71,7 +71,10 @@
 	}
 </script>
 
-<div class={twMerge('w-full flex flex-col px-0.5 pb-2', largeGap ? 'gap-8' : 'gap-2')}>
+<div
+	class={twMerge('w-full flex flex-col px-0.5 pb-2', largeGap ? 'gap-8' : 'gap-2')}
+	on:pointerdown
+>
 	{#each keys as argName (argName)}
 		{#if typeof args == 'object' && schema?.properties[argName] && args}
 			<LightweightArgInput

frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte

@@ -126,20 +126,23 @@
 		<div
 			class={twMerge('p-2 overflow-auto h-full', css?.container?.class, 'wm-schema-form')}
 			style={css?.container?.style}
-			on:pointerdown|stopPropagation={(e) =>
-				!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
 		>
-			<LightweightSchemaForm
-				defaultValues={resolvedConfig.defaultValues}
-				dynamicEnums={resolvedConfig.dynamicEnums}
-				schema={result}
-				bind:isValid={valid}
-				bind:args
-				bind:this={schemaForm}
-				displayType={Boolean(resolvedConfig.displayType)}
-				largeGap={Boolean(resolvedConfig.largeGap)}
-				{css}
-			/>
+			<div
+				on:pointerdown|stopPropagation={(e) =>
+					!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+			>
+				<LightweightSchemaForm
+					defaultValues={resolvedConfig.defaultValues}
+					dynamicEnums={resolvedConfig.dynamicEnums}
+					schema={result}
+					bind:isValid={valid}
+					bind:args
+					bind:this={schemaForm}
+					displayType={Boolean(resolvedConfig.displayType)}
+					largeGap={Boolean(resolvedConfig.largeGap)}
+					{css}
+				/>
+			</div>
 		</div>
 	{:else}
 		<p class="m-2 italic">Empty form (no property)</p>