The CWA is in heavy development

The CWA is still in alpha and not ready for production - some code and implementations are likely to change. If you would like to try out the CWA, please enjoy what we have provided and feel free to provide feedback, or get involved on GitHub.

DraftAdmin Manager

useCwaResourceManagerTab

Every admin tab file in 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        // hide the tab
})

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/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)

disabled is declared as boolean in CwaResourceManagerTabOptions, so passing a ComputedRef — as above — works at runtime but is a TypeScript error. Until the module widens the type, either cast it or compute a plain boolean.

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 })

Form Collection

Manage a Symfony CollectionType field — dynamically add and remove entries at runtime.

Resource Model