diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts index bc4ad0c969..1bda4e17bc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts @@ -1,66 +1,29 @@ -import { html, customElement, css, property, when } from '@umbraco-cms/backoffice/external/lit'; +import { customElement, css, property, type PropertyValues } from '@umbraco-cms/backoffice/external/lit'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UUIRefElement, UUIRefEvent, UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui'; +import { UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-ref-item') -export class UmbRefItemElement extends UmbElementMixin(UUIRefElement) { - @property({ type: String }) - name = ''; - - @property({ type: String }) - detail = ''; - +export class UmbRefItemElement extends UmbElementMixin(UUIRefNodeElement) { @property({ type: String }) icon = ''; - constructor() { - super(); + #iconElement = document.createElement('umb-icon'); - this.selectable = true; + protected override firstUpdated(_changedProperties: PropertyValues): void { + super.firstUpdated(_changedProperties); - this.addEventListener(UUIRefEvent.OPEN, () => this.dispatchEvent(new Event('click'))); - } - - override render() { - return html` - -
- - `; + // Temporary fix for the icon appending, this could in the future be changed to override a renderIcon method, or other ways to make this happen without appending children. + this.#iconElement.setAttribute('slot', 'icon'); + this.#iconElement.setAttribute('name', this.icon); + this.appendChild(this.#iconElement); } static override styles = [ - ...UUIRefElement.styles, ...UUIRefNodeElement.styles, - UmbTextStyles, css` :host { - padding: calc(var(--uui-size-4) + 1px); - } - - #btn-item { - text-decoration: none; - color: inherit; - align-self: stretch; - line-height: normal; - - display: flex; - position: relative; - align-items: center; - cursor: pointer; + padding-top: var(--uui-size-3); + padding-bottom: var(--uui-size-3); } `, ]; 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 5150c3946d..fc5eed5435 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 @@ -18,8 +18,7 @@ import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; type ManifestType = ManifestEntityCreateOptionAction; -const elementName = 'umb-entity-create-option-action-list-modal'; -@customElement(elementName) +@customElement('umb-entity-create-option-action-list-modal') export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseElement< UmbEntityCreateOptionActionListModalData, UmbEntityCreateOptionActionListModalValue @@ -71,6 +70,8 @@ export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseEle if (!controller.api) throw new Error('No API found'); await controller.api.execute(); + + this._submitModal(); } #getTarget(href?: string) { @@ -83,17 +84,19 @@ export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseEle override render() { return html` - + ${this._apiControllers.length === 0 ? html`
No create options available.
` - : html` - ${repeat( - this._apiControllers, - (controller) => controller.manifest?.alias, - (controller, index) => this.#renderRefItem(controller, index), - )} - `} + : html` + + ${repeat( + this._apiControllers, + (controller) => controller.manifest?.alias, + (controller, index) => this.#renderRefItem(controller, index), + )} + + `} this.#onClick(event, controller, href)} + detail=${ifDefined(description)} + icon=${manifest.meta.icon} href=${ifDefined(href)} target=${this.#getTarget(href)} - ?selectable=${!href} - ?readonly=${!href}> - - + @open=${(event: Event) => this.#onClick(event, controller, href)}> + `; } } @@ -129,6 +131,6 @@ export { UmbEntityCreateOptionActionListModalElement as element }; declare global { interface HTMLElementTagNameMap { - [elementName]: UmbEntityCreateOptionActionListModalElement; + 'umb-entity-create-option-action-list-modal': UmbEntityCreateOptionActionListModalElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/item-picker/item-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/item-picker/item-picker-modal.element.ts index 0f5fa9b803..dc6d976642 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/item-picker/item-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/item-picker/item-picker-modal.element.ts @@ -75,7 +75,7 @@ export class UmbItemPickerModalElement extends UmbModalBaseElement this.#submit(item)}> + @open=${() => this.#submit(item)}> `, )} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts index f59d63e477..afd6fd610d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/default/default-picker-search-result-item.element.ts @@ -53,6 +53,7 @@ export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement { name=${item.name} id=${item.unique} icon=${item.icon ?? 'icon-document'} + select-only selectable @selected=${() => this.#pickerContext?.selection.select(item.unique)} @deselected=${() => this.#pickerContext?.selection.deselect(item.unique)} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/default/default-document-type-create-option-action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/default/default-document-type-create-option-action.ts new file mode 100644 index 0000000000..bca0e9cc8f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/default/default-document-type-create-option-action.ts @@ -0,0 +1,21 @@ +import { UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN } from '../../../paths.js'; +import type { UmbDocumentTypeEntityTypeUnion } from '../../../entity.js'; +import { UmbEntityCreateOptionActionBase } from '@umbraco-cms/backoffice/entity-create-option-action'; +import type { MetaEntityCreateOptionAction } from '@umbraco-cms/backoffice/entity-create-option-action'; + +export class UmbDefaultDocumentTypeCreateOptionAction extends UmbEntityCreateOptionActionBase { + override async getHref() { + const parentEntityType = this.args.entityType as UmbDocumentTypeEntityTypeUnion; + if (!parentEntityType) throw new Error('Entity type is required to create a document type'); + + const parentUnique = this.args.unique ?? null; + + return UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN.generateAbsolute({ + parentEntityType, + parentUnique, + presetAlias: null, + }); + } +} + +export { UmbDefaultDocumentTypeCreateOptionAction as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/element/element-type-create-option-action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/element/element-type-create-option-action.ts new file mode 100644 index 0000000000..eb5dbd8544 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/element/element-type-create-option-action.ts @@ -0,0 +1,24 @@ +import { + UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN, + UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PRESET_ELEMENT, +} from '../../../paths.js'; +import type { UmbDocumentTypeEntityTypeUnion } from '../../../entity.js'; +import { UmbEntityCreateOptionActionBase } from '@umbraco-cms/backoffice/entity-create-option-action'; +import type { MetaEntityCreateOptionAction } from '@umbraco-cms/backoffice/entity-create-option-action'; + +export class UmbElementTypeCreateOptionAction extends UmbEntityCreateOptionActionBase { + override async getHref() { + const parentEntityType = this.args.entityType as UmbDocumentTypeEntityTypeUnion; + if (!parentEntityType) throw new Error('Entity type is required to create a document type'); + + const parentUnique = this.args.unique ?? null; + + return UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN.generateAbsolute({ + parentEntityType, + parentUnique, + presetAlias: UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PRESET_ELEMENT, + }); + } +} + +export { UmbElementTypeCreateOptionAction as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/folder/document-type-folder-create-option-action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/folder/document-type-folder-create-option-action.ts new file mode 100644 index 0000000000..d184f789d0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/folder/document-type-folder-create-option-action.ts @@ -0,0 +1,12 @@ +import { UMB_DOCUMENT_TYPE_FOLDER_REPOSITORY_ALIAS } from '../../../tree/folder/repository/constants.js'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbCreateFolderEntityAction, type MetaEntityActionFolderKind } from '@umbraco-cms/backoffice/tree'; +import type { UmbEntityActionArgs } from '@umbraco-cms/backoffice/entity-action'; + +export class UmbDocumentTypeFolderCreateOptionAction extends UmbCreateFolderEntityAction { + constructor(host: UmbControllerHost, args: UmbEntityActionArgs) { + super(host, { ...args, meta: { ...args.meta, folderRepositoryAlias: UMB_DOCUMENT_TYPE_FOLDER_REPOSITORY_ALIAS } }); + } +} + +export { UmbDocumentTypeFolderCreateOptionAction as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/manifests.ts index 59786bc3e6..b1cdc20482 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/manifests.ts @@ -1,25 +1,83 @@ -import { UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE } from '../../entity.js'; +import { UMB_DOCUMENT_TYPE_ENTITY_TYPE, UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE } from '../../entity.js'; import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../../tree/index.js'; export const manifests: Array = [ { type: 'entityAction', - kind: 'default', + kind: 'create', alias: 'Umb.EntityAction.DocumentType.Create', name: 'Create Document Type Entity Action', weight: 1200, - api: () => import('./create.action.js'), forEntityTypes: [UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE, UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE], meta: { icon: 'icon-add', label: '#actions_create', additionalOptions: true, + headline: '#create_createUnder #treeHeaders_documentTypes', }, }, { - type: 'modal', - alias: 'Umb.Modal.DocumentTypeCreateOptions', - name: 'Document Type Create Options Modal', - element: () => import('./modal/document-type-create-options-modal.element.js'), + type: 'entityCreateOptionAction', + alias: 'Umb.EntityCreateOptionAction.DocumentType.Default', + name: 'Default Document Type Entity Create Option Action', + weight: 100, + api: () => import('./default/default-document-type-create-option-action.js'), + forEntityTypes: [ + UMB_DOCUMENT_TYPE_ENTITY_TYPE, + UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE, + UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE, + ], + meta: { + icon: 'icon-document', + label: '#create_documentType', + description: '#create_documentTypeDescription', + }, + }, + { + type: 'entityCreateOptionAction', + alias: 'Umb.EntityCreateOptionAction.DocumentType.DocumentWithTemplate', + name: 'Document Type with Template Document Type Entity Create Option Action', + weight: 90, + api: () => import('./template/document-type-with-template-create-option-action.js'), + forEntityTypes: [ + UMB_DOCUMENT_TYPE_ENTITY_TYPE, + UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE, + UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE, + ], + meta: { + icon: 'icon-document-html', + label: '#create_documentTypeWithTemplate', + description: '#create_documentTypeWithTemplateDescription', + }, + }, + { + type: 'entityCreateOptionAction', + alias: 'Umb.EntityCreateOptionAction.DocumentType.ElementType', + name: 'Element Type Document Type Entity Create Option Action', + weight: 80, + api: () => import('./element/element-type-create-option-action.js'), + forEntityTypes: [ + UMB_DOCUMENT_TYPE_ENTITY_TYPE, + UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE, + UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE, + ], + meta: { + icon: 'icon-plugin', + label: '#create_elementType', + description: '#create_elementTypeDescription', + }, + }, + { + type: 'entityCreateOptionAction', + alias: 'Umb.EntityCreateOptionAction.DocumentType.Folder', + name: 'Folder Document Type Entity Create Option Action', + weight: 70, + api: () => import('./folder/document-type-folder-create-option-action.js'), + forEntityTypes: [UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE, UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE], + meta: { + icon: 'icon-folder', + label: '#create_folder', + description: '#create_folderDescription', + }, }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/constants.ts index 2a256bc68d..5d9e988ff0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/constants.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/constants.ts @@ -1,10 +1,12 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; +/** @deprecated No longer used internally. This will be removed in Umbraco 17. [LK] */ export interface UmbDocumentTypeCreateOptionsModalData { parent: UmbEntityModel; } +/** @deprecated No longer used internally. This will be removed in Umbraco 17. [LK] */ export const UMB_DOCUMENT_TYPE_CREATE_OPTIONS_MODAL = new UmbModalToken( 'Umb.Modal.DocumentTypeCreateOptions', { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/document-type-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/document-type-create-options-modal.element.ts index e678373629..b9406aa3c2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/document-type-create-options-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/document-type-create-options-modal.element.ts @@ -12,6 +12,7 @@ import { UmbCreateFolderEntityAction } from '@umbraco-cms/backoffice/tree'; // Include the types from the DocumentTypeWorkspacePresetType + folder. type OptionsPresetType = UmbCreateDocumentTypeWorkspacePresetType | 'folder' | null; +/** @deprecated No longer used internally. This will be removed in Umbraco 17. [LK] */ @customElement('umb-document-type-create-options-modal') export class UmbDataTypeCreateOptionsModalElement extends UmbModalBaseElement { #createFolderAction?: UmbCreateFolderEntityAction; @@ -110,7 +111,7 @@ export class UmbDataTypeCreateOptionsModalElement extends UmbModalBaseElement this.#onClick(item.preset)}> + @open=${() => this.#onClick(item.preset)}> `, )} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/template/document-type-with-template-create-option-action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/template/document-type-with-template-create-option-action.ts new file mode 100644 index 0000000000..4e5f7aace9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/template/document-type-with-template-create-option-action.ts @@ -0,0 +1,24 @@ +import { + UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN, + UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PRESET_TEMPLATE, +} from '../../../paths.js'; +import type { UmbDocumentTypeEntityTypeUnion } from '../../../entity.js'; +import { UmbEntityCreateOptionActionBase } from '@umbraco-cms/backoffice/entity-create-option-action'; +import type { MetaEntityCreateOptionAction } from '@umbraco-cms/backoffice/entity-create-option-action'; + +export class UmbDocumentTypeWithTemplateCreateOptionAction extends UmbEntityCreateOptionActionBase { + override async getHref() { + const parentEntityType = this.args.entityType as UmbDocumentTypeEntityTypeUnion; + if (!parentEntityType) throw new Error('Entity type is required to create a document type'); + + const parentUnique = this.args.unique ?? null; + + return UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN.generateAbsolute({ + parentEntityType, + parentUnique, + presetAlias: UMB_CREATE_DOCUMENT_TYPE_WORKSPACE_PRESET_TEMPLATE, + }); + } +} + +export { UmbDocumentTypeWithTemplateCreateOptionAction as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/modals/dynamic-root-origin-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/modals/dynamic-root-origin-picker-modal.element.ts index a922316bf3..eacb4c4557 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/modals/dynamic-root-origin-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/modals/dynamic-root-origin-picker-modal.element.ts @@ -76,7 +76,7 @@ export class UmbDynamicRootOriginPickerModalModalElement extends UmbModalBaseEle name=${ifDefined(item.meta.label)} detail=${ifDefined(item.meta.description)} icon=${ifDefined(item.meta.icon)} - @click=${() => this.#choose(item)}> + @open=${() => this.#choose(item)}> `, )} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/modals/dynamic-root-query-step-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/modals/dynamic-root-query-step-picker-modal.element.ts index a613d61828..99afeac359 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/modals/dynamic-root-query-step-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/modals/dynamic-root-query-step-picker-modal.element.ts @@ -63,7 +63,7 @@ export class UmbDynamicRootQueryStepPickerModalModalElement extends UmbModalBase name=${ifDefined(item.meta.label)} detail=${ifDefined(item.meta.description)} icon=${ifDefined(item.meta.icon)} - @click=${() => this.#choose(item)}> + @open=${() => this.#choose(item)}> `, )}