@jxsuite/ui 0.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.
Files changed (23) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +11 -0
  3. package/components/jx-action-button.json +414 -0
  4. package/components/jx-button.json +310 -0
  5. package/components/jx-icon.json +81 -0
  6. package/components/jx-menu-item.json +265 -0
  7. package/components/jx-menu.json +122 -0
  8. package/icons/list.json +102 -0
  9. package/icons/manifest.json +348 -0
  10. package/package.json +46 -0
  11. package/project.json +167 -0
  12. package/src/behaviors/menu.ts +396 -0
  13. package/src/documents.ts +23 -0
  14. package/src/icons-build.ts +74 -0
  15. package/src/icons.ts +55 -0
  16. package/src/index.ts +70 -0
  17. package/src/testing/popover-shim.ts +139 -0
  18. package/src/theme.ts +63 -0
  19. package/stylebook/jx-action-button.json +108 -0
  20. package/stylebook/jx-button.json +104 -0
  21. package/stylebook/jx-icon.json +208 -0
  22. package/stylebook/jx-menu-item.json +221 -0
  23. package/stylebook/jx-menu.json +302 -0
package/stylebook/jx-menu.json ADDED
@@ -0,0 +1,302 @@
1
+ {
2
+ "$schema": "https://jxsuite.com/schema/v1",
3
+ "$id": "StylebookMenu",
4
+ "tagName": "main",
5
+ "$elements": [
6
+ {
7
+ "$ref": "../components/jx-icon.json"
8
+ },
9
+ {
10
+ "$ref": "../components/jx-menu-item.json"
11
+ },
12
+ {
13
+ "$ref": "../components/jx-menu.json"
14
+ }
15
+ ],
16
+ "state": {
17
+ "rows": [
18
+ {
19
+ "id": "edit.copy",
20
+ "title": "Copy",
21
+ "chord": "⌘C",
22
+ "disabled": false,
23
+ "requires": "",
24
+ "destructive": false,
25
+ "dividerAbove": false,
26
+ "haspopup": false,
27
+ "checked": "",
28
+ "noDivider": true,
29
+ "noChord": false,
30
+ "enabled": true,
31
+ "noPopup": true
32
+ },
33
+ {
34
+ "id": "edit.paste",
35
+ "title": "Paste",
36
+ "chord": "⌘V",
37
+ "disabled": true,
38
+ "requires": "something on the clipboard",
39
+ "destructive": false,
40
+ "dividerAbove": false,
41
+ "haspopup": false,
42
+ "checked": "",
43
+ "noDivider": true,
44
+ "noChord": false,
45
+ "enabled": false,
46
+ "noPopup": true
47
+ },
48
+ {
49
+ "id": "view.grid",
50
+ "title": "Show grid",
51
+ "chord": "",
52
+ "disabled": false,
53
+ "requires": "",
54
+ "destructive": false,
55
+ "dividerAbove": true,
56
+ "haspopup": false,
57
+ "checked": "true",
58
+ "noDivider": false,
59
+ "noChord": true,
60
+ "enabled": true,
61
+ "noPopup": true
62
+ },
63
+ {
64
+ "id": "settings.open",
65
+ "title": "Project settings",
66
+ "chord": "⌘,",
67
+ "disabled": false,
68
+ "requires": "",
69
+ "destructive": false,
70
+ "dividerAbove": true,
71
+ "haspopup": true,
72
+ "checked": "",
73
+ "noDivider": false,
74
+ "noChord": false,
75
+ "enabled": true,
76
+ "noPopup": false
77
+ },
78
+ {
79
+ "id": "selection.delete",
80
+ "title": "Delete",
81
+ "chord": "⌫",
82
+ "disabled": false,
83
+ "requires": "",
84
+ "destructive": true,
85
+ "dividerAbove": true,
86
+ "haspopup": false,
87
+ "checked": "",
88
+ "noDivider": false,
89
+ "noChord": false,
90
+ "enabled": true,
91
+ "noPopup": true
92
+ }
93
+ ],
94
+ "sections": [
95
+ {
96
+ "id": "general",
97
+ "title": "General"
98
+ },
99
+ {
100
+ "id": "media",
101
+ "title": "Media"
102
+ },
103
+ {
104
+ "id": "locales",
105
+ "title": "Locales"
106
+ }
107
+ ],
108
+ "last": "",
109
+ "note": {
110
+ "$prototype": "Function",
111
+ "parameters": ["event"],
112
+ "body": [
113
+ {
114
+ "operator": "=",
115
+ "target": {
116
+ "$ref": "#/state/last"
117
+ },
118
+ "value": {
119
+ "$ref": "event#/detail"
120
+ }
121
+ }
122
+ ]
123
+ }
124
+ },
125
+ "style": {
126
+ "fontFamily": "var(--jx-font-sans)",
127
+ "fontSize": "var(--jx-text-md)",
128
+ "color": "var(--jx-fg)",
129
+ "background": "var(--jx-bg)",
130
+ "padding": "var(--jx-space-6)",
131
+ "minHeight": "100vh",
132
+ "& > h1": {
133
+ "fontSize": "var(--jx-text-lg)",
134
+ "fontWeight": "600",
135
+ "margin": "0 0 var(--jx-space-5)"
136
+ },
137
+ "& > p": {
138
+ "color": "var(--jx-fg-dim)",
139
+ "margin": "0 0 var(--jx-space-5)"
140
+ },
141
+ "& > button": {
142
+ "font": "inherit",
143
+ "color": "var(--jx-fg)",
144
+ "background": "var(--jx-bg-input)",
145
+ "border": "1px solid var(--jx-border)",
146
+ "borderRadius": "var(--jx-radius-sm)",
147
+ "padding": "var(--jx-space-2) var(--jx-space-4)"
148
+ }
149
+ },
150
+ "children": [
151
+ {
152
+ "tagName": "h1",
153
+ "textContent": "jx-menu"
154
+ },
155
+ {
156
+ "tagName": "p",
157
+ "textContent": "A menu is a native popover panel. Rows print what they are given: a title, a chord, a disabled reason. The fourth row owns a submenu and still runs its own command."
158
+ },
159
+ {
160
+ "tagName": "button",
161
+ "textContent": "Open menu",
162
+ "attributes": {
163
+ "popovertarget": "stylebook-menu"
164
+ }
165
+ },
166
+ {
167
+ "tagName": "p",
168
+ "textContent": "Last selected: ${state.last}"
169
+ },
170
+ {
171
+ "tagName": "jx-menu",
172
+ "id": "stylebook-menu",
173
+ "$props": {
174
+ "label": "Stylebook actions",
175
+ "x": 24,
176
+ "y": 120
177
+ },
178
+ "onselect": {
179
+ "$ref": "#/state/note"
180
+ },
181
+ "children": [
182
+ {
183
+ "$prototype": "Array",
184
+ "items": {
185
+ "$ref": "#/state/rows"
186
+ },
187
+ "key": {
188
+ "$ref": "$map/item/id"
189
+ },
190
+ "map": {
191
+ "tagName": "div",
192
+ "attributes": {
193
+ "role": "none"
194
+ },
195
+ "children": [
196
+ {
197
+ "tagName": "hr",
198
+ "hidden": {
199
+ "$ref": "$map/item/noDivider"
200
+ }
201
+ },
202
+ {
203
+ "tagName": "jx-menu-item",
204
+ "$props": {
205
+ "value": {
206
+ "$ref": "$map/item/id"
207
+ },
208
+ "disabled": {
209
+ "$ref": "$map/item/disabled"
210
+ },
211
+ "destructive": {
212
+ "$ref": "$map/item/destructive"
213
+ },
214
+ "requires": {
215
+ "$ref": "$map/item/requires"
216
+ },
217
+ "haspopup": {
218
+ "$ref": "$map/item/haspopup"
219
+ },
220
+ "checked": {
221
+ "$ref": "$map/item/checked"
222
+ }
223
+ },
224
+ "attributes": {
225
+ "data-command-id": "${$map.item.id}"
226
+ },
227
+ "children": [
228
+ {
229
+ "tagName": "span",
230
+ "textContent": "${$map.item.title}"
231
+ },
232
+ {
233
+ "tagName": "kbd",
234
+ "attributes": {
235
+ "slot": "value"
236
+ },
237
+ "hidden": {
238
+ "$ref": "$map/item/noChord"
239
+ },
240
+ "textContent": "${$map.item.chord}"
241
+ },
242
+ {
243
+ "tagName": "span",
244
+ "attributes": {
245
+ "slot": "description"
246
+ },
247
+ "hidden": {
248
+ "$ref": "$map/item/enabled"
249
+ },
250
+ "textContent": "Needs ${$map.item.requires}"
251
+ },
252
+ {
253
+ "tagName": "span",
254
+ "attributes": {
255
+ "slot": "submenu"
256
+ },
257
+ "$switch": {
258
+ "$ref": "$map/item/haspopup"
259
+ },
260
+ "cases": {
261
+ "true": {
262
+ "tagName": "jx-menu",
263
+ "$props": {
264
+ "label": "Sections of ${$map.item.title}"
265
+ },
266
+ "children": [
267
+ {
268
+ "$prototype": "Array",
269
+ "items": {
270
+ "$ref": "#/state/sections"
271
+ },
272
+ "key": {
273
+ "$ref": "$map/item/id"
274
+ },
275
+ "map": {
276
+ "tagName": "jx-menu-item",
277
+ "$props": {
278
+ "value": {
279
+ "$ref": "$map/item/id"
280
+ }
281
+ },
282
+ "children": [
283
+ {
284
+ "tagName": "span",
285
+ "textContent": "${$map.item.title}"
286
+ }
287
+ ]
288
+ }
289
+ }
290
+ ]
291
+ }
292
+ }
293
+ }
294
+ ]
295
+ }
296
+ ]
297
+ }
298
+ }
299
+ ]
300
+ }
301
+ ]
302
+ }