vxe-pc-ui 4.20.16 → 4.20.17

package/dist/all.esm.js

@@ -101,7 +101,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.20.16"}`;
+const uiVersion = `ui v${"4.20.17"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -115,7 +115,7 @@ function createComponentLog(name) {
 const warnLog$j = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.20.16";
+const version = "4.20.17";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -521,6 +521,10 @@ setConfig$1({
     switch: {},
     tabPane: {},
     tableSelect: {
+        remoteConfig: {
+            enabled: true,
+            autoLoad: true
+        },
         gridConfig: {
             showOverflow: true,
             showHeaderOverflow: true,
@@ -600,6 +604,10 @@ setConfig$1({
             gt: 0,
             oSize: 2
         },
+        remoteConfig: {
+            enabled: true,
+            autoLoad: true
+        },
         treeConfig: {
             maxHeight: 300,
             radioConfig: {},
@@ -976,10 +984,14 @@ var zhCN = {
             allExpand: '全部展开',
             clearExpand: '全部收起',
             total: '已选 {0} 项',
+            filterCount: '共找到 {0} 条记录',
             close: '关闭',
             search: '搜索',
             emptyText: '暂无数据'
         },
+        tableSelect: {
+            filterCount: '共找到 {0} 条记录'
+        },
         pager: {
             goto: '前往',
             gotoTitle: '页数',
@@ -33798,10 +33810,21 @@ var VxeSelectComponent = defineVxeComponent({
             }
             else {
                 if (filterable && frMethod) {
-                    avList = fullData.filter(option => isOptionVisible(option) && frMethod({ $select: $xeSelect, group: null, option, searchValue, value: modelValue }));
+                    avList = searchValue
+                        ? fullData.filter(option => {
+                            return isOptionVisible(option) && frMethod({
+                                $select: $xeSelect,
+                                group: null,
+                                option,
+                                filterValue: searchValue,
+                                searchValue: searchValue,
+                                value: modelValue
+                            });
+                        })
+                        : fullData;
                 }
                 else if (filterable) {
-                    avList = fullData.filter(option => isOptionVisible(option) && (!searchStr || `${option[labelField] || option[valueField]}`.toLowerCase().indexOf(searchStr) > -1));
+                    avList = searchStr ? fullData.filter(option => isOptionVisible(option) && (`${option[labelField] || option[valueField]}`.toLowerCase().indexOf(searchStr) > -1)) : fullData;
                 }
                 else {
                     avList = fullData.filter(isOptionVisible);
@@ -40846,8 +40869,10 @@ function getRowUniqueId() {
 function createReactData$5() {
     return {
         initialized: false,
+        searchValue: '',
+        searchLoading: false,
+        tableData: [],
         tableColumns: [],
-        fullOptionList: [],
         panelIndex: 0,
         panelStyle: {},
         panelPlacement: null,
@@ -40861,7 +40886,9 @@ function createInternalData$5() {
     return {
         // hpTimeout: undefined,
         // vpTimeout: undefined,
-        fullRowMaps: {}
+        fullData: [],
+        afterVisibleList: [],
+        fullValMaps: {}
     };
 }
 var VxeTableSelectComponent = defineVxeComponent({
@@ -40893,6 +40920,13 @@ var VxeTableSelectComponent = defineVxeComponent({
         options: Array,
         optionProps: Object,
         lazyOptions: Array,
+        filterable: {
+            type: Boolean,
+            default: () => getConfig$2().tableSelect.filterable
+        },
+        filterConfig: Object,
+        remote: Boolean,
+        remoteConfig: Object,
         /**
          * 已废弃，请使用 popupConfig.zIndex
          * @deprecated
@@ -40935,6 +40969,7 @@ var VxeTableSelectComponent = defineVxeComponent({
         const refInput = ref();
         const refGridWrapper = ref();
         const refOptionPanel = ref();
+        const refInpSearch = ref();
         const refGrid = ref();
         const reactData = reactive(createReactData$5());
         const internalData = createInternalData$5();
@@ -41017,6 +41052,12 @@ var VxeTableSelectComponent = defineVxeComponent({
                 data: undefined
             });
         });
+        const computeRemoteOpts = computed(() => {
+            return Object.assign({}, getConfig$2().tableSelect.remoteConfig, props.remoteConfig);
+        });
+        const computeFilterOpts = computed(() => {
+            return Object.assign({}, getConfig$2().tableSelect.filterConfig, props.filterConfig);
+        });
         const computeSelectGridOpts = computed(() => {
             const gridOpts = computeGridOpts.value;
             const checkboxOpts = computeCheckboxOpts.value;
@@ -41031,16 +41072,16 @@ var VxeTableSelectComponent = 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;
                                 });
                             }
@@ -41053,15 +41094,14 @@ var VxeTableSelectComponent = 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];
                 }
@@ -41123,7 +41163,7 @@ var VxeTableSelectComponent = 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;
@@ -41132,7 +41172,7 @@ var VxeTableSelectComponent = 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
                         : {
@@ -41144,7 +41184,7 @@ var VxeTableSelectComponent = defineVxeComponent({
             }
             else {
                 vals.forEach(val => {
-                    const cacheItem = fullRowMaps[val];
+                    const cacheItem = fullValMaps[val];
                     if (cacheItem) {
                         rows.push(cacheItem.item);
                     }
@@ -41169,7 +41209,11 @@ var VxeTableSelectComponent = defineVxeComponent({
                 }
             });
         };
-        const loadTableColumn = (columns) => {
+        const loadData = (data) => {
+            cacheDataMap(data);
+            handleData();
+        };
+        const loadColumn = (columns) => {
             if (!columns || !columns.length) {
                 return;
             }
@@ -41227,13 +41271,54 @@ var VxeTableSelectComponent = defineVxeComponent({
                     if (rowMaps[value]) {
                         errLog$4('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;
@@ -41268,8 +41353,10 @@ var VxeTableSelectComponent = 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);
@@ -41280,12 +41367,18 @@ var VxeTableSelectComponent = 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();
@@ -41293,7 +41386,14 @@ var VxeTableSelectComponent = 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);
             }
@@ -41305,6 +41405,36 @@ var VxeTableSelectComponent = 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) {
@@ -41367,6 +41497,16 @@ var VxeTableSelectComponent = 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) {
@@ -41430,8 +41570,8 @@ var VxeTableSelectComponent = 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;
@@ -41440,6 +41580,7 @@ var VxeTableSelectComponent = 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;
@@ -41460,6 +41601,7 @@ var VxeTableSelectComponent = 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,
@@ -41505,6 +41647,26 @@ var VxeTableSelectComponent = 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$1('vxe.treeSelect.search'),
+                                            prefixIcon: getIcon$2().INPUT_SEARCH,
+                                            'onUpdate:modelValue': modelSearchEvent,
+                                            onFocus: focusSearchEvent,
+                                            onChange: triggerSearchEvent,
+                                            onSearch: triggerSearchEvent
+                                        })
+                                    ])
+                                    : renderEmptyElement$2($xeTableSelect),
                                 headerSlot
                                     ? h('div', {
                                         class: 'vxe-table-select--panel-header'
@@ -41519,7 +41681,7 @@ var VxeTableSelectComponent = 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
@@ -41527,10 +41689,16 @@ var VxeTableSelectComponent = defineVxeComponent({
                                             : renderEmptyElement$2($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$1('vxe.tableSelect.filterCount', [tableData.length]))
+                                        ])
                                     : renderEmptyElement$2($xeTableSelect)
                             ])
                         ]
@@ -41538,17 +41706,17 @@ var VxeTableSelectComponent = 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) {
@@ -47639,7 +47807,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
             default: () => getConfig$g().treeSelect.size || getConfig$g().size
         },
         remote: Boolean,
-        remoteConfig: Function,
+        remoteConfig: Object,
         showRadio: {
             type: Boolean,
             default: () => getConfig$g().treeSelect.showRadio