n8n-editor-ui
Version:
Workflow Editor UI for n8n
2 lines • 17.4 kB
JavaScript
!function(){try{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{}).SENTRY_RELEASE={id:"n8n@2.13.4"}}catch(e){}}(),System.register(["./vue.runtime.esm-bundler-legacy-IafOlCW8.js","./_MapCache-legacy-DwgdC8YO.js","./src-legacy-Dwzr7bD0.js","./_plugin-vue_export-helper-legacy-DEZAmQqp.js","./users.store-legacy-OKuN0qAC.js","./NodeIcon-legacy-B4uktMo3.js","./resourceCenter.store-legacy-CGQJIm-B.js"],(function(e,t){var o,i,n,r,s,a,l,d,c,p,u,g,h,_,m,v,y,b,f,x,w,k,B,A,I,z,C,D,T,q,$;function j(e,t){return o(),n("header",{class:p(e.$style.header)},[i("div",{class:p(e.$style.content)},[u(e.$slots,"default")],2),e.$slots.actions?(o(),n("div",{key:0,class:p(e.$style.actions)},[u(e.$slots,"actions")],2)):l("",!0)],2)}return{setters:[function(e){o=e.$,i=e.C,n=e.E,r=e.N,s=e.S,a=e.Sn,l=e.T,d=e.Wt,c=e._,p=e._n,u=e.it,g=e.j,h=e.k,_=e.rt,m=e.w,v=e.yn},function(e){y=e.bt},function(e){b=e.$i,f=e._t},function(e){x=e.t},function(e){w=e.r,k=e.w},function(e){B=e.t},function(e){A=e.t}],execute:function(){(I=document.createElement("style")).textContent="._header_1o5z6_125{justify-content:space-between;align-items:center;gap:var(--spacing--md);margin-bottom:var(--spacing--xl);padding:var(--spacing--xs)0;border-bottom:var(--border);height:55px;display:flex}._content_1o5z6_136{align-items:center;gap:var(--spacing--2xs);display:flex}._actions_1o5z6_142{align-items:center;gap:var(--spacing--xs);display:flex}._svg_1bx37_125{width:100%;height:100%}._nodes_1bx37_130 rect{fill:var(--color--background);stroke:var(--color--foreground);stroke-opacity:.2;stroke-width:1.5px}._triggerNode_1bx37_137{fill:var(--color--background)}._connections_1bx37_141 path{fill:none;stroke:var(--color--foreground--shade-1);stroke-width:2px;stroke-opacity:.3}._connectionDots_1bx37_148 circle{fill:var(--color--foreground--shade-1);fill-opacity:.3}._nodeIcons_1bx37_153 rect{fill:var(--color--foreground);fill-opacity:.15}._nodeIcons_1bx37_153 path{fill:none;stroke:var(--color--foreground);stroke-opacity:.2;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}._triggerIcon_1bx37_167{stroke:var(--color--foreground);stroke-opacity:.25}._card_1hkp8_125{cursor:pointer;flex-direction:column;flex:1 1 0;min-width:0;transition:all .35s cubic-bezier(.22,1,.36,1);display:flex}._card_1hkp8_125:hover ._imageContainer_1hkp8_133{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}._imageContainer_1hkp8_133{aspect-ratio:16/9;background-color:var(--color--foreground--tint-2);border-radius:var(--radius--lg);border:1px solid var(--color--foreground--tint-1);width:100%;transition:all .35s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}._workflowPreview_1hkp8_149{pointer-events:none;object-fit:cover;width:100%;height:100%}._nodesBadge_1hkp8_156{align-items:center;gap:var(--spacing--4xs);padding:var(--spacing--4xs);background-color:var(--color--background--light-3);border-bottom-left-radius:var(--radius);border-bottom:1px solid var(--color--foreground--tint-1);border-left:1px solid var(--color--foreground--tint-1);flex-direction:row;display:flex;position:absolute;top:0;right:0}._nodeIcon_1hkp8_171{justify-content:center;align-items:center;width:20px;height:20px;display:flex}._moreCount_1hkp8_179{background-color:var(--color--foreground--tint-1);border:1px solid var(--color--background--shade-1);width:20px;height:20px;color:var(--color--text--tint-1);font-size:8px;font-weight:var(--font-weight--bold);border-radius:50%;justify-content:center;align-items:center;display:flex}._content_1hkp8_193{gap:var(--spacing--3xs);padding-top:var(--spacing--xs);flex-direction:column;display:flex}._titleRow_1hkp8_200{align-items:flex-start;gap:var(--spacing--2xs);display:flex}._icon_1hkp8_206{color:var(--color--text--tint-1);flex-shrink:0;width:20px;height:20px}._title_1hkp8_200{font-weight:var(--font-weight--bold);color:var(--color--text--shade-1);line-height:var(--line-height--md);font-size:var(--font-size--sm);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;display:-webkit-box;overflow:hidden}._meta_1hkp8_225{align-items:center;gap:var(--spacing--4xs);font-size:var(--font-size--2xs);color:var(--color--text--tint-1);padding-left:calc(20px + var(--spacing--2xs));display:flex}._clockIcon_1hkp8_234{color:var(--color--text--tint-1)}._card_1rxzq_125{cursor:pointer;flex:1 1 0;min-width:0;transition:all .35s cubic-bezier(.22,1,.36,1);position:relative}._card_1rxzq_125:hover ._thumbnailContainer_1rxzq_132{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}._thumbnailContainer_1rxzq_132{aspect-ratio:16/9;background-color:var(--color--foreground--tint-2);border-radius:var(--radius--lg);border:1px solid var(--color--foreground--tint-1);width:100%;transition:all .35s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}._thumbnail_1rxzq_132{object-fit:cover;width:100%;height:100%;transition:transform .35s}._playButton_1rxzq_155{background:rgba(255,255,255,.9);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;transition:all .35s cubic-bezier(.22,1,.36,1);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.15)}._content_1rxzq_171{gap:var(--spacing--3xs);padding-top:var(--spacing--xs);flex-direction:column;display:flex}._titleRow_1rxzq_178{align-items:flex-start;gap:var(--spacing--2xs);display:flex}._icon_1rxzq_184{color:var(--color--text--tint-1);flex-shrink:0;width:20px;height:20px}._title_1rxzq_178{font-weight:var(--font-weight--bold);color:var(--color--text--shade-1);line-height:var(--line-height--md);font-size:var(--font-size--sm);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;display:-webkit-box;overflow:hidden}._meta_1rxzq_203{align-items:center;gap:var(--spacing--3xs);font-size:var(--font-size--2xs);color:var(--color--text--tint-1);padding-left:calc(20px + var(--spacing--2xs));display:flex}._separator_1rxzq_212{color:var(--color--text);font-weight:var(--font-weight--bold)}\n/*$vite$:1*/",document.head.appendChild(I);try{t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},(u=(new t.Error).stack)&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[u]="c1e89872-80b7-4a55-8f7d-e2cfab59a26d",t._sentryDebugIdIdentifier="sentry-dbid-c1e89872-80b7-4a55-8f7d-e2cfab59a26d")}catch(t){}var t,u;e("u",x({},[["render",j],["__cssModules",{$style:{header:"_header_1o5z6_125",content:"_content_1o5z6_136",actions:"_actions_1o5z6_142"}}]])),e("l",z=x(r({__name:"WorkflowPreviewSvg",props:{variant:{default:"default"},opacity:{default:1}},setup:e=>(t,r)=>(o(),n("svg",{viewBox:"0 0 320 180",preserveAspectRatio:"xMidYMid meet",class:p(t.$style.svg),role:"img","aria-label":"Workflow preview",style:v({opacity:e.opacity})},[i("g",{class:p(t.$style.connections)},[...r[0]||(r[0]=[h('<path d="M 60,90 C 80,90 80,54 100,54"></path><path d="M 60,90 C 80,90 80,126 100,126"></path><path d="M 136,54 C 152,54 160,54 176,54"></path><path d="M 212,54 C 232,54 232,90 252,90"></path><path d="M 136,126 C 180,126 212,90 252,90"></path>',5)])],2),i("g",{class:p(t.$style.connectionDots)},[...r[1]||(r[1]=[i("circle",{cx:"60",cy:"90",r:"3"},null,-1),i("circle",{cx:"252",cy:"90",r:"3"},null,-1)])],2),i("g",{class:p(t.$style.nodes)},[i("rect",{x:"24",y:"72",width:"36",height:"36",rx:"18",ry:"18",class:p(t.$style.triggerNode)},null,2),r[2]||(r[2]=i("rect",{x:"100",y:"36",width:"36",height:"36",rx:"8",ry:"8"},null,-1)),r[3]||(r[3]=i("rect",{x:"176",y:"36",width:"36",height:"36",rx:"8",ry:"8"},null,-1)),r[4]||(r[4]=i("rect",{x:"100",y:"108",width:"36",height:"36",rx:"8",ry:"8"},null,-1)),r[5]||(r[5]=i("rect",{x:"252",y:"72",width:"36",height:"36",rx:"8",ry:"8"},null,-1))],2),i("g",{class:p(t.$style.nodeIcons)},[i("path",{d:"M 40,85 L 44,90 L 40,90 L 44,95",class:p(t.$style.triggerIcon)},null,2),r[6]||(r[6]=i("rect",{x:"113",y:"49",width:"10",height:"10",rx:"2"},null,-1)),r[7]||(r[7]=i("rect",{x:"189",y:"49",width:"10",height:"10",rx:"2"},null,-1)),r[8]||(r[8]=i("rect",{x:"113",y:"121",width:"10",height:"10",rx:"2"},null,-1)),r[9]||(r[9]=i("rect",{x:"265",y:"85",width:"10",height:"10",rx:"2"},null,-1))],2)],6))}),[["__cssModules",{$style:{svg:"_svg_1bx37_125",nodes:"_nodes_1bx37_130",triggerNode:"_triggerNode_1bx37_137",connections:"_connections_1bx37_141",connectionDots:"_connectionDots_1bx37_148",nodeIcons:"_nodeIcons_1bx37_153",triggerIcon:"_triggerIcon_1bx37_167"}}]])),C=["src","alt"],D=r({__name:"TemplateCard",props:{template:{},noSetup:{type:Boolean,default:!1},onClickOverride:{type:Function,default:void 0},section:{default:"inspiration"}},setup(e){const t={7639:"/%7B%7BBASE_PATH%7D%7D/assets/7639-C6BLtA0I.png",3050:"/%7B%7BBASE_PATH%7D%7D/assets/3050-Bx-yF05l.png",4966:"/%7B%7BBASE_PATH%7D%7D/assets/4966-BOXaqeot.png",7177:"/%7B%7BBASE_PATH%7D%7D/assets/7177-05y4mECu.png",8779:"/%7B%7BBASE_PATH%7D%7D/assets/8779-BT5sW0Ij.png",3100:"/%7B%7BBASE_PATH%7D%7D/assets/3100-BzJrOac0.png",8527:"/%7B%7BBASE_PATH%7D%7D/assets/8527-BdpxT70G.png",6270:"/%7B%7BBASE_PATH%7D%7D/assets/6270-DVyr8D55.png"},r={7639:"/%7B%7BBASE_PATH%7D%7D/assets/7639-dark-DPc3Soiw.png",3050:"/%7B%7BBASE_PATH%7D%7D/assets/3050-dark-CJrYOxNq.png",4966:"/%7B%7BBASE_PATH%7D%7D/assets/4966-dark--ydUeKBy.png",7177:"/%7B%7BBASE_PATH%7D%7D/assets/7177-dark-B3HKrjiH.png",8779:"/%7B%7BBASE_PATH%7D%7D/assets/8779-dark-DoOM30Cm.png",3100:"/%7B%7BBASE_PATH%7D%7D/assets/3100-dark-CfB8bh5X.png",8527:"/%7B%7BBASE_PATH%7D%7D/assets/8527-dark-LQJzVLh4.png",6270:"/%7B%7BBASE_PATH%7D%7D/assets/6270-dark-CuSnY6db.png"},u=e,h=y(),v=k(),x=w(),{getTemplateRoute:I,trackTileClick:D}=A(),T=f(),q=s((()=>"dark"===x.appliedTheme)),$=s((()=>{if(!u.template?.nodes)return[];const e=new Set(u.template.nodes.map((e=>e.name)));return Array.from(e).slice(0,4).map((e=>v.getNodeType(e))).filter(Boolean)})),j=s((()=>{if(!u.template?.nodes)return 0;const e=new Set(u.template.nodes.map((e=>e.name)));return Math.max(0,e.size-4)})),P=s((()=>{const e=u.template?.nodes?.length??0;return e<=3?5:e<=6?10:15})),H=s((()=>(q.value?r:t)[u.template.id]??null)),S=async()=>{u.onClickOverride?u.onClickOverride():(D(u.section,"template",u.template.id),await T.push(I(u.template.id)))};return(t,r)=>(o(),n("div",{class:p(t.$style.card),onClick:S},[i("div",{class:p(t.$style.imageContainer)},[H.value?(o(),n("img",{key:0,src:H.value,alt:e.template.name,class:p(t.$style.workflowPreview)},null,10,C)):(o(),m(z,{key:1,class:p(t.$style.workflowPreview)},null,8,["class"])),$.value.length>0?(o(),n("div",{key:2,class:p(t.$style.nodesBadge)},[(o(!0),n(c,null,_($.value,(e=>(o(),n("div",{key:e.name,class:p(t.$style.nodeIcon)},[g(B,{size:20,"stroke-width":1.5,"node-type":e},null,8,["node-type"])],2)))),128)),j.value>0?(o(),n("span",{key:0,class:p(t.$style.moreCount)},"+"+a(j.value),3)):l("",!0)],2)):l("",!0)],2),i("div",{class:p(t.$style.content)},[i("div",{class:p(t.$style.titleRow)},[g(d(b),{icon:"workflow",class:p(t.$style.icon),size:"medium"},null,8,["class"]),i("h3",{class:p(t.$style.title)},a(e.template.name),3)],2),i("div",{class:p(t.$style.meta)},[g(d(b),{icon:"clock",class:p(t.$style.clockIcon),size:"xsmall"},null,8,["class"]),i("span",null,a(d(h).baseText("experiments.resourceCenter.template.setupTime",{interpolate:{minutes:P.value}})),1)],2)],2)],2))}}),e("c",x(D,[["__cssModules",{$style:{card:"_card_1hkp8_125",imageContainer:"_imageContainer_1hkp8_133",workflowPreview:"_workflowPreview_1hkp8_149",nodesBadge:"_nodesBadge_1hkp8_156",nodeIcon:"_nodeIcon_1hkp8_171",moreCount:"_moreCount_1hkp8_179",content:"_content_1hkp8_193",titleRow:"_titleRow_1hkp8_200",icon:"_icon_1hkp8_206",title:"_title_1hkp8_200",meta:"_meta_1hkp8_225",clockIcon:"_clockIcon_1hkp8_234"}}]])),T=["src","alt"],q={key:0},$={key:2},e("s",x(r({__name:"VideoThumbCard",props:{video:{},iconType:{default:"youtube"},section:{default:"inspiration"}},setup(e){const t=e,r=y(),{trackTileClick:s}=A(),c=()=>{const e=`https://www.youtube.com/watch?v=${t.video.videoId}`;s(t.section,"video",e),window.open(e,"_blank","noopener,noreferrer")};return(t,s)=>(o(),n("div",{class:p(t.$style.card),onClick:c},[i("div",{class:p(t.$style.thumbnailContainer)},[i("img",{src:e.video.thumbnailUrl,alt:e.video.title,class:p(t.$style.thumbnail),loading:"lazy"},null,10,T)],2),i("div",{class:p(t.$style.content)},[i("div",{class:p(t.$style.titleRow)},[g(d(b),{icon:"youtube"===e.iconType?"youtube":"lightbulb",class:p(t.$style.icon),size:"medium"},null,8,["icon","class"]),i("h3",{class:p(t.$style.title)},a(e.video.title),3)],2),e.video.duration||e.video.level?(o(),n("div",{key:0,class:p(t.$style.meta)},[e.video.duration?(o(),n("span",q,a(e.video.duration),1)):l("",!0),e.video.duration&&e.video.level?(o(),n("span",{key:1,class:p(t.$style.separator)},"·",2)):l("",!0),e.video.level?(o(),n("span",$,a(d(r).baseText("experiments.resourceCenter.video.level",{interpolate:{level:e.video.level}})),1)):l("",!0)],2)):l("",!0)],2)],2))}}),[["__cssModules",{$style:{card:"_card_1rxzq_125",thumbnailContainer:"_thumbnailContainer_1rxzq_132",thumbnail:"_thumbnail_1rxzq_132",playButton:"_playButton_1rxzq_155",content:"_content_1rxzq_171",titleRow:"_titleRow_1rxzq_178",icon:"_icon_1rxzq_184",title:"_title_1rxzq_178",meta:"_meta_1rxzq_203",separator:"_separator_1rxzq_212"}}]])),e("t",[{id:"beginner-course",title:"n8n Beginner Course",description:"Official video course covering workflows, APIs, webhooks, nodes, error handling, and debugging. Perfect starting point.",url:"https://docs.n8n.io/video-courses/",thumbnailUrl:"https://img.youtube.com/vi/RpjQTGKm-ok/hq720.jpg",duration:"3 hours",lessonCount:12,type:"Video"},{id:"advanced-course",title:"n8n Advanced Course",description:"Master complex data flows, advanced nodes, sub-workflows, error workflows, and enterprise features.",url:"https://docs.n8n.io/video-courses/",thumbnailUrl:"https://img.youtube.com/vi/3w7xIMKLVAg/hq720.jpg",duration:"4 hours",lessonCount:15,type:"Video"}]),e("a",[{videoId:"4cQWJViybAQ",title:"Build your first workflow",description:"Get started with n8n by building your first workflow from scratch",thumbnailUrl:"https://img.youtube.com/vi/4cQWJViybAQ/hq720.jpg",duration:"15 min",level:"Beginner"},{videoId:"kkrA7tGHYNo",title:"Basic workflow concepts",description:"Learn the fundamental concepts of n8n workflows",thumbnailUrl:"https://img.youtube.com/vi/kkrA7tGHYNo/hq720.jpg",duration:"14 min",level:"Beginner"},{videoId:"rCPXBkeBWCQ",title:"Nodes",description:"Understanding how nodes work in n8n workflows",thumbnailUrl:"https://img.youtube.com/vi/rCPXBkeBWCQ/hq720.jpg",duration:"13 min",level:"Beginner"},{videoId:"a5sJNwfZ528",title:"Using the AI workflow builder",description:"Learn how to use AI to build workflows faster",thumbnailUrl:"https://img.youtube.com/vi/a5sJNwfZ528/hq720.jpg",duration:"18 min",level:"Beginner"},{videoId:"zcNB8L4_9mA",title:"Use test data (Pinning)",description:"Learn how to use pinning to test your workflows with sample data",thumbnailUrl:"https://img.youtube.com/vi/zcNB8L4_9mA/hq720.jpg",duration:"7 min",level:"Beginner"},{videoId:"kvEGWVMo-2c",title:"Connect any API with HTTP node",description:"Master API integrations using the HTTP Request node",thumbnailUrl:"https://img.youtube.com/vi/kvEGWVMo-2c/hq720.jpg",duration:"5 min",level:"Intermediate"},{videoId:"Gxe_RfCRH-o",title:"Fixing issues (Debugging)",description:"Learn how to debug and fix issues in your workflows",thumbnailUrl:"https://img.youtube.com/vi/Gxe_RfCRH-o/hq720.jpg",duration:"16 min",level:"Intermediate"},{videoId:"bTF3tACqPRU",title:"Handling errors",description:"Set up error handling to make your workflows more robust",thumbnailUrl:"https://img.youtube.com/vi/bTF3tACqPRU/hq720.jpg",duration:"10 min",level:"Intermediate"}]),e("o",[{videoId:"ZHH3sr234zY",title:"Build AI Agents & Automate Workflows",description:"Comprehensive masterclass on building AI agents with n8n",thumbnailUrl:"https://img.youtube.com/vi/ZHH3sr234zY/hq720.jpg",duration:"1h 32 min",level:"Intermediate"},{videoId:"UIf-SlmMays",title:"Zero to Hero",description:"Complete journey from beginner to advanced n8n user",thumbnailUrl:"https://img.youtube.com/vi/UIf-SlmMays/hq720.jpg",duration:"3h 35 min",level:"Beginner"},{videoId:"D9MIGseFB3g",title:"Essential nodes with use cases",description:"Learn the most important nodes and when to use them",thumbnailUrl:"https://img.youtube.com/vi/D9MIGseFB3g/hq720.jpg",duration:"24 min",level:"Beginner"},{videoId:"zMy5yoA-ub8",title:"25 Tips & Tricks",description:"Power user tips and tricks to boost your productivity",thumbnailUrl:"https://img.youtube.com/vi/zMy5yoA-ub8/hq720.jpg",duration:"15 min",level:"Intermediate"}]),e("i",[8527,6270]),e("r",[{videoId:"A0OwvNOLNlw",title:"Whatsapp based AI agent",description:"Build an AI agent that works through WhatsApp",thumbnailUrl:"https://img.youtube.com/vi/A0OwvNOLNlw/hq720.jpg",duration:"7 min"},{videoId:"k3mcttDLJB4",title:"Voice Agent",description:"Create a voice-powered AI agent",thumbnailUrl:"https://img.youtube.com/vi/k3mcttDLJB4/hq720.jpg",duration:"28 min"},{videoId:"h7BLVKh7yzc",title:"Build an Outlook inbox manager",description:"Automate your email management with Outlook integration",thumbnailUrl:"https://img.youtube.com/vi/h7BLVKh7yzc/hq720.jpg",duration:"32 min"}]),e("n",[7639,3050,4966,7177,8779,3100])}}}));
//# sourceMappingURL=resourceCenterData-legacy-CtDSdG2E.js.map