@5minds/node-red-dashboard-2-processcube-dynamic-form 1.1.1-feature-735e79-m734z5f9 → 1.1.1-feature-22e391-m79a6gn4
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 +139 -20
- 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 +721 -734
- package/ui/stylesheets/ui-dynamic-form.css +121 -41
|
@@ -21,6 +21,33 @@
|
|
|
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
|
+
},
|
|
48
|
+
trigger_on_change: {
|
|
49
|
+
value: false,
|
|
50
|
+
},
|
|
24
51
|
width: {
|
|
25
52
|
value: 0,
|
|
26
53
|
validate: function (v) {
|
|
@@ -36,9 +63,9 @@
|
|
|
36
63
|
outputs: { value: 1 },
|
|
37
64
|
},
|
|
38
65
|
inputs: 1,
|
|
39
|
-
outputs:
|
|
66
|
+
outputs: 0,
|
|
40
67
|
outputLabels: function (index) {
|
|
41
|
-
return this.options[index].label;
|
|
68
|
+
return index < this.options.length ? this.options[index].label : 'Triggered on change';
|
|
42
69
|
},
|
|
43
70
|
icon: 'ui_dynamic_form.svg',
|
|
44
71
|
label: function () {
|
|
@@ -50,6 +77,18 @@
|
|
|
50
77
|
height: '#node-input-height',
|
|
51
78
|
group: '#node-input-group',
|
|
52
79
|
});
|
|
80
|
+
$('#node-input-title_style').typedInput({
|
|
81
|
+
types: [
|
|
82
|
+
{
|
|
83
|
+
value: 'title_style',
|
|
84
|
+
options: [
|
|
85
|
+
{ value: 'default', label: 'Default' },
|
|
86
|
+
{ value: 'minimal', label: 'Minimal' },
|
|
87
|
+
{ value: 'outside', label: 'Outside of card' },
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
]
|
|
91
|
+
})
|
|
53
92
|
|
|
54
93
|
function generateOption(i, option) {
|
|
55
94
|
const container = $('<li/>', {
|
|
@@ -65,11 +104,7 @@
|
|
|
65
104
|
placeholder: 'Label',
|
|
66
105
|
value: option.label,
|
|
67
106
|
})
|
|
68
|
-
.appendTo(row)
|
|
69
|
-
.typedInput({
|
|
70
|
-
type: 'str',
|
|
71
|
-
types: ['str'],
|
|
72
|
-
});
|
|
107
|
+
.appendTo(row);
|
|
73
108
|
|
|
74
109
|
$('<input/>', {
|
|
75
110
|
class: 'node-input-option-condition',
|
|
@@ -78,11 +113,7 @@
|
|
|
78
113
|
placeholder: 'Condition',
|
|
79
114
|
value: option.condition,
|
|
80
115
|
})
|
|
81
|
-
.appendTo(row)
|
|
82
|
-
.typedInput({
|
|
83
|
-
type: 'str',
|
|
84
|
-
types: ['str'],
|
|
85
|
-
});
|
|
116
|
+
.appendTo(row);
|
|
86
117
|
|
|
87
118
|
$('<input/>', {
|
|
88
119
|
class: 'node-input-option-error',
|
|
@@ -90,11 +121,47 @@
|
|
|
90
121
|
style: 'margin-left:7px; width:calc(29%);',
|
|
91
122
|
placeholder: 'Error message',
|
|
92
123
|
value: option.errorMessage,
|
|
124
|
+
})
|
|
125
|
+
.appendTo(row);
|
|
126
|
+
|
|
127
|
+
$('<input/>', {
|
|
128
|
+
class: 'node-input-option-alignment',
|
|
129
|
+
type: 'text',
|
|
130
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
131
|
+
placeholder: 'Alignment',
|
|
132
|
+
value: option.alignment
|
|
133
|
+
})
|
|
134
|
+
.appendTo(row)
|
|
135
|
+
.typedInput({
|
|
136
|
+
types: [
|
|
137
|
+
{
|
|
138
|
+
value: 'alignment',
|
|
139
|
+
options: [
|
|
140
|
+
{ value: 'left', label: 'Align left' },
|
|
141
|
+
{ value: 'right', label: 'Align right' },
|
|
142
|
+
]
|
|
143
|
+
}
|
|
144
|
+
]
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
$('<input/>', {
|
|
148
|
+
class: 'node-input-option-primary',
|
|
149
|
+
type: 'text',
|
|
150
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
151
|
+
placeholder: 'Action type',
|
|
152
|
+
value: option.primary,
|
|
93
153
|
})
|
|
94
154
|
.appendTo(row)
|
|
95
155
|
.typedInput({
|
|
96
|
-
|
|
97
|
-
|
|
156
|
+
types: [
|
|
157
|
+
{
|
|
158
|
+
value: 'primary',
|
|
159
|
+
options: [
|
|
160
|
+
{ value: 'false', label: 'Secondary action'},
|
|
161
|
+
{ value: 'true', label: 'Primary action'},
|
|
162
|
+
]
|
|
163
|
+
}
|
|
164
|
+
]
|
|
98
165
|
});
|
|
99
166
|
|
|
100
167
|
// Create delete button for the option
|
|
@@ -148,12 +215,18 @@
|
|
|
148
215
|
label: option.find('.node-input-option-label').val(),
|
|
149
216
|
condition: option.find('.node-input-option-condition').val(),
|
|
150
217
|
errorMessage: option.find('.node-input-option-error').val(),
|
|
218
|
+
alignment: option.find('.node-input-option-alignment').val(),
|
|
219
|
+
primary: option.find('.node-input-option-primary').val(),
|
|
151
220
|
};
|
|
152
221
|
|
|
153
222
|
node.options.push(o);
|
|
154
223
|
});
|
|
155
224
|
|
|
156
|
-
this.outputs = node.options.length ||
|
|
225
|
+
this.outputs = node.options.length || 0;
|
|
226
|
+
|
|
227
|
+
if ($('#node-input-trigger_on_change').is(':checked')) {
|
|
228
|
+
this.outputs++;
|
|
229
|
+
}
|
|
157
230
|
},
|
|
158
231
|
});
|
|
159
232
|
</script>
|
|
@@ -174,6 +247,7 @@
|
|
|
174
247
|
<button class="editor-button" id="node-input-size"></button>
|
|
175
248
|
</div>
|
|
176
249
|
|
|
250
|
+
<h4>Action Configuration</h4>
|
|
177
251
|
<div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
|
|
178
252
|
<label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
|
|
179
253
|
<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 +266,60 @@
|
|
|
192
266
|
<div class="form-row">
|
|
193
267
|
<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
268
|
</div>
|
|
269
|
+
<div class="form-row">
|
|
270
|
+
<label for="node-input-readonly"><i class="fa fa-hand"></i>Inside of card</label>
|
|
271
|
+
<input type="checkbox" id="node-input-actions_inside_card">
|
|
272
|
+
</div>
|
|
273
|
+
<hr />
|
|
274
|
+
|
|
275
|
+
<h4>Title Configuration</h4>
|
|
276
|
+
<div class="form-row">
|
|
277
|
+
<label for="node-input-title_text"><i class="fa fa-hand"></i>Title text</label>
|
|
278
|
+
<input type="text" id="node-input-title_text" title="Enter the text to show as a title.">
|
|
279
|
+
</div>
|
|
280
|
+
<div class="form-row">
|
|
281
|
+
<label for="node-input-title_style"><i class="fa fa-hand"></i>Style</label>
|
|
282
|
+
<input type="text" id="node-input-title_style" title="Select the base styling layout for your title.">
|
|
283
|
+
</div>
|
|
284
|
+
<div class="form-row">
|
|
285
|
+
<label for="node-input-title_custom_text_styling"><i class="fa fa-hand"></i>Custom text styling</label>
|
|
286
|
+
<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">
|
|
287
|
+
</div>
|
|
288
|
+
<div class="form-row">
|
|
289
|
+
<label for="node-input-title_icon"><i class="fa fa-hand"></i>Title icon</label>
|
|
290
|
+
<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.">
|
|
291
|
+
</div>
|
|
292
|
+
<hr />
|
|
293
|
+
|
|
294
|
+
<h4>Appearance</h4>
|
|
295
|
+
<div class="form-row">
|
|
296
|
+
<label for="node-input-form_columns"><i class="fa fa-hand"></i>Card size styling</label>
|
|
297
|
+
<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">
|
|
298
|
+
</div>
|
|
299
|
+
<div class="form-row">
|
|
300
|
+
<label for="node-input-form_columns"><i class="fa fa-hand"></i>Columns in form</label>
|
|
301
|
+
<input type="number" min="1" id="node-input-form_columns" title="Control the amount of columns, that your form fields should be placed in.">
|
|
302
|
+
</div>
|
|
303
|
+
|
|
304
|
+
<hr />
|
|
195
305
|
|
|
306
|
+
<h4>Other</h4>
|
|
196
307
|
<div class="form-row">
|
|
197
|
-
|
|
198
|
-
|
|
308
|
+
<label for="node-input-readonly"><i class="fa fa-hand"></i>Readonly</label>
|
|
309
|
+
<input type="checkbox" id="node-input-readonly" title="Makes all form fields read only.">
|
|
199
310
|
</div>
|
|
200
311
|
<div class="form-row">
|
|
201
|
-
|
|
202
|
-
|
|
312
|
+
<label for="node-input-trigger_on_change"><i class="fa fa-hand"></i>Trigger on change</label>
|
|
313
|
+
<input type="checkbox" id="node-input-trigger_on_change" title="A new output will be added. Each time a value inside the form changes, this output will be triggered.">
|
|
203
314
|
</div>
|
|
315
|
+
<div class="form-row">
|
|
316
|
+
<label for="node-input-waiting_title"><i class="fa fa-hand"></i>Title for waiting text</label>
|
|
317
|
+
<input type="text" id="node-input-waiting_title">
|
|
318
|
+
</div>
|
|
319
|
+
<div class="form-row">
|
|
320
|
+
<label for="node-input-waiting_info"><i class="fa fa-hand"></i>Text for waiting text</label>
|
|
321
|
+
<input type="text" id="node-input-waiting_info">
|
|
322
|
+
</div>
|
|
204
323
|
</script>
|
|
205
324
|
|
|
206
325
|
|
|
@@ -215,7 +334,7 @@ Connect the UI-Node to the usertask input node. Every action in the configuratio
|
|
|
215
334
|
|
|
216
335
|
### message
|
|
217
336
|
|
|
218
|
-
Access to the message object is available through _msg_
|
|
337
|
+
Access to the message object is available through _msg_
|
|
219
338
|
|
|
220
339
|
### form fields
|
|
221
340
|
|
package/package.json
CHANGED