@pdfme/schemas 4.3.2 → 4.4.0-dev.1

package/dist/types/src/tables/dynamicTemplate.d.ts

@@ -1,13 +1,7 @@
-import { Template, Schema, BasePdf, CommonOptions } from '@pdfme/common';
-export declare const modifyTemplateForTable: (arg: {
-    template: Template;
-    input: Record<string, string>;
-    _cache: Map<any, any>;
-    options: CommonOptions;
-}) => Promise<Template>;
-export declare const getDynamicHeightForTable: (value: string, args: {
+import { Schema, BasePdf, CommonOptions } from '@pdfme/common';
+export declare const getDynamicHeightsForTable: (value: string, args: {
     schema: Schema;
     basePdf: BasePdf;
     options: CommonOptions;
     _cache: Map<any, any>;
-}) => Promise<number>;
+}) => Promise<number[]>;

package/dist/types/src/tables/tableHelper.d.ts

@@ -7,5 +7,4 @@ interface CreateTableArgs {
     _cache: Map<any, any>;
 }
 export declare function createSingleTable(body: string[][], args: CreateTableArgs): Promise<Table>;
-export declare function createMultiTables(body: string[][], args: CreateTableArgs): Promise<Table[]>;
 export {};

package/dist/types/src/utils.d.ts

