Fixed #6679 - Paginator: Headless mode
tugcekucukoglu
parent
31e834447c
commit
bf5aa0872f
|
|
@ -416,6 +416,60 @@ export interface PaginatorSlots {
|
||||||
*/
|
*/
|
||||||
class: string;
|
class: string;
|
||||||
}): VNode[];
|
}): VNode[];
|
||||||
|
/**
|
||||||
|
* Custom container slot.
|
||||||
|
* @param {Object} scope - container slot's params.
|
||||||
|
*/
|
||||||
|
container(scope: {
|
||||||
|
/**
|
||||||
|
* Index of first record
|
||||||
|
*/
|
||||||
|
first: number;
|
||||||
|
/**
|
||||||
|
* Index of last record
|
||||||
|
*/
|
||||||
|
last: number;
|
||||||
|
/**
|
||||||
|
* Number of rows to display in new page
|
||||||
|
*/
|
||||||
|
rows: number;
|
||||||
|
/**
|
||||||
|
* New page number
|
||||||
|
*/
|
||||||
|
page: number;
|
||||||
|
/**
|
||||||
|
* Total number of pages
|
||||||
|
*/
|
||||||
|
pageCount?: number;
|
||||||
|
/**
|
||||||
|
* Total records
|
||||||
|
*/
|
||||||
|
totalRecords?: number;
|
||||||
|
/**
|
||||||
|
* First page function.
|
||||||
|
* @param {Event} event - Browser event
|
||||||
|
*/
|
||||||
|
firstPageCallback: (event: Event) => void;
|
||||||
|
/**
|
||||||
|
* Last page function.
|
||||||
|
* @param {Event} event - Browser event
|
||||||
|
*/
|
||||||
|
lastPageCallback: (event: Event) => void;
|
||||||
|
/**
|
||||||
|
* Previous page function.
|
||||||
|
* @param {Event} event - Browser event
|
||||||
|
*/
|
||||||
|
prevCallback: (event: Event) => void;
|
||||||
|
/**
|
||||||
|
* Next page function.
|
||||||
|
* @param {Event} event - Browser event
|
||||||
|
*/
|
||||||
|
nextCallback: (event: Event) => void;
|
||||||
|
/**
|
||||||
|
* Row change function.
|
||||||
|
*/
|
||||||
|
rowChangeCallback: (value: number) => void;
|
||||||
|
}): VNode[];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -1,89 +1,106 @@
|
||||||
<template>
|
<template>
|
||||||
<nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptmi('paginatorContainer')">
|
<nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptmi('paginatorContainer')">
|
||||||
<div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('root')">
|
<div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('root')">
|
||||||
<div v-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')">
|
<slot
|
||||||
<slot name="start" :state="currentState"></slot>
|
v-if="$slots.container"
|
||||||
</div>
|
name="container"
|
||||||
<div :class="cx('content')" v-bind="ptm('content')">
|
:first="d_first + 1"
|
||||||
<template v-for="item in value" :key="item">
|
:last="last"
|
||||||
<FirstPageLink
|
:rows="d_rows"
|
||||||
v-if="item === 'FirstPageLink'"
|
:page="page"
|
||||||
:aria-label="getAriaLabel('firstPageLabel')"
|
:pageCount="pageCount"
|
||||||
:template="$slots.firsticon || $slots.firstpagelinkicon"
|
:totalRecords="totalRecords"
|
||||||
@click="changePageToFirst($event)"
|
:firstPageCallback="changePageToFirst"
|
||||||
:disabled="isFirstPage || empty"
|
:lastPageCallback="changePageToLast"
|
||||||
:unstyled="unstyled"
|
:prevCallback="changePageToPrev"
|
||||||
:pt="pt"
|
:nextCallback="changePageToNext"
|
||||||
/>
|
:rowChangeCallback="onRowChange"
|
||||||
<PrevPageLink
|
/>
|
||||||
v-else-if="item === 'PrevPageLink'"
|
<template v-else>
|
||||||
:aria-label="getAriaLabel('prevPageLabel')"
|
<div v-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')">
|
||||||
:template="$slots.previcon || $slots.prevpagelinkicon"
|
<slot name="start" :state="currentState"></slot>
|
||||||
@click="changePageToPrev($event)"
|
</div>
|
||||||
:disabled="isFirstPage || empty"
|
<div :class="cx('content')" v-bind="ptm('content')">
|
||||||
:unstyled="unstyled"
|
<template v-for="item in value" :key="item">
|
||||||
:pt="pt"
|
<FirstPageLink
|
||||||
/>
|
v-if="item === 'FirstPageLink'"
|
||||||
<NextPageLink
|
:aria-label="getAriaLabel('firstPageLabel')"
|
||||||
v-else-if="item === 'NextPageLink'"
|
:template="$slots.firsticon || $slots.firstpagelinkicon"
|
||||||
:aria-label="getAriaLabel('nextPageLabel')"
|
@click="changePageToFirst($event)"
|
||||||
:template="$slots.nexticon || $slots.nextpagelinkicon"
|
:disabled="isFirstPage || empty"
|
||||||
@click="changePageToNext($event)"
|
:unstyled="unstyled"
|
||||||
:disabled="isLastPage || empty"
|
:pt="pt"
|
||||||
:unstyled="unstyled"
|
/>
|
||||||
:pt="pt"
|
<PrevPageLink
|
||||||
/>
|
v-else-if="item === 'PrevPageLink'"
|
||||||
<LastPageLink
|
:aria-label="getAriaLabel('prevPageLabel')"
|
||||||
v-else-if="item === 'LastPageLink'"
|
:template="$slots.previcon || $slots.prevpagelinkicon"
|
||||||
:aria-label="getAriaLabel('lastPageLabel')"
|
@click="changePageToPrev($event)"
|
||||||
:template="$slots.lasticon || $slots.lastpagelinkicon"
|
:disabled="isFirstPage || empty"
|
||||||
@click="changePageToLast($event)"
|
:unstyled="unstyled"
|
||||||
:disabled="isLastPage || empty"
|
:pt="pt"
|
||||||
:unstyled="unstyled"
|
/>
|
||||||
:pt="pt"
|
<NextPageLink
|
||||||
/>
|
v-else-if="item === 'NextPageLink'"
|
||||||
<PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" :unstyled="unstyled" :pt="pt" />
|
:aria-label="getAriaLabel('nextPageLabel')"
|
||||||
<CurrentPageReport
|
:template="$slots.nexticon || $slots.nextpagelinkicon"
|
||||||
v-else-if="item === 'CurrentPageReport'"
|
@click="changePageToNext($event)"
|
||||||
aria-live="polite"
|
:disabled="isLastPage || empty"
|
||||||
:template="currentPageReportTemplate"
|
:unstyled="unstyled"
|
||||||
:currentPage="currentPage"
|
:pt="pt"
|
||||||
:page="page"
|
/>
|
||||||
:pageCount="pageCount"
|
<LastPageLink
|
||||||
:first="d_first"
|
v-else-if="item === 'LastPageLink'"
|
||||||
:rows="d_rows"
|
:aria-label="getAriaLabel('lastPageLabel')"
|
||||||
:totalRecords="totalRecords"
|
:template="$slots.lasticon || $slots.lastpagelinkicon"
|
||||||
:unstyled="unstyled"
|
@click="changePageToLast($event)"
|
||||||
:pt="pt"
|
:disabled="isLastPage || empty"
|
||||||
/>
|
:unstyled="unstyled"
|
||||||
<RowsPerPageDropdown
|
:pt="pt"
|
||||||
v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions"
|
/>
|
||||||
:aria-label="getAriaLabel('rowsPerPageLabel')"
|
<PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" :unstyled="unstyled" :pt="pt" />
|
||||||
:rows="d_rows"
|
<CurrentPageReport
|
||||||
:options="rowsPerPageOptions"
|
v-else-if="item === 'CurrentPageReport'"
|
||||||
@rows-change="onRowChange($event)"
|
aria-live="polite"
|
||||||
:disabled="empty"
|
:template="currentPageReportTemplate"
|
||||||
:templates="$slots"
|
:currentPage="currentPage"
|
||||||
:unstyled="unstyled"
|
:page="page"
|
||||||
:pt="pt"
|
:pageCount="pageCount"
|
||||||
/>
|
:first="d_first"
|
||||||
<JumpToPageDropdown
|
:rows="d_rows"
|
||||||
v-else-if="item === 'JumpToPageDropdown'"
|
:totalRecords="totalRecords"
|
||||||
:aria-label="getAriaLabel('jumpToPageDropdownLabel')"
|
:unstyled="unstyled"
|
||||||
:page="page"
|
:pt="pt"
|
||||||
:pageCount="pageCount"
|
/>
|
||||||
@page-change="changePage($event)"
|
<RowsPerPageDropdown
|
||||||
:disabled="empty"
|
v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions"
|
||||||
:templates="$slots"
|
:aria-label="getAriaLabel('rowsPerPageLabel')"
|
||||||
:unstyled="unstyled"
|
:rows="d_rows"
|
||||||
:pt="pt"
|
:options="rowsPerPageOptions"
|
||||||
/>
|
@rows-change="onRowChange($event)"
|
||||||
<JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :unstyled="unstyled" :pt="pt" />
|
:disabled="empty"
|
||||||
</template>
|
:templates="$slots"
|
||||||
</div>
|
:unstyled="unstyled"
|
||||||
<div v-if="$slots.end" :class="cx('contentEnd')" v-bind="ptm('contentEnd')">
|
:pt="pt"
|
||||||
<slot name="end" :state="currentState"></slot>
|
/>
|
||||||
</div>
|
<JumpToPageDropdown
|
||||||
|
v-else-if="item === 'JumpToPageDropdown'"
|
||||||
|
:aria-label="getAriaLabel('jumpToPageDropdownLabel')"
|
||||||
|
:page="page"
|
||||||
|
:pageCount="pageCount"
|
||||||
|
@page-change="changePage($event)"
|
||||||
|
:disabled="empty"
|
||||||
|
:templates="$slots"
|
||||||
|
:unstyled="unstyled"
|
||||||
|
:pt="pt"
|
||||||
|
/>
|
||||||
|
<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')">
|
||||||
|
<slot name="end" :state="currentState"></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -317,6 +334,9 @@ export default {
|
||||||
},
|
},
|
||||||
currentPage() {
|
currentPage() {
|
||||||
return this.pageCount > 0 ? this.page + 1 : 0;
|
return this.pageCount > 0 ? this.page + 1 : 0;
|
||||||
|
},
|
||||||
|
last() {
|
||||||
|
return Math.min(this.d_first + this.rows, this.totalRecords);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue