primevue 3.16.2 → 3.18.0

package/paginator/paginator.js

@@ -1,574 +1,685 @@
 this.primevue = this.primevue || {};
-this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
-        'use strict';
-
-        function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-        var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
-        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;
-                    }
-        		}
-        	};
+this.primevue.paginator = (function (utils, vue, Ripple, Dropdown, InputNumber) {
+    'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+    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;
+            }
+        }
+    };
 
-        const _hoisted_1$6 = { class: "p-paginator-current" };
+    const _hoisted_1$6 = { class: "p-paginator-current" };
 
-        function render$9(_ctx, _cache, $props, $setup, $data, $options) {
-          return (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$6, vue.toDisplayString($options.text), 1))
-        }
+    function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+      return (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$6, vue.toDisplayString($options.text), 1))
+    }
 
-        script$9.render = render$9;
+    script$9.render = render$9;
 
-        var script$8 = {
-            name: 'FirstPageLink',
-            computed: {
-                containerClass() {
-                    return ['p-paginator-first p-paginator-element p-link', {
+    var script$8 = {
+        name: 'FirstPageLink',
+        computed: {
+            containerClass() {
+                return [
+                    'p-paginator-first p-paginator-element p-link',
+                    {
                         'p-disabled': this.$attrs.disabled
-                    }];
-                }
-            },
-            directives: {
-                'ripple': Ripple__default["default"]
+                    }
+                ];
             }
-        };
-
-        const _hoisted_1$5 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-paginator-icon pi pi-angle-double-left" }, null, -1);
-        const _hoisted_2$5 = [
-          _hoisted_1$5
-        ];
-
-        function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-          const _directive_ripple = vue.resolveDirective("ripple");
-
-          return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-            class: vue.normalizeClass($options.containerClass),
-            type: "button"
-          }, _hoisted_2$5, 2)), [
-            [_directive_ripple]
-          ])
+        },
+        directives: {
+            ripple: Ripple__default["default"]
         }
+    };
+
+    const _hoisted_1$5 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-paginator-icon pi pi-angle-double-left" }, null, -1);
+    const _hoisted_2$5 = [
+      _hoisted_1$5
+    ];
+
+    function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+      const _directive_ripple = vue.resolveDirective("ripple");
+
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+        class: vue.normalizeClass($options.containerClass),
+        type: "button"
+      }, _hoisted_2$5, 2)), [
+        [_directive_ripple]
+      ])
+    }
+
+    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 = [];
 
-        script$8.render = render$8;
+                for (let i = 0; i < this.pageCount; i++) {
+                    opts.push({ label: String(i + 1), value: i });
+                }
 
-        var script$7 = {
-            name: 'LastPageLink',
-            computed: {
-                containerClass() {
-                    return ['p-paginator-last p-paginator-element p-link', {
+                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
-                    }];
-                }
-            },
-            directives: {
-                'ripple': Ripple__default["default"]
+                    }
+                ];
             }
-        };
-
-        const _hoisted_1$4 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-paginator-icon pi pi-angle-double-right" }, null, -1);
-        const _hoisted_2$4 = [
-          _hoisted_1$4
-        ];
-
-        function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-          const _directive_ripple = vue.resolveDirective("ripple");
-
-          return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-            class: vue.normalizeClass($options.containerClass),
-            type: "button"
-          }, _hoisted_2$4, 2)), [
-            [_directive_ripple]
-          ])
+        },
+        directives: {
+            ripple: Ripple__default["default"]
         }
