vue-pagination-tw
Version:
Simple Vue Pagination component that can be used in any project with range & ui customization.
345 lines (305 loc) • 12.6 kB
JavaScript
;var vue=require('vue');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;
}
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 _hoisted_1 = /*#__PURE__*/vue.createElementVNode("span", {
class: "sr-only"
}, "Previous", -1);
var _hoisted_2 = /*#__PURE__*/vue.createElementVNode("svg", {
class: "h-5 w-5",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
fill: "currentColor",
"aria-hidden": "true"
}, [/*#__PURE__*/vue.createElementVNode("path", {
"fill-rule": "evenodd",
d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
"clip-rule": "evenodd"
})], -1);
var _hoisted_3 = [_hoisted_1, _hoisted_2];
var _hoisted_4 = {
key: 1,
class: "relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
};
var _hoisted_5 = ["onClick"];
var _hoisted_6 = {
key: 2,
class: "relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
};
var _hoisted_7 = /*#__PURE__*/vue.createElementVNode("span", {
class: "sr-only"
}, "Next", -1);
var _hoisted_8 = /*#__PURE__*/vue.createElementVNode("svg", {
class: "h-5 w-5",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
fill: "currentColor",
"aria-hidden": "true"
}, [/*#__PURE__*/vue.createElementVNode("path", {
"fill-rule": "evenodd",
d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
"clip-rule": "evenodd"
})], -1);
var _hoisted_9 = [_hoisted_7, _hoisted_8];
var _hoisted_10 = {
class: "text-sm text-gray-700"
};
var _hoisted_11 = /*#__PURE__*/vue.createTextVNode(" Showing ");
var _hoisted_12 = {
class: "font-medium"
};
var _hoisted_13 = /*#__PURE__*/vue.createTextVNode(" to ");
var _hoisted_14 = {
class: "font-medium"
};
var _hoisted_15 = /*#__PURE__*/vue.createTextVNode(" of ");
var _hoisted_16 = {
class: "font-medium"
};
var _hoisted_17 = /*#__PURE__*/vue.createTextVNode(" results ");
var _hoisted_18 = {
key: 0
};
var _hoisted_19 = {
for: "search",
class: "pr-3 text-gray-500 text-xs font-semibold uppercase"
};
var script = /*#__PURE__*/vue.defineComponent({
props: {
currentPage: {
type: Number,
required: true
},
totalItems: {
type: Number,
required: true
},
perPage: {
type: Number,
required: true
},
pageRange: {
type: Number,
default: 2
},
goButton: {
type: Boolean,
default: false
},
textBeforeInput: {
type: String,
default: 'Go to page'
},
textAfterInput: {
type: String,
default: 'Go'
},
borderActiveColor: {
type: String,
default: 'border-indigo-500'
},
borderTextActiveColor: {
type: String,
default: 'text-indigo-500'
},
styled: {
type: String,
default: 'simple'
}
},
emits: ["page-changed"],
setup: function setup(__props, _ref) {
var emit = _ref.emit;
var props = __props;
var pageInput = vue.ref(1);
var totalPages = Math.ceil(props.totalItems / props.perPage);
var paginationFrom = vue.computed(function () {
return (props.currentPage - 1) * props.perPage + 1;
});
var paginationTo = vue.computed(function () {
var end = props.currentPage * props.perPage;
return props.totalItems < end ? props.totalItems : end;
});
var isFirstPage = vue.computed(function () {
return props.currentPage === 1;
});
var isLastPage = vue.computed(function () {
return props.currentPage >= totalPages;
}); // methods
var changePage = function changePage(page) {
if (page > 0 && page <= totalPages) {
emit('page-changed', page);
}
}; // try
var rangeStart = vue.computed(function () {
var start = props.currentPage - props.pageRange;
return start > 0 ? start : 1;
});
var rangeEnd = vue.computed(function () {
var end = props.currentPage + props.pageRange;
return end < totalPages ? end : totalPages;
});
var hasFirst = function hasFirst() {
return rangeStart.value !== 1;
};
var hasLast = function hasLast() {
return rangeEnd.value < totalPages;
};
var calculatedPages = vue.computed(function () {
var pages = [];
for (var i = rangeStart.value; i <= rangeEnd.value; i++) {
pages.push(i);
}
return pages;
});
return function (_ctx, _cache) {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass({
'flex justify-between items-center': __props.goButton
})
}, [vue.createElementVNode("div", {
class: vue.normalizeClass({
'flex justify-between items-center': props.styled === 'simple'
})
}, [vue.createElementVNode("nav", {
class: vue.normalizeClass(["relative z-0 inline-flex rounded-md shadow-sm -space-x-px", {
'mb-3': props.styled === 'centered'
}]),
"aria-label": "Pagination"
}, [vue.createElementVNode("a", {
href: "#",
class: vue.normalizeClass(["relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50", {
'cursor-not-allowed bg-gray-200 hover:bg-gray-300': vue.unref(isFirstPage)
}]),
onClick: _cache[0] || (_cache[0] = vue.withModifiers(function ($event) {
return changePage(__props.currentPage - 1);
}, ["prevent"]))
}, _hoisted_3, 2), hasFirst() ? (vue.openBlock(), vue.createElementBlock("a", {
key: 0,
href: "#",
"aria-current": "page",
class: "bg-white border border-gray-300 text-gray-500 relative inline-flex items-center px-4 py-2 text-sm font-medium",
onClick: _cache[1] || (_cache[1] = vue.withModifiers(function ($event) {
return changePage(1);
}, ["prevent"]))
}, "1")) : vue.createCommentVNode("", true), hasFirst() ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, "...")) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(calculatedPages), function (page, index) {
return vue.openBlock(), vue.createElementBlock("a", {
href: "#",
"aria-current": "page",
key: index,
class: vue.normalizeClass(["bg-white border border-gray-300 text-gray-500 relative inline-flex items-center px-4 py-2 text-sm font-medium", _defineProperty({}, "z-10 bg-indigo-50 !".concat(__props.borderActiveColor, " !").concat(__props.borderTextActiveColor), __props.currentPage == page)]),
onClick: vue.withModifiers(function ($event) {
return changePage(page);
}, ["prevent"])
}, vue.toDisplayString(page), 11, _hoisted_5);
}), 128)), hasLast() ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, "...")) : vue.createCommentVNode("", true), hasLast() ? (vue.openBlock(), vue.createElementBlock("a", {
key: 3,
href: "#",
"aria-current": "page",
class: "bg-white border border-gray-300 text-gray-500 relative inline-flex items-center px-4 py-2 text-sm font-medium",
onClick: _cache[2] || (_cache[2] = vue.withModifiers(function ($event) {
return changePage(vue.unref(totalPages));
}, ["prevent"]))
}, vue.toDisplayString(vue.unref(totalPages)), 1)) : vue.createCommentVNode("", true), vue.createElementVNode("a", {
href: "#",
class: vue.normalizeClass(["relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50", {
'cursor-not-allowed bg-gray-200 hover:bg-gray-300': vue.unref(isLastPage)
}]),
onClick: _cache[3] || (_cache[3] = vue.withModifiers(function ($event) {
return changePage(__props.currentPage + 1);
}, ["prevent"]))
}, _hoisted_9, 2)], 2), vue.createElementVNode("div", {
class: vue.normalizeClass({
'order-first': props.styled === 'simple'
})
}, [vue.createElementVNode("p", _hoisted_10, [_hoisted_11, vue.createElementVNode("span", _hoisted_12, vue.toDisplayString(vue.unref(paginationFrom)), 1), _hoisted_13, vue.createElementVNode("span", _hoisted_14, vue.toDisplayString(vue.unref(paginationTo)), 1), _hoisted_15, vue.createElementVNode("span", _hoisted_16, vue.toDisplayString(__props.totalItems), 1), _hoisted_17])], 2)], 2), __props.goButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18, [vue.createElementVNode("label", _hoisted_19, vue.toDisplayString(__props.textBeforeInput), 1), vue.withDirectives(vue.createElementVNode("input", {
type: "text",
placeholder: "Page no",
class: vue.normalizeClass(["w-28 px-4 py-1 rounded-l outline-none border-t-2 border-l-2 border-b-2 placeholder:text-xs uppercase font-semibold", "focus:".concat(__props.borderActiveColor)]),
"onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
return pageInput.value = $event;
})
}, null, 2), [[vue.vModelText, pageInput.value]]), vue.createElementVNode("button", {
class: "px-4 py-1.5 rounded-r bg-indigo-500 text-white",
onClick: _cache[5] || (_cache[5] = vue.withModifiers(function ($event) {
return changePage(pageInput.value);
}, ["prevent"]))
}, vue.toDisplayString(__props.textAfterInput), 1)])) : vue.createCommentVNode("", true)], 2);
};
}
});// Import vue component
// Default export is installable instance of component.
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),
var component = /*#__PURE__*/(function () {
// Assign InstallableComponent type
var installable = script; // Attach install function executed by Vue.use()
installable.install = function (app) {
app.component("VuePaginationTw", installable);
};
return installable;
})(); // It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = directive;
var namedExports=/*#__PURE__*/Object.freeze({__proto__:null,'default':component});// only expose one global var, with named exports exposed as properties of
// that global var (eg. plugin.namedExport)
Object.entries(namedExports).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
exportName = _ref2[0],
exported = _ref2[1];
if (exportName !== "default") component[exportName] = exported;
});module.exports=component;