43 lines
1.2 KiB
Svelte
43 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from 'svelte'
|
|
import type { AppInput } from '../../inputType'
|
|
import type { Output } from '../../rx'
|
|
import type { AppEditorContext } from '../../types'
|
|
import AlignWrapper from '../helpers/AlignWrapper.svelte'
|
|
import InputValue from '../helpers/InputValue.svelte'
|
|
|
|
export let id: string
|
|
export let configuration: Record<string, AppInput>
|
|
export let inputType = 'text'
|
|
export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
|
|
export const staticOutputs: string[] = ['result']
|
|
|
|
const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
|
|
let input: HTMLInputElement
|
|
|
|
let placeholder: string | undefined = undefined
|
|
|
|
$: outputs = $worldStore?.outputsById[id] as {
|
|
result: Output<string>
|
|
}
|
|
|
|
function handleInput() {
|
|
outputs?.result.set(input.value)
|
|
}
|
|
</script>
|
|
|
|
<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
|
|
|
|
<AlignWrapper {verticalAlignment}>
|
|
<input
|
|
on:focus={(e) => {
|
|
e?.stopPropagation()
|
|
window.dispatchEvent(new Event('pointerup'))
|
|
}}
|
|
type={inputType}
|
|
bind:this={input}
|
|
on:input={handleInput}
|
|
{placeholder}
|
|
/>
|
|
</AlignWrapper>
|