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

Commit ce4a3c0

Browse files
leekelleherleekelleher
committed
Updated umb-property-type-workspace-view-settings to use <uui-input-lock> component
1 parent b120fbe commit ce4a3c0

File tree

1 file changed

+61
-74
lines changed

1 file changed

+61
-74
lines changed

‎src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts‎

Lines changed: 61 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import { UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT } from '../../../index.js';
22
import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
3-
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
3+
import { generateAlias } from '@umbraco-cms/backoffice/utils';
44
import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
5-
import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
6-
import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
5+
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
76
import { UMB_CONTENT_TYPE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content-type';
7+
import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
8+
import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
89
import type { UUIBooleanInputEvent, UUIInputEvent, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
9-
import { generateAlias } from '@umbraco-cms/backoffice/utils';
1010

1111
@customElement('umb-property-type-workspace-view-settings')
1212
export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
1313
#context?: typeof UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT.TYPE;
1414

15-
@state() private _customValidationOptions: Array<Option> = [
15+
@state()
16+
private _customValidationOptions: Array<Option> = [
1617
{
1718
name: this.localize.term('validation_validateNothing'),
1819
value: '!NOVALIDATION!',
@@ -171,65 +172,61 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
171172
}
172173

173174
override render() {
174-
return this._data
175-
? html`
176-
<uui-box class="uui-text">
177-
<div class="container">
178-
<!-- TODO: Align styling across this and the property of document type workspace editor, or consider if this can go away for a different UX flow -->
179-
<uui-input
180-
id="name-input"
181-
name="name"
182-
label=${this.localize.term('placeholders_entername')}
183-
@input=${this.#onNameChange}
184-
.value=${this._data?.name}
185-
placeholder=${this.localize.term('placeholders_entername')}
186-
${umbFocus()}>
187-
<!-- TODO: validation for bad characters -->
188-
</uui-input>
189-
<uui-input
190-
id="alias-input"
191-
name="alias"
192-
@input=${this.#onAliasChange}
193-
.value=${this._data?.alias}
194-
label=${this.localize.term('placeholders_enterAlias')}
195-
placeholder=${this.localize.term('placeholders_enterAlias')}
196-
?disabled=${this._aliasLocked}>
197-
<!-- TODO: validation for bad characters -->
198-
<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
199-
<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
200-
</div>
201-
</uui-input>
202-
<uui-textarea
203-
id="description-input"
204-
name="description"
205-
@input=${this.#onDescriptionChange}
206-
label=${this.localize.term('placeholders_enterDescription')}
207-
placeholder=${this.localize.term('placeholders_enterDescription')}
208-
.value=${this._data?.description}></uui-textarea>
209-
</div>
210-
<umb-data-type-flow-input
211-
.value=${this._data?.dataType?.unique ?? ''}
212-
@change=${this.#onDataTypeIdChange}></umb-data-type-flow-input>
213-
<hr />
214-
<div class="container">
215-
<b><umb-localize key="validation_validation">Validation</umb-localize></b>
216-
${this.#renderMandatory()}
217-
<p style="margin-bottom: 0">
218-
<umb-localize key="validation_customValidation">Custom validation</umb-localize>
219-
</p>
220-
${this.#renderCustomValidation()}
221-
</div>
222-
<hr />
223-
${this.#renderVariationControls()}
224-
<div class="container">
225-
<b style="margin-bottom: var(--uui-size-space-3)">
226-
<umb-localize key="contentTypeEditor_displaySettingsHeadline">Appearance</umb-localize>
227-
</b>
228-
<div id="appearances">${this.#renderAlignLeftIcon()} ${this.#renderAlignTopIcon()}</div>
229-
</div>
230-
</uui-box>
231-
`
232-
: '';
175+
if (!this._data) return;
176+
return html`
177+
<uui-box class="uui-text">
178+
<div class="container">
179+
<!-- TODO: Align styling across this and the property of document type workspace editor, or consider if this can go away for a different UX flow -->
180+
<uui-input
181+
id="name-input"
182+
name="name"
183+
label=${this.localize.term('placeholders_entername')}
184+
placeholder=${this.localize.term('placeholders_entername')}
185+
.value=${this._data?.name}
186+
@input=${this.#onNameChange}
187+
${umbFocus()}>
188+
<!-- TODO: validation for bad characters -->
189+
</uui-input>
190+
<uui-input-lock
191+
id="alias-input"
192+
name="alias"
193+
label=${this.localize.term('placeholders_enterAlias')}
194+
placeholder=${this.localize.term('placeholders_enterAlias')}
195+
.value=${this._data?.alias}
196+
?locked=${this._aliasLocked}
197+
@input=${this.#onAliasChange}
198+
@lock-change=${this.#onToggleAliasLock}>
199+
</uui-input-lock>
200+
<uui-textarea
201+
id="description-input"
202+
name="description"
203+
@input=${this.#onDescriptionChange}
204+
label=${this.localize.term('placeholders_enterDescription')}
205+
placeholder=${this.localize.term('placeholders_enterDescription')}
206+
.value=${this._data?.description}></uui-textarea>
207+
</div>
208+
<umb-data-type-flow-input
209+
.value=${this._data?.dataType?.unique ?? ''}
210+
@change=${this.#onDataTypeIdChange}></umb-data-type-flow-input>
211+
<hr />
212+
<div class="container">
213+
<b><umb-localize key="validation_validation">Validation</umb-localize></b>
214+
${this.#renderMandatory()}
215+
<p style="margin-bottom: 0">
216+
<umb-localize key="validation_customValidation">Custom validation</umb-localize>
217+
</p>
218+
${this.#renderCustomValidation()}
219+
</div>
220+
<hr />
221+
${this.#renderVariationControls()}
222+
<div class="container">
223+
<b style="margin-bottom: var(--uui-size-space-3)">
224+
<umb-localize key="contentTypeEditor_displaySettingsHeadline">Appearance</umb-localize>
225+
</b>
226+
<div id="appearances">${this.#renderAlignLeftIcon()} ${this.#renderAlignTopIcon()}</div>
227+
</div>
228+
</uui-box>
229+
`;
233230
}
234231
235232
#renderAlignLeftIcon() {
@@ -357,16 +354,6 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
357354
--uui-input-border-color: transparent;
358355
}
359356
360-
#alias-lock {
361-
display: flex;
362-
align-items: center;
363-
justify-content: center;
364-
cursor: pointer;
365-
}
366-
#alias-lock uui-icon {
367-
margin-bottom: 2px;
368-
/* margin: 0; */
369-
}
370357
#description-input {
371358
--uui-textarea-border-color: transparent;
372359
font-weight: 0.5rem; /* TODO: Cant change font size of UUI textarea yet */

0 commit comments

Comments
 (0)