x-next 1.9.0 → 1.10.1

package/dist/components/virtual-list-v2/virtual-list.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue';
 import { ScrollOptions } from './interface';
+import { ScrollbarProps } from '../scrollbar-v2';
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     height: {
         type: (StringConstructor | NumberConstructor)[];
@@ -43,6 +44,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    scrollbar: {
+        type: PropType<boolean | ScrollbarProps>;
+        default: boolean;
+    };
 }>, {
     className: {
         block: string;
@@ -50,7 +55,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         modifier: (className: string) => string;
         is: (className: string) => string;
     };
-    containerRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    containerRef: import('vue').Ref<any, any>;
+    wrapperComRef: import('vue').Ref<HTMLElement | import('vue').ComponentPublicInstance | undefined, HTMLElement | import('vue').ComponentPublicInstance | undefined>;
+    displayScrollbar: import('vue').ComputedRef<boolean>;
+    scrollbarProps: import('vue').ComputedRef<ScrollbarProps | undefined>;
     contentRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
     frontPadding: import('vue').ComputedRef<number>;
     currentList: import('vue').ComputedRef<Record<string, any>[]>;
@@ -115,6 +123,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    scrollbar: {
+        type: PropType<boolean | ScrollbarProps>;
+        default: boolean;
+    };
 }>> & Readonly<{
     onScroll?: ((ev: Event) => any) | undefined;
     onReachBottom?: ((ev: Event) => any) | undefined;
@@ -122,6 +134,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     data: Record<string, any>[];
     component: string | Record<string, any>;
     height: string | number;
+    scrollbar: boolean | ScrollbarProps;
     fixedSize: boolean;
     estimatedSize: number;
     buffer: number;
@@ -150,5 +163,327 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             required: true;
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    ScrollbarComponent: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+            type: {
+                type: PropType<"track" | "embed">;
+                default: string;
+            };
+            outerClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+            outerStyle: {
+                type: PropType<import('vue').StyleValue>;
+            };
+            hide: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            disableHorizontal: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            disableVertical: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            horizontalWheel: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & Readonly<{
+            onScroll?: ((ev: Event) => any) | undefined;
+        }>, {
+            className: {
+                block: string;
+                element: (className: string) => string;
+                modifier: (className: string) => string;
+                is: (className: string) => string;
+            };
+            cls: import('vue').ComputedRef<unknown[]>;
+            style: import('vue').ComputedRef<import('vue').StyleValue[]>;
+            rootRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            getContainerAttrs: () => {
+                [x: string]: unknown;
+            };
+            getContainerStyle: () => import('vue').StyleValue;
+            containerRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            horizontalThumbRef: import('vue').Ref<any, any>;
+            verticalThumbRef: import('vue').Ref<any, any>;
+            horizontalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+            verticalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+            isBoth: import('vue').Ref<boolean, boolean>;
+            hasHorizontalScrollbar: import('vue').ComputedRef<boolean>;
+            hasVerticalScrollbar: import('vue').ComputedRef<boolean>;
+            handleResize: () => void;
+            handleScroll: (ev: Event) => void;
+            handleWheel: (ev: WheelEvent) => void;
+            handleHorizontalScroll: (offset: number) => void;
+            handleVerticalScroll: (offset: number) => void;
+        }, {}, {}, {
+            scrollTo(options?: number | {
+                left?: number;
+                top?: number;
+            }, y?: number): void;
+            scrollTop(top: number): void;
+            scrollLeft(left: number): void;
+        }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            scroll: (ev: Event) => true;
+        }, import('vue').PublicProps, {
+            type: "embed" | "track";
+            hide: boolean;
+            disableHorizontal: boolean;
+            disableVertical: boolean;
+            horizontalWheel: boolean;
+        }, true, {}, {}, {
+            ResizeObserver: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+                watchOnUpdated: BooleanConstructor;
+            }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+                [key: string]: any;
+            }>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "resize"[], "resize", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+                watchOnUpdated: BooleanConstructor;
+            }>> & Readonly<{
+                onResize?: ((...args: any[]) => any) | undefined;
+            }>, {
+                watchOnUpdated: boolean;
+            }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+            Thumb: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+                data: {
+                    type: PropType<import('../scrollbar-v2/interface').ThumbData>;
+                };
+                direction: {
+                    type: PropType<import('../../_utils/constant').Direction>;
+                    default: string;
+                };
+            }>, {
+                trackRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+                thumbRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+                className: {
+                    block: string;
+                    element: (className: string) => string;
+                    modifier: (className: string) => string;
+                    is: (className: string) => string;
+                };
+                thumbCls: import('vue').ComputedRef<(string | {
+                    [x: string]: boolean;
+                })[]>;
+                thumbStyle: import('vue').ComputedRef<{
+                    [x: string]: string;
+                }>;
+                handleThumbMouseDown: (ev: MouseEvent) => void;
+                handleTrackClick: (ev: MouseEvent) => void;
+                setOffset: (_offset: number) => void;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "scroll"[], "scroll", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+                data: {
+                    type: PropType<import('../scrollbar-v2/interface').ThumbData>;
+                };
+                direction: {
+                    type: PropType<import('../../_utils/constant').Direction>;
+                    default: string;
+                };
+            }>> & Readonly<{
+                onScroll?: ((...args: any[]) => any) | undefined;
+            }>, {
+                direction: "horizontal" | "vertical";
+            }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        } & import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            type: {
+                type: PropType<"track" | "embed">;
+                default: string;
+            };
+            outerClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+            outerStyle: {
+                type: PropType<import('vue').StyleValue>;
+            };
+            hide: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            disableHorizontal: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            disableVertical: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            horizontalWheel: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & Readonly<{
+            onScroll?: ((ev: Event) => any) | undefined;
+        }>, {
+            className: {
+                block: string;
+                element: (className: string) => string;
+                modifier: (className: string) => string;
+                is: (className: string) => string;
+            };
+            cls: import('vue').ComputedRef<unknown[]>;
+            style: import('vue').ComputedRef<import('vue').StyleValue[]>;
+            rootRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            getContainerAttrs: () => {
+                [x: string]: unknown;
+            };
+            getContainerStyle: () => import('vue').StyleValue;
+            containerRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            horizontalThumbRef: import('vue').Ref<any, any>;
+            verticalThumbRef: import('vue').Ref<any, any>;
+            horizontalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+            verticalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+            isBoth: import('vue').Ref<boolean, boolean>;
+            hasHorizontalScrollbar: import('vue').ComputedRef<boolean>;
+            hasVerticalScrollbar: import('vue').ComputedRef<boolean>;
+            handleResize: () => void;
+            handleScroll: (ev: Event) => void;
+            handleWheel: (ev: WheelEvent) => void;
+            handleHorizontalScroll: (offset: number) => void;
+            handleVerticalScroll: (offset: number) => void;
+        }, {}, {}, {
+            scrollTo(options?: number | {
+                left?: number;
+                top?: number;
+            }, y?: number): void;
+            scrollTop(top: number): void;
+            scrollLeft(left: number): void;
+        }, {
+            type: "embed" | "track";
+            hide: boolean;
+            disableHorizontal: boolean;
+            disableVertical: boolean;
+            horizontalWheel: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        type: {
+            type: PropType<"track" | "embed">;
+            default: string;
+        };
+        outerClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        outerStyle: {
+            type: PropType<import('vue').StyleValue>;
+        };
+        hide: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disableHorizontal: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disableVertical: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        horizontalWheel: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onScroll?: ((ev: Event) => any) | undefined;
+    }>, {
+        className: {
+            block: string;
+            element: (className: string) => string;
+            modifier: (className: string) => string;
+            is: (className: string) => string;
+        };
+        cls: import('vue').ComputedRef<unknown[]>;
+        style: import('vue').ComputedRef<import('vue').StyleValue[]>;
+        rootRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        getContainerAttrs: () => {
+            [x: string]: unknown;
+        };
+        getContainerStyle: () => import('vue').StyleValue;
+        containerRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        horizontalThumbRef: import('vue').Ref<any, any>;
+        verticalThumbRef: import('vue').Ref<any, any>;
+        horizontalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+        verticalData: import('vue').Ref<import('../scrollbar-v2/interface').ThumbData | undefined, import('../scrollbar-v2/interface').ThumbData | undefined>;
+        isBoth: import('vue').Ref<boolean, boolean>;
+        hasHorizontalScrollbar: import('vue').ComputedRef<boolean>;
+        hasVerticalScrollbar: import('vue').ComputedRef<boolean>;
+        handleResize: () => void;
+        handleScroll: (ev: Event) => void;
+        handleWheel: (ev: WheelEvent) => void;
+        handleHorizontalScroll: (offset: number) => void;
+        handleVerticalScroll: (offset: number) => void;
+    }, {}, {}, {
+        scrollTo(options?: number | {
+            left?: number;
+            top?: number;
+        }, y?: number): void;
+        scrollTop(top: number): void;
+        scrollLeft(left: number): void;
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        scroll: (ev: Event) => true;
+    }, string, {
+        type: "embed" | "track";
+        hide: boolean;
+        disableHorizontal: boolean;
+        disableVertical: boolean;
+        horizontalWheel: boolean;
+    }, {}, string, {}, {
+        ResizeObserver: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            watchOnUpdated: BooleanConstructor;
+        }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+            [key: string]: any;
+        }>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "resize"[], "resize", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            watchOnUpdated: BooleanConstructor;
+        }>> & Readonly<{
+            onResize?: ((...args: any[]) => any) | undefined;
+        }>, {
+            watchOnUpdated: boolean;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        Thumb: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            data: {
+                type: PropType<import('../scrollbar-v2/interface').ThumbData>;
+            };
+            direction: {
+                type: PropType<import('../../_utils/constant').Direction>;
+                default: string;
+            };
+        }>, {
+            trackRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            thumbRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            className: {
+                block: string;
+                element: (className: string) => string;
+                modifier: (className: string) => string;
+                is: (className: string) => string;
+            };
+            thumbCls: import('vue').ComputedRef<(string | {
+                [x: string]: boolean;
+            })[]>;
+            thumbStyle: import('vue').ComputedRef<{
+                [x: string]: string;
+            }>;
+            handleThumbMouseDown: (ev: MouseEvent) => void;
+            handleTrackClick: (ev: MouseEvent) => void;
+            setOffset: (_offset: number) => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "scroll"[], "scroll", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            data: {
+                type: PropType<import('../scrollbar-v2/interface').ThumbData>;
+            };
+            direction: {
+                type: PropType<import('../../_utils/constant').Direction>;
+                default: string;
+            };
+        }>> & Readonly<{
+            onScroll?: ((...args: any[]) => any) | undefined;
+        }>, {
+            direction: "horizontal" | "vertical";
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    } & import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
+        install(app: import('vue').App): void;
+    };
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/es/_hooks/use-component-ref.js

@@ -1,16 +1,16 @@
-import { ref as o, onMounted as u, watch as m } from "vue";
-import { isComponentInstance as f } from "../_utils/is.js";
-const c = (r) => {
-  const e = o(), t = () => f(e.value) ? e.value.$refs[r] : e.value, n = o();
+import { ref as r, onMounted as u, watch as f } from "vue";
+import { isComponentInstance as l } from "../_utils/is.js";
+const s = (n) => {
+  const e = r(), o = () => l(e.value) ? e.value.$refs[n] ?? Reflect.get(e.value, n) : e.value, t = r();
   return u(() => {
-    n.value = t();
-  }), m([e], () => {
-    n.value = t();
+    t.value = o();
+  }), f([e], () => {
+    t.value = o();
   }), {
     componentRef: e,
-    elementRef: n
+    elementRef: t
   };
 };
 export {
-  c as useComponentRef
+  s as useComponentRef
 };

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
+};