@blueking/date-picker 2.0.0-beta.33 → 2.0.0-beta.35

package/README.md

@@ -91,6 +91,8 @@ export default {
 | timezone       | 时区值                  | `string`                                                          | 浏览器时区 |
 | validDateRange | 有效可选的日期范围      | `DateValue \| undefined`                                          |            |
 | version        | 版本号 用于控制本地缓存 | `number \| string`                                                | '1.0'      |
+| minDuration    | 最小可选时间跨度毫秒值  | `number`                                                          |            |
+| maxDuration    | 最大可选时间跨度毫秒值  | `number`                                                          |            |
 
 ### 事件列表
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/date-picker",
-  "version": "2.0.0-beta.33",
+  "version": "2.0.0-beta.35",
   "description": "蓝鲸监控平台日期时间选择",
   "license": "MIT",
   "author": "Tencent BlueKing",

package/typings/date-picker.vue.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     "update:modelValue": (value: DateValue | undefined, info: {
         dayjs: dayjs.Dayjs | null;
         formatText: null | string;
-    }[]) => void;
+    }[], rawVal: DateValue) => void;
     "update:timezone": (value: string, timezoneInfo: ITimezoneItem) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<IDatePickerProps>, {
     behavior: string;
@@ -26,13 +26,16 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     "onUpdate:modelValue"?: ((value: DateValue | undefined, info: {
         dayjs: dayjs.Dayjs | null;
         formatText: null | string;
-    }[]) => any) | undefined;
+    }[], rawVal: DateValue) => any) | undefined;
     "onUpdate:timezone"?: ((value: string, timezoneInfo: ITimezoneItem) => any) | undefined;
 }, {
     format: string;
+    commonUseList: {
+        id: DateValue;
+        name: string;
+    }[] | DateValue[];
     version: number | string;
     behavior: "normal" | "simplicity";
-    commonUseList: DateValue[];
     needTimezone: boolean;
 }, {}>;
 export default _default;

package/typings/hooks/use-validate.d.ts

