Pagination

<script setup lang="ts">
const currentPage = ref(1)
</script>

<template>
  <div class="flex overflow-auto">
    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      show-edges
    />
  </div>
</template>

<script lang="ts" setup>
const currentPage = ref(1)
</script>

<template>
  <div class="flex flex-col space-y-4">
    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="300"
      :sibling-count="3"
    />
    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="300"
      :sibling-count="1"
    />
  </div>
</template>

<script setup lang="ts">
const currentPage = ref(1)
</script>

<template>
  <div class="flex flex-col space-y-4">
    <span>Current Page: {{ currentPage }}</span>

    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      :show-list-item="false"
    />
  </div>
</template>

<script lang="ts" setup>
const currentPage = ref(1)
</script>

<template>
  <div class="flex flex-col space-y-4">
    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      size="xs"
    />

    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      size="sm"
    />

    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      size="md"
    />

    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      size="lg"
    />
  </div>
</template>

<script lang="ts" setup>
const currentPage = ref(1)
</script>

<template>
  <div class="flex flex-col">
    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      pagination-selected="solid-black"
      pagination-unselected="ghost-gray"
      show-edges
    />

    <NSeparator />

    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      pagination-selected="soft-primary"
      pagination-unselected="link-primary"
      pagination-ellipsis="text-primary"
      show-edges
    />

    <NSeparator />

    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      pagination-selected="solid-pink"
      pagination-unselected="outline-pink"
      pagination-ellipsis="text-pink"
      show-edges
    />

    <NSeparator />

    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      pagination-selected="solid-indigo"
      pagination-unselected="soft-indigo"
      pagination-ellipsis="text-indigo"
      show-edges
    />
  </div>
</template>

<script lang="ts" setup>
const currentPage = ref(1)
</script>

<template>
  <div class="flex flex-col">
    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      pagination-selected="solid-white"
      pagination-unselected="ghost-gray"
      rounded="b-2xl"
    />

    <NSeparator />

    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      pagination-selected="solid-orange"
      pagination-unselected="outline-white"
    />

    <NSeparator />

    <NPagination
      v-model:page="currentPage"
      :items-per-page="10"
      :total="100"
      pagination-selected="solid-yellow"
      pagination-unselected="outline-white"
      rounded="t-full"
    />
  </div>
</template>

<template>
  <div class="flex items-start overflow-auto">
    <NPagination
      :total="100"
      :items-per-page="10"
      :show-first="false"
      :show-last="false"
      show-edges
      rounded="none"
      :_pagination-list="{
        class: 'gap-0 divide-x divide-border border-1 border-border',
        rounded: 'r-full l-full',
      }"
      :_pagination-prev="{
        icon: false,
        square: false,
        paginationUnselected: 'ghost-white',
        label: 'Previous',
        leading: 'i-lucide-arrow-left',
      }"
      :_pagination-list-item="{
        paginationUnselected: 'ghost-white',
        paginationSelected: 'solid-black',
      }"
      :_pagination-next="{
        icon: false,
        square: false,
        paginationUnselected: 'ghost-white',
        label: 'Next',
        trailing: 'i-lucide-arrow-right',
      }"
    />
  </div>
</template>

<template>
  <div class="flex items-start overflow-auto">
    <NPagination
      :items-per-page="10"
      :total="100"
      :show-first="false"
      :show-last="false"
      show-edges
    >
      <template #prev>
        <NButton
          btn="ghost-gray"
          label="Previous"
          leading="i-lucide-chevron-left"
        />
      </template>

      <template #list-item="{ item, page }">
        <NPaginationListItem
          square
          pagination-unselected="ghost-gray"
          pagination-selected="solid-white"
          :value="item.value"
          class="gap-0"
          leading="i-lucide-hash"
          :label="`${item.value}`"
          :page
          :una="{
            btnLeading: 'text-10px',
          }"
        />
      </template>

      <template #ellipsis>
        <NIcon
          name="i-lucide-chevrons-left-right-ellipsis"
          size="xs"
        />
      </template>

      <template #next>
        <NButton
          btn="ghost-gray"
          label="Next"
          trailing="i-lucide-chevron-right"
        />
      </template>
    </NPagination>
  </div>
