Joffrey JAFFEUX cb59681d86
DEV: select-kit third major update with focus on accessibility (#13303)
Major changes included:
- better support for screen readers
- trapping focus in modals
- better tabbing order in composer
- alerts on no content found/number of items found
- better autofocus in modals
- mini-tag-chooser is now a multi-select component
- each multi-select-component will now display selection on one row
2021-08-23 10:44:19 +02:00

45 lines
1.2 KiB
JavaScript

import { MAIN_COLLECTION } from "select-kit/components/select-kit";
import MultiSelectComponent from "select-kit/components/multi-select";
import { computed } from "@ember/object";
import { makeArray } from "discourse-common/lib/helpers";
import { readOnly } from "@ember/object/computed";
export default MultiSelectComponent.extend({
pluginApiIdentifiers: ["list-setting"],
classNames: ["list-setting"],
choices: null,
nameProperty: null,
valueProperty: null,
content: readOnly("choices"),
selectKitOptions: {
filterable: true,
selectedChoiceComponent: "selectedChoiceComponent",
},
modifyComponentForRow(collection) {
if (
collection === MAIN_COLLECTION &&
this.settingName &&
this.settingName.indexOf("color") > -1
) {
return "create-color-row";
}
},
selectedChoiceComponent: computed("settingName", function () {
if (this.settingName && this.settingName.indexOf("color") > -1) {
return "selected-choice-color";
} else {
return "selected-choice";
}
}),
deselect(value) {
this.onChangeChoices &&
this.onChangeChoices([...new Set([value, ...makeArray(this.choices)])]);
this._super(...arguments);
},
});