@pdfme/schemas 5.2.4 → 5.2.5-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/dist/cjs/src/barcodes/helper.js +9 -1
  2. package/dist/cjs/src/barcodes/helper.js.map +1 -1
  3. package/dist/cjs/src/barcodes/index.js +3 -3
  4. package/dist/cjs/src/barcodes/index.js.map +1 -1
  5. package/dist/cjs/src/checkbox/index.js +4 -2
  6. package/dist/cjs/src/checkbox/index.js.map +1 -1
  7. package/dist/cjs/src/date/date.js +3 -6
  8. package/dist/cjs/src/date/date.js.map +1 -1
  9. package/dist/cjs/src/date/dateTime.js +3 -1
  10. package/dist/cjs/src/date/dateTime.js.map +1 -1
  11. package/dist/cjs/src/date/time.js +3 -5
  12. package/dist/cjs/src/date/time.js.map +1 -1
  13. package/dist/cjs/src/graphics/image.js +2 -1
  14. package/dist/cjs/src/graphics/image.js.map +1 -1
  15. package/dist/cjs/src/graphics/svg.js +2 -1
  16. package/dist/cjs/src/graphics/svg.js.map +1 -1
  17. package/dist/cjs/src/multiVariableText/index.js +4 -2
  18. package/dist/cjs/src/multiVariableText/index.js.map +1 -1
  19. package/dist/cjs/src/radioGroup/index.js +3 -2
  20. package/dist/cjs/src/radioGroup/index.js.map +1 -1
  21. package/dist/cjs/src/select/index.js +3 -1
  22. package/dist/cjs/src/select/index.js.map +1 -1
  23. package/dist/cjs/src/shapes/line.js +2 -1
  24. package/dist/cjs/src/shapes/line.js.map +1 -1
  25. package/dist/cjs/src/shapes/rectAndEllipse.js +3 -4
  26. package/dist/cjs/src/shapes/rectAndEllipse.js.map +1 -1
  27. package/dist/cjs/src/tables/index.js +3 -1
  28. package/dist/cjs/src/tables/index.js.map +1 -1
  29. package/dist/cjs/src/tables/propPanel.js +12 -2
  30. package/dist/cjs/src/tables/propPanel.js.map +1 -1
  31. package/dist/cjs/src/tables/uiRender.js +6 -5
  32. package/dist/cjs/src/tables/uiRender.js.map +1 -1
  33. package/dist/cjs/src/text/icons/index.js +10 -8
  34. package/dist/cjs/src/text/icons/index.js.map +1 -1
  35. package/dist/cjs/src/text/index.js +3 -1
  36. package/dist/cjs/src/text/index.js.map +1 -1
  37. package/dist/cjs/src/utils.js +15 -1
  38. package/dist/cjs/src/utils.js.map +1 -1
  39. package/dist/esm/src/barcodes/helper.js +9 -1
  40. package/dist/esm/src/barcodes/helper.js.map +1 -1
  41. package/dist/esm/src/barcodes/index.js +3 -3
  42. package/dist/esm/src/barcodes/index.js.map +1 -1
  43. package/dist/esm/src/checkbox/index.js +4 -2
  44. package/dist/esm/src/checkbox/index.js.map +1 -1
  45. package/dist/esm/src/date/date.js +3 -6
  46. package/dist/esm/src/date/date.js.map +1 -1
  47. package/dist/esm/src/date/dateTime.js +3 -1
  48. package/dist/esm/src/date/dateTime.js.map +1 -1
  49. package/dist/esm/src/date/time.js +3 -5
  50. package/dist/esm/src/date/time.js.map +1 -1
  51. package/dist/esm/src/graphics/image.js +3 -2
  52. package/dist/esm/src/graphics/image.js.map +1 -1
  53. package/dist/esm/src/graphics/svg.js +3 -2
  54. package/dist/esm/src/graphics/svg.js.map +1 -1
  55. package/dist/esm/src/multiVariableText/index.js +4 -2
  56. package/dist/esm/src/multiVariableText/index.js.map +1 -1
  57. package/dist/esm/src/radioGroup/index.js +4 -3
  58. package/dist/esm/src/radioGroup/index.js.map +1 -1
  59. package/dist/esm/src/select/index.js +3 -1
  60. package/dist/esm/src/select/index.js.map +1 -1
  61. package/dist/esm/src/shapes/line.js +3 -2
  62. package/dist/esm/src/shapes/line.js.map +1 -1
  63. package/dist/esm/src/shapes/rectAndEllipse.js +4 -5
  64. package/dist/esm/src/shapes/rectAndEllipse.js.map +1 -1
  65. package/dist/esm/src/tables/index.js +3 -1
  66. package/dist/esm/src/tables/index.js.map +1 -1
  67. package/dist/esm/src/tables/propPanel.js +12 -2
  68. package/dist/esm/src/tables/propPanel.js.map +1 -1
  69. package/dist/esm/src/tables/uiRender.js +6 -5
  70. package/dist/esm/src/tables/uiRender.js.map +1 -1
  71. package/dist/esm/src/text/icons/index.js +9 -7
  72. package/dist/esm/src/text/icons/index.js.map +1 -1
  73. package/dist/esm/src/text/index.js +3 -1
  74. package/dist/esm/src/text/index.js.map +1 -1
  75. package/dist/esm/src/utils.js +13 -0
  76. package/dist/esm/src/utils.js.map +1 -1
  77. package/dist/types/src/text/icons/index.d.ts +7 -7
  78. package/dist/types/src/utils.d.ts +2 -0
  79. package/package.json +3 -2
  80. package/src/barcodes/helper.ts +10 -1
  81. package/src/barcodes/index.ts +3 -4
  82. package/src/checkbox/index.ts +4 -4
  83. package/src/date/date.ts +3 -7
  84. package/src/date/dateTime.ts +3 -2
  85. package/src/date/time.ts +3 -6
  86. package/src/graphics/image.ts +10 -3
  87. package/src/graphics/svg.ts +9 -2
  88. package/src/multiVariableText/index.ts +7 -5
  89. package/src/radioGroup/index.ts +5 -6
  90. package/src/select/index.ts +3 -2
  91. package/src/shapes/line.ts +8 -2
  92. package/src/shapes/rectAndEllipse.ts +4 -8
  93. package/src/tables/index.ts +3 -1
  94. package/src/tables/propPanel.ts +12 -2
  95. package/src/tables/uiRender.ts +6 -5
  96. package/src/text/icons/index.ts +18 -8
  97. package/src/text/index.ts +4 -2
  98. package/src/utils.ts +14 -1
