From fbe740b2f24d72740655f0e552a1dacbd669d956 Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Thu, 13 Nov 2025 15:32:58 +0100 Subject: [PATCH 01/13] fix angular/angular-standalone --- packages/angular/common/src/index.ts | 1 + .../common/src/providers/message/index.ts | 10 ++ .../src/providers/message/message.service.ts | 106 +++++++++++++ .../common/src/providers/modal/index.ts | 6 +- .../src/providers/modal/modal.service.ts | 16 +- packages/angular/src/index.ts | 1 + packages/angular/src/module.ts | 2 + .../angular/src/providers/message/index.ts | 1 + .../src/providers/message/message.service.ts | 125 +++++++++++++++ .../src/providers/modal/modal.service.ts | 5 + packages/angular/standalone/src/index.ts | 1 + .../standalone/src/providers/message.ts | 143 ++++++++++++++++++ .../angular/standalone/src/providers/modal.ts | 10 +- .../angular/standalone/src/providers/toast.ts | 2 +- 14 files changed, 425 insertions(+), 4 deletions(-) create mode 100644 packages/angular/common/src/providers/message/index.ts create mode 100644 packages/angular/common/src/providers/message/message.service.ts create mode 100644 packages/angular/src/providers/message/index.ts create mode 100644 packages/angular/src/providers/message/message.service.ts create mode 100644 packages/angular/standalone/src/providers/message.ts diff --git a/packages/angular/common/src/index.ts b/packages/angular/common/src/index.ts index 6c41cf7d9d4..58e08fab937 100644 --- a/packages/angular/common/src/index.ts +++ b/packages/angular/common/src/index.ts @@ -9,6 +9,7 @@ export * from './providers/modal'; export * from './providers/toast'; +export * from './providers/message'; export * from './directives/control-value-accessors'; export { DropdownTriggerBaseDirective } from './directives/dropdown-trigger'; export { TreeBaseDirective } from './directives/tree'; diff --git a/packages/angular/common/src/providers/message/index.ts b/packages/angular/common/src/providers/message/index.ts new file mode 100644 index 00000000000..59ca0550211 --- /dev/null +++ b/packages/angular/common/src/providers/message/index.ts @@ -0,0 +1,10 @@ +/* + * SPDX-FileCopyrightText: 2025 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. + */ + +export { MessageService } from './message.service'; diff --git a/packages/angular/common/src/providers/message/message.service.ts b/packages/angular/common/src/providers/message/message.service.ts new file mode 100644 index 00000000000..0841f76064d --- /dev/null +++ b/packages/angular/common/src/providers/message/message.service.ts @@ -0,0 +1,106 @@ +import { Injectable } from '@angular/core'; +import { MessageConfig, showMessage, TypedEvent } from '@siemens/ix'; + +@Injectable({ + providedIn: 'root', +}) +export class MessageService { + public showMessage(config: MessageConfig): Promise< + TypedEvent<{ + actionId: string; + payload: T; + }> + > { + return showMessage(config); + } + + public info( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + return showMessage.info( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + public warning( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + return showMessage.warning( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + public error( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + return showMessage.error( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + public success( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + return showMessage.success( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + question( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + return showMessage.question( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } +} diff --git a/packages/angular/common/src/providers/modal/index.ts b/packages/angular/common/src/providers/modal/index.ts index 7f9f3bf7c3b..17002fa36c8 100644 --- a/packages/angular/common/src/providers/modal/index.ts +++ b/packages/angular/common/src/providers/modal/index.ts @@ -8,5 +8,9 @@ */ export { IxActiveModal } from './modal-ref'; -export { ModalContext, ModalService } from './modal.service'; +export { + ModalContext, + ModalService, + ModalLoadingContext, +} from './modal.service'; export { ModalConfig } from './modal.config'; diff --git a/packages/angular/common/src/providers/modal/modal.service.ts b/packages/angular/common/src/providers/modal/modal.service.ts index fb315a93242..e1283e12003 100644 --- a/packages/angular/common/src/providers/modal/modal.service.ts +++ b/packages/angular/common/src/providers/modal/modal.service.ts @@ -16,7 +16,12 @@ import { Type, ViewRef, } from '@angular/core'; -import { closeModal, dismissModal, showModal } from '@siemens/ix'; +import { + closeModal, + dismissModal, + showModal, + showModalLoading, +} from '@siemens/ix'; import { InternalIxActiveModal, IxActiveModal } from './modal-ref'; import { ModalConfig } from './modal.config'; @@ -26,6 +31,11 @@ export type ModalContext = { data?: T; }; +export type ModalLoadingContext = { + update: (text: string) => string; + finish: (text?: string, timeout?: number) => void; +}; + @Injectable({ providedIn: 'root', }) @@ -71,6 +81,10 @@ export class ModalService { return modalInstance; } + public showModalLoading(message: string): ModalLoadingContext { + return showModalLoading(message); + } + private async createContentByComponentType( componentType: Type, config: ModalConfig, diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts index 64c6448d902..dd483b6b0fb 100644 --- a/packages/angular/src/index.ts +++ b/packages/angular/src/index.ts @@ -18,6 +18,7 @@ export { ModalContext, } from './providers/modal'; export { ToastConfig, ToastService } from './providers/toast'; +export { MessageService } from './providers/message'; export * from './directives/control-value-accessors'; export { IxDropdownTriggerDirective } from './directives/dropdown-trigger'; export * from './module'; diff --git a/packages/angular/src/module.ts b/packages/angular/src/module.ts index 40dae232f14..dd9d75b26ee 100644 --- a/packages/angular/src/module.ts +++ b/packages/angular/src/module.ts @@ -20,6 +20,7 @@ import { DIRECTIVES } from './declare-components'; import { IxIcon } from './ix-icon'; import { ModalService } from './providers/modal'; import { ToastService } from './providers/toast'; +import { MessageService } from './providers/message'; import * as tree from './tree'; import { IxDropdownTriggerDirective } from './directives/dropdown-trigger'; import { IxSelectValueAccessorDirective } from './directives/control-value-accessors/select-value-accessor'; @@ -56,6 +57,7 @@ export class IxModule { }, ModalService, ToastService, + MessageService, ], }; } diff --git a/packages/angular/src/providers/message/index.ts b/packages/angular/src/providers/message/index.ts new file mode 100644 index 00000000000..4fb70049b38 --- /dev/null +++ b/packages/angular/src/providers/message/index.ts @@ -0,0 +1 @@ +export { MessageService } from './message.service'; diff --git a/packages/angular/src/providers/message/message.service.ts b/packages/angular/src/providers/message/message.service.ts new file mode 100644 index 00000000000..430cdf67fd2 --- /dev/null +++ b/packages/angular/src/providers/message/message.service.ts @@ -0,0 +1,125 @@ +import { Injectable } from '@angular/core'; +import { MessageConfig, TypedEvent } from '@siemens/ix'; +import { MessageService as BaseMessageService } from '@siemens/ix-angular/common'; + +@Injectable({ + providedIn: 'root', +}) +export class MessageService extends BaseMessageService { + /** + * Show a message based on MessageConfig + */ + public override showMessage(config: MessageConfig): Promise< + TypedEvent<{ + actionId: string; + payload: T; + }> + > { + return super.showMessage(config); + } + + /** + * Show an info message + */ + public override info( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + return super.info( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + /** + * Show a warning message + */ + public override warning( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + return super.warning( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + /** + * Show an error message + */ + public override error( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + return super.error( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + /** + * Show a success message + */ + public override success( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + return super.success( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + /** + * Show a question message + */ + public override question( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + return super.question( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } +} diff --git a/packages/angular/src/providers/modal/modal.service.ts b/packages/angular/src/providers/modal/modal.service.ts index 1d7430a5190..f694518a148 100644 --- a/packages/angular/src/providers/modal/modal.service.ts +++ b/packages/angular/src/providers/modal/modal.service.ts @@ -16,6 +16,7 @@ import { ModalInstance } from '@siemens/ix'; import { ModalConfig, ModalService as BaseModalService, + ModalLoadingContext, } from '@siemens/ix-angular/common'; export type ModalContext = { @@ -48,4 +49,8 @@ export class ModalService extends BaseModalService { ): void { super.close(instance, reason); } + + public override showModalLoading(message: string): ModalLoadingContext { + return super.showModalLoading(message); + } } diff --git a/packages/angular/standalone/src/index.ts b/packages/angular/standalone/src/index.ts index d969e9e6e02..b293805e172 100644 --- a/packages/angular/standalone/src/index.ts +++ b/packages/angular/standalone/src/index.ts @@ -13,6 +13,7 @@ export { IxIcon } from './ix-icon'; export { IxTree } from './tree'; export * from './providers/modal'; export * from './providers/toast'; +export * from './providers/message'; export * from './directives/control-value-accessors'; export { IxDropdownTriggerDirective } from './directives/dropdown-trigger'; export { IxValueAccessorDirectives } from './utils/value-accessor-directives'; diff --git a/packages/angular/standalone/src/providers/message.ts b/packages/angular/standalone/src/providers/message.ts new file mode 100644 index 00000000000..f484db87529 --- /dev/null +++ b/packages/angular/standalone/src/providers/message.ts @@ -0,0 +1,143 @@ +import { Injectable } from '@angular/core'; +import { MessageConfig, TypedEvent } from '@siemens/ix'; +import { MessageService as BaseMessageService } from '@siemens/ix-angular/common'; + +import { defineCustomElement } from '@siemens/ix/components/ix-modal.js'; +import { defineCustomElement as defineCustomElementModalFooter } from '@siemens/ix/components/ix-modal-footer.js'; + +@Injectable({ providedIn: 'root' }) +export class MessageService extends BaseMessageService { + private defineModalCustomElements() { + defineCustomElement(); + defineCustomElementModalFooter(); + } + + /** + * Show a message based on MessageConfig + */ + public override showMessage(config: MessageConfig): Promise< + TypedEvent<{ + actionId: string; + payload: T; + }> + > { + this.defineModalCustomElements(); + + return super.showMessage(config); + } + + /** + * Show an info message + */ + public override info( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + this.defineModalCustomElements(); + + return super.info( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + /** + * Show a warning message + */ + public override warning( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + this.defineModalCustomElements(); + + return super.warning( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + /** + * Show an error message + */ + public override error( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + this.defineModalCustomElements(); + + return super.error( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + /** + * Show a success message + */ + public override success( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + this.defineModalCustomElements(); + + return super.success( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } + + /** + * Show a question message + */ + public override question( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any + ) { + this.defineModalCustomElements(); + + return super.question( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + } +} diff --git a/packages/angular/standalone/src/providers/modal.ts b/packages/angular/standalone/src/providers/modal.ts index 93f8ad7f312..5a0af0cc4ac 100644 --- a/packages/angular/standalone/src/providers/modal.ts +++ b/packages/angular/standalone/src/providers/modal.ts @@ -9,6 +9,7 @@ import { ModalService as BaseModalService, ModalConfig, + ModalLoadingContext, } from '@siemens/ix-angular/common'; import { ModalInstance } from '@siemens/ix'; import { @@ -21,7 +22,7 @@ import { import { defineCustomElement } from '@siemens/ix/components/ix-modal.js'; export { IxActiveModal } from '@siemens/ix-angular/common'; -@Injectable() +@Injectable({ providedIn: 'root' }) export class ModalService extends BaseModalService { constructor( appRef: ApplicationRef, @@ -35,6 +36,7 @@ export class ModalService extends BaseModalService { config: ModalConfig ): Promise> { defineCustomElement(); + return super.open(config); } @@ -44,4 +46,10 @@ export class ModalService extends BaseModalService { ): void { super.close(instance, reason); } + + public override showModalLoading(message: string): ModalLoadingContext { + defineCustomElement(); + + return super.showModalLoading(message); + } } diff --git a/packages/angular/standalone/src/providers/toast.ts b/packages/angular/standalone/src/providers/toast.ts index 954d8865e36..3686e85b3d1 100644 --- a/packages/angular/standalone/src/providers/toast.ts +++ b/packages/angular/standalone/src/providers/toast.ts @@ -16,7 +16,7 @@ import { ShowToastResult } from '@siemens/ix'; import { defineCustomElement } from '@siemens/ix/components/ix-toast.js'; import { defineCustomElement as defineCustomElementToastContainer } from '@siemens/ix/components/ix-toast-container.js'; -@Injectable() +@Injectable({ providedIn: 'root' }) export class ToastService extends BaseToastService { constructor() { super(); From f273eb3d6af1c530da5c32ead250525e140d2710 Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Thu, 13 Nov 2025 16:49:37 +0100 Subject: [PATCH 02/13] add react/vue functions --- packages/react/src/index.ts | 1 + packages/react/src/message/index.ts | 1 + packages/react/src/message/message.ts | 123 ++++++++++++++++++++++++++ packages/react/src/modal/index.ts | 15 ++++ packages/vue/src/message/index.ts | 1 + packages/vue/src/message/message.ts | 123 ++++++++++++++++++++++++++ packages/vue/src/modal/index.ts | 15 ++++ 7 files changed, 279 insertions(+) create mode 100644 packages/react/src/message/index.ts create mode 100644 packages/react/src/message/message.ts create mode 100644 packages/vue/src/message/index.ts create mode 100644 packages/vue/src/message/message.ts diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 9341659507c..8c46e36afc1 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -13,3 +13,4 @@ export * from './ix-icon'; export * from './modal'; export * from './toast'; export * from './tree'; +export * from './message'; diff --git a/packages/react/src/message/index.ts b/packages/react/src/message/index.ts new file mode 100644 index 00000000000..f54558745b9 --- /dev/null +++ b/packages/react/src/message/index.ts @@ -0,0 +1 @@ +export * from './message'; diff --git a/packages/react/src/message/message.ts b/packages/react/src/message/message.ts new file mode 100644 index 00000000000..f0540e9b74b --- /dev/null +++ b/packages/react/src/message/message.ts @@ -0,0 +1,123 @@ +import { + MessageConfig, + TypedEvent, + showMessage as _showMessage, +} from '@siemens/ix'; +import { defineCustomElement } from '@siemens/ix/components/ix-modal.js'; +import { defineCustomElement as defineCustomElementModalFooter } from '@siemens/ix/components/ix-modal-footer.js'; + +function defineCustomElements() { + defineCustomElement(); + defineCustomElementModalFooter(); +} + +export function showMessage(config: MessageConfig): Promise< + TypedEvent<{ + actionId: string; + payload: T; + }> +> { + defineCustomElements(); + + return _showMessage(config); +} + +showMessage.info = ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any +) => { + defineCustomElements(); + + return _showMessage.info( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); +}; + +showMessage.warning = ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any +) => { + defineCustomElements(); + + return _showMessage.warning( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); +}; + +showMessage.error = ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any +) => { + defineCustomElements(); + + return _showMessage.error( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); +}; + +showMessage.success = ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any +) => { + defineCustomElements(); + + return _showMessage.success( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); +}; + +showMessage.question = ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any +) => { + defineCustomElements(); + + return _showMessage.question( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); +}; diff --git a/packages/react/src/modal/index.ts b/packages/react/src/modal/index.ts index a77fdc833f6..6a3c8042e80 100644 --- a/packages/react/src/modal/index.ts +++ b/packages/react/src/modal/index.ts @@ -10,22 +10,37 @@ import { ModalConfig as IxModalConfig, showModal as _showModal, + showModalLoading as _showModalLoading, dismissModal as _dismissModal, closeModal as _closeModal, ModalInstance as IxModalInstance, } from '@siemens/ix'; +import { defineCustomElement } from '@siemens/ix/components/ix-modal.js'; export * from './modal'; export type ModalConfig = { content: React.ReactNode | string; }; +export type ModalLoadingContext = { + update: (text: string) => string; + finish: (text?: string, timeout?: number) => void; +}; + export async function showModal( config: Omit & ModalConfig ) { + defineCustomElement(); + return _showModal(config); } +export function showModalLoading(message: string): ModalLoadingContext { + defineCustomElement(); + + return _showModalLoading(message); +} + export function dismissModal(modalInstance: IxModalInstance) { if (modalInstance?.htmlElement) { _dismissModal(modalInstance.htmlElement); diff --git a/packages/vue/src/message/index.ts b/packages/vue/src/message/index.ts new file mode 100644 index 00000000000..f54558745b9 --- /dev/null +++ b/packages/vue/src/message/index.ts @@ -0,0 +1 @@ +export * from './message'; diff --git a/packages/vue/src/message/message.ts b/packages/vue/src/message/message.ts new file mode 100644 index 00000000000..f0540e9b74b --- /dev/null +++ b/packages/vue/src/message/message.ts @@ -0,0 +1,123 @@ +import { + MessageConfig, + TypedEvent, + showMessage as _showMessage, +} from '@siemens/ix'; +import { defineCustomElement } from '@siemens/ix/components/ix-modal.js'; +import { defineCustomElement as defineCustomElementModalFooter } from '@siemens/ix/components/ix-modal-footer.js'; + +function defineCustomElements() { + defineCustomElement(); + defineCustomElementModalFooter(); +} + +export function showMessage(config: MessageConfig): Promise< + TypedEvent<{ + actionId: string; + payload: T; + }> +> { + defineCustomElements(); + + return _showMessage(config); +} + +showMessage.info = ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any +) => { + defineCustomElements(); + + return _showMessage.info( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); +}; + +showMessage.warning = ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any +) => { + defineCustomElements(); + + return _showMessage.warning( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); +}; + +showMessage.error = ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any +) => { + defineCustomElements(); + + return _showMessage.error( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); +}; + +showMessage.success = ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any +) => { + defineCustomElements(); + + return _showMessage.success( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); +}; + +showMessage.question = ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: any, + payloadCancel?: any +) => { + defineCustomElements(); + + return _showMessage.question( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); +}; diff --git a/packages/vue/src/modal/index.ts b/packages/vue/src/modal/index.ts index 18f5bf6511a..115e9ced6f1 100644 --- a/packages/vue/src/modal/index.ts +++ b/packages/vue/src/modal/index.ts @@ -1,11 +1,13 @@ import { ModalConfig as IxModalConfig, showModal as _showModal, + showModalLoading as _showModalLoading, dismissModal as _dismissModal, closeModal as _closeModal, ModalInstance as IxModalInstance, } from '@siemens/ix'; import { VNode } from 'vue'; +import { defineCustomElement } from '@siemens/ix/components/ix-modal.js'; export { default as Modal } from './Modal.vue'; export { default as IxOverlay } from './IxOverlay.vue'; @@ -16,12 +18,25 @@ export type ModalConfig = { content: VNode; }; +export type ModalLoadingContext = { + update: (text: string) => string; + finish: (text?: string, timeout?: number) => void; +}; + export async function showModal( config: Omit & ModalConfig ) { + defineCustomElement(); + return _showModal(config); } +export function showModalLoading(message: string): ModalLoadingContext { + defineCustomElement(); + + return _showModalLoading(message); +} + export function dismissModal(modalInstance: IxModalInstance) { if (modalInstance?.htmlElement) { _dismissModal(modalInstance.htmlElement); From 0887159fd41ed41ead9841432746022703df710d Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Fri, 14 Nov 2025 09:43:12 +0100 Subject: [PATCH 03/13] refactor --- packages/react/src/message/message.ts | 129 ++++++-------------------- packages/react/src/modal/index.ts | 8 +- packages/vue/src/index.ts | 1 + packages/vue/src/message/message.ts | 129 ++++++-------------------- packages/vue/src/modal/index.ts | 7 +- 5 files changed, 60 insertions(+), 214 deletions(-) diff --git a/packages/react/src/message/message.ts b/packages/react/src/message/message.ts index f0540e9b74b..d7ad672ecd1 100644 --- a/packages/react/src/message/message.ts +++ b/packages/react/src/message/message.ts @@ -4,12 +4,9 @@ import { showMessage as _showMessage, } from '@siemens/ix'; import { defineCustomElement } from '@siemens/ix/components/ix-modal.js'; -import { defineCustomElement as defineCustomElementModalFooter } from '@siemens/ix/components/ix-modal-footer.js'; -function defineCustomElements() { - defineCustomElement(); - defineCustomElementModalFooter(); -} +// call defineCustomElement once at module level +defineCustomElement(); export function showMessage(config: MessageConfig): Promise< TypedEvent<{ @@ -17,107 +14,33 @@ export function showMessage(config: MessageConfig): Promise< payload: T; }> > { - defineCustomElements(); - return _showMessage(config); } -showMessage.info = ( - title: string, - message: string, - textOkay: string, - textCancel?: string, - payloadOkay?: any, - payloadCancel?: any -) => { - defineCustomElements(); - - return _showMessage.info( - title, - message, - textOkay, - textCancel, - payloadOkay, - payloadCancel - ); -}; - -showMessage.warning = ( - title: string, - message: string, - textOkay: string, - textCancel?: string, - payloadOkay?: any, - payloadCancel?: any -) => { - defineCustomElements(); - - return _showMessage.warning( - title, - message, - textOkay, - textCancel, - payloadOkay, - payloadCancel - ); -}; - -showMessage.error = ( - title: string, - message: string, - textOkay: string, - textCancel?: string, - payloadOkay?: any, - payloadCancel?: any +const createMessageVariant = ( + variant: 'info' | 'warning' | 'error' | 'success' | 'question' ) => { - defineCustomElements(); - - return _showMessage.error( - title, - message, - textOkay, - textCancel, - payloadOkay, - payloadCancel - ); + return ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: unknown, + payloadCancel?: unknown + ) => { + return _showMessage[variant]( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + }; }; -showMessage.success = ( - title: string, - message: string, - textOkay: string, - textCancel?: string, - payloadOkay?: any, - payloadCancel?: any -) => { - defineCustomElements(); - - return _showMessage.success( - title, - message, - textOkay, - textCancel, - payloadOkay, - payloadCancel - ); -}; - -showMessage.question = ( - title: string, - message: string, - textOkay: string, - textCancel?: string, - payloadOkay?: any, - payloadCancel?: any -) => { - defineCustomElements(); - - return _showMessage.question( - title, - message, - textOkay, - textCancel, - payloadOkay, - payloadCancel - ); -}; +showMessage.info = createMessageVariant('info'); +showMessage.warning = createMessageVariant('warning'); +showMessage.error = createMessageVariant('error'); +showMessage.success = createMessageVariant('success'); +showMessage.question = createMessageVariant('question'); diff --git a/packages/react/src/modal/index.ts b/packages/react/src/modal/index.ts index 6a3c8042e80..94014e99bec 100644 --- a/packages/react/src/modal/index.ts +++ b/packages/react/src/modal/index.ts @@ -16,6 +16,10 @@ import { ModalInstance as IxModalInstance, } from '@siemens/ix'; import { defineCustomElement } from '@siemens/ix/components/ix-modal.js'; + +// call defineCustomElement once at module level +defineCustomElement(); + export * from './modal'; export type ModalConfig = { @@ -30,14 +34,10 @@ export type ModalLoadingContext = { export async function showModal( config: Omit & ModalConfig ) { - defineCustomElement(); - return _showModal(config); } export function showModalLoading(message: string): ModalLoadingContext { - defineCustomElement(); - return _showModalLoading(message); } diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index b2154b0433f..7f472eb48a8 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -5,5 +5,6 @@ export * from './ix-icon'; export * from './modal'; export * from './plugin'; export * from './toast'; +export * from './message'; export type HTMLRefElement = { $el: T }; diff --git a/packages/vue/src/message/message.ts b/packages/vue/src/message/message.ts index f0540e9b74b..d7ad672ecd1 100644 --- a/packages/vue/src/message/message.ts +++ b/packages/vue/src/message/message.ts @@ -4,12 +4,9 @@ import { showMessage as _showMessage, } from '@siemens/ix'; import { defineCustomElement } from '@siemens/ix/components/ix-modal.js'; -import { defineCustomElement as defineCustomElementModalFooter } from '@siemens/ix/components/ix-modal-footer.js'; -function defineCustomElements() { - defineCustomElement(); - defineCustomElementModalFooter(); -} +// call defineCustomElement once at module level +defineCustomElement(); export function showMessage(config: MessageConfig): Promise< TypedEvent<{ @@ -17,107 +14,33 @@ export function showMessage(config: MessageConfig): Promise< payload: T; }> > { - defineCustomElements(); - return _showMessage(config); } -showMessage.info = ( - title: string, - message: string, - textOkay: string, - textCancel?: string, - payloadOkay?: any, - payloadCancel?: any -) => { - defineCustomElements(); - - return _showMessage.info( - title, - message, - textOkay, - textCancel, - payloadOkay, - payloadCancel - ); -}; - -showMessage.warning = ( - title: string, - message: string, - textOkay: string, - textCancel?: string, - payloadOkay?: any, - payloadCancel?: any -) => { - defineCustomElements(); - - return _showMessage.warning( - title, - message, - textOkay, - textCancel, - payloadOkay, - payloadCancel - ); -}; - -showMessage.error = ( - title: string, - message: string, - textOkay: string, - textCancel?: string, - payloadOkay?: any, - payloadCancel?: any +const createMessageVariant = ( + variant: 'info' | 'warning' | 'error' | 'success' | 'question' ) => { - defineCustomElements(); - - return _showMessage.error( - title, - message, - textOkay, - textCancel, - payloadOkay, - payloadCancel - ); + return ( + title: string, + message: string, + textOkay: string, + textCancel?: string, + payloadOkay?: unknown, + payloadCancel?: unknown + ) => { + return _showMessage[variant]( + title, + message, + textOkay, + textCancel, + payloadOkay, + payloadCancel + ); + }; }; -showMessage.success = ( - title: string, - message: string, - textOkay: string, - textCancel?: string, - payloadOkay?: any, - payloadCancel?: any -) => { - defineCustomElements(); - - return _showMessage.success( - title, - message, - textOkay, - textCancel, - payloadOkay, - payloadCancel - ); -}; - -showMessage.question = ( - title: string, - message: string, - textOkay: string, - textCancel?: string, - payloadOkay?: any, - payloadCancel?: any -) => { - defineCustomElements(); - - return _showMessage.question( - title, - message, - textOkay, - textCancel, - payloadOkay, - payloadCancel - ); -}; +showMessage.info = createMessageVariant('info'); +showMessage.warning = createMessageVariant('warning'); +showMessage.error = createMessageVariant('error'); +showMessage.success = createMessageVariant('success'); +showMessage.question = createMessageVariant('question'); diff --git a/packages/vue/src/modal/index.ts b/packages/vue/src/modal/index.ts index 115e9ced6f1..e4146352479 100644 --- a/packages/vue/src/modal/index.ts +++ b/packages/vue/src/modal/index.ts @@ -9,6 +9,9 @@ import { import { VNode } from 'vue'; import { defineCustomElement } from '@siemens/ix/components/ix-modal.js'; +// call defineCustomElement once at module level +defineCustomElement(); + export { default as Modal } from './Modal.vue'; export { default as IxOverlay } from './IxOverlay.vue'; export * from './constants'; @@ -26,14 +29,10 @@ export type ModalLoadingContext = { export async function showModal( config: Omit & ModalConfig ) { - defineCustomElement(); - return _showModal(config); } export function showModalLoading(message: string): ModalLoadingContext { - defineCustomElement(); - return _showModalLoading(message); } From c10fc084520a4cb8d2138743940b898d3f9c280d Mon Sep 17 00:00:00 2001 From: Lukas Zeiml Date: Fri, 14 Nov 2025 09:43:18 +0100 Subject: [PATCH 04/13] adjust examples --- packages/react-test-app/src/preview-examples/loading.tsx | 3 +-- packages/react-test-app/src/preview-examples/message.tsx | 3 +-- packages/vue-test-app/src/preview-examples/loading.vue | 3 +-- packages/vue-test-app/src/preview-examples/message.vue | 3 +-- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/react-test-app/src/preview-examples/loading.tsx b/packages/react-test-app/src/preview-examples/loading.tsx index f8c4880931c..e6978933258 100644 --- a/packages/react-test-app/src/preview-examples/loading.tsx +++ b/packages/react-test-app/src/preview-examples/loading.tsx @@ -7,8 +7,7 @@ * LICENSE file in the root directory of this source tree. */ -import { showModalLoading } from '@siemens/ix'; -import { IxButton } from '@siemens/ix-react'; +import { IxButton, showModalLoading } from '@siemens/ix-react'; export default () => { const startLoading = () => { diff --git a/packages/react-test-app/src/preview-examples/message.tsx b/packages/react-test-app/src/preview-examples/message.tsx index c97957d8e52..673c3f3e721 100644 --- a/packages/react-test-app/src/preview-examples/message.tsx +++ b/packages/react-test-app/src/preview-examples/message.tsx @@ -7,8 +7,7 @@ * LICENSE file in the root directory of this source tree. */ -import { showMessage } from '@siemens/ix'; -import { IxButton } from '@siemens/ix-react'; +import { IxButton, showMessage } from '@siemens/ix-react'; export default () => { const triggerMessage = async () => { diff --git a/packages/vue-test-app/src/preview-examples/loading.vue b/packages/vue-test-app/src/preview-examples/loading.vue index fb23de7e715..00041b66590 100644 --- a/packages/vue-test-app/src/preview-examples/loading.vue +++ b/packages/vue-test-app/src/preview-examples/loading.vue @@ -8,8 +8,7 @@ -->