feat: handle csp, extract css

chore: update deps and version
fix: fix types for mouse events
2025-11-05 20:36:09 +08:00 · 2023-01-28 23:52:11 +08:00 · 2023-01-09 12:58:10 +08:00 · 2023-01-09 12:53:58 +08:00 · 2023-01-08 23:41:15 +08:00 · 2023-01-08 23:39:55 +08:00
8 changed files with 234 additions and 129 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,16 @@
+## 6.5.2
+
+* Added `dist/csp/*` to support strict CSP with extracted CSS file.
+
+## 6.5.1
+
+* Fixed types for mouse events.
+
+## 6.5.0
+
+* Use more precise typings for all event params.
+* Updated peer deps for `echarts` to `^5.4.1`.
+
 ## 6.4.1

 * Improve typings for mouse event params.
--- a/README.md
+++ b/README.md
@ -26,7 +26,7 @@ To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composit
 npm i -D @vue/composition-api
 ```

-If you are using _NuxtJS_ on top of _Vue 2_ (<2.7.0), you'll also need `@nuxtjs/composition-api`:
+If you are using _NuxtJS_ on top of _Vue 2_, you'll also need `@nuxtjs/composition-api`:

 ```sh
 npm i -D @nuxtjs/composition-api
@ -227,7 +227,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.2"></script>
 ```
 <!-- vue3Scripts:end -->

@ -247,7 +247,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.2"></script>
 ```
 <!-- vue2Scripts:end -->

@ -453,6 +453,10 @@ Vue-ECharts support the following events:

 See supported events [here →](https://echarts.apache.org/en/api.html#events)

+## CSP: `style-src` or `style-src-elem`
+
+If you are applying a CSP to prevent inline `<style>` injection, you need to use files from `dist/csp` directory and include `dist/csp/style.css` into your app manually.
+
 ## Migration to v6

 > 💡 Please make sure to read the [migration guide](https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide) for ECharts 5 as well.
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@ -24,7 +24,7 @@ $ npm install echarts vue-echarts
 npm i -D @vue/composition-api
 ```

-如果你在使用基于 _Vue 2_（<2.7.0）的 _NuxtJS_，那么还需要安装 `@nuxtjs/composition-api`：
+如果你在使用基于 _Vue 2_ 的 _NuxtJS_，那么还需要安装 `@nuxtjs/composition-api`：

 ```sh
 npm i -D @nuxtjs/composition-api
@ -225,7 +225,7 @@ import "echarts";
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.2"></script>
 ```
 <!-- vue3Scripts:end -->

@ -245,7 +245,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.2"></script>
 ```
 <!-- vue2Scripts:end -->

@ -451,6 +451,10 @@ import { THEME_KEY } from 'vue-echarts'

 静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。

+## CSP: `style-src` 或 `style-src-elem`
+
+如果你正在应用 CSP 来防止内联 `<style>` 注入，则需要使用 `dist/csp` 目录中的文件，并手动引入 `dist/csp/style.css`。
+
 ## 迁移到 v6

 > 💡 请确保同时查阅 ECharts 5 的[升级指南](https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97)。
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vue-echarts",
-  "version": "6.4.1",
+  "version": "6.5.2",
  "description": "Vue.js component for Apache ECharts.",
  "author": "GU Yiling <justice360@gmail.com>",
  "scripts": {
@ -26,48 +26,48 @@
    "vue-demi": "^0.13.2"
  },
  "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@rollup/plugin-node-resolve": "^11.1.1",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
-    "@vue/cli-plugin-babel": "^5.0.4",
-    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/cli-plugin-typescript": "^5.0.4",
-    "@vue/cli-service": "^5.0.4",
-    "@vue/compiler-sfc": "^3.2.33",
+    "@babel/core": "^7.18.6",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@vue/cli-plugin-babel": "^5.0.7",
+    "@vue/cli-plugin-eslint": "^5.0.7",
+    "@vue/cli-plugin-typescript": "^5.0.7",
+    "@vue/cli-service": "^5.0.7",
+    "@vue/compiler-sfc": "^3.2.37",
    "@vue/composition-api": "^1.7.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
-    "comment-mark": "^1.0.0",
-    "core-js": "^3.23.0",
-    "echarts": "^5.3.2",
+    "comment-mark": "^1.1.1",
+    "core-js": "^3.23.3",
+    "echarts": "^5.4.1",
    "echarts-liquidfill": "^3.1.0",
-    "eslint": "^7.20.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^8.7.1",
    "esm": "^3.2.25",
-    "postcss": "^8.3.0",
-    "postcss-loader": "^5.0.0",
-    "postcss-nested": "^5.0.5",
-    "prettier": "^2.6.2",
-    "qs": "^6.10.5",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^5.3.0",
+    "postcss-nested": "^5.0.6",
+    "prettier": "^2.7.1",
+    "qs": "^6.11.0",
    "raw-loader": "^4.0.2",
    "resize-detector": "^0.3.0",
    "rimraf": "^3.0.2",
-    "rollup": "^2.72.1",
-    "rollup-plugin-dts": "^4.2.1",
+    "rollup": "^2.75.7",
+    "rollup-plugin-dts": "^4.2.2",
    "rollup-plugin-styles": "^4.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-ts": "^2.0.7",
    "tslib": "^2.4.0",
    "typescript": "4.6.4",
-    "vue": "^3.2.33",
+    "vue": "^3.2.37",
    "vue2": "npm:vue@^2.7.14",
-    "webpack": "^5.72.1"
+    "webpack": "^5.73.0"
  },
  "peerDependencies": {
    "@vue/composition-api": "^1.0.5",
-    "echarts": "^5.1.2",
+    "echarts": "^5.4.1",
    "vue": "^2.6.12 || ^3.1.1"
  },
  "jsdelivr": "dist/index.umd.min.js",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1,45 +1,45 @@
 lockfileVersion: 5.4

 specifiers:
