From 7a4416ef46f3745862af39b1e677e505aa6bbfd3 Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Mon, 28 Dec 2020 00:19:16 +0100
Subject: [PATCH] Unify disabling of step buttons in number input

---
 app/src/components/v-input/v-input.vue | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/src/components/v-input/v-input.vue b/app/src/components/v-input/v-input.vue
index f8d6aa5bef..1059465b3e 100644
--- a/app/src/components/v-input/v-input.vue
+++ b/app/src/components/v-input/v-input.vue
@@ -29,18 +29,18 @@
 			<span v-if="suffix" class="suffix">{{ suffix }}</span>
 			<span v-if="type === 'number' && !hideArrows">
 				<v-icon
-					:class="{ disabled: max !== null && parseInt(value, 10) >= max }"
+					:class="{ disabled: !isStepUpAllowed }"
 					name="keyboard_arrow_up"
 					class="step-up"
 					@click="stepUp"
-					:disabled="disabled"
+					:disabled="!isStepUpAllowed"
 				/>
 				<v-icon
-					:class="{ disabled: min !== null && parseInt(value, 10) <= min }"
+					:class="{ disabled: !isStepDownAllowed }"
 					name="keyboard_arrow_down"
 					class="step-down"
 					@click="stepDown"
-					:disabled="disabled"
+					:disabled="!isStepDownAllowed"
 				/>
 			</span>
 			<div v-if="$slots.append" class="append">
@@ -140,7 +140,15 @@ export default defineComponent({
 			return listeners.click !== undefined;
 		});
 
-		return { _listeners, hasClick, stepUp, stepDown, input };
+		const isStepUpAllowed = computed(() => {
+			return props.disabled === false && (props.max === null || parseInt(props.value, 10) < props.max);
+		});
+
+		const isStepDownAllowed = computed(() => {
+			return props.disabled === false && (props.min === null || parseInt(props.value, 10) > props.min);
+		});
+
+		return { _listeners, hasClick, stepUp, stepDown, isStepUpAllowed, isStepDownAllowed, input };
 
 		function processValue(event: KeyboardEvent) {
 			if (!event.key) return;
@@ -211,8 +219,7 @@ export default defineComponent({
 
 		function stepUp() {
 			if (!input.value) return;
-			if (props.disabled === true) return;
-			if (props.max !== null && props.value >= props.max) return;
+			if (isStepUpAllowed.value === false) return;
 
 			input.value.stepUp();
 
@@ -223,8 +230,7 @@ export default defineComponent({
 
 		function stepDown() {
 			if (!input.value) return;
-			if (props.disabled === true) return;
-			if (props.min !== null && props.value <= props.min) return;
+			if (isStepDownAllowed.value === false) return;
 
 			input.value.stepDown();