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

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

@@ -0,0 +1,347 @@
+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, _b, _c, _d, _e, _f;
+import { css, debounce, html } from "../../utils.mjs";
+import { Ele as PeriodSelectorEle } from "../period-selector/index.mjs";
+import {
+  UiBase
+} from "../web-component-base/index.mjs";
+PeriodSelectorEle.define();
+import { Ele as I18nEle } from "../i18n/index.mjs";
+I18nEle.define();
+import { weekKey } from "../calendar/index.mjs";
+const styleStr = css(_a || (_a = __template(["\n:host {\n  width: fit-content;\n  display: block;\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}\n.menu > * {\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.radio-grp {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  width: 100%;\n}\n.radio-grp > label {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  cursor: pointer;\n  padding: 5px;\n}\n.radio-grp > label:hover {\n  background-color: #f5f5f5;\n}\n.radio-grp dt-i18n {\n  flex: 1;\n}\n.radio-grp input {\n  margin: 0;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n}\n\n.arrow-right-icon {\n  display: inline-block;\n  width: 15px;\n  height: 15px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='currentColor'%3E%3Cpath d='M5.256 1.703a.5.5 0 0 1 .707 0l6.128 6.128a.493.493 0 0 1 .045.05.5.5 0 0 1 .051.752l-6.128 6.128a.5.5 0 0 1-.707-.707l5.774-5.774-5.87-5.87a.5.5 0 0 1 0-.707Z'/%3E%3C/svg%3E\") no-repeat center center;\n  cursor: pointer;\n}\n\n.dividing-line {\n  display: block;\n  height: 1px;\n  width: 100%;\n  background-color: #eee;\n}\n\n.tz-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 5px;\n  gap: 10px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.tz-trigger:hover {\n  background-color: #f5f5f5;\n}\n.tz-trigger bdo {\n  direction: ltr;\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  padding: 5px;\n  gap: 10px;\n  font-weight: 700;\n  font-size: 18px;\n  box-sizing: border-box;\n}\n.title svg {\n  border: 5px solid transparent;\n  border-radius: 50%;\n  margin: -5px;\n  cursor: pointer;\n}\n.title svg:hover {\n  background-color: #eee;\n  border-color: #eee;\n}\n\n.menu.tz {\n  min-width: 180px;\n  max-height: 293px;\n  overflow: hidden auto;\n}\n.menu.tz fieldset {\n  width: 100%;\n  border: none;\n  border-top: 1px solid #eee;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n.menu.tz fieldset legend {\n  padding: 0 5px;\n  margin-bottom: 5px;\n  font-size: 12px;\n  line-height: 24px;\n  color: #666;\n}\n.menu.tz label {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  cursor: pointer;\n  padding: 5px;\n}\n.menu.tz label:hover {\n  background-color: #f5f5f5;\n}\n.menu.tz input {\n  margin: 0;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n}\n\nbutton {\n  border: none;\n  min-height: 40px;\n  border-radius: 6px;\n  padding: 5px 15px;\n  font-size: 16px;\n  line-height: 1;\n  background-color: #18181B;\n  color: #fff;\n  font-weight: 500;\n  cursor: pointer;\n}\n\n.menu.custom {\n  padding: 14px;\n  gap: 15px;\n}\n.menu.custom dt-period-selector {\n  width: 590px;\n}\n.menu.custom .btns {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n.menu.custom #reset {\n  background-color: #E5E7E8;\n  color: #333;\n}\n"])));
+const backArrowSvg = html(_b || (_b = __template(['<svg xmlns="http://www.w3.org/2000/svg" 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>'])));
+const ArrowRightSvg = html(_c || (_c = __template(['<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor"><path d="M5.256 1.703a.5.5 0 0 1 .707 0l6.128 6.128a.493.493 0 0 1 .045.05.5.5 0 0 1 .051.752l-6.128 6.128a.5.5 0 0 1-.707-.707l5.774-5.774-5.87-5.87a.5.5 0 0 1 0-.707Z"/></svg>'])));
+const getCurrentTz = () => -(/* @__PURE__ */ new Date()).getTimezoneOffset();
+const utcText = (tz = getCurrentTz()) => tz >= 0 ? "UTC+".concat((~~(tz / 60) + "").padStart(2, "0"), ":").concat((tz % 60 + "").padStart(2, "0")) : "UTC-".concat((~~-(tz / 60) + "").padStart(2, "0"), ":").concat((-tz % 60 + "").padStart(2, "0"));
+const genTzRadio = (tz) => html(_d || (_d = __template(['<label><input type="radio" name="tz" value="', '"/><span>', "</span></label>"])), tz, utcText(tz));
+const genDateWithHours = (isStart, fn = (_t) => {
+}, t = /* @__PURE__ */ new Date()) => {
+  if (isStart) t.setHours(0, 0, 0, 0);
+  else t.setHours(23, 59, 59, 999);
+  fn(t);
+  return t;
+};
+const genStartDate = (fn, t) => genDateWithHours(true, fn, t);
+const genEndDate = (fn, t) => genDateWithHours(false, fn, t);
+const quickPeriodTimes = (weekOffset = 0) => ({
+  all: null,
+  today: {
+    start: genStartDate(),
+    end: genEndDate()
+  },
+  yesterday: {
+    start: genStartDate((t) => t.setDate(t.getDate() - 1)),
+    end: genEndDate((t) => t.setDate(t.getDate() - 1))
+  },
+  week: {
+    start: genStartDate(
+      (t) => t.setDate(t.getDate() - t.getDay() + weekOffset)
+    ),
+    end: genEndDate(
+      (t) => t.setDate(t.getDate() - t.getDay() + weekOffset + 6)
+    )
+  },
+  lastWeek: {
+    start: genStartDate(
+      (t) => t.setDate(t.getDate() - t.getDay() + weekOffset - 7)
+    ),
+    end: genEndDate(
+      (t) => t.setDate(t.getDate() - t.getDay() + weekOffset - 1)
+    )
+  },
+  last7Days: {
+    start: genStartDate((t) => t.setDate(t.getDate() - 6)),
+    end: genEndDate()
+  },
+  month: {
+    start: genStartDate((t) => t.setDate(1)),
+    end: genEndDate((t) => t.setMonth(t.getMonth() + 1, 0))
+  },
+  last30Days: {
+    start: genStartDate((t) => t.setDate(t.getDate() - 29)),
+    end: genEndDate()
+  },
+  last180Days: {
+    start: genStartDate((t) => t.setDate(t.getDate() - 179)),
+    end: genEndDate()
+  },
+  last6Month: {
+    start: genStartDate((t) => t.setMonth(t.getMonth() - 5, 1)),
+    end: genEndDate((t) => t.setMonth(t.getMonth() + 1, 0))
+  },
+  year: {
+    start: genStartDate((t) => t.setMonth(0, 1)),
+    end: genEndDate((t) => t.setFullYear(t.getFullYear() + 1, 0, 0))
+  }
+});
+export class Ele extends UiBase {
+  constructor() {
+    super();
+    __publicField(this, "_style", styleStr);
+    __publicField(this, "_template", html(_f || (_f = __template(['\n<div class="menu top" part="menu top"\n    ><div class="radio-grp">', '<label class="custom-trigger"\n            ><input type="radio" name="radio" value="custom"\n            /><dt-i18n i18n-key="quick.custom">Custom</dt-i18n\n            >', '</label\n    ></div\n    ><i class="dividing-line"></i\n    ><div class="tz-trigger"\n        ><span\n            ><dt-i18n i18n-key="quick.timezone"></dt-i18n\n            ><bdo>', "</bdo\n        ></span\n        >", '</div\n></div\n><div class="menu tz" part="menu tz" style="display:none"\n    ><div class="title"\n        >', '<span>Time Zone</span\n    ></div\n    ><fieldset class="subtitle"\n        ><legend><dt-i18n i18n-key="quick.recommend"></dt-i18n></legend\n    >', '</fieldset\n    ><fieldset class="subtitle"\n        ><legend><dt-i18n i18n-key="quick.timezoneList"></dt-i18n></legend\n        >', '</fieldset\n    ></div\n><div class="menu custom" part="menu custom" style="display:none"\n    ><div class="title"\n        >', '<span>Custom</span\n    ></div\n    ><dt-period-selector></dt-period-selector\n    ><div class="btns"\n        ><button id="reset">Reset</button\n        ><button id="done">Done</button\n    ></div\n></div>'])), [
+      "all",
+      "today",
+      "yesterday",
+      "week",
+      "lastWeek",
+      "last7Days",
+      "month",
+      "last30Days",
+      "last180Days",
+      "last6Month",
+      "year"
+    ].map(
+      (k) => html(_e || (_e = __template(['<label\n                    ><input type="radio" name="radio" value="', '"\n                    /><dt-i18n i18n-key="quick.', '">', "</dt-i18n\n                ></label>"])), k, k, k)
+    ).join(""), ArrowRightSvg, utcText(), ArrowRightSvg, backArrowSvg, [.../* @__PURE__ */ new Set([getCurrentTz(), 120])].map(genTzRadio).join(""), [
+      -12,
+      -11,
+      -10,
+      -9.5,
+      -9,
+      -8,
+      -7,
+      -6,
+      -5,
+      -4,
+      -3,
+      -3.5,
+      -2,
+      -1,
+      0,
+      1,
+      2,
+      3,
+      3.5,
+      4,
+      4.5,
+      5,
+      5.5,
+      5.75,
+      6,
+      6.5,
+      7,
+      8,
+      8.75,
+      9,
+      9.5,
+      10,
+      10.5,
+      11,
+      12,
+      12.45,
+      13,
+      14
+    ].map(
+      (tz) => tz === 2 || tz * 60 === getCurrentTz() ? "" : genTzRadio(tz * 60)
+    ).join(""), backArrowSvg));
+    __publicField(this, "_updatePeriodSelector", debounce(() => {
+      var _a2, _b2;
+      if (((_b2 = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(".menu.custom")) == null ? void 0 : _b2.style.display) === "none") {
+        return;
+      }
+      const defaultPeriod = quickPeriodTimes().last30Days;
+      const ele = this._periodSelector;
+      ele.timeStart = defaultPeriod.start;
+      ele.timeEnd = defaultPeriod.end;
+      ele.showCalendarDatePoint();
+    }, 0));
+    __publicField(this, "_renderTz", debounce(() => {
+      const tz = this.timezone;
+      const tzRadios = this.shadowRoot.querySelectorAll(
+        'input[name="tz"]'
+      );
+      tzRadios.forEach((radio) => {
+        radio.checked = +radio.value === tz;
+      });
+      this.shadowRoot.querySelector(".tz-trigger bdo").textContent = utcText(tz);
+    }, 0));
+    __publicField(this, "_updateRadio", debounce(() => {
+      const quickKey = this.quickKey;
+      const radio = this.shadowRoot.querySelector(
+        'input[name="radio"][value="'.concat(quickKey, '"]')
+      );
+      radio.checked = true;
+    }, 0));
+    __publicField(this, "_onTzTriggerClick", () => this._showMenu("tz"));
+    __publicField(this, "_onCustomTriggerClick", (e) => {
+      e.preventDefault();
+      this._showMenu("custom");
+    });
+    __publicField(this, "_onBackBtnClick", () => this._showMenu("top"));
+    __publicField(this, "_onRadioChange", (e) => {
+      if (!(e.target instanceof HTMLInputElement)) return;
+      if (e.target.type !== "radio") return;
+      const { name, value } = e.target;
+      if (name === "radio") {
+        const v = value;
+        if (v === "custom") return;
+        const t = quickPeriodTimes()[v];
+        this.dispatchEvent(
+          "time-changed",
+          !t ? { type: "all" } : {
+            ...t,
+            type: v
+          },
+          true
+        );
+      } else if (name === "tz") {
+        this.timezone = +value;
+      }
+    });
+    __publicField(this, "_onDoneBtnClick", (_e2) => {
+      const selector = this._periodSelector;
+      this._showMenu("top");
+      this.shadowRoot.querySelector(
+        'input[name="radio"][value="custom"]'
+      ).checked = true;
+      this.dispatchEvent(
+        "time-changed",
+        {
+          start: selector.timeStart,
+          end: selector.timeEnd,
+          type: "custom"
+        },
+        true
+      );
+    });
+    this._applyTemplate();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "time-zone",
+      "week-start-at",
+      "quick-key",
+      "start-time",
+      "end-time"
+    ];
+  }
+  get timezone() {
+    return +this._getAttr("time-zone", "" + getCurrentTz());
+  }
+  set timezone(v) {
+    if (!Number.isSafeInteger(v)) return;
+    this.setAttribute("time-zone", "" + v);
+  }
+  get quickKey() {
+    return this._getAttr("quick-key", "all");
+  }
+  set quickKey(val) {
+    if (![
+      "all",
+      "today",
+      "yesterday",
+      "week",
+      "lastWeek",
+      "last7Days",
+      "month",
+      "last30Days",
+      "last180Days",
+      "last6Month",
+      "year",
+      "custom"
+    ].includes(val)) {
+      return;
+    }
+    this.setAttribute("quick-key", val);
+  }
+  get weekStartAt() {
+    return this._getAttr("week-start-at", "sun");
+  }
+  set weekStartAt(val) {
+    if (weekKey.includes(val)) return;
+    this.setAttribute("week-start-at", val);
+  }
+  get _periodSelector() {
+    return this.shadowRoot.querySelector(
+      "dt-period-selector"
+    );
+  }
+  connectedCallback() {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    if (!super.connectedCallback()) return;
+    this._renderTz();
+    this._updateRadio();
+    (_a2 = this.shadowRoot.querySelector(".tz-trigger")) == null ? void 0 : _a2.addEventListener(
+      "click",
+      this._onTzTriggerClick
+    );
+    (_b2 = this.shadowRoot.querySelector(".custom-trigger")) == null ? void 0 : _b2.addEventListener(
+      "click",
+      this._onCustomTriggerClick
+    );
+    (_c2 = this.shadowRoot.querySelector(".menu.tz .title svg")) == null ? void 0 : _c2.addEventListener(
+      "click",
+      this._onBackBtnClick
+    );
+    (_d2 = this.shadowRoot.querySelector(
+      ".menu.custom .title svg"
+    )) == null ? void 0 : _d2.addEventListener("click", this._onBackBtnClick);
+    this.shadowRoot.querySelectorAll(".menu").forEach((menu) => {
+      menu.addEventListener("change", this._onRadioChange);
+    });
+    (_e2 = this.shadowRoot.querySelector("#reset")) == null ? void 0 : _e2.addEventListener(
+      "click",
+      this._updatePeriodSelector
+    );
+    (_f2 = this.shadowRoot.querySelector("#done")) == null ? void 0 : _f2.addEventListener(
+      "click",
+      this._onDoneBtnClick
+    );
+  }
+  disconnectedCallback() {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    if (!super.disconnectedCallback()) return;
+    (_a2 = this.shadowRoot.querySelector(".tz-trigger")) == null ? void 0 : _a2.removeEventListener(
+      "click",
+      this._onTzTriggerClick
+    );
+    (_b2 = this.shadowRoot.querySelector(".custom-trigger")) == null ? void 0 : _b2.removeEventListener(
+      "click",
+      this._onCustomTriggerClick
+    );
+    (_c2 = this.shadowRoot.querySelector(
+      ".menu.tz .title svg"
+    )) == null ? void 0 : _c2.removeEventListener("click", this._onBackBtnClick);
+    (_d2 = this.shadowRoot.querySelector(
+      ".menu.custom .title svg"
+    )) == null ? void 0 : _d2.removeEventListener("click", this._onBackBtnClick);
+    this.shadowRoot.querySelectorAll(".menu").forEach((menu) => {
+      menu.removeEventListener("change", this._onRadioChange);
+    });
+    (_e2 = this.shadowRoot.querySelector("#reset")) == null ? void 0 : _e2.removeEventListener(
+      "click",
+      this._updatePeriodSelector
+    );
+    (_f2 = this.shadowRoot.querySelector("#done")) == null ? void 0 : _f2.removeEventListener(
+      "click",
+      this._onDoneBtnClick
+    );
+  }
+  _onAttrChanged(name, oldValue, newValue) {
+    super._onAttrChanged(name, oldValue, newValue);
+    if (name === "time-zone") {
+      this._renderTz();
+    }
+    if (name === "quick-key") {
+      this._updateRadio();
+    }
+  }
+  _showMenu(type) {
+    var _a2;
+    const menus = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelectorAll(".menu");
+    menus == null ? void 0 : menus.forEach(
+      (menu) => menu.style.display = menu.classList.contains(type) ? "" : "none"
+    );
+    if (type === "custom") {
+      this._updatePeriodSelector();
+    }
+  }
+}
+__publicField(Ele, "tagName", "dt-quick-selector");
+Ele.define();

