2018-02-10 15:18:01 +00:00
|
|
|
import ngModule from '../../module';
|
2018-05-08 07:28:25 +00:00
|
|
|
import Input from '../../lib/input';
|
2018-10-18 07:24:20 +00:00
|
|
|
import assignProps from '../../lib/assign-props';
|
2017-06-15 09:22:47 +00:00
|
|
|
import './style.scss';
|
2017-06-13 11:08:06 +00:00
|
|
|
|
2018-05-08 07:28:25 +00:00
|
|
|
export default class IconMenu extends Input {
|
|
|
|
constructor($element, $scope, $transclude) {
|
|
|
|
super($element, $scope);
|
|
|
|
this.$transclude = $transclude;
|
|
|
|
this.input = this.element.querySelector('.mdl-button');
|
2017-06-29 11:56:52 +00:00
|
|
|
}
|
2017-10-04 06:47:16 +00:00
|
|
|
|
2018-10-22 06:23:10 +00:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2018-05-08 07:28:25 +00:00
|
|
|
onClick(event) {
|
|
|
|
event.preventDefault();
|
2018-10-18 18:48:21 +00:00
|
|
|
this.emit('open');
|
2018-05-08 07:28:25 +00:00
|
|
|
this.showDropDown();
|
2017-06-13 11:08:06 +00:00
|
|
|
}
|
2017-10-04 06:47:16 +00:00
|
|
|
|
2018-05-08 07:28:25 +00:00
|
|
|
onDropDownSelect(value) {
|
|
|
|
this.field = value;
|
2018-10-18 18:48:21 +00:00
|
|
|
this.emit('change', {value});
|
2018-05-08 07:28:25 +00:00
|
|
|
}
|
2017-11-23 13:09:38 +00:00
|
|
|
|
2018-05-08 07:28:25 +00:00
|
|
|
showDropDown() {
|
2018-10-18 07:24:20 +00:00
|
|
|
assignProps(this, this.$.dropDown, [
|
2018-05-08 07:28:25 +00:00
|
|
|
'valueField',
|
|
|
|
'showField',
|
|
|
|
'showFilter',
|
|
|
|
'multiple',
|
2018-06-25 14:55:19 +00:00
|
|
|
'$transclude',
|
2018-10-18 07:24:20 +00:00
|
|
|
'translateFields',
|
|
|
|
'model',
|
|
|
|
'data',
|
|
|
|
'url',
|
|
|
|
'fields',
|
|
|
|
'include',
|
|
|
|
'where',
|
|
|
|
'order',
|
|
|
|
'limit',
|
|
|
|
'searchFunction'
|
2018-05-08 07:28:25 +00:00
|
|
|
]);
|
2018-10-18 07:24:20 +00:00
|
|
|
this.$.dropDown.show(this.input);
|
2017-06-15 05:45:01 +00:00
|
|
|
}
|
2017-06-13 11:08:06 +00:00
|
|
|
}
|
2018-05-08 07:28:25 +00:00
|
|
|
IconMenu.$inject = ['$element', '$scope', '$transclude'];
|
2017-06-13 11:08:06 +00:00
|
|
|
|
2018-02-10 15:18:01 +00:00
|
|
|
ngModule.component('vnIconMenu', {
|
2017-06-13 11:08:06 +00:00
|
|
|
template: require('./icon-menu.html'),
|
|
|
|
bindings: {
|
2018-10-18 07:24:20 +00:00
|
|
|
label: '@',
|
2018-05-08 07:28:25 +00:00
|
|
|
showField: '@?',
|
2018-10-18 07:24:20 +00:00
|
|
|
selection: '<?',
|
2018-05-08 07:28:25 +00:00
|
|
|
valueField: '@?',
|
|
|
|
selectFields: '<?',
|
|
|
|
disabled: '<?',
|
|
|
|
initialData: '<?',
|
2018-10-18 07:24:20 +00:00
|
|
|
showFilter: '<?',
|
2018-05-08 07:28:25 +00:00
|
|
|
field: '=?',
|
2018-10-18 07:24:20 +00:00
|
|
|
url: '@?',
|
|
|
|
data: '<?',
|
|
|
|
where: '@?',
|
|
|
|
order: '@?',
|
2018-05-08 07:28:25 +00:00
|
|
|
limit: '<?',
|
|
|
|
multiple: '<?',
|
|
|
|
onChange: '&?',
|
2018-06-25 14:55:19 +00:00
|
|
|
icon: '@?',
|
2018-07-02 11:17:01 +00:00
|
|
|
translateFields: '<?',
|
|
|
|
onOpen: '&?'
|
2018-05-08 07:28:25 +00:00
|
|
|
},
|
|
|
|
transclude: {
|
|
|
|
tplItem: '?tplItem'
|
2017-06-13 11:08:06 +00:00
|
|
|
},
|
2017-06-15 13:00:43 +00:00
|
|
|
controller: IconMenu
|
2017-06-13 11:08:06 +00:00
|
|
|
});
|