Components
Editable Value
Inline editable field with display/edit mode switching, popover auto-open, and change tracking.
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-editable-valueUI Primitives(1 component)
npx shadcn@latest add buttonUsage
import {
EditableValue
} from "@docyrus/ui/components/editable-value";
<EditableValue
variant="default"
size="sm"
field={...}
value={...}
onValueChange={() => {}}
onCompanionChange={() => {}}
record={...}
enumOptions={EnumOption[]}
form={...}
disabled
readOnly
showActions
explicitSave
editing
onEditingChange={() => {}}
trackChanges
changed
appSlug="..."
dataSourceSlug="..."
/>Variants
| Variant | Description |
|---|---|
default | Default style |
ghost | Ghost variant |
Sizes
| Size | Description |
|---|---|
sm | Small — min-h-7 px-1.5 py-0.5 text-xs |
default | Default — min-h-9 px-2 py-1 text-sm |
lg | Large — min-h-11 px-3 py-1.5 text-base |
API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "ghost" | "default" |
size | "sm" | "default" | "lg" | "default" |
field | IField | — |
value | unknown | — |
onValueChange | (value: unknown) => void | — |
onCompanionChange | (changes: Record<string, unknown>) => void | — |
record | Record<string, unknown> | — |
enumOptions | Array<EnumOption> | — |
form | any | — |
disabled | boolean | — |
readOnly | boolean | — |
showActions | boolean | — |
explicitSave | boolean | — |
editing | boolean | — |
onEditingChange | (editing: boolean) => void | — |
trackChanges | boolean | — |
changed | boolean | — |
editHint | "progressive" | "visible" | "progressive" |
appSlug | string | — |
dataSourceSlug | string | — |
className | string | — |