Fix remaining vue-compat warnings (#6966)

* PascalCase files

* emit warnings

* minor updates

* merge conflict resolve pt 1

* part 2

* update to eventbus

* eventbus spelling

* fix: import

* fix: eventBus injection

* fix: import

* fix(test): provide eventBus in overlay plot tests

* refactor: EventBus as composable

* chore: lint:fix

* chore: require vue event hyphenation

* fix: revert event renames

* refactor: use PascalCase name

* fix: ensure `$attrs` are properly bound

* fix: emit `click` event from SearchComponent

* chore: remove rules already included in `vue/vue3-recommended` ruleset

* fix: remove `Vue` import

* chore: remove unused files

* fix: fix lint scripts and make them cross-platform

* refactor: rename `DataImagery.vue` -> `ImageryInspectorView.vue`

* refactor: rename `NumericData.vue` -> `NumericDataInspectorView.vue`

* refactor: rename components

* refactor: rename `GeneralIndicators.vue` -> `StatusIndicators.vue`

* refactor: rename components

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>

src/api/forms/FormController.js

@@ -3,9 +3,9 @@ import mount from 'utils/mount';
 import AutoCompleteField from './components/controls/AutoCompleteField.vue';
 import CheckBoxField from './components/controls/CheckBoxField.vue';
 import ClockDisplayFormatField from './components/controls/ClockDisplayFormatField.vue';
-import Datetime from './components/controls/Datetime.vue';
+import Datetime from './components/controls/DatetimeField.vue';
 import FileInput from './components/controls/FileInput.vue';
-import Locator from './components/controls/Locator.vue';
+import Locator from './components/controls/LocatorField.vue';
 import NumberField from './components/controls/NumberField.vue';
 import SelectField from './components/controls/SelectField.vue';
 import TextAreaField from './components/controls/TextAreaField.vue';
@@ -87,7 +87,7 @@ export default class FormControl {
                 onChange
               };
             },
-            template: `<FormControlComponent :model="model" @onChange="onChange"></FormControlComponent>`
+            template: `<FormControlComponent :model="model" @on-change="onChange"></FormControlComponent>`
           },
           {
             element,

src/api/forms/FormsAPI.js

@@ -171,7 +171,7 @@ export default class FormsAPI {
           };
         },
         template:
-          '<FormProperties :model="formStructure" @onChange="onChange" @onCancel="onCancel" @onSave="onSave"></FormProperties>'
+          '<FormProperties :model="formStructure" @on-change="onChange" @on-cancel="onCancel" @on-save="onSave"></FormProperties>'
       },
       {
         element,

src/api/forms/components/FormProperties.vue

@@ -44,7 +44,7 @@
           :css-class="row.cssClass"
           :first="index < 1"
           :row="row"
-          @onChange="onChange"
+          @on-change="onChange"
         />
       </div>
     </form>
@@ -94,6 +94,7 @@ export default {
       }
     }
   },
