@pdfme/ui 1.0.0-beta.9 → 1.0.0

package/dist/types/class.d.ts

@@ -1,10 +1,10 @@
-import { Template, Size, UIProps, PreviewProps } from '@pdfme/common';
+import { Template, Size, UIProps, UIOptions, PreviewProps } from '@pdfme/common';
 export declare abstract class BaseUIClass {
     protected domContainer: HTMLElement | null;
     protected template: Template;
     protected size: Size;
-    private readonly lang;
-    private readonly font;
+    private lang;
+    private font;
     private readonly setSize;
     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" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
@@ -54,6 +54,7 @@ export declare abstract class BaseUIClass {
         basePdf: string | ArrayBuffer | Uint8Array;
     };
     updateTemplate(template: Template): void;
+    updateOptions(options: UIOptions): void;
     destroy(): void;
     protected abstract render(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0",
   "author": "hand-dot",
   "license": "MIT",
   "description": "TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@dnd-kit/core": "^5.0.1",
     "@dnd-kit/sortable": "^6.0.0",
-    "@pdfme/common": "^1.0.0-beta.7",
+    "@pdfme/common": "^1.0.0-beta.11",
     "@scena/react-guides": "^0.16.0",
     "hotkeys-js": "^3.8.7",
     "pdfjs-dist": "^2.12.313",

package/src/Designer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Template, DesignerProps, checkDesignerProps } from '@pdfme/common';
+import { Template, DesignerProps, checkDesignerProps, checkTemplate } from '@pdfme/common';
 import { BaseUIClass } from './class';
 import { DESTROYED_ERR_MSG } from './constants';
 import { I18nContext, FontContext } from './contexts';
@@ -26,6 +26,7 @@ class Designer extends BaseUIClass {
   }
 
   public updateTemplate(template: Template) {
+    checkTemplate(template);
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     this.template = cloneDeep(template);
     if (this.onChangeTemplateCallback) {

package/src/class.ts

@@ -8,9 +8,13 @@ import {
   Lang,
   Font,
   UIProps,
+  UIOptions,
   PreviewProps,
   getDefaultFont,
   checkUIProps,
+  checkTemplate,
+  checkInputs,
+  checkUIOptions,
   checkPreviewProps,
 } from '@pdfme/common';
 
@@ -57,9 +61,9 @@ export abstract class BaseUIClass {
 
   protected size!: Size;
 
-  private readonly lang: Lang = DEFAULT_LANG;
+  private lang: Lang = DEFAULT_LANG;
 
-  private readonly font: Font = getDefaultFont();
+  private font: Font = getDefaultFont();
 
   private readonly setSize = debounce(() => {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
@@ -106,11 +110,26 @@ export abstract class BaseUIClass {
   }
 
   public updateTemplate(template: Template) {
+    checkTemplate(template);
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+
     this.template = cloneDeep(template);
     this.render();
   }
 
+  public updateOptions(options: UIOptions) {
+    checkUIOptions(options);
+    const { lang, font } = options || {};
+
+    if (lang) {
+      this.lang = lang;
+    }
+    if (font) {
+      this.font = font;
+    }
+    this.render();
+  }
+
   public destroy() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.unmountComponentAtNode(this.domContainer);
@@ -138,6 +157,7 @@ export abstract class PreviewUI extends BaseUIClass {
 
   public setInputs(inputs: { [key: string]: string }[]) {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    checkInputs(inputs);
     this.inputs = cloneDeep(inputs);
     this.render();
   }

package/src/components/Designer/Main/index.tsx

@@ -309,7 +309,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
             onChangeHoveringSchemaId={onChangeHoveringSchemaId}
             editable={editing && activeElements.map((ae) => ae.id).includes(schema.id)}
             onChange={(value) => changeSchemas([{ key: 'data', value, schemaId: schema.id }])}
-            border={hoveringSchemaId === schema.id ? '2px solid #18a0fb' : '1px dashed #4af'}
+            border={hoveringSchemaId === schema.id ? '1px solid #18a0fb' : '1px dashed #4af'}
             ref={inputRef}
           />
         )}

package/src/components/Designer/Sidebar/DetailView/index.tsx

@@ -19,9 +19,9 @@ const DetailView = (
   return (
     <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
-        <p style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
+        <span style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
           {i18n('editField')}
-        </p>
+        </span>
       </div>
       <Divider />
       <div style={{ fontSize: '0.9rem' }}>

package/src/components/Designer/Sidebar/ListView/index.tsx

@@ -33,9 +33,9 @@ const ListView = (
   return (
     <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
-        <p style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
+        <span style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
           {i18n('fieldsList')}
-        </p>
+        </span>
       </div>
       <Divider />
       {isBulkUpdateFieldNamesMode ? (
@@ -48,10 +48,11 @@ const ListView = (
               height: height - 5,
               width: SIDEBAR_WIDTH,
               fontSize: '1rem',
-              lineHeight: '2.25rem',
+              lineHeight: '2.5rem',
               background: 'transparent',
               margin: 0,
-              padding: 0,
+              padding: '1rem',
+              boxSizing: 'border-box',
               fontFamily: 'inherit',
             }}
           ></textarea>

package/src/components/Designer/Sidebar/index.tsx

@@ -55,6 +55,7 @@ const Sidebar = (props: SidebarProps) => {
             padding: '0.5rem',
             cursor: 'pointer',
             background: '#eee',
+            width: 30,
           }}
           onClick={() => setOpen(!open)}
         >
@@ -75,6 +76,8 @@ const Sidebar = (props: SidebarProps) => {
             overflowY: 'auto',
             fontFamily: "'Open Sans', sans-serif",
             fontWeight: 400,
+            textAlign: 'left',
+            boxSizing: 'content-box',
           }}
         >
           {getActiveSchemas().length === 0 ? (
@@ -96,7 +99,6 @@ const Sidebar = (props: SidebarProps) => {
             <button
               style={{
                 padding: '0.5rem',
-                color: '#fff',
                 background: '#18a0fb',
                 border: 'none',
                 borderRadius: 2,
@@ -104,7 +106,7 @@ const Sidebar = (props: SidebarProps) => {
               }}
               onClick={addSchema}
             >
-              <strong>{i18n('addNewField')}</strong>
+              <strong style={{ color: '#fff' }}>{i18n('addNewField')}</strong>
             </button>
           </div>
         </div>

package/src/components/Error.tsx

@@ -17,13 +17,13 @@ const Error = ({ size, error }: { size: Size; error: Error }) => {
         ...size,
       }}
     >
-      <p style={{ color: '#fff', textAlign: 'center' }}>
+      <span style={{ color: '#fff', textAlign: 'center' }}>
         <span style={{ fontSize: 'large', fontWeight: 'bold', borderBottom: '1px solid #fff' }}>
           ERROR: {i18n('errorOccurred')}
         </span>
         <br />
         <span style={{ fontSize: 'small' }}>*{error.message}</span>
-      </p>
+      </span>
     </div>
   );
 };

package/src/components/Paper.tsx

@@ -42,6 +42,16 @@ const Paper = (porps: {
                 paperRefs.current[paperIndex] = e;
               }
             }}
+            onClick={(e) => {
+              if (
+                e.currentTarget === e.target &&
+                document &&
+                document.hasFocus() &&
+                document.activeElement instanceof HTMLElement
+              ) {
+                document.activeElement.blur();
+              }
+            }}
             style={{
               fontFamily: `'${getFallbackFontName(font)}'`,
               margin: `${RULER_HEIGHT * scale}px auto`,

package/src/components/Preview/index.tsx

@@ -80,7 +80,7 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
         backgrounds={backgrounds}
         renderSchema={({ schema, index }) => {
           const { key } = schema;
-          const data = input[key] || '';
+          const data = (input && input[key]) || '';
           return (
             <SchemaUI
               key={schema.id}

package/src/components/Schemas/BarcodeSchema.tsx

@@ -41,7 +41,7 @@ const SampleBarcode = ({ schema }: { schema: BarcodeSchema }) => (
 
 const ErrorBarcode = () => (
   <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-    <p
+    <span
       style={{
         color: 'white',
         background: 'red',
@@ -52,17 +52,23 @@ const ErrorBarcode = () => (
       }}
     >
       ERROR
-    </p>
+    </span>
   </div>
 );
 
-const ErrorOrSampleBarcode = ({ schema, value }: { schema: BarcodeSchema; value: string }) =>
-  validateBarcodeInput(schema.type as BarCodeType, value) ? (
+const BarcodePreview = (props: { schema: BarcodeSchema; value: string }) => {
+  const { schema, value } = props;
+
+  if (value.length === 0) {
+    return null;
+  }
+
+  return validateBarcodeInput(schema.type as BarCodeType, value) ? (
     <SampleBarcode schema={schema} />
   ) : (
     <ErrorBarcode />
   );
-
+};
 type Props = SchemaUIProps & { schema: BarcodeSchema };
 
 const BarcodeSchemaUI = (
@@ -95,6 +101,7 @@ const BarcodeSchemaUI = (
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        fontFamily: "'Open Sans', sans-serif",
       }}
     >
       {editable ? (
@@ -111,14 +118,7 @@ const BarcodeSchemaUI = (
           <span>{value}</span>
         </div>
       )}
-
-      {value ? (
-        <ErrorOrSampleBarcode value={value} schema={schema} />
-      ) : editable ? (
-        <SampleBarcode schema={schema} />
-      ) : (
-        <ErrorBarcode />
-      )}
+      <BarcodePreview value={value} schema={schema} />
     </div>
   );
 };

package/src/components/Schemas/TextSchema.tsx

@@ -17,19 +17,22 @@ const TextSchemaUI = (
   ref: Ref<HTMLTextAreaElement>
 ) => {
   const style: React.CSSProperties = {
+    padding: 0,
     resize: 'none',
+    position: 'absolute',
     fontFamily: schema.fontName ?? 'inherit',
     height: schema.height * ZOOM,
-    width: schema.width * ZOOM,
+    // Increase the width by 1 point. (0.75 pixels)
+    width: (schema.width + (schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING) * 0.75) * ZOOM,
     textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
     fontSize: `${schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
     letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
-    fontFeatureSettings: `"palt"`,
     lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
     whiteSpace: 'pre-line',
     wordBreak: 'break-all',
     background: 'transparent',
     border: 'none',
+    outline: 'none',
     color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
   };
 

package/src/helper.ts

@@ -352,6 +352,7 @@ export const templateSchemas2SchemasList = async (_template: Template) => {
 
 export const fmtTemplate = (template: Template, schemasList: SchemaForUI[][]): Template => {
   const schemaAddedTemplate: Template = {
+    ...template,
     schemas: cloneDeep(schemasList).map((schema) =>
       schema.reduce((acc, cur) => {
         const k = cur.key;