GrPagination

<script setup lang="ts">
import { ref } from 'vue'

import { GrBadge, GrPagination } from '@feugene/granularity'

const total = ref(137)
const page = ref(3)
const pageSize = ref(10)
</script>

<template>
  <div class="grid gap-3">
    <GrPagination v-model:page="page" v-model:page-size="pageSize" :total="total" show-total />

    <div class="flex flex-wrap gap-2">
      <GrBadge>
        Page {{ page }}
      </GrBadge>
      <GrBadge>
        Page size {{ pageSize }}
      </GrBadge>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { GrBadge, GrButton, GrPagination } from '@feugene/granularity'

const total = ref(58)
const page = ref(5)
const pageSize = ref(12)
const pageSizes = [6, 12, 24]

const pageCount = computed(() => {
  return Math.max(1, Math.ceil(total.value / pageSize.value))
})

function clampPage() {
  page.value = Math.min(page.value, pageCount.value)
}

function setTotal(nextTotal: number) {
  total.value = nextTotal
  clampPage()
}
</script>

<template>
  <div class="grid gap-4">
    <div class="flex flex-wrap gap-2">
      <GrButton size="sm" :variant="total === 58 ? 'primary' : 'outline'" @click="setTotal(58)">
        58 items
      </GrButton>
      <GrButton size="sm" :variant="total === 23 ? 'primary' : 'outline'" @click="setTotal(23)">
        23 items
      </GrButton>
      <GrButton size="sm" :variant="total === 8 ? 'primary' : 'outline'" @click="setTotal(8)">
        8 items
      </GrButton>
    </div>

    <GrPagination
      v-model:page="page"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      show-page-size
      :total="total"
      @update:page-size="clampPage"
    />

    <div class="flex flex-wrap gap-2">
      <GrBadge>
        Total {{ total }}
      </GrBadge>
      <GrBadge>
        Last available page {{ pageCount }}
      </GrBadge>
      <GrBadge>
        Active page {{ page }}
      </GrBadge>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import {
  GrBadge,
  GrButton,
  GrDataTable,
  GrPagination,
} from '@feugene/granularity'

const page = ref(1)
const pageSize = ref(5)
const pageSizes = [5, 10, 20]
const lastAction = ref('No row action yet')

const rows = Array.from({ length: 18 }, (_, index) => ({
  id: index + 1,
  customer: `Customer ${index + 1}`,
  plan: index % 2 === 0 ? 'Scale' : 'Starter',
  status: index % 3 === 0 ? 'attention' : 'healthy',
}))

const columns = [
  { key: 'customer', label: 'Customer', sortable: true },
  { key: 'plan', label: 'Plan', sortable: true },
  { key: 'status', label: 'Status', sortable: true },
  { key: 'actions', label: 'Actions', align: 'right' as const },
]

const pagedRows = computed(() => {
  const start = (page.value - 1) * pageSize.value
  return rows.slice(start, start + pageSize.value)
})

const pageCount = computed(() => Math.max(1, Math.ceil(rows.length / pageSize.value)))

function clampPage() {
  page.value = Math.min(page.value, pageCount.value)
}
</script>

<template>
  <div class="grid gap-4">
    <GrDataTable :rows="pagedRows" :columns="columns" row-key="id">
      <template #cell-status="{ row }">
        <GrBadge :tone="row.status === 'healthy' ? 'success' : 'warning'">
          {{ row.status }}
        </GrBadge>
      </template>

      <template #cell-actions="{ row }">
        <div class="flex justify-end">
          <GrButton size="sm" variant="ghost" @click="lastAction = `Opened ${row.customer}`">
            Open
          </GrButton>
        </div>
      </template>
    </GrDataTable>

    <GrPagination
      v-model:page="page"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      show-page-size
      :total="rows.length"
      @update:page-size="clampPage"
    />

    <GrBadge>
      {{ lastAction }}
    </GrBadge>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { GrBadge, GrDivider, GrPagination } from '@feugene/granularity'

const total = ref(482)
const page = ref(7)
const pageSize = ref(20)
</script>

<template>
  <div class="grid gap-4">
    <GrDivider label="compact" align="start" />
    <GrPagination v-model:page="page" v-model:page-size="pageSize" :total="total" compact />

    <GrDivider label="show-jumper" align="start" />
    <GrPagination v-model:page="page" v-model:page-size="pageSize" :total="total" show-jumper />

    <GrDivider label="compact + show-jumper" align="start" />
    <GrPagination v-model:page="page" v-model:page-size="pageSize" :total="total" compact show-jumper />

    <GrDivider />
    <div class="flex flex-wrap gap-2">
      <GrBadge>Page {{ page }}</GrBadge>
      <GrBadge>Page size {{ pageSize }}</GrBadge>
      <GrBadge>Total {{ total }}</GrBadge>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { GrPagination } from '@feugene/granularity'

const sizes = ['xs', 'sm', 'md', 'lg'] as const

const page = ref(4)
const pageSize = ref(20)
</script>

<template>
  <div class="grid gap-4">
    <div v-for="size in sizes" :key="size" class="grid gap-2">
      <div class="text-xs font-semibold text-[var(--gr-muted-fg)]">
        size="{{ size }}"
      </div>

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