simrsx-fe/app/components/pub/custom-ui/pagination/pagination.vue

<script setup lang="ts">
import type { PaginationMeta } from './pagination.type'
import {
  Pagination,
  PaginationEllipsis,
  PaginationFirst,
  PaginationLast,
  PaginationList,
  PaginationListItem,
  PaginationNext,
  PaginationPrev,
} from '~/components/pub/ui/pagination'

interface Props {
  paginationMeta: PaginationMeta
  onPageChange?: (page: number) => void
  showInfo?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  onPageChange: undefined,
  showInfo: true,
})

const emit = defineEmits<{
  pageChange: [page: number]
}>()

function handlePageChange(page: number) {
  if (props.onPageChange) {
    props.onPageChange(page)
  }
  emit('pageChange', page)
}

function handleFirst() {
  if (props.paginationMeta.hasPrev) {
    handlePageChange(1)
  }
}

function handlePrev() {
  if (props.paginationMeta.hasPrev) {
    handlePageChange(props.paginationMeta.page - 1)
  }
}

function handleNext() {
  if (props.paginationMeta.hasNext) {
    handlePageChange(props.paginationMeta.page + 1)
  }
}

function handleLast() {
  if (props.paginationMeta.hasNext) {
    handlePageChange(props.paginationMeta.totalPage)
  }
}

// Computed properties for formatted numbers
const formattedRecordCount = computed(() => {
  const count = props.paginationMeta.recordCount
  if (count == null || count === undefined) return '0'
  return Number(count).toLocaleString('id-ID')
})

const startRecord = computed(() => {
  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
})

const endRecord = computed(() => {
  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
})

// Function to determine button width based on page number
function getButtonClass(pageNumber: number) {
  const digits = pageNumber.toString().length

  if (digits >= 4) { // 1000+ (1k+)
    return 'h-9 px-4 min-w-12'
  } else if (digits === 3) { // 100-999
    return 'h-9 px-3 min-w-10'
  } else { // 1-99
    return 'w-9 h-9 p-0'
  }
}
</script>

<template>
  <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
    <!-- Info text -->
    <div v-if="showInfo" class="text-sm text-muted-foreground shrink-0">
      Menampilkan {{ startRecord }}
      hingga {{ endRecord }}
      dari {{ formattedRecordCount }} data
    </div>
    <div v-else class="shrink-0"></div>

    <!-- Spacer untuk memastikan ada ruang di tengah -->
    <div class="flex-1 min-w-4"></div>

    <!-- Pagination controls -->
    <div class="shrink-0">
      <Pagination
v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
        :items-per-page="paginationMeta.pageSize" show-edges
>
        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
          <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
          <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />

          <template v-for="(item, index) in items">
            <PaginationListItem
v-if="item.type === 'page'" :key="index" :value="item.value" as-child
              @click="handlePageChange(item.value)"
>
              <Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
                {{ item.value }}
              </Button>
            </PaginationListItem>
            <PaginationEllipsis v-else :key="item.type" :index="index" />
          </template>

          <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
          <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
        </PaginationList>
      </Pagination>
    </div>
  </div>
</template>