x-next 1.8.4 → 1.10.0

package/dist/es/_styles/palette-aliases.js

@@ -248,7 +248,36 @@ const r = {
     "--x-notification-color-accent-warning": "var(--x-color-warning-solid)",
     "--x-notification-color-icon-bg-warning": "var(--x-color-warning-subtle)"
   }
+}, o = {
+  primary: {
+    "--x-color-primary-button-text": "var(--x-color-primary-7)",
+    "--x-color-primary-text": "var(--x-color-primary-7)",
+    "--x-heatmap-color-level-1": "var(--x-color-primary-3)",
+    "--x-heatmap-color-level-2": "var(--x-color-primary-4)",
+    "--x-heatmap-color-level-3": "var(--x-color-primary-5)",
+    "--x-heatmap-color-level-4": "var(--x-color-primary-6)",
+    "--x-heatmap-color-level-5": "var(--x-color-primary-7)",
+    "--x-tag-color-better-blue-bg": "rgb(28 47 89)",
+    "--x-tag-color-better-blue-border-hover": "rgb(37 59 109)"
+  },
+  success: {
+    "--x-color-success-button-text": "var(--x-color-success-7)",
+    "--x-color-success-text": "var(--x-color-success-7)"
+  },
+  danger: {
+    "--x-color-danger-button-text": "var(--x-color-danger-8)",
+    "--x-color-danger-text": "var(--x-color-danger-8)"
+  },
+  strong: {
+    "--x-color-strong-button-text": "var(--x-color-strong-7)",
+    "--x-color-strong-text": "var(--x-color-strong-7)"
+  },
+  warning: {
+    "--x-color-warning-button-text": "var(--x-color-warning-7)",
+    "--x-color-warning-text": "var(--x-color-warning-7)"
+  }
 };
 export {
-  r as PALETTE_ALIASES
+  r as PALETTE_ALIASES,
+  o as PALETTE_ALIASES_DARK
 };

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/_utils/palette.js

