@zywave/zui-table 4.0.0-pre.1

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.
Files changed (58) hide show
  1. package/README.md +27 -0
  2. package/demo/index.html +435 -0
  3. package/dist/css/zui-table.fouc.css +1 -0
  4. package/dist/custom-elements.json +405 -0
  5. package/dist/index.d.ts +5 -0
  6. package/dist/index.js +6 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/zui-table-cell-css.d.ts +1 -0
  9. package/dist/zui-table-cell-css.js +3 -0
  10. package/dist/zui-table-cell-css.js.map +1 -0
  11. package/dist/zui-table-cell.d.ts +21 -0
  12. package/dist/zui-table-cell.js +43 -0
  13. package/dist/zui-table-cell.js.map +1 -0
  14. package/dist/zui-table-css.d.ts +1 -0
  15. package/dist/zui-table-css.js +3 -0
  16. package/dist/zui-table-css.js.map +1 -0
  17. package/dist/zui-table-footer-css.d.ts +1 -0
  18. package/dist/zui-table-footer-css.js +3 -0
  19. package/dist/zui-table-footer-css.js.map +1 -0
  20. package/dist/zui-table-footer.d.ts +17 -0
  21. package/dist/zui-table-footer.js +22 -0
  22. package/dist/zui-table-footer.js.map +1 -0
  23. package/dist/zui-table-row-css.d.ts +1 -0
  24. package/dist/zui-table-row-css.js +3 -0
  25. package/dist/zui-table-row-css.js.map +1 -0
  26. package/dist/zui-table-row.d.ts +31 -0
  27. package/dist/zui-table-row.js +52 -0
  28. package/dist/zui-table-row.js.map +1 -0
  29. package/dist/zui-table-topbar-css.d.ts +1 -0
  30. package/dist/zui-table-topbar-css.js +3 -0
  31. package/dist/zui-table-topbar-css.js.map +1 -0
  32. package/dist/zui-table-topbar.d.ts +17 -0
  33. package/dist/zui-table-topbar.js +24 -0
  34. package/dist/zui-table-topbar.js.map +1 -0
  35. package/dist/zui-table.d.ts +45 -0
  36. package/dist/zui-table.js +96 -0
  37. package/dist/zui-table.js.map +1 -0
  38. package/lab.html +467 -0
  39. package/package.json +37 -0
  40. package/src/css/zui-table.fouc.scss +137 -0
  41. package/src/index.ts +5 -0
  42. package/src/zui-table-cell-css.js +3 -0
  43. package/src/zui-table-cell.scss +5 -0
  44. package/src/zui-table-cell.ts +41 -0
  45. package/src/zui-table-css.js +3 -0
  46. package/src/zui-table-footer-css.js +3 -0
  47. package/src/zui-table-footer.scss +12 -0
  48. package/src/zui-table-footer.ts +30 -0
  49. package/src/zui-table-row-css.js +3 -0
  50. package/src/zui-table-row.scss +25 -0
  51. package/src/zui-table-row.ts +49 -0
  52. package/src/zui-table-topbar-css.js +3 -0
  53. package/src/zui-table-topbar.scss +40 -0
  54. package/src/zui-table-topbar.ts +32 -0
  55. package/src/zui-table.scss +39 -0
  56. package/src/zui-table.ts +93 -0
  57. package/test/zui-table.test.ts +129 -0
  58. package/tsconfig.build.json +10 -0
