@shlomoa/openui-spec 0.1.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/LICENSE +201 -0
- package/README.md +45 -0
- package/dist/src/cli.d.ts +2 -0
- package/dist/src/cli.js +159 -0
- package/dist/src/index.d.ts +51 -0
- package/dist/src/index.js +260 -0
- package/package.json +41 -0
- package/spec/openui.json +1008 -0
- package/spec/openui.schema.json +54 -0
package/spec/openui.json
ADDED
|
@@ -0,0 +1,1008 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "root",
|
|
3
|
+
"type": "html",
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"attrs": {
|
|
6
|
+
"name": "OpenUI",
|
|
7
|
+
"description": "Technology-independent Web UI framework specification",
|
|
8
|
+
"scopeDocument": "README.md",
|
|
9
|
+
"status": "draft"
|
|
10
|
+
},
|
|
11
|
+
"children": [
|
|
12
|
+
{
|
|
13
|
+
"id": "scopes",
|
|
14
|
+
"type": "Scopes",
|
|
15
|
+
"attrs": {
|
|
16
|
+
"title": "Scopes",
|
|
17
|
+
"purpose": "The `scopes` folder is the hierarchical source for OpenUI scope objects. Each top-level folder is a scope, and each child object is either another scope folder or a snake_case `*.scope.md` leaf file. Shared vocabulary, aliases, and canonical meanings for terms such as object, element, control, widget, view, container, behavior, table, grid, and button are defined in the [spec glossary](../README.md#glossary). Scope files specialize those terms for concrete object contracts rather than redefining them. The [taxonomy mapping](taxonomy_mapping.md) maps entries from `docs/generic-ui-taxonomy.md` to these scope objects and records whether each entry is an existing object, alias, grouped leaf, or folder-level abstraction.",
|
|
18
|
+
"scopeDocument": "scopes/scope.md",
|
|
19
|
+
"status": "draft"
|
|
20
|
+
},
|
|
21
|
+
"children": [
|
|
22
|
+
{
|
|
23
|
+
"id": "application",
|
|
24
|
+
"type": "Application",
|
|
25
|
+
"attrs": {
|
|
26
|
+
"title": "Application",
|
|
27
|
+
"purpose": "Application defines the top-level bootstrap scope for an OpenUI application.\n\nApplication-level bootstrap artifacts are often framework-dependent. This scope captures the implementation-independent concepts and assets that a compliant application can describe before a target generator chooses a concrete framework shape.",
|
|
28
|
+
"scopeDocument": "scopes/Application/scope.md",
|
|
29
|
+
"status": "draft"
|
|
30
|
+
},
|
|
31
|
+
"children": [
|
|
32
|
+
{
|
|
33
|
+
"id": "routing",
|
|
34
|
+
"type": "Routing",
|
|
35
|
+
"attrs": {
|
|
36
|
+
"title": "Routing",
|
|
37
|
+
"purpose": "Routing defines how an application resolves navigation intents or locations to application content.",
|
|
38
|
+
"scopeDocument": "scopes/Application/routing.scope.md",
|
|
39
|
+
"status": "draft"
|
|
40
|
+
},
|
|
41
|
+
"children": [
|
|
42
|
+
{
|
|
43
|
+
"id": "routingInstance",
|
|
44
|
+
"type": "Routing",
|
|
45
|
+
"attrs": {
|
|
46
|
+
"[defaultRoute]": null
|
|
47
|
+
},
|
|
48
|
+
"children": [
|
|
49
|
+
{
|
|
50
|
+
"id": "routingRoute",
|
|
51
|
+
"type": "Route"
|
|
52
|
+
}
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"id": "navigation",
|
|
59
|
+
"type": "Navigation",
|
|
60
|
+
"attrs": {
|
|
61
|
+
"title": "Navigation",
|
|
62
|
+
"purpose": "Navigation defines user-facing structures that let users move between application routes, pages, views, and major work areas.",
|
|
63
|
+
"scopeDocument": "scopes/Application/navigation.scope.md",
|
|
64
|
+
"status": "draft"
|
|
65
|
+
},
|
|
66
|
+
"children": [
|
|
67
|
+
{
|
|
68
|
+
"id": "navigationInstance",
|
|
69
|
+
"type": "Navigation",
|
|
70
|
+
"attrs": {
|
|
71
|
+
"[ariaLabel]": null
|
|
72
|
+
},
|
|
73
|
+
"children": [
|
|
74
|
+
{
|
|
75
|
+
"id": "navigationItem",
|
|
76
|
+
"type": "NavItem"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"id": "navigationGroup",
|
|
80
|
+
"type": "NavGroup"
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
]
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"id": "toolBars",
|
|
88
|
+
"type": "ToolBars",
|
|
89
|
+
"attrs": {
|
|
90
|
+
"title": "Tool bars",
|
|
91
|
+
"purpose": "Tool bars define application-level command surfaces for frequently used actions.",
|
|
92
|
+
"scopeDocument": "scopes/Application/tool_bars.scope.md",
|
|
93
|
+
"status": "draft"
|
|
94
|
+
},
|
|
95
|
+
"children": [
|
|
96
|
+
{
|
|
97
|
+
"id": "toolBarsInstance",
|
|
98
|
+
"type": "ToolBar",
|
|
99
|
+
"children": [
|
|
100
|
+
{
|
|
101
|
+
"id": "toolBarsToolBarRow",
|
|
102
|
+
"type": "ToolBarRow"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"id": "toolBarsToolAction",
|
|
106
|
+
"type": "ToolAction"
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
]
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"id": "favicon",
|
|
114
|
+
"type": "Favicon",
|
|
115
|
+
"attrs": {
|
|
116
|
+
"title": "favicon.ico",
|
|
117
|
+
"purpose": "`favicon.ico` defines the application icon asset used for browser and shell identity.",
|
|
118
|
+
"scopeDocument": "scopes/Application/favicon.scope.md",
|
|
119
|
+
"status": "draft"
|
|
120
|
+
},
|
|
121
|
+
"children": [
|
|
122
|
+
{
|
|
123
|
+
"id": "faviconInstance",
|
|
124
|
+
"type": "link",
|
|
125
|
+
"attrs": {
|
|
126
|
+
"[rel]": null,
|
|
127
|
+
"[href]": null,
|
|
128
|
+
"[type]": null,
|
|
129
|
+
"[sizes]": null,
|
|
130
|
+
"[media]": null
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
]
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"id": "indexHtml",
|
|
137
|
+
"type": "IndexHtml",
|
|
138
|
+
"attrs": {
|
|
139
|
+
"title": "index.html",
|
|
140
|
+
"purpose": "`index.html` defines the application host document and static bootstrap metadata.",
|
|
141
|
+
"scopeDocument": "scopes/Application/index_html.scope.md",
|
|
142
|
+
"status": "draft"
|
|
143
|
+
},
|
|
144
|
+
"children": [
|
|
145
|
+
{
|
|
146
|
+
"id": "indexHtmlInstance",
|
|
147
|
+
"type": "html",
|
|
148
|
+
"attrs": {
|
|
149
|
+
"[lang]": null,
|
|
150
|
+
"[dir]": null
|
|
151
|
+
},
|
|
152
|
+
"children": [
|
|
153
|
+
{
|
|
154
|
+
"id": "indexHtmlDocumentHead",
|
|
155
|
+
"type": "head"
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"id": "indexHtmlDocumentBody",
|
|
159
|
+
"type": "body"
|
|
160
|
+
}
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
]
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"id": "behaviors",
|
|
169
|
+
"type": "Behaviors",
|
|
170
|
+
"attrs": {
|
|
171
|
+
"title": "Behaviors",
|
|
172
|
+
"purpose": "Behaviors define reusable interaction capabilities that can be applied to pages, views, containers, and widgets.",
|
|
173
|
+
"scopeDocument": "scopes/Behaviors/scope.md",
|
|
174
|
+
"status": "draft"
|
|
175
|
+
},
|
|
176
|
+
"children": [
|
|
177
|
+
{
|
|
178
|
+
"id": "dragAndDrop",
|
|
179
|
+
"type": "DragAndDrop",
|
|
180
|
+
"attrs": {
|
|
181
|
+
"title": "Drag and drop",
|
|
182
|
+
"purpose": "A behavior that moves elements within a page, view, container, or widget by dragging and dropping them.",
|
|
183
|
+
"scopeDocument": "scopes/Behaviors/drag_and_drop.scope.md",
|
|
184
|
+
"status": "draft"
|
|
185
|
+
},
|
|
186
|
+
"children": [
|
|
187
|
+
{
|
|
188
|
+
"id": "dragAndDropInstance",
|
|
189
|
+
"type": "DragAndDrop",
|
|
190
|
+
"children": [
|
|
191
|
+
{
|
|
192
|
+
"id": "dragAndDropTargetPage",
|
|
193
|
+
"type": "page"
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"id": "dragAndDropTargetView",
|
|
197
|
+
"type": "view"
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"id": "dragAndDropTargetContainer",
|
|
201
|
+
"type": "container"
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"id": "dragAndDropTargetWidget",
|
|
205
|
+
"type": "widget"
|
|
206
|
+
}
|
|
207
|
+
]
|
|
208
|
+
}
|
|
209
|
+
]
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"id": "resizable",
|
|
213
|
+
"type": "Resizable",
|
|
214
|
+
"attrs": {
|
|
215
|
+
"title": "Resizable",
|
|
216
|
+
"purpose": "A behavior that lets the user change the size of an element within a page or view.",
|
|
217
|
+
"scopeDocument": "scopes/Behaviors/resizable.scope.md",
|
|
218
|
+
"status": "draft"
|
|
219
|
+
},
|
|
220
|
+
"children": [
|
|
221
|
+
{
|
|
222
|
+
"id": "resizableInstance",
|
|
223
|
+
"type": "Resizable",
|
|
224
|
+
"children": [
|
|
225
|
+
{
|
|
226
|
+
"id": "resizableTargetPage",
|
|
227
|
+
"type": "page"
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
"id": "resizableTargetView",
|
|
231
|
+
"type": "view"
|
|
232
|
+
}
|
|
233
|
+
]
|
|
234
|
+
}
|
|
235
|
+
]
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"id": "collapsible",
|
|
239
|
+
"type": "Collapsible",
|
|
240
|
+
"attrs": {
|
|
241
|
+
"title": "Collapsible",
|
|
242
|
+
"purpose": "A behavior that lets the user collapse and expand elements within a page or view.",
|
|
243
|
+
"scopeDocument": "scopes/Behaviors/collapsible.scope.md",
|
|
244
|
+
"status": "draft"
|
|
245
|
+
},
|
|
246
|
+
"children": [
|
|
247
|
+
{
|
|
248
|
+
"id": "collapsibleInstance",
|
|
249
|
+
"type": "Collapsible",
|
|
250
|
+
"children": [
|
|
251
|
+
{
|
|
252
|
+
"id": "collapsibleTargetPage",
|
|
253
|
+
"type": "page"
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"id": "collapsibleTargetView",
|
|
257
|
+
"type": "view"
|
|
258
|
+
}
|
|
259
|
+
]
|
|
260
|
+
}
|
|
261
|
+
]
|
|
262
|
+
}
|
|
263
|
+
]
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
"id": "containers",
|
|
267
|
+
"type": "Containers",
|
|
268
|
+
"attrs": {
|
|
269
|
+
"title": "Containers",
|
|
270
|
+
"purpose": "Containers define layout structures that arrange child content in a specific layout or presentation pattern.",
|
|
271
|
+
"scopeDocument": "scopes/Containers/scope.md",
|
|
272
|
+
"status": "draft"
|
|
273
|
+
},
|
|
274
|
+
"children": [
|
|
275
|
+
{
|
|
276
|
+
"id": "grid",
|
|
277
|
+
"type": "Grid",
|
|
278
|
+
"attrs": {
|
|
279
|
+
"title": "Grid",
|
|
280
|
+
"purpose": "A layout container that arranges its child content in rows and columns.",
|
|
281
|
+
"scopeDocument": "scopes/Containers/grid.scope.md",
|
|
282
|
+
"status": "draft"
|
|
283
|
+
},
|
|
284
|
+
"children": [
|
|
285
|
+
{
|
|
286
|
+
"id": "gridInstance",
|
|
287
|
+
"type": "Grid",
|
|
288
|
+
"children": [
|
|
289
|
+
{
|
|
290
|
+
"id": "gridItem",
|
|
291
|
+
"type": "section"
|
|
292
|
+
}
|
|
293
|
+
]
|
|
294
|
+
}
|
|
295
|
+
]
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"id": "expandablePanels",
|
|
299
|
+
"type": "ExpandablePanels",
|
|
300
|
+
"attrs": {
|
|
301
|
+
"title": "Expandable panels",
|
|
302
|
+
"purpose": "A container that expands or collapses to show or hide its content.",
|
|
303
|
+
"scopeDocument": "scopes/Containers/expandable_panels.scope.md",
|
|
304
|
+
"status": "draft"
|
|
305
|
+
},
|
|
306
|
+
"children": [
|
|
307
|
+
{
|
|
308
|
+
"id": "expandablePanelsInstance",
|
|
309
|
+
"type": "details",
|
|
310
|
+
"attrs": {
|
|
311
|
+
"(expand)": null,
|
|
312
|
+
"(collapse)": null
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
]
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
"id": "tabs",
|
|
319
|
+
"type": "Tabs",
|
|
320
|
+
"attrs": {
|
|
321
|
+
"title": "Tabs",
|
|
322
|
+
"purpose": "A tabbed container that switches between views or content regions.",
|
|
323
|
+
"scopeDocument": "scopes/Containers/tabs.scope.md",
|
|
324
|
+
"status": "draft"
|
|
325
|
+
},
|
|
326
|
+
"children": [
|
|
327
|
+
{
|
|
328
|
+
"id": "tabsInstance",
|
|
329
|
+
"type": "Tabs",
|
|
330
|
+
"children": [
|
|
331
|
+
{
|
|
332
|
+
"id": "tabsTab",
|
|
333
|
+
"type": "tab"
|
|
334
|
+
}
|
|
335
|
+
]
|
|
336
|
+
}
|
|
337
|
+
]
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"id": "surfaceContainers",
|
|
341
|
+
"type": "SurfaceContainers",
|
|
342
|
+
"attrs": {
|
|
343
|
+
"title": "Surface containers",
|
|
344
|
+
"purpose": "Surface containers cover windows, screens, views, panels, cards, and toolbar surfaces when they are modeled as visual regions that hold related content or controls.",
|
|
345
|
+
"scopeDocument": "scopes/Containers/surface_containers.scope.md",
|
|
346
|
+
"status": "draft"
|
|
347
|
+
},
|
|
348
|
+
"children": [
|
|
349
|
+
{
|
|
350
|
+
"id": "surfaceContainersInstance",
|
|
351
|
+
"type": "SurfaceContainers"
|
|
352
|
+
}
|
|
353
|
+
]
|
|
354
|
+
},
|
|
355
|
+
{
|
|
356
|
+
"id": "sheetContainers",
|
|
357
|
+
"type": "SheetContainers",
|
|
358
|
+
"attrs": {
|
|
359
|
+
"title": "Sheet containers",
|
|
360
|
+
"purpose": "Sheet containers cover sidebars, sheets, side sheets, and bottom sheets that reveal supplemental content from an edge or layered surface.",
|
|
361
|
+
"scopeDocument": "scopes/Containers/sheet_containers.scope.md",
|
|
362
|
+
"status": "draft"
|
|
363
|
+
},
|
|
364
|
+
"children": [
|
|
365
|
+
{
|
|
366
|
+
"id": "sheetContainersInstance",
|
|
367
|
+
"type": "SheetContainers"
|
|
368
|
+
}
|
|
369
|
+
]
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"id": "overlayContainers",
|
|
373
|
+
"type": "OverlayContainers",
|
|
374
|
+
"attrs": {
|
|
375
|
+
"title": "Overlay containers",
|
|
376
|
+
"purpose": "Overlay containers cover popovers and modal overlays that layer content above the current surface without necessarily becoming a full dialog widget.",
|
|
377
|
+
"scopeDocument": "scopes/Containers/overlay_containers.scope.md",
|
|
378
|
+
"status": "draft"
|
|
379
|
+
},
|
|
380
|
+
"children": [
|
|
381
|
+
{
|
|
382
|
+
"id": "overlayContainersInstance",
|
|
383
|
+
"type": "OverlayContainers"
|
|
384
|
+
}
|
|
385
|
+
]
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"id": "structuralContainers",
|
|
389
|
+
"type": "StructuralContainers",
|
|
390
|
+
"attrs": {
|
|
391
|
+
"title": "Structural containers",
|
|
392
|
+
"purpose": "Structural containers cover panes, rails, stacks, scaffolds, and regions that organize page or view content without prescribing a concrete layout engine.",
|
|
393
|
+
"scopeDocument": "scopes/Containers/structural_containers.scope.md",
|
|
394
|
+
"status": "draft"
|
|
395
|
+
},
|
|
396
|
+
"children": [
|
|
397
|
+
{
|
|
398
|
+
"id": "structuralContainersInstance",
|
|
399
|
+
"type": "StructuralContainers"
|
|
400
|
+
}
|
|
401
|
+
]
|
|
402
|
+
},
|
|
403
|
+
{
|
|
404
|
+
"id": "splitters",
|
|
405
|
+
"type": "Splitters",
|
|
406
|
+
"attrs": {
|
|
407
|
+
"title": "Splitters",
|
|
408
|
+
"purpose": "Splitters cover movable dividers between panes or regions that let users adjust the relative size of adjacent containers.",
|
|
409
|
+
"scopeDocument": "scopes/Containers/splitters.scope.md",
|
|
410
|
+
"status": "draft"
|
|
411
|
+
},
|
|
412
|
+
"children": [
|
|
413
|
+
{
|
|
414
|
+
"id": "splittersInstance",
|
|
415
|
+
"type": "Splitters"
|
|
416
|
+
}
|
|
417
|
+
]
|
|
418
|
+
}
|
|
419
|
+
]
|
|
420
|
+
},
|
|
421
|
+
{
|
|
422
|
+
"id": "controls",
|
|
423
|
+
"type": "Controls",
|
|
424
|
+
"attrs": {
|
|
425
|
+
"title": "Controls",
|
|
426
|
+
"purpose": "Controls define reusable interaction and rendering primitives that can appear in applications, pages, views, containers, and widgets.",
|
|
427
|
+
"scopeDocument": "scopes/Controls/scope.md",
|
|
428
|
+
"status": "draft"
|
|
429
|
+
},
|
|
430
|
+
"children": [
|
|
431
|
+
{
|
|
432
|
+
"id": "native",
|
|
433
|
+
"type": "Native",
|
|
434
|
+
"attrs": {
|
|
435
|
+
"title": "Native",
|
|
436
|
+
"purpose": "A standard browser, framework, or runtime presentation and input capability that supports the user interface without requiring a custom OpenUI control definition.",
|
|
437
|
+
"scopeDocument": "scopes/Controls/native.scope.md",
|
|
438
|
+
"status": "draft"
|
|
439
|
+
},
|
|
440
|
+
"children": [
|
|
441
|
+
{
|
|
442
|
+
"id": "nativeInstance",
|
|
443
|
+
"type": "input",
|
|
444
|
+
"attrs": {
|
|
445
|
+
"[type]": null,
|
|
446
|
+
"[value]": null,
|
|
447
|
+
"[placeholder]": null,
|
|
448
|
+
"[disabled]": null
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
]
|
|
452
|
+
},
|
|
453
|
+
{
|
|
454
|
+
"id": "actionControls",
|
|
455
|
+
"type": "ActionControls",
|
|
456
|
+
"attrs": {
|
|
457
|
+
"title": "Action controls",
|
|
458
|
+
"purpose": "Action controls cover controls that trigger commands or state transitions, including button and icon button aliases when they are not modeled as a more specific widget.",
|
|
459
|
+
"scopeDocument": "scopes/Controls/action_controls.scope.md",
|
|
460
|
+
"status": "draft"
|
|
461
|
+
},
|
|
462
|
+
"children": [
|
|
463
|
+
{
|
|
464
|
+
"id": "actionControlsInstance",
|
|
465
|
+
"type": "ActionControls"
|
|
466
|
+
}
|
|
467
|
+
]
|
|
468
|
+
},
|
|
469
|
+
{
|
|
470
|
+
"id": "textInputs",
|
|
471
|
+
"type": "TextInputs",
|
|
472
|
+
"attrs": {
|
|
473
|
+
"title": "Text inputs",
|
|
474
|
+
"purpose": "Text inputs cover single-line, multi-line, password, and search entry controls that accept textual user input.",
|
|
475
|
+
"scopeDocument": "scopes/Controls/text_inputs.scope.md",
|
|
476
|
+
"status": "draft"
|
|
477
|
+
},
|
|
478
|
+
"children": [
|
|
479
|
+
{
|
|
480
|
+
"id": "textInputsInstance",
|
|
481
|
+
"type": "TextInputs"
|
|
482
|
+
}
|
|
483
|
+
]
|
|
484
|
+
},
|
|
485
|
+
{
|
|
486
|
+
"id": "choiceControls",
|
|
487
|
+
"type": "ChoiceControls",
|
|
488
|
+
"attrs": {
|
|
489
|
+
"title": "Choice controls",
|
|
490
|
+
"purpose": "Choice controls cover checkboxes, radio buttons, switches, toggles, dropdowns, list boxes, and combo boxes that let users select one or more values.",
|
|
491
|
+
"scopeDocument": "scopes/Controls/choice_controls.scope.md",
|
|
492
|
+
"status": "draft"
|
|
493
|
+
},
|
|
494
|
+
"children": [
|
|
495
|
+
{
|
|
496
|
+
"id": "choiceControlsInstance",
|
|
497
|
+
"type": "ChoiceControls"
|
|
498
|
+
}
|
|
499
|
+
]
|
|
500
|
+
},
|
|
501
|
+
{
|
|
502
|
+
"id": "pickerControl",
|
|
503
|
+
"type": "PickerControl",
|
|
504
|
+
"attrs": {
|
|
505
|
+
"title": "Picker control",
|
|
506
|
+
"purpose": "A picker control covers specialized selection affordances such as wheel picker, color picker, and file picker. Date and time picker aliases map to the existing Date/Time pickers widget when calendar semantics are required.",
|
|
507
|
+
"scopeDocument": "scopes/Controls/picker_control.scope.md",
|
|
508
|
+
"status": "draft"
|
|
509
|
+
},
|
|
510
|
+
"children": [
|
|
511
|
+
{
|
|
512
|
+
"id": "pickerControlInstance",
|
|
513
|
+
"type": "PickerControl"
|
|
514
|
+
}
|
|
515
|
+
]
|
|
516
|
+
},
|
|
517
|
+
{
|
|
518
|
+
"id": "rangeControl",
|
|
519
|
+
"type": "RangeControl",
|
|
520
|
+
"attrs": {
|
|
521
|
+
"title": "Range control",
|
|
522
|
+
"purpose": "A range control covers sliders, spin boxes, stepper inputs, and rating controls that select or present a value within a bounded or discrete range.",
|
|
523
|
+
"scopeDocument": "scopes/Controls/range_control.scope.md",
|
|
524
|
+
"status": "draft"
|
|
525
|
+
},
|
|
526
|
+
"children": [
|
|
527
|
+
{
|
|
528
|
+
"id": "rangeControlInstance",
|
|
529
|
+
"type": "RangeControl"
|
|
530
|
+
}
|
|
531
|
+
]
|
|
532
|
+
},
|
|
533
|
+
{
|
|
534
|
+
"id": "drawingAndCapture",
|
|
535
|
+
"type": "DrawingAndCapture",
|
|
536
|
+
"attrs": {
|
|
537
|
+
"title": "Drawing and capture controls",
|
|
538
|
+
"purpose": "Drawing and capture controls cover canvas or drawing areas, microphone input, and biometric prompts that collect non-text user input.",
|
|
539
|
+
"scopeDocument": "scopes/Controls/drawing_and_capture.scope.md",
|
|
540
|
+
"status": "draft"
|
|
541
|
+
},
|
|
542
|
+
"children": [
|
|
543
|
+
{
|
|
544
|
+
"id": "drawingAndCaptureInstance",
|
|
545
|
+
"type": "DrawingAndCapture"
|
|
546
|
+
}
|
|
547
|
+
]
|
|
548
|
+
},
|
|
549
|
+
{
|
|
550
|
+
"id": "displayPrimitives",
|
|
551
|
+
"type": "DisplayPrimitives",
|
|
552
|
+
"attrs": {
|
|
553
|
+
"title": "Display primitives",
|
|
554
|
+
"purpose": "Display primitives cover labels, text, images, icons, avatars, and separators or dividers that render content without owning a complex interaction model.",
|
|
555
|
+
"scopeDocument": "scopes/Controls/display_primitives.scope.md",
|
|
556
|
+
"status": "draft"
|
|
557
|
+
},
|
|
558
|
+
"children": [
|
|
559
|
+
{
|
|
560
|
+
"id": "displayPrimitivesInstance",
|
|
561
|
+
"type": "DisplayPrimitives"
|
|
562
|
+
}
|
|
563
|
+
]
|
|
564
|
+
},
|
|
565
|
+
{
|
|
566
|
+
"id": "statusIndicator",
|
|
567
|
+
"type": "StatusIndicator",
|
|
568
|
+
"attrs": {
|
|
569
|
+
"title": "Status indicator",
|
|
570
|
+
"purpose": "A status indicator covers status bars, tags, badges, progress bars, loaders, and spinners that communicate state without requiring user activation.",
|
|
571
|
+
"scopeDocument": "scopes/Controls/status_indicator.scope.md",
|
|
572
|
+
"status": "draft"
|
|
573
|
+
},
|
|
574
|
+
"children": [
|
|
575
|
+
{
|
|
576
|
+
"id": "statusIndicatorInstance",
|
|
577
|
+
"type": "StatusIndicator"
|
|
578
|
+
}
|
|
579
|
+
]
|
|
580
|
+
},
|
|
581
|
+
{
|
|
582
|
+
"id": "linkAndScrollControls",
|
|
583
|
+
"type": "LinkAndScrollControls",
|
|
584
|
+
"attrs": {
|
|
585
|
+
"title": "Link and scroll controls",
|
|
586
|
+
"purpose": "Link and scroll controls cover links and scrollbars when they are modeled as primitive controls rather than application navigation structures or composite widgets.",
|
|
587
|
+
"scopeDocument": "scopes/Controls/link_and_scroll_controls.scope.md",
|
|
588
|
+
"status": "draft"
|
|
589
|
+
},
|
|
590
|
+
"children": [
|
|
591
|
+
{
|
|
592
|
+
"id": "linkAndScrollControlsInstance",
|
|
593
|
+
"type": "LinkAndScrollControls"
|
|
594
|
+
}
|
|
595
|
+
]
|
|
596
|
+
}
|
|
597
|
+
]
|
|
598
|
+
},
|
|
599
|
+
{
|
|
600
|
+
"id": "interaction",
|
|
601
|
+
"type": "Interaction",
|
|
602
|
+
"attrs": {
|
|
603
|
+
"title": "Interaction",
|
|
604
|
+
"purpose": "Interaction defines state, target, gesture, pointer, keyboard, focus, input, and change event notions used by controls, behaviors, containers, and widgets.",
|
|
605
|
+
"scopeDocument": "scopes/Interaction/scope.md",
|
|
606
|
+
"status": "draft"
|
|
607
|
+
}
|
|
608
|
+
},
|
|
609
|
+
{
|
|
610
|
+
"id": "internationalization",
|
|
611
|
+
"type": "Internationalization",
|
|
612
|
+
"attrs": {
|
|
613
|
+
"title": "Internationalization",
|
|
614
|
+
"purpose": "Internationalization defines language, locale, writing-system, formatting, sorting, search, font, glyph, and localized input-validation notions used throughout OpenUI.",
|
|
615
|
+
"scopeDocument": "scopes/Internationalization/scope.md",
|
|
616
|
+
"status": "draft"
|
|
617
|
+
}
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
"id": "layout",
|
|
621
|
+
"type": "Layout",
|
|
622
|
+
"attrs": {
|
|
623
|
+
"title": "Layout",
|
|
624
|
+
"purpose": "Layout defines mechanism-level arrangement notions used by containers and widgets, including containment, flow, alignment, anchoring, sizing, spacing, wrapping, responsive reflow, and breakpoints.",
|
|
625
|
+
"scopeDocument": "scopes/Layout/scope.md",
|
|
626
|
+
"status": "draft"
|
|
627
|
+
}
|
|
628
|
+
},
|
|
629
|
+
{
|
|
630
|
+
"id": "pages",
|
|
631
|
+
"type": "Pages",
|
|
632
|
+
"attrs": {
|
|
633
|
+
"title": "Pages",
|
|
634
|
+
"purpose": "Pages are predefined page-level specification scopes.",
|
|
635
|
+
"scopeDocument": "scopes/Pages/scope.md",
|
|
636
|
+
"status": "draft"
|
|
637
|
+
},
|
|
638
|
+
"children": [
|
|
639
|
+
{
|
|
640
|
+
"id": "dashboard",
|
|
641
|
+
"type": "Dashboard",
|
|
642
|
+
"attrs": {
|
|
643
|
+
"title": "Dashboard",
|
|
644
|
+
"purpose": "A predefined page layout that presents overview metrics and summary content for quick scanning.",
|
|
645
|
+
"scopeDocument": "scopes/Pages/dashboard.scope.md",
|
|
646
|
+
"status": "draft"
|
|
647
|
+
},
|
|
648
|
+
"children": [
|
|
649
|
+
{
|
|
650
|
+
"id": "dashboardInstance",
|
|
651
|
+
"type": "DashboardPage"
|
|
652
|
+
}
|
|
653
|
+
]
|
|
654
|
+
},
|
|
655
|
+
{
|
|
656
|
+
"id": "shellPage",
|
|
657
|
+
"type": "ShellPage",
|
|
658
|
+
"attrs": {
|
|
659
|
+
"title": "Shell page",
|
|
660
|
+
"purpose": "A page shell with no business-object content that connects application routing and navigation.",
|
|
661
|
+
"scopeDocument": "scopes/Pages/shell_page.scope.md",
|
|
662
|
+
"status": "draft"
|
|
663
|
+
},
|
|
664
|
+
"children": [
|
|
665
|
+
{
|
|
666
|
+
"id": "shellPageInstance",
|
|
667
|
+
"type": "ShellPage",
|
|
668
|
+
"children": [
|
|
669
|
+
{
|
|
670
|
+
"id": "shellPageRouting",
|
|
671
|
+
"type": "Routing"
|
|
672
|
+
},
|
|
673
|
+
{
|
|
674
|
+
"id": "shellPageNavigation",
|
|
675
|
+
"type": "Navigation"
|
|
676
|
+
}
|
|
677
|
+
]
|
|
678
|
+
}
|
|
679
|
+
]
|
|
680
|
+
},
|
|
681
|
+
{
|
|
682
|
+
"id": "emptyPage",
|
|
683
|
+
"type": "EmptyPage",
|
|
684
|
+
"attrs": {
|
|
685
|
+
"title": "Empty page",
|
|
686
|
+
"purpose": "A page with no content and no routing or navigation.",
|
|
687
|
+
"scopeDocument": "scopes/Pages/empty_page.scope.md",
|
|
688
|
+
"status": "draft"
|
|
689
|
+
},
|
|
690
|
+
"children": [
|
|
691
|
+
{
|
|
692
|
+
"id": "emptyPageInstance",
|
|
693
|
+
"type": "EmptyPage"
|
|
694
|
+
}
|
|
695
|
+
]
|
|
696
|
+
}
|
|
697
|
+
]
|
|
698
|
+
},
|
|
699
|
+
{
|
|
700
|
+
"id": "presentation",
|
|
701
|
+
"type": "Presentation",
|
|
702
|
+
"attrs": {
|
|
703
|
+
"title": "Presentation",
|
|
704
|
+
"purpose": "Presentation defines visual styling notions used by controls, containers, widgets, pages, and views, including color, typography, shape, border, shadow, opacity, iconography, spacing tokens, visual states, theme, motion, and visibility.",
|
|
705
|
+
"scopeDocument": "scopes/Presentation/scope.md",
|
|
706
|
+
"status": "draft"
|
|
707
|
+
}
|
|
708
|
+
},
|
|
709
|
+
{
|
|
710
|
+
"id": "views",
|
|
711
|
+
"type": "Views",
|
|
712
|
+
"attrs": {
|
|
713
|
+
"title": "Views",
|
|
714
|
+
"purpose": "Views define user-facing representations of business objects and workflows.",
|
|
715
|
+
"scopeDocument": "scopes/Views/scope.md",
|
|
716
|
+
"status": "draft"
|
|
717
|
+
},
|
|
718
|
+
"children": [
|
|
719
|
+
{
|
|
720
|
+
"id": "report",
|
|
721
|
+
"type": "Report",
|
|
722
|
+
"attrs": {
|
|
723
|
+
"title": "Report",
|
|
724
|
+
"purpose": "A read-only data view that lets the user filter, sort, group, and page through business data.",
|
|
725
|
+
"scopeDocument": "scopes/Views/report.scope.md",
|
|
726
|
+
"status": "draft"
|
|
727
|
+
},
|
|
728
|
+
"children": [
|
|
729
|
+
{
|
|
730
|
+
"id": "reportInstance",
|
|
731
|
+
"type": "Report",
|
|
732
|
+
"attrs": {
|
|
733
|
+
"(filter)": null,
|
|
734
|
+
"(sort)": null,
|
|
735
|
+
"(group)": null,
|
|
736
|
+
"(paginate)": null
|
|
737
|
+
}
|
|
738
|
+
}
|
|
739
|
+
]
|
|
740
|
+
},
|
|
741
|
+
{
|
|
742
|
+
"id": "form",
|
|
743
|
+
"type": "Form",
|
|
744
|
+
"attrs": {
|
|
745
|
+
"title": "Form",
|
|
746
|
+
"purpose": "A read-write data view that lets the user enter and edit business data with validation, submission, and dirty-state tracking.",
|
|
747
|
+
"scopeDocument": "scopes/Views/form.scope.md",
|
|
748
|
+
"status": "draft"
|
|
749
|
+
},
|
|
750
|
+
"children": [
|
|
751
|
+
{
|
|
752
|
+
"id": "formInstance",
|
|
753
|
+
"type": "Form",
|
|
754
|
+
"attrs": {
|
|
755
|
+
"(validate)": null,
|
|
756
|
+
"(submit)": null,
|
|
757
|
+
"(dirtyChange)": null
|
|
758
|
+
}
|
|
759
|
+
}
|
|
760
|
+
]
|
|
761
|
+
}
|
|
762
|
+
]
|
|
763
|
+
},
|
|
764
|
+
{
|
|
765
|
+
"id": "widgets",
|
|
766
|
+
"type": "Widgets",
|
|
767
|
+
"attrs": {
|
|
768
|
+
"title": "Widgets",
|
|
769
|
+
"purpose": "Widgets define reusable components that can be used in multiple pages or views.",
|
|
770
|
+
"scopeDocument": "scopes/Widgets/scope.md",
|
|
771
|
+
"status": "draft"
|
|
772
|
+
},
|
|
773
|
+
"children": [
|
|
774
|
+
{
|
|
775
|
+
"id": "chart",
|
|
776
|
+
"type": "Chart",
|
|
777
|
+
"attrs": {
|
|
778
|
+
"title": "Chart",
|
|
779
|
+
"purpose": "A visual representation of data — such as a bar, line, or pie chart — that summarizes a data series for the user.",
|
|
780
|
+
"scopeDocument": "scopes/Widgets/chart.scope.md",
|
|
781
|
+
"status": "draft"
|
|
782
|
+
},
|
|
783
|
+
"children": [
|
|
784
|
+
{
|
|
785
|
+
"id": "chartInstance",
|
|
786
|
+
"type": "Chart"
|
|
787
|
+
}
|
|
788
|
+
]
|
|
789
|
+
},
|
|
790
|
+
{
|
|
791
|
+
"id": "table",
|
|
792
|
+
"type": "Table",
|
|
793
|
+
"attrs": {
|
|
794
|
+
"title": "Table",
|
|
795
|
+
"purpose": "A tabular presentation of data with column definitions, row models, and optional sorting, filtering, and pagination.",
|
|
796
|
+
"scopeDocument": "scopes/Widgets/table.scope.md",
|
|
797
|
+
"status": "draft"
|
|
798
|
+
},
|
|
799
|
+
"children": [
|
|
800
|
+
{
|
|
801
|
+
"id": "tableInstance",
|
|
802
|
+
"type": "table",
|
|
803
|
+
"attrs": {
|
|
804
|
+
"(sort)": null,
|
|
805
|
+
"(filter)": null,
|
|
806
|
+
"(paginate)": null
|
|
807
|
+
},
|
|
808
|
+
"children": [
|
|
809
|
+
{
|
|
810
|
+
"id": "tableRow",
|
|
811
|
+
"type": "tr"
|
|
812
|
+
}
|
|
813
|
+
]
|
|
814
|
+
}
|
|
815
|
+
]
|
|
816
|
+
},
|
|
817
|
+
{
|
|
818
|
+
"id": "dataGrid",
|
|
819
|
+
"type": "DataGrid",
|
|
820
|
+
"attrs": {
|
|
821
|
+
"title": "Data grid",
|
|
822
|
+
"purpose": "A data grid is an interactive tabular-data widget that may support cell focus, selection, editing, sorting, filtering, pagination, or keyboard grid navigation.",
|
|
823
|
+
"scopeDocument": "scopes/Widgets/data_grid.scope.md",
|
|
824
|
+
"status": "draft"
|
|
825
|
+
},
|
|
826
|
+
"children": [
|
|
827
|
+
{
|
|
828
|
+
"id": "dataGridInstance",
|
|
829
|
+
"type": "DataGrid"
|
|
830
|
+
}
|
|
831
|
+
]
|
|
832
|
+
},
|
|
833
|
+
{
|
|
834
|
+
"id": "list",
|
|
835
|
+
"type": "List",
|
|
836
|
+
"attrs": {
|
|
837
|
+
"title": "List",
|
|
838
|
+
"purpose": "An ordered or unordered collection of items with optional sorting, filtering, and pagination, following the HTML `ul`/`li` model.",
|
|
839
|
+
"scopeDocument": "scopes/Widgets/list.scope.md",
|
|
840
|
+
"status": "draft"
|
|
841
|
+
},
|
|
842
|
+
"children": [
|
|
843
|
+
{
|
|
844
|
+
"id": "listInstance",
|
|
845
|
+
"type": "ul",
|
|
846
|
+
"attrs": {
|
|
847
|
+
"(sort)": null,
|
|
848
|
+
"(filter)": null,
|
|
849
|
+
"(paginate)": null
|
|
850
|
+
},
|
|
851
|
+
"children": [
|
|
852
|
+
{
|
|
853
|
+
"id": "listItem",
|
|
854
|
+
"type": "li"
|
|
855
|
+
}
|
|
856
|
+
]
|
|
857
|
+
}
|
|
858
|
+
]
|
|
859
|
+
},
|
|
860
|
+
{
|
|
861
|
+
"id": "feedbackWidgets",
|
|
862
|
+
"type": "FeedbackWidgets",
|
|
863
|
+
"attrs": {
|
|
864
|
+
"title": "Feedback widgets",
|
|
865
|
+
"purpose": "Feedback widgets cover tooltips, alerts, toasts, snackbars, notifications, and narration or audio-description surfaces that communicate contextual or transient information.",
|
|
866
|
+
"scopeDocument": "scopes/Widgets/feedback_widgets.scope.md",
|
|
867
|
+
"status": "draft"
|
|
868
|
+
},
|
|
869
|
+
"children": [
|
|
870
|
+
{
|
|
871
|
+
"id": "feedbackWidgetsInstance",
|
|
872
|
+
"type": "FeedbackWidgets"
|
|
873
|
+
}
|
|
874
|
+
]
|
|
875
|
+
},
|
|
876
|
+
{
|
|
877
|
+
"id": "mediaWidgets",
|
|
878
|
+
"type": "MediaWidgets",
|
|
879
|
+
"attrs": {
|
|
880
|
+
"title": "Media widgets",
|
|
881
|
+
"purpose": "Media widgets cover media players, camera previews, and map surfaces that present rich visual, audio, video, or spatial content with widget-level behavior.",
|
|
882
|
+
"scopeDocument": "scopes/Widgets/media_widgets.scope.md",
|
|
883
|
+
"status": "draft"
|
|
884
|
+
},
|
|
885
|
+
"children": [
|
|
886
|
+
{
|
|
887
|
+
"id": "mediaWidgetsInstance",
|
|
888
|
+
"type": "MediaWidgets"
|
|
889
|
+
}
|
|
890
|
+
]
|
|
891
|
+
},
|
|
892
|
+
{
|
|
893
|
+
"id": "navigationWidgets",
|
|
894
|
+
"type": "NavigationWidgets",
|
|
895
|
+
"attrs": {
|
|
896
|
+
"title": "Navigation widgets",
|
|
897
|
+
"purpose": "Navigation widgets cover navigation bars, drawers, rails, hamburger menus, breadcrumbs, tree views, pagination controls, and carousels when they are modeled as reusable widgets.",
|
|
898
|
+
"scopeDocument": "scopes/Widgets/navigation_widgets.scope.md",
|
|
899
|
+
"status": "draft"
|
|
900
|
+
},
|
|
901
|
+
"children": [
|
|
902
|
+
{
|
|
903
|
+
"id": "navigationWidgetsInstance",
|
|
904
|
+
"type": "NavigationWidgets"
|
|
905
|
+
}
|
|
906
|
+
]
|
|
907
|
+
},
|
|
908
|
+
{
|
|
909
|
+
"id": "menuWidgets",
|
|
910
|
+
"type": "MenuWidgets",
|
|
911
|
+
"attrs": {
|
|
912
|
+
"title": "Menu widgets",
|
|
913
|
+
"purpose": "Menu widgets cover menus, dropdown menus, and context menus that present command or choice lists in a menu pattern.",
|
|
914
|
+
"scopeDocument": "scopes/Widgets/menu_widgets.scope.md",
|
|
915
|
+
"status": "draft"
|
|
916
|
+
},
|
|
917
|
+
"children": [
|
|
918
|
+
{
|
|
919
|
+
"id": "menuWidgetsInstance",
|
|
920
|
+
"type": "MenuWidgets"
|
|
921
|
+
}
|
|
922
|
+
]
|
|
923
|
+
},
|
|
924
|
+
{
|
|
925
|
+
"id": "dateTimePickers",
|
|
926
|
+
"type": "DateTimePickers",
|
|
927
|
+
"attrs": {
|
|
928
|
+
"title": "Date/Time pickers",
|
|
929
|
+
"purpose": "A calendar-based control for selecting a date, a time, or a date range from the user.",
|
|
930
|
+
"scopeDocument": "scopes/Widgets/date_time_pickers.scope.md",
|
|
931
|
+
"status": "draft"
|
|
932
|
+
},
|
|
933
|
+
"children": [
|
|
934
|
+
{
|
|
935
|
+
"id": "dateTimePickersInstance",
|
|
936
|
+
"type": "DateTimePicker",
|
|
937
|
+
"attrs": {
|
|
938
|
+
"[start]": null,
|
|
939
|
+
"[end]": null,
|
|
940
|
+
"(dateChange)": null
|
|
941
|
+
}
|
|
942
|
+
}
|
|
943
|
+
]
|
|
944
|
+
},
|
|
945
|
+
{
|
|
946
|
+
"id": "stepper",
|
|
947
|
+
"type": "Stepper",
|
|
948
|
+
"attrs": {
|
|
949
|
+
"title": "Stepper",
|
|
950
|
+
"purpose": "A control that guides the user through a multi-step process as an ordered sequence of steps.",
|
|
951
|
+
"scopeDocument": "scopes/Widgets/stepper.scope.md",
|
|
952
|
+
"status": "draft"
|
|
953
|
+
},
|
|
954
|
+
"children": [
|
|
955
|
+
{
|
|
956
|
+
"id": "stepperInstance",
|
|
957
|
+
"type": "Stepper",
|
|
958
|
+
"children": [
|
|
959
|
+
{
|
|
960
|
+
"id": "stepperStep",
|
|
961
|
+
"type": "step"
|
|
962
|
+
}
|
|
963
|
+
]
|
|
964
|
+
}
|
|
965
|
+
]
|
|
966
|
+
},
|
|
967
|
+
{
|
|
968
|
+
"id": "dialog",
|
|
969
|
+
"type": "Dialog",
|
|
970
|
+
"attrs": {
|
|
971
|
+
"title": "Dialog",
|
|
972
|
+
"purpose": "A modal or non-modal interaction surface that overlays the page with a title, content, and actions.",
|
|
973
|
+
"scopeDocument": "scopes/Widgets/dialog.scope.md",
|
|
974
|
+
"status": "draft"
|
|
975
|
+
},
|
|
976
|
+
"children": [
|
|
977
|
+
{
|
|
978
|
+
"id": "dialogInstance",
|
|
979
|
+
"type": "dialog",
|
|
980
|
+
"attrs": {
|
|
981
|
+
"[open]": null,
|
|
982
|
+
"[modal]": null,
|
|
983
|
+
"(close)": null,
|
|
984
|
+
"(cancel)": null
|
|
985
|
+
},
|
|
986
|
+
"children": [
|
|
987
|
+
{
|
|
988
|
+
"id": "dialogTitle",
|
|
989
|
+
"type": "header"
|
|
990
|
+
},
|
|
991
|
+
{
|
|
992
|
+
"id": "dialogContent",
|
|
993
|
+
"type": "section"
|
|
994
|
+
},
|
|
995
|
+
{
|
|
996
|
+
"id": "dialogActions",
|
|
997
|
+
"type": "footer"
|
|
998
|
+
}
|
|
999
|
+
]
|
|
1000
|
+
}
|
|
1001
|
+
]
|
|
1002
|
+
}
|
|
1003
|
+
]
|
|
1004
|
+
}
|
|
1005
|
+
]
|
|
1006
|
+
}
|
|
1007
|
+
]
|
|
1008
|
+
}
|