@foormjs/atscript 0.2.0 → 0.2.1
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/README.md +34 -1
- package/dist/index.cjs +576 -88
- package/dist/index.d.ts +5 -2
- package/dist/index.mjs +576 -88
- package/dist/plugin.cjs +49 -0
- package/dist/plugin.mjs +49 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -118,16 +118,37 @@ export interface SignupForm {
|
|
|
118
118
|
@foorm.order 2
|
|
119
119
|
lastName: string
|
|
120
120
|
|
|
121
|
+
@meta.label 'Full Name'
|
|
122
|
+
@meta.description 'This is computed from your first and last name'
|
|
123
|
+
@foorm.readonly
|
|
124
|
+
@foorm.fn.value '(v, data) => (data.firstName || "") + " " + (data.lastName || "")'
|
|
125
|
+
@foorm.order 3
|
|
126
|
+
fullName: string
|
|
127
|
+
|
|
121
128
|
@meta.label 'Password'
|
|
122
129
|
@foorm.type 'password'
|
|
123
130
|
@foorm.fn.disabled '(v, data) => !data.firstName || !data.lastName'
|
|
124
131
|
@foorm.validate '(v) => !!v || "Required"'
|
|
125
132
|
@foorm.validate '(v) => v.length >= 8 || "At least 8 characters"'
|
|
126
|
-
@foorm.order
|
|
133
|
+
@foorm.order 4
|
|
127
134
|
password: string
|
|
128
135
|
}
|
|
129
136
|
```
|
|
130
137
|
|
|
138
|
+
### Custom attributes example
|
|
139
|
+
|
|
140
|
+
Pass custom attributes to your components for testing, accessibility, or framework-specific props:
|
|
141
|
+
|
|
142
|
+
```
|
|
143
|
+
export interface AdvancedForm {
|
|
144
|
+
@meta.label 'Email'
|
|
145
|
+
@foorm.attr 'data-testid', 'email-input'
|
|
146
|
+
@foorm.attr 'autocorrect', 'off'
|
|
147
|
+
@foorm.fn.attr 'aria-label', '(v, data) => "Email for " + (data.name || "user")'
|
|
148
|
+
email: string
|
|
149
|
+
}
|
|
150
|
+
```
|
|
151
|
+
|
|
131
152
|
### Select, radio, and checkbox fields
|
|
132
153
|
|
|
133
154
|
Use `foorm.select`, `foorm.radio`, and `foorm.checkbox` primitives with `@foorm.options` for static choices or `@foorm.fn.options` for dynamic choices from context:
|
|
@@ -215,6 +236,16 @@ Paragraphs render as static text. Actions render as buttons that emit events ins
|
|
|
215
236
|
| `@foorm.order N` | Rendering order (lower = earlier) |
|
|
216
237
|
| `@foorm.hidden` | Mark field as statically hidden |
|
|
217
238
|
| `@foorm.disabled` | Mark field as statically disabled |
|
|
239
|
+
| `@foorm.readonly` | Mark field as read-only (visible but not editable) |
|
|
240
|
+
|
|
241
|
+
### Custom Attributes
|
|
242
|
+
|
|
243
|
+
Pass custom HTML attributes or Vue props to field components:
|
|
244
|
+
|
|
245
|
+
| Annotation | Description |
|
|
246
|
+
| ------------------------------------ | ------------------------------------------- |
|
|
247
|
+
| `@foorm.attr 'name', 'value'` | Static custom attribute (repeat for each) |
|
|
248
|
+
| `@foorm.fn.attr 'name', '(v, ...) => ...'` | Computed custom attribute (repeat for each) |
|
|
218
249
|
|
|
219
250
|
### Options Annotation
|
|
220
251
|
|
|
@@ -242,7 +273,9 @@ All field-level computed functions receive `(value, data, context, entry)`:
|
|
|
242
273
|
| `@foorm.fn.placeholder` | `string` | Computed placeholder |
|
|
243
274
|
| `@foorm.fn.disabled` | `boolean` | Computed disabled state |
|
|
244
275
|
| `@foorm.fn.hidden` | `boolean` | Computed hidden state |
|
|
276
|
+
| `@foorm.fn.readonly` | `boolean` | Computed readonly state |
|
|
245
277
|
| `@foorm.fn.optional` | `boolean` | Computed optional state |
|
|
278
|
+
| `@foorm.fn.value` | `unknown` | Computed field value |
|
|
246
279
|
| `@foorm.fn.classes` | `string \| Record` | Computed CSS classes |
|
|
247
280
|
| `@foorm.fn.styles` | `string \| Record` | Computed inline styles |
|
|
248
281
|
| `@foorm.fn.options` | `TFoormEntryOptions[]` | Computed options (select/radio) |
|