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

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,53 @@
+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;
+}
+export interface Emits {
+    'select-time': Date;
+}
+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);
+    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) => string;
+}

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

@@ -0,0 +1,180 @@
+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();
+export class Ele extends UiBase {
+  constructor() {
+    super();
+    __publicField(this, "_style", styleStr);
+    __publicField(this, "_template", 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></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">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']))));
+    __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;
+      this._timeSelector.millisecond = (+currentTime - tz) % (24 * 60 * 60 * 1e3);
+      this.shadowRoot.querySelector(".wrapper .time-echo").textContent = this.timeFormatter(currentTime);
+    }, 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 type = btn.dataset.type;
+      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) => new Date(+time - (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3).toISOString().slice(11, 23));
+    this._applyTemplate();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "week-start-at",
+      "current-time",
+      "showing-time"
+    ];
+  }
+  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 _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("dt-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();
+  }
+}
+__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"])));

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;

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

@@ -25,11 +25,11 @@ export interface Attrs extends BaseAttrs {
     /**
      * Start time of the quick selection. Only works in custom mode.
      */
-    'start-time'?: Date | null | 'null';
+    'start-time'?: string | number | '';
     /**
      * End time of the quick selection. Only works in custom mode.
      */
-    'end-time'?: Date | null | 'null';
+    'end-time'?: string | number | '';
 }
 export interface Emits {
     'time-changed': {
@@ -43,6 +43,10 @@ export interface Emits {
     };
 }
 export type EventMap = Emit2EventMap<Emits>;
+export declare const genPeriodTimes: (startFn?: (_t: Date, weekOffset: number) => void, endFn?: (_t: Date, weekOffset: number) => void, t?: Date, weekStartAt?: Weeks) => {
+    start: Date;
+    end: Date;
+};
 /**
  * 快速选择下拉选项
  */
@@ -55,6 +59,10 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     set quickKey(val: QuickKey);
     get weekStartAt(): Weeks;
     set weekStartAt(val: Weeks);
+    get startTime(): number | string | Date;
+    set startTime(val: number | string | Date);
+    get endTime(): number | string | Date;
+    set endTime(val: number | string | Date);
     protected _style: string;
     protected _template: string;
     private get _periodSelector();
@@ -71,4 +79,8 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     private _onBackBtnClick;
     private _onRadioChange;
     private _onDoneBtnClick;
+    readonly genPeriodTimes: (startFn?: (_t: Date, weekOffset: number) => void, endFn?: (_t: Date, weekOffset: number) => void, t?: Date) => {
+        start: Date;
+        end: Date;
+    };
 }