GrPagination

page, pageSize and total arrive from the outside, and the component only asks for them to be changed:

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

Precisely v-model:page and not v-model: the page is a named model, and the component has no modelValue prop. A miss is visible as a modelvalue attribute on the root <div> — an undeclared prop travels there through fallthrough; in dev mode the component additionally prints a warning.

The number of pages is computed from total and pageSize. The numbers are truncated by the boundary/sibling algorithm: the first and the last pages are always visible plus siblingCount neighbours around the current one; boundaryCount sets how many of the edge ones to show. A single skipped number is drawn as a number rather than as an ellipsis — the row does not jump.

A non-numeric input is replaced by the default: a page that did not arrive gives the first page, total gives zero and pageSize gives one, and every case is explained with a warning in dev mode. Without that an undefined would spread across the numbers and the status as NaN, while the markup would stay plausible to the eye.

A page out of range is rendered clamped to [1, pageCount]: until the parent has pulled the value up, there is an active button all the same. When the number of pages has decreased (total fell or pageSize grew), the component additionally emits update:page with the last available page — if page lives in the URL or in a store, that navigation will happen by itself.

pageSizes accepts both numbers and “value + label” pairs:

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

A pair is needed where the label is not equal to the number. It could not be assembled from a bare number[], and the workaround — a GrSelect of your own beside it — lost the link with the pagination. | showTotal | “41–60 of 137” to the left of the navigation | | showJumper | a “go to page” field: Enter or the loss of focus applies the number, and one out of range is clamped | | compact | a “current / total” indicator instead of the numbers — for mobile and for table toolbars |

The range as a whole is replaced by the #total slot — it receives from, to and total:

<GrPagination :total="total" show-total>
  <template #total="{ from, to, total }">
    Orders {{ from }}–{{ to }} of {{ total }}
  </template>
</GrPagination>

disabled dims everything at once: the numbers, the buttons, the select and the jump field.

A pagination row consists of four groups: the total (showTotal), the page size (showPageSize), the navigation and the jump (showJumper). The row wraps only between the groups. The navigation — first, back, the pages, forward, last — is one unbreakable cluster: “back” does not move to another line away from its pages, and at a narrow width the cluster moves to a line of its own as a whole and is pressed to the end.

The cluster never becomes wider than the row: if it does not fit even on its own, it scrolls sideways without a visible bar. At such a width switch on compact — “current / total” instead of the numbers — or reduce siblingCount. Reference points for siblingCount: 1 (up to seven number positions) — the width of the cluster with the numbers:

With compact the cluster at md takes about 275px.

The component does not measure the width itself: a number of positions that depended on a measurement would differ between the server and the client. The breakpoint is chosen by the page layout.

The root is a role="navigation" with a name from the locale (gr.pagination.label). If there are two paginations on the page (above and below a table), set ariaLabel — otherwise there will be two identical landmarks in the overview of a screen reader.

The numbers lie in a list (<ul role="list">), so a screen reader reports their number; the ellipses are excluded from it (aria-hidden). The current page is marked aria-current="page".

A change of page is announced by a live area: in the compact mode it is carried by the visible indicator, and in the ordinary one by a hidden “Page N of M” string (gr.pagination.status).

size (xs…lg) is read from GrConfigProvider (componentDefaults.GrPagination.size). The box of a number is the same height as a GrButton of the same name (28/32/40/44): the numbers and the navigation buttons stand in one row, and were the scales to diverge, the row would drift. That is also why sm and md are different sizes rather than the same height with a different type size.