From 6eaca3b95a5e08ce8ca1d5dd703021fda1fd5149 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 13 Apr 2023 14:59:42 +0200 Subject: [PATCH 01/23] textbox --- .../property-editor-ui-text-box.element.ts | 25 +++++++++++++++---- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts index 6b90143ecd..9b82d32bbf 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts @@ -1,18 +1,29 @@ import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api'; @customElement('umb-property-editor-ui-text-box') export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements UmbPropertyEditorExtensionElement { - - @property() value = ''; + @state() + private _type = 'text'; + + @state() + private _maxChars?: number; + @property({ type: Array, attribute: false }) - public config = []; + public set config(config: Array) { + const inputType = config.find((x) => x.alias === 'inputType'); + if (inputType) this._type = inputType.value; + + const maxChars = config.find((x) => x.alias === 'maxChars'); + if (maxChars) this._maxChars = maxChars.value; + } private onInput(e: InputEvent) { this.value = (e.target as HTMLInputElement).value; @@ -20,7 +31,11 @@ export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements } render() { - return html``; + return html``; } static styles = [ From e38a3feea191efeae7305f65703f204ccc01f174 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 13 Apr 2023 15:00:07 +0200 Subject: [PATCH 02/23] numer and decimal --- .../property-editor-ui-number.element.ts | 36 ++++++++++++++++--- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts index b6c60c6897..a62559e35b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts @@ -1,26 +1,52 @@ import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api'; @customElement('umb-property-editor-ui-number') export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorExtensionElement { - - @property() value = ''; + @state() + private _max?: number; + + @state() + private _min?: number; + + @state() + private _step?: number; + @property({ type: Array, attribute: false }) - public config = []; + public set config(config: Array) { + const min = config.find((x) => x.alias === 'min'); + if (min) this._min = min.value; + + const max = config.find((x) => x.alias === 'max'); + if (max) this._max = max.value; + + const step = config.find((x) => x.alias === 'step'); + if (step) this._step = step.value; + } private onInput(e: InputEvent) { this.value = (e.target as HTMLInputElement).value; this.dispatchEvent(new CustomEvent('property-value-change')); } + //TODO: UUI-INPUT needs to handle max, min, and step natively in its input field, maybe make a uui-input-number? + render() { - return html``; + return html``; } static styles = [ From b4f141e7abe7231bb86bb128fa7f36bb032cae4d Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 13 Apr 2023 15:00:18 +0200 Subject: [PATCH 03/23] labels --- .../label/property-editor-ui-label.element.ts | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts index fcb662aaa5..0b75bb45d8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts @@ -1,8 +1,11 @@ -import { html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { html, nothing } from 'lit'; +import { customElement, property, state } 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 type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api'; + +type umbracoDataValueType = 'STRING' | 'DECIMAL' | 'DATE/TIME' | 'TIME' | 'INTEGER' | 'BIG INTEGER' | 'LONG STRING'; /** * @element umb-property-editor-ui-label @@ -14,11 +17,20 @@ export class UmbPropertyEditorUILabelElement extends UmbLitElement implements Um @property() value = ''; + @property() + description = ''; + + @state() + private _dvt?: umbracoDataValueType; + @property({ type: Array, attribute: false }) - public config = []; + public set config(config: Array) { + const dvt = config.find((x) => x.alias === 'umbracoDataValueType'); + if (dvt) this._dvt = dvt.value as umbracoDataValueType; + } render() { - return html`
umb-property-editor-ui-label
`; + return nothing; } static styles = [UUITextStyles]; From ed301761b71ca4d4254ae45b75b4cbed1650eca5 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 3 May 2023 10:54:44 +0200 Subject: [PATCH 04/23] import --- .../uis/text-box/property-editor-ui-text-box.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts index 9b82d32bbf..1a0855baa9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/text-box/property-editor-ui-text-box.element.ts @@ -1,6 +1,7 @@ import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api'; From 30c872e1e0ce813888b6735794fc91921670fb89 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 3 May 2023 11:19:53 +0200 Subject: [PATCH 05/23] delete TODO, add step to decimal --- .../uis/number/property-editor-ui-number.element.ts | 2 -- .../src/core/mocks/data/data-type.data.ts | 7 ++++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number/property-editor-ui-number.element.ts index a62559e35b..86adb96a11 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number/property-editor-ui-number.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/number/property-editor-ui-number.element.ts @@ -37,8 +37,6 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U this.dispatchEvent(new CustomEvent('property-value-change')); } - //TODO: UUI-INPUT needs to handle max, min, and step natively in its input field, maybe make a uui-input-number? - render() { return html` = parentId: null, propertyEditorAlias: 'Umbraco.Decimal', propertyEditorUiAlias: 'Umb.PropertyEditorUI.Decimal', - values: [], + values: [ + { + alias: 'step', + value: '0.01', + }, + ], }, { $type: '', From 3cbdd02b33817142fdd0b20d57d1f5eeaeb42e9e Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 3 May 2023 12:35:56 +0200 Subject: [PATCH 06/23] render label value --- .../uis/label/property-editor-ui-label.element.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/label/property-editor-ui-label.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/label/property-editor-ui-label.element.ts index 0b75bb45d8..b07c18a0a4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/label/property-editor-ui-label.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/label/property-editor-ui-label.element.ts @@ -1,4 +1,4 @@ -import { html, nothing } from 'lit'; +import { html } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry'; @@ -12,8 +12,6 @@ type umbracoDataValueType = 'STRING' | 'DECIMAL' | 'DATE/TIME' | 'TIME' | 'INTEG */ @customElement('umb-property-editor-ui-label') export class UmbPropertyEditorUILabelElement extends UmbLitElement implements UmbPropertyEditorExtensionElement { - - @property() value = ''; @@ -30,7 +28,7 @@ export class UmbPropertyEditorUILabelElement extends UmbLitElement implements Um } render() { - return nothing; + return html`${this.value}`; } static styles = [UUITextStyles]; From de91d25f2c114dec7abeab89174b9e458fa1eafb Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 3 May 2023 14:00:42 +0200 Subject: [PATCH 07/23] value type --- .../property-editor-ui-value-type.element.ts | 36 ++++++++++++++++--- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts index df2b219321..6ce812f6b0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/property-editors/uis/value-type/property-editor-ui-value-type.element.ts @@ -1,24 +1,50 @@ import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property } from 'lit/decorators.js'; +import { UUISelectEvent } from '@umbraco-ui/uui'; +import { customElement, property, state } from 'lit/decorators.js'; import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extensions-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api'; /** * @element umb-property-editor-ui-value-type */ + @customElement('umb-property-editor-ui-value-type') export class UmbPropertyEditorUIValueTypeElement extends UmbLitElement implements UmbPropertyEditorExtensionElement { - - @property() value = ''; + @state() + private _options: Array