x-next 1.7.0 → 1.8.0

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 ee, createVNode as n, useId as te, toRefs as le, computed as a, ref as Y, watch as ae, nextTick as ne, Fragment as oe } from "vue";
+import { getClassNameMixin as re } from "../../_utils/config.js";
+import { useSize as ie } from "../../_hooks/use-size.js";
+import { useLocale as se } from "../../locale/index.js";
+import { isObject as ue } from "../../_utils/is.js";
+import { throttleByRaf as ce } from "../../_utils/throttle-by-raf.js";
+import { Spin as de } from "../spin/index.js";
+import { getWeekdayLabels as me } from "../date-picker/utils.js";
+import { CELL_SIZE as U, resolveRange as ve, indexDataByDay as fe, getValueExtent as he, buildMatrix as pe, DEFAULT_COLOR_LEVELS as ye, getMonthLabels as ge, isCellInRequestedRange as xe } from "./helpers/matrix.js";
+const Z = 2, Ae = /* @__PURE__ */ ee({
   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,278 @@ 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: S
   }) {
     const {
-      t: v,
-      locale: O
-    } = V(), h = P("heatmap"), {
-      mergedSize: x
-    } = T($(e).size, {
+      t: g,
+      locale: z
+    } = se(), C = re("heatmap"), E = `x-heatmap-cell-${te()}`, {
+      mergedSize: A
+    } = ie(le(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({
+    }), d = a(() => U[A.value] ?? U.medium), p = a(() => {
+      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)"];
+    }), O = a(() => t.minimumColor ?? "var(--x-heatmap-color-empty)"), R = a(() => [O.value, ...p.value]), i = a(() => ve({
+      year: t.year,
+      startDate: t.startDate,
+      endDate: t.endDate,
+      data: t.data
+    }, t.firstDayOfWeek)), P = a(() => fe(t.data)), q = a(() => he(t.data)), m = a(() => i.value ? pe(i.value, P.value, q.value, p.value.length || ye) : []), F = a(() => {
+      const e = 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(() => {
+      return m.value.forEach((l) => {
+        e[l.rowIndex].push(l);
+      }), e;
+    }), V = a(() => me(t.firstDayOfWeek, z.value.datePicker)), _ = a(() => {
       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
+      const e = i.value.requestedStart.year() !== i.value.requestedEnd.year();
+      return ge(i.value, m.value, (l) => e ? l.format("YYYY-MM") : g("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
+    }), j = (e) => R.value[e.level] ?? O.value, $ = (e) => {
+      const l = e.date.format("YYYY-MM-DD"), o = e.value;
+      return o === null ? g("heatmap.noData", {
+        date: l
+      }) : g("heatmap.value", {
+        date: l,
+        value: o
       });
-    }, 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`
+    }, v = Y(null), L = a(() => t.tooltip !== !1), b = Y(null), s = {
+      tooltip: b
+    }, w = Y(0), M = a(() => v.value === null ? null : m.value[v.value] ?? null), k = a(() => m.value.reduce((e, l) => Math.max(e, l.colIndex + 1), 0)), G = a(() => {
+      const e = Z;
+      return k.value <= 0 ? 0 : k.value * d.value + (k.value - 1) * e;
+    }), B = a(() => {
+      const e = M.value;
+      if (!e) return {};
+      const l = Z, o = e.colIndex * (d.value + l) + d.value / 2, c = e.rowIndex * (d.value + l) + d.value, h = w.value / 2, f = G.value;
+      let K = o;
+      return h > 0 && f > 0 && (K = f >= w.value ? Math.min(Math.max(o, h), f - h) : f / 2), {
+        left: `${K}px`,
+        top: `${c + 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);
-    }, 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)`
+    });
+    ae(v, (e) => {
+      if (e === null) {
+        w.value = 0;
+        return;
+      }
+      ne(() => {
+        var o;
+        const l = ((o = b.value) == null ? void 0 : o.offsetWidth) ?? 0;
+        l !== w.value && (w.value = l);
+      });
+    });
+    const H = (e) => {
+      var c;
+      if (!L.value) return;
+      const l = e.target, o = (c = l == null ? void 0 : l.dataset) == null ? void 0 : c.index;
+      x.value = !1, v.value = o === void 0 ? null : Number(o);
+    }, N = () => {
+      v.value = null, x.value = !1;
+    }, x = Y(!1), T = (e, l = !1) => {
+      x.value = l, v.value = e;
+    }, W = (e) => {
+      if (!L.value || m.value.length === 0) return;
+      const l = m.value.length - 1, o = v.value;
+      let c = null;
+      if (e.key === "ArrowRight") c = Math.min(l, (o ?? -1) + 1);
+      else if (e.key === "ArrowLeft") c = Math.max(0, (o ?? l + 1) - 1);
+      else if (e.key === "ArrowDown") c = Math.min(l, (o ?? -7) + 7);
+      else if (e.key === "ArrowUp") c = Math.max(0, (o ?? 7) - 7);
+      else if (e.key === "Home") {
+        const h = o ?? 0, f = m.value[h];
+        c = f ? Math.max(0, h - f.rowIndex) : 0;
+      } else if (e.key === "End") {
+        const h = o ?? l, f = m.value[h];
+        c = f ? Math.min(l, h + (6 - f.rowIndex)) : l;
+      } else if (e.key === "Escape") {
+        N();
+        return;
+      }
+      c !== null && (e.preventDefault(), T(c, !0));
+    }, r = () => {
+      v.value === null && T(0, !0);
+    }, y = a(() => x.value && v.value !== null ? `${E}-${v.value}` : void 0), u = a(() => t.ariaLabel ?? g("heatmap.gridLabel")), I = a(() => {
+      const e = M.value;
+      return !x.value || !e ? "" : $(e);
+    }), J = (e, l) => {
+      D("cellClick", e, l);
+    }, Q = ce(H), X = a(() => ({
+      "--x-heatmap-cell-size": `${d.value}px`,
+      gridTemplateRows: `repeat(7, ${d.value}px)`
     }));
     return {
-      t: v,
-      className: h,
-      mergedSize: x,
-      cells: p,
-      rows: R,
+      t: g,
+      className: C,
+      mergedSize: A,
+      cells: m,
+      rows: F,
       range: i,
-      gridStyle: s,
-      weekdayLabels: N,
-      monthLabels: L,
-      activeCell: S,
-      tooltipEnabled: g,
-      tooltipStyle: Y,
-      cellColor: r,
-      cellLabel: w,
-      handleCellClick: o,
-      throttledMove: u,
-      clearActive: B,
-      isInRange: (t) => i.value ? ee(t, i.value.requestedStart, i.value.requestedEnd) : !0,
-      colorPalette: k,
-      slots: I
+      gridStyle: X,
+      weekdayLabels: V,
+      monthLabels: _,
+      activeCell: M,
+      tooltipEnabled: L,
+      tooltipStyle: B,
+      cellColor: j,
+      cellLabel: $,
+      handleCellClick: J,
+      throttledMove: Q,
+      clearActive: N,
+      handleKeydown: W,
+      handleGridFocus: r,
+      activeDescendant: y,
+      gridLabel: u,
+      cellIdPrefix: E,
+      liveText: I,
+      isInRange: (e) => i.value ? xe(e, i.value.requestedStart, i.value.requestedEnd) : !0,
+      colorPalette: R,
+      slots: S,
+      refs: s,
+      setTooltipElement: (e) => {
+        b.value = e;
+      }
     };
   },
   render() {
     const {
-      className: e,
-      mergedSize: b,
-      cells: I,
-      rows: v,
-      range: O,
-      gridStyle: h,
-      weekdayLabels: x,
-      monthLabels: c,
+      className: t,
+      mergedSize: D,
+      cells: S,
+      rows: g,
+      range: z,
+      gridStyle: C,
+      weekdayLabels: E,
+      monthLabels: A,
       activeCell: d,
-      tooltipEnabled: C,
-      tooltipStyle: k,
-      cellColor: i,
-      cellLabel: y,
-      handleCellClick: E,
-      throttledMove: p,
-      clearActive: R,
-      isInRange: N,
-      colorPalette: L,
-      slots: r,
-      t: w
+      tooltipEnabled: p,
+      tooltipStyle: O,
+      cellColor: R,
+      cellLabel: i,
+      handleCellClick: P,
+      throttledMove: q,
+      clearActive: m,
+      handleKeydown: F,
+      handleGridFocus: V,
+      activeDescendant: _,
+      gridLabel: j,
+      cellIdPrefix: $,
+      liveText: v,
+      isInRange: L,
+      colorPalette: b,
+      slots: s,
+      refs: w,
+      setTooltipElement: M,
+      t: k
     } = this;
-    if (!O) return null;
-    const f = _(this.loading) ? this.loading : {
+    if (!z) return null;
+    const G = ue(this.loading) ? this.loading : {
       loading: this.loading,
       dot: "color"
-    }, g = C && d !== null, S = () => l("div", {
-      class: e.element("grid"),
+    }, B = p && d !== null, H = () => 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: p ? "grid" : void 0,
+      tabindex: p ? 0 : void 0,
+      "aria-activedescendant": _,
+      "aria-label": p ? j : void 0,
+      onMousemove: q,
+      onMouseleave: m,
+      onFocus: V,
+      onBlur: m,
+      onKeydown: F
+    }, [g.map((r, y) => r.map((u) => n("div", {
+      key: u.timestamp,
+      id: `${$}-${S.indexOf(u)}`,
+      class: [t.element("cell"), t.modifier(`level-${u.level}`), {
+        [t.is("out-of-range")]: !L(u)
       }],
       style: {
-        backgroundColor: i(s)
+        backgroundColor: R(u)
       },
-      "data-index": I.indexOf(s),
-      title: g ? void 0 : y(s),
-      onClick: (M) => E(s, M),
+      "data-index": S.indexOf(u),
+      title: B ? void 0 : i(u),
+      onClick: (I) => P(u, I),
       role: "gridcell",
-      "aria-label": y(s)
-    }, [])))]), Y = () => {
-      if (!g || !d) return null;
-      const o = {
+      "aria-label": i(u)
+    }, []))), N()]), N = () => {
+      if (!B || !d) return null;
+      const r = {
         ...d,
-        label: y(d)
+        label: i(d)
       };
-      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: O,
         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"),
+      }, [s.tooltip ? s.tooltip(r) : r.label]);
+    }, x = () => {
+      var r, y;
+      return this.showColorIndicator ? n("div", {
+        class: t.element("indicator")
+      }, [s.indicator ? s.indicator({
+        colors: b
+      }) : n(oe, null, [n("span", {
+        class: t.element("indicator-leading")
+      }, [((r = s["indicator-leading-text"]) == null ? void 0 : r.call(s)) ?? k("heatmap.less")]), b.map((u, I) => n("span", {
+        key: I,
+        class: t.element("indicator-swatch"),
         style: {
-          backgroundColor: s
+          backgroundColor: u
         }
-      }, 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")
+      }, [((y = s["indicator-trailing-text"]) == null ? void 0 : y.call(s)) ?? k("heatmap.more")])])]) : null;
+    }, T = () => n("div", {
+      class: t.element("body")
+    }, [this.showWeekLabels && n("div", {
+      class: t.element("week-labels"),
+      style: C
+    }, [E.map((r, y) => n("span", {
+      key: y,
+      class: t.element("week-label"),
       style: {
-        visibility: u % 2 === 1 ? "visible" : "hidden"
+        visibility: y % 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"),
+    }, [r]))]), n("div", {
+      class: t.element("grid-wrapper")
+    }, [this.showMonthLabels && n("div", {
+      class: t.element("month-labels"),
+      style: C
+    }, [A.map((r) => n("span", {
+      key: r.text,
+      class: t.element("month-label"),
       style: {
-        gridColumn: o.colIndex + 1
+        gridColumn: r.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()])]
-    })]);
+    }, [r.text]))]), H()])]), W = p;
+    return n("div", {
+      class: [t.block, t.modifier(`size-${D}`)]
+    }, [n("div", {
+      role: !W && this.ariaLabel ? "img" : void 0,
+      "aria-label": W ? void 0 : this.ariaLabel
+    }, [n(de, G, {
+      default: () => [T(), x(), s.footer && n("div", {
+        class: t.element("footer")
+      }, [s.footer()])]
+    })]), n("span", {
+      class: t.element("live"),
+      "aria-live": "polite"
+    }, [v])]);
   }
 });
 export {
-  ue as default
+  Ae as default
 };