@pdfme/schemas 5.2.4 → 5.2.5-dev.2

package/src/graphics/svg.ts

@@ -1,6 +1,13 @@
 import { Plugin, Schema } from '@pdfme/common';
 import { XMLValidator } from 'fast-xml-parser';
-import { convertForPdfLayoutProps, isEditable, addAlphaToHex, createErrorElm } from '../utils.js';
+import {
+  convertForPdfLayoutProps,
+  isEditable,
+  addAlphaToHex,
+  createErrorElm,
+  createSvgStr,
+} from '../utils.js';
+import { Route } from 'lucide';
 
 const isValidSVG = (svgString: string) => XMLValidator.validate(svgString) === true;
 
@@ -80,7 +87,7 @@ const svgSchema: Plugin<SVGSchema> = {
       height: 50,
     },
   },
-  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-route"><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></svg>',
+  icon: createSvgStr(Route),
 };
 
 export default svgSchema;

package/src/multiVariableText/index.ts

@@ -3,12 +3,14 @@ import { pdfRender } from './pdfRender.js';
 import { propPanel } from './propPanel.js';
 import { uiRender } from './uiRender.js';
 import type { MultiVariableTextSchema } from './types';
+import { Type } from 'lucide';
+import { createSvgStr } from '../utils.js';
 
 const schema: Plugin<MultiVariableTextSchema> = {
-    pdf: pdfRender,
-    ui: uiRender,
-    propPanel,
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-type"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>',
-    uninterruptedEditMode: true
+  pdf: pdfRender,
+  ui: uiRender,
+  propPanel,
+  icon: createSvgStr(Type),
+  uninterruptedEditMode: true,
 };
 export default schema;

package/src/radioGroup/index.ts

@@ -1,15 +1,14 @@
 import { Plugin } from '@pdfme/common';
 import { Schema } from '@pdfme/common';
+import { Circle, CircleDot } from 'lucide';
 import svg from '../graphics/svg';
-import { isEditable } from '../utils.js';
+import { isEditable, createSvgStr } from '../utils.js';
 import { HEX_COLOR_PATTERN } from '../constants.js';
 
 const defaultStroke = 'currentColor';
 
