Migration to vue3 (playground)

common/eslint-local-rules/__tests__/packageDirectory.spec.js

@@ -1,4 +1,4 @@
-import factory from '../packageDirectory.js'
+import factory from '../packageDirectory.cjs'
 import path from 'path'
 import fs from 'fs'
 

common/eslint-local-rules/matchingTranslationKeys.js → common/eslint-local-rules/matchingTranslationKeys.cjs

@@ -1,5 +1,5 @@
 module.exports = (path, utils, fs) => {
-  const { packageDirectory } = require('./packageDirectory.js')(path, fs)
+  const { packageDirectory } = require('./packageDirectory.cjs')(path, fs)
 
   /**
    * Convert a file path to our convention for translation key structures

frontend/eslint-local-rules.cjs

@@ -0,0 +1,8 @@
+const path = require('path')
+const fs = require('fs')
+const utils = require('eslint-plugin-vue/lib/utils/index.js')
+const matchingTranslationKeys = require('./src/common/eslint-local-rules/matchingTranslationKeys.cjs')
+
+module.exports = {
+  // 'matching-translation-keys': matchingTranslationKeys(path, utils, fs),
+}

frontend/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@ecamp3/frontend",
   "private": true,
+  "type": "module",
   "scripts": {
     "serve": "vite --host 0.0.0.0",
     "preview": "vite preview --host 0.0.0.0 --port 3000",
     "build": "vite build",
     "lint": "npm run lint:eslint && npm run lint:prettier",
-    "lint:eslint": "vue-cli-service lint",
+    "lint:eslint": "eslint . --ext .vue,.js --fix --ignore-path .gitignore",
     "lint:prettier": "prettier --write --ignore-path .prettierignore **/*.{css,scss,json,md}",
     "lint:check": "npm run lint:check:eslint && npm run lint:check:prettier",
-    "lint:check:eslint": "vue-cli-service lint --no-fix",
+    "lint:check:eslint": "eslint . --ext .vue,.js --no-fix --ignore-path .gitignore",
     "lint:check:prettier": "prettier --check --ignore-path .prettierignore **/*.{css,scss,json,md}",
     "start": "vite --host 0.0.0.0",
     "dev": "vite --host 0.0.0.0",
@@ -44,7 +45,9 @@
     "@tiptap/extension-strike": "2.1.13",
     "@tiptap/extension-text": "2.1.13",
     "@tiptap/extension-underline": "2.1.13",
-    "@tiptap/vue-2": "2.1.13",
+    "@tiptap/vue-3": "2.1.13",
+    "@vee-validate/i18n": "4.12.4",
+    "@vee-validate/rules": "4.12.4",
     "@zxcvbn-ts/core": "3.0.4",
     "@zxcvbn-ts/language-common": "3.0.4",
     "@zxcvbn-ts/language-de": "3.0.2",
@@ -59,7 +62,7 @@
     "deepmerge": "4.3.1",
     "emoji-regex": "10.3.0",
     "file-saver": "2.0.5",
-    "hal-json-vuex": "2.0.0-alpha.16",
+    "hal-json-vuex": "3.0.0-alpha.1",
     "inter-ui": "3.19.3",
     "js-cookie": "3.0.5",
     "lodash": "4.17.21",
@@ -69,31 +72,36 @@
     "util": "0.12.5",
     "uuid": "9.0.1",
     "v-resize-observer": "2.1.0",
-    "vee-validate": "3.4.15",
-    "vue": "2.7.15",
+    "vee-validate": "4.12.4",
+    "vue": "3.3.13",
     "vue-axios": "3.5.2",
-    "vue-i18n": "8.28.2",
-    "vue-recaptcha-v3": "1.9.0",
-    "vue-router": "3.6.5",
-    "vue-toastification": "1.7.14",
+    "vue-i18n": "9.8.0",
+    "vue-recaptcha-v3": "2.0.1",
+    "vue-router": "4.2.5",
+    "vue-toastification": "2.0.0-rc.5",
     "vuedraggable": "2.24.3",
-    "vuetify": "2.7.1",
-    "vuex": "3.6.2",
+    "vuetify": "3.4.9",
+    "vuex": "4.1.0",
     "xlsx": "0.18.5"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.23.3",
     "@sentry/vite-plugin": "2.10.2",
     "@testing-library/jest-dom": "6.1.6",
     "@testing-library/user-event": "14.5.2",
-    "@testing-library/vue": "5.9.0",
-    "@vitejs/plugin-vue2": "2.3.1",
+    "@testing-library/vue": "8.0.1",
+    "@vitejs/plugin-vue": "5.0.2",
     "@vitest/coverage-v8": "1.1.0",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",
+    "@vue/compiler-dom": "3.3.13",
+    "@vue/compiler-sfc": "3.3.13",
     "@vue/eslint-config-prettier": "9.0.0",
-    "@vue/test-utils": "1.3.6",
+    "@vue/runtime-dom": "3.3.13",
+    "@vue/server-renderer": "3.3.13",
+    "@vue/shared": "3.3.13",
+    "@vue/test-utils": "2.4.3",
     "babel-plugin-require-context-hook": "1.0.0",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
@@ -103,20 +111,21 @@
     "eslint-plugin-prettier": "5.1.2",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-vue": "9.19.2",
+    "eslint-plugin-vuetify": "^2.1.1",
     "flush-promises": "1.0.2",
     "jest-serializer-vue-tjw": "3.20.0",
     "jsdom": "23.0.1",
     "lint-staged": "15.2.0",
     "prettier": "3.1.1",
-    "sass": "1.32.13",
+    "sass": "1.69.6",
     "unplugin-vue-components": "0.26.0",
     "vite": "5.0.10",
     "vite-plugin-comlink": "3.0.5",
-    "vite-plugin-vue2-svg": "0.4.0",
+    "vite-plugin-svg4vue": "3.1.0",
+    "vite-plugin-vuetify": "2.0.1",
     "vitest": "1.1.0",
     "vitest-canvas-mock": "0.3.3",
-    "vue-cli-plugin-vuetify": "2.5.8",
-    "vue-template-compiler": "2.7.15"
+    "vue-cli-plugin-vuetify": "2.5.8"
   },
   "eslintConfig": {
     "root": true,
@@ -125,7 +134,8 @@
       "jest": true
     },
     "extends": [
-      "plugin:vue/recommended",
+      "plugin:vue/vue3-recommended",
+      "plugin:vuetify/base",
       "eslint:recommended",
       "plugin:prettier/recommended",
       "@vue/eslint-config-prettier"
@@ -149,19 +159,13 @@
           "argsIgnorePattern": "^_$"
         }
       ],
