@gez/date-time-kit 2.0.0-alpha.0 → 2.0.0-alpha.2

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

@@ -12,7 +12,7 @@ export interface Attrs extends BaseAttrs {
     /**
      * The start time of the calendar display range.
      * @type {`string | number`} A value that can be passed to the Date constructor.
-     * @default 'current-time'
+     * @default 'showing-time'
      */
     'time-start'?: string | number;
     /**

package/dist/components/calendar/index.mjs

@@ -191,7 +191,7 @@ export class Ele extends UiBase {
     return this._getAttr("week-start-at", "sun");
   }
   set weekStartAt(val) {
-    if (weekKey.includes(val)) return;
+    if (!weekKey.includes(val)) return;
     this.setAttribute("week-start-at", val);
   }
   get showOtherMonth() {

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

@@ -0,0 +1,61 @@
+import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
+import { type Weeks } from '../calendar';
+export interface Attrs extends BaseAttrs {
+    /**
+     * Set which day of the week is the first day.
+     * @type `'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'`
+     * @default 'sun'
+     */
+    'week-start-at'?: Weeks;
+    /**
+     * The time of the calendar.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     * @default Date.now()
+     */
+    'current-time'?: string | number;
+    /**
+     * The showing time, used to determine the month to show on calendar.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     * @default 'current-time'
+     */
+    'showing-time'?: string | number;
+    /**
+     * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
+     * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
+     */
+    'min-granularity'?: 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
+}
+export interface Emits {
+    'select-time': Date;
+    'open-change': boolean;
+}
+export type EventMap = Emit2EventMap<Emits>;
+export declare class Ele extends UiBase<Attrs, Emits> {
+    static readonly tagName: "dt-date-time-selector";
+    static get observedAttributes(): string[];
+    get currentTime(): number | string | Date;
+    set currentTime(val: number | string | Date);
+    get showingTime(): number | string | Date;
+    set showingTime(val: number | string | Date);
+    get weekStartAt(): Weeks;
+    set weekStartAt(val: Weeks);
+    get minGranularity(): "day" | "hour" | "minute" | "second" | "millisecond";
+    set minGranularity(val: 'day' | 'hour' | 'minute' | 'second' | 'millisecond');
+    protected _style: string;
+    protected _template: string;
+    private get _navEle();
+    private get _calendar();
+    private get _timeSelector();
+    private get _timePopover();
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    private _render;
+    private _onCalendarSelect;
+    private _onNavChange;
+    private _onTimePopoverOpenChange;
+    private _onNavOpenToggle;
+    private _onTimeSelectorDoneClick;
+    timeFormatter: (time: Date, minGranularity: "day" | "hour" | "minute" | "second" | "millisecond") => string;
+}

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

