vxe-pc-ui 4.1.19 → 4.1.21

package/es/select/src/select.js

@@ -27,7 +27,10 @@ export default defineComponent({
             default: null
         },
         multiple: Boolean,
-        multiCharOverflow: { type: [Number, String], default: () => getConfig().select.multiCharOverflow },
+        multiCharOverflow: {
+            type: [Number, String],
+            default: () => getConfig().select.multiCharOverflow
+        },
         prefixIcon: String,
         placement: String,
         options: Array,
@@ -37,21 +40,30 @@ export default defineComponent({
         optionConfig: Object,
         className: [String, Function],
         popupClassName: [String, Function],
-        max: { type: [String, Number], default: null },
-        size: { type: String, default: () => getConfig().select.size || getConfig().size },
+        max: {
+            type: [String, Number],
+            default: null
+        },
+        size: {
+            type: String,
+            default: () => getConfig().select.size || getConfig().size
+        },
         filterable: Boolean,
         filterMethod: Function,
         remote: Boolean,
         remoteMethod: Function,
         emptyText: String,
-        // 已废弃，被 option-config.keyField 替换
-        optionId: { type: String, default: () => getConfig().select.optionId },
-        // 已废弃，被 option-config.useKey 替换
-        optionKey: Boolean,
         transfer: {
             type: Boolean,
             default: null
-        }
+        },
+        // 已废弃，被 option-config.keyField 替换
+        optionId: {
+            type: String,
+            default: () => getConfig().select.optionId
+        },
+        // 已废弃，被 option-config.useKey 替换
+        optionKey: Boolean
     },
     emits: [
         'update:modelValue',
@@ -64,6 +76,7 @@ export default defineComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const $xeModal = inject('$xeModal', null);
+        const $xeDrawer = inject('$xeDrawer', null);
         const $xeTable = inject('$xeTable', null);
         const $xeForm = inject('$xeForm', null);
         const formItemInfo = inject('xeFormItemInfo', null);
@@ -89,6 +102,9 @@ export default defineComponent({
             searchValue: '',
             searchLoading: false
         });
+        const internalData = {
+            hpTimeout: undefined
+        };
         const refElem = ref();
         const refInput = ref();
         const refInpSearch = ref();
@@ -102,6 +118,7 @@ export default defineComponent({
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps
         };
         let selectMethods = {};
@@ -132,7 +149,7 @@ export default defineComponent({
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
                 }
-                if ($xeTable || $xeModal || $xeForm) {
+                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
                     return true;
                 }
             }
@@ -150,10 +167,10 @@ export default defineComponent({
             return getI18n('vxe.base.pleaseSelect');
         });
         const computePropsOpts = computed(() => {
-            return props.optionProps || {};
+            return Object.assign({}, props.optionProps);
         });
         const computeGroupPropsOpts = computed(() => {
-            return props.optionGroupProps || {};
+            return Object.assign({}, props.optionGroupProps);
         });
         const computeLabelField = computed(() => {
             const propsOpts = computePropsOpts.value;
@@ -187,6 +204,27 @@ export default defineComponent({
         const computeMultiMaxCharNum = computed(() => {
             return XEUtils.toNumber(props.multiCharOverflow);
         });
+        const computeSelectLabel = computed(() => {
+            const { modelValue, multiple, remote } = props;
+            const multiMaxCharNum = computeMultiMaxCharNum.value;
+            if (modelValue && multiple) {
+                const vals = XEUtils.isArray(modelValue) ? modelValue : [modelValue];
+                if (remote) {
+                    return vals.map(val => getRemoteSelectLabel(val)).join(', ');
+                }
+                return vals.map((val) => {
+                    const label = getSelectLabel(val);
+                    if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
+                        return `${label.substring(0, multiMaxCharNum)}...`;
+                    }
+                    return label;
+                }).join(', ');
+            }
+            if (remote) {
+                return getRemoteSelectLabel(modelValue);
+            }
+            return getSelectLabel(modelValue);
+        });
         const callSlot = (slotFunc, params) => {
             if (slotFunc) {
                 if (XEUtils.isString(slotFunc)) {
@@ -248,27 +286,6 @@ export default defineComponent({
             const item = findOption(value);
             return XEUtils.toValueString(item ? item[labelField] : value);
         };
-        const computeSelectLabel = computed(() => {
-            const { modelValue, multiple, remote } = props;
-            const multiMaxCharNum = computeMultiMaxCharNum.value;
-            if (modelValue && multiple) {
-                const vals = XEUtils.isArray(modelValue) ? modelValue : [modelValue];
-                if (remote) {
-                    return vals.map(val => getRemoteSelectLabel(val)).join(', ');
-                }
-                return vals.map((val) => {
-                    const label = getSelectLabel(val);
-                    if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
-                        return `${label.substring(0, multiMaxCharNum)}...`;
-                    }
-                    return label;
-                }).join(', ');
-            }
-            if (remote) {
-                return getRemoteSelectLabel(modelValue);
-            }
-            return getSelectLabel(modelValue);
-        });
         const getOptkey = () => {
             const optionOpts = computeOptionOpts.value;
             return optionOpts.keyField || props.optionId || '_X_OPTION_KEY';
@@ -441,12 +458,15 @@ export default defineComponent({
                 }
             });
         };
-        let hidePanelTimeout;
         const showOptionPanel = () => {
             const { loading, filterable } = props;
+            const { hpTimeout } = internalData;
             const isDisabled = computeIsDisabled.value;
             if (!loading && !isDisabled) {
-                clearTimeout(hidePanelTimeout);
+                if (hpTimeout) {
+                    clearTimeout(hpTimeout);
+                    internalData.hpTimeout = undefined;
+                }
                 if (!reactData.initialized) {
                     reactData.initialized = true;
                 }
@@ -473,13 +493,13 @@ export default defineComponent({
             reactData.searchValue = '';
             reactData.searchLoading = false;
             reactData.visiblePanel = false;
-            hidePanelTimeout = window.setTimeout(() => {
+            internalData.hpTimeout = window.setTimeout(() => {
                 reactData.isAniVisible = false;
             }, 350);
         };
         const changeEvent = (evnt, selectValue) => {
+            emit('update:modelValue', selectValue);
             if (selectValue !== props.modelValue) {
-                emit('update:modelValue', selectValue);
                 selectMethods.dispatchEvent('change', { value: selectValue }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
@@ -714,12 +734,14 @@ export default defineComponent({
         const focusSearchEvent = () => {
             reactData.isActivated = true;
         };
-        const triggerSearchEvent = XEUtils.debounce(function () {
+        const handleSearchEvent = () => {
             const { remote, remoteMethod } = props;
             const { searchValue } = reactData;
             if (remote && remoteMethod) {
                 reactData.searchLoading = true;
-                Promise.resolve(remoteMethod({ searchValue })).then(() => nextTick()).catch(() => nextTick()).finally(() => {
+                Promise.resolve(remoteMethod({ searchValue })).then(() => nextTick())
+                    .catch(() => nextTick())
+                    .finally(() => {
                     reactData.searchLoading = false;
                     refreshOption();
                 });
@@ -727,7 +749,8 @@ export default defineComponent({
             else {
                 refreshOption();
             }
-        }, 350, { trailing: true });
+        };
+        const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true });
         const togglePanelEvent = (params) => {
             const { $event } = params;
             $event.preventDefault();
@@ -936,7 +959,7 @@ export default defineComponent({
                     }, defaultSlot ? defaultSlot({}) : []),
                     h('span', {
                         class: 'vxe-select-label'
-                    }, selectLabel)
+                    }, [selectLabel])
                 ]);
             }
             return h('div', {
@@ -1035,7 +1058,6 @@ export default defineComponent({
                 ])
             ]);
         };
-        $xeSelect.renderVN = renderVN;
         watch(() => reactData.staticOptions, (value) => {
             if (value.some((item) => item.options && item.options.length)) {
                 reactData.fullOptionList = [];
@@ -1080,6 +1102,7 @@ export default defineComponent({
             globalEvents.off($xeSelect, 'blur');
         });
         provide('$xeSelect', $xeSelect);
+        $xeSelect.renderVN = renderVN;
         return $xeSelect;
     },
     render() {

package/es/select/src/util.js

@@ -14,11 +14,11 @@ export function watchOption(props, option) {
         });
     });
 }
-export function assembleOption($xeSelect, el, option, optGroup) {
+export function assembleOption($xeSelect, el, option, $xeOptgroup) {
     const { reactData } = $xeSelect;
     const { staticOptions } = reactData;
     const parentElem = el.parentNode;
-    const parentOption = optGroup ? optGroup.option : null;
+    const parentOption = $xeOptgroup ? $xeOptgroup.optionConfig : null;
     const parentCols = parentOption ? parentOption.options : staticOptions;
     if (parentElem && parentCols) {
         parentCols.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, option);