@gez/date-time-kit 2.0.0-alpha.15 → 2.0.0-alpha.17

package/dist/components/quick-selector/index.d.ts

@@ -1,8 +1,8 @@
 import { type Weeks } from '../calendar';
 import { type reExportPopoverAttrs } from '../popover/attr-sync-helper';
 import { type BaseAttrs, type BaseEmits, type Emit2EventMap, UiBase } from '../web-component-base';
-import { type DataLimit, type GenPeriodTimesOptions, type PeriodTimeInfo, type QuickGenPeriodTimesOptions, type QuickKey, genPeriodTimes, quickGenPeriodTime, quickGenPeriodTimeInfo, quickGenPeriodTimes } from './quick-key';
-export { type QuickKey, type DataLimit, type GenPeriodTimesOptions, type QuickGenPeriodTimesOptions, type PeriodTimeInfo, type Weeks, genPeriodTimes, quickGenPeriodTime, quickGenPeriodTimes, quickGenPeriodTimeInfo };
+import { type DataLimit, type GenPeriodTimesOptions, type PeriodTimeInfo, type QuickGenPeriodTimesOptions, type QuickKey, UTCInfo2LocaleInfo, genPeriodTimes, localeInfo2UTCInfo, quickGenPeriodTime, quickGenPeriodTimeInfo, quickGenPeriodTimes } from './quick-key';
+export { type QuickKey, type DataLimit, type GenPeriodTimesOptions, type QuickGenPeriodTimesOptions, type PeriodTimeInfo, type Weeks, genPeriodTimes, quickGenPeriodTime, quickGenPeriodTimes, quickGenPeriodTimeInfo, localeInfo2UTCInfo, UTCInfo2LocaleInfo };
 export type Attrs = BaseAttrs & reExportPopoverAttrs & {
     /**
      * Timezone in minutes. For example: UTC+05:45 => `-345`, UTC-01:00 => `60`.
@@ -80,6 +80,7 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     private _onTzTriggerClick;
     private _onCustomTriggerClick;
     private _onBackBtnClick;
+    private _dispatchTimeChangeEvent;
     private _onRadioChange;
     private _onDoneBtnClick;
     readonly genPeriodTimes: (options: GenPeriodTimesOptions) => {

package/dist/components/quick-selector/index.mjs

@@ -16,7 +16,9 @@ import {
 import styleStr from "./index.css.mjs";
 import html, { utcText } from "./index.html.mjs";
 import {
+  UTCInfo2LocaleInfo,
   genPeriodTimes,
+  localeInfo2UTCInfo,
   quickGenPeriodTime,
   quickGenPeriodTimeInfo,
   quickGenPeriodTimes,
@@ -26,7 +28,9 @@ export {
   genPeriodTimes,
   quickGenPeriodTime,
   quickGenPeriodTimes,
-  quickGenPeriodTimeInfo
+  quickGenPeriodTimeInfo,
+  localeInfo2UTCInfo,
+  UTCInfo2LocaleInfo
 };
 export class Ele extends UiBase {
   constructor() {
@@ -81,6 +85,24 @@ export class Ele extends UiBase {
       this._showMenu("custom");
     });
     __publicField(this, "_onBackBtnClick", () => this._showMenu("top"));
+    __publicField(this, "_dispatchTimeChangeEvent", debounce(() => {
+      const quickKey = this.quickKey;
+      if (quickKey !== "custom") {
+        const t = this.quickGenPeriodTimeInfo(quickKey);
+        this.dispatchEvent("time-changed", t, true);
+        return;
+      }
+      this.dispatchEvent(
+        "time-changed",
+        {
+          tzOffset: this.tzOffset,
+          start: this.startTime,
+          end: this.endTime,
+          type: "custom"
+        },
+        true
+      );
+    }));
     __publicField(this, "_onRadioChange", (e) => {
       if (!(e.target instanceof HTMLInputElement)) return;
       if (e.target.type !== "radio") return;
@@ -88,43 +110,21 @@ export class Ele extends UiBase {
       if (name === "radio") {
         const v = value;
         if (v === "custom") return;
-        const t = this.quickGenPeriodTimeInfo(v);
-        this.dispatchEvent("time-changed", t, true);
+        this.quickKey = v;
       } else if (name === "tz") {
         this.tzOffset = +value;
-        const quickKey = this.quickKey;
-        if (quickKey === "custom") {
-          this.dispatchEvent(
-            "time-changed",
-            {
-              tzOffset: this.tzOffset,
-              start: this.startTime,
-              end: this.endTime,
-              type: "custom"
-            },
-            true
-          );
-          return;
-        }
-        const t = this.quickGenPeriodTimeInfo(quickKey);
-        this.dispatchEvent("time-changed", t, true);
       }
     });
     __publicField(this, "_onDoneBtnClick", (_e) => {
       const selector = this._periodSelector;
       selector.abortSelecting();
       this._showMenu("top");
+      let { timeStart, timeEnd } = this._periodSelector;
+      if (timeStart > timeEnd) [timeStart, timeEnd] = [timeEnd, timeStart];
+      this.startTime = timeStart;
+      this.endTime = timeEnd;
       this.quickKey = "custom";
-      this.dispatchEvent(
-        "time-changed",
-        {
-          tzOffset: this.tzOffset,
-          start: selector.timeStart,
-          end: selector.timeEnd,
-          type: "custom"
-        },
-        true
-      );
+      this._dispatchTimeChangeEvent();
     });
     __publicField(this, "genPeriodTimes", (options) => genPeriodTimes({ weekStartAt: this.weekStartAt, ...options }));
     __publicField(this, "quickGenPeriodTimes", (periods) => quickGenPeriodTimes({ weekStartAt: this.weekStartAt, periods }));
@@ -195,7 +195,7 @@ export class Ele extends UiBase {
     }
     const v = new Date(val);
     if (Number.isNaN(+v)) return;
-    this.setAttribute("time-end", +v + "");
+    this.setAttribute("end-time", +v + "");
   }
   get excludeField() {
     const v = this._getAttr("exclude-field", "") || "";
@@ -296,9 +296,11 @@ export class Ele extends UiBase {
     }
     if (name === "tz-offset") {
       this._renderTz();
+      this._dispatchTimeChangeEvent();
     }
     if (name === "quick-key") {
       this._updateRadio();
+      this._dispatchTimeChangeEvent();
     }
     if (name === "week-start-at") {
       this._updatePeriodSelector();

package/dist/components/quick-selector/quick-key.d.ts

@@ -46,3 +46,197 @@ export type PeriodTimeInfo<T extends QuickKey = QuickKey, RT = Date> = T extends
     tzOffset: number;
 };
 export declare const quickGenPeriodTimeInfo: <T extends DataLimit = DataLimit>(type: T, options?: QuickGenPeriodTimesOptions, tzOffset?: number) => PeriodTimeInfo<T>;
+export declare const localeInfo2UTCInfo: (info: PeriodTimeInfo) => {
+    type: "all";
+    /** Locale time */
+    start?: null;
+    /** Locale time */
+    end?: null;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "today";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "yesterday";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "week";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "lastWeek";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "last7Days";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "month";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "last30Days";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "last180Days";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "last6Month";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "year";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "custom";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+};
+export declare const UTCInfo2LocaleInfo: (info: PeriodTimeInfo) => {
+    type: "all";
+    /** Locale time */
+    start?: null;
+    /** Locale time */
+    end?: null;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "today";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "yesterday";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "week";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "lastWeek";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "last7Days";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "month";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "last30Days";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "last180Days";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "last6Month";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "year";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+} | {
+    type: "custom";
+    /** Locale time */
+    start: Date;
+    /** Locale time */
+    end: Date;
+    /** Timezone offset in minutes. e.g. UTC+05:45 => `-345`, UTC-01:00 => `60` */
+    tzOffset: number;
+};

