@dynamicforms/vue-forms 0.17.1 → 1.0.0

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
 import { DefineComponent } from 'vue';
 import { PublicProps } from 'vue';
 import { Ref } from 'vue';
+import { TranslateStringsCallback } from '@dynamicforms/translatable';
 
 /**
  * Thrown from a handler to end the run it is in. What the trigger answers with is the exception itself rather than
@@ -155,11 +157,13 @@ export declare interface ActionValue {
 declare type AllowedValues<T> = T[] | Ref<T[]> | (() => T[]);
 
 /**
- * Depending on the useMarkdownInValidators setting, return either markdown or a plain string error message
+ * Depending on the useMarkdownInValidators setting, return either markdown or a plain string error message. A
+ * Ref is stripped/wrapped on read rather than once here, so a translated template re-applies the same choice
+ * as its text changes.
  * @param mdErrorString markdown source to optionally be stripped
- * @return MdString or string
+ * @return MdString or string, or a ComputedRef of either where `mdErrorString` is itself a Ref
  */
-export declare function buildErrorMessage(mdErrorString: string): string | MdString;
+export declare function buildErrorMessage<T extends string | Ref<string>>(mdErrorString: T): T extends Ref<string> ? ComputedRef<string | MdString> : string | MdString;
 
 export declare type ClassType = string | string[] | Record<string, boolean>;
 
@@ -658,6 +662,10 @@ export declare abstract class FieldBase<T = any, X extends object = Extras> {
      * List of errors. The array handed out is the one the element holds, and a validator writes into it in place,
      * so a transaction that is open takes the element into its record here: a rollback that put back everything
      * except the errors would leave a state the form never held.
+     *
+     * The array and its members are Vue proxies, not the raw instances a validator returned - `field.errors[0] ===
+     * myError` is `false` for the very error that produced it. Unwrapping here would lose the tracked read a
+     * template needs to re-render when a message behind a `Ref` changes; `toRaw()` compares identity instead.
      */
     get errors(): ValidationError[];
     set errors(newValue: ValidationError[]);
@@ -821,6 +829,8 @@ export declare abstract class FieldBase<T = any, X extends object = Extras> {
     /**
      * Records a child's new verdict in this element's tally. The child reports it as it settles, and the commit
      * settles the deepest element first, so the tally a container reads when its own turn comes is finished.
+     * The delta is applied here rather than recomputed by walking the members at commit, which would cost
+     * `O(members)` per container and turn a list fill back into the quadratic walk this tally exists to avoid.
      */
     protected childValidityChanged(nowValid: boolean): void;
     /**
@@ -1000,6 +1010,9 @@ declare namespace Form {
         NullableList,
         Validators,
         buildErrorMessage,
+        translatedMessage,
+        strings,
+        translateStrings,
         isSimpleComponentDef,
         isCallableFunction,
         MdString,
@@ -1499,6 +1512,19 @@ export declare class Statement {
     collectFields(): Set<FieldBase>;
 }
 
+export declare const strings: {
+    Required: string;
+    MinValue: string;
+    MaxValue: string;
+    ValueInRange: string;
+    MinLength: string;
+    MaxLength: string;
+    LengthInRange: string;
+    Pattern: string;
+    InAllowedValues: string;
+    ValidationFailed: string;
+};
+
 declare class Transaction {
     private readonly participants;
     /** what a rollback has to put back beyond the state slots, newest last */
@@ -1609,6 +1635,22 @@ export declare interface TransactionControl {
     rollback(): never;
 }
 
+/** A built-in validator's default message, translated and reactive to a later `translateStrings` call. */
+export declare function translatedMessage(key: keyof typeof strings): ComputedRef<string | MdString>;
+
+export declare const translateStrings: (cb: TranslateStringsCallback<    {
+Required: string;
+MinValue: string;
+MaxValue: string;
+ValueInRange: string;
+MinLength: string;
+MaxLength: string;
+LengthInRange: string;
+Pattern: string;
+InAllowedValues: string;
+ValidationFailed: string;
+}>) => void;
+
 declare const TxAnnounceValue: unique symbol;
 
 /**

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dynamicforms/vue-forms",
   "private": false,
-  "version": "0.17.1",
+  "version": "1.0.0",
   "type": "module",
-  "description": "A lightweight Vue.js library for form state management with built-in validation, conditional logic, nested structures, and a rich event system. UI-agnostic and TypeScript-first.",
-  "author": "Jure Erzno\u017enik",
+  "description": "A Vue.js library for form state management with built-in validation, conditional logic, nested structures, and a rich event system. UI-agnostic and TypeScript-first.",
+  "author": "Jure Erznožnik",
   "files": [
     "dist/*"
   ],
@@ -55,6 +55,7 @@
     "node": ">=22"
   },
   "dependencies": {
+    "@dynamicforms/translatable": "^0.1.0",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
@@ -68,7 +69,7 @@
     "@typescript-eslint/eslint-plugin": "^8.67.0",
     "@typescript-eslint/parser": "^8.67.0",
     "@vitejs/plugin-vue": "^6",
-    "@vitest/coverage-v8": "^3",
+    "@vitest/coverage-v8": "^4",
     "@vue/test-utils": "^2.2.4",
     "@vue/tsconfig": "^0.7.0",
     "baseline-browser-mapping": "^2.8.31",
@@ -85,12 +86,15 @@
     "prettier": "^3.9.6",
     "rollup-plugin-visualizer": "^5.14.0",
     "typescript": "^5",
-    "vite": "^7",
+    "vite": "^8",
     "vite-plugin-dts": "^4",
-    "vite-plugin-eslint": "^1.8.1",
-    "vitest": "^3",
+    "vitest": "^4",
     "vue-eslint-parser": "^10.4.1",
     "vue-markdown-render": "^2.3.0",
     "vue-tsc": "^2"
+  },
+  "allowScripts": {
+    "@parcel/watcher@2.5.6": true,
+    "unrs-resolver@1.12.2": true
   }
 }

package/readme.md

@@ -1,6 +1,6 @@
 # @dynamicforms/vue-forms
 
-A lightweight, reactive data entry forms library for Vue.js that handles form state management without dictating your
+A reactive data entry forms library for Vue.js that handles form state management without dictating your
 UI components.
 
 ## Introduction
@@ -18,7 +18,6 @@ mechanism applies at every level of a nested form.
 - **Fields that react to each other**: Conditional visibility, enablement and values are declared as statements over other fields, and an action pipeline lets a handler intercept, transform or abort an event.
 - **Reactive & Type-Safe**: Every member of a field, group or list is a tracked read, and a group's value type is inferred from the fields it holds, nested structures included.
 - **Structural serialization**: A group's value is the shape of its fields, and `Group.createFromFormData()` turns a plain object back into a form.
-- **Lightweight**: `vue` (^3.5.2) is the only peer dependency and `lodash-es` the only runtime one.
 
 ## Features
 
@@ -42,7 +41,6 @@ mechanism applies at every level of a nested form.
   as a second type argument, checked by the compiler and read through `extra`
 - **Display modes**: control field visibility with different display modes (Full, Hidden, Invisible, Suppress)
 - **TypeScript support**: full type definitions, and a group's value type inferred from the fields it holds
-- **Lightweight**: `vue` (^3.5.2) is the only peer dependency and `lodash-es` the only runtime one
 
 ## Installation