@pdfme/ui 3.1.4 → 3.1.5-dev.10

package/dist/types/class.d.ts

@@ -10,7 +10,7 @@ export declare abstract class BaseUIClass {
     private readonly setSize;
     resizeObserver: ResizeObserver;
     constructor(props: UIProps);
-    protected getLang(): "en" | "th" | "ja" | "ar" | "pl" | "it";
+    protected getLang(): "en" | "th" | "ja" | "ar" | "pl" | "it" | "de";
     protected getFont(): Record<string, {
         data: (string | Uint8Array | ArrayBuffer) & (string | Uint8Array | ArrayBuffer | undefined);
         fallback?: boolean | undefined;
@@ -21,6 +21,7 @@ export declare abstract class BaseUIClass {
     getTemplate(): {
         schemas: Record<string, import("zod").objectOutputType<{
             type: import("zod").ZodString;
+            readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;
                 y: import("zod").ZodNumber;

package/dist/types/contexts.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Plugins, UIOptions } from '@pdfme/common';
-export declare const I18nContext: import("react").Context<(key: "height" | "width" | "type" | "rotate" | "opacity" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.barcodes.barColor", dict?: {
+export declare const I18nContext: import("react").Context<(key: "height" | "width" | "type" | "rotate" | "opacity" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "hexColorPrompt" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.barcodes.barColor" | "schemas.line.color", dict?: {
     cancel: string;
     field: string;
     fieldName: string;
@@ -22,6 +22,7 @@ export declare const I18nContext: import("react").Context<(key: "height" | "widt
     errorBulkUpdateFieldName: string;
     commitBulkUpdateFieldName: string;
     bulkUpdateFieldName: string;
+    hexColorPrompt: string;
     'schemas.textColor': string;
     'schemas.bgColor': string;
     'schemas.horizontal': string;
@@ -43,6 +44,7 @@ export declare const I18nContext: import("react").Context<(key: "height" | "widt
     'schemas.text.fit': string;
     'schemas.text.dynamicFontSize': string;
     'schemas.barcodes.barColor': string;
+    'schemas.line.color': string;
 } | undefined) => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     data: (string | Uint8Array | ArrayBuffer) & (string | Uint8Array | ArrayBuffer | undefined);

package/dist/types/helper.d.ts

@@ -37,7 +37,31 @@ export declare const templateSchemas2SchemasList: (_template: Template) => Promi
     key: string;
     opacity?: number | undefined;
     rotate?: number | undefined;
+    readOnly?: boolean | undefined;
 }[][]>;
+export declare const generateColumnsAndSampledataIfNeeded: (template: Template) => {
+    schemas: Record<string, import("zod").objectOutputType<{
+        type: import("zod").ZodString;
+        readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+        position: import("zod").ZodObject<{
+            x: import("zod").ZodNumber;
+            y: import("zod").ZodNumber;
+        }, "strip", import("zod").ZodTypeAny, {
+            x: number;
+            y: number;
+        }, {
+            x: number;
+            y: number;
+        }>;
+        width: import("zod").ZodNumber;
+        height: import("zod").ZodNumber;
+        rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
+        opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
+    }, import("zod").ZodTypeAny, "passthrough">>[];
+    basePdf: (string | Uint8Array | ArrayBuffer) & (string | Uint8Array | ArrayBuffer | undefined);
+    sampledata?: Record<string, string>[] | undefined;
+    columns?: string[] | undefined;
+};
 export declare const fmtTemplate: (template: Template, schemasList: SchemaForUI[][]) => Template;
 export declare const getUniqSchemaKey: (arg: {
     copiedSchemaKey: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "3.1.4",
+  "version": "3.1.5-dev.10",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/class.ts

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom';
 import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
-import { debounce, flatten, cloneDeep } from './helper.js';
+import { debounce, generateColumnsAndSampledataIfNeeded, cloneDeep } from './helper.js';
 import {
   Template,
   Size,
@@ -19,42 +19,6 @@ import {
 } from '@pdfme/common';
 import { builtInPlugins } from '@pdfme/schemas';
 
-const generateColumnsAndSampledataIfNeeded = (template: Template) => {
-  const { schemas, columns, sampledata } = template;
-
-  const flatSchemaLength = schemas
-    .map((schema) => Object.keys(schema).length)
-    .reduce((acc, cur) => acc + cur, 0);
-
-  const needColumns = !columns || flatSchemaLength !== columns.length;
-
-  const needSampledata = !sampledata || flatSchemaLength !== Object.keys(sampledata[0]).length;
-
-  // columns
-  if (needColumns) {
-    template.columns = flatten(schemas.map((schema) => Object.keys(schema)));
-  }
-
-  // sampledata
-  if (needSampledata) {
-    template.sampledata = [
-      schemas.reduce(
-        (acc, cur) =>
-          Object.assign(
-            acc,
-            Object.keys(cur).reduce(
-              (a, c) => Object.assign(a, { [c]: '' }),
-              {} as { [key: string]: string }
-            )
-          ),
-        {} as { [key: string]: string }
-      ),
-    ];
-  }
-
-  return template;
-};
-
 export abstract class BaseUIClass {
   protected domContainer!: HTMLElement | null;
 

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

@@ -77,7 +77,9 @@ const DetailView = (
     for (let key in newSchema) {
       if (['id', 'data'].includes(key)) continue;
       if (newSchema[key] !== (activeSchema as any)[key]) {
-        const value = newSchema[key] || undefined;
+        let value = newSchema[key];
+        // FIXME memo: https://github.com/pdfme/pdfme/pull/367#issuecomment-1857468274
+        if (value === null && ['rotate', 'opacity'].includes(key)) value = undefined;
 
         // [position] Return the flattened position to its original form.
         if (key === 'x') key = 'position.x';
@@ -138,6 +140,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         widget: 'inputNumber',
         required: true,
         span: 8,
+        min: 0,
       },
       height: {
         title: i18n('height'),
@@ -145,6 +148,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         widget: 'inputNumber',
         required: true,
         span: 8,
+        min: 0,
       },
       opacity: {
         title: i18n('opacity'),

package/src/components/Preview.tsx

@@ -104,7 +104,9 @@ const Preview = ({
                 placeholder={template.sampledata?.[0]?.[key] ?? ''}
                 tabIndex={index + 100}
                 onChange={(value) => handleChangeInput({ key, value })}
-                outline={isForm ? `1px dashed ${token.colorPrimary}` : 'transparent'}
+                outline={
+                  isForm && !schema.readOnly ? `1px dashed ${token.colorPrimary}` : 'transparent'
+                }
                 scale={scale}
               />
             );

package/src/components/Renderer.tsx

@@ -29,12 +29,13 @@ const Wrapper = ({
     id={schema.id}
     style={{
       position: 'absolute',
-      cursor: 'pointer',
+      cursor: schema.readOnly ? 'initial' : 'pointer',
       height: schema.height * ZOOM,
       width: schema.width * ZOOM,
       top: schema.position.y * ZOOM,
       left: schema.position.x * ZOOM,
       transform: `rotate(${schema.rotate ?? 0}deg)`,
+      opacity: schema.opacity ?? 1,
       outline,
     }}
   >

package/src/helper.ts

@@ -309,6 +309,48 @@ export const templateSchemas2SchemasList = async (_template: Template) => {
   return schemasList;
 };
 
+export const generateColumnsAndSampledataIfNeeded = (template: Template) => {
+  const { schemas, columns, sampledata } = template;
+
+  const flatSchemaLengthForColumns = schemas
+    .map((schema) => Object.keys(schema).length)
+    .reduce((acc, cur) => acc + cur, 0);
+  const needColumns = !columns || flatSchemaLengthForColumns !== columns.length;
+
+  const flatSchemaLengthForSampleData = schemas
+    .map((schema) => Object.keys(schema).filter((key) => !schema[key].readOnly).length)
+    .reduce((acc, cur) => acc + cur, 0);
+  const needSampledata =
+    !sampledata || flatSchemaLengthForSampleData !== Object.keys(sampledata[0]).length;
+
+  // columns
+  if (needColumns) {
+    template.columns = flatten(schemas.map((schema) => Object.keys(schema)));
+  }
+
+  // sampledata
+  if (needSampledata) {
+    template.sampledata = [
+      schemas.reduce(
+        (acc, cur) =>
+          Object.assign(
+            acc,
+            Object.keys(cur).reduce((a, c) => {
+              const { readOnly } = cur[c];
+              if (readOnly) {
+                return a;
+              }
+              return Object.assign(a, { [c]: '' });
+            }, {} as { [key: string]: string })
+          ),
+        {} as { [key: string]: string }
+      ),
+    ];
+  }
+
+  return template;
+};
+
 export const fmtTemplate = (template: Template, schemasList: SchemaForUI[][]): Template => {
   const schemaAddedTemplate: Template = {
     ...template,
@@ -333,6 +375,9 @@ export const fmtTemplate = (template: Template, schemasList: SchemaForUI[][]): T
     sampledata: [
       cloneDeep(schemasList).reduce((acc, cur) => {
         cur.forEach((c) => {
+          if (c.readOnly) {
+            return;
+          }
           acc[c.key] = c.data;
         });
 

package/src/i18n.ts

@@ -24,6 +24,7 @@ const dictEn: { [key in keyof Dict]: string } = {
     'Cannot commit the change because the number of items has been changed.',
   commitBulkUpdateFieldName: 'Commit Changes',
   bulkUpdateFieldName: 'Bulk update field names',
+  hexColorPrompt: 'Please enter a valid hex color code.',
   'schemas.textColor': 'Text Color',
   'schemas.bgColor': 'Background Color',
   'schemas.horizontal': 'Horizontal',
@@ -45,6 +46,7 @@ const dictEn: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Fit',
   'schemas.text.dynamicFontSize': 'Dynamic Font Size',
   'schemas.barcodes.barColor': 'Bar Color',
+  'schemas.line.color': 'Color',
 };
 
 const dictJa: { [key in keyof Dict]: string } = {
@@ -69,6 +71,7 @@ const dictJa: { [key in keyof Dict]: string } = {
   errorBulkUpdateFieldName: '項目数が変更されているため変更をコミットできません。',
   commitBulkUpdateFieldName: '変更を反映',
   bulkUpdateFieldName: '項目名を一括変更',
+  hexColorPrompt: '有効な16進数のカラーコードを入力してください。',
   'schemas.textColor': 'テキストの色',
   'schemas.bgColor': '背景色',
   'schemas.horizontal': '水平',
@@ -90,6 +93,7 @@ const dictJa: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'フィット',
   'schemas.text.dynamicFontSize': '動的フォントサイズ',
   'schemas.barcodes.barColor': 'バーの色',
+  'schemas.line.color': '色',
 };
 
 const dictAr: { [key in keyof Dict]: string } = {
@@ -114,6 +118,7 @@ const dictAr: { [key in keyof Dict]: string } = {
   errorBulkUpdateFieldName: 'لا يمكن تنفيذ التغيير لأنه تم تغيير عدد العناصر.',
   commitBulkUpdateFieldName: 'تنفيذ التغييرات',
   bulkUpdateFieldName: 'تغيير الأسماء',
+  hexColorPrompt: 'الرجاء إدخال رمز لون سداسي عشري صالح.',
   'schemas.textColor': 'لون الخط',
   'schemas.bgColor': 'لون الخلفية',
   'schemas.horizontal': 'أفقي',
@@ -135,6 +140,7 @@ const dictAr: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'ملاءمة',
   'schemas.text.dynamicFontSize': 'حجم الخط الديناميكي',
   'schemas.barcodes.barColor': 'لون الشريط',
+  'schemas.line.color': 'اللون',
 };
 
 const dictTh: { [key in keyof Dict]: string } = {
@@ -159,6 +165,7 @@ const dictTh: { [key in keyof Dict]: string } = {
   errorBulkUpdateFieldName: 'ไม่สามารถยืนยันการแก้ไขได้เนื่องจากจำนวนรายการมีการเปลี่ยนแปลง',
   commitBulkUpdateFieldName: 'ยืนยันการแก้ไข',
   bulkUpdateFieldName: 'แก้ไขชื่อฟิลด์เป็นชุด',
+  hexColorPrompt: 'กรุณาใส่รหัสสีแบบฐานสิบหกที่ถูกต้อง',
   'schemas.textColor': 'สีข้อความ',
   'schemas.bgColor': 'สีพื้นหลัง',
   'schemas.horizontal': 'แนวนอน',
@@ -180,6 +187,7 @@ const dictTh: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'พอดี',
   'schemas.text.dynamicFontSize': 'ขนาดตัวอักษรแบบไดนามิก',
   'schemas.barcodes.barColor': 'สีบาร์',
+  'schemas.line.color': 'สี',
 };
 
 const dictIt: { [key in keyof Dict]: string } = {
@@ -205,6 +213,7 @@ const dictIt: { [key in keyof Dict]: string } = {
     'Non è possibile salvare le modifiche perché il numero di elementi è cambiato.',
   commitBulkUpdateFieldName: 'Salva cambiamenti',
   bulkUpdateFieldName: 'Modifica nomi campi in blocco',
+  hexColorPrompt: 'Inserisci un codice colore esadecimale valido.',
   'schemas.textColor': 'Colore testo',
   'schemas.bgColor': 'Colore sfondo',
   'schemas.horizontal': 'Orizzontale',
@@ -226,6 +235,7 @@ const dictIt: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Adatta',
   'schemas.text.dynamicFontSize': 'Dimensione font dinamica',
   'schemas.barcodes.barColor': 'Colore barra',
+  'schemas.line.color': 'Colore',
 };
 
 const dictPl: { [key in keyof Dict]: string } = {
@@ -250,6 +260,7 @@ const dictPl: { [key in keyof Dict]: string } = {
   errorBulkUpdateFieldName: 'Nie można wprowadzić zmian ponieważ liczba elementów uległa zmianie.',
   commitBulkUpdateFieldName: 'Zaakceptuj zmiany',
   bulkUpdateFieldName: 'Masowo aktualizuj klucze pól',
+  hexColorPrompt: 'Wprowadź poprawny kod koloru szesnastkowego.',
   'schemas.textColor': 'Kolor tekstu',
   'schemas.bgColor': 'Kolor tła',
   'schemas.horizontal': 'Poziomo',
@@ -271,6 +282,55 @@ const dictPl: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Dopasowanie',
   'schemas.text.dynamicFontSize': 'Dynamiczny rozmiar czcionki',
   'schemas.barcodes.barColor': 'Kolor paska',
+  'schemas.line.color': 'Kolor',
+};
+
+const dictDe: { [key in keyof Dict]: string } = {
+  cancel: 'Abbrechen',
+  field: 'Feld',
+  fieldName: 'Name',
+  align: 'Ausrichten',
+  width: 'Breite',
+  height: 'Höhe',
+  opacity: 'Opazität',
+  rotate: 'Drehen',
+  edit: 'Bearbeiten',
+  plsInputName: 'Bitte geben Sie einen Namen ein',
+  fieldMustUniq: 'Feldname ist nicht eindeutig',
+  notUniq: '(Nicht eindeutiger Name)',
+  noKeyName: 'Kein Name',
+  fieldsList: 'Feldliste',
+  addNewField: 'Neues Feld hinzufügen',
+  editField: 'Feld bearbeiten',
+  type: 'Typ',
+  errorOccurred: 'Ein Fehler ist aufgetreten',
+  errorBulkUpdateFieldName:
+    'Die Änderung kann nicht übernommen werden, weil die Anzahl der Elemente geändert wurde.',
+  commitBulkUpdateFieldName: 'Änderungen übernehmen',
+  bulkUpdateFieldName: 'Mehrfachaktualisierung der Feldnamen',
+  hexColorPrompt: 'Bitte geben Sie einen gültigen Hex-Farbcode ein.',
+  'schemas.textColor': 'Textfarbe',
+  'schemas.bgColor': 'Hintergrundfarbe',
+  'schemas.horizontal': 'Horizontal',
+  'schemas.vertical': 'Vertikal',
+  'schemas.left': 'Links',
+  'schemas.center': 'Zentriert',
+  'schemas.right': 'Rechts',
+  'schemas.top': 'Oben',
+  'schemas.middle': 'Mitte',
+  'schemas.bottom': 'Unten',
+  'schemas.text.fontName': 'Schriftart',
+  'schemas.text.size': 'Größe',
+  'schemas.text.spacing': 'Abstand',
+  'schemas.text.textAlign': 'Ausrichtung',
+  'schemas.text.verticalAlign': 'vert. Ausr.',
+  'schemas.text.lineHeight': 'Zeilenhöhe',
+  'schemas.text.min': 'Min',
+  'schemas.text.max': 'Max',
+  'schemas.text.fit': 'Anpassen',
+  'schemas.text.dynamicFontSize': 'Dynamische Schriftgröße',
+  'schemas.barcodes.barColor': 'Strichcodefarbe',
+  'schemas.line.color': 'Farbe',
 };
 
 const dictionaries: { [key in Lang]: Dict } = {
@@ -280,6 +340,7 @@ const dictionaries: { [key in Lang]: Dict } = {
   th: dictTh,
   it: dictIt,
   pl: dictPl,
+  de: dictDe,
 };
 
 export const getDict = (lang: Lang): Dict => dictionaries[lang] || dictionaries[DEFAULT_LANG];