Refactor #3965 - For ScrollPanel

components/lib/scrollpanel/BaseScrollPanel.vue

@@ -0,0 +1,94 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-scrollpanel-wrapper {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+    float: left;
+}
+
+.p-scrollpanel-content {
+    height: calc(100% + 18px);
+    width: calc(100% + 18px);
+    padding: 0 18px 18px 0;
+    position: relative;
+    overflow: scroll;
+    box-sizing: border-box;
+    scrollbar-width: none;
+}
+
+.p-scrollpanel-content::-webkit-scrollbar {
+    display: none;
+}
+
+.p-scrollpanel-bar {
+    position: relative;
+    background: #c1c1c1;
+    border-radius: 3px;
+    z-index: 2;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.25s linear;
+}
+
+.p-scrollpanel-bar-y {
+    width: 9px;
+    top: 0;
+}
+
+.p-scrollpanel-bar-x {
+    height: 9px;
+    bottom: 0;
+}
+
+.p-scrollpanel-hidden {
+    visibility: hidden;
+}
+
+.p-scrollpanel:hover .p-scrollpanel-bar,
+.p-scrollpanel:active .p-scrollpanel-bar {
+    opacity: 1;
+}
+
+.p-scrollpanel-grabbed {
+    user-select: none;
+}
+`;
+
+const classes = {
+    root: 'p-scrollpanel p-component',
+    wrapper: 'p-scrollpanel-wrapper',
+    content: 'p-scrollpanel-content',
+    barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
+    bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_scrollpanel_style', manual: true });
+
+export default {
+    name: 'BaseScrollPanel',
+    extends: BaseComponent,
+    props: {
+        step: {
+            type: Number,
+            default: 5
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>

components/lib/scrollpanel/ScrollPanel.d.ts

@@ -93,6 +93,11 @@ export interface ScrollPanelProps {
      * @type {ScrollPanelPassThroughOptions}
      */
     pt?: ScrollPanelPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/scrollpanel/ScrollPanel.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="p-scrollpanel p-component" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptm('root')">
-        <div class="p-scrollpanel-wrapper" v-bind="ptm('wrapper')">
+        <div :class="cx('wrapper')" v-bind="ptm('wrapper')">
-            <div ref="content" class="p-scrollpanel-content" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
+            <div ref="content" :class="cx('content')" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
                 <slot></slot>
             </div>
         </div>
         <div
             ref="xBar"
-            class="p-scrollpanel-bar p-scrollpanel-bar-x"
+            :class="cx('barx')"
             tabindex="0"
             role="scrollbar"
             aria-orientation="horizontal"
@@ -21,7 +21,7 @@
         ></div>
         <div
             ref="yBar"
-            class="p-scrollpanel-bar p-scrollpanel-bar-y"
+            :class="cx('bary')"
             tabindex="0"
             role="scrollbar"
             aria-orientation="vertical"
@@ -36,18 +36,12 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseScrollPanel from './BaseScrollPanel.vue';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ScrollPanel',
-    extends: BaseComponent,
+    extends: BaseScrollPanel,
-    props: {
-        step: {
-            type: Number,
-            default: 5
-        }
-    },
     initialized: false,
     documentResizeListener: null,
     documentMouseMoveListener: null,
@@ -123,16 +117,16 @@ export default {
 
             this.frame = this.requestAnimationFrame(() => {
                 if (this.scrollXRatio >= 1) {
-                    DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                    !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
                 } else {
-                    DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                    !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
                     this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
                 }
 
                 if (this.scrollYRatio >= 1) {
-                    DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                    !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
                 } else {
-                    DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                    !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
                     this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
                 }
             });
@@ -141,8 +135,8 @@ export default {
             this.isYBarClicked = true;
             this.$refs.yBar.focus();
             this.lastPageY = e.pageY;
-            DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
+            !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
-            DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+            !this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
 
             this.bindDocumentMouseListeners();
             e.preventDefault();
@@ -151,8 +145,8 @@ export default {
             this.isXBarClicked = true;
             this.$refs.xBar.focus();
             this.lastPageX = e.pageX;
-            DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
+            !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
-            DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+            !this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
 
             this.bindDocumentMouseListeners();
             e.preventDefault();
@@ -280,9 +274,9 @@ export default {
             }
         },
         onDocumentMouseUp() {
-            DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
+            !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
-            DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
+            !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
-            DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
+            !this.isUnstyled && DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
 
             this.unbindDocumentMouseListeners();
             this.isXBarClicked = false;
@@ -351,61 +345,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-scrollpanel-wrapper {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    z-index: 1;
-    float: left;
-}
-
-.p-scrollpanel-content {
-    height: calc(100% + 18px);
-    width: calc(100% + 18px);
-    padding: 0 18px 18px 0;
-    position: relative;
-    overflow: scroll;
-    box-sizing: border-box;
-    scrollbar-width: none;
-}
-
-.p-scrollpanel-content::-webkit-scrollbar {
-    display: none;
-}
-
-.p-scrollpanel-bar {
-    position: relative;
-    background: #c1c1c1;
-    border-radius: 3px;
-    z-index: 2;
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.25s linear;
-}
-
-.p-scrollpanel-bar-y {
-    width: 9px;
-    top: 0;
-}
-
-.p-scrollpanel-bar-x {
-    height: 9px;
-    bottom: 0;
-}
-
-.p-scrollpanel-hidden {
-    visibility: hidden;
-}
-
-.p-scrollpanel:hover .p-scrollpanel-bar,
-.p-scrollpanel:active .p-scrollpanel-bar {
-    opacity: 1;
-}
-
-.p-scrollpanel-grabbed {
-    user-select: none;
-}
-</style>