package/dist/components/web-component-base/index.css

@@ -0,0 +1,9 @@
+@-moz-document url-prefix() {
+  :host, * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb-color, rgba(68, 68, 68, 0.2666666667)) transparent;
+  }
+  :host:hover, *:hover {
+    scrollbar-color: var(--scrollbar-thumb-color-hover, var(--scrollbar-thumb-color, rgba(136, 136, 136, 0.5333333333))) transparent;
+  }
+}

package/dist/components/web-component-base/index.d.ts

@@ -0,0 +1,46 @@
+import type { Lang } from '../../i18n';
+type EmitType = Record<string, any>;
+export type Emit2EventMap<Emit extends EmitType> = {
+    [K in keyof Emit]: CustomEvent<Emit[K]>;
+};
+export type ListenerFn<Emit extends EmitType, K extends keyof Emit | keyof HTMLElementEventMap> = (this: HTMLElement, ev: K extends keyof Emit ? CustomEvent<Emit[K]> : HTMLElementEventMap[K & keyof HTMLElementEventMap]) => any;
+export type EventListenerObj<Emit extends EmitType, K extends keyof Emit | keyof HTMLElementEventMap> = {
+    handleEvent: ListenerFn<Emit, K>;
+};
+export type EventListenerOrListenerObj<Emit extends EmitType, K extends keyof Emit | keyof HTMLElementEventMap> = ListenerFn<Emit, K> | EventListenerObj<Emit, K>;
+type getAttrType<Attr, K extends keyof Attr> = Extract<Attr[K], string> extends never ? string : Extract<Attr[K], string>;
+export interface BaseAttrs {
+    /**
+     * The language of the component.
+     * @type `Lang`
+     */
+    lang?: Lang;
+}
+declare const HTMLElementBase: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export declare class UiBase<Attr extends BaseAttrs = BaseAttrs, Emit extends Record<string, any> = {}> extends HTMLElementBase {
+    static readonly tagName: string;
+    protected static _definePromise: Promise<CustomElementConstructor> | null;
+    static define(): Promise<CustomElementConstructor> | undefined;
+    static get observedAttributes(): string[];
+    protected _template: string;
+    protected _style: string;
+    protected _initTemplate(): HTMLTemplateElement;
+    protected _applyTemplate(): void;
+    constructor();
+    protected _getAttr<K extends keyof Attr, D extends undefined | getAttrType<Attr, K> = undefined>(qualifiedName: K, defaultValue?: D): undefined extends D ? getAttrType<Attr, K> | null : getAttrType<Attr, K>;
+    protected _onAttrChanged(_name: string, _oldVal: string, _newVal: string): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** return false | void means not continue */
+    connectedCallback(): boolean | void;
+    /** return false | void means not continue */
+    disconnectedCallback(): boolean | void;
+    connectedMoveCallback(): void;
+    adoptedCallback(): void;
+    dispatchEvent<K extends keyof Emit | undefined = undefined>(type: K | Event, data?: K extends keyof Emit ? Emit[K] : any, global?: boolean): boolean;
+    addEventListener<K extends keyof Emit | keyof HTMLElementEventMap>(type: K | string, listener: EventListenerOrListenerObj<Emit, K>, options?: boolean | EventListenerOptions): void;
+    removeEventListener<K extends keyof Emit | keyof HTMLElementEventMap>(type: K | string, listener: EventListenerOrListenerObj<Emit, K>, options?: boolean | EventListenerOptions): void;
+}
+export {};

