| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 |
- 'use strict';
- Object.defineProperty(exports, '__esModule', { value: true });
- var vue = require('vue');
- var iconsVue = require('@element-plus/icons-vue');
- var pager = require('./pager.js');
- var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
- var event = require('../../../../constants/event.js');
- var index = require('../../../../hooks/use-namespace/index.js');
- var index$1 = require('../../../../hooks/use-locale/index.js');
- const __default__ = vue.defineComponent({
- name: "ElPaginationPager"
- });
- const _sfc_main = /* @__PURE__ */ vue.defineComponent({
- ...__default__,
- props: pager.paginationPagerProps,
- emits: [event.CHANGE_EVENT],
- setup(__props, { emit }) {
- const props = __props;
- const nsPager = index.useNamespace("pager");
- const nsIcon = index.useNamespace("icon");
- const { t } = index$1.useLocale();
- const showPrevMore = vue.ref(false);
- const showNextMore = vue.ref(false);
- const quickPrevHover = vue.ref(false);
- const quickNextHover = vue.ref(false);
- const quickPrevFocus = vue.ref(false);
- const quickNextFocus = vue.ref(false);
- const pagers = vue.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 = vue.computed(() => [
- "more",
- "btn-quickprev",
- nsIcon.b(),
- nsPager.is("disabled", props.disabled)
- ]);
- const nextMoreKls = vue.computed(() => [
- "more",
- "btn-quicknext",
- nsIcon.b(),
- nsPager.is("disabled", props.disabled)
- ]);
- const tabindex = vue.computed(() => props.disabled ? -1 : 0);
- vue.watch(() => [props.pageCount, props.pagerCount, props.currentPage], ([pageCount, pagerCount, currentPage]) => {
- const halfPagerCount = (pagerCount - 1) / 2;
- let showPrev = false;
- let showNext = false;
- if (pageCount > pagerCount) {
- showPrev = currentPage > pagerCount - halfPagerCount;
- showNext = currentPage < pageCount - halfPagerCount;
- }
- quickPrevHover.value && (quickPrevHover.value = showPrev);
- quickNextHover.value && (quickNextHover.value = showNext);
- showPrevMore.value = showPrev;
- showNextMore.value = showNext;
- }, { immediate: 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(event.CHANGE_EVENT, newPage);
- }
- } else if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("more")) {
- onPagerClick(e);
- }
- }
- function onPagerClick(event$1) {
- const target = event$1.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(event.CHANGE_EVENT, newPage);
- }
- }
- return (_ctx, _cache) => {
- return vue.openBlock(), vue.createElementBlock("ul", {
- class: vue.normalizeClass(vue.unref(nsPager).b()),
- onClick: onPagerClick,
- onKeyup: vue.withKeys(onEnter, ["enter"])
- }, [
- _ctx.pageCount > 0 ? (vue.openBlock(), vue.createElementBlock("li", {
- key: 0,
- class: vue.normalizeClass([[
- vue.unref(nsPager).is("active", _ctx.currentPage === 1),
- vue.unref(nsPager).is("disabled", _ctx.disabled)
- ], "number"]),
- "aria-current": _ctx.currentPage === 1,
- "aria-label": vue.unref(t)("el.pagination.currentPage", { pager: 1 }),
- tabindex: vue.unref(tabindex)
- }, " 1 ", 10, ["aria-current", "aria-label", "tabindex"])) : vue.createCommentVNode("v-if", true),
- showPrevMore.value ? (vue.openBlock(), vue.createElementBlock("li", {
- key: 1,
- class: vue.normalizeClass(vue.unref(prevMoreKls)),
- tabindex: vue.unref(tabindex),
- "aria-label": vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.DArrowLeft), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.MoreFilled), { key: 1 }))
- ], 42, ["tabindex", "aria-label", "onMouseenter", "onMouseleave", "onFocus", "onBlur"])) : vue.createCommentVNode("v-if", true),
- (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(pagers), (pager) => {
- return vue.openBlock(), vue.createElementBlock("li", {
- key: pager,
- class: vue.normalizeClass([[
- vue.unref(nsPager).is("active", _ctx.currentPage === pager),
- vue.unref(nsPager).is("disabled", _ctx.disabled)
- ], "number"]),
- "aria-current": _ctx.currentPage === pager,
- "aria-label": vue.unref(t)("el.pagination.currentPage", { pager }),
- tabindex: vue.unref(tabindex)
- }, vue.toDisplayString(pager), 11, ["aria-current", "aria-label", "tabindex"]);
- }), 128)),
- showNextMore.value ? (vue.openBlock(), vue.createElementBlock("li", {
- key: 2,
- class: vue.normalizeClass(vue.unref(nextMoreKls)),
- tabindex: vue.unref(tabindex),
- "aria-label": vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.DArrowRight), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.MoreFilled), { key: 1 }))
- ], 42, ["tabindex", "aria-label", "onMouseenter", "onMouseleave", "onFocus", "onBlur"])) : vue.createCommentVNode("v-if", true),
- _ctx.pageCount > 1 ? (vue.openBlock(), vue.createElementBlock("li", {
- key: 3,
- class: vue.normalizeClass([[
- vue.unref(nsPager).is("active", _ctx.currentPage === _ctx.pageCount),
- vue.unref(nsPager).is("disabled", _ctx.disabled)
- ], "number"]),
- "aria-current": _ctx.currentPage === _ctx.pageCount,
- "aria-label": vue.unref(t)("el.pagination.currentPage", { pager: _ctx.pageCount }),
- tabindex: vue.unref(tabindex)
- }, vue.toDisplayString(_ctx.pageCount), 11, ["aria-current", "aria-label", "tabindex"])) : vue.createCommentVNode("v-if", true)
- ], 42, ["onKeyup"]);
- };
- }
- });
- var Pager = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "pager.vue"]]);
- exports["default"] = Pager;
- //# sourceMappingURL=pager2.js.map
|