feat: script setup style

* Replace jsx with script setup syntax
* Simplify logic and make it more "composable"
    * Move Zoom functions to useZoom composable
* Update eslint config & tsconfig

.eslintrc.js

@@ -1,42 +1,9 @@
 const baseRules = {
-  '@typescript-eslint/no-explicit-any': 0,
-  '@typescript-eslint/ban-ts-ignore': 0,
-  '@typescript-eslint/ban-ts-comment': 0,
-  '@typescript-eslint/no-empty-function': 0,
-  '@typescript-eslint/explicit-module-boundary-types': 0,
-  'no-use-before-define': 0,
-  'no-unused-vars': 'off',
-  '@typescript-eslint/no-unused-vars': ['warn'],
-  indent: ['warn', 2, { SwitchCase: 1, flatTernaryExpressions: true }],
-  quotes: ['error', 'single', { avoidEscape: true }],
-  'import/no-mutable-exports': 0,
-  'no-cond-assign': [2],
-  'no-console': 'off',
-  camelcase: 0,
-  '@typescript/camelcase': 0,
-  'vue/no-v-html': 'off',
-  'vue/attribute-hyphenation': 0,
-  'no-undef': 'off',
-  'prettier/prettier': ['error', {}, { usePrettierrc: true }]
+  'prettier/prettier': ['error', {}, { usePrettierrc: true }],
 }
 
 module.exports = {
-  root: true,
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true
-    }
-  },
-  env: {
-    node: true,
-    commonjs: true,
-    es6: true,
-    browser: true
-  },
-  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', '@vue/typescript/recommended', 'plugin:prettier/recommended'],
-  plugins: [],
-  rules: baseRules
+  extends: ['@antfu', 'plugin:prettier/recommended'],
+  plugins: ['prettier'],
+  rules: baseRules,
 }

.prettierrc

@@ -1,8 +1,8 @@
 {
   "singleQuote": true,
-  "trailingComma": "none",
+  "trailingComma": "all",
   "semi": false,
+  "quoteProps": "consistent",
   "bracketSpacing": true,
-  "vueIndentScriptAndStyle": false,
   "printWidth": 130
 }

package.json

@@ -45,6 +45,7 @@
     "pinia": "^2.0.0-rc.13"
   },
   "devDependencies": {
+    "@antfu/eslint-config": "^0.9.0",
     "@babel/core": "^7.15.8",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.2",
@@ -79,6 +80,7 @@
     "vite": "^2.6.7",
     "vite-svg-loader": "^2.2.0",
     "vue": "^3.2.20",
+    "vue-eslint-parser": "^7.11.0",
     "vue-router": "^4.0.12",
     "vue-tsc": "^0.2.3"
   },