package/README.md ADDED
@@ -0,0 +1,27 @@
1
+ # zui-table
2
+
3
+ ## Installation
4
+
5
+ _npm_:
6
+
7
+ ```shell
8
+ > npm i --save @zywave/zui-table
9
+ ```
10
+
11
+ _yarn_:
12
+
13
+ ```shell
14
+ > yarn add @zywave/zui-table
15
+ ```
16
+
17
+ See [the documentation site](http://zui.zywave.com/) for more information.
18
+
19
+ ## Running locally
20
+
21
+ Be sure all dependencies for the monorepo have been installed (instructions at the [root CONTRIBUTING.md](./CONTRIBUTING.md))
22
+
23
+ Watch / Run Lab
24
+
25
+ ```shell
26
+ > yarn run watch
27
+ ```
package/demo/index.html ADDED
@@ -0,0 +1,435 @@
1
+ <link rel="stylesheet" href="../../../../node_modules/@zywave/zui-app-styles/dist/zui-app-styles.css" />
2
+ <link rel="stylesheet" href="../../../../node_modules/@zywave/zui-base-styles/dist/zui-base-styles.css" />
3
+
4
+ <script type="module" defer>
5
+ if (!customElements.get("zui-table")) {
6
+ import("../dist/index.js");
7
+ }
8
+ if (!customElements.get("zui-pager")) {
9
+ import("../../zui-pager/dist/index.js");
10
+ }
11
+ import("../../../../scripts/demo/demo.js");
12
+ </script>
13
+
14
+ <section component="zui-table" heading="Table with 5 columns">
15
+ <zui-table columns="5">
16
+ <zui-table-row>
17
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
18
+ <zui-table-cell>Old Duke</zui-table-cell>
19
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
20
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
21
+ <zui-table-cell>67 years old</zui-table-cell>
22
+ </zui-table-row>
23
+ <zui-table-row>
24
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
25
+ <zui-table-cell>Red Duke</zui-table-cell>
26
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
27
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
28
+ <zui-table-cell>51 years old</zui-table-cell>
29
+ </zui-table-row>
30
+ <zui-table-row>
31
+ <zui-table-cell>Paul Atreides</zui-table-cell>
32
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
33
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
34
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
35
+ <zui-table-cell>43 years old</zui-table-cell>
36
+ </zui-table-row>
37
+ <zui-table-row>
38
+ <zui-table-cell>Alia Atreides</zui-table-cell>
39
+ <zui-table-cell>Imperial Regent</zui-table-cell>
40
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
41
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
42
+ <zui-table-cell>28 years old</zui-table-cell>
43
+ </zui-table-row>
44
+ <zui-table-row>
45
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
46
+ <zui-table-cell>God Emperor</zui-table-cell>
47
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
48
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
49
+ <zui-table-cell>3,521 years old</zui-table-cell>
50
+ </zui-table-row>
51
+ </zui-table>
52
+ </section>
53
+
54
+ <section component="zui-table" heading="Table with row headers">
55
+ <zui-table columns="5">
56
+ <zui-table-row header>
57
+ <zui-table-cell>Name</zui-table-cell>
58
+ <zui-table-cell>Title</zui-table-cell>
59
+ <zui-table-cell>Born</zui-table-cell>
60
+ <zui-table-cell>Died</zui-table-cell>
61
+ <zui-table-cell>Age</zui-table-cell>
62
+ </zui-table-row>
63
+ <zui-table-row>
64
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
65
+ <zui-table-cell>Old Duke</zui-table-cell>
66
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
67
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
68
+ <zui-table-cell>67 years old</zui-table-cell>
69
+ </zui-table-row>
70
+ <zui-table-row>
71
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
72
+ <zui-table-cell>Red Duke</zui-table-cell>
73
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
74
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
75
+ <zui-table-cell>51 years old</zui-table-cell>
76
+ </zui-table-row>
77
+ <zui-table-row>
78
+ <zui-table-cell>Paul Atreides</zui-table-cell>
79
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
80
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
81
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
82
+ <zui-table-cell>43 years old</zui-table-cell>
83
+ </zui-table-row>
84
+ <zui-table-row>
85
+ <zui-table-cell>Alia Atreides</zui-table-cell>
86
+ <zui-table-cell>Imperial Regent</zui-table-cell>
87
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
88
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
89
+ <zui-table-cell>28 years old</zui-table-cell>
90
+ </zui-table-row>
91
+ <zui-table-row>
92
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
93
+ <zui-table-cell>God Emperor</zui-table-cell>
94
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
95
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
96
+ <zui-table-cell>3,521 years old</zui-table-cell>
97
+ </zui-table-row>
98
+ </zui-table>
99
+ </section>
100
+
101
+ <section component="zui-table" heading="Table with summary row">
102
+ <zui-table columns="5">
103
+ <zui-table-row header>
104
+ <zui-table-cell>Name</zui-table-cell>
105
+ <zui-table-cell>Title</zui-table-cell>
106
+ <zui-table-cell>Born</zui-table-cell>
107
+ <zui-table-cell>Died</zui-table-cell>
108
+ <zui-table-cell>Age</zui-table-cell>
109
+ </zui-table-row>
110
+ <zui-table-row>
111
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
112
+ <zui-table-cell>Old Duke</zui-table-cell>
113
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
114
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
115
+ <zui-table-cell>67 years old</zui-table-cell>
116
+ </zui-table-row>
117
+ <zui-table-row>
118
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
119
+ <zui-table-cell>Red Duke</zui-table-cell>
120
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
121
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
122
+ <zui-table-cell>51 years old</zui-table-cell>
123
+ </zui-table-row>
124
+ <zui-table-row>
125
+ <zui-table-cell>Paul Atreides</zui-table-cell>
126
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
127
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
128
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
129
+ <zui-table-cell>43 years old</zui-table-cell>
130
+ </zui-table-row>
131
+ <zui-table-row>
132
+ <zui-table-cell>Alia Atreides</zui-table-cell>
133
+ <zui-table-cell>Imperial Regent</zui-table-cell>
134
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
135
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
136
+ <zui-table-cell>28 years old</zui-table-cell>
137
+ </zui-table-row>
138
+ <zui-table-row>
139
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
140
+ <zui-table-cell>God Emperor</zui-table-cell>
141
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
142
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
143
+ <zui-table-cell>3,521 years old</zui-table-cell>
144
+ </zui-table-row>
145
+ <zui-table-row summary>
146
+ <zui-table-cell span="5" style="text-align: right;">
147
+ Average lifespan: 742 years
148
+ </zui-table-cell>
149
+ </zui-table-row>
150
+ </zui-table>
151
+ </section>
152
+
153
+ <section component="zui-table" heading="Table topbar with search and counter">
154
+ <zui-table columns="5">
155
+ <zui-table-topbar>
156
+ <zui-search placeholder="Search for a family member" no-submit></zui-search>
157
+ <div slot="counter">5 family members</div>
158
+ </zui-table-topbar>
159
+ <zui-table-row header>
160
+ <zui-table-cell>Name</zui-table-cell>
161
+ <zui-table-cell>Title</zui-table-cell>
162
+ <zui-table-cell>Born</zui-table-cell>
163
+ <zui-table-cell>Died</zui-table-cell>
164
+ <zui-table-cell>Age</zui-table-cell>
165
+ </zui-table-row>
166
+ <zui-table-row>
167
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
168
+ <zui-table-cell>Old Duke</zui-table-cell>
169
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
170
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
171
+ <zui-table-cell>67 years old</zui-table-cell>
172
+ </zui-table-row>
173
+ <zui-table-row>
174
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
175
+ <zui-table-cell>Red Duke</zui-table-cell>
176
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
177
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
178
+ <zui-table-cell>51 years old</zui-table-cell>
179
+ </zui-table-row>
180
+ <zui-table-row>
181
+ <zui-table-cell>Paul Atreides</zui-table-cell>
182
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
183
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
184
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
185
+ <zui-table-cell>43 years old</zui-table-cell>
186
+ </zui-table-row>
187
+ <zui-table-row>
188
+ <zui-table-cell>Alia Atreides</zui-table-cell>
189
+ <zui-table-cell>Imperial Regent</zui-table-cell>
190
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
191
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
192
+ <zui-table-cell>28 years old</zui-table-cell>
193
+ </zui-table-row>
194
+ <zui-table-row>
195
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
196
+ <zui-table-cell>God Emperor</zui-table-cell>
197
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
198
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
199
+ <zui-table-cell>3,521 years old</zui-table-cell>
200
+ </zui-table-row>
201
+ <zui-table-row summary>
202
+ <zui-table-cell span="5" style="text-align: right;">
203
+ Average lifespan: 742 years
204
+ </zui-table-cell>
205
+ </zui-table-row>
206
+ </zui-table>
207
+ </section>
208
+
209
+ <section component="zui-table" heading="Table topbar with search, counter, and actions">
210
+ <zui-table columns="5">
211
+ <zui-table-topbar>
212
+ <zui-search placeholder="Search for a family member" no-submit></zui-search>
213
+ <div slot="counter">5 family members</div>
214
+ <zui-button slot="action" class="secondary">Whisper</zui-button>
215
+ <zui-button slot="action">Add a family member</zui-button>
216
+ </zui-table-topbar>
217
+ <zui-table-row header>
218
+ <zui-table-cell>Name</zui-table-cell>
219
+ <zui-table-cell>Title</zui-table-cell>
220
+ <zui-table-cell>Born</zui-table-cell>
221
+ <zui-table-cell>Died</zui-table-cell>
222
+ <zui-table-cell>Age</zui-table-cell>
223
+ </zui-table-row>
224
+ <zui-table-row>
225
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
226
+ <zui-table-cell>Old Duke</zui-table-cell>
227
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
228
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
229
+ <zui-table-cell>67 years old</zui-table-cell>
230
+ </zui-table-row>
231
+ <zui-table-row>
232
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
233
+ <zui-table-cell>Red Duke</zui-table-cell>
234
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
235
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
236
+ <zui-table-cell>51 years old</zui-table-cell>
237
+ </zui-table-row>
238
+ <zui-table-row>
239
+ <zui-table-cell>Paul Atreides</zui-table-cell>
240
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
241
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
242
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
243
+ <zui-table-cell>43 years old</zui-table-cell>
244
+ </zui-table-row>
245
+ <zui-table-row>
246
+ <zui-table-cell>Alia Atreides</zui-table-cell>
247
+ <zui-table-cell>Imperial Regent</zui-table-cell>
248
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
249
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
250
+ <zui-table-cell>28 years old</zui-table-cell>
251
+ </zui-table-row>
252
+ <zui-table-row>
253
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
254
+ <zui-table-cell>God Emperor</zui-table-cell>
255
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
256
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
257
+ <zui-table-cell>3,521 years old</zui-table-cell>
258
+ </zui-table-row>
259
+ <zui-table-row summary>
260
+ <zui-table-cell span="5" style="text-align: right;">
261
+ Average lifespan: 742 years
262
+ </zui-table-cell>
263
+ </zui-table-row>
264
+ </zui-table>
265
+ </section>
266
+
267
+ <section component="zui-table" heading="Table with footer">
268
+ <zui-table columns="5">
269
+ <zui-table-topbar>
270
+ <zui-search placeholder="Search for a family member" no-submit></zui-search>
271
+ <div slot="counter">5 family members</div>
272
+ <zui-button slot="action" class="secondary">Whisper</zui-button>
273
+ <zui-button slot="action">Add a family member</zui-button>
274
+ </zui-table-topbar>
275
+ <zui-table-row header>
276
+ <zui-table-cell>Name</zui-table-cell>
277
+ <zui-table-cell>Title</zui-table-cell>
278
+ <zui-table-cell>Born</zui-table-cell>
279
+ <zui-table-cell>Died</zui-table-cell>
280
+ <zui-table-cell>Age</zui-table-cell>
281
+ </zui-table-row>
282
+ <zui-table-row>
283
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
284
+ <zui-table-cell>Old Duke</zui-table-cell>
285
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
286
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
287
+ <zui-table-cell>67 years old</zui-table-cell>
288
+ </zui-table-row>
289
+ <zui-table-row>
290
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
291
+ <zui-table-cell>Red Duke</zui-table-cell>
292
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
293
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
294
+ <zui-table-cell>51 years old</zui-table-cell>
295
+ </zui-table-row>
296
+ <zui-table-row>
297
+ <zui-table-cell>Paul Atreides</zui-table-cell>
298
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
299
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
300
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
301
+ <zui-table-cell>43 years old</zui-table-cell>
302
+ </zui-table-row>
303
+ <zui-table-row>
304
+ <zui-table-cell>Alia Atreides</zui-table-cell>
305
+ <zui-table-cell>Imperial Regent</zui-table-cell>
306
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
307
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
308
+ <zui-table-cell>28 years old</zui-table-cell>
309
+ </zui-table-row>
310
+ <zui-table-row>
311
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
312
+ <zui-table-cell>God Emperor</zui-table-cell>
313
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
314
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
315
+ <zui-table-cell>3,521 years old</zui-table-cell>
316
+ </zui-table-row>
317
+ <zui-table-row summary>
318
+ <zui-table-cell span="5" style="text-align: right;">
319
+ Average lifespan: 742 years
320
+ </zui-table-cell>
321
+ </zui-table-row>
322
+ <zui-table-footer>
323
+ <zui-pager current-page="1" total-pages="10"></zui-pager>
324
+ </zui-table-footer>
325
+ </zui-table>
326
+ </section>
327
+
328
+ <section component="zui-table" heading="No results table with simple custom message">
329
+ <zui-table columns="5" no-results>
330
+ <zui-table-topbar>
331
+ <zui-search placeholder="Search for a family member" value="Spongebob Squarepants" no-submit></zui-search>
332
+ <div slot="counter">0 family members</div>
333
+ <zui-button slot="action" class="secondary">Whisper</zui-button>
334
+ <zui-button slot="action">Add a family member</zui-button>
335
+ </zui-table-topbar>
336
+ <zui-table-row header>
337
+ <zui-table-cell>Name</zui-table-cell>
338
+ <zui-table-cell>Title</zui-table-cell>
339
+ <zui-table-cell>Born</zui-table-cell>
340
+ <zui-table-cell>Died</zui-table-cell>
341
+ <zui-table-cell>Age</zui-table-cell>
342
+ </zui-table-row>
343
+ <div slot="no-results-message" class="zui font-weight-semibold">No results found for "Spongebob Squarepants"</div>
344
+ <zui-table-footer>
345
+ <zui-pager current-page="1" total-pages="10"></zui-pager>
346
+ </zui-table-footer>
347
+ </zui-table>
348
+ </section>
349
+
350
+ <section component="zui-table" heading="No results table with elaborate custom message">
351
+ <zui-table columns="5" no-results>
352
+ <zui-table-topbar>
353
+ <zui-search placeholder="Search for a family member" value="Spongebob Squarepants" no-submit></zui-search>
354
+ <div slot="counter">0 family members</div>
355
+ <zui-button slot="action" class="secondary">Whisper</zui-button>
356
+ <zui-button slot="action">Add a family member</zui-button>
357
+ </zui-table-topbar>
358
+ <zui-table-row header>
359
+ <zui-table-cell>Name</zui-table-cell>
360
+ <zui-table-cell>Title</zui-table-cell>
361
+ <zui-table-cell>Born</zui-table-cell>
362
+ <zui-table-cell>Died</zui-table-cell>
363
+ <zui-table-cell>Age</zui-table-cell>
364
+ </zui-table-row>
365
+ <div slot="no-results-message" style="text-align: center;">
366
+ <div style="font-size: 2rem; margin-bottom: 0.5em;">¯\_(ツ)_/¯</div>
367
+ <p class="zui font-weight-semibold">No results for "Spongebob Squarepants"</p>
368
+ <p>Searching through all the Dune lore yielded no results.</p>
369
+ </div>
370
+ <zui-table-footer>
371
+ <zui-pager current-page="1" total-pages="10"></zui-pager>
372
+ </zui-table-footer>
373
+ </zui-table>
374
+ </section>
375
+
376
+ <section component="zui-table" heading="Table with banded rows">
377
+ <zui-table columns="5" banded>
378
+ <zui-table-topbar>
379
+ <zui-search placeholder="Search for a family member" no-submit></zui-search>
380
+ <div slot="counter">5 family members</div>
381
+ <zui-button slot="action" class="secondary">Whisper</zui-button>
382
+ <zui-button slot="action">Add a family member</zui-button>
383
+ </zui-table-topbar>
384
+ <zui-table-row header>
385
+ <zui-table-cell>Name</zui-table-cell>
386
+ <zui-table-cell>Title</zui-table-cell>
387
+ <zui-table-cell>Born</zui-table-cell>
388
+ <zui-table-cell>Died</zui-table-cell>
389
+ <zui-table-cell>Age</zui-table-cell>
390
+ </zui-table-row>
391
+ <zui-table-row>
392
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
393
+ <zui-table-cell>Old Duke</zui-table-cell>
394
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
395
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
396
+ <zui-table-cell>67 years old</zui-table-cell>
397
+ </zui-table-row>
398
+ <zui-table-row>
399
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
400
+ <zui-table-cell>Red Duke</zui-table-cell>
401
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
402
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
403
+ <zui-table-cell>51 years old</zui-table-cell>
404
+ </zui-table-row>
405
+ <zui-table-row>
406
+ <zui-table-cell>Paul Atreides</zui-table-cell>
407
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
408
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
409
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
410
+ <zui-table-cell>43 years old</zui-table-cell>
411
+ </zui-table-row>
412
+ <zui-table-row>
413
+ <zui-table-cell>Alia Atreides</zui-table-cell>
414
+ <zui-table-cell>Imperial Regent</zui-table-cell>
415
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
416
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
417
+ <zui-table-cell>28 years old</zui-table-cell>
418
+ </zui-table-row>
419
+ <zui-table-row>
420
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
421
+ <zui-table-cell>God Emperor</zui-table-cell>
422
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
423
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
424
+ <zui-table-cell>3,521 years old</zui-table-cell>
425
+ </zui-table-row>
426
+ <zui-table-row summary>
427
+ <zui-table-cell span="5" style="text-align: right;">
428
+ Average lifespan: 742 years
429
+ </zui-table-cell>
430
+ </zui-table-row>
431
+ <zui-table-footer>
432
+ <zui-pager current-page="1" total-pages="10"></zui-pager>
433
+ </zui-table-footer>
434
+ </zui-table>
435
+ </section>
package/dist/css/zui-table.fouc.css ADDED
@@ -0,0 +1 @@
1
+ zui-table:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:block;width:100%;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}zui-table:not(:defined) [slot=topbar]{display:flex;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}zui-table:not(:defined) [slot=footer]{margin-top:.625rem}zui-table:not(:defined) [slot=no-results-message]{display:none}zui-table:not(:defined) *,zui-table:not(:defined) *::before,zui-table:not(:defined) *::after{box-sizing:inherit}zui-table[banded]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[banded]:not(:defined) zui-table-row:not([header]):nth-child(even){background-color:var(--zui-gray-25)}zui-table[banded]:not(:defined) zui-table-row:not([header]){border:0}zui-table[banded]:not(:defined) *,zui-table[banded]:not(:defined) *::before,zui-table[banded]:not(:defined) *::after{box-sizing:inherit}zui-table[no-results]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[no-results]:not(:defined) [slot=no-results-message]{display:block;padding:.75rem 1.25rem}zui-table[no-results]:not(:defined) *,zui-table[no-results]:not(:defined) *::before,zui-table[no-results]:not(:defined) *::after{box-sizing:inherit}zui-table-topbar:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}zui-table-topbar:not(:defined) [slot=counter]{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}zui-table-topbar:not(:defined) [slot=action]{margin-left:.625rem}zui-table-topbar:not(:defined) [slot=action] zui-button:not(:first-of-type){margin-left:.625rem}zui-table-topbar:not(:defined) *,zui-table-topbar:not(:defined) *::before,zui-table-topbar:not(:defined) *::after{box-sizing:inherit}zui-table-row:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;background-color:#fff}zui-table-row:not(:defined) *,zui-table-row:not(:defined) *::before,zui-table-row:not(:defined) *::after{box-sizing:inherit}zui-table-row[header]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}zui-table-row[header]:not(:defined) zui-table-cell{font-weight:600}zui-table-row[header]:not(:defined) *,zui-table-row[header]:not(:defined) *::before,zui-table-row[header]:not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:1px solid var(--zui-gray-100)}zui-table-row:not([header]):not(:defined) *,zui-table-row:not([header]):not(:defined) *::before,zui-table-row:not([header]):not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):last-of-type:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:0}zui-table-row:not([header]):last-of-type:not(:defined) *,zui-table-row:not([header]):last-of-type:not(:defined) *::before,zui-table-row:not([header]):last-of-type:not(:defined) *::after{box-sizing:inherit}zui-table-row[summary]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}zui-table-row[summary]:not(:defined) zui-table-cell{font-weight:600;color:var(--zui-table-summary-text-color, #fff)}zui-table-row[summary]:not(:defined) *,zui-table-row[summary]:not(:defined) *::before,zui-table-row[summary]:not(:defined) *::after{box-sizing:inherit}zui-table-cell:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;flex-grow:1;flex-basis:0;padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}zui-table-cell:not(:defined) *,zui-table-cell:not(:defined) *::before,zui-table-cell:not(:defined) *::after{box-sizing:inherit}zui-table-footer:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin, 0.625rem)}zui-table-footer:not(:defined) zui-pager{width:100%}zui-table-footer:not(:defined) *,zui-table-footer:not(:defined) *::before,zui-table-footer:not(:defined) *::after{box-sizing:inherit}