@dmitryvim/form-builder 0.1.38 → 0.1.40

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;
 }
 
@@ -2643,7 +2658,7 @@ function addPrefillFilesToIndex(initialFiles) {
       if (!state.resourceIndex.has(resourceId)) {
         // Extract filename from URL/path
         const filename = resourceId.split("/").pop() || "file";
-        // Determine file type from extension
+        // Determine file type from extension (excluding PSD from image types)
         const extension = filename.split(".").pop()?.toLowerCase();
         const fileType =
           extension && ["jpg", "jpeg", "png", "gif", "webp"].includes(extension)
@@ -3064,19 +3079,31 @@ function renderFilePreviewReadonly(resourceId, fileName) {
   const actualFileName =
     fileName || meta?.name || resourceId.split("/").pop() || "file";
 
+  // Determine if this looks like a PSD file (should be treated as download, not preview)
+  const isPSD = actualFileName.toLowerCase().match(/\.psd$/);
+
   // Individual file result container
   const fileResult = document.createElement("div");
-  fileResult.className = "space-y-3";
+  fileResult.className = isPSD ? "space-y-2" : "space-y-3";
 
-  // Large preview container
+  // Preview container - compact for PSD files, large for others
   const previewContainer = document.createElement("div");
-  previewContainer.className =
-    "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity";
+  if (isPSD) {
+    // Compact container for PSD files
+    previewContainer.className =
+      "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity flex items-center p-3 max-w-sm";
+  } else {
+    // Large container for images/videos
+    previewContainer.className =
+      "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity";
+  }
 
-  // Determine if this looks like an image file
+  // Determine if this looks like an image file (excluding PSD files)
   const isImage =
-    meta?.type?.startsWith("image/") ||
-    actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/);
+    !isPSD && (
+      meta?.type?.startsWith("image/") ||
+      actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/)
+    );
 
   // Determine if this looks like a video file
   const isVideo =
@@ -3133,13 +3160,30 @@ function renderFilePreviewReadonly(resourceId, fileName) {
       previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
     }
   } else {
-    // Other file types
-    previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">📁</div><div class="text-sm">${actualFileName}</div></div></div>`;
+    // Other file types - special handling for PSD files
+    const fileIcon = isPSD ? "🎨" : "📁";
+    const fileDescription = isPSD ? "PSD File" : "Document";
+    
+    if (isPSD) {
+      // Compact horizontal layout for PSD files
+      previewContainer.innerHTML = `
+        <div class="flex items-center space-x-3">
+          <div class="text-3xl text-gray-400">${fileIcon}</div>
+          <div class="flex-1 min-w-0">
+            <div class="text-sm font-medium text-gray-900 truncate">${actualFileName}</div>
+            <div class="text-xs text-gray-500">${fileDescription}</div>
+          </div>
+        </div>
+      `;
+    } else {
+      // Large centered layout for other documents
+      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">${fileIcon}</div><div class="text-sm">${actualFileName}</div><div class="text-xs text-gray-500 mt-1">${fileDescription}</div></div></div>`;
+    }
   }
 
-  // File name
+  // File name (only show for non-PSD files since PSD files show name inline)
   const fileNameElement = document.createElement("p");
-  fileNameElement.className = "text-sm font-medium text-gray-900 text-center";
+  fileNameElement.className = isPSD ? "hidden" : "text-sm font-medium text-gray-900 text-center";
   fileNameElement.textContent = actualFileName;
 
   // Download button

package/package.json

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