feat(directive): add custom directive v-resize

package-lock.json

@@ -19,6 +19,7 @@
         "dotenv": "^8.2.0",
         "echarts": "^5.1.2",
         "element-plus": "^1.1.0-beta.8",
+        "element-resize-detector": "^1.2.3",
         "font-awesome": "^4.7.0",
         "lodash-es": "^4.17.21",
         "mitt": "^2.1.0",
@@ -30,7 +31,7 @@
         "resize-observer-polyfill": "^1.5.1",
         "responsive-storage": "^1.0.4",
         "v-contextmenu": "^3.0.0",
-        "vue": "^3.2.6",
+        "vue": "^3.2.8",
         "vue-i18n": "^9.2.0-beta.3",
         "vue-json-pretty": "^2.0.2",
         "vue-router": "^4.0.11",
@@ -43,14 +44,15 @@
         "xgplayer": "^2.28.0"
       },
       "devDependencies": {
+        "@types/element-resize-detector": "^1.1.3",
         "@types/mockjs": "^1.0.3",
         "@types/node": "^14.14.14",
         "@types/nprogress": "^0.2.0",
-        "@typescript-eslint/eslint-plugin": "^4.28.1",
-        "@typescript-eslint/parser": "^4.28.1",
+        "@typescript-eslint/eslint-plugin": "^4.30.0",
+        "@typescript-eslint/parser": "^4.30.0",
         "@vitejs/plugin-vue": "^1.6.0",
         "@vitejs/plugin-vue-jsx": "^1.1.7",
-        "@vue/compiler-sfc": "^3.2.6",
+        "@vue/compiler-sfc": "^3.2.8",
         "@vue/eslint-config-prettier": "^6.0.0",
         "@vue/eslint-config-typescript": "^7.0.0",
         "autoprefixer": "^10.2.4",
@@ -68,7 +70,7 @@
         "rimraf": "^3.0.2",
         "sass": "^1.38.0",
         "sass-loader": "^12.1.0",
-        "typescript": "^4.2.4",
+        "typescript": "^4.4.2",
         "vite": "^2.5.3",
         "vite-plugin-element-plus": "^0.0.12",
         "vite-plugin-mock": "^2.9.6",
@@ -802,6 +804,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/element-resize-detector": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/element-resize-detector/-/element-resize-detector-1.1.3.tgz",
+      "integrity": "sha512-rqmeHxzNMPar/3IbdQRm+mydv8KlEXUtcp5M47rbZUEjslTjg+bT5+OXCknTCIy1AfvNR0Kio44iMY2zUH65CQ==",
+      "dev": true
+    },
     "node_modules/@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@@ -854,13 +862,13 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.1.tgz",
-      "integrity": "sha512-9yfcNpDaNGQ6/LQOX/KhUFTR1sCKH+PBr234k6hI9XJ0VP5UqGxap0AnNwBnWFk1MNyWBylJH9ZkzBXC+5akZQ==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.30.0.tgz",
+      "integrity": "sha512-NgAnqk55RQ/SD+tZFD9aPwNSeHmDHHe5rtUyhIq0ZeCWZEvo4DK9rYz7v9HDuQZFvn320Ot+AikaCKMFKLlD0g==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/experimental-utils": "4.28.1",
-        "@typescript-eslint/scope-manager": "4.28.1",
+        "@typescript-eslint/experimental-utils": "4.30.0",
+        "@typescript-eslint/scope-manager": "4.30.0",
         "debug": "^4.3.1",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.1.0",
