@flowselections/layout-maker 1.20.1 → 1.22.0

package/dist-lib/lib/browserPrint.js

@@ -29,7 +29,7 @@ export function paginaCss(formaat, orientatie, margeMm = 0) {
     const gedraaid = formaat && orientatie === "landscape"
         ? `${formaat.hoogte}mm ${formaat.breedte}mm`
         : size;
-    return `@page { size: ${gedraaid}; margin: ${margeMm}mm; }
+    return `@page { size: ${gedraaid}; margin: ${margeMm}mm; }
 @media print { html, body { margin: 0; padding: 0; } }`;
 }
 /**
@@ -94,10 +94,10 @@ export async function drukAf(opdracht) {
         return { printer };
     }
     doc.open();
-    doc.write(`<!doctype html><html><head><meta charset="utf-8" />
-<title>${opdracht.documentnaam ?? "Document"}</title>
-<style>${paginaCss(formaat, opdracht.orientatie, opdracht.margeMm ?? 0)}
-body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
+    doc.write(`<!doctype html><html><head><meta charset="utf-8" />
+<title>${opdracht.documentnaam ?? "Document"}</title>
+<style>${paginaCss(formaat, opdracht.orientatie, opdracht.margeMm ?? 0)}
+body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
 ${opdracht.css ?? ""}</style></head><body>${opdracht.html}</body></html>`);
     doc.close();
     await new Promise((r) => setTimeout(r, 250));

package/dist-lib/lib/layoutPreview.js

@@ -79,8 +79,8 @@ function elementHtml(el, ctx) {
         case "cirkel":
             return `<div style="${base};border-radius:50%;border:${s.randbreedte || 0.3}mm solid ${s.randkleur ?? "#111827"}"></div>`;
         case "barcode":
-            return `<div style="${base};display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:monospace">
-        <div style="width:100%;height:70%;background:repeating-linear-gradient(90deg,#111 0 1.2px,#fff 1.2px 3px)"></div>
+            return `<div style="${base};display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:monospace">
+        <div style="width:100%;height:70%;background:repeating-linear-gradient(90deg,#111 0 1.2px,#fff 1.2px 3px)"></div>
         <div style="font-size:7pt">${esc(inhoud)}</div></div>`;
         case "qrcode":
             return `<div style="${base};background:repeating-conic-gradient(#111 0% 25%, #fff 0% 50%) 0 0/22% 22%"></div>`;
@@ -125,10 +125,10 @@ export function bouwDocumentHtml(layout, elementen, gegevens) {
     const body = zichtbaar.map((e) => elementHtml(e, ctx)).join("");
     const b = layout.orientatie === "landscape" ? layout.hoogte_mm : layout.breedte_mm;
     const h = layout.orientatie === "landscape" ? layout.breedte_mm : layout.hoogte_mm;
-    return `<!doctype html><html lang="nl"><head><meta charset="utf-8"><title>${esc(layout.naam)}</title>
-<style>@page{size:${b}mm ${h}mm;margin:0}
-body{margin:0;background:#e5e7eb}
-.pagina{position:relative;width:${b}mm;height:${h}mm;background:#fff;margin:0 auto;overflow:hidden}
-@media print{body{background:#fff}}</style></head>
+    return `<!doctype html><html lang="nl"><head><meta charset="utf-8"><title>${esc(layout.naam)}</title>
+<style>@page{size:${b}mm ${h}mm;margin:0}
+body{margin:0;background:#e5e7eb}
+.pagina{position:relative;width:${b}mm;height:${h}mm;background:#fff;margin:0 auto;overflow:hidden}
+@media print{body{background:#fff}}</style></head>
 <body><div class="pagina">${body}</div></body></html>`;
 }

package/dist-lib/lib/pakbonHtml.js

@@ -640,56 +640,56 @@ export function renderPakbonDocument(config, order, opties = {}) {
     const font = opties.lettertype ?? 'Arial, Helvetica, "Segoe UI", sans-serif';
     const grootte = opties.lettergrootte ?? 8.5;
     const body = renderPakbonBody(config, order, opties);
-    return `<!doctype html><html lang="nl"><head><meta charset="utf-8" />
-<title>${esc(opties.titel ?? "Pakbon")}</title>
-<style>
-@page { size: ${b}mm ${h}mm; margin: ${marge}mm; }
-* { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; }
-body { font-family: ${font}; font-size: ${grootte}pt; color: #111827; line-height: 1.35; }
-.blok { margin-bottom: 2mm; }
-.sectitel { font-size: 90%; font-weight: 600; text-transform: uppercase; color: #6b7280; margin-bottom: 0.6mm; }
-.vet { font-weight: 600; }
-.kv { display: flex; justify-content: space-between; gap: 3mm; }
-.kv .k { color: #6b7280; }
-.kv .v { font-weight: 500; }
-.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6mm; }
-.kader { border: 0.25mm solid #d1d5db; border-radius: 1mm; padding: 1.5mm; }
-table.regels { width: 100%; border-collapse: collapse; }
-table.regels.vast { table-layout: fixed; }
-table.regels.vast td, table.regels.vast th { overflow-wrap: anywhere; }
-table.regels th, table.regels td { padding: 0.7mm 1mm; vertical-align: top; }
-table.regels th { font-size: 90%; text-transform: uppercase; color: #6b7280; font-weight: 600; text-align: left; }
-.rand { border: 0.2mm solid #d1d5db; }
-.onder { border-bottom: 0.2mm solid #d1d5db; }
-table.regels.compact th, table.regels.compact td { padding: 0.3mm 0.8mm; }
-tr.zebra td { background: #f3f4f6; }
-.plijst { margin: 0; padding-left: 4mm; }
-.groep { margin-bottom: 1.5mm; }
-.regelrij { display: flex; gap: 2mm; }
-.tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
-.karblok { margin-bottom: 2mm; }
-.karblok.omkaderd { border: 0.25mm solid #d1d5db; border-radius: 1mm; padding: 1.5mm; }
-.karkop { display: flex; justify-content: space-between; align-items: center; padding: 0.8mm 1.5mm; border-radius: 1mm; margin-bottom: 1mm; }
-.bundel { display: inline-block; border: 0.3mm dashed #6b7280; border-radius: 1mm; padding: 0.4mm 1.5mm; margin-bottom: 1mm; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2mm; font-size: 90%; }
-.laag { margin-bottom: 1.5mm; }
-.laagkop { display: flex; justify-content: space-between; font-weight: 500; border-bottom: 0.2mm solid #d1d5db; padding-bottom: 0.4mm; margin-bottom: 0.6mm; }
-.laagkop.compact { border-bottom: none; }
-.meta { display: flex; gap: 3mm; font-size: 88%; font-weight: 400; color: #4b5563; }
-.totalen { display: flex; flex-wrap: wrap; gap: 5mm; border-top: 0.25mm solid #d1d5db; padding-top: 1.2mm; font-weight: 500; }
-.paginavoet { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; }
-.handtekening { margin-top: 3mm; }
-.lijnveld { margin-top: 4mm; border-bottom: 0.25mm solid #6b7280; padding-bottom: 3mm; }
-.lijnveld.hoog { padding-bottom: 10mm; }
-.lijn { border-top: 0.25mm solid #d1d5db; margin: 1.5mm 0; }
-.balk { height: 1mm; background: #374151; margin: 1.5mm 0; }
-.qr { border: 0.25mm dashed #9ca3af; }
-.streepjes { width: 45mm; background: repeating-linear-gradient(to right, #111827 0 2px, transparent 2px 5px); }
-.klein { font-size: 85%; color: #6b7280; }
-.breekvoor { break-before: page; page-break-before: always; }
-.heelhouden { break-inside: avoid; page-break-inside: avoid; }
-img { max-width: 100%; }
-</style></head>
+    return `<!doctype html><html lang="nl"><head><meta charset="utf-8" />
+<title>${esc(opties.titel ?? "Pakbon")}</title>
+<style>
+@page { size: ${b}mm ${h}mm; margin: ${marge}mm; }
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body { font-family: ${font}; font-size: ${grootte}pt; color: #111827; line-height: 1.35; }
+.blok { margin-bottom: 2mm; }
+.sectitel { font-size: 90%; font-weight: 600; text-transform: uppercase; color: #6b7280; margin-bottom: 0.6mm; }
+.vet { font-weight: 600; }
+.kv { display: flex; justify-content: space-between; gap: 3mm; }
+.kv .k { color: #6b7280; }
+.kv .v { font-weight: 500; }
+.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6mm; }
+.kader { border: 0.25mm solid #d1d5db; border-radius: 1mm; padding: 1.5mm; }
+table.regels { width: 100%; border-collapse: collapse; }
+table.regels.vast { table-layout: fixed; }
+table.regels.vast td, table.regels.vast th { overflow-wrap: anywhere; }
+table.regels th, table.regels td { padding: 0.7mm 1mm; vertical-align: top; }
+table.regels th { font-size: 90%; text-transform: uppercase; color: #6b7280; font-weight: 600; text-align: left; }
+.rand { border: 0.2mm solid #d1d5db; }
+.onder { border-bottom: 0.2mm solid #d1d5db; }
+table.regels.compact th, table.regels.compact td { padding: 0.3mm 0.8mm; }
+tr.zebra td { background: #f3f4f6; }
+.plijst { margin: 0; padding-left: 4mm; }
+.groep { margin-bottom: 1.5mm; }
+.regelrij { display: flex; gap: 2mm; }
+.tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
+.karblok { margin-bottom: 2mm; }
+.karblok.omkaderd { border: 0.25mm solid #d1d5db; border-radius: 1mm; padding: 1.5mm; }
+.karkop { display: flex; justify-content: space-between; align-items: center; padding: 0.8mm 1.5mm; border-radius: 1mm; margin-bottom: 1mm; }
+.bundel { display: inline-block; border: 0.3mm dashed #6b7280; border-radius: 1mm; padding: 0.4mm 1.5mm; margin-bottom: 1mm; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2mm; font-size: 90%; }
+.laag { margin-bottom: 1.5mm; }
+.laagkop { display: flex; justify-content: space-between; font-weight: 500; border-bottom: 0.2mm solid #d1d5db; padding-bottom: 0.4mm; margin-bottom: 0.6mm; }
+.laagkop.compact { border-bottom: none; }
+.meta { display: flex; gap: 3mm; font-size: 88%; font-weight: 400; color: #4b5563; }
+.totalen { display: flex; flex-wrap: wrap; gap: 5mm; border-top: 0.25mm solid #d1d5db; padding-top: 1.2mm; font-weight: 500; }
+.paginavoet { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; }
+.handtekening { margin-top: 3mm; }
+.lijnveld { margin-top: 4mm; border-bottom: 0.25mm solid #6b7280; padding-bottom: 3mm; }
+.lijnveld.hoog { padding-bottom: 10mm; }
+.lijn { border-top: 0.25mm solid #d1d5db; margin: 1.5mm 0; }
+.balk { height: 1mm; background: #374151; margin: 1.5mm 0; }
+.qr { border: 0.25mm dashed #9ca3af; }
+.streepjes { width: 45mm; background: repeating-linear-gradient(to right, #111827 0 2px, transparent 2px 5px); }
+.klein { font-size: 85%; color: #6b7280; }
+.breekvoor { break-before: page; page-break-before: always; }
+.heelhouden { break-inside: avoid; page-break-inside: avoid; }
+img { max-width: 100%; }
+</style></head>
 <body>${body}</body></html>`;
 }
 /** Handig voor testen: het document met de voorbeeldgegevens. */