From 6ce109e6dad6e0746007f1774f410a7f15ffc875 Mon Sep 17 00:00:00 2001 From: ilhan Date: Thu, 13 May 2021 17:16:46 +0300 Subject: [PATCH 1/3] feat(ui5-input): introduce new SuggestionGroupItem --- packages/main/src/Input.js | 6 +- packages/main/src/InputPopover.hbs | 2 +- packages/main/src/SuggestionGroupItem.js | 64 +++++++++++++++++++ packages/main/src/SuggestionItem.js | 16 ----- .../main/src/features/InputSuggestions.js | 4 +- packages/main/test/pages/Input.html | 32 ++++++---- 6 files changed, 94 insertions(+), 30 deletions(-) create mode 100644 packages/main/src/SuggestionGroupItem.js diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index fd4c8b9369e2..9df9b322e40c 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -74,8 +74,12 @@ const metadata = { * </ui5-input> *
* + * * * + * + * + * * *

* Note: The suggestion would be displayed only if the showSuggestions @@ -453,7 +457,7 @@ const metadata = { * @alias sap.ui.webcomponents.main.Input * @extends sap.ui.webcomponents.base.UI5Element * @tagname ui5-input - * @appenddocs SuggestionItem + * @appenddocs SuggestionItem SuggestionGroupItem * @implements sap.ui.webcomponents.main.IInput * @public */ diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs index 2605baa251c2..9a26842bc774 100644 --- a/packages/main/src/InputPopover.hbs +++ b/packages/main/src/InputPopover.hbs @@ -92,7 +92,7 @@ {{#*inline "suggestionsList"}} {{#each suggestionsTexts}} - {{#if group}} + {{#if groupItem}} {{{ this.text }}} {{else}} ui5-suggestion-group-item. + * + * @type {string} + * @defaultvalue "" + * @public + */ + text: { + type: String, + }, + }, + slots: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ { + }, + events: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ { + }, +}; + +/** + * @class + * The ui5-suggestion-group-item is type of suggestion item, + * that can be used to split the ui5-input suggestions into groups. + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.SuggestionGroupItem + * @extends UI5Element + * @tagname ui5-suggestion-group-item + * @implements sap.ui.webcomponents.main.IInputSuggestionItem + * @public + * @since 1.0.0-rc.15 + */ +class SuggestionItem extends UI5Element { + static get metadata() { + return metadata; + } + + static get dependencies() { + return [ + GroupHeaderListItem, + ]; + } + + /** + * Indicates the "grouping" nature of the component + * to avoid tag name checks tag name to diferenciate from the standard suggestion item. + * @protected + */ + get groupItem() { + return true; + } +} + +SuggestionItem.define(); + +export default SuggestionItem; diff --git a/packages/main/src/SuggestionItem.js b/packages/main/src/SuggestionItem.js index 012f3e1dd2a7..22c3dc50b7c1 100644 --- a/packages/main/src/SuggestionItem.js +++ b/packages/main/src/SuggestionItem.js @@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import SuggestionListItem from "./SuggestionListItem.js"; -import GroupHeaderListItem from "./GroupHeaderListItem.js"; import ListItemType from "./types/ListItemType.js"; /** @@ -109,20 +108,6 @@ const metadata = { type: ValueState, defaultValue: ValueState.None, }, - - /** - * Defines the item to be displayed as a group item. - *

- * Note: - * When set, the other properties, such as image, icon, description, etc. will be omitted - * and only the text will be displayed. - * @type {boolean} - * @defaultvalue false - * @public - */ - group: { - type: Boolean, - }, }, slots: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ { }, @@ -150,7 +135,6 @@ class SuggestionItem extends UI5Element { static get dependencies() { return [ SuggestionListItem, - GroupHeaderListItem, ]; } } diff --git a/packages/main/src/features/InputSuggestions.js b/packages/main/src/features/InputSuggestions.js index 2ccb98d376d9..87b563250bfa 100644 --- a/packages/main/src/features/InputSuggestions.js +++ b/packages/main/src/features/InputSuggestions.js @@ -4,6 +4,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import List from "../List.js"; import ResponsivePopover from "../ResponsivePopover.js"; import SuggestionItem from "../SuggestionItem.js"; +import SuggestionGroupItem from "../SuggestionGroupItem.js"; import Button from "../Button.js"; import GroupHeaderListItem from "../GroupHeaderListItem.js"; import SuggestionListItem from "../SuggestionListItem.js"; @@ -66,7 +67,7 @@ class Suggestions { type: suggestion.type || undefined, info: suggestion.info || undefined, infoState: suggestion.infoState, - group: suggestion.group, + groupItem: suggestion.groupItem, key: idx, }); }); @@ -416,6 +417,7 @@ class Suggestions { static get dependencies() { return [ SuggestionItem, + SuggestionGroupItem, ResponsivePopover, List, SuggestionListItem, diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html index a3772f280113..407df30bd80d 100644 --- a/packages/main/test/pages/Input.html +++ b/packages/main/test/pages/Input.html @@ -53,11 +53,11 @@

Input suggestions with ui5-li


Input suggestions with grouping

- + - + @@ -390,15 +390,25 @@

Test Backspace

} suggestionItems.forEach(function(item, idx) { - var suggestion = document.createElement("ui5-suggestion-item"); - suggestion.id = item.key; - suggestion.icon = "world"; - suggestion.info = "explore"; - suggestion.group = item.text.length === 1; - suggestion.infoState = "Success"; - suggestion.description = "travel the world"; - suggestion.text = item.text - input.appendChild(suggestion); + let suggestion; + const groupItem = item.text.length === 1; + + if (groupItem) { + suggestion = document.createElement("ui5-suggestion-group-item"); + suggestion.id = item.key; + suggestion.text = item.text; + input.appendChild(suggestion); + } else { + suggestion = document.createElement("ui5-suggestion-item"); + suggestion.id = item.key; + suggestion.icon = "world"; + suggestion.info = "explore"; + suggestion.group = item.text.length === 1; + suggestion.infoState = "Success"; + suggestion.description = "travel the world"; + suggestion.text = item.text + input.appendChild(suggestion); + } }); labelLiveChange.innerHTML = "Event [input] :: " + value; From 30aeba7fced13c4dc377fed68f157df44e1bd5ce Mon Sep 17 00:00:00 2001 From: ilhan Date: Mon, 31 May 2021 10:29:33 +0300 Subject: [PATCH 2/3] update test page --- packages/main/test/pages/Input.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html index 9f677bc19339..c923f8041758 100644 --- a/packages/main/test/pages/Input.html +++ b/packages/main/test/pages/Input.html @@ -402,11 +402,10 @@

Test Backspace

suggestion = document.createElement("ui5-suggestion-item"); suggestion.id = item.key; suggestion.icon = "world"; - suggestion.info = "explore"; - suggestion.group = item.text.length === 1; - suggestion.infoState = "Success"; suggestion.description = "travel the world"; suggestion.text = item.text + suggestion.additionalText = "explore"; + suggestion.additionalTextState = "Success"; input.appendChild(suggestion); } }); From cb66f94c82bc9c0c715dadfe005e191796b25a48 Mon Sep 17 00:00:00 2001 From: ilhan Date: Mon, 31 May 2021 13:28:49 +0300 Subject: [PATCH 3/3] fix lint --- packages/main/src/Input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index 78788384216d..e93d8755df7c 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -92,7 +92,7 @@ const metadata = { * import "@ui5/webcomponents/dist/features/InputSuggestions.js"; *
* automatically imports the <ui5-suggestion-item> and <ui5-suggestion-group-item> for your convenience. - * + * * @type {sap.ui.webcomponents.main.IInputSuggestionItem[]} * @slot suggestionItems * @public