primevue 3.16.2 → 3.18.0

package/paginator/paginator.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var utils = require('primevue/utils');
 var vue = require('vue');
 var Ripple = require('primevue/ripple');
 var Dropdown = require('primevue/dropdown');
@@ -12,52 +13,52 @@ var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
 var InputNumber__default = /*#__PURE__*/_interopDefaultLegacy(InputNumber);
 
 var script$9 = {
-        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;
-            }
-		}
-	};
+    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;
+        }
+    }
+};
 
 const _hoisted_1$6 = { class: "p-paginator-current" };
 
@@ -71,13 +72,16 @@ var script$8 = {
     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__default["default"]
+        ripple: Ripple__default["default"]
     }
 };
 
@@ -100,16 +104,97 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
 script$8.render = render$8;
 
 var script$7 = {
+    name: 'JumpToPageDropdown',
+    inheritAttrs: false,
+    emits: ['page-change'],
+    props: {
+        page: Number,
+        pageCount: Number,
+        disabled: Boolean
+    },
+    methods: {
+        onChange(value) {
+            this.$emit('page-change', value);
+        }
+    },
+    computed: {
+        pageOptions() {
+            let opts = [];
+
+            for (let i = 0; i < this.pageCount; i++) {
+                opts.push({ label: String(i + 1), value: i });
+            }
+
+            return opts;
+        }
+    },
+    components: {
+        JTPDropdown: Dropdown__default["default"]
+    }
+};
+
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_JTPDropdown = vue.resolveComponent("JTPDropdown");
+
+  return (vue.openBlock(), vue.createBlock(_component_JTPDropdown, {
+    modelValue: $props.page,
+    options: $options.pageOptions,
+    optionLabel: "label",
+    optionValue: "value",
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
+    class: "p-paginator-page-options",
+    disabled: $props.disabled
+  }, null, 8, ["modelValue", "options", "disabled"]))
+}
+
+script$7.render = render$7;
+
+var script$6 = {
+    name: 'JumpToPageInput',
+    inheritAttrs: false,
+    emits: ['page-change'],
+    props: {
+        page: Number,
+        pageCount: Number,
+        disabled: Boolean
+    },
+    methods: {
+        onChange(value) {
+            this.$emit('page-change', value - 1);
+        }
+    },
+    components: {
+        JTPInput: InputNumber__default["default"]
+    }
+};
+
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_JTPInput = vue.resolveComponent("JTPInput");
+
+  return (vue.openBlock(), vue.createBlock(_component_JTPInput, {
+    modelValue: $props.page,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
+    class: "p-paginator-page-input",
+    disabled: $props.disabled
+  }, null, 8, ["modelValue", "disabled"]))
+}
+
+script$6.render = render$6;
+
+var script$5 = {
     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__default["default"]
+        ripple: Ripple__default["default"]
     }
 };
 
@@ -118,7 +203,7 @@ const _hoisted_2$4 = [
   _hoisted_1$4
 ];
 
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = vue.resolveDirective("ripple");
 
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
@@ -129,19 +214,22 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   ])
 }
 
-script$7.render = render$7;
+script$5.render = render$5;
 
-var script$6 = {
+var script$4 = {
     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__default["default"]
+        ripple: Ripple__default["default"]
     }
 };
 
@@ -150,7 +238,7 @@ const _hoisted_2$3 = [
   _hoisted_1$3
 ];
 
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = vue.resolveDirective("ripple");
 
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
@@ -161,9 +249,9 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ])
 }
 
-script$6.render = render$6;
+script$4.render = render$4;
 
-var script$5 = {
+var script$3 = {
     name: 'PageLinks',
     inheritAttrs: false,
     emits: ['click'],
@@ -180,21 +268,21 @@ var script$5 = {
         }
     },
     directives: {
-        'ripple': Ripple__default["default"]
+        ripple: Ripple__default["default"]
     }
 };
 
 const _hoisted_1$2 = { class: "p-paginator-pages" };
 const _hoisted_2$2 = ["onClick"];
 
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = vue.resolveDirective("ripple");
 
   return (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$2, [
     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.value, (pageLink) => {
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
         key: pageLink,
-        class: vue.normalizeClass(['p-paginator-page p-paginator-element p-link', {'p-highlight': ((pageLink - 1) === $props.page)}]),
+        class: vue.normalizeClass(['p-paginator-page p-paginator-element p-link', { 'p-highlight': pageLink - 1 === $props.page }]),
         type: "button",
         onClick: $event => ($options.onPageLinkClick($event, pageLink))
       }, [
@@ -206,19 +294,22 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$5.render = render$5;
+script$3.render = render$3;
 
-var script$4 = {
+var script$2 = {
     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__default["default"]
+        ripple: Ripple__default["default"]
     }
 };
 
@@ -227,7 +318,7 @@ const _hoisted_2$1 = [
   _hoisted_1$1
 ];
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = vue.resolveDirective("ripple");
 
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
@@ -238,9 +329,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   ])
 }
 
