useCwaResourceManagerTab
Every admin tab file in app/app/cwa/components/*/admin/ must call this composable. It registers the file as a tab and returns the IRI of whatever component is currently selected.
import { useCwaResourceManagerTab } from '#imports'
const { exposeMeta, iri } = useCwaResourceManagerTab({ name: 'Content' })
defineExpose(exposeMeta)
Signature
useCwaResourceManagerTab(options: {
name: string // tab label in the manager panel
order?: number // sort position; lower = left (optional)
disabled?: boolean | Ref<boolean> // hide the tab
})
Parameters
| Parameter | Type | Description |
|---|---|---|
options.name | string | The tab's label in the manager panel |
options.order | number | Sort position; lower numbers appear first. See Built-in tabs |
options.disabled | boolean | Ref<boolean> | Hide the tab. A plain boolean is read once at setup; pass a ref or computed to toggle it. See Conditional disabled |
Return Values
const { exposeMeta, iri, resource } = useCwaResourceManagerTab({ name: 'Title' })
| Return | Type | Purpose |
|---|---|---|
exposeMeta | object | Pass to defineExpose — required |
iri | ComputedRef<string | undefined> | IRI of the currently selected component; pass to useCwaResourceModel |
resource | ComputedRef<Resource | undefined> | The full resource object for the selected component |
$cwa | CwaComposable | The CWA instance |
createComputedState | <T>(propName: string, initialValue?: T) => WritableComputedRef<T> | A writable computed backed by the resource stack manager's shared tab state — used by the built-in Order tab |
Both iri and resource are undefined when nothing is selected, which is why useCwaResourceModel accepts Ref<string | undefined>.
defineExpose(exposeMeta) is required in every admin tab file.
iri is used as the first argument to useCwaResourceModel:
const { exposeMeta, iri } = useCwaResourceManagerTab({ name: 'Title' })
const titleModel = useCwaResourceModel<string>(iri, 'title')
Multiple Tabs
Each admin tab is a separate file. Each file calls useCwaResourceManagerTab with its own name:
app/app/cwa/components/Article/admin/
Content.vue → useCwaResourceManagerTab({ name: 'Content', order: 1 })
Media.vue → useCwaResourceManagerTab({ name: 'Media', order: 2 })
Settings.vue → useCwaResourceManagerTab({ name: 'Settings', order: 3 })
All appear as tabs in the manager panel when an Article component is selected.
Conditional disabled
Call the composable once — only the exposeMeta you pass to defineExpose is read by the manager, so a second call to set disabled has no effect. Derive the condition from the selected resource before the call:
const cwa = useCwa()
const currentIri = cwa.admin.resourceStackManager.currentIri
const isAdvanced = computed(() =>
currentIri.value
? cwa.resources.getResource(currentIri.value).value?.data?.enableAdvanced === true
: false,
)
const { exposeMeta } = useCwaResourceManagerTab({
name: 'Advanced',
disabled: computed(() => !isAdvanced.value),})
defineExpose(exposeMeta)
Built-in Tabs
The module adds its own tabs depending on the selected resource — Info (order 51), plus UI, Order and Publish for components, Group for component groups, and Dynamic Component / Data Placeholder for positions. All of them use DEFAULT_TAB_ORDER (50), exported from #cwa/admin/manager-tabs-resolver.
Tabs are sorted ascending by order, and a tab with no order is treated as 0. So use an order below 50 to appear before the built-ins, and above 51 to appear after them:
import { DEFAULT_TAB_ORDER } from '#cwa/admin/manager-tabs-resolver'
useCwaResourceManagerTab({ name: 'Content', order: DEFAULT_TAB_ORDER + 10 })