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

A simple vue pagination

(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-pagination{--page-bg-color: #f0f5fb;--page-color: #68737d;--page-active-color: #2f3941;--page-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(--page-color);font-size:14px;margin-left:2px;margin-right:2px;user-select:none}.vs-pagination>li>a:hover{background-color:var(--page-bg-color);color:var(--page-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(--page-active-color);background-color:var(--page-bg-color);font-weight:600;position:relative;z-index:1}.vs-pagination>li.vs-pagination--disabled>a{color:var(--page-disabled-color)!important;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(--page-color)}.vs-pagination>li.vs-pagination--gap a:hover{background:transparent}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.VsPagination={},o.Vue))})(this,function(o,e){"use strict";const v="",g=(t,l)=>{const a=t.__vccOpts||t;for(const[i,s]of l)a[i]=s;return a},d={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=[],l=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 s,n;if(this.internalPage<=a+l?(s=a+1,n=s+l*2):this.internalPage>=this.totalPages-a-l?(n=this.totalPages-a,s=n-l*2):(s=this.internalPage-l,n=this.internalPage+l),i>=s&&i<=this.internalPage||i>=this.internalPage&&i<=n){t.push(this.createPage(i));continue}if(i===a){s>a+1&&this.internalPage>a+l+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-l?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"},h={class:"vs-pagination"},u=["tabindex"],m=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)],p=["onClick","onKeyup","aria-current","aria-label"],_=["tabindex"],y=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 N(t,l,a,i,s,n){return e.openBlock(),e.createElementBlock("nav",P,[e.createElementVNode("ul",h,[e.createElementVNode("li",{class:e.normalizeClass([{"vs-pagination--disabled":n.firstPageSelected()},{"vs-pagination--no-cursor":!a.hidePrevNext&&n.firstPageSelected()}])},[e.createElementVNode("a",{onClick:l[0]||(l[0]=r=>n.moveToPage(!1)),onKeyup:l[1]||(l[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},()=>[m])],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:b=>n.setPage(r.value),onKeyup:e.withKeys(b=>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,p)],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:l[2]||(l[2]=r=>n.moveToPage(!0)),onKeyup:l[3]||(l[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},()=>[y])],40,_)],2)])])}const c=g(d,[["render",N]]),k={install(t){t.component("VsPagination",c)}};o.default=c,o.plugin=k,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});