@gez/date-time-kit 2.0.0-alpha.23 → 2.0.0-alpha.25

package/dist/assets/date.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18"><path d="M12.75.042c.345 0 .625.28.625.625v.625H14c1.726 0 3.125 1.4 3.125 3.125v10c0 1.726-1.4 3.125-3.125 3.125H4a3.125 3.125 0 0 1-3.125-3.125v-10c0-1.726 1.4-3.125 3.125-3.125h.625V.667a.625.625 0 1 1 1.25 0v.625h6.25V.667c0-.345.28-.625.625-.625M2.125 14.417c0 1.035.84 1.875 1.875 1.875h10c1.035 0 1.875-.84 1.875-1.875V6.708H2.125zm3.19-2.29a.626.626 0 0 1 0 1.245l-.065.003h-.833a.625.625 0 0 1 0-1.25h.833l.064.003Zm4.165 0a.626.626 0 0 1 0 1.245l-.063.003h-.834a.625.625 0 0 1 0-1.25h.834zm4.168 0a.625.625 0 0 1 0 1.245l-.065.003h-.833a.625.625 0 0 1 0-1.25h.833zM5.314 8.796a.625.625 0 0 1 0 1.243l-.064.004h-.833a.625.625 0 0 1 0-1.25h.833zm4.166 0a.626.626 0 0 1 0 1.243l-.063.004h-.834a.626.626 0 0 1 0-1.25h.834zm4.168 0a.625.625 0 0 1 0 1.243l-.065.004h-.833a.625.625 0 0 1 0-1.25h.833zM4 2.542c-1.036 0-1.875.84-1.875 1.875v1.041h13.75V4.417c0-1.036-.84-1.875-1.875-1.875h-.625v.625l-.003.063a.626.626 0 0 1-1.244 0l-.003-.063v-.625h-6.25v.625l-.003.063a.626.626 0 0 1-1.244 0l-.003-.063v-.625z"/></svg>

package/dist/assets/index.d.ts

@@ -6,5 +6,6 @@ export declare const arrowLeftDoubleSvg = "<svg class=\"bidirectional-flip\" wid
 export declare const arrowRightDoubleSvg = "<svg class=\"bidirectional-flip\" 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>";
 export declare const arrowDownSvg = "<svg class=\"bidirectional-flip\" 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>";
 export declare const backArrowSvg = "<svg class=\"bidirectional-flip\" 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>";
-export declare const timeSvg = "<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>";
+export declare const timeSvg = "<svg viewBox=\"0 0 14 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>";
 export declare const closeBarSvg = "<svg><rect width=\"40\" height=\"4\" rx=\"2\"/></svg>";
+export declare const dateSvg = "<svg viewBox=\"0 0 18 18\" fill=\"currentColor\"><path d=\"M12.75.042c.345 0 .625.28.625.625v.625H14c1.726 0 3.125 1.4 3.125 3.125v10c0 1.726-1.4 3.125-3.125 3.125H4a3.125 3.125 0 0 1-3.125-3.125v-10c0-1.726 1.4-3.125 3.125-3.125h.625V.667a.625.625 0 1 1 1.25 0v.625h6.25V.667c0-.345.28-.625.625-.625M2.125 14.417c0 1.035.84 1.875 1.875 1.875h10c1.035 0 1.875-.84 1.875-1.875V6.708H2.125zm3.19-2.29a.626.626 0 0 1 0 1.245l-.065.003h-.833a.625.625 0 0 1 0-1.25h.833l.064.003Zm4.165 0a.626.626 0 0 1 0 1.245l-.063.003h-.834a.625.625 0 0 1 0-1.25h.834zm4.168 0a.625.625 0 0 1 0 1.245l-.065.003h-.833a.625.625 0 0 1 0-1.25h.833zM5.314 8.796a.625.625 0 0 1 0 1.243l-.064.004h-.833a.625.625 0 0 1 0-1.25h.833zm4.166 0a.626.626 0 0 1 0 1.243l-.063.004h-.834a.626.626 0 0 1 0-1.25h.834zm4.168 0a.625.625 0 0 1 0 1.243l-.065.004h-.833a.625.625 0 0 1 0-1.25h.833zM4 2.542c-1.036 0-1.875.84-1.875 1.875v1.041h13.75V4.417c0-1.036-.84-1.875-1.875-1.875h-.625v.625l-.003.063a.626.626 0 0 1-1.244 0l-.003-.063v-.625h-6.25v.625l-.003.063a.626.626 0 0 1-1.244 0l-.003-.063v-.625z\"/></svg>";

