vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add content wrapper to paginator

pull/6011/head
Cagatay Civici 2024-07-02 11:19:32 +03:00
parent f81a17fedc
commit fd5e30da33
3 changed files with 90 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/primevue/src/paginator/Paginator.d.ts vendored
View File

@ -73,6 +73,10 @@ export interface PaginatorPassThroughOptions<T = any> {
* Used to pass attributes to the root's DOM element. * Used to pass attributes to the root's DOM element.
*/ */
root?: PaginatorPassThroughOptionType<T>; root?: PaginatorPassThroughOptionType<T>;
/**
* Used to pass attributes to the content DOM element.
*/
content?: PaginatorPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the content start's DOM element. * Used to pass attributes to the content start's DOM element.
*/ */

152
packages/primevue/src/paginator/Paginator.vue
View File

@ -4,81 +4,83 @@
<div v-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')"> <div v-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')">
<slot name="start" :state="currentState"></slot> <slot name="start" :state="currentState"></slot>
</div> </div>
<template v-for="item in value" :key="item"> <div :class="cx('content')" v-bind="ptm('content')">
<FirstPageLink <template v-for="item in value" :key="item">
v-if="item === 'FirstPageLink'" <FirstPageLink
:aria-label="getAriaLabel('firstPageLabel')" v-if="item === 'FirstPageLink'"
:template="$slots.firsticon || $slots.firstpagelinkicon" :aria-label="getAriaLabel('firstPageLabel')"
@click="changePageToFirst($event)" :template="$slots.firsticon || $slots.firstpagelinkicon"
:disabled="isFirstPage || empty" @click="changePageToFirst($event)"
:unstyled="unstyled" :disabled="isFirstPage || empty"
:pt="pt" :unstyled="unstyled"
/> :pt="pt"
<PrevPageLink />
v-else-if="item === 'PrevPageLink'" <PrevPageLink
:aria-label="getAriaLabel('prevPageLabel')" v-else-if="item === 'PrevPageLink'"
:template="$slots.previcon || $slots.prevpagelinkicon" :aria-label="getAriaLabel('prevPageLabel')"
@click="changePageToPrev($event)" :template="$slots.previcon || $slots.prevpagelinkicon"
:disabled="isFirstPage || empty" @click="changePageToPrev($event)"
:unstyled="unstyled" :disabled="isFirstPage || empty"
:pt="pt" :unstyled="unstyled"
/> :pt="pt"
<NextPageLink />
v-else-if="item === 'NextPageLink'" <NextPageLink
:aria-label="getAriaLabel('nextPageLabel')" v-else-if="item === 'NextPageLink'"
:template="$slots.nexticon || $slots.nextpagelinkicon" :aria-label="getAriaLabel('nextPageLabel')"
@click="changePageToNext($event)" :template="$slots.nexticon || $slots.nextpagelinkicon"
:disabled="isLastPage || empty" @click="changePageToNext($event)"
:unstyled="unstyled" :disabled="isLastPage || empty"
:pt="pt" :unstyled="unstyled"
/> :pt="pt"
<LastPageLink />
v-else-if="item === 'LastPageLink'" <LastPageLink
:aria-label="getAriaLabel('lastPageLabel')" v-else-if="item === 'LastPageLink'"
:template="$slots.lasticon || $slots.lastpagelinkicon" :aria-label="getAriaLabel('lastPageLabel')"
@click="changePageToLast($event)" :template="$slots.lasticon || $slots.lastpagelinkicon"
:disabled="isLastPage || empty" @click="changePageToLast($event)"
:unstyled="unstyled" :disabled="isLastPage || empty"
:pt="pt" :unstyled="unstyled"
/> :pt="pt"
<PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" :pt="pt" /> />
<CurrentPageReport <PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" :pt="pt" />
v-else-if="item === 'CurrentPageReport'" <CurrentPageReport
aria-live="polite" v-else-if="item === 'CurrentPageReport'"
:template="currentPageReportTemplate" aria-live="polite"
:currentPage="currentPage" :template="currentPageReportTemplate"
:page="page" :currentPage="currentPage"
:pageCount="pageCount" :page="page"
:first="d_first" :pageCount="pageCount"
:rows="d_rows" :first="d_first"
:totalRecords="totalRecords" :rows="d_rows"
:unstyled="unstyled" :totalRecords="totalRecords"
:pt="pt" :unstyled="unstyled"
/> :pt="pt"
<RowsPerPageDropdown />
v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" <RowsPerPageDropdown
:aria-label="getAriaLabel('rowsPerPageLabel')" v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions"
:rows="d_rows" :aria-label="getAriaLabel('rowsPerPageLabel')"
:options="rowsPerPageOptions" :rows="d_rows"
@rows-change="onRowChange($event)" :options="rowsPerPageOptions"
:disabled="empty" @rows-change="onRowChange($event)"
:templates="$slots" :disabled="empty"
:unstyled="unstyled" :templates="$slots"
:pt="pt" :unstyled="unstyled"
/> :pt="pt"
<JumpToPageDropdown />
v-else-if="item === 'JumpToPageDropdown'" <JumpToPageDropdown
:aria-label="getAriaLabel('jumpToPageDropdownLabel')" v-else-if="item === 'JumpToPageDropdown'"
:page="page" :aria-label="getAriaLabel('jumpToPageDropdownLabel')"
:pageCount="pageCount" :page="page"
@page-change="changePage($event)" :pageCount="pageCount"
:disabled="empty" @page-change="changePage($event)"
:templates="$slots" :disabled="empty"
:unstyled="unstyled" :templates="$slots"
:pt="pt" :unstyled="unstyled"
/> :pt="pt"
<JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :unstyled="unstyled" :pt="pt" /> />
</template> <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :unstyled="unstyled" :pt="pt" />
</template>
</div>
<div v-if="$slots.end" :class="cx('contentEnd')" v-bind="ptm('contentEnd')"> <div v-if="$slots.end" :class="cx('contentEnd')" v-bind="ptm('contentEnd')">
<slot name="end" :state="currentState"></slot> <slot name="end" :state="currentState"></slot>
</div> </div>

9
packages/primevue/src/paginator/style/PaginatorStyle.js
View File

@ -13,6 +13,14 @@ const theme = ({ dt }) => `
gap: ${dt('paginator.gap')}; gap: ${dt('paginator.gap')};
} }
.p-paginator-content {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: ${dt('paginator.gap')};
}
.p-paginator-content-start { .p-paginator-content-start {
margin-right: auto; margin-right: auto;
} }
@ -92,6 +100,7 @@ const classes = {
[`p-paginator-${key}`]: instance.hasBreakpoints() [`p-paginator-${key}`]: instance.hasBreakpoints()
} }
], ],
content: 'p-paginator-content',
contentStart: 'p-paginator-content-start', contentStart: 'p-paginator-content-start',
contentEnd: 'p-paginator-content-end', contentEnd: 'p-paginator-content-end',
first: ({ instance }) => [ first: ({ instance }) => [