x-next 1.7.0 → 1.8.1

package/dist/es/components/heatmap/Heatmap.js

@@ -1,13 +1,13 @@
-import { defineComponent as W, createVNode as l, toRefs as $, computed as n, ref as q, Fragment as j } from "vue";
-import { getClassNameMixin as P } from "../../_utils/config.js";
-import { useSize as T } from "../../_hooks/use-size.js";
-import { useLocale as V } from "../../locale/index.js";
-import { isObject as _ } from "../../_utils/is.js";
-import { throttleByRaf as F } from "../../_utils/throttle-by-raf.js";
-import { Spin as H } from "../spin/index.js";
-import { getWeekdayLabels as G } from "../date-picker/utils.js";
-import { CELL_SIZE as A, resolveRange as U, indexDataByDay as Z, getValueExtent as J, buildMatrix as K, DEFAULT_COLOR_LEVELS as Q, getMonthLabels as X, isCellInRequestedRange as ee } from "./helpers/matrix.js";
-const ue = /* @__PURE__ */ W({
+import { defineComponent as X, createVNode as n, useId as ee, toRefs as te, computed as o, ref as W, watch as le, nextTick as ae, Fragment as ne } from "vue";
+import { getClassNameMixin as oe } from "../../_utils/config.js";
+import { useSize as re } from "../../_hooks/use-size.js";
+import { useLocale as ie } from "../../locale/index.js";
+import { isObject as se } from "../../_utils/is.js";
+import { throttleByRaf as ue } from "../../_utils/throttle-by-raf.js";
+import { Spin as ce } from "../spin/index.js";
+import { getWeekdayLabels as de } from "../date-picker/utils.js";
+import { CELL_SIZE as K, resolveRange as me, indexDataByDay as ve, getValueExtent as fe, buildMatrix as he, DEFAULT_COLOR_LEVELS as pe, getMonthLabels as ye, isCellInRequestedRange as ge } from "./helpers/matrix.js";
+const U = 2, Ee = /* @__PURE__ */ X({
   name: "Heatmap",
   props: {
     /**
@@ -70,7 +70,7 @@ const ue = /* @__PURE__ */ W({
     firstDayOfWeek: {
       type: Number,
       default: 0,
-      validator: (e) => e >= 0 && e <= 6
+      validator: (t) => t >= 0 && t <= 6
     },
     /**
      * @zh 是否展示星期标签
@@ -132,203 +132,280 @@ const ue = /* @__PURE__ */ W({
      * @param {HeatmapCell} cell
      * @param {MouseEvent} ev
      */
-    cellClick: (e, b) => !0
+    cellClick: (t, D) => !0
   },
   slots: Object,
-  setup(e, {
-    emit: b,
-    slots: I
+  setup(t, {
+    emit: D,
+    slots: Y
   }) {
     const {
-      t: v,
-      locale: O
-    } = V(), h = P("heatmap"), {
-      mergedSize: x
-    } = T($(e).size, {
+      t: p,
+      locale: C
+    } = ie(), z = oe("heatmap"), S = `x-heatmap-cell-${ee()}`, {
+      mergedSize: y
+    } = re(te(t).size, {
       defaultValue: "medium"
-    }), c = n(() => A[x.value] ?? A.medium), d = n(() => {
-      var t;
-      return (t = e.activeColors) != null && t.length ? e.activeColors : ["var(--x-heatmap-color-level-1)", "var(--x-heatmap-color-level-2)", "var(--x-heatmap-color-level-3)", "var(--x-heatmap-color-level-4)", "var(--x-heatmap-color-level-5)"];
-    }), C = n(() => e.minimumColor ?? "var(--x-heatmap-color-empty)"), k = n(() => [C.value, ...d.value]), i = n(() => U({
-      year: e.year,
-      startDate: e.startDate,
-      endDate: e.endDate,
-      data: e.data
-    }, e.firstDayOfWeek)), y = n(() => Z(e.data)), E = n(() => J(e.data)), p = n(() => i.value ? K(i.value, y.value, E.value, d.value.length || Q) : []), R = n(() => {
-      const t = Array.from({
-        length: 7
-      }, () => []);
-      return p.value.forEach((a) => {
-        t[a.rowIndex].push(a);
-      }), t;
-    }), N = n(() => G(e.firstDayOfWeek, O.value.datePicker)), L = n(() => {
-      if (!i.value) return [];
-      const t = i.value.requestedStart.year() !== i.value.requestedEnd.year();
-      return X(i.value, p.value, (a) => t ? a.format("YYYY-MM") : v("heatmap.month", {
-        month: a.month() + 1
+    }), s = o(() => K[y.value] ?? K.medium), E = o(() => {
+      var e;
+      return (e = t.activeColors) != null && e.length ? t.activeColors : ["var(--x-heatmap-color-level-1)", "var(--x-heatmap-color-level-2)", "var(--x-heatmap-color-level-3)", "var(--x-heatmap-color-level-4)", "var(--x-heatmap-color-level-5)"];
+    }), R = o(() => t.minimumColor ?? "var(--x-heatmap-color-empty)"), b = o(() => [R.value, ...E.value]), c = o(() => me({
+      year: t.year,
+      startDate: t.startDate,
+      endDate: t.endDate,
+      data: t.data
+    }, t.firstDayOfWeek)), P = o(() => ve(t.data)), A = o(() => fe(t.data)), m = o(() => c.value ? he(c.value, P.value, A.value, E.value.length || pe) : []), q = o(() => de(t.firstDayOfWeek, C.value.datePicker)), F = o(() => {
+      if (!c.value) return [];
+      const e = c.value.requestedStart.year() !== c.value.requestedEnd.year();
+      return ye(c.value, m.value, (l) => e ? l.format("YYYY-MM") : p("heatmap.month", {
+        month: l.month() + 1
       }));
-    }), r = (t) => k.value[t.level] ?? C.value, w = (t) => {
-      const a = t.date.format("YYYY-MM-DD"), m = t.value;
-      return m === null ? v("heatmap.noData", {
-        date: a
-      }) : v("heatmap.value", {
-        date: a,
-        value: m
+    }), V = (e) => b.value[e.level] ?? R.value, $ = (e) => {
+      const l = e.date.format("YYYY-MM-DD"), r = e.value;
+      return r === null ? p("heatmap.noData", {
+        date: l
+      }) : p("heatmap.value", {
+        date: l,
+        value: r
       });
-    }, f = q(null), g = n(() => e.tooltip !== !1), S = n(() => f.value === null ? null : p.value[f.value] ?? null), Y = n(() => {
-      const t = S.value;
-      if (!t) return {};
-      const a = 2, m = t.colIndex * (c.value + a) + c.value / 2, D = t.rowIndex * (c.value + a) + c.value;
-      return {
-        left: `${m}px`,
-        top: `${D + 6}px`
+    }, d = W(null), L = o(() => t.tooltip !== !1), x = W(null), i = {
+      tooltip: x
+    }, k = W(0), M = o(() => d.value === null ? null : m.value[d.value] ?? null), w = o(() => m.value.reduce((e, l) => Math.max(e, l.colIndex + 1), 0)), _ = o(() => {
+      const e = U;
+      return w.value <= 0 ? 0 : w.value * s.value + (w.value - 1) * e;
+    }), O = o(() => {
+      const e = M.value;
+      if (!e) return {};
+      const l = U, r = e.colIndex * (s.value + l) + s.value / 2, u = e.rowIndex * (s.value + l) + s.value, h = k.value / 2, f = _.value;
+      let H = r;
+      return h > 0 && f > 0 && (H = f >= k.value ? Math.min(Math.max(r, h), f - h) : f / 2), {
+        left: `${H}px`,
+        top: `${u + 6}px`
       };
-    }), z = (t) => {
-      var D;
-      if (!g.value) return;
-      const a = t.target, m = (D = a == null ? void 0 : a.dataset) == null ? void 0 : D.index;
-      f.value = m === void 0 ? null : Number(m);
+    });
+    le(d, (e) => {
+      if (e === null) {
+        k.value = 0;
+        return;
+      }
+      ae(() => {
+        var r;
+        const l = ((r = x.value) == null ? void 0 : r.offsetWidth) ?? 0;
+        l !== k.value && (k.value = l);
+      });
+    });
+    const j = (e) => {
+      var u;
+      if (!L.value) return;
+      const l = e.target, r = (u = l == null ? void 0 : l.dataset) == null ? void 0 : u.index;
+      g.value = !1, d.value = r === void 0 ? null : Number(r);
     }, B = () => {
-      f.value = null;
-    }, o = (t, a) => {
-      b("cellClick", t, a);
-    }, u = F(z), s = n(() => ({
-      "--x-heatmap-cell-size": `${c.value}px`,
-      gridTemplateRows: `repeat(7, ${c.value}px)`
+      d.value = null, g.value = !1;
+    }, g = W(!1), N = (e, l = !1) => {
+      g.value = l, d.value = e;
+    }, T = (e) => {
+      if (!L.value || m.value.length === 0) return;
+      const l = m.value.length - 1, r = d.value;
+      let u = null;
+      if (e.key === "ArrowRight") u = Math.min(l, (r ?? -1) + 1);
+      else if (e.key === "ArrowLeft") u = Math.max(0, (r ?? l + 1) - 1);
+      else if (e.key === "ArrowDown") u = Math.min(l, (r ?? -7) + 7);
+      else if (e.key === "ArrowUp") u = Math.max(0, (r ?? 7) - 7);
+      else if (e.key === "Home") {
+        const h = r ?? 0, f = m.value[h];
+        u = f ? Math.max(0, h - f.rowIndex) : 0;
+      } else if (e.key === "End") {
+        const h = r ?? l, f = m.value[h];
+        u = f ? Math.min(l, h + (6 - f.rowIndex)) : l;
+      } else if (e.key === "Escape") {
+        B();
+        return;
+      }
+      u !== null && (e.preventDefault(), N(u, !0));
+    }, a = () => {
+      d.value === null && N(0, !0);
+    }, v = o(() => g.value && d.value !== null ? `${S}-${d.value}` : void 0), I = o(() => t.ariaLabel ?? p("heatmap.gridLabel")), G = o(() => {
+      const e = M.value;
+      return !g.value || !e ? "" : $(e);
+    }), Z = (e, l) => {
+      D("cellClick", e, l);
+    }, J = ue(j), Q = o(() => ({
+      "--x-heatmap-cell-size": `${s.value}px`,
+      gridTemplateRows: `repeat(7, ${s.value}px)`
     }));
     return {
-      t: v,
-      className: h,
-      mergedSize: x,
-      cells: p,
-      rows: R,
-      range: i,
-      gridStyle: s,
-      weekdayLabels: N,
-      monthLabels: L,
-      activeCell: S,
-      tooltipEnabled: g,
-      tooltipStyle: Y,
-      cellColor: r,
-      cellLabel: w,
-      handleCellClick: o,
-      throttledMove: u,
+      t: p,
+      className: z,
+      mergedSize: y,
+      cells: m,
+      range: c,
+      gridStyle: Q,
+      weekdayLabels: q,
+      monthLabels: F,
+      activeCell: M,
+      tooltipEnabled: L,
+      tooltipStyle: O,
+      cellColor: V,
+      cellLabel: $,
+      handleCellClick: Z,
+      throttledMove: J,
       clearActive: B,
-      isInRange: (t) => i.value ? ee(t, i.value.requestedStart, i.value.requestedEnd) : !0,
-      colorPalette: k,
-      slots: I
+      handleKeydown: T,
+      handleGridFocus: a,
+      activeDescendant: v,
+      gridLabel: I,
+      cellIdPrefix: S,
+      liveText: G,
+      isInRange: (e) => c.value ? ge(e, c.value.requestedStart, c.value.requestedEnd) : !0,
+      colorPalette: b,
+      slots: Y,
+      refs: i,
+      setTooltipElement: (e) => {
+        x.value = e;
+      }
     };
   },
   render() {
     const {
-      className: e,
-      mergedSize: b,
-      cells: I,
-      rows: v,
-      range: O,
-      gridStyle: h,
-      weekdayLabels: x,
-      monthLabels: c,
-      activeCell: d,
-      tooltipEnabled: C,
-      tooltipStyle: k,
-      cellColor: i,
-      cellLabel: y,
-      handleCellClick: E,
-      throttledMove: p,
-      clearActive: R,
-      isInRange: N,
-      colorPalette: L,
-      slots: r,
+      className: t,
+      mergedSize: D,
+      cells: Y,
+      range: p,
+      gridStyle: C,
+      weekdayLabels: z,
+      monthLabels: S,
+      activeCell: y,
+      tooltipEnabled: s,
+      tooltipStyle: E,
+      cellColor: R,
+      cellLabel: b,
+      handleCellClick: c,
+      throttledMove: P,
+      clearActive: A,
+      handleKeydown: m,
+      handleGridFocus: q,
+      activeDescendant: F,
+      gridLabel: V,
+      cellIdPrefix: $,
+      liveText: d,
+      isInRange: L,
+      colorPalette: x,
+      slots: i,
+      refs: k,
+      setTooltipElement: M,
       t: w
     } = this;
-    if (!O) return null;
-    const f = _(this.loading) ? this.loading : {
+    if (!p) return null;
+    const _ = se(this.loading) ? this.loading : {
       loading: this.loading,
       dot: "color"
-    }, g = C && d !== null, S = () => l("div", {
-      class: e.element("grid"),
+    }, O = s && y !== null, j = () => n("div", {
+      class: t.element("grid"),
       style: {
-        ...h,
+        ...C,
         "--x-heatmap-cell-gap": "var(--x-spacing-1)"
       },
-      onMousemove: p,
-      onMouseleave: R
-    }, [v.map((o, u) => o.map((s) => l("div", {
-      key: s.timestamp,
-      class: [e.element("cell"), e.modifier(`level-${s.level}`), {
-        [e.is("out-of-range")]: !N(s)
+      role: s ? "grid" : void 0,
+      tabindex: s ? 0 : void 0,
+      "aria-activedescendant": F,
+      "aria-label": s ? V : void 0,
+      onMousemove: P,
+      onMouseleave: A,
+      onFocus: q,
+      onBlur: A,
+      onKeydown: m
+    }, [Y.map((a, v) => n("div", {
+      key: a.timestamp,
+      id: `${$}-${v}`,
+      class: [t.element("cell"), t.modifier(`level-${a.level}`), {
+        [t.is("out-of-range")]: !L(a)
       }],
       style: {
-        backgroundColor: i(s)
+        backgroundColor: R(a),
+        /*
+         * 显式定位：位置由 rowIndex / colIndex 决定，不再依赖
+         * `grid-auto-flow` 的自动填充顺序。
+         *
+         * 这正是此前数据被整体转置的原因：cells 是列优先数组，
+         * CSS 按列填充，而渲染顺序曾是行优先，三者不一致时布局静默错位。
+         * 显式定位后 DOM 顺序对布局没有任何影响，与 tooltip 使用的
+         * 语义坐标天然一致（等价于 SVG 里用公式算 x/y）。
+         */
+        gridRow: a.rowIndex + 1,
+        gridColumn: a.colIndex + 1
       },
-      "data-index": I.indexOf(s),
-      title: g ? void 0 : y(s),
-      onClick: (M) => E(s, M),
+      "data-index": v,
+      title: O ? void 0 : b(a),
+      onClick: (I) => c(a, I),
       role: "gridcell",
-      "aria-label": y(s)
-    }, [])))]), Y = () => {
-      if (!g || !d) return null;
-      const o = {
-        ...d,
-        label: y(d)
+      "aria-label": b(a)
+    }, [])), B()]), B = () => {
+      if (!O || !y) return null;
+      const a = {
+        ...y,
+        label: b(y)
       };
-      return l("div", {
-        class: [e.element("tooltip"), e.is("visible")],
-        style: k,
+      return n("div", {
+        ref: M,
+        class: [t.element("tooltip"), t.is("visible")],
+        style: E,
         role: "tooltip"
-      }, [r.tooltip ? r.tooltip(o) : o.label]);
-    }, z = () => {
-      var o, u;
-      return this.showColorIndicator ? l("div", {
-        class: e.element("indicator")
-      }, [r.indicator ? r.indicator({
-        colors: L
-      }) : l(j, null, [l("span", {
-        class: e.element("indicator-leading")
-      }, [((o = r["indicator-leading-text"]) == null ? void 0 : o.call(r)) ?? w("heatmap.less")]), L.map((s, M) => l("span", {
-        key: M,
-        class: e.element("indicator-swatch"),
+      }, [i.tooltip ? i.tooltip(a) : a.label]);
+    }, g = () => {
+      var a, v;
+      return this.showColorIndicator ? n("div", {
+        class: t.element("indicator")
+      }, [i.indicator ? i.indicator({
+        colors: x
+      }) : n(ne, null, [n("span", {
+        class: t.element("indicator-leading")
+      }, [((a = i["indicator-leading-text"]) == null ? void 0 : a.call(i)) ?? w("heatmap.less")]), x.map((I, G) => n("span", {
+        key: G,
+        class: t.element("indicator-swatch"),
         style: {
-          backgroundColor: s
+          backgroundColor: I
         }
-      }, null)), l("span", {
-        class: e.element("indicator-trailing")
-      }, [((u = r["indicator-trailing-text"]) == null ? void 0 : u.call(r)) ?? w("heatmap.more")])])]) : null;
-    }, B = () => l("div", {
-      class: e.element("body")
-    }, [this.showWeekLabels && l("div", {
-      class: e.element("week-labels"),
-      style: h
-    }, [x.map((o, u) => l("span", {
-      key: u,
-      class: e.element("week-label"),
+      }, null)), n("span", {
+        class: t.element("indicator-trailing")
+      }, [((v = i["indicator-trailing-text"]) == null ? void 0 : v.call(i)) ?? w("heatmap.more")])])]) : null;
+    }, N = () => n("div", {
+      class: t.element("body")
+    }, [this.showWeekLabels && n("div", {
+      class: t.element("week-labels"),
+      style: C
+    }, [z.map((a, v) => n("span", {
+      key: v,
+      class: t.element("week-label"),
       style: {
-        visibility: u % 2 === 1 ? "visible" : "hidden"
+        visibility: v % 2 === 1 ? "visible" : "hidden"
       }
-    }, [o]))]), l("div", {
-      class: e.element("grid-wrapper")
-    }, [this.showMonthLabels && l("div", {
-      class: e.element("month-labels"),
-      style: h
-    }, [c.map((o) => l("span", {
-      key: o.text,
-      class: e.element("month-label"),
+    }, [a]))]), n("div", {
+      class: t.element("grid-wrapper")
+    }, [this.showMonthLabels && n("div", {
+      class: t.element("month-labels"),
+      style: C
+    }, [S.map((a) => n("span", {
+      key: a.text,
+      class: t.element("month-label"),
       style: {
-        gridColumn: o.colIndex + 1
+        gridColumn: a.colIndex + 1
       }
-    }, [o.text]))]), S()]), Y()]);
-    return l("div", {
-      class: [e.block, e.modifier(`size-${b}`)],
-      role: this.ariaLabel ? "img" : void 0,
-      "aria-label": this.ariaLabel
-    }, [l(H, f, {
-      default: () => [B(), z(), r.footer && l("div", {
-        class: e.element("footer")
-      }, [r.footer()])]
-    })]);
+    }, [a.text]))]), j()])]), T = s;
+    return n("div", {
+      class: [t.block, t.modifier(`size-${D}`)]
+    }, [n("div", {
+      role: !T && this.ariaLabel ? "img" : void 0,
+      "aria-label": T ? void 0 : this.ariaLabel
+    }, [n(ce, _, {
+      default: () => [N(), g(), i.footer && n("div", {
+        class: t.element("footer")
+      }, [i.footer()])]
+    })]), n("span", {
+      class: t.element("live"),
+      "aria-live": "polite"
+    }, [d])]);
   }
 });
 export {
-  ue as default
+  Ee as default
 };