</template>

<script setup lang="ts">
const page = ref(3)
</script>

<template>
  <NPagination
    v-model:page="page"
    :items-per-page="20"
    :total="100"
    :show-first="false"
    :show-last="false"
    show-edges
  >
    <template #start>
      <NPaginationInfo v-slot="{ first, last, total }">
        {{ first }}–{{ last }} of {{ total }} results
      </NPaginationInfo>
    </template>

    <template #end>
      <NButton
        btn="outline-gray"
        size="sm"
        label="Export"
        leading="i-lucide-download"
      />
    </template>
  </NPagination>
</template>

<script setup lang="ts">
const page = ref(1)
const itemsPerPage = ref(10)
</script>

<template>
  <div class="flex flex-col space-y-4">
    <span>Page {{ page }}, {{ itemsPerPage }} per page</span>

    <NPagination
      v-model:page="page"
      v-model:items-per-page="itemsPerPage"
      :total="40"
      :show-first="false"
      :show-last="false"
      show-info
      show-rows-per-page
      show-edges
      :_pagination-info="{ format: 'range' }"
      :_pagination-rows-per-page="{ label: 'Rows per page' }"
    />
  </div>
</template>

<script setup lang="ts">
import type { PaginationRootEmits } from 'reka-ui'
import type { NPaginationProps } from '../../../types'
import { reactivePick } from '@vueuse/core'
import { PaginationList, PaginationRoot, useForwardPropsEmits } from 'reka-ui'
import { computed } from 'vue'
import { cn } from '../../../utils'
import PaginationEllipsis from './PaginationEllipsis.vue'
import PaginationFirst from './PaginationFirst.vue'
import PaginationInfo from './PaginationInfo.vue'
import PaginationLast from './PaginationLast.vue'
import PaginationListItem from './PaginationListItem.vue'
import PaginationNext from './PaginationNext.vue'
import PaginationPrev from './PaginationPrev.vue'
import PaginationRowsPerPage from './PaginationRowsPerPage.vue'
import { providePaginationContext } from './usePagination'

const props = withDefaults(defineProps<NPaginationProps>(), {
  showFirst: true,
  showLast: true,
  showListItem: true,
  showNext: true,
  showPrev: true,
  showInfo: false,
  showRowsPerPage: false,
  square: undefined,
})

const emits = defineEmits<PaginationRootEmits & {
  'update:itemsPerPage': [value: number]
}>()

const slots = defineSlots()

const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emits)

// The root only becomes a flex row when there is something to lay out beside
// the list. Applying the layout unconditionally gave every existing
// `NPagination` `width: 100%`, which re-flows it wherever it sits as a flex
// item beside a sibling label — the shape used throughout the table examples.
//
// Plain functions, not computeds: `slots` is an object Vue mutates in place on
// re-render rather than a reactive source, so a computed reading `slots.start`
// caches its first result forever and a conditionally-provided `#start` would
// never appear. Functions re-evaluate with each render, which is what a slot
// check needs.
function hasStart() {
  return Boolean(slots.start || props.showInfo || props.showRowsPerPage)
}
function hasEnd() {
  return Boolean(slots.end)
}
function hasRegions() {
  return hasStart() || hasEnd()
}

// reka's root context already carries `page` and `pageCount`; this supplies
// what it lacks, so `itemsPerPage` gains a write path it has no emit for
providePaginationContext({
  total: computed(() => props.total),
  itemsPerPage: computed(() => props.itemsPerPage),
  onItemsPerPageChange: (value: number) => emits('update:itemsPerPage', value),
})
</script>

