FIX: reverts combobox placeholder and introduces noneLabel
noneLabels works almost like none but instead of actually adding a row in the list, it will only change the text displayed in the header, when there's no selection.
This commit is contained in:
parent
125434dcdf
commit
3287ac77e0
|
@ -16,7 +16,7 @@
|
||||||
content=types
|
content=types
|
||||||
clearable=true
|
clearable=true
|
||||||
allowAutoSelectFirst=false
|
allowAutoSelectFirst=false
|
||||||
placeholder="groups.index.filter"
|
noneLabel="groups.index.filter"
|
||||||
class="groups-header-filters-type"}}
|
class="groups-header-filters-type"}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -24,11 +24,8 @@ export default SingleSelectComponent.extend({
|
||||||
|
|
||||||
@on("didReceiveAttrs")
|
@on("didReceiveAttrs")
|
||||||
_setComboBoxOptions() {
|
_setComboBoxOptions() {
|
||||||
const placeholder = this.get('placeholder');
|
|
||||||
|
|
||||||
this.get("headerComponentOptions").setProperties({
|
this.get("headerComponentOptions").setProperties({
|
||||||
clearable: this.get("clearable"),
|
clearable: this.get("clearable")
|
||||||
placeholder: placeholder ? I18n.t(placeholder) : "",
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -7,6 +7,5 @@ export default SelectKitHeaderComponent.extend({
|
||||||
clearable: Ember.computed.alias("options.clearable"),
|
clearable: Ember.computed.alias("options.clearable"),
|
||||||
caretUpIcon: Ember.computed.alias("options.caretUpIcon"),
|
caretUpIcon: Ember.computed.alias("options.caretUpIcon"),
|
||||||
caretDownIcon: Ember.computed.alias("options.caretDownIcon"),
|
caretDownIcon: Ember.computed.alias("options.caretDownIcon"),
|
||||||
shouldDisplayClearableButton: Ember.computed.and("clearable", "computedContent.hasSelection"),
|
shouldDisplayClearableButton: Ember.computed.and("clearable", "computedContent.hasSelection")
|
||||||
placeholder: Ember.computed.alias("options.placeholder"),
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -262,7 +262,8 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
|
||||||
|
|
||||||
@computed("none")
|
@computed("none")
|
||||||
noneRowComputedContent(none) {
|
noneRowComputedContent(none) {
|
||||||
if (isNone(none)) { return null; }
|
if (isNone(none)) return null;
|
||||||
|
|
||||||
let noneRowComputedContent;
|
let noneRowComputedContent;
|
||||||
|
|
||||||
switch (typeof none) {
|
switch (typeof none) {
|
||||||
|
|
|
@ -4,7 +4,7 @@ const { isEmpty, makeArray } = Ember;
|
||||||
export default Ember.Component.extend({
|
export default Ember.Component.extend({
|
||||||
layoutName: "select-kit/templates/components/select-kit/select-kit-header",
|
layoutName: "select-kit/templates/components/select-kit/select-kit-header",
|
||||||
classNames: ["select-kit-header"],
|
classNames: ["select-kit-header"],
|
||||||
classNameBindings: ["isFocused"],
|
classNameBindings: ["isFocused", "isNone"],
|
||||||
attributeBindings: [
|
attributeBindings: [
|
||||||
"tabindex",
|
"tabindex",
|
||||||
"ariaLabel:aria-label",
|
"ariaLabel:aria-label",
|
||||||
|
@ -14,6 +14,8 @@ export default Ember.Component.extend({
|
||||||
"name:data-name",
|
"name:data-name",
|
||||||
],
|
],
|
||||||
|
|
||||||
|
isNone: Ember.computed.none("computedContent.value"),
|
||||||
|
|
||||||
ariaHasPopup: true,
|
ariaHasPopup: true,
|
||||||
|
|
||||||
ariaLabel: Ember.computed.or("computedContent.ariaLabel", "title"),
|
ariaLabel: Ember.computed.or("computedContent.ariaLabel", "title"),
|
||||||
|
|
|
@ -84,12 +84,18 @@ export default SelectKitComponent.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
computeHeaderContent() {
|
computeHeaderContent() {
|
||||||
return {
|
let content = {
|
||||||
title: this.get("title"),
|
title: this.get("title"),
|
||||||
icons: makeArray(this.getWithDefault("headerIcon", [])),
|
icons: makeArray(this.getWithDefault("headerIcon", [])),
|
||||||
value: this.get("selection.value"),
|
value: this.get("selection.value"),
|
||||||
name: this.get("selection.name") || this.get("noneRowComputedContent.name")
|
name: this.get("selection.name") || this.get("noneRowComputedContent.name")
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (!this.get("hasSelection") && this.get("noneLabel")) {
|
||||||
|
content.title = content.name = I18n.t(this.get("noneLabel"));
|
||||||
|
}
|
||||||
|
|
||||||
|
return content;
|
||||||
},
|
},
|
||||||
|
|
||||||
@computed("computedAsyncContent.[]", "computedValue")
|
@computed("computedAsyncContent.[]", "computedValue")
|
||||||
|
|
|
@ -1,14 +1,8 @@
|
||||||
{{#each icons as |icon|}} {{d-icon icon}} {{/each}}
|
{{#each icons as |icon|}} {{d-icon icon}} {{/each}}
|
||||||
|
|
||||||
{{#if label}}
|
<span class="selected-name">
|
||||||
<span class="selected-name">
|
{{{label}}}
|
||||||
{{{label}}}
|
</span>
|
||||||
</span>
|
|
||||||
{{else}}
|
|
||||||
<span class="combo-box-placeholder">
|
|
||||||
{{placeholder}}
|
|
||||||
</span>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#if shouldDisplayClearableButton}}
|
{{#if shouldDisplayClearableButton}}
|
||||||
<button class="btn-clear" {{action onClearSelection bubbles=false}}>
|
<button class="btn-clear" {{action onClearSelection bubbles=false}}>
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
.select-kit {
|
.select-kit {
|
||||||
&.combo-box {
|
&.combo-box {
|
||||||
.combo-box-placeholder {
|
|
||||||
color: dark-light-choose($primary-high, $secondary-low);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-kit-body {
|
.select-kit-body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -104,6 +104,12 @@
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.is-none {
|
||||||
|
.selected-name {
|
||||||
|
color: dark-light-choose($primary-high, $secondary-low);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.btn-clear {
|
.btn-clear {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
|
@ -192,3 +192,20 @@ componentTest('with empty string as value', {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
componentTest('with noneLabel', {
|
||||||
|
template: '{{combo-box content=items allowAutoSelectFirst=false noneLabel=noneLabel}}',
|
||||||
|
beforeEach() {
|
||||||
|
I18n.translations[I18n.locale].js.test = {none: 'none'};
|
||||||
|
this.set('items', ['evil', 'trout', 'hat']);
|
||||||
|
this.set('noneLabel', 'test.none');
|
||||||
|
},
|
||||||
|
|
||||||
|
test(assert) {
|
||||||
|
this.get('subject').expand();
|
||||||
|
|
||||||
|
andThen(() => {
|
||||||
|
assert.equal(this.get('subject').header().name(), 'none', 'it displays noneLabel as the header name');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
Loading…
Reference in New Issue