diff --git a/.eslintignore b/.eslintignore index d2d1d42353..2b14f644c9 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,5 @@ .eslintrc.js -types +/types dist dist-cms schemas diff --git a/.gitignore b/.gitignore index 8a626a2202..97d4759820 100644 --- a/.gitignore +++ b/.gitignore @@ -11,7 +11,7 @@ node_modules dist dist-cms dist-ssr -types +/types *.tsbuildinfo *.local *.tgz diff --git a/src/libs/observable-api/class-state.ts b/src/libs/observable-api/class-state.ts index 6196c31822..3211f757df 100644 --- a/src/libs/observable-api/class-state.ts +++ b/src/libs/observable-api/class-state.ts @@ -1,7 +1,7 @@ import { BehaviorSubject } from '@umbraco-cms/backoffice/external/rxjs'; interface UmbClassStateData { - equal(otherClass: UmbClassStateData): boolean; + equal(otherClass: UmbClassStateData | undefined): boolean; } /** @@ -10,7 +10,7 @@ interface UmbClassStateData { * @extends {BehaviorSubject} * @description - A RxJS BehaviorSubject which can hold class instance which has a equal method to compare in coming instances for changes. */ -export class UmbClassState extends BehaviorSubject { +export class UmbClassState extends BehaviorSubject { constructor(initialData: T) { super(initialData); } diff --git a/src/packages/core/components/data-type/data-type-property-collection.class.ts b/src/packages/core/components/data-type/data-type-property-collection.class.ts index 90eed2632f..f0235b82e9 100644 --- a/src/packages/core/components/data-type/data-type-property-collection.class.ts +++ b/src/packages/core/components/data-type/data-type-property-collection.class.ts @@ -1,11 +1,12 @@ +import { type UmbDataTypeConfigProperty, type UmbDataTypeConfig } from '../../property-editors/index.js'; import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api'; /** * Extends Array to add utility functions for accessing data type properties * by alias, returning either the value or the complete DataTypePropertyPresentationModel object */ -export class UmbDataTypePropertyCollection extends Array { - constructor(args: Array = []) { +export class UmbDataTypeConfigCollection extends Array { + constructor(args: UmbDataTypeConfig) { super(...args); } static get [Symbol.species](): ArrayConstructor { @@ -43,4 +44,15 @@ export class UmbDataTypePropertyCollection extends Array { return Object.fromEntries(this.map((x) => [x.alias, x.value])); } + + equal(other: UmbDataTypeConfigCollection | undefined): boolean { + if (this.length !== other?.length) { + return false; + } + + return this.every((x) => { + const otherProperty = x.alias ? other.getByAlias(x.alias!) : undefined; + return otherProperty && x.value === otherProperty.value; + }); + } } diff --git a/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts b/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts index bebd992be3..0aefbaa750 100644 --- a/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts @@ -7,7 +7,7 @@ import { renderEditor, type tinymce } from '@umbraco-cms/backoffice/external/tin import { UMB_AUTH, UmbLoggedInUser } from '@umbraco-cms/backoffice/auth'; import { TinyMcePluginArguments, - UmbDataTypePropertyCollection, + UmbDataTypeConfigCollection, UmbTinyMcePluginBase, } from '@umbraco-cms/backoffice/components'; import { ClassConstructor, hasDefaultExport, loadExtension } from '@umbraco-cms/backoffice/extension-api'; @@ -29,8 +29,8 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; // TODO => integrate macro picker, update stylesheet fetch when backend CLI exists (ref tinymce.service.js in existing backoffice) @customElement('umb-input-tiny-mce') export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) { - @property({ type: Object }) - configuration?: UmbDataTypePropertyCollection; + @property({ attribute: false }) + configuration?: UmbDataTypeConfigCollection; @state() private _tinyConfig: tinymce.RawEditorOptions = {}; @@ -43,7 +43,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) { #editorRef?: tinymce.Editor | null = null; protected getFormElement() { - return undefined; + return this._editorElement?.querySelector('iframe') ?? undefined; } @query('#editor', true) @@ -80,6 +80,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) { super.disconnectedCallback(); if (this.#editorRef) { + // TODO: Test if there is any problems with destroying the RTE here, but not initializing on connectedCallback. (firstUpdated is only called first time the element is rendered, not when it is reconnected) this.#editorRef.destroy(); } } @@ -104,6 +105,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) { async #setTinyConfig() { // create an object by merging the configuration onto the fallback config + // TODO: Seems like a too tight coupling between DataTypeConfigCollection and TinyMceConfig, I would love it begin more explicit what we take from DataTypeConfigCollection and parse on, but I understand that this gives some flexibility. Is this flexibility on purpose? const configurationOptions: Record = { ...defaultFallbackConfig, ...(this.configuration ? this.configuration?.toObject() : {}), @@ -203,7 +205,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) { // Plugins require a reference to the current editor as a param, so can not // be instantiated until we have an editor for (const plugin of this.#plugins) { - new plugin({ host: this, editor }); + new plugin({ host: this, editor }); } // define keyboard shortcuts diff --git a/src/packages/core/components/input-tiny-mce/tiny-mce-plugin.ts b/src/packages/core/components/input-tiny-mce/tiny-mce-plugin.ts index 3f8f7715be..fb26439393 100644 --- a/src/packages/core/components/input-tiny-mce/tiny-mce-plugin.ts +++ b/src/packages/core/components/input-tiny-mce/tiny-mce-plugin.ts @@ -1,10 +1,10 @@ -import type { UmbDataTypePropertyCollection, UmbInputTinyMceElement } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection, UmbInputTinyMceElement } from '@umbraco-cms/backoffice/components'; import type { tinymce } from '@umbraco-cms/backoffice/external/tinymce'; export class UmbTinyMcePluginBase { host: UmbInputTinyMceElement; editor: tinymce.Editor; - configuration?: UmbDataTypePropertyCollection; + configuration?: UmbDataTypeConfigCollection; constructor(arg: TinyMcePluginArguments) { this.host = arg.host; diff --git a/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts b/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts index bc0c40c0a5..46a403c109 100644 --- a/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts +++ b/src/packages/core/components/property-type-based-property/property-type-based-property.element.ts @@ -1,13 +1,10 @@ +import { UmbDataTypeConfig, type UmbDataTypeConfigProperty } from '../../property-editors/index.js'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { css, html, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbDataTypeRepository } from '@umbraco-cms/backoffice/data-type'; import { UmbDocumentWorkspaceContext } from '@umbraco-cms/backoffice/document'; import type { UmbVariantId } from '@umbraco-cms/backoffice/variant'; -import type { - DataTypeResponseModel, - DataTypePropertyPresentationModel, - PropertyTypeModelBaseModel, -} from '@umbraco-cms/backoffice/backend-api'; +import type { DataTypeResponseModel, PropertyTypeModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; @@ -32,7 +29,7 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement { private _propertyEditorUiAlias?: string; @state() - private _dataTypeData: DataTypePropertyPresentationModel[] = []; + private _dataTypeData?: UmbDataTypeConfig; private _dataTypeRepository: UmbDataTypeRepository = new UmbDataTypeRepository(this); private _dataTypeObserver?: UmbObserverController; @@ -92,7 +89,7 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement { this._dataTypeObserver = this.observe( await this._dataTypeRepository.byId(dataTypeId), (dataType) => { - this._dataTypeData = dataType?.values || []; + this._dataTypeData = dataType?.values; this._propertyEditorUiAlias = dataType?.propertyEditorUiAlias || undefined; // If there is no UI, we will look up the Property editor model to find the default UI alias: if (!this._propertyEditorUiAlias && dataType?.propertyEditorAlias) { diff --git a/src/packages/core/extension-registry/interfaces/property-editor-ui-extension-element.interface.ts b/src/packages/core/extension-registry/interfaces/property-editor-ui-extension-element.interface.ts index dd8f391cbd..09d40521dc 100644 --- a/src/packages/core/extension-registry/interfaces/property-editor-ui-extension-element.interface.ts +++ b/src/packages/core/extension-registry/interfaces/property-editor-ui-extension-element.interface.ts @@ -1,6 +1,6 @@ -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; export interface UmbPropertyEditorExtensionElement extends HTMLElement { value: unknown; - config?: UmbDataTypePropertyCollection; + config?: UmbDataTypeConfigCollection; } diff --git a/src/packages/core/extension-registry/models/property-editor.model.ts b/src/packages/core/extension-registry/models/property-editor.model.ts index 5b76646ad0..70a0ef3316 100644 --- a/src/packages/core/extension-registry/models/property-editor.model.ts +++ b/src/packages/core/extension-registry/models/property-editor.model.ts @@ -1,5 +1,5 @@ import type { UmbPropertyEditorExtensionElement } from '../interfaces/index.js'; -import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api'; +import { type UmbDataTypeConfig } from '../../property-editors/index.js'; import type { ManifestElement, ManifestBase } from '@umbraco-cms/backoffice/extension-api'; export interface ManifestPropertyEditorUi extends ManifestElement { @@ -39,7 +39,7 @@ export interface PropertyEditorConfigProperty { description?: string; alias: string; propertyEditorUiAlias: string; - config?: Array; + config?: UmbDataTypeConfig; } export interface PropertyEditorConfigDefaultData { diff --git a/src/packages/core/property-actions/shared/property-action-menu/property-action-menu.element.ts b/src/packages/core/property-actions/shared/property-action-menu/property-action-menu.element.ts index 46ce627581..e3a588b511 100644 --- a/src/packages/core/property-actions/shared/property-action-menu/property-action-menu.element.ts +++ b/src/packages/core/property-actions/shared/property-action-menu/property-action-menu.element.ts @@ -10,9 +10,8 @@ import '../property-action/property-action.element.js'; @customElement('umb-property-action-menu') export class UmbPropertyActionMenuElement extends UmbLitElement { - // TODO: we need to investigate context api vs values props and events - @property() - public value?: string; + @property({ attribute: false }) + public value?: unknown; @property() set propertyEditorUiAlias(alias: string) { diff --git a/src/packages/core/property-actions/shared/property-action/property-action.element.ts b/src/packages/core/property-actions/shared/property-action/property-action.element.ts index 422ba89bfc..882353d6cc 100644 --- a/src/packages/core/property-actions/shared/property-action/property-action.element.ts +++ b/src/packages/core/property-actions/shared/property-action/property-action.element.ts @@ -5,6 +5,7 @@ import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api'; import type { ManifestPropertyAction } from '@umbraco-cms/backoffice/extension-registry'; +// TODO: Here is a problem. The UmbPropertyActionElement is used for the type of the Extension Element. But is also a component that renders the Extension Element... @customElement('umb-property-action') export class UmbPropertyActionElement extends LitElement implements UmbPropertyAction { private _propertyAction?: ManifestPropertyAction; @@ -18,8 +19,8 @@ export class UmbPropertyActionElement extends LitElement implements UmbPropertyA } // TODO: we need to investigate context api vs values props and events - @property() - public value?: string; + @property({ attribute: false }) + public value?: unknown; @state() private _element?: UmbPropertyActionElement; @@ -28,6 +29,7 @@ export class UmbPropertyActionElement extends LitElement implements UmbPropertyA if (!this.propertyAction) return; try { + // TODO: Here is a problem. The UmbPropertyActionElement is used for the type of the Extension Element. But is also a component that renders the Extension Element... this._element = (await createExtensionElement(this.propertyAction)) as UmbPropertyActionElement | undefined; if (!this._element) return; diff --git a/src/packages/core/property-actions/shared/property-action/property-action.model.ts b/src/packages/core/property-actions/shared/property-action/property-action.model.ts index b9d5a15f44..53cfe0823d 100644 --- a/src/packages/core/property-actions/shared/property-action/property-action.model.ts +++ b/src/packages/core/property-actions/shared/property-action/property-action.model.ts @@ -1,3 +1,3 @@ export interface UmbPropertyAction extends HTMLElement { - value?: string; + value?: unknown; } diff --git a/src/packages/core/property-editors/events/index.ts b/src/packages/core/property-editors/events/index.ts new file mode 100644 index 0000000000..b9b734697b --- /dev/null +++ b/src/packages/core/property-editors/events/index.ts @@ -0,0 +1 @@ +export * from './property-value-change.event'; diff --git a/src/packages/core/property-editors/events/property-value-change.event.ts b/src/packages/core/property-editors/events/property-value-change.event.ts new file mode 100644 index 0000000000..67d931325c --- /dev/null +++ b/src/packages/core/property-editors/events/property-value-change.event.ts @@ -0,0 +1,6 @@ +export class UmbPropertyValueChangeEvent extends Event { + public constructor() { + // mimics the native change event + super('property-value-change', { bubbles: true, composed: false, cancelable: false }); + } +} diff --git a/src/packages/core/property-editors/index.ts b/src/packages/core/property-editors/index.ts index 67d931325c..6833ef2bcd 100644 --- a/src/packages/core/property-editors/index.ts +++ b/src/packages/core/property-editors/index.ts @@ -1,6 +1,2 @@ -export class UmbPropertyValueChangeEvent extends Event { - public constructor() { - // mimics the native change event - super('property-value-change', { bubbles: true, composed: false, cancelable: false }); - } -} +export * from './types'; +export * from './events'; diff --git a/src/packages/core/property-editors/manifests.ts b/src/packages/core/property-editors/manifests.ts index 2833682968..4936630ae2 100644 --- a/src/packages/core/property-editors/manifests.ts +++ b/src/packages/core/property-editors/manifests.ts @@ -1,4 +1,4 @@ -import { manifests as propertyEditorSchemaManifests } from './models/manifests.js'; +import { manifests as propertyEditorSchemaManifests } from './schemas/manifests.js'; import { manifests as propertyEditorUIManifests } from './uis/manifests.js'; export const manifests = [...propertyEditorSchemaManifests, ...propertyEditorUIManifests]; diff --git a/src/packages/core/property-editors/models/Umbraco.BlockGrid.ts b/src/packages/core/property-editors/schemas/Umbraco.BlockGrid.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.BlockGrid.ts rename to src/packages/core/property-editors/schemas/Umbraco.BlockGrid.ts diff --git a/src/packages/core/property-editors/models/Umbraco.BlockList.ts b/src/packages/core/property-editors/schemas/Umbraco.BlockList.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.BlockList.ts rename to src/packages/core/property-editors/schemas/Umbraco.BlockList.ts diff --git a/src/packages/core/property-editors/models/Umbraco.CheckboxList.ts b/src/packages/core/property-editors/schemas/Umbraco.CheckboxList.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.CheckboxList.ts rename to src/packages/core/property-editors/schemas/Umbraco.CheckboxList.ts diff --git a/src/packages/core/property-editors/models/Umbraco.ColorPicker.EyeDropper.ts b/src/packages/core/property-editors/schemas/Umbraco.ColorPicker.EyeDropper.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.ColorPicker.EyeDropper.ts rename to src/packages/core/property-editors/schemas/Umbraco.ColorPicker.EyeDropper.ts diff --git a/src/packages/core/property-editors/models/Umbraco.ColorPicker.ts b/src/packages/core/property-editors/schemas/Umbraco.ColorPicker.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.ColorPicker.ts rename to src/packages/core/property-editors/schemas/Umbraco.ColorPicker.ts diff --git a/src/packages/core/property-editors/models/Umbraco.DateTime.ts b/src/packages/core/property-editors/schemas/Umbraco.DateTime.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.DateTime.ts rename to src/packages/core/property-editors/schemas/Umbraco.DateTime.ts diff --git a/src/packages/core/property-editors/models/Umbraco.Decimal.ts b/src/packages/core/property-editors/schemas/Umbraco.Decimal.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.Decimal.ts rename to src/packages/core/property-editors/schemas/Umbraco.Decimal.ts diff --git a/src/packages/core/property-editors/models/Umbraco.Dropdown.Flexible.ts b/src/packages/core/property-editors/schemas/Umbraco.Dropdown.Flexible.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.Dropdown.Flexible.ts rename to src/packages/core/property-editors/schemas/Umbraco.Dropdown.Flexible.ts diff --git a/src/packages/core/property-editors/models/Umbraco.EmailAddress.ts b/src/packages/core/property-editors/schemas/Umbraco.EmailAddress.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.EmailAddress.ts rename to src/packages/core/property-editors/schemas/Umbraco.EmailAddress.ts diff --git a/src/packages/core/property-editors/models/Umbraco.IconPicker.ts b/src/packages/core/property-editors/schemas/Umbraco.IconPicker.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.IconPicker.ts rename to src/packages/core/property-editors/schemas/Umbraco.IconPicker.ts diff --git a/src/packages/core/property-editors/models/Umbraco.ImageCropper.ts b/src/packages/core/property-editors/schemas/Umbraco.ImageCropper.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.ImageCropper.ts rename to src/packages/core/property-editors/schemas/Umbraco.ImageCropper.ts diff --git a/src/packages/core/property-editors/models/Umbraco.Integer.ts b/src/packages/core/property-editors/schemas/Umbraco.Integer.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.Integer.ts rename to src/packages/core/property-editors/schemas/Umbraco.Integer.ts diff --git a/src/packages/core/property-editors/models/Umbraco.JSON.ts b/src/packages/core/property-editors/schemas/Umbraco.JSON.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.JSON.ts rename to src/packages/core/property-editors/schemas/Umbraco.JSON.ts diff --git a/src/packages/core/property-editors/models/Umbraco.Label.ts b/src/packages/core/property-editors/schemas/Umbraco.Label.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.Label.ts rename to src/packages/core/property-editors/schemas/Umbraco.Label.ts diff --git a/src/packages/core/property-editors/models/Umbraco.ListView.ts b/src/packages/core/property-editors/schemas/Umbraco.ListView.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.ListView.ts rename to src/packages/core/property-editors/schemas/Umbraco.ListView.ts diff --git a/src/packages/core/property-editors/models/Umbraco.MarkdownEditor.ts b/src/packages/core/property-editors/schemas/Umbraco.MarkdownEditor.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.MarkdownEditor.ts rename to src/packages/core/property-editors/schemas/Umbraco.MarkdownEditor.ts diff --git a/src/packages/core/property-editors/models/Umbraco.MediaPicker3.ts b/src/packages/core/property-editors/schemas/Umbraco.MediaPicker3.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.MediaPicker3.ts rename to src/packages/core/property-editors/schemas/Umbraco.MediaPicker3.ts diff --git a/src/packages/core/property-editors/models/Umbraco.MemberGroupPicker.ts b/src/packages/core/property-editors/schemas/Umbraco.MemberGroupPicker.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.MemberGroupPicker.ts rename to src/packages/core/property-editors/schemas/Umbraco.MemberGroupPicker.ts diff --git a/src/packages/core/property-editors/models/Umbraco.MemberPicker.ts b/src/packages/core/property-editors/schemas/Umbraco.MemberPicker.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.MemberPicker.ts rename to src/packages/core/property-editors/schemas/Umbraco.MemberPicker.ts diff --git a/src/packages/core/property-editors/models/Umbraco.MultiNodeTreePicker.ts b/src/packages/core/property-editors/schemas/Umbraco.MultiNodeTreePicker.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.MultiNodeTreePicker.ts rename to src/packages/core/property-editors/schemas/Umbraco.MultiNodeTreePicker.ts diff --git a/src/packages/core/property-editors/models/Umbraco.MultiUrlPicker.ts b/src/packages/core/property-editors/schemas/Umbraco.MultiUrlPicker.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.MultiUrlPicker.ts rename to src/packages/core/property-editors/schemas/Umbraco.MultiUrlPicker.ts diff --git a/src/packages/core/property-editors/models/Umbraco.MultipleTextString.ts b/src/packages/core/property-editors/schemas/Umbraco.MultipleTextString.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.MultipleTextString.ts rename to src/packages/core/property-editors/schemas/Umbraco.MultipleTextString.ts diff --git a/src/packages/core/property-editors/models/Umbraco.RadioButtonList.ts b/src/packages/core/property-editors/schemas/Umbraco.RadioButtonList.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.RadioButtonList.ts rename to src/packages/core/property-editors/schemas/Umbraco.RadioButtonList.ts diff --git a/src/packages/core/property-editors/models/Umbraco.RichText.ts b/src/packages/core/property-editors/schemas/Umbraco.RichText.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.RichText.ts rename to src/packages/core/property-editors/schemas/Umbraco.RichText.ts diff --git a/src/packages/core/property-editors/models/Umbraco.Slider.ts b/src/packages/core/property-editors/schemas/Umbraco.Slider.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.Slider.ts rename to src/packages/core/property-editors/schemas/Umbraco.Slider.ts diff --git a/src/packages/core/property-editors/models/Umbraco.Tags.ts b/src/packages/core/property-editors/schemas/Umbraco.Tags.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.Tags.ts rename to src/packages/core/property-editors/schemas/Umbraco.Tags.ts diff --git a/src/packages/core/property-editors/models/Umbraco.TextArea.ts b/src/packages/core/property-editors/schemas/Umbraco.TextArea.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.TextArea.ts rename to src/packages/core/property-editors/schemas/Umbraco.TextArea.ts diff --git a/src/packages/core/property-editors/models/Umbraco.TextBox.ts b/src/packages/core/property-editors/schemas/Umbraco.TextBox.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.TextBox.ts rename to src/packages/core/property-editors/schemas/Umbraco.TextBox.ts diff --git a/src/packages/core/property-editors/models/Umbraco.TrueFalse.ts b/src/packages/core/property-editors/schemas/Umbraco.TrueFalse.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.TrueFalse.ts rename to src/packages/core/property-editors/schemas/Umbraco.TrueFalse.ts diff --git a/src/packages/core/property-editors/models/Umbraco.UploadField.ts b/src/packages/core/property-editors/schemas/Umbraco.UploadField.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.UploadField.ts rename to src/packages/core/property-editors/schemas/Umbraco.UploadField.ts diff --git a/src/packages/core/property-editors/models/Umbraco.UserPicker.ts b/src/packages/core/property-editors/schemas/Umbraco.UserPicker.ts similarity index 100% rename from src/packages/core/property-editors/models/Umbraco.UserPicker.ts rename to src/packages/core/property-editors/schemas/Umbraco.UserPicker.ts diff --git a/src/packages/core/property-editors/models/manifests.ts b/src/packages/core/property-editors/schemas/manifests.ts similarity index 100% rename from src/packages/core/property-editors/models/manifests.ts rename to src/packages/core/property-editors/schemas/manifests.ts diff --git a/src/packages/core/property-editors/types/data-type-config.type.ts b/src/packages/core/property-editors/types/data-type-config.type.ts new file mode 100644 index 0000000000..b32c367ef7 --- /dev/null +++ b/src/packages/core/property-editors/types/data-type-config.type.ts @@ -0,0 +1,4 @@ +import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api'; + +export type UmbDataTypeConfigProperty = DataTypePropertyPresentationModel; +export type UmbDataTypeConfig = UmbDataTypeConfigProperty[]; diff --git a/src/packages/core/property-editors/types/index.ts b/src/packages/core/property-editors/types/index.ts new file mode 100644 index 0000000000..8865f4e376 --- /dev/null +++ b/src/packages/core/property-editors/types/index.ts @@ -0,0 +1 @@ +export * from './data-type-config.type'; diff --git a/src/packages/core/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts b/src/packages/core/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts index d8f96d5f72..5f96bcb745 100644 --- a/src/packages/core/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts +++ b/src/packages/core/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts @@ -6,7 +6,7 @@ import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-block-grid @@ -18,8 +18,8 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement @property() value = ''; - @property({ type: Array, attribute: false }) - public config?: UmbDataTypePropertyCollection; + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; @state() private _routes: UmbRoute[] = []; diff --git a/src/packages/core/property-editors/uis/block-list/property-editor-ui-block-list.element.ts b/src/packages/core/property-editors/uis/block-list/property-editor-ui-block-list.element.ts index bce8f210af..2239e61b84 100644 --- a/src/packages/core/property-editors/uis/block-list/property-editor-ui-block-list.element.ts +++ b/src/packages/core/property-editors/uis/block-list/property-editor-ui-block-list.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-block-list @@ -12,8 +12,8 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement @property() value = ''; - @property({ type: Array, attribute: false }) - public config?: UmbDataTypePropertyCollection; + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; render() { return html`
umb-property-editor-ui-block-list
`; diff --git a/src/packages/core/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/packages/core/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts index 0695413cf1..b0c7fb6ffc 100644 --- a/src/packages/core/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts +++ b/src/packages/core/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts @@ -3,7 +3,7 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/ex import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-checkbox-list @@ -19,8 +19,9 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem this.#value = value ?? []; } - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + if (!config) return; const listData: Record | undefined = config.getValueByAlias('items'); if (!listData) return; diff --git a/src/packages/core/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts b/src/packages/core/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts index 24c630ca8a..c322797111 100644 --- a/src/packages/core/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts +++ b/src/packages/core/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts @@ -3,7 +3,7 @@ import { UUITextStyles, UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/ex import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-color-picker @@ -21,10 +21,10 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme @state() private _swatches: UmbSwatchDetails[] = []; - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - this._showLabels = config.getValueByAlias('useLabel') ?? this.#defaultShowLabels; - this._swatches = config.getValueByAlias('items') ?? []; + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels; + this._swatches = config?.getValueByAlias('items') ?? []; } private _onChange(event: UUIColorSwatchesEvent) { diff --git a/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts index 5000ed07a2..53ce65b1f0 100644 --- a/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts +++ b/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts @@ -3,7 +3,7 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/ex import { UUITextStyles, InputType } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-date-picker @@ -53,8 +53,9 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen private _offsetTime?: boolean; - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + if (!config) return; const oldVal = this._inputType; // Format string prevalue/config diff --git a/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts b/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts index 35dccfc20c..f9f1e29af1 100644 --- a/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts +++ b/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts @@ -3,14 +3,14 @@ import type { UmbPropertyEditorUIDatePickerElement } from './property-editor-ui- import { html } from '@umbraco-cms/backoffice/external/lit'; import './property-editor-ui-date-picker.element.js'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; export default { title: 'Property Editor UIs/Date Picker', component: 'umb-property-editor-ui-date-picker', id: 'umb-property-editor-ui-date-picker', args: { - config: new UmbDataTypePropertyCollection([ + config: new UmbDataTypeConfigCollection([ { alias: 'format', value: 'YYYY-MM-DD HH:mm:ss', @@ -31,7 +31,7 @@ WithDateValue.args = { export const WithFormat = Template.bind({}); WithFormat.args = { - config: new UmbDataTypePropertyCollection([ + config: new UmbDataTypeConfigCollection([ { alias: 'format', value: 'dd/MM/yyyy HH:mm:ss', @@ -41,7 +41,7 @@ WithFormat.args = { export const Timeframe = Template.bind({}); Timeframe.args = { - config: new UmbDataTypePropertyCollection([ + config: new UmbDataTypeConfigCollection([ { alias: 'format', value: 'dd/MM/yyyy HH:mm:ss', @@ -59,7 +59,7 @@ Timeframe.args = { export const TimeOnly = Template.bind({}); TimeOnly.args = { - config: new UmbDataTypePropertyCollection([ + config: new UmbDataTypeConfigCollection([ { alias: 'format', value: 'HH:mm:ss', @@ -69,7 +69,7 @@ TimeOnly.args = { export const DateOnly = Template.bind({}); DateOnly.args = { - config: new UmbDataTypePropertyCollection([ + config: new UmbDataTypeConfigCollection([ { alias: 'format', value: 'dd/MM/yyyy', diff --git a/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts b/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts index dd4a637fc2..bf923029a6 100644 --- a/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts +++ b/src/packages/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts @@ -2,7 +2,7 @@ import { expect, fixture, html } from '@open-wc/testing'; import { UmbInputDateElement } from '../../../components/input-date/input-date.element.js'; import { UmbPropertyEditorUIDatePickerElement } from './property-editor-ui-date-picker.element.js'; import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; describe('UmbPropertyEditorUIDatePickerElement', () => { let element: UmbPropertyEditorUIDatePickerElement; @@ -26,13 +26,13 @@ describe('UmbPropertyEditorUIDatePickerElement', () => { }); it('should show a type=date field if the format only contains a date', async () => { - element.config = new UmbDataTypePropertyCollection([{ alias: 'format', value: 'YYYY-MM-dd' }]); + element.config = new UmbDataTypeConfigCollection([{ alias: 'format', value: 'YYYY-MM-dd' }]); await element.updateComplete; expect(inputElement.type).to.equal('date'); }); it('should show a type=time field if the format only contains a time', async () => { - element.config = new UmbDataTypePropertyCollection([{ alias: 'format', value: 'HH:mm' }]); + element.config = new UmbDataTypeConfigCollection([{ alias: 'format', value: 'HH:mm' }]); await element.updateComplete; expect(inputElement.type).to.equal('time'); }); diff --git a/src/packages/core/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts b/src/packages/core/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts index 56ef27fe24..ded84ee76d 100644 --- a/src/packages/core/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts +++ b/src/packages/core/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-dropdown @@ -13,7 +13,7 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements value = ''; @property({ attribute: false }) - public config?: UmbDataTypePropertyCollection; + public config?: UmbDataTypeConfigCollection; render() { return html`
umb-property-editor-ui-dropdown
`; diff --git a/src/packages/core/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/packages/core/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts index e13fb01b6b..feab89f6c2 100644 --- a/src/packages/core/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts +++ b/src/packages/core/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/ex import { UUITextStyles, UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-eye-dropper @@ -20,10 +20,12 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implemen @state() private _swatches: string[] = []; - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - this._opacity = config.getValueByAlias('showAlpha') ?? this.#defaultOpacity; - this._swatches = config.getValueByAlias('palette') ?? []; + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + if (config) { + this._opacity = config.getValueByAlias('showAlpha') ?? this.#defaultOpacity; + this._swatches = config.getValueByAlias('palette') ?? []; + } } private _onChange(event: UUIColorPickerChangeEvent) { diff --git a/src/packages/core/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts b/src/packages/core/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts index 0961109412..c37d42d8cd 100644 --- a/src/packages/core/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts +++ b/src/packages/core/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts @@ -7,7 +7,7 @@ import { UMB_ICON_PICKER_MODAL, } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-icon-picker @@ -17,8 +17,8 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implemen @property() value = ''; - @property({ type: Array, attribute: false }) - public config?: UmbDataTypePropertyCollection; + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; private _modalContext?: UmbModalManagerContext; diff --git a/src/packages/core/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts b/src/packages/core/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts index 32371aab92..7a15e6ce4a 100644 --- a/src/packages/core/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts +++ b/src/packages/core/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-image-cropper @@ -12,8 +12,8 @@ export class UmbPropertyEditorUIImageCropperElement extends UmbLitElement implem @property() value = ''; - @property({ type: Array, attribute: false }) - public config?: UmbDataTypePropertyCollection; + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; render() { return html`
umb-property-editor-ui-image-cropper
`; diff --git a/src/packages/core/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts b/src/packages/core/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts index 36ee6883d4..a3e5318917 100644 --- a/src/packages/core/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts +++ b/src/packages/core/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-image-crops-configuration @@ -15,8 +15,8 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement @property() value = ''; - @property({ type: Array, attribute: false }) - public config = new UmbDataTypePropertyCollection(); + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; render() { return html`
umb-property-editor-ui-image-crops-configuration
`; diff --git a/src/packages/core/property-editors/uis/label/property-editor-ui-label.element.ts b/src/packages/core/property-editors/uis/label/property-editor-ui-label.element.ts index 9aea140476..e088b3eb79 100644 --- a/src/packages/core/property-editors/uis/label/property-editor-ui-label.element.ts +++ b/src/packages/core/property-editors/uis/label/property-editor-ui-label.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-label @@ -15,8 +15,8 @@ export class UmbPropertyEditorUILabelElement extends UmbLitElement implements Um @property() description = ''; - @property({ type: Array, attribute: false }) - public config?: UmbDataTypePropertyCollection; + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; render() { return html`${this.value ?? ''}`; diff --git a/src/packages/core/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts b/src/packages/core/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts index 3a3e79e050..de2b862acc 100644 --- a/src/packages/core/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts +++ b/src/packages/core/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-markdown-editor @@ -15,8 +15,8 @@ export class UmbPropertyEditorUIMarkdownEditorElement @property() value = ''; - @property({ type: Array, attribute: false }) - public config = new UmbDataTypePropertyCollection(); + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; render() { return html`
umb-property-editor-ui-markdown-editor
`; diff --git a/src/packages/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts b/src/packages/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts index 04004388f8..f37308e4c8 100644 --- a/src/packages/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts +++ b/src/packages/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts @@ -1,6 +1,6 @@ import { UmbInputMediaElement } from '../../../../media/media/components/input-media/input-media.element.js'; import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -19,9 +19,9 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme this._value = value || []; } - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - const validationLimit = config.getByAlias('validationLimit'); + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + const validationLimit = config?.getByAlias('validationLimit'); if (!validationLimit) return; const minMax: Record = validationLimit.value; diff --git a/src/packages/core/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts b/src/packages/core/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts index 02bcebf669..1d72bcb4e3 100644 --- a/src/packages/core/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts +++ b/src/packages/core/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-member-group-picker @@ -15,8 +15,8 @@ export class UmbPropertyEditorUIMemberGroupPickerElement @property() value = ''; - @property({ type: Array, attribute: false }) - public config = new UmbDataTypePropertyCollection(); + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; render() { return html`
umb-property-editor-ui-member-group-picker
`; diff --git a/src/packages/core/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts b/src/packages/core/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts index 0a7fdd2f69..74946a89e1 100644 --- a/src/packages/core/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts +++ b/src/packages/core/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-member-picker @@ -12,8 +12,8 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem @property() value = ''; - @property({ type: Array, attribute: false }) - public config = new UmbDataTypePropertyCollection(); + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; render() { return html`
umb-property-editor-ui-member-picker
`; diff --git a/src/packages/core/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/packages/core/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts index 3e6c588658..f043fcf0e8 100644 --- a/src/packages/core/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts +++ b/src/packages/core/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts @@ -6,7 +6,7 @@ import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/wo import { UmbLinkPickerLink } from '@umbraco-cms/backoffice/modal'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-multi-url-picker @@ -19,13 +19,13 @@ export class UmbPropertyEditorUIMultiUrlPickerElement @property({ type: Array }) value: UmbLinkPickerLink[] = []; - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - this._overlaySize = config.getValueByAlias('overlaySize'); - this._hideAnchor = config.getValueByAlias('hideAnchor'); - this._ignoreUserStartNodes = config.getValueByAlias('ignoreUserStartNodes'); - this._minNumber = config.getValueByAlias('minNumber'); - this._maxNumber = config.getValueByAlias('maxNumber'); + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + this._overlaySize = config?.getValueByAlias('overlaySize'); + this._hideAnchor = config?.getValueByAlias('hideAnchor'); + this._ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes'); + this._minNumber = config?.getValueByAlias('minNumber'); + this._maxNumber = config?.getValueByAlias('maxNumber'); } @state() diff --git a/src/packages/core/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/packages/core/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts index 9de4b73f06..6a21a9804c 100644 --- a/src/packages/core/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts +++ b/src/packages/core/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts @@ -4,7 +4,7 @@ import { MultipleTextStringValue, } from './input-multiple-text-string/input-multiple-text-string.element.js'; import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/events'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -20,10 +20,10 @@ export class UmbPropertyEditorUIMultipleTextStringElement @property({ type: Array }) public value: MultipleTextStringValue = []; - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - this._limitMin = config.getValueByAlias('minNumber'); - this._limitMax = config.getValueByAlias('maxNumber'); + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + this._limitMin = config?.getValueByAlias('minNumber'); + this._limitMax = config?.getValueByAlias('maxNumber'); } /** diff --git a/src/packages/core/property-editors/uis/number-range/property-editor-ui-number-range.element.ts b/src/packages/core/property-editors/uis/number-range/property-editor-ui-number-range.element.ts index 391b641a12..1ccb715d85 100644 --- a/src/packages/core/property-editors/uis/number-range/property-editor-ui-number-range.element.ts +++ b/src/packages/core/property-editors/uis/number-range/property-editor-ui-number-range.element.ts @@ -3,7 +3,7 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/ex import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; import '../../../components/input-number-range/input-number-range.element.js'; @@ -28,8 +28,8 @@ export class UmbPropertyEditorUINumberRangeElement extends UmbLitElement impleme this._maxValue = value?.max; } - @property({ type: Array, attribute: false }) - public config = new UmbDataTypePropertyCollection(); + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; private _onChange(event: CustomEvent) { this.value = { diff --git a/src/packages/core/property-editors/uis/number/property-editor-ui-number.element.ts b/src/packages/core/property-editors/uis/number/property-editor-ui-number.element.ts index 1b9b6ec51a..1eda8023b6 100644 --- a/src/packages/core/property-editors/uis/number/property-editor-ui-number.element.ts +++ b/src/packages/core/property-editors/uis/number/property-editor-ui-number.element.ts @@ -2,7 +2,7 @@ import { css, html, customElement, property, state, ifDefined } from '@umbraco-c import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; @customElement('umb-property-editor-ui-number') export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorExtensionElement { @@ -18,11 +18,11 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U @state() private _step?: number; - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - this._min = config.getValueByAlias('min'); - this._max = config.getValueByAlias('max'); - this._step = config.getValueByAlias('step'); + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + this._min = config?.getValueByAlias('min'); + this._max = config?.getValueByAlias('max'); + this._step = config?.getValueByAlias('step'); } private onInput(e: InputEvent) { diff --git a/src/packages/core/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts b/src/packages/core/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts index 14b48efe00..1f3d7beab9 100644 --- a/src/packages/core/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts +++ b/src/packages/core/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-order-direction @@ -15,8 +15,8 @@ export class UmbPropertyEditorUIOrderDirectionElement @property() value = ''; - @property({ type: Array, attribute: false }) - public config = new UmbDataTypePropertyCollection(); + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; render() { return html`
umb-property-editor-ui-order-direction
`; diff --git a/src/packages/core/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts b/src/packages/core/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts index 13827e4df8..99196b02d7 100644 --- a/src/packages/core/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts +++ b/src/packages/core/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-overlay-size @@ -12,8 +12,8 @@ export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement impleme @property() value = ''; - @property({ type: Array, attribute: false }) - public config = new UmbDataTypePropertyCollection(); + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; render() { return html`
umb-property-editor-ui-overlay-size
`; diff --git a/src/packages/core/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts b/src/packages/core/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts index 9593078431..c8240a518e 100644 --- a/src/packages/core/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts +++ b/src/packages/core/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts @@ -1,7 +1,7 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import '../../../components/input-radio-button-list/input-radio-button-list.element.js'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; import type { UmbInputRadioButtonListElement } from '../../../components/input-radio-button-list/input-radio-button-list.element.js'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -23,8 +23,9 @@ export class UmbPropertyEditorUIRadioButtonListElement this.#value = value?.trim() || ''; } - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + if (!config) return; const listData: Record | undefined = config.getValueByAlias('items'); if (!listData) return; diff --git a/src/packages/core/property-editors/uis/slider/property-editor-ui-slider.element.ts b/src/packages/core/property-editors/uis/slider/property-editor-ui-slider.element.ts index a34a51bd32..d3de6e352f 100644 --- a/src/packages/core/property-editors/uis/slider/property-editor-ui-slider.element.ts +++ b/src/packages/core/property-editors/uis/slider/property-editor-ui-slider.element.ts @@ -3,14 +3,14 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/ex import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-slider */ @customElement('umb-property-editor-ui-slider') export class UmbPropertyEditorUISliderElement extends UmbLitElement implements UmbPropertyEditorExtensionElement { - @property() + @property({ type: Object }) value: | { to?: number; @@ -36,14 +36,14 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U @state() _max?: number; - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - this._enableRange = config.getValueByAlias('enableRange'); - this._initVal1 = config.getValueByAlias('initVal1'); - this._initVal2 = config.getValueByAlias('initVal2'); - this._step = config.getValueByAlias('step'); - this._min = config.getValueByAlias('minVal'); - this._max = config.getValueByAlias('maxVal'); + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + this._enableRange = config?.getValueByAlias('enableRange'); + this._initVal1 = config?.getValueByAlias('initVal1'); + this._initVal2 = config?.getValueByAlias('initVal2'); + this._step = config?.getValueByAlias('step'); + this._min = config?.getValueByAlias('minVal'); + this._max = config?.getValueByAlias('maxVal'); } #getValueObject(val: string) { diff --git a/src/packages/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts b/src/packages/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts index 16fd0cd44f..66c0fe216b 100644 --- a/src/packages/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts +++ b/src/packages/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts @@ -2,7 +2,7 @@ import { css, html, customElement, property, state, ifDefined } from '@umbraco-c import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; @customElement('umb-property-editor-ui-text-box') export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements UmbPropertyEditorExtensionElement { @@ -17,10 +17,10 @@ export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements @state() private _maxChars?: number; - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - this._type = config.getValueByAlias('inputType') ?? this.#defaultType; - this._maxChars = config.getValueByAlias('maxChars'); + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + this._type = config?.getValueByAlias('inputType') ?? this.#defaultType; + this._maxChars = config?.getValueByAlias('maxChars'); } private onInput(e: InputEvent) { diff --git a/src/packages/core/property-editors/uis/textarea/property-editor-ui-textarea.element.ts b/src/packages/core/property-editors/uis/textarea/property-editor-ui-textarea.element.ts index fc0641e57f..93a93a207a 100644 --- a/src/packages/core/property-editors/uis/textarea/property-editor-ui-textarea.element.ts +++ b/src/packages/core/property-editors/uis/textarea/property-editor-ui-textarea.element.ts @@ -2,7 +2,7 @@ import { css, html, customElement, property, state, ifDefined, styleMap } from ' import { UUITextStyles, UUITextareaElement } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; @customElement('umb-property-editor-ui-textarea') export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements UmbPropertyEditorExtensionElement { @@ -24,12 +24,12 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements @state() private _css?: any; - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - this._maxChars = config.getValueByAlias('maxChars'); - this._rows = config.getValueByAlias('rows'); - this._minHeight = config.getValueByAlias('minHeight'); - this._maxHeight = config.getValueByAlias('maxHeight'); + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + this._maxChars = config?.getValueByAlias('maxChars'); + this._rows = config?.getValueByAlias('rows'); + this._minHeight = config?.getValueByAlias('minHeight'); + this._maxHeight = config?.getValueByAlias('maxHeight'); this._css = { '--uui-textarea-min-height': `${this._minHeight ? `${this._minHeight}px` : 'reset'}`, diff --git a/src/packages/core/property-editors/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts b/src/packages/core/property-editors/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts index cf5efd2457..e7e37b9f99 100644 --- a/src/packages/core/property-editors/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts +++ b/src/packages/core/property-editors/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts @@ -3,7 +3,7 @@ import { customElement, css, html, property, map, state, PropertyValueMap } from import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbPropertyEditorExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; import { tinymce } from '@umbraco-cms/backoffice/external/tinymce'; const tinyIconSet = tinymce.default?.IconManager.get('default'); @@ -28,7 +28,7 @@ export class UmbPropertyEditorUITinyMceToolbarConfigurationElement if (!value) return; if (typeof value === 'string') { - this.#selectedValues = value.split(',').filter(x => x.length > 0); + this.#selectedValues = value.split(',').filter((x) => x.length > 0); } else if (Array.isArray(value)) { this.#selectedValues = value; } else { @@ -51,8 +51,8 @@ export class UmbPropertyEditorUITinyMceToolbarConfigurationElement return this.#selectedValues; } - @property({ type: Array, attribute: false }) - config?: UmbDataTypePropertyCollection; + @property({ attribute: false }) + config?: UmbDataTypeConfigCollection; @state() private _toolbarConfig: ToolbarConfig[] = []; diff --git a/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts b/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts index 4222d3be56..d1f410ed90 100644 --- a/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts +++ b/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts @@ -2,21 +2,20 @@ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-tiny-mce */ @customElement('umb-property-editor-ui-tiny-mce') export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements UmbPropertyEditorExtensionElement { - - #configuration?: UmbDataTypePropertyCollection; + #configuration?: UmbDataTypeConfigCollection; @property({ type: String }) value = ''; @property({ attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { + public set config(config: UmbDataTypeConfigCollection | undefined) { this.#configuration = config; } @@ -41,4 +40,4 @@ declare global { interface HTMLElementTagNameMap { 'umb-property-editor-ui-tiny-mce': UmbPropertyEditorUITinyMceElement; } -} \ No newline at end of file +} diff --git a/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts b/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts index cc623647e9..c099b3d2b5 100644 --- a/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts +++ b/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.stories.ts @@ -1,10 +1,10 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import type { UmbPropertyEditorUITinyMceElement } from './property-editor-ui-tiny-mce.element.js'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; import './property-editor-ui-tiny-mce.element.js'; -const config = new UmbDataTypePropertyCollection([ +const config = new UmbDataTypeConfigCollection([ { alias: 'hideLabel', value: true, diff --git a/src/packages/core/property-editors/uis/toggle/property-editor-ui-toggle.element.ts b/src/packages/core/property-editors/uis/toggle/property-editor-ui-toggle.element.ts index aec736e0b3..2460734f2f 100644 --- a/src/packages/core/property-editors/uis/toggle/property-editor-ui-toggle.element.ts +++ b/src/packages/core/property-editors/uis/toggle/property-editor-ui-toggle.element.ts @@ -1,7 +1,7 @@ import { UmbInputToggleElement } from '../../../components/input-toggle/input-toggle.element.js'; import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -10,7 +10,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; */ @customElement('umb-property-editor-ui-toggle') export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements UmbPropertyEditorExtensionElement { - @property() + @property({ type: Boolean }) value: undefined | boolean = undefined; @state() @@ -22,12 +22,12 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U @state() _showLabels?: boolean; - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - this.value ??= config.getValueByAlias('default') ?? false; - this._labelOff = config.getValueByAlias('labelOff'); - this._labelOn = config.getValueByAlias('labelOn'); - this._showLabels = config.getValueByAlias('showLabels'); + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + this.value ??= config?.getValueByAlias('default') ?? false; + this._labelOff = config?.getValueByAlias('labelOff'); + this._labelOn = config?.getValueByAlias('labelOn'); + this._showLabels = config?.getValueByAlias('showLabels'); } private _onChange(event: CustomEvent) { diff --git a/src/packages/core/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/packages/core/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts index a974d03090..8011064c20 100644 --- a/src/packages/core/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts +++ b/src/packages/core/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-tree-picker @@ -12,8 +12,8 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen @property() value = ''; - @property({ type: Array, attribute: false }) - public config = new UmbDataTypePropertyCollection(); + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; render() { return html`
umb-property-editor-ui-tree-picker
`; diff --git a/src/packages/core/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts b/src/packages/core/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts index a045e2150f..aef35cec95 100644 --- a/src/packages/core/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts +++ b/src/packages/core/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts @@ -3,7 +3,7 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/ex import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import type { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-upload-field @@ -13,10 +13,10 @@ export class UmbPropertyEditorUIUploadFieldElement extends UmbLitElement impleme @property() value = ''; - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - this._fileExtensions = config.getValueByAlias('fileExtensions'); - this._multiple = config.getValueByAlias('multiple'); + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + this._fileExtensions = config?.getValueByAlias('fileExtensions'); + this._multiple = config?.getValueByAlias('multiple'); } @state() diff --git a/src/packages/core/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts b/src/packages/core/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts index f31d862474..1e1441f742 100644 --- a/src/packages/core/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts +++ b/src/packages/core/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-user-picker @@ -12,8 +12,8 @@ export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implemen @property() value = ''; - @property({ type: Array, attribute: false }) - public config = new UmbDataTypePropertyCollection(); + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; // TODO: implement config render() { diff --git a/src/packages/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts b/src/packages/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts index c6bdca39f8..4b0cf8802c 100644 --- a/src/packages/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts +++ b/src/packages/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts @@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-value-type @@ -38,8 +38,8 @@ export class UmbPropertyEditorUIValueTypeElement extends UmbLitElement implement { name: 'Long String', value: 'TEXT' }, ]; - @property({ type: Array, attribute: false }) - public config?: UmbDataTypePropertyCollection; + @property({ attribute: false }) + public config?: UmbDataTypeConfigCollection; #onChange(e: UUISelectEvent) { this.value = e.target.value as string; diff --git a/src/packages/core/workspace/types/index.ts b/src/packages/core/workspace/types/index.ts new file mode 100644 index 0000000000..8ae28a46ca --- /dev/null +++ b/src/packages/core/workspace/types/index.ts @@ -0,0 +1 @@ +export * from './workspace-property-data.type'; diff --git a/src/packages/core/workspace/types/workspace-property-data.type.ts b/src/packages/core/workspace/types/workspace-property-data.type.ts new file mode 100644 index 0000000000..b9e1788774 --- /dev/null +++ b/src/packages/core/workspace/types/workspace-property-data.type.ts @@ -0,0 +1,9 @@ +import { type UmbDataTypeConfig } from '../../property-editors/index.js'; + +export type WorkspacePropertyData = { + alias?: string; + label?: string; + description?: string; + value?: ValueType | null; + config?: UmbDataTypeConfig; // This could potentially then come from hardcoded JS object and not the DataType store. +}; diff --git a/src/packages/core/workspace/workspace-property/workspace-property.context.ts b/src/packages/core/workspace/workspace-property/workspace-property.context.ts index c1e2a7f790..871eb31e98 100644 --- a/src/packages/core/workspace/workspace-property/workspace-property.context.ts +++ b/src/packages/core/workspace/workspace-property/workspace-property.context.ts @@ -1,45 +1,40 @@ import { UmbWorkspaceVariableEntityContextInterface } from '../workspace-context/workspace-variable-entity-context.interface.js'; import { UmbPropertyEditorExtensionElement } from '../../extension-registry/interfaces/property-editor-ui-extension-element.interface.js'; -import { BehaviorSubject } from '@umbraco-cms/backoffice/external/rxjs'; +import { type WorkspacePropertyData } from '../types/workspace-property-data.type.js'; import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN, UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; -import type { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api'; import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; import { UmbClassState, UmbObjectState, UmbStringState, UmbObserverController, + UmbBasicState, } from '@umbraco-cms/backoffice/observable-api'; import { UmbContextConsumerController, UmbContextProviderController, UmbContextToken, } from '@umbraco-cms/backoffice/context-api'; - -// If we get this from the server then we can consider using TypeScripts Partial<> around the model from the Management-API. -export type WorkspacePropertyData = { - alias?: string; - label?: string; - description?: string; - value?: ValueType | null; - config?: DataTypeResponseModel['values']; // This could potentially then come from hardcoded JS object and not the DataType store. -}; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; export class UmbWorkspacePropertyContext { #host: UmbControllerHostElement; private _providerController: UmbContextProviderController; - private _data = new UmbObjectState>({}); + #data = new UmbObjectState>({}); + + public readonly alias = this.#data.getObservablePart((data) => data.alias); + public readonly label = this.#data.getObservablePart((data) => data.label); + public readonly description = this.#data.getObservablePart((data) => data.description); + public readonly value = this.#data.getObservablePart((data) => data.value); + public readonly configValues = this.#data.getObservablePart((data) => data.config); - public readonly alias = this._data.getObservablePart((data) => data.alias); - public readonly label = this._data.getObservablePart((data) => data.label); - public readonly description = this._data.getObservablePart((data) => data.description); - public readonly value = this._data.getObservablePart((data) => data.value); - public readonly config = this._data.getObservablePart((data) => data.config); + #configCollection = new UmbClassState(undefined); + public readonly config = this.#configCollection.asObservable(); - private _editor = new BehaviorSubject(undefined); + private _editor = new UmbBasicState(undefined); public readonly editor = this._editor.asObservable(); setEditor(editor: UmbPropertyEditorExtensionElement | undefined) { this._editor.next(editor ?? undefined); @@ -67,6 +62,10 @@ export class UmbWorkspacePropertyContext { this._providerController = new UmbContextProviderController(host, UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, this); + this.configValues.subscribe((configValues) => { + this.#configCollection.next(configValues ? new UmbDataTypeConfigCollection(configValues) : undefined); + }); + this.variantId.subscribe((propertyVariantId) => { if (propertyVariantId) { if (!this._workspaceVariantConsumer) { @@ -94,28 +93,28 @@ export class UmbWorkspacePropertyContext { } public setAlias(alias: WorkspacePropertyData['alias']) { - this._data.update({ alias }); + this.#data.update({ alias }); } public setLabel(label: WorkspacePropertyData['label']) { - this._data.update({ label }); + this.#data.update({ label }); } public setDescription(description: WorkspacePropertyData['description']) { - this._data.update({ description }); + this.#data.update({ description }); } public setValue(value: WorkspacePropertyData['value']) { // Note: Do not try to compare new / old value, as it can of any type. We trust the UmbObjectState in doing such. - this._data.update({ value }); + this.#data.update({ value }); } public changeValue(value: WorkspacePropertyData['value']) { this.setValue(value); - const alias = this._data.getValue().alias; + const alias = this.#data.getValue().alias; if (alias) { this._workspaceContext?.setPropertyValue(alias, value, this.#variantId.getValue()); } } public setConfig(config: WorkspacePropertyData['config'] | undefined) { - this._data.update({ config }); + this.#data.update({ config }); } public setVariantId(variantId: UmbVariantId | undefined) { this.#variantId.next(variantId); @@ -129,7 +128,7 @@ export class UmbWorkspacePropertyContext { } public destroy(): void { - this._data.unsubscribe(); + this.#data.unsubscribe(); this._providerController.destroy(); // This would also be handled by the controller host, but if someone wanted to replace/remove this context without the host being destroyed. Then we have clean up out selfs here. } } diff --git a/src/packages/core/workspace/workspace-property/workspace-property.element.ts b/src/packages/core/workspace/workspace-property/workspace-property.element.ts index 7b809abfb5..b03cfdbd5f 100644 --- a/src/packages/core/workspace/workspace-property/workspace-property.element.ts +++ b/src/packages/core/workspace/workspace-property/workspace-property.element.ts @@ -1,3 +1,4 @@ +import { type UmbDataTypeConfig } from '../../property-editors/index.js'; import { UmbWorkspacePropertyContext } from './workspace-property.context.js'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; @@ -6,8 +7,7 @@ import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api'; import { ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api'; -import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; /** * @element umb-workspace-property @@ -85,8 +85,8 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { * @attr * @default '' */ - @property({ type: Object, attribute: false }) - public set config(value: DataTypePropertyPresentationModel[] | undefined) { + @property({ type: Array, attribute: false }) + public set config(value: UmbDataTypeConfig | undefined) { this._propertyContext.setConfig(value); } @@ -123,10 +123,8 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { private _propertyContext = new UmbWorkspacePropertyContext(this); - private propertyEditorUIObserver?: UmbObserverController; - private _valueObserver?: UmbObserverController; - private _configObserver?: UmbObserverController; + private _configObserver?: UmbObserverController; constructor() { super(); @@ -154,8 +152,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { }; private _observePropertyEditorUI() { - this.propertyEditorUIObserver?.destroy(); - this.propertyEditorUIObserver = this.observe( + this.observe( umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUi', this._propertyEditorUiAlias), (manifest) => { this._gotEditorUI(manifest); @@ -202,7 +199,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement { this._propertyContext.config, (config) => { if (this._element && config) { - this._element.config = new UmbDataTypePropertyCollection(config); + this._element.config = config; } }, '_observePropertyConfig' diff --git a/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts b/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts index 3c810524f2..22890ad896 100644 --- a/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts +++ b/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts @@ -2,7 +2,7 @@ import type { UmbInputDocumentElement } from '../../components/input-document/in import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; @customElement('umb-property-editor-ui-document-picker') export class UmbPropertyEditorUIContentPickerElement @@ -19,9 +19,9 @@ export class UmbPropertyEditorUIContentPickerElement this._value = value || []; } - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - const validationLimit = config.find((x) => x.alias === 'validationLimit'); + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + const validationLimit = config?.find((x) => x.alias === 'validationLimit'); this._limitMin = (validationLimit?.value as any).min; this._limitMax = (validationLimit?.value as any).max; diff --git a/src/packages/media/media/repository/media.repository.ts b/src/packages/media/media/repository/media.repository.ts index db3a6f8f12..64730ae059 100644 --- a/src/packages/media/media/repository/media.repository.ts +++ b/src/packages/media/media/repository/media.repository.ts @@ -14,8 +14,6 @@ import { import { UmbDetailRepository } from '@umbraco-cms/backoffice/repository'; import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification'; -type ItemDetailType = MediaDetails; - export class UmbMediaRepository implements UmbTreeRepository, diff --git a/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts b/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts index 5eea7c8ad8..3b427fc972 100644 --- a/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts +++ b/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts @@ -2,7 +2,7 @@ import { UmbTagsInputElement } from '../../components/tags-input/tags-input.elem import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/workspace'; -import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components'; +import type { UmbDataTypeConfigCollection } from '@umbraco-cms/backoffice/components'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -11,8 +11,15 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; */ @customElement('umb-property-editor-ui-tags') export class UmbPropertyEditorUITagsElement extends UmbLitElement implements UmbPropertyEditorExtensionElement { - @property() - value: string[] = []; + private _value: Array = []; + + @property({ type: Array }) + public get value(): Array { + return this._value; + } + public set value(value: Array) { + this._value = value || []; + } @state() private _group?: string; @@ -21,10 +28,10 @@ export class UmbPropertyEditorUITagsElement extends UmbLitElement implements Umb private _culture?: string | null; //TODO: Use type from VariantID - @property({ type: Array, attribute: false }) - public set config(config: UmbDataTypePropertyCollection) { - this._group = config.getValueByAlias('group'); - this.value = config.getValueByAlias('items') ?? []; + @property({ attribute: false }) + public set config(config: UmbDataTypeConfigCollection | undefined) { + this._group = config?.getValueByAlias('group'); + this.value = config?.getValueByAlias('items') ?? []; } constructor() {