eslink-ui-plus/es/pagination/index.js

vue3 component library, css framework

import{defineComponent as h,reactive as v,computed as _,watch as m,pushScopeId as P,popScopeId as y,resolveComponent as b,openBlock as V,createElementBlock as x,createElementVNode as o,toDisplayString as c,createVNode as N,createTextVNode as C}from"vue";var p=h({props:{pageSize:{type:Number,default:20},total:{type:Number,default:0},page:{type:Number,default:1}},emits:["update:modelValue","click","page-change"],setup(e,n){const{emit:d}=n,a=v({pageValue:e.page,page:e.page,pageSize:e.pageSize,maxPage:_(()=>{if(e.total<=0)return 0;let t=Math.floor(e.total/a.pageSize);return e.total%a.pageSize>0&&t++,t})}),i=(t,l)=>{a.pageValue||(t=1),a.pageValue=t,d("page-change",t,l)};return m(()=>e.page,t=>a.page=t),m(()=>a.page,i),{setting:a,prevPage:()=>{if(a.page<=1)return!1;a.page--},movePage:t=>{a.page=Number(t)},nextPage:()=>{if(a.page>=a.maxPage)return!1;a.page++},parserWidth:t=>{let l=parseInt(t),g=1,u=Number(a.maxPage);isNaN(l)||(l>u?a.pageValue=u:l<g&&(a.pageValue=g))},handleInput:t=>{a.pageValue=Number(t)}}}});P("data-v-957e5650");const I={class:"pagination es-row es-ai--c es-margin-l--sm"},S={class:"es-text--right"},w={class:"pagination__info es-fs--sm es-margin-r--md"},z={class:"pagination__total"},B=C(" \u6761\u8BB0\u5F55"),k=o("i",{class:"es-icon-arrow-drop-left-line"},null,-1),E=[k],T={class:"pagination__wrap es-fs--sm"},$=o("span",{style:{color:"rgba(187, 188, 201, 1)"}},"/",-1),U={class:"es-padding-lr--md",style:{color:"rgba(62, 64, 81, 1)"}},W=o("i",{class:"es-icon-arrow-drop-right-line"},null,-1),A=[W];y();function j(e,n,d,a,i,f){const r=b("es-input-base");return V(),x("div",I,[o("div",S,[o("span",w,[o("span",z,c(e.total),1),B])]),o("div",null,[o("span",{class:"es-cursor--pointer",onClick:n[0]||(n[0]=(...s)=>e.prevPage&&e.prevPage(...s))},E),o("span",T,[N(r,{class:"input__pagination es-text--center",modelValue:e.setting.pageValue,"onUpdate:modelValue":n[1]||(n[1]=s=>e.setting.pageValue=s),type:"number",autocomplete:"off",min:1,max:e.setting.maxPage,"onUpdate:modelvalue":e.handleInput,onInput:e.parserWidth,onChange:e.movePage},null,8,["modelValue","max","onUpdate:modelvalue","onInput","onChange"]),$,o("span",U,c(e.setting.maxPage),1)]),o("span",{class:"es-cursor--pointer",onClick:n[2]||(n[2]=(...s)=>e.nextPage&&e.nextPage(...s))},A)])])}function D(e,n){n===void 0&&(n={});var d=n.insertAt;if(!(!e||typeof document=="undefined")){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css",d==="top"&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}var F=`.pagination[data-v-957e5650] {
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}
.pagination i[data-v-957e5650] {
  color: var(--blue4);
  vertical-align: middle;
}
.pagination__info[data-v-957e5650] {
  color: var(--neutral14);
}
.pagination__total[data-v-957e5650] {
  font-weight: bold;
}
.es-input[data-v-957e5650] .input__pagination {
  width: 46px;
  border: 0;
  padding: 0;
  color: var(--neutral16);
  font-size: 12px;
  font-weight: bold;
}`;D(F),p.render=j,p.__scopeId="data-v-957e5650",p.__file="components/pagination/index.vue",p.install=e=>{e.component("es-pagination",p)};export{p as default};