package/dist/assets/index.mjs

@@ -10,5 +10,6 @@ export const arrowLeftDoubleSvg = '<svg class="bidirectional-flip" width="16" he
 export const arrowRightDoubleSvg = '<svg class="bidirectional-flip" 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>';
 export const arrowDownSvg = '<svg class="bidirectional-flip" 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>';
 export const backArrowSvg = '<svg class="bidirectional-flip" 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>';
-export const timeSvg = '<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>';
+export const timeSvg = '<svg viewBox="0 0 14 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>';
 export const closeBarSvg = '<svg><rect width="40" height="4" rx="2"/></svg>';
+export const dateSvg = '<svg viewBox="0 0 18 18" fill="currentColor"><path d="M12.75.042c.345 0 .625.28.625.625v.625H14c1.726 0 3.125 1.4 3.125 3.125v10c0 1.726-1.4 3.125-3.125 3.125H4a3.125 3.125 0 0 1-3.125-3.125v-10c0-1.726 1.4-3.125 3.125-3.125h.625V.667a.625.625 0 1 1 1.25 0v.625h6.25V.667c0-.345.28-.625.625-.625M2.125 14.417c0 1.035.84 1.875 1.875 1.875h10c1.035 0 1.875-.84 1.875-1.875V6.708H2.125zm3.19-2.29a.626.626 0 0 1 0 1.245l-.065.003h-.833a.625.625 0 0 1 0-1.25h.833l.064.003Zm4.165 0a.626.626 0 0 1 0 1.245l-.063.003h-.834a.625.625 0 0 1 0-1.25h.834zm4.168 0a.625.625 0 0 1 0 1.245l-.065.003h-.833a.625.625 0 0 1 0-1.25h.833zM5.314 8.796a.625.625 0 0 1 0 1.243l-.064.004h-.833a.625.625 0 0 1 0-1.25h.833zm4.166 0a.626.626 0 0 1 0 1.243l-.063.004h-.834a.626.626 0 0 1 0-1.25h.834zm4.168 0a.625.625 0 0 1 0 1.243l-.065.004h-.833a.625.625 0 0 1 0-1.25h.833zM4 2.542c-1.036 0-1.875.84-1.875 1.875v1.041h13.75V4.417c0-1.036-.84-1.875-1.875-1.875h-.625v.625l-.003.063a.626.626 0 0 1-1.244 0l-.003-.063v-.625h-6.25v.625l-.003.063a.626.626 0 0 1-1.244 0l-.003-.063v-.625z"/></svg>';

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

@@ -53,7 +53,13 @@ export type EventMap = Emit2EventMap<Emits>;
  */
 export declare class Ele extends UiBase<Attrs, Emits> {
     static tagName: "dt-calendar-base";
+    protected static _style: string;
+    protected static _template: string;
     static get observedAttributes(): string[];
+    get _staticEls(): {
+        readonly weeks: any[];
+        readonly items: any[];
+    };
     get showingTime(): number | string | Date;
     get timeStart(): number | string | Date;
     get timeEnd(): number | string | Date;
@@ -69,11 +75,7 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     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 | null, newValue: string | null): void;
     private _onWeekStartAtChange;
     private _onTimeChange;

package/dist/components/calendar/index.mjs

@@ -1,7 +1,10 @@
+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);
-import { closestByEvent, debounce } from "../../utils.mjs";
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a, _b, _c;
+import { closestByEvent } from "../../utils.mjs";
 import {
   UiBase
 } from "../web-component-base/index.mjs";
