2019-11-14 00:57:42 +08:00
|
|
|
import { or, alias } from "@ember/object/computed";
|
2019-10-24 00:30:52 +08:00
|
|
|
import Component from "@ember/component";
|
2019-11-08 05:38:28 +08:00
|
|
|
import discourseComputed from "discourse-common/utils/decorators";
|
2019-11-14 00:57:42 +08:00
|
|
|
import { computed } from "@ember/object";
|
2017-11-21 18:53:09 +08:00
|
|
|
|
2019-10-24 00:30:52 +08:00
|
|
|
export default Component.extend({
|
2017-11-21 18:53:09 +08:00
|
|
|
attributeBindings: [
|
|
|
|
"tabindex",
|
2017-12-22 20:08:12 +08:00
|
|
|
"ariaLabel:aria-label",
|
|
|
|
"title",
|
|
|
|
"name:data-name",
|
|
|
|
"value:data-value",
|
2017-11-21 18:53:09 +08:00
|
|
|
"guid:data-guid"
|
|
|
|
],
|
|
|
|
classNames: ["selected-name", "choice"],
|
2017-11-10 02:57:53 +08:00
|
|
|
classNameBindings: ["isHighlighted", "isLocked"],
|
2017-11-21 18:53:09 +08:00
|
|
|
layoutName: "select-kit/templates/components/multi-select/selected-name",
|
2017-11-27 00:21:39 +08:00
|
|
|
tagName: "span",
|
2017-11-10 02:57:53 +08:00
|
|
|
tabindex: -1,
|
|
|
|
|
2019-11-08 05:38:28 +08:00
|
|
|
@discourseComputed("computedContent")
|
2018-06-15 23:03:24 +08:00
|
|
|
guid(computedContent) {
|
|
|
|
return Ember.guidFor(computedContent);
|
|
|
|
},
|
2017-11-21 18:53:09 +08:00
|
|
|
|
2019-11-09 00:32:20 +08:00
|
|
|
ariaLabel: or("computedContent.ariaLabel", "title"),
|
2017-12-22 20:08:12 +08:00
|
|
|
|
2019-11-08 05:38:28 +08:00
|
|
|
@discourseComputed("computedContent.title", "name")
|
2017-12-22 20:08:12 +08:00
|
|
|
title(computedContentTitle, name) {
|
|
|
|
if (computedContentTitle) return computedContentTitle;
|
|
|
|
if (name) return name;
|
|
|
|
|
|
|
|
return null;
|
|
|
|
},
|
|
|
|
|
2019-11-09 00:32:20 +08:00
|
|
|
label: or("computedContent.label", "title", "name"),
|
2017-12-22 20:08:12 +08:00
|
|
|
|
2019-11-09 00:32:20 +08:00
|
|
|
name: alias("computedContent.name"),
|
2017-12-22 20:08:12 +08:00
|
|
|
|
2019-11-09 00:32:20 +08:00
|
|
|
value: alias("computedContent.value"),
|
2017-12-22 20:08:12 +08:00
|
|
|
|
2019-11-09 02:28:11 +08:00
|
|
|
isLocked: computed("computedContent.locked", function() {
|
2017-12-22 20:08:12 +08:00
|
|
|
return this.getWithDefault("computedContent.locked", false);
|
2017-11-10 02:57:53 +08:00
|
|
|
}),
|
|
|
|
|
2019-11-08 05:38:28 +08:00
|
|
|
@discourseComputed("computedContent", "highlightedSelection.[]")
|
2018-03-22 18:29:55 +08:00
|
|
|
isHighlighted(computedContent, highlightedSelection) {
|
2019-05-27 16:15:39 +08:00
|
|
|
return highlightedSelection.includes(this.computedContent);
|
2018-02-26 18:42:57 +08:00
|
|
|
},
|
|
|
|
|
2018-03-22 18:29:55 +08:00
|
|
|
click() {
|
2019-05-27 16:15:39 +08:00
|
|
|
if (this.isLocked) return false;
|
|
|
|
this.onClickSelectionItem([this.computedContent]);
|
2018-03-22 18:29:55 +08:00
|
|
|
return false;
|
2017-11-10 02:57:53 +08:00
|
|
|
}
|
|
|
|
});
|