@dmitryvim/form-builder 0.1.14 → 0.1.16

package/dist/form-builder.js

@@ -212,7 +212,7 @@ function renderElement(element, ctx) {
                 
                 const initial = ctx.prefill[element.key] || element.default;
                 if (initial) {
-                    renderFilePreview(fileContainer, initial, initial, '');
+                    renderFilePreview(fileContainer, initial, initial, '', false).catch(console.error);
                 } else {
                     fileContainer.innerHTML = `
                         <div class="flex flex-col items-center justify-center h-full text-gray-400">
@@ -566,6 +566,28 @@ async function renderFilePreview(container, resourceId, fileName, fileType, isRe
             // Non-image file
             container.innerHTML = '<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">📁</div><div class="text-sm">' + fileName + '</div></div>';
         }
+        
+        // Add delete button for edit mode
+        if (!isReadonly) {
+            addDeleteButton(container, () => {
+                // Clear the file
+                state.resourceIndex.delete(resourceId);
+                // Update hidden input
+                const hiddenInput = container.parentElement.querySelector('input[type="hidden"]');
+                if (hiddenInput) {
+                    hiddenInput.value = '';
+                }
+                // Clear preview and show placeholder
+                container.innerHTML = `
+                    <div class="flex flex-col items-center justify-center h-full text-gray-400">
+                        <svg class="w-6 h-6 mb-2" 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 class="text-sm text-center">Нажмите или перетащите файл</div>
+                    </div>
+                `;
+            });
+        }
     } else if (state.config.getThumbnail) {
         // Try to get thumbnail from config for uploaded files
         try {
@@ -581,33 +603,35 @@ async function renderFilePreview(container, resourceId, fileName, fileType, isRe
             console.warn('Thumbnail loading failed:', error);
             container.innerHTML = '<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">📁</div><div class="text-sm">' + fileName + '</div></div>';
         }
+        
+        // Add delete button for edit mode
+        if (!isReadonly) {
+            addDeleteButton(container, () => {
+                // Clear the file
+                state.resourceIndex.delete(resourceId);
+                // Update hidden input
+                const hiddenInput = container.parentElement.querySelector('input[type="hidden"]');
+                if (hiddenInput) {
+                    hiddenInput.value = '';
+                }
+                // Clear preview and show placeholder
+                container.innerHTML = `
+                    <div class="flex flex-col items-center justify-center h-full text-gray-400">
+                        <svg class="w-6 h-6 mb-2" 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 class="text-sm text-center">Нажмите или перетащите файл</div>
+                    </div>
+                `;
+            });
+        }
     } else {
         // No file and no getThumbnail config - fallback
         container.innerHTML = '<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">🖼️</div><div class="text-sm">' + fileName + '</div></div>';
     }
     
-    // Add overlay with download/remove buttons if needed
-    if (!isReadonly) {
-        const overlay = document.createElement('div');
-        overlay.className = 'absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center';
-        const buttonContainer = document.createElement('div');
-        buttonContainer.className = 'flex gap-2';
-        
-        const removeBtn = document.createElement('button');
-        removeBtn.className = 'bg-red-600 text-white px-2 py-1 rounded text-xs';
-        removeBtn.textContent = 'Удалить';
-        removeBtn.onclick = (e) => {
-            e.stopPropagation();
-            const hiddenInput = container.parentElement.querySelector('input[type="hidden"]');
-            if (hiddenInput) hiddenInput.value = '';
-            container.innerHTML = '<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">📁</div><div class="text-sm">Click or drop to upload</div></div>';
-        };
-        
-        buttonContainer.appendChild(removeBtn);
-        overlay.appendChild(buttonContainer);
-        container.appendChild(overlay);
-    } else if (isReadonly && state.config.downloadFile) {
-        // Add click handler for download in readonly mode
+    // Add click handler for download in readonly mode
+    if (isReadonly && state.config.downloadFile) {
         container.style.cursor = 'pointer';
         container.onclick = () => {
             if (state.config.downloadFile) {
@@ -620,66 +644,83 @@ async function renderFilePreview(container, resourceId, fileName, fileType, isRe
 function renderResourcePills(container, rids, onRemove) {
     clear(container);
     
-    // Show empty placeholder if no files
-    if (!rids || rids.length === 0) {
-        container.innerHTML = `
-            <div class="grid grid-cols-4 gap-3 mb-3">
-                <div class="aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors">
-                    <svg class="w-6 h-6 text-gray-400" 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>
-                <div class="aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors">
-                    <svg class="w-6 h-6 text-gray-400" 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>
-                <div class="aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors">
-                    <svg class="w-6 h-6 text-gray-400" 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>
-                <div class="aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors">
-                    <svg class="w-6 h-6 text-gray-400" 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>
-            </div>
-            <div class="text-center text-xs text-gray-600">
-                <span class="underline cursor-pointer">Загрузите</span> или перетащите файлы
-            </div>
-        `;
-        // Add click handler to the entire placeholder
-        container.onclick = () => {
-            const fileInput = container.parentElement?.querySelector('input[type="file"]');
-            if (fileInput) fileInput.click();
-        };
+    // Show initial placeholder only if this is the first render (no previous grid)
+    // Check if container already has grid class to determine if this is initial render
+    const isInitialRender = !container.classList.contains('grid');
+    
+    if ((!rids || rids.length === 0) && isInitialRender) {
+        // Create grid container
+        const gridContainer = document.createElement('div');
+        gridContainer.className = 'grid grid-cols-4 gap-3 mb-3';
         
-        // Also add specific handler to the "Загрузите" link
-        const uploadLink = container.querySelector('span.underline');
-        if (uploadLink) {
-            uploadLink.onclick = (e) => {
-                e.stopPropagation(); // Prevent double trigger
-                const fileInput = container.parentElement?.querySelector('input[type="file"]');
+        // Create 4 placeholder slots
+        for (let i = 0; i < 4; i++) {
+            const slot = document.createElement('div');
+            slot.className = 'aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors';
+            
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('class', 'w-12 h-12 text-gray-400');
+            svg.setAttribute('fill', 'currentColor');
+            svg.setAttribute('viewBox', '0 0 24 24');
+            
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('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.appendChild(path);
+            slot.appendChild(svg);
+            
+            // Add click handler to each slot
+            slot.onclick = () => {
+                // Look for file input in the files wrapper (go up from list -> filesContainer -> filesWrapper)
+                const filesWrapper = container.closest('.space-y-2');
+                const fileInput = filesWrapper?.querySelector('input[type="file"]');
                 if (fileInput) fileInput.click();
             };
+            
+            gridContainer.appendChild(slot);
         }
+        
+        // Create text container
+        const textContainer = document.createElement('div');
+        textContainer.className = 'text-center text-xs text-gray-600';
+        
+        const uploadLink = document.createElement('span');
+        uploadLink.className = 'underline cursor-pointer';
+        uploadLink.textContent = 'Загрузите';
+        uploadLink.onclick = (e) => {
+            e.stopPropagation();
+            // Look for file input in the files wrapper (go up from list -> filesContainer -> filesWrapper)
+            const filesWrapper = container.closest('.space-y-2');
+            const fileInput = filesWrapper?.querySelector('input[type="file"]');
+            if (fileInput) fileInput.click();
+        };
+        
+        textContainer.appendChild(uploadLink);
+        textContainer.appendChild(document.createTextNode(' или перетащите файлы'));
+        
+        // Clear and append
+        container.appendChild(gridContainer);
+        container.appendChild(textContainer);
         return;
     }
     
-    // Show files grid
+    // Always show files grid if we have files OR if this was already a grid
+    // This prevents shrinking when deleting the last file
     container.className = 'grid grid-cols-4 gap-3 mt-2';
     
     // Calculate how many slots we need (at least 4, then expand by rows of 4)
-    const minSlots = 4;
-    const currentImagesCount = rids.length;
-    const slotsNeeded = Math.max(minSlots, Math.ceil((currentImagesCount + 1) / 4) * 4);
+    const currentImagesCount = rids ? rids.length : 0;
+    // Calculate rows needed: always show an extra slot for adding next file
+    // 0-3 files → 1 row (4 slots), 4-7 files → 2 rows (8 slots), 8-11 files → 3 rows (12 slots)
+    const rowsNeeded = Math.floor(currentImagesCount / 4) + 1;
+    const slotsNeeded = rowsNeeded * 4;
+
     
     // Add all slots (filled and empty)
     for (let i = 0; i < slotsNeeded; i++) {
         const slot = document.createElement('div');
         
-        if (i < rids.length) {
+        if (rids && i < rids.length) {
             // Filled slot with image preview
             const rid = rids[i];
             const meta = state.resourceIndex.get(rid);
@@ -711,14 +752,14 @@ function renderResourcePills(container, rids, onRemove) {
                         slot.appendChild(img);
                     } else {
                         slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                            <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>`;
                     }
                 } else {
                     slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                        <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>`;
@@ -749,9 +790,11 @@ function renderResourcePills(container, rids, onRemove) {
         } else {
             // Empty slot placeholder
             slot.className = 'aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors';
-            slot.innerHTML = '<svg class="w-6 h-6 text-gray-400" 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>';
+            slot.innerHTML = '<svg class="w-12 h-12 text-gray-400" 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>';
             slot.onclick = () => {
-                const fileInput = container.parentElement?.querySelector('input[type="file"]');
+                // Look for file input in the files wrapper (go up from list -> filesContainer -> filesWrapper)
+                const filesWrapper = container.closest('.space-y-2');
+                const fileInput = filesWrapper?.querySelector('input[type="file"]');
                 if (fileInput) fileInput.click();
             };
         }
@@ -806,7 +849,7 @@ async function handleFileSelect(file, container, fieldName) {
     }
     hiddenInput.value = rid;
     
-    renderFilePreview(container, rid, file.name, file.type);
+    renderFilePreview(container, rid, file.name, file.type, false).catch(console.error);
 }
 
 function setupDragAndDrop(element, dropHandler) {
@@ -827,6 +870,29 @@ function setupDragAndDrop(element, dropHandler) {
     });
 }
 
+function addDeleteButton(container, onDelete) {
+    // Remove existing overlay if any
+    const existingOverlay = container.querySelector('.delete-overlay');
+    if (existingOverlay) {
+        existingOverlay.remove();
+    }
+    
+    // Create overlay with center delete button (like in files)
+    const overlay = document.createElement('div');
+    overlay.className = 'delete-overlay absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center';
+    
+    const deleteBtn = document.createElement('button');
+    deleteBtn.className = 'bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700 transition-colors';
+    deleteBtn.textContent = 'Удалить';
+    deleteBtn.onclick = (e) => {
+        e.stopPropagation();
+        onDelete();
+    };
+    
+    overlay.appendChild(deleteBtn);
+    container.appendChild(overlay);
+}
+
 function showTooltip(tooltipId, button) {
     const tooltip = document.getElementById(tooltipId);
     const isCurrentlyVisible = !tooltip.classList.contains('hidden');

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "A reusable JSON schema form builder library",
   "main": "dist/form-builder.js",
   "files": [