@pdfme/ui 1.0.13 → 1.0.15

package/dist/types/class.d.ts

@@ -6,6 +6,7 @@ export declare abstract class BaseUIClass {
     private lang;
     private font;
     private readonly setSize;
+    resizeObserver: ResizeObserver;
     constructor(props: UIProps);
     protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "zoomIn" | "zoomOut" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
     protected getFont(): Record<string, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "author": "hand-dot",
   "license": "MIT",
   "keywords": [

package/src/class.ts

@@ -74,6 +74,8 @@ export abstract class BaseUIClass {
     this.render();
   }, 100);
 
+  resizeObserver = new ResizeObserver(this.setSize);
+
   constructor(props: UIProps) {
     checkUIProps(props);
 
@@ -85,7 +87,7 @@ export abstract class BaseUIClass {
       height: this.domContainer.clientHeight || window.innerHeight,
       width: this.domContainer.clientWidth || window.innerWidth,
     };
-    window.addEventListener('resize', this.setSize);
+    this.resizeObserver.observe(this.domContainer);
 
     if (lang) {
       this.lang = lang;
@@ -133,8 +135,8 @@ export abstract class BaseUIClass {
   public destroy() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.unmountComponentAtNode(this.domContainer);
+    this.resizeObserver.unobserve(this.domContainer);
     this.domContainer = null;
-    window.removeEventListener('resize', this.setSize);
   }
 
   protected abstract render(): void;

package/src/components/CtlBar/Zoom.tsx

@@ -29,7 +29,7 @@ const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
       <button
         style={{
-          paddingRight: '0.5rem',
+          paddingLeft: '0.5rem',
           ...btnStyle,
           cursor: minZoom >= nextZoomOut ? 'not-allowed' : 'pointer',
         }}
@@ -38,7 +38,7 @@ const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
       >
         <img src={remove} alt={i18n('zoomOut')} style={{ width: 20 }} />
       </button>
-      <strong style={{ color: 'white', fontSize: '0.9rem', minWidth: 45, textAlign: 'center' }}>
+      <strong style={{ color: 'white', fontSize: '0.9rem', minWidth: 50, textAlign: 'center' }}>
         {Math.round(zoomLevel * 100)}%
       </strong>
       <button

package/src/components/CtlBar/index.tsx

@@ -18,7 +18,7 @@ const CtlBar = (props: Props) => {
   const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;
   const width = pageNum > 1 ? barWidth : barWidth / 2;
   return (
-    <div style={{ position: 'absolute', ...size, minHeight: size.height }}>
+    <div style={{ position: 'absolute', width: '100%', minHeight: size.height }}>
       <div
         style={{
           display: 'flex',

package/src/components/Designer/index.tsx

@@ -229,7 +229,7 @@ const TemplateEditor = ({
   return (
     <Root size={size} scale={scale}>
       <CtlBar
-        size={{ ...size }}
+        size={size}
         pageCursor={pageCursor}
         pageNum={schemasList.length}
         setPageCursor={(p) => {

package/src/components/Paper.tsx

@@ -21,13 +21,11 @@ const Paper = (porps: {
     return null;
   }
 
-  const topPageWidth = pageSizes[0].width;
-
   return (
     <div
       style={{
         transform: `scale(${scale})`,
-        transformOrigin: size.width <= topPageWidth * ZOOM * scale ? `left top` : `center top`,
+        transformOrigin: 'center top',
         ...size,
       }}
     >
@@ -57,6 +55,7 @@ const Paper = (porps: {
             style={{
               fontFamily: `'${getFallbackFontName(font)}'`,
               top: `${RULER_HEIGHT}px`,
+              left: paperSize.width > size.width ? `${(size.width - paperSize.width) / 2}px` : 0,
               margin: '0 auto',
               position: 'relative',
               backgroundImage: `url(${background})`,

package/src/components/Preview.tsx

@@ -26,6 +26,12 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
     setSchemasList(sl);
   }, [template]);
 
+  useEffect(() => {
+    if (unitCursor > inputs.length - 1) {
+      setUnitCursor(inputs.length - 1);
+    }
+  }, [inputs]);
+
   useEffect(() => {
     init();
   }, [init]);
@@ -53,18 +59,10 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
     0
   );
 
-  const pageSizesMaxWidth = pageSizes.reduce(
-    (acc, cur) => Math.max(acc, cur.height * ZOOM * scale),
-    0
-  );
-
   return (
     <Root ref={rootRef} size={size} scale={scale}>
       <CtlBar
-        size={{
-          height: Math.max(size.height, pageSizesHeightSum),
-          width: Math.max(size.width, pageSizesMaxWidth),
-        }}
+        size={{ height: Math.max(size.height, pageSizesHeightSum), width: size.width }}
         pageCursor={pageCursor}
         pageNum={schemasList.length}
         setPageCursor={(p) => {
@@ -81,10 +79,7 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
         }}
       />
       <UnitPager
-        size={{
-          height: Math.max(size.height, pageSizesHeightSum),
-          width: Math.max(size.width, pageSizesMaxWidth),
-        }}
+        size={{ height: Math.max(size.height, pageSizesHeightSum), width: size.width }}
         unitCursor={unitCursor}
         unitNum={inputs.length}
         setUnitCursor={setUnitCursor}

package/src/components/Schemas/BarcodeSchema.tsx

@@ -85,7 +85,7 @@ const BarcodeSchemaUI = (
     color: '#000',
     height: Number(schema.height) * ZOOM,
     width: Number(schema.width) * ZOOM,
-    background: editable || value ? 'rgba(255, 255, 255, 0.8)' : 'none',
+    backgroundColor: editable || value ? 'rgb(242 244 255 / 75%)' : 'none',
     border: 'none',
     display: 'flex',
     alignItems: 'center',

package/src/components/Schemas/TextSchema.tsx

@@ -30,10 +30,10 @@ const TextSchemaUI = (
     lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
     whiteSpace: 'pre-line',
     wordBreak: 'break-all',
-    background: 'transparent',
     border: 'none',
     color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
-    backgroundColor: schema.data && schema.backgroundColor ? schema.backgroundColor : 'transparent',
+    backgroundColor:
+      schema.data && schema.backgroundColor ? schema.backgroundColor : 'rgb(242 244 255 / 75%)',
   };
 
   return editable ? (

package/src/components/UnitPager.tsx

@@ -8,6 +8,7 @@ import { Size } from '@pdfme/common';
 
 const buttonHeight = 38;
 const buttonWrapStyle: React.CSSProperties = {
+  pointerEvents: 'initial',
   position: 'sticky',
   zIndex: 1,
   backgroundColor: '#777777bd',
@@ -48,6 +49,7 @@ const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
           position: 'sticky',
           width: '100%',
           zIndex: 1,
+          pointerEvents: 'none',
           top: `calc(50% - ${buttonHeight / 2}px)`,
           display: 'flex',
           alignItems: 'center',

package/coverage/clover.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1644830777048" clover="3.2.0">
-  <project timestamp="1644830777048" name="All files">
-    <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0" elements="0" coveredelements="0" complexity="0" loc="0" ncloc="0" packages="0" files="0" classes="0"/>
-  </project>
-</coverage>

package/coverage/coverage-final.json

@@ -1 +0,0 @@
-{}

package/coverage/lcov-report/base.css

@@ -1,224 +0,0 @@
-body, html {
-  margin:0; padding: 0;
-  height: 100%;
-}
-body {
-    font-family: Helvetica Neue, Helvetica, Arial;
-    font-size: 14px;
-    color:#333;
-}
-.small { font-size: 12px; }
-*, *:after, *:before {
-  -webkit-box-sizing:border-box;
-     -moz-box-sizing:border-box;
-          box-sizing:border-box;
-  }
-h1 { font-size: 20px; margin: 0;}
-h2 { font-size: 14px; }
-pre {
-    font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    margin: 0;
-    padding: 0;
-    -moz-tab-size: 2;
-    -o-tab-size:  2;
-    tab-size: 2;
-}
-a { color:#0074D9; text-decoration:none; }
-a:hover { text-decoration:underline; }
-.strong { font-weight: bold; }
-.space-top1 { padding: 10px 0 0 0; }
-.pad2y { padding: 20px 0; }
-.pad1y { padding: 10px 0; }
-.pad2x { padding: 0 20px; }
-.pad2 { padding: 20px; }
-.pad1 { padding: 10px; }
-.space-left2 { padding-left:55px; }
-.space-right2 { padding-right:20px; }
-.center { text-align:center; }
-.clearfix { display:block; }
-.clearfix:after {
-  content:'';
-  display:block;
-  height:0;
-  clear:both;
-  visibility:hidden;
-  }
-.fl { float: left; }
-@media only screen and (max-width:640px) {
-  .col3 { width:100%; max-width:100%; }
-  .hide-mobile { display:none!important; }
-}
-
-.quiet {
-  color: #7f7f7f;
-  color: rgba(0,0,0,0.5);
-}
-.quiet a { opacity: 0.7; }
-
-.fraction {
-  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-  font-size: 10px;
-  color: #555;
-  background: #E8E8E8;
-  padding: 4px 5px;
-  border-radius: 3px;
-  vertical-align: middle;
-}
-
-div.path a:link, div.path a:visited { color: #333; }
-table.coverage {
-  border-collapse: collapse;
-  margin: 10px 0 0 0;
-  padding: 0;
-}
-
-table.coverage td {
-  margin: 0;
-  padding: 0;
-  vertical-align: top;
-}
-table.coverage td.line-count {
-    text-align: right;
-    padding: 0 5px 0 20px;
-}
-table.coverage td.line-coverage {
-    text-align: right;
-    padding-right: 10px;
-    min-width:20px;
-}
-
-table.coverage td span.cline-any {
-    display: inline-block;
-    padding: 0 5px;
-    width: 100%;
-}
-.missing-if-branch {
-    display: inline-block;
-    margin-right: 5px;
-    border-radius: 3px;
-    position: relative;
-    padding: 0 4px;
-    background: #333;
-    color: yellow;
-}
-
-.skip-if-branch {
-    display: none;
-    margin-right: 10px;
-    position: relative;
-    padding: 0 4px;
-    background: #ccc;
-    color: white;
-}
-.missing-if-branch .typ, .skip-if-branch .typ {
-    color: inherit !important;
-}
-.coverage-summary {
-  border-collapse: collapse;
-  width: 100%;
-}
-.coverage-summary tr { border-bottom: 1px solid #bbb; }
-.keyline-all { border: 1px solid #ddd; }
-.coverage-summary td, .coverage-summary th { padding: 10px; }
-.coverage-summary tbody { border: 1px solid #bbb; }
-.coverage-summary td { border-right: 1px solid #bbb; }
-.coverage-summary td:last-child { border-right: none; }
-.coverage-summary th {
-  text-align: left;
-  font-weight: normal;
-  white-space: nowrap;
-}
-.coverage-summary th.file { border-right: none !important; }
-.coverage-summary th.pct { }
-.coverage-summary th.pic,
-.coverage-summary th.abs,
-.coverage-summary td.pct,
-.coverage-summary td.abs { text-align: right; }
-.coverage-summary td.file { white-space: nowrap;  }
-.coverage-summary td.pic { min-width: 120px !important;  }
-.coverage-summary tfoot td { }
-
-.coverage-summary .sorter {
-    height: 10px;
-    width: 7px;
-    display: inline-block;
-    margin-left: 0.5em;
-    background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
-}
-.coverage-summary .sorted .sorter {
-    background-position: 0 -20px;
-}
-.coverage-summary .sorted-desc .sorter {
-    background-position: 0 -10px;
-}
-.status-line {  height: 10px; }
-/* yellow */
-.cbranch-no { background: yellow !important; color: #111; }
-/* dark red */
-.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
-.low .chart { border:1px solid #C21F39 }
-.highlighted,
-.highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
-  background: #C21F39 !important;
-}
-/* medium red */
-.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
-/* light red */
-.low, .cline-no { background:#FCE1E5 }
-/* light green */
-.high, .cline-yes { background:rgb(230,245,208) }
-/* medium green */
-.cstat-yes { background:rgb(161,215,106) }
-/* dark green */
-.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
-.high .chart { border:1px solid rgb(77,146,33) }
-/* dark yellow (gold) */
-.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
-.medium .chart { border:1px solid #f9cd0b; }
-/* light yellow */
-.medium { background: #fff4c2; }
-
-.cstat-skip { background: #ddd; color: #111; }
-.fstat-skip { background: #ddd; color: #111 !important; }
-.cbranch-skip { background: #ddd !important; color: #111; }
-
-span.cline-neutral { background: #eaeaea; }
-
-.coverage-summary td.empty {
-    opacity: .5;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    line-height: 1;
-    color: #888;
-}
-
-.cover-fill, .cover-empty {
-  display:inline-block;
-  height: 12px;
-}
-.chart {
-  line-height: 0;
-}
-.cover-empty {
-    background: white;
-}
-.cover-full {
-    border-right: none !important;
-}
-pre.prettyprint {
-    border: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-.com { color: #999 !important; }
-.ignore-none { color: #999; font-weight: normal; }
-
-.wrapper {
-  min-height: 100%;
-  height: auto !important;
-  height: 100%;
-  margin: 0 auto -48px;
-}
-.footer, .push {
-  height: 48px;
-}

package/coverage/lcov-report/block-navigation.js

@@ -1,87 +0,0 @@
-/* eslint-disable */
-var jumpToCode = (function init() {
-    // Classes of code we would like to highlight in the file view
-    var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no'];
-
-    // Elements to highlight in the file listing view
-    var fileListingElements = ['td.pct.low'];
-
-    // We don't want to select elements that are direct descendants of another match
-    var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > `
-
-    // Selecter that finds elements on the page to which we can jump
-    var selector =
-        fileListingElements.join(', ') +
-        ', ' +
-        notSelector +
-        missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b`
-
-    // The NodeList of matching elements
-    var missingCoverageElements = document.querySelectorAll(selector);
-
-    var currentIndex;
-
-    function toggleClass(index) {
-        missingCoverageElements
-            .item(currentIndex)
-            .classList.remove('highlighted');
-        missingCoverageElements.item(index).classList.add('highlighted');
-    }
-
-    function makeCurrent(index) {
-        toggleClass(index);
-        currentIndex = index;
-        missingCoverageElements.item(index).scrollIntoView({
-            behavior: 'smooth',
-            block: 'center',
-            inline: 'center'
-        });
-    }
-
-    function goToPrevious() {
-        var nextIndex = 0;
-        if (typeof currentIndex !== 'number' || currentIndex === 0) {
-            nextIndex = missingCoverageElements.length - 1;
-        } else if (missingCoverageElements.length > 1) {
-            nextIndex = currentIndex - 1;
-        }
-
-        makeCurrent(nextIndex);
-    }
-
-    function goToNext() {
-        var nextIndex = 0;
-
-        if (
-            typeof currentIndex === 'number' &&
-            currentIndex < missingCoverageElements.length - 1
-        ) {
-            nextIndex = currentIndex + 1;
-        }
-
-        makeCurrent(nextIndex);
-    }
-
-    return function jump(event) {
-        if (
-            document.getElementById('fileSearch') === document.activeElement &&
-            document.activeElement != null
-        ) {
-            // if we're currently focused on the search input, we don't want to navigate
-            return;
-        }
-
-        switch (event.which) {
-            case 78: // n
-            case 74: // j
-                goToNext();
-                break;
-            case 66: // b
-            case 75: // k
-            case 80: // p
-                goToPrevious();
-                break;
-        }
-    };
-})();
-window.addEventListener('keydown', jumpToCode);

package/coverage/lcov-report/index.html

@@ -1,101 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for All files</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="prettify.css" />
-    <link rel="stylesheet" href="base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1>All files</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">Unknown% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">Unknown% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">Unknown% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">Unknown% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line medium'></div>
-    <div class="pad1">
-<table class="coverage-summary">
-<thead>
-<tr>
-   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
-   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
-   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
-   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
-   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
-   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
-   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
-</tr>
-</thead>
-<tbody></tbody>
-</table>
-</div>
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Feb 14 2022 18:26:17 GMT+0900 (Japan Standard Time)
-            </div>
-        <script src="prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="sorter.js"></script>
-        <script src="block-navigation.js"></script>
-    </body>
-</html>
-    

package/coverage/lcov-report/prettify.css

@@ -1 +0,0 @@
-.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}