107 lines
2.8 KiB
JavaScript
107 lines
2.8 KiB
JavaScript
import ngModule from '../../module';
|
|
import Component from '../../lib/component';
|
|
import './style.scss';
|
|
|
|
/**
|
|
* Basic element for user input. You can use this to supply a way for the user
|
|
* to toggle an option.
|
|
*
|
|
* @property {String} label Label to display along the component
|
|
* @property {any} field The value with which the element is linked
|
|
* @property {Boolean} checked Whether the checkbox is checked
|
|
* @property {Boolean} disabled Put component in disabled mode
|
|
* @property {Boolean} tripleState Switch between three states when clicked
|
|
* @property {Boolean} indeterminate Sets the element into indeterminate state
|
|
* @property {String} info Shows a text information tooltip to the user
|
|
*/
|
|
export default class Controller extends Component {
|
|
constructor($element, $, $attrs) {
|
|
super($element, $);
|
|
|
|
let element = this.element;
|
|
element.addEventListener('click', e => this.onClick(e));
|
|
element.addEventListener('keydown', e => this.onKeydown(e));
|
|
element.tabIndex = 0;
|
|
}
|
|
|
|
set field(value) {
|
|
this._field = value;
|
|
this.element.classList.toggle('checked', Boolean(value));
|
|
this.indeterminate = Boolean(value == null && this.tripleState);
|
|
}
|
|
|
|
get field() {
|
|
return this._field;
|
|
}
|
|
|
|
set disabled(value) {
|
|
this.element.tabIndex = !value ? 0 : -1;
|
|
this.element.classList.toggle('disabled', Boolean(value));
|
|
this._disabled = value;
|
|
}
|
|
|
|
get disabled() {
|
|
return this._disabled;
|
|
}
|
|
|
|
set indeterminate(value) {
|
|
this._indeterminate = value;
|
|
this.element.classList.toggle('indeterminate', Boolean(value));
|
|
}
|
|
|
|
get indeterminate() {
|
|
return this._indeterminate;
|
|
}
|
|
|
|
set tripleState(value) {
|
|
this._tripleState = value;
|
|
this.field = this.field;
|
|
}
|
|
|
|
get tripleState() {
|
|
return this._tripleState;
|
|
}
|
|
|
|
onClick(event) {
|
|
event.preventDefault();
|
|
|
|
if (this.disabled) return;
|
|
|
|
if (this.tripleState) {
|
|
if (this.field == null)
|
|
this.field = true;
|
|
else if (this.field)
|
|
this.field = false;
|
|
else
|
|
this.field = null;
|
|
} else
|
|
this.field = !this.field;
|
|
|
|
this.$.$applyAsync();
|
|
this.element.dispatchEvent(new Event('change'));
|
|
this.emit('change', {value: this.field});
|
|
}
|
|
|
|
onKeydown(event) {
|
|
if (event.code == 'Space')
|
|
this.onClick(event);
|
|
}
|
|
}
|
|
|
|
Controller.$inject = ['$element', '$scope', '$attrs'];
|
|
|
|
ngModule.component('vnCheck', {
|
|
template: require('./index.html'),
|
|
controller: Controller,
|
|
|
|
bindings: {
|
|
label: '@?',
|
|
field: '=?',
|
|
checked: '<?',
|
|
disabled: '<?',
|
|
tripleState: '<?',
|
|
indeterminate: '<?',
|
|
info: '@?'
|
|
}
|
|
});
|