@pdfme/ui 1.0.0-beta.1 → 1.0.0-beta.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/README.md +8 -7
- package/dist/@pdfme/ui.js.LICENSE.txt +1 -1
- package/dist/types/common/src/schema.d.ts +370 -370
- package/dist/types/common/src/type.d.ts +6 -6
- package/dist/types/ui/src/components/Schemas/SchemaUI.d.ts +1 -1
- package/package.json +1 -1
- package/public/Designer.html +0 -90
- package/public/Form.html +0 -74
- package/public/SauceHanSansJP.ttf +0 -0
- package/public/SauceHanSerifJP.ttf +0 -0
- package/public/Viewer.html +0 -73
- package/public/helper.js +0 -51
- package/public/index.html +0 -54
|
@@ -18,34 +18,34 @@ export declare const isTextSchema: (arg: CommonSchema) => arg is {
|
|
|
18
18
|
characterSpacing?: number | undefined;
|
|
19
19
|
lineHeight?: number | undefined;
|
|
20
20
|
type: "text";
|
|
21
|
+
height: number;
|
|
22
|
+
width: number;
|
|
21
23
|
position: {
|
|
22
24
|
x: number;
|
|
23
25
|
y: number;
|
|
24
26
|
};
|
|
25
|
-
width: number;
|
|
26
|
-
height: number;
|
|
27
27
|
};
|
|
28
28
|
export declare type ImageSchema = z.infer<typeof ImageSchema>;
|
|
29
29
|
export declare const isImageSchema: (arg: CommonSchema) => arg is {
|
|
30
30
|
rotate?: number | undefined;
|
|
31
31
|
type: "image";
|
|
32
|
+
height: number;
|
|
33
|
+
width: number;
|
|
32
34
|
position: {
|
|
33
35
|
x: number;
|
|
34
36
|
y: number;
|
|
35
37
|
};
|
|
36
|
-
width: number;
|
|
37
|
-
height: number;
|
|
38
38
|
};
|
|
39
39
|
export declare type BarcodeSchema = z.infer<typeof BarcodeSchema>;
|
|
40
40
|
export declare const isBarcodeSchema: (arg: CommonSchema) => arg is {
|
|
41
41
|
rotate?: number | undefined;
|
|
42
42
|
type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce";
|
|
43
|
+
height: number;
|
|
44
|
+
width: number;
|
|
43
45
|
position: {
|
|
44
46
|
x: number;
|
|
45
47
|
y: number;
|
|
46
48
|
};
|
|
47
|
-
width: number;
|
|
48
|
-
height: number;
|
|
49
49
|
};
|
|
50
50
|
export declare type Schema = z.infer<typeof Schema>;
|
|
51
51
|
export declare type SchemaForUI = z.infer<typeof SchemaForUI>;
|
|
@@ -10,5 +10,5 @@ export interface SchemaUIProps {
|
|
|
10
10
|
declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
|
|
11
11
|
border: string;
|
|
12
12
|
onChangeHoveringSchemaId?: ((id: string | null) => void) | undefined;
|
|
13
|
-
} & React.RefAttributes<
|
|
13
|
+
} & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
|
|
14
14
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pdfme/ui",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.2",
|
|
4
4
|
"author": "hand-dot",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!",
|
package/public/Designer.html
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<title>Webpack App</title>
|
|
6
|
-
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
7
|
-
</head>
|
|
8
|
-
<body style="margin: 0">
|
|
9
|
-
<div>
|
|
10
|
-
<a href="./">Back</a>
|
|
11
|
-
/
|
|
12
|
-
<button onclick="init()">init</button>
|
|
13
|
-
/
|
|
14
|
-
<button onclick="destroy()">destroy</button>
|
|
15
|
-
/
|
|
16
|
-
<button onclick="saveTemplate()">saveTemplate</button>
|
|
17
|
-
/
|
|
18
|
-
<button onclick="updateTemplate()">updateTemplate</button>
|
|
19
|
-
/
|
|
20
|
-
<button onclick="generate()">generate</button>
|
|
21
|
-
/
|
|
22
|
-
<label>
|
|
23
|
-
loadTemplate
|
|
24
|
-
<input type="file" accept="application/json" onchange="loadTemplate(this.files[0])" />
|
|
25
|
-
</label>
|
|
26
|
-
</div>
|
|
27
|
-
<div id="app"></div>
|
|
28
|
-
<script src="./helper.js"></script>
|
|
29
|
-
<script>
|
|
30
|
-
let editor = null;
|
|
31
|
-
|
|
32
|
-
async function init() {
|
|
33
|
-
const font = await getFont();
|
|
34
|
-
editor = new Designer({
|
|
35
|
-
domContainer,
|
|
36
|
-
template: getTemplate(),
|
|
37
|
-
options: {
|
|
38
|
-
font,
|
|
39
|
-
},
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
editor.onSaveTemplate((t) => {
|
|
43
|
-
console.log({ ...t });
|
|
44
|
-
const tj = JSON.stringify(t, null, 2);
|
|
45
|
-
localStorage.setItem('template', tj);
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
function destroy() {
|
|
50
|
-
editor.destroy();
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function saveTemplate() {
|
|
54
|
-
editor.saveTemplate();
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
function updateTemplate() {
|
|
58
|
-
editor.updateTemplate(getSampleTemplate());
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
function loadTemplate(file) {
|
|
62
|
-
const reader = new FileReader();
|
|
63
|
-
reader.onload = () => {
|
|
64
|
-
editor.updateTemplate(JSON.parse(reader.result));
|
|
65
|
-
};
|
|
66
|
-
reader.readAsText(file);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
async function generate() {
|
|
70
|
-
const font = await getFont();
|
|
71
|
-
const template = editor.getTemplate();
|
|
72
|
-
const inputs = template.sampledata;
|
|
73
|
-
pdfme
|
|
74
|
-
.generate({
|
|
75
|
-
inputs,
|
|
76
|
-
template,
|
|
77
|
-
options: {
|
|
78
|
-
font,
|
|
79
|
-
},
|
|
80
|
-
})
|
|
81
|
-
.then((pdf) => {
|
|
82
|
-
const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
|
|
83
|
-
window.open(URL.createObjectURL(blob));
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
window.onload = init;
|
|
88
|
-
</script>
|
|
89
|
-
</body>
|
|
90
|
-
</html>
|
package/public/Form.html
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<title>Webpack App</title>
|
|
6
|
-
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
7
|
-
</head>
|
|
8
|
-
<body style="margin: 0">
|
|
9
|
-
<div>
|
|
10
|
-
<a href="./">Back</a>
|
|
11
|
-
/
|
|
12
|
-
<button onclick="init()">init</button>
|
|
13
|
-
/
|
|
14
|
-
<button onclick="destroy()">destroy</button>
|
|
15
|
-
/
|
|
16
|
-
<button onclick="getInputs()">getInputs</button>
|
|
17
|
-
/
|
|
18
|
-
<button onclick="setInputs()">setInputs</button>
|
|
19
|
-
/
|
|
20
|
-
<button onclick="generate()">generate</button>
|
|
21
|
-
</div>
|
|
22
|
-
<div id="app"></div>
|
|
23
|
-
<script src="./helper.js"></script>
|
|
24
|
-
<script>
|
|
25
|
-
let form = null;
|
|
26
|
-
|
|
27
|
-
async function init() {
|
|
28
|
-
const font = await getFont();
|
|
29
|
-
form = new pdfme.Form({
|
|
30
|
-
domContainer,
|
|
31
|
-
template: getTemplate(),
|
|
32
|
-
inputs: [
|
|
33
|
-
{ field1: 'bb', field2: 'aaaaaaaaaaaa' },
|
|
34
|
-
{ field1: 'bb', field2: 'aaaaaaaaaaaa' },
|
|
35
|
-
{ field1: 'bb', field2: 'aaaaaaaaaaaa' },
|
|
36
|
-
],
|
|
37
|
-
options: {
|
|
38
|
-
font,
|
|
39
|
-
},
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
function destroy() {
|
|
44
|
-
form.destroy();
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function getInputs() {
|
|
48
|
-
console.log(form.getInputs());
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function setInputs() {
|
|
52
|
-
form.setInputs([{ field1: 'wwwww', field2: 'wwwww' }]);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
async function generate() {
|
|
56
|
-
const font = await getFont();
|
|
57
|
-
pdfme
|
|
58
|
-
.generate({
|
|
59
|
-
inputs: form.getInputs(),
|
|
60
|
-
template: getTemplate(),
|
|
61
|
-
options: {
|
|
62
|
-
font,
|
|
63
|
-
},
|
|
64
|
-
})
|
|
65
|
-
.then((pdf) => {
|
|
66
|
-
const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
|
|
67
|
-
window.open(URL.createObjectURL(blob));
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
window.onload = init;
|
|
72
|
-
</script>
|
|
73
|
-
</body>
|
|
74
|
-
</html>
|
|
Binary file
|
|
Binary file
|
package/public/Viewer.html
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<title>Webpack App</title>
|
|
6
|
-
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
7
|
-
</head>
|
|
8
|
-
<body style="margin: 0">
|
|
9
|
-
<div>
|
|
10
|
-
<a href="./">Back</a>
|
|
11
|
-
/
|
|
12
|
-
<button onclick="init()">init</button>
|
|
13
|
-
/
|
|
14
|
-
<button onclick="destroy()">destroy</button>
|
|
15
|
-
/
|
|
16
|
-
<button onclick="getInputs()">getInputs</button>
|
|
17
|
-
/
|
|
18
|
-
<button onclick="setInputs()">setInputs</button>
|
|
19
|
-
/
|
|
20
|
-
<button onclick="generate()">generate</button>
|
|
21
|
-
</div>
|
|
22
|
-
<div id="app"></div>
|
|
23
|
-
<script src="./helper.js"></script>
|
|
24
|
-
<script>
|
|
25
|
-
let viewer = null;
|
|
26
|
-
|
|
27
|
-
async function init() {
|
|
28
|
-
const font = await getFont();
|
|
29
|
-
viewer = new pdfme.Viewer({
|
|
30
|
-
domContainer,
|
|
31
|
-
template: getTemplate(),
|
|
32
|
-
inputs: [
|
|
33
|
-
{ field1: 'bb', field2: 'aaaaaaaaaaaa' },
|
|
34
|
-
{ field1: 'bb', field2: 'aaaaaaaaaaaa' },
|
|
35
|
-
{ field1: 'bb', field2: 'aaaaaaaaaaaa' },
|
|
36
|
-
],
|
|
37
|
-
options: {
|
|
38
|
-
font,
|
|
39
|
-
},
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
function destroy() {
|
|
44
|
-
viewer.destroy();
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function getInputs() {
|
|
48
|
-
console.log(viewer.getInputs());
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function setInputs() {
|
|
52
|
-
viewer.setInputs([{ field1: 'wwwww', field2: 'wwwww' }]);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
async function generate() {
|
|
56
|
-
const font = await getFont();
|
|
57
|
-
pdfme
|
|
58
|
-
.generate({
|
|
59
|
-
inputs: viewer.getInputs(),
|
|
60
|
-
template: getTemplate(),
|
|
61
|
-
options: {
|
|
62
|
-
font,
|
|
63
|
-
},
|
|
64
|
-
})
|
|
65
|
-
.then((pdf) => {
|
|
66
|
-
const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
|
|
67
|
-
window.open(URL.createObjectURL(blob));
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
window.onload = init;
|
|
71
|
-
</script>
|
|
72
|
-
</body>
|
|
73
|
-
</html>
|
package/public/helper.js
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
const size = { height: window.innerHeight, width: window.innerWidth };
|
|
2
|
-
const domContainer = document.getElementById('app');
|
|
3
|
-
|
|
4
|
-
const getSampleTemplate = () => ({
|
|
5
|
-
columns: ['field1', 'field2'],
|
|
6
|
-
sampledata: [
|
|
7
|
-
{
|
|
8
|
-
field1: 'bb',
|
|
9
|
-
field2: 'aaaaaaaaaaaa',
|
|
10
|
-
},
|
|
11
|
-
],
|
|
12
|
-
basePdf: pdfme.blankPdf,
|
|
13
|
-
// basePdf: '/DeliveryNote.pdf',
|
|
14
|
-
schemas: [
|
|
15
|
-
{
|
|
16
|
-
field1: {
|
|
17
|
-
type: 'text',
|
|
18
|
-
position: { x: 20, y: 20 },
|
|
19
|
-
width: 100,
|
|
20
|
-
height: 15,
|
|
21
|
-
alignment: 'left',
|
|
22
|
-
fontSize: 30,
|
|
23
|
-
characterSpacing: 0,
|
|
24
|
-
lineHeight: 1,
|
|
25
|
-
},
|
|
26
|
-
field2: {
|
|
27
|
-
type: 'text',
|
|
28
|
-
position: { x: 20, y: 35 },
|
|
29
|
-
width: 100,
|
|
30
|
-
height: 40,
|
|
31
|
-
alignment: 'left',
|
|
32
|
-
fontSize: 20,
|
|
33
|
-
characterSpacing: 0,
|
|
34
|
-
lineHeight: 1,
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
],
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
const getTemplate = () => {
|
|
41
|
-
return JSON.parse(localStorage.getItem('template')) || getSampleTemplate();
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
const getFont = async () => {
|
|
45
|
-
const SauceHanSansJP = await fetch('/SauceHanSansJP.ttf').then((res) => res.arrayBuffer());
|
|
46
|
-
const SauceHanSerifJP = await fetch('/SauceHanSerifJP.ttf').then((res) => res.arrayBuffer());
|
|
47
|
-
return {
|
|
48
|
-
'Noto Sans JP': { data: SauceHanSansJP, fallback: false },
|
|
49
|
-
'Noto Serif JP': { data: SauceHanSerifJP, fallback: true },
|
|
50
|
-
};
|
|
51
|
-
};
|
package/public/index.html
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<title>Webpack App</title>
|
|
6
|
-
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
7
|
-
</head>
|
|
8
|
-
<body style="margin: 0">
|
|
9
|
-
<div>
|
|
10
|
-
<a href="./Designer.html">Designer</a>
|
|
11
|
-
/
|
|
12
|
-
<a href="./Form.html">Form</a>
|
|
13
|
-
/
|
|
14
|
-
<a href="./Viewer.html">Viewer</a>
|
|
15
|
-
</div>
|
|
16
|
-
<div>
|
|
17
|
-
<button onclick="fetchTemplates()">fetchTemplates</button>
|
|
18
|
-
/
|
|
19
|
-
<button onclick="setTemplate()">setTemplate</button>
|
|
20
|
-
</div>
|
|
21
|
-
</body>
|
|
22
|
-
<script>
|
|
23
|
-
function fetchTemplates() {
|
|
24
|
-
fetch('https://api.labelmake.jp/v1/templates?team=labelmake', {
|
|
25
|
-
method: 'GET',
|
|
26
|
-
headers: {
|
|
27
|
-
'X-Labelmake-API-Token': 'c02ee5a0-2590-11ec-bcde-1b4557d524f3',
|
|
28
|
-
},
|
|
29
|
-
})
|
|
30
|
-
.then((response) => response.json())
|
|
31
|
-
.then((json) => {
|
|
32
|
-
alert('saved');
|
|
33
|
-
localStorage.setItem('templates', JSON.stringify(json));
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function setTemplate() {
|
|
38
|
-
const input = window.prompt('enter index');
|
|
39
|
-
const templates = JSON.parse(localStorage.getItem('templates'));
|
|
40
|
-
let template = null;
|
|
41
|
-
if (isNaN(input)) {
|
|
42
|
-
template = templates.find((t) => t.id === input);
|
|
43
|
-
} else {
|
|
44
|
-
template = templates[input];
|
|
45
|
-
}
|
|
46
|
-
if (!template) {
|
|
47
|
-
alert('invalid input');
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
alert('set');
|
|
51
|
-
localStorage.setItem('template', JSON.stringify(template));
|
|
52
|
-
}
|
|
53
|
-
</script>
|
|
54
|
-
</html>
|