@@ -1,63 +1,65 @@
-import { PALETTE_ALIASES as g } from "../_styles/palette-aliases.js";
-const x = 2.05, d = 95.5, p = 22, b = [1, 0.8, 0.6, 0.4, 0.2], y = [1 / 3, 2 / 3, 1], E = 90, _ = 300, m = (s, i, a) => Math.min(a, Math.max(i, s)), A = (s) => {
+import { PALETTE_ALIASES as g, PALETTE_ALIASES_DARK as E } from "../_styles/palette-aliases.js";
+const x = 2.05, d = 95.5, p = 22, A = [1, 0.8, 0.6, 0.4, 0.2], _ = [1 / 3, 2 / 3, 1], b = 90, y = 300, m = (s, a, i) => Math.min(i, Math.max(a, s)), $ = (s) => {
   if (typeof s != "string") return null;
-  const i = s.trim();
-  if (i.startsWith("#")) {
-    const t = i.slice(1);
+  const a = s.trim();
+  if (a.startsWith("#")) {
+    const t = a.slice(1);
     if (!/^(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)) return null;
     const c = t.length === 3 ? [...t].map((h) => h + h).join("") : t.length === 6 || t.length === 8 ? t.slice(0, 6) : null;
     return c ? [0, 2, 4].map((h) => parseInt(c.slice(h, h + 2), 16)) : null;
   }
-  const a = i.match(/^rgba?\(([^)]+)\)$/i);
-  if (!a) return null;
-  const o = a[1].trim(), r = o.includes(",") ? o.split(",").map((t) => t.trim()) : o.split(/\s*\/\s*/)[0].split(/\s+/), e = o.includes(",") ? r[3] : o.includes("/") ? o.split("/")[1].trim() : void 0;
+  const i = a.match(/^rgba?\(([^)]+)\)$/i);
+  if (!i) return null;
+  const o = i[1].trim(), r = o.includes(",") ? o.split(",").map((t) => t.trim()) : o.split(/\s*\/\s*/)[0].split(/\s+/), e = o.includes(",") ? r[3] : o.includes("/") ? o.split("/")[1].trim() : void 0;
   if (o.split("/").length > 2 || r.length < 3 || r.length > (o.includes(",") ? 4 : 3)) return null;
   const n = /^[+-]?(?:\d+\.?\d*|\.\d+)%?$/;
   if (r.slice(0, 3).some((t) => !n.test(t)) || e !== void 0 && !n.test(e)) return null;
   const l = r.slice(0, 3).map((t) => t.endsWith("%") ? Math.round(parseFloat(t) / 100 * 255) : Number(t));
   return l.some((t) => !Number.isFinite(t)) ? null : l.map((t) => m(Math.round(t), 0, 255));
-}, $ = ([s, i, a]) => {
-  const o = s / 255, r = i / 255, e = a / 255, n = Math.max(o, r, e), l = Math.min(o, r, e), t = n - l, c = (n + l) / 2;
+}, H = ([s, a, i]) => {
+  const o = s / 255, r = a / 255, e = i / 255, n = Math.max(o, r, e), l = Math.min(o, r, e), t = n - l, c = (n + l) / 2;
   let h = 0, u = 0;
   return t !== 0 && (u = c > 0.5 ? t / (2 - n - l) : t / (n + l), n === o ? h = (r - e) / t + (r < e ? 6 : 0) : n === r ? h = (e - o) / t + 2 : h = (o - r) / t + 4, h *= 60), { h, s: u * 100, l: c * 100 };
-}, H = ({ h: s, s: i, l: a }) => {
-  const o = m(i, 0, 100) / 100, r = m(a, 0, 100) / 100, e = (s % 360 + 360) % 360, n = (1 - Math.abs(2 * r - 1)) * o, l = n * (1 - Math.abs(e / 60 % 2 - 1)), t = r - n / 2;
+}, S = ({ h: s, s: a, l: i }) => {
+  const o = m(a, 0, 100) / 100, r = m(i, 0, 100) / 100, e = (s % 360 + 360) % 360, n = (1 - Math.abs(2 * r - 1)) * o, l = n * (1 - Math.abs(e / 60 % 2 - 1)), t = r - n / 2;
   let c;
   return e < 60 ? c = [n, l, 0] : e < 120 ? c = [l, n, 0] : e < 180 ? c = [0, n, l] : e < 240 ? c = [0, l, n] : e < 300 ? c = [l, 0, n] : c = [n, 0, l], c.map((h) => m(Math.round((h + t) * 255), 0, 255));
-}, P = (s) => `#${s.map((i) => m(Math.round(i), 0, 255).toString(16).padStart(2, "0")).join("")}`, S = (s) => s <= E || s >= _ ? 1 : -1, I = (s, i = {}) => {
-  const a = A(s);
-  if (!a)
+}, P = (s) => `#${s.map((a) => m(Math.round(a), 0, 255).toString(16).padStart(2, "0")).join("")}`, I = (s) => s <= b || s >= y ? 1 : -1, L = (s, a = {}) => {
+  const i = $(s);
+  if (!i)
     throw new Error(`[x-next] generatePalette: 无法解析种子色 "${s}"`);
-  const { h: o, s: r, l: e } = $(a), n = S(o), { dark: l = !1 } = i, t = l ? Math.min(p, e) : Math.max(d, e), c = l ? Math.max(d, e) : Math.min(p, e), h = [];
+  const { h: o, s: r, l: e } = H(i), n = I(o), { dark: l = !1 } = a, t = l ? Math.min(p, e) : Math.max(d, e), c = l ? Math.max(d, e) : Math.min(p, e), h = [];
   for (let u = 0; u < 9; u += 1) {
     let f;
-    u < 5 ? f = e + (t - e) * b[u] : u === 5 ? f = e : f = e + (c - e) * y[u - 6];
-    const M = 5 - u, T = n * x * M * (l ? -1 : 1);
-    h.push(P(H({ h: o + T, s: r, l: m(f, 0, 100) })));
+    u < 5 ? f = e + (t - e) * A[u] : u === 5 ? f = e : f = e + (c - e) * _[u - 6];
+    const T = 5 - u, M = n * x * T * (l ? -1 : 1);
+    h.push(P(S({ h: o + M, s: r, l: m(f, 0, 100) })));
   }
   return h;
-}, G = (s, i = {}) => {
-  const { name: a = "primary", target: o, dark: r } = i, e = I(s, { dark: r }), n = o ?? (typeof document < "u" ? document.documentElement : null);
+}, G = (s, a = {}) => {
+  const { name: i = "primary", target: o, dark: r } = a, e = L(s, { dark: r }), n = o ?? (typeof document < "u" ? document.documentElement : null);
   if (n) {
-    n.style.setProperty(`--x-color-${a}`, e[5]), e.forEach((t, c) => {
-      n.style.setProperty(`--x-color-${a}-${c + 1}`, t);
+    n.style.setProperty(`--x-color-${i}`, e[5]), e.forEach((t, c) => {
+      n.style.setProperty(`--x-color-${i}-${c + 1}`, t);
     });
-    const l = g[a];
-    if (l)
-      for (const [t, c] of Object.entries(l))
-        n.style.setProperty(t, c);
+    const l = g[i];
+    if (l) {
+      const t = r ? E[i] : void 0;
+      for (const [c, h] of Object.entries(l))
+        n.style.setProperty(c, (t == null ? void 0 : t[c]) ?? h);
+    }
   }
   return e;
-}, L = (s = "primary") => {
-  const i = [`--x-color-${s}`, ...Array.from({ length: 9 }, (o, r) => `--x-color-${s}-${r + 1}`)], a = g[s];
-  return a ? [...i, ...Object.keys(a)] : i;
+}, W = (s = "primary") => {
+  const a = [`--x-color-${s}`, ...Array.from({ length: 9 }, (o, r) => `--x-color-${s}-${r + 1}`)], i = g[s];
+  return i ? [...a, ...Object.keys(i)] : a;
 };
 export {
   G as applyThemeColor,
-  I as generatePalette,
-  L as getThemeColorProperties,
-  H as hslToRgb,
-  A as parseColor,
-  $ as rgbToHsl,
+  L as generatePalette,
+  W as getThemeColorProperties,
+  S as hslToRgb,
+  $ as parseColor,
+  H as rgbToHsl,
   P as toHex
 };

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
       }]]);
     };