vxe-pc-ui 4.18.21 → 4.18.23

package/es/scrollbar/src/scrollbar.js

@@ -0,0 +1,520 @@
+import { ref, h, reactive, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { VxeUI } from '../../ui';
+import { toCssUnit } from '../../ui/src/dom';
+import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from './util';
+import VxeLoadingComponent from '../../loading';
+const { getConfig, createEvent, domUtils, globalResize, renderEmptyElement } = VxeUI;
+function createReactData() {
+    return {
+        yThumbHeight: 0,
+        xThumbWidth: 0
+    };
+}
+function createInternalData() {
+    return {
+        // resizeObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
+        lastScrollTop: 0,
+        lastScrollLeft: 0
+    };
+}
+export default defineVxeComponent({
+    name: 'VxeScrollbar',
+    props: {
+        width: [String, Number],
+        height: [String, Number],
+        minWidth: [String, Number],
+        minHeight: [String, Number],
+        maxWidth: [String, Number],
+        maxHeight: [String, Number],
+        loading: Boolean,
+        native: {
+            type: Boolean,
+            default: () => getConfig().scrollbar.native
+        },
+        xConfig: Object,
+        yConfig: Object,
+        className: String,
+        viewClassName: String,
+        autoResize: {
+            type: Boolean,
+            default: () => getConfig().scrollbar.autoResize
+        },
+        syncResize: [Boolean, String, Number]
+    },
+    emits: [
+        'scroll',
+        'scroll-boundary'
+    ],
+    setup(props, context) {
+        const { emit, slots } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const refViewElem = ref();
+        const refViewInnerElem = ref();
+        const refTrackXElem = ref();
+        const refTrackYElem = ref();
+        const refThumbXElem = ref();
+        const refThumbYElem = ref();
+        const reactData = reactive(createReactData());
+        const internalData = createInternalData();
+        const computeWrapperStyle = computed(() => {
+            const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props;
+            const xOpts = computeXOpts.value;
+            const yOpts = computeYOpts.value;
+            const stys = {};
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            if (height) {
+                stys.height = toCssUnit(height);
+            }
+            if (minWidth) {
+                stys.minWidth = toCssUnit(minWidth);
+            }
+            if (minHeight) {
+                stys.minHeight = toCssUnit(minHeight);
+            }
+            if (maxWidth) {
+                stys.maxWidth = toCssUnit(maxWidth);
+            }
+            if (maxHeight) {
+                stys.maxHeight = toCssUnit(maxHeight);
+            }
+            if (yOpts.width) {
+                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(yOpts.width);
+            }
+            if (xOpts.height) {
+                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(xOpts.height);
+            }
+            return stys;
+        });
+        const computeWrapperClss = computed(() => {
+            const { native, className } = props;
+            const xOpts = computeXOpts.value;
+            const yOpts = computeYOpts.value;
+            return domUtils.buildClass([
+                'vxe-scrollbar',
+                `ov-x--${xOpts.visible || 'visible'}`,
+                `ov-y--${yOpts.visible || 'visible'}`,
+                native ? 'is--native' : 'is--virtual',
+                className
+            ], {
+                'ov-x--auto-hide': xOpts.autoHide,
+                'ov-y--auto-hide': yOpts.autoHide
+            });
+        });
+        const computeViewClss = computed(() => {
+            const { viewClassName } = props;
+            return domUtils.buildClass([
+                'vxe-scrollbar--view',
+                viewClassName
+            ]);
+        });
+        const computeXOpts = computed(() => {
+            return Object.assign({}, getConfig().scrollbar.xConfig, props.xConfig);
+        });
+        const computeYOpts = computed(() => {
+            return Object.assign({}, getConfig().scrollbar.yConfig, props.yConfig);
+        });
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {};
+        const $xeScrollbar = {
+            xID,
+            props,
+            context,
+            reactData,
+            internalData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $scrollbar: $xeScrollbar }, params));
+        };
+        const scrollbarMethods = {
+            dispatchEvent,
+            scrollTo(left, top) {
+                const viewEl = refViewElem.value;
+                if (viewEl) {
+                    if (XEUtils.isNumber(left)) {
+                        viewEl.scrollTo(left, top || 0);
+                    }
+                    else {
+                        viewEl.scrollTo(left);
+                    }
+                }
+            },
+            scrollIntoView() {
+                const viewEl = refViewElem.value;
+                if (viewEl) {
+                    viewEl.scrollIntoView();
+                }
+            },
+            recalculate() {
+                updateThumbSize();
+                updateThumbOffset();
+                return nextTick();
+            }
+        };
+        const updateThumbSize = () => {
+            const viewEl = refViewElem.value;
+            if (!viewEl) {
+                return;
+            }
+            const trackXEl = refTrackXElem.value;
+            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+            const thumbXElem = refThumbXElem.value;
+            if (thumbXElem) {
+                thumbXElem.style.width = xThumbWidth + 'px';
+            }
+            reactData.xThumbWidth = xThumbWidth;
+            const trackYEl = refTrackYElem.value;
+            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+            const thumbYElem = refThumbYElem.value;
+            if (thumbYElem) {
+                thumbYElem.style.height = yThumbHeight + 'px';
+            }
+            reactData.yThumbHeight = yThumbHeight;
+        };
+        const updateThumbOffset = () => {
+            const viewEl = refViewElem.value;
+            if (!viewEl) {
+                return;
+            }
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const trackXEl = refTrackXElem.value;
+            const thumbXElem = refThumbXElem.value;
+            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 = refTrackYElem.value;
+            const thumbYElem = refThumbYElem.value;
+            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)`;
+            }
+        };
+        const scrollEvent = (evnt) => {
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const { lastScrollTop, lastScrollLeft } = internalData;
+            const xOpts = computeXOpts.value;
+            const yOpts = computeYOpts.value;
+            const viewEl = evnt.currentTarget;
+            const { scrollTop, scrollLeft, clientWidth, clientHeight, scrollHeight, scrollWidth } = viewEl;
+            let direction = '';
+            let isTopBoundary = false;
+            let isBottomBoundary = false;
+            let isLeftBoundary = false;
+            let isRightBoundary = false;
+            if (lastScrollTop !== scrollTop) {
+                const yThreshold = XEUtils.toNumber(yOpts.threshold) || 1;
+                if (lastScrollTop < scrollTop) {
+                    direction = 'bottom';
+                    if (yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight - yThreshold) {
+                        isBottomBoundary = true;
+                    }
+                }
+                else {
+                    direction = 'top';
+                    if (yThumbHeight > 0 && scrollTop <= yThreshold) {
+                        isTopBoundary = true;
+                    }
+                }
+            }
+            if (lastScrollLeft !== scrollLeft) {
+                const xThreshold = XEUtils.toNumber(xOpts.threshold) || 1;
+                if (lastScrollLeft < scrollLeft) {
+                    direction = 'right';
+                    if (xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth - xThreshold) {
+                        isRightBoundary = true;
+                    }
+                }
+                else {
+                    direction = 'left';
+                    if (xThumbWidth > 0 && scrollLeft <= xThreshold) {
+                        isLeftBoundary = true;
+                    }
+                }
+            }
+            updateThumbOffset();
+            internalData.lastScrollTop = scrollTop;
+            internalData.lastScrollLeft = scrollLeft;
+            if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
+                dispatchEvent('scroll-boundary', {
+                    direction: direction,
+                    isTop: isTopBoundary,
+                    isBottom: isBottomBoundary,
+                    isLeft: isLeftBoundary,
+                    isRight: isRightBoundary,
+                    scrollTop: scrollTop,
+                    scrollLeft: scrollLeft,
+                    clientWidth: clientWidth,
+                    clientHeight: clientHeight,
+                    scrollHeight: scrollHeight,
+                    scrollWidth: scrollWidth
+                }, evnt);
+            }
+            dispatchEvent('scroll', {
+                direction: direction,
+                isTop: yThumbHeight > 0 && scrollTop <= 0,
+                isBottom: yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight,
+                isLeft: xThumbWidth > 0 && scrollLeft <= 0,
+                isRight: xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth,
+                scrollTop: scrollTop,
+                scrollLeft: scrollLeft,
+                clientWidth: clientWidth,
+                clientHeight: clientHeight,
+                scrollHeight: scrollHeight,
+                scrollWidth: scrollWidth
+            }, evnt);
+        };
+        const clickTrackXEvent = (evnt) => {
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = refViewElem.value;
+            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'
+            });
+        };
+        const clickTrackYEvent = (evnt) => {
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = refViewElem.value;
+            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'
+            });
+        };
+        const pointerdownThumbXEvent = (evnt) => {
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = refViewElem.value;
+            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;
+        };
+        const pointermoveThumbXEvent = (evnt) => {
+            const thumbEl = evnt.currentTarget;
+            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+                return;
+            }
+            const { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = refViewElem.value;
+                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);
+            }
+        };
+        const cleatPointerThumbEvent = (evnt) => {
+            const thumbEl = evnt.currentTarget;
+            thumbEl.releasePointerCapture(evnt.pointerId);
+            internalData.isThumbDrag = false;
+        };
+        const pointerdownThumbYEvent = (evnt) => {
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = refViewElem.value;
+            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;
+        };
+        const pointermoveThumbYEvent = (evnt) => {
+            const thumbEl = evnt.currentTarget;
+            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+                return;
+            }
+            const { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = refViewElem.value;
+                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);
+            }
+        };
+        const scrollbarPrivateMethods = {};
+        Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods);
+        const renderVN = () => {
+            const { native, loading, autoResize } = props;
+            const wrapperStyle = computeWrapperStyle.value;
+            const wrapperClss = computeWrapperClss.value;
+            const viewClss = computeViewClss.value;
+            const xOpts = computeXOpts.value;
+            const yOpts = computeYOpts.value;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: refElem,
+                class: wrapperClss,
+                style: wrapperStyle
+            }, [
+                h('div', {
+                    ref: refViewElem,
+                    class: viewClss,
+                    onScroll: scrollEvent
+                }, autoResize
+                    ? [
+                        h('div', {
+                            key: 'vi',
+                            ref: refViewInnerElem,
+                            class: 'vxe-scrollbar--view-inner'
+                        }, defaultSlot ? defaultSlot({}) : [])
+                    ]
+                    : defaultSlot ? defaultSlot({}) : []),
+                native || xOpts.visible === 'hidden'
+                    ? renderEmptyElement($xeScrollbar)
+                    : h('div', {
+                        ref: refTrackXElem,
+                        class: 'vxe-scrollbar--track-x',
+                        onClick: clickTrackXEvent
+                    }, [
+                        h('div', {
+                            ref: refThumbXElem,
+                            class: 'vxe-scrollbar--thumb-x',
+                            onPointerdown: pointerdownThumbXEvent,
+                            onPointermove: pointermoveThumbXEvent,
+                            onPointerup: cleatPointerThumbEvent,
+                            onPointercancel: cleatPointerThumbEvent,
+                            onLostpointercapture: cleatPointerThumbEvent
+                        })
+                    ]),
+                native || yOpts.visible === 'hidden'
+                    ? renderEmptyElement($xeScrollbar)
+                    : h('div', {
+                        ref: refTrackYElem,
+                        class: 'vxe-scrollbar--track-y',
+                        onClick: clickTrackYEvent
+                    }, [
+                        h('div', {
+                            ref: refThumbYElem,
+                            class: 'vxe-scrollbar--thumb-y',
+                            onPointerdown: pointerdownThumbYEvent,
+                            onPointermove: pointermoveThumbYEvent,
+                            onPointerup: cleatPointerThumbEvent,
+                            onPointercancel: cleatPointerThumbEvent,
+                            onLostpointercapture: cleatPointerThumbEvent
+                        })
+                    ]),
+                h(VxeLoadingComponent, {
+                    class: 'vxe-scrollbar--loading',
+                    modelValue: loading
+                })
+            ]);
+        };
+        const reFlag = ref(0);
+        watch(() => props.height, () => {
+            reFlag.value++;
+        });
+        watch(() => props.width, () => {
+            reFlag.value++;
+        });
+        watch(() => props.minHeight, () => {
+            reFlag.value++;
+        });
+        watch(() => props.minWidth, () => {
+            reFlag.value++;
+        });
+        watch(() => props.maxHeight, () => {
+            reFlag.value++;
+        });
+        watch(() => props.maxWidth, () => {
+            reFlag.value++;
+        });
+        watch(() => props.native, () => {
+            reFlag.value++;
+        });
+        watch(() => props.syncResize, () => {
+            reFlag.value++;
+        });
+        watch(reFlag, () => {
+            $xeScrollbar.recalculate().then(() => {
+                $xeScrollbar.recalculate();
+            });
+        });
+        onMounted(() => {
+            const { autoResize } = props;
+            const viewEl = refViewElem.value;
+            const viewInnerEl = refViewInnerElem.value;
+            if (autoResize) {
+                const resizeObserver = globalResize.create(() => {
+                    if (props.autoResize) {
+                        reFlag.value++;
+                    }
+                });
+                if (viewEl) {
+                    resizeObserver.observe(viewEl);
+                }
+                if (viewInnerEl) {
+                    resizeObserver.observe(viewInnerEl);
+                }
+                internalData.resizeObserver = resizeObserver;
+            }
+            reFlag.value++;
+        });
+        onBeforeUnmount(() => {
+            const { resizeObserver } = internalData;
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        });
+        $xeScrollbar.renderVN = renderVN;
+        return $xeScrollbar;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/scrollbar/src/util.js

@@ -0,0 +1,54 @@
+/**
+ * 计算滚动条滑块的长度
+ */
+export function getThumbSize(viewportSize, contentSize, trackSize) {
+    if (contentSize <= viewportSize) {
+        return 0;
+    }
+    const ratio = viewportSize / contentSize;
+    const ideal = trackSize * ratio;
+    return Math.max(20, Math.min(ideal, trackSize));
+}
+/**
+ * 计算滚动条滑块的偏移位置
+ */
+export function getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxScroll = contentSize - viewportSize;
+    if (maxScroll <= 0) {
+        return 0;
+    }
+    const maxThumbOffset = trackSize - thumbSize;
+    if (maxThumbOffset <= 0) {
+        return 0;
+    }
+    const clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
+    const ratio = clamped / maxScroll;
+    return ratio * maxThumbOffset;
+}
+/**
+ * 根据点击轨道的位置，计算滑块的偏移位置
+ */
+export function getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxThumbOffset = trackSize - thumbSize;
+    const maxScroll = contentSize - viewportSize;
+    if (maxScroll <= 0 || maxThumbOffset <= 0) {
+        return 0;
+    }
+    let thumbOffset = clickPosition - thumbSize / 2;
+    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+    const scrollOffset = (thumbOffset / maxThumbOffset) * maxScroll;
+    return scrollOffset;
+}
+/**
+ * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
+ */
+export function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxScroll = contentSize - viewportSize;
+    const maxThumbOffset = trackSize - thumbSize;
+    if (maxScroll <= 0 || maxThumbOffset <= 0) {
+        return 0;
+    }
+    let thumbOffset = pointerPosition - dragOffset;
+    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+    return (thumbOffset / maxThumbOffset) * maxScroll;
+}

package/es/scrollbar/style.css

@@ -0,0 +1,101 @@
+.vxe-scrollbar {
+  width: 100%;
+  position: relative;
+}
+.vxe-scrollbar.is--virtual > .vxe-scrollbar--view {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+.vxe-scrollbar.is--virtual > .vxe-scrollbar--view::-webkit-scrollbar {
+  display: none;
+}
+.vxe-scrollbar.is--virtual.ov-x--auto-hide:hover > .vxe-scrollbar--track-x {
+  opacity: 1;
+}
+.vxe-scrollbar.is--virtual.ov-x--auto-hide > .vxe-scrollbar--track-x {
+  opacity: 0;
+  transition: opacity 0.8s ease-in-out;
+}
+.vxe-scrollbar.is--virtual.ov-y--auto-hide:hover > .vxe-scrollbar--track-y {
+  opacity: 1;
+}
+.vxe-scrollbar.is--virtual.ov-y--auto-hide > .vxe-scrollbar--track-y {
+  opacity: 0;
+  transition: opacity 0.8s ease-in-out;
+}
+.vxe-scrollbar.is--native > .vxe-scrollbar--view {
+  overflow-x: auto;
+  overflow-y: auto;
+}
+.vxe-scrollbar.is--native.ov-x--hidden > .vxe-scrollbar--view {
+  overflow-x: hidden;
+}
+.vxe-scrollbar.is--native.ov-y--hidden > .vxe-scrollbar--view {
+  overflow-y: hidden;
+}
+.vxe-scrollbar.is--native > .vxe-scrollbar--view::-webkit-scrollbar {
+  width: var(--vxe-ui-scrollbar-y-width);
+  height: var(--vxe-ui-scrollbar-x-height);
+}
+.vxe-scrollbar.is--native > .vxe-scrollbar--view::-webkit-scrollbar-thumb {
+  border-radius: var(--vxe-ui-base-border-radius);
+  background-color: var(--vxe-ui-scrollbar-thumb-background-color);
+}
+.vxe-scrollbar.is--native > .vxe-scrollbar--view::-webkit-scrollbar-thumb:hover {
+  background-color: var(--vxe-ui-scrollbar-thumb-hover-background-color);
+}
+.vxe-scrollbar.is--native > .vxe-scrollbar--view::-webkit-scrollbar-thumb:active {
+  background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
+}
+
+.vxe-scrollbar--view {
+  height: 100%;
+  width: 100%;
+}
+
+.vxe-scrollbar--track-x,
+.vxe-scrollbar--track-y {
+  position: absolute;
+  background-color: var(--vxe-ui-scrollbar-track-background-color);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.vxe-scrollbar--track-x {
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  height: var(--vxe-ui-scrollbar-x-height);
+}
+
+.vxe-scrollbar--track-y {
+  height: 100%;
+  right: 0;
+  top: 0;
+  width: var(--vxe-ui-scrollbar-y-width);
+}
+
+.vxe-scrollbar--thumb-y {
+  width: 100%;
+}
+
+.vxe-scrollbar--thumb-x {
+  height: 100%;
+}
+
+.vxe-scrollbar--thumb-x,
+.vxe-scrollbar--thumb-y {
+  border-radius: var(--vxe-ui-base-border-radius);
+  background-color: var(--vxe-ui-scrollbar-thumb-background-color);
+}
+.vxe-scrollbar--thumb-x:hover,
+.vxe-scrollbar--thumb-y:hover {
+  background-color: var(--vxe-ui-scrollbar-thumb-hover-background-color);
+}
+.vxe-scrollbar--thumb-x:active,
+.vxe-scrollbar--thumb-y:active {
+  background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
+}

package/es/scrollbar/style.min.css

@@ -0,0 +1 @@
+.vxe-scrollbar{width:100%;position:relative}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view{scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;overflow-y:auto}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view::-webkit-scrollbar{display:none}.vxe-scrollbar.is--virtual.ov-x--auto-hide:hover>.vxe-scrollbar--track-x{opacity:1}.vxe-scrollbar.is--virtual.ov-x--auto-hide>.vxe-scrollbar--track-x{opacity:0;transition:opacity .8s ease-in-out}.vxe-scrollbar.is--virtual.ov-y--auto-hide:hover>.vxe-scrollbar--track-y{opacity:1}.vxe-scrollbar.is--virtual.ov-y--auto-hide>.vxe-scrollbar--track-y{opacity:0;transition:opacity .8s ease-in-out}.vxe-scrollbar.is--native>.vxe-scrollbar--view{overflow-x:auto;overflow-y:auto}.vxe-scrollbar.is--native.ov-x--hidden>.vxe-scrollbar--view{overflow-x:hidden}.vxe-scrollbar.is--native.ov-y--hidden>.vxe-scrollbar--view{overflow-y:hidden}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar{width:var(--vxe-ui-scrollbar-y-width);height:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb{border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}.vxe-scrollbar--view{height:100%;width:100%}.vxe-scrollbar--track-x,.vxe-scrollbar--track-y{position:absolute;background-color:var(--vxe-ui-scrollbar-track-background-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-scrollbar--track-x{width:100%;bottom:0;left:0;height:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar--track-y{height:100%;right:0;top:0;width:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar--thumb-y{width:100%}.vxe-scrollbar--thumb-x{height:100%}.vxe-scrollbar--thumb-x,.vxe-scrollbar--thumb-y{border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar--thumb-x:hover,.vxe-scrollbar--thumb-y:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar--thumb-x:active,.vxe-scrollbar--thumb-y:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}