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

useCwaResourceModel

Two-way reactive binding between an admin form input and a single API resource field — every change PATCHes the API automatically.

Use in admin tab components (app/cwa/components/*/admin/*.vue). Not for display components.

import { useCwaResourceManagerTab, useCwaResourceModel } from '#imports'

const { exposeMeta, iri } = useCwaResourceManagerTab({ name: 'Content' })
const titleModel = useCwaResourceModel<string>(iri, 'title')

defineExpose(exposeMeta)

<template>
  <CwaUiFormLabelWrapper label="Title">
    <CwaUiFormInput v-model="titleModel.model.value" />
  </CwaUiFormLabelWrapper>
</template>

Signature

useCwaResourceModel<T>(
  iri: Ref<string | undefined>,  // from useCwaResourceManagerTab
  property: string | string[],   // the PHP entity property name (or dot-notation path)
  options?: {
    debounceTime?: number        // default: 250ms
    longWaitThreshold?: number   // ms before isBusy is considered a "long wait"; default: 5000ms
  }
)

iri — the reactive IRI ref returned by useCwaResourceManagerTab. This determines which resource is being edited.

property — the PHP entity property name (case-sensitive). Supports dot-notation for nested objects ('address.city') or an array of path segments (['address', 'city']). When the target value is an object, the entire root property is submitted as a merged PATCH.

<T> — optional TypeScript generic for the field type: <string>, <number>, <string | null>, etc.

Return value

const { model, states, resetValue } = useCwaResourceModel<string>(iri, 'title')

model.value   // the current field value (string | null | undefined)

Return	Type	Purpose
`model`	`WritableComputedRef<T \| null \| undefined>`	The field value — setting it triggers the debounced PATCH
`states.pendingSubmit`	`Ref<boolean>`	A change is queued but the debounce has not fired yet
`states.submitting`	`Ref<boolean>`	The PATCH is in flight
`states.isBusy`	`ComputedRef<boolean>`	`pendingSubmit \|\| submitting` — bind to a saving indicator
`states.isLongWait`	`Ref<boolean>`	`true` once `isBusy` has held for `longWaitThreshold` ms (default 5000)
`resetValue`	`(iri?: string) => void`	Drop the local pending value and fall back to the store value
`localValueWithIri`	`Ref<Record<string, T>>`	Per-IRI local value buffer — internal, rarely needed

Bind model.value directly in v-model:

<CwaUiFormInput v-model="titleModel.model.value" />

Setting model.value triggers a debounced PATCH. Multiple rapid changes are batched into one request.

Use states to render save feedback — for example a subtle spinner while isBusy, escalating to a "still saving…" message once isLongWait flips:

<CwaUiFormInput v-model="titleModel.model.value" />
<span v-if="titleModel.states.isLongWait.value">Still saving…</span>

Multiple fields

Call useCwaResourceModel once per field:

const { exposeMeta, iri } = useCwaResourceManagerTab({ name: 'Link' })
const labelModel = useCwaResourceModel<string>(iri, 'label')
const routeModel = useCwaResourceModel<string>(iri, 'route', { debounceTime: 0 })
const rawPathModel = useCwaResourceModel<string | null>(iri, 'rawPath')

Relation fields

Set a relation by assigning an IRI string:

const categoryModel = useCwaResourceModel<string | null>(iri, 'category')
// Assign:
categoryModel.model.value = '/component/categories/uuid'
// Clear:
categoryModel.model.value = null

Setting `debounceTime: 0`

For fields where immediate save is preferred (e.g. a route field where you need instant validation feedback), pass debounceTime: 0.

Manager Tab

Resource Upload