thebet365/apps/player/src/components/desktop/Pagination.vue

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  modelValue: { type: Number, required: true },
  total: { type: Number, required: true },
  pageSize: { type: Number, default: 20 },
});

const emit = defineEmits(['update:modelValue', 'update:pageSize', 'change']);

const { t } = useI18n();

const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)));

const pages = computed(() => {
  const current = props.modelValue;
  const max = totalPages.value;
  if (max <= 7) {
    return Array.from({ length: max }, (_, i) => i + 1);
  }
  if (current <= 4) {
    return [1, 2, 3, 4, 5, '...', max];
  }
  if (current >= max - 3) {
    return [1, '...', max - 4, max - 3, max - 2, max - 1, max];
  }
  return [1, '...', current - 1, current, current + 1, '...', max];
});

function goTo(page: number | string) {
  if (typeof page === 'string') return;
  if (page < 1 || page > totalPages.value) return;
  if (page !== props.modelValue) {
    emit('update:modelValue', page);
    emit('change', page);
  }
}

function onPageSizeChange(e: Event) {
  const size = Number((e.target as HTMLSelectElement).value);
  emit('update:pageSize', size);
  emit('update:modelValue', 1);
  emit('change', 1);
}
</script>

<template>
  <div v-if="total > 0" class="pagination">
    <span class="page-total">{{ t('pagination.total', { total }) }}</span>
    <div class="page-nav">
      <button
        type="button"
        class="page-btn nav-btn"
        :disabled="modelValue === 1"
        @click="goTo(modelValue - 1)"
      >
        &lt;
      </button>
      <button
        v-for="(p, idx) in pages"
        :key="idx"
        type="button"
        class="page-btn"
        :class="{ active: p === modelValue, ellipsis: typeof p === 'string' }"
        :disabled="typeof p === 'string'"
        @click="goTo(p)"
      >
        {{ p }}
      </button>
      <button
        type="button"
        class="page-btn nav-btn"
        :disabled="modelValue === totalPages"
        @click="goTo(modelValue + 1)"
      >
        &gt;
      </button>
    </div>
    <div class="page-size-wrap">
      <select :value="pageSize" class="page-size-select" @change="onPageSizeChange">
        <option :value="10">{{ t('pagination.per_page', { size: 10 }) }}</option>
        <option :value="20">{{ t('pagination.per_page', { size: 20 }) }}</option>
        <option :value="50">{{ t('pagination.per_page', { size: 50 }) }}</option>
      </select>
    </div>
  </div>
</template>

<style scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.page-total {
  margin-right: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.page-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--border-gold-soft);
  color: var(--text);
  background: rgba(244, 162, 97, 0.05);
}

.page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--bg-body);
  font-weight: 800;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-btn.ellipsis {
  border: none;
  background: transparent;
  cursor: default;
}

.page-size-select {
  height: 32px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
}

.page-size-select:hover {
  border-color: var(--border-gold-soft);
  color: var(--text);
}
</style>