121 lines
3.8 KiB
Vue
121 lines
3.8 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
/** 현재 페이지 */
|
|
page: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
/** 전체 페이지 수 */
|
|
pageCount: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
/** 페이지네이션 영역 접근성 라벨 */
|
|
label: {
|
|
type: String,
|
|
default: '페이지'
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:page'])
|
|
|
|
/** @type {import('vue').ComputedRef<number>} */
|
|
const totalPageCount = computed(() => Math.max(1, Number(props.pageCount) || 1))
|
|
|
|
/** @type {import('vue').ComputedRef<number>} */
|
|
const currentPage = computed(() => Math.min(Math.max(Number(props.page) || 1, 1), totalPageCount.value))
|
|
|
|
/** @type {import('vue').ComputedRef<Array<number|string>>} */
|
|
const paginationItems = computed(() => {
|
|
const total = totalPageCount.value
|
|
const current = currentPage.value
|
|
|
|
if (total <= 7) {
|
|
return Array.from({ length: total }, (_, index) => index + 1)
|
|
}
|
|
|
|
const pages = new Set([1, total, current - 1, current, current + 1])
|
|
|
|
if (current <= 4) {
|
|
pages.add(2)
|
|
pages.add(3)
|
|
pages.add(4)
|
|
pages.add(5)
|
|
}
|
|
|
|
if (current >= total - 3) {
|
|
pages.add(total - 4)
|
|
pages.add(total - 3)
|
|
pages.add(total - 2)
|
|
pages.add(total - 1)
|
|
}
|
|
|
|
const orderedPages = [...pages].filter((page) => page >= 1 && page <= total).sort((left, right) => left - right)
|
|
return orderedPages.reduce((items, page, index) => {
|
|
const previousPage = orderedPages[index - 1]
|
|
|
|
if (previousPage && page - previousPage > 1) {
|
|
items.push(`ellipsis-${previousPage}-${page}`)
|
|
}
|
|
|
|
items.push(page)
|
|
return items
|
|
}, [])
|
|
})
|
|
|
|
/**
|
|
* 페이지 변경을 요청한다.
|
|
* @param {number} page - 이동할 페이지
|
|
* @returns {void}
|
|
*/
|
|
const updatePage = (page) => {
|
|
emit('update:page', Math.min(Math.max(Number(page) || 1, 1), totalPageCount.value))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav
|
|
v-if="totalPageCount > 1"
|
|
class="admin-pagination mt-6 flex flex-wrap items-center justify-center gap-2"
|
|
:aria-label="label"
|
|
>
|
|
<button
|
|
class="admin-pagination__arrow grid size-9 place-items-center rounded-full border border-line bg-white text-ink transition hover:border-[#c8ced3] disabled:cursor-not-allowed disabled:opacity-40"
|
|
type="button"
|
|
:disabled="currentPage <= 1"
|
|
aria-label="이전 페이지"
|
|
@click="updatePage(currentPage - 1)"
|
|
>
|
|
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="m15 18-6-6 6-6" />
|
|
</svg>
|
|
</button>
|
|
<template v-for="item in paginationItems" :key="item">
|
|
<span v-if="typeof item === 'string'" class="admin-pagination__ellipsis px-2 text-sm font-semibold text-muted">
|
|
...
|
|
</span>
|
|
<button
|
|
v-else
|
|
class="admin-pagination__page grid size-9 place-items-center rounded-full text-sm font-semibold transition"
|
|
:class="item === currentPage ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-white hover:text-ink'"
|
|
type="button"
|
|
:aria-current="item === currentPage ? 'page' : undefined"
|
|
@click="updatePage(item)"
|
|
>
|
|
{{ item }}
|
|
</button>
|
|
</template>
|
|
<button
|
|
class="admin-pagination__arrow grid size-9 place-items-center rounded-full border border-line bg-white text-ink transition hover:border-[#c8ced3] disabled:cursor-not-allowed disabled:opacity-40"
|
|
type="button"
|
|
:disabled="currentPage >= totalPageCount"
|
|
aria-label="다음 페이지"
|
|
@click="updatePage(currentPage + 1)"
|
|
>
|
|
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="m9 18 6-6-6-6" />
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
</template>
|