vxe-pc-ui 3.20.8 → 3.20.10

package/es/scrollbar/src/scrollbar.js

@@ -1,11 +1,10 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { VxeUI } from '../../ui';
+import { VxeUI, globalMixins } from '../../ui';
 import { toCssUnit } from '../../ui/src/dom';
 import { getDefaultConfig } from '../../ui/src/utils';
 import VxeLoadingComponent from '../../loading';
-const { getConfig, createEvent, domUtils, scrollbarUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI;
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils;
+const { getConfig, createEvent, domUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI;
 function createReactData() {
     return {
         yThumbHeight: 0,
@@ -14,7 +13,7 @@ function createReactData() {
 }
 function createInternalData() {
     return {
-        // resizeObserver: undefined,
+        // scrollObserver: undefined,
         // isThumbDrag: false,
         thumbDragOffset: 0,
         yThumbTop: 0,
@@ -25,6 +24,10 @@ function createInternalData() {
 }
 export default {
     name: 'VxeScrollbar',
+    mixins: [
+        globalMixins.sizeMixin,
+        globalMixins.initVScrollbarMixin
+    ],
     props: {
         id: [String, Number],
         viewId: [String, Number],
@@ -77,10 +80,22 @@ export default {
             type: String,
             default: () => getConfig().scrollbar.viewInnerClassName
         },
+        size: {
+            type: String,
+            default: () => getConfig().scrollbar.size || getConfig().size
+        },
+        /**
+         * 已废弃
+         * @deprecated
+         */
         autoResize: {
             type: Boolean,
             default: () => getConfig().scrollbar.autoResize
         },
+        /**
+         * 已废弃
+         * @deprecated
+         */
         syncResize: [Boolean, String, Number]
     },
     data() {
@@ -89,8 +104,7 @@ export default {
         return Object.assign(Object.assign({}, {}), { xID,
             reactData, reFlag: 0 });
     },
-    computed: {
-        computeWrapperStyle() {
+    computed: Object.assign(Object.assign({}, {}), { computeWrapperStyle() {
             const $xeScrollbar = this;
             const props = $xeScrollbar;
             const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props;
@@ -165,6 +179,7 @@ export default {
             const reactData = $xeScrollbar.reactData;
             const { native, theme, className, padding } = props;
             const { yThumbHeight, xThumbWidth } = reactData;
+            const vSize = $xeScrollbar.computeSize;
             const xToTop = $xeScrollbar.computeXToTop;
             const yToLeft = $xeScrollbar.computeYToLeft;
             const xVisible = $xeScrollbar.computeXVisible;
@@ -173,6 +188,7 @@ export default {
             const yAutoHide = $xeScrollbar.computeYAutoHide;
             return domUtils.buildClass([
                 'vxe-scrollbar',
+                vSize ? `size--${vSize}` : '',
                 theme ? `theme--${theme}` : '',
                 `ov-x--${xVisible === false ? 'hidden' : 'visible'}`,
                 `ov-y--${yVisible === false ? 'hidden' : 'visible'}`,
@@ -225,8 +241,7 @@ export default {
             const $xeScrollbar = this;
             const yOpts = $xeScrollbar.computeYOpts;
             return yOpts.position === 'left';
-        }
-    },
+        } }),
     methods: {
         //
         // Method
@@ -235,12 +250,12 @@ export default {
             const $xeScrollbar = this;
             $xeScrollbar.$emit(type, createEvent(evnt, { $scrollbar: $xeScrollbar }, params));
         },
-        getViewElem() {
+        getScrollViewElem() {
             const $xeScrollbar = this;
             const viewEl = $xeScrollbar.$refs.refViewElem;
             return viewEl || null;
         },
-        getViewInnerElem() {
+        getScrollViewInnerElem() {
             const $xeScrollbar = this;
             const viewInnerEl = $xeScrollbar.$refs.refViewInnerElem;
             return viewInnerEl || null;
@@ -308,60 +323,6 @@ export default {
             $xeScrollbar.updateThumbOffset();
             return $xeScrollbar.$nextTick();
         },
-        updateThumbSize() {
-            const $xeScrollbar = this;
-            const reactData = $xeScrollbar.reactData;
-            const viewEl = $xeScrollbar.$refs.refViewElem;
-            if (!viewEl) {
-                return;
-            }
-            if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                return;
-            }
-            const trackXEl = $xeScrollbar.$refs.refTrackXElem;
-            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-            const thumbXElem = $xeScrollbar.$refs.refThumbXElem;
-            if (thumbXElem) {
-                thumbXElem.style.width = xThumbWidth + 'px';
-            }
-            reactData.xThumbWidth = xThumbWidth;
-            const trackYEl = $xeScrollbar.$refs.refTrackYElem;
-            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-            const thumbYElem = $xeScrollbar.$refs.refThumbYElem;
-            if (thumbYElem) {
-                thumbYElem.style.height = yThumbHeight + 'px';
-            }
-            reactData.yThumbHeight = yThumbHeight;
-        },
-        updateThumbOffset() {
-            const $xeScrollbar = this;
-            const reactData = $xeScrollbar.reactData;
-            const internalData = $xeScrollbar.internalData;
-            const viewEl = $xeScrollbar.$refs.refViewElem;
-            if (!viewEl) {
-                return;
-                if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                    return;
-                }
-            }
-            const { xThumbWidth, yThumbHeight } = reactData;
-            const trackXEl = $xeScrollbar.$refs.refTrackXElem;
-            const thumbXElem = $xeScrollbar.$refs.refThumbXElem;
-            const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
-            internalData.xThumbLeft = xThumbLeft;
-            if (thumbXElem && xThumbWidth) {
-                thumbXElem.style.width = xThumbWidth + 'px';
-                thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
-            }
-            const trackYEl = $xeScrollbar.$refs.refTrackYElem;
-            const thumbYElem = $xeScrollbar.$refs.refThumbYElem;
-            const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
-            internalData.yThumbTop = yThumbTop;
-            if (thumbYElem && yThumbHeight) {
-                thumbYElem.style.height = yThumbHeight + 'px';
-                thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
-            }
-        },
         scrollEvent(evnt) {
             const $xeScrollbar = this;
             const reactData = $xeScrollbar.reactData;
@@ -439,123 +400,6 @@ export default {
                 scrollWidth: scrollWidth
             }, evnt);
         },
-        clickTrackXEvent(evnt) {
-            const $xeScrollbar = this;
-            const reactData = $xeScrollbar.reactData;
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const viewEl = $xeScrollbar.$refs.refViewElem;
-            if (!viewEl) {
-                return;
-            }
-            const { xThumbWidth } = reactData;
-            const trackRect = trackEl.getBoundingClientRect();
-            viewEl.scrollTo({
-                left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-                behavior: 'auto'
-            });
-        },
-        clickTrackYEvent(evnt) {
-            const $xeScrollbar = this;
-            const reactData = $xeScrollbar.reactData;
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const viewEl = $xeScrollbar.$refs.refViewElem;
-            if (!viewEl) {
-                return;
-            }
-            const { yThumbHeight } = reactData;
-            const trackRect = trackEl.getBoundingClientRect();
-            viewEl.scrollTo({
-                top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-                behavior: 'auto'
-            });
-        },
-        pointerdownThumbXEvent(evnt) {
-            const $xeScrollbar = this;
-            const reactData = $xeScrollbar.reactData;
-            const internalData = $xeScrollbar.internalData;
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const viewEl = $xeScrollbar.$refs.refViewElem;
-            if (!viewEl) {
-                return;
-            }
-            const { xThumbWidth } = reactData;
-            const trackEl = thumbEl.parentElement;
-            const trackRect = trackEl.getBoundingClientRect();
-            const pointerPosition = evnt.clientX - trackRect.left;
-            // 记录 thumb 的偏移
-            const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-            internalData.thumbDragOffset = pointerPosition - thumbOffset;
-        },
-        pointermoveThumbXEvent(evnt) {
-            const $xeScrollbar = this;
-            const reactData = $xeScrollbar.reactData;
-            const internalData = $xeScrollbar.internalData;
-            const { isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = $xeScrollbar.$refs.refViewElem;
-                if (!viewEl) {
-                    return;
-                }
-                const { xThumbWidth } = reactData;
-                const thumbEl = evnt.currentTarget;
-                const trackEl = thumbEl.parentElement;
-                const trackRect = trackEl.getBoundingClientRect();
-                // 更新偏移
-                viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-            }
-        },
-        cleatPointerThumbEvent(evnt) {
-            const $xeScrollbar = this;
-            const internalData = $xeScrollbar.internalData;
-            const thumbEl = evnt.currentTarget;
-            thumbEl.releasePointerCapture(evnt.pointerId);
-            internalData.isThumbDrag = false;
-        },
-        pointerdownThumbYEvent(evnt) {
-            const $xeScrollbar = this;
-            const reactData = $xeScrollbar.reactData;
-            const internalData = $xeScrollbar.internalData;
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const viewEl = $xeScrollbar.$refs.refViewElem;
-            if (!viewEl) {
-                return;
-            }
-            const { yThumbHeight } = reactData;
-            const trackEl = thumbEl.parentElement;
-            const trackRect = trackEl.getBoundingClientRect();
-            const pointerPosition = evnt.clientY - trackRect.top;
-            // 记录 thumb 的偏移
-            const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-            internalData.thumbDragOffset = pointerPosition - thumbOffset;
-        },
-        pointermoveThumbYEvent(evnt) {
-            const $xeScrollbar = this;
-            const reactData = $xeScrollbar.reactData;
-            const internalData = $xeScrollbar.internalData;
-            const { isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = $xeScrollbar.$refs.refViewElem;
-                if (!viewEl) {
-                    return;
-                }
-                const { yThumbHeight } = reactData;
-                const thumbEl = evnt.currentTarget;
-                const trackEl = thumbEl.parentElement;
-                const trackRect = trackEl.getBoundingClientRect();
-                // 更新偏移
-                viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-            }
-        },
         //
         // Render
         //
@@ -717,18 +561,18 @@ export default {
         const viewEl = $xeScrollbar.$refs.refViewElem;
         const viewInnerEl = $xeScrollbar.$refs.refViewInnerElem;
         if (autoResize) {
-            const resizeObserver = globalResize.create(() => {
+            const scrollObserver = globalResize.create(() => {
                 if (props.autoResize) {
                     $xeScrollbar.reFlag++;
                 }
             });
             if (viewEl) {
-                resizeObserver.observe(viewEl);
+                scrollObserver.observe(viewEl);
             }
             if (viewInnerEl) {
-                resizeObserver.observe(viewInnerEl);
+                scrollObserver.observe(viewInnerEl);
             }
-            internalData.resizeObserver = resizeObserver;
+            internalData.scrollObserver = scrollObserver;
         }
         $xeScrollbar.reFlag++;
         globalEvents.on($xeScrollbar, 'resize', () => {
@@ -738,9 +582,9 @@ export default {
     beforeDestroy() {
         const $xeScrollbar = this;
         const internalData = $xeScrollbar.internalData;
-        const { resizeObserver } = internalData;
-        if (resizeObserver) {
-            resizeObserver.disconnect();
+        const { scrollObserver } = internalData;
+        if (scrollObserver) {
+            scrollObserver.disconnect();
         }
         globalEvents.off($xeScrollbar, 'resize');
     },