@@ -0,0 +1,212 @@
+var __freeze = Object.freeze;
+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);
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a;
+import { closestByEvent, debounce, html } from "../../utils.mjs";
+import {
+  UiBase
+} from "../web-component-base/index.mjs";
+import {
+  Ele as YyyyMmNavEle
+} from "../yyyymm-nav/index.mjs";
+import { styleStr } from "./styleStr.mjs";
+YyyyMmNavEle.define();
+import {
+  Ele as CalendarBaseEle,
+  weekKey
+} from "../calendar/index.mjs";
+CalendarBaseEle.define();
+import { Ele as HhMmSsMsListGrpEle } from "../hhmmss-ms-list-grp/index.mjs";
+HhMmSsMsListGrpEle.define();
+import { Ele as PopoverEle } from "../popover/index.mjs";
+PopoverEle.define();
+const granularityList = [
+  "day",
+  "hour",
+  "minute",
+  "second",
+  "millisecond"
+];
+export class Ele extends UiBase {
+  constructor() {
+    super();
+    __publicField(this, "_style", styleStr);
+    __publicField(this, "_template", html(_a || (_a = __template(['\n<dt-popover>\n    <slot slot="trigger" name="trigger"><button>select date and time</button></slot>\n    <div slot="pop" class="wrapper menu">\n        <dt-yyyymm-nav\n            show-ctrl-btn-month-add\n            show-ctrl-btn-month-sub\n        ></dt-yyyymm-nav>\n        <dt-calendar-base></dt-calendar-base>\n        <dt-popover id="time-popover">\n            <div slot="trigger" class="time-echo-wrapper">\n                <i class="time-icon"></i>\n                <span class="time-echo">hh:mm:ss.sss</span>\n            </div>\n            <div slot="pop" class="time-selector">\n                <h3 class="title">Select Time</h3>\n                <dt-hhmmss-ms-list-grp></dt-hhmmss-ms-list-grp>\n                <button id="time-selector-done-btn">Done</button>\n            </div>\n        </dt-popover>\n    </div>\n</dt-popover>\n']))));
+    __publicField(this, "_render", debounce(() => {
+      if (!this.isConnected) return;
+      const currentTime = this.currentTime;
+      this._calendar.weekStartAt = this.weekStartAt;
+      const tz = (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3;
+      this._navEle.millisecond = this._calendar.timeStart = this._calendar.timeEnd = +currentTime;
+      this._calendar.showingTime = this.showingTime;
+      const selectorWrapper = this.shadowRoot.querySelector(".time-selector");
+      if (this.minGranularity === "day") {
+        this._timeSelector.millisecond = 0;
+        selectorWrapper.style.display = "none";
+        return;
+      }
+      selectorWrapper.style.display = "";
+      this._timeSelector.minGranularity = this.minGranularity;
+      this._timeSelector.millisecond = (+currentTime - tz) % (24 * 60 * 60 * 1e3);
+      this.shadowRoot.querySelector(".wrapper .time-echo").textContent = this.timeFormatter(currentTime, this.minGranularity);
+    }, 0));
+    __publicField(this, "_onCalendarSelect", (e) => {
+      e.stopPropagation();
+      this.currentTime = +e.detail + this._timeSelector.millisecond;
+    });
+    __publicField(this, "_onNavChange", (e) => {
+      e.stopPropagation();
+      const wrapper = closestByEvent(e, ".wrapper");
+      if (!wrapper) return;
+      const { newTime } = e.detail;
+      this._calendar.showingTime = +newTime;
+    });
+    __publicField(this, "_onTimePopoverOpenChange", (e) => {
+      var _a2;
+      if (!(e.target instanceof PopoverEle)) return;
+      e.stopPropagation();
+      if (!e.detail) return this._render();
+      (_a2 = e.target.querySelector("dt-hhmmss-ms-list-grp")) == null ? void 0 : _a2.scrollToCurrentItem();
+    });
+    __publicField(this, "_onNavOpenToggle", (e) => {
+      var _a2;
+      if (!(e.target instanceof YyyyMmNavEle)) return;
+      e.stopPropagation();
+      (_a2 = e.target.nextElementSibling) == null ? void 0 : _a2.classList.toggle("hide", e.detail);
+    });
+    __publicField(this, "_onTimeSelectorDoneClick", (e) => {
+      const btn = closestByEvent(e, "#time-selector-done-btn");
+      if (!btn) return;
+      const calcTime = (time, ms) => {
+        time.setHours(0, 0, 0, 0);
+        time.setMilliseconds(ms);
+        return time;
+      };
+      this.currentTime = calcTime(
+        this.currentTime,
+        this._timeSelector.millisecond
+      );
+      this._timePopover.open = false;
+    });
+    __publicField(this, "timeFormatter", (time, minGranularity) => {
+      const t = new Date(+time - (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3).toISOString().slice(11, 23);
+      if (minGranularity === "day") return "";
+      if (minGranularity === "hour") return t.slice(0, 2);
+      if (minGranularity === "minute") return t.slice(0, 5);
+      if (minGranularity === "second") return t.slice(0, 8);
+      return t;
+    });
+    this._applyTemplate();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "week-start-at",
+      "current-time",
+      "showing-time",
+      "min-granularity"
+    ];
+  }
+  get currentTime() {
+    const v = this._getAttr("current-time", "" + Date.now());
+    return new Date(Number.isNaN(+v) ? v : +v);
+  }
+  set currentTime(val) {
+    const v = new Date(val);
+    if (Number.isNaN(+v)) return;
+    this.setAttribute("current-time", +v + "");
+  }
+  get showingTime() {
+    const v = this._getAttr("showing-time", "" + this.currentTime);
+    return new Date(Number.isNaN(+v) ? v : +v);
+  }
+  set showingTime(val) {
+    const v = new Date(val);
+    if (Number.isNaN(+v)) return;
+    this.setAttribute("showing-time", +v + "");
+  }
+  get weekStartAt() {
+    return this._getAttr("week-start-at", "sun");
+  }
+  set weekStartAt(val) {
+    if (!weekKey.includes(val)) return;
+    this.setAttribute("week-start-at", val);
+  }
+  get minGranularity() {
+    return this._getAttr("min-granularity", "millisecond");
+  }
+  set minGranularity(val) {
+    if (!granularityList.includes(val)) return;
+    this.setAttribute("min-granularity", val);
+  }
+  get _navEle() {
+    var _a2;
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("dt-yyyymm-nav");
+  }
+  get _calendar() {
+    var _a2;
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(
+      "dt-calendar-base"
+    );
+  }
+  get _timeSelector() {
+    var _a2;
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(
+      "dt-hhmmss-ms-list-grp"
+    );
+  }
+  get _timePopover() {
+    var _a2;
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("#time-popover");
+  }
+  connectedCallback() {
+    var _a2;
+    if (!super.connectedCallback()) return;
+    this._calendar.formatter = (i) => String(i).padStart(2, "0");
+    this._render();
+    this._calendar.addEventListener("select-time", this._onCalendarSelect);
+    this._navEle.addEventListener("change", this._onNavChange);
+    this._timePopover.addEventListener(
+      "open-change",
+      this._onTimePopoverOpenChange
+    );
+    this._navEle.addEventListener(
+      "popover-open-change",
+      this._onNavOpenToggle
+    );
+    (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelectorAll("#time-selector-done-btn").forEach((btn) => {
+      btn.addEventListener("click", this._onTimeSelectorDoneClick);
+    });
+  }
+  disconnectedCallback() {
+    var _a2;
+    if (!super.disconnectedCallback()) return;
+    this._calendar.removeEventListener(
+      "select-time",
+      this._onCalendarSelect
+    );
+    this._navEle.removeEventListener("change", this._onNavChange);
+    this._timePopover.removeEventListener(
+      "open-change",
+      this._onTimePopoverOpenChange
+    );
+    this._navEle.removeEventListener(
+      "popover-open-change",
+      this._onNavOpenToggle
+    );
+    (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelectorAll("#time-selector-done-btn").forEach((btn) => {
+      btn.removeEventListener("click", this._onTimeSelectorDoneClick);
+    });
+  }
+  _onAttrChanged(name, oldValue, newValue) {
+    super._onAttrChanged(name, oldValue, newValue);
+    this._render();
+    if (name === "current-time") {
+      this.dispatchEvent("select-time", this.currentTime);
+    }
+  }
+}
+__publicField(Ele, "tagName", "dt-date-time-selector");
+Ele.define();

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

@@ -0,0 +1 @@
+export declare const styleStr: string;

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

@@ -0,0 +1,6 @@
+var __freeze = Object.freeze;
+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.wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\ndt-popover {\n  position: relative;\n}\n\n[open] > .time-echo-wrapper {\n  border-color: #18181B;\n}\n\n.time-echo-wrapper {\n  width: 100%;\n  padding: 4px;\n  display: flex;\n  gap: 5px;\n  border-radius: 4px;\n  min-height: 30px;\n  border: 1px solid #0001;\n  box-sizing: border-box;\n  align-items: center;\n  cursor: pointer;\n}\n\n.time-selector {\n  position: absolute;\n  width: 100%;\n  height: 461px;\n  box-sizing: border-box;\n  background-color: #fff;\n\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  padding: 15px;\n  border-radius: 6px;\n  border: 1px solid #eee;\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n\n  .title {\n    font-size: 16px;\n    margin: 0;\n    line-height: 1;\n  }\n}\n\ndt-hhmmss-ms-list-grp::part(list-container) {\n  gap: 2px;\n}\ndt-hhmmss-ms-list-grp::part(list) {\n  scroll-behavior: smooth;\n}\ndt-hhmmss-ms-list-grp::part(item) {\n  font-size: 14px;\n  line-height: 17px;\n}\n\n#time-selector-done-btn {\n  border: none;\n  min-height: 30px;\n  border-radius: 6px;\n  padding: 5px 10px;\n  font-size: 14px;\n  background-color: #18181B;\n  color: #fff;\n}\n\n.time-icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E\") 50%/20px 20px no-repeat;\n}\n\n.time-echo {\n  font-size: 14px;\n  color: #999;\n  line-height: 1;\n}\n\n.menu {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 10px 5px;\n  font-size: 14px;\n  gap: 10px;\n  border-radius: 6px;\n  border: 1px solid #eee;\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n  background-color: #fff;\n  width: 285px;\n\n  & > * {\n    width: 100%;\n    box-sizing: border-box;\n  }\n}\n\ndt-calendar-base {\n  // 254 = item height 6 * 30 + week 14 + gap 10 * 6\n  height: 254px;\n\n  &::part(week) {\n    font-size: 12px;\n    line-height: 14px;\n  }\n\n  &::part(item) {\n    font-size: 14px;\n  }\n}\ndt-yyyymm-nav::part(list-grp) {\n  height: 254px;\n  margin-top: 10px;\n}\ndt-calendar-base.hide {\n  display: none;\n}\n"])));

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

@@ -29,9 +29,9 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     protected _style: string;
     protected _template: string;
     constructor();
-    private get _colsHourEle();
-    private get _colsMinuteEle();
-    private get _colsSecondEle();
+    private get _listEleHour();
+    private get _listEleMinute();
+    private get _listEleSecond();
     private get _msInputEle();
     get millisecond(): number;
     set millisecond(v: number);

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

@@ -15,14 +15,14 @@ export class Ele extends UiBase {
   constructor() {
     super();
     __publicField(this, "_style", styleStr);
-    __publicField(this, "_template", html(_b || (_b = __template(['\n        <div class="cols" part="cols">\n            <div class="col" part="col hour">\n                <span>Hour</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" part="col minute">\n                <span>Minute</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" part="col second">\n                <span>Second</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">Millisecond</span>\n            <input part="ms-input" id="ms" type="number" class="millisecond" min="0" max="999" step="1" placeholder="000" />\n        </label>\n    ']))));
+    __publicField(this, "_template", html(_b || (_b = __template(['\n        <div class="cols" part="cols">\n            <div class="col hour" part="col hour">\n                <span>Hour</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>Minute</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>Second</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">Millisecond</span>\n            <input part="ms-input" id="ms" type="number" class="millisecond" min="0" max="999" step="1" placeholder="000" />\n        </label>\n    ']))));
     __publicField(this, "_renderCols", debounce(() => {
       if (!this.isConnected) return;
       const {
         colOrder,
-        _colsHourEle: hEle,
-        _colsMinuteEle: mEle,
-        _colsSecondEle: sEle
+        _listEleHour: hEle,
+        _listEleMinute: mEle,
+        _listEleSecond: sEle
       } = this;
       const orderedCols = [];
       for (const c of colOrder) {
@@ -39,13 +39,13 @@ export class Ele extends UiBase {
     __publicField(this, "_updateGranularity", debounce(() => {
       var _a2, _b2;
       if (!this.isConnected) return;
-      const {
-        _colsHourEle: hEle,
-        _colsMinuteEle: mEle,
-        _colsSecondEle: sEle,
-        maxGranularity,
-        minGranularity
-      } = this;
+      const { maxGranularity, minGranularity } = this;
+      const hEle = this.shadowRoot.querySelector(".col.hour");
+      const mEle = this.shadowRoot.querySelector(".col.minute");
+      const sEle = this.shadowRoot.querySelector(".col.second");
+      const msEle = this.shadowRoot.querySelector(
+        '[part="ms-wrapper"]'
+      );
       const colsContainer = this.shadowRoot.querySelector(".cols");
       const granularityMap = {
         hour: 3,
@@ -62,16 +62,14 @@ export class Ele extends UiBase {
       colsContainer.style.display = [hEle, mEle, sEle].filter(
         (ele) => ele.style.display !== "none"
       ).length ? "" : "none";
-      this.shadowRoot.querySelector(
-        '[part="ms-wrapper"]'
-      ).style.display = maxG >= 0 && minG <= 0 ? "" : "none";
+      msEle.style.display = maxG >= 0 && minG <= 0 ? "" : "none";
     }, 0));
     __publicField(this, "_updateColsValue", debounce(() => {
       if (!this.isConnected) return;
       const {
-        _colsHourEle: hEle,
-        _colsMinuteEle: mEle,
-        _colsSecondEle: sEle,
+        _listEleHour: hEle,
+        _listEleMinute: mEle,
+        _listEleSecond: sEle,
         millisecond
       } = this;
       const hour = Math.floor(millisecond / (60 * 60 * 1e3));
@@ -132,17 +130,21 @@ export class Ele extends UiBase {
       "col-order"
     ];
   }
-  get _colsHourEle() {
+  get _listEleHour() {
     var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(".cols .hour");
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("dt-num-list.hour");
   }
-  get _colsMinuteEle() {
+  get _listEleMinute() {
     var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(".cols .minute");
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(
+      "dt-num-list.minute"
+    );
   }
-  get _colsSecondEle() {
+  get _listEleSecond() {
     var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(".cols .second");
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(
+      "dt-num-list.second"
+    );
   }
   get _msInputEle() {
     var _a2;
@@ -185,23 +187,23 @@ export class Ele extends UiBase {
   }
   connectedCallback() {
     if (!super.connectedCallback()) return;
-    this._colsHourEle.formatter = this._colsMinuteEle.formatter = this._colsSecondEle.formatter = (num) => ("0" + num).slice(-2);
+    this._listEleHour.formatter = this._listEleMinute.formatter = this._listEleSecond.formatter = (num) => ("0" + num).slice(-2);
     this._renderCols();
     this._updateGranularity();
     this._updateColsValue();
-    this._colsHourEle.addEventListener("select-num", this._onColsSelect);
-    this._colsMinuteEle.addEventListener("select-num", this._onColsSelect);
-    this._colsSecondEle.addEventListener("select-num", this._onColsSelect);
+    this._listEleHour.addEventListener("select-num", this._onColsSelect);
+    this._listEleMinute.addEventListener("select-num", this._onColsSelect);
+    this._listEleSecond.addEventListener("select-num", this._onColsSelect);
     this._msInputEle.addEventListener("input", this._onMsInput);
   }
   disconnectedCallback() {
     if (!super.disconnectedCallback()) return;
-    this._colsHourEle.removeEventListener("select-num", this._onColsSelect);
-    this._colsMinuteEle.removeEventListener(
+    this._listEleHour.removeEventListener("select-num", this._onColsSelect);
+    this._listEleMinute.removeEventListener(
       "select-num",
       this._onColsSelect
     );
-    this._colsSecondEle.removeEventListener(
+    this._listEleSecond.removeEventListener(
       "select-num",
       this._onColsSelect
     );
@@ -215,9 +217,9 @@ export class Ele extends UiBase {
     else if (name === "millisecond") this._updateColsValue();
   }
   _getMsFromEle() {
-    const hour = this._colsHourEle.currentNum;
-    const minute = this._colsMinuteEle.currentNum;
-    const second = this._colsSecondEle.currentNum;
+    const hour = this._listEleHour.currentNum;
+    const minute = this._listEleMinute.currentNum;
+    const second = this._listEleSecond.currentNum;
     const ms = Math.min(Math.max(0, +this._msInputEle.value || 0), 999);
     return ((hour * 60 + minute) * 60 + second) * 1e3 + ms;
   }

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

@@ -44,7 +44,7 @@
   background-color: #eee;
 }
 
-dt-date-nav::part(list-grp) {
+dt-yyyymm-nav::part(list-grp) {
   height: 254px;
   margin-top: 15px;
 }
@@ -84,6 +84,7 @@ dt-popover {
   border: 1px solid rgba(0, 0, 0, 0.0666666667);
   box-sizing: border-box;
   align-items: center;
+  cursor: pointer;
 }
 
 .time-selector {

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

@@ -1,4 +1,5 @@
 import { type BaseAttrs, UiBase } from '../web-component-base';
+import { type Weeks } from '../calendar';
 export interface Attrs extends BaseAttrs {
     /**
      * The start time of the calendar display range.
@@ -17,6 +18,12 @@ export interface Attrs extends BaseAttrs {
      * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
      */
     'min-granularity'?: 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
+    /**
+     * Set which day of the week is the first day.
+     * @type `'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'`
+     * @default 'sun'
+     */
+    'week-start-at'?: Weeks;
 }
 export interface Emits {
     change: {
@@ -38,6 +45,8 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     set timeStart(val: number | string | Date);
     get timeEnd(): number | string | Date;
     set timeEnd(val: number | string | Date);
+    get weekStartAt(): Weeks;
+    set weekStartAt(val: Weeks);
     protected _style: string;
     protected _template: string;
     constructor();

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

@@ -6,11 +6,14 @@ var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __f
 var _a, _b, _c;
 import { closestByEvent, css, debounce, html } from "../../utils.mjs";
 import { UiBase } from "../web-component-base/index.mjs";
-const styleStr = 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 rgba(0, 0, 0, 0.1490196078);\n  padding: 4px;\n}\n.start-date-echo-wrapper.active,\n.end-date-echo-wrapper.active {\n  border-color: #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: #eee;\n}\n\ndt-date-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-popover {\n  position: relative;\n}\n\n[open] .time-echo-wrapper {\n  border-color: #18181B;\n}\n\n.time-echo-wrapper {\n  width: 100%;\n  padding: 4px;\n  display: flex;\n  gap: 5px;\n  border-radius: 4px;\n  min-height: 30px;\n  border: 1px solid rgba(0, 0, 0, 0.0666666667);\n  box-sizing: border-box;\n  align-items: center;\n}\n\n.time-selector {\n  position: absolute;\n  width: 100%;\n  height: 461px;\n  box-sizing: border-box;\n  background-color: #fff;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  padding: 15px;\n  border-radius: 6px;\n  border: 1px solid #eee;\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n}\n.time-selector .title {\n  font-size: 16px;\n  margin: 0;\n  line-height: 1;\n}\n\ndt-hhmmss-ms-list-grp::part(list-container) {\n  gap: 2px;\n}\ndt-hhmmss-ms-list-grp::part(list) {\n  scroll-behavior: smooth;\n}\ndt-hhmmss-ms-list-grp::part(item) {\n  font-size: 14px;\n  line-height: 17px;\n}\n\n#time-selector-done-btn {\n  border: none;\n  min-height: 30px;\n  border-radius: 6px;\n  padding: 5px 10px;\n  font-size: 14px;\n  background-color: #18181B;\n  color: #fff;\n}\n\n.time-icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E\") 50%/20px 20px no-repeat;\n}\n\n.time-echo {\n  font-size: 14px;\n  color: #999;\n  line-height: 1;\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"])));
-import { Ele as DateNavEle } from "./date-nav.mjs";
-DateNavEle.define();
+const styleStr = 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 rgba(0, 0, 0, 0.1490196078);\n  padding: 4px;\n}\n.start-date-echo-wrapper.active,\n.end-date-echo-wrapper.active {\n  border-color: #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: #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-popover {\n  position: relative;\n}\n\n[open] .time-echo-wrapper {\n  border-color: #18181B;\n}\n\n.time-echo-wrapper {\n  width: 100%;\n  padding: 4px;\n  display: flex;\n  gap: 5px;\n  border-radius: 4px;\n  min-height: 30px;\n  border: 1px solid rgba(0, 0, 0, 0.0666666667);\n  box-sizing: border-box;\n  align-items: center;\n  cursor: pointer;\n}\n\n.time-selector {\n  position: absolute;\n  width: 100%;\n  height: 461px;\n  box-sizing: border-box;\n  background-color: #fff;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  padding: 15px;\n  border-radius: 6px;\n  border: 1px solid #eee;\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n}\n.time-selector .title {\n  font-size: 16px;\n  margin: 0;\n  line-height: 1;\n}\n\ndt-hhmmss-ms-list-grp::part(list-container) {\n  gap: 2px;\n}\ndt-hhmmss-ms-list-grp::part(list) {\n  scroll-behavior: smooth;\n}\ndt-hhmmss-ms-list-grp::part(item) {\n  font-size: 14px;\n  line-height: 17px;\n}\n\n#time-selector-done-btn {\n  border: none;\n  min-height: 30px;\n  border-radius: 6px;\n  padding: 5px 10px;\n  font-size: 14px;\n  background-color: #18181B;\n  color: #fff;\n}\n\n.time-icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E\") 50%/20px 20px no-repeat;\n}\n\n.time-echo {\n  font-size: 14px;\n  color: #999;\n  line-height: 1;\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"])));
 import {
-  Ele as CalendarBaseEle
+  Ele as YyyyMmNavEle
+} from "../yyyymm-nav/index.mjs";
+YyyyMmNavEle.define();
+import {
+  Ele as CalendarBaseEle,
+  weekKey
 } from "../calendar/index.mjs";
 CalendarBaseEle.define();
 import { Ele as HhMmSsMsListGrpEle } from "../hhmmss-ms-list-grp/index.mjs";
@@ -30,7 +33,7 @@ export class Ele extends UiBase {
     super();
     __publicField(this, "_style", styleStr);
     __publicField(this, "_template", html(_c || (_c = __template(['\n<div class="date-echo">\n    <div class="start-date-echo-wrapper active">\n        <span class="label">Start Date</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">End Date</span>\n        <span class="end-date-echo">dd/mm/yyyy</span>\n    </div>\n</div><div class="calendars">', "</div>"])), ["start", "end"].map(
-      (s) => html(_b || (_b = __template(['\n<div class="wrapper ', '">\n    <dt-date-nav\n        show-ctrl-btn-month-add\n        show-ctrl-btn-month-sub\n    ></dt-date-nav>\n    <dt-calendar-base data-type="', '"></dt-calendar-base>\n    <dt-popover>\n        <div slot="trigger" class="time-echo-wrapper">\n            <i class="time-icon"></i>\n            <span class="time-echo">hh:mm:ss.sss</span>\n        </div>\n        <div slot="pop" class="time-selector">\n            <h3 class="title">', '</h3>\n            <dt-hhmmss-ms-list-grp></dt-hhmmss-ms-list-grp>\n            <button id="time-selector-done-btn" data-type="', '">Done</button>\n        </div>\n    </dt-popover>\n</div>'])), s, s, s === "start" ? "Start Time" : "End Time", s)
+      (s) => html(_b || (_b = __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-popover>\n        <div slot="trigger" class="time-echo-wrapper">\n            <i class="time-icon"></i>\n            <span class="time-echo">hh:mm:ss.sss</span>\n        </div>\n        <div slot="pop" class="time-selector">\n            <h3 class="title">', '</h3>\n            <dt-hhmmss-ms-list-grp></dt-hhmmss-ms-list-grp>\n            <button id="time-selector-done-btn" data-type="', '">Done</button>\n        </div>\n    </dt-popover>\n</div>'])), s, s, s === "start" ? "Start Time" : "End Time", s)
     ).join("")));
     // 存放的是结束时间点
     __publicField(this, "_selectedDate", null);
@@ -39,6 +42,7 @@ 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;
       const tz = (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3;
       this._startNavEle.millisecond = this._startCalendar.showingTime = this._startCalendar.timeStart = this._endCalendar.timeStart = +timeStart;
       this._startTimeSelector.millisecond = (+timeStart - tz) % (24 * 60 * 60 * 1e3);
@@ -63,6 +67,7 @@ export class Ele extends UiBase {
       this._updateNavCtrlBtn();
     }, 0));
     __publicField(this, "_onCalendarSelect", (e) => {
+      e.stopPropagation();
       if (this._selectedDate) {
         this._selectedDate = null;
         this.timeEnd = +e.detail + this._endTimeSelector.millisecond;
@@ -72,27 +77,31 @@ export class Ele extends UiBase {
       }
     });
     __publicField(this, "_onCalendarItemHover", (e) => {
+      e.stopPropagation();
       if (!this._selectedDate) return;
       this.timeEnd = +e.detail + this._endTimeSelector.millisecond;
     });
     __publicField(this, "_onNavChange", (e) => {
+      e.stopPropagation();
       const wrapper = closestByEvent(e, ".wrapper");
       if (!wrapper) return;
-      const { newStartTime, newEndTime } = e.detail;
+      const { newTime } = e.detail;
       if (wrapper.classList.contains("start")) {
-        this._startCalendar.showingTime = +newStartTime;
+        this._startCalendar.showingTime = +newTime;
       } else {
-        this._endCalendar.showingTime = +newEndTime;
+        this._endCalendar.showingTime = +newTime;
       }
       this._updateNavCtrlBtn();
     });
     __publicField(this, "_onNavOpenToggle", (e) => {
       var _a2;
-      if (!(e.target instanceof DateNavEle)) return;
+      if (!(e.target instanceof YyyyMmNavEle)) return;
+      e.stopPropagation();
       (_a2 = e.target.nextElementSibling) == null ? void 0 : _a2.classList.toggle("hide", e.detail);
     });
     __publicField(this, "_onTimePopoverOpenChange", (e) => {
       if (!(e.target instanceof PopoverEle)) return;
+      e.stopPropagation();
       if (!e.detail) return this._render();
       e.target.querySelectorAll("dt-hhmmss-ms-list-grp").forEach((ele) => {
         ele.scrollToCurrentItem();
@@ -130,7 +139,8 @@ export class Ele extends UiBase {
       ...super.observedAttributes,
       "time-start",
       "time-end",
-      "min-granularity"
+      "min-granularity",
+      "week-start-at"
     ];
   }
   get timeStart() {
@@ -151,15 +161,24 @@ export class Ele extends UiBase {
     if (Number.isNaN(+v)) return;
     this.setAttribute("time-end", +v + "");
   }
+  get weekStartAt() {
+    return this._getAttr("week-start-at", "sun");
+  }
+  set weekStartAt(val) {
+    if (!weekKey.includes(val)) return;
+    this.setAttribute("week-start-at", val);
+  }
   get _startNavEle() {
     var _a2;
     return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(
-      ".start dt-date-nav"
+      ".start dt-yyyymm-nav"
     );
   }
   get _endNavEle() {
     var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(".end dt-date-nav");
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(
+      ".end dt-yyyymm-nav"
+    );
   }
   get _startCalendar() {
     var _a2;