37 lines
No EOL
1 KiB
Svelte
37 lines
No EOL
1 KiB
Svelte
<script lang="ts">
|
|
export let id: string;
|
|
export let value: number;
|
|
|
|
export let negative = false;
|
|
|
|
export let defaultValue = 0;
|
|
|
|
if (typeof value === "undefined") {
|
|
value = defaultValue;
|
|
}
|
|
|
|
function inputInteger(event: Event & {currentTarget: (EventTarget & HTMLInputElement)}) {
|
|
let newValue = event.currentTarget.value;
|
|
|
|
if (newValue != "" && !isNaN(Number(newValue))) {
|
|
value = Number(newValue);
|
|
}
|
|
else if (negative && newValue.startsWith("-")) {
|
|
if (isNaN(Number(newValue.slice(1, newValue.length)))) {
|
|
event.currentTarget.value = value.toString();
|
|
}
|
|
}
|
|
else {
|
|
event.currentTarget.value = value.toString();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<input {id} type="number" class="digitInput" style="--valuelen: {value.toString().length + 4}ch" on:input|preventDefault={inputInteger} {value}>
|
|
|
|
<style>
|
|
.digitInput {
|
|
width: var(--valuelen);
|
|
padding-left: 1ch;
|
|
}
|
|
</style> |