nuxt-echarts 0.0.1 → 0.0.4

package/dist/runtime/components/VChart.client.js

@@ -0,0 +1,240 @@
+import {
+  defineComponent,
+  shallowRef,
+  toRefs,
+  unref,
+  watch,
+  computed,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  h,
+  nextTick,
+  watchEffect
+} from "vue";
+import { init as initChart } from "echarts/core";
+import {
+  usePublicAPI,
+  useAutoresize,
+  autoresizeProps,
+  useLoading,
+  loadingProps
+} from "../composables/index.js";
+import { isOn, omitOn } from "../utils/on.js";
+import { register, TAG_NAME } from "../utils/wc.js";
+import "#build/echarts.mjs";
+import {
+  THEME_KEY,
+  INIT_OPTIONS_KEY,
+  UPDATE_OPTIONS_KEY
+} from "../utils/injection.js";
+const wcRegistered = register();
+export default defineComponent({
+  name: "VChart",
+  props: {
+    option: Object,
+    theme: {
+      type: [Object, String]
+    },
+    initOptions: Object,
+    updateOptions: Object,
+    group: String,
+    manualUpdate: Boolean,
+    ...autoresizeProps,
+    ...loadingProps
+  },
+  emits: {},
+  inheritAttrs: false,
+  setup(props, { attrs }) {
+    const root = shallowRef();
+    const inner = shallowRef();
+    const chart = shallowRef();
+    const manualOption = shallowRef();
+    const defaultTheme = inject(THEME_KEY, null);
+    const defaultInitOptions = inject(INIT_OPTIONS_KEY, null);
+    const defaultUpdateOptions = inject(UPDATE_OPTIONS_KEY, null);
+    const { autoresize, manualUpdate, loading, loadingOptions } = toRefs(props);
+    const realOption = computed(
+      () => manualOption.value || props.option || null
+    );
+    const realTheme = computed(() => props.theme || unref(defaultTheme) || {});
+    const realInitOptions = computed(
+      // @ts-expect-error unknown computed type error
+      () => props.initOptions || unref(defaultInitOptions) || {}
+    );
+    const realUpdateOptions = computed(
+      // @ts-expect-error unknown computed type error
+      () => props.updateOptions || unref(defaultUpdateOptions) || {}
+    );
+    const nonEventAttrs = computed(() => omitOn(attrs));
+    const nativeListeners = {};
+    const realListeners = {};
+    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
+        )}`;
+        nativeListeners[nativeKey] = attrs[key];
+        return;
+      }
+      if (event.substring(event.length - 4) === "Once") {
+        event = `~${event.substring(0, event.length - 4)}`;
+      }
+      realListeners[event] = attrs[key];
+    });
+    function init(option) {
+      if (!inner.value) {
+        return;
+      }
+      const instance = chart.value = initChart(
+        inner.value,
+        realTheme.value,
+        realInitOptions.value
+      );
+      if (props.group) {
+        instance.group = props.group;
+      }
+      Object.keys(realListeners).forEach((key) => {
+        let handler = realListeners[key];
+        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 raw = handler;
+          handler = (...args) => {
+            raw(...args);
+            target.off(event, handler);
+          };
+        }
+        target.on(event, handler);
+      });
+      function resize() {
+        if (instance && !instance.isDisposed()) {
+          instance.resize();
+        }
+      }
+      function commit() {
+        const opt = option || realOption.value;
+        if (opt) {
+          instance.setOption(opt, realUpdateOptions.value);
+        }
+      }
+      if (autoresize.value) {
+        nextTick(() => {
+          resize();
+          commit();
+        });
+      } else {
+        commit();
+      }
+    }
+    function setOption(option, updateOptions) {
+      if (props.manualUpdate) {
+        manualOption.value = option;
+      }
+      if (!chart.value) {
+        init(option);
+      } else {
+        chart.value.setOption(option, updateOptions || {});
+      }
+    }
+    function cleanup() {
+      if (chart.value) {
+        chart.value.dispose();
+        chart.value = void 0;
+      }
+    }
+    let unwatchOption = null;
+    watch(
+      manualUpdate,
+      (manualUpdate2) => {
+        if (typeof unwatchOption === "function") {
+          unwatchOption();
+          unwatchOption = null;
+        }
+        if (!manualUpdate2) {
+          unwatchOption = watch(
+            () => props.option,
+            (option, oldOption) => {
+              if (!option) {
+                return;
+              }
+              if (!chart.value) {
+                init();
+              } else {
+                chart.value.setOption(option, {
+                  // mutating `option` will lead to `notMerge: false` and
+                  // replacing it with new reference will lead to `notMerge: true`
+                  notMerge: option !== oldOption,
+                  ...realUpdateOptions.value
+                });
+              }
+            },
+            { deep: true }
+          );
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      [realTheme, realInitOptions],
+      () => {
+        cleanup();
+        init();
+      },
+      {
+        deep: true
+      }
+    );
+    watchEffect(() => {
+      if (props.group && chart.value) {
+        chart.value.group = props.group;
+      }
+    });
+    const publicApi = usePublicAPI(chart);
+    useLoading(chart, loading, loadingOptions);
+    useAutoresize(chart, autoresize, inner);
+    onMounted(async () => {
+      await nextTick();
+      init();
+    });
+    onBeforeUnmount(() => {
+      if (wcRegistered && root.value) {
+        root.value.__dispose = cleanup;
+      } else {
+        cleanup();
+      }
+    });
+    return {
+      chart,
+      root,
+      inner,
+      setOption,
+      nonEventAttrs,
+      nativeListeners,
+      ...publicApi
+    };
+  },
+  render() {
+    const attrs = { ...this.nonEventAttrs, ...this.nativeListeners };
+    attrs.ref = "root";
+    attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";
+    return h(TAG_NAME, attrs, [
+      h("div", { ref: "inner", class: "vue-echarts-inner" })
+    ]);
+  }
+});

package/dist/runtime/components/VChart.server.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <VChartServer v-bind="$attrs" />
+</template>

package/dist/runtime/components/VChartIsland.server.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import * as echarts from 'echarts'
+import { ref } from 'vue'
+import type { Option, InitOptions, Theme } from '../types'
+
+const props = defineProps<{
+  option?: Option
+  initOptions?: InitOptions
+  theme?: Theme
+}>()
+
+const svgStr = ref('')
+const initOptions: InitOptions = echarts.util.merge(
+  { renderer: 'svg', ssr: true } satisfies InitOptions,
+  props.initOptions || {},
+)
+let chart = echarts.init(null, props.theme, initOptions)
+chart.setOption(props.option || {})
+svgStr.value = chart.renderToSVGString()
+
+chart.dispose()
+
+// @ts-expect-error release memory
+chart = null
+
+defineSlots<{ fallback: any }>()
+</script>
+
+<template>
+  <div class="vue-echarts-container">
+    <!--eslint-disable-next-line vue/no-v-html-->
+    <div class="vue-echarts-inner" v-html="svgStr" />
+  </div>
+</template>

package/dist/runtime/components/VChartLight.vue

@@ -0,0 +1,78 @@
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  inheritAttrs: false,
+  emits: {}
+});
+</script>
+
+<script setup lang="ts">
+defineProps<{
+  option?: Option
+  theme?: Theme
+  initOptions?: InitOptions
+}>()
+defineOptions({ inheritAttrs: false })
+
+type ECSSRHandler = (params: ECSSRClientEventParams) => string | undefined
+type ECSSREventOn = `on${Capitalize<ECSSREvent>}`
+
+const root = ref<HTMLElement | null>(null)
+const attrs = useAttrs() as Partial<Record<ECSSREventOn, ECSSRHandler>>
+let container: HTMLElement
+function hydrateChart() {
+  container = root.value?.querySelector?.('.vue-echarts-inner') as HTMLElement
+  if (container) {
+    // Use the lightweight runtime to give the chart interactive capabilities
+    hydrate(container, {
+      on: {
+        click: attrs.onClick
+          ? (params) => {
+              const svg = attrs.onClick!(params)
+              svg && setInnerHTML(svg)
+            }
+          : undefined,
+        mouseout: attrs.onMouseout
+          ? (params) => {
+              const svg = attrs.onMouseout!(params)
+              svg && setInnerHTML(svg)
+            }
+          : undefined,
+        mouseover: attrs.onMouseover
+          ? (params) => {
+              const svg = attrs.onMouseover!(params)
+              svg && setInnerHTML(svg)
+            }
+          : undefined,
+      },
+    })
+  }
+}
+
+function setInnerHTML(svgStr?: string) {
+  if (container && svgStr) container.innerHTML = svgStr
+}
+
+let observer: MutationObserver
+onMounted(async () => {
+  await nextTick()
+  hydrateChart()
+  observer = new MutationObserver(async () => {
+    hydrateChart()
+  })
+
+  // call 'observe' on that MutationObserver instance,
+  // passing it the element to observe, and the options object
+  observer.observe(root.value!, {
+    characterData: false,
+    childList: true,
+    attributes: false,
+  })
+})
+</script>
+
+<template>
+  <div ref="root">
+    <VChartServer :option="option" :init-options="initOptions" :theme="theme" />
+  </div>
+</template>

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

@@ -0,0 +1,26 @@
+import { type ECSSRClientEventParams, type ECSSREvent } from 'echarts/ssr/client/index';
+import type { Theme } from '../types.js';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    option?: import("echarts/core").EChartsCoreOption | undefined;
+    theme?: Theme | undefined;
+    initOptions?: import("echarts/core").EChartsInitOpts | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<ECSSREvent, (params: ECSSRClientEventParams) => string | undefined>, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    option?: import("echarts/core").EChartsCoreOption | undefined;
+    theme?: Theme | undefined;
+    initOptions?: import("echarts/core").EChartsInitOpts | undefined;
+}>>> & {
+    onClick?: ((params: ECSSRClientEventParams) => any) | undefined;
+    onMouseout?: ((params: ECSSRClientEventParams) => any) | undefined;
+    onMouseover?: ((params: ECSSRClientEventParams) => any) | undefined;
+}, {}, {}>;
+export default _default;
+
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/runtime/components/VChartServer.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed, unref, inject, ref } from 'vue'
+import type { InitOptions, Option, Theme } from '../types'
+import { THEME_KEY, INIT_OPTIONS_KEY } from '../utils/injection'
+import type { VChartIsland } from '#components'
+
+const defaultTheme = inject(THEME_KEY, null)
+const defaultInitOptions = inject(INIT_OPTIONS_KEY, null)
+
+const props = defineProps<{
+  option?: Option
+  theme?: Theme
+  initOptions?: InitOptions
+}>()
+const emits = defineEmits<{ (event: 'error', error: unknown): void }>()
+
+const realTheme = computed(() => props.theme || unref(defaultTheme) || {})
+const realInitOptions = computed(
+  // @ts-expect-error unknown computed type error
+  () => props.initOptions || unref(defaultInitOptions) || {},
+)
+function onError(e: unknown) {
+  // https://github.com/nuxt/nuxt/issues/27491
+  if (
+    e instanceof TypeError &&
+    e.message === "Cannot read properties of undefined (reading 'link')"
+  ) {
+    // @ts-expect-error NuxtIsland.refresh in not defined
+    root.value.refresh()
+  }
+  emits('error', e)
+}
+const root = ref<InstanceType<typeof VChartIsland> | null>(null)
+</script>
+
+<template>
+  <VChartIsland
+    ref="root"
+    :theme="realTheme"
+    :option="option"
+    :init-options="realInitOptions"
+    @error="onError"
+  >
+    <template #fallback>
+      <slot name="fallback" />
+    </template>
+  </VChartIsland>
+</template>

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

@@ -0,0 +1,7 @@
+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 declare function usePublicAPI(chart: Ref<EChartsType | undefined>): PublicMethods;
+export {};

package/dist/runtime/composables/api.js

@@ -0,0 +1,35 @@
+const METHOD_NAMES = [
+  "getWidth",
+  "getHeight",
+  "getDom",
+  "getOption",
+  "resize",
+  "dispatchAction",
+  "convertToPixel",
+  "convertFromPixel",
+  "containPixel",
+  "getDataURL",
+  "getConnectedDataURL",
+  "appendData",
+  "clear",
+  "isDisposed",
+  "dispose"
+];
+export function usePublicAPI(chart) {
+  function makePublicMethod(name) {
+    return (...args) => {
+      if (!chart.value) {
+        throw new Error("ECharts is not initialized yet.");
+      }
+      return chart.value[name].apply(chart.value, args);
+    };
+  }
+  function makePublicMethods() {
+    const methods = /* @__PURE__ */ Object.create(null);
+    METHOD_NAMES.forEach((name) => {
+      methods[name] = makePublicMethod(name);
+    });
+    return methods;
+  }
+  return makePublicMethods();
+}

package/dist/runtime/composables/autoresize.js

@@ -0,0 +1,26 @@
+import { watch } from "vue";
+import { throttle } from "echarts/core";
+export function useAutoresize(chart, autoresize, root) {
+  let observer;
+  watch([root, chart, autoresize], ([root2, chart2, autoresize2], _, cleanup) => {
+    if (root2 && chart2 && autoresize2) {
+      const autoresizeOptions = autoresize2 === true ? {} : autoresize2;
+      const { throttle: wait = 100, onResize } = autoresizeOptions;
+      const callback = () => {
+        chart2.resize();
+        onResize?.();
+      };
+      observer = new ResizeObserver(wait ? throttle(callback, wait) : callback);
+      observer.observe(root2);
+    }
+    cleanup(() => {
+      if (root2 && observer) {
+        observer.disconnect();
+        observer = void 0;
+      }
+    });
+  });
+}
+export const autoresizeProps = {
+  autoresize: [Boolean, Object]
+};

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

@@ -0,0 +1,3 @@
+export * from './api.js';
+export * from './autoresize.js';
+export * from './loading.js';

package/dist/runtime/composables/index.js

@@ -0,0 +1,3 @@
+export * from "./api.js";
+export * from "./autoresize.js";
+export * from "./loading.js";

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

@@ -0,0 +1,8 @@
+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>>;
+export declare function useLoading(chart: Ref<EChartsType | undefined>, loading: Ref<boolean>, loadingOptions: Ref<LoadingOptions | undefined>): void;
+export declare const loadingProps: {
+    loading: BooleanConstructor;
+    loadingOptions: PropType<LoadingOptions>;
+};

package/dist/runtime/composables/loading.js

@@ -0,0 +1,29 @@
+import {
+  unref,
+  inject,
+  computed,
+  watchEffect
+} from "vue";
+export const LOADING_OPTIONS_KEY = "ecLoadingOptions";
+export function useLoading(chart, loading, loadingOptions) {
+  const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {});
+  const realLoadingOptions = computed(() => ({
+    ...unref(defaultLoadingOptions) || {},
+    ...loadingOptions?.value
+  }));
+  watchEffect(() => {
+    const instance = chart.value;
+    if (!instance) {
+      return;
+    }
+    if (loading.value) {
+      instance.showLoading(realLoadingOptions.value);
+    } else {
+      instance.hideLoading();
+    }
+  });
+}
+export const loadingProps = {
+  loading: Boolean,
+  loadingOptions: Object
+};

package/dist/runtime/{plugin.mjs → plugin.js}

@@ -1,4 +1,3 @@
 import { defineNuxtPlugin } from "#app";
 export default defineNuxtPlugin((_nuxtApp) => {
-  console.log("Plugin injected by nuxt-echarts!");
 });

package/dist/runtime/style.css

@@ -0,0 +1 @@
+.vue-echarts-container,x-vue-echarts{display:flex;flex-direction:column;height:100%;min-width:0;width:100%}.vue-echarts-inner{flex-grow:1;height:auto!important;min-width:0;width:auto!important}

package/dist/runtime/types.d.ts

@@ -0,0 +1,52 @@
+import type { init, SetOptionOpts, ECElementEvent, ElementEvent } from 'echarts/core';
+import type { Ref } from 'vue';
+export type Injection<T> = T | null | Ref<T | null> | {
+    value: T | null;
+};
+type InitType = typeof init;
+export type InitParameters = Parameters<InitType>;
+export type Theme = NonNullable<InitParameters[1]>;
+export type ThemeInjection = Injection<Theme>;
+export type InitOptions = NonNullable<InitParameters[2]>;
+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 Option = Parameters<SetOptionType>[0];
+export type LoadingOptions = {
+    text?: string;
+    textColor?: string;
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    fontStyle?: string;
+    fontFamily?: string;
+    maskColor?: string;
+    showSpinner?: boolean;
+    color?: string;
+    spinnerRadius?: number;
+    lineWidth?: number;
+    zlevel?: number;
+};
+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}`;
+type OtherEventName = 'highlight' | 'downplay' | 'selectchanged' | 'legendselectchanged' | 'legendselected' | 'legendunselected' | 'legendselectall' | 'legendinverseselect' | 'legendscroll' | 'datazoom' | 'datarangeselected' | 'graphroam' | 'georoam' | 'treeroam' | 'timelinechanged' | 'timelineplaychanged' | 'restore' | 'dataviewchanged' | 'magictypechanged' | 'geoselectchanged' | 'geoselected' | 'geounselected' | 'axisareaselected' | 'brush' | 'brushEnd' | 'brushselected' | 'globalcursortaken';
+type MouseEmits = {
+    [key in MouseEventName]: (params: ECElementEvent) => boolean;
+};
+type ZRenderEmits = {
+    [key in ZRenderEventName]: (params: ElementEvent) => boolean;
+};
+type OtherEmits = {
+    [key in OtherEventName]: null;
+};
+export type Emits = MouseEmits & OtherEmits & {
+    rendered: (params: {
+        elapsedTime: number;
+    }) => boolean;
+    finished: () => boolean;
+} & ZRenderEmits;
+export {};

package/dist/runtime/utils/injection.d.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey } from 'vue';
+import type { ThemeInjection, InitOptionsInjection, UpdateOptionsInjection } from '../types.js';
+export declare const THEME_KEY: InjectionKey<ThemeInjection>;
+export declare const INIT_OPTIONS_KEY: InjectionKey<InitOptionsInjection>;
+export declare const UPDATE_OPTIONS_KEY: InjectionKey<UpdateOptionsInjection>;
+export { LOADING_OPTIONS_KEY } from '../composables.js';

package/dist/runtime/utils/injection.js

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

package/dist/runtime/utils/on.d.ts

@@ -0,0 +1,4 @@
+export declare const isOn: (key: string) => boolean;
+type Attrs = Record<string, any>;
+export declare function omitOn(attrs: Attrs): Attrs;
+export {};

package/dist/runtime/utils/on.js

@@ -0,0 +1,11 @@
+const onRE = /^on[^a-z]/;
+export const isOn = (key) => onRE.test(key);
+export function omitOn(attrs) {
+  const result = {};
+  for (const key in attrs) {
+    if (!isOn(key)) {
+      result[key] = attrs[key];
+    }
+  }
+  return result;
+}