UNPKG

n8n-editor-ui

Version:

Workflow Editor UI for n8n

2 lines 12.2 kB
(function(){try{var e=typeof window<`u`?window:typeof global<`u`?global:typeof globalThis<`u`?globalThis:typeof self<`u`?self:{};e.SENTRY_RELEASE={id:`n8n@2.13.4`}}catch{}})();try{(function(){var e=typeof window<`u`?window:typeof global<`u`?global:typeof globalThis<`u`?globalThis:typeof self<`u`?self:{},t=new e.Error().stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]=`ed59f0c3-3c37-455f-9762-3a57b9bd754a`,e._sentryDebugIdIdentifier=`sentry-dbid-ed59f0c3-3c37-455f-9762-3a57b9bd754a`)})()}catch{}import{$ as e,C as t,E as n,N as r,S as i,Sn as a,T as o,Wt as s,_ as c,_n as l,it as u,j as d,k as f,rt as p,w as m,yn as h}from"./vue.runtime.esm-bundler-D9KLAxvJ.js";import{bt as g}from"./_MapCache-CUJwh2qp.js";import{$i as _,_t as v}from"./src-wni2AGA3.js";import{t as y}from"./_plugin-vue_export-helper-Dm3nT7Ps.js";import{r as b,w as x}from"./users.store-BHWXXawf.js";import{t as S}from"./NodeIcon-0naEDfOR.js";import{t as C}from"./resourceCenter.store-CLLPe8N4.js";var w={header:`_header_1o5z6_125`,content:`_content_1o5z6_136`,actions:`_actions_1o5z6_142`},T={};function E(r,i){return e(),n(`header`,{class:l(r.$style.header)},[t(`div`,{class:l(r.$style.content)},[u(r.$slots,`default`)],2),r.$slots.actions?(e(),n(`div`,{key:0,class:l(r.$style.actions)},[u(r.$slots,`actions`)],2)):o(``,!0)],2)}var D=y(T,[[`render`,E],[`__cssModules`,{$style:w}]]),O=y(r({__name:`WorkflowPreviewSvg`,props:{variant:{default:`default`},opacity:{default:1}},setup(r){return(i,a)=>(e(),n(`svg`,{viewBox:`0 0 320 180`,preserveAspectRatio:`xMidYMid meet`,class:l(i.$style.svg),role:`img`,"aria-label":`Workflow preview`,style:h({opacity:r.opacity})},[t(`g`,{class:l(i.$style.connections)},[...a[0]||=[f(`<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),t(`g`,{class:l(i.$style.connectionDots)},[...a[1]||=[t(`circle`,{cx:`60`,cy:`90`,r:`3`},null,-1),t(`circle`,{cx:`252`,cy:`90`,r:`3`},null,-1)]],2),t(`g`,{class:l(i.$style.nodes)},[t(`rect`,{x:`24`,y:`72`,width:`36`,height:`36`,rx:`18`,ry:`18`,class:l(i.$style.triggerNode)},null,2),a[2]||=t(`rect`,{x:`100`,y:`36`,width:`36`,height:`36`,rx:`8`,ry:`8`},null,-1),a[3]||=t(`rect`,{x:`176`,y:`36`,width:`36`,height:`36`,rx:`8`,ry:`8`},null,-1),a[4]||=t(`rect`,{x:`100`,y:`108`,width:`36`,height:`36`,rx:`8`,ry:`8`},null,-1),a[5]||=t(`rect`,{x:`252`,y:`72`,width:`36`,height:`36`,rx:`8`,ry:`8`},null,-1)],2),t(`g`,{class:l(i.$style.nodeIcons)},[t(`path`,{d:`M 40,85 L 44,90 L 40,90 L 44,95`,class:l(i.$style.triggerIcon)},null,2),a[6]||=t(`rect`,{x:`113`,y:`49`,width:`10`,height:`10`,rx:`2`},null,-1),a[7]||=t(`rect`,{x:`189`,y:`49`,width:`10`,height:`10`,rx:`2`},null,-1),a[8]||=t(`rect`,{x:`113`,y:`121`,width:`10`,height:`10`,rx:`2`},null,-1),a[9]||=t(`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`}}]]),k=`/%7B%7BBASE_PATH%7D%7D/assets/7639-C6BLtA0I.png`,A=`/%7B%7BBASE_PATH%7D%7D/assets/3050-Bx-yF05l.png`,j=`/%7B%7BBASE_PATH%7D%7D/assets/4966-BOXaqeot.png`,M=`/%7B%7BBASE_PATH%7D%7D/assets/7177-05y4mECu.png`,N=`/%7B%7BBASE_PATH%7D%7D/assets/8779-BT5sW0Ij.png`,P=`/%7B%7BBASE_PATH%7D%7D/assets/3100-BzJrOac0.png`,F=`/%7B%7BBASE_PATH%7D%7D/assets/8527-BdpxT70G.png`,I=`/%7B%7BBASE_PATH%7D%7D/assets/6270-DVyr8D55.png`,L=`/%7B%7BBASE_PATH%7D%7D/assets/7639-dark-DPc3Soiw.png`,R=`/%7B%7BBASE_PATH%7D%7D/assets/3050-dark-CJrYOxNq.png`,z=`/%7B%7BBASE_PATH%7D%7D/assets/4966-dark--ydUeKBy.png`,B=`/%7B%7BBASE_PATH%7D%7D/assets/7177-dark-B3HKrjiH.png`,V=`/%7B%7BBASE_PATH%7D%7D/assets/8779-dark-DoOM30Cm.png`,H=`/%7B%7BBASE_PATH%7D%7D/assets/3100-dark-CfB8bh5X.png`,U=`/%7B%7BBASE_PATH%7D%7D/assets/8527-dark-LQJzVLh4.png`,W=`/%7B%7BBASE_PATH%7D%7D/assets/6270-dark-CuSnY6db.png`,G=[`src`,`alt`],K=y(r({__name:`TemplateCard`,props:{template:{},noSetup:{type:Boolean,default:!1},onClickOverride:{type:Function,default:void 0},section:{default:`inspiration`}},setup(r){let u={7639:k,3050:A,4966:j,7177:M,8779:N,3100:P,8527:F,6270:I},f={7639:L,3050:R,4966:z,7177:B,8779:V,3100:H,8527:U,6270:W},h=r,y=g(),w=x(),T=b(),{getTemplateRoute:E,trackTileClick:D}=C(),K=v(),q=i(()=>T.appliedTheme===`dark`),J=i(()=>{if(!h.template?.nodes)return[];let e=new Set(h.template.nodes.map(e=>e.name));return Array.from(e).slice(0,4).map(e=>w.getNodeType(e)).filter(Boolean)}),Y=i(()=>{if(!h.template?.nodes)return 0;let e=new Set(h.template.nodes.map(e=>e.name));return Math.max(0,e.size-4)}),X=i(()=>{let e=h.template?.nodes?.length??0;return e<=3?5:e<=6?10:15}),Z=i(()=>(q.value?f:u)[h.template.id]??null),Q=async()=>{h.onClickOverride?h.onClickOverride():(D(h.section,`template`,h.template.id),await K.push(E(h.template.id)))};return(i,u)=>(e(),n(`div`,{class:l(i.$style.card),onClick:Q},[t(`div`,{class:l(i.$style.imageContainer)},[Z.value?(e(),n(`img`,{key:0,src:Z.value,alt:r.template.name,class:l(i.$style.workflowPreview)},null,10,G)):(e(),m(O,{key:1,class:l(i.$style.workflowPreview)},null,8,[`class`])),J.value.length>0?(e(),n(`div`,{key:2,class:l(i.$style.nodesBadge)},[(e(!0),n(c,null,p(J.value,t=>(e(),n(`div`,{key:t.name,class:l(i.$style.nodeIcon)},[d(S,{size:20,"stroke-width":1.5,"node-type":t},null,8,[`node-type`])],2))),128)),Y.value>0?(e(),n(`span`,{key:0,class:l(i.$style.moreCount)},`+`+a(Y.value),3)):o(``,!0)],2)):o(``,!0)],2),t(`div`,{class:l(i.$style.content)},[t(`div`,{class:l(i.$style.titleRow)},[d(s(_),{icon:`workflow`,class:l(i.$style.icon),size:`medium`},null,8,[`class`]),t(`h3`,{class:l(i.$style.title)},a(r.template.name),3)],2),t(`div`,{class:l(i.$style.meta)},[d(s(_),{icon:`clock`,class:l(i.$style.clockIcon),size:`xsmall`},null,8,[`class`]),t(`span`,null,a(s(y).baseText(`experiments.resourceCenter.template.setupTime`,{interpolate:{minutes:X.value}})),1)],2)],2)],2))}}),[[`__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`}}]]),q=[`src`,`alt`],J={key:0},Y={key:2},X=y(r({__name:`VideoThumbCard`,props:{video:{},iconType:{default:`youtube`},section:{default:`inspiration`}},setup(r){let i=r,c=g(),{trackTileClick:u}=C(),f=()=>{let e=`https://www.youtube.com/watch?v=${i.video.videoId}`;u(i.section,`video`,e),window.open(e,`_blank`,`noopener,noreferrer`)};return(i,u)=>(e(),n(`div`,{class:l(i.$style.card),onClick:f},[t(`div`,{class:l(i.$style.thumbnailContainer)},[t(`img`,{src:r.video.thumbnailUrl,alt:r.video.title,class:l(i.$style.thumbnail),loading:`lazy`},null,10,q)],2),t(`div`,{class:l(i.$style.content)},[t(`div`,{class:l(i.$style.titleRow)},[d(s(_),{icon:r.iconType===`youtube`?`youtube`:`lightbulb`,class:l(i.$style.icon),size:`medium`},null,8,[`icon`,`class`]),t(`h3`,{class:l(i.$style.title)},a(r.video.title),3)],2),r.video.duration||r.video.level?(e(),n(`div`,{key:0,class:l(i.$style.meta)},[r.video.duration?(e(),n(`span`,J,a(r.video.duration),1)):o(``,!0),r.video.duration&&r.video.level?(e(),n(`span`,{key:1,class:l(i.$style.separator)},`·`,2)):o(``,!0),r.video.level?(e(),n(`span`,Y,a(s(c).baseText(`experiments.resourceCenter.video.level`,{interpolate:{level:r.video.level}})),1)):o(``,!0)],2)):o(``,!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`}}]]);const Z=[{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`}],Q=[{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`}],$=[{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`}],ee=[8527,6270],te=[{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`}],ne=[7639,3050,4966,7177,8779,3100];export{Q as a,K as c,ee as i,O as l,ne as n,$ as o,te as r,X as s,Z as t,D as u}; //# sourceMappingURL=resourceCenterData-CQCDwFwe.js.map