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

package/dist/assets/arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor"><path d="m8.02 10.54 3.96-4.4a.583.583 0 0 0-.433-.973h-7.88a.583.583 0 0 0-.434.973l3.94 4.378c.216.24.585.26.824.044l.022-.021Z"/></svg>

package/dist/assets/arrow-left-double.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="currentColor"><path 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"/></svg>

package/dist/assets/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="currentColor"><path 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"/></svg>

package/dist/assets/arrow-right-double.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor"><path 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"/></svg>

package/dist/assets/arrow-right.svg

@@ -0,0 +1 @@
+<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>

package/dist/assets/back-arrow.svg

@@ -0,0 +1 @@
+<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>

package/dist/assets/time.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" fill="currentColor"><path d="M7.4335 4.241a.4376.4376 0 0 0-.871.0594v3.783l.0044.0622a.4375.4375 0 0 0 .1921.3029L8.9242 9.877l.0566.0317a.4376.4376 0 0 0 .5495-.1559l.0317-.0566a.4376.4376 0 0 0-.1559-.5495L7.4375 7.8471V4.3004l-.004-.0593ZM7 1.6667c-3.2217 0-5.8333 2.6116-5.8333 5.8333 0 3.2217 2.6116 5.8333 5.8333 5.8333 3.2217 0 5.8333-2.6116 5.8333-5.8333 0-3.2217-2.6116-5.8333-5.8333-5.8333Zm0 .814c2.7721 0 5.0194 2.2472 5.0194 5.0193 0 2.7721-2.2473 5.0194-5.0194 5.0194S1.9806 10.2721 1.9806 7.5 4.228 2.4806 7 2.4806Z"/></svg>

package/dist/components/calendar/index.css

