projects/emailtemplate.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

table

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-02-09 00:55:02 +01:00
parent f9463b02e4
commit 2ffc1cc58b
3 changed files with 42 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
public/assets/js/bridge/blocks-custom/elements/table-2xn.js
View File

@@ -2,66 +2,23 @@
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
window.BridgeBlocksCustomElements.push(function(ctx){
const { bm, addOnce, css } = ctx;
const headStyle = css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'});
const cellStyle = css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'});
addOnce(bm, 'cust-table', { id:'cust-table', label:'🧩 Tabelle (2xN)',
content: {
tagName: 'table',
attributes: {
'data-bridge-table': '1',
'data-bridge-rows': '3',
'data-bridge-cols': '2',
role: 'presentation',
width: '100%',
cellpadding: '0',
cellspacing: '0',
style: css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'}),
'data-gjs-selectable': 'true',
'data-gjs-hoverable': 'true',
},
components: [{
tagName: 'tbody',
selectable: false,
hoverable: false,
draggable: false,
highlightable: false,
components: [
{
tagName: 'tr',
selectable: false,
hoverable: false,
draggable: false,
highlightable: false,
components: [
{ type:'text', tagName:'th', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: headStyle, 'data-gjs-draggable':'false' }, content:'Spalte A' },
{ type:'text', tagName:'th', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: headStyle, 'data-gjs-draggable':'false' }, content:'Spalte B' },
],
},
{
tagName: 'tr',
selectable: false,
hoverable: false,
draggable: false,
highlightable: false,
components: [
{ type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'Zeile 1' },
{ type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'...' },
],
},
{
tagName: 'tr',
selectable: false,
hoverable: false,
draggable: false,
highlightable: false,
components: [
{ type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'Zeile 2' },
{ type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'...' },
],
},
],
}],
}
content:`<table data-bridge-table="1" data-bridge-rows="3" data-bridge-cols="2" role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'})}">
<tbody>
<tr>
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte A</th>
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte B</th>
</tr>
<tr>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 1</td>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
</tr>
<tr>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 2</td>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
</tr>
</tbody>
</table>`
});
});
})();

25
public/assets/js/bridge/table-builder.js
View File

@@ -19,6 +19,31 @@
const icon = (path) => `<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="${path}" fill="currentColor"/></svg>`;
const tableIcon = icon('M3 4h18v16H3V4zm2 2v3h6V6H5zm8 0v3h6V6h-6zM5 11v3h6v-3H5zm8 0v3h6v-3h-6zM5 16v2h6v-2H5zm8 0v2h6v-2h-6z');
if (!domc.getType || !domc.getType('bridge-table-cell')) {
domc.addType('bridge-table-cell', {
isComponent(el) {
if (!el || !el.tagName) return;
const tag = el.tagName.toUpperCase();
if (tag !== 'TD' && tag !== 'TH') return;
const table = el.closest && el.closest('table');
if (!table || table.getAttribute('data-bridge-table') !== '1') return;
return { type: 'bridge-table-cell' };
},
model: {
defaults: {
editable: true,
selectable: true,
hoverable: true,
highlightable: true,
draggable: false,
droppable: false,
copyable: true,
classes: [],
},
},
});
}
const collectTableCells = (component) => {
const el = component?.view?.el;
if (!el) return [];