@5minds/node-red-dashboard-2-processcube-dynamic-form 2.1.0-file-preview-f7c8e6-mdpk6xu1 → 2.1.0-file-preview-ea90da-mdpynnv5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@5minds/node-red-dashboard-2-processcube-dynamic-form",
-  "version": "2.1.0-file-preview-f7c8e6-mdpk6xu1",
+  "version": "2.1.0-file-preview-ea90da-mdpynnv5",
   "description": "The ui component for the ProcessCube dynamic-form",
   "keywords": [
     "processcube",

package/resources/ui-dynamic-form.umd.js

@@ -104,4 +104,4 @@ Please report this to https://github.com/markedjs/marked.`,e){let n="<p>An error
                             <div style="font-size: 1.2em; margin-bottom: 8px;">⚠️</div>
                             <div>Fehler beim Laden der Dateien</div>
                         </div>
-                    `)})},toggleCollapse(){this.collapsed=!this.collapsed},getRowWidthStyling(e,t){let r="";return t===0&&(r+="margin-top: 12px;"),e.type,r+="flex-basis: 100%;",r},fields(){return this.computedFields},send(e,t){const r=[];r[t]=e,this.$socket.emit("widget-action",this.id,r)},init(e){if(this.msg=e,this.clearComponentCache(),!e)return;if(this.actions=this.props.options,e.payload&&e.payload.userTask)this.userTask=e.payload.userTask;else{this.userTask=null,this.formData={},this.visibleFileFields.clear();return}const r=this.userTask.userTaskConfig.formFields,n=r.map(a=>a.id),i=this.userTask.startToken,s=e.payload.formData;if(this.formIsFinished=!!e.payload.formData,this.formIsFinished&&(this.collapsed=this.props.collapse_when_finished),this.visibleFileFields.clear(),r){r.forEach(a=>{if(this.formData[a.id]=a.defaultValue,a.type==="confirm"){const l=a.customForm?JSON.parse(a.customForm):{},o=l.confirmButtonText??"Confirm",u=l.declineButtonText??"Decline";this.actions=[{alignment:"right",primary:"false",label:u,condition:""},{alignment:"right",primary:"true",label:o,condition:""}]}});for(let a=r.length-1;a>=0;a--){const l=r[a];if(l.type==="file"&&i&&i[l.id]){const o={...l};o.type="file-preview",o.id=`${l.id}_preview`,this.userTask.userTaskConfig.formFields.splice(a,0,o)}}}i&&Object.keys(i).filter(a=>n.includes(a)).forEach(a=>{this.formData[a]=i[a]}),this.formIsFinished&&Object.keys(s).filter(a=>n.includes(a)).forEach(a=>{this.formData[a]=s[a]}),this.$nextTick(()=>{this.focusFirstFormField(),this.observeLazyElements()})},actionFn(e){if(e.label==="Speichern"||e.label==="Speichern und nächster"){const t=this.$refs.form.$el.querySelectorAll(".formkit-outer");let r=!0;if(t.forEach(n=>{const i=n.getAttribute("data-complete"),s=n.getAttribute("data-invalid");i==null&&s==="true"&&(r=!1)}),!r)return}if(this.checkCondition(e.condition)){this.showError("");const t={...this.formData};this.userTask.userTaskConfig.formFields.forEach(i=>{const s=t[i.id];if((i.type==="number"||i.type==="long")&&s!=null&&s!=="")if(i.type==="long"){const a=Number.parseInt(s,10);isNaN(a)||(t[i.id]=a)}else{const a=Number.parseFloat(s);isNaN(a)||(t[i.id]=a)}});const n=this.msg??{};n.payload={formData:t,userTask:this.userTask},this.send(n,this.actions.findIndex(i=>i.label===e.label)+(this.isConfirmDialog?this.props.options.length:0))}else this.showError(e.errorMessage)},checkCondition(e){if(e==="")return!0;try{return!!Function("fields","userTask","msg",'"use strict"; return ('+e+")")(this.formData,this.userTask,this.msg)}catch{return!1}},showError(e){this.errorMsg=e},focusFirstFormField(){if(!(this.collapsed||!this.hasUserTask)&&this.firstFormFieldRef){let e=null;this.firstFormFieldRef.node&&this.firstFormFieldRef.node.input instanceof HTMLElement?e=this.firstFormFieldRef.node.input:this.firstFormFieldRef.$el instanceof HTMLElement&&(["INPUT","TEXTAREA","SELECT"].includes(this.firstFormFieldRef.$el.tagName)?e=this.firstFormFieldRef.$el:e=this.firstFormFieldRef.$el.querySelector('input:not([type="hidden"]), textarea, select')),e&&e.focus()}}}};function fp(e,t){return e==="enum"?t.enumValues.map(r=>({title:r.name,value:r.id})):null}const pp={className:"ui-dynamic-form-wrapper"},mp={key:0,style:{"margin-bottom":"0px"}},dp={key:0},hp=["data-columns"],gp={key:2},yp={class:"formkit-label"},bp={class:"formkit-help"},_p={key:1},kp={key:1,style:{"padding-top":"32px"}};function vp(e,t,r,n,i,s){const a=c.resolveComponent("UIDynamicFormTitleText"),l=c.resolveComponent("v-col"),o=c.resolveComponent("v-row"),u=c.resolveComponent("FormKit"),p=c.resolveComponent("v-alert"),y=c.resolveComponent("UIDynamicFormFooterAction"),k=c.resolveComponent("v-form");return c.openBlock(),c.createElementBlock("div",{className:"ui-dynamic-form-external-sizing-wrapper",style:c.normalizeStyle(r.props.card_size_styling)},[r.props.title_style==="outside"&&s.hasUserTask?(c.openBlock(),c.createBlock(a,{key:0,style:c.normalizeStyle(r.props.title_style),title:s.effectiveTitle,customStyles:r.props.title_custom_text_styling,titleIcon:r.props.title_icon,collapsible:r.props.collapsible||r.props.collapse_when_finished&&i.formIsFinished,collapsed:i.collapsed,toggleCollapse:s.toggleCollapse},null,8,["style","title","customStyles","titleIcon","collapsible","collapsed","toggleCollapse"])):c.createCommentVNode("",!0),c.createElementVNode("div",pp,[s.hasUserTask?(c.openBlock(),c.createElementBlock("p",mp,[c.createVNode(k,{ref:"form",modelValue:e.form,"onUpdate:modelValue":t[0]||(t[0]=h=>e.form=h),class:c.normalizeClass(s.dynamicClass)},{default:c.withCtx(()=>[r.props.title_style!="outside"?(c.openBlock(),c.createBlock(a,{key:0,style:c.normalizeStyle(r.props.title_style),title:s.effectiveTitle,customStyles:r.props.title_custom_text_styling,titleIcon:r.props.title_icon,collapsible:r.props.collapsible||r.props.collapse_when_finished&&i.formIsFinished,collapsed:i.collapsed,toggleCollapse:s.toggleCollapse},null,8,["style","title","customStyles","titleIcon","collapsible","collapsed","toggleCollapse"])):c.createCommentVNode("",!0),c.createVNode(c.Transition,{name:"cardCollapse"},{default:c.withCtx(()=>[i.collapsed?c.createCommentVNode("",!0):(c.openBlock(),c.createElementBlock("div",dp,[c.createElementVNode("div",{className:"ui-dynamic-form-formfield-positioner",style:c.normalizeStyle(r.props.inner_card_styling),"data-columns":r.props.form_columns||1},[c.createVNode(u,{id:"form",type:"group"},{default:c.withCtx(()=>[(c.openBlock(!0),c.createElementBlock(c.Fragment,null,c.renderList(s.fields(),(h,b)=>(c.openBlock(),c.createBlock(o,{key:h,class:c.normalizeClass(h.type==="header"?"ui-dynamic-form-header-row":""),style:c.normalizeStyle(s.getRowWidthStyling(h,b))},{default:c.withCtx(()=>[c.createVNode(l,{cols:"12"},{default:c.withCtx(()=>[s.getFieldComponent(h).innerHTML?(c.openBlock(),c.createBlock(c.resolveDynamicComponent(s.getFieldComponent(h).type),c.mergeProps({key:0,ref_for:!0},s.getFieldComponent(h).props,{class:s.getFieldComponent(h).class,innerHTML:s.getFieldComponent(h).innerHTML,ref_for:!0,ref:m=>{b===0&&(i.firstFormFieldRef=m)}}),null,16,["class","innerHTML"])):s.getFieldComponent(h).innerText?(c.openBlock(),c.createBlock(c.resolveDynamicComponent(s.getFieldComponent(h).type),c.mergeProps({key:1,ref_for:!0},s.getFieldComponent(h).props,{ref_for:!0,ref:m=>{b===0&&(i.firstFormFieldRef=m)},modelValue:i.formData[h.id],"onUpdate:modelValue":m=>i.formData[h.id]=m}),{default:c.withCtx(()=>[c.createTextVNode(c.toDisplayString(s.getFieldComponent(h).innerText),1)]),_:2},1040,["modelValue","onUpdate:modelValue"])):s.getFieldComponent(h).type=="v-slider"?(c.openBlock(),c.createElementBlock("div",gp,[c.createElementVNode("p",yp,c.toDisplayString(h.label),1),(c.openBlock(),c.createBlock(c.resolveDynamicComponent(s.getFieldComponent(h).type),c.mergeProps({ref_for:!0},s.getFieldComponent(h).props,{ref_for:!0,ref:m=>{b===0&&(i.firstFormFieldRef=m)},modelValue:h.defaultValue,"onUpdate:modelValue":m=>h.defaultValue=m}),null,16,["modelValue","onUpdate:modelValue"])),c.createElementVNode("p",bp,c.toDisplayString(h.customForm?JSON.parse(h.customForm).hint:void 0),1)])):(c.openBlock(),c.createBlock(c.resolveDynamicComponent(s.getFieldComponent(h).type),c.mergeProps({key:3,ref_for:!0},s.getFieldComponent(h).props,{ref_for:!0,ref:m=>{b===0&&(i.firstFormFieldRef=m)},modelValue:i.formData[h.id],"onUpdate:modelValue":m=>i.formData[h.id]=m}),null,16,["modelValue","onUpdate:modelValue"]))]),_:2},1024)]),_:2},1032,["class","style"]))),128))]),_:1})],12,hp),c.createVNode(o,{class:c.normalizeClass(s.dynamicFooterClass)},{default:c.withCtx(()=>[i.errorMsg.length>0?(c.openBlock(),c.createBlock(o,{key:0,style:{padding:"12px"}},{default:c.withCtx(()=>[c.createVNode(p,{type:"error"},{default:c.withCtx(()=>[c.createTextVNode("Error: "+c.toDisplayString(i.errorMsg),1)]),_:1})]),_:1})):c.createCommentVNode("",!0),r.props.actions_inside_card&&i.actions.length>0?(c.openBlock(),c.createBlock(y,{key:1,actions:i.actions,actionCallback:s.actionFn,formIsFinished:i.formIsFinished,style:{padding:"16px","padding-top":"0px"}},null,8,["actions","actionCallback","formIsFinished"])):c.createCommentVNode("",!0)]),_:1},8,["class"])]))]),_:1})]),_:1},8,["modelValue","class"])])):(c.openBlock(),c.createElementBlock("p",_p,[r.props.waiting_info.length>0||r.props.waiting_title.length>0?(c.openBlock(),c.createBlock(p,{key:0,text:r.props.waiting_info,title:r.props.waiting_title},null,8,["text","title"])):c.createCommentVNode("",!0)]))]),!r.props.actions_inside_card&&i.actions.length>0&&s.hasUserTask?(c.openBlock(),c.createElementBlock("div",kp,[c.createVNode(y,{actions:i.actions,actionCallback:s.actionFn},null,8,["actions","actionCallback"])])):c.createCommentVNode("",!0)],4)}const $p=fn(up,[["render",vp]]);ue.UIDynamicForm=$p,Object.defineProperty(ue,Symbol.toStringTag,{value:"Module"})});
+                    `)})},toggleCollapse(){this.collapsed=!this.collapsed},getRowWidthStyling(e,t){let r="";return t===0&&(r+="margin-top: 12px;"),e.type,r+="flex-basis: 100%;",r},fields(){return this.computedFields},send(e,t){const r=[];r[t]=e,this.$socket.emit("widget-action",this.id,r)},init(e){if(this.msg=e,this.clearComponentCache(),!e)return;if(this.actions=this.props.options,e.payload&&e.payload.userTask)this.userTask=e.payload.userTask;else{this.userTask=null,this.formData={},this.visibleFileFields.clear();return}const r=this.userTask.userTaskConfig.formFields,n=r.map(a=>a.id),i=this.userTask.startToken.formData,s=e.payload.formData;if(this.formIsFinished=!!e.payload.formData,this.formIsFinished&&(this.collapsed=this.props.collapse_when_finished),this.visibleFileFields.clear(),r){r.forEach(a=>{if(this.formData[a.id]=a.defaultValue,a.type==="confirm"){const l=a.customForm?JSON.parse(a.customForm):{},o=l.confirmButtonText??"Confirm",u=l.declineButtonText??"Decline";this.actions=[{alignment:"right",primary:"false",label:u,condition:""},{alignment:"right",primary:"true",label:o,condition:""}]}});for(let a=r.length-1;a>=0;a--){const l=r[a];if(l.type==="file"&&i&&i[l.id]){const o={...l};o.type="file-preview",o.id=`${l.id}_preview`,this.userTask.userTaskConfig.formFields.splice(a,0,o)}}}i&&Object.keys(i).filter(a=>n.includes(a)).forEach(a=>{this.formData[a]=i[a]}),this.formIsFinished&&Object.keys(s).filter(a=>n.includes(a)).forEach(a=>{this.formData[a]=s[a]}),this.$nextTick(()=>{this.focusFirstFormField(),this.observeLazyElements()})},actionFn(e){if(e.label==="Speichern"||e.label==="Speichern und nächster"){const t=this.$refs.form.$el.querySelectorAll(".formkit-outer");let r=!0;if(t.forEach(n=>{const i=n.getAttribute("data-complete"),s=n.getAttribute("data-invalid");i==null&&s==="true"&&(r=!1)}),!r)return}if(this.checkCondition(e.condition)){this.showError("");const t={...this.formData};this.userTask.userTaskConfig.formFields.forEach(i=>{const s=t[i.id];if((i.type==="number"||i.type==="long")&&s!=null&&s!=="")if(i.type==="long"){const a=Number.parseInt(s,10);isNaN(a)||(t[i.id]=a)}else{const a=Number.parseFloat(s);isNaN(a)||(t[i.id]=a)}});const n=this.msg??{};n.payload={formData:t,userTask:this.userTask},this.send(n,this.actions.findIndex(i=>i.label===e.label)+(this.isConfirmDialog?this.props.options.length:0))}else this.showError(e.errorMessage)},checkCondition(e){if(e==="")return!0;try{return!!Function("fields","userTask","msg",'"use strict"; return ('+e+")")(this.formData,this.userTask,this.msg)}catch{return!1}},showError(e){this.errorMsg=e},focusFirstFormField(){if(!(this.collapsed||!this.hasUserTask)&&this.firstFormFieldRef){let e=null;this.firstFormFieldRef.node&&this.firstFormFieldRef.node.input instanceof HTMLElement?e=this.firstFormFieldRef.node.input:this.firstFormFieldRef.$el instanceof HTMLElement&&(["INPUT","TEXTAREA","SELECT"].includes(this.firstFormFieldRef.$el.tagName)?e=this.firstFormFieldRef.$el:e=this.firstFormFieldRef.$el.querySelector('input:not([type="hidden"]), textarea, select')),e&&e.focus()}}}};function fp(e,t){return e==="enum"?t.enumValues.map(r=>({title:r.name,value:r.id})):null}const pp={className:"ui-dynamic-form-wrapper"},mp={key:0,style:{"margin-bottom":"0px"}},dp={key:0},hp=["data-columns"],gp={key:2},yp={class:"formkit-label"},bp={class:"formkit-help"},_p={key:1},kp={key:1,style:{"padding-top":"32px"}};function vp(e,t,r,n,i,s){const a=c.resolveComponent("UIDynamicFormTitleText"),l=c.resolveComponent("v-col"),o=c.resolveComponent("v-row"),u=c.resolveComponent("FormKit"),p=c.resolveComponent("v-alert"),y=c.resolveComponent("UIDynamicFormFooterAction"),k=c.resolveComponent("v-form");return c.openBlock(),c.createElementBlock("div",{className:"ui-dynamic-form-external-sizing-wrapper",style:c.normalizeStyle(r.props.card_size_styling)},[r.props.title_style==="outside"&&s.hasUserTask?(c.openBlock(),c.createBlock(a,{key:0,style:c.normalizeStyle(r.props.title_style),title:s.effectiveTitle,customStyles:r.props.title_custom_text_styling,titleIcon:r.props.title_icon,collapsible:r.props.collapsible||r.props.collapse_when_finished&&i.formIsFinished,collapsed:i.collapsed,toggleCollapse:s.toggleCollapse},null,8,["style","title","customStyles","titleIcon","collapsible","collapsed","toggleCollapse"])):c.createCommentVNode("",!0),c.createElementVNode("div",pp,[s.hasUserTask?(c.openBlock(),c.createElementBlock("p",mp,[c.createVNode(k,{ref:"form",modelValue:e.form,"onUpdate:modelValue":t[0]||(t[0]=h=>e.form=h),class:c.normalizeClass(s.dynamicClass)},{default:c.withCtx(()=>[r.props.title_style!="outside"?(c.openBlock(),c.createBlock(a,{key:0,style:c.normalizeStyle(r.props.title_style),title:s.effectiveTitle,customStyles:r.props.title_custom_text_styling,titleIcon:r.props.title_icon,collapsible:r.props.collapsible||r.props.collapse_when_finished&&i.formIsFinished,collapsed:i.collapsed,toggleCollapse:s.toggleCollapse},null,8,["style","title","customStyles","titleIcon","collapsible","collapsed","toggleCollapse"])):c.createCommentVNode("",!0),c.createVNode(c.Transition,{name:"cardCollapse"},{default:c.withCtx(()=>[i.collapsed?c.createCommentVNode("",!0):(c.openBlock(),c.createElementBlock("div",dp,[c.createElementVNode("div",{className:"ui-dynamic-form-formfield-positioner",style:c.normalizeStyle(r.props.inner_card_styling),"data-columns":r.props.form_columns||1},[c.createVNode(u,{id:"form",type:"group"},{default:c.withCtx(()=>[(c.openBlock(!0),c.createElementBlock(c.Fragment,null,c.renderList(s.fields(),(h,b)=>(c.openBlock(),c.createBlock(o,{key:h,class:c.normalizeClass(h.type==="header"?"ui-dynamic-form-header-row":""),style:c.normalizeStyle(s.getRowWidthStyling(h,b))},{default:c.withCtx(()=>[c.createVNode(l,{cols:"12"},{default:c.withCtx(()=>[s.getFieldComponent(h).innerHTML?(c.openBlock(),c.createBlock(c.resolveDynamicComponent(s.getFieldComponent(h).type),c.mergeProps({key:0,ref_for:!0},s.getFieldComponent(h).props,{class:s.getFieldComponent(h).class,innerHTML:s.getFieldComponent(h).innerHTML,ref_for:!0,ref:m=>{b===0&&(i.firstFormFieldRef=m)}}),null,16,["class","innerHTML"])):s.getFieldComponent(h).innerText?(c.openBlock(),c.createBlock(c.resolveDynamicComponent(s.getFieldComponent(h).type),c.mergeProps({key:1,ref_for:!0},s.getFieldComponent(h).props,{ref_for:!0,ref:m=>{b===0&&(i.firstFormFieldRef=m)},modelValue:i.formData[h.id],"onUpdate:modelValue":m=>i.formData[h.id]=m}),{default:c.withCtx(()=>[c.createTextVNode(c.toDisplayString(s.getFieldComponent(h).innerText),1)]),_:2},1040,["modelValue","onUpdate:modelValue"])):s.getFieldComponent(h).type=="v-slider"?(c.openBlock(),c.createElementBlock("div",gp,[c.createElementVNode("p",yp,c.toDisplayString(h.label),1),(c.openBlock(),c.createBlock(c.resolveDynamicComponent(s.getFieldComponent(h).type),c.mergeProps({ref_for:!0},s.getFieldComponent(h).props,{ref_for:!0,ref:m=>{b===0&&(i.firstFormFieldRef=m)},modelValue:h.defaultValue,"onUpdate:modelValue":m=>h.defaultValue=m}),null,16,["modelValue","onUpdate:modelValue"])),c.createElementVNode("p",bp,c.toDisplayString(h.customForm?JSON.parse(h.customForm).hint:void 0),1)])):(c.openBlock(),c.createBlock(c.resolveDynamicComponent(s.getFieldComponent(h).type),c.mergeProps({key:3,ref_for:!0},s.getFieldComponent(h).props,{ref_for:!0,ref:m=>{b===0&&(i.firstFormFieldRef=m)},modelValue:i.formData[h.id],"onUpdate:modelValue":m=>i.formData[h.id]=m}),null,16,["modelValue","onUpdate:modelValue"]))]),_:2},1024)]),_:2},1032,["class","style"]))),128))]),_:1})],12,hp),c.createVNode(o,{class:c.normalizeClass(s.dynamicFooterClass)},{default:c.withCtx(()=>[i.errorMsg.length>0?(c.openBlock(),c.createBlock(o,{key:0,style:{padding:"12px"}},{default:c.withCtx(()=>[c.createVNode(p,{type:"error"},{default:c.withCtx(()=>[c.createTextVNode("Error: "+c.toDisplayString(i.errorMsg),1)]),_:1})]),_:1})):c.createCommentVNode("",!0),r.props.actions_inside_card&&i.actions.length>0?(c.openBlock(),c.createBlock(y,{key:1,actions:i.actions,actionCallback:s.actionFn,formIsFinished:i.formIsFinished,style:{padding:"16px","padding-top":"0px"}},null,8,["actions","actionCallback","formIsFinished"])):c.createCommentVNode("",!0)]),_:1},8,["class"])]))]),_:1})]),_:1},8,["modelValue","class"])])):(c.openBlock(),c.createElementBlock("p",_p,[r.props.waiting_info.length>0||r.props.waiting_title.length>0?(c.openBlock(),c.createBlock(p,{key:0,text:r.props.waiting_info,title:r.props.waiting_title},null,8,["text","title"])):c.createCommentVNode("",!0)]))]),!r.props.actions_inside_card&&i.actions.length>0&&s.hasUserTask?(c.openBlock(),c.createElementBlock("div",kp,[c.createVNode(y,{actions:i.actions,actionCallback:s.actionFn},null,8,["actions","actionCallback"])])):c.createCommentVNode("",!0)],4)}const $p=fn(up,[["render",vp]]);ue.UIDynamicForm=$p,Object.defineProperty(ue,Symbol.toStringTag,{value:"Module"})});

package/ui/components/UIDynamicForm.vue

@@ -1319,7 +1319,7 @@ export default {
 
             const formFields = this.userTask.userTaskConfig.formFields;
             const formFieldIds = formFields.map((ff) => ff.id);
-            const initialValues = this.userTask.startToken;
+            const initialValues = this.userTask.startToken.formData;
             const finishedFormData = msg.payload.formData;
             this.formIsFinished = !!msg.payload.formData;
             if (this.formIsFinished) {