move target logic to link element

This commit is contained in:
Mads Rasmussen
2024-09-10 14:36:00 +02:00
committed by Niels Lyngsø
parent 573a61e367
commit 0ae4443906
2 changed files with 21 additions and 9 deletions

View File

@@ -37,6 +37,15 @@ export class UmbMenuItemLayoutElement extends UmbLitElement {
@property({ type: String })
public href?: string;
/**
* Set an anchor tag target, only used when using href.
* @type {string}
* @attr
* @default undefined
*/
@property({ type: String })
public target?: '_blank' | '_parent' | '_self' | '_top';
@state()
private _isActive = false;
@@ -47,14 +56,6 @@ export class UmbMenuItemLayoutElement extends UmbLitElement {
#debouncedCheckIsActive = debounce(() => this.#checkIsActive(), 100);
#getTarget() {
if (this.href && this.href.startsWith('http')) {
return '_blank';
}
return '_self';
}
#checkIsActive() {
if (!this.href) {
this._isActive = false;
@@ -72,7 +73,7 @@ export class UmbMenuItemLayoutElement extends UmbLitElement {
.caretLabel=${this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + this.label}
?active=${this._isActive}
?has-children=${this.hasChildren}
target=${this.#getTarget()}>
target=${ifDefined(this.href && this.target ? this.target : undefined)}>
<umb-icon slot="icon" name=${this.iconName}></umb-icon>
${this.entityType
? html`<umb-entity-actions-bundle

View File

@@ -8,10 +8,21 @@ export class UmbLinkMenuItemElement extends UmbLitElement implements UmbMenuItem
@property({ type: Object, attribute: false })
manifest?: ManifestMenuItemLinkKind;
#getTarget() {
const href = this.manifest?.meta.href;
if (href && href.startsWith('http')) {
return '_blank';
}
return '_self';
}
override render() {
return html`
<umb-menu-item-layout
.href=${this.manifest?.meta.href}
target=${this.#getTarget()}
.iconName=${this.manifest?.meta.icon ?? ''}
.label=${this.localize.string(this.manifest?.meta.label ?? this.manifest?.name ?? '')}>
</umb-menu-item-layout>