primevue 4.1.0 → 4.2.0

package/paginator/Paginator.vue

@@ -1,89 +1,106 @@
 <template>
     <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-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')">
-                <slot name="start" :state="currentState"></slot>
-            </div>
-            <div :class="cx('content')" v-bind="ptm('content')">
-                <template v-for="item in value" :key="item">
-                    <FirstPageLink
-                        v-if="item === 'FirstPageLink'"
-                        :aria-label="getAriaLabel('firstPageLabel')"
-                        :template="$slots.firsticon || $slots.firstpagelinkicon"
-                        @click="changePageToFirst($event)"
-                        :disabled="isFirstPage || empty"
-                        :unstyled="unstyled"
-                        :pt="pt"
-                    />
-                    <PrevPageLink
-                        v-else-if="item === 'PrevPageLink'"
-                        :aria-label="getAriaLabel('prevPageLabel')"
-                        :template="$slots.previcon || $slots.prevpagelinkicon"
-                        @click="changePageToPrev($event)"
-                        :disabled="isFirstPage || empty"
-                        :unstyled="unstyled"
-                        :pt="pt"
-                    />
-                    <NextPageLink
-                        v-else-if="item === 'NextPageLink'"
-                        :aria-label="getAriaLabel('nextPageLabel')"
-                        :template="$slots.nexticon || $slots.nextpagelinkicon"
-                        @click="changePageToNext($event)"
-                        :disabled="isLastPage || empty"
-                        :unstyled="unstyled"
-                        :pt="pt"
-                    />
-                    <LastPageLink
-                        v-else-if="item === 'LastPageLink'"
-                        :aria-label="getAriaLabel('lastPageLabel')"
-                        :template="$slots.lasticon || $slots.lastpagelinkicon"
-                        @click="changePageToLast($event)"
-                        :disabled="isLastPage || empty"
-                        :unstyled="unstyled"
-                        :pt="pt"
-                    />
-                    <PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" :unstyled="unstyled" :pt="pt" />
-                    <CurrentPageReport
-                        v-else-if="item === 'CurrentPageReport'"
-                        aria-live="polite"
-                        :template="currentPageReportTemplate"
-                        :currentPage="currentPage"
-                        :page="page"
-                        :pageCount="pageCount"
-                        :first="d_first"
-                        :rows="d_rows"
-                        :totalRecords="totalRecords"
-                        :unstyled="unstyled"
-                        :pt="pt"
-                    />
-                    <RowsPerPageDropdown
-                        v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions"
-                        :aria-label="getAriaLabel('rowsPerPageLabel')"
-                        :rows="d_rows"
-                        :options="rowsPerPageOptions"
-                        @rows-change="onRowChange($event)"
-                        :disabled="empty"
-                        :templates="$slots"
-                        :unstyled="unstyled"
-                        :pt="pt"
-                    />
-                    <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>
+            <slot
+                v-if="$slots.container"
+                name="container"
+                :first="d_first + 1"
+                :last="last"
+                :rows="d_rows"
+                :page="page"
+                :pageCount="pageCount"
+                :totalRecords="totalRecords"
+                :firstPageCallback="changePageToFirst"
+                :lastPageCallback="changePageToLast"
+                :prevPageCallback="changePageToPrev"
+                :nextPageCallback="changePageToNext"
+                :rowChangeCallback="onRowChange"
+            />
+            <template v-else>
+                <div v-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')">
+                    <slot name="start" :state="currentState"></slot>
+                </div>
+                <div :class="cx('content')" v-bind="ptm('content')">
+                    <template v-for="item in value" :key="item">
+                        <FirstPageLink
+                            v-if="item === 'FirstPageLink'"
+                            :aria-label="getAriaLabel('firstPageLabel')"
+                            :template="$slots.firsticon || $slots.firstpagelinkicon"
+                            @click="changePageToFirst($event)"
+                            :disabled="isFirstPage || empty"
+                            :unstyled="unstyled"
+                            :pt="pt"
+                        />
+                        <PrevPageLink
+                            v-else-if="item === 'PrevPageLink'"
+                            :aria-label="getAriaLabel('prevPageLabel')"
+                            :template="$slots.previcon || $slots.prevpagelinkicon"
+                            @click="changePageToPrev($event)"
+                            :disabled="isFirstPage || empty"
+                            :unstyled="unstyled"
+                            :pt="pt"
+                        />
+                        <NextPageLink
+                            v-else-if="item === 'NextPageLink'"
+                            :aria-label="getAriaLabel('nextPageLabel')"
+                            :template="$slots.nexticon || $slots.nextpagelinkicon"
+                            @click="changePageToNext($event)"
+                            :disabled="isLastPage || empty"
+                            :unstyled="unstyled"
+                            :pt="pt"
+                        />
+                        <LastPageLink
+                            v-else-if="item === 'LastPageLink'"
+                            :aria-label="getAriaLabel('lastPageLabel')"
+                            :template="$slots.lasticon || $slots.lastpagelinkicon"
+                            @click="changePageToLast($event)"
+                            :disabled="isLastPage || empty"
+                            :unstyled="unstyled"
+                            :pt="pt"
+                        />
+                        <PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" :unstyled="unstyled" :pt="pt" />
+                        <CurrentPageReport
+                            v-else-if="item === 'CurrentPageReport'"
+                            aria-live="polite"
+                            :template="currentPageReportTemplate"
+                            :currentPage="currentPage"
+                            :page="page"
+                            :pageCount="pageCount"
+                            :first="d_first"
+                            :rows="d_rows"
+                            :totalRecords="totalRecords"
+                            :unstyled="unstyled"
+                            :pt="pt"
+                        />
+                        <RowsPerPageDropdown
+                            v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions"
+                            :aria-label="getAriaLabel('rowsPerPageLabel')"
+                            :rows="d_rows"
+                            :options="rowsPerPageOptions"
+                            @rows-change="onRowChange($event)"
+                            :disabled="empty"
+                            :templates="$slots"
+                            :unstyled="unstyled"
+                            :pt="pt"
+                        />
+                        <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>
     </nav>
 </template>
