@vuesimple/vs-pagination/dist/index.min.js

A simple vue pagination

(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode("[data-theme=dark] .vs-pagination,.dark .vs-pagination{--vs-pagination-bg-color: rgba(102, 160, 205, .16);--vs-pagination-color: #d8dcde;--vs-pagination-active-color: #ffffff;--vs-pagination-disabled-color: #525252}.vs-pagination{--vs-pagination-bg-color: #f0f5fb;--vs-pagination-color: #68737d;--vs-pagination-active-color: #2f3941;--vs-pagination-disabled-color: #d8d8d8;padding:10px 0;display:flex;align-items:center;justify-content:center;margin-bottom:0}.vs-pagination>li{list-style:none}.vs-pagination>li:first-child a{margin-left:0}.vs-pagination>li:last-child a{margin-right:0}.vs-pagination>li>a{min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;border-radius:4px;color:var(--vs-pagination-color);font-size:14px;margin-left:2px;margin-right:2px;-webkit-user-select:none;user-select:none}.vs-pagination>li>a:hover{background-color:var(--vs-pagination-bg-color);color:var(--vs-pagination-active-color)}.vs-pagination>li>a:focus-visible{box-shadow:0 0 0 2px #1f73b759;outline:none}.vs-pagination>li.vs-pagination--active a{color:var(--vs-pagination-active-color);background-color:var(--vs-pagination-bg-color);font-weight:600;position:relative;z-index:1}.vs-pagination>li.vs-pagination--disabled>a{color:var(--vs-pagination-disabled-color)!important;-webkit-user-select:none;user-select:none;cursor:default}.vs-pagination>li.vs-pagination--disabled>a:hover{background:transparent}.vs-pagination>li.vs-pagination--disabled.vs-pagination--no-cursor a{cursor:not-allowed}.vs-pagination>li.vs-pagination--gap a{cursor:default;color:var(--vs-pagination-color)}.vs-pagination>li.vs-pagination--gap a:hover{background:transparent}")),document.head.appendChild(a)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
var VsPagination=function(s,e){"use strict";var g=document.createElement("style");g.textContent=`[data-theme=dark] .vs-pagination,.dark .vs-pagination{--vs-pagination-bg-color: rgba(102, 160, 205, .16);--vs-pagination-color: #d8dcde;--vs-pagination-active-color: #ffffff;--vs-pagination-disabled-color: #525252}.vs-pagination{--vs-pagination-bg-color: #f0f5fb;--vs-pagination-color: #68737d;--vs-pagination-active-color: #2f3941;--vs-pagination-disabled-color: #d8d8d8;padding:10px 0;display:flex;align-items:center;justify-content:center;margin-bottom:0}.vs-pagination>li{list-style:none}.vs-pagination>li:first-child a{margin-left:0}.vs-pagination>li:last-child a{margin-right:0}.vs-pagination>li>a{min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;border-radius:4px;color:var(--vs-pagination-color);font-size:14px;margin-left:2px;margin-right:2px;-webkit-user-select:none;user-select:none}.vs-pagination>li>a:hover{background-color:var(--vs-pagination-bg-color);color:var(--vs-pagination-active-color)}.vs-pagination>li>a:focus-visible{box-shadow:0 0 0 2px #1f73b759;outline:none}.vs-pagination>li.vs-pagination--active a{color:var(--vs-pagination-active-color);background-color:var(--vs-pagination-bg-color);font-weight:600;position:relative;z-index:1}.vs-pagination>li.vs-pagination--disabled>a{color:var(--vs-pagination-disabled-color)!important;-webkit-user-select:none;user-select:none;cursor:default}.vs-pagination>li.vs-pagination--disabled>a:hover{background:transparent}.vs-pagination>li.vs-pagination--disabled.vs-pagination--no-cursor a{cursor:not-allowed}.vs-pagination>li.vs-pagination--gap a{cursor:default;color:var(--vs-pagination-color)}.vs-pagination>li.vs-pagination--gap a:hover{background:transparent}
`,document.head.appendChild(g);const N="",d=(t,o)=>{const a=t.__vccOpts||t;for(const[i,l]of o)a[i]=l;return a},h={props:{totalPages:{type:Number},currentPage:{type:Number,default:1,validator:t=>t>0},pagePadding:{type:Number,default:1,validator:t=>t>0},pageGap:{type:Number,default:2,validator:t=>t>0},hidePrevNext:{type:Boolean,default:!1}},data(){return{internalPage:this.currentPage}},computed:{renderPages(){const t=[],o=this.pagePadding,a=this.pageGap;for(let i=1;i<=this.totalPages;i++){if(i===this.internalPage||i<a||i>this.totalPages-a+1){t.push(this.createPage(i));continue}let l,n;if(this.internalPage<=a+o?(l=a+1,n=l+o*2):this.internalPage>=this.totalPages-a-o?(n=this.totalPages-a,l=n-o*2):(l=this.internalPage-o,n=this.internalPage+o),i>=l&&i<=this.internalPage||i>=this.internalPage&&i<=n){t.push(this.createPage(i));continue}if(i===a){l>a+1&&this.internalPage>a+o+1?t.push(this.createGap(i)):t.push(this.createPage(i));continue}if(i===this.totalPages-a+1){n<this.totalPages-a&&this.internalPage<this.totalPages-a-o?t.push(this.createGap(i)):t.push(this.createPage(i));continue}}return t}},watch:{currentPage(t){this.internalPage=t}},methods:{createPage(t){return{key:t,current:this.internalPage===t,value:t}},createGap(t){return{key:t,isGap:!0}},firstPageSelected(){return this.internalPage===1},lastPageSelected(){return this.internalPage===this.totalPages||this.totalPages===0},moveToPage(t){t&&this.internalPage!==this.totalPages&&this.setPage(this.internalPage+1),!t&&this.internalPage!==1&&this.setPage(this.internalPage-1)},setPage(t){this.internalPage=t,this.$emit("change",t)}}},P={role:"navigation","aria-label":"Pagination Navigation"},p={class:"vs-pagination"},u=["tabindex"],v=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",focusable:"false",role:"presentation"},[e.createElementVNode("path",{fill:"currentColor",d:"M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"})],-1),f=[e.createElementVNode("a",null,"...",-1)],m=["onClick","onKeyup","aria-current","aria-label"],b=["tabindex"],_=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",focusable:"false",role:"presentation"},[e.createElementVNode("path",{fill:"currentColor",d:"M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"})],-1);function y(t,o,a,i,l,n){return e.openBlock(),e.createElementBlock("nav",P,[e.createElementVNode("ul",p,[e.createElementVNode("li",{class:e.normalizeClass([{"vs-pagination--disabled":n.firstPageSelected()},{"vs-pagination--no-cursor":!a.hidePrevNext&&n.firstPageSelected()}])},[e.createElementVNode("a",{onClick:o[0]||(o[0]=r=>n.moveToPage(!1)),onKeyup:o[1]||(o[1]=e.withKeys(r=>n.moveToPage(!1),["enter"])),tabindex:!a.hidePrevNext&&n.firstPageSelected()?-1:0,"aria-label":"Previous Page"},[a.hidePrevNext&&n.firstPageSelected()?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"leftIcon",{key:0},()=>[v])],40,u)],2),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.renderPages,r=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[r.isGap?(e.openBlock(),e.createElementBlock("li",{class:"vs-pagination--gap",key:r.key+"gap"},f)):(e.openBlock(),e.createElementBlock("li",{key:r.key+"count",class:e.normalizeClass({"vs-pagination--active":r.current})},[e.createElementVNode("a",{onClick:x=>n.setPage(r.value),onKeyup:e.withKeys(x=>n.setPage(r.value),["enter"]),tabindex:"0","aria-current":r.current?"true":"false","aria-label":r.current?`Current page, Page ${r.value}`:`Goto Page ${r.value}`},e.toDisplayString(r.value),41,m)],2))],64))),256)),e.createElementVNode("li",{class:e.normalizeClass([{"vs-pagination--disabled":n.lastPageSelected()},{"vs-pagination--no-cursor":!a.hidePrevNext&&n.lastPageSelected()}])},[e.createElementVNode("a",{onClick:o[2]||(o[2]=r=>n.moveToPage(!0)),onKeyup:o[3]||(o[3]=e.withKeys(r=>n.moveToPage(!0),["enter"])),tabindex:!a.hidePrevNext&&n.lastPageSelected()?-1:0,"aria-label":"Next Page"},[a.hidePrevNext&&n.lastPageSelected()?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"rightIcon",{key:0},()=>[_])],40,b)],2)])])}const c=d(h,[["render",y]]),k={install(t){t.component("VsPagination",c)}};return s.default=c,s.plugin=k,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),s}({},Vue);