Refactor #3832 Refactor #3833 - For Paginator

api-generator/components/paginator.js

@@ -81,11 +81,27 @@ const PaginatorEvents = [
 const PaginatorSlots = [
     {
         name: 'left',
-        description: "Custom content for the component's left side"
+        description: "Custom content for the component's left side."
     },
     {
         name: 'right',
-        description: "Custom content for the component's right side"
+        description: "Custom content for the component's right side."
+    },
+    {
+        name: 'firstpagelinkicon',
+        description: 'Custom first page link icon template.'
+    },
+    {
+        name: 'prevpagelinkicon',
+        description: 'Custom previous page link icon template.'
+    },
+    {
+        name: 'nextpagelinkicon',
+        description: 'Custom next page link icon template.'
+    },
+    {
+        name: 'lastpagelinkicon',
+        description: 'Custom last page link icon template.'
     }
 ];
 

components/lib/paginator/FirstPageLink.vue

@@ -1,14 +1,21 @@
 <template>
     <button v-ripple :class="containerClass" type="button">
-        <span class="p-paginator-icon pi pi-angle-double-left"></span>
+        <component :is="template || 'AngleDoubleLeftIcon'" class="p-paginator-icon" />
     </button>
 </template>
 
 <script>
+import AngleDoubleLeftIcon from 'primevue/icon/angledoubleleft';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'FirstPageLink',
+    props: {
+        template: {
+            type: Function,
+            default: null
+        }
+    },
     computed: {
         containerClass() {
             return [
@@ -19,6 +26,9 @@ export default {
             ];
         }
     },
+    components: {
+        AngleDoubleLeftIcon: AngleDoubleLeftIcon
+    },
     directives: {
         ripple: Ripple
     }

components/lib/paginator/LastPageLink.vue

@@ -1,14 +1,21 @@
 <template>
     <button v-ripple :class="containerClass" type="button">
-        <span class="p-paginator-icon pi pi-angle-double-right"></span>
+        <component :is="template || 'AngleDoubleRightIcon'" class="p-paginator-icon" />
     </button>
 </template>
 
 <script>
+import AngleDoubleRightIcon from 'primevue/icon/angledoubleright';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'LastPageLink',
+    props: {
+        template: {
+            type: Function,
+            default: null
+        }
+    },
     computed: {
         containerClass() {
             return [
@@ -19,6 +26,9 @@ export default {
             ];
         }
     },
+    components: {
+        AngleDoubleRightIcon: AngleDoubleRightIcon
+    },
     directives: {
         ripple: Ripple
     }

components/lib/paginator/NextPageLink.vue

@@ -1,14 +1,21 @@
 <template>
     <button v-ripple :class="containerClass" type="button">
-        <span class="p-paginator-icon pi pi-angle-right"></span>
+        <component :is="template || 'AngleRightIcon'" class="p-paginator-icon" />
     </button>
 </template>
 
 <script>
+import AngleRightIcon from 'primevue/icon/angleright';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'NextPageLink',
+    props: {
+        template: {
+            type: Function,
+            default: null
+        }
+    },
     computed: {
         containerClass() {
             return [
@@ -19,6 +26,9 @@ export default {
             ];
         }
     },
+    components: {
+        AngleRightIcon: AngleRightIcon
+    },
     directives: {
         ripple: Ripple
     }

components/lib/paginator/Paginator.d.ts

@@ -120,6 +120,22 @@ export interface PaginatorSlots {
          */
         state: PageState;
     }): VNode[];
+    /**
+     * Custom first page link icon template.
+     */
+    firstpagelinkicon(): VNode[];
+    /**
+     * Custom previous page link icon template.
+     */
+    prevpagelinkicon(): VNode[];
+    /**
+     * Custom finextrst page link icon template.
+     */
+    nextpagelinkicon(): VNode[];
+    /**
+     * Custom last page link icon template.
+     */
+    lastpagelinkicon(): VNode[];
 }
 
 /**

components/lib/paginator/Paginator.spec.js

@@ -20,8 +20,6 @@ describe('Paginator.vue', () => {
 
     it('should exist', () => {
         expect(wrapper.find('.p-paginator.p-component').exists()).toBe(true);
-        expect(wrapper.find('.p-paginator-icon.pi-angle-double-left').exists()).toBe(true);
-        expect(wrapper.find('.p-paginator-icon.pi-angle-right').exists()).toBe(true);
         expect(wrapper.findAll('.p-paginator-page.p-paginator-element').length).toBe(5);
         expect(wrapper.find('.p-dropdown.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-dropdown-label').text()).toBe('10');

components/lib/paginator/Paginator.vue

@@ -5,10 +5,10 @@
                 <slot name="start" :state="currentState"></slot>
             </div>
             <template v-for="item in value" :key="item">
-                <FirstPageLink v-if="item === 'FirstPageLink'" :aria-label="getAriaLabel('firstPageLabel')" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
+                <FirstPageLink v-if="item === 'FirstPageLink'" :aria-label="getAriaLabel('firstPageLabel')" :template="$slots.firstpagelinkicon" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
-                <PrevPageLink v-else-if="item === 'PrevPageLink'" :aria-label="getAriaLabel('prevPageLabel')" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
+                <PrevPageLink v-else-if="item === 'PrevPageLink'" :aria-label="getAriaLabel('prevPageLabel')" :template="$slots.prevpagelinkicon" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
-                <NextPageLink v-else-if="item === 'NextPageLink'" :aria-label="getAriaLabel('nextPageLabel')" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
+                <NextPageLink v-else-if="item === 'NextPageLink'" :aria-label="getAriaLabel('nextPageLabel')" :template="$slots.nextpagelinkicon" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
-                <LastPageLink v-else-if="item === 'LastPageLink'" :aria-label="getAriaLabel('lastPageLabel')" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
+                <LastPageLink v-else-if="item === 'LastPageLink'" :aria-label="getAriaLabel('lastPageLabel')" :template="$slots.lastpagelinkicon" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
                 <PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" />
                 <CurrentPageReport
                     v-else-if="item === 'CurrentPageReport'"

components/lib/paginator/PrevPageLink.vue

@@ -1,14 +1,21 @@
 <template>
     <button v-ripple :class="containerClass" type="button">
-        <span class="p-paginator-icon pi pi-angle-left"></span>
+        <component :is="template || 'AngleLeftIcon'" class="p-paginator-icon" />
     </button>
 </template>
 
 <script>
+import AngleLeftIcon from 'primevue/icon/angleleft';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'PrevPageLink',
+    props: {
+        template: {
+            type: Function,
+            default: null
+        }
+    },
     computed: {
         containerClass() {
             return [
@@ -19,6 +26,9 @@ export default {
             ];
         }
     },
+    components: {
+        AngleLeftIcon: AngleLeftIcon
+    },
     directives: {
         ripple: Ripple
     }