nuxt-x-app

Inline

Inline editing components that let users edit field values in place with optimistic updates and automatic API persistence.

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

`<XAInlineToggle />`

A USwitch that immediately PATCHes a boolean field on toggle. Optimistically updates the value then reverts on API failure. Shows a text label next to the switch that reflects the current state.

<XAInlineToggle
  v-model="record.isActive"
  field="isActive"
  endpoint="/api/records"
  :entity-id="record.id"
  true-label="Active"
  false-label="Inactive"
  :show-label="true"
  size="sm"
  @save="onToggled"
/>

Props

Prop	Type	Default	Description
`modelValue`	`Boolean`	`false`	Current boolean value (`v-model`)
`field`	`String`	required	Field name to update
`endpoint`	`String`	required	API endpoint for `useXCrud`
`entityId`	`String \| Number`	required	Record ID
`trueLabel`	`String`	`'Yes'`	Label text when value is `true`
`falseLabel`	`String`	`'No'`	Label text when value is `false`
`showLabel`	`Boolean`	`true`	Show text label next to switch
`labelClass`	`String`	`'text-sm'`	Additional CSS classes for the label
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	Switch size

Emits

Event	Payload	Description
`update:modelValue`	`Boolean`	Optimistic value update
`save`	`newValue, previousValue`	Save succeeded
`error`	`Error`	Save failed

`<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

`<XAInlineDate />`

Displays a formatted date inline with a calendar icon. On click, opens a popover with a native <input type="date"> plus Clear/Cancel/Save buttons. Saves on the Save button click.

<XAInlineDate
  v-model="task.dueDate"
  field="dueDate"
  endpoint="/api/tasks"
  :entity-id="task.id"
  placeholder="Set due date..."
  :show-icon="true"
  :date-format="{ dateStyle: 'medium' }"
  @save="onDateSaved"
/>

Props

Prop	Type	Default	Description
`modelValue`	`String \| Date`	`null`	Current date value (`v-model`)
`field`	`String`	required	Field name to update
`endpoint`	`String`	required	API endpoint for `useXCrud`
`entityId`	`String \| Number`	required	Record ID
`placeholder`	`String`	`'Select date...'`	Placeholder shown when no date is set
`displayClass`	`String`	`''`	Additional CSS classes for the display span
`showIcon`	`Boolean`	`true`	Show calendar icon in display mode
`dateFormat`	`Object`	`{ dateStyle: 'medium' }`	`Intl.DateTimeFormat` options for the display value

Emits

Event	Payload	Description
`update:modelValue`	`String \| Date`	Optimistic value update
`save`	`newValue, previousValue`	Save succeeded
`error`	`Error`	Save failed

AI Context

category: Inline
package: "@xenterprises/nuxt-x-app"
components:
  - XAInlineEdit
  - XAInlineToggle
  - XAInlineSelect
  - XAInlineDate
use-when: >
  Detail/show pages where users should be able to edit individual fields
  without navigating to a separate edit form. Great for status fields,
  boolean flags, names, dates, and any field that benefits from immediate
  in-context editing.
key-patterns:
  - All inline components require field, endpoint, and entityId props
  - All use useXCrud internally — no manual API call needed
  - All perform optimistic updates and revert on failure
  - Use v-model to keep the parent state in sync
  - XAInlineSelect shows a colored badge in display mode when options have a color key

Edit this pageorReport an issue

Fmt

Lightweight display formatters for dates, currency, phone numbers, addresses, maps, percentages, file sizes, and structured data.

Kanban

Drag-and-drop Kanban board with configurable columns, card metadata, mobile column switching, and useXCrud integration.