@opentiny/vue-renderless 3.9.3 → 3.10.0

package/date-panel/index.js

@@ -26,18 +26,19 @@ import { on, off } from "../common/deps/dom";
 import { getDateWithNewTimezone, getLocalTimezone } from "../common/date";
 import { fillChar } from "../common/string";
 const getYearLabel = ({ state, t }) => () => {
-  const yearTranslation = t(DATEPICKER.YearI18n);
-  if (state.currentView === DATEPICKER.Year) {
-    const startYear = Math.floor(state.year / 10) * 10;
+  const { YearI18n, Year, PanelYearNum } = DATEPICKER;
+  const yearTranslation = t(YearI18n);
+  if (state.currentView === Year) {
+    const startYear = state.startYear;
     if (yearTranslation) {
-      return startYear + " " + yearTranslation + " - " + (startYear + 9) + " " + yearTranslation;
+      return startYear + " " + yearTranslation + " - " + (startYear + PanelYearNum - 1) + " " + yearTranslation;
     }
-    return startYear + " - " + (startYear + 9);
+    return startYear + " - " + (startYear + PanelYearNum - 1);
   }
   return state.year + " " + yearTranslation;
 };
 const watchValue = ({ api, state }) => (value) => {
-  if (state.selectionMode === DATEPICKER.Dates && state.value) {
+  if ([DATEPICKER.Dates, DATEPICKER.Years].includes(state.selectionMode) && state.value) {
     return;
   }
   if (isDate(value)) {
@@ -48,7 +49,7 @@ const watchValue = ({ api, state }) => (value) => {
 };
 const watchDefaultValue = ({ state }) => (value) => {
   if (!isDate(state.value)) {
-    state.date = value ? new Date(value) : /* @__PURE__ */ new Date();
+    state.date = value ? new Date(value) : new Date();
   }
 };
 const watchTimePickerVisible = ({ nextTick, vm }) => (value) => {
@@ -65,32 +66,32 @@ const watchSelectionMode = ({ state }) => (value) => {
     }
   } else if (value === DATEPICKER.Dates) {
     state.currentView = DATEPICKER.Date;
-  } else if (value === DATEPICKER.Year) {
+  } else if ([DATEPICKER.Year, DATEPICKER.Years, DATEPICKER.YearRange].includes(value)) {
     state.currentView = DATEPICKER.Year;
   }
 };
-const proxyTimePickerDataProperties = ({ refs, state, watch }) => () => {
+const proxyTimePickerDataProperties = ({ vm, state, watch }) => () => {
   const format = (timeFormat) => {
-    if (refs.timepicker) {
-      refs.timepicker.state.format = timeFormat;
+    if (vm.$refs.timepicker) {
+      vm.$refs.timepicker.state.format = timeFormat;
     }
   };
   const value = (value2) => {
-    if (refs.timepicker) {
-      refs.timepicker.state.value = null;
+    if (vm.$refs.timepicker) {
+      vm.$refs.timepicker.state.value = null;
       if (value2) {
-        refs.timepicker.state.value = value2;
+        vm.$refs.timepicker.state.value = value2;
       }
     }
   };
   const date = (date2) => {
-    if (refs.timepicker) {
-      refs.timepicker.state.date = date2;
+    if (vm.$refs.timepicker) {
+      vm.$refs.timepicker.state.date = date2;
     }
   };
   const selectableRange = (selectableRange2) => {
-    if (refs.timepicker) {
-      refs.timepicker.state.selectableRange = selectableRange2;
+    if (vm.$refs.timepicker) {
+      vm.$refs.timepicker.state.selectableRange = selectableRange2;
     }
   };
   watch(() => state.value, value);
@@ -123,14 +124,14 @@ const cusPrevMonth = ({ state }) => () => state.date = prevMonth(state.date);
 const cusNextMonth = ({ state }) => () => state.date = nextMonth(state.date);
 const cusPrevYear = ({ state }) => () => {
   if (state.currentView === DATEPICKER.Year) {
-    state.date = prevYear(state.date, 10);
+    state.startYear = state.startYear - DATEPICKER.PanelYearNum;
   } else {
     state.date = prevYear(state.date);
   }
 };
 const cusNextYear = ({ state }) => () => {
   if (state.currentView === DATEPICKER.Year) {
-    state.date = nextYear(state.date, 10);
+    state.startYear = state.startYear + DATEPICKER.PanelYearNum;
   } else {
     state.date = nextYear(state.date);
   }
@@ -186,12 +187,15 @@ const handleDatePick = ({ api, state, t }) => (value) => {
     api.cusEmit(value, true);
   }
 };
-const handleYearPick = ({ api, state }) => (year) => {
+const handleYearPick = ({ api, state }) => (value) => {
   if (state.selectionMode === DATEPICKER.Year) {
-    state.date = modifyDate(state.date, year, 0, 1);
+    state.date = modifyDate(state.date, value, 0, 2);
     api.cusEmit(state.date);
+  } else if ([DATEPICKER.Years].includes(state.selectionMode)) {
+    state.date = value.map((year) => new Date(year, 0, 2));
+    api.cusEmit(state.date, state.selectionMode === DATEPICKER.YearRange ? value.length < 2 : true);
   } else {
-    state.date = changeYearMonthAndClampDate(state.date, year, state.month);
+    state.date = changeYearMonthAndClampDate(state.date, value, state.month);
     state.currentView = DATEPICKER.Month;
   }
 };
@@ -202,7 +206,7 @@ const dateToLocaleStringForIE = (timezone, value) => {
   return new Date(offsetTime);
 };
 const changeToNow = ({ api, state }) => () => {
-  const now = /* @__PURE__ */ new Date();
+  const now = new Date();
   const timezone = state.timezone;
   const isServiceTimezone = timezone.isServiceTimezone;
   let disabledDate = !state.disabledDate;
@@ -216,7 +220,7 @@ const changeToNow = ({ api, state }) => () => {
   if (disabledDate && api.checkDateWithinRange(now)) {
     if (!isServiceTimezone) {
       if (state.showTimezone && state.selectedTz) {
-        state.date = dateToLocaleStringForIE(state.selectedTz.offset, state.date);
+        state.date = dateToLocaleStringForIE(state.selectedTz.offset, now);
       } else {
         state.date = now;
       }
@@ -226,7 +230,7 @@ const changeToNow = ({ api, state }) => () => {
   }
 };
 const confirm = ({ api, state, t }) => () => {
-  if (state.selectionMode === DATEPICKER.Dates) {
+  if ([DATEPICKER.Dates, DATEPICKER.Years].includes(state.selectionMode)) {
     api.cusEmit(state.value);
   } else {
     let value = state.value ? state.value : modifyWithTimeString(api.getDefaultValue(), state.defaultTime, t);
@@ -242,7 +246,7 @@ const confirm = ({ api, state, t }) => () => {
 const resetView = ({ state }) => () => {
   if (state.selectionMode === DATEPICKER.Month) {
     state.currentView = DATEPICKER.Month;
-  } else if (state.selectionMode === DATEPICKER.Year) {
+  } else if ([DATEPICKER.Year, DATEPICKER.Years, DATEPICKER.YearRange].includes(state.selectionMode)) {
     state.currentView = DATEPICKER.Year;
   } else {
     state.currentView = DATEPICKER.Date;
@@ -297,13 +301,13 @@ const handleKeyControl = ({ state, emit }) => (keyCode) => {
     }
   }
 };
-const handleVisibleTimeChange = ({ api, refs, state, t }) => (value) => {
+const handleVisibleTimeChange = ({ api, vm, state, t }) => (value) => {
   const time = parseDate(value, state.timeFormat, t);
   if (time && api.checkDateWithinRange(time)) {
     state.date = modifyDate(time, state.year, state.month, state.monthDate);
     state.userInputTime = null;
-    if (refs.timepicker) {
-      refs.timepicker.state.value = state.date;
+    if (vm.$refs.timepicker) {
+      vm.$refs.timepicker.state.value = state.date;
     }
     state.timePickerVisible = false;
     api.cusEmit(state.date, true);
@@ -322,7 +326,7 @@ const handleVisibleDateChange = ({ api, state, t }) => (value) => {
   }
 };
 const isValidValue = ({ api, state }) => (value) => value && !isNaN(value) && (typeof state.disabledDate === "function" ? !state.disabledDate(value) : true) && api.checkDateWithinRange(value);
-const getDefaultValue = (state) => () => state.defaultValue ? new Date(state.defaultValue) : /* @__PURE__ */ new Date();
+const getDefaultValue = (state) => () => state.defaultValue ? new Date(state.defaultValue) : new Date();
 const checkDateWithinRange = ({ state }) => (date) => state.selectableRange.length > 0 ? timeWithinRange(date, state.selectableRange, state.format || "HH:mm:ss") : true;
 const selectTz = ({ emit, state }) => (tz) => {
   if (state.timezone.isServiceTimezone) {

package/date-panel/vue.js

@@ -75,7 +75,7 @@ const api = [
 const initState = ({ reactive, computed, api: api2, i18n }) => {
   const state = reactive({
     popperClass: "",
-    date: /* @__PURE__ */ new Date(),
+    date: new Date(),
     value: "",
     defaultValue: null,
     defaultTime: null,
@@ -101,12 +101,12 @@ const initState = ({ reactive, computed, api: api2, i18n }) => {
     tz: "",
     selectedTz: null,
     animationName: "",
-    startYear: Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 10) * 10,
-    year: computed(() => state.date.getFullYear()),
-    month: computed(() => state.date.getMonth()),
+    startYear: Math.floor(new Date().getFullYear() / 10) * 10,
+    year: computed(() => !Array.isArray(state.date) && state.date.getFullYear()),
+    month: computed(() => !Array.isArray(state.date) && state.date.getMonth()),
     week: computed(() => getWeekNumber(state.date)),
     monthDate: computed(() => state.date.getDate()),
-    footerVisible: computed(() => state.showTime || state.selectionMode === DATEPICKER.Dates),
+    footerVisible: computed(() => state.showTime || [DATEPICKER.Dates, DATEPICKER.Years].includes(state.selectionMode)),
     visibleTime: computed(() => api2.computerVisibleTime()),
     visibleDate: computed(() => api2.computerVisibleDate()),
     yearLabel: computed(() => api2.getYearLabel()),
@@ -114,7 +114,7 @@ const initState = ({ reactive, computed, api: api2, i18n }) => {
     dateFormat: computed(() => state.format ? extractDateFormat(state.format.replace(state.timefmt, "")) : DATE.Date),
     lang: computed(() => i18n ? i18n.locale.replace(/_/g, "-") : "zh-CN"),
     isShowTz: computed(() => state.showTimezone && state.showTime),
-    isShowFooter: computed(() => state.footerVisible && state.currentView === "date")
+    isShowFooter: computed(() => state.footerVisible && [DATEPICKER.Date, DATEPICKER.Year].includes(state.currentView))
   });
   state.needChangeTimezoneData = true;
   return state;
@@ -146,7 +146,7 @@ const initWatch = ({ watch, state, api: api2, nextTick }) => {
   );
   watch(() => state.visible, api2.watchVisible);
 };
-const initApi = ({ api: api2, state, t, emit, nextTick, vm, refs, watch }) => {
+const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch }) => {
   Object.assign(api2, {
     t,
     state,
@@ -171,7 +171,7 @@ const initApi = ({ api: api2, state, t, emit, nextTick, vm, refs, watch }) => {
     watchTimePickerVisible: watchTimePickerVisible({ nextTick, vm }),
     checkDateWithinRange: checkDateWithinRange({ state }),
     watchSelectionMode: watchSelectionMode({ state }),
-    proxyTimePickerDataProperties: proxyTimePickerDataProperties({ refs, state, watch }),
+    proxyTimePickerDataProperties: proxyTimePickerDataProperties({ vm, state, watch }),
     handleKeyControl: handleKeyControl({ state, emit }),
     doPick: doPick(emit),
     searchTz: searchTz({ api: api2, state }),
@@ -186,20 +186,20 @@ const initApi = ({ api: api2, state, t, emit, nextTick, vm, refs, watch }) => {
     handleMonthPick: handleMonthPick({ api: api2, state }),
     handleVisibleDateChange: handleVisibleDateChange({ api: api2, state, t }),
     handleTimePick: handleTimePick({ api: api2, state, t }),
-    handleVisibleTimeChange: handleVisibleTimeChange({ api: api2, refs, state, t }),
     handleYearPick: handleYearPick({ api: api2, state }),
     handleDatePick: handleDatePick({ api: api2, state, t }),
-    handleShortcutClick: handleShortcutClick(api2),
     computerVisibleTime: computerVisibleTime({ state, t }),
+    handleShortcutClick: handleShortcutClick(api2),
     computerVisibleDate: computerVisibleDate({ state, t }),
+    handleVisibleTimeChange: handleVisibleTimeChange({ api: api2, vm, state, t }),
     computerTimeFormat: computerTimeFormat({ state })
   });
 };
-const renderless = (props, { computed, reactive, watch, nextTick }, { t, refs, emit: $emit, vm, i18n }) => {
+const renderless = (props, { computed, reactive, watch, nextTick }, { t, emit: $emit, vm, i18n }) => {
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
   const state = initState({ reactive, computed, api: api2, i18n });
-  initApi({ api: api2, state, t, emit, nextTick, vm, refs, watch });
+  initApi({ api: api2, state, t, emit, nextTick, vm, watch });
   initWatch({ watch, state, api: api2, nextTick });
   return api2;
 };

package/date-picker/index.js

@@ -98,7 +98,11 @@ const padZero = (num, targetLength = 2) => {
 const updateColumnValue = ({ constants, nextTick, props, refs, state }) => () => {
   const value = state.innerValue;
   const { formatter } = props;
-  let values = [formatter("year", `${value.getFullYear()}`), formatter("month", padZero(value.getMonth() + 1)), formatter("day", padZero(value.getDate()))];
+  let values = [
+    formatter("year", `${value.getFullYear()}`),
+    formatter("month", padZero(value.getMonth() + 1)),
+    formatter("day", padZero(value.getDate()))
+  ];
   if (props.type === constants.DateTime) {
     values.push(formatter("hour", padZero(value.getHours())), formatter("minute", padZero(value.getMinutes())));
   }
@@ -156,7 +160,7 @@ function times(n, iteratee) {
   }
   return result;
 }
-const getOrigiCol = (state) => () => state.ranges.map(({ type, range: rangeArr }) => {
+const getOriginColumns = (state) => () => state.ranges.map(({ type, range: rangeArr }) => {
   let values = times(rangeArr[1] - rangeArr[0] + 1, (index) => {
     const value = padZero(rangeArr[0] + index);
     return value;
@@ -212,7 +216,7 @@ const hookMounted = ({ constants, parent, refs, nextTick }) => () => {
     parent.$emit(constants.HookMounted, refs.refrence.$el);
   });
 };
-const showPickerAndlockSrcoll = ({ constants, state }) => () => {
+const showPickerAndLockScroll = ({ constants, state }) => () => {
   state.visible = true;
   document.body.style.overflow = constants.Hidden;
   state.isReadonly = true;
@@ -228,7 +232,7 @@ export {
   getColumns,
   getDisplayValue,
   getMonthEndDay,
-  getOrigiCol,
+  getOriginColumns,
   getRanges,
   getTrueValue,
   hookMounted,
@@ -236,7 +240,7 @@ export {
   onChange,
   onConfirm,
   padZero,
-  showPickerAndlockSrcoll,
+  showPickerAndLockScroll,
   times,
   updateColumnValue,
   updateInnerValue

package/date-picker/vue.js

@@ -2,14 +2,14 @@ import "../chunk-PKUHTIDK.js";
 import {
   getBoundary,
   clearDisplayValue,
-  showPickerAndlockSrcoll,
+  showPickerAndLockScroll,
   hookMounted,
   getMonthEndDay,
   getDisplayValue,
   getRanges,
   onConfirm,
   onCancel,
-  getOrigiCol,
+  getOriginColumns,
   getColumns,
   updateInnerValue,
   formatValue,
@@ -17,7 +17,15 @@ import {
   updateColumnValue
 } from "./index";
 import { DATE } from "../common";
-const api = ["state", "clearDisplayValue", "showPickerAndlockSrcoll", "hookMounted", "onConfirm", "onCancel", "onChange"];
+const api = [
+  "state",
+  "clearDisplayValue",
+  "showPickerAndLockScroll",
+  "hookMounted",
+  "onConfirm",
+  "onCancel",
+  "onChange"
+];
 const setWatchFn = ({ api: api2, watch, props, state, emit }) => {
   watch(
     () => props.minDate,
@@ -68,13 +76,17 @@ const setWatchFn = ({ api: api2, watch, props, state, emit }) => {
     }
   );
 };
-const renderless = (props, context, { computed, onMounted, reactive, watch }, { constants, emit, nextTick, refs, parent }) => {
-  const api2 = { formatValue: formatValue(props), getMonthEndDay: getMonthEndDay(constants), hookMounted: hookMounted({ constants, parent, refs, nextTick }) };
+const renderless = (props, { computed, onMounted, reactive, watch }, { constants, emit, nextTick, refs, parent }) => {
+  const api2 = {
+    formatValue: formatValue(props),
+    getMonthEndDay: getMonthEndDay(constants),
+    hookMounted: hookMounted({ constants, parent, refs, nextTick })
+  };
   const state = reactive({
     visible: false,
     innerValue: formatValue(props)(props.modelValue),
     ranges: computed(() => api2.getRanges()),
-    originColumns: computed(() => api2.getOrigiCol()),
+    originColumns: computed(() => api2.getOriginColumns()),
     columns: computed(() => api2.getColumns()),
     displayValue: "",
     isReadonly: false,
@@ -82,12 +94,12 @@ const renderless = (props, context, { computed, onMounted, reactive, watch }, {
   });
   Object.assign(api2, {
     state,
-    getOrigiCol: getOrigiCol(state),
+    getOriginColumns: getOriginColumns(state),
     onCancel: onCancel({ emit, state }),
     getColumns: getColumns({ props, state }),
     clearDisplayValue: clearDisplayValue(state),
     getDisplayValue: getDisplayValue({ constants, DATE, props, state }),
-    showPickerAndlockSrcoll: showPickerAndlockSrcoll({ constants, state }),
+    showPickerAndLockScroll: showPickerAndLockScroll({ constants, state }),
     updateColumnValue: updateColumnValue({ constants, nextTick, props, refs, state })
   });
   api2.getBoundary = getBoundary({ api: api2, constants, props });

package/date-picker-mobile/index.js

@@ -11,7 +11,7 @@ const isSameDay = (day1, day2) => {
   return theDay1.getFullYear() === theDay2.getFullYear() && theDay1.getMonth() === theDay2.getMonth() && theDay1.getDate() === theDay2.getDate();
 };
 const getCurrentDate = () => (dateValue) => {
-  const today = /* @__PURE__ */ new Date();
+  const today = new Date();
   const theDate = new Date(dateValue);
   const year = theDate.getFullYear();
   const month = theDate.getMonth() + 1;
@@ -53,7 +53,7 @@ const loadingDate = ({ state, api }) => (direction) => {
   }, 300);
 };
 const initPanel = ({ state, api }) => (dateValue, direction, yearNum = 1) => {
-  const currentDate = dateValue || (Array.isArray(state.date) ? state.date[1] : state.date) || /* @__PURE__ */ new Date();
+  const currentDate = dateValue || (Array.isArray(state.date) ? state.date[1] : state.date) || new Date();
   let month = currentDate.getMonth() + 1;
   let year = direction === "top" ? currentDate.getFullYear() - 1 : currentDate.getFullYear();
   if (yearNum === 1 && !direction) {
@@ -130,7 +130,7 @@ const watchModelValue = ({ props, state }) => () => {
     state.date = modelValue && modelValue.length ? modelValue.map((date) => new Date(date)) : [];
   }
   if (["datetime", "date"].includes(type)) {
-    state.date = modelValue ? new Date(modelValue) : /* @__PURE__ */ new Date();
+    state.date = modelValue ? new Date(modelValue) : new Date();
   }
   if (["datetimerange", "datetime"].includes(type)) {
     const length = type === "datetime" ? 1 : 2;

package/date-range/index.js

@@ -12,13 +12,13 @@ import {
   prevMonth,
   modifyWithTimeString
 } from "../common/deps/date-util";
-const calcDefaultValue = (defaultValue) => {
-  if (Array.isArray(defaultValue)) {
-    return [new Date(defaultValue[0]), new Date(defaultValue[1])];
-  } else if (defaultValue) {
-    return [new Date(defaultValue), nextDate(new Date(defaultValue), 1)];
+const calcDefaultValue = (defaultVal) => {
+  if (Array.isArray(defaultVal)) {
+    return [new Date(defaultVal[0]), new Date(defaultVal[1])];
+  } else if (defaultVal) {
+    return [new Date(defaultVal), nextDate(new Date(defaultVal), 1)];
   }
-  return [/* @__PURE__ */ new Date(), nextDate(/* @__PURE__ */ new Date(), 1)];
+  return [new Date(), nextDate(new Date(), 1)];
 };
 const getMinVisibleDate = ({ state, t }) => () => {
   if (state.dateUserInput.min !== null) {
@@ -70,7 +70,9 @@ const watchMinDate = ({ state, t, vm }) => (value) => {
   }
   if (state.maxDate && state.maxDate < state.minDate) {
     const format = "HH:mm:ss";
-    minTimePicker.state.selectableRange = [[parseDate(formatDate(state.minDate, format, t), format, t), parseDate("23:59:59", format, t)]];
+    minTimePicker.state.selectableRange = [
+      [parseDate(formatDate(state.minDate, format, t), format, t), parseDate("23:59:59", format, t)]
+    ];
   }
   if (value) {
     minTimePicker.state.value = value;
@@ -154,13 +156,23 @@ const handleDateInput = ({ state, t }) => (value, type) => {
       return;
     }
     if (type === "min") {
-      state.minDate = modifyDate(state.minDate || /* @__PURE__ */ new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+      state.minDate = modifyDate(
+        state.minDate || new Date(),
+        parsedValue.getFullYear(),
+        parsedValue.getMonth(),
+        parsedValue.getDate()
+      );
       state.leftDate = new Date(parsedValue);
       if (!state.unlinkPanels) {
         state.rightDate = nextMonth(state.leftDate);
       }
     } else {
-      state.maxDate = modifyDate(state.maxDate || /* @__PURE__ */ new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+      state.maxDate = modifyDate(
+        state.maxDate || new Date(),
+        parsedValue.getFullYear(),
+        parsedValue.getMonth(),
+        parsedValue.getDate()
+      );
       state.rightDate = new Date(parsedValue);
       if (!state.unlinkPanels) {
         state.leftDate = prevMonth(parsedValue);
@@ -172,12 +184,22 @@ const handleDateChange = ({ state, t }) => (value, type) => {
   const parsedValue = parseDate(value, state.dateFormat, t);
   if (parsedValue) {
     if (type === "min") {
-      state.minDate = modifyDate(state.minDate || /* @__PURE__ */ new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+      state.minDate = modifyDate(
+        state.minDate || new Date(),
+        parsedValue.getFullYear(),
+        parsedValue.getMonth(),
+        parsedValue.getDate()
+      );
       if (state.minDate > state.maxDate) {
         state.maxDate = state.minDate;
       }
     } else {
-      state.maxDate = modifyDate(state.maxDate || /* @__PURE__ */ new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+      state.maxDate = modifyDate(
+        state.maxDate || new Date(),
+        parsedValue.getFullYear(),
+        parsedValue.getMonth(),
+        parsedValue.getDate()
+      );
       if (state.maxDate < state.minDate) {
         state.minDate = state.maxDate;
       }
@@ -192,9 +214,19 @@ const handleTimeInput = ({ state, t }) => (value, type) => {
   const parsedValue = parseDate(value, state.timeFormat, t);
   if (parsedValue) {
     if (type === "min") {
-      state.minDate = modifyTime(state.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+      state.minDate = modifyTime(
+        state.minDate,
+        parsedValue.getHours(),
+        parsedValue.getMinutes(),
+        parsedValue.getSeconds()
+      );
     } else {
-      state.maxDate = modifyTime(state.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+      state.maxDate = modifyTime(
+        state.maxDate,
+        parsedValue.getHours(),
+        parsedValue.getMinutes(),
+        parsedValue.getSeconds()
+      );
     }
   }
 };
@@ -202,14 +234,24 @@ const handleTimeChange = ({ state, t, vm }) => (value, type) => {
   const parsedValue = parseDate(value, state.timeFormat, t);
   if (parsedValue) {
     if (type === "min") {
-      state.minDate = modifyTime(state.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+      state.minDate = modifyTime(
+        state.minDate,
+        parsedValue.getHours(),
+        parsedValue.getMinutes(),
+        parsedValue.getSeconds()
+      );
       if (state.minDate > state.maxDate) {
         state.maxDate = state.minDate;
       }
       vm.$refs.minTimePicker.state.value = state.minDate;
       state.minTimePickerVisible = false;
     } else {
-      state.maxDate = modifyTime(state.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+      state.maxDate = modifyTime(
+        state.maxDate,
+        parsedValue.getHours(),
+        parsedValue.getMinutes(),
+        parsedValue.getSeconds()
+      );
       if (state.maxDate < state.minDate) {
         state.minDate = state.maxDate;
       }
@@ -220,8 +262,17 @@ const handleTimeChange = ({ state, t, vm }) => (value, type) => {
 };
 const handleRangePick = ({ api, state, t }) => (val, close = true) => {
   const defaultTime = state.defaultTime || [];
-  const minDate = modifyWithTimeString(val.minDate, defaultTime[0], t);
-  const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1], t);
+  let minDateVal = val.minDate;
+  let maxDateVal = val.maxDate;
+  if (state.singleSelect) {
+    Object.assign(state.rangeState, { selecting: false });
+    const effectDate = val.minDate || val.maxDate;
+    const rangeDate = state.shortcutType === "startFrom" ? state.maxRangeDate : state.minRangeDate;
+    minDateVal = rangeDate > effectDate ? effectDate : rangeDate;
+    maxDateVal = rangeDate > effectDate ? rangeDate : effectDate;
+  }
+  const minDate = modifyWithTimeString(minDateVal, defaultTime[0], t);
+  const maxDate = modifyWithTimeString(maxDateVal, defaultTime[1], t);
   if (state.maxDate === maxDate && state.minDate === minDate) {
     return;
   }
@@ -237,7 +288,20 @@ const handleRangePick = ({ api, state, t }) => (val, close = true) => {
   }
   api.handleConfirm();
 };
-const handleShortcutClick = (api) => (shortcut) => {
+const handleShortcutClick = (state, api) => (shortcut) => {
+  if (shortcut.type) {
+    state.singleSelect = true;
+    state.shortcutType = shortcut.type;
+    state.shortcutText = shortcut.text;
+    if (shortcut.type === "startFrom" && shortcut.endDate && isDate(shortcut.endDate)) {
+      state.maxRangeDate = shortcut.endDate;
+    }
+    if (shortcut.type === "endAt" && shortcut.startDate && isDate(shortcut.startDate)) {
+      state.minRangeDate = shortcut.startDate;
+    }
+    state.value = [];
+    return;
+  }
   if (shortcut.onClick) {
     const picker = {
       $emit: (type, [start, end]) => {
@@ -251,7 +315,7 @@ const doPick = (emit) => (start, end) => {
   emit("pick", [start, end], false);
 };
 const handleMinTimePick = ({ state }) => (value, visible, first) => {
-  state.minDate = state.minDate || /* @__PURE__ */ new Date();
+  state.minDate = state.minDate || new Date();
   if (value) {
     state.minDate = modifyTime(state.minDate, value.getHours(), value.getMinutes(), value.getSeconds());
   }
@@ -327,6 +391,13 @@ const setTimeFormat = ({ nextTick, vm, state }) => () => {
 const computerBtnDisabled = ({ state, api }) => () => !(state.minDate && state.maxDate && !state.selecting && api.isValidValue([state.minDate, state.maxDate]));
 const computerLabel = ({ state, t }) => (type) => `${state[type].getFullYear()} ${t("ui.datepicker.year")} ${t(`ui.datepicker.month${state[type].getMonth() + 1}`)}`;
 const computerEnableYearArrow = (state) => () => state.unlinkPanels && state.rightYear * 12 + state.rightMonth - (state.leftYear * 12 + state.leftMonth + 1) >= 12;
+const watchPickerVisible = ({ state, constants }) => (val) => {
+  if (!val) {
+    state.singleSelect = false;
+    state.minRangeDate = constants.startDate;
+    state.maxRangeDate = constants.endDate;
+  }
+};
 export {
   calcDefaultValue,
   computerBtnDisabled,
@@ -367,5 +438,6 @@ export {
   watchMaxTimePickerVisible,
   watchMinDate,
   watchMinTimePickerVisible,
+  watchPickerVisible,
   watchValue
 };