package/dist/components/quick-selector/quick-key.mjs

@@ -104,3 +104,23 @@ export const quickGenPeriodTimeInfo = (type, options = {}, tzOffset = getCurrent
   const t = quickGenPeriodTime(type, options);
   return !t ? { type, tzOffset } : { type, ...t, tzOffset };
 };
+export const localeInfo2UTCInfo = (info) => {
+  info = { ...info };
+  if (info.type === "all") return info;
+  const { tzOffset, start, end } = info;
+  info.start = new Date(
+    +start - (getCurrentTzOffset() - tzOffset) * 60 * 1e3
+  );
+  info.end = new Date(+end - (getCurrentTzOffset() - tzOffset) * 60 * 1e3);
+  return info;
+};
+export const UTCInfo2LocaleInfo = (info) => {
+  info = { ...info };
+  if (info.type === "all") return info;
+  const { tzOffset, start, end } = info;
+  info.start = new Date(
+    +start + (getCurrentTzOffset() - tzOffset) * 60 * 1e3
+  );
+  info.end = new Date(+end + (getCurrentTzOffset() - tzOffset) * 60 * 1e3);
+  return info;
+};

package/package.json

@@ -20,7 +20,7 @@
         "unbuild": "3.6.0",
         "vitest": "3.2.4"
     },
-    "version": "2.0.0-alpha.15",
+    "version": "2.0.0-alpha.17",
     "type": "module",
     "private": false,
     "exports": {
@@ -39,5 +39,5 @@
         "template",
         "public"
     ],
-    "gitHead": "101b552c19523e70140bf358db56a75ff1ea0cf8"
+    "gitHead": "ec728ac1725741632fa71cc8c05a2427d117c522"
 }

package/src/components/quick-selector/index.ts

