@constela/ui 0.2.0 → 0.3.0

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 (41) hide show
  1. package/README.md +1 -1
  2. package/components/accordion/accordion-content.constela.json +20 -0
  3. package/components/accordion/accordion-item.constela.json +20 -0
  4. package/components/accordion/accordion-trigger.constela.json +21 -0
  5. package/components/accordion/accordion.constela.json +18 -0
  6. package/components/accordion/accordion.styles.json +54 -0
  7. package/components/accordion/accordion.test.ts +608 -0
  8. package/components/calendar/calendar.constela.json +195 -0
  9. package/components/calendar/calendar.styles.json +33 -0
  10. package/components/calendar/calendar.test.ts +458 -0
  11. package/components/chart/area-chart.constela.json +482 -0
  12. package/components/chart/bar-chart.constela.json +342 -0
  13. package/components/chart/chart-axis.constela.json +224 -0
  14. package/components/chart/chart-legend.constela.json +82 -0
  15. package/components/chart/chart-tooltip.constela.json +61 -0
  16. package/components/chart/chart.styles.json +183 -0
  17. package/components/chart/chart.test.ts +3260 -0
  18. package/components/chart/donut-chart.constela.json +369 -0
  19. package/components/chart/line-chart.constela.json +380 -0
  20. package/components/chart/pie-chart.constela.json +259 -0
  21. package/components/chart/radar-chart.constela.json +297 -0
  22. package/components/chart/scatter-chart.constela.json +300 -0
  23. package/components/data-table/data-table-cell.constela.json +22 -0
  24. package/components/data-table/data-table-header.constela.json +30 -0
  25. package/components/data-table/data-table-pagination.constela.json +19 -0
  26. package/components/data-table/data-table-row.constela.json +30 -0
  27. package/components/data-table/data-table.constela.json +32 -0
  28. package/components/data-table/data-table.styles.json +84 -0
  29. package/components/data-table/data-table.test.ts +873 -0
  30. package/components/datepicker/datepicker.constela.json +128 -0
  31. package/components/datepicker/datepicker.styles.json +47 -0
  32. package/components/datepicker/datepicker.test.ts +540 -0
  33. package/components/tree/tree-node.constela.json +26 -0
  34. package/components/tree/tree.constela.json +24 -0
  35. package/components/tree/tree.styles.json +50 -0
  36. package/components/tree/tree.test.ts +542 -0
  37. package/components/virtual-scroll/virtual-scroll.constela.json +27 -0
  38. package/components/virtual-scroll/virtual-scroll.styles.json +17 -0
  39. package/components/virtual-scroll/virtual-scroll.test.ts +345 -0
  40. package/dist/index.d.ts +1 -2
  41. package/package.json +3 -3
