1 line
16 KiB
JavaScript
1 line
16 KiB
JavaScript
import{$ as e,C as t,Ct as n,E as r,Et as i,Mt as a,P as o,Q as s,Qt as c,V as l,W as u,X as d,Y as f,Z as p,_ as m,c as h,ct as g,dt as _,ft as v,g as y,h as b,m as x,tn as S,v as C,vt as w,w as T}from"./vendor/json-editor-vue-ddj4xtqm.js";import"./vendor/shiki-kunkft64.js";import{$ as E,Ct as D,E as ee,It as O,N as k,Pt as te,_ as A,_t as j,j as M,k as N,lt as P,nt as F,ot as I,s as L,un as ne,yt as R}from"#entry";import{t as re}from"./ndrawer-lh0r2gbb.js";import{t as z}from"./composables-g8w9dpc0.js";import{t as B}from"./ncheckbox-f4a8016e.js";import{t as V}from"./filepath-item-osqp88cx.js";import{t as H}from"./help-fab-bhtk9hzf.js";import{t as U}from"./nnavbar-fdsyxwr6.js";import{t as W}from"./nicon-title-hrj2h1mn.js";import{t as G}from"./nsection-block-kp1wt3o4.js";import{n as K}from"./dist-k9rc0n5t.js";import{t as q}from"./nbadge-ijsj8fjy.js";import{n as J,t as Y}from"./vendor/vis-ccj7spt3.js";import{t as X}from"./nselect-tabs-dueuo8rw.js";import{n as ie,t as ae}from"./state-components-b5shg9ni.js";var oe={},se={class:`markdown-body`};function ce(e,t){return u(),C(`div`,se,[...t[0]||=[b(`template`,null,[b(`div`,{class:`markdown-body`},[b(`h1`,null,`Components`),b(`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.`),b(`p`,null,`Components placed in the components/ directory are automatically registered by Nuxt. They can be used in your templates without importing them.`),b(`p`,null,[b(`a`,{href:`https://nuxt.com/docs/guide/directory-structure/components`,target:`_blank`,rel:`noopener`},`Learn more in the documentation`)])])],-1)]])}var le=k(oe,[[`render`,ce]]),ue={"text-sm":``,"font-mono":``},de=r({__name:`ComponentName`,props:{component:{}},setup(e){let n=e,r=x(()=>n.component.pascalName||K(n.component.name||n.component.__name||n.component.kebabName||``));return(e,n)=>(u(),C(`code`,ue,[n[0]||=b(`span`,{mr1:``,op20:``},`<`,-1),t(S(r.value),1),n[1]||=b(`span`,{ml1:``,op20:``},`/>`,-1)]))}}),Z=Object.assign(de,{__name:`ComponentName`}),fe={flex:`~ col gap1`,"items-start":``,"of-hidden":``},pe={flex:`~ gap2 items-center`,px3:``},me={px3:``,pb2:``},he={key:0,border:`t base`,"max-h-60":``,"w-full":``,"of-auto":``,px3:``,py3:``},ge={"text-sm":``},_e={"text-primary":``},ve={key:0,flex:`~ col gap-2`,"items-start":``,pt3:``,"text-sm":``,op75:``},ye={key:1,border:`t base`,"max-h-60":``,"w-full":``,"of-auto":``,px3:``,py3:``},be={"text-sm":``},xe={"text-primary":``},Se={key:0,flex:`~ col gap-2`,"items-start":``,pt3:``,"text-sm":``,op75:``},Ce=r({__name:`ComponentDetails`,props:{component:{},dependencies:{},dependents:{}},setup(e){let n=e,r=x(()=>n.component.pascalName||K(n.component.name||n.component.__name||n.component.kebabName||``)),i=x(()=>n.component.filePath||n.component.file||n.component.__file||``),o=A();return(n,s)=>{let c=Z,l=N,p=q,g=V;return u(),C(`div`,fe,[b(`div`,pe,[T(c,{component:e.component},null,8,[`component`]),e.component.meta?.docs&&typeof e.component.meta.docs==`string`?(u(),y(l,{key:0,title:`Open docs`,"flex-none":``,n:`xs`,to:e.component.meta.docs,target:`_blank`,icon:`carbon-catalog`},{default:_(()=>[...s[1]||=[t(` Docs `,-1)]]),_:1},8,[`to`])):m(``,!0),T(l,{title:`Copy name`,"flex-none":``,n:`xs`,icon:`carbon-copy`,onClick:s[0]||=e=>a(o)(`<${r.value}></${r.value}>`,`component-name`)},{default:_(()=>[...s[2]||=[t(` Copy `,-1)]]),_:1}),e.component.global?(u(),y(p,{key:1,n:`green`,title:`Registered at runtime as a global component`,textContent:`runtime`})):m(``,!0)]),b(`div`,me,[i.value?(u(),y(g,{key:0,filepath:i.value,"w-full":``,"text-sm":``,op40:``,"group-hover:op75":``},null,8,[`filepath`])):m(``,!0)]),e.dependents?(u(),C(`div`,he,[b(`div`,ge,[b(`strong`,_e,S(e.dependents.length),1),s[3]||=b(`span`,{op50:``},` references`,-1)]),e.dependents.length?(u(),C(`div`,ve,[(u(!0),C(h,null,f(e.dependents,e=>(u(),y(g,{key:e,filepath:e},null,8,[`filepath`]))),128))])):m(``,!0)])):m(``,!0),e.dependencies?(u(),C(`div`,ye,[b(`div`,be,[b(`strong`,xe,S(e.dependencies.length),1),s[4]||=b(`span`,{op50:``},` dependencies`,-1)]),e.dependencies.length?(u(),C(`div`,Se,[(u(!0),C(h,null,f(e.dependencies,e=>(u(),y(g,{key:e,filepath:e},null,8,[`filepath`]))),128))])):m(``,!0)])):m(``,!0),d(n.$slots,`default`)])}}}),Q=Object.assign(Ce,{__name:`ComponentDetails`}),we={flex:`~ gap-x-3 gap-y-1 wrap`,"w-full":``},Te={relative:``,"h-full":``,"w-full":``},Ee={key:0,py4:``,pt3:``,flex:`~ col`},De={border:`t base`,p4:``},$=r({__name:`ComponentsGraph`,props:{components:{},relationships:{}},setup(e){let r=e,o=n(),s=n(),c=te(),f=i(),p=P(),v=I(),y=F(),{componentsGraphShowNodeModules:S,componentsGraphShowGlobalComponents:D,componentsGraphShowPages:O,componentsGraphShowLayouts:k,componentsGraphShowWorkspace:A}=E(`ui`),j=n(),M=n(``),L=ne(M,300),R=x(()=>{let e=r.relationships||[];if(j.value){let t=new Set;function n(r){!r||t.has(r)||(t.add(r),r.deps.forEach(t=>{n(e.find(e=>e.id===t))}))}return n(j.value),Array.from(t)}return e}),z=x(()=>{let e=R.value.map(e=>{let t=r.components.find(t=>t.filePath===e.id),n=p.value?.find(t=>t.file===e.id),i=y.value?.find(t=>t.file===e.id),a=e.id.includes(`/node_modules/`)?`lib`:t?t.global?`global`:`user`:i?`layout`:n?`page`:`unknown`;if(!S.value&&a===`lib`||!O.value&&a===`page`||!k.value&&a===`layout`||!A.value&&a===`user`&&v.value&&!e.id.startsWith(v.value.rootDir)||!D.value&&a===`global`)return null;let o=a===`layout`?`hexagon`:a===`page`?`square`:`dot`,s=L.value&&!e.id.toLowerCase().includes(L.value.toLowerCase());return{id:e.id,label:G(e.id),group:a,shape:o,size:15+Math.min(e.deps.length/2,8),font:{color:s?`#8885`:c.value===`dark`?`white`:`black`},color:s?`#8885`:j.value?.id===e.id?`#82c742`:void 0,extra:{id:e.id,component:t,page:n,layout:i,relationship:e}}}).filter(e=>!!e),t=R.value.flatMap(e=>e.deps.map(t=>({from:e.id,to:t,arrows:{to:{enabled:!0,scaleFactor:.8}}})));return{nodes:new J(e),edges:t}}),V=x(()=>f.value?.component?(r.relationships?.find(e=>e.id===f.value?.component?.filePath)?.deps)?.map(e=>r.relationships?.find(t=>t.id===e)?.id).filter(Boolean):[]),H=x(()=>f.value?.component?(r.relationships?.filter(e=>e.deps.includes(f.value.component.filePath)))?.map(e=>r.relationships?.find(t=>t.id===e.id)?.id).filter(Boolean):[]);l(()=>{let e=new Y(o.value,z.value,{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.on(`click`,e=>{let t=e.nodes?.[0];f.value=z.value.nodes.get(t).extra}),g(z,()=>{e.setData(z.value)})});function W(){f.value=void 0}function G(e){let t=r.components.find(t=>t.filePath===e);return t?t.pascalName:e.replace(/.*\/components\//,``).replace(/\.vue$/,``).replace(/\/index$/,``).split(`/`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function K(){j.value=f.value?.relationship,f.value=void 0}return(e,n)=>{let r=B,i=U,c=ee,l=Q,p=N,g=re;return u(),C(h,null,[T(i,{ref_key:`navbar`,ref:s,search:M.value,"onUpdate:search":n[6]||=e=>M.value=e,absolute:``,"left-0":``,"right-0":``,"top-0":``},{actions:_(()=>[b(`div`,we,[T(r,{modelValue:a(O),"onUpdate:modelValue":n[0]||=e=>w(O)?O.value=e:null,n:`primary sm`},{default:_(()=>[...n[8]||=[b(`span`,{op75:``},`Show pages`,-1)]]),_:1},8,[`modelValue`]),T(r,{modelValue:a(k),"onUpdate:modelValue":n[1]||=e=>w(k)?k.value=e:null,n:`primary sm`},{default:_(()=>[...n[9]||=[b(`span`,{op75:``},`Show layouts`,-1)]]),_:1},8,[`modelValue`]),T(r,{modelValue:a(A),"onUpdate:modelValue":n[2]||=e=>w(A)?A.value=e:null,n:`primary sm`},{default:_(()=>[...n[10]||=[b(`span`,{op75:``},`Show workspace`,-1)]]),_:1},8,[`modelValue`]),T(r,{modelValue:a(S),"onUpdate:modelValue":n[3]||=e=>w(S)?S.value=e:null,n:`primary sm`},{default:_(()=>[...n[11]||=[b(`span`,{op75:``},`Show node_modules`,-1)]]),_:1},8,[`modelValue`]),T(r,{modelValue:a(D),"onUpdate:modelValue":n[4]||=e=>w(D)?D.value=e:null,n:`primary sm`},{default:_(()=>[...n[12]||=[b(`span`,{op75:``},`Show global components`,-1)]]),_:1},8,[`modelValue`])]),j.value?(u(),C(`button`,{key:0,flex:`~ gap-1`,"flex-none":``,"items-center":``,"rounded-full":``,"bg-gray:20":``,py1:``,pl3:``,pr2:``,"text-xs":``,op50:``,"hover:op100":``,onClick:n[5]||=e=>j.value=void 0},[...n[13]||=[t(` Clear filter `,-1),b(`div`,{"i-carbon-close":``},null,-1)]])):m(``,!0),n[14]||=b(`div`,{"flex-auto":``},null,-1),d(e.$slots,`default`)]),_:3},8,[`search`]),b(`div`,Te,[b(`div`,{ref_key:`container`,ref:o,"h-full":``,"w-full":``},null,512),T(c,{absolute:``,"bottom-3":``,"left-3":``,"border-0":``,"n-glass-effect":``,p2:``,px3:``,"text-sm":``},{default:_(()=>[...n[15]||=[b(`div`,{grid:`~ cols-[20px_1fr] items-center gap-y-1`},[b(`div`,{"h-3":``,"w-3":``,"rounded-full":``,"bg-hex-42b883":``}),b(`div`,{op50:``},` Component `),b(`div`,{"h-3":``,"w-3":``,"rounded-full":``,"bg-hex-97c2fc":``}),b(`div`,{op50:``},` Global Component `),b(`div`,{"h-3":``,"w-3":``,"bg-hex-42b2b8":``}),b(`div`,{op50:``},` Page `),b(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 726 628`,"ml--1px":``,"h-3":``},[b(`path`,{fill:`#4256b8`,"stroke-width":`4`,d:`M723 314 543 625.8H183L3 314 183 2.2h360L723 314z`})]),b(`div`,{op50:``},` Layout `),b(`div`,{"h-3":``,"w-3":``,"rounded-full":``,"bg-hex-b4b842":``}),b(`div`,{op50:``},` Library Component `),b(`div`,{"h-3":``,"w-3":``,"rounded-full":``,"bg-hex-b86542":``}),b(`div`,{op50:``},` Unknown `)],-1)]]),_:1}),T(g,{"model-value":!!(f.value&&f.value.component),top:s.value,border:`t l base`,"w-80":``,onClose:W},{default:_(()=>[f.value&&f.value.component?(u(),C(`div`,Ee,[T(l,{component:f.value.component,dependencies:V.value,dependents:H.value},null,8,[`component`,`dependencies`,`dependents`]),b(`div`,De,[T(p,{n:`primary solid`,onClick:n[7]||=e=>K()},{default:_(()=>[...n[16]||=[t(` Filter to this component `,-1)]]),_:1})])])):m(``,!0)]),_:1},8,[`model-value`,`top`])])],64)}}}),Oe=Object.assign($,{__name:`ComponentsGraph`}),ke={hover:`bg-active`,class:`group`,flex:`~ gap2`,"w-full":``,"items-center":``,rounded:``,px2:``,py1:``},Ae={key:0,"ml--1":``,"text-primary":``},je=r({__name:`ComponentItem`,props:{component:{},dependencies:{},dependents:{}},setup(e){let t=e,n=x(()=>t.component.filePath||t.component.file||t.component.__file||``);return(t,r)=>{let i=Z,a=Q,o=p(`VDropdown`),s=q,l=V;return u(),C(`div`,ke,[T(o,null,{popper:_(()=>[T(a,{component:e.component,dependencies:e.dependencies,dependents:e.dependents,"w-100":``,pt3:``},null,8,[`component`,`dependencies`,`dependents`])]),default:_(()=>[b(`button`,{"hover:text-primary":``,class:c(e.dependents&&e.dependents.length===0?`op50`:``)},[T(i,{component:e.component},null,8,[`component`])],2)]),_:1}),e.dependents?.length?(u(),C(`sup`,Ae,` x`+S(e.dependents?.length),1)):m(``,!0),e.component.global?(u(),y(s,{key:1,n:`green`,title:`Registered at runtime as a global component`,textContent:`runtime`})):m(``,!0),d(t.$slots,`default`),n.value?(u(),y(l,{key:2,filepath:n.value,"text-sm":``,op25:``,"group-hover:op75":``},null,8,[`filepath`])):m(``,!0)])}}}),Me=Object.assign(je,{__name:`ComponentItem`}),Ne={flex:`~ gap-2 items-center`},Pe={pl4:``},Fe=r({__name:`ComponentsList`,props:{components:{},relationships:{}},setup(e){let t=e,r=n(``),i=n(`all`),s=x(()=>{let e=t.components.map(e=>j(e,t.relationships));return i.value===`using`?e.filter(e=>e.dependents?.length):i.value===`not-used`?e.filter(e=>!e.dependents?.length):e}),c={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`},l=x(()=>new L(s.value,{keys:[`component.pascalName`,`component.filePath`,`component.kebabName`]})),p=x(()=>{let e=[],t=new Map,n=[],i=[],a={user:0,lib:0,builtin:0,runtime:0};return(r.value?l.value.search(r.value).map(e=>e.item):s.value).forEach(r=>{let o=r.component;if(o.filePath&&D(o.filePath)){let e=R(o.filePath);if(!e)return;e===`nuxt`?(o.meta??={},o.meta.docs??=c?.[o.pascalName],n.push(r),a.builtin++):(t.has(e)||t.set(e,[]),t.get(e).push(r),a.lib++)}else o.global&&!o.filePath?(i.push(r),a.runtime++):(e.push(r),a.user++)}),{count:a,user:e,builtin:n,lib:t,runtime:i}});return(e,t)=>{let n=M,s=X,c=U,l=Me,g=G,v=W;return u(),C(h,null,[T(c,{search:r.value,"onUpdate:search":t[1]||=e=>r.value=e,pb3:``},{actions:_(()=>[d(e.$slots,`default`)]),default:_(()=>[b(`div`,Ne,[T(n,{icon:`carbon-filter`,op50:``}),T(s,{modelValue:i.value,"onUpdate:modelValue":t[0]||=e=>i.value=e,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?(u(),y(g,{key:0,icon:`carbon-nominal`,text:`User components`,open:p.value.user.length<=a(50),description:`Total components: ${p.value.count.user}`},{default:_(()=>[(u(!0),C(h,null,f(p.value.user,e=>(u(),y(l,o({key:e.component.filePath},{ref_for:!0},e),null,16))),128))]),_:1},8,[`open`,`description`])):m(``,!0),p.value.runtime.length?(u(),y(g,{key:1,icon:`carbon-load-balancer-global`,open:p.value.runtime.length<=a(50),text:`Runtime components`,description:`Total components: ${p.value.count.runtime}`},{default:_(()=>[(u(!0),C(h,null,f(p.value.runtime,e=>(u(),y(l,o({key:e.component.filePath},{ref_for:!0},e),null,16))),128))]),_:1},8,[`open`,`description`])):m(``,!0),p.value.builtin.length?(u(),y(g,{key:2,icon:`simple-icons-nuxtdotjs`,text:`Built-in components`,description:`Total components: ${p.value.count.builtin}`},{default:_(()=>[(u(!0),C(h,null,f(p.value.builtin,e=>(u(),y(l,o({key:e.component.filePath},{ref_for:!0},e),null,16))),128))]),_:1},8,[`description`])):m(``,!0),p.value.lib.size?(u(),y(g,{key:3,open:p.value.count.lib<=a(50),icon:`carbon-3d-mpr-toggle`,text:`Components from libraries`,description:`${p.value.count.lib} components from ${p.value.lib.size} packages`},{default:_(()=>[(u(!0),C(h,null,f(p.value.lib.entries(),([e,t])=>(u(),C(`div`,{key:e,"ml-2":``},[T(v,{text:`${e} (${t.length})`,py1:``,op50:``},null,8,[`text`]),b(`div`,Pe,[(u(!0),C(h,null,f(t,e=>(u(),y(l,o({key:e.component.filePath},{ref_for:!0},e),null,16))),128))])]))),128))]),_:1},8,[`open`,`description`])):m(``,!0)],64)}}}),Ie=Object.assign(Fe,{__name:`ComponentsList`}),Le={relative:``,"h-full":``,"of-auto":``},Re={"flex-none":``,flex:`~ gap3`},ze=r({__name:`components`,setup(t){let n=O(),r=ae(),i=ie(),{componentsView:o}=E(`ui`);function c(){n.value?.inspector?.enable()}function l(){o.value=o.value===`list`?`graph`:`list`}return(t,d)=>{let f=N,p=le,g=H,x=s(`tooltip`);return u(),C(h,null,[b(`div`,Le,[(u(),y(e(a(o)===`list`?Ie:Oe),{components:a(r),relationships:a(i)},{default:_(()=>[b(`div`,Re,[v(T(f,{"text-lg":``,border:!1,icon:a(o)===`graph`?`i-carbon-list`:`i-carbon-network-4`,title:`Toggle view`,onClick:l},null,8,[`icon`]),[[x,`Toggle View`,void 0,{"bottom-end":!0}]]),a(n)?.inspector?.isAvailable?v((u(),y(f,{key:0,"text-lg":``,border:!1,icon:`i-tabler-focus-2`,title:`Inspect Vue components`,onClick:c},null,512)),[[x,`Inspect Vue components`,void 0,{"bottom-end":!0}]]):m(``,!0)])]),_:1},8,[`components`,`relationships`]))]),T(g,null,{default:_(()=>[T(p)]),_:1})],64)}}});export{ze as default}; |