Replace range inputs with custom number input component (#343)

Author: cdauth

frontend/src/i18n/en.json

@@ -727,6 +727,11 @@
         "delete-description": "To delete this map, type {{code}} into the field and click the “Delete map” button.",
         "delete-code": "DELETE"
     },
+    "number-input": {
+        "integer-error": "Please enter a valid integer.",
+        "min-error": "Please enter a number not smaller than {{min}}.",
+        "max-error": "Please enter a number not greater than {{max}}."
+    },
     "pagination": {
         "first-label": "First",
         "previous-label": "Previous",

frontend/src/lib/components/edit-line-dialog.vue

@@ -123,7 +123,6 @@
 						<WidthPicker
 							:id="`${id}-width-input`"
 							v-model="line.width"
-							class="fm-custom-range-with-label"
 						></WidthPicker>
 					</div>
 				</div>

frontend/src/lib/components/edit-marker-dialog.vue

@@ -115,7 +115,6 @@
 						<SizePicker
 							:id="`${id}-size-input`"
 							v-model="marker.size"
-							class="fm-custom-range-with-label"
 						></SizePicker>
 					</div>
 				</div>

frontend/src/lib/components/edit-type-dialog/edit-type-dialog.vue

@@ -233,7 +233,6 @@
 								<SizePicker
 									:id="`${id}-default-size-input`"
 									v-model="type.defaultSize"
-									class="fm-custom-range-with-label"
 								></SizePicker>
 							</div>
 							<div class="col-sm-3">
@@ -315,7 +314,6 @@
 								<WidthPicker
 									:id="`${id}-default-width-input`"
 									v-model="type.defaultWidth"
-									class="fm-custom-range-with-label"
 								></WidthPicker>
 							</div>
 							<div class="col-sm-3">

frontend/src/lib/components/edit-type-dialog/edit-type-dropdown-dialog.vue

@@ -345,7 +345,6 @@
 							<SizePicker
 								:modelValue="option.size ?? type.defaultSize"
 								@update:modelValue="option.size = $event"
-								class="fm-custom-range-with-label"
 							></SizePicker>
 						</td>
 						<td v-if="fieldValue.controlIcon" class="field">
@@ -364,7 +363,6 @@
 							<WidthPicker
 								:modelValue="option.width ?? type.defaultWidth"
 								@update:modelValue="option.width = $event"
-								class="fm-custom-range-with-label"
 							></WidthPicker>
 						</td>
 						<td v-if="fieldValue.controlStroke" class="field">

frontend/src/lib/components/ui/number-input.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+	import type { Validator } from "./validated-form/validated-field.vue";
+	import ValidatedField from "./validated-form/validated-field.vue";
+	import { useValidatedModel } from "../../utils/vue";
+	import { computed } from "vue";
+	import { useI18n } from "../../utils/i18n";
+
+	const props = withDefaults(defineProps<{
+		validators?: Array<Validator<number>>;
+		min?: number;
+		max?: number;
+		steps?: number[];
+		id?: string;
+	}>(), {
+		steps: () => [1]
+	});
+
+	const i18n = useI18n();
+
+	function validateInteger(val: any) {
+		if (typeof val !== "string" || !val.match(/^\d+$/) || !isFinite(Number(val))) {
+			return i18n.t("number-input.integer-error");
+		}
+	}
+
+	function validateMin(val: any) {
+		if (props.min != null) {
+			const number = Number(val);
+			if (isFinite(number) && number < props.min) {
+				return i18n.t("number-input.min-error", { min: props.min });
+			}
+		}
+	}
+
+	function validateMax(val: any) {
+		if (props.max != null) {
+			const number = Number(val);
+			if (isFinite(number) && number > props.max) {
+				return i18n.t("number-input.max-error", { max: props.max });
+			}
+		}
+	}
+
+	const validators = computed(() => [
+		validateInteger,
+		validateMin,
+		validateMax,
+		...props.validators?.map((v): Validator<string> => (val, signal) => validateInteger(val) == null ? v(Number(val), signal) : undefined) ?? []
+	]);
+
+	const model = defineModel<number>({ required: true });
+
+	const value = useValidatedModel({
+		get: () => `${model.value}`,
+		set: (val) => {
+			model.value = Number(val);
+		},
+		validators: [validateInteger]
+	});
+
+	const valid = computed(() => validateInteger(value.value) == null);
+
+	function handleKeyDown(e: KeyboardEvent) {
+		let increase: number | undefined;
+		if (e.key === "ArrowUp" && !e.shiftKey && !e.metaKey && !e.altKey) {
+			increase = e.ctrlKey ? 5 : 1;
+		} else if (e.key === "ArrowDown" && !e.shiftKey && !e.metaKey && !e.altKey) {
+			increase = e.ctrlKey ? -5 : -1;
+		}
+
+		if (increase != null) {
+			e.preventDefault();
+
+			if (valid.value) {
+				if (increase > 0 && (props.max == null || model.value < props.max)) {
+					model.value = Math.min(props.max ?? Infinity, model.value + increase);
+				} else if (increase < 0 && (props.min == null || model.value > props.min)) {
+					model.value = Math.max(props.min ?? -Infinity, model.value + increase);
+				}
+			}
+		}
+	}
+</script>
+
+<template>
+	<ValidatedField
+		:value="value"
+		:validators="validators"
+		class="fm-number-input position-relative"
+	>
+		<template #default="slotProps">
+			<div class="input-group has-validation">
+				<template v-for="step in [...props.steps ?? []].reverse()" :key="step">
+					<button type="button" class="btn btn-secondary" :disabled="!valid || (props.min != null && model - step < props.min)" @click="model -= step" tabindex="-1">
+						&minus;{{step === 1 && props.steps?.length === 1 ? "" : `\u202f${step}`}}
+					</button>
+				</template>
+				<input
+					type="text"
+					class="form-control"
+					inputmode="numeric"
+					v-model="value"
+					:id="props.id"
+					:ref="slotProps.inputRef"
+					@keydown="handleKeyDown"
+				/>
+				<template v-for="step in props.steps ?? []" :key="step">
+					<button type="button" class="btn btn-secondary" :disabled="!valid || (props.max != null && model - step > props.max)" @click="model += step" tabindex="-1">
+						+{{step === 1 && props.steps?.length === 1 ? "" : `\u202f${step}`}}
+					</button>
+				</template>
+				<div class="invalid-tooltip">
+					{{slotProps.validationError}}
+				</div>
+			</div>
+		</template>
+	</ValidatedField>
+</template>
+
+<style lang="scss">
+	.fm-number-input input {
+		width: 100%;
+	}
+</style>

frontend/src/lib/components/ui/size-picker.vue

@@ -1,50 +1,22 @@
 <script setup lang="ts">
-	import { computed } from "vue";
-	import vTooltip from "../../utils/tooltip";
-	import ValidatedField, { type Validator } from "./validated-form/validated-field.vue";
+	import { type Validator } from "./validated-form/validated-field.vue";
+	import NumberInput from "./number-input.vue";
 
 	const props = defineProps<{
-		modelValue: number;
+		id?: string;
 		validators?: Array<Validator<number>>;
 	}>();
 
-	const emit = defineEmits<{
-		"update:modelValue": [value: number];
-	}>();
-
-	const value = computed({
-		get: () => props.modelValue,
-		set: (value) => {
-			emit("update:modelValue", value!);
-		}
-	});
+	const value = defineModel<number>({ required: true });
 </script>
 
 <template>
-	<ValidatedField
-		class="fm-size-picker position-relative"
-		:value="value"
+	<NumberInput
+		v-model="value"
+		class="fm-size-picker"
+		:id="props.id"
+		:min="15"
+		:steps="[1, 5]"
 		:validators="props.validators"
-	>
-		<template #default="slotProps">
-			<input
-				type="range"
-				class="custom-range"
-				min="15"
-				v-model.number="value"
-				:ref="slotProps.inputRef"
-				v-tooltip="`${value}`"
-			/>
-			<div class="invalid-tooltip">
-				{{slotProps.validationError}}
-			</div>
-		</template>
-	</ValidatedField>
-</template>
-
-<style lang="scss">
-	.fm-size-picker input {
-		width: 100%;
-		touch-action: pan-x;
-	}
-</style>
+	></NumberInput>
+</template>

frontend/src/lib/components/ui/validated-form/validated-field.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ref, watchEffect, computed, watchSyncEffect } from "vue";
+	import { ref, watchEffect, computed, watchSyncEffect, readonly } from "vue";
 	import { isPromise } from "facilmap-utils";
 	import { useDomEventListener } from "../../../utils/utils";
 	import { getValidatedForm } from "./validated-form.vue";
