v1.0.3-beta

force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css

@@ -8711,4 +8711,82 @@ ol li:before {
     transform: scale(1.1);
 }
 
+/* Enhanced Draggable Table Styles */
+.draggable-table-container {
+    position: absolute;
+    border: 2px solid transparent;
+    cursor: move;
+    z-index: 1000;
+    min-width: 200px;
+    min-height: 150px;
+    user-select: none;
+    background: white;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.draggable-table-container.selected {
+    border-color: #4f46e5;
+    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
+}
+
+.draggable-table-container table {
+    width: 100%;
+    height: 100%;
+    border-collapse: collapse;
+    margin: 0;
+    background: white;
+}
+
+.draggable-table-container th,
+.draggable-table-container td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+
+.draggable-table-container th {
+    background: #f8f9fa;
+    font-weight: 600;
+}
+
+.draggable-table-container td {
+    background: white;
+}
+
+.draggable-table-container td:focus {
+    outline: 2px solid #4f46e5;
+    outline-offset: -2px;
+}
+
+.table-controls-overlay {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: white;
+    padding: 8px;
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    display: flex;
+    gap: 4px;
+    z-index: 1002;
+}
+
+.table-controls-overlay button {
+    padding: 4px 8px;
+    font-size: 12px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.table-controls-overlay button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
 

force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js

@@ -3114,141 +3114,254 @@ export default class PropertyTemplateSelector extends LightningElement {
         }
     }
 
-    // Create table element
+    // Create table element with enhanced drag and resize functionality
     createTableElement() {
+        // Create the main table container with absolute positioning for drag/resize
+        const tableContainer = document.createElement('div');
+        tableContainer.className = 'draggable-table-container';
+        tableContainer.style.cssText = `
+            position: absolute;
+            left: 50px;
+            top: 50px;
+            width: 400px;
+            min-width: 200px;
+            min-height: 150px;
+            z-index: 1000;
+            border: 2px solid transparent;
+            cursor: move;
+            user-select: none;
+            background: white;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            overflow: hidden;
+        `;
+        
+        // Create the actual table
         const table = document.createElement('table');
-        table.style.border = '1px solid #ccc';
+        table.style.cssText = `
-        table.style.borderCollapse = 'collapse';
+            width: 100%;
-        table.style.margin = '10px 0';
+            height: 100%;
-        table.style.width = '100%';
+            border-collapse: collapse;
-        table.draggable = true;
+            margin: 0;
-        table.style.position = 'relative';
+            background: white;
-        table.style.zIndex = '1000';
+        `;
         
         // Create header row
         const headerRow = document.createElement('tr');
-        for (let i = 0; i < 3; i++) {
+        for (let i = 0; i < this.tableCols; i++) {
             const th = document.createElement('th');
             th.textContent = `Header ${i + 1}`;
-            th.style.border = '1px solid #ccc';
+            th.style.cssText = `
-            th.style.padding = '8px';
+                border: 1px solid #ddd;
-            th.style.backgroundColor = '#f5f5f5';
+                padding: 8px;
+                background: #f8f9fa;
+                font-weight: 600;
+                text-align: left;
+            `;
             headerRow.appendChild(th);
         }
         table.appendChild(headerRow);
         
         // Create data rows
-        for (let i = 0; i < 2; i++) {
+        const startRow = this.includeHeader ? 1 : 0;
+        for (let i = startRow; i < this.tableRows; i++) {
             const row = document.createElement('tr');
-            for (let j = 0; j < 3; j++) {
+            for (let j = 0; j < this.tableCols; j++) {
                 const td = document.createElement('td');
                 td.textContent = `Cell ${i + 1},${j + 1}`;
-                td.style.border = '1px solid #ccc';
+                td.style.cssText = `
-                td.style.padding = '8px';
+                    border: 1px solid #ddd;
+                    padding: 8px;
+                    background: white;
+                `;
+                // Make cells editable
+                td.contentEditable = true;
+                td.addEventListener('blur', () => {
+                    // Save changes when cell loses focus
+                });
                 row.appendChild(td);
             }
             table.appendChild(row);
         }
         
-        // Add delete button (X mark) in top-right corner
-        const deleteBtn = document.createElement('button');
-        deleteBtn.innerHTML = '×';
-        deleteBtn.style.cssText = `
-            position: absolute;
-            top: -10px;
-            right: -10px;
-            width: 20px;
-            height: 20px;
-            background: #dc3545;
-            color: white;
-            border: none;
-            border-radius: 50%;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: bold;
-            z-index: 1001;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        `;
-        deleteBtn.onclick = (e) => {
-            e.stopPropagation();
-            table.parentElement.remove();
-        };
-        
-        // Add table controls
-        const controls = document.createElement('div');
-        controls.style.cssText = `
-            margin-top: 5px;
-            padding: 5px;
-            background: #f8f9fa;
-            border: 1px solid #dee2e6;
-            border-radius: 4px;
-        `;
-        controls.innerHTML = `
-            <button onclick="${this.addTableRow.bind(this)}" style="margin: 2px; padding: 4px 8px; font-size: 12px; background: #28a745; color: white; border: none; border-radius: 3px;">+ Row</button>
-            <button onclick="${this.addTableColumn.bind(this)}" style="margin: 2px; padding: 4px 8px; font-size: 12px; background: #17a2b8; color: white; border: none; border-radius: 3px;">+ Col</button>
-            <button onclick="${this.deleteTableRow.bind(this)}" style="margin: 2px; padding: 4px 8px; font-size: 12px; background: #ffc107; color: black; border: none; border-radius: 3px;">- Row</button>
-            <button onclick="${this.deleteTableColumn.bind(this)}" style="margin: 2px; padding: 4px 8px; font-size: 12px; background: #fd7e14; color: white; border: none; border-radius: 3px;">- Col</button>
-        `;
-        
-        const tableContainer = document.createElement('div');
-        tableContainer.style.cssText = `
-            position: relative;
-            display: inline-block;
-            margin: 10px 0;
-        `;
         tableContainer.appendChild(table);
-        tableContainer.appendChild(deleteBtn);
-        tableContainer.appendChild(controls);
         
-        // Make table draggable
+        // Add resize handles (same as images)
-        tableContainer.draggable = true;
+        this.addResizeHandles(tableContainer);
-        tableContainer.addEventListener('dragstart', this.handleTableDragStart.bind(this));
+        
+        // Add delete handle (same as images)
+        this.addDeleteHandle(tableContainer);
+        
+        // Add drag functionality (same as images)
+        this.makeDraggable(tableContainer);
+        
+        // Add click to select functionality
+        tableContainer.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.selectDraggableElement(tableContainer);
+        });
+        
+        // Add table controls overlay
+        this.addTableControls(tableContainer, table);
+        
+        // Select the table after a short delay
+        setTimeout(() => {
+            this.selectDraggableElement(tableContainer);
+        }, 100);
         
         return tableContainer;
     }
+    
+    // Add table controls overlay
+    addTableControls(container, table) {
+        const controls = document.createElement('div');
+        controls.className = 'table-controls-overlay';
+        controls.style.cssText = `
+            position: absolute;
+            top: -40px;
+            left: 0;
+            background: white;
+            padding: 8px;
+            border-radius: 6px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            opacity: 0;
+            transition: opacity 0.2s ease;
+            display: flex;
+            gap: 4px;
+            z-index: 1002;
+        `;
+        
+        // Add Row button
+        const addRowBtn = document.createElement('button');
+        addRowBtn.innerHTML = '+ Row';
+        addRowBtn.style.cssText = `
+            padding: 4px 8px;
+            font-size: 12px;
+            background: #28a745;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        `;
+        addRowBtn.onclick = (e) => {
+            e.stopPropagation();
+            this.addTableRow(table);
+        };
+        
+        // Add Column button
+        const addColBtn = document.createElement('button');
+        addColBtn.innerHTML = '+ Col';
+        addColBtn.style.cssText = `
+            padding: 4px 8px;
+            font-size: 12px;
+            background: #17a2b8;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        `;
+        addColBtn.onclick = (e) => {
+            e.stopPropagation();
+            this.addTableColumn(table);
+        };
+        
+        // Delete Row button
+        const delRowBtn = document.createElement('button');
+        delRowBtn.innerHTML = '- Row';
+        delRowBtn.style.cssText = `
+            padding: 4px 8px;
+            font-size: 12px;
+            background: #ffc107;
+            color: black;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        `;
+        delRowBtn.onclick = (e) => {
+            e.stopPropagation();
+            this.deleteTableRow(table);
+        };
+        
+        // Delete Column button
+        const delColBtn = document.createElement('button');
+        delColBtn.innerHTML = '- Col';
+        delColBtn.style.cssText = `
+            padding: 4px 8px;
+            font-size: 12px;
+            background: #fd7e14;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        `;
+        delColBtn.onclick = (e) => {
+            e.stopPropagation();
+            this.deleteTableColumn(table);
+        };
+        
+        controls.appendChild(addRowBtn);
+        controls.appendChild(addColBtn);
+        controls.appendChild(delRowBtn);
+        controls.appendChild(delColBtn);
+        
+        container.appendChild(controls);
+        
+        // Show/hide controls on hover
+        container.addEventListener('mouseenter', () => {
+            controls.style.opacity = '1';
+        });
+        
+        container.addEventListener('mouseleave', () => {
+            controls.style.opacity = '0';
+        });
+    }
 
-    // Table manipulation methods
+    // Table manipulation methods (updated for new structure)
-    addTableRow(event) {
+    addTableRow(table) {
-        const table = event.target.closest('div').querySelector('table');
         const newRow = document.createElement('tr');
         const colCount = table.rows[0].cells.length;
         
         for (let i = 0; i < colCount; i++) {
             const td = document.createElement('td');
             td.textContent = `New Cell`;
-            td.style.border = '1px solid #ccc';
+            td.style.cssText = `
-            td.style.padding = '8px';
+                border: 1px solid #ddd;
+                padding: 8px;
+                background: white;
+            `;
+            td.contentEditable = true;
             newRow.appendChild(td);
         }
         
         table.appendChild(newRow);
     }
 
-    addTableColumn(event) {
+    addTableColumn(table) {
-        const table = event.target.closest('div').querySelector('table');
         const rows = table.rows;
         
         for (let i = 0; i < rows.length; i++) {
             const cell = document.createElement(i === 0 ? 'th' : 'td');
             cell.textContent = i === 0 ? `Header ${rows[i].cells.length + 1}` : `New Cell`;
-            cell.style.border = '1px solid #ccc';
+            cell.style.cssText = `
-            cell.style.padding = '8px';
+                border: 1px solid #ddd;
-            if (i === 0) cell.style.backgroundColor = '#f5f5f5';
+                padding: 8px;
+                background: ${i === 0 ? '#f8f9fa' : 'white'};
+                font-weight: ${i === 0 ? '600' : 'normal'};
+            `;
+            if (i > 0) {
+                cell.contentEditable = true;
+            }
             rows[i].appendChild(cell);
         }
     }
 
-    deleteTableRow(event) {
+    deleteTableRow(table) {
-        const table = event.target.closest('div').querySelector('table');
         if (table.rows.length > 1) {
             table.deleteRow(-1);
         }
     }
 
-    deleteTableColumn(event) {
+    deleteTableColumn(table) {
-        const table = event.target.closest('div').querySelector('table');
         const rows = table.rows;
         if (rows[0].cells.length > 1) {
             for (let i = 0; i < rows.length; i++) {
@@ -7086,8 +7199,8 @@ export default class PropertyTemplateSelector extends LightningElement {
     
     // Select draggable element
     selectDraggableElement(element) {
-        // Remove selection from all elements
+        // Remove selection from all draggable elements
-        document.querySelectorAll('.draggable-image-container').forEach(el => {
+        document.querySelectorAll('.draggable-image-container, .draggable-table-container').forEach(el => {
             el.classList.remove('selected');
         });