bcf6feb6025c6f24aedd475b43190e1685600ea67d10690caaf8f06edcdf0a4150e61740af288fc50ebeb0aed41d03c60375df4310368faa12692e5e66f524 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, withKeys, createCommentVNode, createBlock, Fragment, renderList, toDisplayString } from 'vue';
  2. import { DArrowLeft, MoreFilled, DArrowRight } from '@element-plus/icons-vue';
  3. import { paginationPagerProps } from './pager.mjs';
  4. import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
  5. import { CHANGE_EVENT } from '../../../../constants/event.mjs';
  6. import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
  7. import { useLocale } from '../../../../hooks/use-locale/index.mjs';
  8. const __default__ = defineComponent({
  9. name: "ElPaginationPager"
  10. });
  11. const _sfc_main = /* @__PURE__ */ defineComponent({
  12. ...__default__,
  13. props: paginationPagerProps,
  14. emits: [CHANGE_EVENT],
  15. setup(__props, { emit }) {
  16. const props = __props;
  17. const nsPager = useNamespace("pager");
  18. const nsIcon = useNamespace("icon");
  19. const { t } = useLocale();
  20. const showPrevMore = ref(false);
  21. const showNextMore = ref(false);
  22. const quickPrevHover = ref(false);
  23. const quickNextHover = ref(false);
  24. const quickPrevFocus = ref(false);
  25. const quickNextFocus = ref(false);
  26. const pagers = computed(() => {
  27. const pagerCount = props.pagerCount;
  28. const halfPagerCount = (pagerCount - 1) / 2;
  29. const currentPage = Number(props.currentPage);
  30. const pageCount = Number(props.pageCount);
  31. let showPrevMore2 = false;
  32. let showNextMore2 = false;
  33. if (pageCount > pagerCount) {
  34. if (currentPage > pagerCount - halfPagerCount) {
  35. showPrevMore2 = true;
  36. }
  37. if (currentPage < pageCount - halfPagerCount) {
  38. showNextMore2 = true;
  39. }
  40. }
  41. const array = [];
  42. if (showPrevMore2 && !showNextMore2) {
  43. const startPage = pageCount - (pagerCount - 2);
  44. for (let i = startPage; i < pageCount; i++) {
  45. array.push(i);
  46. }
  47. } else if (!showPrevMore2 && showNextMore2) {
  48. for (let i = 2; i < pagerCount; i++) {
  49. array.push(i);
  50. }
  51. } else if (showPrevMore2 && showNextMore2) {
  52. const offset = Math.floor(pagerCount / 2) - 1;
  53. for (let i = currentPage - offset; i <= currentPage + offset; i++) {
  54. array.push(i);
  55. }
  56. } else {
  57. for (let i = 2; i < pageCount; i++) {
  58. array.push(i);
  59. }
  60. }
  61. return array;
  62. });
  63. const prevMoreKls = computed(() => [
  64. "more",
  65. "btn-quickprev",
  66. nsIcon.b(),
  67. nsPager.is("disabled", props.disabled)
  68. ]);
  69. const nextMoreKls = computed(() => [
  70. "more",
  71. "btn-quicknext",
  72. nsIcon.b(),
  73. nsPager.is("disabled", props.disabled)
  74. ]);
  75. const tabindex = computed(() => props.disabled ? -1 : 0);
  76. watch(() => [props.pageCount, props.pagerCount, props.currentPage], ([pageCount, pagerCount, currentPage]) => {
  77. const halfPagerCount = (pagerCount - 1) / 2;
  78. let showPrev = false;
  79. let showNext = false;
  80. if (pageCount > pagerCount) {
  81. showPrev = currentPage > pagerCount - halfPagerCount;
  82. showNext = currentPage < pageCount - halfPagerCount;
  83. }
  84. quickPrevHover.value && (quickPrevHover.value = showPrev);
  85. quickNextHover.value && (quickNextHover.value = showNext);
  86. showPrevMore.value = showPrev;
  87. showNextMore.value = showNext;
  88. }, { immediate: true });
  89. function onMouseEnter(forward = false) {
  90. if (props.disabled)
  91. return;
  92. if (forward) {
  93. quickPrevHover.value = true;
  94. } else {
  95. quickNextHover.value = true;
  96. }
  97. }
  98. function onFocus(forward = false) {
  99. if (forward) {
  100. quickPrevFocus.value = true;
  101. } else {
  102. quickNextFocus.value = true;
  103. }
  104. }
  105. function onEnter(e) {
  106. const target = e.target;
  107. if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("number")) {
  108. const newPage = Number(target.textContent);
  109. if (newPage !== props.currentPage) {
  110. emit(CHANGE_EVENT, newPage);
  111. }
  112. } else if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("more")) {
  113. onPagerClick(e);
  114. }
  115. }
  116. function onPagerClick(event) {
  117. const target = event.target;
  118. if (target.tagName.toLowerCase() === "ul" || props.disabled) {
  119. return;
  120. }
  121. let newPage = Number(target.textContent);
  122. const pageCount = props.pageCount;
  123. const currentPage = props.currentPage;
  124. const pagerCountOffset = props.pagerCount - 2;
  125. if (target.className.includes("more")) {
  126. if (target.className.includes("quickprev")) {
  127. newPage = currentPage - pagerCountOffset;
  128. } else if (target.className.includes("quicknext")) {
  129. newPage = currentPage + pagerCountOffset;
  130. }
  131. }
  132. if (!Number.isNaN(+newPage)) {
  133. if (newPage < 1) {
  134. newPage = 1;
  135. }
  136. if (newPage > pageCount) {
  137. newPage = pageCount;
  138. }
  139. }
  140. if (newPage !== currentPage) {
  141. emit(CHANGE_EVENT, newPage);
  142. }
  143. }
  144. return (_ctx, _cache) => {
  145. return openBlock(), createElementBlock("ul", {
  146. class: normalizeClass(unref(nsPager).b()),
  147. onClick: onPagerClick,
  148. onKeyup: withKeys(onEnter, ["enter"])
  149. }, [
  150. _ctx.pageCount > 0 ? (openBlock(), createElementBlock("li", {
  151. key: 0,
  152. class: normalizeClass([[
  153. unref(nsPager).is("active", _ctx.currentPage === 1),
  154. unref(nsPager).is("disabled", _ctx.disabled)
  155. ], "number"]),
  156. "aria-current": _ctx.currentPage === 1,
  157. "aria-label": unref(t)("el.pagination.currentPage", { pager: 1 }),
  158. tabindex: unref(tabindex)
  159. }, " 1 ", 10, ["aria-current", "aria-label", "tabindex"])) : createCommentVNode("v-if", true),
  160. showPrevMore.value ? (openBlock(), createElementBlock("li", {
  161. key: 1,
  162. class: normalizeClass(unref(prevMoreKls)),
  163. tabindex: unref(tabindex),
  164. "aria-label": unref(t)("el.pagination.prevPages", { pager: _ctx.pagerCount - 2 }),
  165. onMouseenter: ($event) => onMouseEnter(true),
  166. onMouseleave: ($event) => quickPrevHover.value = false,
  167. onFocus: ($event) => onFocus(true),
  168. onBlur: ($event) => quickPrevFocus.value = false
  169. }, [
  170. (quickPrevHover.value || quickPrevFocus.value) && !_ctx.disabled ? (openBlock(), createBlock(unref(DArrowLeft), { key: 0 })) : (openBlock(), createBlock(unref(MoreFilled), { key: 1 }))
  171. ], 42, ["tabindex", "aria-label", "onMouseenter", "onMouseleave", "onFocus", "onBlur"])) : createCommentVNode("v-if", true),
  172. (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pagers), (pager) => {
  173. return openBlock(), createElementBlock("li", {
  174. key: pager,
  175. class: normalizeClass([[
  176. unref(nsPager).is("active", _ctx.currentPage === pager),
  177. unref(nsPager).is("disabled", _ctx.disabled)
  178. ], "number"]),
  179. "aria-current": _ctx.currentPage === pager,
  180. "aria-label": unref(t)("el.pagination.currentPage", { pager }),
  181. tabindex: unref(tabindex)
  182. }, toDisplayString(pager), 11, ["aria-current", "aria-label", "tabindex"]);
  183. }), 128)),
  184. showNextMore.value ? (openBlock(), createElementBlock("li", {
  185. key: 2,
  186. class: normalizeClass(unref(nextMoreKls)),
  187. tabindex: unref(tabindex),
  188. "aria-label": unref(t)("el.pagination.nextPages", { pager: _ctx.pagerCount - 2 }),
  189. onMouseenter: ($event) => onMouseEnter(),
  190. onMouseleave: ($event) => quickNextHover.value = false,
  191. onFocus: ($event) => onFocus(),
  192. onBlur: ($event) => quickNextFocus.value = false
  193. }, [
  194. (quickNextHover.value || quickNextFocus.value) && !_ctx.disabled ? (openBlock(), createBlock(unref(DArrowRight), { key: 0 })) : (openBlock(), createBlock(unref(MoreFilled), { key: 1 }))
  195. ], 42, ["tabindex", "aria-label", "onMouseenter", "onMouseleave", "onFocus", "onBlur"])) : createCommentVNode("v-if", true),
  196. _ctx.pageCount > 1 ? (openBlock(), createElementBlock("li", {
  197. key: 3,
  198. class: normalizeClass([[
  199. unref(nsPager).is("active", _ctx.currentPage === _ctx.pageCount),
  200. unref(nsPager).is("disabled", _ctx.disabled)
  201. ], "number"]),
  202. "aria-current": _ctx.currentPage === _ctx.pageCount,
  203. "aria-label": unref(t)("el.pagination.currentPage", { pager: _ctx.pageCount }),
  204. tabindex: unref(tabindex)
  205. }, toDisplayString(_ctx.pageCount), 11, ["aria-current", "aria-label", "tabindex"])) : createCommentVNode("v-if", true)
  206. ], 42, ["onKeyup"]);
  207. };
  208. }
  209. });
  210. var Pager = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "pager.vue"]]);
  211. export { Pager as default };
  212. //# sourceMappingURL=pager2.mjs.map