diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/global-components/entity-create-option-action-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/global-components/entity-create-option-action-list.element.ts deleted file mode 100644 index eeb948c5d3..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/global-components/entity-create-option-action-list.element.ts +++ /dev/null @@ -1,109 +0,0 @@ -import type { UmbEntityCreateOptionActionArgs } from '../types.js'; -import type { - ManifestEntityCreateOptionAction, - MetaEntityCreateOptionAction, -} from '../entity-create-option-action.extension.js'; -import { UmbEntityContext } from '@umbraco-cms/backoffice/entity'; -import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbApiConstructorArgumentsMethodType } from '@umbraco-cms/backoffice/extension-api'; - -const elementName = 'umb-entity-create-option-action-list'; -@customElement(elementName) -export class UmbEntityCreateOptionActionListElement extends UmbLitElement { - @property({ type: String, attribute: 'entity-type' }) - public get entityType(): string | undefined { - return this._props.entityType; - } - public set entityType(value: string | undefined) { - if (value === undefined || value === this._props.entityType) return; - this._props.entityType = value; - this.#generateApiArgs(); - this.requestUpdate('_props'); - // Update filter: - //const oldValue = this._filter; - this._filter = (extension: ManifestEntityCreateOptionAction) => - extension.forEntityTypes.includes(value); - //this.requestUpdate('_filter', oldValue); - } - - @state() - _filter?: (extension: ManifestEntityCreateOptionAction) => boolean; - - @property({ type: String }) - public get unique(): string | null | undefined { - return this._props.unique; - } - public set unique(value: string | null | undefined) { - if (value === this._props.unique) return; - this._props.unique = value; - this.#generateApiArgs(); - this.requestUpdate('_props'); - } - - @state() - _props: Partial> = {}; - - @state() - _apiArgs?: UmbApiConstructorArgumentsMethodType< - ManifestEntityCreateOptionAction, - [UmbEntityCreateOptionActionArgs] - >; - - #entityContext = new UmbEntityContext(this); - #extensionType = 'entityCreateOptionAction'; - - #generateApiArgs() { - if (!this._props.entityType || this._props.unique === undefined) return; - - this.#entityContext.setEntityType(this._props.entityType); - this.#entityContext.setUnique(this._props.unique); - this.#hasRenderedOnce = false; - - this._apiArgs = (manifest: ManifestEntityCreateOptionAction) => { - return [{ entityType: this._props.entityType!, unique: this._props.unique!, meta: manifest.meta }]; - }; - } - - #hasRenderedOnce?: boolean; - override render() { - return this._filter - ? html` - { - if (!this.#hasRenderedOnce && i === 0) { - // TODO: Replace this block: - ext.component?.updateComplete.then(async () => { - const menuitem = ext.component?.shadowRoot?.querySelector('uui-menu-item'); - menuitem?.updateComplete.then(async () => { - menuitem?.shadowRoot?.querySelector('#label-button')?.focus?.(); - }); - }); - // end of block, with this, when this PR is part of UI Lib: https://github.com/umbraco/Umbraco.UI/pull/789 - // ext.component?.focus(); - this.#hasRenderedOnce = true; - } - return ext.component; - }}> - ` - : ''; - } - - static override styles = [ - css` - :host { - --uui-menu-item-flat-structure: 1; - } - `, - ]; -} - -declare global { - interface HTMLElementTagNameMap { - [elementName]: UmbEntityCreateOptionActionListElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/global-components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/global-components/index.ts deleted file mode 100644 index 40da9cdab0..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/global-components/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import './entity-create-option-action-list.element.js'; - -export * from './entity-create-option-action-list.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/index.ts index f14590182c..1794649010 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/index.ts @@ -1,6 +1,3 @@ -import './global-components/index.js'; - -export * from './global-components/index.js'; export * from './entity-create-option-action-base.js'; export * from './entity-create-option-action.extension.js'; export * from './entity-create-option-action.interface.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts index e9ada04e69..f3ac6ad2a8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts @@ -2,7 +2,9 @@ import type { UmbEntityCreateOptionActionListModalData, UmbEntityCreateOptionActionListModalValue, } from './entity-create-option-action-list-modal.token.js'; -import { html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; const elementName = 'umb-entity-create-option-action-list-modal'; @@ -11,13 +13,40 @@ export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseEle UmbEntityCreateOptionActionListModalData, UmbEntityCreateOptionActionListModalValue > { + @state() + private _apiControllers: Array = []; + + constructor() { + super(); + + new UmbExtensionsApiInitializer( + this, + umbExtensionsRegistry, + 'entityCreateOptionAction', + [], + undefined, + (controllers) => { + this._apiControllers = controllers; + }, + ); + } + + async #onClick(event: Event, controller: any) { + event.stopPropagation(); + await controller.api.execute(); + } + override render() { return html` - + + ${repeat( + this._apiControllers, + (controller) => controller.manifest.alias, + (controller) => this.#renderRefItem(controller), + )} + `; } + + #renderRefItem(controller: any) { + const manifest = controller.manifest; + const label = manifest.meta.label ? this.localize.string(manifest.meta.label) : manifest.meta.name; + + return html` + this.#onClick(event, controller)}> + `; + } } export { UmbEntityCreateOptionActionListModalElement as element }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/collection-create-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/collection-create-action.element.ts index 41c36a27d1..90805b018e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/collection-create-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/collection-create-action.element.ts @@ -12,7 +12,9 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement { @state() private _multipleOptions = false; - #apiControllers: Array = []; + @state() + private _apiControllers: Array = []; + #createLabel = this.localize.term('general_create'); #onPopoverToggle(event: PointerEvent) { @@ -37,7 +39,7 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement { [], undefined, (controllers) => { - this.#apiControllers = controllers; + this._apiControllers = controllers; this._multipleOptions = controllers.length > 1; }, ); @@ -52,7 +54,7 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement { label=${this.#createLabel} color="default" look="outline" - @click=${(event: Event) => this.#onClick(event, this.#apiControllers[0])}>`; + @click=${(event: Event) => this.#onClick(event, this._apiControllers[0])}>`; } #renderMultiOptionAction() { @@ -77,7 +79,7 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement { @toggle=${this.#onPopoverToggle}> - ${this.#apiControllers.map((controller) => this.#renderMenuItem(controller))} + ${this._apiControllers.map((controller) => this.#renderMenuItem(controller))}