vue-pagination-tw/dist/vue-pagination-tw.min.js

Simple Vue Pagination component that can be used in any project with range & ui customization.

var VuePaginationTw=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,o,a=[],l=!0,i=!1;try{for(r=r.call(e);!(l=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);l=!0);}catch(e){i=!0,o=e}finally{try{l||null==r.return||r.return()}finally{if(i)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var n=[e.createElementVNode("span",{class:"sr-only"},"Previous",-1),e.createElementVNode("svg",{class:"h-5 w-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[e.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)],o={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"},a=["onClick"],l={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"},i=[e.createElementVNode("span",{class:"sr-only"},"Next",-1),e.createElementVNode("svg",{class:"h-5 w-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},[e.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)],c={class:"text-sm text-gray-700"},u=e.createTextVNode(" Showing "),s={class:"font-medium"},d=e.createTextVNode(" to "),m={class:"font-medium"},p=e.createTextVNode(" of "),f={class:"font-medium"},g=e.createTextVNode(" results "),y={key:0},b={for:"search",class:"pr-3 text-gray-500 text-xs font-semibold uppercase"},v=e.defineComponent({props:{currentPage:{type:Number,required:!0},totalItems:{type:Number,required:!0},perPage:{type:Number,required:!0},pageRange:{type:Number,default:2},goButton:{type:Boolean,default:!1},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(t,r){var v=r.emit,x=t,h=e.ref(1),w=Math.ceil(x.totalItems/x.perPage),N=e.computed((function(){return(x.currentPage-1)*x.perPage+1})),V=e.computed((function(){var e=x.currentPage*x.perPage;return x.totalItems<e?x.totalItems:e})),k=e.computed((function(){return 1===x.currentPage})),C=e.computed((function(){return x.currentPage>=w})),E=function(e){e>0&&e<=w&&v("page-changed",e)},B=e.computed((function(){var e=x.currentPage-x.pageRange;return e>0?e:1})),P=e.computed((function(){var e=x.currentPage+x.pageRange;return e<w?e:w})),S=function(){return 1!==B.value},z=function(){return P.value<w},A=e.computed((function(){for(var e=[],t=B.value;t<=P.value;t++)e.push(t);return e}));return function(r,v){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"flex justify-between items-center":t.goButton})},[e.createElementVNode("div",{class:e.normalizeClass({"flex justify-between items-center":"simple"===x.styled})},[e.createElementVNode("nav",{class:e.normalizeClass(["relative z-0 inline-flex rounded-md shadow-sm -space-x-px",{"mb-3":"centered"===x.styled}]),"aria-label":"Pagination"},[e.createElementVNode("a",{href:"#",class:e.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":e.unref(k)}]),onClick:v[0]||(v[0]=e.withModifiers((function(e){return E(t.currentPage-1)}),["prevent"]))},n,2),S()?(e.openBlock(),e.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:v[1]||(v[1]=e.withModifiers((function(e){return E(1)}),["prevent"]))},"1")):e.createCommentVNode("",!0),S()?(e.openBlock(),e.createElementBlock("span",o,"...")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(A),(function(r,n){return e.openBlock(),e.createElementBlock("a",{href:"#","aria-current":"page",key:n,class:e.normalizeClass(["bg-white border border-gray-300 text-gray-500 relative inline-flex items-center px-4 py-2 text-sm font-medium",(o={},l="z-10 bg-indigo-50 !".concat(t.borderActiveColor," !").concat(t.borderTextActiveColor),i=t.currentPage==r,l in o?Object.defineProperty(o,l,{value:i,enumerable:!0,configurable:!0,writable:!0}):o[l]=i,o)]),onClick:e.withModifiers((function(e){return E(r)}),["prevent"])},e.toDisplayString(r),11,a);var o,l,i})),128)),z()?(e.openBlock(),e.createElementBlock("span",l,"...")):e.createCommentVNode("",!0),z()?(e.openBlock(),e.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:v[2]||(v[2]=e.withModifiers((function(t){return E(e.unref(w))}),["prevent"]))},e.toDisplayString(e.unref(w)),1)):e.createCommentVNode("",!0),e.createElementVNode("a",{href:"#",class:e.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":e.unref(C)}]),onClick:v[3]||(v[3]=e.withModifiers((function(e){return E(t.currentPage+1)}),["prevent"]))},i,2)],2),e.createElementVNode("div",{class:e.normalizeClass({"order-first":"simple"===x.styled})},[e.createElementVNode("p",c,[u,e.createElementVNode("span",s,e.toDisplayString(e.unref(N)),1),d,e.createElementVNode("span",m,e.toDisplayString(e.unref(V)),1),p,e.createElementVNode("span",f,e.toDisplayString(t.totalItems),1),g])],2)],2),t.goButton?(e.openBlock(),e.createElementBlock("div",y,[e.createElementVNode("label",b,e.toDisplayString(t.textBeforeInput),1),e.withDirectives(e.createElementVNode("input",{type:"text",placeholder:"Page no",class:e.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(t.borderActiveColor)]),"onUpdate:modelValue":v[4]||(v[4]=function(e){return h.value=e})},null,2),[[e.vModelText,h.value]]),e.createElementVNode("button",{class:"px-4 py-1.5 rounded-r bg-indigo-500 text-white",onClick:v[5]||(v[5]=e.withModifiers((function(e){return E(h.value)}),["prevent"]))},e.toDisplayString(t.textAfterInput),1)])):e.createCommentVNode("",!0)],2)}}}),x=function(){var e=v;return e.install=function(t){t.component("VuePaginationTw",e)},e}(),h=Object.freeze({__proto__:null,default:x});return Object.entries(h).forEach((function(e){var r=t(e,2),n=r[0],o=r[1];"default"!==n&&(x[n]=o)})),x}(Vue);