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 | Ref<boolean> | ComputedRef<boolean>
})

Return values

const { exposeMeta, iri, resource } = useCwaResourceManagerTab({ name: 'Title' })

Return	Type	Purpose
`exposeMeta`	object	Pass to `defineExpose` — required
`iri`	`Ref<string>`	IRI of the currently selected component; pass to `useCwaResourceModel`
`resource`	`Ref<Resource>`	The full resource object for the selected component

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`

const { exposeMeta, iri, resource } = useCwaResourceManagerTab({ name: 'Advanced' })
const isAdvanced = computed(() => resource.value?.data?.enableAdvanced === true)

useCwaResourceManagerTab({
  name: 'Advanced',
  disabled: computed(() => !isAdvanced.value)
})

Built-in tabs

The module always adds Add, Move, and Delete tabs at order < 0. Use order >= 1 to ensure your tabs appear after them.

Form Collection

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

Resource Model