From dd020b6acae010ed6ab324bd2c35ed9911f0367f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 13 Feb 2023 12:33:12 +1300 Subject: [PATCH 1/8] add radio button list --- .../input-radio-button-list.element.ts | 68 +++++++++++++++++++ ...rty-editor-ui-radio-button-list.element.ts | 35 ++++++++-- .../src/core/mocks/data/data-type.data.ts | 10 ++- 3 files changed, 107 insertions(+), 6 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts new file mode 100644 index 0000000000..f448f76576 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts @@ -0,0 +1,68 @@ +import { css, html, nothing } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; +import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; +import { repeat } from 'lit/directives/repeat.js'; +import { UUIBooleanInputEvent } from '@umbraco-ui/uui'; +import { UmbLitElement } from '@umbraco-cms/element'; + +@customElement('umb-input-radio-button-list') +export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitElement) { + static styles = [UUITextStyles, css``]; + + /** + * List of items. + */ + @property() + list?: []; + + private _selectedKey = ''; + public get selectedKey(): string { + return this._selectedKey; + } + public set selectedKey(key: string) { + this._selectedKey = key; + super.value = key; + } + + @property() + public set value(key: string) { + if (key !== this._value) { + this.selectedKey = key; + } + } + + protected getFormElement() { + return undefined; + } + + private _setSelection(e: UUIBooleanInputEvent) { + e.stopPropagation(); + if (e.target.checked) this.selectedKey = e.target.value; + + this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); + } + + render() { + if (!this.list) return nothing; + return html`
+ + + ${repeat(this.list, (item) => item.key, this.renderRadioButton)} + + +
`; + } + + renderRadioButton(item: any) { + return html``; + } +} + +export default UmbInputRadioButtonListElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-input-radio-button-list': UmbInputRadioButtonListElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts index 2718c7cc9a..c60ec10454 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts @@ -1,7 +1,10 @@ import { html } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property } from 'lit/decorators.js'; +import '../../../components/input-radio-button-list/input-radio-button-list.element'; +import type { UmbInputRadioButtonListElement } from '../../../components/input-radio-button-list/input-radio-button-list.element'; import { UmbLitElement } from '@umbraco-cms/element'; +import type { DataTypePropertyData } from '@umbraco-cms/models'; /** * @element umb-property-editor-ui-radio-button-list @@ -10,14 +13,36 @@ import { UmbLitElement } from '@umbraco-cms/element'; export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement { static styles = [UUITextStyles]; - @property() - value = ''; + private _value = ''; + @property({ type: String }) + public get value(): string { + return this._value; + } + public set value(value: string) { + this._value = value || ''; + } @property({ type: Array, attribute: false }) - public config = []; + public set config(config: Array) { + const listData = config.find((x) => x.alias === 'itemList'); + + if (!listData) return; + this._list = listData.value; + } + + @state() + private _list: [] = []; + + private _onChange(event: CustomEvent) { + this.value = (event.target as UmbInputRadioButtonListElement).selectedKey; + this.dispatchEvent(new CustomEvent('property-value-change')); + } render() { - return html`
umb-property-editor-ui-radio-button-list
`; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index 18620770db..c355123881 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -277,7 +277,15 @@ export const data: Array = [ isFolder: false, propertyEditorModelAlias: 'Umbraco.RadioButtonList', propertyEditorUIAlias: 'Umb.PropertyEditorUI.RadioButtonList', - data: [], + data: [ + { + alias: 'itemList', + value: [ + { label: 'Label 1', key: '123' }, + { label: 'Label 2', key: '456' }, + ], + }, + ], }, { name: 'Checkbox List', From fa0ee23ef410ab817e0da46735058dbb848a3a7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 13 Feb 2023 12:36:03 +1300 Subject: [PATCH 2/8] cleanup --- .../input-radio-button-list.element.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts index f448f76576..4bdac3b23f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts @@ -44,6 +44,8 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme } render() { + console.log('list', this.list); + if (!this.list) return nothing; return html`
@@ -54,7 +56,7 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme `; } - renderRadioButton(item: any) { + renderRadioButton(item: { key: string; label: string }) { return html``; } } From 637644fd3ea0757cce8b0f0e171abde54e33ccc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 13 Feb 2023 13:06:48 +1300 Subject: [PATCH 3/8] remove form, and fix event value --- .../input-radio-button-list.element.ts | 25 ++++++++++--------- ...rty-editor-ui-radio-button-list.element.ts | 2 +- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts index 4bdac3b23f..b1087f8ac2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts @@ -8,7 +8,14 @@ import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-input-radio-button-list') export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitElement) { - static styles = [UUITextStyles, css``]; + static styles = [ + UUITextStyles, + css` + :host { + display: block; + } + `, + ]; /** * List of items. @@ -38,22 +45,16 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme private _setSelection(e: UUIBooleanInputEvent) { e.stopPropagation(); - if (e.target.checked) this.selectedKey = e.target.value; - + if (e.target.value) this.selectedKey = e.target.value; this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); } render() { - console.log('list', this.list); - if (!this.list) return nothing; - return html`
- - - ${repeat(this.list, (item) => item.key, this.renderRadioButton)} - - -
`; + + return html` + ${repeat(this.list, (item) => item.key, this.renderRadioButton)} + `; } renderRadioButton(item: { key: string; label: string }) { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts index c60ec10454..112e424bc7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts @@ -41,7 +41,7 @@ export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement { render() { return html``; } } From 75f6c23d81571931299ef5a123b352c5c11cd8ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Wed, 15 Feb 2023 20:19:40 +1300 Subject: [PATCH 4/8] follow old backoffice data model --- .../input-radio-button-list.element.ts | 14 +++++------ ...rty-editor-ui-radio-button-list.element.ts | 24 +++++++++++++++---- .../src/core/mocks/data/data-type.data.ts | 11 +++++---- 3 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts index b1087f8ac2..80998aa45c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts @@ -21,14 +21,14 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme * List of items. */ @property() - list?: []; + list: Array = []; - private _selectedKey = ''; + private _selected = ''; public get selectedKey(): string { - return this._selectedKey; + return this._selected; } public set selectedKey(key: string) { - this._selectedKey = key; + this._selected = key; super.value = key; } @@ -53,12 +53,12 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme if (!this.list) return nothing; return html` - ${repeat(this.list, (item) => item.key, this.renderRadioButton)} + ${repeat(this.list, (value) => value, this.renderRadioButton)} `; } - renderRadioButton(item: { key: string; label: string }) { - return html``; + renderRadioButton(value: string) { + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts index 112e424bc7..a18d72e39d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts @@ -4,7 +4,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import '../../../components/input-radio-button-list/input-radio-button-list.element'; import type { UmbInputRadioButtonListElement } from '../../../components/input-radio-button-list/input-radio-button-list.element'; import { UmbLitElement } from '@umbraco-cms/element'; -import type { DataTypePropertyData } from '@umbraco-cms/models'; +import type { DataTypePropertyModel } from '@umbraco-cms/backend-api'; /** * @element umb-property-editor-ui-radio-button-list @@ -23,15 +23,29 @@ export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement { } @property({ type: Array, attribute: false }) - public set config(config: Array) { - const listData = config.find((x) => x.alias === 'itemList'); + public set config(config: Array) { + const listData = config.find((x) => x.alias === 'items'); if (!listData) return; - this._list = listData.value; + + // formatting the items in the dictionary into an array + const sortedItems = []; + const values = Object.values<{ value: string; sortOrder: number }>(listData.value); + const keys = Object.keys(listData.value); + for (let i = 0; i < values.length; i++) { + sortedItems.push({ key: keys[i], sortOrder: values[i].sortOrder, value: values[i].value }); + } + + // ensure the items are sorted by the provided sort order + sortedItems.sort(function (a, b) { + return a.sortOrder > b.sortOrder ? 1 : b.sortOrder > a.sortOrder ? -1 : 0; + }); + + this._list = sortedItems.map((item) => item.value); } @state() - private _list: [] = []; + private _list: Array = []; private _onChange(event: CustomEvent) { this.value = (event.target as UmbInputRadioButtonListElement).selectedKey; diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index bc1a65fa30..06bfcc1b8a 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -201,11 +201,12 @@ export const data: Array = [ propertyEditorUiAlias: 'Umb.PropertyEditorUI.RadioButtonList', data: [ { - alias: 'itemList', - value: [ - { label: 'Label 1', key: '123' }, - { label: 'Label 2', key: '456' }, - ], + alias: 'items', + value: { + 0: { sortOrder: 1, value: 'First Option' }, + 1: { sortOrder: 2, value: 'Second Option' }, + 2: { sortOrder: 3, value: 'I Am the third Option' }, + }, }, ], }, From cf44e14604560ee82a3a8c65394bf21d0b7745db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Thu, 16 Feb 2023 16:39:15 +1300 Subject: [PATCH 5/8] cleanup radio button list --- .../input-radio-button-list.element.ts | 16 ++++++++-------- ...operty-editor-ui-radio-button-list.element.ts | 8 ++++---- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts index 80998aa45c..c3e732e790 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts @@ -21,13 +21,13 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme * List of items. */ @property() - list: Array = []; + public list: Array<{ key: string; sortOrder: number; value: string }> = []; private _selected = ''; - public get selectedKey(): string { + public get selected(): string { return this._selected; } - public set selectedKey(key: string) { + public set selected(key: string) { this._selected = key; super.value = key; } @@ -35,7 +35,7 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme @property() public set value(key: string) { if (key !== this._value) { - this.selectedKey = key; + this.selected = key; } } @@ -45,7 +45,7 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme private _setSelection(e: UUIBooleanInputEvent) { e.stopPropagation(); - if (e.target.value) this.selectedKey = e.target.value; + if (e.target.value) this.selected = e.target.value; this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); } @@ -53,12 +53,12 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme if (!this.list) return nothing; return html` - ${repeat(this.list, (value) => value, this.renderRadioButton)} + ${repeat(this.list, (item) => item, this.renderRadioButton)} `; } - renderRadioButton(value: string) { - return html``; + renderRadioButton(item: { key: string; sortOrder: number; value: string }) { + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts index a18d72e39d..e40363747e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts @@ -37,18 +37,18 @@ export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement { } // ensure the items are sorted by the provided sort order - sortedItems.sort(function (a, b) { + sortedItems.sort((a, b) => { return a.sortOrder > b.sortOrder ? 1 : b.sortOrder > a.sortOrder ? -1 : 0; }); - this._list = sortedItems.map((item) => item.value); + this._list = sortedItems; } @state() - private _list: Array = []; + private _list: Array<{ key: string; sortOrder: number; value: string }> = []; private _onChange(event: CustomEvent) { - this.value = (event.target as UmbInputRadioButtonListElement).selectedKey; + this.value = (event.target as UmbInputRadioButtonListElement).selected; this.dispatchEvent(new CustomEvent('property-value-change')); } From cd15c136b8740e7fef6a1bd3b86d87e423326fcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Thu, 16 Feb 2023 16:39:48 +1300 Subject: [PATCH 6/8] make checkbox list follow old backoffice data model --- .../input-checkbox-list.element.ts | 26 +++++++++---------- ...roperty-editor-ui-checkbox-list.element.ts | 24 ++++++++++++++--- .../src/core/mocks/data/data-type.data.ts | 11 ++++---- 3 files changed, 39 insertions(+), 22 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts index 98d3dbdc59..be38113869 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts @@ -21,21 +21,21 @@ export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement) * List of items. */ @property() - list?: []; + public list: Array<{ key: string; checked: boolean; value: string }> = []; - private _selectedKeys: Array = []; - public get selectedKeys(): Array { - return this._selectedKeys; + private _selected: Array = []; + public get selected(): Array { + return this._selected; } - public set selectedKeys(keys: Array) { - this._selectedKeys = keys; + public set selected(keys: Array) { + this._selected = keys; super.value = keys.join(','); } @property() public set value(keysString: string) { if (keysString !== this._value) { - this.selectedKeys = keysString.split(/[ ,]+/); + this.selected = keysString.split(/[ ,]+/); } } @@ -45,17 +45,17 @@ export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement) private _setSelection(e: UUIBooleanInputEvent) { e.stopPropagation(); - if (e.target.checked) this.selectedKeys = [...this.selectedKeys, e.target.value]; - else this._removeFromSelection(this.selectedKeys.findIndex((key) => e.target.value === key)); + if (e.target.checked) this.selected = [...this.selected, e.target.value]; + else this._removeFromSelection(this.selected.findIndex((key) => e.target.value === key)); this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); } private _removeFromSelection(index: number) { if (index == -1) return; - const keys = [...this.selectedKeys]; + const keys = [...this.selected]; keys.splice(index, 1); - this.selectedKeys = keys; + this.selected = keys; } render() { @@ -67,8 +67,8 @@ export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement) `; } - renderCheckbox(item: any) { - return html``; + renderCheckbox(item: { key: string; checked: boolean; value: string }) { + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts index 375dde3ff2..0c7ee2e76a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts @@ -24,21 +24,37 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement { @property({ type: Array, attribute: false }) public set config(config: Array) { - const listData = config.find((x) => x.alias === 'itemList'); + const listData = config.find((x) => x.alias === 'items'); if (!listData) return; - this._list = listData.value; + + // formatting the items in the dictionary into an array + const sortedItems = []; + const values = Object.values<{ value: string; sortOrder: number }>(listData.value); + const keys = Object.keys(listData.value); + for (let i = 0; i < values.length; i++) { + sortedItems.push({ key: keys[i], sortOrder: values[i].sortOrder, value: values[i].value }); + } + // ensure the items are sorted by the provided sort order + sortedItems.sort((a, b) => { + return a.sortOrder > b.sortOrder ? 1 : b.sortOrder > a.sortOrder ? -1 : 0; + }); + + console.log('sortedItems', sortedItems, 'value', this._value); + + this._list = sortedItems.map((x) => ({ key: x.key, checked: this._value.includes(x.value), value: x.value })); } @state() - private _list: [] = []; + private _list: Array<{ key: string; checked: boolean; value: string }> = []; private _onChange(event: CustomEvent) { - this.value = (event.target as UmbInputCheckboxListElement).selectedKeys; + this.value = (event.target as UmbInputCheckboxListElement).selected; this.dispatchEvent(new CustomEvent('property-value-change')); } render() { + console.log('list', this._list); return html` = [ propertyEditorUiAlias: 'Umb.PropertyEditorUI.CheckboxList', data: [ { - alias: 'itemList', - value: [ - { label: 'Label 1', key: '123' }, - { label: 'Label 2', key: '456' }, - ], + alias: 'items', + value: { + 0: { sortOrder: 1, value: 'First Option' }, + 1: { sortOrder: 2, value: 'Second Option' }, + 2: { sortOrder: 3, value: 'I Am the third Option' }, + }, }, ], }, From 5f7f9783bc5daaf23ca8f6f7445ff6747cdbabca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Thu, 16 Feb 2023 16:46:15 +1300 Subject: [PATCH 7/8] cleanup --- .../input-checkbox-list.element.ts | 14 +++++++------- .../input-radio-button-list.element.ts | 10 +++++----- .../property-editor-ui-checkbox-list.element.ts | 17 +++++++---------- ...perty-editor-ui-radio-button-list.element.ts | 12 ++++++------ 4 files changed, 25 insertions(+), 28 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts index be38113869..bb7537302f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts @@ -23,12 +23,12 @@ export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement) @property() public list: Array<{ key: string; checked: boolean; value: string }> = []; - private _selected: Array = []; + #selected: Array = []; public get selected(): Array { - return this._selected; + return this.#selected; } public set selected(keys: Array) { - this._selected = keys; + this.#selected = keys; super.value = keys.join(','); } @@ -43,15 +43,15 @@ export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement) return undefined; } - private _setSelection(e: UUIBooleanInputEvent) { + #setSelection(e: UUIBooleanInputEvent) { e.stopPropagation(); if (e.target.checked) this.selected = [...this.selected, e.target.value]; - else this._removeFromSelection(this.selected.findIndex((key) => e.target.value === key)); + else this.#removeFromSelection(this.selected.findIndex((key) => e.target.value === key)); this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); } - private _removeFromSelection(index: number) { + #removeFromSelection(index: number) { if (index == -1) return; const keys = [...this.selected]; keys.splice(index, 1); @@ -61,7 +61,7 @@ export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement) render() { if (!this.list) return nothing; return html`
- + ${repeat(this.list, (item) => item.key, this.renderCheckbox)} `; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts index c3e732e790..e68110dabc 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts @@ -23,12 +23,12 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme @property() public list: Array<{ key: string; sortOrder: number; value: string }> = []; - private _selected = ''; + #selected = ''; public get selected(): string { - return this._selected; + return this.#selected; } public set selected(key: string) { - this._selected = key; + this.#selected = key; super.value = key; } @@ -43,7 +43,7 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme return undefined; } - private _setSelection(e: UUIBooleanInputEvent) { + #setSelection(e: UUIBooleanInputEvent) { e.stopPropagation(); if (e.target.value) this.selected = e.target.value; this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); @@ -52,7 +52,7 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme render() { if (!this.list) return nothing; - return html` + return html` ${repeat(this.list, (item) => item, this.renderRadioButton)} `; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts index 0c7ee2e76a..ad1eaff530 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts @@ -13,13 +13,13 @@ import type { DataTypePropertyModel } from '@umbraco-cms/backend-api'; export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement { static styles = [UUITextStyles]; - private _value: Array = []; + #value: Array = []; @property({ type: Array }) public get value(): Array { - return this._value; + return this.#value; } public set value(value: Array) { - this._value = value || []; + this.#value = value || []; } @property({ type: Array, attribute: false }) @@ -40,24 +40,21 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement { return a.sortOrder > b.sortOrder ? 1 : b.sortOrder > a.sortOrder ? -1 : 0; }); - console.log('sortedItems', sortedItems, 'value', this._value); - - this._list = sortedItems.map((x) => ({ key: x.key, checked: this._value.includes(x.value), value: x.value })); + this._list = sortedItems.map((x) => ({ key: x.key, checked: this.#value.includes(x.value), value: x.value })); } @state() private _list: Array<{ key: string; checked: boolean; value: string }> = []; - private _onChange(event: CustomEvent) { + #onChange(event: CustomEvent) { this.value = (event.target as UmbInputCheckboxListElement).selected; this.dispatchEvent(new CustomEvent('property-value-change')); } render() { - console.log('list', this._list); return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts index e40363747e..1730df37a9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts @@ -13,13 +13,13 @@ import type { DataTypePropertyModel } from '@umbraco-cms/backend-api'; export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement { static styles = [UUITextStyles]; - private _value = ''; + #value = ''; @property({ type: String }) public get value(): string { - return this._value; + return this.#value; } public set value(value: string) { - this._value = value || ''; + this.#value = value || ''; } @property({ type: Array, attribute: false }) @@ -47,15 +47,15 @@ export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement { @state() private _list: Array<{ key: string; sortOrder: number; value: string }> = []; - private _onChange(event: CustomEvent) { + #onChange(event: CustomEvent) { this.value = (event.target as UmbInputRadioButtonListElement).selected; this.dispatchEvent(new CustomEvent('property-value-change')); } render() { return html``; } } From 766eeeb34b56ebc7d70a0b39390b6c205d4d9a0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Thu, 16 Feb 2023 17:00:58 +1300 Subject: [PATCH 8/8] cleanup --- .../input-checkbox-list/input-checkbox-list.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts index bb7537302f..9555158e76 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts @@ -1,6 +1,6 @@ import { css, html, nothing } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property, state } from 'lit/decorators.js'; +import { customElement, property } from 'lit/decorators.js'; import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; import { repeat } from 'lit/directives/repeat.js'; import { UUIBooleanInputEvent } from '@umbraco-ui/uui';