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

package/dist/components/yyyymm-nav/index.css

@@ -0,0 +1,92 @@
+.wrapper {
+  display: block;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+.wrapper.show-list .btns {
+  display: none;
+}
+
+.btns {
+  display: flex;
+  align-items: center;
+}
+
+.btn {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+  background: 50%/16px 16px no-repeat;
+  --icon-arrow-left: url("@/assets/arrow-left.svg");
+  --icon-arrow-left-double: url("@/assets/arrow-left-double.svg");
+  --icon-arrow-right: url("@/assets/arrow-right.svg");
+  --icon-arrow-right-double: url("@/assets/arrow-right-double.svg");
+  background-image: var(--bg-img);
+  border-radius: 50%;
+}
+.btn:hover {
+  background-color: #eee;
+}
+:host(:not([show-ctrl-btn-year-add])) .btn.add.year, :host(:not([show-ctrl-btn-year-sub])) .btn.sub.year, :host(:not([show-ctrl-btn-month-add])) .btn.add.month, :host(:not([show-ctrl-btn-month-sub])) .btn.sub.month {
+  display: none;
+}
+.btn.sub {
+  --bg-img: var(--icon-arrow-left);
+}
+:host([show-ctrl-btn-month-add]) .btn.sub.add.year, :host([show-ctrl-btn-month-sub]) .btn.sub.sub.year {
+  --bg-img: var(--icon-arrow-left-double);
+}
+.btn.add {
+  --bg-img: var(--icon-arrow-right);
+}
+:host([show-ctrl-btn-month-add]) .btn.add.add.year, :host([show-ctrl-btn-month-sub]) .btn.add.sub.year {
+  --bg-img: var(--icon-arrow-right-double);
+}
+
+dt-yyyymmdd-list-grp {
+  width: 100%;
+}
+dt-yyyymmdd-list-grp::part(list) {
+  scroll-behavior: smooth;
+}
+dt-yyyymmdd-list-grp::part(col label) {
+  display: none;
+}
+
+dt-popover {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.title-wrapper {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  cursor: pointer;
+  margin: 10px 0;
+  min-height: 25px;
+  padding: 0 10px;
+  border-radius: 2px;
+  user-select: none;
+}
+.title-wrapper:hover {
+  background-color: #eee;
+}
+
+.title-arrow {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url("@/assets/arrow-down.svg") no-repeat center center;
+}
+
+dt-popover[open] .title-arrow {
+  transform: rotate(180deg);
+}

package/dist/components/yyyymm-nav/index.d.ts

@@ -0,0 +1,62 @@
+import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
+export interface Attrs extends BaseAttrs {
+    millisecond: number;
+    /**
+     * 选择器的粒度，表示最大可选的时间单位。默认为 year。
+     */
+    'max-granularity'?: 'year' | 'month';
+    /**
+     * 选择器的粒度，表示最小可选的时间单位。默认为 month。
+     */
+    'min-granularity'?: 'year' | 'month';
+    /**
+     * 是否显示年份控制按钮（快速增减年份）
+     * @default false
+     */
+    'show-ctrl-btn-year-add'?: boolean;
+    'show-ctrl-btn-year-sub'?: boolean;
+    /**
+     * 是否显示月份控制按钮（快速增减月份）
+     * @default false
+     */
+    'show-ctrl-btn-month-add'?: boolean;
+    'show-ctrl-btn-month-sub'?: boolean;
+}
+export interface Emits {
+    change: {
+        oldTime: Date;
+        newTime: Date;
+    };
+    'popover-open-change': boolean;
+}
+export type EventMap = Emit2EventMap<Emits>;
+/**
+ * 日期导航组件
+ *
+ * 存在一个 titleFormatter 方法，可以重写该方法以自定义年月标题的回显格式。
+ */
+export declare class Ele extends UiBase<Attrs, Emits> {
+    static readonly tagName: "dt-yyyymm-nav";
+    static get observedAttributes(): string[];
+    protected _style: string;
+    protected _template: string;
+    get millisecond(): number;
+    set millisecond(v: number);
+    get showCtrlBtnYearAdd(): boolean;
+    set showCtrlBtnYearAdd(val: boolean);
+    get showCtrlBtnYearSub(): boolean;
+    set showCtrlBtnYearSub(val: boolean);
+    get showCtrlBtnMonthAdd(): boolean;
+    set showCtrlBtnMonthAdd(val: boolean);
+    get showCtrlBtnMonthSub(): boolean;
+    set showCtrlBtnMonthSub(val: boolean);
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    private _render;
+    private _onTitleToggle;
+    private _onItemSelect;
+    private _onBtnClick;
+    titleFormatter: (ms: number) => string;
+}

package/dist/components/yyyymm-nav/index.mjs

@@ -0,0 +1,160 @@
+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, debounce, html } from "../../utils.mjs";
+import {
+  UiBase
+} from "../web-component-base/index.mjs";
+const styleStr = css(_a || (_a = __template(["\n.wrapper {\n  display: block;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: space-between;\n  overflow: hidden;\n}\n.wrapper.show-list .btns {\n  display: none;\n}\n\n.btns {\n  display: flex;\n  align-items: center;\n}\n\n.btn {\n  width: 25px;\n  height: 25px;\n  cursor: pointer;\n  background: 50%/16px 16px no-repeat;\n  --icon-arrow-left: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='currentColor'%3E%3Cpath d='M11.687 1.703a.5.5 0 0 0-.707 0L4.852 7.83a.505.505 0 0 0-.045.05.5.5 0 0 0-.051.752l6.128 6.128a.5.5 0 0 0 .707-.707L5.817 8.28l5.87-5.87a.5.5 0 0 0 0-.707Z'/%3E%3C/svg%3E\");\n  --icon-arrow-left-double: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='currentColor'%3E%3Cpath d='M9.037 1.98a.5.5 0 1 1 .707.707l-5.87 5.87 5.774 5.774a.5.5 0 1 1-.707.707L2.813 8.911a.5.5 0 0 1 .051-.752.505.505 0 0 1 .045-.051L9.037 1.98ZM13.037 1.98a.5.5 0 0 1 .707.707l-5.87 5.87 5.774 5.774a.5.5 0 1 1-.707.707L6.813 8.911a.5.5 0 0 1 .051-.752.505.505 0 0 1 .045-.051l6.128-6.128Z'/%3E%3C/svg%3E\");\n  --icon-arrow-right: 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\");\n  --icon-arrow-right-double: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='currentColor'%3E%3Cpath d='M7.963 1.703a.5.5 0 0 0-.707.707l5.87 5.87-5.774 5.774a.5.5 0 0 0 .707.707l6.128-6.128a.5.5 0 0 0-.051-.751.493.493 0 0 0-.045-.051L7.963 1.703ZM3.963 1.703a.5.5 0 0 0-.707.707l5.87 5.87-5.774 5.774a.5.5 0 0 0 .707.707l6.128-6.128a.5.5 0 0 0-.051-.751.493.493 0 0 0-.045-.051L3.963 1.703Z'/%3E%3C/svg%3E\");\n  background-image: var(--bg-img);\n  border-radius: 50%;\n}\n.btn:hover {\n  background-color: #eee;\n}\n:host(:not([show-ctrl-btn-year-add])) .btn.add.year, :host(:not([show-ctrl-btn-year-sub])) .btn.sub.year, :host(:not([show-ctrl-btn-month-add])) .btn.add.month, :host(:not([show-ctrl-btn-month-sub])) .btn.sub.month {\n  display: none;\n}\n.btn.sub {\n  --bg-img: var(--icon-arrow-left);\n}\n:host([show-ctrl-btn-month-add]) .btn.sub.add.year, :host([show-ctrl-btn-month-sub]) .btn.sub.sub.year {\n  --bg-img: var(--icon-arrow-left-double);\n}\n.btn.add {\n  --bg-img: var(--icon-arrow-right);\n}\n:host([show-ctrl-btn-month-add]) .btn.add.add.year, :host([show-ctrl-btn-month-sub]) .btn.add.sub.year {\n  --bg-img: var(--icon-arrow-right-double);\n}\n\ndt-yyyymmdd-list-grp {\n  width: 100%;\n}\ndt-yyyymmdd-list-grp::part(list) {\n  scroll-behavior: smooth;\n}\ndt-yyyymmdd-list-grp::part(col label) {\n  display: none;\n}\n\ndt-popover {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.title-wrapper {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  cursor: pointer;\n  margin: 10px 0;\n  min-height: 25px;\n  padding: 0 10px;\n  border-radius: 2px;\n  user-select: none;\n}\n.title-wrapper:hover {\n  background-color: #eee;\n}\n\n.title-arrow {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='currentColor'%3E%3Cpath d='m8.02 10.54 3.96-4.4a.583.583 0 0 0-.433-.973h-7.88a.583.583 0 0 0-.434.973l3.94 4.378c.216.24.585.26.824.044l.022-.021Z'/%3E%3C/svg%3E\") no-repeat center center;\n}\n\ndt-popover[open] .title-arrow {\n  transform: rotate(180deg);\n}\n"])));
+import { Ele as PopoverEle } from "../popover/index.mjs";
+PopoverEle.define();
+import {
+  Ele as YyyyMmDdListGrpEle
+} from "../yyyymmdd-list-grp/index.mjs";
+YyyyMmDdListGrpEle.define();
+export class Ele extends UiBase {
+  constructor() {
+    super();
+    __publicField(this, "_style", styleStr);
+    __publicField(this, "_template", html(_b || (_b = __template(['\n<div class="wrapper">\n    <div class="btns sub">\n        <i class="btn sub year"></i>\n        <i class="btn sub month"></i>\n    </div>\n    <dt-popover class="echo">\n        <div slot="trigger" class="title-wrapper">\n            <span class="title">title</span>\n            <i class="title-arrow"></i>\n        </div>\n        <dt-yyyymmdd-list-grp slot="pop" min-granularity="month" part="list-grp"></dt-yyyymmdd-list-grp>\n    </dt-popover>\n    <div class="btns add">\n        <i class="btn add month"></i>\n        <i class="btn add year"></i>\n    </div>\n</div>\n']))));
+    __publicField(this, "_render", debounce(() => {
+      const root = this.shadowRoot;
+      const ms = this.millisecond;
+      root.querySelector(
+        "dt-yyyymmdd-list-grp"
+      ).millisecond = ms;
+      root.querySelector(".title").textContent = this.titleFormatter(ms);
+    }, 0));
+    __publicField(this, "_onTitleToggle", (e) => {
+      const isOpen = e.detail;
+      e.stopPropagation();
+      this.shadowRoot.querySelector(".wrapper").classList.toggle(
+        "show-list",
+        isOpen
+      );
+      this.shadowRoot.querySelector(
+        "dt-yyyymmdd-list-grp"
+      ).scrollToCurrentItem();
+      this.dispatchEvent("popover-open-change", isOpen, true);
+    });
+    __publicField(this, "_onItemSelect", (e) => {
+      if (!(e.target instanceof YyyyMmDdListGrpEle)) return;
+      e.stopPropagation();
+      this.millisecond = e.target.millisecond;
+    });
+    __publicField(this, "_onBtnClick", (e) => {
+      if (!(e.target instanceof HTMLElement)) return;
+      const date = new Date(this.millisecond);
+      date.setDate(1);
+      if (e.target.matches(".add.year")) {
+        date.setFullYear(date.getFullYear() + 1);
+      } else if (e.target.matches(".sub.year")) {
+        date.setFullYear(date.getFullYear() - 1);
+      } else if (e.target.matches(".add.month")) {
+        date.setMonth(date.getMonth() + 1);
+      } else if (e.target.matches(".sub.month")) {
+        date.setMonth(date.getMonth() - 1);
+      }
+      this.millisecond = +date;
+    });
+    __publicField(this, "titleFormatter", (ms) => {
+      const date = new Date(ms);
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      return "".concat(("0" + month).slice(-2), "/").concat(year);
+    });
+    this._applyTemplate();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "millisecond",
+      "max-granularity",
+      "min-granularity",
+      "show-ctrl-btn-month-add",
+      "show-ctrl-btn-year-sub",
+      "show-ctrl-btn-month-add",
+      "show-ctrl-btn-month-sub"
+    ];
+  }
+  get millisecond() {
+    return Math.floor(+this._getAttr("millisecond", "0"));
+  }
+  set millisecond(v) {
+    if (!Number.isSafeInteger(v)) return;
+    this.setAttribute("millisecond", "" + Math.floor(v));
+  }
+  get showCtrlBtnYearAdd() {
+    return this.hasAttribute("show-ctrl-btn-year-add");
+  }
+  set showCtrlBtnYearAdd(val) {
+    this.toggleAttribute("show-ctrl-btn-year-add", val);
+  }
+  get showCtrlBtnYearSub() {
+    return this.hasAttribute("show-ctrl-btn-year-sub");
+  }
+  set showCtrlBtnYearSub(val) {
+    this.toggleAttribute("show-ctrl-btn-year-sub", val);
+  }
+  get showCtrlBtnMonthAdd() {
+    return this.hasAttribute("show-ctrl-btn-month-add");
+  }
+  set showCtrlBtnMonthAdd(val) {
+    this.toggleAttribute("show-ctrl-btn-month-add", val);
+  }
+  get showCtrlBtnMonthSub() {
+    return this.hasAttribute("show-ctrl-btn-month-sub");
+  }
+  set showCtrlBtnMonthSub(val) {
+    this.toggleAttribute("show-ctrl-btn-month-sub", val);
+  }
+  connectedCallback() {
+    if (!super.connectedCallback()) return;
+    this._render();
+    this.shadowRoot.querySelector(".echo").addEventListener(
+      "open-change",
+      this._onTitleToggle
+    );
+    this.shadowRoot.querySelector(
+      "dt-yyyymmdd-list-grp"
+    ).addEventListener("change", this._onItemSelect);
+    this.shadowRoot.querySelectorAll(".btn").forEach(
+      (btn) => {
+        btn.addEventListener("click", this._onBtnClick);
+      }
+    );
+  }
+  disconnectedCallback() {
+    if (!super.disconnectedCallback()) return;
+    this.shadowRoot.querySelector(
+      ".echo"
+    ).removeEventListener("open-change", this._onTitleToggle);
+    this.shadowRoot.querySelector(
+      "dt-yyyymmdd-list-grp"
+    ).removeEventListener("change", this._onItemSelect);
+    this.shadowRoot.querySelectorAll(".btn").forEach(
+      (btn) => {
+        btn.removeEventListener("click", this._onBtnClick);
+      }
+    );
+  }
+  _onAttrChanged(name, oldValue, newValue) {
+    super._onAttrChanged(name, oldValue, newValue);
+    this._render();
+    if (name === "millisecond") {
+      this.dispatchEvent(
+        "change",
+        {
+          oldTime: /* @__PURE__ */ new Date(+oldValue),
+          newTime: /* @__PURE__ */ new Date(+newValue)
+        },
+        true
+      );
+    }
+  }
+}
+__publicField(Ele, "tagName", "dt-yyyymm-nav");
+Ele.define();

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;
+}

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