@@ -1,6 +1,13 @@
1
1
  import { Plugin, Schema } from '@pdfme/common';
2
2
  import { XMLValidator } from 'fast-xml-parser';
3
- import { convertForPdfLayoutProps, isEditable, addAlphaToHex, createErrorElm } from '../utils.js';
3
+ import {
4
+ convertForPdfLayoutProps,
5
+ isEditable,
6
+ addAlphaToHex,
7
+ createErrorElm,
8
+ createSvgStr,
9
+ } from '../utils.js';
10
+ import { Route } from 'lucide';
4
11
 
5
12
  const isValidSVG = (svgString: string) => XMLValidator.validate(svgString) === true;
6
13
 
@@ -80,7 +87,7 @@ const svgSchema: Plugin<SVGSchema> = {
80
87
  height: 50,
81
88
  },
82
89
  },
83
- 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>',
90
+ icon: createSvgStr(Route),
84
91
  };
85
92
 
86
93
  export default svgSchema;
@@ -3,12 +3,14 @@ import { pdfRender } from './pdfRender.js';
3
3
  import { propPanel } from './propPanel.js';
4
4
  import { uiRender } from './uiRender.js';
5
5
  import type { MultiVariableTextSchema } from './types';
6
+ import { Type } from 'lucide';
7
+ import { createSvgStr } from '../utils.js';
6
8
 
7
9
  const schema: Plugin<MultiVariableTextSchema> = {
8
- pdf: pdfRender,
9
- ui: uiRender,
10
- propPanel,
11
- 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>',
12
- uninterruptedEditMode: true
10
+ pdf: pdfRender,
11
+ ui: uiRender,
12
+ propPanel,
13
+ icon: createSvgStr(Type),
14
+ uninterruptedEditMode: true,
13
15
  };
