nuxt-echarts 0.3.1 → 0.3.3

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.2.0"
   },
-  "version": "0.3.1",
+  "version": "0.3.3",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/runtime/components/VChart.d.ts

@@ -1,5 +1,6 @@
 import { type PropType } from 'vue';
 import type { Option, Theme, InitOptions, UpdateOptions } from '../types.js';
+import { type PublicMethods } from '../composables/index.js';
 import { type EChartsElement } from '../utils/wc.js';
 import '#build/echarts.mjs';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -18,157 +19,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     group: StringConstructor;
     manualUpdate: BooleanConstructor;
 }>, {
-    resize: (opts?: import("echarts/core").ResizeOpts) => void;
-    getWidth: () => number;
-    getHeight: () => number;
-    getDom: () => HTMLElement;
-    getOption: () => import("echarts/core").EChartsCoreOption;
-    dispatchAction: (payload: import("echarts/core").Payload, opt?: boolean | {
-        silent?: boolean;
-        flush?: boolean | undefined;
-    }) => void;
-    convertToPixel: {
-        (finder: string | {
-            seriesIndex?: number | false | number[] | "none" | "all";
-            seriesId?: (string | number) | (string | number)[];
-            seriesName?: (string | number) | (string | number)[];
-            geoIndex?: number | false | number[] | "none" | "all";
-            geoId?: (string | number) | (string | number)[];
-            geoName?: (string | number) | (string | number)[];
-            bmapIndex?: number | false | number[] | "none" | "all";
-            bmapId?: (string | number) | (string | number)[];
-            bmapName?: (string | number) | (string | number)[];
-            xAxisIndex?: number | false | number[] | "none" | "all";
-            xAxisId?: (string | number) | (string | number)[];
-            xAxisName?: (string | number) | (string | number)[];
-            yAxisIndex?: number | false | number[] | "none" | "all";
-            yAxisId?: (string | number) | (string | number)[];
-            yAxisName?: (string | number) | (string | number)[];
-            gridIndex?: number | false | number[] | "none" | "all";
-            gridId?: (string | number) | (string | number)[];
-            gridName?: (string | number) | (string | number)[];
-            dataIndex?: number;
-            dataIndexInside?: number;
-        }, value: Date | (string | number)): number;
-        (finder: string | {
-            seriesIndex?: number | false | number[] | "none" | "all";
-            seriesId?: (string | number) | (string | number)[];
-            seriesName?: (string | number) | (string | number)[];
-            geoIndex?: number | false | number[] | "none" | "all";
-            geoId?: (string | number) | (string | number)[];
-            geoName?: (string | number) | (string | number)[];
-            bmapIndex?: number | false | number[] | "none" | "all";
-            bmapId?: (string | number) | (string | number)[];
-            bmapName?: (string | number) | (string | number)[];
-            xAxisIndex?: number | false | number[] | "none" | "all";
-            xAxisId?: (string | number) | (string | number)[];
-            xAxisName?: (string | number) | (string | number)[];
-            yAxisIndex?: number | false | number[] | "none" | "all";
-            yAxisId?: (string | number) | (string | number)[];
-            yAxisName?: (string | number) | (string | number)[];
-            gridIndex?: number | false | number[] | "none" | "all";
-            gridId?: (string | number) | (string | number)[];
-            gridName?: (string | number) | (string | number)[];
-            dataIndex?: number;
-            dataIndexInside?: number;
-        }, value: (Date | (string | number))[]): number[];
-    };
-    convertFromPixel: {
-        (finder: string | {
-            seriesIndex?: number | false | number[] | "none" | "all";
-            seriesId?: (string | number) | (string | number)[];
-            seriesName?: (string | number) | (string | number)[];
-            geoIndex?: number | false | number[] | "none" | "all";
-            geoId?: (string | number) | (string | number)[];
-            geoName?: (string | number) | (string | number)[];
-            bmapIndex?: number | false | number[] | "none" | "all";
-            bmapId?: (string | number) | (string | number)[];
-            bmapName?: (string | number) | (string | number)[];
-            xAxisIndex?: number | false | number[] | "none" | "all";
-            xAxisId?: (string | number) | (string | number)[];
-            xAxisName?: (string | number) | (string | number)[];
-            yAxisIndex?: number | false | number[] | "none" | "all";
-            yAxisId?: (string | number) | (string | number)[];
-            yAxisName?: (string | number) | (string | number)[];
-            gridIndex?: number | false | number[] | "none" | "all";
-            gridId?: (string | number) | (string | number)[];
-            gridName?: (string | number) | (string | number)[];
-            dataIndex?: number;
-            dataIndexInside?: number;
-        }, value: number): number;
-        (finder: string | {
-            seriesIndex?: number | false | number[] | "none" | "all";
-            seriesId?: (string | number) | (string | number)[];
-            seriesName?: (string | number) | (string | number)[];
-            geoIndex?: number | false | number[] | "none" | "all";
-            geoId?: (string | number) | (string | number)[];
-            geoName?: (string | number) | (string | number)[];
-            bmapIndex?: number | false | number[] | "none" | "all";
-            bmapId?: (string | number) | (string | number)[];
-            bmapName?: (string | number) | (string | number)[];
-            xAxisIndex?: number | false | number[] | "none" | "all";
-            xAxisId?: (string | number) | (string | number)[];
-            xAxisName?: (string | number) | (string | number)[];
-            yAxisIndex?: number | false | number[] | "none" | "all";
-            yAxisId?: (string | number) | (string | number)[];
-            yAxisName?: (string | number) | (string | number)[];
-            gridIndex?: number | false | number[] | "none" | "all";
-            gridId?: (string | number) | (string | number)[];
-            gridName?: (string | number) | (string | number)[];
-            dataIndex?: number;
-            dataIndexInside?: number;
-        }, value: number[]): number[];
+    setOption: {
+        <Opt extends import("echarts/core").EChartsCoreOption>(option: Opt, notMerge?: boolean, lazyUpdate?: boolean): void;
+        <Opt extends import("echarts/core").EChartsCoreOption>(option: Opt, opts?: import("echarts/core").SetOptionOpts): void;
     };
-    containPixel: (finder: string | {
-        seriesIndex?: number | false | number[] | "none" | "all";
-        seriesId?: (string | number) | (string | number)[];
-        seriesName?: (string | number) | (string | number)[];
-        geoIndex?: number | false | number[] | "none" | "all";
-        geoId?: (string | number) | (string | number)[];
-        geoName?: (string | number) | (string | number)[];
-        bmapIndex?: number | false | number[] | "none" | "all";
-        bmapId?: (string | number) | (string | number)[];
-        bmapName?: (string | number) | (string | number)[];
-        xAxisIndex?: number | false | number[] | "none" | "all";
-        xAxisId?: (string | number) | (string | number)[];
-        xAxisName?: (string | number) | (string | number)[];
-        yAxisIndex?: number | false | number[] | "none" | "all";
-        yAxisId?: (string | number) | (string | number)[];
-        yAxisName?: (string | number) | (string | number)[];
-        gridIndex?: number | false | number[] | "none" | "all";
-        gridId?: (string | number) | (string | number)[];
-        gridName?: (string | number) | (string | number)[];
-        dataIndex?: number;
-        dataIndexInside?: number;
-    }, value: number[]) => boolean;
-    getDataURL: (opts?: {
-        type?: "png" | "jpeg" | "svg";
-        pixelRatio?: number;
-        backgroundColor?: import("echarts/core").Color;
-        excludeComponents?: string[];
-    }) => string;
-    getConnectedDataURL: (opts?: {
-        type?: "png" | "jpeg" | "svg";
-        pixelRatio?: number;
-        backgroundColor?: import("echarts/core").Color;
-        connectedBackgroundColor?: import("echarts/core").Color;
-        excludeComponents?: string[];
-    }) => string;
-    appendData: (params: {
-        seriesIndex: number;
-        data: any;
-    }) => void;
-    clear: () => void;
-    isDisposed: () => boolean;
-    dispose: () => void;
-    chart: import("vue").ShallowRef<import("echarts/core").ECharts | undefined, import("echarts/core").ECharts | undefined>;
     root: import("vue").ShallowRef<EChartsElement | undefined, EChartsElement | undefined>;
-    setOption: (option: Option, updateOptions?: UpdateOptions) => void;
-    realAttrs: import("vue").ComputedRef<{
-        [x: string]: any;
-    }>;
-    nativeListeners: import("vue").ShallowRef<Record<string, unknown>, Record<string, unknown>>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    chart: import("vue").ShallowRef<import("echarts/core").ECharts | undefined, import("echarts/core").ECharts | undefined>;
+} & PublicMethods, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (params: import("echarts/core").ECElementEvent) => void;
     dblclick: (params: import("echarts/core").ECElementEvent) => void;
     mouseout: (params: import("echarts/core").ECElementEvent) => void;

package/dist/runtime/components/VChart.js

@@ -2,7 +2,7 @@ import {
   defineComponent,
   shallowRef,
   toRefs,
-  unref,
+  toValue,
   watch,
   computed,
   inject,
@@ -44,7 +44,7 @@ export default defineComponent({
   },
   emits: {},
   inheritAttrs: false,
-  setup(props, { attrs }) {
+  setup(props, { attrs, expose }) {
     const root = shallowRef();
     const chart = shallowRef();
     const manualOption = shallowRef();
@@ -55,36 +55,43 @@ export default defineComponent({
     const realOption = computed(
       () => manualOption.value || props.option || null
     );
-    const realTheme = computed(() => props.theme || unref(defaultTheme) || {});
+    const realTheme = computed(() => props.theme || toValue(defaultTheme) || {});
     const realInitOptions = computed(
-      () => props.initOptions || unref(defaultInitOptions) || {}
+      () => props.initOptions || toValue(defaultInitOptions) || {}
     );
     const realUpdateOptions = computed(
-      () => props.updateOptions || unref(defaultUpdateOptions) || {}
+      () => props.updateOptions || toValue(defaultUpdateOptions) || {}
     );
     const nativeListeners = shallowRef({});
     const realAttrs = computed(() => ({
       ...omitOn(attrs),
       ...nativeListeners.value
     }));
-    const realListeners = {};
-    function init(option) {
+    const listeners = /* @__PURE__ */ new Map();
+    function collectListeners() {
       const _nativeListeners = {};
       Object.keys(attrs).filter((key) => isOn(key)).forEach((key) => {
-        let event = key.charAt(2).toLowerCase() + key.slice(3);
-        if (event.indexOf("native:") === 0) {
-          const nativeKey = `on${event.charAt(7).toUpperCase()}${event.slice(
-            8
-          )}`;
+        if (key.indexOf("Native:") === 2) {
+          const nativeKey = `on${key.charAt(9).toUpperCase()}${key.slice(10)}`;
           _nativeListeners[nativeKey] = attrs[key];
           return;
         }
+        let event = key.charAt(2).toLowerCase() + key.slice(3);
+        let zr;
+        if (event.indexOf("zr:") === 0) {
+          zr = true;
+          event = event.substring(3);
+        }
+        let once;
         if (event.substring(event.length - 4) === "Once") {
-          event = `~${event.substring(0, event.length - 4)}`;
+          once = true;
+          event = event.substring(0, event.length - 4);
         }
-        realListeners[event] = attrs[key];
+        listeners.set({ event, zr, once }, attrs[key]);
       });
       nativeListeners.value = _nativeListeners;
+    }
+    function init(option) {
       if (!root.value) {
         return;
       }
@@ -96,23 +103,12 @@ export default defineComponent({
       if (props.group) {
         instance.group = props.group;
       }
-      Object.keys(realListeners).forEach((key) => {
-        let handler = realListeners[key];
+      listeners.forEach((handler, { zr, once, event }) => {
         if (!handler) {
           return;
         }
-        let event = key.toLowerCase();
-        if (event.charAt(0) === "~") {
-          event = event.substring(1);
-          handler.__once__ = true;
-        }
-        let target = instance;
-        if (event.indexOf("zr:") === 0) {
-          target = instance.getZr();
-          event = event.substring(3);
-        }
-        if (handler.__once__) {
-          delete handler.__once__;
+        const target = zr ? instance.getZr() : instance;
+        if (once) {
           const raw = handler;
           handler = (...args) => {
             raw(...args);
@@ -141,7 +137,8 @@ export default defineComponent({
         commit();
       }
     }
-    function setOption(option, updateOptions) {
+    const setOption = (option, notMerge, lazyUpdate) => {
+      const updateOptions = typeof notMerge === "boolean" ? { notMerge, lazyUpdate } : notMerge;
       if (props.manualUpdate) {
         manualOption.value = option;
       }
@@ -150,7 +147,7 @@ export default defineComponent({
       } else {
         chart.value.setOption(option, updateOptions || {});
       }
-    }
+    };
     function cleanup() {
       if (chart.value) {
         chart.value.dispose();
@@ -210,6 +207,7 @@ export default defineComponent({
     useLoading(chart, loading, loadingOptions);
     useAutoresize(chart, autoresize, root);
     onMounted(async () => {
+      collectListeners();
       if (!root.value) await nextTick();
       init();
     });
@@ -220,19 +218,16 @@ export default defineComponent({
         cleanup();
       }
     });
-    return {
-      chart,
-      root,
+    const exposed = {
       setOption,
-      realAttrs,
-      nativeListeners,
-      ...publicApi
+      root,
+      chart
     };
-  },
-  render() {
-    const attrs = this.realAttrs;
-    attrs.ref = "root";
-    attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";
-    return h(TAG_NAME, attrs);
+    expose({ ...exposed, ...publicApi });
+    return () => h(TAG_NAME, {
+      ...realAttrs.value,
+      ref: root,
+      class: ["echarts", realAttrs.value.class]
+    });
   }
 });

package/dist/runtime/components/VChartServer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, unref, inject, ref } from "vue";
+import { computed, inject, ref, toValue } from "vue";
 import { THEME_KEY, INIT_OPTIONS_KEY } from "../utils/injection";
 const defaultTheme = inject(THEME_KEY, null);
 const defaultInitOptions = inject(INIT_OPTIONS_KEY, null);
@@ -9,9 +9,9 @@ const props = defineProps({
   initOptions: { type: null, required: false }
 });
 const emits = defineEmits(["error"]);
-const realTheme = computed(() => props.theme || unref(defaultTheme) || {});
+const realTheme = computed(() => props.theme || toValue(defaultTheme) || {});
 const realInitOptions = computed(
-  () => props.initOptions || unref(defaultInitOptions) || {}
+  () => props.initOptions || toValue(defaultInitOptions) || {}
 );
 function onError(e) {
   if (e instanceof TypeError && e.message === "Cannot read properties of undefined (reading 'link')") {
@@ -23,17 +23,17 @@ const root = ref(null);
 </script>
 
 <template>
-  <div class="vue-echarts-server">
-    <VChartIsland
-      ref="root"
-      :theme="realTheme"
-      :option="option"
-      :init-options="realInitOptions"
-      @error="onError"
-    >
-      <template #fallback>
-        <slot name="fallback" />
-      </template>
-    </VChartIsland>
-  </div>
+  <div class="vue-echarts-server">
+    <VChartIsland
+      ref="root"
+      :theme="realTheme"
+      :option="option"
+      :init-options="realInitOptions"
+      @error="onError"
+    >
+      <template #fallback>
+        <slot name="fallback" />
+      </template>
+    </VChartIsland>
+  </div>
 </template>

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

@@ -2,6 +2,6 @@ import type { Ref } from 'vue';
 import type { EChartsType } from '../types.js';
 declare const METHOD_NAMES: readonly ["getWidth", "getHeight", "getDom", "getOption", "resize", "dispatchAction", "convertToPixel", "convertFromPixel", "containPixel", "getDataURL", "getConnectedDataURL", "appendData", "clear", "isDisposed", "dispose"];
 type MethodName = (typeof METHOD_NAMES)[number];
-type PublicMethods = Pick<EChartsType, MethodName>;
+export type PublicMethods = Pick<EChartsType, MethodName>;
 export declare function usePublicAPI(chart: Ref<EChartsType | undefined>): PublicMethods;
 export {};

package/dist/runtime/composables/autoresize.js

@@ -25,6 +25,9 @@ export function useAutoresize(chart, autoresize, root) {
               return;
             }
           }
+          if (root2.offsetWidth === 0 || root2.offsetHeight === 0) {
+            return;
+          }
           resizeCallback(entry, observer);
         });
         ro.observe(root2);

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

@@ -1,6 +1,6 @@
 import { type Ref, type InjectionKey, type PropType } from 'vue';
-import type { EChartsType, LoadingOptions } from '../types.js';
-export declare const LOADING_OPTIONS_KEY: InjectionKey<LoadingOptions | Ref<LoadingOptions>>;
+import type { EChartsType, LoadingOptions, LoadingOptionsInjection } from '../types.js';
+export declare const LOADING_OPTIONS_KEY: InjectionKey<LoadingOptionsInjection>;
 export declare function useLoading(chart: Ref<EChartsType | undefined>, loading: Ref<boolean>, loadingOptions: Ref<LoadingOptions | undefined>): void;
 export declare const loadingProps: {
     loading: BooleanConstructor;

package/dist/runtime/composables/loading.js

@@ -1,14 +1,14 @@
 import {
-  unref,
+  toValue,
   inject,
   computed,
   watchEffect
 } from "vue";
-export const LOADING_OPTIONS_KEY = "ecLoadingOptions";
+export const LOADING_OPTIONS_KEY = Symbol();
 export function useLoading(chart, loading, loadingOptions) {
   const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {});
   const realLoadingOptions = computed(() => ({
-    ...unref(defaultLoadingOptions) || {},
+    ...toValue(defaultLoadingOptions) || {},
     ...loadingOptions?.value
   }));
   watchEffect(() => {

package/dist/runtime/server-plugin.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/types.d.ts

@@ -1,6 +1,6 @@
 import type { init, SetOptionOpts, ECElementEvent, ElementEvent } from 'echarts/core';
-import type { MaybeRef } from 'vue';
-export type Injection<T> = MaybeRef<T | null>;
+import type { MaybeRefOrGetter } from 'vue';
+export type Injection<T> = MaybeRefOrGetter<T | null>;
 type InitType = typeof init;
 export type InitParameters = Parameters<InitType>;
 export type Theme = NonNullable<InitParameters[1]>;
@@ -10,9 +10,7 @@ export type InitOptionsInjection = Injection<InitOptions>;
 export type UpdateOptions = SetOptionOpts;
 export type UpdateOptionsInjection = Injection<UpdateOptions>;
 export type EChartsType = ReturnType<InitType>;
-type ZRenderType = ReturnType<EChartsType['getZr']>;
-export type EventTarget = EChartsType | ZRenderType;
-type SetOptionType = EChartsType['setOption'];
+export type SetOptionType = EChartsType['setOption'];
 export type Option = Parameters<SetOptionType>[0];
 export type LoadingOptions = {
     text?: string;
@@ -28,6 +26,7 @@ export type LoadingOptions = {
     lineWidth?: number;
     zlevel?: number;
 };
+export type LoadingOptionsInjection = Injection<LoadingOptions>;
 type MouseEventName = 'click' | 'dblclick' | 'mouseout' | 'mouseover' | 'mouseup' | 'mousedown' | 'mousemove' | 'contextmenu' | 'globalout';
 type ElementEventName = MouseEventName | 'mousewheel' | 'drag' | 'dragstart' | 'dragend' | 'dragenter' | 'dragleave' | 'dragover' | 'drop';
 type ZRenderEventName = `zr:${ElementEventName}`;

package/dist/runtime/utils/injection.js

@@ -1,4 +1,4 @@
-export const THEME_KEY = "ecTheme";
-export const INIT_OPTIONS_KEY = "ecInitOptions";
-export const UPDATE_OPTIONS_KEY = "ecUpdateOptions";
+export const THEME_KEY = Symbol();
+export const INIT_OPTIONS_KEY = Symbol();
+export const UPDATE_OPTIONS_KEY = Symbol();
 export { LOADING_OPTIONS_KEY } from "../composables/index.js";

package/dist/runtime/utils/wc.js

@@ -1,7 +1,8 @@
 let registered = null;
 export const TAG_NAME = "x-vue-echarts";
-if (import.meta.server) {
+if (typeof HTMLElement === "undefined") {
   globalThis.HTMLElement = Object;
+  registered = false;
 }
 export class EChartsElement extends HTMLElement {
   __dispose = null;
@@ -16,9 +17,6 @@ export function register() {
   if (registered != null) {
     return registered;
   }
-  if (typeof HTMLElement === "undefined" || typeof customElements === "undefined") {
-    return registered = false;
-  }
   try {
     if (customElements.get(TAG_NAME) == null) {
       customElements.define(TAG_NAME, EChartsElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-echarts",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Nuxt Module for Apache ECharts™",
   "keywords": [
     "vue",
@@ -14,7 +14,7 @@
   "repository": "kingyue737/nuxt-echarts",
   "license": "MIT",
   "type": "module",
-  "packageManager": "pnpm@10.10.0",
+  "packageManager": "pnpm@10.11.0",
   "exports": {
     ".": {
       "types": "./dist/types.d.mts",
@@ -43,23 +43,24 @@
     "test:types": "vue-tsc --noEmit && nuxi typecheck playground"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.17.3",
-    "echarts": "^5.6.0"
+    "@nuxt/kit": "^3.17.4"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.3.1",
+    "@nuxt/eslint-config": "^1.4.1",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/schema": "^3.17.3",
-    "@nuxt/test-utils": "^3.18.0",
-    "@types/node": "^22.15.18",
+    "@nuxt/schema": "^3.17.4",
+    "@nuxt/test-utils": "^3.19.1",
+    "@types/node": "^22.15.24",
     "changelogen": "^0.6.1",
-    "eslint": "^9.26.0",
-    "nuxt": "^3.17.3",
+    "echarts": "^5.6.0",
+    "echarts-gl": "^2.0.9",
+    "eslint": "^9.27.0",
+    "nuxt": "^3.17.4",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
-    "vitest": "^3.1.3",
+    "vitest": "^3.1.4",
     "vue-tsc": "^2.2.10"
   },
   "peerDependencies": {