-  '@babel/core': ^7.17.10
-  '@rollup/plugin-node-resolve': ^11.1.1
-  '@typescript-eslint/eslint-plugin': ^4.15.1
-  '@typescript-eslint/parser': ^4.15.1
-  '@vue/cli-plugin-babel': ^5.0.4
-  '@vue/cli-plugin-eslint': ^5.0.4
-  '@vue/cli-plugin-typescript': ^5.0.4
-  '@vue/cli-service': ^5.0.4
-  '@vue/compiler-sfc': ^3.2.33
+  '@babel/core': ^7.18.6
+  '@rollup/plugin-node-resolve': ^11.2.1
+  '@typescript-eslint/eslint-plugin': ^4.33.0
+  '@typescript-eslint/parser': ^4.33.0
+  '@vue/cli-plugin-babel': ^5.0.7
+  '@vue/cli-plugin-eslint': ^5.0.7
+  '@vue/cli-plugin-typescript': ^5.0.7
+  '@vue/cli-service': ^5.0.7
+  '@vue/compiler-sfc': ^3.2.37
  '@vue/composition-api': ^1.7.0
  '@vue/eslint-config-prettier': ^6.0.0
  '@vue/eslint-config-typescript': ^10.0.0
-  comment-mark: ^1.0.0
-  core-js: ^3.23.0
-  echarts: ^5.3.2
+  comment-mark: ^1.1.1
+  core-js: ^3.23.3
+  echarts: ^5.4.1
  echarts-liquidfill: ^3.1.0
-  eslint: ^7.20.0
-  eslint-plugin-prettier: ^3.3.1
+  eslint: ^7.32.0
+  eslint-plugin-prettier: ^3.4.1
  eslint-plugin-vue: ^8.7.1
  esm: ^3.2.25
