jsswift 1.0.47 → 1.0.49
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/AI.md +95 -0
- package/README.md +7 -0
- package/dist/documentions/AI.md +12 -2
- package/dist/documentions/README.md +1 -1
- package/dist/documentions/components/input.md +448 -45
- package/dist/documentions/components/select.md +439 -51
- package/dist/documentions/examples/crud.md +62 -0
- package/dist/documentions/knowledge-map.json +17 -2
- package/dist/jsswift.js +26 -0
- package/dist/jsswift.min.js +3 -3
- package/dist/min-jsswift.js +3 -3
- package/package.json +10 -3
|
@@ -7,55 +7,450 @@ Exact JSswift UI contract. Shared definitions listed in `commonProps` are in [co
|
|
|
7
7
|
"signature": "_.Input(props)",
|
|
8
8
|
"description": "Input field with floating label, hint/error/success/warning/note, clearable control, icon, prefix/suffix, and reactive support (rod/signal).",
|
|
9
9
|
"props": {
|
|
10
|
-
"class": {
|
|
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
|
-
|
|
10
|
+
"class": {
|
|
11
|
+
"type": "string (applicata all'input)",
|
|
12
|
+
"description": "Additional CSS classes applied to the component root element.",
|
|
13
|
+
"default": null,
|
|
14
|
+
"values": null,
|
|
15
|
+
"category": "style"
|
|
16
|
+
},
|
|
17
|
+
"model": {
|
|
18
|
+
"type": "rod | [get,set] signal",
|
|
19
|
+
"description": "Two-way bound value (alias to value in some components).",
|
|
20
|
+
"default": null,
|
|
21
|
+
"values": null,
|
|
22
|
+
"category": "data"
|
|
23
|
+
},
|
|
24
|
+
"value": {
|
|
25
|
+
"type": "string",
|
|
26
|
+
"description": "Current value (controlled).",
|
|
27
|
+
"default": null,
|
|
28
|
+
"values": null,
|
|
29
|
+
"category": "data"
|
|
30
|
+
},
|
|
31
|
+
"type": {
|
|
32
|
+
"type": "string (default: 'text')",
|
|
33
|
+
"description": "Variant or native input type.",
|
|
34
|
+
"default": null,
|
|
35
|
+
"values": [
|
|
36
|
+
"primary",
|
|
37
|
+
"secondary",
|
|
38
|
+
"success",
|
|
39
|
+
"warning",
|
|
40
|
+
"danger",
|
|
41
|
+
"info",
|
|
42
|
+
"light",
|
|
43
|
+
"dark"
|
|
44
|
+
],
|
|
45
|
+
"category": "general"
|
|
46
|
+
},
|
|
47
|
+
"name": {
|
|
48
|
+
"type": "string",
|
|
49
|
+
"description": "HTML name attribute for form submission.",
|
|
50
|
+
"default": null,
|
|
51
|
+
"values": null,
|
|
52
|
+
"category": "general"
|
|
53
|
+
},
|
|
54
|
+
"autocomplete": {
|
|
55
|
+
"type": "string",
|
|
56
|
+
"description": "Native autocomplete attribute for input elements.",
|
|
57
|
+
"default": null,
|
|
58
|
+
"values": null,
|
|
59
|
+
"category": "general"
|
|
60
|
+
},
|
|
61
|
+
"inputmode": {
|
|
62
|
+
"type": "string",
|
|
63
|
+
"description": "Native inputmode attribute hint for virtual keyboards.",
|
|
64
|
+
"default": null,
|
|
65
|
+
"values": null,
|
|
66
|
+
"category": "general"
|
|
67
|
+
},
|
|
68
|
+
"disabled": {
|
|
69
|
+
"type": "boolean",
|
|
70
|
+
"description": "Disables interaction and applies disabled styling/ARIA.",
|
|
71
|
+
"default": false,
|
|
72
|
+
"values": null,
|
|
73
|
+
"category": "state"
|
|
74
|
+
},
|
|
75
|
+
"readonly": {
|
|
76
|
+
"type": "boolean",
|
|
77
|
+
"description": "Prevents editing while keeping focus and selection.",
|
|
78
|
+
"default": false,
|
|
79
|
+
"values": null,
|
|
80
|
+
"category": "state"
|
|
81
|
+
},
|
|
82
|
+
"shortcode": {
|
|
83
|
+
"type": "string|Array<string>|object",
|
|
84
|
+
"description": "Keyboard shortcut string, object, or array bound to the component action.",
|
|
85
|
+
"default": null,
|
|
86
|
+
"values": null,
|
|
87
|
+
"category": "general"
|
|
88
|
+
},
|
|
89
|
+
"showShortcode": {
|
|
90
|
+
"type": "boolean",
|
|
91
|
+
"description": "Displays the configured keyboard shortcut badge when the component supports it.",
|
|
92
|
+
"default": null,
|
|
93
|
+
"values": null,
|
|
94
|
+
"category": "general"
|
|
95
|
+
},
|
|
96
|
+
"label": {
|
|
97
|
+
"type": "String|Node|Function (floating label)",
|
|
98
|
+
"description": "Label text or node for the component.",
|
|
99
|
+
"default": null,
|
|
100
|
+
"values": null,
|
|
101
|
+
"category": "general"
|
|
102
|
+
},
|
|
103
|
+
"topLabel": {
|
|
104
|
+
"type": "String|Node|Function (label above, not floating)",
|
|
105
|
+
"description": "Label displayed above the control.",
|
|
106
|
+
"default": null,
|
|
107
|
+
"values": null,
|
|
108
|
+
"category": "general"
|
|
109
|
+
},
|
|
110
|
+
"placeholder": {
|
|
111
|
+
"type": "string (fallback when label is not used)",
|
|
112
|
+
"description": "Placeholder text for inputs.",
|
|
113
|
+
"default": null,
|
|
114
|
+
"values": null,
|
|
115
|
+
"category": "general"
|
|
116
|
+
},
|
|
117
|
+
"hint": {
|
|
118
|
+
"type": "String|Node|Function",
|
|
119
|
+
"description": "Helper text shown near the control.",
|
|
120
|
+
"default": null,
|
|
121
|
+
"values": null,
|
|
122
|
+
"category": "state"
|
|
123
|
+
},
|
|
124
|
+
"error": {
|
|
125
|
+
"type": "String|Node|Function",
|
|
126
|
+
"description": "Error state or message displayed with the component.",
|
|
127
|
+
"default": null,
|
|
128
|
+
"values": null,
|
|
129
|
+
"category": "state"
|
|
130
|
+
},
|
|
131
|
+
"success": {
|
|
132
|
+
"type": "String|Node|Function",
|
|
133
|
+
"description": "Marks the component with success state styling.",
|
|
134
|
+
"default": null,
|
|
135
|
+
"values": null,
|
|
136
|
+
"category": "state"
|
|
137
|
+
},
|
|
138
|
+
"warning": {
|
|
139
|
+
"type": "String|Node|Function",
|
|
140
|
+
"description": "Marks the component with warning state styling.",
|
|
141
|
+
"default": null,
|
|
142
|
+
"values": null,
|
|
143
|
+
"category": "state"
|
|
144
|
+
},
|
|
145
|
+
"note": {
|
|
146
|
+
"type": "String|Node|Function",
|
|
147
|
+
"description": "Secondary note text.",
|
|
148
|
+
"default": null,
|
|
149
|
+
"values": null,
|
|
150
|
+
"category": "state"
|
|
151
|
+
},
|
|
152
|
+
"clearable": {
|
|
153
|
+
"type": "boolean",
|
|
154
|
+
"description": "Shows a clear action to reset the current value.",
|
|
155
|
+
"default": null,
|
|
156
|
+
"values": null,
|
|
157
|
+
"category": "general"
|
|
158
|
+
},
|
|
159
|
+
"icon": {
|
|
160
|
+
"type": "String|Node|Function",
|
|
161
|
+
"description": "Icon name or node rendered with the component.",
|
|
162
|
+
"default": null,
|
|
163
|
+
"values": [
|
|
164
|
+
"#name_tabler",
|
|
165
|
+
"name_material",
|
|
166
|
+
"class"
|
|
167
|
+
],
|
|
168
|
+
"category": "general"
|
|
169
|
+
},
|
|
170
|
+
"iconRight": {
|
|
171
|
+
"type": "String|Node|Function",
|
|
172
|
+
"description": "Icon name or node rendered on the right side of the component.",
|
|
173
|
+
"default": null,
|
|
174
|
+
"values": [
|
|
175
|
+
"#name_tabler",
|
|
176
|
+
"name_material",
|
|
177
|
+
"class"
|
|
178
|
+
],
|
|
179
|
+
"category": "general"
|
|
180
|
+
},
|
|
181
|
+
"prefix": {
|
|
182
|
+
"type": "String|Node|Function",
|
|
183
|
+
"description": "Content rendered before the main control.",
|
|
184
|
+
"default": null,
|
|
185
|
+
"values": null,
|
|
186
|
+
"category": "general"
|
|
187
|
+
},
|
|
188
|
+
"suffix": {
|
|
189
|
+
"type": "String|Node|Function",
|
|
190
|
+
"description": "Content rendered after the main control.",
|
|
191
|
+
"default": null,
|
|
192
|
+
"values": null,
|
|
193
|
+
"category": "general"
|
|
194
|
+
},
|
|
195
|
+
"wrapClass": {
|
|
196
|
+
"type": "string (applicata al field wrapper)",
|
|
197
|
+
"description": "Additional CSS classes applied to the outer wrapper.",
|
|
198
|
+
"default": null,
|
|
199
|
+
"values": null,
|
|
200
|
+
"category": "general"
|
|
201
|
+
},
|
|
202
|
+
"onInput": {
|
|
203
|
+
"type": "(value:string) => void",
|
|
204
|
+
"description": "Callback fired on input events or while typing.",
|
|
205
|
+
"default": null,
|
|
206
|
+
"values": null,
|
|
207
|
+
"category": "events"
|
|
208
|
+
},
|
|
209
|
+
"onChange": {
|
|
210
|
+
"type": "(value:string) => void",
|
|
211
|
+
"description": "Callback fired when the value or selection changes.",
|
|
212
|
+
"default": null,
|
|
213
|
+
"values": null,
|
|
214
|
+
"category": "events"
|
|
215
|
+
},
|
|
216
|
+
"onFocus": {
|
|
217
|
+
"type": "(event) => void",
|
|
218
|
+
"description": "Callback fired when the control gains focus.",
|
|
219
|
+
"default": null,
|
|
220
|
+
"values": null,
|
|
221
|
+
"category": "events"
|
|
222
|
+
},
|
|
223
|
+
"onBlur": {
|
|
224
|
+
"type": "(event) => void",
|
|
225
|
+
"description": "Callback fired when the control loses focus.",
|
|
226
|
+
"default": null,
|
|
227
|
+
"values": null,
|
|
228
|
+
"category": "events"
|
|
229
|
+
},
|
|
230
|
+
"children": {
|
|
231
|
+
"type": "Node|Array|Function",
|
|
232
|
+
"description": "Default child content (nodes, arrays, or render function).",
|
|
233
|
+
"default": null,
|
|
234
|
+
"values": null,
|
|
235
|
+
"category": "general"
|
|
236
|
+
},
|
|
237
|
+
"ariaLabel": {
|
|
238
|
+
"type": "string|number|reactive",
|
|
239
|
+
"description": "Applied to the interactive control; see public control accessibility and focus.",
|
|
240
|
+
"default": null,
|
|
241
|
+
"values": null,
|
|
242
|
+
"category": "accessibility"
|
|
243
|
+
},
|
|
244
|
+
"ariaLabelledBy": {
|
|
245
|
+
"type": "string|number|reactive",
|
|
246
|
+
"description": "Applied to the interactive control; see public control accessibility and focus.",
|
|
247
|
+
"default": null,
|
|
248
|
+
"values": null,
|
|
249
|
+
"category": "accessibility"
|
|
250
|
+
},
|
|
251
|
+
"ariaDescribedBy": {
|
|
252
|
+
"type": "string|number|reactive",
|
|
253
|
+
"description": "Applied to the interactive control; see public control accessibility and focus.",
|
|
254
|
+
"default": null,
|
|
255
|
+
"values": null,
|
|
256
|
+
"category": "accessibility"
|
|
257
|
+
},
|
|
258
|
+
"ariaInvalid": {
|
|
259
|
+
"type": "boolean|reactive",
|
|
260
|
+
"description": "Applied to the interactive control; see public control accessibility and focus.",
|
|
261
|
+
"default": null,
|
|
262
|
+
"values": null,
|
|
263
|
+
"category": "accessibility"
|
|
264
|
+
},
|
|
265
|
+
"required": {
|
|
266
|
+
"type": "boolean|reactive",
|
|
267
|
+
"description": "Applied to the interactive control; see public control accessibility and focus.",
|
|
268
|
+
"default": null,
|
|
269
|
+
"values": null,
|
|
270
|
+
"category": "general"
|
|
271
|
+
},
|
|
272
|
+
"min": {
|
|
273
|
+
"type": "string|number|reactive",
|
|
274
|
+
"description": "Applied to the interactive control; see public control accessibility and focus.",
|
|
275
|
+
"default": null,
|
|
276
|
+
"values": null,
|
|
277
|
+
"category": "general"
|
|
278
|
+
},
|
|
279
|
+
"max": {
|
|
280
|
+
"type": "string|number|reactive",
|
|
281
|
+
"description": "Applied to the interactive control; see public control accessibility and focus.",
|
|
282
|
+
"default": null,
|
|
283
|
+
"values": null,
|
|
284
|
+
"category": "general"
|
|
285
|
+
},
|
|
286
|
+
"step": {
|
|
287
|
+
"type": "string|number|reactive",
|
|
288
|
+
"description": "Applied to the interactive control; see public control accessibility and focus.",
|
|
289
|
+
"default": null,
|
|
290
|
+
"values": null,
|
|
291
|
+
"category": "general"
|
|
292
|
+
},
|
|
293
|
+
"pattern": {
|
|
294
|
+
"type": "string|number|reactive",
|
|
295
|
+
"description": "Applied to the interactive control; see public control accessibility and focus.",
|
|
296
|
+
"default": null,
|
|
297
|
+
"values": null,
|
|
298
|
+
"category": "general"
|
|
299
|
+
},
|
|
300
|
+
"minLength": {
|
|
301
|
+
"type": "string|number|reactive",
|
|
302
|
+
"description": "Applied to the interactive control; see public control accessibility and focus.",
|
|
303
|
+
"default": null,
|
|
304
|
+
"values": null,
|
|
305
|
+
"category": "general"
|
|
306
|
+
},
|
|
307
|
+
"maxLength": {
|
|
308
|
+
"type": "string|number|reactive",
|
|
309
|
+
"description": "Applied to the interactive control; see public control accessibility and focus.",
|
|
310
|
+
"default": null,
|
|
311
|
+
"values": null,
|
|
312
|
+
"category": "general"
|
|
313
|
+
}
|
|
40
314
|
},
|
|
41
315
|
"slots": {
|
|
42
|
-
"label": {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
316
|
+
"label": {
|
|
317
|
+
"type": "Floating label (via FormField slots.label)",
|
|
318
|
+
"description": "Slot for label content.",
|
|
319
|
+
"default": null,
|
|
320
|
+
"values": null,
|
|
321
|
+
"category": "slot"
|
|
322
|
+
},
|
|
323
|
+
"topLabel": {
|
|
324
|
+
"type": "Top label (via FormField slots.topLabel)",
|
|
325
|
+
"description": "Slot for top label content.",
|
|
326
|
+
"default": null,
|
|
327
|
+
"values": null,
|
|
328
|
+
"category": "slot"
|
|
329
|
+
},
|
|
330
|
+
"prefix": {
|
|
331
|
+
"type": "Left addon (via FormField slots.prefix)",
|
|
332
|
+
"description": "Slot for prefix content.",
|
|
333
|
+
"default": null,
|
|
334
|
+
"values": null,
|
|
335
|
+
"category": "slot"
|
|
336
|
+
},
|
|
337
|
+
"suffix": {
|
|
338
|
+
"type": "Right addon (via FormField slots.suffix)",
|
|
339
|
+
"description": "Slot for suffix content.",
|
|
340
|
+
"default": null,
|
|
341
|
+
"values": null,
|
|
342
|
+
"category": "slot"
|
|
343
|
+
},
|
|
344
|
+
"shortcode": {
|
|
345
|
+
"type": "Shortcut badge (via FormField slots.shortcode)",
|
|
346
|
+
"description": "Slot content for \"shortcode\". Accepts nodes, arrays, or render functions.",
|
|
347
|
+
"default": null,
|
|
348
|
+
"values": null,
|
|
349
|
+
"category": "slot"
|
|
350
|
+
},
|
|
351
|
+
"icon": {
|
|
352
|
+
"type": "Left icon (via FormField slots.icon)",
|
|
353
|
+
"description": "Slot for icon content.",
|
|
354
|
+
"default": null,
|
|
355
|
+
"values": [
|
|
356
|
+
"#name_tabler",
|
|
357
|
+
"name_material",
|
|
358
|
+
"class"
|
|
359
|
+
],
|
|
360
|
+
"category": "slot"
|
|
361
|
+
},
|
|
362
|
+
"iconRight": {
|
|
363
|
+
"type": "Right icon (via FormField slots.iconRight)",
|
|
364
|
+
"description": "Slot for right-aligned icon content.",
|
|
365
|
+
"default": null,
|
|
366
|
+
"values": [
|
|
367
|
+
"#name_tabler",
|
|
368
|
+
"name_material",
|
|
369
|
+
"class"
|
|
370
|
+
],
|
|
371
|
+
"category": "slot"
|
|
372
|
+
},
|
|
373
|
+
"clear": {
|
|
374
|
+
"type": "Clear button (via FormField slots.clear)",
|
|
375
|
+
"description": "Slot for the clear control/content.",
|
|
376
|
+
"default": null,
|
|
377
|
+
"values": null,
|
|
378
|
+
"category": "slot"
|
|
379
|
+
},
|
|
380
|
+
"hint": {
|
|
381
|
+
"type": "Hint content (via FormField slots.hint)",
|
|
382
|
+
"description": "Slot for helper/hint text.",
|
|
383
|
+
"default": null,
|
|
384
|
+
"values": null,
|
|
385
|
+
"category": "state"
|
|
386
|
+
},
|
|
387
|
+
"errorMessage": {
|
|
388
|
+
"type": "Error content (via FormField slots.errorMessage)",
|
|
389
|
+
"description": "Slot for custom error message rendering.",
|
|
390
|
+
"default": null,
|
|
391
|
+
"values": null,
|
|
392
|
+
"category": "slot"
|
|
393
|
+
},
|
|
394
|
+
"success": {
|
|
395
|
+
"type": "Success content (via FormField slots.success)",
|
|
396
|
+
"description": "Slot for success message/content.",
|
|
397
|
+
"default": null,
|
|
398
|
+
"values": null,
|
|
399
|
+
"category": "state"
|
|
400
|
+
},
|
|
401
|
+
"warning": {
|
|
402
|
+
"type": "Warning content (via FormField slots.warning)",
|
|
403
|
+
"description": "Slot for warning message/content.",
|
|
404
|
+
"default": null,
|
|
405
|
+
"values": null,
|
|
406
|
+
"category": "state"
|
|
407
|
+
},
|
|
408
|
+
"note": {
|
|
409
|
+
"type": "Note content (via FormField slots.note)",
|
|
410
|
+
"description": "Slot for note/secondary text.",
|
|
411
|
+
"default": null,
|
|
412
|
+
"values": null,
|
|
413
|
+
"category": "state"
|
|
414
|
+
},
|
|
415
|
+
"input": {
|
|
416
|
+
"type": "Custom input node (ctx: { input, props })",
|
|
417
|
+
"description": "Slot for custom input element/content.",
|
|
418
|
+
"default": null,
|
|
419
|
+
"values": null,
|
|
420
|
+
"category": "slot"
|
|
421
|
+
}
|
|
56
422
|
},
|
|
57
423
|
"returns": "HTMLDivElement (field wrapper) con ._input = HTMLInputElement",
|
|
58
|
-
"commonProps": {
|
|
424
|
+
"commonProps": {
|
|
425
|
+
"path": "ui/common-props.md",
|
|
426
|
+
"keys": [
|
|
427
|
+
"size",
|
|
428
|
+
"color",
|
|
429
|
+
"outline",
|
|
430
|
+
"clickable",
|
|
431
|
+
"padding",
|
|
432
|
+
"margin",
|
|
433
|
+
"width",
|
|
434
|
+
"minWidth",
|
|
435
|
+
"maxWidth",
|
|
436
|
+
"height",
|
|
437
|
+
"minHeight",
|
|
438
|
+
"maxHeight",
|
|
439
|
+
"radius",
|
|
440
|
+
"borderRadius",
|
|
441
|
+
"shadow",
|
|
442
|
+
"mobile",
|
|
443
|
+
"tablet",
|
|
444
|
+
"pc",
|
|
445
|
+
"style"
|
|
446
|
+
]
|
|
447
|
+
},
|
|
448
|
+
"methods": {
|
|
449
|
+
"focus": {
|
|
450
|
+
"signature": "focus(options?)",
|
|
451
|
+
"description": "Focus the native input or Select combobox without opening Select."
|
|
452
|
+
}
|
|
453
|
+
}
|
|
59
454
|
}
|
|
60
455
|
```
|
|
61
456
|
|
|
@@ -68,3 +463,11 @@ _.Input({ label: 'Cerca per nome', onInput: value => console.log(value) });
|
|
|
68
463
|
```
|
|
69
464
|
|
|
70
465
|
Use the documented `model` binding for reactive state. Verify the rendered control's accessible name; a visible label alone does not prove that it is associated with the input.
|
|
466
|
+
|
|
467
|
+
## Public control accessibility and focus
|
|
468
|
+
|
|
469
|
+
`focus(options?)` on the returned field focuses the interactive input/combobox (it does not open Select). Prefer this method over private DOM references.
|
|
470
|
+
|
|
471
|
+
`ariaLabel` sets the control's accessible name; a string `label` supplies the default. Use `ariaLabelledBy` for an external label ID and `ariaDescribedBy` for hint/error IDs. `ariaInvalid` overrides the invalid state; otherwise a truthy `error` marks the control invalid. `required` sets `aria-required` (and native required for Input). These props accept reactive values.
|
|
472
|
+
|
|
473
|
+
Input forwards `min`, `max`, `step`, `pattern`, `minLength` and `maxLength` to the native input, including zero values. Native constraints do not replace application validation.
|