salix/front/core/components/button-menu/button-menu.js

112 lines
2.5 KiB
JavaScript

import ngModule from '../../module';
import Input from '../../lib/input';
import assignProps from '../../lib/assign-props';
import './style.scss';
export default class ButtonMenu extends Input {
constructor($element, $scope, $transclude) {
super($element, $scope);
this.$transclude = $transclude;
this.input = this.element.querySelector('.mdl-button');
$element.on('click', e => this.onClick(e));
}
get model() {
return this._model;
}
set model(value) {
this.dropDownAssign({model: value});
}
get data() {
return this._data;
}
set data(value) {
this.dropDownAssign({data: value});
}
get url() {
return this._url;
}
set url(value) {
this.dropDownAssign({url: value});
}
dropDownAssign(props) {
for (let prop in props)
this[`_${prop}`] = props[prop];
if (this.$.dropDown)
Object.assign(this.$.dropDown, props);
}
onClick(event) {
if (event.defaultPrevented) return;
event.preventDefault();
this.emit('open');
this.showDropDown();
}
onDropDownClick(event) {
event.preventDefault();
}
onDropDownSelect(value) {
this.field = value;
this.emit('change', {value});
}
showDropDown() {
assignProps(this, this.$.dropDown, [
'valueField',
'showField',
'showFilter',
'multiple',
'$transclude',
'translateFields',
'model',
'data',
'url',
'fields',
'include',
'where',
'order',
'limit',
'searchFunction'
]);
this.$.dropDown.show(this.element);
}
}
ButtonMenu.$inject = ['$element', '$scope', '$transclude'];
ngModule.component('vnButtonMenu', {
template: require('./button-menu.html'),
bindings: {
label: '@',
showField: '@?',
selection: '<?',
valueField: '@?',
selectFields: '<?',
disabled: '<?',
initialData: '<?',
showFilter: '<?',
field: '=?',
url: '@?',
data: '<?',
where: '@?',
order: '@?',
limit: '<?',
multiple: '<?',
onChange: '&?',
icon: '@?',
translateFields: '<?',
onOpen: '&?'
},
transclude: {
tplItem: '?tplItem'
},
controller: ButtonMenu
});