@@ -182,7 +199,7 @@ export default {
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
                 setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
-                document.head.appendChild(this.styleElement);
+                document.body.appendChild(this.styleElement);
 
                 let innerHTML = '';
 
@@ -317,6 +334,9 @@ export default {
         },
         currentPage() {
             return this.pageCount > 0 ? this.page + 1 : 0;
+        },
+        last() {
+            return Math.min(this.d_first + this.rows, this.totalRecords);
         }
     },
     components: {

package/paginator/index.d.ts

@@ -7,7 +7,7 @@
  * @module paginator
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { DropdownPassThroughOptions } from 'primevue/dropdown';
 import type { InputNumberPassThroughOptions } from 'primevue/inputnumber';
@@ -416,6 +416,60 @@ export interface PaginatorSlots {
          */
         class: string;
     }): 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
+         */
+        prevPageCallback: (event: Event) => void;
+        /**
+         * Next page function.
+         * @param {Event} event - Browser event
+         */
+        nextPageCallback: (event: Event) => void;
+        /**
+         * Row change function.
+         */
+        rowChangeCallback: (value: number) => void;
+    }): VNode[];
 }
 
 /**
@@ -457,7 +511,7 @@ declare const Paginator: DefineComponent<PaginatorProps, PaginatorSlots, Paginat
 
 declare module 'vue' {
     export interface GlobalComponents {
-        Paginator: GlobalComponentConstructor<PaginatorProps, PaginatorSlots, PaginatorEmits>;
+        Paginator: DefineComponent<PaginatorProps, PaginatorSlots, PaginatorEmits>;
     }
 }
 

package/paginator/index.mjs

@@ -597,7 +597,7 @@ var script = {
         this.styleElement = document.createElement('style');
         this.styleElement.type = 'text/css';
         setAttribute(this.styleElement, 'nonce', (_this$$primevue = this.$primevue) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.config) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.csp) === null || _this$$primevue === void 0 ? void 0 : _this$$primevue.nonce);
-        document.head.appendChild(this.styleElement);
+        document.body.appendChild(this.styleElement);
         var innerHTML = '';
         var keys = Object.keys(this.template);
         var sortedBreakpoints = {};
@@ -702,6 +702,9 @@ var script = {
     },
     currentPage: function currentPage() {
       return this.pageCount > 0 ? this.page + 1 : 0;
+    },
+    last: function last() {
+      return Math.min(this.d_first + this.rows, this.totalRecords);
     }
   },
   components: {
@@ -737,7 +740,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "class": _ctx.cx('paginator', {
         key: key
       })
-    }, _ctx.ptm('root')), [_ctx.$slots.start ? (openBlock(), createElementBlock("div", mergeProps({
+    }, _ctx.ptm('root')), [_ctx.$slots.container ? renderSlot(_ctx.$slots, "container", {
+      key: 0,
+      first: $data.d_first + 1,
+      last: $options.last,
+      rows: $data.d_rows,
+      page: $options.page,
+      pageCount: $options.pageCount,
+      totalRecords: _ctx.totalRecords,
+      firstPageCallback: $options.changePageToFirst,
+      lastPageCallback: $options.changePageToLast,
+      prevPageCallback: $options.changePageToPrev,
+      nextPageCallback: $options.changePageToNext,
+      rowChangeCallback: $options.onRowChange
+    }) : (openBlock(), createElementBlock(Fragment, {
+      key: 1
+    }, [_ctx.$slots.start ? (openBlock(), createElementBlock("div", mergeProps({
       key: 0,
       "class": _ctx.cx('contentStart'),
       ref_for: true
@@ -851,7 +869,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ref_for: true
     }, _ctx.ptm('contentEnd')), [renderSlot(_ctx.$slots, "end", {
       state: $options.currentState
-    })], 16)) : createCommentVNode("", true)], 16);
+    })], 16)) : createCommentVNode("", true)], 64))], 16);
   }), 128))], 16)) : createCommentVNode("", true);
 }