FileHost/app/components/PaginationBar.vue

<script setup lang="ts">
type PageItem = number | 'ellipsis'

const props = withDefaults(defineProps<{
  page: number
  totalPages: number
  total: number
  unit?: string
  loading?: boolean
  pageSize?: number
  pageSizeOptions?: number[]
}>(), {
  loading: false,
  pageSizeOptions: () => [10, 20, 30, 50]
})

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

const { t } = useI18n()

const unitLabel = computed(() => props.unit ?? t('common.itemsUnit'))
const jumpPageInput = ref('')

const showMobilePageNumbers = computed(() => props.totalPages <= 5)

const visiblePages = computed<PageItem[]>(() => {
  const total = Math.max(1, props.totalPages)
  const current = Math.min(Math.max(1, props.page), total)

  if (total <= 7) {
    return Array.from({ length: total }, (_, index) => index + 1)
  }

  const pages = new Set<number>([1, total])
  for (let page = current - 1; page <= current + 1; page++) {
    if (page >= 1 && page <= total) pages.add(page)
  }

  const sorted = [...pages].sort((a, b) => a - b)
  const items: PageItem[] = []

  for (let index = 0; index < sorted.length; index++) {
    const page = sorted[index]!
    const prev = sorted[index - 1]
    if (prev !== undefined && page - prev > 1) {
      items.push('ellipsis')
    }
    items.push(page)
  }

  return items
})

const pageSizeItems = computed(() =>
  props.pageSizeOptions.map(size => ({
    label: t('pagination.perPage', { size }),
    value: size
  }))
)

watch(
  () => props.page,
  (page) => {
    jumpPageInput.value = String(page)
  },
  { immediate: true }
)

function goTo(target: number) {
  if (target < 1 || target > props.totalPages || props.loading) return
  if (target === props.page) return
  emit('update:page', target)
}

function onPageSizeChange(value: unknown) {
  const size = Number(value)
  if (!Number.isFinite(size) || size <= 0 || size === props.pageSize) return
  emit('update:pageSize', size)
}

function jumpToPage() {
  const target = Number.parseInt(jumpPageInput.value, 10)
  if (!Number.isFinite(target)) return
  goTo(target)
}

function pageButtonClass(target: number) {
  return target === props.page
    ? 'border-primary bg-primary/10 text-primary font-medium'
    : 'border-default bg-elevated text-default hover:bg-muted'
}

const navButtonClass = 'inline-flex items-center justify-center rounded-md border border-default bg-elevated text-default transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-40'
</script>

<template>
  <div
    v-if="total > 0"
    class="border-t border-default pt-4"
  >
    <div class="flex flex-col gap-3">
      <div class="flex items-center justify-between gap-2 sm:hidden">
        <p class="text-sm text-muted">
          {{ t('pagination.totalCount', { total, unit: unitLabel }) }}
        </p>
        <USelect
          v-if="pageSize !== undefined"
          :model-value="pageSize"
          :items="pageSizeItems"
          value-key="value"
          size="sm"
          class="w-[6.5rem] shrink-0"
          :aria-label="t('pagination.pageSize')"
          :disabled="loading"
          @update:model-value="onPageSizeChange"
        />
      </div>

      <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <p class="hidden text-sm text-muted sm:block">
          {{ t('pagination.totalCount', { total, unit: unitLabel }) }}
        </p>

        <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
          <USelect
            v-if="pageSize !== undefined"
            :model-value="pageSize"
            :items="pageSizeItems"
            value-key="value"
            size="sm"
            class="hidden w-[7.5rem] shrink-0 sm:block"
            :aria-label="t('pagination.pageSize')"
            :disabled="loading"
            @update:model-value="onPageSizeChange"
          />

          <div class="flex items-center justify-center gap-1 sm:justify-end">
            <button
              type="button"
              :class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
              :aria-label="t('pagination.first')"
              :disabled="page <= 1 || loading"
              @click="goTo(1)"
            >
              <UIcon
                name="i-lucide-chevrons-left"
                class="size-4"
              />
            </button>
            <button
              type="button"
              :class="[navButtonClass, 'size-9 sm:size-8']"
              :aria-label="t('pagination.prev')"
              :disabled="page <= 1 || loading"
              @click="goTo(page - 1)"
            >
              <UIcon
                name="i-lucide-chevron-left"
                class="size-4"
              />
            </button>

            <p
              v-if="!showMobilePageNumbers"
              class="min-w-[5.5rem] px-1 text-center text-sm text-muted sm:hidden"
            >
              {{ t('pagination.pageStatus', { page, totalPages }) }}
            </p>

            <template
              v-for="(target, index) in visiblePages"
              :key="`${target}-${index}`"
            >
              <span
                v-if="target === 'ellipsis'"
                class="inline-flex size-9 items-center justify-center text-sm text-muted sm:size-8"
                :class="showMobilePageNumbers ? '' : 'hidden sm:inline-flex'"
                aria-hidden="true"
              >
                …
              </span>
              <button
                v-else
                type="button"
                class="inline-flex items-center justify-center rounded-md border text-sm transition-colors disabled:pointer-events-none disabled:opacity-40"
                :class="[
                  pageButtonClass(target),
                  showMobilePageNumbers ? 'size-9 sm:size-8' : 'hidden size-8 sm:inline-flex'
                ]"
                :aria-label="t('pagination.pageNumber', { page: target })"
                :aria-current="target === page ? 'page' : undefined"
                :disabled="loading"
                @click="goTo(target)"
              >
                {{ target }}
              </button>
            </template>

            <button
              type="button"
              :class="[navButtonClass, 'size-9 sm:size-8']"
              :aria-label="t('pagination.next')"
              :disabled="page >= totalPages || loading"
              @click="goTo(page + 1)"
            >
              <UIcon
                name="i-lucide-chevron-right"
                class="size-4"
              />
            </button>
            <button
              type="button"
              :class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
              :aria-label="t('pagination.last')"
              :disabled="page >= totalPages || loading"
              @click="goTo(totalPages)"
            >
              <UIcon
                name="i-lucide-chevrons-right"
                class="size-4"
              />
            </button>
          </div>

          <form
            class="hidden items-center gap-1.5 text-sm text-muted sm:flex"
            @submit.prevent="jumpToPage"
          >
            <span>{{ t('pagination.goToPrefix') }}</span>
            <UInput
              v-model="jumpPageInput"
              type="number"
              min="1"
              :max="totalPages"
              size="sm"
              class="w-14"
              :aria-label="t('pagination.pagePlaceholder')"
              :disabled="loading"
              @blur="jumpToPage"
            />
            <span v-if="t('pagination.goToSuffix')">{{ t('pagination.goToSuffix') }}</span>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>