UNPKG

@brutforce/vue3-paginate

Version:

<p> <b>Vue3 Paginate</b> is a very simple Pagination component for Vue 3 and TailwindCSS. </p>

1 lines 8.57 kB
var Vue3Paginate=function(e,t){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(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,a,i=[],s=!0,o=!1;try{for(r=r.call(e);!(s=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);s=!0);}catch(e){o=!0,a=e}finally{try{s||null==r.return||r.return()}finally{if(o)throw a}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return a(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return a(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 a(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 i=r(e).default(),s={name:"Vue3Paginate",props:{maxPages:{type:Number,required:!1,default:3},perPage:{type:Number,required:!1,default:5},totalPages:{type:Number,required:!1,default:10},currentPage:{type:Number,required:!1,default:1},showFirstLast:{type:Boolean,default:!0},wrapperClasses:{type:String,required:!1,default:"shadow-md border-1 rounded-lg"},dotClasses:{type:String,required:!1,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:!1,default:"bg-indigo-500 hover:bg-indigo-600 text-white"},pageClasses:{type:String,required:!1,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(){var e=this.totalPages;return e>this.perPage?Math.round(e/this.perPage):1},maxVisiblePages:function(){return this.totalNumPages>this.maxPages?this.maxPages-1:this.totalNumPages},startPage:function(){if(1===this.theCurrentPage)return 1;if(this.theCurrentPage===this.totalNumPages){var e=this.totalNumPages-this.maxVisiblePages;return e>=1?e:1}return this.theCurrentPage>1?this.theCurrentPage-1:1},pages:function(){for(var e=[],t=this.startPage;t<=Math.min(this.startPage+this.maxVisiblePages,this.totalNumPages);t++)t>0&&e.push({number:t,isActive:t===this.theCurrentPage});return e},visiblePages:function(){return null},isOnFirstPage:function(){return 1===this.theCurrentPage},isOnLastPage:function(){return this.theCurrentPage===this.totalNumPages},showFirstDots:function(){return this.theCurrentPage>this.maxVisiblePages},showLastDots:function(){return this.totalNumPages-this.theCurrentPage>5}},data:function(){return{theCurrentPage:this.currentPage}},mounted:function(){i.on("btnClicked",this.handleBtnClicked),i.emit("gotTotalPages",this.totalNumPages)},methods:{handleBtnClicked:function(e){"first"!==e&&"First"!==e||this.onClickFirstPage(),["prev","Prev","previous","Previos"].includes(e)&&this.onClickPreviousPage(),"next"!==e&&"Next"!==e||this.onClickNextPage(),"last"!==e&&"Last"!==e||this.onClickLastPage()},onClickFirstPage:function(){this.theCurrentPage=1,this.$emit("input",this.theCurrentPage),i.emit("pageChanged",this.theCurrentPage)},onClickPreviousPage:function(){var e=this.getPage(this.theCurrentPage-1);e&&(e.isActive=!0,this.theCurrentPage=e.number,this.$emit("input",this.theCurrentPage),i.emit("pageChanged",this.theCurrentPage))},onClickPage:function(e){this.theCurrentPage=e.number,e.isActive=!0,this.$emit("input",this.theCurrentPage),i.emit("pageChanged",this.theCurrentPage)},onClickNextPage:function(){var e=this.getPage(this.theCurrentPage+1);e&&(e.isActive=!0,this.theCurrentPage=e.number,this.$emit("input",this.theCurrentPage),i.emit("pageChanged",this.theCurrentPage))},onClickLastPage:function(){var e=this.totalNumPages;this.theCurrentPage=e,this.$emit("input",this.theCurrentPage),i.emit("pageChanged",this.theCurrentPage)},getPage:function(e){return this.pages.filter((function(t){return t.number==e}))[0]}}},o={class:"z-10 inline-flex"},l={class:"flex justify-between items-center text-sm"},u={key:0,class:"border-r-1"},c={class:"border-r-1 relative dark:border-gray-850"},h={key:1,class:"border-r-1 hidden sm:block"},g=[t.createElementVNode("span",{class:"inline-block align-middle"},[t.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",class:"w-4 h-4"},[t.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)],d=["onClick","disabled"],m={key:2,class:"border-r-1 hidden sm:block"},f=[t.createElementVNode("span",{class:"inline-block align-middle"},[t.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",class:"w-4 h-4"},[t.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)],P={class:"relative"},p={key:3,class:"border-l-1"};s.render=function(e,r,n,a,i,s){return t.openBlock(),t.createElementBlock("div",o,[t.createElementVNode("nav",{class:t.normalizeClass(["",n.wrapperClasses]),"aria-label":"Pagination"},[t.createElementVNode("ul",l,[n.showFirstLast?(t.openBlock(),t.createElementBlock("li",u,[t.renderSlot(e.$slots,"first")])):t.createCommentVNode("",!0),t.createElementVNode("li",c,[t.renderSlot(e.$slots,"prev")]),s.showFirstDots?(t.openBlock(),t.createElementBlock("li",h,[t.createElementVNode("button",{type:"button",class:t.normalizeClass(["",n.dotClasses]),disabled:!0},g,2)])):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(s.pages,(function(e){return t.openBlock(),t.createElementBlock("li",{class:"border-r-1",key:e.number},[t.createElementVNode("button",{onClick:function(t){return s.onClickPage(e)},type:"button",class:t.normalizeClass(["",[n.pageClasses,e.isActive?"".concat(n.activePageClasses):""]]),disabled:e.isActive},t.toDisplayString(e.number),11,d)])})),128)),s.showLastDots?(t.openBlock(),t.createElementBlock("li",m,[t.createElementVNode("button",{type:"button",class:t.normalizeClass(n.dotClasses),disabled:!0},f,2)])):t.createCommentVNode("",!0),t.createElementVNode("li",P,[t.renderSlot(e.$slots,"next")]),n.showFirstLast?(t.openBlock(),t.createElementBlock("li",p,[t.renderSlot(e.$slots,"last")])):t.createCommentVNode("",!0)])],2)])};var C={name:"NavButton",props:{text:{type:String,required:!1},page:{type:[String,Number],required:!0},isFirst:{type:Boolean,required:!1,default:!1},isPrev:{type:Boolean,required:!1,default:!1},isNext:{type:Boolean,required:!1,default:!1},isLast:{type:Boolean,required:!1,default:!1}},data:function(){return{shouldDisable:!0,totalPages:0,currentPage:null}},mounted:function(){i.on("pageChanged",this.handlePageChange),i.on("gotTotalPages",this.setTotalPages),this.initShouldDisable()},methods:{setTotalPages:function(e){this.totalPages=e},handleClick:function(){i.emit("btnClicked",this.page)},handlePageChange:function(e){return["first","First"].includes(this.page)&&1==e||this.isFirst&&1==e||["prev","Prev","previous","Previous"].includes(this.page)&&1==e||this.isPrev&&1==e||["next","Next"].includes(this.page)&&e/this.totalPages==1||this.isNext&&e/this.totalPages==1||["last","Last"].includes(this.page)&&e/this.totalPages==1||this.isLast&&e/this.totalPages==1||e==this.page?this.shouldDisable=!0:this.shouldDisable=!1},initShouldDisable:function(){this.handlePageChange(1)}}},b=["disabled"];C.render=function(e,r,n,a,i,s){return t.openBlock(),t.createElementBlock("button",{onClick:r[0]||(r[0]=function(){return s.handleClick&&s.handleClick.apply(s,arguments)}),disabled:i.shouldDisable,class:t.normalizeClass({"cursor-not-allowed":i.shouldDisable}),type:"button"},[t.renderSlot(e.$slots,"default",{},(function(){return[t.createTextVNode(t.toDisplayString(n.text),1)]}))],10,b)};var v=Object.freeze({__proto__:null,Paginate:s,NavButton:C}),k=function(e){Object.entries(v).forEach((function(t){var r=n(t,2),a=r[0],i=r[1];e.component(a,i)}))},y=Object.freeze({__proto__:null,default:k,Paginate:s,NavButton:C});return Object.entries(y).forEach((function(e){var t=n(e,2),r=t[0],a=t[1];"default"!==r&&(k[r]=a)})),k}(mitt,Vue);