From 24082e85d57f4b104b3b3b19d79c59f179b0fe44 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Wed, 21 Jun 2023 13:30:05 +0300 Subject: [PATCH] feat(ui5-toolbar): web component introduced --- packages/main/src/Toolbar.hbs | 9 +- packages/main/src/Toolbar.ts | 364 ++++++++---------- packages/main/src/ToolbarButton.hbs | 3 +- packages/main/src/ToolbarButton.ts | 26 +- packages/main/src/ToolbarItem.hbs | 0 packages/main/src/ToolbarItem.ts | 30 +- packages/main/src/ToolbarPopover.hbs | 3 +- packages/main/src/ToolbarPopoverButton.hbs | 4 +- packages/main/src/ToolbarSelect.ts | 74 ---- packages/main/src/ToolbarSpacer.ts | 1 + packages/main/src/themes/Button.css | 2 +- packages/main/src/themes/Toolbar.css | 23 +- packages/main/src/themes/ToolbarPopover.css | 16 +- .../main/src/themes/base/sizes-parameters.css | 12 + .../src/types/ToolbarItemOverflowBehavior.ts | 34 ++ packages/main/src/types/ToolbarPriority.ts | 33 -- packages/main/src/types/ToolbarStyling.ts | 2 +- packages/main/test/pages/Toolbar.html | 170 +++++--- .../_stories/main/Toolbar/Toolbar.stories.ts | 20 +- 19 files changed, 396 insertions(+), 430 deletions(-) delete mode 100644 packages/main/src/ToolbarItem.hbs delete mode 100644 packages/main/src/ToolbarSelect.ts create mode 100644 packages/main/src/types/ToolbarItemOverflowBehavior.ts delete mode 100644 packages/main/src/types/ToolbarPriority.ts diff --git a/packages/main/src/Toolbar.hbs b/packages/main/src/Toolbar.hbs index df201ff4beeb..63ab491b2b10 100644 --- a/packages/main/src/Toolbar.hbs +++ b/packages/main/src/Toolbar.hbs @@ -1,11 +1,10 @@
-
- {{#each standardActions}} +
+ {{#each standardItems}} {{this.toolbarTemplate}} {{/each}} @@ -13,8 +12,6 @@ {{/if}} diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 1294cb23e75a..809c77e70d61 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -3,7 +3,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; -import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; @@ -29,17 +28,14 @@ import ToolbarButton from "./ToolbarButton.js"; import ToolbarSpacer from "./ToolbarSpacer.js"; import ToolbarItem from "./ToolbarItem.js"; import ToolbarSeparator from "./ToolbarSeparator.js"; - -type ActionsWidthMap = { - [key: string]: number -}; +import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js"; /** * @class * *

Overview

* - * The ui5-toolbar component is used to create a horizontal layout with actions. + * The ui5-toolbar component is used to create a horizontal layout with items. * The items can be overflowing in a popover, when the space is not enough to show all of them. * *

Keyboard Handling

@@ -78,62 +74,39 @@ type ActionsWidthMap = { ], }) -/** - * Fired whenever the width of the content changes. - * @param {Number} contentWidth the value of the new changed width. - * @event sap.ui.webc.main.Toolbar.prototype.contentWidthChange - - * @public - */ -@event("content-width-change", { - detail: { - contentWidth: { type: Number }, - }, -}) -/** - * Fired whenever the toolbar popup closes and opens. - * @param {Boolean} open indicates the state of the popup. - * @public - * @event sap.ui.webc.main.Toolbar.prototype.overflowToggle - */ -@event("overflow-toggle", { - detail: { - open: { type: Boolean }, - }, -}) - class Toolbar extends UI5Element { - /** - * Indicates if the Toolbar is in disabled state. - * @type {boolean} - * @public - * @name sap.ui.webc.main.Toolbar.prototype.disabled - */ - @property({ type: Boolean }) - disabled!: boolean; - /** * Defines the design of the toolbar background. It can be solid or transparent. + * Available options are: + *
    + *
  • Transparent
    • + *
  • Solid
    • + *
* @type {sap.ui.webc.main.types.ToolbarDesign} * @public * @defaultvalue "Solid" * @name sap.ui.webc.main.Toolbar.prototype.design */ @property({ type: ToolbarDesign }) - design!: string; + design!: `${ToolbarDesign}`; /** * Defines the styling of the toolbar. It can be standard or clear (no border applied). + * Available options are: + *
    + *
  • Standard
    • + *
  • Transparent
    • + *
* @type {sap.ui.webc.main.types.ToolbarStyling} * @defaultvalue "Standard" * @name sap.ui.webc.main.Toolbar.prototype.styling * @public */ - @property({ type: ToolbarStyling }) - styling!: string; + @property({ type: ToolbarStyling, defaultValue: "Default" }) + styling!: `${ToolbarStyling}`; /** - * Defines if the toolbar overflow popup should close upon intereaction with the actions inside. + * Defines if the toolbar overflow popup should close upon intereaction with the items inside. * It will close by default. * @type {boolean} * @public @@ -144,42 +117,49 @@ class Toolbar extends UI5Element { /** * Indicated the direction in which the Toolbar items will be aligned. + * Available options are: + *
    + *
  • End
    • + *
  • Start
    • + *
* @type {sap.ui.webc.main.types.ToolbarAlign} * @public * @defaultvalue: "End" * @name sap.ui.webc.main.Toolbar.prototype.alignContent */ - @property({ type: ToolbarAlign }) - alignContent!: string; + @property({ type: ToolbarAlign, defaultValue: "End" }) + alignContent!: `${ToolbarAlign}`; /** - * Actions, which will be displayed in the toolbar. + * Items, which will be displayed in the toolbar. * @type {Object} * @private */ @property({ type: Object, multiple: true }) - actionsToBar!: Array; + itemsToBar!: Array; /** - * Actions, that will be displayed inside overflow Popover. + * Items, that will be displayed inside overflow Popover. * @type {Object} * @private */ @property({ type: Object, multiple: true }) - actionsToOverflow!: Array; + itemsToOverflow!: Array; + /** - * Cached actions width and the sum of all of them. + * Cached the sum of all of items width. * @type {Object} * @private */ - @property({ type: Object }) - ACTIONS_WIDTH_MAP!: ActionsWidthMap; + @property({ type: Integer }) + ITEMS_WIDTH: number; + /** - * Indicates the actions have been measured and the layout can be calculated. + * Indicates the items have been measured and the layout can be calculated. * @type {boolean} * @private */ @property({ type: Boolean }) - actionsWidthMeasured!: boolean; + itemsWidthMeasured!: boolean; /** * Indicates the end of the resizing iteration. * @type {boolean} @@ -205,7 +185,7 @@ class Toolbar extends UI5Element { /** * Notifies the toolbar if it should show the items in a reverse way if Toolbar Popover needs to be placed on "Top" position. * @private - * @type {sap.ui.webc.main.types.ToolbarAlign} + * @type {Boolean} */ @property({ type: Boolean }) reverseOverflow!: boolean; @@ -213,47 +193,40 @@ class Toolbar extends UI5Element { /** * Slotted Toolbar items * @type {sap.ui.webc.main.IToolbarItem[]} - * @name sap.ui.webc.main.Toolbar.prototype.default - * @slot actions + * @name sap.ui.webc.main.Toolbar.prototype.items + * @slot items * @public */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) - actions!: Array + items!: Array _onResize!: ResizeObserverCallback; + ITEMS_WIDTH_MAP: Map; + constructor() { super(); - // actions displayed in the bar - this.actionsToBar = []; - - // actions displayed in the toolbar overflow popover - this.actionsToOverflow = []; - - // store for actions width - this.ACTIONS_WIDTH_MAP = {}; - - // indicates the actions have been measured and the layout can be calculated - this.actionsWidthMeasured = false; - // indicates if the bar is being reized at the moment this.resizing = false; + this.ITEMS_WIDTH_MAP = new Map(); + + this.ITEMS_WIDTH = 0; + // resize handler this._onResize = this.onResize.bind(this); } - static get OVERFLOW_BTN_SIZE(): number { - return 44; - } - - static get ACTION_MARGIN() { - return 4; + get OVERFLOW_BTN_SIZE(): number { + const toolbarOverflowButton = this.shadowRoot!.querySelector(".ui5-tb-overflow-btn")!; + return toolbarOverflowButton ? toolbarOverflowButton.getBoundingClientRect().width : 0; } - static get PADDING() { - return 16; + get PADDING(): number { + const toolbarComputedStyle = getComputedStyle(this.getDomRef()!); + return this.calculateCSSREMValue(toolbarComputedStyle, "--_ui5-toolbar-padding-left") + + this.calculateCSSREMValue(toolbarComputedStyle, "--_ui5-toolbar-padding-right"); } /** @@ -274,17 +247,21 @@ class Toolbar extends UI5Element { } await renderFinished(); - this.storeActionsWidth(); - this.doLayout(); + this.storeItemsWidth(); + this.processOverflowLayout(); + } + + calculateCSSREMValue(styleSet: CSSStyleDeclaration, propertyName: string): number { + return Number(styleSet.getPropertyValue(propertyName).replace("rem", "")) * 16; } /** * Layout management */ - doLayout(forceLayout = false) { + processOverflowLayout(forceLayout = false) { const containerWidth = this.getContainerWidth(); - const contentWidth: number = this.getAllActionsWidth(); - const contentOverflows = contentWidth + Toolbar.OVERFLOW_BTN_SIZE > containerWidth; + const contentWidth: number = this.getAllItemsWidth(); + const contentOverflows = contentWidth + this.OVERFLOW_BTN_SIZE > containerWidth; // skip calculation if the width has not been changed if (!forceLayout && this.width === containerWidth) { @@ -292,9 +269,9 @@ class Toolbar extends UI5Element { } if (contentOverflows) { - this.distributeActions(contentWidth - containerWidth); + this.distributeItems(contentWidth - containerWidth); } else { - this.displayAllActionsIntoBar(); + this.displayAllItemsIntoBar(); } this.width = containerWidth; @@ -305,118 +282,119 @@ class Toolbar extends UI5Element { } } - storeActionsWidth() { + storeItemsWidth() { let totalWidth = 0; - this.movableActions.forEach((action: ToolbarItem) => { - const actionWidth = this.getActionWidth(action); - const id: string = action._id; - totalWidth += actionWidth; - this.ACTIONS_WIDTH_MAP[id] = actionWidth; + this.movableItems.forEach((item: ToolbarItem) => { + const itemWidth = this.getitemWidth(item); + const id: string = item._id; + totalWidth += itemWidth; + this.ITEMS_WIDTH_MAP.set(id, itemWidth); }); - this.ACTIONS_WIDTH_MAP.width = totalWidth; - this.actionsWidthMeasured = true; + this.ITEMS_WIDTH = totalWidth; + this.itemsWidthMeasured = true; } - distributeActions(overflowSpace = 0) { - overflowSpace += Toolbar.OVERFLOW_BTN_SIZE; - overflowSpace += Toolbar.PADDING; + distributeItems(overflowSpace = 0) { + overflowSpace += this.OVERFLOW_BTN_SIZE; + overflowSpace += this.PADDING; - this.actionsToBar = []; - this.actionsToOverflow = []; + this.itemsToBar = []; + this.itemsToOverflow = []; - // distribute actions that always overflow - this.distributeActionsThatAlwaysOverflow(); + // distribute items that always overflow + this.distributeItemsThatAlwaysOverflow(); - // distribute the rest of the actions, based on the available space - this.movableActions.reverse().forEach(action => { - if (overflowSpace > 0 && action.getAttribute("priority") !== "Never") { - this.actionsToOverflow.unshift(action); - overflowSpace -= this.getCachedActionWidth(action._id); + // distribute the rest of the items, based on the available space + this.movableItems.reverse().forEach(item => { + if (overflowSpace > 0 && item.getAttribute("overflowPriority") !== ToolbarItemOverflowBehavior.NeverOverflow) { + this.itemsToOverflow.unshift(item); + overflowSpace -= this.getCachedItemWidth(item._id)!; } else { - this.actionsToBar.unshift(action); + this.itemsToBar.unshift(item); } }); // If the last bar item is a spacer, force it to the overflow even if there is enough space for it - if (this.actionsToBar.length) { - const lastActionToBar = this.actionsToBar[this.actionsToBar.length - 1]; - if (lastActionToBar.ignoreSpace) { - const actionBar = this.actionsToBar.pop(); - if (actionBar) { - this.actionsToOverflow.unshift(actionBar); + if (this.itemsToBar.length) { + const lastItemToBar = this.itemsToBar[this.itemsToBar.length - 1]; + if (lastItemToBar.ignoreSpace) { + const itemBar = this.itemsToBar.pop(); + if (itemBar) { + this.itemsToOverflow.unshift(itemBar); } } } } - displayAllActionsIntoBar() { - this.actionsToOverflow = []; + displayAllItemsIntoBar() { + this.itemsToOverflow = []; - // distribute actions that always overflow - this.distributeActionsThatAlwaysOverflow(); + // distribute items that always overflow + this.distributeItemsThatAlwaysOverflow(); - // distribute actions that always overflow - this.distributeActionsThatNeverOverflow(); + // distribute items that always overflow + this.distributeItemsThatNeverOverflow(); - // distribute the rest of the actions into the bar - this.actionsToBar = this.movableActions.map((action: ToolbarItem) => action); + // distribute the rest of the items into the bar + this.itemsToBar = this.movableItems.map((item: ToolbarItem) => item); } - distributeActionsThatAlwaysOverflow() { - this.alwaysOverflowActions.forEach((action: ToolbarItem) => { - this.actionsToOverflow.push(action); + distributeItemsThatAlwaysOverflow() { + this.alwaysOverflowItems.forEach((item: ToolbarItem) => { + this.itemsToOverflow.push(item); }); } - distributeActionsThatNeverOverflow() { - this.neverOverflowActions.forEach((action: ToolbarItem) => { - this.actionsToBar.push(action); + distributeItemsThatNeverOverflow() { + this.neverOverflowItems.forEach((item: ToolbarItem) => { + this.itemsToBar.push(item); }); } - get alwaysOverflowActions() { - return this._actions.filter((action: ToolbarItem) => action.getAttribute("priority") === "Always"); + get alwaysOverflowItems() { + return this._items.filter((item: ToolbarItem) => item.getAttribute("overflow-priority") === ToolbarItemOverflowBehavior.AlwaysOverflow); } - get movableActions() { - return this._actions.filter((action: ToolbarItem) => action.getAttribute("priority") !== "Always"); + get movableItems() { + return this._items.filter((item: ToolbarItem) => item.getAttribute("overflow-priority") !== ToolbarItemOverflowBehavior.AlwaysOverflow); } - get neverOverflowActions() { - return this._actions.filter((action: ToolbarItem) => action.getAttribute("priority") === "Never"); + get neverOverflowItems() { + return this._items.filter((item: ToolbarItem) => item.getAttribute("overflow-priority") === ToolbarItemOverflowBehavior.NeverOverflow); } /** * Event Handlers */ onResize() { - if (!this.actionsWidthMeasured) { + if (!this.itemsWidthMeasured) { return; } this.resizing = true; this.closeOverflow(); - this.doLayout(); + this.processOverflowLayout(); } - onBtnOverflowClick() { - this.openOverflow(); - } - - onCustomActionClick(e: MouseEvent) { + onCustomItemClick(e: MouseEvent) { const target = e.target as HTMLElement; - const item = target.closest(".ui5-external-action-item"); + const item = target.closest(".ui5-tb-item") || target.closest(".ui5-tb-popover-item"); + + if (target === this.overflowButtonDOM) { + this.openOverflow(); + return; + } if (!item) { return; } - const refItemId = target.getAttribute("data-ui5-ref-id"); + const refItemId = target.getAttribute("data-ui5-external-action-item-id"); if (refItemId) { - this.getActionByID(refItemId)!.fireEvent("click", { + this.getItemByID(refItemId)!.fireEvent("click", { targetRef: e.target, }, true); @@ -426,14 +404,6 @@ class Toolbar extends UI5Element { } } - _onoverflowopen() { - this.fireEvent("overflow-toggle", { open: true }); - } - - _onoverflowclose() { - this.fireEvent("overflow-toggle", { open: false }); - } - /** * Returns if the overflow popup is open. * @@ -448,29 +418,29 @@ class Toolbar extends UI5Element { /** * Read-only members */ - get overflowActions() { - const overflowActions = this.getActionsInfo(this.actionsToOverflow); - return this.reverseOverflow ? overflowActions.reverse() : overflowActions; + get overflowItems() { + const overflowItems = this.getItemsInfo(this.itemsToOverflow); + return this.reverseOverflow ? overflowItems.reverse() : overflowItems; } - get standardActions() { - if (!this.actionsWidthMeasured && (!arraysAreEqual(this._actions, this.actionsToBar))) { - this.actionsToBar = this._actions.filter(action => action); + get standardItems() { + if (!this.itemsWidthMeasured && (!arraysAreEqual(this._items, this.itemsToBar))) { + this.itemsToBar = this._items.filter(item => item); } - return this.getActionsInfo(this.actionsToBar); + return this.getItemsInfo(this.itemsToBar); } get showOverflowBtn() { - return !!this.actionsToOverflow.length; + return !!this.itemsToOverflow.length; } get tabIndex(): number { return -1; } - get _actions(): Array { - return this.getSlottedNodes("actions"); + get _items(): Array { + return this.getSlottedNodes("items"); } /** @@ -480,26 +450,26 @@ class Toolbar extends UI5Element { return this.shadowRoot!.querySelector(".ui5-tb-overflow-btn"); } - get actionsDOM() { - return this.shadowRoot!.querySelector(".ui5-tb-actions"); + get itemsDOM() { + return this.shadowRoot!.querySelector(".ui5-tb-items"); } - get hasActionWithText(): boolean { - return this.overflowActions.some((action: ToolbarItem) => action.containsText); + get hasItemWithText(): boolean { + return this.overflowItems.some((item: ToolbarItem) => item.containsText); } get hasFlexibleSpacers() { - return this.actions.some((action: ToolbarItem) => action.localName === "ui5-toolbar-spacer" && !action.hasFlexibleWidth); + return this.items.some((item: ToolbarItem) => item.localName === "ui5-toolbar-spacer" && !item.hasFlexibleWidth); } get classes() { return { - actions: { - "ui5-tb-actions": true, - "ui5-tb-actions-full-width": this.hasFlexibleSpacers, + items: { + "ui5-tb-items": true, + "ui5-tb-items-full-width": this.hasFlexibleSpacers, }, overflow: { - "ui5-overflow-list--alignleft": this.hasActionWithText, + "ui5-overflow-list--alignleft": this.hasItemWithText, }, }; } @@ -523,65 +493,67 @@ class Toolbar extends UI5Element { /** * Private members */ - getActionsInfo(actions: Array) { - return actions.map((action: ToolbarItem) => { + getItemsInfo(items: Array) { + return items.map((item: ToolbarItem) => { // Item props - const item = { - toolbarTemplate: executeTemplate(action.toolbarTemplate, action), - toolbarPopoverTemplate: executeTemplate(action.toolbarPopoverTemplate, action), + const toolbarItem = { + toolbarTemplate: executeTemplate(item.toolbarTemplate, item), + toolbarPopoverTemplate: executeTemplate(item.toolbarPopoverTemplate, item), }; - return item as ToolbarItem; + return toolbarItem as ToolbarItem; }); } - getActionWidth(action: ToolbarItem): number { + getitemWidth(item: ToolbarItem): number { // Spacer width - always 0 for flexible spacers, so that they shrink, otherwise - measure the width normally - if (action.ignoreSpace && !action.hasFlexibleWidth) { + if (item.ignoreSpace && !item.hasFlexibleWidth) { return 0; } - const id: string = action._id; - // Measure rendered width for spacers with width, and for normal actions - const renderedAction = this.getToolbarActionByID(id); + const id: string = item._id; + // Measure rendered width for spacers with width, and for normal items + const renderedItem = this.getToolbarItemByID(id); - let actionWidth = 0; + let itemWidth = 0; - if (renderedAction) { - actionWidth = renderedAction.offsetWidth + Toolbar.ACTION_MARGIN; + if (renderedItem) { + const ItemCSSStyleSet = getComputedStyle(renderedItem); + itemWidth = renderedItem.offsetWidth + this.calculateCSSREMValue(ItemCSSStyleSet, "--_ui5-toolbar-item-margin-right") + + this.calculateCSSREMValue(ItemCSSStyleSet, "--_ui5-toolbar-item-margin-left"); } else { - actionWidth = this.getCachedActionWidth(id) || 0; + itemWidth = this.getCachedItemWidth(id) || 0; } - return Math.ceil(actionWidth); + return Math.ceil(itemWidth); } - getCachedActionWidth(id: string) { - return this.ACTIONS_WIDTH_MAP[id]; + getCachedItemWidth(id: string) { + return this.ITEMS_WIDTH_MAP.get(id); } - getAllActionsWidth() { - return this.ACTIONS_WIDTH_MAP.width; + getAllItemsWidth() { + return this.ITEMS_WIDTH; } getContainerWidth() { return this.offsetWidth; } - getActionByID(id: string) { - return this._actions.find(action => action._id === id); + getItemByID(id: string) { + return this._items.find(item => item._id === id); } - getToolbarActionByID(id: string): HTMLElement | null { - return this.actionsDOM!.querySelector(`[data-ui5-external-action-item-id="${id}"]`); + getToolbarItemByID(id: string): HTMLElement | null { + return this.itemsDOM!.querySelector(`[data-ui5-external-action-item-id="${id}"]`); } - async getOverflowedActionByID(id: string): Promise { + async getOverflowedItemByID(id: string): Promise { const popover = await this.getOverflowPopover(); return popover!.querySelector(`[data-ui5-external-action-item-id="${id}"]`); } - getActionDOMRefByID(id: string) { - return this.getToolbarActionByID(id) || (this.getOverflowedActionByID(id)); + getItemDOMRefByID(id: string) { + return this.getToolbarItemByID(id) || (this.getOverflowedItemByID(id)); } } diff --git a/packages/main/src/ToolbarButton.hbs b/packages/main/src/ToolbarButton.hbs index 6e01a24f26c2..35dcba1e001f 100644 --- a/packages/main/src/ToolbarButton.hbs +++ b/packages/main/src/ToolbarButton.hbs @@ -5,10 +5,11 @@ icon="{{this.icon}}" design="{{this.design}}" ?disabled="{{this.disabled}}" + ?hidden="{{this.hidden}}" @click="{{this.click}}" data-ui5-external-action-item-id="{{this._id}}" .refItemId="{{this._id}}" - ?priority="{{priority}}" + overflow-priority="{{this.overflowPriority}}" > {{this.text}} \ No newline at end of file diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts index f1e0e942caf5..f2c4bf03a142 100644 --- a/packages/main/src/ToolbarButton.ts +++ b/packages/main/src/ToolbarButton.ts @@ -25,8 +25,8 @@ import ToolbarPopoverButtonTemplate from "./generated/templates/ToolbarPopoverBu * * @constructor * @author SAP SE - * @alias ToolbarButton - * @extends UI5Element + * @alias sap.ui.webc.main.ToolbarButton + * @extends sap.ui.webc.base.UI5Element * @public */ class ToolbarButton extends ToolbarItem { @@ -37,6 +37,7 @@ class ToolbarButton extends ToolbarItem { * * @type {boolean} * @defaultvalue false + * @name sap.ui.webc.main.ToolbarButton.prototype.disabled * @public */ @property({ type: Boolean }) @@ -44,16 +45,24 @@ class ToolbarButton extends ToolbarItem { /** * Defines the action design. - *

- * Note: Available options are "Default", "Emphasized", "Positive", - * "Negative", and "Transparent". + * The available values are: + * + *
    + *
  • Default
    • + *
  • Emphasized
    • + *
  • Positive
    • + *
  • Negative
    • + *
  • Transparent
    • + *
  • Attention
    • + *
* * @type {ButtonDesign} * @defaultvalue "Transparent" + * @name sap.ui.webc.main.ToolbarButton.prototype.design * @public */ @property({ type: ButtonDesign }) - design!: ButtonDesign; + design!: `${ButtonDesign}`; /** * Defines the icon source URI. @@ -64,6 +73,7 @@ class ToolbarButton extends ToolbarItem { * * @type {string} * @defaultvalue "" + * @name sap.ui.webc.main.ToolbarButton.prototype.icon * @public */ @property({ type: String }) @@ -72,12 +82,14 @@ class ToolbarButton extends ToolbarItem { /** * Button text * @public + * @name sap.ui.webc.main.ToolbarButton.prototype.text */ @property({ type: String }) text!: string; /** * Button width + * @name sap.ui.webc.main.ToolbarButton.prototype.width * @public */ @property({ type: String }) @@ -86,7 +98,7 @@ class ToolbarButton extends ToolbarItem { get styles() { return { width: this.width, - display: this.hidden ? "none" : "block", + display: this.hidden ? "none" : "inline-block", }; } diff --git a/packages/main/src/ToolbarItem.hbs b/packages/main/src/ToolbarItem.hbs deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/packages/main/src/ToolbarItem.ts b/packages/main/src/ToolbarItem.ts index b577cb827837..e74ac7728c36 100644 --- a/packages/main/src/ToolbarItem.ts +++ b/packages/main/src/ToolbarItem.ts @@ -3,7 +3,7 @@ import { TemplateFunction } from "@ui5/webcomponents-base/dist/renderer/executeT import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import ToolbarPriority from "./types/ToolbarPriority.js"; +import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js"; @customElement({ tag: "ui5-tb-item", @@ -16,26 +16,26 @@ import ToolbarPriority from "./types/ToolbarPriority.js"; * * @constructor * @author SAP SE - * @alias ToolbarItem - * @extends UI5Element + * @alias sap.ui.webc.main.ToolbarItem + * @extends sap.ui.webc.base.UI5Element * @public */ class ToolbarItem extends UI5Element { /** - * Property used to define the access of the item to the overflow Popover. If "Never" option is set, - * the item never goes in the Popover, if "Always" - it never comes out of it. + * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, + * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. + * Available options are: + *
    + *
  • NeverOverflow
    • + *
  • AlwaysOverflow
    • + *
  • Default
    • + *
* @public - * @defaultvalue ToolbarPriority.Default, + * @name sap.ui.webc.main.ToolbarItem.prototype.overflowPriority + * @defaultvalue ToolbarItemOverflowBehavior.Default, */ - @property({ type: ToolbarPriority }) - priority!: string; - - /** - * When set, the button will not be visible in the toolbar - * @private - */ - @property({ type: Boolean }) - hidden!: boolean; + @property({ type: ToolbarItemOverflowBehavior, defaultValue: ToolbarItemOverflowBehavior.Default }) + overflowPriority!: `${ToolbarItemOverflowBehavior}`; /* * Defines if the width of the item should be ignored in calculating the whole width of the toolbar diff --git a/packages/main/src/ToolbarPopover.hbs b/packages/main/src/ToolbarPopover.hbs index 53732704a9e6..cb1998e29daf 100644 --- a/packages/main/src/ToolbarPopover.hbs +++ b/packages/main/src/ToolbarPopover.hbs @@ -4,10 +4,11 @@ horizontal-align="Right" @after-open="{{_onoverflowopen}}" @after-close="{{_onoverflowclose}}" + @click="{{onCustomItemClick}}" no-arrow >
- {{#each overflowActions}} + {{#each overflowItems}} {{this.toolbarPopoverTemplate}} {{/each}}
diff --git a/packages/main/src/ToolbarPopoverButton.hbs b/packages/main/src/ToolbarPopoverButton.hbs index 5aeb1ca7eabf..3b147528bf78 100644 --- a/packages/main/src/ToolbarPopoverButton.hbs +++ b/packages/main/src/ToolbarPopoverButton.hbs @@ -4,9 +4,9 @@ ?disabled="{{this.disabled}}" ?hidden="{{this.hidden}}" ?priority="{{this.priority}}" - @click="{{this.press}}" + @click="{{this.click}}" class="ui5-tb-popover-button ui5-tb-popover-item {{this.classList.value}}" - data-ui5-external-action-item-id="{{this.refItemid}}" + data-ui5-external-action-item-id="{{this._id}}" > {{this.text}} \ No newline at end of file diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts deleted file mode 100644 index 0bc7bf18c7df..000000000000 --- a/packages/main/src/ToolbarSelect.ts +++ /dev/null @@ -1,74 +0,0 @@ -import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; - -// Templates - -import ToolbarPriority from "./types/ToolbarPriority.js"; - -import ToolbarSelectTemplate from "./generated/templates/ToolbarSelectTemplate.lit.js"; -import ToolbarPopoverSelectTemplate from "./generated/templates/ToolbarPopoverSelectTemplate.lit.js"; -import ToolbarItem from "./ToolbarItem.js"; -import Option from "./Option.js"; - -/** - * @class - * - *

Overview

- * The ui5-toolbar-select component is used to create a toolbar drop-down list. - * The items inside the ui5-toolbar-select define the available options by using the ui5-option component. - * - *

ES6 Module Import

- * import "@ui5/webcomponents/dist/Select"; - *
- * import "@ui5/webcomponents/dist/Option"; (comes with ui5-toolbar-select) - * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.ToolbarSelect - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-toolbar-select - * @appenddocs sap.ui.webc.main.Option - * @public - * @since 1.16.0 - */ -@customElement({ - tag: "ui5-toolbar-select", -}) -class ToolbarSelect extends ToolbarItem { - /** - * When set, the button will be always part of the overflow part of the toolbar. - * @public - * @defaultvalue ToolbarPriority.Default, - */ - @property({ type: ToolbarPriority }) - priority!: string; - - @property({ type: String }) - width!: string; - - /** - * When set, the button will not be visible in the toolbar - * @private - */ - @property({ type: Boolean }) - hidden!: boolean; - - @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) - options!: Array