yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Document Type Workspace, adds auto-width to alias input

Browse Source
This commit is contained in:
leekelleher
2024-05-28 18:30:15 +01:00
parent c78c84ee39
commit 4d714ca6c2
1 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/Umbraco.Web.UI.Client/src/packages/core/components/input-with-alias/input-with-alias.element.ts
View File

@@ -31,36 +31,37 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
}
#onNameChange(e: UUIInputEvent) {
if (e instanceof UUIInputEvent) {
const target = e.composedPath()[0] as UUIInputElement;
if (!(e instanceof UUIInputEvent)) return;
if (typeof target?.value === 'string') {
const oldName = this.value;
const oldAlias = this.alias ?? '';
this.value = e.target.value.toString();
if (this.autoGenerateAlias && this._aliasLocked) {
// If locked we will update the alias, but only if it matches the generated alias of the old name [NL]
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.alias = generateAlias(this.value);
}
const target = e.composedPath()[0] as UUIInputElement;
if (typeof target?.value === 'string') {
const oldName = this.value;
const oldAlias = this.alias ?? '';
this.value = e.target.value.toString();
if (this.autoGenerateAlias && this._aliasLocked) {
// If locked we will update the alias, but only if it matches the generated alias of the old name [NL]
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.alias = generateAlias(this.value);
}
this.dispatchEvent(new UmbChangeEvent());
}
this.dispatchEvent(new UmbChangeEvent());
}
}
#onAliasChange(e: UUIInputEvent) {
if (e instanceof UUIInputEvent) {
const target = e.composedPath()[0] as UUIInputElement;
if (typeof target?.value === 'string') {
this.alias = target.value;
console.log(this.alias);
this.dispatchEvent(new UmbChangeEvent());
}
}
e.stopPropagation();
if (!(e instanceof UUIInputEvent)) return;
const target = e.composedPath()[0] as UUIInputElement;
if (typeof target?.value === 'string') {
this.alias = target.value;
this.dispatchEvent(new UmbChangeEvent());
}
}
#onToggleAliasLock() {
@@ -80,20 +81,23 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
@input=${this.#onNameChange}>
<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
<uui-input
auto-width
name="alias"
slot="append"
label=${aliasLabel}
@input=${this.#onAliasChange}
.value=${this.alias}
placeholder=${aliasLabel}
?disabled=${this._aliasLocked && !this.aliasReadonly}
?readonly=${this.aliasReadonly}>
?readonly=${this.aliasReadonly}
@input=${this.#onAliasChange}>
<!-- TODO: validation for bad characters -->
${this.aliasReadonly
? nothing
: html`<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
</div>`}
: html`
<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
</div>
`}
</uui-input>
</uui-input>
`;
@@ -106,6 +110,10 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
align-items: center;
}
#name > uui-input {
max-width: 50%;
}
:host(:invalid:not([pristine])) {
color: var(--uui-color-danger);
}