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

element type picker

Browse Source
This commit is contained in:
Niels Lyngsø
2023-12-21 17:01:27 +01:00
parent 43b533041a
commit 0aa0955e23
3 changed files with 37 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/views/block-type-list-workspace-view.element.ts
View File

@@ -26,11 +26,17 @@ export class UmbBlockTypeListWorkspaceViewSettingsElement extends UmbLitElement
property-editor-ui-alias="Umb.PropertyEditorUi.OverlaySize"></umb-property>
</uui-box>
<uui-box headline="Data models">
<!-- TODO: implement readonly mode for umb-property -->
<umb-property
label="Content Model"
alias="contentElementTypeKey"
property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
readonly
.config=${[
{
alias: 'validationLimit',
value: { min: 0, max: 1 },
},
{
alias: 'onlyPickElementTypes',
value: true,
@@ -41,6 +47,10 @@ export class UmbBlockTypeListWorkspaceViewSettingsElement extends UmbLitElement
alias="settingsElementTypeKey"
property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
.config=${[
{
alias: 'validationLimit',
value: { min: 0, max: 1 },
},
{
alias: 'onlyPickElementTypes',
value: true,

7
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
View File

@@ -8,7 +8,7 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
@customElement('umb-input-document-type')
export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) {
/**
* Selects the element types only
* Limits to only select Element Types
* @type {boolean}
* @attr
* @default false
@@ -65,8 +65,9 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
public get selectedIds(): Array<string> {
return this.#pickerContext.getSelection();
}
public set selectedIds(ids: Array<string>) {
this.#pickerContext.setSelection(ids);
public set selectedIds(ids: Array<string> | undefined) {
console.log('selectedIds', ids);
this.#pickerContext.setSelection(ids ?? []);
}
@property()

40
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts
View File

@@ -6,15 +6,14 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
@customElement('umb-property-editor-ui-document-type-picker')
export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
private _value: Array<string> = [];
@property({ type: Array })
public get value(): Array<string> {
public get value(): Array<string> | string | undefined {
return this._value;
}
public set value(value: Array<string>) {
this._value = value || [];
public set value(value: Array<string> | string | undefined) {
this._value = value ?? [];
}
private _value?: Array<string> | string;
@property({ attribute: false })
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
@@ -23,7 +22,9 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
this._limitMin = validationLimit?.min;
this._limitMax = validationLimit?.max;
this._onlyElementTypes = config.getValueByAlias('onlyPickElementTypes');
// We have the need in Block Editors, to just pick a single ID not as an array. So for that we use the multiPicker config, which can be set to true if you wanted to be able to pick multiple.
this._multiPicker = config.getValueByAlias('multiPicker') ?? false;
this._onlyElementTypes = config.getValueByAlias('onlyPickElementTypes') ?? false;
}
}
@@ -32,25 +33,30 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
@state()
private _limitMax?: number;
@state()
private _multiPicker?: boolean;
@state()
private _onlyElementTypes?: boolean;
private _onChange(event: CustomEvent) {
this.value = (event.target as UmbInputDocumentTypeElement).selectedIds;
const selectedIds = (event.target as UmbInputDocumentTypeElement).selectedIds;
this.value = this._multiPicker ? selectedIds : selectedIds[0];
this.dispatchEvent(new CustomEvent('property-value-change'));
}
// TODO: Implement mandatory?
render() {
return html`
<umb-input-document-type
@change=${this._onChange}
.selectedIds=${this._value}
.min=${this._limitMin ?? 0}
.max=${this._limitMax ?? Infinity}
.element-types-only=${this._onlyElementTypes}
>Add</umb-input-document-type
>
`;
return this._multiPicker !== undefined
? html`
<umb-input-document-type
@change=${this._onChange}
.selectedIds=${this._multiPicker ? (this._value as Array<string>) ?? [] : [this._value as string]}
.min=${this._limitMin ?? 0}
.max=${this._limitMax ?? Infinity}
.element-types-only=${this._onlyElementTypes}
>Add</umb-input-document-type
>
`
: '';
}
}