tanxin-ui 0.2.0

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

@@ -0,0 +1,972 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var vue = require("vue");
+var type = require("../../utils/type.js");
+var index$1 = require("../../popper/index.js");
+var index = require("../../input/index.js");
+require("../../utils/components/icons/Checkmark.js");
+require("../../utils/components/icons/CheckmarkCircle.js");
+require("../../utils/components/icons/CheckmarkSharp.js");
+require("../../utils/components/icons/CheckmarkCircleOutline.js");
+require("../../utils/components/icons/AlertCircle.js");
+require("../../utils/components/icons/AlertCircleOutline.js");
+require("../../utils/components/icons/InformationCircle.js");
+require("../../utils/components/icons/InformationCircleOutline.js");
+require("../../utils/components/icons/CloseCircle.js");
+var CloseCircleOutline = require("../../utils/components/icons/CloseCircleOutline.js");
+require("../../utils/components/icons/HelpCircleSharp.js");
+require("../../utils/components/icons/EyeOffOutline.js");
+require("../../utils/components/icons/EyeOutline.js");
+require("../../utils/components/icons/LoadingOutlined.js");
+require("../../utils/components/icons/Close.js");
+require("../../utils/components/icons/CloseOutline.js");
+require("../../utils/components/icons/ArrowsMaximize.js");
+require("../../utils/components/icons/ArrowsMinimize.js");
+require("../../utils/components/icons/AddOutline.js");
+require("../../utils/components/icons/RemoveOutline.js");
+require("../../utils/components/icons/ChevronUp.js");
+require("../../utils/components/icons/ChevronDown.js");
+require("../../utils/components/icons/ChevronForward.js");
+require("../../utils/components/icons/ChevronLeft24Filled.js");
+require("../../utils/components/icons/ChevronRight24Filled.js");
+require("../../utils/components/icons/ChevronDoubleLeft16Filled.js");
+require("../../utils/components/icons/ChevronDoubleRight16Filled.js");
+require("../../utils/components/icons/CheckmarkOutline.js");
+require("../../utils/components/icons/IosCheckmark.js");
+require("../../utils/components/icons/Empty.js");
+require("../../utils/components/icons/Bars.js");
+require("../../utils/components/icons/ArrowUpCircle.js");
+require("../../utils/components/icons/ArrowUp.js");
+var ArrowForward = require("../../utils/components/icons/ArrowForward.js");
+var TimeOutline = require("../../utils/components/icons/TimeOutline.js");
+var CalendarClearOutline = require("../../utils/components/icons/CalendarClearOutline.js");
+require("../../utils/components/icons/KeyboardArrowLeftRound.js");
+require("../../utils/components/icons/KeyboardArrowRightRound.js");
+require("../../utils/components/icons/KeyboardDoubleArrowLeftRound.js");
+require("../../utils/components/icons/KeyboardDoubleArrowRightRound.js");
+require("../../utils/components/icons/MenuFoldOutlined.js");
+require("../../utils/components/icons/IosArrowDown.js");
+require("../../utils/components/icons/IosArrowBack.js");
+require("../../utils/components/icons/IosArrowForward.js");
+require("../../utils/components/icons/ImageSharp.js");
+require("../../utils/components/icons/Pause.js");
+require("../../utils/components/icons/Refresh.js");
+require("../../utils/components/icons/QuestionCircle24Regular.js");
+require("../../utils/components/icons/CloudUploadOutline.js");
+require("../../utils/components/icons/UploadFileFilled.js");
+require("../../utils/components/icons/EllipsisHorizontal.js");
+require("../../utils/components/icons/ArrowNext24Filled.js");
+require("../../utils/components/icons/ArrowPrevious24Filled.js");
+require("../../utils/components/icons/ArrowDropDownSharp.js");
+require("../../utils/components/icons/ArrowDropUpSharp.js");
+require("../../utils/components/icons/ArrowForwardIosFilled.js");
+var context = require("./context.js");
+var useConfig = require("../../utils/hooks/useConfig.js");
+var dayjs = require("dayjs");
+var cloneDeep = require("lodash-es/cloneDeep");
+var datePickerDate = require("./date-picker-date.js");
+var datePickerTime = require("./date-picker-time.js");
+var datePickerWeek = require("./date-picker-week.js");
+var datePickerYear = require("./date-picker-year.js");
+var index$2 = require("../../message/index.js");
+var clickOutside = require("../../utils/directives/click-outside.js");
+var weekOfYear = require("dayjs/plugin/weekOfYear");
+var advancedFormat = require("dayjs/plugin/advancedFormat");
+var quarterOfYear = require("dayjs/plugin/quarterOfYear");
+var popper = require("../../popper/src/popper.js");
+function _interopDefaultLegacy(e) {
+  return e && typeof e === "object" && "default" in e ? e : { "default": e };
+}
+var dayjs__default = /* @__PURE__ */ _interopDefaultLegacy(dayjs);
+var cloneDeep__default = /* @__PURE__ */ _interopDefaultLegacy(cloneDeep);
+var weekOfYear__default = /* @__PURE__ */ _interopDefaultLegacy(weekOfYear);
+var advancedFormat__default = /* @__PURE__ */ _interopDefaultLegacy(advancedFormat);
+var quarterOfYear__default = /* @__PURE__ */ _interopDefaultLegacy(quarterOfYear);
+dayjs__default["default"].extend(advancedFormat__default["default"]);
+dayjs__default["default"].extend(weekOfYear__default["default"]);
+dayjs__default["default"].extend(quarterOfYear__default["default"]);
+const datePickerProps = {
+  size: type.PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]).def("md"),
+  type: {
+    type: String,
+    default: "date"
+  },
+  readonly: type.PropTypes.bool.def(false),
+  disabled: {
+    type: [Boolean, Array]
+  },
+  loading: type.PropTypes.bool.def(false),
+  range: type.PropTypes.bool.def(false),
+  format: type.PropTypes.string,
+  placeholder: [String, Array],
+  value: [Array, String, Object],
+  panelDate: [Array, String, Object],
+  clearable: type.PropTypes.bool.def(true),
+  unbound: type.PropTypes.bool.def(false),
+  week: type.PropTypes.bool.def(false),
+  showFooter: type.PropTypes.bool.def(false),
+  prefix: type.PropTypes.string,
+  suffix: type.PropTypes.string,
+  placement: type.PropTypes.oneOf(popper.placementList).def("bottomLeft"),
+  disabledDates: {
+    type: Function
+  },
+  disabledHours: {
+    type: Array,
+    default: () => []
+  },
+  disabledMinutes: {
+    type: Array,
+    default: () => []
+  },
+  disabledSeconds: {
+    type: Array,
+    default: () => []
+  },
+  hourStep: type.PropTypes.number.def(1),
+  minuteStep: type.PropTypes.number.def(1),
+  secondStep: type.PropTypes.number.def(1),
+  years: {
+    type: Array,
+    default: () => [1900, 2100]
+  }
+};
+var DatePicker = vue.defineComponent({
+  name: "TDatePicker",
+  components: {
+    TInput: index.TInput,
+    TPopper: index$1.TPopper,
+    CloseCircleOutline: CloseCircleOutline["default"],
+    TimeOutline: TimeOutline["default"],
+    ArrowForward: ArrowForward["default"],
+    DatePickerDate: datePickerDate["default"],
+    DatePickerYear: datePickerYear["default"],
+    DatePickerTime: datePickerTime["default"],
+    CalendarClearOutline: CalendarClearOutline["default"]
+  },
+  directives: {
+    clickOutside: clickOutside.directive
+  },
+  inheritAttrs: false,
+  props: datePickerProps,
+  setup(props, {
+    slots,
+    emit,
+    attrs
+  }) {
+    var _a;
+    const currentValue = vue.ref([null, null]);
+    const {
+      prefixCls
+    } = useConfig.useConfig("date-picker", props);
+    const currentIndex = vue.ref(0);
+    const refPanel = [vue.ref(), vue.ref(), vue.ref(), vue.ref()];
+    const refInput = [vue.ref(), vue.ref()];
+    const refTrigger = vue.ref();
+    const innerIndex = vue.ref(0);
+    const showClear = vue.ref(false);
+    const disabled = vue.computed(() => {
+      let values = [false, false];
+      if (props.disabled) {
+        if (!type.isArray(props.disabled))
+          values = [props.disabled, props.disabled];
+        else
+          values = props.disabled;
+      }
+      return values;
+    });
+    const format = vue.computed(() => {
+      if (props.format)
+        return props.format;
+      switch (props.type) {
+        case "time":
+          return "HH:mm:ss";
+        case "datetime":
+          return "YYYY-MM-DD HH:mm:ss";
+        case "week":
+          return "YYYY-ww[\u5468]";
+        case "year":
+          return "YYYY";
+        case "month":
+          return "YYYY-MM";
+        case "quarter":
+          return "YYYY-[Q]Q";
+        default:
+          return "YYYY-MM-DD";
+      }
+    });
+    const placeholder = vue.computed(() => {
+      if (props.range) {
+        if (props.placeholder == void 0)
+          return ["\u5F00\u59CB\u65F6\u95F4", "\u7ED3\u675F\u65F6\u95F4"];
+        else if (type.isString(props.placeholder))
+          return [props.placeholder, props.placeholder];
+        else
+          return props.placeholder;
+      } else {
+        if (props.placeholder == void 0)
+          return ["\u5F00\u59CB\u65F6\u95F4"];
+        else
+          return [props.placeholder];
+      }
+    });
+    const selections = vue.ref({
+      year: [],
+      month: [],
+      quarter: [],
+      hour: [],
+      minute: [],
+      second: []
+    });
+    const reverseSelections = vue.ref({
+      year: [],
+      month: [],
+      quarter: [],
+      hour: [],
+      minute: [],
+      second: []
+    });
+    const formatValue = (value) => {
+      if (dayjs.isDayjs(value))
+        return value;
+      else if (value == "")
+        return null;
+      else if (value == void 0)
+        return null;
+      if (props.type == "time")
+        return dayjs__default["default"](`${dayjs__default["default"]().format("YYYY-MM-DD")} ${value}`);
+      else
+        return dayjs__default["default"](value);
+    };
+    const initValue = () => {
+      if (type.isArray(props.value)) {
+        currentValue.value = [formatValue(props.value[0] || null), formatValue(props.value[1] || null)];
+      } else
+        currentValue.value = [formatValue(props.value), null];
+    };
+    const initTimeSelections = () => {
+      selections.value["hour"] = [...Array(24)].map((item, index2) => index2).filter((item, index2) => index2 % props.hourStep == 0);
+      selections.value["minute"] = [...Array(60)].map((item, index2) => index2).filter((item, index2) => index2 % props.minuteStep == 0);
+      selections.value["second"] = [...Array(60)].map((item, index2) => index2).filter((item, index2) => index2 % props.secondStep == 0);
+      reverseSelections.value["hour"] = cloneDeep__default["default"](selections.value["hour"]).reverse();
+      reverseSelections.value["minute"] = cloneDeep__default["default"](selections.value["minute"]).reverse();
+      reverseSelections.value["second"] = cloneDeep__default["default"](selections.value["second"]).reverse();
+    };
+    const initYearSelections = () => {
+      selections.value["year"] = Array.from(new Array(props.years[1] + 1).keys()).slice(props.years[0]);
+      selections.value["month"] = [...Array(12)].map((item, index2) => index2 + 1);
+      selections.value["quarter"] = [...Array(4)].map((item, index2) => index2 + 1);
+      reverseSelections.value["year"] = cloneDeep__default["default"](selections.value["year"]).reverse();
+      reverseSelections.value["month"] = cloneDeep__default["default"](selections.value["month"]).reverse();
+      reverseSelections.value["quarter"] = cloneDeep__default["default"](selections.value["quarter"]).reverse();
+    };
+    const initPanelDate = () => {
+      let valueArr = [null, null];
+      if (props.panelDate) {
+        if (type.isArray(props.panelDate))
+          valueArr = props.panelDate;
+        else
+          valueArr[0] = props.panelDate;
+        if (valueArr[0] && type.isString(valueArr[0]))
+          panelDate.value[0] = dayjs__default["default"](valueArr[0]);
+        if (valueArr[1] && type.isString(valueArr[1]))
+          panelDate.value[1] = dayjs__default["default"](valueArr[1]);
+      }
+      if (disabled.value[0] != disabled.value[1]) {
+        if (disabled.value[0] && currentValue.value[0]) {
+          const value0 = currentValue.value[0];
+          if (value0.isBefore(dayjs__default["default"]()))
+            panelDate.value[1] = dayjs__default["default"]().startOf("month");
+          else
+            panelDate.value[1] = value0.startOf("month");
+        } else if (disabled.value[1] && currentValue.value[1]) {
+          const value1 = currentValue.value[1];
+          if (value1.isAfter(dayjs__default["default"]()))
+            panelDate.value[0] = dayjs__default["default"]().startOf("month");
+          else
+            panelDate.value[1] = value1.startOf("month");
+        }
+      }
+    };
+    vue.onBeforeMount(() => {
+      if (["time", "datetime"].includes(props.type))
+        initTimeSelections();
+      if (["datetime", "date", "year", "month", "quarter", "week"].includes(props.type))
+        initYearSelections();
+      initValue();
+      initPanelDate();
+    });
+    const getFormatValue = (value) => {
+      if (!value)
+        return "";
+      else if (props.type == "week")
+        return value.format("YYYY-MM-DD HH:mm:ss");
+      else if (props.type == "quarter")
+        return value.format("YYYY-MM");
+      else
+        return value.format(format.value);
+    };
+    const getCurrentValue = () => {
+      if (currentValue.value[0] == void 0 && currentValue.value[1] == void 0)
+        return void 0;
+      return props.range ? [getFormatValue(currentValue.value[0]), getFormatValue(currentValue.value[1])] : getFormatValue(currentValue.value[0]);
+    };
+    const commitValue = () => {
+      emit("update:value", getCurrentValue());
+      if (currentValue.value[0] == void 0 && currentValue.value[1] == void 0) {
+        emit("change", {
+          value: null
+        });
+      } else {
+        emit("change", {
+          value: currentValue.value
+        });
+      }
+    };
+    const setValue = (type2, value, index2, closePanel = true, innerUse = false, nInnerIndex = 0) => {
+      if (!dayjs.isDayjs(currentValue.value[index2])) {
+        currentValue.value[index2] = dayjs__default["default"]();
+      }
+      if (type2 == "year")
+        currentValue.value[index2] = currentValue.value[index2].year(value);
+      else if (type2 == "month")
+        currentValue.value[index2] = currentValue.value[index2].month(value);
+      else if (type2 == "quarter")
+        currentValue.value[index2] = currentValue.value[index2].quarter(value);
+      else if (type2 == "date") {
+        const day = value;
+        currentValue.value[index2] = currentValue.value[index2].year(day.year()).month(day.month()).date(day.date());
+      } else if (type2 == "hour")
+        currentValue.value[index2] = currentValue.value[index2].hour(value);
+      else if (type2 == "minute")
+        currentValue.value[index2] = currentValue.value[index2].minute(value);
+      else if (type2 == "second")
+        currentValue.value[index2] = currentValue.value[index2].second(value);
+      refInput[index2].value.focus();
+      if (innerUse) {
+        if (closePanel)
+          popVisible.value[index2] = false;
+      } else if (closePanel) {
+        commitValue();
+        popVisible.value[index2] = false;
+        close();
+      } else {
+        commitValue();
+        innerIndex.value = nInnerIndex;
+      }
+    };
+    const setTime = (time, index2, closePanel = true) => {
+      currentValue.value[index2] = time;
+      if (closePanel) {
+        commitValue();
+        close();
+      } else {
+        refInput[index2].value.focus();
+      }
+    };
+    const close = (commit = false) => {
+      visible.value = false;
+      if (commit)
+        commitValue();
+    };
+    const handleConfirm = () => {
+      close();
+      refInput[currentIndex.value].value.focus();
+    };
+    const hoverValue = vue.ref(null);
+    const hoverColumnIndex = vue.ref(0);
+    const hoverDate = vue.ref([null, null]);
+    const panelDate = vue.ref([null, null]);
+    const setHoverDate = (oneDay, twoDay, bBeforeHover = false) => {
+      hoverDate.value = [oneDay, twoDay];
+      if (bBeforeHover)
+        beforeHover.value = bBeforeHover;
+      refInput[currentIndex.value].value.focus();
+    };
+    const clearHoverDate = () => {
+      hoverDate.value = [null, null];
+    };
+    const setPanelDate = (day, index2) => {
+      panelDate.value[index2] = day;
+    };
+    const setHoverValue = (day) => {
+      hoverValue.value = day;
+    };
+    const setRangeValue = (oneDay, twoDay, closePanel = false, nInnerIndex = 0) => {
+      clearHoverDate();
+      innerIndex.value = nInnerIndex;
+      if (props.type == "datetime")
+        refInput[currentIndex.value].value.focus();
+      else
+        refInput[0].value.focus();
+      if (dayjs.isDayjs(oneDay) && dayjs.isDayjs(twoDay)) {
+        currentValue.value = oneDay.isAfter(twoDay) ? [twoDay, oneDay] : [oneDay, twoDay];
+      } else
+        currentValue.value = [oneDay, twoDay];
+      commitValue();
+      if (closePanel) {
+        close();
+      }
+    };
+    const beforeHover = vue.ref(false);
+    const setFocus = () => {
+      refInput[currentIndex.value].value.focus();
+    };
+    context.provideDatePicker({
+      visible: vue.computed(() => visible.value),
+      popVisible: vue.computed(() => popVisible.value),
+      value: vue.computed(() => currentValue.value),
+      disabled: vue.computed(() => disabled.value),
+      beforeHover: vue.computed(() => beforeHover.value),
+      focusIndex: vue.computed(() => currentIndex.value),
+      innerIndex: vue.computed(() => innerIndex.value),
+      hoverValue: vue.computed(() => hoverValue.value),
+      hoverColumnIndex: vue.computed(() => hoverColumnIndex.value),
+      selections: vue.computed(() => selections.value),
+      reverseSelections: vue.computed(() => reverseSelections.value),
+      hoverDate: vue.computed(() => hoverDate.value),
+      panelDate: vue.computed(() => panelDate.value),
+      setValue,
+      setRangeValue,
+      setPanelDate,
+      setTime,
+      setHoverValue,
+      setHoverDate,
+      close,
+      setFocus
+    });
+    const visible = vue.ref(false);
+    const popVisible = vue.ref([false, false]);
+    const isFocus = vue.ref(false);
+    const refPopper = vue.ref(null);
+    const handleClickOutside = (event) => {
+      if (refTrigger.value.contains(event.target))
+        return;
+      if (!inputFocus.value[0] && !inputFocus.value[1])
+        isFocus.value = false;
+    };
+    const handleClick = () => {
+      if (disabled.value[0] && disabled.value[1])
+        return;
+      isFocus.value = true;
+      if (disabled.value[0]) {
+        currentIndex.value = 1;
+        refInput[1].value.focus();
+      } else if (disabled.value[1]) {
+        currentIndex.value = 0;
+        refInput[0].value.focus();
+      }
+      setHoverValue(null);
+    };
+    vue.watch(() => props.value, () => {
+      initValue();
+    }, {
+      deep: true
+    });
+    let prefixElement = null;
+    if (props.prefix || slots.prefix) {
+      prefixElement = vue.createVNode("span", {
+        "class": `${prefixCls.value}-prefix`
+      }, [((_a = slots.prefix) == null ? void 0 : _a.call(slots)) || props.prefix]);
+    }
+    const handleClearClick = (event) => {
+      if (disabled.value[0] && disabled.value[1])
+        return;
+      event.stopPropagation();
+      event.preventDefault();
+      if (!disabled.value[0])
+        currentValue.value[0] = void 0;
+      if (!disabled.value[1])
+        currentValue.value[1] = void 0;
+      close();
+      commitValue();
+      emit("clear", event);
+      refInput[currentIndex.value].value.focus();
+    };
+    const getWeekDate = (valueStr) => {
+      const pattern = /^[0-9]{4}\-[0-9]{1,2}周$/;
+      if (!pattern.test(valueStr))
+        return null;
+      let [year, week] = valueStr.split("-");
+      week = week.replace("\u5468", "");
+      return dayjs__default["default"]().year(parseInt(year)).week(parseInt(week));
+    };
+    const getQuarterDate = (valueStr) => {
+      const pattern = /^[0-9]{4}\-Q[1-4]$/;
+      if (!pattern.test(valueStr))
+        return null;
+      let [year, quarter] = valueStr.split("-");
+      quarter = quarter.replace("Q", "");
+      return dayjs__default["default"]().year(parseInt(year)).quarter(parseInt(quarter));
+    };
+    const handleChange = (event, index2, enableUpdate = true) => {
+      event.stopPropagation();
+      event.preventDefault();
+      const str = event.target.value || "";
+      const value = props.type == "week" ? getWeekDate(str) : props.type == "quarter" ? getQuarterDate(str) : dayjs__default["default"](str);
+      let closePanel = true;
+      if (props.range && index2 == 0)
+        closePanel = false;
+      if (event.key != "Enter") {
+        if (enableUpdate) {
+          if (value && value.isValid())
+            setTime(value, index2, closePanel);
+          else
+            setTime(null, index2, closePanel);
+        }
+      }
+      clearHoverDate();
+      commitValue();
+      emit("change", {
+        value: getCurrentValue(),
+        index: index2
+      });
+    };
+    const handleFocus = (index2) => {
+      inputFocus.value[index2] = true;
+      isFocus.value = true;
+      currentIndex.value = index2;
+      emit("focus", {
+        index: index2
+      });
+    };
+    const handleInput = () => {
+      if (!visible.value) {
+        visible.value = true;
+      }
+    };
+    const inputFocus = vue.ref([false, false]);
+    const handleBlur = (index2) => {
+      inputFocus.value[index2] = false;
+      if (!inputFocus.value[0] && !inputFocus.value[1] && !visible.value)
+        isFocus.value = false;
+      emit("blur", {
+        index: index2
+      });
+    };
+    const handleTab = (event) => {
+      if (!visible.value)
+        return;
+      event.preventDefault();
+      if (props.type == "datetime") {
+        if (props.range) {
+          innerIndex.value = innerIndex.value ? 0 : 1;
+          if (innerIndex.value == 0) {
+            refInput[currentIndex.value ? 0 : 1].value.focus();
+            setHoverValue(null);
+          }
+        } else {
+          innerIndex.value = innerIndex.value ? 0 : 1;
+        }
+      } else if (props.type == "date" && props.range) {
+        refInput[currentIndex.value ? 0 : 1].value.focus();
+        if (!hoverDate.value[0] || beforeHover.value) {
+          beforeHover.value = true;
+          hoverDate.value[0] = panelDate.value[currentIndex.value];
+          hoverValue.value = hoverDate.value[0];
+        } else {
+          if (currentIndex.value == 1)
+            setHoverDate(hoverDate.value[0], panelDate.value[1]);
+          else
+            setHoverDate(hoverDate.value[0], panelDate.value[0].endOf("month"));
+        }
+      } else if (props.range) {
+        refInput[currentIndex.value ? 0 : 1].value.focus();
+        setHoverValue(currentValue.value[currentIndex.value]);
+      }
+    };
+    const handleEnter = (event, index2) => {
+      event.preventDefault();
+      let enableUpdate = true;
+      if (visible.value) {
+        if (popVisible.value[currentIndex.value]) {
+          popVisible.value[currentIndex.value] = false;
+          return;
+        }
+        if (props.range) {
+          if (props.type == "date" || props.type == "week") {
+            if (hoverDate.value[1]) {
+              enableUpdate = false;
+              setRangeValue(hoverDate.value[0], hoverDate.value[1], true);
+            } else if (beforeHover.value) {
+              beforeHover.value = false;
+              return;
+            }
+          }
+        }
+        close(true);
+      } else
+        refPopper.value.handleClick(event);
+      handleChange(event, index2, enableUpdate);
+    };
+    const handleKeydown = (event, index2) => {
+      switch (event.code) {
+        case "Escape":
+          event.preventDefault();
+          clearHoverDate();
+          close();
+          break;
+        case "ArrowDown":
+        case "ArrowUp":
+        case "ArrowLeft":
+        case "ArrowRight":
+          event.preventDefault();
+          if (innerIndex.value == 0) {
+            switch (props.type) {
+              case "datetime":
+                if (props.range)
+                  refPanel[0].value.handleKeydown(event.code);
+                else
+                  refPanel[currentIndex.value].value.handleKeydown(event.code);
+                break;
+              default:
+                refPanel[currentIndex.value].value.handleKeydown(event.code);
+                break;
+            }
+          } else {
+            refPanel[2].value.handleKeydown(event.code);
+          }
+          break;
+        case "Enter":
+          handleEnter(event, index2);
+          break;
+        case "Tab":
+          handleTab(event);
+          break;
+      }
+      emit("keydown", {
+        index: index2
+      });
+    };
+    const triggerClasses = vue.computed(() => {
+      const values = [`${prefixCls.value}-input`, {
+        [`is-focus`]: isFocus.value,
+        [`is-open`]: visible.value,
+        [`is-range`]: props.range,
+        [`is-disabled`]: disabled.value[0] && disabled.value[1] || props.loading,
+        [`is-readonly`]: props.readonly,
+        [`no-prefix`]: !props.prefix,
+        [`size-${props.size}`]: props.size
+      }];
+      return values;
+    });
+    const contentClasses = vue.computed(() => {
+      const values = [`${prefixCls.value}-content`, {
+        [`size-${props.size}`]: props.size,
+        [`is-range`]: props.range,
+        [`is-disabled`]: disabled.value[0] && disabled.value[1] || props.loading,
+        [`is-readonly`]: props.readonly
+      }];
+      return values;
+    });
+    const handleClickNow = () => {
+      var _a2;
+      if (disabled.value[0] && disabled.value[1])
+        return;
+      const time = dayjs__default["default"]();
+      if (((_a2 = props.disabledDates) == null ? void 0 : _a2.call(props, time)) || props.disabledHours.includes(time.hour()) || props.disabledMinutes.includes(time.minute()) || props.disabledSeconds.includes(time.second())) {
+        index$2.TMessage.warning("\u5F53\u524D\u65F6\u95F4\u4E0D\u53EF\u9009\u62E9");
+        return;
+      }
+      const close2 = false;
+      if (props.type == "datetime" && props.range) {
+        if (currentIndex.value == 0)
+          setRangeValue(time, currentValue.value[1], close2);
+        else
+          setRangeValue(currentValue.value[0], time, close2);
+      } else
+        setTime(time, currentIndex.value, close2);
+    };
+    const render = () => {
+      var _a2;
+      const contentProps = {
+        class: contentClasses.value,
+        range: props.range
+      };
+      const timeProps = {
+        type: props.type,
+        format: props.type == "time" ? format.value : format.value.split(" ")[1],
+        readonly: props.readonly,
+        disabled: disabled.value[0],
+        disabledDates: props.disabledDates,
+        disabledHours: props.disabledHours,
+        disabledMinutes: props.disabledMinutes,
+        disabledSeconds: props.disabledSeconds,
+        hourStep: props.hourStep,
+        minuteStep: props.minuteStep,
+        secondStep: props.secondStep
+      };
+      const singleProps = {
+        type: props.type,
+        week: props.week,
+        unbound: props.unbound,
+        disabledDates: props.disabledDates
+      };
+      const singlePanelElement = vue.computed(() => {
+        switch (props.type) {
+          case "time":
+            return vue.createVNode(vue.Fragment, null, [vue.createVNode(datePickerTime["default"], vue.mergeProps({
+              "ref": refPanel[0],
+              "index": 0,
+              "innerIndex": 0
+            }, timeProps), null)]);
+          case "datetime":
+            return vue.createVNode(vue.Fragment, null, [vue.createVNode(datePickerDate["default"], vue.mergeProps({
+              "ref": refPanel[0],
+              "index": 0,
+              "innerIndex": 0
+            }, singleProps), null), vue.createVNode(datePickerTime["default"], vue.mergeProps({
+              "ref": refPanel[2],
+              "index": 0,
+              "innerIndex": 1
+            }, timeProps, {
+              "showHeader": true
+            }), null)]);
+          case "week":
+            return vue.createVNode(vue.Fragment, null, [vue.createVNode(datePickerWeek["default"], vue.mergeProps({
+              "ref": refPanel[0]
+            }, singleProps), null)]);
+          case "year":
+          case "month":
+          case "quarter":
+            return vue.createVNode(vue.Fragment, null, [vue.createVNode(datePickerYear["default"], vue.mergeProps({
+              "ref": refPanel[0]
+            }, singleProps), null)]);
+          default:
+            return vue.createVNode(datePickerDate["default"], vue.mergeProps({
+              "ref": refPanel[0]
+            }, singleProps), null);
+        }
+      });
+      const rangeProps = {
+        type: props.type,
+        week: props.week,
+        unbound: disabled.value[0] != disabled.value[1] ? true : props.unbound,
+        range: disabled.value[0] != disabled.value[1] ? false : true,
+        disabledDates: props.disabledDates
+      };
+      const arrowElement = vue.computed(() => vue.createVNode("div", {
+        "class": `${prefixCls.value}-arrow`
+      }, [vue.createVNode(vue.resolveComponent("t-icon"), null, {
+        default: () => [vue.createVNode(ArrowForward["default"], null, null)]
+      })]));
+      const rangePanelElement = () => {
+        if (disabled.value[0] != disabled.value[1]) {
+          rangeProps["disabledDates"] = (date) => {
+            if (props.disabledDates) {
+              if (props.disabledDates(date))
+                return true;
+            }
+            if (disabled.value[0]) {
+              if (date.isBefore(currentValue.value[0]))
+                return true;
+            } else if (disabled.value[1]) {
+              if (date.isAfter(currentValue.value[1]))
+                return true;
+            }
+            return false;
+          };
+        }
+        switch (props.type) {
+          case "time":
+            return vue.createVNode(vue.Fragment, null, [!disabled.value[0] ? vue.createVNode(datePickerTime["default"], vue.mergeProps({
+              "ref": refPanel[0],
+              "index": 0,
+              "range": true
+            }, timeProps), null) : null, arrowElement.value, !disabled.value[1] ? vue.createVNode(datePickerTime["default"], vue.mergeProps({
+              "ref": refPanel[1],
+              "index": 1,
+              "range": true
+            }, timeProps), null) : null]);
+          case "datetime":
+            rangeProps["unbound"] = true;
+            rangeProps["disabled"] = disabled.value[currentIndex.value];
+            return vue.createVNode(vue.Fragment, null, [vue.createVNode(datePickerDate["default"], vue.mergeProps({
+              "ref": refPanel[0],
+              "index": currentIndex.value,
+              "innerIndex": 0
+            }, rangeProps), null), vue.createVNode(datePickerTime["default"], vue.mergeProps({
+              "ref": refPanel[2],
+              "index": currentIndex.value,
+              "innerIndex": 1,
+              "range": true
+            }, timeProps, {
+              "showHeader": true
+            }), null)]);
+          case "week":
+            return vue.createVNode(vue.Fragment, null, [!disabled.value[0] ? vue.createVNode(datePickerWeek["default"], vue.mergeProps({
+              "ref": refPanel[0],
+              "index": 0
+            }, rangeProps, {
+              "disabled": disabled.value[0]
+            }), null) : null, !disabled.value[1] ? vue.createVNode(datePickerWeek["default"], vue.mergeProps({
+              "ref": refPanel[1],
+              "index": 1
+            }, rangeProps, {
+              "disabled": disabled.value[1]
+            }), null) : null]);
+          case "year":
+          case "month":
+          case "quarter":
+            return vue.createVNode(vue.Fragment, null, [vue.createVNode(datePickerYear["default"], vue.mergeProps({
+              "ref": refPanel[0],
+              "index": 0
+            }, rangeProps, {
+              "disabled": disabled.value[0]
+            }), null), arrowElement.value, vue.createVNode(datePickerYear["default"], vue.mergeProps({
+              "ref": refPanel[1],
+              "index": 1
+            }, rangeProps, {
+              "disabled": disabled.value[1]
+            }), null)]);
+          default:
+            return vue.createVNode(vue.Fragment, null, [!disabled.value[0] ? vue.createVNode(datePickerDate["default"], vue.mergeProps({
+              "ref": refPanel[0],
+              "index": 0
+            }, rangeProps, {
+              "disabled": disabled.value[0]
+            }), null) : null, !disabled.value[1] ? vue.createVNode(datePickerDate["default"], vue.mergeProps({
+              "ref": refPanel[1],
+              "index": 1
+            }, rangeProps, {
+              "disabled": disabled.value[1]
+            }), null) : null]);
+        }
+      };
+      const footerElement = vue.computed(() => vue.createVNode("div", {
+        "class": [`${prefixCls.value}-footer`, {
+          [`only-year`]: props.type == "year" && !props.range
+        }]
+      }, [vue.createVNode(vue.resolveComponent("t-button"), {
+        "type": "primary",
+        "size": "xs",
+        "ghost": true,
+        "onClick": handleClickNow,
+        "disabled": props.readonly || disabled.value[0] && disabled.value[1]
+      }, {
+        default: () => [vue.createTextVNode("\u6B64\u65F6")]
+      }), vue.withDirectives(vue.createVNode(vue.resolveComponent("t-button"), {
+        "type": "primary",
+        "size": "xs",
+        "onClick": handleConfirm
+      }, {
+        default: () => [vue.createTextVNode("\u786E\u5B9A")]
+      }), [[vue.vShow, props.type != "year" || props.range]])]));
+      const showFooter = vue.computed(() => {
+        if (props.showFooter)
+          return true;
+        if (!props.range) {
+          return ["time", "datetime", "month", "quarter", "year"].includes(props.type);
+        } else {
+          return ["time", "datetime", "year", "month", "quarter"].includes(props.type);
+        }
+      });
+      const contentElement = vue.createVNode("div", contentProps, [vue.createVNode("div", {
+        "class": `${prefixCls.value}-panels`
+      }, [props.range ? rangePanelElement() : singlePanelElement.value]), showFooter.value ? footerElement.value : null]);
+      const getControlProps = (index2) => {
+        return __spreadProps(__spreadValues({}, attrs), {
+          value: dayjs.isDayjs(currentValue.value[index2]) ? currentValue.value[index2].format(format.value) : null,
+          placeholder: placeholder.value[index2],
+          disabled: disabled.value[index2],
+          readonly: props.readonly,
+          onFocus: () => handleFocus(index2),
+          onBlur: () => handleBlur(index2),
+          onChange: (event) => handleChange(event, index2),
+          onKeydown: (event) => handleKeydown(event, index2),
+          onInput: () => handleInput(),
+          class: {
+            [`is-focus`]: isFocus.value && currentIndex.value == index2,
+            [`range-focus`]: props.range
+          }
+        });
+      };
+      const inputElement = props.range ? vue.createVNode("div", {
+        "class": `${prefixCls.value}-input-container`
+      }, [vue.createVNode("input", vue.mergeProps({
+        "ref": refInput[0]
+      }, getControlProps(0)), null), vue.createVNode("div", {
+        "class": "is-arrow"
+      }, [vue.createVNode(vue.resolveComponent("t-icon"), null, {
+        default: () => [vue.createVNode(ArrowForward["default"], null, null)]
+      })]), vue.createVNode("input", vue.mergeProps({
+        "ref": refInput[1]
+      }, getControlProps(1)), null)]) : vue.createVNode("input", vue.mergeProps({
+        "ref": refInput[0]
+      }, getControlProps(0)), null);
+      const suffixElement = vue.createVNode("span", {
+        "class": `${prefixCls.value}-suffix`
+      }, [showClear.value && !props.readonly && (currentValue.value[0] || currentValue.value[1]) ? vue.createVNode(vue.resolveComponent("t-icon"), {
+        "class": "is-action",
+        "onClick": handleClearClick
+      }, {
+        default: () => [vue.createVNode(CloseCircleOutline["default"], null, null)]
+      }) : slots.suffix ? (_a2 = slots.suffix) == null ? void 0 : _a2.call(slots) : props.suffix ? props.suffix : vue.createVNode(vue.resolveComponent("t-icon"), null, {
+        default: () => [props.type == "time" ? vue.createVNode(TimeOutline["default"], null, null) : vue.createVNode(CalendarClearOutline["default"], null, null)]
+      })]);
+      const triggerProps = {};
+      if ((!disabled.value[0] || !disabled.value[1]) && props.clearable) {
+        triggerProps["onMouseenter"] = () => {
+          showClear.value = true;
+        };
+        triggerProps["onMouseleave"] = () => {
+          showClear.value = false;
+        };
+      }
+      const triggerElement = vue.withDirectives(vue.createVNode("div", vue.mergeProps({
+        "ref": refTrigger,
+        "class": triggerClasses.value
+      }, triggerProps), [prefixElement, inputElement, suffixElement]), [[vue.resolveDirective("clickOutside"), handleClickOutside]]);
+      const inSlots = {
+        trigger: () => triggerElement,
+        content: () => contentElement
+      };
+      const popperProps = {
+        placement: props.placement,
+        trigger: "click",
+        transitionName: "slide-up",
+        sameWidth: false,
+        isToggle: false,
+        disabled: disabled.value[0] && disabled.value[1] || props.readonly,
+        offset: 6,
+        showArrow: false,
+        minWidth: "60px",
+        maxWidth: "1000px"
+      };
+      if (!disabled.value[0] || !disabled.value[1])
+        popperProps[`onClick`] = handleClick;
+      return vue.createVNode(vue.Fragment, null, [vue.createVNode(vue.resolveComponent("t-popper"), vue.mergeProps({
+        "ref": refPopper,
+        "class": props.type == "time" ? "is-time" : "is-date",
+        "visible": visible.value,
+        "onUpdate:visible": ($event) => visible.value = $event
+      }, popperProps), inSlots)]);
+    };
+    return {
+      render
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+exports["default"] = DatePicker;