vxe-pc-ui 4.20.9 → 4.20.10

package/es/select/src/select.js

@@ -1,13 +1,15 @@
-import { h, Teleport, ref, inject, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted } from 'vue';
+import { h, Teleport, ref, inject, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted, onBeforeUnmount } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui';
+import { VxeUI, useFns } from '../../ui';
 import { getEventTargetNode, getPopupContainer, 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;
@@ -27,6 +29,9 @@ function createReactData() {
         currentOption: null,
         searchValue: '',
         searchLoading: false,
+        // 滚动条
+        yThumbHeight: 0,
+        xThumbWidth: 0,
         panelIndex: 0,
         panelStyle: {},
         panelPlacement: null,
@@ -46,8 +51,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,
@@ -170,6 +181,11 @@ export default defineVxeComponent({
         popupConfig: Object,
         virtualYConfig: Object,
         scrollY: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getDefVal(getConfig().select.useScrollbar, getConfig().useScrollbar)
+        },
+        scrollbarConfig: Object,
         /**
          * 已废弃，被 remote-config.queryMethod 替换
          * @deprecated
@@ -215,8 +231,10 @@ export default defineVxeComponent({
         const refInpSearch = ref();
         const refVirtualWrapper = ref();
         const refOptionPanel = ref();
+        const refVirtualSpaceElem = ref();
         const refVirtualBody = ref();
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const refMaps = {
@@ -230,6 +248,7 @@ export default defineVxeComponent({
             internalData,
             getRefMaps: () => refMaps
         };
+        const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns.useInitVScrollbar($xeSelect);
         const computeFormReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -393,6 +412,74 @@ export default defineVxeComponent({
             }
             return labels.join(', ');
         });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+        });
+        const computeScrollbarXOpts = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+                visible: false
+            });
+        });
+        const computeScrollbarYOpts = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+        });
+        const computeScrollXHeight = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+        });
+        const computeScrollYWidth = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+        });
+        const computeScrollXVisible = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
+        });
+        const computeScrollYVisible = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
+        });
+        const computeScrollXAutoHide = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+        });
+        const computeScrollYAutoHide = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+        });
+        const computeScrollbarWrapperClss = computed(() => {
+            const { yThumbHeight, xThumbWidth } = reactData;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
+            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
+            });
+        });
+        const computeScrollbarXToTop = computed(() => {
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return scrollbarXOpts.position === 'top';
+        });
+        const computeScrollbarYToLeft = computed(() => {
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return scrollbarYOpts.position === 'left';
+        });
         const callSlot = (slotFunc, params) => {
             if (slotFunc) {
                 if (XEUtils.isString(slotFunc)) {
@@ -1174,13 +1261,25 @@ export default defineVxeComponent({
                 }
             });
         };
+        const updateScrollbar = () => {
+            const isVScrollbar = computeIsVScrollbar.value;
+            if (isVScrollbar) {
+                return nextTick().then(() => {
+                    updateThumbSize();
+                    updateThumbOffset();
+                });
+            }
+            return Promise.resolve();
+        };
         /**
          * 重新计算列表
          */
         const recalculate = () => {
             const el = refElem.value;
             if (el && el.clientWidth && el.clientHeight) {
-                return computeScrollLoad();
+                return computeScrollLoad().then(() => {
+                    return updateScrollbar();
+                });
             }
             return Promise.resolve();
         };
@@ -1212,6 +1311,7 @@ export default defineVxeComponent({
             const scrollLeft = scrollBodyElem.scrollLeft;
             const isX = scrollLeft !== internalData.lastScrollLeft;
             const isY = scrollTop !== internalData.lastScrollTop;
+            updateThumbOffset();
             internalData.lastScrollTop = scrollTop;
             internalData.lastScrollLeft = scrollLeft;
             if (reactData.scrollYLoad) {
@@ -1286,6 +1386,10 @@ export default defineVxeComponent({
         };
         const selectMethods = {
             dispatchEvent,
+            getScrollViewElem() {
+                const viewEl = refVirtualWrapper.value;
+                return viewEl || null;
+            },
             loadData,
             reloadData(datas) {
                 internalData.isLoaded = false;
@@ -1340,6 +1444,26 @@ export default defineVxeComponent({
             recalculate,
             clearScroll
         };
+        const bindScrollbarResize = () => {
+            const isVScrollbar = computeIsVScrollbar.value;
+            const { scrollObserver } = internalData;
+            if (isVScrollbar) {
+                if (!scrollObserver) {
+                    const el = refElem.value;
+                    const viewInnerEl = refVirtualSpaceElem.value;
+                    const scrollObserver = globalResize.create(() => {
+                        reScrollFlag.value++;
+                    });
+                    if (el) {
+                        scrollObserver.observe(el);
+                    }
+                    if (viewInnerEl) {
+                        scrollObserver.observe(viewInnerEl);
+                    }
+                    internalData.scrollObserver = scrollObserver;
+                }
+            }
+        };
         Object.assign($xeSelect, selectMethods);
         const renderRadio = (option, isOptGroup, isChecked, isDisabled) => {
             const radioOpts = computeRadioOpts.value;
@@ -1513,8 +1637,9 @@ export default defineVxeComponent({
         };
         const renderVN = () => {
             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 = computeSize.value;
+            const isVScrollbar = computeIsVScrollbar.value;
             const isDisabled = computeIsDisabled.value;
             const selectLabel = computeSelectLabel.value;
             const fullLabel = computeFullLabel.value;
@@ -1546,6 +1671,14 @@ export default defineVxeComponent({
             const prefixSlot = slots.prefix;
             const { appendTo } = popupOpts;
             const ppClassName = popupOpts.className || props.popupClassName;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const scrollXAutoHide = computeScrollXAutoHide.value;
+            const scrollYAutoHide = computeScrollYAutoHide.value;
+            const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
             return h('div', {
                 ref: refElem,
                 class: ['vxe-select', className ? (XEUtils.isFunction(className) ? className({ $select: $xeSelect }) : className) : '', {
@@ -1656,7 +1789,21 @@ export default defineVxeComponent({
                                         ])
                                     : 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,
@@ -1664,6 +1811,7 @@ export default defineVxeComponent({
                                         onScroll: scrollEvent
                                     }, [
                                         h('div', {
+                                            ref: refVirtualSpaceElem,
                                             class: 'vxe-select--y-space',
                                             style: {
                                                 height: bodyHeight ? `${bodyHeight}px` : ''
@@ -1676,7 +1824,50 @@ export default defineVxeComponent({
                                                 marginTop: `${topSpaceHeight}px`
                                             }
                                         }, renderOpts())
-                                    ])
+                                    ]),
+                                    /**
+                                     * 滚动条
+                                     */
+                                    isVScrollbar
+                                        ? h('div', {
+                                            class: scrollbarWrapperClss
+                                        }, [
+                                            scrollXVisible === false
+                                                ? renderEmptyElement($xeSelect)
+                                                : 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
+                                                    })
+                                                ]),
+                                            scrollYVisible === false
+                                                ? renderEmptyElement($xeSelect)
+                                                : 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
+                                                    })
+                                                ])
+                                        ])
+                                        : renderEmptyElement($xeSelect)
                                 ]),
                                 footerSlot || showTotalButton || (showCloseButton && multiple)
                                     ? h('div', {
@@ -1721,6 +1912,42 @@ export default defineVxeComponent({
         watch(() => props.optionGroups, (val) => {
             loadData(val || []);
         });
+        const reScrollFlag = ref(0);
+        const reLayoutFlag = ref(0);
+        watch(computeIsVScrollbar, () => {
+            nextTick(() => {
+                bindScrollbarResize();
+                nextTick(() => {
+                    reLayoutFlag.value++;
+                });
+            });
+        });
+        watch(computeScrollYWidth, () => {
+            reLayoutFlag.value++;
+        });
+        watch(computeScrollXHeight, () => {
+            reLayoutFlag.value++;
+        });
+        watch(computeScrollXVisible, () => {
+            nextTick(() => {
+                reLayoutFlag.value++;
+            });
+        });
+        watch(computeScrollYVisible, () => {
+            nextTick(() => {
+                reLayoutFlag.value++;
+            });
+        });
+        watch(reLayoutFlag, () => {
+            recalculate().then(() => {
+                recalculate();
+            });
+        });
+        watch(reScrollFlag, () => {
+            updateScrollbar().then(() => {
+                updateScrollbar();
+            });
+        });
         onMounted(() => {
             nextTick(() => {
                 const { options, optionGroups } = props;
@@ -1731,12 +1958,20 @@ export default defineVxeComponent({
                     loadData(options);
                 }
             });
+            reLayoutFlag.value++;
+            bindScrollbarResize();
             globalEvents.on($xeSelect, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeSelect, 'keydown', handleGlobalKeydownEvent);
             globalEvents.on($xeSelect, 'blur', handleGlobalBlurEvent);
             globalEvents.on($xeSelect, 'resize', handleGlobalResizeEvent);
             globalEvents.on($xeSelect, 'scroll', handleGlobalScrollEvent);
         });
+        onBeforeUnmount(() => {
+            const { scrollObserver } = internalData;
+            if (scrollObserver) {
+                scrollObserver.disconnect();
+            }
+        });
         onUnmounted(() => {
             globalEvents.off($xeSelect, 'mousedown');
             globalEvents.off($xeSelect, 'keydown');

package/es/select/style.css

@@ -143,6 +143,7 @@
 }
 
 .vxe-select--panel-body {
+  position: relative;
   display: flex;
   flex-direction: row;
   flex-grow: 1;
@@ -375,4 +376,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;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;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;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;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;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;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;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;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}