v-nuxt-ui 0.2.13 → 0.2.15

package/dist/module.json

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

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

@@ -5,11 +5,15 @@ interface Props {
     useLine?: boolean;
     useGrid?: boolean;
     useRadar?: boolean;
+    enableXAxis?: boolean;
+    enableYAxis?: boolean;
     colors?: string[];
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {
     downloadImage: (filenamePrefix?: string) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    enableXAxis: boolean;
+    enableYAxis: boolean;
     useBar: boolean;
     usePie: boolean;
     useLine: boolean;

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

@@ -13,7 +13,7 @@ import {
 import VChart from "vue-echarts";
 import { useTheme, useApp, useEChart } from "#v/composables";
 import { useColorMode, useLocalStorage } from "@vueuse/core";
-import { ref, useTemplateRef, watch } from "vue";
+import { nextTick, ref, useTemplateRef, watch } from "vue";
 import { StorageKey } from "#v/types";
 const props = defineProps({
   option: { type: null, required: true },
@@ -22,6 +22,8 @@ const props = defineProps({
   useLine: { type: Boolean, required: false, default: false },
   useGrid: { type: Boolean, required: false, default: false },
   useRadar: { type: Boolean, required: false },
+  enableXAxis: { type: Boolean, required: false, default: true },
+  enableYAxis: { type: Boolean, required: false, default: true },
   colors: { type: Array, required: false, default: () => [] }
 });
 const chartsToUse = [CanvasRenderer];
@@ -57,23 +59,29 @@ const echart = useEChart();
 const rotateXAxisLabel = useLocalStorage(StorageKey.ECHART_ROTATE_X_AXIS_LABEL, false);
 const finalOption = ref({});
 const updateOption = () => {
-  finalOption.value = echart.mergeOption(props.option);
+  finalOption.value = echart.mergeOption(props.option, {
+    enableXAxis: props.enableXAxis,
+    enableYAxis: props.enableYAxis
+  });
 };
 const devicePixelRatio = window.devicePixelRatio || 1;
 const chartRef = useTemplateRef("v-chart");
 watch(
   [
     () => props.option,
-    colorMode,
+    () => colorMode.value,
+    () => props.enableXAxis,
+    () => props.enableYAxis,
     () => theme.primary.value,
     () => theme.neutral.value,
     () => app.appConfig.value.radius,
     () => rotateXAxisLabel.value
   ],
-  () => setTimeout(() => {
+  async () => {
+    await nextTick();
     updateOption();
-  }, 1),
-  { immediate: true, deep: true }
+  },
+  { immediate: true, deep: true, flush: "post" }
 );
 defineExpose({
   downloadImage: (filenamePrefix) => {

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

@@ -5,11 +5,15 @@ interface Props {
     useLine?: boolean;
     useGrid?: boolean;
     useRadar?: boolean;
+    enableXAxis?: boolean;
+    enableYAxis?: boolean;
     colors?: string[];
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {
     downloadImage: (filenamePrefix?: string) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    enableXAxis: boolean;
+    enableYAxis: boolean;
     useBar: boolean;
     usePie: boolean;
     useLine: boolean;

package/dist/runtime/components/Watermark.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useColorMode } from "@vueuse/core";
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, nextTick } from "vue";
 const props = defineProps({
   text: { type: [String, Array], required: false, default: "Watermark" },
   fontSize: { type: Number, required: false, default: 13 },
@@ -137,9 +137,8 @@ watch(
   { immediate: true, deep: true }
 );
 const colorMode = useColorMode();
-watch(() => colorMode.value, generateWatermark);
-onMounted(() => {
-  generateWatermark();
+watch(() => colorMode.value, () => {
+  nextTick(generateWatermark);
 });
 </script>
 

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

@@ -1,3 +1,7 @@
+interface MergeOptionConfig {
+    enableXAxis?: boolean;
+    enableYAxis?: boolean;
+}
 export declare const useEChart: () => {
     getCommonGridOption: () => {
         grid: {
@@ -21,7 +25,7 @@ export declare const useEChart: () => {
             icon: string;
         };
     };
-    getCommonXAxisOption: () => {
+    getCommonXAxisOption: (enableXAxis?: boolean) => {
         xAxis: {
             nameTextStyle: {
                 color: string;
@@ -47,7 +51,7 @@ export declare const useEChart: () => {
             };
         };
     };
-    getCommonYAxisOption: () => {
+    getCommonYAxisOption: (enableYAxis?: boolean) => {
         yAxis: {
             nameTextStyle: {
                 color: string;
@@ -90,7 +94,7 @@ export declare const useEChart: () => {
         };
     };
     mergeSeries: (series: any[]) => any[];
-    mergeOption: (option: any) => any;
+    mergeOption: (option: any, config?: MergeOptionConfig) => any;
     parseCSSVariableColor: (colorStr: string) => string;
     exportChartAsImage: (chart: any, options?: {
         type?: string;
@@ -99,3 +103,4 @@ export declare const useEChart: () => {
         filename?: string;
     }) => void;
 };
+export {};

package/dist/runtime/composables/useEChart.js

@@ -40,13 +40,13 @@ const _useEChart = () => {
       icon: "circle"
     }
   });
-  const getCommonXAxisOption = () => ({
+  const getCommonXAxisOption = (enableXAxis = true) => ({
     xAxis: {
       nameTextStyle: {
         color: getNormedUiTextColor()
       },
       axisLine: {
-        show: true,
+        show: enableXAxis,
         lineStyle: {
           color: getNormedUiBorderColor()
         }
@@ -59,7 +59,7 @@ const _useEChart = () => {
         rotate: rotateXAxisLabel.value ? 90 : 0
       },
       axisTick: {
-        show: true,
+        show: enableXAxis,
         interval: () => true,
         // 始终显示所有刻度线
         lineStyle: {
@@ -68,13 +68,13 @@ const _useEChart = () => {
       }
     }
   });
-  const getCommonYAxisOption = () => ({
+  const getCommonYAxisOption = (enableYAxis = true) => ({
     yAxis: {
       nameTextStyle: {
         color: getNormedUiTextColor()
       },
       axisLine: {
-        show: true,
+        show: enableYAxis,
         lineStyle: {
           color: getNormedUiBorderColor()
         }
@@ -214,11 +214,24 @@ const _useEChart = () => {
       return merged;
     });
   };
-  const mergeOption = (option) => {
-    const commonOption = defu(getCommonGridOption(), getCommonLegendOption(), getCommonXAxisOption(), getCommonYAxisOption());
+  const mergeOption = (option, config = {}) => {
+    const {
+      enableXAxis = true,
+      enableYAxis = true
+    } = config;
+    const commonOption = defu(
+      getCommonGridOption(),
+      getCommonLegendOption(),
+      getCommonXAxisOption(enableXAxis),
+      getCommonYAxisOption(enableYAxis)
+    );
     const merged = defu(option, commonOption);
+    if (merged.xAxis && Array.isArray(merged.xAxis) && merged.xAxis.length > 1) {
+      const xAxisDefaults = getCommonXAxisOption(enableXAxis).xAxis;
+      merged.xAxis = merged.xAxis.map((axis) => defu(axis, xAxisDefaults));
+    }
     if (merged.yAxis && Array.isArray(merged.yAxis) && merged.yAxis.length > 1) {
-      const yAxisDefaults = getCommonYAxisOption().yAxis;
+      const yAxisDefaults = getCommonYAxisOption(enableYAxis).yAxis;
       merged.yAxis = merged.yAxis.map((axis) => defu(axis, yAxisDefaults));
     }
     if (merged.series && Array.isArray(merged.series)) {

package/package.json

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