54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import Vue from 'vue'
|
|
import { Component, Prop } from 'vue-property-decorator'
|
|
import * as uuid from "uuid";
|
|
|
|
@Component({
|
|
template: require('../../../components/ui/numeric.html'),
|
|
inheritAttrs: false
|
|
})
|
|
export class UiNumericInput extends Vue {
|
|
@Prop({
|
|
type: String,
|
|
default: () => `uuid-${uuid.v4()}`
|
|
})
|
|
id: string;
|
|
|
|
@Prop(Number)
|
|
value: number;
|
|
|
|
@Prop({ type: Number, default: 1 })
|
|
step: number;
|
|
|
|
@Prop({ type: Number, default: -Infinity })
|
|
min: number;
|
|
|
|
@Prop({ type: Number, default: Infinity })
|
|
max: number;
|
|
|
|
update(ev) {
|
|
this.$emit('input', this.clamp(Number.parseInt(ev.target.value)));
|
|
}
|
|
|
|
increment() {
|
|
this.$emit('input', this.clamp(this.value + this.step));
|
|
}
|
|
|
|
decrement() {
|
|
this.$emit('input', this.clamp(this.value - this.step));
|
|
}
|
|
|
|
clamp(value: number) {
|
|
return Math.max(Math.min(value, this.max), this.min);
|
|
}
|
|
|
|
get canIncrement(): boolean {
|
|
return this.max - this.value > Number.EPSILON * 2;
|
|
}
|
|
|
|
get canDecrement(): boolean {
|
|
return this.value - this.min > Number.EPSILON * 2;
|
|
}
|
|
}
|
|
|
|
Vue.component('UiNumericInput', UiNumericInput);
|