primevue 3.16.2 → 3.17.0

package/overlaypanel/overlaypanel.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.overlaypanel=function(e,t,n,i,l){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=s(t),o=s(n),a=s(i),c={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},breakpoints:{type:Object,default:null}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.overlayEventListener&&(r.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1},onContentClick(){this.selfClick=!0},onEnter(t){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.ZIndexUtils.set("overlay",t,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},r.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),r.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},alignOverlay(){e.DomHandler.absolutePosition(this.container,this.target);const t=e.DomHandler.getOffset(this.container),n=e.DomHandler.getOffset(this.target);let i=0;t.left<n.left&&(i=n.left-t.left),this.container.style.setProperty("--overlayArrowLeft",`${i}px`),t.top<n.top&&e.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},bindOutsideClickListener(){!this.outsideClickListener&&e.DomHandler.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!e.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){r.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>e.UniqueComponentId()},directives:{ripple:o.default},components:{Portal:a.default}};const d=["aria-label"],p=[l.createElementVNode("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1)];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}('\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    -webkit-transform: scaleY(0.8);\n            transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    -webkit-transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform .12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity .1s linear;\n    transition: opacity .1s linear;\n}\n.p-overlaypanel:after, .p-overlaypanel:before {\n\tbottom: 100%;\n\tleft: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.p-overlaypanel:after {\n\tborder-width: 8px;\n\tmargin-left: -8px;\n}\n.p-overlaypanel:before {\n\tborder-width: 10px;\n\tmargin-left: -10px;\n}\n.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent\n}\n'),c.render=function(e,t,n,i,s,r){const o=l.resolveComponent("Portal"),a=l.resolveDirective("ripple");return l.openBlock(),l.createBlock(o,{appendTo:n.appendTo},{default:l.withCtx((()=>[l.createVNode(l.Transition,{name:"p-overlaypanel",onEnter:r.onEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:l.withCtx((()=>[s.visible?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:r.containerClass,ref:r.containerRef},e.$attrs,{onClick:t[3]||(t[3]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e))}),[l.createElementVNode("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>r.onContentClick&&r.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>r.onContentClick&&r.onContentClick(...e))},[l.renderSlot(e.$slots,"default")],32),n.showCloseIcon?l.withDirectives((l.openBlock(),l.createElementBlock("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[2]||(t[2]=(...e)=>r.hide&&r.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},p,8,d)),[[a]]):l.createCommentVNode("",!0)],16)):l.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},c}(primevue.utils,primevue.overlayeventbus,primevue.ripple,primevue.portal,Vue);
+this.primevue=this.primevue||{},this.primevue.overlaypanel=function(e,t,n,i,l){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=s(t),o=s(n),a=s(i),c={name:"OverlayPanel",inheritAttrs:!1,emits:["show","hide"],props:{dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!1},appendTo:{type:String,default:"body"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},breakpoints:{type:Object,default:null}},data:()=>({visible:!1}),watch:{dismissable:{immediate:!0,handler(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},selfClick:!1,target:null,eventTarget:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,styleElement:null,overlayEventListener:null,beforeUnmount(){this.dismissable&&this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.destroyStyle(),this.unbindResizeListener(),this.target=null,this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.overlayEventListener&&(r.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null),this.container=null},mounted(){this.breakpoints&&this.createStyle()},methods:{toggle(e,t){this.visible?this.hide():this.show(e,t)},show(e,t){this.visible=!0,this.eventTarget=e.currentTarget,this.target=t||e.currentTarget},hide(){this.visible=!1},onContentClick(){this.selfClick=!0},onEnter(t){this.container.setAttribute(this.attributeSelector,""),this.alignOverlay(),this.dismissable&&this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.ZIndexUtils.set("overlay",t,this.baseZIndex+this.$primevue.config.zIndex.overlay),this.overlayEventListener=e=>{this.container.contains(e.target)&&(this.selfClick=!0)},r.default.on("overlay-click",this.overlayEventListener),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),r.default.off("overlay-click",this.overlayEventListener),this.overlayEventListener=null,this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},alignOverlay(){e.DomHandler.absolutePosition(this.container,this.target);const t=e.DomHandler.getOffset(this.container),n=e.DomHandler.getOffset(this.target);let i=0;t.left<n.left&&(i=n.left-t.left),this.container.style.setProperty("--overlayArrowLeft",`${i}px`),t.top<n.top&&e.DomHandler.addClass(this.container,"p-overlaypanel-flipped")},bindOutsideClickListener(){!this.outsideClickListener&&e.DomHandler.isClient()&&(this.outsideClickListener=e=>{!this.visible||this.selfClick||this.isTargetClicked(e)||(this.visible=!1),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null,this.selfClick=!1)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&(this.visible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&!e.DomHandler.isTouchDevice()&&(this.visible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.eventTarget&&(this.eventTarget===e.target||this.eventTarget.contains(e.target))},containerRef(e){this.container=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-overlaypanel[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},onOverlayClick(e){r.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-overlaypanel p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},attributeSelector:()=>e.UniqueComponentId()},directives:{ripple:o.default},components:{Portal:a.default}};const d=["aria-label"],p=[l.createElementVNode("span",{class:"p-overlaypanel-close-icon pi pi-times"},null,-1)];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-overlaypanel {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-overlaypanel-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n.p-overlaypanel-close {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Animation */\n.p-overlaypanel-enter-from {\n    opacity: 0;\n    -webkit-transform: scaleY(0.8);\n            transform: scaleY(0.8);\n}\n.p-overlaypanel-leave-to {\n    opacity: 0;\n}\n.p-overlaypanel-enter-active {\n    -webkit-transition: opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-overlaypanel-leave-active {\n    -webkit-transition: opacity 0.1s linear;\n    transition: opacity 0.1s linear;\n}\n.p-overlaypanel:after,\n.p-overlaypanel:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-overlaypanel:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-overlaypanel:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-overlaypanel-flipped:after,\n.p-overlaypanel-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-overlaypanel.p-overlaypanel-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-overlaypanel.p-overlaypanel-flipped:before {\n    border-bottom-color: transparent;\n}\n"),c.render=function(e,t,n,i,s,r){const o=l.resolveComponent("Portal"),a=l.resolveDirective("ripple");return l.openBlock(),l.createBlock(o,{appendTo:n.appendTo},{default:l.withCtx((()=>[l.createVNode(l.Transition,{name:"p-overlaypanel",onEnter:r.onEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:l.withCtx((()=>[s.visible?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:r.containerRef,class:r.containerClass},e.$attrs,{onClick:t[3]||(t[3]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e))}),[l.createElementVNode("div",{class:"p-overlaypanel-content",onClick:t[0]||(t[0]=(...e)=>r.onContentClick&&r.onContentClick(...e)),onMousedown:t[1]||(t[1]=(...e)=>r.onContentClick&&r.onContentClick(...e))},[l.renderSlot(e.$slots,"default")],32),n.showCloseIcon?l.withDirectives((l.openBlock(),l.createElementBlock("button",{key:0,class:"p-overlaypanel-close p-link",onClick:t[2]||(t[2]=(...e)=>r.hide&&r.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},p,8,d)),[[a]]):l.createCommentVNode("",!0)],16)):l.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])},c}(primevue.utils,primevue.overlayeventbus,primevue.ripple,primevue.portal,Vue);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.16.2",
+    "version": "3.17.0",
     "homepage": "https://www.primefaces.org/primevue",
     "repository": {
       "type": "git",

package/paginator/CurrentPageReport.vue

@@ -1,52 +1,52 @@
 <template>
-	<span class="p-paginator-current">{{text}}</span>
+    <span class="p-paginator-current">{{ text }}</span>
 </template>
 <script>
-	export default {
-        name: 'CurrentPageReport',
-		inheritAttrs: false,
-		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() {
-                let text = 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);
+export default {
+    name: 'CurrentPageReport',
+    inheritAttrs: false,
+    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() {
+            let text = 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);
 
-                return text;
-            }
-		}
-	}
+            return text;
+        }
+    }
+};
 </script>

package/paginator/FirstPageLink.vue

@@ -1,7 +1,7 @@
 <template>
-	<button :class="containerClass" type="button" v-ripple>
-		<span class="p-paginator-icon pi pi-angle-double-left"></span>
-	</button>
+    <button v-ripple :class="containerClass" type="button">
+        <span class="p-paginator-icon pi pi-angle-double-left"></span>
+    </button>
 </template>
 
 <script>
@@ -11,13 +11,16 @@ export default {
     name: 'FirstPageLink',
     computed: {
         containerClass() {
-            return ['p-paginator-first p-paginator-element p-link', {
-                'p-disabled': this.$attrs.disabled
-            }];
+            return [
+                'p-paginator-first p-paginator-element p-link',
+                {
+                    'p-disabled': this.$attrs.disabled
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>

package/paginator/JumpToPageDropdown.vue

@@ -1,6 +1,5 @@
 <template>
-	<JTPDropdown :modelValue="page" :options="pageOptions" optionLabel="label" optionValue="value"
-        @update:modelValue="onChange($event)" class="p-paginator-page-options" :disabled="disabled"></JTPDropdown>
+    <JTPDropdown :modelValue="page" :options="pageOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-page-options" :disabled="disabled"></JTPDropdown>
 </template>
 
 <script>
@@ -23,14 +22,16 @@ export default {
     computed: {
         pageOptions() {
             let opts = [];
-            for(let i= 0; i < this.pageCount; i++) {
-                opts.push({label: String(i+1), value: i})
+
+            for (let i = 0; i < this.pageCount; i++) {
+                opts.push({ label: String(i + 1), value: i });
             }
+
             return opts;
         }
     },
     components: {
-        'JTPDropdown': Dropdown
+        JTPDropdown: Dropdown
     }
-}
+};
 </script>

package/paginator/JumpToPageInput.vue

@@ -1,5 +1,5 @@
 <template>
-	<JTPInput :modelValue="page" @update:modelValue="onChange($event)" class="p-paginator-page-input" :disabled="disabled"></JTPInput>
+    <JTPInput :modelValue="page" @update:modelValue="onChange($event)" class="p-paginator-page-input" :disabled="disabled"></JTPInput>
 </template>
 
 <script>
@@ -20,7 +20,7 @@ export default {
         }
     },
     components: {
-        'JTPInput': InputNumber
+        JTPInput: InputNumber
     }
-}
+};
 </script>

package/paginator/LastPageLink.vue

@@ -1,7 +1,7 @@
 <template>
-	<button :class="containerClass" type="button" v-ripple>
-		<span class="p-paginator-icon pi pi-angle-double-right"></span>
-	</button>
+    <button v-ripple :class="containerClass" type="button">
+        <span class="p-paginator-icon pi pi-angle-double-right"></span>
+    </button>
 </template>
 
 <script>
@@ -11,13 +11,16 @@ export default {
     name: 'LastPageLink',
     computed: {
         containerClass() {
-            return ['p-paginator-last p-paginator-element p-link', {
-                'p-disabled': this.$attrs.disabled
-            }];
+            return [
+                'p-paginator-last p-paginator-element p-link',
+                {
+                    'p-disabled': this.$attrs.disabled
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>

package/paginator/NextPageLink.vue

@@ -1,7 +1,7 @@
 <template>
-	<button :class="containerClass" type="button" v-ripple>
-		<span class="p-paginator-icon pi pi-angle-right"></span>
-	</button>
+    <button v-ripple :class="containerClass" type="button">
+        <span class="p-paginator-icon pi pi-angle-right"></span>
+    </button>
 </template>
 
 <script>
@@ -11,13 +11,16 @@ export default {
     name: 'NextPageLink',
     computed: {
         containerClass() {
-            return ['p-paginator-next p-paginator-element p-link', {
-                'p-disabled': this.$attrs.disabled
-            }];
+            return [
+                'p-paginator-next p-paginator-element p-link',
+                {
+                    'p-disabled': this.$attrs.disabled
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>

package/paginator/PageLinks.vue

@@ -1,7 +1,6 @@
 <template>
     <span class="p-paginator-pages">
-        <button v-for="pageLink of value" :key="pageLink" :class="['p-paginator-page p-paginator-element p-link', {'p-highlight': ((pageLink - 1) === page)}]" type="button"
-            @click="onPageLinkClick($event, pageLink)" v-ripple>{{pageLink}}</button>
+        <button v-for="pageLink of value" :key="pageLink" v-ripple :class="['p-paginator-page p-paginator-element p-link', { 'p-highlight': pageLink - 1 === page }]" type="button" @click="onPageLinkClick($event, pageLink)">{{ pageLink }}</button>
     </span>
 </template>
 <script>
@@ -24,7 +23,7 @@ export default {
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>

package/paginator/Paginator.d.ts

@@ -117,14 +117,14 @@ export declare type PaginatorEmits = {
      * Callback to invoke when page changes, the event object contains information about the new state.
      * @param {PageState} event - New page state.
      */
-    'page': (event: PageState) => void;
-}
+    page: (event: PageState) => void;
+};
 
-declare class Paginator extends ClassComponent<PaginatorProps, PaginatorSlots, PaginatorEmits> { }
+declare class Paginator extends ClassComponent<PaginatorProps, PaginatorSlots, PaginatorEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Paginator: GlobalComponentConstructor<Paginator>
+        Paginator: GlobalComponentConstructor<Paginator>;
     }
 }
 
@@ -134,7 +134,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Paginator](https://www.primefaces.org/primevue/showcase/#/paginator)
+ * - [Paginator](https://www.primefaces.org/primevue/paginator)
  *
  */
 export default Paginator;

package/paginator/Paginator.vue

@@ -1,26 +1,23 @@
 <template>
-	<div class="p-paginator p-component" v-if="alwaysShow ? true : (pageLinks && pageLinks.length > 1)">
-        <div class="p-paginator-left-content" v-if="$slots.start">
+    <div v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" class="p-paginator p-component">
+        <div v-if="$slots.start" class="p-paginator-left-content">
             <slot name="start" :state="currentState"></slot>
         </div>
-		<template v-for="item of templateItems" :key="item">
-			<FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
-			<PrevPageLink v-else-if="item === 'PrevPageLink'" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
-			<NextPageLink v-else-if="item === 'NextPageLink'" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
-			<LastPageLink v-else-if="item === 'LastPageLink'" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
-			<PageLinks v-else-if="item === 'PageLinks'" :value="pageLinks" :page="page" @click="changePageLink($event)" />
-			<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :template="currentPageReportTemplate" :currentPage="currentPage"
-                :page="page" :pageCount="pageCount" :first="d_first" :rows="d_rows" :totalRecords="totalRecords" />
-			<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :rows="d_rows"
-                :options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty"/>
-            <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :page="page" :pageCount="pageCount"
-                @page-change="changePage($event)" :disabled="empty"/>
-            <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty"/>
+        <template v-for="item of templateItems" :key="item">
+            <FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
+            <PrevPageLink v-else-if="item === 'PrevPageLink'" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
+            <NextPageLink v-else-if="item === 'NextPageLink'" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
+            <LastPageLink v-else-if="item === 'LastPageLink'" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
+            <PageLinks v-else-if="item === 'PageLinks'" :value="pageLinks" :page="page" @click="changePageLink($event)" />
+            <CurrentPageReport v-else-if="item === 'CurrentPageReport'" :template="currentPageReportTemplate" :currentPage="currentPage" :page="page" :pageCount="pageCount" :first="d_first" :rows="d_rows" :totalRecords="totalRecords" />
+            <RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :rows="d_rows" :options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty" />
+            <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :page="page" :pageCount="pageCount" @page-change="changePage($event)" :disabled="empty" />
+            <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" />
         </template>
-        <div class="p-paginator-right-content" v-if="$slots.end">
+        <div v-if="$slots.end" class="p-paginator-right-content">
             <slot name="end" :state="currentState"></slot>
         </div>
-	</div>
+    </div>
 </template>
 
 <script>
@@ -75,7 +72,7 @@ export default {
         return {
             d_first: this.first,
             d_rows: this.rows
-        }
+        };
     },
     watch: {
         first(newValue) {
@@ -85,7 +82,7 @@ export default {
             this.d_rows = newValue;
         },
         totalRecords(newValue) {
-            if (this.page > 0 && newValue && (this.d_first >= newValue)) {
+            if (this.page > 0 && newValue && this.d_first >= newValue) {
                 this.changePage(this.pageCount - 1);
             }
         }
@@ -103,13 +100,13 @@ export default {
                     pageCount: pc
                 };
 
-				this.$emit('update:first', this.d_first);
+                this.$emit('update:first', this.d_first);
                 this.$emit('update:rows', this.d_rows);
                 this.$emit('page', state);
             }
         },
         changePageToFirst(event) {
-            if(!this.isFirstPage) {
+            if (!this.isFirstPage) {
                 this.changePage(0);
             }
 
@@ -124,11 +121,11 @@ export default {
             event.originalEvent.preventDefault();
         },
         changePageToNext(event) {
-            this.changePage(this.page  + 1);
+            this.changePage(this.page + 1);
             event.preventDefault();
         },
         changePageToLast(event) {
-            if(!this.isLastPage) {
+            if (!this.isLastPage) {
                 this.changePage(this.pageCount - 1);
             }
 
@@ -142,9 +139,11 @@ export default {
     computed: {
         templateItems() {
             let keys = [];
+
             this.template.split(' ').map((value) => {
                 keys.push(value.trim());
-            })
+            });
+
             return keys;
         },
         page() {
@@ -164,11 +163,12 @@ export default {
             const visiblePages = Math.min(this.pageLinkSize, numberOfPages);
 
             //calculate range, keep current in middle if necessary
-            let start = Math.max(0, Math.ceil(this.page - ((visiblePages) / 2)));
+            let start = Math.max(0, Math.ceil(this.page - visiblePages / 2));
             let end = Math.min(numberOfPages - 1, start + visiblePages - 1);
 
             //check when approaching to last page
             const delta = this.pageLinkSize - (end - start + 1);
+
             start = Math.max(0, start - delta);
 
             return [start, end];
@@ -179,7 +179,7 @@ export default {
             let start = boundaries[0];
             let end = boundaries[1];
 
-            for(var i = start; i <= end; i++) {
+            for (var i = start; i <= end; i++) {
                 pageLinks.push(i + 1);
             }
 
@@ -190,7 +190,7 @@ export default {
                 page: this.page,
                 first: this.d_first,
                 rows: this.d_rows
-            }
+            };
         },
         empty() {
             return this.pageCount === 0;
@@ -200,17 +200,17 @@ export default {
         }
     },
     components: {
-        'CurrentPageReport': CurrrentPageReport,
-        'FirstPageLink': FirstPageLink,
-        'LastPageLink': LastPageLink,
-        'NextPageLink': NextPageLink,
-        'PageLinks': PageLinks,
-        'PrevPageLink': PrevPageLink,
-        'RowsPerPageDropdown': RowsPerPageDropdown,
-        'JumpToPageDropdown': JumpToPageDropdown,
-        'JumpToPageInput': JumpToPageInput
+        CurrentPageReport: CurrrentPageReport,
+        FirstPageLink: FirstPageLink,
+        LastPageLink: LastPageLink,
+        NextPageLink: NextPageLink,
+        PageLinks: PageLinks,
+        PrevPageLink: PrevPageLink,
+        RowsPerPageDropdown: RowsPerPageDropdown,
+        JumpToPageDropdown: JumpToPageDropdown,
+        JumpToPageInput: JumpToPageInput
     }
-}
+};
 </script>
 
 <style lang="css">
@@ -222,11 +222,11 @@ export default {
 }
 
 .p-paginator-left-content {
-	margin-right: auto;
+    margin-right: auto;
 }
 
 .p-paginator-right-content {
-	margin-left: auto;
+    margin-left: auto;
 }
 
 .p-paginator-page,

package/paginator/PrevPageLink.vue

@@ -1,7 +1,7 @@
 <template>
-	<button :class="containerClass" type="button" v-ripple>
-		<span class="p-paginator-icon pi pi-angle-left"></span>
-	</button>
+    <button v-ripple :class="containerClass" type="button">
+        <span class="p-paginator-icon pi pi-angle-left"></span>
+    </button>
 </template>
 
 <script>
@@ -11,13 +11,16 @@ export default {
     name: 'PrevPageLink',
     computed: {
         containerClass() {
-            return ['p-paginator-prev p-paginator-element p-link', {
-                'p-disabled': this.$attrs.disabled
-            }];
+            return [
+                'p-paginator-prev p-paginator-element p-link',
+                {
+                    'p-disabled': this.$attrs.disabled
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>

package/paginator/RowsPerPageDropdown.vue

@@ -1,6 +1,5 @@
 <template>
-	<RPPDropdown :modelValue="rows" :options="rowsOptions" optionLabel="label" optionValue="value"
-        @update:modelValue="onChange($event)" class="p-paginator-rpp-options" :disabled="disabled"></RPPDropdown>
+    <RPPDropdown :modelValue="rows" :options="rowsOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-rpp-options" :disabled="disabled"></RPPDropdown>
 </template>
 
 <script>
@@ -23,16 +22,18 @@ export default {
     computed: {
         rowsOptions() {
             let opts = [];
+
             if (this.options) {
-                for(let i= 0; i < this.options.length; i++) {
-                    opts.push({label: String(this.options[i]), value: this.options[i]})
+                for (let i = 0; i < this.options.length; i++) {
+                    opts.push({ label: String(this.options[i]), value: this.options[i] });
                 }
             }
+
             return opts;
         }
     },
     components: {
-        'RPPDropdown': Dropdown
+        RPPDropdown: Dropdown
     }
-}
+};
 </script>