import{I as ie,e as X,S as pe,T as re,H as ue,U as de,b as Z,V as me,W as ce,X as fe,M as ve,Y as _e,Z as he,D as be,Q as ge}from"./er2hcepb.js";import{Q as t,S as _,U as n,k as I,l as S,a6 as Q,a5 as W,a0 as v,u as N,M as x,W as k,F as M,ab as B,V as H,b as L,x as ye,c as we,$ as b,y as A,R as xe,Y as ke,a1 as z,ae as Ce,a7 as $e,a8 as q}from"./vendor/json-editor-vue-gv8v06ez.js";import{_ as Ne}from"./help-fab.vue-d5mgp1hs.js";import{_ as Ve}from"./ncheckbox.vue-hj8qatqi.js";import{_ as J}from"./nnavbar.vue-hzjn49l3.js";import{_ as K}from"./nbadge-fn7hrj12.js";import{_ as ee}from"./filepath-item.vue-n2otfocd.js";import{_ as Se}from"./ndrawer.vue-gxd9fltc.js";import{N as Pe}from"./vendor/vis-dlwijd5n.js";import{_ as De}from"./nselect-tabs.vue-fducs2m0.js";import{_ as Me}from"./nsection-block-f8z83agf.js";import{_ as Te}from"./nicon-title.vue-lmnsr02i.js";import{D as O}from"./constants-b32h69zq.js";import{u as Ue,a as Be}from"./state-components-hlkgglj2.js";import"./vendor/unocss-f0kk6o39.js";import"./vendor/shiki-ml6g43ls.js";const Le={class:"markdown-body"},Ie={__name:"components",setup(r,{expose:s}){return s({frontmatter:{}}),(a,i)=>(t(),_("div",Le,i[0]||(i[0]=[n("h1",null,"Components",-1),n("p",null,"Vue Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation. This is very similar to how we nest native HTML elements, but Vue implements its own component model that allow us to encapsulate custom content and logic in each component.",-1),n("p",null,"Components placed in the components/ directory are automatically registered by Nuxt. They can be used in your templates without importing them.",-1),n("p",null,[n("a",{href:"https://nuxt.com/docs/guide/directory-structure/components",target:"_blank",rel:"noopener"},"Learn more in the documentation")],-1)])))}},Re=/\d/,Fe=["-","_","/","."];function Ge(r=""){if(!Re.test(r))return r!==r.toLowerCase()}function Ae(r,s){const m=Fe,a=[];if(!r||typeof r!="string")return a;let i="",o,p;for(const c of r){const u=m.includes(c);if(u===!0){a.push(i),i="",o=void 0;continue}const f=Ge(c);if(p===!1){if(o===!1&&f===!0){a.push(i),i=c,o=f;continue}if(o===!0&&f===!1&&i.length>1){const g=i.at(-1);a.push(i.slice(0,Math.max(0,i.length-1))),i=g+c,o=f;continue}}i+=c,o=f,p=u}return a.push(i),a}function Ee(r){return r?r[0].toUpperCase()+r.slice(1):""}function ne(r,s){return r?(Array.isArray(r)?r:Ae(r)).map(m=>Ee(m)).join(""):""}const ze={"text-sm":"","font-mono":""},oe=I({__name:"ComponentName",props:{component:{}},setup(r){const s=r,m=S(()=>s.component.pascalName||ne(s.component.name||s.component.__name||s.component.kebabName||""));return(a,i)=>(t(),_("code",ze,[i[0]||(i[0]=n("span",{mr1:"",op20:""},"<",-1)),Q(W(m.value),1),i[1]||(i[1]=n("span",{ml1:"",op20:""},"/>",-1))]))}}),We={flex:"~ col gap1","items-start":"","of-hidden":""},He={flex:"~ gap2",px3:""},je={px3:"",pb2:""},Oe={key:0,border:"t base","max-h-60":"","w-full":"","of-auto":"",px3:"",py3:""},Qe={"text-sm":""},Xe={"text-primary":""},Ye={key:0,flex:"~ col gap-2","items-start":"",pt3:"","text-sm":"",op75:""},qe={key:1,border:"t base","max-h-60":"","w-full":"","of-auto":"",px3:"",py3:""},Ze={"text-sm":""},Je={"text-primary":""},Ke={key:0,flex:"~ col gap-2","items-start":"",pt3:"","text-sm":"",op75:""},te=I({__name:"ComponentDetails",props:{component:{},dependencies:{},dependents:{}},setup(r){const s=r,m=S(()=>s.component.pascalName||ne(s.component.name||s.component.__name||s.component.kebabName||"")),a=S(()=>s.component.filePath||s.component.file||s.component.__file||""),i=ie();return(o,p)=>{const c=oe,u=X,f=K,g=ee;return t(),_("div",We,[n("div",He,[v(c,{component:o.component},null,8,["component"]),v(u,{title:"Copy name","flex-none":"",icon:"carbon-copy",border:!1,onClick:p[0]||(p[0]=h=>N(i)(`<${m.value}></${m.value}>`,"component-name"))}),o.component.global?(t(),x(f,{key:0,n:"green",title:"Registered at runtime as a global component",textContent:"runtime"})):k("",!0)]),n("div",je,[a.value?(t(),x(g,{key:0,filepath:a.value,"w-full":"","text-sm":"",op40:"","group-hover:op75":""},null,8,["filepath"])):k("",!0)]),o.dependents?(t(),_("div",Oe,[n("div",Qe,[n("strong",Xe,W(o.dependents.length),1),p[1]||(p[1]=n("span",{op50:""}," references",-1))]),o.dependents.length?(t(),_("div",Ye,[(t(!0),_(M,null,B(o.dependents,h=>(t(),x(g,{key:h,filepath:h},null,8,["filepath"]))),128))])):k("",!0)])):k("",!0),o.dependencies?(t(),_("div",qe,[n("div",Ze,[n("strong",Je,W(o.dependencies.length),1),p[2]||(p[2]=n("span",{op50:""}," dependencies",-1))]),o.dependencies.length?(t(),_("div",Ke,[(t(!0),_(M,null,B(o.dependencies,h=>(t(),x(g,{key:h,filepath:h},null,8,["filepath"]))),128))])):k("",!0)])):k("",!0),H(o.$slots,"default")])}}}),en={flex:"~ gap-4 wrap","w-full":""},nn={relative:"","h-full":"","w-full":""},on={key:0,py4:"",pt4:"",flex:"~ col"},tn={border:"t base",p4:""},sn=I({__name:"ComponentsGraph",props:{components:{},relationships:{}},setup(r){const s=r,m=L(),a=L(),i=pe(),o=L(),p=re(),c=ue(),u=de(),{componentsGraphShowNodeModules:f,componentsGraphShowGlobalComponents:g,componentsGraphShowPages:h,componentsGraphShowLayouts:V,componentsGraphShowWorkspace:y}=Z("ui"),C=L(),d=L(""),R=me(d,300),F=S(()=>{const P=s.relationships||[];if(C.value){let e=function($){!$||l.has($)||(l.add($),$.deps.forEach(T=>{e(P.find(U=>U.id===T))}))};const l=new Set;return e(C.value),Array.from(l)}return P}),E=S(()=>{const P=F.value.map(l=>{const $=s.components.find(G=>G.filePath===l.id),T=p.value?.find(G=>G.file===l.id),U=u.value?.find(G=>G.file===l.id),j=l.id.replace(/\?.*$/,"").replace(/#.*$/,""),D=l.id.includes("/node_modules/")?"lib":$?$.global?"global":"user":U?"layout":T?"page":"unknown";if(!f.value&&D==="lib"||!h.value&&D==="page"||!V.value&&D==="layout"||!y.value&&D==="user"&&c.value&&!l.id.startsWith(c.value.rootDir)||!g.value&&D==="global")return null;const w=D==="layout"?"hexagon":D==="page"?"square":"dot",Y=R.value&&!l.id.toLowerCase().includes(R.value.toLowerCase());return{id:l.id,label:j.split("/").splice(-1)[0].replace(/\.\w+$/,""),group:D,shape:w,size:15+Math.min(l.deps.length/2,8),font:{color:Y?"#8885":i.value==="dark"?"white":"black"},color:Y?"#8885":C.value?.id===l.id?"#82c742":void 0,extra:{id:l.id,component:$,page:T,layout:U,relationship:l}}}).filter(l=>!!l),e=F.value.flatMap(l=>l.deps.map($=>({from:l.id,to:$,arrows:{to:{enabled:!0,scaleFactor:.8}}})));return{nodes:P,edges:e}}),se=S(()=>o.value?.component?s.relationships?.find(e=>e.id===o.value?.component?.filePath)?.deps?.map(e=>s.relationships?.find(l=>l.id===e)?.id).filter(Boolean):[]),le=S(()=>o.value?.component?s.relationships?.filter(e=>e.deps.includes(o.value.component.filePath))?.map(e=>s.relationships?.find(l=>l.id===e.id)?.id).filter(Boolean):[]);ye(()=>{const P={nodes:{shape:"dot",size:16},physics:{repulsion:{centralGravity:.7,springLength:100,springConstant:.01},maxVelocity:146,solver:"forceAtlas2Based",timestep:.35,stabilization:{enabled:!0,iterations:200}},groups:{user:{color:"#42b883"},unknown:{color:"#b86542"},lib:{color:"#b4b842"},page:{color:"#42b2b8"},layout:{color:"#4256b8"}}},e=new Pe(m.value,E.value,P);e.on("click",l=>{const $=l.nodes?.[0],T=E.value.nodes?.find(U=>U.id===$)?.extra;T&&(o.value=T)}),we(E,()=>{e.setData(E.value)})});function ae(){C.value=o.value?.relationship,o.value=void 0}return(P,e)=>{const l=Ve,$=J,T=ce,U=te,j=X,D=Se;return t(),_(M,null,[v($,{ref_key:"navbar",ref:a,search:d.value,"onUpdate:search":e[6]||(e[6]=w=>d.value=w),absolute:"","left-0":"","right-0":"","top-0":""},{actions:b(()=>[n("div",en,[v(l,{modelValue:N(h),"onUpdate:modelValue":e[0]||(e[0]=w=>A(h)?h.value=w:null),n:"primary sm"},{default:b(()=>e[9]||(e[9]=[n("span",{op75:""},"Show pages",-1)])),_:1},8,["modelValue"]),v(l,{modelValue:N(V),"onUpdate:modelValue":e[1]||(e[1]=w=>A(V)?V.value=w:null),n:"primary sm"},{default:b(()=>e[10]||(e[10]=[n("span",{op75:""},"Show layouts",-1)])),_:1},8,["modelValue"]),v(l,{modelValue:N(y),"onUpdate:modelValue":e[2]||(e[2]=w=>A(y)?y.value=w:null),n:"primary sm"},{default:b(()=>e[11]||(e[11]=[n("span",{op75:""},"Show workspace",-1)])),_:1},8,["modelValue"]),v(l,{modelValue:N(f),"onUpdate:modelValue":e[3]||(e[3]=w=>A(f)?f.value=w:null),n:"primary sm"},{default:b(()=>e[12]||(e[12]=[n("span",{op75:""},"Show node_modules",-1)])),_:1},8,["modelValue"]),v(l,{modelValue:N(g),"onUpdate:modelValue":e[4]||(e[4]=w=>A(g)?g.value=w:null),n:"primary sm"},{default:b(()=>e[13]||(e[13]=[n("span",{op75:""},"Show global components",-1)])),_:1},8,["modelValue"])]),C.value?(t(),_("button",{key:0,flex:"~ gap-1","flex-none":"","items-center":"","rounded-full":"","bg-gray:20":"",py1:"",pl3:"",pr2:"","text-xs":"",op50:"","hover:op100":"",onClick:e[5]||(e[5]=w=>C.value=void 0)},e[14]||(e[14]=[Q(" Clear filter "),n("div",{"i-carbon-close":""},null,-1)]))):k("",!0),e[15]||(e[15]=n("div",{"flex-auto":""},null,-1)),H(P.$slots,"default")]),_:3},8,["search"]),n("div",nn,[n("div",{ref_key:"container",ref:m,"h-full":"","w-full":""},null,512),v(T,{absolute:"","bottom-3":"","left-3":"","border-0":"",p2:"",px3:"","text-sm":"","n-glass-effect":""},{default:b(()=>e[16]||(e[16]=[n("div",{grid:"~ cols-[20px_1fr] items-center gap-y-1"},[n("div",{"h-3":"","w-3":"","rounded-full":"","bg-hex-42b883":""}),n("div",{op50:""}," Component "),n("div",{"h-3":"","w-3":"","rounded-full":"","bg-hex-97c2fc":""}),n("div",{op50:""}," Global Component "),n("div",{"h-3":"","w-3":"","bg-hex-42b2b8":""}),n("div",{op50:""}," Page "),n("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 726 628","ml--1px":"","h-3":""},[n("path",{fill:"#4256b8","stroke-width":"4",d:"M723 314 543 625.8H183L3 314 183 2.2h360L723 314z"})]),n("div",{op50:""}," Layout "),n("div",{"h-3":"","w-3":"","rounded-full":"","bg-hex-b4b842":""}),n("div",{op50:""}," Library Component "),n("div",{"h-3":"","w-3":"","rounded-full":"","bg-hex-b86542":""}),n("div",{op50:""}," Unknown ")],-1)])),_:1}),v(D,{"model-value":!!(o.value&&o.value.component),top:a.value,border:"t l base","w-80":"",onClose:e[8]||(e[8]=w=>o.value=void 0)},{default:b(()=>[o.value&&o.value.component?(t(),_("div",on,[v(U,{component:o.value.component,dependencies:se.value,dependents:le.value},null,8,["component","dependencies","dependents"]),n("div",tn,[v(j,{n:"primary solid",onClick:e[7]||(e[7]=w=>ae())},{default:b(()=>e[17]||(e[17]=[Q(" Filter to this component ")])),_:1})])])):k("",!0)]),_:1},8,["model-value","top"])])],64)}}}),ln={hover:"bg-active",class:"group",flex:"~ gap2","w-full":"","items-center":"",rounded:"",px2:"",py1:""},an={key:0,"ml--1":"","text-primary":""},pn=I({__name:"ComponentItem",props:{component:{},dependencies:{},dependents:{}},setup(r){const s=r,m=S(()=>s.component.filePath||s.component.file||s.component.__file||"");return(a,i)=>{const o=oe,p=te,c=xe("VDropdown"),u=K,f=ee;return t(),_("div",ln,[v(c,null,{popper:b(()=>[v(p,{component:a.component,dependencies:a.dependencies,dependents:a.dependents,"w-100":"",pt4:""},null,8,["component","dependencies","dependents"])]),default:b(()=>[n("button",{"hover:text-primary":"",class:ke(a.dependents&&a.dependents.length===0?"op50":"")},[v(o,{component:a.component},null,8,["component"])],2)]),_:1}),a.dependents?.length?(t(),_("sup",an," x"+W(a.dependents?.length),1)):k("",!0),a.component.global?(t(),x(u,{key:1,n:"green",title:"Registered at runtime as a global component",textContent:"runtime"})):k("",!0),H(a.$slots,"default"),m.value?(t(),x(f,{key:2,filepath:m.value,"text-sm":"",op25:"","group-hover:op75":""},null,8,["filepath"])):k("",!0)])}}}),rn={flex:"~ gap-2 items-center"},un={pl4:""},dn=I({__name:"ComponentsList",props:{components:{},relationships:{}},setup(r){const s=r,m=L(""),a=L("all"),i=S(()=>{const c=s.components.map(u=>fe(u,s.relationships));return a.value==="using"?c.filter(u=>u.dependents?.length):a.value==="not-used"?c.filter(u=>!u.dependents?.length):c}),o=S(()=>new ve(i.value,{keys:["component.pascalName","component.filePath","component.kebabName"]})),p=S(()=>{const c=[],u=new Map,f=[],g=[],h={user:0,lib:0,builtin:0,runtime:0};return(m.value?o.value.search(m.value).map(y=>y.item):i.value).forEach(y=>{const C=y.component;if(C.filePath&&_e(C.filePath)){const d=he(C.filePath);if(!d)return;d==="nuxt"?(f.push(y),h.builtin++):(u.has(d)||u.set(d,[]),u.get(d).push(y),h.lib++)}else C.global&&!C.filePath?(g.push(y),h.runtime++):(c.push(y),h.user++)}),{count:h,user:c,builtin:f,lib:u,runtime:g}});return(c,u)=>{const f=be,g=De,h=J,V=pn,y=Me,C=Te;return t(),_(M,null,[v(h,{search:m.value,"onUpdate:search":u[1]||(u[1]=d=>m.value=d),pb3:""},{actions:b(()=>[H(c.$slots,"default")]),default:b(()=>[n("div",rn,[v(f,{icon:"carbon-filter",op50:""}),v(g,{modelValue:a.value,"onUpdate:modelValue":u[0]||(u[0]=d=>a.value=d),n:"primary sm",options:[{label:"All",value:"all"},{label:"Using",value:"using"},{label:"Not used",value:"not-used"}]},null,8,["modelValue"])])]),_:3},8,["search"]),p.value.user.length?(t(),x(y,{key:0,icon:"carbon-nominal",text:"User components",open:p.value.user.length<=N(O),description:`Total components: ${p.value.count.user}`},{default:b(()=>[(t(!0),_(M,null,B(p.value.user,d=>(t(),x(V,z({key:d.component.filePath,ref_for:!0},d),null,16))),128))]),_:1},8,["open","description"])):k("",!0),p.value.runtime.length?(t(),x(y,{key:1,icon:"carbon-load-balancer-global",open:p.value.runtime.length<=N(O),text:"Runtime components",description:`Total components: ${p.value.count.runtime}`},{default:b(()=>[(t(!0),_(M,null,B(p.value.runtime,d=>(t(),x(V,z({key:d.component.filePath,ref_for:!0},d),null,16))),128))]),_:1},8,["open","description"])):k("",!0),p.value.builtin.length?(t(),x(y,{key:2,icon:"simple-icons-nuxtdotjs",text:"Built-in components",description:`Total components: ${p.value.count.builtin}`},{default:b(()=>[(t(!0),_(M,null,B(p.value.builtin,d=>(t(),x(V,z({key:d.component.filePath,ref_for:!0},d),null,16))),128))]),_:1},8,["description"])):k("",!0),p.value.lib.size?(t(),x(y,{key:3,open:p.value.count.lib<=N(O),icon:"carbon-3d-mpr-toggle",text:"Components from libraries",description:`${p.value.count.lib} components from ${p.value.lib.size} packages`},{default:b(()=>[(t(!0),_(M,null,B(p.value.lib.entries(),([d,R])=>(t(),_("div",{key:d,"ml-2":""},[v(C,{text:`${d} (${R.length})`,py1:"",op50:""},null,8,["text"]),n("div",un,[(t(!0),_(M,null,B(R,F=>(t(),x(V,z({key:F.component.filePath,ref_for:!0},F),null,16))),128))])]))),128))]),_:1},8,["open","description"])):k("",!0)],64)}}}),mn={relative:"","h-full":"","of-auto":""},cn={"flex-none":"",flex:"~ gap3"},Dn=I({__name:"components",setup(r){const s=ge(),m=Ue(),a=Be(),{componentsView:i}=Z("ui");function o(){s.value?.inspector?.instance&&s.value.inspector.enable()}function p(){i.value=i.value==="list"?"graph":"list"}return(c,u)=>{const f=X,g=Ie,h=Ne,V=Ce("tooltip");return t(),_(M,null,[n("div",mn,[(t(),x($e(N(i)==="list"?dn:sn),{components:N(m),relationships:N(a)},{default:b(()=>[n("div",cn,[q(v(f,{"text-lg":"",border:!1,icon:N(i)==="graph"?"i-carbon-list":"i-carbon-network-4",title:"Toggle view",onClick:p},null,8,["icon"]),[[V,"Toggle View",void 0,{"bottom-end":!0}]]),N(s)?.inspector?.instance?q((t(),x(f,{key:0,"text-lg":"",border:!1,icon:"i-tabler-focus-2",title:"Inspect Vue components",onClick:o},null,512)),[[V,"Inspect Vue components",void 0,{"bottom-end":!0}]]):k("",!0)])]),_:1},8,["components","relationships"]))]),v(h,null,{default:b(()=>[v(g)]),_:1})],64)}}});export{Dn as default};