@5minds/node-red-dashboard-2-processcube-process-progress-bar/resources/ui-process-progress-bar.umd.js

A ui component for showing progress bars tracking a process

(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".progressBarWrapper[data-v-43e20c14]{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:40px;border-radius:8px;border:2px solid #F6F5FA;background:#fff;margin-left:92px;margin-right:92px;margin-bottom:32px}.progressBarWrapper .progressBarStep[data-v-43e20c14]{display:flex;align-items:center;gap:8px;padding:16px}.progressBarWrapper .currentStep[data-v-43e20c14]{border-radius:15px;border:4px solid #8899C9}.progressBarWrapper .finishedStep[data-v-43e20c14]{border-radius:15px;background:#8899c9;color:#fff}.progressBarWrapper hr[data-v-43e20c14]{flex-grow:2;border-radius:2px;border:none;height:4px;background:#4a4759}.progressBarWrapper .coloredConnection[data-v-43e20c14]{background:#8899c9}.progressBarWrapper span[data-v-43e20c14]{font-size:21px;font-style:normal;font-weight:400;line-height:normal;white-space:nowrap}@media only screen and (max-width: 768px){.progressBarWrapper span[data-v-43e20c14]{font-size:12px}}@media only screen and (min-width: 768px){.progressBarWrapper span[data-v-43e20c14]{font-size:14px}}@media only screen and (min-width: 992px){.progressBarWrapper span[data-v-43e20c14]{font-size:16px}}@media only screen and (min-width: 1200px){.progressBarWrapper span[data-v-43e20c14]{font-size:18px}}@media only screen and (min-width: 1600px){.progressBarWrapper span[data-v-43e20c14]{font-size:21px}}")),document.head.appendChild(r)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
(function(o,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],r):(o=typeof globalThis<"u"?globalThis:o||self,r(o["ui-process-progress-bar"]={},o.vuex,o.Vue))})(this,function(o,r,e){"use strict";const a=(t,s)=>{const c=t.__vccOpts||t;for(const[l,d]of s)c[l]=d;return c},p={name:"UIProcessProgressBar",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!0,visible:!0})}},created(){this.steps=this.props.steps},computed:{...r.mapState("data",["messages"]),stepFlowNodeIds(){return this.steps.map(t=>t.flowNodeId)},activeStep(){var t,s;return(s=(t=this.messages[this.id])==null?void 0:t.processProgressBar)==null?void 0:s.activeStep},finishedSteps(){var t,s;return((s=(t=this.messages[this.id])==null?void 0:t.processProgressBar)==null?void 0:s.finishedSteps)??[]}},data(){return{steps:[]}},mounted(){this.$socket.on("widget-load:"+this.id,t=>{this.steps=this.props.steps,this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.on("msg-input:"+this.id,t=>{this.messages[this.id]=t,this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.emit("widget-load",this.id)},unmounted(){var t,s;(t=this.$socket)==null||t.off("widget-load"+this.id),(s=this.$socket)==null||s.off("msg-input:"+this.id)},methods:{}},h={class:"progressBarWrapper"},m=["src"],f=["src"];function u(t,s,c,l,d,n){return e.openBlock(),e.createElementBlock("div",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.steps,(i,k)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["progressBarStep",{currentStep:i.flowNodeId==n.activeStep,finishedStep:n.finishedSteps.includes(i.flowNodeId)}])},[i.icon&&!n.finishedSteps.includes(i.flowNodeId)?(e.openBlock(),e.createElementBlock("img",{key:0,src:i.icon},null,8,m)):e.createCommentVNode("",!0),i.iconFinished&&n.finishedSteps.includes(i.flowNodeId)?(e.openBlock(),e.createElementBlock("img",{key:1,src:i.iconFinished},null,8,f)):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(i.label),1)],2),k!=d.steps.length-1?(e.openBlock(),e.createElementBlock("hr",{key:0,class:e.normalizeClass({coloredConnection:n.finishedSteps.includes(i.flowNodeId)})},null,2)):e.createCommentVNode("",!0)],64))),256))])}const g=a(p,[["render",u],["__scopeId","data-v-43e20c14"]]);o.UIProcessProgressBar=g,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});