@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.
- package/dist/cjs/src/barcodes/helper.js +9 -1
- package/dist/cjs/src/barcodes/helper.js.map +1 -1
- package/dist/cjs/src/barcodes/index.js +3 -3
- package/dist/cjs/src/barcodes/index.js.map +1 -1
- package/dist/cjs/src/checkbox/index.js +4 -2
- package/dist/cjs/src/checkbox/index.js.map +1 -1
- package/dist/cjs/src/date/date.js +3 -6
- package/dist/cjs/src/date/date.js.map +1 -1
- package/dist/cjs/src/date/dateTime.js +3 -1
- package/dist/cjs/src/date/dateTime.js.map +1 -1
- package/dist/cjs/src/date/time.js +3 -5
- package/dist/cjs/src/date/time.js.map +1 -1
- package/dist/cjs/src/graphics/image.js +2 -1
- package/dist/cjs/src/graphics/image.js.map +1 -1
- package/dist/cjs/src/graphics/svg.js +2 -1
- package/dist/cjs/src/graphics/svg.js.map +1 -1
- package/dist/cjs/src/multiVariableText/index.js +4 -2
- package/dist/cjs/src/multiVariableText/index.js.map +1 -1
- package/dist/cjs/src/radioGroup/index.js +3 -2
- package/dist/cjs/src/radioGroup/index.js.map +1 -1
- package/dist/cjs/src/select/index.js +3 -1
- package/dist/cjs/src/select/index.js.map +1 -1
- package/dist/cjs/src/shapes/line.js +2 -1
- package/dist/cjs/src/shapes/line.js.map +1 -1
- package/dist/cjs/src/shapes/rectAndEllipse.js +3 -4
- package/dist/cjs/src/shapes/rectAndEllipse.js.map +1 -1
- package/dist/cjs/src/tables/index.js +3 -1
- package/dist/cjs/src/tables/index.js.map +1 -1
- package/dist/cjs/src/tables/propPanel.js +12 -2
- package/dist/cjs/src/tables/propPanel.js.map +1 -1
- package/dist/cjs/src/tables/uiRender.js +6 -5
- package/dist/cjs/src/tables/uiRender.js.map +1 -1
- package/dist/cjs/src/text/icons/index.js +10 -8
- package/dist/cjs/src/text/icons/index.js.map +1 -1
- package/dist/cjs/src/text/index.js +3 -1
- package/dist/cjs/src/text/index.js.map +1 -1
- package/dist/cjs/src/utils.js +15 -1
- package/dist/cjs/src/utils.js.map +1 -1
- package/dist/esm/src/barcodes/helper.js +9 -1
- package/dist/esm/src/barcodes/helper.js.map +1 -1
- package/dist/esm/src/barcodes/index.js +3 -3
- package/dist/esm/src/barcodes/index.js.map +1 -1
- package/dist/esm/src/checkbox/index.js +4 -2
- package/dist/esm/src/checkbox/index.js.map +1 -1
- package/dist/esm/src/date/date.js +3 -6
- package/dist/esm/src/date/date.js.map +1 -1
- package/dist/esm/src/date/dateTime.js +3 -1
- package/dist/esm/src/date/dateTime.js.map +1 -1
- package/dist/esm/src/date/time.js +3 -5
- package/dist/esm/src/date/time.js.map +1 -1
- package/dist/esm/src/graphics/image.js +3 -2
- package/dist/esm/src/graphics/image.js.map +1 -1
- package/dist/esm/src/graphics/svg.js +3 -2
- package/dist/esm/src/graphics/svg.js.map +1 -1
- package/dist/esm/src/multiVariableText/index.js +4 -2
- package/dist/esm/src/multiVariableText/index.js.map +1 -1
- package/dist/esm/src/radioGroup/index.js +4 -3
- package/dist/esm/src/radioGroup/index.js.map +1 -1
- package/dist/esm/src/select/index.js +3 -1
- package/dist/esm/src/select/index.js.map +1 -1
- package/dist/esm/src/shapes/line.js +3 -2
- package/dist/esm/src/shapes/line.js.map +1 -1
- package/dist/esm/src/shapes/rectAndEllipse.js +4 -5
- package/dist/esm/src/shapes/rectAndEllipse.js.map +1 -1
- package/dist/esm/src/tables/index.js +3 -1
- package/dist/esm/src/tables/index.js.map +1 -1
- package/dist/esm/src/tables/propPanel.js +12 -2
- package/dist/esm/src/tables/propPanel.js.map +1 -1
- package/dist/esm/src/tables/uiRender.js +6 -5
- package/dist/esm/src/tables/uiRender.js.map +1 -1
- package/dist/esm/src/text/icons/index.js +9 -7
- package/dist/esm/src/text/icons/index.js.map +1 -1
- package/dist/esm/src/text/index.js +3 -1
- package/dist/esm/src/text/index.js.map +1 -1
- package/dist/esm/src/utils.js +13 -0
- package/dist/esm/src/utils.js.map +1 -1
- package/dist/types/src/text/icons/index.d.ts +7 -7
- package/dist/types/src/utils.d.ts +2 -0
- package/package.json +3 -2
- package/src/barcodes/helper.ts +10 -1
- package/src/barcodes/index.ts +3 -4
- package/src/checkbox/index.ts +4 -4
- package/src/date/date.ts +3 -7
- package/src/date/dateTime.ts +3 -2
- package/src/date/time.ts +3 -6
- package/src/graphics/image.ts +10 -3
- package/src/graphics/svg.ts +9 -2
- package/src/multiVariableText/index.ts +7 -5
- package/src/radioGroup/index.ts +5 -6
- package/src/select/index.ts +3 -2
- package/src/shapes/line.ts +8 -2
- package/src/shapes/rectAndEllipse.ts +4 -8
- package/src/tables/index.ts +3 -1
- package/src/tables/propPanel.ts +12 -2
- package/src/tables/uiRender.ts +6 -5
- package/src/text/icons/index.ts +18 -8
- package/src/text/index.ts +4 -2
- package/src/utils.ts +14 -1
package/src/graphics/svg.ts
CHANGED
@@ -1,6 +1,13 @@
|
|
1
1
|
import { Plugin, Schema } from '@pdfme/common';
|
2
2
|
import { XMLValidator } from 'fast-xml-parser';
|
3
|
-
import {
|
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:
|
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
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
10
|
+
pdf: pdfRender,
|
11
|
+
ui: uiRender,
|
12
|
+
propPanel,
|
13
|
+
icon: createSvgStr(Type),
|
14
|
+
uninterruptedEditMode: true,
|
13
15
|
};
|
14
16
|
export default schema;
|
package/src/radioGroup/index.ts
CHANGED
@@ -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 = (
|
10
|
-
|
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
|
}
|
package/src/select/index.ts
CHANGED
@@ -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[];
|
package/src/shapes/line.ts
CHANGED
@@ -1,6 +1,12 @@
|
|
1
1
|
import type { Schema, Plugin, PDFRenderProps, UIRenderProps } from '@pdfme/common';
|
2
|
-
import {
|
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:
|
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:
|
117
|
+
icon: createSvgStr(Square),
|
122
118
|
};
|
123
119
|
|
124
120
|
export const ellipse = {
|
125
121
|
...shape,
|
126
122
|
propPanel: getPropPanelSchema('ellipse'),
|
127
|
-
icon:
|
123
|
+
icon: createSvgStr(Circle),
|
128
124
|
};
|
package/src/tables/index.ts
CHANGED
@@ -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:
|
13
|
+
icon: createSvgStr(Table),
|
12
14
|
};
|
13
15
|
export default tableSchema;
|
package/src/tables/propPanel.ts
CHANGED
@@ -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-
|
14
|
-
const
|
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',
|
package/src/tables/uiRender.ts
CHANGED
@@ -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 (
|
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 =
|
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 =
|
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 =
|
431
|
+
const tableHeight = showHead ? table.getHeight() : table.getBodyHeight();
|
431
432
|
if (schema.height !== tableHeight && onChange) {
|
432
433
|
onChange({ key: 'height', value: tableHeight });
|
433
434
|
}
|
package/src/text/icons/index.ts
CHANGED
@@ -1,17 +1,27 @@
|
|
1
|
-
|
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 =
|
12
|
+
export const TextStrikethroughIcon = createSvgStr(Strikethrough);
|
4
13
|
|
5
|
-
export const TextUnderlineIcon =
|
14
|
+
export const TextUnderlineIcon = createSvgStr(Underline);
|
6
15
|
|
7
|
-
export const TextAlignLeftIcon =
|
16
|
+
export const TextAlignLeftIcon = createSvgStr(AlignLeft);
|
8
17
|
|
9
|
-
export const TextAlignCenterIcon =
|
18
|
+
export const TextAlignCenterIcon = createSvgStr(AlignCenter);
|
10
19
|
|
11
|
-
export const TextAlignRightIcon =
|
20
|
+
export const TextAlignRightIcon = createSvgStr(AlignRight);
|
12
21
|
|
13
|
-
export const TextVerticalAlignTopIcon =
|
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 =
|
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:
|
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
|
+
};
|