From 7e05726be02cbf45233ad634bf897a4fd5866a0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20M=C3=B6llenbeck?= Date: Sun, 16 Jun 2024 20:06:14 +0200 Subject: [PATCH] Add a sample and build a new umd.js file --- example/dynamic-form-sample-flows.json | 749 +++++++++++++++++++++++++ resources/dynamic-form.umd.js | 2 +- 2 files changed, 750 insertions(+), 1 deletion(-) create mode 100644 example/dynamic-form-sample-flows.json diff --git a/example/dynamic-form-sample-flows.json b/example/dynamic-form-sample-flows.json new file mode 100644 index 0000000..d83a9cd --- /dev/null +++ b/example/dynamic-form-sample-flows.json @@ -0,0 +1,749 @@ +[ + { + "id": "b195bc3ca2e1a665", + "type": "tab", + "label": "Dashboard Symrise", + "disabled": false, + "info": "", + "env": [] + }, + { + "id": "09cdc14cfb8ad687", + "type": "group", + "z": "b195bc3ca2e1a665", + "style": { + "stroke": "#999999", + "stroke-opacity": "1", + "fill": "none", + "fill-opacity": "1", + "label": true, + "label-position": "nw", + "color": "#a4a4a4" + }, + "nodes": [ + "0f5978f327b01bfb", + "dbec84a2543dbe7e", + "c73156ccd3cd2a48", + "7c13c0a3b8824a63", + "786bf9ed5078de92", + "69723e56fb97b6c1", + "d5874ba4dd992935", + "5bdcd284c2b69386", + "71196d7ab2204d95", + "6ce155bbaaba083f", + "1d5b0759c3226e37", + "97afbbf01ec1cd88", + "2b3f33b7a9dceb49", + "a61cb4c20f79d872" + ], + "x": 14, + "y": 59, + "w": 1012, + "h": 282 + }, + { + "id": "ec36901abb138306", + "type": "group", + "z": "b195bc3ca2e1a665", + "style": { + "stroke": "#999999", + "stroke-opacity": "1", + "fill": "none", + "fill-opacity": "1", + "label": true, + "label-position": "nw", + "color": "#a4a4a4" + }, + "nodes": [ + "1224ebb8edb477d2", + "27a49417ac3a774b", + "9a0390c372b2016b", + "c09dc7d2787335ee", + "05284831924ef310", + "99475ac148f6484b", + "5a61ca5b5a13aa8d", + "ebd67a338575690d", + "1497b762d2ac1723", + "64068e75e541a72e", + "b8ac2a6ff7cc5ef1", + "493500b42d8d0f5b", + "34984ae3f4e83b0b", + "8e2a2f993ee7156a" + ], + "x": 14, + "y": 379, + "w": 952, + "h": 322 + }, + { + "id": "0f5978f327b01bfb", + "type": "ui-table", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "group": "8e2205abbb41495b", + "name": "Auftrage", + "label": "text", + "order": 1, + "width": "0", + "height": "0", + "maxrows": 0, + "passthru": false, + "autocols": true, + "showSearch": true, + "selectionType": "click", + "columns": [], + "x": 540, + "y": 160, + "wires": [ + [ + "69723e56fb97b6c1" + ] + ] + }, + { + "id": "dbec84a2543dbe7e", + "type": "http request", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "name": "", + "method": "GET", + "ret": "obj", + "paytoqs": "ignore", + "url": "http://localhost:56000/atlas_engine/api/v1/flow_node_instances?flowNodeType=bpmn%3AUserTask&state=suspended", + "tls": "", + "persist": false, + "proxy": "", + "insecureHTTPParser": false, + "authType": "bearer", + "senderr": false, + "headers": [], + "x": 290, + "y": 220, + "wires": [ + [ + "c73156ccd3cd2a48" + ] + ] + }, + { + "id": "c73156ccd3cd2a48", + "type": "function", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "name": "Felder filtern", + "func": "const table = [];\n\nmsg.payload.flowNodeInstances.forEach(function(element) {\n const row = {\n \"flowNodeName\": element.flowNodeName, \n \"state\": element.state,\n \"flowNodeInstanceId\": element.flowNodeInstanceId,\n \"startedAt\": element.startedAt\n }\n\n if (element.state == \"suspended\") {\n row[\"action\"] = \"do it\";\n } else {\n row[\"action\"] = \"nope ;-)\";\n }\n\n table.push(row);\n});;\n\nmsg.payload = table;\nreturn msg;", + "outputs": 1, + "timeout": 0, + "noerr": 0, + "initialize": "", + "finalize": "", + "libs": [], + "x": 370, + "y": 160, + "wires": [ + [ + "0f5978f327b01bfb" + ] + ] + }, + { + "id": "7c13c0a3b8824a63", + "type": "ui-control", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "name": "Seite navigieren", + "ui": "26a45d43c064bdb6", + "events": "all", + "x": 760, + "y": 300, + "wires": [ + [ + "786bf9ed5078de92" + ] + ] + }, + { + "id": "786bf9ed5078de92", + "type": "debug", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "name": "debug 4", + "active": true, + "tosidebar": true, + "console": false, + "tostatus": false, + "complete": "false", + "statusVal": "", + "statusType": "auto", + "x": 920, + "y": 300, + "wires": [] + }, + { + "id": "69723e56fb97b6c1", + "type": "switch", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "name": "", + "property": "payload.action", + "propertyType": "msg", + "rules": [ + { + "t": "eq", + "v": "do it", + "vt": "str" + } + ], + "checkall": "true", + "repair": false, + "outputs": 1, + "x": 530, + "y": 220, + "wires": [ + [ + "d5874ba4dd992935", + "1d5b0759c3226e37" + ] + ] + }, + { + "id": "d5874ba4dd992935", + "type": "function", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "name": "Seite UserTask", + "func": "msg.payload = { \n page: \"UserTask\",\n query: {\n flowNodeName: msg.payload.flowNodeName,\n flowNodeInstanceId: msg.payload.flowNodeInstanceId,\n state: msg.payload.state,\n action: msg.payload.action\n }\n};\nreturn msg;", + "outputs": 1, + "timeout": 0, + "noerr": 0, + "initialize": "", + "finalize": "", + "libs": [], + "x": 560, + "y": 300, + "wires": [ + [ + "7c13c0a3b8824a63", + "5bdcd284c2b69386" + ] + ] + }, + { + "id": "5bdcd284c2b69386", + "type": "link out", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "name": "link out 1", + "mode": "link", + "links": [ + "9a0390c372b2016b", + "fb52efa0588321f0" + ], + "x": 695, + "y": 220, + "wires": [] + }, + { + "id": "71196d7ab2204d95", + "type": "ui-button", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "group": "8e2205abbb41495b", + "name": "", + "label": "Aufgaben laden", + "order": 2, + "width": 0, + "height": 0, + "emulateClick": false, + "tooltip": "", + "color": "", + "bgcolor": "", + "className": "", + "icon": "", + "iconPosition": "left", + "payload": "", + "payloadType": "str", + "topic": "topic", + "topicType": "msg", + "x": 120, + "y": 160, + "wires": [ + [ + "dbec84a2543dbe7e" + ] + ] + }, + { + "id": "1224ebb8edb477d2", + "type": "debug", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "debug 3", + "active": true, + "tosidebar": true, + "console": false, + "tostatus": false, + "complete": "false", + "statusVal": "", + "statusType": "auto", + "x": 860, + "y": 480, + "wires": [] + }, + { + "id": "27a49417ac3a774b", + "type": "function", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "demo fields", + "func": "msg.payload = {\n \"formFields\": [\n {\n \"id\": \"text_id\",\n \"type\": \"v-text-field\",\n \"required\": false,\n \"label\": \"Text Label\",\n \"value\": \"hello test label\",\n \"title\": \"Some helpful text\"\n },\n {\n \"id\": \"autocomplete_id\",\n \"type\": \"v-autocomplete\",\n \"required\": false,\n \"value\": \"Florida\",\n \"label\": \"Autocomplete\",\n \"items\": [\n \"California\",\n \"Colorado\",\n \"Florida\",\n \"Georgia\",\n \"Texas\",\n \"Wyoming\"\n ],\n \"title\": \"Some helpful text\"\n },\n {\n \"id\": \"autocomplete2_id\",\n \"type\": \"v-autocomplete\",\n \"required\": false,\n \"label\": \"Autocomplete\",\n \"items\": [\n \"Hello\",\n \"World\"\n ],\n \"value\": \"\",\n \"title\": \"Some helpful text\"\n },\n {\n \"id\": \"number_id\",\n \"type\": \"v-text-field\",\n \"required\": true,\n \"label\": \"Number Label\",\n \"title\": \"Some helpful text\"\n },\n {\n \"id\": \"date_id\",\n \"type\": \"v-text-field\",\n \"required\": true,\n \"label\": \"Date Label\",\n \"title\": \"Some helpful text\"\n },\n {\n \"id\": \"boolean_id\",\n \"type\": \"v-text-field\",\n \"required\": false,\n \"value\": \"..\",\n \"label\": \"Boolean Label\",\n \"title\": \"Check for Yes\"\n }\n ]\n}\n\nreturn msg;", + "outputs": 1, + "timeout": 0, + "noerr": 0, + "initialize": "", + "finalize": "", + "libs": [], + "x": 270, + "y": 520, + "wires": [ + [ + "8e2a2f993ee7156a" + ] + ] + }, + { + "id": "9a0390c372b2016b", + "type": "link in", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "link in 1", + "links": [ + "5bdcd284c2b69386" + ], + "x": 155, + "y": 520, + "wires": [ + [ + "27a49417ac3a774b" + ] + ] + }, + { + "id": "c09dc7d2787335ee", + "type": "inject", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "", + "props": [ + { + "p": "payload" + } + ], + "repeat": "", + "crontab": "", + "once": false, + "onceDelay": 0.1, + "topic": "", + "payload": "{\"formFields\":[{\"id\":\"text_id\",\"type\":\"v-text-field\",\"required\":false,\"label\":\"Text Label\",\"value\":\"hello test label\",\"title\":\"Some helpful text\"},{\"id\":\"autocomplete_id\",\"type\":\"v-autocomplete\",\"required\":false,\"value\":\"Florida\",\"label\":\"Autocomplete\",\"items\":[\"California\",\"Colorado\",\"Florida\",\"Georgia\",\"Texas\",\"Wyoming\"],\"title\":\"Some helpful text\"},{\"id\":\"autocomplete2_id\",\"type\":\"v-autocomplete\",\"required\":false,\"label\":\"Autocomplete\",\"items\":[\"Hello\",\"World\"],\"value\":\"\",\"title\":\"Some helpful text\"},{\"id\":\"number_id\",\"type\":\"v-text-field\",\"required\":true,\"label\":\"Number Label\",\"title\":\"Some helpful text\"},{\"id\":\"date_id\",\"type\":\"v-text-field\",\"required\":true,\"label\":\"Date Label\",\"title\":\"Some helpful text\"},{\"id\":\"boolean_id\",\"type\":\"v-text-field\",\"required\":false,\"value\":\"....\",\"label\":\"Boolean Label\",\"title\":\"Check for Yes\"}]}", + "payloadType": "json", + "x": 270, + "y": 480, + "wires": [ + [ + "8e2a2f993ee7156a" + ] + ] + }, + { + "id": "6ce155bbaaba083f", + "type": "comment", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "name": "Tabelle mit Aufträgen laden", + "info": "", + "x": 150, + "y": 100, + "wires": [] + }, + { + "id": "05284831924ef310", + "type": "comment", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "Auftrag bearbeiten", + "info": "", + "x": 130, + "y": 420, + "wires": [] + }, + { + "id": "1d5b0759c3226e37", + "type": "debug", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "name": "debug 6", + "active": true, + "tosidebar": true, + "console": false, + "tostatus": false, + "complete": "false", + "statusVal": "", + "statusType": "auto", + "x": 880, + "y": 140, + "wires": [] + }, + { + "id": "97afbbf01ec1cd88", + "type": "ui-event", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "ui": "26a45d43c064bdb6", + "name": "", + "x": 100, + "y": 300, + "wires": [ + [ + "2b3f33b7a9dceb49" + ] + ] + }, + { + "id": "2b3f33b7a9dceb49", + "type": "switch", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "name": "Seite == \"Prozessliste\"", + "property": "payload.page.name", + "propertyType": "msg", + "rules": [ + { + "t": "eq", + "v": "Prozessliste", + "vt": "str" + } + ], + "checkall": "true", + "repair": false, + "outputs": 1, + "x": 280, + "y": 300, + "wires": [ + [ + "dbec84a2543dbe7e" + ] + ] + }, + { + "id": "a61cb4c20f79d872", + "type": "inject", + "z": "b195bc3ca2e1a665", + "g": "09cdc14cfb8ad687", + "name": "", + "props": [ + { + "p": "payload" + }, + { + "p": "topic", + "vt": "str" + } + ], + "repeat": "", + "crontab": "", + "once": false, + "onceDelay": 0.1, + "topic": "", + "payload": "", + "payloadType": "date", + "x": 120, + "y": 220, + "wires": [ + [ + "dbec84a2543dbe7e" + ] + ] + }, + { + "id": "99475ac148f6484b", + "type": "http request", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "", + "method": "GET", + "ret": "obj", + "paytoqs": "ignore", + "url": "http://localhost:56000/atlas_engine/api/v1/flow_node_instances?limit=1&flowNodeInstanceId={{{flowNodeInstanceId}}}&flowNodeType=bpmn%3AUserTask", + "tls": "", + "persist": false, + "proxy": "", + "insecureHTTPParser": false, + "authType": "bearer", + "senderr": false, + "headers": [], + "x": 490, + "y": 620, + "wires": [ + [ + "ebd67a338575690d", + "64068e75e541a72e" + ] + ] + }, + { + "id": "5a61ca5b5a13aa8d", + "type": "inject", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "", + "props": [ + { + "p": "payload" + }, + { + "p": "topic", + "vt": "str" + } + ], + "repeat": "", + "crontab": "", + "once": false, + "onceDelay": 0.1, + "topic": "", + "payload": "", + "payloadType": "date", + "x": 120, + "y": 620, + "wires": [ + [ + "1497b762d2ac1723" + ] + ] + }, + { + "id": "ebd67a338575690d", + "type": "debug", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "debug 8", + "active": true, + "tosidebar": true, + "console": false, + "tostatus": false, + "complete": "false", + "statusVal": "", + "statusType": "auto", + "x": 660, + "y": 660, + "wires": [] + }, + { + "id": "1497b762d2ac1723", + "type": "function", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "parameter setzen", + "func": "msg.flowNodeInstanceId = \"eec76493-589c-4c3e-b397-dd8f441235a8\";\n\nif (msg.payload.query && msg.payload.query.flowNodeInstanceId) {\n msg.flowNodeInstanceId = msg.payload.query.flowNodeInstanceId;\n}\n\n/*\nmsg.flowNodeId = \"Activity_0ye77qp\";\nmsg.flowNodeType = \"bpmn:UserTask\";\nmsg.processModelId = \"Sample_UserTask_Process\";\n*/\n\nreturn msg;", + "outputs": 1, + "timeout": 0, + "noerr": 0, + "initialize": "", + "finalize": "", + "libs": [], + "x": 310, + "y": 620, + "wires": [ + [ + "99475ac148f6484b" + ] + ] + }, + { + "id": "64068e75e541a72e", + "type": "function", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "prepare fields ", + "func": "const formFields = [];\n\nmsg.payload.flowNodeInstances[0].userTaskConfig.formFields.forEach(function(field) {\n let formField = {};\n switch (field.type) {\n case 'string':\n formField = { id: field.id, type: 'v-text-field', required: false, label: field.label, value: '', title: 'Some helpful text' };\n break;\n case 'long':\n formField = { id: field.id, type: 'v-text-field', required: true, label: field.label, title: 'Some helpful text' };\n break;\n case 'date':\n formField = { id: field.id, type: 'v-text-field', required: true, label: field.label, title: 'Some helpful text' };\n break;\n case 'enum':\n formField = { id: field.id, type: 'v-text-field', required: true, label: field.label, items: field.enumValues.map(v => ({ id: v.id, name: v.name })), title: 'Choose an option' };\n break;\n case 'boolean':\n formField = { id: field.id, type: 'v-text-field', required: false, label: field.label, title: 'Check for Yes' };\n break;\n default:\n //formField = { id: field.id, type: field.type, required: true, label: field.label, title: 'Additional Information Needed' };\n formField = { id: field.id, type: 'v-text-field', required: true, label: field.label, title: 'Additional Information Needed' };\n }\n\n formFields.push(formField);\n});;\n\nmsg.payload = {\n \"formFields\": formFields\n};\n\nreturn msg;", + "outputs": 1, + "timeout": 0, + "noerr": 0, + "initialize": "", + "finalize": "", + "libs": [], + "x": 680, + "y": 620, + "wires": [ + [ + "b8ac2a6ff7cc5ef1", + "8e2a2f993ee7156a" + ] + ] + }, + { + "id": "b8ac2a6ff7cc5ef1", + "type": "debug", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "debug 9", + "active": true, + "tosidebar": true, + "console": false, + "tostatus": false, + "complete": "false", + "statusVal": "", + "statusType": "auto", + "x": 860, + "y": 620, + "wires": [] + }, + { + "id": "493500b42d8d0f5b", + "type": "ui-event", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "ui": "26a45d43c064bdb6", + "name": "", + "x": 120, + "y": 560, + "wires": [ + [ + "34984ae3f4e83b0b" + ] + ] + }, + { + "id": "34984ae3f4e83b0b", + "type": "switch", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "Seite == \"UserTask\"", + "property": "payload.page.name", + "propertyType": "msg", + "rules": [ + { + "t": "eq", + "v": "UserTask", + "vt": "str" + } + ], + "checkall": "true", + "repair": false, + "outputs": 1, + "x": 320, + "y": 560, + "wires": [ + [ + "1497b762d2ac1723" + ] + ] + }, + { + "id": "8e2a2f993ee7156a", + "type": "dynamic-form", + "z": "b195bc3ca2e1a665", + "g": "ec36901abb138306", + "name": "", + "group": "5403f00c961584ab", + "order": 0, + "waiting_title": "Waiting for Warten auf den Usertask...", + "waiting_info": "Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.", + "submit_title": "Submit your task", + "cancel_title": "Cancel your task", + "width": 0, + "height": 0, + "x": 600, + "y": 480, + "wires": [ + [ + "1224ebb8edb477d2" + ] + ] + }, + { + "id": "8e2205abbb41495b", + "type": "ui-group", + "name": "My Group", + "page": "b4dcca3f3d895ff7", + "width": "12", + "height": "1", + "order": 1, + "showTitle": false, + "className": "", + "visible": "true", + "disabled": "false" + }, + { + "id": "26a45d43c064bdb6", + "type": "ui-base", + "name": "My Dashboard", + "path": "/dashboard", + "includeClientData": true, + "acceptsClientConfig": [ + "ui-notification", + "ui-control" + ], + "showPathInSidebar": true, + "navigationStyle": "default", + "titleBarStyle": "default" + }, + { + "id": "5403f00c961584ab", + "type": "ui-group", + "name": "Meine spezieller Dynamic-Form", + "page": "540bda48de1fe22d", + "width": "12", + "height": "1", + "order": 1, + "showTitle": false, + "className": "", + "visible": "true", + "disabled": "false" + }, + { + "id": "b4dcca3f3d895ff7", + "type": "ui-page", + "name": "Prozessliste", + "ui": "26a45d43c064bdb6", + "path": "/Prozessliste", + "icon": "home", + "layout": "grid", + "theme": "7175f012d8e51857", + "order": 2, + "className": "", + "visible": "true", + "disabled": "false" + }, + { + "id": "540bda48de1fe22d", + "type": "ui-page", + "name": "UserTask", + "ui": "26a45d43c064bdb6", + "path": "/UserTask", + "icon": "home", + "layout": "grid", + "theme": "7175f012d8e51857", + "order": 1, + "className": "", + "visible": true, + "disabled": "false" + }, + { + "id": "7175f012d8e51857", + "type": "ui-theme", + "name": "Default Theme", + "colors": { + "surface": "#ffffff", + "primary": "#1f517f", + "bgPage": "#eeeeee", + "groupBg": "#ffffff", + "groupOutline": "#cccccc" + }, + "sizes": { + "pagePadding": "12px", + "groupGap": "12px", + "groupBorderRadius": "4px", + "widgetGap": "12px" + } + } +] \ No newline at end of file diff --git a/resources/dynamic-form.umd.js b/resources/dynamic-form.umd.js index c70d308..9c8726f 100644 --- a/resources/dynamic-form.umd.js +++ b/resources/dynamic-form.umd.js @@ -1,3 +1,3 @@ (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)}})(); -(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuex")):typeof define=="function"&&define.amd?define(["exports","vue","vuex"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s["dynamic-form"]={},s.Vue,s.vuex))})(this,function(s,e,p){"use strict";const f=(t,o)=>{const i=t.__vccOpts||t;for(const[r,l]of o)i[r]=l;return i},h={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{form:{},formData:{}}},computed:{...p.mapState("data",["messages"]),fields(){return(this.messages&&this.messages[this.id]?this.messages[this.id].payload.formFields:[]).map(i=>({...i,component:i.type}))},hasFields(){return this.messages&&this.messages[this.id]&&this.messages[this.id].payload.formFields},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."},submit_title(){return this.props.submit_title||"Submit your task"},cancel_title(){return this.props.cancel_title||"Cancel your task"}},mounted(){this.$socket.on("widget-load:"+this.id,t=>{this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.on("msg-input:"+this.id,t=>{if(console.info(t),t.payload.formFields){const o=t.payload.formFields.reduce((i,r)=>(console.info("field:",r),console.info("field.id:",r.id),i[r.id]=r.value||"",i),{});console.info("formData: ",o),console.info("this.formData (1):",this.formData),this.formData=o,console.info("this.formData (2):",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:{send(t){this.$socket.emit("widget-action",this.id,t)},submit(){this.send({payload:this.formData})},cancel(){this.send({payload:this.formData})}}},_={className:"dynamic-form-wrapper"},u={key:0},k={key:1};function y(t,o,i,r,l,a){const c=e.resolveComponent("v-col"),d=e.resolveComponent("v-row"),m=e.resolveComponent("v-btn"),w=e.resolveComponent("v-form"),g=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",_,[a.hasFields?(e.openBlock(),e.createElementBlock("p",u,[e.createVNode(w,{ref:"form",modelValue:l.form,"onUpdate:modelValue":o[0]||(o[0]=n=>l.form=n)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.fields,(n,C)=>(e.openBlock(),e.createBlock(d,{key:C},{default:e.withCtx(()=>[e.createVNode(c,{cols:"12"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.component),{id:n.id,modelValue:l.formData[n.id],"onUpdate:modelValue":D=>l.formData[n.id]=D,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,null,{default:e.withCtx(()=>[e.createVNode(c,{cols:"6"},{default:e.withCtx(()=>[e.createVNode(m,{variant:"outlined",block:"",onClick:a.cancel},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.cancel_title),1)]),_:1},8,["onClick"])]),_:1}),e.createVNode(c,{cols:"6"},{default:e.withCtx(()=>[e.createVNode(m,{block:"",onClick:a.submit},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.submit_title),1)]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1},8,["modelValue"])])):(e.openBlock(),e.createElementBlock("p",k,[e.createVNode(g,{text:a.waiting_info,title:a.waiting_title},null,8,["text","title"])]))])],2112)}const b=f(h,[["render",y],["__scopeId","data-v-19b58e9c"],["__file","/Users/moellenbeck/projects/moellenbeck/reps/node-red-dashboard-2-ui-example/ui/components/DynamicForm.vue"]]);s.DynamicForm=b,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}); +(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 f=(t,o)=>{const i=t.__vccOpts||t;for(const[r,l]of o)i[r]=l;return i},h={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{form:{},formData:{}}},computed:{...p.mapState("data",["messages"]),fields(){return(this.messages&&this.messages[this.id]?this.messages[this.id].payload.formFields:[]).map(i=>({...i,component:i.type}))},hasFields(){return this.messages&&this.messages[this.id]&&this.messages[this.id].payload.formFields},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."},submit_title(){return this.props.submit_title||"Submit your task"},cancel_title(){return this.props.cancel_title||"Cancel your task"}},mounted(){this.$socket.on("widget-load:"+this.id,t=>{this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.on("msg-input:"+this.id,t=>{if(console.info(t),t.payload.formFields){const o=t.payload.formFields.reduce((i,r)=>(console.info("field:",r),console.info("field.id:",r.id),i[r.id]=r.value||"",i),{});console.info("formData: ",o),console.info("this.formData (1):",this.formData),this.formData=o,console.info("this.formData (2):",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:{send(t){this.$socket.emit("widget-action",this.id,t)},submit(){this.send({payload:this.formData})},cancel(){this.send({payload:this.formData})}}},_={className:"dynamic-form-wrapper"},u={key:0},k={key:1};function y(t,o,i,r,l,a){const c=e.resolveComponent("v-col"),d=e.resolveComponent("v-row"),m=e.resolveComponent("v-btn"),w=e.resolveComponent("v-form"),g=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",_,[a.hasFields?(e.openBlock(),e.createElementBlock("p",u,[e.createVNode(w,{ref:"form",modelValue:l.form,"onUpdate:modelValue":o[0]||(o[0]=s=>l.form=s)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.fields,(s,C)=>(e.openBlock(),e.createBlock(d,{key:C},{default:e.withCtx(()=>[e.createVNode(c,{cols:"12"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.component),{id:s.id,modelValue:l.formData[s.id],"onUpdate:modelValue":D=>l.formData[s.id]=D,required:s.required,items:s.items,label:s.label},null,8,["id","modelValue","onUpdate:modelValue","required","items","label"]))]),_:2},1024)]),_:2},1024))),128)),e.createVNode(d,null,{default:e.withCtx(()=>[e.createVNode(c,{cols:"6"},{default:e.withCtx(()=>[e.createVNode(m,{variant:"outlined",block:"",onClick:a.cancel},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.cancel_title),1)]),_:1},8,["onClick"])]),_:1}),e.createVNode(c,{cols:"6"},{default:e.withCtx(()=>[e.createVNode(m,{block:"",onClick:a.submit},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.submit_title),1)]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1},8,["modelValue"])])):(e.openBlock(),e.createElementBlock("p",k,[e.createVNode(g,{text:a.waiting_info,title:a.waiting_title},null,8,["text","title"])]))])],2112)}const b=f(h,[["render",y],["__scopeId","data-v-19b58e9c"],["__file","/Users/moellenbeck/projects/5minds/reps/node-red-dashboard-2-processcube-dynamic-form/ui/components/DynamicForm.vue"]]);n.DynamicForm=b,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}); //# sourceMappingURL=dynamic-form.umd.js.map