vxe-pc-ui 3.0.0 → 3.0.1

package/lib/pager/src/pager.js

@@ -0,0 +1,714 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _log = require("../../ui/src/log");
+var _select = _interopRequireDefault(require("../../select/src/select"));
+var _input = _interopRequireDefault(require("../../input/src/input"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _default2 = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxePager',
+  mixins: [_ui.globalMixins.sizeMixin],
+  props: {
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.size || (0, _ui.getConfig)().size;
+      }
+    },
+    // 自定义布局
+    layouts: {
+      type: Array,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.layouts || ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total'];
+      }
+    },
+    // 当前页
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    // 加载中
+    loading: Boolean,
+    // 每页大小
+    pageSize: {
+      type: Number,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.pageSize || 10;
+      }
+    },
+    // 总条数
+    total: {
+      type: Number,
+      default: 0
+    },
+    // 显示页码按钮的数量
+    pagerCount: {
+      type: Number,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.pagerCount || 7;
+      }
+    },
+    // 每页大小选项列表
+    pageSizes: {
+      type: Array,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.pageSizes || [10, 15, 20, 50, 100];
+      }
+    },
+    // 列对其方式
+    align: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.align;
+      }
+    },
+    // 带边框
+    border: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.border;
+      }
+    },
+    // 带背景颜色
+    background: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.background;
+      }
+    },
+    // 配套的样式
+    perfect: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.perfect;
+      }
+    },
+    // 当只有一页时隐藏
+    autoHidden: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.autoHidden;
+      }
+    },
+    transfer: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.transfer;
+      }
+    },
+    className: [String, Function],
+    pageSizePlacement: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().pager.pageSizePlacement;
+      }
+    },
+    // 自定义图标
+    iconPrevPage: String,
+    iconJumpPrev: String,
+    iconJumpNext: String,
+    iconNextPage: String,
+    iconJumpMore: String,
+    iconHomePage: String,
+    iconEndPage: String
+  },
+  inject: {
+    $xeGrid: {
+      default: null
+    }
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      inpCurrPage: 1
+    };
+    return {
+      xID: xID,
+      reactData: reactData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computePageCount: function computePageCount() {
+      var $xePager = this;
+      var props = $xePager;
+      return $xePager.getPageCount(props.total, props.pageSize);
+    },
+    computeNumList: function computeNumList() {
+      var $xePager = this;
+      var props = $xePager;
+      var pagerCount = props.pagerCount;
+      var pageCount = $xePager.computePageCount;
+      var len = pageCount > pagerCount ? pagerCount - 2 : pagerCount;
+      var rest = [];
+      for (var index = 0; index < len; index++) {
+        rest.push(index);
+      }
+      return rest;
+    },
+    computeOffsetNumber: function computeOffsetNumber() {
+      var $xePager = this;
+      var props = $xePager;
+      return Math.floor((props.pagerCount - 2) / 2);
+    },
+    computeSizeList: function computeSizeList() {
+      var $xePager = this;
+      var props = $xePager;
+      return props.pageSizes.map(function (item) {
+        if (_xeUtils.default.isNumber(item)) {
+          return {
+            value: item,
+            label: "".concat((0, _ui.getI18n)('vxe.pager.pagesize', [item]))
+          };
+        }
+        return Object.assign({
+          value: '',
+          label: ''
+        }, item);
+      });
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xePager = this;
+      $xePager.$emit(type, (0, _ui.createEvent)(evnt, {
+        $pager: $xePager
+      }, params));
+    },
+    homePage: function homePage() {
+      var $xePager = this;
+      $xePager.handleHomePage();
+      return $xePager.$nextTick();
+    },
+    endPage: function endPage() {
+      var $xePager = this;
+      $xePager.handleEndPage();
+      return $xePager.$nextTick();
+    },
+    prevPage: function prevPage() {
+      var $xePager = this;
+      $xePager.handlePrevPage();
+      return $xePager.$nextTick();
+    },
+    nextPage: function nextPage() {
+      var $xePager = this;
+      $xePager.handleNextPage();
+      return $xePager.$nextTick();
+    },
+    prevJump: function prevJump() {
+      var $xePager = this;
+      $xePager.handlePrevJump();
+      return $xePager.$nextTick();
+    },
+    nextJump: function nextJump() {
+      var $xePager = this;
+      $xePager.handleNextJump();
+      return $xePager.$nextTick();
+    },
+    getPageCount: function getPageCount(total, size) {
+      return Math.max(Math.ceil(total / size), 1);
+    },
+    jumpPageEvent: function jumpPageEvent(evnt, currentPage) {
+      var $xePager = this;
+      var props = $xePager;
+      $xePager.$emit('update:currentPage', currentPage);
+      if (evnt && currentPage !== props.currentPage) {
+        $xePager.dispatchEvent('page-change', {
+          type: 'current',
+          pageSize: props.pageSize,
+          currentPage: currentPage
+        }, evnt);
+      }
+    },
+    changeCurrentPage: function changeCurrentPage(currentPage, evnt) {
+      var $xePager = this;
+      var props = $xePager;
+      $xePager.$emit('update:currentPage', currentPage);
+      if (evnt && currentPage !== props.currentPage) {
+        $xePager.dispatchEvent('page-change', {
+          type: 'current',
+          pageSize: props.pageSize,
+          currentPage: currentPage
+        }, evnt);
+      }
+    },
+    triggerJumpEvent: function triggerJumpEvent(params) {
+      var $xePager = this;
+      var reactData = $xePager.reactData;
+      var $event = params.$event;
+      var inputElem = $event.target;
+      var inpValue = _xeUtils.default.toInteger(inputElem.value);
+      var pageCount = $xePager.computePageCount.value;
+      var current = inpValue <= 0 ? 1 : inpValue >= pageCount ? pageCount : inpValue;
+      var currPage = _xeUtils.default.toValueString(current);
+      inputElem.value = currPage;
+      reactData.inpCurrPage = currPage;
+      $xePager.changeCurrentPage(current, $event);
+    },
+    handleHomePage: function handleHomePage(evnt) {
+      var $xePager = this;
+      var props = $xePager;
+      var currentPage = props.currentPage;
+      if (currentPage > 1) {
+        $xePager.changeCurrentPage(1, evnt);
+      }
+    },
+    handleEndPage: function handleEndPage(evnt) {
+      var $xePager = this;
+      var props = $xePager;
+      var currentPage = props.currentPage;
+      var pageCount = $xePager.computePageCount;
+      if (currentPage < pageCount) {
+        $xePager.changeCurrentPage(pageCount, evnt);
+      }
+    },
+    handlePrevPage: function handlePrevPage(evnt) {
+      var $xePager = this;
+      var props = $xePager;
+      var currentPage = props.currentPage;
+      var pageCount = $xePager.computePageCount;
+      if (currentPage > 1) {
+        $xePager.changeCurrentPage(Math.min(pageCount, Math.max(currentPage - 1, 1)), evnt);
+      }
+    },
+    handleNextPage: function handleNextPage(evnt) {
+      var $xePager = this;
+      var props = $xePager;
+      var currentPage = props.currentPage;
+      var pageCount = $xePager.computePageCount;
+      if (currentPage < pageCount) {
+        $xePager.changeCurrentPage(Math.min(pageCount, currentPage + 1), evnt);
+      }
+    },
+    handlePrevJump: function handlePrevJump(evnt) {
+      var $xePager = this;
+      var props = $xePager;
+      var numList = $xePager.computeNumList;
+      $xePager.changeCurrentPage(Math.max(props.currentPage - numList.length, 1), evnt);
+    },
+    handleNextJump: function handleNextJump(evnt) {
+      var $xePager = this;
+      var props = $xePager;
+      var pageCount = $xePager.computePageCount;
+      var numList = $xePager.computeNumList;
+      $xePager.changeCurrentPage(Math.min(props.currentPage + numList.length, pageCount), evnt);
+    },
+    pageSizeEvent: function pageSizeEvent(params) {
+      var $xePager = this;
+      var props = $xePager;
+      var value = params.value;
+      var pageSize = _xeUtils.default.toNumber(value);
+      var pageCount = $xePager.getPageCount(props.total, pageSize);
+      var currentPage = props.currentPage;
+      if (currentPage > pageCount) {
+        currentPage = pageCount;
+        $xePager.$emit('update:currentPage', pageCount);
+      }
+      $xePager.$emit('update:pageSize', pageSize);
+      $xePager.dispatchEvent('page-change', {
+        type: 'size',
+        pageSize: pageSize,
+        currentPage: currentPage
+      }, params.$event);
+    },
+    jumpKeydownEvent: function jumpKeydownEvent(params) {
+      var $xePager = this;
+      var $event = params.$event;
+      if (_ui.globalEvents.hasKey($event, _ui.GLOBAL_EVENT_KEYS.ENTER)) {
+        $xePager.triggerJumpEvent(params);
+      } else if (_ui.globalEvents.hasKey($event, _ui.GLOBAL_EVENT_KEYS.ARROW_UP)) {
+        $event.preventDefault();
+        $xePager.handleNextPage($event);
+      } else if (_ui.globalEvents.hasKey($event, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN)) {
+        $event.preventDefault();
+        $xePager.handlePrevPage($event);
+      }
+    },
+    //
+    // Render
+    //
+    // 第一页
+    renderHomePage: function renderHomePage(h) {
+      var $xePager = this;
+      var props = $xePager;
+      return h('button', {
+        class: ['vxe-pager--prev-btn', {
+          'is--disabled': props.currentPage <= 1
+        }],
+        attrs: {
+          type: 'button',
+          title: (0, _ui.getI18n)('vxe.pager.homePageTitle')
+        },
+        on: {
+          click: $xePager.handleHomePage
+        }
+      }, [h('i', {
+        class: ['vxe-pager--btn-icon', props.iconHomePage || (0, _ui.getIcon)().PAGER_HOME]
+      })]);
+    },
+    // 上一页
+    renderPrevPage: function renderPrevPage(h) {
+      var $xePager = this;
+      var props = $xePager;
+      return h('button', {
+        class: ['vxe-pager--prev-btn', {
+          'is--disabled': props.currentPage <= 1
+        }],
+        attrs: {
+          type: 'button',
+          title: (0, _ui.getI18n)('vxe.pager.prevPageTitle')
+        },
+        on: {
+          click: $xePager.handlePrevPage
+        }
+      }, [h('i', {
+        class: ['vxe-pager--btn-icon', props.iconPrevPage || (0, _ui.getIcon)().PAGER_PREV_PAGE]
+      })]);
+    },
+    // 向上翻页
+    renderPrevJump: function renderPrevJump(h, tagName) {
+      var $xePager = this;
+      var props = $xePager;
+      return h(tagName || 'button', {
+        class: ['vxe-pager--jump-prev', {
+          'is--fixed': !tagName,
+          'is--disabled': props.currentPage <= 1
+        }],
+        attrs: {
+          type: 'button',
+          title: (0, _ui.getI18n)('vxe.pager.prevJumpTitle')
+        },
+        on: {
+          click: $xePager.handlePrevJump
+        }
+      }, [tagName ? h('i', {
+        class: ['vxe-pager--jump-more-icon', props.iconJumpMore || (0, _ui.getIcon)().PAGER_JUMP_MORE]
+      }) : null, h('i', {
+        class: ['vxe-pager--jump-icon', props.iconJumpPrev || (0, _ui.getIcon)().PAGER_JUMP_PREV]
+      })]);
+    },
+    // 向下翻页
+    renderNextJump: function renderNextJump(h, tagName) {
+      var $xePager = this;
+      var props = $xePager;
+      var pageCount = $xePager.computePageCount;
+      return h(tagName || 'button', {
+        class: ['vxe-pager--jump-next', {
+          'is--fixed': !tagName,
+          'is--disabled': props.currentPage >= pageCount
+        }],
+        attrs: {
+          type: 'button',
+          title: (0, _ui.getI18n)('vxe.pager.nextJumpTitle')
+        },
+        on: {
+          click: $xePager.handleNextJump
+        }
+      }, [tagName ? h('i', {
+        class: ['vxe-pager--jump-more-icon', props.iconJumpMore || (0, _ui.getIcon)().PAGER_JUMP_MORE]
+      }) : null, h('i', {
+        class: ['vxe-pager--jump-icon', props.iconJumpNext || (0, _ui.getIcon)().PAGER_JUMP_NEXT]
+      })]);
+    },
+    // 下一页
+    renderNextPage: function renderNextPage(h) {
+      var $xePager = this;
+      var props = $xePager;
+      var pageCount = $xePager.computePageCount;
+      return h('button', {
+        class: ['vxe-pager--next-btn', {
+          'is--disabled': props.currentPage >= pageCount
+        }],
+        attrs: {
+          type: 'button',
+          title: (0, _ui.getI18n)('vxe.pager.nextPageTitle')
+        },
+        on: {
+          click: $xePager.handleNextPage
+        }
+      }, [h('i', {
+        class: ['vxe-pager--btn-icon', props.iconNextPage || (0, _ui.getIcon)().PAGER_NEXT_PAGE]
+      })]);
+    },
+    // 最后一页
+    renderEndPage: function renderEndPage(h) {
+      var $xePager = this;
+      var props = $xePager;
+      var pageCount = $xePager.computePageCount;
+      return h('button', {
+        class: ['vxe-pager--prev-btn', {
+          'is--disabled': props.currentPage >= pageCount
+        }],
+        attrs: {
+          type: 'button',
+          title: (0, _ui.getI18n)('vxe.pager.endPageTitle')
+        },
+        on: {
+          click: $xePager.handleEndPage
+        }
+      }, [h('i', {
+        class: ['vxe-pager--btn-icon', props.iconEndPage || (0, _ui.getIcon)().PAGER_END]
+      })]);
+    },
+    // 页数
+    renderNumber: function renderNumber(h, showJump) {
+      var $xePager = this;
+      var props = $xePager;
+      var currentPage = props.currentPage,
+        pagerCount = props.pagerCount;
+      var nums = [];
+      var pageCount = $xePager.computePageCount;
+      var numList = $xePager.computeNumList;
+      var offsetNumber = $xePager.computeOffsetNumber;
+      var isOv = pageCount > pagerCount;
+      var isLt = isOv && currentPage > offsetNumber + 1;
+      var isGt = isOv && currentPage < pageCount - offsetNumber;
+      var startNumber = 1;
+      if (isOv) {
+        if (currentPage >= pageCount - offsetNumber) {
+          startNumber = Math.max(pageCount - numList.length + 1, 1);
+        } else {
+          startNumber = Math.max(currentPage - offsetNumber, 1);
+        }
+      }
+      if (showJump && isLt) {
+        nums.push(h('button', {
+          class: 'vxe-pager--num-btn',
+          attrs: {
+            type: 'button'
+          },
+          on: {
+            click: function click(evnt) {
+              return $xePager.jumpPageEvent(evnt, 1);
+            }
+          }
+        }, '1'), $xePager.renderPrevJump(h, 'span'));
+      }
+      numList.forEach(function (item, index) {
+        var number = startNumber + index;
+        if (number <= pageCount) {
+          nums.push(h('button', {
+            key: number,
+            class: ['vxe-pager--num-btn', {
+              'is--active': currentPage === number
+            }],
+            attrs: {
+              type: 'button'
+            },
+            on: {
+              click: function click(evnt) {
+                return $xePager.jumpPageEvent(evnt, number);
+              }
+            }
+          }, "".concat(number)));
+        }
+      });
+      if (showJump && isGt) {
+        nums.push($xePager.renderNextJump(h, 'button'), h('button', {
+          class: 'vxe-pager--num-btn',
+          attrs: {
+            type: 'button'
+          },
+          on: {
+            click: function click(evnt) {
+              return $xePager.jumpPageEvent(evnt, pageCount);
+            }
+          }
+        }, pageCount));
+      }
+      return h('span', {
+        class: 'vxe-pager--btn-wrapper'
+      }, nums);
+    },
+    // jumpNumber
+    renderJumpNumber: function renderJumpNumber(h) {
+      var $xePager = this;
+      return $xePager.renderNumber(h, true);
+    },
+    // sizes
+    renderSizes: function renderSizes(h) {
+      var $xePager = this;
+      var props = $xePager;
+      var sizeList = $xePager.computeSizeList;
+      return h(_select.default, {
+        class: 'vxe-pager--sizes',
+        props: {
+          value: props.pageSize,
+          placement: props.pageSizePlacement,
+          transfer: props.transfer,
+          options: sizeList
+        },
+        on: {
+          change: $xePager.pageSizeEvent
+        }
+      });
+    },
+    // Jump
+    renderJump: function renderJump(h, isFull) {
+      var $xePager = this;
+      var reactData = $xePager.reactData;
+      var pageCount = $xePager.computePageCount;
+      return h('span', {
+        class: 'vxe-pager--jump'
+      }, [isFull ? h('span', {
+        class: 'vxe-pager--goto-text'
+      }, (0, _ui.getI18n)('vxe.pager.goto')) : null, h(_input.default, {
+        class: 'vxe-pager--goto',
+        props: {
+          value: reactData.inpCurrPage,
+          placeholder: (0, _ui.getI18n)('vxe.pager.gotoTitle'),
+          align: 'center',
+          type: 'integer',
+          max: pageCount,
+          min: 1,
+          controls: false
+        },
+        on: {
+          keydown: $xePager.jumpKeydownEvent,
+          blur: $xePager.triggerJumpEvent,
+          'modelValue': function modelValue(val) {
+            reactData.inpCurrPage = val;
+          }
+        }
+      }), isFull ? h('span', {
+        class: 'vxe-pager--classifier-text'
+      }, (0, _ui.getI18n)('vxe.pager.pageClassifier')) : null]);
+    },
+    // FullJump
+    renderFullJump: function renderFullJump(h) {
+      var $xePager = this;
+      return $xePager.renderJump(h, true);
+    },
+    // PageCount
+    renderPageCount: function renderPageCount(h) {
+      var $xePager = this;
+      var pageCount = $xePager.computePageCount;
+      return h('span', {
+        class: 'vxe-pager--count'
+      }, [h('span', {
+        class: 'vxe-pager--separator'
+      }), h('span', pageCount)]);
+    },
+    // total
+    renderTotal: function renderTotal(h) {
+      var $xePager = this;
+      var props = $xePager;
+      return h('span', {
+        class: 'vxe-pager--total'
+      }, (0, _ui.getI18n)('vxe.pager.total', [props.total]));
+    },
+    renderVN: function renderVN(h) {
+      var $xePager = this;
+      var props = $xePager;
+      var slots = $xePager.$scopedSlots;
+      var $xeGrid = $xePager.$xeGrid;
+      var align = props.align,
+        layouts = props.layouts,
+        className = props.className;
+      var childNodes = [];
+      var vSize = $xePager.computeSize;
+      var pageCount = $xePager.computePageCount;
+      if (slots.left) {
+        childNodes.push(h('span', {
+          class: 'vxe-pager--left-wrapper'
+        }, slots.left({
+          $grid: $xeGrid
+        })));
+      }
+      layouts.forEach(function (name) {
+        var renderFn;
+        switch (name) {
+          case 'Home':
+            renderFn = $xePager.renderHomePage;
+            break;
+          case 'PrevJump':
+            renderFn = $xePager.renderPrevJump;
+            break;
+          case 'PrevPage':
+            renderFn = $xePager.renderPrevPage;
+            break;
+          case 'Number':
+            renderFn = $xePager.renderNumber;
+            break;
+          case 'JumpNumber':
+            renderFn = $xePager.renderJumpNumber;
+            break;
+          case 'NextPage':
+            renderFn = $xePager.renderNextPage;
+            break;
+          case 'NextJump':
+            renderFn = $xePager.renderNextJump;
+            break;
+          case 'End':
+            renderFn = $xePager.renderEndPage;
+            break;
+          case 'Sizes':
+            renderFn = $xePager.renderSizes;
+            break;
+          case 'FullJump':
+            renderFn = $xePager.renderFullJump;
+            break;
+          case 'Jump':
+            renderFn = $xePager.renderJump;
+            break;
+          case 'PageCount':
+            renderFn = $xePager.renderPageCount;
+            break;
+          case 'Total':
+            renderFn = $xePager.renderTotal;
+            break;
+        }
+        if (renderFn) {
+          childNodes.push(renderFn(h));
+        } else {
+          if (process.env.NODE_ENV === 'development') {
+            (0, _log.errLog)('vxe.error.notProp', ["layouts -> ".concat(name)]);
+          }
+        }
+      });
+      if (slots.right) {
+        childNodes.push(h('span', {
+          class: 'vxe-pager--right-wrapper'
+        }, slots.right({
+          $grid: $xeGrid
+        })));
+      }
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-pager', className ? _xeUtils.default.isFunction(className) ? className({
+          $pager: $xePager
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), "align--".concat(align), align), 'is--border', props.border), 'is--background', props.background), 'is--perfect', props.perfect), 'is--hidden', props.autoHidden && pageCount === 1), 'is--loading', props.loading)]
+      }, [h('div', {
+        class: 'vxe-pager--wrapper'
+      }, childNodes)]);
+    }
+  },
+  watch: {
+    currentPage: function currentPage(val) {
+      var $xePager = this;
+      var reactData = $xePager.reactData;
+      reactData.inpCurrPage = val;
+    }
+  },
+  created: function created() {
+    var $xePager = this;
+    var props = $xePager;
+    var reactData = $xePager.reactData;
+    reactData.inpCurrPage = props.currentPage;
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});