-const getCheckedIcon = (color = defaultStroke) =>
-  `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>`;
-const getUncheckedIcon = (color = defaultStroke) =>
-  `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle"><circle cx="12" cy="12" r="10"/></svg>`;
+const getCheckedIcon = (stroke = defaultStroke) => createSvgStr(CircleDot, { stroke });
+const getUncheckedIcon = (stroke = defaultStroke) => createSvgStr(Circle, { stroke });
 
 interface RadioGroup extends Schema {
   group: string;
@@ -35,7 +34,7 @@ const schema: Plugin<RadioGroup> = {
     const container = document.createElement('div');
     container.style.width = '100%';
     container.style.height = '100%';
-    
+
     if (onChange) {
       radioButtonStates.set(schema.name, { value, onChange });
     }

package/src/select/index.ts

@@ -3,9 +3,10 @@ import { propPanel as parentPropPanel } from '../text/propPanel';
 import { Plugin, PropPanelWidgetProps, SchemaForUI } from '@pdfme/common';
 import text from '../text';
 import { TextSchema } from '../text/types';
+import { ChevronDown } from 'lucide';
+import { createSvgStr } from '../utils.js';
 
-const selectIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>';
+const selectIcon = createSvgStr(ChevronDown);
 
 interface Select extends TextSchema {
   options: string[];

package/src/shapes/line.ts

@@ -1,6 +1,12 @@
 import type { Schema, Plugin, PDFRenderProps, UIRenderProps } from '@pdfme/common';
-import { rotatePoint, convertForPdfLayoutProps, hex2PrintingColor } from '../utils.js';
+import {
+  rotatePoint,
+  convertForPdfLayoutProps,
+  hex2PrintingColor,
+  createSvgStr,
+} from '../utils.js';
 import { HEX_COLOR_PATTERN } from '../constants.js';
+import { Minus } from 'lucide';
 
 const DEFAULT_LINE_COLOR = '#000000';
 
@@ -60,6 +66,6 @@ const lineSchema: Plugin<LineSchema> = {
       color: DEFAULT_LINE_COLOR,
     },
   },
-  icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><path d="M5 12h14"/></svg>',
+  icon: createSvgStr(Minus),
 };
 export default lineSchema;

package/src/shapes/rectAndEllipse.ts

@@ -1,6 +1,7 @@
 import { Plugin, Schema, mm2pt } from '@pdfme/common';
 import { HEX_COLOR_PATTERN } from '../constants.js';
-import { hex2PrintingColor, convertForPdfLayoutProps } from '../utils.js';
+import { hex2PrintingColor, convertForPdfLayoutProps, createSvgStr } from '../utils.js';
+import { Circle, Square } from 'lucide';
 
 interface ShapeSchema extends Schema {
   type: 'ellipse' | 'rectangle';
@@ -102,11 +103,6 @@ const shape: Plugin<ShapeSchema> = {
   },
 };
 
-const rectangleIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>';
-const ellipseIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle"><circle cx="12" cy="12" r="10"/></svg>';
-
 const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
   ...shape.propPanel,
   defaultSchema: {
@@ -118,11 +114,11 @@ const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
 export const rectangle = {
   ...shape,
   propPanel: getPropPanelSchema('rectangle'),
-  icon: rectangleIcon
+  icon: createSvgStr(Square),
 };
 
 export const ellipse = {
   ...shape,
   propPanel: getPropPanelSchema('ellipse'),
-  icon: ellipseIcon
+  icon: createSvgStr(Circle),
 };

package/src/tables/index.ts

@@ -3,11 +3,13 @@ import type { TableSchema } from './types.js';
 import { pdfRender } from './pdfRender.js';
 import { uiRender } from './uiRender.js';
 import { propPanel } from './propPanel.js';
+import { Table } from 'lucide';
+import { createSvgStr } from '../utils.js';
 
 const tableSchema: Plugin<TableSchema> = {
   pdf: pdfRender,
   ui: uiRender,
   propPanel,
-  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>',
+  icon: createSvgStr(Table),
 };
 export default tableSchema;

package/src/tables/propPanel.ts

@@ -10,12 +10,21 @@ import { HEX_COLOR_PATTERN } from '../constants.js';
 
 export const propPanel: PropPanel<TableSchema> = {
   schema: ({ activeSchema, options, i18n }) => {
-    // @ts-ignore
-    const head = (activeSchema.head || []) as string[];
+    // @ts-expect-error
+    const tableSchema = activeSchema as TableSchema;
+    const head = tableSchema.head || [];
+    const showHead = tableSchema.showHead || false;
     const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
     const fontNames = Object.keys(font);
     const fallbackFontName = getFallbackFontName(font);
     return {
+      showHead: {
+        title: i18n('schemas.table.showHead'),
+        type: 'boolean',
+        widget: 'checkbox',
+        span: 24,
+      },
+      '-------': { type: 'void', widget: 'Divider' },
       tableStyles: {
         title: i18n('schemas.table.tableStyle'),
         type: 'object',
@@ -38,6 +47,7 @@ export const propPanel: PropPanel<TableSchema> = {
         },
       },
       headStyles: {
+        hidden: !showHead,
         title: i18n('schemas.table.headStyle'),
         type: 'object',
         widget: 'Card',

package/src/tables/uiRender.ts

@@ -207,6 +207,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
   const body = getBody(value);
   const bodyWidthRange = getBodyWithRange(value, schema.__bodyRange);
   const table = await createSingleTable(bodyWidthRange, arg);
+  const showHead = table.settings.showHead;
 
   rootElement.innerHTML = '';
 
@@ -220,7 +221,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
     void uiRender(arg);
   };
 
-  if (table.settings.showHead) {
+  if (showHead) {
     renderRowUi({
       rows: table.head,
       arg,
@@ -229,7 +230,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
     });
   }
 
-  const offsetY = table.settings.showHead ? table.getHeadHeight() : 0;
+  const offsetY = showHead ? table.getHeadHeight() : 0;
   renderRowUi({
     rows: table.body,
     arg,
@@ -254,7 +255,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
     });
 
   const createRemoveRowButtons = () => {
-    let offsetY = table.settings.showHead ? table.getHeadHeight() : 0;
+    let offsetY = showHead ? table.getHeadHeight() : 0;
     return table.body.map((row, i) => {
       offsetY = offsetY + row.height;
       const removeRowButton = createButton({
@@ -287,7 +288,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
     const addColumnButton = createButton({
       width: buttonSize,
       height: buttonSize,
-      top: `${table.getHeadHeight() - px2mm(buttonSize)}mm`,
+      top: `${(showHead ? table.getHeadHeight() : 0) - px2mm(buttonSize)}mm`,
       right: `-${buttonSize}px`,
       text: '+',
       onClick: (e) => {
@@ -427,7 +428,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
     resetEditingPosition();
   }
 
-  const tableHeight = table.settings.showHead ? table.getHeight() : table.getBodyHeight();
+  const tableHeight = showHead ? table.getHeight() : table.getBodyHeight();
   if (schema.height !== tableHeight && onChange) {
     onChange({ key: 'height', value: tableHeight });
   }

package/src/text/icons/index.ts

@@ -1,17 +1,27 @@
-// svg icons are material icons from https://www.xicons.org
+import {
+  Strikethrough,
+  Underline,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  ArrowUpToLine,
+  ArrowDownToLine,
+} from 'lucide';
+import { createSvgStr } from '../../utils.js';
 
-export const TextStrikethroughIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M6.85 7.08C6.85 4.37 9.45 3 12.24 3c1.64 0 3 .49 3.9 1.28c.77.65 1.46 1.73 1.46 3.24h-3.01c0-.31-.05-.59-.15-.85c-.29-.86-1.2-1.28-2.25-1.28c-1.86 0-2.34 1.02-2.34 1.7c0 .48.25.88.74 1.21c.38.25.77.48 1.41.7H7.39c-.21-.34-.54-.89-.54-1.92zM21 12v-2H3v2h9.62c1.15.45 1.96.75 1.96 1.97c0 1-.81 1.67-2.28 1.67c-1.54 0-2.93-.54-2.93-2.51H6.4c0 .55.08 1.13.24 1.58c.81 2.29 3.29 3.3 5.67 3.3c2.27 0 5.3-.89 5.3-4.05c0-.3-.01-1.16-.48-1.94H21V12z" fill="currentColor"></path></svg>`;
+export const TextStrikethroughIcon = createSvgStr(Strikethrough);
 
-export const TextUnderlineIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" fill="currentColor"></path></svg>`;
+export const TextUnderlineIcon = createSvgStr(Underline);
 
-export const TextAlignLeftIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" fill="currentColor"></path></svg>`;
+export const TextAlignLeftIcon = createSvgStr(AlignLeft);
 
-export const TextAlignCenterIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" fill="currentColor"></path></svg>`;
+export const TextAlignCenterIcon = createSvgStr(AlignCenter);
 
-export const TextAlignRightIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" fill="currentColor"></path></svg>`;
+export const TextAlignRightIcon = createSvgStr(AlignRight);
 
-export const TextVerticalAlignTopIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M8 11h3v10h2V11h3l-4-4l-4 4zM4 3v2h16V3H4z" fill="currentColor"></path></svg>`;
+export const TextVerticalAlignTopIcon = createSvgStr(ArrowUpToLine);
 
+// svg icons are material icons from https://www.xicons.org
 export const TextVerticalAlignMiddleIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M8 19h3v4h2v-4h3l-4-4l-4 4zm8-14h-3V1h-2v4H8l4 4l4-4zM4 11v2h16v-2H4z" fill="currentColor"></path></svg>`;
 
-export const TextVerticalAlignBottomIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M16 13h-3V3h-2v10H8l4 4l4-4zM4 19v2h16v-2H4z" fill="currentColor"></path></svg>`;
+export const TextVerticalAlignBottomIcon = createSvgStr(ArrowDownToLine);

package/src/text/index.ts

@@ -3,12 +3,14 @@ import { pdfRender } from './pdfRender.js';
 import { propPanel } from './propPanel.js';
 import { uiRender } from './uiRender.js';
 import type { TextSchema } from './types';
+import { TextCursorInput } from 'lucide';
+import { createSvgStr } from '../utils.js';
 
 const textSchema: Plugin<TextSchema> = {
   pdf: pdfRender,
   ui: uiRender,
   propPanel,
-  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-cursor-input"><path d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1"/><path d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5"/><path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"/><path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"/><path d="M9 7v10"/></svg>',
+  icon: createSvgStr(TextCursorInput),
 };
 
-export default textSchema;
+export default textSchema;

package/src/utils.ts

@@ -1,8 +1,8 @@
 import type * as CSS from 'csstype';
 import { cmyk, degrees, degreesToRadians, rgb } from '@pdfme/pdf-lib';
 import { Schema, mm2pt, Mode, isHexValid, ColorType } from '@pdfme/common';
+import { IconNode, createElement } from 'lucide';
 import { getDynamicHeightsForTable as _getDynamicHeightsForTable } from './tables/dynamicTemplate.js';
-
 export const convertForPdfLayoutProps = ({
   schema,
   pageHeight,
@@ -208,3 +208,16 @@ export const createErrorElm = () => {
 
   return container;
 };
+
+export const createSvgStr = (icon: IconNode, attrs?: Record<string, string>): string => {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+  const svg = createElement(icon);
+  if (attrs) {
+    Object.entries(attrs).forEach(([key, value]) => {
+      svg.setAttribute(key, value);
+    });
+  }
+  return new XMLSerializer().serializeToString(svg);
+};