Introduces select-kit

* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:

```
computeValue()
computeContent()
mutateValue()
```
This commit is contained in:
Joffrey JAFFEUX
2017-11-21 11:53:09 +01:00
committed by GitHub
parent edc4b30f82
commit 39f3dbd945
191 changed files with 3160 additions and 2788 deletions

View File

@ -11,10 +11,26 @@ componentTest('default', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.propEqual(selectBox().header.name(), 'bold,italic');
assert.propEqual(selectKit().header.name(), 'bold,italic');
});
}
});
componentTest('with emptry string as value', {
template: '{{list-setting settingValue=settingValue}}',
beforeEach() {
this.set('settingValue', '');
},
test(assert) {
expandSelectKit();
andThen(() => {
assert.equal(selectKit().header.el.find(".selected-name").length, 0);
});
}
});
@ -27,10 +43,10 @@ componentTest('with only setting value', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.propEqual(selectBox().header.name(), 'bold,italic');
assert.propEqual(selectKit().header.name(), 'bold,italic');
});
}
});
@ -44,28 +60,28 @@ componentTest('interactions', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
selectBoxKitSelectRow('underline');
selectKitSelectRow('underline');
andThen(() => {
assert.propEqual(selectBox().header.name(), 'bold,italic,underline');
assert.propEqual(selectKit().header.name(), 'bold,italic,underline');
});
selectBoxKitFillInFilter('strike');
selectKitFillInFilter('strike');
andThen(() => {
assert.equal(selectBox().highlightedRow.name(), 'strike');
assert.equal(selectKit().highlightedRow.name(), 'strike');
});
selectBox().keyboard.enter();
selectKit().keyboard.enter();
andThen(() => {
assert.propEqual(selectBox().header.name(), 'bold,italic,underline,strike');
assert.propEqual(selectKit().header.name(), 'bold,italic,underline,strike');
});
selectBox().keyboard.backspace();
selectBox().keyboard.backspace();
selectKit().keyboard.backspace();
selectKit().keyboard.backspace();
andThen(() => {
assert.equal(this.get('choices').length, 3, 'it removes the created content from original list');