-  postcss: ^8.3.0
-  postcss-loader: ^5.0.0
-  postcss-nested: ^5.0.5
-  prettier: ^2.6.2
-  qs: ^6.10.5
+  postcss: ^8.4.14
+  postcss-loader: ^5.3.0
+  postcss-nested: ^5.0.6
+  prettier: ^2.7.1
+  qs: ^6.11.0
  raw-loader: ^4.0.2
  resize-detector: ^0.3.0
  rimraf: ^3.0.2
-  rollup: ^2.72.1
-  rollup-plugin-dts: ^4.2.1
+  rollup: ^2.75.7
+  rollup-plugin-dts: ^4.2.2
  rollup-plugin-styles: ^4.0.0
  rollup-plugin-terser: ^7.0.2
  rollup-plugin-ts: ^2.0.7
  tslib: ^2.4.0
  typescript: 4.6.4
-  vue: ^3.2.33
+  vue: ^3.2.37
  vue-demi: ^0.13.2
  vue2: npm:vue@^2.7.14
-  webpack: ^5.72.1
+  webpack: ^5.73.0

 dependencies:
  resize-detector: 0.3.0
@ -60,8 +60,8 @@ devDependencies:
  '@vue/eslint-config-typescript': 10.0.0_yzev4ryi2uowr3tzgilgj3i2em
  comment-mark: 1.1.1
  core-js: 3.23.3
-  echarts: 5.3.3
-  echarts-liquidfill: 3.1.0_echarts@5.3.3
+  echarts: 5.4.1
+  echarts-liquidfill: 3.1.0_echarts@5.4.1
  eslint: 7.32.0
  eslint-plugin-prettier: 3.4.1_fqyzhpusvewbsl54pqqbxqaegm
  eslint-plugin-vue: 8.7.1_eslint@7.32.0
@ -346,10 +346,20 @@ packages:
      '@babel/types': 7.18.7
    dev: true

+  /@babel/helper-string-parser/7.19.4:
+    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
  /@babel/helper-validator-identifier/7.18.6:
    resolution: {integrity: sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==}
    engines: {node: '>=6.9.0'}

+  /@babel/helper-validator-identifier/7.19.1:
+    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
  /@babel/helper-validator-option/7.18.6:
    resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
    engines: {node: '>=6.9.0'}
@ -394,6 +404,14 @@ packages:
    dependencies:
      '@babel/types': 7.18.7

