@fesjs/fes-design/es/date-picker/calendar.js

fes-design for PC

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { defineComponent, computed, ref, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, mergeProps, createCommentVNode, createElementVNode, withModifiers, withDirectives, vShow, toDisplayString, Fragment, renderList } from 'vue';
import { format, isValid } from 'date-fns';
import { LeftOutlined, RightOutlined, DoubleLeftOutlined, DoubleRightOutlined } from '../icon';
import TimePicker from '../time-picker';
import InputInner from '../input/inputInner.js';
import getPrefixCls from '../_util/getPrefixCls';
import { useLocale } from '../config-provider/useLocale';
import { getDefaultTime, transformDateToTimestamp, strictParse, parseDate } from './helper';
import { RANGE_POSITION, COMMON_PROPS, YEAR_COUNT } from './const';
import { useCurrentDate, useSelectedDates, useYear, useMonth, useDay, useQuarter, useTime } from './useCalendar';
import { pickerFactory } from './pickerHandler';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const prefixCls = getPrefixCls('date-picker-calendar');
const MONTHS_NAMES = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
const calendarProps = _objectSpread(_objectSpread({}, COMMON_PROPS), {}, {
  rangePosition: {
    type: String
  },
  modelValue: Array,
  activeDate: Number,
  selectedStatus: Number,
  disabledDate: {
    type: Function
  }
});
function useDateInput(_ref) {
  let {
    props,
    selectedDates,
    updateSelectedDates,
    updateCurrentDate,
    picker
  } = _ref;
  const inputDate = ref();
  let cacheValidInputDate = '';
  const currentIndex = computed(() => {
    if (picker.value.isRange && props.rangePosition === RANGE_POSITION.RIGHT) {
      return 1;
    }
    return 0;
  });
  const getDateStr = i => {
    return selectedDates.value[i] ? format(transformDateToTimestamp(selectedDates.value[i]), 'yyyy-MM-dd') : '';
  };
  watch(selectedDates, () => {
    cacheValidInputDate = getDateStr(currentIndex.value);
    inputDate.value = cacheValidInputDate;
  }, {
    immediate: true
  });
  const handleDateInput = val => {
    var _props$disabledDate;
    inputDate.value = val;
    const date = strictParse(val, 'yyyy-MM-dd', new Date());
    const anotherDate = selectedDates.value[(currentIndex.value + 1) % 2];
    if (isValid(date) && !((_props$disabledDate = props.disabledDate) !== null && _props$disabledDate !== void 0 && _props$disabledDate.call(props, date, 'yyyy-MM-dd', anotherDate && new Date(transformDateToTimestamp(anotherDate))))) {
      const dateObj = parseDate(date);
      cacheValidInputDate = val;
      // 在同一面板，不更新 current date
      if (anotherDate && !(anotherDate.year === dateObj.year && anotherDate.month === dateObj.month)) {
        updateCurrentDate(dateObj);
      }
      updateSelectedDates(_objectSpread(_objectSpread({}, selectedDates.value[currentIndex.value]), {}, {
        year: dateObj.year,
        month: dateObj.month,
        day: dateObj.day
      }), currentIndex.value, {
        isDateInput: true
      });
    }
  };
  const handleDateInputBlur = () => {
    if (inputDate.value !== cacheValidInputDate) {
      inputDate.value = cacheValidInputDate;
    }
  };
  return {
    inputDate,
    handleDateInput,
    handleDateInputBlur
  };
}
var script = defineComponent({
  name: 'FCalendar',
  components: {
    LeftOutlined,
    RightOutlined,
    DoubleLeftOutlined,
    DoubleRightOutlined,
    InputInner,
    TimePicker
  },
  props: calendarProps,
  emits: ['change', 'selectedDay', 'update:activeDate'],
  setup(props, _ref2) {
    let {
      emit
    } = _ref2;
    const pickerRef = computed(() => {
      return pickerFactory(props.type);
    });
    const {
      currentDate,
      updateCurrentDate
    } = useCurrentDate(props, emit);
    const {
      selectedDates,
      updateSelectedDates
    } = useSelectedDates(props, emit, pickerRef);
    const {
      t
    } = useLocale();
    const activeIndex = computed(() => {
      if (pickerRef.value.isRange) {
        return props.rangePosition === RANGE_POSITION.LEFT ? 0 : 1;
      }
      return 0;
    });
    const {
      inputDate,
      handleDateInput,
      handleDateInputBlur
    } = useDateInput({
      props,
      selectedDates,
      updateSelectedDates,
      updateCurrentDate,
      picker: pickerRef
    });
    const {
      years,
      yearStart,
      yearEnd,
      selectYear,
      isYearSelect,
      yearCls
    } = useYear({
      props,
      selectedDates,
      updateSelectedDates,
      activeIndex,
      currentDate,
      updateCurrentDate
    });
    const {
      isMonthSelect,
      selectMonth,
      monthToNext,
      monthToPre,
      monthCls
    } = useMonth({
      props,
      selectedDates,
      updateSelectedDates,
      activeIndex,
      currentDate,
      updateCurrentDate,
      picker: pickerRef
    });
    const {
      days,
      isDaySelect,
      weekNames,
      dayCls
    } = useDay({
      props,
      selectedDates,
      currentDate,
      picker: pickerRef
    });
    const {
      isQuarterSelect,
      quarterList,
      selectQuarter,
      quarterCls
    } = useQuarter(props, selectedDates, updateSelectedDates, activeIndex, currentDate);
    const {
      currentTime,
      changeTime,
      innerDisabledTime
    } = useTime({
      props,
      selectedDates,
      updateSelectedDates,
      activeIndex,
      picker: pickerRef
    });
    const selectedDay = info => {
      var _selectedDates$value$;
      if (info.next) {
        monthToNext();
      }
      if (info.pre) {
        monthToPre();
      }
      let time;
      if (((_selectedDates$value$ = selectedDates.value[activeIndex.value]) === null || _selectedDates$value$ === void 0 ? void 0 : _selectedDates$value$.hour) == null) {
        time = getDefaultTime(props.defaultTime, props.rangePosition, pickerRef.value.hasTime);
      }
      updateSelectedDates(_objectSpread({
        year: info.year,
        month: info.month,
        day: info.day
      }, time), activeIndex.value);
    };
    const yearToPre = () => {
      if (isYearSelect.value) {
        updateCurrentDate({
          year: currentDate.year - YEAR_COUNT
        });
      } else {
        updateCurrentDate({
          year: currentDate.year - 1
        });
      }
    };
    const yearToNext = () => {
      if (isYearSelect.value) {
        updateCurrentDate({
          year: currentDate.year + YEAR_COUNT
        });
      } else {
        updateCurrentDate({
          year: currentDate.year + 1
        });
      }
    };
    const isNotDisabled = e => e.target.className.indexOf(`${prefixCls}-date-disabled`) === -1;
    const visibleLeftSingleArrow = computed(() => !isYearSelect.value && !isMonthSelect.value && !isQuarterSelect.value);
    const visibleRightSingleArrow = computed(() => !isYearSelect.value && !isMonthSelect.value && !isQuarterSelect.value);
    return {
      prefixCls,
      pickerRef,
      currentDate,
      MONTHS_NAMES,
      inputDate,
      handleDateInput,
      handleDateInputBlur,
      years,
      yearStart,
      yearEnd,
      selectYear,
      isYearSelect,
      yearCls,
      isMonthSelect,
      selectMonth,
      monthCls,
      weekNames,
      isDaySelect,
      days,
      isQuarterSelect,
      quarterList,
      selectQuarter,
      quarterCls,
      dayCls,
      monthToNext,
      monthToPre,
      isNotDisabled,
      selectedDay,
      currentTime,
      changeTime,
      innerDisabledTime,
      yearToPre,
      yearToNext,
      t,
      visibleLeftSingleArrow,
      visibleRightSingleArrow
    };
  }
});

