@pdfme/ui 3.2.3 → 4.0.0-alpha.0

package/src/helper.ts

@@ -1,4 +1,4 @@
-// TODO Update pdfjs-dist. (might be able to reduce the bundle size.)
+// Update pdfjs-dist. (might be able to reduce the bundle size.)
 // @ts-ignore
 import PDFJSWorker from 'pdfjs-dist/legacy/build/pdf.worker.entry.js';
 import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.js';
@@ -11,9 +11,12 @@ import {
   b64toUint8Array,
   pt2mm,
   Template,
+  BasePdf,
   SchemaForUI,
   Schema,
   Size,
+  isBlankPdf,
+  Plugins,
 } from '@pdfme/common';
 import { RULER_HEIGHT } from './constants.js';
 
@@ -250,39 +253,38 @@ export const b64toBlob = (base64: string) => {
   return new Blob([uniy8Array.buffer], { type: mimeType });
 };
 
-const sortSchemasList = (template: Template, pageNum: number): SchemaForUI[][] =>
-  new Array(pageNum).fill('').reduce((acc, _, i) => {
+const sortSchemasList = (template: Template): SchemaForUI[][] => {
+  const { schemas } = template;
+  const pageNum = schemas.length;
+  const arr = new Array(pageNum).fill('') as SchemaForUI[][];
+  return arr.reduce((acc, _, i) => {
     acc.push(
-      template.schemas[i]
-        ? Object.entries(template.schemas[i])
-            .sort((a, b) => {
-              const aIndex = (template.columns ?? []).findIndex((c) => c === a[0]);
-              const bIndex = (template.columns ?? []).findIndex((c) => c === b[0]);
-
-              return aIndex > bIndex ? 1 : -1;
-            })
-            .map((e) => {
-              const [key, value] = e;
-              const data = template.sampledata?.[0]?.[key] ?? '';
-
-              return Object.assign(value, {
-                key,
-                data,
-                id: uuid(),
-              });
-            })
+      schemas[i]
+        ? Object.entries(schemas[i]).map(([key, schema]) =>
+            Object.assign(schema, { key, content: schema.content, id: uuid() })
+          )
         : []
     );
-
     return acc;
   }, [] as SchemaForUI[][]);
-
-export const templateSchemas2SchemasList = async (_template: Template) => {
+};
+export const template2SchemasList = async (_template: Template) => {
   const template = cloneDeep(_template);
-  const sortedSchemasList = sortSchemasList(template, template.schemas.length);
-  const basePdf = await getB64BasePdf(template.basePdf);
-  const pdfBlob = b64toBlob(basePdf);
-  const pageSizes = await getPdfPageSizes(pdfBlob);
+  const { basePdf, schemas } = template;
+  const sortedSchemasList = sortSchemasList(template);
+
+  let pageSizes: Size[] = [];
+  if (isBlankPdf(basePdf)) {
+    pageSizes = schemas.map(() => ({
+      width: basePdf.width,
+      height: basePdf.height,
+    }));
+  } else {
+    const b64BasePdf = await getB64BasePdf(basePdf);
+    const pdfBlob = b64toBlob(b64BasePdf);
+    pageSizes = await getPdfPageSizes(pdfBlob);
+  }
+
   const ssl = sortedSchemasList.length;
   const psl = pageSizes.length;
   const schemasList = (
@@ -306,90 +308,24 @@ export const templateSchemas2SchemasList = async (_template: Template) => {
 
     return schema;
   });
-
   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,
-    schemas: cloneDeep(schemasList).map((schema) =>
-      schema.reduce((acc, cur) => {
-        const k = cur.key;
-        // @ts-ignore
-        delete cur.id;
-        // @ts-ignore
-        delete cur.key;
-        // @ts-ignore
-        delete cur.data;
-        acc[k] = cur;
-
-        return acc;
-      }, {} as { [key: string]: Schema })
-    ),
-    columns: cloneDeep(schemasList).reduce(
-      (acc, cur) => acc.concat(cur.map((s) => s.key)),
-      [] as string[]
-    ),
-    sampledata: [
-      cloneDeep(schemasList).reduce((acc, cur) => {
-        cur.forEach((c) => {
-          if (c.readOnly) {
-            return;
-          }
-          acc[c.key] = c.data;
-        });
-
-        return acc;
-      }, {} as { [key: string]: string }),
-    ],
-    basePdf: template.basePdf,
-  };
-
-  return schemaAddedTemplate;
-};
+export const schemasList2template = (schemasList: SchemaForUI[][], basePdf: BasePdf): Template => ({
+  schemas: cloneDeep(schemasList).map((schema) =>
+    schema.reduce((acc, cur) => {
+      const k = cur.key;
+      // @ts-ignore
+      delete cur.id;
+      // @ts-ignore
+      delete cur.key;
+      acc[k] = cur;
+
+      return acc;
+    }, {} as { [key: string]: Schema })
+  ),
+  basePdf,
+});
 
 export const getUniqSchemaKey = (arg: {
   copiedSchemaKey: string;
@@ -474,14 +410,7 @@ export const moveCommandToChangeSchemasArg = (props: {
   });
 };
 
-export const getPagesScrollTopByIndex = (
-  pageSizes: {
-    width: number;
-    height: number;
-  }[],
-  index: number,
-  scale: number
-) => {
+export const getPagesScrollTopByIndex = (pageSizes: Size[], index: number, scale: number) => {
   return pageSizes
     .slice(0, index)
     .reduce((acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale, 0);
@@ -489,3 +418,70 @@ export const getPagesScrollTopByIndex = (
 
 export const getSidebarContentHeight = (sidebarHeight: number) =>
   sidebarHeight - RULER_HEIGHT - RULER_HEIGHT / 2 - 115;
+
+const handlePositionSizeChange = (
+  schema: SchemaForUI,
+  key: string,
+  value: any,
+  basePdf: BasePdf,
+  pageSize: Size
+) => {
+  const padding = isBlankPdf(basePdf) ? basePdf.padding : [0, 0, 0, 0];
+  const [pt, pr, pb, pl] = padding;
+  const { width: pw, height: ph } = pageSize;
+  const calcBounds = (v: any, min: number, max: number) => Math.min(Math.max(Number(v), min), max);
+  if (key === 'position.x') {
+    schema.position.x = calcBounds(value, pl, pw - schema.width - pr);
+  } else if (key === 'position.y') {
+    schema.position.y = calcBounds(value, pt, ph - schema.height - pb);
+  } else if (key === 'width') {
+    schema.width = calcBounds(value, 0, pw - schema.position.x - pr);
+  } else if (key === 'height') {
+    schema.height = calcBounds(value, 0, ph - schema.position.y - pb);
+  }
+};
+
+const handleTypeChange = (
+  schema: SchemaForUI,
+  key: string,
+  value: any,
+  pluginsRegistry: Plugins
+) => {
+  if (key !== 'type') return;
+  const keysToKeep = ['id', 'key', 'type', 'position'];
+  Object.keys(schema).forEach((key) => {
+    if (!keysToKeep.includes(key)) {
+      delete schema[key as keyof typeof schema];
+    }
+  });
+  const propPanel = Object.values(pluginsRegistry).find(
+    (plugin) => plugin?.propPanel.defaultSchema.type === value
+  )?.propPanel;
+  Object.assign(schema, propPanel?.defaultSchema || {});
+};
+
+export const changeSchemas = (args: {
+  objs: { key: string; value: any; schemaId: string }[];
+  schemas: SchemaForUI[];
+  basePdf: BasePdf;
+  pluginsRegistry: Plugins;
+  pageSize: { width: number; height: number };
+  commitSchemas: (newSchemas: SchemaForUI[]) => void;
+}) => {
+  const { objs, schemas, basePdf, pluginsRegistry, pageSize, commitSchemas } = args;
+  const newSchemas = objs.reduce((acc, { key, value, schemaId }) => {
+    const tgt = acc.find((s) => s.id === schemaId);
+    if (!tgt) return acc;
+    // Assign to reference
+    set(tgt, key, value);
+
+    if (key === 'type') {
+      handleTypeChange(tgt, key, value, pluginsRegistry);
+    } else if (['position.x', 'position.y', 'width', 'height'].includes(key)) {
+      handlePositionSizeChange(tgt, key, value, basePdf, pageSize);
+    }
+
+    return acc;
+  }, cloneDeep(schemas));
+  commitSchemas(newSchemas);
+};

package/src/hooks.ts

@@ -1,8 +1,16 @@
 import { RefObject, useRef, useState, useCallback, useEffect } from 'react';
-import { ZOOM, Template, Size, getB64BasePdf, SchemaForUI, ChangeSchemas } from '@pdfme/common';
+import {
+  ZOOM,
+  Template,
+  Size,
+  getB64BasePdf,
+  SchemaForUI,
+  ChangeSchemas,
+  isBlankPdf,
+} from '@pdfme/common';
 
 import {
-  fmtTemplate,
+  schemasList2template,
   uuid,
   cloneDeep,
   getUniqSchemaKey,
@@ -36,14 +44,29 @@ export const useUIPreProcessor = ({ template, size, zoomLevel }: UIPreProcessorP
   const [error, setError] = useState<Error | null>(null);
 
   const init = async (prop: { template: Template; size: Size }) => {
-    const { template, size } = prop;
-    const _basePdf = await getB64BasePdf(template.basePdf);
-    const pdfBlob = b64toBlob(_basePdf);
-    const _pageSizes = await getPdfPageSizes(pdfBlob);
-    const paperWidth = _pageSizes[0].width * ZOOM;
-    const paperHeight = _pageSizes[0].height * ZOOM;
-    const _backgrounds = await pdf2Pngs(pdfBlob, paperWidth);
+    const {
+      template: { basePdf, schemas },
+      size,
+    } = prop;
+    let paperWidth, paperHeight, _backgrounds, _pageSizes;
 
+    if (isBlankPdf(basePdf)) {
+      const { width, height } = basePdf;
+      paperWidth = width * ZOOM;
+      paperHeight = height * ZOOM;
+      _backgrounds = schemas.map(
+        () =>
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII='
+      );
+      _pageSizes = schemas.map(() => ({ width, height }));
+    } else {
+      const _basePdf = await getB64BasePdf(basePdf);
+      const pdfBlob = b64toBlob(_basePdf);
+      _pageSizes = await getPdfPageSizes(pdfBlob);
+      paperWidth = _pageSizes[0].width * ZOOM;
+      paperHeight = _pageSizes[0].height * ZOOM;
+      _backgrounds = await pdf2Pngs(pdfBlob, paperWidth);
+    }
     const _scale = Math.min(
       getScale(size.width, paperWidth),
       getScale(size.height - RULER_HEIGHT, paperHeight)
@@ -51,6 +74,7 @@ export const useUIPreProcessor = ({ template, size, zoomLevel }: UIPreProcessorP
 
     return { backgrounds: _backgrounds, pageSizes: _pageSizes, scale: _scale };
   };
+
   useEffect(() => {
     init({ template, size })
       .then(({ pageSizes, scale, backgrounds }) => {
@@ -62,7 +86,16 @@ export const useUIPreProcessor = ({ template, size, zoomLevel }: UIPreProcessorP
       });
   }, [template, size]);
 
-  return { backgrounds, pageSizes, scale: scale * zoomLevel, error };
+  return {
+    backgrounds,
+    pageSizes,
+    scale: scale * zoomLevel,
+    error,
+    refresh: (template: Template) =>
+      init({ template, size }).then(({ pageSizes, scale, backgrounds }) => {
+        setPageSizes(pageSizes), setScale(scale), setBackgrounds(backgrounds);
+      }),
+  };
 };
 
 type ScrollPageCursorProps = {
@@ -163,8 +196,6 @@ export const useInitEvents = ({
 }: UseInitEventsParams) => {
   const copiedSchemas = useRef<SchemaForUI[] | null>(null);
 
-  const modifiedTemplate = fmtTemplate(template, schemasList);
-
   const initEvents = useCallback(() => {
     const getActiveSchemas = () => {
       const ids = activeElements.map((ae) => ae.id);
@@ -215,12 +246,14 @@ export const useInitEvents = ({
       },
       redo: () => timeTravel('redo'),
       undo: () => timeTravel('undo'),
-      save: () => onSaveTemplate && onSaveTemplate(modifiedTemplate),
+      save: () =>
+        onSaveTemplate && onSaveTemplate(schemasList2template(schemasList, template.basePdf)),
       remove: () => removeSchemas(getActiveSchemas().map((s) => s.id)),
       esc: onEditEnd,
       selectAll: () => onEdit(schemasList[pageCursor].map((s) => document.getElementById(s.id)!)),
     });
   }, [
+    template,
     activeElements,
     pageCursor,
     pageSizes,
@@ -228,7 +261,6 @@ export const useInitEvents = ({
     commitSchemas,
     schemasList,
     onSaveTemplate,
-    modifiedTemplate,
     removeSchemas,
     past,
     future,

package/src/i18n.ts

@@ -24,10 +24,14 @@ 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',
+  addPageAfter: 'Add Page After',
+  removePage: 'Remove Current Page',
+  removePageConfirm: 'Are you sure you want to delete this page? This action cannot be undone.',
   hexColorPrompt: 'Please enter a valid hex color code.',
   'schemas.color': 'Color',
   'schemas.borderWidth': 'Border Width',
   'schemas.borderColor': 'Border Color',
+  'schemas.backgroundColor': 'Background Color',
   'schemas.textColor': 'Text Color',
   'schemas.bgColor': 'Background Color',
   'schemas.horizontal': 'Horizontal',
@@ -38,6 +42,7 @@ const dictEn: { [key in keyof Dict]: string } = {
   'schemas.top': 'Top',
   'schemas.middle': 'Middle',
   'schemas.bottom': 'Bottom',
+  'schemas.padding': 'Padding',
   'schemas.text.fontName': 'Font Name',
   'schemas.text.size': 'Size',
   'schemas.text.spacing': 'Spacing',
@@ -50,6 +55,11 @@ const dictEn: { [key in keyof Dict]: string } = {
   'schemas.text.dynamicFontSize': 'Dynamic Font Size',
   'schemas.barcodes.barColor': 'Bar Color',
   'schemas.barcodes.includetext': 'Include Text',
+  'schemas.table.alternateBackgroundColor': 'Alternate Background Color',
+  'schemas.table.tableStyle': 'Table Style',
+  'schemas.table.headStyle': 'Header Style',
+  'schemas.table.bodyStyle': 'Body Style',
+  'schemas.table.columnStyle': 'Column Style',
 };
 
 const dictJa: { [key in keyof Dict]: string } = {
@@ -74,10 +84,14 @@ const dictJa: { [key in keyof Dict]: string } = {
   errorBulkUpdateFieldName: '項目数が変更されているため変更をコミットできません。',
   commitBulkUpdateFieldName: '変更を反映',
   bulkUpdateFieldName: '項目名を一括変更',
+  addPageAfter: '次にページを追加',
+  removePage: '現在のページを削除',
+  removePageConfirm: 'ページを削除してもよろしいですか？この操作は元に戻せません。',
   hexColorPrompt: '有効な16進数のカラーコードを入力してください。',
   'schemas.color': '色',
   'schemas.borderWidth': '枠線の太さ',
   'schemas.borderColor': '枠線の色',
+  'schemas.backgroundColor': '背景色',
   'schemas.textColor': 'テキストの色',
   'schemas.bgColor': '背景色',
   'schemas.horizontal': '水平',
@@ -88,6 +102,7 @@ const dictJa: { [key in keyof Dict]: string } = {
   'schemas.top': '上',
   'schemas.middle': '中間',
   'schemas.bottom': '下',
+  'schemas.padding': 'パディング',
   'schemas.text.fontName': 'フォント名',
   'schemas.text.size': 'サイズ',
   'schemas.text.spacing': '間隔',
@@ -100,6 +115,11 @@ const dictJa: { [key in keyof Dict]: string } = {
   'schemas.text.dynamicFontSize': '動的フォントサイズ',
   'schemas.barcodes.barColor': 'バーの色',
   'schemas.barcodes.includetext': 'テキストを含める',
+  'schemas.table.alternateBackgroundColor': '交互の背景色',
+  'schemas.table.tableStyle': 'テーブルスタイル',
+  'schemas.table.headStyle': 'ヘッダースタイル',
+  'schemas.table.bodyStyle': 'ボディスタイル',
+  'schemas.table.columnStyle': 'カラムスタイル',
 };
 
 const dictAr: { [key in keyof Dict]: string } = {
@@ -124,10 +144,14 @@ const dictAr: { [key in keyof Dict]: string } = {
   errorBulkUpdateFieldName: 'لا يمكن تنفيذ التغيير لأنه تم تغيير عدد العناصر.',
   commitBulkUpdateFieldName: 'تنفيذ التغييرات',
   bulkUpdateFieldName: 'تغيير الأسماء',
+  addPageAfter: 'إضافة صفحة بعد',
+  removePage: 'احذف الصفحة الحالية',
+  removePageConfirm: 'هل أنت متأكد من رغبتك في حذف هذه الصفحة؟ لا يمكن التراجع عن هذا الإجراء.',
   hexColorPrompt: 'الرجاء إدخال رمز لون سداسي عشري صالح.',
   'schemas.color': 'اللون',
   'schemas.borderWidth': 'عرض الحدود',
   'schemas.borderColor': 'لون الحدود',
+  'schemas.backgroundColor': 'لون الخلفية',
   'schemas.textColor': 'لون الخط',
   'schemas.bgColor': 'لون الخلفية',
   'schemas.horizontal': 'أفقي',
@@ -138,6 +162,7 @@ const dictAr: { [key in keyof Dict]: string } = {
   'schemas.top': 'أعلى',
   'schemas.middle': 'وسط',
   'schemas.bottom': 'أسفل',
+  'schemas.padding': 'التبطين',
   'schemas.text.fontName': 'اسم الخط',
   'schemas.text.size': 'الحجم',
   'schemas.text.spacing': 'التباعد',
@@ -150,6 +175,11 @@ const dictAr: { [key in keyof Dict]: string } = {
   'schemas.text.dynamicFontSize': 'حجم الخط الديناميكي',
   'schemas.barcodes.barColor': 'لون الشريط',
   'schemas.barcodes.includetext': 'تضمين النص',
+  'schemas.table.alternateBackgroundColor': 'لون الخلفية البديل',
+  'schemas.table.tableStyle': 'أسلوب الجدول',
+  'schemas.table.headStyle': 'أسلوب الرأس',
+  'schemas.table.bodyStyle': 'أسلوب الجسم',
+  'schemas.table.columnStyle': 'أسلوب العمود',
 };
 
 const dictTh: { [key in keyof Dict]: string } = {
@@ -174,10 +204,14 @@ const dictTh: { [key in keyof Dict]: string } = {
   errorBulkUpdateFieldName: 'ไม่สามารถยืนยันการแก้ไขได้เนื่องจากจำนวนรายการมีการเปลี่ยนแปลง',
   commitBulkUpdateFieldName: 'ยืนยันการแก้ไข',
   bulkUpdateFieldName: 'แก้ไขชื่อฟิลด์เป็นชุด',
+  addPageAfter: 'เพิ่มหน้าถัดไป',
+  removePage: 'ลบหน้าปัจจุบัน',
+  removePageConfirm: 'คุณแน่ใจหรือไม่ว่าต้องการลบหน้านี้? การกระทำนี้ไม่สามารถย้อนกลับได้',
   hexColorPrompt: 'กรุณาใส่รหัสสีแบบฐานสิบหกที่ถูกต้อง',
   'schemas.color': 'สี',
   'schemas.borderWidth': 'ความกว้างของเส้นขอบ',
   'schemas.borderColor': 'สีขอบ',
+  'schemas.backgroundColor': 'สีพื้นหลัง',
   'schemas.textColor': 'สีข้อความ',
   'schemas.bgColor': 'สีพื้นหลัง',
   'schemas.horizontal': 'แนวนอน',
@@ -188,6 +222,7 @@ const dictTh: { [key in keyof Dict]: string } = {
   'schemas.top': 'ด้านบน',
   'schemas.middle': 'ตรงกลาง',
   'schemas.bottom': 'ด้านล่าง',
+  'schemas.padding': 'การเพิ่มพื้นที่',
   'schemas.text.fontName': 'ชื่อแบบอักษร',
   'schemas.text.size': 'ขนาด',
   'schemas.text.spacing': 'ระยะห่าง',
@@ -200,6 +235,11 @@ const dictTh: { [key in keyof Dict]: string } = {
   'schemas.text.dynamicFontSize': 'ขนาดตัวอักษรแบบไดนามิก',
   'schemas.barcodes.barColor': 'สีบาร์',
   'schemas.barcodes.includetext': 'รวมข้อความ',
+  'schemas.table.alternateBackgroundColor': 'สีพื้นหลังสลับกัน',
+  'schemas.table.tableStyle': 'สไตล์ตาราง',
+  'schemas.table.headStyle': 'สไตล์หัวข้อ',
+  'schemas.table.bodyStyle': 'สไตล์เนื้อหา',
+  'schemas.table.columnStyle': 'สไตล์คอลัมน์',
 };
 
 const dictIt: { [key in keyof Dict]: string } = {
@@ -225,10 +265,15 @@ 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',
+  addPageAfter: 'Aggiungi pagina dopo',
+  removePage: 'Rimuovi la Pagina Corrente',
+  removePageConfirm:
+    'Sei sicuro di voler eliminare questa pagina? Questa azione non può essere annullata.',
   hexColorPrompt: 'Inserisci un codice colore esadecimale valido.',
   'schemas.color': 'Colore',
   'schemas.borderWidth': 'Spessore bordo',
   'schemas.borderColor': 'Colore bordo',
+  'schemas.backgroundColor': 'Colore di Sfondo',
   'schemas.textColor': 'Colore testo',
   'schemas.bgColor': 'Colore sfondo',
   'schemas.horizontal': 'Orizzontale',
@@ -239,6 +284,7 @@ const dictIt: { [key in keyof Dict]: string } = {
   'schemas.top': 'Sopra',
   'schemas.middle': 'Medio',
   'schemas.bottom': 'Sotto',
+  'schemas.padding': 'Padding',
   'schemas.text.fontName': 'Nome del font',
   'schemas.text.size': 'Dimensione',
   'schemas.text.spacing': 'Spaziatura',
@@ -251,6 +297,11 @@ const dictIt: { [key in keyof Dict]: string } = {
   'schemas.text.dynamicFontSize': 'Dimensione font dinamica',
   'schemas.barcodes.barColor': 'Colore barra',
   'schemas.barcodes.includetext': 'Includi testo',
+  'schemas.table.alternateBackgroundColor': 'Colore di Sfondo Alternato',
+  'schemas.table.tableStyle': 'Stile della Tabella',
+  'schemas.table.headStyle': "Stile dell'Intestazione",
+  'schemas.table.bodyStyle': 'Stile del Corpo',
+  'schemas.table.columnStyle': 'Stile della Colonna',
 };
 
 const dictPl: { [key in keyof Dict]: string } = {
@@ -275,10 +326,14 @@ 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',
+  addPageAfter: 'Dodaj stronę po',
+  removePage: 'Usuń Bieżącą Stronę',
+  removePageConfirm: 'Czy na pewno chcesz usunąć tę stronę? Tej operacji nie można cofnąć.',
   hexColorPrompt: 'Wprowadź poprawny kod koloru szesnastkowego.',
   'schemas.color': 'Kolor',
   'schemas.borderWidth': 'Szerokość obramowania',
   'schemas.borderColor': 'Kolor obramowania',
+  'schemas.backgroundColor': 'Kolor tła',
   'schemas.textColor': 'Kolor tekstu',
   'schemas.bgColor': 'Kolor tła',
   'schemas.horizontal': 'Poziomo',
@@ -289,6 +344,7 @@ const dictPl: { [key in keyof Dict]: string } = {
   'schemas.top': 'Góra',
   'schemas.middle': 'Środek',
   'schemas.bottom': 'Dół',
+  'schemas.padding': 'Odsadzenie',
   'schemas.text.fontName': 'Nazwa czcionki',
   'schemas.text.size': 'Rozmiar',
   'schemas.text.spacing': 'Odstępy',
@@ -301,6 +357,11 @@ const dictPl: { [key in keyof Dict]: string } = {
   'schemas.text.dynamicFontSize': 'Dynamiczny rozmiar czcionki',
   'schemas.barcodes.barColor': 'Kolor paska',
   'schemas.barcodes.includetext': 'Dołącz tekst',
+  'schemas.table.alternateBackgroundColor': 'Alternatywny kolor tła',
+  'schemas.table.tableStyle': 'Styl tabeli',
+  'schemas.table.headStyle': 'Styl nagłówka',
+  'schemas.table.bodyStyle': 'Styl ciała',
+  'schemas.table.columnStyle': 'Styl kolumny',
 };
 
 const dictDe: { [key in keyof Dict]: string } = {
@@ -326,10 +387,15 @@ const dictDe: { [key in keyof Dict]: string } = {
     'Die Änderung kann nicht übernommen werden, weil die Anzahl der Elemente geändert wurde.',
   commitBulkUpdateFieldName: 'Änderungen übernehmen',
   bulkUpdateFieldName: 'Mehrfachaktualisierung der Feldnamen',
+  addPageAfter: 'Seite danach hinzufügen',
+  removePage: 'Aktuelle Seite entfernen',
+  removePageConfirm:
+    'Sind Sie sicher, dass Sie diese Seite löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.',
   hexColorPrompt: 'Bitte geben Sie einen gültigen Hex-Farbcode ein.',
   'schemas.color': 'Farbe',
   'schemas.borderWidth': 'Rahmenbreite',
   'schemas.borderColor': 'Rahmenfarbe',
+  'schemas.backgroundColor': 'Hintergrundfarbe',
   'schemas.textColor': 'Textfarbe',
   'schemas.bgColor': 'Hintergrundfarbe',
   'schemas.horizontal': 'Horizontal',
@@ -340,6 +406,7 @@ const dictDe: { [key in keyof Dict]: string } = {
   'schemas.top': 'Oben',
   'schemas.middle': 'Mitte',
   'schemas.bottom': 'Unten',
+  'schemas.padding': 'Polsterung',
   'schemas.text.fontName': 'Schriftart',
   'schemas.text.size': 'Größe',
   'schemas.text.spacing': 'Abstand',
@@ -352,6 +419,11 @@ const dictDe: { [key in keyof Dict]: string } = {
   'schemas.text.dynamicFontSize': 'Dynamische Schriftgröße',
   'schemas.barcodes.barColor': 'Strichcodefarbe',
   'schemas.barcodes.includetext': 'Text anzeigen',
+  'schemas.table.alternateBackgroundColor': 'Wechselnde Hintergrundfarbe',
+  'schemas.table.tableStyle': 'Tabellenstil',
+  'schemas.table.headStyle': 'Kopfzeilenstil',
+  'schemas.table.bodyStyle': 'Körperstil',
+  'schemas.table.columnStyle': 'Spaltenstil',
 };
 
 const dictionaries: { [key in Lang]: Dict } = {

package/vite.config.ts

@@ -3,17 +3,20 @@ import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 
-export default defineConfig({
-  plugins: [react(), tsconfigPaths({ root: '.' }), cssInjectedByJsPlugin()],
-  build: {
-    lib: {
-      entry: 'src/index.ts',
-      name: '@pdfme/ui',
-      fileName: (format) => `index.${format}.js`,
+export default defineConfig(({ mode }) => {
+  return {
+    define: { 'process.env.NODE_ENV': JSON.stringify(mode) },
+    plugins: [react(), tsconfigPaths({ root: '.' }), cssInjectedByJsPlugin()],
+    build: {
+      lib: {
+        entry: 'src/index.ts',
+        name: '@pdfme/ui',
+        fileName: (format) => `index.${format}.js`,
+      },
     },
-  },
-  optimizeDeps: {
-    include: ['react', 'react-dom', 'pdfjs-dist', 'antd'],
-    exclude: ['@pdfme/common', '@pdfme/schemas'],
-  },
+    optimizeDeps: {
+      include: ['react', 'react-dom', 'pdfjs-dist', 'antd'],
+      exclude: ['@pdfme/common', '@pdfme/schemas'],
+    },
+  };
 });