@@ -869,6 +877,19 @@
       },
       "engines": {
         "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^4.0.0",
+        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/lru-cache": {
@@ -905,67 +926,94 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/experimental-utils": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.1.tgz",
-      "integrity": "sha512-n8/ggadrZ+uyrfrSEchx3jgODdmcx7MzVM2sI3cTpI/YlfSm0+9HEUaWw3aQn2urL2KYlWYMDgn45iLfjDYB+Q==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.30.0.tgz",
+      "integrity": "sha512-K8RNIX9GnBsv5v4TjtwkKtqMSzYpjqAQg/oSphtxf3xxdt6T0owqnpojztjjTcatSteH3hLj3t/kklKx87NPqw==",
       "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.7",
-        "@typescript-eslint/scope-manager": "4.28.1",
-        "@typescript-eslint/types": "4.28.1",
-        "@typescript-eslint/typescript-estree": "4.28.1",
+        "@typescript-eslint/scope-manager": "4.30.0",
+        "@typescript-eslint/types": "4.30.0",
+        "@typescript-eslint/typescript-estree": "4.30.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       },
       "engines": {
         "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.28.1.tgz",
-      "integrity": "sha512-UjrMsgnhQIIK82hXGaD+MCN8IfORS1CbMdu7VlZbYa8LCZtbZjJA26De4IPQB7XYZbL8gJ99KWNj0l6WD0guJg==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.30.0.tgz",
+      "integrity": "sha512-HJ0XuluSZSxeboLU7Q2VQ6eLlCwXPBOGnA7CqgBnz2Db3JRQYyBDJgQnop6TZ+rsbSx5gEdWhw4rE4mDa1FnZg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "4.28.1",
-        "@typescript-eslint/types": "4.28.1",
-        "@typescript-eslint/typescript-estree": "4.28.1",
+        "@typescript-eslint/scope-manager": "4.30.0",
+        "@typescript-eslint/types": "4.30.0",
+        "@typescript-eslint/typescript-estree": "4.30.0",
         "debug": "^4.3.1"
       },
       "engines": {
         "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.1.tgz",
-      "integrity": "sha512-o95bvGKfss6705x7jFGDyS7trAORTy57lwJ+VsYwil/lOUxKQ9tA7Suuq+ciMhJc/1qPwB3XE2DKh9wubW8YYA==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.30.0.tgz",
+      "integrity": "sha512-VJ/jAXovxNh7rIXCQbYhkyV2Y3Ac/0cVHP/FruTJSAUUm4Oacmn/nkN5zfWmWFEanN4ggP0vJSHOeajtHq3f8A==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "4.28.1",
-        "@typescript-eslint/visitor-keys": "4.28.1"
+        "@typescript-eslint/types": "4.30.0",
+        "@typescript-eslint/visitor-keys": "4.30.0"
       },
       "engines": {
         "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.1.tgz",
-      "integrity": "sha512-4z+knEihcyX7blAGi7O3Fm3O6YRCP+r56NJFMNGsmtdw+NCdpG5SgNz427LS9nQkRVTswZLhz484hakQwB8RRg==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.30.0.tgz",
+      "integrity": "sha512-YKldqbNU9K4WpTNwBqtAerQKLLW/X2A/j4yw92e3ZJYLx+BpKLeheyzoPfzIXHfM8BXfoleTdiYwpsvVPvHrDw==",
       "dev": true,
       "engines": {
         "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.1.tgz",
-      "integrity": "sha512-GhKxmC4sHXxHGJv8e8egAZeTZ6HI4mLU6S7FUzvFOtsk7ZIDN1ksA9r9DyOgNqowA9yAtZXV0Uiap61bIO81FQ==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.30.0.tgz",
+      "integrity": "sha512-6WN7UFYvykr/U0Qgy4kz48iGPWILvYL34xXJxvDQeiRE018B7POspNRVtAZscWntEPZpFCx4hcz/XBT+erenfg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "4.28.1",
-        "@typescript-eslint/visitor-keys": "4.28.1",
+        "@typescript-eslint/types": "4.30.0",
+        "@typescript-eslint/visitor-keys": "4.30.0",
         "debug": "^4.3.1",
         "globby": "^11.0.3",
         "is-glob": "^4.0.1",
@@ -974,6 +1022,15 @@
       },
       "engines": {
         "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": {
@@ -1010,16 +1067,20 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.1.tgz",
-      "integrity": "sha512-K4HMrdFqr9PFquPu178SaSb92CaWe2yErXyPumc8cYWxFmhgJsNY9eSePmO05j0JhBvf2Cdhptd6E6Yv9HVHcg==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.30.0.tgz",
+      "integrity": "sha512-pNaaxDt/Ol/+JZwzP7MqWc8PJQTUhZwoee/PVlQ+iYoYhagccvoHnC9e4l+C/krQYYkENxznhVSDwClIbZVxRw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "4.28.1",
+        "@typescript-eslint/types": "4.30.0",
         "eslint-visitor-keys": "^2.0.0"
       },
       "engines": {
         "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
     "node_modules/@vitejs/plugin-vue": {
@@ -1090,41 +1151,41 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.6.tgz",
-      "integrity": "sha512-vbwnz7+OhtLO5p5i630fTuQCL+MlUpEMTKHuX+RfetQ+3pFCkItt2JUH+9yMaBG2Hkz6av+T9mwN/acvtIwpbw==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.8.tgz",
+      "integrity": "sha512-Sx8qJ030+QM/NakUrkQuUGCeDEb+0d0AgFOl5W4qRvR6e+YgLnW2ew0jREf4T1hak9Fdk8Edl67StECHrhEuew==",
       "dependencies": {
         "@babel/parser": "^7.15.0",
         "@babel/types": "^7.15.0",
-        "@vue/shared": "3.2.6",
+        "@vue/shared": "3.2.8",
         "estree-walker": "^2.0.2",
         "source-map": "^0.6.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.6.tgz",
-      "integrity": "sha512-+a/3oBAzFIXhHt8L5IHJOTP4a5egzvpXYyi13jR7CUYOR1S+Zzv7vBWKYBnKyJLwnrxTZnTQVjeHCgJq743XKg==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.8.tgz",
+      "integrity": "sha512-nxBW6k8FMWQ74294CRbqR+iEJRO5vIjx85I3YCOyZFD6FsDHyFL60g76TcJzucp+F2XXIDaYz+A+F4gQlDatjw==",
       "dependencies": {
-        "@vue/compiler-core": "3.2.6",
-        "@vue/shared": "3.2.6"
+        "@vue/compiler-core": "3.2.8",
+        "@vue/shared": "3.2.8"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.6.tgz",
-      "integrity": "sha512-Ariz1eDsf+2fw6oWXVwnBNtfKHav72RjlWXpEgozYBLnfRPzP+7jhJRw4Nq0OjSsLx2HqjF3QX7HutTjYB0/eA==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.8.tgz",
+      "integrity": "sha512-XClueQAXoWtN2EToKgfYH9FCL70Ac4bxx6OZFZzxYSg1bei8IB9srJP1UOfnJb2IpnM1heikAz1dp1HI1wHcyQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.15.0",
         "@babel/types": "^7.15.0",
         "@types/estree": "^0.0.48",
-        "@vue/compiler-core": "3.2.6",
-        "@vue/compiler-dom": "3.2.6",
-        "@vue/compiler-ssr": "3.2.6",
-        "@vue/ref-transform": "3.2.6",
-        "@vue/shared": "3.2.6",
+        "@vue/compiler-core": "3.2.8",
+        "@vue/compiler-dom": "3.2.8",
+        "@vue/compiler-ssr": "3.2.8",
+        "@vue/ref-transform": "3.2.8",
+        "@vue/shared": "3.2.8",
         "consolidate": "^0.16.0",
         "estree-walker": "^2.0.2",
         "hash-sum": "^2.0.0",
@@ -1144,13 +1205,13 @@
       "dev": true
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.6.tgz",
-      "integrity": "sha512-A7IKRKHSyPnTC4w1FxHkjzoyjXInsXkcs/oX22nBQ+6AWlXj2Tt1le96CWPOXy5vYlsTYkF1IgfBaKIdeN/39g==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.8.tgz",
+      "integrity": "sha512-QqyiFRiIl55W0abDNQ6cNG/7iIfBHmbXVtssUAjX3IlI87ELeT0xackmrCyTSnfIX12ixljg9AN0COIZwlvt5A==",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-dom": "3.2.6",
-        "@vue/shared": "3.2.6"
+        "@vue/compiler-dom": "3.2.8",
+        "@vue/shared": "3.2.8"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -1180,49 +1241,49 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.6.tgz",
-      "integrity": "sha512-8vIDD2wpCnYisNNZjmcIj+Rixn0uhZNY3G1vzlgdVdLygeRSuFjkmnZk6WwvGzUWpKfnG0e/NUySM3mVi59hAA==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.8.tgz",
+      "integrity": "sha512-/Hj3Uz28SG+xB5SDWPOXUs0emvHkq82EmTgk44/plTVFeswCZ3i3Hd7WmsrPT4rGajlDKd5uqMmW0ith1ED0FA==",
       "dependencies": {
-        "@vue/shared": "3.2.6"
+        "@vue/shared": "3.2.8"
       }
     },
     "node_modules/@vue/ref-transform": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.6.tgz",
-      "integrity": "sha512-ie39+Y4nbirDLvH+WEq6Eo/l3n3mFATayqR+kEMSphrtMW6Uh/eEMx1Gk2Jnf82zmj3VLRq7dnmPx72JLcBYkQ==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.8.tgz",
+      "integrity": "sha512-9LdADd4JM3klt+b2qNT8a7b7JvBETNBy2Btv5rDzyPrAVS4Vrw+1WWay6gZBgnxfJ9TPSvG8f/9zu6gNGHmJLA==",
       "dev": true,
       "dependencies": {
         "@babel/parser": "^7.15.0",
-        "@vue/compiler-core": "3.2.6",
-        "@vue/shared": "3.2.6",
+        "@vue/compiler-core": "3.2.8",
+        "@vue/shared": "3.2.8",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.6.tgz",
-      "integrity": "sha512-3mqtgpj/YSGFxtvTufSERRApo92B16JNNxz9p+5eG6PPuqTmuRJz214MqhKBEgLEAIQ6R6YCbd83ZDtjQnyw2g==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.8.tgz",
+      "integrity": "sha512-hwzXLGw1njBEY5JSyRXIIdCtzMFFF6F38WcKMmoIE3p7da30jEbWt8EwwrBomjT8ZbqzElOGlewBcnXNOiiIUg==",
       "dependencies": {
-        "@vue/reactivity": "3.2.6",
-        "@vue/shared": "3.2.6"
+        "@vue/reactivity": "3.2.8",
+        "@vue/shared": "3.2.8"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.6.tgz",
-      "integrity": "sha512-fq33urnP0BNCGm2O3KCzkJlKIHI80C94HJ4qDZbjsTtxyOn5IHqwKSqXVN3RQvO6epcQH+sWS+JNwcNDPzoasg==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.8.tgz",
+      "integrity": "sha512-A/aRrlGLJ5y4Z7eNbnO/xHwx2RiPijQo7D3OIwESroG3HNP+dpuoqamajo5TXS9ZGjbMOih82COoe7xb9P4BZw==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.6",
-        "@vue/shared": "3.2.6",
+        "@vue/runtime-core": "3.2.8",
+        "@vue/shared": "3.2.8",
         "csstype": "^2.6.8"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.6.tgz",
-      "integrity": "sha512-uwX0Qs2e6kdF+WmxwuxJxOnKs/wEkMArtYpHSm7W+VY/23Tl8syMRyjnzEeXrNCAP0/8HZxEGkHJsjPEDNRuHw=="
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.8.tgz",
+      "integrity": "sha512-E2DQQnG7Qr4GwTs3GlfPPlHliGVADoufTnhpwfoViw7JlyLMmYtjfnTwM6nXAwvSJWiF7D+7AxpnWBBT3VWo6Q=="
     },
     "node_modules/@vueuse/core": {
       "version": "6.0.0",
@@ -1488,6 +1549,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.nlark.com/big.js/download/big.js-5.2.2.tgz?cache=0&sync_timestamp=1620132748267&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbig.js%2Fdownload%2Fbig.js-5.2.2.tgz",
@@ -2184,6 +2250,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/element-resize-detector": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.3.tgz",
+      "integrity": "sha512-+dhNzUgLpq9ol5tyhoG7YLoXL3ssjfFW+0gpszXPwRU6NjGr1fVHMEAF8fVzIiRJq57Nre0RFeIjJwI8Nh2NmQ==",
+      "dependencies": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -2449,6 +2523,12 @@
       },
       "engines": {
         "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5"
       }
     },
     "node_modules/eslint-visitor-keys": {
@@ -3079,6 +3159,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/graceful-fs": {
@@ -4948,6 +5031,9 @@
       },
       "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"
       }
     },
     "node_modules/tsutils/node_modules/tslib": {
@@ -4983,9 +5069,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
-      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.2.tgz",
+      "integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==",
       "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -5291,13 +5377,13 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.6.tgz",
-      "integrity": "sha512-Zlb3LMemQS3Xxa6xPsecu45bNjr1hxO8Bh5FUmE0Dr6Ot0znZBKiM47rK6O7FTcakxOnvVN+NTXWJF6u8ajpCQ==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.8.tgz",
+      "integrity": "sha512-x7lwdnOSkceHQUXRVVHBaZzcp6v7M2CYtSZH75zZaT1mTjB4plC4KZHKP/5jAvdqOLBHZGwDSMkWXm3YbAufrA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.6",
-        "@vue/runtime-dom": "3.2.6",
-        "@vue/shared": "3.2.6"
+        "@vue/compiler-dom": "3.2.8",
+        "@vue/runtime-dom": "3.2.8",
+        "@vue/shared": "3.2.8"
       }
     },
     "node_modules/vue-eslint-parser": {
@@ -6113,6 +6199,12 @@
       "integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
       "dev": true
     },
+    "@types/element-resize-detector": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/element-resize-detector/-/element-resize-detector-1.1.3.tgz",
+      "integrity": "sha512-rqmeHxzNMPar/3IbdQRm+mydv8KlEXUtcp5M47rbZUEjslTjg+bT5+OXCknTCIy1AfvNR0Kio44iMY2zUH65CQ==",
+      "dev": true
+    },
     "@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@@ -6164,13 +6256,13 @@
       }
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.1.tgz",
-      "integrity": "sha512-9yfcNpDaNGQ6/LQOX/KhUFTR1sCKH+PBr234k6hI9XJ0VP5UqGxap0AnNwBnWFk1MNyWBylJH9ZkzBXC+5akZQ==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.30.0.tgz",
+      "integrity": "sha512-NgAnqk55RQ/SD+tZFD9aPwNSeHmDHHe5rtUyhIq0ZeCWZEvo4DK9rYz7v9HDuQZFvn320Ot+AikaCKMFKLlD0g==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "4.28.1",
-        "@typescript-eslint/scope-manager": "4.28.1",
+        "@typescript-eslint/experimental-utils": "4.30.0",
+        "@typescript-eslint/scope-manager": "4.30.0",
         "debug": "^4.3.1",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.1.0",
@@ -6205,55 +6297,55 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.1.tgz",
-      "integrity": "sha512-n8/ggadrZ+uyrfrSEchx3jgODdmcx7MzVM2sI3cTpI/YlfSm0+9HEUaWw3aQn2urL2KYlWYMDgn45iLfjDYB+Q==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.30.0.tgz",
+      "integrity": "sha512-K8RNIX9GnBsv5v4TjtwkKtqMSzYpjqAQg/oSphtxf3xxdt6T0owqnpojztjjTcatSteH3hLj3t/kklKx87NPqw==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.7",
-        "@typescript-eslint/scope-manager": "4.28.1",
-        "@typescript-eslint/types": "4.28.1",
-        "@typescript-eslint/typescript-estree": "4.28.1",
+        "@typescript-eslint/scope-manager": "4.30.0",
+        "@typescript-eslint/types": "4.30.0",
+        "@typescript-eslint/typescript-estree": "4.30.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.28.1.tgz",
-      "integrity": "sha512-UjrMsgnhQIIK82hXGaD+MCN8IfORS1CbMdu7VlZbYa8LCZtbZjJA26De4IPQB7XYZbL8gJ99KWNj0l6WD0guJg==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.30.0.tgz",
+      "integrity": "sha512-HJ0XuluSZSxeboLU7Q2VQ6eLlCwXPBOGnA7CqgBnz2Db3JRQYyBDJgQnop6TZ+rsbSx5gEdWhw4rE4mDa1FnZg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "4.28.1",
-        "@typescript-eslint/types": "4.28.1",
-        "@typescript-eslint/typescript-estree": "4.28.1",
+        "@typescript-eslint/scope-manager": "4.30.0",
+        "@typescript-eslint/types": "4.30.0",
+        "@typescript-eslint/typescript-estree": "4.30.0",
         "debug": "^4.3.1"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.1.tgz",
-      "integrity": "sha512-o95bvGKfss6705x7jFGDyS7trAORTy57lwJ+VsYwil/lOUxKQ9tA7Suuq+ciMhJc/1qPwB3XE2DKh9wubW8YYA==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.30.0.tgz",
+      "integrity": "sha512-VJ/jAXovxNh7rIXCQbYhkyV2Y3Ac/0cVHP/FruTJSAUUm4Oacmn/nkN5zfWmWFEanN4ggP0vJSHOeajtHq3f8A==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.28.1",
-        "@typescript-eslint/visitor-keys": "4.28.1"
+        "@typescript-eslint/types": "4.30.0",
+        "@typescript-eslint/visitor-keys": "4.30.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.1.tgz",
-      "integrity": "sha512-4z+knEihcyX7blAGi7O3Fm3O6YRCP+r56NJFMNGsmtdw+NCdpG5SgNz427LS9nQkRVTswZLhz484hakQwB8RRg==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.30.0.tgz",
+      "integrity": "sha512-YKldqbNU9K4WpTNwBqtAerQKLLW/X2A/j4yw92e3ZJYLx+BpKLeheyzoPfzIXHfM8BXfoleTdiYwpsvVPvHrDw==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.1.tgz",
-      "integrity": "sha512-GhKxmC4sHXxHGJv8e8egAZeTZ6HI4mLU6S7FUzvFOtsk7ZIDN1ksA9r9DyOgNqowA9yAtZXV0Uiap61bIO81FQ==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.30.0.tgz",
+      "integrity": "sha512-6WN7UFYvykr/U0Qgy4kz48iGPWILvYL34xXJxvDQeiRE018B7POspNRVtAZscWntEPZpFCx4hcz/XBT+erenfg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.28.1",
-        "@typescript-eslint/visitor-keys": "4.28.1",
+        "@typescript-eslint/types": "4.30.0",
+        "@typescript-eslint/visitor-keys": "4.30.0",
         "debug": "^4.3.1",
         "globby": "^11.0.3",
         "is-glob": "^4.0.1",
@@ -6288,12 +6380,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.1.tgz",
-      "integrity": "sha512-K4HMrdFqr9PFquPu178SaSb92CaWe2yErXyPumc8cYWxFmhgJsNY9eSePmO05j0JhBvf2Cdhptd6E6Yv9HVHcg==",
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.30.0.tgz",
+      "integrity": "sha512-pNaaxDt/Ol/+JZwzP7MqWc8PJQTUhZwoee/PVlQ+iYoYhagccvoHnC9e4l+C/krQYYkENxznhVSDwClIbZVxRw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.28.1",
+        "@typescript-eslint/types": "4.30.0",
         "eslint-visitor-keys": "^2.0.0"
       }
     },
