@5minds/node-red-dashboard-2-processcube-dynamic-form 1.0.12 → 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.
@@ -1,168 +1,192 @@
1
1
  <script type="text/javascript">
2
- RED.nodes.registerType('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(v.map(function (o) { return o.label }));
13
- return v.length === unique.size;
14
- }
15
- },
16
- waiting_title: { value: "Waiting for Warten auf den Usertask..." },
17
- waiting_info: { value: "Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist." },
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
- inputs: 1,
33
- outputs: 1,
34
- outputLabels: function(index) {
35
- return this.options[index].label
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
- icon: "file.svg",
38
- label: function() {
39
- return this.name || "dynamic-form";
40
- },
41
- oneditprepare: function () {
42
- $('#node-input-size').elementSizer({
43
- width: '#node-input-width',
44
- height: '#node-input-height',
45
- group: '#node-input-group'
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
- function generateOption(i, option) {
49
- const container = $('<li/>', {
50
- style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;'
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
- // Create input fields for value and label
54
- const row = $('<div/>').appendTo(container);
55
- $('<input/>', {
56
- class: 'node-input-option-label',
57
- type: 'text',
58
- style: 'margin-left:7px; width:calc(100% - 48px);',
59
- placeholder: 'Label',
60
- value: option.label
61
- }).appendTo(row).typedInput({
62
- type: 'str', types: ['str']
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
- // $('<input/>', {
66
- // class: 'node-input-option-condition',
67
- // type: 'text',
68
- // style: 'margin-left:7px; width:calc(50% - 32px);',
69
- // placeholder: 'Condition',
70
- // value: option.condition
71
- // }).appendTo(row).typedInput({
72
- // type: 'str', types: ['str']
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
- // Create delete button for the option
76
- const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row);
77
- const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan);
78
- $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
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
- deleteButton.click(function () {
81
- container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' });
82
- container.fadeOut(300, function () {
83
- $(this).remove();
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
- $('#node-input-option-container').append(container);
88
- }
106
+ $("#node-input-option-container").append(container);
107
+ }
89
108
 
90
- $('#node-input-add-option').click(function () {
91
- generateOption($('#node-input-option-container').children().length + 1, {});
92
- $('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight);
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
- for (let i = 0; i < this.options.length; i++) {
96
- const option = this.options[i];
97
- generateOption(i + 1, option);
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
- $('#node-input-option-container').sortable({
101
- axis: 'y',
102
- handle: '.node-input-option-handle',
103
- cursor: 'move'
104
- });
105
- },
106
- oneditsave: function () {
107
- const options = $('#node-input-option-container').children();
108
- const node = this;
109
- node.options = [];
110
- options.each(function (i) {
111
- const option = $(this);
112
- const o = {
113
- label: option.find('.node-input-option-label').val(),
114
- // condition: option.find('.node-input-option-condition').val()
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
- node.options.push(o);
118
- });
141
+ node.options.push(o);
142
+ });
119
143
 
120
- this.outputs = node.options.length || 1
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
- <div class="form-row">
127
- <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
128
- <input type="text" id="node-input-name" placeholder="Name">
129
- </div>
130
- <div class="form-row">
131
- <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
132
- <input type="text" id="node-input-group">
133
- </div>
134
- <div class="form-row">
135
- <label><i class="fa fa-object-group"></i> <span data-i18n="dynamic-form.label.size"></label>
136
- <input type="hidden" id="node-input-width">
137
- <input type="hidden" id="node-input-height">
138
- <button class="editor-button" id="node-input-size"></button>
139
- </div>
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
- <div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
142
- <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
143
- <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%;">
144
- <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
145
- <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
146
- </div>
147
- <a
148
- data-html="true"
149
- title="Dynamic Property: Send 'msg.options' in order to override this property."
150
- class="red-ui-button ui-node-popover-title"
151
- 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;">
152
- <i style="font-family: ui-serif;">fx</i>
153
- </a>
154
- </div>
155
- <!-- Add Option Button -->
156
- <div class="form-row">
157
- <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>
158
- </div>
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
- <div class="form-row">
161
- <label for="node-input-waiting_title"><i class="fa fa-hand"></i>Title for waiting text.</label>
162
- <input type="text" id="node-input-waiting_title">
163
- </div>
164
- <div class="form-row">
165
- <label for="node-input-waiting_info"><i class="fa fa-hand"></i>Text for waiting text.</label>
166
- <input type="text" id="node-input-waiting_info">
167
- </div>
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>
@@ -1,48 +1,48 @@
1
1
  module.exports = function (RED) {
2
- function DynamicFormNode (config) {
3
- RED.nodes.createNode(this, config)
2
+ function DynamicFormNode(config) {
3
+ RED.nodes.createNode(this, config);
4
4
 
5
- const node = this
5
+ const node = this;
6
6
 
7
- // which group are we rendering this widget
8
- const group = RED.nodes.getNode(config.group)
7
+ // which group are we rendering this widget
8
+ const group = RED.nodes.getNode(config.group);
9
9
 
10
- const base = group.getBase()
10
+ const base = group.getBase();
11
11
 
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
- }
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
- // 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')
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
- RED.nodes.registerType('dynamic-form', DynamicFormNode, {
41
- defaults: {
42
- outputs: { value: 1 }
43
- },
44
- outputs: function(config) {
45
- return config.outputs || 1;
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
- "name": "@5minds/node-red-dashboard-2-processcube-dynamic-form",
3
- "version": "1.0.12",
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"
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
- "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"
24
- },
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
- "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,3 +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-19b58e9c]{padding:10px;margin:10px;border:1px solid black}.dynamic-form-class[data-v-19b58e9c]{color:green;font-weight:700}h1[data-v-19b58e9c]{margin-bottom:10px}h2[data-v-19b58e9c]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-19b58e9c]{margin-top:1rem}p[data-v-19b58e9c]{margin-bottom:5px}ul li[data-v-19b58e9c]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-19b58e9c]{padding:12px;margin:12px;background-color:#eee}code[data-v-19b58e9c]{font-size:.825rem;color:#ae0000}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
2
- (function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuex")):typeof define=="function"&&define.amd?define(["exports","vue","vuex"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r["dynamic-form"]={},r.Vue,r.vuex))})(this,function(r,e,p){"use strict";const u=(t,o)=>{const s=t.__vccOpts||t;for(const[l,a]of o)s[l]=a;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&&t.payload.userTask.startToken.formData&&(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,a,i){const b=e.resolveComponent("v-col"),d=e.resolveComponent("v-row"),T=e.resolveComponent("v-btn"),B=e.resolveComponent("v-form"),C=e.resolveComponent("v-alert");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createCommentVNode(" Component must be wrapped in a block so props such as className and style can be passed in from parent "),e.createElementVNode("div",_,[i.hasFields()?(e.openBlock(),e.createElementBlock("p",y,[e.createVNode(B,{ref:"form",modelValue:a.form,"onUpdate:modelValue":o[0]||(o[0]=n=>a.form=n)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.fields(),(n,c)=>(e.openBlock(),e.createBlock(d,{key:c},{default:e.withCtx(()=>[e.createVNode(b,{cols:"12"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.component),{id:n.id,modelValue:a.formData[n.id],"onUpdate:modelValue":m=>a.formData[n.id]=m,required:n.required,items:n.items,label:n.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(a.actions,(n,c)=>(e.openBlock(),e.createElementBlock("div",{key:c,style:{"flex-grow":"1"}},[(e.openBlock(),e.createBlock(T,{key:c,style:{width:"100%"},onClick:m=>i.actionFn(n.label)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.label),1)]),_:2},1032,["onClick"]))]))),128))]),_:1})]),_:1},8,["modelValue"])])):(e.openBlock(),e.createElementBlock("p",x,[e.createVNode(C,{text:i.waiting_info,title:i.waiting_title},null,8,["text","title"])]))])],2112)}const w=u(f,[["render",g],["__scopeId","data-v-19b58e9c"],["__file","/Users/moellenbeck/projects/5minds/reps/node-red-dashboard-2-processcube-dynamic-form/ui/components/DynamicForm.vue"]]);r.DynamicForm=w,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
3
- //# sourceMappingURL=dynamic-form.umd.js.map
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"})});
@@ -88,7 +88,7 @@ export default {
88
88
  // store the latest message in our client-side vuex store when we receive a new message
89
89
  this.init()
90
90
 
91
- if (msg.payload && msg.payload.userTask && msg.payload.userTask.startToken && msg.payload.userTask.startToken.formData) {
91
+ if (msg.payload && msg.payload.userTask && msg.payload.userTask.startToken) {
92
92
  //this.formData = { ...msg.payload.userTask.startToken.formData };
93
93
  this.formData = { ...msg.payload.userTask.startToken }
94
94
  console.info(this.formData)
@@ -1,44 +1,44 @@
1
1
  .dynamic-form-wrapper {
2
- padding: 10px;
3
- margin: 10px;
4
- border: 1px solid black;
2
+ padding: 10px;
3
+ margin: 10px;
4
+ border: 1px solid black;
5
5
  }
6
6
 
7
7
  .dynamic-form-class {
8
- color: green;
9
- font-weight: bold;
8
+ color: green;
9
+ font-weight: bold;
10
10
  }
11
11
 
12
12
  h1 {
13
- margin-bottom: 10px
13
+ margin-bottom: 10px;
14
14
  }
15
15
 
16
16
  h2 {
17
- margin-top: 1.5rem;
18
- margin-bottom: 0.75rem;
17
+ margin-top: 1.5rem;
18
+ margin-bottom: 0.75rem;
19
19
  }
20
20
 
21
21
  h3 {
22
- margin-top: 1rem;
22
+ margin-top: 1rem;
23
23
  }
24
24
 
25
25
  p {
26
- margin-bottom: 5px;
26
+ margin-bottom: 5px;
27
27
  }
28
28
 
29
29
  ul li {
30
- list-style-type: circle;
31
- list-style-position: inside;
32
- margin-left: 15px;
30
+ list-style-type: circle;
31
+ list-style-position: inside;
32
+ margin-left: 15px;
33
33
  }
34
34
 
35
35
  pre {
36
- padding: 12px;
37
- margin: 12px;
38
- background-color: #eee;
36
+ padding: 12px;
37
+ margin: 12px;
38
+ background-color: #eee;
39
39
  }
40
40
 
41
41
  code {
42
- font-size: 0.825rem;
43
- color: #ae0000;
44
- }
42
+ font-size: 0.825rem;
43
+ color: #ae0000;
44
+ }
@@ -1 +0,0 @@
1
- {"version":3,"file":"dynamic-form.umd.js","sources":["../ui/components/DynamicForm.vue"],"sourcesContent":["<template>\n <!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->\n <div className=\"dynamic-form-wrapper\">\n <p v-if=\"hasFields()\">\n <v-form ref=\"form\" v-model=\"form\">\n <v-row v-for=\"(field, index) in fields()\" :key=\"index\">\n <v-col cols=\"12\">\n <component\n :is=\"field.component\"\n :id=\"field.id\"\n v-model=\"formData[field.id]\"\n :required=\"field.required\"\n :items=\"field.items\"\n :label=\"field.label\" />\n </v-col>\n </v-row>\n\n <v-row style=\"display: flex; gap: 8px; padding: 12px\">\n <div\n v-for=\"(action, index) in actions\"\n :key=\"index\"\n style=\"flex-grow: 1\">\n <v-btn\n :key=\"index\"\n style=\"width: 100%\"\n @click=\"actionFn(action.label)\">\n {{ action.label }}\n </v-btn>\n </div>\n </v-row>\n </v-form>\n </p>\n <p v-else>\n <v-alert :text=\"waiting_info\" :title=\"waiting_title\" />\n </p>\n </div>\n</template>\n\n<script>\nimport { markRaw } from \"vue\";\nimport { mapState } from \"vuex\";\n\nexport default {\n name: \"DynamicForm\",\n inject: [\"$socket\"],\n props: {\n /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */\n id: { type: String, required: true },\n props: { type: Object, default: () => ({}) },\n state: {\n type: Object,\n default: () => ({ enabled: false, visible: false }),\n },\n },\n setup(props) {\n console.info(\"DynamicForm setup with:\", props);\n console.debug(\"Vue function loaded correctly\", markRaw);\n },\n data() {\n return {\n actions: [],\n form: {},\n formData: {},\n };\n },\n computed: {\n ...mapState(\"data\", [\"messages\"]),\n waiting_title() {\n return this.props.waiting_title || \"Warten auf den Usertask...\"\n },\n waiting_info() {\n return (\n this.props.waiting_info ||\n \"Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.\"\n );\n },\n },\n mounted() {\n this.$socket.on(\"widget-load:\" + this.id, (msg) => {\n this.init()\n\n this.$store.commit(\"data/bind\", {\n widgetId: this.id,\n msg,\n });\n });\n this.$socket.on(\"msg-input:\" + this.id, (msg) => {\n // store the latest message in our client-side vuex store when we receive a new message\n this.init()\n\n if (msg.payload && msg.payload.userTask && msg.payload.userTask.startToken && msg.payload.userTask.startToken.formData) {\n //this.formData = { ...msg.payload.userTask.startToken.formData };\n this.formData = { ...msg.payload.userTask.startToken }\n console.info(this.formData)\n }\n\n this.$store.commit(\"data/bind\", {\n widgetId: this.id,\n msg,\n });\n });\n // tell Node-RED that we're loading a new instance of this widget\n this.$socket.emit(\"widget-load\", this.id);\n },\n unmounted() {\n /* Make sure, any events you subscribe to on SocketIO are unsubscribed to here */\n this.$socket?.off(\"widget-load\" + this.id);\n this.$socket?.off(\"msg-input:\" + this.id);\n },\n methods: {\n hasUserTask() {\n return (\n this.messages &&\n this.messages[this.id] &&\n this.messages[this.id].payload.userTask\n );\n },\n userTask() {\n return this.hasUserTask() ? this.messages[this.id].payload.userTask : {};\n },\n fields() {\n const aFields = this.hasUserTask()\n ? this.userTask().userTaskConfig.formFields\n : [];\n\n const fieldMap = aFields.map((field) => ({\n ...field,\n component: mapFieldTypes(field.type),\n items: mapItems(field.type, field),\n }));\n\n return fieldMap;\n },\n hasFields() {\n return (\n this.messages &&\n this.messages[this.id] &&\n this.messages[this.id].payload.userTask !== undefined\n );\n },\n /*\n widget-action just sends a msg to Node-RED, it does not store the msg state server-side\n alternatively, you can use widget-change, which will also store the msg in the Node's datastore\n */\n send(msg, index) {\n const msgArr = [];\n msgArr[index] = msg;\n console.info(msgArr);\n this.$socket.emit(\"widget-action\", this.id, msgArr);\n },\n init() {\n this.actions = this.props.options;\n },\n actionFn(action) {\n this.send(\n { payload: { formData: this.formData, userTask: this.userTask() } },\n this.actions.findIndex((element) => element.label === action)\n );\n },\n },\n};\n\nfunction mapItems(type, field) {\n if (type === \"enum\") {\n return field.enumValues.map((enumValue) => ({\n title: enumValue.name,\n value: enumValue.id,\n }));\n } else {\n return null;\n }\n}\n\nfunction mapFieldTypes(fieldType) {\n switch (fieldType) {\n case \"string\":\n return \"v-text-field\";\n case \"long\":\n case \"date\":\n return \"v-text-field\";\n case \"enum\":\n return \"v-select\";\n case \"boolean\":\n return \"v-checkbox\";\n case \"text\":\n return \"v-text-field\";\n case \"select\":\n return \"v-select\";\n case \"checkbox\":\n return \"v-checkbox\";\n case \"radio\":\n return \"v-radio\";\n case \"switch\":\n return \"v-switch\";\n case \"slider\":\n return \"v-slider\";\n case \"time\":\n return \"v-time-picker\";\n case \"datetime\":\n return \"v-datetime-picker\";\n case \"color\":\n return \"v-color-picker\";\n case \"file\":\n return \"v-file-input\";\n case \"textarea\":\n return \"v-textarea\";\n case \"password\":\n return \"v-text-field\";\n case \"number\":\n return \"v-text-field\";\n case \"email\":\n return \"v-text-field\";\n case \"tel\":\n return \"v-text-field\";\n case \"url\":\n return \"v-text-field\";\n default:\n return \"v-text-field\";\n }\n}\n</script>\n\n<style scoped>\n/* CSS is auto scoped, but using named classes is still recommended */\n@import \"../stylesheets/dynamic-form.css\";\n</style>\n"],"names":["_sfc_main","props","markRaw","mapState","msg","_a","_b","field","mapFieldTypes","mapItems","index","msgArr","action","element","type","enumValue","fieldType","_hoisted_1","_openBlock","_createElementBlock","_Fragment","_createCommentVNode","_createElementVNode","$options","_hoisted_2","_createVNode","_component_v_form","$data","_cache","$event","_withCtx","_renderList","_createBlock","_component_v_row","_component_v_col","_resolveDynamicComponent","_component_v_btn","_createTextVNode","_toDisplayString","_hoisted_3","_component_v_alert"],"mappings":"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"}