Inline
InlineSelect
Click-to-select dropdown that saves a field value change 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
<XAInlineSelect />
Displays the current option value (as a badge if the option has a color). On click, opens a USelectMenu. Saves immediately on selection change.
<XAInlineSelect
v-model="task.status"
field="status"
endpoint="/api/tasks"
:entity-id="task.id"
:options="[
{ value: 'todo', label: 'To Do', color: 'neutral' },
{ value: 'in_progress', label: 'In Progress', color: 'warning' },
{ value: 'done', label: 'Done', color: 'success' },
]"
value-key="value"
label-key="label"
placeholder="Select status..."
@save="onStatusChanged"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | String | Number | Boolean | null | Current value (v-model) |
field | String | required | Field name to update |
endpoint | String | required | API endpoint for useXCrud |
entityId | String | Number | required | Record ID |
options | Array | required | Options array (objects or primitives) |
valueKey | String | 'value' | Key used as the option value |
labelKey | String | 'label' | Key used as the display label |
placeholder | String | 'Select...' | Placeholder text |
displayClass | String | '' | Additional CSS classes for the display span |
selectClass | String | '' | Additional CSS classes for the select menu |
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | String | Number | Boolean | Optimistic value update |
save | newValue, previousValue | Save succeeded |
error | Error | Save failed |
AI Context
component: XAInlineSelect
package: "@xenterprises/nuxt-x-app"
category: Inline
auto-import: true
use-when: >
Detail pages where users should be able to change a status, category, or
other select field inline. Shows a colored badge in display mode when
options have a color key.
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
- Shows colored badge in display mode when options have a color key