2020-05-11 14:04:27 +00:00
|
|
|
import Component from '@ember/component';
|
2020-05-29 15:42:46 +00:00
|
|
|
import { inject as service } from '@ember/service';
|
2020-08-11 17:02:51 +00:00
|
|
|
import Slotted from 'block-slots';
|
2020-05-11 14:04:27 +00:00
|
|
|
|
2020-08-11 17:02:51 +00:00
|
|
|
export default Component.extend(Slotted, {
|
2020-05-29 15:42:46 +00:00
|
|
|
tagName: '',
|
|
|
|
dom: service('dom'),
|
2020-08-10 08:26:02 +00:00
|
|
|
multiple: false,
|
2020-09-01 18:13:11 +00:00
|
|
|
subtractive: false,
|
2020-08-10 08:26:02 +00:00
|
|
|
onchange: function() {},
|
2020-08-11 17:02:51 +00:00
|
|
|
addOption: function(option) {
|
|
|
|
if (typeof this._options === 'undefined') {
|
|
|
|
this._options = new Set();
|
|
|
|
}
|
|
|
|
if (this.subtractive) {
|
|
|
|
if (!option.selected) {
|
|
|
|
this._options.add(option.value);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (option.selected) {
|
|
|
|
this._options.add(option.value);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
removeOption: function(option) {
|
|
|
|
this._options.delete(option.value);
|
|
|
|
},
|
2020-05-11 14:04:27 +00:00
|
|
|
actions: {
|
2020-08-11 17:02:51 +00:00
|
|
|
click: function(e, value) {
|
|
|
|
let options = [value];
|
|
|
|
if (this.multiple) {
|
|
|
|
if (this._options.has(value)) {
|
|
|
|
this._options.delete(value);
|
|
|
|
} else {
|
|
|
|
this._options.add(value);
|
|
|
|
}
|
|
|
|
options = this._options;
|
|
|
|
}
|
|
|
|
this.onchange(
|
|
|
|
this.dom.setEventTargetProperties(e, {
|
|
|
|
selected: target => value,
|
|
|
|
selectedItems: target => {
|
|
|
|
const opts = [...options];
|
|
|
|
if (opts.length > 0) {
|
|
|
|
return opts.join(',');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
})
|
|
|
|
);
|
|
|
|
},
|
2020-05-11 14:04:27 +00:00
|
|
|
change: function(option, e) {
|
2020-05-29 15:42:46 +00:00
|
|
|
this.onchange(this.dom.setEventTargetProperty(e, 'selected', selected => option));
|
2020-05-11 14:04:27 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|