<template>
  <PaginationRoot
    v-slot="{ page }"
    v-bind="rootProps"
    :class="cn(
      'pagination-root',
      hasRegions() && 'pagination-root-regions',
      props.class,
      props.una?.paginationRoot,
    )"
  >
    <div
      v-if="hasStart()"
      :class="cn('pagination-start', props.una?.paginationStart)"
    >
      <slot name="start">
        <PaginationInfo
          v-if="showInfo"
          :una
          v-bind="_paginationInfo"
        />

        <PaginationRowsPerPage
          v-if="showRowsPerPage"
          :disabled
          :una
          v-bind="_paginationRowsPerPage"
        />
      </slot>
    </div>

    <PaginationList
      v-slot="{ items }"
      :class="cn(
        'pagination-list',
        props?._paginationList?.class,
        props.una?.paginationList,
      )"
      v-bind="_paginationList"
    >
      <slot>
        <PaginationFirst
          v-if="showFirst"
          :rounded
          :size
          :pagination-selected
          :pagination-unselected
          v-bind="_paginationFirst"
          :square
          :una
        >
          <slot
            name="first"
          />
        </PaginationFirst>

        <PaginationPrev
          v-if="showPrev"
          :rounded
          :pagination-selected
          :pagination-unselected
          :size
          v-bind="_paginationPrev"
          :square
          :una
        >
          <slot
            name="prev"
          />
        </PaginationPrev>

        <template v-if="showListItem">
          <template v-for="(item, index) in items">
            <slot
              v-if="item.type === 'page'"
              name="list-item"
              :item="item"
              :page="page"
            >
              <PaginationListItem
                :key="index"
                :value="item.value"
                :page
                :rounded
                :size
                :pagination-selected
                :pagination-unselected
                :square
                :una
                v-bind="_paginationListItem"
              />
            </slot>

            <PaginationEllipsis
              v-else
              :key="item.type"
              :index="index"
              :rounded
              :size
              :pagination-ellipsis
              :square
              :una
              v-bind="_paginationEllipsis"
            >
              <slot
                name="ellipsis"
              />
            </PaginationEllipsis>
          </template>
        </template>

        <PaginationNext
          v-if="showNext"
          :rounded
          :size
          :pagination-selected
          :pagination-unselected
          v-bind="_paginationNext"
          :square
          :una
        >
          <slot
            name="next"
          />
        </PaginationNext>

        <PaginationLast
          v-if="showLast"
          :rounded
          :size
          :pagination-selected
          :pagination-unselected
          :square
          :una
          v-bind="_paginationLast"
        >
          <slot
            name="last"
          />
        </PaginationLast>
      </slot>
    </PaginationList>

    <div
      v-if="hasEnd()"
      :class="cn('pagination-end', props.una?.paginationEnd)"
    >
      <slot name="end" />
    </div>
  </PaginationRoot>
</template>

<script setup lang="ts">
import type { NPaginationEllipsisProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { PaginationEllipsis, useForwardProps } from 'reka-ui'
import { cn } from '../../../utils'

import Icon from '../../elements/Icon.vue'

const props = withDefaults(defineProps<NPaginationEllipsisProps>(), {
  paginationEllipsis: '~',
})
const delegatedProps = reactiveOmit(props, ['class'])

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <PaginationEllipsis
    v-bind="forwardedProps"
    :pagination-ellipsis
    :class="cn(
      'pagination-ellipsis-base',
      props.una?.pagination,
      props.una?.paginationEllipsis,
      props.class,
    )"
  >
    <slot>
      <Icon
        :class="cn(
          'pagination-ellipsis-icon-base',
          props.una?.paginationEllipsisIconBase,
        )"
        :name="forwardedProps?.una?.paginationEllipsisIcon || 'pagination-ellipsis-icon'"
      />
    </slot>
  </PaginationEllipsis>
</template>

<script setup lang="ts">
import type { NPaginationListItemProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { PaginationListItem, useForwardProps } from 'reka-ui'
import { computed } from 'vue'
import { cn } from '../../../utils'
import Button from '../../elements/Button.vue'

const props = withDefaults(defineProps<NPaginationListItemProps>(), {
  paginationSelected: '~',
  paginationUnselected: '~',
  square: true,
})

const delegatedProps = reactiveOmit(props, ['value'])

const label = computed(() => {
  return props.label || props.value.toString()
})

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <PaginationListItem
    :value
    as-child
    :data-selected="value === page"
  >
    <Button
      v-bind="forwardedProps"
      :label
      :class="cn(
        'pagination-list-item',
        props?.una?.pagination,
        props?.una?.paginationListItem,
        props.class,
      )"
    >
      <template v-for="(_, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>
    </Button>
  </PaginationListItem>
