UNPKG

primevue

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primevue.svg)](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

2 lines (1 loc) 13.8 kB
import{UniqueComponentId as e}from"primevue/utils";import{openBlock as t,createElementBlock as a,toDisplayString as n,resolveDirective as i,withDirectives as r,normalizeClass as s,createElementVNode as o,resolveComponent as p,createBlock as l,Fragment as g,renderList as u,createTextVNode as d,renderSlot as c,createCommentVNode as h}from"vue";import m from"primevue/ripple";import P from"primevue/dropdown";import b from"primevue/inputnumber";var f={name:"CurrentPageReport",props:{pageCount:{type:Number,default:0},currentPage:{type:Number,default:0},page:{type:Number,default:0},first:{type:Number,default:0},rows:{type:Number,default:0},totalRecords:{type:Number,default:0},template:{type:String,default:"({currentPage} of {totalPages})"}},computed:{text(){return this.template.replace("{currentPage}",this.currentPage).replace("{totalPages}",this.pageCount).replace("{first}",this.pageCount>0?this.first+1:0).replace("{last}",Math.min(this.first+this.rows,this.totalRecords)).replace("{rows}",this.rows).replace("{totalRecords}",this.totalRecords)}}};const k={class:"p-paginator-current"};f.render=function(e,i,r,s,o,p){return t(),a("span",k,n(p.text),1)};var L={name:"FirstPageLink",computed:{containerClass(){return["p-paginator-first p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:m}};const y=[o("span",{class:"p-paginator-icon pi pi-angle-double-left"},null,-1)];L.render=function(e,n,o,p,l,g){const u=i("ripple");return r((t(),a("button",{class:s(g.containerClass),type:"button"},y,2)),[[u]])};var w={name:"JumpToPageDropdown",emits:["page-change"],props:{page:Number,pageCount:Number,disabled:Boolean},methods:{onChange(e){this.$emit("page-change",e)}},computed:{pageOptions(){let e=[];for(let t=0;t<this.pageCount;t++)e.push({label:String(t+1),value:t});return e}},components:{JTPDropdown:P}};w.render=function(e,a,n,i,r,s){const o=p("JTPDropdown");return t(),l(o,{modelValue:n.page,options:s.pageOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":a[0]||(a[0]=e=>s.onChange(e)),class:"p-paginator-page-options",disabled:n.disabled},null,8,["modelValue","options","disabled"])};var v={name:"JumpToPageInput",inheritAttrs:!1,emits:["page-change"],props:{page:Number,pageCount:Number,disabled:Boolean},data(){return{d_page:this.page}},watch:{page(e){this.d_page=e}},methods:{onChange(e){e!==this.page&&(this.d_page=e,this.$emit("page-change",e-1))}},computed:{inputArialabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.jumpToPageInputLabel:void 0}},components:{JTPInput:b}};v.render=function(e,a,n,i,r,s){const o=p("JTPInput");return t(),l(o,{ref:"jtpInput",modelValue:r.d_page,class:"p-paginator-page-input","aria-label":s.inputArialabel,disabled:n.disabled,"onUpdate:modelValue":s.onChange},null,8,["modelValue","aria-label","disabled","onUpdate:modelValue"])};var C={name:"LastPageLink",computed:{containerClass(){return["p-paginator-last p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:m}};const $=[o("span",{class:"p-paginator-icon pi pi-angle-double-right"},null,-1)];C.render=function(e,n,o,p,l,g){const u=i("ripple");return r((t(),a("button",{class:s(g.containerClass),type:"button"},$,2)),[[u]])};var x={name:"NextPageLink",computed:{containerClass(){return["p-paginator-next p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:m}};const T=[o("span",{class:"p-paginator-icon pi pi-angle-right"},null,-1)];x.render=function(e,n,o,p,l,g){const u=i("ripple");return r((t(),a("button",{class:s(g.containerClass),type:"button"},T,2)),[[u]])};var R={name:"PageLinks",inheritAttrs:!1,emits:["click"],props:{value:Array,page:Number},methods:{onPageLinkClick(e,t){this.$emit("click",{originalEvent:e,value:t})},ariaPageLabel(e){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g,e):void 0}},computed:{},directives:{ripple:m}};const N={class:"p-paginator-pages"},_=["aria-label","aria-current","onClick"];R.render=function(e,o,p,l,c,h){const m=i("ripple");return t(),a("span",N,[(t(!0),a(g,null,u(p.value,(e=>r((t(),a("button",{key:e,class:s(["p-paginator-page p-paginator-element p-link",{"p-highlight":e-1===p.page}]),type:"button","aria-label":h.ariaPageLabel(e),"aria-current":e-1===p.page?"page":void 0,onClick:t=>h.onPageLinkClick(t,e)},[d(n(e),1)],10,_)),[[m]]))),128))])};var S={name:"PrevPageLink",computed:{containerClass(){return["p-paginator-prev p-paginator-element p-link",{"p-disabled":this.$attrs.disabled}]}},directives:{ripple:m}};const D=[o("span",{class:"p-paginator-icon pi pi-angle-left"},null,-1)];S.render=function(e,n,o,p,l,g){const u=i("ripple");return r((t(),a("button",{class:s(g.containerClass),type:"button"},D,2)),[[u]])};var A={name:"RowsPerPageDropdown",emits:["rows-change"],props:{options:Array,rows:Number,disabled:Boolean},methods:{onChange(e){this.$emit("rows-change",e)}},computed:{rowsOptions(){let e=[];if(this.options)for(let t=0;t<this.options.length;t++)e.push({label:String(this.options[t]),value:this.options[t]});return e}},components:{RPPDropdown:P}};A.render=function(e,a,n,i,r,s){const o=p("RPPDropdown");return t(),l(o,{modelValue:n.rows,options:s.rowsOptions,optionLabel:"label",optionValue:"value","onUpdate:modelValue":a[0]||(a[0]=e=>s.onChange(e)),class:"p-paginator-rpp-options",disabled:n.disabled},null,8,["modelValue","options","disabled"])};var B={name:"Paginator",emits:["update:first","update:rows","page"],props:{totalRecords:{type:Number,default:0},rows:{type:Number,default:0},first:{type:Number,default:0},pageLinkSize:{type:Number,default:5},rowsPerPageOptions:{type:Array,default:null},template:{type:[Object,String],default:"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"},currentPageReportTemplate:{type:null,default:"({currentPage} of {totalPages})"},alwaysShow:{type:Boolean,default:!0}},data(){return{d_first:this.first,d_rows:this.rows}},watch:{first(e){this.d_first=e},rows(e){this.d_rows=e},totalRecords(e){this.page>0&&e&&this.d_first>=e&&this.changePage(this.pageCount-1)}},mounted(){this.setPaginatorAttribute(),this.createStyle()},methods:{changePage(e){const t=this.pageCount;if(e>=0&&e<t){this.d_first=this.d_rows*e;const a={page:e,first:this.d_first,rows:this.d_rows,pageCount:t};this.$emit("update:first",this.d_first),this.$emit("update:rows",this.d_rows),this.$emit("page",a)}},changePageToFirst(e){this.isFirstPage||this.changePage(0),e.preventDefault()},changePageToPrev(e){this.changePage(this.page-1),e.preventDefault()},changePageLink(e){this.changePage(e.value-1),e.originalEvent.preventDefault()},changePageToNext(e){this.changePage(this.page+1),e.preventDefault()},changePageToLast(e){this.isLastPage||this.changePage(this.pageCount-1),e.preventDefault()},onRowChange(e){this.d_rows=e,this.changePage(this.page)},createStyle(){if(this.hasBreakpoints()){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";const t=Object.keys(this.template),a={};t.sort(((e,t)=>parseInt(e)-parseInt(t))).forEach((e=>{a[e]=this.template[e]}));for(const[t,[n]]of Object.entries(Object.entries(a))){const i=Object.entries(a)[t-1]?`and (min-width:${Object.keys(a)[t-1]})`:"";e+="default"===n?`\n @media screen ${i} {\n .paginator[${this.attributeSelector}],\n .p-paginator-default{\n display: flex !important;\n }\n }\n `:`\n .paginator[${this.attributeSelector}], .p-paginator-${n} {\n display: none !important;\n }\n @media screen ${i} and (max-width: ${n}) {\n .paginator[${this.attributeSelector}], .p-paginator-${n} {\n display: flex !important;\n }\n .paginator[${this.attributeSelector}],\n .p-paginator-default{\n display: none !important;\n }\n }\n `}this.styleElement.innerHTML=e}},hasBreakpoints(){return"object"==typeof this.template},getPaginatorClasses(e){return[{"p-paginator-default":!this.hasBreakpoints(),[`p-paginator-${e}`]:this.hasBreakpoints()}]},setPaginatorAttribute(){this.$refs.paginator&&this.$refs.paginator.length>=0&&[...this.$refs.paginator].forEach((e=>{e.setAttribute(this.attributeSelector,"")}))},getAriaLabel(e){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria[e]:void 0}},computed:{templateItems(){let e={};if(this.hasBreakpoints()){e=this.template,e.default||(e.default="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown");for(const t in e)e[t]=this.template[t].split(" ").map((e=>e.trim()));return e}return e.default=this.template.split(" ").map((e=>e.trim())),e},page(){return Math.floor(this.d_first/this.d_rows)},pageCount(){return Math.ceil(this.totalRecords/this.d_rows)},isFirstPage(){return 0===this.page},isLastPage(){return this.page===this.pageCount-1},calculatePageLinkBoundaries(){const e=this.pageCount,t=Math.min(this.pageLinkSize,e);let a=Math.max(0,Math.ceil(this.page-t/2)),n=Math.min(e-1,a+t-1);const i=this.pageLinkSize-(n-a+1);return a=Math.max(0,a-i),[a,n]},pageLinks(){let e=[],t=this.calculatePageLinkBoundaries,a=t[0],n=t[1];for(var i=a;i<=n;i++)e.push(i+1);return e},currentState(){return{page:this.page,first:this.d_first,rows:this.d_rows}},empty(){return 0===this.pageCount},currentPage(){return this.pageCount>0?this.page+1:0},attributeSelector:()=>e()},components:{CurrentPageReport:f,FirstPageLink:L,LastPageLink:C,NextPageLink:x,PageLinks:R,PrevPageLink:S,RowsPerPageDropdown:A,JumpToPageDropdown:w,JumpToPageInput:v}};const O={key:0},j={key:0,class:"p-paginator-left-content"},F={key:1,class:"p-paginator-right-content"};!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===a&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-paginator-default {\n display: flex;\n}\n.p-paginator {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n}\n.p-paginator-left-content {\n margin-right: auto;\n}\n.p-paginator-right-content {\n margin-left: auto;\n}\n.p-paginator-page,\n.p-paginator-next,\n.p-paginator-last,\n.p-paginator-first,\n.p-paginator-prev,\n.p-paginator-current {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n user-select: none;\n overflow: hidden;\n position: relative;\n}\n.p-paginator-element:focus {\n z-index: 1;\n position: relative;\n}\n"),B.render=function(e,n,i,r,o,d){const m=p("FirstPageLink"),P=p("PrevPageLink"),b=p("NextPageLink"),f=p("LastPageLink"),k=p("PageLinks"),L=p("CurrentPageReport"),y=p("RowsPerPageDropdown"),w=p("JumpToPageDropdown"),v=p("JumpToPageInput");return i.alwaysShow||d.pageLinks&&d.pageLinks.length>1?(t(),a("nav",O,[(t(!0),a(g,null,u(d.templateItems,((r,p)=>(t(),a("div",{key:p,ref_for:!0,ref:"paginator",class:s(["p-paginator p-component",d.getPaginatorClasses(p)])},[e.$slots.start?(t(),a("div",j,[c(e.$slots,"start",{state:d.currentState})])):h("",!0),(t(!0),a(g,null,u(r,(e=>(t(),a(g,{key:e},["FirstPageLink"===e?(t(),l(m,{key:0,"aria-label":d.getAriaLabel("firstPageLabel"),onClick:n[0]||(n[0]=e=>d.changePageToFirst(e)),disabled:d.isFirstPage||d.empty},null,8,["aria-label","disabled"])):"PrevPageLink"===e?(t(),l(P,{key:1,"aria-label":d.getAriaLabel("prevPageLabel"),onClick:n[1]||(n[1]=e=>d.changePageToPrev(e)),disabled:d.isFirstPage||d.empty},null,8,["aria-label","disabled"])):"NextPageLink"===e?(t(),l(b,{key:2,"aria-label":d.getAriaLabel("nextPageLabel"),onClick:n[2]||(n[2]=e=>d.changePageToNext(e)),disabled:d.isLastPage||d.empty},null,8,["aria-label","disabled"])):"LastPageLink"===e?(t(),l(f,{key:3,"aria-label":d.getAriaLabel("lastPageLabel"),onClick:n[3]||(n[3]=e=>d.changePageToLast(e)),disabled:d.isLastPage||d.empty},null,8,["aria-label","disabled"])):"PageLinks"===e?(t(),l(k,{key:4,"aria-label":d.getAriaLabel("pageLabel"),value:d.pageLinks,page:d.page,onClick:n[4]||(n[4]=e=>d.changePageLink(e))},null,8,["aria-label","value","page"])):"CurrentPageReport"===e?(t(),l(L,{key:5,"aria-live":"polite",template:i.currentPageReportTemplate,currentPage:d.currentPage,page:d.page,pageCount:d.pageCount,first:o.d_first,rows:o.d_rows,totalRecords:i.totalRecords},null,8,["template","currentPage","page","pageCount","first","rows","totalRecords"])):"RowsPerPageDropdown"===e&&i.rowsPerPageOptions?(t(),l(y,{key:6,"aria-label":d.getAriaLabel("rowsPerPageLabel"),rows:o.d_rows,options:i.rowsPerPageOptions,onRowsChange:n[5]||(n[5]=e=>d.onRowChange(e)),disabled:d.empty},null,8,["aria-label","rows","options","disabled"])):"JumpToPageDropdown"===e?(t(),l(w,{key:7,"aria-label":d.getAriaLabel("jumpToPageDropdownLabel"),page:d.page,pageCount:d.pageCount,onPageChange:n[6]||(n[6]=e=>d.changePage(e)),disabled:d.empty},null,8,["aria-label","page","pageCount","disabled"])):"JumpToPageInput"===e?(t(),l(v,{key:8,page:d.currentPage,onPageChange:n[7]||(n[7]=e=>d.changePage(e)),disabled:d.empty},null,8,["page","disabled"])):h("",!0)],64)))),128)),e.$slots.end?(t(),a("div",F,[c(e.$slots,"end",{state:d.currentState})])):h("",!0)],2)))),128))])):h("",!0)};export{B as default};