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

Merge branch 'main' into bugfix/document-media-recycle-bin-conditions

Browse Source
This commit is contained in:
Mads Rasmussen
2024-05-14 17:01:54 +02:00
committed by GitHub
parent 0b140d59db c79892ffcb
commit f234bbd34f
7 changed files with 89 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/packages/core/components/input-radio-button-list/input-radio-button-list.element.ts
View File

@@ -4,6 +4,8 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UUIRadioEvent } from '@umbraco-cms/backoffice/external/uui';
type UmbRadioButtonItem = { label: string; value: string };
@customElement('umb-input-radio-button-list')
export class UmbInputRadioButtonListElement extends UUIFormControlMixin(UmbLitElement, '') {
#value: string = '';
@@ -17,7 +19,7 @@ export class UmbInputRadioButtonListElement extends UUIFormControlMixin(UmbLitEl
}
@property({ type: Array })
public list: Array<{ label: string; value: string }> = [];
public list: Array<UmbRadioButtonItem> = [];
protected getFormElement() {
return undefined;

13
src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/components/input-checkbox-list/input-checkbox-list.element.ts
View File

@@ -4,11 +4,12 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
type UmbCheckboxListItem = { label: string; value: string; checked: boolean };
@customElement('umb-input-checkbox-list')
export class UmbInputCheckboxListElement extends UUIFormControlMixin(UmbLitElement, '') {
// TODO: Could this use a type that we export to ensure TS failure, or hook this up with a type coming from backend?
@property({ attribute: false })
public list: Array<{ label: string; value: string; checked: boolean }> = [];
public list: Array<UmbCheckboxListItem> = [];
#selection: Array<string> = [];
@property({ type: Array })
@@ -29,10 +30,10 @@ export class UmbInputCheckboxListElement extends UUIFormControlMixin(UmbLitEleme
return undefined;
}
#onChange(e: UUIBooleanInputEvent) {
e.stopPropagation();
if (e.target.checked) this.selection = [...this.selection, e.target.value];
else this.#removeFromSelection(this.selection.findIndex((value) => e.target.value === value));
#onChange(event: UUIBooleanInputEvent) {
event.stopPropagation();
if (event.target.checked) this.selection = [...this.selection, event.target.value];
else this.#removeFromSelection(this.selection.findIndex((value) => event.target.value === value));
this.dispatchEvent(new UmbChangeEvent());
}

34
src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/property-editor-ui-checkbox-list.element.ts
View File

@@ -12,26 +12,38 @@ import './components/input-checkbox-list/input-checkbox-list.element.js';
*/
@customElement('umb-property-editor-ui-checkbox-list')
export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implements UmbPropertyEditorUiElement {
#value: Array<string> = [];
#selection: Array<string> = [];
@property({ type: Array })
public set value(value: Array<string>) {
this.#value = value ?? [];
public set value(value: Array<string> | string | undefined) {
this.#selection = Array.isArray(value) ? value : value ? [value] : [];
}
public get value(): Array<string> {
return this.#value;
public get value(): Array<string> | undefined {
return this.#selection;
}
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
const listData: string[] | undefined = config?.getValueByAlias('items');
this._list = listData?.map((item) => ({ label: item, value: item, checked: this.#value.includes(item) })) ?? [];
if (!config) return;
const items = config.getValueByAlias('items');
if (Array.isArray(items) && items.length > 0) {
this._list =
typeof items[0] === 'string'
? items.map((item) => ({ label: item, value: item, checked: this.#selection.includes(item) }))
: items.map((item) => ({
label: item.name,
value: item.value,
checked: this.#selection.includes(item.value),
}));
}
}
@state()
private _list: UmbInputCheckboxListElement['list'] = [];
#onChange(event: CustomEvent) {
const element = event.target as UmbInputCheckboxListElement;
this.value = element.selection;
#onChange(event: CustomEvent & { target: UmbInputCheckboxListElement }) {
this.value = event.target.selection;
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
@@ -39,7 +51,7 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem
return html`
<umb-input-checkbox-list
.list=${this._list}
.selection=${this.#value}
.selection=${this.#selection}
@change=${this.#onChange}></umb-input-checkbox-list>
`;
}

36
src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/property-editor-ui-dropdown.element.ts
View File

@@ -21,20 +21,30 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements
return this.#selection;
}
@state()
private _items: Array<Option> = [];
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const items = config.getValueByAlias('items');
if (Array.isArray(items) && items.length > 0) {
this._options =
typeof items[0] === 'string'
? items.map((item) => ({ name: item, value: item, selected: this.#selection.includes(item) }))
: items.map((item) => ({
name: item.name,
value: item.value,
selected: this.#selection.includes(item.value),
}));
}
this._multiple = config.getValueByAlias<boolean>('multiple') ?? false;
}
@state()
private _multiple: boolean = false;
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const items = config.getValueByAlias<string[]>('items');
this._items = items?.map((item) => ({ value: item, name: item, selected: this.#selection.includes(item) })) ?? [];
this._multiple = config?.getValueByAlias<boolean>('multiple') ?? false;
}
@state()
private _options: Array<Option> = [];
#onChange(event: UUISelectEvent) {
const value = event.target.value as string;
@@ -61,7 +71,7 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements
return html`
<select id="native" multiple @change=${this.#onChangeMulitple}>
${map(
this._items,
this._options,
(item) => html`<option value=${item.value} ?selected=${item.selected}>${item.name}</option>`,
)}
</select>
@@ -69,7 +79,9 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements
}
#renderDropdownSingle() {
return html`<umb-input-dropdown-list .options=${this._items} @change=${this.#onChange}></umb-input-dropdown-list>`;
return html`
<umb-input-dropdown-list .options=${this._options} @change=${this.#onChange}></umb-input-dropdown-list>
`;
}
static styles = [

27
src/Umbraco.Web.UI.Client/src/packages/property-editors/radio-button-list/property-editor-ui-radio-button-list.element.ts
View File

@@ -16,24 +16,33 @@ export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement imp
value?: string = '';
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
const listData: string[] | undefined = config?.getValueByAlias('items');
this._list = listData?.map((item) => ({ label: item, value: item })) ?? [];
if (!config) return;
const items = config.getValueByAlias('items');
if (Array.isArray(items) && items.length > 0) {
this._list =
typeof items[0] === 'string'
? items.map((item) => ({ label: item, value: item }))
: items.map((item) => ({ label: item.name, value: item.value }));
}
}
@state()
private _list: UmbInputRadioButtonListElement['list'] = [];
#onChange(event: CustomEvent) {
const element = event.target as UmbInputRadioButtonListElement;
this.value = element.value;
#onChange(event: CustomEvent & { target: UmbInputRadioButtonListElement }) {
this.value = event.target.value;
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
render() {
return html`<umb-input-radio-button-list
.list=${this._list}
.value=${this.value ?? ''}
@change=${this.#onChange}></umb-input-radio-button-list>`;
return html`
<umb-input-radio-button-list
.list=${this._list}
.value=${this.value ?? ''}
@change=${this.#onChange}></umb-input-radio-button-list>
`;
}
}

20
src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.element.ts
View File

@@ -1,4 +1,4 @@
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { customElement, html, 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';
@@ -13,23 +13,29 @@ export class UmbPropertyEditorUISelectElement extends UmbLitElement implements U
@property()
value?: string = '';
@state()
private _list: Array<Option> = [];
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const listData = config.getValueByAlias<string[]>('items');
this._list = listData?.map((option) => ({ value: option, name: option, selected: option === this.value })) ?? [];
const items = config.getValueByAlias('items');
if (Array.isArray(items) && items.length > 0) {
this._options =
typeof items[0] === 'string'
? items.map((item) => ({ name: item, value: item, selected: item === this.value }))
: items.map((item) => ({ name: item.name, value: item.value, selected: item.value === this.value }));
}
}
@state()
private _options: Array<Option> = [];
#onChange(event: UUISelectEvent) {
this.value = event.target.value as string;
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
render() {
return html`<uui-select .options=${this._list} @change=${this.#onChange}></uui-select>`;
return html`<uui-select .options=${this._options} @change=${this.#onChange}></uui-select>`;
}
}

2
src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.test.ts
View File

@@ -6,7 +6,7 @@ describe('UmbPropertyEditorUISelectElement', () => {
let element: UmbPropertyEditorUISelectElement;
beforeEach(async () => {
element = await fixture(html` <umb-property-editor-ui-select></umb-property-editor-ui-select> `);
element = await fixture(html`<umb-property-editor-ui-select></umb-property-editor-ui-select>`);
});
it('is defined with its own instance', () => {