@@ -172,6 +172,12 @@
 	function setInputRef(el: any | null): void {
 		inputRef.value = el as FormElement ?? undefined;
 	}
+
+	const expose = readonly({
+		isValidating,
+		validationError: resolvedValidationError
+	});
+	defineExpose(expose);
 </script>
 
 <template>

frontend/src/lib/components/ui/width-picker.vue

@@ -1,51 +1,21 @@
 <script setup lang="ts">
-	import { computed } from "vue";
-	import vTooltip from "../../utils/tooltip";
 	import type { Validator } from "./validated-form/validated-field.vue";
-	import ValidatedField from "./validated-form/validated-field.vue";
+	import NumberInput from "./number-input.vue";
 
 	const props = defineProps<{
-		modelValue: number;
+		id?: string;
 		validators?: Array<Validator<number>>;
 	}>();
 
-	const emit = defineEmits<{
-		"update:modelValue": [value: number];
-	}>();
-
-	const value = computed({
-		get: () => props.modelValue,
-		set: (value) => {
-			emit("update:modelValue", value!);
-		}
-	});
+	const value = defineModel<number>({ required: true });
 </script>
 
 <template>
-	<ValidatedField
-		:value="value"
+	<NumberInput
+		v-model="value"
+		:id="props.id"
 		:validators="props.validators"
