v-nuxt-ui 0.1.33 → 0.1.35

package/dist/module.json

@@ -7,7 +7,7 @@
   "dependencies": [
     "@nuxt/ui"
   ],
-  "version": "0.1.33",
+  "version": "0.1.35",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/css/main.css

@@ -1 +1 @@
-:root{--ui-header-height:3.5rem;--ui-table-header-height:3rem;--ui-footer-height:3rem}::-webkit-scrollbar{height:.25rem;width:.25rem}::-webkit-scrollbar-thumb{background-color:#e5e7eb;border-radius:9999px}.dark ::-webkit-scrollbar-thumb{background-color:#404040}.dark,:root{--chart-1:var(--ui-color-primary-300);--chart-2:var(--ui-color-primary-500);--chart-3:var(--ui-color-primary-700);--chart-4:var(--ui-color-primary-900)}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:focus-visible{outline:none!important}
+:root{--ui-header-height:3.5rem;--ui-table-header-height:3rem;--ui-footer-height:3rem}::-webkit-scrollbar{height:.25rem;width:.25rem}::-webkit-scrollbar-thumb{background-color:#e5e7eb;border-radius:9999px}.dark ::-webkit-scrollbar-thumb{background-color:#404040}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:focus-visible{outline:none!important}

package/dist/runtime/components/EChart.client.vue

@@ -1,8 +1,4 @@
 <script setup>
-import { ref, useTemplateRef, watch } from "vue";
-import { useTheme } from "#v/composables/useTheme";
-import { useApp } from "#v/composables/useApp";
-import { useEChart } from "#v/composables/useEChart";
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { BarChart, PieChart, LineChart } from "echarts/charts";
@@ -14,7 +10,10 @@ import {
   ToolboxComponent
 } from "echarts/components";
 import VChart from "vue-echarts";
-import { useColorMode } from "@vueuse/core";
+import { useTheme, useApp, useEChart } from "#v/composables";
+import { useColorMode, useLocalStorage } from "@vueuse/core";
+import { ref, useTemplateRef, watch } from "vue";
+import { StorageKey } from "#v/types";
 const props = defineProps({
   option: { type: null, required: true },
   useBar: { type: Boolean, required: false, default: false },
@@ -47,13 +46,21 @@ const theme = useTheme();
 const colorMode = useColorMode();
 const app = useApp();
 const echart = useEChart();
+const rotateXAxisLabel = useLocalStorage(StorageKey.ECHART_ROTATE_X_AXIS_LABEL, false);
 const finalOption = ref({});
 const updateOption = () => {
   finalOption.value = echart.mergeOption(props.option);
 };
 const chartRef = useTemplateRef("v-chart");
 watch(
-  [() => props.option, colorMode, () => theme.primary.value, () => theme.neutral.value, () => app.appConfig.value.radius],
+  [
+    () => props.option,
+    colorMode,
+    () => theme.primary.value,
+    () => theme.neutral.value,
+    () => app.appConfig.value.radius,
+    () => rotateXAxisLabel.value
+  ],
   () => setTimeout(() => {
     updateOption();
   }, 1),

package/dist/runtime/components/SqlEditor.d.vue.ts

@@ -16,8 +16,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
-    tables: string[];
     columns: Record<string, string[]>;
+    tables: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/SqlEditor.vue.d.ts

@@ -16,8 +16,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
-    tables: string[];
     columns: Record<string, string[]>;
+    tables: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/table/query/order/Item.d.vue.ts

@@ -7,15 +7,15 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         orderOptions: OrderQueryOption<T>[];
         unselectedFields: string[];
     } & {
-        onChange?: ((args_0: string, args_1: OrderQueryOpr) => any) | undefined;
         onRemove?: (() => any) | undefined;
+        onChange?: ((args_0: string, args_1: OrderQueryOpr) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((evt: "change", args_0: string, args_1: OrderQueryOpr) => void) & ((evt: "remove") => void);
+    emit: ((evt: "remove") => void) & ((evt: "change", args_0: string, args_1: OrderQueryOpr) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/table/query/order/Item.vue.d.ts

@@ -7,15 +7,15 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         orderOptions: OrderQueryOption<T>[];
         unselectedFields: string[];
     } & {
-        onChange?: ((args_0: string, args_1: OrderQueryOpr) => any) | undefined;
         onRemove?: (() => any) | undefined;
+        onChange?: ((args_0: string, args_1: OrderQueryOpr) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((evt: "change", args_0: string, args_1: OrderQueryOpr) => void) & ((evt: "remove") => void);
+    emit: ((evt: "remove") => void) & ((evt: "change", args_0: string, args_1: OrderQueryOpr) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/composables/useEChart.d.ts

@@ -22,7 +22,6 @@ export declare const useEChart: () => {
         };
     };
     getCommonXAxisOption: () => {
-        color: string[];
         xAxis: {
             nameTextStyle: {
                 color: string;
@@ -37,6 +36,7 @@ export declare const useEChart: () => {
                 color: string;
                 interval: () => boolean;
                 hideOverlap: boolean;
+                rotate: number;
             };
             axisTick: {
                 show: boolean;
@@ -78,7 +78,6 @@ export declare const useEChart: () => {
             focus: string;
         };
         label: {
-            color: string;
             distance: number;
         };
     };
@@ -87,7 +86,6 @@ export declare const useEChart: () => {
             focus: string;
         };
         label: {
-            color: string;
             distance: number;
         };
     };

package/dist/runtime/composables/useEChart.js

@@ -1,13 +1,15 @@
-import { createSharedComposable } from "@vueuse/core";
+import { useLocalStorage, createSharedComposable } from "@vueuse/core";
 import { defu } from "defu";
 import { useApp } from "./useApp.js";
-import { useTheme } from "./useTheme.js";
+import { StorageKey } from "#v/types";
 import { triggerFileDownloadFromUrl } from "#v/utils";
 const _useEChart = () => {
   const app = useApp();
-  const theme = useTheme();
+  const rotateXAxisLabel = useLocalStorage(StorageKey.ECHART_ROTATE_X_AXIS_LABEL, false);
   const parseCSSVariableColor = (colorStr) => {
-    if (!colorStr?.startsWith("var(")) return colorStr;
+    if (!colorStr?.startsWith("var(")) {
+      return colorStr;
+    }
     const varName = colorStr.match(/var\((--[^,)]+)/)?.[1];
     if (!varName) return colorStr;
     const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
@@ -16,9 +18,14 @@ const _useEChart = () => {
   const getNormedUiTextColor = () => parseCSSVariableColor("var(--ui-text-muted)");
   const getNormedUiBorderColor = () => parseCSSVariableColor("var(--ui-border)");
   const getNormedRadius = () => Math.round((app.appConfig.value.radius ?? 0.25) * 16);
-  const getNormedChartColors = () => theme.chartColorVars.value.map((colorVar) => parseCSSVariableColor(colorVar));
   const getCommonGridOption = () => ({
-    grid: { left: "0", right: "0", bottom: "32", top: "20", containLabel: true }
+    grid: {
+      left: "0",
+      right: "0",
+      bottom: "32",
+      top: "20",
+      containLabel: true
+    }
   });
   const getCommonLegendOption = () => ({
     legend: {
@@ -27,45 +34,95 @@ const _useEChart = () => {
       itemGap: 12,
       itemWidth: 12,
       itemHeight: 12,
-      textStyle: { color: getNormedUiTextColor() },
+      textStyle: {
+        color: getNormedUiTextColor()
+      },
       icon: "circle"
     }
   });
   const getCommonXAxisOption = () => ({
-    color: getNormedChartColors(),
     xAxis: {
-      nameTextStyle: { color: getNormedUiTextColor() },
-      axisLine: { show: true, lineStyle: { color: getNormedUiBorderColor() } },
-      axisLabel: { color: getNormedUiTextColor(), interval: () => true, hideOverlap: true },
-      axisTick: { show: true, interval: () => true, lineStyle: { color: getNormedUiBorderColor() } }
+      nameTextStyle: {
+        color: getNormedUiTextColor()
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: getNormedUiBorderColor()
+        }
+      },
+      axisLabel: {
+        color: getNormedUiTextColor(),
+        interval: () => true,
+        // 始终显示所有标签,
+        hideOverlap: true,
+        rotate: rotateXAxisLabel.value ? 90 : 0
+      },
+      axisTick: {
+        show: true,
+        interval: () => true,
+        // 始终显示所有刻度线
+        lineStyle: {
+          color: getNormedUiBorderColor()
+        }
+      }
     }
   });
   const getCommonYAxisOption = () => ({
     yAxis: {
-      nameTextStyle: { color: getNormedUiTextColor() },
-      axisLine: { show: true, lineStyle: { color: getNormedUiBorderColor() } },
-      axisLabel: { color: getNormedUiTextColor() },
-      splitLine: { show: false, lineStyle: { color: getNormedUiBorderColor(), type: "dashed" } }
+      nameTextStyle: {
+        color: getNormedUiTextColor()
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: getNormedUiBorderColor()
+        }
+      },
+      axisLabel: {
+        color: getNormedUiTextColor()
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: getNormedUiBorderColor(),
+          type: "dashed"
+        }
+      }
     }
   });
   const getCommonBarOption = () => ({
-    itemStyle: { borderRadius: [getNormedRadius(), getNormedRadius(), 0, 0] },
-    emphasis: { focus: "series" },
-    label: { color: getNormedUiTextColor(), distance: 2 }
+    itemStyle: {
+      borderRadius: [getNormedRadius(), getNormedRadius(), 0, 0]
+    },
+    emphasis: {
+      focus: "series"
+    },
+    label: {
+      distance: 2
+    }
   });
-  const getCommonBarOptionWithColor = (idx) => {
-    const colors = getNormedChartColors();
-    return defu(getCommonBarOption(), { emphasis: { itemStyle: { color: colors[idx] } } });
+  const getCommonBarOptionWithColor = (_idx) => {
+    return defu(getCommonBarOption(), {
+      emphasis: {
+        itemStyle: {}
+      }
+    });
   };
   const getCommonLineOption = () => ({
-    emphasis: { focus: "series" },
-    label: { color: getNormedUiTextColor(), distance: 2 }
+    emphasis: {
+      focus: "series"
+    },
+    label: {
+      distance: 2
+    }
   });
-  const getCommonLineOptionWithColor = (idx) => {
-    const colors = getNormedChartColors();
+  const getCommonLineOptionWithColor = (_idx) => {
     return defu(getCommonLineOption(), {
-      emphasis: { lineStyle: { color: colors[idx] } },
-      lineStyle: { color: colors[idx] }
+      emphasis: {
+        lineStyle: {}
+      },
+      lineStyle: {}
     });
   };
   const getChartDataURL = (chart, options = {}) => {
@@ -75,7 +132,7 @@ const _useEChart = () => {
     try {
       return chart.getDataURL({ type: echartsType, backgroundColor, pixelRatio });
     } catch (e) {
-      console.error("Failed to get EChart dataURL:", e);
+      console.error("\u83B7\u53D6 EChart \u56FE\u8868 dataURL \u5931\u8D25\uFF1A", e);
       return null;
     }
   };
@@ -86,10 +143,75 @@ const _useEChart = () => {
     triggerFileDownloadFromUrl(dataURL, `${filename}.${type}`);
   };
   const mergeSeries = (series) => {
-    return series.map((s, seriesIndex) => {
-      if (s?.type === "bar") return defu(s, getCommonBarOptionWithColor(seriesIndex));
-      if (s?.type === "line") return defu(s, getCommonLineOptionWithColor(seriesIndex));
-      return s;
+    if (!series?.length) return [];
+    const getDataValue = (item) => {
+      if (item == null) return 0;
+      if (typeof item === "number") return item;
+      if (Array.isArray(item)) return Number(item[item.length - 1]) || 0;
+      if (typeof item === "object") {
+        const v = item.value;
+        return (Array.isArray(v) ? Number(v[v.length - 1]) : Number(v)) || 0;
+      }
+      return Number(item) || 0;
+    };
+    const stackDetails = /* @__PURE__ */ new Map();
+    series.forEach((s, idx) => {
+      if (s?.type === "bar" && s?.stack) {
+        if (!stackDetails.has(s.stack)) {
+          stackDetails.set(s.stack, { indices: [], maxLen: 0 });
+        }
+        const group = stackDetails.get(s.stack);
+        group.indices.push(idx);
+        const len = Array.isArray(s.data) ? s.data.length : 0;
+        if (len > group.maxLen) group.maxLen = len;
+      }
+    });
+    const stackRadiusOwners = /* @__PURE__ */ new Map();
+    for (const [stack, { indices, maxLen }] of stackDetails) {
+      const owners = new Array(maxLen).fill(-1);
+      for (let i = 0; i < maxLen; i++) {
+        for (let j = indices.length - 1; j >= 0; j--) {
+          const sIdx = indices[j];
+          const val = getDataValue(series[sIdx]?.data?.[i]);
+          if (val !== 0) {
+            owners[i] = sIdx;
+            break;
+          }
+        }
+      }
+      stackRadiusOwners.set(stack, owners);
+    }
+    const radius = getNormedRadius();
+    const radiusStyle = { borderRadius: [radius, radius, 0, 0] };
+    const noRadiusStyle = { borderRadius: 0 };
+    return series.map((s, idx) => {
+      if (!s) return s;
+      if (s.type === "line") {
+        return defu(s, getCommonLineOptionWithColor(idx));
+      }
+      if (s.type !== "bar") return s;
+      const isStack = !!s.stack;
+      const baseOption = getCommonBarOptionWithColor(idx);
+      if (isStack) {
+        baseOption.itemStyle = { ...baseOption.itemStyle, ...noRadiusStyle };
+      }
+      const merged = defu(s, baseOption);
+      if (isStack && Array.isArray(merged.data)) {
+        const owners = stackRadiusOwners.get(s.stack);
+        if (owners) {
+          merged.data = merged.data.map((item, i) => {
+            if (i < owners.length && owners[i] === idx) {
+              const itemObj = item !== null && typeof item === "object" && !Array.isArray(item) ? item : { value: item };
+              return {
+                ...itemObj,
+                itemStyle: { ...itemObj.itemStyle, ...radiusStyle }
+              };
+            }
+            return item;
+          });
+        }
+      }
+      return merged;
     });
   };
   const mergeOption = (option) => {

package/dist/runtime/types/storage.d.ts

@@ -6,7 +6,8 @@ export declare enum StorageKey {
     FLOW_EDGE_STROKE_WIDTH = "flow_edge_stroke_width",
     FLOW_EDGE_MARKER_START = "flow_edge_marker_start",
     FLOW_EDGE_MARKER_END = "flow_edge_marker_end",
-    FLOW_NODE_BORDER_WIDTH = "flow_node_border_width"
+    FLOW_NODE_BORDER_WIDTH = "flow_node_border_width",
+    ECHART_ROTATE_X_AXIS_LABEL = "echart_rotate_x_axis_label"
 }
 export type Column = {
     accessorKey: string;

package/dist/runtime/types/storage.js

@@ -7,5 +7,6 @@ export var StorageKey = /* @__PURE__ */ ((StorageKey2) => {
   StorageKey2["FLOW_EDGE_MARKER_START"] = "flow_edge_marker_start";
   StorageKey2["FLOW_EDGE_MARKER_END"] = "flow_edge_marker_end";
   StorageKey2["FLOW_NODE_BORDER_WIDTH"] = "flow_node_border_width";
+  StorageKey2["ECHART_ROTATE_X_AXIS_LABEL"] = "echart_rotate_x_axis_label";
   return StorageKey2;
 })(StorageKey || {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-nuxt-ui",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "description": "Veken UI Component Library - Reusable Nuxt UI components, composables, and utilities for enterprise applications",
   "type": "module",
   "style": "./dist/runtime/index.css",