x-next 1.9.0 → 1.10.0

package/dist/es/_utils/chart/scale.js

@@ -1,77 +1,82 @@
-const h = (t) => Number(t.toPrecision(12)), g = (t) => Number(t.toFixed(4)), f = (t) => Math.max(2, Math.floor(t)), p = (t) => {
+const a = (t) => Number(t.toPrecision(12)), g = (t) => Number(t.toFixed(4)), f = (t) => Math.max(2, Math.floor(t)), F = (t) => {
   if (!Number.isFinite(t) || t <= 0) return 0;
-  const e = 10 ** Math.floor(Math.log10(t)), i = t / e;
-  return e * (i <= 1 ? 1 : i <= 2 ? 2 : i <= 5 ? 5 : 10);
-}, x = (t, e = 4) => {
+  const n = 10 ** Math.floor(Math.log10(t)), e = t / n;
+  return n * (e <= 1 ? 1 : e <= 2 ? 2 : e <= 5 ? 5 : 10);
+}, x = (t, n = 4) => {
   if (!Number.isFinite(t) || t <= 0)
     return { max: 0, ticks: [0] };
-  const i = f(e) - 1, s = p(t / i), r = h(Math.ceil(t / s) * s), n = Math.round(r / s);
+  const e = f(n) - 1, s = F(t / e), r = a(Math.ceil(t / s) * s), i = Math.round(r / s);
   return {
     max: r,
-    ticks: Array.from({ length: n + 1 }, (o, c) => h(s * c))
+    ticks: Array.from({ length: i + 1 }, (o, c) => a(s * c))
   };
-}, M = (t, e = 4, i) => {
-  const s = f(e);
-  if (Number.isFinite(i) && i > 0) {
-    const r = i, n = s - 1;
+}, d = (t, n = 4, e) => {
+  const s = f(n);
+  if (Number.isFinite(e) && e > 0) {
+    const r = e, i = s - 1;
     return {
       max: r,
       ticks: Array.from(
-        { length: n + 1 },
-        (o, c) => g(r / n * c)
+        { length: i + 1 },
+        (o, c) => g(r / i * c)
       )
     };
   }
   return x(t, s);
-}, d = (t, e, i = 4) => {
-  const s = Number.isFinite(t) ? t : 0, r = Number.isFinite(e) ? e : 0, n = Math.min(0, s), o = Math.max(0, r);
-  if (n === 0 && o === 0)
+}, M = (t, n, e = 4) => {
+  const s = Number.isFinite(t) ? t : 0, r = Number.isFinite(n) ? n : 0, i = Math.min(0, s), o = Math.max(0, r);
+  if (i === 0 && o === 0)
     return { min: 0, max: 0, ticks: [0] };
-  const c = f(i) - 1, u = p((o - n) / c), l = h(Math.floor(n / u) * u), m = h(Math.ceil(o / u) * u), a = Math.round((m - l) / u);
+  const c = f(e) - 1, u = F((o - i) / c), h = a(Math.floor(i / u) * u), m = a(Math.ceil(o / u) * u), l = Math.round((m - h) / u);
   return {
-    min: l,
+    min: h,
     max: m,
-    ticks: Array.from({ length: a + 1 }, (N, b) => h(l + u * b))
+    ticks: Array.from({ length: l + 1 }, (N, b) => a(h + u * b))
   };
-}, A = (t, e, i = 4, s, r) => {
-  const n = f(i), o = Number.isFinite(s), c = Number.isFinite(r);
+}, A = (t, n, e = 4, s, r) => {
+  const i = f(e), o = Number.isFinite(s), c = Number.isFinite(r);
   if (!o && !c)
-    return d(t, e, n);
-  const u = Math.min(0, Number.isFinite(t) ? t : 0), l = Math.max(0, Number.isFinite(e) ? e : 0);
-  let m = o ? s : u, a = c ? r : l;
-  m > a && ([m, a] = [a, m]);
-  const N = n - 1;
+    return M(t, n, i);
+  const u = Math.min(0, Number.isFinite(t) ? t : 0), h = Math.max(0, Number.isFinite(n) ? n : 0);
+  let m = o ? s : u, l = c ? r : h;
+  m > l && ([m, l] = [l, m]);
+  const N = i - 1;
   return {
     min: m,
-    max: a,
+    max: l,
     ticks: Array.from(
       { length: N + 1 },
-      (b, F) => g(m + (a - m) / N * F)
+      (b, p) => g(m + (l - m) / N * p)
     )
   };
 }, k = (t) => {
   if (!Number.isFinite(t)) return "";
-  const e = Number(Number(t.toPrecision(12)).toFixed(4)), [i, s] = String(Math.abs(e)).split("."), r = i.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  return `${e < 0 ? "-" : ""}${r}${s ? `.${s}` : ""}`;
-}, y = (t, e) => {
-  let i = 0;
+  const n = Number(Number(t.toPrecision(12)).toFixed(4)), [e, s] = String(Math.abs(n)).split("."), r = e.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return `${n < 0 ? "-" : ""}${r}${s ? `.${s}` : ""}`;
+}, y = (t, n) => {
+  let e = 0;
   for (const s of t)
-    i += s.charCodeAt(0) > 255 ? 1 : 0.6;
-  return i * e;
-}, S = (t, e, i, s = 8) => {
+    e += s.charCodeAt(0) > 255 ? 1 : 0.6;
+  return e * n;
+}, S = (t, n, e, s = 8) => {
   if (t <= 0) return [];
-  const r = Math.max(1, Math.ceil((i + s) / Math.max(e, 1))), n = [];
+  const r = Math.max(1, Math.ceil((e + s) / Math.max(n, 1))), i = [];
   for (let c = 0; c < t; c += r)
-    n.push(c);
+    i.push(c);
   const o = t - 1;
-  return n[n.length - 1] !== o && (n.length > 1 && o - n[n.length - 1] < r * 0.6 && n.pop(), n.push(o)), n;
+  if (i[i.length - 1] !== o) {
+    for (; i.length && (o - i[i.length - 1]) * n < e + s; )
+      i.pop();
+    i.push(o);
+  }
+  return i;
 };
 export {
   k as defaultValueFormatter,
   y as estimateTextWidth,
   A as getDomain,
-  d as getNiceDomain,
+  M as getNiceDomain,
   x as getNiceScale,
-  M as getScale,
+  d as getScale,
   S as pickLabelIndices
 };

package/dist/es/components/_components/chart/ChartAxis.js

@@ -1,6 +1,8 @@
-import { defineComponent as s, createVNode as a } from "vue";
-import { getClassNameMixin as i } from "../../../_utils/config.js";
-const y = 6, x = 8, c = /* @__PURE__ */ s({
+import { defineComponent as x, ref as u, computed as h, onMounted as b, watchPostEffect as g, onBeforeUnmount as L, createVNode as n } from "vue";
+import { getClassNameMixin as S } from "../../../_utils/config.js";
+import { layoutAxisLabels as v } from "./axis-labels.js";
+import { estimateTextWidth as z } from "../../../_utils/chart/scale.js";
+const A = 6, w = 8, N = /* @__PURE__ */ x({
   name: "ChartAxis",
   props: {
     plot: {
@@ -36,44 +38,67 @@ const y = 6, x = 8, c = /* @__PURE__ */ s({
       default: !0
     }
   },
-  setup(e) {
-    const l = i("chart"), o = () => ({
-      fontSize: `${e.fontSize}px`,
-      fill: e.color
-    });
-    return () => a("g", null, [e.showHorizontalLines && a("g", {
-      class: l.element("grid")
-    }, [e.ticks.map((t, n) => a("line", {
-      key: n,
-      class: [l.element("grid-line"), {
-        [l.is("baseline")]: t.isBaseline
+  setup(t) {
+    const o = S("chart"), f = () => ({
+      fontSize: `${t.fontSize}px`,
+      fill: t.color
+    }), s = u(), d = u(), m = (e) => v(t.xLabels, t.plot.left, t.plot.right, t.fontSize * 0.6, e), y = h(() => d.value ?? m((e) => z(e, t.fontSize)));
+    let i = null, c = !0;
+    const a = () => {
+      if (!c || !s.value) return;
+      const e = getComputedStyle(s.value);
+      if (i) {
+        i.font = `${e.fontStyle} ${e.fontWeight} ${t.fontSize}px ${e.fontFamily}`;
+        const l = Number.parseFloat(e.letterSpacing) || 0;
+        d.value = m((r) => i.measureText(r).width + Math.max(0, Array.from(r).length - 1) * l);
+      }
+    };
+    return b(() => {
+      var e, l;
+      i = document.createElement("canvas").getContext("2d"), a(), (e = document.fonts) == null || e.addEventListener("loadingdone", a), (l = document.fonts) == null || l.ready.then(a);
+    }), g(() => {
+      t.xLabels, t.plot, t.fontSize, a();
+    }), L(() => {
+      var e;
+      c = !1, (e = document.fonts) == null || e.removeEventListener("loadingdone", a);
+    }), () => n("g", {
+      ref: s,
+      style: {
+        fontSize: `${t.fontSize}px`
+      }
+    }, [t.showHorizontalLines && n("g", {
+      class: o.element("grid")
+    }, [t.ticks.map((e, l) => n("line", {
+      key: l,
+      class: [o.element("grid-line"), {
+        [o.is("baseline")]: e.isBaseline
       }],
-      x1: e.plot.left,
-      x2: e.plot.left + e.plot.width,
-      y1: t.y,
-      y2: t.y
-    }, null))]), e.showY && a("g", {
-      class: l.element("y-labels")
-    }, [e.ticks.map((t, n) => a("text", {
-      key: n,
-      class: l.element("axis-label"),
-      x: e.plot.left - y,
-      y: t.y,
+      x1: t.plot.left,
+      x2: t.plot.left + t.plot.width,
+      y1: e.y,
+      y2: e.y
+    }, null))]), t.showY && n("g", {
+      class: o.element("y-labels")
+    }, [t.ticks.map((e, l) => n("text", {
+      key: l,
+      class: o.element("axis-label"),
+      x: t.plot.left - A,
+      y: e.y,
       "text-anchor": "end",
       "dominant-baseline": "middle",
-      style: o()
-    }, [t.label]))]), e.showX && a("g", {
-      class: l.element("x-labels")
-    }, [e.xLabels.map((t, n) => a("text", {
-      key: n,
-      class: l.element("axis-label"),
-      x: t.x,
-      y: e.plot.bottom + x + e.fontSize * 0.9,
+      style: f()
+    }, [e.label]))]), t.showX && n("g", {
+      class: o.element("x-labels")
+    }, [y.value.map((e, l) => n("text", {
+      key: l,
+      class: o.element("axis-label"),
+      x: e.x,
+      y: t.plot.bottom + w + t.fontSize * 0.9,
       "text-anchor": "middle",
-      style: o()
-    }, [t.text]))])]);
+      style: f()
+    }, [e.text, e.title && n("title", null, [e.title])]))])]);
   }
 });
 export {
-  c as default
+  N as default
 };

package/dist/es/components/_components/chart/axis-labels.js

@@ -0,0 +1,26 @@
+const M = (h, f, d, u, i) => {
+  const n = Math.max(0, d - f);
+  if (n <= 0) return [];
+  const m = [];
+  let I = Number.POSITIVE_INFINITY;
+  for (let c = h.length - 1; c >= 0; c--) {
+    const l = h[c];
+    let e = l.text, t = i(e);
+    if (t > n) {
+      if (i("…") > n) continue;
+      const a = Array.from(e);
+      let o = 0, s = a.length;
+      for (; o < s; ) {
+        const r = Math.ceil((o + s) / 2);
+        i(`${a.slice(0, r).join("")}…`) <= n ? o = r : s = r - 1;
+      }
+      e = `${a.slice(0, o).join("")}…`, t = i(e);
+    }
+    const x = Math.max(f + t / 2, Math.min(l.x, d - t / 2));
+    x + t / 2 + u > I || (m.push({ x, text: e, width: t, ...e !== l.text ? { title: l.text } : {} }), I = x - t / 2);
+  }
+  return m.reverse();
+};
+export {
+  M as layoutAxisLabels
+};

package/dist/es/components/button/Button.js

@@ -1,5 +1,5 @@
-import { defineComponent as O, getCurrentInstance as P, inject as p, reactive as x, computed as c, withDirectives as T, createVNode as o, resolveDirective as F } from "vue";
-import { getClassNameMixin as L } from "../../_utils/config.js";
+import { defineComponent as O, getCurrentInstance as P, inject as x, reactive as F, computed as t, withDirectives as T, createVNode as u, resolveDirective as L } from "vue";
+import { getClassNameMixin as p } from "../../_utils/config.js";
 import { buttonProps as A } from "./props.js";
 import B from "../../icons/animation/animation-loading.js";
 import I from "../../directives/wave.js";
@@ -18,51 +18,51 @@ const H = /* @__PURE__ */ O({
     slots: l,
     emit: h
   }) {
-    const f = P(), a = p(K, void 0), {
+    const s = P(), a = x(K, void 0), {
       mergedSize: k
     } = N(void 0, {
       defaultValue: "medium"
-    }), r = x({
+    }), r = F({
       clicked: !1,
       isDebounce: !1
-    }), i = L("button"), w = (n) => n.replace(/[A-Z]/g, (d) => `-${d.toLowerCase()}`), u = (n) => {
-      const d = (f == null ? void 0 : f.vnode.props) ?? {};
+    }), i = p("button"), w = (n) => n.replace(/[A-Z]/g, (d) => `-${d.toLowerCase()}`), o = (n) => {
+      const d = (s == null ? void 0 : s.vnode.props) ?? {};
       return Object.prototype.hasOwnProperty.call(d, n) || Object.prototype.hasOwnProperty.call(d, w(n));
-    }, s = c(() => u("type") ? e.type : (a == null ? void 0 : a.type) ?? e.type), v = c(() => u("size") ? e.size : (a == null ? void 0 : a.size) ?? k.value), b = c(() => u("status") ? e.status : (a == null ? void 0 : a.status) ?? e.status), g = c(() => u("shape") ? e.shape : (a == null ? void 0 : a.shape) ?? e.shape), m = c(() => u("disabled") ? e.disabled : (a == null ? void 0 : a.disabled) ?? e.disabled), D = c(() => [i.block, s.value && s.value !== "default" && i.modifier(s.value), v.value && i.modifier(v.value), b.value && i.modifier(b.value), m.value && i.is("disabled"), e.block && i.modifier("block"), e.plain && i.modifier("plain"), g.value && i.modifier(g.value), e.link && i.modifier("link"), !e.border && i.modifier("hide-border"), t.value && i.modifier("loading"), e.loadingFill && i.modifier("loading-fill"), e.narrow && i.modifier("narrow")]), z = () => {
+    }, m = t(() => o("type") ? e.type : (a == null ? void 0 : a.type) ?? e.type), v = t(() => o("size") ? e.size : (a == null ? void 0 : a.size) ?? k.value), b = t(() => o("status") ? e.status : (a == null ? void 0 : a.status) ?? e.status), g = t(() => o("shape") ? e.shape : (a == null ? void 0 : a.shape) ?? e.shape), f = t(() => o("disabled") ? e.disabled : (a == null ? void 0 : a.disabled) ?? e.disabled), D = t(() => [i.block, m.value && m.value !== "default" && i.modifier(m.value), v.value && i.modifier(v.value), b.value && i.modifier(b.value), f.value && i.is("disabled"), e.block && i.modifier("block"), e.plain && i.modifier("plain"), g.value && i.modifier(g.value), e.link && i.modifier("link"), !e.border && i.modifier("hide-border"), c.value && i.modifier("loading"), e.loadingFill && i.modifier("loading-fill"), e.narrow && i.modifier("narrow")]), z = () => {
       e.debounce > 0 && !r.isDebounce && (r.isDebounce = !0, setTimeout(() => {
         r.isDebounce = !1;
       }, e.debounce));
-    }, t = c(() => e.loading || r.clicked || r.isDebounce), S = c(() => m.value || t.value || e.link || s.value === "text"), j = (n) => {
+    }, c = t(() => e.loading || r.clicked || r.isDebounce), S = t(() => f.value || c.value || e.link || m.value === "text"), j = (n) => {
       var d;
-      n.detail > 0 && ((d = n.currentTarget) == null || d.blur()), !(m.value || t.value) && (z(), h("click", n));
+      n.detail > 0 && ((d = n.currentTarget) == null || d.blur()), !(f.value || c.value) && (z(), h("click", n));
     };
     return () => {
       var n, d, y;
-      return T(o("button", {
+      return T(u("button", {
         class: D.value,
         type: e.htmlType,
-        disabled: m.value || t.value,
-        "aria-busy": t.value || void 0,
+        disabled: f.value || c.value,
+        "aria-busy": c.value || void 0,
         onClick: j
-      }, [o("span", {
+      }, [u("span", {
         class: i.element("loading"),
+        "aria-hidden": "true",
         style: {
           display: "flex",
-          opacity: t.value ? 1 : 0,
-          width: t.value ? "auto" : 0,
-          marginRight: t.value && !e.loadingFill ? "4px" : "0",
-          overflow: "hidden",
-          transition: "all 0.3s ease"
+          opacity: c.value ? 1 : 0,
+          width: c.value ? e.loadingFill ? "100%" : "1em" : 0,
+          marginRight: c.value && !e.loadingFill ? "4px" : "0",
+          overflow: "hidden"
         }
-      }, [o(B, null, null)]), !!l.prefix && o("span", {
+      }, [c.value && u(B, null, null)]), !!l.prefix && u("span", {
         class: i.element("prefix")
-      }, [(n = l.prefix) == null ? void 0 : n.call(l)]), l.icon && o("span", {
+      }, [(n = l.prefix) == null ? void 0 : n.call(l)]), l.icon && u("span", {
         class: i.element("prefix")
-      }, [(d = l.icon) == null ? void 0 : d.call(l)]), o("span", {
+      }, [(d = l.icon) == null ? void 0 : d.call(l)]), u("span", {
         class: i.element("content")
-      }, [(y = l.default) == null ? void 0 : y.call(l)]), l.suffix && o("span", {
+      }, [(y = l.default) == null ? void 0 : y.call(l)]), l.suffix && u("span", {
         class: i.element("suffix")
-      }, [l.suffix()])]), [[F("wave"), {
+      }, [l.suffix()])]), [[L("wave"), {
         disabled: S.value
       }]]);
     };