-      "local-rules/matching-translation-keys": [
-        "error",
-        {
-          "ignoreKeysRegex": "^(global|entity|contentNode\\.[a-z][a-zA-Z]+|print\\.(global|activity|cover|picasso|program|story|toc))\\..+",
-          "translationKeyPropRegex": "[a-zA-Z0-9]-i18n-key$"
-        }
-      ],
       "vue/no-mutating-props": [
-        "error",
+        "off",
         {
           "shallowOnly": false
         }
-      ]
+      ],
+      "vuetify/no-deprecated-slots": "off"
     },
     "parserOptions": {
       "parser": "@babel/eslint-parser"
@@ -193,4 +197,4 @@
       "git add"
     ]
   }
-}
+}

frontend/src/App.vue

@@ -10,7 +10,7 @@
     </v-main>
 
     <!-- footer -->
-    <v-footer v-if="$vuetify.breakpoint.mdAndUp" app color="grey lighten-5">
+    <v-footer v-if="$vuetify.display.mdAndUp" app color="grey-lighten-5">
       <small
         >eCamp
         <a v-if="version" :href="versionLink" target="_blank">
@@ -61,18 +61,20 @@ export default {
       const user = await this.$auth.loadUser()
       const profile = await user.profile()._meta.load
 
-      if (VueI18n.availableLocales.includes(profile.language)) {
+      if (VueI18n.global.availableLocales.includes(profile.language)) {
         this.$store.commit('setLanguage', profile.language)
       }
     }
   },
 }
 </script>
 <style lang="scss">
-@import 'src/scss/global';
+// @import 'src/scss/vuetify';
+// @import 'src/scss/global';
+@use 'src/scss/variables';
 @import '~@mdi/font/css/materialdesignicons.css';
 
