@dmitryvim/form-builder 0.1.29 → 0.1.31

package/README.md

@@ -39,10 +39,11 @@ npm install @dmitryvim/form-builder
 
 - **🎯 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
-- **✅ Real-time validation**: Client-side validation with visual feedback and error display  
+- **✅ 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
 - **👁️ Read-only mode**: Display form data without editing capabilities
+- **🔘 Action buttons**: Configurable buttons in readonly mode for custom interactions
 - **💾 Draft saving**: Save incomplete forms without validation
 - **🔧 Framework agnostic**: Works with any web stack (React, Vue, Angular, vanilla JS)
 - **📦 Zero dependencies**: Self-contained HTML/CSS/JavaScript
@@ -51,6 +52,7 @@ npm install @dmitryvim/form-builder
 ## Quick Examples
 
 ### Simple Contact Form
+
 ```json
 {
   "version": "0.3",
@@ -87,7 +89,8 @@ npm install @dmitryvim/form-builder
 }
 ```
 
-### Advanced Product Form with Groups
+### Advanced Product Form with Actions
+
 ```json
 {
   "version": "0.3",
@@ -100,7 +103,12 @@ npm install @dmitryvim/form-builder
       "required": true,
       "accept": {
         "extensions": ["jpg", "png", "webp"]
-      }
+      },
+      "actions": [
+        { "value": "enhance", "label": "Enhance Quality" },
+        { "value": "crop", "label": "Auto Crop" },
+        { "value": "retry", "label": "Try Again" }
+      ]
     },
     {
       "type": "group",
@@ -129,24 +137,30 @@ npm install @dmitryvim/form-builder
 ## Integration Methods
 
 ### 1. NPM Package (Recommended)
+
 ```bash
 npm install @dmitryvim/form-builder
 ```
 
 ```javascript
 // ES6 imports
-import FormBuilder from '@dmitryvim/form-builder';
+import FormBuilder from "@dmitryvim/form-builder";
 
 // Configure and use
-FormBuilder.setFormRoot(document.getElementById('form-container'));
+FormBuilder.setFormRoot(document.getElementById("form-container"));
 FormBuilder.setUploadHandler(async (file) => {
   // Your upload logic - return resource ID
-  return 'resource-123';
+  return "resource-123";
+});
+FormBuilder.setActionHandler((value) => {
+  // Handle action button clicks
+  console.log("Action clicked:", value);
 });
 FormBuilder.renderForm(schema, prefillData);
 ```
 
 ### 2. CDN Integration
+
 ```html
 <!-- Direct script include (npm CDN) -->
 <script src="https://cdn.jsdelivr.net/npm/@dmitryvim/form-builder@latest/dist/form-builder.js"></script>
@@ -160,11 +174,15 @@ FormBuilder.renderForm(schema, prefillData);
 <!-- Embed complete demo -->
 <iframe
   src="https://picaz-form-builder.website.yandexcloud.net/form-builder/latest/index.html"