</template>

<script setup lang="ts">
import type { NPaginationFirstProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { PaginationFirst, useForwardProps } from 'reka-ui'
import { cn } from '../../../utils'

import Button from '../../elements/Button.vue'

const props = withDefaults(defineProps<NPaginationFirstProps>(), {
  square: true,
  paginationUnselected: '~',
  icon: true,
  label: 'pagination-first-icon',
})
const delegatedProps = reactiveOmit(props, ['class'])

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <PaginationFirst
    as-child
  >
    <slot>
      <Button
        :data-selected="false"
        v-bind="forwardedProps"
        :class="cn(
          'pagination-first',
          props.una?.pagination,
          props.una?.paginationFirst,
          props.class,
        )"
      />
    </slot>
  </PaginationFirst>
</template>

<script setup lang="ts">
import type { NPaginationLastProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { PaginationLast, useForwardProps } from 'reka-ui'
import { cn } from '../../../utils'

import Button from '../../elements/Button.vue'

const props = withDefaults(defineProps<NPaginationLastProps>(), {
  paginationUnselected: '~',
  icon: true,
  square: true,
  label: 'pagination-last-icon',
})
const delegatedProps = reactiveOmit(props, ['class'])

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <PaginationLast as-child>
    <slot>
      <Button
        :data-selected="false"
        v-bind="forwardedProps"
        :class="cn(
          'pagination-last',
          props.una?.pagination,
          props.una?.paginationLast,
          props.class,
        )"
      />
    </slot>
  </PaginationLast>
</template>

<script setup lang="ts">
import type { NPaginationNextProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { PaginationNext, useForwardProps } from 'reka-ui'
import { cn } from '../../../utils'

import Button from '../../elements/Button.vue'

const props = withDefaults(defineProps<NPaginationNextProps>(), {
  paginationUnselected: '~',
  square: true,
  icon: true,
  label: 'pagination-next-icon',
})
const delegatedProps = reactiveOmit(props, ['class'])

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <PaginationNext as-child>
    <slot>
      <Button
        :data-selected="false"
        v-bind="forwardedProps"
        :class="cn(
          'pagination-next',
          props.una?.pagination,
          props.una?.paginationNext,
          props.class,
        )"
      />
    </slot>
  </PaginationNext>
</template>

<script setup lang="ts">
import type { NPaginationPrevProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { PaginationPrev, useForwardProps } from 'reka-ui'
import { cn } from '../../../utils'

import Button from '../../elements/Button.vue'

const props = withDefaults(defineProps<NPaginationPrevProps>(), {
  paginationUnselected: '~',
  square: true,
  icon: true,
  label: 'pagination-prev-icon',
})
const delegatedProps = reactiveOmit(props, ['class'])

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <PaginationPrev as-child>
    <slot>
      <Button
        :data-selected="false"
        v-bind="forwardedProps"
        :class="cn(
          'pagination-prev',
          props.una?.pagination,
          props.una?.paginationPrev,
          props.class,
        )"
      />
    </slot>
  </PaginationPrev>
</template>

<script setup lang="ts">
import type { NPaginationInfoProps } from '../../../types'
import { injectPaginationRootContext } from 'reka-ui'
import { computed } from 'vue'
import { cn } from '../../../utils'
import { usePagination } from './usePagination'

const props = withDefaults(defineProps<NPaginationInfoProps>(), {
  format: 'page',
})

const rootContext = injectPaginationRootContext(null)
const context = usePagination(null)

const pageCount = computed(() => props.pageCount ?? rootContext?.pageCount.value ?? 0)

// `page` can legitimately sit outside the range — reka never clamps it, so a
// shrinking `total` (server-side filtering) or a growing page size leaves it
// stranded. Clamping here keeps the rendered range coherent instead of
// printing an impossible one like "Showing 401-100 of 100".
const rawPage = computed(() => props.page ?? rootContext?.page.value ?? 1)
const page = computed(() => {
  const raw = Math.max(1, rawPage.value)
  return pageCount.value > 0 ? Math.min(raw, pageCount.value) : raw
})
const itemsPerPage = computed(() => props.itemsPerPage ?? context?.itemsPerPage.value ?? 0)
const total = computed(() => props.total ?? context?.total.value)

