diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json index 131f74a875..16840de766 100644 --- a/src/Umbraco.Web.UI.Client/package-lock.json +++ b/src/Umbraco.Web.UI.Client/package-lock.json @@ -79,7 +79,7 @@ "tsc-alias": "^1.8.8", "typescript": "^5.3.2", "typescript-json-schema": "^0.62.0", - "vite": "^4.4.9", + "vite": "^4.4.12", "vite-plugin-static-copy": "^0.17.0", "vite-tsconfig-paths": "^4.2.0", "web-component-analyzer": "^2.0.0-next.5" @@ -22131,9 +22131,9 @@ } }, "node_modules/vite": { - "version": "4.4.9", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", - "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==", + "version": "4.4.12", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.12.tgz", + "integrity": "sha512-KtPlUbWfxzGVul8Nut8Gw2Qe8sBzWY+8QVc5SL8iRFnpnrcoCaNlzO40c1R6hPmcdTwIPEDkq0Y9+27a5tVbdQ==", "dev": true, "dependencies": { "esbuild": "^0.18.10", diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 5f591df8cb..9f64902284 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -202,7 +202,7 @@ "typescript": "^5.3.2", "vite-plugin-static-copy": "^0.17.0", "vite-tsconfig-paths": "^4.2.0", - "vite": "^4.4.9", + "vite": "^4.4.12", "web-component-analyzer": "^2.0.0-next.5" }, "msw": { diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/create-extension-api.test.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/create-extension-api.test.ts index d8d961aec4..cabef4207a 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/create-extension-api.test.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/create-extension-api.test.ts @@ -101,7 +101,4 @@ describe('Extension-Api: Create Extension Api', () => { expect(api.isValidClassInstance()).to.be.true; } }); - - //TODO: Test apiJs - //TODO: Test js }); 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..86267f6c82 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 @@ -74,7 +74,7 @@ export class UmbInputMultiUrlElement extends FormControlMixin(UmbLitElement) { @property({ type: Boolean, attribute: 'hide-anchor' }) hideAnchor?: boolean; - @property() + @property({ type: Boolean, attribute: 'ignore-user-start-nodes' }) ignoreUserStartNodes?: boolean; /** @@ -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/components/property-type-based-property/property-type-based-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts index 1bc1363a53..1131038379 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts @@ -28,7 +28,7 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement { private _dataTypeData?: UmbPropertyEditorConfig; private _dataTypeDetailRepository = new UmbDataTypeDetailRepository(this); - private _dataTypeObserver?: UmbObserverController; + private _dataTypeObserver?: UmbObserverController; private async _observeDataType(dataTypeUnique?: string) { this._dataTypeObserver?.destroy(); 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..181c11f8de 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 @@ -6,6 +6,7 @@ import { UMB_DATA_TYPE_PICKER_FLOW_MODAL, UMB_WORKSPACE_MODAL, } from '@umbraco-cms/backoffice/modal'; +import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; // Note: Does only support picking a single data type. But this could be developed later into this same component. To follow other picker input components. /** @@ -49,20 +50,22 @@ 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(','); - this.dispatchEvent(new CustomEvent('change', { composed: true, bubbles: true })); + // TODO: we maybe should set the alias to null, if no selection? + this.value = submitData?.selection.join(',') ?? ''; + this.dispatchEvent(new UmbChangeEvent()); }) .observeRouteBuilder((routeBuilder) => { this._createRoute = routeBuilder(null); 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/entity-actions/create/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/index.ts index b87999813d..934e7007aa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/entity-actions/create/modal/index.ts @@ -7,7 +7,9 @@ export interface UmbDataTypeCreateOptionsModalData { export const UMB_DATA_TYPE_CREATE_OPTIONS_MODAL = new UmbModalToken( 'Umb.Modal.DataTypeCreateOptions', { - type: 'sidebar', - size: 'small', + modal: { + type: 'sidebar', + size: 'small', + }, }, ); 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..380736a4f3 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 @@ -1,22 +1,21 @@ import { UmbDataTypeDetailRepository } from '../../repository/detail/data-type-detail.repository.js'; import { UmbDataTypeTreeRepository } from '../../tree/data-type-tree.repository.js'; -import { css, html, customElement, property, state, repeat, when } from '@umbraco-cms/backoffice/external/lit'; +import type { UmbDataTypeDetailModel } from '../../types.js'; +import { css, html, customElement, state, repeat, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; 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; + private _dataTypes?: Array; private _propertyEditorUiAlias!: string; @@ -45,8 +44,8 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme await Promise.all( data.items.map((item) => { - if (item.id) { - return dataTypeDetailRepository.requestByUnique(item.id); + if (item.unique) { + return dataTypeDetailRepository.requestByUnique(item.unique); } return Promise.resolve(); }), @@ -59,26 +58,22 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme }); } - private _handleClick(dataType: FolderTreeItemResponseModel) { - if (dataType.id) { - this.modalContext?.submit({ dataTypeId: dataType.id }); + private _handleClick(dataType: UmbDataTypeDetailModel) { + if (dataType.unique) { + this.value = { dataTypeId: dataType.unique }; + this.modalContext?.submit(); } } private _handleCreate() { - this.modalContext?.submit({ createNewWithPropertyEditorUiAlias: this._propertyEditorUiAlias }); + this.value = { createNewWithPropertyEditorUiAlias: this._propertyEditorUiAlias }; + this.modalContext?.submit(); } private _close() { this.modalContext?.reject(); } - @property({ attribute: false }) - modalContext?: UmbModalContext< - UmbDataTypePickerFlowDataTypePickerModalData, - UmbDataTypePickerFlowDataTypePickerModalValue - >; - render() { return html` @@ -92,29 +87,26 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme private _renderDataTypes() { const shouldRender = this._dataTypes && this._dataTypes.length > 0; - console.log(this._dataTypes, 'yo', shouldRender); return when( shouldRender, () => html`
    - ${this._dataTypes - ? repeat( - this._dataTypes, - (dataType) => dataType.id, - (dataType) => - dataType.id - ? html`
  • - -
    - - ${dataType.name} -
    -     -
    • ` - : '', - ) - : ''} + ${repeat( + this._dataTypes!, + (dataType) => dataType.unique, + (dataType) => + dataType.unique + ? html`
  • + +
    + + ${dataType.name} +
    +     +
    • ` + : '', + )}
`, ); } 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..572e32629e 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 @@ -1,5 +1,5 @@ import { UmbDataTypeTreeRepository } from '../../tree/data-type-tree.repository.js'; -import { css, html, repeat, customElement, property, state, when, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, repeat, customElement, state, when, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { @@ -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; @@ -40,9 +33,6 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement { @state() private _groupedPropertyEditorUIs: GroupedItems = {}; - @state() - private _selection: Array = []; - @state() private _submitLabel = 'Select'; @@ -64,14 +54,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 +76,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?.unique); + this._submitModal(); }); this.#init(); @@ -123,12 +116,12 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement { private _handleDataTypeClick(dataType: EntityTreeItemResponseModel) { if (dataType.id) { this._select(dataType.id); - this._submit(); + this._submitModal(); } } - private _select(id: string) { - this._selection = [id]; + private _select(id: string | undefined) { + this.value = { selection: id ? [id] : [] }; } private _handleFilterInput(event: UUIInputEvent) { @@ -142,8 +135,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 +163,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()}
- +
`; @@ -286,7 +271,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement { dataTypes, (dataType) => dataType.id, (dataType) => - html`
  • + html`
  • 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 4fe275bfde..47727fa36a 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 @@ -1,47 +1,39 @@ -import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorUIPickerModalData, UmbPropertyEditorUIPickerModalValue, - UmbModalContext, + UmbModalBaseElement, } from '@umbraco-cms/backoffice/modal'; import { ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; interface GroupedPropertyEditorUIs { [key: string]: Array; } @customElement('umb-property-editor-ui-picker-modal') -export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement { - @property({ type: Object }) - data?: UmbPropertyEditorUIPickerModalData; - +export class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement< + UmbPropertyEditorUIPickerModalData, + UmbPropertyEditorUIPickerModalValue +> { @state() private _groupedPropertyEditorUIs: GroupedPropertyEditorUIs = {}; @state() private _propertyEditorUIs: Array = []; - @state() - private _selection: Array = []; - @state() private _submitLabel = 'Select'; - @property({ attribute: false }) - modalContext?: UmbModalContext; - connectedCallback(): void { super.connectedCallback(); - this._selection = this.data?.selection ?? []; this._submitLabel = this.data?.submitLabel ?? this._submitLabel; - this._usePropertyEditorUIs(); + this.#usePropertyEditorUIs(); } - private _usePropertyEditorUIs() { + #usePropertyEditorUIs() { if (!this.data) return; this.observe(umbExtensionsRegistry.extensionsOfType('propertyEditorUi'), (propertyEditorUIs) => { @@ -60,15 +52,15 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement { }); } - private _handleClick(propertyEditorUi: ManifestPropertyEditorUi) { - this._select(propertyEditorUi.alias); + #handleClick(propertyEditorUi: ManifestPropertyEditorUi) { + this.#select(propertyEditorUi.alias); } - private _select(alias: string) { - this._selection = [alias]; + #select(alias: string) { + this.value = { selection: [alias] }; } - private _handleFilterInput(event: UUIInputEvent) { + #handleFilterInput(event: UUIInputEvent) { let query = (event.target.value as string) || ''; query = query.toLowerCase(); @@ -89,21 +81,17 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement { ); } - private _close() { - this.modalContext?.reject(); - } - - private _submit() { - this.modalContext?.submit({ selection: this._selection }); - } - render() { return html` ${this._renderFilter()} ${this._renderGrid()}
    - - + +
    `; @@ -113,7 +101,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement { return html` @@ -134,8 +122,8 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement { groupItems, (propertyEditorUI) => propertyEditorUI.alias, (propertyEditorUI) => - html`
  • - 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/repository/detail/data-type-detail.store.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/detail/data-type-detail.store.ts index 8c4804ba26..9474ba7d55 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/detail/data-type-detail.store.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/detail/data-type-detail.store.ts @@ -22,7 +22,7 @@ export class UmbDataTypeDetailStore extends UmbDetailStoreBase - items.filter((item) => (item as any).propertyEditorUiAlias === propertyEditorUiAlias), + items.filter((item) => item.propertyEditorUiAlias === propertyEditorUiAlias), ); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type-tree.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type-tree.repository.ts index afd9f23080..aa4bc58b8b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type-tree.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type-tree.repository.ts @@ -15,7 +15,10 @@ export class UmbDataTypeTreeRepository } async requestTreeRoot() { + // TODO: TREE STORE TYPE PROBLEM: + // TODO: This is wrong, either this should be adapted to use unique, or ID. If so the types above should be updated and the UmbTreeRepositoryBase should also be updated to use unique. const data = { + id: null, unique: null, type: UMB_DATA_TYPE_ROOT_ENTITY_TYPE, name: 'Data Types', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/types.ts index d705782db1..05bbca3943 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/types.ts @@ -1,4 +1,4 @@ -import { type DataTypeTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import { DataTypeTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; import type { UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree'; export type UmbDataTypeTreeItemModel = { @@ -10,5 +10,5 @@ export type UmbDataTypeTreeItemModel = { type: string; hasChildren: boolean; }; - -export type UmbDataTypeTreeRootModel = DataTypeTreeItemResponseModel & UmbEntityTreeRootModel; +// TODO: TREE STORE TYPE PROBLEM: +export interface UmbDataTypeTreeRootModel extends Omit, UmbEntityTreeRootModel {} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts index 0850318ae1..f0ee15691b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts @@ -123,6 +123,7 @@ export class UmbDataTypeWorkspaceContext private _mergeConfigProperties() { if (this._propertyEditorSchemaConfigProperties && this._propertyEditorUISettingsProperties) { + // TODO: Consider the ability to to omit a schema config if a UI config has same alias. Otherwise we should make an error when this case happens. this.#properties.next([ ...this._propertyEditorSchemaConfigProperties, ...this._propertyEditorUISettingsProperties, @@ -237,8 +238,6 @@ export class UmbDataTypeWorkspaceContext async propertyValueByAlias(propertyAlias: string) { await this.#getDataPromise; - // TODO: Merge map.. - return combineLatest([ this.#data.asObservablePart((data) => data?.values?.find((x) => x.alias === propertyAlias)?.value as ReturnType), this.#defaults.asObservablePart( @@ -249,7 +248,6 @@ export class UmbDataTypeWorkspaceContext return value ?? defaultValue; }), ); - //return this.#data.asObservablePart((data) => data?.values?.find((x) => x.alias === propertyAlias)?.value ?? this.getPropertyDefaultValue(propertyAlias) as ReturnType); } getPropertyValue(propertyAlias: string) { 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..32a3413883 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,14 @@ 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) => { + console.log('got', 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/extension-registry/models/modal.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/modal.model.ts index 4fd1190e96..4c281e3852 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/modal.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/modal.model.ts @@ -2,6 +2,8 @@ import type { UmbModalExtensionElement } from '../interfaces/modal-extension-ele import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api'; export interface ManifestModal - extends ManifestElement | UmbModalExtensionElement> { + extends ManifestElement< + UmbModalExtensionElement | UmbModalExtensionElement | UmbModalExtensionElement + > { type: 'modal'; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/store.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/store.model.ts index f50dee13ae..870dc4b06e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/store.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/store.model.ts @@ -5,8 +5,8 @@ import { type UmbTreeStore } from '@umbraco-cms/backoffice/tree'; export interface ManifestStore extends ManifestApi { type: 'store'; } - -export interface ManifestTreeStore extends ManifestApi { +// TODO: TREE STORE TYPE PROBLEM: Provide a base tree item type? +export interface ManifestTreeStore extends ManifestApi> { type: 'treeStore'; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/index.ts index ee42c05a4c..21661c1e53 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/index.ts @@ -12,9 +12,8 @@ import { manifests as conditionManifests } from './extension-registry/conditions import { manifests as cultureManifests } from './culture/manifests.js'; import { manifests as dataTypeManifests } from './data-type/manifests.js'; -import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification'; -import { UmbModalManagerContext, UMB_MODAL_MANAGER_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal'; -import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api'; +import { UmbNotificationContext } from '@umbraco-cms/backoffice/notification'; +import { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; import { UmbExtensionsApiInitializer, type UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api'; import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; @@ -73,6 +72,6 @@ export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => { const modalContainerElement = new UmbBackofficeModalContainerElement(); host.appendChild(modalContainerElement); - new UmbContextProviderController(host, UMB_NOTIFICATION_CONTEXT_TOKEN, new UmbNotificationContext()); - new UmbContextProviderController(host, UMB_MODAL_MANAGER_CONTEXT_TOKEN, new UmbModalManagerContext(host)); + new UmbNotificationContext(host); + new UmbModalManagerContext(host); }; 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..2a1c8bd9b8 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..c7495d0420 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 @@ -16,20 +16,11 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement { + (this._link as any) = value.link; + this._selectedKey = this._link?.udi ? getKeyFromUdi(this._link.udi) : undefined; + }); + } + this._layout = this.data?.config; } - private _handleQueryString() { + #handleQueryString() { if (!this._linkQueryInput) return; const query = this._linkQueryInput.value as string; if (query.startsWith('#') || query.startsWith('?')) { - this._link.queryString = query; + this.#partialUpdateLink({ queryString: query }); return; } if (query.includes('=')) { - this._link.queryString = `?${query}`; + this.#partialUpdateLink({ queryString: `#${query}` }); } else { - this._link.queryString = `#${query}`; + this.#partialUpdateLink({ queryString: `#${query}` }); } } - private _handleSelectionChange(e: CustomEvent, entityType: string) { + #handleSelectionChange(e: CustomEvent, entityType: string) { //TODO: Update icon, published, trashed e.stopPropagation(); const element = e.target as UmbTreeElement; const selectedKey = element.selection[element.selection.length - 1]; if (!selectedKey) { - this._link.url = ''; - this._link.udi = undefined; + this.#partialUpdateLink({ udi: '', url: undefined }); this._selectedKey = undefined; this.requestUpdate(); return; @@ -96,17 +88,12 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement) { + this.modalContext?.updateValue({ link: { ...this._link, ...linkObject } }); } render() { @@ -120,7 +107,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement (this._link.name = this._linkTitleInput.value as string)} + @input=${() => this.#partialUpdateLink({ name: this._linkTitleInput.value as string })} .value="${this._link.name ?? ''}"> ${this.localize.term('content_target')} @@ -129,7 +116,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement + this.#partialUpdateLink({ target: e.target.checked ? '_blank' : '' })}"> ${this.localize.term('defaultdialogs_openInNewWindow')} @@ -138,12 +125,12 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement
    - + + @click=${this._submitModal}>
    `; @@ -157,7 +144,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement (this._link.url = this._linkInput.value as string)} + @input=${() => this.#partialUpdateLink({ url: this._linkInput.value as string })} ?disabled="${this._link.udi ? true : false}"> `; } @@ -170,7 +157,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement `; } @@ -192,7 +179,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement this._handleSelectionChange(event, 'document')} + @selection-change=${(event: CustomEvent) => this.#handleSelectionChange(event, 'document')} .selection=${[this._selectedKey ?? '']} selectable> @@ -207,7 +194,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement this._handleSelectionChange(event, 'media')} + @selection-change=${(event: CustomEvent) => this.#handleSelectionChange(event, 'media')} .selection=${[this._selectedKey ?? '']} selectable> diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts index a3d04cb499..d9963c9e03 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts @@ -17,10 +17,10 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< > { //TODO: Should these options come from the server? // TODO: Or should they come from a extension point? - @state() private _customValidationOptions = [ + @state() private _customValidationOptions: Array     = [ type: 'modal', alias: 'Umb.Modal.ExamineFieldsSettings', name: 'Examine Field Settings Modal', - js: () => import('./examine-management-dashboard/views/modal-views/fields-settings.element.js'), + js: () => import('./examine-management-dashboard/views/modal-views/fields-settings-modal.element.js'), }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.element.ts index b6bbbb3ee0..9b38810983 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/dashboards/published-status/dashboard-published-status.element.ts @@ -72,10 +72,12 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement { } private async _onReloadCacheHandler() { const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, { - headline: 'Reload', - content: html` Trigger a in-memory and local file cache reload on all servers.`, - color: 'danger', - confirmLabel: 'Continue', + data: { + headline: 'Reload', + content: html` Trigger a in-memory and local file cache reload on all servers.`, + color: 'danger', + confirmLabel: 'Continue', + }, }); modalContext?.onSubmit().then(() => { this._reloadMemoryCache(); @@ -95,10 +97,12 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement { private async _onRebuildCacheHandler() { const modalContex = this._modalContext?.open(UMB_CONFIRM_MODAL, { - headline: 'Rebuild', - content: html` Rebuild content in cmsContentNu database table. Expensive.`, - color: 'danger', - confirmLabel: 'Continue', + data: { + headline: 'Rebuild', + content: html` Rebuild content in cmsContentNu database table. Expensive.`, + color: 'danger', + confirmLabel: 'Continue', + }, }); modalContex?.onSubmit().then(() => { this._rebuildDatabaseCache(); @@ -118,10 +122,12 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement { private async _onSnapshotCacheHandler() { const modalContex = this._modalContext?.open(UMB_CONFIRM_MODAL, { - headline: 'Snapshot', - content: html` Trigger a NuCache snapshots collection.`, - color: 'danger', - confirmLabel: 'Continue', + data: { + headline: 'Snapshot', + content: html` Trigger a NuCache snapshots collection.`, + color: 'danger', + confirmLabel: 'Continue', + }, }); modalContex?.onSubmit().then(() => { this._cacheCollect(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/extensions/workspace/extension-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/extensions/workspace/extension-root-workspace.element.ts index 387950c4bc..24ac727cf4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/extensions/workspace/extension-root-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/extensions/workspace/extension-root-workspace.element.ts @@ -1,6 +1,5 @@ import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { map } from '@umbraco-cms/backoffice/external/rxjs'; -import { isManifestElementNameType } from '@umbraco-cms/backoffice/extension-api'; import { ManifestTypes, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { @@ -48,10 +47,12 @@ export class UmbExtensionRootWorkspaceElement extends UmbLitElement { async #removeExtension(extension: ManifestTypes) { const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, { - headline: 'Unload extension', - confirmLabel: 'Unload', - content: html`

    Are you sure you want to unload the extension ${extension.alias}?

    `, - color: 'danger', + data: { + headline: 'Unload extension', + confirmLabel: 'Unload', + content: html`

    Are you sure you want to unload the extension ${extension.alias}?

    `, + color: 'danger', + }, }); await modalContext?.onSubmit(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts index a83e66e5eb..dcce820c0d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts @@ -23,7 +23,7 @@ export class UmbLanguagePickerModalElement extends UmbModalBaseElement< connectedCallback(): void { super.connectedCallback(); this.#selectionManager.setMultiple(this.data?.multiple ?? false); - this.#selectionManager.setSelection(this.data?.selection ?? []); + this.#selectionManager.setSelection(this.value?.selection ?? []); } async firstUpdated() { @@ -40,7 +40,8 @@ export class UmbLanguagePickerModalElement extends UmbModalBaseElement< } #submit() { - this.modalContext?.submit({ selection: this.#selectionManager.getSelection() }); + this.value = { selection: this.#selectionManager.getSelection() }; + this.modalContext?.submit(); } #close() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/types.ts index 2e23aec82d..53a5c45db4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/types.ts @@ -1,5 +1,6 @@ import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree'; -export type UmbRelationTypeTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel; -export type UmbRelationTypeTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel; +export interface UmbRelationTypeTreeItemModel extends EntityTreeItemResponseModel, UmbEntityTreeItemModel {} +// TODO: TREE STORE TYPE PROBLEM: +export interface UmbRelationTypeTreeRootModel extends Omit, UmbEntityTreeRootModel {} diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts index 03c9551732..cacdd87ed4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts @@ -19,8 +19,10 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModalToken<{ hidePartialView: boolean }>( UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS, { - type: 'sidebar', - size: 'small', + modal: { + type: 'sidebar', + size: 'small', + }, }, ); @@ -75,7 +77,9 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { #openChooseTypeModal = () => { 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 +97,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..20fd2681c3 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..22017d6972 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 @@ -11,8 +11,10 @@ import type { UmbInsertSectionCheckboxElement } from './insert-section-input.ele export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken( UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS, { - type: 'sidebar', - size: 'small', + modal: { + type: 'sidebar', + size: 'small', + }, }, ); @@ -64,7 +66,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..170197832b 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/partial-views/entity-actions/create/create-from-snippet.action.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts index 97fa02b582..30deca1f78 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts @@ -13,7 +13,9 @@ export type UmbConfirmModalValue = undefined; export const UMB_PARTIAL_VIEW_FROM_SNIPPET_MODAL = new UmbModalToken( 'Umb.Modal.CreateFromSnippetPartialView', { - type: 'sidebar', + modal: { + type: 'sidebar', + }, }, ); @@ -34,7 +36,9 @@ export class UmbCreateFromSnippetPartialViewAction< const snippets = (await this.repository?.getSnippets({}))?.data?.items ?? []; const modalContext = this.#modalContext?.open(UMB_PARTIAL_VIEW_FROM_SNIPPET_MODAL, { - snippets, + data: { + snippets, + }, }); await modalContext?.onSubmit().then((snippetName) => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts index 5f206b4bf3..850cbd7492 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.modal.ts @@ -18,7 +18,8 @@ export default class UmbPartialViewCreateFromSnippetModalElement extends UmbModa } private _submit(snippetName: string) { - this.modalContext?.submit(snippetName); + this.value = snippetName; + this.modalContext?.submit(); } private _close() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/script-tree.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/script-tree.repository.ts index 6f7de6ac04..8051f32437 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/script-tree.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/script-tree.repository.ts @@ -6,8 +6,9 @@ import { UmbTreeRepositoryBase } from '@umbraco-cms/backoffice/tree'; import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbApi } from '@umbraco-cms/backoffice/extension-api'; +// TODO: TREE STORE TYPE PROBLEM: export class UmbPartialViewTreeRepository - extends UmbTreeRepositoryBase + extends UmbTreeRepositoryBase implements UmbApi { constructor(host: UmbControllerHost) { @@ -16,6 +17,7 @@ export class UmbPartialViewTreeRepository async requestTreeRoot() { const data = { + id: null, path: null, type: UMB_PARTIAL_VIEW_ROOT_ENTITY_TYPE, name: 'Partial Views', diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/types.ts index 12d204e262..bd45db855f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/types.ts @@ -1,5 +1,8 @@ import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api'; import type { UmbFileSystemTreeItemModel, UmbFileSystemTreeRootModel } from '@umbraco-cms/backoffice/tree'; -export type UmbPartialViewTreeItemModel = FileSystemTreeItemPresentationModel & UmbFileSystemTreeItemModel; -export type UmbPartialViewTreeRootModel = FileSystemTreeItemPresentationModel & UmbFileSystemTreeRootModel; +export interface UmbPartialViewTreeItemModel extends FileSystemTreeItemPresentationModel, UmbFileSystemTreeItemModel {} +// TODO: TREE STORE TYPE PROBLEM: +export interface UmbPartialViewTreeRootModel + extends Omit, + UmbFileSystemTreeRootModel {} diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/script-tree.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/script-tree.repository.ts index 7d51664995..0f9956147f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/script-tree.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/script-tree.repository.ts @@ -6,8 +6,9 @@ import { UmbTreeRepositoryBase } from '@umbraco-cms/backoffice/tree'; import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbApi } from '@umbraco-cms/backoffice/extension-api'; +// TODO: TREE STORE TYPE PROBLEM: export class UmbScriptTreeRepository - extends UmbTreeRepositoryBase + extends UmbTreeRepositoryBase implements UmbApi { constructor(host: UmbControllerHost) { @@ -16,6 +17,7 @@ export class UmbScriptTreeRepository async requestTreeRoot() { const data = { + id: null, path: null, type: UMB_SCRIPT_ROOT_ENTITY_TYPE, name: 'Scripts', diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/types.ts index 1bfe8c74f3..7bd5589744 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/types.ts @@ -1,5 +1,8 @@ import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api'; import type { UmbFileSystemTreeItemModel, UmbFileSystemTreeRootModel } from '@umbraco-cms/backoffice/tree'; -export type UmbScriptTreeItemModel = FileSystemTreeItemPresentationModel & UmbFileSystemTreeItemModel; -export type UmbScriptTreeRootModel = FileSystemTreeItemPresentationModel & UmbFileSystemTreeRootModel; +export interface UmbScriptTreeItemModel extends FileSystemTreeItemPresentationModel, UmbFileSystemTreeItemModel {} +// TODO: TREE STORE TYPE PROBLEM: +export interface UmbScriptTreeRootModel + extends Omit, 'path'>, + UmbFileSystemTreeRootModel {} 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..6893cbbbe2 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 @@ -1,15 +1,14 @@ -import { UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js'; +import { UMB_STYLESHEET_WORKSPACE_CONTEXT, UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js'; import { UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL } from './stylesheet-workspace-view-rich-text-editor.element.js'; import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { RichTextRuleModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; @customElement('umb-stylesheet-rich-text-editor-rule') export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElement { - @property({ type: Object, attribute: false }) + @property({ attribute: false }) private rule: RichTextRuleModel | null = null; #context?: UmbStylesheetWorkspaceContext; @@ -18,8 +17,8 @@ export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElemen constructor() { super(); - this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => { - this.#context = workspaceContext as UmbStylesheetWorkspaceContext; + this.consumeContext(UMB_STYLESHEET_WORKSPACE_CONTEXT, (workspaceContext) => { + this.#context = workspaceContext; }); this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => { @@ -27,30 +26,32 @@ export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElemen }); } - openModal = () => { + #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) { - this.#context?.updateRule(this.rule?.name, result.rule); + modal?.onSubmit().then((value) => { + if (value.rule && this.rule?.name) { + this.#context?.updateRule(this.rule?.name, value.rule); } }); - }; + } - removeRule = () => { + #removeRule() { //TODO: SPORTER BREAKS THAT - rules are removed from the data but not from the DOM if (!this.#context) throw new Error('Context not found'); this.#context.setRules(this.#context.getRules().filter((r) => r.name !== this.rule?.name)); - }; + } render() { return html`
    ${this.rule?.name}
    - EditRemove + EditRemove
    `; } 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..de0dae3598 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 @@ -2,60 +2,47 @@ import { RichTextRuleModelSortable } from '../../stylesheet-workspace.context.js import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, ifDefined, state } from '@umbraco-cms/backoffice/external/lit'; 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.updateValue({ + rule: { + ...this.value.rule, + name, + }, + }); } #updateSelector(event: Event) { const selector = (event.target as HTMLInputElement).value; - this._rule = { - ...this._rule, - selector, - }; + this.updateValue({ + rule: { + ...this.value.rule, + selector, + }, + }); } #updateStyles(event: Event) { const styles = (event.target as HTMLInputElement).value; - this._rule = { - ...this._rule, - styles, - }; + this.updateValue({ + rule: { + ...this.value.rule, + styles, + }, + }); } render() { @@ -71,7 +58,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod @@ -83,7 +70,7 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod @@ -98,14 +85,14 @@ export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbMod @input=${this.#updateStyles} id="styles" name="styles" - .value=${this._rule?.styles ?? ''} + .value=${this.value.rule?.styles ?? ''} label="Rule styles"> Preview How the text will look like in the rich text editor. -
    +
    a b c d e f g h i j k l m n o p q r s t u v w x t z
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z @@ -120,8 +107,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..005410cbcb 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,11 +12,14 @@ 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 + never, + StylesheetRichTextEditorStyleModalValue >(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR, { - type: 'sidebar', - size: 'medium', + modal: { + type: 'sidebar', + size: 'medium', + }, + value: { rule: null }, }); const SORTER_CONFIG: UmbSorterConfig = { @@ -73,7 +73,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/modal-tokens.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts index 415580d215..3ab0c31a21 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts @@ -9,6 +9,8 @@ export const UMB_TEMPLATE_QUERY_BUILDER_MODAL = new UmbModalToken< TemplateQueryBuilderModalData, UmbTemplateQueryBuilderModalValue >(UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS, { - type: 'sidebar', - size: 'large', + modal: { + type: 'sidebar', + size: 'large', + }, }); 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..2dfc812ce9 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/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/types.ts index 7920555892..8090445e68 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/types.ts @@ -1,5 +1,6 @@ import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree'; -export type UmbTemplateTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel; -export type UmbTemplateTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel; +export interface UmbTemplateTreeItemModel extends EntityTreeItemResponseModel, UmbEntityTreeItemModel {} +// TODO: TREE STORE TYPE PROBLEM: +export interface UmbTemplateTreeRootModel extends Omit, UmbEntityTreeRootModel {} 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..4b6f32389b 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-group/modals/user-group-picker/user-group-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts index 88af248707..7cd074e9e6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts @@ -1,14 +1,16 @@ import { UmbUserGroupCollectionRepository } from '../../collection/repository/index.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; -import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; +import { UMB_USER_GROUP_PICKER_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api'; import { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui'; import { UmbSelectedEvent, UmbDeselectedEvent } from '@umbraco-cms/backoffice/event'; - @customElement('umb-user-group-picker-modal') -export class UmbUserGroupPickerModalElement extends UmbModalBaseElement { +export class UmbUserGroupPickerModalElement extends UmbModalBaseElement< + (typeof UMB_USER_GROUP_PICKER_MODAL)['DATA'], + (typeof UMB_USER_GROUP_PICKER_MODAL)['VALUE'] +> { @state() private _userGroups: Array = []; @@ -20,7 +22,8 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement this.updateValue({ selection }), 'selectionObserver'); } protected firstUpdated(): void { @@ -37,7 +40,6 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement @@ -81,14 +70,14 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement
    - - + +
    `; } - static styles = [UmbTextStyles, css``]; + static styles = [UmbTextStyles]; } export default UmbUserGroupPickerModalElement; 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..1c049604f4 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 { - constructor(host: UmbControllerHostElement) { +export class UmbUserPickerContext extends UmbPickerInputContext { + constructor(host: UmbControllerHost) { super(host, UMB_USER_ITEM_REPOSITORY_ALIAS, UMB_USER_PICKER_MODAL); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/change-password/change-user-password.action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/change-password/change-user-password.action.ts index b212db0b06..46aac1f7a9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/change-password/change-user-password.action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/change-password/change-user-password.action.ts @@ -22,7 +22,9 @@ export class UmbChangeUserPasswordEntityAction extends UmbEntityActionBase('Umb.Modal.User.Invite', { + modal: { + type: 'dialog', + size: 'small', + }, }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts index a58dd10034..5698809f97 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/resend-invite/resend-invite-to-user-modal.token.ts @@ -4,12 +4,14 @@ export type UmbResendInviteToUserModalData = { userId: string; }; -export type UmbResendInviteToUserModalValue = undefined; +export type UmbResendInviteToUserModalValue = never; export const UMB_RESEND_INVITE_TO_USER_MODAL = new UmbModalToken< UmbResendInviteToUserModalData, UmbResendInviteToUserModalValue >('Umb.Modal.User.Invite.Resend', { - type: 'dialog', - size: 'small', + modal: { + type: 'dialog', + size: 'small', + }, }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/user-create-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/user-create-modal.element.ts index 17351c117b..93c7065398 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/user-create-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/user-create-modal.element.ts @@ -57,8 +57,10 @@ export class UmbUserCreateModalElement extends UmbModalBaseElement { #openSuccessModal(userId: string, initialPassword: string) { const modalContext = this.#modalManagerContext?.open(UMB_CREATE_USER_SUCCESS_MODAL, { - userId, - initialPassword, + data: { + userId, + initialPassword, + }, }); modalContext?.onSubmit().catch((reason) => { 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..2960354e57 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( 'Our.Modal.SomethingPicker', { - type: 'sidebar', - size: 'small', + config: { + type: 'sidebar', + size: 'small', + }, }, ); ``` diff --git a/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx b/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx index c3a737762e..fffcca25be 100644 --- a/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx +++ b/src/Umbraco.Web.UI.Client/storybook/stories/modal/modal.mdx @@ -129,12 +129,12 @@ descripe the addional features of the route Registration: index = null; } - return { + return { data: { index: index, itemData: { name: data?.name }, - }; + }}; }) .onSubmit((submitData) => { if (!submitData) return; @@ -189,10 +189,10 @@ class MyElement extends UmbElementMixin(LitElement) { #onClick() { const data = {'data goes here'}; - const options {'options go here'}; - const modalContext = this.#modalManagerContext?.open(MY_MODAL_TOKEN), data, options); + const value = {'initial value go here'}; + const modalContext = this.#modalManagerContext?.open(MY_MODAL_TOKEN), {data: data, value: value}); - modalContext?.onSubmit().then((data) => { + modalContext?.onSubmit().then((value) => { // if modal submitted, then data is supplied here. }); } @@ -229,13 +229,15 @@ interface MyModalData = { } interface MyModalValue = { - myReturnData: string; + myData: string; } -const MY_MODAL_TOKEN = new ModalToken('My.Modal', { - type: 'sidebar', - size: 'small' -}); +const MY_MODAL_TOKEN = new ModalToken('My.Modal', + config: { + type: 'sidebar', + size: 'small' + } +); ``` The Modal element @@ -255,9 +257,9 @@ 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' }); + /* Value is set on modal context. and then parsed on to the consumer of the submit promise. */ + this.modalContext?.setValue({ myData: 'hello world' }); + this.modalContext?.submit(); } render() {