@ocrv/vue-tailwind-pagination
Version:
Vue Tailwind Pagination
2 lines (1 loc) • 4.64 kB
JavaScript
import{defineComponent as e,pushScopeId as t,popScopeId as r,openBlock as n,createBlock as a,createVNode as s,withModifiers as o,createCommentVNode as i,Fragment as l,renderList as c,toDisplayString as u,withDirectives as d,vModelText as g,withScopeId as p}from"vue";var h=e({name:"Vue Tailwind Pagination",props:{current:{type:Number,default:1},total:{type:Number,default:0},perPage:{type:Number,default:9},pageRange:{type:Number,default:2},textBeforeInput:{type:String,default:"Go to page"},textAfterInput:{type:String,default:"Go"}},data:()=>({input:""}),methods:{hasFirst:function(){return 1!==this.rangeStart},hasLast:function(){return this.rangeEnd<this.totalPages},hasPrev:function(){return this.current>1},hasNext:function(){return this.current<this.totalPages},changePage:function(e){e>0&&e<=this.totalPages&&this.$emit("page-changed",e)}},computed:{pages:function(){for(var e=[],t=this.rangeStart;t<=this.rangeEnd;t++)e.push(t);return e},rangeStart:function(){var e=this.current-this.pageRange;return e>0?e:1},rangeEnd:function(){var e=this.current+this.pageRange;return e<this.totalPages?e:this.totalPages},totalPages:function(){return Math.ceil(this.total/this.perPage)},nextPage:function(){return this.current+1},prevPage:function(){return this.current-1}}});const f=p("data-v-00d7790c");t("data-v-00d7790c");const m={class:"min-w-max"},v={class:"flex justify-between bg-white rounded-lg border border-gray-200 px-10 py-3 text-gray-700 font-montserrat"},x={class:"flex items-center"},w={key:0,class:"pr-6"},y=s("div",{class:"flex items-center justify-center hover:bg-gray-200 rounded-md transform rotate-45 h-6 w-6"},[s("div",{class:"transform -rotate-45"},[s("svg",{class:"h-4 w-4",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},[s("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"})])])],-1),k={key:1,class:"pr-6"},P=s("div",{class:"flex hover:bg-gray-200 rounded-md transform rotate-45 h-6 w-6 items-center justify-center"},[s("span",{class:"transform -rotate-45"}," 1 ")],-1),b={key:2,class:"pr-6"},C={class:"pr-6"},j={class:"transform -rotate-45"},N={key:3,class:"pr-6"},B={key:4,class:"pr-6"},I={class:"flex hover:bg-gray-200 rounded-md transform rotate-45 h-6 w-6 items-center justify-center"},S={class:"transform -rotate-45"},M={key:5,class:"pr-6"},E=s("div",{class:"flex items-center justify-center hover:bg-gray-200 rounded-md transform rotate-45 h-6 w-6"},[s("div",{class:"transform -rotate-45"},[s("svg",{class:"h-4 w-4",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},[s("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"})])])],-1),F={class:"flex items-center"},L={class:"pr-2 text-gray-400 font-medium"},R={id:"text-before-input"},A={class:"w-14 rounded-md border border-indigo-400 px-1 py-1"},G={id:"text-after-input"},V=s("svg",{class:"h-4 w-4",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},[s("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"})],-1);r();const _=f(((e,t,r,p,h,f)=>(n(),a("div",m,[s("section",v,[s("ul",x,[e.hasPrev()?(n(),a("li",w,[s("a",{href:"#",onClick:t[1]||(t[1]=o((t=>e.changePage(e.prevPage)),["prevent"]))},[y])])):i("",!0),e.hasFirst()?(n(),a("li",k,[s("a",{href:"#",onClick:t[2]||(t[2]=o((t=>e.changePage(1)),["prevent"]))},[P])])):i("",!0),e.hasFirst()?(n(),a("li",b,"...")):i("",!0),(n(!0),a(l,null,c(e.pages,(t=>(n(),a("li",C,[s("a",{href:"#",onClick:o((r=>e.changePage(t)),["prevent"])},[s("div",{class:[{"bg-gradient-to-r from-blue-400 to-indigo-400":e.current==t},"flex hover:bg-gray-200 rounded-md transform rotate-45 h-6 w-6 items-center justify-center"]},[s("span",j,u(t),1)],2)],8,["onClick"])])))),256)),e.hasLast()?(n(),a("li",N,"...")):i("",!0),e.hasLast()?(n(),a("li",B,[s("a",{href:"#",onClick:t[3]||(t[3]=o((t=>e.changePage(e.totalPages)),["prevent"]))},[s("div",I,[s("span",S,u(e.totalPages),1)])])])):i("",!0),e.hasNext()?(n(),a("li",M,[s("a",{href:"#",onClick:t[4]||(t[4]=o((t=>e.changePage(e.nextPage)),["prevent"]))},[E])])):i("",!0)]),s("div",F,[s("div",L,[s("span",R,u(e.textBeforeInput),1)]),s("div",A,[d(s("input",{"onUpdate:modelValue":t[5]||(t[5]=t=>e.input=t),class:"w-12 focus:outline-none px-2",type:"text"},null,512),[[g,e.input,void 0,{number:!0}]])]),s("div",{onClick:t[6]||(t[6]=o((t=>e.changePage(e.input)),["prevent"])),class:"flex items-center pl-4 font-medium cursor-pointer"},[s("span",G,u(e.textAfterInput),1),V])])])]))));h.render=_,h.__scopeId="data-v-00d7790c";export default h;