-  width="100%" height="600px" frameborder="0">
+  width="100%"
+  height="600px"
+  frameborder="0"
+>
 </iframe>
 ```
 
 ### 3. Self-Hosted Deployment
+
 Download and serve the `dist/` folder contents.
 
 See [Integration Guide](docs/integration.md) for detailed setup instructions.
@@ -172,6 +190,7 @@ See [Integration Guide](docs/integration.md) for detailed setup instructions.
 ## Complete Feature Set
 
 ### Field Types
+
 - **Text**: Single-line with pattern validation, length limits
 - **Textarea**: Multi-line with configurable rows
 - **Number**: Numeric input with min/max/step/decimals
@@ -181,6 +200,7 @@ See [Integration Guide](docs/integration.md) for detailed setup instructions.
 - **Group**: Nested objects with repeatable array support
 
 ### File Handling
+
 - **Supported formats**: Images (jpg, png, gif, webp), Videos (mp4, webm, mov), Documents (pdf, docx, etc.)
 - **Preview system**: Thumbnails for images, video players, document icons
 - **Drag-and-drop**: Visual feedback and multi-file support
@@ -188,12 +208,14 @@ See [Integration Guide](docs/integration.md) for detailed setup instructions.
 - **Resource management**: Metadata tracking and automatic cleanup
 
 ### Validation & UX
+
 - **Real-time validation**: As-you-type with visual feedback
 - **Schema validation**: Comprehensive error reporting
 - **Internationalization**: English/Russian built-in, extensible
 - **Tooltips**: Field descriptions and hints
 - **Responsive design**: Mobile-friendly interface
 - **Read-only mode**: Display data without editing
+- **Action buttons**: Custom buttons in readonly mode with configurable handlers
 
 ## Documentation
 
@@ -209,6 +231,7 @@ See [Integration Guide](docs/integration.md) for detailed setup instructions.
 **Version Index**: [https://picaz-form-builder.website.yandexcloud.net/index.html](https://picaz-form-builder.website.yandexcloud.net/index.html)
 
 Features a 3-column interface:
+
 - **Schema Editor**: Edit JSON schema with validation
 - **Live Preview**: See form render in real-time
 - **Data Output**: View/export form data as JSON

package/dist/demo.js

@@ -18,6 +18,11 @@ const EXAMPLE_SCHEMA = {
         mime: ["image/png", "image/jpeg", "image/gif"],
       },
       maxSizeMB: 10,
+      actions: [
+        { value: "cover1.retry", label: "А давай ещё разок" },
+        { value: "cover1.enhance", label: "Улучшить качество" },
+        { value: "cover1.crop", label: "Обрезать изображение" },
+      ],
     },
     {
       type: "files",
@@ -241,6 +246,39 @@ class InMemoryFileStorage {
 // Initialize file storage
 const fileStorage = new InMemoryFileStorage();
 
+// Cache for action value -> label mapping for efficient lookup
+let actionLabelMap = new Map();
+
+// Build action value -> label mapping from schema for efficient lookup
+function buildActionLabelMap(schema) {
+  const map = new Map();
+  
+  function processElements(elements) {
+    if (!Array.isArray(elements)) return;
+    
+    for (const element of elements) {
+      if (element.actions && Array.isArray(element.actions)) {
+        for (const action of element.actions) {
+          if (action.value && action.label) {
+            map.set(action.value, action.label);
+          }
+        }
+      }
+      
+      // Process nested group elements
+      if (element.elements && Array.isArray(element.elements)) {
+        processElements(element.elements);
+      }
+    }
+  }
+  
+  if (schema && schema.elements) {
+    processElements(schema.elements);
+  }
+  
+  return map;
+}
+
 // DOM element references
 const el = {
   schemaInput: document.getElementById("schemaInput"),
@@ -322,7 +360,24 @@ function setupFormBuilder() {
     return thumbnailUrl;
   });
 
-  console.log("FormBuilder configured with in-memory file handlers");
+  // Action handler - display message when action button is clicked
+  FormBuilder.setActionHandler((value) => {
+    // Use cached action map for O(1) lookup instead of re-parsing schema
+    const actionLabel = actionLabelMap.get(value) || value; // fallback to value
+
+    console.log("Action clicked:", { label: actionLabel, value });
+    
+    // Show message to user (compatible with all environments)
+    if (typeof window !== "undefined" && window.alert) {
+      window.alert(`${actionLabel} clicked: ${value}`);
+    } else {
+      console.log(`Demo action: ${actionLabel} clicked: ${value}`);
+    }
+  });
+
+  console.log(
+    "FormBuilder configured with in-memory file handlers and action handler",
+  );
 }
 
 // Schema management functions
@@ -342,6 +397,9 @@ function applyCurrentSchema() {
       return false;
     }
 
+    // Build action value -> label map for efficient lookup
+    actionLabelMap = buildActionLabelMap(schema);
+
     // Set mode based on toggle
     const isReadOnly = el.readOnlyToggle.checked;
     FormBuilder.setMode(isReadOnly ? "readonly" : "edit");

package/dist/form-builder.js

@@ -11,6 +11,8 @@ const state = {
     downloadFile: null,
     getThumbnail: null,
     getDownloadUrl: null,
+    // Action handler
+    actionHandler: null,
     // Default implementations
     enableFilePreview: true,
     maxPreviewSize: "200px",
@@ -242,6 +244,43 @@ function renderElement(element, ctx) {
     }
   }
 
+  // Add action buttons in readonly mode
+  if (
+    state.config.readonly &&
+    element.actions &&
+    Array.isArray(element.actions) &&
+    element.actions.length > 0
+  ) {
+    const actionsContainer = document.createElement("div");
+    actionsContainer.className = "mt-3 flex flex-wrap gap-2";
+
+    element.actions.forEach((action) => {
+      if (action.value && action.label) {
+        const actionBtn = document.createElement("button");
+        actionBtn.type = "button";
+        actionBtn.className =
+          "px-3 py-1.5 text-sm bg-blue-50 border border-blue-200 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors";
+        actionBtn.textContent = action.label;
+
+        actionBtn.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (
+            state.config.actionHandler &&
+            typeof state.config.actionHandler === "function"
+          ) {
+            state.config.actionHandler(action.value);
+          }
+        });
+
+        actionsContainer.appendChild(actionBtn);
+      }
+    });
+
+    wrapper.appendChild(actionsContainer);
+  }
+
   return wrapper;
 }
 
@@ -1817,6 +1856,10 @@ function setThumbnailHandler(thumbnailFn) {
   state.config.getThumbnail = thumbnailFn;
 }
 
+function setActionHandler(actionFn) {
+  state.config.actionHandler = actionFn;
+}
+
 function setMode(mode) {
   state.config.readonly = mode === "readonly";
 }
@@ -1879,6 +1922,7 @@ const formBuilderAPI = {
   setUploadHandler,
   setDownloadHandler,
   setThumbnailHandler,
+  setActionHandler,
   setMode,
   setLocale,
   getFormData,
@@ -1903,6 +1947,7 @@ export {
   setUploadHandler,
   setDownloadHandler,
   setThumbnailHandler,
+  setActionHandler,
   setMode,
   setLocale,
   getFormData,

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "A reusable JSON schema form builder library",
   "main": "dist/form-builder.js",
   "module": "dist/form-builder.js",