@kubex/zinc 1.0.98 → 1.0.99
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/dist/custom-elements.json +93 -77
- package/dist/vscode.html-custom-data.json +12 -11
- package/dist/web-types.json +25 -23
- package/dist/zn.d.ts +4 -0
- package/dist/zn.min.js +103 -99
- package/docs/pages/components/item.md +18 -0
- package/package.json +1 -1
- package/src/components/item/item.component.ts +14 -2
- package/src/components/item/item.scss +11 -0
|
@@ -54,6 +54,24 @@ layout: component
|
|
|
54
54
|
</zn-cols>
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
+
### Help Tooltip
|
|
58
|
+
|
|
59
|
+
Use the `help-tooltip` attribute to display an info icon with a tooltip next to the caption.
|
|
60
|
+
|
|
61
|
+
```html:preview
|
|
62
|
+
<zn-sp divide no-gap>
|
|
63
|
+
<zn-item caption="Account ID" help-tooltip="The unique identifier for this account">
|
|
64
|
+
ACC-12345
|
|
65
|
+
</zn-item>
|
|
66
|
+
<zn-item caption="MRR" help-tooltip="Monthly Recurring Revenue, calculated from active subscriptions">
|
|
67
|
+
$1,250.00
|
|
68
|
+
</zn-item>
|
|
69
|
+
<zn-item caption="Status">
|
|
70
|
+
Active
|
|
71
|
+
</zn-item>
|
|
72
|
+
</zn-sp>
|
|
73
|
+
```
|
|
74
|
+
|
|
57
75
|
### Multiple Actions
|
|
58
76
|
|
|
59
77
|
Example of multiple actions in a description item.
|
package/package.json
CHANGED
|
@@ -3,6 +3,7 @@ import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
|
|
|
3
3
|
import {property} from 'lit/decorators.js';
|
|
4
4
|
import ZincElement from '../../internal/zinc-element';
|
|
5
5
|
import ZnIcon from "../icon";
|
|
6
|
+
import ZnTooltip from "../tooltip";
|
|
6
7
|
|
|
7
8
|
import styles from './item.scss';
|
|
8
9
|
|
|
@@ -13,6 +14,7 @@ import styles from './item.scss';
|
|
|
13
14
|
* @since 1.0
|
|
14
15
|
*
|
|
15
16
|
* @dependency zn-icon
|
|
17
|
+
* @dependency zn-tooltip
|
|
16
18
|
*
|
|
17
19
|
* @slot - The default slot. Can either be slotted or use the value attribute
|
|
18
20
|
* @slot actions - Used for adding actions to a zn-item.
|
|
@@ -23,7 +25,8 @@ import styles from './item.scss';
|
|
|
23
25
|
*/
|
|
24
26
|
export default class ZnItem extends ZincElement {
|
|
25
27
|
static dependencies = {
|
|
26
|
-
'zn-icon': ZnIcon
|
|
28
|
+
'zn-icon': ZnIcon,
|
|
29
|
+
'zn-tooltip': ZnTooltip
|
|
27
30
|
};
|
|
28
31
|
|
|
29
32
|
static styles: CSSResultGroup = unsafeCSS(styles);
|
|
@@ -38,6 +41,8 @@ export default class ZnItem extends ZincElement {
|
|
|
38
41
|
|
|
39
42
|
@property({attribute: 'edit-on-hover', type: Boolean}) editOnHover: boolean;
|
|
40
43
|
|
|
44
|
+
@property({attribute: 'help-tooltip'}) helpTooltip: string;
|
|
45
|
+
|
|
41
46
|
@property() icon: string;
|
|
42
47
|
|
|
43
48
|
@property() value: string;
|
|
@@ -82,12 +87,19 @@ export default class ZnItem extends ZincElement {
|
|
|
82
87
|
render() {
|
|
83
88
|
const hasIcon = this.icon && this.icon.length > 0;
|
|
84
89
|
|
|
90
|
+
const hasHelpTooltip = this.helpTooltip?.length > 0;
|
|
91
|
+
|
|
85
92
|
const headings = html`
|
|
86
93
|
<div class="item__headings">
|
|
87
94
|
<div class=${classMap({
|
|
88
95
|
'item__caption': true,
|
|
89
|
-
'item__caption--required': this._hasRequiredSlot()
|
|
96
|
+
'item__caption--required': this._hasRequiredSlot(),
|
|
97
|
+
'item__caption--has-help': hasHelpTooltip
|
|
90
98
|
})} part="caption">${this.caption}
|
|
99
|
+
${hasHelpTooltip ? html`
|
|
100
|
+
<zn-tooltip class="item__help-tooltip" content="${this.helpTooltip}">
|
|
101
|
+
<zn-icon src="info"></zn-icon>
|
|
102
|
+
</zn-tooltip>` : ''}
|
|
91
103
|
</div>
|
|
92
104
|
${this.description ? html`
|
|
93
105
|
<div class="item__description">${this.description}</div>` : ''}
|
|
@@ -97,6 +97,12 @@
|
|
|
97
97
|
width: 100%;
|
|
98
98
|
flex-shrink: 0;
|
|
99
99
|
|
|
100
|
+
&--has-help {
|
|
101
|
+
display: inline-flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
gap: var(--zn-spacing-2x-small);
|
|
104
|
+
}
|
|
105
|
+
|
|
100
106
|
&--required::after {
|
|
101
107
|
content: var(--zn-input-required-content);
|
|
102
108
|
margin-inline-start: var(--zn-input-required-content-offset);
|
|
@@ -104,6 +110,11 @@
|
|
|
104
110
|
}
|
|
105
111
|
}
|
|
106
112
|
|
|
113
|
+
&__help-tooltip {
|
|
114
|
+
color: var(--zn-color-neutral-700);
|
|
115
|
+
font-size: var(--zn-font-size-small);
|
|
116
|
+
}
|
|
117
|
+
|
|
107
118
|
&__description {
|
|
108
119
|
display: block;
|
|
109
120
|
font-weight: 400;
|