103 lines
2.6 KiB
JavaScript
103 lines
2.6 KiB
JavaScript
import ngModule from '../../module';
|
|
import Input from '../../lib/input';
|
|
import './style.scss';
|
|
|
|
export default class Textfield extends Input {
|
|
constructor($element, $scope, $attrs, vnTemplate) {
|
|
super($element, $scope);
|
|
vnTemplate.normalizeInputAttrs($attrs);
|
|
this._value = null;
|
|
this.type = $attrs.type;
|
|
this.showActions = false;
|
|
this.hasInfo = Boolean($attrs.info);
|
|
this.info = $attrs.info || null;
|
|
this.hasFocus = false;
|
|
this.hasMouseIn = false;
|
|
|
|
this.input.addEventListener('keydown', () => {
|
|
if (!this.oldValue)
|
|
this.saveOldValue();
|
|
});
|
|
|
|
this.input.addEventListener('keyup', e => {
|
|
if (e.key == 'Escape') {
|
|
this.value = this.oldValue;
|
|
this.cancelled = true;
|
|
e.stopPropagation();
|
|
}
|
|
if (e.key == 'Escape' || e.key == 'Enter')
|
|
this.input.blur();
|
|
});
|
|
|
|
this.input.addEventListener('blur', () => {
|
|
if (this.onChange && !this.cancelled && (this.oldValue != this.value)) {
|
|
this.onChange();
|
|
this.saveOldValue();
|
|
} else
|
|
this.cancelled = false;
|
|
});
|
|
}
|
|
|
|
$postLink() {
|
|
this.saveOldValue();
|
|
}
|
|
|
|
saveOldValue() {
|
|
this.oldValue = this.value;
|
|
}
|
|
|
|
set value(value) {
|
|
this._value = (value === undefined || value === '') ? null : value;
|
|
this.input.value = this._value;
|
|
this.hasValue = this._value !== null;
|
|
|
|
if (this.hasValue) this.element.classList.add('not-empty');
|
|
else this.element.classList.remove('not-empty');
|
|
}
|
|
|
|
get value() {
|
|
return this._value;
|
|
}
|
|
|
|
set type(value) {
|
|
this._type = value || 'text';
|
|
}
|
|
|
|
get type() {
|
|
return this._type;
|
|
}
|
|
|
|
set vnTabIndex(value) {
|
|
this.input.tabindex = value;
|
|
}
|
|
|
|
clear() {
|
|
this.saveOldValue();
|
|
this.value = null;
|
|
if (this.onClear) this.onClear();
|
|
this.input.focus();
|
|
}
|
|
}
|
|
Textfield.$inject = ['$element', '$scope', '$attrs', 'vnTemplate'];
|
|
|
|
ngModule.component('vnTextfield', {
|
|
template: require('./textfield.html'),
|
|
transclude: {
|
|
leftIcons: '?tLeftIcons',
|
|
rightIcons: '?tRightIcons'
|
|
},
|
|
controller: Textfield,
|
|
bindings: {
|
|
value: '=model',
|
|
label: '@?',
|
|
name: '@?',
|
|
disabled: '<?',
|
|
readonly: '<?',
|
|
rule: '@?',
|
|
type: '@?',
|
|
vnTabIndex: '@?',
|
|
onChange: '&',
|
|
onClear: '&'
|
|
}
|
|
});
|