@@ -6354,40 +6446,40 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.6.tgz",
-      "integrity": "sha512-vbwnz7+OhtLO5p5i630fTuQCL+MlUpEMTKHuX+RfetQ+3pFCkItt2JUH+9yMaBG2Hkz6av+T9mwN/acvtIwpbw==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.8.tgz",
+      "integrity": "sha512-Sx8qJ030+QM/NakUrkQuUGCeDEb+0d0AgFOl5W4qRvR6e+YgLnW2ew0jREf4T1hak9Fdk8Edl67StECHrhEuew==",
       "requires": {
         "@babel/parser": "^7.15.0",
         "@babel/types": "^7.15.0",
-        "@vue/shared": "3.2.6",
+        "@vue/shared": "3.2.8",
         "estree-walker": "^2.0.2",
         "source-map": "^0.6.1"
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.6.tgz",
-      "integrity": "sha512-+a/3oBAzFIXhHt8L5IHJOTP4a5egzvpXYyi13jR7CUYOR1S+Zzv7vBWKYBnKyJLwnrxTZnTQVjeHCgJq743XKg==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.8.tgz",
+      "integrity": "sha512-nxBW6k8FMWQ74294CRbqR+iEJRO5vIjx85I3YCOyZFD6FsDHyFL60g76TcJzucp+F2XXIDaYz+A+F4gQlDatjw==",
       "requires": {
-        "@vue/compiler-core": "3.2.6",
-        "@vue/shared": "3.2.6"
+        "@vue/compiler-core": "3.2.8",
+        "@vue/shared": "3.2.8"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.6.tgz",
-      "integrity": "sha512-Ariz1eDsf+2fw6oWXVwnBNtfKHav72RjlWXpEgozYBLnfRPzP+7jhJRw4Nq0OjSsLx2HqjF3QX7HutTjYB0/eA==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.8.tgz",
+      "integrity": "sha512-XClueQAXoWtN2EToKgfYH9FCL70Ac4bxx6OZFZzxYSg1bei8IB9srJP1UOfnJb2IpnM1heikAz1dp1HI1wHcyQ==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.15.0",
         "@babel/types": "^7.15.0",
         "@types/estree": "^0.0.48",
-        "@vue/compiler-core": "3.2.6",
-        "@vue/compiler-dom": "3.2.6",
-        "@vue/compiler-ssr": "3.2.6",
-        "@vue/ref-transform": "3.2.6",
-        "@vue/shared": "3.2.6",
+        "@vue/compiler-core": "3.2.8",
+        "@vue/compiler-dom": "3.2.8",
+        "@vue/compiler-ssr": "3.2.8",
+        "@vue/ref-transform": "3.2.8",
+        "@vue/shared": "3.2.8",
         "consolidate": "^0.16.0",
         "estree-walker": "^2.0.2",
         "hash-sum": "^2.0.0",
@@ -6409,13 +6501,13 @@
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.6.tgz",
-      "integrity": "sha512-A7IKRKHSyPnTC4w1FxHkjzoyjXInsXkcs/oX22nBQ+6AWlXj2Tt1le96CWPOXy5vYlsTYkF1IgfBaKIdeN/39g==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.8.tgz",
+      "integrity": "sha512-QqyiFRiIl55W0abDNQ6cNG/7iIfBHmbXVtssUAjX3IlI87ELeT0xackmrCyTSnfIX12ixljg9AN0COIZwlvt5A==",
       "dev": true,
       "requires": {
-        "@vue/compiler-dom": "3.2.6",
-        "@vue/shared": "3.2.6"
+        "@vue/compiler-dom": "3.2.8",
+        "@vue/shared": "3.2.8"
       }
     },
     "@vue/devtools-api": {
@@ -6442,49 +6534,49 @@
       }
     },
     "@vue/reactivity": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.6.tgz",
