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

implement UmbDataTypePropertyCollection

Browse Source
This commit is contained in:
Nathan Woulfe
2023-05-05 11:23:12 +10:00
parent 24b02e03a9
commit d1f121d8ee
42 changed files with 126 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/Umbraco.Web.UI.Client/libs/data-type/data-type-property-collection.class.ts Normal file
View File

@@ -0,0 +1,30 @@
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<DataTypePropertyPresentationModel> {
constructor(args: Array<DataTypePropertyPresentationModel> = []) {
super(...args);
}
private _getByAlias(alias: string) {
return this.find((x) => x.alias === alias);
}
getValueByAlias<T>(alias: string): T | undefined {
const property = this._getByAlias(alias);
if (property?.value === undefined || property?.value === null) {
return;
}
return property.value as T;
}
getByAlias(alias: string): DataTypePropertyPresentationModel | undefined {
const property = this._getByAlias(alias);
return property;
}
}

1
src/Umbraco.Web.UI.Client/libs/data-type/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './data-type-property-collection.class';

4
src/Umbraco.Web.UI.Client/libs/extensions-registry/interfaces/property-editor-ui-extension-element.interface.ts
View File

@@ -1,6 +1,6 @@
import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
export interface UmbPropertyEditorExtensionElement extends HTMLElement {
value: unknown;
config: DataTypePropertyPresentationModel[];
config: UmbDataTypePropertyCollection;
}

11
src/Umbraco.Web.UI.Client/src/backoffice/core/components/property-type-based-property/property-type-based-property.element.ts
View File

