3dc1c1a235c95049b4e05d420d59c0c7ab198d6fdf3c047e3ccd0d3203335e55862095adc7c8e0453f39f80317da439a1a6e6d8f6491e9289f4682699f4d1b 9.7 KB

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