@@ -11,19 +14,15 @@ import { getWeekInOrder, weekKey } from "./weeks.mjs";
 export { weekKey, getWeekInOrder } from "./weeks.mjs";
 export class Ele extends UiBase {
   constructor() {
-    super();
-    __publicField(this, "_style", styleStr);
-    __publicField(this, "_template", html);
-    __publicField(this, "_onWeekStartAtChange", debounce(() => {
-      if (!this.isConnected) return;
+    super(...arguments);
+    __publicField(this, "_onWeekStartAtChange", super._genRenderFn(() => {
       const weekOrder = getWeekInOrder(this.weekStartAt);
-      this.shadowRoot.querySelectorAll(".week").forEach((ele, i) => {
+      this._els.weeks.forEach((ele, i) => {
         ele.setAttribute("i18n-key", "date.".concat(weekOrder[i]));
       });
       this._onTimeChange();
-    }, 0));
-    __publicField(this, "_onTimeChange", debounce(() => {
-      if (!this.isConnected) return;
+    }));
+    __publicField(this, "_onTimeChange", super._genRenderFn(() => {
       const currentTime = this.showingTime;
       let timeStart = this.timeStart;
       let timeEnd = this.timeEnd;
@@ -52,7 +51,7 @@ export class Ele extends UiBase {
       const weekStartOffset = weekKey.indexOf(weekStartAt);
       const adjustedFirstWeek = (firstWeekOfCurMonth - weekStartOffset + 7) % 7;
       let itemIdx = 0;
-      const items = this.shadowRoot.querySelectorAll(".item");
+      const items = this._els.items;
       const changeItemText = (item, text) => {
         item.querySelector("span").textContent = text;
       };
@@ -84,8 +83,8 @@ export class Ele extends UiBase {
         ele.dataset.time = time.toISOString();
         changeItemText(ele, this.formatter(i));
       }
-      const inRangeItem = Array.from(
-        this.shadowRoot.querySelectorAll(".item.in-range")
+      const inRangeItem = items.filter(
+        (e) => e.classList.contains("in-range")
       );
       if (inRangeItem.length) {
         inRangeItem[0].classList.add("range-start");
@@ -99,7 +98,7 @@ export class Ele extends UiBase {
         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;
@@ -112,8 +111,7 @@ export class Ele extends UiBase {
       const time = new Date(item.dataset.time);
       super.dispatchEvent("hover-item", time, true);
     });
-    __publicField(this, "formatter", (i) => "" + i);
-    this._applyTemplate();
+    __publicField(this, "formatter", (i) => (i < 10 ? "0" : "") + i);
   }
   static get observedAttributes() {
     return [
@@ -126,6 +124,13 @@ export class Ele extends UiBase {
       "week-start-at"
     ];
   }
+  get _staticEls() {
+    return {
+      ...super._staticEls,
+      weeks: this.$(_a || (_a = __template([".week"]))),
+      items: this.$(_b || (_b = __template([".item"])))
+    };
+  }
   get showingTime() {
     const v = this._getAttr("showing-time", "" + Date.now());
     return new Date(Number.isNaN(+v) ? v : +v);
@@ -183,19 +188,8 @@ export class Ele extends UiBase {
     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
-    );
+    this._bindEvt(this)("click", this._onClick);
+    this._bindEvt(_c || (_c = __template([".wrapper"])))("pointerover", this._onPointerOver);
   }
   _onAttrChanged(name, oldValue, newValue) {
     super._onAttrChanged(name, oldValue, newValue);
@@ -214,4 +208,6 @@ export class Ele extends UiBase {
   }
 }
 __publicField(Ele, "tagName", "dt-calendar-base");
+__publicField(Ele, "_style", styleStr);
+__publicField(Ele, "_template", html);
 Ele.define();

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

@@ -0,0 +1,6 @@
+export declare enum GranType {
+    Date = "date",
+    Time = "time",
+    CalendarTime = "calendar_time",
+    Calendar = "calendar"
+}

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

@@ -0,0 +1,7 @@
+export var GranType = /* @__PURE__ */ ((GranType2) => {
+  GranType2["Date"] = "date";
+  GranType2["Time"] = "time";
+  GranType2["CalendarTime"] = "calendar_time";
+  GranType2["Calendar"] = "calendar";
+  return GranType2;
+})(GranType || {});

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

@@ -1,8 +1,11 @@
-import { type Weeks } from '../calendar';
-import { type Granularity as TimeGranularity } from '../hhmmss-ms-list-grp/selector';
+import { type Ele as CalendarBaseEle, type Weeks } from '../calendar';
+import { type Ele as HhMmSsMsSelectorEle } from '../hhmmss-ms-list-grp/selector';
+import type { Ele as PopoverEle } from '../popover';
 import { type reExportPopoverAttrs } from '../popover/attr-sync-helper';
 import { type BaseAttrs, type BaseEmits, type Emit2EventMap, UiBase } from '../web-component-base';
-export declare const granularityList: readonly ["day", "hour", "minute", "second", "millisecond"];
+import { Ele as YyyyMmNavEle } from '../yyyymm-nav';
+import { type Ele as YyyyMmDdSelector } from '../yyyymmdd-list-grp/selector';
+export declare const granularityList: readonly ["year", "month", "day", "hour", "minute", "second", "millisecond"];
 export type Granularity = (typeof granularityList)[number];
 export type Attrs = BaseAttrs & reExportPopoverAttrs & {
     /**
@@ -28,6 +31,11 @@ export type Attrs = BaseAttrs & reExportPopoverAttrs & {
      * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。忽略的时间单位将被重置为 0。
      */
     'min-granularity'?: Granularity;
+    /**
+     * 选择器的粒度，表示最大可选的时间单位。默认为 year。
+     * 例如设置为 'day'，则表示只能选择到日，年和月秒将被忽略。忽略的时间单位将被重置为 0、1972（离1970最近的闰年）。
+     */
+    'max-granularity'?: Granularity;
     /**
      * The minimum time of the calendar display range.
      * @type {`string | number`} A value that can be passed to the Date constructor.
@@ -48,10 +56,13 @@ export type EventMap = Emit2EventMap<Emits>;
  * 日期时间选择器（单个时间点）
  * 包括日历和时分秒毫秒选择。
  *
- * 存在一个 timeFormatter 方法，用于格式化时分秒毫秒显示时间。
+ * - 存在一个 timeFormatter 方法，用于格式化时分秒毫秒显示时间。
+ * - 存在一个 dateFormatter 方法，用于格式化年月日显示时间。
  */
 export declare class Ele extends UiBase<Attrs, Emits> {
     static readonly tagName: "dt-date-time-selector";
+    protected static _style: string;
+    protected static _template: string;
     static get observedAttributes(): string[];
     private _getTimeAttr;
     private _setTimeAttr;
@@ -68,21 +79,36 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     set weekStartAt(val: Weeks);
     get minGranularity(): NonNullable<Attrs["min-granularity"]>;
     set minGranularity(val: NonNullable<Attrs['min-granularity']>);
-    protected _style: string;
-    protected _template: string;
-    private get _navEle();
-    private get _calendar();
-    private get _timeSelector();
-    private get _popoverEle();
-    constructor();
+    get maxGranularity(): NonNullable<Attrs["max-granularity"]>;
+    set maxGranularity(val: NonNullable<Attrs['max-granularity']>);
+    get _staticEls(): {
+        readonly hostWrapper: HTMLElement;
+        readonly nav: YyyyMmNavEle;
+        readonly calendar: CalendarBaseEle;
+        readonly timeSelectors: any[];
+        readonly timeSelectorInCalendar: HhMmSsMsSelectorEle;
+        readonly timeSelectorOnly: HhMmSsMsSelectorEle;
+        readonly dateSelector: YyyyMmDdSelector;
+        readonly popover: PopoverEle;
+        readonly slots: any[];
+    };
+    private get _granType();
+    private _updateSlot;
+    private _updateOpenState;
+    get open(): boolean;
+    set open(v: boolean);
+    private _ob;
     connectedCallback(): void;
-    disconnectedCallback(): void;
+    disconnectedCallback(): boolean | void;
     protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
     private _render;
     private _onCalendarSelect;
     private _onNavChange;
     private _onNavOpenToggle;
     private _onTimeSelectorChange;
-    get timeFormatter(): (time: Date, minGranularity: TimeGranularity) => string;
-    set timeFormatter(fn: (time: Date, minGranularity: TimeGranularity) => string);
+    private _onSelectorOpenChange;
+    get timeFormatter(): HhMmSsMsSelectorEle["timeFormatter"];
+    set timeFormatter(fn: HhMmSsMsSelectorEle['timeFormatter']);
+    get dateFormatter(): YyyyMmDdSelector["dateFormatter"];
+    set dateFormatter(fn: YyyyMmDdSelector['dateFormatter']);
 }

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

@@ -11,4 +11,7 @@ import { Ele as CalendarBaseEle } from "../calendar/index.mjs";
 CalendarBaseEle.define();
 import { Ele as HhMmSsMsSelector } from "../hhmmss-ms-list-grp/selector.mjs";
 HhMmSsMsSelector.define();
-export default html(_a || (_a = __template(['\n<dt-popover part="popover">\n    <slot slot="trigger" name="trigger"><button>select date and time</button></slot>\n    <div slot="pop" class="wrapper" part="pop">\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-hhmmss-ms-selector></dt-hhmmss-ms-selector>\n    </div>\n</dt-popover>\n'])));
+import { Ele as YyyyMmDdSelector } from "../yyyymmdd-list-grp/selector.mjs";
+YyyyMmDdSelector.define();
+import { GranType } from "./common.mjs";
+export default html(_a || (_a = __template(['<div class="host-wrapper" data-type="', '">\n<dt-popover part="popover">\n  <slot slot="trigger" name="trigger" data-type="', " ", '">\n    <button>select date and time</button>\n  </slot>\n  <div slot="pop" class="wrapper" part="pop">\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-hhmmss-ms-selector></dt-hhmmss-ms-selector>\n  </div>\n</dt-popover>\n<dt-hhmmss-ms-selector class="timeOnly"><slot data-type="', '"></slot></dt-hhmmss-ms-selector>\n<dt-yyyymmdd-selector><slot data-type="', '"></slot></dt-yyyymmdd-selector>\n</div>'])), GranType.CalendarTime, GranType.CalendarTime, GranType.Calendar, GranType.Time, GranType.Date);

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

@@ -1,7 +1,10 @@
+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);
-import { closestByEvent, debounce } from "../../utils.mjs";
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+import { closestByEvent } from "../../utils.mjs";
 import {
   weekKey
 } from "../calendar/index.mjs";
@@ -10,6 +13,7 @@ import {
 } from "../hhmmss-ms-list-grp/selector.mjs";
 import {
   clearupPopEleAttrSync2Parent,
+  isPopoverAttrKey,
   parentPopAttrSync2PopEle,
   popEleAttrSync2Parent,
   popoverAttrKeys
@@ -20,53 +24,78 @@ import {
 import {
   Ele as YyyyMmNavEle
 } from "../yyyymm-nav/index.mjs";
+import {
+  granularityList as dateGranularityList
+} from "../yyyymmdd-list-grp/selector.mjs";
+import { GranType } from "./common.mjs";
 import html from "./index.html.mjs";
 import { styleStr } from "./styleStr.mjs";
-export const granularityList = ["day", ...timeGranularityList];
+export const granularityList = [
+  ...dateGranularityList,
+  ...timeGranularityList
+];
 export class Ele extends UiBase {
   constructor() {
-    super();
-    __publicField(this, "_style", styleStr);
-    __publicField(this, "_template", html);
-    __publicField(this, "_render", debounce(() => {
-      if (!this.isConnected) return;
+    super(...arguments);
+    __publicField(this, "_ob", null);
+    __publicField(this, "_render", super._genRenderFn(() => {
+      this._updateOpenState();
       const currentTime = this.currentTime;
-      const { _calendar, _timeSelector } = this;
-      _calendar.weekStartAt = this.weekStartAt;
-      this._navEle.millisecond = _calendar.timeStart = _calendar.timeEnd = +currentTime;
-      _calendar.showingTime = this.showingTime;
+      const { _els, _granType } = this;
+      _els.hostWrapper.dataset.type = _granType;
+      _els.nav.millisecond = +currentTime;
       const { min, max } = this._getMaxMinTime();
-      _calendar.minTime = min;
-      _calendar.maxTime = max;
-      if (this.minGranularity === "day") {
-        _timeSelector.style.display = "none";
-        return;
+      Object.assign(_els.calendar, {
+        weekStartAt: this.weekStartAt,
+        timeStart: +currentTime,
+        timeEnd: +currentTime,
+        showingTime: this.showingTime,
+        minTime: min,
+        maxTime: max
+      });
+      this._updateSlot();
+      if (_granType === GranType.Time) {
+        Object.assign(_els.timeSelectorOnly, {
+          maxGranularity: this.maxGranularity,
+          minGranularity: this.minGranularity,
+          currentTime
+        });
+      } else if (_granType === GranType.Date) {
+        Object.assign(_els.dateSelector, {
+          maxGranularity: this.maxGranularity,
+          minGranularity: this.minGranularity,
+          currentTime
+        });
+      } else if (_granType === GranType.CalendarTime) {
+        Object.assign(_els.timeSelectorInCalendar, {
+          minGranularity: this.minGranularity,
+          currentTime
+        });
       }
-      _timeSelector.style.display = "";
-      _timeSelector.minGranularity = this.minGranularity;
-      _timeSelector.currentTime = currentTime;
-    }, 0));
+    }));
     __publicField(this, "_onCalendarSelect", (e) => {
       e.stopPropagation();
-      this.currentTime = +e.detail + (this.minGranularity === "day" ? 0 : this._timeSelector.millisecond);
+      this.currentTime = +e.detail + (this.minGranularity === "day" ? 0 : this._els.timeSelectorInCalendar.millisecond);
     });
     __publicField(this, "_onNavChange", (e) => {
       e.stopPropagation();
       const wrapper = closestByEvent(e, ".wrapper");
       if (!wrapper) return;
       const { newTime } = e.detail;
-      this._calendar.showingTime = +newTime;
+      this._els.calendar.showingTime = +newTime;
     });
     __publicField(this, "_onNavOpenToggle", (e) => {
-      var _a;
+      var _a2;
       if (!(e.target instanceof YyyyMmNavEle)) return;
       e.stopPropagation();
-      (_a = e.target.nextElementSibling) == null ? void 0 : _a.classList.toggle("hide", e.detail);
+      (_a2 = e.target.nextElementSibling) == null ? void 0 : _a2.classList.toggle("hide", e.detail);
     });
     __publicField(this, "_onTimeSelectorChange", (e) => {
       this.currentTime = e.detail;
     });
-    this._applyTemplate();
+    __publicField(this, "_onSelectorOpenChange", (e) => {
+      this.open = e.detail;
+    });
   }
   static get observedAttributes() {
     return [
@@ -77,6 +106,7 @@ export class Ele extends UiBase {
       "min-time",
       "max-time",
       "min-granularity",
+      "max-granularity",
       ...popoverAttrKeys
     ];
   }
@@ -151,64 +181,140 @@ export class Ele extends UiBase {
     if (!granularityList.includes(val)) return;
     this.setAttribute("min-granularity", val);
   }
-  get _navEle() {
-    var _a;
-    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("dt-yyyymm-nav");
+  get maxGranularity() {
+    return this._getAttr("max-granularity", "year");
   }
-  get _calendar() {
-    var _a;
-    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
-      "dt-calendar-base"
-    );
+  set maxGranularity(val) {
+    if (!granularityList.includes(val)) return;
+    this.setAttribute("max-granularity", val);
+  }
+  get _staticEls() {
+    return {
+      ...super._staticEls,
+      hostWrapper: this.$0(_a || (_a = __template([".host-wrapper"]))),
+      nav: this.$0(_b || (_b = __template(["dt-yyyymm-nav"]))),
+      calendar: this.$0(_c || (_c = __template(["dt-calendar-base"]))),
+      timeSelectors: this.$(_d || (_d = __template(["dt-hhmmss-ms-selector"]))),
+      timeSelectorInCalendar: this.$0(_e || (_e = __template(["dt-popover dt-hhmmss-ms-selector"]))),
+      timeSelectorOnly: this.$0(_f || (_f = __template(["dt-hhmmss-ms-selector.timeOnly"]))),
+      dateSelector: this.$0(_g || (_g = __template(["dt-yyyymmdd-selector"]))),
+      popover: this.$0(_h || (_h = __template(["dt-popover"]))),
+      slots: this.$(_i || (_i = __template(["slot"])))
+    };
+  }
+  get _granType() {
+    let minGranIdx = granularityList.indexOf(this.minGranularity);
+    let maxGranIdx = granularityList.indexOf(this.maxGranularity);
+    if (minGranIdx === -1) minGranIdx = granularityList.length - 1;
+    if (maxGranIdx === -1) maxGranIdx = 0;
+    if (minGranIdx < maxGranIdx)
+      [minGranIdx, maxGranIdx] = [maxGranIdx, minGranIdx];
+    const dayGranIdx = granularityList.indexOf("day");
+    if (maxGranIdx === 0 && minGranIdx === dayGranIdx) {
+      return GranType.Calendar;
+    } else if (dayGranIdx < maxGranIdx && dayGranIdx < minGranIdx) {
+      return GranType.Time;
+    } else if (maxGranIdx <= dayGranIdx && minGranIdx <= dayGranIdx) {
+      return GranType.Date;
+    } else {
+      return GranType.CalendarTime;
+    }
   }
-  get _timeSelector() {
-    var _a;
-    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
-      "dt-hhmmss-ms-selector"
+  _updateSlot() {
+    const { _els, _granType } = this;
+    const hasSlotTrigger = !!this.querySelector('[slot="trigger"]');
+    _els.slots.forEach((slot) => {
+      const slotType = slot.dataset.type;
+      const enabled = slotType.split(" ").includes(_granType);
+      if (enabled) {
+        slot.setAttribute("name", "trigger");
+      } else {
+        slot.removeAttribute("name");
+      }
+      if (slotType === GranType.Time || slotType === GranType.Date) {
+        if (hasSlotTrigger) {
+          slot.setAttribute("slot", "trigger");
+        } else {
+          slot.removeAttribute("slot");
+        }
+      }
+    });
+  }
+  _updateOpenState(force = this.hasAttribute("pop-open")) {
+    const { _els, _granType } = this;
+    _els.popover.toggleAttribute(
+      "open",
+      force && _granType !== GranType.Time && _granType !== GranType.Date
     );
+    _els.dateSelector.toggleAttribute(
+      "pop-open",
+      force && _granType === GranType.Date
+    );
+    _els.timeSelectorOnly.toggleAttribute(
+      "pop-open",
+      force && _granType === GranType.Time
+    );
+    this.toggleAttribute("pop-open", force);
   }
-  get _popoverEle() {
-    return this.shadowRoot.querySelector("dt-popover");
+  get open() {
+    return this.hasAttribute("pop-open");
+  }
+  set open(v) {
+    this._updateOpenState(v);
   }
   connectedCallback() {
     if (!super.connectedCallback()) return;
-    this._calendar.formatter = (i) => String(i).padStart(2, "0");
+    const { _els } = this;
     this._render();
-    popEleAttrSync2Parent(this, this._popoverEle);
-    this._calendar.addEventListener("select-time", this._onCalendarSelect);
-    this._navEle.addEventListener("change", this._onNavChange);
-    this._navEle.addEventListener(
-      "popover-open-change",
-      this._onNavOpenToggle
-    );
-    this._timeSelector.addEventListener(
+    popEleAttrSync2Parent(this, _els.popover);
+    this._bindEvt(_els.calendar)("select-time", this._onCalendarSelect);
+    this._bindEvt(_els.nav)("change", this._onNavChange);
+    this._bindEvt(_els.nav)("popover-open-change", this._onNavOpenToggle);
+    this._bindEvt(_els.timeSelectors)(
       "select-time",
       this._onTimeSelectorChange
     );
-    this._timeSelector.addEventListener("open-change", this._stopEvent);
+    this._bindEvt(_els.timeSelectorInCalendar)(
+      "open-change",
+      this._stopEvent
+    );
+    this._bindEvt(_els.dateSelector)(
+      "open-change",
+      this._onSelectorOpenChange
+    );
+    this._bindEvt(_els.dateSelector)("select-time", this._onCalendarSelect);
+    this._bindEvt(_els.timeSelectorOnly)(
+      "open-change",
+      this._onSelectorOpenChange
+    );
+    this._ob = new MutationObserver(() => this._updateSlot());
+    this._ob.observe(this, { childList: true });
     this.dispatchEvent("select-time", this.currentTime);
   }
   disconnectedCallback() {
-    if (!super.disconnectedCallback()) return;
+    var _a2;
     clearupPopEleAttrSync2Parent(this);
-    this._calendar.removeEventListener(
-      "select-time",
-      this._onCalendarSelect
-    );
-    this._navEle.removeEventListener("change", this._onNavChange);
-    this._navEle.removeEventListener(
-      "popover-open-change",
-      this._onNavOpenToggle
-    );
-    this._timeSelector.removeEventListener(
-      "select-time",
-      this._onTimeSelectorChange
-    );
-    this._timeSelector.removeEventListener("open-change", this._stopEvent);
+    (_a2 = this._ob) == null ? void 0 : _a2.disconnect();
+    this._ob = null;
+    return super.disconnectedCallback();
   }
   _onAttrChanged(name, oldValue, newValue) {
     super._onAttrChanged(name, oldValue, newValue);
-    if (parentPopAttrSync2PopEle(name, oldValue, newValue, this._popoverEle)) {
+    const { _els } = this;
+    if (isPopoverAttrKey(name)) {
+      if (oldValue === newValue) return;
+      if (name === "pop-open") {
+        this._updateOpenState();
+        return;
+      }
+      parentPopAttrSync2PopEle(name, oldValue, newValue, _els.popover);
+      if (newValue === null) {
+        _els.timeSelectorOnly.removeAttribute(name);
+        _els.dateSelector.removeAttribute(name);
+        return;
+      }
+      _els.timeSelectorOnly.setAttribute(name, newValue);
+      _els.dateSelector.setAttribute(name, newValue);
       return;
     }
     this._render();
@@ -217,12 +323,21 @@ export class Ele extends UiBase {
     }
   }
   get timeFormatter() {
-    return this._timeSelector.timeFormatter;
+    return this._els.timeSelectorInCalendar.timeFormatter;
   }
   set timeFormatter(fn) {
     if (typeof fn !== "function") return;
-    this._timeSelector.timeFormatter = fn;
+    this._els.timeSelectorInCalendar.timeFormatter = this._els.timeSelectorOnly.timeFormatter = fn;
+  }
+  get dateFormatter() {
+    return this._els.dateSelector.dateFormatter;
+  }
+  set dateFormatter(fn) {
+    if (typeof fn !== "function") return;
+    this._els.dateSelector.dateFormatter = fn;
   }
 }
 __publicField(Ele, "tagName", "dt-date-time-selector");
+__publicField(Ele, "_style", styleStr);
+__publicField(Ele, "_template", html);
 Ele.define();

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

@@ -3,4 +3,5 @@ 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:host {\n  font-size: 14px;\n}\ndt-popover {\n  width: 100%;\n}\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;\n  width: 285px;\n}\n.wrapper > * {\n  width: 100%;\n}\n\ndt-calendar-base {\n  // 254 = item height 6 * 30 + week 14 + gap 10 * 6\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}\ndt-calendar-base.hide {\n  display: none;\n}\n\ndt-yyyymm-nav::part(list-grp) {\n  height: 254px;\n  margin-top: 15px;\n}\n\n@media (max-width: 750px) {\n  .wrapper {\n    width: 100%;\n  }\n}\n"])));
+import { GranType } from "./common.mjs";
+export const styleStr = css(_a || (_a = __template(["\n:host { font-size: 14px; }\n\n.host-wrapper { display: contents; }\n\n.host-wrapper:not([data-type*='", "']) dt-popover,\n.host-wrapper:not([data-type*='", "']) dt-hhmmss-ms-selector,\n.host-wrapper[data-type*='", "'] > dt-hhmmss-ms-selector,\n.host-wrapper:not([data-type*='", "']) dt-yyyymmdd-selector {\n  display: none;\n}\n\ndt-popover { width: 100%; }\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;\n  width: 285px;\n}\n.wrapper > * { width: 100%; }\n\ndt-calendar-base {\n  // 254 = item height 6 * 30 + week 14 + gap 10 * 6\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}\ndt-calendar-base.hide {\n  display: none;\n}\n\ndt-yyyymm-nav::part(list-grp) {\n  height: 254px;\n  margin-top: 15px;\n}\n\n.timeOnly::part(pop),\ndt-yyyymmdd-selector::part(pop) {\n  width: 285px;\n}\n\n@media (max-width: 750px) {\n  .wrapper,\n  .timeOnly::part(pop),\n  dt-yyyymmdd-selector::part(pop) {\n    width: 100%;\n  }\n}\n"])), GranType.Calendar, GranType.Time, GranType.Calendar, GranType.Date);