pagination.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var iconsVue = require('@element-plus/icons-vue');
  5. require('../../../utils/index.js');
  6. require('../../../hooks/index.js');
  7. require('../../../tokens/index.js');
  8. var prev = require('./components/prev2.js');
  9. var next = require('./components/next2.js');
  10. var sizes = require('./components/sizes2.js');
  11. var jumper = require('./components/jumper2.js');
  12. var total = require('./components/total2.js');
  13. var pager = require('./components/pager2.js');
  14. var runtime = require('../../../utils/vue/props/runtime.js');
  15. var core = require('@vueuse/core');
  16. var typescript = require('../../../utils/typescript.js');
  17. var icon = require('../../../utils/vue/icon.js');
  18. var index = require('../../../hooks/use-locale/index.js');
  19. var index$1 = require('../../../hooks/use-namespace/index.js');
  20. var pagination = require('../../../tokens/pagination.js');
  21. var error = require('../../../utils/error.js');
  22. const isAbsent = (v) => typeof v !== "number";
  23. const paginationProps = runtime.buildProps({
  24. total: Number,
  25. pageSize: Number,
  26. defaultPageSize: Number,
  27. currentPage: Number,
  28. defaultCurrentPage: Number,
  29. pageCount: Number,
  30. pagerCount: {
  31. type: Number,
  32. validator: (value) => {
  33. return core.isNumber(value) && Math.trunc(value) === value && value > 4 && value < 22 && value % 2 === 1;
  34. },
  35. default: 7
  36. },
  37. layout: {
  38. type: String,
  39. default: ["prev", "pager", "next", "jumper", "->", "total"].join(", ")
  40. },
  41. pageSizes: {
  42. type: runtime.definePropType(Array),
  43. default: () => typescript.mutable([10, 20, 30, 40, 50, 100])
  44. },
  45. popperClass: {
  46. type: String,
  47. default: ""
  48. },
  49. prevText: {
  50. type: String,
  51. default: ""
  52. },
  53. prevIcon: {
  54. type: icon.iconPropType,
  55. default: () => iconsVue.ArrowLeft
  56. },
  57. nextText: {
  58. type: String,
  59. default: ""
  60. },
  61. nextIcon: {
  62. type: icon.iconPropType,
  63. default: () => iconsVue.ArrowRight
  64. },
  65. small: Boolean,
  66. background: Boolean,
  67. disabled: Boolean,
  68. hideOnSinglePage: Boolean
  69. });
  70. const paginationEmits = {
  71. "update:current-page": (val) => core.isNumber(val),
  72. "update:page-size": (val) => core.isNumber(val),
  73. "size-change": (val) => core.isNumber(val),
  74. "current-change": (val) => core.isNumber(val),
  75. "prev-click": (val) => core.isNumber(val),
  76. "next-click": (val) => core.isNumber(val)
  77. };
  78. const componentName = "ElPagination";
  79. var Pagination = vue.defineComponent({
  80. name: componentName,
  81. props: paginationProps,
  82. emits: paginationEmits,
  83. setup(props, { emit, slots }) {
  84. const { t } = index.useLocale();
  85. const ns = index$1.useNamespace("pagination");
  86. const vnodeProps = vue.getCurrentInstance().vnode.props || {};
  87. const hasCurrentPageListener = "onUpdate:currentPage" in vnodeProps || "onUpdate:current-page" in vnodeProps || "onCurrentChange" in vnodeProps;
  88. const hasPageSizeListener = "onUpdate:pageSize" in vnodeProps || "onUpdate:page-size" in vnodeProps || "onSizeChange" in vnodeProps;
  89. const assertValidUsage = vue.computed(() => {
  90. if (isAbsent(props.total) && isAbsent(props.pageCount))
  91. return false;
  92. if (!isAbsent(props.currentPage) && !hasCurrentPageListener)
  93. return false;
  94. if (props.layout.includes("sizes")) {
  95. if (!isAbsent(props.pageCount)) {
  96. if (!hasPageSizeListener)
  97. return false;
  98. } else if (!isAbsent(props.total)) {
  99. if (!isAbsent(props.pageSize)) {
  100. if (!hasPageSizeListener) {
  101. return false;
  102. }
  103. } else {
  104. }
  105. }
  106. }
  107. return true;
  108. });
  109. const innerPageSize = vue.ref(isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize);
  110. const innerCurrentPage = vue.ref(isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage);
  111. const pageSizeBridge = vue.computed({
  112. get() {
  113. return isAbsent(props.pageSize) ? innerPageSize.value : props.pageSize;
  114. },
  115. set(v) {
  116. if (isAbsent(props.pageSize)) {
  117. innerPageSize.value = v;
  118. }
  119. if (hasPageSizeListener) {
  120. emit("update:page-size", v);
  121. emit("size-change", v);
  122. }
  123. }
  124. });
  125. const pageCountBridge = vue.computed(() => {
  126. let pageCount = 0;
  127. if (!isAbsent(props.pageCount)) {
  128. pageCount = props.pageCount;
  129. } else if (!isAbsent(props.total)) {
  130. pageCount = Math.max(1, Math.ceil(props.total / pageSizeBridge.value));
  131. }
  132. return pageCount;
  133. });
  134. const currentPageBridge = vue.computed({
  135. get() {
  136. return isAbsent(props.currentPage) ? innerCurrentPage.value : props.currentPage;
  137. },
  138. set(v) {
  139. let newCurrentPage = v;
  140. if (v < 1) {
  141. newCurrentPage = 1;
  142. } else if (v > pageCountBridge.value) {
  143. newCurrentPage = pageCountBridge.value;
  144. }
  145. if (isAbsent(props.currentPage)) {
  146. innerCurrentPage.value = newCurrentPage;
  147. }
  148. if (hasCurrentPageListener) {
  149. emit("update:current-page", newCurrentPage);
  150. emit("current-change", newCurrentPage);
  151. }
  152. }
  153. });
  154. vue.watch(pageCountBridge, (val) => {
  155. if (currentPageBridge.value > val)
  156. currentPageBridge.value = val;
  157. });
  158. function handleCurrentChange(val) {
  159. currentPageBridge.value = val;
  160. }
  161. function handleSizeChange(val) {
  162. pageSizeBridge.value = val;
  163. const newPageCount = pageCountBridge.value;
  164. if (currentPageBridge.value > newPageCount) {
  165. currentPageBridge.value = newPageCount;
  166. }
  167. }
  168. function prev$1() {
  169. if (props.disabled)
  170. return;
  171. currentPageBridge.value -= 1;
  172. emit("prev-click", currentPageBridge.value);
  173. }
  174. function next$1() {
  175. if (props.disabled)
  176. return;
  177. currentPageBridge.value += 1;
  178. emit("next-click", currentPageBridge.value);
  179. }
  180. function addClass(element, cls) {
  181. if (element) {
  182. if (!element.props) {
  183. element.props = {};
  184. }
  185. element.props.class = [element.props.class, cls].join(" ");
  186. }
  187. }
  188. vue.provide(pagination.elPaginationKey, {
  189. pageCount: pageCountBridge,
  190. disabled: vue.computed(() => props.disabled),
  191. currentPage: currentPageBridge,
  192. changeEvent: handleCurrentChange,
  193. handleSizeChange
  194. });
  195. return () => {
  196. var _a, _b;
  197. if (!assertValidUsage.value) {
  198. error.debugWarn(componentName, t("el.pagination.deprecationWarning"));
  199. return null;
  200. }
  201. if (!props.layout)
  202. return null;
  203. if (props.hideOnSinglePage && pageCountBridge.value <= 1)
  204. return null;
  205. const rootChildren = [];
  206. const rightWrapperChildren = [];
  207. const rightWrapperRoot = vue.h("div", { class: ns.e("rightwrapper") }, rightWrapperChildren);
  208. const TEMPLATE_MAP = {
  209. prev: vue.h(prev["default"], {
  210. disabled: props.disabled,
  211. currentPage: currentPageBridge.value,
  212. prevText: props.prevText,
  213. prevIcon: props.prevIcon,
  214. onClick: prev$1
  215. }),
  216. jumper: vue.h(jumper["default"], {
  217. size: props.small ? "small" : "default"
  218. }),
  219. pager: vue.h(pager["default"], {
  220. currentPage: currentPageBridge.value,
  221. pageCount: pageCountBridge.value,
  222. pagerCount: props.pagerCount,
  223. onChange: handleCurrentChange,
  224. disabled: props.disabled
  225. }),
  226. next: vue.h(next["default"], {
  227. disabled: props.disabled,
  228. currentPage: currentPageBridge.value,
  229. pageCount: pageCountBridge.value,
  230. nextText: props.nextText,
  231. nextIcon: props.nextIcon,
  232. onClick: next$1
  233. }),
  234. sizes: vue.h(sizes["default"], {
  235. pageSize: pageSizeBridge.value,
  236. pageSizes: props.pageSizes,
  237. popperClass: props.popperClass,
  238. disabled: props.disabled,
  239. size: props.small ? "small" : "default"
  240. }),
  241. slot: (_b = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : null,
  242. total: vue.h(total["default"], { total: isAbsent(props.total) ? 0 : props.total })
  243. };
  244. const components = props.layout.split(",").map((item) => item.trim());
  245. let haveRightWrapper = false;
  246. components.forEach((c) => {
  247. if (c === "->") {
  248. haveRightWrapper = true;
  249. return;
  250. }
  251. if (!haveRightWrapper) {
  252. rootChildren.push(TEMPLATE_MAP[c]);
  253. } else {
  254. rightWrapperChildren.push(TEMPLATE_MAP[c]);
  255. }
  256. });
  257. addClass(rootChildren[0], ns.is("first"));
  258. addClass(rootChildren[rootChildren.length - 1], ns.is("last"));
  259. if (haveRightWrapper && rightWrapperChildren.length > 0) {
  260. addClass(rightWrapperChildren[0], ns.is("first"));
  261. addClass(rightWrapperChildren[rightWrapperChildren.length - 1], ns.is("last"));
  262. rootChildren.push(rightWrapperRoot);
  263. }
  264. return vue.h("div", {
  265. role: "pagination",
  266. "aria-label": "pagination",
  267. class: [
  268. ns.b(),
  269. ns.is("background", props.background),
  270. {
  271. [ns.m("small")]: props.small
  272. }
  273. ]
  274. }, rootChildren);
  275. };
  276. }
  277. });
  278. exports["default"] = Pagination;
  279. exports.paginationEmits = paginationEmits;
  280. exports.paginationProps = paginationProps;
  281. //# sourceMappingURL=pagination.js.map