InlineEdit

Текст, який перетворюється на поле редагування — патерн «клікни й правь».

Редагування на місці замість «відкрий модалку → знайди поле → збережи». Зведено з трьох незалежних реалізацій InlineEdit — рядок таблиці стає полем за кліком, Enter — зберегти, Escape — скасувати.

Приклад

Назва сайту, мови версій, головна сторінка. Типові поля, які потрібні рідко, але мають бути під рукою.

Крок 2 з 3 — клікайте по кроках або ведіть станом.

Гучність64%

Ціна2500 грн

010000

Дата публікації

АвторПерегляди

API

Props

Назва	Тип	Типово	Опис
`error`	`string`	`undefined`	Текст помилки валідації споживача. Ховає кнопку збереження.
`ariaLabel`	`string`	`"Редагувати"`	Доступна назва. Обов'язкова — кнопка без тексту.
`emptyText`	`string`	`"—"`	Порожнє значення — що показувати, коли нічого не введено.
`placeholder`	`string`	`"Введіть значення"`	—
`modelValue`	`string \| number`	—	Значення. Використовуйте через `v-model`.
`type`	numbertextdate	—	Тип редагування. `text` — довільний рядок, `number` — число з валідацією NaN, `date` — нативне date-поле (формат `YYYY-MM-DD`).
`saveOnBlur`	`boolean`	`true`	Зберігати на blur — звична поведінка рядків таблиць. `false` — зберігати лише по Enter/кліку поза полем (Enter → commit, Escape → cancel у будь-якому разі).

Події

Назва	Payload	Опис
`update:modelValue`	`[value: string \| number]`	Значення після підтвердження. Використовуйте через `v-model`.
`edit`	`[]`	Редагування почалось.
`save`	`[value: string \| number]`	Зміну підтверджено (Enter, blur або клік поза полем).
`cancel`	`[]`	Редагування скасовано (Escape), значення не змінилось.

Слоти

Назва	Опис
`display`	Власний рендер відображуваного значення.

Коли використовувати

Рядки таблиць і карток з поодинокими правками: автор сторінки, кількість переглядів, назва в списку. Тип number валідує NaN і не емітує його.

saveOnBlur (типово) — зберігає по втраті фокуса: звична поведінка таблиць. saveOnBlur=false — blur скасовує, зберігає лише Enter.

Коли НЕ використовувати

Для полів, які редагуються РАЗОМ з іншими в одній формі — там звичайний Input і спільна кнопка «Зберегти».

Не для великих текстів: рядок у таблиці — не місце для абзаців.

Кнопка-рядок має aria-label з поточним значенням; поле — те самим ім'ям. Escape завжди скасовує і не «протікає» в модалку навколо (stopPropagation). Порожнє значення показується як emptyText, а не зникає. Після Enter або Escape фокус повертається на кнопку-рядок; звичайний blur не перехоплює фокус. Помилка пов'язана з полем через aria-describedby і блокує підтвердження, доки споживач її не прибере.