Refactor #3924 - For VirtualScroller

api-generator/components/virtualscroller.js

@@ -101,6 +101,12 @@ const VirtualScrollerProps = [
         type: 'number|string',
         default: '0',
         description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

@@ -48,6 +48,7 @@ import { TerminalPassThroughOptions } from '../terminal';
 import { TieredMenuPassThroughOptions } from '../tieredmenu';
 import { ToastPassThroughOptions } from '../toast';
 import { ToolbarPassThroughOptions } from '../toolbar';
+import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
 
 interface PrimeVueConfiguration {
     ripple?: boolean;
@@ -117,6 +118,7 @@ interface PrimeVuePTOptions {
     tieredmenu?: TieredMenuPassThroughOptions;
     toast?: ToastPassThroughOptions;
     toolbar?: ToolbarPassThroughOptions;
+    virtualscroller?: VirtualScrollerPassThroughOptions;
 }
 
 interface PrimeVueLocaleAriaOptions {

components/lib/virtualscroller/VirtualScroller.d.ts

@@ -10,6 +10,16 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type VirtualScrollerPassThroughOptionType = VirtualScrollerPassThroughAttributes | ((options: VirtualScrollerPassThroughMethodOptions) => VirtualScrollerPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface VirtualScrollerPassThroughMethodOptions {
+    props: VirtualScrollerProps;
+    state: VirtualScrollerState;
+}
+
 /**
  * Custom scroll index change event.
  * @see {@link VirtualScrollerEmits['scroll-index-change']}
@@ -92,6 +102,87 @@ export interface VirtualScrollerItemOptions {
     [key: string]: any;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link VirtualScrollerProps.pt}
+ */
+export interface VirtualScrollerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the spacer's DOM element.
+     */
+    spacer?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loader's DOM element.
+     */
+    loader?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: VirtualScrollerPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface VirtualScrollerPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in VirtualScroller component.
+ */
+export interface VirtualScrollerState {
+    /**
+     * First index of the new data range to be loaded as a number.
+     */
+    first: number;
+    /**
+     * Last index of the new data range to be loaded as a number.
+     */
+    last: number;
+    /**
+     * Index of the first item as a number.
+     */
+    page: number;
+    /**
+     * Visible item count in the viewport as a number.
+     */
+    numItemsInViewport: number;
+    /**
+     * Lastest scroll position as a number.
+     */
+    lastScrollPos: number;
+    /**
+     * Additional elements to add to the DOM outside of the view as a number.
+     */
+    d_numToleratedItems: number;
+    /**
+     * Current loading state as a boolean.
+     * @defaultValue false
+     */
+    d_loading: number;
+    /**
+     * Loadable items array.
+     */
+    loaderArr: any[];
+    /**
+     * The style of spacer element.
+     */
+    spacerStyle: any;
+    /**
+     * The style of content element.
+     */
+    contentStyle: any;
+}
+
 /**
  * Custom virtualscroller loader options
  * @see VirtualScrollerItemOptions
@@ -169,6 +260,7 @@ export interface VirtualScrollerProps {
     loaderDisabled?: boolean | undefined;
     /**
      * Whether to show loader.
+     * @defaultValue false
      */
     showLoader?: boolean | undefined;
     /**
@@ -211,6 +303,11 @@ export interface VirtualScrollerProps {
      * @defaultValue false
      */
     autoSize?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {VirtualScrollerPassThroughOptions}
+     */
+    pt?: VirtualScrollerPassThroughOptions;
 }
 
 /**

components/lib/virtualscroller/VirtualScroller.vue

@@ -1,6 +1,6 @@
 <template>
     <template v-if="!disabled">
-        <div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll">
+        <div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll" v-bind="ptm('root')">
             <slot
                 name="content"
                 :styleClass="contentClass"
@@ -18,21 +18,21 @@
                 :horizontal="isHorizontal()"
                 :both="isBoth()"
             >
-                <div :ref="contentRef" :class="contentClass" :style="contentStyle">
+                <div :ref="contentRef" :class="contentClass" :style="contentStyle" v-bind="ptm('content')">
                     <template v-for="(item, index) of loadedItems" :key="index">
                         <slot name="item" :item="item" :options="getOptions(index)"></slot>
                     </template>
                 </div>
             </slot>
-            <div v-if="showSpacer" class="p-virtualscroller-spacer" :style="spacerStyle"></div>
+            <div v-if="showSpacer" class="p-virtualscroller-spacer" :style="spacerStyle" v-bind="ptm('spacer')"></div>
-            <div v-if="!loaderDisabled && showLoader && d_loading" :class="loaderClass">
+            <div v-if="!loaderDisabled && showLoader && d_loading" :class="loaderClass" v-bind="ptm('loader')">
                 <template v-if="$slots && $slots.loader">
                     <template v-for="(_, index) of loaderArr" :key="index">
                         <slot name="loader" :options="getLoaderOptions(index, isBoth() && { numCols: d_numItemsInViewport.cols })"></slot>
                     </template>
                 </template>
                 <slot name="loadingicon">
-                    <SpinnerIcon spin class="p-virtualscroller-loading-icon" />
+                    <SpinnerIcon spin class="p-virtualscroller-loading-icon" v-bind="ptm('loadingIcon')" />
                 </slot>
             </div>
         </div>
@@ -44,11 +44,13 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import SpinnerIcon from 'primevue/icons/spinner';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'VirtualScroller',
+    extends: BaseComponent,
     emits: ['update:numToleratedItems', 'scroll', 'scroll-index-change', 'lazy-load'],
     props: {
         id: {