@dynamicforms/vue-forms 2.0.2 → 3.0.0-alpha.1

package/readme.md

@@ -1,52 +1,57 @@
 # @dynamicforms/vue-forms
 
-A reactive data entry forms library for Vue.js that handles form state management without dictating your
-UI components.
+A reactive library for Vue.js that holds forms and application state without dictating your UI components:
+validation, rules between fields, transactions and lists.
 
 ## Introduction
 
-`@dynamicforms/vue-forms` manages form data, validation and state, and leaves rendering entirely to you.
+`@dynamicforms/vue-forms` manages form data, validation and state; rendering is left to the application. The same
+elements also hold application state that no screen displays, such as a shopping cart or the filters of a list view.
 
-What it models beyond state is the behaviour *between* fields. Visibility, enablement and values can be declared
-as conditions over other fields, and every change travels through an action pipeline in which each handler decides
-whether to pass the event on and may reshape its result. Groups and lists compose recursively, so the same
+In addition to state, the library models the behaviour *between* fields. Visibility, enablement and values can be
+declared as conditions over other fields, and every change passes through an action pipeline in which each handler
+decides whether to pass the event on and may modify its result. Groups and lists compose recursively, so the same
 mechanism applies at every level of a nested form.
 
 ### Design Goals
 
-- **UI-Agnostic**: A logic layer for form state, validation and dynamic behaviour. Works with any Vue components, including your own. The few members that speak about the interface — `visibility`, `enabled`, `touched`, error render content and `Action` — are there because nearly every form needs them; [Rationale](https://docs.velis.si/dynamicforms/vue-forms/guide/rationale#what-the-library-carries-for-the-interface) lists them with the reason for each.
-- **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.
+- **UI-Agnostic**: a logic layer for state, validation and dynamic behaviour, rendered by any Vue components,
+  including your own. The few members that relate to the interface are listed in
+  [Rationale](https://docs.velis.si/dynamicforms/vue-forms/guide/rationale#what-the-library-carries-for-the-interface).
+- **Fields that react to each other**: the behaviour between fields is part of the form definition, not wiring in
+  components.
+- **Reactive & Type-Safe**: every member is a tracked read, and the types follow the declared structure.
+- **Structural serialization**: a group's value has the shape of its fields.
+- **Application state, not only forms**: the same elements hold state that no screen displays, such as a shopping
+  cart, the filters of a list view or the settings of an editor, with the same features a form has.
 
 ## Features
 
-- **UI-agnostic**: a logic layer for form state, validation and dynamic behaviour. Any Vue components render it,
-  your own included; the few members that speak about the interface are [listed with their reasons](https://docs.velis.si/dynamicforms/vue-forms/guide/rationale#what-the-library-carries-for-the-interface)
-- **Transactional**: every mutating operation is atomic — events are announced once, over the net change, and a
-  handler that throws leaves the form exactly as it was. `transaction()` makes several writes one operation, and
-  `tx.rollback()` withdraws one without an error
-- **Lists that scale**: a `List` is meant to hold thousands of rows. Writing one field of one row costs that row
-  and the depth it sits at, a `push()` costs one row, and reading `value` or `valid` again costs nothing
-- **Declared once, bound per record**: the element handed to `new List(template)` is the declaration every row is
-  built from. One validator instance and one conditional rule serve every row, and each row answers for itself
-- **Reactive**: every member of a field, group or list is a tracked read — assign a property directly, with no
-  `ref` to unwrap and no computed mirror to keep in sync
-- **Nested structures**: fields, groups and lists compose recursively, at every level
-- **Event system**: every change travels through an action pipeline; a handler may pass it on, reshape it or stop it
+- **Transactional**: every mutating operation is atomic. Events are announced once, over the net change, and a
+  handler that throws leaves the form unchanged. `transaction()` makes several writes one operation, and
+  `tx.rollback()` reverts one without throwing
 - **Validation**: built-in validators, custom synchronous and asynchronous rules, cross-field comparisons, and
-  errors that carry a `code` and render as text, markdown or a component of your own
+  errors that contain a `code` and render as text, markdown or a component of your own
 - **Conditional logic**: visibility, enablement and values declared as statements over other fields
-- **Extended properties**: a field carries whatever your UI renders it with — a label, a hint, a width — declared
-  as a second type argument, checked by the compiler and read through `extra`
-- **Application state, not only forms**: the same elements hold state no screen shows — a cart, the filters of a list view, editor
-  settings — with the reactivity, transactions and validation a form has
-- **Plain-data views**: `view(group)` reads an element as plain properties — `form.address.city`,
-  `v-model="form.name"` — with the element itself as `form.$`
-- **Access**: `'editable'`, `'readonly'`, `'disabled'` and `'disabled-null'` decide whether an element accepts input
-  and what it contributes to the value its form sends — its own value, `null`, or nothing — and validation follows
-  what is sent; `visibility` states how it is drawn
-- **TypeScript support**: full type definitions, and a group's value type inferred from the fields it holds
+- **Event system**: every change passes through an action pipeline; a handler may pass it on, modify it or stop it
+- **Access**: `'editable'`, `'readonly'`, `'disabled'` and `'disabled-null'` determine whether an element accepts
+  input and what it sends in its form's value (its own value, `null`, or nothing); validation applies to what is
+  sent. `visibility` determines how it is drawn
+- **Application state**: a cart, the filters of a list view or editor settings built from the same elements, with
+  per-element tracked reads, transactions, validation and rules for what is sent
+- **Plain-data views**: `view(group)` reads an element as plain properties (`form.address.city`,
+  `v-model="form.name"`), with the element itself as `form.$`
+- **Lists that scale**: a `List` is designed to hold thousands of rows. Writing one field of one row costs that row
+  and the depth of its nesting, a `push()` costs one row, and reading `value` or `valid` again with no change in
+  between costs nothing
+- **Declared once, bound per record**: a list's item template is declared once; one validator instance and one
+  conditional rule serve every row, and each row has its own result
+- **Nested structures**: fields, groups and lists compose recursively, at every level
+- **Extended properties**: a field holds the data your UI renders it with (a label, a hint, a width), declared as a
+  second type argument, checked by the compiler and read through `extra`
+- **Serialization**: `Group.createFromFormData()` builds a form from a plain object
+- **TypeScript support**: full type definitions, and a group's value type inferred from the fields it holds,
+  nested structures included
 
 ## Installation
 
@@ -54,40 +59,12 @@ mechanism applies at every level of a nested form.
 npm install @dynamicforms/vue-forms
 ```
 
-The package is ESM-only: it ships one build, which imports `lodash-es`, its only runtime dependency. Node 22 or newer
-is required, and `vue` (^3.5.2) is the only peer dependency. A CommonJS consumer reaches it through `require()` of an
-ES module, which Node supports. Type definitions ship with the build; the stylesheet is
-`@dynamicforms/vue-forms/style.css`.
-
-## Setup
-
-The library ships a Vue plugin for its global options:
-
-```typescript
-import { forms } from '@dynamicforms/vue-forms';
-
-app.use(forms, { useMarkdownInValidators: false });
-```
-
-The import must be a named one — the default export is a namespace of the library members, not the plugin.
-
-`useMarkdownInValidators` defaults to `true`, which means the default messages of the built-in validators are markdown
-(`MdString`). Rendering those requires a globally registered `vue-markdown` component; set the option to `false` if you
-want plain text instead.
-
-The configuration is module-global rather than per app, and `getConfig()`, `setConfig()` and the `FormsConfig` type
-are exported beside the plugin, so the options can be read and written where there is no app to install a plugin
-on.
+The package is ESM-only and requires Node 22 or newer. A CommonJS consumer reaches it through `require()` of an ES
+module, which Node supports without a flag from 22.12; on 22.0–22.11 it needs `--experimental-require-module`. Type definitions ship with the build. The package ships no components and no styles.
 
 ## Basic Usage Example
 
-Every form element is created with the constructor: `new Field({ ... })`, `new Action({ ... })`,
-`new Group({ ... })`, `new List(template)`. Every read through it is tracked from that moment on, so reading
-`field.value` in a template tracks it and `field.value = x` re-renders — there is no `ref` to unwrap and no
-computed mirror to maintain. The element itself is not a Vue proxy, so watch what you read:
-`watch(() => field.value, cb)`.
-
-Here's a simple example of how to create and use a form with fields and groups:
+Creating and using a form with fields and groups:
 
 ```typescript
 import { Field, Group } from '@dynamicforms/vue-forms';
@@ -113,61 +90,78 @@ personForm.fields.age.access = 'disabled';
 console.log(personForm.value);  // { firstName: 'Jane', lastName: 'Doe', active: true }
 ```
 
-An `Action` is a field whose value is a label / icon pair and which can be executed:
+Every element is created with its constructor: `new Field({ ... })`, `new Action({ ... })`, `new Group({ ... })`,
+`new List(template)`. Every read through it is tracked, so reading `field.value` in a template tracks it and
+`field.value = x` re-renders. The element itself is not a Vue proxy, so `watch()` takes a getter of the member read:
+`watch(() => field.value, cb)`.
+
+An `Action` is a command: an element with a label and an icon that can be executed and sends nothing to its
+container's value. `SubmitAction` and `RejectAction` submit and reset a form, and `form.confirm()` / `form.reject()`
+execute them:
 
 ```typescript
-import { Action, ExecuteAction } from '@dynamicforms/vue-forms';
+import { Action, CommandException, Field, Group, RejectAction, SubmitAction } from '@dynamicforms/vue-forms';
 
-const saveAction = new Action({
-  value: { label: 'Save' },
-  actions: [new ExecuteAction((field, supr, params) => { console.log('saving', params); })]
+const form = new Group({
+  name: new Field({ value: 'John' }),
+  save: new Action({
+    value: { label: 'Save', defaultConfirm: true },
+    actions: [new SubmitAction((action) => action.parent, (value) => api.save(value))],
+  }),
+  cancel: new Action({
+    value: { label: 'Cancel', defaultReject: true },
+    actions: [new RejectAction((action) => action.parent)],
+  }),
 });
 
-await saveAction.execute({ form: personForm });  // 'saving { form: ... }'; saveAction.busy until it settles
+form.value;                  // { name: 'John' }: actions send nothing
+form.fields.save.executable; // false while the form is invalid or a submit is running
+
+// waits for validation, sends a valid form and rebinds the form to the result
+const result = await form.confirm();
+if (result instanceof CommandException) {
+  // the submit was refused or failed
+} else if (result !== undefined) {
+  const { sent, received } = result;
+}
 ```
 
-`Action` is one of the few members that speak about the interface, listed with their reasons in
-[Rationale](https://docs.velis.si/dynamicforms/vue-forms/guide/rationale#what-the-library-carries-for-the-interface):
-it names a label and an icon because it exists as the element a form's submit and cancel hang on, and that minimal
-pair is what makes the concept legible. The shape is
-minimal because a UI library is expected to extend it — [`@dynamicforms/vuetify-inputs`](https://docs.velis.si/dynamicforms/vuetify-inputs/examples/df-actions.html)
-widens the value with render options and per-breakpoint variants on top of it.
+`confirm()` returns `undefined` where it executes nothing, such as while `save` is not executable. The cookbook's
+[Submitting](https://docs.velis.si/dynamicforms/vue-forms/guide/cookbook#submitting) recipe describes every outcome.
+
+An `Action` carries a label and an icon because a form's submit and cancel are drawn as buttons, and it is one of
+the few members that relate to the interface. A UI library extends its value:
+[`@dynamicforms/vuetify-inputs`](https://docs.velis.si/dynamicforms/vuetify-inputs/examples/df-actions.html) adds
+render options and per-breakpoint variants.
 
 ## Events Example
 
-The library provides a powerful event system for field changes and other actions:
+Field changes and other events are handled by actions:
 
 ```typescript
-import { Field, Group, ValueChangedAction, ValidationErrorText } from '@dynamicforms/vue-forms';
-
-const emailField = new Field({ value: '' })
-  .registerAction(new ValueChangedAction((field, supr, newValue, oldValue) => {
-    // Custom validation on value change
-    if (!newValue.includes('@')) {
-      field.errors = [new ValidationErrorText('Invalid email format')];
-    } else {
-      field.errors = [];
-    }
-    
-    // Always call supr to continue the action chain
-    return supr(field, newValue, oldValue);
-  }));
+import { Field, Group, ValueChangedAction } from '@dynamicforms/vue-forms';
 
-// Or register events on a form
 const form = new Group({
-  email: emailField,
-  username: new Field()
-}).registerAction(new ValueChangedAction((field, supr, newValue, oldValue) => {
+  email: new Field({ value: '' }),
+  username: new Field({ value: '' }),
+});
+
+// Fill in the username from the email while the username field is not touched
+form.fields.email.registerAction(new ValueChangedAction((field, supr, newValue, oldValue) => {
+  if (!form.fields.username.touched) form.fields.username.value = newValue.split('@')[0];
+  // calling supr passes the event on to the next handler; not calling it stops the chain
+  return supr(field, newValue, oldValue);
+}));
+
+// Or register events on a form
+form.registerAction(new ValueChangedAction((field, supr, newValue, oldValue) => {
   console.log('Form data changed:', newValue);
   return supr(field, newValue, oldValue);
 }));
 ```
 
-Assigning `field.errors` directly replaces the whole array, including errors owned by validators — prefer a
-`Validator` (see below) when all you want is to add a validation rule.
-
-Events are announced when the operation carrying them finishes, over the net change. Wrap several writes in a
-`transaction()` and they announce as one:
+Events are announced over the net change when the operation that contains them finishes. Several writes wrapped
+in a `transaction()` are announced as one:
 
 ```typescript
 import { transaction } from '@dynamicforms/vue-forms';
@@ -179,11 +173,11 @@ transaction(() => {
 });
 ```
 
-A throw out of the callback rolls the whole transaction back and rethrows, so a form is never left half-applied.
+An exception thrown from the callback rolls back the whole transaction and is rethrown.
 
 ## Built-in Validators
 
-The library provides several built-in validators for common validation scenarios:
+Built-in validators for common rules:
 
 ```typescript
 import { Field, Group, Validators } from '@dynamicforms/vue-forms';
@@ -191,7 +185,7 @@ import { Field, Group, Validators } from '@dynamicforms/vue-forms';
 const validatedForm = new Group({
   // Required field
   username: new Field({ 
-    validators: [new Validators.Required('Username is required')] 
+    validators: [new Validators.Required({ code: 'username_required', detail: 'Username is required' })] 
   }),
   
   // Email validation with pattern
@@ -199,7 +193,7 @@ const validatedForm = new Group({
     validators: [
       new Validators.Pattern(
         /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-        'Please enter a valid email address'
+        { code: 'invalid_email', detail: 'Please enter a valid email address' }
       )
     ] 
   }),
@@ -208,7 +202,7 @@ const validatedForm = new Group({
   age: new Field({ 
     value: 25, 
     validators: [
-      new Validators.ValueInRange(18, 100, 'Age must be between 18 and 100')
+      new Validators.ValueInRange(18, 100, { code: 'age_range', detail: 'Age must be between {minValue} and {maxValue}' })
     ] 
   }),
   
@@ -222,91 +216,38 @@ const validatedForm = new Group({
   // Text length validation
   bio: new Field({
     validators: [
-      new Validators.LengthInRange(10, 200, 'Bio must be between 10 and 200 characters')
+      new Validators.LengthInRange(10, 200, { code: 'bio_length', detail: 'Bio must be between 10 and 200 characters' })
     ]
   })
 });
 ```
 
-Validators run eagerly — a field is validated the moment it is created, so a form built from empty required fields is
-invalid immediately. Use `field.touched` to decide when to show the errors in the UI. `Required` trims a string
-before it measures it, so a value of spaces alone is no value; `new Validators.Required({ trim: false })` keeps the
-spaces where they are part of what the field holds.
-
-Every error a built-in validator produces carries a `code` — `required`, `pattern`, `min-length`, … — so a program
-reacting to one particular failure need not match message text that is translated and configurable.
-
-A validation function may return a `Promise`. `field.validating` is `true` while such a run is pending — on the
-field and on every container above it, so a form answers for the whole tree — and the verdict applied to the field
-is always the one belonging to the newest run, so a slow check cannot overwrite a faster one started after it. The
-function receives an `AbortSignal` as its fourth argument, which aborts the moment the run's verdict stops
-counting, so the request behind it can be called off. `form.busy` is the same question with the `Action.execute()`
-runs below it included — what a submit button binds to. A validator message given as a `Ref` or `computed` is
-resolved when the message is rendered, so a translated message follows a locale switch without revalidating.
-`field.clearValidators()` drops the validators, empties the errors and cancels whatever validation is still in
-flight.
-
-## Messages Widget Component
-
-The library includes a `messages-widget` Vue component for displaying validation errors and messages:
-
-```vue
-<template>
-  <!-- Simple string message -->
-  <messages-widget 
-    message="This is an error message"
-    classes="text-error"
-  />
-  
-  <!-- Display field validation errors -->
-  <messages-widget 
-    v-if="emailField.errors.length > 0"
-    :message="emailField.errors"
-    :classes="['text-error', 'mt-2']"
-  />
-  
-  <!-- Markdown message -->
-  <messages-widget :message="markdownErrors" />
-</template>
-
-<script setup>
-import { MessagesWidget, Field, Validators, ValidationErrorRenderContent, MdString } from '@dynamicforms/vue-forms';
-
-// Example field with validation
-const emailField = new Field({
-  value: '',
-  validators: [
-    new Validators.Pattern(
-      /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-      'Please enter a valid email address'
-    )
-  ]
-});
+Validators run eagerly: a field is validated when it is created, so a form built from empty required fields is
+invalid immediately. `field.touched` determines when the UI shows the errors. `Required` trims a string before
+measuring it, so a value of only spaces counts as empty; `new Validators.Required({ trim: false })` keeps spaces as
+part of the value.
 
-// Markdown message support (requires VueMarkdown component)
-const markdownErrors = [
-  new ValidationErrorRenderContent(
-    new MdString('**Error**: This field contains *invalid* data.')
-  )
-];
-</script>
-```
+An error is data: a `code` (`required`, `pattern`, `min_length`, …), the `params` it failed with, and an English
+`detail`. The library does not render it. The application, or a UI library such as `@dynamicforms/vuetify-inputs`,
+converts it into text, translated by its code. A validator's last argument, `{ code, detail }`, replaces the
+validator's default code and English detail.
 
-The messages widget supports:
-- **String messages**: Simple text messages
-- **ValidationError arrays**: Rich error objects with styling and components
-- **Markdown content**: Rich text formatting (requires VueMarkdown component)
-- **Custom components**: Render any Vue component as an error message
-- **Flexible styling**: Multiple ways to apply CSS classes
+A validation function may return a `Promise`; `field.validating` is `true` while it runs, and only the newest run
+determines the result. [Asynchronous validation](https://docs.velis.si/dynamicforms/vue-forms/api/validators#asynchronous-validation)
+describes cancellation, `busy`, `pending` and `clearValidators()`.
 
 ## Conditional Form Behavior
 
-Create dynamic forms with conditional logic using Statements and Operators:
+Conditional logic is declared with `Statement` and `Operator`:
 
 ```typescript
-import { 
-  Field, Group, Statement, Operator,
-  ConditionalVisibilityAction, ConditionalAccessAction
+import {
+  Field,
+  Group,
+  Statement,
+  Operator,
+  ConditionalVisibilityAction,
+  ConditionalAccessAction,
 } from '@dynamicforms/vue-forms';
 
 const form = new Group({
@@ -331,7 +272,7 @@ const isPerson = new Statement(form.fields.isCompany, Operator.EQUALS, false);
 
 ## Advanced Data Structures (Lists)
 
-Work with array data using the List component:
+`List` holds array data:
 
 ```typescript
 import { Field, Group, List } from '@dynamicforms/vue-forms';
@@ -350,7 +291,7 @@ const contactsList = new List(contactTemplate);
 contactsList.push({ name: 'John Doe', email: 'john@example.com', phone: '123-456-7890' });
 contactsList.push({ name: 'Jane Doe', email: 'jane@example.com', phone: '987-654-3210' });
 
-// Access list items: items hands out the rows, get() answers undefined for an invalid index
+// Access list items: items returns the rows, get() returns undefined for an invalid index
 console.log(contactsList.length);            // 2
 const firstContact = contactsList.get(0)!;
 console.log(firstContact.fields.name.value); // 'John Doe'
@@ -363,12 +304,12 @@ contactsList.remove(1);
 ```
 
 Every list mutation is tracked, so a `v-for` over `contactsList.items` re-renders on `push()`, `insert()`,
-`remove()`, `pop()` and `clear()` without any extra wiring. `items` hands out a frozen array of the live rows,
-rebuilt once per change of the set.
+`remove()`, `pop()` and `clear()` without extra wiring. `items` returns a frozen array of the live rows, rebuilt
+once per change of the set of rows.
 
 ## TypeScript Support
 
-The library is written in TypeScript and provides full type definitions:
+The library is written in TypeScript and ships full type definitions:
 
 ```typescript
 import { Field, Group, GenericFieldsInterface } from '@dynamicforms/vue-forms';
@@ -414,7 +355,7 @@ const email: string = userForm.fields.email.value;
 const age: number = userForm.fields.age.value;
 const darkMode: boolean = userForm.fields.preferences.fields.darkMode.value;
 
-// The serialized value is typed too, member by member. Every member is optional, because a 'disabled' member is
+// The group's value is typed too, member by member. Every member is optional, because a 'disabled' member is
 // left out of the object the group builds, and nullable, because a 'disabled-null' one is sent as null
 const values = userForm.value;
 const emailFromValue: string | null | undefined = values.email;
@@ -435,13 +376,13 @@ const defaults: IFieldParams<string> = { value: '', access: 'readonly' };
 const field = new Field(defaults);
 ```
 
-It admits only the writable members — `value`, `originalValue`, `access`, `visibility`, `touched`, `errors`,
-`validators` and `actions`, listed by `IFieldConstructorParams<T>`. Derived members such as `valid` and
+It accepts only the writable members (`value`, `originalValue`, `access`, `visibility`, `touched`, `errors`,
+`validators` and `actions`), listed by `IFieldConstructorParams<T>`. Derived members such as `valid` and
 `isChanged` are getters, and passing one is a compile error.
 
-`X` is what an element carries beyond those: declare it, and the parameter object takes those properties too,
-`extra` reads them back and `setExtendedValues()` writes them. It is how a form built from a server's description
-carries the label, hint or css class a UI layer binds to its inputs:
+`X` declares the additional properties an element holds: the parameter object accepts them, `extra` reads them
+and `setExtendedValues()` writes them. A form built from a server's description stores in them the label, hint or
+css class a UI layer binds to its inputs:
 
 ```typescript
 interface Presentation { label: string; hint?: string }
@@ -452,7 +393,7 @@ name.setExtendedValues({ hint: 'as in your passport' });
 ```
 
 `FieldBase<T>` is the abstract base of `Field`, `Action`, `Group` and `List`, and the type to use in your own
-signatures whenever you accept any form element:
+signatures that accept any form element:
 
 ```typescript
 import { FieldBase } from '@dynamicforms/vue-forms';
@@ -464,20 +405,16 @@ function isDirty(field: FieldBase): boolean {
 
 ## Documentation
 
-For more detailed documentation and examples, check out the [documentation](https://docs.velis.si/dynamicforms/vue-forms).
+Full documentation and examples: [documentation](https://docs.velis.si/dynamicforms/vue-forms).
 
-[The model](https://docs.velis.si/dynamicforms/vue-forms/guide/model) is the whole library in one page: elements,
-declarations, transactions, where validity comes from and how a `List` builds its rows.
+[The model](https://docs.velis.si/dynamicforms/vue-forms/guide/model) describes how the library fits together:
+elements, declarations, transactions, where validity comes from and how a `List` builds its rows.
+[Rationale](https://docs.velis.si/dynamicforms/vue-forms/guide/rationale) describes when the library fits, compared
+with form libraries and with Pinia.
 
 Upgrading an existing project? The
-[migration guide](https://docs.velis.si/dynamicforms/vue-forms/guide/migration) walks the journey from 0.6.1
-onwards, silent breaks first, and keeps a section per release for a project crossing one.
-
-## Conclusion
-
-`@dynamicforms/vue-forms` provides a clean, flexible approach to form management in Vue applications. By focusing on 
-data structures and state management rather than UI components, it offers unparalleled flexibility while maintaining 
-a simple, intuitive API.
+[migration guide](https://docs.velis.si/dynamicforms/vue-forms/guide/migration) has one section per release, newest
+first, from 3.0.0 back to 0.6.0, and a combined section for upgrading from a release before 0.12.
 
 ## License
 

package/dist/dynamicforms-vue-forms.css

@@ -1,2 +0,0 @@
-.df-messages-widget-markdown>:first-child,.df-messages-widget-markdown>:last-child{margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;line-height:1.35em!important}
-/*$vite$:1*/