@wandelbots/wandelbots-js-react-components 2.52.0 → 2.53.0-pr.feature-tabbar-support-badges.398.51d2a73
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/components/TabBar.d.ts +11 -0
- package/dist/components/TabBar.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +860 -803
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/TabBar.tsx +74 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wandelbots/wandelbots-js-react-components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.53.0-pr.feature-tabbar-support-badges.398.51d2a73",
|
|
4
4
|
"description": "React UI toolkit for building applications on top of the Wandelbots platform",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -13,6 +13,24 @@ export interface TabItem {
|
|
|
13
13
|
content: React.ReactNode
|
|
14
14
|
/** Optional icon component to display with the tab */
|
|
15
15
|
icon?: React.ReactElement
|
|
16
|
+
/** Optional badge configuration */
|
|
17
|
+
badge?: {
|
|
18
|
+
/** Badge content (number or string) */
|
|
19
|
+
content: React.ReactNode
|
|
20
|
+
/** Badge color variant */
|
|
21
|
+
color?:
|
|
22
|
+
| "default"
|
|
23
|
+
| "primary"
|
|
24
|
+
| "secondary"
|
|
25
|
+
| "error"
|
|
26
|
+
| "info"
|
|
27
|
+
| "success"
|
|
28
|
+
| "warning"
|
|
29
|
+
/** Maximum number to display (e.g., 99+) */
|
|
30
|
+
max?: number
|
|
31
|
+
/** Show badge even when content is zero */
|
|
32
|
+
showZero?: boolean
|
|
33
|
+
}
|
|
16
34
|
}
|
|
17
35
|
|
|
18
36
|
export interface TabBarProps {
|
|
@@ -101,18 +119,36 @@ export const TabBar = externalizeComponent(
|
|
|
101
119
|
sx={{ height: "100%", display: "flex", flexDirection: "column", ...sx }}
|
|
102
120
|
>
|
|
103
121
|
{/* Tabs */}
|
|
104
|
-
<Box
|
|
122
|
+
<Box
|
|
123
|
+
sx={{
|
|
124
|
+
px: 0,
|
|
125
|
+
py: 0,
|
|
126
|
+
overflow: "visible",
|
|
127
|
+
paddingTop: "16px",
|
|
128
|
+
paddingRight: "20px",
|
|
129
|
+
}}
|
|
130
|
+
>
|
|
105
131
|
<Tabs
|
|
106
132
|
value={currentValue}
|
|
107
133
|
onChange={handleTabChange}
|
|
108
134
|
sx={{
|
|
109
135
|
minHeight: "32px",
|
|
110
136
|
backgroundColor: "transparent",
|
|
137
|
+
overflow: "visible",
|
|
111
138
|
"& .MuiTabs-indicator": {
|
|
112
139
|
display: "none", // Hide the default indicator
|
|
113
140
|
},
|
|
114
141
|
"& .MuiTabs-flexContainer": {
|
|
115
142
|
gap: 2,
|
|
143
|
+
overflow: "visible",
|
|
144
|
+
paddingTop: 0,
|
|
145
|
+
paddingBottom: 0,
|
|
146
|
+
},
|
|
147
|
+
"& .MuiTabs-scroller": {
|
|
148
|
+
overflow: "visible !important",
|
|
149
|
+
},
|
|
150
|
+
"& .MuiTab-root": {
|
|
151
|
+
overflow: "visible",
|
|
116
152
|
},
|
|
117
153
|
}}
|
|
118
154
|
>
|
|
@@ -134,6 +170,7 @@ export const TabBar = externalizeComponent(
|
|
|
134
170
|
opacity: currentValue === index ? 1 : 0.38,
|
|
135
171
|
fontSize: "13px",
|
|
136
172
|
transition: "all 0.2s ease-in-out",
|
|
173
|
+
position: "relative",
|
|
137
174
|
"&:hover": {
|
|
138
175
|
opacity: currentValue === index ? 1 : 0.6,
|
|
139
176
|
},
|
|
@@ -149,6 +186,41 @@ export const TabBar = externalizeComponent(
|
|
|
149
186
|
"&:active": {
|
|
150
187
|
transform: "none",
|
|
151
188
|
},
|
|
189
|
+
...(item.badge && {
|
|
190
|
+
"&::after": {
|
|
191
|
+
content: `"${item.badge.content}"`,
|
|
192
|
+
position: "absolute",
|
|
193
|
+
top: -6,
|
|
194
|
+
right: -8,
|
|
195
|
+
minWidth: "20px",
|
|
196
|
+
height: "20px",
|
|
197
|
+
borderRadius: "10px",
|
|
198
|
+
backgroundColor: (theme) => {
|
|
199
|
+
const colors = {
|
|
200
|
+
error: theme.palette.error.main,
|
|
201
|
+
info: theme.palette.info.main,
|
|
202
|
+
success: theme.palette.success.main,
|
|
203
|
+
warning: theme.palette.warning.main,
|
|
204
|
+
primary: theme.palette.primary.main,
|
|
205
|
+
secondary: theme.palette.secondary.main,
|
|
206
|
+
default: theme.palette.grey[500],
|
|
207
|
+
}
|
|
208
|
+
return (
|
|
209
|
+
colors[item.badge?.color || "error"] || colors.error
|
|
210
|
+
)
|
|
211
|
+
},
|
|
212
|
+
color: "white",
|
|
213
|
+
fontSize: "12px",
|
|
214
|
+
fontWeight: 600,
|
|
215
|
+
display: "flex",
|
|
216
|
+
alignItems: "center",
|
|
217
|
+
justifyContent: "center",
|
|
218
|
+
padding: "2px 6px",
|
|
219
|
+
zIndex: 1,
|
|
220
|
+
pointerEvents: "none",
|
|
221
|
+
boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
|
|
222
|
+
},
|
|
223
|
+
}),
|
|
152
224
|
}}
|
|
153
225
|
/>
|
|
154
226
|
))}
|
|
@@ -156,7 +228,7 @@ export const TabBar = externalizeComponent(
|
|
|
156
228
|
</Box>
|
|
157
229
|
|
|
158
230
|
{/* Border line */}
|
|
159
|
-
<Box sx={{ mt: "
|
|
231
|
+
<Box sx={{ mt: "16px", borderBottom: 1, borderColor: "divider" }} />
|
|
160
232
|
|
|
161
233
|
{/* Tab Content */}
|
|
162
234
|
<Box sx={{ flex: 1, overflow: "auto" }}>
|