vxe-pc-ui 3.14.17 → 3.14.19

package/es/select/src/select.js

@@ -1,6 +1,6 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, globalMixins, renderEmptyElement } from '../../ui';
+import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, globalMixins, renderEmptyElement } from '../../ui';
 import { getEventTargetNode, toCssUnit, updatePanelPlacement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, getFuncText, eqEmptyValue } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -86,6 +86,16 @@ export default {
             type: [String, Number],
             default: null
         },
+        showRadio: {
+            type: Boolean,
+            default: () => getConfig().select.showRadio
+        },
+        radioConfig: Object,
+        showCheckbox: {
+            type: Boolean,
+            default: () => getConfig().select.showCheckedButoon
+        },
+        checkboxConfig: Object,
         /**
          * 已废弃，请使用 popupConfig.zIndex
          * @deprecated
@@ -105,6 +115,18 @@ export default {
         remote: Boolean,
         remoteConfig: Object,
         emptyText: String,
+        checkedClosable: {
+            type: Boolean,
+            default: () => getConfig().select.checkedClosable
+        },
+        clearClosable: {
+            type: Boolean,
+            default: () => getConfig().select.clearClosable
+        },
+        showCloseButton: {
+            type: Boolean,
+            default: () => getConfig().select.showCloseButton
+        },
         showTotalButoon: {
             type: Boolean,
             default: () => getConfig().select.showTotalButoon
@@ -322,6 +344,16 @@ export default {
             const props = $xeSelect;
             return Object.assign({}, getConfig().select.optionConfig, props.optionConfig);
         },
+        computeRadioOpts() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            return Object.assign({}, getConfig().select.radioConfig, props.radioConfig);
+        },
+        computeCheckboxOpts() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            return Object.assign({}, getConfig().select.checkboxConfig, props.checkboxConfig);
+        },
         computeIsGroup() {
             const $xeSelect = this;
             const reactData = $xeSelect.reactData;
@@ -788,7 +820,7 @@ export default {
                 $xeSelect.dispatchEvent('visible-change', { visible: true }, null);
             }
         },
-        hideOptionPanel() {
+        hideOptionPanel(evnt) {
             const $xeSelect = this;
             const props = $xeSelect;
             const reactData = $xeSelect.reactData;
@@ -814,7 +846,7 @@ export default {
             internalData.hpTimeout = setTimeout(() => {
                 reactData.isAniVisible = false;
             }, 350);
-            $xeSelect.dispatchEvent('visible-change', { visible: false }, null);
+            $xeSelect.dispatchEvent('visible-change', { visible: false }, evnt || null);
         },
         changeEvent(evnt, selectValue, option) {
             const $xeSelect = this;
@@ -841,14 +873,14 @@ export default {
             const $xeSelect = this;
             const { $event } = params;
             $xeSelect.clearValueEvent($event, null);
-            $xeSelect.hideOptionPanel();
+            $xeSelect.hideOptionPanel($event);
         },
         allCheckedPanelEvent(params) {
             const $xeSelect = this;
             const props = $xeSelect;
             const reactData = $xeSelect.reactData;
             const { $event } = params;
-            const { multiple } = props;
+            const { multiple, max, checkedClosable } = props;
             const { optList } = reactData;
             const valueField = $xeSelect.computeValueField;
             if (multiple) {
@@ -859,6 +891,12 @@ export default {
                     const selectValue = option[valueField];
                     // 检测是否超过最大可选数量
                     if ($xeSelect.checkMaxLimit(currVlas)) {
+                        if (VxeUI) {
+                            VxeUI.modal.message({
+                                content: getI18n('vxe.select.overSizeErr', [max]),
+                                status: 'warning'
+                            });
+                        }
                         break;
                     }
                     if (!currVlas.some(val => val === selectValue)) {
@@ -866,14 +904,26 @@ export default {
                     }
                 }
                 $xeSelect.changeEvent($event, currVlas, optList[0]);
+                if (checkedClosable) {
+                    $xeSelect.hideOptionPanel($event);
+                }
                 $xeSelect.dispatchEvent('all-change', { value: currVlas }, $event);
             }
         },
         clearCheckedPanelEvent(params) {
             const $xeSelect = this;
+            const props = $xeSelect;
+            const { clearClosable } = props;
             const { $event } = params;
             $xeSelect.clearValueEvent($event, null);
-            $xeSelect.hideOptionPanel();
+            if (clearClosable) {
+                $xeSelect.hideOptionPanel($event);
+            }
+        },
+        closePanelEvent(params) {
+            const $xeSelect = this;
+            const { $event } = params;
+            $xeSelect.hideOptionPanel($event);
         },
         changeOptionEvent(evnt, option) {
             const $xeSelect = this;
@@ -912,7 +962,7 @@ export default {
             }
             else {
                 $xeSelect.changeEvent(evnt, selectValue, option);
-                $xeSelect.hideOptionPanel();
+                $xeSelect.hideOptionPanel(evnt);
             }
             reactData.reactFlag++;
         },
@@ -928,7 +978,7 @@ export default {
                         $xeSelect.updatePlacement();
                     }
                     else {
-                        $xeSelect.hideOptionPanel();
+                        $xeSelect.hideOptionPanel(evnt);
                     }
                 }
             }
@@ -946,7 +996,7 @@ export default {
                 reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
                 if (visiblePanel && !reactData.isActivated) {
                     if (trigger !== 'manual') {
-                        $xeSelect.hideOptionPanel();
+                        $xeSelect.hideOptionPanel(evnt);
                     }
                 }
             }
@@ -1046,7 +1096,7 @@ export default {
                 if (visiblePanel) {
                     if (isEsc || isTab) {
                         if (trigger !== 'manual') {
-                            $xeSelect.hideOptionPanel();
+                            $xeSelect.hideOptionPanel(evnt);
                         }
                     }
                     else if (isEnter) {
@@ -1080,7 +1130,7 @@ export default {
                 }
             }
         },
-        handleGlobalBlurEvent() {
+        handleGlobalBlurEvent(evnt) {
             const $xeSelect = this;
             const reactData = $xeSelect.reactData;
             const { visiblePanel, isActivated } = reactData;
@@ -1088,7 +1138,7 @@ export default {
             const { trigger } = popupOpts;
             if (visiblePanel) {
                 if (trigger !== 'manual') {
-                    $xeSelect.hideOptionPanel();
+                    $xeSelect.hideOptionPanel(evnt);
                 }
             }
             if (isActivated) {
@@ -1213,7 +1263,7 @@ export default {
             }
             else {
                 if (reactData.visiblePanel) {
-                    $xeSelect.hideOptionPanel();
+                    $xeSelect.hideOptionPanel($event);
                 }
                 else {
                     $xeSelect.showOptionPanel();
@@ -1531,13 +1581,69 @@ export default {
         //
         // Render
         //
+        renderRadio(h, option, isOptGroup, isChecked, isDisabled) {
+            const $xeSelect = this;
+            const radioOpts = $xeSelect.computeRadioOpts;
+            const { showIcon, trigger } = radioOpts;
+            if (isOptGroup || showIcon === false) {
+                return renderEmptyElement($xeSelect);
+            }
+            const ons = {};
+            if (!trigger || trigger === 'default') {
+                ons.click = (evnt) => {
+                    if (!isDisabled && !isOptGroup) {
+                        $xeSelect.changeOptionEvent(evnt, option);
+                    }
+                };
+            }
+            return h('div', {
+                key: 2,
+                class: ['vxe-select-option--radio', {
+                        'is--checked': isChecked,
+                        'is--disabled': isDisabled
+                    }],
+                on: ons
+            }, [
+                h('span', {
+                    class: ['vxe-radio--icon', isChecked ? getIcon().RADIO_CHECKED : getIcon().RADIO_UNCHECKED]
+                })
+            ]);
+        },
+        renderCheckbox(h, option, isOptGroup, isChecked, isDisabled) {
+            const $xeSelect = this;
+            const checkboxOpts = $xeSelect.computeCheckboxOpts;
+            const { showIcon, trigger } = checkboxOpts;
+            if (isOptGroup || showIcon === false) {
+                return renderEmptyElement($xeSelect);
+            }
+            const ons = {};
+            if (!trigger || trigger === 'default') {
+                ons.click = (evnt) => {
+                    if (!isDisabled && !isOptGroup) {
+                        $xeSelect.changeOptionEvent(evnt, option);
+                    }
+                };
+            }
+            return h('div', {
+                key: 3,
+                class: ['vxe-select-option--checkbox', {
+                        'is--checked': isChecked,
+                        'is--disabled': isDisabled
+                    }],
+                on: ons
+            }, [
+                h('span', {
+                    class: ['vxe-checkbox--icon', isChecked ? getIcon().CHECKBOX_CHECKED : getIcon().CHECKBOX_UNCHECKED]
+                })
+            ]);
+        },
         renderOption(h, list) {
             const $xeSelect = this;
             const props = $xeSelect;
             const slots = $xeSelect.$scopedSlots;
             const reactData = $xeSelect.reactData;
             const internalData = $xeSelect.internalData;
-            const { allowCreate, optionKey } = props;
+            const { allowCreate, optionKey, multiple, showRadio, showCheckbox } = props;
             const { currentOption } = reactData;
             const { optAddMaps } = internalData;
             const optionOpts = $xeSelect.computeOptionOpts;
@@ -1545,8 +1651,12 @@ export default {
             const valueField = $xeSelect.computeValueField;
             const groupLabelField = $xeSelect.computeGroupLabelField;
             const selectVals = $xeSelect.computeSelectVals;
+            const radioOpts = $xeSelect.computeRadioOpts;
+            const checkboxOpts = $xeSelect.computeCheckboxOpts;
             const { useKey, height } = optionOpts;
             const optionSlot = slots.option;
+            const isCheckboxMode = showCheckbox && multiple;
+            const isRadioMode = showRadio && !multiple;
             return list.map((option, cIndex) => {
                 const { slots, className } = option;
                 const optid = $xeSelect.getOptId(option);
@@ -1557,18 +1667,47 @@ export default {
                 const isVisible = isAdd || (!isOptGroup || isOptionVisible(option));
                 const isDisabled = !isAdd && $xeSelect.checkOptionDisabled(isSelected, option);
                 const defaultSlot = slots ? slots.default : null;
+                const optSlot = defaultSlot || optionSlot;
                 const optParams = { option, group: isOptGroup ? option : null, $select: $xeSelect };
                 let optLabel = '';
-                let optVNs = [];
-                if (optionSlot) {
-                    optVNs = $xeSelect.callSlot(optionSlot, optParams, h);
+                const optVNs = [];
+                if (isCheckboxMode) {
+                    optVNs.push($xeSelect.renderCheckbox(h, option, isOptGroup, isSelected, isDisabled));
                 }
-                else if (defaultSlot) {
-                    optVNs = $xeSelect.callSlot(defaultSlot, optParams, h);
+                else if (isRadioMode) {
+                    optVNs.push($xeSelect.renderRadio(h, option, isOptGroup, isSelected, isDisabled));
+                }
+                let otlbVNs = [];
+                if (optSlot) {
+                    otlbVNs = $xeSelect.callSlot(optSlot, optParams, h);
                 }
                 else {
                     optLabel = getFuncText(option[(isOptGroup ? groupLabelField : labelField)] || optionValue);
-                    optVNs = optLabel;
+                    otlbVNs = [optLabel];
+                }
+                optVNs.push(h('div', {
+                    key: 1,
+                    class: 'vxe-select-option--label'
+                }, otlbVNs));
+                const ons = {
+                    mousedown: (evnt) => {
+                        const isLeftBtn = evnt.button === 0;
+                        if (isLeftBtn) {
+                            evnt.stopPropagation();
+                        }
+                    },
+                    mouseenter: () => {
+                        if (!isDisabled && !isOptGroup && !$xeSelect.isVMScrollProcess()) {
+                            $xeSelect.setCurrentOption(option);
+                        }
+                    }
+                };
+                if (isCheckboxMode ? checkboxOpts.trigger === 'option' : (isRadioMode ? radioOpts.trigger === 'option' : true)) {
+                    ons.click = (evnt) => {
+                        if (!isDisabled && !isOptGroup) {
+                            $xeSelect.changeOptionEvent(evnt, option);
+                        }
+                    };
                 }
                 return isVisible
                     ? h('div', {
@@ -1589,29 +1728,12 @@ export default {
                                 height: toCssUnit(height)
                             }
                             : undefined,
-                        on: {
-                            mousedown: (evnt) => {
-                                const isLeftBtn = evnt.button === 0;
-                                if (isLeftBtn) {
-                                    evnt.stopPropagation();
-                                }
-                            },
-                            click: (evnt) => {
-                                if (!isDisabled && !isOptGroup) {
-                                    $xeSelect.changeOptionEvent(evnt, option);
-                                }
-                            },
-                            mouseenter: () => {
-                                if (!isDisabled && !isOptGroup && !$xeSelect.isVMScrollProcess()) {
-                                    $xeSelect.setCurrentOption(option);
-                                }
-                            }
-                        }
+                        on: ons
                     }, allowCreate
                         ? [
                             h('span', {
                                 key: 1,
-                                class: 'vxe-select-option--label'
+                                class: 'vxe-select-option--add-label'
                             }, optVNs),
                             isAdd
                                 ? h('span', {
@@ -1661,7 +1783,7 @@ export default {
             const props = $xeSelect;
             const slots = $xeSelect.$scopedSlots;
             const reactData = $xeSelect.reactData;
-            const { className, multiple, loading, filterable, showTotalButoon, showCheckedButoon, showClearButton } = props;
+            const { className, multiple, loading, filterable, showTotalButoon, showCheckedButoon, showClearButton, showCloseButton } = props;
             const { initialized, isActivated, isAniVisible, optList, visiblePanel, bodyHeight, topSpaceHeight } = reactData;
             const vSize = $xeSelect.computeSize;
             const isDisabled = $xeSelect.computeIsDisabled;
@@ -1780,7 +1902,7 @@ export default {
                                     })
                                 ])
                                 : renderEmptyElement($xeSelect),
-                            showTotalButoon || (showCheckedButoon && multiple) || showClearButton || headerSlot
+                            (showCheckedButoon && multiple) || showClearButton || headerSlot
                                 ? h('div', {
                                     class: 'vxe-select--panel-header'
                                 }, headerSlot
@@ -1789,11 +1911,6 @@ export default {
                                         h('div', {
                                             class: 'vxe-tree-select--header-button'
                                         }, [
-                                            showTotalButoon
-                                                ? h('div', {
-                                                    class: 'vxe-tree-select--header-total'
-                                                }, getI18n('vxe.select.total', [selectVals.length, optList.length]))
-                                                : renderEmptyElement($xeSelect),
                                             h('div', {
                                                 class: 'vxe-tree-select--header-btns'
                                             }, [
@@ -1848,10 +1965,37 @@ export default {
                                     }, $xeSelect.renderOpts(h))
                                 ])
                             ]),
-                            footerSlot
+                            footerSlot || showTotalButoon || (showCloseButton && multiple)
                                 ? h('div', {
                                     class: 'vxe-select--panel-footer'
-                                }, $xeSelect.callSlot(footerSlot, {}, h))
+                                }, footerSlot
+                                    ? $xeSelect.callSlot(footerSlot, {}, h)
+                                    : [
+                                        h('div', {
+                                            class: 'vxe-select--footer-button'
+                                        }, [
+                                            showTotalButoon
+                                                ? h('div', {
+                                                    class: 'vxe-select--total-btns'
+                                                }, getI18n('vxe.select.total', [selectVals.length, optList.length]))
+                                                : renderEmptyElement($xeSelect),
+                                            showCloseButton && multiple
+                                                ? h('div', {
+                                                    class: 'vxe-select--oper-btns'
+                                                }, [
+                                                    h(VxeButtonComponent, {
+                                                        props: {
+                                                            content: getI18n('vxe.select.close'),
+                                                            mode: 'text'
+                                                        },
+                                                        on: {
+                                                            click: $xeSelect.closePanelEvent
+                                                        }
+                                                    })
+                                                ])
+                                                : renderEmptyElement($xeSelect)
+                                        ])
+                                    ])
                                 : renderEmptyElement($xeSelect)
                         ])
                     ]

package/es/select/style.css

@@ -112,22 +112,30 @@
   flex-direction: row;
 }
 
-.vxe-select--header-total {
+.vxe-select--header-button,
+.vxe-select--footer-button {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  justify-content: center;
+  white-space: nowrap;
+}
+
+.vxe-select--total-btns {
+  padding-left: var(--vxe-ui-current-padding);
   flex-shrink: 0;
-  padding-left: 0.8em;
 }
 
-.vxe-select--header-btns {
+.vxe-select--oper-btns {
   display: flex;
   flex-direction: row;
   flex-grow: 1;
   justify-content: right;
 }
 
+.vxe-select--footer-button {
+  display: flex;
+  flex-direction: row;
+}
+
 .vxe-select--panel-header {
   border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
 }
@@ -164,11 +172,9 @@
 
 .vxe-select-option {
   position: relative;
+  flex-direction: row;
+  display: flex;
   padding: 0 0.6em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -188,7 +194,7 @@
   color: var(--vxe-ui-font-primary-color);
 }
 .vxe-select-option:not(.is--disabled).is--hover {
-  background-color: var(--vxe-ui-base-hover-background-color);
+  background-color: var(--vxe-ui-select-option-hover-background-color);
 }
 .vxe-select-option.is--disabled {
   color: var(--vxe-ui-font-disabled-color);
@@ -201,6 +207,13 @@
   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;
@@ -208,6 +221,94 @@
   right: 0.6em;
 }
 
+.vxe-select-option--checkbox {
+  padding-right: 0.4em;
+}
+.vxe-select-option--checkbox {
+  cursor: pointer;
+}
+.vxe-select-option--checkbox .vxe-checkbox--icon {
+  font-size: 1.22em;
+}
+.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: 0.5em;
+  vertical-align: middle;
+}
+
+.vxe-select-option--radio {
+  padding-right: 0.4em;
+}
+.vxe-select-option--radio {
+  cursor: pointer;
+}
+.vxe-select-option--radio .vxe-radio--icon {
+  font-size: 1.26em;
+}
+.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: 0.5em;
+  vertical-align: middle;
+}
+
 .vxe-select--search-icon {
   margin-right: 0.5em;
 }
@@ -236,6 +337,16 @@
   font-size: var(--vxe-ui-font-size-mini);
 }
 
+.vxe-select,
+.vxe-select--panel {
+  --vxe-ui-current-padding: var(--vxe-ui-layout-padding-default);
+}
+.vxe-select.size--small, .vxe-select.size--mini,
+.vxe-select--panel.size--small,
+.vxe-select--panel.size--mini {
+  --vxe-ui-current-padding: var(--vxe-ui-layout-padding-half);
+}
+
 .vxe-select--panel .vxe-select-option {
   height: var(--vxe-ui-select-option-height-default);
 }

package/es/select/style.min.css

@@ -1 +1 @@
-.vxe-select{position:relative;display:inline-block;width:180px;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{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--header-total{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;padding-left:.8em}.vxe-select--header-btns{display:flex;flex-direction:row;flex-grow:1;justify-content:right}.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;padding:0 .6em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-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-base-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--add-icon{display:none;position:absolute;top:0;right:.6em}.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,.vxe-select--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-select--panel.size--medium,.vxe-select.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-select--panel.size--small,.vxe-select.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-select--panel.size--mini,.vxe-select.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-select--panel .vxe-select-option{height:var(--vxe-ui-select-option-height-default)}.vxe-select--panel .vxe-select--empty-placeholder,.vxe-select--panel .vxe-select--search-loading,.vxe-select--panel .vxe-select-option{line-height:var(--vxe-ui-select-option-height-default)}.vxe-select--panel.size--medium .vxe-select-option{height:var(--vxe-ui-select-option-height-medium)}.vxe-select--panel.size--medium .vxe-select--empty-placeholder,.vxe-select--panel.size--medium .vxe-select--search-loading,.vxe-select--panel.size--medium .vxe-select-option{line-height:var(--vxe-ui-select-option-height-medium)}.vxe-select--panel.size--small .vxe-select-option{height:var(--vxe-ui-select-option-height-small)}.vxe-select--panel.size--small .vxe-select--empty-placeholder,.vxe-select--panel.size--small .vxe-select--search-loading,.vxe-select--panel.size--small .vxe-select-option{line-height:var(--vxe-ui-select-option-height-small)}.vxe-select--panel.size--mini .vxe-select-option{height:var(--vxe-ui-select-option-height-mini)}.vxe-select--panel.size--mini .vxe-select--empty-placeholder,.vxe-select--panel.size--mini .vxe-select--search-loading,.vxe-select--panel.size--mini .vxe-select-option{line-height:var(--vxe-ui-select-option-height-mini)}
+.vxe-select{position:relative;display:inline-block;width:180px;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{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}.vxe-select--total-btns{padding-left:var(--vxe-ui-current-padding);flex-shrink:0}.vxe-select--oper-btns{display:flex;flex-direction:row;flex-grow:1;justify-content:right}.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}.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:.5em;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}.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:.5em;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,.vxe-select--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-select--panel.size--medium,.vxe-select.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-select--panel.size--small,.vxe-select.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-select--panel.size--mini,.vxe-select.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-select,.vxe-select--panel{--vxe-ui-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-current-padding:var(--vxe-ui-layout-padding-half)}.vxe-select--panel .vxe-select-option{height:var(--vxe-ui-select-option-height-default)}.vxe-select--panel .vxe-select--empty-placeholder,.vxe-select--panel .vxe-select--search-loading,.vxe-select--panel .vxe-select-option{line-height:var(--vxe-ui-select-option-height-default)}.vxe-select--panel.size--medium .vxe-select-option{height:var(--vxe-ui-select-option-height-medium)}.vxe-select--panel.size--medium .vxe-select--empty-placeholder,.vxe-select--panel.size--medium .vxe-select--search-loading,.vxe-select--panel.size--medium .vxe-select-option{line-height:var(--vxe-ui-select-option-height-medium)}.vxe-select--panel.size--small .vxe-select-option{height:var(--vxe-ui-select-option-height-small)}.vxe-select--panel.size--small .vxe-select--empty-placeholder,.vxe-select--panel.size--small .vxe-select--search-loading,.vxe-select--panel.size--small .vxe-select-option{line-height:var(--vxe-ui-select-option-height-small)}.vxe-select--panel.size--mini .vxe-select-option{height:var(--vxe-ui-select-option-height-mini)}.vxe-select--panel.size--mini .vxe-select--empty-placeholder,.vxe-select--panel.size--mini .vxe-select--search-loading,.vxe-select--panel.size--mini .vxe-select-option{line-height:var(--vxe-ui-select-option-height-mini)}