vxe-pc-ui/lib/date-picker/src/date-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 _vn = require("../../ui/src/vn");
var _util = require("../../date-panel/src/util");
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: 'VxeDatePicker',
  props: {
    modelValue: [String, Number, Date],
    immediate: {
      type: Boolean,
      default: true
    },
    name: String,
    type: {
      type: String,
      default: 'date'
    },
    clearable: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().datePicker.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)().datePicker.size || (0, _ui.getConfig)().size
    },
    multiple: Boolean,
    limitCount: {
      type: [String, Number],
      default: () => (0, _ui.getConfig)().datePicker.limitCount
    },
    // date、week、month、quarter、year
    startDate: {
      type: [String, Number, Date],
      default: () => (0, _ui.getConfig)().datePicker.startDate
    },
    endDate: {
      type: [String, Number, Date],
      default: () => (0, _ui.getConfig)().datePicker.endDate
    },
    defaultDate: [String, Number, Date],
    defaultTime: [String, Number, Date],
    minDate: [String, Number, Date],
    maxDate: [String, Number, Date],
    startDay: {
      type: [String, Number],
      default: () => (0, _ui.getConfig)().datePicker.startDay
    },
    labelFormat: String,
    valueFormat: String,
    timeFormat: String,
    editable: {
      type: Boolean,
      default: true
    },
    festivalMethod: {
      type: Function,
      default: () => (0, _ui.getConfig)().datePicker.festivalMethod
    },
    disabledMethod: {
      type: Function,
      default: () => (0, _ui.getConfig)().datePicker.disabledMethod
    },
    // week
    selectDay: {
      type: [String, Number],
      default: () => (0, _ui.getConfig)().datePicker.selectDay
    },
    showClearButton: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().datePicker.showClearButton
    },
    showConfirmButton: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().datePicker.showConfirmButton
    },
    autoClose: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().datePicker.autoClose
    },
    prefixIcon: String,
    suffixIcon: String,
    placement: String,
    transfer: {
      type: Boolean,
      default: null
    },
    timeConfig: Object,
    popupConfig: Object,
    shortcutConfig: Object,
    // 已废弃 startWeek，被 startDay 替换
    startWeek: Number
  },
  emits: ['update:modelValue', '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,
      inputValue: '',
      inputLabel: ''
    });
    const internalData = {
      hpTimeout: undefined
    };
    const refElem = (0, _vue.ref)();
    const refInputTarget = (0, _vue.ref)();
    const refInputPanel = (0, _vue.ref)();
    const refPanelWrapper = (0, _vue.ref)();
    const refDatePanel = (0, _vue.ref)();
    const refMaps = {
      refElem,
      refInput: refInputTarget
    };
    const $xeDatePicker = {
      xID,
      props,
      context,
      reactData,
      internalData,
      getRefMaps: () => refMaps
    };
    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)().datePicker.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 computeIsDateTimeType = (0, _vue.computed)(() => {
      const {
        type
      } = props;
      return type === 'time' || type === 'datetime';
    });
    const computeIsDatePickerType = (0, _vue.computed)(() => {
      const isDateTimeType = computeIsDateTimeType.value;
      return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
    });
    const computeIsClearable = (0, _vue.computed)(() => {
      return props.clearable;
    });
    const computeInputReadonly = (0, _vue.computed)(() => {
      const {
        type,
        editable,
        multiple
      } = props;
      const formReadonly = computeFormReadonly.value;
      return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
    });
    const computeInpPlaceholder = (0, _vue.computed)(() => {
      const {
        placeholder
      } = props;
      if (placeholder) {
        return (0, _utils.getFuncText)(placeholder);
      }
      const globalPlaceholder = (0, _ui.getConfig)().datePicker.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 computeTimeOpts = (0, _vue.computed)(() => {
      return Object.assign({}, (0, _ui.getConfig)().datePicker.timeConfig, props.timeConfig);
    });
    const computePopupOpts = (0, _vue.computed)(() => {
      return Object.assign({}, (0, _ui.getConfig)().datePicker.popupConfig, props.popupConfig);
    });
    const computeShortcutOpts = (0, _vue.computed)(() => {
      return Object.assign({}, (0, _ui.getConfig)().datePicker.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 computePanelLabel = (0, _vue.computed)(() => {
      const {
        type,
        multiple
      } = props;
      const {
        inputValue
      } = reactData;
      const dateLabelFormat = computeDateLabelFormat.value;
      const dateValueFormat = computeDateValueFormat.value;
      const firstDayOfWeek = computeFirstDayOfWeek.value;
      const vals = inputValue ? multiple ? inputValue.split(',') : [inputValue] : [];
      return vals.map(val => {
        const dateObj = (0, _util.parseDateObj)(val, type, {
          valueFormat: dateValueFormat,
          labelFormat: dateLabelFormat,
          firstDay: firstDayOfWeek
        });
        return dateObj.label;
      }).join(', ');
    });
    const updateModelValue = () => {
      const {
        modelValue
      } = props;
      let val = '';
      if (modelValue) {
        if (_xeUtils.default.isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
          val = new Date(modelValue);
        } else {
          val = modelValue;
        }
      }
      reactData.inputValue = val;
    };
    const triggerEvent = evnt => {
      const {
        inputValue
      } = reactData;
      dispatchEvent(evnt.type, {
        value: inputValue
      }, evnt);
    };
    const handleChange = (value, evnt) => {
      const {
        type,
        modelValue,
        valueFormat
      } = props;
      const dateValueFormat = computeDateValueFormat.value;
      reactData.inputValue = value;
      if ((0, _util.hasTimestampValueType)(valueFormat)) {
        const dateVal = (0, _util.parseDateValue)(value, type, {
          valueFormat: dateValueFormat
        });
        const timeNum = dateVal ? dateVal.getTime() : null;
        emit('update:modelValue', timeNum);
        if (modelValue !== timeNum) {
          dispatchEvent('change', {
            value: timeNum
          }, evnt);
          // 自动更新校验状态
          if ($xeForm && formItemInfo) {
            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, timeNum);
          }
        }
      } else if ((0, _util.hasDateValueType)(valueFormat)) {
        const dateVal = (0, _util.parseDateValue)(value, type, {
          valueFormat: dateValueFormat
        });
        emit('update:modelValue', dateVal);
        if (modelValue && dateVal ? _xeUtils.default.toStringDate(modelValue).getTime() !== dateVal.getTime() : modelValue !== dateVal) {
          dispatchEvent('change', {
            value: dateVal
          }, evnt);
          // 自动更新校验状态
          if ($xeForm && formItemInfo) {
            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, dateVal);
          }
        }
      } else {
        emit('update:modelValue', value);
        if (_xeUtils.default.toValueString(modelValue) !== value) {
          dispatchEvent('change', {
            value
          }, evnt);
          // 自动更新校验状态
          if ($xeForm && formItemInfo) {
            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
          }
        }
      }
    };
    const inputEvent = evnt => {
      const inputElem = evnt.target;
      const value = inputElem.value;
      reactData.inputLabel = value;
      dispatchEvent('input', {
        value
      }, evnt);
    };
    const changeEvent = evnt => {
      const inpImmediate = computeInpImmediate.value;
      if (!inpImmediate) {
        triggerEvent(evnt);
      }
    };
    const focusEvent = evnt => {
      reactData.isActivated = true;
      const isDatePickerType = computeIsDatePickerType.value;
      if (isDatePickerType) {
        datePickerOpenEvent(evnt);
      }
      triggerEvent(evnt);
    };
    const clickPrefixEvent = evnt => {
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        const {
          inputValue
        } = reactData;
        dispatchEvent('prefix-click', {
          value: inputValue
        }, 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 clickSuffixEvent = evnt => {
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        const {
          inputValue
        } = reactData;
        dispatchEvent('suffix-click', {
          value: inputValue
        }, evnt);
      }
    };
    const blurEvent = evnt => {
      const $datePanel = refDatePanel.value;
      const {
        inputValue
      } = reactData;
      const inpImmediate = computeInpImmediate.value;
      const value = inputValue;
      if (!inpImmediate) {
        handleChange(value, evnt);
      }
      if (!reactData.visiblePanel) {
        reactData.isActivated = false;
        // 未打开面板时才校验
        if ($datePanel) {
          $datePanel.checkValue(reactData.inputLabel);
        }
      }
      dispatchEvent('blur', {
        value
      }, 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 $datePanel = refDatePanel.value;
      if ($datePanel) {
        $datePanel.confirmByEvent(evnt);
      }
      hidePanel();
    };
    const panelChangeEvent = params => {
      const {
        multiple,
        autoClose
      } = props;
      const {
        value,
        $event
      } = params;
      const isDateTimeType = computeIsDateTimeType.value;
      handleChange(value, $event);
      if (!multiple && !isDateTimeType) {
        if (autoClose) {
          hidePanel();
        }
      }
    };
    const panelConfirmEvent = params => {
      dispatchEvent('confirm', params, params.$event);
    };
    // 全局事件
    const handleGlobalMousedownEvent = evnt => {
      const $datePanel = refDatePanel.value;
      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) {
            hidePanel();
            if ($datePanel) {
              $datePanel.checkValue(reactData.inputLabel);
            }
          }
        }
      }
    };
    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) {
            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 $datePanel = refDatePanel.value;
      const {
        isActivated,
        visiblePanel
      } = reactData;
      if (visiblePanel) {
        hidePanel();
      }
      if (isActivated) {
        reactData.isActivated = false;
      }
      if (visiblePanel || isActivated) {
        if ($datePanel) {
          $datePanel.checkValue(reactData.inputLabel);
        }
        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;
        }
        reactData.isActivated = true;
        reactData.isAniVisible = true;
        setTimeout(() => {
          reactData.visiblePanel = true;
          updatePlacement();
        }, 10);
        updateZindex();
        return updatePlacement();
      }
      return (0, _vue.nextTick)();
    };
    const datePickerOpenEvent = evnt => {
      const formReadonly = computeFormReadonly.value;
      if (!formReadonly) {
        evnt.preventDefault();
        showPanel();
      }
    };
    const clickEvent = evnt => {
      triggerEvent(evnt);
    };
    const handleShortcutEvent = ({
      option,
      $event
    }) => {
      const {
        type
      } = props;
      const {
        inputValue
      } = reactData;
      const shortcutOpts = computeShortcutOpts.value;
      const {
        autoClose
      } = shortcutOpts;
      const {
        code,
        clickMethod
      } = option;
      let value = inputValue;
      const shortcutParams = {
        $datePicker: $xeDatePicker,
        option,
        value,
        code
      };
      if (!clickMethod && code) {
        const gCommandOpts = _ui.commands.get(code);
        const dpCommandMethod = gCommandOpts ? gCommandOpts.datePickerCommandMethod : null;
        if (dpCommandMethod) {
          dpCommandMethod(shortcutParams);
        } else {
          const dateValueFormat = computeDateValueFormat.value;
          const firstDayOfWeek = computeFirstDayOfWeek.value;
          switch (code) {
            case 'now':
            case 'prev':
            case 'next':
            case 'minus':
            case 'plus':
              {
                const restObj = (0, _util.getDateByCode)(code, value, type, {
                  valueFormat: dateValueFormat,
                  firstDay: firstDayOfWeek
                });
                value = restObj.value;
                shortcutParams.value = value;
                handleChange(value, $event);
                break;
              }
            default:
              (0, _log.errLog)('vxe.error.notCommands', [`[date-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, {
        $datePicker: $xeDatePicker
      }, params));
    };
    const datePickerMethods = {
      dispatchEvent,
      setModelValue(value) {
        reactData.inputValue = value;
        emit('update:modelValue', value);
      },
      setModelValueByEvent(evnt, value) {
        handleChange(value || '', 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($xeDatePicker, datePickerMethods);
    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-picker--layout-${pos}-wrapper`
        }, [(0, _vue.h)(_buttonGroup.default, {
          options: shortcutList,
          mode,
          align,
          vertical: isVertical,
          onClick: handleShortcutEvent
        })]);
      }
      return (0, _ui.renderEmptyElement)($xeDatePicker);
    };
    const renderPanel = () => {
      const {
        type,
        multiple,
        showClearButton,
        showConfirmButton
      } = props;
      const {
        initialized,
        isAniVisible,
        visiblePanel,
        panelPlacement,
        panelStyle,
        inputValue
      } = reactData;
      const vSize = computeSize.value;
      const btnTransfer = computeBtnTransfer.value;
      const shortcutOpts = computeShortcutOpts.value;
      const isClearable = computeIsClearable.value;
      const isDateTimeType = computeIsDateTimeType.value;
      const shortcutList = computeShortcutList.value;
      const timeOpts = computeTimeOpts.value;
      const popupOpts = computePopupOpts.value;
      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 hasShortcutBtn = shortcutList.length > 0;
      const showConfirmBtn = showConfirmButton === null ? isDateTimeType || multiple : showConfirmButton;
      const showClearBtn = showClearButton === null ? isClearable && showConfirmBtn && type !== 'time' : 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-picker--panel', `type--${type}`, ppClassName ? _xeUtils.default.isFunction(ppClassName) ? ppClassName({
          $datePicker: $xeDatePicker
        }) : 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-picker--layout-all-wrapper', `type--${type}`, {
          [`size--${vSize}`]: vSize
        }]
      }, [topSlot ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-top-wrapper'
      }, topSlot({})) : renderShortcutBtn('top'), (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-body-layout-wrapper'
      }, [leftSlot ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-left-wrapper'
      }, leftSlot({})) : renderShortcutBtn('left', true), (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-body-content-wrapper'
      }, [headerSlot ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-header-wrapper'
      }, headerSlot({})) : renderShortcutBtn('header'), (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-body-wrapper'
      }, [(0, _vue.h)(_datePanel.default, {
        ref: refDatePanel,
        modelValue: reactData.inputValue,
        type: props.type,
        className: props.className,
        multiple: props.multiple,
        limitCount: props.limitCount,
        startDate: props.startDate,
        endDate: props.endDate,
        defaultDate: props.defaultDate,
        defaultTime: props.defaultTime,
        minDate: props.minDate,
        maxDate: props.maxDate,
        startDay: props.startDay,
        labelFormat: props.labelFormat,
        valueFormat: props.valueFormat,
        timeFormat: props.timeFormat,
        timeConfig: timeOpts,
        festivalMethod: props.festivalMethod,
        disabledMethod: props.disabledMethod,
        selectDay: props.selectDay,
        onChange: panelChangeEvent,
        onConfirm: panelConfirmEvent
      })]), (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-footer-wrapper'
      }, [(0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-footer-custom'
      }, footerSlot ? footerSlot({}) : [renderShortcutBtn('footer')]), showClearBtn || showConfirmBtn ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-footer-btns'
      }, [showClearBtn ? (0, _vue.h)(_button.default, {
        size: 'mini',
        disabled: inputValue === '' || _xeUtils.default.eqNull(inputValue),
        content: (0, _ui.getI18n)('vxe.button.clear'),
        onClick: clearValueEvent
      }) : (0, _ui.renderEmptyElement)($xeDatePicker), showConfirmBtn ? (0, _vue.h)(_button.default, {
        size: 'mini',
        status: 'primary',
        content: (0, _ui.getI18n)('vxe.button.confirm'),
        onClick: confirmEvent
      }) : (0, _ui.renderEmptyElement)($xeDatePicker)]) : (0, _ui.renderEmptyElement)($xeDatePicker)])]), rightSlot ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-right-wrapper'
      }, rightSlot({})) : renderShortcutBtn('right', true)]), bottomSlot ? (0, _vue.h)('div', {
        class: 'vxe-date-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-picker--prefix',
        onClick: clickPrefixEvent
      }, [(0, _vue.h)('div', {
        class: 'vxe-date-picker--prefix-icon'
      }, prefixSlot ? (0, _vn.getSlotVNs)(prefixSlot({})) : [(0, _vue.h)('i', {
        class: prefixIcon
      })])]) : null;
    };
    const renderSuffixIcon = () => {
      const {
        suffixIcon
      } = props;
      const {
        inputValue
      } = reactData;
      const suffixSlot = slots.suffix;
      const isDisabled = computeIsDisabled.value;
      const isClearable = computeIsClearable.value;
      return (0, _vue.h)('div', {
        class: ['vxe-date-picker--suffix', {
          'is--clear': isClearable && !isDisabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue))
        }]
      }, [isClearable ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--clear-icon',
        onClick: clearValueEvent
      }, [(0, _vue.h)('i', {
        class: (0, _ui.getIcon)().INPUT_CLEAR
      })]) : (0, _ui.renderEmptyElement)($xeDatePicker), renderExtraSuffixIcon(), suffixSlot || suffixIcon ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--suffix-icon',
        onClick: clickSuffixEvent
      }, suffixSlot ? (0, _vn.getSlotVNs)(suffixSlot({})) : [(0, _vue.h)('i', {
        class: suffixIcon
      })]) : (0, _ui.renderEmptyElement)($xeDatePicker)]);
    };
    const renderExtraSuffixIcon = () => {
      return (0, _vue.h)('div', {
        class: 'vxe-date-picker--control-icon',
        onClick: datePickerOpenEvent
      }, [(0, _vue.h)('i', {
        class: ['vxe-date-picker--date-picker-icon', (0, _ui.getIcon)().DATE_PICKER_DATE]
      })]);
    };
    const renderVN = () => {
      const {
        className,
        type,
        name,
        autoComplete
      } = props;
      const {
        inputValue,
        inputLabel,
        visiblePanel,
        isActivated
      } = reactData;
      const vSize = computeSize.value;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const panelLabel = computePanelLabel.value;
      if (formReadonly) {
        return (0, _vue.h)('div', {
          ref: refElem,
          class: ['vxe-date-picker--readonly', `type--${type}`, className]
        }, panelLabel);
      }
      const inputReadonly = computeInputReadonly.value;
      const inpPlaceholder = computeInpPlaceholder.value;
      const isClearable = computeIsClearable.value;
      const prefix = renderPrefixIcon();
      const suffix = renderSuffixIcon();
      return (0, _vue.h)('div', {
        ref: refElem,
        class: ['vxe-date-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 && !(inputValue === '' || _xeUtils.default.eqNull(inputValue))
        }],
        spellcheck: false
      }, [prefix || (0, _ui.renderEmptyElement)($xeDatePicker), (0, _vue.h)('div', {
        class: 'vxe-date-picker--wrapper'
      }, [(0, _vue.h)('input', {
        ref: refInputTarget,
        class: 'vxe-date-picker--inner',
        value: inputLabel,
        name,
        type: 'text',
        placeholder: inpPlaceholder,
        readonly: inputReadonly,
        disabled: isDisabled,
        autocomplete: autoComplete,
        onKeydown: keydownEvent,
        onKeyup: keyupEvent,
        onClick: clickEvent,
        onInput: inputEvent,
        onChange: changeEvent,
        onFocus: focusEvent,
        onBlur: blurEvent
      })]), suffix || (0, _ui.renderEmptyElement)($xeDatePicker),
      // 下拉面板
      renderPanel()]);
    };
    (0, _vue.watch)(computePanelLabel, val => {
      reactData.inputLabel = val;
    });
    (0, _vue.watch)(() => props.modelValue, () => {
      updateModelValue();
    });
    (0, _vue.nextTick)(() => {
      _ui.globalEvents.on($xeDatePicker, 'mousewheel', handleGlobalMousewheelEvent);
      _ui.globalEvents.on($xeDatePicker, 'mousedown', handleGlobalMousedownEvent);
      _ui.globalEvents.on($xeDatePicker, 'keydown', handleGlobalKeydownEvent);
      _ui.globalEvents.on($xeDatePicker, 'blur', handleGlobalBlurEvent);
      _ui.globalEvents.on($xeDatePicker, 'resize', handleGlobalResizeEvent);
    });
    (0, _vue.onUnmounted)(() => {
      _ui.globalEvents.off($xeDatePicker, 'mousewheel');
      _ui.globalEvents.off($xeDatePicker, 'mousedown');
      _ui.globalEvents.off($xeDatePicker, 'blur');
      _ui.globalEvents.off($xeDatePicker, 'resize');
    });
    updateModelValue();
    (0, _vue.provide)('$xeDatePicker', $xeDatePicker);
    $xeDatePicker.renderVN = renderVN;
    return $xeDatePicker;
  },
  render() {
    return this.renderVN();
  }
});