@kubex/zinc 1.1.153 → 1.1.154
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 +74 -74
- package/dist/vscode.html-custom-data.json +11 -11
- package/dist/web-types.json +23 -23
- package/docs/pages/components/panel.md +8 -9
- package/package.json +1 -1
|
@@ -56,79 +56,6 @@
|
|
|
56
56
|
}
|
|
57
57
|
]
|
|
58
58
|
},
|
|
59
|
-
{
|
|
60
|
-
"kind": "javascript-module",
|
|
61
|
-
"path": "components/action-bar/action-bar.js",
|
|
62
|
-
"declarations": [
|
|
63
|
-
{
|
|
64
|
-
"kind": "class",
|
|
65
|
-
"description": "",
|
|
66
|
-
"name": "ZnActionBar",
|
|
67
|
-
"cssProperties": [
|
|
68
|
-
{
|
|
69
|
-
"description": "An example CSS custom property.",
|
|
70
|
-
"name": "--example"
|
|
71
|
-
}
|
|
72
|
-
],
|
|
73
|
-
"cssParts": [
|
|
74
|
-
{
|
|
75
|
-
"description": "The component's base wrapper.",
|
|
76
|
-
"name": "base"
|
|
77
|
-
}
|
|
78
|
-
],
|
|
79
|
-
"slots": [
|
|
80
|
-
{
|
|
81
|
-
"description": "The default slot.",
|
|
82
|
-
"name": ""
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
"description": "An example slot.",
|
|
86
|
-
"name": "example"
|
|
87
|
-
}
|
|
88
|
-
],
|
|
89
|
-
"members": [
|
|
90
|
-
{
|
|
91
|
-
"kind": "field",
|
|
92
|
-
"name": "localize",
|
|
93
|
-
"privacy": "private",
|
|
94
|
-
"readonly": true,
|
|
95
|
-
"default": "new LocalizeController(this)"
|
|
96
|
-
}
|
|
97
|
-
],
|
|
98
|
-
"events": [
|
|
99
|
-
{
|
|
100
|
-
"description": "Emitted as an example.",
|
|
101
|
-
"name": "zn-event-name"
|
|
102
|
-
}
|
|
103
|
-
],
|
|
104
|
-
"superclass": {
|
|
105
|
-
"name": "ZincElement",
|
|
106
|
-
"module": "/src/internal/zinc-element"
|
|
107
|
-
},
|
|
108
|
-
"summary": "Short summary of the component's intended use.",
|
|
109
|
-
"tagNameWithoutPrefix": "action-bar",
|
|
110
|
-
"tagName": "zn-action-bar",
|
|
111
|
-
"customElement": true,
|
|
112
|
-
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
|
|
113
|
-
"documentation": "https://zinc.style/components/action-bar",
|
|
114
|
-
"status": "experimental",
|
|
115
|
-
"since": "1.0",
|
|
116
|
-
"dependencies": [
|
|
117
|
-
"zn-example"
|
|
118
|
-
]
|
|
119
|
-
}
|
|
120
|
-
],
|
|
121
|
-
"exports": [
|
|
122
|
-
{
|
|
123
|
-
"kind": "js",
|
|
124
|
-
"name": "default",
|
|
125
|
-
"declaration": {
|
|
126
|
-
"name": "ZnActionBar",
|
|
127
|
-
"module": "components/action-bar/action-bar.js"
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
]
|
|
131
|
-
},
|
|
132
59
|
{
|
|
133
60
|
"kind": "javascript-module",
|
|
134
61
|
"path": "components/alert/alert.js",
|
|
@@ -323,6 +250,79 @@
|
|
|
323
250
|
}
|
|
324
251
|
]
|
|
325
252
|
},
|
|
253
|
+
{
|
|
254
|
+
"kind": "javascript-module",
|
|
255
|
+
"path": "components/action-bar/action-bar.js",
|
|
256
|
+
"declarations": [
|
|
257
|
+
{
|
|
258
|
+
"kind": "class",
|
|
259
|
+
"description": "",
|
|
260
|
+
"name": "ZnActionBar",
|
|
261
|
+
"cssProperties": [
|
|
262
|
+
{
|
|
263
|
+
"description": "An example CSS custom property.",
|
|
264
|
+
"name": "--example"
|
|
265
|
+
}
|
|
266
|
+
],
|
|
267
|
+
"cssParts": [
|
|
268
|
+
{
|
|
269
|
+
"description": "The component's base wrapper.",
|
|
270
|
+
"name": "base"
|
|
271
|
+
}
|
|
272
|
+
],
|
|
273
|
+
"slots": [
|
|
274
|
+
{
|
|
275
|
+
"description": "The default slot.",
|
|
276
|
+
"name": ""
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"description": "An example slot.",
|
|
280
|
+
"name": "example"
|
|
281
|
+
}
|
|
282
|
+
],
|
|
283
|
+
"members": [
|
|
284
|
+
{
|
|
285
|
+
"kind": "field",
|
|
286
|
+
"name": "localize",
|
|
287
|
+
"privacy": "private",
|
|
288
|
+
"readonly": true,
|
|
289
|
+
"default": "new LocalizeController(this)"
|
|
290
|
+
}
|
|
291
|
+
],
|
|
292
|
+
"events": [
|
|
293
|
+
{
|
|
294
|
+
"description": "Emitted as an example.",
|
|
295
|
+
"name": "zn-event-name"
|
|
296
|
+
}
|
|
297
|
+
],
|
|
298
|
+
"superclass": {
|
|
299
|
+
"name": "ZincElement",
|
|
300
|
+
"module": "/src/internal/zinc-element"
|
|
301
|
+
},
|
|
302
|
+
"summary": "Short summary of the component's intended use.",
|
|
303
|
+
"tagNameWithoutPrefix": "action-bar",
|
|
304
|
+
"tagName": "zn-action-bar",
|
|
305
|
+
"customElement": true,
|
|
306
|
+
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
|
|
307
|
+
"documentation": "https://zinc.style/components/action-bar",
|
|
308
|
+
"status": "experimental",
|
|
309
|
+
"since": "1.0",
|
|
310
|
+
"dependencies": [
|
|
311
|
+
"zn-example"
|
|
312
|
+
]
|
|
313
|
+
}
|
|
314
|
+
],
|
|
315
|
+
"exports": [
|
|
316
|
+
{
|
|
317
|
+
"kind": "js",
|
|
318
|
+
"name": "default",
|
|
319
|
+
"declaration": {
|
|
320
|
+
"name": "ZnActionBar",
|
|
321
|
+
"module": "components/action-bar/action-bar.js"
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
]
|
|
325
|
+
},
|
|
326
326
|
{
|
|
327
327
|
"kind": "javascript-module",
|
|
328
328
|
"path": "components/animated-button/animated-button.js",
|
|
@@ -53512,7 +53512,7 @@
|
|
|
53512
53512
|
"package": {
|
|
53513
53513
|
"name": "@kubex/zinc",
|
|
53514
53514
|
"description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
|
|
53515
|
-
"version": "1.1.
|
|
53515
|
+
"version": "1.1.154",
|
|
53516
53516
|
"author": "",
|
|
53517
53517
|
"license": "MIT"
|
|
53518
53518
|
}
|
|
@@ -13,17 +13,6 @@
|
|
|
13
13
|
}
|
|
14
14
|
]
|
|
15
15
|
},
|
|
16
|
-
{
|
|
17
|
-
"name": "zn-action-bar",
|
|
18
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
19
|
-
"attributes": [],
|
|
20
|
-
"references": [
|
|
21
|
-
{
|
|
22
|
-
"name": "Documentation",
|
|
23
|
-
"url": "https://zinc.style/components/action-bar"
|
|
24
|
-
}
|
|
25
|
-
]
|
|
26
|
-
},
|
|
27
16
|
{
|
|
28
17
|
"name": "zn-alert",
|
|
29
18
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -64,6 +53,17 @@
|
|
|
64
53
|
}
|
|
65
54
|
]
|
|
66
55
|
},
|
|
56
|
+
{
|
|
57
|
+
"name": "zn-action-bar",
|
|
58
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
59
|
+
"attributes": [],
|
|
60
|
+
"references": [
|
|
61
|
+
{
|
|
62
|
+
"name": "Documentation",
|
|
63
|
+
"url": "https://zinc.style/components/action-bar"
|
|
64
|
+
}
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
67
|
{
|
|
68
68
|
"name": "zn-animated-button",
|
|
69
69
|
"description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@kubex/zinc",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.154",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,28 +15,6 @@
|
|
|
15
15
|
"events": [],
|
|
16
16
|
"js": { "properties": [], "events": [] }
|
|
17
17
|
},
|
|
18
|
-
{
|
|
19
|
-
"name": "zn-action-bar",
|
|
20
|
-
"description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
21
|
-
"doc-url": "",
|
|
22
|
-
"attributes": [],
|
|
23
|
-
"slots": [
|
|
24
|
-
{ "name": "", "description": "The default slot." },
|
|
25
|
-
{ "name": "example", "description": "An example slot." }
|
|
26
|
-
],
|
|
27
|
-
"events": [
|
|
28
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
29
|
-
],
|
|
30
|
-
"js": {
|
|
31
|
-
"properties": [],
|
|
32
|
-
"events": [
|
|
33
|
-
{
|
|
34
|
-
"name": "zn-event-name",
|
|
35
|
-
"description": "Emitted as an example."
|
|
36
|
-
}
|
|
37
|
-
]
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
18
|
{
|
|
41
19
|
"name": "zn-alert",
|
|
42
20
|
"description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -105,6 +83,28 @@
|
|
|
105
83
|
]
|
|
106
84
|
}
|
|
107
85
|
},
|
|
86
|
+
{
|
|
87
|
+
"name": "zn-action-bar",
|
|
88
|
+
"description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
89
|
+
"doc-url": "",
|
|
90
|
+
"attributes": [],
|
|
91
|
+
"slots": [
|
|
92
|
+
{ "name": "", "description": "The default slot." },
|
|
93
|
+
{ "name": "example", "description": "An example slot." }
|
|
94
|
+
],
|
|
95
|
+
"events": [
|
|
96
|
+
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
97
|
+
],
|
|
98
|
+
"js": {
|
|
99
|
+
"properties": [],
|
|
100
|
+
"events": [
|
|
101
|
+
{
|
|
102
|
+
"name": "zn-event-name",
|
|
103
|
+
"description": "Emitted as an example."
|
|
104
|
+
}
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
108
|
{
|
|
109
109
|
"name": "zn-animated-button",
|
|
110
110
|
"description": "\n\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
|
|
@@ -8,7 +8,7 @@ layout: component
|
|
|
8
8
|
Panels are a fundamental component in the Zinc framework, providing a structured container for displaying content with consistent styling, borders, and spacing. They support various layouts including headers with actions and footers.
|
|
9
9
|
|
|
10
10
|
```html:preview
|
|
11
|
-
<zn-panel caption="Example Panel"
|
|
11
|
+
<zn-panel caption="Example Panel" flush tabbed>
|
|
12
12
|
<!-- Panel actions -->
|
|
13
13
|
<zn-chip slot="actions" icon="home">Awesome</zn-chip>
|
|
14
14
|
<zn-chip slot="actions" icon="phone" type="info">example</zn-chip>
|
|
@@ -42,10 +42,10 @@ Panels are a fundamental component in the Zinc framework, providing a structured
|
|
|
42
42
|
|
|
43
43
|
### Basic Panel
|
|
44
44
|
|
|
45
|
-
Basic panels provide a simple container with consistent borders, rounded corners, and background styling. The panel can display a caption
|
|
45
|
+
Basic panels provide a simple container with consistent borders, rounded corners, and background styling. The panel can display a caption in its header.
|
|
46
46
|
|
|
47
47
|
```html:preview
|
|
48
|
-
<zn-panel caption="Example Panel"
|
|
48
|
+
<zn-panel caption="Example Panel">
|
|
49
49
|
<div>Panel Content</div>
|
|
50
50
|
</zn-panel>
|
|
51
51
|
```
|
|
@@ -55,7 +55,7 @@ Basic panels provide a simple container with consistent borders, rounded corners
|
|
|
55
55
|
Use the `icon` attribute to add an icon to the panel header.
|
|
56
56
|
|
|
57
57
|
```html:preview
|
|
58
|
-
<zn-panel caption="Settings Panel"
|
|
58
|
+
<zn-panel caption="Settings Panel" icon="settings">
|
|
59
59
|
<div style="padding: 20px;">
|
|
60
60
|
<p>Panel content goes here</p>
|
|
61
61
|
</div>
|
|
@@ -67,7 +67,7 @@ Use the `icon` attribute to add an icon to the panel header.
|
|
|
67
67
|
Use the `actions` slot to add action buttons or chips to the panel header.
|
|
68
68
|
|
|
69
69
|
```html:preview
|
|
70
|
-
<zn-panel caption="Project Details"
|
|
70
|
+
<zn-panel caption="Project Details">
|
|
71
71
|
<zn-chip slot="actions" icon="edit" type="info">Edit</zn-chip>
|
|
72
72
|
<zn-chip slot="actions" icon="delete" type="error">Delete</zn-chip>
|
|
73
73
|
|
|
@@ -99,7 +99,7 @@ Use the `footer` slot to add footer content to the panel.
|
|
|
99
99
|
Panel headers include a border by default. Use the `header-borderless` attribute to remove the border beneath the header.
|
|
100
100
|
|
|
101
101
|
```html:preview
|
|
102
|
-
<zn-panel caption="Borderless Header"
|
|
102
|
+
<zn-panel caption="Borderless Header" header-borderless>
|
|
103
103
|
<div style="padding: 20px;">
|
|
104
104
|
<p>Panel content with a borderless header</p>
|
|
105
105
|
</div>
|
|
@@ -192,7 +192,7 @@ Use the `tabbed` attribute for panels containing tabs. This automatically remove
|
|
|
192
192
|
Use the `transparent` attribute to remove the panel background and border, creating a borderless container.
|
|
193
193
|
|
|
194
194
|
```html:preview
|
|
195
|
-
<zn-panel caption="Transparent Panel"
|
|
195
|
+
<zn-panel caption="Transparent Panel" transparent>
|
|
196
196
|
<div style="padding: 20px; background: rgba(var(--zn-color-info), 0.1);">
|
|
197
197
|
Content in transparent panel
|
|
198
198
|
</div>
|
|
@@ -204,7 +204,7 @@ Use the `transparent` attribute to remove the panel background and border, creat
|
|
|
204
204
|
Use the `shadow` attribute to add a prominent drop shadow to the panel.
|
|
205
205
|
|
|
206
206
|
```html:preview
|
|
207
|
-
<zn-panel caption="Shadow Panel"
|
|
207
|
+
<zn-panel caption="Shadow Panel" shadow>
|
|
208
208
|
<div style="padding: 20px;">
|
|
209
209
|
Content with enhanced shadow
|
|
210
210
|
</div>
|
|
@@ -284,7 +284,6 @@ All panel features can be combined to create rich, complex layouts.
|
|
|
284
284
|
```html:preview
|
|
285
285
|
<zn-panel
|
|
286
286
|
caption="Advanced Panel"
|
|
287
|
-
description="Combining multiple features"
|
|
288
287
|
icon="dashboard"
|
|
289
288
|
shadow>
|
|
290
289
|
|