-script$4.render = render$4;
+script$2.render = render$2;
 
-var script$3 = {
+var script$1 = {
     name: 'RowsPerPageDropdown',
     inheritAttrs: false,
     emits: ['rows-change'],
@@ -257,20 +348,22 @@ var script$3 = {
     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__default["default"]
+        RPPDropdown: Dropdown__default["default"]
     }
 };
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_RPPDropdown = vue.resolveComponent("RPPDropdown");
 
   return (vue.openBlock(), vue.createBlock(_component_RPPDropdown, {
@@ -284,82 +377,6 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 8, ["modelValue", "options", "disabled"]))
 }
 
-script$3.render = render$3;
-
-var script$2 = {
-    name: 'JumpToPageDropdown',
-    inheritAttrs: false,
-    emits: ['page-change'],
-    props: {
-        page: Number,
-        pageCount: Number,
-        disabled: Boolean
-    },
-    methods: {
-        onChange(value) {
-            this.$emit('page-change', value);
-        }
-    },
-    computed: {
-        pageOptions() {
-            let opts = [];
-            for(let i= 0; i < this.pageCount; i++) {
-                opts.push({label: String(i+1), value: i});
-            }
-            return opts;
-        }
-    },
-    components: {
-        'JTPDropdown': Dropdown__default["default"]
-    }
-};
-
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_JTPDropdown = vue.resolveComponent("JTPDropdown");
-
-  return (vue.openBlock(), vue.createBlock(_component_JTPDropdown, {
-    modelValue: $props.page,
-    options: $options.pageOptions,
-    optionLabel: "label",
-    optionValue: "value",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
-    class: "p-paginator-page-options",
-    disabled: $props.disabled
-  }, null, 8, ["modelValue", "options", "disabled"]))
-}
-
-script$2.render = render$2;
-
-var script$1 = {
-    name: 'JumpToPageInput',
-    inheritAttrs: false,
-    emits: ['page-change'],
-    props: {
-        page: Number,
-        pageCount: Number,
-        disabled: Boolean
-    },
-    methods: {
-        onChange(value) {
-            this.$emit('page-change', value - 1);
-        }
-    },
-    components: {
-        'JTPInput': InputNumber__default["default"]
-    }
-};
-
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_JTPInput = vue.resolveComponent("JTPInput");
-
-  return (vue.openBlock(), vue.createBlock(_component_JTPInput, {
-    modelValue: $props.page,
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
-    class: "p-paginator-page-input",
-    disabled: $props.disabled
-  }, null, 8, ["modelValue", "disabled"]))
-}
-
 script$1.render = render$1;
 
 var script = {
@@ -387,7 +404,7 @@ var script = {
             default: null
         },
         template: {
-            type: String,
+            type: [Object, String],
             default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
         },
         currentPageReportTemplate: {
@@ -403,7 +420,7 @@ var script = {
         return {
             d_first: this.first,
             d_rows: this.rows
-        }
+        };
     },
     watch: {
         first(newValue) {
@@ -413,11 +430,15 @@ var script = {
             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);
             }
         }
     },
+    mounted() {
+        this.setPaginatorAttribute();
+        this.createStyle();
+    },
     methods: {
         changePage(p) {
             const pc = this.pageCount;
@@ -431,13 +452,14 @@ var script = {
                     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);
             }
 
@@ -452,11 +474,11 @@ var script = {
             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);
             }
 
