"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _xeUtils = _interopRequireDefault(require("xe-utils/methods/xe-utils")); var _conf = _interopRequireDefault(require("../../conf")); var _tools = require("../../tools"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } var _default2 = { name: 'PlxPager', props: { size: String, // 自定义布局 layouts: { type: Array, default: function _default() { return _conf.default.pager.layouts || ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']; } }, // 当前页 currentPage: { type: Number, default: 1 }, // 加载中 loading: Boolean, // 每页大小 pageSize: { type: Number, default: function _default() { return _conf.default.pager.pageSize || 10; } }, // 总条数 total: { type: Number, default: 0 }, // 显示页码按钮的数量 pagerCount: { type: Number, default: function _default() { return _conf.default.pager.pagerCount || 7; } }, // 每页大小选项列表 pageSizes: { type: Array, default: function _default() { return _conf.default.pager.pageSizes || [10, 15, 20, 50, 100]; } }, // 列对其方式 align: { type: String, default: function _default() { return _conf.default.pager.align; } }, // 带边框 border: { type: Boolean, default: function _default() { return _conf.default.pager.border; } }, // 带背景颜色 background: { type: Boolean, default: function _default() { return _conf.default.pager.background; } }, // 默认的样式 perfect: { type: Boolean, default: function _default() { return _conf.default.pager.perfect; } }, // 自定义图标 iconPrevPage: String, iconJumpPrev: String, iconJumpNext: String, iconNextPage: String, iconJumpMore: String }, inject: { $grid: { default: null } }, data: function data() { return { showSizes: false, panelStyle: null, panelIndex: 0 }; }, computed: { vSize: function vSize() { return this.size || this.$parent.size || this.$parent.vSize; }, isSizes: function isSizes() { return this.layouts.some(function (name) { return name === 'Sizes'; }); }, pageCount: function pageCount() { return this.getPageCount(this.total, this.pageSize); }, numList: function numList() { var len = this.pageCount > this.pagerCount ? this.pagerCount - 2 : this.pagerCount; var rest = []; for (var index = 0; index < len; index++) { rest.push(index); } return rest; }, offsetNumber: function offsetNumber() { return Math.floor((this.pagerCount - 2) / 2); } }, created: function created() { this.panelIndex = _tools.UtilTools.nextZIndex(); _tools.GlobalEvent.on(this, 'mousedown', this.handleGlobalMousedownEvent); }, destroyed: function destroyed() { _tools.GlobalEvent.off(this, 'mousedown'); }, render: function render(h) { var _ref, _this = this; var vSize = this.vSize, align = this.align; return h('div', { class: ['plx-pager', (_ref = {}, _defineProperty(_ref, "size--".concat(vSize), vSize), _defineProperty(_ref, "align--".concat(align), align), _defineProperty(_ref, 'p--border', this.border), _defineProperty(_ref, 'p--background', this.background), _defineProperty(_ref, 'p--perfect', this.perfect), _defineProperty(_ref, 'is--loading', this.loading), _ref)] }, [h('div', { class: 'plx-pager--wrapper' }, this.layouts.map(function (name) { return _this["render".concat(name)](h); }))]); }, methods: { // 上一页 renderPrevPage: function renderPrevPage(h) { return h('span', { class: ['plx-pager--prev-btn', { 'is--disabled': this.currentPage <= 1 }], attrs: { title: _conf.default.i18n('plx.pager.prevPage') }, on: { click: this.prevPage } }, [h('i', { class: ['plx-pager--btn-icon', this.iconPrevPage || _conf.default.icon.prevPage] })]); }, // 向上翻页 renderPrevJump: function renderPrevJump(h, tagName) { return h(tagName || 'span', { class: ['plx-pager--jump-prev', { 'is--fixed': !tagName, 'is--disabled': this.currentPage <= 1 }], attrs: { title: _conf.default.i18n('plx.pager.prevJump') }, on: { click: this.prevJump } }, [tagName ? h('i', { class: ['plx-pager--jump-more', this.iconJumpMore || _conf.default.icon.jumpMore] }) : null, h('i', { class: ['plx-pager--jump-icon', this.iconJumpPrev || _conf.default.icon.jumpPrev] })]); }, // number renderNumber: function renderNumber(h) { return h('ul', { class: 'plx-pager--btn-wrapper' }, this.renderPageBtn(h)); }, // jumpNumber renderJumpNumber: function renderJumpNumber(h) { return h('ul', { class: 'plx-pager--btn-wrapper' }, this.renderPageBtn(h, true)); }, // 向下翻页 renderNextJump: function renderNextJump(h, tagName) { return h(tagName || 'span', { class: ['plx-pager--jump-next', { 'is--fixed': !tagName, 'is--disabled': this.currentPage >= this.pageCount }], attrs: { title: _conf.default.i18n('plx.pager.nextJump') }, on: { click: this.nextJump } }, [tagName ? h('i', { class: ['plx-pager--jump-more', this.iconJumpMore || _conf.default.icon.jumpMore] }) : null, h('i', { class: ['plx-pager--jump-icon', this.iconJumpNext || _conf.default.icon.jumpNext] })]); }, // 下一页 renderNextPage: function renderNextPage(h) { return h('span', { class: ['plx-pager--next-btn', { 'is--disabled': this.currentPage >= this.pageCount }], attrs: { title: _conf.default.i18n('plx.pager.nextPage') }, on: { click: this.nextPage } }, [h('i', { class: ['plx-pager--btn-icon', this.iconNextPage || _conf.default.icon.nextPage] })]); }, // sizes renderSizes: function renderSizes(h) { var _this2 = this; return h('span', { class: ['plx-pager--sizes', { 'is--active': this.showSizes }], ref: 'sizeBtn' }, [h('span', { class: 'size--content', on: { click: this.toggleSizePanel } }, [h('span', "".concat(this.pageSize).concat(_conf.default.i18n('plx.pager.pagesize'))), h('i', { class: "plx-pager--sizes-arrow ".concat(_conf.default.icon.caretBottom) })]), h('div', { class: 'plx-pager-size--select-wrapper', style: this.panelStyle, ref: 'sizePanel' }, [h('ul', { class: 'plx-pager-size--select' }, this.pageSizes.map(function (num) { return h('li', { class: ['size--option', { 'is--active': num === _this2.pageSize }], on: { click: function click() { return _this2.changePageSize(num); } } }, "".concat(num).concat(_conf.default.i18n('plx.pager.pagesize'))); }))])]); }, // FullJump renderFullJump: function renderFullJump(h) { return this.renderJump(h, true); }, // Jump renderJump: function renderJump(h, isFull) { return h('span', { class: 'plx-pager--jump' }, [isFull ? h('span', { class: 'plx-pager--goto-text' }, _conf.default.i18n('plx.pager.goto')) : null, h('input', { class: 'plx-pager--goto', domProps: { value: this.currentPage }, attrs: { type: 'text', autocomplete: 'off' }, on: { keydown: this.jumpKeydownEvent } }), isFull ? h('span', { class: 'plx-pager--classifier-text' }, _conf.default.i18n('plx.pager.pageClassifier')) : null]); }, // PageCount renderPageCount: function renderPageCount(h) { return h('span', { class: 'plx-pager--count' }, [h('span', { class: 'plx-pager--separator' }, '/'), h('span', this.pageCount)]); }, // total renderTotal: function renderTotal(h) { return h('span', { class: 'plx-pager--total' }, _xeUtils.default.template(_conf.default.i18n('plx.pager.total'), { total: this.total })); }, // number renderPageBtn: function renderPageBtn(h, showJump) { var _this3 = this; var numList = this.numList, currentPage = this.currentPage, pageCount = this.pageCount, pagerCount = this.pagerCount, offsetNumber = this.offsetNumber; var nums = []; 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('li', { class: 'plx-pager--num-btn', on: { click: function click() { return _this3.jumpPage(1); } } }, 1), this.renderPrevJump(h, 'li')); } numList.forEach(function (item, index) { var number = startNumber + index; if (number <= pageCount) { nums.push(h('li', { class: ['plx-pager--num-btn', { 'is--active': currentPage === number }], on: { click: function click() { return _this3.jumpPage(number); } }, key: number }, number)); } }); if (showJump && isGt) { nums.push(this.renderNextJump(h, 'li'), h('li', { class: 'plx-pager--num-btn', on: { click: function click() { return _this3.jumpPage(pageCount); } } }, pageCount)); } return nums; }, getPageCount: function getPageCount(total, size) { return Math.max(Math.ceil(total / size), 1); }, handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) { var $refs = this.$refs; if (this.showSizes && !(_tools.DomTools.getEventTargetNode(evnt, $refs.sizeBtn).flag || _tools.DomTools.getEventTargetNode(evnt, $refs.sizePanel).flag)) { this.hideSizePanel(); } }, prevPage: function prevPage() { var currentPage = this.currentPage; if (currentPage > 1) { this.jumpPage(Math.max(currentPage - 1, 1)); } }, nextPage: function nextPage() { var currentPage = this.currentPage, pageCount = this.pageCount; if (currentPage < pageCount) { this.jumpPage(Math.min(currentPage + 1, pageCount)); } }, prevJump: function prevJump() { this.jumpPage(Math.max(this.currentPage - this.numList.length, 1)); }, nextJump: function nextJump() { this.jumpPage(Math.min(this.currentPage + this.numList.length, this.pageCount)); }, jumpPage: function jumpPage(currentPage) { var type = 'current-change'; if (currentPage !== this.currentPage) { this.$emit('update:currentPage', currentPage); _tools.UtilTools.emitEvent(this, type, [currentPage]); this.emitPageChange(type, this.pageSize, currentPage); } }, changePageSize: function changePageSize(pageSize) { var type = 'size-change'; if (pageSize !== this.pageSize) { this.$emit('update:pageSize', pageSize); _tools.UtilTools.emitEvent(this, type, [pageSize]); this.emitPageChange(type, pageSize, Math.min(this.currentPage, this.getPageCount(this.total, pageSize))); } this.hideSizePanel(); }, jumpKeydownEvent: function jumpKeydownEvent(evnt) { if (evnt.keyCode === 13) { var value = _xeUtils.default.toNumber(evnt.target.value); var current = value <= 0 ? 1 : value >= this.pageCount ? this.pageCount : value; evnt.target.value = current; this.jumpPage(current); } else if (evnt.keyCode === 38) { evnt.preventDefault(); this.nextPage(); } else if (evnt.keyCode === 40) { evnt.preventDefault(); this.prevPage(); } }, emitPageChange: function emitPageChange(type, pageSize, currentPage) { _tools.UtilTools.emitEvent(this, 'page-change', [{ type: type, pageSize: pageSize, currentPage: currentPage }]); }, toggleSizePanel: function toggleSizePanel() { this[this.showSizes ? 'hideSizePanel' : 'showSizePanel'](); }, updateZindex: function updateZindex() { if (this.panelIndex < _tools.UtilTools.getLastZIndex()) { this.panelIndex = _tools.UtilTools.nextZIndex(); } }, showSizePanel: function showSizePanel() { var _this4 = this; this.showSizes = true; this.updateZindex(); this.$nextTick(function () { var _this4$$refs = _this4.$refs, sizeBtn = _this4$$refs.sizeBtn, sizePanel = _this4$$refs.sizePanel; _this4.panelStyle = { zIndex: _this4.panelIndex, bottom: "".concat(sizeBtn.clientHeight + 6, "px"), left: "-".concat(sizePanel.clientWidth / 2 - sizeBtn.clientWidth / 2, "px") }; }); }, hideSizePanel: function hideSizePanel() { this.showSizes = false; } } }; exports.default = _default2;