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

@ -6,10 +6,10 @@ componentTest('with value', {
template: '{{category-chooser value=2}}',
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.category-chooser').header.name(), "feature");
assert.equal(selectKit('.category-chooser').header.name(), "feature");
});
}
});
@ -18,10 +18,10 @@ componentTest('with excludeCategoryId', {
template: '{{category-chooser excludeCategoryId=2}}',
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.category-chooser').rowByValue(2).el.length, 0);
assert.equal(selectKit('.category-chooser').rowByValue(2).el.length, 0);
});
}
});
@ -30,12 +30,12 @@ componentTest('with scopedCategoryId', {
template: '{{category-chooser scopedCategoryId=2}}',
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.category-chooser').rowByIndex(0).name(), "feature");
assert.equal(selectBox('.category-chooser').rowByIndex(1).name(), "spec");
assert.equal(selectBox('.category-chooser').el.find(".select-box-kit-row").length, 2);
assert.equal(selectKit('.category-chooser').rowByIndex(0).name(), "feature");
assert.equal(selectKit('.category-chooser').rowByIndex(1).name(), "spec");
assert.equal(selectKit('.category-chooser').el.find(".select-kit-row").length, 2);
});
}
});
@ -48,10 +48,10 @@ componentTest('with allowUncategorized=null', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
assert.equal(selectKit('.category-chooser').header.name(), "Select a category…");
});
}
});
@ -64,10 +64,10 @@ componentTest('with allowUncategorized=null rootNone=true', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
assert.equal(selectKit('.category-chooser').header.name(), "Select a category…");
});
}
});
@ -81,10 +81,10 @@ componentTest('with disallowed uncategorized, rootNone and rootNoneLabel', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
assert.equal(selectKit('.category-chooser').header.name(), "Select a category…");
});
}
});
@ -97,10 +97,10 @@ componentTest('with allowed uncategorized', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.category-chooser').header.name(), "uncategorized");
assert.equal(selectKit('.category-chooser').header.name(), "uncategorized");
});
}
});
@ -113,10 +113,10 @@ componentTest('with allowed uncategorized and rootNone', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.category-chooser').header.name(), "(no category)");
assert.equal(selectKit('.category-chooser').header.name(), "(no category)");
});
}
});
@ -130,10 +130,10 @@ componentTest('with allowed uncategorized rootNone and rootNoneLabel', {
},
test(assert) {
expandSelectBoxKit();
expandSelectKit();
andThen(() => {
assert.equal(selectBox('.category-chooser').header.name(), "root none label");
assert.equal(selectKit('.category-chooser').header.name(), "root none label");
});
}
});