github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-31 06:48:07 -05:00
Code Issues Packages Projects Releases Wiki Activity

Unify disabling of step buttons in number input

Browse Source
This commit is contained in:
Nicola Krumschmidt
2020-12-28 00:19:16 +01:00
parent f1f326d1d2
commit 7a4416ef46
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/src/components/v-input/v-input.vue
View File

@@ -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();