fix(frontend): Add default value for text, number and date input + fix issues with number input + add date input in the settings panel (#1135)

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>

frontend/src/lib/components/apps/components/dateInputs/AppDateInput.svelte

@@ -4,6 +4,7 @@
 	import type { Output } from '../../rx'
 	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
@@ -17,6 +18,7 @@
 	let labelValue: string = 'Title'
 	let minValue: string = ''
 	let maxValue: string = ''
+	let defaultValue: string | undefined = undefined
 
 	$: outputs = $worldStore?.outputsById[id] as {
 		result: Output<string>
@@ -25,11 +27,16 @@
 	function handleInput() {
 		outputs?.result.set(input.value)
 	}
+
+	$: input && handleInput()
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
 <InputValue {id} input={configuration.minDate} bind:value={minValue} />
 <InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+
+<InputDefaultValue bind:input {defaultValue} />
 
 <AlignWrapper {verticalAlignment}>
 	<input

frontend/src/lib/components/apps/components/helpers/InputDefaultValue.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	type InputType = string | number | boolean
+	export let input: HTMLInputElement | undefined = undefined
+	export let defaultValue: InputType | undefined = undefined
+
+	function setInputValueToDefaultValue() {
+		if (defaultValue !== undefined && input) {
+			input.value = String(defaultValue)
+		}
+	}
+
+	function clearInputValue() {
+		if (input) {
+			input.value = ''
+		}
+	}
+
+	$: input && defaultValue && setInputValueToDefaultValue()
+	$: input &&
+		(defaultValue === '' || defaultValue === undefined || defaultValue === null) &&
+		clearInputValue()
+</script>

frontend/src/lib/components/apps/components/numberInputs/AppNumberInput.svelte

@@ -4,6 +4,7 @@
 	import type { Output } from '../../rx'
 	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
@@ -12,31 +13,39 @@
 	export const staticOutputs: string[] = ['result']
 
 	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
-	let value: number
-	let labelValue: string = 'Title'
+	let input: HTMLInputElement
+
+	let defaultValue: number | undefined = undefined
+	let placeholder: string | undefined = undefined
 
 	$: outputs = $worldStore?.outputsById[id] as {
 		result: Output<number | null>
 	}
-	$: if (value || !value) {
-		// Disallow 'e' character in numbers
-		// if(value && value.toString().includes('e')) {
-		// 	value = +value.toString().replaceAll('e', '')
-		// }
+
+	function handleInput() {
+		const value = input?.value
 		const num = isNaN(+value) ? null : +value
 		outputs?.result.set(num)
 	}
+
+	$: input && handleInput()
 </script>
 
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputDefaultValue bind:input {defaultValue} />
 
 <AlignWrapper {verticalAlignment}>
 	<input
-		bind:value
+		bind:this={input}
+		on:input={handleInput}
+		on:focus={(e) => {
+			e?.stopPropagation()
+			window.dispatchEvent(new Event('pointerup'))
+		}}
 		type="number"
 		inputmode="numeric"
 		pattern="\d*"
-		placeholder="Type..."
-		class="h-full"
+		{placeholder}
 	/>
 </AlignWrapper>

frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte

@@ -4,6 +4,7 @@
 	import type { Output } from '../../rx'
 	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
@@ -16,6 +17,7 @@
 	let input: HTMLInputElement
 
 	let placeholder: string | undefined = undefined
+	let defaultValue: string | undefined = undefined
 
 	$: outputs = $worldStore?.outputsById[id] as {
 		result: Output<string>
@@ -24,9 +26,13 @@
 	function handleInput() {
 		outputs?.result.set(input.value)
 	}
+
+	$: input && handleInput()
 </script>
 
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputDefaultValue bind:input {defaultValue} />
 
 <AlignWrapper {verticalAlignment}>
 	<input

frontend/src/lib/components/apps/editor/componentsPanel/data.ts

@@ -16,6 +16,11 @@ const inputs: ComponentSet = {
 					value: 'Type...',
 					fieldType: 'text',
 					onlyStatic: true
+				},
+				defaultValue: {
+					type: 'static',
+					value: undefined,
+					fieldType: 'text'
 				}
 			},
 			card: false
@@ -48,6 +53,11 @@ const inputs: ComponentSet = {
 					value: 'Type...',
 					fieldType: 'text',
 					onlyStatic: true
+				},
+				defaultValue: {
+					type: 'static',
+					value: undefined,
+					fieldType: 'number'
 				}
 			},
 			card: false
@@ -90,6 +100,11 @@ const inputs: ComponentSet = {
 					type: 'static',
 					value: '',
 					fieldType: 'date'
+				},
+				defaultValue: {
+					type: 'static',
+					value: undefined,
+					fieldType: 'date'
 				}
 			},
 			card: false
@@ -105,6 +120,11 @@ const inputs: ComponentSet = {
 					type: 'static',
 					value: 'Label',
 					fieldType: 'text'
+				},
+				defaultValue: {
+					type: 'static',
+					value: undefined,
+					fieldType: 'boolean'
 				}
 			},
 			card: false

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -20,6 +20,8 @@
 		<input type="number" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'textarea'}
 		<textarea bind:value={componentInput.value} />
+	{:else if componentInput.fieldType === 'date'}
+		<input type="date" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
 	{:else if componentInput.fieldType === 'select'}