From 17e7d7d3c240422d985afb53aac1d6bc0f1da800 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 12:43:07 +0100 Subject: [PATCH 01/15] Fixes sorting of Collection configuration editors specifically when a new data-type is created. (Empty configuration) --- .../column/column-configuration.element.ts | 25 +++++++++---------- .../layout/layout-configuration.element.ts | 25 +++++++++---------- 2 files changed, 24 insertions(+), 26 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts index 6461bffc66..72cabecd05 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts @@ -30,9 +30,9 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement }); @property({ type: Array }) - public set value(value: Array) { - this.#value = value; - this.#sorter.setModel(value); + public set value(value: Array | undefined) { + this.#value = value ?? []; + this.#sorter.setModel(this.#value); } public get value(): Array { return this.#value; @@ -92,7 +92,10 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement } render() { - return html`${this.#renderColumns()} ${this.#renderInput()}`; + return html` +
${this.#renderColumns()}
+ ${this.#renderInput()} + `; } #renderInput() { @@ -106,15 +109,11 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement #renderColumns() { if (!this.value) return nothing; - return html` -
- ${repeat( - this.value, - (column) => column.alias, - (column) => this.#renderColumn(column), - )} -
- `; + return repeat( + this.value, + (column) => column.alias, + (column) => this.#renderColumn(column), + ); } #renderColumn(column: UmbCollectionColumnConfiguration) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/layout/layout-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/layout/layout-configuration.element.ts index e19023a61d..f8f01391dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/layout/layout-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/layout/layout-configuration.element.ts @@ -53,9 +53,9 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement }); @property({ type: Array }) - public set value(value: Array) { - this.#value = value; - this.#sorter.setModel(value); + public set value(value: Array | undefined) { + this.#value = value ?? []; + this.#sorter.setModel(this.#value); } public get value(): Array { return this.#value; @@ -132,7 +132,10 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement } render() { - return html`${this.#renderLayouts()} ${this.#renderInput()}`; + return html` +
${this.#renderLayouts()}
+ ${this.#renderInput()} + `; } #renderInput() { @@ -141,15 +144,11 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement #renderLayouts() { if (!this.value) return nothing; - return html` -
- ${repeat( - this.value, - (layout) => this.#getUnique(layout), - (layout, index) => this.#renderLayout(layout, index), - )} -
- `; + return repeat( + this.value, + (layout) => this.#getUnique(layout), + (layout, index) => this.#renderLayout(layout, index), + ); } #renderLayout(layout: UmbCollectionLayoutConfiguration, index: number) { From f5341edb5b6ffbc26325d8ea0429573cb9ac3ad1 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 12:52:54 +0100 Subject: [PATCH 02/15] Bugfix: MemberPicker - limited property-editor to `max=1` --- ...roperty-editor-ui-member-picker.element.ts | 24 ++++--------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts index 8e47ba21b4..4bf4427168 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts @@ -1,7 +1,6 @@ -import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; -import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbInputMemberElement } from '@umbraco-cms/backoffice/member'; @@ -14,19 +13,8 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem @property() public value?: string; - public set config(config: UmbPropertyEditorConfigCollection | undefined) { - if (!config) return; - - const minMax = config?.getValueByAlias('validationLimit'); - this.min = minMax?.min ?? 0; - this.max = minMax?.max ?? Infinity; - } - - @state() - min = 0; - - @state() - max = Infinity; + @property({ attribute: false }) + public config?: UmbPropertyEditorConfigCollection; #onChange(event: CustomEvent & { target: UmbInputMemberElement }) { this.value = event.target.value; @@ -35,11 +23,7 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem render() { return html` - + `; } } From b5ca75391bd03c75f2380cc870b103bab17eb3a8 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 12:54:06 +0100 Subject: [PATCH 03/15] MemberPicker Input code tidyup --- .../components/input-member/input-member.element.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts index 8f0f760e78..b7bf29e7e5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts @@ -1,6 +1,6 @@ import type { UmbMemberItemModel } from '../../repository/index.js'; import { UmbMemberPickerContext } from './input-member.context.js'; -import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -164,7 +164,7 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, '' } #renderItems() { - if (!this._items) return; + if (!this._items) return nothing; return html` ${repeat( @@ -177,7 +177,7 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, '' } #renderAddButton() { - if (this.max === 1 && this.selection.length >= this.max) return; + if (this.max === 1 && this.selection.length >= this.max) return nothing; return html` @@ -198,7 +198,7 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, '' } #renderOpenButton(item: UmbMemberItemModel) { - if (!this.showOpenButton) return; + if (!this.showOpenButton) return nothing; return html` Date: Thu, 25 Apr 2024 12:54:27 +0100 Subject: [PATCH 04/15] UserPicker - code alignment with MemberPicker --- .../user/user/components/user-input/user-input.element.ts | 2 +- .../user-picker/property-editor-ui-user-picker.element.ts | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts index d8334de70d..ca9968f19f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts @@ -154,7 +154,7 @@ export class UmbUserInputElement extends UUIFormControlMixin(UmbLitElement, '') } #renderItem(item: UmbUserItemModel) { - if (!item.unique) return; + if (!item.unique) return nothing; return html` diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/property-editor/user-picker/property-editor-ui-user-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/property-editor/user-picker/property-editor-ui-user-picker.element.ts index e27942857c..3475548902 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/property-editor/user-picker/property-editor-ui-user-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/property-editor/user-picker/property-editor-ui-user-picker.element.ts @@ -17,12 +17,14 @@ export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implemen public config?: UmbPropertyEditorConfigCollection; #onChange(event: CustomEvent & { target: UmbUserInputElement }) { - this.value = event.target.selection.join(','); + this.value = event.target.value; this.dispatchEvent(new UmbPropertyValueChangeEvent()); } render() { - return html``; + return html` + + `; } } From 036d4fb22ce6961c38119d527e544e0f6b1058f6 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 13:16:45 +0100 Subject: [PATCH 05/15] Number property-editor min/max validates that the min/max/step configuration are valid integers. --- .../property-editor-ui-number.element.ts | 44 +++++++++++-------- 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts index 1388910bb7..f4317acc81 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts @@ -1,13 +1,13 @@ -import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; @customElement('umb-property-editor-ui-number') export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property({ type: Number }) - value: undefined | number = undefined; + value?: number; @state() private _max?: number; @@ -19,28 +19,36 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U private _step?: number; public set config(config: UmbPropertyEditorConfigCollection | undefined) { - this._min = config?.getValueByAlias('min'); - this._max = config?.getValueByAlias('max'); - this._step = config?.getValueByAlias('step'); + if (!config) return; + this._min = this.#parseInt(config.getValueByAlias('min')); + this._max = this.#parseInt(config.getValueByAlias('max')); + this._step = this.#parseInt(config.getValueByAlias('step')); } - private onInput(e: InputEvent) { - this.value = Number((e.target as HTMLInputElement).value); - this.dispatchEvent(new CustomEvent('property-value-change')); + #parseInt(input: unknown): number | undefined { + const num = Number(input); + return Number.isNaN(num) ? undefined : num; + } + + #onInput(e: InputEvent & { target: HTMLInputElement }) { + this.value = this.#parseInt(e.target.value); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); } render() { - return html``; + return html` + + + `; } static styles = [ - UmbTextStyles, css` uui-input { width: 100%; From 54c56cba6e28134898a27709b5604a2274a58c05 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 13:19:45 +0100 Subject: [PATCH 06/15] NumberRange property-editor adds support for `validationRange` to define the min/max constraints of the overall range. + code tidy-up Note: I tried to keep the `∞` entity, but I was unable to make it work within an expression. --- .../input-number-range.element.ts | 41 ++++++++----- ...property-editor-ui-number-range.element.ts | 60 ++++++++++--------- 2 files changed, 59 insertions(+), 42 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts index f86397e374..83f02dbbaf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts @@ -1,6 +1,8 @@ +import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; -import { html, customElement, property, state, type PropertyValueMap, css } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; function getNumberOrUndefined(value: string) { @@ -40,6 +42,9 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen return this._maxValue; } + @property({ type: Object }) + validationRange?: NumberRangeValueType; + private updateValue() { const newValue = this._minValue || this._maxValue ? (this._minValue ?? '') + ',' + (this._maxValue ?? '') : undefined; @@ -78,8 +83,7 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen ); } - protected firstUpdated(_changedProperties: PropertyValueMap | Map): void { - super.firstUpdated(_changedProperties); + firstUpdated() { this.shadowRoot?.querySelectorAll('uui-input').forEach((x) => this.addFormControlElement(x)); } @@ -87,31 +91,38 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen return this.shadowRoot?.querySelector('uui-input')?.focus(); } - private _onMinInput(e: InputEvent) { - const value = Number((e.target as HTMLInputElement).value); + #onMinInput(e: InputEvent & { target: HTMLInputElement }) { + const value = e.target.value; this.minValue = value ? Number(value) : undefined; - this.dispatchEvent(new CustomEvent('change', { bubbles: true })); + this.dispatchEvent(new UmbChangeEvent()); } - private _onMaxInput(e: InputEvent) { - const value = (e.target as HTMLInputElement).value; + #onMaxInput(e: InputEvent & { target: HTMLInputElement }) { + const value = e.target.value; this.maxValue = value ? Number(value) : undefined; - this.dispatchEvent(new CustomEvent('change', { bubbles: true })); + this.dispatchEvent(new UmbChangeEvent()); } render() { - return html` + @input=${this.#onMinInput}> – `; + min=${ifDefined(this.validationRange?.min)} + max=${ifDefined(this.validationRange?.max)} + placeholder=${this.validationRange?.max === Infinity ? '∞' : this.validationRange?.max ?? ''} + .value=${this._maxValue} + @input=${this.#onMaxInput}> + `; } static styles = css` diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts index a74c87da8e..86e7400d20 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts @@ -1,13 +1,13 @@ import type { UmbInputNumberRangeElement } from '../../core/components/input-number-range/input-number-range.element.js'; -import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; -import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import '../../core/components/input-number-range/input-number-range.element.js'; -import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; /** * @element umb-property-editor-ui-number-range @@ -17,35 +17,37 @@ export class UmbPropertyEditorUINumberRangeElement extends UmbFormControlMixin(UmbLitElement, undefined) implements UmbPropertyEditorUiElement { + @state() + _minValue?: number; + + @state() + _maxValue?: number; + + @state() + _validationRange?: NumberRangeValueType; + @property({ type: Object }) public set value(value: NumberRangeValueType | undefined) { - this._value = value || { min: undefined, max: undefined }; + this.#value = value || { min: undefined, max: undefined }; this._minValue = value?.min; this._maxValue = value?.max; } public get value() { - return this._value; + return this.#value; } - private _value: NumberRangeValueType = { min: undefined, max: undefined }; + #value: NumberRangeValueType = { min: undefined, max: undefined }; - @property({ attribute: false }) - public config?: UmbPropertyEditorConfigCollection; - - private _onChange(event: CustomEvent) { - this.value = { - min: (event.target as UmbInputNumberRangeElement).minValue, - max: (event.target as UmbInputNumberRangeElement).maxValue, - }; - this.dispatchEvent(new CustomEvent('change')); + public set config(config: UmbPropertyEditorConfigCollection) { + if (!config) return; + this._validationRange = config.getValueByAlias('validationRange'); } - @state() - _minValue?: number; - @state() - _maxValue?: number; + #onChange(event: CustomEvent & { target: UmbInputNumberRangeElement }) { + this.value = { min: event.target.minValue, max: event.target.maxValue }; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } - protected firstUpdated(_changedProperties: PropertyValueMap | Map): void { - super.firstUpdated(_changedProperties); + firstUpdated() { this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-number-range')!); } @@ -54,10 +56,14 @@ export class UmbPropertyEditorUINumberRangeElement } render() { - return html``; + return html` + + + `; } } From 79eace3e439eda7ef09f52c965a4f836272e4a84 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 13:20:33 +0100 Subject: [PATCH 07/15] Adds `min="0"` on direct number inputs --- ...tor-ui-image-crops-configuration.element.ts | 4 ++-- ...y-mce-maximagesize-configuration.element.ts | 18 +++++++++++------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts index d81aa7776b..d29aa1b530 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts @@ -116,13 +116,13 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
Width - + px
Height - + px
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts index f3631ea2a6..5757ad79fc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts @@ -1,7 +1,7 @@ import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; +import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; /** @@ -21,12 +21,16 @@ export class UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement } render() { - return html``; + return html` + + + `; } } From 85cb006493640a5fc84b08d35d8df0fa348a3d4b Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 13:21:32 +0100 Subject: [PATCH 08/15] Adds `min=0` config on property-editors that use "Umb.PropertyEditorUi.Number" --- .../property-editors/block-grid-editor/manifests.ts | 1 + .../property-editors/collection-view/manifests.ts | 1 + .../multi-url-picker/Umbraco.MultiUrlPicker.ts | 12 ++++-------- .../Umbraco.MultipleTextString.ts | 12 ++++-------- .../property-editors/slider/Umbraco.Slider.ts | 10 ++-------- .../property-editors/textarea/Umbraco.TextArea.ts | 1 + .../packages/property-editors/textarea/manifests.ts | 10 ++++------ .../tree-picker/Umbraco.MultiNodeTreePicker.ts | 12 ++++-------- 8 files changed, 21 insertions(+), 38 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts index 59c39c1942..b35ca6977e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts @@ -44,6 +44,7 @@ export const manifests: Array = [ label: 'Grid Columns', description: 'Set the number of columns for the layout. (defaults to 12)', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, { alias: 'layoutStylesheet', diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/manifests.ts index e6dff8848d..85493d5289 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/manifests.ts @@ -28,6 +28,7 @@ const manifest: ManifestPropertyEditorUi = { label: 'Page Size', description: 'Number of items per page.', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, { alias: 'orderBy', diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/Umbraco.MultiUrlPicker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/Umbraco.MultiUrlPicker.ts index e39d682860..79fa35a944 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/Umbraco.MultiUrlPicker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/Umbraco.MultiUrlPicker.ts @@ -13,12 +13,14 @@ export const manifest: ManifestPropertyEditorSchema = { label: 'Minimum number of items', description: '', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, { alias: 'maxNumber', label: 'Maximum number of items', description: '', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, { alias: 'ignoreUserStartNodes', @@ -28,14 +30,8 @@ export const manifest: ManifestPropertyEditorSchema = { }, ], defaultData: [ - { - alias: 'minNumber', - value: 0, - }, - { - alias: 'maxNumber', - value: 0, - }, + { alias: 'minNumber', value: 0 }, + { alias: 'maxNumber', value: 0 }, ], }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/Umbraco.MultipleTextString.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/Umbraco.MultipleTextString.ts index 11f2755b0b..1ed2760498 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/Umbraco.MultipleTextString.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/Umbraco.MultipleTextString.ts @@ -14,23 +14,19 @@ export const manifests: Array = [ label: 'Minimum', description: 'Enter the minimum amount of text boxes to be displayed', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, { alias: 'max', label: 'Maximum', description: 'Enter the maximum amount of text boxes to be displayed, enter 0 for unlimited', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, ], defaultData: [ - { - alias: 'min', - value: 0, - }, - { - alias: 'max', - value: 0, - }, + { alias: 'min', value: 0 }, + { alias: 'max', value: 0 }, ], }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts index 264643e252..6cc16c3322 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts @@ -22,14 +22,8 @@ export const manifest: ManifestPropertyEditorSchema = { }, ], defaultData: [ - { - alias: 'minVal', - value: 0, - }, - { - alias: 'maxVal', - value: 0, - }, + { alias: 'minVal', value: 0 }, + { alias: 'maxVal', value: 0 }, ], }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/Umbraco.TextArea.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/Umbraco.TextArea.ts index 2097d90f7b..fc854d8377 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/Umbraco.TextArea.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/Umbraco.TextArea.ts @@ -13,6 +13,7 @@ export const manifest: ManifestPropertyEditorSchema = { label: 'Maximum allowed characters', description: 'If empty - no character limit', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, ], }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/manifests.ts index 7673bd0a51..321fc1f55a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/manifests.ts @@ -19,26 +19,24 @@ export const manifests: Array = [ label: 'Number of rows', description: 'If empty or zero, the textarea is set to auto-height', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, { alias: 'minHeight', label: 'Min height (pixels)', description: 'Sets the minimum height of the textarea', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, { alias: 'maxHeight', label: 'Max height (pixels)', description: 'Sets the maximum height of the textarea', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, ], - defaultData: [ - { - alias: 'rows', - value: 10, - }, - ], + defaultData: [{ alias: 'rows', value: 10 }], }, }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/tree-picker/Umbraco.MultiNodeTreePicker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/tree-picker/Umbraco.MultiNodeTreePicker.ts index 9a6625b149..dfec95c952 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/tree-picker/Umbraco.MultiNodeTreePicker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/tree-picker/Umbraco.MultiNodeTreePicker.ts @@ -13,12 +13,14 @@ export const manifest: ManifestPropertyEditorSchema = { label: 'Minimum number of items', description: '', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, { alias: 'maxNumber', label: 'Maximum number of items', description: '', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number', + config: [{ alias: 'min', value: 0 }], }, { alias: 'ignoreUserStartNodes', @@ -34,14 +36,8 @@ export const manifest: ManifestPropertyEditorSchema = { }, ], defaultData: [ - { - alias: 'minNumber', - value: 0, - }, - { - alias: 'maxNumber', - value: 0, - }, + { alias: 'minNumber', value: 0 }, + { alias: 'maxNumber', value: 0 }, ], }, }, From 0eb7ec06c39d65a9e8b722e4aaad7ef985e592a2 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 13:21:49 +0100 Subject: [PATCH 09/15] Adds `validationRange` config on property-editors that use "Umb.PropertyEditorUi.NumberRange" --- .../property-editors/block-grid-editor/Umbraco.BlockGrid.ts | 1 + .../property-editors/block-list-editor/Umbraco.BlockList.ts | 1 + .../media/property-editors/media-picker/Umbraco.MediaPicker.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.ts index 98a32721fb..b6d7ac4518 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.ts @@ -18,6 +18,7 @@ export const manifest: ManifestPropertyEditorSchema = { alias: 'validationLimit', label: 'Amount', propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange', + config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }], }, ], defaultData: [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/Umbraco.BlockList.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/Umbraco.BlockList.ts index 9f81c0b1d6..be30289a8b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/Umbraco.BlockList.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/Umbraco.BlockList.ts @@ -19,6 +19,7 @@ export const manifest: ManifestPropertyEditorSchema = { label: 'Amount', description: 'Set a required range of blocks', propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange', + config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }], }, ], }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/Umbraco.MediaPicker.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/Umbraco.MediaPicker.ts index 572ee39033..e5a76f3ab0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/Umbraco.MediaPicker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/Umbraco.MediaPicker.ts @@ -25,6 +25,7 @@ export const manifest: ManifestPropertyEditorSchema = { label: 'Amount', description: 'Set a required range of medias', propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange', + config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }], }, { alias: 'startNodeId', From 383e5f9ded95a6ff3007ab1b4072d77511a5517b Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 13:38:57 +0100 Subject: [PATCH 10/15] CollectionView default data-type configuration --- .../collection-view/manifests.ts | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/manifests.ts index e6dff8848d..9079ac1ba7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/manifests.ts @@ -13,7 +13,7 @@ const manifest: ManifestPropertyEditorUi = { meta: { label: 'Collection View', propertyEditorSchemaAlias: 'Umbraco.ListView', - icon: 'icon-bulleted-list', + icon: 'icon-layers', group: 'lists', settings: { properties: [ @@ -71,6 +71,31 @@ const manifest: ManifestPropertyEditorUi = { propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle', }, ], + defaultData: [ + { + alias: 'includeProperties', + value: [ + { header: 'Sort', alias: 'sortOrder', isSystem: 1 }, + { header: 'Last edited', alias: 'updateDate', isSystem: 1 }, + { header: 'Created by', alias: 'creator', isSystem: 1 }, + ], + }, + { + alias: 'layouts', + value: [ + { name: 'Table', icon: 'icon-list', collectionView: 'Umb.CollectionView.Document.Table' }, + { name: 'Grid', icon: 'icon-grid', collectionView: 'Umb.CollectionView.Document.Grid' }, + ], + }, + { alias: 'pageSize', value: 10 }, + { alias: 'orderBy', value: 'updateDate' }, + { alias: 'orderDirection', value: 'desc' }, + { + alias: 'bulkActionPermissions', + value: { allowBulkPublish: true, allowBulkUnpublish: true, allowBulkCopy: true }, + }, + { alias: 'icon', value: 'icon-list' }, + ], }, }, }; From c27363861870926a8c07ca7710602f181e2794ab Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 13:50:10 +0100 Subject: [PATCH 11/15] RTE default data-type configuration --- .../property-editors/tiny-mce/manifests.ts | 226 ++++-------------- 1 file changed, 53 insertions(+), 173 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts index 22e185e3c6..e95592c33e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts @@ -22,171 +22,39 @@ const manifest: ManifestPropertyEditorUi = { { alias: 'toolbar', value: [ - { - alias: 'undo', - label: 'Undo', - icon: 'undo', - }, - { - alias: 'redo', - label: 'Redo', - icon: 'redo', - }, - { - alias: 'cut', - label: 'Cut', - icon: 'cut', - }, - { - alias: 'copy', - label: 'Copy', - icon: 'copy', - }, - { - alias: 'paste', - label: 'Paste', - icon: 'paste', - }, - { - alias: 'styles', - label: 'Style select', - icon: 'permanent-pen', - }, - { - alias: 'fontname', - label: 'Font select', - icon: 'text-color', - }, - { - alias: 'fontsize', - label: 'Font size', - icon: 'text-color', - }, - { - alias: 'forecolor', - label: 'Text color', - icon: 'text-color', - }, - { - alias: 'backcolor', - label: 'Background color', - icon: 'highlight-bg-color', - }, - { - alias: 'blockquote', - label: 'Blockquote', - icon: 'quote', - }, - { - alias: 'formatblock', - label: 'Format block', - icon: 'format', - }, - { - alias: 'removeformat', - label: 'Remove format', - icon: 'remove-formatting', - }, - { - alias: 'bold', - label: 'Bold', - icon: 'bold', - }, - { - alias: 'italic', - label: 'Italic', - icon: 'italic', - }, - { - alias: 'underline', - label: 'Underline', - icon: 'underline', - }, - { - alias: 'strikethrough', - label: 'Strikethrough', - icon: 'strike-through', - }, - { - alias: 'alignleft', - label: 'Align left', - icon: 'align-left', - }, - { - alias: 'aligncenter', - label: 'Align center', - icon: 'align-center', - }, - { - alias: 'alignright', - label: 'Align right', - icon: 'align-right', - }, - { - alias: 'alignjustify', - label: 'Justify justify', - icon: 'align-justify', - }, - { - alias: 'bullist', - label: 'Bullet list', - icon: 'unordered-list', - }, - { - alias: 'numlist', - label: 'Numbered list', - icon: 'ordered-list', - }, - { - alias: 'outdent', - label: 'Outdent', - icon: 'outdent', - }, - { - alias: 'indent', - label: 'Indent', - icon: 'indent', - }, - { - alias: 'anchor', - label: 'Anchor', - icon: 'bookmark', - }, - { - alias: 'table', - label: 'Table', - icon: 'table', - }, - { - alias: 'hr', - label: 'Horizontal rule', - icon: 'horizontal-rule', - }, - { - alias: 'subscript', - label: 'Subscript', - icon: 'subscript', - }, - { - alias: 'superscript', - label: 'Superscript', - icon: 'superscript', - }, - { - alias: 'charmap', - label: 'Character map', - icon: 'insert-character', - }, - { - alias: 'rtl', - label: 'Right to left', - icon: 'rtl', - }, - { - alias: 'ltr', - label: 'Left to right', - icon: 'ltr', - }, + { alias: 'undo', label: 'Undo', icon: 'undo' }, + { alias: 'redo', label: 'Redo', icon: 'redo' }, + { alias: 'cut', label: 'Cut', icon: 'cut' }, + { alias: 'copy', label: 'Copy', icon: 'copy' }, + { alias: 'paste', label: 'Paste', icon: 'paste' }, + { alias: 'styles', label: 'Style select', icon: 'permanent-pen' }, + { alias: 'fontname', label: 'Font select', icon: 'text-color' }, + { alias: 'fontsize', label: 'Font size', icon: 'text-color' }, + { alias: 'forecolor', label: 'Text color', icon: 'text-color' }, + { alias: 'backcolor', label: 'Background color', icon: 'highlight-bg-color' }, + { alias: 'blockquote', label: 'Blockquote', icon: 'quote' }, + { alias: 'formatblock', label: 'Format block', icon: 'format' }, + { alias: 'removeformat', label: 'Remove format', icon: 'remove-formatting' }, + { alias: 'bold', label: 'Bold', icon: 'bold' }, + { alias: 'italic', label: 'Italic', icon: 'italic' }, + { alias: 'underline', label: 'Underline', icon: 'underline' }, + { alias: 'strikethrough', label: 'Strikethrough', icon: 'strike-through' }, + { alias: 'alignleft', label: 'Align left', icon: 'align-left' }, + { alias: 'aligncenter', label: 'Align center', icon: 'align-center' }, + { alias: 'alignright', label: 'Align right', icon: 'align-right' }, + { alias: 'alignjustify', label: 'Justify justify', icon: 'align-justify' }, + { alias: 'bullist', label: 'Bullet list', icon: 'unordered-list' }, + { alias: 'numlist', label: 'Numbered list', icon: 'ordered-list' }, + { alias: 'outdent', label: 'Outdent', icon: 'outdent' }, + { alias: 'indent', label: 'Indent', icon: 'indent' }, + { alias: 'anchor', label: 'Anchor', icon: 'bookmark' }, + { alias: 'table', label: 'Table', icon: 'table' }, + { alias: 'hr', label: 'Horizontal rule', icon: 'horizontal-rule' }, + { alias: 'subscript', label: 'Subscript', icon: 'subscript' }, + { alias: 'superscript', label: 'Superscript', icon: 'superscript' }, + { alias: 'charmap', label: 'Character map', icon: 'insert-character' }, + { alias: 'rtl', label: 'Right to left', icon: 'rtl' }, + { alias: 'ltr', label: 'Left to right', icon: 'ltr' }, ], }, ], @@ -214,12 +82,7 @@ const manifest: ManifestPropertyEditorUi = { label: 'Mode', description: 'Select the mode for the editor', propertyEditorUiAlias: 'Umb.PropertyEditorUi.RadioButtonList', - config: [ - { - alias: 'items', - value: ['Classic', 'Inline'], - }, - ], + config: [{ alias: 'items', value: ['Classic', 'Inline'] }], }, { alias: 'overlaySize', @@ -235,9 +98,26 @@ const manifest: ManifestPropertyEditorUi = { ], defaultData: [ { - alias: 'mode', - value: 'Classic', + alias: 'toolbar', + value: [ + 'styles', + 'bold', + 'italic', + 'alignleft', + 'aligncenter', + 'alignright', + 'bullist', + 'numlist', + 'outdent', + 'indent', + 'sourcecode', + 'link', + 'umbmediapicker', + 'umbembeddialog', + ], }, + { alias: 'mode', value: 'Classic' }, + { alias: 'maxImageSize', value: 500 }, ], }, }, From 33b0a3c7a5e48f1c1c5dcdec73653cf9aaba2356 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 13:50:29 +0100 Subject: [PATCH 12/15] TinyMCE property-editor code tidy-up --- .../input-tiny-mce/input-tiny-mce.element.ts | 19 ++++++++-------- .../property-editor-ui-tiny-mce.element.ts | 22 +++++++++++-------- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts index e6b3714ae5..69c747373e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts @@ -1,19 +1,20 @@ import { loadManifestApi } from '../../../../libs/extension-api/functions/load-manifest-api.function.js'; -import { pastePreProcessHandler } from './input-tiny-mce.handlers.js'; -import { defaultFallbackConfig } from './input-tiny-mce.defaults.js'; import { availableLanguages } from './input-tiny-mce.languages.js'; +import { defaultFallbackConfig } from './input-tiny-mce.defaults.js'; +import { pastePreProcessHandler } from './input-tiny-mce.handlers.js'; import { uriAttributeSanitizer } from './input-tiny-mce.sanitizer.js'; import type { TinyMcePluginArguments, UmbTinyMcePluginBase } from './tiny-mce-plugin.js'; -import { getProcessedImageUrl } from '@umbraco-cms/backoffice/utils'; -import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; -import type { EditorEvent, Editor, RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce'; -import { type ManifestTinyMcePlugin, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { css, customElement, html, property, query, state } from '@umbraco-cms/backoffice/external/lit'; import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; -import { UmbStylesheetDetailRepository, UmbStylesheetRuleManager } from '@umbraco-cms/backoffice/stylesheet'; +import { getProcessedImageUrl } from '@umbraco-cms/backoffice/utils'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbStylesheetDetailRepository, UmbStylesheetRuleManager } from '@umbraco-cms/backoffice/stylesheet'; +import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; +import type { EditorEvent, Editor, RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce'; +import type { ManifestTinyMcePlugin } from '@umbraco-cms/backoffice/extension-registry'; +import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; /** * Handles the resize event diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts index 3897c7be61..9731af8f9d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts @@ -1,7 +1,8 @@ -import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import '../../components/input-tiny-mce/input-tiny-mce.element.js'; @@ -31,19 +32,22 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements return this.#configuration; } - #onChange(event: InputEvent) { + #onChange(event: InputEvent & { target: HTMLInputElement }) { this.value = { blocks: {}, - markup: (event.target as HTMLInputElement).value, + markup: event.target.value, }; - this.dispatchEvent(new CustomEvent('property-value-change')); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); } render() { - return html``; + return html` + + + `; } } From 05a7df23b3e03348040f988e6d17151555f5c794 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 14:06:11 +0100 Subject: [PATCH 13/15] Data Type Details Workspace View Canceling the picker no longer empties the Property Editor selection. --- .../views/details/data-type-details-workspace-view.element.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts index b00b10ea19..ba58c5bdb8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts @@ -63,7 +63,9 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im .onSubmit() .catch(() => undefined); - this._workspaceContext?.setPropertyEditorUiAlias(value?.selection[0]); + if (value) { + this._workspaceContext?.setPropertyEditorUiAlias(value.selection[0]); + } } render() { From 6406e78f1d306ca0141bab5da8e08c66d021c9ad Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 25 Apr 2024 14:06:40 +0100 Subject: [PATCH 14/15] Code sweep tidy-up --- ...ata-type-details-workspace-view.element.ts | 105 ++++++++++-------- 1 file changed, 57 insertions(+), 48 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts index ba58c5bdb8..a779b6a88a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts @@ -1,8 +1,8 @@ import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../data-type-workspace.context-token.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import { UMB_MODAL_MANAGER_CONTEXT, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '@umbraco-cms/backoffice/modal'; +import { css, customElement, html, nothing, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UMB_MODAL_MANAGER_CONTEXT, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '@umbraco-cms/backoffice/modal'; import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; @customElement('umb-data-type-details-workspace-view') @@ -19,35 +19,35 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im @state() private _propertyEditorSchemaAlias?: string | null = null; - private _workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE; + #workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE; constructor() { super(); - this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (_instance) => { - this._workspaceContext = _instance; - this._observeDataType(); + this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => { + this.#workspaceContext = workspaceContext; + this.#observeDataType(); }); } - private _observeDataType() { - if (!this._workspaceContext) { + #observeDataType() { + if (!this.#workspaceContext) { return; } - this.observe(this._workspaceContext.propertyEditorUiAlias, (value) => { + this.observe(this.#workspaceContext.propertyEditorUiAlias, (value) => { this._propertyEditorUiAlias = value; }); - this.observe(this._workspaceContext.propertyEditorSchemaAlias, (value) => { + this.observe(this.#workspaceContext.propertyEditorSchemaAlias, (value) => { this._propertyEditorSchemaAlias = value; }); - this.observe(this._workspaceContext.propertyEditorUiName, (value) => { + this.observe(this.#workspaceContext.propertyEditorUiName, (value) => { this._propertyEditorUiName = value; }); - this.observe(this._workspaceContext.propertyEditorUiIcon, (value) => { + this.observe(this.#workspaceContext.propertyEditorUiIcon, (value) => { this._propertyEditorUiIcon = value; }); } @@ -64,54 +64,59 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im .catch(() => undefined); if (value) { - this._workspaceContext?.setPropertyEditorUiAlias(value.selection[0]); + this.#workspaceContext?.setPropertyEditorUiAlias(value.selection[0]); } } render() { return html` - ${this.#renderPropertyEditorReference()} - ${this.#renderPropertyEditorConfig()} + + + ${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias + ? this.#renderPropertyEditorReference() + : this.#renderChooseButton()} + + + + + + `; + } + + #renderChooseButton() { + return html` + `; } #renderPropertyEditorReference() { + if (!this._propertyEditorUiAlias || !this._propertyEditorSchemaAlias) return nothing; return html` - - ${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias - ? html` - - ${this._propertyEditorUiIcon - ? html` ` - : ''} - - - - - ` - : html` - - `} - + + ${this._propertyEditorUiIcon + ? html`` + : nothing} + + + + `; } - #renderPropertyEditorConfig() { - return html` - - `; - } - static styles = [ UmbTextStyles, css` @@ -124,6 +129,10 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im uui-box { margin-top: var(--uui-size-layout-1); } + + #btn-add { + display: block; + } `, ]; } From e72ff4a2581365fc699903647fb4f343013b5c87 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Sun, 28 Apr 2024 10:57:41 +0100 Subject: [PATCH 15/15] Adds title attribute to icons in icon picker modal - to help identify what icon label is for use for package devs --- .../core/modal/common/icon-picker/icon-picker-modal.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts index 9df97c18cb..199908b6de 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts @@ -140,6 +140,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement html`