Skip to content
This repository was archived by the owner on Nov 6, 2025. It is now read-only.

Commit 055b94e

Browse files
madsrasmussenmadsrasmussen
authored
Merge branch 'release/14.2' into v14/chore/eslint-jsdocs
2 parents c8bbe76 + 96ea3d4 commit 055b94e

File tree

4 files changed

+133
-199
lines changed

4 files changed

+133
-199
lines changed

‎src/packages/core/components/input-with-alias/input-with-alias.element.ts‎

Lines changed: 15 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
1+
import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
2+
import { generateAlias } from '@umbraco-cms/backoffice/utils';
23
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
34
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
45
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
5-
import { type UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
6-
import { generateAlias } from '@umbraco-cms/backoffice/utils';
6+
import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
7+
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
78

89
@customElement('umb-input-with-alias')
910
export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof UmbLitElement>(UmbLitElement) {
@@ -64,8 +65,11 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
6465
}
6566
}
6667

67-
#onToggleAliasLock() {
68+
#onToggleAliasLock(event: CustomEvent) {
6869
this._aliasLocked = !this._aliasLocked;
70+
if (!this._aliasLocked) {
71+
(event.target as UUIInputElement)?.focus();
72+
}
6973
}
7074

7175
override render() {
@@ -79,26 +83,18 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
7983
label=${nameLabel}
8084
.value=${this.value}
8185
@input=${this.#onNameChange}>
82-
<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
83-
<uui-input
86+
<uui-input-lock
8487
auto-width
8588
name="alias"
8689
slot="append"
8790
label=${aliasLabel}
88-
.value=${this.alias}
8991
placeholder=${aliasLabel}
90-
?disabled=${this._aliasLocked && !this.aliasReadonly}
92+
.value=${this.alias}
93+
?locked=${this._aliasLocked && !this.aliasReadonly}
9194
?readonly=${this.aliasReadonly}
92-
@input=${this.#onAliasChange}>
93-
<!-- TODO: validation for bad characters -->
94-
${this.aliasReadonly
95-
? nothing
96-
: html`
97-
<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
98-
<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
99-
</div>
100-
`}
101-
</uui-input>
95+
@input=${this.#onAliasChange}
96+
@lock-change=${this.#onToggleAliasLock}>
97+
</uui-input-lock>
10298
</uui-input>
10399
`;
104100
}
@@ -120,21 +116,10 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
120116
:host(:invalid:not([pristine])) > uui-input {
121117
border-color: var(--uui-color-danger);
122118
}
123-
124-
#alias-lock {
125-
display: flex;
126-
align-items: center;
127-
justify-content: center;
128-
cursor: pointer;
129-
}
130-
131-
#alias-lock uui-icon {
132-
margin-bottom: 2px;
133-
}
134119
`;
135120
}
136121

137-
export default UmbInputWithAliasElement;
122+
export { UmbInputWithAliasElement as element };
138123

139124
declare global {
140125
interface HTMLElementTagNameMap {

‎src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts‎

Lines changed: 36 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
import { UmbPropertyTypeContext } from './content-type-design-editor-property.context.js';
2-
import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
3-
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
4-
import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
52
import { css, html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
3+
import { generateAlias } from '@umbraco-cms/backoffice/utils';
64
import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
5+
import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
76
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
8-
import { generateAlias } from '@umbraco-cms/backoffice/utils';
97
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
8+
import { UMB_EDIT_PROPERTY_TYPE_WORKSPACE_PATH_PATTERN } from '@umbraco-cms/backoffice/property-type';
109
import type {
1110
UmbContentTypeModel,
1211
UmbContentTypePropertyStructureHelper,
1312
UmbPropertyTypeModel,
1413
UmbPropertyTypeScaffoldModel,
1514
} from '@umbraco-cms/backoffice/content-type';
16-
import { UMB_EDIT_PROPERTY_TYPE_WORKSPACE_PATH_PATTERN } from '@umbraco-cms/backoffice/property-type';
15+
import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
1716

1817
/**
1918
* @element umb-content-type-design-editor-property
@@ -22,10 +21,9 @@ import { UMB_EDIT_PROPERTY_TYPE_WORKSPACE_PATH_PATTERN } from '@umbraco-cms/back
2221
*/
2322
@customElement('umb-content-type-design-editor-property')
2423
export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
25-
//
24+
#context = new UmbPropertyTypeContext(this);
2625
#dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
2726
#dataTypeUnique?: string;
28-
#context = new UmbPropertyTypeContext(this);
2927

3028
@property({ attribute: false })
3129
public set propertyStructureHelper(value: UmbContentTypePropertyStructureHelper<UmbContentTypeModel> | undefined) {
@@ -115,8 +113,11 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
115113
this._propertyStructureHelper.partialUpdateProperty(this._property.id, partialObject);
116114
}
117115

118-
#onToggleAliasLock() {
116+
#onToggleAliasLock(event: CustomEvent) {
119117
this._aliasLocked = !this._aliasLocked;
118+
if (!this._aliasLocked) {
119+
(event.target as UUIInputElement)?.focus();
120+
}
120121
}
121122

122123
async #setDataType(dataTypeUnique: string | undefined) {
@@ -138,37 +139,30 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
138139
// TODO: Do proper localization here: [NL]
139140
await umbConfirmModal(this, {
140141
headline: `${this.localize.term('actions_delete')} property`,
141-
content: html`<umb-localize key="contentTypeEditor_confirmDeletePropertyMessage" .args=${[
142-
this._property.name ?? this._property.id,
143-
]}>
144-
Are you sure you want to delete the property <strong>${this._property.name ?? this._property.id}</strong>
145-
</umb-localize>
146-
</div>`,
142+
content: html`<umb-localize key="contentTypeEditor_confirmDeletePropertyMessage" .args=${[this._property.name ?? this._property.id]}>Are you sure you want to delete the property <strong>${this._property.name ?? this._property.id}</strong></umb-localize></div>`,
147143
confirmLabel: this.localize.term('actions_delete'),
148144
color: 'danger',
149145
});
150146

151147
this._propertyStructureHelper?.removeProperty(this._property.id);
152148
}
153149

150+
#onAliasChanged(event: UUIInputEvent) {
151+
this.#singleValueUpdate('alias', event.target.value.toString());
152+
}
153+
154154
#onNameChanged(event: UUIInputEvent) {
155-
if (event instanceof UUIInputEvent) {
156-
const target = event.composedPath()[0] as UUIInputElement;
157-
158-
if (typeof target?.value === 'string') {
159-
const oldName = this.property?.name ?? '';
160-
const oldAlias = this.property?.alias ?? '';
161-
const newName = event.target.value.toString();
162-
if (this._aliasLocked) {
163-
const expectedOldAlias = generateAlias(oldName ?? '');
164-
// Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.)
165-
if (expectedOldAlias === oldAlias) {
166-
this.#singleValueUpdate('alias', generateAlias(newName ?? ''));
167-
}
168-
}
169-
this.#singleValueUpdate('name', newName);
155+
const oldName = this.property?.name ?? '';
156+
const oldAlias = this.property?.alias ?? '';
157+
const newName = event.target.value.toString();
158+
if (this._aliasLocked) {
159+
const expectedOldAlias = generateAlias(oldName ?? '');
160+
// Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.)
161+
if (expectedOldAlias === oldAlias) {
162+
this.#singleValueUpdate('alias', generateAlias(newName ?? ''));
170163
}
171164
}
165+
this.#singleValueUpdate('name', newName);
172166
}
173167

174168
override render() {
@@ -271,24 +265,19 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
271265
}
272266

273267
renderPropertyAlias() {
274-
return this.property
275-
? html`<uui-input
276-
name="alias"
277-
id="alias-input"
278-
label="alias"
279-
placeholder=${this.localize.term('placeholders_alias')}
280-
.value=${this.property.alias}
281-
?disabled=${this._aliasLocked}
282-
@input=${(e: CustomEvent) => {
283-
if (e.target) this.#singleValueUpdate('alias', (e.target as HTMLInputElement).value);
284-
}}>
285-
<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
286-
<!-- TODO: validation for bad characters -->
287-
<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
288-
<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
289-
</div>
290-
</uui-input>`
291-
: '';
268+
if (!this.property) return;
269+
return html`
270+
<uui-input-lock
271+
name="alias"
272+
id="alias-input"
273+
label=${this.localize.term('placeholders_enterAlias')}
274+
placeholder=${this.localize.term('placeholders_enterAlias')}
275+
.value=${this.property.alias}
276+
?locked=${this._aliasLocked}
277+
@input=${this.#onAliasChanged}
278+
@lock-change=${this.#onToggleAliasLock}>
279+
</uui-input-lock>
280+
`;
292281
}
293282

294283
renderPropertyTags() {
@@ -423,16 +412,6 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
423412
--uui-input-border-color: transparent;
424413
}
425414
426-
#alias-lock {
427-
display: flex;
428-
align-items: center;
429-
justify-content: center;
430-
cursor: pointer;
431-
}
432-
#alias-lock uui-icon {
433-
margin-bottom: 2px;
434-
/* margin: 0; */
435-
}
436415
#description-input {
437416
--uui-textarea-border-color: transparent;
438417
font-weight: 0.5rem; /* TODO: Cant change font size of UUI textarea yet */

0 commit comments

Comments
 (0)