const _hoisted_1 = ["onClick"];
const _hoisted_2 = ["onClick"];
const _hoisted_3 = ["onClick"];
const _hoisted_4 = ["onClick"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_InputInner = resolveComponent("InputInner");
  const _component_TimePicker = resolveComponent("TimePicker");
  const _component_DoubleLeftOutlined = resolveComponent("DoubleLeftOutlined");
  const _component_LeftOutlined = resolveComponent("LeftOutlined");
  const _component_RightOutlined = resolveComponent("RightOutlined");
  const _component_DoubleRightOutlined = resolveComponent("DoubleRightOutlined");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(_ctx.prefixCls)
  }, [_ctx.pickerRef.hasTime ? (openBlock(), createElementBlock("div", {
    key: 0,
    class: normalizeClass(`${_ctx.prefixCls}-input`)
  }, [createVNode(_component_InputInner, {
    modelValue: _ctx.inputDate,
    class: normalizeClass(`${_ctx.prefixCls}-input-date`),
    placeholder: _ctx.t('datePicker.selectDate'),
    onInput: _ctx.handleDateInput,
    onBlur: _ctx.handleDateInputBlur
  }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "onInput", "onBlur"]), createVNode(_component_TimePicker, mergeProps({
    inputClass: `${_ctx.prefixCls}-input-time`,
    modelValue: _ctx.currentTime
  }, _ctx.innerDisabledTime, {
    showSuffix: false,
    clearable: false,
    hourStep: _ctx.hourStep,
    minuteStep: _ctx.minuteStep,
    secondStep: _ctx.secondStep,
    appendToContainer: false,
    placeholder: _ctx.t('datePicker.selectTime'),
    onChange: _ctx.changeTime
  }), null, 16 /* FULL_PROPS */, ["inputClass", "modelValue", "hourStep", "minuteStep", "secondStep", "placeholder", "onChange"])], 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
    class: normalizeClass(`${_ctx.prefixCls}-head`),
    onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
  }, [createElementVNode("div", {
    class: normalizeClass(`${_ctx.prefixCls}-head-left`)
  }, [createVNode(_component_DoubleLeftOutlined, {
    class: normalizeClass(`${_ctx.prefixCls}-icon`),
    onClick: _ctx.yearToPre
  }, null, 8 /* PROPS */, ["class", "onClick"]), withDirectives(createVNode(_component_LeftOutlined, {
    class: normalizeClass(`${_ctx.prefixCls}-icon`),
    onClick: _ctx.monthToPre
  }, null, 8 /* PROPS */, ["class", "onClick"]), [[vShow, _ctx.visibleLeftSingleArrow]])], 2 /* CLASS */), createElementVNode("div", {
    class: normalizeClass(`${_ctx.prefixCls}-head-middle`)
  }, [createElementVNode("span", {
    class: normalizeClass(`${_ctx.prefixCls}-head-middle-item`)
  }, toDisplayString(_ctx.currentDate.year) + toDisplayString(_ctx.t('datePicker.year')), 3 /* TEXT, CLASS */), withDirectives(createElementVNode("span", {
    class: normalizeClass(`${_ctx.prefixCls}-head-middle-item`)
  }, toDisplayString(_ctx.t(`datePicker.month${_ctx.currentDate.month + 1}`)), 3 /* TEXT, CLASS */), [[vShow, !_ctx.isYearSelect && !_ctx.isMonthSelect && !_ctx.isQuarterSelect]])], 2 /* CLASS */), createElementVNode("div", {
    class: normalizeClass(`${_ctx.prefixCls}-head-right`)
  }, [withDirectives(createVNode(_component_RightOutlined, {
    class: normalizeClass(`${_ctx.prefixCls}-icon`),
    onClick: _ctx.monthToNext
  }, null, 8 /* PROPS */, ["class", "onClick"]), [[vShow, _ctx.visibleRightSingleArrow]]), createVNode(_component_DoubleRightOutlined, {
    class: normalizeClass(`${_ctx.prefixCls}-icon`),
    onClick: _ctx.yearToNext
  }, null, 8 /* PROPS */, ["class", "onClick"])], 2 /* CLASS */)], 34 /* CLASS, NEED_HYDRATION */), createElementVNode("div", {
    class: normalizeClass(`${_ctx.prefixCls}-body`),
    onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
  }, [_ctx.isDaySelect ? (openBlock(), createElementBlock("div", {
    key: 0,
    class: normalizeClass(`${_ctx.prefixCls}-days`)
  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.weekNames, weekName => {
    return openBlock(), createElementBlock("span", {
      key: weekName,
      class: normalizeClass(`${_ctx.prefixCls}-week`)
    }, toDisplayString(weekName), 3 /* TEXT, CLASS */);
  }), 128 /* KEYED_FRAGMENT */)), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.days, (item, i) => {
    return openBlock(), createElementBlock("span", {
      key: i,
      class: normalizeClass(_ctx.dayCls(item)),
      onClick: $event => _ctx.isNotDisabled($event) && _ctx.selectedDay(item)
    }, toDisplayString(item.day), 11 /* TEXT, CLASS, PROPS */, _hoisted_1);
  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.isMonthSelect ? (openBlock(), createElementBlock("div", {
    key: 1,
    class: normalizeClass(`${_ctx.prefixCls}-months`)
  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.MONTHS_NAMES, (monthName, i) => {
    return openBlock(), createElementBlock("span", {
      key: i,
      class: normalizeClass(_ctx.monthCls(i)),
      onClick: $event => _ctx.isNotDisabled($event) && _ctx.selectMonth(i)
    }, toDisplayString(_ctx.t(`datePicker.months.${monthName}`)), 11 /* TEXT, CLASS, PROPS */, _hoisted_2);
  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.isYearSelect ? (openBlock(), createElementBlock("div", {
    key: 2,
    class: normalizeClass(`${_ctx.prefixCls}-years`)
  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.years, (year, index) => {
    return openBlock(), createElementBlock("span", {
      key: index,
      class: normalizeClass(_ctx.yearCls(year)),
      onClick: $event => _ctx.isNotDisabled($event) && _ctx.selectYear(year)
    }, toDisplayString(year), 11 /* TEXT, CLASS, PROPS */, _hoisted_3);
  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.isQuarterSelect ? (openBlock(), createElementBlock("div", {
    key: 3,
    class: normalizeClass(`${_ctx.prefixCls}-quarters`)
  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.quarterList, item => {
    return openBlock(), createElementBlock("span", {
      key: item.value,
      class: normalizeClass(_ctx.quarterCls(item)),
      onClick: $event => _ctx.isNotDisabled($event) && _ctx.selectQuarter(item)
    }, toDisplayString(_ctx.t(`datePicker.quarters.${item.name}`)), 11 /* TEXT, CLASS, PROPS */, _hoisted_4);
  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 34 /* CLASS, NEED_HYDRATION */)], 2 /* CLASS */);
}

script.render = render;
script.__file = "components/date-picker/calendar.vue";

export { script as default };