Inline
InlineEdit
Click-to-edit text/number field that saves to an API endpoint via useXCrud.
Inline
The Inline category provides click-to-edit field components for detail views and data tables. Each component follows the same pattern: display mode (read-only with a subtle hover affordance) → edit mode → optimistic save via useXCrud → success/error indicator. All rollback on API failure.
Components
<XAInlineEdit />
Renders a value inline. On click, reveals a text input. On Enter or blur, sends a PATCH to the configured endpoint. Shows a spinner while saving, a green check on success, and a red error icon (with tooltip) on failure.
<XAInlineEdit
v-model="contact.name"
field="name"
endpoint="/api/contacts"
:entity-id="contact.id"
type="text"
placeholder="Enter name..."
display-class="font-medium"
@save="onSaved"
@error="onError"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | String | Number | null | Current field value (v-model) |
field | String | required | Field name to update in the API payload |
endpoint | String | required | API endpoint passed to useXCrud |
entityId | String | Number | required | Record ID for the PATCH request |
type | 'text' | 'number' | 'email' | 'tel' | 'url' | 'text' | Input type |
placeholder | String | 'Click to edit' | Placeholder shown in display and edit modes |
displayClass | String | '' | Additional CSS classes for the display span |
inputClass | String | '' | Additional CSS classes for the input element |
formatter | Function | null | Optional function to transform the display value |
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | String | Number | Optimistic value update |
save | newValue, previousValue | Save succeeded |
error | Error | Save failed |
AI Context
component: XAInlineEdit
package: "@xenterprises/nuxt-x-app"
category: Inline
auto-import: true
use-when: >
Detail/show pages where users should be able to edit individual text or
number fields without navigating to a separate edit form.
key-patterns:
- Requires field, endpoint, and entityId props
- Uses useXCrud internally — no manual API call needed
- Performs optimistic updates and reverts on failure
- Use v-model to keep the parent state in sync