vxe-table 4.2.6-beta.3 → 4.2.6

package/es/select/src/select.js

@@ -1,10 +1,11 @@
-import { defineComponent, h, Teleport, ref, inject, resolveComponent, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted } from 'vue';
+import { defineComponent, h, Teleport, ref, inject, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted, createCommentVNode } from 'vue';
 import XEUtils from 'xe-utils';
 import GlobalConfig from '../../v-x-e-table/src/conf';
 import { useSize } from '../../hooks/size';
 import { getEventTargetNode, getAbsolutePos } from '../../tools/dom';
 import { getLastZIndex, nextZIndex, getFuncText, formatText } from '../../tools/utils';
 import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event';
+import VxeInputComponent from '../../input/src/input';
 function isOptionVisible(option) {
     return option.visible !== false;
 }
@@ -30,6 +31,10 @@ export default defineComponent({
         optionConfig: Object,
         className: [String, Function],
         size: { type: String, default: function () { return GlobalConfig.select.size || GlobalConfig.size; } },
+        filterable: Boolean,
+        filterMethod: Function,
+        remote: Boolean,
+        remoteMethod: Function,
         emptyText: String,
         // 已废弃，被 option-config.keyField 替换
         optionId: { type: String, default: function () { return GlobalConfig.select.optionId; } },
@@ -55,16 +60,21 @@ export default defineComponent({
             fullOptionList: [],
             visibleGroupList: [],
             visibleOptionList: [],
+            remoteValueList: [],
             panelIndex: 0,
             panelStyle: {},
             panelPlacement: null,
+            currentOption: null,
             currentValue: null,
             visiblePanel: false,
             animatVisible: false,
-            isActivated: false
+            isActivated: false,
+            searchValue: '',
+            searchLoading: false
         });
         var refElem = ref();
         var refInput = ref();
+        var refInpSearch = ref();
         var refOptionWrapper = ref();
         var refOptionPanel = ref();
         var refMaps = {
@@ -139,16 +149,27 @@ export default defineComponent({
             }
             return fullOptionList.find(function (item) { return optionValue === item[valueField]; });
         };
+        var getRemoteSelectLabel = function (value) {
+            var remoteValueList = reactData.remoteValueList;
+            var labelField = computeLabelField.value;
+            var remoteItem = remoteValueList.find(function (item) { return value === item.key; });
+            var item = remoteItem ? remoteItem.result : null;
+            return XEUtils.toValueString(item ? item[labelField] : value);
+        };
         var getSelectLabel = function (value) {
             var labelField = computeLabelField.value;
             var item = findOption(value);
             return XEUtils.toValueString(item ? item[labelField] : value);
         };
         var computeSelectLabel = computed(function () {
-            var modelValue = props.modelValue, multiple = props.multiple;
+            var modelValue = props.modelValue, multiple = props.multiple, remote = props.remote;
             var multiMaxCharNum = computeMultiMaxCharNum.value;
             if (modelValue && multiple) {
-                return (XEUtils.isArray(modelValue) ? modelValue : [modelValue]).map(function (val) {
+                var vals = XEUtils.isArray(modelValue) ? modelValue : [modelValue];
+                if (remote) {
+                    return vals.map(function (val) { return getRemoteSelectLabel(val); }).join(', ');
+                }
+                return vals.map(function (val) {
                     var label = getSelectLabel(val);
                     if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
                         return label.substring(0, multiMaxCharNum) + "...";
@@ -156,6 +177,9 @@ export default defineComponent({
                     return label;
                 }).join(', ');
             }
+            if (remote) {
+                return getRemoteSelectLabel(modelValue);
+            }
             return getSelectLabel(modelValue);
         });
         var getOptkey = function () {
@@ -170,13 +194,32 @@ export default defineComponent({
          * 刷新选项，当选项被动态显示/隐藏时可能会用到
          */
         var refreshOption = function () {
-            var fullOptionList = reactData.fullOptionList, fullGroupList = reactData.fullGroupList;
+            var filterable = props.filterable, filterMethod = props.filterMethod;
+            var fullOptionList = reactData.fullOptionList, fullGroupList = reactData.fullGroupList, searchValue = reactData.searchValue;
             var isGroup = computeIsGroup.value;
+            var groupLabelField = computeGroupLabelField.value;
+            var labelField = computeLabelField.value;
             if (isGroup) {
-                reactData.visibleGroupList = fullGroupList.filter(isOptionVisible);
+                if (filterable && filterMethod) {
+                    reactData.visibleGroupList = fullGroupList.filter(function (group) { return isOptionVisible(group) && filterMethod({ group: group, option: null, searchValue: searchValue }); });
+                }
+                else if (filterable) {
+                    reactData.visibleGroupList = fullGroupList.filter(function (group) { return isOptionVisible(group) && (!searchValue || ("" + group[groupLabelField]).indexOf(searchValue) > -1); });
+                }
+                else {
+                    reactData.visibleGroupList = fullGroupList.filter(isOptionVisible);
+                }
             }
             else {
-                reactData.visibleOptionList = fullOptionList.filter(isOptionVisible);
+                if (filterable && filterMethod) {
+                    reactData.visibleOptionList = fullOptionList.filter(function (option) { return isOptionVisible(option) && filterMethod({ group: null, option: option, searchValue: searchValue }); });
+                }
+                else if (filterable) {
+                    reactData.visibleOptionList = fullOptionList.filter(function (option) { return isOptionVisible(option) && (!searchValue || ("" + option[labelField]).indexOf(searchValue) > -1); });
+                }
+                else {
+                    reactData.visibleOptionList = fullOptionList.filter(isOptionVisible);
+                }
             }
             return nextTick();
         };
@@ -205,6 +248,7 @@ export default defineComponent({
         var setCurrentOption = function (option) {
             var valueField = computeValueField.value;
             if (option) {
+                reactData.currentOption = option;
                 reactData.currentValue = option[valueField];
             }
         };
@@ -310,7 +354,7 @@ export default defineComponent({
         };
         var hidePanelTimeout;
         var showOptionPanel = function () {
-            var loading = props.loading, disabled = props.disabled;
+            var loading = props.loading, disabled = props.disabled, filterable = props.filterable;
             if (!loading && !disabled) {
                 clearTimeout(hidePanelTimeout);
                 if (!reactData.inited) {
@@ -318,6 +362,9 @@ export default defineComponent({
                 }
                 reactData.isActivated = true;
                 reactData.animatVisible = true;
+                if (filterable) {
+                    refreshOption();
+                }
                 setTimeout(function () {
                     var modelValue = props.modelValue, multiple = props.multiple;
                     var currOption = findOption(multiple && modelValue ? modelValue[0] : modelValue);
@@ -326,12 +373,15 @@ export default defineComponent({
                         setCurrentOption(currOption);
                         scrollToOption(currOption);
                     }
+                    handleFocusSearch();
                 }, 10);
                 updateZindex();
                 updatePlacement();
             }
         };
         var hideOptionPanel = function () {
+            reactData.searchValue = '';
+            reactData.searchLoading = false;
             reactData.visiblePanel = false;
             hidePanelTimeout = window.setTimeout(function () {
                 reactData.animatVisible = false;
@@ -348,6 +398,7 @@ export default defineComponent({
             }
         };
         var clearValueEvent = function (evnt, selectValue) {
+            reactData.remoteValueList = [];
             changeEvent(evnt, selectValue);
             selectMethods.dispatchEvent('clear', { value: selectValue }, evnt);
         };
@@ -355,8 +406,9 @@ export default defineComponent({
             clearValueEvent(evnt, null);
             hideOptionPanel();
         };
-        var changeOptionEvent = function (evnt, selectValue) {
+        var changeOptionEvent = function (evnt, selectValue, option) {
             var modelValue = props.modelValue, multiple = props.multiple;
+            var remoteValueList = reactData.remoteValueList;
             if (multiple) {
                 var multipleValue = void 0;
                 if (modelValue) {
@@ -370,9 +422,17 @@ export default defineComponent({
                 else {
                     multipleValue = [selectValue];
                 }
+                var remoteItem = remoteValueList.find(function (item) { return item.key === selectValue; });
+                if (remoteItem) {
+                    remoteItem.result = option;
+                }
+                else {
+                    remoteValueList.push({ key: selectValue, result: option });
+                }
                 changeEvent(evnt, multipleValue);
             }
             else {
+                reactData.remoteValueList = [{ key: selectValue, result: option }];
                 changeEvent(evnt, selectValue);
                 hideOptionPanel();
             }
@@ -481,7 +541,7 @@ export default defineComponent({
         };
         var handleGlobalKeydownEvent = function (evnt) {
             var clearable = props.clearable, disabled = props.disabled;
-            var visiblePanel = reactData.visiblePanel, currentValue = reactData.currentValue;
+            var visiblePanel = reactData.visiblePanel, currentValue = reactData.currentValue, currentOption = reactData.currentOption;
             if (!disabled) {
                 var isTab = hasEventKey(evnt, EVENT_KEYS.TAB);
                 var isEnter = hasEventKey(evnt, EVENT_KEYS.ENTER);
@@ -500,7 +560,7 @@ export default defineComponent({
                     else if (isEnter) {
                         evnt.preventDefault();
                         evnt.stopPropagation();
-                        changeOptionEvent(evnt, currentValue);
+                        changeOptionEvent(evnt, currentValue, currentOption);
                     }
                     else if (isUpArrow || isDwArrow) {
                         evnt.preventDefault();
@@ -529,6 +589,16 @@ export default defineComponent({
         var handleGlobalBlurEvent = function () {
             hideOptionPanel();
         };
+        var handleFocusSearch = function () {
+            if (props.filterable) {
+                nextTick(function () {
+                    var inpSearch = refInpSearch.value;
+                    if (inpSearch) {
+                        inpSearch.focus();
+                    }
+                });
+            }
+        };
         var focusEvent = function () {
             if (!props.disabled) {
                 reactData.isActivated = true;
@@ -537,6 +607,34 @@ export default defineComponent({
         var blurEvent = function () {
             reactData.isActivated = false;
         };
+        var modelSearchEvent = function (value) {
+            reactData.searchValue = value;
+        };
+        var focusSearchEvent = function () {
+            reactData.isActivated = true;
+        };
+        var keydownSearchEvent = function (params) {
+            var $event = params.$event;
+            var isEnter = hasEventKey($event, EVENT_KEYS.ENTER);
+            if (isEnter) {
+                $event.preventDefault();
+                $event.stopPropagation();
+            }
+        };
+        var triggerSearchEvent = XEUtils.debounce(function () {
+            var remote = props.remote, remoteMethod = props.remoteMethod;
+            var searchValue = reactData.searchValue;
+            if (remote && remoteMethod) {
+                reactData.searchLoading = true;
+                Promise.resolve(remoteMethod({ searchValue: searchValue })).then(function () { return nextTick(); }).catch(function () { return nextTick(); }).finally(function () {
+                    reactData.searchLoading = false;
+                    refreshOption();
+                });
+            }
+            else {
+                refreshOption();
+            }
+        }, 350, { trailing: true });
         var togglePanelEvent = function (params) {
             var $event = params.$event;
             $event.preventDefault();
@@ -580,7 +678,7 @@ export default defineComponent({
                     },
                     onClick: function (evnt) {
                         if (!isDisabled) {
-                            changeOptionEvent(evnt, optionValue);
+                            changeOptionEvent(evnt, optionValue, option);
                         }
                     },
                     onMouseenter: function () {
@@ -621,8 +719,22 @@ export default defineComponent({
             });
         };
         var renderOpts = function () {
-            var visibleGroupList = reactData.visibleGroupList, visibleOptionList = reactData.visibleOptionList;
+            var visibleGroupList = reactData.visibleGroupList, visibleOptionList = reactData.visibleOptionList, searchLoading = reactData.searchLoading;
             var isGroup = computeIsGroup.value;
+            if (searchLoading) {
+                return [
+                    h('div', {
+                        class: 'vxe-select--search-loading'
+                    }, [
+                        h('i', {
+                            class: ['vxe-select--search-icon', GlobalConfig.icon.SELECT_LOADED]
+                        }),
+                        h('span', {
+                            class: 'vxe-select--search-text'
+                        }, GlobalConfig.i18n('vxe.select.loadingText'))
+                    ])
+                ];
+            }
             if (isGroup) {
                 if (visibleGroupList.length) {
                     return renderOptgroup();
@@ -727,7 +839,7 @@ export default defineComponent({
         });
         var renderVN = function () {
             var _a, _b;
-            var className = props.className, transfer = props.transfer, disabled = props.disabled, loading = props.loading;
+            var className = props.className, transfer = props.transfer, disabled = props.disabled, loading = props.loading, filterable = props.filterable;
             var inited = reactData.inited, isActivated = reactData.isActivated, visiblePanel = reactData.visiblePanel;
             var vSize = computeSize.value;
             var selectLabel = computeSelectLabel.value;
@@ -738,6 +850,7 @@ export default defineComponent({
                         _a["size--" + vSize] = vSize,
                         _a['is--visivle'] = visiblePanel,
                         _a['is--disabled'] = disabled,
+                        _a['is--filter'] = filterable,
                         _a['is--loading'] = loading,
                         _a['is--active'] = isActivated,
                         _a)]
@@ -746,7 +859,7 @@ export default defineComponent({
                     class: 'vxe-select-slots',
                     ref: 'hideOption'
                 }, slots.default ? slots.default({}) : []),
-                h(resolveComponent('vxe-input'), {
+                h(VxeInputComponent, {
                     ref: refInput,
                     clearable: props.clearable,
                     placeholder: props.placeholder,
@@ -779,6 +892,23 @@ export default defineComponent({
                         placement: reactData.panelPlacement,
                         style: reactData.panelStyle
                     }, inited ? [
+                        filterable ? h('div', {
+                            class: 'vxe-select-filter--wrapper'
+                        }, [
+                            h(VxeInputComponent, {
+                                ref: refInpSearch,
+                                class: 'vxe-select-filter--input',
+                                modelValue: reactData.searchValue,
+                                clearable: true,
+                                placeholder: GlobalConfig.i18n('vxe.select.search'),
+                                prefixIcon: GlobalConfig.icon.INPUT_SEARCH,
+                                'onUpdate:modelValue': modelSearchEvent,
+                                onFocus: focusSearchEvent,
+                                onKeydown: keydownSearchEvent,
+                                onChange: triggerSearchEvent,
+                                onSearch: triggerSearchEvent
+                            })
+                        ]) : createCommentVNode(),
                         h('div', {
                             ref: refOptionWrapper,
                             class: 'vxe-select-option--wrapper'

package/es/select/style.css

@@ -39,7 +39,7 @@
     width: 100%; }
     .vxe-select > .vxe-input .vxe-input--suffix-icon {
       transition: transform 0.2s ease-in-out; }
-  .vxe-select.is--active > .vxe-input .vxe-input--inner {
+  .vxe-select.is--active:not(.is--filter) > .vxe-input .vxe-input--inner {
     border: 1px solid #409eff; }
 
 .vxe-select-slots {
@@ -71,7 +71,13 @@
     opacity: 1;
     transform: scaleY(1); }
 
+.vxe-select-filter--wrapper {
+  display: block; }
+  .vxe-select-filter--wrapper .vxe-select-filter--input {
+    width: 100%; }
+
 .vxe-select-option--wrapper {
+  position: relative;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 4px 0;
@@ -90,7 +96,7 @@
   padding: 0 20px; }
 
 .vxe-select-option {
-  padding: 0 10px;
+  padding: 0 0.6em;
   max-width: 600px;
   white-space: nowrap;
   overflow: hidden;
@@ -111,8 +117,12 @@
     color: #BFBFBF;
     cursor: no-drop; }
 
+.vxe-select--search-icon {
+  margin-right: 0.5em; }
+
+.vxe-select--search-loading,
 .vxe-select--empty-placeholder {
-  padding: 0 10px;
+  padding: 0 0.6em;
   text-align: center;
   color: #C0C4CC; }
 
@@ -135,6 +145,7 @@
 
 .vxe-select--panel .vxe-optgroup--title,
 .vxe-select--panel .vxe-select-option,
+.vxe-select--panel .vxe-select--search-loading,
 .vxe-select--panel .vxe-select--empty-placeholder {
   line-height: 30px; }
 
@@ -144,6 +155,7 @@
 
 .vxe-select--panel.size--medium .vxe-optgroup--title,
 .vxe-select--panel.size--medium .vxe-select-option,
+.vxe-select--panel.size--medium .vxe-select--search-loading,
 .vxe-select--panel.size--medium .vxe-select--empty-placeholder {
   line-height: 28px; }
 
@@ -153,6 +165,7 @@
 
 .vxe-select--panel.size--small .vxe-optgroup--title,
 .vxe-select--panel.size--small .vxe-select-option,
+.vxe-select--panel.size--small .vxe-select--search-loading,
 .vxe-select--panel.size--small .vxe-select--empty-placeholder {
   line-height: 26px; }
 
@@ -162,5 +175,6 @@
 
 .vxe-select--panel.size--mini .vxe-optgroup--title,
 .vxe-select--panel.size--mini .vxe-select-option,
+.vxe-select--panel.size--mini .vxe-select--search-loading,
 .vxe-select--panel.size--mini .vxe-select--empty-placeholder {
   line-height: 24px; }