vxe-pc-ui 3.20.9 → 3.20.11

package/es/select/src/select.js

@@ -1,12 +1,14 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, globalMixins, renderEmptyElement } from '../../ui';
+import { VxeUI, globalMixins } from '../../ui';
 import { getEventTargetNode, getPopupAppendElement, toCssUnit, updatePanelPlacement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, getFuncText, eqEmptyValue } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
 import { createComponentLog } from '../../ui/src/log';
 import VxeInputComponent from '../../input';
 import VxeButtonComponent from '../../button';
+const { getConfig, getIcon, getI18n, baseUtils, domUtils, globalEvents, GLOBAL_EVENT_KEYS, globalResize, createEvent, renderEmptyElement } = VxeUI;
+const { getDefVal } = baseUtils;
 const { errLog } = createComponentLog('select');
 function isOptionVisible(option) {
     return option.visible !== false;
@@ -26,6 +28,9 @@ function createReactData() {
         currentOption: null,
         searchValue: '',
         searchLoading: false,
+        // 滚动条
+        yThumbHeight: 0,
+        xThumbWidth: 0,
         panelIndex: 0,
         panelStyle: {},
         panelPlacement: null,
@@ -45,8 +50,14 @@ function createInternalData() {
         optGroupKeyMaps: {},
         optFullValMaps: {},
         remoteValMaps: {},
-        lastScrollLeft: 0,
+        // 滚动条
+        // scrollObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
         lastScrollTop: 0,
+        lastScrollLeft: 0,
         scrollYStore: {
             startIndex: 0,
             endIndex: 0,
@@ -61,7 +72,9 @@ function createInternalData() {
 export default {
     name: 'VxeSelect',
     mixins: [
-        globalMixins.sizeMixin
+        globalMixins.sizeMixin,
+        globalMixins.vScrollbarMixin,
+        globalMixins.initVScrollbarMixin
     ],
     model: {
         prop: 'value',
@@ -176,6 +189,11 @@ export default {
         popupConfig: Object,
         virtualYConfig: Object,
         scrollY: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getDefVal(getConfig().select.useScrollbar, getConfig().useScrollbar)
+        },
+        scrollbarConfig: Object,
         /**
          * 已废弃，被 remote-config.queryMethod 替换
          * @deprecated
@@ -223,7 +241,7 @@ export default {
         const xID = XEUtils.uniqueId();
         const reactData = createReactData();
         return Object.assign(Object.assign({}, {}), { xID,
-            reactData });
+            reactData, reLayoutFlag: 0, reScrollFlag: 0 });
     },
     computed: Object.assign(Object.assign({}, {}), { computeFormReadonly() {
             const $xeSelect = this;
@@ -445,6 +463,88 @@ export default {
                 return `${labels.slice(0, multiMaxCharNum)}...`;
             }
             return labels.join(', ');
+        },
+        computeScrollbarOpts() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            return Object.assign({}, getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+        },
+        computeScrollbarXOpts() {
+            const $xeSelect = this;
+            const scrollbarOpts = $xeSelect.computeScrollbarOpts;
+            return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+                visible: false
+            });
+        },
+        computeScrollbarYOpts() {
+            const $xeSelect = this;
+            const scrollbarOpts = $xeSelect.computeScrollbarOpts;
+            return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+        },
+        computeScrollXHeight() {
+            const $xeSelect = this;
+            const scrollbarOpts = $xeSelect.computeScrollbarOpts;
+            const scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+            return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+        },
+        computeScrollYWidth() {
+            const $xeSelect = this;
+            const scrollbarOpts = $xeSelect.computeScrollbarOpts;
+            const scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+            return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+        },
+        computeScrollXVisible() {
+            const $xeSelect = this;
+            const scrollbarOpts = $xeSelect.computeScrollbarOpts;
+            const scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+            return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
+        },
+        computeScrollYVisible() {
+            const $xeSelect = this;
+            const scrollbarOpts = $xeSelect.computeScrollbarOpts;
+            const scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+            return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
+        },
+        computeScrollXAutoHide() {
+            const $xeSelect = this;
+            const scrollbarOpts = $xeSelect.computeScrollbarOpts;
+            const scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+            return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+        },
+        computeScrollYAutoHide() {
+            const $xeSelect = this;
+            const scrollbarOpts = $xeSelect.computeScrollbarOpts;
+            const scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+            return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+        },
+        computeScrollbarWrapperClss() {
+            const $xeSelect = this;
+            const reactData = $xeSelect.reactData;
+            const { yThumbHeight, xThumbWidth } = reactData;
+            const scrollbarXToTop = $xeSelect.computeScrollbarXToTop;
+            const scrollbarYToLeft = $xeSelect.computeScrollbarYToLeft;
+            const scrollXVisible = $xeSelect.computeScrollXVisible;
+            const scrollYVisible = $xeSelect.computeScrollYVisible;
+            return domUtils.buildClass([
+                'vxe-scrollbar is--virtual',
+                `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
+                `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
+                `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
+                `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
+            ], {
+                'overflow-y': yThumbHeight,
+                'overflow-x': xThumbWidth
+            });
+        },
+        computeScrollbarXToTop() {
+            const $xeSelect = this;
+            const scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+            return scrollbarXOpts.position === 'top';
+        },
+        computeScrollbarYToLeft() {
+            const $xeSelect = this;
+            const scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+            return scrollbarYOpts.position === 'left';
         } }),
     methods: {
         //
@@ -469,6 +569,11 @@ export default {
             $xeSelect.emitModel(value);
             $xeSelect.dispatchEvent('default-change', { value }, null);
         },
+        getScrollViewElem() {
+            const $xeSelect = this;
+            const viewEl = $xeSelect.$refs.refVirtualWrapper;
+            return viewEl || null;
+        },
         isPanelVisible() {
             const $xeSelect = this;
             const reactData = $xeSelect.reactData;
@@ -1458,6 +1563,17 @@ export default {
                 }
             });
         },
+        updateScrollbar() {
+            const $xeSelect = this;
+            const isVScrollbar = $xeSelect.computeIsVScrollbar;
+            if (isVScrollbar) {
+                return $xeSelect.$nextTick().then(() => {
+                    $xeSelect.updateThumbSize();
+                    $xeSelect.updateThumbOffset();
+                });
+            }
+            return Promise.resolve();
+        },
         /**
          * 重新计算列表
          */
@@ -1465,7 +1581,9 @@ export default {
             const $xeSelect = this;
             const el = $xeSelect.$refs.refElem;
             if (el && el.clientWidth && el.clientHeight) {
-                return $xeSelect.computeScrollLoad();
+                return $xeSelect.computeScrollLoad().then(() => {
+                    return $xeSelect.updateScrollbar();
+                });
             }
             return Promise.resolve();
         },
@@ -1502,6 +1620,10 @@ export default {
             const scrollBodyElem = evnt.target;
             const scrollTop = scrollBodyElem.scrollTop;
             const scrollLeft = scrollBodyElem.scrollLeft;
+            const isVScrollbar = $xeSelect.computeIsVScrollbar;
+            if (isVScrollbar) {
+                $xeSelect.updateThumbOffset();
+            }
             const isX = scrollLeft !== internalData.lastScrollLeft;
             const isY = scrollTop !== internalData.lastScrollTop;
             internalData.lastScrollTop = scrollTop;
@@ -1591,6 +1713,29 @@ export default {
             const { optGroupKeyMaps } = internalData;
             return !!optGroupKeyMaps[optid];
         },
+        // 滚动条
+        bindScrollbarResize() {
+            const $xeSelect = this;
+            const internalData = $xeSelect.internalData;
+            const isVScrollbar = $xeSelect.computeIsVScrollbar;
+            const { scrollObserver } = internalData;
+            if (isVScrollbar) {
+                if (!scrollObserver) {
+                    const el = $xeSelect.$refs.refElem;
+                    const viewInnerEl = $xeSelect.$refs.refVirtualSpaceElem;
+                    const scrollObserver = globalResize.create(() => {
+                        $xeSelect.reScrollFlag++;
+                    });
+                    if (el) {
+                        scrollObserver.observe(el);
+                    }
+                    if (viewInnerEl) {
+                        scrollObserver.observe(viewInnerEl);
+                    }
+                    internalData.scrollObserver = scrollObserver;
+                }
+            }
+        },
         //
         // Render
         //
@@ -1797,8 +1942,9 @@ export default {
             const slots = $xeSelect.$scopedSlots;
             const reactData = $xeSelect.reactData;
             const { className, multiple, loading, filterable, showTotalButton, showCheckedButton, showClearButton, showCloseButton } = props;
-            const { initialized, isActivated, isAniVisible, optList, visiblePanel, bodyHeight, topSpaceHeight } = reactData;
+            const { initialized, isActivated, isAniVisible, optList, visiblePanel, bodyHeight, topSpaceHeight, xThumbWidth, yThumbHeight } = reactData;
             const vSize = $xeSelect.computeSize;
+            const isVScrollbar = $xeSelect.computeIsVScrollbar;
             const isDisabled = $xeSelect.computeIsDisabled;
             const selectLabel = $xeSelect.computeSelectLabel;
             const fullLabel = $xeSelect.computeFullLabel;
@@ -1831,6 +1977,14 @@ export default {
             const footerSlot = slots.footer;
             const prefixSlot = slots.prefix;
             const ppClassName = popupOpts.className || props.popupClassName;
+            const scrollbarOpts = $xeSelect.computeScrollbarOpts;
+            const scrollXVisible = $xeSelect.computeScrollXVisible;
+            const scrollYVisible = $xeSelect.computeScrollYVisible;
+            const scrollbarXToTop = $xeSelect.computeScrollbarXToTop;
+            const scrollbarYToLeft = $xeSelect.computeScrollbarYToLeft;
+            const scrollXAutoHide = $xeSelect.computeScrollXAutoHide;
+            const scrollYAutoHide = $xeSelect.computeScrollYAutoHide;
+            const scrollbarWrapperClss = $xeSelect.computeScrollbarWrapperClss;
             return h('div', {
                 ref: 'refElem',
                 class: ['vxe-select', className ? (XEUtils.isFunction(className) ? className({ $select: $xeSelect }) : className) : '', {
@@ -1956,7 +2110,21 @@ export default {
                                     ])
                                 : renderEmptyElement($xeSelect),
                             h('div', {
-                                class: 'vxe-select--panel-body'
+                                class: [
+                                    'vxe-select--panel-body',
+                                    isVScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
+                                    isVScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
+                                    isVScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
+                                    isVScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
+                                    {
+                                        'is--virtual-scrollbar': isVScrollbar,
+                                        'ov-padding': isVScrollbar && scrollbarOpts.padding,
+                                        'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+                                        'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
+                                        'overflow-y': yThumbHeight,
+                                        'overflow-x': xThumbWidth
+                                    }
+                                ]
                             }, [
                                 h('div', {
                                     ref: 'refVirtualWrapper',
@@ -1966,6 +2134,7 @@ export default {
                                     }
                                 }, [
                                     h('div', {
+                                        ref: 'refVirtualSpaceElem',
                                         class: 'vxe-select--y-space',
                                         style: {
                                             height: bodyHeight ? `${bodyHeight}px` : ''
@@ -1978,7 +2147,58 @@ export default {
                                             transform: `translateY(${topSpaceHeight}px)`
                                         }
                                     }, $xeSelect.renderOpts(h))
-                                ])
+                                ]),
+                                /**
+                                 * 滚动条
+                                 */
+                                isVScrollbar
+                                    ? h('div', {
+                                        class: scrollbarWrapperClss
+                                    }, [
+                                        scrollXVisible === false
+                                            ? renderEmptyElement($xeSelect)
+                                            : h('div', {
+                                                ref: 'refTrackXElem',
+                                                class: 'vxe-scrollbar--track-x',
+                                                on: {
+                                                    click: $xeSelect.clickTrackXEvent
+                                                }
+                                            }, [
+                                                h('div', {
+                                                    ref: 'refThumbXElem',
+                                                    class: 'vxe-scrollbar--thumb-x',
+                                                    on: {
+                                                        pointerdown: $xeSelect.pointerdownThumbXEvent,
+                                                        pointermove: $xeSelect.pointermoveThumbXEvent,
+                                                        pointerup: $xeSelect.cleatPointerThumbEvent,
+                                                        pointercancel: $xeSelect.cleatPointerThumbEvent,
+                                                        lostpointercapture: $xeSelect.cleatPointerThumbEvent
+                                                    }
+                                                })
+                                            ]),
+                                        scrollYVisible === false
+                                            ? renderEmptyElement($xeSelect)
+                                            : h('div', {
+                                                ref: 'refTrackYElem',
+                                                class: 'vxe-scrollbar--track-y',
+                                                on: {
+                                                    click: $xeSelect.clickTrackYEvent
+                                                }
+                                            }, [
+                                                h('div', {
+                                                    ref: 'refThumbYElem',
+                                                    class: 'vxe-scrollbar--thumb-y',
+                                                    on: {
+                                                        pointerdown: $xeSelect.pointerdownThumbYEvent,
+                                                        pointermove: $xeSelect.pointermoveThumbYEvent,
+                                                        pointerup: $xeSelect.cleatPointerThumbEvent,
+                                                        pointercancel: $xeSelect.cleatPointerThumbEvent,
+                                                        lostpointercapture: $xeSelect.cleatPointerThumbEvent
+                                                    }
+                                                })
+                                            ])
+                                    ])
+                                    : renderEmptyElement($xeSelect)
                             ]),
                             footerSlot || showTotalButton || (showCloseButton && multiple)
                                 ? h('div', {
@@ -2030,6 +2250,47 @@ export default {
         optionGroups(val) {
             const $xeSelect = this;
             $xeSelect.loadData(val);
+        },
+        computeIsVScrollbar() {
+            const $xeSelect = this;
+            $xeSelect.$nextTick(() => {
+                $xeSelect.bindScrollbarResize();
+                $xeSelect.$nextTick(() => {
+                    $xeSelect.reLayoutFlag++;
+                });
+            });
+        },
+        computeScrollYWidth() {
+            const $xeSelect = this;
+            $xeSelect.reLayoutFlag++;
+        },
+        computeScrollXHeight() {
+            const $xeSelect = this;
+            $xeSelect.reLayoutFlag++;
+        },
+        computeScrollXVisible() {
+            const $xeSelect = this;
+            $xeSelect.$nextTick(() => {
+                $xeSelect.reLayoutFlag++;
+            });
+        },
+        computeScrollYVisible() {
+            const $xeSelect = this;
+            $xeSelect.$nextTick(() => {
+                $xeSelect.reLayoutFlag++;
+            });
+        },
+        reLayoutFlag() {
+            const $xeSelect = this;
+            $xeSelect.recalculate().then(() => {
+                $xeSelect.recalculate();
+            });
+        },
+        reScrollFlag() {
+            const $xeSelect = this;
+            $xeSelect.updateScrollbar().then(() => {
+                $xeSelect.updateScrollbar();
+            });
         }
     },
     created() {
@@ -2048,6 +2309,8 @@ export default {
                 $xeSelect.loadData(options);
             }
         });
+        $xeSelect.reLayoutFlag++;
+        $xeSelect.bindScrollbarResize();
         globalEvents.on($xeSelect, 'mousedown', $xeSelect.handleGlobalMousedownEvent);
         globalEvents.on($xeSelect, 'keydown', $xeSelect.handleGlobalKeydownEvent);
         globalEvents.on($xeSelect, 'blur', $xeSelect.handleGlobalBlurEvent);
@@ -2056,10 +2319,15 @@ export default {
     },
     beforeDestroy() {
         const $xeSelect = this;
+        const internalData = $xeSelect.internalData;
+        const { scrollObserver } = internalData;
         const panelElem = $xeSelect.$refs.refOptionPanel;
         if (panelElem && panelElem.parentNode) {
             panelElem.parentNode.removeChild(panelElem);
         }
+        if (scrollObserver) {
+            scrollObserver.disconnect();
+        }
         globalEvents.off($xeSelect, 'mousedown');
         globalEvents.off($xeSelect, 'keydown');
         globalEvents.off($xeSelect, 'blur');

package/es/select/style.css

@@ -144,6 +144,7 @@
 }
 
 .vxe-select--panel-body {
+  position: relative;
   display: flex;
   flex-direction: row;
   flex-grow: 1;
@@ -379,4 +380,47 @@
 .vxe-select--search-loading,
 .vxe-select--empty-placeholder {
   line-height: var(--vxe-ui-select-current-option-height);
+}
+
+.vxe-select--panel-body.ov-padding.overflow-x.sx-pos--top {
+  padding-top: var(--vxe-ui-scrollbar-x-height);
+}
+.vxe-select--panel-body.ov-padding.overflow-x.sx-pos--bottom {
+  padding-bottom: var(--vxe-ui-scrollbar-x-height);
+}
+.vxe-select--panel-body.ov-padding.overflow-y.sy-pos--left {
+  padding-left: var(--vxe-ui-scrollbar-y-width);
+}
+.vxe-select--panel-body.ov-padding.overflow-y.sy-pos--right {
+  padding-right: var(--vxe-ui-scrollbar-y-width);
+}
+.vxe-select--panel-body.ov-x--hidden > .vxe-select-option--wrapper {
+  overflow-x: hidden;
+}
+.vxe-select--panel-body.ov-y--hidden > .vxe-select-option--wrapper {
+  overflow-y: hidden;
+}
+.vxe-select--panel-body.is--virtual-scrollbar.ov-x--auto-hide:hover > .vxe-scrollbar > .vxe-scrollbar--track-x {
+  opacity: 1;
+}
+.vxe-select--panel-body.is--virtual-scrollbar.ov-x--auto-hide > .vxe-scrollbar > .vxe-scrollbar--track-x {
+  opacity: 0;
+  transition: opacity 0.8s ease-in-out;
+}
+.vxe-select--panel-body.is--virtual-scrollbar.ov-y--auto-hide:hover > .vxe-scrollbar > .vxe-scrollbar--track-y {
+  opacity: 1;
+}
+.vxe-select--panel-body.is--virtual-scrollbar.ov-y--auto-hide > .vxe-scrollbar > .vxe-scrollbar--track-y {
+  opacity: 0;
+  transition: opacity 0.8s ease-in-out;
+}
+.vxe-select--panel-body > .vxe-scrollbar {
+  position: unset;
+}
+.vxe-select--panel-body.is--virtual-scrollbar > .vxe-select-option--wrapper {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.vxe-select--panel-body.is--virtual-scrollbar > .vxe-select-option--wrapper::-webkit-scrollbar {
+  display: none;
 }

package/es/select/style.min.css

@@ -1 +1 @@
-.vxe-select,.vxe-select--panel{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-default)}.vxe-select--panel.size--xlarge,.vxe-select.size--xlarge{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-xlarge)}.vxe-select--panel.size--large,.vxe-select.size--large{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-large)}.vxe-select--panel.size--medium,.vxe-select.size--medium{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-medium)}.vxe-select--panel.size--small,.vxe-select.size--small{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-small)}.vxe-select--panel.size--mini,.vxe-select.size--mini{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-mini)}.vxe-select,.vxe-select--panel{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel.size--mini,.vxe-select--panel.size--small,.vxe-select.size--mini,.vxe-select.size--small{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-half)}.vxe-select{position:relative;display:inline-block;width:180px;font-size:var(--vxe-ui-select-current-font-size);color:var(--vxe-ui-font-color);text-align:left}.vxe-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-select>.vxe-input{width:100%}.vxe-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-select-slots{display:none}.vxe-select--panel{font-size:var(--vxe-ui-select-current-font-size);display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-select--panel:not(.is--transfer){min-width:100%}.vxe-select--panel.is--transfer{position:fixed}.vxe-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-select--panel.ani--enter>div::after{display:none}.vxe-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-select--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel-search .vxe-select-search--input{width:100%}.vxe-select--panel-wrapper{display:flex;flex-direction:column;position:relative;max-height:18em;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-select--panel-body{display:flex;flex-direction:row;flex-grow:1;overflow:hidden}.vxe-select--header-button{display:flex;flex-direction:row}.vxe-select--footer-button,.vxe-select--header-button{display:flex;flex-direction:row;white-space:nowrap;align-items:center;min-height:2em}.vxe-select--total-btns{padding-left:var(--vxe-ui-select-current-padding);flex-grow:1}.vxe-select--oper-btns,.vxe-select--total-btns{display:flex;flex-direction:row;align-items:center}.vxe-select--oper-btns{flex-shrink:0}.vxe-select--footer-button{display:flex;flex-direction:row}.vxe-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer,.vxe-select--panel-header{flex-shrink:0;padding:4px 0}.vxe-select-option--wrapper{flex-grow:1;position:relative;overflow-x:hidden;overflow-y:auto}.vxe-select--y-space{width:0;float:left}.vxe-select--body,.vxe-select-option--wrapper{padding:0;margin:0;border:0;outline:0}.vxe-select-option{position:relative;flex-direction:row;display:flex;padding:0 .6em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.vxe-select-option.is--add{padding-right:2em}.vxe-select-option.is--add:hover .vxe-select-option--add-icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option.is--add .vxe-select-option--add-icon{display:block}.vxe-select-option.is--selected{color:var(--vxe-ui-font-primary-color)}.vxe-select-option:not(.is--disabled).is--hover{background-color:var(--vxe-ui-select-option-hover-background-color)}.vxe-select-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-select-optgroup{color:var(--vxe-ui-select-title-color);font-size:12px;cursor:default}.vxe-select-option--label{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-select-option--add-icon{display:none;position:absolute;top:0;right:.6em}.vxe-select-option--checkbox{padding-right:.4em}.vxe-select-option--checkbox{cursor:pointer}.vxe-select-option--checkbox .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-select-option--checkbox .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-select-option--checkbox.is--checked,.vxe-select-option--checkbox.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--checked .vxe-checkbox--icon,.vxe-select-option--checkbox.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--hidden{cursor:default}.vxe-select-option--checkbox.is--readonly{cursor:auto}.vxe-select-option--checkbox.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--checkbox.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--checkbox .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-select-option--radio{padding-right:.4em}.vxe-select-option--radio{cursor:pointer}.vxe-select-option--radio .vxe-radio--icon{font-size:1.26em;transition:all .2s ease-in-out}.vxe-select-option--radio .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-select-option--radio.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--readonly{cursor:auto}.vxe-select-option--radio.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--radio.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--radio .vxe-radio--label{padding-left:.4em;vertical-align:middle}.vxe-select--search-icon{margin-right:.5em}.vxe-select--empty-placeholder,.vxe-select--search-loading{padding:0 .6em;text-align:center;color:var(--vxe-ui-select-empty-color)}.vxe-select-option{height:var(--vxe-ui-select-current-option-height)}.vxe-select--empty-placeholder,.vxe-select--search-loading,.vxe-select-option{line-height:var(--vxe-ui-select-current-option-height)}
+.vxe-select,.vxe-select--panel{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-default)}.vxe-select--panel.size--xlarge,.vxe-select.size--xlarge{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-xlarge)}.vxe-select--panel.size--large,.vxe-select.size--large{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-large)}.vxe-select--panel.size--medium,.vxe-select.size--medium{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-medium)}.vxe-select--panel.size--small,.vxe-select.size--small{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-small)}.vxe-select--panel.size--mini,.vxe-select.size--mini{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-mini)}.vxe-select,.vxe-select--panel{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel.size--mini,.vxe-select--panel.size--small,.vxe-select.size--mini,.vxe-select.size--small{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-half)}.vxe-select{position:relative;display:inline-block;width:180px;font-size:var(--vxe-ui-select-current-font-size);color:var(--vxe-ui-font-color);text-align:left}.vxe-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-select>.vxe-input{width:100%}.vxe-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-select-slots{display:none}.vxe-select--panel{font-size:var(--vxe-ui-select-current-font-size);display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-select--panel:not(.is--transfer){min-width:100%}.vxe-select--panel.is--transfer{position:fixed}.vxe-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-select--panel.ani--enter>div::after{display:none}.vxe-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-select--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel-search .vxe-select-search--input{width:100%}.vxe-select--panel-wrapper{display:flex;flex-direction:column;position:relative;max-height:18em;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-select--panel-body{position:relative;display:flex;flex-direction:row;flex-grow:1;overflow:hidden}.vxe-select--header-button{display:flex;flex-direction:row}.vxe-select--footer-button,.vxe-select--header-button{display:flex;flex-direction:row;white-space:nowrap;align-items:center;min-height:2em}.vxe-select--total-btns{padding-left:var(--vxe-ui-select-current-padding);flex-grow:1}.vxe-select--oper-btns,.vxe-select--total-btns{display:flex;flex-direction:row;align-items:center}.vxe-select--oper-btns{flex-shrink:0}.vxe-select--footer-button{display:flex;flex-direction:row}.vxe-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer,.vxe-select--panel-header{flex-shrink:0;padding:4px 0}.vxe-select-option--wrapper{flex-grow:1;position:relative;overflow-x:hidden;overflow-y:auto}.vxe-select--y-space{width:0;float:left}.vxe-select--body,.vxe-select-option--wrapper{padding:0;margin:0;border:0;outline:0}.vxe-select-option{position:relative;flex-direction:row;display:flex;padding:0 .6em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.vxe-select-option.is--add{padding-right:2em}.vxe-select-option.is--add:hover .vxe-select-option--add-icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option.is--add .vxe-select-option--add-icon{display:block}.vxe-select-option.is--selected{color:var(--vxe-ui-font-primary-color)}.vxe-select-option:not(.is--disabled).is--hover{background-color:var(--vxe-ui-select-option-hover-background-color)}.vxe-select-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-select-optgroup{color:var(--vxe-ui-select-title-color);font-size:12px;cursor:default}.vxe-select-option--label{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-select-option--add-icon{display:none;position:absolute;top:0;right:.6em}.vxe-select-option--checkbox{padding-right:.4em}.vxe-select-option--checkbox{cursor:pointer}.vxe-select-option--checkbox .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-select-option--checkbox .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-select-option--checkbox.is--checked,.vxe-select-option--checkbox.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--checked .vxe-checkbox--icon,.vxe-select-option--checkbox.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--hidden{cursor:default}.vxe-select-option--checkbox.is--readonly{cursor:auto}.vxe-select-option--checkbox.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--checkbox.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--checkbox .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-select-option--radio{padding-right:.4em}.vxe-select-option--radio{cursor:pointer}.vxe-select-option--radio .vxe-radio--icon{font-size:1.26em;transition:all .2s ease-in-out}.vxe-select-option--radio .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-select-option--radio.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--readonly{cursor:auto}.vxe-select-option--radio.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--radio.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--radio .vxe-radio--label{padding-left:.4em;vertical-align:middle}.vxe-select--search-icon{margin-right:.5em}.vxe-select--empty-placeholder,.vxe-select--search-loading{padding:0 .6em;text-align:center;color:var(--vxe-ui-select-empty-color)}.vxe-select-option{height:var(--vxe-ui-select-current-option-height)}.vxe-select--empty-placeholder,.vxe-select--search-loading,.vxe-select-option{line-height:var(--vxe-ui-select-current-option-height)}.vxe-select--panel-body.ov-padding.overflow-x.sx-pos--top{padding-top:var(--vxe-ui-scrollbar-x-height)}.vxe-select--panel-body.ov-padding.overflow-x.sx-pos--bottom{padding-bottom:var(--vxe-ui-scrollbar-x-height)}.vxe-select--panel-body.ov-padding.overflow-y.sy-pos--left{padding-left:var(--vxe-ui-scrollbar-y-width)}.vxe-select--panel-body.ov-padding.overflow-y.sy-pos--right{padding-right:var(--vxe-ui-scrollbar-y-width)}.vxe-select--panel-body.ov-x--hidden>.vxe-select-option--wrapper{overflow-x:hidden}.vxe-select--panel-body.ov-y--hidden>.vxe-select-option--wrapper{overflow-y:hidden}.vxe-select--panel-body.is--virtual-scrollbar.ov-x--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:1}.vxe-select--panel-body.is--virtual-scrollbar.ov-x--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:0;transition:opacity .8s ease-in-out}.vxe-select--panel-body.is--virtual-scrollbar.ov-y--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:1}.vxe-select--panel-body.is--virtual-scrollbar.ov-y--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:0;transition:opacity .8s ease-in-out}.vxe-select--panel-body>.vxe-scrollbar{position:unset}.vxe-select--panel-body.is--virtual-scrollbar>.vxe-select-option--wrapper{scrollbar-width:none;-ms-overflow-style:none}.vxe-select--panel-body.is--virtual-scrollbar>.vxe-select-option--wrapper::-webkit-scrollbar{display:none}