diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-list-base/input-list-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-list-base/input-list-base.ts index fd02cb26ab..afe4762fad 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-list-base/input-list-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-list-base/input-list-base.ts @@ -38,8 +38,10 @@ export class UmbInputListBaseElement extends UmbLitElement { if (!this.pickerToken) return; const modalContext = this._modalContext?.open(this.pickerToken, { - multiple: this.multiple, - selection: this.value, + data: { + multiple: this.multiple, + selection: this.value, + }, }); modalContext?.onSubmit().then((data: UmbPickerModalValue) => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts index 33cfa23e5e..b0b7abe0c5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts @@ -179,38 +179,44 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) { private _insertLink() { const selection = this.#editor?.getSelections()[0]; - if (!selection) return; + if (!selection || !this._modalContext) return; const selectedValue = this.#editor?.getValueInRange(selection); this._focusEditor(); // Focus before opening modal - const modalContext = this._modalContext?.open(UMB_LINK_PICKER_MODAL, { - index: null, - link: { name: selectedValue }, - config: { overlaySize: this.overlaySize }, + const modalContext = this._modalContext.open(UMB_LINK_PICKER_MODAL, { + data: { + index: null, + config: { overlaySize: this.overlaySize }, + }, + value: { + link: { name: selectedValue }, + }, }); modalContext ?.onSubmit() - .then((data) => { + .then((value) => { + if (!value) return; + const name = this.localize.term('general_name'); const url = this.localize.term('general_url'); this.#editor?.monacoEditor?.executeEdits('', [ - { range: selection, text: `[${data.link.name || name}](${data.link.url || url})` }, + { range: selection, text: `[${value.link.name || name}](${value.link.url || url})` }, ]); - if (!data.link.name) { + if (!value.link.name) { this.#editor?.select({ startColumn: selection.startColumn + 1, endColumn: selection.startColumn + 1 + name.length, endLineNumber: selection.startLineNumber, startLineNumber: selection.startLineNumber, }); - } else if (!data.link.url) { + } else if (!value.link.url) { this.#editor?.select({ - startColumn: selection.startColumn + 3 + data.link.name.length, - endColumn: selection.startColumn + 3 + data.link.name.length + url.length, + startColumn: selection.startColumn + 3 + value.link.name.length, + endColumn: selection.startColumn + 3 + value.link.name.length + url.length, endLineNumber: selection.startLineNumber, startLineNumber: selection.startLineNumber, }); @@ -227,12 +233,13 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) { const alt = this.#editor?.getValueInRange(selection) || 'alt text'; this._focusEditor(); // Focus before opening modal, otherwise cannot regain focus back after modal - const modalContext = this._modalContext?.open(UMB_MEDIA_TREE_PICKER_MODAL, {}); + const modalContext = this._modalContext?.open(UMB_MEDIA_TREE_PICKER_MODAL); modalContext ?.onSubmit() - .then((data) => { - const imgUrl = data.selection[0]; + .then((value) => { + if (!value) return; + const imgUrl = value.selection[0]; this.#editor?.monacoEditor?.executeEdits('', [ //TODO: Get the correct media URL { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts index dd50ece4b2..f7f59023b2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts @@ -140,26 +140,30 @@ export class UmbInputMultiUrlElement extends FormControlMixin(UmbLitElement) { } return { - index: index, - link: { - name: data?.name, - published: data?.published, - queryString: data?.queryString, - target: data?.target, - trashed: data?.trashed, - udi: data?.udi, - url: data?.url, + data: { + index: index, + config: { + hideAnchor: this.hideAnchor, + ignoreUserStartNodes: this.ignoreUserStartNodes, + overlaySize: this.overlaySize || 'small', + }, }, - config: { - hideAnchor: this.hideAnchor, - ignoreUserStartNodes: this.ignoreUserStartNodes, - overlaySize: this.overlaySize || 'small', + value: { + link: { + name: data?.name, + published: data?.published, + queryString: data?.queryString, + target: data?.target, + trashed: data?.trashed, + udi: data?.udi, + url: data?.url, + }, }, }; }) - .onSubmit((submitData) => { - if (!submitData) return; - this._setSelection(submitData.link, submitData.index); + .onSubmit((value) => { + if (!value) return; + this._setSelection(value.link, this.myModalRegistration.modalContext?.data.index ?? null); }) .observeRouteBuilder((routeBuilder) => { this._modalRoute = routeBuilder; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts index 9fa8e1ed8f..ed1bf3f019 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts @@ -46,10 +46,12 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL #onDelete() { const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, { - headline: `Delete ${this.value || 'item'}`, - content: 'Are you sure you want to delete this item?', - color: 'danger', - confirmLabel: 'Delete', + data: { + headline: `Delete ${this.value || 'item'}`, + content: 'Are you sure you want to delete this item?', + color: 'danger', + confirmLabel: 'Delete', + }, }); modalContext?.onSubmit().then(() => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts index a158eeea71..1ea7eb5911 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/components/data-type-flow-input/data-type-flow-input.element.ts @@ -49,19 +49,21 @@ export class UmbInputDataTypeElement extends FormControlMixin(UmbLitElement) { super(); this.#editDataTypeModal = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL).onSetup(() => { - return { entityType: 'data-type', preset: {} }; + return { data: { entityType: 'data-type', preset: {} } }; }); new UmbModalRouteRegistrationController(this, UMB_DATA_TYPE_PICKER_FLOW_MODAL) .onSetup(() => { return { - selection: this._ids, - submitLabel: 'Submit', + data: { + submitLabel: 'Submit', + }, + value: { selection: this._ids ?? [] }, }; }) .onSubmit((submitData) => { - // TODO: we might should set the alias to null or empty string, if no selection. - this.value = submitData.selection.join(','); + // TODO: we maybe should set the alias to null, if no selection? + this.value = submitData?.selection.join(',') ?? ''; this.dispatchEvent(new CustomEvent('change', { composed: true, bubbles: true })); }) .observeRouteBuilder((routeBuilder) => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/copy/copy.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/copy/copy.action.ts index 5410ee0cb0..bc50ca6c71 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/copy/copy.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/copy/copy.action.ts @@ -24,7 +24,8 @@ export class UmbCopyDataTypeEntityAction extends UmbEntityActionBase this.modalContext?.submit()); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts index f48f1ca6b0..dcd11de30d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts @@ -6,15 +6,15 @@ import { UmbModalContext, UmbDataTypePickerFlowDataTypePickerModalData, UmbDataTypePickerFlowDataTypePickerModalValue, + UmbModalBaseElement, } from '@umbraco-cms/backoffice/modal'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { FolderTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @customElement('umb-data-type-picker-flow-data-type-picker-modal') -export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitElement { - @property({ type: Object }) - data?: UmbDataTypePickerFlowDataTypePickerModalData; - +export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBaseElement< + UmbDataTypePickerFlowDataTypePickerModalData, + UmbDataTypePickerFlowDataTypePickerModalValue +> { @state() private _dataTypes?: Array; @@ -61,12 +61,14 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme private _handleClick(dataType: FolderTreeItemResponseModel) { if (dataType.id) { - this.modalContext?.submit({ dataTypeId: dataType.id }); + this._value = { dataTypeId: dataType.id }; + this.modalContext?.submit(); } } private _handleCreate() { - this.modalContext?.submit({ createNewWithPropertyEditorUiAlias: this._propertyEditorUiAlias }); + this._value = { createNewWithPropertyEditorUiAlias: this._propertyEditorUiAlias }; + this.modalContext?.submit(); } private _close() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts index 838696dffc..85f8c4c9e1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts @@ -7,32 +7,25 @@ import { UMB_WORKSPACE_MODAL, UmbDataTypePickerFlowModalData, UmbDataTypePickerFlowModalValue, - UmbModalContext, + UmbModalBaseElement, UmbModalRouteBuilder, UmbModalRouteRegistrationController, } from '@umbraco-cms/backoffice/modal'; import { ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; interface GroupedItems { [key: string]: Array; } @customElement('umb-data-type-picker-flow-modal') -export class UmbDataTypePickerFlowModalElement extends UmbLitElement { - @property({ attribute: false }) - modalContext?: UmbModalContext; - - @property({ type: Object }) - public get data(): UmbDataTypePickerFlowModalData | undefined { - return this._data; - } - public set data(value: UmbDataTypePickerFlowModalData | undefined) { - this._data = value; - this._selection = this.data?.selection ?? []; +export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< + UmbDataTypePickerFlowModalData, + UmbDataTypePickerFlowModalValue +> { + public set data(value: UmbDataTypePickerFlowModalData) { + super.data = value; this._submitLabel = this.data?.submitLabel ?? this._submitLabel; } - private _data?: UmbDataTypePickerFlowModalData | undefined; @state() private _groupedDataTypes?: GroupedItems; @@ -64,14 +57,17 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement { .addAdditionalPath(':uiAlias') .onSetup((routingInfo) => { return { - propertyEditorUiAlias: routingInfo.uiAlias, + data: { + propertyEditorUiAlias: routingInfo.uiAlias, + }, + value: undefined, }; }) .onSubmit((submitData) => { - if (submitData.dataTypeId) { + if (submitData?.dataTypeId) { this._select(submitData.dataTypeId); - this._submit(); - } else if (submitData.createNewWithPropertyEditorUiAlias) { + this._submitModal(); + } else if (submitData?.createNewWithPropertyEditorUiAlias) { this._createDataType(submitData.createNewWithPropertyEditorUiAlias); } }) @@ -83,11 +79,11 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement { this._createDataTypeModal = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) .addAdditionalPath(':uiAlias') .onSetup((params) => { - return { entityType: 'data-type', preset: { propertyEditorUiAlias: params.uiAlias } }; + return { data: { entityType: 'data-type', preset: { propertyEditorUiAlias: params.uiAlias } } }; }) - .onSubmit((submitData) => { - this._select(submitData.id); - this._submit(); + .onSubmit((value) => { + this._select(value?.id); + this._submitModal(); }); this.#init(); @@ -120,15 +116,25 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement { }); } - private _handleDataTypeClick(dataType: EntityTreeItemResponseModel) { - if (dataType.id) { - this._select(dataType.id); - this._submit(); + connectedCallback(): void { + super.connectedCallback(); + + if (this.modalContext) { + this.observe(this.modalContext.value, (value) => { + this._selection = value?.selection ?? []; + }); } } - private _select(id: string) { - this._selection = [id]; + private _handleDataTypeClick(dataType: EntityTreeItemResponseModel) { + if (dataType.id) { + this._select(dataType.id); + this._submitModal(); + } + } + + private _select(id: string | undefined) { + this._selection = id ? [id] : []; } private _handleFilterInput(event: UUIInputEvent) { @@ -142,8 +148,8 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement { (dataType) => dataType.name?.toLowerCase().includes(this.#currentFilterQuery), ); - /* TODO: data type items doesn't have a group property. We will need a reference to the property editor UI to get the group. - this is a temp solution to group them as uncategorized. The same result as with the lodash groupBy. + /* TODO: data type items doesn't have a group property. We will need a reference to the Property Editor UI to get the group. + this is a temp solution to group them as uncategorized. The same result as with the lodash groupBy. */ this._groupedDataTypes = { undefined: filteredDataTypes, @@ -170,20 +176,12 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement { ); } - private _close() { - this.modalContext?.reject(); - } - - private _submit() { - this.modalContext?.submit({ selection: this._selection }); - } - render() { return html` ${this._renderFilter()} ${this._renderGrid()}
- +
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts index c0ea739cc2..9eef7e8806 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts @@ -31,7 +31,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< connectedCallback(): void { super.connectedCallback(); - this._selection = this.data?.selection ?? []; + this._selection = this._value?.selection ?? []; this._submitLabel = this.data?.submitLabel ?? this._submitLabel; this._usePropertyEditorUIs(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts index f3f5cdcb04..e60179182b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts @@ -1,7 +1,7 @@ import { Meta, Story } from '@storybook/web-components'; import type { UmbPropertyEditorUIPickerModalElement } from './property-editor-ui-picker-modal.element.js'; import { html } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbPropertyEditorUIPickerModalData } from '@umbraco-cms/backoffice/modal'; +import type { UmbPropertyEditorUIPickerModalValue } from '@umbraco-cms/backoffice/modal'; import './property-editor-ui-picker-modal.element.js'; import '../../../components/body-layout/body-layout.element.js'; @@ -12,8 +12,8 @@ export default { id: 'umb-property-editor-ui-picker-modal', } as Meta; -const data: UmbPropertyEditorUIPickerModalData = { selection: [] }; +const data: UmbPropertyEditorUIPickerModalValue = { selection: [] }; export const Overview: Story = () => html` - + `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts index 91ea662012..c80154e980 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/views/details/data-type-details-workspace-view.element.ts @@ -71,11 +71,13 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im private _openPropertyEditorUIPicker() { const modalContext = this._modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, { - selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [], + value: { + selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [], + }, }); - modalContext?.onSubmit().then(({ selection }) => { - this._workspaceContext?.setPropertyEditorUiAlias(selection[0]); + modalContext?.onSubmit().then((value) => { + this._workspaceContext?.setPropertyEditorUiAlias(value?.selection[0]); }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts index ad227ec07a..878947eda9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts @@ -78,7 +78,9 @@ export class UmbDebugElement extends UmbLitElement { private _openDialog() { this._modalContext?.open(UMB_CONTEXT_DEBUGGER_MODAL, { - content: html`${this._renderContextAliases()}`, + data: { + content: html`${this._renderContextAliases()}`, + }, }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create-folder/create-folder.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create-folder/create-folder.action.ts index da1e50e6cc..3bfea2109c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create-folder/create-folder.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create-folder/create-folder.action.ts @@ -23,8 +23,10 @@ export class UmbCreateFolderEntityAction extends if (!this.repository || !this.#modalContext) return; const modalContext = this.#modalContext.open(UMB_FOLDER_MODAL, { - repositoryAlias: this.repositoryAlias, - parentUnique: this.unique ?? null, + data: { + repositoryAlias: this.repositoryAlias, + parentUnique: this.unique ?? null, + }, }); await modalContext.onSubmit(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete-folder/delete-folder.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete-folder/delete-folder.action.ts index 0d4d6f0ad6..3a6203aee3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete-folder/delete-folder.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete-folder/delete-folder.action.ts @@ -27,10 +27,12 @@ export class UmbDeleteFolderEntityAction extends if (folder) { // TODO: maybe we can show something about how many items are part of the folder? const modalContext = this.#modalContext.open(UMB_CONFIRM_MODAL, { - headline: `Delete folder ${folder.name}`, - content: 'Are you sure you want to delete this folder?', - color: 'danger', - confirmLabel: 'Delete', + data: { + headline: `Delete folder ${folder.name}`, + content: 'Are you sure you want to delete this folder?', + color: 'danger', + confirmLabel: 'Delete', + }, }); await modalContext.onSubmit(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete/delete.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete/delete.action.ts index fb7cf41bae..00abd856bc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete/delete.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/delete/delete.action.ts @@ -28,10 +28,12 @@ export class UmbDeleteEntityAction< //const { data } = await this.repository.requestItems([this.unique]); const modalContext = this.#modalManager.open(UMB_CONFIRM_MODAL, { - headline: `Delete`, - content: 'Are you sure you want to delete this item?', - color: 'danger', - confirmLabel: 'Delete', + data: { + headline: `Delete`, + content: 'Are you sure you want to delete this item?', + color: 'danger', + confirmLabel: 'Delete', + }, }); await modalContext.onSubmit(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/folder-update/folder-update.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/folder-update/folder-update.action.ts index bc46d9230b..524af9ab00 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/folder-update/folder-update.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/folder-update/folder-update.action.ts @@ -25,8 +25,10 @@ export class UmbFolderUpdateEntityAction< if (!this.repository || !this.#modalContext) return; const modalContext = this.#modalContext.open(UMB_FOLDER_MODAL, { - repositoryAlias: this.repositoryAlias, - unique: this.unique, + data: { + repositoryAlias: this.repositoryAlias, + unique: this.unique, + }, }); await modalContext.onSubmit(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/trash/trash.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/trash/trash.action.ts index c810b13d0c..4b6c8bb08c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/trash/trash.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/trash/trash.action.ts @@ -30,10 +30,12 @@ export class UmbTrashEntityAction< const item = data[0]; const modalContext = this.#modalContext?.open(UMB_CONFIRM_MODAL, { - headline: `Trash ${item.name}`, - content: 'Are you sure you want to move this item to the recycle bin?', - color: 'danger', - confirmLabel: 'Trash', + data: { + headline: `Trash ${item.name}`, + content: 'Are you sure you want to move this item to the recycle bin?', + color: 'danger', + confirmLabel: 'Trash', + }, }); modalContext?.onSubmit().then(() => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts index df12036a64..4d62a0913d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts @@ -17,7 +17,8 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement ${this.renderIconSelection()} - Close - + Close + Submit diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts index d071a19fa8..6a7c2ce832 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts @@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/web-components'; import type { UmbIconPickerModalElement } from './icon-picker-modal.element.js'; import { html } from '@umbraco-cms/backoffice/external/lit'; -import { UmbIconPickerModalData, UmbIconPickerModalValue } from '@umbraco-cms/backoffice/modal'; +import { UmbIconPickerModalValue } from '@umbraco-cms/backoffice/modal'; export default { title: 'API/Modals/Layouts/Icon Picker', @@ -13,8 +13,6 @@ export default { id: 'umb-icon-picker-modal', } as Meta; -const data: UmbIconPickerModalData = {}; - const value: UmbIconPickerModalValue = { color: undefined, icon: undefined, @@ -24,5 +22,5 @@ export const Overview: Story = () => html` - + `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts index d44ff21e61..4f5a4f8c60 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts @@ -17,19 +17,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement { + this._link = value?.link ?? {}; + this._selectedKey = this._link?.udi ? getKeyFromUdi(this._link.udi) : undefined; + }); + } + this._layout = this.data?.config; } private _handleQueryString() { @@ -69,13 +63,16 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement { option.selected = option.value === regEx; return option.selected; }); if (newlySelected === undefined) { this._customValidationOptions[4].selected = true; - this._returnData.validation.regEx = this._customValidationOptions[4].value; + this._value.validation.regEx = this._customValidationOptions[4].value; } else { - this._returnData.validation.regEx = regEx; + this._value.validation.regEx = regEx; } } @@ -99,18 +100,18 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< const isValid = form.checkValidity(); if (!isValid) return; - this.modalContext?.submit(this._returnData); + this.modalContext?.submit(); } #onNameChange(event: UUIInputEvent) { - const oldName = this._returnData.name; - const oldAlias = this._returnData.alias; - this._returnData.name = event.target.value.toString(); + const oldName = this._value.name; + const oldAlias = this._value.alias; + this._value.name = event.target.value.toString(); if (this._aliasLocked) { const expectedOldAlias = generateAlias(oldName ?? ''); // Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.) if (expectedOldAlias === oldAlias) { - this._returnData.alias = generateAlias(this._returnData.name); + this._value.alias = generateAlias(this._value.name); this.requestUpdate('_returnData'); } } @@ -119,43 +120,43 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< #onAliasChange(event: UUIInputEvent) { const alias = generateAlias(event.target.value.toString()); if (!this._aliasLocked) { - this._returnData.alias = alias; + this._value.alias = alias; } else { - this._returnData.alias = this.data?.propertyData?.alias; + this._value.alias = this._originalPropertyData.alias; } this.requestUpdate('_returnData'); } #onDataTypeIdChange(event: UUIInputEvent) { const dataTypeId = event.target.value.toString(); - this._returnData.dataTypeId = dataTypeId; + this._value.dataTypeId = dataTypeId; this.requestUpdate('_returnData'); } #onMandatoryChange(event: UUIBooleanInputEvent) { const value = event.target.checked; - this._returnData.validation!.mandatory = value; + this._value.validation!.mandatory = value; this.requestUpdate('_returnData'); } #onMandatoryMessageChange(event: UUIInputEvent) { const value = event.target.value.toString(); - this._returnData.validation!.mandatoryMessage = value; + this._value.validation!.mandatoryMessage = value; this.requestUpdate('_returnData'); } #setAppearanceNormal() { - const currentValue = this._returnData.appearance?.labelOnTop; + const currentValue = this._value.appearance?.labelOnTop; if (currentValue !== true) return; - this._returnData.appearance!.labelOnTop = false; + this._value.appearance!.labelOnTop = false; this.requestUpdate('_returnData'); } #setAppearanceTop() { - const currentValue = this._returnData.appearance?.labelOnTop; + const currentValue = this._value.appearance?.labelOnTop; if (currentValue === true) return; - this._returnData.appearance!.labelOnTop = true; + this._value.appearance!.labelOnTop = true; this.requestUpdate('_returnData'); } @@ -170,7 +171,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< option.selected = option.value === regEx; }); - this._returnData.validation!.regEx = regEx ?? null; + this._value.validation!.regEx = regEx ?? null; this.requestUpdate('_returnData'); this.requestUpdate('_customValidationOptions'); } @@ -184,17 +185,17 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< if (betterChoice === undefined) { this._customValidationOptions[4].selected = true; } - this._returnData.validation!.regEx = regEx; + this._value.validation!.regEx = regEx; this.requestUpdate('_returnData'); this.requestUpdate('_customValidationOptions'); } #onValidationMessageChange(event: UUIInputEvent) { - this._returnData.validation!.regExMessage = event.target.value.toString(); + this._value.validation!.regExMessage = event.target.value.toString(); this.requestUpdate('_returnData'); } #onVaryByCultureChange(event: UUIBooleanInputEvent) { - this._returnData.variesByCulture = event.target.checked; + this._value.variesByCulture = event.target.checked; this.requestUpdate('_returnData'); } @@ -214,7 +215,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< id="name-input" name="name" @input=${this.#onNameChange} - .value=${this._returnData.name} + .value=${this._value.name} placeholder="Enter a name..."> @@ -222,7 +223,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< id="alias-input" name="alias" @input=${this.#onAliasChange} - .value=${this._returnData.alias} + .value=${this._value.alias} placeholder="Enter alias..." ?disabled=${this._aliasLocked}> @@ -234,10 +235,10 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< id="description-input" name="description" placeholder="Enter description..." - .value=${this._returnData.description}> + .value=${this._value.description}>
@@ -267,7 +268,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< return html`
- ${this._returnData.validation?.mandatory + ${this._value.validation?.mandatory ? html` - ${this._returnData.validation?.regEx !== null + ${this._value.validation?.regEx !== null ? html` + .value=${this._value.validation?.regEx ?? ''}> + .value=${this._value.validation?.regExMessage ?? ''}> ` : nothing} `; } @@ -346,7 +347,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< #renderVaryByCulture() { return html` `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts index e38d25eb99..eef4e72e4b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts @@ -19,9 +19,10 @@ export class UmbSectionPickerModalElement extends UmbModalBaseElement< #selectionManager = new UmbSelectionManager(); #submit() { - this.modalContext?.submit({ + this._value = { selection: this.#selectionManager.getSelection(), - }); + }; + this.modalContext?.submit(); } #close() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts index 45c4ab69ff..203783fac1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts @@ -51,7 +51,9 @@ export class UmbTemplateModalElement extends UmbModalBaseElement { + this._selection = value?.selection ?? []; + }); + } + this._multiple = this.data?.multiple ?? false; } #onSelectionChange(e: CustomEvent) { e.stopPropagation(); const element = e.target as UmbTreeElement; - this._selection = element.selection; + this._value = { selection: element.selection }; this.dispatchEvent(new UmbSelectionChangeEvent()); } - #submit() { - this.modalContext?.submit({ selection: this._selection }); - } - - #close() { - this.modalContext?.reject(); - } - render() { return html` @@ -52,8 +50,8 @@ export class UmbTreePickerModalElement
- - + +
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts index 98a5792db3..8433e25c76 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-element.element.ts @@ -18,7 +18,13 @@ export abstract class UmbModalBaseElement< public modalContext?: UmbModalContext; @property({ type: Object, attribute: false }) - public data?: ModalDataType; + public get data(): ModalDataType | undefined { + return this._data; + } + public set data(value: ModalDataType | undefined) { + this._data = value; + } + private _data?: ModalDataType | undefined; @state() public get _value(): ModalValueType { @@ -34,7 +40,7 @@ export abstract class UmbModalBaseElement< * @memberof UmbModalBaseElement */ protected _submitModal() { - this.modalContext?.submit(this._value); + this.modalContext?.submit(); } /** diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts index 7e77346fb4..d10ead659e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-manager.context.ts @@ -1,6 +1,5 @@ import type { UmbModalToken } from './token/modal-token.js'; -import { UmbModalContext, UmbModalContextClass } from './index.js'; -import type { IRouterSlot } from '@umbraco-cms/backoffice/external/router-slot'; +import { UmbModalContext, type UmbModalContextClassArgs } from './index.js'; import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; import { BehaviorSubject } from '@umbraco-cms/backoffice/external/rxjs'; import { appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api'; @@ -29,22 +28,19 @@ export class UmbModalManagerContext { * Opens a modal or sidebar modal * @public * @param {(string | UmbModalToken)} modalAlias - * @param {ModalData} data - * @param {UmbModalConfig} config - * @param {IRouterSlot | null} router + * @param {UmbModalContextClassArgs} args * @return {*} {UmbModalHandler} * @memberof UmbModalManagerContext */ - public open( - modalAlias: string | UmbModalToken, - data?: ModalData, - config?: UmbModalConfig, - router: IRouterSlot | null = null, + public open< + ModalData extends object = object, + ModalValue = unknown, + ModalAliasTypeAsToken extends UmbModalToken = UmbModalToken, + >( + modalAlias: UmbModalToken | string, + args: UmbModalContextClassArgs = {}, ) { - const modalContext = new UmbModalContextClass(router, modalAlias, data, config) as unknown as UmbModalContext< - ModalData, - ModalValue - >; + const modalContext = new UmbModalContext(modalAlias, args); this.#modals.next( appendToFrozenArray(this.#modals.getValue(), modalContext, (entry) => entry.key === modalContext.key), diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts index 64945c3eb4..baf60ee15f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts @@ -8,23 +8,38 @@ import type { Params } from '@umbraco-cms/backoffice/router'; export type UmbModalRouteBuilder = (params: { [key: string]: string | number } | null) => string; -export class UmbModalRouteRegistration { +export type UmbModalRouteSetupReturn = UmbModalTokenValue extends undefined + ? { + data: UmbModalTokenData; + value?: UmbModalTokenValue; + } + : { + data: UmbModalTokenData; + value: UmbModalTokenValue; + }; + +export class UmbModalRouteRegistration { #key: string; #path: string | null; - #modalAlias: UmbModalToken | string; + #modalAlias: UmbModalToken | string; #modalConfig?: UmbModalConfig; - #onSetupCallback?: (routingInfo: Params) => Promise | UmbModalTokenData | false; - #onSubmitCallback?: (data: UmbModalTokenResult) => void; + #onSetupCallback?: ( + routingInfo: Params, + ) => + | Promise | false> + | UmbModalRouteSetupReturn + | false; + #onSubmitCallback?: (data: UmbModalTokenValue) => void; #onRejectCallback?: () => void; - #modalManagerContext: UmbModalContext | undefined; + #modalManagerContext: UmbModalContext | undefined; #routeBuilder?: UmbModalRouteBuilder; #urlBuilderCallback: ((urlBuilder: UmbModalRouteBuilder) => void) | undefined; // Notice i removed the key in the transferring to this class. constructor( - modalAlias: UmbModalToken | string, + modalAlias: UmbModalToken | string, path: string | null = null, modalConfig?: UmbModalConfig, ) { @@ -87,11 +102,18 @@ export class UmbModalRouteRegistration Promise | UmbModalTokenData | false) { + public onSetup( + callback: ( + routingInfo: Params, + ) => + | Promise | false> + | UmbModalRouteSetupReturn + | false, + ) { this.#onSetupCallback = callback; return this; } - public onSubmit(callback: (data: UmbModalTokenResult) => void) { + public onSubmit(callback: (value: UmbModalTokenValue) => void) { this.#onSubmitCallback = callback; return this; } @@ -100,7 +122,7 @@ export class UmbModalRouteRegistration { + #onSubmit = (data: UmbModalTokenValue) => { this.#onSubmitCallback?.(data); this.#modalManagerContext = undefined; }; @@ -115,7 +137,14 @@ export class UmbModalRouteRegistration = Omit< - UmbModalContextClass, - 'submit' -> & - OptionalSubmitArgumentIfUndefined; - -// If Type is undefined we don't accept an argument, -// If type is unknown, we accept an option argument. -// If type is anything else, we require an argument of that type. -type OptionalSubmitArgumentIfUndefined = T extends undefined - ? { - submit: () => void; - } - : T extends unknown - ? { - submit: (arg?: T) => void; - } - : { - submit: (arg: T) => void; - }; - export interface UmbModalRejectReason { type: string; } +export type UmbModalContextClassArgs< + ModalAliasType extends string | UmbModalToken, + ModalAliasTypeAsToken extends UmbModalToken = ModalAliasType extends UmbModalToken ? ModalAliasType : UmbModalToken, +> = { + router?: IRouterSlot | null; + data?: ModalAliasTypeAsToken['DATA']; + value?: ModalAliasTypeAsToken['VALUE']; + config?: UmbModalConfig; +}; + // TODO: consider splitting this into two separate handlers -export class UmbModalContextClass extends EventTarget { +export class UmbModalContext extends EventTarget { #submitPromise: Promise; #submitResolver?: (value: ModalValue) => void; #submitRejecter?: (reason?: UmbModalRejectReason) => void; @@ -47,18 +33,16 @@ export class UmbModalContextClass; - #value = new UmbObjectState(undefined); - public readonly value = this.#value.asObservable(); + #value; + public readonly value; constructor( - router: IRouterSlot | null, modalAlias: string | UmbModalToken, - data?: ModalPreset, - config?: UmbModalConfig, + args: UmbModalContextClassArgs, ) { super(); - this.key = config?.key || UmbId.new(); - this.router = router; + this.key = args.config?.key || UmbId.new(); + this.router = args.router ?? null; this.alias = modalAlias; if (this.alias instanceof UmbModalToken) { @@ -66,11 +50,17 @@ export class UmbModalContextClass; + this.value = this.#value.asObservable(); // TODO: Consider if its right to use Promises, or use another event based system? Would we need to be able to cancel an event, to then prevent the closing..? this.#submitPromise = new Promise((resolve, reject) => { @@ -85,8 +75,8 @@ export class UmbModalContextClass} * @public * @memberof UmbModalContext */ - public onSubmit(): Promise { + public onSubmit() { return this.#submitPromise; } /** * Gives the current value of this modal. + * @returns {ModalValue} * @public * @memberof UmbModalContext */ diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.interfaces.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.interfaces.ts index 0bfb8fced7..e3a9520916 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.interfaces.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.interfaces.ts @@ -1,6 +1,5 @@ export interface UmbPickerModalData { multiple?: boolean; - selection?: Array; hideTreeRoot?: boolean; filter?: (item: ItemType) => boolean; pickableFilter?: (item: ItemType) => boolean; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts index d37ad613dd..123910ca78 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts @@ -4,10 +4,12 @@ export interface UmbDataTypePickerFlowDataTypePickerModalData { propertyEditorUiAlias: string; } -export type UmbDataTypePickerFlowDataTypePickerModalValue = { - dataTypeId?: string; - createNewWithPropertyEditorUiAlias?: string; -}; +export type UmbDataTypePickerFlowDataTypePickerModalValue = + | { + dataTypeId?: string; + createNewWithPropertyEditorUiAlias?: string; + } + | undefined; export const UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL = new UmbModalToken< UmbDataTypePickerFlowDataTypePickerModalData, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts index 89737ad100..584ac447ea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts @@ -1,7 +1,6 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbDataTypePickerFlowModalData { - selection?: Array; submitLabel?: string; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts index 40144b4c00..ba6b2453b5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts @@ -1,6 +1,6 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; -export interface UmbIconPickerModalData {} +export type UmbIconPickerModalData = never; export interface UmbIconPickerModalValue { color: string | undefined; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts index f94c76a1e5..674d735988 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts @@ -3,7 +3,6 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbLanguagePickerModalData { multiple?: boolean; - selection?: Array; filter?: (language: LanguageResponseModel) => boolean; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts index be36808541..165f8fa9b4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts @@ -2,12 +2,11 @@ import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbLinkPickerModalData { - index: number | null; - link: UmbLinkPickerLink; config: UmbLinkPickerConfig; + index: number | null; } -export type UmbLinkPickerModalValue = { index: number | null; link: UmbLinkPickerLink }; +export type UmbLinkPickerModalValue = { link: UmbLinkPickerLink }; export interface UmbLinkPickerLink { icon?: string | null; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts index ff590346d2..117778ee1b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts @@ -13,15 +13,15 @@ export class UmbModalToken; submitLabel?: string; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts index 8e15120cda..151b2dcabf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts @@ -3,7 +3,6 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export type UmbPropertySettingsModalData = { documentTypeId: string; - propertyData: PropertyTypeModelBaseModel; }; export type UmbPropertySettingsModalValue = PropertyTypeModelBaseModel; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts index 46523ee4b1..b3b0ac1cb6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/workspace-modal.token.ts @@ -6,11 +6,13 @@ export interface UmbWorkspaceData { preset: Partial; } -export type UmbWorkspaceResult = { - id: string; -}; +export type UmbWorkspaceValue = + | { + id: string; + } + | undefined; -export const UMB_WORKSPACE_MODAL = new UmbModalToken('Umb.Modal.Workspace', { +export const UMB_WORKSPACE_MODAL = new UmbModalToken('Umb.Modal.Workspace', { type: 'sidebar', size: 'large', }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts index b898934c2b..ad518f961a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts @@ -13,6 +13,7 @@ import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-ap import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; export class UmbPickerInputContext extends UmbBaseController { + // TODO: We are way too unsecure about the requirements for the Modal Token, as we have certain expectation for the data and value. modalAlias: string | UmbModalToken; repository?: UmbItemRepository; #getUnique: (entry: ItemType) => string | undefined; @@ -68,11 +69,16 @@ export class UmbPickerInputContext openPicker(pickerData?: Partial>) { if (!this.modalManager) throw new Error('Modal manager context is not initialized'); + // TODO: Update so selection is part of value... const modalContext = this.modalManager.open(this.modalAlias, { - multiple: this.max === 1 ? false : true, - selection: [...this.getSelection()], - pickableFilter: this.pickableFilter, - ...pickerData, + data: { + multiple: this.max === 1 ? false : true, + pickableFilter: this.pickableFilter, + ...pickerData, + }, + value: { + selection: [...this.getSelection()], + }, }); modalContext?.onSubmit().then(({ selection }: any) => { @@ -87,10 +93,12 @@ export class UmbPickerInputContext if (!item) throw new Error('Could not find item with unique: ' + unique); const modalContext = this.modalManager?.open(UMB_CONFIRM_MODAL, { - color: 'danger', - headline: `Remove ${item.name}?`, - content: 'Are you sure you want to remove this item', - confirmLabel: 'Remove', + data: { + color: 'danger', + headline: `Remove ${item.name}?`, + content: 'Are you sure you want to remove this item', + confirmLabel: 'Remove', + }, }); await modalContext?.onSubmit(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts index 5fc1ddb181..af8dbe690f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts @@ -28,9 +28,11 @@ export default class UmbTinyMceCodeEditorPlugin extends UmbTinyMcePluginBase { const modalHandler = this.#modalContext?.open( UMB_CODE_EDITOR_MODAL, { - headline: 'Edit source code', - content: this.editor.getContent() ?? '', - language: 'html', + data: { + headline: 'Edit source code', + content: this.editor.getContent() ?? '', + language: 'html', + }, }, ); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts index 402b493201..10ce0609b8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts @@ -77,7 +77,7 @@ export default class UmbTinyMceEmbeddedMediaPlugin extends UmbTinyMcePluginBase } async #showModal(selectedElm: HTMLElement, embeddedMediaModalData: UmbEmbeddedMediaModalData) { - const modalHandler = this.#modalContext?.open(UMB_EMBEDDED_MEDIA_MODAL, embeddedMediaModalData); + const modalHandler = this.#modalContext?.open(UMB_EMBEDDED_MEDIA_MODAL, { data: embeddedMediaModalData }); if (!modalHandler) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts index 5c50a388b3..7a0acf8728 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts @@ -94,11 +94,15 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase { async #openLinkPicker(currentTarget?: UmbLinkPickerLink) { const modalHandler = this.#modalContext?.open(UMB_LINK_PICKER_MODAL, { - config: { - ignoreUserStartNodes: this.configuration?.getValueByAlias('ignoreUserStartNodes') ?? false, + data: { + config: { + ignoreUserStartNodes: this.configuration?.getValueByAlias('ignoreUserStartNodes') ?? false, + }, + index: null, + }, + value: { + link: currentTarget ?? {}, }, - link: currentTarget ?? {}, - index: null, }); if (!modalHandler) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.ts index 9910611776..e7957b30c4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.ts @@ -193,8 +193,10 @@ export default class UmbTinyMceMacroPickerPlugin extends UmbTinyMcePluginBase { // TODO => depends on macro picker, which doesn't exist, just showing a generic modal for now async #showMacroPicker(dialogData: DialogData) { const modalHandler = this.#modalContext?.open(UMB_CONFIRM_MODAL, { - headline: 'Macro picker', - content: 'Yet to be implemented', + data: { + headline: 'Macro picker', + content: 'Yet to be implemented', + }, }); if (!modalHandler) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-mediapicker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-mediapicker.plugin.ts index 66825ac3e3..fe58231a3c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-mediapicker.plugin.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-mediapicker.plugin.ts @@ -54,11 +54,13 @@ export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase { }); } + /* async #observeCurrentUser() { if (!this.#currentUserContext) return; this.observe(this.#currentUserContext.currentUser, (currentUser) => (this.#currentUser = currentUser)); } + */ async #onAction() { const selectedElm = this.editor.selection.getNode(); @@ -90,6 +92,8 @@ export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase { } async #showMediaPicker(currentTarget: MediaPickerTargetData) { + /* + // TODO: I dont think we should parse this one... it should be up to the modal to get this information, and then we could parse some configs on to affect this. let startNodeId; let startNodeIsVirtual; @@ -102,13 +106,18 @@ export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase { startNodeIsVirtual = this.#currentUser?.mediaStartNodeIds?.length !== 1; } } + */ // TODO => startNodeId and startNodeIsVirtual do not exist on ContentTreeItemResponseModel const modalHandler = this.#modalContext?.open(UMB_MEDIA_TREE_PICKER_MODAL, { - selection: currentTarget.udi ? [...currentTarget.udi] : [], - multiple: false, - //startNodeId, - //startNodeIsVirtual, + data: { + multiple: false, + //startNodeId, + //startNodeIsVirtual, + }, + value: { + selection: currentTarget.udi ? [...currentTarget.udi] : [], + }, }); if (!modalHandler) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/editable-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/editable-workspace-context-base.ts index 7c7e720546..23c6f9477f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/editable-workspace-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/editable-workspace-context-base.ts @@ -49,7 +49,8 @@ export abstract class UmbEditableWorkspaceContextBase -

${this.localize.term('redirectUrls_redirectRemoveWarning')}

- ${this.localize.term('redirectUrls_originalUrl')}: ${data.originalUrl}
- ${this.localize.term('redirectUrls_redirectedTo')}: ${data.destinationUrl} - - `, - color: 'danger', - confirmLabel: 'Delete', + data: { + headline: 'Delete', + content: html` +
+

${this.localize.term('redirectUrls_redirectRemoveWarning')}

+ ${this.localize.term('redirectUrls_originalUrl')}: ${data.originalUrl}
+ ${this.localize.term('redirectUrls_redirectedTo')}: ${data.destinationUrl} +
+ `, + color: 'danger', + confirmLabel: 'Delete', + }, }); modalContext @@ -136,10 +138,12 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, { - headline: `${this.localize.term('redirectUrls_disableUrlTracker')}`, - content: `${this.localize.term('redirectUrls_confirmDisable')}`, - color: 'danger', - confirmLabel: 'Disable', + data: { + headline: `${this.localize.term('redirectUrls_disableUrlTracker')}`, + content: `${this.localize.term('redirectUrls_confirmDisable')}`, + color: 'danger', + confirmLabel: 'Disable', + }, }); modalContext ?.onSubmit() diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/create.action.ts index ffb76adc49..dbb08b58a6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/create.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/create.action.ts @@ -20,7 +20,9 @@ export class UmbCreateDataTypeEntityAction extends UmbEntityActionBase this.modalContext?.submit()); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts index 79469d08b8..b04970fc98 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts @@ -101,8 +101,10 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement { private async _handleIconClick() { const modalContext = this._modalContext?.open(UMB_ICON_PICKER_MODAL, { - icon: this._icon, - color: this._iconColorAlias, + value: { + icon: this._icon, + color: this._iconColorAlias, + }, }); modalContext?.onSubmit().then((saved) => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts index 97f890bfd1..c5f2fd9dcd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts @@ -120,10 +120,10 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle if (documentTypeId === undefined) return false; const propertyData = await this._propertyStructureHelper.createPropertyScaffold(this._containerId); if (propertyData === undefined) return false; - return { propertyData, documentTypeId }; + return { data: { documentTypeId }, value: propertyData }; }) - .onSubmit((result) => { - this.#addProperty(result); + .onSubmit((value) => { + this.#addProperty(value); }) .observeRouteBuilder((routeBuilder) => { this._modalRouteNewProperty = routeBuilder(null); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts index e1ec8260b0..21b2026c1e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts @@ -92,7 +92,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { if (documentTypeId === undefined) return false; const propertyData = this.property; if (propertyData === undefined) return false; - return { propertyData, documentTypeId }; + return { data: { documentTypeId }, value: propertyData }; }) .onSubmit((result) => { this._partialUpdate(result); @@ -104,7 +104,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) .addAdditionalPath('document-type') .onSetup(() => { - return { entityType: 'document-type', preset: {} }; + return { data: { entityType: 'document-type', preset: {} } }; }) .observeRouteBuilder((routeBuilder) => { this._editDocumentTypePath = routeBuilder({}); @@ -138,7 +138,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { e.stopImmediatePropagation(); if (!this.property || !this.property.id) return; - const Message: UmbConfirmModalData = { + const modalData: UmbConfirmModalData = { headline: `${this.localize.term('actions_delete')} property`, content: html` Are you sure you want to delete the tab ${tab?.name ?? tab?.id} @@ -202,7 +202,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement imple // TODO: If this tab is composed of other tabs, then notify that it will only delete the local tab. - const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, Message); + const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, { data: modalData }); modalHandler?.onSubmit().then(() => { this.#remove(tab?.id); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts index a157f93c73..8db4c056e5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-granular-permission/input-document-granular-permission.element.ts @@ -61,11 +61,14 @@ export class UmbInputDocumentGranularPermissionElement extends FormControlMixin( #openDocumentPicker() { // We send a shallow copy(good enough as its just an array of ids) of our this._selectedIds, as we don't want the modal to manipulate our data: + // TODO: Use value instead: const modalContext = this.#modalContext?.open(UMB_DOCUMENT_PICKER_MODAL, { - selection: [...this._selectedIds], + value: { + selection: [...this._selectedIds], + }, }); - modalContext?.onSubmit().then(({ selection }: any) => { + modalContext?.onSubmit().then((value) => { //this.#setSelection(selection); }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts index 60525f05d0..bc6b0cdba1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts @@ -58,7 +58,8 @@ export class UmbCreateDocumentModalElement extends UmbModalBaseElement< const target = event.target as HTMLButtonElement; const documentTypeId = target.dataset.id; if (!documentTypeId) throw new Error('No document type id found'); - this.modalContext?.submit({ documentTypeId }); + this._value = { documentTypeId }; + this.modalContext?.submit(); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts index 6123fffa85..0e63b8d393 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts @@ -16,7 +16,8 @@ export default class UmbLogViewerSaveSearchModalElement extends UmbModalBaseElem } private _handleSubmit() { - this.modalContext?.submit({ name: this._input.value as string, query: this.data?.query }); + this._value = { name: this._input.value as string, query: this.data?.query }; + this.modalContext?.submit(); } @state() diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts index 72c6d44990..5be1c981d5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts @@ -102,12 +102,14 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement { private async _handleIconClick() { const modalContext = this._modalContext?.open(UMB_ICON_PICKER_MODAL, { - icon: this._icon, - color: this._iconColorAlias, + value: { + icon: this._icon, + color: this._iconColorAlias, + }, }); - modalContext?.onSubmit().then((saved) => { - if (saved.icon) this.#workspaceContext?.updateProperty('icon', saved.icon); + modalContext?.onSubmit().then((value) => { + if (value.icon) this.#workspaceContext?.updateProperty('icon', value.icon); // TODO: save color ALIAS as well }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts index 10ea5b0184..1e4c45984b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts @@ -118,10 +118,10 @@ export class UmbMediaTypeWorkspaceViewEditPropertiesElement extends UmbLitElemen if (mediaTypeId === undefined) return false; const propertyData = await this._propertyStructureHelper.createPropertyScaffold(this._containerId); if (propertyData === undefined) return false; - return { propertyData, documentTypeId: mediaTypeId }; //TODO: Should we have a separate modal for mediaTypes? + return { data: { documentTypeId: mediaTypeId }, value: propertyData }; //TODO: Should we have a separate modal for mediaTypes? }) - .onSubmit((result) => { - this.#addProperty(result); + .onSubmit((value) => { + this.#addProperty(value); }) .observeRouteBuilder((routeBuilder) => { this._modalRouteNewProperty = routeBuilder(null); diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-bulk-actions/move/move.action.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-bulk-actions/move/move.action.ts index 9f71ba5fa1..5760770ac2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-bulk-actions/move/move.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/entity-bulk-actions/move/move.action.ts @@ -22,8 +22,12 @@ export class UmbMediaMoveEntityBulkAction extends UmbEntityBulkActionBase { this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL, { - hidePartialView: this.hidePartialView, + data: { + hidePartialView: this.hidePartialView, + }, }); this.#openModal?.onSubmit().then((closedModal: UmbChooseInsertTypeModalValue) => { this.determineInsertValue(closedModal); @@ -93,7 +95,9 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { #openInsertDictionaryItemModal() { this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, { - pickableFilter: (item) => item.id !== null, + data: { + pickableFilter: (item) => item.id !== null, + }, }); this.#openModal?.onSubmit().then((value) => { this.#getDictionaryItemSnippet(value).then(() => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts index 52d54b2cbe..ec074efa1e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts @@ -47,21 +47,27 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement #openInsertPartialViewSidebar() { this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL); this.#openModal?.onSubmit().then((partialViewPickerModalValue) => { - if (partialViewPickerModalValue) - this.modalContext?.submit({ + if (partialViewPickerModalValue) { + this._value = { type: CodeSnippetType.partialView, value: partialViewPickerModalValue.selection[0], - }); + }; + this.modalContext?.submit(); + } }); } #openInsertDictionaryItemModal() { this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, { - pickableFilter: (item) => item.id !== null, + data: { + pickableFilter: (item) => item.id !== null, + }, }); this.#openModal?.onSubmit().then((dictionaryItemPickerModalValue) => { - if (dictionaryItemPickerModalValue) - this.modalContext?.submit({ value: dictionaryItemPickerModalValue, type: CodeSnippetType.dictionaryItem }); + if (dictionaryItemPickerModalValue) { + this._value = { value: dictionaryItemPickerModalValue, type: CodeSnippetType.dictionaryItem }; + this.modalContext?.submit(); + } }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts index ceaa3a9da8..152a4d4dfb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts @@ -64,7 +64,10 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase #submit() { const value = this.selectedCheckbox?.snippet; - if (this.selectedCheckbox?.validate()) this.modalContext?.submit({ value: value ?? '' }); + if (this.selectedCheckbox?.validate()) { + this._value = { value: value ?? '' }; + this.modalContext?.submit(); + } } render() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts index 3dbf26cd02..a30dbcc3ae 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts @@ -20,7 +20,7 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen connectedCallback() { super.connectedCallback(); - this._selection = this.data?.selection ?? []; + this._selection = this._value?.selection ?? []; this._multiple = this.data?.multiple ?? true; } @@ -32,7 +32,8 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen } private _submit() { - this.modalContext?.submit({ selection: this._selection }); + this._value = { selection: this._selection }; + this.modalContext?.submit(); } private _close() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts index bb80658a65..7d9d8cc6a3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.ts @@ -30,7 +30,9 @@ export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElemen openModal = () => { if (!this._modalContext) throw new Error('Modal context not found'); const modal = this._modalContext.open(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL, { - rule: this.rule, + value: { + rule: this.rule, + }, }); modal?.onSubmit().then((result) => { if (result.rule && this.rule?.name) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts index f86ed9a9ce..8c1e4f1752 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts @@ -4,57 +4,48 @@ import { css, html, customElement, ifDefined, state } from '@umbraco-cms/backoff import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api'; -export interface StylesheetRichTextEditorStyleModalData { +export interface StylesheetRichTextEditorStyleModalValue { rule: RichTextRuleModelSortable | null; } -export type UmbStylesheetRichTextEditorStyleModalValue = NonNullable>; - @customElement('umb-stylesheet-rich-text-editor-style-modal') export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbModalBaseElement< - StylesheetRichTextEditorStyleModalData, - UmbStylesheetRichTextEditorStyleModalValue + never, + StylesheetRichTextEditorStyleModalValue > { - private _close() { - this.modalContext?.reject(); - } - - #submit() { - this.modalContext?.submit({ rule: this._rule }); - } - - connectedCallback() { - super.connectedCallback(); - this._rule = this.data?.rule ?? null; - } - @state() private _rule: RichTextRuleModel | null = null; #updateName(event: Event) { const name = (event.target as HTMLInputElement).value; - this._rule = { - ...this._rule, - name, + this._value = { + rule: { + ...this._value.rule, + name, + }, }; } #updateSelector(event: Event) { const selector = (event.target as HTMLInputElement).value; - this._rule = { - ...this._rule, - selector, + this._value = { + rule: { + ...this._value.rule, + selector, + }, }; } #updateStyles(event: Event) { const styles = (event.target as HTMLInputElement).value; - this._rule = { - ...this._rule, - styles, + this._value = { + rule: { + ...this._value.rule, + styles, + }, }; } @@ -120,8 +111,8 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod
- Close - Submit + Close + Submit
`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts index a6ed77f545..ebeb80a6e8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts @@ -1,9 +1,6 @@ import { RichTextRuleModelSortable, UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js'; import { UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR } from '../../manifests.js'; -import { - StylesheetRichTextEditorStyleModalData, - UmbStylesheetRichTextEditorStyleModalValue, -} from './stylesheet-workspace-view-rich-text-editor-style-sidebar.element.js'; +import { StylesheetRichTextEditorStyleModalValue } from './stylesheet-workspace-view-rich-text-editor-style-sidebar.element.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; @@ -15,12 +12,17 @@ import { css, html, customElement, state, ifDefined, repeat } from '@umbraco-cms import './stylesheet-workspace-view-rich-text-editor-rule.element.js'; export const UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL = new UmbModalToken< - StylesheetRichTextEditorStyleModalData, - UmbStylesheetRichTextEditorStyleModalValue ->(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR, { - type: 'sidebar', - size: 'medium', -}); + never, + StylesheetRichTextEditorStyleModalValue +>( + UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR, + { + type: 'sidebar', + size: 'medium', + }, + undefined, + { rule: null }, +); const SORTER_CONFIG: UmbSorterConfig = { compareElementToModel: (element: HTMLElement, model: RichTextRuleModel) => { @@ -73,7 +75,9 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme openModal = (rule: RichTextRuleModelSortable | null = null) => { if (!this._modalContext) throw new Error('Modal context not found'); const modal = this._modalContext.open(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL, { - rule, + value: { + rule, + }, }); modal?.onSubmit().then((result) => { if (result.rule) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts index 1d04fc1178..bdfb99cb3a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts @@ -112,14 +112,18 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) { #openPicker() { // TODO: Change experience, so its not multi selectable. But instead already picked templates should be unpickable. (awaiting general picker features for such) const modalContext = this._modalContext?.open(UMB_TEMPLATE_PICKER_MODAL, { - multiple: true, - selection: [...this._selectedIds], - pickableFilter: (template: TemplateResponseModel) => template.id !== null, + data: { + multiple: true, + pickableFilter: (template: TemplateResponseModel) => template.id !== null, + }, + value: { + selection: [...this._selectedIds], + }, }); - modalContext?.onSubmit().then((data) => { - if (!data.selection) return; - this.selectedIds = data.selection.filter((x) => x !== null) as Array; + modalContext?.onSubmit().then((value) => { + if (!value?.selection) return; + this.selectedIds = value.selection.filter((x) => x !== null) as Array; this.dispatchEvent(new CustomEvent('change')); }); } @@ -141,8 +145,10 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) { const id = (e.target as UmbTemplateCardElement).value; this._modalContext?.open(UMB_TEMPLATE_MODAL, { - id: id as string, - language: 'razor', + data: { + id: id as string, + language: 'razor', + }, }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts index 3782f1dc5e..2d1635019a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts @@ -80,9 +80,7 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement } #submit() { - this.modalContext?.submit({ - value: this._templateQuery?.queryExpression ?? '', - }); + this.modalContext?.submit(); } #updateQueryRequest(update: TemplateQueryExecuteModel) { @@ -99,12 +97,15 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement const { data, error } = await this.#templateRepository.postTemplateQueryExecute({ requestBody: this._queryRequest, }); - if (data) this._templateQuery = { ...data }; + if (data) { + this._templateQuery = { ...data }; + this._value = { value: this._templateQuery?.queryExpression ?? '' }; + } }; #openDocumentPicker = () => { this.#modalManagerContext - ?.open(UMB_DOCUMENT_PICKER_MODAL, { hideTreeRoot: true }) + ?.open(UMB_DOCUMENT_PICKER_MODAL, { data: { hideTreeRoot: true } }) .onSubmit() .then((result) => { this.#updateQueryRequest({ rootContentId: result.selection[0] }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts index 2ab2ba1789..22f4d43501 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts @@ -112,7 +112,9 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement { #openInsertSectionModal() { const sectionModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL); sectionModal?.onSubmit().then((insertSectionModalValue) => { - if (insertSectionModalValue.value) this._codeEditor?.insert(insertSectionModalValue.value); + if (insertSectionModalValue?.value) { + this._codeEditor?.insert(insertSectionModalValue.value); + } }); } @@ -122,15 +124,19 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement { #openMasterTemplatePicker() { const modalContext = this._modalContext?.open(UMB_TEMPLATE_PICKER_MODAL, { - selection: [this.#masterTemplateId], - pickableFilter: (item) => { - return item.id !== null && item.id !== this.#templateWorkspaceContext?.getEntityId(); + data: { + pickableFilter: (item) => { + return item.id !== null && item.id !== this.#templateWorkspaceContext?.getEntityId(); + }, + }, + value: { + selection: [this.#masterTemplateId], }, }); - modalContext?.onSubmit().then((data) => { - if (!data.selection) return; - this.#templateWorkspaceContext?.setMasterTemplate(data.selection[0] ?? ''); + modalContext?.onSubmit().then((value) => { + if (!value?.selection) return; + this.#templateWorkspaceContext?.setMasterTemplate(value.selection[0] ?? ''); }); } @@ -138,7 +144,9 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement { const queryBuilderModal = this._modalContext?.open(UMB_TEMPLATE_QUERY_BUILDER_MODAL); queryBuilderModal?.onSubmit().then((queryBuilderModalValue) => { - if (queryBuilderModalValue.value) this._codeEditor?.insert(getQuerySnippet(queryBuilderModalValue.value)); + if (queryBuilderModalValue?.value) { + this._codeEditor?.insert(getQuerySnippet(queryBuilderModalValue.value)); + } }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/user-profile-apps/user-profile-app-profile.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/user-profile-apps/user-profile-app-profile.element.ts index 9166851006..9ba96391be 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/user-profile-apps/user-profile-app-profile.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/user-profile-apps/user-profile-app-profile.element.ts @@ -51,7 +51,9 @@ export class UmbUserProfileAppProfileElement extends UmbLitElement { if (!this.#modalManagerContext) return; this.#modalManagerContext.open(UMB_CHANGE_PASSWORD_MODAL, { - userId: this._currentUser?.id ?? '', + data: { + userId: this._currentUser?.id ?? '', + }, }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts index 4c81a48e2d..2afd9bd4a5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/modals/change-password/change-password-modal.element.ts @@ -40,9 +40,10 @@ export class UmbChangePasswordModalElement extends UmbModalBaseElement< // TODO: validate that the new password and confirm password match const oldPassword = formData.get('oldPassword') as string; const newPassword = formData.get('newPassword') as string; - const confirmPassword = formData.get('confirmPassword') as string; + //const confirmPassword = formData.get('confirmPassword') as string; - this.modalContext?.submit({ oldPassword, newPassword }); + this._value = { oldPassword, newPassword }; + this.modalContext?.submit(); } constructor() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/entity-bulk-actions/delete/delete.action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/entity-bulk-actions/delete/delete.action.ts index 8bf06a5291..db9c68eea5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/entity-bulk-actions/delete/delete.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/entity-bulk-actions/delete/delete.action.ts @@ -24,10 +24,12 @@ export class UmbDeleteUserGroupEntityBulkAction extends UmbEntityBulkActionBase< if (!this.#modalContext || this.selection.length === 0) return; const modalContext = this.#modalContext.open(UMB_CONFIRM_MODAL, { - color: 'danger', - headline: `Delete user groups?`, - content: html`Are you sure you want to delete selected user groups?`, - confirmLabel: 'Delete', + data: { + color: 'danger', + headline: `Delete user groups?`, + content: html`Are you sure you want to delete selected user groups?`, + confirmLabel: 'Delete', + }, }); await modalContext.onSubmit(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts index c61c8c3f55..de569987ee 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts @@ -1,25 +1,19 @@ -import { html, customElement, property, css, nothing, state } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, css, nothing, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbEntityUserPermissionSettingsModalData, UmbEntityUserPermissionSettingsModalValue, - UmbModalContext, + UmbModalBaseElement, } from '@umbraco-cms/backoffice/modal'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event'; @customElement('umb-entity-user-permission-settings-modal') -export class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement { - @property({ attribute: false }) - modalContext?: UmbModalContext; - - #data?: UmbEntityUserPermissionSettingsModalData; - - @property({ type: Object }) - get data(): UmbEntityUserPermissionSettingsModalData | undefined { - return this.#data; - } +export class UmbEntityUserPermissionSettingsModalElement extends UmbModalBaseElement< + UmbEntityUserPermissionSettingsModalData, + UmbEntityUserPermissionSettingsModalValue +> { set data(data: UmbEntityUserPermissionSettingsModalData | undefined) { + super.data = data; this._entityType = data?.entityType; this._allowedPermissions = data?.allowedPermissions ?? []; this._headline = data?.headline ?? this._headline; @@ -35,11 +29,8 @@ export class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement { _allowedPermissions: Array = []; private _handleConfirm() { - this.modalContext?.submit({ allowedPermissions: this._allowedPermissions }); - } - - private _handleCancel() { - this.modalContext?.reject(); + this._value = { allowedPermissions: this._allowedPermissions }; + this.modalContext?.submit(); } #onSelectedUserPermission(event: UmbSelectionChangeEvent) { @@ -59,7 +50,7 @@ export class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement { : nothing} - Cancel + Cancel { diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts index 134b025628..3e1a3195d2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts @@ -18,7 +18,7 @@ export class UmbUserPickerModalElement extends UmbModalBaseElement | Map): void { @@ -36,7 +36,8 @@ export class UmbUserPickerModalElement extends UmbModalBaseElement { + modalContext?.onSubmit().then((value) => { // if modal submitted, then data is supplied here. }); } @@ -257,7 +257,8 @@ class MyDialog extends UmbElementMixin(LitElement) { private _handleSubmit() { /* Optional data of any type can be applied to the submit method to pass it to the modal parent through the onSubmit promise. */ - this.modalContext?.submit({ myReturnData: 'hello world' }); + this.modalContext?.setValue({ myReturnData: 'hello world' }); + this.modalContext?.submit(); } render() {