@gez/date-time-kit 2.0.0-alpha.13 → 2.0.0-alpha.14

package/dist/assets/index.d.ts

@@ -7,3 +7,4 @@ export declare const arrowRightDoubleSvg = "<svg class=\"bidirectional-flip\" wi
 export declare const arrowDownSvg = "<svg class=\"bidirectional-flip\" width=\"15\" height=\"15\" fill=\"currentColor\"><path d=\"m8.02 10.54 3.96-4.4a.583.583 0 0 0-.433-.973h-7.88a.583.583 0 0 0-.434.973l3.94 4.378c.216.24.585.26.824.044l.022-.021Z\"/></svg>";
 export declare const backArrowSvg = "<svg class=\"bidirectional-flip\" width=\"24\" height=\"24\" fill=\"currentColor\"><path d=\"M9.894 5.106a.75.75 0 0 1 0 1.06L4.811 11.25 21 11.25a.75.75 0 0 1 0 1.5l-16.191-.001 5.085 5.085a.75.75 0 0 1-1.06 1.06L2.47 12.53a.75.75 0 0 1 0-1.06l6.364-6.364a.75.75 0 0 1 1.06 0Z\"/></svg>";
 export declare const timeSvg = "<svg width=\"14\" height=\"15\" fill=\"currentColor\"><path d=\"M7.4335 4.241a.4376.4376 0 0 0-.871.0594v3.783l.0044.0622a.4375.4375 0 0 0 .1921.3029L8.9242 9.877l.0566.0317a.4376.4376 0 0 0 .5495-.1559l.0317-.0566a.4376.4376 0 0 0-.1559-.5495L7.4375 7.8471V4.3004l-.004-.0593ZM7 1.6667c-3.2217 0-5.8333 2.6116-5.8333 5.8333 0 3.2217 2.6116 5.8333 5.8333 5.8333 3.2217 0 5.8333-2.6116 5.8333-5.8333 0-3.2217-2.6116-5.8333-5.8333-5.8333Zm0 .814c2.7721 0 5.0194 2.2472 5.0194 5.0193 0 2.7721-2.2473 5.0194-5.0194 5.0194S1.9806 10.2721 1.9806 7.5 4.228 2.4806 7 2.4806Z\"/></svg>";
+export declare const closeBarSvg = "<svg><rect width=\"40\" height=\"4\" rx=\"2\"/></svg>";

package/dist/assets/index.mjs

@@ -11,3 +11,4 @@ export const arrowRightDoubleSvg = '<svg class="bidirectional-flip" width="17" h
 export const arrowDownSvg = '<svg class="bidirectional-flip" width="15" height="15" fill="currentColor"><path d="m8.02 10.54 3.96-4.4a.583.583 0 0 0-.433-.973h-7.88a.583.583 0 0 0-.434.973l3.94 4.378c.216.24.585.26.824.044l.022-.021Z"/></svg>';
 export const backArrowSvg = '<svg class="bidirectional-flip" width="24" height="24" fill="currentColor"><path d="M9.894 5.106a.75.75 0 0 1 0 1.06L4.811 11.25 21 11.25a.75.75 0 0 1 0 1.5l-16.191-.001 5.085 5.085a.75.75 0 0 1-1.06 1.06L2.47 12.53a.75.75 0 0 1 0-1.06l6.364-6.364a.75.75 0 0 1 1.06 0Z"/></svg>';
 export const timeSvg = '<svg width="14" height="15" fill="currentColor"><path d="M7.4335 4.241a.4376.4376 0 0 0-.871.0594v3.783l.0044.0622a.4375.4375 0 0 0 .1921.3029L8.9242 9.877l.0566.0317a.4376.4376 0 0 0 .5495-.1559l.0317-.0566a.4376.4376 0 0 0-.1559-.5495L7.4375 7.8471V4.3004l-.004-.0593ZM7 1.6667c-3.2217 0-5.8333 2.6116-5.8333 5.8333 0 3.2217 2.6116 5.8333 5.8333 5.8333 3.2217 0 5.8333-2.6116 5.8333-5.8333 0-3.2217-2.6116-5.8333-5.8333-5.8333Zm0 .814c2.7721 0 5.0194 2.2472 5.0194 5.0193 0 2.7721-2.2473 5.0194-5.0194 5.0194S1.9806 10.2721 1.9806 7.5 4.228 2.4806 7 2.4806Z"/></svg>';
+export const closeBarSvg = '<svg><rect width="40" height="4" rx="2"/></svg>';

package/dist/components/calendar/index.d.ts

