import { createNamespace } from '../utils'; import { BORDER } from '../utils/constant'; var _createNamespace = createNamespace('pagination'), createComponent = _createNamespace[0], bem = _createNamespace[1], t = _createNamespace[2]; function makePage(number, text, active) { return { number: number, text: text, active: active }; } export default createComponent({ props: { prevText: String, nextText: String, forceEllipses: Boolean, mode: { type: String, default: 'multi' }, value: { type: Number, default: 0 }, pageCount: { type: [Number, String], default: 0 }, totalItems: { type: [Number, String], default: 0 }, itemsPerPage: { type: [Number, String], default: 10 }, showPageSize: { type: [Number, String], default: 5 } }, computed: { count: function count() { var count = this.pageCount || Math.ceil(this.totalItems / this.itemsPerPage); return Math.max(1, count); }, pages: function pages() { var pages = []; var pageCount = this.count; var showPageSize = +this.showPageSize; if (this.mode !== 'multi') { return pages; } // Default page limits var startPage = 1; var endPage = pageCount; var isMaxSized = showPageSize < pageCount; // recompute if showPageSize if (isMaxSized) { // Current page is displayed in the middle of the visible ones startPage = Math.max(this.value - Math.floor(showPageSize / 2), 1); endPage = startPage + showPageSize - 1; // Adjust if limit is exceeded if (endPage > pageCount) { endPage = pageCount; startPage = endPage - showPageSize + 1; } } // Add page number links for (var number = startPage; number <= endPage; number++) { var page = makePage(number, number, number === this.value); pages.push(page); } // Add links to move between page sets if (isMaxSized && showPageSize > 0 && this.forceEllipses) { if (startPage > 1) { var previousPageSet = makePage(startPage - 1, '...', false); pages.unshift(previousPageSet); } if (endPage < pageCount) { var nextPageSet = makePage(endPage + 1, '...', false); pages.push(nextPageSet); } } return pages; } }, watch: { value: { handler: function handler(page) { this.select(page || this.value); }, immediate: true } }, methods: { select: function select(page, emitChange) { page = Math.min(this.count, Math.max(1, page)); if (this.value !== page) { this.$emit('input', page); if (emitChange) { this.$emit('change', page); } } } }, render: function render() { var _this = this, _this$slots, _this$slots3; var h = arguments[0]; var value = this.value; var simple = this.mode !== 'multi'; var onSelect = function onSelect(value) { return function () { _this.select(value, true); }; }; return h("ul", { "class": bem({ simple: simple }) }, [h("li", { "class": [bem('item', { disabled: value === 1 }), bem('prev'), BORDER], "on": { "click": onSelect(value - 1) } }, [((_this$slots = this.slots('prev-text')) != null ? _this$slots : this.prevText) || t('prev')]), this.pages.map(function (page) { var _this$slots2; return h("li", { "class": [bem('item', { active: page.active }), bem('page'), BORDER], "on": { "click": onSelect(page.number) } }, [(_this$slots2 = _this.slots('page', page)) != null ? _this$slots2 : page.text]); }), simple && h("li", { "class": bem('page-desc') }, [this.slots('pageDesc') || value + "/" + this.count]), h("li", { "class": [bem('item', { disabled: value === this.count }), bem('next'), BORDER], "on": { "click": onSelect(value + 1) } }, [((_this$slots3 = this.slots('next-text')) != null ? _this$slots3 : this.nextText) || t('next')])]); } });