property editor default value

This commit is contained in:
Niels Lyngsø
2023-06-09 13:54:42 +02:00
parent 8ff5f2cf21
commit c50cf56b5f
14 changed files with 37 additions and 28 deletions

View File

@@ -16,7 +16,7 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem
return this.#value;
}
public set value(value: Array<string>) {
this.#value = value || [];
this.#value = value ?? [];
}
@property({ type: Array, attribute: false })

View File

@@ -31,6 +31,7 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implemen
this.dispatchEvent(new CustomEvent('property-value-change'));
}
// TODO: This should use the given value:
render() {
return html`<umb-input-eye-dropper
@change="${this._onChange}"

View File

@@ -30,9 +30,11 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implemen
}
private _openModal() {
// TODO: Modal should know the current selected one, and bring back the newly selected one.
this._modalContext?.open(UMB_ICON_PICKER_MODAL);
}
// TODO: We should show the current picked icon.
render() {
return html`
<uui-button

View File

@@ -19,7 +19,7 @@ export class UmbPropertyEditorUILabelElement extends UmbLitElement implements Um
public config?: UmbDataTypePropertyCollection;
render() {
return html`${this.value}`;
return html`${this.value ?? ''}`;
}
static styles = [UUITextStyles];

View File

@@ -15,7 +15,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme
public get value(): Array<string> {
return this._value;
}
public set value(value: Array<string>) {
public set value(value: Array<string> | undefined) {
this._value = value || [];
}

View File

@@ -77,7 +77,7 @@ export class UmbPropertyEditorUIMultiUrlPickerElement
.ignoreUserStartNodes=${this._ignoreUserStartNodes}
.max=${this._maxNumber}
.min=${this._minNumber}
.urls="${this.value}"></umb-input-multi-url>`;
.urls="${this.value ?? []}"></umb-input-multi-url>`;
}
static styles = [UUITextStyles];

View File

@@ -68,7 +68,7 @@ export class UmbPropertyEditorUIMultipleTextStringElement
render() {
return html`<umb-input-multiple-text-string
.items="${this.value}"
.items="${this.value ?? []}"
min="${ifDefined(this._limitMin)}"
max="${ifDefined(this._limitMax)}"
@change=${this.#onChange}

View File

@@ -32,7 +32,7 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
render() {
return html`<uui-input
.value=${this.value}
.value=${this.value ?? 0}
type="number"
max="${ifDefined(this._max)}"
min="${ifDefined(this._min)}"

View File

@@ -19,8 +19,8 @@ export class UmbPropertyEditorUIRadioButtonListElement
public get value(): string {
return this.#value;
}
public set value(value: string) {
this.#value = value || '';
public set value(value: string | undefined) {
this.#value = value?.trim() || '';
}
@property({ type: Array, attribute: false })

View File

@@ -1,4 +1,4 @@
import UmbInputSliderElement from '../../../components/input-slider/input-slider.element.js';
import { UmbInputSliderElement } from '../../../components/input-slider/input-slider.element.js';
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -11,10 +11,12 @@ import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/comp
@customElement('umb-property-editor-ui-slider')
export class UmbPropertyEditorUISliderElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
@property()
value: {
to?: number;
from?: number;
} = {};
value:
| {
to?: number;
from?: number;
}
| undefined = undefined;
@state()
_enableRange?: boolean;
@@ -57,6 +59,7 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
this.dispatchEvent(new CustomEvent('property-value-change'));
}
// TODO: This does not seem to take current value into account?
render() {
return html`<umb-input-slider
.initVal1="${this._initVal1 ?? 0}"

View File

@@ -30,7 +30,7 @@ export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements
render() {
return html`<uui-input
.value=${this.value}
.value=${this.value ?? ''}
type="${this._type}"
maxlength="${ifDefined(this._maxChars)}"
@input=${this.onInput}></uui-input>`;

View File

@@ -47,7 +47,7 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements
render() {
return html` <uui-textarea
label="Textarea"
.value=${this.value}
.value=${this.value ?? ''}
maxlength="${ifDefined(this._maxChars)}"
rows="${ifDefined(this._rows)}"
@input=${this.onInput}

View File

@@ -11,7 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@customElement('umb-property-editor-ui-toggle')
export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
@property()
value = false;
value: undefined | boolean = undefined;
@state()
_labelOff?: string;
@@ -24,7 +24,7 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U
@property({ type: Array, attribute: false })
public set config(config: UmbDataTypePropertyCollection) {
this.value = config.getValueByAlias('default') ?? false;
this.value ??= config.getValueByAlias('default') ?? false;
this._labelOff = config.getValueByAlias('labelOff');
this._labelOn = config.getValueByAlias('labelOn');
this._showLabels = config.getValueByAlias('showLabels');

View File

@@ -11,8 +11,21 @@ import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/comp
@customElement('umb-property-editor-ui-value-type')
export class UmbPropertyEditorUIValueTypeElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
private _value: string | undefined = undefined;
@property()
value = '';
public get value(): string | undefined {
return this._value;
}
public set value(value: string | undefined) {
this._value = value;
const selected = this._options.filter((option) => {
return (option.selected = option.value === this.value);
});
if (selected.length === 0) {
this._options[0].selected = true;
}
}
@state()
private _options: Array<Option> = [
@@ -25,16 +38,6 @@ export class UmbPropertyEditorUIValueTypeElement extends UmbLitElement implement
{ name: 'Long String', value: 'TEXT' },
];
constructor() {
super();
}
connectedCallback(): void {
super.connectedCallback();
const index = this._options.findIndex((option) => option.value === this.value);
index > 0 ? (this._options[index].selected = true) : (this._options[0].selected = true);
}
@property({ type: Array, attribute: false })
public config?: UmbDataTypePropertyCollection;