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