frontend: add simple part of vue/vue3-recommended rules

Turn off the following rules for now: "vue/no-deprecated-dollar-scopedslots-api": "off", "vue/no-deprecated-slot-attribute": "off", "vue/no-deprecated-slot-scope-attribute": "off", because i could not get the new syntax to work. That we are ready for vue3 as soon as the calendar works. Issue: ecamp#5121
BacLuc · May 12, 2024 · 2f7027b · 2f7027b
1 parent 690f237
commit 2f7027b
Show file tree

Hide file tree

Showing 15 changed files with 32 additions and 21 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -125,6 +125,7 @@
     },
     "extends": [
       "plugin:vue/recommended",
+      "plugin:vue/vue3-recommended",
       "eslint:recommended",
       "plugin:prettier/recommended",
       "@vue/eslint-config-prettier"
@@ -143,6 +144,16 @@
         }
       ],
       "vue/multi-word-component-names": "off",
+      "vue/no-deprecated-dollar-listeners-api": "warn",
+      "vue/no-deprecated-dollar-scopedslots-api": "off",
+      "vue/no-deprecated-filter": "warn",
+      "vue/no-deprecated-props-default-this": "warn",
+      "vue/no-deprecated-slot-attribute": "off",
+      "vue/no-deprecated-slot-scope-attribute": "off",
+      "vue/no-deprecated-v-on-native-modifier": "warn",
+      "vue/no-v-for-template-key-on-child": "warn",
+      "vue/no-v-model-argument": "warn",
+      "vue/require-explicit-emits": "off",
       "no-unused-vars": [
         "error",
         {

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -42,7 +42,7 @@ export default {
       }
     }
   },
