primevue 3.16.2 → 3.18.0

package/paginator/Paginator.vue

@@ -1,38 +1,38 @@
 <template>
-	<div class="p-paginator p-component" v-if="alwaysShow ? true : (pageLinks && pageLinks.length > 1)">
-        <div class="p-paginator-left-content" v-if="$slots.start">
-            <slot name="start" :state="currentState"></slot>
+    <div v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1">
+        <div v-for="(value, key) in templateItems" :key="key" ref="paginator" class="p-paginator p-component" :class="getPaginatorClasses(key)">
+            <div v-if="$slots.start" class="p-paginator-left-content">
+                <slot name="start" :state="currentState"></slot>
+            </div>
+            <template v-for="item in value" :key="item">
+                <FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
+                <PrevPageLink v-else-if="item === 'PrevPageLink'" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
+                <NextPageLink v-else-if="item === 'NextPageLink'" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
+                <LastPageLink v-else-if="item === 'LastPageLink'" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
+                <PageLinks v-else-if="item === 'PageLinks'" :value="pageLinks" :page="page" @click="changePageLink($event)" />
+                <CurrentPageReport v-else-if="item === 'CurrentPageReport'" :template="currentPageReportTemplate" :currentPage="currentPage" :page="page" :pageCount="pageCount" :first="d_first" :rows="d_rows" :totalRecords="totalRecords" />
+                <RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :rows="d_rows" :options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty" />
+                <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :page="page" :pageCount="pageCount" @page-change="changePage($event)" :disabled="empty" />
+                <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" />
+            </template>
+            <div v-if="$slots.end" class="p-paginator-right-content">
+                <slot name="end" :state="currentState"></slot>
+            </div>
         </div>
-		<template v-for="item of templateItems" :key="item">
-			<FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
-			<PrevPageLink v-else-if="item === 'PrevPageLink'" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
-			<NextPageLink v-else-if="item === 'NextPageLink'" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
-			<LastPageLink v-else-if="item === 'LastPageLink'" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
-			<PageLinks v-else-if="item === 'PageLinks'" :value="pageLinks" :page="page" @click="changePageLink($event)" />
-			<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :template="currentPageReportTemplate" :currentPage="currentPage"
-                :page="page" :pageCount="pageCount" :first="d_first" :rows="d_rows" :totalRecords="totalRecords" />
-			<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :rows="d_rows"
-                :options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty"/>
-            <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :page="page" :pageCount="pageCount"
-                @page-change="changePage($event)" :disabled="empty"/>
-            <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty"/>
-        </template>
-        <div class="p-paginator-right-content" v-if="$slots.end">
-            <slot name="end" :state="currentState"></slot>
-        </div>
-	</div>
+    </div>
 </template>
 
 <script>
+import { UniqueComponentId } from 'primevue/utils';
 import CurrrentPageReport from './CurrentPageReport.vue';
 import FirstPageLink from './FirstPageLink.vue';
+import JumpToPageDropdown from './JumpToPageDropdown.vue';
+import JumpToPageInput from './JumpToPageInput.vue';
 import LastPageLink from './LastPageLink.vue';
 import NextPageLink from './NextPageLink.vue';
 import PageLinks from './PageLinks.vue';
 import PrevPageLink from './PrevPageLink.vue';
 import RowsPerPageDropdown from './RowsPerPageDropdown.vue';
