From 12feafbbef3f736623503d452332eef7a5dea073 Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Tue, 23 Jan 2024 15:41:38 +0100
Subject: [PATCH] feat: uui-ref-node should have href and target properties
(#715)
* add href and target
---------
Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
---
.../uui-ref-node/lib/uui-ref-node.element.ts | 73 +++++++++++++++----
.../uui-ref-node/lib/uui-ref-node.story.ts | 22 ++++--
2 files changed, 73 insertions(+), 22 deletions(-)
diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts
index d3465d581..f2c042cf3 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.element.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.element.ts
@@ -1,7 +1,8 @@
import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+import { ifDefined } from 'lit/directives/if-defined.js';
import { UUIRefElement } from '@umbraco-ui/uui-ref/lib';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
/**
@@ -36,6 +37,24 @@ export class UUIRefNodeElement extends UUIRefElement {
@property({ type: String })
detail = '';
+ /**
+ * Set an href, this will turns the name of the card into an anchor tag.
+ * @type {string}
+ * @attr
+ * @default undefined
+ */
+ @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 _iconSlotHasContent = false;
@@ -48,7 +67,7 @@ export class UUIRefNodeElement extends UUIRefElement {
demandCustomElement(this, 'uui-icon');
}
- private _onSlotIconChange(event: Event) {
+ #onSlotIconChange(event: Event) {
this._iconSlotHasContent =
(event.target as HTMLSlotElement).assignedNodes({ flatten: true })
.length > 0;
@@ -60,11 +79,37 @@ export class UUIRefNodeElement extends UUIRefElement {
>`;
}
- private _renderFallbackIcon() {
+ #renderFallbackIcon() {
return html`