diff options
Diffstat (limited to 'src/features/surface-host/ui/Number.svelte')
| -rw-r--r-- | src/features/surface-host/ui/Number.svelte | 72 |
1 files changed, 36 insertions, 36 deletions
diff --git a/src/features/surface-host/ui/Number.svelte b/src/features/surface-host/ui/Number.svelte index 0f3323d..5a67087 100644 --- a/src/features/surface-host/ui/Number.svelte +++ b/src/features/surface-host/ui/Number.svelte @@ -1,43 +1,43 @@ <script lang="ts"> - import type { InvokeMessage } from "@dispatch/ui-contract"; - import type { NumberFieldView } from "../logic/types"; + import type { InvokeMessage } from "@dispatch/ui-contract"; + import type { NumberFieldView } from "../logic/types"; - let { - field, - surfaceId, - onInvoke, - }: { field: NumberFieldView; surfaceId: string; onInvoke: (msg: InvokeMessage) => void } = - $props(); + let { + field, + surfaceId, + onInvoke, + }: { field: NumberFieldView; surfaceId: string; onInvoke: (msg: InvokeMessage) => void } = + $props(); - // Commit on change/Enter rather than every keystroke. Ignore empty/non-numeric - // input (the backend also floors/validates); send the new number as payload. - function commit(event: Event) { - const target = event.target as HTMLInputElement; - const next = target.valueAsNumber; - if (Number.isNaN(next)) return; - onInvoke({ - type: "invoke", - surfaceId, - actionId: field.action.actionId, - payload: next, - }); - } + // Commit on change/Enter rather than every keystroke. Ignore empty/non-numeric + // input (the backend also floors/validates); send the new number as payload. + function commit(event: Event) { + const target = event.target as HTMLInputElement; + const next = target.valueAsNumber; + if (Number.isNaN(next)) return; + onInvoke({ + type: "invoke", + surfaceId, + actionId: field.action.actionId, + payload: next, + }); + } </script> <label class="flex items-center justify-between gap-2 text-sm"> - <span>{field.label}</span> - <span class="flex items-center gap-1"> - <input - type="number" - class="input input-bordered input-sm w-24" - value={field.value} - min={field.min} - max={field.max} - step={field.step} - onchange={commit} - /> - {#if field.unit} - <span class="opacity-60">{field.unit}</span> - {/if} - </span> + <span>{field.label}</span> + <span class="flex items-center gap-1"> + <input + type="number" + class="input input-bordered input-sm w-24" + value={field.value} + min={field.min} + max={field.max} + step={field.step} + onchange={commit} + /> + {#if field.unit} + <span class="opacity-60">{field.unit}</span> + {/if} + </span> </label> |
