@vef-framework/components 2.0.4 → 2.0.5

package/dist/es/charts/hooks/use-chart.js

@@ -1,153 +1,111 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { useDidUpdate } from '@vef-framework/hooks';
-import { isString, isNullish } from '@vef-framework/shared';
-import * as echarts from 'echarts';
-import { useRef, useEffectEvent, useEffect } from 'react';
-import '../../_base/index.js';
-import '../../config-provider/index.js';
-import '../themes/index.js';
-import { registerWonderlandTheme } from '../themes/wonderland.js';
-import { registerWonderlandDarkTheme } from '../themes/wonderland-dark.js';
-import { registerWaldenTheme } from '../themes/walden.js';
-import { registerWaldenDarkTheme } from '../themes/walden-dark.js';
-import { useThemeTokens } from '../../_base/hooks/use-theme-tokens.js';
-import { useIsDarkMode } from '../../config-provider/dark-mode-context.js';
-
-registerWonderlandTheme();
-registerWonderlandDarkTheme();
-registerWaldenTheme();
-registerWaldenDarkTheme();
-function useChart({
-  option,
-  theme = "walden",
-  loading = false,
-  group,
-  onReady,
-  onBeforeDispose,
-  notMerge,
-  replaceMerge,
-  lazyUpdate = true,
-  silent,
-  transition,
-  renderer = "svg",
-  devicePixelRatio,
-  width,
-  height,
-  ssr,
-  useCoarsePointer,
-  useDirtyRect,
-  pointerSize,
-  locale
+import { useDidUpdate as F } from "@vef-framework/hooks";
+import { isString as j, isNullish as L } from "@vef-framework/shared";
+import * as q from "echarts";
+import { useRef as m, useEffectEvent as S, useEffect as i } from "react";
+import "../../_base/index.js";
+import "../../config-provider/index.js";
+import "../themes/index.js";
+import { registerWonderlandTheme as w } from "../themes/wonderland.js";
+import { registerWonderlandDarkTheme as y } from "../themes/wonderland-dark.js";
+import { registerWaldenTheme as A } from "../themes/walden.js";
+import { registerWaldenDarkTheme as G } from "../themes/walden-dark.js";
+import { useThemeTokens as H } from "../../_base/hooks/use-theme-tokens.js";
+import { useIsDarkMode as J } from "../../config-provider/dark-mode-context.js";
+w();
+y();
+A();
+G();
+function tr({
+  option: a,
+  theme: o = "walden",
+  loading: l = !1,
+  group: p,
+  onReady: h,
+  onBeforeDispose: I,
+  notMerge: d,
+  replaceMerge: T,
+  lazyUpdate: k = !0,
+  silent: v,
+  transition: D,
+  renderer: O = "svg",
+  devicePixelRatio: R,
+  width: n,
+  height: t,
+  ssr: W,
+  useCoarsePointer: g,
+  useDirtyRect: z,
+  pointerSize: b,
+  locale: x
 }) {
   const {
-    colorPrimary,
-    colorBgMask,
-    fontSize,
-    colorTextDescription
-  } = useThemeTokens();
-  const isDarkMode = useIsDarkMode();
-  const containerRef = useRef(null);
-  const chartRef = useRef(null);
-  const resizeObserverRef = useRef(null);
-  const effectiveTheme = isString(theme) ? isDarkMode ? `${theme}-dark` : theme : theme;
-  const onReadyFn = useEffectEvent((chart) => {
-    onReady?.(chart);
+    colorPrimary: E,
+    colorBgMask: B,
+    fontSize: u,
+    colorTextDescription: C
+  } = H(), M = J(), s = m(null), r = m(null), c = m(null), f = j(o) && M ? `${o}-dark` : o, N = S((e) => {
+    h?.(e);
+  }), $ = S((e) => {
+    I?.(e);
   });
-  const onBeforeDisposeFn = useEffectEvent((chart) => {
-    onBeforeDispose?.(chart);
-  });
-  useEffect(() => {
-    if (!containerRef.current) {
+  return i(() => {
+    if (!s.current)
       return;
-    }
-    const chart = echarts.init(containerRef.current, effectiveTheme, {
-      renderer,
-      devicePixelRatio,
-      width,
-      height,
-      ssr,
-      useCoarsePointer,
-      useDirtyRect,
-      pointerSize,
-      locale
+    const e = q.init(s.current, f, {
+      renderer: O,
+      devicePixelRatio: R,
+      width: n,
+      height: t,
+      ssr: W,
+      useCoarsePointer: g,
+      useDirtyRect: z,
+      pointerSize: b,
+      locale: x
     });
-    chartRef.current = chart;
-    if (isNullish(width) || isNullish(height) || width === "auto" || height === "auto") {
-      resizeObserverRef.current = new ResizeObserver(() => {
-        chart.resize({
-          animation: {
-            duration: 300,
-            easing: "elasticOut"
-          }
-        });
+    return r.current = e, (L(n) || L(t) || n === "auto" || t === "auto") && (c.current = new ResizeObserver(() => {
+      e.resize({
+        animation: {
+          duration: 300,
+          easing: "elasticOut"
+        }
       });
-      resizeObserverRef.current.observe(containerRef.current);
-    }
-    onReadyFn?.(chart);
-    return () => {
-      onBeforeDisposeFn?.(chart);
-      resizeObserverRef.current?.disconnect();
-      chart.dispose();
+    }), c.current.observe(s.current)), N?.(e), () => {
+      $?.(e), c.current?.disconnect(), e.dispose();
     };
-  }, [renderer, devicePixelRatio, ssr, useCoarsePointer, useDirtyRect, pointerSize, locale]);
-  useEffect(() => {
-    if (!chartRef.current) {
-      return;
-    }
-    chartRef.current.group = group || "";
-  }, [group]);
-  useDidUpdate(() => {
-    if (!chartRef.current) {
-      return;
-    }
-    chartRef.current.setTheme(effectiveTheme);
-  }, [effectiveTheme]);
-  useDidUpdate(() => {
-    if (!chartRef.current) {
-      return;
-    }
-    chartRef.current.resize({
-      width,
-      height,
+  }, [O, R, W, g, z, b, x]), i(() => {
+    r.current && (r.current.group = p || "");
+  }, [p]), F(() => {
+    r.current && r.current.setTheme(f);
+  }, [f]), F(() => {
+    r.current && r.current.resize({
+      width: n,
+      height: t,
       animation: {
         duration: 300,
         easing: "elasticOut"
       }
     });
-  }, [width, height]);
-  useEffect(() => {
-    if (!chartRef.current) {
-      return;
-    }
-    chartRef.current.setOption(option, {
-      notMerge,
-      replaceMerge,
-      lazyUpdate,
-      silent,
-      transition
+  }, [n, t]), i(() => {
+    r.current && r.current.setOption(a, {
+      notMerge: d,
+      replaceMerge: T,
+      lazyUpdate: k,
+      silent: v,
+      transition: D
     });
-  }, [option, notMerge, lazyUpdate, replaceMerge, silent, transition]);
-  useEffect(() => {
-    if (!chartRef.current) {
-      return;
-    }
-    if (loading) {
-      chartRef.current.showLoading("default", {
-        text: "加载中...",
-        textColor: colorTextDescription,
-        fontSize,
-        color: colorPrimary,
-        maskColor: colorBgMask,
-        zlevel: 0,
-        showSpinner: true,
-        spinnerRadius: fontSize,
-        lineWidth: 6
-      });
-    } else {
-      chartRef.current.hideLoading();
-    }
-  }, [loading, colorBgMask, colorPrimary, colorTextDescription, fontSize]);
-  return containerRef;
+  }, [a, d, k, T, v, D]), i(() => {
+    r.current && (l ? r.current.showLoading("default", {
+      text: "加载中...",
+      textColor: C,
+      fontSize: u,
+      color: E,
+      maskColor: B,
+      zlevel: 0,
+      showSpinner: !0,
+      spinnerRadius: u,
+      lineWidth: 6
+    }) : r.current.hideLoading());
+  }, [l, B, E, C, u]), s;
 }
-
-export { useChart };
+export {
+  tr as useChart
+};

package/dist/es/charts/index.js

@@ -1,4 +1,6 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-export { Chart } from './chart.js';
-import './helpers/index.js';
-import './hooks/index.js';
+import { Chart as p } from "./chart.js";
+import "./helpers/index.js";
+import "./hooks/index.js";
+export {
+  p as Chart
+};

package/dist/es/charts/themes/index.js

@@ -1,5 +1,10 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-export { registerWaldenTheme } from './walden.js';
-export { registerWaldenDarkTheme } from './walden-dark.js';
-export { registerWonderlandTheme } from './wonderland.js';
-export { registerWonderlandDarkTheme } from './wonderland-dark.js';
+import { registerWaldenTheme as o } from "./walden.js";
+import { registerWaldenDarkTheme as t } from "./walden-dark.js";
+import { registerWonderlandTheme as d } from "./wonderland.js";
+import { registerWonderlandDarkTheme as f } from "./wonderland-dark.js";
+export {
+  t as registerWaldenDarkTheme,
+  o as registerWaldenTheme,
+  f as registerWonderlandDarkTheme,
+  d as registerWonderlandTheme
+};

package/dist/es/charts/themes/walden-dark.js

@@ -1,8 +1,6 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { registerTheme } from 'echarts';
-
-function registerWaldenDarkTheme() {
-  registerTheme("walden-dark", {
+import { registerTheme as e } from "echarts";
+function r() {
+  e("walden-dark", {
     color: ["#5ec4f5", "#7df5d5", "#7a85b3", "#b5bdf2", "#d8f5c4", "#aee8f0"],
     backgroundColor: "rgba(0,0,0,0)",
     textStyle: {
@@ -25,7 +23,7 @@ function registerWaldenDarkTheme() {
       },
       symbolSize: "8",
       symbol: "emptyCircle",
-      smooth: false
+      smooth: !1
     },
     radar: {
       itemStyle: {
@@ -36,7 +34,7 @@ function registerWaldenDarkTheme() {
       },
       symbolSize: "8",
       symbol: "emptyCircle",
-      smooth: false
+      smooth: !1
     },
     bar: {
       itemStyle: {
@@ -130,7 +128,7 @@ function registerWaldenDarkTheme() {
       },
       symbolSize: "8",
       symbol: "emptyCircle",
-      smooth: false,
+      smooth: !1,
       color: ["#5ec4f5", "#7df5d5", "#7a85b3", "#b5bdf2", "#d8f5c4", "#aee8f0"],
       label: {
         color: "#eef1fa"
@@ -178,29 +176,29 @@ function registerWaldenDarkTheme() {
     },
     categoryAxis: {
       axisLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: "#484753"
         }
       },
       axisTick: {
-        show: false,
+        show: !1,
         lineStyle: {
           color: "#b9b8ce"
         }
       },
       axisLabel: {
-        show: true,
+        show: !0,
         color: "#b9b8ce"
       },
       splitLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: ["#2a2a3c"]
         }
       },
       splitArea: {
-        show: false,
+        show: !1,
         areaStyle: {
           color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"]
         }
@@ -208,29 +206,29 @@ function registerWaldenDarkTheme() {
     },
     valueAxis: {
       axisLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: "#484753"
         }
       },
       axisTick: {
-        show: false,
+        show: !1,
         lineStyle: {
           color: "#b9b8ce"
         }
       },
       axisLabel: {
-        show: true,
+        show: !0,
         color: "#b9b8ce"
       },
       splitLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: ["#2a2a3c"]
         }
       },
       splitArea: {
-        show: false,
+        show: !1,
         areaStyle: {
           color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"]
         }
@@ -238,29 +236,29 @@ function registerWaldenDarkTheme() {
     },
     logAxis: {
       axisLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: "#484753"
         }
       },
       axisTick: {
-        show: false,
+        show: !1,
         lineStyle: {
           color: "#b9b8ce"
         }
       },
       axisLabel: {
-        show: true,
+        show: !0,
         color: "#b9b8ce"
       },
       splitLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: ["#2a2a3c"]
         }
       },
       splitArea: {
-        show: false,
+        show: !1,
         areaStyle: {
           color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"]
         }
@@ -268,29 +266,29 @@ function registerWaldenDarkTheme() {
     },
     timeAxis: {
       axisLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: "#484753"
         }
       },
       axisTick: {
-        show: false,
+        show: !1,
         lineStyle: {
           color: "#b9b8ce"
         }
       },
       axisLabel: {
-        show: true,
+        show: !0,
         color: "#b9b8ce"
       },
       splitLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: ["#2a2a3c"]
         }
       },
       splitArea: {
-        show: false,
+        show: !1,
         areaStyle: {
           color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"]
         }
@@ -392,5 +390,6 @@ function registerWaldenDarkTheme() {
     }
   });
 }
-
-export { registerWaldenDarkTheme };
+export {
+  r as registerWaldenDarkTheme
+};

package/dist/es/charts/themes/walden.js

@@ -1,8 +1,6 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { registerTheme } from 'echarts';
-
-function registerWaldenTheme() {
-  registerTheme("walden", {
+import { registerTheme as e } from "echarts";
+function r() {
+  e("walden", {
     color: ["#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8"],
     backgroundColor: "rgba(255,255,255,0)",
     textStyle: {},
@@ -23,7 +21,7 @@ function registerWaldenTheme() {
       },
       symbolSize: "8",
       symbol: "emptyCircle",
-      smooth: false
+      smooth: !1
     },
     radar: {
       itemStyle: {
@@ -34,7 +32,7 @@ function registerWaldenTheme() {
       },
       symbolSize: "8",
       symbol: "emptyCircle",
-      smooth: false
+      smooth: !1
     },
     bar: {
       itemStyle: {
@@ -104,7 +102,7 @@ function registerWaldenTheme() {
       },
       symbolSize: "8",
       symbol: "emptyCircle",
-      smooth: false,
+      smooth: !1,
       color: ["#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8"],
       label: {
         color: "#ffffff"
@@ -152,29 +150,29 @@ function registerWaldenTheme() {
     },
     categoryAxis: {
       axisLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: "#cccccc"
         }
       },
       axisTick: {
-        show: false,
+        show: !1,
         lineStyle: {
           color: "#333"
         }
       },
       axisLabel: {
-        show: true,
+        show: !0,
         color: "#999999"
       },
       splitLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: ["#eeeeee"]
         }
       },
       splitArea: {
-        show: false,
+        show: !1,
         areaStyle: {
           color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
         }
@@ -182,29 +180,29 @@ function registerWaldenTheme() {
     },
     valueAxis: {
       axisLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: "#cccccc"
         }
       },
       axisTick: {
-        show: false,
+        show: !1,
         lineStyle: {
           color: "#333"
         }
       },
       axisLabel: {
-        show: true,
+        show: !0,
         color: "#999999"
       },
       splitLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: ["#eeeeee"]
         }
       },
       splitArea: {
-        show: false,
+        show: !1,
         areaStyle: {
           color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
         }
@@ -212,29 +210,29 @@ function registerWaldenTheme() {
     },
     logAxis: {
       axisLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: "#cccccc"
         }
       },
       axisTick: {
-        show: false,
+        show: !1,
         lineStyle: {
           color: "#333"
         }
       },
       axisLabel: {
-        show: true,
+        show: !0,
         color: "#999999"
       },
       splitLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: ["#eeeeee"]
         }
       },
       splitArea: {
-        show: false,
+        show: !1,
         areaStyle: {
           color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
         }
@@ -242,29 +240,29 @@ function registerWaldenTheme() {
     },
     timeAxis: {
       axisLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: "#cccccc"
         }
       },
       axisTick: {
-        show: false,
+        show: !1,
         lineStyle: {
           color: "#333"
         }
       },
       axisLabel: {
-        show: true,
+        show: !0,
         color: "#999999"
       },
       splitLine: {
-        show: true,
+        show: !0,
         lineStyle: {
           color: ["#eeeeee"]
         }
       },
       splitArea: {
-        show: false,
+        show: !1,
         areaStyle: {
           color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
         }
@@ -357,5 +355,6 @@ function registerWaldenTheme() {
     }
   });
 }
-
-export { registerWaldenTheme };
+export {
+  r as registerWaldenTheme
+};