Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-mcb-item): initial implementation #1254

Merged
merged 4 commits into from
Mar 2, 2020
Merged

feat(ui5-mcb-item): initial implementation #1254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e8569df
feat(ui5-multi-combobox-item): initial implementation
MapTo0 Feb 27, 2020
28fd7a6
adjust sample page
MapTo0 Feb 27, 2020
b3f86f0
- ui5-multi-combobox-item renamed to ui5-mcb-item
MapTo0 Feb 27, 2020
147fa57
Update MultiComboBoxItem.js
MapTo0 Feb 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/main/bundle.esm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import Carousel from "./dist/Carousel.js";
import CheckBox from "./dist/CheckBox.js";
import ComboBox from "./dist/ComboBox.js";
import ComboBoxItem from "./dist/ComboBoxItem.js";
import MultiComboBoxItem from "./dist/MultiComboBoxItem.js";
import DatePicker from "./dist/DatePicker.js";
import Dialog from "./dist/Dialog.js";
import FileUploader from "./dist/FileUploader.js";
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/ComboBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ const metadata = {
* @alias sap.ui.webcomponents.main.ComboBox
* @extends UI5Element
* @tagname ui5-combobox
* @appenddocs ComboBoxItem
* @public
* @since 1.0.0-rc.6
*/
Expand Down
25 changes: 22 additions & 3 deletions packages/main/src/ComboBoxItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,19 @@ import ComboBoxItemTemplate from "./generated/templates/ComboBoxItemTemplate.lit
// Styles
import ComboBoxItemCss from "./generated/themes/ComboBoxItem.css.js";


/**
* @public
*/
const metadata = {
tag: "ui5-combobox-item",
properties: {
tag: "ui5-cb-item",
properties: /** @lends sap.ui.webcomponents.main.ComboBoxItem.prototype */ {
/**
* Defines the text of the <code>ui5-cb-item</code>.
*
* @type {string}
* @defaultvalue ""
* @public
*/
text: { type: String },
},
slots: {
Expand All @@ -19,6 +28,16 @@ const metadata = {
},
};

/**
* @class
* The <code>ui5-cb-item</code> represents the item for a <code>ui5-combobox</code>.
*
* @constructor
* @author SAP SE
* @alias sap.ui.webcomponents.main.ComboBoxItem
* @extends UI5Element
* @public
*/
class ComboBoxItem extends UI5Element {
static get metadata() {
return metadata;
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/MultiComboBox.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
data-ui5-id="{{this._id}}"
part="token-{{@index}}"
>
{{this.textContent}}
{{this.text}}
</ui5-token>
{{/if}}
{{/each}}
Expand Down
3 changes: 2 additions & 1 deletion packages/main/src/MultiComboBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,7 @@ const metadata = {
* @extends UI5Element
* @tagname ui5-multi-combobox
* @public
* @appenddocs MultiComboBoxItem
* @since 0.11.0
*/
class MultiComboBox extends UI5Element {
Expand Down Expand Up @@ -459,7 +460,7 @@ class MultiComboBox extends UI5Element {

_filterItems(value) {
return this.items.filter(item => {
return item.textContent && item.textContent.toLowerCase().startsWith(value.toLowerCase());
return item.text && item.text.toLowerCase().startsWith(value.toLowerCase());
});
}

Expand Down
40 changes: 40 additions & 0 deletions packages/main/src/MultiComboBoxItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import ComboBoxItem from "./ComboBoxItem.js";

/**
* @public
*/
const metadata = {
tag: "ui5-mcb-item",
properties: /** @lends sap.ui.webcomponents.main.MultiComboBoxItem.prototype */ {
/**
* Defines the selected state of the <code>ui5-mcb-item</code>.
* @type {boolean}
* @defaultvalue false
* @public
*/
selected: { type: Boolean },
},
};

/**
* @class
* The <code>ui5-cb-item</code> represents the item for a <code>ui5-multi-combobox</code>.
*
* @constructor
* @author SAP SE
* @alias sap.ui.webcomponents.main.MultiComboBoxItem
* @extends ComboBoxItem
* @public
*/
class MultiComboBoxItem extends ComboBoxItem {
/**
* @public
*/
static get metadata() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will the doc plugin be able to parse this correctly when you add help?

return metadata;
}
}

MultiComboBoxItem.define();

export default MultiComboBoxItem;
4 changes: 2 additions & 2 deletions packages/main/src/MultiComboBoxPopover.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
@ui5-selectionChange={{_listSelectionChange}}>
{{#each items}}
{{#if this.selected}}
<ui5-li type="Active" data-ui5-token-id="{{this._id}}" .selected="{{../editable}}">{{this.textContent}}</ui5-li>
<ui5-li type="Active" data-ui5-token-id="{{this._id}}" .selected="{{../editable}}">{{this.text}}</ui5-li>
{{/if}}
{{/each}}
</ui5-list>
Expand Down Expand Up @@ -118,7 +118,7 @@

<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
{{#each _filteredItems}}
<ui5-li type="Active" ?selected={{this.selected}} data-ui5-token-id="{{this._id}}">{{this.textContent}}</ui5-li>
<ui5-li type="Active" ?selected={{this.selected}} data-ui5-token-id="{{this._id}}">{{this.text}}</ui5-li>
{{/each}}
</ui5-list>

Expand Down
78 changes: 39 additions & 39 deletions packages/main/test/pages/ComboBox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,31 +41,31 @@

<div class="demo-section">
<ui5-combobox id="combo" style="width: 360px;" value="Bulgaria">
<ui5-combobox-item text="Algeria"></ui5-combobox-item>
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
<ui5-combobox-item text="Australia"></ui5-combobox-item>
<ui5-combobox-item text="Austria"></ui5-combobox-item>
<ui5-combobox-item text="Bahrain"></ui5-combobox-item>
<ui5-combobox-item text="Belgium"></ui5-combobox-item>
<ui5-combobox-item text="Very long text that makes popover wider than the ComboBox"></ui5-combobox-item>
<ui5-combobox-item text="Brazil"></ui5-combobox-item>
<ui5-combobox-item text="Bulgaria"></ui5-combobox-item>
<ui5-combobox-item text="Canada"></ui5-combobox-item>
<ui5-combobox-item text="Chile"></ui5-combobox-item>
<ui5-cb-item text="Algeria"></ui5-cb-item>
<ui5-cb-item text="Argentina"></ui5-cb-item>
<ui5-cb-item text="Australia"></ui5-cb-item>
<ui5-cb-item text="Austria"></ui5-cb-item>
<ui5-cb-item text="Bahrain"></ui5-cb-item>
<ui5-cb-item text="Belgium"></ui5-cb-item>
<ui5-cb-item text="Very long text that makes popover wider than the ComboBox"></ui5-cb-item>
<ui5-cb-item text="Brazil"></ui5-cb-item>
<ui5-cb-item text="Bulgaria"></ui5-cb-item>
<ui5-cb-item text="Canada"></ui5-cb-item>
<ui5-cb-item text="Chile"></ui5-cb-item>
</ui5-combobox>

<ui5-combobox id="combo2" style="width: 360px;">
<ui5-combobox-item text="Algeria"></ui5-combobox-item>
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
<ui5-combobox-item text="Australia"></ui5-combobox-item>
<ui5-combobox-item text="Austria"></ui5-combobox-item>
<ui5-combobox-item text="Bahrain"></ui5-combobox-item>
<ui5-combobox-item text="Belgium"></ui5-combobox-item>
<ui5-combobox-item text="Bosnia and Herzegovina"></ui5-combobox-item>
<ui5-combobox-item text="Brazil"></ui5-combobox-item>
<ui5-combobox-item text="Bulgaria"></ui5-combobox-item>
<ui5-combobox-item text="Canada"></ui5-combobox-item>
<ui5-combobox-item text="Chile"></ui5-combobox-item>
<ui5-cb-item text="Algeria"></ui5-cb-item>
<ui5-cb-item text="Argentina"></ui5-cb-item>
<ui5-cb-item text="Australia"></ui5-cb-item>
<ui5-cb-item text="Austria"></ui5-cb-item>
<ui5-cb-item text="Bahrain"></ui5-cb-item>
<ui5-cb-item text="Belgium"></ui5-cb-item>
<ui5-cb-item text="Bosnia and Herzegovina"></ui5-cb-item>
<ui5-cb-item text="Brazil"></ui5-cb-item>
<ui5-cb-item text="Bulgaria"></ui5-cb-item>
<ui5-cb-item text="Canada"></ui5-cb-item>
<ui5-cb-item text="Chile"></ui5-cb-item>
</ui5-combobox>

<ui5-combobox id="" style="width: 360px;" disabled value="disabled"></ui5-combobox>
Expand Down Expand Up @@ -94,10 +94,10 @@
<span>Change event testing</span>

<ui5-combobox id="change-cb" style="width: 360px;">
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
<ui5-combobox-item text="Bulgaria"></ui5-combobox-item>
<ui5-combobox-item text="Canada"></ui5-combobox-item>
<ui5-combobox-item text="Germany"></ui5-combobox-item>
<ui5-cb-item text="Argentina"></ui5-cb-item>
<ui5-cb-item text="Bulgaria"></ui5-cb-item>
<ui5-cb-item text="Canada"></ui5-cb-item>
<ui5-cb-item text="Germany"></ui5-cb-item>
</ui5-combobox>

<br>
Expand All @@ -114,32 +114,32 @@
<span>Contains filter</span>

<ui5-combobox style="width: 360px;" filter="Contains" id="contains-cb">
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
<ui5-combobox-item text="Bulgaria"></ui5-combobox-item>
<ui5-combobox-item text="Canada"></ui5-combobox-item>
<ui5-combobox-item text="Germany"></ui5-combobox-item>
<ui5-cb-item text="Argentina"></ui5-cb-item>
<ui5-cb-item text="Bulgaria"></ui5-cb-item>
<ui5-cb-item text="Canada"></ui5-cb-item>
<ui5-cb-item text="Germany"></ui5-cb-item>
</ui5-combobox>
</div>

<div class="demo-section">
<span>StartsWith filter</span>

<ui5-combobox style="width: 360px;" filter="StartsWith" id="startswith-cb">
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
<ui5-combobox-item text="United States of America"></ui5-combobox-item>
<ui5-combobox-item text="Canada"></ui5-combobox-item>
<ui5-combobox-item text="Germany"></ui5-combobox-item>
<ui5-cb-item text="Argentina"></ui5-cb-item>
<ui5-cb-item text="United States of America"></ui5-cb-item>
<ui5-cb-item text="Canada"></ui5-cb-item>
<ui5-cb-item text="Germany"></ui5-cb-item>
</ui5-combobox>
</div>

<section class="ui5-content-density-compact">
<h3>ComboBox in Compact</h3>
<div>
<ui5-combobox>
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
<ui5-combobox-item text="United States of America"></ui5-combobox-item>
<ui5-combobox-item text="Canada"></ui5-combobox-item>
<ui5-combobox-item text="Germany"></ui5-combobox-item>
<ui5-cb-item text="Argentina"></ui5-cb-item>
<ui5-cb-item text="United States of America"></ui5-cb-item>
<ui5-cb-item text="Canada"></ui5-cb-item>
<ui5-cb-item text="Germany"></ui5-cb-item>
</ui5-combobox>
</div>
</section>
Expand All @@ -165,7 +165,7 @@ <h3>ComboBox in Compact</h3>

// fill new items
items.map(data => {
const element = document.createElement("ui5-combobox-item");
const element = document.createElement("ui5-cb-item");
element.setAttribute("text", data.name);

document.getElementById("lazy").appendChild(element);
Expand Down
10 changes: 5 additions & 5 deletions packages/main/test/pages/InputsAlignment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,11 @@ <h2>The way the components will be rendered out of the box</h2>
</ui5-multi-combobox>

<ui5-combobox placeholder="I am combobox">
<ui5-combobox-item text="Active"></ui5-combobox-item>
<ui5-combobox-item text="Active"></ui5-combobox-item>
<ui5-combobox-item text="Active"></ui5-combobox-item>
<ui5-combobox-item text="Long sentence Long sentence Long sentence"></ui5-combobox-item>
<ui5-combobox-item text="Some word"></ui5-combobox-item>
<ui5-cb-item text="Active"></ui5-cb-item>
<ui5-cb-item text="Active"></ui5-cb-item>
<ui5-cb-item text="Active"></ui5-cb-item>
<ui5-cb-item text="Long sentence Long sentence Long sentence"></ui5-cb-item>
<ui5-cb-item text="Some word"></ui5-cb-item>
</ui5-combobox>
<hr>
<h2>Explicitly width:auto set</h2>
Expand Down
Loading