-
-        script$7.render = render$7;
-
-        var script$6 = {
-            name: 'NextPageLink',
-            computed: {
-                containerClass() {
-                    return ['p-paginator-next p-paginator-element p-link', {
+    };
+
+    const _hoisted_1$4 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-paginator-icon pi pi-angle-double-right" }, null, -1);
+    const _hoisted_2$4 = [
+      _hoisted_1$4
+    ];
+
+    function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+      const _directive_ripple = vue.resolveDirective("ripple");
+
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+        class: vue.normalizeClass($options.containerClass),
+        type: "button"
+      }, _hoisted_2$4, 2)), [
+        [_directive_ripple]
+      ])
+    }
+
+    script$5.render = render$5;
+
+    var script$4 = {
+        name: 'NextPageLink',
+        computed: {
+            containerClass() {
+                return [
+                    'p-paginator-next p-paginator-element p-link',
+                    {
                         'p-disabled': this.$attrs.disabled
-                    }];
-                }
-            },
-            directives: {
-                'ripple': Ripple__default["default"]
+                    }
+                ];
             }
-        };
+        },
+        directives: {
+            ripple: Ripple__default["default"]
+        }
+    };
+
+    const _hoisted_1$3 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-paginator-icon pi pi-angle-right" }, null, -1);
+    const _hoisted_2$3 = [
+      _hoisted_1$3
+    ];
+
+    function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+      const _directive_ripple = vue.resolveDirective("ripple");
+
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+        class: vue.normalizeClass($options.containerClass),
+        type: "button"
+      }, _hoisted_2$3, 2)), [
+        [_directive_ripple]
+      ])
+    }
+
+    script$4.render = render$4;
+
+    var script$3 = {
+        name: 'PageLinks',
+        inheritAttrs: false,
+        emits: ['click'],
+        props: {
+            value: Array,
+            page: Number
+        },
+        methods: {
+            onPageLinkClick(event, pageLink) {
+                this.$emit('click', {
+                    originalEvent: event,
+                    value: pageLink
+                });
+            }
+        },
+        directives: {
+            ripple: Ripple__default["default"]
+        }
+    };
 
-        const _hoisted_1$3 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-paginator-icon pi pi-angle-right" }, null, -1);
-        const _hoisted_2$3 = [
-          _hoisted_1$3
-        ];
+    const _hoisted_1$2 = { class: "p-paginator-pages" };
+    const _hoisted_2$2 = ["onClick"];
 
-        function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-          const _directive_ripple = vue.resolveDirective("ripple");
+    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", {
-            class: vue.normalizeClass($options.containerClass),
-            type: "button"
-          }, _hoisted_2$3, 2)), [
+            key: pageLink,
+            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))
+          }, [
+            vue.createTextVNode(vue.toDisplayString(pageLink), 1)
+          ], 10, _hoisted_2$2)), [
             [_directive_ripple]
           ])
+        }), 128))
+      ]))
+    }
+
+    script$3.render = render$3;
+
+    var script$2 = {
+        name: 'PrevPageLink',
+        computed: {
+            containerClass() {
+                return [
+                    'p-paginator-prev p-paginator-element p-link',
+                    {
+                        'p-disabled': this.$attrs.disabled
+                    }
+                ];
+            }
+        },
+        directives: {
+            ripple: Ripple__default["default"]
         }
-
-        script$6.render = render$6;
-
-        var script$5 = {
-            name: 'PageLinks',
-            inheritAttrs: false,
-            emits: ['click'],
-            props: {
-                value: Array,
-                page: Number
-            },
-            methods: {
-                onPageLinkClick(event, pageLink) {
-                    this.$emit('click', {
-                        originalEvent: event,
-                        value: pageLink
-                    });
+    };
+
+    const _hoisted_1$1 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-paginator-icon pi pi-angle-left" }, null, -1);
+    const _hoisted_2$1 = [
+      _hoisted_1$1
+    ];
+
+    function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+      const _directive_ripple = vue.resolveDirective("ripple");
+
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+        class: vue.normalizeClass($options.containerClass),
+        type: "button"
+      }, _hoisted_2$1, 2)), [
+        [_directive_ripple]
+      ])
+    }
+
+    script$2.render = render$2;
+
+    var script$1 = {
+        name: 'RowsPerPageDropdown',
+        inheritAttrs: false,
+        emits: ['rows-change'],
+        props: {
+            options: Array,
+            rows: Number,
+            disabled: Boolean
+        },
+        methods: {
+            onChange(value) {
+                this.$emit('rows-change', value);
+            }
+        },
+        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] });
+                    }
                 }
