Pagination.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
  3. var __rest = this && this.__rest || function (s, e) {
  4. var t = {};
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  6. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  8. }
  9. return t;
  10. };
  11. import { computed, toRef, defineComponent } from 'vue';
  12. import LeftOutlined from "@ant-design/icons-vue/es/icons/LeftOutlined";
  13. import RightOutlined from "@ant-design/icons-vue/es/icons/RightOutlined";
  14. import DoubleLeftOutlined from "@ant-design/icons-vue/es/icons/DoubleLeftOutlined";
  15. import DoubleRightOutlined from "@ant-design/icons-vue/es/icons/DoubleRightOutlined";
  16. import MiniSelect, { MiddleSelect } from './Select';
  17. import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
  18. import VcPagination from '../vc-pagination';
  19. import enUS from '../vc-pagination/locale/en_US';
  20. import classNames from '../_util/classNames';
  21. import useConfigInject from '../config-provider/hooks/useConfigInject';
  22. import useBreakpoint from '../_util/hooks/useBreakpoint';
  23. import { booleanType, arrayType, stringType, functionType, someType } from '../_util/type';
  24. // CSSINJS
  25. import useStyle from './style';
  26. export const paginationProps = () => ({
  27. total: Number,
  28. defaultCurrent: Number,
  29. disabled: booleanType(),
  30. current: Number,
  31. defaultPageSize: Number,
  32. pageSize: Number,
  33. hideOnSinglePage: booleanType(),
  34. showSizeChanger: booleanType(),
  35. pageSizeOptions: arrayType(),
  36. buildOptionText: functionType(),
  37. showQuickJumper: someType([Boolean, Object]),
  38. showTotal: functionType(),
  39. size: stringType(),
  40. simple: booleanType(),
  41. locale: Object,
  42. prefixCls: String,
  43. selectPrefixCls: String,
  44. totalBoundaryShowSizeChanger: Number,
  45. selectComponentClass: String,
  46. itemRender: functionType(),
  47. role: String,
  48. responsive: Boolean,
  49. showLessItems: booleanType(),
  50. onChange: functionType(),
  51. onShowSizeChange: functionType(),
  52. 'onUpdate:current': functionType(),
  53. 'onUpdate:pageSize': functionType()
  54. });
  55. export const paginationConfig = () => _extends(_extends({}, paginationProps()), {
  56. position: stringType()
  57. });
  58. export default defineComponent({
  59. compatConfig: {
  60. MODE: 3
  61. },
  62. name: 'APagination',
  63. inheritAttrs: false,
  64. props: paginationProps(),
  65. // emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
  66. setup(props, _ref) {
  67. let {
  68. slots,
  69. attrs
  70. } = _ref;
  71. const {
  72. prefixCls,
  73. configProvider,
  74. direction,
  75. size
  76. } = useConfigInject('pagination', props);
  77. // style
  78. const [wrapSSR, hashId] = useStyle(prefixCls);
  79. const selectPrefixCls = computed(() => configProvider.getPrefixCls('select', props.selectPrefixCls));
  80. const breakpoint = useBreakpoint();
  81. const [locale] = useLocaleReceiver('Pagination', enUS, toRef(props, 'locale'));
  82. const getIconsProps = pre => {
  83. const ellipsis = _createVNode("span", {
  84. "class": `${pre}-item-ellipsis`
  85. }, [_createTextVNode("\u2022\u2022\u2022")]);
  86. const prevIcon = _createVNode("button", {
  87. "class": `${pre}-item-link`,
  88. "type": "button",
  89. "tabindex": -1
  90. }, [direction.value === 'rtl' ? _createVNode(RightOutlined, null, null) : _createVNode(LeftOutlined, null, null)]);
  91. const nextIcon = _createVNode("button", {
  92. "class": `${pre}-item-link`,
  93. "type": "button",
  94. "tabindex": -1
  95. }, [direction.value === 'rtl' ? _createVNode(LeftOutlined, null, null) : _createVNode(RightOutlined, null, null)]);
  96. const jumpPrevIcon = _createVNode("a", {
  97. "rel": "nofollow",
  98. "class": `${pre}-item-link`
  99. }, [_createVNode("div", {
  100. "class": `${pre}-item-container`
  101. }, [direction.value === 'rtl' ? _createVNode(DoubleRightOutlined, {
  102. "class": `${pre}-item-link-icon`
  103. }, null) : _createVNode(DoubleLeftOutlined, {
  104. "class": `${pre}-item-link-icon`
  105. }, null), ellipsis])]);
  106. const jumpNextIcon = _createVNode("a", {
  107. "rel": "nofollow",
  108. "class": `${pre}-item-link`
  109. }, [_createVNode("div", {
  110. "class": `${pre}-item-container`
  111. }, [direction.value === 'rtl' ? _createVNode(DoubleLeftOutlined, {
  112. "class": `${pre}-item-link-icon`
  113. }, null) : _createVNode(DoubleRightOutlined, {
  114. "class": `${pre}-item-link-icon`
  115. }, null), ellipsis])]);
  116. return {
  117. prevIcon,
  118. nextIcon,
  119. jumpPrevIcon,
  120. jumpNextIcon
  121. };
  122. };
  123. return () => {
  124. var _a;
  125. const {
  126. itemRender = slots.itemRender,
  127. buildOptionText = slots.buildOptionText,
  128. selectComponentClass,
  129. responsive
  130. } = props,
  131. restProps = __rest(props, ["itemRender", "buildOptionText", "selectComponentClass", "responsive"]);
  132. const isSmall = size.value === 'small' || !!(((_a = breakpoint.value) === null || _a === void 0 ? void 0 : _a.xs) && !size.value && responsive);
  133. const paginationProps = _extends(_extends(_extends(_extends(_extends({}, restProps), getIconsProps(prefixCls.value)), {
  134. prefixCls: prefixCls.value,
  135. selectPrefixCls: selectPrefixCls.value,
  136. selectComponentClass: selectComponentClass || (isSmall ? MiniSelect : MiddleSelect),
  137. locale: locale.value,
  138. buildOptionText
  139. }), attrs), {
  140. class: classNames({
  141. [`${prefixCls.value}-mini`]: isSmall,
  142. [`${prefixCls.value}-rtl`]: direction.value === 'rtl'
  143. }, attrs.class, hashId.value),
  144. itemRender
  145. });
  146. return wrapSSR(_createVNode(VcPagination, paginationProps, null));
  147. };
  148. }
  149. });