vxe-pc-ui 4.1.18 → 4.1.20

package/README.md

@@ -92,7 +92,7 @@
 
 [👀 Vxe Table](https://vxetable.cn)  
 
-* [x] table 表格
+* [x] table 表格-基础表格
 * [x] column 表格-列
 * [x] colgroup 表格-分组列
 * [x] toolbar 表格-工具栏

package/es/button/src/button.js

@@ -95,6 +95,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 $xeButtonGroup = inject('$xeButtonGroup', null);
@@ -135,7 +136,7 @@ export default defineComponent({
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
                 }
-                if ($xeTable || $xeModal || $xeForm) {
+                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
                     return true;
                 }
             }

package/es/card/src/card.js

@@ -57,10 +57,11 @@ export default defineComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $card: $xeCard }, params));
+        };
         const cardMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $card: $xeCard }, params));
-            }
+            dispatchEvent
         };
         const cardPrivateMethods = {};
         Object.assign($xeCard, cardMethods, cardPrivateMethods);

package/es/countdown/src/countdown.js

@@ -10,7 +10,10 @@ export default defineComponent({
         format: String,
         prefixConfig: Object,
         suffixConfig: Object,
-        size: { type: String, default: () => getConfig().countdown.size || getConfig().size }
+        size: {
+            type: String,
+            default: () => getConfig().countdown.size || getConfig().size
+        }
     },
     emits: [
         'update:modelValue',
@@ -26,6 +29,9 @@ export default defineComponent({
             currNum: 0,
             secondNum: 0
         });
+        const internalData = {
+            dnTimeout: undefined
+        };
         const refMaps = {
             refElem
         };
@@ -79,10 +85,10 @@ export default defineComponent({
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
-        let htime = null;
         const dispatchEvent = (type, params, evnt) => {
             emit(type, createEvent(evnt, { $carousel: $xeCountdown }, params));
         };
@@ -95,11 +101,13 @@ export default defineComponent({
             const { currNum } = reactData;
             if (currNum > 1000) {
                 reactData.currNum -= 1000;
-                htime = setTimeout(handleTime, 1000);
+                internalData.dnTimeout = setTimeout(() => {
+                    handleTime();
+                }, 1000);
             }
             else {
                 reactData.currNum = 0;
-                stop();
+                handleStop();
             }
         };
         const countdownMethods = {
@@ -110,9 +118,10 @@ export default defineComponent({
             handleTime();
         };
         const handleStop = () => {
-            if (htime != null) {
-                clearTimeout(htime);
-                htime = null;
+            const { dnTimeout } = internalData;
+            if (dnTimeout) {
+                clearTimeout(dnTimeout);
+                internalData.dnTimeout = undefined;
                 dispatchEvent('end', {}, null);
             }
         };

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

@@ -9,10 +9,19 @@ export default defineComponent({
     name: 'VxeDatePicker',
     props: {
         modelValue: [String, Number, Date],
-        immediate: { type: Boolean, default: true },
+        immediate: {
+            type: Boolean,
+            default: true
+        },
         name: String,
-        type: { type: String, default: 'date' },
-        clearable: { type: Boolean, default: () => getConfig().datePicker.clearable },
+        type: {
+            type: String,
+            default: 'date'
+        },
+        clearable: {
+            type: Boolean,
+            default: () => getConfig().datePicker.clearable
+        },
         readonly: {
             type: Boolean,
             default: null
@@ -22,35 +31,66 @@ export default defineComponent({
             default: null
         },
         placeholder: String,
-        maxlength: [String, Number],
-        autocomplete: { type: String, default: 'off' },
+        maxLength: [String, Number],
+        autoComplete: {
+            type: String,
+            default: 'off'
+        },
         align: String,
         form: String,
         className: String,
-        size: { type: String, default: () => getConfig().datePicker.size || getConfig().size },
+        size: {
+            type: String,
+            default: () => getConfig().datePicker.size || getConfig().size
+        },
         multiple: Boolean,
         // date、week、month、quarter、year
-        startDate: { type: [String, Number, Date], default: () => getConfig().datePicker.startDate },
-        endDate: { type: [String, Number, Date], default: () => getConfig().datePicker.endDate },
+        startDate: {
+            type: [String, Number, Date],
+            default: () => getConfig().datePicker.startDate
+        },
+        endDate: {
+            type: [String, Number, Date],
+            default: () => getConfig().datePicker.endDate
+        },
         minDate: [String, Number, Date],
         maxDate: [String, Number, Date],
-        // 已废弃 startWeek，被 startDay 替换
-        startWeek: Number,
-        startDay: { type: [String, Number], default: () => getConfig().datePicker.startDay },
+        startDay: {
+            type: [String, Number],
+            default: () => getConfig().datePicker.startDay
+        },
         labelFormat: String,
         valueFormat: String,
-        editable: { type: Boolean, default: true },
-        festivalMethod: { type: Function, default: () => getConfig().datePicker.festivalMethod },
-        disabledMethod: { type: Function, default: () => getConfig().datePicker.disabledMethod },
+        editable: {
+            type: Boolean,
+            default: true
+        },
+        festivalMethod: {
+            type: Function,
+            default: () => getConfig().datePicker.festivalMethod
+        },
+        disabledMethod: {
+            type: Function,
+            default: () => getConfig().datePicker.disabledMethod
+        },
         // week
-        selectDay: { type: [String, Number], default: () => getConfig().datePicker.selectDay },
+        selectDay: {
+            type: [String, Number],
+            default: () => getConfig().datePicker.selectDay
+        },
         prefixIcon: String,
         suffixIcon: String,
         placement: String,
         transfer: {
             type: Boolean,
             default: null
-        }
+        },
+        // 已废弃 startWeek，被 startDay 替换
+        startWeek: Number,
+        // 已废弃
+        maxlength: [String, Number],
+        // 已废弃
+        autocomplete: String
     },
     emits: [
         'update:modelValue',
@@ -72,20 +112,18 @@ 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);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const yearSize = 12;
-        const monthSize = 20;
-        const quarterSize = 8;
         const reactData = reactive({
             initialized: false,
             panelIndex: 0,
             visiblePanel: false,
             isAniVisible: false,
-            panelStyle: null,
+            panelStyle: {},
             panelPlacement: '',
             isActivated: false,
             inputValue: props.modelValue,
@@ -96,6 +134,12 @@ export default defineComponent({
             selectMonth: null,
             currentDate: null
         });
+        const internalData = {
+            yearSize: 12,
+            monthSize: 20,
+            quarterSize: 8,
+            hpTimeout: undefined
+        };
         const refElem = ref();
         const refInputTarget = ref();
         const refInputPanel = ref();
@@ -110,16 +154,10 @@ export default defineComponent({
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps
         };
         let datePickerMethods = {};
-        const parseDate = (value, format) => {
-            const { type } = props;
-            if (type === 'time') {
-                return toStringTimeDate(value);
-            }
-            return XEUtils.toStringDate(value, format);
-        };
         const computeBtnTransfer = computed(() => {
             const { transfer } = props;
             if (transfer === null) {
@@ -127,7 +165,7 @@ export default defineComponent({
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
                 }
-                if ($xeTable || $xeModal || $xeForm) {
+                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
                     return true;
                 }
             }
@@ -183,7 +221,7 @@ export default defineComponent({
                     if (XEUtils.isValidDate(date)) {
                         return date;
                     }
-                    return null;
+                    return date;
                 });
             }
             return [];
@@ -203,7 +241,13 @@ export default defineComponent({
             if (valueFormat) {
                 return valueFormat;
             }
-            return type === 'time' ? 'HH:mm:ss' : (type === 'datetime' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd');
+            if (type === 'time') {
+                return 'HH:mm:ss';
+            }
+            if (type === 'datetime') {
+                return 'yyyy-MM-dd HH:mm:ss';
+            }
+            return 'yyyy-MM-dd';
         });
         const computeDateValue = computed(() => {
             const { modelValue } = props;
@@ -257,6 +301,7 @@ export default defineComponent({
             return null;
         });
         const computeYearList = computed(() => {
+            const { yearSize } = internalData;
             const { selectMonth, currentDate } = reactData;
             const years = [];
             if (selectMonth && currentDate) {
@@ -350,6 +395,7 @@ export default defineComponent({
             return XEUtils.chunk(yearList, 4);
         });
         const computeQuarterList = computed(() => {
+            const { quarterSize } = internalData;
             const { selectMonth, currentDate } = reactData;
             const quarters = [];
             if (selectMonth && currentDate) {
@@ -379,6 +425,7 @@ export default defineComponent({
             return XEUtils.chunk(quarterList, 2);
         });
         const computeMonthList = computed(() => {
+            const { monthSize } = internalData;
             const { selectMonth, currentDate } = reactData;
             const months = [];
             if (selectMonth && currentDate) {
@@ -520,6 +567,13 @@ export default defineComponent({
             const { immediate } = props;
             return immediate;
         });
+        const parseDate = (value, format) => {
+            const { type } = props;
+            if (type === 'time') {
+                return toStringTimeDate(value);
+            }
+            return XEUtils.toStringDate(value, format);
+        };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
             datePickerMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
@@ -571,11 +625,10 @@ export default defineComponent({
                 datePickerMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt);
             }
         };
-        let hidePanelTimeout;
         const hidePanel = () => {
             return new Promise(resolve => {
                 reactData.visiblePanel = false;
-                hidePanelTimeout = window.setTimeout(() => {
+                internalData.hpTimeout = window.setTimeout(() => {
                     reactData.isAniVisible = false;
                     resolve();
                 }, 350);
@@ -668,9 +721,11 @@ export default defineComponent({
                 date = XEUtils.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
             }
             else if (isDateTimeType) {
-                date.setHours(datetimePanelValue.getHours());
-                date.setMinutes(datetimePanelValue.getMinutes());
-                date.setSeconds(datetimePanelValue.getSeconds());
+                if (datetimePanelValue) {
+                    date.setHours(datetimePanelValue.getHours());
+                    date.setMinutes(datetimePanelValue.getMinutes());
+                    date.setSeconds(datetimePanelValue.getSeconds());
+                }
             }
             const inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek });
             dateCheckMonth(date);
@@ -690,9 +745,11 @@ export default defineComponent({
                     }
                     dateListValue.forEach(item => {
                         if (item) {
-                            item.setHours(datetimePanelValue.getHours());
-                            item.setMinutes(datetimePanelValue.getMinutes());
-                            item.setSeconds(datetimePanelValue.getSeconds());
+                            if (datetimePanelValue) {
+                                item.setHours(datetimePanelValue.getHours());
+                                item.setMinutes(datetimePanelValue.getMinutes());
+                                item.setSeconds(datetimePanelValue.getSeconds());
+                            }
                             datetimeRest.push(item);
                         }
                     });
@@ -738,9 +795,11 @@ export default defineComponent({
                                 const dateValue = computeDateValue.value;
                                 if (inputValue !== XEUtils.toDateString(dateValue, dateLabelFormat) || inputValue !== XEUtils.toDateString(inpDateVal, dateLabelFormat)) {
                                     isChange = true;
-                                    datetimePanelValue.setHours(inpDateVal.getHours());
-                                    datetimePanelValue.setMinutes(inpDateVal.getMinutes());
-                                    datetimePanelValue.setSeconds(inpDateVal.getSeconds());
+                                    if (datetimePanelValue) {
+                                        datetimePanelValue.setHours(inpDateVal.getHours());
+                                        datetimePanelValue.setMinutes(inpDateVal.getMinutes());
+                                        datetimePanelValue.setSeconds(inpDateVal.getSeconds());
+                                    }
                                 }
                             }
                             else {
@@ -804,6 +863,7 @@ export default defineComponent({
         const datePrevEvent = (evnt) => {
             const { type } = props;
             const { datePanelType, selectMonth } = reactData;
+            const { yearSize } = internalData;
             const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
             if (!isDisabledPrevDateBtn) {
                 if (type === 'year') {
@@ -842,6 +902,7 @@ export default defineComponent({
         const dateNextEvent = (evnt) => {
             const { type } = props;
             const { datePanelType, selectMonth } = reactData;
+            const { yearSize } = internalData;
             const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
             if (!isDisabledNextDateBtn) {
                 if (type === 'year') {
@@ -995,11 +1056,15 @@ export default defineComponent({
             }
         };
         const dateTimeChangeEvent = (evnt) => {
-            reactData.datetimePanelValue = new Date(reactData.datetimePanelValue.getTime());
+            const { datetimePanelValue } = reactData;
+            reactData.datetimePanelValue = datetimePanelValue ? new Date(datetimePanelValue.getTime()) : new Date();
             updateTimePos(evnt.currentTarget);
         };
         const dateHourEvent = (evnt, item) => {
-            reactData.datetimePanelValue.setHours(item.value);
+            const { datetimePanelValue } = reactData;
+            if (datetimePanelValue) {
+                datetimePanelValue.setHours(item.value);
+            }
             dateTimeChangeEvent(evnt);
         };
         const dateConfirmEvent = () => {
@@ -1018,9 +1083,11 @@ export default defineComponent({
                         const datetimeRest = [];
                         dateListValue.forEach(item => {
                             if (item) {
-                                item.setHours(datetimePanelValue.getHours());
-                                item.setMinutes(datetimePanelValue.getMinutes());
-                                item.setSeconds(datetimePanelValue.getSeconds());
+                                if (datetimePanelValue) {
+                                    item.setHours(datetimePanelValue.getHours());
+                                    item.setMinutes(datetimePanelValue.getMinutes());
+                                    item.setSeconds(datetimePanelValue.getSeconds());
+                                }
                                 datetimeRest.push(item);
                             }
                         });
@@ -1038,11 +1105,17 @@ export default defineComponent({
             hidePanel();
         };
         const dateMinuteEvent = (evnt, item) => {
-            reactData.datetimePanelValue.setMinutes(item.value);
+            const { datetimePanelValue } = reactData;
+            if (datetimePanelValue) {
+                datetimePanelValue.setMinutes(item.value);
+            }
             dateTimeChangeEvent(evnt);
         };
         const dateSecondEvent = (evnt, item) => {
-            reactData.datetimePanelValue.setSeconds(item.value);
+            const { datetimePanelValue } = reactData;
+            if (datetimePanelValue) {
+                datetimePanelValue.setSeconds(item.value);
+            }
             dateTimeChangeEvent(evnt);
         };
         const dateOffsetEvent = (evnt) => {
@@ -1155,7 +1228,9 @@ export default defineComponent({
                 reactData.datetimePanelValue = reactData.datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
                 nextTick(() => {
                     const timeBodyElem = refInputTimeBody.value;
-                    XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), updateTimePos);
+                    XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), (elem) => {
+                        updateTimePos(elem);
+                    });
                 });
             }
         };
@@ -1249,7 +1324,10 @@ export default defineComponent({
                 if (!reactData.initialized) {
                     reactData.initialized = true;
                 }
-                clearTimeout(hidePanelTimeout);
+                if (internalData.hpTimeout) {
+                    clearTimeout(internalData.hpTimeout);
+                    internalData.hpTimeout = undefined;
+                }
                 reactData.isActivated = true;
                 reactData.isAniVisible = true;
                 if (isDatePickerType) {
@@ -1408,13 +1486,13 @@ export default defineComponent({
                             }]
                     }, extraItem && extraItem.label
                         ? [
-                            h('span', label),
+                            h('span', `${label}`),
                             h('span', {
                                 class: ['vxe-date-picker--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
                                 style: extraItem.style
                             }, XEUtils.toValueString(extraItem.label))
                         ]
-                        : label)
+                        : `${label}`)
                 ];
                 const festivalLabel = festivalItem.label;
                 if (festivalLabel) {
@@ -1899,10 +1977,11 @@ export default defineComponent({
                 })
             ]);
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $datePicker: $xeDatePicker }, params));
+        };
         datePickerMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $input: $xeDatePicker }, params));
-            },
+            dispatchEvent,
             focus() {
                 const inputElem = refInputTarget.value;
                 reactData.isActivated = true;
@@ -1964,7 +2043,7 @@ export default defineComponent({
         });
         initValue();
         const renderVN = () => {
-            const { className, type, align, name, autocomplete } = props;
+            const { className, type, align, name, autocomplete, autoComplete } = props;
             const { inputValue, visiblePanel, isActivated } = reactData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
@@ -2008,7 +2087,7 @@ export default defineComponent({
                         placeholder: inpPlaceholder,
                         readonly: inputReadonly,
                         disabled: isDisabled,
-                        autocomplete,
+                        autocomplete: autoComplete || autocomplete,
                         onKeydown: keydownEvent,
                         onKeyup: keyupEvent,
                         onWheel: wheelEvent,