-		class="fm-width-picker position-relative"
-	>
-		<template #default="slotProps">
-			<input
-				type="range"
-				class="custom-range"
-				min="1"
-				v-model.number="value"
-				:ref="slotProps.inputRef"
-				v-tooltip="`${value}`"
-			/>
-			<div class="invalid-tooltip">
-				{{slotProps.validationError}}
-			</div>
-		</template>
-	</ValidatedField>
-</template>
-
-<style lang="scss">
-	.fm-width-picker input {
-		width: 100%;
-		touch-action: pan-x;
-	}
-</style>
+		class="fm-width-picker"
+		:min="1"
+	></NumberInput>
+</template>

frontend/src/lib/utils/vue.ts

@@ -30,6 +30,14 @@ export function computedOnResize<T>(getValue: () => T): Readonly<Ref<T>> {
 	return shallowReadonly(value);
 }
 
+/**
+ * Returns a ref that represents the value of a prop but falls back to an internal state if the prop is not specified. This can be used to make a model prop
+ * optional, so that if a v-model directive is used on the component, its state is persisted in the external model, but if v-model is not used, its state
+ * is persisted in an internal value.
+ * @param fallbackValue The initial value if the prop is undefined
+ * @param getProp A getter for the model value prop. If it returns undefined, the prop is considered not set and the internal value is used instead.
+ * @param onUpdate This is called when the value is set. This should emit the update:modelValue (or similar) event.
+ */
 export function useRefWithOverride<Value>(fallbackValue: Value, getProp: () => Value | undefined, onUpdate: (newValue: Value) => void): Ref<Value> {
 	const internalValue = ref(getProp() ?? fallbackValue);
 	return computed({
@@ -44,6 +52,28 @@ export function useRefWithOverride<Value>(fallbackValue: Value, getProp: () => V
 	});
 }
 
+/**
+ * Returns a ref that represents the internal value of a form field whose value is only applied to a model if it passes a certain validation. An example for this would be
+ * a text field that is bound to a number field. The user should be able to type in the field freely, even if the value is temporarily not a valid number (such as an empty
+ * string or a number ending in a decimal point), but the value should only be applied to a model of type `number` when it actually is a valid number.
+ * options.set() is only called with validated values.
+ */
+export function useValidatedModel<Value>(options: { get: () => Value; set: (newValue: Value) => void; validators: Array<(value: Value) => (string | undefined)> }): Ref<Value> {
+	const internalValue = ref(options.get());
+	watch(() => options.get(), (val) => {
+		internalValue.value = val;
+	});
+	return computed({
+		get: () => internalValue.value,
+		set: (val: Value) => {
+			internalValue.value = val;
+			if (options.validators.every((v) => v(val) == null)) {
+				options.set(val);
+			}
+		}
+	});
+}
+
 export function mapRef<K>(map: Map<K, Element | ComponentPublicInstance>, key: K): (ref: Element | ComponentPublicInstance | null) => void {
 	return (ref) => {
 		if (ref) {