@dmitryvim/form-builder 0.2.25 → 0.2.26

package/README.md

@@ -92,12 +92,20 @@ The root schema now supports container-like properties:
   "title": "Contact Form",
   "columns": 2,
   "prefillHints": [
-    {"label": "Work", "values": {"email": "work@company.com"}, "icon": "💼"},
-    {"label": "Personal", "values": {"email": "personal@email.com"}, "icon": "🏠"}
+    {
+      "label": "Work",
+      "values": { "email": "work@company.com" },
+      "icon": "💼"
+    },
+    {
+      "label": "Personal",
+      "values": { "email": "personal@email.com" },
+      "icon": "🏠"
+    }
   ],
   "elements": [
-    {"type": "text", "key": "name", "label": "Name"},
-    {"type": "text", "key": "email", "label": "Email"}
+    { "type": "text", "key": "name", "label": "Name" },
+    { "type": "text", "key": "email", "label": "Email" }
   ]
 }
 ```
@@ -618,6 +626,54 @@ interface EnableCondition {
 - Works in both edit and readonly modes
 - Safe handling of undefined/null values
 
+### Per-Field Readonly
+
+Set `readonly: true` on any individual field to lock it while keeping the rest of the form editable.
+
+```json
+{
+  "elements": [
+    {
+      "type": "file",
+      "key": "avatar",
+      "label": "Avatar",
+      "readonly": true
+    },
+    {
+      "type": "text",
+      "key": "name",
+      "label": "Name",
+      "required": true
+    }
+  ]
+}
+```
+
+In this example, the prefilled avatar image shows as a preview (no upload/delete UI) while the `name` field remains fully editable.
+
+**Behavior:**
+
+- Effective readonly for a field = `element.readonly === true` OR form-wide `setMode('readonly')`
+- Readonly file fields show preview + download only; no upload or delete controls
+- Readonly multi-value fields (`multiple: true`) render items without add/remove buttons
+- `readonly: true` on a container propagates to **all descendants** recursively — child `readonly: false` does not override an ancestor's readonly (matches `<fieldset disabled>` semantics)
+- Orthogonal to `enableIf`: hidden fields stay hidden; visible readonly fields render readonly
+
+**Container readonly example** — all children render readonly even though they have no `readonly` flag of their own:
+
+```json
+{
+  "type": "container",
+  "key": "locked_section",
+  "label": "Locked Section",
+  "readonly": true,
+  "elements": [
+    { "type": "text", "key": "ref_code", "label": "Reference Code" },
+    { "type": "number", "key": "amount", "label": "Amount" }
+  ]
+}
+```
+
 **Path Resolution:**
 
 - **Dot notation**: `user.profile.name`, `settings.theme.primaryColor`
@@ -680,9 +736,7 @@ An editable 2D grid with plain-text cells, cell merging, and full keyboard navig
     ["Widget A", "100", "120", "140"],
     ["Widget B", "80", "90", "95"]
   ],
-  "merges": [
-    { "row": 0, "col": 0, "rowspan": 1, "colspan": 2 }
-  ]
+  "merges": [{ "row": 0, "col": 0, "rowspan": 1, "colspan": 2 }]
 }
 ```
 
@@ -697,10 +751,10 @@ An editable 2D grid with plain-text cells, cell merging, and full keyboard navig
 
 **Properties:**
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `columns` | `number` | `3` | Initial column count |
-| `rows` | `number` | `3` | Initial row count |
+| Property  | Type     | Default | Description          |
+| --------- | -------- | ------- | -------------------- |
+| `columns` | `number` | `3`     | Initial column count |
+| `rows`    | `number` | `3`     | Initial row count    |
 
 **Features:**