@@ -3,7 +3,7 @@ import { type DateValue } from '../utils';
 import { DateRange } from '../utils/date';
 export declare const useValidate: () => {
     validDateRange: import("vue").Ref<DateRange | undefined>;
-    validMsg: import("vue").ComputedRef<string>;
+    validMsg: import("vue").Ref<string>;
     validateDateRange: (validDate: DateRange) => boolean;
     validateDateValue: (validDate: DateValue) => boolean;
     validateDayjs: (validDate: Dayjs) => boolean;

package/typings/lang/lang.d.ts

@@ -73,12 +73,14 @@ export declare const langData: {
     readonly 近: "Last";
     readonly '\uFF08\u81F3\u4ECA\uFF09': " so far";
     readonly '\uFF0C\u65E0\u6CD5\u9009\u62E9': ", cannot be selected";
+    readonly 时间范围不能小于: "Time range cannot be less than";
+    readonly 时间范围不能大于: "Time range cannot be greater than";
 };
 export type NaturalDateKey = keyof typeof naturalDateLangData;
 export type TimeUnitDateKey = keyof typeof timeUnitLangData;
 export type ShortTimeUnitDateKey = keyof typeof shortTimeUnitLangData;
 export type LangKey = keyof typeof langData;
 export type LangValue = (typeof langData)[LangKey];
-export declare const langValueMap: Record<LangValue, "前" | "取消" | "将来" | "常用时间" | "开始时间" | "开始时间不能大于结束时间" | "支持多种时间格式自动转换" | "整" | "无匹配数据" | "日期选择" | "时区设置" | "时差：早 $n 小时" | "时差：晚 $n 小时" | "时间格式支持" | "是否清空最近使用？" | "暂无常用时间" | "暂无最近使用记录" | "最近" | "最近使用" | "未来" | "查看支持格式" | "格式" | "此刻" | "浏览器时区" | "的最近" | "确定" | "示例" | "结束时间" | "自然日期" | "至今" | "请输入" | "请输入搜索（国家，城市，简称）" | "超出可选范围" | "近" | "（至今）" | "，无法选择">;
+export declare const langValueMap: Record<LangValue, "前" | "取消" | "将来" | "常用时间" | "开始时间" | "开始时间不能大于结束时间" | "支持多种时间格式自动转换" | "整" | "无匹配数据" | "日期选择" | "时区设置" | "时差：早 $n 小时" | "时差：晚 $n 小时" | "时间格式支持" | "是否清空最近使用？" | "暂无常用时间" | "暂无最近使用记录" | "最近" | "最近使用" | "未来" | "查看支持格式" | "格式" | "此刻" | "浏览器时区" | "的最近" | "确定" | "示例" | "结束时间" | "自然日期" | "至今" | "请输入" | "请输入搜索（国家，城市，简称）" | "超出可选范围" | "近" | "（至今）" | "，无法选择" | "时间范围不能小于" | "时间范围不能大于">;
 export declare const lang: string;
 export declare const t: (key: LangKey | NaturalDateKey | ShortTimeUnitDateKey | TimeUnitDateKey) => string;

package/typings/utils/date.d.ts

@@ -1,4 +1,4 @@
-import dayjs, { type Dayjs } from 'dayjs';
+import dayjs, { type Dayjs, type OpUnitType } from 'dayjs';
 import { type DateUnit } from './constant';
 import { DateMode, type DateValue } from './types';
 export declare const baselineDateRegexp: RegExp;
@@ -22,6 +22,7 @@ export declare class DateRange {
     startDate: Dayjs | null;
     startNum: number | undefined;
     startUnit: DateUnit | undefined;
+    userDisplayName: string | undefined;
     constructor(dateValue?: DateValue, format?: string, timezome?: string);
     get dateMode(): DateMode;
     get endDisplayText(): string;
@@ -29,8 +30,10 @@ export declare class DateRange {
     get recentOrFuturedateNum(): number | undefined;
     get recentOrFuturedateUnit(): "M" | "d" | "h" | "m" | "s" | "w" | "y" | undefined;
     get startDisplayText(): string;
-    dateDuration(): number | undefined;
+    dateDuration(unit?: OpUnitType | dayjs.QUnitType): number | undefined;
     isInValidDateRange(date: DateRange): boolean;
+    isInValidDuration(minDuration?: number, maxDuration?: number): boolean;
+    setUserDisplayName(v: string): void;
     toDisplayString(): string;
     toEmitValue(): [
         DateValue,

package/typings/utils/duration.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 格式化持续时间
+ * @param duration 毫秒
+ * @returns
+ */
+export declare const formatDuration: (milliseconds: number) => string;

package/typings/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './constant';
 export * from './date';
+export * from './duration';
 export * from './timezone';
 export * from './types';
 export * from './utils';

package/typings/utils/types.d.ts

@@ -20,7 +20,10 @@ export type CommonDateValue = [string, string];
 export type DateValue = [Dayjs | number | string, Dayjs | number | string];
 export interface IDatePickerProps {
     behavior?: 'normal' | 'simplicity';
-    commonUseList?: DateValue[];
+    commonUseList?: {
+        id: DateValue;
+        name: string;
+    }[] | DateValue[];
     disabled?: boolean;
     format?: string;
     modelValue: DateValue | undefined;
@@ -28,4 +31,6 @@ export interface IDatePickerProps {
     timezone?: string;
     validDateRange?: DateValue;
     version?: number | string;
+    minDuration?: number;
+    maxDuration?: number;
 }

package/typings/utils/utils.d.ts

@@ -1,15 +1,17 @@
-import { type ComputedRef, type InjectionKey } from 'vue';
+import { type ComputedRef, type InjectionKey, type Ref } from 'vue';
 import { type LangKey } from '../lang/lang';
 import { type ITimezoneItem } from './timezone';
-import { type DateValue } from './types';
+import { type IDatePickerProps, type DateValue } from './types';
 export interface IDatePickerProvider {
-    commonUseList: ComputedRef<DateValue[]>;
+    commonUseList: ComputedRef<IDatePickerProps['commonUseList']>;
     format: ComputedRef<string>;
     storeKey: ComputedRef<string>;
     t: (key: LangKey) => string;
     timezoneInfo: ComputedRef<ITimezoneItem>;
     version: ComputedRef<number | string>;
-    vildateTimeRange: ComputedRef<DateValue | undefined>;
+    validateTimeRange: ComputedRef<DateValue | undefined>;
+    minDuration: Ref<number | undefined>;
+    maxDuration: Ref<number | undefined>;
 }
 export declare const DATE_PICKER_PROVIDER_KEY: InjectionKey<IDatePickerProvider>;
 export declare const useDatePickerProvider: (data: IDatePickerProvider) => void;

package/vue2/index.es.min.js

@@ -2,7 +2,7 @@ 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);
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "@blueking/bkui-library";
-import { provide, inject, customRef, computed, defineComponent, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, createCommentVNode, createTextVNode, toDisplayString, shallowRef, watch, createElementVNode, normalizeClass, withModifiers, ref, normalizeStyle, withDirectives, withKeys, onMounted, vShow, nextTick, mergeProps, KeepAlive, resolveDynamicComponent, onBeforeUnmount, createApp, h as h$1 } from "@blueking/bkui-library";
+import { provide, inject, ref, customRef, defineComponent, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, createCommentVNode, createTextVNode, toDisplayString, shallowRef, watch, createElementVNode, normalizeClass, withModifiers, computed, normalizeStyle, withDirectives, withKeys, onMounted, vShow, nextTick, mergeProps, KeepAlive, resolveDynamicComponent, onBeforeUnmount, createApp, h as h$1 } from "@blueking/bkui-library";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -23008,7 +23008,9 @@ const langData = {
   超出可选范围: "Out of range",
   近: "Last",
   "（至今）": " so far",
-  "，无法选择": ", cannot be selected"
+  "，无法选择": ", cannot be selected",
+  时间范围不能小于: "Time range cannot be less than",
+  时间范围不能大于: "Time range cannot be greater than"
 };
 Object.keys(langData).reduce(
   (pre, cur) => {
@@ -23254,6 +23256,7 @@ class DateRange {
     __publicField(this, "startDate");
     __publicField(this, "startNum");
     __publicField(this, "startUnit");
+    __publicField(this, "userDisplayName");
     this.dateValue = dateValue;
     this.format = format;
     this.timezome = timezome;
@@ -23314,22 +23317,22 @@ class DateRange {
     var _a;
     return dayjs.tz(((_a = this.startDate) == null ? void 0 : _a.valueOf()) || void 0, this.timezome).format(this.format);
   }
-  dateDuration() {
+  dateDuration(unit) {
     if (!this.startDate || !this.endDate || !this.isValidate) return;
     let durations = this.endDate.diff(this.startDate);
     const dayDuration = 24 * 60 * 60 * 1e3;
     switch (this.dateMode) {
       case DateMode.RECENT:
-        durations = dayjs().add(this.startNum, this.startUnit).diff(dayjs());
+        durations = dayjs().add(this.startNum, this.startUnit).diff(dayjs(), unit);
         break;
       case DateMode.FUTURE:
         durations = dayjs().diff(
           dayjs().add(this.endNum, this.endUnit),
-          this.endUnit
+          unit || this.endUnit
         );
         break;
       case DateMode.NATURAL:
-        durations = this.endDate.diff(this.startDate);
+        durations = this.endDate.diff(this.startDate, unit);
         const dayDuration2 = 24 * 60 * 60 * 1e3;
         if (durations % dayDuration2 === dayDuration2 - 1) {
           durations += 1;
@@ -23337,7 +23340,7 @@ class DateRange {
         break;
       default:
       case DateMode.Date:
-        durations = this.endDate.diff(this.startDate);
+        durations = this.endDate.diff(this.startDate, unit);
         break;
     }
     const durationMod = durations % dayDuration;
@@ -23352,6 +23355,15 @@ class DateRange {
     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));
   }
+  isInValidDuration(minDuration = 0, maxDuration = Number.MAX_SAFE_INTEGER) {
+    if (!this.startDate || !this.endDate) return false;
+    const durations = this.dateDuration();
+    if (durations === void 0) return false;
+    return durations >= minDuration && durations <= maxDuration;
+  }
+  setUserDisplayName(v2) {
+    this.userDisplayName = v2;
+  }
   toDisplayString() {
     var _a, _b;
     const {
@@ -23366,6 +23378,7 @@ class DateRange {
       startNum,
       startUnit
     } = this;
+    if (this.userDisplayName) return this.userDisplayName;
     if (!startDate || !endDate || !isValidate) {
       return ((_a = this.dateValue) == null ? void 0 : _a.join(" ~ ")) || "";
     }
@@ -23582,6 +23595,24 @@ const isValidTimeZone = (timeZone) => {
     return false;
   }
 };
+const timeUnits = {
+  天: 24 * 60 * 60 * 1e3,
+  小时: 60 * 60 * 1e3,
+  分钟: 60 * 1e3,
+  秒: 1e3
+};
+const formatDuration = (milliseconds) => {
+  let remainingTime = milliseconds;
+  let result = "";
+  for (const [unit, value] of Object.entries(timeUnits)) {
+    const amount = Math.floor(remainingTime / value);
+    if (amount > 0) {
+      result += `${amount} ${t(unit)} `;
+      remainingTime %= value;
+    }
+  }
+  return result.trim();
+};
 dayjs.extend(utc);
 dayjs.extend(tz);
 const timezoneData = [
@@ -24978,43 +25009,73 @@ const useDatePickerProvider = (data2) => {
 };
 const useDatePickerInject = () => inject(DATE_PICKER_PROVIDER_KEY);
 const useValidate = () => {
-  const { format, timezoneInfo, vildateTimeRange } = useDatePickerInject();
+  var _a;
+  const { format, timezoneInfo, validateTimeRange, minDuration, maxDuration } = useDatePickerInject();
+  const validMsg = ref("");
   const validDateRange = customRef((track) => {
-    let date = new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+    let date = new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
     return {
       get() {
-        var _a;
+        var _a2;
         track();
-        if (((_a = vildateTimeRange.value) == null ? void 0 : _a.length) !== 2) return void 0;
-        if (vildateTimeRange.value.some((v2) => typeof v2 === "string" && v2.includes("now")))
-          return new DateRange(vildateTimeRange.value, format.value, timezoneInfo.value.label);
+        if (((_a2 = validateTimeRange.value) == null ? void 0 : _a2.length) !== 2) return void 0;
+        if (validateTimeRange.value.some((v2) => typeof v2 === "string" && v2.includes("now")))
+          return new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
         return date;
       },
       set() {
       }
     };
   });
+  const rangeMsg = t("超出可选范围") + " (" + ((_a = validDateRange.value) == null ? void 0 : _a.toDisplayString()) + ") " + t("，无法选择");
+  const validDuration = (validDate) => {
+    let date;
+    if (validDate instanceof DateRange) {
+      date = validDate;
+    } else {
+      date = new DateRange(validDate, format.value, timezoneInfo.value.label);
+    }
+    const durations = Math.abs(date.dateDuration("ms") || 0);
+    let message = "";
+    if (minDuration.value && durations < minDuration.value) {
+      message = t("时间范围不能小于") + " " + formatDuration(minDuration.value);
+    }
+    if (!message && maxDuration.value && durations > maxDuration.value) {
+      message = t("时间范围不能大于") + " " + formatDuration(maxDuration.value);
+    }
+    return message;
+  };
+  const commonValidateFn = (date) => {
+    var _a2;
+    const isValid = ((_a2 = validDateRange.value) == null ? void 0 : _a2.isInValidDateRange(date)) ?? true;
+    if (!isValid) {
+      validMsg.value = rangeMsg;
+      return isValid;
+    }
+    const message = validDuration(date);
+    validMsg.value = message;
+    return !message;
+  };
   const validateDateValue = (validDate) => {
-    var _a;
     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 date = new DateRange(validDate, format.value, timezoneInfo.value.label);
+    return commonValidateFn(date);
   };
   const validateDateRange = (validDate) => {
-    var _a;
     if (!validDate.isValidate) return false;
-    return ((_a = validDateRange.value) == null ? void 0 : _a.isInValidDateRange(validDate)) ?? true;
+    return commonValidateFn(validDate);
   };
   const validateDayjs = (validDate) => {
-    var _a;
+    var _a2;
+    validMsg.value = "";
     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;
+    const date = new DateRange([validDate.startOf("d"), validDate.endOf("d")], format.value, timezoneInfo.value.label);
+    const isValid = ((_a2 = validDateRange.value) == null ? void 0 : _a2.isInValidDateRange(date)) ?? true;
+    if (!isValid) {
+      validMsg.value = rangeMsg;
+    }
+    return isValid;
   };
-  const validMsg = computed(() => {
-    var _a;
-    return t("超出可选范围") + " (" + ((_a = validDateRange.value) == null ? void 0 : _a.toDisplayString()) + ") " + t("，无法选择");
-  });
   return {
     validDateRange,
     validMsg,
@@ -26756,9 +26817,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const browserTimezone = dayjs.tz.guess();
     const recentUseList = shallowRef(getStoreDateList(storeKey2.value));
     const dateList = computed(
-      () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map(
-        (date) => new DateRange(date, format.value, props2.timezone)
-      )
+      () => (activePanel.value === "common" ? commonUseList.value || commonDateList : recentUseList.value).map((date) => {
+        if ((date == null ? void 0 : date.id) && date.name) {
+          const dateRange = new DateRange(date.id, format.value, props2.timezone);
+          dateRange.setUserDisplayName(date.name);
+          return dateRange;
+        }
+        return new DateRange(date, format.value, props2.timezone);
+      })
     );
     const handleChange = (date) => {
       emits("change", date);
@@ -26984,7 +27050,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     needTimezone: { type: Boolean, default: true },
     timezone: {},
     validDateRange: {},
-    version: { default: "1.0" }
+    version: { default: "1.0" },
+    minDuration: {},
+    maxDuration: {}
   },
   emits: ["update:modelValue", "update:timezone"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -27036,6 +27104,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a;
       return ((_a = props2.commonUseList) == null ? void 0 : _a.length) ? props2.commonUseList : commonDateList;
     });
+    const dateDetailDisplayString = computed(() => {
+      var _a;
+      const commonDate = commonDateUseList.value.find((item) => {
+        var _a2, _b, _c, _d;
+        return Array.isArray(item.id) && ((_b = (_a2 = item.id).join) == null ? void 0 : _b.call(_a2, "_")) === ((_d = (_c = dateDetail.value) == null ? void 0 : _c.dateValue) == null ? void 0 : _d.join("_"));
+      });
+      if (commonDate) {
+        return commonDate.name;
+      }
+      return (_a = dateDetail.value) == null ? void 0 : _a.toDisplayString();
+    });
     useDatePickerProvider({
       commonUseList: commonDateUseList,
       format,
@@ -27043,7 +27122,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       t,
       timezoneInfo,
       version: computed(() => props2.version),
-      vildateTimeRange: computed(() => props2.validDateRange)
+      validateTimeRange: computed(() => props2.validDateRange),
+      minDuration: ref(props2.minDuration),
+      maxDuration: ref(props2.maxDuration)
     });
     onBeforeUnmount(() => {
       tooltipsShow.value = false;
@@ -27073,8 +27154,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (start2 && end2 && start2 === oldStart && end2 === oldEnd) return;
       dateDetail.value = new DateRange(val, format.value, timezoneInfo.value.label);
       const emitValue = dateDetail.value.toEmitValue();
-      emits("update:modelValue", ...emitValue);
-      const canStore = commonDateUseList.value.some((item) => item[0] === start2 && item[1] === end2);
+      emits("update:modelValue", ...emitValue, [...val]);
+      const canStore = commonDateUseList.value.some((item) => {
+        const startDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[0] : item[0];
+        const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
+        return startDate === start2 && endDate === end2;
+      });
       !canStore && dateDetail.value.isValidate && setStoreDateList(val, storeKey2.value);
     };
     const handleTimezoneChange = (val, info) => {
@@ -27180,7 +27265,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     createElementVNode(
                       "span",
                       null,
-                      toDisplayString(dateDetail.value.toDisplayString()),
+                      toDisplayString(dateDetailDisplayString.value),
                       1
                       /* TEXT */
                     ),
@@ -27299,6 +27384,8 @@ const vue2 = {
           format: props2.format,
           modelValue: props2.modelValue,
           needTimezone: props2.needTimezone,
+          minDuration: props2.minDuration,
+          maxDuration: props2.maxDuration,
           "onUpdate:modelValue"() {
             emit("update:modelValue", ...arguments);
             emit("change", ...arguments);