@@ -30,4 +30,3 @@ export declare const hex2CmykColor: (hexString: string | undefined) => import("@
 export declare const hex2PrintingColor: (hexString: string | undefined, colorType?: ColorType) => import("@pdfme/pdf-lib").RGB | import("@pdfme/pdf-lib").CMYK | undefined;
 export declare const readFile: (input: File | FileList | null) => Promise<string | ArrayBuffer>;
 export declare const createErrorElm: () => HTMLDivElement;
-export declare const cloneDeep: <T>(value: T) => T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/schemas",
-  "version": "4.3.2",
+  "version": "4.4.0-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/index.ts

@@ -1,11 +1,11 @@
-import multiVariableText from './multiVariableText/index.js'
+import multiVariableText from './multiVariableText/index.js';
 import text, { readOnlyText } from './text/index.js';
 import image, { readOnlyImage } from './graphics/image.js';
 import svg, { readOnlySvg } from './graphics/svg.js';
 import barcodes from './barcodes/index.js';
 import line from './shapes/line.js';
 import table from './tables/index.js';
-import { modifyTemplateForTable, getDynamicHeightForTable } from './tables/dynamicTemplate.js';
+import { getDynamicHeightsForTable } from './tables/dynamicTemplate.js';
 import { rectangle, ellipse } from './shapes/rectAndEllipse.js';
 import { convertForPdfLayoutProps, rotatePoint } from './utils.js';
 
@@ -24,11 +24,11 @@ export {
   barcodes,
   line,
   tableBeta,
-  modifyTemplateForTable,
-  getDynamicHeightForTable,
   rectangle,
   ellipse,
+  // utils
   builtInPlugins,
+  getDynamicHeightsForTable,
   convertForPdfLayoutProps,
   rotatePoint,
 };

package/src/multiVariableText/helper.ts

@@ -1,3 +1,5 @@
+import { MultiVariableTextSchema } from "./types";
+
 export const substituteVariables = (text: string, variablesIn: string | Record<string, string>): string => {
   if (!text) {
     return "";
@@ -21,3 +23,28 @@ export const substituteVariables = (text: string, variablesIn: string | Record<s
 
   return substitutedText;
 };
+
+export const validateVariables = (key: string, value: string, schema: MultiVariableTextSchema): boolean => {
+  if (schema.variables.length == 0) {
+    return true;
+  }
+
+  let values;
+  try {
+    values = value ? JSON.parse(value) : {};
+  } catch (e) {
+    throw new SyntaxError(`[@pdfme/generator] invalid JSON string '${value}' for variables in field ${key}`);
+  }
+
+  for (const variable of schema.variables) {
+    if (!values[variable]) {
+      if (schema.required) {
+        throw new Error(`[@pdfme/generator] variable ${variable} is missing for field ${key}`);
+      }
+      // If not required, then simply don't render this field if an input is missing
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/multiVariableText/pdfRender.ts

@@ -1,13 +1,19 @@
 import { PDFRenderProps } from '@pdfme/common';
 import { MultiVariableTextSchema } from './types';
 import { pdfRender as parentPdfRender } from '../text/pdfRender';
-import { substituteVariables } from './helper';
+import { substituteVariables, validateVariables } from './helper';
 
 export const pdfRender = async (arg: PDFRenderProps<MultiVariableTextSchema>) => {
-  const { value, schema, ...rest } = arg;
+  const { key, value, schema, ...rest } = arg;
+
+  if (!validateVariables(key, value, schema)) {
+    // Don't render if a required variable is missing
+    return;
+  }
 
   const renderArgs = {
-    value:  substituteVariables(schema.text || '', value),
+    key,
+    value: substituteVariables(schema.text || '', value),
     schema,
     ...rest,
   };

package/src/tables/dynamicTemplate.ts

@@ -1,71 +1,9 @@
-import { Template, Schema, BasePdf, CommonOptions } from '@pdfme/common';
-import { createMultiTables, createSingleTable } from './tableHelper';
-import { cloneDeep } from '../utils';
+import { Schema, BasePdf, CommonOptions } from '@pdfme/common';
+import { createSingleTable } from './tableHelper';
 import { getBodyWithRange, getBody } from './helper.js';
 import { TableSchema } from './types';
-export const modifyTemplateForTable = async (arg: {
-  template: Template;
-  input: Record<string, string>;
-  _cache: Map<any, any>;
-  options: CommonOptions;
-}): Promise<Template> => {
-  const { template: t, input, options, _cache } = arg;
-  const template: Template = Object.assign(cloneDeep(t), { schemas: [] });
-  let pageIndex = 0;
-  for (const schemaObj of t.schemas) {
-    const additionalSchemaObjs: (typeof schemaObj)[] = [];
-    for (const [key, schema] of Object.entries(schemaObj)) {
-      if (schema.type === 'table') {
-        schema.__bodyRange = undefined;
 
-        const body = getBody(input?.[key]);
-        const tables = await createMultiTables(body, {
-          schema,
-          basePdf: template.basePdf,
-          options,
-          _cache,
-        });
-        if (tables.length > 1) {
-          const firstTable = tables[0];
-          schema.__bodyRange = { start: 0, end: firstTable.body.length };
-          const allBodies = tables.map((table) => table.body);
-          const from2ndTable = tables.slice(1);
-          from2ndTable.forEach((table, i) => {
-            const additionalPageIndex = pageIndex + i + 1;
-
-            const additionalSchemaObj = {
-              [key]: {
-                ...schema,
-                position: { x: schema.position.x, y: table.settings.startY },
-                height: table.getHeight(),
-                showHead: false,
-                __bodyRange: {
-                  start: allBodies.slice(0, i + 1).reduce((acc, cur) => acc + cur.length, 0),
-                  end: allBodies.slice(0, i + 2).reduce((acc, cur) => acc + cur.length, 0),
-                },
-                content:
-                  typeof input[key] !== 'string' ? JSON.stringify(input[key] || '[]') : input[key],
-              },
-            };
-            additionalSchemaObjs[additionalPageIndex] = additionalSchemaObj;
-          });
-        }
-      }
-    }
-    template.schemas.push(schemaObj);
-    additionalSchemaObjs.forEach((obj, index) => {
-      if (!template.schemas[index]) {
-        template.schemas[index] = obj;
-      } else {
-        template.schemas[index] = { ...template.schemas[index], ...obj };
-      }
-    });
-    pageIndex++;
-  }
-  return template;
-};
-
-export const getDynamicHeightForTable = async (
+export const getDynamicHeightsForTable = async (
   value: string,
   args: {
     schema: Schema;
@@ -73,11 +11,11 @@ export const getDynamicHeightForTable = async (
     options: CommonOptions;
     _cache: Map<any, any>;
   }
-): Promise<number> => {
-  if (args.schema.type !== 'table') return Promise.resolve(args.schema.height);
+): Promise<number[]> => {
+  if (args.schema.type !== 'table') return Promise.resolve([args.schema.height]);
   const schema = args.schema as TableSchema;
   const body =
     schema.__bodyRange?.start === 0 ? getBody(value) : getBodyWithRange(value, schema.__bodyRange);
   const table = await createSingleTable(body, args);
-  return table.getHeight();
-};
+  return table.allRows().map((row) => row.height);
+};

package/src/tables/tableHelper.ts

@@ -5,6 +5,7 @@ import {
   CommonOptions,
   getDefaultFont,
   getFallbackFontName,
+  cloneDeep,
 } from '@pdfme/common';
 import type {
   TableSchema,
@@ -15,7 +16,6 @@ import type {
   StylesProps,
   Section,
 } from './types';
-import { cloneDeep } from '../utils';
 import { Cell, Column, Row, Table } from './classes';
 
 type StyleProp = 'styles' | 'headStyles' | 'bodyStyles' | 'alternateRowStyles' | 'columnStyles';
@@ -164,28 +164,6 @@ function mapCellStyle(style: CellStyle): Partial<Styles> {
   };
 }
 
-function createTableWithAvailableHeight(
-  tableBody: Row[],
-  availableHeight: number,
-  args: CreateTableArgs
-) {
-  let limit = availableHeight;
-  const newTableBody: string[][] = [];
-  let index = 0;
-  while (limit > 0 && index < tableBody.length) {
-    const row = tableBody.slice(0, index + 1).pop();
-    if (!row) break;
-    const rowHeight = row.height;
-    if (limit - rowHeight < 0) {
-      break;
-    }
-    newTableBody.push(row.raw);
-    limit -= rowHeight;
-    index++;
-  }
-  return createSingleTable(newTableBody, args);
-}
-
 function getTableOptions(schema: TableSchema, body: string[][]): UserOptions {
   const columnStylesWidth = schema.headWidthPercentages.reduce(
     (acc, cur, i) => ({ ...acc, [i]: { cellWidth: schema.width * (cur / 100) } }),
@@ -272,7 +250,16 @@ export function createSingleTable(body: string[][], args: CreateTableArgs) {
   const { options, _cache, basePdf } = args;
   if (!isBlankPdf(basePdf)) throw new Error('[@pdfme/schema/table] Custom PDF is not supported');
 
-  const input = parseInput(args.schema as TableSchema, body);
+  const schema = cloneDeep(args.schema) as TableSchema;
+  const { start } = schema.__bodyRange || { start: 0 };
+  if (start % 2 === 1) {
+    const alternateBackgroundColor = schema.bodyStyles.alternateBackgroundColor;
+    schema.bodyStyles.alternateBackgroundColor = schema.bodyStyles.backgroundColor;
+    schema.bodyStyles.backgroundColor = alternateBackgroundColor;
+  }
+  schema.showHead = schema.showHead === false ? false : start === 0;
+
+  const input = parseInput(schema, body);
 
   const font = options.font || getDefaultFont();
 
@@ -282,41 +269,3 @@ export function createSingleTable(body: string[][], args: CreateTableArgs) {
 
   return Table.create({ input, content, font, _cache });
 }
-
-export async function createMultiTables(body: string[][], args: CreateTableArgs): Promise<Table[]> {
-  const { basePdf, schema } = args;
-
-  if (!isBlankPdf(basePdf)) throw new Error('[@pdfme/schema/table] Custom PDF is not supported');
-  const pageHeight = basePdf.height;
-  const paddingBottom = basePdf.padding[2];
-  const paddingTop = basePdf.padding[0];
-  let availableHeight = pageHeight - paddingBottom - schema.position.y;
-
-  const testTable = await createSingleTable(body, args);
-  let remainingBody = testTable.body;
-  const tables: Table[] = [];
-
-  while (remainingBody.length > 0) {
-    const tableHeight =
-      tables.length === 0
-        ? availableHeight - testTable.getHeadHeight()
-        : availableHeight - paddingTop;
-
-    const table = await createTableWithAvailableHeight(remainingBody, tableHeight, args);
-
-    tables.push(table);
-
-    remainingBody = remainingBody.slice(table.body.length);
-
-    if (remainingBody.length > 0) {
-      const _schema = cloneDeep(schema);
-      _schema.showHead = false;
-      _schema.position.y = paddingTop;
-      args.schema = _schema;
-
-      availableHeight = pageHeight - paddingTop - paddingBottom;
-    }
-  }
-
-  return tables;
-}

package/src/tables/uiRender.ts

@@ -6,6 +6,8 @@ import { getBody, getBodyWithRange } from './helper.js';
 import cell from './cell.js';
 import { Row } from './classes';
 
+const buttonSize = 30;
+
 type RowType = InstanceType<typeof Row>;
 
 const cellUiRender = cell.ui;
@@ -192,7 +194,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
     void uiRender(arg);
   };
 
-  if (schema.showHead) {
+  if (table.settings.showHead) {
     renderRowUi({
       rows: table.head,
       arg,
@@ -201,7 +203,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
     });
   }
 
-  const offsetY = schema.showHead ? table.getHeadHeight() : 0;
+  const offsetY = table.settings.showHead ? table.getHeadHeight() : 0;
   renderRowUi({
     rows: table.body,
     arg,
@@ -218,11 +220,11 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
       schema.__bodyRange.end >= (JSON.parse(value || '[]') as string[][]).length
     ) {
       const addRowButton = document.createElement('button');
-      addRowButton.style.width = '30px';
-      addRowButton.style.height = '30px';
+      addRowButton.style.width = `${buttonSize}px`;
+      addRowButton.style.height = `${buttonSize}px`;
       addRowButton.style.position = 'absolute';
       addRowButton.style.top = `${table.getHeight()}mm`;
-      addRowButton.style.left = 'calc(50% - 15px)';
+      addRowButton.style.left = `calc(50% - ${buttonSize / 2}px)`;
       addRowButton.innerText = '+';
       addRowButton.onclick = () => {
         const newRow = Array(schema.head.length).fill('') as string[];
@@ -231,15 +233,15 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
       rootElement.appendChild(addRowButton);
     }
 
-    let offsetY = schema.showHead ? table.getHeadHeight() : 0;
+    let offsetY = table.settings.showHead ? table.getHeadHeight() : 0;
     table.body.forEach((row, i) => {
       offsetY = offsetY + row.height;
       const removeRowButton = document.createElement('button');
-      removeRowButton.style.width = '30px';
-      removeRowButton.style.height = '30px';
+      removeRowButton.style.width = `${buttonSize}px`;
+      removeRowButton.style.height = `${buttonSize}px`;
       removeRowButton.style.position = 'absolute';
-      removeRowButton.style.top = `${offsetY - px2mm(30)}mm`;
-      removeRowButton.style.right = '-30px';
+      removeRowButton.style.top = `${offsetY - px2mm(buttonSize)}mm`;
+      removeRowButton.style.right = `-${buttonSize}px`;
       removeRowButton.innerText = '-';
       removeRowButton.onclick = () => {
         const newTableBody = body.filter((_, j) => j !== i + (schema.__bodyRange?.start ?? 0));
@@ -251,11 +253,11 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
 
   if (mode === 'designer' && onChange) {
     const addColumnButton = document.createElement('button');
-    addColumnButton.style.width = '30px';
-    addColumnButton.style.height = '30px';
+    addColumnButton.style.width = `${buttonSize}px`;
+    addColumnButton.style.height = `${buttonSize}px`;
     addColumnButton.style.position = 'absolute';
-    addColumnButton.style.top = `${table.getHeadHeight() - px2mm(30)}mm`;
-    addColumnButton.style.right = '-30px';
+    addColumnButton.style.top = `${table.getHeadHeight() - px2mm(buttonSize)}mm`;
+    addColumnButton.style.right = `-${buttonSize}px`;
     addColumnButton.innerText = '+';
     addColumnButton.onclick = (e) => {
       e.preventDefault();
@@ -278,11 +280,11 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
     table.columns.forEach((column, i) => {
       offsetX = offsetX + column.width;
       const removeColumnButton = document.createElement('button');
-      removeColumnButton.style.width = '30px';
-      removeColumnButton.style.height = '30px';
+      removeColumnButton.style.width = `${buttonSize}px`;
+      removeColumnButton.style.height = `${buttonSize}px`;
       removeColumnButton.style.position = 'absolute';
-      removeColumnButton.style.top = '-30px';
-      removeColumnButton.style.left = `${offsetX - px2mm(30)}mm`;
+      removeColumnButton.style.top = `-${buttonSize}px`;
+      removeColumnButton.style.left = `${offsetX - px2mm(buttonSize)}mm`;
       removeColumnButton.innerText = '-';
       removeColumnButton.onclick = (e) => {
         e.preventDefault();
@@ -386,7 +388,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
     resetEditingPosition();
   }
 
-  const tableHeight = schema.showHead ? table.getHeight() : table.getBodyHeight();
+  const tableHeight = table.settings.showHead ? table.getHeight() : table.getBodyHeight();
   if (schema.height !== tableHeight && onChange) {
     onChange({ key: 'height', value: tableHeight });
   }

package/src/utils.ts

@@ -202,5 +202,4 @@ export const createErrorElm = () => {
   container.appendChild(span);
 
   return container;
-};
-export const cloneDeep = <T>(value: T): T => JSON.parse(JSON.stringify(value));
+};