+
+                return opts;
+            }
+        },
+        components: {
+            RPPDropdown: Dropdown__default["default"]
+        }
+    };
+
+    function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_RPPDropdown = vue.resolveComponent("RPPDropdown");
+
+      return (vue.openBlock(), vue.createBlock(_component_RPPDropdown, {
+        modelValue: $props.rows,
+        options: $options.rowsOptions,
+        optionLabel: "label",
+        optionValue: "value",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
+        class: "p-paginator-rpp-options",
+        disabled: $props.disabled
+      }, null, 8, ["modelValue", "options", "disabled"]))
+    }
+
+    script$1.render = render$1;
+
+    var script = {
+        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
             },
-            directives: {
-                'ripple': Ripple__default["default"]
+            template: {
+                type: [Object, String],
+                default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
+            },
+            currentPageReportTemplate: {
+                type: null,
+                default: '({currentPage} of {totalPages})'
+            },
+            alwaysShow: {
+                type: Boolean,
+                default: true
             }
-        };
-
-        const _hoisted_1$2 = { class: "p-paginator-pages" };
-        const _hoisted_2$2 = ["onClick"];
-
-        function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-          const _directive_ripple = vue.resolveDirective("ripple");
+        },
+        data() {
+            return {
+                d_first: this.first,
+                d_rows: this.rows
+            };
+        },
+        watch: {
+            first(newValue) {
+                this.d_first = newValue;
+            },
+            rows(newValue) {
+                this.d_rows = newValue;
+            },
+            totalRecords(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;
+
+                if (p >= 0 && p < pc) {
+                    this.d_first = this.d_rows * p;
+                    const state = {
+                        page: p,
+                        first: this.d_first,
+                        rows: this.d_rows,
+                        pageCount: pc
+                    };
 
-          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)}]),
-                type: "button",
-                onClick: $event => ($options.onPageLinkClick($event, pageLink))
-              }, [
-                vue.createTextVNode(vue.toDisplayString(pageLink), 1)
-              ], 10, _hoisted_2$2)), [
-                [_directive_ripple]
-              ])
-            }), 128))
-          ]))
-        }
+                    this.$emit('update:first', this.d_first);
+                    this.$emit('update:rows', this.d_rows);
+                    this.$emit('page', state);
+                }
+            },
 
-        script$5.render = render$5;
+            changePageToFirst(event) {
+                if (!this.isFirstPage) {
+                    this.changePage(0);
+                }
 
-        var script$4 = {
-            name: 'PrevPageLink',
-            computed: {
-                containerClass() {
-                    return ['p-paginator-prev p-paginator-element p-link', {
-                        'p-disabled': this.$attrs.disabled
-                    }];
+                event.preventDefault();
+            },
+            changePageToPrev(event) {
+                this.changePage(this.page - 1);
+                event.preventDefault();
+            },
+            changePageLink(event) {
+                this.changePage(event.value - 1);
+                event.originalEvent.preventDefault();
+            },
+            changePageToNext(event) {
+                this.changePage(this.page + 1);
+                event.preventDefault();
+            },
+            changePageToLast(event) {
+                if (!this.isLastPage) {
+                    this.changePage(this.pageCount - 1);
                 }
+
+                event.preventDefault();
             },
-            directives: {
-                'ripple': Ripple__default["default"]
-            }
-        };
+            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);
 
-        const _hoisted_1$1 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-paginator-icon pi pi-angle-left" }, null, -1);
-        const _hoisted_2$1 = [
-          _hoisted_1$1
-        ];
+                    let innerHTML = '';
 
-        function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-          const _directive_ripple = vue.resolveDirective("ripple");
+                    const keys = Object.keys(this.template);
+                    const sortedBreakpoints = {};
 
-          return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-            class: vue.normalizeClass($options.containerClass),
-            type: "button"
-          }, _hoisted_2$1, 2)), [
-            [_directive_ripple]
-          ])
-        }
+                    keys.sort((a, b) => parseInt(a) - parseInt(b)).forEach((key) => {
+                        sortedBreakpoints[key] = this.template[key];
+                    });
 
