GrPagination

page, pageSize и total приходят снаружи, компонент только просит их изменить:

<GrPagination
  v-model:page="page"
  v-model:page-size="pageSize"
  :total="total"
/>

Именно v-model:page, а не v-model: страница — именованная модель, пропа modelValue у компонента нет. Промах видно по атрибуту modelvalue на корневом <div> — необъявленный проп уезжает туда через fallthrough; в dev-режиме компонент дополнительно печатает предупреждение.

Число страниц считается из total и pageSize. Номера усекаются по алгоритму boundary/sibling: всегда видны первая и последняя страницы плюс siblingCount соседей вокруг текущей; boundaryCount задаёт, сколько крайних показывать. Одиночный пропущенный номер рисуется номером, а не многоточием — ряд не прыгает.

Нечисловой вход подменяется дефолтом: не доехавший page даёт первую страницу, total — ноль, pageSize — единицу, и каждый случай объясняется предупреждением в dev-режиме. Без этого undefined разошёлся бы по номерам и статусу как NaN, а разметка осталась бы правдоподобной на вид.

Страница вне диапазона рендерится зажатой к [1, pageCount]: пока родитель не подтянул значение, активная кнопка всё равно есть. Когда число страниц уменьшилось (упал total или вырос pageSize), компонент дополнительно эмитит update:page с последней доступной страницей — если page живёт в URL или сторе, эта навигация произойдёт сама.

pageSizes принимает и числа, и пары «значение + подпись»:

<GrPagination :page-sizes="[10, 20, { value: 50, label: '50 / стр.' }]" show-page-size />

Пара нужна там, где подпись не равна числу. Собрать её из голого number[] было нельзя, а обходной путь — свой GrSelect рядом — терял связь с пагинацией. | showTotal | «41–60 из 137» слева от навигации | | showJumper | поле «перейти к странице»: Enter или уход фокуса применяют номер, выходящий за диапазон — клампится | | compact | вместо номеров индикатор «текущая / всего» — для мобайла и тулбаров таблиц |

Диапазон целиком заменяется слотом #total — он получает from, to и total:

<GrPagination :total="total" show-total>
  <template #total="{ from, to, total }">
    Заказы {{ from }}–{{ to }} из {{ total }}
  </template>
</GrPagination>

disabled гасит всё разом: номера, кнопки, селект и поле перехода.

Ряд пагинации — это четыре группы: итог (showTotal), размер страницы (showPageSize), навигация и переход (showJumper). Переносится ряд только между группами. Навигация — первая, назад, страницы, вперёд, последняя — один неразрывный кластер: «назад» не уезжает на другую строку от своих страниц, а на узкой ширине кластер уходит на свою строку целиком и прижимается к концу.

Шире ряда кластер не становится: если не помещается и он один, он прокручивается вбок без видимой полосы. На такой ширине включайте compact — «текущая / всего» вместо номеров — или уменьшайте siblingCount. Ориентиры для siblingCount: 1 (до семи позиций номеров) — ширина кластера с номерами:

С compact кластер при md занимает около 275px.

Сам компонент ширину не меряет: число позиций, зависящее от замера, разошлось бы между сервером и клиентом. Брейкпоинт выбирает раскладка страницы.

Корень — role="navigation" с именем из локали (gr.pagination.label). Если пагинаций на странице две (сверху и снизу таблицы), задайте ariaLabel — иначе в обзоре диктора будут два одинаковых лендмарка.

Номера лежат в списке (<ul role="list">), поэтому диктор сообщает их количество; многоточия из него исключены (aria-hidden). Текущая страница помечена aria-current="page".

Смену страницы объявляет живая область: в компактном режиме её несёт видимый индикатор, в обычном — скрытая строка «Страница N из M» (gr.pagination.status).

size (xs…lg) читается из GrConfigProvider (componentDefaults.GrPagination.size). Коробка номера — та же высота, что у GrButton того же имени (28/32/40/44): номера и навигационные кнопки стоят в одном ряду, и разойдись шкалы — ряд поедет. Поэтому же sm и md — разные размеры, а не один и тот же рост с разным кеглем.