x-next 1.1.0 → 1.3.0

package/dist/es/components/date-picker/DatePanel.vue.js

@@ -1,139 +1,147 @@
-import b from "./DatePanel.vue2.js";
-import { openBlock as s, createElementBlock as n, withKeys as N, normalizeClass as l, createElementVNode as i, createCommentVNode as o, toDisplayString as r, Fragment as d, renderList as u, renderSlot as k, createTextVNode as y } from "vue";
-import p from "../../_virtual/_plugin-vue_export-helper.js";
-const v = ["aria-label"], w = ["aria-label"], $ = ["aria-label"], g = ["aria-label"], C = { key: 0 }, P = ["title", "disabled", "aria-selected", "onMouseenter", "onClick"], f = ["onClick"];
-function h(e, t, L, S, E, M) {
+import p from "./DatePanel.vue2.js";
+import { openBlock as s, createElementBlock as n, withKeys as w, normalizeClass as l, createElementVNode as m, createCommentVNode as r, toDisplayString as i, Fragment as u, renderList as b, renderSlot as N, createTextVNode as v } from "vue";
+import $ from "../../_virtual/_plugin-vue_export-helper.js";
+const g = ["aria-label"], C = ["aria-label"], f = ["aria-label"], P = ["aria-label"], h = { key: 0 }, L = ["title", "aria-label", "role", "tabindex", "disabled", "aria-selected", "onMouseenter", "onFocus", "onKeydown", "onClick"], S = ["onClick"];
+function E(e, t, M, T, R, K) {
   return s(), n("div", {
+    ref: "panelRef",
     class: l([
       e.className.element("panel"),
       e.className.modifier(`mode-${e.mode}`),
       { [e.className.is("show-lunar")]: e.showLunar && e.mode === "date" }
     ]),
-    onKeydown: t[8] || (t[8] = N((a) => e.$emit("cancel"), ["esc"]))
+    onKeydown: t[8] || (t[8] = w((o) => e.$emit("cancel"), ["esc"]))
   }, [
-    i("div", {
-      class: l([
-        e.className.element("header"),
-        e.className.element(`header-${e.panelPosition}`)
-      ])
+    m("div", {
+      class: l([e.className.element("header"), e.className.element(`header-${e.panelPosition}`)])
     }, [
       e.panelPosition !== "right" ? (s(), n("button", {
         key: 0,
         type: "button",
         class: l(e.className.element("header-btn")),
         "aria-label": e.t("datePicker.prevPage"),
-        onClick: t[0] || (t[0] = (a) => e.movePanel(-1, !0))
-      }, " « ", 10, v)) : o("", !0),
+        onClick: t[0] || (t[0] = (o) => e.movePanel(-1, !0))
+      }, " « ", 10, g)) : r("", !0),
       e.panelPosition !== "right" ? (s(), n("button", {
         key: 1,
         type: "button",
         class: l(e.className.element("header-btn")),
         "aria-label": e.t("datePicker.prevItem"),
-        onClick: t[1] || (t[1] = (a) => e.movePanel(-1))
-      }, " ‹ ", 10, w)) : o("", !0),
-      i("button", {
+        onClick: t[1] || (t[1] = (o) => e.movePanel(-1))
+      }, " ‹ ", 10, C)) : r("", !0),
+      m("button", {
         type: "button",
         class: l(e.className.element("header-label")),
-        onClick: t[2] || (t[2] = (...a) => e.zoomHeader && e.zoomHeader(...a))
-      }, r(e.headerLabel), 3),
+        onClick: t[2] || (t[2] = (...o) => e.zoomHeader && e.zoomHeader(...o))
+      }, i(e.headerLabel), 3),
       e.panelPosition !== "left" ? (s(), n("button", {
         key: 2,
         type: "button",
         class: l(e.className.element("header-btn")),
         "aria-label": e.t("datePicker.nextItem"),
-        onClick: t[3] || (t[3] = (a) => e.movePanel(1))
-      }, " › ", 10, $)) : o("", !0),
+        onClick: t[3] || (t[3] = (o) => e.movePanel(1))
+      }, " › ", 10, f)) : r("", !0),
       e.panelPosition !== "left" ? (s(), n("button", {
         key: 3,
         type: "button",
         class: l(e.className.element("header-btn")),
         "aria-label": e.t("datePicker.nextPage"),
-        onClick: t[4] || (t[4] = (a) => e.movePanel(1, !0))
-      }, " » ", 10, g)) : o("", !0)
+        onClick: t[4] || (t[4] = (o) => e.movePanel(1, !0))
+      }, " » ", 10, P)) : r("", !0)
     ], 2),
     e.mode === "date" || e.mode === "week" ? (s(), n("div", {
       key: 0,
-      class: l([
-        e.className.element("weekdays"),
-        { [e.className.is("week-mode")]: e.mode === "week" }
-      ])
+      class: l([e.className.element("weekdays"), { [e.className.is("week-mode")]: e.mode === "week" }])
     }, [
-      e.mode === "week" ? (s(), n("span", C, r(e.t("datePicker.weekColumn")), 1)) : o("", !0),
-      (s(!0), n(d, null, u(e.weekdayLabels, (a) => (s(), n("span", { key: a }, r(a), 1))), 128))
-    ], 2)) : o("", !0),
-    i("div", {
-      class: l([
-        e.className.element("body"),
-        e.className.element(`body-${e.mode}`)
-      ]),
+      e.mode === "week" ? (s(), n("span", h, i(e.t("datePicker.weekColumn")), 1)) : r("", !0),
+      (s(!0), n(u, null, b(e.weekdayLabels, (o) => (s(), n("span", { key: o }, i(o), 1))), 128))
+    ], 2)) : r("", !0),
+    m("div", {
+      class: l([e.className.element("body"), e.className.element(`body-${e.mode}`)]),
       role: "grid"
     }, [
-      (s(!0), n(d, null, u(e.cells, (a) => (s(), n("button", {
-        key: a.title,
-        type: "button",
-        title: a.title,
-        disabled: a.isWeekLabel || a.disabled || !a.inView,
-        "aria-selected": !a.isWeekLabel && (a.selected || a.rangeStart || a.rangeEnd),
-        onMouseenter: (m) => e.handleCellMouseEnter(a),
-        onMouseleave: t[5] || (t[5] = (...m) => e.handleCellMouseLeave && e.handleCellMouseLeave(...m)),
-        class: l([
-          e.className.element("cell"),
-          {
-            [e.className.is("out-view")]: a.outView,
-            [e.className.is("today")]: a.today,
-            [e.className.is("selected")]: a.selected,
-            [e.className.is("range-start")]: a.rangeStart,
-            [e.className.is("range-end")]: a.rangeEnd,
-            [e.className.is("in-range")]: a.inRange,
-            [e.className.is("preview-range-start")]: a.previewRangeStart,
-            [e.className.is("preview-range-end")]: a.previewRangeEnd,
-            [e.className.is("in-preview-range")]: a.inPreviewRange,
-            [e.className.is("disabled")]: a.disabled,
-            [e.className.is("week-label")]: a.isWeekLabel,
-            [e.className.is("week-start")]: a.weekStart,
-            [e.className.is("week-end")]: a.weekEnd,
-            [e.className.is("week-selected")]: a.weekSelected
-          }
-        ]),
-        onClick: (m) => e.handleSelect(a)
+      (s(!0), n(u, null, b(e.cellRows, (o, k) => (s(), n("div", {
+        key: k,
+        role: "row",
+        class: l(e.className.element("row"))
       }, [
-        i("span", {
-          class: l(e.className.element("cell-date"))
-        }, [
-          i("span", {
-            class: l(e.className.element("cell-inner"))
+        (s(!0), n(u, null, b(o, (a) => {
+          var y;
+          return s(), n("button", {
+            key: a.title,
+            type: "button",
+            title: a.title,
+            "aria-label": a.title,
+            role: a.isWeekLabel ? "rowheader" : "gridcell",
+            tabindex: a.title === ((y = e.activeCell) == null ? void 0 : y.title) ? 0 : -1,
+            disabled: a.isWeekLabel || a.disabled || !a.inView,
+            "aria-selected": !a.isWeekLabel && (a.selected || a.rangeStart || a.rangeEnd),
+            onMouseenter: (d) => e.handleCellMouseEnter(a),
+            onMouseleave: t[5] || (t[5] = (...d) => e.handleCellMouseLeave && e.handleCellMouseLeave(...d)),
+            onFocus: (d) => {
+              e.activeTitle = a.title, e.handleCellMouseEnter(a);
+            },
+            onKeydown: (d) => e.handleCellKeydown(d, a),
+            class: l([
+              e.className.element("cell"),
+              {
+                [e.className.is("out-view")]: a.outView,
+                [e.className.is("today")]: a.today,
+                [e.className.is("selected")]: a.selected,
+                [e.className.is("range-start")]: a.rangeStart,
+                [e.className.is("range-end")]: a.rangeEnd,
+                [e.className.is("in-range")]: a.inRange,
+                [e.className.is("preview-range-start")]: a.previewRangeStart,
+                [e.className.is("preview-range-end")]: a.previewRangeEnd,
+                [e.className.is("in-preview-range")]: a.inPreviewRange,
+                [e.className.is("disabled")]: a.disabled,
+                [e.className.is("week-label")]: a.isWeekLabel,
+                [e.className.is("week-start")]: a.weekStart,
+                [e.className.is("week-end")]: a.weekEnd,
+                [e.className.is("week-selected")]: a.weekSelected
+              }
+            ]),
+            onClick: (d) => e.handleSelect(a)
           }, [
-            k(e.$slots, "cell", {
-              date: a.value.toDate(),
-              label: a.label
-            }, () => [
-              y(r(a.label), 1)
-            ])
-          ], 2)
-        ], 2),
-        a.lunar && !e.$slots.cell ? (s(), n("span", {
-          key: 0,
-          class: l(e.className.element("cell-lunar"))
-        }, r(a.lunar.displayText), 3)) : o("", !0)
-      ], 42, P))), 128))
+            m("span", {
+              class: l(e.className.element("cell-date"))
+            }, [
+              m("span", {
+                class: l(e.className.element("cell-inner"))
+              }, [
+                N(e.$slots, "cell", {
+                  date: a.value.toDate(),
+                  label: a.label
+                }, () => [
+                  v(i(a.label), 1)
+                ])
+              ], 2)
+            ], 2),
+            a.lunar && !e.$slots.cell ? (s(), n("span", {
+              key: 0,
+              class: l(e.className.element("cell-lunar"))
+            }, i(a.lunar.displayText), 3)) : r("", !0)
+          ], 42, L);
+        }), 128))
+      ], 2))), 128))
     ], 2),
     e.shortcuts.length || e.$slots.extra ? (s(), n("div", {
       key: 1,
       class: l(e.className.element("shortcuts"))
     }, [
-      (s(!0), n(d, null, u(e.shortcuts, (a) => (s(), n("button", {
-        key: String(a.label),
+      (s(!0), n(u, null, b(e.shortcuts, (o) => (s(), n("button", {
+        key: String(o.label),
         type: "button",
         class: l(e.className.element("shortcut")),
-        onClick: (m) => e.$emit("shortcut", a)
-      }, r(a.label), 11, f))), 128)),
+        onClick: (k) => e.$emit("shortcut", o)
+      }, i(o.label), 11, S))), 128)),
       e.$slots.extra ? (s(), n("div", {
         key: 0,
         class: l(e.className.element("extra"))
       }, [
-        k(e.$slots, "extra")
-      ], 2)) : o("", !0)
-    ], 2)) : o("", !0),
+        N(e.$slots, "extra")
+      ], 2)) : r("", !0)
+    ], 2)) : r("", !0),
     e.showToday || e.showConfirmBtn ? (s(), n("div", {
       key: 2,
       class: l(e.className.element("footer"))
@@ -142,18 +150,18 @@ function h(e, t, L, S, E, M) {
         key: 0,
         type: "button",
         class: l([e.className.element("footer-btn"), e.className.element("today")]),
-        onClick: t[6] || (t[6] = (...a) => e.selectToday && e.selectToday(...a))
-      }, r(e.todayLabel), 3)) : o("", !0),
+        onClick: t[6] || (t[6] = (...o) => e.selectToday && e.selectToday(...o))
+      }, i(e.todayLabel), 3)) : r("", !0),
       e.showConfirmBtn ? (s(), n("button", {
         key: 1,
         type: "button",
         class: l([e.className.element("footer-btn"), e.className.element("confirm")]),
-        onClick: t[7] || (t[7] = (a) => e.$emit("confirm"))
-      }, r(e.t("datePicker.ok")), 3)) : o("", !0)
-    ], 2)) : o("", !0)
+        onClick: t[7] || (t[7] = (o) => e.$emit("confirm"))
+      }, i(e.t("datePicker.ok")), 3)) : r("", !0)
+    ], 2)) : r("", !0)
   ], 34);
 }
