@adia-ai/gen-ui 0.8.45 → 0.8.47
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/CHANGELOG.md +13 -0
- package/compose/strategies/free-form-composer/index.js +36 -2
- package/corpus/chunk-embeddings.json +1 -1
- package/corpus/chunks/_index.json +425 -4
- package/corpus/chunks/_source-hashes.json +62 -59
- package/corpus/chunks/chart-in-card-full-bleed-chip-legend.json +115 -0
- package/corpus/chunks/new-enrollments-area.json +158 -0
- package/corpus/chunks/new-enrollments-radial-bar.json +157 -0
- package/corpus/chunks/new-enrollments-sparkline.json +243 -0
- package/corpus/chunks/new-enrollments-stacked-bar.json +182 -0
- package/corpus/chunks/table-footer-client-mode.json +56 -0
- package/corpus/chunks/table-footer-count-only.json +40 -0
- package/corpus/chunks/table-footer-empty.json +49 -0
- package/corpus/chunks/table-footer-server-mode.json +136 -0
- package/corpus/chunks/table-footer-single-page.json +41 -0
- package/corpus/chunks/table-in-card-client-mode.json +115 -0
- package/corpus/chunks/table-in-card-empty.json +123 -0
- package/corpus/chunks/table-in-card-loading.json +111 -0
- package/corpus/chunks/table-in-card-server-mode.json +131 -0
- package/corpus/chunks/table-toolbar-adiav2-row.json +14 -19
- package/corpus/chunks/table-toolbar-chrome-only-empty.json +14 -19
- package/corpus/chunks/table-toolbar-with-table.json +11 -12
- package/corpus/manifest.json +4 -4
- package/package.json +1 -1
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "new-enrollments-radial-bar",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "card-ui",
|
|
5
|
+
"page": "/packages/web-components/patterns/new-enrollments/new-enrollments.examples.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {},
|
|
9
|
+
"html": "<card-ui\n style=\"max-width:360px;\">\n <header>\n <span slot=\"heading\"><h3>New enrollments</h3></span>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <select-ui size=\"sm\" variant=\"ghost\" value=\"30d\">\n <option value=\"30d\">Last 30 days</option>\n <option value=\"7d\">Last 7 days</option>\n </select-ui>\n <button-ui icon=\"dots-three-vertical\" variant=\"ghost\" size=\"sm\" aria-label=\"Card options\"></button-ui>\n </row-ui>\n </header>\n <section bleed>\n <chart-ui id=\"ne-radial-bar\" type=\"radial-bar\" x=\"channel\" y=\"v\"\n data='[{\"channel\":\"Online\",\"v\":82},{\"channel\":\"Referral\",\"v\":61},{\"channel\":\"Walk-in\",\"v\":45}]'>\n </chart-ui>\n </section>\n <section>\n <chart-legend-ui for=\"ne-radial-bar\"></chart-legend-ui>\n </section>\n </card-ui>",
|
|
10
|
+
"source": "packages/web-components/patterns/new-enrollments/new-enrollments.examples.html",
|
|
11
|
+
"metadata": {
|
|
12
|
+
"domain": "dashboard",
|
|
13
|
+
"description": "New enrollments radial-bar card — enrollment channel mix (Online, Referral, Walk-in) each as percent of its monthly target reached, paired with a legend band naming all three channels.",
|
|
14
|
+
"keywords": [
|
|
15
|
+
"new",
|
|
16
|
+
"enrollments",
|
|
17
|
+
"dashboard",
|
|
18
|
+
"card",
|
|
19
|
+
"radial-bar",
|
|
20
|
+
"channel",
|
|
21
|
+
"mix",
|
|
22
|
+
"online",
|
|
23
|
+
"referral",
|
|
24
|
+
"walk-in",
|
|
25
|
+
"target",
|
|
26
|
+
"legend",
|
|
27
|
+
"analytics",
|
|
28
|
+
"chart"
|
|
29
|
+
]
|
|
30
|
+
},
|
|
31
|
+
"captured_at": "2026-08-21T15:01:27.959Z",
|
|
32
|
+
"template": [
|
|
33
|
+
{
|
|
34
|
+
"id": "text-2",
|
|
35
|
+
"component": "Text",
|
|
36
|
+
"variant": "heading",
|
|
37
|
+
"textContent": "New enrollments"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"id": "text",
|
|
41
|
+
"component": "Text",
|
|
42
|
+
"variant": "body",
|
|
43
|
+
"slot": "heading",
|
|
44
|
+
"children": [
|
|
45
|
+
"text-2"
|
|
46
|
+
]
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"id": "choice-picker",
|
|
50
|
+
"component": "ChoicePicker",
|
|
51
|
+
"size": "sm",
|
|
52
|
+
"value": "30d",
|
|
53
|
+
"variant": "ghost",
|
|
54
|
+
"options": [
|
|
55
|
+
{
|
|
56
|
+
"value": "30d",
|
|
57
|
+
"label": "Last 30 days"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"value": "7d",
|
|
61
|
+
"label": "Last 7 days"
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"id": "card-options",
|
|
67
|
+
"component": "Button",
|
|
68
|
+
"aria-label": "Card options",
|
|
69
|
+
"icon": "dots-three-vertical",
|
|
70
|
+
"size": "sm",
|
|
71
|
+
"variant": "ghost"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"id": "row",
|
|
75
|
+
"component": "Row",
|
|
76
|
+
"slot": "action",
|
|
77
|
+
"align": "center",
|
|
78
|
+
"gap": "2",
|
|
79
|
+
"children": [
|
|
80
|
+
"choice-picker",
|
|
81
|
+
"card-options"
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"id": "header",
|
|
86
|
+
"component": "Header",
|
|
87
|
+
"children": [
|
|
88
|
+
"text",
|
|
89
|
+
"row"
|
|
90
|
+
]
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"id": "ne-radial-bar",
|
|
94
|
+
"component": "Chart",
|
|
95
|
+
"type": "radial-bar",
|
|
96
|
+
"data": [
|
|
97
|
+
{
|
|
98
|
+
"channel": "Online",
|
|
99
|
+
"v": 82
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"channel": "Referral",
|
|
103
|
+
"v": 61
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"channel": "Walk-in",
|
|
107
|
+
"v": 45
|
|
108
|
+
}
|
|
109
|
+
],
|
|
110
|
+
"x": "channel",
|
|
111
|
+
"y": "v"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"id": "section",
|
|
115
|
+
"component": "Section",
|
|
116
|
+
"bleed": true,
|
|
117
|
+
"children": [
|
|
118
|
+
"ne-radial-bar"
|
|
119
|
+
]
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"id": "chart-legend",
|
|
123
|
+
"component": "ChartLegend",
|
|
124
|
+
"for": "ne-radial-bar"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"id": "section-2",
|
|
128
|
+
"component": "Section",
|
|
129
|
+
"children": [
|
|
130
|
+
"chart-legend"
|
|
131
|
+
]
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"id": "column",
|
|
135
|
+
"component": "Column",
|
|
136
|
+
"children": [
|
|
137
|
+
"section",
|
|
138
|
+
"section-2"
|
|
139
|
+
]
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"id": "section-3",
|
|
143
|
+
"component": "Section",
|
|
144
|
+
"children": [
|
|
145
|
+
"column"
|
|
146
|
+
]
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"id": "root",
|
|
150
|
+
"component": "Card",
|
|
151
|
+
"children": [
|
|
152
|
+
"header",
|
|
153
|
+
"section-3"
|
|
154
|
+
]
|
|
155
|
+
}
|
|
156
|
+
]
|
|
157
|
+
}
|
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "new-enrollments-sparkline",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "card-ui",
|
|
5
|
+
"page": "/packages/web-components/patterns/new-enrollments/new-enrollments.examples.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {},
|
|
9
|
+
"html": "<card-ui\n style=\"max-width:360px;\">\n <header>\n <span slot=\"heading\"><h3>New enrollments</h3></span>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <select-ui size=\"sm\" variant=\"ghost\" value=\"30d\">\n <option value=\"30d\">Last 30 days</option>\n <option value=\"7d\">Last 7 days</option>\n </select-ui>\n <button-ui icon=\"dots-three-vertical\" variant=\"ghost\" size=\"sm\" aria-label=\"Card options\"></button-ui>\n </row-ui>\n </header>\n <section bleed>\n <chart-ui id=\"ne-sparkline\" type=\"sparkline\" x=\"day\" y=\"value\"\n data='[{\"day\":\"Jul 25\",\"value\":1580},{\"day\":\"Jul 26\",\"value\":1620},{\"day\":\"Jul 27\",\"value\":1550},{\"day\":\"Jul 28\",\"value\":1670},{\"day\":\"Jul 29\",\"value\":1710},{\"day\":\"Jul 30\",\"value\":1640},{\"day\":\"Jul 31\",\"value\":1690},{\"day\":\"Aug 1\",\"value\":1730},{\"day\":\"Aug 2\",\"value\":1660},{\"day\":\"Aug 3\",\"value\":1780},{\"day\":\"Aug 4\",\"value\":1810},{\"day\":\"Aug 5\",\"value\":1750},{\"day\":\"Aug 6\",\"value\":1700},{\"day\":\"Aug 7\",\"value\":1840},{\"day\":\"Aug 8\",\"value\":1790},{\"day\":\"Aug 9\",\"value\":1880},{\"day\":\"Aug 10\",\"value\":1820},{\"day\":\"Aug 11\",\"value\":1760},{\"day\":\"Aug 12\",\"value\":1910},{\"day\":\"Aug 13\",\"value\":1850},{\"day\":\"Aug 14\",\"value\":1800},{\"day\":\"Aug 15\",\"value\":1940},{\"day\":\"Aug 16\",\"value\":1890},{\"day\":\"Aug 17\",\"value\":1830},{\"day\":\"Aug 18\",\"value\":1970},{\"day\":\"Aug 19\",\"value\":1920},{\"day\":\"Aug 20\",\"value\":1870},{\"day\":\"Aug 21\",\"value\":2032},{\"day\":\"Aug 22\",\"value\":1950},{\"day\":\"Aug 23\",\"value\":1990}]'>\n </chart-ui>\n </section>\n </card-ui>",
|
|
10
|
+
"source": "packages/web-components/patterns/new-enrollments/new-enrollments.examples.html",
|
|
11
|
+
"metadata": {
|
|
12
|
+
"domain": "dashboard",
|
|
13
|
+
"description": "New enrollments sparkline card — 30-day daily enrollment trend as a bare-marks sparkline, hovering any point surfaces the exact count and day via the built-in tooltip.",
|
|
14
|
+
"keywords": [
|
|
15
|
+
"new",
|
|
16
|
+
"enrollments",
|
|
17
|
+
"dashboard",
|
|
18
|
+
"card",
|
|
19
|
+
"sparkline",
|
|
20
|
+
"tooltip",
|
|
21
|
+
"trend",
|
|
22
|
+
"daily",
|
|
23
|
+
"compact",
|
|
24
|
+
"bare-marks",
|
|
25
|
+
"analytics",
|
|
26
|
+
"chart"
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
"captured_at": "2026-08-21T15:01:27.959Z",
|
|
30
|
+
"template": [
|
|
31
|
+
{
|
|
32
|
+
"id": "text-2",
|
|
33
|
+
"component": "Text",
|
|
34
|
+
"variant": "heading",
|
|
35
|
+
"textContent": "New enrollments"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"id": "text",
|
|
39
|
+
"component": "Text",
|
|
40
|
+
"variant": "body",
|
|
41
|
+
"slot": "heading",
|
|
42
|
+
"children": [
|
|
43
|
+
"text-2"
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"id": "choice-picker",
|
|
48
|
+
"component": "ChoicePicker",
|
|
49
|
+
"size": "sm",
|
|
50
|
+
"value": "30d",
|
|
51
|
+
"variant": "ghost",
|
|
52
|
+
"options": [
|
|
53
|
+
{
|
|
54
|
+
"value": "30d",
|
|
55
|
+
"label": "Last 30 days"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"value": "7d",
|
|
59
|
+
"label": "Last 7 days"
|
|
60
|
+
}
|
|
61
|
+
]
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"id": "card-options",
|
|
65
|
+
"component": "Button",
|
|
66
|
+
"aria-label": "Card options",
|
|
67
|
+
"icon": "dots-three-vertical",
|
|
68
|
+
"size": "sm",
|
|
69
|
+
"variant": "ghost"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"id": "row",
|
|
73
|
+
"component": "Row",
|
|
74
|
+
"slot": "action",
|
|
75
|
+
"align": "center",
|
|
76
|
+
"gap": "2",
|
|
77
|
+
"children": [
|
|
78
|
+
"choice-picker",
|
|
79
|
+
"card-options"
|
|
80
|
+
]
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"id": "header",
|
|
84
|
+
"component": "Header",
|
|
85
|
+
"children": [
|
|
86
|
+
"text",
|
|
87
|
+
"row"
|
|
88
|
+
]
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"id": "ne-sparkline",
|
|
92
|
+
"component": "Chart",
|
|
93
|
+
"type": "sparkline",
|
|
94
|
+
"data": [
|
|
95
|
+
{
|
|
96
|
+
"day": "Jul 25",
|
|
97
|
+
"value": 1580
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"day": "Jul 26",
|
|
101
|
+
"value": 1620
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"day": "Jul 27",
|
|
105
|
+
"value": 1550
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"day": "Jul 28",
|
|
109
|
+
"value": 1670
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"day": "Jul 29",
|
|
113
|
+
"value": 1710
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"day": "Jul 30",
|
|
117
|
+
"value": 1640
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"day": "Jul 31",
|
|
121
|
+
"value": 1690
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"day": "Aug 1",
|
|
125
|
+
"value": 1730
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"day": "Aug 2",
|
|
129
|
+
"value": 1660
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"day": "Aug 3",
|
|
133
|
+
"value": 1780
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"day": "Aug 4",
|
|
137
|
+
"value": 1810
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"day": "Aug 5",
|
|
141
|
+
"value": 1750
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"day": "Aug 6",
|
|
145
|
+
"value": 1700
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"day": "Aug 7",
|
|
149
|
+
"value": 1840
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"day": "Aug 8",
|
|
153
|
+
"value": 1790
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"day": "Aug 9",
|
|
157
|
+
"value": 1880
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"day": "Aug 10",
|
|
161
|
+
"value": 1820
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"day": "Aug 11",
|
|
165
|
+
"value": 1760
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"day": "Aug 12",
|
|
169
|
+
"value": 1910
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"day": "Aug 13",
|
|
173
|
+
"value": 1850
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"day": "Aug 14",
|
|
177
|
+
"value": 1800
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"day": "Aug 15",
|
|
181
|
+
"value": 1940
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"day": "Aug 16",
|
|
185
|
+
"value": 1890
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"day": "Aug 17",
|
|
189
|
+
"value": 1830
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"day": "Aug 18",
|
|
193
|
+
"value": 1970
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"day": "Aug 19",
|
|
197
|
+
"value": 1920
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"day": "Aug 20",
|
|
201
|
+
"value": 1870
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"day": "Aug 21",
|
|
205
|
+
"value": 2032
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
"day": "Aug 22",
|
|
209
|
+
"value": 1950
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"day": "Aug 23",
|
|
213
|
+
"value": 1990
|
|
214
|
+
}
|
|
215
|
+
],
|
|
216
|
+
"x": "day",
|
|
217
|
+
"y": "value"
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
"id": "section",
|
|
221
|
+
"component": "Section",
|
|
222
|
+
"bleed": true,
|
|
223
|
+
"children": [
|
|
224
|
+
"column"
|
|
225
|
+
]
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"id": "column",
|
|
229
|
+
"component": "Column",
|
|
230
|
+
"children": [
|
|
231
|
+
"ne-sparkline"
|
|
232
|
+
]
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
"id": "root",
|
|
236
|
+
"component": "Card",
|
|
237
|
+
"children": [
|
|
238
|
+
"header",
|
|
239
|
+
"section"
|
|
240
|
+
]
|
|
241
|
+
}
|
|
242
|
+
]
|
|
243
|
+
}
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "new-enrollments-stacked-bar",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "card-ui",
|
|
5
|
+
"page": "/packages/web-components/patterns/new-enrollments/new-enrollments.examples.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {},
|
|
9
|
+
"html": "<card-ui\n style=\"max-width:360px;\">\n <header>\n <span slot=\"heading\"><h3>New enrollments</h3></span>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <select-ui size=\"sm\" variant=\"ghost\" value=\"6m\">\n <option value=\"6m\">Last 6 months</option>\n <option value=\"3m\">Last 3 months</option>\n <option value=\"1m\">Last month</option>\n </select-ui>\n <button-ui icon=\"dots-three-vertical\" variant=\"ghost\" size=\"sm\" aria-label=\"Card options\"></button-ui>\n </row-ui>\n </header>\n <section bleed>\n <chart-ui id=\"ne-stacked-bar\" type=\"stacked-bar\" labels=\"chip\" today=\"Aug\" x=\"month\" y=\"New,Returning\"\n data='[{\"month\":\"Mar\",\"New\":5,\"Returning\":3},{\"month\":\"Apr\",\"New\":6,\"Returning\":4},{\"month\":\"May\",\"New\":7,\"Returning\":4},{\"month\":\"Jun\",\"New\":6,\"Returning\":5},{\"month\":\"Jul\",\"New\":10,\"Returning\":6},{\"month\":\"Aug\",\"New\":12,\"Returning\":8,\"provisional\":true}]'>\n </chart-ui>\n </section>\n <section>\n <chart-legend-ui for=\"ne-stacked-bar\"></chart-legend-ui>\n </section>\n </card-ui>",
|
|
10
|
+
"source": "packages/web-components/patterns/new-enrollments/new-enrollments.examples.html",
|
|
11
|
+
"metadata": {
|
|
12
|
+
"domain": "dashboard",
|
|
13
|
+
"description": "New enrollments stacked-bar card — New vs Returning enrollments by month, the current month rendered with a soft tonal fill and dashed outline as a provisional/incomplete period, paired with a legend band naming both segments.",
|
|
14
|
+
"keywords": [
|
|
15
|
+
"new",
|
|
16
|
+
"enrollments",
|
|
17
|
+
"dashboard",
|
|
18
|
+
"card",
|
|
19
|
+
"stacked-bar",
|
|
20
|
+
"provisional",
|
|
21
|
+
"tonal",
|
|
22
|
+
"dashed",
|
|
23
|
+
"legend",
|
|
24
|
+
"today-marker",
|
|
25
|
+
"new",
|
|
26
|
+
"returning",
|
|
27
|
+
"analytics",
|
|
28
|
+
"chart"
|
|
29
|
+
]
|
|
30
|
+
},
|
|
31
|
+
"captured_at": "2026-08-21T16:42:15.756Z",
|
|
32
|
+
"template": [
|
|
33
|
+
{
|
|
34
|
+
"id": "text-2",
|
|
35
|
+
"component": "Text",
|
|
36
|
+
"variant": "heading",
|
|
37
|
+
"textContent": "New enrollments"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"id": "text",
|
|
41
|
+
"component": "Text",
|
|
42
|
+
"variant": "body",
|
|
43
|
+
"slot": "heading",
|
|
44
|
+
"children": [
|
|
45
|
+
"text-2"
|
|
46
|
+
]
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"id": "choice-picker",
|
|
50
|
+
"component": "ChoicePicker",
|
|
51
|
+
"size": "sm",
|
|
52
|
+
"value": "6m",
|
|
53
|
+
"variant": "ghost",
|
|
54
|
+
"options": [
|
|
55
|
+
{
|
|
56
|
+
"value": "6m",
|
|
57
|
+
"label": "Last 6 months"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"value": "3m",
|
|
61
|
+
"label": "Last 3 months"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"value": "1m",
|
|
65
|
+
"label": "Last month"
|
|
66
|
+
}
|
|
67
|
+
]
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"id": "card-options",
|
|
71
|
+
"component": "Button",
|
|
72
|
+
"aria-label": "Card options",
|
|
73
|
+
"icon": "dots-three-vertical",
|
|
74
|
+
"size": "sm",
|
|
75
|
+
"variant": "ghost"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"id": "row",
|
|
79
|
+
"component": "Row",
|
|
80
|
+
"slot": "action",
|
|
81
|
+
"align": "center",
|
|
82
|
+
"gap": "2",
|
|
83
|
+
"children": [
|
|
84
|
+
"choice-picker",
|
|
85
|
+
"card-options"
|
|
86
|
+
]
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"id": "header",
|
|
90
|
+
"component": "Header",
|
|
91
|
+
"children": [
|
|
92
|
+
"text",
|
|
93
|
+
"row"
|
|
94
|
+
]
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"id": "ne-stacked-bar",
|
|
98
|
+
"component": "Chart",
|
|
99
|
+
"type": "stacked-bar",
|
|
100
|
+
"data": [
|
|
101
|
+
{
|
|
102
|
+
"month": "Mar",
|
|
103
|
+
"New": 5,
|
|
104
|
+
"Returning": 3
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"month": "Apr",
|
|
108
|
+
"New": 6,
|
|
109
|
+
"Returning": 4
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"month": "May",
|
|
113
|
+
"New": 7,
|
|
114
|
+
"Returning": 4
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"month": "Jun",
|
|
118
|
+
"New": 6,
|
|
119
|
+
"Returning": 5
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"month": "Jul",
|
|
123
|
+
"New": 10,
|
|
124
|
+
"Returning": 6
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"month": "Aug",
|
|
128
|
+
"New": 12,
|
|
129
|
+
"Returning": 8,
|
|
130
|
+
"provisional": true
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
"labels": "chip",
|
|
134
|
+
"today": "Aug",
|
|
135
|
+
"x": "month",
|
|
136
|
+
"y": "New,Returning"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"id": "section",
|
|
140
|
+
"component": "Section",
|
|
141
|
+
"bleed": true,
|
|
142
|
+
"children": [
|
|
143
|
+
"ne-stacked-bar"
|
|
144
|
+
]
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"id": "chart-legend",
|
|
148
|
+
"component": "ChartLegend",
|
|
149
|
+
"for": "ne-stacked-bar"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"id": "section-2",
|
|
153
|
+
"component": "Section",
|
|
154
|
+
"children": [
|
|
155
|
+
"chart-legend"
|
|
156
|
+
]
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"id": "column",
|
|
160
|
+
"component": "Column",
|
|
161
|
+
"children": [
|
|
162
|
+
"section",
|
|
163
|
+
"section-2"
|
|
164
|
+
]
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"id": "section-3",
|
|
168
|
+
"component": "Section",
|
|
169
|
+
"children": [
|
|
170
|
+
"column"
|
|
171
|
+
]
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"id": "root",
|
|
175
|
+
"component": "Card",
|
|
176
|
+
"children": [
|
|
177
|
+
"header",
|
|
178
|
+
"section-3"
|
|
179
|
+
]
|
|
180
|
+
}
|
|
181
|
+
]
|
|
182
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "table-footer-client-mode",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "div",
|
|
5
|
+
"page": "/packages/web-components/components/table-footer/table-footer.examples.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-artifact-item": "",
|
|
10
|
+
"data-artifact-label": "client-mode — derives from a paginated table"
|
|
11
|
+
},
|
|
12
|
+
"html": "<col-ui gap=\"0\">\n <table-ui id=\"demo-footer-client\" paginate=\"4\" no-pager sortable></table-ui>\n <table-footer-ui for=\"demo-footer-client\"></table-footer-ui>\n </col-ui>",
|
|
13
|
+
"source": "packages/web-components/components/table-footer/table-footer.examples.html",
|
|
14
|
+
"metadata": {
|
|
15
|
+
"domain": "data",
|
|
16
|
+
"description": "Client-mode table footer with zero footer attributes set — derives page-size from the table's own paginate value and range-total from its filtered row count. The table's own internal pager is suppressed via no-pager.",
|
|
17
|
+
"keywords": [
|
|
18
|
+
"table",
|
|
19
|
+
"footer",
|
|
20
|
+
"pagination",
|
|
21
|
+
"client",
|
|
22
|
+
"mode",
|
|
23
|
+
"paginate",
|
|
24
|
+
"no-pager",
|
|
25
|
+
"derive",
|
|
26
|
+
"filtered",
|
|
27
|
+
"count",
|
|
28
|
+
"data",
|
|
29
|
+
"grid"
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
"captured_at": "2026-08-21T02:53:19.885Z",
|
|
33
|
+
"template": [
|
|
34
|
+
{
|
|
35
|
+
"id": "demo-footer-client",
|
|
36
|
+
"component": "Table",
|
|
37
|
+
"no-pager": true,
|
|
38
|
+
"paginate": 4,
|
|
39
|
+
"sortable": true
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"id": "table-footer",
|
|
43
|
+
"component": "TableFooter",
|
|
44
|
+
"for": "demo-footer-client"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"id": "root",
|
|
48
|
+
"component": "Column",
|
|
49
|
+
"gap": "0",
|
|
50
|
+
"children": [
|
|
51
|
+
"demo-footer-client",
|
|
52
|
+
"table-footer"
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "table-footer-count-only",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "div",
|
|
5
|
+
"page": "/packages/web-components/components/table-footer/table-footer.examples.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-artifact-item": "",
|
|
10
|
+
"data-artifact-label": "unknown page size — count-only label, no pager"
|
|
11
|
+
},
|
|
12
|
+
"html": "<table-footer-ui range-total=\"128\"></table-footer-ui>",
|
|
13
|
+
"source": "packages/web-components/components/table-footer/table-footer.examples.html",
|
|
14
|
+
"metadata": {
|
|
15
|
+
"domain": "data",
|
|
16
|
+
"description": "Table footer with page-size unset (the default) — renders a count-only label ('128 items') with no pager, since the derivation math needs a page size to produce a range window.",
|
|
17
|
+
"keywords": [
|
|
18
|
+
"table",
|
|
19
|
+
"footer",
|
|
20
|
+
"pagination",
|
|
21
|
+
"count",
|
|
22
|
+
"only",
|
|
23
|
+
"unknown",
|
|
24
|
+
"page",
|
|
25
|
+
"size",
|
|
26
|
+
"default",
|
|
27
|
+
"state",
|
|
28
|
+
"data",
|
|
29
|
+
"grid"
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
"captured_at": "2026-08-21T02:53:19.885Z",
|
|
33
|
+
"template": [
|
|
34
|
+
{
|
|
35
|
+
"id": "root",
|
|
36
|
+
"component": "TableFooter",
|
|
37
|
+
"range-total": 128
|
|
38
|
+
}
|
|
39
|
+
]
|
|
40
|
+
}
|