@5minds/node-red-dashboard-2-processcube-dynamic-form 1.0.13 → 1.0.14
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/ui/stylesheets/dynamic-form.css +19 -19
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.14",
|
|
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": "dynamic-form.umd.js",
|
|
81
|
+
"component": "DynamicForm"
|
|
82
|
+
}
|
|
84
83
|
}
|
|
84
|
+
}
|
|
85
85
|
}
|
|
@@ -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
|
+
}
|