feat: make css paddings work out-of-the-box

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 6.6.1
+
+* Make `padding` work out-of-the-box.
+
+## 6.6.0
+
+* Added support for `autoresize` accepting an options object to specify custom throttle delay or resize callback.
+
 ## 6.5.5
 
 * Removed the custom element registration enhancement for strict CSP builds so that they won't contain `new Function`.

README.md

@@ -226,7 +226,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 <!-- vue3Scripts:start -->
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue3Scripts:end -->
@@ -246,7 +246,7 @@ app.component('v-chart', VueECharts)
 <!-- vue2Scripts:start -->
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue2Scripts:end -->

README.zh-Hans.md

@@ -226,7 +226,7 @@ import "echarts";
 <!-- vue3Scripts:start -->
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue3Scripts:end -->
@@ -246,7 +246,7 @@ app.component('v-chart', VueECharts)
 <!-- vue2Scripts:start -->
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue2Scripts:end -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.6.0",
+  "version": "6.6.1",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
@@ -23,48 +23,49 @@
   ],
   "dependencies": {
     "resize-detector": "^0.3.0",
-    "vue-demi": "^0.13.2"
+    "vue-demi": "^0.13.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
+    "@babel/core": "^7.22.9",
-    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-terser": "^0.4.3",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "@vue/cli-plugin-babel": "^5.0.7",
+    "@vercel/analytics": "^1.0.1",
-    "@vue/cli-plugin-eslint": "^5.0.7",
+    "@vue/cli-plugin-babel": "^5.0.8",
-    "@vue/cli-plugin-typescript": "^5.0.7",
+    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-service": "^5.0.7",
+    "@vue/cli-plugin-typescript": "^5.0.8",
-    "@vue/compiler-sfc": "^3.2.37",
+    "@vue/cli-service": "^5.0.8",
-    "@vue/composition-api": "^1.7.0",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/composition-api": "^1.7.1",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "comment-mark": "^1.1.1",
-    "core-js": "^3.23.3",
+    "core-js": "^3.32.0",
-    "echarts": "^5.4.1",
+    "echarts": "^5.4.3",
     "echarts-liquidfill": "^3.1.0",
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-vue": "^8.7.1",
-    "pinia": "^2.1.3",
+    "pinia": "^2.1.6",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.27",
     "postcss-loader": "^5.3.0",
     "postcss-nested": "^5.0.6",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.8",
-    "qs": "^6.11.0",
+    "qs": "^6.11.2",
     "raw-loader": "^4.0.2",
     "resize-detector": "^0.3.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.75.7",
+    "rollup": "^2.79.1",
-    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-dts": "^4.2.3",
     "rollup-plugin-styles": "^4.0.0",
-    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-ts": "^2.0.7",
-    "tslib": "^2.4.0",
+    "tslib": "^2.6.1",
     "typescript": "4.6.4",
     "vue": "^3.3.4",
     "vue2": "npm:vue@^2.7.14",
-    "webpack": "^5.73.0"
+    "webpack": "^5.88.2"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.5",

rollup.config.js

@@ -1,5 +1,5 @@
 import typescript from "rollup-plugin-ts";
-import { terser } from "rollup-plugin-terser";
+import terser from "@rollup/plugin-terser";
 import resolve from "@rollup/plugin-node-resolve";
 import replace from "@rollup/plugin-replace";
 import styles from "rollup-plugin-styles";

scripts/docs.js

@@ -1,16 +1,18 @@
-const fs = require("fs");
+const { readFileSync, writeFileSync } = require("fs");
 const { resolve } = require("path");
 const commentMark = require("comment-mark");
 const { name, version } = require("../package.json");
 
-const { readFile, writeFile } = fs.promises;
+function resolvePath(...parts) {
+  return resolve(__dirname, ...parts);
+}
 
 const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
 
 const DEP_VERSIONS = {
   "vue@3": "3.3.4",
   "vue@2": "2.7.14",
-  echarts: "5.4.2",
+  echarts: "5.4.3",
   [name]: version
 };
 
@@ -39,29 +41,20 @@ const scripts = {
 };
 
 const README_FILES = ["README.md", "README.zh-Hans.md"].map(name =>
-  resolve(__dirname, "..", name)
+  resolvePath("..", name)
 );
 
-function exec() {
+README_FILES.forEach(file => {
-  return Promise.all(
+  const content = readFileSync(file, "utf8");
-    README_FILES.map(async file => {
-      const content = await readFile(file, "utf8");
 
-      return writeFile(
+  writeFileSync(
-        file,
+    file,
-        commentMark(content, {
+    commentMark(content, {
-          vue2Scripts: getCodeBlock(scripts[2]),
+      vue2Scripts: getCodeBlock(scripts[2]),
-          vue3Scripts: getCodeBlock(scripts[3])
+      vue3Scripts: getCodeBlock(scripts[3])
-        }),
+    }),
-        "utf8"
+    "utf8"
-      );
-    })
   );
-}
+});
 
-async function main() {
+console.log("README files updated.");
-  await exec();
-  console.log("README files updated.");
-}
-
-main();

src/ECharts.ts

@@ -73,6 +73,7 @@ export default defineComponent({
   inheritAttrs: false,
   setup(props, { attrs }) {
     const root = shallowRef<EChartsElement>();
+    const inner = shallowRef<HTMLElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
     const defaultTheme = inject(THEME_KEY, null);
@@ -99,12 +100,12 @@ export default defineComponent({
     const listeners = getCurrentInstance().proxy.$listeners;
 
     function init(option?: Option) {
-      if (!root.value) {
+      if (!inner.value) {
         return;
       }
 
       const instance = (chart.value = initChart(
-        root.value,
+        inner.value,
         realTheme.value,
         realInitOptions.value
       ));
@@ -271,7 +272,7 @@ export default defineComponent({
 
     useLoading(chart, loading, loadingOptions);
 
-    useAutoresize(chart, autoresize, root);
+    useAutoresize(chart, autoresize, inner);
 
     onMounted(() => {
       init();
@@ -292,6 +293,7 @@ export default defineComponent({
     return {
       chart,
       root,
+      inner,
       setOption,
       nonEventAttrs,
       ...publicApi
@@ -305,6 +307,6 @@ export default defineComponent({
     ) as any;
     attrs.ref = "root";
     attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";
-    return h(TAG_NAME, attrs);
+    return h(TAG_NAME, attrs, [h("div", { ref: "inner" })]);
   }
 });

src/composables/api.ts

@@ -20,7 +20,7 @@ const METHOD_NAMES = [
   "dispose"
 ] as const;
 
-type MethodName = typeof METHOD_NAMES[number];
+type MethodName = (typeof METHOD_NAMES)[number];
 
 type PublicMethods = Pick<EChartsType, MethodName>;
 

src/demo/main.ts

@@ -1,7 +1,10 @@
+import { inject } from "@vercel/analytics";
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import Demo from "./Demo.vue";
 
+inject();
+
 const pinia = createPinia();
 const app = createApp(Demo);
 app.use(pinia);

src/style.css

@@ -1 +1 @@
-x-vue-echarts{display:block;width:100%;height:100%;min-width:0}
+x-vue-echarts{display:block;width:100%;height:100%;min-width:0}x-vue-echarts>div{width:100%;height:100%}