Refactor #3797 - ScrollPanel updates

primefaces · Mar 28, 2023 · 094245e · 094245e
1 parent f5f9280
commit 094245e
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 3 deletions.
diff --git a/api-generator/components/scrollpanel.js b/api-generator/components/scrollpanel.js
@@ -4,6 +4,12 @@ const ScrollPanelProps = [
         type: 'number',
         default: '5',
         description: 'Step factor to scroll the content while pressing the arrow keys.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

diff --git a/components/lib/scrollpanel/ScrollPanel.d.ts b/components/lib/scrollpanel/ScrollPanel.d.ts
@@ -10,6 +10,75 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ScrollPanelPassThroughOptionType = ScrollPanelPassThroughAttributes | ((options: ScrollPanelPassThroughMethodOptions) => ScrollPanelPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ScrollPanelPassThroughMethodOptions {
+    props: ScrollPanelProps;
+    state: ScrollPanelState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ScrollPanelProps.pt}
+ */
+export interface ScrollPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the horizontal panel's DOM element.
+     */
+    barx?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the vertical panel's DOM element.
+     */
+    bary?: ScrollPanelPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ScrollPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Panel component.
+ */
+export interface ScrollPanelState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current scrollpanel orientation.
+     * @defaultValue vertical
+     */
+    orientation: string;
+    /**
+     * Latest scroll top position.
+     * @defaultValue 0
+     */
+    lastScrollTop: number;
+    /**
+     * Latest scroll left position.
+     * @defaultValue 0
+     */
+    lastScrollLeft: number;
+}
+
 /**
  * Defines valid properties in ScrollPanel component.
  */
@@ -19,6 +88,11 @@ export interface ScrollPanelProps {
      * @defaultValue 5
      */
     step?: number | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ScrollPanelPassThroughOptions}
+     */
+    pt?: ScrollPanelPassThroughOptions;
 }
 
 /**

diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="p-scrollpanel p-component">
-        <div class="p-scrollpanel-wrapper">
-            <div ref="content" class="p-scrollpanel-content" @scroll="onScroll" @mouseenter="moveBar">
+    <div class="p-scrollpanel p-component" v-bind="ptm('root')">
+        <div class="p-scrollpanel-wrapper" v-bind="ptm('wrapper')">
+            <div ref="content" class="p-scrollpanel-content" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
                 <slot></slot>
             </div>
         </div>
@@ -17,6 +17,7 @@
             @keyup="onKeyUp"
             @focus="onFocus"
             @blur="onBlur"
+            v-bind="ptm('barx')"
         ></div>
         <div
             ref="yBar"
@@ -29,15 +30,18 @@
             @keydown="onKeyDown($event)"
             @keyup="onKeyUp"
             @focus="onFocus"
+            v-bind="ptm('bary')"
         ></div>
     </div>
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ScrollPanel',
+    extends: ComponentBase,
     props: {
         step: {
             type: Number,