@@ -465,14 +487,96 @@ var script = {
         onRowChange(value) {
             this.d_rows = value;
             this.changePage(this.page);
+        },
+        createStyle() {
+            if (this.hasBreakpoints()) {
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                document.head.appendChild(this.styleElement);
+
+                let innerHTML = '';
+
+                const keys = Object.keys(this.template);
+                const sortedBreakpoints = {};
+
+                keys.sort((a, b) => parseInt(a) - parseInt(b)).forEach((key) => {
+                    sortedBreakpoints[key] = this.template[key];
+                });
+
+                for (const [index, [key]] of Object.entries(Object.entries(sortedBreakpoints))) {
+                    const minValue = Object.entries(sortedBreakpoints)[index - 1] ? `and (min-width:${Object.keys(sortedBreakpoints)[index - 1]})` : '';
+
+                    if (key === 'default') {
+                        innerHTML += `
+                            @media screen ${minValue} {
+                                .paginator[${this.attributeSelector}],
+                                .p-paginator-default{
+                                    display: flex !important;
+                                }
+                            }
+                        `;
+                    } else {
+                        innerHTML += `
+                        .paginator[${this.attributeSelector}], .p-paginator-${key} {
+                                display: none !important;
+                            }
+                        @media screen ${minValue} and (max-width: ${key}) {
+                            .paginator[${this.attributeSelector}], .p-paginator-${key} {
+                                display: flex !important;
+                            }
+                            .paginator[${this.attributeSelector}],
+                            .p-paginator-default{
+                                display: none !important;
+                            }
+                        }
+                    `;
+                    }
+                }
+
+                this.styleElement.innerHTML = innerHTML;
+            }
+        },
+        hasBreakpoints() {
+            return typeof this.template === 'object';
+        },
+        getPaginatorClasses(key) {
+            return [
+                {
+                    'p-paginator-default': !this.hasBreakpoints(),
+                    [`p-paginator-${key}`]: this.hasBreakpoints()
+                }
+            ];
+        },
+        setPaginatorAttribute() {
+            [...this.$refs.paginator].forEach((el) => {
+                el.setAttribute(this.attributeSelector, '');
+            });
         }
     },
     computed: {
         templateItems() {
-            let keys = [];
-            this.template.split(' ').map((value) => {
-                keys.push(value.trim());
+            let keys = {};
+
+            if (this.hasBreakpoints()) {
+                keys = this.template;
+
+                if (!keys.default) {
+                    keys.default = 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown';
+                }
+
+                for (const item in keys) {
+                    keys[item] = this.template[item].split(' ').map((value) => {
+                        return value.trim();
+                    });
+                }
+
+                return keys;
+            }
+
+            keys['default'] = this.template.split(' ').map((value) => {
+                return value.trim();
             });
+
             return keys;
         },
         page() {
@@ -492,11 +596,12 @@ var script = {
             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];
@@ -507,7 +612,7 @@ var script = {
             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);
             }
 
@@ -518,32 +623,32 @@ var script = {
                 page: this.page,
                 first: this.d_first,
                 rows: this.d_rows
-            }
+            };
         },
         empty() {
             return this.pageCount === 0;
         },
         currentPage() {
             return this.pageCount > 0 ? this.page + 1 : 0;
+        },
+        attributeSelector() {
+            return utils.UniqueComponentId();
         }
     },
     components: {
-        'CurrentPageReport': script$9,
-        'FirstPageLink': script$8,
-        'LastPageLink': script$7,
-        'NextPageLink': script$6,
-        'PageLinks': script$5,
-        'PrevPageLink': script$4,
-        'RowsPerPageDropdown': script$3,
-        'JumpToPageDropdown': script$2,
-        'JumpToPageInput': script$1
+        CurrentPageReport: script$9,
+        FirstPageLink: script$8,
+        LastPageLink: script$5,
+        NextPageLink: script$4,
+        PageLinks: script$3,
+        PrevPageLink: script$2,
+        RowsPerPageDropdown: script$1,
+        JumpToPageDropdown: script$7,
+        JumpToPageInput: script$6
     }
 };
 