@@ -0,0 +1,108 @@
+:host {
+  --gap: var(--calendar-item-gap, 10px 0);
+  --item-size: var(--calendar-item-size, 30px);
+  --color-disabled-text: var(--calendar-item-disabled-text, #aaa);
+  --color-active-bg: var(--calendar-item-active-bg, #002BE7);
+  --color-active-text: var(--calendar-item-active-text, #fff);
+  --color-in-range-bg: var(--calendar-item-in-range-bg, #002BE726);
+  --color-in-range-text: var(--calendar-item-in-range-text, #002BE7);
+  --color-hover-bg: var(--calendar-item-hover-bg, #0000000D);
+  --color-hover-text: var(--calendar-item-hover-text, #000);
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--gap);
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  text-align: center;
+}
+
+.week {
+  min-width: var(--item-size);
+}
+
+.item {
+  min-width: var(--item-size);
+  line-height: var(--item-size);
+  height: var(--item-size);
+  position: relative;
+  --half-period-bg-w: calc(50% + var(--item-size) / 2);
+}
+.item span {
+  position: relative;
+  z-index: 2;
+}
+.item:not(.disabled) {
+  cursor: pointer;
+}
+:host([show-other-month]) .item.prev.disabled, :host([show-other-month]) .item.next.disabled, .item.disabled:not(.prev, .next) {
+  cursor: not-allowed;
+  color: var(--color-disabled-text);
+}
+.item:hover {
+  color: var(--color-hover-text);
+}
+.item.in-range {
+  color: var(--color-in-range-text);
+}
+.item:not(.disabled) .highlight {
+  display: block;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--item-size);
+  height: var(--item-size);
+  transform: translate(-50%, -50%);
+}
+.item.start, .item.end {
+  color: var(--color-active-text);
+}
+.item.start .highlight, .item.end .highlight {
+  background-color: var(--color-active-bg);
+}
+.item:hover .highlight {
+  background-color: var(--color-hover-bg);
+}
+.item.in-range .bg {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 43, 231, 0.1490196078);
+}
+.item:nth-of-type(7n + 1) .bg {
+  border-radius: var(--item-size) 0 0 var(--item-size);
+  width: var(--half-period-bg-w);
+  left: calc(50% - var(--item-size) / 2);
+}
+.item:nth-of-type(7n) .bg {
+  border-radius: 0 var(--item-size) var(--item-size) 0;
+  width: var(--half-period-bg-w);
+}
+.item:nth-of-type(7n).range-start .bg {
+  width: var(--item-size);
+  left: calc(50% - var(--item-size) / 2);
+}
+.item.range-start .bg {
+  border-top-left-radius: var(--item-size);
+  border-bottom-left-radius: var(--item-size);
+  width: var(--half-period-bg-w);
+  left: calc(50% - var(--item-size) / 2);
+}
+.item.range-end .bg {
+  border-top-right-radius: var(--item-size);
+  border-bottom-right-radius: var(--item-size);
+  width: var(--half-period-bg-w);
+}
+.item.range-start.range-end .bg {
+  width: var(--item-size);
+}
+.item:nth-of-type(7n).range-start .bg, .item:nth-of-type(7n + 1).range-end .bg {
+  width: var(--item-size);
+}

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

@@ -0,0 +1,84 @@
+import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
+export type Weeks = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+export declare const weekKey: Weeks[];
+export declare const getWeekInOrder: (startAt?: Weeks | null) => Weeks[];
+export interface Attrs extends BaseAttrs {
+    /**
+     * 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 Date.now()
+     */
+    'showing-time'?: string | number;
+    /**
+     * The start time of the calendar display range.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     * @default 'current-time'
+     */
+    'time-start'?: string | number;
+    /**
+     * The end time of the calendar display range.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     * @default 'time-start'
+     */
+    'time-end'?: string | number;
+    /**
+     * The minimum time of the calendar display range.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     */
+    'min-time'?: string | number;
+    /**
+     * The maximum time of the calendar display range.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     */
+    'max-time'?: string | number;
+    /**
+     * Set which day of the week is the first day.
+     * @type `'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'`
+     * @default 'sun'
+     */
+    'week-start-at'?: Weeks;
+    /**
+     * Whether to show the days of the previous and next months in the current month's calendar.
+     * @type {boolean}
+     * @default false
+     */
+    'show-other-month'?: boolean;
+}
+export interface Emits {
+    'select-time': Date;
+    'hover-item': Date;
+}
+export type EventMap = Emit2EventMap<Emits>;
+/**
+ * 基础的日历显示组件。仅显示星期和数字。
+ */
+export declare class Ele extends UiBase<Attrs, Emits> {
+    static tagName: "dt-calendar-base";
+    static get observedAttributes(): string[];
+    get showingTime(): number | string | Date;
+    get timeStart(): number | string | Date;
+    get timeEnd(): number | string | Date;
+    get minTime(): number | string | Date;
+    get maxTime(): number | string | Date;
+    private _setTimeAttr;
+    set showingTime(val: number | string | Date);
+    set timeStart(val: number | string | Date);
+    set timeEnd(val: number | string | Date);
+    set minTime(val: number | string | Date);
+    set maxTime(val: number | string | Date);
+    get weekStartAt(): Weeks;
+    set weekStartAt(val: Weeks);
+    get showOtherMonth(): boolean;
+    set showOtherMonth(val: boolean);
+    protected _style: string;
+    protected _template: string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    private _onWeekStartAtChange;
+    private _onTimeChange;
+    private _onClick;
+    private _onPointerOver;
+    formatter: (i: number) => string;
+}

package/dist/components/calendar/index.mjs

@@ -0,0 +1,238 @@
+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;
+import { closestByEvent, css, debounce, html } from "../../utils.mjs";
+import { Ele as I18nEle } from "../i18n/index.mjs";
+I18nEle.define();
+import {
+  UiBase
+} from "../web-component-base/index.mjs";
+const styleStr = css(_a || (_a = __template(["\n:host {\n  --gap: var(--calendar-item-gap, 10px 0);\n  --item-size: var(--calendar-item-size, 30px);\n  --color-disabled-text: var(--calendar-item-disabled-text, #aaa);\n  --color-active-bg: var(--calendar-item-active-bg, #002BE7);\n  --color-active-text: var(--calendar-item-active-text, #fff);\n  --color-in-range-bg: var(--calendar-item-in-range-bg, #002BE726);\n  --color-in-range-text: var(--calendar-item-in-range-text, #002BE7);\n  --color-hover-bg: var(--calendar-item-hover-bg, #0000000D);\n  --color-hover-text: var(--calendar-item-hover-text, #000);\n}\n\n.wrapper {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: var(--gap);\n  width: 100%;\n  height: 100%;\n  justify-content: space-between;\n  text-align: center;\n}\n\n.week {\n  min-width: var(--item-size);\n}\n\n.item {\n  min-width: var(--item-size);\n  line-height: var(--item-size);\n  height: var(--item-size);\n  position: relative;\n  --half-period-bg-w: calc(50% + var(--item-size) / 2);\n}\n.item span {\n  position: relative;\n  z-index: 2;\n}\n.item:not(.disabled) {\n  cursor: pointer;\n}\n:host([show-other-month]) .item.prev.disabled, :host([show-other-month]) .item.next.disabled, .item.disabled:not(.prev, .next) {\n  cursor: not-allowed;\n  color: var(--color-disabled-text);\n}\n.item:hover {\n  color: var(--color-hover-text);\n}\n.item.in-range {\n  color: var(--color-in-range-text);\n}\n.item:not(.disabled) .highlight {\n  display: block;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: var(--item-size);\n  height: var(--item-size);\n  transform: translate(-50%, -50%);\n}\n.item.start, .item.end {\n  color: var(--color-active-text);\n}\n.item.start .highlight, .item.end .highlight {\n  background-color: var(--color-active-bg);\n}\n.item:hover .highlight {\n  background-color: var(--color-hover-bg);\n}\n.item.in-range .bg {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 43, 231, 0.1490196078);\n}\n.item:nth-of-type(7n + 1) .bg {\n  border-radius: var(--item-size) 0 0 var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item:nth-of-type(7n) .bg {\n  border-radius: 0 var(--item-size) var(--item-size) 0;\n  width: var(--half-period-bg-w);\n}\n.item:nth-of-type(7n).range-start .bg {\n  width: var(--item-size);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-start .bg {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-end .bg {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n}\n.item.range-start.range-end .bg {\n  width: var(--item-size);\n}\n.item:nth-of-type(7n).range-start .bg, .item:nth-of-type(7n + 1).range-end .bg {\n  width: var(--item-size);\n}\n"])));
+export const weekKey = [
+  "sun",
+  "mon",
+  "tue",
+  "wed",
+  "thu",
+  "fri",
+  "sat"
+];
+export const getWeekInOrder = (startAt) => {
+  if (!startAt) startAt = "sun";
+  const index = weekKey.indexOf(startAt);
+  if (index === -1) return weekKey;
+  return [...weekKey.slice(index), ...weekKey.slice(0, index)];
+};
+export class Ele extends UiBase {
+  constructor() {
+    super();
+    __publicField(this, "_style", styleStr);
+    __publicField(this, "_template", html(_d || (_d = __template(['\n<div class="wrapper">', "</div>"])), weekKey.map(
+      (key) => html(_b || (_b = __template(['<dt-i18n class="week" i18n-key="date.', '" part="week"></dt-i18n>'])), key)
+    ).join("") + [...Array(7 * 6)].map(
+      (_, i) => html(_c || (_c = __template(['<div class="item" part="item"><i class="bg"></i><i class="highlight"></i><span>', "</span></div>"])), i % 31 + 1)
+    ).join("")));
+    __publicField(this, "_onWeekStartAtChange", debounce(() => {
+      if (!this.isConnected) return;
+      const weekOrder = getWeekInOrder(this.weekStartAt);
+      this.shadowRoot.querySelectorAll(".week").forEach((ele, i) => {
+        ele.setAttribute("i18n-key", "date.".concat(weekOrder[i]));
+      });
+      this._onTimeChange();
+    }, 0));
+    __publicField(this, "_onTimeChange", debounce(() => {
+      if (!this.isConnected) return;
+      const currentTime = this.showingTime;
+      let timeStart = this.timeStart;
+      let timeEnd = this.timeEnd;
+      currentTime.setHours(0, 0, 0, 0);
+      timeStart.setHours(0, 0, 0, 0);
+      timeEnd.setHours(0, 0, 0, 0);
+      if (Number.isNaN(+currentTime) || Number.isNaN(+timeStart) || Number.isNaN(+timeEnd)) {
+        console.warn("Invalid date attribute(s) on <".concat(this.tagName, ">"));
+        return;
+      }
+      if (timeStart > timeEnd) {
+        [timeStart, timeEnd] = [timeEnd, timeStart];
+      }
+      const minTime = new Date(this._getAttr("min-time") || "");
+      const maxTime = new Date(this._getAttr("max-time") || "");
+      minTime.setHours(0, 0, 0, 0);
+      maxTime.setHours(0, 0, 0, 0);
+      if (maxTime < timeEnd) timeEnd = maxTime;
+      if (timeStart < minTime) timeStart = minTime;
+      const weekStartAt = this.weekStartAt;
+      const year = currentTime.getFullYear();
+      const month = currentTime.getMonth();
+      const days = new Date(year, month + 1, 0).getDate();
+      const daysPrev = new Date(year, month, 0).getDate();
+      const firstWeekOfCurMonth = new Date(year, month, 1).getDay();
+      const weekStartOffset = weekKey.indexOf(weekStartAt);
+      const adjustedFirstWeek = (firstWeekOfCurMonth - weekStartOffset + 7) % 7;
+      let itemIdx = 0;
+      const items = this.shadowRoot.querySelectorAll(".item");
+      const changeItemText = (item, text) => {
+        item.querySelector("span").textContent = text;
+      };
+      items.forEach((ele) => {
+        ele.className = "item disabled";
+        ele.removeAttribute("data-time");
+        ele.setAttribute("part", "item disabled");
+        changeItemText(ele, " ");
+      });
+      for (let i = daysPrev - adjustedFirstWeek + 1; i <= daysPrev; ++i) {
+        const ele = items[itemIdx++];
+        ele.classList.add("prev");
+        ele.part.add("prev");
+        changeItemText(ele, this.showOtherMonth ? this.formatter(i) : " ");
+      }
+      for (let i = 1; i <= days; ++i) {
+        const ele = items[itemIdx++];
+        const time = new Date(year, month, i);
+        ele.classList.toggle("month-start", i === 1);
+        ele.classList.toggle("month-end", i === days);
+        ele.classList.toggle("disabled", time < minTime || time > maxTime);
+        ele.classList.toggle("start", +time === +timeStart);
+        ele.classList.toggle(
+          "in-range",
+          +time >= +timeStart && +time <= +timeEnd
+        );
+        ele.classList.toggle("end", +time === +timeEnd);
+        ele.setAttribute("part", ele.className);
+        ele.dataset.time = time.toISOString();
+        changeItemText(ele, this.formatter(i));
+      }
+      const inRangeItem = Array.from(
+        this.shadowRoot.querySelectorAll(".item.in-range")
+      );
+      if (inRangeItem.length) {
+        inRangeItem[0].classList.add("range-start");
+        inRangeItem[0].part.add("range-start");
+        inRangeItem[inRangeItem.length - 1].classList.add("range-end");
+        inRangeItem[inRangeItem.length - 1].part.add("range-end");
+      }
+      for (let i = 1; itemIdx < items.length; ++i) {
+        const ele = items[itemIdx++];
+        ele.classList.add("next");
+        ele.part.add("next");
+        changeItemText(ele, this.showOtherMonth ? this.formatter(i) : " ");
+      }
+    }, 0));
+    __publicField(this, "_onClick", (e) => {
+      const item = closestByEvent(e, ".item[data-time]:not(.disabled)", this);
+      if (!item) return;
+      const time = new Date(item.dataset.time);
+      super.dispatchEvent("select-time", time, true);
+    });
+    __publicField(this, "_onPointerOver", (e) => {
+      const item = closestByEvent(e, ".item[data-time]:not(.disabled)", this);
+      if (!item) return;
+      const time = new Date(item.dataset.time);
+      super.dispatchEvent("hover-item", time, true);
+    });
+    __publicField(this, "formatter", (i) => "" + i);
+    this._applyTemplate();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "showing-time",
+      "time-start",
+      "time-end",
+      "min-time",
+      "max-time",
+      "week-start-at"
+    ];
+  }
+  get showingTime() {
+    const v = this._getAttr("showing-time", "" + Date.now());
+    return new Date(Number.isNaN(+v) ? v : +v);
+  }
+  get timeStart() {
+    const v = this._getAttr("time-start", "" + this.showingTime);
+    return new Date(Number.isNaN(+v) ? v : +v);
+  }
+  get timeEnd() {
+    const v = this._getAttr("time-end", "" + this.timeStart);
+    return new Date(Number.isNaN(+v) ? v : +v);
+  }
+  get minTime() {
+    const v = this._getAttr("min-time", "");
+    return new Date(Number.isNaN(+v) ? v : +v);
+  }
+  get maxTime() {
+    const v = this._getAttr("max-time", "");
+    return new Date(Number.isNaN(+v) ? v : +v);
+  }
+  _setTimeAttr(name, value) {
+    const v = new Date(value);
+    if (Number.isNaN(+v)) return;
+    this.setAttribute(name, +v + "");
+  }
+  set showingTime(val) {
+    this._setTimeAttr("showing-time", val);
+  }
+  set timeStart(val) {
+    this._setTimeAttr("time-start", val);
+  }
+  set timeEnd(val) {
+    this._setTimeAttr("time-end", val);
+  }
+  set minTime(val) {
+    this._setTimeAttr("min-time", val);
+  }
+  set maxTime(val) {
+    this._setTimeAttr("max-time", 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 showOtherMonth() {
+    return this.hasAttribute("show-other-month");
+  }
+  set showOtherMonth(val) {
+    this.setAttribute("show-other-month", "" + val);
+  }
+  connectedCallback() {
+    if (!super.connectedCallback()) return;
+    this._onWeekStartAtChange();
+    this._onTimeChange();
+    this.addEventListener("click", this._onClick);
+    this.shadowRoot.querySelector(".wrapper").addEventListener(
+      "pointerover",
+      this._onPointerOver
+    );
+  }
+  disconnectedCallback() {
+    if (!super.disconnectedCallback()) return;
+    this.removeEventListener("click", this._onClick);
+    this.shadowRoot.querySelector(".wrapper").removeEventListener(
+      "pointerover",
+      this._onPointerOver
+    );
+  }
+  _onAttrChanged(name, oldValue, newValue) {
+    super._onAttrChanged(name, oldValue, newValue);
+    if (name === "week-start-at") {
+      this._onWeekStartAtChange();
+    }
+    if ([
+      "showing-time",
+      "time-start",
+      "time-end",
+      "min-time",
+      "max-time"
+    ].includes(name)) {
+      this._onTimeChange();
+    }
+  }
+}
+__publicField(Ele, "tagName", "dt-calendar-base");
+Ele.define();

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

@@ -0,0 +1,60 @@
+: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;
+}
+
+.ms-input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  padding: 4px;
+  cursor: text;
+}
+
+label > span {
+  display: inline-block;
+  line-height: 1;
+  font-size: 14px;
+  margin-bottom: 2px;
+}
+
+input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  border: none;
+  outline: none;
+}
+
+input::placeholder {
+  color: #999;
+}

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

@@ -0,0 +1,54 @@
+import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
+export interface Attrs extends BaseAttrs {
+    millisecond: number;
+    /**
+     * 选择器的粒度，表示最大可选的时间单位。默认为 hour。
+     * 例如设置为 'minute'，则表示最大只能选择到分钟，小时将被忽略。
+     */
+    'max-granularity'?: 'hour' | 'minute' | 'second' | 'millisecond';
+    /**
+     * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
+     * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
+     */
+    'min-granularity'?: 'hour' | 'minute' | 'second' | 'millisecond';
+    'col-order'?: 'hms' | 'hsm' | 'mhs' | 'msh' | 'shm' | 'smh';
+}
+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-hhmmss-ms-list-grp";
+    static get observedAttributes(): string[];
+    protected _style: string;
+    protected _template: string;
+    constructor();
+    private get _colsHourEle();
+    private get _colsMinuteEle();
+    private get _colsSecondEle();
+    private get _msInputEle();
+    get millisecond(): number;
+    set millisecond(v: number);
+    get maxGranularity(): "hour" | "minute" | "second" | "millisecond";
+    set maxGranularity(v: 'hour' | 'minute' | 'second' | 'millisecond');
+    get minGranularity(): "hour" | "minute" | "second" | "millisecond";
+    set minGranularity(v: 'hour' | 'minute' | 'second' | 'millisecond');
+    get colOrder(): "hms" | "hsm" | "mhs" | "msh" | "shm" | "smh";
+    set colOrder(v: 'hms' | 'hsm' | 'mhs' | 'msh' | 'shm' | 'smh');
+    scrollToCurrentItem(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    private _renderCols;
+    private _updateGranularity;
+    private _updateColsValue;
+    private _getMsFromEle;
+    private _onMsInput;
+    private _onColsSelect;
+}