Mixins / foldkit-mixins-ui

Pagination

namespace · packages/mixins-ui/src/pagination.ts:1

export * as Pagination from './pagination.js'

In the guides

Members

Pagination.itemsOf

function · packages/mixins-ui/src/pagination.ts:27

function itemsOf(page: number, pageCount: number): ReadonlyArray<PaginationItem>

The stops to draw: every page while they fit, otherwise the first, the last, the current with its neighbours, and an ellipsis for each run between. Pure, so the window is testable without drawing.

Pagination.PaginationItem

type · packages/mixins-ui/src/pagination.ts:20

type PaginationItem = number | 'ellipsis'

One numbered stop, or a collapsed run of them.

Pagination.PaginationSlots

const · packages/mixins-ui/src/pagination.ts:11

const PaginationSlots: Slots.Contract<{
  readonly root: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly prev: Slot.UnnamedSlot<
    Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly next: Slot.UnnamedSlot<
    Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly page: Slot.UnnamedSlot<
    Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly ellipsis: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

Page navigation publishes its regions as slots; it owns no state, only the controlled page it is given. The application moves the page in onPage; this draws where it is. A single page — or none — draws nothing, since there is nowhere to go.

Pagination.PaginationView

interface · packages/mixins-ui/src/pagination.ts:47

interface PaginationView<Message> {
  readonly page: number
  readonly pageCount: number
  readonly onPage: (page: number) => Message
  readonly label?: string | undefined
  readonly style?: NamedStyle<typeof PaginationSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Page navigation in one call: the controlled page, how many there are, what choosing one causes, a style for its slots, and mixins beside the style. No upstream component stands behind it.

Pagination.view

function · packages/mixins-ui/src/pagination.ts:59

function view<Message>(
  options: PaginationView<Message>,
  h: HtmlBuilder<Message>,
): Html