@gez/date-time-kit 2.0.0-alpha.16 → 2.0.0-alpha.18

package/dist/components/popover/css.mjs

@@ -4,4 +4,4 @@ var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __f
 var _a;
 import { closeBarSvg, svg2cssUrl } from "../../assets/index.mjs";
 import { css } from "../../utils.mjs";
-export const styleStr = css(_a || (_a = __template(["\n::slotted([slot='pop']:not(.not-pop-bg)) {\n  background-color: var(--dt-bg-block-light, #fff);\n  padding: 10px 5px;\n  border-radius: 6px;\n  border: 1px solid var(--dt-border-dark, #0000001A);\n  box-shadow: var(--dt-pop-box-shadow, 0 6px 16px #0003);\n}\n:host(:not([open])) slot[name='pop'] { display: none; }\n:host([open]:not([strategy='none'])) slot[name='pop'] { display: block; }\n\n:host(:not([strategy='none'])) slot[name='pop'] {\n  position: fixed;\n  z-index: var(--dt-pop-z-index, 9999);\n  top: 0;\n  left: 0;\n}\n:host([strategy='absolute']) slot[name='pop'] { position: absolute; }\n:host([strategy='absolute']) { position: relative; }\n\n@media (max-width: 750px) {\n  :host([open]) slot[name='pop'] {\n    width: 100vw;\n    max-height: min(90vh, 600px);\n    top: unset;\n    left: 0;\n    bottom: 0;\n    position: fixed;\n  }\n  :host([open]) slot[name='pop']::after, :host([open]) slot[name='pop']::before {\n    content: '';\n    display: block;\n    position: absolute;\n  }\n  :host([open]) slot[name='pop']::before {\n    bottom: 100%;\n    left: 0;\n    right: 0;\n    height: 24px;\n    border-radius: 20px 20px 0 0;\n    background: var(--dt-bg-block-light, #fff);\n  }\n  :host([open]) slot[name='pop']::after {\n    bottom: calc(100% + (24px - 4px) / 2);\n    left: 50%;\n    transform: translateX(-50%);\n    width: 40px;\n    height: 4px;\n    background: var(--dt-border-dark, #0000001A);\n    mask-image: ", ";\n    -webkit-mask-image: ", ";\n    cursor: pointer;\n  }\n  ::slotted([slot='pop']:not(.not-pop-bg)) {\n    padding: 15px;\n    border-radius: 0;\n    border: none;\n    box-shadow: none;\n  }\n  /* for masking */\n  :host([open]:not([strategy='none']))::before {\n    content: '';\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: #0008;\n    z-index: var(--dt-pop-z-index, 9999);\n  }\n}\n"])), svg2cssUrl(closeBarSvg), svg2cssUrl(closeBarSvg));
+export const styleStr = css(_a || (_a = __template(["\n::slotted([slot='pop']:not(.not-pop-bg)) {\n  background-color: var(--dt-bg-block-light, #fff);\n  padding: 10px 5px;\n  border-radius: var(--dt-pop-border-radius, 6px);\n  border: 1px solid var(--dt-border-dark, #0000001A);\n  box-shadow: var(--dt-pop-box-shadow, 0 6px 16px #0003);\n}\n:host(:not([open])) slot[name='pop'] { display: none; }\n:host([open]:not([strategy='none'])) slot[name='pop'] { display: block; }\n\n:host(:not([strategy='none'])) slot[name='pop'] {\n  position: fixed;\n  z-index: var(--dt-pop-z-index, 9999);\n  top: 0;\n  left: 0;\n}\n:host([strategy='absolute']) slot[name='pop'] { position: absolute; }\n:host([strategy='absolute']) { position: relative; }\n\n@media (max-width: 750px) {\n  :host([open]) slot[name='pop'] {\n    width: 100vw;\n    max-height: min(90vh, 600px);\n    top: unset;\n    left: 0;\n    bottom: 0;\n    position: fixed;\n  }\n  :host([open]) slot[name='pop']::after, :host([open]) slot[name='pop']::before {\n    content: '';\n    display: block;\n    position: absolute;\n  }\n  :host([open]) slot[name='pop']::before {\n    bottom: 100%;\n    left: 0;\n    right: 0;\n    height: 24px;\n    border-radius: 20px 20px 0 0;\n    background: var(--dt-bg-block-light, #fff);\n  }\n  :host([open]) slot[name='pop']::after {\n    bottom: calc(100% + (24px - 4px) / 2);\n    left: 50%;\n    transform: translateX(-50%);\n    width: 40px;\n    height: 4px;\n    background: var(--dt-border-dark, #0000001A);\n    mask-image: ", ";\n    -webkit-mask-image: ", ";\n    cursor: pointer;\n  }\n  ::slotted([slot='pop']:not(.not-pop-bg)) {\n    padding: 15px;\n    border-radius: 0;\n    border: none;\n    box-shadow: none;\n  }\n  /* for masking */\n  :host([open]:not([strategy='none']))::before {\n    content: '';\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: #0008;\n    z-index: var(--dt-pop-z-index, 9999);\n  }\n}\n"])), svg2cssUrl(closeBarSvg), svg2cssUrl(closeBarSvg));

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

