javascript/vueecharts
1
0
Fork 0
mirror of https://github.com/ecomfe/vue-echarts.git synced 2025-08-06 19:44:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor!: remove resize-detector and update vue deps to 2.7+

Browse Source
This commit is contained in:
Justineo
2024-05-11 15:36:34 +08:00
committed by GU Yiling
parent d774558f3e
commit 3c7ff95331
4 changed files with 50 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@ -1,3 +1,10 @@
## 7.0.0
### Breaking changes
* Dropped browsers without `ResizeObserver` support. Can work with [resize-observer-polyfill](https://www.npmjs.com/package/resize-observer-polyfill).
* Dropped support for Vue < 2.7.
## 6.7.3
* Fixed that `padding` on the component root doesn't work.

6
package.json
View File

@ -22,7 +22,6 @@
"scripts/postinstall.js"
],
"dependencies": {
"resize-detector": "^0.3.0",
"vue-demi": "^0.13.11"
},
"devDependencies": {
@ -75,14 +74,11 @@
"@vue/composition-api": "^1.0.5",
"@vue/runtime-core": "^3.0.0",
"echarts": "^5.4.1",
"vue": "^2.6.12 || ^3.1.1"
"vue": "^2.7.0 || ^3.1.1"
},
"jsdelivr": "dist/index.umd.min.js",
"license": "MIT",
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
},
"@vue/runtime-core": {
"optional": true
}

6
pnpm-lock.yaml generated
View File

@ -11,9 +11,6 @@ importers:
'@vue/runtime-core':
specifier: ^3.0.0
version: 3.4.24
resize-detector:
specifier: ^0.3.0
version: 0.3.0
vue-demi:
specifier: ^0.13.11
version: 0.13.11(@vue/composition-api@1.7.2(vue@3.4.24(typescript@4.6.4)))(vue@3.4.24(typescript@4.6.4))
@ -117,6 +114,9 @@ importers:
raw-loader:
specifier: ^4.0.2
version: 4.0.2(webpack@5.91.0)
resize-detector:
specifier: ^0.3.0
version: 0.3.0
rimraf:
specifier: ^3.0.2
version: 3.0.2

61
src/composables/autoresize.ts
View File

@ -1,10 +1,5 @@
import { watch, type Ref, type PropType } from "vue-demi";
import { throttle } from "echarts/core";
import {
addListener,
removeListener,
type ResizeCallback
} from "resize-detector";
import { type EChartsType } from "../types";
type AutoresizeProp =
@ -19,28 +14,50 @@ export function useAutoresize(
autoresize: Ref<AutoresizeProp | undefined>,
root: Ref<HTMLElement | undefined>
): void {
let resizeListener: ResizeCallback | null = null;
watch(
[root, chart, autoresize],
([root, chart, autoresize], _, onCleanup) => {
let ro: ResizeObserver | null = null;
watch([root, chart, autoresize], ([root, chart, autoresize], _, cleanup) => {
if (root && chart && autoresize) {
const autoresizeOptions = autoresize === true ? {} : autoresize;
const { throttle: wait = 100, onResize } = autoresizeOptions;
if (root && chart && autoresize) {
const { offsetWidth, offsetHeight } = root;
const autoresizeOptions = autoresize === true ? {} : autoresize;
const { throttle: wait = 100, onResize } = autoresizeOptions;
const callback = () => {
chart.resize();
onResize?.();
};
let initialResizeTriggered = false;
resizeListener = wait ? throttle(callback, wait) : callback;
addListener(root, resizeListener);
}
const callback = () => {
chart.resize();
onResize?.();
};
cleanup(() => {
if (root && resizeListener) {
removeListener(root, resizeListener);
const resizeCallback = wait ? throttle(callback, wait) : callback;
ro = new ResizeObserver(() => {
// We just skip ResizeObserver's initial resize callback if the
// size has not changed since the chart is rendered.
if (!initialResizeTriggered) {
initialResizeTriggered = true;
if (
root.offsetWidth === offsetWidth &&
root.offsetHeight === offsetHeight
) {
return;
}
}
resizeCallback();
});
ro.observe(root);
}
});
});
onCleanup(() => {
if (ro) {
ro.disconnect();
ro = null;
}
});
}
);
}
export const autoresizeProps = {