@5minds/node-red-dashboard-2-processcube-dynamic-form 1.1.1-feature-735e79-m734z5f9 → 1.1.1-feature-77a9de-m79111vs
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/nodes/ui-dynamic-form.html +125 -17
- package/package.json +1 -1
- package/resources/ui-dynamic-form.umd.js +2 -2
- package/ui/components/FooterActions.vue +52 -0
- package/ui/components/TitleText.vue +35 -0
- package/ui/components/UIDynamicForm.vue +710 -735
- package/ui/stylesheets/ui-dynamic-form.css +119 -39
|
@@ -21,6 +21,30 @@
|
|
|
21
21
|
waiting_info: {
|
|
22
22
|
value: 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.',
|
|
23
23
|
},
|
|
24
|
+
form_columns: {
|
|
25
|
+
value: 1,
|
|
26
|
+
},
|
|
27
|
+
readonly: {
|
|
28
|
+
value: false,
|
|
29
|
+
},
|
|
30
|
+
actions_inside_card: {
|
|
31
|
+
value: true,
|
|
32
|
+
},
|
|
33
|
+
card_size_styling: {
|
|
34
|
+
value: "",
|
|
35
|
+
},
|
|
36
|
+
title_text: {
|
|
37
|
+
value: "",
|
|
38
|
+
},
|
|
39
|
+
title_style: {
|
|
40
|
+
value: "default",
|
|
41
|
+
},
|
|
42
|
+
title_custom_text_styling: {
|
|
43
|
+
value: "",
|
|
44
|
+
},
|
|
45
|
+
title_icon: {
|
|
46
|
+
value: "",
|
|
47
|
+
},
|
|
24
48
|
width: {
|
|
25
49
|
value: 0,
|
|
26
50
|
validate: function (v) {
|
|
@@ -50,6 +74,18 @@
|
|
|
50
74
|
height: '#node-input-height',
|
|
51
75
|
group: '#node-input-group',
|
|
52
76
|
});
|
|
77
|
+
$('#node-input-title_style').typedInput({
|
|
78
|
+
types: [
|
|
79
|
+
{
|
|
80
|
+
value: 'title_style',
|
|
81
|
+
options: [
|
|
82
|
+
{ value: 'default', label: 'Default' },
|
|
83
|
+
{ value: 'minimal', label: 'Minimal' },
|
|
84
|
+
{ value: 'outside', label: 'Outside of card' },
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
]
|
|
88
|
+
})
|
|
53
89
|
|
|
54
90
|
function generateOption(i, option) {
|
|
55
91
|
const container = $('<li/>', {
|
|
@@ -65,11 +101,7 @@
|
|
|
65
101
|
placeholder: 'Label',
|
|
66
102
|
value: option.label,
|
|
67
103
|
})
|
|
68
|
-
.appendTo(row)
|
|
69
|
-
.typedInput({
|
|
70
|
-
type: 'str',
|
|
71
|
-
types: ['str'],
|
|
72
|
-
});
|
|
104
|
+
.appendTo(row);
|
|
73
105
|
|
|
74
106
|
$('<input/>', {
|
|
75
107
|
class: 'node-input-option-condition',
|
|
@@ -78,11 +110,7 @@
|
|
|
78
110
|
placeholder: 'Condition',
|
|
79
111
|
value: option.condition,
|
|
80
112
|
})
|
|
81
|
-
.appendTo(row)
|
|
82
|
-
.typedInput({
|
|
83
|
-
type: 'str',
|
|
84
|
-
types: ['str'],
|
|
85
|
-
});
|
|
113
|
+
.appendTo(row);
|
|
86
114
|
|
|
87
115
|
$('<input/>', {
|
|
88
116
|
class: 'node-input-option-error',
|
|
@@ -90,11 +118,47 @@
|
|
|
90
118
|
style: 'margin-left:7px; width:calc(29%);',
|
|
91
119
|
placeholder: 'Error message',
|
|
92
120
|
value: option.errorMessage,
|
|
121
|
+
})
|
|
122
|
+
.appendTo(row);
|
|
123
|
+
|
|
124
|
+
$('<input/>', {
|
|
125
|
+
class: 'node-input-option-alignment',
|
|
126
|
+
type: 'text',
|
|
127
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
128
|
+
placeholder: 'Alignment',
|
|
129
|
+
value: option.alignment
|
|
93
130
|
})
|
|
94
131
|
.appendTo(row)
|
|
95
132
|
.typedInput({
|
|
96
|
-
|
|
97
|
-
|
|
133
|
+
types: [
|
|
134
|
+
{
|
|
135
|
+
value: 'alignment',
|
|
136
|
+
options: [
|
|
137
|
+
{ value: 'left', label: 'Align left' },
|
|
138
|
+
{ value: 'right', label: 'Align right' },
|
|
139
|
+
]
|
|
140
|
+
}
|
|
141
|
+
]
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
$('<input/>', {
|
|
145
|
+
class: 'node-input-option-primary',
|
|
146
|
+
type: 'text',
|
|
147
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
148
|
+
placeholder: 'Action type',
|
|
149
|
+
value: option.primary,
|
|
150
|
+
})
|
|
151
|
+
.appendTo(row)
|
|
152
|
+
.typedInput({
|
|
153
|
+
types: [
|
|
154
|
+
{
|
|
155
|
+
value: 'primary',
|
|
156
|
+
options: [
|
|
157
|
+
{ value: 'false', label: 'Secondary action'},
|
|
158
|
+
{ value: 'true', label: 'Primary action'},
|
|
159
|
+
]
|
|
160
|
+
}
|
|
161
|
+
]
|
|
98
162
|
});
|
|
99
163
|
|
|
100
164
|
// Create delete button for the option
|
|
@@ -148,6 +212,8 @@
|
|
|
148
212
|
label: option.find('.node-input-option-label').val(),
|
|
149
213
|
condition: option.find('.node-input-option-condition').val(),
|
|
150
214
|
errorMessage: option.find('.node-input-option-error').val(),
|
|
215
|
+
alignment: option.find('.node-input-option-alignment').val(),
|
|
216
|
+
primary: option.find('.node-input-option-primary').val(),
|
|
151
217
|
};
|
|
152
218
|
|
|
153
219
|
node.options.push(o);
|
|
@@ -174,6 +240,7 @@
|
|
|
174
240
|
<button class="editor-button" id="node-input-size"></button>
|
|
175
241
|
</div>
|
|
176
242
|
|
|
243
|
+
<h4>Action Configuration</h4>
|
|
177
244
|
<div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
|
|
178
245
|
<label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
|
|
179
246
|
<div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
|
|
@@ -192,15 +259,56 @@
|
|
|
192
259
|
<div class="form-row">
|
|
193
260
|
<a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>action</span></a>
|
|
194
261
|
</div>
|
|
262
|
+
<div class="form-row">
|
|
263
|
+
<label for="node-input-readonly"><i class="fa fa-hand"></i>Inside of card</label>
|
|
264
|
+
<input type="checkbox" id="node-input-actions_inside_card">
|
|
265
|
+
</div>
|
|
266
|
+
<hr />
|
|
195
267
|
|
|
268
|
+
<h4>Title Configuration</h4>
|
|
269
|
+
<div class="form-row">
|
|
270
|
+
<label for="node-input-title_text"><i class="fa fa-hand"></i>Title text</label>
|
|
271
|
+
<input type="text" id="node-input-title_text" title="Enter the text to show as a title.">
|
|
272
|
+
</div>
|
|
273
|
+
<div class="form-row">
|
|
274
|
+
<label for="node-input-title_style"><i class="fa fa-hand"></i>Style</label>
|
|
275
|
+
<input type="text" id="node-input-title_style" title="Select the base styling layout for your title.">
|
|
276
|
+
</div>
|
|
196
277
|
<div class="form-row">
|
|
197
|
-
<label for="node-input-
|
|
198
|
-
<input type="text" id="node-input-
|
|
278
|
+
<label for="node-input-title_custom_text_styling"><i class="fa fa-hand"></i>Custom text styling</label>
|
|
279
|
+
<input type="text" id="node-input-title_custom_text_styling" title="Use CSS properties like font-size, color or padding to influence the appearance of the title">
|
|
199
280
|
</div>
|
|
200
281
|
<div class="form-row">
|
|
201
|
-
<label for="node-input-
|
|
202
|
-
<input type="text" id="node-input-
|
|
282
|
+
<label for="node-input-title_icon"><i class="fa fa-hand"></i>Title icon</label>
|
|
283
|
+
<input type="text" id="node-input-title_icon" title="Enter an URL to fetch an icon from. Use a dataurl for images, that are not available online. This value will be used as a HTML <img>'s src value.">
|
|
203
284
|
</div>
|
|
285
|
+
<hr />
|
|
286
|
+
|
|
287
|
+
<h4>Appearance</h4>
|
|
288
|
+
<div class="form-row">
|
|
289
|
+
<label for="node-input-form_columns"><i class="fa fa-hand"></i>Card size styling</label>
|
|
290
|
+
<input type="text" id="node-input-card_size_styling" title="Use CSS properties like margin, padding or max-width to influence sizing and positioning of the component">
|
|
291
|
+
</div>
|
|
292
|
+
<div class="form-row">
|
|
293
|
+
<label for="node-input-form_columns"><i class="fa fa-hand"></i>Columns in form</label>
|
|
294
|
+
<input type="number" min="1" id="node-input-form_columns" title="Control the amount of columns, that your form fields should be placed in.">
|
|
295
|
+
</div>
|
|
296
|
+
|
|
297
|
+
<hr />
|
|
298
|
+
|
|
299
|
+
<h4>Other</h4>
|
|
300
|
+
<div class="form-row">
|
|
301
|
+
<label for="node-input-readonly"><i class="fa fa-hand"></i>Readonly</label>
|
|
302
|
+
<input type="checkbox" id="node-input-readonly" title="Makes all form fields read only.">
|
|
303
|
+
</div>
|
|
304
|
+
<div class="form-row">
|
|
305
|
+
<label for="node-input-waiting_title"><i class="fa fa-hand"></i>Title for waiting text</label>
|
|
306
|
+
<input type="text" id="node-input-waiting_title">
|
|
307
|
+
</div>
|
|
308
|
+
<div class="form-row">
|
|
309
|
+
<label for="node-input-waiting_info"><i class="fa fa-hand"></i>Text for waiting text</label>
|
|
310
|
+
<input type="text" id="node-input-waiting_info">
|
|
311
|
+
</div>
|
|
204
312
|
</script>
|
|
205
313
|
|
|
206
314
|
|
|
@@ -215,7 +323,7 @@ Connect the UI-Node to the usertask input node. Every action in the configuratio
|
|
|
215
323
|
|
|
216
324
|
### message
|
|
217
325
|
|
|
218
|
-
Access to the message object is available through _msg_
|
|
326
|
+
Access to the message object is available through _msg_
|
|
219
327
|
|
|
220
328
|
### form fields
|
|
221
329
|
|
package/package.json
CHANGED