@dmitryvim/form-builder 0.1.37 → 0.1.38

package/README.md

@@ -105,9 +105,9 @@ npm install @dmitryvim/form-builder
         "extensions": ["jpg", "png", "webp"]
       },
       "actions": [
-        { "value": "enhance", "label": "Enhance Quality" },
-        { "value": "crop", "label": "Auto Crop" },
-        { "value": "retry", "label": "Try Again" }
+        { "key": "enhance", "label": "Enhance Quality" },
+        { "key": "crop", "label": "Auto Crop" },
+        { "key": "retry", "label": "Try Again" }
       ]
     },
     {
@@ -152,9 +152,14 @@ FormBuilder.setUploadHandler(async (file) => {
   // Your upload logic - return resource ID
   return "resource-123";
 });
-FormBuilder.setActionHandler((value) => {
+FormBuilder.setActionHandler((value, key, relatedField) => {
   // Handle action button clicks
-  console.log("Action clicked:", value);
+  console.log("Action clicked:", { value, key, relatedField });
+  if (relatedField) {
+    // Field-level action
+  } else {
+    // Form-level action
+  }
 });
 FormBuilder.renderForm(schema, prefillData);
 ```

package/dist/demo.js

@@ -19,9 +19,9 @@ const EXAMPLE_SCHEMA = {
       },
       maxSizeMB: 10,
       actions: [
-        { value: "cover1.retry", label: "А давай ещё разок" },
-        { value: "cover1.enhance", label: "Улучшить качество" },
-        { value: "cover1.crop", label: "Обрезать изображение" },
+        { key: "retry", label: "А давай ещё разок" },
+        { key: "enhance", label: "Улучшить качество" },
+        { key: "crop", label: "Обрезать изображение" },
       ],
     },
     {
@@ -323,38 +323,6 @@ 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 = {
@@ -429,16 +397,21 @@ function parseActions(actionsText) {
       if (!action || typeof action !== "object") {
         throw new Error(`Action at index ${i} must be an object`);
       }
-      if (!action.related_field || typeof action.related_field !== "string") {
+      if (!action.key || typeof action.key !== "string") {
         throw new Error(
-          `Action at index ${i} missing valid 'related_field' property`,
+          `Action at index ${i} missing valid 'key' property`,
         );
       }
       if (!action.value || typeof action.value !== "string") {
         throw new Error(`Action at index ${i} missing valid 'value' property`);
       }
-      if (!action.label || typeof action.label !== "string") {
-        throw new Error(`Action at index ${i} missing valid 'label' property`);
+      // related_field is optional - if not provided, action is form-level
+      if (action.related_field && typeof action.related_field !== "string") {
+        throw new Error(`Action at index ${i} has invalid 'related_field' property type`);
+      }
+      // Label is optional - will be resolved from schema or key
+      if (action.label && typeof action.label !== "string") {
+        throw new Error(`Action at index ${i} has invalid 'label' property type`);
       }
     }
 
@@ -480,43 +453,28 @@ function setupFormBuilder() {
   });
 
   // Action handler - display message when action button is clicked
-  // Updated to support both old system (1 param) and new system (2 params)
-  FormBuilder.setActionHandler((relatedFieldOrValue, value) => {
-    let actionLabel, actionValue, relatedField;
-
-    // Determine if this is the old system (1 param) or new system (2 params)
-    if (arguments.length === 1) {
-      // Old system: only value parameter
-      actionValue = relatedFieldOrValue;
-      actionLabel = actionLabelMap.get(actionValue) || actionValue;
-      relatedField = null;
-    } else {
-      // New system: related_field and value parameters
-      relatedField = relatedFieldOrValue;
-      actionValue = value;
-      actionLabel = `Action for ${relatedField}`;
-    }
-
+  // New system: value, key, related_field parameters
+  FormBuilder.setActionHandler((value, key, relatedField) => {
     console.log("Action clicked:", {
-      label: actionLabel,
-      value: actionValue,
+      value,
+      key,
       relatedField,
-      system: arguments.length === 1 ? "schema-based" : "external",
+      type: relatedField ? "field-level" : "form-level",
     });
 
     // Show message to user (compatible with all environments)
     if (typeof window !== "undefined" && window.alert) {
       if (relatedField) {
         window.alert(
-          `External Action: "${actionLabel}" clicked for field "${relatedField}" with value: ${actionValue}`,
+          `Field Action: "${key}" clicked for field "${relatedField}" with value: ${value}`,
         );
       } else {
-        window.alert(`Schema Action: "${actionLabel}" clicked: ${actionValue}`);
+        window.alert(`Form Action: "${key}" clicked with value: ${value}`);
       }
     } else {
       console.log(
-        `Demo action: ${actionLabel} clicked: ${actionValue}`,
-        relatedField ? ` for field: ${relatedField}` : "",
+        `Demo action: ${key} clicked with value: ${value}`,
+        relatedField ? ` for field: ${relatedField}` : " (form-level)",
       );
     }
   });
@@ -553,8 +511,6 @@ 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;
@@ -801,25 +757,55 @@ el.clearActionsBtn.addEventListener("click", () => {
 
 // Example external actions for demonstration
 const EXAMPLE_ACTIONS = [
+  // Field-level actions using predefined labels from schema
+  {
+    related_field: "cover",
+    key: "retry",
+    value: "regenerate_cover_image", // Specific action value for handler
+  },
+  {
+    related_field: "cover",
+    key: "enhance",
+    value: "enhance_cover_quality", // Specific action value for handler
+  },
+  {
+    related_field: "cover",
+    key: "crop",
+    value: "auto_crop_cover", // Specific action value for handler
+  },
+  // Field-level actions with custom labels
   {
     related_field: "title[0]",
-    value: "generate-title",
-    label: "🤖 Generate Title",
+    key: "generate",
+    value: "ai_generate_title",
+    label: "🤖 Generate Title", // Custom label overrides schema
   },
   {
     related_field: "description",
-    value: "improve-description",
-    label: "✨ Improve Description",
+    key: "improve",
+    value: "ai_improve_description", // Key will be used as fallback label
   },
   {
     related_field: "slides[0].title",
-    value: "optimize-slide-title",
-    label: "🎯 Optimize Slide Title",
+    key: "optimize",
+    value: "ai_optimize_slide_title",
+    label: "🎯 Optimize Slide Title", // Custom label
   },
+  // Form-level actions (no related_field)
   {
-    related_field: "cover",
-    value: "analyze-image",
-    label: "🔍 Analyze Image",
+    key: "save-draft",
+    value: "save_form_draft",
+    label: "💾 Save Draft",
+  },
+  {
+    key: "preview",
+    value: "preview_infographic",
+    label: "👁️ Preview",
+  },
+  {
+    key: "export",
+    value: "export_json_data",
+    label: "📄 Export JSON",
   },
 ];
 

package/dist/form-builder.js

@@ -290,50 +290,8 @@ 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-2 text-sm border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors";
-        actionBtn.textContent = action.label;
-
-        actionBtn.addEventListener("click", (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-
-          if (
-            state.config.actionHandler &&
-            typeof state.config.actionHandler === "function"
-          ) {
-            // For schema-based actions (old system), call with just the value for backward compatibility
-            // Check if the handler expects 2 parameters (new system) or 1 parameter (old system)
-            if (state.config.actionHandler.length > 1) {
-              // New system: pass related_field (element key) and value
-              state.config.actionHandler(element.key, action.value);
-            } else {
-              // Old system: pass only value for backward compatibility
-              state.config.actionHandler(action.value);
-            }
-          }
-        });
-
-        actionsContainer.appendChild(actionBtn);
-      }
-    });
-
-    wrapper.appendChild(actionsContainer);
-  }
+  // Actions are now only rendered via external actions system in renderExternalActions()
+  // element.actions are only used for label lookup, not direct rendering
 
   return wrapper;
 }
@@ -597,6 +555,23 @@ async function renderFilePreview(container, resourceId, options = {}) {
   }
 }
 
+function renderThumbnailForResource(slot, rid, meta) {
+  const url = state.config.getThumbnail(rid);
+  if (url) {
+    const img = document.createElement("img");
+    img.className = "w-full h-full object-contain";
+    img.alt = meta.name;
+    img.src = url;
+    slot.appendChild(img);
+  } else {
+    slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
+                            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+                            </svg>
+                        </div>`;
+  }
+}
+
 function renderResourcePills(container, rids, onRemove) {
   clear(container);
 
@@ -721,21 +696,7 @@ function renderResourcePills(container, rids, onRemove) {
           slot.appendChild(img);
         } else if (state.config.getThumbnail) {
           // Use getThumbnail for uploaded files
-          const img = document.createElement("img");
-          img.className = "w-full h-full object-contain";
-          img.alt = meta.name;
-
-          const url = state.config.getThumbnail(rid);
-          if (url) {
-            img.src = url;
-            slot.appendChild(img);
-          } else {
-            slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-                            </svg>
-                        </div>`;
-          }
+          renderThumbnailForResource(slot, rid, meta);
         } else {
           slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
                         <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
@@ -985,21 +946,48 @@ function findFormElementByFieldPath(fieldPath) {
 
   if (!state.formRoot) return null;
 
-  // Try exact match first
-  let element = state.formRoot.querySelector(`[name="${fieldPath}"]`);
-  if (element) return element;
+  // In edit mode, try to find input elements with name attributes
+  if (!state.config.readonly) {
+    // Try exact match first
+    let element = state.formRoot.querySelector(`[name="${fieldPath}"]`);
+    if (element) return element;
 
-  // Try with array notation variations
-  const variations = [
-    fieldPath,
-    fieldPath.replace(/\[(\d+)\]/g, "[$1]"), // normalize array notation
-    fieldPath.replace(/\./g, "[") +
-      "]".repeat((fieldPath.match(/\./g) || []).length), // convert dots to brackets
-  ];
+    // Try with array notation variations
+    const variations = [
+      fieldPath,
+      fieldPath.replace(/\[(\d+)\]/g, "[$1]"), // normalize array notation
+      fieldPath.replace(/\./g, "[") +
+        "]".repeat((fieldPath.match(/\./g) || []).length), // convert dots to brackets
+    ];
+
+    for (const variation of variations) {
+      element = state.formRoot.querySelector(`[name="${variation}"]`);
+      if (element) return element;
+    }
+  }
 
-  for (const variation of variations) {
-    element = state.formRoot.querySelector(`[name="${variation}"]`);
-    if (element) return element;
+  // In readonly mode, or if no input found, look for field wrappers using data attributes
+  // Find the schema element for this field path to match against rendered fields
+  const schemaElement = findSchemaElement(fieldPath);
+  if (!schemaElement) return null;
+
+  // Look for field wrappers that contain the field key
+  const fieldWrappers = state.formRoot.querySelectorAll('.fb-field-wrapper');
+  for (const wrapper of fieldWrappers) {
+    // Try to find a label or element that matches this field
+    const labelText = schemaElement.label || schemaElement.key;
+    const labelElement = wrapper.querySelector('label');
+    if (labelElement && (labelElement.textContent === labelText || labelElement.textContent === `${labelText}*`)) {
+      // Create a dummy element for the field so actions can attach
+      let fieldElement = wrapper.querySelector('.field-placeholder');
+      if (!fieldElement) {
+        fieldElement = document.createElement('div');
+        fieldElement.className = 'field-placeholder';
+        fieldElement.style.display = 'none';
+        wrapper.appendChild(fieldElement);
+      }
+      return fieldElement;
+    }
   }
 
   return null;
@@ -1008,14 +996,32 @@ function findFormElementByFieldPath(fieldPath) {
 function renderExternalActions() {
   if (!state.externalActions || !Array.isArray(state.externalActions)) return;
 
+  // Group actions by related_field (null for form-level actions)
+  const actionsByField = new Map();
+  const formLevelActions = [];
+
   state.externalActions.forEach((action) => {
-    if (!action.related_field || !action.value || !action.label) return;
+    if (!action.key || !action.value) return;
 
+    if (!action.related_field) {
+      // Form-level action
+      formLevelActions.push(action);
+    } else {
+      // Field-level action
+      if (!actionsByField.has(action.related_field)) {
+        actionsByField.set(action.related_field, []);
+      }
+      actionsByField.get(action.related_field).push(action);
+    }
+  });
+
+  // Render field-level actions
+  actionsByField.forEach((actions, fieldPath) => {
     // Find the form element for this related field
-    const fieldElement = findFormElementByFieldPath(action.related_field);
+    const fieldElement = findFormElementByFieldPath(fieldPath);
     if (!fieldElement) {
       console.warn(
-        `External action: Could not find form element for field "${action.related_field}"`,
+        `External action: Could not find form element for field "${fieldPath}"`,
       );
       return;
     }
@@ -1028,25 +1034,91 @@ function renderExternalActions() {
 
     if (!wrapper) {
       console.warn(
-        `External action: Could not find wrapper for field "${action.related_field}"`,
+        `External action: Could not find wrapper for field "${fieldPath}"`,
       );
       return;
     }
 
-    // Check if we already added external actions to this wrapper
-    if (wrapper.querySelector(".external-actions-container")) return;
+    // Remove any existing actions container
+    const existingContainer = wrapper.querySelector(".external-actions-container");
+    if (existingContainer) {
+      existingContainer.remove();
+    }
 
     // Create actions container
     const actionsContainer = document.createElement("div");
     actionsContainer.className =
-      "external-actions-container mt-4 flex flex-wrap gap-2";
+      "external-actions-container mt-3 flex flex-wrap gap-2";
+
+    // Find the corresponding schema element for label lookup
+    const schemaElement = findSchemaElement(fieldPath);
+
+    // Create action buttons
+    actions.forEach((action) => {
+      const actionBtn = document.createElement("button");
+      actionBtn.type = "button";
+      actionBtn.className =
+        "bg-white text-gray-700 border border-gray-200 px-3 py-2 text-sm rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 shadow-sm";
+
+      // Resolve action label with priority:
+      // 1. Use explicit label from action if provided
+      // 2. Try to find label from schema element labels using key
+      // 3. Fall back to using key as label
+      const resolvedLabel = resolveActionLabel(action.key, action.label, schemaElement);
+      actionBtn.textContent = resolvedLabel;
+
+      actionBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (
+          state.config.actionHandler &&
+          typeof state.config.actionHandler === "function"
+        ) {
+          // Call with value, key, and related_field for the new actions system
+          state.config.actionHandler(action.value, action.key, action.related_field);
+        }
+      });
+
+      actionsContainer.appendChild(actionBtn);
+    });
+
+    wrapper.appendChild(actionsContainer);
+  });
+
+  // Render form-level actions at the bottom of the form
+  if (formLevelActions.length > 0) {
+    renderFormLevelActions(formLevelActions);
+  }
+}
+
+function renderFormLevelActions(actions) {
+  if (!state.formRoot) return;
 
-    // Create action button
+  // Remove any existing form-level actions container
+  const existingContainer = state.formRoot.querySelector(".form-level-actions-container");
+  if (existingContainer) {
+    existingContainer.remove();
+  }
+
+  // Create form-level actions container
+  const actionsContainer = document.createElement("div");
+  actionsContainer.className =
+    "form-level-actions-container mt-6 pt-4 border-t border-gray-200 flex flex-wrap gap-3 justify-center";
+
+  // Create action buttons
+  actions.forEach((action) => {
     const actionBtn = document.createElement("button");
     actionBtn.type = "button";
     actionBtn.className =
-      "px-3 py-2 text-sm border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors";
-    actionBtn.textContent = action.label;
+      "bg-white text-gray-700 border border-gray-200 px-4 py-2 text-sm font-medium rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 shadow-sm";
+
+    // Resolve action label with priority:
+    // 1. Use explicit label from action if provided
+    // 2. Try to find label from schema element labels using key
+    // 3. Fall back to using key as label
+    const resolvedLabel = resolveActionLabel(action.key, action.label, null);
+    actionBtn.textContent = resolvedLabel;
 
     actionBtn.addEventListener("click", (e) => {
       e.preventDefault();
@@ -1056,14 +1128,58 @@ function renderExternalActions() {
         state.config.actionHandler &&
         typeof state.config.actionHandler === "function"
       ) {
-        // Call with both related_field and value for the new actions system
-        state.config.actionHandler(action.related_field, action.value);
+        // Call with value, key, and null related_field for form-level actions
+        state.config.actionHandler(action.value, action.key, null);
       }
     });
 
     actionsContainer.appendChild(actionBtn);
-    wrapper.appendChild(actionsContainer);
   });
+
+  // Append to form root
+  state.formRoot.appendChild(actionsContainer);
+}
+
+// Helper function to resolve action label
+function resolveActionLabel(actionKey, externalLabel, schemaElement) {
+  // 1. Try to find label from predefined actions in schema using key (highest priority)
+  if (schemaElement && schemaElement.actions && Array.isArray(schemaElement.actions)) {
+    const predefinedAction = schemaElement.actions.find(a => a.key === actionKey);
+    if (predefinedAction && predefinedAction.label) {
+      return predefinedAction.label;
+    }
+  }
+
+  // 2. Use explicit label from external action if provided
+  if (externalLabel) {
+    return externalLabel;
+  }
+
+  // 3. Fall back to using key as label
+  return actionKey;
+}
+
+// Helper function to find schema element by field path
+function findSchemaElement(fieldPath) {
+  if (!state.schema || !state.schema.elements) return null;
+
+  let currentElements = state.schema.elements;
+  let foundElement = null;
+
+  // Handle paths like 'a.b' or 'a[0].b' by looking for keys in sequence
+  const keys = fieldPath.replace(/\[\d+\]/g, '').split('.').filter(Boolean);
+
+  for (const key of keys) {
+    foundElement = currentElements.find(el => el.key === key);
+    if (!foundElement) {
+      return null; // Key not found at this level
+    }
+    if (foundElement.elements) {
+      currentElements = foundElement.elements;
+    }
+  }
+
+  return foundElement;
 }
 
 function showTooltip(tooltipId, button) {

package/dist/index.html

@@ -296,7 +296,7 @@
                   id="actionsTextarea"
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm resize-none flex-1"
                   spellcheck="false"
-                  placeholder='[{"related_field": "fieldName", "value": "action-key", "label": "Button Label"}]'
+                  placeholder='[{"key": "action-key", "value": "specific-value", "related_field": "fieldName", "label": "Button Label"}]'
                 ></textarea>
                 <div
                   id="actionsErrors"

package/package.json

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