-  destroyed() {
+  unmounted() {
     window.removeEventListener('offline', this.offlineListener)
     window.removeEventListener('online', this.onlineListener)
   },

diff --git a/frontend/src/components/activity/DraggableContentNodes.vue b/frontend/src/components/activity/DraggableContentNodes.vue
@@ -114,7 +114,7 @@ export default {
       },
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.cleanupDrag()
   },
   methods: {

diff --git a/frontend/src/components/activity/content/columnLayout/ResizableColumnHeader.vue b/frontend/src/components/activity/content/columnLayout/ResizableColumnHeader.vue
@@ -52,7 +52,7 @@ export default {
     document.documentElement.addEventListener('touchcancel', this.mouseUp, true)
     document.documentElement.addEventListener('touchstart', this.mouseUp, true)
   },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     document.documentElement.removeEventListener('mousemove', this.mouseMove)
     document.documentElement.removeEventListener('mouseup', this.mouseUp)
     document.documentElement.removeEventListener('mouseleave', this.mouseUp)

diff --git a/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue b/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue
@@ -21,8 +21,8 @@
         :item-key="key"
         :layout-mode="layoutMode"
         @delete="deleteItem"
-        @moveDown="moveDown"
-        @moveUp="moveUp"
+        @move-down="moveDown"
+        @move-up="moveUp"
       />
       <StoryboardRowDense
         v-else-if="variant === 'dense'"
@@ -32,8 +32,8 @@
         :item-key="key"
         :layout-mode="layoutMode"
         @delete="deleteItem"
-        @moveDown="moveDown"
-        @moveUp="moveUp"
+        @move-down="moveDown"
+        @move-up="moveUp"
       />
     </template>
   </draggable>

diff --git a/frontend/src/components/form/base/BasePicker.vue b/frontend/src/components/form/base/BasePicker.vue
@@ -172,7 +172,7 @@ export default {
 
     this.setValue(this.value)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.clickOutsideHandler) {
       document.removeEventListener('click', this.clickOutsideHandler)
     }

diff --git a/frontend/src/components/form/base/EColorPicker.vue b/frontend/src/components/form/base/EColorPicker.vue
@@ -31,7 +31,7 @@ Displays a field as a color picker (can be used with v-model)
             v-for="swatch in swatches"
             :key="swatch"
             :color="swatch"
-            @selectColor="picker.onInput"
+            @select-color="picker.onInput"
           />
         </div>
       </v-card>

diff --git a/frontend/src/components/form/base/EDatePicker.vue b/frontend/src/components/form/base/EDatePicker.vue
@@ -20,6 +20,7 @@ Displays a field as a date picker (can be used with v-model)
   >
     <template #default="picker">
       <v-date-picker
+        :picker-date="pickerMonth"
         :value="picker.value || ''"
         :locale="$i18n.locale"
         first-day-of-week="1"
@@ -29,7 +30,6 @@ Displays a field as a date picker (can be used with v-model)
         no-title
         scrollable
         show-adjacent-months
-        :picker-date.sync="pickerMonth"
         @input="picker.onInput"
       >
         <v-spacer />

diff --git a/frontend/src/components/generic/DetailPane.vue b/frontend/src/components/generic/DetailPane.vue
@@ -1,7 +1,7 @@
 <template>
   <DialogBottomSheet
     v-if="$vuetify.breakpoint.smAndDown"
-    :saving-override.sync="isSaving"
+    :saving-override="isSaving"
     :value="value"
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"
@@ -13,9 +13,9 @@
   </DialogBottomSheet>
   <DialogForm
     v-else
+    :saving-override="isSaving"
     content-class="ec-dialog-form"
     eager
-    :saving-override.sync="isSaving"
     :value="value"
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"

diff --git a/frontend/src/components/navigation/SideBar.vue b/frontend/src/components/navigation/SideBar.vue
@@ -2,11 +2,11 @@
   <v-navigation-drawer
     v-if="$vuetify.breakpoint.smAndUp"
     v-model="drawer"
+    :mini-variant="mini"
     app
     clipped
     permanent
     :temporary="!mini && !$vuetify.breakpoint.mdAndUp"
-    :mini-variant.sync="mini"
     mini-variant-width="40"
     :width="$vuetify.breakpoint.xl || (!mini && !$vuetify.breakpoint.mdAndUp) ? 350 : 256"
     :color="!title || mini ? 'blue-grey lighten-4' : null"

diff --git a/frontend/src/components/program/ScheduleEntries.vue b/frontend/src/components/program/ScheduleEntries.vue
@@ -10,7 +10,7 @@
       ref="dialogActivityCreate"
       :period="period"
       :schedule-entry="newScheduleEntry"
-      @activityCreated="afterCreateActivity($event)"
+      @activity-created="afterCreateActivity($event)"
     />
 
     <v-btn

diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
@@ -63,8 +63,8 @@ Listing all given activity schedule entries in a calendar view.
         <PicassoEntry
           :schedule-entry="event"
           :editable="editable"
-          @startResize="startResize(event)"
-          @finishEdit="reloadScheduleEntries"
+          @start-resize="startResize(event)"
+          @finish-edit="reloadScheduleEntries"
         />
       </template>
     </v-calendar>

diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -33,7 +33,7 @@
       v-if="isEditable"
       ref="editDialog"
       :schedule-entry="scheduleEntry"
-      @activityUpdated="$emit('finishEdit')"
+      @activity-updated="$emit('finishEdit')"
       @error="$emit('finishEdit')"
     >
       <template #activator="{ on }">
@@ -265,7 +265,7 @@ export default {
     this.scrollHeight = this.$el.scrollHeight
     window.addEventListener('resize', this.onResize)
   },
-  destroyed() {
+  unmounted() {
     window.removeEventListener('resize', this.onResize)
   },
   methods: {

diff --git a/frontend/src/views/activity/SideBarProgram.vue b/frontend/src/views/activity/SideBarProgram.vue
@@ -9,7 +9,7 @@
           :camp="camp"
           :day-selection="daySelection"
           :loading="slotProps.loading"
-          @changeDay="selectedDay = $event"
+          @change-day="selectedDay = $event"
         />
         <v-divider />
         <v-skeleton-loader v-if="slotProps.loading" class="mx-1" type="list-item@6" />

diff --git a/frontend/src/views/camp/CampProgram.vue b/frontend/src/views/camp/CampProgram.vue
@@ -110,8 +110,8 @@ Show all activity schedule entries of a single period.
           :end="period.end"
           :editable="editMode"
           :is-filter-set="isFilterSet"
-          @newEntry="slotProps.on.newEntry"
-          @unlockReminder="showUnlockReminder"
+          @new-entry="slotProps.on.newEntry"
+          @unlock-reminder="showUnlockReminder"
         />
       </template>
     </ScheduleEntries>