vxe-pc-ui/lib/date-range-picker/src/date-range-picker.js

A vue based PC component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _comp = require("../../ui/src/comp");
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(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = (0, _comp.defineVxeComponent)({
  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,
    zIndex: Number,
    size: {
      type: String,
      default: () => (0, _ui.getConfig)().dateRangePicker.size || (0, _ui.getConfig)().size
    },
    // startDate: {
    //   type: [String, Number, Date] as PropType<VxeDateRangePickerPropTypes.StartDate>,
    //   default: () => getConfig().dateRangePicker.startDate
    // },
    // endDate: {
    //   type: [String, Number, Date] as PropType<VxeDateRangePickerPropTypes.EndDate>,
    //   default: () => getConfig().dateRangePicker.endDate
    // },
    minDate: [String, Number, Date],
    maxDate: [String, Number, Date],
    defaultDate: [String, Number, Date, Array],
    defaultTime: [String, Number, Date, Array],
    startDay: {
      type: [String, Number],
      default: () => (0, _ui.getConfig)().dateRangePicker.startDay
    },
    labelFormat: String,
    valueFormat: String,
    timeFormat: String,
    valueType: 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
    },
    timeConfig: Object,
    popupConfig: Object,
    shortcutConfig: Object
  },
  emits: ['update:modelValue', 'update:startValue', 'update:endValue', 'input', 'change', 'keydown', 'keyup', 'click', 'focus', 'blur', 'clear', 'confirm', '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;
      const popupOpts = computePopupOpts.value;
      if (_xeUtils.default.isBoolean(popupOpts.transfer)) {
        return popupOpts.transfer;
      }
      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 computeDefaultDates = (0, _vue.computed)(() => {
      const {
        defaultDate
      } = props;
      if (defaultDate) {
        if (_xeUtils.default.isArray(defaultDate)) {
          return defaultDate;
        }
        if (`${defaultDate}`.indexOf(',') > -1) {
          return `${defaultDate}`.split(',');
        }
        return [defaultDate, defaultDate];
      }
      return [];
    });
    const computeDefaultTimes = (0, _vue.computed)(() => {
      const {
        defaultTime
      } = props;
      if (defaultTime) {
        if (_xeUtils.default.isArray(defaultTime)) {
          return defaultTime;
        }
        if (`${defaultTime}`.indexOf(',') > -1) {
          return `${defaultTime}`.split(',');
        }
        return [defaultTime, defaultTime];
      }
      return [];
    });
    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.dateRangePicker.pleaseRange');
    });
    const computeInpImmediate = (0, _vue.computed)(() => {
      const {
        immediate
      } = props;
      return immediate;
    });
    const computeTimeOpts = (0, _vue.computed)(() => {
      return Object.assign({}, (0, _ui.getConfig)().dateRangePicker.timeConfig, props.timeConfig);
    });
    const computePopupOpts = (0, _vue.computed)(() => {
      return Object.assign({}, (0, _ui.getConfig)().dateRangePicker.popupConfig, props.popupConfig);
    });
    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;
      return (0, _util.handleValueFormat)(type, valueFormat);
    });
    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,
        valueType
      } = props;
      let isArr = _xeUtils.default.isArray(modelValue);
      if (valueType) {
        switch (valueType) {
          case 'array':
            isArr = true;
            break;
          case 'string':
            isArr = false;
            break;
        }
      }
      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);
      const isFinish = sValue && eValue || !sValue && !eValue;
      emit('update:modelValue', value);
      emit('update:startValue', sValue || '');
      emit('update:endValue', eValue || '');
      if (_xeUtils.default.toValueString(modelValue) !== value) {
        dispatchEvent('change', {
          value,
          startValue: sValue,
          endValue: eValue,
          isFinish
        }, 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();
      }
      const startValue = '';
      const endValue = '';
      handleChange(startValue, endValue, evnt);
      dispatchEvent('clear', {
        value,
        startValue,
        endValue
      }, evnt);
    };
    const checkValue = () => {
      const $startDatePanel = refStartDatePanel.value;
      const $endDatePanel = refEndDatePanel.value;
      if ($startDatePanel && $endDatePanel) {
        const startValue = $startDatePanel.getModelValue();
        const endValue = $endDatePanel.getModelValue();
        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.getModelValue();
        const endValue = $endDatePanel.getModelValue();
        if (startValue && !endValue || !startValue && endValue) {
          handleChange('', '', evnt);
        } else {
          $startDatePanel.confirmByEvent(evnt);
          $endDatePanel.confirmByEvent(evnt);
        }
        const value = getRangeValue(startValue, endValue);
        dispatchEvent('confirm', {
          value,
          startValue,
          endValue
        }, 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.getModelValue();
          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.getModelValue();
          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 handleGlobalKeydownEvent = evnt => {
      const {
        visiblePanel
      } = reactData;
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        const isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
        const isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
        if (isTab) {
          reactData.isActivated = false;
        }
        if (visiblePanel) {
          if (isEsc || isTab) {
            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 {
            checkValue();
            hidePanel();
          }
        }
      }
    };
    const handleGlobalBlurEvent = () => {
      const {
        visiblePanel,
        isActivated
      } = reactData;
      if (visiblePanel) {
        checkValue();
        hidePanel();
      }
      if (isActivated) {
        reactData.isActivated = false;
      }
      if (visiblePanel || isActivated) {
        const targetElem = refInputTarget.value;
        if (targetElem) {
          targetElem.blur();
        }
      }
    };
    const handleGlobalResizeEvent = () => {
      const {
        visiblePanel
      } = reactData;
      if (visiblePanel) {
        updatePlacement();
      }
    };
    // 弹出面板
    const updateZindex = () => {
      const popupOpts = computePopupOpts.value;
      const customZIndex = popupOpts.zIndex || props.zIndex;
      if (customZIndex) {
        reactData.panelIndex = _xeUtils.default.toNumber(customZIndex);
      } else if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
        reactData.panelIndex = (0, _utils.nextZIndex)();
      }
    };
    const updatePlacement = () => {
      const {
        placement
      } = props;
      const {
        panelIndex
      } = reactData;
      const targetElem = refInputTarget.value;
      const panelElem = refInputPanel.value;
      const btnTransfer = computeBtnTransfer.value;
      const popupOpts = computePopupOpts.value;
      const handleStyle = () => {
        const ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
          placement: popupOpts.placement || placement,
          defaultPlacement: popupOpts.defaultPlacement,
          teleportTo: btnTransfer
        });
        const panelStyle = Object.assign(ppObj.style, {
          zIndex: panelIndex
        });
        reactData.panelStyle = panelStyle;
        reactData.panelPlacement = ppObj.placement;
      };
      handleStyle();
      return (0, _vue.nextTick)().then(handleStyle);
    };
    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;
          updatePlacement();
        }, 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', [`[date-range-picker] ${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 defaultDates = computeDefaultDates.value;
      const defaultTimes = computeDefaultTimes.value;
      const timeOpts = computeTimeOpts.value;
      const popupOpts = computePopupOpts.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 ppClassName = popupOpts.className;
      const [sdDate, edDate] = defaultDates;
      const [sdTime, edTime] = defaultTimes;
      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}`, ppClassName ? _xeUtils.default.isFunction(ppClassName) ? ppClassName({
          $dateRangePicker: $xeDateRangePicker
        }) : ppClassName : '', {
          [`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,
        endDate: endValue,
        startDay: props.startDay,
        labelFormat: props.labelFormat,
        valueFormat: props.valueFormat,
        timeFormat: props.timeFormat,
        defaultDate: sdDate,
        defaultTime: sdTime,
        timeConfig: timeOpts,
        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,
        startDate: startValue,
        startDay: props.startDay,
        labelFormat: props.labelFormat,
        valueFormat: props.valueFormat,
        timeFormat: props.timeFormat,
        defaultDate: edDate,
        defaultTime: edTime,
        timeConfig: timeOpts,
        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)] : `${separator || ''}`), (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,
        editable: false,
        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, 'keydown', handleGlobalKeydownEvent);
      _ui.globalEvents.on($xeDateRangePicker, 'blur', handleGlobalBlurEvent);
      _ui.globalEvents.on($xeDateRangePicker, 'resize', handleGlobalResizeEvent);
    });
    (0, _vue.onDeactivated)(() => {
      checkValue();
    });
    (0, _vue.onUnmounted)(() => {
      _ui.globalEvents.off($xeDateRangePicker, 'mousewheel');
      _ui.globalEvents.off($xeDateRangePicker, 'mousedown');
      _ui.globalEvents.off($xeDateRangePicker, 'blur');
      _ui.globalEvents.off($xeDateRangePicker, 'resize');
    });
    (0, _vue.onBeforeUnmount)(() => {
      checkValue();
    });
    (0, _vue.provide)('$xeDateRangePicker', $xeDateRangePicker);
    $xeDateRangePicker.renderVN = renderVN;
    return $xeDateRangePicker;
  },
  render() {
    return this.renderVN();
  }
});