◇

Editable

7 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  EditableRoot,
  EditableArea,
  EditablePreview,
  EditableInput,
  EditableEditTrigger,
  EditableSubmitTrigger,
  EditableCancelTrigger,
} from '@robonen/primitives/editable';

<EditableRoot>
  <EditableArea />
  <EditablePreview />
  <EditableInput />
  <EditableEditTrigger />
  <EditableSubmitTrigger />
  <EditableCancelTrigger />
</EditableRoot>

API Reference

EditableRoot

Root

Prop	Type	Default	Description
`modelValue`?	`string`	—	Controlled value. Use `v-model`.
`defaultValue`?	`string`	`''`	Uncontrolled initial value.
`placeholder`?	`string \| EditablePlaceholder`	—	Placeholder for edit / preview. A single string applies to both.
`activationMode`?	`EditableActivationMode`	`'focus'`	When the preview should switch to edit mode.
`submitMode`?	`EditableSubmitMode`	`'blur'`	How edits are committed.
`startWithEditMode`?	`boolean`	—	Mount in edit mode.
`selectOnFocus`?	`boolean`	—	Select the input content on focus.
`autoResize`?	`boolean`	—	Grid-based auto resize mode — preview and input share a grid cell.
`maxLength`?	`number`	—	Max input length.
`disabled`?	`boolean`	—	Disabled state.
`readonly`?	`boolean`	—	Read-only state.