@@ -0,0 +1,181 @@
+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, debounce, html } from "../../utils.mjs";
+import { Ele as NumListEle } from "../num-list/index.mjs";
+NumListEle.define();
+import {
+  UiBase
+} from "../web-component-base/index.mjs";
+const styleStr = css(_a || (_a = __template(["\n:host {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 15px;\n}\n\n.cols {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  height: 0;\n  justify-content: space-between;\n  gap: 2px;\n}\n\n.col {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.col > span {\n  text-align: center;\n  display: inline-block;\n  line-height: 27px;\n}\n\ndt-num-list {\n  flex: 1;\n}\n"])));
+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 year" part="col year">\n                <span part="col label year">Year</span>\n                <dt-num-list part="list year" class="year"></dt-num-list>\n            </div>\n            <div class="col month" part="col month">\n                <span part="col label month">Month</span>\n                <dt-num-list part="list month" class="month" min-num="1" max-num="12"></dt-num-list>\n            </div>\n            <div class="col day" part="col day">\n                <span part="col label day">Day</span>\n                <dt-num-list part="list day" class="day" min-num="1" max-num="31"></dt-num-list>\n            </div>\n        </div>\n    ']))));
+    __publicField(this, "_renderCols", debounce(() => {
+      if (!this.isConnected) return;
+      const { colOrder } = this;
+      const orderedCols = ["year", "month", "day"].sort((a, b) => colOrder.indexOf(a[0]) - colOrder.indexOf(b[0])).map(
+        (s) => this.shadowRoot.querySelector(".col.".concat(s))
+      );
+      const colsContainer = this.shadowRoot.querySelector(".cols");
+      if (orderedCols.every((el, i) => el === colsContainer.children[i]))
+        return;
+      colsContainer.append(...orderedCols);
+    }, 0));
+    __publicField(this, "_updateGranularity", debounce(() => {
+      var _a2, _b2;
+      if (!this.isConnected) return;
+      const { maxGranularity, minGranularity } = this;
+      const colsContainer = this.shadowRoot.querySelector(".cols");
+      const yEle = this.shadowRoot.querySelector(".col.year");
+      const mEle = this.shadowRoot.querySelector(".col.month");
+      const dEle = this.shadowRoot.querySelector(".col.day");
+      const granularityMap = { year: 3, month: 2, day: 1 };
+      let maxG = (_a2 = granularityMap[maxGranularity]) != null ? _a2 : 1;
+      let minG = (_b2 = granularityMap[minGranularity]) != null ? _b2 : 3;
+      if (maxG < minG) [maxG, minG] = [minG, maxG];
+      yEle.style.display = maxG >= 3 && minG <= 3 ? "" : "none";
+      mEle.style.display = maxG >= 2 && minG <= 2 ? "" : "none";
+      dEle.style.display = maxG >= 1 && minG <= 1 ? "" : "none";
+      colsContainer.style.display = [yEle, mEle, dEle].filter(
+        (ele) => ele.style.display !== "none"
+      ).length ? "" : "none";
+    }, 0));
+    __publicField(this, "_updateColsValue", debounce(() => {
+      if (!this.isConnected) return;
+      const { millisecond } = this;
+      const date = new Date(millisecond);
+      if (Number.isNaN(date.getTime())) return;
+      this._listEleYear.currentNum = date.getFullYear();
+      this._listEleMonth.currentNum = date.getMonth() + 1;
+      this._listEleDay.maxNum = new Date(
+        date.getFullYear(),
+        date.getMonth() + 1,
+        0
+      ).getDate();
+      this._listEleDay.currentNum = date.getDate();
+    }, 0));
+    __publicField(this, "_onColsSelect", ({
+      target,
+      detail: { newNum }
+    }) => {
+      if (!(target instanceof NumListEle)) return;
+      target.currentNum = newNum;
+      const oldMs = this.millisecond;
+      const newMs = this._getMsFromEle();
+      this.millisecond = newMs;
+      this.dispatchEvent(
+        "change",
+        {
+          oldMs,
+          newMs: this.millisecond
+        },
+        true
+      );
+    });
+    this._applyTemplate();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "millisecond",
+      "max-granularity",
+      "min-granularity",
+      "col-order"
+    ];
+  }
+  get _listEleYear() {
+    var _a2;
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("dt-num-list.year");
+  }
+  get _listEleMonth() {
+    var _a2;
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(
+      "dt-num-list.month"
+    );
+  }
+  get _listEleDay() {
+    var _a2;
+    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("dt-num-list.day");
+  }
+  get millisecond() {
+    return Math.floor(+this._getAttr("millisecond", "0"));
+  }
+  set millisecond(v) {
+    if (!Number.isSafeInteger(v)) return;
+    this.setAttribute("millisecond", "" + Math.floor(v));
+  }
+  get maxGranularity() {
+    return this._getAttr("max-granularity", "year");
+  }
+  set maxGranularity(v) {
+    if (!["year", "month", "day"].includes(v)) return;
+    this.setAttribute("max-granularity", v);
+  }
+  get minGranularity() {
+    return this._getAttr("min-granularity", "day");
+  }
+  set minGranularity(v) {
+    if (!["year", "month", "day"].includes(v)) return;
+    this.setAttribute("min-granularity", v);
+  }
+  get colOrder() {
+    return this._getAttr("col-order", "dmy");
+  }
+  set colOrder(v) {
+    if (!["ymd", "ydm", "myd", "mdy", "dym", "dmy"].includes(v)) return;
+    this.setAttribute("col-order", v);
+  }
+  scrollToCurrentItem() {
+    var _a2;
+    (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelectorAll("dt-num-list").forEach((ele) => {
+      if (ele instanceof NumListEle) ele.scrollToCurrent();
+    });
+  }
+  connectedCallback() {
+    if (!super.connectedCallback()) return;
+    this._listEleYear.formatter = (num) => "" + num;
+    this._listEleMonth.formatter = this._listEleDay.formatter = (num) => ("0" + num).slice(-2);
+    this._renderCols();
+    this._updateGranularity();
+    this._updateColsValue();
+    this._listEleYear.addEventListener("select-num", this._onColsSelect);
+    this._listEleMonth.addEventListener("select-num", this._onColsSelect);
+    this._listEleDay.addEventListener("select-num", this._onColsSelect);
+  }
+  disconnectedCallback() {
+    if (!super.disconnectedCallback()) return;
+    this._listEleYear.removeEventListener("select-num", this._onColsSelect);
+    this._listEleMonth.removeEventListener(
+      "select-num",
+      this._onColsSelect
+    );
+    this._listEleDay.removeEventListener("select-num", this._onColsSelect);
+  }
+  _onAttrChanged(name, oldValue, newValue) {
+    super._onAttrChanged(name, oldValue, newValue);
+    if (name === "col-order") this._renderCols();
+    else if (name === "max-granularity" || name === "min-granularity")
+      this._updateGranularity();
+    else if (name === "millisecond") this._updateColsValue();
+  }
+  _getMsFromEle() {
+    const month = this._listEleMonth.currentNum;
+    const date = new Date(
+      this._listEleYear.currentNum,
+      month - 1,
+      this._listEleDay.currentNum
+    );
+    if (date.getMonth() + 1 !== month) {
+      date.setDate(0);
+    }
+    return +date;
+  }
+}
+__publicField(Ele, "tagName", "dt-yyyymmdd-list-grp");
+Ele.define();

package/dist/i18n.d.ts

@@ -0,0 +1,36 @@
+export type DataLimit = 'all' | 'today' | 'yesterday' | 'week' | 'lastWeek' | 'last7Days' | 'month' | 'last30Days' | 'last180Days' | 'last6Month' | 'year';
+export declare const langs: readonly ["en-US", "zh-CN", "zh-TW", "id-ID", "vi-VN", "th-TH", "ms-MY", "ko-KR", "ar-AE"];
+export type Lang = (typeof langs)[number];
+export type I18nCfg = {
+    box: {
+        confirm: string;
+        cancel: string;
+        select: string;
+    };
+    quick: {
+        [k in DataLimit]: string;
+    } & {
+        timezone: string;
+        recommend: string;
+        timezoneList: string;
+    };
+    date: {
+        sun: string;
+        mon: string;
+        tue: string;
+        wed: string;
+        thu: string;
+        fri: string;
+        sat: string;
+    };
+    time: {
+        startTime: string;
+        endTime: string;
+        startMillisecond: string;
+        endMillisecond: string;
+        singleTitle: string;
+    };
+};
+export type I18n = Record<Lang, I18nCfg>;
+export declare const i18n: I18n;
+export default i18n;