-        script$4.render = render$4;
+                    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;
+                            }
+                        }
+                    `;
+                        }
+                    }
 
-        var script$3 = {
-            name: 'RowsPerPageDropdown',
-            inheritAttrs: false,
-            emits: ['rows-change'],
-            props: {
-                options: Array,
-                rows: Number,
-                disabled: Boolean
-            },
-            methods: {
-                onChange(value) {
-                    this.$emit('rows-change', value);
+                    this.styleElement.innerHTML = innerHTML;
                 }
             },
-            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]});
-                        }
+            hasBreakpoints() {
+                return typeof this.template === 'object';
+            },
+            getPaginatorClasses(key) {
+                return [
+                    {
+                        'p-paginator-default': !this.hasBreakpoints(),
+                        [`p-paginator-${key}`]: this.hasBreakpoints()
                     }
-                    return opts;
-                }
+                ];
             },
-            components: {
-                'RPPDropdown': Dropdown__default["default"]
+            setPaginatorAttribute() {
+                [...this.$refs.paginator].forEach((el) => {
+                    el.setAttribute(this.attributeSelector, '');
+                });
             }
-        };
-
-        function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-          const _component_RPPDropdown = vue.resolveComponent("RPPDropdown");
-
-          return (vue.openBlock(), vue.createBlock(_component_RPPDropdown, {
-            modelValue: $props.rows,
-            options: $options.rowsOptions,
-            optionLabel: "label",
-            optionValue: "value",
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
-            class: "p-paginator-rpp-options",
-            disabled: $props.disabled
-          }, null, 8, ["modelValue", "options", "disabled"]))
-        }
+        },
+        computed: {
+            templateItems() {
+                let keys = {};
 
-        script$3.render = render$3;
+                if (this.hasBreakpoints()) {
+                    keys = this.template;
 
-        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});
+                    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 opts;
+
+                    return keys;
                 }
-            },
-            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;
+                keys['default'] = this.template.split(' ').map((value) => {
+                    return value.trim();
+                });
 
-        var script$1 = {
-            name: 'JumpToPageInput',
-            inheritAttrs: false,
-            emits: ['page-change'],
-            props: {
-                page: Number,
-                pageCount: Number,
-                disabled: Boolean
+                return keys;
             },
-            methods: {
-                onChange(value) {
-                    this.$emit('page-change', value - 1);
-                }
+            page() {
+                return Math.floor(this.d_first / this.d_rows);
             },
-            components: {
-                'JTPInput': InputNumber__default["default"]
-            }
-        };
+            pageCount() {
+                return Math.ceil(this.totalRecords / this.d_rows);
+            },
+            isFirstPage() {
+                return this.page === 0;
+            },
+            isLastPage() {
+                return this.page === this.pageCount - 1;
+            },
+            calculatePageLinkBoundaries() {
+                const numberOfPages = this.pageCount;
+                const visiblePages = Math.min(this.pageLinkSize, numberOfPages);
 
-        function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-          const _component_JTPInput = vue.resolveComponent("JTPInput");
+                //calculate range, keep current in middle if necessary
+                let start = Math.max(0, Math.ceil(this.page - visiblePages / 2));
+                let end = Math.min(numberOfPages - 1, start + visiblePages - 1);
 
-          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"]))
-        }
+                //check when approaching to last page
+                const delta = this.pageLinkSize - (end - start + 1);
 
-        script$1.render = render$1;
-
-        var script = {
-            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: String,
-                    default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
-                },
-                currentPageReportTemplate: {
-                    type: null,
-                    default: '({currentPage} of {totalPages})'
-                },
-                alwaysShow: {
-                    type: Boolean,
-                    default: true
-                }
+                start = Math.max(0, start - delta);
+
+                return [start, end];
             },
-            data() {
-                return {
-                    d_first: this.first,
-                    d_rows: this.rows
+            pageLinks() {
+                let pageLinks = [];
+                let boundaries = this.calculatePageLinkBoundaries;
+                let start = boundaries[0];
+                let end = boundaries[1];
+
+                for (var i = start; i <= end; i++) {
+                    pageLinks.push(i + 1);
                 }
+
+                return pageLinks;
             },
-            watch: {
-                first(newValue) {
-                    this.d_first = newValue;
-                },
-                rows(newValue) {
-                    this.d_rows = newValue;
-                },
-                totalRecords(newValue) {
-                    if (this.page > 0 && newValue && (this.d_first >= newValue)) {
-                        this.changePage(this.pageCount - 1);
-                    }
-                }
+            currentState() {
+                return {
+                    page: this.page,
+                    first: this.d_first,
+                    rows: this.d_rows
+                };
             },
-            methods: {
-                changePage(p) {
-                    const pc = this.pageCount;
-
-                    if (p >= 0 && p < pc) {
-                        this.d_first = this.d_rows * p;
-                        const state = {
-                            page: p,
-                            first: this.d_first,
-                            rows: this.d_rows,
-                            pageCount: pc
-                        };
-
-        				this.$emit('update:first', this.d_first);
-                        this.$emit('update:rows', this.d_rows);
-                        this.$emit('page', state);
-                    }
-                },
-                changePageToFirst(event) {
-                    if(!this.isFirstPage) {
-                        this.changePage(0);
-                    }
-
-                    event.preventDefault();
-                },
-                changePageToPrev(event) {
-                    this.changePage(this.page - 1);
-                    event.preventDefault();
-                },
-                changePageLink(event) {
-                    this.changePage(event.value - 1);
-                    event.originalEvent.preventDefault();
-                },
-                changePageToNext(event) {
-                    this.changePage(this.page  + 1);
-                    event.preventDefault();
-                },
-                changePageToLast(event) {
-                    if(!this.isLastPage) {
-                        this.changePage(this.pageCount - 1);
-                    }
-
-                    event.preventDefault();
-                },
-                onRowChange(value) {
-                    this.d_rows = value;
-                    this.changePage(this.page);
-                }
+            empty() {
+                return this.pageCount === 0;
             },
-            computed: {
-                templateItems() {
-                    let keys = [];
-                    this.template.split(' ').map((value) => {
-                        keys.push(value.trim());
-                    });
-                    return keys;
-                },
-                page() {
-                    return Math.floor(this.d_first / this.d_rows);
-                },
-                pageCount() {
-                    return Math.ceil(this.totalRecords / this.d_rows);
-                },
-                isFirstPage() {
-                    return this.page === 0;
-                },
-                isLastPage() {
-                    return this.page === this.pageCount - 1;
-                },
-                calculatePageLinkBoundaries() {
-                    const numberOfPages = this.pageCount;
-                    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 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];
-                },
-                pageLinks() {
-                    let pageLinks = [];
-                    let boundaries = this.calculatePageLinkBoundaries;
-                    let start = boundaries[0];
-                    let end = boundaries[1];
-
-                    for(var i = start; i <= end; i++) {
-                        pageLinks.push(i + 1);
-                    }
-
-                    return pageLinks;
-                },
-                currentState() {
-                    return {
-                        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;
-                }
+            currentPage() {
+                return this.pageCount > 0 ? this.page + 1 : 0;
             },
-            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
+            attributeSelector() {
+                return utils.UniqueComponentId();
             }
-        };
-
-        const _hoisted_1 = {
-          key: 0,
-          class: "p-paginator p-component"
-        };
-        const _hoisted_2 = {
-          key: 0,
-          class: "p-paginator-left-content"
-        };
-        const _hoisted_3 = {
-          key: 1,
-          class: "p-paginator-right-content"
-        };
-
-        function render(_ctx, _cache, $props, $setup, $data, $options) {
-          const _component_FirstPageLink = vue.resolveComponent("FirstPageLink");
-          const _component_PrevPageLink = vue.resolveComponent("PrevPageLink");
-          const _component_NextPageLink = vue.resolveComponent("NextPageLink");
-          const _component_LastPageLink = vue.resolveComponent("LastPageLink");
-          const _component_PageLinks = vue.resolveComponent("PageLinks");
-          const _component_CurrentPageReport = vue.resolveComponent("CurrentPageReport");
-          const _component_RowsPerPageDropdown = vue.resolveComponent("RowsPerPageDropdown");
-          const _component_JumpToPageDropdown = vue.resolveComponent("JumpToPageDropdown");
-          const _component_JumpToPageInput = vue.resolveComponent("JumpToPageInput");
-
-          return ($props.alwaysShow ? true : ($options.pageLinks && $options.pageLinks.length > 1))
-            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        },
+        components: {
+            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 };
+    const _hoisted_2 = {
+      key: 0,
+      class: "p-paginator-left-content"
+    };
+    const _hoisted_3 = {
+      key: 1,
+      class: "p-paginator-right-content"
+    };
+
+    function render(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_FirstPageLink = vue.resolveComponent("FirstPageLink");
+      const _component_PrevPageLink = vue.resolveComponent("PrevPageLink");
+      const _component_NextPageLink = vue.resolveComponent("NextPageLink");
+      const _component_LastPageLink = vue.resolveComponent("LastPageLink");
+      const _component_PageLinks = vue.resolveComponent("PageLinks");
+      const _component_CurrentPageReport = vue.resolveComponent("CurrentPageReport");
+      const _component_RowsPerPageDropdown = vue.resolveComponent("RowsPerPageDropdown");
+      const _component_JumpToPageDropdown = vue.resolveComponent("JumpToPageDropdown");
+      const _component_JumpToPageInput = vue.resolveComponent("JumpToPageInput");
+
+      return ($props.alwaysShow ? true : $options.pageLinks && $options.pageLinks.length > 1)
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+            (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($options.templateItems, (item) => {
+                (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, {
@@ -643,42 +754,44 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                       vue.renderSlot(_ctx.$slots, "end", { state: $options.currentState })
                     ]))
                   : vue.createCommentVNode("", true)
-              ]))
-            : vue.createCommentVNode("", true)
-        }
+              ], 2))
+            }), 128))
+          ]))
+        : vue.createCommentVNode("", true)
+    }
 
-        function styleInject(css, ref) {
-          if ( ref === void 0 ) ref = {};
-          var insertAt = ref.insertAt;
+    function styleInject(css, ref) {
+      if ( ref === void 0 ) ref = {};
+      var insertAt = ref.insertAt;
 
-          if (!css || typeof document === 'undefined') { return; }
+      if (!css || typeof document === 'undefined') { return; }
 
-          var head = document.head || document.getElementsByTagName('head')[0];
-          var style = document.createElement('style');
-          style.type = 'text/css';
+      var head = document.head || document.getElementsByTagName('head')[0];
+      var style = document.createElement('style');
+      style.type = 'text/css';
 
-          if (insertAt === 'top') {
-            if (head.firstChild) {
-              head.insertBefore(style, head.firstChild);
-            } else {
-              head.appendChild(style);
-            }
-          } else {
-            head.appendChild(style);
-          }
-
-          if (style.styleSheet) {
-            style.styleSheet.cssText = css;
-          } else {
-            style.appendChild(document.createTextNode(css));
-          }
+      if (insertAt === 'top') {
+        if (head.firstChild) {
+          head.insertBefore(style, head.firstChild);
+        } else {
+          head.appendChild(style);
         }
+      } else {
+        head.appendChild(style);
+      }
+
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(document.createTextNode(css));
+      }
+    }
 
-        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";
-        styleInject(css_248z);
+    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;
+    script.render = render;
 
-        return script;
+    return script;
 
-})(Vue, primevue.ripple, primevue.dropdown, primevue.inputnumber);
+})(primevue.utils, Vue, primevue.ripple, primevue.dropdown, primevue.inputnumber);