easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-date-picker.js

@@ -1,649 +1,584 @@
-var pt = Object.defineProperty;
-var ct = (n) => {
-  throw TypeError(n);
-};
-var mt = (n, o, e) => o in n ? pt(n, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[o] = e;
-var x = (n, o, e) => mt(n, typeof o != "symbol" ? o + "" : o, e), ht = (n, o, e) => o.has(n) || ct("Cannot " + e);
-var t = (n, o, e) => (ht(n, o, "read from private field"), e ? e.call(n) : o.get(n)), i = (n, o, e) => o.has(n) ? ct("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(n) : o.set(n, e), u = (n, o, e, a) => (ht(n, o, "write to private field"), a ? a.call(n, e) : o.set(n, e), e), N = (n, o, e) => (ht(n, o, "access private method"), e);
-import { c as yt, g as vt, d as L, n as bt } from "./ea-calendar2.js";
-import { F as ft } from "../core/FormBase.js";
-import { s as wt } from "../css/ea-date-picker.style.js";
+import { E as C } from "../core/EaFormAssociatedBase.ts.js";
+import { c as x } from "../utils/bem.ts.js";
+import { q as c, a as p, l as h, C as $ } from "../core/decorator.js";
+import { h as E } from "../utils/html.ts.js";
+import { E as w } from "../utils/Enum.ts.js";
+import { s as P } from "../css/ea-date-picker.style.js";
+import { c as B, g as A, d as _ } from "./ea-calendar2.js";
 import "./ea-input.js";
 import "./ea-button.js";
-import { E as gt } from "../utils/Variables.js";
-import { E as Dt } from "../utils/Utils.js";
-import { i as G } from "../utils/I18nManager.js";
-var ut = { exports: {} };
-(function(n, o) {
-  (function(e, a) {
-    n.exports = a();
-  })(yt, function() {
-    return function(e, a) {
-      var r = a.prototype, h = r.format;
-      r.format = function(m) {
-        var c = this, C = this.$locale();
-        if (!this.isValid()) return h.bind(this)(m);
-        var y = this.$utils(), ot = (m || "YYYY-MM-DDTHH:mm:ssZ").replace(/\[([^\]]+)]|Q|wo|ww|w|WW|W|zzz|z|gggg|GGGG|Do|X|x|k{1,2}|S/g, function(R) {
-          switch (R) {
+import { i as v } from "../utils/I18nManager.ts.js";
+var M = { exports: {} };
+(function(t, e) {
+  (function(r, i) {
+    t.exports = i();
+  })(B, function() {
+    return function(r, i) {
+      var l = i.prototype, u = l.format;
+      l.format = function(d) {
+        var o = this, m = this.$locale();
+        if (!this.isValid()) return u.bind(this)(d);
+        var b = this.$utils(), g = (d || "YYYY-MM-DDTHH:mm:ssZ").replace(/\[([^\]]+)]|Q|wo|ww|w|WW|W|zzz|z|gggg|GGGG|Do|X|x|k{1,2}|S/g, function(y) {
+          switch (y) {
             case "Q":
-              return Math.ceil((c.$M + 1) / 3);
+              return Math.ceil((o.$M + 1) / 3);
             case "Do":
-              return C.ordinal(c.$D);
+              return m.ordinal(o.$D);
             case "gggg":
-              return c.weekYear();
+              return o.weekYear();
             case "GGGG":
-              return c.isoWeekYear();
+              return o.isoWeekYear();
             case "wo":
-              return C.ordinal(c.week(), "W");
+              return m.ordinal(o.week(), "W");
             case "w":
             case "ww":
-              return y.s(c.week(), R === "w" ? 1 : 2, "0");
+              return b.s(o.week(), y === "w" ? 1 : 2, "0");
             case "W":
             case "WW":
-              return y.s(c.isoWeek(), R === "W" ? 1 : 2, "0");
+              return b.s(o.isoWeek(), y === "W" ? 1 : 2, "0");
             case "k":
             case "kk":
-              return y.s(String(c.$H === 0 ? 24 : c.$H), R === "k" ? 1 : 2, "0");
+              return b.s(String(o.$H === 0 ? 24 : o.$H), y === "k" ? 1 : 2, "0");
             case "X":
-              return Math.floor(c.$d.getTime() / 1e3);
+              return Math.floor(o.$d.getTime() / 1e3);
             case "x":
-              return c.$d.getTime();
+              return o.$d.getTime();
             case "z":
-              return "[" + c.offsetName() + "]";
+              return "[" + o.offsetName() + "]";
             case "zzz":
-              return "[" + c.offsetName("long") + "]";
+              return "[" + o.offsetName("long") + "]";
             default:
-              return R;
+              return y;
           }
         });
-        return h.bind(this)(ot);
+        return u.bind(this)(g);
       };
     };
   });
-})(ut);
-var $t = ut.exports;
-const Mt = /* @__PURE__ */ vt($t);
-class lt extends Event {
-  constructor(o) {
+})(M);
+var S = M.exports;
+const I = /* @__PURE__ */ A(S);
+class f extends Event {
+  constructor(e) {
     super("ea-panel-change", {
       bubbles: !0,
-      cancelable: !0,
       composed: !0
-    }), this.detail = o;
+    }), this.detail = e;
   }
 }
-class dt extends Event {
-  constructor(o) {
+class k extends Event {
+  constructor(e) {
     super("ea-visible-change", {
       bubbles: !0,
-      cancelable: !0,
       composed: !0
-    }), this.detail = o;
+    }), this.detail = e;
+  }
+}
+class D extends Event {
+  constructor(e) {
+    super("ea-change", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = e;
   }
 }
-L.extend(Mt);
-var p, H, d, V, $, j, O, v, b, f, M, Y, w, W, A, l, s, E, I, D, P, S, q, z, B, F, _, Q, U, X, Z, J, K, tt, k, et, T, g, st, at, it, rt, nt;
-class Yt extends ft {
+var F = Object.defineProperty, L = Object.getOwnPropertyDescriptor, s = (t, e, r, i) => {
+  for (var l = i > 1 ? void 0 : i ? L(e, r) : e, u = t.length - 1, d; u >= 0; u--)
+    (d = t[u]) && (l = (i ? d(e, r, l) : d(l)) || l);
+  return i && l && F(e, r, l), l;
+};
+_.extend(I);
+const Y = "ea-date-picker", n = x(Y);
+let a = class extends C {
   constructor() {
-    super();
-    i(this, E);
-    /** @type {HTMLElement} */
-    i(this, p);
-    /** @type {HTMLElement} */
-    i(this, H);
-    /** @type {HTMLElement} */
-    i(this, d);
-    /** @type {HTMLElement} */
-    i(this, V);
-    /** @type {HTMLElement} */
-    i(this, $);
-    /** @type {HTMLElement} */
-    i(this, j);
-    /** @type {HTMLElement} */
-    i(this, O);
-    /** @type {HTMLElement} */
-    i(this, v);
-    /** @type {HTMLElement} */
-    i(this, b);
-    /** @type {HTMLElement} */
-    i(this, f);
-    /** @type {HTMLElement} */
-    i(this, M);
-    /** @type {HTMLElement} */
-    i(this, Y);
-    /** @type {HTMLElement} */
-    i(this, w);
-    /** @type {HTMLElement} */
-    i(this, W);
-    /** @type {HTMLElement} */
-    i(this, A);
-    /** @type {AbortController} */
-    i(this, l, new AbortController());
-    i(this, s, {
-      currentDate: L(),
-      /** @type {'day' | 'month' | 'year'} */
+    super(...arguments), this._uniqueId = a._instanceCount++, this._states = {
+      currentDate: _(),
       viewMode: "day",
       selectedYear: null,
       selectedMonth: null
-    });
-    x(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: async (e) => {
-          await customElements.whenDefined("ea-input"), t(this, d).label = e;
-        }
-      },
-      width: {
-        type: String,
-        default: "auto",
-        observer: (e) => {
-          t(this, p).style.setProperty("--ea-date-picker-width", e);
-        }
-      },
-      value: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          let a = e;
-          if (isNaN(new Date(e)) && e !== "") {
-            const r = new Date(Date.now());
-            a = `${r.getFullYear()}-${r.getMonth() + 1}-${r.getDate()}`;
-          }
-          a ? (t(this, s).currentDate = L(a), t(this, s).selectedYear = t(this, s).currentDate.year(), t(this, s).selectedMonth = t(this, s).currentDate.month() + 1, t(this, d).value = t(this, s).currentDate.format(
-            N(this, E, I).call(this)
-          )) : t(this, d).value = a, this.setValue(e);
-        }
-      },
-      placeholder: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, d).setAttribute("placeholder", e);
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, d).toggleAttribute("disabled", e), this.updateContainerClasslist();
-        }
-      },
-      align: {
-        type: ["left", "center", "right"],
-        default: "left",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      "display-format": {
-        type: String,
-        default: "YYYY-MM-DD"
-      },
-      "value-format": {
-        type: String,
-        default: "YYYY-MM-DD"
-      },
-      type: {
-        type: ["date", "month", "year"],
-        default: "date",
-        observer: (e) => {
-          e === "year" ? t(this, P).call(this) : e === "month" ? t(this, S).call(this) : t(this, q).call(this);
-        }
-      },
-      size: {
-        type: gt,
-        default: "default",
-        observer: (e) => {
-          t(this, d).setAttribute("size", e), t(this, v).setAttribute("size", e), t(this, b).setAttribute("size", e), t(this, f).setAttribute("size", e), t(this, M).setAttribute("size", e), t(this, Y).setAttribute("size", e), t(this, w).setAttribute("size", e), this.updateContainerClasslist();
-        }
-      },
-      required: {
-        type: Boolean,
-        default: !1,
-        observer: async (e) => {
-          await customElements.whenDefined("ea-input"), t(this, d).toggleAttribute("required", e);
-        }
-      }
-    }));
-    /**
-     * 更新header显示
-     */
-    i(this, D, () => {
-      const e = t(this, s).currentDate.year(), a = t(this, s).currentDate.month() + 1;
-      if (t(this, s).viewMode === "year") {
-        const r = Math.floor(e / 10) * 10, h = r + 9;
-        t(this, v).textContent = `${r} ~ ${h}`, t(this, b).textContent = "";
-      } else t(this, s).viewMode === "month" ? (t(this, v).textContent = e, t(this, b).textContent = "") : (t(this, v).textContent = e, t(this, b).textContent = a < 10 ? `0${a}` : a);
-    });
-    /**
-     * 切换到年份选择模式
-     */
-    i(this, P, () => {
-      t(this, s).viewMode = "year", t(this, D).call(this), t(this, B).call(this), this.updateContainerClasslist(), t(this, z).call(this, "year"), this.dispatchEvent(
-        new lt({
-          date: t(this, s).currentDate.toDate(),
+    }, this.label = "", this.width = "auto", this.value = "", this.placeholder = "", this.disabled = !1, this.align = "left", this.displayFormat = "YYYY-MM-DD", this.valueFormat = "YYYY-MM-DD", this.variant = "date", this.size = "default", this.required = !1, this._updateDropdownInert = () => {
+      var e;
+      const t = (e = this._container) == null ? void 0 : e.classList.contains("is-open");
+      this._dropdownWrap.inert = this.disabled || !t;
+    }, this._updateHeaderDisplay = () => {
+      const t = this._states.currentDate.year(), e = this._states.currentDate.month() + 1;
+      if (this._states.viewMode === "year") {
+        const r = Math.floor(t / 10) * 10, i = r + 9;
+        this._yearBtn.textContent = `${r} ~ ${i}`, this._monthBtn.textContent = "";
+      } else this._states.viewMode === "month" ? (this._yearBtn.textContent = String(t), this._monthBtn.textContent = "") : (this._yearBtn.textContent = String(t), this._monthBtn.textContent = e < 10 ? `0${e}` : String(e));
+    }, this._switchToYearMode = () => {
+      this._states.viewMode = "year", this._updateHeaderDisplay(), this._renderYearPanel(), this.updateContainerClasslist(), this._updateHeaderButtons("year"), this.dispatchEvent(
+        new f({
+          date: this._states.currentDate.toDate(),
           mode: "year",
           view: "year-panel"
         })
       );
-    });
-    /**
-     * 切换到月份选择模式
-     */
-    i(this, S, () => {
-      t(this, s).viewMode = "month", t(this, D).call(this), t(this, F).call(this), this.updateContainerClasslist(), t(this, z).call(this, "month"), this.dispatchEvent(
-        new lt({
-          date: t(this, s).currentDate.toDate(),
+    }, this._switchToMonthMode = () => {
+      this._states.viewMode = "month", this._updateHeaderDisplay(), this._renderMonthPanel(), this.updateContainerClasslist(), this._updateHeaderButtons("month"), this.dispatchEvent(
+        new f({
+          date: this._states.currentDate.toDate(),
           mode: "month",
           view: "month-panel"
         })
       );
-    });
-    /**
-     * 切换回日期选择模式
-     */
-    i(this, q, () => {
-      t(this, s).viewMode = "day", t(this, D).call(this), this.updateContainerClasslist(), t(this, z).call(this, "day");
-      const e = t(this, s).currentDate.format("YYYY-MM-DD");
-      t(this, $).setAttribute("value", e), this.dispatchEvent(
-        new lt({
-          date: t(this, s).currentDate.toDate(),
+    }, this._switchToDayMode = () => {
+      this._states.viewMode = "day", this._updateHeaderDisplay(), this.updateContainerClasslist(), this._updateHeaderButtons("day");
+      const t = this._states.currentDate.format("YYYY-MM-DD");
+      this._calendarElement.setAttribute("value", t), this.dispatchEvent(
+        new f({
+          date: this._states.currentDate.toDate(),
           mode: "month",
           view: "day-panel"
         })
       );
-    });
-    /**
-     * 更新header按钮
-     * @param {'year' | 'month' | 'day'} mode
-     */
-    i(this, z, (e) => {
-      e === "year" ? (t(this, f).ariaLabel = "Previous decade", t(this, w).ariaLabel = "Next decade") : e === "month" ? (t(this, f).ariaLabel = "Previous year", t(this, w).ariaLabel = "Next year") : (t(this, f).ariaLabel = "Previous year", t(this, w).ariaLabel = "Next year", t(this, M).ariaLabel = "Previous month", t(this, Y).ariaLabel = "Next month");
-    });
-    /**
-     * 渲染年份面板
-     */
-    i(this, B, () => {
-      const e = this.ns, a = t(this, s).currentDate.year(), r = Math.floor(a / 10) * 10, h = t(this, W);
-      let m = Array.from({ length: 10 }, (c, C) => {
-        const y = r + C, ot = y === t(this, s).selectedYear;
-        return Dt.EaElement.h(
-          "button",
-          null,
-          {
-            class: `${e.e("year-item")} ${ot ? e.s("selected") : ""}`,
-            "data-year": y,
-            part: "year-item"
-          },
-          y
-        );
+    }, this._updateHeaderButtons = (t) => {
+      t === "year" ? (this._prevYearBtn.ariaLabel = "Previous decade", this._nextYearBtn.ariaLabel = "Next decade") : t === "month" ? (this._prevYearBtn.ariaLabel = "Previous year", this._nextYearBtn.ariaLabel = "Next year") : (this._prevYearBtn.ariaLabel = "Previous year", this._nextYearBtn.ariaLabel = "Next year", this._prevMonthBtn.ariaLabel = "Previous month", this._nextMonthBtn.ariaLabel = "Next month");
+    }, this._renderYearPanel = () => {
+      const t = this._states.currentDate.year(), e = Math.floor(t / 10) * 10, r = this._yearPanel;
+      let i = Array.from({ length: 10 }, (l, u) => {
+        const d = e + u, o = d === this._states.selectedYear;
+        return `<button class='${n.e("year-item")} ${o ? n.s("selected") : ""}' data-year='${d}' part='year-item' role='option' aria-selected='${o}'>${d}</button>`;
       }).join("");
-      h.innerHTML = this.html(m);
-    });
-    /**
-     * 渲染月份面板
-     */
-    i(this, F, () => {
-      const e = this.ns;
-      t(this, A).querySelectorAll(
-        `.${e.e("month-item")}`
-      ).forEach((r) => {
-        const m = parseInt(r.dataset.month, 10) === t(this, s).selectedMonth && t(this, s).currentDate.year() === t(this, s).selectedYear;
-        r.classList.toggle(e.s("selected"), m);
+      r.innerHTML = E(i);
+    }, this._renderMonthPanel = () => {
+      this._monthPanel.querySelectorAll(
+        `.${n.e("month-item")}`
+      ).forEach((e) => {
+        const i = parseInt(e.dataset.month, 10) === this._states.selectedMonth && this._states.currentDate.year() === this._states.selectedYear;
+        e.classList.toggle(n.s("selected"), i), e.setAttribute("aria-selected", String(i));
       });
-    });
-    /**
-     * 上一年按钮点击
-     */
-    i(this, _, () => {
-      t(this, s).viewMode === "year" ? t(this, s).currentDate = t(this, s).currentDate.subtract(10, "year") : t(this, s).currentDate = t(this, s).currentDate.subtract(1, "year"), t(this, k).call(this);
-    });
-    /**
-     * 下一年按钮点击
-     */
-    i(this, Q, () => {
-      t(this, s).viewMode === "year" ? t(this, s).currentDate = t(this, s).currentDate.add(10, "year") : t(this, s).currentDate = t(this, s).currentDate.add(1, "year"), t(this, k).call(this);
-    });
-    /**
-     * 上个月按钮点击
-     */
-    i(this, U, () => {
-      t(this, s).currentDate = t(this, s).currentDate.subtract(1, "month"), t(this, k).call(this);
-    });
-    /**
-     * 下个月按钮点击
-     */
-    i(this, X, () => {
-      t(this, s).currentDate = t(this, s).currentDate.add(1, "month"), t(this, k).call(this);
-    });
-    /**
-     * 年份点击事件
-     */
-    i(this, Z, (e) => {
-      const a = e.target.closest("[data-year]");
-      if (!a) return;
-      const r = parseInt(a.dataset.year);
-      t(this, s).selectedYear = r, t(this, s).currentDate = t(this, s).currentDate.year(r), this.type === "year" ? t(this, J).call(this, r) : t(this, S).call(this);
-    });
-    /**
-     * 处理年份选择（type=year）
-     */
-    i(this, J, (e) => {
-      const a = t(this, s).currentDate, r = a.format(N(this, E, I).call(this)), h = a.format(this["value-format"]);
-      t(this, d).value = r, this.setAttribute("value", h), this.emit("change", {
-        detail: {
-          fullDate: h,
-          year: e,
+    }, this._onPrevYearClick = () => {
+      this._states.viewMode === "year" ? this._states.currentDate = this._states.currentDate.subtract(10, "year") : this._states.currentDate = this._states.currentDate.subtract(1, "year"), this._updateView();
+    }, this._onNextYearClick = () => {
+      this._states.viewMode === "year" ? this._states.currentDate = this._states.currentDate.add(10, "year") : this._states.currentDate = this._states.currentDate.add(1, "year"), this._updateView();
+    }, this._onPrevMonthClick = () => {
+      this._states.currentDate = this._states.currentDate.subtract(1, "month"), this._updateView();
+    }, this._onNextMonthClick = () => {
+      this._states.currentDate = this._states.currentDate.add(1, "month"), this._updateView();
+    }, this._onYearClick = (t) => {
+      const r = t.target.closest("[data-year]");
+      if (!r) return;
+      const i = parseInt(r.dataset.year);
+      this._states.selectedYear = i, this._states.currentDate = this._states.currentDate.year(i), this.variant === "year" ? this._handleYearSelect(i) : this._switchToMonthMode();
+    }, this._handleYearSelect = (t) => {
+      const e = this._states.currentDate, r = e.format(this._getDisplayFormat()), i = e.format(this.valueFormat);
+      this._inputElement.value = r, this.setAttribute("value", i), this.dispatchEvent(
+        new D({
+          fullDate: i,
+          year: t,
           month: null,
           date: null,
           week: null
-        }
-      }), t(this, g).call(this);
-    });
-    /**
-     * 月份点击事件
-     */
-    i(this, K, (e) => {
-      const a = e.target.closest("[data-month]");
-      if (!a) return;
-      const r = parseInt(a.dataset.month);
-      t(this, s).selectedMonth = r, t(this, s).currentDate = t(this, s).currentDate.month(r - 1), this.type === "month" ? t(this, tt).call(this, r) : t(this, q).call(this);
-    });
-    /**
-     * 处理月份选择（type=month）
-     */
-    i(this, tt, (e) => {
-      const a = t(this, s).currentDate, r = a.format(N(this, E, I).call(this)), h = a.format(this["value-format"]);
-      t(this, d).value = r, this.setAttribute("value", h), this.emit("change", {
-        detail: {
-          fullDate: h,
-          year: t(this, s).selectedYear,
-          month: e,
+        })
+      ), this._closeDropdown();
+    }, this._onMonthClick = (t) => {
+      const r = t.target.closest("[data-month]");
+      if (!r) return;
+      const i = parseInt(r.dataset.month);
+      this._states.selectedMonth = i, this._states.currentDate = this._states.currentDate.month(i - 1), this.variant === "month" ? this._handleMonthSelect(i) : this._switchToDayMode();
+    }, this._handleMonthSelect = (t) => {
+      const e = this._states.currentDate, r = e.format(this._getDisplayFormat()), i = e.format(this.valueFormat);
+      this._inputElement.value = r, this.setAttribute("value", i), this.dispatchEvent(
+        new D({
+          fullDate: i,
+          year: this._states.selectedYear,
+          month: t,
           date: null,
           week: null
-        }
-      }), t(this, g).call(this);
-    });
-    /**
-     * 更新视图
-     */
-    i(this, k, () => {
-      t(this, D).call(this), t(this, s).viewMode === "year" ? t(this, B).call(this) : t(this, s).viewMode === "month" && t(this, F).call(this);
-      const e = t(this, s).currentDate.format("YYYY-MM-DD");
-      t(this, $).setAttribute("value", e);
-    });
-    /**
-     * 日历选择事件处理
-     * @param {CustomEvent} e
-     */
-    i(this, et, (e) => {
-      const { year: a, month: r, date: h, day: m } = e.detail, c = L(`${a}-${r}-${h}`);
-      t(this, s).selectedYear = a, t(this, s).selectedMonth = r, t(this, s).currentDate = c;
-      const C = c.format(N(this, E, I).call(this)), y = c.format(this["value-format"]);
-      t(this, d).value = C, this.setAttribute("value", y), this.emit("change", {
-        detail: {
-          fullDate: y,
-          year: a,
-          month: r,
-          date: h,
-          week: m
-        }
-      }), t(this, g).call(this);
-    });
-    /**
-     * 打开下拉框
-     */
-    i(this, T, () => {
+        })
+      ), this._closeDropdown();
+    }, this._updateView = () => {
+      this._updateHeaderDisplay(), this._states.viewMode === "year" ? this._renderYearPanel() : this._states.viewMode === "month" && this._renderMonthPanel();
+      const t = this._states.currentDate.format("YYYY-MM-DD");
+      this._calendarElement.setAttribute("value", t);
+    }, this._openDropdown = () => {
       if (this.disabled) return;
-      const e = t(this, p).classList.contains("is-open");
-      t(this, p).classList.add("is-open"), e || this.dispatchEvent(new dt({ visible: !0 })), this.type === "year" ? t(this, P).call(this) : this.type === "month" ? t(this, S).call(this) : t(this, q).call(this);
-    });
-    /**
-     * 关闭下拉框
-     */
-    i(this, g, () => {
-      const e = t(this, p).classList.contains("is-open");
-      t(this, p).classList.remove("is-open"), e && this.dispatchEvent(
-        new dt({ visible: !1 })
-      );
-    });
-    /**
-     * 切换下拉框显示状态
-     */
-    i(this, st, () => {
-      this.disabled || (t(this, p).classList.contains("is-open") ? t(this, g).call(this) : t(this, T).call(this));
-    });
-    /**
-     * 点击外部关闭下拉
-     * @param {MouseEvent} e
-     */
-    i(this, at, (e) => {
-      const a = e.composedPath();
-      a.includes(this) || a.includes(this.shadowRoot) || t(this, g).call(this);
-    });
-    /**
-     * 输入框焦点事件
-     */
-    i(this, it, () => {
-      this.emit("focus");
-    });
-    /**
-     * 输入框失焦事件
-     */
-    i(this, rt, () => {
-      this.emit("blur");
-    });
-    /**
-     * 绑定事件
-     */
-    i(this, nt, () => {
-      var r;
-      (r = t(this, l)) == null || r.abort(), u(this, l, new AbortController()), t(this, $).addEventListener("select", t(this, et), {
-        signal: t(this, l).signal
-      }), t(this, d).addEventListener("click", t(this, st), {
-        signal: t(this, l).signal
-      }), t(this, d).addEventListener("focus", t(this, it), {
-        signal: t(this, l).signal
-      }), t(this, d).addEventListener("blur", t(this, rt), {
-        signal: t(this, l).signal
-      }), window.addEventListener("click", t(this, at), {
-        signal: t(this, l).signal
-      }), t(this, f).addEventListener("click", t(this, _), {
-        signal: t(this, l).signal
-      }), t(this, w).addEventListener("click", t(this, Q), {
-        signal: t(this, l).signal
-      }), t(this, M).addEventListener("click", t(this, U), {
-        signal: t(this, l).signal
-      }), t(this, Y).addEventListener("click", t(this, X), {
-        signal: t(this, l).signal
-      }), t(this, v).addEventListener("click", t(this, P), {
-        signal: t(this, l).signal
-      }), t(this, b).addEventListener("click", t(this, S), {
-        signal: t(this, l).signal
-      }), this.shadowRoot.querySelector(this.ns.ce("year-panel")).addEventListener("click", t(this, Z), {
-        signal: t(this, l).signal
-      }), this.shadowRoot.querySelector(this.ns.ce("month-panel")).addEventListener("click", t(this, K), {
-        signal: t(this, l).signal
-      });
-    });
-    /**
-     * 使组件获取焦点
-     * @return {void}
-     */
-    x(this, "focus", () => {
-      t(this, d).focus();
-    });
-    /**
-     * 使组件失去焦点
-     * @return {void}
-     */
-    x(this, "blur", () => {
-      t(this, d).blur();
-    });
-    /**
-     * 打开日期选择器弹窗
-     * @return {void}
-     */
-    x(this, "handleOpen", () => {
-      t(this, T).call(this);
-    });
-    /**
-     * 关闭日期选择器弹窗
-     * @return {void}
-     */
-    x(this, "handleClose", () => {
-      t(this, g).call(this);
-    });
-    this.stylesheet = wt, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "label",
-      "width",
-      "value",
-      "placeholder",
-      "disabled",
-      "align",
-      "display-format",
-      "value-format",
-      "size",
-      "required"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+      const t = this._container.classList.contains("is-open");
+      this._container.classList.add("is-open"), this._updateDropdownInert(), this._updateAriaExpanded(), t || this.dispatchEvent(new k({ visible: !0 })), this.variant === "year" ? this._switchToYearMode() : this.variant === "month" ? this._switchToMonthMode() : this._switchToDayMode();
+    }, this._closeDropdown = (t = !0) => {
+      const e = this._container.classList.contains("is-open");
+      this._container.classList.remove("is-open"), this._updateDropdownInert(), this._updateAriaExpanded(), e && this.dispatchEvent(
+        new k({ visible: !1 })
+      ), t && e && this._inputElement.focus();
+    }, this._toggleDropdown = () => {
+      this.disabled || (this._container.classList.contains("is-open") ? this._closeDropdown() : this._openDropdown());
+    };
+  }
   updateContainerClasslist() {
-    var r, h;
-    const e = ((r = t(this, s)) == null ? void 0 : r.viewMode) || "day", a = this.computedClasslist(
-      "ea-date-picker",
+    var r, i;
+    const t = ((r = this._states) == null ? void 0 : r.viewMode) || "day", e = n(
       {
-        [`--${this.size}`]: this.size
+        [this.size]: this.size && this.size !== "default"
       },
       {
         disabled: this.disabled,
-        [`align-${this.align}`]: this.align,
-        open: (h = t(this, p)) == null ? void 0 : h.classList.contains("is-open"),
-        [`view-${e}`]: e
+        [`align-${this.align}`]: this.align && this.align !== "left",
+        open: (i = this._container) == null ? void 0 : i.classList.contains("is-open"),
+        [`view-${t}`]: !0
       }
     );
-    return t(this, p).className = a, a;
-  }
-  /**
-   * 渲染组件
-   */
-  $render() {
-    const e = bt("date-picker");
-    this.ns = e, G.locale = this.locale, L.locale(this.locale.toLowerCase());
-    const a = G.t("calendar.monthsShort");
-    this.shadowRoot.innerHTML = this.html(`
-      <div class='${e.b()}' part='container'>
-        <div class='${e.e("input-wrap")}' part='input-wrap'>
-          <ea-input class="${e.e("input")}" part='input' prefix-icon="calendar-xmark" readonly></ea-input>
+    return this._container.className = e, e;
+  }
+  /** @returns 根据当前 variant 返回显示格式 */
+  _getDisplayFormat() {
+    if (this.hasAttribute("display-format") && this.displayFormat !== "")
+      return this.displayFormat;
+    switch (this.variant) {
+      case "year":
+        return "YYYY";
+      case "month":
+        return "YYYY-MM";
+      default:
+        return "YYYY-MM-DD";
+    }
+  }
+  /** 设置 ARIA 属性，遵循 W3C combobox datepicker 模式 */
+  _setupAria() {
+    const t = `ea-date-picker-${this._uniqueId}-dialog`, e = `ea-date-picker-${this._uniqueId}-label`;
+    this._inputElement.setAttribute("role", "combobox"), this._inputElement.setAttribute("aria-expanded", "false"), this._inputElement.setAttribute("aria-haspopup", "dialog"), this._inputElement.setAttribute("aria-autocomplete", "none"), this._inputElement.setAttribute("aria-controls", t), this._dropdownWrap.id = t, this._dropdownWrap.setAttribute("role", "dialog"), this._dropdownWrap.setAttribute("aria-modal", "true"), this._dropdownWrap.setAttribute("aria-labelledby", e);
+  }
+  /** 更新 aria-expanded 属性 */
+  _updateAriaExpanded() {
+    const t = this._container.classList.contains("is-open");
+    this._inputElement.setAttribute("aria-expanded", String(t));
+  }
+  html() {
+    v.locale = this.locale, _.locale(this.locale.toLowerCase());
+    const t = v.t("calendar.monthsShort"), e = `ea-date-picker-${this._uniqueId}-label`;
+    return `
+      <div class='${n()}' part='container'>
+        <div class='${n.e("input-wrap")}' part='input-wrap'>
+          <ea-input class="${n.e("input")}" part='input' prefix-icon="calendar-xmark" readonly></ea-input>
         </div>
-        <div class='${e.e("dropdown-wrap")}' part='dropdown-wrap'>
-          <div class='${e.e("calendar-wrapper")}'>
-            <div class='${e.e("calendar-header")}' part='calendar-header'>
-              <div class='${e.e("header-left")}' part='header-left'>
-                <ea-button class='${e.e("header-btn")} ${e.e("btn-prev-year")}' part='header-btn' aria-label="Previous year" text>«</ea-button>
-                <ea-button class='${e.e("header-btn")} ${e.e("btn-prev-month")}' part='header-btn' aria-label="Previous month" text>‹</ea-button>
+        <div class='${n.e("dropdown-wrap")}' part='dropdown-wrap'>
+          <div class='${n.e("calendar-wrapper")}'>
+            <div class='${n.e("calendar-header")}' part='calendar-header'>
+              <div class='${n.e("header-left")}' part='header-left'>
+                <ea-button class='${n.e("header-btn")} ${n.e("btn-prev-year")}' part='header-btn' aria-label="Previous year" text>«</ea-button>
+                <ea-button class='${n.e("header-btn")} ${n.e("btn-prev-month")}' part='header-btn' aria-label="Previous month" text>‹</ea-button>
               </div>
-              <div class='${e.e("header-center")}' part='header-center'>
-                <ea-button class='${e.e("header-year")}' part='header-year'  aria-label="Year" text></ea-button>
-                <ea-button class='${e.e("header-month")}' part='header-month' aria-label="Month" text></ea-button>
+              <div class='${n.e("header-center")}' part='header-center' id='${e}' aria-live='polite' aria-atomic='true'>
+                <ea-button class='${n.e("header-year")}' part='header-year' aria-label="Year" text></ea-button>
+                <ea-button class='${n.e("header-month")}' part='header-month' aria-label="Month" text></ea-button>
               </div>
-              <div class='${e.e("header-right")}' part='header-right'>
-                <ea-button class='${e.e("header-btn")} ${e.e("btn-next-month")}' part='header-btn' aria-label="Next month" text>›</ea-button>
-                <ea-button class='${e.e("header-btn")} ${e.e("btn-next-year")}' part='header-btn' aria-label="Next year" text>»</ea-button>
+              <div class='${n.e("header-right")}' part='header-right'>
+                <ea-button class='${n.e("header-btn")} ${n.e("btn-next-month")}' part='header-btn' aria-label="Next month" text>›</ea-button>
+                <ea-button class='${n.e("header-btn")} ${n.e("btn-next-year")}' part='header-btn' aria-label="Next year" text>»</ea-button>
               </div>
             </div>
-            <div class='${e.e("calendar-body")}' part='calendar-body'>
-              <ea-calendar class="${e.e("calendar")}" size="small" part='calendar'></ea-calendar>
+            <div class='${n.e("calendar-body")}' part='calendar-body'>
+              <ea-calendar class="${n.e("calendar")}" size="small" part='calendar'></ea-calendar>
             </div>
-            <div class='${e.e("year-panel")}' part='year-panel'></div>
-            <div class='${e.e("month-panel")}' part='month-panel'>${a.map(
-      (r, h) => `<button class='${e.e("month-item")}' part='month-item' data-month='${h + 1}'>${r}</button>`
+            <div class='${n.e("year-panel")}' part='year-panel' role='listbox' aria-label='Select year'></div>
+            <div class='${n.e("month-panel")}' part='month-panel' role='listbox' aria-label='Select month'>${t.map(
+      (r, i) => `<button class='${n.e("month-item")}' part='month-item' data-month='${i + 1}' role='option' aria-selected='false'>${r}</button>`
     ).join("")}</div>
           </div>
         </div>
       </div>
-    `), u(this, p, this.shadowRoot.querySelector(e.cb())), u(this, H, this.shadowRoot.querySelector(e.ce("input-wrap"))), u(this, d, this.shadowRoot.querySelector(e.ce("input"))), u(this, V, this.shadowRoot.querySelector(e.ce("dropdown-wrap"))), u(this, $, this.shadowRoot.querySelector(e.ce("calendar"))), u(this, j, this.shadowRoot.querySelector(
-      e.ce("calendar-header")
-    )), u(this, O, this.shadowRoot.querySelector(e.ce("calendar-body"))), u(this, v, this.shadowRoot.querySelector(e.ce("header-year"))), u(this, b, this.shadowRoot.querySelector(e.ce("header-month"))), u(this, f, this.shadowRoot.querySelector(e.ce("btn-prev-year"))), u(this, M, this.shadowRoot.querySelector(e.ce("btn-prev-month"))), u(this, Y, this.shadowRoot.querySelector(e.ce("btn-next-month"))), u(this, w, this.shadowRoot.querySelector(e.ce("btn-next-year"))), u(this, W, this.shadowRoot.querySelector(e.ce("year-panel"))), u(this, A, this.shadowRoot.querySelector(e.ce("month-panel")));
-  }
-  /**
-   * 更新本地化
-   * @param {string} locale
-   */
-  $updateLocalization(e) {
-    G.locale = e, L.locale(e.toLowerCase());
-    const a = this.ns, r = G.t("calendar.monthsShort");
-    t(this, A).querySelectorAll(
-      `.${a.e("month-item")}`
-    ).forEach((m, c) => {
-      r[c] && (m.textContent = r[c]);
+    `;
+  }
+  $updateLocalization(t) {
+    v.locale = t, _.locale(t.toLowerCase());
+    const e = v.t("calendar.monthsShort");
+    this._monthPanel.querySelectorAll(
+      `.${n.e("month-item")}`
+    ).forEach((i, l) => {
+      e[l] && (i.textContent = e[l]);
+    });
+  }
+  _onCalendarSelect(t) {
+    const e = t.detail, { year: r, month: i, date: l, day: u } = e, d = _(`${r}-${i}-${l}`);
+    this._states.selectedYear = r, this._states.selectedMonth = i, this._states.currentDate = d;
+    const o = d.format(this._getDisplayFormat()), m = d.format(this.valueFormat);
+    this._inputElement.value = o, this.setAttribute("value", m), this.dispatchEvent(
+      new D({
+        fullDate: m,
+        year: r,
+        month: i,
+        date: l,
+        week: u
+      })
+    ), this._closeDropdown();
+  }
+  _onInputClick() {
+    this._container.classList.contains("is-open") ? this._closeDropdown() : this._openDropdown();
+  }
+  _onInputFocus() {
+    this.emit("focus");
+  }
+  _onInputBlur() {
+    this.emit("blur");
+  }
+  _handleKeydown(t) {
+    if (t.composedPath().includes(this._inputElement)) {
+      if (t.ctrlKey || t.shiftKey) return;
+      t.key === "ArrowDown" && (t.preventDefault(), t.stopPropagation(), this._openDropdown());
+    }
+    t.key === "Escape" && this._container.classList.contains("is-open") && (t.preventDefault(), t.stopPropagation(), this._closeDropdown());
+  }
+  _onFocusOut() {
+    requestAnimationFrame(() => {
+      this.contains(document.activeElement) || this._closeDropdown(!1);
     });
   }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = t(this, l)) == null || e.abort(), u(this, l, new AbortController()), t(this, D).call(this), t(this, nt).call(this);
+  _onWindowClick(t) {
+    const e = t.composedPath();
+    e.includes(this) || e.includes(this.shadowRoot) || this._closeDropdown(!1);
+  }
+  _handlePrevYearClick() {
+    this._onPrevYearClick();
+  }
+  _handleNextYearClick() {
+    this._onNextYearClick();
+  }
+  _handlePrevMonthClick() {
+    this._onPrevMonthClick();
+  }
+  _handleNextMonthClick() {
+    this._onNextMonthClick();
+  }
+  _handleYearBtnClick() {
+    this._switchToYearMode();
+  }
+  _handleMonthBtnClick() {
+    this._switchToMonthMode();
   }
-  $beforeUnmounted() {
-    var e;
-    (e = t(this, l)) == null || e.abort(), u(this, l, null);
+  _handleYearPanelClick(t) {
+    this._onYearClick(t);
+  }
+  _handleMonthPanelClick(t) {
+    this._onMonthClick(t);
+  }
+  focus() {
+    this._inputElement.focus();
+  }
+  blur() {
+    this._inputElement.blur();
+  }
+  handleOpen() {
+    this._openDropdown();
+  }
+  handleClose() {
+    this._closeDropdown();
   }
-  /**
-   * 获取验证目标元素
-   * @returns {HTMLElement}
-   */
   get validationTarget() {
-    return t(this, d);
+    return this._inputElement;
   }
-  /**
-   * 更新表单验证状态
-   */
   updateValidity() {
-    const e = this.value !== "" && this.value != null;
-    this.required && !e ? this.internals.setValidity({ valueMissing: !0 }, "请选择日期", this) : this.internals.setValidity({}, "", this);
+    const t = this.value !== "" && this.value != null;
+    this.required && !t ? this.internals.setValidity({ valueMissing: !0 }, "请选择日期", this) : this.internals.setValidity({}, "", this);
   }
-  /**
-   * 检查表单字段的有效性
-   * @returns {boolean}
-   */
   checkValidity() {
     return this.updateValidity(), this.internals.validity.valid;
   }
-  /**
-   * 报告表单字段的有效性（显示验证提示）
-   * @returns {boolean}
-   */
   reportValidity() {
     return this.updateValidity(), this.internals.reportValidity();
   }
-}
-p = new WeakMap(), H = new WeakMap(), d = new WeakMap(), V = new WeakMap(), $ = new WeakMap(), j = new WeakMap(), O = new WeakMap(), v = new WeakMap(), b = new WeakMap(), f = new WeakMap(), M = new WeakMap(), Y = new WeakMap(), w = new WeakMap(), W = new WeakMap(), A = new WeakMap(), l = new WeakMap(), s = new WeakMap(), E = new WeakSet(), /**
- * 获取实际的显示格式
- * 如果用户设置了自定义格式，则使用自定义格式
- * 否则根据type使用默认格式
- * @return {string} 显示格式
- */
-I = function() {
-  const e = this["display-format"];
-  if (this.hasAttribute("display-format") && this["display-format"] !== "")
-    return e;
-  switch (this.type) {
-    case "year":
-      return "YYYY";
-    case "month":
-      return "YYYY-MM";
-    default:
-      return "YYYY-MM-DD";
-  }
-}, D = new WeakMap(), P = new WeakMap(), S = new WeakMap(), q = new WeakMap(), z = new WeakMap(), B = new WeakMap(), F = new WeakMap(), _ = new WeakMap(), Q = new WeakMap(), U = new WeakMap(), X = new WeakMap(), Z = new WeakMap(), J = new WeakMap(), K = new WeakMap(), tt = new WeakMap(), k = new WeakMap(), et = new WeakMap(), T = new WeakMap(), g = new WeakMap(), st = new WeakMap(), at = new WeakMap(), it = new WeakMap(), rt = new WeakMap(), nt = new WeakMap();
-customElements.get("ea-date-picker") || customElements.define("ea-date-picker", Yt);
+  $mount() {
+    this._setupAria(), this._updateDropdownInert(), this.updateContainerClasslist(), this._updateHeaderDisplay();
+  }
+  $beforeUnmount() {
+    var t;
+    (t = this._abortController) == null || t.abort(), this._abortController = null;
+  }
+};
+a._instanceCount = 0;
+s([
+  c(".ea-date-picker")
+], a.prototype, "_container", 2);
+s([
+  c(".ea-date-picker__input")
+], a.prototype, "_inputElement", 2);
+s([
+  c(".ea-date-picker__dropdown-wrap")
+], a.prototype, "_dropdownWrap", 2);
+s([
+  c(".ea-date-picker__calendar")
+], a.prototype, "_calendarElement", 2);
+s([
+  c(".ea-date-picker__calendar-header")
+], a.prototype, "_calendarHeader", 2);
+s([
+  c(".ea-date-picker__calendar-body")
+], a.prototype, "_calendarBody", 2);
+s([
+  c(".ea-date-picker__header-year")
+], a.prototype, "_yearBtn", 2);
+s([
+  c(".ea-date-picker__header-month")
+], a.prototype, "_monthBtn", 2);
+s([
+  c(".ea-date-picker__btn-prev-year")
+], a.prototype, "_prevYearBtn", 2);
+s([
+  c(".ea-date-picker__btn-prev-month")
+], a.prototype, "_prevMonthBtn", 2);
+s([
+  c(".ea-date-picker__btn-next-month")
+], a.prototype, "_nextMonthBtn", 2);
+s([
+  c(".ea-date-picker__btn-next-year")
+], a.prototype, "_nextYearBtn", 2);
+s([
+  c(".ea-date-picker__year-panel")
+], a.prototype, "_yearPanel", 2);
+s([
+  c(".ea-date-picker__month-panel")
+], a.prototype, "_monthPanel", 2);
+s([
+  p({
+    type: String,
+    default: "",
+    observer(t) {
+      this._inputElement.label = t;
+    }
+  })
+], a.prototype, "label", 2);
+s([
+  p({
+    type: String,
+    default: "auto",
+    observer(t) {
+      this._container.style.setProperty("--ea-date-picker-width", t);
+    }
+  })
+], a.prototype, "width", 2);
+s([
+  p({
+    type: String,
+    default: "",
+    observer(t) {
+      let e = t;
+      if (isNaN(new Date(t).getTime()) && t !== "") {
+        const r = new Date(Date.now());
+        e = `${r.getFullYear()}-${r.getMonth() + 1}-${r.getDate()}`;
+      }
+      e ? (this._states.currentDate = _(e), this._states.selectedYear = this._states.currentDate.year(), this._states.selectedMonth = this._states.currentDate.month() + 1, this._inputElement.value = this._states.currentDate.format(
+        this._getDisplayFormat()
+      )) : this._inputElement.value = e, this.setValue(t);
+    }
+  })
+], a.prototype, "value", 2);
+s([
+  p({
+    type: String,
+    default: "",
+    observer(t) {
+      this._inputElement.setAttribute("placeholder", t);
+    }
+  })
+], a.prototype, "placeholder", 2);
+s([
+  p({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (t) => String(t)
+    },
+    observer(t) {
+      this._inputElement.toggleAttribute("disabled", t), t && this._closeDropdown(), this._updateDropdownInert(), this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "disabled", 2);
+s([
+  p({
+    type: w(["left", "center", "right"]),
+    default: "left",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "align", 2);
+s([
+  p({
+    type: String,
+    default: "YYYY-MM-DD"
+  })
+], a.prototype, "displayFormat", 2);
+s([
+  p({
+    type: String,
+    default: "YYYY-MM-DD"
+  })
+], a.prototype, "valueFormat", 2);
+s([
+  p({
+    type: w(["date", "month", "year"]),
+    default: "date",
+    observer(t) {
+      t === "year" ? this._switchToYearMode() : t === "month" ? this._switchToMonthMode() : this._switchToDayMode();
+    }
+  })
+], a.prototype, "variant", 2);
+s([
+  p({
+    type: w(["large", "default", "small"]),
+    default: "default",
+    observer(t) {
+      this._inputElement.setAttribute("size", t), this._yearBtn.setAttribute("size", t), this._monthBtn.setAttribute("size", t), this._prevYearBtn.setAttribute("size", t), this._prevMonthBtn.setAttribute("size", t), this._nextMonthBtn.setAttribute("size", t), this._nextYearBtn.setAttribute("size", t), this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "size", 2);
+s([
+  p({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._inputElement.toggleAttribute("required", t);
+    }
+  })
+], a.prototype, "required", 2);
+s([
+  h("ea-select", ".ea-date-picker__calendar")
+], a.prototype, "_onCalendarSelect", 1);
+s([
+  h("click", ".ea-date-picker__input")
+], a.prototype, "_onInputClick", 1);
+s([
+  h("focus", ".ea-date-picker__input")
+], a.prototype, "_onInputFocus", 1);
+s([
+  h("blur", ".ea-date-picker__input")
+], a.prototype, "_onInputBlur", 1);
+s([
+  h("keydown")
+], a.prototype, "_handleKeydown", 1);
+s([
+  h("focusout")
+], a.prototype, "_onFocusOut", 1);
+s([
+  h("click", "window")
+], a.prototype, "_onWindowClick", 1);
+s([
+  h("click", ".ea-date-picker__btn-prev-year")
+], a.prototype, "_handlePrevYearClick", 1);
+s([
+  h("click", ".ea-date-picker__btn-next-year")
+], a.prototype, "_handleNextYearClick", 1);
+s([
+  h("click", ".ea-date-picker__btn-prev-month")
+], a.prototype, "_handlePrevMonthClick", 1);
+s([
+  h("click", ".ea-date-picker__btn-next-month")
+], a.prototype, "_handleNextMonthClick", 1);
+s([
+  h("click", ".ea-date-picker__header-year")
+], a.prototype, "_handleYearBtnClick", 1);
+s([
+  h("click", ".ea-date-picker__header-month")
+], a.prototype, "_handleMonthBtnClick", 1);
+s([
+  h("click", ".ea-date-picker__year-panel")
+], a.prototype, "_handleYearPanelClick", 1);
+s([
+  h("click", ".ea-date-picker__month-panel")
+], a.prototype, "_handleMonthPanelClick", 1);
+a = s([
+  $(Y, { styles: [P] })
+], a);
 export {
-  Yt as EaDatePicker
+  a as EaDatePicker
 };