+  /@babel/parser/7.20.7:
+    resolution: {integrity: sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.20.7
+    dev: true
+
  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.18.6_@babel+core@7.18.6:
    resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
    engines: {node: '>=6.9.0'}
@ -1294,6 +1312,15 @@ packages:
      '@babel/helper-validator-identifier': 7.18.6
      to-fast-properties: 2.0.0

+  /@babel/types/7.20.7:
+    resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+    dev: true
+
  /@eslint/eslintrc/0.4.3:
    resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
    engines: {node: ^10.12.0 || >=12.0.0}
@ -2191,7 +2218,7 @@ packages:
      '@vue/cli-plugin-vuex': 5.0.7_@vue+cli-service@5.0.7
      '@vue/cli-shared-utils': 5.0.7
      '@vue/component-compiler-utils': 3.3.0
-      '@vue/vue-loader-v15': /vue-loader/15.10.0_bq3n4ba3oabtyijop4fktu76xe
+      '@vue/vue-loader-v15': /vue-loader/15.10.1_bq3n4ba3oabtyijop4fktu76xe
      '@vue/web-component-wrapper': 1.3.0
      acorn: 8.7.1
      acorn-walk: 8.2.0
@ -2343,8 +2370,8 @@ packages:
  /@vue/compiler-sfc/2.7.14:
    resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
    dependencies:
-      '@babel/parser': 7.18.6
-      postcss: 8.4.14
+      '@babel/parser': 7.20.7
+      postcss: 8.4.21
      source-map: 0.6.1
    dev: true

@ -2380,7 +2407,7 @@ packages:
      source-map: 0.6.1
      vue-template-es2015-compiler: 1.9.1
    optionalDependencies:
-      prettier: 2.7.1
+      prettier: 2.8.2
    transitivePeerDependencies:
      - arc-templates
      - atpl
@ -2837,7 +2864,7 @@ packages:
      postcss: ^8.1.0
    dependencies:
      browserslist: 4.21.1
-      caniuse-lite: 1.0.30001363
+      caniuse-lite: 1.0.30001442
      fraction.js: 4.2.0
      normalize-range: 0.1.2
      picocolors: 1.0.0
@ -2991,7 +3018,7 @@ packages:
      '@types/semver': 7.3.10
      '@types/ua-parser-js': 0.7.36
      browserslist: 4.20.2
-      caniuse-lite: 1.0.30001363
+      caniuse-lite: 1.0.30001442
      isbot: 3.4.5
      object-path: 0.11.8
      semver: 7.3.7
@ -3003,7 +3030,7 @@ packages:
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true
    dependencies:
-      caniuse-lite: 1.0.30001363
+      caniuse-lite: 1.0.30001442
      electron-to-chromium: 1.4.180
      escalade: 3.1.1
      node-releases: 2.0.5
@ -3015,7 +3042,7 @@ packages:
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true
    dependencies:
-      caniuse-lite: 1.0.30001363
+      caniuse-lite: 1.0.30001442
      electron-to-chromium: 1.4.180
      node-releases: 2.0.5
      update-browserslist-db: 1.0.4_browserslist@4.21.1
@ -3080,13 +3107,13 @@ packages:
    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
    dependencies:
      browserslist: 4.21.1
-      caniuse-lite: 1.0.30001363
+      caniuse-lite: 1.0.30001442
      lodash.memoize: 4.1.2
      lodash.uniq: 4.5.0
    dev: true

-  /caniuse-lite/1.0.30001363:
-    resolution: {integrity: sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==}
+  /caniuse-lite/1.0.30001442:
+    resolution: {integrity: sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==}
    dev: true

  /case-sensitive-paths-webpack-plugin/2.4.0:
@ -3740,8 +3767,8 @@ packages:
  /csstype/2.6.20:
    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}

-  /csstype/3.1.0:
-    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
+  /csstype/3.1.1:
+    resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
    dev: true

  /debug/2.6.9:
@ -3925,19 +3952,19 @@ packages:
    engines: {node: '>=6.0.0'}
    dev: true

-  /echarts-liquidfill/3.1.0_echarts@5.3.3:
+  /echarts-liquidfill/3.1.0_echarts@5.4.1:
    resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
    peerDependencies:
      echarts: ^5.0.1
    dependencies:
-      echarts: 5.3.3
+      echarts: 5.4.1
    dev: true

-  /echarts/5.3.3:
-    resolution: {integrity: sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==}
+  /echarts/5.4.1:
+    resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==}
    dependencies:
      tslib: 2.3.0
-      zrender: 5.3.2
+      zrender: 5.4.1
    dev: true

  /ee-first/1.1.1:
@ -5127,6 +5154,13 @@ packages:
      minimist: 1.2.6
    dev: true

+  /json5/1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.6
+    dev: true
+
  /json5/2.2.1:
    resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
    engines: {node: '>=6'}
@ -5195,6 +5229,15 @@ packages:
      json5: 1.0.1
    dev: true

