cherry-pick(#6910): chore: add vue3 to eslint, fix errors, and modify lint script (#6935)

* cherry-pick(#6910): chore: add vue3 to eslint, fix errors, and modify lint script

* refactor: lint:fix

---------

Co-authored-by: John Hill <john.c.hill@nasa.gov>

.eslintrc.js

@@ -13,7 +13,7 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:compat/recommended',
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
     'plugin:you-dont-need-lodash-underscore/compatible',
     'plugin:prettier/recommended'
   ],
@@ -28,6 +28,8 @@ module.exports = {
     }
   },
   rules: {
+    'vue/no-deprecated-dollar-listeners-api': 'warn',
+    'vue/no-deprecated-events-api': 'warn',
     'vue/no-v-for-template-key': 'off',
     'vue/no-v-for-template-key-on-child': 'error',
     'prettier/prettier': 'error',

package.json

@@ -81,7 +81,8 @@
     "clean-test-lint": "npm run clean; npm install; npm run test; npm run lint",
     "start": "npx webpack serve --config ./.webpack/webpack.dev.js",
     "start:coverage": "npx webpack serve --config ./.webpack/webpack.coverage.js",
-    "lint": "eslint example src e2e --ext .js,.vue openmct.js --max-warnings=0",
+    "lint": "eslint example src e2e --ext .js openmct.js --max-warnings=0 && eslint example src --ext .vue",
+    "lint:spelling": "cspell \"**/*.{js,md,vue}\" --show-context --gitignore",
     "lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix",
     "build:prod": "webpack --config ./.webpack/webpack.prod.js",
     "build:dev": "webpack --config ./.webpack/webpack.dev.js",

src/plugins/timeConductor/ConductorAxis.vue

@@ -92,7 +92,7 @@ export default {
     this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setViewFromTimeSystem);
     this.resizeTimer = setInterval(this.resize, RESIZE_POLL_INTERVAL);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.resizeTimer);
   },
   methods: {

src/plugins/timeConductor/ConductorClock.vue

@@ -58,7 +58,7 @@ export default {
       }
     }
   },
-  data: function () {
+  data() {
     const activeClock = this.getActiveClock();
 
     return {
@@ -66,11 +66,11 @@ export default {
       clocks: []
     };
   },
-  mounted: function () {
+  mounted() {
     this.loadClocks(this.configuration.menuOptions);
     this.openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
   },
-  destroyed: function () {
+  unmounted() {
     this.openmct.time.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
   },
   methods: {

src/plugins/timeConductor/ConductorHistory.vue

@@ -102,7 +102,7 @@ export default {
     this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.updateTimeSystem);
     this.openmct.time.on(TIME_CONTEXT_EVENTS.modeChanged, this.updateMode);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, this.addTimespan);
     this.openmct.time.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.addTimespan);
     this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.updateTimeSystem);

src/plugins/timeConductor/ConductorPopUp.vue

@@ -184,7 +184,7 @@ export default {
     this.$emit('popupLoaded');
     this.setTimeContext();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.stopFollowingTimeContext();
   },
   methods: {

src/plugins/timeConductor/independent/IndependentClock.vue

@@ -75,7 +75,7 @@ export default {
       }
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.openmct.time.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
   },
   mounted: function () {

src/plugins/timeConductor/independent/independentTimeConductorPopUpManager.js

@@ -36,7 +36,7 @@ export default {
     this.timeConductorOptionsHolder = this.$el;
     this.timeConductorOptionsHolder.addEventListener('click', this.showPopup);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.clearPopup();
   },
   methods: {

src/plugins/timeConductor/timePopupFixed.vue

@@ -157,7 +157,7 @@ export default {
     this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
     this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.clearAllValidation();
   },
   methods: {

src/plugins/timeConductor/timePopupRealtime.vue

@@ -173,7 +173,7 @@ export default {
     this.setOffsets();
     document.addEventListener('click', this.hide);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('click', this.hide);
   },
   methods: {