ea0994ed45
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 17s
105 lines
2.2 KiB
Vue
105 lines
2.2 KiB
Vue
<template>
|
|
<div class="number-input">
|
|
<input
|
|
type="number"
|
|
:value="modelValue"
|
|
:min="min"
|
|
:max="max"
|
|
:step="step"
|
|
:id="id"
|
|
:class="inputClass"
|
|
:disabled="disabled"
|
|
@input="handleInput"
|
|
/>
|
|
<div class="spinner-buttons">
|
|
<button
|
|
type="button"
|
|
class="spinner-btn spinner-up"
|
|
@click="increment"
|
|
:disabled="disabled || (max !== undefined && modelValue >= max)"
|
|
tabindex="-1"
|
|
>
|
|
<svg
|
|
width="8"
|
|
height="6"
|
|
viewBox="0 0 8 6"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M4 0L7.4641 6H0.535898L4 0Z" fill="currentColor" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="spinner-btn spinner-down"
|
|
@click="decrement"
|
|
:disabled="disabled || (min !== undefined && modelValue <= min)"
|
|
tabindex="-1"
|
|
>
|
|
<svg
|
|
width="8"
|
|
height="6"
|
|
viewBox="0 0 8 6"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M4 6L0.535898 0H7.4641L4 6Z" fill="currentColor" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
min: {
|
|
type: Number,
|
|
default: undefined,
|
|
},
|
|
max: {
|
|
type: Number,
|
|
default: undefined,
|
|
},
|
|
step: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: undefined,
|
|
},
|
|
inputClass: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const handleInput = (event) => {
|
|
const value = Number(event.target.value);
|
|
emit('update:modelValue', value);
|
|
};
|
|
|
|
const increment = () => {
|
|
const newValue = props.modelValue + props.step;
|
|
if (props.max === undefined || newValue <= props.max) {
|
|
emit('update:modelValue', newValue);
|
|
}
|
|
};
|
|
|
|
const decrement = () => {
|
|
const newValue = props.modelValue - props.step;
|
|
if (props.min === undefined || newValue >= props.min) {
|
|
emit('update:modelValue', newValue);
|
|
}
|
|
};
|
|
</script>
|