vxe-pc-ui 4.20.16 → 4.20.17

package/es/table-select/src/table-select.js

@@ -15,8 +15,10 @@ export function getRowUniqueId() {
 function createReactData() {
     return {
         initialized: false,
+        searchValue: '',
+        searchLoading: false,
+        tableData: [],
         tableColumns: [],
-        fullOptionList: [],
         panelIndex: 0,
         panelStyle: {},
         panelPlacement: null,
@@ -30,7 +32,9 @@ function createInternalData() {
     return {
         // hpTimeout: undefined,
         // vpTimeout: undefined,
-        fullRowMaps: {}
+        fullData: [],
+        afterVisibleList: [],
+        fullValMaps: {}
     };
 }
 export default defineVxeComponent({
@@ -62,6 +66,13 @@ export default defineVxeComponent({
         options: Array,
         optionProps: Object,
         lazyOptions: Array,
+        filterable: {
+            type: Boolean,
+            default: () => getConfig().tableSelect.filterable
+        },
+        filterConfig: Object,
+        remote: Boolean,
+        remoteConfig: Object,
         /**
          * 已废弃，请使用 popupConfig.zIndex
          * @deprecated
@@ -104,6 +115,7 @@ export default defineVxeComponent({
         const refInput = ref();
         const refGridWrapper = ref();
         const refOptionPanel = ref();
+        const refInpSearch = ref();
         const refGrid = ref();
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
@@ -186,6 +198,12 @@ export default defineVxeComponent({
                 data: undefined
             });
         });
+        const computeRemoteOpts = computed(() => {
+            return Object.assign({}, getConfig().tableSelect.remoteConfig, props.remoteConfig);
+        });
+        const computeFilterOpts = computed(() => {
+            return Object.assign({}, getConfig().tableSelect.filterConfig, props.filterConfig);
+        });
         const computeSelectGridOpts = computed(() => {
             const gridOpts = computeGridOpts.value;
             const checkboxOpts = computeCheckboxOpts.value;
@@ -200,16 +218,16 @@ export default defineVxeComponent({
                         Object.assign(newProxyConfig.ajax, {
                             query(params, ...args) {
                                 return Promise.resolve(ajaxMethods(params, ...args)).then(rest => {
-                                    let tableData = [];
+                                    let currData = [];
                                     if (pagerConfig) {
                                         const resultProp = resConfigs.result;
-                                        tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: null, $grid: null, $gantt: null }) : XEUtils.get(rest, resultProp || 'result')) || [];
+                                        currData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: null, $grid: null, $gantt: null }) : XEUtils.get(rest, resultProp || 'result')) || [];
                                     }
                                     else {
                                         const listProp = resConfigs.list;
-                                        tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: null, $grid: null, $gantt: null }) : XEUtils.get(rest, listProp)) : rest) || [];
+                                        currData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: null, $grid: null, $gantt: null }) : XEUtils.get(rest, listProp)) : rest) || [];
                                     }
-                                    cacheDataMap(tableData || []);
+                                    cacheDataMap(currData || []);
                                     return rest;
                                 });
                             }
@@ -222,15 +240,14 @@ export default defineVxeComponent({
         });
         const computeSelectLabel = computed(() => {
             const { modelValue, lazyOptions } = props;
-            const { fullOptionList } = reactData;
-            const { fullRowMaps } = internalData;
+            const { fullValMaps, fullData } = internalData;
             const valueField = computeValueField.value;
             const labelField = computeLabelField.value;
-            if (!fullOptionList) {
+            if (!fullData) {
                 return '';
             }
             return (XEUtils.isArray(modelValue) ? modelValue : [modelValue]).map(val => {
-                const cacheItem = fullRowMaps[val];
+                const cacheItem = fullValMaps[val];
                 if (cacheItem) {
                     return cacheItem.item[labelField];
                 }
@@ -292,7 +309,7 @@ export default defineVxeComponent({
             return rowid ? encodeURIComponent(rowid) : '';
         };
         const getRowsByValue = (modelValue) => {
-            const { fullRowMaps } = internalData;
+            const { fullValMaps } = internalData;
             const checkboxOpts = computeCheckboxOpts.value;
             const rowKeyField = computeRowKeyField.value;
             const valueField = computeValueField.value;
@@ -301,7 +318,7 @@ export default defineVxeComponent({
             const vals = XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
             if (checkboxOpts.reserve) {
                 vals.forEach(val => {
-                    const cacheItem = fullRowMaps[val];
+                    const cacheItem = fullValMaps[val];
                     rows.push(cacheItem
                         ? cacheItem.item
                         : {
@@ -313,7 +330,7 @@ export default defineVxeComponent({
             }
             else {
                 vals.forEach(val => {
-                    const cacheItem = fullRowMaps[val];
+                    const cacheItem = fullValMaps[val];
                     if (cacheItem) {
                         rows.push(cacheItem.item);
                     }
@@ -338,7 +355,11 @@ export default defineVxeComponent({
                 }
             });
         };
-        const loadTableColumn = (columns) => {
+        const loadData = (data) => {
+            cacheDataMap(data);
+            handleData();
+        };
+        const loadColumn = (columns) => {
             if (!columns || !columns.length) {
                 return;
             }
@@ -382,7 +403,7 @@ export default defineVxeComponent({
             const rowMaps = {};
             const keyMaps = {};
             if (treeConfig) {
-                // x
+                // 暂不支持
             }
             else {
                 XEUtils.arrayEach(dataList || options || [], (item, index, items) => {
@@ -398,13 +419,54 @@ export default defineVxeComponent({
                     if (rowMaps[value]) {
                         errLog('vxe.error.repeatKey', [valueField, value]);
                     }
-                    rowMaps[value] = { item, index, items, parent: null, nodes: [] };
+                    rowMaps[value] = { item, index, _index: index, items, parent: null, nodes: [] };
                 });
             }
-            reactData.fullOptionList = dataList || options || [];
-            internalData.fullRowMaps = pagerConfig ? Object.assign({}, internalData.fullRowMaps, rowMaps) : rowMaps;
+            internalData.fullData = dataList || options || [];
+            internalData.fullValMaps = pagerConfig ? Object.assign({}, internalData.fullValMaps, rowMaps) : rowMaps;
+            handleOptList();
             updateModel(props.modelValue);
         };
+        const handleOptList = () => {
+            const { remote, modelValue, filterable } = props;
+            const { searchValue } = reactData;
+            const { fullData, fullValMaps } = internalData;
+            const valueField = computeValueField.value;
+            const labelField = computeLabelField.value;
+            const filterOpts = computeFilterOpts.value;
+            const frMethod = filterOpts.filterMethod;
+            const searchStr = `${searchValue || ''}`.toLowerCase();
+            let avList = [];
+            if (remote) {
+                avList = fullData;
+            }
+            else {
+                if (filterable && frMethod) {
+                    avList = searchStr
+                        ? fullData.filter(row => frMethod({
+                            $tableSelect: $xeTableSelect,
+                            row,
+                            filterValue: searchValue,
+                            value: modelValue
+                        }))
+                        : fullData;
+                }
+                else if (filterable) {
+                    avList = searchStr ? fullData.filter(row => (`${row[labelField] || row[valueField]}`.toLowerCase().indexOf(searchStr) > -1)) : fullData;
+                }
+                else {
+                    avList = fullData;
+                }
+            }
+            avList.forEach((item, index) => {
+                const cacheItem = fullValMaps[item[valueField]];
+                if (cacheItem) {
+                    cacheItem._index = index;
+                }
+            });
+            internalData.afterVisibleList = avList;
+            return nextTick();
+        };
         const updateZindex = () => {
             const popupOpts = computePopupOpts.value;
             const customZIndex = popupOpts.zIndex || props.zIndex;
@@ -439,8 +501,10 @@ export default defineVxeComponent({
             return nextTick().then(handleStyle);
         };
         const showOptionPanel = () => {
-            const { loading } = props;
+            const { loading, remote, filterable } = props;
+            const { fullData } = internalData;
             const isDisabled = computeIsDisabled.value;
+            const remoteOpts = computeRemoteOpts.value;
             if (!loading && !isDisabled) {
                 if (internalData.vpTimeout) {
                     clearTimeout(internalData.vpTimeout);
@@ -451,12 +515,18 @@ export default defineVxeComponent({
                 if (!reactData.initialized) {
                     reactData.initialized = true;
                 }
+                if (filterable) {
+                    if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullData.length) {
+                        handleSearchEvent();
+                    }
+                }
                 reactData.isActivated = true;
                 reactData.isAniVisible = true;
                 internalData.vpTimeout = setTimeout(() => {
                     reactData.visiblePanel = true;
                     updateModel(props.modelValue);
                     internalData.vpTimeout = undefined;
+                    handleFocusSearch();
                     updatePlacement();
                 }, 10);
                 updateZindex();
@@ -464,7 +534,14 @@ export default defineVxeComponent({
             }
         };
         const hideOptionPanel = () => {
+            const { filterable } = props;
+            const filterOpts = computeFilterOpts.value;
             reactData.visiblePanel = false;
+            if (filterable) {
+                if (filterOpts.clearOnClose) {
+                    reactData.searchValue = '';
+                }
+            }
             if (internalData.vpTimeout) {
                 clearTimeout(internalData.vpTimeout);
             }
@@ -476,6 +553,36 @@ export default defineVxeComponent({
                 internalData.hpTimeout = undefined;
             }, 350);
         };
+        const handleData = () => {
+            const { afterVisibleList } = internalData;
+            reactData.tableData = afterVisibleList;
+            return nextTick();
+        };
+        const modelSearchEvent = (value) => {
+            reactData.searchValue = value;
+        };
+        const focusSearchEvent = () => {
+            reactData.isActivated = true;
+        };
+        const handleSearchEvent = () => {
+            const { modelValue, remote } = props;
+            const { searchValue } = reactData;
+            const remoteOpts = computeRemoteOpts.value;
+            const queryMethod = remoteOpts.queryMethod;
+            if (remote && queryMethod && remoteOpts.enabled) {
+                reactData.searchLoading = true;
+                Promise.resolve(queryMethod({ $tableSelect: $xeTableSelect, searchValue, value: modelValue })).then(() => nextTick())
+                    .catch(() => nextTick())
+                    .finally(() => {
+                    reactData.searchLoading = false;
+                });
+            }
+            else {
+                handleOptList();
+                handleData();
+            }
+        };
+        const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true });
         const changeEvent = (evnt, selectValue, row) => {
             emitModel(selectValue);
             if (selectValue !== props.modelValue) {
@@ -538,6 +645,16 @@ export default defineVxeComponent({
                 updatePlacement();
             }
         };
+        const handleFocusSearch = () => {
+            if (props.filterable) {
+                nextTick(() => {
+                    const inpSearch = refInpSearch.value;
+                    if (inpSearch) {
+                        inpSearch.focus();
+                    }
+                });
+            }
+        };
         const focusEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
@@ -601,8 +718,8 @@ export default defineVxeComponent({
         };
         Object.assign($xeTableSelect, tableSelectMethods, tableSelectPrivateMethods);
         const renderVN = () => {
-            const { className, options, loading } = props;
-            const { initialized, isActivated, isAniVisible, visiblePanel, tableColumns } = reactData;
+            const { className, loading, filterable, remote } = props;
+            const { initialized, isActivated, isAniVisible, visiblePanel, tableColumns, searchValue, tableData, searchLoading } = reactData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const selectLabel = computeSelectLabel.value;
@@ -611,6 +728,7 @@ export default defineVxeComponent({
             const popupOpts = computePopupOpts.value;
             const selectGridOpts = computeSelectGridOpts.value;
             const rowOpts = computeRowOpts.value;
+            const filterOpts = computeFilterOpts.value;
             const popupWrapperStyle = computePopupWrapperStyle.value;
             const { appendTo } = popupOpts;
             const headerSlot = slots.header;
@@ -631,6 +749,7 @@ export default defineVxeComponent({
                 ref: refElem,
                 class: ['vxe-table-select', className ? (XEUtils.isFunction(className) ? className({ $tableSelect: $xeTableSelect }) : className) : '', {
                         [`size--${vSize}`]: vSize,
+                        'is--filterable': filterable,
                         'is--visible': visiblePanel,
                         'is--disabled': isDisabled,
                         'is--loading': loading,
@@ -676,6 +795,26 @@ export default defineVxeComponent({
                             h('div', {
                                 class: 'vxe-table-select--panel-wrapper'
                             }, [
+                                filterable
+                                    ? h('div', {
+                                        class: 'vxe-table-select--panel-search'
+                                    }, [
+                                        h(VxeInputComponent, {
+                                            ref: refInpSearch,
+                                            class: 'vxe-table-select-search--input',
+                                            modelValue: searchValue,
+                                            clearable: true,
+                                            disabled: false,
+                                            readonly: false,
+                                            placeholder: getI18n('vxe.treeSelect.search'),
+                                            prefixIcon: getIcon().INPUT_SEARCH,
+                                            'onUpdate:modelValue': modelSearchEvent,
+                                            onFocus: focusSearchEvent,
+                                            onChange: triggerSearchEvent,
+                                            onSearch: triggerSearchEvent
+                                        })
+                                    ])
+                                    : renderEmptyElement($xeTableSelect),
                                 headerSlot
                                     ? h('div', {
                                         class: 'vxe-table-select--panel-header'
@@ -690,7 +829,7 @@ export default defineVxeComponent({
                                         style: popupWrapperStyle
                                     }, [
                                         VxeTableGridComponent
-                                            ? h(VxeTableGridComponent, Object.assign(Object.assign(Object.assign({}, selectGridOpts), gridEvents), { class: 'vxe-table-select--grid', ref: refGrid, rowConfig: rowOpts, data: options, columns: tableColumns.length ? tableColumns : selectGridOpts.columns, height: '100%', autoResize: true, onRadioChange: radioChangeEvent, onCheckboxChange: checkboxChangeEvent, onCheckboxAll: checkboxAllEvent }), Object.assign({}, slots, {
+                                            ? h(VxeTableGridComponent, Object.assign(Object.assign(Object.assign({}, selectGridOpts), gridEvents), { class: 'vxe-table-select--grid', ref: refGrid, loading: remote && searchLoading, rowConfig: rowOpts, data: tableData, columns: tableColumns.length ? tableColumns : selectGridOpts.columns, height: '100%', autoResize: true, onRadioChange: radioChangeEvent, onCheckboxChange: checkboxChangeEvent, onCheckboxAll: checkboxAllEvent }), Object.assign({}, slots, {
                                                 header: undefined,
                                                 footer: undefined,
                                                 prefixSlot: undefined
@@ -698,10 +837,16 @@ export default defineVxeComponent({
                                             : renderEmptyElement($xeTableSelect)
                                     ])
                                 ]),
-                                footerSlot
+                                footerSlot || (filterable && searchValue && !remote && filterOpts.showResultCount)
                                     ? h('div', {
                                         class: 'vxe-table-select--panel-footer'
-                                    }, footerSlot({}))
+                                    }, footerSlot
+                                        ? footerSlot({})
+                                        : [
+                                            h('div', {
+                                                class: 'vxe-table-select--search-count'
+                                            }, searchLoading ? '' : getI18n('vxe.tableSelect.filterCount', [tableData.length]))
+                                        ])
                                     : renderEmptyElement($xeTableSelect)
                             ])
                         ]
@@ -709,17 +854,17 @@ export default defineVxeComponent({
                 ])
             ]);
         };
-        watch(() => props.options, () => {
-            cacheDataMap();
+        watch(() => props.options, (val) => {
+            loadData(val || []);
         });
         watch(() => props.columns, (val) => {
-            loadTableColumn(val);
+            loadColumn(val);
         });
         watch(() => props.modelValue, (val) => {
             updateModel(val);
         });
-        loadTableColumn(props.columns);
-        cacheDataMap();
+        loadColumn(props.columns);
+        loadData(props.options || []);
         onMounted(() => {
             const { gridConfig } = props;
             if (gridConfig && gridConfig.proxyConfig) {

package/es/table-select/style.css

@@ -1,3 +1,34 @@
+.vxe-table-select,
+.vxe-table-select--panel {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-default);
+}
+.vxe-table-select.size--xlarge,
+.vxe-table-select--panel.size--xlarge {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-xlarge);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-xlarge);
+}
+.vxe-table-select.size--large,
+.vxe-table-select--panel.size--large {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-large);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-large);
+}
+.vxe-table-select.size--medium,
+.vxe-table-select--panel.size--medium {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-medium);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-medium);
+}
+.vxe-table-select.size--small,
+.vxe-table-select--panel.size--small {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-small);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-small);
+}
+.vxe-table-select.size--mini,
+.vxe-table-select--panel.size--mini {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-mini);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-mini);
+}
+
 .vxe-table-select {
   position: relative;
   display: inline-block;
@@ -78,13 +109,15 @@
 
 .vxe-table-select--panel-search {
   display: block;
+  padding: var(--vxe-ui-table-select-current-padding) var(--vxe-ui-table-select-current-padding) 0 var(--vxe-ui-table-select-current-padding);
 }
 .vxe-table-select--panel-search .vxe-table-select-search--input {
   width: 100%;
 }
 
 .vxe-table-select--panel-wrapper {
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
   position: relative;
   border-radius: var(--vxe-ui-base-border-radius);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -103,31 +136,25 @@
 
 .vxe-table-select--panel-header,
 .vxe-table-select--panel-footer {
-  padding: 4px 0;
+  padding: var(--vxe-ui-table-select-current-padding) 0;
 }
 
 .vxe-table-select-grid--wrapper {
   position: relative;
   overflow: auto;
-  padding: var(--vxe-ui-layout-padding-default);
+  padding: var(--vxe-ui-table-select-current-padding);
   height: 21em;
   width: 36em;
   outline: 0;
 }
 
+.vxe-table-select--search-count {
+  text-align: right;
+  padding: 0 var(--vxe-ui-table-select-current-padding);
+  color: var(--vxe-ui-font-placeholder-color);
+}
+
 .vxe-table-select,
 .vxe-table-select--panel {
-  font-size: var(--vxe-ui-font-size-default);
-}
-.vxe-table-select.size--medium,
-.vxe-table-select--panel.size--medium {
-  font-size: var(--vxe-ui-font-size-medium);
-}
-.vxe-table-select.size--small,
-.vxe-table-select--panel.size--small {
-  font-size: var(--vxe-ui-font-size-small);
-}
-.vxe-table-select.size--mini,
-.vxe-table-select--panel.size--mini {
-  font-size: var(--vxe-ui-font-size-mini);
+  font-size: var(--vxe-ui-table-select-current-font-size);
 }

package/es/table-select/style.min.css

@@ -1 +1 @@
-.vxe-table-select{position:relative;display:inline-block;width:180px;color:var(--vxe-ui-font-color);text-align:left}.vxe-table-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-table-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-table-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-table-select>.vxe-input{width:100%}.vxe-table-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-table-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-table-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-table-select--panel{pointer-events:none;display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-table-select--panel:not(.is--transfer){min-width:100%}.vxe-table-select--panel.is--transfer{position:fixed}.vxe-table-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-table-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-table-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-table-select--panel.ani--enter>div::after{display:none}.vxe-table-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-table-select--panel-search{display:block}.vxe-table-select--panel-search .vxe-table-select-search--input{width:100%}.vxe-table-select--panel-wrapper{display:inline-flex;position:relative;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);pointer-events:auto}.vxe-table-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-table-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-table-select--panel-footer,.vxe-table-select--panel-header{padding:4px 0}.vxe-table-select-grid--wrapper{position:relative;overflow:auto;padding:var(--vxe-ui-layout-padding-default);height:21em;width:36em;outline:0}.vxe-table-select,.vxe-table-select--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-table-select--panel.size--medium,.vxe-table-select.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-table-select--panel.size--small,.vxe-table-select.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-table-select--panel.size--mini,.vxe-table-select.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-table-select,.vxe-table-select--panel{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-table-select--panel.size--xlarge,.vxe-table-select.size--xlarge{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-xlarge)}.vxe-table-select--panel.size--large,.vxe-table-select.size--large{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-large)}.vxe-table-select--panel.size--medium,.vxe-table-select.size--medium{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-medium)}.vxe-table-select--panel.size--small,.vxe-table-select.size--small{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-small)}.vxe-table-select--panel.size--mini,.vxe-table-select.size--mini{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-mini)}.vxe-table-select{position:relative;display:inline-block;width:180px;color:var(--vxe-ui-font-color);text-align:left}.vxe-table-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-table-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-table-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-table-select>.vxe-input{width:100%}.vxe-table-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-table-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-table-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-table-select--panel{pointer-events:none;display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-table-select--panel:not(.is--transfer){min-width:100%}.vxe-table-select--panel.is--transfer{position:fixed}.vxe-table-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-table-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-table-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-table-select--panel.ani--enter>div::after{display:none}.vxe-table-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-table-select--panel-search{display:block;padding:var(--vxe-ui-table-select-current-padding) var(--vxe-ui-table-select-current-padding) 0 var(--vxe-ui-table-select-current-padding)}.vxe-table-select--panel-search .vxe-table-select-search--input{width:100%}.vxe-table-select--panel-wrapper{display:flex;flex-direction:column;position:relative;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);pointer-events:auto}.vxe-table-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-table-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-table-select--panel-footer,.vxe-table-select--panel-header{padding:var(--vxe-ui-table-select-current-padding) 0}.vxe-table-select-grid--wrapper{position:relative;overflow:auto;padding:var(--vxe-ui-table-select-current-padding);height:21em;width:36em;outline:0}.vxe-table-select--search-count{text-align:right;padding:0 var(--vxe-ui-table-select-current-padding);color:var(--vxe-ui-font-placeholder-color)}.vxe-table-select,.vxe-table-select--panel{font-size:var(--vxe-ui-table-select-current-font-size)}

package/es/tree-select/src/tree-select.js

@@ -90,7 +90,7 @@ export default defineVxeComponent({
             default: () => getConfig().treeSelect.size || getConfig().size
         },
         remote: Boolean,
-        remoteConfig: Function,
+        remoteConfig: Object,
         showRadio: {
             type: Boolean,
             default: () => getConfig().treeSelect.showRadio

package/es/ui/index.js

@@ -1,7 +1,7 @@
 import { VxeUI, setConfig, setIcon } from '@vxe-ui/core';
 import { dynamicApp } from '../dynamics';
 import { warnLog } from './src/log';
-export const version = "4.20.16";
+export const version = "4.20.17";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 export function config(options) {
@@ -407,6 +407,10 @@ setConfig({
     switch: {},
     tabPane: {},
     tableSelect: {
+        remoteConfig: {
+            enabled: true,
+            autoLoad: true
+        },
         gridConfig: {
             showOverflow: true,
             showHeaderOverflow: true,
@@ -486,6 +490,10 @@ setConfig({
             gt: 0,
             oSize: 2
         },
+        remoteConfig: {
+            enabled: true,
+            autoLoad: true
+        },
         treeConfig: {
             maxHeight: 300,
             radioConfig: {},

package/es/ui/src/log.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.20.16"}`;
+const uiVersion = `ui v${"4.20.17"}`;
 export function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';

package/es/vxe-table-select/style.css

@@ -1,3 +1,34 @@
+.vxe-table-select,
+.vxe-table-select--panel {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-default);
+}
+.vxe-table-select.size--xlarge,
+.vxe-table-select--panel.size--xlarge {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-xlarge);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-xlarge);
+}
+.vxe-table-select.size--large,
+.vxe-table-select--panel.size--large {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-large);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-large);
+}
+.vxe-table-select.size--medium,
+.vxe-table-select--panel.size--medium {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-medium);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-medium);
+}
+.vxe-table-select.size--small,
+.vxe-table-select--panel.size--small {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-small);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-small);
+}
+.vxe-table-select.size--mini,
+.vxe-table-select--panel.size--mini {
+  --vxe-ui-table-select-current-font-size: var(--vxe-ui-font-size-mini);
+  --vxe-ui-table-select-current-padding: var(--vxe-ui-layout-padding-mini);
+}
+
 .vxe-table-select {
   position: relative;
   display: inline-block;
@@ -78,13 +109,15 @@
 
 .vxe-table-select--panel-search {
   display: block;
+  padding: var(--vxe-ui-table-select-current-padding) var(--vxe-ui-table-select-current-padding) 0 var(--vxe-ui-table-select-current-padding);
 }
 .vxe-table-select--panel-search .vxe-table-select-search--input {
   width: 100%;
 }
 
 .vxe-table-select--panel-wrapper {
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
   position: relative;
   border-radius: var(--vxe-ui-base-border-radius);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -103,31 +136,25 @@
 
 .vxe-table-select--panel-header,
 .vxe-table-select--panel-footer {
-  padding: 4px 0;
+  padding: var(--vxe-ui-table-select-current-padding) 0;
 }
 
 .vxe-table-select-grid--wrapper {
   position: relative;
   overflow: auto;
-  padding: var(--vxe-ui-layout-padding-default);
+  padding: var(--vxe-ui-table-select-current-padding);
   height: 21em;
   width: 36em;
   outline: 0;
 }
 
+.vxe-table-select--search-count {
+  text-align: right;
+  padding: 0 var(--vxe-ui-table-select-current-padding);
+  color: var(--vxe-ui-font-placeholder-color);
+}
+
 .vxe-table-select,
 .vxe-table-select--panel {
-  font-size: var(--vxe-ui-font-size-default);
-}
-.vxe-table-select.size--medium,
-.vxe-table-select--panel.size--medium {
-  font-size: var(--vxe-ui-font-size-medium);
-}
-.vxe-table-select.size--small,
-.vxe-table-select--panel.size--small {
-  font-size: var(--vxe-ui-font-size-small);
-}
-.vxe-table-select.size--mini,
-.vxe-table-select--panel.size--mini {
-  font-size: var(--vxe-ui-font-size-mini);
+  font-size: var(--vxe-ui-table-select-current-font-size);
 }

package/es/vxe-table-select/style.min.css

@@ -1 +1 @@
-.vxe-table-select{position:relative;display:inline-block;width:180px;color:var(--vxe-ui-font-color);text-align:left}.vxe-table-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-table-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-table-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-table-select>.vxe-input{width:100%}.vxe-table-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-table-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-table-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-table-select--panel{pointer-events:none;display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-table-select--panel:not(.is--transfer){min-width:100%}.vxe-table-select--panel.is--transfer{position:fixed}.vxe-table-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-table-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-table-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-table-select--panel.ani--enter>div::after{display:none}.vxe-table-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-table-select--panel-search{display:block}.vxe-table-select--panel-search .vxe-table-select-search--input{width:100%}.vxe-table-select--panel-wrapper{display:inline-flex;position:relative;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);pointer-events:auto}.vxe-table-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-table-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-table-select--panel-footer,.vxe-table-select--panel-header{padding:4px 0}.vxe-table-select-grid--wrapper{position:relative;overflow:auto;padding:var(--vxe-ui-layout-padding-default);height:21em;width:36em;outline:0}.vxe-table-select,.vxe-table-select--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-table-select--panel.size--medium,.vxe-table-select.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-table-select--panel.size--small,.vxe-table-select.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-table-select--panel.size--mini,.vxe-table-select.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-table-select,.vxe-table-select--panel{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-table-select--panel.size--xlarge,.vxe-table-select.size--xlarge{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-xlarge)}.vxe-table-select--panel.size--large,.vxe-table-select.size--large{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-large)}.vxe-table-select--panel.size--medium,.vxe-table-select.size--medium{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-medium)}.vxe-table-select--panel.size--small,.vxe-table-select.size--small{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-small)}.vxe-table-select--panel.size--mini,.vxe-table-select.size--mini{--vxe-ui-table-select-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-table-select-current-padding:var(--vxe-ui-layout-padding-mini)}.vxe-table-select{position:relative;display:inline-block;width:180px;color:var(--vxe-ui-font-color);text-align:left}.vxe-table-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-table-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-table-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-table-select>.vxe-input{width:100%}.vxe-table-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-table-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-table-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-table-select--panel{pointer-events:none;display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-table-select--panel:not(.is--transfer){min-width:100%}.vxe-table-select--panel.is--transfer{position:fixed}.vxe-table-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-table-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-table-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-table-select--panel.ani--enter>div::after{display:none}.vxe-table-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-table-select--panel-search{display:block;padding:var(--vxe-ui-table-select-current-padding) var(--vxe-ui-table-select-current-padding) 0 var(--vxe-ui-table-select-current-padding)}.vxe-table-select--panel-search .vxe-table-select-search--input{width:100%}.vxe-table-select--panel-wrapper{display:flex;flex-direction:column;position:relative;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);pointer-events:auto}.vxe-table-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-table-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-table-select--panel-footer,.vxe-table-select--panel-header{padding:var(--vxe-ui-table-select-current-padding) 0}.vxe-table-select-grid--wrapper{position:relative;overflow:auto;padding:var(--vxe-ui-table-select-current-padding);height:21em;width:36em;outline:0}.vxe-table-select--search-count{text-align:right;padding:0 var(--vxe-ui-table-select-current-padding);color:var(--vxe-ui-font-placeholder-color)}.vxe-table-select,.vxe-table-select--panel{font-size:var(--vxe-ui-table-select-current-font-size)}