@progress/kendo-vue-data-tools/pager/Pager.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),A=require("./PagerNumericButtons.js"),W=require("./PagerInput.js"),B=require("./PagerPageSizes.js"),V=require("./PagerInfo.js"),d=require("./PagerNavigationButton.js"),t=require("../messages/main.js"),q=require("@progress/kendo-vue-intl"),l=require("@progress/kendo-vue-common"),g=require("@progress/kendo-svg-icons"),K="k-pager-numbers-wrap",O="k-pager-sizes",j="k-pager-info",E=s.defineComponent({name:"KendoPager",props:{pageSizeValue:[String,Number],total:Number,skip:Number,take:Number,pageSize:Number,settings:[Object,Boolean],buttonCount:{type:Number,default:10},info:{type:Boolean,default:!0},type:{type:String,default:"numeric",validator:function(e){return["numeric","input"].includes(e)}},pageSizes:{type:Array},previousNext:Boolean,messagesMap:Function,responsive:{type:Boolean,default:!0},size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},pagerRender:[String,Function,Object],width:[Number,String],ariaControls:{type:String,default:void 0},onPagesizechange:Function,onPagechange:Function},data(){return{currentRtl:!1,itemsToFit:void 0,itemsWidths:void 0}},mounted(){l.canUseDOM&&window.ResizeObserver&&(this.observerResize=new window.ResizeObserver(this.onWindowResize),this.observerResize.observe(this.$el)),this.currentRtl=l.isRtl(this.$el);const e=this.collectPagerChildrenWidths();this.itemsWidths=e,this.onWindowResize()},unmounted(){var e;(e=this.document)!=null&&e.body&&this.observerResize&&this.observerResize.disconnect()},inject:{kendoLocalizationService:{default:null},kendoIntlService:{default:null}},computed:{wrapperClass(){const{size:e}=this.$props;return{"k-pager":!0,[`k-pager-${l.kendoThemeMaps.sizeMap[e]||e}`]:e}},totalPages(){return Math.ceil((this.$props.total||0)/this.currentTake)},currentPage(){return Math.floor((this.$props.skip||0)/this.currentTake)+1},currentTake(){return this.$props.take||this.$props.pageSize},showPageSizes(){return this.itemsToFit.includes(this.pagerSizesIndex)},showInfo(){return this.itemsToFit.includes(this.pagerInfoIndex)}},methods:{changePage(e,a){e>0&&e<=this.totalPages&&this.$emit("pagechange",{skip:(e-1)*this.currentTake,take:this.currentTake},a)},triggerPageChange(e,a){l.hasListener.call(this,"pagesizechange")?this.$emit("pagesizechange",e,a):this.$emit("pagechange",e,a)},onWindowResize(){const e=this.$el;!e||!this.$props.responsive||this.$props.settings.responsive===!1||(this.itemsToFit=this.fitChildrenInParent(e,this.itemsWidths||[]))},transformDimension(e){return typeof e=="string"&&e.endsWith("px")?e:e+"px"},collectPagerChildrenWidths(){var c;return Array.from(((c=this.$el)==null?void 0:c.children)||[]).map(o=>o instanceof HTMLElement?{class:o.className,width:o.offsetWidth}:0)},fitChildrenInParent(e,a){let c=[],o=0,u=a;const i=e.offsetWidth,P=20;for(let r=0;r<a.length;r++){const m=r===0?8:0,h=e.children[r],n=r===0?a[r].width:(h==null?void 0:h.offsetWidth)||a[r].width;o+=n,o<i-P-m?c.push(a[r].class):u[r].width=n}return this.itemsWidths=u,c}},setup(){const e=s.inject("kendoIntlService",{}),a=s.inject("kendoLocalizationService",{});return{kendoIntlService:e,kendoLocalizationService:a}},render(){var T,M;const{skip:e,take:a,total:c,pageSizes:o,buttonCount:u,messagesMap:i,info:P,type:r,previousNext:m,pageSizeValue:h}=this.$props,n={pageSizes:o,buttonCount:u,info:P,previousNext:m,type:r,pageSizeValue:h,...this.$props.settings},f=this.$props.pagerRender||this.$props.settings.pagerRender,$=f?l.templateRendering.call(this,f,l.getListeners.call(this)):null,p=q.provideLocalizationService(this),v=i?i(t.pagerFirstPage):{messageKey:t.pagerFirstPage,defaultMessage:t.messages[t.pagerFirstPage]},S=i?i(t.pagerPreviousPage):{messageKey:t.pagerPreviousPage,defaultMessage:t.messages[t.pagerPreviousPage]},k=i?i(t.pagerNextPage):{messageKey:t.pagerNextPage,defaultMessage:t.messages[t.pagerNextPage]},N=i?i(t.pagerLastPage):{messageKey:t.pagerLastPage,defaultMessage:t.messages[t.pagerLastPage]},C=n.type==="numeric"?s.createVNode(A.PagerNumericButtons,{responsiveSize:this.responsive&&this.itemsToFit&&this.itemsToFit.length<2?"small":"large",size:this.size,buttonCount:n.buttonCount||0,totalPages:this.totalPages,currentPage:this.currentPage,onPagechange:this.changePage},null):s.createVNode(W.PagerInput,{currentPage:this.currentPage,totalPages:this.totalPages,onPagechange:this.changePage,messagesMap:i,size:this.size},null);let R,b,I,y;n.previousNext&&(R=s.createVNode(d.PagerNavigationButton,{class:"k-pager-first",size:this.size,disabled:this.currentPage===1,page:1,title:p.toLanguageString(v.messageKey,v.defaultMessage),icon:this.currentRtl?"caret-alt-to-right":"caret-alt-to-left",svgIcon:this.currentRtl?g.caretAltToRightIcon:g.caretAltToLeftIcon,onPagechange:this.changePage},null),b=s.createVNode(d.PagerNavigationButton,{disabled:this.currentPage===1,size:this.size,page:this.currentPage-1,title:p.toLanguageString(S.messageKey,S.defaultMessage),icon:this.currentRtl?"caret-alt-right":"caret-alt-left",svgIcon:this.currentRtl?g.caretAltRightIcon:g.caretAltLeftIcon,onPagechange:this.changePage},null),I=s.createVNode(d.PagerNavigationButton,{disabled:this.currentPage===this.totalPages,size:this.size,page:this.currentPage+1,title:p.toLanguageString(k.messageKey,k.defaultMessage),icon:this.currentRtl?"caret-alt-left":"caret-alt-right",svgIcon:this.currentRtl?g.caretAltLeftIcon:g.caretAltRightIcon,onPagechange:this.changePage},null),y=s.createVNode(d.PagerNavigationButton,{class:"k-pager-last",disabled:this.currentPage===this.totalPages,size:this.size,page:this.totalPages,title:p.toLanguageString(N.messageKey,N.defaultMessage),icon:this.currentRtl?"caret-alt-to-left":"caret-alt-to-right",svgIcon:this.currentRtl?g.caretAltToLeftIcon:g.caretAltToRightIcon,onPagechange:this.changePage},null));const L=n.pageSizes&&s.createVNode(B.PagerPageSizes,{onPagechange:this.triggerPageChange,pageSize:this.currentTake,pageSizes:n.pageSizes,value:n.pageSizeValue,messagesMap:i,size:this.size},null),F=n.info&&s.createVNode(V.PagerInfo,{totalPages:this.$props.total,skip:this.$props.skip,currentPage:this.currentTake,messagesMap:i},null);let x=l.getTemplate.call(this,{h:s.h,template:$,additionalProps:{...this.$props,current:this.currentPage},additionalListeners:{pagechange:this.triggerPageChange}});const w=this.transformDimension(this.$props.width);return f?s.createVNode("div",{class:this.wrapperClass,style:{width:w},role:"application","aria-roledescription":"pager"},[x]):s.createVNode("div",{class:this.wrapperClass,style:{width:w},role:"application","aria-roledescription":"pager","aria-keyshortcuts":"Enter ArrowRight ArrowLeft","aria-label":"Page navigation, page "+this.currentPage+" of "+this.totalPages,"aria-controls":this.$props.ariaControls},[s.createVNode("div",{class:K},[R,b,C,I,y]),!(this.responsive&&this.itemsToFit&&!((T=this.itemsToFit)!=null&&T.find(z=>z.indexOf(O)!==-1)))&&L,!(this.responsive&&this.itemsToFit&&!((M=this.itemsToFit)!=null&&M.find(z=>z.indexOf(j)!==-1)))&&F])}});exports.Pager=E;