@dmitryvim/form-builder 0.1.34 → 0.1.37

package/dist/demo.js

@@ -215,7 +215,7 @@ const EXAMPLE_SCHEMA = {
       label: "Session ID",
       description: "Hidden session identifier for tracking purposes",
       hidden: true,
-      default: "session_" + Math.random().toString(36).substr(2, 9),
+      default: `session_${Math.random().toString(36).substr(2, 9)}`,
     },
   ],
 };
@@ -373,6 +373,10 @@ const el = {
   copyDataBtn: document.getElementById("copyDataBtn"),
   downloadDataBtn: document.getElementById("downloadDataBtn"),
   dataErrors: document.getElementById("dataErrors"),
+  actionsTextarea: document.getElementById("actionsTextarea"),
+  formatActionsBtn: document.getElementById("formatActionsBtn"),
+  clearActionsBtn: document.getElementById("clearActionsBtn"),
+  actionsErrors: document.getElementById("actionsErrors"),
 };
 
 // Utility functions
@@ -406,6 +410,44 @@ function downloadFile(filename, content) {
   URL.revokeObjectURL(url);
 }
 
+// Parse and validate external actions
+function parseActions(actionsText) {
+  if (!actionsText || actionsText.trim() === "") {
+    return [];
+  }
+
+  try {
+    const actions = JSON.parse(actionsText);
+
+    if (!Array.isArray(actions)) {
+      throw new Error("Actions must be an array");
+    }
+
+    // Validate each action
+    for (let i = 0; i < actions.length; i++) {
+      const action = actions[i];
+      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") {
+        throw new Error(
+          `Action at index ${i} missing valid 'related_field' 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`);
+      }
+    }
+
+    return actions;
+  } catch (error) {
+    throw new Error(`Actions JSON error: ${error.message}`);
+  }
+}
+
 // Configure FormBuilder with in-memory handlers
 function setupFormBuilder() {
   // Set form container
@@ -438,17 +480,44 @@ function setupFormBuilder() {
   });
 
   // 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
+  // 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}`;
+    }
 
-    console.log("Action clicked:", { label: actionLabel, value });
+    console.log("Action clicked:", {
+      label: actionLabel,
+      value: actionValue,
+      relatedField,
+      system: arguments.length === 1 ? "schema-based" : "external",
+    });
 
     // Show message to user (compatible with all environments)
     if (typeof window !== "undefined" && window.alert) {
-      window.alert(`${actionLabel} clicked: ${value}`);
+      if (relatedField) {
+        window.alert(
+          `External Action: "${actionLabel}" clicked for field "${relatedField}" with value: ${actionValue}`,
+        );
+      } else {
+        window.alert(`Schema Action: "${actionLabel}" clicked: ${actionValue}`);
+      }
     } else {
-      console.log(`Demo action: ${actionLabel} clicked: ${value}`);
+      console.log(
+        `Demo action: ${actionLabel} clicked: ${actionValue}`,
+        relatedField ? ` for field: ${relatedField}` : "",
+      );
     }
   });
 
