@conuti-das/prince-ui-forms 1.0.1
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/LICENSE +21 -0
- package/dist/index.css +242 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.ts +235 -0
- package/dist/index.js +1378 -0
- package/dist/index.js.map +1 -0
- package/package.json +78 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 conuti
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
/* src/styles/base.css */
|
|
2
|
+
.prn-form {
|
|
3
|
+
display: block;
|
|
4
|
+
width: 100%;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
/* src/renderer/FormRenderer.css */
|
|
8
|
+
.prn-form-renderer {
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
gap: 20px;
|
|
12
|
+
}
|
|
13
|
+
.prn-form-fields {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
gap: 16px;
|
|
17
|
+
}
|
|
18
|
+
.prn-form-actions {
|
|
19
|
+
display: flex;
|
|
20
|
+
justify-content: flex-end;
|
|
21
|
+
gap: 8px;
|
|
22
|
+
align-items: center;
|
|
23
|
+
}
|
|
24
|
+
.prn-form-text {
|
|
25
|
+
font: var(--prn-text-body);
|
|
26
|
+
color: var(--prn-label-2);
|
|
27
|
+
line-height: 1.5;
|
|
28
|
+
}
|
|
29
|
+
.prn-form-spacer {
|
|
30
|
+
height: 12px;
|
|
31
|
+
}
|
|
32
|
+
.prn-form-separator {
|
|
33
|
+
margin: 4px 0;
|
|
34
|
+
}
|
|
35
|
+
.prn-form-group {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
gap: 16px;
|
|
39
|
+
border: 1px solid var(--prn-separator);
|
|
40
|
+
border-radius: var(--prn-radius-md);
|
|
41
|
+
padding: 16px;
|
|
42
|
+
margin: 0;
|
|
43
|
+
}
|
|
44
|
+
.prn-form-group-legend {
|
|
45
|
+
font: var(--prn-text-subhead);
|
|
46
|
+
font-weight: 600;
|
|
47
|
+
color: var(--prn-label);
|
|
48
|
+
padding: 0 6px;
|
|
49
|
+
}
|
|
50
|
+
.prn-form-select-wrap {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
gap: 4px;
|
|
54
|
+
}
|
|
55
|
+
.prn-form-hint {
|
|
56
|
+
font: var(--prn-text-footnote);
|
|
57
|
+
color: var(--prn-label-3);
|
|
58
|
+
}
|
|
59
|
+
.prn-form-error {
|
|
60
|
+
font: var(--prn-text-footnote);
|
|
61
|
+
color: var(--prn-red);
|
|
62
|
+
}
|
|
63
|
+
.prn-form-taglist {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
gap: 8px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* src/builder/FormBuilder.css */
|
|
70
|
+
.prn-form-builder {
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
gap: 16px;
|
|
74
|
+
container-type: inline-size;
|
|
75
|
+
}
|
|
76
|
+
.prn-fb-toolbar {
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
justify-content: space-between;
|
|
80
|
+
gap: 12px;
|
|
81
|
+
}
|
|
82
|
+
.prn-fb-grid {
|
|
83
|
+
display: grid;
|
|
84
|
+
grid-template-columns: 180px minmax(220px, 1fr) 280px minmax(220px, 1fr);
|
|
85
|
+
gap: 16px;
|
|
86
|
+
align-items: start;
|
|
87
|
+
}
|
|
88
|
+
@container (max-width: 900px) {
|
|
89
|
+
.prn-fb-grid {
|
|
90
|
+
grid-template-columns: 1fr 1fr;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
.prn-fb-palette-list {
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
gap: 6px;
|
|
97
|
+
}
|
|
98
|
+
.prn-fb-palette-item {
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: center;
|
|
101
|
+
gap: 10px;
|
|
102
|
+
width: 100%;
|
|
103
|
+
padding: 9px 12px;
|
|
104
|
+
border: 1px solid var(--prn-separator);
|
|
105
|
+
border-radius: var(--prn-radius-md);
|
|
106
|
+
background: var(--prn-bg-elevated);
|
|
107
|
+
color: var(--prn-label);
|
|
108
|
+
font: var(--prn-text-subhead);
|
|
109
|
+
text-align: left;
|
|
110
|
+
cursor: grab;
|
|
111
|
+
transition: background var(--prn-dur-fast) var(--prn-ease-standard), border-color var(--prn-dur-fast) var(--prn-ease-standard);
|
|
112
|
+
}
|
|
113
|
+
.prn-fb-palette-item:hover {
|
|
114
|
+
background: var(--prn-accent-soft);
|
|
115
|
+
border-color: var(--prn-accent);
|
|
116
|
+
}
|
|
117
|
+
.prn-fb-palette-item:active {
|
|
118
|
+
cursor: grabbing;
|
|
119
|
+
}
|
|
120
|
+
.prn-fb-palette-glyph {
|
|
121
|
+
display: inline-flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
justify-content: center;
|
|
124
|
+
width: 22px;
|
|
125
|
+
height: 22px;
|
|
126
|
+
border-radius: var(--prn-radius-sm);
|
|
127
|
+
background: var(--prn-accent-soft);
|
|
128
|
+
color: var(--prn-accent-strong);
|
|
129
|
+
font-size: 13px;
|
|
130
|
+
flex-shrink: 0;
|
|
131
|
+
}
|
|
132
|
+
.prn-fb-canvas-drop {
|
|
133
|
+
min-height: 120px;
|
|
134
|
+
}
|
|
135
|
+
.prn-fb-canvas-list {
|
|
136
|
+
list-style: none;
|
|
137
|
+
margin: 0;
|
|
138
|
+
padding: 0;
|
|
139
|
+
display: flex;
|
|
140
|
+
flex-direction: column;
|
|
141
|
+
gap: 8px;
|
|
142
|
+
}
|
|
143
|
+
.prn-fb-canvas-item {
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
gap: 10px;
|
|
147
|
+
padding: 10px 12px;
|
|
148
|
+
border: 1px solid var(--prn-separator);
|
|
149
|
+
border-radius: var(--prn-radius-md);
|
|
150
|
+
background: var(--prn-bg-elevated);
|
|
151
|
+
cursor: grab;
|
|
152
|
+
transition: border-color var(--prn-dur-fast) var(--prn-ease-standard), box-shadow var(--prn-dur-fast) var(--prn-ease-standard);
|
|
153
|
+
}
|
|
154
|
+
.prn-fb-canvas-item[data-selected] {
|
|
155
|
+
border-color: var(--prn-accent);
|
|
156
|
+
box-shadow: 0 0 0 2px var(--prn-accent-soft);
|
|
157
|
+
}
|
|
158
|
+
.prn-fb-canvas-item[data-dropbefore] {
|
|
159
|
+
border-top: 2px solid var(--prn-accent);
|
|
160
|
+
}
|
|
161
|
+
.prn-fb-item-type {
|
|
162
|
+
font: var(--prn-text-caption);
|
|
163
|
+
color: var(--prn-accent-strong);
|
|
164
|
+
background: var(--prn-accent-soft);
|
|
165
|
+
border-radius: var(--prn-radius-pill);
|
|
166
|
+
padding: 2px 8px;
|
|
167
|
+
flex-shrink: 0;
|
|
168
|
+
}
|
|
169
|
+
.prn-fb-item-label {
|
|
170
|
+
flex: 1;
|
|
171
|
+
font: var(--prn-text-subhead);
|
|
172
|
+
color: var(--prn-label);
|
|
173
|
+
overflow: hidden;
|
|
174
|
+
text-overflow: ellipsis;
|
|
175
|
+
white-space: nowrap;
|
|
176
|
+
}
|
|
177
|
+
.prn-fb-item-remove {
|
|
178
|
+
flex-shrink: 0;
|
|
179
|
+
}
|
|
180
|
+
.prn-fb-props-form {
|
|
181
|
+
display: flex;
|
|
182
|
+
flex-direction: column;
|
|
183
|
+
gap: 12px;
|
|
184
|
+
}
|
|
185
|
+
.prn-fb-props-row {
|
|
186
|
+
display: flex;
|
|
187
|
+
gap: 10px;
|
|
188
|
+
align-items: flex-end;
|
|
189
|
+
}
|
|
190
|
+
.prn-fb-props-row > * {
|
|
191
|
+
flex: 1;
|
|
192
|
+
}
|
|
193
|
+
.prn-fb-props-empty {
|
|
194
|
+
color: var(--prn-label-3);
|
|
195
|
+
font: var(--prn-text-subhead);
|
|
196
|
+
margin: 0;
|
|
197
|
+
}
|
|
198
|
+
.prn-fb-options {
|
|
199
|
+
display: flex;
|
|
200
|
+
flex-direction: column;
|
|
201
|
+
gap: 8px;
|
|
202
|
+
border-top: 1px solid var(--prn-separator);
|
|
203
|
+
padding-top: 10px;
|
|
204
|
+
}
|
|
205
|
+
.prn-fb-options-head {
|
|
206
|
+
font: var(--prn-text-subhead);
|
|
207
|
+
font-weight: 600;
|
|
208
|
+
color: var(--prn-label);
|
|
209
|
+
}
|
|
210
|
+
.prn-fb-delete {
|
|
211
|
+
margin-top: 4px;
|
|
212
|
+
}
|
|
213
|
+
.prn-fb-expert {
|
|
214
|
+
display: flex;
|
|
215
|
+
flex-direction: column;
|
|
216
|
+
gap: 12px;
|
|
217
|
+
}
|
|
218
|
+
.prn-fb-expert-host {
|
|
219
|
+
height: 600px;
|
|
220
|
+
width: 100%;
|
|
221
|
+
border: 1px solid var(--prn-separator);
|
|
222
|
+
border-radius: var(--prn-radius-md);
|
|
223
|
+
overflow: hidden;
|
|
224
|
+
background: var(--prn-bg-elevated);
|
|
225
|
+
}
|
|
226
|
+
.prn-fb-expert-host[data-status=empty] {
|
|
227
|
+
display: none;
|
|
228
|
+
}
|
|
229
|
+
.prn-fb-expert-host .fjs-container,
|
|
230
|
+
.prn-fb-expert-host .fjs-editor-container {
|
|
231
|
+
background: var(--prn-bg-elevated);
|
|
232
|
+
color: var(--prn-label);
|
|
233
|
+
}
|
|
234
|
+
.prn-fb-expert-host .fjs-palette,
|
|
235
|
+
.prn-fb-expert-host .fjs-properties-panel {
|
|
236
|
+
background: var(--prn-bg-sidebar);
|
|
237
|
+
border-color: var(--prn-separator);
|
|
238
|
+
}
|
|
239
|
+
.prn-fb-expert-host .fjs-form-field {
|
|
240
|
+
color: var(--prn-label);
|
|
241
|
+
}
|
|
242
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/styles/base.css","../src/renderer/FormRenderer.css","../src/builder/FormBuilder.css"],"sourcesContent":["/**\n * Basis-Styles des prince-ui-forms-Pakets.\n * Renderer/Builder stylen ausschließlich über --prn-* Tokens; ein etwaiger\n * form-js-Experten-Fallback wird per Token-CSS übertüncht (kein Carbon-Look).\n */\n.prn-form {\n display: block;\n width: 100%;\n}\n","/* FormRenderer — Layout über prince-ui-Felder. Nur --prn-*-Tokens. */\n\n.prn-form-renderer {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.prn-form-fields {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.prn-form-actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n align-items: center;\n}\n\n/* Statischer Text. */\n.prn-form-text {\n font: var(--prn-text-body);\n color: var(--prn-label-2);\n line-height: 1.5;\n}\n\n/* Spacer. */\n.prn-form-spacer {\n height: 12px;\n}\n\n/* Separator (zusätzlicher Abstand). */\n.prn-form-separator {\n margin: 4px 0;\n}\n\n/* Gruppe (verschachtelte Felder). */\n.prn-form-group {\n display: flex;\n flex-direction: column;\n gap: 16px;\n border: 1px solid var(--prn-separator);\n border-radius: var(--prn-radius-md);\n padding: 16px;\n margin: 0;\n}\n\n.prn-form-group-legend {\n font: var(--prn-text-subhead);\n font-weight: 600;\n color: var(--prn-label);\n padding: 0 6px;\n}\n\n/* Select-Wrapper (eigene Beschreibung/Fehlermeldung, da Select-Primitive\n keine description/errorMessage-Slots hat). */\n.prn-form-select-wrap {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.prn-form-hint {\n font: var(--prn-text-footnote);\n color: var(--prn-label-3);\n}\n\n.prn-form-error {\n font: var(--prn-text-footnote);\n color: var(--prn-red);\n}\n\n/* Taglist (ComboBox + Tags). */\n.prn-form-taglist {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n","/* FormBuilder — nativer Drag&Drop-Designer im prince-ui-Look. Nur --prn-*. */\n\n.prn-form-builder {\n display: flex;\n flex-direction: column;\n gap: 16px;\n container-type: inline-size;\n}\n\n.prn-fb-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n}\n\n/* 4-Spalten-Layout: Palette | Canvas | Eigenschaften | Vorschau.\n Auf schmalen Containern stapeln. */\n.prn-fb-grid {\n display: grid;\n grid-template-columns: 180px minmax(220px, 1fr) 280px minmax(220px, 1fr);\n gap: 16px;\n align-items: start;\n}\n\n@container (max-width: 900px) {\n .prn-fb-grid {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n/* ---- Palette ---- */\n.prn-fb-palette-list {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.prn-fb-palette-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 9px 12px;\n border: 1px solid var(--prn-separator);\n border-radius: var(--prn-radius-md);\n background: var(--prn-bg-elevated);\n color: var(--prn-label);\n font: var(--prn-text-subhead);\n text-align: left;\n cursor: grab;\n transition: background var(--prn-dur-fast) var(--prn-ease-standard),\n border-color var(--prn-dur-fast) var(--prn-ease-standard);\n}\n\n.prn-fb-palette-item:hover {\n background: var(--prn-accent-soft);\n border-color: var(--prn-accent);\n}\n\n.prn-fb-palette-item:active {\n cursor: grabbing;\n}\n\n.prn-fb-palette-glyph {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: var(--prn-radius-sm);\n background: var(--prn-accent-soft);\n color: var(--prn-accent-strong);\n font-size: 13px;\n flex-shrink: 0;\n}\n\n/* ---- Canvas ---- */\n.prn-fb-canvas-drop {\n min-height: 120px;\n}\n\n.prn-fb-canvas-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.prn-fb-canvas-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n border: 1px solid var(--prn-separator);\n border-radius: var(--prn-radius-md);\n background: var(--prn-bg-elevated);\n cursor: grab;\n transition: border-color var(--prn-dur-fast) var(--prn-ease-standard),\n box-shadow var(--prn-dur-fast) var(--prn-ease-standard);\n}\n\n.prn-fb-canvas-item[data-selected] {\n border-color: var(--prn-accent);\n box-shadow: 0 0 0 2px var(--prn-accent-soft);\n}\n\n.prn-fb-canvas-item[data-dropbefore] {\n border-top: 2px solid var(--prn-accent);\n}\n\n.prn-fb-item-type {\n font: var(--prn-text-caption);\n color: var(--prn-accent-strong);\n background: var(--prn-accent-soft);\n border-radius: var(--prn-radius-pill);\n padding: 2px 8px;\n flex-shrink: 0;\n}\n\n.prn-fb-item-label {\n flex: 1;\n font: var(--prn-text-subhead);\n color: var(--prn-label);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.prn-fb-item-remove {\n flex-shrink: 0;\n}\n\n/* ---- Properties ---- */\n.prn-fb-props-form {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.prn-fb-props-row {\n display: flex;\n gap: 10px;\n align-items: flex-end;\n}\n\n.prn-fb-props-row > * {\n flex: 1;\n}\n\n.prn-fb-props-empty {\n color: var(--prn-label-3);\n font: var(--prn-text-subhead);\n margin: 0;\n}\n\n.prn-fb-options {\n display: flex;\n flex-direction: column;\n gap: 8px;\n border-top: 1px solid var(--prn-separator);\n padding-top: 10px;\n}\n\n.prn-fb-options-head {\n font: var(--prn-text-subhead);\n font-weight: 600;\n color: var(--prn-label);\n}\n\n.prn-fb-delete {\n margin-top: 4px;\n}\n\n/* ---- Expert (form-js) fallback ---- */\n.prn-fb-expert {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.prn-fb-expert-host {\n height: 600px;\n width: 100%;\n border: 1px solid var(--prn-separator);\n border-radius: var(--prn-radius-md);\n overflow: hidden;\n background: var(--prn-bg-elevated);\n}\n/* Wenn form-js leer mountet (Bundler-/Preact-Problem), die leere Box\n ausblenden — der Hinweis darüber erklärt es. */\n.prn-fb-expert-host[data-status=\"empty\"] {\n display: none;\n}\n\n/* Carbon-/form-js-Hardcodes best effort über --prn-* übertünchen\n (funktional, nicht pixelgleich — siehe Spec §7.4). */\n.prn-fb-expert-host .fjs-container,\n.prn-fb-expert-host .fjs-editor-container {\n background: var(--prn-bg-elevated);\n color: var(--prn-label);\n}\n\n.prn-fb-expert-host .fjs-palette,\n.prn-fb-expert-host .fjs-properties-panel {\n background: var(--prn-bg-sidebar);\n border-color: var(--prn-separator);\n}\n\n.prn-fb-expert-host .fjs-form-field {\n color: var(--prn-label);\n}\n"],"mappings":"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","names":[]}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Formular-Schema — bewusst **form-js-kompatibel** (`@bpmn-io/form-js`), damit
|
|
6
|
+
* der native prince-ui-Renderer/-Builder und der form-js-Experten-Fallback
|
|
7
|
+
* dasselbe Schema lesen/schreiben.
|
|
8
|
+
*/
|
|
9
|
+
type FormFieldType = "textfield" | "textarea" | "number" | "checkbox" | "checklist" | "radio" | "select" | "datetime" | "taglist" | "text" | "spacer" | "separator" | "button" | "group";
|
|
10
|
+
interface FormFieldValidation {
|
|
11
|
+
required?: boolean;
|
|
12
|
+
min?: number;
|
|
13
|
+
max?: number;
|
|
14
|
+
minLength?: number;
|
|
15
|
+
maxLength?: number;
|
|
16
|
+
pattern?: string;
|
|
17
|
+
}
|
|
18
|
+
interface FormFieldOption {
|
|
19
|
+
label: string;
|
|
20
|
+
value: string;
|
|
21
|
+
}
|
|
22
|
+
interface FormFieldConditional {
|
|
23
|
+
/** FEEL-Ausdruck; wenn truthy, wird das Feld versteckt */
|
|
24
|
+
hide?: string;
|
|
25
|
+
}
|
|
26
|
+
interface FormField {
|
|
27
|
+
id?: string;
|
|
28
|
+
type: FormFieldType;
|
|
29
|
+
/** Datenbindung (Punkt-Notation für Nesting) */
|
|
30
|
+
key?: string;
|
|
31
|
+
label?: string;
|
|
32
|
+
description?: string;
|
|
33
|
+
defaultValue?: unknown;
|
|
34
|
+
validate?: FormFieldValidation;
|
|
35
|
+
values?: FormFieldOption[];
|
|
36
|
+
conditional?: FormFieldConditional;
|
|
37
|
+
/** statischer Text/HTML bei type === "text" */
|
|
38
|
+
text?: string;
|
|
39
|
+
/** verschachtelte Felder bei type === "group" */
|
|
40
|
+
components?: FormField[];
|
|
41
|
+
[key: string]: unknown;
|
|
42
|
+
}
|
|
43
|
+
interface FormSchema {
|
|
44
|
+
type: "default";
|
|
45
|
+
components: FormField[];
|
|
46
|
+
schemaVersion?: number;
|
|
47
|
+
id?: string;
|
|
48
|
+
exporter?: {
|
|
49
|
+
name: string;
|
|
50
|
+
version: string;
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
/** Formulardaten (key -> Wert). */
|
|
54
|
+
type FormData = Record<string, unknown>;
|
|
55
|
+
interface FormSubmitResult {
|
|
56
|
+
data: FormData;
|
|
57
|
+
errors: Record<string, string[]>;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Camunda-7-Task-Form-Feld (`GET /task/{id}/form`) — Quelle finops.
|
|
61
|
+
* Wird über `taskFormToSchema()` auf das form-js-kompatible {@link FormSchema}
|
|
62
|
+
* gemappt.
|
|
63
|
+
*/
|
|
64
|
+
interface TaskFormField {
|
|
65
|
+
id: string;
|
|
66
|
+
label?: string;
|
|
67
|
+
type: {
|
|
68
|
+
name: "string" | "long" | "boolean" | "enum" | "date";
|
|
69
|
+
} | string;
|
|
70
|
+
defaultValue?: unknown;
|
|
71
|
+
validationConstraints?: {
|
|
72
|
+
name: string;
|
|
73
|
+
configuration?: string;
|
|
74
|
+
}[];
|
|
75
|
+
values?: Record<string, string>;
|
|
76
|
+
}
|
|
77
|
+
/** Camunda-Submit-Variablenformat: `{ name: { value, type } }`. */
|
|
78
|
+
type CamundaVariables = Record<string, {
|
|
79
|
+
value: unknown;
|
|
80
|
+
type: string;
|
|
81
|
+
}>;
|
|
82
|
+
|
|
83
|
+
/** Normalisiert den Camunda-Typnamen (`{ name }` oder String). */
|
|
84
|
+
declare function camundaTypeName(type: TaskFormField["type"]): string;
|
|
85
|
+
/**
|
|
86
|
+
* Mappt einen Camunda-Typnamen auf den form-js-kompatiblen
|
|
87
|
+
* {@link FormFieldType}. `enum` → `select`, `boolean` → `checkbox`,
|
|
88
|
+
* `date` → `datetime`, `long`/`integer`/`double` → `number`, sonst `textfield`.
|
|
89
|
+
*/
|
|
90
|
+
declare function camundaTypeToFieldType(field: TaskFormField): FormFieldType;
|
|
91
|
+
/** Camunda-Typname → Submit-Variablentyp (`{ value, type }`). */
|
|
92
|
+
declare function camundaSubmitType(name: string): string;
|
|
93
|
+
/**
|
|
94
|
+
* Camunda-7-Task-Form-Felder (`GET /task/{id}/form`) auf das
|
|
95
|
+
* form-js-kompatible {@link FormSchema} mappen.
|
|
96
|
+
*
|
|
97
|
+
* Vorlage: finops `UserTaskFormDialog`-Feldtypen, generalisiert auf alle
|
|
98
|
+
* Camunda-`TaskFormField`-Typen (string/long/boolean/enum/date).
|
|
99
|
+
*/
|
|
100
|
+
declare function taskFormToSchema(fields: TaskFormField[]): FormSchema;
|
|
101
|
+
|
|
102
|
+
/** Leitet den Camunda-Variablentyp aus einem JS-Wert ab. */
|
|
103
|
+
declare function camundaTypeOf(value: unknown): string;
|
|
104
|
+
/**
|
|
105
|
+
* Wandelt Formulardaten in das Camunda-7-Submit-Variablenformat
|
|
106
|
+
* `{ name: { value, type } }` (siehe finops `submitTaskForm`).
|
|
107
|
+
*
|
|
108
|
+
* Mit Schema werden nur **sichtbare datentragende Felder** übernommen und der
|
|
109
|
+
* Typ wird – wo möglich – aus dem Feld abgeleitet. Ohne Schema werden alle
|
|
110
|
+
* Top-Level-Einträge der Daten gemappt (Typ per Heuristik).
|
|
111
|
+
*/
|
|
112
|
+
declare function formDataToCamundaVariables(data: FormData, schema?: FormSchema): CamundaVariables;
|
|
113
|
+
|
|
114
|
+
/** Standard-Fehlermeldungen (deutsch). Pro Feld überschreibbar wäre denkbar. */
|
|
115
|
+
declare const VALIDATION_MESSAGES: {
|
|
116
|
+
required: string;
|
|
117
|
+
min: (min: number) => string;
|
|
118
|
+
max: (max: number) => string;
|
|
119
|
+
minLength: (n: number) => string;
|
|
120
|
+
maxLength: (n: number) => string;
|
|
121
|
+
pattern: string;
|
|
122
|
+
};
|
|
123
|
+
/** Validiert ein einzelnes Feld gegen seinen Wert; liefert Fehlermeldungen. */
|
|
124
|
+
declare function validateField(field: FormField, value: unknown): string[];
|
|
125
|
+
/**
|
|
126
|
+
* Validiert ein komplettes Formular gegen seine Daten. **Versteckte Felder**
|
|
127
|
+
* (`conditional.hide` truthy) werden übersprungen. Liefert `{ key: messages[] }`
|
|
128
|
+
* nur für Felder mit Fehlern.
|
|
129
|
+
*/
|
|
130
|
+
declare function validateForm(schema: FormSchema, data: FormData): Record<string, string[]>;
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Heuristische Auswertung eines `conditional.hide`-Ausdrucks (FEEL-nah).
|
|
134
|
+
*
|
|
135
|
+
* **Kein echter FEEL-Parser** (siehe Spec §7.2) — wir werten eine sinnvolle
|
|
136
|
+
* Teilmenge aus, die in form-js-Schemata real vorkommt, und geben im Zweifel
|
|
137
|
+
* `false` (nicht verstecken) zurück, damit Felder nie fälschlich verschwinden.
|
|
138
|
+
*
|
|
139
|
+
* Unterstützt:
|
|
140
|
+
* - `=expr` (führendes Gleichheitszeichen wie in form-js)
|
|
141
|
+
* - Variablenreferenzen `foo`, Punkt-Notation `foo.bar`
|
|
142
|
+
* - Literale: `true`/`false`, Zahlen, `"strings"`/`'strings'`, `null`
|
|
143
|
+
* - Vergleiche `==`/`=`, `!=`, `>`, `>=`, `<`, `<=`
|
|
144
|
+
* - Negation `not(expr)` / `!expr`
|
|
145
|
+
* - Verknüpfung ` and ` / ` or ` (links-assoziativ, kein Klammer-Parsing)
|
|
146
|
+
* - bloße Truthiness einer Variable (`hide: "foo"`)
|
|
147
|
+
*/
|
|
148
|
+
declare function evalConditional(hideExpr: string | undefined, data: FormData): boolean;
|
|
149
|
+
/** Liest einen Punkt-Pfad (`a.b.c`) aus einem Objekt. */
|
|
150
|
+
declare function getPath(obj: unknown, path: string): unknown;
|
|
151
|
+
/** Setzt einen Punkt-Pfad (`a.b.c`) in einem Objekt (mutierend, mit Auto-Nesting). */
|
|
152
|
+
declare function setPath(obj: Record<string, unknown>, path: string, value: unknown): void;
|
|
153
|
+
|
|
154
|
+
/** Feldtypen ohne Datenbindung (rein präsentationell). */
|
|
155
|
+
declare const PRESENTATIONAL_TYPES: ReadonlySet<FormFieldType>;
|
|
156
|
+
/** Hat das Feld eine Datenbindung (`key` + nicht rein präsentationell)? */
|
|
157
|
+
declare function isDataField(field: FormField): boolean;
|
|
158
|
+
/**
|
|
159
|
+
* Flacht ein Schema (inkl. verschachtelter `group`-Felder) zu einer
|
|
160
|
+
* flachen Liste ab — in Dokumentreihenfolge.
|
|
161
|
+
*/
|
|
162
|
+
declare function flattenFields(schema: FormSchema): FormField[];
|
|
163
|
+
/** Alle datentragenden Felder eines Schemas (flach). */
|
|
164
|
+
declare function dataFields(schema: FormSchema): FormField[];
|
|
165
|
+
|
|
166
|
+
type SubmitVariableFormat = "camunda" | "plain";
|
|
167
|
+
interface FormRendererSubmit {
|
|
168
|
+
/** Roh-Formulardaten (`key -> value`, mit Nesting). */
|
|
169
|
+
data: FormData;
|
|
170
|
+
/** Validierungsfehler je Feld-Key (leer = valide). */
|
|
171
|
+
errors: FormSubmitResult["errors"];
|
|
172
|
+
/** Submit-Payload im gewählten Format (Default Camunda `{name:{value,type}}`). */
|
|
173
|
+
variables: CamundaVariables | FormData;
|
|
174
|
+
}
|
|
175
|
+
interface FormRendererProps {
|
|
176
|
+
/** form-js-kompatibles Schema (`{ type:"default", components:[...] }`). */
|
|
177
|
+
schema: FormSchema;
|
|
178
|
+
/** Kontrollierte Daten (`key -> value`). */
|
|
179
|
+
data?: FormData;
|
|
180
|
+
/** Ungesteuerte Anfangsdaten. */
|
|
181
|
+
defaultData?: FormData;
|
|
182
|
+
/** Datenänderungen (für controlled-Nutzung). */
|
|
183
|
+
onChange?: (data: FormData) => void;
|
|
184
|
+
/** Submit-Callback; erhält Daten, Validierungsfehler und Submit-Variablen. */
|
|
185
|
+
onSubmit?: (result: FormRendererSubmit) => void;
|
|
186
|
+
/** Read-only-Darstellung über `DescriptionList`/`Field`. */
|
|
187
|
+
readOnly?: boolean;
|
|
188
|
+
/** Submit-Variablenformat (Default `camunda`). */
|
|
189
|
+
submitVariableFormat?: SubmitVariableFormat;
|
|
190
|
+
/** Label des Submit-Buttons (Default „Absenden"). `null` → kein Button. */
|
|
191
|
+
submitLabel?: ReactNode;
|
|
192
|
+
/** Zusätzlicher Aktions-Slot neben dem Submit-Button. */
|
|
193
|
+
actionsSlot?: ReactNode;
|
|
194
|
+
className?: string;
|
|
195
|
+
}
|
|
196
|
+
declare function FormRenderer({ schema, data, defaultData, onChange, onSubmit, readOnly, submitVariableFormat, submitLabel, actionsSlot, className, }: FormRendererProps): react.JSX.Element;
|
|
197
|
+
|
|
198
|
+
/** Im Builder anlegbare Feldtypen (Palette). */
|
|
199
|
+
declare const BUILDER_FIELD_TYPES: readonly ["textfield", "textarea", "number", "checkbox", "checklist", "radio", "select", "datetime", "taglist", "text", "separator", "spacer"];
|
|
200
|
+
type BuilderFieldType = (typeof BUILDER_FIELD_TYPES)[number];
|
|
201
|
+
/** Menschlich lesbare Labels für die Palette. */
|
|
202
|
+
declare const FIELD_TYPE_LABELS: Record<BuilderFieldType, string>;
|
|
203
|
+
/** Leeres, valides Schema. */
|
|
204
|
+
declare function emptySchema(): FormSchema;
|
|
205
|
+
/** Erzeugt ein neues Feld eines Typs mit sinnvollen Defaults. */
|
|
206
|
+
declare function createField(type: BuilderFieldType): FormField;
|
|
207
|
+
/** Fügt ein Feld an Position `index` ein (Default: ans Ende). */
|
|
208
|
+
declare function insertField(schema: FormSchema, field: FormField, index?: number): FormSchema;
|
|
209
|
+
/** Entfernt das Feld an Position `index`. */
|
|
210
|
+
declare function removeFieldAt(schema: FormSchema, index: number): FormSchema;
|
|
211
|
+
/** Verschiebt das Feld von `from` nach `to` (Reorder). */
|
|
212
|
+
declare function moveField(schema: FormSchema, from: number, to: number): FormSchema;
|
|
213
|
+
/** Aktualisiert das Feld an Position `index` (Merge). */
|
|
214
|
+
declare function updateFieldAt(schema: FormSchema, index: number, patch: Partial<FormField>): FormSchema;
|
|
215
|
+
|
|
216
|
+
type FormBuilderMode = "design" | "expert";
|
|
217
|
+
interface FormBuilderProps {
|
|
218
|
+
/** Kontrolliertes Schema. */
|
|
219
|
+
value?: FormSchema;
|
|
220
|
+
/** Ungesteuertes Anfangs-Schema. */
|
|
221
|
+
defaultValue?: FormSchema;
|
|
222
|
+
/** Schema-Änderungen. */
|
|
223
|
+
onChange?: (schema: FormSchema) => void;
|
|
224
|
+
/** Persistenz-Callback (z. B. ⌘S in der App). */
|
|
225
|
+
onSave?: (schema: FormSchema) => void | Promise<void>;
|
|
226
|
+
/** Editor-Modus: nativer Designer oder form-js-Experten-Fallback. */
|
|
227
|
+
mode?: FormBuilderMode;
|
|
228
|
+
onModeChange?: (mode: FormBuilderMode) => void;
|
|
229
|
+
/** Beschränkt/erweitert die Palette (Default: alle Builder-Feldtypen). */
|
|
230
|
+
fieldTypes?: readonly BuilderFieldType[];
|
|
231
|
+
className?: string;
|
|
232
|
+
}
|
|
233
|
+
declare function FormBuilder({ value, defaultValue, onChange, onSave, mode, onModeChange, fieldTypes, className, }: FormBuilderProps): react.JSX.Element;
|
|
234
|
+
|
|
235
|
+
export { BUILDER_FIELD_TYPES, type BuilderFieldType, type CamundaVariables, FIELD_TYPE_LABELS, FormBuilder, type FormBuilderMode, type FormBuilderProps, type FormData, type FormField, type FormFieldConditional, type FormFieldOption, type FormFieldType, type FormFieldValidation, FormRenderer, type FormRendererProps, type FormRendererSubmit, type FormSchema, type FormSubmitResult, PRESENTATIONAL_TYPES, type SubmitVariableFormat, type TaskFormField, VALIDATION_MESSAGES, camundaSubmitType, camundaTypeName, camundaTypeOf, camundaTypeToFieldType, createField, dataFields, emptySchema, evalConditional, flattenFields, formDataToCamundaVariables, getPath, insertField, isDataField, moveField, removeFieldAt, setPath, taskFormToSchema, updateFieldAt, validateField, validateForm };
|