Pagination.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  3. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  4. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  5. var _excluded = ["size", "itemRender", "buildOptionText", "selectComponentClass", "responsive"];
  6. import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
  7. import { computed, toRef, defineComponent } from 'vue';
  8. import LeftOutlined from "@ant-design/icons-vue/es/icons/LeftOutlined";
  9. import RightOutlined from "@ant-design/icons-vue/es/icons/RightOutlined";
  10. import DoubleLeftOutlined from "@ant-design/icons-vue/es/icons/DoubleLeftOutlined";
  11. import DoubleRightOutlined from "@ant-design/icons-vue/es/icons/DoubleRightOutlined";
  12. import VcSelect from '../select';
  13. import MiniSelect from './MiniSelect';
  14. import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
  15. import VcPagination from '../vc-pagination';
  16. import enUS from '../vc-pagination/locale/en_US';
  17. import classNames from '../_util/classNames';
  18. import useConfigInject from '../_util/hooks/useConfigInject';
  19. import useBreakpoint from '../_util/hooks/useBreakpoint';
  20. export var paginationProps = function paginationProps() {
  21. return {
  22. total: Number,
  23. defaultCurrent: Number,
  24. disabled: {
  25. type: Boolean,
  26. default: undefined
  27. },
  28. current: Number,
  29. defaultPageSize: Number,
  30. pageSize: Number,
  31. hideOnSinglePage: {
  32. type: Boolean,
  33. default: undefined
  34. },
  35. showSizeChanger: {
  36. type: Boolean,
  37. default: undefined
  38. },
  39. pageSizeOptions: Array,
  40. buildOptionText: Function,
  41. showQuickJumper: {
  42. type: [Boolean, Object],
  43. default: undefined
  44. },
  45. showTotal: Function,
  46. size: String,
  47. simple: {
  48. type: Boolean,
  49. default: undefined
  50. },
  51. locale: Object,
  52. prefixCls: String,
  53. selectPrefixCls: String,
  54. totalBoundaryShowSizeChanger: Number,
  55. selectComponentClass: String,
  56. itemRender: Function,
  57. role: String,
  58. responsive: Boolean,
  59. showLessItems: {
  60. type: Boolean,
  61. default: undefined
  62. },
  63. onChange: Function,
  64. onShowSizeChange: Function,
  65. 'onUpdate:current': Function,
  66. 'onUpdate:pageSize': Function
  67. };
  68. };
  69. export var paginationConfig = function paginationConfig() {
  70. return _objectSpread(_objectSpread({}, paginationProps()), {}, {
  71. position: String
  72. });
  73. };
  74. export default defineComponent({
  75. compatConfig: {
  76. MODE: 3
  77. },
  78. name: 'APagination',
  79. inheritAttrs: false,
  80. props: paginationProps(),
  81. // emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
  82. setup: function setup(props, _ref) {
  83. var slots = _ref.slots,
  84. attrs = _ref.attrs;
  85. var _useConfigInject = useConfigInject('pagination', props),
  86. prefixCls = _useConfigInject.prefixCls,
  87. configProvider = _useConfigInject.configProvider,
  88. direction = _useConfigInject.direction;
  89. var selectPrefixCls = computed(function () {
  90. return configProvider.getPrefixCls('select', props.selectPrefixCls);
  91. });
  92. var breakpoint = useBreakpoint();
  93. var _useLocaleReceiver = useLocaleReceiver('Pagination', enUS, toRef(props, 'locale')),
  94. _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
  95. locale = _useLocaleReceiver2[0];
  96. var getIconsProps = function getIconsProps(pre) {
  97. var ellipsis = _createVNode("span", {
  98. "class": "".concat(pre, "-item-ellipsis")
  99. }, [_createTextVNode("\u2022\u2022\u2022")]);
  100. var prevIcon = _createVNode("button", {
  101. "class": "".concat(pre, "-item-link"),
  102. "type": "button",
  103. "tabindex": -1
  104. }, [_createVNode(LeftOutlined, null, null)]);
  105. var nextIcon = _createVNode("button", {
  106. "class": "".concat(pre, "-item-link"),
  107. "type": "button",
  108. "tabindex": -1
  109. }, [_createVNode(RightOutlined, null, null)]);
  110. var jumpPrevIcon = _createVNode("a", {
  111. "rel": "nofollow",
  112. "class": "".concat(pre, "-item-link")
  113. }, [_createVNode("div", {
  114. "class": "".concat(pre, "-item-container")
  115. }, [_createVNode(DoubleLeftOutlined, {
  116. "class": "".concat(pre, "-item-link-icon")
  117. }, null), ellipsis])]);
  118. var jumpNextIcon = _createVNode("a", {
  119. "rel": "nofollow",
  120. "class": "".concat(pre, "-item-link")
  121. }, [_createVNode("div", {
  122. "class": "".concat(pre, "-item-container")
  123. }, [_createVNode(DoubleRightOutlined, {
  124. "class": "".concat(pre, "-item-link-icon")
  125. }, null), ellipsis])]);
  126. // change arrows direction in right-to-left direction
  127. if (direction.value === 'rtl') {
  128. var _ref2 = [nextIcon, prevIcon];
  129. prevIcon = _ref2[0];
  130. nextIcon = _ref2[1];
  131. var _ref3 = [jumpNextIcon, jumpPrevIcon];
  132. jumpPrevIcon = _ref3[0];
  133. jumpNextIcon = _ref3[1];
  134. }
  135. return {
  136. prevIcon: prevIcon,
  137. nextIcon: nextIcon,
  138. jumpPrevIcon: jumpPrevIcon,
  139. jumpNextIcon: jumpNextIcon
  140. };
  141. };
  142. return function () {
  143. var _breakpoint$value;
  144. var size = props.size,
  145. _props$itemRender = props.itemRender,
  146. itemRender = _props$itemRender === void 0 ? slots.itemRender : _props$itemRender,
  147. _props$buildOptionTex = props.buildOptionText,
  148. buildOptionText = _props$buildOptionTex === void 0 ? slots.buildOptionText : _props$buildOptionTex,
  149. selectComponentClass = props.selectComponentClass,
  150. responsive = props.responsive,
  151. restProps = _objectWithoutProperties(props, _excluded);
  152. var isSmall = size === 'small' || !!((_breakpoint$value = breakpoint.value) !== null && _breakpoint$value !== void 0 && _breakpoint$value.xs && !size && responsive);
  153. var paginationProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, restProps), getIconsProps(prefixCls.value)), {}, {
  154. prefixCls: prefixCls.value,
  155. selectPrefixCls: selectPrefixCls.value,
  156. selectComponentClass: selectComponentClass || (isSmall ? MiniSelect : VcSelect),
  157. locale: locale.value,
  158. buildOptionText: buildOptionText
  159. }, attrs), {}, {
  160. class: classNames(_defineProperty({
  161. mini: isSmall
  162. }, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), attrs.class),
  163. itemRender: itemRender
  164. });
  165. return _createVNode(VcPagination, paginationProps, null);
  166. };
  167. }
  168. });