@@ -461,6 +530,7 @@ function setupFormBuilder() {
 function applyCurrentSchema() {
   clearError(el.schemaErrors);
   clearError(el.formErrors);
+  clearError(el.actionsErrors);
 
   try {
     const schema = JSON.parse(el.schemaInput.value);
@@ -474,6 +544,15 @@ function applyCurrentSchema() {
       return false;
     }
 
+    // Parse external actions
+    let externalActions = [];
+    try {
+      externalActions = parseActions(el.actionsTextarea.value);
+    } catch (error) {
+      showError(el.actionsErrors, error.message);
+      return false;
+    }
+
     // Build action value -> label map for efficient lookup
     actionLabelMap = buildActionLabelMap(schema);
 
@@ -492,10 +571,12 @@ function applyCurrentSchema() {
       // Ignore errors when getting current data
     }
 
-    // Render form with current data
-    FormBuilder.renderForm(schema, currentData);
+    // Render form with current data and external actions
+    FormBuilder.renderForm(schema, currentData, externalActions);
 
     console.log(`Form rendered in ${isReadOnly ? "readonly" : "edit"} mode`);
+    console.log(`External actions:`, externalActions);
+
     return true;
   } catch (e) {
     showError(el.schemaErrors, `JSON parse error: ${e.message}`);
@@ -513,7 +594,9 @@ el.resetSchemaBtn.addEventListener("click", () => {
   clearError(el.schemaErrors);
   clearError(el.formErrors);
   clearError(el.dataErrors);
+  clearError(el.actionsErrors);
   el.dataTextarea.value = "";
+  el.actionsTextarea.value = "";
 
   // Clear file storage
   fileStorage.clear();
@@ -618,6 +701,15 @@ el.prefillBtn.addEventListener("click", () => {
     const prefillData = JSON.parse(el.dataTextarea.value || "{}");
     const currentSchema = JSON.parse(el.schemaInput.value);
 
+    // Parse external actions
+    let externalActions = [];
+    try {
+      externalActions = parseActions(el.actionsTextarea.value);
+    } catch (error) {
+      showError(el.actionsErrors, error.message);
+      return;
+    }
+
     // Convert enhanced data back to raw format for prefilling
     const processedData = JSON.parse(JSON.stringify(prefillData));
 
@@ -658,9 +750,10 @@ el.prefillBtn.addEventListener("click", () => {
     const isReadOnly = el.readOnlyToggle.checked;
     FormBuilder.setMode(isReadOnly ? "readonly" : "edit");
 
-    FormBuilder.renderForm(currentSchema, processedData);
+    FormBuilder.renderForm(currentSchema, processedData, externalActions);
     console.log("Form prefilled with data");
     console.log("Processed prefill data:", processedData);
+    console.log("External actions:", externalActions);
   } catch (e) {
     showError(el.dataErrors, `JSON parse error: ${e.message}`);
     console.error("Prefill error:", e);
@@ -685,6 +778,51 @@ el.downloadDataBtn.addEventListener("click", () => {
   console.log("Data downloaded");
 });
 
+// Actions management handlers
+el.formatActionsBtn.addEventListener("click", () => {
+  try {
+    const actions = parseActions(el.actionsTextarea.value);
+    el.actionsTextarea.value = pretty(actions);
+    clearError(el.actionsErrors);
+    console.log("Actions formatted");
+  } catch (e) {
+    showError(el.actionsErrors, e.message);
+    console.error("Format actions error:", e);
+  }
+});
+
+el.clearActionsBtn.addEventListener("click", () => {
+  el.actionsTextarea.value = "";
+  clearError(el.actionsErrors);
+  // Re-apply schema to remove external actions from the form
+  applyCurrentSchema();
+  console.log("Actions cleared");
+});
+
+// Example external actions for demonstration
+const EXAMPLE_ACTIONS = [
+  {
+    related_field: "title[0]",
+    value: "generate-title",
+    label: "🤖 Generate Title",
+  },
+  {
+    related_field: "description",
+    value: "improve-description",
+    label: "✨ Improve Description",
+  },
+  {
+    related_field: "slides[0].title",
+    value: "optimize-slide-title",
+    label: "🎯 Optimize Slide Title",
+  },
+  {
+    related_field: "cover",
+    value: "analyze-image",
+    label: "🔍 Analyze Image",
+  },
+];
+
 // Initialize demo application
 function initDemo() {
   // Set up FormBuilder
@@ -693,6 +831,9 @@ function initDemo() {
   // Initialize with example schema
   el.schemaInput.value = pretty(EXAMPLE_SCHEMA);
 
+  // Initialize with example actions
+  el.actionsTextarea.value = pretty(EXAMPLE_ACTIONS);
+
   // Apply initial schema
   applyCurrentSchema();
 

package/dist/elements.html

@@ -4,28 +4,7 @@
     <meta charset="utf-8" />
     <title>Form Builder - Element Types Documentation</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- Development only - replace with local Tailwind build for production -->
-    <script>
-      if (
-        location.hostname === "localhost" ||
-        location.hostname === "127.0.0.1" ||
-        location.protocol === "file:"
-      ) {
-        // Development environment - load Tailwind CDN
-        const script = document.createElement("script");
-        script.src = "https://cdn.tailwindcss.com";
-        document.head.appendChild(script);
-      } else {
-        // Production environment - load local CSS (implement local build)
-        console.warn(
-          "Production mode: Please implement local Tailwind CSS build",
-        );
-        const link = document.createElement("link");
-        link.rel = "stylesheet";
-        link.href = "./tailwind.min.css"; // Local build file
-        document.head.appendChild(link);
-      }
-    </script>
+    <script src="https://cdn.tailwindcss.com"></script>
     <script>
       tailwind.config = {
         darkMode: "media",

package/dist/elements.js

@@ -12,7 +12,7 @@ function initializeFormBuilder() {
     const fileUrl = URL.createObjectURL(file);
 
     fileStorage.set(resourceId, {
-      file: file,
+      file,
       url: fileUrl,
       name: file.name,
       type: file.type,