-import JumpToPageDropdown from './JumpToPageDropdown.vue';
-import JumpToPageInput from './JumpToPageInput.vue';
 
 export default {
     name: 'Paginator',
@@ -59,7 +59,7 @@ export default {
             default: null
         },
         template: {
-            type: String,
+            type: [Object, String],
             default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
         },
         currentPageReportTemplate: {
@@ -75,7 +75,7 @@ export default {
         return {
             d_first: this.first,
             d_rows: this.rows
-        }
+        };
     },
     watch: {
         first(newValue) {
@@ -85,11 +85,15 @@ export default {
             this.d_rows = newValue;
         },
         totalRecords(newValue) {
-            if (this.page > 0 && newValue && (this.d_first >= newValue)) {
+            if (this.page > 0 && newValue && this.d_first >= newValue) {
                 this.changePage(this.pageCount - 1);
             }
         }
     },
+    mounted() {
+        this.setPaginatorAttribute();
+        this.createStyle();
+    },
     methods: {
         changePage(p) {
             const pc = this.pageCount;
@@ -103,13 +107,14 @@ export default {
                     pageCount: pc
                 };
 
-				this.$emit('update:first', this.d_first);
+                this.$emit('update:first', this.d_first);
                 this.$emit('update:rows', this.d_rows);
                 this.$emit('page', state);
             }
         },
+
         changePageToFirst(event) {
-            if(!this.isFirstPage) {
+            if (!this.isFirstPage) {
                 this.changePage(0);
             }
 
@@ -124,11 +129,11 @@ export default {
             event.originalEvent.preventDefault();
         },
         changePageToNext(event) {
-            this.changePage(this.page  + 1);
+            this.changePage(this.page + 1);
             event.preventDefault();
         },
         changePageToLast(event) {
-            if(!this.isLastPage) {
+            if (!this.isLastPage) {
                 this.changePage(this.pageCount - 1);
             }
 
@@ -137,14 +142,96 @@ export 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);
+
+                let innerHTML = '';
+
+                const keys = Object.keys(this.template);
+                const sortedBreakpoints = {};
+
+                keys.sort((a, b) => parseInt(a) - parseInt(b)).forEach((key) => {
+                    sortedBreakpoints[key] = this.template[key];
+                });
+
+                for (const [index, [key]] of Object.entries(Object.entries(sortedBreakpoints))) {
+                    const minValue = Object.entries(sortedBreakpoints)[index - 1] ? `and (min-width:${Object.keys(sortedBreakpoints)[index - 1]})` : '';
+
+                    if (key === 'default') {
+                        innerHTML += `
+                            @media screen ${minValue} {
+                                .paginator[${this.attributeSelector}],
+                                .p-paginator-default{
+                                    display: flex !important;
+                                }
+                            }
+                        `;
+                    } else {
+                        innerHTML += `
+                        .paginator[${this.attributeSelector}], .p-paginator-${key} {
+                                display: none !important;
+                            }
+                        @media screen ${minValue} and (max-width: ${key}) {
+                            .paginator[${this.attributeSelector}], .p-paginator-${key} {
+                                display: flex !important;
+                            }
+                            .paginator[${this.attributeSelector}],
+                            .p-paginator-default{
+                                display: none !important;
+                            }
+                        }
+                    `;
+                    }
+                }
+
+                this.styleElement.innerHTML = innerHTML;
+            }
+        },
+        hasBreakpoints() {
+            return typeof this.template === 'object';
+        },
+        getPaginatorClasses(key) {
+            return [
+                {
+                    'p-paginator-default': !this.hasBreakpoints(),
+                    [`p-paginator-${key}`]: this.hasBreakpoints()
+                }
+            ];
+        },
+        setPaginatorAttribute() {
+            [...this.$refs.paginator].forEach((el) => {
+                el.setAttribute(this.attributeSelector, '');
+            });
         }
     },
     computed: {
         templateItems() {
-            let keys = [];
-            this.template.split(' ').map((value) => {
-                keys.push(value.trim());
-            })
+            let keys = {};
+
+            if (this.hasBreakpoints()) {
+                keys = this.template;
+
+                if (!keys.default) {
+                    keys.default = 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown';
+                }
+
+                for (const item in keys) {
+                    keys[item] = this.template[item].split(' ').map((value) => {
+                        return value.trim();
+                    });
+                }
+
+                return keys;
+            }
+
+            keys['default'] = this.template.split(' ').map((value) => {
+                return value.trim();
+            });
+
             return keys;
         },
         page() {
@@ -164,11 +251,12 @@ export default {
             const visiblePages = Math.min(this.pageLinkSize, numberOfPages);
 
             //calculate range, keep current in middle if necessary
-            let start = Math.max(0, Math.ceil(this.page - ((visiblePages) / 2)));
+            let start = Math.max(0, Math.ceil(this.page - visiblePages / 2));
             let end = Math.min(numberOfPages - 1, start + visiblePages - 1);
 
             //check when approaching to last page
             const delta = this.pageLinkSize - (end - start + 1);
+
             start = Math.max(0, start - delta);
 
             return [start, end];
@@ -179,7 +267,7 @@ export default {
             let start = boundaries[0];
             let end = boundaries[1];
 
-            for(var i = start; i <= end; i++) {
+            for (var i = start; i <= end; i++) {
                 pageLinks.push(i + 1);
             }
 
@@ -190,30 +278,37 @@ export default {
                 page: this.page,
                 first: this.d_first,
                 rows: this.d_rows
-            }
+            };
         },
         empty() {
             return this.pageCount === 0;
         },
         currentPage() {
             return this.pageCount > 0 ? this.page + 1 : 0;
+        },
+        attributeSelector() {
+            return UniqueComponentId();
         }
     },
     components: {
-        'CurrentPageReport': CurrrentPageReport,
-        'FirstPageLink': FirstPageLink,
-        'LastPageLink': LastPageLink,
-        'NextPageLink': NextPageLink,
-        'PageLinks': PageLinks,
-        'PrevPageLink': PrevPageLink,
-        'RowsPerPageDropdown': RowsPerPageDropdown,
-        'JumpToPageDropdown': JumpToPageDropdown,
-        'JumpToPageInput': JumpToPageInput
+        CurrentPageReport: CurrrentPageReport,
+        FirstPageLink: FirstPageLink,
+        LastPageLink: LastPageLink,
+        NextPageLink: NextPageLink,
+        PageLinks: PageLinks,
+        PrevPageLink: PrevPageLink,
+        RowsPerPageDropdown: RowsPerPageDropdown,
+        JumpToPageDropdown: JumpToPageDropdown,
+        JumpToPageInput: JumpToPageInput
     }
-}
+};
 </script>
 
 <style lang="css">
+.p-paginator-default {
+    display: flex;
+}
+
 .p-paginator {
     display: flex;
     align-items: center;
@@ -222,11 +317,11 @@ export default {
 }
 
 .p-paginator-left-content {
-	margin-right: auto;
+    margin-right: auto;
 }
 
 .p-paginator-right-content {
-	margin-left: auto;
+    margin-left: auto;
 }
 
 .p-paginator-page,

package/paginator/PrevPageLink.vue

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

package/paginator/RowsPerPageDropdown.vue

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