@pdfme/ui 5.0.0 → 5.1.1-dev.1

package/dist/types/Form.d.ts

@@ -8,6 +8,9 @@ declare class Form extends PreviewUI {
         value: string;
         name: string;
     }) => void): void;
+    setInputs(inputs: {
+        [key: string]: string;
+    }[]): void;
     protected render(): void;
 }
 export default Form;

package/dist/types/class.d.ts

@@ -17,7 +17,7 @@ export declare abstract class BaseUIClass {
         subset?: boolean | undefined;
     }>;
     protected getPluginsRegistry(): Plugins;
-    protected getOptions(): {};
+    getOptions(): UIOptions;
     getTemplate(): import("zod").objectOutputType<{
         schemas: import("zod").ZodArray<import("zod").ZodArray<import("zod").ZodObject<{
             name: import("zod").ZodString;

package/dist/types/contexts.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { Plugins, UIOptions } from '@pdfme/common';
-export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "required" | "cancel" | "field" | "fieldName" | "align" | "edit" | "editable" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "validation.uniqueName" | "validation.hexColor" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "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.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle", dict?: {
+export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "required" | "cancel" | "close" | "field" | "fieldName" | "align" | "edit" | "editable" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "validation.uniqueName" | "validation.hexColor" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "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.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle" | "schemas.date.format" | "schemas.select.options" | "schemas.select.optionPlaceholder", dict?: {
     cancel: string;
+    close: string;
     field: string;
     fieldName: string;
     align: string;
@@ -64,6 +65,9 @@ export declare const I18nContext: import("react").Context<(key: "type" | "width"
     'schemas.table.headStyle': string;
     'schemas.table.bodyStyle': string;
     'schemas.table.columnStyle': string;
+    'schemas.date.format': string;
+    'schemas.select.options': string;
+    'schemas.select.optionPlaceholder': string;
 } | undefined) => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     data: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.0.0",
+  "version": "5.1.1-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -87,7 +87,8 @@
       "^rc-picker/es/": "rc-picker/lib/",
       "^lodash-es$": "lodash",
       "^pdfjs-dist/legacy/build/pdf.js$": "<rootDir>/__mocks__/pdfjs-dist.js",
-      "^pdfjs-dist/legacy/build/pdf.worker.entry.js$": "<rootDir>/__mocks__/pdfjs-dist.js"
+      "^pdfjs-dist/legacy/build/pdf.worker.entry.js$": "<rootDir>/__mocks__/pdfjs-dist.js",
+      "^date-fns/locale": "date-fns/locale.cjs"
     },
     "resolver": "ts-jest-resolver",
     "moduleFileExtensions": [

package/src/Form.tsx

@@ -17,6 +17,37 @@ class Form extends PreviewUI {
     this.onChangeInputCallback = cb;
   }
 
+  public setInputs(inputs: { [key: string]: string }[]): void {
+    const previousInputs = this.getInputs();
+
+    super.setInputs(inputs);
+
+    const changedInputs: Array<{ index: number; name: string; value: string }> = [];
+
+    inputs.forEach((input, index) => {
+      const prevInput = previousInputs[index] || {};
+
+      const allKeys = new Set([...Object.keys(input), ...Object.keys(prevInput)]);
+
+      allKeys.forEach((name) => {
+        const newValue = input[name];
+        const oldValue = prevInput[name];
+
+        if (newValue !== oldValue) {
+          changedInputs.push({ index, name, value: newValue });
+        }
+      });
+    });
+
+    changedInputs.forEach((input) => {
+      if (this.onChangeInputCallback) {
+        this.onChangeInputCallback(input);
+      }
+    });
+  }
+
+
+
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(

package/src/class.ts

@@ -33,7 +33,7 @@ export abstract class BaseUIClass {
 
   private pluginsRegistry: Plugins = builtInPlugins;
 
-  private options = {};
+  private options: UIOptions = {};
 
   private readonly setSize = debounce(() => {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
@@ -84,7 +84,7 @@ export abstract class BaseUIClass {
     return this.pluginsRegistry;
   }
 
-  protected getOptions() {
+  public getOptions() {
     return this.options;
   }
 

package/src/i18n.ts

@@ -3,6 +3,7 @@ import { DEFAULT_LANG } from './constants.js';
 
 const dictEn: { [key in keyof Dict]: string } = {
   cancel: 'Cancel',
+  close: 'Close',
   field: 'field',
   fieldName: 'Name',
   align: 'Align',
@@ -56,7 +57,8 @@ const dictEn: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Fit',
   'schemas.text.dynamicFontSize': 'Dynamic Font Size',
   'schemas.text.format': 'Format',
-  'schemas.mvt.typingInstructions': 'Add variables by typing words surrounded by curly brackets, e.g.',
+  'schemas.mvt.typingInstructions':
+    'Add variables by typing words surrounded by curly brackets, e.g.',
   'schemas.mvt.sampleField': 'name',
   'schemas.mvt.variablesSampleData': 'Variables Sample Data',
   'schemas.barcodes.barColor': 'Bar Color',
@@ -66,10 +68,14 @@ const dictEn: { [key in keyof Dict]: string } = {
   'schemas.table.headStyle': 'Header Style',
   'schemas.table.bodyStyle': 'Body Style',
   'schemas.table.columnStyle': 'Column Style',
+  'schemas.date.format': 'Date Format',
+  'schemas.select.options': 'Options',
+  'schemas.select.optionPlaceholder': 'Enter an option',
 };
 
 const dictZh: { [key in keyof Dict]: string } = {
   cancel: '取消',
+  close: '关闭',
   field: '字段',
   fieldName: '名称',
   align: '对齐',
@@ -132,10 +138,14 @@ const dictZh: { [key in keyof Dict]: string } = {
   'schemas.table.headStyle': '表头样式',
   'schemas.table.bodyStyle': '表体样式',
   'schemas.table.columnStyle': '列样式',
+  'schemas.date.format': '日期格式',
+  'schemas.select.options': '选项',
+  'schemas.select.optionPlaceholder': '请输入选项',
 };
 
 const dictJa: { [key in keyof Dict]: string } = {
   cancel: 'キャンセル',
+  close: '閉じる',
   field: '入力項目',
   fieldName: '項目名',
   align: '整列',
@@ -198,10 +208,14 @@ const dictJa: { [key in keyof Dict]: string } = {
   'schemas.table.headStyle': 'ヘッダースタイル',
   'schemas.table.bodyStyle': 'ボディスタイル',
   'schemas.table.columnStyle': 'カラムスタイル',
+  'schemas.date.format': '日付形式',
+  'schemas.select.options': 'オプション',
+  'schemas.select.optionPlaceholder': 'オプションを入力してください',
 };
 
 const dictKo: { [key in keyof Dict]: string } = {
   cancel: '취소',
+  close: '닫기',
   field: '필드',
   fieldName: '이름',
   align: '정렬',
@@ -264,10 +278,14 @@ const dictKo: { [key in keyof Dict]: string } = {
   'schemas.table.headStyle': '헤더 스타일',
   'schemas.table.bodyStyle': '본문 스타일',
   'schemas.table.columnStyle': '열 스타일',
+  'schemas.date.format': '날짜 형식',
+  'schemas.select.options': '옵션',
+  'schemas.select.optionPlaceholder': '옵션을 입력하세요',
 };
 
 const dictAr: { [key in keyof Dict]: string } = {
   cancel: 'إلغاء',
+  close: 'إغلاق',
   field: 'الحقل',
   fieldName: 'اسم الحقل',
   align: 'محاذاة',
@@ -276,7 +294,7 @@ const dictAr: { [key in keyof Dict]: string } = {
   opacity: 'الشفافية',
   rotate: 'تدوير',
   required: 'مطلوب',
-  editable:'قابل للتحرير',
+  editable: 'قابل للتحرير',
   edit: 'تعديل',
   plsInputName: 'الرجاء إدخال الاسم',
   fieldMustUniq: 'يجب أن يكون الحقل فريداً',
@@ -320,7 +338,8 @@ const dictAr: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'ملاءمة',
   'schemas.text.dynamicFontSize': 'حجم الخط الديناميكي',
   'schemas.text.format': 'تنسيق',
-  'schemas.mvt.typingInstructions': 'قم بإضافة المتغيرات عن طريق كتابة الكلمات المحاطة بأقواس متعرجة، على سبيل المثال:',
+  'schemas.mvt.typingInstructions':
+    'قم بإضافة المتغيرات عن طريق كتابة الكلمات المحاطة بأقواس متعرجة، على سبيل المثال:',
   'schemas.mvt.sampleField': 'اسم',
   'schemas.mvt.variablesSampleData': 'بيانات عينة المتغيرات',
   'schemas.barcodes.barColor': 'لون الشريط',
@@ -330,10 +349,14 @@ const dictAr: { [key in keyof Dict]: string } = {
   'schemas.table.headStyle': 'أسلوب الرأس',
   'schemas.table.bodyStyle': 'أسلوب الجسم',
   'schemas.table.columnStyle': 'أسلوب العمود',
+  'schemas.date.format': 'تنسيق التاريخ',
+  'schemas.select.options': 'خيارات',
+  'schemas.select.optionPlaceholder': 'أدخل خيارًا',
 };
 
 const dictTh: { [key in keyof Dict]: string } = {
   cancel: 'ยกเลิก',
+  close: 'ปิด',
   field: 'ฟิลด์',
   fieldName: 'ชื่อฟิลด์',
   align: 'จัดเรียง',
@@ -396,10 +419,14 @@ const dictTh: { [key in keyof Dict]: string } = {
   'schemas.table.headStyle': 'สไตล์หัวข้อ',
   'schemas.table.bodyStyle': 'สไตล์เนื้อหา',
   'schemas.table.columnStyle': 'สไตล์คอลัมน์',
+  'schemas.date.format': 'รูปแบบวันที่',
+  'schemas.select.options': 'ตัวเลือก',
+  'schemas.select.optionPlaceholder': 'กรอกตัวเลือก',
 };
 
 const dictIt: { [key in keyof Dict]: string } = {
   cancel: 'Annulla',
+  close: 'Chiudi',
   field: 'Campo',
   fieldName: 'Nome',
   align: 'Allinea',
@@ -454,7 +481,8 @@ const dictIt: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Adatta',
   'schemas.text.dynamicFontSize': 'Dimensione font dinamica',
   'schemas.text.format': 'Formato',
-  'schemas.mvt.typingInstructions': 'Aggiungi variabili digitando parole circondate da parentesi graffe, ad es.',
+  'schemas.mvt.typingInstructions':
+    'Aggiungi variabili digitando parole circondate da parentesi graffe, ad es.',
   'schemas.mvt.sampleField': 'nome',
   'schemas.mvt.variablesSampleData': 'Dati di esempio variabili',
   'schemas.barcodes.barColor': 'Colore barra',
@@ -464,10 +492,14 @@ const dictIt: { [key in keyof Dict]: string } = {
   'schemas.table.headStyle': "Stile dell'Intestazione",
   'schemas.table.bodyStyle': 'Stile del Corpo',
   'schemas.table.columnStyle': 'Stile della Colonna',
+  'schemas.date.format': 'Formato data',
+  'schemas.select.options': 'Opzioni',
+  'schemas.select.optionPlaceholder': 'Inserisci un\'opzione',
 };
 
 const dictPl: { [key in keyof Dict]: string } = {
   cancel: 'Anuluj',
+  close: 'Zamknij',
   field: 'pole',
   fieldName: 'Klucz pola',
   align: 'Wyrównanie',
@@ -530,10 +562,14 @@ const dictPl: { [key in keyof Dict]: string } = {
   'schemas.table.headStyle': 'Styl nagłówka',
   'schemas.table.bodyStyle': 'Styl ciała',
   'schemas.table.columnStyle': 'Styl kolumny',
+  'schemas.date.format': 'Format daty',
+  'schemas.select.options': 'Opcje',
+  'schemas.select.optionPlaceholder': 'Wpisz opcję',
 };
 
 const dictDe: { [key in keyof Dict]: string } = {
   cancel: 'Abbrechen',
+  close: 'Schließen',
   field: 'Feld',
   fieldName: 'Name',
   align: 'Ausrichten',
@@ -588,7 +624,8 @@ const dictDe: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Anpassen',
   'schemas.text.dynamicFontSize': 'Dynamische Schriftgröße',
   'schemas.text.format': 'Format',
-  'schemas.mvt.typingInstructions': 'Fügen Sie Variablen hinzu, indem Sie Wörter in geschweiften Klammern eingeben, z. B.',
+  'schemas.mvt.typingInstructions':
+    'Fügen Sie Variablen hinzu, indem Sie Wörter in geschweiften Klammern eingeben, z. B.',
   'schemas.mvt.sampleField': 'Name',
   'schemas.mvt.variablesSampleData': 'Variablen Beispieldaten',
   'schemas.barcodes.barColor': 'Strichcodefarbe',
@@ -598,10 +635,14 @@ const dictDe: { [key in keyof Dict]: string } = {
   'schemas.table.headStyle': 'Kopfzeilenstil',
   'schemas.table.bodyStyle': 'Körperstil',
   'schemas.table.columnStyle': 'Spaltenstil',
+  'schemas.date.format': 'Datumsformat',
+  'schemas.select.options': 'Optionen',
+  'schemas.select.optionPlaceholder': 'Geben Sie eine Option ein',
 };
 
 const dictEs: { [key in keyof Dict]: string } = {
   cancel: 'Cancelar',
+  close: 'Cerrar',
   field: 'campo',
   fieldName: 'Nombre',
   align: 'Alinear',
@@ -666,10 +707,14 @@ const dictEs: { [key in keyof Dict]: string } = {
   'schemas.table.headStyle': 'Estilo de cabecera',
   'schemas.table.bodyStyle': 'Estilo de cuerpo',
   'schemas.table.columnStyle': 'Estilo de columna',
+  'schemas.date.format': 'Formato de fecha',
+  'schemas.select.options': 'Opciones',
+  'schemas.select.optionPlaceholder': 'Ingrese una opción',
 };
 
 const dictFr: { [key in keyof Dict]: string } = {
   cancel: 'Annuler',
+  close: 'Fermer',
   field: 'Champ',
   fieldName: 'Nom',
   align: 'Aligner',
@@ -681,19 +726,21 @@ const dictFr: { [key in keyof Dict]: string } = {
   editable: 'Modifiable',
   edit: 'Éditer',
   plsInputName: 'Veuillez saisir le nom',
-  fieldMustUniq:"Le nom du champ n'est pas unique",
+  fieldMustUniq: "Le nom du champ n'est pas unique",
   notUniq: '(Nombre non unique)',
   noKeyName: 'Pas de nom',
   fieldsList: 'Liste des champs',
   editField: 'Éditer le champ',
   type: 'Type',
   errorOccurred: 'Une erreur est survenue',
-  errorBulkUpdateFieldName: "Impossible de confirmer le changement car le nombre d'éléments a changé.",
+  errorBulkUpdateFieldName:
+    "Impossible de confirmer le changement car le nombre d'éléments a changé.",
   commitBulkUpdateFieldName: 'Confirmer les changements',
   bulkUpdateFieldName: 'Modifier les noms de champs en masse',
   addPageAfter: 'Ajouter une page après',
   removePage: 'Supprimer la page actuelle',
-  removePageConfirm: 'Êtes-vous sûr de vouloir supprimer cette page ? Cette action est irréversible.',
+  removePageConfirm:
+    'Êtes-vous sûr de vouloir supprimer cette page ? Cette action est irréversible.',
   'validation.hexColor': 'Veuillez entrer un code couleur hexadécimal valide.',
   'validation.uniqueName': 'Veuillez saisir un nom unique.',
   'schemas.color': 'Couleur',
@@ -722,7 +769,8 @@ const dictFr: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Ajustement',
   'schemas.text.dynamicFontSize': 'Taille de police dynamique',
   'schemas.text.format': 'Format',
-  'schemas.mvt.typingInstructions': 'Ajoutez des variables en tapant des mots entourés d\'accolades, par ex.',
+  'schemas.mvt.typingInstructions':
+    "Ajoutez des variables en tapant des mots entourés d'accolades, par ex.",
   'schemas.mvt.sampleField': 'nom',
   'schemas.mvt.variablesSampleData': 'Variables Exemples de données',
   'schemas.barcodes.barColor': 'Couleur de la barre',
@@ -731,7 +779,10 @@ const dictFr: { [key in keyof Dict]: string } = {
   'schemas.table.tableStyle': 'Style de tableau',
   'schemas.table.headStyle': "Style d'en-tête",
   'schemas.table.bodyStyle': 'Style de corps',
-  'schemas.table.columnStyle': 'Style de colonne'
+  'schemas.table.columnStyle': 'Style de colonne',
+  'schemas.date.format': 'Format de date',
+  'schemas.select.options': 'Options',
+  'schemas.select.optionPlaceholder': 'Entrez une option',
 };
 
 const dictionaries: { [key in Lang]: Dict } = {