element-plus
Version:
A Component Library for Vue 3
215 lines (212 loc) • 8.85 kB
JavaScript
import { defineComponent, ref, computed, watchEffect, openBlock, createElementBlock, normalizeClass, unref, withKeys, createCommentVNode, createBlock, Fragment, renderList, toDisplayString } from 'vue';
import { DArrowLeft, MoreFilled, DArrowRight } from '@element-plus/icons-vue';
import { paginationPagerProps } from './pager.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
import { CHANGE_EVENT } from '../../../../constants/event.mjs';
import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
import { useLocale } from '../../../../hooks/use-locale/index.mjs';
const __default__ = defineComponent({
name: "ElPaginationPager"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: paginationPagerProps,
emits: [CHANGE_EVENT],
setup(__props, { emit }) {
const props = __props;
const nsPager = useNamespace("pager");
const nsIcon = useNamespace("icon");
const { t } = useLocale();
const showPrevMore = ref(false);
const showNextMore = ref(false);
const quickPrevHover = ref(false);
const quickNextHover = ref(false);
const quickPrevFocus = ref(false);
const quickNextFocus = ref(false);
const pagers = computed(() => {
const pagerCount = props.pagerCount;
const halfPagerCount = (pagerCount - 1) / 2;
const currentPage = Number(props.currentPage);
const pageCount = Number(props.pageCount);
let showPrevMore2 = false;
let showNextMore2 = false;
if (pageCount > pagerCount) {
if (currentPage > pagerCount - halfPagerCount) {
showPrevMore2 = true;
}
if (currentPage < pageCount - halfPagerCount) {
showNextMore2 = true;
}
}
const array = [];
if (showPrevMore2 && !showNextMore2) {
const startPage = pageCount - (pagerCount - 2);
for (let i = startPage; i < pageCount; i++) {
array.push(i);
}
} else if (!showPrevMore2 && showNextMore2) {
for (let i = 2; i < pagerCount; i++) {
array.push(i);
}
} else if (showPrevMore2 && showNextMore2) {
const offset = Math.floor(pagerCount / 2) - 1;
for (let i = currentPage - offset; i <= currentPage + offset; i++) {
array.push(i);
}
} else {
for (let i = 2; i < pageCount; i++) {
array.push(i);
}
}
return array;
});
const prevMoreKls = computed(() => [
"more",
"btn-quickprev",
nsIcon.b(),
nsPager.is("disabled", props.disabled)
]);
const nextMoreKls = computed(() => [
"more",
"btn-quicknext",
nsIcon.b(),
nsPager.is("disabled", props.disabled)
]);
const tabindex = computed(() => props.disabled ? -1 : 0);
watchEffect(() => {
const halfPagerCount = (props.pagerCount - 1) / 2;
showPrevMore.value = false;
showNextMore.value = false;
if (props.pageCount > props.pagerCount) {
if (props.currentPage > props.pagerCount - halfPagerCount) {
showPrevMore.value = true;
}
if (props.currentPage < props.pageCount - halfPagerCount) {
showNextMore.value = true;
}
}
});
function onMouseEnter(forward = false) {
if (props.disabled)
return;
if (forward) {
quickPrevHover.value = true;
} else {
quickNextHover.value = true;
}
}
function onFocus(forward = false) {
if (forward) {
quickPrevFocus.value = true;
} else {
quickNextFocus.value = true;
}
}
function onEnter(e) {
const target = e.target;
if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("number")) {
const newPage = Number(target.textContent);
if (newPage !== props.currentPage) {
emit(CHANGE_EVENT, newPage);
}
} else if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("more")) {
onPagerClick(e);
}
}
function onPagerClick(event) {
const target = event.target;
if (target.tagName.toLowerCase() === "ul" || props.disabled) {
return;
}
let newPage = Number(target.textContent);
const pageCount = props.pageCount;
const currentPage = props.currentPage;
const pagerCountOffset = props.pagerCount - 2;
if (target.className.includes("more")) {
if (target.className.includes("quickprev")) {
newPage = currentPage - pagerCountOffset;
} else if (target.className.includes("quicknext")) {
newPage = currentPage + pagerCountOffset;
}
}
if (!Number.isNaN(+newPage)) {
if (newPage < 1) {
newPage = 1;
}
if (newPage > pageCount) {
newPage = pageCount;
}
}
if (newPage !== currentPage) {
emit(CHANGE_EVENT, newPage);
}
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("ul", {
class: normalizeClass(unref(nsPager).b()),
onClick: onPagerClick,
onKeyup: withKeys(onEnter, ["enter"])
}, [
_ctx.pageCount > 0 ? (openBlock(), createElementBlock("li", {
key: 0,
class: normalizeClass([[
unref(nsPager).is("active", _ctx.currentPage === 1),
unref(nsPager).is("disabled", _ctx.disabled)
], "number"]),
"aria-current": _ctx.currentPage === 1,
"aria-label": unref(t)("el.pagination.currentPage", { pager: 1 }),
tabindex: unref(tabindex)
}, " 1 ", 10, ["aria-current", "aria-label", "tabindex"])) : createCommentVNode("v-if", true),
showPrevMore.value ? (openBlock(), createElementBlock("li", {
key: 1,
class: normalizeClass(unref(prevMoreKls)),
tabindex: unref(tabindex),
"aria-label": unref(t)("el.pagination.prevPages", { pager: _ctx.pagerCount - 2 }),
onMouseenter: ($event) => onMouseEnter(true),
onMouseleave: ($event) => quickPrevHover.value = false,
onFocus: ($event) => onFocus(true),
onBlur: ($event) => quickPrevFocus.value = false
}, [
(quickPrevHover.value || quickPrevFocus.value) && !_ctx.disabled ? (openBlock(), createBlock(unref(DArrowLeft), { key: 0 })) : (openBlock(), createBlock(unref(MoreFilled), { key: 1 }))
], 42, ["tabindex", "aria-label", "onMouseenter", "onMouseleave", "onFocus", "onBlur"])) : createCommentVNode("v-if", true),
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(pagers), (pager) => {
return openBlock(), createElementBlock("li", {
key: pager,
class: normalizeClass([[
unref(nsPager).is("active", _ctx.currentPage === pager),
unref(nsPager).is("disabled", _ctx.disabled)
], "number"]),
"aria-current": _ctx.currentPage === pager,
"aria-label": unref(t)("el.pagination.currentPage", { pager }),
tabindex: unref(tabindex)
}, toDisplayString(pager), 11, ["aria-current", "aria-label", "tabindex"]);
}), 128)),
showNextMore.value ? (openBlock(), createElementBlock("li", {
key: 2,
class: normalizeClass(unref(nextMoreKls)),
tabindex: unref(tabindex),
"aria-label": unref(t)("el.pagination.nextPages", { pager: _ctx.pagerCount - 2 }),
onMouseenter: ($event) => onMouseEnter(),
onMouseleave: ($event) => quickNextHover.value = false,
onFocus: ($event) => onFocus(),
onBlur: ($event) => quickNextFocus.value = false
}, [
(quickNextHover.value || quickNextFocus.value) && !_ctx.disabled ? (openBlock(), createBlock(unref(DArrowRight), { key: 0 })) : (openBlock(), createBlock(unref(MoreFilled), { key: 1 }))
], 42, ["tabindex", "aria-label", "onMouseenter", "onMouseleave", "onFocus", "onBlur"])) : createCommentVNode("v-if", true),
_ctx.pageCount > 1 ? (openBlock(), createElementBlock("li", {
key: 3,
class: normalizeClass([[
unref(nsPager).is("active", _ctx.currentPage === _ctx.pageCount),
unref(nsPager).is("disabled", _ctx.disabled)
], "number"]),
"aria-current": _ctx.currentPage === _ctx.pageCount,
"aria-label": unref(t)("el.pagination.currentPage", { pager: _ctx.pageCount }),
tabindex: unref(tabindex)
}, toDisplayString(_ctx.pageCount), 11, ["aria-current", "aria-label", "tabindex"])) : createCommentVNode("v-if", true)
], 42, ["onKeyup"]);
};
}
});
var Pager = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "pager.vue"]]);
export { Pager as default };
//# sourceMappingURL=pager2.mjs.map