update node ver

client/.tool-versions

@@ -1 +1 @@
-nodejs 14.17.1
+nodejs 18.4.0

client/Dockerfile

@@ -1,5 +1,5 @@
 # ビルド環境
-FROM node:14-alpine as build
+FROM node:18-alpine as build
 WORKDIR /app
 # https://github.com/docker/getting-started/issues/124
 RUN apk --no-cache add \

client/package.json

@@ -12,61 +12,59 @@
     "gen-apis": "node scripts/generate-apis.js"
   },
   "dependencies": {
-    "@traptitech/traq": "^3.7.5-4",
+    "@traptitech/traq": "^3.10.1-5",
     "@types/chroma-js": "^2.1.3",
     "amcharts3": "^3.21.15",
     "ammap3": "^3.21.15",
-    "axios": "^0.21.1",
-    "chart.js": "^2.9.4",
-    "chroma-js": "^2.1.2",
-    "core-js": "^3.6.5",
+    "axios": "^0.27.2",
+    "chroma-js": "^2.4.2",
+    "core-js": "^3.23.3",
     "direct-vuex": "^1.0.0-rc3",
-    "epic-spinners": "^1.1.0",
     "flag-icon-css": "^3.5.0",
     "font-awesome": "^4.7.0",
     "google-maps": "^4.3.3",
-    "ionicons": "^4.6.3",
-    "leaflet": "^1.7.1",
+    "ionicons": "^4.0.0",
+    "leaflet": "^1.8.0",
     "leaflet-map": "^0.2.1",
     "medium-editor": "^5.23.3",
-    "register-service-worker": "^1.7.1",
-    "vue": "^3.0.0",
-    "vue-chart-3": "^0.4.1",
-    "vue-chartjs": "^3.5.1",
+    "register-service-worker": "^1.7.2",
+    "vue": "^3.2.37",
+    "vue-chart-3": "^3.1.8",
+    "vue-chartjs": "^4.1.1",
     "vue-gtm": "^3.2.1",
-    "vue-i18n": "^9.0.0",
+    "vue-i18n": "^9.1.10",
     "vue-jest": "^5.0.0-alpha.10",
-    "vue-router": "^4.0.0-0",
-    "vue-yandex-maps": "^0.10.9",
-    "vue3-chart-v2": "^0.8.2",
-    "vuestic-ui": "^1.1.0",
-    "vuex": "^4.0.0-0"
+    "vue-router": "^4.0.16",
+    "vue-spinner": "^1.0.4",
+    "vue-yandex-maps": "^0.11.9",
+    "vuestic-ui": "^1.4.4",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@openapitools/openapi-generator-cli": "^2.3.5",
-    "@types/jest": "^24.0.19",
-    "@types/medium-editor": "^5.0.3",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-pwa": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "@vue/test-utils": "^2.0.0-0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0-0",
-    "lint-staged": "^9.5.0",
-    "sass": "^1.52.3",
-    "sass-loader": "^7.3.1",
-    "ts-morph": "^11.0.0",
-    "typescript": "~3.9.3",
-    "webpack": "^4.46.0"
+    "@openapitools/openapi-generator-cli": "^2.5.1",
+    "@types/jest": "^28.1.3",
+    "@types/medium-editor": "^5.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
+    "@vue/cli-plugin-babel": "^5.0.6",
+    "@vue/cli-plugin-eslint": "^5.0.6",
+    "@vue/cli-plugin-pwa": "^5.0.6",
+    "@vue/cli-plugin-router": "^5.0.6",
+    "@vue/cli-plugin-typescript": "^5.0.6",
+    "@vue/cli-plugin-unit-jest": "^5.0.6",
+    "@vue/cli-plugin-vuex": "^5.0.6",
+    "@vue/cli-service": "^5.0.6",
+    "@vue/compiler-sfc": "^3.2.37",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/test-utils": "^2.0.0",
+    "eslint": "^8.18.0",
+    "eslint-plugin-vue": "^9.1.1",
+    "lint-staged": "^13.0.3",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2",
+    "ts-morph": "^15.1.0",
+    "typescript": "^4.7.4",
+    "webpack": "^5.73.0"
   },
   "lint-staged": {
     "*.{js,jsx,vue,ts,tsx}": [

client/src/main.ts

@@ -25,7 +25,7 @@ app.use(store.original)
 app.use(router)
 if (process.env.VUE_APP_GTM_ENABLED === 'true') {
   const gtmConfig = {
-    id: process.env.VUE_APP_GTM_KEY,
+    id: process.env.VUE_APP_GTM_KEY ?? '',
     debug: false,
     vueRouter: router
   }

client/src/pages/admin/tables/data-tables/scenarios/DataTableInfiniteScroll.vue

@@ -13,9 +13,8 @@
       </va-data-table>
 
       <div class="flex-center ma-3">
-        <spring-spinner
+        <pulse-loader
           v-if="loading"
-          :animation-duration="2000"
           :size="60"
           :color="theme.primary"
         />
@@ -25,13 +24,13 @@
 </template>
 
 <script>
-import { SpringSpinner } from 'epic-spinners'
+import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
 import users from '../data/users.json'
 import { useGlobalConfig } from 'vuestic-ui'
 
 export default {
   components: {
-    SpringSpinner,
+    PulseLoader,
   },
   data () {
     return {

client/src/pages/admin/ui/route.ts

@@ -73,11 +73,11 @@ export default {
         },
       ],
     },
-    {
-      name: 'spinners',
-      path: 'spinners',
-      component: () => import('@/pages/admin/ui/spinners/Spinners.vue'),
-    },
+    // {
+    //   name: 'spinners',
+    //   path: 'spinners',
+    //   component: () => import('@/pages/admin/ui/spinners/Spinners.vue'),
+    // },
     {
       name: 'grid',
       path: 'grid',

client/src/sass/icon-fonts/ionicons/ionicons.scss

@@ -1,3 +1,3 @@
 // NOTE you need to install ionicons@^4.0.0
 $ionicons-font-path: "~ionicons/dist/fonts";
-@import "ionicons/dist/scss/ionicons";
+@import "ionicons/dist/scss/ionicons";

client/src/services/vuestic-ui/themes.ts

@@ -1,5 +1,5 @@
 import { ref, computed } from 'vue'
-import { mergeGlobalConfig } from 'vuestic-ui'
+import { useGlobalConfig } from 'vuestic-ui'
 
 export const THEME_NAMES = {
   LIGHT: 'LIGHT',
@@ -158,10 +158,12 @@ export const useTheme = () => {
       throw new Error('Theme not found')
     }
 
-    mergeGlobalConfig({
+    const providedGlobalConfig = useGlobalConfig()
+
+    providedGlobalConfig.globalConfig.value = {
       colors: theme.colors,
       components: theme.components
-    })
+    }
   }
 
   const theme = computed(() =>