vxe-pc-ui 4.14.27 → 4.14.29

package/dist/all.esm.js

@@ -80,11 +80,11 @@ function checkDynamic() {
     }
 }
 
-const version$1 = `ui v${"4.14.27"}`;
+const version$1 = `ui v${"4.14.30"}`;
 const warnLog = log.create('warn', version$1);
 const errLog = log.create('error', version$1);
 
-const version = "4.14.27";
+const version = "4.14.30";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -14423,6 +14423,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             default: 'date'
         },
         className: String,
+        cellClassName: [String, Function],
         size: {
             type: String,
             default: () => getConfig$3().datePanel.size || getConfig$3().size
@@ -15267,7 +15268,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             if (!props.multiple) {
                 hidePanel();
             }
-            dispatchEvent('date-today', { type: props.type }, evnt);
+            dispatchEvent('date-today', { viewType: reactData.datePanelType, type: props.type, viewDate: reactData.selectMonth }, evnt);
         };
         const dateNextEvent = (evnt) => {
             const { type } = props;
@@ -15300,7 +15301,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                     }
                 }
                 reactData.selectMonth = viewDate;
-                dispatchEvent('date-next', { viewType: datePanelType, value, type }, evnt);
+                dispatchEvent('date-next', { viewType: datePanelType, value, type, viewDate }, evnt);
             }
         };
         const isRangeDisabled = (item) => {
@@ -15584,7 +15585,8 @@ var VxeDatePanelComponent = defineVxeComponent({
                 }
             },
             getPanelDate() {
-                return reactData.selectMonth;
+                const { selectMonth } = reactData;
+                return selectMonth ? new Date(selectMonth.getTime()) : new Date();
             },
             checkValue(value) {
                 afterCheckValue(value);
@@ -15638,7 +15640,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             return labelVNs;
         };
         const renderDateDayTable = () => {
-            const { multiple } = props;
+            const { type, multiple, cellClassName } = props;
             const { datePanelType, datePanelValue } = reactData;
             const dateValue = computeDateValue.value;
             const dateHeaders = computeDateHeaders.value;
@@ -15683,7 +15685,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                         }, rows.map((item) => {
                             const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
                             return h('div', {
-                                class: ['vxe-date-panel--view-item', {
+                                class: ['vxe-date-panel--view-item', cellClassName ? (XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ''}` : `${cellClassName || ''}`) : '', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
@@ -15711,7 +15713,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             ];
         };
         const renderDateWeekTable = () => {
-            const { multiple } = props;
+            const { type, multiple, cellClassName } = props;
             const { datePanelType, datePanelValue } = reactData;
             const dateValue = computeDateValue.value;
             const weekHeaders = computeWeekHeaders.value;
@@ -15758,7 +15760,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                             }
                         }, rows.map((item, rIndex) => {
                             return h('div', {
-                                class: ['vxe-date-panel--view-item', {
+                                class: ['vxe-date-panel--view-item', cellClassName ? (XEUtils.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,
@@ -15786,7 +15788,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             ];
         };
         const renderDateMonthTable = () => {
-            const { multiple } = props;
+            const { type, multiple, cellClassName } = props;
             const { datePanelType, datePanelValue } = reactData;
             const dateValue = computeDateValue.value;
             const monthDatas = computeMonthDatas.value;
@@ -15808,7 +15810,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                         }, rows.map((item) => {
                             const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
                             return h('div', {
-                                class: ['vxe-date-panel--view-item', {
+                                class: ['vxe-date-panel--view-item', cellClassName ? (XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ''}` : `${cellClassName || ''}`) : '', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
@@ -15836,7 +15838,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             ];
         };
         const renderDateQuarterTable = () => {
-            const { multiple } = props;
+            const { type, multiple, cellClassName } = props;
             const { datePanelType, datePanelValue } = reactData;
             const dateValue = computeDateValue.value;
             const quarterDatas = computeQuarterDatas.value;
@@ -15858,7 +15860,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                         }, rows.map((item) => {
                             const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
                             return h('div', {
-                                class: ['vxe-date-panel--view-item', {
+                                class: ['vxe-date-panel--view-item', cellClassName ? (XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ''}` : `${cellClassName || ''}`) : '', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
@@ -15886,7 +15888,7 @@ var VxeDatePanelComponent = defineVxeComponent({
             ];
         };
         const renderDateYearTable = () => {
-            const { multiple } = props;
+            const { type, multiple, cellClassName } = props;
             const { datePanelType, datePanelValue } = reactData;
             const dateValue = computeDateValue.value;
             const yearDatas = computeYearDatas.value;
@@ -15908,7 +15910,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                         }, rows.map((item) => {
                             const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
                             return h('div', {
-                                class: ['vxe-date-panel--view-item', {
+                                class: ['vxe-date-panel--view-item', cellClassName ? (XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ''}` : `${cellClassName || ''}`) : '', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
@@ -17185,6 +17187,10 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             type: Boolean,
             default: () => getConfig$3().dateRangePicker.clearable
         },
+        linkedPanels: {
+            type: Boolean,
+            default: () => getConfig$3().dateRangePicker.linkedPanels
+        },
         readonly: {
             type: Boolean,
             default: null
@@ -17652,6 +17658,19 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                 }
             }
         };
+        const panelCellClassName = ({ date }) => {
+            const startValue = reactData.startValue;
+            const endValue = reactData.endValue;
+            if (startValue && endValue) {
+                const currTime = date.getTime();
+                const startTime = XEUtils.toStringDate(startValue).getTime();
+                const endTime = XEUtils.toStringDate(endValue).getTime();
+                if (currTime >= startTime && currTime <= endTime) {
+                    return 'is--range-selected';
+                }
+            }
+            return '';
+        };
         const handleSelectClose = () => {
             const { autoClose } = props;
             const { startValue, endValue } = reactData;
@@ -17687,6 +17706,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             }
             if (!reactData.visiblePanel) {
                 reactData.isActivated = false;
+                checkValue();
             }
             dispatchEvent('blur', { value, startValue, endValue }, evnt);
             // 自动更新校验状态
@@ -17758,6 +17778,70 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                 }
             });
         };
+        const startPanelDateBtnChangeEvent = (params) => {
+            const { linkedPanels } = props;
+            if (linkedPanels) {
+                const { viewType } = params;
+                const $startDatePanel = refStartDatePanel.value;
+                const $endDatePanel = refEndDatePanel.value;
+                if (!$startDatePanel || !$endDatePanel) {
+                    return;
+                }
+                const startPanelDate = $startDatePanel.getPanelDate();
+                if (!startPanelDate) {
+                    return;
+                }
+                const endYear = startPanelDate.getFullYear();
+                const endMonth = startPanelDate.getMonth();
+                switch (viewType) {
+                    case 'day':
+                    case 'date':
+                    case 'week': {
+                        if (endMonth < 11) {
+                            startPanelDate.setMonth(endMonth + 1);
+                        }
+                        else {
+                            startPanelDate.setFullYear(endYear + 1);
+                            startPanelDate.setMonth(0);
+                        }
+                        $endDatePanel.setPanelDate(startPanelDate);
+                        break;
+                    }
+                }
+            }
+        };
+        const endPanelDateBtnChangeEvent = (params) => {
+            const { linkedPanels } = props;
+            if (linkedPanels) {
+                const { viewType } = params;
+                const $startDatePanel = refStartDatePanel.value;
+                const $endDatePanel = refEndDatePanel.value;
+                if (!$startDatePanel || !$endDatePanel) {
+                    return;
+                }
+                const endPanelDate = $endDatePanel.getPanelDate();
+                if (!endPanelDate) {
+                    return;
+                }
+                const endYear = endPanelDate.getFullYear();
+                const endMonth = endPanelDate.getMonth();
+                switch (viewType) {
+                    case 'day':
+                    case 'date':
+                    case 'week': {
+                        if (endMonth) {
+                            endPanelDate.setMonth(endMonth - 1);
+                        }
+                        else {
+                            endPanelDate.setFullYear(endYear - 1);
+                            endPanelDate.setMonth(11);
+                        }
+                        $startDatePanel.setPanelDate(endPanelDate);
+                        break;
+                    }
+                }
+            }
+        };
         // 全局事件
         const handleGlobalMousedownEvent = (evnt) => {
             const { visiblePanel, isActivated } = reactData;
@@ -18117,7 +18201,11 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                                             festivalMethod: props.festivalMethod,
                                             disabledMethod: props.disabledMethod,
                                             selectDay: props.selectDay,
-                                            onChange: startPanelChangeEvent
+                                            cellClassName: panelCellClassName,
+                                            onChange: startPanelChangeEvent,
+                                            onDatePrev: startPanelDateBtnChangeEvent,
+                                            onDateToday: startPanelDateBtnChangeEvent,
+                                            onDateNext: startPanelDateBtnChangeEvent
                                         }),
                                         h(VxeDatePanelComponent, {
                                             ref: refEndDatePanel,
@@ -18137,7 +18225,11 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                                             festivalMethod: props.festivalMethod,
                                             disabledMethod: props.disabledMethod,
                                             selectDay: props.selectDay,
-                                            onChange: endPanelChangeEvent
+                                            cellClassName: panelCellClassName,
+                                            onChange: endPanelChangeEvent,
+                                            onDatePrev: endPanelDateBtnChangeEvent,
+                                            onDateToday: endPanelDateBtnChangeEvent,
+                                            onDateNext: endPanelDateBtnChangeEvent
                                         })
                                     ]),
                                     h('div', {
@@ -26507,7 +26599,10 @@ var VxeSelectComponent = defineVxeComponent({
     props: {
         modelValue: [String, Number, Boolean, Array],
         defaultConfig: Object,
-        clearable: Boolean,
+        clearable: {
+            type: Boolean,
+            default: () => getConfig$3().select.clearable
+        },
         placeholder: String,
         readonly: {
             type: Boolean,
@@ -33222,7 +33317,10 @@ var VxeTableSelectComponent = defineVxeComponent({
     name: 'VxeTableSelect',
     props: {
         modelValue: [String, Number, Array],
-        clearable: Boolean,
+        clearable: {
+            type: Boolean,
+            default: getConfig$3().tableSelect.clearable
+        },
         placeholder: {
             type: String,
             default: () => XEUtils.eqNull(getConfig$3().tableSelect.placeholder) ? getI18n$2('vxe.base.pleaseSelect') : getConfig$3().tableSelect.placeholder
@@ -38665,7 +38763,10 @@ var VxeTreeSelectComponent = defineVxeComponent({
     name: 'VxeTreeSelect',
     props: {
         modelValue: [String, Number, Array],
-        clearable: Boolean,
+        clearable: {
+            type: Boolean,
+            default: getConfig$3().treeSelect.clearable
+        },
         placeholder: {
             type: String,
             default: () => XEUtils.eqNull(getConfig$3().treeSelect.placeholder) ? getI18n$2('vxe.base.pleaseSelect') : getConfig$3().treeSelect.placeholder
@@ -40087,7 +40188,9 @@ var VxeUploadComponent = defineVxeComponent({
         const computeMoreOpts = computed(() => {
             return Object.assign({ showMoreButton: true }, props.moreConfig);
         });
-        const computeMaps = {};
+        const computeMaps = {
+            computeUrlProp
+        };
         const $xeUpload = {
             xID,
             props,
@@ -40480,14 +40583,16 @@ var VxeUploadComponent = defineVxeComponent({
             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$3().upload.beforeRemoveMethod;
             const removeFn = props.removeMethod || getConfig$3().upload.removeMethod;
-            Promise.resolve(beforeRemoveFn
+            return Promise.resolve(beforeRemoveFn
                 ? beforeRemoveFn({
                     $upload: $xeUpload,
                     option: item
@@ -40507,8 +40612,11 @@ var VxeUploadComponent = defineVxeComponent({
                     }
                 }
                 else {
-                    dispatchEvent('remove-fail', { option: item }, evnt);
+                    if (evnt) {
+                        dispatchEvent('remove-fail', { option: item }, evnt);
+                    }
                 }
+                return status;
             });
         };
         const handleDownloadEvent = (evnt, item) => {
@@ -40867,11 +40975,46 @@ var VxeUploadComponent = defineVxeComponent({
         const handleGlobalBlurEvent = () => {
             reactData.isActivated = false;
         };
+        const handleClearFile = (evnt) => {
+            const { fileList } = reactData;
+            const urlProp = computeUrlProp.value;
+            const rest = [];
+            XEUtils.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 = (XEUtils.isArray(urlOrItem) ? urlOrItem : [urlOrItem]);
+            const rest = [];
+            urls.forEach((obj) => {
+                if (obj) {
+                    const url = XEUtils.isString(obj) ? obj : obj[urlProp];
+                    const index = XEUtils.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, fileCacheMaps } = reactData;
                 const pendingFiles = [];
@@ -40934,9 +41077,17 @@ var VxeUploadComponent = defineVxeComponent({
                     VxeUI.modal.close(internalData.moreId);
                 }
                 return 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 { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;