feat: その他パッケージのアップデート & Lint fix

Author: NEKOYASAN

.eslintrc.js

@@ -5,12 +5,20 @@ module.exports = {
     '@nuxtjs/eslint-config-typescript',
     'plugin:prettier/recommended',
     'prettier',
-    'prettier/vue',
   ],
   rules: {
     'require-await': 'off',
     'nuxt/no-cjs-in-config': 'off',
     'vue/max-attributes-per-line': 'off',
+    'vue/experimental-script-setup-vars': 'off',
+    'vue/no-arrow-functions-in-watch': 'off',
+    'vue/no-custom-modifiers-on-v-model': 'off',
+    'vue/no-dupe-v-else-if': 'off',
+    'vue/no-multiple-template-root': 'off',
+    'vue/no-mutating-props': 'off',
+    'vue/no-v-for-template-key': 'off',
+    'vue/no-v-model-argument': 'off',
+    'vue/one-component-per-file': 'off',
     'vue/html-self-closing': [
       'error',
       {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "StudyAtHome",
+  "name": "study-at-home",
   "version": "1.0.0",
   "description": "Ouchi De Jikanwari Web Version",
   "author": "Nekoya3",
@@ -24,16 +24,16 @@
     }
   },
   "dependencies": {
-    "@aws-amplify/api": "^3.3.3",
+    "@aws-amplify/api": "^4.0.0",
     "@babel/core": "^7.14.3",
     "@babel/runtime-corejs3": "^7.14.0",
     "@nuxtjs/axios": "^5.13.4",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/style-resources": "^1.0.0",
-    "@types/node": "^14.14.45",
-    "aws-amplify": "^3.4.3",
+    "@types/node": "^15.3.0",
+    "aws-amplify": "^4.0.2",
     "core-js": "^3.12.1",
     "cross-env": "^7.0.3",
     "date-fns": "^2.21.3",
@@ -54,39 +54,42 @@
     "@mdi/font": "^5.9.55",
     "@nuxt/types": "^2.15.6",
     "@nuxt/typescript-build": "^2.1.0",
-    "@nuxtjs/eslint-config-typescript": "^3.0.0",
+    "@nuxtjs/eslint-config-typescript": "^6.0.0",
     "@nuxtjs/stylelint-module": "^4.0.0",
     "@types/jest": "^26.0.23",
     "@vue/test-utils": "^1.2.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
+    "consola": "^2.15.3",
     "cpx": "^1.5.0",
     "eslint": "^7.26.0",
-    "eslint-config-prettier": "^6.15.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-nuxt": "^1.0.0",
+    "eslint-plugin-nuxt": "^2.0.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-tsdoc": "^0.2.14",
     "fibers": "^5.0.0",
-    "husky": "^4.3.8",
+    "husky": "^6.0.0",
     "jest": "^26.6.3",
-    "lint-staged": "^10.5.4",
+    "lint-staged": "^11.0.0",
     "nodemon": "^2.0.7",
     "prettier": "^2.3.0",
     "rimraf": "^3.0.2",
     "sass": "^1.32.13",
     "sass-loader": "10.1.1",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^20.0.0",
+    "stylelint-config-standard": "^22.0.0",
     "stylelint-scss": "^3.19.0",
     "ts-jest": "^26.5.6",
     "ts-loader": "^8.2.0",
     "typescript": "4.0.5",
     "vue": "^2.6.12",
+    "vue-class-component": "^7.2.6",
     "vue-jest": "^3.0.7",
     "vue-server-renderer": "^2.6.12",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.6.12",
+    "webpack": "4.46.0"
   }
 }

src/components/BaseInputField.vue

@@ -14,10 +14,10 @@
     outlined
     @input="$emit('input', $event)"
   >
-    <template v-slot:prepend-inner>
+    <template #prepend-inner>
       <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
     </template>
-    <template v-slot:append>
+    <template #append>
       <v-icon
         color="blue"
         @click="show = !show"
@@ -40,7 +40,7 @@
     outlined
     @input="$emit('input', $event)"
   >
-    <template v-slot:prepend-inner>
+    <template #prepend-inner>
       <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
     </template>
   </v-text-field>
@@ -59,7 +59,7 @@
     outlined
     @input="$emit('input', $event)"
   >
-    <template v-slot:prepend-inner>
+    <template #prepend-inner>
       <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
     </template>
   </v-text-field>
@@ -78,7 +78,7 @@
     outlined
     @input="$emit('input', $event)"
   >
-    <template v-slot:prepend-inner>
+    <template #prepend-inner>
       <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
     </template>
   </v-text-field>

src/components/EditLessonScreen.vue