@@ -23,7 +23,9 @@ import {
     type PeriodTimeInfo,
     type QuickGenPeriodTimesOptions,
     type QuickKey,
+    UTCInfo2LocaleInfo,
     genPeriodTimes,
+    localeInfo2UTCInfo,
     quickGenPeriodTime,
     quickGenPeriodTimeInfo,
     quickGenPeriodTimes,
@@ -40,7 +42,9 @@ export {
     genPeriodTimes,
     quickGenPeriodTime,
     quickGenPeriodTimes,
-    quickGenPeriodTimeInfo
+    quickGenPeriodTimeInfo,
+    localeInfo2UTCInfo,
+    UTCInfo2LocaleInfo
 };
 
 export type Attrs = BaseAttrs &
@@ -154,7 +158,7 @@ export class Ele extends UiBase<Attrs, Emits> {
         }
         const v = new Date(val);
         if (Number.isNaN(+v)) return;
-        this.setAttribute('time-end', +v + '');
+        this.setAttribute('end-time', +v + '');
     }
     public get excludeField() {
         const v = this._getAttr('exclude-field', '') || '';
@@ -273,9 +277,11 @@ export class Ele extends UiBase<Attrs, Emits> {
         }
         if (name === 'tz-offset') {
             this._renderTz();
+            this._dispatchTimeChangeEvent();
         }
         if (name === 'quick-key') {
             this._updateRadio();
+            this._dispatchTimeChangeEvent();
         }
         if (name === 'week-start-at') {
             this._updatePeriodSelector();
@@ -352,6 +358,24 @@ export class Ele extends UiBase<Attrs, Emits> {
     };
     private _onBackBtnClick = () => this._showMenu('top');
 
+    private _dispatchTimeChangeEvent = debounce(() => {
+        const quickKey = this.quickKey;
+        if (quickKey !== 'custom') {
+            const t = this.quickGenPeriodTimeInfo(quickKey);
+            this.dispatchEvent('time-changed', t, true);
+            return;
+        }
+        this.dispatchEvent(
+            'time-changed',
+            {
+                tzOffset: this.tzOffset,
+                start: this.startTime as Date,
+                end: this.endTime as Date,
+                type: 'custom'
+            },
+            true
+        );
+    });
     private _onRadioChange = (e: Event) => {
         if (!(e.target instanceof HTMLInputElement)) return;
         if (e.target.type !== 'radio') return;
@@ -359,43 +383,21 @@ export class Ele extends UiBase<Attrs, Emits> {
         if (name === 'radio') {
             const v = value as QuickKey;
             if (v === 'custom') return;
-            const t = this.quickGenPeriodTimeInfo(v);
-            this.dispatchEvent('time-changed', t, true);
+            this.quickKey = v;
         } else if (name === 'tz') {
             this.tzOffset = +value;
-            const quickKey = this.quickKey;
-            if (quickKey === 'custom') {
-                this.dispatchEvent(
-                    'time-changed',
-                    {
-                        tzOffset: this.tzOffset,
-                        start: this.startTime as Date,
-                        end: this.endTime as Date,
-                        type: 'custom'
-                    },
-                    true
-                );
-                return;
-            }
-            const t = this.quickGenPeriodTimeInfo(quickKey);
-            this.dispatchEvent('time-changed', t, true);
         }
     };
     private _onDoneBtnClick = (_e: Event) => {
         const selector = this._periodSelector;
         selector.abortSelecting();
         this._showMenu('top');
+        let { timeStart, timeEnd } = this._periodSelector;
+        if (timeStart > timeEnd) [timeStart, timeEnd] = [timeEnd, timeStart];
+        this.startTime = timeStart;
+        this.endTime = timeEnd;
         this.quickKey = 'custom';
-        this.dispatchEvent(
-            'time-changed',
-            {
-                tzOffset: this.tzOffset,
-                start: selector.timeStart as Date,
-                end: selector.timeEnd as Date,
-                type: 'custom'
-            },
-            true
-        );
+        this._dispatchTimeChangeEvent();
     };
 
     public readonly genPeriodTimes = (options: GenPeriodTimesOptions) =>

package/src/components/quick-selector/quick-key.ts

@@ -181,3 +181,25 @@ export const quickGenPeriodTimeInfo = <T extends DataLimit = DataLimit>(
         !t ? { type, tzOffset } : { type, ...t, tzOffset }
     ) as PeriodTimeInfo<T>;
 };
+
+export const localeInfo2UTCInfo = (info: PeriodTimeInfo) => {
+    info = { ...info };
+    if (info.type === 'all') return info;
+    const { tzOffset, start, end } = info;
+    info.start = new Date(
+        +start - (getCurrentTzOffset() - tzOffset) * 60 * 1000
+    );
+    info.end = new Date(+end - (getCurrentTzOffset() - tzOffset) * 60 * 1000);
+    return info;
+};
+
+export const UTCInfo2LocaleInfo = (info: PeriodTimeInfo) => {
+    info = { ...info };
+    if (info.type === 'all') return info;
+    const { tzOffset, start, end } = info;
+    info.start = new Date(
+        +start + (getCurrentTzOffset() - tzOffset) * 60 * 1000
+    );
+    info.end = new Date(+end + (getCurrentTzOffset() - tzOffset) * 60 * 1000);
+    return info;
+};