vxe-pc-ui 4.5.35 → 4.6.0

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

@@ -0,0 +1,1194 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _utils = require("../../ui/src/utils");
+var _dom = require("../../ui/src/dom");
+var _util = require("../../date-panel/src/util");
+var _vn = require("../../ui/src/vn");
+var _log = require("../../ui/src/log");
+var _datePanel = _interopRequireDefault(require("../../date-panel/src/date-panel"));
+var _button = _interopRequireDefault(require("../../button/src/button"));
+var _buttonGroup = _interopRequireDefault(require("../../button/src/button-group"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxeDateRangePicker',
+  props: {
+    modelValue: [String, Number, Date, Array],
+    startValue: [String, Number, Date],
+    endValue: [String, Number, Date],
+    immediate: {
+      type: Boolean,
+      default: true
+    },
+    name: String,
+    type: {
+      type: String,
+      default: 'date'
+    },
+    clearable: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().dateRangePicker.clearable
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    placeholder: String,
+    autoComplete: {
+      type: String,
+      default: 'off'
+    },
+    form: String,
+    className: String,
+    size: {
+      type: String,
+      default: () => (0, _ui.getConfig)().dateRangePicker.size || (0, _ui.getConfig)().size
+    },
+    minDate: [String, Number, Date],
+    maxDate: [String, Number, Date],
+    startDay: {
+      type: [String, Number],
+      default: () => (0, _ui.getConfig)().dateRangePicker.startDay
+    },
+    labelFormat: String,
+    valueFormat: String,
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    festivalMethod: {
+      type: Function,
+      default: () => (0, _ui.getConfig)().dateRangePicker.festivalMethod
+    },
+    disabledMethod: {
+      type: Function,
+      default: () => (0, _ui.getConfig)().dateRangePicker.disabledMethod
+    },
+    separator: {
+      type: [String, Number],
+      default: () => (0, _ui.getConfig)().dateRangePicker.separator
+    },
+    // week
+    selectDay: {
+      type: [String, Number],
+      default: () => (0, _ui.getConfig)().dateRangePicker.selectDay
+    },
+    showClearButton: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().dateRangePicker.showClearButton
+    },
+    showConfirmButton: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().dateRangePicker.showConfirmButton
+    },
+    autoClose: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().dateRangePicker.autoClose
+    },
+    prefixIcon: String,
+    suffixIcon: String,
+    placement: String,
+    transfer: {
+      type: Boolean,
+      default: null
+    },
+    shortcutConfig: Object
+  },
+  emits: ['update:modelValue', 'update:startValue', 'update:endValue', 'input', 'change', 'keydown', 'keyup', 'click', 'focus', 'blur', 'clear', 'prefix-click', 'suffix-click', 'date-prev', 'date-today', 'date-next', 'shortcut-click'],
+  setup(props, context) {
+    const {
+      slots,
+      emit
+    } = context;
+    const $xeModal = (0, _vue.inject)('$xeModal', null);
+    const $xeDrawer = (0, _vue.inject)('$xeDrawer', null);
+    const $xeTable = (0, _vue.inject)('$xeTable', null);
+    const $xeForm = (0, _vue.inject)('$xeForm', null);
+    const formItemInfo = (0, _vue.inject)('xeFormItemInfo', null);
+    const xID = _xeUtils.default.uniqueId();
+    const {
+      computeSize
+    } = (0, _ui.useSize)(props);
+    const reactData = (0, _vue.reactive)({
+      initialized: false,
+      panelIndex: 0,
+      visiblePanel: false,
+      isAniVisible: false,
+      panelStyle: {},
+      panelPlacement: '',
+      isActivated: false,
+      startValue: '',
+      endValue: ''
+    });
+    const internalData = {
+      // selectStatus: false
+      // hpTimeout: undefined
+    };
+    const refElem = (0, _vue.ref)();
+    const refInputTarget = (0, _vue.ref)();
+    const refInputPanel = (0, _vue.ref)();
+    const refPanelWrapper = (0, _vue.ref)();
+    const refStartDatePanel = (0, _vue.ref)();
+    const refEndDatePanel = (0, _vue.ref)();
+    const refMaps = {
+      refElem,
+      refInput: refInputTarget
+    };
+    const $xeDateRangePicker = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps
+    };
+    let dateRangePickerMethods = {};
+    const computeBtnTransfer = (0, _vue.computed)(() => {
+      const {
+        transfer
+      } = props;
+      if (transfer === null) {
+        const globalTransfer = (0, _ui.getConfig)().dateRangePicker.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    });
+    const computeFormReadonly = (0, _vue.computed)(() => {
+      const {
+        readonly
+      } = props;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.props.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    });
+    const computeIsDisabled = (0, _vue.computed)(() => {
+      const {
+        disabled
+      } = props;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    });
+    const computeMVal = (0, _vue.computed)(() => {
+      const {
+        startValue,
+        endValue
+      } = props;
+      return `${startValue || ''}${endValue || ''}`;
+    });
+    const computeIsDateTimeType = (0, _vue.computed)(() => {
+      const {
+        type
+      } = props;
+      return type === 'time' || type === 'datetime';
+    });
+    const computeIsDatePickerType = (0, _vue.computed)(() => {
+      return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    });
+    const computeIsClearable = (0, _vue.computed)(() => {
+      return props.clearable;
+    });
+    const computeInpPlaceholder = (0, _vue.computed)(() => {
+      const {
+        placeholder
+      } = props;
+      if (placeholder) {
+        return (0, _utils.getFuncText)(placeholder);
+      }
+      const globalPlaceholder = (0, _ui.getConfig)().dateRangePicker.placeholder;
+      if (globalPlaceholder) {
+        return (0, _utils.getFuncText)(globalPlaceholder);
+      }
+      return (0, _ui.getI18n)('vxe.base.pleaseSelect');
+    });
+    const computeInpImmediate = (0, _vue.computed)(() => {
+      const {
+        immediate
+      } = props;
+      return immediate;
+    });
+    const computeShortcutOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().dateRangePicker.shortcutConfig, props.shortcutConfig);
+    });
+    const computeShortcutList = (0, _vue.computed)(() => {
+      const shortcutOpts = computeShortcutOpts.value;
+      const {
+        options
+      } = shortcutOpts;
+      if (options) {
+        return options.map((option, index) => {
+          return Object.assign({
+            name: `${option.name || option.code || index}`
+          }, option);
+        });
+      }
+      return [];
+    });
+    const computeDateLabelFormat = (0, _vue.computed)(() => {
+      const {
+        labelFormat
+      } = props;
+      return labelFormat || (0, _ui.getI18n)(`vxe.input.date.labelFormat.${props.type}`);
+    });
+    const computeDateValueFormat = (0, _vue.computed)(() => {
+      const {
+        type,
+        valueFormat
+      } = props;
+      if (valueFormat) {
+        return valueFormat;
+      }
+      if (type === 'time') {
+        return 'HH:mm:ss';
+      }
+      if (type === 'datetime') {
+        return 'yyyy-MM-dd HH:mm:ss';
+      }
+      return 'yyyy-MM-dd';
+    });
+    const computeFirstDayOfWeek = (0, _vue.computed)(() => {
+      const {
+        startDay
+      } = props;
+      return _xeUtils.default.toNumber(startDay);
+    });
+    const computePanelLabelObj = (0, _vue.computed)(() => {
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const vals = startValue || endValue ? [startValue || '', endValue || ''] : [];
+      return formatRangeLabel(vals);
+    });
+    const computeInputLabel = (0, _vue.computed)(() => {
+      const panelLabelObj = computePanelLabelObj.value;
+      return panelLabelObj.label;
+    });
+    const formatRangeLabel = vals => {
+      const {
+        type,
+        separator
+      } = props;
+      const dateLabelFormat = computeDateLabelFormat.value;
+      const dateValueFormat = computeDateValueFormat.value;
+      const firstDayOfWeek = computeFirstDayOfWeek.value;
+      const startRest = vals[0] ? (0, _util.parseDateObj)(vals[0], type, {
+        valueFormat: dateValueFormat,
+        labelFormat: dateLabelFormat,
+        firstDay: firstDayOfWeek
+      }) : null;
+      const endRest = vals[1] ? (0, _util.parseDateObj)(vals[1], type, {
+        valueFormat: dateValueFormat,
+        labelFormat: dateLabelFormat,
+        firstDay: firstDayOfWeek
+      }) : null;
+      const startLabel = startRest ? startRest.label : '';
+      const endLabel = endRest ? endRest.label : '';
+      return {
+        label: (startLabel || endLabel ? [startLabel, endLabel] : []).join(`${separator || ' ~ '}`),
+        startLabel,
+        endLabel
+      };
+    };
+    const getRangeValue = (sValue, eValue) => {
+      const {
+        modelValue
+      } = props;
+      const isArr = _xeUtils.default.isArray(modelValue);
+      if (sValue || eValue) {
+        const rest = [sValue || '', eValue || ''];
+        if (isArr) {
+          return rest;
+        }
+        return rest.join(',');
+      }
+      return isArr ? [] : '';
+    };
+    const paraeUpdateModel = () => {
+      const {
+        type,
+        modelValue
+      } = props;
+      const dateValueFormat = computeDateValueFormat.value;
+      let sValue = '';
+      let eValue = '';
+      if (_xeUtils.default.isArray(modelValue)) {
+        const date1 = (0, _util.parseDateString)(modelValue[0], type, {
+          valueFormat: dateValueFormat
+        });
+        const date2 = (0, _util.parseDateString)(modelValue[1], type, {
+          valueFormat: dateValueFormat
+        });
+        if (date1 || date2) {
+          sValue = date1 || '';
+          eValue = date2 || '';
+        }
+      } else if (_xeUtils.default.isString(modelValue)) {
+        const strArr = modelValue.split(',');
+        if (strArr[0] || strArr[1]) {
+          sValue = strArr[0] || '';
+          eValue = strArr[1] || '';
+        }
+      }
+      return {
+        sValue,
+        eValue
+      };
+    };
+    const parseUpdateData = () => {
+      const {
+        type,
+        startValue,
+        endValue
+      } = props;
+      const dateValueFormat = computeDateValueFormat.value;
+      let sValue = '';
+      let eValue = '';
+      sValue = (0, _util.parseDateString)(startValue, type, {
+        valueFormat: dateValueFormat
+      });
+      eValue = (0, _util.parseDateString)(endValue, type, {
+        valueFormat: dateValueFormat
+      });
+      return {
+        sValue,
+        eValue
+      };
+    };
+    const updateModelValue = isModel => {
+      const {
+        modelValue,
+        startValue,
+        endValue
+      } = props;
+      let restObj = {
+        sValue: '',
+        eValue: ''
+      };
+      if (isModel) {
+        if (modelValue) {
+          restObj = paraeUpdateModel();
+        } else {
+          restObj = parseUpdateData();
+        }
+      } else {
+        if (startValue || endValue) {
+          restObj = parseUpdateData();
+        } else {
+          restObj = paraeUpdateModel();
+        }
+      }
+      reactData.startValue = restObj.sValue;
+      reactData.endValue = restObj.eValue;
+    };
+    const triggerEvent = evnt => {
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const value = getRangeValue(startValue, endValue);
+      dispatchEvent(evnt.type, {
+        value,
+        startValue,
+        endValue
+      }, evnt);
+    };
+    const handleChange = (sValue, eValue, evnt) => {
+      const {
+        modelValue
+      } = props;
+      reactData.startValue = sValue;
+      reactData.endValue = eValue;
+      const value = getRangeValue(sValue, eValue);
+      emit('update:modelValue', value);
+      emit('update:startValue', sValue || '');
+      emit('update:endValue', eValue || '');
+      if (_xeUtils.default.toValueString(modelValue) !== value) {
+        dispatchEvent('change', {
+          value
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+        }
+      }
+    };
+    const changeEvent = evnt => {
+      const inpImmediate = computeInpImmediate.value;
+      if (!inpImmediate) {
+        triggerEvent(evnt);
+      }
+    };
+    const focusEvent = evnt => {
+      reactData.isActivated = true;
+      dateRangePickerOpenEvent(evnt);
+      triggerEvent(evnt);
+    };
+    const clickPrefixEvent = evnt => {
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled) {
+        const {
+          startValue,
+          endValue
+        } = reactData;
+        const value = getRangeValue(startValue, endValue);
+        dispatchEvent('prefix-click', {
+          value,
+          startValue,
+          endValue
+        }, evnt);
+      }
+    };
+    const hidePanel = () => {
+      return new Promise(resolve => {
+        reactData.visiblePanel = false;
+        internalData.hpTimeout = setTimeout(() => {
+          reactData.isAniVisible = false;
+          resolve();
+        }, 350);
+      });
+    };
+    const clearValueEvent = (evnt, value) => {
+      const isDatePickerType = computeIsDatePickerType.value;
+      if (isDatePickerType) {
+        hidePanel();
+      }
+      handleChange('', '', evnt);
+      dispatchEvent('clear', {
+        value
+      }, evnt);
+    };
+    const checkValue = () => {
+      const $startDatePanel = refStartDatePanel.value;
+      const $endDatePanel = refEndDatePanel.value;
+      if ($startDatePanel && $endDatePanel) {
+        const startValue = $startDatePanel.getValue();
+        const endValue = $endDatePanel.getValue();
+        if (!startValue || !endValue) {
+          handleChange('', '', {
+            type: 'check'
+          });
+        }
+      }
+    };
+    const handleSelectClose = () => {
+      const {
+        autoClose
+      } = props;
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const {
+        selectStatus
+      } = internalData;
+      const isDatePickerType = computeIsDatePickerType.value;
+      if (autoClose) {
+        if (selectStatus && isDatePickerType) {
+          if (startValue && endValue) {
+            hidePanel();
+          }
+        }
+      } else {
+        if (startValue && endValue) {
+          internalData.selectStatus = false;
+        }
+      }
+    };
+    const clickSuffixEvent = evnt => {
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled) {
+        const {
+          startValue,
+          endValue
+        } = reactData;
+        const value = getRangeValue(startValue, endValue);
+        dispatchEvent('suffix-click', {
+          value,
+          startValue,
+          endValue
+        }, evnt);
+      }
+    };
+    const blurEvent = evnt => {
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const inpImmediate = computeInpImmediate.value;
+      const value = '';
+      if (!inpImmediate) {
+        handleChange(startValue, endValue, evnt);
+      }
+      if (!reactData.visiblePanel) {
+        reactData.isActivated = false;
+      }
+      dispatchEvent('blur', {
+        value,
+        startValue,
+        endValue
+      }, evnt);
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+      }
+    };
+    const keydownEvent = evnt => {
+      triggerEvent(evnt);
+    };
+    const keyupEvent = evnt => {
+      triggerEvent(evnt);
+    };
+    const confirmEvent = evnt => {
+      const $startDatePanel = refStartDatePanel.value;
+      const $endDatePanel = refEndDatePanel.value;
+      if ($startDatePanel && $endDatePanel) {
+        const startValue = $startDatePanel.getValue();
+        const endValue = $endDatePanel.getValue();
+        if (startValue && endValue) {
+          $startDatePanel.confirmByEvent(evnt);
+          $endDatePanel.confirmByEvent(evnt);
+        } else {
+          handleChange('', '', evnt);
+        }
+      }
+      hidePanel();
+    };
+    const startPanelChangeEvent = params => {
+      const {
+        selectStatus
+      } = internalData;
+      const {
+        value,
+        $event
+      } = params;
+      const endValue = selectStatus ? reactData.endValue : '';
+      handleChange(value, endValue, $event);
+      handleSelectClose();
+      if (!selectStatus) {
+        internalData.selectStatus = true;
+      }
+      (0, _vue.nextTick)(() => {
+        const $startDatePanel = refStartDatePanel.value;
+        const $endDatePanel = refEndDatePanel.value;
+        if ($startDatePanel && $endDatePanel) {
+          const startValue = $startDatePanel.getValue();
+          if (!endValue && startValue) {
+            $endDatePanel.setPanelDate(_xeUtils.default.toStringDate(startValue));
+          }
+        }
+      });
+    };
+    const endPanelChangeEvent = params => {
+      const {
+        selectStatus
+      } = internalData;
+      const {
+        value,
+        $event
+      } = params;
+      const startValue = selectStatus ? reactData.startValue : '';
+      handleChange(startValue, value, $event);
+      handleSelectClose();
+      if (!selectStatus) {
+        internalData.selectStatus = true;
+      }
+      (0, _vue.nextTick)(() => {
+        const $startDatePanel = refStartDatePanel.value;
+        const $endDatePanel = refEndDatePanel.value;
+        if ($startDatePanel && $endDatePanel) {
+          const endValue = $endDatePanel.getValue();
+          if (!startValue && endValue) {
+            $startDatePanel.setPanelDate(_xeUtils.default.toStringDate(endValue));
+          }
+        }
+      });
+    };
+    // 全局事件
+    const handleGlobalMousedownEvent = evnt => {
+      const {
+        visiblePanel,
+        isActivated
+      } = reactData;
+      const el = refElem.value;
+      const panelWrapperElem = refPanelWrapper.value;
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled && isActivated) {
+        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag;
+        if (!reactData.isActivated) {
+          if (visiblePanel) {
+            checkValue();
+            hidePanel();
+          }
+        }
+      }
+    };
+    const handleGlobalMousewheelEvent = evnt => {
+      const {
+        visiblePanel
+      } = reactData;
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          const panelWrapperElem = refPanelWrapper.value;
+          if ((0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag) {
+            updatePlacement();
+          } else {
+            hidePanel();
+          }
+        }
+      }
+    };
+    const handleGlobalBlurEvent = () => {
+      const {
+        visiblePanel
+      } = reactData;
+      if (visiblePanel) {
+        hidePanel();
+      }
+    };
+    // 弹出面板
+    const updateZindex = () => {
+      if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    };
+    const updatePlacement = () => {
+      return (0, _vue.nextTick)().then(() => {
+        const {
+          placement
+        } = props;
+        const {
+          panelIndex
+        } = reactData;
+        const targetElem = refInputTarget.value;
+        const panelElem = refInputPanel.value;
+        const btnTransfer = computeBtnTransfer.value;
+        if (targetElem && panelElem) {
+          const targetHeight = targetElem.offsetHeight;
+          const targetWidth = targetElem.offsetWidth;
+          const panelHeight = panelElem.offsetHeight;
+          const panelWidth = panelElem.offsetWidth;
+          const marginSize = 5;
+          const panelStyle = {
+            zIndex: panelIndex
+          };
+          const {
+            boundingTop,
+            boundingLeft,
+            visibleHeight,
+            visibleWidth
+          } = (0, _dom.getAbsolutePos)(targetElem);
+          let panelPlacement = 'bottom';
+          if (btnTransfer) {
+            let left = boundingLeft;
+            let top = boundingTop + targetHeight;
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              top = boundingTop - panelHeight;
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              if (top + panelHeight + marginSize > visibleHeight) {
+                panelPlacement = 'top';
+                top = boundingTop - panelHeight;
+              }
+              // 如果上面不够放，则向下（优先）
+              if (top < marginSize) {
+                panelPlacement = 'bottom';
+                top = boundingTop + targetHeight;
+              }
+            }
+            // 如果溢出右边
+            if (left + panelWidth + marginSize > visibleWidth) {
+              left -= left + panelWidth + marginSize - visibleWidth;
+            }
+            // 如果溢出左边
+            if (left < marginSize) {
+              left = marginSize;
+            }
+            Object.assign(panelStyle, {
+              left: `${left}px`,
+              top: `${top}px`,
+              minWidth: `${targetWidth}px`
+            });
+          } else {
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              panelStyle.bottom = `${targetHeight}px`;
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              panelStyle.top = `${targetHeight}px`;
+              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                // 如果上面不够放，则向下（优先）
+                if (boundingTop - targetHeight - panelHeight > marginSize) {
+                  panelPlacement = 'top';
+                  panelStyle.top = '';
+                  panelStyle.bottom = `${targetHeight}px`;
+                }
+              }
+            }
+          }
+          reactData.panelStyle = panelStyle;
+          reactData.panelPlacement = panelPlacement;
+          return (0, _vue.nextTick)();
+        }
+      });
+    };
+    const showPanel = () => {
+      const {
+        visiblePanel
+      } = reactData;
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled && !visiblePanel) {
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+        }
+        if (internalData.hpTimeout) {
+          clearTimeout(internalData.hpTimeout);
+          internalData.hpTimeout = undefined;
+        }
+        internalData.selectStatus = false;
+        reactData.isActivated = true;
+        reactData.isAniVisible = true;
+        setTimeout(() => {
+          reactData.visiblePanel = true;
+        }, 10);
+        updateZindex();
+        return updatePlacement();
+      }
+      return (0, _vue.nextTick)();
+    };
+    const dateRangePickerOpenEvent = evnt => {
+      const formReadonly = computeFormReadonly.value;
+      if (!formReadonly) {
+        evnt.preventDefault();
+        showPanel();
+      }
+    };
+    const clickEvent = evnt => {
+      triggerEvent(evnt);
+    };
+    const handleShortcutEvent = ({
+      option,
+      $event
+    }) => {
+      const {
+        type
+      } = props;
+      const shortcutOpts = computeShortcutOpts.value;
+      const {
+        autoClose
+      } = shortcutOpts;
+      const {
+        code,
+        clickMethod
+      } = option;
+      let startValue = reactData.startValue;
+      let endValue = reactData.endValue;
+      let value = getRangeValue(startValue, endValue);
+      const shortcutParams = {
+        $dateRangePicker: $xeDateRangePicker,
+        option: option,
+        value,
+        startValue,
+        endValue,
+        code
+      };
+      if (!clickMethod && code) {
+        const gCommandOpts = _ui.commands.get(code);
+        const drpCommandMethod = gCommandOpts ? gCommandOpts.dateRangePickerCommandMethod : null;
+        if (drpCommandMethod) {
+          drpCommandMethod(shortcutParams);
+        } else {
+          const dateValueFormat = computeDateValueFormat.value;
+          const firstDayOfWeek = computeFirstDayOfWeek.value;
+          switch (code) {
+            case 'last1':
+            case 'last3':
+            case 'last7':
+            case 'last30':
+            case 'last60':
+            case 'last90':
+            case 'last180':
+              {
+                const restObj = (0, _util.getRangeDateByCode)(code, value, type, {
+                  valueFormat: dateValueFormat,
+                  firstDay: firstDayOfWeek
+                });
+                startValue = restObj.startValue;
+                endValue = restObj.endValue;
+                value = getRangeValue(startValue, endValue);
+                shortcutParams.value = value;
+                shortcutParams.startValue = startValue;
+                shortcutParams.endValue = endValue;
+                handleChange(startValue, endValue, $event);
+                break;
+              }
+            default:
+              (0, _log.errLog)('vxe.error.notCommands', [code]);
+              break;
+          }
+        }
+      } else {
+        const optClickMethod = clickMethod || shortcutOpts.clickMethod;
+        if (optClickMethod) {
+          optClickMethod(shortcutParams);
+        }
+      }
+      if (autoClose) {
+        hidePanel();
+      }
+      dispatchEvent('shortcut-click', shortcutParams, $event);
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, (0, _ui.createEvent)(evnt, {
+        $dateRangePicker: $xeDateRangePicker
+      }, params));
+    };
+    dateRangePickerMethods = {
+      dispatchEvent,
+      setModelValue(startValue, endValue) {
+        reactData.startValue = startValue || '';
+        reactData.endValue = endValue || '';
+        const value = getRangeValue(startValue, endValue);
+        emit('update:modelValue', value);
+      },
+      setModelValueByEvent(evnt, startValue, endValue) {
+        handleChange(startValue || '', endValue || '', evnt);
+      },
+      focus() {
+        const inputElem = refInputTarget.value;
+        reactData.isActivated = true;
+        inputElem.focus();
+        return (0, _vue.nextTick)();
+      },
+      blur() {
+        const inputElem = refInputTarget.value;
+        inputElem.blur();
+        reactData.isActivated = false;
+        return (0, _vue.nextTick)();
+      },
+      select() {
+        const inputElem = refInputTarget.value;
+        inputElem.select();
+        reactData.isActivated = false;
+        return (0, _vue.nextTick)();
+      },
+      showPanel,
+      hidePanel,
+      updatePlacement
+    };
+    Object.assign($xeDateRangePicker, dateRangePickerMethods);
+    const renderShortcutBtn = (pos, isVertical) => {
+      const shortcutOpts = computeShortcutOpts.value;
+      const {
+        position,
+        align,
+        mode
+      } = shortcutOpts;
+      const shortcutList = computeShortcutList.value;
+      if ((0, _utils.isEnableConf)(shortcutOpts) && shortcutList.length && (position || 'left') === pos) {
+        return (0, _vue.h)('div', {
+          class: `vxe-date-range-picker--layout-${pos}-wrapper`
+        }, [(0, _vue.h)(_buttonGroup.default, {
+          options: shortcutList,
+          mode,
+          align,
+          vertical: isVertical,
+          onClick: handleShortcutEvent
+        })]);
+      }
+      return (0, _ui.renderEmptyElement)($xeDateRangePicker);
+    };
+    const renderPanel = () => {
+      const {
+        type,
+        separator,
+        autoClose,
+        showConfirmButton,
+        showClearButton
+      } = props;
+      const {
+        initialized,
+        isAniVisible,
+        visiblePanel,
+        panelPlacement,
+        panelStyle,
+        startValue,
+        endValue
+      } = reactData;
+      const vSize = computeSize.value;
+      const btnTransfer = computeBtnTransfer.value;
+      const shortcutOpts = computeShortcutOpts.value;
+      const isClearable = computeIsClearable.value;
+      const panelLabelObj = computePanelLabelObj.value;
+      const shortcutList = computeShortcutList.value;
+      const isDateTimeType = computeIsDateTimeType.value;
+      const {
+        startLabel,
+        endLabel
+      } = panelLabelObj;
+      const {
+        position
+      } = shortcutOpts;
+      const headerSlot = slots.header;
+      const footerSlot = slots.footer;
+      const topSlot = slots.top;
+      const bottomSlot = slots.bottom;
+      const leftSlot = slots.left;
+      const rightSlot = slots.right;
+      const hasShortcutBtn = shortcutList.length > 0;
+      const showConfirmBtn = showConfirmButton === null ? isDateTimeType || !autoClose : showConfirmButton;
+      const showClearBtn = showClearButton === null ? isClearable : showClearButton;
+      return (0, _vue.h)(_vue.Teleport, {
+        to: 'body',
+        disabled: btnTransfer ? !initialized : true
+      }, [(0, _vue.h)('div', {
+        ref: refInputPanel,
+        class: ['vxe-table--ignore-clear vxe-date-range-picker--panel', `type--${type}`, {
+          [`size--${vSize}`]: vSize,
+          'is--transfer': btnTransfer,
+          'ani--leave': isAniVisible,
+          'ani--enter': visiblePanel,
+          'show--top': !!(topSlot || headerSlot || hasShortcutBtn && (position === 'top' || position === 'header')),
+          'show--bottom': !!(bottomSlot || footerSlot || hasShortcutBtn && (position === 'bottom' || position === 'footer')),
+          'show--left': !!(leftSlot || hasShortcutBtn && position === 'left'),
+          'show--right': !!(rightSlot || hasShortcutBtn && position === 'right')
+        }],
+        placement: panelPlacement,
+        style: panelStyle
+      }, initialized && (visiblePanel || isAniVisible) ? [(0, _vue.h)('div', {
+        ref: refPanelWrapper,
+        class: ['vxe-date-range-picker--layout-all-wrapper', `type--${type}`, {
+          [`size--${vSize}`]: vSize
+        }]
+      }, [topSlot ? (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-top-wrapper'
+      }, topSlot({})) : renderShortcutBtn('top'), (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-body-layout-wrapper'
+      }, [leftSlot ? (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-left-wrapper'
+      }, leftSlot({})) : renderShortcutBtn('left', true), (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-body-content-wrapper'
+      }, [headerSlot ? (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-header-wrapper'
+      }, headerSlot({})) : renderShortcutBtn('header'), (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-body-wrapper'
+      }, [(0, _vue.h)(_datePanel.default, {
+        ref: refStartDatePanel,
+        modelValue: startValue,
+        type: props.type,
+        className: props.className,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        startDay: props.startDay,
+        endDate: endValue,
+        labelFormat: props.labelFormat,
+        valueFormat: props.valueFormat,
+        festivalMethod: props.festivalMethod,
+        disabledMethod: props.disabledMethod,
+        selectDay: props.selectDay,
+        onChange: startPanelChangeEvent
+      }), (0, _vue.h)(_datePanel.default, {
+        ref: refEndDatePanel,
+        modelValue: endValue,
+        type: props.type,
+        className: props.className,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        startDay: props.startDay,
+        startDate: startValue,
+        labelFormat: props.labelFormat,
+        valueFormat: props.valueFormat,
+        festivalMethod: props.festivalMethod,
+        disabledMethod: props.disabledMethod,
+        selectDay: props.selectDay,
+        onChange: endPanelChangeEvent
+      })]), (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-footer-wrapper'
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-footer-label'
+      }, startLabel || endLabel ? [(0, _vue.h)('span', startLabel), (0, _vue.h)('span', `${separator || ''}`), (0, _vue.h)('span', endLabel)] : []), (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-footer-custom'
+      }, footerSlot ? footerSlot({}) : [renderShortcutBtn('footer')]), (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-footer-btns'
+      }, [showClearBtn ? (0, _vue.h)(_button.default, {
+        size: 'mini',
+        disabled: !(startValue || endValue),
+        content: (0, _ui.getI18n)('vxe.button.clear'),
+        onClick: clearValueEvent
+      }) : (0, _ui.renderEmptyElement)($xeDateRangePicker), showConfirmBtn ? (0, _vue.h)(_button.default, {
+        size: 'mini',
+        status: 'primary',
+        content: (0, _ui.getI18n)('vxe.button.confirm'),
+        onClick: confirmEvent
+      }) : (0, _ui.renderEmptyElement)($xeDateRangePicker)])])]), rightSlot ? (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-right-wrapper'
+      }, rightSlot({})) : renderShortcutBtn('right', true)]), bottomSlot ? (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--layout-bottom-wrapper'
+      }, bottomSlot({})) : renderShortcutBtn('bottom')])] : [])]);
+    };
+    const renderPrefixIcon = () => {
+      const {
+        prefixIcon
+      } = props;
+      const prefixSlot = slots.prefix;
+      return prefixSlot || prefixIcon ? (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--prefix',
+        onClick: clickPrefixEvent
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--prefix-icon'
+      }, prefixSlot ? (0, _vn.getSlotVNs)(prefixSlot({})) : [(0, _vue.h)('i', {
+        class: prefixIcon
+      })])]) : null;
+    };
+    const renderSuffixIcon = () => {
+      const {
+        suffixIcon
+      } = props;
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const suffixSlot = slots.suffix;
+      const isDisabled = computeIsDisabled.value;
+      const isClearable = computeIsClearable.value;
+      return (0, _vue.h)('div', {
+        class: ['vxe-date-range-picker--suffix', {
+          'is--clear': isClearable && !isDisabled && (startValue || endValue)
+        }]
+      }, [isClearable ? (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--clear-icon',
+        onClick: clearValueEvent
+      }, [(0, _vue.h)('i', {
+        class: (0, _ui.getIcon)().INPUT_CLEAR
+      })]) : (0, _ui.renderEmptyElement)($xeDateRangePicker), renderExtraSuffixIcon(), suffixSlot || suffixIcon ? (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--suffix-icon',
+        onClick: clickSuffixEvent
+      }, suffixSlot ? (0, _vn.getSlotVNs)(suffixSlot({})) : [(0, _vue.h)('i', {
+        class: suffixIcon
+      })]) : (0, _ui.renderEmptyElement)($xeDateRangePicker)]);
+    };
+    const renderExtraSuffixIcon = () => {
+      return (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--control-icon',
+        onClick: dateRangePickerOpenEvent
+      }, [(0, _vue.h)('i', {
+        class: ['vxe-date-range-picker--date-picker-icon', (0, _ui.getIcon)().DATE_PICKER_DATE]
+      })]);
+    };
+    const renderVN = () => {
+      const {
+        className,
+        type,
+        name,
+        autoComplete
+      } = props;
+      const {
+        startValue,
+        endValue,
+        visiblePanel,
+        isActivated
+      } = reactData;
+      const vSize = computeSize.value;
+      const isDisabled = computeIsDisabled.value;
+      const formReadonly = computeFormReadonly.value;
+      const inputLabel = computeInputLabel.value;
+      if (formReadonly) {
+        return (0, _vue.h)('div', {
+          ref: refElem,
+          class: ['vxe-date-range-picker--readonly', `type--${type}`, className]
+        }, inputLabel);
+      }
+      const inpPlaceholder = computeInpPlaceholder.value;
+      const isClearable = computeIsClearable.value;
+      const prefix = renderPrefixIcon();
+      const suffix = renderSuffixIcon();
+      return (0, _vue.h)('div', {
+        ref: refElem,
+        class: ['vxe-date-range-picker', `type--${type}`, className, {
+          [`size--${vSize}`]: vSize,
+          'is--prefix': !!prefix,
+          'is--suffix': !!suffix,
+          'is--visible': visiblePanel,
+          'is--disabled': isDisabled,
+          'is--active': isActivated,
+          'show--clear': isClearable && !isDisabled && (startValue || endValue)
+        }],
+        spellcheck: false
+      }, [prefix || (0, _ui.renderEmptyElement)($xeDateRangePicker), (0, _vue.h)('div', {
+        class: 'vxe-date-range-picker--wrapper'
+      }, [(0, _vue.h)('input', {
+        ref: refInputTarget,
+        class: 'vxe-date-range-picker--inner',
+        value: inputLabel,
+        name,
+        type: 'text',
+        placeholder: inpPlaceholder,
+        readonly: true,
+        disabled: isDisabled,
+        autocomplete: autoComplete,
+        onKeydown: keydownEvent,
+        onKeyup: keyupEvent,
+        onClick: clickEvent,
+        onChange: changeEvent,
+        onFocus: focusEvent,
+        onBlur: blurEvent
+      })]), suffix || (0, _ui.renderEmptyElement)($xeDateRangePicker),
+      // 下拉面板
+      renderPanel()]);
+    };
+    (0, _vue.watch)(() => props.modelValue, () => {
+      updateModelValue(true);
+    });
+    (0, _vue.watch)(computeMVal, () => {
+      updateModelValue(false);
+    });
+    updateModelValue(true);
+    (0, _vue.nextTick)(() => {
+      _ui.globalEvents.on($xeDateRangePicker, 'mousewheel', handleGlobalMousewheelEvent);
+      _ui.globalEvents.on($xeDateRangePicker, 'mousedown', handleGlobalMousedownEvent);
+      _ui.globalEvents.on($xeDateRangePicker, 'blur', handleGlobalBlurEvent);
+    });
+    (0, _vue.onDeactivated)(() => {
+      checkValue();
+    });
+    (0, _vue.onUnmounted)(() => {
+      _ui.globalEvents.off($xeDateRangePicker, 'mousewheel');
+      _ui.globalEvents.off($xeDateRangePicker, 'mousedown');
+      _ui.globalEvents.off($xeDateRangePicker, 'blur');
+    });
+    (0, _vue.onBeforeUnmount)(() => {
+      checkValue();
+    });
+    (0, _vue.provide)('$xeDateRangePicker', $xeDateRangePicker);
+    $xeDateRangePicker.renderVN = renderVN;
+    return $xeDateRangePicker;
+  },
+  render() {
+    return this.renderVN();
+  }
+});