ResizablePanels

Дві панелі з pointer resize, збереженням ширини в localStorage та доступним separator-контролем.

Приклад

Навігація

Перетягніть роздільник або використайте стрілки.

Робоча область

Розмір панелей відновиться з localStorage.

API

Props

Назва	Тип	Типово	Опис
`modelValue`	`number`	`undefined`	Розмір першої панелі у відсотках. Використовуйте через `v-model`.
`min`	`number`	`20`	Мінімальний розмір першої панелі у відсотках.
`max`	`number`	`80`	Максимальний розмір першої панелі у відсотках.
`step`	`number`	`5`	Крок зміни розміру стрілками з клавіатури.
`direction`	verticalhorizontal	`"horizontal"`	Вісь поділу: панелі поруч чи одна над одною.
`storageKey`	`string`	`undefined`	Ключ localStorage, під яким зберігається розмір між сесіями. Збережене значення читається один раз у onMounted і заявляється через звичайний `update:modelValue`; запис відбувається лише після дії користувача (drag або клавіатура) — сторонні зміни `modelValue` збереженого значення не перезаписують. Значення — голе число, тож ключ має бути версіонованим: зміна сенсу числа вимагає нового ключа, а не «захисного» парсера.
`startClass`	`string`	`undefined`	Клас першої панелі (`<section>`): напр. адаптивне приховування.
`endClass`	`string`	`undefined`	Клас другої панелі (`<section>`).
`separatorClass`	`string`	`undefined`	Клас роздільника: напр. прибрати його разом із прихованою панеллю.
`startLabel`	`string`	`"Перша панель"`	Доступна назва першої панелі.
`endLabel`	`string`	`"Друга панель"`	Доступна назва другої панелі.
`separatorLabel`	`string`	`"Змінити розмір панелей"`	Доступна назва роздільника. Він оголошений як `separator` з `aria-valuenow`, тож без назви скрінрідер зачитає лише відсоток.
`disabled`	`boolean`	`false`	—

Події

Назва	Payload	Опис
`update:modelValue`	`[value: number]`	Частка першої панелі у відсотках. Емітується після drag, клавіатури та при відновленні збереженого розміру.
`change`	`[value: number]`	Фінальне значення після keyboard або pointer дії.

Слоти

Назва	Опис
`start`	Вміст першої панелі. `size` — її поточний розмір у відсотках.
`end`	Вміст другої панелі. `size` — розмір ПЕРШОЇ панелі у відсотках.

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

Для редакторів, файлових менеджерів і dashboard, де користувачу потрібно розподіляти місце між двома одночасно важливими областями.

Збереження ширини (storage-key) — саме для таких екранів: оператор, який щодня розсуває список товарів на 40%, не має робити цього двічі. Компонент сам читає значення в onMounted і сам записує його після дії користувача — батьківській сторінці не потрібно тримати ні стан, ні власний localStorage-ключ.

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

Не використовуйте resize, якщо одна панель є тимчасовою — тоді краще Drawer. На вузьких екранах часто зрозуміліше скласти блоки вертикально без separator: для цього панелям і роздільнику можна передати адаптивні класи (start-class, end-class, separator-class), напр. max-md:hidden, і вузький екран залишиться з одною панеллю без жодного JS.

Збереження розміру

storage-key вимикає необхідність у v-model повністю: компонент зберігає останню встановлену ширину і відновлює її наступного разу.

відновлення відбувається в onMounted — перший (серверний) рендер дає дефолт, клієнтський застосовує збережене значення до першої взаємодії;
запис — лише після дії користувача (drag або клавіатура): зміни modelValue ззовні не перезаписують збережену ширину;
значення — голе число (частка першої панелі у відсотках), тож ключ версіонуйте: зміна сенсу числа вимагає нового ключа, а не парсера.

Доступність

Роздільник має role="separator", значення min/max/now і правильну orientation. Arrow-клавіші змінюють розмір на step, Home та End переходять до меж. Disabled separator вилучається з tab order.

Портування

Компонент не має зовнішніх залежностей і сам імпортує все з vue — onMounted у тому числі. У проєктах без Nuxt-автоімпортів (чистий Vite, Vitest) це різниця між «працює» і ReferenceError.

Корінь несе h-full w-full: компонент заповнює батька цілком. У flex-батьку без цього він мірявся контентом, і права панель залишала порожній хвіст.