-
Notifications
You must be signed in to change notification settings - Fork 264
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui5-suggestion-item): add new component (#1336)
An abstract item to serve as a suggestion item within the Input. Based on the suggestion item properties, the Input will display either a StandardListItem, or a GroupHeaderListItem within the suggestion popover. FIXES: #1313 The usage becomes: ```html <ui5-input id="myInput2" show-suggestions > <ui5-suggestion-item group text="group 1"></ui5-suggestion-item> <ui5-suggestion-item text="Cozy"></ui5-suggestion-item> <ui5-suggestion-item text="Compact"></ui5-suggestion-item> <ui5-suggestion-item text="Condensed"></ui5-suggestion-item> </ui5-input> ``` Although this is still compatible: ```html <ui5-input show-suggestions > <ui5-li>Cozy</ui5-li> <ui5-li>Compact</ui5-li> <ui5-li>Condensed</ui5-li> </ui5-input> ```
- Loading branch information
Showing
8 changed files
with
191 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; | ||
| import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; | ||
| import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; | ||
| import StandardListItem from "./StandardListItem.js"; | ||
| import GroupHeaderListItem from "./GroupHeaderListItem.js"; | ||
|
|
||
| /** | ||
| * @public | ||
| */ | ||
| const metadata = { | ||
| tag: "ui5-suggestion-item", | ||
| properties: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ { | ||
| /** | ||
| * Defines the text of the <code>ui5-suggestion-item</code>. | ||
| * | ||
| * @type {string} | ||
| * @defaultvalue "" | ||
| * @public | ||
| */ | ||
| text: { | ||
| type: String, | ||
| }, | ||
|
|
||
| /** | ||
| * Defines the description displayed right under the item text, if such is present. | ||
| * @type {string} | ||
| * @defaultvalue: "" | ||
| * @public | ||
| */ | ||
| description: { | ||
| type: String, | ||
| }, | ||
|
|
||
| /** | ||
| * Defines the <code>icon</code> source URI. | ||
| * <br><br> | ||
| * <b>Note:</b> | ||
| * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the | ||
| * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>. | ||
| * | ||
| * @type {string} | ||
| * @public | ||
| */ | ||
| icon: { | ||
| type: String, | ||
| }, | ||
|
|
||
| /** | ||
| * Defines whether the <code>icon</code> should be displayed in the beginning of the item or in the end. | ||
| * <br><br> | ||
| * <b>Note:</b> If <code>image</code> is set, the <code>icon</code> would be displayed after the <code>image</code>. | ||
| * | ||
| * @type {boolean} | ||
| * @defaultvalue false | ||
| * @public | ||
| */ | ||
| iconEnd: { | ||
| type: Boolean, | ||
| }, | ||
|
|
||
| /** | ||
| * Defines the <code>image</code> source URI. | ||
| * <br><br> | ||
| * <b>Note:</b> The <code>image</code> would be displayed in the beginning of the item. | ||
| * | ||
| * @type {string} | ||
| * @public | ||
| */ | ||
| image: { | ||
| type: String, | ||
| }, | ||
|
|
||
| /** | ||
| * Defines the <code>info</code>, displayed in the end of the item. | ||
| * @type {string} | ||
| * @public | ||
| */ | ||
| info: { | ||
| type: String, | ||
| }, | ||
|
|
||
| /** | ||
| * Defines the state of the <code>info</code>. | ||
| * <br> | ||
| * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code> and <code>"Erorr"</code>. | ||
| * @type {string} | ||
| * @public | ||
| */ | ||
| infoState: { | ||
| type: ValueState, | ||
| defaultValue: ValueState.None, | ||
| }, | ||
|
|
||
| /** | ||
| * Defines the item to be displayed as a group item. When set, the other properties, | ||
| * such as <code>image</code>, <code>icon</code>, <code>description</code>, etc. will be omitted. | ||
| * Only the <code>text</code> will be displayed. | ||
| * @type {string} | ||
| * @public | ||
| */ | ||
| group: { | ||
| type: Boolean, | ||
| }, | ||
| }, | ||
| slots: { | ||
| }, | ||
| events: { | ||
| }, | ||
| }; | ||
|
|
||
| /** | ||
| * @class | ||
| * The <code>ui5-suggestion-item</code> represents the suggestion item of the <code>ui5-input</code>. | ||
| * | ||
| * @constructor | ||
| * @author SAP SE | ||
| * @alias sap.ui.webcomponents.main.SuggestionItem | ||
| * @extends UI5Element | ||
| * @public | ||
| */ | ||
| class SuggestionItem extends UI5Element { | ||
| static get metadata() { | ||
| return metadata; | ||
| } | ||
|
|
||
| static get render() { | ||
| return litRender; | ||
| } | ||
|
|
||
| static async onDefine() { | ||
| await Promise.all([ | ||
| StandardListItem.define(), | ||
| GroupHeaderListItem.define(), | ||
| ]); | ||
| } | ||
| } | ||
|
|
||
| SuggestionItem.define(); | ||
|
|
||
| export default SuggestionItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,4 +17,5 @@ | |
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| font-weight: bold; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters