SkyPagination

Посторінкова навігація в стилі таблиць адмінки: селектор кількості на сторінці, далі номери зі згортанням у «…».

Компонент нічого не завантажує — лише повідомляє, що обрали. Дані тягне викликач.

Демо

Приклад

<script setup>
import { ref } from 'vue'
import { SkyPagination } from '@skyservice-developers/vue-dev-kit'

const page = ref(1)
const pageSize = ref(25)
const total = ref(0)

function reload() { /* запит із page і pageSize */ }
</script>

<template>
  <SkyPagination
    :total="total"
    :page="page"
    :page-size="pageSize"
    :all-label="(n) => `Усі ${n}`"
    @update:page="page = $event; reload()"
    @update:page-size="pageSize = $event; page = 1; reload()"
  />
</template>

Скидай page на 1, коли змінився pageSize — інакше поточна сторінка може опинитись за межами нової кількості. Компонент цього не робить сам: він не знає, чи ти хочеш лишитись приблизно на тому самому місці.

Props

Prop	Тип	За замовчуванням	Опис
total	Number	—	Скільки всього записів у вибірці, не на сторінці
page	Number	—	Поточна сторінка, з одиниці
pageSize	Number	—	Записів на сторінці
pageSizeOptions	Number[]	[5, 10, 25, 50, 100, 200, 500, 750, 1000]	Варіанти селектора; лишаються тільки менші за total
allLabel	(total) => String	—	Підпис пункту «показати все». Без нього пункту немає
allLimit	Number	1000	До якої кількості пропонувати «показати все»
siblings	Number	1	Скільки сусідніх сторінок показувати обабіч поточної
disabled	Boolean	false	Вимкнений стан (наприклад, поки триває запит)

Events

Event	Payload	Коли
update:page	Number	Клік по номеру сторінки
update:pageSize	Number	Вибір у селекторі кількості

Що саме відтворено з адмінки

Метрики зняті вимірюванням живої розмітки .pagesBar, а не на око:

смуга	48px, 12pt, line-height: 15px
селектор	обгортка 38px із рамкою #a9a9a9 і радіусом 5px, усередині кнопка #f8f9fa, падінги 6px 12px, line-height: 24px
значення	#106090, вага 500
стрілка	бокс 20×8, фон 19×12, повернутий на 180°
номер	падінги 10px 10px 11px, margin-right: 1px, радіус 5px, #106090, вага 500
поточний	те саме плюс рамка #a9a9a9. Колір той самий #106090 — в адмінці .pagesBar .pageButton перебиває .pageButton_current за специфічністю
наведення на номер	лише підкреслення: у адмінці це <a>, і Bootstrap лишає йому саме його
меню	padding: 0, білий фон, рамка rgba(0,0,0,.15), радіус 4px, без тіні, min-width: 160px
пункт меню	<li> — 5px, кнопка — 4px 24px, колір #212529
наведення на пункт	фон #0e7fe1, текст білий

Падінги поточної сторінки навмисно не компенсовані під рамку: в адмінці вона теж на 2px вища за сусідні, і центрування по флексу це ховає.

Мало записів

Коли все вміщається на одну сторінку, номери не малюються — самотня кнопка «1» нічого не дає. Лишається тільки селектор кількості, і то лише якщо в ньому є з чого вибирати.

Розмір сторінки, більший за total, показується як «показати все», а не числом: «50» при восьми записах виглядає як помилка.

Коли не підійде

Потрібен total. Для курсорних джерел (Shopify GraphQL і подібні), де загальна кількість невідома, а вперед ведуть тільки курсори, номери сторінок неможливі в принципі — там потрібна навігація «назад / далі».

CSS-змінні

Змінна	За замовчуванням	Опис
--sky-pagination-height	48px	Висота панелі
--sky-pagination-font-size	12pt	Розмір тексту
--sky-pagination-accent	#106090	Колір номерів і селектора
--sky-pagination-border	#a9a9a9	Рамка поточної сторінки й селектора
--sky-pagination-size-bg	#f8f9fa	Фон кнопки селектора