14
16
  export default schema;
@@ -1,15 +1,14 @@
1
1
  import { Plugin } from '@pdfme/common';
2
2
  import { Schema } from '@pdfme/common';
3
+ import { Circle, CircleDot } from 'lucide';
3
4
  import svg from '../graphics/svg';
4
- import { isEditable } from '../utils.js';
5
+ import { isEditable, createSvgStr } from '../utils.js';
5
6
  import { HEX_COLOR_PATTERN } from '../constants.js';
6
7
 
7
8
  const defaultStroke = 'currentColor';
8
9
 
9
- const getCheckedIcon = (color = defaultStroke) =>
10
- `<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>`;
11
- const getUncheckedIcon = (color = defaultStroke) =>
12
- `<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>`;
10
+ const getCheckedIcon = (stroke = defaultStroke) => createSvgStr(CircleDot, { stroke });
11
+ const getUncheckedIcon = (stroke = defaultStroke) => createSvgStr(Circle, { stroke });
13
12
 
14
13
  interface RadioGroup extends Schema {
15
14
  group: string;
@@ -35,7 +34,7 @@ const schema: Plugin<RadioGroup> = {
35
34
  const container = document.createElement('div');
36
35
  container.style.width = '100%';
37
36
  container.style.height = '100%';
38
-
37
+
39
38
  if (onChange) {
40
39
  radioButtonStates.set(schema.name, { value, onChange });
41
40
  }
@@ -3,9 +3,10 @@ import { propPanel as parentPropPanel } from '../text/propPanel';
3
3
  import { Plugin, PropPanelWidgetProps, SchemaForUI } from '@pdfme/common';
4
4
  import text from '../text';
5
5
  import { TextSchema } from '../text/types';
6
+ import { ChevronDown } from 'lucide';
7
+ import { createSvgStr } from '../utils.js';
6
8
 
7
- const selectIcon =
8
- '<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>';
9
+ const selectIcon = createSvgStr(ChevronDown);
9
10
 
10
11
  interface Select extends TextSchema {
11
12
  options: string[];
@@ -1,6 +1,12 @@
1
1
  import type { Schema, Plugin, PDFRenderProps, UIRenderProps } from '@pdfme/common';
2
- import { rotatePoint, convertForPdfLayoutProps, hex2PrintingColor } from '../utils.js';
2
+ import {
3
+ rotatePoint,
4
+ convertForPdfLayoutProps,
5
+ hex2PrintingColor,
6
+ createSvgStr,
7
+ } from '../utils.js';
3
8
  import { HEX_COLOR_PATTERN } from '../constants.js';
9
+ import { Minus } from 'lucide';
4
10
 
5
11
  const DEFAULT_LINE_COLOR = '#000000';
6
12
 
@@ -60,6 +66,6 @@ const lineSchema: Plugin<LineSchema> = {
60
66
  color: DEFAULT_LINE_COLOR,
61
67
  },
62
68
  },
63
- 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>',
69
+ icon: createSvgStr(Minus),
64
70
  };
65
71
  export default lineSchema;
@@ -1,6 +1,7 @@
1
1
  import { Plugin, Schema, mm2pt } from '@pdfme/common';
2
2
  import { HEX_COLOR_PATTERN } from '../constants.js';
3
- import { hex2PrintingColor, convertForPdfLayoutProps } from '../utils.js';
3
+ import { hex2PrintingColor, convertForPdfLayoutProps, createSvgStr } from '../utils.js';
4
+ import { Circle, Square } from 'lucide';
4
5
 
5
6
  interface ShapeSchema extends Schema {
6
7
  type: 'ellipse' | 'rectangle';
@@ -102,11 +103,6 @@ const shape: Plugin<ShapeSchema> = {
102
103
  },
103
104
  };
104
105
 
105
- const rectangleIcon =
106
- '<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>';
107
- const ellipseIcon =
108
- '<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>';
109
-
110
106
  const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
111
107
  ...shape.propPanel,
112
108
  defaultSchema: {
@@ -118,11 +114,11 @@ const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
118
114
  export const rectangle = {
119
115
  ...shape,
120
116
  propPanel: getPropPanelSchema('rectangle'),
121
- icon: rectangleIcon
117
+ icon: createSvgStr(Square),
122
118
  };
123
119
 
124
120
  export const ellipse = {
125
121
  ...shape,
126
122
  propPanel: getPropPanelSchema('ellipse'),
127
- icon: ellipseIcon
123
+ icon: createSvgStr(Circle),
128
124
  };
@@ -3,11 +3,13 @@ import type { TableSchema } from './types.js';
3
3
  import { pdfRender } from './pdfRender.js';
4
4
  import { uiRender } from './uiRender.js';
5
5
  import { propPanel } from './propPanel.js';
6
+ import { Table } from 'lucide';
7
+ import { createSvgStr } from '../utils.js';
6
8
 
7
9
  const tableSchema: Plugin<TableSchema> = {
8
10
  pdf: pdfRender,
9
11
  ui: uiRender,
10
12
  propPanel,
11
- 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>',
13
+ icon: createSvgStr(Table),
12
14
  };
13
15
  export default tableSchema;
@@ -10,12 +10,21 @@ import { HEX_COLOR_PATTERN } from '../constants.js';
10
10
 
11
11
  export const propPanel: PropPanel<TableSchema> = {
12
12
  schema: ({ activeSchema, options, i18n }) => {
13
- // @ts-ignore
14
- const head = (activeSchema.head || []) as string[];
13
+ // @ts-expect-error
14
+ const tableSchema = activeSchema as TableSchema;
15
+ const head = tableSchema.head || [];
16
+ const showHead = tableSchema.showHead || false;
15
17
  const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
16
18
  const fontNames = Object.keys(font);
17
19
  const fallbackFontName = getFallbackFontName(font);
18
20
  return {
21
+ showHead: {
22
+ title: i18n('schemas.table.showHead'),
23
+ type: 'boolean',
24
+ widget: 'checkbox',
25
+ span: 24,
26
+ },
27
+ '-------': { type: 'void', widget: 'Divider' },
19
28
  tableStyles: {
20
29
  title: i18n('schemas.table.tableStyle'),
21
30
  type: 'object',
@@ -38,6 +47,7 @@ export const propPanel: PropPanel<TableSchema> = {
38
47
  },
39
48
  },
40
49
  headStyles: {
50
+ hidden: !showHead,
41
51
  title: i18n('schemas.table.headStyle'),
42
52
  type: 'object',
43
53
  widget: 'Card',
@@ -207,6 +207,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
207
207
  const body = getBody(value);
208
208
  const bodyWidthRange = getBodyWithRange(value, schema.__bodyRange);
209
209
  const table = await createSingleTable(bodyWidthRange, arg);
210
+ const showHead = table.settings.showHead;
210
211
 
211
212
  rootElement.innerHTML = '';
212
213
 
@@ -220,7 +221,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
220
221
  void uiRender(arg);
221
222
  };
222
223
 
223
- if (table.settings.showHead) {
224
+ if (showHead) {
224
225
  renderRowUi({
225
226
  rows: table.head,
226
227
  arg,
@@ -229,7 +230,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
229
230
  });
230
231
  }
231
232
 
232
- const offsetY = table.settings.showHead ? table.getHeadHeight() : 0;
233
+ const offsetY = showHead ? table.getHeadHeight() : 0;
233
234
  renderRowUi({
234
235
  rows: table.body,
235
236
  arg,
@@ -254,7 +255,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
254
255
  });
255
256
 
256
257
  const createRemoveRowButtons = () => {
257
- let offsetY = table.settings.showHead ? table.getHeadHeight() : 0;
258
+ let offsetY = showHead ? table.getHeadHeight() : 0;
258
259
  return table.body.map((row, i) => {
259
260
  offsetY = offsetY + row.height;
260
261
  const removeRowButton = createButton({
@@ -287,7 +288,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
287
288
  const addColumnButton = createButton({
288
289
  width: buttonSize,
289
290
  height: buttonSize,
290
- top: `${table.getHeadHeight() - px2mm(buttonSize)}mm`,
291
+ top: `${(showHead ? table.getHeadHeight() : 0) - px2mm(buttonSize)}mm`,
291
292
  right: `-${buttonSize}px`,
292
293
  text: '+',
293
294
  onClick: (e) => {
@@ -427,7 +428,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
427
428
  resetEditingPosition();
428
429
  }
429
430
 
430
- const tableHeight = table.settings.showHead ? table.getHeight() : table.getBodyHeight();
431
+ const tableHeight = showHead ? table.getHeight() : table.getBodyHeight();
431
432
  if (schema.height !== tableHeight && onChange) {
432
433
  onChange({ key: 'height', value: tableHeight });
433
434
  }
@@ -1,17 +1,27 @@
1
- // svg icons are material icons from https://www.xicons.org
1
+ import {
2
+ Strikethrough,
3
+ Underline,
4
+ AlignLeft,
5
+ AlignCenter,
6
+ AlignRight,
7
+ ArrowUpToLine,
8
+ ArrowDownToLine,
9
+ } from 'lucide';
10
+ import { createSvgStr } from '../../utils.js';
2
11
 
3
- 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>`;
12
+ export const TextStrikethroughIcon = createSvgStr(Strikethrough);
4
13
 
5
- 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>`;
14
+ export const TextUnderlineIcon = createSvgStr(Underline);
6
15
 
7
- 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>`;
16
+ export const TextAlignLeftIcon = createSvgStr(AlignLeft);
8
17
 
9
- 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>`;
18
+ export const TextAlignCenterIcon = createSvgStr(AlignCenter);
10
19
 
11
- 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>`;
20
+ export const TextAlignRightIcon = createSvgStr(AlignRight);
12
21
 
13
- 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>`;
22
+ export const TextVerticalAlignTopIcon = createSvgStr(ArrowUpToLine);
14
23
 
24
+ // svg icons are material icons from https://www.xicons.org
15
25
  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>`;
16
26
 
17
- 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>`;
27
+ export const TextVerticalAlignBottomIcon = createSvgStr(ArrowDownToLine);
package/src/text/index.ts CHANGED
@@ -3,12 +3,14 @@ import { pdfRender } from './pdfRender.js';
3
3
  import { propPanel } from './propPanel.js';
4
4
  import { uiRender } from './uiRender.js';
5
5
  import type { TextSchema } from './types';
6
+ import { TextCursorInput } from 'lucide';
7
+ import { createSvgStr } from '../utils.js';
6
8
 
7
9
  const textSchema: Plugin<TextSchema> = {
8
10
  pdf: pdfRender,
9
11
  ui: uiRender,
10
12
  propPanel,
11
- 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>',
13
+ icon: createSvgStr(TextCursorInput),
12
14
  };
13
15
 
14
- export default textSchema;
16
+ export default textSchema;
package/src/utils.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import type * as CSS from 'csstype';
2
2
  import { cmyk, degrees, degreesToRadians, rgb } from '@pdfme/pdf-lib';
3
3
  import { Schema, mm2pt, Mode, isHexValid, ColorType } from '@pdfme/common';
4
+ import { IconNode, createElement } from 'lucide';
4
5
  import { getDynamicHeightsForTable as _getDynamicHeightsForTable } from './tables/dynamicTemplate.js';
5
-
6
6
  export const convertForPdfLayoutProps = ({
7
7
  schema,
8
8
  pageHeight,
@@ -208,3 +208,16 @@ export const createErrorElm = () => {
208
208
 
209
209
  return container;
210
210
  };
211
+
212
+ export const createSvgStr = (icon: IconNode, attrs?: Record<string, string>): string => {
213
+ if (typeof window === 'undefined') {
214
+ return '';
215
+ }
216
+ const svg = createElement(icon);
217
+ if (attrs) {
218
+ Object.entries(attrs).forEach(([key, value]) => {
219
+ svg.setAttribute(key, value);
220
+ });
221
+ }
222
+ return new XMLSerializer().serializeToString(svg);
223
+ };