[{"data":1,"prerenderedAt":2138},["ShallowReactive",2],{"navigation":3,"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-components":358,"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-components-surround":2133},[4,14,36,69,140,341],{"title":5,"path":6,"stem":7,"children":8},"Introduction","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17,"children":18,"page":35},"Guides","\u002Fguides","2.guides",[19,23,27,31],{"title":20,"path":21,"stem":22},"Your First Layout","\u002Fguides\u002Fyour-first-layout","2.guides\u002F1.your-first-layout",{"title":24,"path":25,"stem":26},"Your First Page Template","\u002Fguides\u002Fyour-first-page-template","2.guides\u002F2.your-first-page-template",{"title":28,"path":29,"stem":30},"Your First Component","\u002Fguides\u002Fyour-first-component","2.guides\u002F3.your-first-component",{"title":32,"path":33,"stem":34},"Alternative UI Variants","\u002Fguides\u002Falternative-ui-variants","2.guides\u002F4.alternative-ui-variants",false,{"title":37,"path":38,"stem":39,"children":40,"page":35},"Core Concepts","\u002Fcore-concepts","3.core-concepts",[41,45,49,53,57,61,65],{"title":42,"path":43,"stem":44},"How It All Works","\u002Fcore-concepts\u002Farchitecture","3.core-concepts\u002F1.architecture",{"title":46,"path":47,"stem":48},"The Data Model","\u002Fcore-concepts\u002Fthe-data-model","3.core-concepts\u002F2.the-data-model",{"title":50,"path":51,"stem":52},"Layouts & Pages","\u002Fcore-concepts\u002Flayouts-and-pages","3.core-concepts\u002F3.layouts-and-pages",{"title":54,"path":55,"stem":56},"Dynamic Pages","\u002Fcore-concepts\u002Fdynamic-pages","3.core-concepts\u002F4.dynamic-pages",{"title":58,"path":59,"stem":60},"Components","\u002Fcore-concepts\u002Fcomponents","3.core-concepts\u002F5.components",{"title":62,"path":63,"stem":64},"Draft & Publish Workflow","\u002Fcore-concepts\u002Fdraft-and-publish","3.core-concepts\u002F6.draft-and-publish",{"title":66,"path":67,"stem":68},"The Admin Panel","\u002Fcore-concepts\u002Fadmin-panel","3.core-concepts\u002F7.admin-panel",{"title":70,"path":71,"stem":72,"children":73,"page":35},"Api","\u002Fapi","4.api",[74,78,116,120,124,128,132,136],{"title":75,"path":76,"stem":77},"Bundle Setup","\u002Fapi\u002Fbundle-setup","4.api\u002F1.bundle-setup",{"title":58,"path":79,"stem":80,"children":81,"page":35},"\u002Fapi\u002Fcomponents","4.api\u002F2.components",[82,86,103],{"title":83,"path":84,"stem":85},"Creating Components","\u002Fapi\u002Fcomponents\u002Fcreating-components","4.api\u002F2.components\u002F1.creating-components",{"title":87,"path":88,"stem":89,"children":90,"page":35},"Annotations","\u002Fapi\u002Fcomponents\u002Fannotations","4.api\u002F2.components\u002F2.annotations",[91,95,99],{"title":92,"path":93,"stem":94},"Publishable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fpublishable","4.api\u002F2.components\u002F2.annotations\u002F1.publishable",{"title":96,"path":97,"stem":98},"Uploadable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fuploadable","4.api\u002F2.components\u002F2.annotations\u002F2.uploadable",{"title":100,"path":101,"stem":102},"Timestamped","\u002Fapi\u002Fcomponents\u002Fannotations\u002Ftimestamped","4.api\u002F2.components\u002F2.annotations\u002F3.timestamped",{"title":104,"path":105,"stem":106,"children":107,"page":35},"Built Ins","\u002Fapi\u002Fcomponents\u002Fbuilt-ins","4.api\u002F2.components\u002F3.built-ins",[108,112],{"title":109,"path":110,"stem":111},"Collection Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fcollection-component","4.api\u002F2.components\u002F3.built-ins\u002F1.collection-component",{"title":113,"path":114,"stem":115},"Form Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fform-component","4.api\u002F2.components\u002F3.built-ins\u002F2.form-component",{"title":117,"path":118,"stem":119},"Dynamic & Nested Pages","\u002Fapi\u002Fdynamic-pages","4.api\u002F3.dynamic-pages",{"title":121,"path":122,"stem":123},"Users & Security","\u002Fapi\u002Fusers-and-security","4.api\u002F4.users-and-security",{"title":125,"path":126,"stem":127},"Data Fixtures","\u002Fapi\u002Fdata-fixtures","4.api\u002F5.data-fixtures",{"title":129,"path":130,"stem":131},"Configuration Reference","\u002Fapi\u002Fconfiguration","4.api\u002F6.configuration",{"title":133,"path":134,"stem":135},"Console Commands","\u002Fapi\u002Fconsole-commands","4.api\u002F7.console-commands",{"title":137,"path":138,"stem":139},"Debugging & Profiler","\u002Fapi\u002Fdebugging","4.api\u002F8.debugging",{"title":141,"path":142,"stem":143,"children":144,"page":35},"Nuxt Module","\u002Fnuxt-module","5.nuxt-module",[145,149,162,182,207,211,295,320,324],{"title":146,"path":147,"stem":148},"Module Setup","\u002Fnuxt-module\u002Fmodule-setup","5.nuxt-module\u002F1.module-setup",{"title":150,"path":151,"stem":152,"children":153,"page":35},"Configuration","\u002Fnuxt-module\u002Fconfiguration","5.nuxt-module\u002F2.configuration",[154,158],{"title":155,"path":156,"stem":157},"Nuxt Config","\u002Fnuxt-module\u002Fconfiguration\u002Fnuxt-config","5.nuxt-module\u002F2.configuration\u002F1.nuxt-config",{"title":159,"path":160,"stem":161},"Site Config & SEO","\u002Fnuxt-module\u002Fconfiguration\u002Fsite-config-and-seo","5.nuxt-module\u002F2.configuration\u002F2.site-config-and-seo",{"title":163,"path":164,"stem":165,"children":166,"page":35},"Building Your Ui","\u002Fnuxt-module\u002Fbuilding-your-ui","5.nuxt-module\u002F3.building-your-ui",[167,171,175,178],{"title":168,"path":169,"stem":170},"Layouts","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-layouts","5.nuxt-module\u002F3.building-your-ui\u002F1.creating-layouts",{"title":172,"path":173,"stem":174},"Page Templates","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-page-templates","5.nuxt-module\u002F3.building-your-ui\u002F2.creating-page-templates",{"title":83,"path":176,"stem":177},"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-components","5.nuxt-module\u002F3.building-your-ui\u002F3.creating-components",{"title":179,"path":180,"stem":181},"CLI Generator","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcwa-cli","5.nuxt-module\u002F3.building-your-ui\u002F4.cwa-cli",{"title":183,"path":184,"stem":185,"children":186,"page":35},"Cwa Components","\u002Fnuxt-module\u002Fcwa-components","5.nuxt-module\u002F4.cwa-components",[187,191,195,199,203],{"title":188,"path":189,"stem":190},"\u003CCwaComponentGroup \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-component-group","5.nuxt-module\u002F4.cwa-components\u002F1.cwa-component-group",{"title":192,"path":193,"stem":194},"\u003CCwaPage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-page","5.nuxt-module\u002F4.cwa-components\u002F2.cwa-page",{"title":196,"path":197,"stem":198},"\u003CCwaLink \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-link","5.nuxt-module\u002F4.cwa-components\u002F3.cwa-link",{"title":200,"path":201,"stem":202},"\u003CCwaImage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-image","5.nuxt-module\u002F4.cwa-components\u002F4.cwa-image",{"title":204,"path":205,"stem":206},"\u003CCwaDefaultLayout \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-default-layout","5.nuxt-module\u002F4.cwa-components\u002F5.cwa-default-layout",{"title":208,"path":209,"stem":210},"The useCwa() API","\u002Fnuxt-module\u002Fcwa-api","5.nuxt-module\u002F5.cwa-api",{"title":212,"path":213,"stem":214,"children":215,"page":35},"Composables","\u002Fnuxt-module\u002Fcomposables","5.nuxt-module\u002F6.composables",[216,224,261,278],{"title":217,"path":218,"stem":219,"children":220,"page":35},"Layout","\u002Fnuxt-module\u002Fcomposables\u002Flayout","5.nuxt-module\u002F6.composables\u002F0.layout",[221],{"title":217,"path":222,"stem":223},"\u002Fnuxt-module\u002Fcomposables\u002Flayout\u002Fuse-cwa-layout","5.nuxt-module\u002F6.composables\u002F0.layout\u002F1.use-cwa-layout",{"title":225,"path":226,"stem":227,"children":228,"page":35},"Component","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent","5.nuxt-module\u002F6.composables\u002F1.component",[229,233,237,241,245,249,253,257],{"title":230,"path":231,"stem":232},"Component (recommended)","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-component","5.nuxt-module\u002F6.composables\u002F1.component\u002F0.use-cwa-component",{"title":234,"path":235,"stem":236},"Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F1.use-cwa-resource",{"title":238,"path":239,"stem":240},"Collection Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-collection-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F2.use-cwa-collection-resource",{"title":242,"path":243,"stem":244},"Image Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-image-resource",{"title":246,"path":247,"stem":248},"Form","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form","5.nuxt-module\u002F6.composables\u002F1.component\u002F4.use-cwa-form",{"title":250,"path":251,"stem":252},"Form Input","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input","5.nuxt-module\u002F6.composables\u002F1.component\u002F5.use-cwa-form-input",{"title":254,"path":255,"stem":256},"Form Repeated","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-repeated","5.nuxt-module\u002F6.composables\u002F1.component\u002F6.use-cwa-form-repeated",{"title":258,"path":259,"stem":260},"Form Collection","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-collection","5.nuxt-module\u002F6.composables\u002F1.component\u002F7.use-cwa-form-collection",{"title":262,"path":263,"stem":264,"children":265,"page":35},"Admin Manager","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager","5.nuxt-module\u002F6.composables\u002F2.admin-manager",[266,270,274],{"title":267,"path":268,"stem":269},"Manager Tab","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-manager-tab","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F1.use-cwa-resource-manager-tab",{"title":271,"path":272,"stem":273},"Resource Model","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-model","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F2.use-cwa-resource-model",{"title":275,"path":276,"stem":277},"Resource Upload","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-upload","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F3.use-cwa-resource-upload",{"title":279,"path":280,"stem":281,"children":282,"page":35},"Utilities","\u002Fnuxt-module\u002Fcomposables\u002Futilities","5.nuxt-module\u002F6.composables\u002F3.utilities",[283,287,291],{"title":284,"path":285,"stem":286},"Resource Endpoint","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-endpoint","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F1.use-cwa-resource-endpoint",{"title":288,"path":289,"stem":290},"Query Model","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-query-bound-model","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F2.use-query-bound-model",{"title":292,"path":293,"stem":294},"Resource Route","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-route","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F3.use-cwa-resource-route",{"title":296,"path":297,"stem":298,"children":299,"page":35},"Component Helpers","\u002Fnuxt-module\u002Fcomponent-helpers","5.nuxt-module\u002F7.component-helpers",[300,304,308,312,316],{"title":301,"path":302,"stem":303},"Images & Media","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads","5.nuxt-module\u002F7.component-helpers\u002F1.images-and-uploads",{"title":305,"path":306,"stem":307},"Collections & Pagination","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fcollections-and-pagination","5.nuxt-module\u002F7.component-helpers\u002F2.collections-and-pagination",{"title":309,"path":310,"stem":311},"HTML Content","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fhtml-content","5.nuxt-module\u002F7.component-helpers\u002F3.html-content",{"title":313,"path":314,"stem":315},"Real-Time Updates","\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates","5.nuxt-module\u002F7.component-helpers\u002F4.real-time-updates",{"title":317,"path":318,"stem":319},"Forms","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fforms","5.nuxt-module\u002F7.component-helpers\u002F5.forms",{"title":321,"path":322,"stem":323},"Authentication","\u002Fnuxt-module\u002Fauthentication","5.nuxt-module\u002F8.authentication",{"title":325,"path":326,"stem":327,"children":328,"page":35},"Cwa Layer","\u002Fnuxt-module\u002Fcwa-layer","5.nuxt-module\u002F9.cwa-layer",[329,333,337],{"title":330,"path":331,"stem":332},"Overview","\u002Fnuxt-module\u002Fcwa-layer\u002Foverview","5.nuxt-module\u002F9.cwa-layer\u002F1.overview",{"title":334,"path":335,"stem":336},"Auth Pages","\u002Fnuxt-module\u002Fcwa-layer\u002Fauth-pages","5.nuxt-module\u002F9.cwa-layer\u002F2.auth-pages",{"title":338,"path":339,"stem":340},"Admin Panel","\u002Fnuxt-module\u002Fcwa-layer\u002Fadmin-panel","5.nuxt-module\u002F9.cwa-layer\u002F3.admin-panel",{"title":342,"path":343,"stem":344,"children":345,"page":35},"Deployment","\u002Fdeployment","6.deployment",[346,350,354],{"title":347,"path":348,"stem":349},"Docker","\u002Fdeployment\u002Fdocker","6.deployment\u002F1.docker",{"title":351,"path":352,"stem":353},"Kubernetes & Helm","\u002Fdeployment\u002Fkubernetes","6.deployment\u002F2.kubernetes",{"title":355,"path":356,"stem":357},"CI\u002FCD","\u002Fdeployment\u002Fci-cd","6.deployment\u002F3.ci-cd",{"id":359,"title":83,"badge":360,"body":363,"description":2127,"extension":2128,"links":2129,"meta":2130,"navigation":525,"path":176,"seo":2131,"stem":177,"__hash__":2132},"docs\u002F5.nuxt-module\u002F3.building-your-ui\u002F3.creating-components.md",{"label":361,"color":362},"Draft","amber",{"type":364,"value":365,"toc":2107},"minimark",[366,384,389,399,406,409,413,418,421,690,697,701,789,795,817,828,832,835,902,905,909,918,984,987,1038,1040,1044,1048,1345,1351,1419,1425,1432,1486,1490,1493,1499,1515,1519,1522,1806,1808,1812,1815,2090,2096,2103],[367,368,369,370,374,375,378,379,383],"p",{},"A CWA component has two parts: a ",[371,372,373],"strong",{},"display component"," the visitor sees, and optionally one or more ",[371,376,377],{},"admin manager tabs"," that appear when an admin selects the component in edit mode. The file structure drives the auto-discovery — no registration beyond ",[380,381,382],"code",{},"nuxt.config"," needed.",[385,386,388],"h2",{"id":387},"file-convention","File Convention",[390,391,396],"pre",{"className":392,"code":394,"language":395},[393],"language-text","app\u002Fcwa\u002Fcomponents\u002F\n    Title\u002F\n        Title.vue          # display component → CwaComponentTitle\n        admin\u002F\n            Title.vue      # manager tab (optional)\n","text",[380,397,394],{"__ignoreMap":398},"",[367,400,401,402,405],{},"The directory name matches the PHP class name. The display file must have the same name as the directory. Admin tabs live in ",[380,403,404],{},"admin\u002F"," — each file is one tab.",[407,408],"hr",{},[385,410,412],{"id":411},"part-1-the-display-component","Part 1: The Display Component",[414,415,417],"h3",{"id":416},"the-mandatory-pattern","The Mandatory Pattern",[367,419,420],{},"Every display component must do four things:",[390,422,426],{"className":423,"code":424,"language":425,"meta":398,"style":398},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003C!-- app\u002Fcwa\u002Fcomponents\u002FTitle\u002FTitle.vue -->\n\u003Ctemplate>\n    \u003Cdiv v-if=\"resource?.data\">\n        \u003Ch2>{{ resource.data.title }}\u003C\u002Fh2>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\nimport { useCwaComponent } from '#imports'\n\nconst props = defineProps\u003CIriProp>()\n\nconst { resource, exposeMeta } = useCwaComponent(props)\ndefineExpose(exposeMeta)  \u002F\u002F required — allows the admin panel to select this component\n\u003C\u002Fscript>\n","vue",[380,427,428,437,451,479,501,511,520,527,552,583,604,609,639,644,669,681],{"__ignoreMap":398},[429,430,433],"span",{"class":431,"line":432},"line",1,[429,434,436],{"class":435},"sTBSN","\u003C!-- app\u002Fcwa\u002Fcomponents\u002FTitle\u002FTitle.vue -->\n",[429,438,440,444,448],{"class":431,"line":439},2,[429,441,443],{"class":442},"sOvfz","\u003C",[429,445,447],{"class":446},"s-h7I","template",[429,449,450],{"class":442},">\n",[429,452,454,457,460,464,467,471,475,477],{"class":431,"line":453},3,[429,455,456],{"class":442},"    \u003C",[429,458,459],{"class":446},"div",[429,461,463],{"class":462},"sGtlX"," v-if",[429,465,466],{"class":442},"=",[429,468,470],{"class":469},"seSrl","\"",[429,472,474],{"class":473},"sLL54","resource?.data",[429,476,470],{"class":469},[429,478,450],{"class":442},[429,480,482,485,487,490,494,497,499],{"class":431,"line":481},4,[429,483,484],{"class":442},"        \u003C",[429,486,385],{"class":446},[429,488,489],{"class":442},">",[429,491,493],{"class":492},"sPB8G","{{ resource.data.title }}",[429,495,496],{"class":442},"\u003C\u002F",[429,498,385],{"class":446},[429,500,450],{"class":442},[429,502,504,507,509],{"class":431,"line":503},5,[429,505,506],{"class":442},"    \u003C\u002F",[429,508,459],{"class":446},[429,510,450],{"class":442},[429,512,514,516,518],{"class":431,"line":513},6,[429,515,496],{"class":442},[429,517,447],{"class":446},[429,519,450],{"class":442},[429,521,523],{"class":431,"line":522},7,[429,524,526],{"emptyLinePlaceholder":525},true,"\n",[429,528,530,532,535,538,541,543,545,548,550],{"class":431,"line":529},8,[429,531,443],{"class":442},[429,533,534],{"class":446},"script",[429,536,537],{"class":462}," setup",[429,539,540],{"class":462}," lang",[429,542,466],{"class":442},[429,544,470],{"class":469},[429,546,547],{"class":473},"ts",[429,549,470],{"class":469},[429,551,450],{"class":442},[429,553,555,559,562,565,568,571,574,577,580],{"class":431,"line":554},9,[429,556,558],{"class":557},"sm4w6","import",[429,560,561],{"class":557}," type",[429,563,564],{"class":442}," {",[429,566,567],{"class":492}," IriProp",[429,569,570],{"class":442}," }",[429,572,573],{"class":557}," from",[429,575,576],{"class":469}," '",[429,578,579],{"class":473},"#cwa\u002Fcomposables\u002Fcwa-resource",[429,581,582],{"class":469},"'\n",[429,584,586,588,590,593,595,597,599,602],{"class":431,"line":585},10,[429,587,558],{"class":557},[429,589,564],{"class":442},[429,591,592],{"class":492}," useCwaComponent",[429,594,570],{"class":442},[429,596,573],{"class":557},[429,598,576],{"class":469},[429,600,601],{"class":473},"#imports",[429,603,582],{"class":469},[429,605,607],{"class":431,"line":606},11,[429,608,526],{"emptyLinePlaceholder":525},[429,610,612,616,620,624,628,630,634,636],{"class":431,"line":611},12,[429,613,615],{"class":614},"swB56","const",[429,617,619],{"class":618},"sc2zw"," props",[429,621,623],{"class":622},"sVlFx"," =",[429,625,627],{"class":626},"sKpYG"," defineProps",[429,629,443],{"class":442},[429,631,633],{"class":632},"sRCss","IriProp",[429,635,489],{"class":442},[429,637,638],{"class":492},"()\n",[429,640,642],{"class":431,"line":641},13,[429,643,526],{"emptyLinePlaceholder":525},[429,645,647,649,651,654,657,660,662,664,666],{"class":431,"line":646},14,[429,648,615],{"class":614},[429,650,564],{"class":442},[429,652,653],{"class":618}," resource",[429,655,656],{"class":442},",",[429,658,659],{"class":618}," exposeMeta",[429,661,570],{"class":442},[429,663,623],{"class":622},[429,665,592],{"class":626},[429,667,668],{"class":492},"(props)\n",[429,670,672,675,678],{"class":431,"line":671},15,[429,673,674],{"class":626},"defineExpose",[429,676,677],{"class":492},"(exposeMeta)  ",[429,679,680],{"class":435},"\u002F\u002F required — allows the admin panel to select this component\n",[429,682,684,686,688],{"class":431,"line":683},16,[429,685,496],{"class":442},[429,687,534],{"class":446},[429,689,450],{"class":442},[367,691,692,693,696],{},"If you forget ",[380,694,695],{},"defineExpose(exposeMeta)",", the admin overlay cannot attach to this component.",[414,698,700],{"id":699},"accessing-your-data","Accessing Your Data",[390,702,705],{"className":703,"code":704,"language":547,"meta":398,"style":398},"language-ts shiki shiki-themes github-light github-dark material-theme-palenight","\u002F\u002F resource is returned directly from useCwaComponent(props)\n\u002F\u002F Your PHP entity fields are under resource.value?.data\nconst title = computed(() => resource.value?.data?.title)\nconst publishedAt = computed(() => resource.value?.data?.publishedAt)\n",[380,706,707,712,717,757],{"__ignoreMap":398},[429,708,709],{"class":431,"line":432},[429,710,711],{"class":435},"\u002F\u002F resource is returned directly from useCwaComponent(props)\n",[429,713,714],{"class":431,"line":439},[429,715,716],{"class":435},"\u002F\u002F Your PHP entity fields are under resource.value?.data\n",[429,718,719,721,724,726,729,732,735,738,740,743,746,749,752,754],{"class":431,"line":453},[429,720,615],{"class":614},[429,722,723],{"class":618}," title",[429,725,623],{"class":622},[429,727,728],{"class":626}," computed",[429,730,731],{"class":492},"(",[429,733,734],{"class":442},"()",[429,736,737],{"class":614}," =>",[429,739,653],{"class":492},[429,741,742],{"class":442},".",[429,744,745],{"class":492},"value",[429,747,748],{"class":442},"?.",[429,750,751],{"class":492},"data",[429,753,748],{"class":442},[429,755,756],{"class":492},"title)\n",[429,758,759,761,764,766,768,770,772,774,776,778,780,782,784,786],{"class":431,"line":481},[429,760,615],{"class":614},[429,762,763],{"class":618}," publishedAt",[429,765,623],{"class":622},[429,767,728],{"class":626},[429,769,731],{"class":492},[429,771,734],{"class":442},[429,773,737],{"class":614},[429,775,653],{"class":492},[429,777,742],{"class":442},[429,779,745],{"class":492},[429,781,748],{"class":442},[429,783,751],{"class":492},[429,785,748],{"class":442},[429,787,788],{"class":492},"publishedAt)\n",[367,790,791,794],{},[380,792,793],{},"resource.value"," states:",[796,797,798,805,811],"ul",{},[799,800,801,804],"li",{},[380,802,803],{},"undefined"," — still loading",[799,806,807,810],{},[380,808,809],{},"null"," — not found",[799,812,813,816],{},[380,814,815],{},"object"," — loaded successfully",[367,818,819,820,823,824,827],{},"Always guard with ",[380,821,822],{},"v-if=\"resource?.data\""," or ",[380,825,826],{},"v-if=\"resource\""," before rendering.",[414,829,831],{"id":830},"opting-out-of-admin-management","Opting Out of Admin Management",[367,833,834],{},"For presentational components that have no editable fields:",[390,836,838],{"className":703,"code":837,"language":547,"meta":398,"style":398},"const { resource, exposeMeta } = useCwaComponent(props, [], {\n    manager: { disabled: true }\n})\n",[380,839,840,871,894],{"__ignoreMap":398},[429,841,842,844,846,848,850,852,854,856,858,861,863,866,868],{"class":431,"line":432},[429,843,615],{"class":614},[429,845,564],{"class":442},[429,847,653],{"class":618},[429,849,656],{"class":442},[429,851,659],{"class":618},[429,853,570],{"class":442},[429,855,623],{"class":622},[429,857,592],{"class":626},[429,859,860],{"class":492},"(props",[429,862,656],{"class":442},[429,864,865],{"class":492}," []",[429,867,656],{"class":442},[429,869,870],{"class":442}," {\n",[429,872,873,877,880,882,885,887,891],{"class":431,"line":439},[429,874,876],{"class":875},"sDHlG","    manager",[429,878,879],{"class":442},":",[429,881,564],{"class":442},[429,883,884],{"class":875}," disabled",[429,886,879],{"class":442},[429,888,890],{"class":889},"swWMF"," true",[429,892,893],{"class":442}," }\n",[429,895,896,899],{"class":431,"line":453},[429,897,898],{"class":442},"}",[429,900,901],{"class":492},")\n",[367,903,904],{},"The component still renders but the admin overlay won't attach to it.",[414,906,908],{"id":907},"ui-class-name-variants","UI Class Name Variants",[367,910,911,912,915,916,879],{},"The ",[380,913,914],{},"uiClassNames"," field holds the CSS class(es) the admin chose from the options you define in ",[380,917,382],{},[390,919,921],{"className":423,"code":920,"language":425,"meta":398,"style":398},"\u003Ctemplate>\n    \u003Cdiv :class=\"resource?.data?.uiClassNames ?? ''\">\n        \u003Ch2>{{ resource?.data?.title }}\u003C\u002Fh2>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[380,922,923,931,951,968,976],{"__ignoreMap":398},[429,924,925,927,929],{"class":431,"line":432},[429,926,443],{"class":442},[429,928,447],{"class":446},[429,930,450],{"class":442},[429,932,933,935,937,940,942,944,947,949],{"class":431,"line":439},[429,934,456],{"class":442},[429,936,459],{"class":446},[429,938,939],{"class":462}," :class",[429,941,466],{"class":442},[429,943,470],{"class":469},[429,945,946],{"class":473},"resource?.data?.uiClassNames ?? ''",[429,948,470],{"class":469},[429,950,450],{"class":442},[429,952,953,955,957,959,962,964,966],{"class":431,"line":453},[429,954,484],{"class":442},[429,956,385],{"class":446},[429,958,489],{"class":442},[429,960,961],{"class":492},"{{ resource?.data?.title }}",[429,963,496],{"class":442},[429,965,385],{"class":446},[429,967,450],{"class":442},[429,969,970,972,974],{"class":431,"line":481},[429,971,506],{"class":442},[429,973,459],{"class":446},[429,975,450],{"class":442},[429,977,978,980,982],{"class":431,"line":503},[429,979,496],{"class":442},[429,981,447],{"class":446},[429,983,450],{"class":442},[367,985,986],{},"For conditional logic based on which variant is selected:",[390,988,990],{"className":703,"code":989,"language":547,"meta":398,"style":398},"const variant = computed(() => resource.value?.data?.uiClassNames)\n\n\u002F\u002F Check the variant name in your template\n\u002F\u002F \u003Cdiv :class=\"{ 'bg-black text-white': variant === 'dark' }\">\n",[380,991,992,1024,1028,1033],{"__ignoreMap":398},[429,993,994,996,999,1001,1003,1005,1007,1009,1011,1013,1015,1017,1019,1021],{"class":431,"line":432},[429,995,615],{"class":614},[429,997,998],{"class":618}," variant",[429,1000,623],{"class":622},[429,1002,728],{"class":626},[429,1004,731],{"class":492},[429,1006,734],{"class":442},[429,1008,737],{"class":614},[429,1010,653],{"class":492},[429,1012,742],{"class":442},[429,1014,745],{"class":492},[429,1016,748],{"class":442},[429,1018,751],{"class":492},[429,1020,748],{"class":442},[429,1022,1023],{"class":492},"uiClassNames)\n",[429,1025,1026],{"class":431,"line":439},[429,1027,526],{"emptyLinePlaceholder":525},[429,1029,1030],{"class":431,"line":453},[429,1031,1032],{"class":435},"\u002F\u002F Check the variant name in your template\n",[429,1034,1035],{"class":431,"line":481},[429,1036,1037],{"class":435},"\u002F\u002F \u003Cdiv :class=\"{ 'bg-black text-white': variant === 'dark' }\">\n",[407,1039],{},[385,1041,1043],{"id":1042},"part-2-admin-manager-tabs","Part 2: Admin Manager Tabs",[414,1045,1047],{"id":1046},"one-tab","One Tab",[390,1049,1051],{"className":423,"code":1050,"language":425,"meta":398,"style":398},"\u003C!-- app\u002Fcwa\u002Fcomponents\u002FTitle\u002Fadmin\u002FTitle.vue -->\n\u003Ctemplate>\n    \u003Cdiv class=\"p-4 space-y-4\">\n        \u003CCwaUiFormInput\n            v-model=\"model.title\"\n            label=\"Title text\"\n        \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { toRef } from 'vue'\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\nimport { useCwaResourceManagerTab, useCwaResourceModel } from '#imports'\n\nconst props = defineProps\u003CIriProp>()\n\nuseCwaResourceManagerTab({ name: 'Content', order: 1 })\n\nconst { model } = useCwaResourceModel(toRef(props, 'iri'))\n\u003C\u002Fscript>\n",[380,1052,1053,1058,1066,1086,1093,1108,1122,1127,1135,1143,1147,1167,1186,1206,1230,1234,1252,1257,1296,1301,1336],{"__ignoreMap":398},[429,1054,1055],{"class":431,"line":432},[429,1056,1057],{"class":435},"\u003C!-- app\u002Fcwa\u002Fcomponents\u002FTitle\u002Fadmin\u002FTitle.vue -->\n",[429,1059,1060,1062,1064],{"class":431,"line":439},[429,1061,443],{"class":442},[429,1063,447],{"class":446},[429,1065,450],{"class":442},[429,1067,1068,1070,1072,1075,1077,1079,1082,1084],{"class":431,"line":453},[429,1069,456],{"class":442},[429,1071,459],{"class":446},[429,1073,1074],{"class":462}," class",[429,1076,466],{"class":442},[429,1078,470],{"class":469},[429,1080,1081],{"class":473},"p-4 space-y-4",[429,1083,470],{"class":469},[429,1085,450],{"class":442},[429,1087,1088,1090],{"class":431,"line":481},[429,1089,484],{"class":442},[429,1091,1092],{"class":446},"CwaUiFormInput\n",[429,1094,1095,1098,1100,1102,1105],{"class":431,"line":503},[429,1096,1097],{"class":462},"            v-model",[429,1099,466],{"class":442},[429,1101,470],{"class":469},[429,1103,1104],{"class":473},"model.title",[429,1106,1107],{"class":469},"\"\n",[429,1109,1110,1113,1115,1117,1120],{"class":431,"line":513},[429,1111,1112],{"class":462},"            label",[429,1114,466],{"class":442},[429,1116,470],{"class":469},[429,1118,1119],{"class":473},"Title text",[429,1121,1107],{"class":469},[429,1123,1124],{"class":431,"line":522},[429,1125,1126],{"class":442},"        \u002F>\n",[429,1128,1129,1131,1133],{"class":431,"line":529},[429,1130,506],{"class":442},[429,1132,459],{"class":446},[429,1134,450],{"class":442},[429,1136,1137,1139,1141],{"class":431,"line":554},[429,1138,496],{"class":442},[429,1140,447],{"class":446},[429,1142,450],{"class":442},[429,1144,1145],{"class":431,"line":585},[429,1146,526],{"emptyLinePlaceholder":525},[429,1148,1149,1151,1153,1155,1157,1159,1161,1163,1165],{"class":431,"line":606},[429,1150,443],{"class":442},[429,1152,534],{"class":446},[429,1154,537],{"class":462},[429,1156,540],{"class":462},[429,1158,466],{"class":442},[429,1160,470],{"class":469},[429,1162,547],{"class":473},[429,1164,470],{"class":469},[429,1166,450],{"class":442},[429,1168,1169,1171,1173,1176,1178,1180,1182,1184],{"class":431,"line":611},[429,1170,558],{"class":557},[429,1172,564],{"class":442},[429,1174,1175],{"class":492}," toRef",[429,1177,570],{"class":442},[429,1179,573],{"class":557},[429,1181,576],{"class":469},[429,1183,425],{"class":473},[429,1185,582],{"class":469},[429,1187,1188,1190,1192,1194,1196,1198,1200,1202,1204],{"class":431,"line":641},[429,1189,558],{"class":557},[429,1191,561],{"class":557},[429,1193,564],{"class":442},[429,1195,567],{"class":492},[429,1197,570],{"class":442},[429,1199,573],{"class":557},[429,1201,576],{"class":469},[429,1203,579],{"class":473},[429,1205,582],{"class":469},[429,1207,1208,1210,1212,1215,1217,1220,1222,1224,1226,1228],{"class":431,"line":646},[429,1209,558],{"class":557},[429,1211,564],{"class":442},[429,1213,1214],{"class":492}," useCwaResourceManagerTab",[429,1216,656],{"class":442},[429,1218,1219],{"class":492}," useCwaResourceModel",[429,1221,570],{"class":442},[429,1223,573],{"class":557},[429,1225,576],{"class":469},[429,1227,601],{"class":473},[429,1229,582],{"class":469},[429,1231,1232],{"class":431,"line":671},[429,1233,526],{"emptyLinePlaceholder":525},[429,1235,1236,1238,1240,1242,1244,1246,1248,1250],{"class":431,"line":683},[429,1237,615],{"class":614},[429,1239,619],{"class":618},[429,1241,623],{"class":622},[429,1243,627],{"class":626},[429,1245,443],{"class":442},[429,1247,633],{"class":632},[429,1249,489],{"class":442},[429,1251,638],{"class":492},[429,1253,1255],{"class":431,"line":1254},17,[429,1256,526],{"emptyLinePlaceholder":525},[429,1258,1260,1263,1265,1268,1271,1273,1275,1278,1281,1283,1286,1288,1292,1294],{"class":431,"line":1259},18,[429,1261,1262],{"class":626},"useCwaResourceManagerTab",[429,1264,731],{"class":492},[429,1266,1267],{"class":442},"{",[429,1269,1270],{"class":875}," name",[429,1272,879],{"class":442},[429,1274,576],{"class":469},[429,1276,1277],{"class":473},"Content",[429,1279,1280],{"class":469},"'",[429,1282,656],{"class":442},[429,1284,1285],{"class":875}," order",[429,1287,879],{"class":442},[429,1289,1291],{"class":1290},"scSvc"," 1",[429,1293,570],{"class":442},[429,1295,901],{"class":492},[429,1297,1299],{"class":431,"line":1298},19,[429,1300,526],{"emptyLinePlaceholder":525},[429,1302,1304,1306,1308,1311,1313,1315,1317,1319,1322,1324,1326,1328,1331,1333],{"class":431,"line":1303},20,[429,1305,615],{"class":614},[429,1307,564],{"class":442},[429,1309,1310],{"class":618}," model",[429,1312,570],{"class":442},[429,1314,623],{"class":622},[429,1316,1219],{"class":626},[429,1318,731],{"class":492},[429,1320,1321],{"class":626},"toRef",[429,1323,860],{"class":492},[429,1325,656],{"class":442},[429,1327,576],{"class":469},[429,1329,1330],{"class":473},"iri",[429,1332,1280],{"class":469},[429,1334,1335],{"class":492},"))\n",[429,1337,1339,1341,1343],{"class":431,"line":1338},21,[429,1340,496],{"class":442},[429,1342,534],{"class":446},[429,1344,450],{"class":442},[414,1346,1348,1350],{"id":1347},"usecwaresourcemanagertab-options",[380,1349,1262],{}," Options",[1352,1353,1354,1370],"table",{},[1355,1356,1357],"thead",{},[1358,1359,1360,1364,1367],"tr",{},[1361,1362,1363],"th",{},"Option",[1361,1365,1366],{},"Type",[1361,1368,1369],{},"Description",[1371,1372,1373,1389,1404],"tbody",{},[1358,1374,1375,1381,1386],{},[1376,1377,1378],"td",{},[380,1379,1380],{},"name",[1376,1382,1383],{},[380,1384,1385],{},"string",[1376,1387,1388],{},"Tab label shown in the admin panel",[1358,1390,1391,1396,1401],{},[1376,1392,1393],{},[380,1394,1395],{},"order",[1376,1397,1398],{},[380,1399,1400],{},"number",[1376,1402,1403],{},"Lower numbers appear first",[1358,1405,1406,1411,1416],{},[1376,1407,1408],{},[380,1409,1410],{},"disabled",[1376,1412,1413],{},[380,1414,1415],{},"boolean | ComputedRef\u003Cboolean>",[1376,1417,1418],{},"Conditionally disable the tab",[414,1420,1422],{"id":1421},"usecwaresourcemodel",[380,1423,1424],{},"useCwaResourceModel",[367,1426,1427,1428,1431],{},"Returns a reactive ",[380,1429,1430],{},"model"," object mirroring the component's data. Setting a field PATCHes the API automatically with debouncing:",[390,1433,1435],{"className":703,"code":1434,"language":547,"meta":398,"style":398},"const { model } = useCwaResourceModel(toRef(props, 'iri'))\n\n\u002F\u002F Bind directly to form inputs\n\u002F\u002F \u003CCwaUiFormInput v-model=\"model.title\" \u002F>\n\u002F\u002F Setting model.title = 'New value' triggers a PATCH\n",[380,1436,1437,1467,1471,1476,1481],{"__ignoreMap":398},[429,1438,1439,1441,1443,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465],{"class":431,"line":432},[429,1440,615],{"class":614},[429,1442,564],{"class":442},[429,1444,1310],{"class":618},[429,1446,570],{"class":442},[429,1448,623],{"class":622},[429,1450,1219],{"class":626},[429,1452,731],{"class":492},[429,1454,1321],{"class":626},[429,1456,860],{"class":492},[429,1458,656],{"class":442},[429,1460,576],{"class":469},[429,1462,1330],{"class":473},[429,1464,1280],{"class":469},[429,1466,1335],{"class":492},[429,1468,1469],{"class":431,"line":439},[429,1470,526],{"emptyLinePlaceholder":525},[429,1472,1473],{"class":431,"line":453},[429,1474,1475],{"class":435},"\u002F\u002F Bind directly to form inputs\n",[429,1477,1478],{"class":431,"line":481},[429,1479,1480],{"class":435},"\u002F\u002F \u003CCwaUiFormInput v-model=\"model.title\" \u002F>\n",[429,1482,1483],{"class":431,"line":503},[429,1484,1485],{"class":435},"\u002F\u002F Setting model.title = 'New value' triggers a PATCH\n",[414,1487,1489],{"id":1488},"multiple-tabs","Multiple Tabs",[367,1491,1492],{},"Create one file per tab:",[390,1494,1497],{"className":1495,"code":1496,"language":395},[393],"app\u002Fcwa\u002Fcomponents\u002FArticle\u002Fadmin\u002F\n    Content.vue     # useCwaResourceManagerTab({ name: 'Content', order: 1 })\n    Image.vue       # useCwaResourceManagerTab({ name: 'Image', order: 2 })\n    Settings.vue    # useCwaResourceManagerTab({ name: 'Settings', order: 3 })\n",[380,1498,1496],{"__ignoreMap":398},[367,1500,1501,1502,1505,1506,1508,1509,1505,1512,742],{},"Each file is independent — they can use different composables and form inputs. A common pattern: ",[380,1503,1504],{},"Content.vue"," uses ",[380,1507,1424],{},", ",[380,1510,1511],{},"Image.vue",[380,1513,1514],{},"useCwaResourceUpload",[414,1516,1518],{"id":1517},"read-only-admin-tab","Read-Only Admin Tab",[367,1520,1521],{},"Not every tab needs to write. Use a tab to show computed values, metadata, or instructions:",[390,1523,1525],{"className":423,"code":1524,"language":425,"meta":398,"style":398},"\u003Ctemplate>\n    \u003Cdiv class=\"p-4 space-y-2 text-sm text-gray-500\">\n        \u003Cp>IRI: \u003Ccode>{{ props.iri }}\u003C\u002Fcode>\u003C\u002Fp>\n        \u003Cp>Created: {{ resource?.data?.createdAt }}\u003C\u002Fp>\n        \u003Cp>Published: {{ resource?.data?.publishedAt ?? 'Not published' }}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\nimport { useCwaComponent, useCwaResourceManagerTab } from '#imports'\n\nconst props = defineProps\u003CIriProp>()\nuseCwaResourceManagerTab({ name: 'Info', order: 99 })\nconst { resource } = useCwaComponent(props, [], { manager: { disabled: true } })\n\u003C\u002Fscript>\n",[380,1526,1527,1535,1554,1585,1602,1619,1627,1635,1639,1659,1679,1701,1705,1723,1755,1798],{"__ignoreMap":398},[429,1528,1529,1531,1533],{"class":431,"line":432},[429,1530,443],{"class":442},[429,1532,447],{"class":446},[429,1534,450],{"class":442},[429,1536,1537,1539,1541,1543,1545,1547,1550,1552],{"class":431,"line":439},[429,1538,456],{"class":442},[429,1540,459],{"class":446},[429,1542,1074],{"class":462},[429,1544,466],{"class":442},[429,1546,470],{"class":469},[429,1548,1549],{"class":473},"p-4 space-y-2 text-sm text-gray-500",[429,1551,470],{"class":469},[429,1553,450],{"class":442},[429,1555,1556,1558,1560,1562,1565,1567,1569,1571,1574,1576,1578,1581,1583],{"class":431,"line":453},[429,1557,484],{"class":442},[429,1559,367],{"class":446},[429,1561,489],{"class":442},[429,1563,1564],{"class":492},"IRI: ",[429,1566,443],{"class":442},[429,1568,380],{"class":446},[429,1570,489],{"class":442},[429,1572,1573],{"class":492},"{{ props.iri }}",[429,1575,496],{"class":442},[429,1577,380],{"class":446},[429,1579,1580],{"class":442},">\u003C\u002F",[429,1582,367],{"class":446},[429,1584,450],{"class":442},[429,1586,1587,1589,1591,1593,1596,1598,1600],{"class":431,"line":481},[429,1588,484],{"class":442},[429,1590,367],{"class":446},[429,1592,489],{"class":442},[429,1594,1595],{"class":492},"Created: {{ resource?.data?.createdAt }}",[429,1597,496],{"class":442},[429,1599,367],{"class":446},[429,1601,450],{"class":442},[429,1603,1604,1606,1608,1610,1613,1615,1617],{"class":431,"line":503},[429,1605,484],{"class":442},[429,1607,367],{"class":446},[429,1609,489],{"class":442},[429,1611,1612],{"class":492},"Published: {{ resource?.data?.publishedAt ?? 'Not published' }}",[429,1614,496],{"class":442},[429,1616,367],{"class":446},[429,1618,450],{"class":442},[429,1620,1621,1623,1625],{"class":431,"line":513},[429,1622,506],{"class":442},[429,1624,459],{"class":446},[429,1626,450],{"class":442},[429,1628,1629,1631,1633],{"class":431,"line":522},[429,1630,496],{"class":442},[429,1632,447],{"class":446},[429,1634,450],{"class":442},[429,1636,1637],{"class":431,"line":529},[429,1638,526],{"emptyLinePlaceholder":525},[429,1640,1641,1643,1645,1647,1649,1651,1653,1655,1657],{"class":431,"line":554},[429,1642,443],{"class":442},[429,1644,534],{"class":446},[429,1646,537],{"class":462},[429,1648,540],{"class":462},[429,1650,466],{"class":442},[429,1652,470],{"class":469},[429,1654,547],{"class":473},[429,1656,470],{"class":469},[429,1658,450],{"class":442},[429,1660,1661,1663,1665,1667,1669,1671,1673,1675,1677],{"class":431,"line":585},[429,1662,558],{"class":557},[429,1664,561],{"class":557},[429,1666,564],{"class":442},[429,1668,567],{"class":492},[429,1670,570],{"class":442},[429,1672,573],{"class":557},[429,1674,576],{"class":469},[429,1676,579],{"class":473},[429,1678,582],{"class":469},[429,1680,1681,1683,1685,1687,1689,1691,1693,1695,1697,1699],{"class":431,"line":606},[429,1682,558],{"class":557},[429,1684,564],{"class":442},[429,1686,592],{"class":492},[429,1688,656],{"class":442},[429,1690,1214],{"class":492},[429,1692,570],{"class":442},[429,1694,573],{"class":557},[429,1696,576],{"class":469},[429,1698,601],{"class":473},[429,1700,582],{"class":469},[429,1702,1703],{"class":431,"line":611},[429,1704,526],{"emptyLinePlaceholder":525},[429,1706,1707,1709,1711,1713,1715,1717,1719,1721],{"class":431,"line":641},[429,1708,615],{"class":614},[429,1710,619],{"class":618},[429,1712,623],{"class":622},[429,1714,627],{"class":626},[429,1716,443],{"class":442},[429,1718,633],{"class":632},[429,1720,489],{"class":442},[429,1722,638],{"class":492},[429,1724,1725,1727,1729,1731,1733,1735,1737,1740,1742,1744,1746,1748,1751,1753],{"class":431,"line":646},[429,1726,1262],{"class":626},[429,1728,731],{"class":492},[429,1730,1267],{"class":442},[429,1732,1270],{"class":875},[429,1734,879],{"class":442},[429,1736,576],{"class":469},[429,1738,1739],{"class":473},"Info",[429,1741,1280],{"class":469},[429,1743,656],{"class":442},[429,1745,1285],{"class":875},[429,1747,879],{"class":442},[429,1749,1750],{"class":1290}," 99",[429,1752,570],{"class":442},[429,1754,901],{"class":492},[429,1756,1757,1759,1761,1763,1765,1767,1769,1771,1773,1775,1777,1779,1782,1784,1786,1788,1790,1792,1794,1796],{"class":431,"line":671},[429,1758,615],{"class":614},[429,1760,564],{"class":442},[429,1762,653],{"class":618},[429,1764,570],{"class":442},[429,1766,623],{"class":622},[429,1768,592],{"class":626},[429,1770,860],{"class":492},[429,1772,656],{"class":442},[429,1774,865],{"class":492},[429,1776,656],{"class":442},[429,1778,564],{"class":442},[429,1780,1781],{"class":875}," manager",[429,1783,879],{"class":442},[429,1785,564],{"class":442},[429,1787,884],{"class":875},[429,1789,879],{"class":442},[429,1791,890],{"class":889},[429,1793,570],{"class":442},[429,1795,570],{"class":442},[429,1797,901],{"class":492},[429,1799,1800,1802,1804],{"class":431,"line":683},[429,1801,496],{"class":442},[429,1803,534],{"class":446},[429,1805,450],{"class":442},[407,1807],{},[385,1809,1811],{"id":1810},"part-3-nuxtconfig-registration","Part 3: nuxt.config Registration",[367,1813,1814],{},"Without registration a component still renders and is admin-selectable. Registration adds it to the \"Add Component\" dialog with a name and description, and enables UI class name options:",[390,1816,1818],{"className":703,"code":1817,"language":547,"meta":398,"style":398},"\u002F\u002F nuxt.config.ts\ncwa: {\n    resources: {\n        Title: {\n            name: 'Title Block',\n            description: 'A heading or section title',\n            instantAdd: false,          \u002F\u002F true = skip config dialog, add immediately\n            defaultData: {              \u002F\u002F pre-fill fields when created\n                title: 'New Title'\n            },\n            classes: [\n                { value: '', label: 'Default' },\n                { value: 'text-center', label: 'Centered' },\n                { value: 'text-right', label: 'Right-aligned' }\n            ]\n        },\n        Article: {\n            name: 'Article',\n            instantAdd: false\n        }\n    }\n}\n",[380,1819,1820,1825,1834,1843,1852,1869,1885,1900,1912,1926,1931,1941,1971,2001,2031,2036,2041,2050,2065,2074,2079,2084],{"__ignoreMap":398},[429,1821,1822],{"class":431,"line":432},[429,1823,1824],{"class":435},"\u002F\u002F nuxt.config.ts\n",[429,1826,1827,1830,1832],{"class":431,"line":439},[429,1828,1829],{"class":632},"cwa",[429,1831,879],{"class":442},[429,1833,870],{"class":442},[429,1835,1836,1839,1841],{"class":431,"line":453},[429,1837,1838],{"class":632},"    resources",[429,1840,879],{"class":442},[429,1842,870],{"class":442},[429,1844,1845,1848,1850],{"class":431,"line":481},[429,1846,1847],{"class":632},"        Title",[429,1849,879],{"class":442},[429,1851,870],{"class":442},[429,1853,1854,1857,1859,1861,1864,1866],{"class":431,"line":503},[429,1855,1856],{"class":632},"            name",[429,1858,879],{"class":442},[429,1860,576],{"class":469},[429,1862,1863],{"class":473},"Title Block",[429,1865,1280],{"class":469},[429,1867,1868],{"class":442},",\n",[429,1870,1871,1874,1876,1878,1881,1883],{"class":431,"line":513},[429,1872,1873],{"class":632},"            description",[429,1875,879],{"class":442},[429,1877,576],{"class":469},[429,1879,1880],{"class":473},"A heading or section title",[429,1882,1280],{"class":469},[429,1884,1868],{"class":442},[429,1886,1887,1890,1892,1895,1897],{"class":431,"line":522},[429,1888,1889],{"class":632},"            instantAdd",[429,1891,879],{"class":442},[429,1893,1894],{"class":889}," false",[429,1896,656],{"class":442},[429,1898,1899],{"class":435},"          \u002F\u002F true = skip config dialog, add immediately\n",[429,1901,1902,1905,1907,1909],{"class":431,"line":529},[429,1903,1904],{"class":632},"            defaultData",[429,1906,879],{"class":442},[429,1908,564],{"class":442},[429,1910,1911],{"class":435},"              \u002F\u002F pre-fill fields when created\n",[429,1913,1914,1917,1919,1921,1924],{"class":431,"line":554},[429,1915,1916],{"class":632},"                title",[429,1918,879],{"class":442},[429,1920,576],{"class":469},[429,1922,1923],{"class":473},"New Title",[429,1925,582],{"class":469},[429,1927,1928],{"class":431,"line":585},[429,1929,1930],{"class":442},"            },\n",[429,1932,1933,1936,1938],{"class":431,"line":606},[429,1934,1935],{"class":632},"            classes",[429,1937,879],{"class":442},[429,1939,1940],{"class":875}," [\n",[429,1942,1943,1946,1949,1951,1954,1956,1959,1961,1963,1966,1968],{"class":431,"line":611},[429,1944,1945],{"class":442},"                {",[429,1947,1948],{"class":875}," value",[429,1950,879],{"class":442},[429,1952,1953],{"class":469}," ''",[429,1955,656],{"class":442},[429,1957,1958],{"class":875}," label",[429,1960,879],{"class":442},[429,1962,576],{"class":469},[429,1964,1965],{"class":473},"Default",[429,1967,1280],{"class":469},[429,1969,1970],{"class":442}," },\n",[429,1972,1973,1975,1977,1979,1981,1984,1986,1988,1990,1992,1994,1997,1999],{"class":431,"line":641},[429,1974,1945],{"class":442},[429,1976,1948],{"class":875},[429,1978,879],{"class":442},[429,1980,576],{"class":469},[429,1982,1983],{"class":473},"text-center",[429,1985,1280],{"class":469},[429,1987,656],{"class":442},[429,1989,1958],{"class":875},[429,1991,879],{"class":442},[429,1993,576],{"class":469},[429,1995,1996],{"class":473},"Centered",[429,1998,1280],{"class":469},[429,2000,1970],{"class":442},[429,2002,2003,2005,2007,2009,2011,2014,2016,2018,2020,2022,2024,2027,2029],{"class":431,"line":646},[429,2004,1945],{"class":442},[429,2006,1948],{"class":875},[429,2008,879],{"class":442},[429,2010,576],{"class":469},[429,2012,2013],{"class":473},"text-right",[429,2015,1280],{"class":469},[429,2017,656],{"class":442},[429,2019,1958],{"class":875},[429,2021,879],{"class":442},[429,2023,576],{"class":469},[429,2025,2026],{"class":473},"Right-aligned",[429,2028,1280],{"class":469},[429,2030,893],{"class":442},[429,2032,2033],{"class":431,"line":671},[429,2034,2035],{"class":875},"            ]\n",[429,2037,2038],{"class":431,"line":683},[429,2039,2040],{"class":442},"        },\n",[429,2042,2043,2046,2048],{"class":431,"line":1254},[429,2044,2045],{"class":632},"        Article",[429,2047,879],{"class":442},[429,2049,870],{"class":442},[429,2051,2052,2054,2056,2058,2061,2063],{"class":431,"line":1259},[429,2053,1856],{"class":632},[429,2055,879],{"class":442},[429,2057,576],{"class":469},[429,2059,2060],{"class":473},"Article",[429,2062,1280],{"class":469},[429,2064,1868],{"class":442},[429,2066,2067,2069,2071],{"class":431,"line":1298},[429,2068,1889],{"class":632},[429,2070,879],{"class":442},[429,2072,2073],{"class":889}," false\n",[429,2075,2076],{"class":431,"line":1303},[429,2077,2078],{"class":442},"        }\n",[429,2080,2081],{"class":431,"line":1338},[429,2082,2083],{"class":442},"    }\n",[429,2085,2087],{"class":431,"line":2086},22,[429,2088,2089],{"class":442},"}\n",[414,2091,2093],{"id":2092},"instantadd",[380,2094,2095],{},"instantAdd",[367,2097,2098,2099,2102],{},"When ",[380,2100,2101],{},"true",", clicking \"Add Component\" in the admin immediately inserts the component without opening a configuration dialog. Best for simple, self-contained components (e.g. a divider or spacer) where there's nothing to configure up front.",[2104,2105,2106],"style",{},"html pre.shiki code .sTBSN, html code.shiki .sTBSN{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sOvfz, html code.shiki .sOvfz{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .s-h7I, html code.shiki .s-h7I{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sGtlX, html code.shiki .sGtlX{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .seSrl, html code.shiki .seSrl{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .sLL54, html code.shiki .sLL54{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .sm4w6, html code.shiki .sm4w6{--shiki-light:#D73A49;--shiki-light-font-style:inherit;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sc2zw, html code.shiki .sc2zw{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .sRCss, html code.shiki .sRCss{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sDHlG, html code.shiki .sDHlG{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#F07178}html pre.shiki code .swWMF, html code.shiki .swWMF{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#FF9CAC}html pre.shiki code .scSvc, html code.shiki .scSvc{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#F78C6C}",{"title":398,"searchDepth":439,"depth":439,"links":2108},[2109,2110,2116,2124],{"id":387,"depth":439,"text":388},{"id":411,"depth":439,"text":412,"children":2111},[2112,2113,2114,2115],{"id":416,"depth":453,"text":417},{"id":699,"depth":453,"text":700},{"id":830,"depth":453,"text":831},{"id":907,"depth":453,"text":908},{"id":1042,"depth":439,"text":1043,"children":2117},[2118,2119,2121,2122,2123],{"id":1046,"depth":453,"text":1047},{"id":1347,"depth":453,"text":2120},"useCwaResourceManagerTab Options",{"id":1421,"depth":453,"text":1424},{"id":1488,"depth":453,"text":1489},{"id":1517,"depth":453,"text":1518},{"id":1810,"depth":439,"text":1811,"children":2125},[2126],{"id":2092,"depth":453,"text":2095},"The complete guide to building a CWA component — display template, admin manager tabs, and UI class name variants.","md",null,{},{"title":83,"description":2127},"eqs14gtbczF7G-aPtxh_nsG8XlbmsN-Vta9YDgKJotc",[2134,2136],{"title":172,"path":173,"stem":174,"description":2135,"children":-1},"How to create CWA page template components that define the content regions of a page using CwaComponentGroup and CwaPage.",{"title":179,"path":180,"stem":181,"description":2137,"children":-1},"Scaffold a new CWA display component from the command line — generates the Vue file with the correct useCwaComponent boilerplate and prints the matching API command.",1782512897604]