88 lines
3.1 KiB
Vue
88 lines
3.1 KiB
Vue
<script setup>
|
|
import { buildAdminPaginationItems, clampAdminPage } from '~/lib/admin-pagination.js'
|
|
|
|
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(() => clampAdminPage(props.page, totalPageCount.value))
|
|
|
|
/** @type {import('vue').ComputedRef<Array<number|string>>} */
|
|
const paginationItems = computed(() => buildAdminPaginationItems(currentPage.value, totalPageCount.value))
|
|
|
|
/**
|
|
* 페이지 변경을 요청한다.
|
|
* @param {number} page - 이동할 페이지
|
|
* @returns {void}
|
|
*/
|
|
const updatePage = (page) => {
|
|
emit('update:page', clampAdminPage(page, 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>
|