+  /loader-utils/1.4.2:
+    resolution: {integrity: sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 1.0.2
+    dev: true
+
  /loader-utils/2.0.2:
    resolution: {integrity: sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==}
    engines: {node: '>=8.9.0'}
@ -6208,6 +6251,15 @@ packages:
      picocolors: 1.0.0
      source-map-js: 1.0.2

+  /postcss/8.4.21:
+    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.4
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
  /prelude-ls/1.2.1:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
    engines: {node: '>= 0.8.0'}
@ -6226,6 +6278,13 @@ packages:
    hasBin: true
    dev: true

+  /prettier/2.8.2:
+    resolution: {integrity: sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+    optional: true
+
  /pretty-error/4.0.0:
    resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==}
    dependencies:
@ -7400,8 +7459,8 @@ packages:
    resolution: {integrity: sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==}
    dev: true

-  /vue-loader/15.10.0_bq3n4ba3oabtyijop4fktu76xe:
-    resolution: {integrity: sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==}
+  /vue-loader/15.10.1_bq3n4ba3oabtyijop4fktu76xe:
+    resolution: {integrity: sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==}
    peerDependencies:
      '@vue/compiler-sfc': ^3.0.8
      cache-loader: '*'
@ -7420,7 +7479,7 @@ packages:
      '@vue/component-compiler-utils': 3.3.0
      css-loader: 6.7.1_webpack@5.73.0
      hash-sum: 1.0.2
-      loader-utils: 1.4.0
+      loader-utils: 1.4.2
      vue-hot-reload-api: 2.3.4
      vue-style-loader: 4.1.3
      webpack: 5.73.0
@ -7506,7 +7565,7 @@ packages:
    resolution: {integrity: sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==}
    dependencies:
      '@vue/compiler-sfc': 2.7.14
-      csstype: 3.1.0
+      csstype: 3.1.1
    dev: true

  /vue/3.2.37:
@ -7831,8 +7890,8 @@ packages:
      strip-indent: 2.0.0
    dev: true

-  /zrender/5.3.2:
-    resolution: {integrity: sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==}
+  /zrender/5.4.1:
+    resolution: {integrity: sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==}
    dependencies:
      tslib: 2.3.0
    dev: true
--- a/rollup.config.js
+++ b/rollup.config.js
@ -4,6 +4,34 @@ import resolve from "@rollup/plugin-node-resolve";
 import styles from "rollup-plugin-styles";
 import { injectVueDemi } from "./scripts/rollup";

+/**
+ * Convert Rollup option to a style extracted/injected version
+ * @param {import('rollup').RollupOptions} option
+ * @param {boolean} extract
+ * @returns {import('rollup').RollupOptions}
+ */
+function handleStyle(option, extract) {
+  // inject styles plugin
+  const result = { ...option };
+  const { plugins, output } = result;
+  result.plugins = (plugins || []).concat(
+    extract ? styles({ mode: ["extract", "style.css"] }) : styles()
+  );
+
+  // modify output file names
+  if (extract && output) {
+    result.output = (Array.isArray(output) ? output : [output]).map(output => {
+      return {
+        ...output,
+        file: output.file.replace(/^dist\//, "dist/csp/"),
+        assetFileNames: "[name][extname]"
+      };
+    });
+  }
+
+  return result;
+}
+
 /** @type {import('rollup').RollupOptions[]} */
 const options = [
  {
@ -15,8 +43,7 @@ const options = [
          outputPath: (path, kind) =>
            kind === "declaration" ? "dist/index.d.ts" : path
        }
-      }),
-      styles()
+      })
    ],
    external: ["vue-demi", "echarts/core", "resize-detector"],
    output: {
@ -27,7 +54,7 @@ const options = [
  },
  {
    input: "src/index.ts",
-    plugins: [typescript(), styles()],
+    plugins: [typescript()],
    external: ["vue-demi", "echarts/core", "resize-detector"],
    output: [
      {
@ -65,7 +92,7 @@ const options = [
  },
  {
    input: "src/global.ts",
-    plugins: [resolve(), typescript(), styles()],
+    plugins: [resolve(), typescript()],
    external: ["vue-demi", "echarts", "echarts/core"],
    output: [
      {
@ -105,4 +132,7 @@ const options = [
  }
 ];

-export default options;
+export default [
+  ...options.map(option => handleStyle(option, false)),
+  ...options.map(option => handleStyle(option, true))
+];
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@ -68,7 +68,7 @@ export default defineComponent({
    ...autoresizeProps,
    ...loadingProps
  },
-  emits: [] as unknown as Emits,
+  emits: {} as unknown as Emits,
  inheritAttrs: false,
  setup(props, { attrs }) {
    const root = shallowRef<EChartsElement>();
--- a/src/types.ts
+++ b/src/types.ts
@ -1,4 +1,9 @@
-import { init, type SetOptionOpts } from "echarts/core";
+import {
+  init,
+  type SetOptionOpts,
+  type ECElementEvent,
+  type ElementEvent
+} from "echarts/core";
 import type { Ref } from "vue";

 export type Injection<T> = T | null | Ref<T | null> | { value: T | null };
@ -20,17 +25,31 @@ export type EventTarget = EChartsType | ZRenderType;
 type SetOptionType = EChartsType["setOption"];
 export type Option = Parameters<SetOptionType>[0];

-type EChartsMouseEventName =
+type MouseEventName =
  | "click"
  | "dblclick"
+  | "mouseout"
+  | "mouseover"
+  | "mouseup"
  | "mousedown"
  | "mousemove"
-  | "mouseup"
-  | "mouseover"
-  | "mouseout"
-  | "globalout"
-  | "contextmenu";
-type EChartsOtherEventName =
+  | "contextmenu"
+  | "globalout";
+
+type ElementEventName =
+  | MouseEventName
+  | "mousewheel"
+  | "drag"
+  | "dragstart"
+  | "dragend"
+  | "dragenter"
+  | "dragleave"
+  | "dragover"
+  | "drop";
+
+type ZRenderEventName = `zr:${ElementEventName}`;
+
+type OtherEventName =
  | "highlight"
  | "downplay"
  | "selectchanged"
@ -57,46 +76,22 @@ type EChartsOtherEventName =
  | "brush"
  | "brushEnd"
  | "brushselected"
-  | "globalcursortaken"
-  | "rendered"
-  | "finished";
-type ZRenderEventName =
-  | "click"
-  | "dblclick"
-  | "mousewheel"
-  | "mouseout"
-  | "mouseover"
-  | "mouseup"
-  | "mousedown"
-  | "mousemove"
-  | "contextmenu"
-  | "drag"
-  | "dragstart"
-  | "dragend"
-  | "dragenter"
-  | "dragleave"
-  | "dragover"
-  | "drop"
-  | "globalout";
-type OtherEventName = EChartsOtherEventName | `zr:${ZRenderEventName}`;
-
-// See https://echarts.apache.org/en/api.html#events.Mouse%20events
-interface MouseEventParams {
-  componentType: string;
-  seriesType: string;
-  seriesIndex: number;
-  seriesName: string;
-  name: string;
-  dataIndex: number;
-  color: string;
-}
+  | "globalcursortaken";

 type MouseEmits = {
-  [k in EChartsMouseEventName]: (params: MouseEventParams) => boolean;
+  [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;
+export type Emits = MouseEmits &
+  OtherEmits & {
+    rendered: (params: { elapsedTime: number }) => boolean;
+    finished: () => boolean;
+  } & ZRenderEmits;
Author	SHA1	Message	Date
Justineo	5f7f9c0d4c	feat: handle csp, extract css	2023-01-28 23:52:11 +08:00
Justineo	f5819e4361	chore: update deps and version	2023-01-09 12:58:10 +08:00
Justineo	16b9274ae1	fix: fix types for mouse events	2023-01-09 12:53:58 +08:00
Justineo	cf963efc6d	docs: sync chinese readme	2023-01-08 23:41:15 +08:00
JonasV	fd36c5120b	docs: `@nuxtjs/composition-api` is still needed for 2.7+	2023-01-08 23:39:55 +08:00
Justineo	4fab6c272b	chore: make emit type a little more consistent with runtime	2023-01-08 23:38:03 +08:00
Justineo	0edfb3936c	types: use more precise typings for event handlers, update peer deps for echarts	2023-01-02 23:41:40 +08:00
Justineo	ed4bd392ff	chore: update readme version	2023-01-01 23:52:32 +08:00