@dmitryvim/form-builder 0.1.39 → 0.1.41

package/dist/form-builder.js

@@ -1661,7 +1661,7 @@ function validateForm(skipValidation = false) {
               if (child.hidden) {
                 // For hidden child elements, use their default value
                 itemData[child.key] =
-                  child.default !== undefined ? child.default : "";
+                  child.default !== undefined ? child.default : null;
               } else {
                 const childKey = `${fullKey}[${actualIndex}].${child.key}`;
                 itemData[child.key] = validateElement(
@@ -1683,7 +1683,7 @@ function validateForm(skipValidation = false) {
             if (child.hidden) {
               // For hidden child elements, use their default value
               groupData[child.key] =
-                child.default !== undefined ? child.default : "";
+                child.default !== undefined ? child.default : null;
             } else {
               const childKey = `${key}.${child.key}`;
               groupData[child.key] = validateElement(
@@ -1716,7 +1716,7 @@ function validateForm(skipValidation = false) {
               if (child.hidden) {
                 // For hidden child elements, use their default value
                 itemData[child.key] =
-                  child.default !== undefined ? child.default : "";
+                  child.default !== undefined ? child.default : null;
               } else {
                 const childKey = `${key}[${i}].${child.key}`;
                 itemData[child.key] = validateElement(
@@ -1755,7 +1755,7 @@ function validateForm(skipValidation = false) {
             if (child.hidden) {
               // For hidden child elements, use their default value
               containerData[child.key] =
-                child.default !== undefined ? child.default : "";
+                child.default !== undefined ? child.default : null;
             } else {
               const childKey = `${key}.${child.key}`;
               containerData[child.key] = validateElement(
@@ -1776,7 +1776,9 @@ function validateForm(skipValidation = false) {
   state.schema.elements.forEach((element) => {
     // Handle hidden elements - use their default value instead of reading from DOM
     if (element.hidden) {
-      data[element.key] = element.default !== undefined ? element.default : "";
+      // Use null as default for consistency with empty field behavior
+      // File fields, number fields, and other non-text fields return null when empty
+      data[element.key] = element.default !== undefined ? element.default : null;
     } else {
       data[element.key] = validateElement(element, { path: "" });
     }
@@ -2658,7 +2660,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)
@@ -3079,19 +3081,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 =
@@ -3148,13 +3162,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.39",
+  "version": "0.1.41",
   "description": "A reusable JSON schema form builder library",
   "main": "dist/form-builder.js",
   "module": "dist/form-builder.js",