@5minds/node-red-dashboard-2-processcube-dynamic-form 1.0.13 → 1.0.15
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/dynamic-form.html +173 -149
- package/nodes/dynamic-form.js +40 -40
- package/package.json +81 -81
- package/resources/ui-dynamic-form.umd.js +2 -0
- package/ui/stylesheets/dynamic-form.css +19 -19
- package/resources/dynamic-form.umd.js +0 -2
package/nodes/dynamic-form.html
CHANGED
|
@@ -1,168 +1,192 @@
|
|
|
1
1
|
<script type="text/javascript">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
width: {
|
|
19
|
-
value: 0,
|
|
20
|
-
validate: function (v) {
|
|
21
|
-
const width = v || 0
|
|
22
|
-
const currentGroup = $('#node-input-group').val() || this.group
|
|
23
|
-
const groupNode = RED.nodes.node(currentGroup)
|
|
24
|
-
const valid = !groupNode || +width <= +groupNode.width
|
|
25
|
-
$('#node-input-size').toggleClass('input-error', !valid)
|
|
26
|
-
return valid
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
height: { value: 0 },
|
|
30
|
-
outputs: { value: 1}
|
|
2
|
+
RED.nodes.registerType("ui-dynamic-form", {
|
|
3
|
+
category: "ProcessCube UI",
|
|
4
|
+
color: "#00aed7",
|
|
5
|
+
defaults: {
|
|
6
|
+
name: { value: "" },
|
|
7
|
+
group: { type: "ui-group", required: true },
|
|
8
|
+
order: { value: 0 },
|
|
9
|
+
options: {
|
|
10
|
+
value: [{ label: "" }],
|
|
11
|
+
validate: function (v) {
|
|
12
|
+
const unique = new Set(
|
|
13
|
+
v.map(function (o) {
|
|
14
|
+
return o.label;
|
|
15
|
+
})
|
|
16
|
+
);
|
|
17
|
+
return v.length === unique.size;
|
|
31
18
|
},
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
19
|
+
},
|
|
20
|
+
waiting_title: { value: "Waiting for Warten auf den Usertask..." },
|
|
21
|
+
waiting_info: {
|
|
22
|
+
value:
|
|
23
|
+
"Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.",
|
|
24
|
+
},
|
|
25
|
+
width: {
|
|
26
|
+
value: 0,
|
|
27
|
+
validate: function (v) {
|
|
28
|
+
const width = v || 0;
|
|
29
|
+
const currentGroup = $("#node-input-group").val() || this.group;
|
|
30
|
+
const groupNode = RED.nodes.node(currentGroup);
|
|
31
|
+
const valid = !groupNode || +width <= +groupNode.width;
|
|
32
|
+
$("#node-input-size").toggleClass("input-error", !valid);
|
|
33
|
+
return valid;
|
|
36
34
|
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
35
|
+
},
|
|
36
|
+
height: { value: 0 },
|
|
37
|
+
outputs: { value: 1 },
|
|
38
|
+
},
|
|
39
|
+
inputs: 1,
|
|
40
|
+
outputs: 1,
|
|
41
|
+
outputLabels: function (index) {
|
|
42
|
+
return this.options[index].label;
|
|
43
|
+
},
|
|
44
|
+
icon: "file.svg",
|
|
45
|
+
label: function () {
|
|
46
|
+
return this.name || "dynamic-form";
|
|
47
|
+
},
|
|
48
|
+
oneditprepare: function () {
|
|
49
|
+
$("#node-input-size").elementSizer({
|
|
50
|
+
width: "#node-input-width",
|
|
51
|
+
height: "#node-input-height",
|
|
52
|
+
group: "#node-input-group",
|
|
53
|
+
});
|
|
47
54
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
55
|
+
function generateOption(i, option) {
|
|
56
|
+
const container = $("<li/>", {
|
|
57
|
+
style:
|
|
58
|
+
"background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;",
|
|
59
|
+
});
|
|
52
60
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
// Create input fields for value and label
|
|
62
|
+
const row = $("<div/>").appendTo(container);
|
|
63
|
+
$("<input/>", {
|
|
64
|
+
class: "node-input-option-label",
|
|
65
|
+
type: "text",
|
|
66
|
+
style: "margin-left:7px; width:calc(100% - 48px);",
|
|
67
|
+
placeholder: "Label",
|
|
68
|
+
value: option.label,
|
|
69
|
+
})
|
|
70
|
+
.appendTo(row)
|
|
71
|
+
.typedInput({
|
|
72
|
+
type: "str",
|
|
73
|
+
types: ["str"],
|
|
74
|
+
});
|
|
64
75
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
76
|
+
// $('<input/>', {
|
|
77
|
+
// class: 'node-input-option-condition',
|
|
78
|
+
// type: 'text',
|
|
79
|
+
// style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
80
|
+
// placeholder: 'Condition',
|
|
81
|
+
// value: option.condition
|
|
82
|
+
// }).appendTo(row).typedInput({
|
|
83
|
+
// type: 'str', types: ['str']
|
|
84
|
+
// });
|
|
74
85
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
86
|
+
// Create delete button for the option
|
|
87
|
+
const finalSpan = $("<span/>", {
|
|
88
|
+
style: "float:right; margin-right:8px;",
|
|
89
|
+
}).appendTo(row);
|
|
90
|
+
const deleteButton = $("<a/>", {
|
|
91
|
+
href: "#",
|
|
92
|
+
class: "editor-button editor-button-small",
|
|
93
|
+
style: "margin-top:7px; margin-left:5px;",
|
|
94
|
+
}).appendTo(finalSpan);
|
|
95
|
+
$("<i/>", { class: "fa fa-remove" }).appendTo(deleteButton);
|
|
79
96
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
97
|
+
deleteButton.click(function () {
|
|
98
|
+
container.css({
|
|
99
|
+
background: "var(--red-ui-secondary-background-inactive, #fee)",
|
|
100
|
+
});
|
|
101
|
+
container.fadeOut(300, function () {
|
|
102
|
+
$(this).remove();
|
|
103
|
+
});
|
|
104
|
+
});
|
|
86
105
|
|
|
87
|
-
|
|
88
|
-
|
|
106
|
+
$("#node-input-option-container").append(container);
|
|
107
|
+
}
|
|
89
108
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
109
|
+
$("#node-input-add-option").click(function () {
|
|
110
|
+
generateOption(
|
|
111
|
+
$("#node-input-option-container").children().length + 1,
|
|
112
|
+
{}
|
|
113
|
+
);
|
|
114
|
+
$("#node-input-option-container-div").scrollTop(
|
|
115
|
+
$("#node-input-option-container-div").get(0).scrollHeight
|
|
116
|
+
);
|
|
117
|
+
});
|
|
94
118
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
119
|
+
for (let i = 0; i < this.options.length; i++) {
|
|
120
|
+
const option = this.options[i];
|
|
121
|
+
generateOption(i + 1, option);
|
|
122
|
+
}
|
|
99
123
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
124
|
+
$("#node-input-option-container").sortable({
|
|
125
|
+
axis: "y",
|
|
126
|
+
handle: ".node-input-option-handle",
|
|
127
|
+
cursor: "move",
|
|
128
|
+
});
|
|
129
|
+
},
|
|
130
|
+
oneditsave: function () {
|
|
131
|
+
const options = $("#node-input-option-container").children();
|
|
132
|
+
const node = this;
|
|
133
|
+
node.options = [];
|
|
134
|
+
options.each(function (i) {
|
|
135
|
+
const option = $(this);
|
|
136
|
+
const o = {
|
|
137
|
+
label: option.find(".node-input-option-label").val(),
|
|
138
|
+
// condition: option.find('.node-input-option-condition').val()
|
|
139
|
+
};
|
|
116
140
|
|
|
117
|
-
|
|
118
|
-
|
|
141
|
+
node.options.push(o);
|
|
142
|
+
});
|
|
119
143
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
144
|
+
this.outputs = node.options.length || 1;
|
|
145
|
+
},
|
|
146
|
+
});
|
|
123
147
|
</script>
|
|
124
148
|
|
|
125
|
-
<script type="text/html" data-template-name="dynamic-form">
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
149
|
+
<script type="text/html" data-template-name="ui-dynamic-form">
|
|
150
|
+
<div class="form-row">
|
|
151
|
+
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
|
|
152
|
+
<input type="text" id="node-input-name" placeholder="Name">
|
|
153
|
+
</div>
|
|
154
|
+
<div class="form-row">
|
|
155
|
+
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
|
|
156
|
+
<input type="text" id="node-input-group">
|
|
157
|
+
</div>
|
|
158
|
+
<div class="form-row">
|
|
159
|
+
<label><i class="fa fa-object-group"></i> <span data-i18n="ui-dynamic-form.label.size"></label>
|
|
160
|
+
<input type="hidden" id="node-input-width">
|
|
161
|
+
<input type="hidden" id="node-input-height">
|
|
162
|
+
<button class="editor-button" id="node-input-size"></button>
|
|
163
|
+
</div>
|
|
140
164
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
165
|
+
<div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
|
|
166
|
+
<label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
|
|
167
|
+
<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%;">
|
|
168
|
+
<span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
|
|
169
|
+
<ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
|
|
170
|
+
</div>
|
|
171
|
+
<a
|
|
172
|
+
data-html="true"
|
|
173
|
+
title="Dynamic Property: Send 'msg.options' in order to override this property."
|
|
174
|
+
class="red-ui-button ui-node-popover-title"
|
|
175
|
+
style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
|
|
176
|
+
<i style="font-family: ui-serif;">fx</i>
|
|
177
|
+
</a>
|
|
178
|
+
</div>
|
|
179
|
+
<!-- Add Option Button -->
|
|
180
|
+
<div class="form-row">
|
|
181
|
+
<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>
|
|
182
|
+
</div>
|
|
159
183
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
184
|
+
<div class="form-row">
|
|
185
|
+
<label for="node-input-waiting_title"><i class="fa fa-hand"></i>Title for waiting text.</label>
|
|
186
|
+
<input type="text" id="node-input-waiting_title">
|
|
187
|
+
</div>
|
|
188
|
+
<div class="form-row">
|
|
189
|
+
<label for="node-input-waiting_info"><i class="fa fa-hand"></i>Text for waiting text.</label>
|
|
190
|
+
<input type="text" id="node-input-waiting_info">
|
|
191
|
+
</div>
|
|
168
192
|
</script>
|
package/nodes/dynamic-form.js
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
1
|
module.exports = function (RED) {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
function DynamicFormNode(config) {
|
|
3
|
+
RED.nodes.createNode(this, config);
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
const node = this;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
// which group are we rendering this widget
|
|
8
|
+
const group = RED.nodes.getNode(config.group);
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const base = group.getBase();
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
12
|
+
// server-side event handlers
|
|
13
|
+
const evts = {
|
|
14
|
+
onAction: true,
|
|
15
|
+
onInput: function (msg, send, done) {
|
|
16
|
+
// store the latest value in our Node-RED datastore
|
|
17
|
+
base.stores.data.save(base, node, msg);
|
|
18
|
+
},
|
|
19
|
+
onSocket: {
|
|
20
|
+
"my-custom-event": function (conn, id, msg) {
|
|
21
|
+
console.info('"my-custom-event" received:', conn.id, id, msg);
|
|
22
|
+
console.info("conn.id:", conn.id);
|
|
23
|
+
console.info("id:", id);
|
|
24
|
+
console.info("msg:", msg);
|
|
25
|
+
console.info("node.id:", node.id);
|
|
26
|
+
// emit a msg in Node-RED from this node
|
|
27
|
+
node.send(msg);
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
32
|
+
// inform the dashboard UI that we are adding this node
|
|
33
|
+
if (group) {
|
|
34
|
+
group.register(node, config, evts);
|
|
35
|
+
} else {
|
|
36
|
+
node.error("No group configured");
|
|
38
37
|
}
|
|
38
|
+
}
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
40
|
+
RED.nodes.registerType("ui-dynamic-form", DynamicFormNode, {
|
|
41
|
+
defaults: {
|
|
42
|
+
outputs: { value: 1 },
|
|
43
|
+
},
|
|
44
|
+
outputs: function (config) {
|
|
45
|
+
return config.outputs || 1;
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
};
|
package/package.json
CHANGED
|
@@ -1,85 +1,85 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
"name": "@5minds/node-red-dashboard-2-processcube-dynamic-form",
|
|
3
|
+
"version": "1.0.15",
|
|
4
|
+
"description": "The ui component for the ProcessCube dynamic-form",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"processcube",
|
|
7
|
+
"dynamic-form",
|
|
8
|
+
"node-red",
|
|
9
|
+
"node-red-dashboard-2"
|
|
10
|
+
],
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/5minds/.gitnode-red-dashboard-2-processcube-dynamic-form"
|
|
14
|
+
},
|
|
15
|
+
"license": "Apache-2.0",
|
|
16
|
+
"author": {
|
|
17
|
+
"name": "Martin Moellenbeck",
|
|
18
|
+
"url": "https://github.com/moellenbeck"
|
|
19
|
+
},
|
|
20
|
+
"contributors": [
|
|
21
|
+
{
|
|
22
|
+
"name": "Robin Lenz",
|
|
23
|
+
"url": "https://github.com/roblen45"
|
|
14
24
|
},
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
"
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
"
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
"
|
|
72
|
-
|
|
73
|
-
"dynamic-form": "nodes/dynamic-form.js"
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
"node-red-dashboard-2": {
|
|
77
|
-
"version": "1.0.0",
|
|
78
|
-
"widgets": {
|
|
79
|
-
"dynamic-form": {
|
|
80
|
-
"output": "dynamic-form.umd.js",
|
|
81
|
-
"component": "DynamicForm"
|
|
82
|
-
}
|
|
83
|
-
}
|
|
25
|
+
{
|
|
26
|
+
"name": "Luis Thieme",
|
|
27
|
+
"url": "https://github.com/luisthieme"
|
|
28
|
+
}
|
|
29
|
+
],
|
|
30
|
+
"exports": {
|
|
31
|
+
"import": "./resources/dynamic-form.esm.js",
|
|
32
|
+
"require": "./resources/dynamic-form.umd.js"
|
|
33
|
+
},
|
|
34
|
+
"files": [
|
|
35
|
+
"dist/*",
|
|
36
|
+
"nodes/*",
|
|
37
|
+
"ui/*",
|
|
38
|
+
"resources/*"
|
|
39
|
+
],
|
|
40
|
+
"scripts": {
|
|
41
|
+
"build": "vite build",
|
|
42
|
+
"build:dev": "NODE_ENV=development vite build",
|
|
43
|
+
"dev": "NODE_ENV=development vite build --watch",
|
|
44
|
+
"dev:prod": "vite build --watch",
|
|
45
|
+
"lint": "npm run lint:js && npm run lint:package",
|
|
46
|
+
"lint:fix": "npm run lint:js:fix && npm run lint:package:fix",
|
|
47
|
+
"lint:js": "eslint --ext .js,.vue,.cjs,.mjs .",
|
|
48
|
+
"lint:js:fix": "yarn lint:js --fix",
|
|
49
|
+
"lint:package": "sort-package-json --check 'package.json'",
|
|
50
|
+
"lint:package:fix": "sort-package-json 'package.json'"
|
|
51
|
+
},
|
|
52
|
+
"dependencies": {
|
|
53
|
+
"to-title-case": "^1.0.0",
|
|
54
|
+
"vue": "^3.3.8",
|
|
55
|
+
"vuex": "^4.1.0"
|
|
56
|
+
},
|
|
57
|
+
"devDependencies": {
|
|
58
|
+
"@vitejs/plugin-vue": "^4.5.0",
|
|
59
|
+
"eslint": "^8.53.0",
|
|
60
|
+
"eslint-config-standard": "^17.1.0",
|
|
61
|
+
"eslint-plugin-import": "^2.29.0",
|
|
62
|
+
"eslint-plugin-n": "^16.3.1",
|
|
63
|
+
"eslint-plugin-vue": "^9.18.1",
|
|
64
|
+
"vite": "^5.0.13",
|
|
65
|
+
"vite-plugin-css-injected-by-js": "^3.3.0"
|
|
66
|
+
},
|
|
67
|
+
"engines": {
|
|
68
|
+
"node": ">=14"
|
|
69
|
+
},
|
|
70
|
+
"node-red": {
|
|
71
|
+
"version": ">=3.0.0",
|
|
72
|
+
"nodes": {
|
|
73
|
+
"ui-dynamic-form": "nodes/dynamic-form.js"
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"node-red-dashboard-2": {
|
|
77
|
+
"version": "1.0.0",
|
|
78
|
+
"widgets": {
|
|
79
|
+
"ui-dynamic-form": {
|
|
80
|
+
"output": "ui-dynamic-form.umd.js",
|
|
81
|
+
"component": "DynamicForm"
|
|
82
|
+
}
|
|
84
83
|
}
|
|
84
|
+
}
|
|
85
85
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dynamic-form-wrapper[data-v-37f46fd0]{padding:10px;margin:10px;border:1px solid black}.dynamic-form-class[data-v-37f46fd0]{color:green;font-weight:700}h1[data-v-37f46fd0]{margin-bottom:10px}h2[data-v-37f46fd0]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-37f46fd0]{margin-top:1rem}p[data-v-37f46fd0]{margin-bottom:5px}ul li[data-v-37f46fd0]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-37f46fd0]{padding:12px;margin:12px;background-color:#eee}code[data-v-37f46fd0]{font-size:.825rem;color:#ae0000}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
+
(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuex")):typeof define=="function"&&define.amd?define(["exports","vue","vuex"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["ui-dynamic-form"]={},n.Vue,n.vuex))})(this,function(n,e,p){"use strict";const u=(t,o)=>{const s=t.__vccOpts||t;for(const[l,r]of o)s[l]=r;return s},f={name:"DynamicForm",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},setup(t){console.info("DynamicForm setup with:",t),console.debug("Vue function loaded correctly",e.markRaw)},data(){return{actions:[],form:{},formData:{}}},computed:{...p.mapState("data",["messages"]),waiting_title(){return this.props.waiting_title||"Warten auf den Usertask..."},waiting_info(){return this.props.waiting_info||"Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist."}},mounted(){this.$socket.on("widget-load:"+this.id,t=>{this.init(),this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.on("msg-input:"+this.id,t=>{this.init(),t.payload&&t.payload.userTask&&t.payload.userTask.startToken&&(this.formData={...t.payload.userTask.startToken},console.info(this.formData)),this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.emit("widget-load",this.id)},unmounted(){var t,o;(t=this.$socket)==null||t.off("widget-load"+this.id),(o=this.$socket)==null||o.off("msg-input:"+this.id)},methods:{hasUserTask(){return this.messages&&this.messages[this.id]&&this.messages[this.id].payload.userTask},userTask(){return this.hasUserTask()?this.messages[this.id].payload.userTask:{}},fields(){return(this.hasUserTask()?this.userTask().userTaskConfig.formFields:[]).map(s=>({...s,component:k(s.type),items:h(s.type,s)}))},hasFields(){return this.messages&&this.messages[this.id]&&this.messages[this.id].payload.userTask!==void 0},send(t,o){const s=[];s[o]=t,console.info(s),this.$socket.emit("widget-action",this.id,s)},init(){this.actions=this.props.options},actionFn(t){this.send({payload:{formData:this.formData,userTask:this.userTask()}},this.actions.findIndex(o=>o.label===t))}}};function h(t,o){return t==="enum"?o.enumValues.map(s=>({title:s.name,value:s.id})):null}function k(t){switch(t){case"string":return"v-text-field";case"long":case"date":return"v-text-field";case"enum":return"v-select";case"boolean":return"v-checkbox";case"text":return"v-text-field";case"select":return"v-select";case"checkbox":return"v-checkbox";case"radio":return"v-radio";case"switch":return"v-switch";case"slider":return"v-slider";case"time":return"v-time-picker";case"datetime":return"v-datetime-picker";case"color":return"v-color-picker";case"file":return"v-file-input";case"textarea":return"v-textarea";case"password":return"v-text-field";case"number":return"v-text-field";case"email":return"v-text-field";case"tel":return"v-text-field";case"url":return"v-text-field";default:return"v-text-field"}}const _={className:"dynamic-form-wrapper"},y={key:0},x={key:1};function g(t,o,s,l,r,a){const T=e.resolveComponent("v-col"),d=e.resolveComponent("v-row"),b=e.resolveComponent("v-btn"),B=e.resolveComponent("v-form"),C=e.resolveComponent("v-alert");return e.openBlock(),e.createElementBlock("div",_,[a.hasFields()?(e.openBlock(),e.createElementBlock("p",y,[e.createVNode(B,{ref:"form",modelValue:r.form,"onUpdate:modelValue":o[0]||(o[0]=i=>r.form=i)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.fields(),(i,c)=>(e.openBlock(),e.createBlock(d,{key:c},{default:e.withCtx(()=>[e.createVNode(T,{cols:"12"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.component),{id:i.id,modelValue:r.formData[i.id],"onUpdate:modelValue":m=>r.formData[i.id]=m,required:i.required,items:i.items,label:i.label},null,8,["id","modelValue","onUpdate:modelValue","required","items","label"]))]),_:2},1024)]),_:2},1024))),128)),e.createVNode(d,{style:{display:"flex",gap:"8px",padding:"12px"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.actions,(i,c)=>(e.openBlock(),e.createElementBlock("div",{key:c,style:{"flex-grow":"1"}},[(e.openBlock(),e.createBlock(b,{key:c,style:{width:"100%"},onClick:m=>a.actionFn(i.label)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.label),1)]),_:2},1032,["onClick"]))]))),128))]),_:1})]),_:1},8,["modelValue"])])):(e.openBlock(),e.createElementBlock("p",x,[e.createVNode(C,{text:a.waiting_info,title:a.waiting_title},null,8,["text","title"])]))])}const w=u(f,[["render",g],["__scopeId","data-v-37f46fd0"]]);n.DynamicForm=w,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -1,44 +1,44 @@
|
|
|
1
1
|
.dynamic-form-wrapper {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
padding: 10px;
|
|
3
|
+
margin: 10px;
|
|
4
|
+
border: 1px solid black;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.dynamic-form-class {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
color: green;
|
|
9
|
+
font-weight: bold;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
h1 {
|
|
13
|
-
|
|
13
|
+
margin-bottom: 10px;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
h2 {
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
margin-top: 1.5rem;
|
|
18
|
+
margin-bottom: 0.75rem;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
h3 {
|
|
22
|
-
|
|
22
|
+
margin-top: 1rem;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
p {
|
|
26
|
-
|
|
26
|
+
margin-bottom: 5px;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
ul li {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
list-style-type: circle;
|
|
31
|
+
list-style-position: inside;
|
|
32
|
+
margin-left: 15px;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
pre {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
padding: 12px;
|
|
37
|
+
margin: 12px;
|
|
38
|
+
background-color: #eee;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
code {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
42
|
+
font-size: 0.825rem;
|
|
43
|
+
color: #ae0000;
|
|
44
|
+
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dynamic-form-wrapper[data-v-37f46fd0]{padding:10px;margin:10px;border:1px solid black}.dynamic-form-class[data-v-37f46fd0]{color:green;font-weight:700}h1[data-v-37f46fd0]{margin-bottom:10px}h2[data-v-37f46fd0]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-37f46fd0]{margin-top:1rem}p[data-v-37f46fd0]{margin-bottom:5px}ul li[data-v-37f46fd0]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-37f46fd0]{padding:12px;margin:12px;background-color:#eee}code[data-v-37f46fd0]{font-size:.825rem;color:#ae0000}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
-
(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuex")):typeof define=="function"&&define.amd?define(["exports","vue","vuex"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["dynamic-form"]={},n.Vue,n.vuex))})(this,function(n,e,p){"use strict";const u=(t,o)=>{const s=t.__vccOpts||t;for(const[l,r]of o)s[l]=r;return s},f={name:"DynamicForm",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},setup(t){console.info("DynamicForm setup with:",t),console.debug("Vue function loaded correctly",e.markRaw)},data(){return{actions:[],form:{},formData:{}}},computed:{...p.mapState("data",["messages"]),waiting_title(){return this.props.waiting_title||"Warten auf den Usertask..."},waiting_info(){return this.props.waiting_info||"Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist."}},mounted(){this.$socket.on("widget-load:"+this.id,t=>{this.init(),this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.on("msg-input:"+this.id,t=>{this.init(),t.payload&&t.payload.userTask&&t.payload.userTask.startToken&&(this.formData={...t.payload.userTask.startToken},console.info(this.formData)),this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.emit("widget-load",this.id)},unmounted(){var t,o;(t=this.$socket)==null||t.off("widget-load"+this.id),(o=this.$socket)==null||o.off("msg-input:"+this.id)},methods:{hasUserTask(){return this.messages&&this.messages[this.id]&&this.messages[this.id].payload.userTask},userTask(){return this.hasUserTask()?this.messages[this.id].payload.userTask:{}},fields(){return(this.hasUserTask()?this.userTask().userTaskConfig.formFields:[]).map(s=>({...s,component:k(s.type),items:h(s.type,s)}))},hasFields(){return this.messages&&this.messages[this.id]&&this.messages[this.id].payload.userTask!==void 0},send(t,o){const s=[];s[o]=t,console.info(s),this.$socket.emit("widget-action",this.id,s)},init(){this.actions=this.props.options},actionFn(t){this.send({payload:{formData:this.formData,userTask:this.userTask()}},this.actions.findIndex(o=>o.label===t))}}};function h(t,o){return t==="enum"?o.enumValues.map(s=>({title:s.name,value:s.id})):null}function k(t){switch(t){case"string":return"v-text-field";case"long":case"date":return"v-text-field";case"enum":return"v-select";case"boolean":return"v-checkbox";case"text":return"v-text-field";case"select":return"v-select";case"checkbox":return"v-checkbox";case"radio":return"v-radio";case"switch":return"v-switch";case"slider":return"v-slider";case"time":return"v-time-picker";case"datetime":return"v-datetime-picker";case"color":return"v-color-picker";case"file":return"v-file-input";case"textarea":return"v-textarea";case"password":return"v-text-field";case"number":return"v-text-field";case"email":return"v-text-field";case"tel":return"v-text-field";case"url":return"v-text-field";default:return"v-text-field"}}const _={className:"dynamic-form-wrapper"},y={key:0},x={key:1};function g(t,o,s,l,r,a){const T=e.resolveComponent("v-col"),d=e.resolveComponent("v-row"),b=e.resolveComponent("v-btn"),B=e.resolveComponent("v-form"),C=e.resolveComponent("v-alert");return e.openBlock(),e.createElementBlock("div",_,[a.hasFields()?(e.openBlock(),e.createElementBlock("p",y,[e.createVNode(B,{ref:"form",modelValue:r.form,"onUpdate:modelValue":o[0]||(o[0]=i=>r.form=i)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.fields(),(i,c)=>(e.openBlock(),e.createBlock(d,{key:c},{default:e.withCtx(()=>[e.createVNode(T,{cols:"12"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.component),{id:i.id,modelValue:r.formData[i.id],"onUpdate:modelValue":m=>r.formData[i.id]=m,required:i.required,items:i.items,label:i.label},null,8,["id","modelValue","onUpdate:modelValue","required","items","label"]))]),_:2},1024)]),_:2},1024))),128)),e.createVNode(d,{style:{display:"flex",gap:"8px",padding:"12px"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.actions,(i,c)=>(e.openBlock(),e.createElementBlock("div",{key:c,style:{"flex-grow":"1"}},[(e.openBlock(),e.createBlock(b,{key:c,style:{width:"100%"},onClick:m=>a.actionFn(i.label)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.label),1)]),_:2},1032,["onClick"]))]))),128))]),_:1})]),_:1},8,["modelValue"])])):(e.openBlock(),e.createElementBlock("p",x,[e.createVNode(C,{text:a.waiting_info,title:a.waiting_title},null,8,["text","title"])]))])}const w=u(f,[["render",g],["__scopeId","data-v-37f46fd0"]]);n.DynamicForm=w,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
|