diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 9fd5c08f1ee..ca87eb30f24 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -1355,11 +1355,13 @@ export class IxMenuAbout { } +import type { CustomCloseEvent as IIxMenuAboutCustomCloseEvent } from '@siemens/ix'; + export declare interface IxMenuAbout extends Components.IxMenuAbout { /** * About and Legal closed */ - close: EventEmitter>; + close: EventEmitter>; } @@ -1378,11 +1380,19 @@ export class IxMenuAboutItem { constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; + proxyOutputs(this, this.el, ['labelChange']); } } -export declare interface IxMenuAboutItem extends Components.IxMenuAboutItem {} +import type { CustomLabelChangeEvent as IIxMenuAboutItemCustomLabelChangeEvent } from '@siemens/ix'; + +export declare interface IxMenuAboutItem extends Components.IxMenuAboutItem { + /** + * Label changed + */ + labelChange: EventEmitter>; +} @ProxyCmp({ @@ -1537,11 +1547,13 @@ export class IxMenuSettings { } +import type { CustomCloseEvent as IIxMenuSettingsCustomCloseEvent } from '@siemens/ix'; + export declare interface IxMenuSettings extends Components.IxMenuSettings { /** * Popover closed */ - close: EventEmitter>; + close: EventEmitter>; } @@ -1565,11 +1577,13 @@ export class IxMenuSettingsItem { } +import type { CustomLabelChangeEvent as IIxMenuSettingsItemCustomLabelChangeEvent } from '@siemens/ix'; + export declare interface IxMenuSettingsItem extends Components.IxMenuSettingsItem { /** * Label changed */ - labelChange: EventEmitter>; + labelChange: EventEmitter>; } diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 0e93c7c9ba1..fcd5611d75a 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -9654,15 +9654,16 @@ "events": [ { "event": "close", - "detail": "{ nativeEvent: MouseEvent; name: string; }", + "detail": "CustomCloseEvent", "bubbles": true, "complexType": { - "original": "{\n nativeEvent: MouseEvent;\n name: string;\n }", - "resolved": "{ nativeEvent: MouseEvent; name: string; }", + "original": "CustomCloseEvent", + "resolved": "CustomCloseEvent", "references": { - "MouseEvent": { - "location": "global", - "id": "global::MouseEvent" + "CustomCloseEvent": { + "location": "import", + "path": "../utils/menu-tabs/menu-tabs-utils", + "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomCloseEvent" } } }, @@ -9716,7 +9717,28 @@ } ], "methods": [], - "events": [], + "events": [ + { + "event": "labelChange", + "detail": "CustomLabelChangeEvent", + "bubbles": true, + "complexType": { + "original": "CustomLabelChangeEvent", + "resolved": "CustomLabelChangeEvent", + "references": { + "CustomLabelChangeEvent": { + "location": "import", + "path": "../utils/menu-tabs/menu-tabs-utils", + "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomLabelChangeEvent" + } + } + }, + "cancelable": true, + "composed": true, + "docs": "Label changed", + "docsTags": [] + } + ], "styles": [], "slots": [], "parts": [], @@ -10579,7 +10601,7 @@ "mutable": true, "attr": "active-tab-label", "reflectToAttr": false, - "docs": "active tab", + "docs": "Active tab", "docsTags": [], "values": [ { @@ -10600,7 +10622,7 @@ "mutable": false, "attr": "label", "reflectToAttr": false, - "docs": "Label", + "docs": "Label of first tab", "docsTags": [], "default": "'Settings'", "values": [ @@ -10638,15 +10660,16 @@ "events": [ { "event": "close", - "detail": "{ nativeEvent: MouseEvent; name: string; }", + "detail": "CustomCloseEvent", "bubbles": true, "complexType": { - "original": "{\n nativeEvent: MouseEvent;\n name: string;\n }", - "resolved": "{ nativeEvent: MouseEvent; name: string; }", + "original": "CustomCloseEvent", + "resolved": "CustomCloseEvent", "references": { - "MouseEvent": { - "location": "global", - "id": "global::MouseEvent" + "CustomCloseEvent": { + "location": "import", + "path": "../utils/menu-tabs/menu-tabs-utils", + "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomCloseEvent" } } }, @@ -10687,8 +10710,8 @@ }, "mutable": false, "attr": "label", - "reflectToAttr": false, - "docs": "Label", + "reflectToAttr": true, + "docs": "Settings Item label", "docsTags": [], "values": [ { @@ -10703,12 +10726,18 @@ "events": [ { "event": "labelChange", - "detail": "{ name: string; oldLabel: string; newLabel: string; }", + "detail": "CustomLabelChangeEvent", "bubbles": true, "complexType": { - "original": "{\n name: string;\n oldLabel: string;\n newLabel: string;\n }", - "resolved": "{ name: string; oldLabel: string; newLabel: string; }", - "references": {} + "original": "CustomLabelChangeEvent", + "resolved": "CustomLabelChangeEvent", + "references": { + "CustomLabelChangeEvent": { + "location": "import", + "path": "../utils/menu-tabs/menu-tabs-utils", + "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomLabelChangeEvent" + } + } }, "cancelable": true, "composed": true, @@ -16868,6 +16897,11 @@ "docstring": "", "path": "src/components/key-value/key-value.tsx" }, + "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomCloseEvent": { + "declaration": "export interface CustomCloseEvent {\n nativeEvent: MouseEvent;\n name: string;\n}", + "docstring": "", + "path": "src/components/utils/menu-tabs/menu-tabs-utils.ts" + }, "src/components/modal/modal.tsx::IxModalSize": { "declaration": "export type IxModalSize = IxModalFixedSize | IxModalDynamicSize;", "docstring": "", @@ -16953,6 +16987,11 @@ "docstring": "", "path": "src/components/flip-tile/flip-tile-state.ts" }, + "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomLabelChangeEvent": { + "declaration": "export interface CustomLabelChangeEvent {\n name: string;\n oldLabel: string;\n newLabel: string;\n}", + "docstring": "", + "path": "src/components/utils/menu-tabs/menu-tabs-utils.ts" + }, "src/components/utils/typed-event.ts::TypedEvent": { "declaration": "any", "docstring": "", diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index acafde512a2..e1d3f3fb89c 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -31,6 +31,7 @@ import { FlipTileState } from "./components/flip-tile/flip-tile-state"; import { IconButtonVariant } from "./components/icon-button/icon-button"; import { ButtonVariant as ButtonVariant1 } from "./components/button/button"; import { KeyValueLabelPosition } from "./components/key-value/key-value"; +import { CustomCloseEvent, CustomLabelChangeEvent } from "./components/utils/menu-tabs/menu-tabs-utils"; import { IxModalSize } from "./components/modal/modal"; import { PushCardVariant } from "./components/push-card/push-card"; import { SliderMarker } from "./components/slider/slider"; @@ -68,6 +69,7 @@ export { FlipTileState } from "./components/flip-tile/flip-tile-state"; export { IconButtonVariant } from "./components/icon-button/icon-button"; export { ButtonVariant as ButtonVariant1 } from "./components/button/button"; export { KeyValueLabelPosition } from "./components/key-value/key-value"; +export { CustomCloseEvent, CustomLabelChangeEvent } from "./components/utils/menu-tabs/menu-tabs-utils"; export { IxModalSize } from "./components/modal/modal"; export { PushCardVariant } from "./components/push-card/push-card"; export { SliderMarker } from "./components/slider/slider"; @@ -1520,11 +1522,11 @@ export namespace Components { } interface IxMenuSettings { /** - * active tab + * Active tab */ "activeTabLabel": string; /** - * Label + * Label of first tab */ "label": string; /** @@ -1534,7 +1536,7 @@ export namespace Components { } interface IxMenuSettingsItem { /** - * Label + * Settings Item label */ "label": string; } @@ -2436,6 +2438,10 @@ export interface IxMenuAboutCustomEvent extends CustomEvent { detail: T; target: HTMLIxMenuAboutElement; } +export interface IxMenuAboutItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxMenuAboutItemElement; +} export interface IxMenuAboutNewsCustomEvent extends CustomEvent { detail: T; target: HTMLIxMenuAboutNewsElement; @@ -3227,10 +3233,7 @@ declare global { new (): HTMLIxMenuElement; }; interface HTMLIxMenuAboutElementEventMap { - "close": { - nativeEvent: MouseEvent; - name: string; - }; + "close": CustomCloseEvent; } interface HTMLIxMenuAboutElement extends Components.IxMenuAbout, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLIxMenuAboutElement, ev: IxMenuAboutCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -3246,7 +3249,18 @@ declare global { prototype: HTMLIxMenuAboutElement; new (): HTMLIxMenuAboutElement; }; + interface HTMLIxMenuAboutItemElementEventMap { + "labelChange": CustomLabelChangeEvent; + } interface HTMLIxMenuAboutItemElement extends Components.IxMenuAboutItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIxMenuAboutItemElement, ev: IxMenuAboutItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIxMenuAboutItemElement, ev: IxMenuAboutItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIxMenuAboutItemElement: { prototype: HTMLIxMenuAboutItemElement; @@ -3320,10 +3334,7 @@ declare global { new (): HTMLIxMenuItemElement; }; interface HTMLIxMenuSettingsElementEventMap { - "close": { - nativeEvent: MouseEvent; - name: string; - }; + "close": CustomCloseEvent; } interface HTMLIxMenuSettingsElement extends Components.IxMenuSettings, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLIxMenuSettingsElement, ev: IxMenuSettingsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -3340,11 +3351,7 @@ declare global { new (): HTMLIxMenuSettingsElement; }; interface HTMLIxMenuSettingsItemElementEventMap { - "labelChange": { - name: string; - oldLabel: string; - newLabel: string; - }; + "labelChange": CustomLabelChangeEvent; } interface HTMLIxMenuSettingsItemElement extends Components.IxMenuSettingsItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLIxMenuSettingsItemElement, ev: IxMenuSettingsItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -5350,10 +5357,7 @@ declare namespace LocalJSX { /** * About and Legal closed */ - "onClose"?: (event: IxMenuAboutCustomEvent<{ - nativeEvent: MouseEvent; - name: string; - }>) => void; + "onClose"?: (event: IxMenuAboutCustomEvent) => void; /** * Internal */ @@ -5364,6 +5368,10 @@ declare namespace LocalJSX { * About Item label */ "label"?: string; + /** + * Label changed + */ + "onLabelChange"?: (event: IxMenuAboutItemCustomEvent) => void; } interface IxMenuAboutNews { /** @@ -5495,20 +5503,17 @@ declare namespace LocalJSX { } interface IxMenuSettings { /** - * active tab + * Active tab */ "activeTabLabel"?: string; /** - * Label + * Label of first tab */ "label"?: string; /** * Popover closed */ - "onClose"?: (event: IxMenuSettingsCustomEvent<{ - nativeEvent: MouseEvent; - name: string; - }>) => void; + "onClose"?: (event: IxMenuSettingsCustomEvent) => void; /** * Internal */ @@ -5516,17 +5521,13 @@ declare namespace LocalJSX { } interface IxMenuSettingsItem { /** - * Label + * Settings Item label */ "label"?: string; /** * Label changed */ - "onLabelChange"?: (event: IxMenuSettingsItemCustomEvent<{ - name: string; - oldLabel: string; - newLabel: string; - }>) => void; + "onLabelChange"?: (event: IxMenuSettingsItemCustomEvent) => void; } interface IxMessageBar { /** diff --git a/packages/core/src/components/menu-about-item/menu-about-item.tsx b/packages/core/src/components/menu-about-item/menu-about-item.tsx index 9a677518514..c9cd06c2706 100644 --- a/packages/core/src/components/menu-about-item/menu-about-item.tsx +++ b/packages/core/src/components/menu-about-item/menu-about-item.tsx @@ -7,7 +7,16 @@ * LICENSE file in the root directory of this source tree. */ -import { Component, h, Host, Prop } from '@stencil/core'; +import { + Component, + Event, + EventEmitter, + h, + Host, + Prop, + Watch, +} from '@stencil/core'; +import { CustomLabelChangeEvent } from '../utils/menu-tabs/menu-tabs-utils'; @Component({ tag: 'ix-menu-about-item', @@ -20,6 +29,20 @@ export class MenuAboutItem { */ @Prop({ reflect: true }) label: string; + /** + * Label changed + */ + @Event() labelChange: EventEmitter; + + @Watch('label') + watchLabel(newValue: string, oldValue: string) { + this.labelChange.emit({ + name: 'ix-menu-about-item', + oldLabel: oldValue, + newLabel: newValue, + }); + } + render() { return ( diff --git a/packages/core/src/components/menu-about/menu-about.tsx b/packages/core/src/components/menu-about/menu-about.tsx index e36e11f0143..a62399d0cc3 100644 --- a/packages/core/src/components/menu-about/menu-about.tsx +++ b/packages/core/src/components/menu-about/menu-about.tsx @@ -14,11 +14,16 @@ import { EventEmitter, forceUpdate, h, - Host, Prop, State, Watch, } from '@stencil/core'; +import { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc'; +import { + CustomCloseEvent, + initialize, + setTab, +} from '../utils/menu-tabs/menu-tabs-utils'; @Component({ tag: 'ix-menu-about', @@ -26,9 +31,12 @@ import { shadow: true, }) export class MenuAbout { + @Element() el!: HTMLIxMenuAboutElement; + /** * Active tab */ + // eslint-disable-next-line @stencil-community/strict-mutable @Prop({ mutable: true }) activeTabLabel: string; /** @@ -41,105 +49,27 @@ export class MenuAbout { */ @Prop() show = false; - @Element() el!: HTMLIxMenuAboutElement; - /** * About and Legal closed */ - @Event() close: EventEmitter<{ - nativeEvent: MouseEvent; - name: string; - }>; + @Event() close: EventEmitter; - @State() labels: string[] = []; + @State() items: HTMLIxMenuAboutItemElement[]; - get aboutItems(): HTMLIxMenuAboutItemElement[] { - return Array.from(this.el.querySelectorAll('ix-menu-about-item')); - } - - private setTab(label: string) { - this.activeTabLabel = label; - this.aboutItems.forEach((i) => { - i.style.display = 'none'; - if (i.label === this.activeTabLabel) { - i.style.display = 'block'; - } - }); + @Watch('activeTabLabel') + updateTab(label: string) { + setTab(this, label); } componentWillLoad() { - if (this.aboutItems.length) { - this.setTab(this.activeTabLabel || this.aboutItems[0].label); - } + initialize(this); } componentDidLoad() { forceUpdate(this.el); } - componentWillRender() { - this.updateLabels(); - } - - private updateLabels() { - this.labels = this.aboutItems.map((i) => i.label); - } - - @Watch('activeTabLabel') - watchActiveTabLabel(value: string) { - // Wait a DOM render cycle to get changed labels - setTimeout(() => this.setTab(value)); - } - - private getSelectedTabIndex(label: string) { - const selectedItem = this.aboutItems.find((item) => item.label === label); - return this.aboutItems.indexOf(selectedItem); - } - - private getTabItems() { - return this.aboutItems.map(({ label }) => { - return ( - this.setTab(label)} - > - {label} - - ); - }); - } - render() { - return ( - -
-

{this.label}

- - this.close.emit({ - name: 'ix-menu-about', - nativeEvent: e, - }) - } - > -
- - {this.getTabItems()} - -
- -
- - ); + return ; } } diff --git a/packages/core/src/components/menu-settings-item/menu-settings-item.tsx b/packages/core/src/components/menu-settings-item/menu-settings-item.tsx index 0b5cabf3adb..b83619ebcf2 100644 --- a/packages/core/src/components/menu-settings-item/menu-settings-item.tsx +++ b/packages/core/src/components/menu-settings-item/menu-settings-item.tsx @@ -16,6 +16,7 @@ import { Prop, Watch, } from '@stencil/core'; +import { CustomLabelChangeEvent } from '../utils/menu-tabs/menu-tabs-utils'; @Component({ tag: 'ix-menu-settings-item', @@ -24,18 +25,14 @@ import { }) export class MenuSettingsItem { /** - * Label + * Settings Item label */ - @Prop() label: string; + @Prop({ reflect: true }) label: string; /** * Label changed */ - @Event() labelChange: EventEmitter<{ - name: string; - oldLabel: string; - newLabel: string; - }>; + @Event() labelChange: EventEmitter; @Watch('label') watchLabel(newValue: string, oldValue: string) { diff --git a/packages/core/src/components/menu-settings/menu-settings.tsx b/packages/core/src/components/menu-settings/menu-settings.tsx index dd0a8a4ef74..526b17453b6 100644 --- a/packages/core/src/components/menu-settings/menu-settings.tsx +++ b/packages/core/src/components/menu-settings/menu-settings.tsx @@ -14,27 +14,33 @@ import { EventEmitter, forceUpdate, h, - Host, Prop, State, Watch, } from '@stencil/core'; +import { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc'; +import { + CustomCloseEvent, + initialize, + setTab, +} from '../utils/menu-tabs/menu-tabs-utils'; @Component({ tag: 'ix-menu-settings', styleUrl: 'menu-settings.scss', shadow: true, }) -export class MenuAbout { +export class MenuSettings { @Element() el!: HTMLIxMenuSettingsElement; /** - * active tab + * Active tab */ + // eslint-disable-next-line @stencil-community/strict-mutable @Prop({ mutable: true }) activeTabLabel: string; /** - * Label + * Label of first tab */ @Prop() label = 'Settings'; @@ -46,93 +52,24 @@ export class MenuAbout { /** * Popover closed */ - @Event() close: EventEmitter<{ - nativeEvent: MouseEvent; - name: string; - }>; - - @State() settingsItems: HTMLIxMenuSettingsItemElement[]; - - private setTab(label: string) { - this.activeTabLabel = label; - this.settingsItems.forEach((i) => { - i.style.display = 'none'; + @Event() close: EventEmitter; - if (i.label === this.activeTabLabel) { - i.style.display = 'block'; - } - }); - } + @State() items: HTMLIxMenuSettingsItemElement[]; - private getTabItems() { - return this.settingsItems.map(({ label }) => { - return ( - this.setTab(label)} - > - {label} - - ); - }); + @Watch('activeTabLabel') + updateTab(label: string) { + setTab(this, label); } componentWillLoad() { - this.settingsItems = Array.from( - this.el.querySelectorAll('ix-menu-settings-item') - ); - - if (this.settingsItems.length) { - this.setTab(this.activeTabLabel || this.settingsItems[0].label); - } - - this.settingsItems.forEach((item) => { - item.addEventListener('labelChange', (e: CustomEvent) => { - this.settingsItems = Array.from( - this.el.querySelectorAll('ix-menu-settings-item') - ); - - if (e.detail.oldLabel === this.activeTabLabel) { - this.activeTabLabel = e.detail.newLabel; - } - }); - }); + initialize(this); } componentDidLoad() { forceUpdate(this.el); } - @Watch('activeTabLabel') - watchActiveTabLabel(value: string) { - this.setTab(value); - } - render() { - return ( - -
-

{this.label}

- - this.close.emit({ - name: 'ix-menu-settings', - nativeEvent: e, - }) - } - > -
- {this.getTabItems()} - - - ); + return ; } } diff --git a/packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx b/packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx new file mode 100644 index 00000000000..ab7d57eccc4 --- /dev/null +++ b/packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx @@ -0,0 +1,65 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { FunctionalComponent, h, Host } from '@stencil/core'; +import { MenuAbout } from 'src/components/menu-about/menu-about'; +import { MenuSettings } from 'src/components/menu-settings/menu-settings'; +import { setTab } from './menu-tabs-utils'; + +interface MenuTabsProps { + context: MenuSettings | MenuAbout; +} + +const getTabItems = (context: MenuSettings | MenuAbout) => { + return context.items.map(({ label }) => { + return ( + setTab(context, label)} + > + {label} + + ); + }); +}; + +export const MenuTabs: FunctionalComponent = ({ context }) => ( + +
+

{context.label}

+ + context.close.emit({ + name: + context instanceof MenuSettings + ? 'ix-menu-settings' + : 'ix-menu-about', + nativeEvent: e, + }) + } + > +
+ {getTabItems(context)} + + +); diff --git a/packages/core/src/components/utils/menu-tabs/menu-tabs-utils.ts b/packages/core/src/components/utils/menu-tabs/menu-tabs-utils.ts new file mode 100644 index 00000000000..4f2ab4e42e5 --- /dev/null +++ b/packages/core/src/components/utils/menu-tabs/menu-tabs-utils.ts @@ -0,0 +1,62 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { MenuAbout } from 'src/components/menu-about/menu-about'; +import { MenuSettings } from 'src/components/menu-settings/menu-settings'; + +function getItems( + context: MenuSettings | MenuAbout +): HTMLIxMenuSettingsItemElement[] | HTMLIxMenuAboutItemElement[] { + return Array.from( + context.el.querySelectorAll( + context instanceof MenuSettings + ? 'ix-menu-settings-item' + : 'ix-menu-about-item' + ) + ); +} + +export function setTab(context: MenuSettings | MenuAbout, label: string) { + context.activeTabLabel = label; + context.items.forEach((i) => { + i.style.display = 'none'; + if (i.label === context.activeTabLabel) { + i.style.display = 'block'; + } + }); +} + +export function initialize(context: MenuSettings | MenuAbout) { + context.items = getItems(context); + + if (context.items.length) { + setTab(context, context.activeTabLabel || context.items[0].label); + } + + context.items.forEach((item) => { + item.addEventListener('labelChange', (e: CustomEvent) => { + context.items = getItems(context); + + if (e.detail.oldLabel === context.activeTabLabel) { + context.activeTabLabel = e.detail.newLabel; + } + }); + }); +} + +export interface CustomLabelChangeEvent { + name: string; + oldLabel: string; + newLabel: string; +} + +export interface CustomCloseEvent { + nativeEvent: MouseEvent; + name: string; +} diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index 70f15c125aa..a886616cf45 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -604,7 +604,8 @@ export const IxMenuAbout = /*@__PURE__*/ defineContainer('ix-me export const IxMenuAboutItem = /*@__PURE__*/ defineContainer('ix-menu-about-item', defineIxMenuAboutItem, [ - 'label' + 'label', + 'labelChange' ]);