@almadar/std 13.5.0 → 13.6.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.
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "std-tabs",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "std-tabs as a
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"description": "std-tabs — embeddable tab-navigation atom. Drop into a layout\nmolecule to give the user a tabs strip that swaps which trait fills\nthe active tab's slot. Each tab points at a sibling trait via a\n@trait.X content reference; clicking a tab updates the atom's own\n@entity.activeTab and re-renders so only the matching trait's\noutput shows. Events remap at the call site (TAB_CHANGED -> Y) so\nthe host molecule can listen for routing, persistence, analytics.\n\nEach entry in `tabs` (all but `id` and `label` optional):\n- id string! stable tab id (used as activeTab key)\n- label string! visible tab text\n- icon string lucide icon name\n- badge string small badge in the tab strip (e.g. unread count)\n- content string @trait.X reference for the panel body. The host\n molecule binds a sibling trait there; only the\n active tab's content renders at any time. Omit\n to leave the panel empty.\n\nConfig:\n- tabs [TabSpec] = []\n- defaultTab string = '' id of the initial active tab.\n Falls back to tabs[0].id if blank.\n- variant default|pills|underline = default visual style\n- orientation horizontal|vertical = horizontal tab strip orientation\n\nCompiler statically unrolls array/map over @config.tabs so every\nTabSpec field is fully baked into the emitted props at codegen\ntime.",
|
|
5
5
|
"orbitals": [
|
|
6
6
|
{
|
|
7
|
-
"name": "
|
|
7
|
+
"name": "TabsItemOrbital",
|
|
8
8
|
"entity": {
|
|
9
|
-
"name": "
|
|
9
|
+
"name": "TabsItem",
|
|
10
10
|
"persistence": "runtime",
|
|
11
11
|
"fields": [
|
|
12
12
|
{
|
|
@@ -15,59 +15,56 @@
|
|
|
15
15
|
"required": true
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
|
-
"name": "
|
|
18
|
+
"name": "activeTab",
|
|
19
19
|
"type": "string",
|
|
20
|
-
"
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"name": "description",
|
|
24
|
-
"type": "string"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"name": "status",
|
|
28
|
-
"type": "string",
|
|
29
|
-
"default": "active",
|
|
30
|
-
"values": [
|
|
31
|
-
"active",
|
|
32
|
-
"inactive",
|
|
33
|
-
"pending"
|
|
34
|
-
]
|
|
20
|
+
"default": ""
|
|
35
21
|
},
|
|
36
22
|
{
|
|
37
|
-
"name": "
|
|
38
|
-
"type": "
|
|
23
|
+
"name": "items",
|
|
24
|
+
"type": "array",
|
|
25
|
+
"default": [],
|
|
26
|
+
"items": {
|
|
27
|
+
"type": "object",
|
|
28
|
+
"properties": {
|
|
29
|
+
"label": {
|
|
30
|
+
"name": "label",
|
|
31
|
+
"type": "string"
|
|
32
|
+
},
|
|
33
|
+
"icon": {
|
|
34
|
+
"name": "icon",
|
|
35
|
+
"type": "string"
|
|
36
|
+
},
|
|
37
|
+
"id": {
|
|
38
|
+
"name": "id",
|
|
39
|
+
"type": "string"
|
|
40
|
+
},
|
|
41
|
+
"content": {
|
|
42
|
+
"name": "content",
|
|
43
|
+
"type": "string"
|
|
44
|
+
},
|
|
45
|
+
"badge": {
|
|
46
|
+
"name": "badge",
|
|
47
|
+
"type": "string"
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
39
51
|
}
|
|
40
52
|
]
|
|
41
53
|
},
|
|
42
54
|
"traits": [
|
|
43
55
|
{
|
|
44
|
-
"name": "
|
|
56
|
+
"name": "TabsItemTabs",
|
|
45
57
|
"category": "interaction",
|
|
46
|
-
"linkedEntity": "
|
|
58
|
+
"linkedEntity": "TabsItem",
|
|
47
59
|
"emits": [
|
|
48
60
|
{
|
|
49
|
-
"event": "
|
|
50
|
-
"
|
|
51
|
-
"scope": "internal",
|
|
61
|
+
"event": "TAB_CHANGED",
|
|
62
|
+
"scope": "external",
|
|
52
63
|
"payloadSchema": [
|
|
53
64
|
{
|
|
54
|
-
"name": "
|
|
55
|
-
"type": "
|
|
56
|
-
|
|
57
|
-
]
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"event": "TabContentLoadFailed",
|
|
61
|
-
"description": "Fired when TabContent fails to load",
|
|
62
|
-
"scope": "internal",
|
|
63
|
-
"payloadSchema": [
|
|
64
|
-
{
|
|
65
|
-
"name": "error",
|
|
66
|
-
"type": "string"
|
|
67
|
-
},
|
|
68
|
-
{
|
|
69
|
-
"name": "code",
|
|
70
|
-
"type": "string"
|
|
65
|
+
"name": "tabId",
|
|
66
|
+
"type": "string",
|
|
67
|
+
"required": true
|
|
71
68
|
}
|
|
72
69
|
]
|
|
73
70
|
}
|
|
@@ -75,14 +72,8 @@
|
|
|
75
72
|
"stateMachine": {
|
|
76
73
|
"states": [
|
|
77
74
|
{
|
|
78
|
-
"name": "
|
|
75
|
+
"name": "idle",
|
|
79
76
|
"isInitial": true
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
"name": "idle"
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
"name": "error"
|
|
86
77
|
}
|
|
87
78
|
],
|
|
88
79
|
"events": [
|
|
@@ -91,35 +82,11 @@
|
|
|
91
82
|
"name": "Initialize"
|
|
92
83
|
},
|
|
93
84
|
{
|
|
94
|
-
"key": "
|
|
95
|
-
"name": "
|
|
85
|
+
"key": "TAB_CHANGED",
|
|
86
|
+
"name": "Tab Changed",
|
|
96
87
|
"payloadSchema": [
|
|
97
88
|
{
|
|
98
|
-
"name": "
|
|
99
|
-
"type": "[TabContent]"
|
|
100
|
-
}
|
|
101
|
-
]
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
"key": "TabContentLoadFailed",
|
|
105
|
-
"name": "TabContent load failed",
|
|
106
|
-
"payloadSchema": [
|
|
107
|
-
{
|
|
108
|
-
"name": "error",
|
|
109
|
-
"type": "string"
|
|
110
|
-
},
|
|
111
|
-
{
|
|
112
|
-
"name": "code",
|
|
113
|
-
"type": "string"
|
|
114
|
-
}
|
|
115
|
-
]
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
"key": "SELECT_TAB",
|
|
119
|
-
"name": "Select Tab",
|
|
120
|
-
"payloadSchema": [
|
|
121
|
-
{
|
|
122
|
-
"name": "tab",
|
|
89
|
+
"name": "tabId",
|
|
123
90
|
"type": "string",
|
|
124
91
|
"required": true
|
|
125
92
|
}
|
|
@@ -128,243 +95,92 @@
|
|
|
128
95
|
],
|
|
129
96
|
"transitions": [
|
|
130
97
|
{
|
|
131
|
-
"from": "
|
|
132
|
-
"to": "
|
|
98
|
+
"from": "idle",
|
|
99
|
+
"to": "idle",
|
|
133
100
|
"event": "INIT",
|
|
134
101
|
"effects": [
|
|
135
102
|
[
|
|
136
|
-
"
|
|
137
|
-
"
|
|
138
|
-
|
|
139
|
-
"emit": {
|
|
140
|
-
"failure": "TabContentLoadFailed",
|
|
141
|
-
"success": "TabContentLoaded"
|
|
142
|
-
}
|
|
143
|
-
}
|
|
103
|
+
"set",
|
|
104
|
+
"@entity.items",
|
|
105
|
+
"@config.tabs"
|
|
144
106
|
],
|
|
145
107
|
[
|
|
146
|
-
"
|
|
147
|
-
"
|
|
148
|
-
|
|
149
|
-
"direction": "vertical",
|
|
150
|
-
"align": "center",
|
|
151
|
-
"className": "py-12",
|
|
152
|
-
"children": [
|
|
153
|
-
{
|
|
154
|
-
"type": "spinner"
|
|
155
|
-
},
|
|
156
|
-
{
|
|
157
|
-
"variant": "caption",
|
|
158
|
-
"color": "muted",
|
|
159
|
-
"type": "typography",
|
|
160
|
-
"content": "Loading…"
|
|
161
|
-
}
|
|
162
|
-
],
|
|
163
|
-
"type": "stack",
|
|
164
|
-
"gap": "md"
|
|
165
|
-
}
|
|
166
|
-
]
|
|
167
|
-
]
|
|
168
|
-
},
|
|
169
|
-
{
|
|
170
|
-
"from": "loading",
|
|
171
|
-
"to": "idle",
|
|
172
|
-
"event": "TabContentLoaded",
|
|
173
|
-
"effects": [
|
|
174
|
-
[
|
|
175
|
-
"render-ui",
|
|
176
|
-
"main",
|
|
177
|
-
{
|
|
178
|
-
"type": "stack",
|
|
179
|
-
"direction": "vertical",
|
|
180
|
-
"children": [
|
|
181
|
-
{
|
|
182
|
-
"align": "center",
|
|
183
|
-
"children": [
|
|
184
|
-
{
|
|
185
|
-
"name": "layout-grid",
|
|
186
|
-
"type": "icon"
|
|
187
|
-
},
|
|
188
|
-
{
|
|
189
|
-
"type": "typography",
|
|
190
|
-
"content": "TabContents",
|
|
191
|
-
"variant": "h2"
|
|
192
|
-
}
|
|
193
|
-
],
|
|
194
|
-
"type": "stack",
|
|
195
|
-
"gap": "sm",
|
|
196
|
-
"direction": "horizontal"
|
|
197
|
-
},
|
|
198
|
-
{
|
|
199
|
-
"type": "divider"
|
|
200
|
-
},
|
|
201
|
-
{
|
|
202
|
-
"type": "tabs",
|
|
203
|
-
"onTabChange": "SELECT_TAB",
|
|
204
|
-
"defaultActiveTab": "name",
|
|
205
|
-
"tabs": [
|
|
206
|
-
{
|
|
207
|
-
"label": "Name",
|
|
208
|
-
"id": "name"
|
|
209
|
-
},
|
|
210
|
-
{
|
|
211
|
-
"label": "Description",
|
|
212
|
-
"id": "description"
|
|
213
|
-
},
|
|
214
|
-
{
|
|
215
|
-
"id": "status",
|
|
216
|
-
"label": "Status"
|
|
217
|
-
},
|
|
218
|
-
{
|
|
219
|
-
"label": "CreatedAt",
|
|
220
|
-
"id": "createdAt"
|
|
221
|
-
}
|
|
222
|
-
]
|
|
223
|
-
},
|
|
224
|
-
{
|
|
225
|
-
"type": "divider"
|
|
226
|
-
},
|
|
227
|
-
{
|
|
228
|
-
"className": "transition-shadow hover:shadow-md cursor-pointer",
|
|
229
|
-
"renderItem": [
|
|
230
|
-
"fn",
|
|
231
|
-
"item",
|
|
232
|
-
{
|
|
233
|
-
"direction": "vertical",
|
|
234
|
-
"gap": "sm",
|
|
235
|
-
"children": [
|
|
236
|
-
{
|
|
237
|
-
"type": "typography",
|
|
238
|
-
"variant": "h4",
|
|
239
|
-
"content": "@item.name"
|
|
240
|
-
},
|
|
241
|
-
{
|
|
242
|
-
"content": "@item.description",
|
|
243
|
-
"color": "muted",
|
|
244
|
-
"type": "typography",
|
|
245
|
-
"variant": "caption"
|
|
246
|
-
}
|
|
247
|
-
],
|
|
248
|
-
"type": "stack"
|
|
249
|
-
}
|
|
250
|
-
],
|
|
251
|
-
"fields": [],
|
|
252
|
-
"entity": "@payload.data",
|
|
253
|
-
"type": "data-grid"
|
|
254
|
-
}
|
|
255
|
-
],
|
|
256
|
-
"gap": "lg"
|
|
257
|
-
}
|
|
258
|
-
]
|
|
259
|
-
]
|
|
260
|
-
},
|
|
261
|
-
{
|
|
262
|
-
"from": "loading",
|
|
263
|
-
"to": "error",
|
|
264
|
-
"event": "TabContentLoadFailed",
|
|
265
|
-
"effects": [
|
|
266
|
-
[
|
|
267
|
-
"render-ui",
|
|
268
|
-
"main",
|
|
269
|
-
{
|
|
270
|
-
"align": "center",
|
|
271
|
-
"className": "py-12",
|
|
272
|
-
"children": [
|
|
273
|
-
{
|
|
274
|
-
"name": "alert-triangle",
|
|
275
|
-
"color": "destructive",
|
|
276
|
-
"type": "icon"
|
|
277
|
-
},
|
|
278
|
-
{
|
|
279
|
-
"type": "typography",
|
|
280
|
-
"variant": "h3",
|
|
281
|
-
"content": "Failed to load"
|
|
282
|
-
},
|
|
283
|
-
{
|
|
284
|
-
"type": "typography",
|
|
285
|
-
"content": "@payload.error",
|
|
286
|
-
"variant": "body",
|
|
287
|
-
"color": "muted"
|
|
288
|
-
},
|
|
289
|
-
{
|
|
290
|
-
"type": "button",
|
|
291
|
-
"variant": "primary",
|
|
292
|
-
"label": "Retry",
|
|
293
|
-
"action": "INIT",
|
|
294
|
-
"icon": "rotate-ccw"
|
|
295
|
-
}
|
|
296
|
-
],
|
|
297
|
-
"type": "stack",
|
|
298
|
-
"gap": "md",
|
|
299
|
-
"direction": "vertical"
|
|
300
|
-
}
|
|
301
|
-
]
|
|
302
|
-
]
|
|
303
|
-
},
|
|
304
|
-
{
|
|
305
|
-
"from": "idle",
|
|
306
|
-
"to": "loading",
|
|
307
|
-
"event": "SELECT_TAB",
|
|
308
|
-
"effects": [
|
|
309
|
-
[
|
|
310
|
-
"fetch",
|
|
311
|
-
"TabContent",
|
|
312
|
-
{
|
|
313
|
-
"emit": {
|
|
314
|
-
"failure": "TabContentLoadFailed",
|
|
315
|
-
"success": "TabContentLoaded"
|
|
316
|
-
}
|
|
317
|
-
}
|
|
108
|
+
"set",
|
|
109
|
+
"@entity.activeTab",
|
|
110
|
+
"@config.defaultTab"
|
|
318
111
|
],
|
|
319
112
|
[
|
|
320
113
|
"render-ui",
|
|
321
114
|
"main",
|
|
322
115
|
{
|
|
323
|
-
"
|
|
116
|
+
"tabChangeEvent": "TAB_CHANGED",
|
|
117
|
+
"type": "tabs",
|
|
118
|
+
"items": "@entity.items",
|
|
119
|
+
"variant": "@config.variant",
|
|
120
|
+
"orientation": "@config.orientation",
|
|
121
|
+
"activeTab": "@entity.activeTab"
|
|
324
122
|
}
|
|
325
123
|
]
|
|
326
124
|
]
|
|
327
125
|
},
|
|
328
126
|
{
|
|
329
|
-
"from": "
|
|
330
|
-
"to": "
|
|
331
|
-
"event": "
|
|
127
|
+
"from": "idle",
|
|
128
|
+
"to": "idle",
|
|
129
|
+
"event": "TAB_CHANGED",
|
|
332
130
|
"effects": [
|
|
333
131
|
[
|
|
334
|
-
"
|
|
335
|
-
"
|
|
336
|
-
|
|
337
|
-
"emit": {
|
|
338
|
-
"failure": "TabContentLoadFailed",
|
|
339
|
-
"success": "TabContentLoaded"
|
|
340
|
-
}
|
|
341
|
-
}
|
|
132
|
+
"set",
|
|
133
|
+
"@entity.activeTab",
|
|
134
|
+
"@payload.tabId"
|
|
342
135
|
],
|
|
343
136
|
[
|
|
344
137
|
"render-ui",
|
|
345
138
|
"main",
|
|
346
139
|
{
|
|
347
|
-
"
|
|
140
|
+
"items": "@entity.items",
|
|
141
|
+
"variant": "@config.variant",
|
|
142
|
+
"type": "tabs",
|
|
143
|
+
"orientation": "@config.orientation",
|
|
144
|
+
"tabChangeEvent": "TAB_CHANGED",
|
|
145
|
+
"activeTab": "@entity.activeTab"
|
|
348
146
|
}
|
|
349
147
|
]
|
|
350
148
|
]
|
|
351
149
|
}
|
|
352
150
|
]
|
|
353
151
|
},
|
|
354
|
-
"
|
|
152
|
+
"config": {
|
|
153
|
+
"variant": {
|
|
154
|
+
"type": "string",
|
|
155
|
+
"default": "default"
|
|
156
|
+
},
|
|
157
|
+
"tabs": {
|
|
158
|
+
"type": "[object]",
|
|
159
|
+
"default": []
|
|
160
|
+
},
|
|
161
|
+
"orientation": {
|
|
162
|
+
"type": "string",
|
|
163
|
+
"default": "horizontal"
|
|
164
|
+
},
|
|
165
|
+
"defaultTab": {
|
|
166
|
+
"type": "string",
|
|
167
|
+
"default": ""
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
"scope": "instance"
|
|
355
171
|
}
|
|
356
172
|
],
|
|
357
173
|
"pages": [
|
|
358
174
|
{
|
|
359
|
-
"name": "
|
|
360
|
-
"path": "/
|
|
175
|
+
"name": "TabsItemTabsPage",
|
|
176
|
+
"path": "/tabsitems",
|
|
361
177
|
"traits": [
|
|
362
178
|
{
|
|
363
|
-
"ref": "
|
|
179
|
+
"ref": "TabsItemTabs"
|
|
364
180
|
}
|
|
365
181
|
]
|
|
366
182
|
}
|
|
367
183
|
]
|
|
368
184
|
}
|
|
369
185
|
]
|
|
370
|
-
}
|
|
186
|
+
}
|