table element
This commit is contained in:
@@ -1 +1 @@
|
|||||||
1.2.74
|
1.2.75
|
||||||
|
|||||||
@@ -3,19 +3,21 @@
|
|||||||
window.BridgeBlocksCustomElements.push(function(ctx){
|
window.BridgeBlocksCustomElements.push(function(ctx){
|
||||||
const { bm, addOnce, css } = ctx;
|
const { bm, addOnce, css } = ctx;
|
||||||
addOnce(bm, 'cust-table', { id:'cust-table', label:'🧩 Tabelle (2xN)',
|
addOnce(bm, 'cust-table', { id:'cust-table', label:'🧩 Tabelle (2xN)',
|
||||||
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'})}">
|
content:`<table data-bridge-table="1" data-bridge-rows="3" data-bridge-cols="2" data-gjs-selectable="true" data-gjs-hoverable="true" role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'})}">
|
||||||
<tr>
|
<tbody>
|
||||||
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte A</th>
|
<tr>
|
||||||
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte B</th>
|
<th data-gjs-selectable="false" data-gjs-draggable="false" style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte A</th>
|
||||||
</tr>
|
<th data-gjs-selectable="false" data-gjs-draggable="false" 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>
|
<tr>
|
||||||
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
|
<td data-gjs-selectable="false" data-gjs-draggable="false" style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 1</td>
|
||||||
</tr>
|
<td data-gjs-selectable="false" data-gjs-draggable="false" 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>
|
<tr>
|
||||||
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
|
<td data-gjs-selectable="false" data-gjs-draggable="false" style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 2</td>
|
||||||
</tr>
|
<td data-gjs-selectable="false" data-gjs-draggable="false" style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>`
|
</table>`
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -32,7 +32,7 @@
|
|||||||
const safeCols = Math.max(1, Math.min(6, Number(cols) || 2));
|
const safeCols = Math.max(1, Math.min(6, Number(cols) || 2));
|
||||||
const cellStyle = "padding:8px;border:1px solid #e2e8f0;font-size:13px";
|
const cellStyle = "padding:8px;border:1px solid #e2e8f0;font-size:13px";
|
||||||
const headStyle = "text-align:left;padding:8px;border:1px solid #e2e8f0;background-color:#f8fafc;font-size:13px";
|
const headStyle = "text-align:left;padding:8px;border:1px solid #e2e8f0;background-color:#f8fafc;font-size:13px";
|
||||||
let html = '';
|
let html = '<tbody>';
|
||||||
for (let r = 0; r < safeRows; r++) {
|
for (let r = 0; r < safeRows; r++) {
|
||||||
html += '<tr>';
|
html += '<tr>';
|
||||||
for (let c = 0; c < safeCols; c++) {
|
for (let c = 0; c < safeCols; c++) {
|
||||||
@@ -46,6 +46,7 @@
|
|||||||
}
|
}
|
||||||
html += '</tr>';
|
html += '</tr>';
|
||||||
}
|
}
|
||||||
|
html += '</tbody>';
|
||||||
return html;
|
return html;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -112,6 +113,10 @@
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
modal.close();
|
modal.close();
|
||||||
|
const mdl = modal.getModel && modal.getModel();
|
||||||
|
if (mdl && typeof mdl.set === 'function') {
|
||||||
|
mdl.set('open', false);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const saveBtn = document.createElement('button');
|
const saveBtn = document.createElement('button');
|
||||||
@@ -136,6 +141,10 @@
|
|||||||
component.view.render();
|
component.view.render();
|
||||||
}
|
}
|
||||||
modal.close();
|
modal.close();
|
||||||
|
const mdl = modal.getModel && modal.getModel();
|
||||||
|
if (mdl && typeof mdl.set === 'function') {
|
||||||
|
mdl.set('open', false);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
actions.appendChild(cancelBtn);
|
actions.appendChild(cancelBtn);
|
||||||
@@ -176,6 +185,11 @@
|
|||||||
|
|
||||||
editor.on('component:selected', (model) => {
|
editor.on('component:selected', (model) => {
|
||||||
if (isBridgeTableComponent(model)) {
|
if (isBridgeTableComponent(model)) {
|
||||||
|
model.set && model.set({
|
||||||
|
selectable: true,
|
||||||
|
hoverable: true,
|
||||||
|
highlightable: true,
|
||||||
|
});
|
||||||
const toolbar = model.get('toolbar') || [];
|
const toolbar = model.get('toolbar') || [];
|
||||||
const exists = toolbar.some(btn => btn && btn.command === 'bridge-table:edit');
|
const exists = toolbar.some(btn => btn && btn.command === 'bridge-table:edit');
|
||||||
if (!exists) {
|
if (!exists) {
|
||||||
|
|||||||
Reference in New Issue
Block a user