@smwb/ui-mcp-solid 0.13.0 → 1.0.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/component-meta/dataDisplay/chat/chat.chatFooterComposer.json +24 -0
- package/component-meta/dataDisplay/chat/chat.json +24 -3
- package/component-meta/dataDisplay/chat/chatComposer.json +1 -1
- package/component-meta/dataDisplay/chat/chatLayout.json +2 -1
- package/component-meta/dataDisplay/chat/chatOverlayLayout.json +2 -1
- package/component-meta/dataDisplay/diffStat/diffStat.json +65 -0
- package/component-meta/dataDisplay/kbd/kbd.json +55 -0
- package/component-meta/dataDisplay/list/listItem.json +18 -3
- package/component-meta/dataDisplay/qrCode/qrCode.json +65 -0
- package/component-meta/dataDisplay/statusDot/statusDot.json +60 -0
- package/component-meta/dataDisplay/swimlanes/swimlanes.json +95 -0
- package/component-meta/dataDisplay/treeView/treeView.json +19 -4
- package/component-meta/inputs/button/button.json +10 -0
- package/component-meta/inputs/composer/composer.json +222 -0
- package/component-meta/layout/sheet/sheet.json +20 -0
- package/component-meta/layout/tabGroups/tabGroups.json +118 -0
- package/component-meta/navigation/appBar/appBar.json +15 -0
- package/component-meta/navigation/commandPalette/commandPalette.json +166 -0
- package/component-meta/navigation/sidebar/sidebar.json +5 -0
- package/component-meta/navigation/tabs/tab/tab.json +31 -5
- package/component-meta/navigation/tabs/tabPanel/tabPanel.json +42 -0
- package/component-meta/navigation/tabs/tabs.json +36 -4
- package/package.json +3 -3
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Composer",
|
|
3
|
+
"description": "A task input: a multi-line field that grows from minRows to maxRows, a toolbar slot under it for chip selectors, a send button that becomes Stop while busy, keyboard send (Ctrl/⌘+Enter by default), optional attach button and drop target, and a character counter.",
|
|
4
|
+
"ssr": {
|
|
5
|
+
"safe": true,
|
|
6
|
+
"rendering": "universal"
|
|
7
|
+
},
|
|
8
|
+
"extends": [
|
|
9
|
+
"Omit<\n JSX.HTMLAttributes<HTMLDivElement>,\n \"onChange\" | \"defaultValue\" | \"onKeyDown\" | \"onFocus\" | \"onBlur\" | \"children\"\n>"
|
|
10
|
+
],
|
|
11
|
+
"inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
|
|
12
|
+
"styles": {
|
|
13
|
+
"base": [
|
|
14
|
+
"@smwb/ui-styles/less/foundation.less",
|
|
15
|
+
"@smwb/ui-styles/less/theme.less"
|
|
16
|
+
],
|
|
17
|
+
"entries": [
|
|
18
|
+
"@smwb/ui-styles/less/components/composer/composer.entry.less"
|
|
19
|
+
],
|
|
20
|
+
"dependencies": [
|
|
21
|
+
"@smwb/ui-styles/less/components/icon/icon.entry.less"
|
|
22
|
+
],
|
|
23
|
+
"importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/composer/composer.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";"
|
|
24
|
+
},
|
|
25
|
+
"props": {
|
|
26
|
+
"value": {
|
|
27
|
+
"type": "string | undefined",
|
|
28
|
+
"required": false,
|
|
29
|
+
"description": "Controlled text. The composer is controlled while this is not `undefined` (checked reactively); a parent that\nignores `onValueChange` keeps the field showing this value."
|
|
30
|
+
},
|
|
31
|
+
"defaultValue": {
|
|
32
|
+
"type": "string | undefined",
|
|
33
|
+
"required": false,
|
|
34
|
+
"description": "Initial text while uncontrolled. Defaults to an empty string."
|
|
35
|
+
},
|
|
36
|
+
"onValueChange": {
|
|
37
|
+
"type": "((value: string) => void) | undefined",
|
|
38
|
+
"required": false,
|
|
39
|
+
"description": "Called on every text change: typing, a newline, and the clear after a send. Called in both modes."
|
|
40
|
+
},
|
|
41
|
+
"onSend": {
|
|
42
|
+
"type": "((text: string) => void) | undefined",
|
|
43
|
+
"required": false,
|
|
44
|
+
"description": "Called with the trimmed text when the user sends it: the send key (see `sendKey`) or a click on the action\nbutton. Nothing is called while sending is not allowed: no `onSend`, an empty or whitespace-only text, `disabled`,\n`readOnly`, `busy`, or a text over `maxLength`. Async work is shown with `busy`; the return value is ignored."
|
|
45
|
+
},
|
|
46
|
+
"sendKey": {
|
|
47
|
+
"type": "ComposerSendKey | undefined",
|
|
48
|
+
"required": false,
|
|
49
|
+
"description": "Which Enter sends. `\"modEnter\"` (default): Ctrl/⌘+Enter sends and Enter inserts a newline. `\"enter\"`: Enter sends,\nShift+Enter inserts a newline, Ctrl/⌘+Enter sends too. An Enter that commits an IME composition never sends."
|
|
50
|
+
},
|
|
51
|
+
"clearOnSend": {
|
|
52
|
+
"type": "boolean | undefined",
|
|
53
|
+
"required": false,
|
|
54
|
+
"description": "Clear the text after `onSend`: the composer's own state while uncontrolled, `onValueChange(\"\")` while controlled.\nDefaults to `true`."
|
|
55
|
+
},
|
|
56
|
+
"busy": {
|
|
57
|
+
"type": "boolean | undefined",
|
|
58
|
+
"required": false,
|
|
59
|
+
"description": "The agent is working: the action button turns into Stop and calls `onStop`, and the keys and the button do not\nsend. The text stays editable. The composer never changes `busy` itself, the parent owns it."
|
|
60
|
+
},
|
|
61
|
+
"onStop": {
|
|
62
|
+
"type": "(() => void) | undefined",
|
|
63
|
+
"required": false,
|
|
64
|
+
"description": "Called when Stop is pressed (click, Enter or Space on the button) while `busy` and not `disabled`. Without it the\nStop button does nothing, so pass it whenever `busy` can be set."
|
|
65
|
+
},
|
|
66
|
+
"placeholder": {
|
|
67
|
+
"type": "string | undefined",
|
|
68
|
+
"required": false,
|
|
69
|
+
"description": "Placeholder of the textarea. It is not a name for the field, set `aria-label` or `aria-labelledby` as well."
|
|
70
|
+
},
|
|
71
|
+
"maxLength": {
|
|
72
|
+
"type": "number | undefined",
|
|
73
|
+
"required": false,
|
|
74
|
+
"description": "Hard limit on the text (the native `maxlength` of the textarea, counted in UTF-16 units, so an emoji is 2).\nTurns the counter on."
|
|
75
|
+
},
|
|
76
|
+
"counter": {
|
|
77
|
+
"type": "boolean | undefined",
|
|
78
|
+
"required": false,
|
|
79
|
+
"description": "Show the counter (`n / maxLength`, or `n` without `maxLength`). Defaults to `true` when `maxLength` is set."
|
|
80
|
+
},
|
|
81
|
+
"counterAnnouncement": {
|
|
82
|
+
"type": "((remaining: number, maxLength: number) => string) | undefined",
|
|
83
|
+
"required": false,
|
|
84
|
+
"description": "Text for the polite status region that announces how many characters are left. It is spoken only near the limit\n(within the larger of 10 characters and 10% of `maxLength`) and when the text is over it, with a negative\n`remaining`. Defaults to \"N characters left\" / \"N characters over the limit\"."
|
|
85
|
+
},
|
|
86
|
+
"minRows": {
|
|
87
|
+
"type": "number | undefined",
|
|
88
|
+
"required": false,
|
|
89
|
+
"description": "Height of the empty field in rows, and the `rows` of the textarea. Defaults to `1`."
|
|
90
|
+
},
|
|
91
|
+
"maxRows": {
|
|
92
|
+
"type": "number | undefined",
|
|
93
|
+
"required": false,
|
|
94
|
+
"description": "Rows the field grows to before it scrolls. Clamped to at least `minRows`. Defaults to `8`."
|
|
95
|
+
},
|
|
96
|
+
"layout": {
|
|
97
|
+
"type": "ComposerLayout | undefined",
|
|
98
|
+
"required": false,
|
|
99
|
+
"description": "`\"stacked\"` (default): the field on top, a bar under it with the attach button, the toolbar, the counter and the\naction. `\"inline\"`: the attach button, the field, the counter and the action in one row, the toolbar (if any)\nin a row under it."
|
|
100
|
+
},
|
|
101
|
+
"toolbar": {
|
|
102
|
+
"type": "JSX.Element",
|
|
103
|
+
"required": false,
|
|
104
|
+
"description": "Slot under the field for chips and selectors (agent, model, mode, …). Drawn in every state. It is a plain `div`,\nnot `role=\"toolbar\"`: the content brings its own keyboard handling and disabled state."
|
|
105
|
+
},
|
|
106
|
+
"attachments": {
|
|
107
|
+
"type": "JSX.Element",
|
|
108
|
+
"required": false,
|
|
109
|
+
"description": "Slot above the field for the app's file chips. The composer keeps no file state: the app lists what `onAttach`\ngave it here."
|
|
110
|
+
},
|
|
111
|
+
"onAttach": {
|
|
112
|
+
"type": "((files: File[]) => void) | undefined",
|
|
113
|
+
"required": false,
|
|
114
|
+
"description": "Turns on the attach button, the hidden file input and the drop target (the whole composer). Called with the files\nof a pick or a drop that are left after `accept`, `multiple` and `maxFiles`, never with an empty list. Only a drag\nof files is taken: dragged text or a link still goes into the field."
|
|
115
|
+
},
|
|
116
|
+
"accept": {
|
|
117
|
+
"type": "Record<string, string[]> | string | undefined",
|
|
118
|
+
"required": false,
|
|
119
|
+
"description": "Accepted file types, as a record of mime type to extensions or a raw `accept` string (`image/*`, `.pdf`, an exact\nmime type). It sets the picker's filter, and the files of a pick or a drop that do not match are left out."
|
|
120
|
+
},
|
|
121
|
+
"multiple": {
|
|
122
|
+
"type": "boolean | undefined",
|
|
123
|
+
"required": false,
|
|
124
|
+
"description": "Allow several files per pick or drop. When `false` the picker takes one and a drop keeps the first. Defaults to `true`."
|
|
125
|
+
},
|
|
126
|
+
"maxFiles": {
|
|
127
|
+
"type": "number | undefined",
|
|
128
|
+
"required": false,
|
|
129
|
+
"description": "Files beyond this number are dropped from a pick or a drop (counted after `accept`)."
|
|
130
|
+
},
|
|
131
|
+
"dropTarget": {
|
|
132
|
+
"type": "boolean | undefined",
|
|
133
|
+
"required": false,
|
|
134
|
+
"description": "Whether `onAttach` also makes the composer a drop target for files. Set `false` when a parent already takes drops\n(a chat panel): the attach button and the picker stay, and a drop on the composer bubbles to the parent untouched.\nDefaults to `true`."
|
|
135
|
+
},
|
|
136
|
+
"disabled": {
|
|
137
|
+
"type": "boolean | undefined",
|
|
138
|
+
"required": false,
|
|
139
|
+
"description": "Disables the textarea, the attach button, the action button and the drop target. Toolbar content is the app's to\ndisable."
|
|
140
|
+
},
|
|
141
|
+
"readOnly": {
|
|
142
|
+
"type": "boolean | undefined",
|
|
143
|
+
"required": false,
|
|
144
|
+
"description": "The textarea is `readonly`: sending is unavailable, Stop still works."
|
|
145
|
+
},
|
|
146
|
+
"autofocus": {
|
|
147
|
+
"type": "boolean | undefined",
|
|
148
|
+
"required": false,
|
|
149
|
+
"description": "Focus the textarea on mount."
|
|
150
|
+
},
|
|
151
|
+
"name": {
|
|
152
|
+
"type": "string | undefined",
|
|
153
|
+
"required": false,
|
|
154
|
+
"description": "Name of the textarea."
|
|
155
|
+
},
|
|
156
|
+
"id": {
|
|
157
|
+
"type": "string | undefined",
|
|
158
|
+
"required": false,
|
|
159
|
+
"description": "Id of the textarea (the root keeps no id). Generated when not given."
|
|
160
|
+
},
|
|
161
|
+
"aria-label": {
|
|
162
|
+
"type": "string | undefined",
|
|
163
|
+
"required": false,
|
|
164
|
+
"description": "Accessible name of the textarea. Set this or `aria-labelledby`: a placeholder is not a name."
|
|
165
|
+
},
|
|
166
|
+
"aria-labelledby": {
|
|
167
|
+
"type": "string | undefined",
|
|
168
|
+
"required": false,
|
|
169
|
+
"description": "Id(s) of the element(s) that name the textarea."
|
|
170
|
+
},
|
|
171
|
+
"aria-describedby": {
|
|
172
|
+
"type": "string | undefined",
|
|
173
|
+
"required": false,
|
|
174
|
+
"description": "Id(s) that describe the textarea. They come first, the counter's id is appended."
|
|
175
|
+
},
|
|
176
|
+
"onKeyDown": {
|
|
177
|
+
"type": "JSX.EventHandlerUnion<HTMLTextAreaElement, KeyboardEvent> | undefined",
|
|
178
|
+
"required": false,
|
|
179
|
+
"description": "Key handler of the textarea. It runs before the composer's own; if it calls `preventDefault()`, the composer does nothing for that key."
|
|
180
|
+
},
|
|
181
|
+
"onFocus": {
|
|
182
|
+
"type": "JSX.EventHandlerUnion<HTMLTextAreaElement, FocusEvent> | undefined",
|
|
183
|
+
"required": false,
|
|
184
|
+
"description": "Focus handler of the textarea."
|
|
185
|
+
},
|
|
186
|
+
"onBlur": {
|
|
187
|
+
"type": "JSX.EventHandlerUnion<HTMLTextAreaElement, FocusEvent> | undefined",
|
|
188
|
+
"required": false,
|
|
189
|
+
"description": "Blur handler of the textarea."
|
|
190
|
+
},
|
|
191
|
+
"inputRef": {
|
|
192
|
+
"type": "((el: HTMLTextAreaElement) => void) | undefined",
|
|
193
|
+
"required": false,
|
|
194
|
+
"description": "Ref of the textarea (the root takes the component's own `ref`)."
|
|
195
|
+
},
|
|
196
|
+
"sendLabel": {
|
|
197
|
+
"type": "string | undefined",
|
|
198
|
+
"required": false,
|
|
199
|
+
"description": "Accessible name of the action button while it sends. Defaults to \"Send\"."
|
|
200
|
+
},
|
|
201
|
+
"stopLabel": {
|
|
202
|
+
"type": "string | undefined",
|
|
203
|
+
"required": false,
|
|
204
|
+
"description": "Accessible name of the action button while `busy`. Defaults to \"Stop\"."
|
|
205
|
+
},
|
|
206
|
+
"attachLabel": {
|
|
207
|
+
"type": "string | undefined",
|
|
208
|
+
"required": false,
|
|
209
|
+
"description": "Accessible name of the attach button. Defaults to \"Attach file\"."
|
|
210
|
+
},
|
|
211
|
+
"class": {
|
|
212
|
+
"type": "string | undefined",
|
|
213
|
+
"required": false,
|
|
214
|
+
"description": "Class name(s) for the root `<div>`. `style`, `ref`, `data-*` attributes and every other HTML attribute or event\nhandler go to the root too; the root's drag handlers run after yours."
|
|
215
|
+
},
|
|
216
|
+
"data-testid": {
|
|
217
|
+
"type": "string | undefined",
|
|
218
|
+
"required": false,
|
|
219
|
+
"description": "Test id of the root `<div>`. Defaults to `composer`; the parts inside have their own (`composer-input`, `composer-action`, …)."
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
@@ -60,6 +60,26 @@
|
|
|
60
60
|
"required": false,
|
|
61
61
|
"description": "Reverse Header Actions. Optional. Type: boolean."
|
|
62
62
|
},
|
|
63
|
+
"closeAriaLabel": {
|
|
64
|
+
"type": "string",
|
|
65
|
+
"required": false,
|
|
66
|
+
"description": "Accessible name of the header close button (default \"Close sheet\")."
|
|
67
|
+
},
|
|
68
|
+
"expandAriaLabel": {
|
|
69
|
+
"type": "string",
|
|
70
|
+
"required": false,
|
|
71
|
+
"description": "Accessible name of the size toggle while the sheet is at its normal size (default \"Expand sheet\"). The toggle\ncycles normal, expanded, collapsed and back, and its name always says what the next press does; the\nname changing is how it exposes its state. It shows the `open_in_full` icon, and `close_fullscreen` while expanded."
|
|
72
|
+
},
|
|
73
|
+
"collapseAriaLabel": {
|
|
74
|
+
"type": "string",
|
|
75
|
+
"required": false,
|
|
76
|
+
"description": "Accessible name of the size toggle while the sheet is expanded (default \"Collapse sheet\")."
|
|
77
|
+
},
|
|
78
|
+
"restoreAriaLabel": {
|
|
79
|
+
"type": "string",
|
|
80
|
+
"required": false,
|
|
81
|
+
"description": "Accessible name of the size toggle while the sheet is collapsed to its header (default \"Restore sheet size\")."
|
|
82
|
+
},
|
|
63
83
|
"size": {
|
|
64
84
|
"type": "string",
|
|
65
85
|
"required": false,
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "TabGroups",
|
|
3
|
+
"description": "Tab groups in a split area: move tabs between groups by drag and drop or keyboard, split right or down, resize, close the last tab to close a group; the layout is a versioned JSON (layout/onLayoutChange).",
|
|
4
|
+
"ssr": {
|
|
5
|
+
"safe": true,
|
|
6
|
+
"rendering": "universal",
|
|
7
|
+
"note": "Renders the groups, tab rows and selected panels on the server; drag and drop and resizing run in the browser."
|
|
8
|
+
},
|
|
9
|
+
"extends": [
|
|
10
|
+
"Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\" | \"onChange\" | \"id\">"
|
|
11
|
+
],
|
|
12
|
+
"inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
|
|
13
|
+
"styles": {
|
|
14
|
+
"base": [
|
|
15
|
+
"@smwb/ui-styles/less/foundation.less",
|
|
16
|
+
"@smwb/ui-styles/less/theme.less"
|
|
17
|
+
],
|
|
18
|
+
"entries": [
|
|
19
|
+
"@smwb/ui-styles/less/components/tabGroups/tabGroups.entry.less"
|
|
20
|
+
],
|
|
21
|
+
"dependencies": [
|
|
22
|
+
"@smwb/ui-styles/less/components/icon/icon.entry.less",
|
|
23
|
+
"@smwb/ui-styles/less/components/kbd/kbd.entry.less",
|
|
24
|
+
"@smwb/ui-styles/less/components/menu/menu.entry.less",
|
|
25
|
+
"@smwb/ui-styles/less/components/ripple/ripple.entry.less",
|
|
26
|
+
"@smwb/ui-styles/less/components/tabs/tab/tab.entry.less",
|
|
27
|
+
"@smwb/ui-styles/less/components/tabs/tabs.entry.less"
|
|
28
|
+
],
|
|
29
|
+
"importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabGroups/tabGroups.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/kbd/kbd.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/menu/menu.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";"
|
|
30
|
+
},
|
|
31
|
+
"props": {
|
|
32
|
+
"layout": {
|
|
33
|
+
"type": "TabGroupsLayout | undefined",
|
|
34
|
+
"required": false,
|
|
35
|
+
"description": "The arrangement to draw: the split tree, every group's tabs and the selected one. Controlled\nwhile it is not `undefined` — the component then only reports changes through\n`onLayoutChange` and draws what the owner gives back."
|
|
36
|
+
},
|
|
37
|
+
"defaultLayout": {
|
|
38
|
+
"type": "TabGroupsLayout | undefined",
|
|
39
|
+
"required": false,
|
|
40
|
+
"description": "The arrangement to start from while uncontrolled: one empty group by default."
|
|
41
|
+
},
|
|
42
|
+
"onLayoutChange": {
|
|
43
|
+
"type": "((layout: TabGroupsLayout, change: TabGroupsChange) => void) | undefined",
|
|
44
|
+
"required": false,
|
|
45
|
+
"description": "Called with the layout after a change and with what happened, in both the controlled and the\nuncontrolled mode. A controlled owner that does not apply the change simply sees nothing move."
|
|
46
|
+
},
|
|
47
|
+
"getTab": {
|
|
48
|
+
"type": "(tabId: string) => TabGroupsTab | undefined",
|
|
49
|
+
"required": true,
|
|
50
|
+
"description": "What a tab shows, by its id; `undefined` draws the id as the label."
|
|
51
|
+
},
|
|
52
|
+
"renderPanel": {
|
|
53
|
+
"type": "(tabId: string) => JSX.Element",
|
|
54
|
+
"required": true,
|
|
55
|
+
"description": "The content of a tab's panel, by its id. It is called the first time the tab is selected and\nthe panel stays mounted from then on, hidden while another tab is shown and kept through a\nmove to another group: a form keeps what was typed, a terminal its scrollback. Its node stays\nwhere it is in the DOM, so an iframe in it does not reload either."
|
|
56
|
+
},
|
|
57
|
+
"onTabClose": {
|
|
58
|
+
"type": "((tabId: string, event: Event, reason: TabCloseReason) => boolean | void) | undefined",
|
|
59
|
+
"required": false,
|
|
60
|
+
"description": "Asked before a tab closes, with what asked for it (its close button, Delete or Backspace, a\nmiddle click, its `actions`). Return `false` to keep the tab."
|
|
61
|
+
},
|
|
62
|
+
"empty": {
|
|
63
|
+
"type": "JSX.Element",
|
|
64
|
+
"required": false,
|
|
65
|
+
"description": "Drawn, centred, when the only group has no tabs left."
|
|
66
|
+
},
|
|
67
|
+
"minGroupSize": {
|
|
68
|
+
"type": "number | undefined",
|
|
69
|
+
"required": false,
|
|
70
|
+
"description": "The smallest a group can be resized to, in px of its split; 120 by default."
|
|
71
|
+
},
|
|
72
|
+
"keyboardStep": {
|
|
73
|
+
"type": "number | undefined",
|
|
74
|
+
"required": false,
|
|
75
|
+
"description": "The arrow-key step of a separator, in percent of its split; 5 by default."
|
|
76
|
+
},
|
|
77
|
+
"groupActions": {
|
|
78
|
+
"type": "boolean | undefined",
|
|
79
|
+
"required": false,
|
|
80
|
+
"description": "Draw each group's actions button and menu; true by default."
|
|
81
|
+
},
|
|
82
|
+
"dense": {
|
|
83
|
+
"type": "boolean | undefined",
|
|
84
|
+
"required": false,
|
|
85
|
+
"description": "Compact tab rows, as `Tabs`' `dense`; false by default."
|
|
86
|
+
},
|
|
87
|
+
"labels": {
|
|
88
|
+
"type": "Partial<TabGroupsLabels> | undefined",
|
|
89
|
+
"required": false,
|
|
90
|
+
"description": "The texts of the component: its menus, labels and announcements. English by default."
|
|
91
|
+
},
|
|
92
|
+
"id": {
|
|
93
|
+
"type": "string | undefined",
|
|
94
|
+
"required": false,
|
|
95
|
+
"description": "Base of the generated ids and the id of the root element. Generated by default."
|
|
96
|
+
},
|
|
97
|
+
"data-testid": {
|
|
98
|
+
"type": "string | undefined",
|
|
99
|
+
"required": false,
|
|
100
|
+
"description": "Test id of the root element; `tab-groups` unless given."
|
|
101
|
+
},
|
|
102
|
+
"class": {
|
|
103
|
+
"type": "string | undefined",
|
|
104
|
+
"required": false,
|
|
105
|
+
"description": "Class of the root element, added to the component's own."
|
|
106
|
+
},
|
|
107
|
+
"style": {
|
|
108
|
+
"type": "JSX.HTMLAttributes<HTMLDivElement>[\"style\"]",
|
|
109
|
+
"required": false,
|
|
110
|
+
"description": "Inline style of the root element; the component's `grid-template-*` win over it."
|
|
111
|
+
},
|
|
112
|
+
"ref": {
|
|
113
|
+
"type": "Ref<HTMLDivElement>",
|
|
114
|
+
"required": false,
|
|
115
|
+
"description": "The root element."
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
@@ -56,11 +56,26 @@
|
|
|
56
56
|
"required": false,
|
|
57
57
|
"description": "Accessible title or tooltip text."
|
|
58
58
|
},
|
|
59
|
+
"titleAs": {
|
|
60
|
+
"type": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
|
|
61
|
+
"required": false,
|
|
62
|
+
"description": "Tag the `title` is rendered in: a `div` (default) or a heading, `h1`–`h6`,\nfor the page's main heading. Only the tag changes — a heading is drawn with\nthe bar's own font size, weight and no margins, so it looks exactly like the\ndiv. The heading's text is the `title` itself, so pass a string or plain\nmarkup rather than a `Typography` heading."
|
|
63
|
+
},
|
|
59
64
|
"midContentAlign": {
|
|
60
65
|
"type": "\"middle\" | \"left\" | \"right\"",
|
|
61
66
|
"required": false,
|
|
62
67
|
"description": "Mid Content Align. Optional. Type: \"middle\" | \"left\" | \"right\"."
|
|
63
68
|
},
|
|
69
|
+
"variant": {
|
|
70
|
+
"type": "\"default\" | \"window\"",
|
|
71
|
+
"required": false,
|
|
72
|
+
"description": "`window`: the bar is the title bar of a desktop app window (Electron, Tauri, an installed PWA with Window\nControls Overlay). The bar drags the window; buttons, links, fields and other controls in it stay clickable,\nand room is left for the OS window buttons (`windowControls`). In a plain browser tab it looks like `default`."
|
|
73
|
+
},
|
|
74
|
+
"windowControls": {
|
|
75
|
+
"type": "\"auto\" | \"left\" | \"right\" | \"none\"",
|
|
76
|
+
"required": false,
|
|
77
|
+
"description": "With `variant=\"window\"`: where the OS window buttons are, so the bar's content keeps clear of them.\n`auto` (default) takes the area from the shell's `env(titlebar-area-*)` (Window Controls Overlay, Electron\n`titleBarOverlay`) and reserves nothing without it; `left` is macOS (traffic lights, `titleBarStyle: \"hiddenInset\"`),\n`right` is Windows/Linux caption buttons drawn by the OS; `none` reserves nothing. The reserved width is\nthe `--smui-appBarWindowControlsWidth` custom property (64px on the left, 138px on the right by default)."
|
|
78
|
+
},
|
|
64
79
|
"color": {
|
|
65
80
|
"type": "AppBarColor",
|
|
66
81
|
"required": false,
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "CommandPalette",
|
|
3
|
+
"description": "Command Palette component from the navigation module.",
|
|
4
|
+
"ssr": {
|
|
5
|
+
"safe": true,
|
|
6
|
+
"rendering": "universal"
|
|
7
|
+
},
|
|
8
|
+
"styles": {
|
|
9
|
+
"base": [
|
|
10
|
+
"@smwb/ui-styles/less/foundation.less",
|
|
11
|
+
"@smwb/ui-styles/less/theme.less"
|
|
12
|
+
],
|
|
13
|
+
"entries": [
|
|
14
|
+
"@smwb/ui-styles/less/components/commandPalette/commandPalette.entry.less"
|
|
15
|
+
],
|
|
16
|
+
"dependencies": [
|
|
17
|
+
"@smwb/ui-styles/less/components/icon/icon.entry.less",
|
|
18
|
+
"@smwb/ui-styles/less/components/kbd/kbd.entry.less",
|
|
19
|
+
"@smwb/ui-styles/less/components/modal/modal.entry.less",
|
|
20
|
+
"@smwb/ui-styles/less/components/skeleton/skeleton.entry.less"
|
|
21
|
+
],
|
|
22
|
+
"importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/commandPalette/commandPalette.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/kbd/kbd.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/modal/modal.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";"
|
|
23
|
+
},
|
|
24
|
+
"props": {
|
|
25
|
+
"open": {
|
|
26
|
+
"type": "boolean | undefined",
|
|
27
|
+
"required": false,
|
|
28
|
+
"description": "Whether the palette is open. Any value but `undefined` makes it controlled: the palette then\nshows this and only asks to change it through `onOpenChange`. While it is `undefined`, the\npalette keeps its own state, starting from `defaultOpen`."
|
|
29
|
+
},
|
|
30
|
+
"defaultOpen": {
|
|
31
|
+
"type": "boolean | undefined",
|
|
32
|
+
"required": false,
|
|
33
|
+
"description": "Open state to start from while uncontrolled; `false` by default."
|
|
34
|
+
},
|
|
35
|
+
"onOpenChange": {
|
|
36
|
+
"type": "((open: boolean) => void) | undefined",
|
|
37
|
+
"required": false,
|
|
38
|
+
"description": "Called for every request to open or close: Escape, a backdrop click, and choosing an item while\n`closeOnSelect`. Called in both the controlled and the uncontrolled mode."
|
|
39
|
+
},
|
|
40
|
+
"groups": {
|
|
41
|
+
"type": "CommandPaletteGroup[] | undefined",
|
|
42
|
+
"required": false,
|
|
43
|
+
"description": "The groups to search in, filtered locally by `filter`; empty by default."
|
|
44
|
+
},
|
|
45
|
+
"recent": {
|
|
46
|
+
"type": "CommandPaletteItem[] | undefined",
|
|
47
|
+
"required": false,
|
|
48
|
+
"description": "Recently used items, kept by the app (its local storage, its server, per user) and updated from\n`onSelect`. Shown as the first group while the query is empty, unfiltered, and hidden while\nthe user searches."
|
|
49
|
+
},
|
|
50
|
+
"recentLabel": {
|
|
51
|
+
"type": "string | undefined",
|
|
52
|
+
"required": false,
|
|
53
|
+
"description": "Heading of the recent group; `\"Recent\"` by default."
|
|
54
|
+
},
|
|
55
|
+
"query": {
|
|
56
|
+
"type": "string | undefined",
|
|
57
|
+
"required": false,
|
|
58
|
+
"description": "The text in the search field. Any value but `undefined` makes it controlled: the field shows\nthis and only reports edits through `onQueryChange`."
|
|
59
|
+
},
|
|
60
|
+
"defaultQuery": {
|
|
61
|
+
"type": "string | undefined",
|
|
62
|
+
"required": false,
|
|
63
|
+
"description": "Text to start from while uncontrolled, and to reset to each time the palette opens; `\"\"`."
|
|
64
|
+
},
|
|
65
|
+
"onQueryChange": {
|
|
66
|
+
"type": "((query: string) => void) | undefined",
|
|
67
|
+
"required": false,
|
|
68
|
+
"description": "Called for every edit of the field, in both the controlled and the uncontrolled mode."
|
|
69
|
+
},
|
|
70
|
+
"filter": {
|
|
71
|
+
"type": "CommandPaletteFilter | false | undefined",
|
|
72
|
+
"required": false,
|
|
73
|
+
"description": "Decides which of `groups` an edit keeps; commandPaletteFilter by default. `false` shows\n`groups` as given, for an app that filters them itself or gets them filtered from a server.\nNever applied to `recent` or to the results of `source`."
|
|
74
|
+
},
|
|
75
|
+
"source": {
|
|
76
|
+
"type": "CommandPaletteSource | undefined",
|
|
77
|
+
"required": false,
|
|
78
|
+
"description": "Loads results for the trimmed query, after `debounce` ms of quiet typing. Its `signal` is\naborted when a newer query, a close or an unmount makes the answer useless, and an answer that\narrives for an older query is dropped. Appended after `groups`."
|
|
79
|
+
},
|
|
80
|
+
"debounce": {
|
|
81
|
+
"type": "number | undefined",
|
|
82
|
+
"required": false,
|
|
83
|
+
"description": "Milliseconds of quiet typing before `source` is called; `200` by default."
|
|
84
|
+
},
|
|
85
|
+
"minQueryLength": {
|
|
86
|
+
"type": "number | undefined",
|
|
87
|
+
"required": false,
|
|
88
|
+
"description": "`source` is called only when the trimmed query has at least this many characters; `1` by\ndefault. `0` also loads for the empty query."
|
|
89
|
+
},
|
|
90
|
+
"loading": {
|
|
91
|
+
"type": "boolean | undefined",
|
|
92
|
+
"required": false,
|
|
93
|
+
"description": "App-driven loading: shows the skeleton like a pending `source` does, for an app that loads\nitself with a controlled `query`; `false` by default."
|
|
94
|
+
},
|
|
95
|
+
"onSelect": {
|
|
96
|
+
"type": "((item: CommandPaletteItem, group: CommandPaletteGroup) => void) | undefined",
|
|
97
|
+
"required": false,
|
|
98
|
+
"description": "Called for every chosen item, after the item's own `onSelect`. The place for the app to move the\nitem to the top of its `recent` list."
|
|
99
|
+
},
|
|
100
|
+
"closeOnSelect": {
|
|
101
|
+
"type": "boolean | undefined",
|
|
102
|
+
"required": false,
|
|
103
|
+
"description": "Ask to close when an item is chosen; `true` by default."
|
|
104
|
+
},
|
|
105
|
+
"placeholder": {
|
|
106
|
+
"type": "string | undefined",
|
|
107
|
+
"required": false,
|
|
108
|
+
"description": "Placeholder of the field; `\"Type a command or search…\"` by default. It is not its name."
|
|
109
|
+
},
|
|
110
|
+
"searchLabel": {
|
|
111
|
+
"type": "string | undefined",
|
|
112
|
+
"required": false,
|
|
113
|
+
"description": "Accessible name of the field and, through `aria-labelledby`, of the listbox; `\"Search commands\"`."
|
|
114
|
+
},
|
|
115
|
+
"noResultsText": {
|
|
116
|
+
"type": "string | undefined",
|
|
117
|
+
"required": false,
|
|
118
|
+
"description": "Shown and announced when nothing matches; `\"No results\"` by default."
|
|
119
|
+
},
|
|
120
|
+
"errorText": {
|
|
121
|
+
"type": "string | undefined",
|
|
122
|
+
"required": false,
|
|
123
|
+
"description": "Shown and announced when `source` rejects; `\"Couldn't load results\"` by default."
|
|
124
|
+
},
|
|
125
|
+
"resultsAnnouncement": {
|
|
126
|
+
"type": "((count: number) => string) | undefined",
|
|
127
|
+
"required": false,
|
|
128
|
+
"description": "Text of the polite announcement after a search settles; `\"1 result\"` or `\"N results\"` by\ndefault. Not used for zero results, which announce `noResultsText`."
|
|
129
|
+
},
|
|
130
|
+
"footer": {
|
|
131
|
+
"type": "JSX.Element | undefined",
|
|
132
|
+
"required": false,
|
|
133
|
+
"description": "Slot under the results, for key hints built with `Kbd`. Drawn only when given:\n`<>Press <Kbd keys={[\"Enter\"]} /> to run</>`."
|
|
134
|
+
},
|
|
135
|
+
"class": {
|
|
136
|
+
"type": "string | undefined",
|
|
137
|
+
"required": false,
|
|
138
|
+
"description": "Added to the dialog element, after `smwb-command-palette`."
|
|
139
|
+
},
|
|
140
|
+
"aria-label": {
|
|
141
|
+
"type": "string | undefined",
|
|
142
|
+
"required": false,
|
|
143
|
+
"description": "Name of the dialog; `\"Command palette\"` by default. Not set when `aria-labelledby` is given."
|
|
144
|
+
},
|
|
145
|
+
"aria-labelledby": {
|
|
146
|
+
"type": "string | undefined",
|
|
147
|
+
"required": false,
|
|
148
|
+
"description": "Id of the element that names the dialog; replaces the default `aria-label`."
|
|
149
|
+
},
|
|
150
|
+
"aria-describedby": {
|
|
151
|
+
"type": "string | undefined",
|
|
152
|
+
"required": false,
|
|
153
|
+
"description": "Ids of the elements that describe the dialog."
|
|
154
|
+
},
|
|
155
|
+
"data-testid": {
|
|
156
|
+
"type": "string | undefined",
|
|
157
|
+
"required": false,
|
|
158
|
+
"description": "Test id of the dialog element; `\"command-palette\"` unless given."
|
|
159
|
+
},
|
|
160
|
+
"ref": {
|
|
161
|
+
"type": "Ref<HTMLDivElement> | undefined",
|
|
162
|
+
"required": false,
|
|
163
|
+
"description": "Ref of the dialog element."
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
@@ -74,6 +74,11 @@
|
|
|
74
74
|
"required": false,
|
|
75
75
|
"description": "Accessible label for the built-in collapse toggle."
|
|
76
76
|
},
|
|
77
|
+
"contained": {
|
|
78
|
+
"type": "boolean",
|
|
79
|
+
"required": false,
|
|
80
|
+
"description": "Place the rail inside its container instead of pinning it to the window.\nThe sidebar stays in the page flow (`position: relative`), keeps its\nvariant width as a non-shrinking flex item and scrolls a long menu inside\nitself, so sibling content flows beside it and reflows when it collapses.\nGive the container a definite height (e.g. a fixed-height flex row) to\nmake the rail fill it; with an auto-height container the rail sizes\nitself to the menu. Defaults to `false`: the sidebar stays viewport-fixed."
|
|
81
|
+
},
|
|
77
82
|
"ref": {
|
|
78
83
|
"type": "Ref<HTMLElement>",
|
|
79
84
|
"required": false,
|