-      "integrity": "sha512-8vIDD2wpCnYisNNZjmcIj+Rixn0uhZNY3G1vzlgdVdLygeRSuFjkmnZk6WwvGzUWpKfnG0e/NUySM3mVi59hAA==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.8.tgz",
+      "integrity": "sha512-/Hj3Uz28SG+xB5SDWPOXUs0emvHkq82EmTgk44/plTVFeswCZ3i3Hd7WmsrPT4rGajlDKd5uqMmW0ith1ED0FA==",
       "requires": {
-        "@vue/shared": "3.2.6"
+        "@vue/shared": "3.2.8"
       }
     },
     "@vue/ref-transform": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.6.tgz",
-      "integrity": "sha512-ie39+Y4nbirDLvH+WEq6Eo/l3n3mFATayqR+kEMSphrtMW6Uh/eEMx1Gk2Jnf82zmj3VLRq7dnmPx72JLcBYkQ==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.8.tgz",
+      "integrity": "sha512-9LdADd4JM3klt+b2qNT8a7b7JvBETNBy2Btv5rDzyPrAVS4Vrw+1WWay6gZBgnxfJ9TPSvG8f/9zu6gNGHmJLA==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.15.0",
-        "@vue/compiler-core": "3.2.6",
-        "@vue/shared": "3.2.6",
+        "@vue/compiler-core": "3.2.8",
+        "@vue/shared": "3.2.8",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.6.tgz",
-      "integrity": "sha512-3mqtgpj/YSGFxtvTufSERRApo92B16JNNxz9p+5eG6PPuqTmuRJz214MqhKBEgLEAIQ6R6YCbd83ZDtjQnyw2g==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.8.tgz",
+      "integrity": "sha512-hwzXLGw1njBEY5JSyRXIIdCtzMFFF6F38WcKMmoIE3p7da30jEbWt8EwwrBomjT8ZbqzElOGlewBcnXNOiiIUg==",
       "requires": {
-        "@vue/reactivity": "3.2.6",
-        "@vue/shared": "3.2.6"
+        "@vue/reactivity": "3.2.8",
+        "@vue/shared": "3.2.8"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.6.tgz",
-      "integrity": "sha512-fq33urnP0BNCGm2O3KCzkJlKIHI80C94HJ4qDZbjsTtxyOn5IHqwKSqXVN3RQvO6epcQH+sWS+JNwcNDPzoasg==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.8.tgz",
+      "integrity": "sha512-A/aRrlGLJ5y4Z7eNbnO/xHwx2RiPijQo7D3OIwESroG3HNP+dpuoqamajo5TXS9ZGjbMOih82COoe7xb9P4BZw==",
       "requires": {
-        "@vue/runtime-core": "3.2.6",
-        "@vue/shared": "3.2.6",
+        "@vue/runtime-core": "3.2.8",
+        "@vue/shared": "3.2.8",
         "csstype": "^2.6.8"
       }
     },
     "@vue/shared": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.6.tgz",