@@ -2,12 +2,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { customElement, property, state } from 'lit/decorators.js';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
import { UmbDataTypeRepository } from '../../../settings/data-types/repository/data-type.repository';
import { UmbVariantId } from '../../variants/variant-id.class';
import { UmbDocumentWorkspaceContext } from '../../../documents/documents/workspace/document-workspace.context';
import type {
DataTypeResponseModel,
DataTypePropertyPresentationModel,
DataTypeResponseModel,
PropertyTypeResponseModelBaseModel,
} from '@umbraco-cms/backoffice/backend-api';
import '../workspace-property/workspace-property.element';
@@ -16,8 +16,7 @@ import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-api';
@customElement('umb-property-type-based-property')
export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
@property({ type: Object, attribute: false })
public get property(): PropertyTypeResponseModelBaseModel | undefined {
@@ -37,7 +36,7 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
private _propertyEditorUiAlias?: string;
@state()
private _dataTypeData: DataTypePropertyPresentationModel[] = [];
private _dataTypeData = new UmbDataTypePropertyCollection();
private _dataTypeRepository: UmbDataTypeRepository = new UmbDataTypeRepository(this);
private _dataTypeObserver?: UmbObserverController<DataTypeResponseModel | undefined>;
@@ -96,7 +95,7 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
this._dataTypeObserver = this.observe(
await this._dataTypeRepository.byId(dataTypeId),
(dataType) => {
this._dataTypeData = dataType?.values || [];
this._dataTypeData = new UmbDataTypePropertyCollection(dataType?.values || []);
this._propertyEditorUiAlias = dataType?.propertyEditorUiAlias || undefined;
},
'observeDataType'

5
src/Umbraco.Web.UI.Client/src/backoffice/core/components/workspace-property/workspace-property.element.ts
View File

@@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
import { UmbVariantId } from '../../variants/variant-id.class';
import { UmbWorkspacePropertyContext } from './workspace-property.context';
import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
@@ -90,7 +91,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
* @default ''
*/
@property({ type: Object, attribute: false })
public set config(value: DataTypePropertyPresentationModel[]) {
public set config(value: UmbDataTypePropertyCollection) {
this._propertyContext.setConfig(value);
}
@@ -201,7 +202,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
this._propertyContext.config,
(config) => {
if (this._element && config) {
this._element.config = config;
this._element.config = new UmbDataTypePropertyCollection(config);
}
},
'_observePropertyConfig'

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
View File

@@ -1,6 +1,7 @@
import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
import { UmbVariantId } from '../../../variants/variant-id.class';
import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../../../components/workspace/workspace-variant/workspace-variant.context';
import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../components/workspace-property/workspace-property.context';
@@ -20,7 +21,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
@state()
private _routes: UmbRoute[] = [];

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/block-list/property-editor-ui-block-list.element.ts
View File

@@ -1,6 +1,7 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-block-list</div>`;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
View File

@@ -5,6 +5,7 @@ import { UmbInputCheckboxListElement } from '../../../components/input-checkbox-
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-checkbox-list
@@ -23,7 +24,7 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem
}
@property({ type: Array, attribute: false })
public set config(config: Array<DataTypePropertyPresentationModel>) {
public set config(config: UmbDataTypePropertyCollection) {
const listData = config.find((x) => x.alias === 'items');
if (!listData) return;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
View File

@@ -6,6 +6,7 @@ import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/exten
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-color-picker
@@ -22,7 +23,7 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
private _swatches: UmbSwatchDetails[] = [];
@property({ type: Array, attribute: false })
public set config(config: Array<DataTypePropertyPresentationModel>) {
public set config(config: UmbDataTypePropertyCollection) {
const useLabel = config.find((x) => x.alias === 'useLabel');
if (useLabel) this._showLabels = useLabel.value;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
View File

@@ -5,6 +5,7 @@ import { InputType } from '@umbraco-ui/uui';
import { UmbPropertyValueChangeEvent } from '../..';
import { UmbPropertyEditorExtensionElement , PropertyEditorConfigDefaultData } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-date-picker
@@ -48,7 +49,7 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen
private _offsetTime?: boolean;
@property({ type: Array, attribute: false })
public set config(config: Array<PropertyEditorConfigDefaultData>) {
public set config(config: UmbDataTypePropertyCollection) {
const oldVal = this._inputType;
// Format string prevalue/config

13
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts
View File

@@ -3,6 +3,7 @@ import { html } from 'lit';
import type { UmbPropertyEditorUIDatePickerElement } from './property-editor-ui-date-picker.element';
import './property-editor-ui-date-picker.element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
export default {
title: 'Property Editor UIs/Date Picker',
@@ -30,30 +31,30 @@ WithDateValue.args = {
export const WithFormat = Template.bind({});
WithFormat.args = {
config: [
config: new UmbDataTypePropertyCollection([
{
alias: 'format',
value: 'dd/MM/yyyy HH:mm:ss',
},
],
]),
};
export const TimeOnly = Template.bind({});
TimeOnly.args = {
config: [
config: new UmbDataTypePropertyCollection([
{
alias: 'format',
value: 'HH:mm:ss',
},
],
]),
};
export const DateOnly = Template.bind({});
DateOnly.args = {
config: [
config: new UmbDataTypePropertyCollection([
{
alias: 'format',
value: 'dd/MM/yyyy',
},
],
]),
};

5
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts
View File

@@ -2,6 +2,7 @@ import { expect, fixture, html } from '@open-wc/testing';
import { UUIInputElement } from '@umbraco-ui/uui';
import { UmbPropertyEditorUIDatePickerElement } from './property-editor-ui-date-picker.element';
import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
describe('UmbPropertyEditorUIDatePickerElement', () => {
let element: UmbPropertyEditorUIDatePickerElement;
@@ -25,13 +26,13 @@ describe('UmbPropertyEditorUIDatePickerElement', () => {
});
it('should show a type=date field if the format only contains a date', async () => {
element.config = [{ alias: 'format', value: 'YYYY-MM-dd' }];
element.config = new UmbDataTypePropertyCollection([{ 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 = [{ alias: 'format', value: 'HH:mm' }];
element.config = new UmbDataTypePropertyCollection([{ alias: 'format', value: 'HH:mm' }]);
await element.updateComplete;
expect(inputElement.type).to.equal('time');
});

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
View File

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-dropdown
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-dropdown</div>`;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
View File

@@ -5,6 +5,7 @@ import { UUIColorPickerChangeEvent } from '@umbraco-ui/uui';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-eye-dropper
@@ -23,7 +24,7 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implemen
private _swatches: string[] = [];
@property({ type: Array, attribute: false })
public set config(config: Array<DataTypePropertyPresentationModel>) {
public set config(config: UmbDataTypePropertyCollection) {
const showAlpha = config.find((x) => x.alias === 'showAlpha');
if (showAlpha) this._opacity = showAlpha.value;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
View File

@@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_ICON_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-icon-picker
@@ -16,7 +17,7 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implemen
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
private _modalContext?: UmbModalContext;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts
View File

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-image-cropper
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIImageCropperElement extends UmbLitElement implem
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-image-cropper</div>`;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
View File

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-image-crops-configuration
@@ -18,7 +19,7 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-image-crops-configuration</div>`;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/label/property-editor-ui-label.element.ts
View File

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-label
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUILabelElement extends UmbLitElement implements Um
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-label</div>`;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
View File

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-markdown-editor
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-markdown-editor</div>`;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
View File

@@ -4,6 +4,7 @@ import { UmbInputMediaPickerElement } from '../../../../media/media/components/i
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-media-picker
@@ -21,7 +22,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme
}
@property({ type: Array, attribute: false })
public set config(config: Array<DataTypePropertyPresentationModel>) {
public set config(config: UmbDataTypePropertyCollection) {
const validationLimit = config.find((x) => x.alias === 'validationLimit');
if (!validationLimit) return;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts
View File

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-member-group-picker
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-member-group-picker</div>`;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts
View File

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-member-picker
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-member-picker</div>`;

24
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
View File

@@ -2,11 +2,11 @@ import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import type { UUIModalSidebarSize } from '@umbraco-ui/uui';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
import { UmbInputMultiUrlPickerElement } from '../../../components/input-multi-url-picker/input-multi-url-picker.element';
import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../components/workspace-property/workspace-property.context';
import { UmbLinkPickerLink } from '@umbraco-cms/backoffice/modal';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
/**
@@ -21,22 +21,14 @@ export class UmbPropertyEditorUIMultiUrlPickerElement
value: UmbLinkPickerLink[] = [];
@property({ type: Array, attribute: false })
public set config(config: DataTypePropertyPresentationModel[]) {
const overlaySize = config.find((x) => x.alias === 'overlaySize');
if (overlaySize) this._overlaySize = overlaySize.value;
const hideAnchor = config.find((x) => x.alias === 'hideAnchor');
if (hideAnchor) this._hideAnchor = hideAnchor.value;
const ignoreUserStartNodes = config.find((x) => x.alias === 'ignoreUserStartNodes');
if (ignoreUserStartNodes) this._ignoreUserStartNodes = ignoreUserStartNodes.value;
const maxNumber = config.find((x) => x.alias === 'maxNumber');
if (maxNumber) this._maxNumber = maxNumber.value;
const minNumber = config.find((x) => x.alias === 'minNumber');
if (minNumber) this._minNumber = minNumber.value;
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');
}
@state()
private _overlaySize?: UUIModalSidebarSize;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
View File

@@ -8,6 +8,7 @@ import UmbInputMultipleTextStringElement, {
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
export type MultipleTextStringConfigData = Array<{
alias: 'minNumber' | 'maxNumber';
@@ -26,7 +27,7 @@ export class UmbPropertyEditorUIMultipleTextStringElement
public value: MultipleTextStringValue = [];
@property({ type: Array, attribute: false })
public set config(config: MultipleTextStringConfigData) {
public set config(config: UmbDataTypePropertyCollection) {
this._limitMin = config.find((x) => x.alias === 'minNumber')?.value;
this._limitMax = config.find((x) => x.alias === 'maxNumber')?.value;
}

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
View File

@@ -5,6 +5,7 @@ import type { UmbInputNumberRangeElement } from '../../../components/input-numbe
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import '../../../components/input-number-range/input-number-range.element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
type ValueType = {
min?: number;
@@ -28,7 +29,7 @@ export class UmbPropertyEditorUINumberRangeElement extends UmbLitElement impleme
}
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
private _onChange(event: CustomEvent) {
this.value = {

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number/property-editor-ui-number.element.ts
View File

@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
@customElement('umb-property-editor-ui-number')
export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
@@ -12,7 +13,7 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
private onInput(e: InputEvent) {
this.value = (e.target as HTMLInputElement).value;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts
View File

@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-order-direction
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIOrderDirectionElement extends UmbLitElement impl
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-order-direction</div>`;

5
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
View File

@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-overlay-size
@@ -15,8 +16,8 @@ export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement impleme
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-overlay-size</div>`;
}

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts
View File

@@ -6,6 +6,7 @@ import type { UmbInputRadioButtonListElement } from '../../../components/input-r
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-radio-button-list
@@ -24,7 +25,7 @@ export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement imp
}
@property({ type: Array, attribute: false })
public set config(config: Array<DataTypePropertyPresentationModel>) {
public set config(config: UmbDataTypePropertyCollection) {
const listData = config.find((x) => x.alias === 'items');
if (!listData) return;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/slider/property-editor-ui-slider.element.ts
View File

@@ -5,6 +5,7 @@ import UmbInputSliderElement from '../../../components/input-slider/input-slider
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-slider
@@ -36,7 +37,7 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
_max?: number;
@property({ type: Array, attribute: false })
public set config(config: Array<DataTypePropertyPresentationModel>) {
public set config(config: UmbDataTypePropertyCollection) {
const enableRange = config.find((x) => x.alias === 'enableRange');
if (enableRange) this._enableRange = enableRange.value as boolean;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tags/property-editor-ui-tags.element.ts
View File

@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-tags
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUITagsElement extends UmbLitElement implements Umb
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-tags</div>`;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
View File

@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
@customElement('umb-property-editor-ui-text-box')
export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
@@ -12,7 +13,7 @@ export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
private onInput(e: InputEvent) {
this.value = (e.target as HTMLInputElement).value;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
View File

@@ -8,6 +8,7 @@ import {
} from '../../../components/workspace-property/workspace-property.context';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
@customElement('umb-property-editor-ui-textarea')
export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements
value = '';
@property({ type: Array, attribute: false })
config = [];
config = new UmbDataTypePropertyCollection();
private propertyContext?: UmbWorkspacePropertyContext<string>;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts
View File

@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-tiny-mce
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-tiny-mce</div>`;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/toggle/property-editor-ui-toggle.element.ts
View File

@@ -5,6 +5,7 @@ import { UmbInputToggleElement } from '../../../components/input-toggle/input-to
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-toggle
@@ -26,7 +27,7 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U
_showLabels?: boolean;
@property({ type: Array, attribute: false })
public set config(config: Array<DataTypePropertyPresentationModel>) {
public set config(config: UmbDataTypePropertyCollection) {
const defaultValue = config.find((x) => x.alias === 'default');
if (defaultValue) this.value = defaultValue.value as boolean;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts
View File

@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-tree-picker
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-tree-picker</div>`;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts
View File

@@ -5,6 +5,7 @@ import { UmbInputUploadFieldElement } from '../../../components/input-upload-fie
import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import type { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-upload-field
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIUploadFieldElement extends UmbLitElement impleme
value = '';
@property({ type: Array, attribute: false })
public set config(config: Array<DataTypePropertyPresentationModel>) {
public set config(config: UmbDataTypePropertyCollection) {
const fileExtensions = config.find((x) => x.alias === 'fileExtensions');
if (fileExtensions) this._fileExtensions = fileExtensions.value;

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts
View File

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-user-picker
@@ -13,7 +14,7 @@ export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implemen
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
// TODO: implement config
render() {

3
src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts
View File

@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-ui-value-type
@@ -15,7 +16,7 @@ export class UmbPropertyEditorUIValueTypeElement extends UmbLitElement implement
value = '';
@property({ type: Array, attribute: false })
public config = [];
public config = new UmbDataTypePropertyCollection();
render() {
return html`<div>umb-property-editor-ui-value-type</div>`;

3
src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts
View File

@@ -4,6 +4,7 @@ import type { UmbInputDocumentPickerElement } from '../../components/input-docum
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
@customElement('umb-property-editor-ui-document-picker')
export class UmbPropertyEditorUIContentPickerElement
@@ -21,7 +22,7 @@ export class UmbPropertyEditorUIContentPickerElement
}
@property({ type: Array, attribute: false })
public set config(config: Array<DataTypePropertyPresentationModel>) {
public set config(config: UmbDataTypePropertyCollection) {
const validationLimit = config.find((x) => x.alias === 'validationLimit');
this._limitMin = (validationLimit?.value as any).min;

1
src/Umbraco.Web.UI.Client/tsconfig.json
View File

@@ -23,6 +23,7 @@
"@umbraco-cms/backoffice/context-api": ["libs/context-api"],
"@umbraco-cms/backoffice/controller": ["libs/controller"],
"@umbraco-cms/backoffice/css": ["libs/css/custom-properties.css"],
"@umbraco-cms/backoffice/data-type": ["libs/data-type"],
"@umbraco-cms/backoffice/element": ["libs/element"],
"@umbraco-cms/backoffice/element.js": ["libs/element"],
"@umbraco-cms/backoffice/entity-action": ["libs/entity-action"],

1
src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
View File

@@ -42,6 +42,7 @@ export default {
'@umbraco-cms/backoffice/content-type': './libs/content-type/index.ts',
'@umbraco-cms/backoffice/context-api': './libs/context-api/index.ts',
'@umbraco-cms/backoffice/controller': './libs/controller/index.ts',
'@umbraco-cms/backoffice/data-type': './libs/data-type/index.ts',
'@umbraco-cms/backoffice/element': './libs/element/index.ts',
'@umbraco-cms/backoffice/entity-action': './libs/entity-action/index.ts',
'@umbraco-cms/backoffice/events': './libs/umb-events/index.ts',