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 · Jun 2, 2024 · 8507f39 · 8507f39
1 parent 690f237
commit 8507f39
Show file tree

Hide file tree

Showing 19 changed files with 49 additions and 36 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,18 @@
         }
       ],
       "vue/multi-word-component-names": "off",
+      "vue/no-deprecated-destroyed-lifecycle": "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-bind-sync": "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/components/activity/DaySwitcher.vue b/frontend/src/components/activity/DaySwitcher.vue
@@ -109,7 +109,7 @@ export default {
   },
   methods: {
     changeDay(value) {
-      this.$emit('changeDay', value)
+      this.$emit('change-day', value)
     },
   },
 }

diff --git a/frontend/src/components/activity/content/storyboard/StoryboardRowDefault.vue b/frontend/src/components/activity/content/storyboard/StoryboardRowDefault.vue
@@ -7,8 +7,8 @@
         class="drag-and-drop-handle"
         :disabled="isLastSection"
         :aria-label="$tc('global.button.move')"
-        @keydown.down="$emit('moveDown', itemKey)"
-        @keydown.up="$emit('moveUp', itemKey)"
+        @keydown.down="$emit('move-down', itemKey)"
+        @keydown.up="$emit('move-up', itemKey)"
       >
         <v-icon>mdi-drag</v-icon>
       </v-btn>

diff --git a/frontend/src/components/activity/content/storyboard/StoryboardRowDense.vue b/frontend/src/components/activity/content/storyboard/StoryboardRowDense.vue
@@ -7,8 +7,8 @@
         class="drag-and-drop-handle"
         :disabled="isLastSection"
         :aria-label="$tc('global.button.move')"
-        @keydown.down="$emit('moveDown', itemKey)"
-        @keydown.up="$emit('moveUp', itemKey)"
+        @keydown.down="$emit('move-down', itemKey)"
+        @keydown.up="$emit('move-up', itemKey)"
       >
         <v-icon>mdi-drag</v-icon>
       </v-btn>

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/dialog/DialogBottomSheet.vue b/frontend/src/components/dialog/DialogBottomSheet.vue
@@ -113,14 +113,14 @@ export default {
   methods: {
     async doSubmit() {
       this.isSaving = true
-      this.$emit('update:savingOverride', true)
+      this.$emit('update:saving-override', true)
       await this.submitAction()
       this.isSaving = false
-      this.$emit('update:savingOverride', false)
+      this.$emit('update:saving-override', false)
     },
     doCancel() {
       this.isSaving = false
-      this.$emit('update:savingOverride', false)
+      this.$emit('update:saving-override', false)
       if (this.cancelAction != null) {
         this.cancelAction()
       }

diff --git a/frontend/src/components/dialog/DialogForm.vue b/frontend/src/components/dialog/DialogForm.vue
@@ -111,14 +111,14 @@ export default {
   methods: {
     async doSubmit() {
       this.isSaving = true
-      this.$emit('update:savingOverride', true)
+      this.$emit('update:saving-override', true)
       await this.submitAction()
       this.isSaving = false
-      this.$emit('update:savingOverride', false)
+      this.$emit('update:saving-override', false)
     },
     doCancel() {
       this.isSaving = false
-      this.$emit('update:savingOverride', false)
+      this.$emit('update:saving-override', false)
       if (this.cancelAction != null) {
         this.cancelAction()
       }

diff --git a/frontend/src/components/form/base/ColorPicker/ColorSwatch.vue b/frontend/src/components/form/base/ColorPicker/ColorSwatch.vue
@@ -7,7 +7,7 @@
     height="30"
     :color="color"
     :ripple="false"
-    @click="$emit('selectColor', color)"
+    @click="$emit('select-color', color)"
     v-on="$listeners"
   ></v-btn>
 </template>

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.sync="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
@@ -13,9 +13,9 @@
   </DialogBottomSheet>
   <DialogForm
     v-else
+    :saving-override.sync="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.sync="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/DialogActivityCreate.vue b/frontend/src/components/program/DialogActivityCreate.vue
@@ -313,7 +313,7 @@ export default {
     },
     onSuccess(activity) {
       this.close()
-      this.$emit('activityCreated', activity)
+      this.$emit('activity-created', activity)
     },
   },
 }

diff --git a/frontend/src/components/program/DialogActivityEdit.vue b/frontend/src/components/program/DialogActivityEdit.vue
@@ -126,7 +126,7 @@ export default {
     },
     updatedSuccessful(data) {
       this.close()
-      this.$emit('activityUpdated', data)
+      this.$emit('activity-updated', data)
     },
     scheduleEntryRoute,
   },

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>
@@ -154,8 +154,8 @@ export default {
 
   // emitted events
   emits: [
-    'newEntry', // triggered once when a new entry was created via drag & drop (parameters: startTimestamp, endTimestamp)
-    'unlockReminder', // triggered when we think someone is trying to create/move in non-editable mode
+    'new-entry', // triggered once when a new entry was created via drag & drop (parameters: startTimestamp, endTimestamp)
+    'unlock-reminder', // triggered when we think someone is trying to create/move in non-editable mode
   ],
 
   // composition API setup
@@ -198,11 +198,11 @@ export default {
     const createEntry = (startTimestamp, endTimestamp) => {
       const start = timestampToUtcString(startTimestamp)
       const end = timestampToUtcString(endTimestamp)
-      emit('newEntry', start, end)
+      emit('new-entry', start, end)
     }
 
     const showReminder = (move) => {
-      emit('unlockReminder', move)
+      emit('unlock-reminder', move)
     }
 
     const calenderStartTimestamp = computed(() => utcStringToTimestamp(start.value))

diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -33,8 +33,8 @@
       v-if="isEditable"
       ref="editDialog"
       :schedule-entry="scheduleEntry"
-      @activityUpdated="$emit('finishEdit')"
-      @error="$emit('finishEdit')"
+      @activity-updated="$emit('finish-edit')"
+      @error="$emit('finish-edit')"
     >
       <template #activator="{ on }">
         <v-btn
@@ -81,7 +81,7 @@
     <div
       v-if="!scheduleEntry.tmpEvent"
       class="e-picasso-entry__drag-bottom"
-      @mousedown.stop="$emit('startResize')"
+      @mousedown.stop="$emit('start-resize')"
     />
 
     <!-- Duration Display -->
@@ -149,7 +149,7 @@ export default {
     editable: { type: Boolean, required: true },
     scheduleEntry: { type: Object, required: true },
   },
-  emits: ['startResize', 'finishEdit'],
+  emits: ['start-resize', 'finish-edit'],
   setup(props) {
     const { editable, scheduleEntry } = toRefs(props)
     const editDialog = ref(null)

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>