From 1ba13fbf8e2e3a32068f5eab77acfe1c0dbe4e42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20M=C3=B6llenbeck?= <martin.moellenbeck@5minds.de>
Date: Mon, 24 Jun 2024 23:29:55 +0200
Subject: [PATCH] Build umd

---
 package.json                      |  2 +-
 resources/dynamic-form.umd.js     |  2 +-
 resources/dynamic-form.umd.js.map |  2 +-
 ui/components/DynamicForm.vue     | 14 ++++----------
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 4d8d157..a1ca494 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@5minds/node-red-dashboard-2-processcube-dynamic-form",
-    "version": "1.0.8",
+    "version": "1.0.9",
     "description": "The ui component for the ProcessCube dynamic-form",
     "keywords": [
         "processcube",
diff --git a/resources/dynamic-form.umd.js b/resources/dynamic-form.umd.js
index 9dc3cc0..61a68e8 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(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuex")):typeof define=="function"&&define.amd?define(["exports","vue","vuex"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i["dynamic-form"]={},i.Vue,i.vuex))})(this,function(i,e,u){"use strict";const f=(t,o)=>{const s=t.__vccOpts||t;for(const[a,c]of o)s[a]=c;return s},p={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:{...u.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."},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(t.payload.formFields){const o=t.payload.formFields.reduce((s,a)=>(console.info("field:",a),console.info("field.id:",a.id),console.info("field.value:",a.value),console.info("field.defaultValue:",a.defaultValue),s[a.id]=a.value||a.defaultValue||"",s),{});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:{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.hasUserTask&&this.userTask.userTaskConfig.formFields.length>0},send(t){this.$socket.emit("widget-action",this.id,t)},submit(){this.send({payload:{formData:this.formData,userTask:this.userTask(),action:"submit"}})},cancel(){this.send({payload:{formData:this.formData,userTask:this.userTask(),action:"cancel"}})}}};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},b={key:1};function x(t,o,s,a,c,n){const l=e.resolveComponent("v-col"),d=e.resolveComponent("v-row"),m=e.resolveComponent("v-btn"),g=e.resolveComponent("v-form"),V=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",_,[n.hasFields?(e.openBlock(),e.createElementBlock("p",y,[e.createVNode(g,{ref:"form",modelValue:c.form,"onUpdate:modelValue":o[0]||(o[0]=r=>c.form=r)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.fields(),(r,C)=>(e.openBlock(),e.createBlock(d,{key:C},{default:e.withCtx(()=>[e.createVNode(l,{cols:"12"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.component),{id:r.id,modelValue:c.formData[r.id],"onUpdate:modelValue":D=>c.formData[r.id]=D,required:r.required,items:r.items,label:r.label},null,8,["id","modelValue","onUpdate:modelValue","required","items","label"]))]),_:2},1024)]),_:2},1024))),128)),e.createVNode(d,null,{default:e.withCtx(()=>[e.createVNode(l,{cols:"6"},{default:e.withCtx(()=>[e.createVNode(m,{variant:"outlined",block:"",onClick:n.cancel},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.cancel_title),1)]),_:1},8,["onClick"])]),_:1}),e.createVNode(l,{cols:"6"},{default:e.withCtx(()=>[e.createVNode(m,{block:"",onClick:n.submit},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.submit_title),1)]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1},8,["modelValue"])])):(e.openBlock(),e.createElementBlock("p",b,[e.createVNode(V,{text:n.waiting_info,title:n.waiting_title},null,8,["text","title"])]))])],2112)}const w=f(p,[["render",x],["__scopeId","data-v-19b58e9c"],["__file","/Users/moellenbeck/projects/5minds/reps/node-red-dashboard-2-processcube-dynamic-form/ui/components/DynamicForm.vue"]]);i.DynamicForm=w,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuex")):typeof define=="function"&&define.amd?define(["exports","vue","vuex"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a["dynamic-form"]={},a.Vue,a.vuex))})(this,function(a,e,u){"use strict";const p=(t,r)=>{const s=t.__vccOpts||t;for(const[c,n]of r)s[c]=n;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{form:{},formData:{}}},computed:{...u.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."},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(t.payload.formFields){const r=t.payload.formFields.reduce((s,c)=>(s[c.id]=c.defaultValue||"",s),{});this.formData=r}else console.debug("No formFields in msg.payload",t.payload.formFields);this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.emit("widget-load",this.id)},unmounted(){var t,r;(t=this.$socket)==null||t.off("widget-load"+this.id),(r=this.$socket)==null||r.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.hasUserTask&&this.userTask.userTaskConfig.formFields.length>0},send(t){this.$socket.emit("widget-action",this.id,t)},submit(){this.send({payload:{formData:this.formData,userTask:this.userTask(),action:"submit"}})},cancel(){this.send({payload:{formData:this.formData,userTask:this.userTask(),action:"cancel"}})}}};function h(t,r){return t==="enum"?r.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},b={key:1};function x(t,r,s,c,n,i){const l=e.resolveComponent("v-col"),d=e.resolveComponent("v-row"),m=e.resolveComponent("v-btn"),w=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(w,{ref:"form",modelValue:n.form,"onUpdate:modelValue":r[0]||(r[0]=o=>n.form=o)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.fields(),(o,T)=>(e.openBlock(),e.createBlock(d,{key:T},{default:e.withCtx(()=>[e.createVNode(l,{cols:"12"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.component),{id:o.id,modelValue:n.formData[o.id],"onUpdate:modelValue":V=>n.formData[o.id]=V,required:o.required,items:o.items,label:o.label},null,8,["id","modelValue","onUpdate:modelValue","required","items","label"]))]),_:2},1024)]),_:2},1024))),128)),e.createVNode(d,null,{default:e.withCtx(()=>[e.createVNode(l,{cols:"6"},{default:e.withCtx(()=>[e.createVNode(m,{variant:"outlined",block:"",onClick:i.cancel},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.cancel_title),1)]),_:1},8,["onClick"])]),_:1}),e.createVNode(l,{cols:"6"},{default:e.withCtx(()=>[e.createVNode(m,{block:"",onClick:i.submit},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.submit_title),1)]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1},8,["modelValue"])])):(e.openBlock(),e.createElementBlock("p",b,[e.createVNode(C,{text:i.waiting_info,title:i.waiting_title},null,8,["text","title"])]))])],2112)}const g=p(f,[["render",x],["__scopeId","data-v-19b58e9c"],["__file","/Users/moellenbeck/projects/5minds/reps/node-red-dashboard-2-processcube-dynamic-form/ui/components/DynamicForm.vue"]]);a.DynamicForm=g,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=dynamic-form.umd.js.map
diff --git a/resources/dynamic-form.umd.js.map b/resources/dynamic-form.umd.js.map
index cb33331..826fae1 100644
--- a/resources/dynamic-form.umd.js.map
+++ b/resources/dynamic-form.umd.js.map
@@ -1 +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                        />\n                    </v-col>\n                </v-row>\n\n                <v-row>\n                    <v-col cols=\"6\">\n                        <v-btn variant=\"outlined\" block @click=\"cancel\">{{ cancel_title }}</v-btn>\n                    </v-col>\n                    <v-col cols=\"6\">\n                        <v-btn block @click=\"submit\">{{ submit_title }}</v-btn>\n                    </v-col>\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: { type: Object, default: () => ({ enabled: false, visible: false }) }\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            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 this.props.waiting_info || 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.'\n        },\n        submit_title () {\n            return this.props.submit_title || 'Submit your task'\n        },\n        cancel_title () {\n            return this.props.cancel_title || 'Cancel your task'\n        }\n    },\n    mounted () {\n        this.$socket.on('widget-load:' + this.id, (msg) => {\n            // load the latest message from the Node-RED datastore when this widget is loaded\n            // storing it in our vuex store so that we have it saved as we navigate around\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\n            if (msg.payload.formFields) {\n                const formData = msg.payload.formFields.reduce((acc, field) => {\n                    console.info('field:', field)\n                    console.info('field.id:', field.id)\n                    console.info('field.value:', field.value)\n                    console.info('field.defaultValue:', field.defaultValue)\n\n                    acc[field.id] = field.value || field.defaultValue || ''\n                    return acc\n                }, {})\n\n                console.info('formData: ', formData)\n                console.info('this.formData (1):', this.formData)\n\n                this.formData = formData\n                console.info('this.formData (2):', 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 this.messages && this.messages[this.id] && this.messages[this.id].payload.userTask\n        },\n        userTask () {\n            return this.hasUserTask() ? this.messages[this.id].payload.userTask : {}\n        },\n        fields () {\n            const aFields = this.hasUserTask() ? this.userTask().userTaskConfig.formFields : []\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 this.hasUserTask && this.userTask.userTaskConfig.formFields.length > 0\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) {\n            this.$socket.emit('widget-action', this.id, msg)\n        },\n        submit () {\n            this.send({ payload: { formData: this.formData, userTask: this.userTask(), action: 'submit' } })\n        },\n        cancel () {\n            this.send({ payload: { formData: this.formData, userTask: this.userTask(), action: 'cancel' } })\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\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","formData","acc","field","_a","_b","mapFieldTypes","mapItems","type","enumValue","fieldType","_hoisted_1","_openBlock","_createElementBlock","_Fragment","_createCommentVNode","_createElementVNode","$options","_hoisted_2","_createVNode","_component_v_form","$data","_cache","$event","_withCtx","_renderList","index","_createBlock","_component_v_row","_component_v_col","_resolveDynamicComponent","_component_v_btn","_createTextVNode","_toDisplayString","_hoisted_3","_component_v_alert"],"mappings":"+WAsCKA,EAAU,CACX,KAAM,cACN,OAAQ,CAAC,SAAS,EAClB,MAAO,CAEH,GAAI,CAAE,KAAM,OAAQ,SAAU,EAAM,EACpC,MAAO,CAAE,KAAM,OAAQ,QAAS,KAAO,CAAE,EAAG,EAC5C,MAAO,CAAE,KAAM,OAAQ,QAAS,KAAO,CAAE,QAAS,GAAO,QAAS,EAAM,EAAG,CAC9E,EACD,MAAOC,EAAO,CACV,QAAQ,KAAK,0BAA2BA,CAAK,EAC7C,QAAQ,MAAM,gCAAiCC,SAAO,CACzD,EACD,MAAQ,CACJ,MAAO,CACH,KAAM,CAAE,EACR,SAAU,CAAC,CACf,CACH,EACD,SAAU,CACN,GAAGC,WAAS,OAAQ,CAAC,UAAU,CAAC,EAChC,eAAiB,CACb,OAAO,KAAK,MAAM,eAAiB,4BACtC,EACD,cAAgB,CACZ,OAAO,KAAK,MAAM,cAAgB,sFACrC,EACD,cAAgB,CACZ,OAAO,KAAK,MAAM,cAAgB,kBACrC,EACD,cAAgB,CACZ,OAAO,KAAK,MAAM,cAAgB,kBACtC,CACH,EACD,SAAW,CACP,KAAK,QAAQ,GAAG,eAAiB,KAAK,GAAKC,GAAQ,CAG/C,KAAK,OAAO,OAAO,YAAa,CAC5B,SAAU,KAAK,GACf,IAAAA,EACH,EACJ,EACD,KAAK,QAAQ,GAAG,aAAe,KAAK,GAAKA,GAAQ,CAG7C,GAAIA,EAAI,QAAQ,WAAY,CACxB,MAAMC,EAAWD,EAAI,QAAQ,WAAW,OAAO,CAACE,EAAKC,KACjD,QAAQ,KAAK,SAAUA,CAAK,EAC5B,QAAQ,KAAK,YAAaA,EAAM,EAAE,EAClC,QAAQ,KAAK,eAAgBA,EAAM,KAAK,EACxC,QAAQ,KAAK,sBAAuBA,EAAM,YAAY,EAEtDD,EAAIC,EAAM,EAAE,EAAIA,EAAM,OAASA,EAAM,cAAgB,GAC9CD,GACR,EAAE,EAEL,QAAQ,KAAK,aAAcD,CAAQ,EACnC,QAAQ,KAAK,qBAAsB,KAAK,QAAQ,EAEhD,KAAK,SAAWA,EAChB,QAAQ,KAAK,qBAAsB,KAAK,QAAQ,CACpD,CAEA,KAAK,OAAO,OAAO,YAAa,CAC5B,SAAU,KAAK,GACf,IAAAD,EACH,EACJ,EAED,KAAK,QAAQ,KAAK,cAAe,KAAK,EAAE,CAC3C,EACD,WAAa,UAETI,EAAA,KAAK,UAAL,MAAAA,EAAc,IAAI,cAAgB,KAAK,KACvCC,EAAA,KAAK,UAAL,MAAAA,EAAc,IAAI,aAAe,KAAK,GACzC,EACD,QAAS,CACL,aAAe,CACX,OAAO,KAAK,UAAY,KAAK,SAAS,KAAK,EAAE,GAAK,KAAK,SAAS,KAAK,EAAE,EAAE,QAAQ,QACpF,EACD,UAAY,CACR,OAAO,KAAK,YAAY,EAAI,KAAK,SAAS,KAAK,EAAE,EAAE,QAAQ,SAAW,CAAC,CAC1E,EACD,QAAU,CASN,OARgB,KAAK,YAAc,EAAE,KAAK,SAAU,EAAC,eAAe,WAAa,CAAC,GAEzD,IAAIF,IAAU,CACnC,GAAGA,EACH,UAAWG,EAAcH,EAAM,IAAI,EACnC,MAAOI,EAASJ,EAAM,KAAMA,CAAK,CACrC,EAAE,CAGL,EACD,WAAa,CACT,OAAO,KAAK,aAAe,KAAK,SAAS,eAAe,WAAW,OAAS,CAC/E,EAKD,KAAMH,EAAK,CACP,KAAK,QAAQ,KAAK,gBAAiB,KAAK,GAAIA,CAAG,CAClD,EACD,QAAU,CACN,KAAK,KAAK,CAAE,QAAS,CAAE,SAAU,KAAK,SAAU,SAAU,KAAK,SAAQ,EAAI,OAAQ,UAAY,CAClG,EACD,QAAU,CACN,KAAK,KAAK,CAAE,QAAS,CAAE,SAAU,KAAK,SAAU,SAAU,KAAK,SAAQ,EAAI,OAAQ,UAAY,CACnG,CACJ,CACJ,EAEA,SAASO,EAAUC,EAAML,EAAO,CAC5B,OAAIK,IAAS,OACFL,EAAM,WAAW,IAAIM,IAAc,CACtC,MAAOA,EAAU,KACjB,MAAOA,EAAU,EACrB,EAAE,EAEK,IAEf,CAEA,SAASH,EAAeI,EAAW,CAC/B,OAAQA,EAAS,CACjB,IAAK,SACD,MAAO,eACX,IAAK,OACL,IAAK,OACD,MAAO,eACX,IAAK,OACD,MAAO,WACX,IAAK,UACD,MAAO,aACX,IAAK,OACD,MAAO,eACX,IAAK,SACD,MAAO,WACX,IAAK,WACD,MAAO,aACX,IAAK,QACD,MAAO,UACX,IAAK,SACD,MAAO,WACX,IAAK,SACD,MAAO,WACX,IAAK,OACD,MAAO,gBACX,IAAK,WACD,MAAO,oBACX,IAAK,QACD,MAAO,iBACX,IAAK,OACD,MAAO,eACX,IAAK,WACD,MAAO,aACX,IAAK,WACD,MAAO,eACX,IAAK,SACD,MAAO,eACX,IAAK,QACD,MAAO,eACX,IAAK,MACD,MAAO,eACX,IAAK,MACD,MAAO,eACX,QACI,MAAO,cACX,CACJ,CA/MS,MAAAC,EAAA,CAAA,UAAU,sBAAsB,KAFzC,IAAA,CAAA,KAAA,IAAA,CAAA,yLAAA,OAAAC,YAAA,EAAAC,qBAAAC,EAAAA,SAAA,KAAA,CACIC,EAAAA,mBAA+G,0GAAA,EAC/GC,EAAA,mBA6BM,MA7BNL,EA6BM,CA5BOM,EAAS,WAAlBL,EAAAA,YAAAC,EAAAA,mBAwBI,IA3BZK,EAAA,CAIYC,EAAAA,YAsBSC,EAAA,CAtBD,IAAI,OAJxB,WAIwCC,EAAI,KAJ5C,sBAAAC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAIwCF,EAAI,KAAAE,KAJ5C,QAAAC,EAAA,QAKuB,IAAkC,EAAzCZ,EAAAA,UAAA,EAAA,EAAAC,EAAA,mBAWQC,gBAhBxBW,aAKgDR,EAAA,OAAM,EALtD,CAK+Bd,EAAOuB,mBAAtBC,EAWQ,YAAAC,EAAA,CAXmC,IAAKF,GAAK,CALrE,QAAAF,EAAA,QAMoB,IASQ,CATRL,EAAAA,YASQU,EAAA,CATD,KAAK,IAAI,EAAA,CANpC,QAAAL,EAAA,QAOwB,IAOE,EAPFZ,EAAAA,UAAA,EAAAe,EAAA,YAOEG,EAd1B,wBAQiC3B,EAAM,SAAS,EAAA,CACnB,GAAIA,EAAM,GATvC,WAUqCkB,EAAQ,SAAClB,EAAM,EAAE,EAVtD,sBAAAoB,GAUqCF,EAAQ,SAAClB,EAAM,EAAE,EAAAoB,EACzB,SAAUpB,EAAM,SAChB,MAAOA,EAAM,MACb,MAAOA,EAAM,uFAb1C,EAAA,WAAA,EAAA,iBAkBgBgB,EAOQ,YAAAS,EAAA,KAAA,CAzBxB,QAAAJ,EAAA,QAmBoB,IAEQ,CAFRL,EAAAA,YAEQU,EAAA,CAFD,KAAK,GAAG,EAAA,CAnBnC,QAAAL,EAAA,QAoBwB,IAA0E,CAA1EL,EAAAA,YAA0EY,EAAA,CAAnE,QAAQ,WAAW,MAAA,GAAO,QAAOd,EAAM,SApBtE,QAAAO,EAAA,QAoBwE,IAAkB,CApB1FQ,EAAAA,gBAAAC,EAAAA,gBAoB2EhB,EAAY,YAAA,EAAA,CAAA,IApBvF,EAAA,oBAAA,EAAA,IAsBoBE,EAAAA,YAEQU,EAAA,CAFD,KAAK,GAAG,EAAA,CAtBnC,QAAAL,EAAA,QAuBwB,IAAuD,CAAvDL,EAAAA,YAAuDY,EAAA,CAAhD,MAAA,GAAO,QAAOd,EAAM,SAvBnD,QAAAO,EAAA,QAuBqD,IAAkB,CAvBvEQ,EAAAA,gBAAAC,EAAAA,gBAuBwDhB,EAAY,YAAA,EAAA,CAAA,IAvBpE,EAAA,oBAAA,EAAA,MAAA,EAAA,MAAA,EAAA,yBA4BQL,EAAAA,YAAAC,EAAAA,mBAEI,IA9BZqB,EAAA,CA6BYf,EAAAA,YAAuDgB,EAAA,CAA7C,KAAMlB,EAAY,aAAG,MAAOA,EAAa"}
\ No newline at end of file
+{"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                        />\n                    </v-col>\n                </v-row>\n\n                <v-row>\n                    <v-col cols=\"6\">\n                        <v-btn variant=\"outlined\" block @click=\"cancel\">{{ cancel_title }}</v-btn>\n                    </v-col>\n                    <v-col cols=\"6\">\n                        <v-btn block @click=\"submit\">{{ submit_title }}</v-btn>\n                    </v-col>\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: { type: Object, default: () => ({ enabled: false, visible: false }) }\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            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 this.props.waiting_info || 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.'\n        },\n        submit_title () {\n            return this.props.submit_title || 'Submit your task'\n        },\n        cancel_title () {\n            return this.props.cancel_title || 'Cancel your task'\n        }\n    },\n    mounted () {\n        this.$socket.on('widget-load:' + this.id, (msg) => {\n            // load the latest message from the Node-RED datastore when this widget is loaded\n            // storing it in our vuex store so that we have it saved as we navigate around\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\n            if (msg.payload.formFields) {\n                const formData = msg.payload.formFields.reduce((acc, field) => {\n                    // acc[field.id] = field.value || field.defaultValue || ''\n                    acc[field.id] = field.defaultValue || ''\n                    return acc\n                }, {})\n\n                this.formData = formData\n            } else {\n                console.debug('No formFields in msg.payload', msg.payload.formFields)\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 this.messages && this.messages[this.id] && this.messages[this.id].payload.userTask\n        },\n        userTask () {\n            return this.hasUserTask() ? this.messages[this.id].payload.userTask : {}\n        },\n        fields () {\n            const aFields = this.hasUserTask() ? this.userTask().userTaskConfig.formFields : []\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 this.hasUserTask && this.userTask.userTaskConfig.formFields.length > 0\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) {\n            this.$socket.emit('widget-action', this.id, msg)\n        },\n        submit () {\n            this.send({ payload: { formData: this.formData, userTask: this.userTask(), action: 'submit' } })\n        },\n        cancel () {\n            this.send({ payload: { formData: this.formData, userTask: this.userTask(), action: 'cancel' } })\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\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","formData","acc","field","_a","_b","mapFieldTypes","mapItems","type","enumValue","fieldType","_hoisted_1","_openBlock","_createElementBlock","_Fragment","_createCommentVNode","_createElementVNode","$options","_hoisted_2","_createVNode","_component_v_form","$data","_cache","$event","_withCtx","_renderList","index","_createBlock","_component_v_row","_component_v_col","_resolveDynamicComponent","_component_v_btn","_createTextVNode","_toDisplayString","_hoisted_3","_component_v_alert"],"mappings":"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"}
\ No newline at end of file
diff --git a/ui/components/DynamicForm.vue b/ui/components/DynamicForm.vue
index 78953e3..2dac378 100644
--- a/ui/components/DynamicForm.vue
+++ b/ui/components/DynamicForm.vue
@@ -84,20 +84,14 @@ export default {
 
             if (msg.payload.formFields) {
                 const formData = msg.payload.formFields.reduce((acc, field) => {
-                    console.info('field:', field)
-                    console.info('field.id:', field.id)
-                    console.info('field.value:', field.value)
-                    console.info('field.defaultValue:', field.defaultValue)
-
-                    acc[field.id] = field.value || field.defaultValue || ''
+                    // acc[field.id] = field.value || field.defaultValue || ''
+                    acc[field.id] = field.defaultValue || ''
                     return acc
                 }, {})
 
-                console.info('formData: ', formData)
-                console.info('this.formData (1):', this.formData)
-
                 this.formData = formData
-                console.info('this.formData (2):', this.formData)
+            } else {
+                console.debug('No formFields in msg.payload', msg.payload.formFields)
             }
 
             this.$store.commit('data/bind', {