jsswift 1.0.44 → 1.0.45
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/css/base.css +2 -137
- package/dist/css/fonts-material.css +7 -0
- package/dist/css/fonts-nunito.css +134 -0
- package/dist/css/min-ui.css +1 -1
- package/dist/css/ui.css +2 -137
- package/dist/css/ui.min.css +1 -1
- package/dist/documentions/README.md +2 -0
- package/dist/documentions/application-rules.md +12 -0
- package/dist/documentions/components/btn.md +35 -416
- package/dist/documentions/components/card.md +62 -594
- package/dist/documentions/components/dialog.md +81 -626
- package/dist/documentions/components/input.md +73 -617
- package/dist/documentions/components/pagination.md +54 -529
- package/dist/documentions/components/select.md +84 -658
- package/dist/documentions/components/table.md +93 -655
- package/dist/documentions/getting-started.md +27 -0
- package/dist/documentions/knowledge-map.json +1 -1
- package/dist/tabler.js +7 -0
- package/package.json +5 -2
|
@@ -6,640 +6,95 @@ Exact JSswift UI metadata contract. Use only the props, slots, events, and metho
|
|
|
6
6
|
{
|
|
7
7
|
"signature": "_.Dialog(props) | _.Dialog(props, ...children) -> { open, close, toggle, update, isOpen }",
|
|
8
8
|
"props": {
|
|
9
|
-
"size": {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
},
|
|
27
|
-
"
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
},
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
},
|
|
61
|
-
"
|
|
62
|
-
|
|
63
|
-
"description": "Enables pointer/hover styles and click handling on the component.",
|
|
64
|
-
"default": false,
|
|
65
|
-
"values": null,
|
|
66
|
-
"category": "behavior"
|
|
67
|
-
},
|
|
68
|
-
"padding": {
|
|
69
|
-
"type": "string|number",
|
|
70
|
-
"description": "Padding applied to the component root element.",
|
|
71
|
-
"default": null,
|
|
72
|
-
"values": [
|
|
73
|
-
"number",
|
|
74
|
-
"CSS units",
|
|
75
|
-
"xxs",
|
|
76
|
-
"xs",
|
|
77
|
-
"sm",
|
|
78
|
-
"md",
|
|
79
|
-
"lg",
|
|
80
|
-
"xl",
|
|
81
|
-
"xxl",
|
|
82
|
-
"xxxl"
|
|
83
|
-
],
|
|
84
|
-
"category": "layout"
|
|
85
|
-
},
|
|
86
|
-
"margin": {
|
|
87
|
-
"type": "string|number",
|
|
88
|
-
"description": "Margin applied to the component root element.",
|
|
89
|
-
"default": null,
|
|
90
|
-
"values": [
|
|
91
|
-
"number",
|
|
92
|
-
"CSS units",
|
|
93
|
-
"xxs",
|
|
94
|
-
"xs",
|
|
95
|
-
"sm",
|
|
96
|
-
"md",
|
|
97
|
-
"lg",
|
|
98
|
-
"xl",
|
|
99
|
-
"xxl",
|
|
100
|
-
"xxxl"
|
|
101
|
-
],
|
|
102
|
-
"category": "layout"
|
|
103
|
-
},
|
|
104
|
-
"width": {
|
|
105
|
-
"type": "string|number",
|
|
106
|
-
"description": "Explicit width (number interpreted as px or CSS length).",
|
|
107
|
-
"default": null,
|
|
108
|
-
"values": [
|
|
109
|
-
"number",
|
|
110
|
-
"CSS units",
|
|
111
|
-
"xxs",
|
|
112
|
-
"xs",
|
|
113
|
-
"sm",
|
|
114
|
-
"md",
|
|
115
|
-
"lg",
|
|
116
|
-
"xl",
|
|
117
|
-
"xxl",
|
|
118
|
-
"xxxl"
|
|
119
|
-
],
|
|
120
|
-
"category": "layout"
|
|
121
|
-
},
|
|
122
|
-
"minWidth": {
|
|
123
|
-
"type": "string|number",
|
|
124
|
-
"description": "Minimum width constraint (number interpreted as px or CSS length).",
|
|
125
|
-
"default": null,
|
|
126
|
-
"values": [
|
|
127
|
-
"number",
|
|
128
|
-
"CSS units",
|
|
129
|
-
"xxs",
|
|
130
|
-
"xs",
|
|
131
|
-
"sm",
|
|
132
|
-
"md",
|
|
133
|
-
"lg",
|
|
134
|
-
"xl",
|
|
135
|
-
"xxl",
|
|
136
|
-
"xxxl"
|
|
137
|
-
],
|
|
138
|
-
"category": "layout"
|
|
139
|
-
},
|
|
140
|
-
"maxWidth": {
|
|
141
|
-
"type": "string|number",
|
|
142
|
-
"description": "Maximum width constraint (number interpreted as px or CSS length).",
|
|
143
|
-
"default": null,
|
|
144
|
-
"values": [
|
|
145
|
-
"number",
|
|
146
|
-
"CSS units",
|
|
147
|
-
"xxs",
|
|
148
|
-
"xs",
|
|
149
|
-
"sm",
|
|
150
|
-
"md",
|
|
151
|
-
"lg",
|
|
152
|
-
"xl",
|
|
153
|
-
"xxl",
|
|
154
|
-
"xxxl"
|
|
155
|
-
],
|
|
156
|
-
"category": "layout"
|
|
157
|
-
},
|
|
158
|
-
"height": {
|
|
159
|
-
"type": "string|number",
|
|
160
|
-
"description": "Explicit height (number interpreted as px or CSS length).",
|
|
161
|
-
"default": null,
|
|
162
|
-
"values": [
|
|
163
|
-
"number",
|
|
164
|
-
"CSS units",
|
|
165
|
-
"xxs",
|
|
166
|
-
"xs",
|
|
167
|
-
"sm",
|
|
168
|
-
"md",
|
|
169
|
-
"lg",
|
|
170
|
-
"xl",
|
|
171
|
-
"xxl",
|
|
172
|
-
"xxxl"
|
|
173
|
-
],
|
|
174
|
-
"category": "layout"
|
|
175
|
-
},
|
|
176
|
-
"minHeight": {
|
|
177
|
-
"type": "string|number",
|
|
178
|
-
"description": "Minimum height constraint (number interpreted as px or CSS length).",
|
|
179
|
-
"default": null,
|
|
180
|
-
"values": [
|
|
181
|
-
"number",
|
|
182
|
-
"CSS units",
|
|
183
|
-
"xxs",
|
|
184
|
-
"xs",
|
|
185
|
-
"sm",
|
|
186
|
-
"md",
|
|
187
|
-
"lg",
|
|
188
|
-
"xl",
|
|
189
|
-
"xxl",
|
|
190
|
-
"xxxl"
|
|
191
|
-
],
|
|
192
|
-
"category": "layout"
|
|
193
|
-
},
|
|
194
|
-
"maxHeight": {
|
|
195
|
-
"type": "string|number",
|
|
196
|
-
"description": "Maximum height constraint (number interpreted as px or CSS length).",
|
|
197
|
-
"default": null,
|
|
198
|
-
"values": [
|
|
199
|
-
"number",
|
|
200
|
-
"CSS units",
|
|
201
|
-
"xxs",
|
|
202
|
-
"xs",
|
|
203
|
-
"sm",
|
|
204
|
-
"md",
|
|
205
|
-
"lg",
|
|
206
|
-
"xl",
|
|
207
|
-
"xxl",
|
|
208
|
-
"xxxl"
|
|
209
|
-
],
|
|
210
|
-
"category": "layout"
|
|
211
|
-
},
|
|
212
|
-
"radius": {
|
|
213
|
-
"type": "string|number",
|
|
214
|
-
"description": "Border radius token or CSS length applied to the component.",
|
|
215
|
-
"default": null,
|
|
216
|
-
"values": [
|
|
217
|
-
"number",
|
|
218
|
-
"CSS units",
|
|
219
|
-
"xxs",
|
|
220
|
-
"xs",
|
|
221
|
-
"sm",
|
|
222
|
-
"md",
|
|
223
|
-
"lg",
|
|
224
|
-
"xl",
|
|
225
|
-
"xxl",
|
|
226
|
-
"xxxl"
|
|
227
|
-
],
|
|
228
|
-
"category": "style"
|
|
229
|
-
},
|
|
230
|
-
"borderRadius": {
|
|
231
|
-
"type": "string|number",
|
|
232
|
-
"description": "Border radius token or CSS length applied to the component.",
|
|
233
|
-
"default": null,
|
|
234
|
-
"values": [
|
|
235
|
-
"number",
|
|
236
|
-
"CSS units",
|
|
237
|
-
"xxs",
|
|
238
|
-
"xs",
|
|
239
|
-
"sm",
|
|
240
|
-
"md",
|
|
241
|
-
"lg",
|
|
242
|
-
"xl",
|
|
243
|
-
"xxl",
|
|
244
|
-
"xxxl"
|
|
245
|
-
],
|
|
246
|
-
"category": "style"
|
|
247
|
-
},
|
|
248
|
-
"shadow": {
|
|
249
|
-
"type": "string|boolean",
|
|
250
|
-
"description": "Shadow token or CSS box-shadow string applied to the component.",
|
|
251
|
-
"default": null,
|
|
252
|
-
"values": [
|
|
253
|
-
"none",
|
|
254
|
-
"xxs",
|
|
255
|
-
"xs",
|
|
256
|
-
"sm",
|
|
257
|
-
"md",
|
|
258
|
-
"lg",
|
|
259
|
-
"xl",
|
|
260
|
-
"xxl",
|
|
261
|
-
"xxxl"
|
|
262
|
-
],
|
|
263
|
-
"category": "style"
|
|
264
|
-
},
|
|
265
|
-
"mobile": {
|
|
266
|
-
"type": "object",
|
|
267
|
-
"description": "Responsive overrides applied at the base/mobile viewport.",
|
|
268
|
-
"default": null,
|
|
269
|
-
"values": null,
|
|
270
|
-
"category": "layout"
|
|
271
|
-
},
|
|
272
|
-
"tablet": {
|
|
273
|
-
"type": "object",
|
|
274
|
-
"description": "Responsive overrides applied from the tablet breakpoint upward.",
|
|
275
|
-
"default": null,
|
|
276
|
-
"values": null,
|
|
277
|
-
"category": "layout"
|
|
278
|
-
},
|
|
279
|
-
"pc": {
|
|
280
|
-
"type": "object",
|
|
281
|
-
"description": "Responsive overrides applied from the desktop breakpoint upward.",
|
|
282
|
-
"default": null,
|
|
283
|
-
"values": null,
|
|
284
|
-
"category": "layout"
|
|
285
|
-
},
|
|
286
|
-
"class": {
|
|
287
|
-
"type": "string",
|
|
288
|
-
"description": "Additional CSS classes applied to the component root element.",
|
|
289
|
-
"default": null,
|
|
290
|
-
"values": null,
|
|
291
|
-
"category": "style"
|
|
292
|
-
},
|
|
293
|
-
"style": {
|
|
294
|
-
"type": "object",
|
|
295
|
-
"description": "Inline styles applied to the component root element.",
|
|
296
|
-
"default": null,
|
|
297
|
-
"values": null,
|
|
298
|
-
"category": "style"
|
|
299
|
-
},
|
|
300
|
-
"title": {
|
|
301
|
-
"type": "String|Node|Function|Array|({ close })=>Node",
|
|
302
|
-
"description": "Title text or node.",
|
|
303
|
-
"default": null,
|
|
304
|
-
"values": null,
|
|
305
|
-
"category": "general"
|
|
306
|
-
},
|
|
307
|
-
"subtitle": {
|
|
308
|
-
"type": "String|Node|Function|Array|({ close })=>Node",
|
|
309
|
-
"description": "Subtitle text or node.",
|
|
310
|
-
"default": null,
|
|
311
|
-
"values": null,
|
|
312
|
-
"category": "general"
|
|
313
|
-
},
|
|
314
|
-
"eyebrow": {
|
|
315
|
-
"type": "String|Node|Function|Array|({ close })=>Node",
|
|
316
|
-
"description": "Component configuration for \"eyebrow\". When not handled internally, it is forwarded to the root element.",
|
|
317
|
-
"default": null,
|
|
318
|
-
"values": null,
|
|
319
|
-
"category": "general"
|
|
320
|
-
},
|
|
321
|
-
"icon": {
|
|
322
|
-
"type": "String|Node|Function|Array",
|
|
323
|
-
"description": "Icon name or node rendered with the component.",
|
|
324
|
-
"default": null,
|
|
325
|
-
"values": [
|
|
326
|
-
"#name_tabler",
|
|
327
|
-
"name_material",
|
|
328
|
-
"class"
|
|
329
|
-
],
|
|
330
|
-
"category": "general"
|
|
331
|
-
},
|
|
332
|
-
"content": {
|
|
333
|
-
"type": "Node|Function|Array|({ close })=>Node",
|
|
334
|
-
"description": "Main content node(s) or render function for the component body.",
|
|
335
|
-
"default": null,
|
|
336
|
-
"values": null,
|
|
337
|
-
"category": "general"
|
|
338
|
-
},
|
|
339
|
-
"body": {
|
|
340
|
-
"type": "Alias of content",
|
|
341
|
-
"description": "Component configuration for \"body\". When not handled internally, it is forwarded to the root element.",
|
|
342
|
-
"default": null,
|
|
343
|
-
"values": null,
|
|
344
|
-
"category": "general"
|
|
345
|
-
},
|
|
346
|
-
"actions": {
|
|
347
|
-
"type": "Node|Function|Array|({ close })=>Node",
|
|
348
|
-
"description": "Content rendered in the action area, typically in a footer or trailing region.",
|
|
349
|
-
"default": null,
|
|
350
|
-
"values": null,
|
|
351
|
-
"category": "general"
|
|
352
|
-
},
|
|
353
|
-
"footer": {
|
|
354
|
-
"type": "Alias of actions",
|
|
355
|
-
"description": "Footer content node(s) or render function.",
|
|
356
|
-
"default": null,
|
|
357
|
-
"values": null,
|
|
358
|
-
"category": "general"
|
|
359
|
-
},
|
|
360
|
-
"state": {
|
|
361
|
-
"type": "primary|secondary|warning|danger|success|info|light|dark",
|
|
362
|
-
"description": "Component configuration for \"state\". When not handled internally, it is forwarded to the root element.",
|
|
363
|
-
"default": null,
|
|
364
|
-
"values": null,
|
|
365
|
-
"category": "general"
|
|
366
|
-
},
|
|
367
|
-
"bodyMaxHeight": {
|
|
368
|
-
"type": "string|number",
|
|
369
|
-
"description": "Component configuration for \"bodyMaxHeight\". When not handled internally, it is forwarded to the root element.",
|
|
370
|
-
"default": null,
|
|
371
|
-
"values": null,
|
|
372
|
-
"category": "general"
|
|
373
|
-
},
|
|
374
|
-
"persistent": {
|
|
375
|
-
"type": "boolean",
|
|
376
|
-
"description": "Prevents closing via outside click or Escape.",
|
|
377
|
-
"default": null,
|
|
378
|
-
"values": null,
|
|
379
|
-
"category": "general"
|
|
380
|
-
},
|
|
381
|
-
"closable": {
|
|
382
|
-
"type": "boolean",
|
|
383
|
-
"description": "Component configuration for \"closable\". When not handled internally, it is forwarded to the root element.",
|
|
384
|
-
"default": null,
|
|
385
|
-
"values": null,
|
|
386
|
-
"category": "general"
|
|
387
|
-
},
|
|
388
|
-
"closeButton": {
|
|
389
|
-
"type": "boolean",
|
|
390
|
-
"description": "Component configuration for \"closeButton\". When not handled internally, it is forwarded to the root element.",
|
|
391
|
-
"default": null,
|
|
392
|
-
"values": null,
|
|
393
|
-
"category": "general"
|
|
394
|
-
},
|
|
395
|
-
"closeIcon": {
|
|
396
|
-
"type": "string",
|
|
397
|
-
"description": "Component configuration for \"closeIcon\". When not handled internally, it is forwarded to the root element.",
|
|
398
|
-
"default": null,
|
|
399
|
-
"values": null,
|
|
400
|
-
"category": "general"
|
|
401
|
-
},
|
|
402
|
-
"align": {
|
|
403
|
-
"type": "top|center|bottom",
|
|
404
|
-
"description": "Alignment of content along the cross axis (e.g. left/center/right).",
|
|
405
|
-
"default": null,
|
|
406
|
-
"values": [
|
|
407
|
-
"left",
|
|
408
|
-
"center",
|
|
409
|
-
"right"
|
|
410
|
-
],
|
|
411
|
-
"category": "general"
|
|
412
|
-
},
|
|
413
|
-
"actionsAlign": {
|
|
414
|
-
"type": "start|center|end|between|stretch",
|
|
415
|
-
"description": "Component configuration for \"actionsAlign\". When not handled internally, it is forwarded to the root element.",
|
|
416
|
-
"default": null,
|
|
417
|
-
"values": null,
|
|
418
|
-
"category": "general"
|
|
419
|
-
},
|
|
420
|
-
"stickyHeader": {
|
|
421
|
-
"type": "boolean",
|
|
422
|
-
"description": "Keeps the header region sticky during scroll.",
|
|
423
|
-
"default": null,
|
|
424
|
-
"values": null,
|
|
425
|
-
"category": "general"
|
|
426
|
-
},
|
|
427
|
-
"stickyActions": {
|
|
428
|
-
"type": "boolean",
|
|
429
|
-
"description": "Component configuration for \"stickyActions\". When not handled internally, it is forwarded to the root element.",
|
|
430
|
-
"default": null,
|
|
431
|
-
"values": null,
|
|
432
|
-
"category": "general"
|
|
433
|
-
},
|
|
434
|
-
"scrollable": {
|
|
435
|
-
"type": "boolean",
|
|
436
|
-
"description": "Component configuration for \"scrollable\". When not handled internally, it is forwarded to the root element.",
|
|
437
|
-
"default": null,
|
|
438
|
-
"values": null,
|
|
439
|
-
"category": "general"
|
|
440
|
-
},
|
|
441
|
-
"stackActions": {
|
|
442
|
-
"type": "boolean",
|
|
443
|
-
"description": "Component configuration for \"stackActions\". When not handled internally, it is forwarded to the root element.",
|
|
444
|
-
"default": null,
|
|
445
|
-
"values": null,
|
|
446
|
-
"category": "general"
|
|
447
|
-
},
|
|
448
|
-
"fullscreen": {
|
|
449
|
-
"type": "boolean",
|
|
450
|
-
"description": "Component configuration for \"fullscreen\". When not handled internally, it is forwarded to the root element.",
|
|
451
|
-
"default": null,
|
|
452
|
-
"values": null,
|
|
453
|
-
"category": "general"
|
|
454
|
-
},
|
|
455
|
-
"backdrop": {
|
|
456
|
-
"type": "boolean",
|
|
457
|
-
"description": "Whether to render a backdrop overlay behind the component.",
|
|
458
|
-
"default": null,
|
|
459
|
-
"values": null,
|
|
460
|
-
"category": "general"
|
|
461
|
-
},
|
|
462
|
-
"backdropBlur": {
|
|
463
|
-
"type": "boolean",
|
|
464
|
-
"description": "Component configuration for \"backdropBlur\". When not handled internally, it is forwarded to the root element.",
|
|
465
|
-
"default": null,
|
|
466
|
-
"values": null,
|
|
467
|
-
"category": "general"
|
|
468
|
-
},
|
|
469
|
-
"lockScroll": {
|
|
470
|
-
"type": "boolean",
|
|
471
|
-
"description": "Prevents body scroll while an overlay is open.",
|
|
472
|
-
"default": null,
|
|
473
|
-
"values": null,
|
|
474
|
-
"category": "general"
|
|
475
|
-
},
|
|
476
|
-
"trapFocus": {
|
|
477
|
-
"type": "boolean",
|
|
478
|
-
"description": "Keeps focus trapped inside the dialog/popover.",
|
|
479
|
-
"default": null,
|
|
480
|
-
"values": null,
|
|
481
|
-
"category": "general"
|
|
482
|
-
},
|
|
483
|
-
"autoFocus": {
|
|
484
|
-
"type": "boolean",
|
|
485
|
-
"description": "Component configuration for \"autoFocus\". When not handled internally, it is forwarded to the root element.",
|
|
486
|
-
"default": null,
|
|
487
|
-
"values": null,
|
|
488
|
-
"category": "general"
|
|
489
|
-
},
|
|
490
|
-
"closeOnOutside": {
|
|
491
|
-
"type": "boolean",
|
|
492
|
-
"description": "Closes the component when clicking outside its bounds.",
|
|
493
|
-
"default": null,
|
|
494
|
-
"values": null,
|
|
495
|
-
"category": "general"
|
|
496
|
-
},
|
|
497
|
-
"closeOnBackdrop": {
|
|
498
|
-
"type": "boolean",
|
|
499
|
-
"description": "Component configuration for \"closeOnBackdrop\". When not handled internally, it is forwarded to the root element.",
|
|
500
|
-
"default": null,
|
|
501
|
-
"values": null,
|
|
502
|
-
"category": "general"
|
|
503
|
-
},
|
|
504
|
-
"closeOnEsc": {
|
|
505
|
-
"type": "boolean",
|
|
506
|
-
"description": "Closes the component when the Escape key is pressed.",
|
|
507
|
-
"default": null,
|
|
508
|
-
"values": null,
|
|
509
|
-
"category": "general"
|
|
510
|
-
},
|
|
511
|
-
"slots": {
|
|
512
|
-
"type": "{ icon?, eyebrow?, title?, subtitle?, header?, content?, body?, footer?, actions?, close?, default? }",
|
|
513
|
-
"description": "Named slots map for render overrides.",
|
|
514
|
-
"default": null,
|
|
515
|
-
"values": null,
|
|
516
|
-
"category": "general"
|
|
517
|
-
},
|
|
518
|
-
"panelClass": {
|
|
519
|
-
"type": "string",
|
|
520
|
-
"description": "Component configuration for \"panelClass\". When not handled internally, it is forwarded to the root element.",
|
|
521
|
-
"default": null,
|
|
522
|
-
"values": null,
|
|
523
|
-
"category": "general"
|
|
524
|
-
},
|
|
525
|
-
"overlayClass": {
|
|
526
|
-
"type": "string",
|
|
527
|
-
"description": "Component configuration for \"overlayClass\". When not handled internally, it is forwarded to the root element.",
|
|
528
|
-
"default": null,
|
|
529
|
-
"values": null,
|
|
530
|
-
"category": "general"
|
|
531
|
-
},
|
|
532
|
-
"children": {
|
|
533
|
-
"type": "Node|Array|Function",
|
|
534
|
-
"description": "Default child content (nodes, arrays, or render function).",
|
|
535
|
-
"default": null,
|
|
536
|
-
"values": null,
|
|
537
|
-
"category": "general"
|
|
538
|
-
},
|
|
539
|
-
"iconRight": {
|
|
540
|
-
"type": "String|Node|Function|Array",
|
|
541
|
-
"description": "Icon name or node rendered on the right side of the component.",
|
|
542
|
-
"default": null,
|
|
543
|
-
"values": [
|
|
544
|
-
"#name_tabler",
|
|
545
|
-
"name_material",
|
|
546
|
-
"class"
|
|
547
|
-
],
|
|
548
|
-
"category": "general"
|
|
549
|
-
}
|
|
9
|
+
"size": {"type": "xs|sm|md|lg|xl|full", "description": "Size token, number, or CSS length for sizing.", "default": null, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "style"},
|
|
10
|
+
"color": {"type": "Alias of state", "description": "Semantic color name used to style the component.", "default": null, "values": ["primary", "secondary", "success", "warning", "danger", "info", "light", "dark"], "category": "style"},
|
|
11
|
+
"outline": {"type": "boolean", "description": "Uses outlined visual style.", "default": false, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "style"},
|
|
12
|
+
"clickable": {"type": "boolean", "description": "Enables pointer/hover styles and click handling on the component.", "default": false, "values": null, "category": "behavior"},
|
|
13
|
+
"padding": {"type": "string|number", "description": "Padding applied to the component root element.", "default": null, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "layout"},
|
|
14
|
+
"margin": {"type": "string|number", "description": "Margin applied to the component root element.", "default": null, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "layout"},
|
|
15
|
+
"width": {"type": "string|number", "description": "Explicit width (number interpreted as px or CSS length).", "default": null, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "layout"},
|
|
16
|
+
"minWidth": {"type": "string|number", "description": "Minimum width constraint (number interpreted as px or CSS length).", "default": null, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "layout"},
|
|
17
|
+
"maxWidth": {"type": "string|number", "description": "Maximum width constraint (number interpreted as px or CSS length).", "default": null, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "layout"},
|
|
18
|
+
"height": {"type": "string|number", "description": "Explicit height (number interpreted as px or CSS length).", "default": null, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "layout"},
|
|
19
|
+
"minHeight": {"type": "string|number", "description": "Minimum height constraint (number interpreted as px or CSS length).", "default": null, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "layout"},
|
|
20
|
+
"maxHeight": {"type": "string|number", "description": "Maximum height constraint (number interpreted as px or CSS length).", "default": null, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "layout"},
|
|
21
|
+
"radius": {"type": "string|number", "description": "Border radius token or CSS length applied to the component.", "default": null, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "style"},
|
|
22
|
+
"borderRadius": {"type": "string|number", "description": "Border radius token or CSS length applied to the component.", "default": null, "values": ["number", "CSS units", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "style"},
|
|
23
|
+
"shadow": {"type": "string|boolean", "description": "Shadow token or CSS box-shadow string applied to the component.", "default": null, "values": ["none", "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], "category": "style"},
|
|
24
|
+
"mobile": {"type": "object", "description": "Responsive overrides applied at the base/mobile viewport.", "default": null, "values": null, "category": "layout"},
|
|
25
|
+
"tablet": {"type": "object", "description": "Responsive overrides applied from the tablet breakpoint upward.", "default": null, "values": null, "category": "layout"},
|
|
26
|
+
"pc": {"type": "object", "description": "Responsive overrides applied from the desktop breakpoint upward.", "default": null, "values": null, "category": "layout"},
|
|
27
|
+
"class": {"type": "string", "description": "Additional CSS classes applied to the component root element.", "default": null, "values": null, "category": "style"},
|
|
28
|
+
"style": {"type": "object", "description": "Inline styles applied to the component root element.", "default": null, "values": null, "category": "style"},
|
|
29
|
+
"title": {"type": "String|Node|Function|Array|({ close })=>Node", "description": "Title text or node.", "default": null, "values": null, "category": "general"},
|
|
30
|
+
"subtitle": {"type": "String|Node|Function|Array|({ close })=>Node", "description": "Subtitle text or node.", "default": null, "values": null, "category": "general"},
|
|
31
|
+
"eyebrow": {"type": "String|Node|Function|Array|({ close })=>Node", "description": "Component configuration for \"eyebrow\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
32
|
+
"icon": {"type": "String|Node|Function|Array", "description": "Icon name or node rendered with the component.", "default": null, "values": ["#name_tabler", "name_material", "class"], "category": "general"},
|
|
33
|
+
"content": {"type": "Node|Function|Array|({ close })=>Node", "description": "Main content node(s) or render function for the component body.", "default": null, "values": null, "category": "general"},
|
|
34
|
+
"body": {"type": "Alias of content", "description": "Component configuration for \"body\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
35
|
+
"actions": {"type": "Node|Function|Array|({ close })=>Node", "description": "Content rendered in the action area, typically in a footer or trailing region.", "default": null, "values": null, "category": "general"},
|
|
36
|
+
"footer": {"type": "Alias of actions", "description": "Footer content node(s) or render function.", "default": null, "values": null, "category": "general"},
|
|
37
|
+
"state": {"type": "primary|secondary|warning|danger|success|info|light|dark", "description": "Component configuration for \"state\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
38
|
+
"bodyMaxHeight": {"type": "string|number", "description": "Component configuration for \"bodyMaxHeight\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
39
|
+
"persistent": {"type": "boolean", "description": "Prevents closing via outside click or Escape.", "default": null, "values": null, "category": "general"},
|
|
40
|
+
"closable": {"type": "boolean", "description": "Component configuration for \"closable\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
41
|
+
"closeButton": {"type": "boolean", "description": "Component configuration for \"closeButton\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
42
|
+
"closeIcon": {"type": "string", "description": "Component configuration for \"closeIcon\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
43
|
+
"align": {"type": "top|center|bottom", "description": "Alignment of content along the cross axis (e.g. left/center/right).", "default": null, "values": ["left", "center", "right"], "category": "general"},
|
|
44
|
+
"actionsAlign": {"type": "start|center|end|between|stretch", "description": "Component configuration for \"actionsAlign\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
45
|
+
"stickyHeader": {"type": "boolean", "description": "Keeps the header region sticky during scroll.", "default": null, "values": null, "category": "general"},
|
|
46
|
+
"stickyActions": {"type": "boolean", "description": "Component configuration for \"stickyActions\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
47
|
+
"scrollable": {"type": "boolean", "description": "Component configuration for \"scrollable\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
48
|
+
"stackActions": {"type": "boolean", "description": "Component configuration for \"stackActions\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
49
|
+
"fullscreen": {"type": "boolean", "description": "Component configuration for \"fullscreen\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
50
|
+
"backdrop": {"type": "boolean", "description": "Whether to render a backdrop overlay behind the component.", "default": null, "values": null, "category": "general"},
|
|
51
|
+
"backdropBlur": {"type": "boolean", "description": "Component configuration for \"backdropBlur\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
52
|
+
"lockScroll": {"type": "boolean", "description": "Prevents body scroll while an overlay is open.", "default": null, "values": null, "category": "general"},
|
|
53
|
+
"trapFocus": {"type": "boolean", "description": "Keeps focus trapped inside the dialog/popover.", "default": null, "values": null, "category": "general"},
|
|
54
|
+
"autoFocus": {"type": "boolean", "description": "Component configuration for \"autoFocus\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
55
|
+
"closeOnOutside": {"type": "boolean", "description": "Closes the component when clicking outside its bounds.", "default": null, "values": null, "category": "general"},
|
|
56
|
+
"closeOnBackdrop": {"type": "boolean", "description": "Component configuration for \"closeOnBackdrop\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
57
|
+
"closeOnEsc": {"type": "boolean", "description": "Closes the component when the Escape key is pressed.", "default": null, "values": null, "category": "general"},
|
|
58
|
+
"slots": {"type": "{ icon?, eyebrow?, title?, subtitle?, header?, content?, body?, footer?, actions?, close?, default? }", "description": "Named slots map for render overrides.", "default": null, "values": null, "category": "general"},
|
|
59
|
+
"panelClass": {"type": "string", "description": "Component configuration for \"panelClass\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
60
|
+
"overlayClass": {"type": "string", "description": "Component configuration for \"overlayClass\". When not handled internally, it is forwarded to the root element.", "default": null, "values": null, "category": "general"},
|
|
61
|
+
"children": {"type": "Node|Array|Function", "description": "Default child content (nodes, arrays, or render function).", "default": null, "values": null, "category": "general"},
|
|
62
|
+
"iconRight": {"type": "String|Node|Function|Array", "description": "Icon name or node rendered on the right side of the component.", "default": null, "values": ["#name_tabler", "name_material", "class"], "category": "general"}
|
|
550
63
|
},
|
|
551
64
|
"events": {
|
|
552
65
|
"onOpen": "(entry)",
|
|
553
66
|
"onClose": "void"
|
|
554
67
|
},
|
|
555
68
|
"slots": {
|
|
556
|
-
"icon": {
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
},
|
|
567
|
-
"
|
|
568
|
-
"type": "Eyebrow above the title ({ close })",
|
|
569
|
-
"description": "Slot content for \"eyebrow\". Accepts nodes, arrays, or render functions.",
|
|
570
|
-
"default": null,
|
|
571
|
-
"values": null,
|
|
572
|
-
"category": "slot"
|
|
573
|
-
},
|
|
574
|
-
"title": {
|
|
575
|
-
"type": "Dialog title ({ close })",
|
|
576
|
-
"description": "Slot for title content.",
|
|
577
|
-
"default": null,
|
|
578
|
-
"values": null,
|
|
579
|
-
"category": "slot"
|
|
580
|
-
},
|
|
581
|
-
"subtitle": {
|
|
582
|
-
"type": "Dialog subtitle ({ close })",
|
|
583
|
-
"description": "Slot for subtitle content.",
|
|
584
|
-
"default": null,
|
|
585
|
-
"values": null,
|
|
586
|
-
"category": "slot"
|
|
587
|
-
},
|
|
588
|
-
"header": {
|
|
589
|
-
"type": "Custom header ({ close })",
|
|
590
|
-
"description": "Slot for header content.",
|
|
591
|
-
"default": null,
|
|
592
|
-
"values": null,
|
|
593
|
-
"category": "slot"
|
|
594
|
-
},
|
|
595
|
-
"content": {
|
|
596
|
-
"type": "Dialog body ({ close })",
|
|
597
|
-
"description": "Slot for the main body content.",
|
|
598
|
-
"default": null,
|
|
599
|
-
"values": null,
|
|
600
|
-
"category": "slot"
|
|
601
|
-
},
|
|
602
|
-
"body": {
|
|
603
|
-
"type": "Alias of content ({ close })",
|
|
604
|
-
"description": "Slot content for \"body\". Accepts nodes, arrays, or render functions.",
|
|
605
|
-
"default": null,
|
|
606
|
-
"values": null,
|
|
607
|
-
"category": "slot"
|
|
608
|
-
},
|
|
609
|
-
"footer": {
|
|
610
|
-
"type": "Custom footer ({ close })",
|
|
611
|
-
"description": "Slot for footer content.",
|
|
612
|
-
"default": null,
|
|
613
|
-
"values": null,
|
|
614
|
-
"category": "slot"
|
|
615
|
-
},
|
|
616
|
-
"actions": {
|
|
617
|
-
"type": "Dialog actions ({ close })",
|
|
618
|
-
"description": "Slot for action buttons or links.",
|
|
619
|
-
"default": null,
|
|
620
|
-
"values": null,
|
|
621
|
-
"category": "slot"
|
|
622
|
-
},
|
|
623
|
-
"close": {
|
|
624
|
-
"type": "Close action ({ close })",
|
|
625
|
-
"description": "Slot content for \"close\". Accepts nodes, arrays, or render functions.",
|
|
626
|
-
"default": null,
|
|
627
|
-
"values": null,
|
|
628
|
-
"category": "slot"
|
|
629
|
-
},
|
|
630
|
-
"default": {
|
|
631
|
-
"type": "Fallback body content ({ close })",
|
|
632
|
-
"description": "Primary content for the component.",
|
|
633
|
-
"default": null,
|
|
634
|
-
"values": null,
|
|
635
|
-
"category": "slot"
|
|
636
|
-
},
|
|
637
|
-
"iconRight": {
|
|
638
|
-
"type": "Dialog icon ({ close })",
|
|
639
|
-
"description": "Slot for right-aligned icon content."
|
|
640
|
-
}
|
|
69
|
+
"icon": {"type": "Dialog icon ({ close })", "description": "Slot for icon content.", "default": null, "values": ["#name_tabler", "name_material", "class"], "category": "slot"},
|
|
70
|
+
"eyebrow": {"type": "Eyebrow above the title ({ close })", "description": "Slot content for \"eyebrow\". Accepts nodes, arrays, or render functions.", "default": null, "values": null, "category": "slot"},
|
|
71
|
+
"title": {"type": "Dialog title ({ close })", "description": "Slot for title content.", "default": null, "values": null, "category": "slot"},
|
|
72
|
+
"subtitle": {"type": "Dialog subtitle ({ close })", "description": "Slot for subtitle content.", "default": null, "values": null, "category": "slot"},
|
|
73
|
+
"header": {"type": "Custom header ({ close })", "description": "Slot for header content.", "default": null, "values": null, "category": "slot"},
|
|
74
|
+
"content": {"type": "Dialog body ({ close })", "description": "Slot for the main body content.", "default": null, "values": null, "category": "slot"},
|
|
75
|
+
"body": {"type": "Alias of content ({ close })", "description": "Slot content for \"body\". Accepts nodes, arrays, or render functions.", "default": null, "values": null, "category": "slot"},
|
|
76
|
+
"footer": {"type": "Custom footer ({ close })", "description": "Slot for footer content.", "default": null, "values": null, "category": "slot"},
|
|
77
|
+
"actions": {"type": "Dialog actions ({ close })", "description": "Slot for action buttons or links.", "default": null, "values": null, "category": "slot"},
|
|
78
|
+
"close": {"type": "Close action ({ close })", "description": "Slot content for \"close\". Accepts nodes, arrays, or render functions.", "default": null, "values": null, "category": "slot"},
|
|
79
|
+
"default": {"type": "Fallback body content ({ close })", "description": "Primary content for the component.", "default": null, "values": null, "category": "slot"},
|
|
80
|
+
"iconRight": {"type": "Dialog icon ({ close })", "description": "Slot for right-aligned icon content."}
|
|
641
81
|
},
|
|
642
82
|
"description": "Standardized dialog overlay with variants, animations, structured slots, and imperative API.",
|
|
643
83
|
"returns": "Object { open(overrides?), close(), toggle(overrides?), update(props), isOpen(), entry(), props() }"
|
|
644
84
|
}
|
|
645
85
|
```
|
|
86
|
+
|
|
87
|
+
## Imperative lifecycle
|
|
88
|
+
|
|
89
|
+
`_.Dialog` returns an API object, not a DOM node to mount. Create it, then call `open()`; `close()` closes it and `update(props)` changes its configuration.
|
|
90
|
+
|
|
91
|
+
```js
|
|
92
|
+
const dialog = _.Dialog({
|
|
93
|
+
title: 'Prodotto', content: _.p('Dettagli del prodotto'),
|
|
94
|
+
closeOnEsc: true, trapFocus: true, autoFocus: true
|
|
95
|
+
});
|
|
96
|
+
dialog.update({ actions: [_.Button({ onClick: () => dialog.close() }, 'Annulla')] });
|
|
97
|
+
dialog.open();
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Check Escape, Tab, focus restoration, and the accessible dialog name in the rendered application. Do not infer these checks from a successful build.
|