@nuxt/devtools/dist/client/_nuxt/components-isw5v3a8.js

The Nuxt DevTools gives you insights and transparency about your Nuxt App.

import{a as ie,_ as J,a4 as re,aq as ue,A as me,B as ce,g as Y,ar as de,n as fe,as as ve,S as _e,Y as he,W as be,I as ge,f as xe}from"./kbaft34e.js";import{J as m,a3 as o,S as n,p as G,q as P,ab as E,aa as O,U as g,W as j,a5 as u,V as b,a4 as c,u as $,F as B,ag as M,k as F,n as ye,E as we,x as ke,j as z,$ as Ce,Z as Ne,a6 as W,ai as $e,ac as X,af as Ve}from"./vendor/json-editor-vue-pb6xqf2y.js";import{_ as De}from"./help-fab.vue-fxai0oj2.js";import{_ as Pe}from"./ncheckbox.vue-iynvr0dq.js";import{_ as Z}from"./nnavbar.vue-bpb24x03.js";import{p as K}from"./index-jc4yj4to.js";import{_ as Q}from"./nbadge-kwo11bsd.js";import{_ as ee}from"./filepath-item.vue-iqnkpprc.js";import{_ as Se}from"./ndrawer.vue-cpy3f9je.js";import{D as Le,N as Be}from"./vendor/vis-gqe7ml2e.js";import{_ as Ie}from"./nselect-tabs.vue-kf7j1k29.js";import{_ as Te}from"./nsection-block-fo7lswlq.js";import{_ as Me}from"./nicon-title.vue-d27ih16g.js";import{D as H}from"./constants-b32h69zq.js";import{u as Ue,a as Fe}from"./state-components-foyka1xm.js";import"./vendor/unocss-k776m6tm.js";import"./vendor/shiki-hjqm7vcp.js";const Ge={class:"markdown-body"},Ae={__name:"components",setup(D,{expose:l}){return l({frontmatter:{}}),(p,d)=>(o(),m("div",Ge,d[0]||(d[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={"text-sm":"","font-mono":""},ne=G({__name:"ComponentName",props:{component:{}},setup(D){const l=D,v=P(()=>l.component.pascalName||K(l.component.name||l.component.__name||l.component.kebabName||""));return(p,d)=>(o(),m("code",Re,[d[0]||(d[0]=n("span",{mr1:"",op20:""},"<",-1)),E(O(v.value),1),d[1]||(d[1]=n("span",{ml1:"",op20:""},"/>",-1))]))}}),ze={flex:"~ col gap1","items-start":"","of-hidden":""},Ee={flex:"~ gap2 items-center",px3:""},We={px3:"",pb2:""},Oe={key:0,border:"t base","max-h-60":"","w-full":"","of-auto":"",px3:"",py3:""},je={"text-sm":""},qe={"text-primary":""},He={key:0,flex:"~ col gap-2","items-start":"",pt3:"","text-sm":"",op75:""},Je={key:1,border:"t base","max-h-60":"","w-full":"","of-auto":"",px3:"",py3:""},Xe={"text-sm":""},Ye={"text-primary":""},Ze={key:0,flex:"~ col gap-2","items-start":"",pt3:"","text-sm":"",op75:""},oe=G({__name:"ComponentDetails",props:{component:{},dependencies:{},dependents:{}},setup(D){const l=D,v=P(()=>l.component.pascalName||K(l.component.name||l.component.__name||l.component.kebabName||"")),p=P(()=>l.component.filePath||l.component.file||l.component.__file||""),d=ie();return(s,_)=>{const i=ne,x=J,a=Q,w=ee;return o(),m("div",ze,[n("div",Ee,[u(i,{component:s.component},null,8,["component"]),s.component.meta?.docs&&typeof s.component.meta.docs=="string"?(o(),b(x,{key:0,title:"Open docs","flex-none":"",n:"xs",to:s.component.meta.docs,target:"_blank",icon:"carbon-catalog"},{default:c(()=>_[1]||(_[1]=[E(" Docs ")])),_:1,__:[1]},8,["to"])):g("",!0),u(x,{title:"Copy name","flex-none":"",n:"xs",icon:"carbon-copy",onClick:_[0]||(_[0]=h=>$(d)(`<${v.value}></${v.value}>`,"component-name"))},{default:c(()=>_[2]||(_[2]=[E(" Copy ")])),_:1,__:[2]}),s.component.global?(o(),b(a,{key:1,n:"green",title:"Registered at runtime as a global component",textContent:"runtime"})):g("",!0)]),n("div",We,[p.value?(o(),b(w,{key:0,filepath:p.value,"w-full":"","text-sm":"",op40:"","group-hover:op75":""},null,8,["filepath"])):g("",!0)]),s.dependents?(o(),m("div",Oe,[n("div",je,[n("strong",qe,O(s.dependents.length),1),_[3]||(_[3]=n("span",{op50:""}," references",-1))]),s.dependents.length?(o(),m("div",He,[(o(!0),m(B,null,M(s.dependents,h=>(o(),b(w,{key:h,filepath:h},null,8,["filepath"]))),128))])):g("",!0)])):g("",!0),s.dependencies?(o(),m("div",Je,[n("div",Xe,[n("strong",Ye,O(s.dependencies.length),1),_[4]||(_[4]=n("span",{op50:""}," dependencies",-1))]),s.dependencies.length?(o(),m("div",Ze,[(o(!0),m(B,null,M(s.dependencies,h=>(o(),b(w,{key:h,filepath:h},null,8,["filepath"]))),128))])):g("",!0)])):g("",!0),j(s.$slots,"default")])}}}),Ke={flex:"~ gap-x-3 gap-y-1 wrap","w-full":""},Qe={relative:"","h-full":"","w-full":""},en={key:0,py4:"",pt3:"",flex:"~ col"},nn={border:"t base",p4:""},on=G({__name:"ComponentsGraph",props:{components:{},relationships:{}},setup(D){const l=D,v=F(),p=F(),d=re(),s=ye(),_=ue(),i=me(),x=ce(),{componentsGraphShowNodeModules:a,componentsGraphShowGlobalComponents:w,componentsGraphShowPages:h,componentsGraphShowLayouts:k,componentsGraphShowWorkspace:S}=Y("ui"),f=F(),C=F(""),r=de(C,300),A=P(()=>{const V=l.relationships||[];if(f.value){let e=function(N){!N||t.has(N)||(t.add(N),N.deps.forEach(I=>{e(V.find(U=>U.id===I))}))};const t=new Set;return e(f.value),Array.from(t)}return V}),T=P(()=>{const V=A.value.map(t=>{const N=l.components.find(R=>R.filePath===t.id),I=_.value?.find(R=>R.file===t.id),U=x.value?.find(R=>R.file===t.id),L=t.id.includes("/node_modules/")?"lib":N?N.global?"global":"user":U?"layout":I?"page":"unknown";if(!a.value&&L==="lib"||!h.value&&L==="page"||!k.value&&L==="layout"||!S.value&&L==="user"&&i.value&&!t.id.startsWith(i.value.rootDir)||!w.value&&L==="global")return null;const q=L==="layout"?"hexagon":L==="page"?"square":"dot",y=r.value&&!t.id.toLowerCase().includes(r.value.toLowerCase());return{id:t.id,label:ae(t.id),group:L,shape:q,size:15+Math.min(t.deps.length/2,8),font:{color:y?"#8885":d.value==="dark"?"white":"black"},color:y?"#8885":f.value?.id===t.id?"#82c742":void 0,extra:{id:t.id,component:N,page:I,layout:U,relationship:t}}}).filter(t=>!!t),e=A.value.flatMap(t=>t.deps.map(N=>({from:t.id,to:N,arrows:{to:{enabled:!0,scaleFactor:.8}}})));return{nodes:new Le(V),edges:e}}),te=P(()=>s.value?.component?l.relationships?.find(e=>e.id===s.value?.component?.filePath)?.deps?.map(e=>l.relationships?.find(t=>t.id===e)?.id).filter(Boolean):[]),se=P(()=>s.value?.component?l.relationships?.filter(e=>e.deps.includes(s.value.component.filePath))?.map(e=>l.relationships?.find(t=>t.id===e.id)?.id).filter(Boolean):[]);we(()=>{const V={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 Be(v.value,T.value,V);e.on("click",t=>{const N=t.nodes?.[0],I=T.value.nodes.get(N).extra;s.value=I}),ke(T,()=>{e.setData(T.value)})});function le(){s.value=void 0}function ae(V){const e=l.components.find(t=>t.filePath===V);return e?e.pascalName:V.replace(/.*\/components\//,"").replace(/\.vue$/,"").replace(/\/index$/,"").split("/").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join("")}function pe(){f.value=s.value?.relationship,s.value=void 0}return(V,e)=>{const t=Pe,N=Z,I=fe,U=oe,L=J,q=Se;return o(),m(B,null,[u(N,{ref_key:"navbar",ref:p,search:C.value,"onUpdate:search":e[6]||(e[6]=y=>C.value=y),absolute:"","left-0":"","right-0":"","top-0":""},{actions:c(()=>[n("div",Ke,[u(t,{modelValue:$(h),"onUpdate:modelValue":e[0]||(e[0]=y=>z(h)?h.value=y:null),n:"primary sm"},{default:c(()=>e[8]||(e[8]=[n("span",{op75:""},"Show pages",-1)])),_:1,__:[8]},8,["modelValue"]),u(t,{modelValue:$(k),"onUpdate:modelValue":e[1]||(e[1]=y=>z(k)?k.value=y:null),n:"primary sm"},{default:c(()=>e[9]||(e[9]=[n("span",{op75:""},"Show layouts",-1)])),_:1,__:[9]},8,["modelValue"]),u(t,{modelValue:$(S),"onUpdate:modelValue":e[2]||(e[2]=y=>z(S)?S.value=y:null),n:"primary sm"},{default:c(()=>e[10]||(e[10]=[n("span",{op75:""},"Show workspace",-1)])),_:1,__:[10]},8,["modelValue"]),u(t,{modelValue:$(a),"onUpdate:modelValue":e[3]||(e[3]=y=>z(a)?a.value=y:null),n:"primary sm"},{default:c(()=>e[11]||(e[11]=[n("span",{op75:""},"Show node_modules",-1)])),_:1,__:[11]},8,["modelValue"]),u(t,{modelValue:$(w),"onUpdate:modelValue":e[4]||(e[4]=y=>z(w)?w.value=y:null),n:"primary sm"},{default:c(()=>e[12]||(e[12]=[n("span",{op75:""},"Show global components",-1)])),_:1,__:[12]},8,["modelValue"])]),f.value?(o(),m("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]=y=>f.value=void 0)},e[13]||(e[13]=[E(" Clear filter "),n("div",{"i-carbon-close":""},null,-1)]))):g("",!0),e[14]||(e[14]=n("div",{"flex-auto":""},null,-1)),j(V.$slots,"default")]),_:3},8,["search"]),n("div",Qe,[n("div",{ref_key:"container",ref:v,"h-full":"","w-full":""},null,512),u(I,{absolute:"","bottom-3":"","left-3":"","border-0":"",p2:"",px3:"","text-sm":"","n-glass-effect":""},{default:c(()=>e[15]||(e[15]=[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,__:[15]}),u(q,{"model-value":!!(s.value&&s.value.component),top:p.value,border:"t l base","w-80":"",onClose:le},{default:c(()=>[s.value&&s.value.component?(o(),m("div",en,[u(U,{component:s.value.component,dependencies:te.value,dependents:se.value},null,8,["component","dependencies","dependents"]),n("div",nn,[u(L,{n:"primary solid",onClick:e[7]||(e[7]=y=>pe())},{default:c(()=>e[16]||(e[16]=[E(" Filter to this component ")])),_:1,__:[16]})])])):g("",!0)]),_:1},8,["model-value","top"])])],64)}}}),tn={hover:"bg-active",class:"group",flex:"~ gap2","w-full":"","items-center":"",rounded:"",px2:"",py1:""},sn={key:0,"ml--1":"","text-primary":""},ln=G({__name:"ComponentItem",props:{component:{},dependencies:{},dependents:{}},setup(D){const l=D,v=P(()=>l.component.filePath||l.component.file||l.component.__file||"");return(p,d)=>{const s=ne,_=oe,i=Ce("VDropdown"),x=Q,a=ee;return o(),m("div",tn,[u(i,null,{popper:c(()=>[u(_,{component:p.component,dependencies:p.dependencies,dependents:p.dependents,"w-100":"",pt3:""},null,8,["component","dependencies","dependents"])]),default:c(()=>[n("button",{"hover:text-primary":"",class:Ne(p.dependents&&p.dependents.length===0?"op50":"")},[u(s,{component:p.component},null,8,["component"])],2)]),_:1}),p.dependents?.length?(o(),m("sup",sn," x"+O(p.dependents?.length),1)):g("",!0),p.component.global?(o(),b(x,{key:1,n:"green",title:"Registered at runtime as a global component",textContent:"runtime"})):g("",!0),j(p.$slots,"default"),v.value?(o(),b(a,{key:2,filepath:v.value,"text-sm":"",op25:"","group-hover:op75":""},null,8,["filepath"])):g("",!0)])}}}),an={flex:"~ gap-2 items-center"},pn={pl4:""},rn=G({__name:"ComponentsList",props:{components:{},relationships:{}},setup(D){const l=D,v=F(""),p=F("all"),d=P(()=>{const x=l.components.map(a=>ve(a,l.relationships));return p.value==="using"?x.filter(a=>a.dependents?.length):p.value==="not-used"?x.filter(a=>!a.dependents?.length):x}),s={ClientOnly:"https://nuxt.com/docs/api/components/client-only",DevOnly:"https://nuxt.com/docs/api/components/dev-only",NuxtClientFallback:"https://nuxt.com/docs/api/components/nuxt-client-fallback",NuxtPicture:"https://nuxt.com/docs/api/components/nuxt-picture",NuxtRouteAnnouncer:"https://nuxt.com/docs/api/components/nuxt-route-announcer",NuxtTime:"https://nuxt.com/docs/api/components/nuxt-time",NuxtPage:"https://nuxt.com/docs/api/components/nuxt-page",NuxtLayout:"https://nuxt.com/docs/api/components/nuxt-layout",NuxtLink:"https://nuxt.com/docs/api/components/nuxt-link",NuxtLoadingIndicator:"https://nuxt.com/docs/api/components/nuxt-loading-indicator",NuxtErrorBoundary:"https://nuxt.com/docs/api/components/nuxt-error-boundary",NuxtWelcome:"https://nuxt.com/docs/api/components/nuxt-welcome",NuxtIsland:"https://nuxt.com/docs/api/components/nuxt-island",NuxtImg:"https://nuxt.com/docs/api/components/nuxt-img"},_=P(()=>new _e(d.value,{keys:["component.pascalName","component.filePath","component.kebabName"]})),i=P(()=>{const x=[],a=new Map,w=[],h=[],k={user:0,lib:0,builtin:0,runtime:0};return(v.value?_.value.search(v.value).map(f=>f.item):d.value).forEach(f=>{const C=f.component;if(C.filePath&&he(C.filePath)){const r=be(C.filePath);if(!r)return;r==="nuxt"?(C.meta??={},C.meta.docs??=s?.[C.pascalName],w.push(f),k.builtin++):(a.has(r)||a.set(r,[]),a.get(r).push(f),k.lib++)}else C.global&&!C.filePath?(h.push(f),k.runtime++):(x.push(f),k.user++)}),{count:k,user:x,builtin:w,lib:a,runtime:h}});return(x,a)=>{const w=ge,h=Ie,k=Z,S=ln,f=Te,C=Me;return o(),m(B,null,[u(k,{search:v.value,"onUpdate:search":a[1]||(a[1]=r=>v.value=r),pb3:""},{actions:c(()=>[j(x.$slots,"default")]),default:c(()=>[n("div",an,[u(w,{icon:"carbon-filter",op50:""}),u(h,{modelValue:p.value,"onUpdate:modelValue":a[0]||(a[0]=r=>p.value=r),n:"primary sm",options:[{label:"All",value:"all"},{label:"Using",value:"using"},{label:"Not used",value:"not-used"}]},null,8,["modelValue"])])]),_:3},8,["search"]),i.value.user.length?(o(),b(f,{key:0,icon:"carbon-nominal",text:"User components",open:i.value.user.length<=$(H),description:`Total components: ${i.value.count.user}`},{default:c(()=>[(o(!0),m(B,null,M(i.value.user,r=>(o(),b(S,W({key:r.component.filePath},{ref_for:!0},r),null,16))),128))]),_:1},8,["open","description"])):g("",!0),i.value.runtime.length?(o(),b(f,{key:1,icon:"carbon-load-balancer-global",open:i.value.runtime.length<=$(H),text:"Runtime components",description:`Total components: ${i.value.count.runtime}`},{default:c(()=>[(o(!0),m(B,null,M(i.value.runtime,r=>(o(),b(S,W({key:r.component.filePath},{ref_for:!0},r),null,16))),128))]),_:1},8,["open","description"])):g("",!0),i.value.builtin.length?(o(),b(f,{key:2,icon:"simple-icons-nuxtdotjs",text:"Built-in components",description:`Total components: ${i.value.count.builtin}`},{default:c(()=>[(o(!0),m(B,null,M(i.value.builtin,r=>(o(),b(S,W({key:r.component.filePath},{ref_for:!0},r),null,16))),128))]),_:1},8,["description"])):g("",!0),i.value.lib.size?(o(),b(f,{key:3,open:i.value.count.lib<=$(H),icon:"carbon-3d-mpr-toggle",text:"Components from libraries",description:`${i.value.count.lib} components from ${i.value.lib.size} packages`},{default:c(()=>[(o(!0),m(B,null,M(i.value.lib.entries(),([r,A])=>(o(),m("div",{key:r,"ml-2":""},[u(C,{text:`${r} (${A.length})`,py1:"",op50:""},null,8,["text"]),n("div",pn,[(o(!0),m(B,null,M(A,T=>(o(),b(S,W({key:T.component.filePath},{ref_for:!0},T),null,16))),128))])]))),128))]),_:1},8,["open","description"])):g("",!0)],64)}}}),un={relative:"","h-full":"","of-auto":""},mn={"flex-none":"",flex:"~ gap3"},Pn=G({__name:"components",setup(D){const l=xe(),v=Ue(),p=Fe(),{componentsView:d}=Y("ui");function s(){l.value?.inspector?.enable()}function _(){d.value=d.value==="list"?"graph":"list"}return(i,x)=>{const a=J,w=Ae,h=De,k=$e("tooltip");return o(),m(B,null,[n("div",un,[(o(),b(Ve($(d)==="list"?rn:on),{components:$(v),relationships:$(p)},{default:c(()=>[n("div",mn,[X(u(a,{"text-lg":"",border:!1,icon:$(d)==="graph"?"i-carbon-list":"i-carbon-network-4",title:"Toggle view",onClick:_},null,8,["icon"]),[[k,"Toggle View",void 0,{"bottom-end":!0}]]),$(l)?.inspector?.isAvailable?X((o(),b(a,{key:0,"text-lg":"",border:!1,icon:"i-tabler-focus-2",title:"Inspect Vue components",onClick:s},null,512)),[[k,"Inspect Vue components",void 0,{"bottom-end":!0}]]):g("",!0)])]),_:1},8,["components","relationships"]))]),u(h,null,{default:c(()=>[u(w)]),_:1})],64)}}});export{Pn as default};