package/dist/components/web-component-base/index.mjs

@@ -0,0 +1,118 @@
+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, _b;
+import { css } from "../../utils.mjs";
+const styleStr = css(_a || (_a = __template(["\n/* firefox only: */\n@-moz-document url-prefix() {\n  :host, * {\n    scrollbar-width: thin;\n    scrollbar-color: var(--scrollbar-thumb-color, #4444) transparent;\n  }\n  :host:hover, *:hover {\n    scrollbar-color: var(--scrollbar-thumb-color-hover, var(--scrollbar-thumb-color, #8888)) transparent;\n  }\n}\n"])));
+const scrollbarStyleStr = css(_b || (_b = __template(["\n[dt]::-webkit-scrollbar, :host *::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n[dt]::-webkit-scrollbar-button, :host *::-webkit-scrollbar-button {\n  display: none;\n}\n[dt]::-webkit-scrollbar-corner, :host *::-webkit-scrollbar-corner {\n  display: none;\n}\n[dt]::-webkit-scrollbar-thumb, :host *::-webkit-scrollbar-thumb {\n  background-color: var(--scrollbar-thumb-color, #4444);\n  border-radius: 4px;\n  cursor: grab;\n}\n[dt]::-webkit-scrollbar-thumb:hover, :host *::-webkit-scrollbar-thumb:hover {\n  background-color: var(--scrollbar-thumb-color-hover, var(--scrollbar-thumb-color, #8888));\n}\n[dt]::-webkit-scrollbar-thumb:active, :host *::-webkit-scrollbar-thumb:active {\n  background-color: var(--scrollbar-thumb-color-active, var(--scrollbar-thumb-color, #2222));\n  cursor: grabbing;\n}\n[dt]::-webkit-scrollbar-track, :host *::-webkit-scrollbar-track {\n  background: transparent;\n}\n"])));
+const templateCache = /* @__PURE__ */ new Map();
+if (typeof document === "object") {
+  const styleSheet = new CSSStyleSheet();
+  styleSheet.replaceSync(scrollbarStyleStr);
+  document.adoptedStyleSheets.unshift(styleSheet);
+}
+const HTMLElementBase = (() => {
+  if (typeof HTMLElement === "function") return HTMLElement;
+  return class {
+  };
+})();
+export class UiBase extends HTMLElementBase {
+  constructor() {
+    super();
+    __publicField(this, "_template", "");
+    __publicField(this, "_style", "");
+    this.attachShadow({ mode: "open" });
+  }
+  static define() {
+    if (this._definePromise) return this._definePromise;
+    if (typeof customElements === "undefined") {
+      return;
+    }
+    const tagName = this.tagName;
+    if (!tagName) throw new Error("UiBase.define: tagName is not defined.");
+    console.log("Define custom element:", tagName);
+    customElements.define(tagName, this);
+    return this._definePromise = customElements.whenDefined(tagName);
+  }
+  // TODO: use override keyword in subclasses
+  static get observedAttributes() {
+    return ["lang"];
+  }
+  _initTemplate() {
+    const { tagName } = this;
+    if (templateCache.has(tagName)) return templateCache.get(tagName);
+    const templateEle = document.createElement("template");
+    templateEle.innerHTML = "<style>".concat(scrollbarStyleStr).concat(styleStr).concat(this._style, "</style>").concat(this._template);
+    templateCache.set(tagName, templateEle);
+    return templateEle;
+  }
+  _applyTemplate() {
+    if (!this.shadowRoot) return;
+    this.shadowRoot.innerHTML = "";
+    this.shadowRoot.appendChild(
+      this._initTemplate().content.cloneNode(true)
+    );
+  }
+  _getAttr(qualifiedName, defaultValue) {
+    const attr = this.getAttribute(qualifiedName);
+    return attr === null && defaultValue !== void 0 ? defaultValue : attr;
+  }
+  _onAttrChanged(_name, _oldVal, _newVal) {
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    var _a2;
+    if (oldValue === newValue) return;
+    if (name !== "lang")
+      return this._onAttrChanged(name, oldValue, newValue);
+    (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelectorAll("[dt]").forEach((ele) => {
+      if (newValue) {
+        ele.setAttribute("lang", newValue);
+      } else {
+        ele.removeAttribute("lang");
+      }
+    });
+  }
+  /** return false | void means not continue */
+  connectedCallback() {
+    this.setAttribute("dt", "");
+    return !!this.shadowRoot;
+  }
+  /** return false | void means not continue */
+  disconnectedCallback() {
+    return !!this.shadowRoot;
+  }
+  connectedMoveCallback() {
+  }
+  adoptedCallback() {
+  }
+  dispatchEvent(type, data, global = false) {
+    return type instanceof Event ? super.dispatchEvent(type) : super.dispatchEvent(
+      new CustomEvent(type, {
+        ...global ? {
+          bubbles: true,
+          cancelable: true,
+          composed: true
+        } : {},
+        detail: data
+      })
+    );
+  }
+  addEventListener(type, listener, options) {
+    super.addEventListener(
+      type,
+      listener,
+      options
+    );
+  }
+  removeEventListener(type, listener, options) {
+    super.removeEventListener(
+      type,
+      listener,
+      options
+    );
+  }
+}
+__publicField(UiBase, "tagName", "");
+__publicField(UiBase, "_definePromise", null);

package/dist/components/web-component-base/scrollbar.css

@@ -0,0 +1,25 @@
+[dt]::-webkit-scrollbar, :host *::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+[dt]::-webkit-scrollbar-button, :host *::-webkit-scrollbar-button {
+  display: none;
+}
+[dt]::-webkit-scrollbar-corner, :host *::-webkit-scrollbar-corner {
+  display: none;
+}
+[dt]::-webkit-scrollbar-thumb, :host *::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-color, rgba(68, 68, 68, 0.2666666667));
+  border-radius: 4px;
+  cursor: grab;
+}
+[dt]::-webkit-scrollbar-thumb:hover, :host *::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-color-hover, var(--scrollbar-thumb-color, rgba(136, 136, 136, 0.5333333333)));
+}
+[dt]::-webkit-scrollbar-thumb:active, :host *::-webkit-scrollbar-thumb:active {
+  background-color: var(--scrollbar-thumb-color-active, var(--scrollbar-thumb-color, rgba(34, 34, 34, 0.1333333333)));
+  cursor: grabbing;
+}
+[dt]::-webkit-scrollbar-track, :host *::-webkit-scrollbar-track {
+  background: transparent;
+}