-const R = /* @__PURE__ */ p(b, [["render", h]]);
+const z = /* @__PURE__ */ $(p, [["render", E]]);
 export {
-  R as default
+  z as default
 };

package/dist/es/components/date-picker/DatePanel.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as w, ref as V, watch as o, computed as u } from "vue";
-import { getClassNameMixin as k } from "../../_utils/config.js";
-import { useLocale as g } from "../../locale/index.js";
-import { getWeekdayLabels as b, getHeaderLabel as D, createDateCells as L, moveViewDate as P, normalizePanelValue as i } from "./utils.js";
-import { dayjs as c } from "../../_utils/date.js";
-const z = w({
+import { defineComponent as K, ref as L, watch as B, computed as i, nextTick as F } from "vue";
+import { getClassNameMixin as Q } from "../../_utils/config.js";
+import { useLocale as Y } from "../../locale/index.js";
+import { getWeekdayLabels as G, getHeaderLabel as J, createDateCells as X, moveViewDate as M, normalizePanelValue as g } from "./utils.js";
+import { dayjs as R } from "../../_utils/date.js";
+const ne = K({
   name: "DatePanel",
   props: {
     mode: {
@@ -69,27 +69,27 @@ const z = w({
     confirm: () => !0,
     cancel: () => !0
   },
-  setup(e, { emit: n }) {
-    const f = k("date-picker"), { t: l, locale: r } = g(), t = V(e.viewDate || e.value || e.rangeValue[0] || c());
-    o(
+  setup(e, { emit: s }) {
+    const x = Q("date-picker"), { t: o, locale: P } = Y(), d = L(e.viewDate || e.value || e.rangeValue[0] || R()), W = L(), v = L("");
+    B(
       () => e.viewDate,
-      (a) => {
-        a && (t.value = a);
+      (t) => {
+        t && (d.value = t);
       }
-    ), o(
+    ), B(
       () => [e.value, e.rangeValue[0], e.rangeValue[1], e.mode],
       () => {
         if (e.viewDate) return;
-        const a = e.value || e.rangeValue[0] || e.rangeValue[1];
-        a && (t.value = a);
+        const t = e.value || e.rangeValue[0] || e.rangeValue[1];
+        t && (d.value = t);
       }
     );
-    const s = u(
-      () => b(e.dayStartOfWeek, r.value.datePicker)
-    ), m = u(() => D(t.value, e.mode)), y = u(() => e.mode === "month" ? l("datePicker.thisMonth") : e.mode === "year" ? l("datePicker.thisYear") : e.mode === "quarter" ? l("datePicker.thisQuarter") : e.mode === "week" ? l("datePicker.thisWeek") : l("datePicker.today")), v = u(
-      () => L({
+    const H = i(
+      () => G(e.dayStartOfWeek, P.value.datePicker)
+    ), _ = i(() => J(d.value, e.mode)), N = i(() => e.mode === "month" ? o("datePicker.thisMonth") : e.mode === "year" ? o("datePicker.thisYear") : e.mode === "quarter" ? o("datePicker.thisQuarter") : e.mode === "week" ? o("datePicker.thisWeek") : o("datePicker.today")), r = i(
+      () => X({
         mode: e.mode,
-        viewDate: t.value,
+        viewDate: d.value,
         selectedValue: e.value,
         rangeValue: e.rangeValue,
         previewRangeValue: e.previewRangeValue,
@@ -97,40 +97,93 @@ const z = w({
         hideNotInViewDates: e.hideNotInViewDates,
         disabledDate: e.disabledDate,
         showLunar: e.showLunar,
-        locale: r.value.datePicker
+        locale: P.value.datePicker
       })
-    ), d = (a) => {
-      t.value = a, n("view-date-change", a);
+    ), c = i(
+      () => e.mode === "date" || e.mode === "week" ? 7 : e.mode === "quarter" ? 2 : 3
+    ), T = i(() => {
+      const t = e.mode === "week" ? 8 : c.value;
+      return Array.from(
+        { length: Math.ceil(r.value.length / t) },
+        (a, l) => r.value.slice(l * t, (l + 1) * t)
+      );
+    }), k = (t) => !t.isWeekLabel && !t.disabled && t.inView, U = i(() => {
+      const t = r.value.filter(k);
+      return t.find((a) => a.title === v.value) ?? t.find((a) => a.selected || a.rangeStart || a.rangeEnd) ?? t.find((a) => a.today && !a.outView) ?? t.find((a) => !a.outView) ?? t[0];
+    }), j = () => {
+      F(() => {
+        var t, a;
+        (a = (t = W.value) == null ? void 0 : t.querySelector('[role="gridcell"][tabindex="0"]')) == null || a.focus();
+      });
+    }, y = (t) => {
+      d.value = t, s("view-date-change", t);
+    }, q = (t, a = !1) => {
+      y(M(d.value, e.mode, t, a)), v.value = "";
+    }, E = (t, a) => {
+      var C;
+      if (!k(a)) return;
+      const l = t.key;
+      if (![
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End",
+        "PageUp",
+        "PageDown"
+      ].includes(l))
+        return;
+      t.preventDefault();
+      const m = e.mode === "date" || e.mode === "week" ? "day" : e.mode === "year" ? "year" : "month", S = e.mode === "quarter" ? 3 : 1;
+      let f = l === "ArrowLeft" ? -1 : l === "ArrowRight" ? 1 : l === "ArrowUp" ? -c.value : c.value, n = a.value, w;
+      if (l === "Home" || l === "End") {
+        const u = r.value.filter((D) => !D.isWeekLabel), b = u.findIndex((D) => D.title === a.title), V = Math.floor(b / c.value) * c.value, O = Math.min(V + c.value - 1, u.length - 1);
+        n = u[l === "Home" ? V : O].value, w = u[l === "Home" ? O : V].value, f = l === "Home" ? 1 : -1;
+      } else l === "PageUp" || l === "PageDown" ? (f = l === "PageUp" ? -1 : 1, n = M(a.value, e.mode, f, t.shiftKey)) : n = n.add(f * S, m);
+      for (let u = 0; u < 366; u++) {
+        const b = g(n, e.mode);
+        if (!((C = e.disabledDate) != null && C.call(e, b.toDate()))) break;
+        if (n = n.add(f * S, m), w && (f > 0 ? n.isAfter(w, m) : n.isBefore(w, m)) || u === 365) return;
+      }
+      y(n);
+      const h = r.value.find(
+        (u) => !u.isWeekLabel && u.value.isSame(n, m)
+      );
+      h && k(h) && (v.value = h.title, A(h), j());
+    }, I = () => {
+      e.mode === "date" && y(d.value.startOf("year"));
+    }, z = (t) => {
+      t.isWeekLabel || t.disabled || !t.inView || s("select", g(t.value, e.mode, e.dayStartOfWeek));
+    }, A = (t) => {
+      t.isWeekLabel || t.disabled || !t.inView || s("cell-mouse-enter", g(t.value, e.mode, e.dayStartOfWeek));
     };
     return {
-      t: l,
-      className: f,
-      cells: v,
-      headerLabel: m,
-      todayLabel: y,
-      weekdayLabels: s,
-      movePanel: (a, h = !1) => {
-        d(P(t.value, e.mode, a, h));
-      },
-      zoomHeader: () => {
-        e.mode === "date" && d(t.value.startOf("year"));
-      },
-      handleSelect: (a) => {
-        a.isWeekLabel || a.disabled || !a.inView || n("select", i(a.value, e.mode, e.dayStartOfWeek));
-      },
-      handleCellMouseEnter: (a) => {
-        a.isWeekLabel || a.disabled || !a.inView || n("cell-mouse-enter", i(a.value, e.mode, e.dayStartOfWeek));
-      },
+      t: o,
+      className: x,
+      cells: r,
+      cellRows: T,
+      panelRef: W,
+      activeTitle: v,
+      activeCell: U,
+      handleCellKeydown: E,
+      headerLabel: _,
+      todayLabel: N,
+      weekdayLabels: H,
+      movePanel: q,
+      zoomHeader: I,
+      handleSelect: z,
+      handleCellMouseEnter: A,
       handleCellMouseLeave: () => {
-        n("cell-mouse-leave");
+        s("cell-mouse-leave");
       },
       selectToday: () => {
-        const a = c();
-        n("select", i(a, e.mode, e.dayStartOfWeek)), d(a);
+        const t = R();
+        s("select", g(t, e.mode, e.dayStartOfWeek)), y(t);
       }
     };
   }
 });
 export {
-  z as default
+  ne as default
 };