@dmitryvim/form-builder 0.2.25 → 0.2.27

package/README.md

@@ -54,7 +54,7 @@ This package ships with complete TypeScript definitions. Ensure your `tsconfig.j
 ## Core Features
 
 - **🎯 Schema-driven forms**: JSON Schema v0.3 → Interactive forms with live preview
-- **📁 Advanced file handling**: Images, videos, documents with drag-and-drop and grid preview
+- **📁 Advanced file handling**: Images, videos, documents with drag-and-drop, tile preview, and per-file upload progress
 - **✅ Real-time validation**: Client-side validation with visual feedback and error display
 - **🌍 Internationalization**: Built-in English/Russian support with extensible translation system
 - **🎨 Rich field types**: Text, textarea, number, select, file, files, and nested groups
@@ -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" }
   ]
 }
 ```
@@ -293,8 +301,8 @@ See [Integration Guide](docs/integration.md) for detailed setup instructions.
 - **Colour**: Colour picker with hex values (single or palette)
 - **Slider**: Range slider with linear/exponential scales (v0.2.7+)
 - **Table**: 2D editable grid with cell merging, keyboard navigation, readonly mode
-- **File**: Single file upload with preview and type restrictions
-- **Files**: Multiple file upload with grid layout and drag-and-drop
+- **File**: Single file upload with compact dropzone, tile preview, and type restrictions
+- **Files**: Multiple file upload with 80px tile grid, per-file upload progress, and drag-and-drop
 - **Container**: Nested containers with repeatable array support
 
 ### File Handling
@@ -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:**