summaryrefslogtreecommitdiffhomepage
path: root/src/features/surface-host/ui/Number.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'src/features/surface-host/ui/Number.svelte')
-rw-r--r--src/features/surface-host/ui/Number.svelte72
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>