vxe-pc-ui 4.14.26 → 4.14.28

package/lib/index.umd.js

@@ -4646,7 +4646,7 @@ function checkDynamic() {
 }
 ;// ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.14.26"}`;
+const log_version = `ui v${"4.14.28"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// ./packages/ui/index.ts
@@ -4654,7 +4654,7 @@ const errLog = log.create('error', log_version);
 
 
 
-const ui_version = "4.14.26";
+const ui_version = "4.14.28";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -20206,6 +20206,7 @@ const Countdown = VxeCountdown;
       default: 'date'
     },
     className: String,
+    cellClassName: [String, Function],
     size: {
       type: String,
       default: () => getConfig().datePanel.size || getConfig().size
@@ -21586,7 +21587,9 @@ const Countdown = VxeCountdown;
     };
     const renderDateDayTable = () => {
       const {
-        multiple
+        type,
+        multiple,
+        cellClassName
       } = props;
       const {
         datePanelType,
@@ -21626,7 +21629,12 @@ const Countdown = VxeCountdown;
         }, rows.map(item => {
           const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: ['vxe-date-panel--view-item', {
+            class: ['vxe-date-panel--view-item', cellClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(cellClassName) ? `${cellClassName({
+              $datePanel: $xeDatePanel,
+              type,
+              viewType: datePanelType,
+              date: item.date
+            }) || ''}` : `${cellClassName || ''}` : '', {
               'is--prev': item.isPrev,
               'is--current': item.isCurrent,
               'is--now': item.isNow,
@@ -21651,7 +21659,9 @@ const Countdown = VxeCountdown;
     };
     const renderDateWeekTable = () => {
       const {
-        multiple
+        type,
+        multiple,
+        cellClassName
       } = props;
       const {
         datePanelType,
@@ -21693,7 +21703,12 @@ const Countdown = VxeCountdown;
           }
         }, rows.map((item, rIndex) => {
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: ['vxe-date-panel--view-item', {
+            class: ['vxe-date-panel--view-item', cellClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(cellClassName) ? `${cellClassName({
+              $datePanel: $xeDatePanel,
+              type,
+              viewType: datePanelType,
+              date: item.date
+            }) || ''}` : `${cellClassName || ''}` : '', {
               'is--prev': item.isPrev,
               'is--current': item.isCurrent,
               'is--now': rIndex ? item.isNow : isNowWeek,
@@ -21718,7 +21733,9 @@ const Countdown = VxeCountdown;
     };
     const renderDateMonthTable = () => {
       const {
-        multiple
+        type,
+        multiple,
+        cellClassName
       } = props;
       const {
         datePanelType,
@@ -21742,7 +21759,12 @@ const Countdown = VxeCountdown;
         }, rows.map(item => {
           const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: ['vxe-date-panel--view-item', {
+            class: ['vxe-date-panel--view-item', cellClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(cellClassName) ? `${cellClassName({
+              $datePanel: $xeDatePanel,
+              type,
+              viewType: datePanelType,
+              date: item.date
+            }) || ''}` : `${cellClassName || ''}` : '', {
               'is--prev': item.isPrev,
               'is--current': item.isCurrent,
               'is--now': item.isNow,
@@ -21767,7 +21789,9 @@ const Countdown = VxeCountdown;
     };
     const renderDateQuarterTable = () => {
       const {
-        multiple
+        type,
+        multiple,
+        cellClassName
       } = props;
       const {
         datePanelType,
@@ -21791,7 +21815,12 @@ const Countdown = VxeCountdown;
         }, rows.map(item => {
           const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: ['vxe-date-panel--view-item', {
+            class: ['vxe-date-panel--view-item', cellClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(cellClassName) ? `${cellClassName({
+              $datePanel: $xeDatePanel,
+              type,
+              viewType: datePanelType,
+              date: item.date
+            }) || ''}` : `${cellClassName || ''}` : '', {
               'is--prev': item.isPrev,
               'is--current': item.isCurrent,
               'is--now': item.isNow,
@@ -21816,7 +21845,9 @@ const Countdown = VxeCountdown;
     };
     const renderDateYearTable = () => {
       const {
-        multiple
+        type,
+        multiple,
+        cellClassName
       } = props;
       const {
         datePanelType,
@@ -21840,7 +21871,12 @@ const Countdown = VxeCountdown;
         }, rows.map(item => {
           const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: ['vxe-date-panel--view-item', {
+            class: ['vxe-date-panel--view-item', cellClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(cellClassName) ? `${cellClassName({
+              $datePanel: $xeDatePanel,
+              type,
+              viewType: datePanelType,
+              date: item.date
+            }) || ''}` : `${cellClassName || ''}` : '', {
               'is--prev': item.isPrev,
               'is--current': item.isCurrent,
               'is--now': item.isNow,
@@ -23697,6 +23733,21 @@ const DatePicker = VxeDatePicker;
         }
       }
     };
+    const panelCellClassName = ({
+      date
+    }) => {
+      const startValue = reactData.startValue;
+      const endValue = reactData.endValue;
+      if (startValue && endValue) {
+        const currTime = date.getTime();
+        const startTime = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toStringDate(startValue).getTime();
+        const endTime = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toStringDate(endValue).getTime();
+        if (currTime >= startTime && currTime <= endTime) {
+          return 'is--range-selected';
+        }
+      }
+      return '';
+    };
     const handleSelectClose = () => {
       const {
         autoClose
@@ -24231,6 +24282,7 @@ const DatePicker = VxeDatePicker;
         festivalMethod: props.festivalMethod,
         disabledMethod: props.disabledMethod,
         selectDay: props.selectDay,
+        cellClassName: panelCellClassName,
         onChange: startPanelChangeEvent
       }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(date_panel, {
         ref: refEndDatePanel,
@@ -24250,6 +24302,7 @@ const DatePicker = VxeDatePicker;
         festivalMethod: props.festivalMethod,
         disabledMethod: props.disabledMethod,
         selectDay: props.selectDay,
+        cellClassName: panelCellClassName,
         onChange: endPanelChangeEvent
       })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-date-range-picker--layout-footer-wrapper'
@@ -25980,6 +26033,181 @@ function renderItemContent($xeForm, item) {
     class: 'vxe-form--item-inner'
   }, contentVNs);
 }
+;// ./packages/form/src/form-item.ts
+
+
+
+
+
+
+
+const formItemProps = {
+  title: String,
+  field: String,
+  span: {
+    type: [String, Number],
+    default: null
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  verticalAlign: {
+    type: String,
+    default: null
+  },
+  titleBackground: {
+    type: Boolean,
+    default: null
+  },
+  titleBold: {
+    type: Boolean,
+    default: null
+  },
+  titleAlign: {
+    type: String,
+    default: null
+  },
+  titleWidth: {
+    type: [String, Number],
+    default: null
+  },
+  titleColon: {
+    type: Boolean,
+    default: null
+  },
+  titleAsterisk: {
+    type: Boolean,
+    default: null
+  },
+  showTitle: {
+    type: Boolean,
+    default: true
+  },
+  vertical: {
+    type: Boolean,
+    default: null
+  },
+  padding: {
+    type: Boolean,
+    default: null
+  },
+  formatter: [String, Function],
+  className: [String, Function],
+  contentClassName: [String, Function],
+  contentStyle: [Object, Function],
+  titleClassName: [String, Function],
+  titleStyle: [Object, Function],
+  titleOverflow: {
+    type: [Boolean, String],
+    default: null
+  },
+  titlePrefix: Object,
+  titleSuffix: Object,
+  resetValue: {
+    default: null
+  },
+  visibleMethod: Function,
+  visible: {
+    type: Boolean,
+    default: null
+  },
+  showContent: {
+    type: Boolean,
+    default: null
+  },
+  folding: Boolean,
+  collapseNode: Boolean,
+  itemRender: Object,
+  rules: Array,
+  params: Object
+};
+/* harmony default export */ var form_item = (defineVxeComponent({
+  name: 'VxeFormItem',
+  props: formItemProps,
+  setup(props, {
+    slots
+  }) {
+    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', {});
+    const $xeFormGroup = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeFormGroup', null);
+    const formItem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(createItem($xeForm, props));
+    formItem.slots = slots;
+    const formItemInfo = {
+      itemConfig: formItem
+    };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('xeFormItemInfo', formItemInfo);
+    const renderItem = ($xeForm, item) => {
+      const formProps = $xeForm.props;
+      const $xeGrid = $xeForm.xeGrid;
+      const {
+        data,
+        readonly,
+        disabled
+      } = formProps;
+      const {
+        visible,
+        field,
+        itemRender,
+        contentStyle,
+        showContent
+      } = item;
+      const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
+      const itemStyle = compConf ? compConf.formItemStyle || compConf.itemStyle : null;
+      const itemContentStyle = compConf ? compConf.formItemContentStyle || compConf.itemContentStyle : null;
+      const params = {
+        data,
+        disabled,
+        readonly,
+        field,
+        property: field,
+        item,
+        $form: $xeForm,
+        $grid: $xeGrid
+      };
+      if (visible === false) {
+        return renderEmptyElement($xeFormItem);
+      }
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refElem,
+        key: item.id,
+        itemid: item.id,
+        class: getItemClass($xeForm, item),
+        style: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(itemStyle) ? itemStyle(params) : itemStyle
+      }, [renderTitle($xeForm, item), showContent === false ? renderEmptyElement($xeFormItem) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: getItemContentClass($xeForm, item),
+        style: Object.assign({}, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(contentStyle) ? contentStyle(params) : contentStyle)
+      }, [renderItemContent($xeForm, item), renderItemErrorIcon($xeForm, item)])]);
+    };
+    const renderVN = () => {
+      const customLayout = $xeForm ? $xeForm.props.customLayout : false;
+      const item = formItem;
+      return customLayout ? renderItem($xeForm, item) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refElem
+      });
+    };
+    const $xeFormItem = {
+      xID,
+      formItem,
+      renderVN
+    };
+    watchItem(props, formItem);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      const elem = refElem.value;
+      assembleItem($xeForm, elem, formItem, $xeFormGroup);
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
+      destroyItem($xeForm, formItem);
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('$xeFormItem', $xeFormItem);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('$xeFormGroup', null);
+    return $xeFormItem;
+  },
+  render() {
+    return this.renderVN();
+  }
+}));
 ;// ./packages/form/src/form-config-item.ts
 
 
@@ -25989,10 +26217,12 @@ function renderItemContent($xeForm, item) {
 
 
 
+
 const VxeFormConfigItem = defineVxeComponent({
   name: 'VxeFormConfigItem',
   props: {
-    itemConfig: Object
+    itemConfig: Object,
+    ...formItemProps
   },
   setup(props) {
     const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', {});
@@ -26000,6 +26230,12 @@ const VxeFormConfigItem = defineVxeComponent({
       itemConfig: props.itemConfig
     };
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('xeFormItemInfo', xeformiteminfo);
+    const computeItemVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        visible
+      } = props.itemConfig;
+      return visible;
+    });
     const renderItem = ($xeForm, item) => {
       const formProps = $xeForm.props;
       const $xeGrid = $xeForm.xeGrid;
@@ -26009,13 +26245,13 @@ const VxeFormConfigItem = defineVxeComponent({
         disabled
       } = formProps;
       const {
-        visible,
         field,
         itemRender,
         contentStyle,
         children,
         showContent
       } = item;
+      const itemVisible = computeItemVisible.value;
       const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
       const itemStyle = compConf ? compConf.formItemStyle || compConf.itemStyle : null;
       const itemContentStyle = compConf ? compConf.formItemContentStyle || compConf.itemContentStyle : null;
@@ -26030,7 +26266,7 @@ const VxeFormConfigItem = defineVxeComponent({
         $grid: $xeGrid
       };
       const hasGroup = children && children.length > 0;
-      if (visible === false) {
+      if (itemVisible === false) {
         return renderEmptyElement($xeForm);
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -26882,6 +27118,14 @@ function checkRuleStatus(rule, data, val) {
   }
   return true;
 }
+function form_createReactData() {
+  return {
+    collapseAll: false,
+    staticItems: [],
+    formItems: [],
+    itemWidth: 0
+  };
+}
 function form_createInternalData() {
   return {
     meTimeout: undefined,
@@ -26890,7 +27134,9 @@ function form_createInternalData() {
       item: null,
       visible: false
     },
-    itemFormatCache: {}
+    itemFormatCache: {},
+    fullItemIdData: {},
+    fullItemFieldData: {}
   };
 }
 /* harmony default export */ var src_form = (defineVxeComponent({
@@ -26987,12 +27233,7 @@ function form_createInternalData() {
     const {
       computeSize
     } = useSize(props);
-    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
-      collapseAll: props.collapseStatus,
-      staticItems: [],
-      formItems: [],
-      itemWidth: 0
-    });
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(form_createReactData());
     const internalData = form_createInternalData();
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refTooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -27065,7 +27306,7 @@ function form_createInternalData() {
       }
       return [];
     };
-    const loadItem = list => {
+    const loadItems = list => {
       if (list.length) {
         list.forEach(item => {
           if (item.slots) {
@@ -27097,10 +27338,11 @@ function form_createInternalData() {
       return itemList;
     };
     const getItemByField = field => {
-      const rest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(reactData.formItems, item => item.field === field, {
-        children: 'children'
-      });
-      return rest ? rest.item : null;
+      const {
+        fullItemFieldData
+      } = internalData;
+      const itemRest = fullItemFieldData[field];
+      return itemRest ? itemRest.item : null;
     };
     const getCollapseStatus = () => {
       return reactData.collapseAll;
@@ -27179,6 +27421,34 @@ function form_createInternalData() {
       }
       return resetValue;
     };
+    const cacheItem = () => {
+      const {
+        formItems
+      } = reactData;
+      const itemIdData = {};
+      const itemFieldData = {};
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(formItems, (item, index, items) => {
+        const {
+          id,
+          field
+        } = item;
+        const itemRest = {
+          item,
+          items,
+          index
+        };
+        if (id) {
+          itemIdData[id] = itemRest;
+        }
+        if (field) {
+          itemFieldData[field] = itemRest;
+        }
+      }, {
+        children: 'children'
+      });
+      internalData.fullItemFieldData = itemFieldData;
+      internalData.fullItemIdData = itemIdData;
+    };
     const reset = () => {
       const {
         data
@@ -27613,6 +27883,18 @@ function form_createInternalData() {
     const handleGlobalResizeEvent = () => {
       recalculate();
     };
+    const handleItemVisible = visible => {
+      return function (fieldOrItems) {
+        const objs = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(fieldOrItems) ? fieldOrItems : [fieldOrItems];
+        objs.forEach(obj => {
+          const item = handleFieldOrItem($xeForm, obj);
+          if (item) {
+            item.visible = visible;
+          }
+        });
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      };
+    };
     formMethods = {
       dispatchEvent(type, params, evnt) {
         emit(type, createEvent(evnt, {
@@ -27620,6 +27902,9 @@ function form_createInternalData() {
           $grid: $xeGrid
         }, params));
       },
+      loadItems,
+      showItem: handleItemVisible(true),
+      hideItem: handleItemVisible(false),
       reset,
       validate,
       validateField,
@@ -27679,11 +27964,11 @@ function form_createInternalData() {
       }, customLayout ? defaultSlot ? defaultSlot({}) : [] : formItems.map((item, index) => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(form_config_item, {
           key: index,
-          itemConfig: item
+          itemConfig: item,
+          visible: item.visible
         });
       })), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-form-slots',
-        ref: 'hideItem'
+        class: 'vxe-form-slots'
       }, customLayout ? [] : defaultSlot ? defaultSlot({}) : []),
       /**
        * 加载中
@@ -27722,6 +28007,7 @@ function form_createInternalData() {
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(staticItemFlag, () => {
       reactData.formItems = reactData.staticItems;
       recalcFlag.value++;
+      cacheItem();
     });
     const itemFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.items ? props.items.length : -1, () => {
@@ -27731,7 +28017,7 @@ function form_createInternalData() {
       itemFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(itemFlag, () => {
-      loadItem(props.items || []);
+      loadItems(props.items || []);
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.collapseStatus, value => {
       reactData.collapseAll = !!value;
@@ -27754,8 +28040,9 @@ function form_createInternalData() {
       globalEvents.off($xeForm, 'resize');
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, form_createInternalData());
     });
+    reactData.collapseAll = !!props.collapseStatus;
     if (props.items) {
-      loadItem(props.items);
+      loadItems(props.items);
     }
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('xeFormItemInfo', null);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('$xeForm', $xeForm);
@@ -27781,181 +28068,6 @@ dynamicApp.use(VxeForm);
 VxeUI.component(src_form);
 const Form = VxeForm;
 /* harmony default export */ var packages_form = (VxeForm);
-;// ./packages/form/src/form-item.ts
-
-
-
-
-
-
-
-const formItemProps = {
-  title: String,
-  field: String,
-  span: {
-    type: [String, Number],
-    default: null
-  },
-  align: {
-    type: String,
-    default: null
-  },
-  verticalAlign: {
-    type: String,
-    default: null
-  },
-  titleBackground: {
-    type: Boolean,
-    default: null
-  },
-  titleBold: {
-    type: Boolean,
-    default: null
-  },
-  titleAlign: {
-    type: String,
-    default: null
-  },
-  titleWidth: {
-    type: [String, Number],
-    default: null
-  },
-  titleColon: {
-    type: Boolean,
-    default: null
-  },
-  titleAsterisk: {
-    type: Boolean,
-    default: null
-  },
-  showTitle: {
-    type: Boolean,
-    default: true
-  },
-  vertical: {
-    type: Boolean,
-    default: null
-  },
-  padding: {
-    type: Boolean,
-    default: null
-  },
-  formatter: [String, Function],
-  className: [String, Function],
-  contentClassName: [String, Function],
-  contentStyle: [Object, Function],
-  titleClassName: [String, Function],
-  titleStyle: [Object, Function],
-  titleOverflow: {
-    type: [Boolean, String],
-    default: null
-  },
-  titlePrefix: Object,
-  titleSuffix: Object,
-  resetValue: {
-    default: null
-  },
-  visibleMethod: Function,
-  visible: {
-    type: Boolean,
-    default: null
-  },
-  showContent: {
-    type: Boolean,
-    default: null
-  },
-  folding: Boolean,
-  collapseNode: Boolean,
-  itemRender: Object,
-  rules: Array,
-  params: Object
-};
-/* harmony default export */ var form_item = (defineVxeComponent({
-  name: 'VxeFormItem',
-  props: formItemProps,
-  setup(props, {
-    slots
-  }) {
-    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
-    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', {});
-    const $xeFormGroup = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeFormGroup', null);
-    const formItem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(createItem($xeForm, props));
-    formItem.slots = slots;
-    const formItemInfo = {
-      itemConfig: formItem
-    };
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('xeFormItemInfo', formItemInfo);
-    const renderItem = ($xeForm, item) => {
-      const formProps = $xeForm.props;
-      const $xeGrid = $xeForm.xeGrid;
-      const {
-        data,
-        readonly,
-        disabled
-      } = formProps;
-      const {
-        visible,
-        field,
-        itemRender,
-        contentStyle,
-        showContent
-      } = item;
-      const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
-      const itemStyle = compConf ? compConf.formItemStyle || compConf.itemStyle : null;
-      const itemContentStyle = compConf ? compConf.formItemContentStyle || compConf.itemContentStyle : null;
-      const params = {
-        data,
-        disabled,
-        readonly,
-        field,
-        property: field,
-        item,
-        $form: $xeForm,
-        $grid: $xeGrid
-      };
-      if (visible === false) {
-        return renderEmptyElement($xeFormItem);
-      }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refElem,
-        key: item.id,
-        itemid: item.id,
-        class: getItemClass($xeForm, item),
-        style: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(itemStyle) ? itemStyle(params) : itemStyle
-      }, [renderTitle($xeForm, item), showContent === false ? renderEmptyElement($xeFormItem) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: getItemContentClass($xeForm, item),
-        style: Object.assign({}, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(contentStyle) ? contentStyle(params) : contentStyle)
-      }, [renderItemContent($xeForm, item), renderItemErrorIcon($xeForm, item)])]);
-    };
-    const renderVN = () => {
-      const customLayout = $xeForm ? $xeForm.props.customLayout : false;
-      const item = formItem;
-      return customLayout ? renderItem($xeForm, item) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refElem
-      });
-    };
-    const $xeFormItem = {
-      xID,
-      formItem,
-      renderVN
-    };
-    watchItem(props, formItem);
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      const elem = refElem.value;
-      assembleItem($xeForm, elem, formItem, $xeFormGroup);
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
-      destroyItem($xeForm, formItem);
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('$xeFormItem', $xeFormItem);
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('$xeFormGroup', null);
-    return $xeFormItem;
-  },
-  render() {
-    return this.renderVN();
-  }
-}));
 ;// ./packages/form/src/form-group.ts
 
 
@@ -33713,7 +33825,10 @@ function select_createInternalData() {
   props: {
     modelValue: [String, Number, Boolean, Array],
     defaultConfig: Object,
-    clearable: Boolean,
+    clearable: {
+      type: Boolean,
+      default: () => getConfig().select.clearable
+    },
     placeholder: String,
     readonly: {
       type: Boolean,
@@ -41163,7 +41278,10 @@ function table_select_createInternalData() {
   name: 'VxeTableSelect',
   props: {
     modelValue: [String, Number, Array],
-    clearable: Boolean,
+    clearable: {
+      type: Boolean,
+      default: getConfig().tableSelect.clearable
+    },
     placeholder: {
       type: String,
       default: () => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(getConfig().tableSelect.placeholder) ? getI18n('vxe.base.pleaseSelect') : getConfig().tableSelect.placeholder
@@ -47412,7 +47530,10 @@ function tree_select_createInternalData() {
   name: 'VxeTreeSelect',
   props: {
     modelValue: [String, Number, Array],
-    clearable: Boolean,
+    clearable: {
+      type: Boolean,
+      default: getConfig().treeSelect.clearable
+    },
     placeholder: {
       type: String,
       default: () => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(getConfig().treeSelect.placeholder) ? getI18n('vxe.base.pleaseSelect') : getConfig().treeSelect.placeholder
@@ -48952,7 +49073,9 @@ function upload_createInternalData() {
         showMoreButton: true
       }, props.moreConfig);
     });
-    const computeMaps = {};
+    const computeMaps = {
+      computeUrlProp
+    };
     const $xeUpload = {
       xID,
       props,
@@ -49412,16 +49535,20 @@ function upload_createInternalData() {
       handleChange(fileList);
       // 自动更新校验状态
       if ($xeForm && formItemInfo) {
-        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, fileList);
+        $xeForm.triggerItemEvent(evnt || {
+          type: 'remove'
+        }, formItemInfo.itemConfig.field, fileList);
+      }
+      if (evnt) {
+        dispatchEvent('remove', {
+          option: item
+        }, evnt);
       }
-      dispatchEvent('remove', {
-        option: item
-      }, evnt);
     };
     const removeFileEvent = (evnt, item, index) => {
       const beforeRemoveFn = props.beforeRemoveMethod || getConfig().upload.beforeRemoveMethod;
       const removeFn = props.removeMethod || getConfig().upload.removeMethod;
-      Promise.resolve(beforeRemoveFn ? beforeRemoveFn({
+      return Promise.resolve(beforeRemoveFn ? beforeRemoveFn({
         $upload: $xeUpload,
         option: item
       }) : true).then(status => {
@@ -49437,10 +49564,13 @@ function upload_createInternalData() {
             handleRemoveEvent(evnt, item, index);
           }
         } else {
-          dispatchEvent('remove-fail', {
-            option: item
-          }, evnt);
+          if (evnt) {
+            dispatchEvent('remove-fail', {
+              option: item
+            }, evnt);
+          }
         }
+        return status;
       });
     };
     const handleDownloadEvent = (evnt, item) => {
@@ -49835,11 +49965,56 @@ function upload_createInternalData() {
     const handleGlobalBlurEvent = () => {
       reactData.isActivated = false;
     };
+    const handleClearFile = evnt => {
+      const {
+        fileList
+      } = reactData;
+      const urlProp = computeUrlProp.value;
+      const rest = [];
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().lastEach(fileList, (item, index) => {
+        rest.push(removeFileEvent(evnt, item, index).then(status => {
+          return {
+            url: item[urlProp],
+            status
+          };
+        }));
+      });
+      return Promise.all(rest);
+    };
+    const handleRemoveFile = (evnt, urlOrItem) => {
+      const {
+        fileList
+      } = reactData;
+      const urlProp = computeUrlProp.value;
+      const urls = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(urlOrItem) ? urlOrItem : [urlOrItem];
+      const rest = [];
+      urls.forEach(obj => {
+        if (obj) {
+          const url = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(obj) ? obj : obj[urlProp];
+          const index = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(fileList, fileItem => fileItem[urlProp] === url);
+          if (index > -1) {
+            rest.push(removeFileEvent(evnt, fileList[index], index).then(status => {
+              return {
+                url,
+                status
+              };
+            }));
+          }
+        }
+      });
+      return Promise.all(rest);
+    };
     const uploadMethods = {
       dispatchEvent,
       choose() {
         return handleChoose(null);
       },
+      clear() {
+        return handleClearFile(null);
+      },
+      clearByEvent(evnt) {
+        return handleClearFile(evnt);
+      },
       getPendingFiles() {
         const {
           fileList,
@@ -49914,9 +50089,17 @@ function upload_createInternalData() {
           VxeUI.modal.close(internalData.moreId);
         }
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      remove(urlOrItem) {
+        return handleRemoveFile(null, urlOrItem);
+      },
+      removeByEvent(evnt, urlOrItem) {
+        return handleRemoveFile(evnt, urlOrItem);
       }
     };
-    const uploadPrivateMethods = {};
+    const uploadPrivateMethods = {
+      removeFileEvent
+    };
     Object.assign($xeUpload, uploadMethods, uploadPrivateMethods);
     const renderFileItemList = (currList, isMoreView) => {
       const {