@pdfme/ui 1.0.0-beta.1 → 1.0.0-beta.10
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/coverage/clover.xml +6 -0
- package/coverage/coverage-final.json +1 -0
- package/coverage/lcov-report/base.css +224 -0
- package/coverage/lcov-report/block-navigation.js +87 -0
- package/coverage/lcov-report/favicon.png +0 -0
- package/coverage/lcov-report/index.html +101 -0
- package/coverage/lcov-report/prettify.css +1 -0
- package/coverage/lcov-report/prettify.js +2 -0
- package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
- package/coverage/lcov-report/sorter.js +196 -0
- package/coverage/lcov.info +0 -0
- package/dist/index.js +3 -0
- package/dist/{@pdfme/ui.js.LICENSE.txt → index.js.LICENSE.txt} +3 -1
- package/dist/index.js.map +1 -0
- package/dist/types/{ui/src/Designer.d.ts → Designer.d.ts} +0 -0
- package/dist/types/{ui/src/Form.d.ts → Form.d.ts} +0 -0
- package/dist/types/{ui/src/Viewer.d.ts → Viewer.d.ts} +0 -0
- package/dist/types/{ui/src/class.d.ts → class.d.ts} +5 -4
- package/dist/types/{ui/src/components → components}/Designer/Main/Guides.d.ts +0 -0
- package/dist/types/{ui/src/components → components}/Designer/Main/Mask.d.ts +0 -0
- package/dist/types/{ui/src/components → components}/Designer/Main/Moveable.d.ts +1 -1
- package/dist/types/{ui/src/components → components}/Designer/Main/Selecto.d.ts +0 -0
- package/dist/types/{ui/src/components → components}/Designer/Main/index.d.ts +0 -0
- package/dist/types/{ui/src/components → components}/Designer/Sidebar/DetailView/ExampleInputEditor.d.ts +4 -1
- package/dist/types/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts +6 -0
- package/dist/types/{ui/src/components → components}/Designer/Sidebar/DetailView/TextPropEditor.d.ts +4 -1
- package/dist/types/{ui/src/components → components}/Designer/Sidebar/DetailView/TypeAndKeyEditor.d.ts +4 -1
- package/dist/types/components/Designer/Sidebar/DetailView/index.d.ts +6 -0
- package/dist/types/components/Designer/Sidebar/ListView/Item.d.ts +25 -0
- package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableContainer.d.ts +3 -0
- package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableItem.d.ts +14 -0
- package/dist/types/{ui/src/components/Designer/Sidebar/ListView.d.ts → components/Designer/Sidebar/ListView/index.d.ts} +2 -2
- package/dist/types/{ui/src/components → components}/Designer/Sidebar/index.d.ts +2 -7
- package/dist/types/{ui/src/components → components}/Designer/index.d.ts +0 -1
- package/dist/types/{ui/src/components → components}/Divider.d.ts +0 -0
- package/dist/types/{ui/src/components → components}/Error.d.ts +0 -1
- package/dist/types/{ui/src/components → components}/Paper.d.ts +0 -0
- package/dist/types/{ui/src/components → components}/Preview/Pager/Page.d.ts +0 -1
- package/dist/types/{ui/src/components → components}/Preview/Pager/Unit.d.ts +0 -1
- package/dist/types/{ui/src/components → components}/Preview/index.d.ts +0 -1
- package/dist/types/{ui/src/components → components}/Root.d.ts +0 -0
- package/dist/types/{ui/src/components → components}/Schemas/BarcodeSchema.d.ts +0 -0
- package/dist/types/{ui/src/components → components}/Schemas/ImageSchema.d.ts +0 -0
- package/dist/types/{ui/src/components → components}/Schemas/SchemaUI.d.ts +1 -1
- package/dist/types/{ui/src/components → components}/Schemas/TextSchema.d.ts +0 -0
- package/dist/types/{ui/src/components → components}/Spinner.d.ts +0 -0
- package/dist/types/{ui/src/constants.d.ts → constants.d.ts} +1 -0
- package/dist/types/{ui/src/contexts.d.ts → contexts.d.ts} +1 -1
- package/dist/types/{ui/src/helper.d.ts → helper.d.ts} +1 -1
- package/dist/types/{ui/src/hooks.d.ts → hooks.d.ts} +1 -0
- package/dist/types/{ui/src/i18n.d.ts → i18n.d.ts} +4 -2
- package/dist/types/index.d.ts +6 -0
- package/package.json +14 -8
- package/src/Designer.tsx +2 -1
- package/src/Form.tsx +1 -0
- package/src/Viewer.tsx +1 -0
- package/src/assets/icons/align-horizontal-center.svg +1 -0
- package/src/assets/icons/align-horizontal-left.svg +1 -0
- package/src/assets/icons/align-horizontal-right.svg +1 -0
- package/src/assets/icons/align-vertical-bottom.svg +1 -0
- package/src/assets/icons/align-vertical-middle.svg +1 -0
- package/src/assets/icons/align-vertical-top.svg +1 -0
- package/src/assets/icons/close.svg +4 -0
- package/src/assets/icons/horizontal-distribute.svg +1 -0
- package/src/assets/icons/vertical-distribute.svg +1 -0
- package/src/assets/imageExample.png +0 -0
- package/src/class.ts +20 -8
- package/src/components/Designer/Main/Moveable.tsx +1 -1
- package/src/components/Designer/Main/index.tsx +22 -16
- package/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx +28 -6
- package/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx +115 -24
- package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx +36 -6
- package/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx +14 -6
- package/src/components/Designer/Sidebar/DetailView/index.tsx +21 -16
- package/src/components/Designer/Sidebar/ListView/Item.tsx +113 -0
- package/src/components/Designer/Sidebar/ListView/SelectableSortableContainer.tsx +162 -0
- package/src/components/Designer/Sidebar/ListView/SelectableSortableItem.tsx +78 -0
- package/src/components/Designer/Sidebar/ListView/index.tsx +119 -0
- package/src/components/Designer/Sidebar/index.tsx +30 -14
- package/src/components/Designer/index.tsx +12 -24
- package/src/components/Error.tsx +2 -2
- package/src/components/Paper.tsx +10 -3
- package/src/components/Preview/Pager/Page.tsx +1 -1
- package/src/components/Preview/Pager/Unit.tsx +1 -1
- package/src/components/Preview/index.tsx +3 -4
- package/src/components/Root.tsx +2 -7
- package/src/components/Schemas/BarcodeSchema.tsx +40 -24
- package/src/components/Schemas/ImageSchema.tsx +71 -66
- package/src/components/Schemas/TextSchema.tsx +1 -2
- package/src/constants.ts +2 -0
- package/src/helper.ts +44 -38
- package/src/hooks.ts +11 -0
- package/src/i18n.ts +10 -7
- package/src/index.ts +5 -41
- package/tsconfig.json +2 -1
- package/webpack.config.js +1 -20
- package/dist/@pdfme/ui.js +0 -3
- package/dist/@pdfme/ui.js.map +0 -1
- package/dist/types/common/src/barcode.d.ts +0 -2
- package/dist/types/common/src/constants.d.ts +0 -6
- package/dist/types/common/src/helper.d.ts +0 -15
- package/dist/types/common/src/index.d.ts +0 -4
- package/dist/types/common/src/schema.d.ts +0 -3613
- package/dist/types/common/src/type.d.ts +0 -64
- package/dist/types/common/src/utils.d.ts +0 -12
- package/dist/types/ui/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts +0 -3
- package/dist/types/ui/src/components/Designer/Sidebar/DetailView/index.d.ts +0 -3
- package/dist/types/ui/src/index.d.ts +0 -5
- package/dist/types/ui/src/libs/class.d.ts +0 -84
- package/dist/types/ui/src/libs/contexts.d.ts +0 -7
- package/dist/types/ui/src/libs/helper.d.ts +0 -64
- package/dist/types/ui/src/libs/hooks.d.ts +0 -26
- package/dist/types/ui/src/libs/i18n.d.ts +0 -30
- package/dist/types/ui/src/libs/ui.d.ts +0 -64
- 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
- package/src/components/Designer/Sidebar/ListView.tsx +0 -180
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>
|
@@ -1,180 +0,0 @@
|
|
1
|
-
import React, { useContext } from 'react';
|
2
|
-
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
|
3
|
-
import { SchemaForUI, Size } from '@pdfme/common';
|
4
|
-
import { ZOOM, RULER_HEIGHT } from '../../../constants';
|
5
|
-
import { I18nContext } from '../../../contexts';
|
6
|
-
import Divider from '../../Divider';
|
7
|
-
import dragIcon from '../../../assets/icons/drag.svg';
|
8
|
-
import warningIcon from '../../../assets/icons/warning.svg';
|
9
|
-
import { SidebarProps } from '.';
|
10
|
-
|
11
|
-
const isTouchable = () => true;
|
12
|
-
|
13
|
-
const DragHandle = SortableHandle(() => (
|
14
|
-
<button style={{ padding: 0, background: 'none', border: 'none', display: 'flex' }}>
|
15
|
-
<img style={{ cursor: 'grab' }} src={dragIcon} width={15} alt="Drag icon" />
|
16
|
-
</button>
|
17
|
-
));
|
18
|
-
|
19
|
-
const SortableItem = SortableElement(
|
20
|
-
(props: { schemas: SchemaForUI[]; schema: SchemaForUI; onEdit: (id: string) => void }) => {
|
21
|
-
const { schemas, schema, onEdit } = props;
|
22
|
-
const i18n = useContext(I18nContext);
|
23
|
-
|
24
|
-
const sc = schema;
|
25
|
-
let status: '' | 'is-warning' | 'is-danger' = '';
|
26
|
-
if (!sc.key) {
|
27
|
-
status = 'is-warning';
|
28
|
-
} else if (schemas.find((s) => sc.key && s.key === sc.key && s.id !== sc.id)) {
|
29
|
-
status = 'is-danger';
|
30
|
-
}
|
31
|
-
|
32
|
-
const touchable = isTouchable();
|
33
|
-
|
34
|
-
const getTitle = () => {
|
35
|
-
if (status === 'is-warning') {
|
36
|
-
return i18n('plsInputName');
|
37
|
-
}
|
38
|
-
if (status === 'is-danger') {
|
39
|
-
return i18n('fieldMustUniq');
|
40
|
-
}
|
41
|
-
|
42
|
-
return i18n('edit');
|
43
|
-
};
|
44
|
-
|
45
|
-
return (
|
46
|
-
<div
|
47
|
-
key={sc.id}
|
48
|
-
style={{
|
49
|
-
paddingLeft: 5,
|
50
|
-
display: 'flex',
|
51
|
-
alignItems: 'center',
|
52
|
-
justifyContent: 'space-between',
|
53
|
-
}}
|
54
|
-
>
|
55
|
-
<DragHandle />
|
56
|
-
<button
|
57
|
-
disabled={!touchable}
|
58
|
-
className={`${status}`}
|
59
|
-
style={{
|
60
|
-
padding: 5,
|
61
|
-
margin: 5,
|
62
|
-
width: '100%',
|
63
|
-
display: 'flex',
|
64
|
-
background: 'none',
|
65
|
-
border: 'none',
|
66
|
-
textAlign: 'left',
|
67
|
-
cursor: 'pointer',
|
68
|
-
}}
|
69
|
-
onClick={() => onEdit(sc.id)}
|
70
|
-
title={getTitle()}
|
71
|
-
>
|
72
|
-
<span
|
73
|
-
style={{
|
74
|
-
marginRight: '1rem',
|
75
|
-
width: 180,
|
76
|
-
overflow: 'hidden',
|
77
|
-
whiteSpace: 'nowrap',
|
78
|
-
textOverflow: 'ellipsis',
|
79
|
-
}}
|
80
|
-
>
|
81
|
-
{status === '' ? (
|
82
|
-
sc.key
|
83
|
-
) : (
|
84
|
-
<span style={{ display: 'flex', alignItems: 'center' }}>
|
85
|
-
<img
|
86
|
-
alt="Warning icon"
|
87
|
-
src={warningIcon}
|
88
|
-
width={15}
|
89
|
-
style={{ marginRight: '0.5rem' }}
|
90
|
-
/>
|
91
|
-
{status === 'is-warning' ? i18n('noKeyName') : sc.key}
|
92
|
-
{status === 'is-danger' ? i18n('notUniq') : ''}
|
93
|
-
</span>
|
94
|
-
)}
|
95
|
-
</span>
|
96
|
-
</button>
|
97
|
-
</div>
|
98
|
-
);
|
99
|
-
}
|
100
|
-
);
|
101
|
-
|
102
|
-
const SortableList = SortableContainer(
|
103
|
-
(props: {
|
104
|
-
schemas: SchemaForUI[];
|
105
|
-
onEdit: (id: string) => void;
|
106
|
-
size: Size;
|
107
|
-
hoveringSchemaId: string | null;
|
108
|
-
onChangeHoveringSchemaId: (id: string | null) => void;
|
109
|
-
}) => {
|
110
|
-
const { schemas, onEdit, size, hoveringSchemaId, onChangeHoveringSchemaId } = props;
|
111
|
-
const i18n = useContext(I18nContext);
|
112
|
-
|
113
|
-
return (
|
114
|
-
<div style={{ maxHeight: size.height - RULER_HEIGHT * ZOOM - 125, overflowY: 'auto' }}>
|
115
|
-
{schemas.length > 0 ? (
|
116
|
-
schemas.map((s, i) => (
|
117
|
-
<div
|
118
|
-
key={s.id}
|
119
|
-
style={{
|
120
|
-
border: `1px solid ${s.id === hoveringSchemaId ? '#18a0fb' : 'transparent'}`,
|
121
|
-
}}
|
122
|
-
onMouseEnter={() => onChangeHoveringSchemaId(s.id)}
|
123
|
-
onMouseLeave={() => onChangeHoveringSchemaId(null)}
|
124
|
-
>
|
125
|
-
<SortableItem
|
126
|
-
disabled={!isTouchable()}
|
127
|
-
index={i}
|
128
|
-
schemas={schemas}
|
129
|
-
schema={s}
|
130
|
-
onEdit={onEdit}
|
131
|
-
/>
|
132
|
-
</div>
|
133
|
-
))
|
134
|
-
) : (
|
135
|
-
<p style={{ textAlign: 'center' }}>{i18n('plsAddNewField')}</p>
|
136
|
-
)}
|
137
|
-
</div>
|
138
|
-
);
|
139
|
-
}
|
140
|
-
);
|
141
|
-
|
142
|
-
const ListView = (
|
143
|
-
props: Pick<
|
144
|
-
SidebarProps,
|
145
|
-
'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'
|
146
|
-
>
|
147
|
-
) => {
|
148
|
-
const { schemas, onSortEnd, onEdit, size, hoveringSchemaId, onChangeHoveringSchemaId } = props;
|
149
|
-
const i18n = useContext(I18nContext);
|
150
|
-
|
151
|
-
return (
|
152
|
-
<aside>
|
153
|
-
<div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
|
154
|
-
<p style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
|
155
|
-
{i18n('fieldsList')}
|
156
|
-
</p>
|
157
|
-
</div>
|
158
|
-
<Divider />
|
159
|
-
<SortableList
|
160
|
-
size={size}
|
161
|
-
hoveringSchemaId={hoveringSchemaId}
|
162
|
-
onChangeHoveringSchemaId={onChangeHoveringSchemaId}
|
163
|
-
updateBeforeSortStart={(node: any) => {
|
164
|
-
if (node.node.style) {
|
165
|
-
node.node.style.zIndex = '9999';
|
166
|
-
}
|
167
|
-
}}
|
168
|
-
useDragHandle
|
169
|
-
axis="y"
|
170
|
-
lockAxis="y"
|
171
|
-
schemas={schemas}
|
172
|
-
onSortEnd={onSortEnd}
|
173
|
-
onEdit={onEdit}
|
174
|
-
/>
|
175
|
-
<Divider />
|
176
|
-
</aside>
|
177
|
-
);
|
178
|
-
};
|
179
|
-
|
180
|
-
export default ListView;
|