@dynamicforms/vue-forms 3.0.0-alpha.2 → 3.0.0-alpha.3
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/dynamicforms-vue-forms.js +259 -252
- package/dist/dynamicforms-vue-forms.js.map +1 -1
- package/dist/index.d.ts +21 -7
- package/package.json +3 -3
- package/readme.md +12 -9
package/dist/index.d.ts
CHANGED
|
@@ -655,15 +655,24 @@ export declare class EnabledChangingAction extends FieldActionBase {
|
|
|
655
655
|
execute(field: FieldBase, supr: FieldActionExecute, newValue: boolean, oldValue: boolean): boolean;
|
|
656
656
|
}
|
|
657
657
|
|
|
658
|
+
/**
|
|
659
|
+
* The namespace of the error codes this library declares. A code the library raises is `${ERROR_NAMESPACE}.<code>`,
|
|
660
|
+
* such as `vue-forms.required`.
|
|
661
|
+
*/
|
|
662
|
+
export declare const ERROR_NAMESPACE = "vue-forms";
|
|
663
|
+
|
|
658
664
|
/**
|
|
659
665
|
* The content of an error: what failed, the values it failed with, an English sentence describing it, and its
|
|
660
666
|
* origin. An error the application builds from a server's response has the same content, so a renderer converts
|
|
661
667
|
* validator and server errors to text with one function.
|
|
662
668
|
*/
|
|
663
669
|
export declare interface ErrorDescription {
|
|
664
|
-
/**
|
|
670
|
+
/**
|
|
671
|
+
* Machine-readable identifier of what failed: `<namespace>.<code>`, such as `vue-forms.min_value`. The namespace
|
|
672
|
+
* names the package that declared the code.
|
|
673
|
+
*/
|
|
665
674
|
readonly code: string;
|
|
666
|
-
/** The values of the failure, such as `minValue` for `min_value`. */
|
|
675
|
+
/** The values of the failure, such as `minValue` for `vue-forms.min_value`. */
|
|
667
676
|
readonly params: Readonly<Record<string, unknown>>;
|
|
668
677
|
/** The failure in English, plain text, with `params` substituted. */
|
|
669
678
|
readonly detail: string;
|
|
@@ -1543,6 +1552,7 @@ declare namespace Form {
|
|
|
1543
1552
|
ListItemInput,
|
|
1544
1553
|
List,
|
|
1545
1554
|
NullableList,
|
|
1555
|
+
ERROR_NAMESPACE,
|
|
1546
1556
|
ErrorPolicies,
|
|
1547
1557
|
ErrorPolicy,
|
|
1548
1558
|
ErrorPolicyRule,
|
|
@@ -2396,8 +2406,8 @@ export declare class ValidationError implements ErrorDescription {
|
|
|
2396
2406
|
readonly detail: string;
|
|
2397
2407
|
private readonly statedOrigin?;
|
|
2398
2408
|
/**
|
|
2399
|
-
* @param code Machine-readable identifier of what failed,
|
|
2400
|
-
* @param params The values of the failure, such as `minValue` for `min_value`.
|
|
2409
|
+
* @param code Machine-readable identifier of what failed, `<namespace>.<code>`. Stored as given.
|
|
2410
|
+
* @param params The values of the failure, such as `minValue` for `vue-forms.min_value`.
|
|
2401
2411
|
* @param detail The failure in English, plain text. Stored as given.
|
|
2402
2412
|
* @param statedOrigin The origin of the error, if its author sets it; see `origin`.
|
|
2403
2413
|
*/
|
|
@@ -2421,11 +2431,14 @@ export declare class ValidationError implements ErrorDescription {
|
|
|
2421
2431
|
* renderer has a text for that code.
|
|
2422
2432
|
*/
|
|
2423
2433
|
declare type ValidationErrorOptions = {
|
|
2424
|
-
/**
|
|
2434
|
+
/**
|
|
2435
|
+
* The error's `code`, used as given. Defaults to the validator's own, such as `vue-forms.required`. The
|
|
2436
|
+
* application prefixes its own codes with a namespace of its own.
|
|
2437
|
+
*/
|
|
2425
2438
|
code?: string;
|
|
2426
2439
|
detail?: never;
|
|
2427
2440
|
} | {
|
|
2428
|
-
/** The error's `code
|
|
2441
|
+
/** The error's `code`, used as given. */
|
|
2429
2442
|
code: string;
|
|
2430
2443
|
/** The error's English `detail`, plain text. `{name}` placeholders are replaced with the error's `params`. */
|
|
2431
2444
|
detail?: string;
|
|
@@ -2492,7 +2505,8 @@ declare class Validator<T = any> extends ValueChangedAction {
|
|
|
2492
2505
|
protected newBindingState(): ValidatorBindingState;
|
|
2493
2506
|
/**
|
|
2494
2507
|
* Returns the error a built-in validator reports: `code` and `detail` from `options` if set, the validator's own
|
|
2495
|
-
* otherwise, with `params` substituted into the detail.
|
|
2508
|
+
* otherwise, with `params` substituted into the detail. Both codes are used as given: a built-in validator passes
|
|
2509
|
+
* its own code as `vue-forms.<code>`, and a subclass of the application passes a code in a namespace of its own.
|
|
2496
2510
|
*/
|
|
2497
2511
|
protected errorFor(options: ValidationErrorOptions | undefined, code: string, detail: string, params: Record<string, unknown>): ValidationError;
|
|
2498
2512
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dynamicforms/vue-forms",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "3.0.0-alpha.
|
|
4
|
+
"version": "3.0.0-alpha.3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"description": "Reactive forms and application state for Vue.js: validation, rules between fields, transactions and lists. UI-agnostic and TypeScript-first.",
|
|
@@ -28,8 +28,7 @@
|
|
|
28
28
|
"build": "vite build",
|
|
29
29
|
"prepack": "npm run build",
|
|
30
30
|
"test": "vitest run --coverage",
|
|
31
|
-
"lint": "
|
|
32
|
-
"lint:ci": "eslint src && vue-tsc --noEmit",
|
|
31
|
+
"lint": "node scripts/lint.mjs",
|
|
33
32
|
"docs:dev": "npm run docs:dev -w docs",
|
|
34
33
|
"docs:build": "npm run docs:build -w docs",
|
|
35
34
|
"docs:preview": "npm run docs:preview -w docs"
|
|
@@ -87,6 +86,7 @@
|
|
|
87
86
|
"eslint-plugin-unicorn": "^73.0.0",
|
|
88
87
|
"eslint-plugin-vue": "^10.10.0",
|
|
89
88
|
"jsdom": "^26.0.0",
|
|
89
|
+
"markdownlint-cli2": "^0.18.1",
|
|
90
90
|
"prettier": "^3.9.6",
|
|
91
91
|
"rollup-plugin-visualizer": "^5.14.0",
|
|
92
92
|
"typescript": "^5",
|
package/readme.md
CHANGED
|
@@ -60,7 +60,8 @@ npm install @dynamicforms/vue-forms
|
|
|
60
60
|
```
|
|
61
61
|
|
|
62
62
|
The package is ESM-only and requires Node 22 or newer. A CommonJS consumer reaches it through `require()` of an ES
|
|
63
|
-
module, which Node supports without a flag from 22.12; on 22.0–22.11 it needs `--experimental-require-module`. Type
|
|
63
|
+
module, which Node supports without a flag from 22.12; on 22.0–22.11 it needs `--experimental-require-module`. Type
|
|
64
|
+
definitions ship with the build. The package ships no components and no styles.
|
|
64
65
|
|
|
65
66
|
## Basic Usage Example
|
|
66
67
|
|
|
@@ -185,7 +186,7 @@ import { Field, Group, Validators } from '@dynamicforms/vue-forms';
|
|
|
185
186
|
const validatedForm = new Group({
|
|
186
187
|
// Required field
|
|
187
188
|
username: new Field({
|
|
188
|
-
validators: [new Validators.Required({ code: 'username_required', detail: 'Username is required' })]
|
|
189
|
+
validators: [new Validators.Required({ code: 'app.username_required', detail: 'Username is required' })]
|
|
189
190
|
}),
|
|
190
191
|
|
|
191
192
|
// Email validation with pattern
|
|
@@ -193,7 +194,7 @@ const validatedForm = new Group({
|
|
|
193
194
|
validators: [
|
|
194
195
|
new Validators.Pattern(
|
|
195
196
|
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
|
196
|
-
{ code: 'invalid_email', detail: 'Please enter a valid email address' }
|
|
197
|
+
{ code: 'app.invalid_email', detail: 'Please enter a valid email address' }
|
|
197
198
|
)
|
|
198
199
|
]
|
|
199
200
|
}),
|
|
@@ -202,7 +203,7 @@ const validatedForm = new Group({
|
|
|
202
203
|
age: new Field({
|
|
203
204
|
value: 25,
|
|
204
205
|
validators: [
|
|
205
|
-
new Validators.ValueInRange(18, 100, { code: 'age_range', detail: 'Age must be between {minValue} and {maxValue}' })
|
|
206
|
+
new Validators.ValueInRange(18, 100, { code: 'app.age_range', detail: 'Age must be between {minValue} and {maxValue}' })
|
|
206
207
|
]
|
|
207
208
|
}),
|
|
208
209
|
|
|
@@ -216,7 +217,7 @@ const validatedForm = new Group({
|
|
|
216
217
|
// Text length validation
|
|
217
218
|
bio: new Field({
|
|
218
219
|
validators: [
|
|
219
|
-
new Validators.LengthInRange(10, 200, { code: 'bio_length', detail: 'Bio must be between 10 and 200 characters' })
|
|
220
|
+
new Validators.LengthInRange(10, 200, { code: 'app.bio_length', detail: 'Bio must be between 10 and 200 characters' })
|
|
220
221
|
]
|
|
221
222
|
})
|
|
222
223
|
});
|
|
@@ -227,10 +228,12 @@ invalid immediately. `field.touched` determines when the UI shows the errors. `R
|
|
|
227
228
|
measuring it, so a value of only spaces counts as empty; `new Validators.Required({ trim: false })` keeps spaces as
|
|
228
229
|
part of the value.
|
|
229
230
|
|
|
230
|
-
An error is data: a `code` (`required`, `pattern`, `min_length`, …), the `params` it
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
231
|
+
An error is data: a `code` (`vue-forms.required`, `vue-forms.pattern`, `vue-forms.min_length`, …), the `params` it
|
|
232
|
+
failed with, and an English `detail`. A code is `<namespace>.<code>`; the library's namespace is `vue-forms`,
|
|
233
|
+
exported as `ERROR_NAMESPACE`. The library does not render an error. The application, or a UI library such as
|
|
234
|
+
`@dynamicforms/vuetify-inputs`, converts it into text, translated by its code. A validator's last argument,
|
|
235
|
+
`{ code, detail }`, replaces the validator's default code and English detail; the library uses that code as given,
|
|
236
|
+
and the application prefixes its own codes with a namespace of its own.
|
|
234
237
|
|
|
235
238
|
A validation function may return a `Promise`; `field.validating` is `true` while it runs, and only the newest run
|
|
236
239
|
determines the result. [Asynchronous validation](https://docs.velis.si/dynamicforms/vue-forms/api/validators#asynchronous-validation)
|