@constela/ui 0.2.4 → 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.
- package/components/accordion/accordion-content.constela.json +20 -0
- package/components/accordion/accordion-item.constela.json +20 -0
- package/components/accordion/accordion-trigger.constela.json +21 -0
- package/components/accordion/accordion.constela.json +18 -0
- package/components/accordion/accordion.styles.json +54 -0
- package/components/accordion/accordion.test.ts +608 -0
- package/components/calendar/calendar.constela.json +195 -0
- package/components/calendar/calendar.styles.json +33 -0
- package/components/calendar/calendar.test.ts +458 -0
- package/components/chart/area-chart.constela.json +482 -0
- package/components/chart/bar-chart.constela.json +342 -0
- package/components/chart/chart-axis.constela.json +224 -0
- package/components/chart/chart-legend.constela.json +82 -0
- package/components/chart/chart-tooltip.constela.json +61 -0
- package/components/chart/chart.styles.json +183 -0
- package/components/chart/chart.test.ts +3260 -0
- package/components/chart/donut-chart.constela.json +369 -0
- package/components/chart/line-chart.constela.json +380 -0
- package/components/chart/pie-chart.constela.json +259 -0
- package/components/chart/radar-chart.constela.json +297 -0
- package/components/chart/scatter-chart.constela.json +300 -0
- package/components/data-table/data-table-cell.constela.json +22 -0
- package/components/data-table/data-table-header.constela.json +30 -0
- package/components/data-table/data-table-pagination.constela.json +19 -0
- package/components/data-table/data-table-row.constela.json +30 -0
- package/components/data-table/data-table.constela.json +32 -0
- package/components/data-table/data-table.styles.json +84 -0
- package/components/data-table/data-table.test.ts +873 -0
- package/components/datepicker/datepicker.constela.json +128 -0
- package/components/datepicker/datepicker.styles.json +47 -0
- package/components/datepicker/datepicker.test.ts +540 -0
- package/components/tree/tree-node.constela.json +26 -0
- package/components/tree/tree.constela.json +24 -0
- package/components/tree/tree.styles.json +50 -0
- package/components/tree/tree.test.ts +542 -0
- package/components/virtual-scroll/virtual-scroll.constela.json +27 -0
- package/components/virtual-scroll/virtual-scroll.styles.json +17 -0
- package/components/virtual-scroll/virtual-scroll.test.ts +345 -0
- package/package.json +2 -2
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
{
|
|
2
|
+
"params": {
|
|
3
|
+
"value": { "type": "string", "required": false },
|
|
4
|
+
"placeholder": { "type": "string", "required": false },
|
|
5
|
+
"format": { "type": "string", "required": false },
|
|
6
|
+
"min": { "type": "string", "required": false },
|
|
7
|
+
"max": { "type": "string", "required": false },
|
|
8
|
+
"disabled": { "type": "boolean", "required": false },
|
|
9
|
+
"required": { "type": "boolean", "required": false },
|
|
10
|
+
"name": { "type": "string", "required": false },
|
|
11
|
+
"id": { "type": "string", "required": false },
|
|
12
|
+
"locale": { "type": "string", "required": false }
|
|
13
|
+
},
|
|
14
|
+
"view": {
|
|
15
|
+
"kind": "element",
|
|
16
|
+
"tag": "div",
|
|
17
|
+
"props": {
|
|
18
|
+
"className": {
|
|
19
|
+
"expr": "style",
|
|
20
|
+
"preset": "datepickerStyles",
|
|
21
|
+
"props": {
|
|
22
|
+
"size": { "expr": "lit", "value": "default" }
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"aria-label": { "expr": "lit", "value": "Date picker" },
|
|
26
|
+
"aria-haspopup": { "expr": "lit", "value": "dialog" },
|
|
27
|
+
"aria-expanded": { "expr": "state", "name": "open" }
|
|
28
|
+
},
|
|
29
|
+
"children": [
|
|
30
|
+
{
|
|
31
|
+
"kind": "element",
|
|
32
|
+
"tag": "input",
|
|
33
|
+
"props": {
|
|
34
|
+
"type": { "expr": "lit", "value": "text" },
|
|
35
|
+
"readOnly": { "expr": "lit", "value": true },
|
|
36
|
+
"className": {
|
|
37
|
+
"expr": "style",
|
|
38
|
+
"preset": "datepickerInputStyles",
|
|
39
|
+
"props": {
|
|
40
|
+
"state": {
|
|
41
|
+
"expr": "cond",
|
|
42
|
+
"test": { "expr": "param", "name": "disabled" },
|
|
43
|
+
"then": { "expr": "lit", "value": "disabled" },
|
|
44
|
+
"else": { "expr": "lit", "value": "default" }
|
|
45
|
+
},
|
|
46
|
+
"size": { "expr": "lit", "value": "default" }
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
"placeholder": { "expr": "param", "name": "placeholder" },
|
|
50
|
+
"value": {
|
|
51
|
+
"expr": "call",
|
|
52
|
+
"fn": "formatDate",
|
|
53
|
+
"args": [
|
|
54
|
+
{ "expr": "param", "name": "value" },
|
|
55
|
+
{ "expr": "param", "name": "format" },
|
|
56
|
+
{ "expr": "param", "name": "locale" }
|
|
57
|
+
]
|
|
58
|
+
},
|
|
59
|
+
"disabled": { "expr": "param", "name": "disabled" },
|
|
60
|
+
"id": { "expr": "param", "name": "id" },
|
|
61
|
+
"aria-label": { "expr": "lit", "value": "Selected date" }
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"kind": "element",
|
|
66
|
+
"tag": "input",
|
|
67
|
+
"props": {
|
|
68
|
+
"type": { "expr": "lit", "value": "hidden" },
|
|
69
|
+
"name": { "expr": "param", "name": "name" },
|
|
70
|
+
"value": { "expr": "param", "name": "value" },
|
|
71
|
+
"required": { "expr": "param", "name": "required" }
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"kind": "element",
|
|
76
|
+
"tag": "span",
|
|
77
|
+
"props": {
|
|
78
|
+
"className": {
|
|
79
|
+
"expr": "style",
|
|
80
|
+
"preset": "datepickerIconStyles",
|
|
81
|
+
"props": {
|
|
82
|
+
"state": {
|
|
83
|
+
"expr": "cond",
|
|
84
|
+
"test": { "expr": "param", "name": "disabled" },
|
|
85
|
+
"then": { "expr": "lit", "value": "disabled" },
|
|
86
|
+
"else": { "expr": "lit", "value": "default" }
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
"aria-hidden": { "expr": "lit", "value": "true" }
|
|
91
|
+
},
|
|
92
|
+
"children": [
|
|
93
|
+
{
|
|
94
|
+
"kind": "text",
|
|
95
|
+
"content": { "expr": "lit", "value": "📅" }
|
|
96
|
+
}
|
|
97
|
+
]
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"kind": "if",
|
|
101
|
+
"test": { "expr": "state", "name": "open" },
|
|
102
|
+
"then": {
|
|
103
|
+
"kind": "component",
|
|
104
|
+
"name": "Popover",
|
|
105
|
+
"props": {
|
|
106
|
+
"open": { "expr": "state", "name": "open" },
|
|
107
|
+
"position": { "expr": "lit", "value": "bottom" }
|
|
108
|
+
},
|
|
109
|
+
"children": [
|
|
110
|
+
{
|
|
111
|
+
"kind": "component",
|
|
112
|
+
"name": "Calendar",
|
|
113
|
+
"props": {
|
|
114
|
+
"value": { "expr": "param", "name": "value" },
|
|
115
|
+
"year": { "expr": "state", "name": "currentYear" },
|
|
116
|
+
"month": { "expr": "state", "name": "currentMonth" },
|
|
117
|
+
"min": { "expr": "param", "name": "min" },
|
|
118
|
+
"max": { "expr": "param", "name": "max" },
|
|
119
|
+
"disabled": { "expr": "param", "name": "disabled" },
|
|
120
|
+
"locale": { "expr": "param", "name": "locale" }
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"datepickerStyles": {
|
|
3
|
+
"base": "relative inline-block w-full",
|
|
4
|
+
"variants": {
|
|
5
|
+
"size": {
|
|
6
|
+
"default": "w-64",
|
|
7
|
+
"sm": "w-48",
|
|
8
|
+
"lg": "w-80"
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
"defaultVariants": {
|
|
12
|
+
"size": "default"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"datepickerInputStyles": {
|
|
16
|
+
"base": "flex w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer",
|
|
17
|
+
"variants": {
|
|
18
|
+
"state": {
|
|
19
|
+
"default": "hover:border-primary",
|
|
20
|
+
"focused": "ring-2 ring-ring ring-offset-2 border-primary",
|
|
21
|
+
"disabled": "cursor-not-allowed opacity-50 bg-muted",
|
|
22
|
+
"error": "border-destructive focus-visible:ring-destructive"
|
|
23
|
+
},
|
|
24
|
+
"size": {
|
|
25
|
+
"default": "h-10",
|
|
26
|
+
"sm": "h-9 text-xs px-2 pr-8",
|
|
27
|
+
"lg": "h-11 text-base px-4 pr-12"
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
"defaultVariants": {
|
|
31
|
+
"state": "default",
|
|
32
|
+
"size": "default"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"datepickerIconStyles": {
|
|
36
|
+
"base": "absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-muted-foreground",
|
|
37
|
+
"variants": {
|
|
38
|
+
"state": {
|
|
39
|
+
"default": "hover:text-foreground",
|
|
40
|
+
"disabled": "cursor-not-allowed opacity-50"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"defaultVariants": {
|
|
44
|
+
"state": "default"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|