-const _hoisted_1 = {
-  key: 0,
-  class: "p-paginator p-component"
-};
+const _hoisted_1 = { key: 0 };
 const _hoisted_2 = {
   key: 0,
   class: "p-paginator-left-content"
@@ -564,88 +669,97 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_JumpToPageDropdown = vue.resolveComponent("JumpToPageDropdown");
   const _component_JumpToPageInput = vue.resolveComponent("JumpToPageInput");
 
-  return ($props.alwaysShow ? true : ($options.pageLinks && $options.pageLinks.length > 1))
+  return ($props.alwaysShow ? true : $options.pageLinks && $options.pageLinks.length > 1)
     ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        (_ctx.$slots.start)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-              vue.renderSlot(_ctx.$slots, "start", { state: $options.currentState })
-            ]))
-          : vue.createCommentVNode("", true),
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.templateItems, (item) => {
-          return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: item }, [
-            (item === 'FirstPageLink')
-              ? (vue.openBlock(), vue.createBlock(_component_FirstPageLink, {
-                  key: 0,
-                  onClick: _cache[0] || (_cache[0] = $event => ($options.changePageToFirst($event))),
-                  disabled: $options.isFirstPage || $options.empty
-                }, null, 8, ["disabled"]))
-              : (item === 'PrevPageLink')
-                ? (vue.openBlock(), vue.createBlock(_component_PrevPageLink, {
-                    key: 1,
-                    onClick: _cache[1] || (_cache[1] = $event => ($options.changePageToPrev($event))),
-                    disabled: $options.isFirstPage || $options.empty
-                  }, null, 8, ["disabled"]))
-                : (item === 'NextPageLink')
-                  ? (vue.openBlock(), vue.createBlock(_component_NextPageLink, {
-                      key: 2,
-                      onClick: _cache[2] || (_cache[2] = $event => ($options.changePageToNext($event))),
-                      disabled: $options.isLastPage || $options.empty
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.templateItems, (value, key) => {
+          return (vue.openBlock(), vue.createElementBlock("div", {
+            key: key,
+            ref_for: true,
+            ref: "paginator",
+            class: vue.normalizeClass(["p-paginator p-component", $options.getPaginatorClasses(key)])
+          }, [
+            (_ctx.$slots.start)
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                  vue.renderSlot(_ctx.$slots, "start", { state: $options.currentState })
+                ]))
+              : vue.createCommentVNode("", true),
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value, (item) => {
+              return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: item }, [
+                (item === 'FirstPageLink')
+                  ? (vue.openBlock(), vue.createBlock(_component_FirstPageLink, {
+                      key: 0,
+                      onClick: _cache[0] || (_cache[0] = $event => ($options.changePageToFirst($event))),
+                      disabled: $options.isFirstPage || $options.empty
                     }, null, 8, ["disabled"]))
-                  : (item === 'LastPageLink')
-                    ? (vue.openBlock(), vue.createBlock(_component_LastPageLink, {
-                        key: 3,
-                        onClick: _cache[3] || (_cache[3] = $event => ($options.changePageToLast($event))),
-                        disabled: $options.isLastPage || $options.empty
+                  : (item === 'PrevPageLink')
+                    ? (vue.openBlock(), vue.createBlock(_component_PrevPageLink, {
+                        key: 1,
+                        onClick: _cache[1] || (_cache[1] = $event => ($options.changePageToPrev($event))),
+                        disabled: $options.isFirstPage || $options.empty
                       }, null, 8, ["disabled"]))
-                    : (item === 'PageLinks')
-                      ? (vue.openBlock(), vue.createBlock(_component_PageLinks, {
-                          key: 4,
-                          value: $options.pageLinks,
-                          page: $options.page,
-                          onClick: _cache[4] || (_cache[4] = $event => ($options.changePageLink($event)))
-                        }, null, 8, ["value", "page"]))
-                      : (item === 'CurrentPageReport')
-                        ? (vue.openBlock(), vue.createBlock(_component_CurrentPageReport, {
-                            key: 5,
-                            template: $props.currentPageReportTemplate,
-                            currentPage: $options.currentPage,
-                            page: $options.page,
-                            pageCount: $options.pageCount,
-                            first: $data.d_first,
-                            rows: $data.d_rows,
-                            totalRecords: $props.totalRecords
-                          }, null, 8, ["template", "currentPage", "page", "pageCount", "first", "rows", "totalRecords"]))
-                        : (item === 'RowsPerPageDropdown' && $props.rowsPerPageOptions)
-                          ? (vue.openBlock(), vue.createBlock(_component_RowsPerPageDropdown, {
-                              key: 6,
-                              rows: $data.d_rows,
-                              options: $props.rowsPerPageOptions,
-                              onRowsChange: _cache[5] || (_cache[5] = $event => ($options.onRowChange($event))),
-                              disabled: $options.empty
-                            }, null, 8, ["rows", "options", "disabled"]))
-                          : (item === 'JumpToPageDropdown')
-                            ? (vue.openBlock(), vue.createBlock(_component_JumpToPageDropdown, {
-                                key: 7,
+                    : (item === 'NextPageLink')
+                      ? (vue.openBlock(), vue.createBlock(_component_NextPageLink, {
+                          key: 2,
+                          onClick: _cache[2] || (_cache[2] = $event => ($options.changePageToNext($event))),
+                          disabled: $options.isLastPage || $options.empty
+                        }, null, 8, ["disabled"]))
+                      : (item === 'LastPageLink')
+                        ? (vue.openBlock(), vue.createBlock(_component_LastPageLink, {
+                            key: 3,
+                            onClick: _cache[3] || (_cache[3] = $event => ($options.changePageToLast($event))),
+                            disabled: $options.isLastPage || $options.empty
+                          }, null, 8, ["disabled"]))
+                        : (item === 'PageLinks')
+                          ? (vue.openBlock(), vue.createBlock(_component_PageLinks, {
+                              key: 4,
+                              value: $options.pageLinks,
+                              page: $options.page,
+                              onClick: _cache[4] || (_cache[4] = $event => ($options.changePageLink($event)))
+                            }, null, 8, ["value", "page"]))
+                          : (item === 'CurrentPageReport')
+                            ? (vue.openBlock(), vue.createBlock(_component_CurrentPageReport, {
+                                key: 5,
+                                template: $props.currentPageReportTemplate,
+                                currentPage: $options.currentPage,
                                 page: $options.page,
                                 pageCount: $options.pageCount,
-                                onPageChange: _cache[6] || (_cache[6] = $event => ($options.changePage($event))),
-                                disabled: $options.empty
-                              }, null, 8, ["page", "pageCount", "disabled"]))
-                            : (item === 'JumpToPageInput')
-                              ? (vue.openBlock(), vue.createBlock(_component_JumpToPageInput, {
-                                  key: 8,
-                                  page: $options.currentPage,
-                                  onPageChange: _cache[7] || (_cache[7] = $event => ($options.changePage($event))),
+                                first: $data.d_first,
+                                rows: $data.d_rows,
+                                totalRecords: $props.totalRecords
+                              }, null, 8, ["template", "currentPage", "page", "pageCount", "first", "rows", "totalRecords"]))
+                            : (item === 'RowsPerPageDropdown' && $props.rowsPerPageOptions)
+                              ? (vue.openBlock(), vue.createBlock(_component_RowsPerPageDropdown, {
+                                  key: 6,
+                                  rows: $data.d_rows,
+                                  options: $props.rowsPerPageOptions,
+                                  onRowsChange: _cache[5] || (_cache[5] = $event => ($options.onRowChange($event))),
                                   disabled: $options.empty
-                                }, null, 8, ["page", "disabled"]))
-                              : vue.createCommentVNode("", true)
-          ], 64))
-        }), 128)),
-        (_ctx.$slots.end)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-              vue.renderSlot(_ctx.$slots, "end", { state: $options.currentState })
-            ]))
-          : vue.createCommentVNode("", true)
+                                }, null, 8, ["rows", "options", "disabled"]))
+                              : (item === 'JumpToPageDropdown')
+                                ? (vue.openBlock(), vue.createBlock(_component_JumpToPageDropdown, {
+                                    key: 7,
+                                    page: $options.page,
+                                    pageCount: $options.pageCount,
+                                    onPageChange: _cache[6] || (_cache[6] = $event => ($options.changePage($event))),
+                                    disabled: $options.empty
+                                  }, null, 8, ["page", "pageCount", "disabled"]))
+                                : (item === 'JumpToPageInput')
+                                  ? (vue.openBlock(), vue.createBlock(_component_JumpToPageInput, {
+                                      key: 8,
+                                      page: $options.currentPage,
+                                      onPageChange: _cache[7] || (_cache[7] = $event => ($options.changePage($event))),
+                                      disabled: $options.empty
+                                    }, null, 8, ["page", "disabled"]))
+                                  : vue.createCommentVNode("", true)
+              ], 64))
+            }), 128)),
+            (_ctx.$slots.end)
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                  vue.renderSlot(_ctx.$slots, "end", { state: $options.currentState })
+                ]))
+              : vue.createCommentVNode("", true)
+          ], 2))
+        }), 128))
       ]))
     : vue.createCommentVNode("", true)
 }
@@ -677,7 +791,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-paginator {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n.p-paginator-left-content {\n\tmargin-right: auto;\n}\n.p-paginator-right-content {\n\tmargin-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: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    line-height: 1;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\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";
+var css_248z = "\n.p-paginator-default {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-paginator {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-wrap: wrap;\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: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    line-height: 1;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\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";
 styleInject(css_248z);
 
 script.render = render;