vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3832 Refactor #3833 - For Paginator

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-04-07 09:48:00 +03:00
parent fba52967d1
commit 1646da534e
8 changed files with 82 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

20
api-generator/components/paginator.js
View file

@ -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.'
}
];

12
components/lib/paginator/FirstPageLink.vue
View file

@ -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
}

12
components/lib/paginator/LastPageLink.vue
View file

@ -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
}

12
components/lib/paginator/NextPageLink.vue
View file

@ -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
}

16
components/lib/paginator/Paginator.d.ts vendored
View file

@ -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[];
}
/**

2
components/lib/paginator/Paginator.spec.js
View file

@ -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');

8
components/lib/paginator/Paginator.vue
View file

@ -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" />
<PrevPageLink v-else-if="item === 'PrevPageLink'" :aria-label="getAriaLabel('prevPageLabel')" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
<NextPageLink v-else-if="item === 'NextPageLink'" :aria-label="getAriaLabel('nextPageLabel')" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
<LastPageLink v-else-if="item === 'LastPageLink'" :aria-label="getAriaLabel('lastPageLabel')" @click="changePageToLast($event)" :disabled="isLastPage || 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')" :template="$slots.prevpagelinkicon" @click="changePageToPrev($event)" :disabled="isFirstPage || 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')" :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'"

12
components/lib/paginator/PrevPageLink.vue
View file

@ -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
}