@@ -85,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;
@@ -93,7 +111,6 @@ export class Ele extends UiBase {
         const v = value;
         if (v === "custom") return;
         this.quickKey = v;
-        this._dispatchTimeChangeEvent();
       } else if (name === "tz") {
         this.tzOffset = +value;
       }
@@ -102,6 +119,10 @@ export class Ele extends UiBase {
       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._dispatchTimeChangeEvent();
     });
@@ -174,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", "") || "";
@@ -279,6 +300,7 @@ export class Ele extends UiBase {
     }
     if (name === "quick-key") {
       this._updateRadio();
+      this._dispatchTimeChangeEvent();
     }
     if (name === "week-start-at") {
       this._updatePeriodSelector();
@@ -298,24 +320,6 @@ export class Ele extends UiBase {
       this._updatePeriodSelector();
     }
   }
-  _dispatchTimeChangeEvent() {
-    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(Ele, "tagName", "dt-quick-selector");
 Ele.define();

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

@@ -105,6 +105,7 @@ export const quickGenPeriodTimeInfo = (type, options = {}, tzOffset = getCurrent
   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(
@@ -114,6 +115,7 @@ export const localeInfo2UTCInfo = (info) => {
   return info;
 };
 export const UTCInfo2LocaleInfo = (info) => {
+  info = { ...info };
   if (info.type === "all") return info;
   const { tzOffset, start, end } = info;
   info.start = new Date(

package/package.json

@@ -20,7 +20,7 @@
         "unbuild": "3.6.0",
         "vitest": "3.2.4"
     },
-    "version": "2.0.0-alpha.16",
+    "version": "2.0.0-alpha.18",
     "type": "module",
     "private": false,
     "exports": {
@@ -39,5 +39,5 @@
         "template",
         "public"
     ],
-    "gitHead": "6821a7c32920ecc7d89d28d4f020170f400b2206"
+    "gitHead": "58e79732be2ec46ffe4cc21495b2e88e6d12c340"
 }

package/src/components/popover/css.ts

@@ -5,7 +5,7 @@ export const styleStr = css`
 ::slotted([slot='pop']:not(.not-pop-bg)) {
   background-color: var(--dt-bg-block-light, #fff);
   padding: 10px 5px;
-  border-radius: 6px;
+  border-radius: var(--dt-pop-border-radius, 6px);
   border: 1px solid var(--dt-border-dark, #0000001A);
   box-shadow: var(--dt-pop-box-shadow, 0 6px 16px #0003);
 }

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

@@ -158,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', '') || '';
@@ -281,6 +281,7 @@ export class Ele extends UiBase<Attrs, Emits> {
         }
         if (name === 'quick-key') {
             this._updateRadio();
+            this._dispatchTimeChangeEvent();
         }
         if (name === 'week-start-at') {
             this._updatePeriodSelector();
@@ -357,7 +358,7 @@ export class Ele extends UiBase<Attrs, Emits> {
     };
     private _onBackBtnClick = () => this._showMenu('top');
 
-    private _dispatchTimeChangeEvent() {
+    private _dispatchTimeChangeEvent = debounce(() => {
         const quickKey = this.quickKey;
         if (quickKey !== 'custom') {
             const t = this.quickGenPeriodTimeInfo(quickKey);
@@ -374,7 +375,7 @@ export class Ele extends UiBase<Attrs, Emits> {
             },
             true
         );
-    }
+    });
     private _onRadioChange = (e: Event) => {
         if (!(e.target instanceof HTMLInputElement)) return;
         if (e.target.type !== 'radio') return;
@@ -383,7 +384,6 @@ export class Ele extends UiBase<Attrs, Emits> {
             const v = value as QuickKey;
             if (v === 'custom') return;
             this.quickKey = v;
-            this._dispatchTimeChangeEvent();
         } else if (name === 'tz') {
             this.tzOffset = +value;
         }
@@ -392,6 +392,10 @@ export class Ele extends UiBase<Attrs, Emits> {
         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._dispatchTimeChangeEvent();
     };

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

@@ -183,6 +183,7 @@ export const quickGenPeriodTimeInfo = <T extends DataLimit = DataLimit>(
 };
 
 export const localeInfo2UTCInfo = (info: PeriodTimeInfo) => {
+    info = { ...info };
     if (info.type === 'all') return info;
     const { tzOffset, start, end } = info;
     info.start = new Date(
@@ -193,6 +194,7 @@ export const localeInfo2UTCInfo = (info: PeriodTimeInfo) => {
 };
 
 export const UTCInfo2LocaleInfo = (info: PeriodTimeInfo) => {
+    info = { ...info };
     if (info.type === 'all') return info;
     const { tzOffset, start, end } = info;
     info.start = new Date(