-      "integrity": "sha512-uwX0Qs2e6kdF+WmxwuxJxOnKs/wEkMArtYpHSm7W+VY/23Tl8syMRyjnzEeXrNCAP0/8HZxEGkHJsjPEDNRuHw=="
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.8.tgz",
+      "integrity": "sha512-E2DQQnG7Qr4GwTs3GlfPPlHliGVADoufTnhpwfoViw7JlyLMmYtjfnTwM6nXAwvSJWiF7D+7AxpnWBBT3VWo6Q=="
     },
     "@vueuse/core": {
       "version": "6.0.0",
@@ -6662,6 +6754,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
+    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.nlark.com/big.js/download/big.js-5.2.2.tgz?cache=0&sync_timestamp=1620132748267&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbig.js%2Fdownload%2Fbig.js-5.2.2.tgz",
@@ -7220,6 +7317,14 @@
         "resize-observer-polyfill": "^1.5.1"
       }
     },
+    "element-resize-detector": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.3.tgz",
+      "integrity": "sha512-+dhNzUgLpq9ol5tyhoG7YLoXL3ssjfFW+0gpszXPwRU6NjGr1fVHMEAF8fVzIiRJq57Nre0RFeIjJwI8Nh2NmQ==",
+      "requires": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -9468,9 +9573,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
-      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.2.tgz",
+      "integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==",
       "devOptional": true
     },
     "unidragger": {
@@ -9711,13 +9816,13 @@
       }
     },
     "vue": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.6.tgz",
