vxe-pc-ui 4.0.20 → 4.0.22-beta.0

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

@@ -1,8 +1,9 @@
-import { defineComponent, h, Teleport, ref, computed, reactive, inject, nextTick, watch, onUnmounted } from 'vue';
+import { defineComponent, h, Teleport, ref, computed, reactive, inject, nextTick, watch, onUnmounted, createCommentVNode } from 'vue';
 import XEUtils from 'xe-utils';
 import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize } from '../../ui';
 import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils';
-import { hasClass, getAbsolutePos, getEventTargetNode } from '../../ui/src/dom';
+import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom';
+import { getSlotVNs } from '../..//ui/src/vn';
 const yearSize = 12;
 const monthSize = 20;
 const quarterSize = 8;
@@ -52,13 +53,13 @@ export default defineComponent({
         modelValue: [String, Number, Date],
         immediate: { type: Boolean, default: true },
         name: String,
-        type: { type: String, default: 'date' },
+        type: { type: String, default: 'text' },
         clearable: { type: Boolean, default: () => getConfig().input.clearable },
         readonly: Boolean,
         disabled: Boolean,
         placeholder: {
             type: String,
-            default: () => XEUtils.eqNull(getConfig().input.placeholder) ? getI18n('vxe.base.pleaseInput') : getConfig().input.placeholder
+            default: () => XEUtils.eqNull(getConfig().input.placeholder) ? getI18n('vxe.base.pleaseDatePicker') : getConfig().input.placeholder
         },
         maxlength: [String, Number],
         autocomplete: { type: String, default: 'off' },
@@ -67,18 +68,6 @@ export default defineComponent({
         className: String,
         size: { type: String, default: () => getConfig().input.size || getConfig().size },
         multiple: Boolean,
-        // text
-        showWordCount: Boolean,
-        countMethod: Function,
-        // number、integer、float
-        min: { type: [String, Number], default: null },
-        max: { type: [String, Number], default: null },
-        step: [String, Number],
-        exponential: { type: Boolean, default: () => getConfig().input.exponential },
-        // number、integer、float、password
-        controls: { type: Boolean, default: () => getConfig().input.controls },
-        // float
-        digits: { type: [String, Number], default: () => getConfig().input.digits },
         // date、week、month、quarter、year
         startDate: { type: [String, Number, Date], default: () => getConfig().input.startDate },
         endDate: { type: [String, Number, Date], default: () => getConfig().input.endDate },
@@ -141,8 +130,8 @@ export default defineComponent({
         });
         const refElem = ref();
         const refInputTarget = ref();
-        const refInputPanel = ref();
-        const refInputTimeBody = ref();
+        const refDatePickerPanel = ref();
+        const refDatePickerTimeBody = ref();
         const refMaps = {
             refElem,
             refInput: refInputTarget
@@ -496,6 +485,9 @@ export default defineComponent({
             const { type, readonly, editable, multiple } = props;
             return readonly || multiple || !editable || type === 'week' || type === 'quarter';
         });
+        const computeDatePickerType = computed(() => {
+            return 'text';
+        });
         const computeInpPlaceholder = computed(() => {
             const { placeholder } = props;
             if (placeholder) {
@@ -523,7 +515,7 @@ export default defineComponent({
                 }
             }
         };
-        const emitInputEvent = (value, evnt) => {
+        const emitDatePickerEvent = (value, evnt) => {
             const isDatePickerType = computeIsDatePickerType.value;
             const inpImmediate = computeInpImmediate.value;
             reactData.inputValue = value;
@@ -539,7 +531,7 @@ export default defineComponent({
         const inputEvent = (evnt) => {
             const inputElem = evnt.target;
             const value = inputElem.value;
-            emitInputEvent(value, evnt);
+            emitDatePickerEvent(value, evnt);
         };
         const changeEvent = (evnt) => {
             const inpImmediate = computeInpImmediate.value;
@@ -577,19 +569,14 @@ export default defineComponent({
             if (isDatePickerType) {
                 hidePanel();
             }
+            emitModel('', evnt);
             datePickerMethods.dispatchEvent('clear', { value }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
             const { disabled } = props;
             if (!disabled) {
-                if (hasClass(evnt.currentTarget, 'is--clear')) {
-                    emitModel('', evnt);
-                    clearValueEvent(evnt, '');
-                }
-                else {
-                    const { inputValue } = reactData;
-                    datePickerMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt);
-                }
+                const { inputValue } = reactData;
+                datePickerMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         };
         const dateParseValue = (value) => {
@@ -714,50 +701,47 @@ export default defineComponent({
         const afterCheckValue = () => {
             const { type } = props;
             const { inputValue, datetimePanelValue } = reactData;
-            const isDatePickerType = computeIsDatePickerType.value;
             const dateLabelFormat = computeDateLabelFormat.value;
             const inpReadonly = computeInpReadonly.value;
             if (!inpReadonly) {
-                if (isDatePickerType) {
-                    if (inputValue) {
-                        let inpDateVal = parseDate(inputValue, dateLabelFormat);
-                        if (XEUtils.isValidDate(inpDateVal)) {
-                            if (type === 'time') {
-                                inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat);
-                                if (inputValue !== inpDateVal) {
-                                    emitModel(inpDateVal, { type: 'check' });
-                                }
-                                reactData.inputValue = inpDateVal;
+                if (inputValue) {
+                    let inpDateVal = parseDate(inputValue, dateLabelFormat);
+                    if (XEUtils.isValidDate(inpDateVal)) {
+                        if (type === 'time') {
+                            inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat);
+                            if (inputValue !== inpDateVal) {
+                                emitModel(inpDateVal, { type: 'check' });
                             }
-                            else {
-                                let isChange = false;
-                                const firstDayOfWeek = computeFirstDayOfWeek.value;
-                                if (type === 'datetime') {
-                                    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());
-                                    }
-                                }
-                                else {
+                            reactData.inputValue = inpDateVal;
+                        }
+                        else {
+                            let isChange = false;
+                            const firstDayOfWeek = computeFirstDayOfWeek.value;
+                            if (type === 'datetime') {
+                                const dateValue = computeDateValue.value;
+                                if (inputValue !== XEUtils.toDateString(dateValue, dateLabelFormat) || inputValue !== XEUtils.toDateString(inpDateVal, dateLabelFormat)) {
                                     isChange = true;
-                                }
-                                reactData.inputValue = XEUtils.toDateString(inpDateVal, dateLabelFormat, { firstDay: firstDayOfWeek });
-                                if (isChange) {
-                                    dateChange(inpDateVal);
+                                    datetimePanelValue.setHours(inpDateVal.getHours());
+                                    datetimePanelValue.setMinutes(inpDateVal.getMinutes());
+                                    datetimePanelValue.setSeconds(inpDateVal.getSeconds());
                                 }
                             }
-                        }
-                        else {
-                            dateRevert();
+                            else {
+                                isChange = true;
+                            }
+                            reactData.inputValue = XEUtils.toDateString(inpDateVal, dateLabelFormat, { firstDay: firstDayOfWeek });
+                            if (isChange) {
+                                dateChange(inpDateVal);
+                            }
                         }
                     }
                     else {
-                        emitModel('', { type: 'check' });
+                        dateRevert();
                     }
                 }
+                else {
+                    emitModel('', { type: 'check' });
+                }
             }
         };
         const blurEvent = (evnt) => {
@@ -778,6 +762,9 @@ export default defineComponent({
         const keyupEvent = (evnt) => {
             triggerEvent(evnt);
         };
+        const wheelEvent = (evnt) => {
+            triggerEvent(evnt);
+        };
         // 日期
         const dateMonthHandle = (date, offsetMonth) => {
             reactData.selectMonth = XEUtils.getWhatMonth(date, offsetMonth, 'first');
@@ -1150,7 +1137,7 @@ export default defineComponent({
             if (isDateTimeType) {
                 reactData.datetimePanelValue = reactData.datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
                 nextTick(() => {
-                    const timeBodyElem = refInputTimeBody.value;
+                    const timeBodyElem = refDatePickerTimeBody.value;
                     XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), updateTimePos);
                 });
             }
@@ -1167,7 +1154,7 @@ export default defineComponent({
                 const { transfer, placement } = props;
                 const { panelIndex } = reactData;
                 const targetElem = refInputTarget.value;
-                const panelElem = refInputPanel.value;
+                const panelElem = refDatePickerPanel.value;
                 if (targetElem && panelElem) {
                     const targetHeight = targetElem.offsetHeight;
                     const targetWidth = targetElem.offsetWidth;
@@ -1273,7 +1260,7 @@ export default defineComponent({
             const { visiblePanel, isActivated } = reactData;
             const isDatePickerType = computeIsDatePickerType.value;
             const el = refElem.value;
-            const panelElem = refInputPanel.value;
+            const panelElem = refDatePickerPanel.value;
             if (!disabled && isActivated) {
                 reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
                 if (!reactData.isActivated) {
@@ -1365,7 +1352,7 @@ export default defineComponent({
             const { visiblePanel } = reactData;
             if (!disabled) {
                 if (visiblePanel) {
-                    const panelElem = refInputPanel.value;
+                    const panelElem = refDatePickerPanel.value;
                     if (getEventTargetNode(evnt, panelElem).flag) {
                         updatePlacement();
                     }
@@ -1719,7 +1706,7 @@ export default defineComponent({
                     }, getI18n('vxe.button.confirm'))
                 ]),
                 h('div', {
-                    ref: refInputTimeBody,
+                    ref: refDatePickerTimeBody,
                     class: 'vxe-date-picker--time-picker-body'
                 }, [
                     h('ul', {
@@ -1792,7 +1779,7 @@ export default defineComponent({
                     disabled: transfer ? !inited : true
                 }, [
                     h('div', {
-                        ref: refInputPanel,
+                        ref: refDatePickerPanel,
                         class: ['vxe-table--ignore-clear vxe-date-picker--panel', `type--${type}`, {
                                 [`size--${vSize}`]: vSize,
                                 'is--transfer': transfer,
@@ -1804,11 +1791,11 @@ export default defineComponent({
                     }, renders)
                 ]);
             }
-            return null;
+            return createCommentVNode();
         };
         const renderDatePickerIcon = () => {
-            return h('span', {
-                class: 'vxe-date-picker--date-picker-suffix',
+            return h('div', {
+                class: 'vxe-date-picker--control-icon',
                 onClick: datePickerOpenEvent
             }, [
                 h('i', {
@@ -1816,25 +1803,24 @@ export default defineComponent({
                 })
             ]);
         };
-        const rendePrefixIcon = () => {
+        const renderPrefixIcon = () => {
             const { prefixIcon } = props;
             const prefixSlot = slots.prefix;
-            const icons = [];
-            if (prefixSlot) {
-                icons.push(h('span', {
-                    class: 'vxe-date-picker--prefix-icon'
-                }, prefixSlot({})));
-            }
-            else if (prefixIcon) {
-                icons.push(h('i', {
-                    class: ['vxe-date-picker--prefix-icon', prefixIcon]
-                }));
-            }
-            return icons.length
-                ? h('span', {
+            return prefixSlot || prefixIcon
+                ? h('div', {
                     class: 'vxe-date-picker--prefix',
                     onClick: clickPrefixEvent
-                }, icons)
+                }, [
+                    h('div', {
+                        class: 'vxe-date-picker--prefix-icon'
+                    }, prefixSlot
+                        ? getSlotVNs(prefixSlot({}))
+                        : [
+                            h('i', {
+                                class: prefixIcon
+                            })
+                        ])
+                ])
                 : null;
         };
         const renderSuffixIcon = () => {
@@ -1842,42 +1828,40 @@ export default defineComponent({
             const { inputValue } = reactData;
             const suffixSlot = slots.suffix;
             const isClearable = computeIsClearable.value;
-            const icons = [];
-            if (suffixSlot) {
-                icons.push(h('span', {
-                    class: 'vxe-date-picker--suffix-icon'
-                }, suffixSlot({})));
-            }
-            else if (suffixIcon) {
-                icons.push(h('i', {
-                    class: ['vxe-date-picker--suffix-icon', suffixIcon]
-                }));
-            }
-            if (isClearable) {
-                icons.push(h('i', {
-                    class: ['vxe-date-picker--clear-icon', getIcon().INPUT_CLEAR]
-                }));
-            }
-            return icons.length
-                ? h('span', {
+            return isClearable || suffixSlot || suffixIcon
+                ? h('div', {
                     class: ['vxe-date-picker--suffix', {
                             'is--clear': isClearable && !disabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
-                        }],
-                    onClick: clickSuffixEvent
-                }, icons)
+                        }]
+                }, [
+                    isClearable
+                        ? h('div', {
+                            class: 'vxe-date-picker--clear-icon',
+                            onClick: clearValueEvent
+                        }, [
+                            h('i', {
+                                class: getIcon().INPUT_CLEAR
+                            })
+                        ])
+                        : createCommentVNode(),
+                    renderExtraSuffixIcon(),
+                    suffixSlot || suffixIcon
+                        ? h('div', {
+                            class: 'vxe-date-picker--suffix-icon',
+                            onClick: clickSuffixEvent
+                        }, suffixSlot
+                            ? getSlotVNs(suffixSlot({}))
+                            : [
+                                h('i', {
+                                    class: suffixIcon
+                                })
+                            ])
+                        : createCommentVNode()
+                ])
                 : null;
         };
         const renderExtraSuffixIcon = () => {
-            const isDatePickerType = computeIsDatePickerType.value;
-            let icons;
-            if (isDatePickerType) {
-                icons = renderDatePickerIcon();
-            }
-            return icons
-                ? h('span', {
-                    class: 'vxe-date-picker--extra-suffix'
-                }, [icons])
-                : null;
+            return renderDatePickerIcon();
         };
         datePickerMethods = {
             dispatchEvent(type, params, evnt) {
@@ -1944,62 +1928,57 @@ export default defineComponent({
         });
         initValue();
         const renderVN = () => {
-            const { className, controls, type, align, name, disabled, readonly, autocomplete } = props;
+            const { className, type, align, name, disabled, readonly, autocomplete } = props;
             const { inputValue, visiblePanel, isActivated } = reactData;
             const vSize = computeSize.value;
-            const isDatePickerType = computeIsDatePickerType.value;
             const inpReadonly = computeInpReadonly.value;
+            const inputType = computeDatePickerType.value;
             const inpPlaceholder = computeInpPlaceholder.value;
-            const childs = [];
-            const prefix = rendePrefixIcon();
+            const isClearable = computeIsClearable.value;
+            const prefix = renderPrefixIcon();
             const suffix = renderSuffixIcon();
-            // 前缀图标
-            if (prefix) {
-                childs.push(prefix);
-            }
-            // 输入框
-            childs.push(h('input', {
-                ref: refInputTarget,
-                class: 'vxe-date-picker--inner',
-                value: inputValue,
-                name,
-                type: 'text',
-                placeholder: inpPlaceholder,
-                readonly: inpReadonly,
-                disabled,
-                autocomplete,
-                onKeydown: keydownEvent,
-                onKeyup: keyupEvent,
-                onClick: clickEvent,
-                onInput: inputEvent,
-                onChange: changeEvent,
-                onFocus: focusEvent,
-                onBlur: blurEvent
-            }));
-            // 后缀图标
-            if (suffix) {
-                childs.push(suffix);
-            }
-            // 特殊功能图标
-            childs.push(renderExtraSuffixIcon());
-            // 面板容器
-            if (isDatePickerType) {
-                childs.push(renderPanel());
-            }
             return h('div', {
                 ref: refElem,
                 class: ['vxe-date-picker', `type--${type}`, className, {
                         [`size--${vSize}`]: vSize,
                         [`is--${align}`]: align,
-                        'is--controls': controls,
                         'is--prefix': !!prefix,
                         'is--suffix': !!suffix,
                         'is--readonly': readonly,
-                        'is--visivle': visiblePanel,
+                        'is--visible': visiblePanel,
                         'is--disabled': disabled,
-                        'is--active': isActivated
+                        'is--active': isActivated,
+                        'show--clear': isClearable && !disabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
                     }]
-            }, childs);
+            }, [
+                prefix || createCommentVNode(),
+                h('div', {
+                    class: 'vxe-date-picker--wrapper'
+                }, [
+                    h('input', {
+                        ref: refInputTarget,
+                        class: 'vxe-date-picker--inner',
+                        value: inputValue,
+                        name,
+                        type: inputType,
+                        placeholder: inpPlaceholder,
+                        readonly: inpReadonly,
+                        disabled,
+                        autocomplete,
+                        onKeydown: keydownEvent,
+                        onKeyup: keyupEvent,
+                        onWheel: wheelEvent,
+                        onClick: clickEvent,
+                        onDatePicker: inputEvent,
+                        onChange: changeEvent,
+                        onFocus: focusEvent,
+                        onBlur: blurEvent
+                    })
+                ]),
+                suffix || createCommentVNode(),
+                // 下拉面板
+                renderPanel()
+            ]);
         };
         $xeDatePicker.renderVN = renderVN;
         return $xeDatePicker;