PropertyType workspace: layout & labeling adjustments (#20131)
* Property workspace update * Fixed error with updating the properties * Unused variable * Added data-mark to description textarea * make select 100% width * tiny appearance-option style adjustments * Make placeholder property inside the input-with-alias optional * Moving variations and member type option to their own boxes --------- Co-authored-by: Mads Rasmussen <madsr@hey.com> Co-authored-by: Niels Lyngsø <nsl@umbraco.dk> Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>
This commit is contained in:
Engiber Lozada
@@ -849,6 +849,7 @@ export default {
|
||||
delete: 'Delete',
|
||||
deleted: 'Deleted',
|
||||
deleting: 'Deleting...',
|
||||
description: 'Description',
|
||||
design: 'Design',
|
||||
details: 'Details',
|
||||
dictionary: 'Dictionary',
|
||||
@@ -923,6 +924,7 @@ export default {
|
||||
pleasewait: 'One moment please...',
|
||||
previous: 'Previous',
|
||||
properties: 'Properties',
|
||||
propertyEditor: 'Property editor',
|
||||
readMore: 'Read more',
|
||||
rebuild: 'Rebuild',
|
||||
reciept: 'Email to receive form data',
|
||||
@@ -2197,9 +2199,11 @@ export default {
|
||||
validateAsEmail: 'Validate as an email address',
|
||||
validateAsNumber: 'Validate as a number',
|
||||
validateAsUrl: 'Validate as a URL',
|
||||
validationPattern: 'Validation pattern',
|
||||
enterCustomValidation: '...or enter a custom validation',
|
||||
fieldIsMandatory: 'Field is mandatory',
|
||||
mandatoryMessage: 'Enter a custom validation error message (optional)',
|
||||
mandatoryMessageLabel: 'Feedback message',
|
||||
validationRegExp: 'Enter a regular expression',
|
||||
validationRegExpMessage: 'Enter a custom validation error message (optional)',
|
||||
minCount: 'You need to add at least',
|
||||
|
||||
@@ -481,6 +481,7 @@ export default {
|
||||
deleted: 'Borrado',
|
||||
deleting: 'Borrando...',
|
||||
design: 'Diseño',
|
||||
description: 'Descripción',
|
||||
dictionary: 'Diccionario',
|
||||
dimensions: 'Dimensiones',
|
||||
dividerPosition: (value: string | number) => `Divisor en ${value}%`,
|
||||
@@ -525,6 +526,7 @@ export default {
|
||||
off: 'Desactivado',
|
||||
ok: 'OK',
|
||||
open: 'Abrir',
|
||||
options: 'Opciones',
|
||||
on: 'Activado',
|
||||
or: 'o',
|
||||
orderBy: 'Ordenar por',
|
||||
@@ -533,6 +535,7 @@ export default {
|
||||
pleasewait: 'Un momento por favor...',
|
||||
previous: 'Anterior',
|
||||
properties: 'Propiedades',
|
||||
propertyEditor: 'Editor de propiedades',
|
||||
reciept: 'Mail para recibir los datos del formulario',
|
||||
recycleBin: 'Papelera',
|
||||
recycleBinEmpty: 'Tu papelera está vacía',
|
||||
@@ -1153,6 +1156,9 @@ export default {
|
||||
memberCanEdit: 'Miembro puede editar',
|
||||
showOnMemberProfile: 'Mostrar en perfil de miembro',
|
||||
tabHasNoSortOrder: 'pestaña no tiene orden',
|
||||
displaySettingsHeadline: 'Apariencia',
|
||||
displaySettingsLabelOnLeft: 'Etiqueta a la izquierda',
|
||||
displaySettingsLabelOnTop: 'Etiqueta arriba (ancho completo)',
|
||||
},
|
||||
languages: {
|
||||
addLanguage: 'Agregar idioma',
|
||||
@@ -1377,9 +1383,12 @@ export default {
|
||||
validateAsEmail: 'Validar como email',
|
||||
validateAsNumber: 'Validar como número',
|
||||
validateAsUrl: 'Validar como URL',
|
||||
validationPattern: 'Patrón de validación',
|
||||
enterCustomValidation: '...o introduce tu propia validación',
|
||||
customValidation: 'Validación personalizada',
|
||||
fieldIsMandatory: 'Campo obligatorio',
|
||||
validationRegExp: 'Introduce una expresión regular',
|
||||
mandatoryMessageLabel: 'Mensaje de validación',
|
||||
minCount: 'Necesitas añadir al menos',
|
||||
maxCount: 'Sólo puedes tener',
|
||||
items: 'elementos',
|
||||
|
||||
@@ -1,18 +1,13 @@
|
||||
import { UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT } from '../../../index.js';
|
||||
import { css, html, customElement, state, nothing, query } from '@umbraco-cms/backoffice/external/lit';
|
||||
import { generateAlias } from '@umbraco-cms/backoffice/utils';
|
||||
import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
|
||||
import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
|
||||
import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, umbBindToValidation } from '@umbraco-cms/backoffice/validation';
|
||||
import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
|
||||
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
|
||||
import { UMB_CONTENT_TYPE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content-type';
|
||||
import type { UmbPropertyTypeScaffoldModel } from '@umbraco-cms/backoffice/content-type';
|
||||
import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/workspace';
|
||||
import type {
|
||||
UUIBooleanInputEvent,
|
||||
UUIInputEvent,
|
||||
UUIInputLockElement,
|
||||
UUISelectEvent,
|
||||
} from '@umbraco-cms/backoffice/external/uui';
|
||||
import type { UUIBooleanInputEvent, UUIInputEvent, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
|
||||
import type { UmbInputWithAliasElement } from '@umbraco-cms/backoffice/components';
|
||||
|
||||
@customElement('umb-property-type-workspace-view-settings')
|
||||
export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
|
||||
@@ -46,40 +41,25 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
|
||||
@state()
|
||||
private _data?: UmbPropertyTypeScaffoldModel;
|
||||
|
||||
@state()
|
||||
private _aliasLocked = true;
|
||||
|
||||
@state()
|
||||
private _autoGenerateAlias = true;
|
||||
|
||||
@state()
|
||||
private _contentTypeVariesByCulture?: boolean;
|
||||
|
||||
@state()
|
||||
private _contentTypeVariesBySegment?: boolean;
|
||||
|
||||
@query('#alias-input')
|
||||
private _aliasInput!: UUIInputLockElement;
|
||||
|
||||
@state()
|
||||
private _entityType?: string;
|
||||
|
||||
@state()
|
||||
private _isNew?: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.consumeContext(UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT, (instance) => {
|
||||
this.#context = instance;
|
||||
this.observe(
|
||||
instance?.data,
|
||||
(data) => {
|
||||
if (!this._data && data?.alias) {
|
||||
// Initial. Loading existing property
|
||||
this._autoGenerateAlias = false;
|
||||
}
|
||||
this._data = data;
|
||||
},
|
||||
'observeData',
|
||||
);
|
||||
this.observe(instance?.data, (data) => (this._data = data), 'observeData');
|
||||
this.observe(instance?.isNew, (isNew) => (this._isNew = isNew), '_observeIsNew');
|
||||
});
|
||||
|
||||
this.consumeContext(UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, (instance) => {
|
||||
@@ -99,19 +79,6 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
|
||||
this.#context?.updateData(partialValue);
|
||||
}
|
||||
|
||||
#onNameChange(event: UUIInputEvent) {
|
||||
this.updateValue({ name: event.target.value.toString() });
|
||||
if (this._aliasLocked && this._autoGenerateAlias) {
|
||||
this.updateValue({ alias: generateAlias(this._data?.name ?? '') });
|
||||
}
|
||||
}
|
||||
|
||||
#onAliasChange() {
|
||||
// TODO: Why can I not get the correct value via event? Is it an issue in uui library too?
|
||||
const alias = generateAlias(this._aliasInput.value.toString());
|
||||
this.updateValue({ alias });
|
||||
}
|
||||
|
||||
#onDescriptionChange(event: UUIInputEvent) {
|
||||
this.updateValue({ description: event.target.value.toString() });
|
||||
}
|
||||
@@ -166,16 +133,6 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
|
||||
this.updateValue({ isSensitive: e.target.checked });
|
||||
}
|
||||
|
||||
#onToggleAliasLock() {
|
||||
this._aliasLocked = !this._aliasLocked;
|
||||
if (this._aliasLocked && !this._data?.alias) {
|
||||
// Reenable auto-generate if alias is empty and locked.
|
||||
this._autoGenerateAlias = true;
|
||||
} else {
|
||||
this._autoGenerateAlias = false;
|
||||
}
|
||||
}
|
||||
|
||||
#onCustomValidationChange(event: UUISelectEvent) {
|
||||
const value = event.target.value.toString();
|
||||
const regEx = value !== '!NOVALIDATION!' ? value : null;
|
||||
@@ -217,134 +174,137 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
|
||||
this.updateValue({ variesBySegment: !sharedAcrossSegments });
|
||||
}
|
||||
|
||||
#onNameAndAliasChange(event: InputEvent & { target: UmbInputWithAliasElement }) {
|
||||
const name = event.target.value ?? '';
|
||||
const alias = event.target.alias ?? '';
|
||||
this.updateValue({ name, alias });
|
||||
}
|
||||
|
||||
override render() {
|
||||
if (!this._data) return;
|
||||
return html`
|
||||
<uui-box class="uui-text">
|
||||
<div class="container">
|
||||
<umb-form-validation-message>
|
||||
<uui-input
|
||||
id="name-input"
|
||||
data-mark="input:entity-name"
|
||||
name="name"
|
||||
label=${this.localize.term('placeholders_entername')}
|
||||
placeholder=${this.localize.term('placeholders_entername')}
|
||||
.value=${this._data?.name}
|
||||
@input=${this.#onNameChange}
|
||||
required
|
||||
${umbBindToValidation(this, '$.name')}
|
||||
${umbFocus()}>
|
||||
<!-- TODO: validation for bad characters -->
|
||||
</uui-input>
|
||||
</umb-form-validation-message>
|
||||
<umb-form-validation-message>
|
||||
<uui-input-lock
|
||||
id="alias-input"
|
||||
name="alias"
|
||||
label=${this.localize.term('placeholders_enterAlias')}
|
||||
placeholder=${this.localize.term('placeholders_enterAlias')}
|
||||
.value=${this._data?.alias}
|
||||
?locked=${this._aliasLocked}
|
||||
required
|
||||
${umbBindToValidation(this, '$.alias')}
|
||||
@input=${this.#onAliasChange}
|
||||
@lock-change=${this.#onToggleAliasLock}>
|
||||
</uui-input-lock>
|
||||
</umb-form-validation-message>
|
||||
<umb-property-layout label=${this.localize.term('general_name')} orientation="vertical" mandatory>
|
||||
<umb-input-with-alias
|
||||
id="name-input"
|
||||
data-mark="input:entity-name"
|
||||
name="name"
|
||||
slot="editor"
|
||||
required
|
||||
.value=${this._data?.name ?? ''}
|
||||
.alias=${this._data?.alias ?? ''}
|
||||
?auto-generate-alias=${this._isNew}
|
||||
@change=${this.#onNameAndAliasChange}
|
||||
${umbBindToValidation(this, '$.name', this._data?.name)}
|
||||
${umbFocus()}>
|
||||
</umb-input-with-alias>
|
||||
</umb-property-layout>
|
||||
|
||||
<umb-property-layout label=${this.localize.term('general_description')} orientation="vertical">
|
||||
<uui-textarea
|
||||
id="description-input"
|
||||
data-mark="input:entity-description"
|
||||
slot="editor"
|
||||
name="description"
|
||||
@input=${this.#onDescriptionChange}
|
||||
label=${this.localize.term('placeholders_enterDescription')}
|
||||
placeholder=${this.localize.term('placeholders_enterDescription')}
|
||||
.value=${this._data?.description}
|
||||
auto-height></uui-textarea>
|
||||
</div>
|
||||
<umb-form-validation-message>
|
||||
</umb-property-layout>
|
||||
|
||||
<umb-property-layout label=${this.localize.term('general_propertyEditor')} orientation="vertical" mandatory>
|
||||
<umb-data-type-flow-input
|
||||
slot="editor"
|
||||
id="data-type-input"
|
||||
.value=${this._data?.dataType?.unique ?? ''}
|
||||
@change=${this.#onDataTypeIdChange}
|
||||
required
|
||||
${umbBindToValidation(this, '$.dataType.unique')}></umb-data-type-flow-input>
|
||||
</umb-form-validation-message>
|
||||
<hr />
|
||||
<div class="container">
|
||||
<b><umb-localize key="validation_validation">Validation</umb-localize></b>
|
||||
${this.#renderMandatory()}
|
||||
<p style="margin-bottom: 0">
|
||||
<umb-localize key="validation_customValidation">Custom validation</umb-localize>
|
||||
</p>
|
||||
${this.#renderCustomValidation()}
|
||||
</div>
|
||||
${this.#renderVariationControls()}
|
||||
<umb-property-layout label="#contentTypeEditor_displaySettingsHeadline" orientation="vertical">
|
||||
</umb-property-layout>
|
||||
</uui-box>
|
||||
|
||||
<uui-box class="uui-text">
|
||||
<umb-localize key="validation_validation" slot="headline">Validation</umb-localize>
|
||||
${this.#renderMandatory()} ${this.#renderCustomValidation()}</uui-box
|
||||
>
|
||||
|
||||
${this.#renderVariationControls()}
|
||||
|
||||
<uui-box class="uui-text">
|
||||
<umb-localize key="contentTypeEditor_displaySettingsHeadline" slot="headline">Appearance</umb-localize>
|
||||
<umb-property-layout orientation="vertical">
|
||||
<div id="appearances" slot="editor">${this.#renderAlignLeftIcon()} ${this.#renderAlignTopIcon()}</div>
|
||||
</umb-property-layout>
|
||||
|
||||
${this.#renderMemberTypeOptions()}
|
||||
</uui-box>
|
||||
|
||||
${this.#renderMemberTypeOptions()}
|
||||
`;
|
||||
}
|
||||
|
||||
#renderMemberTypeOptions() {
|
||||
if (this._entityType !== 'member-type') return nothing;
|
||||
return html` <hr />
|
||||
<div class="container">
|
||||
<b style="margin-bottom: var(--uui-size-space-3)">
|
||||
<umb-localize key="general_options">Options</umb-localize>
|
||||
</b>
|
||||
<div class="options">
|
||||
return html` <uui-box class="uui-text">
|
||||
<div class="options">
|
||||
<umb-property-layout orientation="vertical">
|
||||
<uui-toggle
|
||||
slot="editor"
|
||||
?checked=${this._data?.visibility?.memberCanView}
|
||||
@change=${this.#onToggleShowOnMemberProfile}
|
||||
label=${this.localize.term('contentTypeEditor_showOnMemberProfile')}></uui-toggle>
|
||||
<small>
|
||||
<small slot="description">
|
||||
<umb-localize key="contentTypeEditor_showOnMemberProfileDescription">
|
||||
Allow this property value to be displayed on the member profile page
|
||||
</umb-localize>
|
||||
</small>
|
||||
</umb-property-layout>
|
||||
|
||||
<umb-property-layout orientation="vertical">
|
||||
<uui-toggle
|
||||
slot="editor"
|
||||
?checked=${this._data?.visibility?.memberCanEdit}
|
||||
@change=${this.#onToggleMemberCanEdit}
|
||||
label=${this.localize.term('contentTypeEditor_memberCanEdit')}></uui-toggle>
|
||||
<small>
|
||||
<small slot="description">
|
||||
<umb-localize key="contentTypeEditor_memberCanEditDescription">
|
||||
Allow this property value to be edited by the member on their profile page
|
||||
</umb-localize>
|
||||
</small>
|
||||
</umb-property-layout>
|
||||
|
||||
<umb-property-layout orientation="vertical">
|
||||
<uui-toggle
|
||||
slot="editor"
|
||||
?checked=${this._data?.isSensitive}
|
||||
@change=${this.#onToggleIsSensitiveData}
|
||||
label=${this.localize.term('contentTypeEditor_isSensitiveData')}></uui-toggle>
|
||||
<small>
|
||||
<small slot="description">
|
||||
<umb-localize key="contentTypeEditor_isSensitiveDataDescription">
|
||||
Hide this property value from content editors that don't have access to view sensitive information
|
||||
</umb-localize>
|
||||
</small>
|
||||
</div>
|
||||
</div>`;
|
||||
</umb-property-layout>
|
||||
</div>
|
||||
</uui-box>`;
|
||||
}
|
||||
|
||||
#renderAlignLeftIcon() {
|
||||
return html`<button
|
||||
type="button"
|
||||
@click=${this.#setAppearanceNormal}
|
||||
class="appearance left ${this._data?.appearance?.labelOnTop ? '' : 'selected'}">
|
||||
<svg width="200" height="48" viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="94" height="14" rx="6" fill="currentColor" />
|
||||
<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
|
||||
<rect x="106" width="94" height="60" rx="5" fill="currentColor" fill-opacity="0.4" />
|
||||
</svg>
|
||||
<label class="appearance-label">
|
||||
return html`<div class="appearance-option">
|
||||
<button
|
||||
type="button"
|
||||
@click=${this.#setAppearanceNormal}
|
||||
class="appearance left ${this._data?.appearance?.labelOnTop ? '' : 'selected'}">
|
||||
<svg width="200" height="48" viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="94" height="14" rx="6" fill="currentColor" />
|
||||
<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
|
||||
<rect x="106" width="94" height="60" rx="5" stroke="currentColor" fill-opacity="0.4" />
|
||||
</svg></button
|
||||
><label class="appearance-label">
|
||||
<umb-localize key="contentTypeEditor_displaySettingsLabelOnLeft">Label to the left</umb-localize>
|
||||
</label>
|
||||
</button>`;
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#renderAlignTopIcon() {
|
||||
return html`
|
||||
return html`<div class="appearance-option">
|
||||
<button
|
||||
type="button"
|
||||
@click=${this.#setAppearanceTop}
|
||||
@@ -352,71 +312,81 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
|
||||
<svg width="140" height="48" viewBox="0 0 140 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="90" height="14" rx="6" fill="currentColor" />
|
||||
<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
|
||||
<rect y="42" width="140" height="36" rx="5" fill="currentColor" fill-opacity="0.4" />
|
||||
</svg>
|
||||
<label class="appearance-label">
|
||||
<umb-localize key="contentTypeEditor_displaySettingsLabelOnTop">Label above (full-width)</umb-localize>
|
||||
</label>
|
||||
</button>
|
||||
`;
|
||||
<rect y="42" width="140" height="36" rx="5" stroke="currentColor" fill-opacity="0.4" />
|
||||
</svg></button
|
||||
><label class="appearance-label">
|
||||
<umb-localize key="contentTypeEditor_displaySettingsLabelOnTop">Label above (full-width)</umb-localize>
|
||||
</label>
|
||||
</div> `;
|
||||
}
|
||||
|
||||
#renderMandatory() {
|
||||
return html`<div style="display: flex; justify-content: space-between">
|
||||
<label for="mandatory">
|
||||
<umb-localize key="validation_fieldIsMandatory">Field is mandatory</umb-localize>
|
||||
</label>
|
||||
return html`<umb-property-layout orientation="vertical">
|
||||
<uui-toggle
|
||||
@change=${this.#onMandatoryChange}
|
||||
id="mandatory"
|
||||
.checked=${this._data?.validation?.mandatory ?? false}
|
||||
slot="editor"></uui-toggle>
|
||||
</div>
|
||||
slot="editor"
|
||||
><umb-localize key="validation_fieldIsMandatory">Field is mandatory</umb-localize></uui-toggle
|
||||
></umb-property-layout
|
||||
>
|
||||
|
||||
${this._data?.validation?.mandatory
|
||||
? html`<uui-input
|
||||
name="mandatory-message"
|
||||
value=${this._data.validation?.mandatoryMessage ?? ''}
|
||||
@change=${this.#onMandatoryMessageChange}
|
||||
style="margin-top: var(--uui-size-space-1)"
|
||||
id="mandatory-message"
|
||||
placeholder=${this.localize.term('validation_mandatoryMessage')}
|
||||
label=${this.localize.term('validation_mandatoryMessage')}></uui-input>`
|
||||
: ''}`;
|
||||
? html`<umb-property-layout label="#validation_mandatoryMessageLabel" orientation="vertical"
|
||||
><uui-input
|
||||
name="mandatory-message"
|
||||
slot="editor"
|
||||
value=${this._data.validation?.mandatoryMessage ?? ''}
|
||||
@change=${this.#onMandatoryMessageChange}
|
||||
style="margin-top: var(--uui-size-space-1)"
|
||||
id="mandatory-message"
|
||||
placeholder=${this.localize.string(UMB_VALIDATION_EMPTY_LOCALIZATION_KEY)}
|
||||
label=${this.localize.term('validation_mandatoryMessage')}></uui-input
|
||||
></umb-property-layout>`
|
||||
: ''} `;
|
||||
}
|
||||
|
||||
#renderCustomValidation() {
|
||||
return html`<uui-select
|
||||
style="margin-top: var(--uui-size-space-1)"
|
||||
@change=${this.#onCustomValidationChange}
|
||||
.options=${this._customValidationOptions}></uui-select>
|
||||
return html`<umb-property-layout orientation="vertical" label=${this.localize.term('validation_customValidation')}
|
||||
><uui-select
|
||||
slot="editor"
|
||||
@change=${this.#onCustomValidationChange}
|
||||
.options=${this._customValidationOptions}></uui-select
|
||||
></umb-property-layout>
|
||||
|
||||
${this._data?.validation?.regEx !== null
|
||||
? html`
|
||||
<uui-input
|
||||
name="pattern"
|
||||
style="margin-bottom: var(--uui-size-space-1); margin-top: var(--uui-size-space-5);"
|
||||
@change=${this.#onValidationRegExChange}
|
||||
placeholder=${this.localize.term('validation_validationRegExp')}
|
||||
label=${this.localize.term('validation_validationRegExp')}
|
||||
.value=${this._data?.validation?.regEx ?? ''}></uui-input>
|
||||
<uui-textarea
|
||||
name="pattern-message"
|
||||
@change=${this.#onValidationMessageChange}
|
||||
placeholder=${this.localize.term('validation_validationRegExpMessage')}
|
||||
label=${this.localize.term('validation_validationRegExpMessage')}
|
||||
.value=${this._data?.validation?.regExMessage ?? ''}></uui-textarea>
|
||||
`
|
||||
: nothing} `;
|
||||
? html`<umb-property-layout orientation="vertical" label=${this.localize.term('validation_validationPattern')}>
|
||||
<uui-input
|
||||
name="pattern"
|
||||
slot="editor"
|
||||
@change=${this.#onValidationRegExChange}
|
||||
placeholder=${this.localize.term('validation_validationRegExp')}
|
||||
label=${this.localize.term('validation_validationRegExp')}
|
||||
.value=${this._data?.validation?.regEx ?? ''}></uui-input
|
||||
></umb-property-layout>
|
||||
<umb-property-layout label="#validation_mandatoryMessageLabel" orientation="vertical"
|
||||
><uui-textarea
|
||||
name="pattern-message"
|
||||
slot="editor"
|
||||
@change=${this.#onValidationMessageChange}
|
||||
placeholder=${this.localize.term('validation_invalidPattern')}
|
||||
label=${this.localize.term('validation_validationRegExpMessage')}
|
||||
.value=${this._data?.validation?.regExMessage ?? ''}></uui-textarea
|
||||
></umb-property-layout> `
|
||||
: nothing}`;
|
||||
}
|
||||
|
||||
#renderVariationControls() {
|
||||
return this._contentTypeVariesByCulture || this._contentTypeVariesBySegment
|
||||
? html` <umb-property-layout label="#contentTypeEditor_variantsHeading" orientation="vertical">
|
||||
<umb-stack slot="editor" look="compact">
|
||||
${this._contentTypeVariesByCulture ? this.#renderVaryByCulture() : nothing}
|
||||
${this._contentTypeVariesBySegment ? this.#renderVaryBySegment() : nothing}
|
||||
</umb-stack>
|
||||
</umb-property-layout>`
|
||||
? html` <uui-box class="uui-text">
|
||||
<umb-localize key="contentTypeEditor_variantsHeading" slot="headline">Variation</umb-localize
|
||||
><umb-property-layout orientation="vertical">
|
||||
<umb-stack slot="editor" look="compact">
|
||||
${this._contentTypeVariesByCulture ? this.#renderVaryByCulture() : nothing}
|
||||
${this._contentTypeVariesBySegment ? this.#renderVaryBySegment() : nothing}
|
||||
</umb-stack>
|
||||
</umb-property-layout></uui-box
|
||||
>`
|
||||
: '';
|
||||
}
|
||||
|
||||
@@ -426,7 +396,7 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
|
||||
<uui-toggle
|
||||
@change=${this.#onShareAcrossCulturesChange}
|
||||
.checked=${!(this._data?.variesByCulture ?? false)}
|
||||
label="Shared across cultures"></uui-toggle>
|
||||
label=${this.localize.term('contentTypeEditor_cultureInvariantLabel')}></uui-toggle>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -437,7 +407,7 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
|
||||
<uui-toggle
|
||||
@change=${this.#onShareAcrossSegmentsChange}
|
||||
.checked=${!(this._data?.variesBySegment ?? false)}
|
||||
label="Shared across segments"></uui-toggle>
|
||||
label=${this.localize.term('contentTypeEditor_segmentInvariantLabel')}></uui-toggle>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -446,40 +416,31 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
|
||||
UmbTextStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--uui-size-layout-1);
|
||||
padding: var(--uui-size-layout-1);
|
||||
}
|
||||
#alias-input,
|
||||
#label-input,
|
||||
#description-input {
|
||||
umb-property-layout[orientation='vertical'] {
|
||||
padding: var(--uui-size-space-2) 0;
|
||||
}
|
||||
|
||||
umb-property-layout:first-of-type {
|
||||
padding-top: 0;
|
||||
}
|
||||
umb-property-layout:last-of-type {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
uui-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#alias-input {
|
||||
border-color: transparent;
|
||||
background: var(--uui-color-surface);
|
||||
}
|
||||
|
||||
#label-input {
|
||||
font-weight: bold; /* TODO: UUI Input does not support bold text yet */
|
||||
--uui-input-border-color: transparent;
|
||||
}
|
||||
#label-input input {
|
||||
font-weight: bold;
|
||||
--uui-input-border-color: transparent;
|
||||
}
|
||||
|
||||
#description-input {
|
||||
--uui-textarea-border-color: transparent;
|
||||
font-weight: 0.5rem; /* TODO: Cant change font size of UUI textarea yet */
|
||||
}
|
||||
|
||||
#appearances {
|
||||
display: flex;
|
||||
gap: var(--uui-size-layout-1);
|
||||
max-width: 350px;
|
||||
margin: 0 auto;
|
||||
gap: var(--uui-size-space-4);
|
||||
}
|
||||
|
||||
.appearance {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -493,37 +454,44 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
|
||||
justify-content: space-between;
|
||||
gap: var(--uui-size-space-3);
|
||||
}
|
||||
|
||||
.appearance-option {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
gap: var(--uui-size-space-2);
|
||||
}
|
||||
|
||||
.appearance-label {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.appearance.left {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.appearance.top {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.appearance svg {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
color: var(--uui-color-text);
|
||||
}
|
||||
|
||||
.appearance:not(.selected):hover {
|
||||
border-color: var(--uui-color-border-emphasis);
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.appearance.selected {
|
||||
background-color: var(--uui-color-surface);
|
||||
border-color: var(--uui-color-selected);
|
||||
color: var(--uui-color-selected);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.appearance.selected svg {
|
||||
color: var(--uui-color-selected);
|
||||
}
|
||||
|
||||
.appearance.selected::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -532,30 +500,19 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
|
||||
opacity: 0.1;
|
||||
background-color: var(--uui-color-selected);
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--uui-color-divider);
|
||||
margin-top: var(--uui-size-space-6);
|
||||
margin-bottom: var(--uui-size-space-5);
|
||||
}
|
||||
|
||||
uui-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
uui-input:focus-within {
|
||||
z-index: 1;
|
||||
}
|
||||
uui-input-lock:focus-within {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
uui-form,
|
||||
form {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
|
||||
import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
|
||||
import { generateAlias } from '@umbraco-cms/backoffice/utils';
|
||||
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
|
||||
import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
|
||||
@@ -13,6 +13,9 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
|
||||
@property({ type: String })
|
||||
label: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
placeholder?: string;
|
||||
|
||||
@property({ type: String, reflect: false })
|
||||
alias = '';
|
||||
|
||||
@@ -101,7 +104,7 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
|
||||
return html`
|
||||
<uui-input
|
||||
id="name"
|
||||
placeholder=${nameLabel}
|
||||
placeholder=${ifDefined(this.placeholder)}
|
||||
label=${nameLabel}
|
||||
.value=${this.value}
|
||||
@input=${this.#onNameChange}
|
||||
|
||||
@@ -104,17 +104,13 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
|
||||
display: grid;
|
||||
grid-template-columns: 200px minmax(0, 1fr);
|
||||
column-gap: var(--uui-size-layout-2);
|
||||
border-bottom: 1px solid var(--uui-color-divider);
|
||||
padding: var(--uui-size-layout-1) 0;
|
||||
}
|
||||
|
||||
:host(:last-of-type) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:host > div {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/*@container (width > 600px) {*/
|
||||
:host(:not([orientation='vertical'])) > div {
|
||||
grid-column: span 1;
|
||||
|
||||
52
tests/Umbraco.Tests.AcceptanceTest/package-lock.json
generated
52
tests/Umbraco.Tests.AcceptanceTest/package-lock.json
generated
@@ -8,13 +8,13 @@
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@umbraco/json-models-builders": "^2.0.40",
|
||||
"@umbraco/playwright-testhelpers": "^16.0.50",
|
||||
"@umbraco/playwright-testhelpers": "^17.0.0-beta.1",
|
||||
"camelize": "^1.0.0",
|
||||
"dotenv": "^16.3.1",
|
||||
"node-fetch": "^2.6.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.50",
|
||||
"@playwright/test": "1.50",
|
||||
"@types/node": "^20.9.0",
|
||||
"prompt": "^1.2.0",
|
||||
"tslib": "^2.4.0",
|
||||
@@ -32,13 +32,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@playwright/test": {
|
||||
"version": "1.50.0",
|
||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.50.0.tgz",
|
||||
"integrity": "sha512-ZGNXbt+d65EGjBORQHuYKj+XhCewlwpnSd/EDuLPZGSiEWmgOJB5RmMCCYGy5aMfTs9wx61RivfDKi8H/hcMvw==",
|
||||
"version": "1.50.1",
|
||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.50.1.tgz",
|
||||
"integrity": "sha512-Jii3aBg+CEDpgnuDxEp/h7BimHcUTDlpEtce89xEumlJ5ef2hqepZ+PWp1DDpYC/VO9fmWVI1IlEaoI5fK9FXQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright": "1.50.0"
|
||||
"playwright": "1.50.1"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
@@ -48,13 +48,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.17.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.9.tgz",
|
||||
"integrity": "sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw==",
|
||||
"version": "20.19.19",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.19.tgz",
|
||||
"integrity": "sha512-pb1Uqj5WJP7wrcbLU7Ru4QtA0+3kAXrkutGiD26wUKzSMgNNaPARTUDQmElUXp64kh3cWdou3Q0C7qwwxqSFmg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.19.2"
|
||||
"undici-types": "~6.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@umbraco/json-models-builders": {
|
||||
@@ -67,9 +67,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@umbraco/playwright-testhelpers": {
|
||||
"version": "16.0.50",
|
||||
"resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.50.tgz",
|
||||
"integrity": "sha512-2tHQUdv8lCV4O47hGMvyC+JJfG4//fSSE/gUOVfFNDEHzhU5mSZ8f9oGKob8XOv2RB7ynZFYtIIxEMZIWrGFDA==",
|
||||
"version": "17.0.0-beta.1",
|
||||
"resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-17.0.0-beta.1.tgz",
|
||||
"integrity": "sha512-EhS4j5ARDcR3tI7ArTmLuBHW+e49qyWq3Ts8ckCXvFjkPgR3u/Z5JPOIFWUZ+rTahNZi3axs3i+dVcWWA4Fyjw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@umbraco/json-models-builders": "2.0.40",
|
||||
@@ -112,9 +112,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/dotenv": {
|
||||
"version": "16.4.7",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
|
||||
"integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
|
||||
"version": "16.6.1",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
|
||||
"integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
@@ -189,13 +189,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/playwright": {
|
||||
"version": "1.50.0",
|
||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.50.0.tgz",
|
||||
"integrity": "sha512-+GinGfGTrd2IfX1TA4N2gNmeIksSb+IAe589ZH+FlmpV3MYTx6+buChGIuDLQwrGNCw2lWibqV50fU510N7S+w==",
|
||||
"version": "1.50.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.50.1.tgz",
|
||||
"integrity": "sha512-G8rwsOQJ63XG6BbKj2w5rHeavFjy5zynBA9zsJMMtBoe/Uf757oG12NXz6e6OirF7RCrTVAKFXbLmn1RbL7Qaw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright-core": "1.50.0"
|
||||
"playwright-core": "1.50.1"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
@@ -208,9 +208,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/playwright-core": {
|
||||
"version": "1.50.0",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.50.0.tgz",
|
||||
"integrity": "sha512-CXkSSlr4JaZs2tZHI40DsZUN/NIwgaUPsyLuOAaIZp2CyF2sN5MM5NJsyB188lFSSozFxQ5fPT4qM+f0tH/6wQ==",
|
||||
"version": "1.50.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.50.1.tgz",
|
||||
"integrity": "sha512-ra9fsNWayuYumt+NiM069M6OkcRb1FZSK8bgi66AtpFoWkg2+y0bJSNmkFrWhMbEBbVKC/EruAHH3g0zmtwGmQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
@@ -298,9 +298,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "6.19.8",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
|
||||
"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
|
||||
"version": "6.21.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
|
||||
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"releaseTest": "npx playwright test DefaultConfig --grep \"@release\""
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.50",
|
||||
"@playwright/test": "1.50",
|
||||
"@types/node": "^20.9.0",
|
||||
"prompt": "^1.2.0",
|
||||
"tslib": "^2.4.0",
|
||||
@@ -22,7 +22,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@umbraco/json-models-builders": "^2.0.40",
|
||||
"@umbraco/playwright-testhelpers": "^16.0.50",
|
||||
"@umbraco/playwright-testhelpers": "^17.0.0-beta.1",
|
||||
"camelize": "^1.0.0",
|
||||
"dotenv": "^16.3.1",
|
||||
"node-fetch": "^2.6.7"
|
||||
|
||||
@@ -74,7 +74,8 @@ test('can publish content with the image cropper data type', {tag: '@smoke'}, as
|
||||
expect(contentData.values[0].value.focalPoint).toEqual(defaultFocalPoint);
|
||||
});
|
||||
|
||||
test('can create content with the custom image cropper data type', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
|
||||
// TODO: Fix flaky test
|
||||
test.fixme('can create content with the custom image cropper data type', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
|
||||
// Arrange
|
||||
const customDataTypeName = 'CustomImageCropper';
|
||||
const cropAlias = 'TestCropLabel';
|
||||
|
||||
@@ -65,7 +65,8 @@ test('can create a partial view from snippet', async ({umbracoApi, umbracoUi}) =
|
||||
await umbracoUi.partialView.isPartialViewRootTreeItemVisible(partialViewFileName);
|
||||
});
|
||||
|
||||
test('can rename a partial view', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
|
||||
// TODO: Fix flaky test
|
||||
test.fixme('can rename a partial view', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
|
||||
// Arrange
|
||||
const wrongPartialViewName = 'WrongName';
|
||||
const wrongPartialViewFileName = wrongPartialViewName + '.cshtml';
|
||||
|
||||
Reference in New Issue
Block a user