@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
165 lines (162 loc) • 6.41 kB
JavaScript
import { helper } from '@appbaseio/reactivecore';
import _transformOn from '@vue/babel-helper-vue-transform-on';
import { createVNode, mergeProps, createTextVNode, isVNode } from 'vue';
import VueTypes from 'vue-types';
import { p as pagination, B as Button } from './Button-8178e39a.js';
import { t as types } from './vueTypes-5d575822.js';
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var getClassName = helper.getClassName,
handleA11yAction = helper.handleA11yAction;
function getStartPage(totalPages, currentPage, showEndPage) {
var midValue = parseInt(totalPages / 2, 10);
var start = currentPage - (showEndPage ? Math.ceil(midValue / 2) - 1 : midValue);
return start > 1 ? start : 2;
}
var Pagination = {
name: 'Pagination',
functional: true,
props: {
currentPage: types.number,
innerClass: types.style,
pages: types.number,
setPage: types.func,
totalPages: types.number,
showEndPage: VueTypes.bool,
prevLabel: types.string,
nextLabel: types.string
},
render: function render(context) {
var props = context.$props;
var onPrevPage = function onPrevPage() {
if (props.currentPage) {
props.setPage(props.currentPage - 1);
}
};
var onNextPage = function onNextPage() {
if (props.currentPage < props.totalPages - 1) {
props.setPage(props.currentPage + 1);
}
};
if (!props.totalPages) {
return null;
}
var innerClassName = getClassName(props.innerClass, 'button');
var primary = props.currentPage === 0;
var className = innerClassName || primary ? innerClassName + " " + (primary ? 'active' : '') : '';
var buildPaginationDOM = function buildPaginationDOM(position) {
var pages = props.pages,
currentPage = props.currentPage,
totalPages = props.totalPages,
setPage = props.setPage,
showEndPage = props.showEndPage;
var start = position === 'start' ? getStartPage(pages, currentPage, showEndPage) : Math.max(2, Math.ceil(totalPages - (pages - 1) / 2 + 1));
var paginationButtons = [];
var endPage = start;
if (start <= totalPages) {
var totalPagesToShow = pages < totalPages ? start + (pages - 1) : totalPages + 1;
if (showEndPage) {
totalPagesToShow = position === 'start' ? start + (Math.ceil(pages / 2) - pages % 2) : totalPages + 1;
}
if (currentPage > totalPages - pages + 2) {
start = Math.max(2, totalPages - pages + 2);
totalPagesToShow = start + pages;
}
var _loop = function _loop(i) {
var activeButton = currentPage === i - 1;
var classNameBtn = innerClassName || activeButton ? innerClassName + " " + (activeButton ? 'active' : '') : '';
var pageBtn = createVNode(Button, {
"class": classNameBtn,
"primary": activeButton,
"tabIndex": "0",
"onKeyPress": function onKeyPress(event) {
return handleA11yAction(event, function () {
return setPage(i - 1);
});
},
"alt": "page-" + i,
"onClick": function onClick() {
return setPage(i - 1);
}
}, _isSlot(i) ? i : {
"default": function _default() {
return [i];
}
});
if (i <= totalPages + 1) {
paginationButtons.push(pageBtn);
if (i === Math.min(totalPages + 1, totalPagesToShow) - 1) {
endPage = i;
}
}
};
for (var i = start; i < Math.min(totalPages + 1, totalPagesToShow); i += 1) {
_loop(i);
}
}
return [paginationButtons, start, endPage];
};
var buildIntermediatePaginationDom = function buildIntermediatePaginationDom() {
var showEndPage = props.showEndPage,
currentPage = props.currentPage,
totalPages = props.totalPages,
pages = props.pages;
if (!showEndPage) return buildPaginationDOM('start')[0];
if (currentPage <= totalPages - pages + 2 || totalPages < pages) {
return buildPaginationDOM('start')[0];
}
return null;
};
return createVNode("div", {
"class": pagination + " " + getClassName(props.innerClass, 'pagination')
}, [createVNode(Button, mergeProps(_transformOn({
click: onPrevPage,
'key-press': function keyPress(event) {
return handleA11yAction(event, onPrevPage);
}
}), {
"class": getClassName(props.innerClass, 'button') || '',
"disabled": props.currentPage === 0,
"tabIndex": "0"
}), {
"default": function _default() {
return [props.prevLabel || 'Prev'];
}
}), createVNode(Button, mergeProps(_transformOn({
click: function click() {
return props.setPage(0);
}
}), {
"class": className,
"primary": primary,
"onKeyPress": function onKeyPress(event) {
return handleA11yAction(event, function () {
return props.setPage(0);
});
},
"tabIndex": "0"
}), {
"default": function _default() {
return [createTextVNode("1")];
}
}), props.showEndPage && props.currentPage >= Math.floor(props.pages / 2) + !!(props.pages % 2) && buildPaginationDOM('start')[1] !== 2 ? createVNode("span", null, [createTextVNode("...")]) : null, buildIntermediatePaginationDom(), props.showEndPage && props.pages > 2 && props.currentPage <= props.totalPages - Math.ceil(props.pages * 0.75) && buildPaginationDOM('start')[2] !== buildPaginationDOM('end')[1] - 1 ? createVNode("span", null, [createTextVNode("...")]) : null, props.showEndPage && props.totalPages >= props.pages && buildPaginationDOM('end')[0], createVNode(Button, mergeProps(_transformOn({
click: onNextPage,
'key-press': function keyPress(event) {
return handleA11yAction(event, onNextPage);
}
}), {
"class": getClassName(props.innerClass, 'button') || '',
"disabled": props.currentPage >= props.totalPages - 1,
"tabIndex": "0"
}), {
"default": function _default() {
return [props.nextLabel || 'Next'];
}
})]);
}
};
Pagination.install = function (Vue) {
Vue.component(Pagination.name, Pagination);
};
export { Pagination as P };