77 lines
1.8 KiB
JavaScript
77 lines
1.8 KiB
JavaScript
import ngModule from '../../module';
|
|
import Toggle from '../toggle';
|
|
import './style.scss';
|
|
|
|
/**
|
|
* Basic element for user input. You can use this to supply a way for the user
|
|
* to toggle an option.
|
|
*
|
|
* @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 Check extends Toggle {
|
|
set field(value) {
|
|
super.field = value;
|
|
this.element.classList.toggle('checked', Boolean(value));
|
|
this.indeterminate = Boolean(value == null && this.tripleState);
|
|
}
|
|
|
|
get field() {
|
|
return super.field;
|
|
}
|
|
|
|
set checked(value) {
|
|
this.field = Boolean(value);
|
|
}
|
|
|
|
get checked() {
|
|
return Boolean(this.field);
|
|
}
|
|
|
|
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 = value;
|
|
}
|
|
|
|
get tripleState() {
|
|
return this._tripleState;
|
|
}
|
|
|
|
onClick(event) {
|
|
if (super.onClick(event)) return;
|
|
let value;
|
|
|
|
if (this.tripleState) {
|
|
if (this.field == null)
|
|
value = true;
|
|
else if (this.field)
|
|
value = false;
|
|
else
|
|
value = null;
|
|
} else
|
|
value = !this.field;
|
|
|
|
this.change(value);
|
|
}
|
|
}
|
|
|
|
ngModule.vnComponent('vnCheck', {
|
|
template: require('./index.html'),
|
|
controller: Check,
|
|
bindings: {
|
|
tripleState: '<?',
|
|
indeterminate: '<?',
|
|
info: '@?'
|
|
}
|
|
});
|