@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-d9042733]{display:grid;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-d9042733]{display:flex;align-items:center;gap:8px;padding:16px}.progressBarWrapper .currentStep[data-v-d9042733]{border-radius:15px;border:4px solid #8899C9}.progressBarWrapper .finishedStep[data-v-d9042733]{border-radius:15px;background:#8899c9;color:#fff}.progressBarWrapper hr[data-v-d9042733]{border-radius:2px;border:none;height:4px;background:#4a4759}.progressBarWrapper .coloredConnection[data-v-d9042733]{background:#8899c9}.progressBarWrapper span[data-v-d9042733]{font-size:21px;font-style:normal;font-weight:400;line-height:normal;white-space:nowrap}")),document.head.appendChild(r)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o["ui-process-progress-bar"]={},o.vuex,o.Vue))})(this,function(o,n,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:{...n.mapState("data",["messages"]),templateColumns(){return{gridTemplateColumns:new Array(this.steps.length).fill("min-content").join(" auto ")}},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:{}},m=["src"],h=["src"];function f(t,s,c,l,d,r){return e.openBlock(),e.createElementBlock("div",{class:"progressBarWrapper",style:e.normalizeStyle(r.templateColumns)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.steps,(i,g)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["progressBarStep",{currentStep:i.flowNodeId==r.activeStep,finishedStep:r.finishedSteps.includes(i.flowNodeId)}])},[i.icon&&!r.finishedSteps.includes(i.flowNodeId)?(e.openBlock(),e.createElementBlock("img",{key:0,src:i.icon},null,8,m)):e.createCommentVNode("",!0),i.iconFinished&&r.finishedSteps.includes(i.flowNodeId)?(e.openBlock(),e.createElementBlock("img",{key:1,src:i.iconFinished},null,8,h)):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(i.label),1)],2),g!=d.steps.length-1?(e.openBlock(),e.createElementBlock("hr",{key:0,class:e.normalizeClass({coloredConnection:r.finishedSteps.includes(i.flowNodeId)})},null,2)):e.createCommentVNode("",!0)],64))),256))],4)}const u=a(p,[["render",f],["__scopeId","data-v-d9042733"]]);o.UIProcessProgressBar=u,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});