2358860201de681eefb419c16a23ab8fb83ab5fc339936d6e68eb3ef5dba6301cb906aa18044ba8d66fb2b288acbb50bd5bc4774b20d38a6d54b95d1af4955 9.1 KB

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