diff --git a/src/packages/core/components/input-with-alias/input-with-alias.element.ts b/src/packages/core/components/input-with-alias/input-with-alias.element.ts index 36e616ae61..4ac26775d6 100644 --- a/src/packages/core/components/input-with-alias/input-with-alias.element.ts +++ b/src/packages/core/components/input-with-alias/input-with-alias.element.ts @@ -14,7 +14,7 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin | undefined) { @@ -52,6 +53,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { this._property = value; this.#context.setAlias(value?.alias); this.#context.setLabel(value?.name); + this.#checkAliasAutoGenerate(this._property?.id); this.#checkInherited(); this.#setDataType(this._property?.dataType?.unique); this.requestUpdate('property', oldValue); @@ -82,6 +84,17 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { @state() private _aliasLocked = true; + #autoGenerateAlias = true; + + #checkAliasAutoGenerate(unique: string | undefined) { + if (unique === this.#propertyUnique) return; + this.#propertyUnique = unique; + + if (this.#context.getAlias()) { + this.#autoGenerateAlias = false; + } + } + async #checkInherited() { if (this._propertyStructureHelper && this._property) { // We can first match with something if we have a name [NL] @@ -114,6 +127,12 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { } #onToggleAliasLock(event: CustomEvent) { + if (!this.property?.alias && (event.target as UUIInputLockElement).locked) { + this.#autoGenerateAlias = true; + } else { + this.#autoGenerateAlias = false; + } + this._aliasLocked = !this._aliasLocked; if (!this._aliasLocked) { (event.target as UUIInputElement)?.focus(); @@ -152,15 +171,9 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { } #onNameChanged(event: UUIInputEvent) { - const oldName = this.property?.name ?? ''; - const oldAlias = this.property?.alias ?? ''; const newName = event.target.value.toString(); - if (this._aliasLocked) { - const expectedOldAlias = generateAlias(oldName ?? ''); - // 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.) - if (expectedOldAlias === oldAlias) { - this.#singleValueUpdate('alias', generateAlias(newName ?? '')); - } + if (this.#autoGenerateAlias) { + this.#singleValueUpdate('alias', generateAlias(newName ?? '')); } this.#singleValueUpdate('name', newName); } diff --git a/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts b/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts index 182c6ed329..e908214675 100644 --- a/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts +++ b/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts @@ -1,13 +1,18 @@ import { UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT } from '../../../index.js'; -import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +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 { 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 { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type'; import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; -import type { UUIBooleanInputEvent, UUIInputEvent, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui'; -import { umbBindToValidation } from '@umbraco-cms/backoffice/validation'; +import type { + UUIBooleanInputEvent, + UUIInputEvent, + UUIInputLockElement, + UUISelectEvent, +} from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-property-type-workspace-view-settings') export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement { @@ -44,12 +49,18 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i @state() private _aliasLocked = true; + @state() + private _autoGenerateAlias = true; + @state() private _contentTypeVariesByCulture?: boolean; @state() private _contentTypeVariesBySegment?: boolean; + @query('#alias-input') + private _aliasInput!: UUIInputLockElement; + constructor() { super(); @@ -58,6 +69,10 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i this.observe( instance.data, (data) => { + if (!this._data && data?.alias) { + // Initial. Loading existing property + this._autoGenerateAlias = false; + } this._data = data; }, 'observeData', @@ -75,23 +90,16 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i } #onNameChange(event: UUIInputEvent) { - const oldName = this._data?.name; - const oldAlias = this._data?.alias; this.updateValue({ name: event.target.value.toString() }); - if (this._aliasLocked) { - const expectedOldAlias = generateAlias(oldName ?? ''); - // 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.) [NL] - if (expectedOldAlias === oldAlias) { - this.updateValue({ alias: generateAlias(this._data?.name ?? '') }); - } + if (this._aliasLocked && this._autoGenerateAlias) { + this.updateValue({ alias: generateAlias(this._data?.name ?? '') }); } } - #onAliasChange(event: UUIInputEvent) { - const alias = generateAlias(event.target.value.toString()); - if (this._aliasLocked) { - this.updateValue({ alias }); - } + #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) { @@ -136,6 +144,12 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i #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) {