55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
|
import ngModule from '../../module';
|
||
|
|
import Component from 'core/lib/component';
|
||
|
|
import './style.scss';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Simple component to display a label with it's correspoding value. If @info
|
||
|
|
* property is provided it displays an aditional icon with the provided
|
||
|
|
* information.
|
||
|
|
*
|
||
|
|
* IMPORTANT!
|
||
|
|
*
|
||
|
|
* Please keep this component as simple as possible and without persistent
|
||
|
|
* watchers because it's used a lot of times in the application and could cause
|
||
|
|
* performance issues.
|
||
|
|
*
|
||
|
|
* @property {String} label The label
|
||
|
|
* @property {*} value The value
|
||
|
|
* @property {String} info Aditional information to display
|
||
|
|
*/
|
||
|
|
export default class Controller extends Component {
|
||
|
|
get label() {
|
||
|
|
return this._label;
|
||
|
|
}
|
||
|
|
|
||
|
|
set label(value) {
|
||
|
|
this._label = value;
|
||
|
|
|
||
|
|
let label = this.element.querySelector('vn-label');
|
||
|
|
label.textContent = this.$t(value);
|
||
|
|
}
|
||
|
|
|
||
|
|
get value() {
|
||
|
|
return this._value;
|
||
|
|
}
|
||
|
|
|
||
|
|
set value(value) {
|
||
|
|
this._value = value;
|
||
|
|
|
||
|
|
let span = this.element.querySelector('span');
|
||
|
|
span.title = value;
|
||
|
|
span.textContent = value != null && value != '' ? value : '-';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ngModule.component('vnLabelValue', {
|
||
|
|
controller: Controller,
|
||
|
|
template: require('./index.html'),
|
||
|
|
transclude: true,
|
||
|
|
bindings: {
|
||
|
|
label: '@',
|
||
|
|
value: '@?',
|
||
|
|
info: '@?'
|
||
|
|
}
|
||
|
|
});
|