const first = computed(() => !total.value ? 0 : (page.value - 1) * itemsPerPage.value + 1)
const last = computed(() => !total.value ? 0 : Math.min(page.value * itemsPerPage.value, total.value))

// `range` and `total` need `total`, which is optional on the root — fall back
// to the page form rather than rendering a blank or NaN
const text = computed(() => {
  if (props.format === 'range' && total.value !== undefined)
    return `Showing ${first.value}–${last.value} of ${total.value}`

  if (props.format === 'total' && total.value !== undefined)
    return `${total.value} items`

  return `Page ${page.value} of ${pageCount.value}`
})
</script>

<template>
  <div
    :class="cn(
      'pagination-info',
      props.una?.pagination,
      props.una?.paginationInfo,
      props.class,
    )"
  >
    <slot
      :page
      :page-count="pageCount"
      :total
      :items-per-page="itemsPerPage"
      :first
      :last
    >
      {{ text }}
    </slot>
  </div>
</template>

<script setup lang="ts">
import type { NPaginationRowsPerPageProps } from '../../../types'
import { reactiveOmit } from '@vueuse/core'
import { injectPaginationRootContext, useForwardProps } from 'reka-ui'
import { computed, watch } from 'vue'
import { cn } from '../../../utils'
import Select from '../../forms/select/Select.vue'
import { usePagination } from './usePagination'

const props = withDefaults(defineProps<NPaginationRowsPerPageProps>(), {
  pageSizes: () => [10, 20, 30, 40, 50],
})

const emit = defineEmits<{
  'update:itemsPerPage': [value: number]
}>()

const context = usePagination(null)
const rootContext = injectPaginationRootContext(null)

const delegatedProps = reactiveOmit(props, ['class', 'una', 'pageSizes', 'label', 'itemsPerPage'])

// forward only what was actually passed: props typed as booleans are cast to
// `false` when absent, and spreading `open: false` would pin `SelectRoot`
// controlled-closed so the select could never open
const forwardedProps = useForwardProps(delegatedProps)

const itemsPerPage = computed(() => props.itemsPerPage ?? context?.itemsPerPage.value ?? props.pageSizes[0])

function onUpdate(value: unknown) {
  const next = Number(value)

  // emit as well as writing through the context, so the part still works when
  // used on its own — outside `NPagination` the context is null
  emit('update:itemsPerPage', next)
  context?.onItemsPerPageChange(next)
}

// reka recomputes `pageCount` from the new page size but never clamps `page`,
// and Next/Last only disable on `page === pageCount` — so growing the page
// size would otherwise strand the user past the last page.
//
// This has to be a watcher rather than part of `onUpdate`. The emit above runs
// the consumer's handler synchronously, and any page that handler sets (`page
// = 1`, or TanStack's `setPageSize`, which recomputes `pageIndex` itself) has
// not reached the root's props yet — clamping inline would read a stale page
// and overwrite the consumer's choice. A watcher fires after the flush, so it
// sees the settled page and only acts if it is still out of range. It also
// stays quiet when nothing is bound to `update:itemsPerPage`, since then
// `pageCount` never changes.
watch(() => rootContext?.pageCount.value, (pageCount) => {
  if (!rootContext || !pageCount)
    return

  if (rootContext.page.value > pageCount)
    rootContext.onPageChange(pageCount)
})
</script>

<template>
  <div
    :class="cn(
      'pagination-rows-per-page',
      props.una?.pagination,
      props.una?.paginationRowsPerPage,
      props.class,
    )"
  >
    <slot name="label">
      <span
        v-if="props.label"
        :class="cn('pagination-rows-per-page-label', props.una?.paginationRowsPerPageLabel)"
      >
        {{ props.label }}
      </span>
    </slot>

    <Select
      v-bind="forwardedProps"
      :items="props.pageSizes"
      :model-value="itemsPerPage"
      :una="props.una"
      @update:model-value="onUpdate"
    />
  </div>
</template>