fix(types): fix types for vue < 2.7

This commit is contained in:
Justineo
2023-12-26 14:54:37 +08:00
parent ce3ba29209
commit 7bcf57e77b
8 changed files with 96 additions and 16 deletions

View File

@ -1,3 +1,7 @@
## 6.6.6
* Fixed types for Vue < 2.7.
## 6.6.5
* Fixed type for `option` regressed in v6.6.2.

View File

@ -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
npm install echarts vue-echarts
```sh
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
@ -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
```

View File

@ -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
npm install echarts vue-echarts
```sh
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
@ -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
```

View File

@ -1,6 +1,6 @@
{
"name": "vue-echarts",
"version": "6.6.5",
"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",

3
pnpm-lock.yaml generated
View File

@ -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

View File

@ -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 {

3
src/index.vue2.d.ts vendored
View File

@ -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,

63
src/index.vue2_7.d.ts vendored Normal file
View File

@ -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 };