Refactor #5682 - For Paginator, Toast

components/lib/paginator/Paginator.d.ts

@@ -309,21 +309,89 @@ export interface PaginatorSlots {
         state: PageState;
     }): VNode[];
     /**
+     * @deprecated since v4.0. Use 'firsticon' slot instead.
      * Custom first page link icon template.
+     * @param {Object} scope - firstpagelinkicon's params.
      */
-    firstpagelinkicon(): VNode[];
+    firstpagelinkicon(scope: {
+        /**
+         * Style class of the jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom first page link icon template.
+     * @param {Object} scope - firsticon's params.
+     */
+    firsticon(scope: {
+        /**
+         * Style class of the jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * @deprecated since v4.0. Use 'previcon' slot instead.
+     * Custom previous page link icon template.
+     * @param {Object} scope - prevpagelinkicon's params.
+     */
+    prevpagelinkicon(scope: {
+        /**
+         * Style class of the jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom previous page link icon template.
+     * @param {Object} scope - previcon's params.
      */
-    prevpagelinkicon(): VNode[];
+    previcon(scope: {
+        /**
+         * Style class of the jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * @deprecated since v4.0. Use 'nexticon' slot instead.
+     * Custom finextrst page link icon template.
+     * @param {Object} scope - nextpagelinkicon's params.
+     */
+    nextpagelinkicon(scope: {
+        /**
+         * Style class of the jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom finextrst page link icon template.
+     * @param {Object} scope - nexticon's params.
      */
-    nextpagelinkicon(): VNode[];
+    nexticon(scope: {
+        /**
+         * Style class of the jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * @deprecated since v4.0. Use 'lasticon' slot instead.
+     * Custom last page link icon template.
+     * @param {Object} scope - lastpagelinkicon's params.
+     */
+    lastpagelinkicon(scope: {
+        /**
+         * Style class of the jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom last page link icon template.
+     * @param {Object} scope - lasticon's params.
      */
-    lastpagelinkicon(): VNode[];
+    lasticon(scope: {
+        /**
+         * Style class of the jumptopagedropdown icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom rowsperpagedropdownicon template.
      * @param {Object} scope - rowsperpagedropdownicon's params.

components/lib/paginator/Paginator.vue

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

components/lib/toast/Toast.d.ts

@@ -278,10 +278,21 @@ export interface ToastSlots {
         message: any;
     }): VNode[];
     /**
-     * Custom icon template.
+     * @deprecated since v4.0. Use 'messageicon' slot instead.
-     * @param {Object} scope - icon slot's params.
+     * Custom message icon template.
+     * @param {Object} scope - message icon slot's params.
      */
     icon(scope: {
+        /**
+         * Style class of the message icon
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom message icon template.
+     * @param {Object} scope - message icon slot's params.
+     */
+    messageicon(scope: {
         /**
          * Style class of the icon
          */

components/lib/toast/ToastMessage.vue

@@ -3,7 +3,7 @@
         <component v-if="templates.container" :is="templates.container" :message="message" :onClose="onCloseClick" :closeCallback="onCloseClick" />
         <div v-else :class="[cx('messageContent'), message.contentStyleClass]" v-bind="ptm('messageContent')">
             <template v-if="!templates.message">
-                <component :is="templates.icon ? templates.icon : iconComponent && iconComponent.name ? iconComponent : 'span'" :class="cx('messageIcon')" v-bind="ptm('messageIcon')" />
+                <component :is="templates.messageicon ? templates.messageicon : templates.icon ? templates.icon : iconComponent && iconComponent.name ? iconComponent : 'span'" :class="cx('messageIcon')" v-bind="ptm('messageIcon')" />
                 <div :class="cx('messageText')" v-bind="ptm('messageText')">
                     <span :class="cx('summary')" v-bind="ptm('summary')">{{ message.summary }}</span>
                     <div :class="cx('detail')" v-bind="ptm('detail')">{{ message.detail }}</div>