@umbraco-ui/uui-ref-node 1.6.0-rc.3 → 1.6.0-rc.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +37 -5
- package/lib/index.js +78 -22
- package/lib/uui-ref-node.element.d.ts +15 -2
- package/package.json +5 -5
package/custom-elements.json
CHANGED
|
@@ -17,6 +17,18 @@
|
|
|
17
17
|
"type": "string",
|
|
18
18
|
"default": "\"''\""
|
|
19
19
|
},
|
|
20
|
+
{
|
|
21
|
+
"name": "href",
|
|
22
|
+
"description": "Set an href, this will turns the name of the card into an anchor tag.",
|
|
23
|
+
"type": "string",
|
|
24
|
+
"default": "\"undefined\""
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "target",
|
|
28
|
+
"description": "Set an anchor tag target, only used when using href.",
|
|
29
|
+
"type": "string",
|
|
30
|
+
"default": "\"undefined\""
|
|
31
|
+
},
|
|
20
32
|
{
|
|
21
33
|
"name": "disabled",
|
|
22
34
|
"description": "Set tot true to disable",
|
|
@@ -44,6 +56,12 @@
|
|
|
44
56
|
"description": "Attribute applied when the element is selected.",
|
|
45
57
|
"type": "boolean",
|
|
46
58
|
"default": "false"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"name": "standalone",
|
|
62
|
+
"description": "Set to true to make element stand out",
|
|
63
|
+
"type": "boolean",
|
|
64
|
+
"default": "false"
|
|
47
65
|
}
|
|
48
66
|
],
|
|
49
67
|
"properties": [
|
|
@@ -61,6 +79,25 @@
|
|
|
61
79
|
"type": "string",
|
|
62
80
|
"default": "\"''\""
|
|
63
81
|
},
|
|
82
|
+
{
|
|
83
|
+
"name": "href",
|
|
84
|
+
"attribute": "href",
|
|
85
|
+
"description": "Set an href, this will turns the name of the card into an anchor tag.",
|
|
86
|
+
"type": "string",
|
|
87
|
+
"default": "\"undefined\""
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "target",
|
|
91
|
+
"attribute": "target",
|
|
92
|
+
"description": "Set an anchor tag target, only used when using href.",
|
|
93
|
+
"type": "string",
|
|
94
|
+
"default": "\"undefined\""
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"name": "styles",
|
|
98
|
+
"type": "CSSResult[]",
|
|
99
|
+
"default": "[null,null]"
|
|
100
|
+
},
|
|
64
101
|
{
|
|
65
102
|
"name": "disabled",
|
|
66
103
|
"attribute": "disabled",
|
|
@@ -75,11 +112,6 @@
|
|
|
75
112
|
"type": "boolean",
|
|
76
113
|
"default": "\"false\""
|
|
77
114
|
},
|
|
78
|
-
{
|
|
79
|
-
"name": "styles",
|
|
80
|
-
"type": "CSSResult[]",
|
|
81
|
-
"default": "[null,null]"
|
|
82
|
-
},
|
|
83
115
|
{
|
|
84
116
|
"name": "selectOnly",
|
|
85
117
|
"attribute": "select-only",
|
package/lib/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
|
|
2
2
|
import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
|
|
3
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
3
4
|
import { UUIRefElement } from '@umbraco-ui/uui-ref/lib';
|
|
4
|
-
import { css, html } from 'lit';
|
|
5
|
+
import { css, html, nothing } from 'lit';
|
|
5
6
|
import { property, state } from 'lit/decorators.js';
|
|
6
7
|
|
|
7
8
|
var __defProp = Object.defineProperty;
|
|
@@ -15,9 +16,28 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
15
16
|
__defProp(target, key, result);
|
|
16
17
|
return result;
|
|
17
18
|
};
|
|
19
|
+
var __accessCheck = (obj, member, msg) => {
|
|
20
|
+
if (!member.has(obj))
|
|
21
|
+
throw TypeError("Cannot " + msg);
|
|
22
|
+
};
|
|
23
|
+
var __privateAdd = (obj, member, value) => {
|
|
24
|
+
if (member.has(obj))
|
|
25
|
+
throw TypeError("Cannot add the same private member more than once");
|
|
26
|
+
member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
27
|
+
};
|
|
28
|
+
var __privateMethod = (obj, member, method) => {
|
|
29
|
+
__accessCheck(obj, member, "access private method");
|
|
30
|
+
return method;
|
|
31
|
+
};
|
|
32
|
+
var _onSlotIconChange, onSlotIconChange_fn, _renderFallbackIcon, renderFallbackIcon_fn, _renderContent, renderContent_fn, _renderLink, renderLink_fn, _renderButton, renderButton_fn;
|
|
18
33
|
let UUIRefNodeElement = class extends UUIRefElement {
|
|
19
34
|
constructor() {
|
|
20
35
|
super(...arguments);
|
|
36
|
+
__privateAdd(this, _onSlotIconChange);
|
|
37
|
+
__privateAdd(this, _renderFallbackIcon);
|
|
38
|
+
__privateAdd(this, _renderContent);
|
|
39
|
+
__privateAdd(this, _renderLink);
|
|
40
|
+
__privateAdd(this, _renderButton);
|
|
21
41
|
this.name = "";
|
|
22
42
|
this.detail = "";
|
|
23
43
|
this._iconSlotHasContent = false;
|
|
@@ -27,19 +47,60 @@ let UUIRefNodeElement = class extends UUIRefElement {
|
|
|
27
47
|
super.connectedCallback();
|
|
28
48
|
demandCustomElement(this, "uui-icon");
|
|
29
49
|
}
|
|
30
|
-
_onSlotIconChange(event) {
|
|
31
|
-
this._iconSlotHasContent = event.target.assignedNodes({ flatten: true }).length > 0;
|
|
32
|
-
}
|
|
33
50
|
renderDetail() {
|
|
34
51
|
return html`<small id="detail"
|
|
35
52
|
>${this.detail}<slot name="detail"></slot
|
|
36
53
|
></small>`;
|
|
37
54
|
}
|
|
38
|
-
_renderFallbackIcon() {
|
|
39
|
-
return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
|
|
40
|
-
}
|
|
41
55
|
render() {
|
|
42
56
|
return html`
|
|
57
|
+
${this.href ? __privateMethod(this, _renderLink, renderLink_fn).call(this) : __privateMethod(this, _renderButton, renderButton_fn).call(this)}
|
|
58
|
+
<!-- Select border must be right after #open-part -->
|
|
59
|
+
<div id="select-border"></div>
|
|
60
|
+
|
|
61
|
+
<slot></slot>
|
|
62
|
+
<slot name="tag"></slot>
|
|
63
|
+
<slot name="actions" id="actions-container"></slot>
|
|
64
|
+
`;
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
_onSlotIconChange = new WeakSet();
|
|
68
|
+
onSlotIconChange_fn = function(event) {
|
|
69
|
+
this._iconSlotHasContent = event.target.assignedNodes({ flatten: true }).length > 0;
|
|
70
|
+
};
|
|
71
|
+
_renderFallbackIcon = new WeakSet();
|
|
72
|
+
renderFallbackIcon_fn = function() {
|
|
73
|
+
return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
|
|
74
|
+
};
|
|
75
|
+
_renderContent = new WeakSet();
|
|
76
|
+
renderContent_fn = function() {
|
|
77
|
+
return html`
|
|
78
|
+
<span id="icon">
|
|
79
|
+
<slot name="icon" @slotchange=${__privateMethod(this, _onSlotIconChange, onSlotIconChange_fn)}></slot>
|
|
80
|
+
${this._iconSlotHasContent === false ? __privateMethod(this, _renderFallbackIcon, renderFallbackIcon_fn).call(this) : ""}
|
|
81
|
+
</span>
|
|
82
|
+
<div id="info">
|
|
83
|
+
<div id="name">${this.name}</div>
|
|
84
|
+
${this.renderDetail()}
|
|
85
|
+
</div>
|
|
86
|
+
`;
|
|
87
|
+
};
|
|
88
|
+
_renderLink = new WeakSet();
|
|
89
|
+
renderLink_fn = function() {
|
|
90
|
+
return html`<a
|
|
91
|
+
id="open-part"
|
|
92
|
+
tabindex=${this.disabled ? nothing : "0"}
|
|
93
|
+
href=${ifDefined(!this.disabled ? this.href : void 0)}
|
|
94
|
+
target=${ifDefined(this.target || void 0)}
|
|
95
|
+
rel=${ifDefined(
|
|
96
|
+
this.target === "_blank" ? "noopener noreferrer" : void 0
|
|
97
|
+
)}>
|
|
98
|
+
${__privateMethod(this, _renderContent, renderContent_fn).call(this)}
|
|
99
|
+
</a>`;
|
|
100
|
+
};
|
|
101
|
+
_renderButton = new WeakSet();
|
|
102
|
+
renderButton_fn = function() {
|
|
103
|
+
return html`
|
|
43
104
|
<button
|
|
44
105
|
type="button"
|
|
45
106
|
id="open-part"
|
|
@@ -47,23 +108,9 @@ let UUIRefNodeElement = class extends UUIRefElement {
|
|
|
47
108
|
@click=${this.handleOpenClick}
|
|
48
109
|
@keydown=${this.handleOpenKeydown}
|
|
49
110
|
?disabled=${this.disabled}>
|
|
50
|
-
|
|
51
|
-
<slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
|
|
52
|
-
${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ""}
|
|
53
|
-
</span>
|
|
54
|
-
<div id="info">
|
|
55
|
-
<div id="name">${this.name}</div>
|
|
56
|
-
${this.renderDetail()}
|
|
57
|
-
</div>
|
|
111
|
+
${__privateMethod(this, _renderContent, renderContent_fn).call(this)}
|
|
58
112
|
</button>
|
|
59
|
-
<!-- Select border must be right after #open-part -->
|
|
60
|
-
<div id="select-border"></div>
|
|
61
|
-
|
|
62
|
-
<slot></slot>
|
|
63
|
-
<slot name="tag"></slot>
|
|
64
|
-
<slot name="actions" id="actions-container"></slot>
|
|
65
113
|
`;
|
|
66
|
-
}
|
|
67
114
|
};
|
|
68
115
|
UUIRefNodeElement.styles = [
|
|
69
116
|
...UUIRefElement.styles,
|
|
@@ -74,7 +121,10 @@ UUIRefNodeElement.styles = [
|
|
|
74
121
|
}
|
|
75
122
|
|
|
76
123
|
#open-part {
|
|
124
|
+
text-decoration: none;
|
|
125
|
+
color: inherit;
|
|
77
126
|
align-self: stretch;
|
|
127
|
+
line-height: normal;
|
|
78
128
|
|
|
79
129
|
display: flex;
|
|
80
130
|
position: relative;
|
|
@@ -134,6 +184,12 @@ __decorateClass([
|
|
|
134
184
|
__decorateClass([
|
|
135
185
|
property({ type: String })
|
|
136
186
|
], UUIRefNodeElement.prototype, "detail", 2);
|
|
187
|
+
__decorateClass([
|
|
188
|
+
property({ type: String })
|
|
189
|
+
], UUIRefNodeElement.prototype, "href", 2);
|
|
190
|
+
__decorateClass([
|
|
191
|
+
property({ type: String })
|
|
192
|
+
], UUIRefNodeElement.prototype, "target", 2);
|
|
137
193
|
__decorateClass([
|
|
138
194
|
state()
|
|
139
195
|
], UUIRefNodeElement.prototype, "_iconSlotHasContent", 2);
|
|
@@ -11,6 +11,7 @@ import { UUIRefElement } from '@umbraco-ui/uui-ref/lib';
|
|
|
11
11
|
* @slot actions - for actions
|
|
12
12
|
*/
|
|
13
13
|
export declare class UUIRefNodeElement extends UUIRefElement {
|
|
14
|
+
#private;
|
|
14
15
|
/**
|
|
15
16
|
* Node name
|
|
16
17
|
* @type {string}
|
|
@@ -25,12 +26,24 @@ export declare class UUIRefNodeElement extends UUIRefElement {
|
|
|
25
26
|
* @default ''
|
|
26
27
|
*/
|
|
27
28
|
detail: string;
|
|
29
|
+
/**
|
|
30
|
+
* Set an href, this will turns the name of the card into an anchor tag.
|
|
31
|
+
* @type {string}
|
|
32
|
+
* @attr
|
|
33
|
+
* @default undefined
|
|
34
|
+
*/
|
|
35
|
+
href?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Set an anchor tag target, only used when using href.
|
|
38
|
+
* @type {string}
|
|
39
|
+
* @attr
|
|
40
|
+
* @default undefined
|
|
41
|
+
*/
|
|
42
|
+
target?: '_blank' | '_parent' | '_self' | '_top';
|
|
28
43
|
private _iconSlotHasContent;
|
|
29
44
|
protected fallbackIcon: string;
|
|
30
45
|
connectedCallback(): void;
|
|
31
|
-
private _onSlotIconChange;
|
|
32
46
|
protected renderDetail(): import("lit-html").TemplateResult<1>;
|
|
33
|
-
private _renderFallbackIcon;
|
|
34
47
|
render(): import("lit-html").TemplateResult<1>;
|
|
35
48
|
static styles: import("lit").CSSResult[];
|
|
36
49
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umbraco-ui/uui-ref-node",
|
|
3
|
-
"version": "1.6.0-rc.
|
|
3
|
+
"version": "1.6.0-rc.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Umbraco",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"custom-elements.json"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@umbraco-ui/uui-base": "1.6.0-rc.
|
|
34
|
-
"@umbraco-ui/uui-icon": "1.6.0-rc.
|
|
35
|
-
"@umbraco-ui/uui-ref": "1.6.0-rc.
|
|
33
|
+
"@umbraco-ui/uui-base": "1.6.0-rc.4",
|
|
34
|
+
"@umbraco-ui/uui-icon": "1.6.0-rc.4",
|
|
35
|
+
"@umbraco-ui/uui-ref": "1.6.0-rc.4"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"homepage": "https://uui.umbraco.com/?path=/story/uui-ref-node",
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "ae00cf3a0d7be2827491b435c1a40f5d7649a504"
|
|
47
47
|
}
|