@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.
Files changed (123) hide show
  1. package/README.md +8 -7
  2. package/coverage/clover.xml +6 -0
  3. package/coverage/coverage-final.json +1 -0
  4. package/coverage/lcov-report/base.css +224 -0
  5. package/coverage/lcov-report/block-navigation.js +87 -0
  6. package/coverage/lcov-report/favicon.png +0 -0
  7. package/coverage/lcov-report/index.html +101 -0
  8. package/coverage/lcov-report/prettify.css +1 -0
  9. package/coverage/lcov-report/prettify.js +2 -0
  10. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  11. package/coverage/lcov-report/sorter.js +196 -0
  12. package/coverage/lcov.info +0 -0
  13. package/dist/index.js +3 -0
  14. package/dist/{@pdfme/ui.js.LICENSE.txt → index.js.LICENSE.txt} +3 -1
  15. package/dist/index.js.map +1 -0
  16. package/dist/types/{ui/src/Designer.d.ts → Designer.d.ts} +0 -0
  17. package/dist/types/{ui/src/Form.d.ts → Form.d.ts} +0 -0
  18. package/dist/types/{ui/src/Viewer.d.ts → Viewer.d.ts} +0 -0
  19. package/dist/types/{ui/src/class.d.ts → class.d.ts} +5 -4
  20. package/dist/types/{ui/src/components → components}/Designer/Main/Guides.d.ts +0 -0
  21. package/dist/types/{ui/src/components → components}/Designer/Main/Mask.d.ts +0 -0
  22. package/dist/types/{ui/src/components → components}/Designer/Main/Moveable.d.ts +1 -1
  23. package/dist/types/{ui/src/components → components}/Designer/Main/Selecto.d.ts +0 -0
  24. package/dist/types/{ui/src/components → components}/Designer/Main/index.d.ts +0 -0
  25. package/dist/types/{ui/src/components → components}/Designer/Sidebar/DetailView/ExampleInputEditor.d.ts +4 -1
  26. package/dist/types/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts +6 -0
  27. package/dist/types/{ui/src/components → components}/Designer/Sidebar/DetailView/TextPropEditor.d.ts +4 -1
  28. package/dist/types/{ui/src/components → components}/Designer/Sidebar/DetailView/TypeAndKeyEditor.d.ts +4 -1
  29. package/dist/types/components/Designer/Sidebar/DetailView/index.d.ts +6 -0
  30. package/dist/types/components/Designer/Sidebar/ListView/Item.d.ts +25 -0
  31. package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableContainer.d.ts +3 -0
  32. package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableItem.d.ts +14 -0
  33. package/dist/types/{ui/src/components/Designer/Sidebar/ListView.d.ts → components/Designer/Sidebar/ListView/index.d.ts} +2 -2
  34. package/dist/types/{ui/src/components → components}/Designer/Sidebar/index.d.ts +2 -7
  35. package/dist/types/{ui/src/components → components}/Designer/index.d.ts +0 -1
  36. package/dist/types/{ui/src/components → components}/Divider.d.ts +0 -0
  37. package/dist/types/{ui/src/components → components}/Error.d.ts +0 -1
  38. package/dist/types/{ui/src/components → components}/Paper.d.ts +0 -0
  39. package/dist/types/{ui/src/components → components}/Preview/Pager/Page.d.ts +0 -1
  40. package/dist/types/{ui/src/components → components}/Preview/Pager/Unit.d.ts +0 -1
  41. package/dist/types/{ui/src/components → components}/Preview/index.d.ts +0 -1
  42. package/dist/types/{ui/src/components → components}/Root.d.ts +0 -0
  43. package/dist/types/{ui/src/components → components}/Schemas/BarcodeSchema.d.ts +0 -0
  44. package/dist/types/{ui/src/components → components}/Schemas/ImageSchema.d.ts +0 -0
  45. package/dist/types/{ui/src/components → components}/Schemas/SchemaUI.d.ts +1 -1
  46. package/dist/types/{ui/src/components → components}/Schemas/TextSchema.d.ts +0 -0
  47. package/dist/types/{ui/src/components → components}/Spinner.d.ts +0 -0
  48. package/dist/types/{ui/src/constants.d.ts → constants.d.ts} +1 -0
  49. package/dist/types/{ui/src/contexts.d.ts → contexts.d.ts} +1 -1
  50. package/dist/types/{ui/src/helper.d.ts → helper.d.ts} +1 -1
  51. package/dist/types/{ui/src/hooks.d.ts → hooks.d.ts} +1 -0
  52. package/dist/types/{ui/src/i18n.d.ts → i18n.d.ts} +4 -2
  53. package/dist/types/index.d.ts +6 -0
  54. package/package.json +14 -8
  55. package/src/Designer.tsx +2 -1
  56. package/src/Form.tsx +1 -0
  57. package/src/Viewer.tsx +1 -0
  58. package/src/assets/icons/align-horizontal-center.svg +1 -0
  59. package/src/assets/icons/align-horizontal-left.svg +1 -0
  60. package/src/assets/icons/align-horizontal-right.svg +1 -0
  61. package/src/assets/icons/align-vertical-bottom.svg +1 -0
  62. package/src/assets/icons/align-vertical-middle.svg +1 -0
  63. package/src/assets/icons/align-vertical-top.svg +1 -0
  64. package/src/assets/icons/close.svg +4 -0
  65. package/src/assets/icons/horizontal-distribute.svg +1 -0
  66. package/src/assets/icons/vertical-distribute.svg +1 -0
  67. package/src/assets/imageExample.png +0 -0
  68. package/src/class.ts +20 -8
  69. package/src/components/Designer/Main/Moveable.tsx +1 -1
  70. package/src/components/Designer/Main/index.tsx +22 -16
  71. package/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx +28 -6
  72. package/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx +115 -24
  73. package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx +36 -6
  74. package/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx +14 -6
  75. package/src/components/Designer/Sidebar/DetailView/index.tsx +21 -16
  76. package/src/components/Designer/Sidebar/ListView/Item.tsx +113 -0
  77. package/src/components/Designer/Sidebar/ListView/SelectableSortableContainer.tsx +162 -0
  78. package/src/components/Designer/Sidebar/ListView/SelectableSortableItem.tsx +78 -0
  79. package/src/components/Designer/Sidebar/ListView/index.tsx +119 -0
  80. package/src/components/Designer/Sidebar/index.tsx +30 -14
  81. package/src/components/Designer/index.tsx +12 -24
  82. package/src/components/Error.tsx +2 -2
  83. package/src/components/Paper.tsx +10 -3
  84. package/src/components/Preview/Pager/Page.tsx +1 -1
  85. package/src/components/Preview/Pager/Unit.tsx +1 -1
  86. package/src/components/Preview/index.tsx +3 -4
  87. package/src/components/Root.tsx +2 -7
  88. package/src/components/Schemas/BarcodeSchema.tsx +40 -24
  89. package/src/components/Schemas/ImageSchema.tsx +71 -66
  90. package/src/components/Schemas/TextSchema.tsx +1 -2
  91. package/src/constants.ts +2 -0
  92. package/src/helper.ts +44 -38
  93. package/src/hooks.ts +11 -0
  94. package/src/i18n.ts +10 -7
  95. package/src/index.ts +5 -41
  96. package/tsconfig.json +2 -1
  97. package/webpack.config.js +1 -20
  98. package/dist/@pdfme/ui.js +0 -3
  99. package/dist/@pdfme/ui.js.map +0 -1
  100. package/dist/types/common/src/barcode.d.ts +0 -2
  101. package/dist/types/common/src/constants.d.ts +0 -6
  102. package/dist/types/common/src/helper.d.ts +0 -15
  103. package/dist/types/common/src/index.d.ts +0 -4
  104. package/dist/types/common/src/schema.d.ts +0 -3613
  105. package/dist/types/common/src/type.d.ts +0 -64
  106. package/dist/types/common/src/utils.d.ts +0 -12
  107. package/dist/types/ui/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts +0 -3
  108. package/dist/types/ui/src/components/Designer/Sidebar/DetailView/index.d.ts +0 -3
  109. package/dist/types/ui/src/index.d.ts +0 -5
  110. package/dist/types/ui/src/libs/class.d.ts +0 -84
  111. package/dist/types/ui/src/libs/contexts.d.ts +0 -7
  112. package/dist/types/ui/src/libs/helper.d.ts +0 -64
  113. package/dist/types/ui/src/libs/hooks.d.ts +0 -26
  114. package/dist/types/ui/src/libs/i18n.d.ts +0 -30
  115. package/dist/types/ui/src/libs/ui.d.ts +0 -64
  116. package/public/Designer.html +0 -90
  117. package/public/Form.html +0 -74
  118. package/public/SauceHanSansJP.ttf +0 -0
  119. package/public/SauceHanSerifJP.ttf +0 -0
  120. package/public/Viewer.html +0 -73
  121. package/public/helper.js +0 -51
  122. package/public/index.html +0 -54
  123. 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;