@brutforce/vue3-paginate
Version:
<p> <b>Vue3 Paginate</b> is a very simple Pagination component for Vue 3 and TailwindCSS. </p>
445 lines (409 loc) • 14.2 kB
JavaScript
'use strict';var mitt=require('mitt'),vue=require('vue');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var mitt__default=/*#__PURE__*/_interopDefaultLegacy(mitt);function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}var emitter = mitt__default["default"]();var script$1 = {
name: 'Vue3Paginate',
props: {
maxPages: {
type: Number,
required: false,
default: 3
},
perPage: {
type: Number,
required: false,
default: 5
},
totalPages: {
type: Number,
required: false,
default: 10
},
currentPage: {
type: Number,
required: false,
default: 1
},
showFirstLast: {
type: Boolean,
default: true
},
wrapperClasses: {
type: String,
required: false,
default: 'shadow-md border-1 rounded-lg'
},
dotClasses: {
type: String,
required: false,
default: 'px-3 py-auto cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400'
},
activePageClasses: {
type: String,
required: false,
default: 'bg-indigo-500 hover:bg-indigo-600 text-white'
},
pageClasses: {
type: String,
required: false,
default: 'px-2 sm:px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100'
}
},
computed: {
totalNumPages: function totalNumPages() {
var total = this.totalPages;
if (total > this.perPage) {
return Math.round(total / this.perPage);
} else {
return 1;
}
},
maxVisiblePages: function maxVisiblePages() {
if (this.totalNumPages > this.maxPages) {
return this.maxPages - 1;
} else {
return this.totalNumPages;
}
},
startPage: function startPage() {
if (this.theCurrentPage === 1) {
return 1;
}
if (this.theCurrentPage === this.totalNumPages) {
var start = this.totalNumPages - this.maxVisiblePages;
return start >= 1 ? start : 1;
}
return this.theCurrentPage > 1 ? this.theCurrentPage - 1 : 1;
},
pages: function pages() {
var range = [];
for (var i = this.startPage; i <= Math.min(this.startPage + this.maxVisiblePages, this.totalNumPages); i++) {
if (i > 0) {
range.push({
number: i,
isActive: i === this.theCurrentPage
});
}
}
return range;
},
visiblePages: function visiblePages() {
return null;
},
isOnFirstPage: function isOnFirstPage() {
return this.theCurrentPage === 1;
},
isOnLastPage: function isOnLastPage() {
return this.theCurrentPage === this.totalNumPages;
},
showFirstDots: function showFirstDots() {
return this.theCurrentPage > this.maxVisiblePages ? true : false;
},
showLastDots: function showLastDots() {
return this.totalNumPages - this.theCurrentPage > 5 ? true : false;
}
},
data: function data() {
return {
theCurrentPage: this.currentPage
};
},
mounted: function mounted() {
emitter.on('btnClicked', this.handleBtnClicked);
emitter.emit('gotTotalPages', this.totalNumPages);
},
methods: {
handleBtnClicked: function handleBtnClicked(page) {
var previousText = ['prev', 'Prev', 'previous', 'Previos'];
if (page === 'first' || page === 'First') {
this.onClickFirstPage();
}
if (previousText.includes(page)) {
this.onClickPreviousPage();
}
if (page === 'next' || page === 'Next') {
this.onClickNextPage();
}
if (page === 'last' || page === 'Last') {
this.onClickLastPage();
}
},
onClickFirstPage: function onClickFirstPage() {
var page = 1;
this.theCurrentPage = page;
this.$emit('input', this.theCurrentPage);
emitter.emit('pageChanged', this.theCurrentPage);
},
onClickPreviousPage: function onClickPreviousPage() {
var page = this.getPage(this.theCurrentPage - 1);
if (page) {
page.isActive = true;
this.theCurrentPage = page.number;
this.$emit('input', this.theCurrentPage);
emitter.emit('pageChanged', this.theCurrentPage);
}
},
onClickPage: function onClickPage(page) {
this.theCurrentPage = page.number;
page.isActive = true;
this.$emit('input', this.theCurrentPage);
emitter.emit('pageChanged', this.theCurrentPage);
},
onClickNextPage: function onClickNextPage() {
var page = this.getPage(this.theCurrentPage + 1);
if (page) {
page.isActive = true;
this.theCurrentPage = page.number;
this.$emit('input', this.theCurrentPage);
emitter.emit('pageChanged', this.theCurrentPage);
}
},
onClickLastPage: function onClickLastPage() {
var page = this.totalNumPages;
this.theCurrentPage = page;
this.$emit('input', this.theCurrentPage);
emitter.emit('pageChanged', this.theCurrentPage);
},
getPage: function getPage(num) {
return this.pages.filter(function (page) {
return page.number == num;
})[0];
}
}
};var _hoisted_1$1 = {
class: "z-10 inline-flex"
};
var _hoisted_2 = {
class: "flex justify-between items-center text-sm"
};
var _hoisted_3 = {
key: 0,
class: "border-r-1"
};
var _hoisted_4 = {
class: "border-r-1 relative dark:border-gray-850"
};
var _hoisted_5 = {
key: 1,
class: "border-r-1 hidden sm:block"
};
var _hoisted_6 = /*#__PURE__*/vue.createElementVNode("span", {
class: "inline-block align-middle"
}, [/*#__PURE__*/vue.createElementVNode("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
class: "w-4 h-4"
}, [/*#__PURE__*/vue.createElementVNode("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
})])], -1);
var _hoisted_7 = [_hoisted_6];
var _hoisted_8 = ["onClick", "disabled"];
var _hoisted_9 = {
key: 2,
class: "border-r-1 hidden sm:block"
};
var _hoisted_10 = /*#__PURE__*/vue.createElementVNode("span", {
class: "inline-block align-middle"
}, [/*#__PURE__*/vue.createElementVNode("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
class: "w-4 h-4"
}, [/*#__PURE__*/vue.createElementVNode("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
})])], -1);
var _hoisted_11 = [_hoisted_10];
var _hoisted_12 = {
class: "relative"
};
var _hoisted_13 = {
key: 3,
class: "border-l-1"
};
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [vue.createElementVNode("nav", {
class: vue.normalizeClass(["", $props.wrapperClasses]),
"aria-label": "Pagination"
}, [vue.createElementVNode("ul", _hoisted_2, [$props.showFirstLast ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_3, [vue.renderSlot(_ctx.$slots, "first")])) : vue.createCommentVNode("", true), vue.createElementVNode("li", _hoisted_4, [vue.renderSlot(_ctx.$slots, "prev")]), $options.showFirstDots ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_5, [vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass(["", $props.dotClasses]),
disabled: true
}, _hoisted_7, 2)])) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.pages, function (page) {
return vue.openBlock(), vue.createElementBlock("li", {
class: "border-r-1",
key: page.number
}, [vue.createElementVNode("button", {
onClick: function onClick($event) {
return $options.onClickPage(page);
},
type: "button",
class: vue.normalizeClass(["", [$props.pageClasses, page.isActive ? "".concat($props.activePageClasses) : '']]),
disabled: page.isActive
}, vue.toDisplayString(page.number), 11, _hoisted_8)]);
}), 128)), $options.showLastDots ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9, [vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass($props.dotClasses),
disabled: true
}, _hoisted_11, 2)])) : vue.createCommentVNode("", true), vue.createElementVNode("li", _hoisted_12, [vue.renderSlot(_ctx.$slots, "next")]), $props.showFirstLast ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_13, [vue.renderSlot(_ctx.$slots, "last")])) : vue.createCommentVNode("", true)])], 2)]);
}script$1.render = render$1;var script = {
name: 'NavButton',
props: {
text: {
type: String,
required: false
},
page: {
type: [String, Number],
required: true
},
isFirst: {
type: Boolean,
required: false,
default: false
},
isPrev: {
type: Boolean,
required: false,
default: false
},
isNext: {
type: Boolean,
required: false,
default: false
},
isLast: {
type: Boolean,
required: false,
default: false
}
},
data: function data() {
return {
shouldDisable: true,
totalPages: 0,
currentPage: null
};
},
mounted: function mounted() {
emitter.on('pageChanged', this.handlePageChange);
emitter.on('gotTotalPages', this.setTotalPages);
this.initShouldDisable();
},
methods: {
setTotalPages: function setTotalPages(total) {
this.totalPages = total;
},
handleClick: function handleClick() {
emitter.emit('btnClicked', this.page);
},
handlePageChange: function handlePageChange(page) {
var first = ['first', 'First'];
var previous = ['prev', 'Prev', 'previous', 'Previous'];
var next = ['next', 'Next'];
var last = ['last', 'Last'];
if (first.includes(this.page) && page == 1 || this.isFirst && page == 1) {
return this.shouldDisable = true;
}
if (previous.includes(this.page) && page == 1 || this.isPrev && page == 1) {
return this.shouldDisable = true;
}
if (next.includes(this.page) && page / this.totalPages == 1 || this.isNext && page / this.totalPages == 1) {
return this.shouldDisable = true;
}
if (last.includes(this.page) && page / this.totalPages == 1 || this.isLast && page / this.totalPages == 1) {
return this.shouldDisable = true;
}
if (page == this.page) {
return this.shouldDisable = true;
}
return this.shouldDisable = false;
},
initShouldDisable: function initShouldDisable() {
this.handlePageChange(1);
}
}
};var _hoisted_1 = ["disabled"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("button", {
onClick: _cache[0] || (_cache[0] = function () {
return $options.handleClick && $options.handleClick.apply($options, arguments);
}),
disabled: $data.shouldDisable,
class: vue.normalizeClass({
'cursor-not-allowed': $data.shouldDisable
}),
type: "button"
}, [vue.renderSlot(_ctx.$slots, "default", {}, function () {
return [vue.createTextVNode(vue.toDisplayString($props.text), 1)];
})], 10, _hoisted_1);
}script.render = render;/* eslint-disable import/prefer-default-export */var components$1=/*#__PURE__*/Object.freeze({__proto__:null,Paginate:script$1,NavButton:script});var install = function installVue3Paginate(app) {
Object.entries(components$1).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
componentName = _ref2[0],
component = _ref2[1];
app.component(componentName, component);
});
}; // Create module definition for Vue.use()
var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,Paginate:script$1,NavButton:script});// only expose one global var, with component exports exposed as properties of
// that global var (eg. plugin.component)
Object.entries(components).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
componentName = _ref2[0],
component = _ref2[1];
if (componentName !== 'default') {
var key = componentName;
var val = component;
install[key] = val;
}
});module.exports=install;