-      "integrity": "sha512-Zlb3LMemQS3Xxa6xPsecu45bNjr1hxO8Bh5FUmE0Dr6Ot0znZBKiM47rK6O7FTcakxOnvVN+NTXWJF6u8ajpCQ==",
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.8.tgz",
+      "integrity": "sha512-x7lwdnOSkceHQUXRVVHBaZzcp6v7M2CYtSZH75zZaT1mTjB4plC4KZHKP/5jAvdqOLBHZGwDSMkWXm3YbAufrA==",
       "requires": {
-        "@vue/compiler-dom": "3.2.6",
-        "@vue/runtime-dom": "3.2.6",
-        "@vue/shared": "3.2.6"
+        "@vue/compiler-dom": "3.2.8",
+        "@vue/runtime-dom": "3.2.8",
+        "@vue/shared": "3.2.8"
       }
     },
     "vue-eslint-parser": {

package.json

@@ -30,6 +30,7 @@
     "dotenv": "^8.2.0",
     "echarts": "^5.1.2",
     "element-plus": "^1.1.0-beta.8",
+    "element-resize-detector": "^1.2.3",
     "font-awesome": "^4.7.0",
     "lodash-es": "^4.17.21",
     "mitt": "^2.1.0",
@@ -41,7 +42,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "responsive-storage": "^1.0.4",
     "v-contextmenu": "^3.0.0",
-    "vue": "^3.2.6",
+    "vue": "^3.2.8",
     "vue-i18n": "^9.2.0-beta.3",
     "vue-json-pretty": "^2.0.2",
     "vue-router": "^4.0.11",
@@ -54,14 +55,15 @@
     "xgplayer": "^2.28.0"
   },
   "devDependencies": {
+    "@types/element-resize-detector": "^1.1.3",
     "@types/mockjs": "^1.0.3",
     "@types/node": "^14.14.14",
     "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.1",
-    "@typescript-eslint/parser": "^4.28.1",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/parser": "^4.30.0",
     "@vitejs/plugin-vue": "^1.6.0",
     "@vitejs/plugin-vue-jsx": "^1.1.7",
-    "@vue/compiler-sfc": "^3.2.6",
+    "@vue/compiler-sfc": "^3.2.8",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "autoprefixer": "^10.2.4",
@@ -79,7 +81,7 @@
     "rimraf": "^3.0.2",
     "sass": "^1.38.0",
     "sass-loader": "^12.1.0",
-    "typescript": "^4.2.4",
+    "typescript": "^4.4.2",
     "vite": "^2.5.3",
     "vite-plugin-element-plus": "^0.0.12",
     "vite-plugin-mock": "^2.9.6",

src/directives/elResizeDetector/index.ts

@@ -0,0 +1,28 @@
+import { Directive } from "vue";
+import type { DirectiveBinding } from "vue";
+import elementResizeDetectorMaker from "element-resize-detector";
+import type { Erd } from "element-resize-detector";
+import { emitter } from "/@/utils/mitt";
+
+const erd: Erd = elementResizeDetectorMaker({
+  strategy: "scroll"
+});
+
+export const resize: Directive = {
+  mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: any) {
+    erd.listenTo(el, elem => {
+      const width = elem.offsetWidth;
+      const height = elem.offsetHeight;
+      if (binding?.instance) {
+        emitter.emit("resize", { detail: { width, height } });
+      } else {
+        vnode.el.dispatchEvent(
+          new CustomEvent("resize", { detail: { width, height } })
+        );
+      }
+    });
+  },
+  unmounted(el: HTMLElement) {
+    erd.uninstall(el);
+  }
+};

