vlite3 1.4.25 → 1.4.26

package/components/Chart/PieChart.vue.js

@@ -1,9 +1,10 @@
-import { defineComponent as se, ref as E, onMounted as ie, watch as ue, onUnmounted as re, computed as f, openBlock as s, createElementBlock as i, normalizeClass as Z, createElementVNode as u, unref as M, Fragment as p, renderList as $, createCommentVNode as h, toDisplayString as d, renderSlot as de, normalizeStyle as I, createBlock as ce, Teleport as ve, createTextVNode as fe } from "vue";
-import { CHART_COLORS as he, getColor as _, arcPath as me, formatNumber as z, animateProgress as xe } from "./utils.js";
-const ye = { class: "shrink-0" }, ge = ["width", "height"], be = ["id"], Me = ["filter"], ke = ["d", "fill", "transform", "onMouseenter"], we = {
+import { defineComponent as re, ref as B, onMounted as ue, watch as de, onUnmounted as ce, computed as d, openBlock as i, createElementBlock as s, normalizeClass as W, createElementVNode as u, unref as T, Fragment as D, renderList as N, createCommentVNode as f, toDisplayString as x, renderSlot as ve, createBlock as Z, Teleport as fe, normalizeStyle as _, createTextVNode as he } from "vue";
+import { CHART_COLORS as me, getColor as ge, arcPath as xe, formatNumber as E, animateProgress as ye } from "./utils.js";
+import be from "./ChartLegend.vue.js";
+const Me = ["width", "height"], ke = ["id"], we = ["filter"], pe = ["d", "fill", "transform", "opacity", "onMouseenter"], $e = {
   key: 0,
   style: { "pointer-events": "none" }
-}, pe = ["d", "opacity"], $e = ["x", "y", "text-anchor", "font-size", "font-weight", "fill", "opacity"], ze = { key: 2 }, Le = ["x", "y"], Ae = ["x", "y"], Pe = ["onMouseenter"], Ce = { class: "min-w-0" }, Re = { class: "text-xs font-medium text-foreground truncate" }, Se = { class: "text-[10px] text-muted-foreground" }, Be = { class: "flex items-center gap-1.5 mb-1" }, Ve = { class: "text-xs font-semibold" }, Te = { class: "text-xs text-muted-foreground" }, De = { class: "font-medium text-foreground ml-1" }, Oe = /* @__PURE__ */ se({
+}, Le = ["d", "opacity"], ze = ["x", "y", "text-anchor", "font-size", "font-weight", "fill", "opacity"], Pe = { key: 2 }, Ae = ["x", "y"], Ve = ["x", "y"], Ce = { class: "flex items-center gap-1.5 mb-1" }, Re = { class: "text-xs font-semibold" }, Se = { class: "text-xs text-muted-foreground" }, Be = { class: "font-medium text-foreground ml-1" }, He = /* @__PURE__ */ re({
   __name: "PieChart",
   props: {
     data: {},
@@ -13,59 +14,72 @@ const ye = { class: "shrink-0" }, ge = ["width", "height"], be = ["id"], Me = ["
     startAngle: { default: -90 },
     showLegend: { type: Boolean, default: !0 },
     legendPosition: { default: "right" },
+    legendsVariant: { default: "default" },
     labelMode: { default: "percent" },
-    colors: { default: () => he },
+    colors: { default: () => me },
     animate: { type: Boolean, default: !0 },
     showTooltip: { type: Boolean, default: !0 },
     centerLabel: {},
     centerValue: {}
   },
   setup(e) {
-    const o = e, O = Math.random().toString(36).slice(2, 7), L = E(o.animate ? 0 : 1);
-    let A = null;
-    function j() {
-      A?.(), L.value = 0, A = xe(1e3, (a) => L.value = a);
+    const t = e, H = Math.random().toString(36).slice(2, 7), w = B(t.animate ? 0 : 1);
+    let p = null;
+    function I() {
+      p?.(), w.value = 0, p = ye(1e3, (l) => w.value = l);
     }
-    ie(() => {
-      o.animate && j();
-    }), ue(() => o.data, () => {
-      o.animate && j();
-    }, { deep: !0 }), re(() => A?.());
-    const X = f(() => o.labelMode === "outside"), m = f(() => o.size / 2), v = f(() => o.size / 2), x = f(() => o.size / 2 - (X.value ? 36 : 4)), Y = f(() => o.donut ? x.value * (o.innerRadius / 100) : 0), P = f(() => o.data.reduce((a, n) => a + n.value, 0) || 1), k = f(() => {
-      let a = o.startAngle;
-      return o.data.map((n, t) => {
-        const l = n.value / P.value, c = l * 360 * L.value, C = n.color ?? _(o.colors, t), g = a, R = a + c;
-        a += l * 360;
-        const F = (g + R) / 2 * (Math.PI / 180), w = Math.cos(F), S = Math.sin(F), B = w >= 0, H = x.value * 0.65 + Y.value * 0.35;
-        let U = m.value + H * w, q = v.value + H * S, G = "middle", J = 0, K = 0, V = 0, T = 0, D = 0, N = 0, Q = "";
-        if (X.value) {
-          const W = x.value + 20, ae = 14;
-          J = m.value + x.value * w, K = v.value + x.value * S, V = m.value + W * w, T = v.value + W * S, D = V + ae * (B ? 1 : -1), N = T, Q = `M ${J},${K} L ${V},${T} L ${D},${N}`, U = D + 5 * (B ? 1 : -1), q = N, G = B ? "start" : "end";
+    ue(() => {
+      t.animate && I();
+    }), de(
+      () => t.data,
+      () => {
+        t.animate && I();
+      },
+      { deep: !0 }
+    ), ce(() => p?.());
+    const O = d(() => t.labelMode === "outside"), h = d(() => t.size / 2), c = d(() => t.size / 2), m = d(() => t.size / 2 - (O.value ? 36 : 4)), X = d(() => t.donut ? m.value * (t.innerRadius / 100) : 0), $ = d(() => t.data.reduce((l, a) => l + a.value, 0) || 1), ee = d(() => t.legendPosition === "bottom" ? t.legendsVariant === "variant2" ? "flex flex-col items-stretch gap-5 w-full" : "inline-flex flex-col items-center gap-4" : "inline-flex flex-row items-center gap-6"), M = d(() => {
+      let l = t.startAngle;
+      return t.data.map((a, o) => {
+        const n = a.value / $.value, g = n * 360 * w.value, L = a.color ?? ge(t.colors, o), y = l, z = l + g;
+        l += n * 360;
+        const Y = (y + z) / 2 * (Math.PI / 180), k = Math.cos(Y), P = Math.sin(Y), A = k >= 0, j = m.value * 0.65 + X.value * 0.35;
+        let F = h.value + j * k, U = c.value + j * P, q = "middle", G = 0, J = 0, V = 0, C = 0, R = 0, S = 0, K = "";
+        if (O.value) {
+          const Q = m.value + 20, se = 14;
+          G = h.value + m.value * k, J = c.value + m.value * P, V = h.value + Q * k, C = c.value + Q * P, R = V + se * (A ? 1 : -1), S = C, K = `M ${G},${J} L ${V},${C} L ${R},${S}`, F = R + 5 * (A ? 1 : -1), U = S, q = A ? "start" : "end";
         }
-        const ne = me(m.value, v.value, x.value, g, R, Y.value);
+        const ie = xe(h.value, c.value, m.value, y, z, X.value);
         let b = "";
-        return o.labelMode === "percent" ? b = `${Math.round(l * 100)}%` : o.labelMode === "value" ? b = z(n.value) : o.labelMode === "label" ? b = n.label : o.labelMode === "outside" && (b = `${z(n.value)} (${Math.round(l * 100)}%)`), { d: n, path: ne, color: C, lx: U, ly: q, label: b, pct: l, startA: g, endA: R, leaderPath: Q, textAnchor: G };
+        return t.labelMode === "percent" ? b = `${Math.round(n * 100)}%` : t.labelMode === "value" ? b = E(a.value) : t.labelMode === "label" ? b = a.label : t.labelMode === "outside" && (b = `${E(a.value)} (${Math.round(n * 100)}%)`), { d: a, path: ie, color: L, lx: F, ly: U, label: b, pct: n, startA: y, endA: z, leaderPath: K, textAnchor: q };
       });
-    }), y = E(null), r = E(null);
-    function ee(a, n) {
-      y.value = n, o.showTooltip && (r.value = { x: a.clientX, y: a.clientY, item: k.value[n] });
+    }), v = B(null), r = B(null);
+    function te(l, a) {
+      v.value = a, t.showTooltip && (r.value = { x: l.clientX, y: l.clientY, item: M.value[a] });
     }
-    function te(a) {
-      r.value && (r.value = { ...r.value, x: a.clientX, y: a.clientY });
+    function le(l) {
+      r.value && (r.value = { ...r.value, x: l.clientX, y: l.clientY });
     }
-    function le() {
-      y.value = null, r.value = null;
+    function oe() {
+      v.value = null, r.value = null;
     }
-    function oe(a, n, t) {
-      if (y.value !== a) return "";
-      const l = (n + t) / 2 * (Math.PI / 180), c = 8, C = Math.cos(l) * c, g = Math.sin(l) * c;
-      return `translate(${C}, ${g})`;
+    function ne(l) {
+      v.value = l;
     }
-    return (a, n) => (s(), i("div", {
-      class: Z(["vlite-pie-chart inline-flex gap-6 select-none", e.legendPosition === "bottom" ? "flex-col items-center" : "flex-row items-center"])
+    function ae(l, a, o) {
+      if (v.value !== l) return "";
+      const n = (a + o) / 2 * (Math.PI / 180), g = 8, L = Math.cos(n) * g, y = Math.sin(n) * g;
+      return `translate(${L}, ${y})`;
+    }
+    return (l, a) => (i(), s("div", {
+      class: W(["vlite-pie-chart select-none", ee.value])
     }, [
-      u("div", ye, [
-        (s(), i("svg", {
+      u("div", {
+        class: W([
+          "shrink-0",
+          e.legendPosition === "bottom" && e.legendsVariant === "variant2" ? "self-center" : ""
+        ])
+      }, [
+        (i(), s("svg", {
           width: e.size,
           height: e.size,
           role: "img",
@@ -74,130 +88,120 @@ const ye = { class: "shrink-0" }, ge = ["width", "height"], be = ["id"], Me = ["
         }, [
           u("defs", null, [
             u("filter", {
-              id: `shadow-${M(O)}`,
+              id: `shadow-${T(H)}`,
               x: "-20%",
               y: "-20%",
               width: "140%",
               height: "140%"
-            }, [...n[1] || (n[1] = [
+            }, [...a[0] || (a[0] = [
               u("feDropShadow", {
                 dx: "0",
                 dy: "2",
                 stdDeviation: "3",
                 "flood-opacity": "0.12"
               }, null, -1)
-            ])], 8, be)
+            ])], 8, ke)
           ]),
           u("g", {
-            filter: `url(#shadow-${M(O)})`
+            filter: `url(#shadow-${T(H)})`
           }, [
-            (s(!0), i(p, null, $(k.value, (t, l) => (s(), i("path", {
-              key: l,
-              d: t.path,
-              fill: t.color,
-              transform: oe(l, t.startA, t.endA),
+            (i(!0), s(D, null, N(M.value, (o, n) => (i(), s("path", {
+              key: n,
+              d: o.path,
+              fill: o.color,
+              transform: ae(n, o.startA, o.endA),
               class: "cursor-pointer transition-transform duration-200",
+              opacity: v.value !== null && v.value !== n ? 0.55 : 1,
               stroke: "var(--color-background)",
               "stroke-width": "2",
-              onMouseenter: (c) => ee(c, l),
-              onMousemove: te,
-              onMouseleave: le
-            }, null, 40, ke))), 128))
-          ], 8, Me),
-          e.labelMode === "outside" ? (s(), i("g", we, [
-            (s(!0), i(p, null, $(k.value, (t, l) => (s(), i("path", {
-              key: `leader-${l}`,
-              d: t.leaderPath,
+              onMouseenter: (g) => te(g, n),
+              onMousemove: le,
+              onMouseleave: oe
+            }, null, 40, pe))), 128))
+          ], 8, we),
+          e.labelMode === "outside" ? (i(), s("g", $e, [
+            (i(!0), s(D, null, N(M.value, (o, n) => (i(), s("path", {
+              key: `leader-${n}`,
+              d: o.leaderPath,
               fill: "none",
               stroke: "var(--color-muted-foreground)",
               "stroke-width": "1",
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
-              opacity: t.pct > 0.02 ? 0.5 : 0
-            }, null, 8, pe))), 128))
-          ])) : h("", !0),
-          e.labelMode !== "none" ? (s(!0), i(p, { key: 1 }, $(k.value, (t, l) => (s(), i("text", {
-            key: `lbl-${l}`,
-            x: t.lx,
-            y: t.ly,
-            "text-anchor": e.labelMode === "outside" ? t.textAnchor : "middle",
+              opacity: o.pct > 0.02 ? 0.5 : 0
+            }, null, 8, Le))), 128))
+          ])) : f("", !0),
+          e.labelMode !== "none" ? (i(!0), s(D, { key: 1 }, N(M.value, (o, n) => (i(), s("text", {
+            key: `lbl-${n}`,
+            x: o.lx,
+            y: o.ly,
+            "text-anchor": e.labelMode === "outside" ? o.textAnchor : "middle",
             "dominant-baseline": "middle",
             "font-size": e.labelMode === "outside" ? 11.5 : 11,
             "font-weight": e.labelMode === "outside" ? "500" : "600",
             fill: e.labelMode === "outside" ? "var(--color-foreground)" : "white",
-            opacity: t.pct > 0.04 ? 1 : 0
-          }, d(t.label), 9, $e))), 128)) : h("", !0),
-          e.donut ? (s(), i("g", ze, [
-            de(a.$slots, "center", {
-              total: P.value,
+            opacity: o.pct > 0.04 ? 1 : 0
+          }, x(o.label), 9, ze))), 128)) : f("", !0),
+          e.donut ? (i(), s("g", Pe, [
+            ve(l.$slots, "center", {
+              total: $.value,
               data: e.data
             }, () => [
-              e.centerValue ? (s(), i("text", {
+              e.centerValue ? (i(), s("text", {
                 key: 0,
-                x: m.value,
-                y: e.centerLabel ? v.value - 8 : v.value,
+                x: h.value,
+                y: e.centerLabel ? c.value - 8 : c.value,
                 "text-anchor": "middle",
                 "dominant-baseline": "central",
                 "font-size": "22",
                 "font-weight": "700",
                 class: "fill-foreground"
-              }, d(e.centerValue), 9, Le)) : h("", !0),
-              e.centerLabel ? (s(), i("text", {
+              }, x(e.centerValue), 9, Ae)) : f("", !0),
+              e.centerLabel ? (i(), s("text", {
                 key: 1,
-                x: m.value,
-                y: v.value + (e.centerValue ? 14 : 0),
+                x: h.value,
+                y: c.value + (e.centerValue ? 14 : 0),
                 "text-anchor": "middle",
                 "dominant-baseline": "middle",
                 "font-size": "12",
                 class: "fill-muted-foreground"
-              }, d(e.centerLabel), 9, Ae)) : h("", !0)
+              }, x(e.centerLabel), 9, Ve)) : f("", !0)
             ])
-          ])) : h("", !0)
-        ], 8, ge))
-      ]),
-      e.showLegend ? (s(), i("div", {
+          ])) : f("", !0)
+        ], 8, Me))
+      ], 2),
+      e.showLegend ? (i(), Z(be, {
         key: 0,
-        class: Z(["flex flex-col gap-2 min-w-[120px]", e.legendPosition === "bottom" ? "flex-row flex-wrap justify-center" : ""])
-      }, [
-        (s(!0), i(p, null, $(e.data, (t, l) => (s(), i("div", {
-          key: l,
-          class: "flex items-center gap-2 cursor-pointer",
-          style: { transition: "opacity 0.15s" },
-          onMouseenter: (c) => y.value = l,
-          onMouseleave: n[0] || (n[0] = (c) => y.value = null)
-        }, [
-          u("span", {
-            class: "w-2.5 h-2.5 rounded-sm shrink-0",
-            style: I({ backgroundColor: t.color ?? M(_)(e.colors, l) })
-          }, null, 4),
-          u("div", Ce, [
-            u("div", Re, d(t.label), 1),
-            u("div", Se, d(M(z)(t.value)) + " (" + d(Math.round(t.value / P.value * 100)) + "%) ", 1)
-          ])
-        ], 40, Pe))), 128))
-      ], 2)) : h("", !0),
-      (s(), ce(ve, { to: "body" }, [
-        r.value ? (s(), i("div", {
+        data: e.data,
+        total: $.value,
+        colors: e.colors,
+        "legends-variant": e.legendsVariant,
+        "legend-position": e.legendPosition,
+        "hovered-index": v.value,
+        onHover: ne
+      }, null, 8, ["data", "total", "colors", "legends-variant", "legend-position", "hovered-index"])) : f("", !0),
+      (i(), Z(fe, { to: "body" }, [
+        r.value ? (i(), s("div", {
           key: 0,
           class: "vlite-chart-tooltip",
-          style: I({ left: `${r.value.x + 12}px`, top: `${r.value.y - 10}px` })
+          style: _({ left: `${r.value.x + 12}px`, top: `${r.value.y - 10}px` })
         }, [
-          u("div", Be, [
+          u("div", Ce, [
             u("span", {
               class: "w-2.5 h-2.5 rounded-sm shrink-0",
-              style: I({ backgroundColor: r.value.item.color })
+              style: _({ backgroundColor: r.value.item.color })
             }, null, 4),
-            u("span", Ve, d(r.value.item.d.label), 1)
+            u("span", Re, x(r.value.item.d.label), 1)
           ]),
-          u("div", Te, [
-            fe(d(M(z)(r.value.item.d.value)) + " ", 1),
-            u("span", De, " (" + d(Math.round(r.value.item.pct * 100)) + "%) ", 1)
+          u("div", Se, [
+            he(x(T(E)(r.value.item.d.value)) + " ", 1),
+            u("span", Be, " (" + x(Math.round(r.value.item.pct * 100)) + "%) ", 1)
           ])
-        ], 4)) : h("", !0)
+        ], 4)) : f("", !0)
       ]))
     ], 2));
   }
 });
 export {
-  Oe as default
+  He as default
 };

package/components/Chart/SegmentBarChart.vue.d.ts

@@ -13,8 +13,8 @@ export interface SegmentBarChartProps {
 declare const _default: import('vue').DefineComponent<SegmentBarChartProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SegmentBarChartProps> & Readonly<{}>, {
     animate: boolean;
     colors: string[];
-    showLabels: boolean;
     showTooltip: boolean;
+    showLabels: boolean;
     barRadius: number;
     showValues: boolean;
     barHeight: number;

package/components/Chart/TimelineChart.vue.d.ts

@@ -14,9 +14,9 @@ declare const _default: import('vue').DefineComponent<TimelineChartProps, {}, {}
     animate: boolean;
     height: number;
     colors: string[];
-    showLabels: boolean;
-    showTooltip: boolean;
     showGrid: boolean;
+    showTooltip: boolean;
+    showLabels: boolean;
     barRadius: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;

package/components/Chart/index.d.ts

@@ -9,4 +9,5 @@ export { default as SegmentBarChart } from './SegmentBarChart.vue';
 export { default as StatCardChart } from './StatCardChart.vue';
 export { default as WaffleChart } from './WaffleChart.vue';
 export { default as GanttChart } from './GanttChart.vue';
-export type { ChartDataPoint, ChartDataset, LineChartProps, BarChartProps, PieChartProps, CircleChartProps, GaugeChartProps, GaugeVariant, GaugeZone, SpeedometerChartProps, SpeedometerVariant, TimelineChartProps, TimelineTask, SegmentBarChartProps, StatCardChartProps, StatCardItem, WaffleChartProps, GanttChartProps, GanttTask, GanttViewMode, } from './types';
+export type { ChartDataPoint, ChartDataset, ChartLegendsVariant, LegendPosition, LineChartProps, BarChartProps, PieChartProps, CircleChartProps, GaugeChartProps, GaugeVariant, GaugeZone, SpeedometerChartProps, SpeedometerVariant, TimelineChartProps, TimelineTask, SegmentBarChartProps, StatCardChartProps, StatCardItem, WaffleChartProps, GanttChartProps, GanttTask, GanttViewMode, } from './types';
+export { default as ChartLegend } from './ChartLegend.vue';

package/components/Chart/types.d.ts

@@ -27,6 +27,14 @@ export interface LineChartProps {
     showDots?: boolean;
     /** Show background gridlines */
     showGrid?: boolean;
+    /** Show X-axis line */
+    showXAxis?: boolean;
+    /** Show Y-axis line */
+    showYAxis?: boolean;
+    /** Show X-axis tick labels */
+    showXLabels?: boolean;
+    /** Show Y-axis tick labels */
+    showYLabels?: boolean;
     /** Show legend (multi-series) */
     showLegend?: boolean;
     /** Enable hover tooltip */
@@ -45,6 +53,14 @@ export interface LineChartProps {
     yMin?: number;
     /** Y-axis max override */
     yMax?: number;
+    /** Line stroke width */
+    lineWidth?: number;
+    /** Top stop opacity for the area fill gradient (0–1) */
+    fillOpacity?: number;
+    /** Gridline opacity 0–1 */
+    gridOpacity?: number;
+    /** Axis line opacity 0–1 */
+    axisOpacity?: number;
 }
 export interface BarChartProps {
     /** Single-series data points */
@@ -78,6 +94,13 @@ export interface BarChartProps {
 }
 export type PieLabelMode = 'percent' | 'value' | 'label' | 'none' | 'outside';
 export type LegendPosition = 'right' | 'bottom';
+/**
+ * Pie/donut legend layout presets.
+ * - `default` — original two-line items (label + value)
+ * - `variant1` — compact horizontal wrap: "Label (value, pct%)"
+ * - `variant2` — vertical rows with value/pct aligned right
+ */
+export type ChartLegendsVariant = 'default' | 'variant1' | 'variant2';
 export interface PieChartProps {
     /** Chart data */
     data: ChartDataPoint[];
@@ -93,6 +116,8 @@ export interface PieChartProps {
     showLegend?: boolean;
     /** Legend position */
     legendPosition?: LegendPosition;
+    /** Legend layout preset (backward compatible — defaults to `default`) */
+    legendsVariant?: ChartLegendsVariant;
     /** What to show on each slice */
     labelMode?: PieLabelMode;
     /** Custom color palette */

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,4 +1,4 @@
-import o from "./DropdownMenu.vue3.js";
+import o from "./DropdownMenu.vue2.js";
 /* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
 const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-173c7a02"]]);

package/components/Heatmap/Heatmap.vue.d.ts

@@ -8,9 +8,9 @@ declare const _default: import('vue').DefineComponent<HeatmapProps, {}, {}, {},
 }>, {
     class: string;
     layout: import('./types').HeatmapLayout;
+    showLegend: boolean;
     minValue: number;
     maxValue: number;
-    showLegend: boolean;
     showLabels: boolean;
     interactive: boolean;
     responsive: boolean;

package/components/SidebarMenu/SidebarMenu.vue.d.ts

@@ -6,6 +6,7 @@ declare const _default: import('vue').DefineComponent<SidebarMenuProps, {}, {},
     items: SidebarMenuItemSchema[];
     allowMultiple: boolean;
     iconSize: string;
+    showTooltip: boolean;
     mobileBreakpoint: "sm" | "md" | "lg" | "xl" | "none";
     menuOffset: [number, number];
     indentSize: number;
@@ -19,7 +20,6 @@ declare const _default: import('vue').DefineComponent<SidebarMenuProps, {}, {},
     compactItemPadding: string;
     nestedMenuWidth: string;
     nestedMenuMaxHeight: string;
-    showTooltip: boolean;
     forceTreeView: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
 export default _default;

package/components/Stats/StatItem.vue.d.ts

@@ -10,12 +10,14 @@ type __VLS_Props = {
     iconSize?: string;
     iconBoxShape?: IconBoxShape;
     iconBoxStyle?: IconBoxStyle;
+    sparklineHeight?: number;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     variant: StatsVariant;
     loading: boolean;
     layout: StatsLayout;
     attached: boolean;
+    sparklineHeight: number;
     iconBoxShape: IconBoxShape;
     iconBoxStyle: IconBoxStyle;
     iconSize: string;