yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rename modal result to modal value to align naming

Browse Source
This commit is contained in:
Mads Rasmussen
2023-09-25 20:13:35 +02:00
parent 631582b493
commit c4160a75e5
67 changed files with 302 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/packages/core/components/input-list-base/input-list-base.ts
View File

@@ -5,7 +5,7 @@ import {
UmbModalToken,
UmbModalType,
UMB_MODAL_MANAGER_CONTEXT_TOKEN,
UmbPickerModalResult,
UmbPickerModalValue,
} from '@umbraco-cms/backoffice/modal';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -42,7 +42,7 @@ export class UmbInputListBaseElement extends UmbLitElement {
selection: this.value,
});
modalContext?.onSubmit().then((data: UmbPickerModalResult) => {
modalContext?.onSubmit().then((data: UmbPickerModalValue) => {
if (data) {
this.value = data.selection?.filter((id) => id !== null && id !== undefined) as Array<string>;
this.selectionUpdated();

6
src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/modal-extension-element.interface.ts
View File

@@ -3,12 +3,12 @@ import type { UmbModalContext } from '@umbraco-cms/backoffice/modal';
export interface UmbModalExtensionElement<
UmbModalData extends object = object,
UmbModalResult = unknown,
ModalManifestType extends ManifestModal = ManifestModal
UmbModalValue = unknown,
ModalManifestType extends ManifestModal = ManifestModal,
> extends HTMLElement {
manifest?: ModalManifestType;
modalContext?: UmbModalContext<UmbModalData, UmbModalResult>;
modalContext?: UmbModalContext<UmbModalData, UmbModalValue>;
data?: UmbModalData;
}

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts
View File

@@ -1,12 +1,12 @@
import { css, html, ifDefined, customElement, query } from '@umbraco-cms/backoffice/external/lit';
import { loadCodeEditor, type UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
import { UmbCodeEditorModalData, UmbCodeEditorModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbCodeEditorModalData, UmbCodeEditorModalValue } from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
@customElement('umb-code-editor-modal')
export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditorModalData, UmbCodeEditorModalResult> {
export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditorModalData, UmbCodeEditorModalValue> {
#isCodeEditorReady = new UmbBooleanState(false);
isCodeEditorReady = this.#isCodeEditorReady.asObservable();

6
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.element.ts
View File

@@ -1,12 +1,12 @@
import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbConfirmModalData, UmbConfirmModalResult, UmbModalContext } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbConfirmModalData, UmbConfirmModalValue, UmbModalContext } from '@umbraco-cms/backoffice/modal';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@customElement('umb-confirm-modal')
export class UmbConfirmModalElement extends UmbLitElement {
@property({ attribute: false })
modalContext?: UmbModalContext<UmbConfirmModalData, UmbConfirmModalResult>;
modalContext?: UmbModalContext<UmbConfirmModalData, UmbConfirmModalValue>;
@property({ type: Object })
data?: UmbConfirmModalData;

28
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts
View File

@@ -1,10 +1,10 @@
import { css, html, unsafeHTML, when, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import {
OEmbedResult,
OEmbedStatus,
UmbEmbeddedMediaModalData,
UmbEmbeddedMediaModalResult,
UmbEmbeddedMediaModalValue,
} from '@umbraco-cms/backoffice/modal';
import { umbracoPath } from '@umbraco-cms/backoffice/utils';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
@@ -23,7 +23,7 @@ interface UmbEmbeddedMediaModalModel {
@customElement('umb-embedded-media-modal')
export class UmbEmbeddedMediaModalElement extends UmbModalBaseElement<
UmbEmbeddedMediaModalData,
UmbEmbeddedMediaModalResult
UmbEmbeddedMediaModalValue
> {
#loading = false;
#embedResult!: OEmbedResult;
@@ -77,7 +77,7 @@ export class UmbEmbeddedMediaModalElement extends UmbModalBaseElement<
url: this._model.url,
width: this._model.width?.toString(),
height: this._model.height?.toString(),
} as { [key: string]: string })
} as { [key: string]: string }),
);
this.#embedResult = await result.json();
@@ -179,14 +179,18 @@ export class UmbEmbeddedMediaModalElement extends UmbModalBaseElement<
${when(
this.#embedResult?.oEmbedStatus === OEmbedStatus.Success || this._model.a11yInfo,
() => html` <umb-workspace-property-layout label="Preview" orientation="vertical">
<div slot="editor">
${when(this.#loading, () => html`<uui-loader-circle></uui-loader-circle>`)}
${when(this.#embedResult?.markup, () => html`${unsafeHTML(this.#embedResult.markup)}`)}
${when(this._model.info, () => html` <p aria-hidden="true">${this._model.info}</p>`)}
${when(this._model.a11yInfo, () => html` <p class="sr-only" role="alert">${this._model.a11yInfo}</p>`)}
</div>
</umb-workspace-property-layout>`
() =>
html` <umb-workspace-property-layout label="Preview" orientation="vertical">
<div slot="editor">
${when(this.#loading, () => html`<uui-loader-circle></uui-loader-circle>`)}
${when(this.#embedResult?.markup, () => html`${unsafeHTML(this.#embedResult.markup)}`)}
${when(this._model.info, () => html` <p aria-hidden="true">${this._model.info}</p>`)}
${when(
this._model.a11yInfo,
() => html` <p class="sr-only" role="alert">${this._model.a11yInfo}</p>`,
)}
</div>
</umb-workspace-property-layout>`,
)}
<umb-workspace-property-layout label="Width" orientation="vertical">

8
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/folder/folder-modal.element.ts
View File

@@ -1,6 +1,6 @@
import { css, html, customElement, property, query, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbFolderModalData, UmbFolderModalResult, UmbModalContext } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbFolderModalData, UmbFolderModalValue, UmbModalContext } from '@umbraco-cms/backoffice/modal';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbFolderRepository } from '@umbraco-cms/backoffice/repository';
import { createExtensionClass, ManifestBase } from '@umbraco-cms/backoffice/extension-api';
@@ -11,7 +11,7 @@ import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registr
@customElement('umb-folder-modal')
export class UmbFolderModalElement extends UmbLitElement {
@property({ attribute: false })
modalContext?: UmbModalContext<UmbFolderModalData, UmbFolderModalResult>;
modalContext?: UmbModalContext<UmbFolderModalData, UmbFolderModalValue>;
private _data?: UmbFolderModalData;
@property({ type: Object, attribute: false })
@@ -56,7 +56,7 @@ export class UmbFolderModalElement extends UmbLitElement {
} catch (error) {
throw new Error('Could not create repository with alias: ' + this.#repositoryAlias + '');
}
}
},
);
}

11
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
View File

@@ -2,15 +2,15 @@ import icons from '../../../../../shared/icon-registry/icons/icons.json' assert
import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui';
import { css, html, styleMap, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbIconPickerModalData, UmbIconPickerModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbIconPickerModalData, UmbIconPickerModalValue } from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
// TODO: Make use of UmbPickerLayoutBase
// TODO: to prevent element extension we need to move the Picker logic into a separate class we can reuse across all pickers
@customElement('umb-icon-picker-modal')
export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPickerModalData, UmbIconPickerModalResult> {
export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPickerModalData, UmbIconPickerModalValue> {
private _iconList = icons.map((icon) => icon.name);
@state()
@@ -90,8 +90,9 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
label="Color switcher for icons"
@change="${this._onColorChange}">
${this._colorList.map(
(color) =>
html` <uui-color-swatch label="${color}" title="${color}" value="${color}"></uui-color-swatch> `
(color) => html`
<uui-color-swatch label="${color}" title="${color}" value="${color}"></uui-color-swatch>
`,
)}
</uui-color-swatches>

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
View File

@@ -5,13 +5,13 @@ import {
UmbLinkPickerConfig,
UmbLinkPickerLink,
UmbLinkPickerModalData,
UmbLinkPickerModalResult,
UmbLinkPickerModalValue,
} from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { buildUdi, getKeyFromUdi } from '@umbraco-cms/backoffice/utils';
@customElement('umb-link-picker-modal')
export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPickerModalData, UmbLinkPickerModalResult> {
export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPickerModalData, UmbLinkPickerModalValue> {
@state()
_selectedKey?: string;

48
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
View File

@@ -1,12 +1,8 @@
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import {
UUIBooleanInputEvent,
UUIInputEvent,
UUISelectEvent,
} from '@umbraco-cms/backoffice/external/uui';
import { UUIBooleanInputEvent, UUIInputEvent, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
import { PropertyValueMap, css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { UmbPropertySettingsModalResult, UmbPropertySettingsModalData } from '@umbraco-cms/backoffice/modal';
import { UmbPropertySettingsModalValue, UmbPropertySettingsModalData } from '@umbraco-cms/backoffice/modal';
import { generateAlias } from '@umbraco-cms/backoffice/utils';
import { UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/document-type';
// TODO: Could base take a token to get its types?.
@@ -14,7 +10,7 @@ import { UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/d
@customElement('umb-property-settings-modal')
export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
UmbPropertySettingsModalData,
UmbPropertySettingsModalResult
UmbPropertySettingsModalValue
> {
//TODO: Should these options come from the server?
// TODO: Or should they come from a extension point?
@@ -45,20 +41,24 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
@state() private _aliasLocked = true;
@state()
protected _ownerDocumentType?: UmbPropertySettingsModalResult;
protected _ownerDocumentType?: UmbPropertySettingsModalValue;
@state()
protected _returnData!: UmbPropertySettingsModalResult;
protected _returnData!: UmbPropertySettingsModalValue;
connectedCallback(): void {
super.connectedCallback();
// TODO: This is actually not good enough, we need to be able to get to the DOCUMENT_WORKSPACE_CONTEXT, so we can have a look at the draft/runtime version of the document. Otherwise 'Vary by culture' is first updated when saved.
this.consumeContext(UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN, (instance) => {
this.observe(instance.byId(this.data?.documentTypeId), (documentType) => {
this._ownerDocumentType = documentType;
this.requestUpdate('_ownerDocumentType');
}, '_observeDocumentType');
this.observe(
instance.byId(this.data?.documentTypeId),
(documentType) => {
this._ownerDocumentType = documentType;
this.requestUpdate('_ownerDocumentType');
},
'_observeDocumentType',
);
});
this._returnData = JSON.parse(JSON.stringify(this.data?.propertyData ?? {}));
@@ -332,21 +332,19 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
}
#renderVariationControls() {
return this._ownerDocumentType?.variesByCulture || this._ownerDocumentType?.variesBySegment ?
html`
<div class="container">
<b>Variation</b>
${this._ownerDocumentType?.variesByCulture ? this.#renderVaryByCulture() : ''}
</div>
<hr />`
: '';
return this._ownerDocumentType?.variesByCulture || this._ownerDocumentType?.variesBySegment
? html` <div class="container">
<b>Variation</b>
${this._ownerDocumentType?.variesByCulture ? this.#renderVaryByCulture() : ''}
</div>
<hr />`
: '';
}
#renderVaryByCulture() {
return html`<uui-toggle
@change=${this.#onVaryByCultureChange}
.checked=${this._returnData.variesByCulture ?? false}
label="Vary by culture"></uui-toggle>
`;
@change=${this.#onVaryByCultureChange}
.checked=${this._returnData.variesByCulture ?? false}
label="Vary by culture"></uui-toggle> `;
}
static styles = [

10
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/section-picker/section-picker-modal.element.ts
View File

@@ -1,14 +1,14 @@
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbSelectionManagerBase } from '@umbraco-cms/backoffice/utils';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { ManifestSection, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { UmbSectionPickerModalData, UmbSectionPickerModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbSectionPickerModalData, UmbSectionPickerModalValue } from '@umbraco-cms/backoffice/modal';
@customElement('umb-section-picker-modal')
export class UmbSectionPickerModalElement extends UmbModalBaseElement<
UmbSectionPickerModalData,
UmbSectionPickerModalResult
UmbSectionPickerModalValue
> {
@state()
private _sections: Array<ManifestSection> = [];
@@ -34,7 +34,7 @@ export class UmbSectionPickerModalElement extends UmbModalBaseElement<
this.observe(
umbExtensionsRegistry.extensionsOfType('section'),
(sections: Array<ManifestSection>) => (this._sections = sections)
(sections: Array<ManifestSection>) => (this._sections = sections),
);
}
@@ -50,7 +50,7 @@ export class UmbSectionPickerModalElement extends UmbModalBaseElement<
?selected=${this.#selectionManager.isSelected(item.alias)}
@selected=${() => this.#selectionManager.select(item.alias)}
@deselected=${() => this.#selectionManager.deselect(item.alias)}></uui-menu-item>
`
`,
)}
</uui-box>
<div slot="actions">

6
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/template/template-modal.element.ts
View File

@@ -1,7 +1,7 @@
import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
import { css, html, ifDefined, customElement, query, state } from '@umbraco-cms/backoffice/external/lit';
import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
import { UmbTemplateModalData, UmbTemplateModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbTemplateModalData, UmbTemplateModalValue } from '@umbraco-cms/backoffice/modal';
import { UmbInputEvent } from '@umbraco-cms/backoffice/events';
import { TemplateResource, TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
@@ -10,7 +10,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
//TODO: make a default tree-picker that can be used across multiple pickers
// TODO: make use of UmbPickerLayoutBase
@customElement('umb-template-modal')
export class UmbTemplateModalElement extends UmbModalBaseElement<UmbTemplateModalData, UmbTemplateModalResult> {
export class UmbTemplateModalElement extends UmbModalBaseElement<UmbTemplateModalData, UmbTemplateModalValue> {
@state()
_id = '';
@@ -41,7 +41,7 @@ export class UmbTemplateModalElement extends UmbModalBaseElement<UmbTemplateModa
async #saveTemplate() {
const { error } = await tryExecuteAndNotify(
this,
TemplateResource.putTemplateById({ id: this._id, requestBody: this._template })
TemplateResource.putTemplateById({ id: this._id, requestBody: this._template }),
);
if (!error) {
console.log(`template (${this._id}) saved successfully`);

6
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
View File

@@ -1,14 +1,14 @@
import type { UmbTreeElement } from '../../../tree/tree.element.js';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTreePickerModalData, UmbPickerModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbTreePickerModalData, UmbPickerModalValue } from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
@customElement('umb-tree-picker-modal')
export class UmbTreePickerModalElement<TreeItemType extends TreeItemPresentationModel> extends UmbModalBaseElement<
UmbTreePickerModalData<TreeItemType>,
UmbPickerModalResult
UmbPickerModalValue
> {
@state()
_selection: Array<string | null> = [];

2
src/Umbraco.Web.UI.Client/src/packages/core/modal/modal.interfaces.ts
View File

@@ -4,7 +4,7 @@ export interface UmbPickerModalData<ItemType> {
filter?: (item: ItemType) => boolean;
pickableFilter?: (item: ItemType) => boolean;
}
export interface UmbPickerModalResult {
export interface UmbPickerModalValue {
selection: Array<string | null>;
}

6
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/code-editor-modal.token.ts
View File

@@ -11,14 +11,14 @@ export interface UmbCodeEditorModalData {
confirmLabel?: string;
}
export interface UmbCodeEditorModalResult {
export interface UmbCodeEditorModalValue {
content: string;
}
export const UMB_CODE_EDITOR_MODAL = new UmbModalToken<UmbCodeEditorModalData, UmbCodeEditorModalResult>(
export const UMB_CODE_EDITOR_MODAL = new UmbModalToken<UmbCodeEditorModalData, UmbCodeEditorModalValue>(
'Umb.Modal.CodeEditor',
{
type: 'sidebar',
size: 'large',
}
},
);

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/confirm-modal.token.ts
View File

@@ -8,8 +8,8 @@ export interface UmbConfirmModalData {
confirmLabel?: string;
}
export type UmbConfirmModalResult = undefined;
export type UmbConfirmModalValue = undefined;
export const UMB_CONFIRM_MODAL = new UmbModalToken<UmbConfirmModalData, UmbConfirmModalResult>('Umb.Modal.Confirm', {
export const UMB_CONFIRM_MODAL = new UmbModalToken<UmbConfirmModalData, UmbConfirmModalValue>('Umb.Modal.Confirm', {
type: 'dialog',
});

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-dictionary-modal.token.ts
View File

@@ -6,14 +6,14 @@ export interface UmbCreateDictionaryModalData {
parentName?: Observable<string | undefined>;
}
export interface UmbCreateDictionaryModalResult {
export interface UmbCreateDictionaryModalValue {
name: string;
parentId: string | null;
}
export const UMB_CREATE_DICTIONARY_MODAL = new UmbModalToken<
UmbCreateDictionaryModalData,
UmbCreateDictionaryModalResult
UmbCreateDictionaryModalValue
>('Umb.Modal.CreateDictionary', {
type: 'sidebar',
size: 'small',

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-document-modal.token.ts
View File

@@ -4,11 +4,11 @@ export interface UmbCreateDocumentModalData {
id: string | null;
}
export interface UmbCreateDocumentModalResult {
export interface UmbCreateDocumentModalValue {
documentTypeId: string;
}
export const UMB_CREATE_DOCUMENT_MODAL = new UmbModalToken<UmbCreateDocumentModalData, UmbCreateDocumentModalResult>(
export const UMB_CREATE_DOCUMENT_MODAL = new UmbModalToken<UmbCreateDocumentModalData, UmbCreateDocumentModalValue>(
'Umb.Modal.CreateDocument',
{
type: 'sidebar',

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts
View File

@@ -4,14 +4,14 @@ export interface UmbDataTypePickerFlowDataTypePickerModalData {
propertyEditorUiAlias: string;
}
export type UmbDataTypePickerFlowDataTypePickerModalResult = {
export type UmbDataTypePickerFlowDataTypePickerModalValue = {
dataTypeId?: string;
createNewWithPropertyEditorUiAlias?: string;
};
export const UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL = new UmbModalToken<
UmbDataTypePickerFlowDataTypePickerModalData,
UmbDataTypePickerFlowDataTypePickerModalResult
UmbDataTypePickerFlowDataTypePickerModalValue
>('Umb.Modal.DataTypePickerFlowDataTypePicker', {
type: 'sidebar',
size: 'small',

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-modal.token.ts
View File

@@ -5,13 +5,13 @@ export interface UmbDataTypePickerFlowModalData {
submitLabel?: string;
}
export type UmbDataTypePickerFlowModalResult = {
export type UmbDataTypePickerFlowModalValue = {
selection: Array<string>;
};
export const UMB_DATA_TYPE_PICKER_FLOW_MODAL = new UmbModalToken<
UmbDataTypePickerFlowModalData,
UmbDataTypePickerFlowModalResult
UmbDataTypePickerFlowModalValue
>('Umb.Modal.DataTypePickerFlow', {
type: 'sidebar',
size: 'small',

8
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-modal.token.ts
View File

@@ -1,10 +1,10 @@
import { FolderTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbModalToken, UmbTreePickerModalData, UmbPickerModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbModalToken, UmbTreePickerModalData, UmbPickerModalValue } from '@umbraco-cms/backoffice/modal';
export type UmbDataTypePickerModalData = UmbTreePickerModalData<FolderTreeItemResponseModel>;
export type UmbDataTypePickerModalResult = UmbPickerModalResult;
export type UmbDataTypePickerModalValue = UmbPickerModalValue;
export const UMB_DATA_TYPE_PICKER_MODAL = new UmbModalToken<UmbDataTypePickerModalData, UmbDataTypePickerModalResult>(
export const UMB_DATA_TYPE_PICKER_MODAL = new UmbModalToken<UmbDataTypePickerModalData, UmbDataTypePickerModalValue>(
'Umb.Modal.TreePicker',
{
type: 'sidebar',
@@ -12,5 +12,5 @@ export const UMB_DATA_TYPE_PICKER_MODAL = new UmbModalToken<UmbDataTypePickerMod
},
{
treeAlias: 'Umb.Tree.DataTypes',
}
},
);

8
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/dictionary-item-picker-modal.token.ts
View File

@@ -1,12 +1,12 @@
import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
import { UmbModalToken, UmbPickerModalValue, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
export type UmbDictionaryItemPickerModalData = UmbTreePickerModalData<EntityTreeItemResponseModel>;
export type UmbDictionaryItemPickerModalResult = UmbPickerModalResult;
export type UmbDictionaryItemPickerModalValue = UmbPickerModalValue;
export const UMB_DICTIONARY_ITEM_PICKER_MODAL = new UmbModalToken<
UmbDictionaryItemPickerModalData,
UmbDictionaryItemPickerModalResult
UmbDictionaryItemPickerModalValue
>(
'Umb.Modal.TreePicker',
{
@@ -15,5 +15,5 @@ export const UMB_DICTIONARY_ITEM_PICKER_MODAL = new UmbModalToken<
},
{
treeAlias: 'Umb.Tree.Dictionary',
}
},
);

8
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-picker-modal.token.ts
View File

@@ -1,10 +1,10 @@
import { DocumentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
import { UmbModalToken, UmbPickerModalValue, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
export type UmbDocumentPickerModalData = UmbTreePickerModalData<DocumentTreeItemResponseModel>;
export type UmbDocumentPickerModalResult = UmbPickerModalResult;
export type UmbDocumentPickerModalValue = UmbPickerModalValue;
export const UMB_DOCUMENT_PICKER_MODAL = new UmbModalToken<UmbDocumentPickerModalData, UmbDocumentPickerModalResult>(
export const UMB_DOCUMENT_PICKER_MODAL = new UmbModalToken<UmbDocumentPickerModalData, UmbDocumentPickerModalValue>(
'Umb.Modal.TreePicker',
{
type: 'sidebar',
@@ -12,5 +12,5 @@ export const UMB_DOCUMENT_PICKER_MODAL = new UmbModalToken<UmbDocumentPickerModa
},
{
treeAlias: 'Umb.Tree.Documents',
}
},
);

8
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-type-picker-modal.token.ts
View File

@@ -1,12 +1,12 @@
import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
import { UmbModalToken, UmbPickerModalValue, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
export type UmbDocumentTypePickerModalData = UmbTreePickerModalData<EntityTreeItemResponseModel>;
export type UmbDocumentTypePickerModalResult = UmbPickerModalResult;
export type UmbDocumentTypePickerModalValue = UmbPickerModalValue;
export const UMB_DOCUMENT_TYPE_PICKER_MODAL = new UmbModalToken<
UmbDocumentTypePickerModalData,
UmbDocumentTypePickerModalResult
UmbDocumentTypePickerModalValue
>(
'Umb.Modal.TreePicker',
{
@@ -15,5 +15,5 @@ export const UMB_DOCUMENT_TYPE_PICKER_MODAL = new UmbModalToken<
},
{
treeAlias: 'Umb.Tree.DocumentTypes',
}
},
);

6
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/embedded-media-modal.token.ts
View File

@@ -22,16 +22,16 @@ export interface OEmbedResult extends UmbEmbeddedMediaDimensions {
markup?: string;
}
export interface UmbEmbeddedMediaModalResult extends UmbEmbeddedMediaModalData {
export interface UmbEmbeddedMediaModalValue extends UmbEmbeddedMediaModalData {
preview?: string;
originalWidth: number;
originalHeight: number;
}
export const UMB_EMBEDDED_MEDIA_MODAL = new UmbModalToken<UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalResult>(
export const UMB_EMBEDDED_MEDIA_MODAL = new UmbModalToken<UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalValue>(
'Umb.Modal.EmbeddedMedia',
{
type: 'sidebar',
size: 'medium',
}
},
);

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/examine-fields-settings-modal.token.ts
View File

@@ -5,13 +5,13 @@ export type UmbExamineFieldsSettingsModalData = Array<{
exposed: boolean;
}>;
export interface UmbCreateDocumentModalResultData {
export interface UmbCreateDocumentModalValue {
fields?: UmbExamineFieldsSettingsModalData;
}
export const UMB_EXAMINE_FIELDS_SETTINGS_MODAL = new UmbModalToken<
UmbExamineFieldsSettingsModalData,
UmbCreateDocumentModalResultData
UmbCreateDocumentModalValue
>('Umb.Modal.ExamineFieldsSettings', {
type: 'sidebar',
size: 'small',

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/export-dictionary-modal.token.ts
View File

@@ -4,13 +4,13 @@ export interface UmbExportDictionaryModalData {
unique: string | null;
}
export interface UmbExportDictionaryModalResult {
export interface UmbExportDictionaryModalValue {
includeChildren?: boolean;
}
export const UMB_EXPORT_DICTIONARY_MODAL = new UmbModalToken<
UmbExportDictionaryModalData,
UmbExportDictionaryModalResult
UmbExportDictionaryModalValue
>('Umb.Modal.ExportDictionary', {
type: 'sidebar',
size: 'small',

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/folder-modal.token.ts
View File

@@ -7,11 +7,11 @@ export interface UmbFolderModalData {
parentUnique?: string | null;
}
export interface UmbFolderModalResult {
export interface UmbFolderModalValue {
folder: FolderResponseModel;
}
export const UMB_FOLDER_MODAL = new UmbModalToken<UmbFolderModalData, UmbFolderModalResult>('Umb.Modal.Folder', {
export const UMB_FOLDER_MODAL = new UmbModalToken<UmbFolderModalData, UmbFolderModalValue>('Umb.Modal.Folder', {
type: 'sidebar',
size: 'small',
});

6
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts
View File

@@ -5,15 +5,15 @@ export interface UmbIconPickerModalData {
icon: string | undefined;
}
export interface UmbIconPickerModalResult {
export interface UmbIconPickerModalValue {
color: string | undefined;
icon: string | undefined;
}
export const UMB_ICON_PICKER_MODAL = new UmbModalToken<UmbIconPickerModalData, UmbIconPickerModalResult>(
export const UMB_ICON_PICKER_MODAL = new UmbModalToken<UmbIconPickerModalData, UmbIconPickerModalValue>(
'Umb.Modal.IconPicker',
{
type: 'sidebar',
size: 'small',
}
},
);

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/import-dictionary-modal.token.ts
View File

@@ -4,14 +4,14 @@ export interface UmbImportDictionaryModalData {
unique: string | null;
}
export interface UmbImportDictionaryModalResult {
export interface UmbImportDictionaryModalValue {
temporaryFileId?: string;
parentId?: string;
}
export const UMB_IMPORT_DICTIONARY_MODAL = new UmbModalToken<
UmbImportDictionaryModalData,
UmbImportDictionaryModalResult
UmbImportDictionaryModalValue
>('Umb.Modal.ImportDictionary', {
type: 'sidebar',
size: 'small',

6
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/language-picker-modal.token.ts
View File

@@ -7,14 +7,14 @@ export interface UmbLanguagePickerModalData {
filter?: (language: LanguageResponseModel) => boolean;
}
export interface UmbLanguagePickerModalResult {
export interface UmbLanguagePickerModalValue {
selection: Array<string | null>;
}
export const UMB_LANGUAGE_PICKER_MODAL = new UmbModalToken<UmbLanguagePickerModalData, UmbLanguagePickerModalResult>(
export const UMB_LANGUAGE_PICKER_MODAL = new UmbModalToken<UmbLanguagePickerModalData, UmbLanguagePickerModalValue>(
'Umb.Modal.LanguagePicker',
{
type: 'sidebar',
size: 'small',
}
},
);

6
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts
View File

@@ -7,7 +7,7 @@ export interface UmbLinkPickerModalData {
config: UmbLinkPickerConfig;
}
export type UmbLinkPickerModalResult = { index: number | null; link: UmbLinkPickerLink };
export type UmbLinkPickerModalValue = { index: number | null; link: UmbLinkPickerLink };
export interface UmbLinkPickerLink {
icon?: string | null;
@@ -27,10 +27,10 @@ export interface UmbLinkPickerConfig {
overlaySize?: UUIModalSidebarSize;
}
export const UMB_LINK_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalData, UmbLinkPickerModalResult>(
export const UMB_LINK_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalData, UmbLinkPickerModalValue>(
'Umb.Modal.LinkPicker',
{
type: 'sidebar',
size: 'small',
}
},
);

11
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/media-tree-picker-modal.token.ts
View File

@@ -1,13 +1,10 @@
import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
import { UmbModalToken, UmbPickerModalValue, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
import { ContentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
export type UmbMediaTreePickerModalData = UmbTreePickerModalData<ContentTreeItemResponseModel>;
export type UmbMediaTreePickerModalResult = UmbPickerModalResult;
export type UmbMediaTreePickerModalValue = UmbPickerModalValue;
export const UMB_MEDIA_TREE_PICKER_MODAL = new UmbModalToken<
UmbMediaTreePickerModalData,
UmbMediaTreePickerModalResult
>(
export const UMB_MEDIA_TREE_PICKER_MODAL = new UmbModalToken<UmbMediaTreePickerModalData, UmbMediaTreePickerModalValue>(
'Umb.Modal.TreePicker',
{
type: 'sidebar',
@@ -15,5 +12,5 @@ export const UMB_MEDIA_TREE_PICKER_MODAL = new UmbModalToken<
},
{
treeAlias: 'Umb.Tree.Media',
}
},
);

8
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/modal-token.ts
View File

@@ -1,6 +1,6 @@
import { UmbModalConfig } from '../modal-manager.context.js';
export class UmbModalToken<ModalDataType extends object = object, ModalResultType = unknown> {
export class UmbModalToken<ModalDataType extends object = object, ModalValueType = unknown> {
/**
* Get the data type of the token's data.
*
@@ -16,12 +16,12 @@ export class UmbModalToken<ModalDataType extends object = object, ModalResultTyp
* Get the result type of the token
*
* @public
* @type {ModalResultType}
* @type {ModalValueType}
* @memberOf UmbModalToken
* @example `typeof MyModal.RESULT`
* @returns undefined
*/
readonly RESULT: ModalResultType = undefined as never;
readonly RESULT: ModalValueType = undefined as never;
/**
* @param alias Unique identifier for the token,
@@ -31,7 +31,7 @@ export class UmbModalToken<ModalDataType extends object = object, ModalResultTyp
constructor(
protected alias: string,
protected defaultConfig?: UmbModalConfig,
protected defaultData?: ModalDataType
protected defaultData?: ModalDataType,
) {}
/**

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/partial-view-picker-modal.token.ts
View File

@@ -5,7 +5,7 @@ export interface UmbPartialViewPickerModalData {
selection: string[];
}
export interface UmbPartialViewPickerModalResult {
export interface UmbPartialViewPickerModalValue {
selection: Array<string | null> | undefined;
}
@@ -13,7 +13,7 @@ export const UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS = 'Umb.Modal.PartialViewPicker'
export const UMB_PARTIAL_VIEW_PICKER_MODAL = new UmbModalToken<
UmbPartialViewPickerModalData,
UmbPartialViewPickerModalResult
UmbPartialViewPickerModalValue
>(UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS, {
type: 'sidebar',
size: 'small',

4
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-editor-ui-picker-modal.token.ts
View File

@@ -5,13 +5,13 @@ export interface UmbPropertyEditorUIPickerModalData {
submitLabel?: string;
}
export type UmbPropertyEditorUIPickerModalResult = {
export type UmbPropertyEditorUIPickerModalValue = {
selection: Array<string>;
};
export const UMB_PROPERTY_EDITOR_UI_PICKER_MODAL = new UmbModalToken<
UmbPropertyEditorUIPickerModalData,
UmbPropertyEditorUIPickerModalResult
UmbPropertyEditorUIPickerModalValue
>('Umb.Modal.PropertyEditorUiPicker', {
type: 'sidebar',
size: 'small',

6
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/property-settings-modal.token.ts
View File

@@ -3,13 +3,13 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
export type UmbPropertySettingsModalData = {
documentTypeId: string;
propertyData: PropertyTypeModelBaseModel
propertyData: PropertyTypeModelBaseModel;
};
export type UmbPropertySettingsModalResult = PropertyTypeModelBaseModel;
export type UmbPropertySettingsModalValue = PropertyTypeModelBaseModel;
export const UMB_PROPERTY_SETTINGS_MODAL = new UmbModalToken<
UmbPropertySettingsModalData,
UmbPropertySettingsModalResult
UmbPropertySettingsModalValue
>('Umb.Modal.PropertySettings', {
type: 'sidebar',
size: 'small',

6
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/section-picker-modal.token.ts
View File

@@ -5,14 +5,14 @@ export interface UmbSectionPickerModalData {
selection: Array<string | null>;
}
export interface UmbSectionPickerModalResult {
export interface UmbSectionPickerModalValue {
selection: Array<string | null>;
}
export const UMB_SECTION_PICKER_MODAL = new UmbModalToken<UmbSectionPickerModalData, UmbSectionPickerModalResult>(
export const UMB_SECTION_PICKER_MODAL = new UmbModalToken<UmbSectionPickerModalData, UmbSectionPickerModalValue>(
'Umb.Modal.SectionPicker',
{
type: 'sidebar',
size: 'small',
}
},
);

13
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-modal.token.ts
View File

@@ -5,14 +5,11 @@ export interface UmbTemplateModalData {
language?: 'razor' | 'typescript' | 'javascript' | 'css' | 'markdown' | 'json' | 'html';
}
export interface UmbTemplateModalResult {
export interface UmbTemplateModalValue {
id: string;
}
export const UMB_TEMPLATE_MODAL = new UmbModalToken<UmbTemplateModalData, UmbTemplateModalResult>(
'Umb.Modal.Template',
{
type: 'sidebar',
size: 'full',
}
);
export const UMB_TEMPLATE_MODAL = new UmbModalToken<UmbTemplateModalData, UmbTemplateModalValue>('Umb.Modal.Template', {
type: 'sidebar',
size: 'full',
});

8
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/template-picker-modal.token.ts
View File

@@ -1,10 +1,10 @@
import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
import { UmbModalToken, UmbPickerModalValue, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
export type UmbTemplatePickerModalData = UmbTreePickerModalData<EntityTreeItemResponseModel>;
export type UmbTemplatePickerModalResult = UmbPickerModalResult;
export type UmbTemplatePickerModalValue = UmbPickerModalValue;
export const UMB_TEMPLATE_PICKER_MODAL = new UmbModalToken<UmbTemplatePickerModalData, UmbTemplatePickerModalResult>(
export const UMB_TEMPLATE_PICKER_MODAL = new UmbModalToken<UmbTemplatePickerModalData, UmbTemplatePickerModalValue>(
'Umb.Modal.TreePicker',
{
type: 'sidebar',
@@ -12,5 +12,5 @@ export const UMB_TEMPLATE_PICKER_MODAL = new UmbModalToken<UmbTemplatePickerModa
},
{
treeAlias: 'Umb.Tree.Templates',
}
},
);

6
src/Umbraco.Web.UI.Client/src/packages/core/modal/token/user-picker-modal.token.ts
View File

@@ -3,14 +3,14 @@ import { UmbUserDetail } from '@umbraco-cms/backoffice/users';
export type UmbUserPickerModalData = UmbPickerModalData<UmbUserDetail>;
export interface UmbUserPickerModalResult {
export interface UmbUserPickerModalValue {
selection: Array<string | null>;
}
export const UMB_USER_PICKER_MODAL = new UmbModalToken<UmbUserPickerModalData, UmbUserPickerModalResult>(
export const UMB_USER_PICKER_MODAL = new UmbModalToken<UmbUserPickerModalData, UmbUserPickerModalValue>(
'Umb.Modal.UserPicker',
{
type: 'sidebar',
size: 'small',
}
},
);

6
src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts
View File

@@ -1,7 +1,7 @@
import { TinyMcePluginArguments, UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/components';
import {
UmbCodeEditorModalData,
UmbCodeEditorModalResult,
UmbCodeEditorModalValue,
UMB_CODE_EDITOR_MODAL,
UmbModalManagerContext,
UMB_MODAL_MANAGER_CONTEXT_TOKEN,
@@ -25,13 +25,13 @@ export default class UmbTinyMceCodeEditorPlugin extends UmbTinyMcePluginBase {
}
async #showCodeEditor() {
const modalHandler = this.#modalContext?.open<UmbCodeEditorModalData, UmbCodeEditorModalResult>(
const modalHandler = this.#modalContext?.open<UmbCodeEditorModalData, UmbCodeEditorModalValue>(
UMB_CODE_EDITOR_MODAL,
{
headline: 'Edit source code',
content: this.editor.getContent() ?? '',
language: 'html',
}
},
);
if (!modalHandler) return;

6
src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts
View File

@@ -1,7 +1,7 @@
import { TinyMcePluginArguments, UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/components';
import {
UmbEmbeddedMediaModalData,
UmbEmbeddedMediaModalResult,
UmbEmbeddedMediaModalValue,
UMB_EMBEDDED_MEDIA_MODAL,
UmbModalManagerContext,
UMB_MODAL_MANAGER_CONTEXT_TOKEN,
@@ -52,7 +52,7 @@ export default class UmbTinyMceEmbeddedMediaPlugin extends UmbTinyMcePluginBase
this.#showModal(selectedElm, modify);
}
#insertInEditor(embed: UmbEmbeddedMediaModalResult, activeElement: HTMLElement) {
#insertInEditor(embed: UmbEmbeddedMediaModalValue, activeElement: HTMLElement) {
// Wrap HTML preview content here in a DIV with non-editable class of .mceNonEditable
// This turns it into a selectable/cutable block to move about
const wrapper = this.editor.dom.create(
@@ -65,7 +65,7 @@ export default class UmbTinyMceEmbeddedMediaPlugin extends UmbTinyMcePluginBase
'data-embed-constrain': embed.constrain ?? false,
contenteditable: false,
},
embed.preview
embed.preview,
);
// Only replace if activeElement is an Embed element.

4
src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts
View File

@@ -1,6 +1,6 @@
import { TinyMcePluginArguments, UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/components';
import {
UmbLinkPickerModalResult,
UmbLinkPickerModalValue,
UMB_LINK_PICKER_MODAL,
UmbLinkPickerLink,
UmbModalManagerContext,
@@ -19,7 +19,7 @@ type AnchorElementAttributes = {
export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase {
#modalContext?: UmbModalManagerContext;
#linkPickerData?: UmbLinkPickerModalResult;
#linkPickerData?: UmbLinkPickerModalValue;
#anchorElement?: HTMLAnchorElement;

6
src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/create/create-dictionary-modal.element.ts
View File

@@ -1,12 +1,12 @@
import { html, customElement, query, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbCreateDictionaryModalData, UmbCreateDictionaryModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbCreateDictionaryModalData, UmbCreateDictionaryModalValue } from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
@customElement('umb-create-dictionary-modal')
export class UmbCreateDictionaryModalElement extends UmbModalBaseElement<
UmbCreateDictionaryModalData,
UmbCreateDictionaryModalResult
UmbCreateDictionaryModalValue
> {
@query('#form')
private _form!: HTMLFormElement;

6
src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/export/export-dictionary-modal.element.ts
View File

@@ -1,12 +1,12 @@
import { html, customElement, query } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbExportDictionaryModalData, UmbExportDictionaryModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbExportDictionaryModalData, UmbExportDictionaryModalValue } from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
@customElement('umb-export-dictionary-modal')
export class UmbExportDictionaryModalElement extends UmbModalBaseElement<
UmbExportDictionaryModalData,
UmbExportDictionaryModalResult
UmbExportDictionaryModalValue
> {
@query('#form')
private _form!: HTMLFormElement;

6
src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts
View File

@@ -1,14 +1,14 @@
import { UmbDictionaryRepository } from '../../repository/dictionary.repository.js';
import { css, html, customElement, query, state, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbImportDictionaryModalData, UmbImportDictionaryModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbImportDictionaryModalData, UmbImportDictionaryModalValue } from '@umbraco-cms/backoffice/modal';
import { ImportDictionaryRequestModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
@customElement('umb-import-dictionary-modal')
export class UmbImportDictionaryModalLayout extends UmbModalBaseElement<
UmbImportDictionaryModalData,
UmbImportDictionaryModalResult
UmbImportDictionaryModalValue
> {
static styles = [
UmbTextStyles,

4
src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create-document-modal.element.ts
View File

@@ -1,6 +1,6 @@
import { html, nothing, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbCreateDocumentModalData, UmbCreateDocumentModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbCreateDocumentModalData, UmbCreateDocumentModalValue } from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { DocumentTypeTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbDocumentRepository } from '@umbraco-cms/backoffice/document';
@@ -8,7 +8,7 @@ import { UmbDocumentRepository } from '@umbraco-cms/backoffice/document';
@customElement('umb-create-document-modal')
export class UmbCreateDocumentModalElement extends UmbModalBaseElement<
UmbCreateDocumentModalData,
UmbCreateDocumentModalResult
UmbCreateDocumentModalValue
> {
#documentRepository = new UmbDocumentRepository(this);

6
src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/modal-views/fields-settings.element.ts
View File

@@ -1,12 +1,12 @@
import { html, css, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbCreateDocumentModalResultData, UmbExamineFieldsSettingsModalData } from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbCreateDocumentModalValue, UmbExamineFieldsSettingsModalData } from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
@customElement('umb-examine-fields-settings-modal')
export class UmbExamineFieldsSettingsModalElement extends UmbModalBaseElement<
UmbExamineFieldsSettingsModalData,
UmbCreateDocumentModalResultData
UmbCreateDocumentModalValue
> {
@state()
private _fields?: UmbExamineFieldsSettingsModalData;

12
src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
View File

@@ -1,10 +1,10 @@
import { UmbDataTypeRepository } from '../../repository/data-type.repository.js';
import { css, html, customElement, property, state, repeat, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import {
UmbModalContext,
UmbDataTypePickerFlowDataTypePickerModalData,
UmbDataTypePickerFlowDataTypePickerModalResult,
UmbDataTypePickerFlowDataTypePickerModalValue,
} from '@umbraco-cms/backoffice/modal';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { FolderTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -47,7 +47,7 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme
return dataTypeRepository.requestById(item.id);
}
return Promise.resolve();
})
}),
);
// TODO: Use the asObservable from above onces end-point has been made.
@@ -74,7 +74,7 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme
@property({ attribute: false })
modalContext?: UmbModalContext<
UmbDataTypePickerFlowDataTypePickerModalData,
UmbDataTypePickerFlowDataTypePickerModalResult
UmbDataTypePickerFlowDataTypePickerModalValue
>;
render() {
@@ -110,10 +110,10 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme
</div>
</uui-button>
</li>`
: ''
: '',
)
: ''}
</ul>`
</ul>`,
);
}
private _renderCreate() {

69
src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
View File

@@ -1,13 +1,13 @@
import { UmbDataTypeRepository } from '../../repository/data-type.repository.js';
import { css, html, repeat, customElement, property, state, when, nothing } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { groupBy } from '@umbraco-cms/backoffice/external/lodash';
import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
import {
UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL,
UMB_WORKSPACE_MODAL,
UmbDataTypePickerFlowModalData,
UmbDataTypePickerFlowModalResult,
UmbDataTypePickerFlowModalValue,
UmbModalContext,
UmbModalRouteBuilder,
UmbModalRouteRegistrationController,
@@ -22,7 +22,7 @@ interface GroupedItems<T> {
@customElement('umb-data-type-picker-flow-modal')
export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
@property({ attribute: false })
modalContext?: UmbModalContext<UmbDataTypePickerFlowModalData, UmbDataTypePickerFlowModalResult>;
modalContext?: UmbModalContext<UmbDataTypePickerFlowModalData, UmbDataTypePickerFlowModalValue>;
@property({ type: Object })
public get data(): UmbDataTypePickerFlowModalData | undefined {
@@ -108,13 +108,14 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
this.#dataTypes = items;
this._performFiltering();
},
'_repositoryItemsObserver'
'_repositoryItemsObserver',
);
this.observe(umbExtensionsRegistry.extensionsOfType('propertyEditorUi'), (propertyEditorUIs) => {
// Only include Property Editor UIs which has Property Editor Schema Alias
this.#propertyEditorUIs = propertyEditorUIs.filter((propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias);
this.#propertyEditorUIs = propertyEditorUIs.filter(
(propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias,
);
this._performFiltering();
});
@@ -142,7 +143,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
this.#dataTypes.filter((dataType) => {
return dataType.name?.toLowerCase().includes(this.#currentFilterQuery);
}),
'meta.group'
'meta.group',
);
} else {
this._groupedDataTypes = undefined;
@@ -208,13 +209,15 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
return html`
${when(
dataTypesEntries.length > 0,
() => html` <h5 class="choice-type-headline">Available configurations</h5>
${this._renderDataTypes()}`
() =>
html` <h5 class="choice-type-headline">Available configurations</h5>
${this._renderDataTypes()}`,
)}
${when(
editorUIEntries.length > 0,
() => html` <h5 class="choice-type-headline">Create a new configuration</h5>
${this._renderUIs()}`
() =>
html` <h5 class="choice-type-headline">Create a new configuration</h5>
${this._renderUIs()}`,
)}
`;
}
@@ -228,7 +231,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
return entries.map(
([key, value]) =>
html` <h5 class="category-name">${key === 'undefined' ? 'Uncategorized' : key}</h5>
${this._renderGroupDataTypes(value)}`
${this._renderGroupDataTypes(value)}`,
);
}
@@ -240,7 +243,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
return entries.map(
([key, value]) =>
html` <h5 class="category-name">${key === 'undefined' ? 'Uncategorized' : key}</h5>
${this._renderGroupUIs(value)}`
${this._renderGroupUIs(value)}`,
);
}
@@ -250,17 +253,18 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
? repeat(
uis,
(propertyEditorUI) => propertyEditorUI.alias,
(propertyEditorUI) => html` <li class="item">
<uui-button
type="button"
label="${propertyEditorUI.meta.label || propertyEditorUI.name}"
href=${this._dataTypePickerModalRouteBuilder!({ uiAlias: propertyEditorUI.alias })}>
<div class="item-content">
<uui-icon name="${propertyEditorUI.meta.icon}" class="icon"></uui-icon>
${propertyEditorUI.meta.label || propertyEditorUI.name}
</div>
</uui-button>
</li>`
(propertyEditorUI) =>
html` <li class="item">
<uui-button
type="button"
label="${propertyEditorUI.meta.label || propertyEditorUI.name}"
href=${this._dataTypePickerModalRouteBuilder!({ uiAlias: propertyEditorUI.alias })}>
<div class="item-content">
<uui-icon name="${propertyEditorUI.meta.icon}" class="icon"></uui-icon>
${propertyEditorUI.meta.label || propertyEditorUI.name}
</div>
</uui-button>
</li>`,
)
: ''}
</ul>`;
@@ -271,14 +275,15 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
${repeat(
dataTypes,
(dataType) => dataType.id,
(dataType) => html`<li class="item" ?selected=${this._selection.includes(dataType.id!)}>
<uui-button .label=${dataType.name} type="button" @click="${() => this._handleDataTypeClick(dataType)}">
<div class="item-content">
<uui-icon name="${'umb:bug'}" class="icon"></uui-icon>
${dataType.name}
</div>
</uui-button>
</li>`
(dataType) =>
html`<li class="item" ?selected=${this._selection.includes(dataType.id!)}>
<uui-button .label=${dataType.name} type="button" @click="${() => this._handleDataTypeClick(dataType)}">
<div class="item-content">
<uui-icon name="${'umb:bug'}" class="icon"></uui-icon>
${dataType.name}
</div>
</uui-button>
</li>`,
)}
</ul>`;
}

26
src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
View File

@@ -1,10 +1,10 @@
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { groupBy } from '@umbraco-cms/backoffice/external/lodash';
import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
import {
UmbPropertyEditorUIPickerModalData,
UmbPropertyEditorUIPickerModalResult,
UmbPropertyEditorUIPickerModalValue,
UmbModalContext,
} from '@umbraco-cms/backoffice/modal';
import { ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
@@ -31,7 +31,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
private _submitLabel = 'Select';
@property({ attribute: false })
modalContext?: UmbModalContext<UmbPropertyEditorUIPickerModalData, UmbPropertyEditorUIPickerModalResult>;
modalContext?: UmbModalContext<UmbPropertyEditorUIPickerModalData, UmbPropertyEditorUIPickerModalValue>;
connectedCallback(): void {
super.connectedCallback();
@@ -46,9 +46,10 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
if (!this.data) return;
this.observe(umbExtensionsRegistry.extensionsOfType('propertyEditorUi'), (propertyEditorUIs) => {
// Only include Property Editor UIs which has Property Editor Schema Alias
this._propertyEditorUIs = propertyEditorUIs.filter((propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias);
this._propertyEditorUIs = propertyEditorUIs.filter(
(propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias,
);
this._groupedPropertyEditorUIs = groupBy(this._propertyEditorUIs, 'meta.group');
});
@@ -111,7 +112,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
return html` ${Object.entries(this._groupedPropertyEditorUIs).map(
([key, value]) =>
html` <h4>${key}</h4>
${this._renderGroupItems(value)}`
${this._renderGroupItems(value)}`,
)}`;
}
@@ -120,12 +121,13 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
${repeat(
groupItems,
(propertyEditorUI) => propertyEditorUI.alias,
(propertyEditorUI) => html` <li class="item" ?selected=${this._selection.includes(propertyEditorUI.alias)}>
<button type="button" @click="${() => this._handleClick(propertyEditorUI)}">
<uui-icon name="${propertyEditorUI.meta.icon}" class="icon"></uui-icon>
${propertyEditorUI.meta.label || propertyEditorUI.name}
</button>
</li>`
(propertyEditorUI) =>
html` <li class="item" ?selected=${this._selection.includes(propertyEditorUI.alias)}>
<button type="button" @click="${() => this._handleClick(propertyEditorUI)}">
<uui-icon name="${propertyEditorUI.meta.icon}" class="icon"></uui-icon>
${propertyEditorUI.meta.label || propertyEditorUI.name}
</button>
</li>`,
)}
</ul>`;
}

8
src/Umbraco.Web.UI.Client/src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts
View File

@@ -1,15 +1,15 @@
import { UmbLanguageRepository } from '../../repository/language.repository.js';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbSelectionManagerBase } from '@umbraco-cms/backoffice/utils';
import { UmbLanguagePickerModalResult, UmbLanguagePickerModalData } from '@umbraco-cms/backoffice/modal';
import { UmbLanguagePickerModalValue, UmbLanguagePickerModalData } from '@umbraco-cms/backoffice/modal';
@customElement('umb-language-picker-modal')
export class UmbLanguagePickerModalElement extends UmbModalBaseElement<
UmbLanguagePickerModalData,
UmbLanguagePickerModalResult
UmbLanguagePickerModalValue
> {
@state()
private _languages: Array<LanguageResponseModel> = [];
@@ -59,7 +59,7 @@ export class UmbLanguagePickerModalElement extends UmbModalBaseElement<
?selected=${this.#selectionManager.isSelected(item.isoCode!)}>
<uui-icon slot="icon" name="umb:globe"></uui-icon>
</uui-menu-item>
`
`,
)}
</uui-box>
<div slot="actions">

28
src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
View File

@@ -1,18 +1,18 @@
import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../../modals/manifests.js';
import { getInsertDictionarySnippet, getInsertPartialSnippet } from '../../utils.js';
import { ChooseInsertTypeModalResult, CodeSnippetType } from '../../modals/insert-choose-type-sidebar.element.js';
import { UmbChooseInsertTypeModalValue, CodeSnippetType } from '../../modals/insert-choose-type-sidebar.element.js';
import { UmbDictionaryRepository } from '@umbraco-cms/backoffice/dictionary';
import { customElement, property, css, html } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import {
UMB_DICTIONARY_ITEM_PICKER_MODAL,
UMB_MODAL_MANAGER_CONTEXT_TOKEN,
UMB_PARTIAL_VIEW_PICKER_MODAL,
UmbDictionaryItemPickerModalResult,
UmbDictionaryItemPickerModalValue,
UmbModalManagerContext,
UmbModalContext,
UmbModalToken,
UmbPartialViewPickerModalResult,
UmbPartialViewPickerModalValue,
} from '@umbraco-cms/backoffice/modal';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -21,7 +21,7 @@ export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL = new UmbModa
{
type: 'sidebar',
size: 'small',
}
},
);
@customElement('umb-templating-insert-menu')
@@ -42,16 +42,16 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
});
}
async determineInsertValue(modalResult: ChooseInsertTypeModalResult) {
const { type, value } = modalResult;
async determineInsertValue(modalValue: UmbChooseInsertTypeModalValue) {
const { type, value } = modalValue;
switch (type) {
case CodeSnippetType.partialView: {
this.#getPartialViewSnippet(value as UmbPartialViewPickerModalResult);
this.#getPartialViewSnippet(value as UmbPartialViewPickerModalValue);
break;
}
case CodeSnippetType.dictionaryItem: {
await this.#getDictionaryItemSnippet(value as UmbDictionaryItemPickerModalResult);
await this.#getDictionaryItemSnippet(value as UmbDictionaryItemPickerModalValue);
this.#dispatchInsertEvent();
break;
@@ -62,22 +62,22 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
}
}
#getDictionaryItemSnippet = async (modalResult: UmbDictionaryItemPickerModalResult) => {
const id = modalResult.selection[0];
#getDictionaryItemSnippet = async (modalValue: UmbDictionaryItemPickerModalValue) => {
const id = modalValue.selection[0];
if (id === null) return;
const { data } = await this.#dictionaryRepository.requestById(id);
this.value = getInsertDictionarySnippet(data?.name ?? '');
};
#getPartialViewSnippet = async (modalResult: UmbPartialViewPickerModalResult) => {
this.value = getInsertPartialSnippet(modalResult.selection?.[0] ?? '');
#getPartialViewSnippet = async (modalValue: UmbPartialViewPickerModalValue) => {
this.value = getInsertPartialSnippet(modalValue.selection?.[0] ?? '');
};
#openChooseTypeModal = () => {
this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_MODAL, {
hidePartialView: this.hidePartialView,
});
this.#openModal?.onSubmit().then((closedModal: ChooseInsertTypeModalResult) => {
this.#openModal?.onSubmit().then((closedModal: UmbChooseInsertTypeModalValue) => {
this.determineInsertValue(closedModal);
});
};

22
src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts
View File

@@ -1,4 +1,4 @@
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import {
@@ -7,7 +7,7 @@ import {
UMB_PARTIAL_VIEW_PICKER_MODAL,
UmbModalContext,
UMB_DICTIONARY_ITEM_PICKER_MODAL,
UmbDictionaryItemPickerModalResult,
UmbDictionaryItemPickerModalValue,
} from '@umbraco-cms/backoffice/modal';
export interface ChooseInsertTypeModalData {
@@ -19,15 +19,15 @@ export enum CodeSnippetType {
dictionaryItem = 'dictionaryItem',
macro = 'macro',
}
export interface ChooseInsertTypeModalResult {
value: string | UmbDictionaryItemPickerModalResult;
export interface UmbChooseInsertTypeModalValue {
value: string | UmbDictionaryItemPickerModalValue;
type: CodeSnippetType;
}
@customElement('umb-templating-choose-insert-type-modal')
export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement<
ChooseInsertTypeModalData,
ChooseInsertTypeModalResult
UmbChooseInsertTypeModalValue
> {
private _close() {
this.modalContext?.reject();
@@ -46,11 +46,11 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
#openInsertPartialViewSidebar() {
this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL);
this.#openModal?.onSubmit().then((partialViewPickerModalResult) => {
if (partialViewPickerModalResult)
this.#openModal?.onSubmit().then((partialViewPickerModalValue) => {
if (partialViewPickerModalValue)
this.modalContext?.submit({
type: CodeSnippetType.partialView,
value: partialViewPickerModalResult.selection[0],
value: partialViewPickerModalValue.selection[0],
});
});
}
@@ -59,9 +59,9 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
pickableFilter: (item) => item.id !== null,
});
this.#openModal?.onSubmit().then((dictionaryItemPickerModalResult) => {
if (dictionaryItemPickerModalResult)
this.modalContext?.submit({ value: dictionaryItemPickerModalResult, type: CodeSnippetType.dictionaryItem });
this.#openModal?.onSubmit().then((dictionaryItemPickerModalValue) => {
if (dictionaryItemPickerModalValue)
this.modalContext?.submit({ value: dictionaryItemPickerModalValue, type: CodeSnippetType.dictionaryItem });
});
}

10
src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-modal.element.ts
View File

@@ -1,6 +1,6 @@
import { UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS } from '../manifests.js';
import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils.js';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, queryAll, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
@@ -9,22 +9,22 @@ import './insert-section-input.element.js';
// eslint-disable-next-line local-rules/ensure-relative-import-use-js-extension
import type { UmbInsertSectionCheckboxElement } from './insert-section-input.element';
export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken<object, InsertSectionModalModalResult>(
export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken<object, UmbInsertSectionModalModalValue>(
UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS,
{
type: 'sidebar',
size: 'small',
}
},
);
export interface InsertSectionModalModalResult {
export interface UmbInsertSectionModalModalValue {
value?: string;
}
@customElement('umb-templating-insert-section-modal')
export default class UmbTemplatingInsertSectionModalElement extends UmbModalBaseElement<
object,
InsertSectionModalModalResult
UmbInsertSectionModalModalValue
> {
@queryAll('umb-insert-section-checkbox')
checkboxes!: NodeListOf<UmbInsertSectionCheckboxElement>;

6
src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts
View File

@@ -1,13 +1,13 @@
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbPartialViewPickerModalData, UmbPartialViewPickerModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbPartialViewPickerModalData, UmbPartialViewPickerModalValue } from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { UmbTreeElement } from '@umbraco-cms/backoffice/tree';
@customElement('umb-partial-view-picker-modal')
export default class UmbPartialViewPickerModalElement extends UmbModalBaseElement<
UmbPartialViewPickerModalData,
UmbPartialViewPickerModalResult
UmbPartialViewPickerModalValue
> {
@state()
_selection: Array<string | null> = [];

8
src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/create-from-snippet.action.ts
View File

@@ -9,17 +9,17 @@ export interface UmbCreateFromSnippetPartialViewModalData {
snippets: SnippetItemResponseModel[];
}
export type UmbConfirmModalResult = undefined;
export type UmbConfirmModalValue = undefined;
export const UMB_PARTIAL_VIEW_FROM_SNIPPET_MODAL = new UmbModalToken<UmbCreateFromSnippetPartialViewModalData, string>(
'Umb.Modal.CreateFromSnippetPartialView',
{
type: 'sidebar',
}
},
);
export class UmbCreateFromSnippetPartialViewAction<
T extends { copy(): Promise<void> }
T extends { copy(): Promise<void> },
> extends UmbEntityActionBase<UmbPartialViewsRepository> {
constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
super(host, repositoryAlias, unique);
@@ -42,7 +42,7 @@ export class UmbCreateFromSnippetPartialViewAction<
history.pushState(
null,
'',
`section/settings/workspace/partial-view/create/${this.unique ?? 'null'}/${snippetName}`
`section/settings/workspace/partial-view/create/${this.unique ?? 'null'}/${snippetName}`,
);
});
}

4
src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-view-workspace-edit.element.ts
View File

@@ -91,8 +91,8 @@ export class UmbPartialViewWorkspaceEditElement extends UmbLitElement {
#openQueryBuilder() {
const queryBuilderModal = this._modalContext?.open(UMB_TEMPLATE_QUERY_BUILDER_MODAL);
queryBuilderModal?.onSubmit().then((queryBuilderModalResult) => {
if (queryBuilderModalResult.value) this._codeEditor?.insert(getQuerySnippet(queryBuilderModalResult.value));
queryBuilderModal?.onSubmit().then((queryBuilderModalValue) => {
if (queryBuilderModalValue.value) this._codeEditor?.insert(getQuerySnippet(queryBuilderModalValue.value));
});
}

4
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.ts
View File

@@ -8,12 +8,12 @@ export interface StylesheetRichTextEditorStyleModalData {
rule: RichTextRuleModelSortable | null;
}
export type StylesheetRichTextEditorStyleModalResult = NonNullable<Required<StylesheetRichTextEditorStyleModalData>>;
export type UmbStylesheetRichTextEditorStyleModalValue = NonNullable<Required<StylesheetRichTextEditorStyleModalData>>;
@customElement('umb-stylesheet-rich-text-editor-style-modal')
export default class UmbStylesheetRichTextEditorStyleModalElement extends UmbModalBaseElement<
StylesheetRichTextEditorStyleModalData,
StylesheetRichTextEditorStyleModalResult
UmbStylesheetRichTextEditorStyleModalValue
> {
private _close() {
this.modalContext?.reject();

4
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
View File

@@ -5,7 +5,7 @@ import { RichTextRuleModelSortable, UmbStylesheetWorkspaceContext } from '../../
import { UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR } from '../../manifests.js';
import {
StylesheetRichTextEditorStyleModalData,
StylesheetRichTextEditorStyleModalResult,
UmbStylesheetRichTextEditorStyleModalValue,
} from './stylesheet-workspace-view-rich-text-editor-style-sidebar.element.js';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
@@ -18,7 +18,7 @@ import './stylesheet-workspace-view-rich-text-editor-rule.element.js';
export const UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL = new UmbModalToken<
StylesheetRichTextEditorStyleModalData,
StylesheetRichTextEditorStyleModalResult
UmbStylesheetRichTextEditorStyleModalValue
>(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR, {
type: 'sidebar',
size: 'medium',

4
src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts
View File

@@ -1,13 +1,13 @@
import { UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS } from './manifests.js';
import {
TemplateQueryBuilderModalData,
TemplateQueryBuilderModalResult,
UmbTemplateQueryBuilderModalValue,
} from './query-builder/query-builder.element.js';
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
export const UMB_TEMPLATE_QUERY_BUILDER_MODAL = new UmbModalToken<
TemplateQueryBuilderModalData,
TemplateQueryBuilderModalResult
UmbTemplateQueryBuilderModalValue
>(UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS, {
type: 'sidebar',
size: 'large',

4
src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
View File

@@ -21,7 +21,7 @@ export interface TemplateQueryBuilderModalData {
hidePartialViews?: boolean;
}
export interface TemplateQueryBuilderModalResult {
export interface UmbTemplateQueryBuilderModalValue {
value: string;
}
@@ -33,7 +33,7 @@ enum SortOrder {
@customElement('umb-templating-query-builder-modal')
export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement<
TemplateQueryBuilderModalData,
TemplateQueryBuilderModalResult
UmbTemplateQueryBuilderModalValue
> {
@query('#content-type-dropdown')
private _contentTypeDropdown?: UmbButtonWithDropdownElement;

8
src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts
View File

@@ -111,8 +111,8 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
#openInsertSectionModal() {
const sectionModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL);
sectionModal?.onSubmit().then((insertSectionModalResult) => {
if (insertSectionModalResult.value) this._codeEditor?.insert(insertSectionModalResult.value);
sectionModal?.onSubmit().then((insertSectionModalValue) => {
if (insertSectionModalValue.value) this._codeEditor?.insert(insertSectionModalValue.value);
});
}
@@ -137,8 +137,8 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
#openQueryBuilder() {
const queryBuilderModal = this._modalContext?.open(UMB_TEMPLATE_QUERY_BUILDER_MODAL);
queryBuilderModal?.onSubmit().then((queryBuilderModalResult) => {
if (queryBuilderModalResult.value) this._codeEditor?.insert(getQuerySnippet(queryBuilderModalResult.value));
queryBuilderModal?.onSubmit().then((queryBuilderModalValue) => {
if (queryBuilderModalValue.value) this._codeEditor?.insert(getQuerySnippet(queryBuilderModalValue.value));
});
}

10
src/Umbraco.Web.UI.Client/src/packages/users/users/modals/user-picker/user-picker-modal.element.ts
View File

@@ -1,7 +1,7 @@
import { UmbUserRepository } from '../../repository/user.repository.js';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbUserPickerModalData, UmbUserPickerModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbUserPickerModalData, UmbUserPickerModalValue } from '@umbraco-cms/backoffice/modal';
import { createExtensionClass } from '@umbraco-cms/backoffice/extension-api';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
@@ -10,7 +10,7 @@ import { UmbSelectionManagerBase } from '@umbraco-cms/backoffice/utils';
import { type UmbUserDetail } from '@umbraco-cms/backoffice/users';
@customElement('umb-user-picker-modal')
export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPickerModalData, UmbUserPickerModalResult> {
export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPickerModalData, UmbUserPickerModalValue> {
@state()
private _users: Array<UmbUserDetail> = [];
@@ -34,7 +34,7 @@ export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPicker
} catch (error) {
throw new Error('Could not create repository with alias: Umb.Repository.User');
}
}
},
);
}
@@ -70,7 +70,7 @@ export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPicker
?selected=${this.#selectionManager.isSelected(user.id!)}>
<uui-avatar slot="icon" name=${user.name}></uui-avatar>
</uui-menu-item>
`
`,
)}
</uui-box>
<div slot="actions">

8
src/Umbraco.Web.UI.Client/src/shared/modal/modal-element.element.ts
View File

@@ -5,17 +5,17 @@ import type { ManifestModal, UmbModalExtensionElement } from '@umbraco-cms/backo
export abstract class UmbModalBaseElement<
ModalDataType extends object = object,
ModalResultType = unknown,
ModalManifestType extends ManifestModal = ManifestModal
ModalValueType = unknown,
ModalManifestType extends ManifestModal = ManifestModal,
>
extends UmbLitElement
implements UmbModalExtensionElement<ModalDataType, ModalResultType, ModalManifestType>
implements UmbModalExtensionElement<ModalDataType, ModalValueType, ModalManifestType>
{
@property({ type: Array, attribute: false })
public manifest?: ModalManifestType;
@property({ attribute: false })
public modalContext?: UmbModalContext<ModalDataType, ModalResultType>;
public modalContext?: UmbModalContext<ModalDataType, ModalValueType>;
@property({ type: Object, attribute: false })
public data?: ModalDataType;

6
src/Umbraco.Web.UI.Client/src/shared/modal/stories/modal.mdx
View File

@@ -228,11 +228,11 @@ interface MyModalData = {
content: string;
}
interface MyModalResult = {
interface MyModalValue = {
myReturnData: string;
}
const MY_MODAL_TOKEN = new ModalToken<MyModalData, MyModalResult>('My.Modal', {
const MY_MODAL_TOKEN = new ModalToken<MyModalData, MyModalValue>('My.Modal', {
type: 'sidebar',
size: 'small'
});
@@ -248,7 +248,7 @@ import type { UmbModalHandler } from '@umbraco-cms/modal';
class MyDialog extends UmbElementMixin(LitElement) {
// the modal handler will be injected into the element when the modal is opened.
@property({ attribute: false })
modalContext?: UmbModalHandler<MyModalData, MyModalResult>;
modalContext?: UmbModalHandler<MyModalData, MyModalValue>;
private _handleCancel() {
this.modalContext?.close();

8
src/Umbraco.Web.UI.Client/storybook/stories/extending/modals/intro.mdx
View File

@@ -28,7 +28,7 @@ import { Meta } from '@storybook/addon-docs';
### Modal Token
For type safety we recommend that you make a Modal Token, Its posible to go without.
The Modal Token binds the Modal Type to the Modal Data Type and Modal Result Type.
The Modal Token binds the Modal Type to the Modal Data Type and Modal Value Type.
``
@@ -39,16 +39,16 @@ export type OurSomethingPickerModalData = {
key: string | null;
};
export type OurSomethingPickerModalResult = {
export type OurSomethingPickerModalValue = {
key: string;
};
export const MY_SOMETHING_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalData, UmbLinkPickerModalResult>(
export const MY_SOMETHING_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalData, UmbLinkPickerModalValue>(
'Our.Modal.SomethingPicker',
{
type: 'sidebar',
size: 'small',
}
},
);
```