src/directives/index.ts

@@ -1 +1,2 @@
 export * from "./permission";
+export * from "./elResizeDetector";

src/directives/permission/index.ts

@@ -1,8 +1,9 @@
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import { Directive } from "vue";
+import type { DirectiveBinding } from "vue";
 
 export const auth: Directive = {
-  mounted(el, binding) {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
     const { value } = binding;
     if (value) {
       const authRoles = value;

src/layout/components/Navbar.vue

@@ -89,8 +89,8 @@ export default defineComponent({
     }
   },
   setup() {
-    // eslint-disable-next-line no-unused-vars
-    let vm: any;
+    const instance =
+      getCurrentInstance().appContext.config.globalProperties.$storage;
     const pureApp = useAppStoreHook();
     const router = useRouter();
     const route = useRoute();
@@ -101,13 +101,13 @@ export default defineComponent({
 
     // 国际化语言切换
     const toggleLang = (): void => {
-      switch (vm.locale.locale) {
+      switch (instance.locale.locale) {
         case "zh":
-          vm.locale = { locale: "en" };
+          instance.locale = { locale: "en" };
           locale.value = "en";
           break;
         case "en":
-          vm.locale = { locale: "zh" };
+          instance.locale = { locale: "zh" };
           locale.value = "zh";
           break;
       }
@@ -136,8 +136,6 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      vm = getCurrentInstance().appContext.config.globalProperties.$storage;
       document
         .querySelector(".el-dropdown__popper")
         ?.setAttribute("class", "resetTop");

src/views/components/count-to/index.vue

@@ -32,6 +32,7 @@
 
 <script lang="ts">
 import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
+
 export default {
   name: "reCountTo",
   components: {

src/views/components/cropping/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { ref, onBeforeMount, nextTick, getCurrentInstance } from "vue";
+import { ref, nextTick, getCurrentInstance } from "vue";
 import Cropper from "/@/components/ReCropper";
 import img from "./picture.jpeg";
 

types/shims-vue.d.ts

@@ -1,5 +1,5 @@
 declare module "*.vue" {
-  import type { DefineComponent } from "vue";
+  import { DefineComponent } from "vue";
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }