Merge branch 'development' into translations_src-assets-locales-ja-json--development_zh_TW

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',
       {

.github/dependabot.yml

@@ -0,0 +1,75 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "20:00"
+  open-pull-requests-limit: 10
+  ignore:
+  - dependency-name: "@types/node"
+    versions:
+    - 14.14.22
+    - 14.14.25
+    - 14.14.27
+    - 14.14.28
+    - 14.14.31
+    - 14.14.32
+    - 14.14.33
+    - 14.14.34
+    - 14.14.35
+    - 14.14.36
+    - 14.14.37
+    - 14.14.39
+    - 14.14.41
+    - 15.0.0
+  - dependency-name: "@babel/core"
+    versions:
+    - 7.12.10
+    - 7.12.13
+    - 7.12.16
+    - 7.12.17
+    - 7.13.1
+    - 7.13.10
+    - 7.13.14
+    - 7.13.15
+    - 7.13.16
+    - 7.13.8
+  - dependency-name: eslint-config-prettier
+    versions:
+    - 7.2.0
+    - 8.0.0
+    - 8.1.0
+    - 8.2.0
+  - dependency-name: nuxt-i18n
+    versions:
+    - 6.18.0
+    - 6.19.0
+    - 6.20.0
+    - 6.20.1
+    - 6.20.2
+    - 6.20.3
+    - 6.20.4
+    - 6.20.6
+    - 6.21.0
+    - 6.21.1
+    - 6.22.1
+    - 6.22.2
+    - 6.22.3
+    - 6.23.0
+    - 6.24.0
+    - 6.25.0
+  - dependency-name: y18n
+    versions:
+    - 4.0.1
+  - dependency-name: "@types/jest"
+    versions:
+    - 26.0.20
+    - 26.0.21
+    - 26.0.22
+  - dependency-name: node-notifier
+    versions:
+    - 8.0.1
+  - dependency-name: lint-staged
+    versions:
+    - 10.5.3

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

nuxt-i18n.config.js

@@ -15,16 +15,19 @@ const options = {
       code: 'ja',
       displayName: '日本語',
       file: 'ja.json',
+      format: 'ja',
     },
     {
       code: 'en',
       displayName: 'English',
       file: 'en.json',
+      format: 'en',
     },
     {
       code: 'zh-goyu',
       displayName: '台灣華語',
       file: 'zh_TW.json',
+      format: 'zh-tw',
     },
   ],
 }

nuxt.config.js

@@ -1,3 +1,5 @@
+import Sass from 'sass'
+import Fiber from 'fibers'
 import i18nConfig from './nuxt-i18n.config.js'
 const environment = process.env.NODE_ENV || 'development'
 
@@ -122,7 +124,14 @@ export default {
     'nuxt-svg-loader',
     ['nuxt-i18n', i18nConfig],
     ['@nuxtjs/google-analytics', { id: process.env.GAID }],
+    '@nuxtjs/dayjs',
   ],
+  dayjs: {
+    locales: ['ja', 'en', 'zh-tw'],
+    defaultLocale: 'ja',
+    defaultTimeZone: 'Asia/Tokyo',
+    plugins: ['utc', 'timezone', 'minMax', 'isToday', 'localizedFormat'],
+  },
   /*
    ** Axios module configuration
    ** See https://axios.nuxtjs.org/options
@@ -152,6 +161,14 @@ export default {
    */
   build: {
     publicPath: '/assets/',
+    loaders: {
+      scss: {
+        implementation: Sass,
+        sassOptions: {
+          fiber: Fiber,
+        },
+      },
+    },
     babel: {
       presets({ isServer }) {
         return [

package.json

@@ -1,16 +1,17 @@
 {
-  "name": "StudyAtHome",
+  "name": "study-at-home",
   "version": "1.0.0",
   "description": "Ouchi De Jikanwari Web Version",
   "author": "Nekoya3",
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development nuxt-ts",
-    "build": "nuxt-ts build",
+    "dev": "cross-env NODE_ENV=development nuxt",
+    "build": "nuxt build",
     "test:unit": "jest --config jest.config.js",
-    "start": "nuxt-ts start",
-    "generate": "nuxt-ts generate",
-    "lint": "eslint --ext .js,.vue,.ts --ignore-path .eslintignore ."
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "lint": "eslint --ext .js,.vue,.ts --ignore-path .eslintignore .",
+    "prepare": "husky install"
   },
   "lint-staged": {
     "*.{js,ts,css,vue}": [
@@ -24,68 +25,71 @@
     }
   },
   "dependencies": {
-    "@aws-amplify/api": "^3.2.7",
-    "@babel/core": "^7.12.1",
-    "@babel/runtime-corejs3": "^7.12.1",
-    "@nuxt/typescript-runtime": "^2.0.0",
-    "@nuxtjs/axios": "^5.12.2",
+    "@aws-amplify/api": "^4.0.0",
+    "@babel/core": "^7.14.3",
+    "@babel/runtime-corejs3": "^7.14.0",
+    "@nuxtjs/axios": "^5.13.4",
+    "@nuxtjs/dayjs": "^1.4.0",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/google-analytics": "^2.4.0",
-    "@nuxtjs/pwa": "^3.2.2",
+    "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/style-resources": "^1.0.0",
-    "@types/node": "^14.11.8",
-    "aws-amplify": "^3.3.4",
-    "core-js": "^3.6.5",
-    "cross-env": "^7.0.2",
-    "date-fns": "^2.16.1",
-    "dayjs": "^1.9.3",
+    "@types/node": "^15.3.0",
+    "aws-amplify": "^4.0.2",
+    "core-js": "^3.12.1",
+    "cross-env": "^7.0.3",
     "express": "^4.17.1",
-    "nuxt": "^2.14.7",
-    "nuxt-i18n": "^6.15.3",
-    "nuxt-property-decorator": "^2.8.8",
+    "nuxt": "^2.15.6",
+    "nuxt-i18n": "^6.27.0",
+    "nuxt-property-decorator": "^2.9.1",
     "nuxt-svg-loader": "^1.2.0",
     "nuxt-webfontloader": "^1.1.0",
-    "uuid": "^8.3.1",
-    "vue-property-decorator": "^9.0.2",
-    "vuetify": "^2.3.14",
-    "vuex": "^3.5.1",
+    "uuid": "^8.3.2",
+    "vue-property-decorator": "^9.1.2",
+    "vuetify": "^2.5.0",
+    "vuex": "^3.6.2",
     "vuex-class-component": "^2.3.5"
   },
   "devDependencies": {
-    "@mdi/font": "^5.7.55",
-    "@nuxt/types": "^2.14.7",
-    "@nuxt/typescript-build": "^2.0.3",
-    "@nuxtjs/eslint-config-typescript": "^3.0.0",
+    "@mdi/font": "^5.9.55",
+    "@nuxt/types": "^2.15.6",
+    "@nuxt/typescript-build": "^2.1.0",
+    "@nuxtjs/eslint-config-typescript": "^6.0.0",
     "@nuxtjs/stylelint-module": "^4.0.0",
-    "@types/jest": "^26.0.14",
-    "@vue/test-utils": "^1.1.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.5.2",
+    "babel-jest": "^26.6.3",
+    "consola": "^2.15.3",
     "cpx": "^1.5.0",
-    "eslint": "^7.11.0",
-    "eslint-config-prettier": "^6.12.0",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-nuxt": "^1.0.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-tsdoc": "^0.2.7",
-    "husky": "^4.3.0",
-    "jest": "^26.5.3",
-    "lint-staged": "^10.4.0",
-    "node-sass": "^4.14.1",
-    "nodemon": "^2.0.5",
-    "prettier": "^2.1.2",
+    "eslint-plugin-nuxt": "^2.0.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-tsdoc": "^0.2.14",
+    "fibers": "^5.0.0",
+    "husky": "^6.0.0",
+    "jest": "^26.6.3",
+    "lint-staged": "^11.0.0",
+    "nodemon": "^2.0.7",
+    "prettier": "^2.3.0",
     "rimraf": "^3.0.2",
-    "sass-loader": "^10.0.3",
-    "stylelint": "^13.7.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-scss": "^3.18.0",
-    "ts-jest": "^26.4.1",
-    "ts-loader": "^8.0.5",
+    "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/AppLanguageSelector.vue

@@ -15,23 +15,29 @@
 <script lang="ts">
 import Vue from 'vue'
 
-type LocaleListItem = { text: string; value: string }
+type LocaleListItem = { text: string; value: string; format: string }
 type LocalData = {
   locales: LocaleListItem[]
 }
 
 export default Vue.extend({
   data(): LocalData {
     if (!this.$root.$i18n.locales)
-      return { locales: [{ text: 'N/A', value: '' }] }
+      return { locales: [{ text: 'N/A', value: '', format: '' }] }
 
     return {
+      // @ts-ignore
       locales: this.$root.$i18n.locales.map((l) => {
-        if (typeof l === 'string') return { text: l, value: l }
-        else return { text: l.displayName, value: l.code }
+        if (typeof l === 'string') return { text: l, value: l, format: l }
+        else return { text: l.displayName, value: l.code, format: l.format }
       }),
     }
   },
+  watch: {
+    '$root.$i18n.locale'(locale) {
+      this.$dayjs.locale(this.locales?.find((v) => v.value === locale)?.format)
+    },
+  },
 })
 </script>
 

src/components/BaseInputField.vue

@@ -14,10 +14,12 @@
     outlined
     @input="$emit('input', $event)"
   >
-    <template v-slot:prepend-inner>
-      <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
+    <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,8 +42,10 @@
     outlined
     @input="$emit('input', $event)"
   >
-    <template v-slot:prepend-inner>
-      <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
+    <template #prepend-inner>
+      <v-icon :color="prependIconColor">
+        {{ prependIcon }}
+      </v-icon>
     </template>
   </v-text-field>
   <v-text-field
@@ -59,8 +63,10 @@
     outlined
     @input="$emit('input', $event)"
   >
-    <template v-slot:prepend-inner>
-      <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
+    <template #prepend-inner>
+      <v-icon :color="prependIconColor">
+        {{ prependIcon }}
+      </v-icon>
     </template>
   </v-text-field>
   <v-text-field
@@ -78,8 +84,10 @@
     outlined
     @input="$emit('input', $event)"
   >
-    <template v-slot:prepend-inner>
-      <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
+    <template #prepend-inner>
+      <v-icon :color="prependIconColor">
+        {{ prependIcon }}
+      </v-icon>
     </template>
   </v-text-field>
 </template>