+  emits: ['on-change', 'on-save', 'on-cancel'],
   data() {
     return {
       invalidProperties: {},
@@ -144,13 +145,13 @@ export default {
     onChange(data) {
       this.invalidProperties[data.model.key] = data.invalid;
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     onCancel() {
-      this.$emit('onCancel');
+      this.$emit('on-cancel');
     },
     onSave() {
-      this.$emit('onSave');
+      this.$emit('on-save');
     }
   }
 };

src/api/forms/components/FormRow.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <div class="form-row c-form__row" :class="[{ first: first }, cssClass]" @onChange="onChange">
+  <div class="form-row c-form__row" :class="[{ first: first }, cssClass]" @on-change="onChange">
     <label class="c-form-row__label" :title="row.description" :for="`form-${row.key}`">
       {{ row.name }}
     </label>
@@ -51,6 +51,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       formControl: this.openmct.forms.getFormControl(this.row.control),
@@ -101,7 +102,7 @@ export default {
       this.valid = this.validateRow(data);
       data.invalid = !this.valid;
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     validateRow(data) {
       let valid = true;

src/api/forms/components/controls/AutoCompleteField.vue

@@ -88,6 +88,7 @@ export default {
       }
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       hideOptions: true,
@@ -138,7 +139,7 @@ export default {
           value: newValue
         };
 
-        this.$emit('onChange', data);
+        this.$emit('on-change', data);
       }
     },
     hideOptions(newValue) {

src/api/forms/components/controls/ClockDisplayFormatField.vue

@@ -22,7 +22,7 @@
 
 <template>
   <div class="c-form-control--clock-display-format-fields">
-    <SelectField v-for="item in items" :key="item.key" :model="item" @onChange="onChange" />
+    <SelectField v-for="item in items" :key="item.key" :model="item" @on-change="onChange" />
   </div>
 </template>
 
@@ -39,6 +39,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       items: []
@@ -55,7 +56,7 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/CompositeContainer.vue

@@ -28,7 +28,7 @@
       :first="index < 1"
       :value="JSON.stringify(model.value[index])"
       :item="item"
-      @onChange="onChange"
+      @on-change="onChange"
     />
   </span>
 </template>
@@ -46,12 +46,13 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   mounted() {
     this.model.items.forEach((item, index) => (item.key = `${this.model.key}.${index}`));
   },
   methods: {
     onChange(data) {
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/CompositeItem.vue

@@ -22,7 +22,7 @@
 
 <template>
   <div :class="compositeCssClass">
-    <FormRow :css-class="item.cssClass" :first="first" :row="row" @onChange="onChange" />
+    <FormRow :css-class="item.cssClass" :first="first" :row="row" @on-change="onChange" />
     <span class="composite-control-label">
       {{ item.name }}
     </span>
@@ -50,6 +50,7 @@ export default {
       }
     }
   },
+  emits: ['on-change'],
   computed: {
     compositeCssClass() {
       return `l-composite-control l-${this.item.control}`;
@@ -63,7 +64,7 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/DatetimeField.vue

@@ -85,6 +85,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       format: DATE_FORMAT,
@@ -139,7 +140,7 @@ export default {
         value: new Date(timestamp).toISOString()
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     resetValues() {
       this.setDatetime();

src/api/forms/components/controls/FileInput.vue

@@ -52,6 +52,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       fileInfo: undefined
@@ -101,7 +102,7 @@ export default {
           model: self.model,
           value: fileInfo
         };
-        self.$emit('onChange', data);
+        self.$emit('on-change', data);
       };
 
       fileReader.onerror = function (error) {
@@ -123,7 +124,7 @@ export default {
         value: fileInfo
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     selectFile() {
       this.$refs.fileInput.click();
@@ -135,7 +136,7 @@ export default {
         model: this.model,
         value: undefined
       };
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/LocatorField.vue

@@ -42,6 +42,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   methods: {
     handleItemSelection(item) {
       const data = {
@@ -49,7 +50,7 @@ export default {
         value: item.objectPath
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/NumberField.vue

@@ -46,6 +46,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       field: this.model.value
@@ -61,7 +62,7 @@ export default {
         value: this.field
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/SelectField.vue

@@ -44,6 +44,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       selected: this.model.value
@@ -56,7 +57,7 @@ export default {
         value: this.selected
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/TextAreaField.vue

@@ -45,6 +45,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       field: this.model.value
@@ -60,7 +61,7 @@ export default {
         value: this.field
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/components/controls/TextField.vue

@@ -45,6 +45,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       field: this.model.value
@@ -60,7 +61,7 @@ export default {
         value: this.field
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/forms/toggle-check-box-mixin.js

@@ -1,4 +1,5 @@
 export default {
+  emits: ['on-change'],
   data() {
     return {
       isChecked: false
@@ -13,7 +14,7 @@ export default {
         value: this.isChecked
       };
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/api/menu/menu.js

@@ -23,7 +23,7 @@ import EventEmitter from 'EventEmitter';
 import mount from 'utils/mount';
 import { h } from 'vue';
 
-import MenuComponent from './components/Menu.vue';
+import MenuComponent from './components/MenuComponent.vue';
 import SuperMenuComponent from './components/SuperMenu.vue';
 
 export const MENU_PLACEMENT = {

src/api/overlays/components/OverlayComponent.vue

@@ -57,6 +57,7 @@
 <script>
 export default {
   inject: ['dismiss', 'element', 'buttons', 'dismissable'],
+  emits: ['destroy'],
   data: function () {
     return {
       focusIndex: -1