primevue/paginator/index.mjs.map

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

{"version":3,"file":"index.mjs","sources":["../../src/paginator/BasePaginator.vue","../../src/paginator/CurrentPageReport.vue","../../src/paginator/CurrentPageReport.vue?vue&type=template&id=14d060d8&lang.js","../../src/paginator/FirstPageLink.vue","../../src/paginator/FirstPageLink.vue?vue&type=template&id=63055d92&lang.js","../../src/paginator/JumpToPageDropdown.vue","../../src/paginator/JumpToPageDropdown.vue?vue&type=template&id=433e514a&lang.js","../../src/paginator/JumpToPageInput.vue","../../src/paginator/JumpToPageInput.vue?vue&type=template&id=1d967b02&lang.js","../../src/paginator/LastPageLink.vue","../../src/paginator/LastPageLink.vue?vue&type=template&id=58ee5aa1&lang.js","../../src/paginator/NextPageLink.vue","../../src/paginator/NextPageLink.vue?vue&type=template&id=4788b7e8&lang.js","../../src/paginator/PageLinks.vue","../../src/paginator/PageLinks.vue?vue&type=template&id=38b12249&lang.js","../../src/paginator/PrevPageLink.vue","../../src/paginator/PrevPageLink.vue?vue&type=template&id=e10e43e2&lang.js","../../src/paginator/RowsPerPageDropdown.vue","../../src/paginator/RowsPerPageDropdown.vue?vue&type=template&id=189d9ace&lang.js","../../src/paginator/Paginator.vue","../../src/paginator/Paginator.vue?vue&type=template&id=3a1c0f64&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport PaginatorStyle from 'primevue/paginator/style';\n\nexport default {\n    name: 'BasePaginator',\n    extends: BaseComponent,\n    props: {\n        totalRecords: {\n            type: Number,\n            default: 0\n        },\n        rows: {\n            type: Number,\n            default: 0\n        },\n        first: {\n            type: Number,\n            default: 0\n        },\n        pageLinkSize: {\n            type: Number,\n            default: 5\n        },\n        rowsPerPageOptions: {\n            type: Array,\n            default: null\n        },\n        template: {\n            type: [Object, String],\n            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'\n        },\n        currentPageReportTemplate: {\n            type: null,\n            default: '({currentPage} of {totalPages})'\n        },\n        alwaysShow: {\n            type: Boolean,\n            default: true\n        }\n    },\n    style: PaginatorStyle,\n    provide() {\n        return {\n            $pcPaginator: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <span :class=\"cx('current')\" v-bind=\"ptm('current')\">{{ text }}</span>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\n\nexport default {\n    name: 'CurrentPageReport',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    props: {\n        pageCount: {\n            type: Number,\n            default: 0\n        },\n        currentPage: {\n            type: Number,\n            default: 0\n        },\n        page: {\n            type: Number,\n            default: 0\n        },\n        first: {\n            type: Number,\n            default: 0\n        },\n        rows: {\n            type: Number,\n            default: 0\n        },\n        totalRecords: {\n            type: Number,\n            default: 0\n        },\n        template: {\n            type: String,\n            default: '({currentPage} of {totalPages})'\n        }\n    },\n    computed: {\n        text() {\n            let text = this.template\n                .replace('{currentPage}', this.currentPage)\n                .replace('{totalPages}', this.pageCount)\n                .replace('{first}', this.pageCount > 0 ? this.first + 1 : 0)\n                .replace('{last}', Math.min(this.first + this.rows, this.totalRecords))\n                .replace('{rows}', this.rows)\n                .replace('{totalRecords}', this.totalRecords);\n\n            return text;\n        }\n    }\n};\n</script>\n","<template>\n    <span :class=\"cx('current')\" v-bind=\"ptm('current')\">{{ text }}</span>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\n\nexport default {\n    name: 'CurrentPageReport',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    props: {\n        pageCount: {\n            type: Number,\n            default: 0\n        },\n        currentPage: {\n            type: Number,\n            default: 0\n        },\n        page: {\n            type: Number,\n            default: 0\n        },\n        first: {\n            type: Number,\n            default: 0\n        },\n        rows: {\n            type: Number,\n            default: 0\n        },\n        totalRecords: {\n            type: Number,\n            default: 0\n        },\n        template: {\n            type: String,\n            default: '({currentPage} of {totalPages})'\n        }\n    },\n    computed: {\n        text() {\n            let text = this.template\n                .replace('{currentPage}', this.currentPage)\n                .replace('{totalPages}', this.pageCount)\n                .replace('{first}', this.pageCount > 0 ? this.first + 1 : 0)\n                .replace('{last}', Math.min(this.first + this.rows, this.totalRecords))\n                .replace('{rows}', this.rows)\n                .replace('{totalRecords}', this.totalRecords);\n\n            return text;\n        }\n    }\n};\n</script>\n","<template>\n    <button v-ripple :class=\"cx('first')\" type=\"button\" v-bind=\"getPTOptions('first')\" data-pc-group-section=\"pagebutton\">\n        <component :is=\"template || 'AngleDoubleLeftIcon'\" :class=\"cx('firstIcon')\" v-bind=\"getPTOptions('firstIcon')\" />\n    </button>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleDoubleLeftIcon from '@primevue/icons/angledoubleleft';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'FirstPageLink',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    props: {\n        template: {\n            type: Function,\n            default: null\n        }\n    },\n    methods: {\n        getPTOptions(key) {\n            return this.ptm(key, {\n                context: {\n                    disabled: this.$attrs.disabled\n                }\n            });\n        }\n    },\n    components: {\n        AngleDoubleLeftIcon: AngleDoubleLeftIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <button v-ripple :class=\"cx('first')\" type=\"button\" v-bind=\"getPTOptions('first')\" data-pc-group-section=\"pagebutton\">\n        <component :is=\"template || 'AngleDoubleLeftIcon'\" :class=\"cx('firstIcon')\" v-bind=\"getPTOptions('firstIcon')\" />\n    </button>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleDoubleLeftIcon from '@primevue/icons/angledoubleleft';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'FirstPageLink',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    props: {\n        template: {\n            type: Function,\n            default: null\n        }\n    },\n    methods: {\n        getPTOptions(key) {\n            return this.ptm(key, {\n                context: {\n                    disabled: this.$attrs.disabled\n                }\n            });\n        }\n    },\n    components: {\n        AngleDoubleLeftIcon: AngleDoubleLeftIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <JTPSelect\n        :modelValue=\"page\"\n        :options=\"pageOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        @update:modelValue=\"onChange($event)\"\n        :class=\"cx('pcJumpToPageDropdown')\"\n        :disabled=\"disabled\"\n        :unstyled=\"unstyled\"\n        :pt=\"ptm('pcJumpToPageDropdown')\"\n        data-pc-group-section=\"pagedropdown\"\n    >\n        <template v-if=\"templates['jumptopagedropdownicon']\" #dropdownicon=\"slotProps\">\n            <component :is=\"templates['jumptopagedropdownicon']\" :class=\"slotProps.class\" />\n        </template>\n    </JTPSelect>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport Select from 'primevue/select';\n\nexport default {\n    name: 'JumpToPageDropdown',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    emits: ['page-change'],\n    props: {\n        page: Number,\n        pageCount: Number,\n        disabled: Boolean,\n        templates: null\n    },\n    methods: {\n        onChange(value) {\n            this.$emit('page-change', value);\n        }\n    },\n    computed: {\n        pageOptions() {\n            let opts = [];\n\n            for (let i = 0; i < this.pageCount; i++) {\n                opts.push({ label: String(i + 1), value: i });\n            }\n\n            return opts;\n        }\n    },\n    components: {\n        JTPSelect: Select\n    }\n};\n</script>\n","<template>\n    <JTPSelect\n        :modelValue=\"page\"\n        :options=\"pageOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        @update:modelValue=\"onChange($event)\"\n        :class=\"cx('pcJumpToPageDropdown')\"\n        :disabled=\"disabled\"\n        :unstyled=\"unstyled\"\n        :pt=\"ptm('pcJumpToPageDropdown')\"\n        data-pc-group-section=\"pagedropdown\"\n    >\n        <template v-if=\"templates['jumptopagedropdownicon']\" #dropdownicon=\"slotProps\">\n            <component :is=\"templates['jumptopagedropdownicon']\" :class=\"slotProps.class\" />\n        </template>\n    </JTPSelect>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport Select from 'primevue/select';\n\nexport default {\n    name: 'JumpToPageDropdown',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    emits: ['page-change'],\n    props: {\n        page: Number,\n        pageCount: Number,\n        disabled: Boolean,\n        templates: null\n    },\n    methods: {\n        onChange(value) {\n            this.$emit('page-change', value);\n        }\n    },\n    computed: {\n        pageOptions() {\n            let opts = [];\n\n            for (let i = 0; i < this.pageCount; i++) {\n                opts.push({ label: String(i + 1), value: i });\n            }\n\n            return opts;\n        }\n    },\n    components: {\n        JTPSelect: Select\n    }\n};\n</script>\n","<template>\n    <JTPInput ref=\"jtpInput\" :modelValue=\"d_page\" :class=\"cx('pcJumpToPageInputText')\" :aria-label=\"inputArialabel\" :disabled=\"disabled\" @update:modelValue=\"onChange\" :unstyled=\"unstyled\" :pt=\"ptm('pcJumpToPageInputText')\"></JTPInput>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport InputNumber from 'primevue/inputnumber';\n\nexport default {\n    name: 'JumpToPageInput',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    inheritAttrs: false,\n    emits: ['page-change'],\n    props: {\n        page: Number,\n        pageCount: Number,\n        disabled: Boolean\n    },\n    data() {\n        return {\n            d_page: this.page\n        };\n    },\n    watch: {\n        page(newValue) {\n            this.d_page = newValue;\n        }\n    },\n    methods: {\n        onChange(value) {\n            if (value !== this.page) {\n                this.d_page = value;\n                this.$emit('page-change', value - 1);\n            }\n        }\n    },\n    computed: {\n        inputArialabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.jumpToPageInputLabel : undefined;\n        }\n    },\n    components: {\n        JTPInput: InputNumber\n    }\n};\n</script>\n","<template>\n    <JTPInput ref=\"jtpInput\" :modelValue=\"d_page\" :class=\"cx('pcJumpToPageInputText')\" :aria-label=\"inputArialabel\" :disabled=\"disabled\" @update:modelValue=\"onChange\" :unstyled=\"unstyled\" :pt=\"ptm('pcJumpToPageInputText')\"></JTPInput>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport InputNumber from 'primevue/inputnumber';\n\nexport default {\n    name: 'JumpToPageInput',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    inheritAttrs: false,\n    emits: ['page-change'],\n    props: {\n        page: Number,\n        pageCount: Number,\n        disabled: Boolean\n    },\n    data() {\n        return {\n            d_page: this.page\n        };\n    },\n    watch: {\n        page(newValue) {\n            this.d_page = newValue;\n        }\n    },\n    methods: {\n        onChange(value) {\n            if (value !== this.page) {\n                this.d_page = value;\n                this.$emit('page-change', value - 1);\n            }\n        }\n    },\n    computed: {\n        inputArialabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.jumpToPageInputLabel : undefined;\n        }\n    },\n    components: {\n        JTPInput: InputNumber\n    }\n};\n</script>\n","<template>\n    <button v-ripple :class=\"cx('last')\" type=\"button\" v-bind=\"getPTOptions('last')\" data-pc-group-section=\"pagebutton\">\n        <component :is=\"template || 'AngleDoubleRightIcon'\" :class=\"cx('lastIcon')\" v-bind=\"getPTOptions('lastIcon')\" />\n    </button>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleDoubleRightIcon from '@primevue/icons/angledoubleright';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'LastPageLink',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    props: {\n        template: {\n            type: Function,\n            default: null\n        }\n    },\n    methods: {\n        getPTOptions(key) {\n            return this.ptm(key, {\n                context: {\n                    disabled: this.$attrs.disabled\n                }\n            });\n        }\n    },\n    components: {\n        AngleDoubleRightIcon: AngleDoubleRightIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <button v-ripple :class=\"cx('last')\" type=\"button\" v-bind=\"getPTOptions('last')\" data-pc-group-section=\"pagebutton\">\n        <component :is=\"template || 'AngleDoubleRightIcon'\" :class=\"cx('lastIcon')\" v-bind=\"getPTOptions('lastIcon')\" />\n    </button>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleDoubleRightIcon from '@primevue/icons/angledoubleright';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'LastPageLink',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    props: {\n        template: {\n            type: Function,\n            default: null\n        }\n    },\n    methods: {\n        getPTOptions(key) {\n            return this.ptm(key, {\n                context: {\n                    disabled: this.$attrs.disabled\n                }\n            });\n        }\n    },\n    components: {\n        AngleDoubleRightIcon: AngleDoubleRightIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <button v-ripple :class=\"cx('next')\" type=\"button\" v-bind=\"getPTOptions('next')\" data-pc-group-section=\"pagebutton\">\n        <component :is=\"template || 'AngleRightIcon'\" :class=\"cx('nextIcon')\" v-bind=\"getPTOptions('nextIcon')\" />\n    </button>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleRightIcon from '@primevue/icons/angleright';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'NextPageLink',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    props: {\n        template: {\n            type: Function,\n            default: null\n        }\n    },\n    methods: {\n        getPTOptions(key) {\n            return this.ptm(key, {\n                context: {\n                    disabled: this.$attrs.disabled\n                }\n            });\n        }\n    },\n    components: {\n        AngleRightIcon: AngleRightIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <button v-ripple :class=\"cx('next')\" type=\"button\" v-bind=\"getPTOptions('next')\" data-pc-group-section=\"pagebutton\">\n        <component :is=\"template || 'AngleRightIcon'\" :class=\"cx('nextIcon')\" v-bind=\"getPTOptions('nextIcon')\" />\n    </button>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleRightIcon from '@primevue/icons/angleright';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'NextPageLink',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    props: {\n        template: {\n            type: Function,\n            default: null\n        }\n    },\n    methods: {\n        getPTOptions(key) {\n            return this.ptm(key, {\n                context: {\n                    disabled: this.$attrs.disabled\n                }\n            });\n        }\n    },\n    components: {\n        AngleRightIcon: AngleRightIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <span :class=\"cx('pages')\" v-bind=\"ptm('pages')\">\n        <button\n            v-for=\"pageLink of value\"\n            :key=\"pageLink\"\n            v-ripple\n            :class=\"cx('page', { pageLink })\"\n            type=\"button\"\n            :aria-label=\"ariaPageLabel(pageLink)\"\n            :aria-current=\"pageLink - 1 === page ? 'page' : undefined\"\n            @click=\"onPageLinkClick($event, pageLink)\"\n            v-bind=\"getPTOptions(pageLink - 1, 'page')\"\n            :data-p-active=\"pageLink - 1 === page\"\n        >\n            {{ pageLink }}\n        </button>\n    </span>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'PageLinks',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    inheritAttrs: false,\n    emits: ['click'],\n    props: {\n        value: Array,\n        page: Number\n    },\n    methods: {\n        getPTOptions(pageLink, key) {\n            return this.ptm(key, {\n                context: {\n                    active: pageLink === this.page\n                }\n            });\n        },\n        onPageLinkClick(event, pageLink) {\n            this.$emit('click', {\n                originalEvent: event,\n                value: pageLink\n            });\n        },\n        ariaPageLabel(value) {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;\n        }\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <span :class=\"cx('pages')\" v-bind=\"ptm('pages')\">\n        <button\n            v-for=\"pageLink of value\"\n            :key=\"pageLink\"\n            v-ripple\n            :class=\"cx('page', { pageLink })\"\n            type=\"button\"\n            :aria-label=\"ariaPageLabel(pageLink)\"\n            :aria-current=\"pageLink - 1 === page ? 'page' : undefined\"\n            @click=\"onPageLinkClick($event, pageLink)\"\n            v-bind=\"getPTOptions(pageLink - 1, 'page')\"\n            :data-p-active=\"pageLink - 1 === page\"\n        >\n            {{ pageLink }}\n        </button>\n    </span>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'PageLinks',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    inheritAttrs: false,\n    emits: ['click'],\n    props: {\n        value: Array,\n        page: Number\n    },\n    methods: {\n        getPTOptions(pageLink, key) {\n            return this.ptm(key, {\n                context: {\n                    active: pageLink === this.page\n                }\n            });\n        },\n        onPageLinkClick(event, pageLink) {\n            this.$emit('click', {\n                originalEvent: event,\n                value: pageLink\n            });\n        },\n        ariaPageLabel(value) {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;\n        }\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <button v-ripple :class=\"cx('prev')\" type=\"button\" v-bind=\"getPTOptions('prev')\" data-pc-group-section=\"pagebutton\">\n        <component :is=\"template || 'AngleLeftIcon'\" :class=\"cx('prevIcon')\" v-bind=\"getPTOptions('prevIcon')\" />\n    </button>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleLeftIcon from '@primevue/icons/angleleft';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'PrevPageLink',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    props: {\n        template: {\n            type: Function,\n            default: null\n        }\n    },\n    methods: {\n        getPTOptions(key) {\n            return this.ptm(key, {\n                context: {\n                    disabled: this.$attrs.disabled\n                }\n            });\n        }\n    },\n    components: {\n        AngleLeftIcon: AngleLeftIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <button v-ripple :class=\"cx('prev')\" type=\"button\" v-bind=\"getPTOptions('prev')\" data-pc-group-section=\"pagebutton\">\n        <component :is=\"template || 'AngleLeftIcon'\" :class=\"cx('prevIcon')\" v-bind=\"getPTOptions('prevIcon')\" />\n    </button>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleLeftIcon from '@primevue/icons/angleleft';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'PrevPageLink',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    props: {\n        template: {\n            type: Function,\n            default: null\n        }\n    },\n    methods: {\n        getPTOptions(key) {\n            return this.ptm(key, {\n                context: {\n                    disabled: this.$attrs.disabled\n                }\n            });\n        }\n    },\n    components: {\n        AngleLeftIcon: AngleLeftIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <RPPSelect\n        :modelValue=\"rows\"\n        :options=\"rowsOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        @update:modelValue=\"onChange($event)\"\n        :class=\"cx('pcRowPerPageDropdown')\"\n        :disabled=\"disabled\"\n        :unstyled=\"unstyled\"\n        :pt=\"ptm('pcRowPerPageDropdown')\"\n        data-pc-group-section=\"pagedropdown\"\n    >\n        <template v-if=\"templates['rowsperpagedropdownicon']\" #dropdownicon=\"slotProps\">\n            <component :is=\"templates['rowsperpagedropdownicon']\" :class=\"slotProps.class\" />\n        </template>\n    </RPPSelect>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport Select from 'primevue/select';\n\nexport default {\n    name: 'RowsPerPageDropdown',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    emits: ['rows-change'],\n    props: {\n        options: Array,\n        rows: Number,\n        disabled: Boolean,\n        templates: null\n    },\n    methods: {\n        onChange(value) {\n            this.$emit('rows-change', value);\n        }\n    },\n    computed: {\n        rowsOptions() {\n            let opts = [];\n\n            if (this.options) {\n                for (let i = 0; i < this.options.length; i++) {\n                    opts.push({ label: String(this.options[i]), value: this.options[i] });\n                }\n            }\n\n            return opts;\n        }\n    },\n    components: {\n        RPPSelect: Select\n    }\n};\n</script>\n","<template>\n    <RPPSelect\n        :modelValue=\"rows\"\n        :options=\"rowsOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        @update:modelValue=\"onChange($event)\"\n        :class=\"cx('pcRowPerPageDropdown')\"\n        :disabled=\"disabled\"\n        :unstyled=\"unstyled\"\n        :pt=\"ptm('pcRowPerPageDropdown')\"\n        data-pc-group-section=\"pagedropdown\"\n    >\n        <template v-if=\"templates['rowsperpagedropdownicon']\" #dropdownicon=\"slotProps\">\n            <component :is=\"templates['rowsperpagedropdownicon']\" :class=\"slotProps.class\" />\n        </template>\n    </RPPSelect>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport Select from 'primevue/select';\n\nexport default {\n    name: 'RowsPerPageDropdown',\n    hostName: 'Paginator',\n    extends: BaseComponent,\n    emits: ['rows-change'],\n    props: {\n        options: Array,\n        rows: Number,\n        disabled: Boolean,\n        templates: null\n    },\n    methods: {\n        onChange(value) {\n            this.$emit('rows-change', value);\n        }\n    },\n    computed: {\n        rowsOptions() {\n            let opts = [];\n\n            if (this.options) {\n                for (let i = 0; i < this.options.length; i++) {\n                    opts.push({ label: String(this.options[i]), value: this.options[i] });\n                }\n            }\n\n            return opts;\n        }\n    },\n    components: {\n        RPPSelect: Select\n    }\n};\n</script>\n","<template>\n    <nav v-if=\"alwaysShow ? true : pageLinks && pageLinks.length > 1\" v-bind=\"ptmi('paginatorContainer')\">\n        <div v-for=\"(value, key) in templateItems\" :key=\"key\" ref=\"paginator\" :class=\"cx('paginator', { key })\" v-bind=\"ptm('root')\">\n            <slot\n                v-if=\"$slots.container\"\n                name=\"container\"\n                :first=\"d_first + 1\"\n                :last=\"last\"\n                :rows=\"d_rows\"\n                :page=\"page\"\n                :pageCount=\"pageCount\"\n                :pageLinks=\"pageLinks\"\n                :totalRecords=\"totalRecords\"\n                :firstPageCallback=\"changePageToFirst\"\n                :lastPageCallback=\"changePageToLast\"\n                :prevPageCallback=\"changePageToPrev\"\n                :nextPageCallback=\"changePageToNext\"\n                :rowChangeCallback=\"onRowChange\"\n                :changePageCallback=\"changePage\"\n            />\n            <template v-else>\n                <div v-if=\"$slots.start\" :class=\"cx('contentStart')\" v-bind=\"ptm('contentStart')\">\n                    <slot name=\"start\" :state=\"currentState\"></slot>\n                </div>\n                <div :class=\"cx('content')\" v-bind=\"ptm('content')\">\n                    <template v-for=\"item in value\" :key=\"item\">\n                        <FirstPageLink\n                            v-if=\"item === 'FirstPageLink'\"\n                            :aria-label=\"getAriaLabel('firstPageLabel')\"\n                            :template=\"$slots.firsticon || $slots.firstpagelinkicon\"\n                            @click=\"changePageToFirst($event)\"\n                            :disabled=\"isFirstPage || empty\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <PrevPageLink\n                            v-else-if=\"item === 'PrevPageLink'\"\n                            :aria-label=\"getAriaLabel('prevPageLabel')\"\n                            :template=\"$slots.previcon || $slots.prevpagelinkicon\"\n                            @click=\"changePageToPrev($event)\"\n                            :disabled=\"isFirstPage || empty\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <NextPageLink\n                            v-else-if=\"item === 'NextPageLink'\"\n                            :aria-label=\"getAriaLabel('nextPageLabel')\"\n                            :template=\"$slots.nexticon || $slots.nextpagelinkicon\"\n                            @click=\"changePageToNext($event)\"\n                            :disabled=\"isLastPage || empty\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <LastPageLink\n                            v-else-if=\"item === 'LastPageLink'\"\n                            :aria-label=\"getAriaLabel('lastPageLabel')\"\n                            :template=\"$slots.lasticon || $slots.lastpagelinkicon\"\n                            @click=\"changePageToLast($event)\"\n                            :disabled=\"isLastPage || empty\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <PageLinks v-else-if=\"item === 'PageLinks'\" :aria-label=\"getAriaLabel('pageLabel')\" :value=\"pageLinks\" :page=\"page\" @click=\"changePageLink($event)\" :unstyled=\"unstyled\" :pt=\"pt\" />\n                        <CurrentPageReport\n                            v-else-if=\"item === 'CurrentPageReport'\"\n                            aria-live=\"polite\"\n                            :template=\"currentPageReportTemplate\"\n                            :currentPage=\"currentPage\"\n                            :page=\"page\"\n                            :pageCount=\"pageCount\"\n                            :first=\"d_first\"\n                            :rows=\"d_rows\"\n                            :totalRecords=\"totalRecords\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <RowsPerPageDropdown\n                            v-else-if=\"item === 'RowsPerPageDropdown' && rowsPerPageOptions\"\n                            :aria-label=\"getAriaLabel('rowsPerPageLabel')\"\n                            :rows=\"d_rows\"\n                            :options=\"rowsPerPageOptions\"\n                            @rows-change=\"onRowChange($event)\"\n                            :disabled=\"empty\"\n                            :templates=\"$slots\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <JumpToPageDropdown\n                            v-else-if=\"item === 'JumpToPageDropdown'\"\n                            :aria-label=\"getAriaLabel('jumpToPageDropdownLabel')\"\n                            :page=\"page\"\n                            :pageCount=\"pageCount\"\n                            @page-change=\"changePage($event)\"\n                            :disabled=\"empty\"\n                            :templates=\"$slots\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <JumpToPageInput v-else-if=\"item === 'JumpToPageInput'\" :page=\"currentPage\" @page-change=\"changePage($event)\" :disabled=\"empty\" :unstyled=\"unstyled\" :pt=\"pt\" />\n                    </template>\n                </div>\n                <div v-if=\"$slots.end\" :class=\"cx('contentEnd')\" v-bind=\"ptm('contentEnd')\">\n                    <slot name=\"end\" :state=\"currentState\"></slot>\n                </div>\n            </template>\n        </div>\n    </nav>\n</template>\n\n<script>\nimport { setAttribute } from '@primeuix/utils/dom';\nimport BasePaginator from './BasePaginator.vue';\nimport CurrrentPageReport from './CurrentPageReport.vue';\nimport FirstPageLink from './FirstPageLink.vue';\nimport JumpToPageDropdown from './JumpToPageDropdown.vue';\nimport JumpToPageInput from './JumpToPageInput.vue';\nimport LastPageLink from './LastPageLink.vue';\nimport NextPageLink from './NextPageLink.vue';\nimport PageLinks from './PageLinks.vue';\nimport PrevPageLink from './PrevPageLink.vue';\nimport RowsPerPageDropdown from './RowsPerPageDropdown.vue';\n\nexport default {\n    name: 'Paginator',\n    extends: BasePaginator,\n    inheritAttrs: false,\n    emits: ['update:first', 'update:rows', 'page'],\n    data() {\n        return {\n            d_first: this.first,\n            d_rows: this.rows\n        };\n    },\n    watch: {\n        first(newValue) {\n            this.d_first = newValue;\n        },\n        rows(newValue) {\n            this.d_rows = newValue;\n        },\n        totalRecords(newValue) {\n            if (this.page > 0 && newValue && this.d_first >= newValue) {\n                this.changePage(this.pageCount - 1);\n            }\n        }\n    },\n    mounted() {\n        this.createStyle();\n    },\n    methods: {\n        changePage(p) {\n            const pc = this.pageCount;\n\n            if (p >= 0 && p < pc) {\n                this.d_first = this.d_rows * p;\n                const state = {\n                    page: p,\n                    first: this.d_first,\n                    rows: this.d_rows,\n                    pageCount: pc\n                };\n\n                this.$emit('update:first', this.d_first);\n                this.$emit('update:rows', this.d_rows);\n                this.$emit('page', state);\n            }\n        },\n\n        changePageToFirst(event) {\n            if (!this.isFirstPage) {\n                this.changePage(0);\n            }\n\n            event.preventDefault();\n        },\n        changePageToPrev(event) {\n            this.changePage(this.page - 1);\n            event.preventDefault();\n        },\n        changePageLink(event) {\n            this.changePage(event.value - 1);\n            event.originalEvent.preventDefault();\n        },\n        changePageToNext(event) {\n            this.changePage(this.page + 1);\n            event.preventDefault();\n        },\n        changePageToLast(event) {\n            if (!this.isLastPage) {\n                this.changePage(this.pageCount - 1);\n            }\n\n            event.preventDefault();\n        },\n        onRowChange(value) {\n            this.d_rows = value;\n            this.changePage(this.page);\n        },\n        createStyle() {\n            if (this.hasBreakpoints() && !this.isUnstyled) {\n                this.styleElement = document.createElement('style');\n                this.styleElement.type = 'text/css';\n                setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);\n                document.body.appendChild(this.styleElement);\n\n                let innerHTML = '';\n\n                const keys = Object.keys(this.template);\n                const sortedBreakpoints = {};\n\n                keys.sort((a, b) => parseInt(a) - parseInt(b)).forEach((key) => {\n                    sortedBreakpoints[key] = this.template[key];\n                });\n\n                for (const [index, [key]] of Object.entries(Object.entries(sortedBreakpoints))) {\n                    let minValue, calculatedMinValue;\n\n                    if (key !== 'default' && typeof Object.keys(sortedBreakpoints)[index - 1] === 'string') {\n                        calculatedMinValue = Number(Object.keys(sortedBreakpoints)[index - 1].slice(0, -2)) + 1 + 'px';\n                    } else {\n                        calculatedMinValue = Object.keys(sortedBreakpoints)[index - 1];\n                    }\n\n                    minValue = Object.entries(sortedBreakpoints)[index - 1] ? `and (min-width:${calculatedMinValue})` : '';\n\n                    if (key === 'default') {\n                        innerHTML += `\n                            @media screen ${minValue} {\n                                .p-paginator[${this.$attrSelector}],\n                                    display: flex;\n                                }\n                            }\n                        `;\n                    } else {\n                        innerHTML += `\n.p-paginator-${key} {\n    display: none;\n}\n@media screen ${minValue} and (max-width: ${key}) {\n    .p-paginator-${key} {\n        display: flex;\n    }\n\n    .p-paginator-default{\n        display: none;\n    }\n}\n                    `;\n                    }\n                }\n\n                this.styleElement.innerHTML = innerHTML;\n            }\n        },\n        hasBreakpoints() {\n            return typeof this.template === 'object';\n        },\n        getAriaLabel(labelType) {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria[labelType] : undefined;\n        }\n    },\n    computed: {\n        templateItems() {\n            let keys = {};\n\n            if (this.hasBreakpoints()) {\n                keys = this.template;\n\n                if (!keys.default) {\n                    keys.default = 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown';\n                }\n\n                for (const item in keys) {\n                    keys[item] = this.template[item].split(' ').map((value) => {\n                        return value.trim();\n                    });\n                }\n\n                return keys;\n            }\n\n            keys['default'] = this.template.split(' ').map((value) => {\n                return value.trim();\n            });\n\n            return keys;\n        },\n        page() {\n            return Math.floor(this.d_first / this.d_rows);\n        },\n        pageCount() {\n            return Math.ceil(this.totalRecords / this.d_rows);\n        },\n        isFirstPage() {\n            return this.page === 0;\n        },\n        isLastPage() {\n            return this.page === this.pageCount - 1;\n        },\n        calculatePageLinkBoundaries() {\n            const numberOfPages = this.pageCount;\n            const visiblePages = Math.min(this.pageLinkSize, numberOfPages);\n\n            //calculate range, keep current in middle if necessary\n            let start = Math.max(0, Math.ceil(this.page - visiblePages / 2));\n            let end = Math.min(numberOfPages - 1, start + visiblePages - 1);\n\n            //check when approaching to last page\n            const delta = this.pageLinkSize - (end - start + 1);\n\n            start = Math.max(0, start - delta);\n\n            return [start, end];\n        },\n        pageLinks() {\n            let pageLinks = [];\n            let boundaries = this.calculatePageLinkBoundaries;\n            let start = boundaries[0];\n            let end = boundaries[1];\n\n            for (var i = start; i <= end; i++) {\n                pageLinks.push(i + 1);\n            }\n\n            return pageLinks;\n        },\n        currentState() {\n            return {\n                page: this.page,\n                first: this.d_first,\n                rows: this.d_rows\n            };\n        },\n        empty() {\n            return this.pageCount === 0;\n        },\n        currentPage() {\n            return this.pageCount > 0 ? this.page + 1 : 0;\n        },\n        last() {\n            return Math.min(this.d_first + this.rows, this.totalRecords);\n        }\n    },\n    components: {\n        CurrentPageReport: CurrrentPageReport,\n        FirstPageLink: FirstPageLink,\n        LastPageLink: LastPageLink,\n        NextPageLink: NextPageLink,\n        PageLinks: PageLinks,\n        PrevPageLink: PrevPageLink,\n        RowsPerPageDropdown: RowsPerPageDropdown,\n        JumpToPageDropdown: JumpToPageDropdown,\n        JumpToPageInput: JumpToPageInput\n    }\n};\n</script>\n","<template>\n    <nav v-if=\"alwaysShow ? true : pageLinks && pageLinks.length > 1\" v-bind=\"ptmi('paginatorContainer')\">\n        <div v-for=\"(value, key) in templateItems\" :key=\"key\" ref=\"paginator\" :class=\"cx('paginator', { key })\" v-bind=\"ptm('root')\">\n            <slot\n                v-if=\"$slots.container\"\n                name=\"container\"\n                :first=\"d_first + 1\"\n                :last=\"last\"\n                :rows=\"d_rows\"\n                :page=\"page\"\n                :pageCount=\"pageCount\"\n                :pageLinks=\"pageLinks\"\n                :totalRecords=\"totalRecords\"\n                :firstPageCallback=\"changePageToFirst\"\n                :lastPageCallback=\"changePageToLast\"\n                :prevPageCallback=\"changePageToPrev\"\n                :nextPageCallback=\"changePageToNext\"\n                :rowChangeCallback=\"onRowChange\"\n                :changePageCallback=\"changePage\"\n            />\n            <template v-else>\n                <div v-if=\"$slots.start\" :class=\"cx('contentStart')\" v-bind=\"ptm('contentStart')\">\n                    <slot name=\"start\" :state=\"currentState\"></slot>\n                </div>\n                <div :class=\"cx('content')\" v-bind=\"ptm('content')\">\n                    <template v-for=\"item in value\" :key=\"item\">\n                        <FirstPageLink\n                            v-if=\"item === 'FirstPageLink'\"\n                            :aria-label=\"getAriaLabel('firstPageLabel')\"\n                            :template=\"$slots.firsticon || $slots.firstpagelinkicon\"\n                            @click=\"changePageToFirst($event)\"\n                            :disabled=\"isFirstPage || empty\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <PrevPageLink\n                            v-else-if=\"item === 'PrevPageLink'\"\n                            :aria-label=\"getAriaLabel('prevPageLabel')\"\n                            :template=\"$slots.previcon || $slots.prevpagelinkicon\"\n                            @click=\"changePageToPrev($event)\"\n                            :disabled=\"isFirstPage || empty\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <NextPageLink\n                            v-else-if=\"item === 'NextPageLink'\"\n                            :aria-label=\"getAriaLabel('nextPageLabel')\"\n                            :template=\"$slots.nexticon || $slots.nextpagelinkicon\"\n                            @click=\"changePageToNext($event)\"\n                            :disabled=\"isLastPage || empty\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <LastPageLink\n                            v-else-if=\"item === 'LastPageLink'\"\n                            :aria-label=\"getAriaLabel('lastPageLabel')\"\n                            :template=\"$slots.lasticon || $slots.lastpagelinkicon\"\n                            @click=\"changePageToLast($event)\"\n                            :disabled=\"isLastPage || empty\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <PageLinks v-else-if=\"item === 'PageLinks'\" :aria-label=\"getAriaLabel('pageLabel')\" :value=\"pageLinks\" :page=\"page\" @click=\"changePageLink($event)\" :unstyled=\"unstyled\" :pt=\"pt\" />\n                        <CurrentPageReport\n                            v-else-if=\"item === 'CurrentPageReport'\"\n                            aria-live=\"polite\"\n                            :template=\"currentPageReportTemplate\"\n                            :currentPage=\"currentPage\"\n                            :page=\"page\"\n                            :pageCount=\"pageCount\"\n                            :first=\"d_first\"\n                            :rows=\"d_rows\"\n                            :totalRecords=\"totalRecords\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <RowsPerPageDropdown\n                            v-else-if=\"item === 'RowsPerPageDropdown' && rowsPerPageOptions\"\n                            :aria-label=\"getAriaLabel('rowsPerPageLabel')\"\n                            :rows=\"d_rows\"\n                            :options=\"rowsPerPageOptions\"\n                            @rows-change=\"onRowChange($event)\"\n                            :disabled=\"empty\"\n                            :templates=\"$slots\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <JumpToPageDropdown\n                            v-else-if=\"item === 'JumpToPageDropdown'\"\n                            :aria-label=\"getAriaLabel('jumpToPageDropdownLabel')\"\n                            :page=\"page\"\n                            :pageCount=\"pageCount\"\n                            @page-change=\"changePage($event)\"\n                            :disabled=\"empty\"\n                            :templates=\"$slots\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"pt\"\n                        />\n                        <JumpToPageInput v-else-if=\"item === 'JumpToPageInput'\" :page=\"currentPage\" @page-change=\"changePage($event)\" :disabled=\"empty\" :unstyled=\"unstyled\" :pt=\"pt\" />\n                    </template>\n                </div>\n                <div v-if=\"$slots.end\" :class=\"cx('contentEnd')\" v-bind=\"ptm('contentEnd')\">\n                    <slot name=\"end\" :state=\"currentState\"></slot>\n                </div>\n            </template>\n        </div>\n    </nav>\n</template>\n\n<script>\nimport { setAttribute } from '@primeuix/utils/dom';\nimport BasePaginator from './BasePaginator.vue';\nimport CurrrentPageReport from './CurrentPageReport.vue';\nimport FirstPageLink from './FirstPageLink.vue';\nimport JumpToPageDropdown from './JumpToPageDropdown.vue';\nimport JumpToPageInput from './JumpToPageInput.vue';\nimport LastPageLink from './LastPageLink.vue';\nimport NextPageLink from './NextPageLink.vue';\nimport PageLinks from './PageLinks.vue';\nimport PrevPageLink from './PrevPageLink.vue';\nimport RowsPerPageDropdown from './RowsPerPageDropdown.vue';\n\nexport default {\n    name: 'Paginator',\n    extends: BasePaginator,\n    inheritAttrs: false,\n    emits: ['update:first', 'update:rows', 'page'],\n    data() {\n        return {\n            d_first: this.first,\n            d_rows: this.rows\n        };\n    },\n    watch: {\n        first(newValue) {\n            this.d_first = newValue;\n        },\n        rows(newValue) {\n            this.d_rows = newValue;\n        },\n        totalRecords(newValue) {\n            if (this.page > 0 && newValue && this.d_first >= newValue) {\n                this.changePage(this.pageCount - 1);\n            }\n        }\n    },\n    mounted() {\n        this.createStyle();\n    },\n    methods: {\n        changePage(p) {\n            const pc = this.pageCount;\n\n            if (p >= 0 && p < pc) {\n                this.d_first = this.d_rows * p;\n                const state = {\n                    page: p,\n                    first: this.d_first,\n                    rows: this.d_rows,\n                    pageCount: pc\n                };\n\n                this.$emit('update:first', this.d_first);\n                this.$emit('update:rows', this.d_rows);\n                this.$emit('page', state);\n            }\n        },\n\n        changePageToFirst(event) {\n            if (!this.isFirstPage) {\n                this.changePage(0);\n            }\n\n            event.preventDefault();\n        },\n        changePageToPrev(event) {\n            this.changePage(this.page - 1);\n            event.preventDefault();\n        },\n        changePageLink(event) {\n            this.changePage(event.value - 1);\n            event.originalEvent.preventDefault();\n        },\n        changePageToNext(event) {\n            this.changePage(this.page + 1);\n            event.preventDefault();\n        },\n        changePageToLast(event) {\n            if (!this.isLastPage) {\n                this.changePage(this.pageCount - 1);\n            }\n\n            event.preventDefault();\n        },\n        onRowChange(value) {\n            this.d_rows = value;\n            this.changePage(this.page);\n        },\n        createStyle() {\n            if (this.hasBreakpoints() && !this.isUnstyled) {\n                this.styleElement = document.createElement('style');\n                this.styleElement.type = 'text/css';\n                setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);\n                document.body.appendChild(this.styleElement);\n\n                let innerHTML = '';\n\n                const keys = Object.keys(this.template);\n                const sortedBreakpoints = {};\n\n                keys.sort((a, b) => parseInt(a) - parseInt(b)).forEach((key) => {\n                    sortedBreakpoints[key] = this.template[key];\n                });\n\n                for (const [index, [key]] of Object.entries(Object.entries(sortedBreakpoints))) {\n                    let minValue, calculatedMinValue;\n\n                    if (key !== 'default' && typeof Object.keys(sortedBreakpoints)[index - 1] === 'string') {\n                        calculatedMinValue = Number(Object.keys(sortedBreakpoints)[index - 1].slice(0, -2)) + 1 + 'px';\n                    } else {\n                        calculatedMinValue = Object.keys(sortedBreakpoints)[index - 1];\n                    }\n\n                    minValue = Object.entries(sortedBreakpoints)[index - 1] ? `and (min-width:${calculatedMinValue})` : '';\n\n                    if (key === 'default') {\n                        innerHTML += `\n                            @media scre