package/components/chart/radar-chart.constela.json ADDED
@@ -0,0 +1,297 @@
1
+ {
2
+ "params": {
3
+ "data": { "type": "list", "required": true },
4
+ "valueKey": { "type": "string", "required": true },
5
+ "labelKey": { "type": "string", "required": true },
6
+ "width": { "type": "number", "required": false },
7
+ "height": { "type": "number", "required": false },
8
+ "colors": { "type": "list", "required": false },
9
+ "maxValue": { "type": "number", "required": false },
10
+ "showGrid": { "type": "boolean", "required": false },
11
+ "fillOpacity": { "type": "number", "required": false }
12
+ },
13
+ "view": {
14
+ "kind": "element",
15
+ "tag": "svg",
16
+ "props": {
17
+ "role": { "expr": "lit", "value": "img" },
18
+ "aria-label": { "expr": "lit", "value": "Radar Chart" },
19
+ "aria-labelledby": { "expr": "lit", "value": "radar-chart-title" },
20
+ "viewBox": {
21
+ "expr": "call",
22
+ "target": null,
23
+ "method": "concat",
24
+ "args": [
25
+ { "expr": "lit", "value": "0 0 " },
26
+ {
27
+ "expr": "cond",
28
+ "test": { "expr": "param", "name": "width" },
29
+ "then": { "expr": "param", "name": "width" },
30
+ "else": { "expr": "lit", "value": 300 }
31
+ },
32
+ { "expr": "lit", "value": " " },
33
+ {
34
+ "expr": "cond",
35
+ "test": { "expr": "param", "name": "height" },
36
+ "then": { "expr": "param", "name": "height" },
37
+ "else": { "expr": "lit", "value": 300 }
38
+ }
39
+ ]
40
+ },
41
+ "className": {
42
+ "expr": "style",
43
+ "preset": "chartSvg",
44
+ "props": {
45
+ "size": { "expr": "lit", "value": "default" }
46
+ }
47
+ }
48
+ },
49
+ "children": [
50
+ {
51
+ "kind": "element",
52
+ "tag": "title",
53
+ "props": {
54
+ "id": { "expr": "lit", "value": "radar-chart-title" }
55
+ },
56
+ "children": [
57
+ { "kind": "text", "content": { "expr": "lit", "value": "Radar Chart" } }
58
+ ]
59
+ },
60
+ {
61
+ "kind": "if",
62
+ "test": { "expr": "param", "name": "showGrid" },
63
+ "then": {
64
+ "kind": "element",
65
+ "tag": "g",
66
+ "props": {
67
+ "className": {
68
+ "expr": "style",
69
+ "preset": "chartGrid",
70
+ "props": {
71
+ "axis": { "expr": "lit", "value": "both" }
72
+ }
73
+ }
74
+ },
75
+ "children": [
76
+ {
77
+ "kind": "each",
78
+ "items": {
79
+ "expr": "call",
80
+ "target": null,
81
+ "method": "getRadarAxes",
82
+ "args": [
83
+ {
84
+ "expr": "call",
85
+ "target": { "expr": "param", "name": "data" },
86
+ "method": "map",
87
+ "args": [
88
+ {
89
+ "expr": "lambda",
90
+ "params": ["item"],
91
+ "body": {
92
+ "expr": "get",
93
+ "obj": { "expr": "var", "name": "item" },
94
+ "key": { "expr": "param", "name": "labelKey" }
95
+ }
96
+ }
97
+ ]
98
+ },
99
+ {
100
+ "expr": "bin",
101
+ "op": "/",
102
+ "left": {
103
+ "expr": "cond",
104
+ "test": { "expr": "param", "name": "width" },
105
+ "then": { "expr": "param", "name": "width" },
106
+ "else": { "expr": "lit", "value": 300 }
107
+ },
108
+ "right": { "expr": "lit", "value": 2 }
109
+ },
110
+ {
111
+ "expr": "bin",
112
+ "op": "/",
113
+ "left": {
114
+ "expr": "cond",
115
+ "test": { "expr": "param", "name": "height" },
116
+ "then": { "expr": "param", "name": "height" },
117
+ "else": { "expr": "lit", "value": 300 }
118
+ },
119
+ "right": { "expr": "lit", "value": 2 }
120
+ },
121
+ {
122
+ "expr": "bin",
123
+ "op": "*",
124
+ "left": {
125
+ "expr": "bin",
126
+ "op": "/",
127
+ "left": {
128
+ "expr": "call",
129
+ "target": { "expr": "var", "name": "Math" },
130
+ "method": "min",
131
+ "args": [
132
+ {
133
+ "expr": "cond",
134
+ "test": { "expr": "param", "name": "width" },
135
+ "then": { "expr": "param", "name": "width" },
136
+ "else": { "expr": "lit", "value": 300 }
137
+ },
138
+ {
139
+ "expr": "cond",
140
+ "test": { "expr": "param", "name": "height" },
141
+ "then": { "expr": "param", "name": "height" },
142
+ "else": { "expr": "lit", "value": 300 }
143
+ }
144
+ ]
145
+ },
146
+ "right": { "expr": "lit", "value": 2 }
147
+ },
148
+ "right": { "expr": "lit", "value": 0.8 }
149
+ }
150
+ ]
151
+ },
152
+ "as": "axis",
153
+ "body": {
154
+ "kind": "element",
155
+ "tag": "line",
156
+ "props": {
157
+ "x1": { "expr": "get", "obj": { "expr": "var", "name": "axis" }, "key": "x1" },
158
+ "y1": { "expr": "get", "obj": { "expr": "var", "name": "axis" }, "key": "y1" },
159
+ "x2": { "expr": "get", "obj": { "expr": "var", "name": "axis" }, "key": "x2" },
160
+ "y2": { "expr": "get", "obj": { "expr": "var", "name": "axis" }, "key": "y2" }
161
+ }
162
+ }
163
+ }
164
+ ]
165
+ }
166
+ },
167
+ {
168
+ "kind": "element",
169
+ "tag": "polygon",
170
+ "props": {
171
+ "points": {
172
+ "expr": "call",
173
+ "target": {
174
+ "expr": "call",
175
+ "target": null,
176
+ "method": "getRadarPoints",
177
+ "args": [
178
+ { "expr": "param", "name": "data" },
179
+ { "expr": "param", "name": "valueKey" },
180
+ {
181
+ "expr": "bin",
182
+ "op": "/",
183
+ "left": {
184
+ "expr": "cond",
185
+ "test": { "expr": "param", "name": "width" },
186
+ "then": { "expr": "param", "name": "width" },
187
+ "else": { "expr": "lit", "value": 300 }
188
+ },
189
+ "right": { "expr": "lit", "value": 2 }
190
+ },
191
+ {
192
+ "expr": "bin",
193
+ "op": "/",
194
+ "left": {
195
+ "expr": "cond",
196
+ "test": { "expr": "param", "name": "height" },
197
+ "then": { "expr": "param", "name": "height" },
198
+ "else": { "expr": "lit", "value": 300 }
199
+ },
200
+ "right": { "expr": "lit", "value": 2 }
201
+ },
202
+ {
203
+ "expr": "bin",
204
+ "op": "*",
205
+ "left": {
206
+ "expr": "bin",
207
+ "op": "/",
208
+ "left": {
209
+ "expr": "call",
210
+ "target": { "expr": "var", "name": "Math" },
211
+ "method": "min",
212
+ "args": [
213
+ {
214
+ "expr": "cond",
215
+ "test": { "expr": "param", "name": "width" },
216
+ "then": { "expr": "param", "name": "width" },
217
+ "else": { "expr": "lit", "value": 300 }
218
+ },
219
+ {
220
+ "expr": "cond",
221
+ "test": { "expr": "param", "name": "height" },
222
+ "then": { "expr": "param", "name": "height" },
223
+ "else": { "expr": "lit", "value": 300 }
224
+ }
225
+ ]
226
+ },
227
+ "right": { "expr": "lit", "value": 2 }
228
+ },
229
+ "right": { "expr": "lit", "value": 0.8 }
230
+ },
231
+ {
232
+ "expr": "cond",
233
+ "test": { "expr": "param", "name": "maxValue" },
234
+ "then": { "expr": "param", "name": "maxValue" },
235
+ "else": { "expr": "lit", "value": 100 }
236
+ }
237
+ ]
238
+ },
239
+ "method": "map",
240
+ "args": [
241
+ {
242
+ "expr": "lambda",
243
+ "params": ["pt"],
244
+ "body": {
245
+ "expr": "call",
246
+ "target": null,
247
+ "method": "concat",
248
+ "args": [
249
+ { "expr": "get", "obj": { "expr": "var", "name": "pt" }, "key": "x" },
250
+ { "expr": "lit", "value": "," },
251
+ { "expr": "get", "obj": { "expr": "var", "name": "pt" }, "key": "y" }
252
+ ]
253
+ }
254
+ }
255
+ ]
256
+ },
257
+ "fill": {
258
+ "expr": "cond",
259
+ "test": { "expr": "param", "name": "colors" },
260
+ "then": {
261
+ "expr": "call",
262
+ "target": { "expr": "param", "name": "colors" },
263
+ "method": "at",
264
+ "args": [{ "expr": "lit", "value": 0 }]
265
+ },
266
+ "else": { "expr": "lit", "value": "#3b82f6" }
267
+ },
268
+ "fill-opacity": {
269
+ "expr": "cond",
270
+ "test": { "expr": "param", "name": "fillOpacity" },
271
+ "then": { "expr": "param", "name": "fillOpacity" },
272
+ "else": { "expr": "lit", "value": 0.3 }
273
+ },
274
+ "stroke": {
275
+ "expr": "cond",
276
+ "test": { "expr": "param", "name": "colors" },
277
+ "then": {
278
+ "expr": "call",
279
+ "target": { "expr": "param", "name": "colors" },
280
+ "method": "at",
281
+ "args": [{ "expr": "lit", "value": 0 }]
282
+ },
283
+ "else": { "expr": "lit", "value": "#3b82f6" }
284
+ },
285
+ "stroke-width": { "expr": "lit", "value": "2" },
286
+ "className": {
287
+ "expr": "style",
288
+ "preset": "chartRadar",
289
+ "props": {
290
+ "opacity": { "expr": "lit", "value": "default" }
291
+ }
292
+ }
293
+ }
294
+ }
295
+ ]
296
+ }
297
+ }
package/components/chart/scatter-chart.constela.json ADDED
@@ -0,0 +1,300 @@
1
+ {
2
+ "params": {
3
+ "data": { "type": "list", "required": true },
4
+ "xKey": { "type": "string", "required": true },
5
+ "yKey": { "type": "string", "required": true },
6
+ "width": { "type": "number", "required": false },
7
+ "height": { "type": "number", "required": false },
8
+ "colors": { "type": "list", "required": false },
9
+ "sizeKey": { "type": "string", "required": false },
10
+ "colorKey": { "type": "string", "required": false },
11
+ "pointRadius": { "type": "number", "required": false },
12
+ "showGrid": { "type": "boolean", "required": false },
13
+ "showLabels": { "type": "boolean", "required": false }
14
+ },
15
+ "view": {
16
+ "kind": "element",
17
+ "tag": "svg",
18
+ "props": {
19
+ "role": { "expr": "lit", "value": "img" },
20
+ "aria-label": { "expr": "lit", "value": "Scatter Chart" },
21
+ "aria-labelledby": { "expr": "lit", "value": "scatter-chart-title" },
22
+ "viewBox": {
23
+ "expr": "call",
24
+ "target": null,
25
+ "method": "concat",
26
+ "args": [
27
+ { "expr": "lit", "value": "0 0 " },
28
+ {
29
+ "expr": "cond",
30
+ "test": { "expr": "param", "name": "width" },
31
+ "then": { "expr": "param", "name": "width" },
32
+ "else": { "expr": "lit", "value": 400 }
33
+ },
34
+ { "expr": "lit", "value": " " },
35
+ {
36
+ "expr": "cond",
37
+ "test": { "expr": "param", "name": "height" },
38
+ "then": { "expr": "param", "name": "height" },
39
+ "else": { "expr": "lit", "value": 300 }
40
+ }
41
+ ]
42
+ },
43
+ "className": {
44
+ "expr": "style",
45
+ "preset": "chartSvg",
46
+ "props": {
47
+ "size": { "expr": "lit", "value": "default" }
48
+ }
49
+ }
50
+ },
51
+ "children": [
52
+ {
53
+ "kind": "element",
54
+ "tag": "title",
55
+ "props": {
56
+ "id": { "expr": "lit", "value": "scatter-chart-title" }
57
+ },
58
+ "children": [
59
+ { "kind": "text", "content": { "expr": "lit", "value": "Scatter Chart" } }
60
+ ]
61
+ },
62
+ {
63
+ "kind": "if",
64
+ "test": { "expr": "param", "name": "showGrid" },
65
+ "then": {
66
+ "kind": "element",
67
+ "tag": "g",
68
+ "props": {
69
+ "className": {
70
+ "expr": "style",
71
+ "preset": "chartGrid",
72
+ "props": {
73
+ "axis": { "expr": "lit", "value": "both" }
74
+ }
75
+ }
76
+ },
77
+ "children": [
78
+ {
79
+ "kind": "element",
80
+ "tag": "line",
81
+ "props": {
82
+ "x1": { "expr": "lit", "value": "40" },
83
+ "y1": { "expr": "lit", "value": "0" },
84
+ "x2": { "expr": "lit", "value": "40" },
85
+ "y2": {
86
+ "expr": "cond",
87
+ "test": { "expr": "param", "name": "height" },
88
+ "then": { "expr": "param", "name": "height" },
89
+ "else": { "expr": "lit", "value": 300 }
90
+ }
91
+ }
92
+ },
93
+ {
94
+ "kind": "element",
95
+ "tag": "line",
96
+ "props": {
97
+ "x1": { "expr": "lit", "value": "40" },
98
+ "y1": {
99
+ "expr": "bin",
100
+ "op": "-",
101
+ "left": {
102
+ "expr": "cond",
103
+ "test": { "expr": "param", "name": "height" },
104
+ "then": { "expr": "param", "name": "height" },
105
+ "else": { "expr": "lit", "value": 300 }
106
+ },
107
+ "right": { "expr": "lit", "value": 40 }
108
+ },
109
+ "x2": {
110
+ "expr": "cond",
111
+ "test": { "expr": "param", "name": "width" },
112
+ "then": { "expr": "param", "name": "width" },
113
+ "else": { "expr": "lit", "value": 400 }
114
+ },
115
+ "y2": {
116
+ "expr": "bin",
117
+ "op": "-",
118
+ "left": {
119
+ "expr": "cond",
120
+ "test": { "expr": "param", "name": "height" },
121
+ "then": { "expr": "param", "name": "height" },
122
+ "else": { "expr": "lit", "value": 300 }
123
+ },
124
+ "right": { "expr": "lit", "value": 40 }
125
+ }
126
+ }
127
+ }
128
+ ]
129
+ }
130
+ },
131
+ {
132
+ "kind": "element",
133
+ "tag": "g",
134
+ "props": {},
135
+ "children": [
136
+ {
137
+ "kind": "each",
138
+ "items": { "expr": "param", "name": "data" },
139
+ "as": "item",
140
+ "index": "idx",
141
+ "body": {
142
+ "kind": "element",
143
+ "tag": "circle",
144
+ "props": {
145
+ "cx": {
146
+ "expr": "bin",
147
+ "op": "+",
148
+ "left": { "expr": "lit", "value": 40 },
149
+ "right": {
150
+ "expr": "bin",
151
+ "op": "*",
152
+ "left": {
153
+ "expr": "get",
154
+ "obj": { "expr": "var", "name": "item" },
155
+ "key": { "expr": "param", "name": "xKey" }
156
+ },
157
+ "right": { "expr": "lit", "value": 3 }
158
+ }
159
+ },
160
+ "cy": {
161
+ "expr": "bin",
162
+ "op": "-",
163
+ "left": {
164
+ "expr": "bin",
165
+ "op": "-",
166
+ "left": {
167
+ "expr": "cond",
168
+ "test": { "expr": "param", "name": "height" },
169
+ "then": { "expr": "param", "name": "height" },
170
+ "else": { "expr": "lit", "value": 300 }
171
+ },
172
+ "right": { "expr": "lit", "value": 40 }
173
+ },
174
+ "right": {
175
+ "expr": "bin",
176
+ "op": "*",
177
+ "left": {
178
+ "expr": "get",
179
+ "obj": { "expr": "var", "name": "item" },
180
+ "key": { "expr": "param", "name": "yKey" }
181
+ },
182
+ "right": { "expr": "lit", "value": 2 }
183
+ }
184
+ },
185
+ "r": {
186
+ "expr": "cond",
187
+ "test": { "expr": "param", "name": "sizeKey" },
188
+ "then": {
189
+ "expr": "bin",
190
+ "op": "+",
191
+ "left": {
192
+ "expr": "cond",
193
+ "test": { "expr": "param", "name": "pointRadius" },
194
+ "then": { "expr": "param", "name": "pointRadius" },
195
+ "else": { "expr": "lit", "value": 4 }
196
+ },
197
+ "right": {
198
+ "expr": "get",
199
+ "obj": { "expr": "var", "name": "item" },
200
+ "key": { "expr": "param", "name": "sizeKey" }
201
+ }
202
+ },
203
+ "else": {
204
+ "expr": "cond",
205
+ "test": { "expr": "param", "name": "pointRadius" },
206
+ "then": { "expr": "param", "name": "pointRadius" },
207
+ "else": { "expr": "lit", "value": 4 }
208
+ }
209
+ },
210
+ "fill": {
211
+ "expr": "cond",
212
+ "test": { "expr": "param", "name": "colors" },
213
+ "then": {
214
+ "expr": "call",
215
+ "target": { "expr": "param", "name": "colors" },
216
+ "method": "at",
217
+ "args": [
218
+ {
219
+ "expr": "bin",
220
+ "op": "%",
221
+ "left": { "expr": "var", "name": "idx" },
222
+ "right": {
223
+ "expr": "call",
224
+ "target": { "expr": "param", "name": "colors" },
225
+ "method": "length",
226
+ "args": []
227
+ }
228
+ }
229
+ ]
230
+ },
231
+ "else": { "expr": "lit", "value": "#3b82f6" }
232
+ },
233
+ "tabindex": { "expr": "lit", "value": "0" },
234
+ "className": {
235
+ "expr": "style",
236
+ "preset": "chartPoint",
237
+ "props": {
238
+ "size": { "expr": "lit", "value": "default" },
239
+ "state": { "expr": "lit", "value": "default" }
240
+ }
241
+ }
242
+ }
243
+ }
244
+ }
245
+ ]
246
+ },
247
+ {
248
+ "kind": "if",
249
+ "test": { "expr": "param", "name": "showLabels" },
250
+ "then": {
251
+ "kind": "element",
252
+ "tag": "g",
253
+ "props": {
254
+ "className": {
255
+ "expr": "style",
256
+ "preset": "chartLabel",
257
+ "props": {
258
+ "type": { "expr": "lit", "value": "axis" }
259
+ }
260
+ }
261
+ },
262
+ "children": [
263
+ {
264
+ "kind": "element",
265
+ "tag": "text",
266
+ "props": {
267
+ "x": {
268
+ "expr": "bin",
269
+ "op": "/",
270
+ "left": {
271
+ "expr": "cond",
272
+ "test": { "expr": "param", "name": "width" },
273
+ "then": { "expr": "param", "name": "width" },
274
+ "else": { "expr": "lit", "value": 400 }
275
+ },
276
+ "right": { "expr": "lit", "value": 2 }
277
+ },
278
+ "y": {
279
+ "expr": "bin",
280
+ "op": "-",
281
+ "left": {
282
+ "expr": "cond",
283
+ "test": { "expr": "param", "name": "height" },
284
+ "then": { "expr": "param", "name": "height" },
285
+ "else": { "expr": "lit", "value": 300 }
286
+ },
287
+ "right": { "expr": "lit", "value": 10 }
288
+ },
289
+ "text-anchor": { "expr": "lit", "value": "middle" }
290
+ },
291
+ "children": [
292
+ { "kind": "text", "content": { "expr": "param", "name": "xKey" } }
293
+ ]
294
+ }
295
+ ]
296
+ }
297
+ }
298
+ ]
299
+ }
300
+ }
package/components/data-table/data-table-cell.constela.json ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "params": {
3
+ "value": { "type": "any", "required": true },
4
+ "column": { "type": "object", "required": true },
5
+ "align": { "type": "string", "required": false }
6
+ },
7
+ "view": {
8
+ "kind": "element",
9
+ "tag": "td",
10
+ "props": {
11
+ "role": { "expr": "lit", "value": "cell" },
12
+ "className": {
13
+ "expr": "style",
14
+ "preset": "dataTableCell",
15
+ "variants": {
16
+ "align": { "expr": "param", "name": "align" }
17
+ }
18
+ }
19
+ },
20
+ "children": [{ "kind": "slot" }]
21
+ }
22
+ }
package/components/data-table/data-table-header.constela.json ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "params": {
3
+ "column": { "type": "object", "required": true },
4
+ "sortable": { "type": "boolean", "required": false },
5
+ "sorted": { "type": "boolean", "required": false },
6
+ "sortDirection": { "type": "string", "required": false }
7
+ },
8
+ "view": {
9
+ "kind": "element",
10
+ "tag": "th",
11
+ "props": {
12
+ "role": { "expr": "lit", "value": "columnheader" },
13
+ "aria-sort": {
14
+ "expr": "cond",
15
+ "if": { "expr": "param", "name": "sorted" },
16
+ "then": { "expr": "param", "name": "sortDirection" },
17
+ "else": { "expr": "lit", "value": "none" }
18
+ },
19
+ "className": {
20
+ "expr": "style",
21
+ "preset": "dataTableHeaderCell",
22
+ "variants": {
23
+ "sortable": { "expr": "param", "name": "sortable" },
24
+ "align": { "expr": "get", "base": { "expr": "param", "name": "column" }, "path": "align" }
25
+ }
26
+ }
27
+ },
28
+ "children": [{ "kind": "slot" }]
29
+ }
30
+ }
package/components/data-table/data-table-pagination.constela.json ADDED
@@ -0,0 +1,19 @@
1
+ {
2
+ "params": {
3
+ "currentPage": { "type": "number", "required": true },
4
+ "totalPages": { "type": "number", "required": true },
5
+ "maxVisible": { "type": "number", "required": false }
6
+ },
7
+ "view": {
8
+ "kind": "element",
9
+ "tag": "nav",
10
+ "props": {
11
+ "aria-label": { "expr": "lit", "value": "Pagination" },
12
+ "className": {
13
+ "expr": "style",
14
+ "preset": "dataTablePagination"
15
+ }
16
+ },
17
+ "children": [{ "kind": "slot" }]
18
+ }
19
+ }