fix(types): fix types for vue < 2.7

CHANGELOG.md

@@ -1,3 +1,15 @@
+## 6.6.6
+
+* Fixed types for Vue < 2.7.
+
+## 6.6.5
+
+* Fixed type for `option` regressed in v6.6.2.
+
+## 6.6.4
+
+* Fixed style regression introduced by v6.6.3.
+
 ## 6.6.3
 
 * Fixed inner wrapper styles.

README.md

@@ -1,6 +1,6 @@
 <h1 align="center">Vue-ECharts</h1>
 
-<p align="center">Vue.js <sup>(v2/v3)</sup> component for Apache ECharts <sup>(v5)</sup>.</p>
+<p align="center">Vue.js <sup>(v2/v3)</sup> component for Apache ECharts™ <sup>(v5)</sup>.</p>
 <p align="center"><a href="https://vue-echarts.dev/">View Demo →</a></p>
 <p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a> <a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"><img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
 
@@ -23,17 +23,18 @@ Not ready yet? Read documentation for older versions [here →](https://github.c
 
 ### npm & ESM
 
-```bash
+```sh
-npm install echarts vue-echarts
+npm i echarts vue-echarts
 ```
 
-To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed:
+To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed (`@vue/runtime-core` for TypeScript support):
 
 ```sh
 npm i @vue/composition-api
+npm i @vue/runtime-core # for TypeScript support
 ```
 
-If you are using _NuxtJS_ on top of _Vue 2_, you'll also need `@nuxtjs/composition-api`:
+If you are using _NuxtJS_ on top of _Vue 2_, you'll need `@nuxtjs/composition-api`:
 
 ```sh
 npm i @nuxtjs/composition-api
@@ -237,7 +238,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.3.7"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.5"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -257,7 +258,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.15"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.5"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -475,7 +476,7 @@ The following breaking changes are introduced in `vue-echarts@6`:
 
 ### Vue 2 support
 
-- If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2.
+- If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2 (and also `@vue/runtime-core` for TypeScript support).
 
 ### Props
 
@@ -500,7 +501,7 @@ The following breaking changes are introduced in `vue-echarts@6`:
 
 ## Local development
 
-```bash
+```sh
 pnpm i
 pnpm serve
 ```

README.zh-Hans.md

@@ -1,6 +1,6 @@
 <h1 align="center">Vue-ECharts</h1>
 
-<p align="center">Apache ECharts <sup>(v5)</sup> 的 Vue.js <sup>(v2/v3)</sup> 组件。</p>
+<p align="center">Apache ECharts™ <sup>(v5)</sup> 的 Vue.js <sup>(v2/v3)</sup> 组件。</p>
 <p align="center"><a href="https://vue-echarts.dev/">查看 Demo →</a></p>
 <p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a> <a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"><img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
 
@@ -23,17 +23,18 @@
 
 ### npm & ESM
 
-```bash
+```sh
-npm install echarts vue-echarts
+npm i echarts vue-echarts
 ```
 
-要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装：
+要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装（TypeScript 支持还需要 `@vue/runtime-core`）：
 
 ```sh
 npm i @vue/composition-api
+npm i @vue/runtime-core # TypeScript 支持
 ```
 
-如果你在使用基于 _Vue 2_ 的 _NuxtJS_，那么还需要安装 `@nuxtjs/composition-api`：
+如果你在使用基于 _Vue 2_ 的 _NuxtJS_，则需要安装 `@nuxtjs/composition-api`：
 
 ```sh
 npm i @nuxtjs/composition-api
@@ -237,7 +238,7 @@ import "echarts";
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.3.7"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.5"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -257,7 +258,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.15"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.5"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -475,7 +476,7 @@ import { THEME_KEY } from 'vue-echarts'
 
 ### Vue 2 支持
 
-- 要在 `vue@2.7.0` 之前的版本中使用 Vue-ECharts，必须安装 `@vue/composition-api`。
+- 要在 `vue@2.7.0` 之前的版本中使用 Vue-ECharts，必须安装 `@vue/composition-api`（还需要安装 `@vue/runtime-core` 来支持 TypeScript）。
 
 ### Prop
 
@@ -500,7 +501,7 @@ import { THEME_KEY } from 'vue-echarts'
 
 ## 本地开发
 
-```bash
+```sh
 pnpm i
 pnpm serve
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.6.3",
+  "version": "6.6.6",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
@@ -73,6 +73,7 @@
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.5",
+    "@vue/runtime-core": "^3.0.0",
     "echarts": "^5.4.1",
     "vue": "^2.6.12 || ^3.1.1"
   },
@@ -81,6 +82,9 @@
   "peerDependenciesMeta": {
     "@vue/composition-api": {
       "optional": true
+    },
+    "@vue/runtime-core": {
+      "optional": true
     }
   },
   "repository": "https://github.com/ecomfe/vue-echarts.git",

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@vue/runtime-core':
+    specifier: ^3.0.0
+    version: 3.3.7
   resize-detector:
     specifier: ^0.3.0
     version: 0.3.0

scripts/postinstall.js

@@ -6,6 +6,7 @@ const packageFile = path.resolve(__dirname, "../package.json");
 
 const typesPaths = {
   3: "dist/index.d.ts",
+  2.7: "dist/index.vue2-7.d.ts",
   2: "dist/index.vue2.d.ts"
 };
 
@@ -36,6 +37,8 @@ if (!Vue || typeof Vue.version !== "string") {
   );
 } else if (Vue.version.startsWith("3.")) {
   switchVersion(3);
+} else if (Vue.version.startsWith("2.7.")) {
+  switchVersion(2.7);
 } else if (Vue.version.startsWith("2.")) {
   switchVersion(2);
 } else {

src/demo/CodeGen.vue

@@ -324,10 +324,6 @@ input[type="number"] {
   overflow: hidden;
   background-color: #fff;
   box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
-
-  h2 {
-    margin-top: 0;
-  }
 }
 
 .options {

src/demo/Demo.vue

@@ -56,12 +56,23 @@ watch(codeOpen, open => {
       <a href="https://github.com/ecomfe/vue-echarts">Vue-ECharts</a>
     </h1>
     <p class="desc">
-      Vue.js component for Apache ECharts. (<a
+      Vue.js component for Apache ECharts™. (<a
         href="https://github.com/ecomfe/vue-echarts#readme"
         >docs</a
       >)
     </p>
 
+    <h2 class="sep">Examples</h2>
+    <p>
+      <small
+        >See
+        <a href="https://echarts.apache.org/examples/en/index.html"
+          >echarts.apache.org/examples</a
+        >
+        for all examples.</small
+      >
+    </p>
+
     <bar-chart />
     <pie-chart />
     <polar-chart />
@@ -132,6 +143,19 @@ body {
 a {
   color: inherit;
   text-decoration: none;
+  box-shadow: 0 1px 0 0 #42b983;
+  transition: box-shadow 0.2s;
+
+  &:hover {
+    box-shadow: 0 2px 0 0 #42b983;
+  }
+}
+
+h1,
+h2,
+h3 {
+  color: #2c3e50;
+  font-weight: 400;
 }
 
 h1 {
@@ -139,13 +163,32 @@ h1 {
   font-family: Inter, "Helvetica Neue", Arial, sans-serif;
 }
 
-h1,
 h2 {
-  color: #2c3e50;
+  margin-top: 1em;
-  font-weight: 400;
+  margin-bottom: 1em;
 }
 
-h2 {
+.sep {
+  margin-top: 6em;
+  margin-bottom: 1.8em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  font-size: 1.25em;
+  color: #7f8c8d;
+  opacity: 0.6;
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    width: 48px;
+    border-bottom: 1px dotted currentColor;
+  }
+}
+
+h3 {
   margin-top: 2em;
   padding-top: 1em;
   font-size: 1.2em;
@@ -208,15 +251,18 @@ footer {
   a {
     display: inline-block;
     margin: 0 5px;
-    padding: 3px 0 6px;
     color: #7f8c8d;
     font-size: 2em;
-    text-decoration: none;
   }
+}
 
+h1,
+h2,
+h3 {
+  a,
   a:hover {
-    padding-bottom: 3px;
+    text-decoration: none;
-    border-bottom: 3px solid #42b983;
+    box-shadow: none;
   }
 }
 

src/demo/data/logo.js

@@ -25,6 +25,10 @@ export default {
             return "";
           }
         }
+      },
+      itemStyle: {
+        shadowBlur: 12,
+        shadowColor: "rgba(0, 0, 0, 0.25)"
       }
     }
   ]

src/demo/examples/Example.vue

@@ -1,10 +1,10 @@
 <template>
-  <h2 :id="id">
+  <h3 :id="id">
     <a :href="`#${id}`">
       {{ title }}
       <small v-if="desc">{{ desc }}</small>
     </a>
-  </h2>
+  </h3>
   <section>
     <figure class="fig hero" v-if="!split">
       <slot />

src/index.vue2.d.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import type { Ref, DefineComponent } from "vue-demi";
+import type { DefineComponent } from "@vue/runtime-core";
+import type { Ref } from "vue-demi";
 import type {
   Option,
   InitOptions,

src/index.vue2_7.d.ts

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import type { Ref, DefineComponent } from "vue-demi";
+import type {
+  Option,
+  InitOptions,
+  UpdateOptions,
+  EChartsType,
+  Emits
+} from "./types";
+
+declare const LOADING_OPTIONS_KEY = "ecLoadingOptions";
+declare const THEME_KEY = "ecTheme";
+declare const INIT_OPTIONS_KEY = "ecInitOptions";
+declare const UPDATE_OPTIONS_KEY = "ecUpdateOptions";
+
+declare type ChartProps = {
+  loading?: boolean;
+  loadingOptions?: Record<string, unknown>;
+  autoresize?: boolean;
+  option?: Option;
+  theme?: string | Record<string, unknown>;
+  initOptions?: InitOptions;
+  updateOptions?: UpdateOptions;
+  group?: string;
+  manualUpdate?: boolean;
+};
+
+type MethodNames =
+  | "getWidth"
+  | "getHeight"
+  | "getDom"
+  | "getOption"
+  | "resize"
+  | "dispatchAction"
+  | "convertToPixel"
+  | "convertFromPixel"
+  | "containPixel"
+  | "getDataURL"
+  | "getConnectedDataURL"
+  | "appendData"
+  | "clear"
+  | "isDisposed"
+  | "dispose"
+  | "setOption";
+
+declare type ChartMethods = Pick<EChartsType, MethodNames>;
+
+declare const Chart: DefineComponent<
+  ChartProps,
+  {
+    root: Ref<HTMLElement | undefined>;
+    chart: Ref<EChartsType | undefined>;
+  },
+  {},
+  {},
+  ChartMethods,
+  {},
+  {},
+  Emits
+>;
+
+export default Chart;
+export { INIT_OPTIONS_KEY, LOADING_OPTIONS_KEY, THEME_KEY, UPDATE_OPTIONS_KEY };

src/style.css

@@ -1 +1 @@
-x-vue-echart,.echarts-inner{display:block;width:100%;height:100%;min-width:0}
+x-vue-echarts,.echarts-inner{display:block;width:100%;height:100%;min-width:0}

src/types.ts

@@ -1,10 +1,5 @@
 import { init } from "echarts/core";
-import type {
+import type { SetOptionOpts, ECElementEvent, ElementEvent } from "echarts";
-  SetOptionOpts,
-  ECElementEvent,
-  ElementEvent,
-  EChartsOption
-} from "echarts";
 import type { Ref } from "vue";
 
 export type Injection<T> = T | null | Ref<T | null> | { value: T | null };
@@ -23,7 +18,9 @@ export type UpdateOptionsInjection = Injection<UpdateOptions>;
 export type EChartsType = ReturnType<InitType>;
 type ZRenderType = ReturnType<EChartsType["getZr"]>;
 export type EventTarget = EChartsType | ZRenderType;
-export type Option = EChartsOption;
+
+type SetOptionType = EChartsType["setOption"];
+export type Option = Parameters<SetOptionType>[0];
 
 export type LoadingOptions = {
   text?: string;