@@ -1,4 +1,4 @@
-import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
+import { type BaseAttrs, type BaseEmits, type Emit2EventMap, UiBase } from '../web-component-base';
 import { type Weeks } from './weeks';
 export { type Weeks, weekKey, getWeekInOrder } from './weeks';
 export interface Attrs extends BaseAttrs {
@@ -43,7 +43,7 @@ export interface Attrs extends BaseAttrs {
      */
     'show-other-month'?: boolean;
 }
-export interface Emits {
+export interface Emits extends BaseEmits {
     'select-time': Date;
     'hover-item': Date;
 }
@@ -74,7 +74,7 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
     private _onWeekStartAtChange;
     private _onTimeChange;
     private _onClick;

package/dist/components/date-time-selector/index.d.ts

@@ -1,9 +1,10 @@
 import { type Weeks } from '../calendar';
 import { type Granularity as TimeGranularity } from '../hhmmss-ms-list-grp/selector';
-import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
+import { type reExportPopoverAttrs } from '../popover/attr-sync-helper';
+import { type BaseAttrs, type BaseEmits, type Emit2EventMap, UiBase } from '../web-component-base';
 export declare const granularityList: readonly ["day", "hour", "minute", "second", "millisecond"];
 export type Granularity = (typeof granularityList)[number];
-export interface Attrs extends BaseAttrs {
+export type Attrs = BaseAttrs & reExportPopoverAttrs & {
     /**
      * Set which day of the week is the first day.
      * @type `'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'`
@@ -37,8 +38,8 @@ export interface Attrs extends BaseAttrs {
      * @type {`string | number`} A value that can be passed to the Date constructor.
      */
     'max-time'?: string | number;
-}
-export interface Emits {
+};
+export interface Emits extends BaseEmits {
     'select-time': Date;
     'open-change': boolean;
 }
@@ -71,10 +72,11 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     private get _navEle();
     private get _calendar();
     private get _timeSelector();
+    private get _popoverEle();
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
     private _render;
     private _onCalendarSelect;
     private _onNavChange;

package/dist/components/date-time-selector/index.mjs

@@ -8,6 +8,12 @@ import {
 import {
   granularityList as timeGranularityList
 } from "../hhmmss-ms-list-grp/selector.mjs";
+import {
+  clearupPopEleAttrSync2Parent,
+  parentPopAttrSync2PopEle,
+  popEleAttrSync2Parent,
+  popoverAttrKeys
+} from "../popover/attr-sync-helper.mjs";
 import {
   UiBase
 } from "../web-component-base/index.mjs";
@@ -69,7 +75,8 @@ export class Ele extends UiBase {
       "showing-time",
       "min-time",
       "max-time",
-      "min-granularity"
+      "min-granularity",
+      ...popoverAttrKeys
     ];
   }
   _getTimeAttr(name, defaultValue) {
@@ -135,10 +142,14 @@ export class Ele extends UiBase {
       "dt-hhmmss-ms-selector"
     );
   }
+  get _popoverEle() {
+    return this.shadowRoot.querySelector("dt-popover");
+  }
   connectedCallback() {
     if (!super.connectedCallback()) return;
     this._calendar.formatter = (i) => String(i).padStart(2, "0");
     this._render();
+    popEleAttrSync2Parent(this, this._popoverEle);
     this._calendar.addEventListener("select-time", this._onCalendarSelect);
     this._navEle.addEventListener("change", this._onNavChange);
     this._navEle.addEventListener(
@@ -153,6 +164,7 @@ export class Ele extends UiBase {
   }
   disconnectedCallback() {
     if (!super.disconnectedCallback()) return;
+    clearupPopEleAttrSync2Parent(this);
     this._calendar.removeEventListener(
       "select-time",
       this._onCalendarSelect
@@ -170,6 +182,9 @@ export class Ele extends UiBase {
   }
   _onAttrChanged(name, oldValue, newValue) {
     super._onAttrChanged(name, oldValue, newValue);
+    if (parentPopAttrSync2PopEle(name, oldValue, newValue, this._popoverEle)) {
+      return;
+    }
     this._render();
     if (name === "current-time") {
       this.dispatchEvent("select-time", this.currentTime);

package/dist/components/date-time-selector/styleStr.mjs

@@ -3,4 +3,4 @@ var __defProp = Object.defineProperty;
 var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
 var _a;
 import { css } from "../../utils.mjs";
-export const styleStr = css(_a || (_a = __template(["\n:host {\n  font-size: 14px;\n}\ndt-popover {\n  width: 100%;\n}\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;\n  position: fixed;\n  width: 285px;\n}\n.wrapper > * {\n  width: 100%;\n}\n\ndt-calendar-base {\n  // 254 = item height 6 * 30 + week 14 + gap 10 * 6\n  height: 254px;\n}\ndt-calendar-base::part(week) {\n  font-size: 12px;\n  line-height: 14px;\n}\ndt-calendar-base::part(item) {\n  font-size: 14px;\n}\ndt-calendar-base.hide {\n  display: none;\n}\n\ndt-yyyymm-nav::part(list-grp) {\n  height: 254px;\n  margin-top: 15px;\n}\n"])));
+export const styleStr = css(_a || (_a = __template(["\n:host {\n  font-size: 14px;\n}\ndt-popover {\n  width: 100%;\n}\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;\n  width: 285px;\n}\n.wrapper > * {\n  width: 100%;\n}\n\ndt-calendar-base {\n  // 254 = item height 6 * 30 + week 14 + gap 10 * 6\n  height: 254px;\n}\ndt-calendar-base::part(week) {\n  font-size: 12px;\n  line-height: 14px;\n}\ndt-calendar-base::part(item) {\n  font-size: 14px;\n}\ndt-calendar-base.hide {\n  display: none;\n}\n\ndt-yyyymm-nav::part(list-grp) {\n  height: 254px;\n  margin-top: 15px;\n}\n\n@media (max-width: 750px) {\n  .wrapper {\n    width: 100%;\n  }\n}\n"])));

package/dist/components/hhmmss-ms-list-grp/base.d.ts

@@ -1,4 +1,4 @@
-import { type BaseAttrs, UiBase } from '../web-component-base';
+import { type BaseAttrs, BaseEmits, UiBase } from '../web-component-base';
 export declare const granularityList: readonly ["hour", "minute", "second", "millisecond"];
 export type Granularity = (typeof granularityList)[number];
 export declare const colOrderList: readonly ["hms", "hsm", "mhs", "msh", "shm", "smh"];
@@ -17,8 +17,7 @@ export interface Attrs extends BaseAttrs {
     'min-granularity'?: Granularity;
     'col-order'?: ColOrder;
 }
-export interface BaseEmits {
-}
+export type { BaseEmits };
 /**
  * 时分秒毫秒选择器
  */
@@ -41,7 +40,7 @@ export declare class BaseEle<A extends Attrs, E extends BaseEmits> extends UiBas
     scrollToCurrentItem(): void;
     connectedCallback(): boolean | void;
     disconnectedCallback(): boolean | void;
-    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
     private _renderCols;
     private _updateGranularity;
     private _updateColsValue;

package/dist/components/hhmmss-ms-list-grp/css.mjs

@@ -6,4 +6,4 @@ import { css } from "../../utils.mjs";
 export const baseCss = css(_a || (_a = __template(["\n.cols {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  height: 0;\n  justify-content: space-between;\n  gap: 2px;\n}\n\n.col {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.col > span {\n  text-align: center;\n  display: inline-block;\n  line-height: 27px;\n}\n\ndt-num-list {\n  flex: 1;\n}\n\n.ms-input {\n  width: 100%;\n  border: 1px solid var(--dt-border-input, #0003);\n  border-radius: 6px;\n  padding: 4px;\n  cursor: text;\n}\n.ms-input input {\n  background-color: transparent;\n  color: inherit;\n}\n\nlabel > span {\n  display: inline-block;\n  line-height: 1;\n  font-size: 14px;\n  margin-bottom: 2px;\n}\n\ninput {\n  width: 100%;\n  padding: 0;\n  border: none;\n  outline: none;\n}\n\ninput::placeholder {\n  color: var(--dt-text-secondary, #999);\n}\n"])));
 export const listGrpCss = css(_b || (_b = __template(["", "\n:host {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 15px;\n}\n"])), baseCss);
 import { svg2cssUrl, timeSvg } from "../../assets/index.mjs";
-export const selectorCss = css(_c || (_c = __template(["", '\n.list-grp {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 15px;\n}\n\ndt-popover {\n  position: relative;\n  width: 100%;\n}\n\n[slot="trigger"] {\n  width: 100%;\n  padding: 4px;\n  display: flex;\n  gap: 5px;\n  border-radius: 4px;\n  min-height: 30px;\n  border: 1px solid var(--dt-border-input, #0001);\n  align-items: center;\n  cursor: pointer;\n}\n\n[open] > [slot="trigger"] {\n  border-color: var(--dt-accent, #18181B);\n}\n\n.time-icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  position: relative;\n}\n.time-icon::before {\n  content: \'\';\n  background-color: var(--dt-text-main, #333);\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  mask-size: contain;\n  mask-image: ', ";\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  -webkit-mask-size: contain;\n  -webkit-mask-image: ", ';\n}\n\n.time-echo {\n  font-size: 14px;\n  color: var(--dt-text-secondary, #999);\n  line-height: 1;\n}\n\n[slot="pop"] {\n  position: absolute;\n  width: 100%;\n  height: 461px;\n\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  padding: 15px;\n}\n\nh3 {\n  font-size: 16px;\n  margin: 0;\n  line-height: 1;\n}\n\nbutton {\n  border: none;\n  min-height: 30px;\n  border-radius: 6px;\n  padding: 5px 10px;\n  font-size: 14px;\n  background-color: var(--dt-accent, #18181B);\n  color: var(--dt-text-reverse, #fff);\n}\nbutton:hover {\n  background-color: var(--color-accent-hover, #000);\n}\n\ndt-num-list {\n  scroll-behavior: smooth;\n}\ndt-num-list::part(container) {\n  gap: 2px;\n}\ndt-num-list::part(item) {\n  font-size: 14px;\n  line-height: 17px;\n}\n'])), baseCss, svg2cssUrl(timeSvg), svg2cssUrl(timeSvg));
+export const selectorCss = css(_c || (_c = __template(["", '\n.list-grp {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 15px;\n}\n\ndt-popover {\n  width: 100%;\n}\ndt-popover::part(pop) {\n  width: 100%;\n}\n\n[slot="trigger"] {\n  width: 100%;\n  padding: 4px;\n  display: flex;\n  gap: 5px;\n  border-radius: 4px;\n  min-height: 30px;\n  border: 1px solid var(--dt-border-input, #0001);\n  align-items: center;\n  cursor: pointer;\n}\n\n[open] > [slot="trigger"] {\n  border-color: var(--dt-accent, #18181B);\n}\n\n.time-icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  position: relative;\n}\n.time-icon::before {\n  content: \'\';\n  background-color: var(--dt-text-main, #333);\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  mask-size: contain;\n  mask-image: ', ";\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  -webkit-mask-size: contain;\n  -webkit-mask-image: ", ';\n}\n\n.time-echo {\n  font-size: 14px;\n  color: var(--dt-text-secondary, #999);\n  line-height: 1;\n}\n\n[slot="pop"] {\n  width: 100%;\n  height: 461px;\n\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  padding: 15px;\n}\n\nh3 {\n  font-size: 16px;\n  margin: 0;\n  line-height: 1;\n}\n\nbutton {\n  border: none;\n  min-height: 30px;\n  border-radius: 6px;\n  padding: 5px 10px;\n  font-size: 14px;\n  background-color: var(--dt-accent, #18181B);\n  color: var(--dt-text-reverse, #fff);\n}\nbutton:hover {\n  background-color: var(--color-accent-hover, #000);\n}\n\ndt-num-list {\n  scroll-behavior: smooth;\n}\ndt-num-list::part(container) {\n  gap: 2px;\n}\ndt-num-list::part(item) {\n  font-size: 14px;\n  line-height: 17px;\n}\n'])), baseCss, svg2cssUrl(timeSvg), svg2cssUrl(timeSvg));

package/dist/components/hhmmss-ms-list-grp/html.mjs

@@ -8,4 +8,4 @@ NumListEle.define();
 export const baseHtml = html(_a || (_a = __template(['\n<div class="cols" part="cols">\n    <div class="col hour" part="col hour">\n        <span><dt-i18n i18n-key="timeUnit.hour"></dt-i18n></span>\n        <dt-num-list\n            exportparts="container:list-container, item, item-current"\n            part="list hour"\n            class="hour"\n            min-num="0"\n            max-num="23"\n        ></dt-num-list>\n    </div>\n    <div class="col minute" part="col minute">\n        <span><dt-i18n i18n-key="timeUnit.minute"></dt-i18n></span>\n        <dt-num-list\n            exportparts="container:list-container, item, item-current"\n            part="list minute"\n            class="minute"\n            min-num="0"\n            max-num="59"\n        ></dt-num-list>\n    </div>\n    <div class="col second" part="col second">\n        <span><dt-i18n i18n-key="timeUnit.second"></dt-i18n></span>\n        <dt-num-list\n            exportparts="container:list-container, item, item-current"\n            part="list second"\n            class="second"\n            min-num="0"\n            max-num="59"\n        ></dt-num-list>\n    </div>\n</div>\n<label class="ms-input" part="ms-wrapper">\n    <span part="ms-label"><dt-i18n i18n-key="timeUnit.millisecond"></dt-i18n></span>\n    <input part="ms-input" id="ms" type="number" class="millisecond" min="0" max="999" step="1" placeholder="000" />\n</label>\n'])));
 import { Ele as PopoverEle } from "../popover/index.mjs";
 PopoverEle.define();
-export const selectorHtml = html(_b || (_b = __template(['\n<dt-popover part="popover">\n  <div slot="trigger">\n    <i class="time-icon"></i>\n    <span class="time-echo">hh:mm:ss.sss</span>\n  </div>\n  <div slot="pop">\n    <h3><slot name="title"><dt-i18n i18n-key="time.singleTitle"></dt-i18n></slot></h3>\n    <div class="list-grp">', '</div>\n    <button><dt-i18n i18n-key="box.confirm"></dt-i18n></button>\n  </div>\n</dt-popover>\n'])), baseHtml);
+export const selectorHtml = html(_b || (_b = __template(['\n<dt-popover part="popover" strategy="absolute" placement="bottom">\n  <div slot="trigger">\n    <i class="time-icon"></i>\n    <span class="time-echo">hh:mm:ss.sss</span>\n  </div>\n  <div slot="pop">\n    <h3><slot name="title"><dt-i18n i18n-key="time.singleTitle"></dt-i18n></slot></h3>\n    <div class="list-grp">', '</div>\n    <button><dt-i18n i18n-key="box.confirm"></dt-i18n></button>\n  </div>\n</dt-popover>\n'])), baseHtml);

package/dist/components/hhmmss-ms-list-grp/index.d.ts

@@ -14,6 +14,6 @@ export type EventMap = Emit2EventMap<Emits>;
 export declare class Ele extends BaseEle<BaseAttrs, Emits> {
     static readonly tagName: "dt-hhmmss-ms-list-grp";
     constructor();
-    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
     private _emitChange;
 }

package/dist/components/hhmmss-ms-list-grp/selector.d.ts

@@ -27,7 +27,7 @@ export declare class Ele extends BaseEle<Attrs, Emits> {
     get open(): boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
     get currentTime(): number | string | Date;
     set currentTime(val: number | string | Date);
     private _render;

package/dist/components/hhmmss-ms-list-grp/selector.mjs

@@ -1,7 +1,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 { debounce, getCurrentTzMs } from "../../utils.mjs";
+import { debounce, getCurrentTzOffsetMs } from "../../utils.mjs";
 import { Ele as PopoverEle } from "../popover/index.mjs";
 import {
   BaseEle
@@ -16,8 +16,8 @@ export class Ele extends BaseEle {
     __publicField(this, "_template", selectorHtml);
     __publicField(this, "_render", debounce(() => {
       if (!this.isConnected) return;
-      const tz = getCurrentTzMs();
-      this.millisecond = (+this.currentTime + tz) % (24 * 60 * 60 * 1e3);
+      const tz = getCurrentTzOffsetMs();
+      this.millisecond = (+this.currentTime - tz) % (24 * 60 * 60 * 1e3);
       this.shadowRoot.querySelector(".time-echo").textContent = this.timeFormatter(this.currentTime, this.minGranularity);
     }, 0));
     __publicField(this, "_onPopoverChange", (e) => {
@@ -26,17 +26,19 @@ export class Ele extends BaseEle {
       this.scrollToCurrentItem();
     });
     __publicField(this, "_onDoneBtnClick", (_e) => {
-      const calcTime = (time, ms) => {
-        time.setHours(0, 0, 0, 0);
-        time.setMilliseconds(ms);
-        return time;
+      const calcTime = (time2, ms) => {
+        time2.setHours(0, 0, 0, 0);
+        time2.setMilliseconds(ms);
+        return time2;
       };
-      this.currentTime = calcTime(this.currentTime, this.millisecond);
+      const time = calcTime(this.currentTime, this.millisecond);
+      this.currentTime = time;
+      this.dispatchEvent("select-time", time);
       this._render();
       this._popoverEle.open = false;
     });
     __publicField(this, "timeFormatter", (time, minGranularity) => {
-      const t = new Date(+time + getCurrentTzMs()).toISOString().slice(11, 23);
+      const t = new Date(+time - getCurrentTzOffsetMs()).toISOString().slice(11, 23);
       if (minGranularity === "hour") return t.slice(0, 2);
       if (minGranularity === "minute") return t.slice(0, 5);
       if (minGranularity === "second") return t.slice(0, 8);
@@ -80,9 +82,6 @@ export class Ele extends BaseEle {
     super._onAttrChanged(name, oldValue, newValue);
     if (name === "millisecond") return;
     this._render();
-    if (name === "current-time") {
-      this.dispatchEvent("select-time", this.currentTime);
-    }
   }
   get currentTime() {
     const v = this._getAttr("current-time", "" + Date.now());

package/dist/components/num-list/index.css.mjs

@@ -3,4 +3,4 @@ var __defProp = Object.defineProperty;
 var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
 var _a;
 import { css } from "../../utils.mjs";
-export default css(_a || (_a = __template(["\n:host {\n  --color-current-bg: var(--calendar-item-in-range-bg, #002BE726);\n  --color-current-text: var(--calendar-item-in-range-text, #002BE7);\n  --color-hover-bg: var(--calendar-item-hover-bg, #0000000D);\n  --color-hover-text: var(--calendar-item-hover-text, #000);\n  display: block;\n  overflow: hidden auto;\n  position: relative !important;\n  overflow-anchor: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 5px;\n}\n\n.item {\n  cursor: pointer;\n  user-select: none;\n  width: 100%;\n  text-align: center;\n  border-radius: 2px;\n  padding: 5px 2px;\n}\n.item.item-current {\n  color: var(--color-current-text);\n  background-color: var(--color-current-bg);\n}\n.item:hover {\n  color: var(--color-hover-text);\n  background-color: var(--color-hover-bg);\n}\n"])));
+export default css(_a || (_a = __template(["\n:host {\n  --color-current-bg: var(--calendar-item-in-range-bg, #002BE726);\n  --color-current-text: var(--calendar-item-in-range-text, #002BE7);\n  --color-hover-bg: var(--calendar-item-hover-bg, #0000000D);\n  --color-hover-text: var(--calendar-item-hover-text, #000);\n  --color-current-hover-bg: var(--calendar-item-in-range-hover-bg, var(--color-current-bg));\n  --color-current-hover-text: var(--calendar-item-in-range-hover-text, var(--color-current-text));\n  display: block;\n  overflow: hidden auto;\n  position: relative !important;\n  overflow-anchor: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 5px;\n}\n\n.item {\n  cursor: pointer;\n  user-select: none;\n  width: 100%;\n  text-align: center;\n  border-radius: 2px;\n  padding: 5px 2px;\n}\n.item.item-current {\n  color: var(--color-current-text);\n  background-color: var(--color-current-bg);\n}\n.item:hover {\n  color: var(--color-hover-text);\n  background-color: var(--color-hover-bg);\n}\n.item.item-current:hover {\n  color: var(--color-current-hover-text);\n  background-color: var(--color-current-hover-bg);\n}\n"])));

package/dist/components/num-list/index.d.ts

@@ -1,4 +1,4 @@
-import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
+import { type BaseAttrs, type BaseEmits, type Emit2EventMap, UiBase } from '../web-component-base';
 export interface Attrs extends BaseAttrs {
     /**
      * The current number in the list. The component will scroll to this number when rendered.
@@ -17,14 +17,8 @@ export interface Attrs extends BaseAttrs {
      * @default Infinity
      */
     'max-num'?: number;
-    /**
-     * The position to scroll the current number into view.
-     * @type {`"center" | "end" | "nearest" | "start"`}
-     * @default "start"
-     */
-    position?: ScrollLogicalPosition;
 }
-export interface Emits {
+export interface Emits extends BaseEmits {
     'select-num': {
         oldNum: number;
         newNum: number;
@@ -58,9 +52,10 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     private _loadAfter;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
     private get _itemHeight();
     private get _pageSize();
+    private _isScrolling;
     scrollToCurrent: () => void;
     private _render;
     private _onClick;

package/dist/components/num-list/index.mjs

@@ -50,6 +50,7 @@ export class Ele extends UiBase {
       });
       (_c = this._intersectionOb) == null ? void 0 : _c.observe(items[0]);
       (_d = this._intersectionOb) == null ? void 0 : _d.observe(container.lastElementChild);
+      if (this._isScrolling) this.scrollToCurrent();
     }, 0));
     __publicField(this, "_loadAfter", debounce(() => {
       var _a2, _b, _c, _d;
@@ -77,15 +78,19 @@ export class Ele extends UiBase {
       });
       (_c = this._intersectionOb) == null ? void 0 : _c.observe(container.firstElementChild);
       (_d = this._intersectionOb) == null ? void 0 : _d.observe(items[items.length - 1]);
+      if (this._isScrolling) this.scrollToCurrent();
     }, 0));
+    __publicField(this, "_isScrolling", false);
     __publicField(this, "scrollToCurrent", () => {
       var _a2;
       const ele = this._currentItemEle;
       if (!ele) return;
+      const thisRect = this.getBoundingClientRect();
+      if (thisRect.height === 0) return;
       (_a2 = this._intersectionOb) == null ? void 0 : _a2.observe(ele);
-      const containerRect = this._containerEle.getBoundingClientRect();
+      this._isScrolling = true;
       const eleRect = ele.getBoundingClientRect();
-      const offsetTop = eleRect.top - containerRect.top + this.scrollTop;
+      const offsetTop = eleRect.top - thisRect.top + this.scrollTop;
       this.scrollTo({
         top: offsetTop
       });
@@ -189,12 +194,23 @@ export class Ele extends UiBase {
         const container = this._containerEle;
         const firstItem = container.firstElementChild;
         const lastItem = container.lastElementChild;
-        for (const { target, isIntersecting } of entries) {
+        for (const {
+          target,
+          isIntersecting,
+          intersectionRatio,
+          rootBounds,
+          boundingClientRect
+        } of entries) {
           if (!isIntersecting) continue;
           observer.unobserve(target);
           if (target === this._currentItemEle) {
             observer.observe(firstItem);
             observer.observe(lastItem);
+            if (intersectionRatio !== 1 || rootBounds && boundingClientRect && rootBounds.top !== boundingClientRect.top) {
+              observer.observe(target);
+            } else {
+              this._isScrolling = false;
+            }
           }
           if (target === firstItem) {
             this._loadBefore();

package/dist/components/period-selector/index.css.mjs

@@ -3,4 +3,4 @@ var __defProp = Object.defineProperty;
 var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
 var _a;
 import { css } from "../../utils.mjs";
-export default css(_a || (_a = __template(["\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n\n.date-echo {\n  display: flex;\n  gap: 5px;\n  align-items: center;\n}\n\n.start-date-echo-wrapper,\n.end-date-echo-wrapper {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  border-radius: 6px;\n  border: 1px solid var(--dt-border-input, #00000026);\n  padding: 4px;\n}\n.start-date-echo-wrapper.active,\n.end-date-echo-wrapper.active {\n  border-color: var(--dt-accent, #333);\n}\n\n.date-echo .label {\n  font-size: 14px;\n  line-height: 1;\n}\n\n.start-date-echo, .end-date-echo {\n  font-size: 16px;\n  line-height: 1;\n  font-weight: bold;\n}\n\n.dividing-line {\n  display: block;\n  height: 1px;\n  width: 20px;\n  background-color: var(--dt-border-input, #eee);\n}\n\ndt-yyyymm-nav::part(list-grp) {\n  height: 254px;\n  margin-top: 15px;\n}\n\ndt-calendar-base.hide {\n  display: none;\n}\n\n.calendars {\n  display: flex;\n  gap: 20px;\n}\n\n.wrapper {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n\ndt-calendar-base {\n  height: 254px;\n}\ndt-calendar-base::part(week) {\n  font-size: 12px;\n  line-height: 14px;\n}\ndt-calendar-base::part(item) {\n  font-size: 14px;\n}\n"])));
+export default css(_a || (_a = __template(["\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n\n.date-echo {\n  display: flex;\n  gap: 5px;\n  align-items: center;\n}\n\n.start-date-echo-wrapper,\n.end-date-echo-wrapper {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  border-radius: 6px;\n  border: 1px solid var(--dt-border-input, #00000026);\n  padding: 4px;\n}\n.start-date-echo-wrapper.active,\n.end-date-echo-wrapper.active {\n  border-color: var(--dt-accent, #333);\n}\n\n.date-echo .label {\n  font-size: 14px;\n  line-height: 1;\n}\n\n.start-date-echo, .end-date-echo {\n  font-size: 16px;\n  line-height: 1;\n  font-weight: bold;\n  white-space: pre-wrap;\n}\n\n.dividing-line {\n  display: block;\n  height: 1px;\n  width: 20px;\n  background-color: var(--dt-border-input, #eee);\n}\n\ndt-yyyymm-nav::part(list-grp) {\n  height: 254px;\n  margin-top: 15px;\n}\n\ndt-calendar-base.hide {\n  display: none;\n}\n\n.calendars {\n  display: flex;\n  gap: 20px;\n}\n\n.wrapper {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n\ndt-calendar-base {\n  height: 254px;\n}\ndt-calendar-base::part(week) {\n  font-size: 12px;\n  line-height: 14px;\n}\ndt-calendar-base::part(item) {\n  font-size: 14px;\n}\n\ndt-hhmmss-ms-selector {\n  width: 100%;\n}\n\n@media (max-width: 750px) {\n  .wrapper.end {\n    display: none;\n  }\n  .time-selector-wrapper {\n    display: flex;\n    gap: 5px;\n    align-items: center;\n  }\n  dt-hhmmss-ms-selector {\n    flex: 1;\n  }\n}\n"])));

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

@@ -1,6 +1,6 @@
 import { type Weeks } from '../calendar';
 import { type Granularity as TimeGranularity } from '../hhmmss-ms-list-grp/selector';
-import { type BaseAttrs, UiBase } from '../web-component-base';
+import { type BaseAttrs, type BaseEmits, UiBase } from '../web-component-base';
 export declare const granularityList: readonly ["day", "hour", "minute", "second", "millisecond"];
 export type Granularity = (typeof granularityList)[number];
 export interface Attrs extends BaseAttrs {
@@ -28,7 +28,7 @@ export interface Attrs extends BaseAttrs {
      */
     'week-start-at'?: Weeks;
 }
-export interface Emits {
+export interface Emits extends BaseEmits {
     change: {
         oldStartTime: Date;
         oldEndTime: Date;
@@ -64,17 +64,19 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     private _selectedDate;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
     private _updateNavCtrlBtn;
     private _render;
     private _updateDateEcho;
+    private _updateDatePoint;
     private _onCalendarSelect;
     private _onCalendarItemHover;
+    abortSelecting(): void;
     private _onNavChange;
     private _onNavOpenToggle;
     private _onTimeSelectorChange;
     showCalendarDatePoint(): void;
-    dateFormatter: (time: Date) => string;
+    dateFormatter: (time: Date, minGranularity: Granularity, isSmall: boolean) => string;
     get timeFormatter(): (time: Date, minGranularity: TimeGranularity) => string;
     set timeFormatter(fn: (time: Date, minGranularity: TimeGranularity) => string);
 }

package/dist/components/period-selector/index.html.mjs

@@ -12,5 +12,5 @@ PopoverEle.define();
 import { Ele as HhMmSsMsSelector } from "../hhmmss-ms-list-grp/selector.mjs";
 HhMmSsMsSelector.define();
 export default html(_b || (_b = __template(['\n<div class="date-echo">\n    <div class="start-date-echo-wrapper active">\n        <span class="label"><dt-i18n i18n-key="time.startDate"></dt-i18n></span>\n        <span class="start-date-echo">dd/mm/yyyy</span>\n    </div>\n    <i class="dividing-line"></i>\n    <div class="end-date-echo-wrapper">\n        <span class="label"><dt-i18n i18n-key="time.endDate"></dt-i18n></span>\n        <span class="end-date-echo">dd/mm/yyyy</span>\n    </div>\n</div><div class="calendars">', "</div>"])), ["start", "end"].map(
-  (s) => html(_a || (_a = __template(['\n<div class="wrapper ', '">\n    <dt-yyyymm-nav\n        show-ctrl-btn-month-add\n        show-ctrl-btn-month-sub\n    ></dt-yyyymm-nav>\n    <dt-calendar-base data-type="', '"></dt-calendar-base>\n    <dt-hhmmss-ms-selector data-type="', '">\n        <span slot="title"><dt-i18n i18n-key="time.', '"></dt-i18n></span>\n    </dt-hhmmss-ms-selector>\n</div>'])), s, s, s, s === "start" ? "startTime" : "endTime")
+  (s) => html(_a || (_a = __template(['\n<div class="wrapper ', '">\n    <dt-yyyymm-nav\n        show-ctrl-btn-month-add\n        show-ctrl-btn-month-sub\n    ></dt-yyyymm-nav>\n    <dt-calendar-base data-type="', '"></dt-calendar-base>\n    <div class="time-selector-wrapper">\n        <dt-hhmmss-ms-selector data-type="', '">\n            <span slot="title"><dt-i18n i18n-key="time.', '"></dt-i18n></span>\n        </dt-hhmmss-ms-selector>\n        <i class="dividing-line" style="display:none"></i>\n    </div>\n</div>'])), s, s, s, s === "start" ? "startTime" : "endTime")
 ).join(""));

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

@@ -1,7 +1,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 { closestByEvent, debounce } from "../../utils.mjs";
+import { closestByEvent, debounce, smallScreenObserver } from "../../utils.mjs";
 import {
   weekKey
 } from "../calendar/index.mjs";
@@ -36,9 +36,16 @@ export class Ele extends UiBase {
       let timeStart = this.timeStart;
       let timeEnd = this.timeEnd;
       if (timeStart > timeEnd) [timeStart, timeEnd] = [timeEnd, timeStart];
-      this._startCalendar.weekStartAt = this._endCalendar.weekStartAt = this.weekStartAt;
-      this._startNavEle.millisecond = this._startCalendar.showingTime = this._startCalendar.timeStart = this._endCalendar.timeStart = +timeStart;
-      this._endCalendar.timeEnd = this._startCalendar.timeEnd = +timeEnd;
+      const { _startCalendar, _endCalendar } = this;
+      _startCalendar.weekStartAt = _endCalendar.weekStartAt = this.weekStartAt;
+      _startCalendar.timeStart = _endCalendar.timeStart = +timeStart;
+      _endCalendar.timeEnd = _startCalendar.timeEnd = +timeEnd;
+      const isSmall = smallScreenObserver.isSmall;
+      if (!isSmall || !this._selectedDate || +timeStart !== +this._selectedDate) {
+        this._startNavEle.millisecond = _startCalendar.showingTime = +timeStart;
+      } else {
+        this._startNavEle.millisecond = _startCalendar.showingTime = +timeEnd;
+      }
       if (diffInMonth(timeStart, timeEnd) <= 1) {
         const nextMonth = new Date(
           timeStart.getFullYear(),
@@ -63,21 +70,57 @@ export class Ele extends UiBase {
       }
       this._updateDateEcho();
       this._updateNavCtrlBtn();
+      const startSelectorWrapper = this.shadowRoot.querySelector(
+        ".start .time-selector-wrapper"
+      );
+      const dividingLine = startSelectorWrapper.querySelector(
+        ".dividing-line"
+      );
+      if (smallScreenObserver.isSmall) {
+        startSelectorWrapper.appendChild(this._endTimeSelector);
+        dividingLine.style.display = "";
+      } else {
+        this.shadowRoot.querySelector(
+          ".end .time-selector-wrapper"
+        ).appendChild(this._endTimeSelector);
+        dividingLine.style.display = "none";
+      }
     }, 0));
+    __publicField(this, "_updateDatePoint", (datePoint) => {
+      if (!this._selectedDate) return;
+      const newDate = new Date(datePoint).setHours(0, 0, 0, 0);
+      const oldDate = new Date(this._selectedDate).setHours(0, 0, 0, 0);
+      const setStartDate = (date) => this.timeStart = new Date(
+        date + this._startTimeSelector.millisecond
+      );
+      const setEndDate = (date) => this.timeEnd = new Date(date + this._endTimeSelector.millisecond);
+      if (newDate === oldDate) {
+        setStartDate(newDate);
+        setEndDate(newDate);
+      } else if (newDate < oldDate) {
+        setStartDate(newDate);
+        setEndDate(oldDate);
+      } else {
+        setStartDate(oldDate);
+        setEndDate(newDate);
+      }
+    });
     __publicField(this, "_onCalendarSelect", (e) => {
       e.stopPropagation();
-      if (this._selectedDate) {
-        this._selectedDate = null;
-        this.timeEnd = +e.detail + this._endTimeSelector.millisecond;
+      if (this._selectedDate === null) {
+        const newTimePoint = new Date(
+          +e.detail + this._startTimeSelector.millisecond
+        );
+        this._selectedDate = newTimePoint;
+        this.timeStart = newTimePoint;
       } else {
-        this._selectedDate = this.timeEnd;
-        this.timeStart = +e.detail + this._startTimeSelector.millisecond;
+        this._updateDatePoint(e.detail);
+        this._selectedDate = null;
       }
     });
     __publicField(this, "_onCalendarItemHover", (e) => {
       e.stopPropagation();
-      if (!this._selectedDate) return;
-      this.timeEnd = +e.detail + this._endTimeSelector.millisecond;
+      this._updateDatePoint(e.detail);
     });
     __publicField(this, "_onNavChange", (e) => {
       e.stopPropagation();
@@ -107,7 +150,7 @@ export class Ele extends UiBase {
         this.timeEnd = e.detail;
       }
     });
-    __publicField(this, "dateFormatter", (time) => time.toLocaleDateString("en-GB"));
+    __publicField(this, "dateFormatter", (time, minGranularity, isSmall) => time.toLocaleDateString("en-GB"));
     this._applyTemplate();
   }
   static get observedAttributes() {
@@ -178,13 +221,13 @@ export class Ele extends UiBase {
   get _startTimeSelector() {
     var _a;
     return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
-      ".start dt-hhmmss-ms-selector"
+      'dt-hhmmss-ms-selector[data-type="start"]'
     );
   }
   get _endTimeSelector() {
     var _a;
     return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
-      ".end dt-hhmmss-ms-selector"
+      'dt-hhmmss-ms-selector[data-type="end"]'
     );
   }
   connectedCallback() {
@@ -231,6 +274,7 @@ export class Ele extends UiBase {
       "select-time",
       this._onTimeSelectorChange
     );
+    smallScreenObserver.observe(this, this._render);
   }
   disconnectedCallback() {
     if (!super.disconnectedCallback()) return;
@@ -276,6 +320,7 @@ export class Ele extends UiBase {
       "select-time",
       this._onTimeSelectorChange
     );
+    smallScreenObserver.unobserve(this);
   }
   _onAttrChanged(name, oldValue, newValue) {
     super._onAttrChanged(name, oldValue, newValue);
@@ -285,15 +330,17 @@ export class Ele extends UiBase {
     const timeStart = new Date(this._startNavEle.millisecond);
     const timeEnd = new Date(this._endNavEle.millisecond);
     const showCtrlBtn = diffInMonth(timeStart, timeEnd) > 1;
-    this._startNavEle.showCtrlBtnMonthAdd = showCtrlBtn;
-    this._endNavEle.showCtrlBtnMonthSub = showCtrlBtn;
+    const isSmall = smallScreenObserver.isSmall;
+    this._startNavEle.showCtrlBtnMonthAdd = isSmall || showCtrlBtn;
+    this._endNavEle.showCtrlBtnMonthSub = isSmall || showCtrlBtn;
   }
   _updateDateEcho() {
     let timeStart = this.timeStart;
     let timeEnd = this.timeEnd;
     if (timeStart > timeEnd) [timeStart, timeEnd] = [timeEnd, timeStart];
-    this.shadowRoot.querySelector(".start-date-echo").textContent = this.dateFormatter(timeStart);
-    this.shadowRoot.querySelector(".end-date-echo").textContent = this.dateFormatter(timeEnd);
+    const isSmall = smallScreenObserver.isSmall;
+    this.shadowRoot.querySelector(".start-date-echo").textContent = this.dateFormatter(timeStart, this.minGranularity, isSmall);
+    this.shadowRoot.querySelector(".end-date-echo").textContent = this.dateFormatter(timeEnd, this.minGranularity, isSmall);
     this.shadowRoot.querySelector(
       ".start-date-echo-wrapper"
     ).classList.toggle("active", !this._selectedDate);
@@ -301,9 +348,17 @@ export class Ele extends UiBase {
       ".end-date-echo-wrapper"
     ).classList.toggle("active", !!this._selectedDate);
   }
+  abortSelecting() {
+    if (!this._selectedDate) return;
+    this._selectedDate = null;
+    this._render();
+  }
   showCalendarDatePoint() {
     this._render();
   }
+  // + (isSmall && minGranularity !== 'day'
+  //     ? ' ' + this.timeFormatter(time, minGranularity)
+  //     : '');
   get timeFormatter() {
     return this._startTimeSelector.timeFormatter;
   }

package/dist/components/popover/attr-sync-helper.d.ts

@@ -0,0 +1,9 @@
+import { type Attrs as PopoverAttrs, Ele as PopoverEle } from '.';
+import type { BaseAttrs } from '../web-component-base';
+export type reExportPopoverAttrs = {
+    [K in `pop-${Exclude<keyof PopoverAttrs, keyof BaseAttrs>}`]?: K extends `pop-${infer U}` ? U extends keyof PopoverAttrs ? PopoverAttrs[U] : never : never;
+};
+export declare const popoverAttrKeys: readonly ["pop-disabled", "pop-open", "pop-placement", "pop-strategy", "pop-offset"];
+export declare const parentPopAttrSync2PopEle: (name: string, oldValue: string | null, newValue: string | null, popEle: PopoverEle) => name is (typeof popoverAttrKeys)[number];
+export declare const popEleAttrSync2Parent: (parent: HTMLElement, popEle: PopoverEle) => void;
+export declare const clearupPopEleAttrSync2Parent: (parent: HTMLElement) => void | undefined;