@dmitryvim/form-builder 0.1.29 → 0.1.33

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,20 +18,26 @@ 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",
+      type: "file",
       key: "assets",
       label: "Другие изображения",
       description:
         "Additional images that provide context, show different angles, or demonstrate product usage. These will be used to enhance the infographic composition.",
       required: false,
+      multiple: true,
+      minCount: 0,
+      maxCount: 10,
       accept: {
         extensions: ["png", "jpg", "gif"],
         mime: ["image/png", "image/jpeg", "image/gif"],
       },
-      minCount: 0,
-      maxCount: 10,
       maxSizeMB: 5,
     },
     {
@@ -42,6 +48,9 @@ const EXAMPLE_SCHEMA = {
       description:
         "The exact product name as it should appear on the infographic. Use the official product name without marketing terms or decorative elements.",
       required: true,
+      multiple: true,
+      minCount: 1,
+      maxCount: 4,
       minLength: 1,
       maxLength: 100,
       pattern: "^[A-Za-zА-Яа-я0-9 _*-]+$",
@@ -92,6 +101,68 @@ const EXAMPLE_SCHEMA = {
       step: 0.01,
       default: 0.5,
     },
+    {
+      type: "text",
+      key: "tags",
+      label: "Теги товара",
+      description: "Добавьте ключевые теги для лучшего описания товара",
+      placeholder: "Введите тег",
+      required: false,
+      multiple: true,
+      minCount: 1,
+      maxCount: 5,
+      minLength: 2,
+      maxLength: 20,
+      default: "popular"
+    },
+    {
+      type: "textarea",
+      key: "features",
+      label: "Особенности товара",
+      description: "Опишите ключевые особенности и преимущества товара",
+      placeholder: "Опишите особенность...",
+      required: false,
+      multiple: true,
+      minCount: 2,
+      maxCount: 4,
+      minLength: 10,
+      maxLength: 200,
+      rows: 3
+    },
+    {
+      type: "number",
+      key: "dimensions",
+      label: "Размеры (см)",
+      description: "Укажите размеры товара в сантиметрах: длина, ширина, высота",
+      placeholder: "0",
+      required: false,
+      multiple: true,
+      minCount: 2,
+      maxCount: 3,
+      min: 0,
+      max: 500,
+      step: 0.1,
+      decimals: 1
+    },
+    {
+      type: "select",
+      key: "colors",
+      label: "Доступные цвета",
+      description: "Выберите доступные цветовые варианты товара",
+      required: false,
+      multiple: true,
+      minCount: 1,
+      maxCount: 3,
+      options: [
+        { value: "white", label: "Белый" },
+        { value: "black", label: "Черный" },
+        { value: "red", label: "Красный" },
+        { value: "blue", label: "Синий" },
+        { value: "green", label: "Зеленый" },
+        { value: "gray", label: "Серый" }
+      ],
+      default: "white"
+    },
     {
       type: "file",
       key: "video",
@@ -106,12 +177,14 @@ const EXAMPLE_SCHEMA = {
       maxSizeMB: 50,
     },
     {
-      type: "group",
+      type: "container",
       key: "slides",
       label: "Слайды",
       description:
         "Additional slides to showcase different aspects of your product. Each slide can have its own main image and decorative elements to create a comprehensive infographic presentation.",
-      repeat: { min: 1, max: 5 },
+      multiple: true,
+      minCount: 1,
+      maxCount: 5,
       elements: [
         {
           type: "text",
@@ -135,6 +208,14 @@ const EXAMPLE_SCHEMA = {
         },
       ],
     },
+    {
+      type: "text",
+      key: "session_id",
+      label: "Session ID",
+      description: "Hidden session identifier for tracking purposes",
+      hidden: true,
+      default: "session_" + Math.random().toString(36).substr(2, 9),
+    },
   ],
 };
 
@@ -241,6 +322,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 +436,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 +473,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");