106 lines
2.5 KiB
JavaScript
106 lines
2.5 KiB
JavaScript
import ngModule from '../../module';
|
|
import Textfield from '../textfield/textfield';
|
|
import './style.scss';
|
|
|
|
export default class InputNumber extends Textfield {
|
|
constructor($element, $scope, $attrs, vnTemplate, $transclude) {
|
|
super($element, $scope, $attrs, vnTemplate, $transclude);
|
|
this.displayControls = true;
|
|
this.input.addEventListener('change', () => {
|
|
this.validateValue();
|
|
});
|
|
}
|
|
|
|
get value() {
|
|
return this._value;
|
|
}
|
|
|
|
set value(value) {
|
|
this._value = value;
|
|
this.hasValue = this._value !== null;
|
|
|
|
if (this.hasValue) this.element.classList.add('not-empty');
|
|
else this.element.classList.remove('not-empty');
|
|
|
|
this.element.querySelector('.infix').classList.remove('invalid', 'validated');
|
|
}
|
|
|
|
get max() {
|
|
return this.input.max;
|
|
}
|
|
|
|
set max(value) {
|
|
if (value)
|
|
this.input.max = value;
|
|
}
|
|
|
|
get min() {
|
|
return this.input.min;
|
|
}
|
|
|
|
set min(value) {
|
|
if (!value) value = 0;
|
|
this.input.min = value;
|
|
}
|
|
|
|
get step() {
|
|
return parseFloat(this.input.step);
|
|
}
|
|
|
|
set step(value) {
|
|
this.input.step = value;
|
|
}
|
|
|
|
validateValue() {
|
|
if ((this.validate() !== undefined && !this.validate()) ||
|
|
(this.max && this.value > this.max) ||
|
|
(this.min && this.value < this.min) ||
|
|
(this.displayControls && (this.step && this.value % this.step != 0)))
|
|
this.$element[0].querySelector('.infix').classList.add('invalid', 'validated');
|
|
|
|
|
|
if (this.onChange)
|
|
this.onChange();
|
|
}
|
|
|
|
add() {
|
|
if (this.step && this.value % this.step != 0)
|
|
this.value += (this.step - this.value % this.step);
|
|
else
|
|
this.value += this.step;
|
|
|
|
|
|
this.validateValue();
|
|
}
|
|
|
|
remove() {
|
|
if (this.step && this.value % this.step != 0)
|
|
this.value -= (this.step + this.value % this.step);
|
|
else
|
|
this.value -= this.step;
|
|
|
|
this.validateValue();
|
|
}
|
|
}
|
|
|
|
InputNumber.$inject = ['$element', '$scope', '$attrs', 'vnTemplate', '$transclude'];
|
|
|
|
ngModule.component('vnInputNumber', {
|
|
template: require('./index.html'),
|
|
controller: InputNumber,
|
|
bindings: {
|
|
label: '@?',
|
|
name: '@?',
|
|
disabled: '<?',
|
|
min: '<?',
|
|
max: '<?',
|
|
step: '<?',
|
|
displayControls: '<?',
|
|
rule: '@?',
|
|
value: '=model',
|
|
validate: '&',
|
|
onChange: '&',
|
|
onClear: '&'
|
|
}
|
|
});
|