jsswift 1.0.48 → 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 +4 -2
- package/dist/documentions/AI.md +4 -2
- 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 +16 -1
- package/dist/jsswift.js +26 -0
- package/dist/jsswift.min.js +3 -3
- package/dist/min-jsswift.js +3 -3
- package/package.json +1 -1
package/AI.md
CHANGED
|
@@ -57,7 +57,7 @@ const page = _.Page({}, _.Card({ title: 'Prodotti' }, edit, table));
|
|
|
57
57
|
_.mount('#app', page);
|
|
58
58
|
```
|
|
59
59
|
|
|
60
|
-
This demonstrates composition and validation; saving logs the values. Add application persistence and refresh the table when your task requires them. Prefer `_.rod(initial)` for bidirectional field models: read `name.value`, write `name.value = 'Nuovo nome'`; `model` synchronizes the control. Use `_.signal(initial)` when explicit getter/setter functions suit the state, and `_.useForm()` for structured form validation and errors. This avoids reading private `_input` or `_select` references.
|
|
60
|
+
This demonstrates composition and validation; saving logs the values. Add application persistence and refresh the table when your task requires them. Prefer `_.rod(initial)` for bidirectional field models: read `name.value`, write `name.value = 'Nuovo nome'`; `model` synchronizes the control. Use `_.signal(initial)` when explicit getter/setter functions suit the state, and `_.useForm()` for structured form validation and errors. This avoids reading private `_input` or `_select` references. Input and Select expose `focus(options?)`; read and write values through the rod model. Use `ariaLabel`, `ariaLabelledBy`, `ariaDescribedBy`, `ariaInvalid` and `required` on the control. Input also accepts `min`, `max`, `step`, `pattern`, `minLength` and `maxLength`.
|
|
61
61
|
|
|
62
62
|
## Exact callback arguments
|
|
63
63
|
|
|
@@ -82,7 +82,7 @@ System fonts are the default. Import `jsswift/css/fonts-nunito.css`, `jsswift/cs
|
|
|
82
82
|
|
|
83
83
|
## Accessibility and verification
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
Input and Select use a string `label` as their default accessible name; use `ariaLabel` for a different name or `ariaLabelledBy` for an external label. Verify rendered names when using custom label nodes. Set Dialog `ariaLabel` explicitly. Dialog normally restores the original focus element; if the app replaces that element, restore focus to its current replacement using a stable application identifier in `onClose`. Do not claim these behaviors were tested from a build alone.
|
|
86
86
|
|
|
87
87
|
Run the app's build after implementation and check values, validation, dialog keyboard behavior, and persistence when required. Start one development server on an explicit available port; with Vite use `npm run dev -- --port <port> --strictPort`. Report checks actually performed.
|
|
88
88
|
|
|
@@ -91,3 +91,5 @@ Run the app's build after implementation and check values, validation, dialog ke
|
|
|
91
91
|
- Exact APIs: [Input](components/input.md), [Select](components/select.md), [Button](components/btn.md), [Card](components/card.md), [Table](components/table.md), [Dialog](components/dialog.md).
|
|
92
92
|
- Extra behavior: [forms](ui/forms.md), [reactivity](reactivity.md), [layout](ui/layout-and-responsive.md), [overlays](ui/data-feedback-overlays.md).
|
|
93
93
|
- Other components: [index](components/README.md). MCP: read `guide:AI`, then search only for additional features.
|
|
94
|
+
|
|
95
|
+
For a complete application flow, read [the compact CRUD example](examples/crud.md) only when the task needs editing, validation, persistence and focus restoration together.
|
package/dist/documentions/AI.md
CHANGED
|
@@ -57,7 +57,7 @@ const page = _.Page({}, _.Card({ title: 'Prodotti' }, edit, table));
|
|
|
57
57
|
_.mount('#app', page);
|
|
58
58
|
```
|
|
59
59
|
|
|
60
|
-
This demonstrates composition and validation; saving logs the values. Add application persistence and refresh the table when your task requires them. Prefer `_.rod(initial)` for bidirectional field models: read `name.value`, write `name.value = 'Nuovo nome'`; `model` synchronizes the control. Use `_.signal(initial)` when explicit getter/setter functions suit the state, and `_.useForm()` for structured form validation and errors. This avoids reading private `_input` or `_select` references.
|
|
60
|
+
This demonstrates composition and validation; saving logs the values. Add application persistence and refresh the table when your task requires them. Prefer `_.rod(initial)` for bidirectional field models: read `name.value`, write `name.value = 'Nuovo nome'`; `model` synchronizes the control. Use `_.signal(initial)` when explicit getter/setter functions suit the state, and `_.useForm()` for structured form validation and errors. This avoids reading private `_input` or `_select` references. Input and Select expose `focus(options?)`; read and write values through the rod model. Use `ariaLabel`, `ariaLabelledBy`, `ariaDescribedBy`, `ariaInvalid` and `required` on the control. Input also accepts `min`, `max`, `step`, `pattern`, `minLength` and `maxLength`.
|
|
61
61
|
|
|
62
62
|
## Exact callback arguments
|
|
63
63
|
|
|
@@ -82,7 +82,7 @@ System fonts are the default. Import `jsswift/css/fonts-nunito.css`, `jsswift/cs
|
|
|
82
82
|
|
|
83
83
|
## Accessibility and verification
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
Input and Select use a string `label` as their default accessible name; use `ariaLabel` for a different name or `ariaLabelledBy` for an external label. Verify rendered names when using custom label nodes. Set Dialog `ariaLabel` explicitly. Dialog normally restores the original focus element; if the app replaces that element, restore focus to its current replacement using a stable application identifier in `onClose`. Do not claim these behaviors were tested from a build alone.
|
|
86
86
|
|
|
87
87
|
Run the app's build after implementation and check values, validation, dialog keyboard behavior, and persistence when required. Start one development server on an explicit available port; with Vite use `npm run dev -- --port <port> --strictPort`. Report checks actually performed.
|
|
88
88
|
|
|
@@ -91,3 +91,5 @@ Run the app's build after implementation and check values, validation, dialog ke
|
|
|
91
91
|
- Exact APIs: [Input](components/input.md), [Select](components/select.md), [Button](components/btn.md), [Card](components/card.md), [Table](components/table.md), [Dialog](components/dialog.md).
|
|
92
92
|
- Extra behavior: [forms](ui/forms.md), [reactivity](reactivity.md), [layout](ui/layout-and-responsive.md), [overlays](ui/data-feedback-overlays.md).
|
|
93
93
|
- Other components: [index](components/README.md). MCP: read `guide:AI`, then search only for additional features.
|
|
94
|
+
|
|
95
|
+
For a complete application flow, read [the compact CRUD example](examples/crud.md) only when the task needs editing, validation, persistence and focus restoration together.
|
|
@@ -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.
|