94 lines
2.3 KiB
JavaScript
94 lines
2.3 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 pick an option from multiple choices.
|
|
*
|
|
* @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 radio is checked
|
|
* @property {String} val The actual value of the option
|
|
* @property {Boolean} disabled Put component in disabled mode
|
|
*/
|
|
export default class Controller extends Component {
|
|
constructor($element, $, $attrs) {
|
|
super($element, $);
|
|
this.hasInfo = Boolean($attrs.info);
|
|
this.info = $attrs.info || null;
|
|
|
|
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) && value == this.val);
|
|
}
|
|
|
|
get field() {
|
|
return this._field;
|
|
}
|
|
|
|
set val(value) {
|
|
this._val = value;
|
|
this.field = this.field;
|
|
}
|
|
|
|
get val() {
|
|
return this._val;
|
|
}
|
|
|
|
set checked(value) {
|
|
this.field = value ? this.val : null;
|
|
this.$.$applyAsync();
|
|
}
|
|
|
|
get checked() {
|
|
return this.field == this.val;
|
|
}
|
|
|
|
set disabled(value) {
|
|
this.element.tabIndex = !value ? 0 : -1;
|
|
this.element.classList.toggle('disabled', Boolean(value));
|
|
this._disabled = value;
|
|
}
|
|
|
|
get disabled() {
|
|
return this._disabled;
|
|
}
|
|
|
|
onClick(event) {
|
|
if (this.disabled) return;
|
|
event.preventDefault();
|
|
|
|
this.field = this.val;
|
|
this.$.$applyAsync();
|
|
this.element.dispatchEvent(new Event('change'));
|
|
}
|
|
|
|
onKeydown(event) {
|
|
if (event.code == 'Space')
|
|
this.onClick(event);
|
|
}
|
|
}
|
|
|
|
Controller.$inject = ['$element', '$scope', '$attrs'];
|
|
|
|
ngModule.component('vnRadio', {
|
|
template: require('./index.html'),
|
|
controller: Controller,
|
|
|
|
bindings: {
|
|
label: '@?',
|
|
field: '=?',
|
|
checked: '<?',
|
|
val: '@?',
|
|
disabled: '<?'
|
|
}
|
|
});
|