-@media #{map-get($display-breakpoints, 'xs-only')} {
+@media #{map-get(variables.$display-breakpoints, 'xs')} {
   html,
   body,
   .v-application {
@@ -122,7 +124,7 @@ export default {
   border-top-right-radius: 0 !important;
 }
 
-@media #{map-get($display-breakpoints, 'xs-only')} {
+@media #{map-get(variables.$display-breakpoints, 'xs')} {
   .v-main > .v-main__wrap > .container {
     min-height: 100%;
     display: flex;
@@ -140,7 +142,7 @@ export default {
   font-feature-settings: 'tnum';
 }
 
-@media #{map-get($display-breakpoints, 'sm-and-down')} {
+@media #{map-get(variables.$display-breakpoints, 'sm-and-down')} {
   // TODO: this changes look & feel of all v-containers. Do we really want this?
   .container.container--fluid {
     padding: 0;

frontend/src/components/activity/ActivityResponsibles.vue

@@ -1,6 +1,7 @@
 <template>
   <e-select
     v-model="selectedCampCollaborations"
+    v-bind="$attrs"
     :items="availableCampCollaborations"
     :loading="isSaving || isLoading ? 'secondary' : false"
     :name="$tc('entity.activity.fields.responsible')"
@@ -12,11 +13,10 @@
     chips
     deletable-chips
     small-chips
-    v-bind="$attrs"
     @input="onInput"
   >
     <template #selection="{ item }">
-      <v-chip :key="item.value" small class="mx-0">
+      <v-chip :key="item.value" size="small" class="mx-0">
         <UserAvatar
           :camp-collaboration="item.campCollaboration"
           left

frontend/src/components/activity/ButtonNestedContentNodeAdd.vue

@@ -9,7 +9,7 @@
       'ec-button-contentnode-add-wrapper--single': single,
     }"
   >
-    <v-menu bottom left offset-y>
+    <v-menu location="bottom left" offset-y>
       <template #activator="{ on, attrs }">
         <v-btn
           class="ec-button-contentnode-add"
@@ -19,7 +19,7 @@
           v-bind="attrs"
           v-on="on"
         >
-          <v-icon left>mdi-plus-circle-outline</v-icon>
+          <v-icon start>mdi-plus-circle-outline</v-icon>
           {{ $tc('global.button.add') }}
         </v-btn>
       </template>

frontend/src/components/activity/ContentNode.vue

@@ -1,5 +1,6 @@
 <template>
   <component
+    v-bind="$attrs"
     :is="contentNode.contentTypeName"
     v-if="!contentNode.loading"
     class="content-node"
@@ -8,7 +9,6 @@
     :layout-mode="layoutMode"
     :draggable="draggable"
     :disabled="disabled"
-    v-bind="$attrs"
   />
 </template>
 

frontend/src/components/activity/DraggableContentNodes.vue

@@ -84,7 +84,7 @@ export default {
       return keyBy(this.allContentNodes().items, 'id')
     },
     draggingEnabled() {
-      return this.layoutMode && this.$vuetify.breakpoint.mdAndUp && !this.disabled
+      return this.layoutMode && this.$vuetify.display.mdAndUp && !this.disabled
     },
     contentNodeIds() {
       return sortBy(
@@ -114,7 +114,7 @@ export default {
       },
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.cleanupDrag()
   },
   methods: {

frontend/src/components/activity/MenuCardlessContentNode.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-menu bottom left offset-y>
+  <v-menu location="bottom left" offset-y>
     <template #activator="{ on, attrs }">
-      <v-btn icon class="mr-n1" small v-bind="attrs" v-on="on">
+      <v-btn icon class="mr-n1" size="small" v-bind="attrs" v-on="on">
         <v-icon>mdi-dots-vertical</v-icon>
       </v-btn>
     </template>

frontend/src/components/activity/ScheduleEntry.vue

@@ -32,7 +32,7 @@ Displays a single scheduleEntry
             >
               <template #after>
                 <v-icon
-                  right
+                  end
                   class="ml-0 e-category-chip-save-icon"
                   :class="{ 'mdi-spin': categoryChangeState === 'saving' }"
                 >
@@ -83,20 +83,20 @@ Displays a single scheduleEntry
         v-if="layoutMode"
         color="success"
         class="ml-3"
-        outlined
+        variant="outlined"
         @click="layoutMode = false"
       >
-        <template v-if="$vuetify.breakpoint.smAndUp">
-          <v-icon left>mdi-file-document-edit-outline</v-icon>
+        <template v-if="$vuetify.display.smAndUp">
+          <v-icon start>mdi-file-document-edit-outline</v-icon>
           {{ $tc('components.activity.scheduleEntry.backToContents') }}
         </template>
         <template v-else>{{ $tc('global.button.back') }}</template>
       </v-btn>
 
-      <v-tooltip bottom>
+      <v-tooltip location="bottom">
         <template #activator="{ on }">
           <v-btn
-            text
+            variant="text"
             icon
             class="d-none d-md-block"
             :aria-label="
@@ -107,10 +107,8 @@ Displays a single scheduleEntry
             @click="toggleDisplaySize"
             v-on="on"
           >
-            <v-icon v-if="isLocalPaperDisplaySize" class="resize-icon"
-              >$vuetify.icons.bigScreen</v-icon
-            >
-            <v-icon v-else class="resize-icon">$vuetify.icons.paperSize</v-icon>
+            <v-icon v-if="isLocalPaperDisplaySize" class="resize-icon">$bigScreen</v-icon>
+            <v-icon v-else class="resize-icon">$paperSize</v-icon>
           </v-btn>
         </template>
         {{

frontend/src/components/activity/content/ColumnLayout.vue

@@ -8,7 +8,7 @@
   >
     <template #header>
       <strong>
-        <v-icon color="blue darken-2">$vuetify.icons.columnLayout</v-icon>
+        <v-icon color="blue-darken-2">$columnLayout</v-icon>
         {{ $tc('contentNode.columnLayout.name') }}
       </strong>
       <MenuCardlessContentNode :content-node="contentNode">