@dmitryvim/form-builder 0.1.38 → 0.1.39

package/dist/demo.js

@@ -5,6 +5,16 @@
 const EXAMPLE_SCHEMA = {
   version: "0.3",
   title: "Asset Uploader with Slides",
+  actions: [
+    {
+      key: "test-missing",
+      label: "Другая потеря"
+    },
+    {
+      key: "save-draft",
+      label: "Сохранить черновик"
+    }
+  ],
   elements: [
     {
       type: "file",
@@ -797,6 +807,13 @@ const EXAMPLE_ACTIONS = [
     value: "save_form_draft",
     label: "💾 Save Draft",
   },
+  // Action with missing related field (should appear at bottom of form)
+  {
+    related_field: "non_existent_field",
+    key: "test-missing",
+    value: "test_missing_field_action",
+    label: "🔍 Test Missing Field Action",
+  },
   {
     key: "preview",
     value: "preview_infographic",

package/dist/form-builder.js

@@ -998,14 +998,15 @@ function renderExternalActions() {
 
   // Group actions by related_field (null for form-level actions)
   const actionsByField = new Map();
-  const formLevelActions = [];
+  const trueFormLevelActions = [];
+  const movedFormLevelActions = [];
 
   state.externalActions.forEach((action) => {
     if (!action.key || !action.value) return;
 
     if (!action.related_field) {
-      // Form-level action
-      formLevelActions.push(action);
+      // True form-level action
+      trueFormLevelActions.push(action);
     } else {
       // Field-level action
       if (!actionsByField.has(action.related_field)) {
@@ -1021,8 +1022,10 @@ function renderExternalActions() {
     const fieldElement = findFormElementByFieldPath(fieldPath);
     if (!fieldElement) {
       console.warn(
-        `External action: Could not find form element for field "${fieldPath}"`,
+        `External action: Could not find form element for field "${fieldPath}", treating as form-level actions`,
       );
+      // If field is not found, treat these actions as moved form-level actions
+      movedFormLevelActions.push(...actions);
       return;
     }
 
@@ -1087,12 +1090,13 @@ function renderExternalActions() {
   });
 
   // Render form-level actions at the bottom of the form
-  if (formLevelActions.length > 0) {
-    renderFormLevelActions(formLevelActions);
+  const allFormLevelActions = [...trueFormLevelActions, ...movedFormLevelActions];
+  if (allFormLevelActions.length > 0) {
+    renderFormLevelActions(allFormLevelActions, trueFormLevelActions);
   }
 }
 
-function renderFormLevelActions(actions) {
+function renderFormLevelActions(actions, trueFormLevelActions = []) {
   if (!state.formRoot) return;
 
   // Remove any existing form-level actions container
@@ -1113,11 +1117,14 @@ function renderFormLevelActions(actions) {
     actionBtn.className =
       "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";
 
+    // Check if this is a true form-level action (no related_field originally)
+    const isTrueFormLevelAction = trueFormLevelActions.includes(action);
+
     // Resolve action label with priority:
     // 1. Use explicit label from action if provided
-    // 2. Try to find label from schema element labels using key
+    // 2. Try to find label from schema element labels using key (only for true form-level actions)
     // 3. Fall back to using key as label
-    const resolvedLabel = resolveActionLabel(action.key, action.label, null);
+    const resolvedLabel = resolveActionLabel(action.key, action.label, null, isTrueFormLevelAction);
     actionBtn.textContent = resolvedLabel;
 
     actionBtn.addEventListener("click", (e) => {
@@ -1141,8 +1148,8 @@ function renderFormLevelActions(actions) {
 }
 
 // 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)
+function resolveActionLabel(actionKey, externalLabel, schemaElement, isTrueFormLevelAction = false) {
+  // 1. Try to find label from predefined actions in schema element 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) {
@@ -1150,12 +1157,20 @@ function resolveActionLabel(actionKey, externalLabel, schemaElement) {
     }
   }
 
-  // 2. Use explicit label from external action if provided
+  // 2. Try to find label from root-level schema actions (only for true form-level actions)
+  if (isTrueFormLevelAction && state.schema && state.schema.actions && Array.isArray(state.schema.actions)) {
+    const rootAction = state.schema.actions.find(a => a.key === actionKey);
+    if (rootAction && rootAction.label) {
+      return rootAction.label;
+    }
+  }
+
+  // 3. Use explicit label from external action if provided
   if (externalLabel) {
     return externalLabel;
   }
 
-  // 3. Fall back to using key as label
+  // 4. Fall back to using key as label
   return actionKey;
 }
 

package/package.json

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