chore: upgrade eslint to 8.x & fix rules

.eslintrc.js

@@ -26,7 +26,6 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:vue/vue3-recommended',
     'plugin:prettier/recommended',
-    'plugin:tailwindcss/recommended',
   ],
   plugins: ['simple-import-sort'],
   rules: {
@@ -45,7 +44,6 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': 0,
     '@typescript-eslint/consistent-type-imports': 1,
     '@typescript-eslint/no-non-null-assertion': 0,
-    'tailwindcss/no-custom-classname': 0,
   },
   ignorePatterns: [
     'dist',

.prettierrc.js

 module.exports = {
   arrowParens: 'always',
   bracketSpacing: true,
-  jsxBracketSameLine: false,
+  bracketSameLine: false,
   jsxSingleQuote: false,
   printWidth: 80,
   quoteProps: 'as-needed',

package.json

@@ -33,18 +33,17 @@
     "@babel/preset-typescript": "^7.15.0",
     "@types/canvas-confetti": "^1.4.2",
     "@types/jest": "^27.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/parser": "^5.2.0",
     "@vitejs/plugin-vue": "^1.9.2",
     "@vue/compiler-sfc": "^3.2.19",
     "babel-jest": "^27.2.5",
-    "eslint": "^7.32.0",
+    "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-tailwindcss": "^1.16.0",
-    "eslint-plugin-vue": "^7.18.0",
+    "eslint-plugin-vue": "^8.0.3",
     "husky": "^7.0.2",
     "jest": "^27.2.5",
     "lint-staged": "^11.1.2",

src/App.vue

@@ -17,7 +17,7 @@
               />
             </div>
 
-            <ActionBar @actionHandler="handleAction" />
+            <ActionBar @action="handleAction" />
 
             <div class="action-group">
               <button class="action-randomize" @click="handleGenerate">
@@ -48,7 +48,7 @@
           />
         </div>
 
-        <Confetti />
+        <ConfettiCanvas />
 
         <div class="gradient-bg">
           <div class="gradient-top"></div>
@@ -93,7 +93,7 @@ import {
 } from '@/utils/constant'
 import { recordEvent } from '@/utils/ga'
 
-import Confetti from './components/Confetti.vue'
+import ConfettiCanvas from './components/ConfettiCanvas.vue'
 
 const store = useStore()
 

src/components/ActionBar.vue

@@ -6,7 +6,7 @@
       class="menu-item"
       :class="{ disabled: ac.disabled }"
       :title="ac.tip"
-      @click="emit('actionHandler', ac.type)"
+      @click="emit('action', ac.type)"
     >
       <img :src="ac.icon" :alt="ac.tip" />
     </div>
@@ -25,7 +25,7 @@ import { ActionType } from '@/enums'
 import { useStore } from '@/store'
 
 const emit = defineEmits<{
-  (e: 'actionHandler', actionType: ActionType): void
+  (e: 'action', actionType: ActionType): void
 }>()
 
 const { t } = useI18n()

src/components/VueColorAvatar.vue

@@ -14,6 +14,12 @@
   </div>
 </template>
 
+<script lang="ts">
+export interface VueColorAvatarRef {
+  avatarRef: HTMLDivElement
+}
+</script>
+
 <script lang="ts" setup>
 import { ref, toRefs, watchEffect } from 'vue'
 
@@ -25,7 +31,7 @@ import { widgetData } from '@/utils/dynamic-data'
 
 import Background from './widgets/Background.vue'
 
-export interface VueColorAvatarProps {
+interface VueColorAvatarProps {
   option: AvatarOption
   size?: number
 }
@@ -37,10 +43,6 @@ const props = withDefaults(defineProps<VueColorAvatarProps>(), {
 
 const { option: avatarOption, size: avatarSize } = toRefs(props)
 
-export interface VueColorAvatarRef {
-  avatarRef: HTMLDivElement
-}
-
 const avatarRef = ref<VueColorAvatarRef['avatarRef']>()
 
 defineExpose({ avatarRef })