@blueking/date-picker 2.0.0-beta.21 → 2.0.0-beta.22

package/vue3/index.es.min.js

@@ -1,9 +1,6 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import dayjs from "dayjs";
 import { default as default2 } from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
@@ -107,8 +104,7 @@ Object.keys(langData).reduce(
 );
 const lang = getCookieByName("blueking_language") || "zh-cn";
 const t = (key) => {
-  if (lang !== "en")
-    return shortTimeUnitLangData[key] || key;
+  if (lang !== "en") return shortTimeUnitLangData[key] || key;
   return shortTimeUnitLangData[key] || timeUnitLangData[key] || naturalDateLangData[key] || langData[key] || key;
 };
 var DateMode = /* @__PURE__ */ ((DateMode2) => {
@@ -351,14 +347,10 @@ class DateRange {
   }
   get dateMode() {
     const [start, end] = this.dateValue;
-    if (typeof start === "number" || typeof end === "number")
-      return DateMode.Date;
-    if (dayjs.isDayjs(start) || dayjs.isDayjs(end))
-      return DateMode.Date;
-    if (dayjs(start).isValid() || dayjs(end).isValid())
-      return DateMode.Date;
-    if (start === NowConstant && futureDateRegexp.test(end))
-      return DateMode.FUTURE;
+    if (typeof start === "number" || typeof end === "number") return DateMode.Date;
+    if (dayjs.isDayjs(start) || dayjs.isDayjs(end)) return DateMode.Date;
+    if (dayjs(start).isValid() || dayjs(end).isValid()) return DateMode.Date;
+    if (start === NowConstant && futureDateRegexp.test(end)) return DateMode.FUTURE;
     if (end === NowConstant && recentDateRegexp.test(start) || start.includes("(") && end.includes("("))
       return DateMode.RECENT;
     if (naturalDateShortcutMap[this.dateValue.join("~")]) {
@@ -368,11 +360,9 @@ class DateRange {
       const [, startNum, startUnit, startDiffUnit] = start.match(commonDateRegexp) || [];
       const [, endNum, endUnit, endDiffUnit] = end.match(commonDateRegexp) || [];
       if (startDiffUnit) {
-        if (end === NowConstant)
-          return DateMode.NATURAL;
+        if (end === NowConstant) return DateMode.NATURAL;
         if (startNum && +endNum == -1) {
-          if (startUnit === startDiffUnit && endUnit === endDiffUnit && startUnit === endUnit)
-            return DateMode.NATURAL;
+          if (startUnit === startDiffUnit && endUnit === endDiffUnit && startUnit === endUnit) return DateMode.NATURAL;
         }
       }
     }
@@ -409,8 +399,7 @@ class DateRange {
     return dayjs.tz(((_a = this.startDate) == null ? void 0 : _a.valueOf()) || void 0, this.timezome).format(this.format);
   }
   dateDuration() {
-    if (!this.startDate || !this.endDate || !this.isValidate)
-      return;
+    if (!this.startDate || !this.endDate || !this.isValidate) return;
     let durations = this.endDate.diff(this.startDate);
     const dayDuration = 24 * 60 * 60 * 1e3;
     switch (this.dateMode) {
@@ -444,8 +433,7 @@ class DateRange {
     return durations;
   }
   isInValidDateRange(date) {
-    if (!this.startDate || !this.endDate)
-      return false;
+    if (!this.startDate || !this.endDate) return false;
     return (this.startDate.isSame(date.startDate, "ms") || this.startDate.isBefore(date.startDate)) && (this.endDate.isSame(date.endDate, "ms") || this.endDate.isAfter(date.endDate));
   }
   toDisplayString() {
@@ -595,8 +583,7 @@ class DateRange {
   updateDateValue(dateValue, timezome) {
     this.dateValue = dateValue;
     const [start, end] = dateValue;
-    if (timezome)
-      this.timezome = timezome;
+    if (timezome) this.timezome = timezome;
     this.startDate = start ? this.transformValue2Dayjs(start) : null;
     this.endDate = end ? this.transformValue2Dayjs(end, "end") : null;
   }
@@ -630,8 +617,7 @@ const transformValue2Dayjs = (val, type = "start", timezome) => {
   return date.isValid() ? dayjs.tz(date.valueOf(), timezome || dayjs.tz.guess()) : void 0;
 };
 const transformDateRange2Dayjs = (dateValue, timezome) => {
-  if (!Array.isArray(dateValue) || dateValue.length < 1)
-    return [];
+  if (!Array.isArray(dateValue) || dateValue.length < 1) return [];
   const [start, end] = dateValue || [];
   const startDate = transformValue2Dayjs(start, "start", timezome);
   const endDate = transformValue2Dayjs(end, "end", timezome);
@@ -2053,8 +2039,7 @@ const getTimezoneInfo = (searchIndex) => {
 const timezoneDetails = getTimezoneDetails();
 const getTimezoneInfoByValue = (value) => {
   return timezoneDetails.reduce((pre, group) => {
-    if ((pre == null ? void 0 : pre.label) === value)
-      return pre;
+    if ((pre == null ? void 0 : pre.label) === value) return pre;
     return group.options.find((option) => option.label === value);
   }, void 0);
 };
@@ -2062,17 +2047,16 @@ const DATE_PICKER_PROVIDER_KEY = Symbol("DATE_PICKER_PROVIDER_KEY");
 const useDatePickerProvider = (data) => {
   provide(DATE_PICKER_PROVIDER_KEY, data);
 };
-const useDatePickertInject = () => inject(DATE_PICKER_PROVIDER_KEY);
+const useDatePickerInject = () => inject(DATE_PICKER_PROVIDER_KEY);
 const useValidate = () => {
-  const { format, timezoneInfo, vildateTimeRange } = useDatePickertInject();
+  const { format, timezoneInfo, vildateTimeRange } = useDatePickerInject();
   const validDateRange = customRef((track) => {
     let date = new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
     return {
       get() {
         var _a;
         track();
-        if (((_a = vildateTimeRange.value) == null ? void 0 : _a.length) !== 2)
-          return void 0;
+        if (((_a = vildateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
         if (vildateTimeRange.value.some((v) => typeof v === "string" && v.includes("now")))
           return new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
         return date;
@@ -2083,20 +2067,17 @@ const useValidate = () => {
   });
   const validateDateValue = (validDate) => {
     var _a;
-    if (!(validDate == null ? void 0 : validDate.length))
-      return false;
+    if (!(validDate == null ? void 0 : validDate.length)) return false;
     return ((_a = validDateRange.value) == null ? void 0 : _a.isInValidDateRange(new DateRange(validDate, format.value, timezoneInfo.value.label))) ?? true;
   };
   const validateDateRange = (validDate) => {
     var _a;
-    if (!validDate.isValidate)
-      return false;
+    if (!validDate.isValidate) return false;
     return ((_a = validDateRange.value) == null ? void 0 : _a.isInValidDateRange(validDate)) ?? true;
   };
   const validateDayjs = (validDate) => {
     var _a;
-    if (!validDate.isValid())
-      return false;
+    if (!validDate.isValid()) return false;
     return ((_a = validDateRange.value) == null ? void 0 : _a.isInValidDateRange(
       new DateRange([validDate.startOf("d"), validDate.endOf("d")], format.value, timezoneInfo.value.label)
     )) ?? true;
@@ -2143,8 +2124,7 @@ const setStoreDateList = (val, storeKey2, type = "local") => {
   if (!Array.isArray(list)) {
     list = [];
   }
-  if (list.some((item) => item[0] === val[0] && item[1] === val[1]))
-    return;
+  if (list.some((item) => item[0] === val[0] && item[1] === val[1])) return;
   list.unshift(val);
   store.setItem(storeKey2, JSON.stringify(list.slice(0, 10)));
 };
@@ -2167,6 +2147,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       type: Boolean
     }
   },
+  emits: ["confirm", "update:modelValue"],
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$8, [
@@ -2195,12 +2176,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         }, 8, ["active"]),
         __props.showDeleteAll ? (openBlock(), createBlock(unref(PopConfirm), {
           key: 0,
+          "ext-cls": "__bk-date-picker-popover__ __bk-date-picker-popover-delete__",
           "cancel-text": unref(t)("取消"),
           "confirm-text": unref(t)("确定"),
           content: unref(t)("是否清空最近使用？"),
           trigger: "click",
           width: 189,
-          "ext-cls": "__bk-date-picker-popover__ __bk-date-picker-popover-delete__",
           onConfirm: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("confirm"))
         }, {
           default: withCtx(() => [
@@ -2233,9 +2214,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }, {
             default: withCtx(() => [
               createVNode(unref(Button), {
+                class: "common-submit",
                 disabled: _ctx.disabled,
                 outline: true,
-                class: "common-submit",
                 theme: "primary",
                 onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("submit"))
               }, {
@@ -2286,7 +2267,7 @@ const weekItemCount = 7;
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "date-panel",
   props: {
-    diableNow: { type: Boolean },
+    disableNow: { type: Boolean },
     format: { default: "YYYY-MM-DD HH:mm:ss" },
     isNow: { type: Boolean },
     minDate: {},
@@ -2299,7 +2280,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emits = __emit;
     const weekList = lang === "en" ? ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] : ["日", "一", "二", "三", "四", "五", "六"];
-    const panleDateList = shallowRef([]);
+    const panelDateList = shallowRef([]);
     const today = dayjs();
     const curPanelDate = shallowRef(props.modelValue || today);
     const { validateDayjs } = useValidate();
@@ -2311,7 +2292,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         for (let i = 0; i < panelRowCount * weekItemCount; i++) {
           list.push(firstDay.add(i, "day"));
         }
-        panleDateList.value = list;
+        panelDateList.value = list;
       },
       {
         immediate: true
@@ -2332,10 +2313,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     let timeout;
     const handleMouseDown = (e) => {
       e.preventDefault();
-      if (props.diableNow)
-        return;
-      if (timeout)
-        return;
+      if (props.disableNow) return;
+      if (timeout) return;
       emits("update:isNow", !props.isNow);
       timeout = setTimeout(() => {
         clearTimeout(timeout);
@@ -2358,8 +2337,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             },
             [
               createVNode(unref(Checkbox), {
+                disabled: _ctx.disableNow,
                 "model-value": _ctx.isNow,
-                disabled: _ctx.diableNow,
                 size: "small"
               }, {
                 default: withCtx(() => [
@@ -2367,7 +2346,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
                 /* STABLE */
-              }, 8, ["model-value", "disabled"])
+              }, 8, ["disabled", "model-value"])
             ],
             32
             /* NEED_HYDRATION */
@@ -2418,8 +2397,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                   return openBlock(), createElementBlock(
                     "li",
                     {
-                      key: index,
-                      class: "date-grid-item not-click"
+                      class: "date-grid-item not-click",
+                      key: index
                     },
                     toDisplayString(day),
                     1
@@ -2435,22 +2414,22 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               null,
               renderList(panelRowCount, (row) => {
                 return createElementVNode("ul", {
-                  key: row,
-                  class: "date-grid"
+                  class: "date-grid",
+                  key: row
                 }, [
                   (openBlock(true), createElementBlock(
                     Fragment,
                     null,
-                    renderList(panleDateList.value.slice((row - 1) * weekItemCount, (row - 1) * weekItemCount + weekItemCount), (date) => {
+                    renderList(panelDateList.value.slice((row - 1) * weekItemCount, (row - 1) * weekItemCount + weekItemCount), (date) => {
                       return openBlock(), createElementBlock("li", {
-                        key: date.unix(),
-                        class: normalizeClass([{
+                        class: normalizeClass(["date-grid-item", {
                           "is-last-month": date.isBefore(curPanelDate.value, "month"),
                           "is-next-month": date.isAfter(curPanelDate.value, "month"),
                           "is-today": date.isSame(unref(today), "day"),
                           "is-disabled": !unref(validateDayjs)(date) || _ctx.minDate && date.isBefore(_ctx.minDate, "day"),
                           "is-selected": props.modelValue && date.isSame(props.modelValue, "day")
-                        }, "date-grid-item"]),
+                        }]),
+                        key: date.unix(),
                         onClick: withModifiers(($event) => handleDateChange(date), ["prevent"])
                       }, toDisplayString(date.date()), 11, _hoisted_11$1);
                     }),
@@ -2475,11 +2454,11 @@ const _hoisted_3$4 = /* @__PURE__ */ createElementVNode(
   { class: "date-picker-icon" },
   [
     /* @__PURE__ */ createElementVNode("svg", {
-      class: "date-content-icon",
+      width: "14",
       height: "14",
+      class: "date-content-icon",
       version: "1.1",
       viewBox: "0 0 1024 1024",
-      width: "14",
       xmlns: "http://www.w3.org/2000/svg",
       "xmlns:xlink": "http://www.w3.org/1999/xlink"
     }, [
@@ -2528,7 +2507,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const endDate = shallowRef();
     const isStartNow = ref(false);
     const isEndNow = ref(false);
-    const { format, timezoneInfo } = useDatePickertInject();
+    const { format, timezoneInfo } = useDatePickerInject();
     const today = dayjs();
     const isValidate = ref(true);
     const { validMsg, validateDateValue } = useValidate();
@@ -2546,16 +2525,11 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     );
     const canConfirm = computed(() => {
-      if (!startDate.value || !endDate.value)
-        return false;
-      if (!startDate.value.isValid() || !endDate.value.isValid())
-        return false;
-      if (startDate.value.isSame(endDate.value, "ms"))
-        return false;
-      if (startDate.value.format(format.value) === endDate.value.format(format.value))
-        return false;
-      if (startDate.value.isAfter(endDate.value))
-        return false;
+      if (!startDate.value || !endDate.value) return false;
+      if (!startDate.value.isValid() || !endDate.value.isValid()) return false;
+      if (startDate.value.isSame(endDate.value, "ms")) return false;
+      if (startDate.value.format(format.value) === endDate.value.format(format.value)) return false;
+      if (startDate.value.isAfter(endDate.value)) return false;
       return true;
     });
     const handleInputEnter = async (_, type) => {
@@ -2567,10 +2541,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         const curNow = type === "start" ? isStartNow : isEndNow;
         const otherNow = type === "start" ? isEndNow : isStartNow;
         const formatValue = editDate == null ? void 0 : editDate.format(format.value);
-        if (val === formatValue)
-          return;
-        if (!val || val === NowConstant && curNow.value)
-          return;
+        if (val === formatValue) return;
+        if (!val || val === NowConstant && curNow.value) return;
         if (val === NowConstant && !curNow.value && !otherNow.value) {
           handleIsNowChange(type);
           return;
@@ -2673,23 +2645,20 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         const startValue = isStartNow.value ? NowConstant : startDate.value.tz(timezoneInfo.value.label, true).valueOf();
         const endValue = isEndNow.value ? NowConstant : endDate.value.tz(timezoneInfo.value.label, true).valueOf();
         isValidate.value = validateDateValue([startValue || "", endValue || ""]);
-        if (!isValidate.value)
-          return;
+        if (!isValidate.value) return;
         emits("change", [startValue || "", endValue || ""]);
       }
     };
     const handleClickoutsideStart = (e) => {
       var _a;
-      if (!showStartPanel.value)
-        return;
+      if (!showStartPanel.value) return;
       if (!((_a = document.querySelector(".__date-picker-popover-start__")) == null ? void 0 : _a.contains(e.target))) {
         hiddenStartPanel();
       }
     };
     const handleClickoutsideEnd = (e) => {
       var _a;
-      if (!showEndPanel.value)
-        return;
+      if (!showEndPanel.value) return;
       if (!((_a = document.querySelector(".__date-picker-popover-end__")) == null ? void 0 : _a.contains(e.target))) {
         hiddenEndPanel();
       }
@@ -2709,10 +2678,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             [
               _hoisted_3$4,
               createVNode(unref(Popover), {
+                "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-start__",
                 arrow: false,
                 "is-show": showStartPanel.value,
                 boundary: "parent",
-                "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-start__",
                 placement: "bottom-start",
                 theme: "light",
                 trigger: "manual"
@@ -2720,14 +2689,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 content: withCtx(() => [
                   createVNode(_sfc_main$7, {
                     key: "start",
-                    "diable-now": isEndNow.value,
+                    "disable-now": isEndNow.value,
                     format: unref(format),
                     "is-now": isStartNow.value,
                     "model-value": startDate.value,
                     title: unref(t)("开始时间"),
                     "onUpdate:isNow": _cache[2] || (_cache[2] = () => handleIsNowChange("start")),
                     "onUpdate:modelValue": handleStartTimeChange
-                  }, null, 8, ["diable-now", "format", "is-now", "model-value", "title"])
+                  }, null, 8, ["disable-now", "format", "is-now", "model-value", "title"])
                 ]),
                 default: withCtx(() => {
                   var _a2;
@@ -2735,9 +2704,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                     withDirectives(createElementVNode("input", {
                       ref_key: "startInput",
                       ref: startInput,
+                      class: "date-picker-start",
                       placeholder: unref(t)("开始时间"),
                       value: isStartNow.value ? unref(NowConstant) : (_a2 = startDate.value) == null ? void 0 : _a2.format(unref(format)),
-                      class: "date-picker-start",
                       spellcheck: "false",
                       onBlur: _cache[0] || (_cache[0] = (e) => handleInputEnter(e, "start")),
                       onClick: handleFocusStart,
@@ -2752,10 +2721,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               }, 8, ["is-show"]),
               _hoisted_5$3,
               createVNode(unref(Popover), {
+                "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-end__",
                 arrow: false,
                 "is-show": showEndPanel.value,
                 boundary: "parent",
-                "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-end__",
                 placement: "bottom-start",
                 theme: "light",
                 trigger: "manual"
@@ -2763,14 +2732,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 content: withCtx(() => [
                   createVNode(_sfc_main$7, {
                     key: "end",
-                    "diable-now": isStartNow.value,
+                    "disable-now": isStartNow.value,
                     format: unref(format),
                     "is-now": isEndNow.value,
                     "model-value": endDate.value,
                     title: unref(t)("结束时间"),
                     "onUpdate:isNow": _cache[5] || (_cache[5] = () => handleIsNowChange("end")),
                     "onUpdate:modelValue": _cache[6] || (_cache[6] = (date) => handleEndTimeChange(date.endOf("d")))
-                  }, null, 8, ["diable-now", "format", "is-now", "model-value", "title"])
+                  }, null, 8, ["disable-now", "format", "is-now", "model-value", "title"])
                 ]),
                 default: withCtx(() => {
                   var _a2;
@@ -2778,9 +2747,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                     withDirectives(createElementVNode("input", {
                       ref_key: "endInput",
                       ref: endInput,
+                      class: "date-picker-end",
                       placeholder: unref(t)("结束时间"),
                       value: isEndNow.value ? unref(NowConstant) : (_a2 = endDate.value) == null ? void 0 : _a2.format(unref(format)),
-                      class: "date-picker-end",
                       onBlur: _cache[3] || (_cache[3] = (e) => handleInputEnter(e, "end")),
                       onClick: handleFocusEnd,
                       onKeypress: _cache[4] || (_cache[4] = withKeys((e) => handleInputEnter(e, "end"), ["enter"]))
@@ -2821,8 +2790,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             /* TEXT */
           ),
           createVNode(unref(Popover), {
-            trigger: "click",
             "ext-cls": "__bk-date-picker-popover__",
+            trigger: "click",
             placement: "bottom",
             theme: "light"
           }, {
@@ -2886,8 +2855,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createVNode(unref(Button), {
                 class: "format-button",
-                text: "",
-                theme: "primary"
+                theme: "primary",
+                text: ""
               }, {
                 default: withCtx(() => [
                   createTextVNode(
@@ -2927,15 +2896,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const naturalSelectRef = ref();
     const naturalOptions = shallowRef(CommonNaturalOptions.slice());
     const naturalUnitValue = ref(naturalUnitOptions[0].id);
-    const canEditNautralId = ref("");
+    const canEditNaturalId = ref("");
     const inputValue = ref();
     const naturalValue = ref(naturalOptions.value[0]);
     const isValidate = ref(true);
     const { validMsg, validateDateValue } = useValidate();
     getStoreDateList(getStoreKey(), "session").forEach((item) => {
       const [start, end] = item;
-      if (dayjs.isDayjs(start) || dayjs.isDayjs(end))
-        return;
+      if (dayjs.isDayjs(start) || dayjs.isDayjs(end)) return;
       const date = new DateRange(item);
       const { startNum, startUnit } = date;
       const specialDate = naturalOptions.value.find((item2) => item2.id === start);
@@ -2953,13 +2921,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     watch(
       () => props.value,
       (date) => {
-        if (!date)
-          return;
-        if (date.dateMode !== DateMode.NATURAL)
-          return;
+        if (!date) return;
+        if (date.dateMode !== DateMode.NATURAL) return;
         const [start, end] = date.dateValue;
-        if (dayjs.isDayjs(start) || dayjs.isDayjs(end))
-          return;
+        if (dayjs.isDayjs(start) || dayjs.isDayjs(end)) return;
         const { startNum, startUnit } = date;
         naturalUnitValue.value = end === NowConstant ? NaturalUnit.NOW : NaturalUnit.ALL;
         const customDate = naturalOptions.value.find((item) => item.id === start && item.type === NaturalOptionType.custom);
@@ -2967,7 +2932,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           naturalValue.value = customDate;
           return;
         }
-        const specialDate = CommonNaturalOptions.find((item) => item.id === start && item.type === NaturalOptionType.default);
+        const specialDate = CommonNaturalOptions.find(
+          (item) => item.id === start && item.type === NaturalOptionType.default
+        );
         if (end !== NowConstant && start !== end && specialDate || !specialDate) {
           const name = `${`${t("前")} ${startNum} ${t(
             shortTimeUnitLangData[startUnit]
@@ -2994,8 +2961,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       if (naturalUnitValue.value === NaturalUnit.ALL) {
         const [, num, unit, dateUnit2] = value.match(naturalDateRegexp) || [];
         if (Math.abs(+num) > 1) {
-          if (Math.abs(+num) === 2 && unit === "d")
-            return [value, value];
+          if (Math.abs(+num) === 2 && unit === "d") return [value, value];
           return [value, `now-1${unit}/${dateUnit2}`];
         }
         return [value, value];
@@ -3006,7 +2972,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       var _a;
       if (item.type === NaturalOptionType.edit) {
         inputValue.value = 1;
-        canEditNautralId.value = item.id;
+        canEditNaturalId.value = item.id;
         setTimeout(() => {
           var _a2, _b, _c;
           (_c = (_b = (_a2 = inputRef.value) == null ? void 0 : _a2[0]) == null ? void 0 : _b.focus) == null ? void 0 : _c.call(_b);
@@ -3014,7 +2980,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         return;
       }
       naturalValue.value = item;
-      canEditNautralId.value = "";
+      canEditNaturalId.value = "";
       (_a = naturalSelectRef.value) == null ? void 0 : _a.hidePopover();
     };
     const handleUnitChange = (value) => {
@@ -3022,7 +2988,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
     const customNaturalOptions = (v, item) => {
       var _a, _b;
-      canEditNautralId.value = "";
+      canEditNaturalId.value = "";
       const value = `now-${+v}${item.unit}/${item.unit}`;
       const date = naturalOptions.value.find((item2) => item2.id === value);
       if (date) {
@@ -3039,17 +3005,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       (_b = naturalSelectRef.value) == null ? void 0 : _b.hidePopover();
     };
     const handleInputKeyPress = (e, v, item) => {
-      if (!v || +v < 1)
-        return;
-      if (e.key !== "Enter" || !canEditNautralId.value)
-        return;
+      if (!v || +v < 1) return;
+      if (e.key !== "Enter" || !canEditNaturalId.value) return;
       customNaturalOptions(Math.ceil(v), item);
     };
     const handleSubmit = () => {
       const value = getNaturalDateValue(naturalValue.value);
       isValidate.value = validateDateValue(value);
-      if (!isValidate.value)
-        return;
+      if (!isValidate.value) return;
       naturalOptions.value.filter((item) => item.type === NaturalOptionType.custom).forEach((item) => {
         setStoreDateList(getNaturalDateValue(item), getStoreKey(), "session");
       });
@@ -3071,6 +3034,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               createVNode(unref(Select), {
                 ref_key: "naturalSelectRef",
                 ref: naturalSelectRef,
+                class: "natural-date",
                 clearable: false,
                 "input-search": false,
                 "model-value": getNaturalOptionId(naturalValue.value),
@@ -3079,7 +3043,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 "popover-options": { boundary: "parent", extCls: "__bk-date-picker-popover__" },
                 prefix: unref(t)("自然日期"),
                 "search-placeholder": unref(t)("请输入"),
-                class: "natural-date",
                 filterable: "",
                 onClick: _cache[2] || (_cache[2] = ($event) => isValidate.value = true)
               }, {
@@ -3099,11 +3062,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                             onClick: _cache[1] || (_cache[1] = withModifiers(() => {
                             }, ["prevent", "stop"]))
                           }, [
-                            canEditNautralId.value === item.id ? (openBlock(), createBlock(unref(Input), {
+                            canEditNaturalId.value === item.id ? (openBlock(), createBlock(unref(Input), {
                               key: 0,
                               ref_for: true,
                               ref_key: "inputRef",
                               ref: inputRef,
+                              style: { "width": "150px" },
                               modelValue: inputValue.value,
                               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
                               clearable: false,
@@ -3115,7 +3079,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                               suffix: item.suffix,
                               autofocus: "true",
                               size: "small",
-                              style: { "width": "150px" },
                               type: "number",
                               onKeypress: (v, e) => handleInputKeyPress(e, v, item)
                             }, null, 8, ["modelValue", "placeholder", "prefix", "suffix", "onKeypress"])) : (openBlock(), createElementBlock("div", {
@@ -3137,10 +3100,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 /* STABLE */
               }, 8, ["model-value", "no-match-text", "prefix", "search-placeholder"]),
               createVNode(unref(Select), {
+                class: "natural-unit",
                 clearable: false,
                 "model-value": naturalUnitValue.value,
                 "popover-options": { boundary: "parent" },
-                class: "natural-unit",
                 onChange: handleUnitChange,
                 onClick: _cache[3] || (_cache[3] = ($event) => isValidate.value = true)
               }, {
@@ -3191,11 +3154,11 @@ const _hoisted_3$3 = /* @__PURE__ */ createElementVNode(
   { class: "specific-date-icon" },
   [
     /* @__PURE__ */ createElementVNode("svg", {
-      class: "date-content-icon",
+      width: "14",
       height: "14",
+      class: "date-content-icon",
       version: "1.1",
       viewBox: "0 0 1024 1024",
-      width: "14",
       xmlns: "http://www.w3.org/2000/svg",
       "xmlns:xlink": "http://www.w3.org/1999/xlink"
     }, [
@@ -3220,7 +3183,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { format } = useDatePickertInject();
+    const { format } = useDatePickerInject();
     const inputRef = ref();
     const specificInput = ref();
     const baselineSelectRef = ref();
@@ -3310,10 +3273,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       emits("update:modelValue", item.id);
     };
     const handleInputKeyPress = (e, v, item) => {
-      if (!v || +v < 1)
-        return;
-      if (e.key !== "Enter" || !canEditNautralId.value)
-        return;
+      if (!v || +v < 1) return;
+      if (e.key !== "Enter" || !canEditNautralId.value) return;
       customNaturalOptions(Math.ceil(v), item);
     };
     const customNaturalOptions = (v, item) => {
@@ -3379,19 +3340,19 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         createVNode(unref(Select), {
           ref_key: "baselineSelectRef",
           ref: baselineSelectRef,
-          clearable: false,
-          "input-search": false,
-          "no-match-text": unref(t)("无匹配数据"),
-          "popover-min-width": 130,
+          class: "baseline-picker-select",
           "popover-options": {
             boundary: "parent",
             extCls: "__bk-date-picker-popover__ __bk-date-picker-baseline-popover__"
           },
+          clearable: false,
+          "input-search": false,
+          "model-value": baselineValue.value,
+          "no-match-text": unref(t)("无匹配数据"),
+          "popover-min-width": 130,
           prefix: unref(t)("基于"),
           "search-placeholder": unref(t)("请输入"),
-          class: "baseline-picker-select",
-          filterable: "",
-          "model-value": baselineValue.value
+          filterable: ""
         }, {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(
@@ -3399,10 +3360,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               null,
               renderList(baselineOptions.value, (item) => {
                 return openBlock(), createBlock(unref(Select).Option, {
+                  style: { "overflow": "inherit" },
                   id: item.id,
                   key: item.id,
-                  name: item.name,
-                  style: { "overflow": "inherit" }
+                  name: item.name
                 }, {
                   default: withCtx(() => {
                     var _a;
@@ -3422,10 +3383,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                                 ref_for: true,
                                 ref_key: "specificInput",
                                 ref: specificInput,
-                                placeholder: unref(t)("具体时间"),
                                 class: "specific-date-input",
-                                spellcheck: "false",
+                                placeholder: unref(t)("具体时间"),
                                 value: (_a = specificDate.value) == null ? void 0 : _a.format(unref(format)),
+                                spellcheck: "false",
                                 onClick: handleInputFocus,
                                 onKeydown: withKeys(withModifiers(handleInputEnter, ["stop"]), ["enter"])
                               }, null, 40, _hoisted_4$3),
@@ -3433,8 +3394,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                                 key: "specific",
                                 class: "specific-date-panel",
                                 format: unref(format),
-                                "show-title": false,
                                 "model-value": specificDate.value,
+                                "show-title": false,
                                 onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                                 }, ["prevent", "stop"])),
                                 "onUpdate:modelValue": handleSpecificTimeChange
@@ -3446,6 +3407,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                               ref_for: true,
                               ref_key: "inputRef",
                               ref: inputRef,
+                              style: { "width": "174px" },
                               modelValue: inputValue.value,
                               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => inputValue.value = $event),
                               clearable: false,
@@ -3456,7 +3418,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                               suffix: item.suffix,
                               autofocus: "true",
                               size: "small",
-                              style: { "width": "174px" },
                               type: "number",
                               onKeypress: (v, e) => handleInputKeyPress(e, v, item)
                             }, null, 8, ["modelValue", "placeholder", "suffix", "onKeypress"]))
@@ -3481,7 +3442,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["no-match-text", "prefix", "search-placeholder", "model-value"])
+        }, 8, ["model-value", "no-match-text", "prefix", "search-placeholder"])
       ]);
     };
   }
@@ -3510,10 +3471,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     watch(
       () => props.value,
       (val) => {
-        if (!val)
-          return;
-        if (props.type !== val.dateMode)
-          return;
+        if (!val) return;
+        if (props.type !== val.dateMode) return;
         recentUnit.value = val.recentOrFuturedateUnit;
         dateValue.value = val.recentOrFuturedateNum || void 0;
         recentBaselineTime.value = val == null ? void 0 : val.startBaselineTime;
@@ -3523,14 +3482,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
     );
     const handleSubmit = () => {
-      if (!dateValue.value)
-        return;
+      if (!dateValue.value) return;
       const emitDate = props.type === DateMode.FUTURE ? [NowConstant, `${DateMode.FUTURE}${dateValue.value}${recentUnit.value}`] : [`${DateMode.RECENT}${dateValue.value}${recentUnit.value}`, NowConstant].map(
         (v) => recentBaselineTime.value && recentBaselineTime.value !== NowConstant ? v.replace(NowConstant, `(${recentBaselineTime.value})`) : v
       );
       isValidate.value = !!validateDateValue(emitDate);
-      if (!isValidate.value)
-        return;
+      if (!isValidate.value) return;
       if (props.type === DateMode.FUTURE) {
         emits("change", emitDate);
         return;
@@ -3556,24 +3513,24 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => recentBaselineTime.value = $event)
               }, null, 8, ["modelValue"])) : createCommentVNode("v-if", true),
               createVNode(unref(Input), {
+                class: "recent-input",
                 modelValue: dateValue.value,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => dateValue.value = $event),
                 min: 1,
                 placeholder: unref(t)("请输入"),
                 precision: 0,
                 prefix: _ctx.type === unref(DateMode).RECENT ? unref(t)("的最近") : unref(t)("未来"),
-                class: "recent-input",
                 type: "number",
                 onClick: _cache[2] || (_cache[2] = ($event) => isValidate.value = true)
               }, null, 8, ["modelValue", "placeholder", "prefix"]),
               createVNode(unref(Select), {
+                class: "recent-unit",
                 modelValue: recentUnit.value,
                 "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => recentUnit.value = $event),
                 clearable: false,
+                "popover-min-width": 130,
                 "popover-options": { boundary: "parent" },
-                class: "recent-unit",
                 filterable: "",
-                "popover-min-width": 130,
                 onClick: _cache[4] || (_cache[4] = ($event) => isValidate.value = true)
               }, {
                 default: withCtx(() => [
@@ -3641,6 +3598,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Select), {
+        class: "timezone-picker",
         clearable: false,
         "filter-option": handleSearch,
         "input-search": false,
@@ -3649,7 +3607,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         placeholder: unref(t)("请输入搜索（国家，城市，简称）"),
         "popover-options": { "ext-cls": "__bk-date-picker-popover__" },
         "search-placeholder": unref(t)("请输入搜索（国家，城市，简称）"),
-        class: "timezone-picker",
         filterable: "",
         onChange: handleChange
       }, {
@@ -3802,7 +3759,7 @@ const _hoisted_2$1 = {
   key: 0,
   class: "common-date-list"
 };
-const _hoisted_3$1 = ["onMouseenter", "onClick"];
+const _hoisted_3$1 = ["onClick", "onMouseenter"];
 const _hoisted_4$1 = {
   key: 1,
   class: "common-wrapper"
@@ -3825,7 +3782,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   emits: ["change", "update:timezone"],
   setup(__props, { emit: __emit }) {
-    const { commonUseList, format, storeKey: storeKey2, timezoneInfo, version } = useDatePickertInject();
+    const { commonUseList, format, storeKey: storeKey2, timezoneInfo, version } = useDatePickerInject();
     const props = __props;
     const emits = __emit;
     let popoverInstance = null;
@@ -3833,8 +3790,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const activePanel = ref("common");
     const defaultTabKey = computed(() => {
       const tab = localStorage.getItem(getStoreTabKey(version.value));
-      if (!tab)
-        return DateMode.Date;
+      if (!tab) return DateMode.Date;
       if (Object.values(DateMode).includes(tab)) {
         return tab;
       }
@@ -3876,12 +3832,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     const isSameDateRange = (date1, date2) => {
       var _a, _b, _c, _d, _e, _f;
-      if (!date1 || !date2)
-        return false;
-      if (((_b = (_a = date1.dateValue) == null ? void 0 : _a.join) == null ? void 0 : _b.call(_a, "~")) === ((_d = (_c = date2 == null ? void 0 : date2.dateValue) == null ? void 0 : _c.join) == null ? void 0 : _d.call(_c, "~")))
-        return true;
-      if (((_e = date1 == null ? void 0 : date1.toDisplayString) == null ? void 0 : _e.call(date1)) === ((_f = date2 == null ? void 0 : date2.toDisplayString) == null ? void 0 : _f.call(date2)))
-        return true;
+      if (!date1 || !date2) return false;
+      if (((_b = (_a = date1.dateValue) == null ? void 0 : _a.join) == null ? void 0 : _b.call(_a, "~")) === ((_d = (_c = date2 == null ? void 0 : date2.dateValue) == null ? void 0 : _c.join) == null ? void 0 : _d.call(_c, "~"))) return true;
+      if (((_e = date1 == null ? void 0 : date1.toDisplayString) == null ? void 0 : _e.call(date1)) === ((_f = date2 == null ? void 0 : date2.toDisplayString) == null ? void 0 : _f.call(date2))) return true;
       return false;
     };
     const handleDeleteConfirm = () => {
@@ -3919,16 +3872,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             null,
             renderList(dateList.value, (date, index) => {
               return openBlock(), createElementBlock("li", {
-                key: index,
                 class: normalizeClass({
                   "list-item": true,
                   "is-recent-item": activePanel.value === "recent",
                   "is-selected": isSameDateRange(date, _ctx.defaultDate),
                   "is-disabled": !unref(validateDateRange)(date)
                 }),
+                key: index,
+                onClick: ($event) => unref(validateDateRange)(date) && handleChange(date.dateValue),
                 onMouseenter: ($event) => !unref(validateDateRange)(date) && handleShowDisableMsg($event),
-                onMouseleave: handleHideDisableMsg,
-                onClick: ($event) => unref(validateDateRange)(date) && handleChange(date.dateValue)
+                onMouseleave: handleHideDisableMsg
               }, toDisplayString(date.toDisplayString()), 43, _hoisted_3$1);
             }),
             128
@@ -3949,9 +3902,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           )
         ])),
         createVNode(_sfc_main$9, {
+          class: "date-pick-tab",
           "model-value": activeDatePickTab.value,
           panels: unref(datePickTabList),
-          class: "date-pick-tab",
           "onUpdate:modelValue": handleDateTabChange
         }, null, 8, ["model-value", "panels"]),
         (openBlock(), createBlock(
@@ -4032,11 +3985,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 const _hoisted_1 = /* @__PURE__ */ createElementVNode(
   "svg",
   {
-    class: "date-content-icon",
+    width: "14",
     height: "14",
+    class: "date-content-icon",
     version: "1.1",
     viewBox: "0 0 1024 1024",
-    width: "14",
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   },
@@ -4095,8 +4048,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const timezoneInfo = computed(() => getTimezoneInfoByValue(props.timezone || dayjs.tz.guess()));
     const diffTimezone = computed(() => {
       const timezone = props.timezone;
-      if (!timezone || props.timezone === dayjs.tz.guess())
-        return 0;
+      if (!timezone || props.timezone === dayjs.tz.guess()) return 0;
       const a = dayjs().utcOffset();
       const b = dayjs.tz(dayjs(), timezone).utcOffset();
       return (b - a) / 60;
@@ -4138,8 +4090,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let enterTimer;
     let leaveTimer;
     function handleDateMouseenter() {
-      if (enterTimer)
-        return;
+      if (enterTimer) return;
       enterTimer = setTimeout(() => {
         tooltipsShow.value = true;
         tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, props.timezone);
@@ -4147,8 +4098,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, 100);
     }
     function handleDateMouseleave() {
-      if (leaveTimer)
-        clearTimeout(leaveTimer);
+      if (leaveTimer) clearTimeout(leaveTimer);
       leaveTimer = setTimeout(() => {
         tooltipsShow.value = false;
         leaveTimer = null;
@@ -4158,8 +4108,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       datePanelShow.value = false;
       const [start, end] = val;
       const [oldStart, oldEnd] = props.modelValue || [];
-      if (start && end && start === oldStart && end === oldEnd)
-        return;
+      if (start && end && start === oldStart && end === oldEnd) return;
       dateDetail.value = new DateRange(val, format.value, props.timezone);
       const emitValue = dateDetail.value.toEmitValue();
       emits("update:modelValue", ...emitValue);
@@ -4176,15 +4125,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const diffDateDuration = (type) => {
       var _a, _b;
-      if (((_a = dateDetail.value.dateValue) == null ? void 0 : _a.length) < 2)
-        return;
+      if (((_a = dateDetail.value.dateValue) == null ? void 0 : _a.length) < 2) return;
       const { endDate, startDate } = dateDetail.value;
       const durations = dateDetail.value.dateDuration();
       const val = type === "left" ? [startDate.subtract(durations), endDate.subtract(durations)] : [startDate.add(durations), endDate.add(durations)];
       if ((_b = props.validDateRange) == null ? void 0 : _b.length) {
         const validDateRange = new DateRange(props.validDateRange, props.format, props.timezone);
-        if (!validDateRange.isInValidDateRange(new DateRange(val, props.format, props.timezone)))
-          return;
+        if (!validDateRange.isInValidDateRange(new DateRange(val, props.format, props.timezone))) return;
       }
       handleChange(val);
     };
@@ -4195,8 +4142,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       diffDateDuration("right");
     };
     const handleClickoutside = (e) => {
-      if (!datePanelShow.value)
-        return;
+      if (!datePanelShow.value) return;
       if (!Array.from(document.querySelectorAll(".__bk-date-picker-popover__")).some(
         (item) => item.contains(e.target)
       )) {
@@ -4235,10 +4181,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(unref(AngleLeft), { class: "date-icon-left" })
           ]),
           createVNode(unref(Popover), {
+            "ext-cls": "bk-date-picker-popover __bk-date-picker-popover__",
             arrow: false,
             "is-show": datePanelShow.value,
             offset: { mainAxis: 10, crossAxis: 10, alignmentAxis: -32 },
-            "ext-cls": "bk-date-picker-popover __bk-date-picker-popover__",
             placement: "bottom-start",
             theme: "light",
             trigger: "manual",
@@ -4246,12 +4192,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, {
             content: withCtx(() => [
               createVNode(_sfc_main$1, {
-                "need-timezone": _ctx.needTimezone,
                 "default-date": dateDetail.value,
+                "need-timezone": _ctx.needTimezone,
                 timezone: _ctx.timezone,
                 onChange: handleChange,
                 "onUpdate:timezone": handleTimezoneChange
-              }, null, 8, ["need-timezone", "default-date", "timezone"])
+              }, null, 8, ["default-date", "need-timezone", "timezone"])
             ]),
             default: withCtx(() => {
               var _a;
@@ -4261,8 +4207,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   {
                     ref_key: "dateContentRef",
                     ref: dateContentRef,
-                    popoverDelay: [100, 10],
                     class: "date-content",
+                    popoverDelay: [100, 10],
                     onClick: handleClickDate,
                     onMouseenter: handleDateMouseenter,
                     onMouseleave: handleDateMouseleave