package/dist/components/yyyymmdd-list-grp/index.css

@@ -0,0 +1,32 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: 15px;
+}
+
+.cols {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  height: 0;
+  justify-content: space-between;
+  gap: 2px;
+}
+
+.col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.col > span {
+  text-align: center;
+  display: inline-block;
+  line-height: 27px;
+}
+
+dt-num-list {
+  flex: 1;
+}

package/dist/components/yyyymmdd-list-grp/index.d.ts

@@ -0,0 +1,52 @@
+import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
+export interface Attrs extends BaseAttrs {
+    millisecond: number;
+    /**
+     * 选择器的粒度，表示最大可选的时间单位。默认为 year。
+     * 例如设置为 'month'，则表示最大只能选择到月份，年将被忽略。
+     */
+    'max-granularity'?: 'year' | 'month' | 'day';
+    /**
+     * 选择器的粒度，表示最小可选的时间单位。默认为 second。
+     * 例如设置为 'month'，则表示只能选择到月份，日会将被忽略。
+     */
+    'min-granularity'?: 'year' | 'month' | 'day';
+    'col-order'?: 'ymd' | 'ydm' | 'myd' | 'mdy' | 'dym' | 'dmy';
+}
+export interface Emits {
+    change: {
+        oldMs: number;
+        newMs: number;
+    };
+}
+export type EventMap = Emit2EventMap<Emits>;
+/**
+ * 日期选择器
+ */
+export declare class Ele extends UiBase<Attrs, Emits> {
+    static readonly tagName: "dt-yyyymmdd-list-grp";
+    static get observedAttributes(): string[];
+    protected _style: string;
+    protected _template: string;
+    constructor();
+    private get _listEleYear();
+    private get _listEleMonth();
+    private get _listEleDay();
+    get millisecond(): number;
+    set millisecond(v: number);
+    get maxGranularity(): "year" | "month" | "day";
+    set maxGranularity(v: 'year' | 'month' | 'day');
+    get minGranularity(): "year" | "month" | "day";
+    set minGranularity(v: 'year' | 'month' | 'day');
+    get colOrder(): "ymd" | "ydm" | "myd" | "mdy" | "dym" | "dmy";
+    set colOrder(v: 'ymd' | 'ydm' | 'myd' | 'mdy' | 'dym' | 'dmy');
+    scrollToCurrentItem(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    private _renderCols;
+    private _updateGranularity;
+    private _updateColsValue;
+    private _getMsFromEle;
+    private _onColsSelect;
+}