diff --git a/.clean-publish b/.clean-publish
index 711387ff..c8a9e5b8 100644
--- a/.clean-publish
+++ b/.clean-publish
@@ -1,4 +1,6 @@
{
"withoutPublish": true,
- "tempDir": "package"
+ "tempDir": "package",
+ "fields": ["tsd"],
+ "files": ["docs"]
}
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..3dddf3f6
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+dist/*
+node_modules/*
diff --git a/.eslintrc.js b/.eslintrc.js
index 643d2a8e..125f244a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,7 @@
module.exports = {
root: true,
parserOptions: {
- sourceType: 'module',
+ sourceType: 'module'
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: [
@@ -9,6 +9,8 @@ module.exports = {
'plugin:prettier/recommended',
'plugin:vue/recommended',
'plugin:prettier-vue/recommended',
+ 'plugin:vue/vue3-essential',
+ '@vue/eslint-config-typescript'
],
// required to lint *.vue files
plugins: ['prettier'],
@@ -19,9 +21,6 @@ module.exports = {
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'prettier/prettier': 'error',
- quotes: [2, 'single', 'avoid-escape'],
- },
- globals: {
- LIB_VERSION: true,
- },
-};
+ quotes: [2, 'single', 'avoid-escape']
+ }
+}
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index c844df07..3bc2c25a 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -26,3 +26,44 @@ jobs:
uses: andresz1/size-limit-action@master
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
+ typings:
+ runs-on: ubuntu-latest
+ name: typings
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v2
+ - name: Install pnpm
+ uses: pnpm/action-setup@v2.0.1
+ with:
+ version: 6
+ - name: Install Node.js
+ uses: actions/setup-node@v2
+ with:
+ node-version: 16
+ cache: 'pnpm'
+ - name: Install dependencies
+ run: pnpm install
+ - name: Prebuild
+ run: pnpm build
+ - name: Check typings
+ if: success()
+ run: pnpm test:typings
+ storybook:
+ runs-on: ubuntu-latest
+ name: storybook
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v2
+ - name: Install pnpm
+ uses: pnpm/action-setup@v2.0.1
+ with:
+ version: 6
+ - name: Install Node.js
+ uses: actions/setup-node@v2
+ with:
+ node-version: 16
+ cache: 'pnpm'
+ - name: Install dependencies
+ run: pnpm install
+ - name: Check storybook
+ run: pnpm build:storybook
diff --git a/.storybook/main.js b/.storybook/main.js
index 6ac5bccd..c3c5f864 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -7,7 +7,7 @@ module.exports = {
webpackFinal: async config => {
config.resolve.alias['vue-chartjs'] = path.resolve(
__dirname,
- '../src/index.js'
+ '../src/index.ts'
)
return config
}
diff --git a/package.json b/package.json
index 3f090a6e..5957c30d 100644
--- a/package.json
+++ b/package.json
@@ -37,8 +37,8 @@
"Charts"
],
"sideEffects": false,
- "main": "./src/index.js",
- "typings": "./dist/index.d.ts",
+ "main": "./src/index.ts",
+ "types": "./dist/index.d.ts",
"publishConfig": {
"main": "./dist/index.cjs",
"module": "./dist/index.js",
@@ -47,17 +47,20 @@
"scripts": {
"prepublishOnly": "pnpm test && pnpm build && del ./package && clean-publish",
"postpublish": "del ./package",
- "build": "rollup -c",
+ "emitDeclarations": "tsc --emitDeclarationOnly",
+ "build": "rollup -c & pnpm emitDeclarations",
"unit": "jest -c jest.config.json",
"test": "pnpm lint && pnpm unit",
"test:size": "size-limit",
- "lint": "eslint --ext .js,.vue src test",
+ "test:typings": "tsd",
+ "lint": "eslint 'src/**/*.ts'",
"format": "prettier --write src test",
"release": "standard-version",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"commit": "cz",
- "start:storybook": "start-storybook -p 6006"
+ "start:storybook": "start-storybook -p 6006",
+ "build:storybook": "del ./storybook-static; NODE_ENV=production build-storybook"
},
"peerDependencies": {
"chart.js": "^3.7.0"
@@ -75,7 +78,9 @@
"@swc/core": "^1.2.120",
"@swc/helpers": "^0.3.2",
"@swc/jest": "^0.2.15",
+ "@types/jest": "^27.4.1",
"@vitejs/plugin-vue": "^2.2.2",
+ "@vue/eslint-config-typescript": "^10.0.0",
"@vue/test-utils": "^2.0.0-rc.17",
"@vue/vue3-jest": "^27.0.0-alpha.4",
"babel-jest": "^27.4.5",
@@ -106,9 +111,14 @@
"simple-git-hooks": "^2.7.0",
"size-limit": "^7.0.8",
"standard-version": "^9.3.2",
+ "tsd": "^0.19.1",
+ "typescript": "^4.6.2",
"vite": "^2.8.6",
"vue": "^3.2.31",
"vue-loader": "^17.0.0",
"vuepress": "^0.14.4"
+ },
+ "tsd": {
+ "directory": "./test"
}
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f8777516..f3bb60ca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,9 @@ specifiers:
'@swc/core': ^1.2.120
'@swc/helpers': ^0.3.2
'@swc/jest': ^0.2.15
+ '@types/jest': ^27.4.1
'@vitejs/plugin-vue': ^2.2.2
+ '@vue/eslint-config-typescript': ^10.0.0
'@vue/test-utils': ^2.0.0-rc.17
'@vue/vue3-jest': ^27.0.0-alpha.4
babel-jest: ^27.4.5
@@ -44,6 +46,8 @@ specifiers:
simple-git-hooks: ^2.7.0
size-limit: ^7.0.8
standard-version: ^9.3.2
+ tsd: ^0.19.1
+ typescript: ^4.6.2
vite: ^2.8.6
vue: ^3.2.31
vue-loader: ^17.0.0
@@ -57,14 +61,16 @@ devDependencies:
'@rollup/plugin-node-resolve': 13.1.3_rollup@2.66.1
'@size-limit/preset-big-lib': 7.0.8_070b32a7cd5b24e1aa86940aabf66c67
'@storybook/addon-actions': 6.4.13
- '@storybook/addon-essentials': 6.4.13_5a939804e507bbcdc9a6b0dc26ed10af
- '@storybook/vue3': 6.4.19_9acdbe7dd6547c318b6d3fe71f0ccc31
+ '@storybook/addon-essentials': 6.4.13_d6bb44e1acc0edc65da507f152026f9c
+ '@storybook/vue3': 6.4.19_6fabd474ce48a9cba2517de27444e050
'@swc/core': 1.2.120
'@swc/helpers': 0.3.2
'@swc/jest': 0.2.15_@swc+core@1.2.120
+ '@types/jest': 27.4.1
'@vitejs/plugin-vue': 2.2.2_vite@2.8.6+vue@3.2.31
+ '@vue/eslint-config-typescript': 10.0.0_3991ff270b21162cb7043e22198f90cc
'@vue/test-utils': 2.0.0-rc.17_vue@3.2.31
- '@vue/vue3-jest': 27.0.0-alpha.4_086e071c456560e3f52577ca51f14fd3
+ '@vue/vue3-jest': 27.0.0-alpha.4_4e1ea214410aa521ed12ff5681f807c8
babel-jest: 27.4.5_@babel+core@7.16.5
babel-loader: 8.2.3_@babel+core@7.16.5
browserslist: 4.19.1
@@ -93,6 +99,8 @@ devDependencies:
simple-git-hooks: 2.7.0
size-limit: 7.0.8
standard-version: 9.3.2
+ tsd: 0.19.1
+ typescript: 4.6.2
vite: 2.8.6
vue: 3.2.31
vue-loader: 17.0.0
@@ -3329,12 +3337,12 @@ packages:
'@commitlint/execute-rule': 15.0.0
'@commitlint/resolve-extends': 15.0.0
'@commitlint/types': 15.0.0
- '@endemolshinegroup/cosmiconfig-typescript-loader': 3.0.2_f1e39502f5444cf4e1bb49a6f24fb32b
+ '@endemolshinegroup/cosmiconfig-typescript-loader': 3.0.2_c84a270c92bf6e8d30a9786dab5936e4
chalk: 4.1.2
cosmiconfig: 7.0.1
lodash: 4.17.21
resolve-from: 5.0.0
- typescript: 4.5.3
+ typescript: 4.6.2
dev: true
/@commitlint/load/16.2.1_@swc+core@1.2.120:
@@ -3349,10 +3357,10 @@ packages:
'@types/node': 17.0.18
chalk: 4.1.2
cosmiconfig: 7.0.1
- cosmiconfig-typescript-loader: 1.0.5_85b573b50bd3c98a25ceb530199c078f
+ cosmiconfig-typescript-loader: 1.0.5_b277d3279beba5662cbe91a0867ec5fc
lodash: 4.17.21
resolve-from: 5.0.0
- typescript: 4.5.3
+ typescript: 4.6.2
transitivePeerDependencies:
- '@swc/core'
- '@swc/wasm'
@@ -3601,7 +3609,7 @@ packages:
resolution: {integrity: sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==}
dev: true
- /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_f1e39502f5444cf4e1bb49a6f24fb32b:
+ /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_c84a270c92bf6e8d30a9786dab5936e4:
resolution: {integrity: sha512-QRVtqJuS1mcT56oHpVegkKBlgtWjXw/gHNWO3eL9oyB5Sc7HBoc2OLG/nYpVfT/Jejvo3NUrD0Udk7XgoyDKkA==}
engines: {node: '>=10.0.0'}
peerDependencies:
@@ -3610,7 +3618,7 @@ packages:
cosmiconfig: 7.0.1
lodash.get: 4.4.2
make-error: 1.3.6
- ts-node: 9.1.1_typescript@4.5.3
+ ts-node: 9.1.1_typescript@4.6.2
tslib: 2.3.1
transitivePeerDependencies:
- typescript
@@ -4191,7 +4199,7 @@ packages:
- '@types/react'
dev: true
- /@storybook/addon-controls/6.4.13_eslint@7.28.0:
+ /@storybook/addon-controls/6.4.13_eslint@7.28.0+typescript@4.6.2:
resolution: {integrity: sha512-XDaeYcwCi4qQ8hGXn4Mbdb6CQGGfZoBm5UjUaWBjDJdo54AyZv3VYdNgWFdiitqk5LRyh2omHD54EditM774NQ==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -4206,7 +4214,7 @@ packages:
'@storybook/api': 6.4.13
'@storybook/client-logger': 6.4.13
'@storybook/components': 6.4.13
- '@storybook/core-common': 6.4.13_eslint@7.28.0
+ '@storybook/core-common': 6.4.13_eslint@7.28.0+typescript@4.6.2
'@storybook/csf': 0.0.2--canary.87bc651.0
'@storybook/node-logger': 6.4.13
'@storybook/store': 6.4.13
@@ -4224,7 +4232,7 @@ packages:
- webpack-command
dev: true
- /@storybook/addon-docs/6.4.13_ed0ab9fbf576d931b0077b2bc14bdba8:
+ /@storybook/addon-docs/6.4.13_c449280f9bceb922d9f05f236c23e589:
resolution: {integrity: sha512-frsHcZD3jabIXxYkenwigJhAiqmbeBztc1cUTMWSZ9kVDJN6h2msq/vD0LEotfjcvDe3XS2HZgBjdDJ1UUUj/g==}
peerDependencies:
'@storybook/angular': 6.4.13
@@ -4282,10 +4290,10 @@ packages:
'@mdx-js/react': 1.6.22
'@storybook/addons': 6.4.13
'@storybook/api': 6.4.13
- '@storybook/builder-webpack4': 6.4.13_acorn@7.4.1+eslint@7.28.0
+ '@storybook/builder-webpack4': 6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e
'@storybook/client-logger': 6.4.13
'@storybook/components': 6.4.13
- '@storybook/core': 6.4.13_acorn@7.4.1+eslint@7.28.0
+ '@storybook/core': 6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e
'@storybook/core-events': 6.4.13
'@storybook/csf': 0.0.2--canary.87bc651.0
'@storybook/csf-tools': 6.4.13
@@ -4295,7 +4303,7 @@ packages:
'@storybook/source-loader': 6.4.13
'@storybook/store': 6.4.13
'@storybook/theming': 6.4.13
- '@storybook/vue3': 6.4.19_9acdbe7dd6547c318b6d3fe71f0ccc31
+ '@storybook/vue3': 6.4.19_6fabd474ce48a9cba2517de27444e050
acorn: 7.4.1
acorn-jsx: 5.3.2_acorn@7.4.1
acorn-walk: 7.2.0
@@ -4333,7 +4341,7 @@ packages:
- webpack-command
dev: true
- /@storybook/addon-essentials/6.4.13_5a939804e507bbcdc9a6b0dc26ed10af:
+ /@storybook/addon-essentials/6.4.13_d6bb44e1acc0edc65da507f152026f9c:
resolution: {integrity: sha512-ekvyeVckKkffGQMzp6cT0/Mi8Wo1fqF/DGp3vJIcIrExfvuZa/qi8PoHyx+cr8dfI0b8Jf8Lv7qcLIxNnkA5Bg==}
peerDependencies:
'@babel/core': ^7.9.6
@@ -4361,8 +4369,8 @@ packages:
'@babel/core': 7.16.5
'@storybook/addon-actions': 6.4.13
'@storybook/addon-backgrounds': 6.4.13
- '@storybook/addon-controls': 6.4.13_eslint@7.28.0
- '@storybook/addon-docs': 6.4.13_ed0ab9fbf576d931b0077b2bc14bdba8
+ '@storybook/addon-controls': 6.4.13_eslint@7.28.0+typescript@4.6.2
+ '@storybook/addon-docs': 6.4.13_c449280f9bceb922d9f05f236c23e589
'@storybook/addon-measure': 6.4.13
'@storybook/addon-outline': 6.4.13
'@storybook/addon-toolbars': 6.4.13
@@ -4583,7 +4591,7 @@ packages:
util-deprecate: 1.0.2
dev: true
- /@storybook/builder-webpack4/6.4.13_acorn@7.4.1+eslint@7.28.0:
+ /@storybook/builder-webpack4/6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e:
resolution: {integrity: sha512-Vjvje/XpFirVY6bOU+ahS2niapjA0Qams5jBE8YnPUhbigqsLOMMpnJ+C505xC6S5VW0lMkhJpCQ1NQyva3sRw==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -4621,7 +4629,7 @@ packages:
'@storybook/client-api': 6.4.13
'@storybook/client-logger': 6.4.13
'@storybook/components': 6.4.13
- '@storybook/core-common': 6.4.13_eslint@7.28.0
+ '@storybook/core-common': 6.4.13_eslint@7.28.0+typescript@4.6.2
'@storybook/core-events': 6.4.13
'@storybook/node-logger': 6.4.13
'@storybook/preview-web': 6.4.13
@@ -4646,7 +4654,7 @@ packages:
glob-promise: 3.4.0_glob@7.2.0
global: 4.4.0
html-webpack-plugin: 4.5.2_webpack@4.46.0
- pnp-webpack-plugin: 1.6.4
+ pnp-webpack-plugin: 1.6.4_typescript@4.6.2
postcss: 7.0.39
postcss-flexbugs-fixes: 4.2.1
postcss-loader: 4.3.0_postcss@7.0.39+webpack@4.46.0
@@ -4655,6 +4663,7 @@ packages:
style-loader: 1.3.0_webpack@4.46.0
terser-webpack-plugin: 4.2.3_acorn@7.4.1+webpack@4.46.0
ts-dedent: 2.2.0
+ typescript: 4.6.2
url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0
util-deprecate: 1.0.2
webpack: 4.46.0
@@ -4672,7 +4681,7 @@ packages:
- webpack-command
dev: true
- /@storybook/builder-webpack4/6.4.19_20a16e7548cf3623e0d86e2848596cc6:
+ /@storybook/builder-webpack4/6.4.19_7706808a552eb6e46287b90885c9e482:
resolution: {integrity: sha512-wxA6SMH11duc9D53aeVVBwrVRemFIoxHp/dOugkkg6ZZFAb4ZmWzf/ENc3vQIZdZpfNRi7IZIZEOfoHc994cmw==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -4710,7 +4719,7 @@ packages:
'@storybook/client-api': 6.4.19_react-dom@16.14.0+react@16.14.0
'@storybook/client-logger': 6.4.19
'@storybook/components': 6.4.19_react-dom@16.14.0+react@16.14.0
- '@storybook/core-common': 6.4.19_20a16e7548cf3623e0d86e2848596cc6
+ '@storybook/core-common': 6.4.19_7706808a552eb6e46287b90885c9e482
'@storybook/core-events': 6.4.19
'@storybook/node-logger': 6.4.19
'@storybook/preview-web': 6.4.19_react-dom@16.14.0+react@16.14.0
@@ -4735,7 +4744,7 @@ packages:
glob-promise: 3.4.0_glob@7.2.0
global: 4.4.0
html-webpack-plugin: 4.5.2_webpack@4.46.0
- pnp-webpack-plugin: 1.6.4
+ pnp-webpack-plugin: 1.6.4_typescript@4.6.2
postcss: 7.0.39
postcss-flexbugs-fixes: 4.2.1
postcss-loader: 4.3.0_postcss@7.0.39+webpack@4.46.0
@@ -4746,6 +4755,7 @@ packages:
style-loader: 1.3.0_webpack@4.46.0
terser-webpack-plugin: 4.2.3_webpack@4.46.0
ts-dedent: 2.2.0
+ typescript: 4.6.2
url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0
util-deprecate: 1.0.2
webpack: 4.46.0
@@ -4965,7 +4975,7 @@ packages:
- '@types/react'
dev: true
- /@storybook/core-client/6.4.13:
+ /@storybook/core-client/6.4.13_typescript@4.6.2:
resolution: {integrity: sha512-1m7cAlF16mtVdSNmP8a4z00GCkw2dMyUyJX8snzgYGLD5FaqPLyNGJIidqllHsBUXBfEL2FSu+E9QygK12+O1w==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -4994,13 +5004,14 @@ packages:
qs: 6.10.3
regenerator-runtime: 0.13.9
ts-dedent: 2.2.0
+ typescript: 4.6.2
unfetch: 4.2.0
util-deprecate: 1.0.2
transitivePeerDependencies:
- '@types/react'
dev: true
- /@storybook/core-client/6.4.13_webpack@4.46.0:
+ /@storybook/core-client/6.4.13_typescript@4.6.2+webpack@4.46.0:
resolution: {integrity: sha512-1m7cAlF16mtVdSNmP8a4z00GCkw2dMyUyJX8snzgYGLD5FaqPLyNGJIidqllHsBUXBfEL2FSu+E9QygK12+O1w==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -5029,6 +5040,7 @@ packages:
qs: 6.10.3
regenerator-runtime: 0.13.9
ts-dedent: 2.2.0
+ typescript: 4.6.2
unfetch: 4.2.0
util-deprecate: 1.0.2
webpack: 4.46.0
@@ -5036,7 +5048,7 @@ packages:
- '@types/react'
dev: true
- /@storybook/core-client/6.4.19_e97e5e3809294a3414549b4ba42cd203:
+ /@storybook/core-client/6.4.19_1e23a0fa29879f8bdd5a0b4c23f44c1d:
resolution: {integrity: sha512-rQHRZjhArPleE7/S8ZUolgzwY+hC0smSKX/3PQxO2GcebDjnJj6+iSV3h+aSMHMmTdoCQvjYw9aBpT8scuRe+A==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -5067,6 +5079,7 @@ packages:
react-dom: 16.14.0_react@16.14.0
regenerator-runtime: 0.13.9
ts-dedent: 2.2.0
+ typescript: 4.6.2
unfetch: 4.2.0
util-deprecate: 1.0.2
webpack: 4.46.0
@@ -5074,7 +5087,7 @@ packages:
- '@types/react'
dev: true
- /@storybook/core-common/6.4.13_eslint@7.28.0:
+ /@storybook/core-common/6.4.13_eslint@7.28.0+typescript@4.6.2:
resolution: {integrity: sha512-KoFa4yktuqWsW+/O6uc7iba25X9eKhp80l9tHsa1RWE94mQdCBUo5VsNoe35JvqFSDOspQ+brCe6vBUaIYe+cQ==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -5117,7 +5130,7 @@ packages:
express: 4.17.2
file-system-cache: 1.0.5
find-up: 5.0.0
- fork-ts-checker-webpack-plugin: 6.5.0_eslint@7.28.0+webpack@4.46.0
+ fork-ts-checker-webpack-plugin: 6.5.0_ce01ad3ba1d020f8a4eca15d0188e5bb
fs-extra: 9.1.0
glob: 7.2.0
handlebars: 4.7.7
@@ -5131,6 +5144,7 @@ packages:
slash: 3.0.0
telejson: 5.3.3
ts-dedent: 2.2.0
+ typescript: 4.6.2
util-deprecate: 1.0.2
webpack: 4.46.0
transitivePeerDependencies:
@@ -5141,7 +5155,7 @@ packages:
- webpack-command
dev: true
- /@storybook/core-common/6.4.19_20a16e7548cf3623e0d86e2848596cc6:
+ /@storybook/core-common/6.4.19_7706808a552eb6e46287b90885c9e482:
resolution: {integrity: sha512-X1pJJkO48DFxl6iyEemIKqRkJ7j9/cBh3BRBUr+xZHXBvnD0GKDXIocwh0PjSxSC6XSu3UCQnqtKi3PbjRl8Dg==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -5184,7 +5198,7 @@ packages:
express: 4.17.2
file-system-cache: 1.0.5
find-up: 5.0.0
- fork-ts-checker-webpack-plugin: 6.5.0_eslint@7.28.0+webpack@4.46.0
+ fork-ts-checker-webpack-plugin: 6.5.0_ce01ad3ba1d020f8a4eca15d0188e5bb
fs-extra: 9.1.0
glob: 7.2.0
handlebars: 4.7.7
@@ -5200,6 +5214,7 @@ packages:
slash: 3.0.0
telejson: 5.3.3
ts-dedent: 2.2.0
+ typescript: 4.6.2
util-deprecate: 1.0.2
webpack: 4.46.0
transitivePeerDependencies:
@@ -5222,7 +5237,7 @@ packages:
core-js: 3.20.2
dev: true
- /@storybook/core-server/6.4.13_acorn@7.4.1+eslint@7.28.0:
+ /@storybook/core-server/6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e:
resolution: {integrity: sha512-i3zrtHHkV6/b+jJF65BQu+YuXen+T/MF1f5J+li5nvJnLKhssVQmvpGvWyJezT3OgFkC1+BFBokFY6NXHHw77g==}
peerDependencies:
'@storybook/builder-webpack5': 6.4.13
@@ -5239,13 +5254,13 @@ packages:
optional: true
dependencies:
'@discoveryjs/json-ext': 0.5.6
- '@storybook/builder-webpack4': 6.4.13_acorn@7.4.1+eslint@7.28.0
- '@storybook/core-client': 6.4.13_webpack@4.46.0
- '@storybook/core-common': 6.4.13_eslint@7.28.0
+ '@storybook/builder-webpack4': 6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e
+ '@storybook/core-client': 6.4.13_typescript@4.6.2+webpack@4.46.0
+ '@storybook/core-common': 6.4.13_eslint@7.28.0+typescript@4.6.2
'@storybook/core-events': 6.4.13
'@storybook/csf': 0.0.2--canary.87bc651.0
'@storybook/csf-tools': 6.4.13
- '@storybook/manager-webpack4': 6.4.13_acorn@7.4.1+eslint@7.28.0
+ '@storybook/manager-webpack4': 6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e
'@storybook/node-logger': 6.4.13
'@storybook/semver': 7.3.2
'@storybook/store': 6.4.13
@@ -5276,6 +5291,7 @@ packages:
slash: 3.0.0
telejson: 5.3.3
ts-dedent: 2.2.0
+ typescript: 4.6.2
util-deprecate: 1.0.2
watchpack: 2.3.1
webpack: 4.46.0
@@ -5292,7 +5308,7 @@ packages:
- webpack-command
dev: true
- /@storybook/core-server/6.4.19_20a16e7548cf3623e0d86e2848596cc6:
+ /@storybook/core-server/6.4.19_7706808a552eb6e46287b90885c9e482:
resolution: {integrity: sha512-bKsUB9f7hl5ya2JXxpIrErmbDQjoH39FVbzYZWjMo4t/b7+Xyi6vYadwyWcqlpUQmis09ZaSMv8L/Tw0TuwLAA==}
peerDependencies:
'@storybook/builder-webpack5': 6.4.19
@@ -5309,13 +5325,13 @@ packages:
optional: true
dependencies:
'@discoveryjs/json-ext': 0.5.6
- '@storybook/builder-webpack4': 6.4.19_20a16e7548cf3623e0d86e2848596cc6
- '@storybook/core-client': 6.4.19_e97e5e3809294a3414549b4ba42cd203
- '@storybook/core-common': 6.4.19_20a16e7548cf3623e0d86e2848596cc6
+ '@storybook/builder-webpack4': 6.4.19_7706808a552eb6e46287b90885c9e482
+ '@storybook/core-client': 6.4.19_1e23a0fa29879f8bdd5a0b4c23f44c1d
+ '@storybook/core-common': 6.4.19_7706808a552eb6e46287b90885c9e482
'@storybook/core-events': 6.4.19
'@storybook/csf': 0.0.2--canary.87bc651.0
'@storybook/csf-tools': 6.4.19
- '@storybook/manager-webpack4': 6.4.19_20a16e7548cf3623e0d86e2848596cc6
+ '@storybook/manager-webpack4': 6.4.19_7706808a552eb6e46287b90885c9e482
'@storybook/node-logger': 6.4.19
'@storybook/semver': 7.3.2
'@storybook/store': 6.4.19_react-dom@16.14.0+react@16.14.0
@@ -5348,6 +5364,7 @@ packages:
slash: 3.0.0
telejson: 5.3.3
ts-dedent: 2.2.0
+ typescript: 4.6.2
util-deprecate: 1.0.2
watchpack: 2.3.1
webpack: 4.46.0
@@ -5365,7 +5382,7 @@ packages:
- webpack-command
dev: true
- /@storybook/core/6.4.13_acorn@7.4.1+eslint@7.28.0:
+ /@storybook/core/6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e:
resolution: {integrity: sha512-OSbji5w4jrGNALbxJwktZhi8qw4bGgL88dL72O40173b8ROLBOGkEkkz/BpHbqx2PhS9sGVNVMK2b2BwAiiu7g==}
peerDependencies:
'@storybook/builder-webpack5': 6.4.13
@@ -5379,8 +5396,9 @@ packages:
typescript:
optional: true
dependencies:
- '@storybook/core-client': 6.4.13
- '@storybook/core-server': 6.4.13_acorn@7.4.1+eslint@7.28.0
+ '@storybook/core-client': 6.4.13_typescript@4.6.2
+ '@storybook/core-server': 6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e
+ typescript: 4.6.2
transitivePeerDependencies:
- '@storybook/manager-webpack5'
- '@types/react'
@@ -5394,7 +5412,7 @@ packages:
- webpack-command
dev: true
- /@storybook/core/6.4.19_15772a01d48845ebbb7adcd06a027d90:
+ /@storybook/core/6.4.19_de89715138f42fc7435f35df74df0621:
resolution: {integrity: sha512-55LOQ/h/kf1jMhjN85t/pIEdIwWEG9yV7bdwv3niVvmoypCxyyjn9/QNK0RKYAeDSUtdm6FVoJ6k5CpxWz2d8w==}
peerDependencies:
'@storybook/builder-webpack5': 6.4.19
@@ -5408,10 +5426,11 @@ packages:
typescript:
optional: true
dependencies:
- '@storybook/core-client': 6.4.19_e97e5e3809294a3414549b4ba42cd203
- '@storybook/core-server': 6.4.19_20a16e7548cf3623e0d86e2848596cc6
+ '@storybook/core-client': 6.4.19_1e23a0fa29879f8bdd5a0b4c23f44c1d
+ '@storybook/core-server': 6.4.19_7706808a552eb6e46287b90885c9e482
react: 16.14.0
react-dom: 16.14.0_react@16.14.0
+ typescript: 4.6.2
webpack: 4.46.0
transitivePeerDependencies:
- '@storybook/manager-webpack5'
@@ -5481,7 +5500,7 @@ packages:
lodash: 4.17.21
dev: true
- /@storybook/manager-webpack4/6.4.13_acorn@7.4.1+eslint@7.28.0:
+ /@storybook/manager-webpack4/6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e:
resolution: {integrity: sha512-aUUIvSf1nUSuPEdLFcbXbEbm+WlBrpX+Ce+Ee5zuMpggfiMeq4H4UB5QuluB8oLUcJA/ZoQZ9m4pPfUZDH0O0w==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -5495,8 +5514,8 @@ packages:
'@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.16.7
'@babel/preset-react': 7.16.7_@babel+core@7.16.7
'@storybook/addons': 6.4.13
- '@storybook/core-client': 6.4.13_webpack@4.46.0
- '@storybook/core-common': 6.4.13_eslint@7.28.0
+ '@storybook/core-client': 6.4.13_typescript@4.6.2+webpack@4.46.0
+ '@storybook/core-common': 6.4.13_eslint@7.28.0+typescript@4.6.2
'@storybook/node-logger': 6.4.13
'@storybook/theming': 6.4.13
'@storybook/ui': 6.4.13
@@ -5514,7 +5533,7 @@ packages:
fs-extra: 9.1.0
html-webpack-plugin: 4.5.2_webpack@4.46.0
node-fetch: 2.6.6
- pnp-webpack-plugin: 1.6.4
+ pnp-webpack-plugin: 1.6.4_typescript@4.6.2
read-pkg-up: 7.0.1
regenerator-runtime: 0.13.9
resolve-from: 5.0.0
@@ -5522,6 +5541,7 @@ packages:
telejson: 5.3.3
terser-webpack-plugin: 4.2.3_acorn@7.4.1+webpack@4.46.0
ts-dedent: 2.2.0
+ typescript: 4.6.2
url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0
util-deprecate: 1.0.2
webpack: 4.46.0
@@ -5537,7 +5557,7 @@ packages:
- webpack-command
dev: true
- /@storybook/manager-webpack4/6.4.19_20a16e7548cf3623e0d86e2848596cc6:
+ /@storybook/manager-webpack4/6.4.19_7706808a552eb6e46287b90885c9e482:
resolution: {integrity: sha512-R8ugZjTYqXvlc6gDOcw909L65sIleOmIJLZR+N6/H85MivGXHu39jOwONqB7tVACufRty4FNecn8tEiQL2SAKA==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
@@ -5551,8 +5571,8 @@ packages:
'@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.16.7
'@babel/preset-react': 7.16.7_@babel+core@7.16.7
'@storybook/addons': 6.4.19_react-dom@16.14.0+react@16.14.0
- '@storybook/core-client': 6.4.19_e97e5e3809294a3414549b4ba42cd203
- '@storybook/core-common': 6.4.19_20a16e7548cf3623e0d86e2848596cc6
+ '@storybook/core-client': 6.4.19_1e23a0fa29879f8bdd5a0b4c23f44c1d
+ '@storybook/core-common': 6.4.19_7706808a552eb6e46287b90885c9e482
'@storybook/node-logger': 6.4.19
'@storybook/theming': 6.4.19_react-dom@16.14.0+react@16.14.0
'@storybook/ui': 6.4.19_react-dom@16.14.0+react@16.14.0
@@ -5570,7 +5590,7 @@ packages:
fs-extra: 9.1.0
html-webpack-plugin: 4.5.2_webpack@4.46.0
node-fetch: 2.6.7
- pnp-webpack-plugin: 1.6.4
+ pnp-webpack-plugin: 1.6.4_typescript@4.6.2
react: 16.14.0
react-dom: 16.14.0_react@16.14.0
read-pkg-up: 7.0.1
@@ -5580,6 +5600,7 @@ packages:
telejson: 5.3.3
terser-webpack-plugin: 4.2.3_webpack@4.46.0
ts-dedent: 2.2.0
+ typescript: 4.6.2
url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0
util-deprecate: 1.0.2
webpack: 4.46.0
@@ -5907,7 +5928,7 @@ packages:
- '@types/react'
dev: true
- /@storybook/vue3/6.4.19_9acdbe7dd6547c318b6d3fe71f0ccc31:
+ /@storybook/vue3/6.4.19_6fabd474ce48a9cba2517de27444e050:
resolution: {integrity: sha512-ocW2haoDOXudK3XHC7raBjq9k9gPsApiyQc4dPnjcF8sXmC3WZg6CYSPt0o00UMDmeDL0MDW336fw94jy6+LfA==}
engines: {node: '>=10.13.0'}
hasBin: true
@@ -5919,8 +5940,8 @@ packages:
dependencies:
'@babel/core': 7.16.5
'@storybook/addons': 6.4.19_react-dom@16.14.0+react@16.14.0
- '@storybook/core': 6.4.19_15772a01d48845ebbb7adcd06a027d90
- '@storybook/core-common': 6.4.19_20a16e7548cf3623e0d86e2848596cc6
+ '@storybook/core': 6.4.19_de89715138f42fc7435f35df74df0621
+ '@storybook/core-common': 6.4.19_7706808a552eb6e46287b90885c9e482
'@storybook/csf': 0.0.2--canary.87bc651.0
'@storybook/store': 6.4.19_react-dom@16.14.0+react@16.14.0
'@types/webpack-env': 1.16.3
@@ -5932,7 +5953,7 @@ packages:
read-pkg-up: 7.0.1
regenerator-runtime: 0.13.9
ts-dedent: 2.2.0
- ts-loader: 8.3.0_webpack@4.46.0
+ ts-loader: 8.3.0_typescript@4.6.2+webpack@4.46.0
vue: 3.2.31
vue-docgen-api: 4.43.2
vue-docgen-loader: 1.5.0_12c18269368d208f5c2d57decefa0697
@@ -6121,6 +6142,11 @@ packages:
dev: true
optional: true
+ /@tsd/typescript/4.5.5:
+ resolution: {integrity: sha512-TxQ9QiUT94ZjKu++ta/iwTMVHsix4ApohnaHPTSd58WQuTjPIELP0tUYcW7lT6psz7yZiU4eRw+X4v/XV830Sw==}
+ hasBin: true
+ dev: true
+
/@types/babel__core/7.1.17:
resolution: {integrity: sha512-6zzkezS9QEIL8yCBvXWxPTJPNuMeECJVxSOhxNY/jfq9LxOTHivaYTqr37n9LknWWRTIkzqH2UilS5QFvfa90A==}
dependencies:
@@ -6167,6 +6193,13 @@ packages:
'@types/estree': 0.0.51
dev: true
+ /@types/eslint/7.29.0:
+ resolution: {integrity: sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==}
+ dependencies:
+ '@types/estree': 0.0.51
+ '@types/json-schema': 7.0.9
+ dev: true
+
/@types/eslint/8.4.1:
resolution: {integrity: sha512-GE44+DNEyxxh2Kc6ro/VkIj+9ma0pO0bwv9+uHSyBrikYOHr8zYcdPvnBOp1aw8s+CjRvuSx7CyWqRrNFQ59mA==}
dependencies:
@@ -6225,6 +6258,13 @@ packages:
'@types/istanbul-lib-report': 3.0.0
dev: true
+ /@types/jest/27.4.1:
+ resolution: {integrity: sha512-23iPJADSmicDVrWk+HT58LMJtzLAnB2AgIzplQuq/bSrGaxCrlvRFjGbXmamnnk/mAmCdLStiGqggu28ocUyiw==}
+ dependencies:
+ jest-matcher-utils: 27.4.2
+ pretty-format: 27.4.2
+ dev: true
+
/@types/json-schema/7.0.9:
resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==}
dev: true
@@ -6404,6 +6444,132 @@ packages:
dev: true
optional: true
+ /@typescript-eslint/eslint-plugin/5.14.0_a51fe434674359365e7e6c67e2dd8843:
+ resolution: {integrity: sha512-ir0wYI4FfFUDfLcuwKzIH7sMVA+db7WYen47iRSaCGl+HMAZI9fpBwfDo45ZALD3A45ZGyHWDNLhbg8tZrMX4w==}
+ engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+ peerDependencies:
+ '@typescript-eslint/parser': ^5.0.0
+ eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+ typescript: '*'
+ peerDependenciesMeta:
+ typescript:
+ optional: true
+ dependencies:
+ '@typescript-eslint/parser': 5.14.0_eslint@7.28.0+typescript@4.6.2
+ '@typescript-eslint/scope-manager': 5.14.0
+ '@typescript-eslint/type-utils': 5.14.0_eslint@7.28.0+typescript@4.6.2
+ '@typescript-eslint/utils': 5.14.0_eslint@7.28.0+typescript@4.6.2
+ debug: 4.3.3
+ eslint: 7.28.0
+ functional-red-black-tree: 1.0.1
+ ignore: 5.2.0
+ regexpp: 3.2.0
+ semver: 7.3.5
+ tsutils: 3.21.0_typescript@4.6.2
+ typescript: 4.6.2
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
+ /@typescript-eslint/parser/5.14.0_eslint@7.28.0+typescript@4.6.2:
+ resolution: {integrity: sha512-aHJN8/FuIy1Zvqk4U/gcO/fxeMKyoSv/rS46UXMXOJKVsLQ+iYPuXNbpbH7cBLcpSbmyyFbwrniLx5+kutu1pw==}
+ engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+ peerDependencies:
+ eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+ typescript: '*'
+ peerDependenciesMeta:
+ typescript:
+ optional: true
+ dependencies:
+ '@typescript-eslint/scope-manager': 5.14.0
+ '@typescript-eslint/types': 5.14.0
+ '@typescript-eslint/typescript-estree': 5.14.0_typescript@4.6.2
+ debug: 4.3.3
+ eslint: 7.28.0
+ typescript: 4.6.2
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
+ /@typescript-eslint/scope-manager/5.14.0:
+ resolution: {integrity: sha512-LazdcMlGnv+xUc5R4qIlqH0OWARyl2kaP8pVCS39qSL3Pd1F7mI10DbdXeARcE62sVQE4fHNvEqMWsypWO+yEw==}
+ engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+ dependencies:
+ '@typescript-eslint/types': 5.14.0
+ '@typescript-eslint/visitor-keys': 5.14.0
+ dev: true
+
+ /@typescript-eslint/type-utils/5.14.0_eslint@7.28.0+typescript@4.6.2:
+ resolution: {integrity: sha512-d4PTJxsqaUpv8iERTDSQBKUCV7Q5yyXjqXUl3XF7Sd9ogNLuKLkxz82qxokqQ4jXdTPZudWpmNtr/JjbbvUixw==}
+ engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+ peerDependencies:
+ eslint: '*'
+ typescript: '*'
+ peerDependenciesMeta:
+ typescript:
+ optional: true
+ dependencies:
+ '@typescript-eslint/utils': 5.14.0_eslint@7.28.0+typescript@4.6.2
+ debug: 4.3.3
+ eslint: 7.28.0
+ tsutils: 3.21.0_typescript@4.6.2
+ typescript: 4.6.2
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
+ /@typescript-eslint/types/5.14.0:
+ resolution: {integrity: sha512-BR6Y9eE9360LNnW3eEUqAg6HxS9Q35kSIs4rp4vNHRdfg0s+/PgHgskvu5DFTM7G5VKAVjuyaN476LCPrdA7Mw==}
+ engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+ dev: true
+
+ /@typescript-eslint/typescript-estree/5.14.0_typescript@4.6.2:
+ resolution: {integrity: sha512-QGnxvROrCVtLQ1724GLTHBTR0lZVu13izOp9njRvMkCBgWX26PKvmMP8k82nmXBRD3DQcFFq2oj3cKDwr0FaUA==}
+ engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+ peerDependencies:
+ typescript: '*'
+ peerDependenciesMeta:
+ typescript:
+ optional: true
+ dependencies:
+ '@typescript-eslint/types': 5.14.0
+ '@typescript-eslint/visitor-keys': 5.14.0
+ debug: 4.3.3
+ globby: 11.1.0
+ is-glob: 4.0.3
+ semver: 7.3.5
+ tsutils: 3.21.0_typescript@4.6.2
+ typescript: 4.6.2
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
+ /@typescript-eslint/utils/5.14.0_eslint@7.28.0+typescript@4.6.2:
+ resolution: {integrity: sha512-EHwlII5mvUA0UsKYnVzySb/5EE/t03duUTweVy8Zqt3UQXBrpEVY144OTceFKaOe4xQXZJrkptCf7PjEBeGK4w==}
+ engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+ peerDependencies:
+ eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+ dependencies:
+ '@types/json-schema': 7.0.9
+ '@typescript-eslint/scope-manager': 5.14.0
+ '@typescript-eslint/types': 5.14.0
+ '@typescript-eslint/typescript-estree': 5.14.0_typescript@4.6.2
+ eslint: 7.28.0
+ eslint-scope: 5.1.1
+ eslint-utils: 3.0.0_eslint@7.28.0
+ transitivePeerDependencies:
+ - supports-color
+ - typescript
+ dev: true
+
+ /@typescript-eslint/visitor-keys/5.14.0:
+ resolution: {integrity: sha512-yL0XxfzR94UEkjBqyymMLgCBdojzEuy/eim7N9/RIcTNxpJudAcqsU8eRyfzBbcEzGoPWfdM3AGak3cN08WOIw==}
+ engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+ dependencies:
+ '@typescript-eslint/types': 5.14.0
+ eslint-visitor-keys: 3.1.0
+ dev: true
+
/@vitejs/plugin-vue/2.2.2_vite@2.8.6+vue@3.2.31:
resolution: {integrity: sha512-3C0s45VOwIFEDU+2ownJOpb0zD5fnjXWaHVOLID2R1mYOlAx3doNBFnNbVjaZvpke/L7IdPJXjpyYpXZToDKig==}
engines: {node: '>=12.0.0'}
@@ -6499,6 +6665,23 @@ packages:
prettier: 2.5.1
dev: true
+ /@vue/eslint-config-typescript/10.0.0_3991ff270b21162cb7043e22198f90cc:
+ resolution: {integrity: sha512-F94cL8ug3FaYXlCfU5/wiGjk1qeadmoBpRGAOBq+qre3Smdupa59dd6ZJrsfRODpsMPyTG7330juMDsUvpZ3Rw==}
+ engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+ peerDependencies:
+ eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
+ eslint-plugin-vue: ^8.0.1
+ dependencies:
+ '@typescript-eslint/eslint-plugin': 5.14.0_a51fe434674359365e7e6c67e2dd8843
+ '@typescript-eslint/parser': 5.14.0_eslint@7.28.0+typescript@4.6.2
+ eslint: 7.28.0
+ eslint-plugin-vue: 8.2.0_eslint@7.28.0
+ vue-eslint-parser: 8.0.1_eslint@7.28.0
+ transitivePeerDependencies:
+ - supports-color
+ - typescript
+ dev: true
+
/@vue/reactivity-transform/3.2.31:
resolution: {integrity: sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==}
dependencies:
@@ -6556,7 +6739,7 @@ packages:
vue: 3.2.31
dev: true
- /@vue/vue3-jest/27.0.0-alpha.4_086e071c456560e3f52577ca51f14fd3:
+ /@vue/vue3-jest/27.0.0-alpha.4_4e1ea214410aa521ed12ff5681f807c8:
resolution: {integrity: sha512-RgEwjNvwdWmRngHqgt957fLT6riOkv/Kyl0ra8jo0Z8Dgosmu17dNqgBzLn9fTgNlTbHv4TQQdLRjczr+z2mlA==}
peerDependencies:
'@babel/core': 7.x
@@ -6580,6 +6763,7 @@ packages:
jest: 27.4.4
source-map: 0.5.6
tsconfig: 7.0.0
+ typescript: 4.6.2
vue: 3.2.31
transitivePeerDependencies:
- supports-color
@@ -9258,7 +9442,7 @@ packages:
resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
dev: true
- /cosmiconfig-typescript-loader/1.0.5_85b573b50bd3c98a25ceb530199c078f:
+ /cosmiconfig-typescript-loader/1.0.5_b277d3279beba5662cbe91a0867ec5fc:
resolution: {integrity: sha512-FL/YR1nb8hyN0bAcP3MBaIoZravfZtVsN/RuPnoo6UVjqIrDxSNIpXHCGgJe0ZWy5yImpyD6jq5wCJ5f1nUv8g==}
engines: {node: '>=12', npm: '>=6'}
peerDependencies:
@@ -9267,8 +9451,8 @@ packages:
dependencies:
'@types/node': 17.0.18
cosmiconfig: 7.0.1
- ts-node: 10.5.0_85b573b50bd3c98a25ceb530199c078f
- typescript: 4.5.3
+ ts-node: 10.5.0_b277d3279beba5662cbe91a0867ec5fc
+ typescript: 4.6.2
transitivePeerDependencies:
- '@swc/core'
- '@swc/wasm'
@@ -10609,6 +10793,20 @@ packages:
eslint-plugin-promise: 6.0.0_eslint@7.28.0
dev: true
+ /eslint-formatter-pretty/4.1.0:
+ resolution: {integrity: sha512-IsUTtGxF1hrH6lMWiSl1WbGaiP01eT6kzywdY1U+zLc0MP+nwEnUiS9UI8IaOTUhTeQJLlCEWIbXINBH4YJbBQ==}
+ engines: {node: '>=10'}
+ dependencies:
+ '@types/eslint': 7.29.0
+ ansi-escapes: 4.3.2
+ chalk: 4.1.2
+ eslint-rule-docs: 1.1.231
+ log-symbols: 4.1.0
+ plur: 4.0.0
+ string-width: 4.2.3
+ supports-hyperlinks: 2.2.0
+ dev: true
+
/eslint-import-resolver-node/0.3.6:
resolution: {integrity: sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==}
dependencies:
@@ -10738,6 +10936,10 @@ packages:
- supports-color
dev: true
+ /eslint-rule-docs/1.1.231:
+ resolution: {integrity: sha512-egHz9A1WG7b8CS0x1P6P/Rj5FqZOjray/VjpJa14tMZalfRKvpE2ONJ3plCM7+PcinmU4tcmbPLv0VtwzSdLVA==}
+ dev: true
+
/eslint-scope/4.0.3:
resolution: {integrity: sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==}
engines: {node: '>=4.0.0'}
@@ -11504,7 +11706,7 @@ packages:
worker-rpc: 0.1.1
dev: true
- /fork-ts-checker-webpack-plugin/6.5.0_eslint@7.28.0+webpack@4.46.0:
+ /fork-ts-checker-webpack-plugin/6.5.0_ce01ad3ba1d020f8a4eca15d0188e5bb:
resolution: {integrity: sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw==}
engines: {node: '>=10', yarn: '>=1.0.0'}
peerDependencies:
@@ -11532,6 +11734,7 @@ packages:
schema-utils: 2.7.0
semver: 7.3.5
tapable: 1.1.3
+ typescript: 4.6.2
webpack: 4.46.0
dev: true
@@ -12690,6 +12893,11 @@ packages:
engines: {node: '>= 0.10'}
dev: true
+ /irregular-plurals/3.3.0:
+ resolution: {integrity: sha512-MVBLKUTangM3EfRPFROhmWQQKRDsrgI83J8GS3jXy+OwYqiR2/aoWndYQ5416jLE3uaGgLH7ncme3X9y09gZ3g==}
+ engines: {node: '>=8'}
+ dev: true
+
/is-absolute-url/2.1.0:
resolution: {integrity: sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=}
engines: {node: '>=0.10.0'}
@@ -13164,6 +13372,11 @@ packages:
resolution: {integrity: sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=}
dev: true
+ /is-unicode-supported/0.1.0:
+ resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+ engines: {node: '>=10'}
+ dev: true
+
/is-utf8/0.2.1:
resolution: {integrity: sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=}
dev: true
@@ -14490,6 +14703,14 @@ packages:
chalk: 2.4.2
dev: true
+ /log-symbols/4.1.0:
+ resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+ engines: {node: '>=10'}
+ dependencies:
+ chalk: 4.1.2
+ is-unicode-supported: 0.1.0
+ dev: true
+
/log-update/2.3.0:
resolution: {integrity: sha1-iDKP19HOeTiykoN0bwsbwSayRwg=}
engines: {node: '>=4'}
@@ -14832,6 +15053,24 @@ packages:
yargs-parser: 20.2.9
dev: true
+ /meow/9.0.0:
+ resolution: {integrity: sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==}
+ engines: {node: '>=10'}
+ dependencies:
+ '@types/minimist': 1.2.2
+ camelcase-keys: 6.2.2
+ decamelize: 1.2.0
+ decamelize-keys: 1.1.0
+ hard-rejection: 2.1.0
+ minimist-options: 4.1.0
+ normalize-package-data: 3.0.3
+ read-pkg-up: 7.0.1
+ redent: 3.0.0
+ trim-newlines: 3.0.1
+ type-fest: 0.18.1
+ yargs-parser: 20.2.9
+ dev: true
+
/merge-descriptors/1.0.1:
resolution: {integrity: sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=}
dev: true
@@ -15992,11 +16231,18 @@ packages:
find-up: 5.0.0
dev: true
- /pnp-webpack-plugin/1.6.4:
+ /plur/4.0.0:
+ resolution: {integrity: sha512-4UGewrYgqDFw9vV6zNV+ADmPAUAfJPKtGvb/VdpQAx25X5f3xXdGdyOEVFwkl8Hl/tl7+xbeHqSEM+D5/TirUg==}
+ engines: {node: '>=10'}
+ dependencies:
+ irregular-plurals: 3.3.0
+ dev: true
+
+ /pnp-webpack-plugin/1.6.4_typescript@4.6.2:
resolution: {integrity: sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==}
engines: {node: '>=6'}
dependencies:
- ts-pnp: 1.2.0
+ ts-pnp: 1.2.0_typescript@4.6.2
transitivePeerDependencies:
- typescript
dev: true
@@ -19156,7 +19402,7 @@ packages:
engines: {node: '>=6.10'}
dev: true
- /ts-loader/8.3.0_webpack@4.46.0:
+ /ts-loader/8.3.0_typescript@4.6.2+webpack@4.46.0:
resolution: {integrity: sha512-MgGly4I6cStsJy27ViE32UoqxPTN9Xly4anxxVyaIWR+9BGxboV4EyJBGfR3RePV7Ksjj3rHmPZJeIt+7o4Vag==}
engines: {node: '>=10.0.0'}
peerDependencies:
@@ -19168,6 +19414,7 @@ packages:
loader-utils: 2.0.2
micromatch: 4.0.4
semver: 7.3.5
+ typescript: 4.6.2
webpack: 4.46.0
dev: true
@@ -19175,7 +19422,7 @@ packages:
resolution: {integrity: sha512-vDWbsl26LIcPGmDpoVzjEP6+hvHZkBkLW7JpvwbCv/5IYPJlsbzCVXY3wsCeAxAUeTclNOUZxnLdGh3VBD/J6w==}
dev: true
- /ts-node/10.5.0_85b573b50bd3c98a25ceb530199c078f:
+ /ts-node/10.5.0_b277d3279beba5662cbe91a0867ec5fc:
resolution: {integrity: sha512-6kEJKwVxAJ35W4akuiysfKwKmjkbYxwQMTBaAxo9KKAx/Yd26mPUyhGz3ji+EsJoAgrLqVsYHNuuYwQe22lbtw==}
hasBin: true
peerDependencies:
@@ -19202,13 +19449,13 @@ packages:
create-require: 1.1.1
diff: 4.0.2
make-error: 1.3.6
- typescript: 4.5.3
+ typescript: 4.6.2
v8-compile-cache-lib: 3.0.0
yn: 3.1.1
dev: true
optional: true
- /ts-node/9.1.1_typescript@4.5.3:
+ /ts-node/9.1.1_typescript@4.6.2:
resolution: {integrity: sha512-hPlt7ZACERQGf03M253ytLY3dHbGNGrAq9qIHWUY9XHYl1z7wYngSr3OQ5xmui8o2AaxsONxIzjafLUiWBo1Fg==}
engines: {node: '>=10.0.0'}
hasBin: true
@@ -19220,11 +19467,11 @@ packages:
diff: 4.0.2
make-error: 1.3.6
source-map-support: 0.5.21
- typescript: 4.5.3
+ typescript: 4.6.2
yn: 3.1.1
dev: true
- /ts-pnp/1.2.0:
+ /ts-pnp/1.2.0_typescript@4.6.2:
resolution: {integrity: sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==}
engines: {node: '>=6'}
peerDependencies:
@@ -19232,6 +19479,8 @@ packages:
peerDependenciesMeta:
typescript:
optional: true
+ dependencies:
+ typescript: 4.6.2
dev: true
/tsconfig-paths/3.12.0:
@@ -19252,6 +19501,19 @@ packages:
strip-json-comments: 2.0.1
dev: true
+ /tsd/0.19.1:
+ resolution: {integrity: sha512-pSwchclr+ADdxlahRUQXUrdAIOjXx1T1PQV+fLfVLuo/S4z+T00YU84fH8iPlZxyA2pWgJjo42BG1p9SDb4NOw==}
+ engines: {node: '>=12'}
+ hasBin: true
+ dependencies:
+ '@tsd/typescript': 4.5.5
+ eslint-formatter-pretty: 4.1.0
+ globby: 11.1.0
+ meow: 9.0.0
+ path-exists: 4.0.0
+ read-pkg-up: 7.0.1
+ dev: true
+
/tslib/1.14.1:
resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
dev: true
@@ -19269,6 +19531,16 @@ packages:
engines: {node: '>=0.6.x'}
dev: true
+ /tsutils/3.21.0_typescript@4.6.2:
+ resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
+ engines: {node: '>= 6'}
+ peerDependencies:
+ typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
+ dependencies:
+ tslib: 1.14.1
+ typescript: 4.6.2
+ dev: true
+
/tty-browserify/0.0.0:
resolution: {integrity: sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=}
dev: true
@@ -19358,8 +19630,8 @@ packages:
resolution: {integrity: sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=}
dev: true
- /typescript/4.5.3:
- resolution: {integrity: sha512-eVYaEHALSt+s9LbvgEv4Ef+Tdq7hBiIZgii12xXJnukryt3pMgJf6aKhoCZ3FWQsu6sydEnkg11fYXLzhLBjeQ==}
+ /typescript/4.6.2:
+ resolution: {integrity: sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==}
engines: {node: '>=4.2.0'}
hasBin: true
dev: true
diff --git a/sandboxes/bar/package.json b/sandboxes/bar/package.json
index ec0db9b6..137fc066 100644
--- a/sandboxes/bar/package.json
+++ b/sandboxes/bar/package.json
@@ -1,8 +1,9 @@
{
"name": "vue-chartjs-bar-example",
"dependencies": {
- "vue": "^2.6.11",
+ "vue": "^3.2.31",
"chart.js": "3.7.0",
- "vue-chartjs": "3.5.1"
+ "vue-chartjs": "3.5.1",
+ "typescript": "^4.6.2"
}
}
diff --git a/sandboxes/bar/src/App.vue b/sandboxes/bar/src/App.vue
index 23596951..c5e1c6a4 100644
--- a/sandboxes/bar/src/App.vue
+++ b/sandboxes/bar/src/App.vue
@@ -3,7 +3,7 @@
diff --git a/sandboxes/bubble/package.json b/sandboxes/bubble/package.json
index 191e2648..9d619a33 100644
--- a/sandboxes/bubble/package.json
+++ b/sandboxes/bubble/package.json
@@ -1,8 +1,9 @@
{
"name": "vue-chartjs-bubble-example",
"dependencies": {
- "vue": "^2.6.11",
+ "vue": "^3.2.31",
"chart.js": "3.7.0",
- "vue-chartjs": "3.5.1"
+ "vue-chartjs": "3.5.1",
+ "typescript": "^4.6.2"
}
}
diff --git a/sandboxes/bubble/src/App.vue b/sandboxes/bubble/src/App.vue
index ad3954bd..613af078 100644
--- a/sandboxes/bubble/src/App.vue
+++ b/sandboxes/bubble/src/App.vue
@@ -3,7 +3,7 @@
diff --git a/sandboxes/custom/package.json b/sandboxes/custom/package.json
index ffc20c78..5dbdaa14 100644
--- a/sandboxes/custom/package.json
+++ b/sandboxes/custom/package.json
@@ -1,8 +1,9 @@
{
"name": "vue-chartjs-custom-example",
"dependencies": {
- "vue": "^2.6.11",
+ "vue": "^3.2.31",
"chart.js": "3.7.0",
- "vue-chartjs": "3.5.1"
+ "vue-chartjs": "3.5.1",
+ "typescript": "^4.6.2"
}
}
diff --git a/sandboxes/custom/src/App.vue b/sandboxes/custom/src/App.vue
index b78d4394..89ecd81d 100644
--- a/sandboxes/custom/src/App.vue
+++ b/sandboxes/custom/src/App.vue
@@ -3,7 +3,7 @@
diff --git a/sandboxes/doughnut/package.json b/sandboxes/doughnut/package.json
index 61272420..1645265d 100644
--- a/sandboxes/doughnut/package.json
+++ b/sandboxes/doughnut/package.json
@@ -1,8 +1,9 @@
{
"name": "vue-chartjs-doughnut-example",
"dependencies": {
- "vue": "^2.6.11",
+ "vue": "^3.2.31",
"chart.js": "3.7.0",
- "vue-chartjs": "3.5.1"
+ "vue-chartjs": "3.5.1",
+ "typescript": "^4.6.2"
}
}
diff --git a/sandboxes/doughnut/src/App.vue b/sandboxes/doughnut/src/App.vue
index e28234f7..a22818c9 100644
--- a/sandboxes/doughnut/src/App.vue
+++ b/sandboxes/doughnut/src/App.vue
@@ -3,7 +3,7 @@
diff --git a/sandboxes/line/package.json b/sandboxes/line/package.json
index bfee27c6..590b5430 100644
--- a/sandboxes/line/package.json
+++ b/sandboxes/line/package.json
@@ -1,8 +1,9 @@
{
"name": "vue-chartjs-line-example",
"dependencies": {
- "vue": "^2.6.11",
+ "vue": "^3.2.31",
"chart.js": "3.7.0",
- "vue-chartjs": "3.5.1"
+ "vue-chartjs": "3.5.1",
+ "typescript": "^4.6.2"
}
}
diff --git a/sandboxes/line/src/App.vue b/sandboxes/line/src/App.vue
index c13478e1..48ab90a5 100644
--- a/sandboxes/line/src/App.vue
+++ b/sandboxes/line/src/App.vue
@@ -3,7 +3,7 @@
diff --git a/sandboxes/pie/package.json b/sandboxes/pie/package.json
index 0d5c65ad..64704e23 100644
--- a/sandboxes/pie/package.json
+++ b/sandboxes/pie/package.json
@@ -1,8 +1,9 @@
{
"name": "vue-chartjs-pie-example",
"dependencies": {
- "vue": "^2.6.11",
+ "vue": "^3.2.31",
"chart.js": "3.7.0",
- "vue-chartjs": "3.5.1"
+ "vue-chartjs": "3.5.1",
+ "typescript": "^4.6.2"
}
}
diff --git a/sandboxes/pie/src/App.vue b/sandboxes/pie/src/App.vue
index 569b7537..4f1f41d7 100644
--- a/sandboxes/pie/src/App.vue
+++ b/sandboxes/pie/src/App.vue
@@ -3,7 +3,7 @@
diff --git a/sandboxes/polar-area/package.json b/sandboxes/polar-area/package.json
index 9480a163..27e9be61 100644
--- a/sandboxes/polar-area/package.json
+++ b/sandboxes/polar-area/package.json
@@ -1,8 +1,9 @@
{
"name": "vue-chartjs-polar-area-example",
"dependencies": {
- "vue": "^2.6.11",
+ "vue": "^3.2.31",
"chart.js": "3.7.0",
- "vue-chartjs": "3.5.1"
+ "vue-chartjs": "3.5.1",
+ "typescript": "^4.6.2"
}
}
diff --git a/sandboxes/polar-area/src/App.vue b/sandboxes/polar-area/src/App.vue
index 741f462f..20e417f9 100644
--- a/sandboxes/polar-area/src/App.vue
+++ b/sandboxes/polar-area/src/App.vue
@@ -3,7 +3,7 @@
diff --git a/sandboxes/radar/package.json b/sandboxes/radar/package.json
index 5ca7bbc4..2a860dd6 100644
--- a/sandboxes/radar/package.json
+++ b/sandboxes/radar/package.json
@@ -1,8 +1,9 @@
{
"name": "vue-chartjs-radar-example",
"dependencies": {
- "vue": "^2.6.11",
+ "vue": "^3.2.31",
"chart.js": "3.7.0",
- "vue-chartjs": "3.5.1"
+ "vue-chartjs": "3.5.1",
+ "typescript": "^4.6.2"
}
}
diff --git a/sandboxes/radar/src/App.vue b/sandboxes/radar/src/App.vue
index 0aba77dc..a5a2f7e9 100644
--- a/sandboxes/radar/src/App.vue
+++ b/sandboxes/radar/src/App.vue
@@ -3,7 +3,7 @@
diff --git a/sandboxes/reactive-prop/package.json b/sandboxes/reactive-prop/package.json
index b2d69118..8d03b9ad 100644
--- a/sandboxes/reactive-prop/package.json
+++ b/sandboxes/reactive-prop/package.json
@@ -1,8 +1,9 @@
{
"name": "vue-chartjs-reactive-prop-example",
"dependencies": {
- "vue": "^2.6.11",
+ "vue": "^3.2.31",
"chart.js": "3.7.0",
- "vue-chartjs": "3.5.1"
+ "vue-chartjs": "3.5.1",
+ "typescript": "^4.6.2"
}
}
diff --git a/sandboxes/reactive-prop/src/App.vue b/sandboxes/reactive-prop/src/App.vue
index 67735da4..14ebe0ab 100644
--- a/sandboxes/reactive-prop/src/App.vue
+++ b/sandboxes/reactive-prop/src/App.vue
@@ -3,7 +3,7 @@
diff --git a/sandboxes/reactive-prop/src/components/reactivePropPage.vue b/sandboxes/reactive-prop/src/components/reactivePropPage.ts
similarity index 91%
rename from sandboxes/reactive-prop/src/components/reactivePropPage.vue
rename to sandboxes/reactive-prop/src/components/reactivePropPage.ts
index a8fb836c..715ab7d6 100644
--- a/sandboxes/reactive-prop/src/components/reactivePropPage.vue
+++ b/sandboxes/reactive-prop/src/components/reactivePropPage.ts
@@ -1,5 +1,4 @@
-
diff --git a/sandboxes/reactive/package.json b/sandboxes/reactive/package.json
index 52d18672..938d8426 100644
--- a/sandboxes/reactive/package.json
+++ b/sandboxes/reactive/package.json
@@ -1,8 +1,9 @@
{
"name": "vue-chartjs-reactive-example",
"dependencies": {
- "vue": "^2.6.11",
+ "vue": "^3.2.31",
"chart.js": "3.7.0",
- "vue-chartjs": "3.5.1"
+ "vue-chartjs": "3.5.1",
+ "typescript": "^4.6.2"
}
}
diff --git a/sandboxes/reactive/src/App.vue b/sandboxes/reactive/src/App.vue
index 35500115..314c4961 100644
--- a/sandboxes/reactive/src/App.vue
+++ b/sandboxes/reactive/src/App.vue
@@ -3,7 +3,7 @@
diff --git a/sandboxes/scatter/package.json b/sandboxes/scatter/package.json
index 6e362ffd..409c78b8 100644
--- a/sandboxes/scatter/package.json
+++ b/sandboxes/scatter/package.json
@@ -1,8 +1,9 @@
{
"name": "vue-chartjs-scatter-example",
"dependencies": {
- "vue": "^2.6.11",
+ "vue": "^3.2.31",
"chart.js": "3.7.0",
- "vue-chartjs": "3.5.1"
+ "vue-chartjs": "3.5.1",
+ "typescript": "^4.6.2"
}
}
diff --git a/sandboxes/scatter/src/App.vue b/sandboxes/scatter/src/App.vue
index 6f41d1fb..db06b9f2 100644
--- a/sandboxes/scatter/src/App.vue
+++ b/sandboxes/scatter/src/App.vue
@@ -3,7 +3,7 @@
diff --git a/sandboxes/tsconfig.json b/sandboxes/tsconfig.json
new file mode 100644
index 00000000..dabfe46e
--- /dev/null
+++ b/sandboxes/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "vue-chartjs": ["../src"]
+ }
+ },
+ "include": ["."]
+}
diff --git a/src/BaseCharts.js b/src/BaseCharts.ts
similarity index 51%
rename from src/BaseCharts.js
rename to src/BaseCharts.ts
index fc7f82ce..69d71cfd 100644
--- a/src/BaseCharts.js
+++ b/src/BaseCharts.ts
@@ -10,16 +10,25 @@ import {
ScatterController
} from 'chart.js'
+import type {
+ ChartType,
+ ChartComponentLike,
+ DefaultDataPoint,
+ PluginOptionsByType,
+ ChartOptions
+} from 'chart.js'
+
import {
defineComponent,
ref,
+ shallowRef,
h,
onMounted,
onBeforeUnmount,
watch,
- computed,
isProxy,
- toRaw
+ toRaw,
+ PropType
} from 'vue'
import {
@@ -29,27 +38,40 @@ import {
getChartOptions,
getChartData,
setChartLabels,
- setChartXLabels,
- setChartYLabels,
setChartDatasets,
compareData
-} from './utils.js'
-
-export const generateChart = (chartId, chartType, chartController) =>
+} from './utils'
+
+import type {
+ TChartData,
+ TChartOptions,
+ TypedChartJS,
+ TypedChartComponent
+} from './types'
+
+export const generateChart = <
+ TType extends ChartType = ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+>(
+ chartId: string,
+ chartType: TType,
+ chartController: ChartComponentLike
+): TypedChartComponent =>
defineComponent({
props: {
chartData: {
- type: Object,
+ type: Object as PropType>,
required: true
},
+ chartOptions: {
+ type: Object as PropType>,
+ default: () => {}
+ },
datasetIdKey: {
type: String,
default: 'label'
},
- chartOptions: {
- type: Object,
- default: () => {}
- },
chartId: {
type: String,
default: chartId
@@ -67,87 +89,106 @@ export const generateChart = (chartId, chartType, chartController) =>
default: ''
},
styles: {
- type: Object,
+ type: Object as PropType>,
default: () => {}
},
plugins: {
- type: Object,
+ type: Object as PropType>,
default: () => {}
}
},
setup(props, context) {
ChartJS.register(chartController)
- const _chart = ref(null)
- const canvasEl = ref(null)
+ const _chart = shallowRef | null>(null)
+ const canvasEl = ref(null)
- const hasChart = computed(() => _chart.value !== null)
-
- function renderChart(data, options) {
- if (hasChart.value) {
- chartDestroy(toRaw(_chart.value), context)
+ function renderChart(
+ data: TChartData,
+ options: TChartOptions
+ ): void {
+ if (_chart.value !== null) {
+ chartDestroy(toRaw(_chart.value), context)
}
if (canvasEl.value === null) {
throw new Error(
'Please remove the tags from your chart component. See https://vue-chartjs.org/guide/#vue-single-file-components'
)
+ } else {
+ const chartData = getChartData(
+ data,
+ props.datasetIdKey
+ )
+ const canvasEl2DContext = canvasEl.value.getContext('2d')
+
+ if (canvasEl2DContext !== null) {
+ _chart.value = new ChartJS(
+ canvasEl2DContext,
+ {
+ type: chartType,
+ data: isProxy(data) ? new Proxy(chartData, {}) : chartData,
+ options: getChartOptions(options, props.plugins)
+ }
+ )
+ }
}
-
- const chartData = getChartData(data)
-
- _chart.value = new ChartJS(canvasEl.value.getContext('2d'), {
- type: chartType,
- data: isProxy(data) ? new Proxy(chartData, {}) : chartData,
- options: getChartOptions(options, props.plugins)
- })
}
- function chartDataHandler(newValue, oldValue) {
+ function chartDataHandler(
+ newValue: TChartData,
+ oldValue: TChartData
+ ): void {
const newData = isProxy(newValue) ? toRaw(newValue) : { ...newValue }
const oldData = isProxy(oldValue) ? toRaw(oldValue) : { ...oldValue }
if (Object.keys(oldData).length > 0) {
const chart = toRaw(_chart.value)
- const isEqualLabelsAndDatasetsLength = compareData(newData, oldData)
-
- if (isEqualLabelsAndDatasetsLength) {
- setChartDatasets(chart.data, newData, props.datasetIdKey)
-
- if (Object.prototype.hasOwnProperty.call(newData, 'labels')) {
- setChartLabels(chart, newData.labels, context)
- }
-
- if (Object.prototype.hasOwnProperty.call(newData, 'xLabels')) {
- setChartXLabels(chart, newData.xLabels, context)
- }
+ const isEqualLabelsAndDatasetsLength = compareData<
+ TType,
+ TData,
+ TLabel
+ >(newData, oldData)
+
+ if (isEqualLabelsAndDatasetsLength && chart !== null) {
+ setChartDatasets(
+ chart?.data,
+ newData,
+ props.datasetIdKey
+ )
- if (Object.prototype.hasOwnProperty.call(newData, 'yLabels')) {
- setChartYLabels(chart, newData.yLabels, context)
+ if (newData.labels !== undefined) {
+ setChartLabels(
+ chart,
+ newData.labels,
+ context
+ )
}
- chartUpdate(chart, context)
+ chartUpdate(chart, context)
} else {
- if (hasChart.value) {
- chartDestroy(chart, context)
+ if (chart !== null) {
+ chartDestroy(chart, context)
}
- chartCreate(
+ chartCreate(
renderChart,
- [props.chartData, props.chartOptions],
- context
+ context,
+ props.chartData,
+ props.chartOptions as ChartOptions
)
}
} else {
- if (hasChart.value) {
- chartDestroy(toRaw(_chart.value), context)
+ if (_chart.value !== null) {
+ chartDestroy(toRaw(_chart.value), context)
}
- chartCreate(
+ chartCreate(
renderChart,
- [props.chartData, props.chartOptions],
- context
+ context,
+ props.chartData,
+ props.chartOptions as ChartOptions
)
}
}
@@ -163,16 +204,17 @@ export const generateChart = (chartId, chartType, chartController) =>
'datasets' in props.chartData &&
props.chartData.datasets.length > 0
) {
- chartCreate(
+ chartCreate(
renderChart,
- [props.chartData, props.chartOptions],
- context
+ context,
+ props.chartData,
+ props.chartOptions as ChartOptions
)
}
})
onBeforeUnmount(() => {
- if (hasChart.value) {
+ if (_chart.value !== null) {
chartDestroy(toRaw(_chart.value), context)
}
})
@@ -187,7 +229,7 @@ export const generateChart = (chartId, chartType, chartController) =>
})
])
}
- })
+ }) as any
export const Bar = /* #__PURE__ */ generateChart(
'bar-chart',
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index e610f593..00000000
--- a/src/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
- Bar,
- Doughnut,
- Line,
- Pie,
- PolarArea,
- Radar,
- Bubble,
- Scatter,
- generateChart
-} from './BaseCharts'
-
-export {
- Bar,
- Doughnut,
- Line,
- Pie,
- PolarArea,
- Radar,
- Bubble,
- Scatter,
- generateChart
-}
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 00000000..9a492f62
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1 @@
+export * from './BaseCharts'
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 00000000..f6aba083
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,91 @@
+import { Chart as ChartJS } from 'chart.js'
+import type {
+ ChartType,
+ ChartData,
+ ChartOptions,
+ PluginChartOptions,
+ DefaultDataPoint,
+ PluginOptionsByType
+} from 'chart.js'
+
+import {
+ ComponentOptionsMixin,
+ ComputedOptions,
+ DefineComponent,
+ MethodOptions,
+ Ref,
+ ShallowRef
+} from 'vue'
+
+import { ChartEmits } from './utils'
+
+export type TChartData<
+ TType extends ChartType = ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+> = ChartData
+
+export type TChartOptions = ChartOptions
+
+export type TChartPlugins = PluginChartOptions
+
+export type TypedChartJS<
+ TType extends ChartType = ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+> = ChartJS
+
+export interface IChartProps<
+ TType extends ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+> {
+ chartData: TChartData
+ datasetIdKey?: string
+ chartOptions?: TChartOptions
+ chartId?: string
+ width?: number
+ height?: number
+ cssClasses?: string
+ styles?: Partial
+ plugins?: PluginOptionsByType
+}
+
+export interface IChartComponentData<
+ TType extends ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+> {
+ _chart: ShallowRef | null>
+ canvasEl: Ref
+ renderChart: (
+ data: TChartData,
+ options: TChartOptions
+ ) => void
+ chartDataHandler: (
+ newValue: TChartData,
+ oldValue: TChartData
+ ) => void
+}
+
+export type TypedChartEmits = {
+ [ChartEmits.ChartRendered]: () => true
+ [ChartEmits.ChartUpdated]: () => true
+ [ChartEmits.ChartDestroyed]: () => true
+ [ChartEmits.LabelsUpdated]: () => true
+}
+
+export type TypedChartComponent<
+ TType extends ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+> = DefineComponent<
+ IChartProps,
+ IChartComponentData,
+ unknown,
+ ComputedOptions,
+ MethodOptions,
+ ComponentOptionsMixin,
+ ComponentOptionsMixin,
+ TypedChartEmits
+>
diff --git a/src/utils.js b/src/utils.js
deleted file mode 100644
index f10a2b32..00000000
--- a/src/utils.js
+++ /dev/null
@@ -1,96 +0,0 @@
-export function chartCreate(
- createChartFunction,
- createChartFunctionArgs,
- context
-) {
- createChartFunction(...createChartFunctionArgs)
- context.emit('chart:rendered')
-}
-
-export function chartUpdate(chart, context) {
- chart.update()
- context.emit('chart:updated')
-}
-
-export function chartDestroy(chart, context) {
- chart.destroy()
- context.emit('chart:destroyed')
-}
-
-export function getChartData(data, datasetIdKey) {
- const nextData = {
- labels: typeof data.labels === 'undefined' ? [] : [...data.labels],
- datasets: []
- }
-
- setChartDatasets(nextData, { ...data }, datasetIdKey)
- return nextData
-}
-
-export function getChartOptions(options, plugins) {
- const chartOptions = options
-
- if (typeof plugins !== 'undefined' && Object.keys(plugins).length > 0) {
- chartOptions.plugins = { ...chartOptions.plugins, ...plugins }
- }
-
- return chartOptions
-}
-
-export function setChartDatasets(oldData, newData, datasetIdKey) {
- const addedDatasets = []
-
- oldData.datasets = newData.datasets.map(nextDataset => {
- // given the new set, find it's current match
- const currentDataset = oldData.datasets.find(
- dataset => dataset[datasetIdKey] === nextDataset[datasetIdKey]
- )
-
- // There is no original to update, so simply add new one
- if (
- !currentDataset ||
- !nextDataset.data ||
- addedDatasets.includes(currentDataset)
- ) {
- return { ...nextDataset }
- }
-
- addedDatasets.push(currentDataset)
-
- Object.assign(currentDataset, nextDataset)
-
- return currentDataset
- })
-}
-
-export function setChartLabels(chart, labels, context) {
- chart.data.labels = labels
- context.emit('labels:updated')
-}
-
-export function setChartXLabels(chart, xLabels, context) {
- chart.data.xLabels = xLabels
- context.emit('xlabels:updated')
-}
-
-export function setChartYLabels(chart, yLabels, context) {
- chart.data.yLabels = yLabels
- context.emit('ylabels:updated')
-}
-
-export function compareData(newData, oldData) {
- // Get new and old DataSet Labels
- const newDatasetLabels = newData.datasets.map(dataset => {
- return dataset.label
- })
-
- const oldDatasetLabels = oldData.datasets.map(dataset => {
- return dataset.label
- })
-
- // Check if Labels are equal and if dataset length is equal
- return (
- oldData.datasets.length === newData.datasets.length &&
- newDatasetLabels.every((value, index) => value === oldDatasetLabels[index])
- )
-}
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 00000000..886f68b9
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,164 @@
+import type {
+ ChartType,
+ ChartDataset,
+ DefaultDataPoint,
+ PluginOptionsByType
+} from 'chart.js'
+
+import type { TChartData, TChartOptions, TypedChartJS } from './types'
+
+import { SetupContext } from 'vue'
+
+export enum ChartEmits {
+ ChartRendered = 'chart:rendered',
+ ChartUpdated = 'chart:updated',
+ ChartDestroyed = 'chart:destroyed',
+ LabelsUpdated = 'labels:updated'
+}
+
+export function chartCreate<
+ TType extends ChartType = ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+>(
+ createChartFunction: (
+ data: TChartData,
+ options: TChartOptions
+ ) => void,
+ context: SetupContext,
+ chartData: TChartData,
+ chartOptions: TChartOptions
+): void {
+ createChartFunction(chartData, chartOptions)
+ context.emit(ChartEmits.ChartRendered)
+}
+
+export function chartUpdate<
+ TType extends ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+>(chart: TypedChartJS, context: SetupContext): void {
+ chart.update()
+ context.emit(ChartEmits.ChartUpdated)
+}
+
+export function chartDestroy<
+ TType extends ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+>(chart: TypedChartJS, context: SetupContext): void {
+ chart.destroy()
+ context.emit(ChartEmits.ChartDestroyed)
+}
+
+export function getChartData<
+ TType extends ChartType = ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+>(
+ data: TChartData,
+ datasetIdKey: string
+): TChartData {
+ const nextData = {
+ labels: typeof data.labels === 'undefined' ? [] : [...data.labels],
+ datasets: []
+ }
+
+ setChartDatasets(nextData, { ...data }, datasetIdKey)
+ return nextData
+}
+
+export function getChartOptions(
+ options?: TChartOptions,
+ plugins?: PluginOptionsByType
+): TChartOptions | undefined {
+ const chartOptions = options
+
+ if (
+ chartOptions !== undefined &&
+ 'plugins' in chartOptions &&
+ typeof plugins !== 'undefined' &&
+ Object.keys(plugins).length > 0
+ ) {
+ chartOptions.plugins = {
+ ...chartOptions.plugins,
+ ...plugins
+ }
+ }
+
+ return chartOptions
+}
+
+export function setChartDatasets<
+ TType extends ChartType = ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+>(
+ oldData: TChartData,
+ newData: TChartData,
+ datasetIdKey: string
+): void {
+ const addedDatasets: ChartDataset[] = []
+
+ oldData.datasets = newData.datasets.map(
+ (nextDataset: Record) => {
+ // given the new set, find it's current match
+ const currentDataset = oldData.datasets.find(
+ (dataset: Record) =>
+ dataset[datasetIdKey] === nextDataset[datasetIdKey]
+ )
+
+ // There is no original to update, so simply add new one
+ if (
+ !currentDataset ||
+ !nextDataset.data ||
+ addedDatasets.includes(currentDataset)
+ ) {
+ return { ...nextDataset }
+ }
+
+ addedDatasets.push(currentDataset)
+
+ Object.assign(currentDataset, nextDataset)
+
+ return currentDataset
+ }
+ ) as ChartDataset[]
+}
+
+export function setChartLabels<
+ TType extends ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+>(
+ chart: TypedChartJS,
+ labels: TLabel[] | undefined,
+ context: SetupContext
+): void {
+ chart.data.labels = labels
+ context.emit(ChartEmits.LabelsUpdated)
+}
+
+export function compareData<
+ TType extends ChartType = ChartType,
+ TData = DefaultDataPoint,
+ TLabel = unknown
+>(
+ newData: TChartData,
+ oldData: TChartData
+): boolean {
+ // Get new and old DataSet Labels
+ const newDatasetLabels = newData.datasets.map(dataset => {
+ return dataset.label
+ })
+
+ const oldDatasetLabels = oldData.datasets.map(dataset => {
+ return dataset.label
+ })
+
+ // Check if Labels are equal and if dataset length is equal
+ return (
+ oldData.datasets.length === newData.datasets.length &&
+ newDatasetLabels.every((value, index) => value === oldDatasetLabels[index])
+ )
+}
diff --git a/stories/bar.stories.js b/stories/bar.stories.ts
similarity index 84%
rename from stories/bar.stories.js
rename to stories/bar.stories.ts
index 070b171a..cddca549 100644
--- a/stories/bar.stories.js
+++ b/stories/bar.stories.ts
@@ -1,4 +1,4 @@
-import BarChart from '../sandboxes/bar/src/components/barChart.vue'
+import BarChart from '../sandboxes/bar/src/components/barChart'
export default {
title: 'BarChart',
diff --git a/stories/bubble.stories.js b/stories/bubble.stories.ts
similarity index 97%
rename from stories/bubble.stories.js
rename to stories/bubble.stories.ts
index ad49d4cc..8a02a0c6 100644
--- a/stories/bubble.stories.js
+++ b/stories/bubble.stories.ts
@@ -1,4 +1,4 @@
-import BubbleChart from '../sandboxes/bubble/src/components/bubbleChart.vue'
+import BubbleChart from '../sandboxes/bubble/src/components/bubbleChart'
export default {
title: 'BubbleChart',
diff --git a/stories/custom.stories.js b/stories/custom.stories.ts
similarity index 97%
rename from stories/custom.stories.js
rename to stories/custom.stories.ts
index 98466bef..4ab4bfbe 100644
--- a/stories/custom.stories.js
+++ b/stories/custom.stories.ts
@@ -1,4 +1,4 @@
-import CustomChart from '../sandboxes/custom/src/components/customChart.vue'
+import CustomChart from '../sandboxes/custom/src/components/customChart'
export default {
title: 'CustomChart',
diff --git a/stories/doughnut.stories.js b/stories/doughnut.stories.ts
similarity index 96%
rename from stories/doughnut.stories.js
rename to stories/doughnut.stories.ts
index 8b4c02a0..74a2ff1e 100644
--- a/stories/doughnut.stories.js
+++ b/stories/doughnut.stories.ts
@@ -1,4 +1,4 @@
-import DoughnutChart from '../sandboxes/doughnut/src/components/doughnutChart.vue'
+import DoughnutChart from '../sandboxes/doughnut/src/components/doughnutChart'
export default {
title: 'DoughnutChart',
diff --git a/stories/line.stories.js b/stories/line.stories.ts
similarity index 98%
rename from stories/line.stories.js
rename to stories/line.stories.ts
index 6bb27638..318acd59 100644
--- a/stories/line.stories.js
+++ b/stories/line.stories.ts
@@ -1,4 +1,4 @@
-import LineChart from '../sandboxes/line/src/components/lineChart.vue'
+import LineChart from '../sandboxes/line/src/components/lineChart'
export default {
title: 'LineChart',
diff --git a/stories/pie.stories.js b/stories/pie.stories.ts
similarity index 84%
rename from stories/pie.stories.js
rename to stories/pie.stories.ts
index 1805cfc7..cc53c067 100644
--- a/stories/pie.stories.js
+++ b/stories/pie.stories.ts
@@ -1,4 +1,4 @@
-import PieChart from '../sandboxes/pie/src/components/pieChart.vue'
+import PieChart from '../sandboxes/pie/src/components/pieChart'
export default {
title: 'PieChart',
diff --git a/stories/polarArea.stories.js b/stories/polarArea.stories.ts
similarity index 95%
rename from stories/polarArea.stories.js
rename to stories/polarArea.stories.ts
index fe107a5a..1248d5ec 100644
--- a/stories/polarArea.stories.js
+++ b/stories/polarArea.stories.ts
@@ -1,4 +1,4 @@
-import PolarAreaChart from '../sandboxes/polar-area/src/components/polarAreaChart.vue'
+import PolarAreaChart from '../sandboxes/polar-area/src/components/polarAreaChart'
export default {
title: 'PolarAreaChart',
diff --git a/stories/radar.stories.js b/stories/radar.stories.ts
similarity index 97%
rename from stories/radar.stories.js
rename to stories/radar.stories.ts
index 2fa0f599..3c48b96e 100644
--- a/stories/radar.stories.js
+++ b/stories/radar.stories.ts
@@ -1,4 +1,4 @@
-import RadarChart from '../sandboxes/radar/src/components/radarChart.vue'
+import RadarChart from '../sandboxes/radar/src/components/radarChart'
export default {
title: 'RadarChart',
diff --git a/stories/reactive.stories.js b/stories/reactive.stories.ts
similarity index 96%
rename from stories/reactive.stories.js
rename to stories/reactive.stories.ts
index ce503a9d..6f999836 100644
--- a/stories/reactive.stories.js
+++ b/stories/reactive.stories.ts
@@ -1,4 +1,4 @@
-import ReactiveChart from '../sandboxes/reactive/src/components/reactiveChart.vue'
+import ReactiveChart from '../sandboxes/reactive/src/components/reactiveChart'
export default {
title: 'ReactiveChart',
diff --git a/stories/reactiveProp.stories.js b/stories/reactiveProp.stories.ts
similarity index 98%
rename from stories/reactiveProp.stories.js
rename to stories/reactiveProp.stories.ts
index b11f8da5..e791b111 100644
--- a/stories/reactiveProp.stories.js
+++ b/stories/reactiveProp.stories.ts
@@ -1,4 +1,4 @@
-import ReactivePropChart from '../sandboxes/reactive-prop/src/components/reactivePropChart.vue'
+import ReactivePropChart from '../sandboxes/reactive-prop/src/components/reactivePropChart'
export default {
title: 'ReactivePropChart',
diff --git a/stories/scatter.stories.js b/stories/scatter.stories.ts
similarity index 96%
rename from stories/scatter.stories.js
rename to stories/scatter.stories.ts
index eb8b3565..b1b5e42c 100644
--- a/stories/scatter.stories.js
+++ b/stories/scatter.stories.ts
@@ -1,4 +1,4 @@
-import ScatterChart from '../sandboxes/scatter/src/components/scatterChart.vue'
+import ScatterChart from '../sandboxes/scatter/src/components/scatterChart'
export default {
title: 'ScatterChart',
diff --git a/test/Bar.spec.js b/test/Bar.spec.ts
similarity index 96%
rename from test/Bar.spec.js
rename to test/Bar.spec.ts
index b6862943..1977678d 100644
--- a/test/Bar.spec.js
+++ b/test/Bar.spec.ts
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
-import BarChart from './examples/BarChart.vue'
+import BarChart from './examples/BarChart'
describe('BarChart', () => {
const Component = {
diff --git a/test/Bubble.spec.js b/test/Bubble.spec.ts
similarity index 95%
rename from test/Bubble.spec.js
rename to test/Bubble.spec.ts
index dae4d763..02c1dc1a 100644
--- a/test/Bubble.spec.js
+++ b/test/Bubble.spec.ts
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
-import BubbleChart from './examples/BubbleChart.vue'
+import BubbleChart from './examples/BubbleChart'
describe('BubbleChart', () => {
const Component = {
diff --git a/test/ChartsTypes.test-d.ts b/test/ChartsTypes.test-d.ts
new file mode 100644
index 00000000..9d43861a
--- /dev/null
+++ b/test/ChartsTypes.test-d.ts
@@ -0,0 +1,55 @@
+import { h } from 'vue'
+import { expectError } from 'tsd'
+import { PluginOptionsByType } from 'chart.js'
+
+import { Bar, Radar, Scatter, Doughnut } from '../src'
+
+const chartData = {
+ datasets: []
+}
+
+/**
+ * Should check type-specific props
+ */
+
+h(Radar, {
+ chartData,
+ plugins: {} as PluginOptionsByType<'radar'>
+})
+
+h(Scatter, {
+ chartData,
+ plugins: {} as PluginOptionsByType<'scatter'>
+})
+
+h(Bar, {
+ chartData,
+ chartOptions: {}
+})
+
+expectError(
+ h(Scatter, {
+ chartData,
+ plugins: {} as PluginOptionsByType<'bubble'>
+ })
+)
+
+/**
+ * Should check type-specific options
+ */
+
+h(Doughnut, {
+ chartData,
+ chartOptions: {
+ cutout: '75%'
+ }
+})
+
+expectError(
+ h(Scatter, {
+ chartData,
+ chartOptions: {
+ cutout: '75%'
+ }
+ })
+)
diff --git a/test/CustomChart.spec.js b/test/CustomChart.spec.ts
similarity index 86%
rename from test/CustomChart.spec.js
rename to test/CustomChart.spec.ts
index 2e21e93c..804db765 100644
--- a/test/CustomChart.spec.js
+++ b/test/CustomChart.spec.ts
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
-import CustomChart from './examples/CustomChart.vue'
+import CustomChart from './examples/CustomChart'
describe('CustomChart', () => {
const Component = {
diff --git a/test/Doughnut.spec.js b/test/Doughnut.spec.ts
similarity index 95%
rename from test/Doughnut.spec.js
rename to test/Doughnut.spec.ts
index 71ea52e7..14471a2b 100644
--- a/test/Doughnut.spec.js
+++ b/test/Doughnut.spec.ts
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
-import DoughnutChart from './examples/DoughnutChart.vue'
+import DoughnutChart from './examples/DoughnutChart'
describe('DoughnutChart', () => {
const Component = {
diff --git a/test/Line.spec.js b/test/Line.spec.ts
similarity index 95%
rename from test/Line.spec.js
rename to test/Line.spec.ts
index e65e99ea..a480224e 100644
--- a/test/Line.spec.js
+++ b/test/Line.spec.ts
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
-import LineChart from './examples/LineChart.vue'
+import LineChart from './examples/LineChart'
describe('LineChart', () => {
const Component = {
diff --git a/test/Pie.spec.js b/test/Pie.spec.ts
similarity index 96%
rename from test/Pie.spec.js
rename to test/Pie.spec.ts
index 81d8f893..01124916 100644
--- a/test/Pie.spec.js
+++ b/test/Pie.spec.ts
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
-import PieChart from './examples/PieChart.vue'
+import PieChart from './examples/PieChart'
describe('PieChart', () => {
const Component = {
diff --git a/test/PolarArea.spec.js b/test/PolarArea.spec.ts
similarity index 95%
rename from test/PolarArea.spec.js
rename to test/PolarArea.spec.ts
index 643ea765..82e04734 100644
--- a/test/PolarArea.spec.js
+++ b/test/PolarArea.spec.ts
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
-import PolarAreaChart from './examples/PolarAreaChart.vue'
+import PolarAreaChart from './examples/PolarAreaChart'
describe('PolarChart', () => {
const Component = {
diff --git a/test/Radar.spec.js b/test/Radar.spec.ts
similarity index 95%
rename from test/Radar.spec.js
rename to test/Radar.spec.ts
index 0ada95fb..d0f9567e 100644
--- a/test/Radar.spec.js
+++ b/test/Radar.spec.ts
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
-import RadarChart from './examples/RadarChart.vue'
+import RadarChart from './examples/RadarChart'
describe('RadarChart', () => {
const Component = {
diff --git a/test/Reactive.spec.js b/test/Reactive.spec.ts
similarity index 86%
rename from test/Reactive.spec.js
rename to test/Reactive.spec.ts
index 111928c1..9a69f4f6 100644
--- a/test/Reactive.spec.js
+++ b/test/Reactive.spec.ts
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
-import ReactiveChart from './examples/ReactiveChart.vue'
+import ReactiveChart from './examples/ReactiveChart'
describe('ReactiveChart', () => {
const Component = {
diff --git a/test/ReactiveProp.spec.js b/test/ReactiveProp.spec.ts
similarity index 87%
rename from test/ReactiveProp.spec.js
rename to test/ReactiveProp.spec.ts
index 0b2e6b6e..3d71449e 100644
--- a/test/ReactiveProp.spec.js
+++ b/test/ReactiveProp.spec.ts
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
-import ReactivePropChart from './examples/ReactivePropChart.vue'
+import ReactivePropChart from './examples/ReactivePropChart'
describe('ReactivePropChart', () => {
const Component = {
diff --git a/test/Scatter.spec.js b/test/Scatter.spec.ts
similarity index 95%
rename from test/Scatter.spec.js
rename to test/Scatter.spec.ts
index c96d975f..e69a837f 100644
--- a/test/Scatter.spec.js
+++ b/test/Scatter.spec.ts
@@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
-import ScatterChart from './examples/ScatterChart.vue'
+import ScatterChart from './examples/ScatterChart'
describe('ScatterChart', () => {
const Component = {
diff --git a/test/examples/BarChart.vue b/test/examples/BarChart.ts
similarity index 85%
rename from test/examples/BarChart.vue
rename to test/examples/BarChart.ts
index e1074113..3c7baf9a 100644
--- a/test/examples/BarChart.vue
+++ b/test/examples/BarChart.ts
@@ -1,6 +1,7 @@
-
diff --git a/test/examples/BubbleChart.vue b/test/examples/BubbleChart.ts
similarity index 88%
rename from test/examples/BubbleChart.vue
rename to test/examples/BubbleChart.ts
index 8306a949..c886d80b 100644
--- a/test/examples/BubbleChart.vue
+++ b/test/examples/BubbleChart.ts
@@ -1,6 +1,6 @@
-
diff --git a/test/examples/CustomChart.vue b/test/examples/CustomChart.ts
similarity index 83%
rename from test/examples/CustomChart.vue
rename to test/examples/CustomChart.ts
index 6b3d3c85..2daebce5 100644
--- a/test/examples/CustomChart.vue
+++ b/test/examples/CustomChart.ts
@@ -1,7 +1,6 @@
-
diff --git a/test/examples/DoughnutChart.vue b/test/examples/DoughnutChart.ts
similarity index 83%
rename from test/examples/DoughnutChart.vue
rename to test/examples/DoughnutChart.ts
index ea71c7e5..89808010 100644
--- a/test/examples/DoughnutChart.vue
+++ b/test/examples/DoughnutChart.ts
@@ -1,14 +1,14 @@
-
diff --git a/test/examples/LineChart.vue b/test/examples/LineChart.ts
similarity index 83%
rename from test/examples/LineChart.vue
rename to test/examples/LineChart.ts
index 3861195f..0e31caab 100644
--- a/test/examples/LineChart.vue
+++ b/test/examples/LineChart.ts
@@ -1,14 +1,14 @@
-
diff --git a/test/examples/PieChart.vue b/test/examples/PieChart.ts
similarity index 83%
rename from test/examples/PieChart.vue
rename to test/examples/PieChart.ts
index 6236bd2f..d48d722b 100644
--- a/test/examples/PieChart.vue
+++ b/test/examples/PieChart.ts
@@ -1,14 +1,14 @@
-
diff --git a/test/examples/PolarAreaChart.vue b/test/examples/PolarAreaChart.ts
similarity index 88%
rename from test/examples/PolarAreaChart.vue
rename to test/examples/PolarAreaChart.ts
index ef13feef..208b6f79 100644
--- a/test/examples/PolarAreaChart.vue
+++ b/test/examples/PolarAreaChart.ts
@@ -1,14 +1,14 @@
-
diff --git a/test/examples/RadarChart.vue b/test/examples/RadarChart.ts
similarity index 88%
rename from test/examples/RadarChart.vue
rename to test/examples/RadarChart.ts
index 1ddbe70e..12a31374 100644
--- a/test/examples/RadarChart.vue
+++ b/test/examples/RadarChart.ts
@@ -1,14 +1,14 @@
-
diff --git a/test/examples/ReactiveChart.vue b/test/examples/ReactiveChart.ts
similarity index 86%
rename from test/examples/ReactiveChart.vue
rename to test/examples/ReactiveChart.ts
index 77a0a326..3cdf5458 100644
--- a/test/examples/ReactiveChart.vue
+++ b/test/examples/ReactiveChart.ts
@@ -1,6 +1,5 @@
-
diff --git a/test/examples/ReactivePropChart.vue b/test/examples/ReactivePropChart.ts
similarity index 76%
rename from test/examples/ReactivePropChart.vue
rename to test/examples/ReactivePropChart.ts
index 6729806b..612adb5c 100644
--- a/test/examples/ReactivePropChart.vue
+++ b/test/examples/ReactivePropChart.ts
@@ -1,5 +1,4 @@
-
diff --git a/test/examples/ScatterChart.vue b/test/examples/ScatterChart.ts
similarity index 89%
rename from test/examples/ScatterChart.vue
rename to test/examples/ScatterChart.ts
index f4b3ed7d..e6a20fdd 100644
--- a/test/examples/ScatterChart.vue
+++ b/test/examples/ScatterChart.ts
@@ -1,14 +1,14 @@
-
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..df120f0f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,39 @@
+{
+ "compilerOptions": {
+ /* Type Checking */
+ "strict": true,
+ "strictBindCallApply": true,
+ "noFallthroughCasesInSwitch": true,
+ "noImplicitOverride": true,
+ "noImplicitReturns": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ /* Modules */
+ "baseUrl": ".",
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ /* Emit */
+ "declaration": true,
+ "declarationMap": true,
+ "inlineSourceMap": true,
+ "outDir": "dist",
+ /* Interop Constraints */
+ "allowSyntheticDefaultImports": true,
+ "isolatedModules": true,
+ /* Language and Environment */
+ "lib": [
+ "dom",
+ "esnext"
+ ],
+ "target": "esnext",
+ /* Completeness */
+ "skipLibCheck": true
+ },
+ "include": [
+ "src"
+ ],
+ "exclude": [
+ "dist"
+ ]
+}
diff --git a/types/components.d.ts b/types/components.d.ts
deleted file mode 100644
index fcc7b4ad..00000000
--- a/types/components.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import Vue from 'vue'
-import 'chart.js'
-
-/** vue-chartjs component common definition */
-export declare class BaseChart extends Vue {
- addPlugin (plugin?: object): void
- renderChart (chartData: Chart.ChartData, options?: Chart.ChartOptions): void
-}
diff --git a/types/index.d.ts b/types/index.d.ts
deleted file mode 100644
index 7893ae61..00000000
--- a/types/index.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { BaseChart } from './components'
-import { ReactiveDataMixin, ReactivePropMixin } from './mixins'
-
-declare module 'vue-chartjs' {
- export function generateChart(chartId: string, chartType: string): any;
- export class Bar extends BaseChart {}
- export class HorizontalBar extends BaseChart {}
- export class Doughnut extends BaseChart {}
- export class Line extends BaseChart {}
- export class Pie extends BaseChart {}
- export class PolarArea extends BaseChart {}
- export class Radar extends BaseChart {}
- export class Bubble extends BaseChart {}
- export class Scatter extends BaseChart {}
- export const mixins: {
- reactiveData: typeof ReactiveDataMixin
- reactiveProp: typeof ReactivePropMixin
- }
-}
-
diff --git a/types/mixins.d.ts b/types/mixins.d.ts
deleted file mode 100644
index 3aec7595..00000000
--- a/types/mixins.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import Vue from 'vue';
-import 'chart.js';
-
-export declare class ReactiveDataMixin extends Vue {
- chartData: Chart.ChartData;
-}
-
-export declare class ReactivePropMixin extends Vue {
- readonly chartData: Chart.ChartData;
-}