@@ -61,11 +61,6 @@ import EditLessonScreenInner3 from '@/components/EditLessonScreenInner3.vue'
 import EditLessonScreenInner4 from '@/components/EditLessonScreenInner4.vue'
 import classData from '@/types/store/classData'
 
-type stateType = {
-  error: boolean
-  lessonData: LessonDataType
-}
-
 type LessonDataType = {
   lessonId: string
   isHidden: boolean
@@ -85,6 +80,11 @@ type LessonDataType = {
   materialsUrl: string
 }
 
+type stateType = {
+  error: boolean
+  lessonData: LessonDataType
+}
+
 export default Vue.extend({
   components: {
     BaseActionButton,

src/components/EditingVisibilityDialog.vue

@@ -26,10 +26,10 @@
       ]"
       @click-outside="closeModal"
     >
-      <template v-slot:title>
+      <template #title>
         {{ modalTitle }}
       </template>
-      <template v-slot:default>
+      <template #default>
         <div class="EditingVisibilityModal-Contents">
           <p class="EditingVisibilityModal-Text">
             {{ date }} <br />
@@ -79,9 +79,6 @@ export default Vue.extend({
     value: {
       type: Object as () => classData.LessonWithId,
       required: true,
-      default: {
-        id: '',
-      },
     },
   },
   data(): LocalData {

src/components/PeriodSection.vue

@@ -45,7 +45,7 @@ export default Vue.extend({
     },
     classData: {
       type: Array as () => classData.LessonWithId[],
-      default: [],
+      default: () => [],
     },
     editable: {
       type: Boolean,

src/layouts/classes.vue

@@ -42,10 +42,10 @@
         },
       ]"
     >
-      <template v-slot:title>
+      <template #title>
         {{ $t('common.class_id_dialog.title') }}
       </template>
-      <template v-slot:default>
+      <template #default>
         <div class="ClassIdModal-Contents">
           <p class="ClassIdModal-ClassText">{{ className }}</p>
           <p class="ClassIdModal-Text">
@@ -74,7 +74,7 @@
           <v-icon>mdi-clipboard-account</v-icon>
         </v-btn>
       </div>
-      <template v-slot:extension>
+      <template #extension>
         <div class="header-calender">
           <CalendarBar
             v-model="app.currentDate"
@@ -111,14 +111,14 @@ type LocalData = {
 }
 
 export default Vue.extend({
-  middleware: 'checkClassData',
   components: {
     AppLanguageSelector,
     CalendarBar,
     BaseDialog,
     HeaderLogo,
     BaseActionButton,
   },
+  middleware: 'checkClassData',
   data(): LocalData {
     return {
       loading: true,

src/layouts/protected.vue

@@ -29,16 +29,16 @@
           ),
           action: () => {
             unloadClassData()
-            this.$router.push('/user/classlist')
+            $router.push('/user/classlist')
             return false
           },
         },
       ]"
     >
-      <template v-slot:title>
+      <template #title>
         {{ $t('common.class_id_dialog.title') }}
       </template>
-      <template v-slot:default>
+      <template #default>
         <div class="ClassIdModal-Contents">
           <p class="ClassIdModal-ClassText">{{ classData.className }}</p>
           <p class="ClassIdModal-Text">
@@ -77,7 +77,7 @@
           <v-icon>mdi-cog</v-icon>
         </v-btn>
       </div>
-      <template v-slot:extension>
+      <template #extension>
         <div class="header-calender">
           <CalendarBar
             v-model="app.currentDate"
@@ -112,14 +112,14 @@ type LocalData = {
 }
 
 export default Vue.extend({
-  middleware: ['authenticated', 'checkClassData'],
   components: {
     AppLanguageSelector,
     CalendarBar,
     BaseDialog,
     HeaderLogo,
     BaseActionButton,
   },
+  middleware: ['authenticated', 'checkClassData'],
   data(): LocalData {
     return {
       loading: true,

src/pages/classes/index.vue

@@ -32,16 +32,17 @@ import PeriodSection from '@/components/PeriodSection.vue'
 type Data = {
   classData: typeof vxm.classData
 }
-
+/*
 type Computed = {
   today: boolean
   dateTitle: string
 }
+*/
 
 export default Vue.extend({
   components: { PeriodSection },
   layout: 'classes',
-  data() {
+  data(): Data {
     return {
       classData: vxm.classData,
     }

src/pages/classes/terms.vue

@@ -53,9 +53,7 @@ export default Vue.extend({
   },
   computed: {
     isCheck(): boolean {
-      return this.toggle.some((value) => {
-        return value === 'check'
-      })
+      return Boolean(this.toggle.length)
     },
   },
   methods: {