vxe-pc-ui 3.15.0 → 3.15.2

package/es/cascader/src/cascader.js

@@ -51,6 +51,10 @@ function createReactData() {
 function createInternalData() {
     return {
         // hpTimeout: undefined,
+        listVirtualYOpts: {
+            enabled: true,
+            gt: 20
+        },
         afterTreeList: [],
         treeFullData: [],
         afterVisibleList: [],
@@ -109,7 +113,15 @@ export default {
             default: () => getConfig().cascader.size || getConfig().size
         },
         treeConfig: Object,
+        showRadio: {
+            type: Boolean,
+            default: () => getConfig().cascader.showRadio
+        },
         radioConfig: Object,
+        showCheckbox: {
+            type: Boolean,
+            default: () => getConfig().cascader.showCheckbox
+        },
         checkboxConfig: Object,
         remote: Boolean,
         remoteConfig: Function,
@@ -414,6 +426,59 @@ export default {
                 return item;
             }));
         },
+        handleSetCheckboxByNodeId(nodeKeys, checked) {
+            const $xeCascader = this;
+            const internalData = $xeCascader.internalData;
+            const { nodeMaps } = internalData;
+            if (nodeKeys) {
+                if (!XEUtils.isArray(nodeKeys)) {
+                    nodeKeys = [nodeKeys];
+                }
+                const nodeList = [];
+                nodeKeys.forEach((nodeKey) => {
+                    const nodeid = enNodeValue(nodeKey);
+                    const nodeItem = nodeMaps[nodeid];
+                    if (nodeItem) {
+                        nodeList.push(nodeItem.item);
+                    }
+                });
+                $xeCascader.handleCheckedCheckboxNode(nodeList, checked);
+            }
+            return $xeCascader.$nextTick();
+        },
+        updateCheckboxChecked(nodeKeys) {
+            const $xeCascader = this;
+            const internalData = $xeCascader.internalData;
+            internalData.selectCheckboxMaps = {};
+            $xeCascader.handleSetCheckboxByNodeId(nodeKeys, true);
+        },
+        updateModelChecked() {
+            const $xeCascader = this;
+            const props = $xeCascader;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const { value: modelValue } = props;
+            const { nodeMaps } = internalData;
+            const expandedMaps = {};
+            if (props.multiple) {
+                if (modelValue && modelValue.length) {
+                    $xeCascader.updateCheckboxChecked(modelValue);
+                }
+            }
+            else {
+                if (modelValue) {
+                    const nodeid = enNodeValue(XEUtils.isArray(modelValue) ? modelValue[0] : modelValue);
+                    const itemRest = nodeMaps[nodeid];
+                    if (itemRest) {
+                        itemRest.nodes.forEach(item => {
+                            expandedMaps[$xeCascader.getNodeId(item)] = true;
+                        });
+                        reactData.selectRadioKey = nodeid;
+                    }
+                }
+            }
+            internalData.treeExpandedMaps = expandedMaps;
+        },
         cacheNodeMap() {
             const $xeCascader = this;
             const props = $xeCascader;
@@ -647,6 +712,7 @@ export default {
             internalData.treeFullData = fullData;
             $xeCascader.cacheNodeMap();
             $xeCascader.handleData(true);
+            $xeCascader.updateModelChecked();
             $xeCascader.handleCurrentItems();
             $xeCascader.updateCurrentChunk();
             return $xeCascader.$nextTick();
@@ -682,11 +748,14 @@ export default {
             const { treeFullData } = internalData;
             const selectVals = $xeCascader.computeSelectVals;
             const childrenField = $xeCascader.computeChildrenField;
+            const mapChildrenField = $xeCascader.computeMapChildrenField;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const { transform } = treeOpts;
             const stItems = [];
             const expandedMaps = {};
             if (selectVals.length) {
-                const lastVal = XEUtils.last(selectVals);
-                const stRest = XEUtils.findTree(treeFullData, (item) => lastVal === $xeCascader.getNodeId(item), { children: childrenField });
+                const lastVal = enNodeValue(XEUtils.last(selectVals));
+                const stRest = XEUtils.findTree(treeFullData, (item) => lastVal === $xeCascader.getNodeId(item), { children: transform ? mapChildrenField : childrenField });
                 if (stRest) {
                     const { nodes } = stRest;
                     nodes.forEach(item => {
@@ -1292,7 +1361,7 @@ export default {
         handleNodeClickEvent(evnt, node, chunks, chunkIndex) {
             const $xeCascader = this;
             const props = $xeCascader;
-            const { multiple } = props;
+            const { multiple, showCheckbox, showRadio } = props;
             const treeOpts = $xeCascader.computeTreeOpts;
             const radioOpts = $xeCascader.computeRadioOpts;
             const checkboxOpts = $xeCascader.computeCheckboxOpts;
@@ -1311,13 +1380,13 @@ export default {
                 $xeCascader.toggleExpandEvent(evnt, node, chunks, chunkIndex);
             }
             if (multiple) {
-                if (checkboxOpts.trigger === 'node' || (!checkboxOpts.showIcon && (!childList || !childList.length))) {
+                if (checkboxOpts.trigger === 'node' || (!showCheckbox && (!childList || !childList.length))) {
                     triggerCheckbox = true;
                     $xeCascader.changeCheckboxEvent(evnt, node);
                 }
             }
             else {
-                if (radioOpts.trigger === 'node' || (!radioOpts.showIcon && (!childList || !childList.length))) {
+                if (radioOpts.trigger === 'node' || (!showRadio && (!childList || !childList.length))) {
                     triggerRadio = true;
                     $xeCascader.changeRadioEvent(evnt, node);
                 }
@@ -1450,10 +1519,12 @@ export default {
         //
         renderRadio(h, node, isExistChild, nLevel, isChecked) {
             const $xeCascader = this;
+            const props = $xeCascader;
+            const { showRadio } = props;
             const radioOpts = $xeCascader.computeRadioOpts;
-            const { showIcon, checkMode, checkMethod, visibleMode, visibleMethod } = radioOpts;
+            const { checkMode, checkMethod, visibleMode, visibleMethod } = radioOpts;
             const isVisible = visibleMethod ? visibleMethod({ $cascader: $xeCascader, node }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
-            if (showIcon && isVisible) {
+            if (showRadio && isVisible) {
                 const isDisabled = checkMethod ? !checkMethod({ $cascader: $xeCascader, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
                 return h('div', {
                     class: ['vxe-tree--radio-option', {
@@ -1477,10 +1548,12 @@ export default {
         },
         renderCheckbox(h, node, isExistChild, nLevel, isChecked, isIndeterminate) {
             const $xeCascader = this;
+            const props = $xeCascader;
+            const { showCheckbox } = props;
             const checkboxOpts = $xeCascader.computeCheckboxOpts;
-            const { showIcon, checkMode, checkMethod, visibleMode, visibleMethod } = checkboxOpts;
+            const { checkMode, checkMethod, visibleMode, visibleMethod } = checkboxOpts;
             const isVisible = visibleMethod ? visibleMethod({ $cascader: $xeCascader, node }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
-            if (showIcon && isVisible) {
+            if (showCheckbox && isVisible) {
                 const isDisabled = checkMethod ? !checkMethod({ $cascader: $xeCascader, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
                 return h('div', {
                     class: ['vxe-cascader--checkbox-option', {
@@ -1606,9 +1679,11 @@ export default {
             const $xeCascader = this;
             const props = $xeCascader;
             const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
             const slots = $xeCascader.$scopedSlots;
             const { className, value: modelValue, multiple, loading, filterable, showTotalButton, showCheckedButton, showClearButton, showCloseButton } = props;
             const { initialized, isActivated, isAniVisible, visiblePanel, searchValue, currentCunkList } = reactData;
+            const { listVirtualYOpts } = internalData;
             const vSize = $xeCascader.computeSize;
             const isDisabled = $xeCascader.computeIsDisabled;
             const selectLabel = $xeCascader.computeSelectLabel;
@@ -1760,7 +1835,8 @@ export default {
                                         }, [
                                             h(VxeListComponent, {
                                                 props: {
-                                                    data: chunks
+                                                    data: chunks,
+                                                    virtualYConfig: listVirtualYOpts
                                                 },
                                                 scopedSlots: {
                                                     default(slotParams) {
@@ -1819,6 +1895,7 @@ export default {
             const $xeCascader = this;
             const reactData = $xeCascader.reactData;
             if (!reactData.visiblePanel) {
+                $xeCascader.updateModelChecked();
                 $xeCascader.handleCurrentItems();
                 $xeCascader.updateCurrentChunk();
             }
@@ -1832,6 +1909,10 @@ export default {
     created() {
         const $xeCascader = this;
         const props = $xeCascader;
+        const reactData = $xeCascader.reactData;
+        if (!props.multiple) {
+            reactData.selectRadioKey = enNodeValue(props.value);
+        }
         $xeCascader.loadData(props.options || []);
     },
     mounted() {

package/es/date-panel/src/util.js

@@ -19,6 +19,18 @@ export function handleValueFormat(type, valueFormat) {
     }
     return 'yyyy-MM-dd';
 }
+export function handleInputFormat(type, inputFormat) {
+    if (inputFormat) {
+        return inputFormat;
+    }
+    if (type === 'time') {
+        return 'HH:mm:ss';
+    }
+    if (type === 'datetime') {
+        return 'yyyy-MM-dd HH:mm:ss';
+    }
+    return 'yyyy-MM-dd';
+}
 export function toStringTimeDate(str) {
     const rest = new Date(2e3, 0, 1);
     if (str) {

package/es/date-picker/src/date-picker.js

@@ -4,7 +4,7 @@ import { getConfig, getIcon, getI18n, commands, createEvent, globalEvents, GLOBA
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
 import { updatePanelPlacement, getEventTargetNode } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
-import { parseDateObj, parseDateValue, getDateByCode, handleValueFormat, hasDateValueType, hasTimestampValueType } from '../../date-panel/src/util';
+import { parseDateObj, parseDateValue, getDateByCode, handleValueFormat, handleInputFormat, hasDateValueType, hasTimestampValueType } from '../../date-panel/src/util';
 import { errLog } from '../../ui/src/log';
 import VxeDatePanelComponent from '../../date-panel/src/date-panel';
 import VxeButtonComponent from '../../button/src/button';
@@ -78,6 +78,7 @@ export default {
         labelFormat: String,
         valueFormat: String,
         timeFormat: String,
+        inputFormat: String,
         editable: {
             type: Boolean,
             default: true
@@ -107,6 +108,7 @@ export default {
             type: Boolean,
             default: () => getConfig().datePicker.autoClose
         },
+        controlConfig: Object,
         prefixIcon: String,
         suffixIcon: String,
         placement: String,
@@ -158,7 +160,8 @@ export default {
             inputLabel: ''
         };
         const internalData = {
-            hpTimeout: undefined
+            // hpTimeout: undefined,
+            parseInputKayMaps: {}
         };
         return {
             xID,
@@ -298,6 +301,12 @@ export default {
             const { type, valueFormat } = props;
             return handleValueFormat(type, valueFormat);
         },
+        computeDateInputFormat() {
+            const $xeDatePicker = this;
+            const props = $xeDatePicker;
+            const { type, inputFormat } = props;
+            return handleInputFormat(type, inputFormat);
+        },
         computeFirstDayOfWeek() {
             const $xeDatePicker = this;
             const props = $xeDatePicker;
@@ -322,6 +331,11 @@ export default {
                 });
                 return dateObj.label;
             }).join(', ');
+        },
+        computeControlOpts() {
+            const $xeDatePicker = this;
+            const props = $xeDatePicker;
+            return Object.assign({}, getConfig().datePicker.controlConfig, props.controlConfig);
         } }),
     methods: {
         //
@@ -430,6 +444,9 @@ export default {
             if (!trigger || trigger === 'default') {
                 $xeDatePicker.datePickerOpenEvent(evnt);
             }
+            else if (trigger === 'icon') {
+                $xeDatePicker.hidePanel();
+            }
             $xeDatePicker.triggerEvent(evnt);
         },
         clickPrefixEvent(evnt) {
@@ -471,6 +488,35 @@ export default {
                 $xeDatePicker.dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         },
+        handleArrowInputDate(evnt, isUpArrow) {
+            const $xeDatePicker = this;
+            const props = $xeDatePicker;
+            const reactData = $xeDatePicker.reactData;
+            const internalData = $xeDatePicker.internalData;
+            const { multiple } = props;
+            if (multiple) {
+                return;
+            }
+            const { inputValue } = reactData;
+            if (!inputValue) {
+                return;
+            }
+            const targetElem = $xeDatePicker.$refs.refInputTarget;
+            if (!targetElem) {
+                return;
+            }
+            const { parseInputKayMaps } = internalData;
+            const inputFormat = $xeDatePicker.computeDateInputFormat;
+            const selectionStart = targetElem.selectionStart || 0;
+            let selectKey = inputFormat[selectionStart];
+            if (!parseInputKayMaps[selectKey]) {
+                selectKey = inputFormat[selectionStart - 1];
+            }
+            const inputPaesrFn = parseInputKayMaps[selectKey];
+            if (inputPaesrFn) {
+                inputPaesrFn(evnt, targetElem, isUpArrow);
+            }
+        },
         blurEvent(evnt) {
             const $xeDatePicker = this;
             const reactData = $xeDatePicker.reactData;
@@ -498,6 +544,14 @@ export default {
         },
         keydownEvent(evnt) {
             const $xeDatePicker = this;
+            const props = $xeDatePicker;
+            const { controlConfig } = props;
+            const controlOpts = $xeDatePicker.computeControlOpts;
+            const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+            const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+            if ((isUpArrow || isDwArrow) && controlOpts.isArrow && (controlConfig || controlOpts.enabled)) {
+                $xeDatePicker.handleArrowInputDate(evnt, isUpArrow);
+            }
             $xeDatePicker.triggerEvent(evnt);
         },
         keyupEvent(evnt) {
@@ -641,6 +695,9 @@ export default {
             const { panelIndex } = reactData;
             const targetElem = $xeDatePicker.$refs.refInputTarget;
             const panelElem = $xeDatePicker.$refs.refInputPanel;
+            if (!panelElem) {
+                return $xeDatePicker.$nextTick();
+            }
             const btnTransfer = $xeDatePicker.computeBtnTransfer;
             const popupOpts = $xeDatePicker.computePopupOpts;
             const handleStyle = () => {
@@ -667,13 +724,9 @@ export default {
             const btnTransfer = $xeDatePicker.computeBtnTransfer;
             const panelElem = $xeDatePicker.$refs.refInputPanel;
             if (!isDisabled && !visiblePanel) {
-                if (!reactData.initialized) {
+                if (!reactData.initialized && btnTransfer && panelElem) {
                     reactData.initialized = true;
-                    if (btnTransfer) {
-                        if (panelElem) {
-                            document.body.appendChild(panelElem);
-                        }
-                    }
+                    document.body.appendChild(panelElem);
                 }
                 if (internalData.hpTimeout) {
                     clearTimeout(internalData.hpTimeout);
@@ -700,10 +753,17 @@ export default {
         },
         clickIconEvent(evnt) {
             const $xeDatePicker = this;
+            const reactData = $xeDatePicker.reactData;
+            const { visiblePanel } = reactData;
             const popupOpts = $xeDatePicker.computePopupOpts;
             const { trigger } = popupOpts;
             if (!trigger || trigger === 'default' || trigger === 'icon') {
-                $xeDatePicker.datePickerOpenEvent(evnt);
+                if (visiblePanel) {
+                    $xeDatePicker.hidePanel();
+                }
+                else {
+                    $xeDatePicker.datePickerOpenEvent(evnt);
+                }
             }
         },
         clickEvent(evnt) {
@@ -833,6 +893,10 @@ export default {
             const props = $xeDatePicker;
             const slots = $xeDatePicker.$scopedSlots;
             const reactData = $xeDatePicker.reactData;
+            const popupOpts = $xeDatePicker.computePopupOpts;
+            if (popupOpts.enabled === false) {
+                return renderEmptyElement($xeDatePicker);
+            }
             const { type, multiple, showClearButton, showConfirmButton } = props;
             const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle, inputValue } = reactData;
             const vSize = $xeDatePicker.computeSize;
@@ -842,7 +906,6 @@ export default {
             const isDateTimeType = $xeDatePicker.computeIsDateTimeType;
             const shortcutList = $xeDatePicker.computeShortcutList;
             const timeOpts = $xeDatePicker.computeTimeOpts;
-            const popupOpts = $xeDatePicker.computePopupOpts;
             const { position } = shortcutOpts;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
@@ -1151,6 +1214,14 @@ export default {
     },
     created() {
         const $xeDatePicker = this;
+        const internalData = $xeDatePicker.internalData;
+        const { parseInputKayMaps } = internalData;
+        const inputKeys = ['y', 'M', 'd', 'H', 'm', 'n'];
+        inputKeys.forEach(key => {
+            parseInputKayMaps[key] = (evnt) => {
+                evnt.preventDefault();
+            };
+        });
         $xeDatePicker.updateModelValue();
         globalEvents.on($xeDatePicker, 'mousewheel', $xeDatePicker.handleGlobalMousewheelEvent);
         globalEvents.on($xeDatePicker, 'mousedown', $xeDatePicker.handleGlobalMousedownEvent);

package/es/date-range-picker/src/date-range-picker.js

@@ -533,6 +533,9 @@ export default {
             if (!trigger || trigger === 'default') {
                 $xeDateRangePicker.dateRangePickerOpenEvent(evnt);
             }
+            else if (trigger === 'icon') {
+                $xeDateRangePicker.hidePanel();
+            }
             $xeDateRangePicker.triggerEvent(evnt);
         },
         clickPrefixEvent(evnt) {
@@ -891,6 +894,9 @@ export default {
             const { panelIndex } = reactData;
             const targetElem = $xeDateRangePicker.$refs.refInputTarget;
             const panelElem = $xeDateRangePicker.$refs.refInputPanel;
+            if (!panelElem) {
+                return $xeDateRangePicker.$nextTick();
+            }
             const btnTransfer = $xeDateRangePicker.computeBtnTransfer;
             const popupOpts = $xeDateRangePicker.computePopupOpts;
             const handleStyle = () => {
@@ -917,13 +923,9 @@ export default {
             const btnTransfer = $xeDateRangePicker.computeBtnTransfer;
             const panelElem = $xeDateRangePicker.$refs.refInputPanel;
             if (!isDisabled && !visiblePanel) {
-                if (!reactData.initialized) {
+                if (!reactData.initialized && btnTransfer && panelElem) {
                     reactData.initialized = true;
-                    if (btnTransfer) {
-                        if (panelElem) {
-                            document.body.appendChild(panelElem);
-                        }
-                    }
+                    document.body.appendChild(panelElem);
                 }
                 if (internalData.hpTimeout) {
                     clearTimeout(internalData.hpTimeout);
@@ -951,10 +953,17 @@ export default {
         },
         clickIconEvent(evnt) {
             const $xeDateRangePicker = this;
+            const reactData = $xeDateRangePicker.reactData;
+            const { visiblePanel } = reactData;
             const popupOpts = $xeDateRangePicker.computePopupOpts;
             const { trigger } = popupOpts;
             if (!trigger || trigger === 'default' || trigger === 'icon') {
-                $xeDateRangePicker.dateRangePickerOpenEvent(evnt);
+                if (visiblePanel) {
+                    $xeDateRangePicker.hidePanel();
+                }
+                else {
+                    $xeDateRangePicker.dateRangePickerOpenEvent(evnt);
+                }
             }
         },
         clickEvent(evnt) {
@@ -1095,6 +1104,10 @@ export default {
             const props = $xeDateRangePicker;
             const slots = $xeDateRangePicker.$scopedSlots;
             const reactData = $xeDateRangePicker.reactData;
+            const popupOpts = $xeDateRangePicker.computePopupOpts;
+            if (popupOpts.enabled === false) {
+                return renderEmptyElement($xeDateRangePicker);
+            }
             const { type, separator, autoClose, showConfirmButton, showClearButton } = props;
             const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle, startValue, endValue } = reactData;
             const vSize = $xeDateRangePicker.computeSize;
@@ -1107,7 +1120,6 @@ export default {
             const defaultDates = $xeDateRangePicker.computeDefaultDates;
             const defaultTimes = $xeDateRangePicker.computeDefaultTimes;
             const timeOpts = $xeDateRangePicker.computeTimeOpts;
-            const popupOpts = $xeDateRangePicker.computePopupOpts;
             const { startLabel, endLabel } = panelLabelObj;
             const { position } = shortcutOpts;
             const headerSlot = slots.header;

package/es/form/render/index.js

@@ -314,15 +314,15 @@ function oldFormItemRadioAndCheckboxRender(h, renderOpts, params) {
  */
 renderer.mixin({
     input: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
         renderFormItemContent: nativeItemRender
     },
     textarea: {
-        formItemAutoFocus: 'textarea',
+        formItemAutoFocus: true,
         renderFormItemContent: nativeItemRender
     },
     select: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
         renderFormItemContent(h, renderOpts, params) {
             return [
                 h('select', {
@@ -334,27 +334,27 @@ renderer.mixin({
         }
     },
     VxeInput: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
         renderFormItemContent: defaultItemRender
     },
     VxeNumberInput: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
         renderFormItemContent: defaultItemRender
     },
     VxePasswordInput: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
         renderFormItemContent: defaultItemRender
     },
     VxeTextarea: {
-        formItemAutoFocus: 'textarea',
+        formItemAutoFocus: true,
         renderFormItemContent: defaultItemRender
     },
     VxeDatePicker: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
         renderFormItemContent: defaultItemRender
     },
     VxeDateRangePicker: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
         renderFormItemContent(h, renderOpts, params) {
             const { startField, endField } = renderOpts;
             const { $form, data, field } = params;
@@ -412,7 +412,7 @@ renderer.mixin({
         }
     },
     VxeSelect: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
         renderFormItemContent(h, renderOpts, params) {
             const { data, field } = params;
             const { options, optionProps, optionGroups, optionGroupProps } = renderOpts;
@@ -426,7 +426,21 @@ renderer.mixin({
         }
     },
     VxeTreeSelect: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
+        renderFormItemContent(h, renderOpts, params) {
+            const { data, field } = params;
+            const { options, optionProps } = renderOpts;
+            const itemValue = XEUtils.get(data, field);
+            return [
+                h(getDefaultComponent(renderOpts), {
+                    props: getComponentFormItemProps(renderOpts, params, itemValue, { options, optionProps }),
+                    on: getItemOns(renderOpts, params)
+                })
+            ];
+        }
+    },
+    VxeCascader: {
+        formItemAutoFocus: true,
         renderFormItemContent(h, renderOpts, params) {
             const { data, field } = params;
             const { options, optionProps } = renderOpts;
@@ -440,7 +454,7 @@ renderer.mixin({
         }
     },
     VxeTableSelect: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
         renderFormItemContent(h, renderOpts, params) {
             const { data, field } = params;
             const { options, optionProps } = renderOpts;
@@ -454,7 +468,7 @@ renderer.mixin({
         }
     },
     VxeColorPicker: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
         renderFormItemContent(h, renderOpts, params) {
             const { data, field } = params;
             const { options } = renderOpts;
@@ -468,7 +482,7 @@ renderer.mixin({
         }
     },
     VxeIconPicker: {
-        formItemAutoFocus: 'input',
+        formItemAutoFocus: true,
         renderFormItemContent(h, renderOpts, params) {
             const { data, field } = params;
             const { options } = renderOpts;

package/es/form/style.css

@@ -357,7 +357,8 @@
 .vxe-form--item.is--span .vxe-select,
 .vxe-form--item.is--span .vxe-tree-select,
 .vxe-form--item.is--span .vxe-table-select,
-.vxe-form--item.is--span .vxe-ico-picker {
+.vxe-form--item.is--span .vxe-ico-picker,
+.vxe-form--item.is--span .vxe-cascader {
   width: 100%;
 }
 .vxe-form--item.is--error.show--err-msg > .vxe-form--item-content {
@@ -384,7 +385,8 @@
 .vxe-form--item.is--error .vxe-default-input,
 .vxe-form--item.is--error .vxe-default-textarea,
 .vxe-form--item.is--error .vxe-default-select,
-.vxe-form--item.is--error .vxe-ico-picker {
+.vxe-form--item.is--error .vxe-ico-picker,
+.vxe-form--item.is--error .vxe-cascader {
   border-color: var(--vxe-ui-form-validate-error-color);
 }
 .vxe-form--item.is--error .vxe-input:focus,