[{"data":1,"prerenderedAt":1482},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Falternative-ui-variants":358,"\u002Fguides\u002Falternative-ui-variants-surround":1477},[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":32,"badge":360,"body":363,"description":1471,"extension":1472,"links":1473,"meta":1474,"navigation":533,"path":33,"seo":1475,"stem":34,"__hash__":1476},"docs\u002F2.guides\u002F4.alternative-ui-variants.md",{"label":361,"color":362},"Draft","amber",{"type":364,"value":365,"toc":1457},"minimark",[366,383,395,398,403,410,923,928,944,960,971,988,992,999,1080,1100,1102,1109,1115,1120,1127,1349,1365,1375,1384,1393,1402,1404,1408,1414,1436,1444,1453],[367,368,369,370,374,375,378,379,382],"p",{},"The same component data can render in multiple visual ways. A ",[371,372,373],"code",{},"NavigationLink"," might be a plain text link, a filled button, or a YouTube icon — all backed by the same ",[371,376,377],{},"label"," and ",[371,380,381],{},"url"," fields. An admin picks the variant from the manager panel.",[367,384,385,386,390,391,394],{},"There are two approaches. Use ",[387,388,389],"strong",{},"style classes"," for variations that are purely CSS differences. Use ",[387,392,393],{},"UI templates"," for variations that need fundamentally different markup.",[396,397],"hr",{},[399,400,402],"h2",{"id":401},"approach-1-style-classes","Approach 1: Style Classes",[367,404,405,406,409],{},"Define named class sets in ",[371,407,408],{},"useCwaComponent",". An admin can select one of these styles from the manager panel.",[411,412,417],"pre",{"className":413,"code":414,"language":415,"meta":416,"style":416},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\nimport { useCwaComponent } from '#imports'\n\nconst props = defineProps\u003CIriProp>()\n\nconst { resource, exposeMeta, getCurrentStyleName } = useCwaComponent(props, [], {\n  styles: {\n    multiple: false,\n    classes: {\n      'Default': [],\n      'Filled Button': ['bg-blue-600 text-white px-6 py-2 rounded-md'],\n      'Outlined Button': ['border border-blue-600 text-blue-600 px-6 py-2 rounded-md'],\n    }\n  }\n})\n\nconst currentStyleName = computed(() => {\n  if (!resource.value?.data) return 'Default'\n  return getCurrentStyleName(resource.value.data)\n})\n\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ca :href=\"resource?.data?.url || '#'\">\n    {{ resource?.data?.label }}\n  \u003C\u002Fa>\n\u003C\u002Ftemplate>\n","vue","",[371,418,419,455,483,507,528,535,566,571,611,623,638,648,667,694,719,725,731,740,745,768,807,829,836,841,850,860,865,875,898,904,914],{"__ignoreMap":416},[420,421,424,428,432,436,439,442,446,450,452],"span",{"class":422,"line":423},"line",1,[420,425,427],{"class":426},"sOvfz","\u003C",[420,429,431],{"class":430},"s-h7I","script",[420,433,435],{"class":434},"sGtlX"," setup",[420,437,438],{"class":434}," lang",[420,440,441],{"class":426},"=",[420,443,445],{"class":444},"seSrl","\"",[420,447,449],{"class":448},"sLL54","ts",[420,451,445],{"class":444},[420,453,454],{"class":426},">\n",[420,456,458,462,465,469,472,475,478,480],{"class":422,"line":457},2,[420,459,461],{"class":460},"sm4w6","import",[420,463,464],{"class":426}," {",[420,466,468],{"class":467},"sPB8G"," computed",[420,470,471],{"class":426}," }",[420,473,474],{"class":460}," from",[420,476,477],{"class":444}," '",[420,479,415],{"class":448},[420,481,482],{"class":444},"'\n",[420,484,486,488,491,493,496,498,500,502,505],{"class":422,"line":485},3,[420,487,461],{"class":460},[420,489,490],{"class":460}," type",[420,492,464],{"class":426},[420,494,495],{"class":467}," IriProp",[420,497,471],{"class":426},[420,499,474],{"class":460},[420,501,477],{"class":444},[420,503,504],{"class":448},"#cwa\u002Fcomposables\u002Fcwa-resource",[420,506,482],{"class":444},[420,508,510,512,514,517,519,521,523,526],{"class":422,"line":509},4,[420,511,461],{"class":460},[420,513,464],{"class":426},[420,515,516],{"class":467}," useCwaComponent",[420,518,471],{"class":426},[420,520,474],{"class":460},[420,522,477],{"class":444},[420,524,525],{"class":448},"#imports",[420,527,482],{"class":444},[420,529,531],{"class":422,"line":530},5,[420,532,534],{"emptyLinePlaceholder":533},true,"\n",[420,536,538,542,546,550,554,556,560,563],{"class":422,"line":537},6,[420,539,541],{"class":540},"swB56","const",[420,543,545],{"class":544},"sc2zw"," props",[420,547,549],{"class":548},"sVlFx"," =",[420,551,553],{"class":552},"sKpYG"," defineProps",[420,555,427],{"class":426},[420,557,559],{"class":558},"sRCss","IriProp",[420,561,562],{"class":426},">",[420,564,565],{"class":467},"()\n",[420,567,569],{"class":422,"line":568},7,[420,570,534],{"emptyLinePlaceholder":533},[420,572,574,576,578,581,584,587,589,592,594,596,598,601,603,606,608],{"class":422,"line":573},8,[420,575,541],{"class":540},[420,577,464],{"class":426},[420,579,580],{"class":544}," resource",[420,582,583],{"class":426},",",[420,585,586],{"class":544}," exposeMeta",[420,588,583],{"class":426},[420,590,591],{"class":544}," getCurrentStyleName",[420,593,471],{"class":426},[420,595,549],{"class":548},[420,597,516],{"class":552},[420,599,600],{"class":467},"(props",[420,602,583],{"class":426},[420,604,605],{"class":467}," []",[420,607,583],{"class":426},[420,609,610],{"class":426}," {\n",[420,612,614,618,621],{"class":422,"line":613},9,[420,615,617],{"class":616},"sDHlG","  styles",[420,619,620],{"class":426},":",[420,622,610],{"class":426},[420,624,626,629,631,635],{"class":422,"line":625},10,[420,627,628],{"class":616},"    multiple",[420,630,620],{"class":426},[420,632,634],{"class":633},"swWMF"," false",[420,636,637],{"class":426},",\n",[420,639,641,644,646],{"class":422,"line":640},11,[420,642,643],{"class":616},"    classes",[420,645,620],{"class":426},[420,647,610],{"class":426},[420,649,651,654,658,661,663,665],{"class":422,"line":650},12,[420,652,653],{"class":444},"      '",[420,655,657],{"class":656},"syBAL","Default",[420,659,660],{"class":444},"'",[420,662,620],{"class":426},[420,664,605],{"class":467},[420,666,637],{"class":426},[420,668,670,672,675,677,679,682,684,687,689,692],{"class":422,"line":669},13,[420,671,653],{"class":444},[420,673,674],{"class":656},"Filled Button",[420,676,660],{"class":444},[420,678,620],{"class":426},[420,680,681],{"class":467}," [",[420,683,660],{"class":444},[420,685,686],{"class":448},"bg-blue-600 text-white px-6 py-2 rounded-md",[420,688,660],{"class":444},[420,690,691],{"class":467},"]",[420,693,637],{"class":426},[420,695,697,699,702,704,706,708,710,713,715,717],{"class":422,"line":696},14,[420,698,653],{"class":444},[420,700,701],{"class":656},"Outlined Button",[420,703,660],{"class":444},[420,705,620],{"class":426},[420,707,681],{"class":467},[420,709,660],{"class":444},[420,711,712],{"class":448},"border border-blue-600 text-blue-600 px-6 py-2 rounded-md",[420,714,660],{"class":444},[420,716,691],{"class":467},[420,718,637],{"class":426},[420,720,722],{"class":422,"line":721},15,[420,723,724],{"class":426},"    }\n",[420,726,728],{"class":422,"line":727},16,[420,729,730],{"class":426},"  }\n",[420,732,734,737],{"class":422,"line":733},17,[420,735,736],{"class":426},"}",[420,738,739],{"class":467},")\n",[420,741,743],{"class":422,"line":742},18,[420,744,534],{"emptyLinePlaceholder":533},[420,746,748,750,753,755,757,760,763,766],{"class":422,"line":747},19,[420,749,541],{"class":540},[420,751,752],{"class":544}," currentStyleName",[420,754,549],{"class":548},[420,756,468],{"class":552},[420,758,759],{"class":467},"(",[420,761,762],{"class":426},"()",[420,764,765],{"class":540}," =>",[420,767,610],{"class":426},[420,769,771,774,777,780,783,786,789,792,795,798,801,803,805],{"class":422,"line":770},20,[420,772,773],{"class":460},"  if",[420,775,776],{"class":616}," (",[420,778,779],{"class":548},"!",[420,781,782],{"class":467},"resource",[420,784,785],{"class":426},".",[420,787,788],{"class":467},"value",[420,790,791],{"class":426},"?.",[420,793,794],{"class":467},"data",[420,796,797],{"class":616},") ",[420,799,800],{"class":460},"return",[420,802,477],{"class":444},[420,804,657],{"class":448},[420,806,482],{"class":444},[420,808,810,813,815,817,819,821,823,825,827],{"class":422,"line":809},21,[420,811,812],{"class":460},"  return",[420,814,591],{"class":552},[420,816,759],{"class":616},[420,818,782],{"class":467},[420,820,785],{"class":426},[420,822,788],{"class":467},[420,824,785],{"class":426},[420,826,794],{"class":467},[420,828,739],{"class":616},[420,830,832,834],{"class":422,"line":831},22,[420,833,736],{"class":426},[420,835,739],{"class":467},[420,837,839],{"class":422,"line":838},23,[420,840,534],{"emptyLinePlaceholder":533},[420,842,844,847],{"class":422,"line":843},24,[420,845,846],{"class":552},"defineExpose",[420,848,849],{"class":467},"(exposeMeta)\n",[420,851,853,856,858],{"class":422,"line":852},25,[420,854,855],{"class":426},"\u003C\u002F",[420,857,431],{"class":430},[420,859,454],{"class":426},[420,861,863],{"class":422,"line":862},26,[420,864,534],{"emptyLinePlaceholder":533},[420,866,868,870,873],{"class":422,"line":867},27,[420,869,427],{"class":426},[420,871,872],{"class":430},"template",[420,874,454],{"class":426},[420,876,878,881,884,887,889,891,894,896],{"class":422,"line":877},28,[420,879,880],{"class":426},"  \u003C",[420,882,883],{"class":430},"a",[420,885,886],{"class":434}," :href",[420,888,441],{"class":426},[420,890,445],{"class":444},[420,892,893],{"class":448},"resource?.data?.url || '#'",[420,895,445],{"class":444},[420,897,454],{"class":426},[420,899,901],{"class":422,"line":900},29,[420,902,903],{"class":467},"    {{ resource?.data?.label }}\n",[420,905,907,910,912],{"class":422,"line":906},30,[420,908,909],{"class":426},"  \u003C\u002F",[420,911,883],{"class":430},[420,913,454],{"class":426},[420,915,917,919,921],{"class":422,"line":916},31,[420,918,855],{"class":426},[420,920,872],{"class":430},[420,922,454],{"class":426},[924,925,927],"h3",{"id":926},"how-it-works","How it works",[367,929,930,935,936,939,940,943],{},[387,931,932],{},[371,933,934],{},"styles.classes"," — a map of style names to arrays of Tailwind classes. The name (e.g. ",[371,937,938],{},"'Filled Button'",") appears in the manager panel as an option. The classes are applied to ",[371,941,942],{},"uiClassNames"," on the component.",[367,945,946,951,952,955,956,959],{},[387,947,948],{},[371,949,950],{},"styles.multiple"," — ",[371,953,954],{},"false"," means the admin picks one style. ",[371,957,958],{},"true"," allows multiple styles to be combined.",[367,961,962,967,968,970],{},[387,963,964],{},[371,965,966],{},"getCurrentStyleName(resource.value.data)"," — returns the currently applied style name (e.g. ",[371,969,938],{},"). Use this to drive conditional logic — different icons, different element types, different aria attributes.",[367,972,973,976,977,980,981,984,985,987],{},[387,974,975],{},"Style classes are applied automatically"," to the component's root element — no ",[371,978,979],{},":class"," binding needed. To apply them to an inner element instead, pass ",[371,982,983],{},"{ autoClass: false }"," and bind the returned ",[371,986,942],{}," ref manually.",[924,989,991],{"id":990},"conditional-rendering-based-on-style","Conditional rendering based on style",[367,993,994,995,998],{},"For small variations — toggling an icon, changing an aria attribute, adjusting a minor class difference — using ",[371,996,997],{},"currentStyleName"," is fine:",[411,1000,1002],{"className":413,"code":1001,"language":415,"meta":416,"style":416},"\u003Ctemplate>\n  \u003C!-- Show an arrow icon only on filled buttons -->\n  \u003Ca :href=\"resource?.data?.url\">\n    {{ resource?.data?.label }}\n    \u003CArrowIcon v-if=\"currentStyleName === 'Filled Button'\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Ftemplate>\n",[371,1003,1004,1012,1018,1037,1041,1064,1072],{"__ignoreMap":416},[420,1005,1006,1008,1010],{"class":422,"line":423},[420,1007,427],{"class":426},[420,1009,872],{"class":430},[420,1011,454],{"class":426},[420,1013,1014],{"class":422,"line":457},[420,1015,1017],{"class":1016},"sTBSN","  \u003C!-- Show an arrow icon only on filled buttons -->\n",[420,1019,1020,1022,1024,1026,1028,1030,1033,1035],{"class":422,"line":485},[420,1021,880],{"class":426},[420,1023,883],{"class":430},[420,1025,886],{"class":434},[420,1027,441],{"class":426},[420,1029,445],{"class":444},[420,1031,1032],{"class":448},"resource?.data?.url",[420,1034,445],{"class":444},[420,1036,454],{"class":426},[420,1038,1039],{"class":422,"line":509},[420,1040,903],{"class":467},[420,1042,1043,1046,1049,1052,1054,1056,1059,1061],{"class":422,"line":530},[420,1044,1045],{"class":426},"    \u003C",[420,1047,1048],{"class":430},"ArrowIcon",[420,1050,1051],{"class":434}," v-if",[420,1053,441],{"class":426},[420,1055,445],{"class":444},[420,1057,1058],{"class":448},"currentStyleName === 'Filled Button'",[420,1060,445],{"class":444},[420,1062,1063],{"class":426}," \u002F>\n",[420,1065,1066,1068,1070],{"class":422,"line":537},[420,1067,909],{"class":426},[420,1069,883],{"class":430},[420,1071,454],{"class":426},[420,1073,1074,1076,1078],{"class":422,"line":568},[420,1075,855],{"class":426},[420,1077,872],{"class":430},[420,1079,454],{"class":426},[1081,1082,1084],"callout",{"icon":1083},"i-heroicons-exclamation-triangle",[367,1085,1086,1092,1093,1096,1097,1099],{},[387,1087,1088,1089,1091],{},"Don't use ",[371,1090,997],{}," to conditionally render fundamentally different HTML structure."," If you find yourself showing completely different elements, different component hierarchies, or different semantic markup based on the style name, create a ",[371,1094,1095],{},"ui\u002F"," template instead. Style names can be renamed by the developer; ",[371,1098,1095],{}," filenames are stable identifiers. Conditional markup based on a name that could change is a maintenance hazard.",[396,1101],{},[399,1103,1105,1106,1108],{"id":1104},"approach-2-ui-templates-ui-directory","Approach 2: UI Templates (",[371,1107,1095],{}," directory)",[367,1110,1111,1112,1114],{},"When a variant needs completely different HTML structure — not just different classes — create an alternative Vue file in a ",[371,1113,1095],{}," subdirectory.",[1116,1117],"diagram-file-tree",{":files":1118,"root":1119},"[{\"path\":\"NavigationLink.vue\",\"label\":\"default template\"},{\"path\":\"ui\u002FYouTube.vue\",\"label\":\"alternative template\"}]","app\u002Fcwa\u002Fcomponents\u002FNavigationLink\u002F",[924,1121,1123,1124,1126],{"id":1122},"the-ui-file","The ",[371,1125,1095],{}," file",[411,1128,1130],{"className":413,"code":1129,"language":415,"meta":416,"style":416},"\u003C!-- app\u002Fcwa\u002Fcomponents\u002FNavigationLink\u002Fui\u002FYouTube.vue -->\n\u003Ctemplate>\n  \u003Ca :href=\"resource?.data?.url\">\n    \u003CYouTubeIcon class=\"w-15 h-10\" \u002F>\n  \u003C\u002Fa>\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>()\nconst { resource, exposeMeta } = useCwaComponent(props, [], {\n  name: 'YouTube'   \u002F\u002F optional — sets the label in the admin UI selector\n})\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n",[371,1131,1132,1137,1145,1163,1184,1192,1200,1204,1224,1244,1262,1266,1284,1312,1329,1335,1341],{"__ignoreMap":416},[420,1133,1134],{"class":422,"line":423},[420,1135,1136],{"class":1016},"\u003C!-- app\u002Fcwa\u002Fcomponents\u002FNavigationLink\u002Fui\u002FYouTube.vue -->\n",[420,1138,1139,1141,1143],{"class":422,"line":457},[420,1140,427],{"class":426},[420,1142,872],{"class":430},[420,1144,454],{"class":426},[420,1146,1147,1149,1151,1153,1155,1157,1159,1161],{"class":422,"line":485},[420,1148,880],{"class":426},[420,1150,883],{"class":430},[420,1152,886],{"class":434},[420,1154,441],{"class":426},[420,1156,445],{"class":444},[420,1158,1032],{"class":448},[420,1160,445],{"class":444},[420,1162,454],{"class":426},[420,1164,1165,1167,1170,1173,1175,1177,1180,1182],{"class":422,"line":509},[420,1166,1045],{"class":426},[420,1168,1169],{"class":430},"YouTubeIcon",[420,1171,1172],{"class":434}," class",[420,1174,441],{"class":426},[420,1176,445],{"class":444},[420,1178,1179],{"class":448},"w-15 h-10",[420,1181,445],{"class":444},[420,1183,1063],{"class":426},[420,1185,1186,1188,1190],{"class":422,"line":530},[420,1187,909],{"class":426},[420,1189,883],{"class":430},[420,1191,454],{"class":426},[420,1193,1194,1196,1198],{"class":422,"line":537},[420,1195,855],{"class":426},[420,1197,872],{"class":430},[420,1199,454],{"class":426},[420,1201,1202],{"class":422,"line":568},[420,1203,534],{"emptyLinePlaceholder":533},[420,1205,1206,1208,1210,1212,1214,1216,1218,1220,1222],{"class":422,"line":573},[420,1207,427],{"class":426},[420,1209,431],{"class":430},[420,1211,435],{"class":434},[420,1213,438],{"class":434},[420,1215,441],{"class":426},[420,1217,445],{"class":444},[420,1219,449],{"class":448},[420,1221,445],{"class":444},[420,1223,454],{"class":426},[420,1225,1226,1228,1230,1232,1234,1236,1238,1240,1242],{"class":422,"line":613},[420,1227,461],{"class":460},[420,1229,490],{"class":460},[420,1231,464],{"class":426},[420,1233,495],{"class":467},[420,1235,471],{"class":426},[420,1237,474],{"class":460},[420,1239,477],{"class":444},[420,1241,504],{"class":448},[420,1243,482],{"class":444},[420,1245,1246,1248,1250,1252,1254,1256,1258,1260],{"class":422,"line":625},[420,1247,461],{"class":460},[420,1249,464],{"class":426},[420,1251,516],{"class":467},[420,1253,471],{"class":426},[420,1255,474],{"class":460},[420,1257,477],{"class":444},[420,1259,525],{"class":448},[420,1261,482],{"class":444},[420,1263,1264],{"class":422,"line":640},[420,1265,534],{"emptyLinePlaceholder":533},[420,1267,1268,1270,1272,1274,1276,1278,1280,1282],{"class":422,"line":650},[420,1269,541],{"class":540},[420,1271,545],{"class":544},[420,1273,549],{"class":548},[420,1275,553],{"class":552},[420,1277,427],{"class":426},[420,1279,559],{"class":558},[420,1281,562],{"class":426},[420,1283,565],{"class":467},[420,1285,1286,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310],{"class":422,"line":669},[420,1287,541],{"class":540},[420,1289,464],{"class":426},[420,1291,580],{"class":544},[420,1293,583],{"class":426},[420,1295,586],{"class":544},[420,1297,471],{"class":426},[420,1299,549],{"class":548},[420,1301,516],{"class":552},[420,1303,600],{"class":467},[420,1305,583],{"class":426},[420,1307,605],{"class":467},[420,1309,583],{"class":426},[420,1311,610],{"class":426},[420,1313,1314,1317,1319,1321,1324,1326],{"class":422,"line":696},[420,1315,1316],{"class":616},"  name",[420,1318,620],{"class":426},[420,1320,477],{"class":444},[420,1322,1323],{"class":448},"YouTube",[420,1325,660],{"class":444},[420,1327,1328],{"class":1016},"   \u002F\u002F optional — sets the label in the admin UI selector\n",[420,1330,1331,1333],{"class":422,"line":721},[420,1332,736],{"class":426},[420,1334,739],{"class":467},[420,1336,1337,1339],{"class":422,"line":727},[420,1338,846],{"class":552},[420,1340,849],{"class":467},[420,1342,1343,1345,1347],{"class":422,"line":733},[420,1344,855],{"class":426},[420,1346,431],{"class":430},[420,1348,454],{"class":426},[367,1350,1351,1352,1355,1356,1358,1359,1361,1362,785],{},"No extra registration is needed. The module discovers ",[371,1353,1354],{},"ui\u002FYouTube.vue"," from its file location and registers it as the ",[371,1357,1323],{}," variant automatically. When an admin selects ",[371,1360,1323],{}," in the manager panel, this file is rendered instead of ",[371,1363,1364],{},"NavigationLink.vue",[367,1366,1123,1367,1370,1371,1374],{},[371,1368,1369],{},"name"," option is purely cosmetic — it sets the human-readable label shown in the admin \"UI\" selector. Without it, the selector falls back to the raw component name (",[371,1372,1373],{},"CwaComponentNavigationLinkUiYouTube","). It does not need to match the filename.",[924,1376,1378,1379,1381,1382],{"id":1377},"when-to-use-ui-vs-stylesclasses","When to use ",[371,1380,1095],{}," vs ",[371,1383,934],{},[367,1385,1386,1392],{},[387,1387,1388,1389,1391],{},"Use a ",[371,1390,1095],{}," template when"," the variant needs different HTML structure — different elements, different child components, fundamentally different markup. The YouTube icon variant above is the classic case: it's not \"NavigationLink but with different classes,\" it's a completely different thing that happens to share the same data.",[367,1394,1395,1401],{},[387,1396,1397,1398,1400],{},"Use ",[371,1399,934],{}," when"," it's the same HTML with different Tailwind classes, or minor conditional logic (toggling an icon, changing an aria label, a small class tweak).",[396,1403],{},[399,1405,1407],{"id":1406},"real-example-navigationlink-from-the-playground","Real Example: NavigationLink from the Playground",[367,1409,1123,1410,1413],{},[371,1411,1412],{},"components-web-app"," playground shows both approaches in a single component:",[367,1415,1416,1420,1421,1423,1424,1427,1428,1431,1432,1435],{},[387,1417,1418],{},[371,1419,1364],{}," uses ",[371,1422,934],{}," with ",[371,1425,1426],{},"'Filled'",", ",[371,1429,1430],{},"'Outlined'",", and ",[371,1433,1434],{},"'Tab Group'"," — each applying different classes and conditionally showing an icon.",[367,1437,1438,1443],{},[387,1439,1440],{},[371,1441,1442],{},"NavigationLink\u002Fui\u002FYouTube.vue"," is an entirely different template that renders a YouTube logo instead of text.",[367,1445,1446,1447,1449,1450,1452],{},"An admin creating a nav region can choose: plain link, filled button, outlined button, tab, or YouTube icon — all backed by the same ",[371,1448,377],{}," + ",[371,1451,381],{}," data.",[1454,1455,1456],"style",{},"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 .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 .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}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 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 .syBAL, html code.shiki .syBAL{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#F07178}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 .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}",{"title":416,"searchDepth":457,"depth":457,"links":1458},[1459,1463,1470],{"id":401,"depth":457,"text":402,"children":1460},[1461,1462],{"id":926,"depth":485,"text":927},{"id":990,"depth":485,"text":991},{"id":1104,"depth":457,"text":1464,"children":1465},"Approach 2: UI Templates (ui\u002F directory)",[1466,1468],{"id":1122,"depth":485,"text":1467},"The ui\u002F file",{"id":1377,"depth":485,"text":1469},"When to use ui\u002F vs styles.classes",{"id":1406,"depth":457,"text":1407},"Give the same component multiple visual styles — using style class names for CSS variation or ui\u002F Vue files for fully different templates.","md",null,{},{"title":32,"description":1471},"YE0RuaMX2qer28OXOcssX1k85GRTV9Eq_guBGzekBmc",[1478,1480],{"title":28,"path":29,"stem":30,"description":1479,"children":-1},"Create a CWA component in four steps using the generator commands.",{"title":42,"path":43,"stem":44,"description":1481,"children":-1},"A high-level map of the CWA — what you get out of the box, what you write yourself, and how the three layers fit together.",1782512894926]