vxe-pc-ui
Version:
A vue based PC component library
1 lines • 11.2 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_log=require("../../ui/src/log"),_select=_interopRequireDefault(require("../../select/src/select")),_numberInput=_interopRequireDefault(require("../../number-input/src/number-input"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxePager",props:{size:{type:String,default:()=>(0,_ui.getConfig)().pager.size||(0,_ui.getConfig)().size},layouts:{type:Array,default:()=>(0,_ui.getConfig)().pager.layouts||["PrevJump","PrevPage","Jump","PageCount","NextPage","NextJump","Sizes","Total"]},currentPage:{type:Number,default:1},loading:Boolean,pageSize:{type:Number,default:()=>(0,_ui.getConfig)().pager.pageSize||10},total:{type:Number,default:0},pagerCount:{type:Number,default:()=>(0,_ui.getConfig)().pager.pagerCount||7},pageSizes:{type:Array,default:()=>(0,_ui.getConfig)().pager.pageSizes||[10,15,20,50,100]},align:{type:String,default:()=>(0,_ui.getConfig)().pager.align},border:{type:Boolean,default:()=>(0,_ui.getConfig)().pager.border},background:{type:Boolean,default:()=>(0,_ui.getConfig)().pager.background},perfect:{type:Boolean,default:()=>(0,_ui.getConfig)().pager.perfect},autoHidden:{type:Boolean,default:()=>(0,_ui.getConfig)().pager.autoHidden},transfer:{type:Boolean,default:()=>(0,_ui.getConfig)().pager.transfer},className:[String,Function],pageSizePlacement:{type:String,default:()=>(0,_ui.getConfig)().pager.pageSizePlacement},iconPrevPage:String,iconJumpPrev:String,iconJumpNext:String,iconNextPage:String,iconJumpMore:String,iconHomePage:String,iconEndPage:String},emits:["update:pageSize","update:currentPage","page-change"],setup(_,e){const{slots:m,emit:u}=e;var t=_xeUtils.default.uniqueId();const g=(0,_ui.useSize)(_)["computeSize"],p=(0,_vue.inject)("$xeGrid",null),n=(0,_vue.reactive)({inpCurrPage:_.currentPage}),i=(0,_vue.ref)(),a={refElem:i},P=(0,_vue.computed)(()=>s(_.total,_.pageSize)),x=(0,_vue.computed)(()=>{var e=_["pagerCount"],t=e<P.value?e-2:e,a=[];for(let e=0;e<t;e++)a.push(e);return a}),d=(0,_vue.computed)(()=>Math.floor((_.pagerCount-2)/2)),l=(0,_vue.computed)(()=>_.pageSizes.map(e=>_xeUtils.default.isNumber(e)?{value:e,label:""+(0,_ui.getI18n)("vxe.pager.pagesize",[e])}:Object.assign({value:"",label:""},e))),h={xID:t,props:_,context:e,getRefMaps:()=>a},o=(e,t,a)=>{u(e,(0,_ui.createEvent)(a,{$pager:h},t))},s=(e,t)=>Math.max(Math.ceil(e/t),1),b=(e,t)=>{u("update:currentPage",t),e&&t!==_.currentPage&&o("page-change",{type:"current",pageSize:_.pageSize,currentPage:t},e)},c=(e,t)=>{u("update:currentPage",e),t&&e!==_.currentPage&&o("page-change",{type:"current",pageSize:_.pageSize,currentPage:e},t)},v=e=>{var e=e["$event"],t=e.target,a=_xeUtils.default.toInteger(t.value),r=P.value,r=a<=0?1:r<=a?r:a,a=_xeUtils.default.toValueString(r);t.value=a,n.inpCurrPage=a,c(r,e)},f=e=>{var t=_["currentPage"];1<t&&c(1,e)},C=e=>{var t=_["currentPage"],a=P.value;t<a&&c(a,e)},E=e=>{var t=_["currentPage"],a=P.value;1<t&&c(Math.min(a,Math.max(t-1,1)),e)},y=e=>{var t=_["currentPage"],a=P.value;t<a&&c(Math.min(a,t+1),e)},S=e=>{var t=x.value;c(Math.max(_.currentPage-t.length,1),e)},k=e=>{var t=P.value,a=x.value;c(Math.min(_.currentPage+a.length,t),e)},z=e=>{var{value:e,$event:t}=e,e=_xeUtils.default.toNumber(e),a=s(_.total,e);let r=_.currentPage;r>a&&(r=a,u("update:currentPage",a)),u("update:pageSize",e),t&&o("page-change",{type:"size",pageSize:e,currentPage:r},t)},N=e=>{var t=e["$event"];_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ENTER)?v(e):_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ARROW_UP)?(t.preventDefault(),y(t)):_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN)&&(t.preventDefault(),E(t))},J=()=>{var{currentPage:e,total:t}=_,a=m.home,r=P.value;return a?(0,_vue.h)("span",{class:"vxe-pager--custom-home-btn"},a({$pager:h,total:t,currentPage:e,pageCount:r})):(0,_vue.h)("button",{class:["vxe-pager--home-btn",{"is--disabled":e<=1}],type:"button",title:(0,_ui.getI18n)("vxe.pager.homePageTitle"),onClick:f},[(0,_vue.h)("i",{class:["vxe-pager--btn-icon",_.iconHomePage||(0,_ui.getIcon)().PAGER_HOME]})])},I=()=>{var{currentPage:e,total:t}=_,a=m.prevPage||m["prev-page"],r=P.value;return a?(0,_vue.h)("span",{class:"vxe-pager--custom-prev-btn"},a({$pager:h,total:t,currentPage:e,pageCount:r})):(0,_vue.h)("button",{class:["vxe-pager--prev-btn",{"is--disabled":e<=1}],type:"button",title:(0,_ui.getI18n)("vxe.pager.prevPageTitle"),onClick:E},[(0,_vue.h)("i",{class:["vxe-pager--btn-icon",_.iconPrevPage||(0,_ui.getIcon)().PAGER_PREV_PAGE]})])},M=e=>{var{currentPage:t,total:a}=_,r=m.prevJump||m["prev-jump"],u=P.value;return r?(0,_vue.h)("span",{class:"vxe-pager--custom-jump-prev"},r({$pager:h,total:a,currentPage:t,pageCount:u})):(0,_vue.h)(e||"button",{class:["vxe-pager--jump-prev",{"is--fixed":!e,"is--disabled":t<=1}],type:"button",title:(0,_ui.getI18n)("vxe.pager.prevJumpTitle"),onClick:S},[e?(0,_vue.h)("i",{class:["vxe-pager--jump-more-icon",_.iconJumpMore||(0,_ui.getIcon)().PAGER_JUMP_MORE]}):null,(0,_vue.h)("i",{class:["vxe-pager--jump-icon",_.iconJumpPrev||(0,_ui.getIcon)().PAGER_JUMP_PREV]})])},T=e=>{var{currentPage:t,total:a}=_,r=m.nextJump||m["next-jump"],u=P.value;return r?(0,_vue.h)("span",{class:"vxe-pager--custom-jump-next"},r({$pager:h,total:a,currentPage:t,pageCount:u})):(0,_vue.h)(e||"button",{class:["vxe-pager--jump-next",{"is--fixed":!e,"is--disabled":u<=t}],type:"button",title:(0,_ui.getI18n)("vxe.pager.nextJumpTitle"),onClick:k},[e?(0,_vue.h)("i",{class:["vxe-pager--jump-more-icon",_.iconJumpMore||(0,_ui.getIcon)().PAGER_JUMP_MORE]}):null,(0,_vue.h)("i",{class:["vxe-pager--jump-icon",_.iconJumpNext||(0,_ui.getIcon)().PAGER_JUMP_NEXT]})])},R=()=>{var{currentPage:e,total:t}=_,a=m.nextPage||m["next-page"],r=P.value;return a?(0,_vue.h)("span",{class:"vxe-pager--custom-next-btn"},a({$pager:h,total:t,currentPage:e,pageCount:r})):(0,_vue.h)("button",{class:["vxe-pager--next-btn",{"is--disabled":r<=e}],type:"button",title:(0,_ui.getI18n)("vxe.pager.nextPageTitle"),onClick:y},[(0,_vue.h)("i",{class:["vxe-pager--btn-icon",_.iconNextPage||(0,_ui.getIcon)().PAGER_NEXT_PAGE]})])},j=()=>{var{currentPage:e,total:t}=_,a=m.end,r=P.value;return a?(0,_vue.h)("span",{class:"vxe-pager--custom-end-btn"},a({$pager:h,total:t,currentPage:e,pageCount:r})):(0,_vue.h)("button",{class:["vxe-pager--end-btn",{"is--disabled":r<=e}],type:"button",title:(0,_ui.getI18n)("vxe.pager.endPageTitle"),onClick:C},[(0,_vue.h)("i",{class:["vxe-pager--btn-icon",_.iconEndPage||(0,_ui.getIcon)().PAGER_END]})])},$=e=>{const{currentPage:r,total:t,pagerCount:a}=_;var u=e?m.numberJump||m["number-jump"]:m.number;const n=[],g=P.value;var p=x.value,i=d.value,l=g>a,o=l&&r>i+1,s=l&&r<g-i;const c=[];let v=1;return l&&(v=r>=g-i?Math.max(g-p.length+1,1):Math.max(r-i,1)),e&&o&&(c.push(1),n.push((0,_vue.h)("button",{class:"vxe-pager--num-btn",type:"button",onClick:e=>b(e,1)},"1"),M("span"))),p.forEach((e,t)=>{const a=v+t;a<=g&&(c.push(a),n.push((0,_vue.h)("button",{key:a,class:["vxe-pager--num-btn",{"is--active":r===a}],type:"button",onClick:e=>b(e,a)},""+a)))}),e&&s&&(c.push(g),n.push(T("button"),(0,_vue.h)("button",{class:"vxe-pager--num-btn",type:"button",onClick:e=>b(e,g)},g))),u?(0,_vue.h)("span",{class:"vxe-pager--custom-btn-wrapper"},u({$pager:h,total:t,numList:c,currentPage:r,pageCount:g})):(0,_vue.h)("span",{class:"vxe-pager--btn-wrapper"},n)},A=()=>$(!0),U=()=>{var{total:e,currentPage:t,pageSize:a,pageSizePlacement:r,transfer:u}=_,n=m.sizes,g=l.value,p=P.value;return n?(0,_vue.h)("span",{class:"vxe-pager--custom-sizes"},n({$pager:h,total:e,currentPage:t,pageCount:p,pageSize:a,options:g})):(0,_vue.h)(_select.default,{class:"vxe-pager--sizes",modelValue:a,placement:r,transfer:u,options:g,onChange:z})},B=e=>{var t=_["total"],a=n["inpCurrPage"],r=e?m.fullJump||m["full-jump"]:m.jump,u=P.value;return r?(0,_vue.h)("span",{class:"vxe-pager--custom-jump"},r({$pager:h,total:t,currentPage:a,pageCount:u})):(0,_vue.h)("span",{class:"vxe-pager--jump"},[e?(0,_vue.h)("span",{class:"vxe-pager--goto-text"},(0,_ui.getI18n)("vxe.pager.goto")):null,(0,_vue.h)(_numberInput.default,{class:"vxe-pager--goto",modelValue:n.inpCurrPage,placeholder:(0,_ui.getI18n)("vxe.pager.gotoTitle"),align:"center",type:"integer",max:u,min:1,controls:!1,onKeydown:N,onBlur:v,"onUpdate:modelValue"(e){n.inpCurrPage=e}}),e?(0,_vue.h)("span",{class:"vxe-pager--classifier-text"},(0,_ui.getI18n)("vxe.pager.pageClassifier")):null])},G=()=>B(!0),V=()=>{var{currentPage:e,total:t}=_,a=m.pageCount||m["page-count"],r=P.value;return a?(0,_vue.h)("span",{class:"vxe-pager--custom-count"},a({$pager:h,total:t,currentPage:e,pageCount:r})):(0,_vue.h)("span",{class:"vxe-pager--count"},[(0,_vue.h)("span",{class:"vxe-pager--separator"}),(0,_vue.h)("span",r)])},q=()=>{var{currentPage:e,total:t}=_,a=m.total,r=P.value;return a?(0,_vue.h)("span",{class:"vxe-pager--custom-total"},a({$pager:h,total:t,currentPage:e,pageCount:r})):(0,_vue.h)("span",{class:"vxe-pager--total"},(0,_ui.getI18n)("vxe.pager.total",[t]))};t={dispatchEvent:o,setPageSize(e){return z({value:e}),(0,_vue.nextTick)()},setPageSizeByEvent(e,t){z({value:t,$event:e})},homePage(){return f(),(0,_vue.nextTick)()},homePageByEvent(e){f(e)},endPage(){return C(),(0,_vue.nextTick)()},endPageByEvent(e){C(e)},prevPage(){return E(),(0,_vue.nextTick)()},prevPageByEvent(e){E(e)},nextPage(){return y(),(0,_vue.nextTick)()},nextPageByEvent(e){y(e)},prevJump(){return S(),(0,_vue.nextTick)()},prevJumpByEvent(e){S(e)},nextJump(){return k(),(0,_vue.nextTick)()},nextJumpByEvent(e){k(e)},setCurrentPage(e){e=_xeUtils.default.toNumber(e)||1;return n.inpCurrPage=e,c(e),(0,_vue.nextTick)()},setCurrentPageByEvent(e,t){t=_xeUtils.default.toNumber(t)||1;n.inpCurrPage=t,c(t,e)},jumpPage(e){return(0,_log.warnLog)("vxe.error.delFunc",["jumpPage","setCurrentPage"]),h.setCurrentPage(e)}},e={handlePrevPage:E,handleNextPage:y,handlePrevJump:S,handleNextJump:k};Object.assign(h,t,e),(0,_vue.watch)(()=>_.currentPage,e=>{n.inpCurrPage=e});return h.renderVN=()=>{var{align:e,layouts:t,className:a}=_;const r=[];var u=g.value,n=P.value;return m.left&&r.push((0,_vue.h)("span",{class:"vxe-pager--left-wrapper"},m.left({$grid:p}))),t.forEach(e=>{let t;switch(e){case"Home":t=J;break;case"PrevJump":t=M;break;case"PrevPage":t=I;break;case"Number":t=$;break;case"JumpNumber":t=A;break;case"NextPage":t=R;break;case"NextJump":t=T;break;case"End":t=j;break;case"Sizes":t=U;break;case"FullJump":t=G;break;case"Jump":t=B;break;case"PageCount":t=V;break;case"Total":t=q}t?r.push(t()):(0,_log.errLog)("vxe.error.notProp",["layouts -> "+e])}),m.right&&r.push((0,_vue.h)("span",{class:"vxe-pager--right-wrapper"},m.right({$grid:p}))),(0,_vue.h)("div",{ref:i,class:["vxe-pager",a?_xeUtils.default.isFunction(a)?a({$pager:h}):a:"",{["size--"+u]:u,["align--"+e]:e,"is--border":_.border,"is--background":_.background,"is--perfect":_.perfect,"is--hidden":_.autoHidden&&1===n,"is--loading":_.loading}]},[(0,_vue.h)("div",{class:"vxe-pager--wrapper"},r)])},h},render(){return this.renderVN()}});