react-pdf-levelup 1.0.10 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +200 -85
- package/dist/index.d.cts +21 -8
- package/dist/index.d.ts +21 -8
- package/dist/index.js +188 -73
- package/package.json +4 -1
package/dist/index.cjs
CHANGED
|
@@ -76,9 +76,9 @@ __export(index_exports, {
|
|
|
76
76
|
Img: () => Img_default,
|
|
77
77
|
LayoutPDF: () => LayoutPDF_default,
|
|
78
78
|
Left: () => Left,
|
|
79
|
-
MakePDF: () => MakePDF_default,
|
|
80
79
|
Mark: () => Mark,
|
|
81
80
|
P: () => P,
|
|
81
|
+
QRCode: () => QRCode_default,
|
|
82
82
|
Right: () => Right,
|
|
83
83
|
Row: () => Row,
|
|
84
84
|
Small: () => Small,
|
|
@@ -233,34 +233,10 @@ var LayoutPDF = ({
|
|
|
233
233
|
};
|
|
234
234
|
var LayoutPDF_default = LayoutPDF;
|
|
235
235
|
|
|
236
|
-
// src/components/PDF/core/
|
|
236
|
+
// src/components/PDF/core/Img.tsx
|
|
237
237
|
var import_react2 = __toESM(require("react"), 1);
|
|
238
|
-
var import_dynamic = __toESM(require("next/dynamic"), 1);
|
|
239
238
|
var import_renderer2 = require("@react-pdf/renderer");
|
|
240
|
-
var
|
|
241
|
-
if (typeof window === "undefined") {
|
|
242
|
-
return null;
|
|
243
|
-
}
|
|
244
|
-
return /* @__PURE__ */ import_react2.default.createElement(import_renderer2.BlobProvider, { document }, ({ blob, url, loading, error }) => {
|
|
245
|
-
if (loading) {
|
|
246
|
-
return "Cargando documento...";
|
|
247
|
-
}
|
|
248
|
-
if (error) {
|
|
249
|
-
return `Error: ${error.message}`;
|
|
250
|
-
}
|
|
251
|
-
let pdfURL = "";
|
|
252
|
-
if (blob !== null) {
|
|
253
|
-
pdfURL = URL.createObjectURL(blob);
|
|
254
|
-
}
|
|
255
|
-
return /* @__PURE__ */ import_react2.default.createElement("div", { className: "containerDownload" }, /* @__PURE__ */ import_react2.default.createElement("a", { href: pdfURL, download: namePDF }, children));
|
|
256
|
-
});
|
|
257
|
-
};
|
|
258
|
-
var MakePDF_default = (0, import_dynamic.default)(() => Promise.resolve(MakePDF), { ssr: false });
|
|
259
|
-
|
|
260
|
-
// src/components/PDF/core/Img.tsx
|
|
261
|
-
var import_react3 = __toESM(require("react"), 1);
|
|
262
|
-
var import_renderer3 = require("@react-pdf/renderer");
|
|
263
|
-
var styles2 = import_renderer3.StyleSheet.create({
|
|
239
|
+
var styles2 = import_renderer2.StyleSheet.create({
|
|
264
240
|
image: {
|
|
265
241
|
width: "100%",
|
|
266
242
|
height: "auto",
|
|
@@ -268,14 +244,14 @@ var styles2 = import_renderer3.StyleSheet.create({
|
|
|
268
244
|
}
|
|
269
245
|
});
|
|
270
246
|
var Img = ({ src, alt, style }) => {
|
|
271
|
-
return /* @__PURE__ */
|
|
247
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_renderer2.Image, { src, style: [styles2.image, style] });
|
|
272
248
|
};
|
|
273
249
|
var Img_default = Img;
|
|
274
250
|
|
|
275
251
|
// src/components/PDF/core/Position.tsx
|
|
276
|
-
var
|
|
277
|
-
var
|
|
278
|
-
var styles3 =
|
|
252
|
+
var import_react3 = __toESM(require("react"), 1);
|
|
253
|
+
var import_renderer3 = require("@react-pdf/renderer");
|
|
254
|
+
var styles3 = import_renderer3.StyleSheet.create({
|
|
279
255
|
left: {
|
|
280
256
|
textAlign: "left"
|
|
281
257
|
},
|
|
@@ -287,19 +263,19 @@ var styles3 = import_renderer4.StyleSheet.create({
|
|
|
287
263
|
}
|
|
288
264
|
});
|
|
289
265
|
var Left = ({ children, style }) => {
|
|
290
|
-
return /* @__PURE__ */
|
|
266
|
+
return /* @__PURE__ */ import_react3.default.createElement(import_renderer3.View, { style: [styles3.left, style] }, children);
|
|
291
267
|
};
|
|
292
268
|
var Right = ({ children, style }) => {
|
|
293
|
-
return /* @__PURE__ */
|
|
269
|
+
return /* @__PURE__ */ import_react3.default.createElement(import_renderer3.View, { style: [styles3.right, style] }, children);
|
|
294
270
|
};
|
|
295
271
|
var Center = ({ children, style }) => {
|
|
296
|
-
return /* @__PURE__ */
|
|
272
|
+
return /* @__PURE__ */ import_react3.default.createElement(import_renderer3.View, { style: [styles3.center, style] }, children);
|
|
297
273
|
};
|
|
298
274
|
|
|
299
275
|
// src/components/PDF/core/Etiquetas.tsx
|
|
300
|
-
var
|
|
301
|
-
var
|
|
302
|
-
var styles4 =
|
|
276
|
+
var import_react4 = __toESM(require("react"), 1);
|
|
277
|
+
var import_renderer4 = require("@react-pdf/renderer");
|
|
278
|
+
var styles4 = import_renderer4.StyleSheet.create({
|
|
303
279
|
p: {
|
|
304
280
|
fontSize: 12,
|
|
305
281
|
marginBottom: 14,
|
|
@@ -369,58 +345,58 @@ var styles4 = import_renderer5.StyleSheet.create({
|
|
|
369
345
|
}
|
|
370
346
|
});
|
|
371
347
|
var P = ({ children, style }) => {
|
|
372
|
-
return /* @__PURE__ */
|
|
348
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.p, style] }, children);
|
|
373
349
|
};
|
|
374
350
|
var H1 = ({ children, style }) => {
|
|
375
|
-
return /* @__PURE__ */
|
|
351
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h1, style] }, children);
|
|
376
352
|
};
|
|
377
353
|
var H2 = ({ children, style }) => {
|
|
378
|
-
return /* @__PURE__ */
|
|
354
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h2, style] }, children);
|
|
379
355
|
};
|
|
380
356
|
var H3 = ({ children, style }) => {
|
|
381
|
-
return /* @__PURE__ */
|
|
357
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h3, style] }, children);
|
|
382
358
|
};
|
|
383
359
|
var H4 = ({ children, style }) => {
|
|
384
|
-
return /* @__PURE__ */
|
|
360
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h4, style] }, children);
|
|
385
361
|
};
|
|
386
362
|
var H5 = ({ children, style }) => {
|
|
387
|
-
return /* @__PURE__ */
|
|
363
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h5, style] }, children);
|
|
388
364
|
};
|
|
389
365
|
var H6 = ({ children, style }) => {
|
|
390
|
-
return /* @__PURE__ */
|
|
366
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h6, style] }, children);
|
|
391
367
|
};
|
|
392
368
|
var Strong = ({ children, style }) => {
|
|
393
|
-
return /* @__PURE__ */
|
|
369
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.strong, style] }, children);
|
|
394
370
|
};
|
|
395
371
|
var Em = ({ children, style }) => {
|
|
396
|
-
return /* @__PURE__ */
|
|
372
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.em, style] }, children);
|
|
397
373
|
};
|
|
398
374
|
var U = ({ children, style }) => {
|
|
399
|
-
return /* @__PURE__ */
|
|
375
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.u, style] }, children);
|
|
400
376
|
};
|
|
401
377
|
var Small = ({ children, style }) => {
|
|
402
|
-
return /* @__PURE__ */
|
|
378
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.small, style] }, children);
|
|
403
379
|
};
|
|
404
380
|
var Blockquote = ({ children, style }) => {
|
|
405
|
-
return /* @__PURE__ */
|
|
381
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.blockquote, style] }, children);
|
|
406
382
|
};
|
|
407
383
|
var Mark = ({ children, style }) => {
|
|
408
|
-
return /* @__PURE__ */
|
|
384
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.mark, style] }, children);
|
|
409
385
|
};
|
|
410
386
|
var A = ({ children, style, href }) => {
|
|
411
|
-
return /* @__PURE__ */
|
|
387
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Link, { src: href, style: [styles4.A, style] }, children);
|
|
412
388
|
};
|
|
413
389
|
var BR = ({ style }) => {
|
|
414
|
-
return /* @__PURE__ */
|
|
390
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.br, style] }, "\n");
|
|
415
391
|
};
|
|
416
392
|
var Span = ({ children, style }) => {
|
|
417
|
-
return /* @__PURE__ */
|
|
393
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [style] }, children);
|
|
418
394
|
};
|
|
419
395
|
|
|
420
396
|
// src/components/PDF/core/Tablet.tsx
|
|
421
|
-
var
|
|
422
|
-
var
|
|
423
|
-
var styles5 =
|
|
397
|
+
var import_react5 = __toESM(require("react"), 1);
|
|
398
|
+
var import_renderer5 = require("@react-pdf/renderer");
|
|
399
|
+
var styles5 = import_renderer5.StyleSheet.create({
|
|
424
400
|
table: {
|
|
425
401
|
width: "100%",
|
|
426
402
|
borderWidth: 1,
|
|
@@ -471,16 +447,16 @@ var cellSizeMapping = {
|
|
|
471
447
|
large: styles5.cellLarge
|
|
472
448
|
};
|
|
473
449
|
var Table = ({ children, style }) => {
|
|
474
|
-
return /* @__PURE__ */
|
|
450
|
+
return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.table, style] }, children);
|
|
475
451
|
};
|
|
476
452
|
var Thead = ({ children, style }) => {
|
|
477
|
-
return /* @__PURE__ */
|
|
453
|
+
return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.thead, style] }, children);
|
|
478
454
|
};
|
|
479
455
|
var Tbody = ({ children, style }) => {
|
|
480
|
-
return /* @__PURE__ */
|
|
456
|
+
return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.tbody, style] }, children);
|
|
481
457
|
};
|
|
482
458
|
var Tr = ({ children, style }) => {
|
|
483
|
-
return /* @__PURE__ */
|
|
459
|
+
return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.tr, style] }, children);
|
|
484
460
|
};
|
|
485
461
|
var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
486
462
|
const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
|
|
@@ -488,7 +464,7 @@ var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
|
488
464
|
const customStyle = __spreadValues({
|
|
489
465
|
width: width || spanWidth || (sizeStyle == null ? void 0 : sizeStyle.width)
|
|
490
466
|
}, height !== void 0 && { height });
|
|
491
|
-
return /* @__PURE__ */
|
|
467
|
+
return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
|
|
492
468
|
};
|
|
493
469
|
var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
494
470
|
const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
|
|
@@ -496,13 +472,13 @@ var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
|
496
472
|
const customStyle = __spreadValues({
|
|
497
473
|
width: width || spanWidth || (sizeStyle == null ? void 0 : sizeStyle.width)
|
|
498
474
|
}, height !== void 0 && { height });
|
|
499
|
-
return /* @__PURE__ */
|
|
475
|
+
return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
|
|
500
476
|
};
|
|
501
477
|
|
|
502
478
|
// src/components/PDF/core/Grid.tsx
|
|
503
|
-
var
|
|
504
|
-
var
|
|
505
|
-
var styles6 =
|
|
479
|
+
var import_react6 = __toESM(require("react"), 1);
|
|
480
|
+
var import_renderer6 = require("@react-pdf/renderer");
|
|
481
|
+
var styles6 = import_renderer6.StyleSheet.create({
|
|
506
482
|
container: {
|
|
507
483
|
width: "100%",
|
|
508
484
|
paddingHorizontal: 20
|
|
@@ -530,52 +506,52 @@ var styles6 = import_renderer7.StyleSheet.create({
|
|
|
530
506
|
col12: { width: "100%" }
|
|
531
507
|
});
|
|
532
508
|
var Container = ({ children, style }) => {
|
|
533
|
-
return /* @__PURE__ */
|
|
509
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.container, style] }, children);
|
|
534
510
|
};
|
|
535
511
|
var Row = ({ children, style }) => {
|
|
536
|
-
return /* @__PURE__ */
|
|
512
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.row, style] }, children);
|
|
537
513
|
};
|
|
538
514
|
var Col1 = ({ children, style }) => {
|
|
539
|
-
return /* @__PURE__ */
|
|
515
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col1, style] }, children);
|
|
540
516
|
};
|
|
541
517
|
var Col2 = ({ children, style }) => {
|
|
542
|
-
return /* @__PURE__ */
|
|
518
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col2, style] }, children);
|
|
543
519
|
};
|
|
544
520
|
var Col3 = ({ children, style }) => {
|
|
545
|
-
return /* @__PURE__ */
|
|
521
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col3, style] }, children);
|
|
546
522
|
};
|
|
547
523
|
var Col4 = ({ children, style }) => {
|
|
548
|
-
return /* @__PURE__ */
|
|
524
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col4, style] }, children);
|
|
549
525
|
};
|
|
550
526
|
var Col5 = ({ children, style }) => {
|
|
551
|
-
return /* @__PURE__ */
|
|
527
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col5, style] }, children);
|
|
552
528
|
};
|
|
553
529
|
var Col6 = ({ children, style }) => {
|
|
554
|
-
return /* @__PURE__ */
|
|
530
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col6, style] }, children);
|
|
555
531
|
};
|
|
556
532
|
var Col7 = ({ children, style }) => {
|
|
557
|
-
return /* @__PURE__ */
|
|
533
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col7, style] }, children);
|
|
558
534
|
};
|
|
559
535
|
var Col8 = ({ children, style }) => {
|
|
560
|
-
return /* @__PURE__ */
|
|
536
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col8, style] }, children);
|
|
561
537
|
};
|
|
562
538
|
var Col9 = ({ children, style }) => {
|
|
563
|
-
return /* @__PURE__ */
|
|
539
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col9, style] }, children);
|
|
564
540
|
};
|
|
565
541
|
var Col10 = ({ children, style }) => {
|
|
566
|
-
return /* @__PURE__ */
|
|
542
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col10, style] }, children);
|
|
567
543
|
};
|
|
568
544
|
var Col11 = ({ children, style }) => {
|
|
569
|
-
return /* @__PURE__ */
|
|
545
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col11, style] }, children);
|
|
570
546
|
};
|
|
571
547
|
var Col12 = ({ children, style }) => {
|
|
572
|
-
return /* @__PURE__ */
|
|
548
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col12, style] }, children);
|
|
573
549
|
};
|
|
574
550
|
|
|
575
551
|
// src/components/PDF/core/PageElements.tsx
|
|
576
|
-
var
|
|
577
|
-
var
|
|
578
|
-
var styles7 =
|
|
552
|
+
var import_react7 = __toESM(require("react"), 1);
|
|
553
|
+
var import_renderer7 = require("@react-pdf/renderer");
|
|
554
|
+
var styles7 = import_renderer7.StyleSheet.create({
|
|
579
555
|
header: {
|
|
580
556
|
position: "absolute",
|
|
581
557
|
top: 20,
|
|
@@ -598,11 +574,150 @@ var styles7 = import_renderer8.StyleSheet.create({
|
|
|
598
574
|
}
|
|
599
575
|
});
|
|
600
576
|
var Header = ({ children, style, fixed = false }) => {
|
|
601
|
-
return /* @__PURE__ */
|
|
577
|
+
return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles7.header, style], fixed }, typeof children === "string" ? /* @__PURE__ */ import_react7.default.createElement(import_renderer7.Text, null, children) : children);
|
|
602
578
|
};
|
|
603
579
|
var Footer = ({ children, style, fixed = false }) => {
|
|
604
|
-
return /* @__PURE__ */
|
|
580
|
+
return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles7.footer, style], fixed }, typeof children === "string" ? /* @__PURE__ */ import_react7.default.createElement(import_renderer7.Text, null, children) : children);
|
|
581
|
+
};
|
|
582
|
+
|
|
583
|
+
// src/components/PDF/core/QRCode.tsx
|
|
584
|
+
var import_react8 = __toESM(require("react"), 1);
|
|
585
|
+
var import_react9 = require("react");
|
|
586
|
+
var import_renderer8 = require("@react-pdf/renderer");
|
|
587
|
+
var import_qr_code_styling = __toESM(require("qr-code-styling"), 1);
|
|
588
|
+
var styles8 = import_renderer8.StyleSheet.create({
|
|
589
|
+
qrContainer: {
|
|
590
|
+
position: "relative",
|
|
591
|
+
alignItems: "center",
|
|
592
|
+
justifyContent: "center"
|
|
593
|
+
}
|
|
594
|
+
});
|
|
595
|
+
var QRCode = ({
|
|
596
|
+
value,
|
|
597
|
+
size = 150,
|
|
598
|
+
dotsColor = "#000000",
|
|
599
|
+
dotsGradient,
|
|
600
|
+
backgroundColor = "#ffffff",
|
|
601
|
+
dotsType = "square",
|
|
602
|
+
cornersType = "square",
|
|
603
|
+
cornersSquareColor,
|
|
604
|
+
cornersDotColor,
|
|
605
|
+
logo,
|
|
606
|
+
logoSize = 30,
|
|
607
|
+
logoBackgroundColor,
|
|
608
|
+
logoMargin = 5,
|
|
609
|
+
errorCorrectionLevel = "M",
|
|
610
|
+
margin = 10,
|
|
611
|
+
style
|
|
612
|
+
}) => {
|
|
613
|
+
const [qrDataURL, setQrDataURL] = (0, import_react9.useState)("");
|
|
614
|
+
const qrCodeRef = (0, import_react9.useRef)(null);
|
|
615
|
+
(0, import_react9.useEffect)(() => {
|
|
616
|
+
if (typeof window !== "undefined" && !qrCodeRef.current) {
|
|
617
|
+
qrCodeRef.current = new import_qr_code_styling.default({
|
|
618
|
+
width: 300,
|
|
619
|
+
height: 300,
|
|
620
|
+
type: "canvas",
|
|
621
|
+
data: "Initial",
|
|
622
|
+
dotsOptions: {
|
|
623
|
+
type: "square",
|
|
624
|
+
color: "#000000"
|
|
625
|
+
},
|
|
626
|
+
cornersSquareOptions: {
|
|
627
|
+
type: "square"
|
|
628
|
+
},
|
|
629
|
+
cornersDotOptions: {
|
|
630
|
+
type: "square"
|
|
631
|
+
},
|
|
632
|
+
backgroundOptions: {
|
|
633
|
+
color: "#ffffff"
|
|
634
|
+
},
|
|
635
|
+
imageOptions: {
|
|
636
|
+
crossOrigin: "anonymous",
|
|
637
|
+
margin: 5
|
|
638
|
+
}
|
|
639
|
+
});
|
|
640
|
+
}
|
|
641
|
+
const generateQRCode = async () => {
|
|
642
|
+
if (typeof window === "undefined" || !qrCodeRef.current) return;
|
|
643
|
+
try {
|
|
644
|
+
const options = {
|
|
645
|
+
width: size,
|
|
646
|
+
height: size,
|
|
647
|
+
data: value,
|
|
648
|
+
margin,
|
|
649
|
+
qrOptions: {
|
|
650
|
+
errorCorrectionLevel
|
|
651
|
+
},
|
|
652
|
+
dotsOptions: {
|
|
653
|
+
type: dotsType,
|
|
654
|
+
color: dotsColor
|
|
655
|
+
},
|
|
656
|
+
cornersSquareOptions: {
|
|
657
|
+
type: cornersType,
|
|
658
|
+
color: cornersSquareColor || dotsColor
|
|
659
|
+
},
|
|
660
|
+
cornersDotOptions: {
|
|
661
|
+
type: cornersType,
|
|
662
|
+
color: cornersDotColor || dotsColor
|
|
663
|
+
},
|
|
664
|
+
backgroundOptions: {
|
|
665
|
+
color: backgroundColor
|
|
666
|
+
}
|
|
667
|
+
};
|
|
668
|
+
if (dotsGradient && dotsGradient.length === 2) {
|
|
669
|
+
options.dotsOptions.gradient = {
|
|
670
|
+
type: "linear",
|
|
671
|
+
colorStops: [
|
|
672
|
+
{ offset: 0, color: dotsGradient[0] },
|
|
673
|
+
{ offset: 1, color: dotsGradient[1] }
|
|
674
|
+
]
|
|
675
|
+
};
|
|
676
|
+
}
|
|
677
|
+
if (logo) {
|
|
678
|
+
options.image = logo;
|
|
679
|
+
options.imageOptions = {
|
|
680
|
+
hideBackgroundDots: true,
|
|
681
|
+
imageSize: logoSize / size,
|
|
682
|
+
crossOrigin: "anonymous",
|
|
683
|
+
margin: logoMargin
|
|
684
|
+
};
|
|
685
|
+
if (logoBackgroundColor) {
|
|
686
|
+
options.imageOptions.margin = logoMargin;
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
qrCodeRef.current.update(options);
|
|
690
|
+
const dataURL = await qrCodeRef.current.getDataUrl();
|
|
691
|
+
setQrDataURL(dataURL);
|
|
692
|
+
} catch (error) {
|
|
693
|
+
console.error("Error generating QR code:", error);
|
|
694
|
+
}
|
|
695
|
+
};
|
|
696
|
+
generateQRCode();
|
|
697
|
+
}, [
|
|
698
|
+
value,
|
|
699
|
+
size,
|
|
700
|
+
dotsColor,
|
|
701
|
+
dotsGradient,
|
|
702
|
+
backgroundColor,
|
|
703
|
+
dotsType,
|
|
704
|
+
cornersType,
|
|
705
|
+
cornersSquareColor,
|
|
706
|
+
cornersDotColor,
|
|
707
|
+
logo,
|
|
708
|
+
logoSize,
|
|
709
|
+
logoBackgroundColor,
|
|
710
|
+
logoMargin,
|
|
711
|
+
errorCorrectionLevel,
|
|
712
|
+
margin
|
|
713
|
+
]);
|
|
714
|
+
const containerStyle = __spreadValues(__spreadProps(__spreadValues({}, styles8.qrContainer), {
|
|
715
|
+
width: size,
|
|
716
|
+
height: size
|
|
717
|
+
}), style);
|
|
718
|
+
return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: containerStyle }, qrDataURL ? /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: qrDataURL || "/placeholder.svg", style: { width: size, height: size } }) : null);
|
|
605
719
|
};
|
|
720
|
+
var QRCode_default = QRCode;
|
|
606
721
|
// Annotate the CommonJS export names for ESM import in node:
|
|
607
722
|
0 && (module.exports = {
|
|
608
723
|
A,
|
|
@@ -634,9 +749,9 @@ var Footer = ({ children, style, fixed = false }) => {
|
|
|
634
749
|
Img,
|
|
635
750
|
LayoutPDF,
|
|
636
751
|
Left,
|
|
637
|
-
MakePDF,
|
|
638
752
|
Mark,
|
|
639
753
|
P,
|
|
754
|
+
QRCode,
|
|
640
755
|
Right,
|
|
641
756
|
Row,
|
|
642
757
|
Small,
|
package/dist/index.d.cts
CHANGED
|
@@ -20,13 +20,6 @@ interface LayoutPDFProps {
|
|
|
20
20
|
}
|
|
21
21
|
declare const LayoutPDF: React.FC<LayoutPDFProps>;
|
|
22
22
|
|
|
23
|
-
interface MakePDFProps {
|
|
24
|
-
namePDF?: string;
|
|
25
|
-
document: React.ReactElement;
|
|
26
|
-
children?: React.ReactNode;
|
|
27
|
-
}
|
|
28
|
-
declare const _default: React.ComponentType<MakePDFProps>;
|
|
29
|
-
|
|
30
23
|
interface ImgProps {
|
|
31
24
|
src?: string;
|
|
32
25
|
alt?: string;
|
|
@@ -120,4 +113,24 @@ interface PageElementProps {
|
|
|
120
113
|
declare const Header: React.FC<PageElementProps>;
|
|
121
114
|
declare const Footer: React.FC<PageElementProps>;
|
|
122
115
|
|
|
123
|
-
|
|
116
|
+
interface QRCodeProps {
|
|
117
|
+
value: string;
|
|
118
|
+
size?: number;
|
|
119
|
+
dotsColor?: string;
|
|
120
|
+
dotsGradient?: [string, string];
|
|
121
|
+
backgroundColor?: string;
|
|
122
|
+
dotsType?: "square" | "dots" | "rounded" | "classy" | "classy-rounded" | "extra-rounded";
|
|
123
|
+
cornersType?: "square" | "dots" | "rounded" | "extra-rounded";
|
|
124
|
+
cornersSquareColor?: string;
|
|
125
|
+
cornersDotColor?: string;
|
|
126
|
+
logo?: string;
|
|
127
|
+
logoSize?: number;
|
|
128
|
+
logoBackgroundColor?: string;
|
|
129
|
+
logoMargin?: number;
|
|
130
|
+
errorCorrectionLevel?: "L" | "M" | "Q" | "H";
|
|
131
|
+
margin?: number;
|
|
132
|
+
style?: any;
|
|
133
|
+
}
|
|
134
|
+
declare const QRCode: React.FC<QRCodeProps>;
|
|
135
|
+
|
|
136
|
+
export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, Mark, P, QRCode, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U };
|
package/dist/index.d.ts
CHANGED
|
@@ -20,13 +20,6 @@ interface LayoutPDFProps {
|
|
|
20
20
|
}
|
|
21
21
|
declare const LayoutPDF: React.FC<LayoutPDFProps>;
|
|
22
22
|
|
|
23
|
-
interface MakePDFProps {
|
|
24
|
-
namePDF?: string;
|
|
25
|
-
document: React.ReactElement;
|
|
26
|
-
children?: React.ReactNode;
|
|
27
|
-
}
|
|
28
|
-
declare const _default: React.ComponentType<MakePDFProps>;
|
|
29
|
-
|
|
30
23
|
interface ImgProps {
|
|
31
24
|
src?: string;
|
|
32
25
|
alt?: string;
|
|
@@ -120,4 +113,24 @@ interface PageElementProps {
|
|
|
120
113
|
declare const Header: React.FC<PageElementProps>;
|
|
121
114
|
declare const Footer: React.FC<PageElementProps>;
|
|
122
115
|
|
|
123
|
-
|
|
116
|
+
interface QRCodeProps {
|
|
117
|
+
value: string;
|
|
118
|
+
size?: number;
|
|
119
|
+
dotsColor?: string;
|
|
120
|
+
dotsGradient?: [string, string];
|
|
121
|
+
backgroundColor?: string;
|
|
122
|
+
dotsType?: "square" | "dots" | "rounded" | "classy" | "classy-rounded" | "extra-rounded";
|
|
123
|
+
cornersType?: "square" | "dots" | "rounded" | "extra-rounded";
|
|
124
|
+
cornersSquareColor?: string;
|
|
125
|
+
cornersDotColor?: string;
|
|
126
|
+
logo?: string;
|
|
127
|
+
logoSize?: number;
|
|
128
|
+
logoBackgroundColor?: string;
|
|
129
|
+
logoMargin?: number;
|
|
130
|
+
errorCorrectionLevel?: "L" | "M" | "Q" | "H";
|
|
131
|
+
margin?: number;
|
|
132
|
+
style?: any;
|
|
133
|
+
}
|
|
134
|
+
declare const QRCode: React.FC<QRCodeProps>;
|
|
135
|
+
|
|
136
|
+
export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, Mark, P, QRCode, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U };
|
package/dist/index.js
CHANGED
|
@@ -157,32 +157,8 @@ var LayoutPDF = ({
|
|
|
157
157
|
};
|
|
158
158
|
var LayoutPDF_default = LayoutPDF;
|
|
159
159
|
|
|
160
|
-
// src/components/PDF/core/MakePDF.tsx
|
|
161
|
-
import React2 from "react";
|
|
162
|
-
import dynamic from "next/dynamic";
|
|
163
|
-
import { BlobProvider } from "@react-pdf/renderer";
|
|
164
|
-
var MakePDF = ({ namePDF = "documento.pdf", document, children = "Descargar PDF" }) => {
|
|
165
|
-
if (typeof window === "undefined") {
|
|
166
|
-
return null;
|
|
167
|
-
}
|
|
168
|
-
return /* @__PURE__ */ React2.createElement(BlobProvider, { document }, ({ blob, url, loading, error }) => {
|
|
169
|
-
if (loading) {
|
|
170
|
-
return "Cargando documento...";
|
|
171
|
-
}
|
|
172
|
-
if (error) {
|
|
173
|
-
return `Error: ${error.message}`;
|
|
174
|
-
}
|
|
175
|
-
let pdfURL = "";
|
|
176
|
-
if (blob !== null) {
|
|
177
|
-
pdfURL = URL.createObjectURL(blob);
|
|
178
|
-
}
|
|
179
|
-
return /* @__PURE__ */ React2.createElement("div", { className: "containerDownload" }, /* @__PURE__ */ React2.createElement("a", { href: pdfURL, download: namePDF }, children));
|
|
180
|
-
});
|
|
181
|
-
};
|
|
182
|
-
var MakePDF_default = dynamic(() => Promise.resolve(MakePDF), { ssr: false });
|
|
183
|
-
|
|
184
160
|
// src/components/PDF/core/Img.tsx
|
|
185
|
-
import
|
|
161
|
+
import React2 from "react";
|
|
186
162
|
import { Image, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
|
|
187
163
|
var styles2 = StyleSheet2.create({
|
|
188
164
|
image: {
|
|
@@ -192,12 +168,12 @@ var styles2 = StyleSheet2.create({
|
|
|
192
168
|
}
|
|
193
169
|
});
|
|
194
170
|
var Img = ({ src, alt, style }) => {
|
|
195
|
-
return /* @__PURE__ */
|
|
171
|
+
return /* @__PURE__ */ React2.createElement(Image, { src, style: [styles2.image, style] });
|
|
196
172
|
};
|
|
197
173
|
var Img_default = Img;
|
|
198
174
|
|
|
199
175
|
// src/components/PDF/core/Position.tsx
|
|
200
|
-
import
|
|
176
|
+
import React3 from "react";
|
|
201
177
|
import { View, StyleSheet as StyleSheet3 } from "@react-pdf/renderer";
|
|
202
178
|
var styles3 = StyleSheet3.create({
|
|
203
179
|
left: {
|
|
@@ -211,17 +187,17 @@ var styles3 = StyleSheet3.create({
|
|
|
211
187
|
}
|
|
212
188
|
});
|
|
213
189
|
var Left = ({ children, style }) => {
|
|
214
|
-
return /* @__PURE__ */
|
|
190
|
+
return /* @__PURE__ */ React3.createElement(View, { style: [styles3.left, style] }, children);
|
|
215
191
|
};
|
|
216
192
|
var Right = ({ children, style }) => {
|
|
217
|
-
return /* @__PURE__ */
|
|
193
|
+
return /* @__PURE__ */ React3.createElement(View, { style: [styles3.right, style] }, children);
|
|
218
194
|
};
|
|
219
195
|
var Center = ({ children, style }) => {
|
|
220
|
-
return /* @__PURE__ */
|
|
196
|
+
return /* @__PURE__ */ React3.createElement(View, { style: [styles3.center, style] }, children);
|
|
221
197
|
};
|
|
222
198
|
|
|
223
199
|
// src/components/PDF/core/Etiquetas.tsx
|
|
224
|
-
import
|
|
200
|
+
import React4 from "react";
|
|
225
201
|
import { Text as Text2, StyleSheet as StyleSheet4, Link } from "@react-pdf/renderer";
|
|
226
202
|
var styles4 = StyleSheet4.create({
|
|
227
203
|
p: {
|
|
@@ -293,56 +269,56 @@ var styles4 = StyleSheet4.create({
|
|
|
293
269
|
}
|
|
294
270
|
});
|
|
295
271
|
var P = ({ children, style }) => {
|
|
296
|
-
return /* @__PURE__ */
|
|
272
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.p, style] }, children);
|
|
297
273
|
};
|
|
298
274
|
var H1 = ({ children, style }) => {
|
|
299
|
-
return /* @__PURE__ */
|
|
275
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h1, style] }, children);
|
|
300
276
|
};
|
|
301
277
|
var H2 = ({ children, style }) => {
|
|
302
|
-
return /* @__PURE__ */
|
|
278
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h2, style] }, children);
|
|
303
279
|
};
|
|
304
280
|
var H3 = ({ children, style }) => {
|
|
305
|
-
return /* @__PURE__ */
|
|
281
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h3, style] }, children);
|
|
306
282
|
};
|
|
307
283
|
var H4 = ({ children, style }) => {
|
|
308
|
-
return /* @__PURE__ */
|
|
284
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h4, style] }, children);
|
|
309
285
|
};
|
|
310
286
|
var H5 = ({ children, style }) => {
|
|
311
|
-
return /* @__PURE__ */
|
|
287
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h5, style] }, children);
|
|
312
288
|
};
|
|
313
289
|
var H6 = ({ children, style }) => {
|
|
314
|
-
return /* @__PURE__ */
|
|
290
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h6, style] }, children);
|
|
315
291
|
};
|
|
316
292
|
var Strong = ({ children, style }) => {
|
|
317
|
-
return /* @__PURE__ */
|
|
293
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.strong, style] }, children);
|
|
318
294
|
};
|
|
319
295
|
var Em = ({ children, style }) => {
|
|
320
|
-
return /* @__PURE__ */
|
|
296
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.em, style] }, children);
|
|
321
297
|
};
|
|
322
298
|
var U = ({ children, style }) => {
|
|
323
|
-
return /* @__PURE__ */
|
|
299
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.u, style] }, children);
|
|
324
300
|
};
|
|
325
301
|
var Small = ({ children, style }) => {
|
|
326
|
-
return /* @__PURE__ */
|
|
302
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.small, style] }, children);
|
|
327
303
|
};
|
|
328
304
|
var Blockquote = ({ children, style }) => {
|
|
329
|
-
return /* @__PURE__ */
|
|
305
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.blockquote, style] }, children);
|
|
330
306
|
};
|
|
331
307
|
var Mark = ({ children, style }) => {
|
|
332
|
-
return /* @__PURE__ */
|
|
308
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.mark, style] }, children);
|
|
333
309
|
};
|
|
334
310
|
var A = ({ children, style, href }) => {
|
|
335
|
-
return /* @__PURE__ */
|
|
311
|
+
return /* @__PURE__ */ React4.createElement(Link, { src: href, style: [styles4.A, style] }, children);
|
|
336
312
|
};
|
|
337
313
|
var BR = ({ style }) => {
|
|
338
|
-
return /* @__PURE__ */
|
|
314
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.br, style] }, "\n");
|
|
339
315
|
};
|
|
340
316
|
var Span = ({ children, style }) => {
|
|
341
|
-
return /* @__PURE__ */
|
|
317
|
+
return /* @__PURE__ */ React4.createElement(Text2, { style: [style] }, children);
|
|
342
318
|
};
|
|
343
319
|
|
|
344
320
|
// src/components/PDF/core/Tablet.tsx
|
|
345
|
-
import
|
|
321
|
+
import React5 from "react";
|
|
346
322
|
import { View as View2, Text as Text3, StyleSheet as StyleSheet5 } from "@react-pdf/renderer";
|
|
347
323
|
var styles5 = StyleSheet5.create({
|
|
348
324
|
table: {
|
|
@@ -395,16 +371,16 @@ var cellSizeMapping = {
|
|
|
395
371
|
large: styles5.cellLarge
|
|
396
372
|
};
|
|
397
373
|
var Table = ({ children, style }) => {
|
|
398
|
-
return /* @__PURE__ */
|
|
374
|
+
return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.table, style] }, children);
|
|
399
375
|
};
|
|
400
376
|
var Thead = ({ children, style }) => {
|
|
401
|
-
return /* @__PURE__ */
|
|
377
|
+
return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.thead, style] }, children);
|
|
402
378
|
};
|
|
403
379
|
var Tbody = ({ children, style }) => {
|
|
404
|
-
return /* @__PURE__ */
|
|
380
|
+
return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.tbody, style] }, children);
|
|
405
381
|
};
|
|
406
382
|
var Tr = ({ children, style }) => {
|
|
407
|
-
return /* @__PURE__ */
|
|
383
|
+
return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.tr, style] }, children);
|
|
408
384
|
};
|
|
409
385
|
var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
410
386
|
const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
|
|
@@ -412,7 +388,7 @@ var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
|
412
388
|
const customStyle = __spreadValues({
|
|
413
389
|
width: width || spanWidth || (sizeStyle == null ? void 0 : sizeStyle.width)
|
|
414
390
|
}, height !== void 0 && { height });
|
|
415
|
-
return /* @__PURE__ */
|
|
391
|
+
return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
|
|
416
392
|
};
|
|
417
393
|
var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
418
394
|
const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
|
|
@@ -420,11 +396,11 @@ var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
|
|
|
420
396
|
const customStyle = __spreadValues({
|
|
421
397
|
width: width || spanWidth || (sizeStyle == null ? void 0 : sizeStyle.width)
|
|
422
398
|
}, height !== void 0 && { height });
|
|
423
|
-
return /* @__PURE__ */
|
|
399
|
+
return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
|
|
424
400
|
};
|
|
425
401
|
|
|
426
402
|
// src/components/PDF/core/Grid.tsx
|
|
427
|
-
import
|
|
403
|
+
import React6 from "react";
|
|
428
404
|
import { View as View3, StyleSheet as StyleSheet6 } from "@react-pdf/renderer";
|
|
429
405
|
var styles6 = StyleSheet6.create({
|
|
430
406
|
container: {
|
|
@@ -454,50 +430,50 @@ var styles6 = StyleSheet6.create({
|
|
|
454
430
|
col12: { width: "100%" }
|
|
455
431
|
});
|
|
456
432
|
var Container = ({ children, style }) => {
|
|
457
|
-
return /* @__PURE__ */
|
|
433
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.container, style] }, children);
|
|
458
434
|
};
|
|
459
435
|
var Row = ({ children, style }) => {
|
|
460
|
-
return /* @__PURE__ */
|
|
436
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.row, style] }, children);
|
|
461
437
|
};
|
|
462
438
|
var Col1 = ({ children, style }) => {
|
|
463
|
-
return /* @__PURE__ */
|
|
439
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col1, style] }, children);
|
|
464
440
|
};
|
|
465
441
|
var Col2 = ({ children, style }) => {
|
|
466
|
-
return /* @__PURE__ */
|
|
442
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col2, style] }, children);
|
|
467
443
|
};
|
|
468
444
|
var Col3 = ({ children, style }) => {
|
|
469
|
-
return /* @__PURE__ */
|
|
445
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col3, style] }, children);
|
|
470
446
|
};
|
|
471
447
|
var Col4 = ({ children, style }) => {
|
|
472
|
-
return /* @__PURE__ */
|
|
448
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col4, style] }, children);
|
|
473
449
|
};
|
|
474
450
|
var Col5 = ({ children, style }) => {
|
|
475
|
-
return /* @__PURE__ */
|
|
451
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col5, style] }, children);
|
|
476
452
|
};
|
|
477
453
|
var Col6 = ({ children, style }) => {
|
|
478
|
-
return /* @__PURE__ */
|
|
454
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col6, style] }, children);
|
|
479
455
|
};
|
|
480
456
|
var Col7 = ({ children, style }) => {
|
|
481
|
-
return /* @__PURE__ */
|
|
457
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col7, style] }, children);
|
|
482
458
|
};
|
|
483
459
|
var Col8 = ({ children, style }) => {
|
|
484
|
-
return /* @__PURE__ */
|
|
460
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col8, style] }, children);
|
|
485
461
|
};
|
|
486
462
|
var Col9 = ({ children, style }) => {
|
|
487
|
-
return /* @__PURE__ */
|
|
463
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col9, style] }, children);
|
|
488
464
|
};
|
|
489
465
|
var Col10 = ({ children, style }) => {
|
|
490
|
-
return /* @__PURE__ */
|
|
466
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col10, style] }, children);
|
|
491
467
|
};
|
|
492
468
|
var Col11 = ({ children, style }) => {
|
|
493
|
-
return /* @__PURE__ */
|
|
469
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col11, style] }, children);
|
|
494
470
|
};
|
|
495
471
|
var Col12 = ({ children, style }) => {
|
|
496
|
-
return /* @__PURE__ */
|
|
472
|
+
return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col12, style] }, children);
|
|
497
473
|
};
|
|
498
474
|
|
|
499
475
|
// src/components/PDF/core/PageElements.tsx
|
|
500
|
-
import
|
|
476
|
+
import React7 from "react";
|
|
501
477
|
import { Text as Text4, View as View4, StyleSheet as StyleSheet7 } from "@react-pdf/renderer";
|
|
502
478
|
var styles7 = StyleSheet7.create({
|
|
503
479
|
header: {
|
|
@@ -522,11 +498,150 @@ var styles7 = StyleSheet7.create({
|
|
|
522
498
|
}
|
|
523
499
|
});
|
|
524
500
|
var Header = ({ children, style, fixed = false }) => {
|
|
525
|
-
return /* @__PURE__ */
|
|
501
|
+
return /* @__PURE__ */ React7.createElement(View4, { style: [styles7.header, style], fixed }, typeof children === "string" ? /* @__PURE__ */ React7.createElement(Text4, null, children) : children);
|
|
526
502
|
};
|
|
527
503
|
var Footer = ({ children, style, fixed = false }) => {
|
|
528
|
-
return /* @__PURE__ */
|
|
504
|
+
return /* @__PURE__ */ React7.createElement(View4, { style: [styles7.footer, style], fixed }, typeof children === "string" ? /* @__PURE__ */ React7.createElement(Text4, null, children) : children);
|
|
505
|
+
};
|
|
506
|
+
|
|
507
|
+
// src/components/PDF/core/QRCode.tsx
|
|
508
|
+
import React8 from "react";
|
|
509
|
+
import { useEffect, useState, useRef } from "react";
|
|
510
|
+
import { Image as Image2, StyleSheet as StyleSheet8, View as View5 } from "@react-pdf/renderer";
|
|
511
|
+
import QRCodeStyling from "qr-code-styling";
|
|
512
|
+
var styles8 = StyleSheet8.create({
|
|
513
|
+
qrContainer: {
|
|
514
|
+
position: "relative",
|
|
515
|
+
alignItems: "center",
|
|
516
|
+
justifyContent: "center"
|
|
517
|
+
}
|
|
518
|
+
});
|
|
519
|
+
var QRCode = ({
|
|
520
|
+
value,
|
|
521
|
+
size = 150,
|
|
522
|
+
dotsColor = "#000000",
|
|
523
|
+
dotsGradient,
|
|
524
|
+
backgroundColor = "#ffffff",
|
|
525
|
+
dotsType = "square",
|
|
526
|
+
cornersType = "square",
|
|
527
|
+
cornersSquareColor,
|
|
528
|
+
cornersDotColor,
|
|
529
|
+
logo,
|
|
530
|
+
logoSize = 30,
|
|
531
|
+
logoBackgroundColor,
|
|
532
|
+
logoMargin = 5,
|
|
533
|
+
errorCorrectionLevel = "M",
|
|
534
|
+
margin = 10,
|
|
535
|
+
style
|
|
536
|
+
}) => {
|
|
537
|
+
const [qrDataURL, setQrDataURL] = useState("");
|
|
538
|
+
const qrCodeRef = useRef(null);
|
|
539
|
+
useEffect(() => {
|
|
540
|
+
if (typeof window !== "undefined" && !qrCodeRef.current) {
|
|
541
|
+
qrCodeRef.current = new QRCodeStyling({
|
|
542
|
+
width: 300,
|
|
543
|
+
height: 300,
|
|
544
|
+
type: "canvas",
|
|
545
|
+
data: "Initial",
|
|
546
|
+
dotsOptions: {
|
|
547
|
+
type: "square",
|
|
548
|
+
color: "#000000"
|
|
549
|
+
},
|
|
550
|
+
cornersSquareOptions: {
|
|
551
|
+
type: "square"
|
|
552
|
+
},
|
|
553
|
+
cornersDotOptions: {
|
|
554
|
+
type: "square"
|
|
555
|
+
},
|
|
556
|
+
backgroundOptions: {
|
|
557
|
+
color: "#ffffff"
|
|
558
|
+
},
|
|
559
|
+
imageOptions: {
|
|
560
|
+
crossOrigin: "anonymous",
|
|
561
|
+
margin: 5
|
|
562
|
+
}
|
|
563
|
+
});
|
|
564
|
+
}
|
|
565
|
+
const generateQRCode = async () => {
|
|
566
|
+
if (typeof window === "undefined" || !qrCodeRef.current) return;
|
|
567
|
+
try {
|
|
568
|
+
const options = {
|
|
569
|
+
width: size,
|
|
570
|
+
height: size,
|
|
571
|
+
data: value,
|
|
572
|
+
margin,
|
|
573
|
+
qrOptions: {
|
|
574
|
+
errorCorrectionLevel
|
|
575
|
+
},
|
|
576
|
+
dotsOptions: {
|
|
577
|
+
type: dotsType,
|
|
578
|
+
color: dotsColor
|
|
579
|
+
},
|
|
580
|
+
cornersSquareOptions: {
|
|
581
|
+
type: cornersType,
|
|
582
|
+
color: cornersSquareColor || dotsColor
|
|
583
|
+
},
|
|
584
|
+
cornersDotOptions: {
|
|
585
|
+
type: cornersType,
|
|
586
|
+
color: cornersDotColor || dotsColor
|
|
587
|
+
},
|
|
588
|
+
backgroundOptions: {
|
|
589
|
+
color: backgroundColor
|
|
590
|
+
}
|
|
591
|
+
};
|
|
592
|
+
if (dotsGradient && dotsGradient.length === 2) {
|
|
593
|
+
options.dotsOptions.gradient = {
|
|
594
|
+
type: "linear",
|
|
595
|
+
colorStops: [
|
|
596
|
+
{ offset: 0, color: dotsGradient[0] },
|
|
597
|
+
{ offset: 1, color: dotsGradient[1] }
|
|
598
|
+
]
|
|
599
|
+
};
|
|
600
|
+
}
|
|
601
|
+
if (logo) {
|
|
602
|
+
options.image = logo;
|
|
603
|
+
options.imageOptions = {
|
|
604
|
+
hideBackgroundDots: true,
|
|
605
|
+
imageSize: logoSize / size,
|
|
606
|
+
crossOrigin: "anonymous",
|
|
607
|
+
margin: logoMargin
|
|
608
|
+
};
|
|
609
|
+
if (logoBackgroundColor) {
|
|
610
|
+
options.imageOptions.margin = logoMargin;
|
|
611
|
+
}
|
|
612
|
+
}
|
|
613
|
+
qrCodeRef.current.update(options);
|
|
614
|
+
const dataURL = await qrCodeRef.current.getDataUrl();
|
|
615
|
+
setQrDataURL(dataURL);
|
|
616
|
+
} catch (error) {
|
|
617
|
+
console.error("Error generating QR code:", error);
|
|
618
|
+
}
|
|
619
|
+
};
|
|
620
|
+
generateQRCode();
|
|
621
|
+
}, [
|
|
622
|
+
value,
|
|
623
|
+
size,
|
|
624
|
+
dotsColor,
|
|
625
|
+
dotsGradient,
|
|
626
|
+
backgroundColor,
|
|
627
|
+
dotsType,
|
|
628
|
+
cornersType,
|
|
629
|
+
cornersSquareColor,
|
|
630
|
+
cornersDotColor,
|
|
631
|
+
logo,
|
|
632
|
+
logoSize,
|
|
633
|
+
logoBackgroundColor,
|
|
634
|
+
logoMargin,
|
|
635
|
+
errorCorrectionLevel,
|
|
636
|
+
margin
|
|
637
|
+
]);
|
|
638
|
+
const containerStyle = __spreadValues(__spreadProps(__spreadValues({}, styles8.qrContainer), {
|
|
639
|
+
width: size,
|
|
640
|
+
height: size
|
|
641
|
+
}), style);
|
|
642
|
+
return /* @__PURE__ */ React8.createElement(View5, { style: containerStyle }, qrDataURL ? /* @__PURE__ */ React8.createElement(Image2, { src: qrDataURL || "/placeholder.svg", style: { width: size, height: size } }) : null);
|
|
529
643
|
};
|
|
644
|
+
var QRCode_default = QRCode;
|
|
530
645
|
export {
|
|
531
646
|
A,
|
|
532
647
|
BR,
|
|
@@ -557,9 +672,9 @@ export {
|
|
|
557
672
|
Img_default as Img,
|
|
558
673
|
LayoutPDF_default as LayoutPDF,
|
|
559
674
|
Left,
|
|
560
|
-
MakePDF_default as MakePDF,
|
|
561
675
|
Mark,
|
|
562
676
|
P,
|
|
677
|
+
QRCode_default as QRCode,
|
|
563
678
|
Right,
|
|
564
679
|
Row,
|
|
565
680
|
Small,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-pdf-levelup",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.13",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -26,6 +26,8 @@
|
|
|
26
26
|
"lucide-react": "^0.477.0",
|
|
27
27
|
"next": "14.2.24",
|
|
28
28
|
"next-transpile-modules": "^10.0.1",
|
|
29
|
+
"qr-code-styling": "^1.9.1",
|
|
30
|
+
"qrcode": "^1.5.4",
|
|
29
31
|
"react": "^18",
|
|
30
32
|
"react-dom": "^18",
|
|
31
33
|
"react-pdf": "^9.2.1"
|
|
@@ -33,6 +35,7 @@
|
|
|
33
35
|
"devDependencies": {
|
|
34
36
|
"@react-pdf/types": "^2.9.0",
|
|
35
37
|
"@types/node": "^20",
|
|
38
|
+
"@types/qrcode": "^1.5.5",
|
|
36
39
|
"@types/react": "^18",
|
|
37
40
|
"@types/react-dom": "^18",
|
|
38
41
|
"eslint": "^8",
|