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/plugins/displayLayout/components/BoxView.vue

@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -78,6 +78,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       if (this.itemStyle) {
@@ -127,7 +128,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -57,17 +57,17 @@
       :index="index"
       :multi-select="selectedLayoutItems.length > 1 || null"
       :is-editing="isEditing"
-      @contextClick="updateViewContext"
+      @context-click="updateViewContext"
       @move="move"
-      @endMove="endMove"
-      @endLineResize="endLineResize"
-      @formatChanged="updateTelemetryFormat"
+      @end-move="endMove"
+      @end-line-resize="endLineResize"
+      @format-changed="updateTelemetryFormat"
     />
     <edit-marquee
       v-if="showMarquee"
       :grid-size="gridSize"
       :selected-layout-items="selectedLayoutItems"
-      @endResize="endResize"
+      @end-resize="endResize"
     />
   </div>
 </template>

src/plugins/displayLayout/components/EditMarquee.vue

@@ -58,6 +58,7 @@ export default {
       validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
     }
   },
+  emits: ['end-resize'],
   data() {
     return {
       dragPosition: undefined
@@ -182,7 +183,7 @@ export default {
         y: marqueeEnd.y - marqueeStart.y
       };
 
-      this.$emit('endResize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
+      this.$emit('end-resize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
       this.dragPosition = undefined;
       this.initialPosition = undefined;
       this.marqueeStartPosition = undefined;

src/plugins/displayLayout/components/EllipseView.vue

@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -78,6 +78,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       if (this.itemStyle) {
@@ -127,7 +128,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };

src/plugins/displayLayout/components/ImageView.vue

@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div class="c-image-view" :style="style"></div>
@@ -74,6 +74,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       let backgroundImage = 'url(' + this.item.url + ')';
@@ -130,7 +131,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -56,6 +56,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     size() {
       let { width, height } = this.item;
@@ -119,7 +120,7 @@ export default {
       document.body.removeEventListener('mousemove', this.continueMove);
       document.body.removeEventListener('mouseup', this.endMove);
       this.continueMove(event);
-      this.$emit('endMove');
+      this.$emit('end-move');
       this.dragPosition = undefined;
       this.initialPosition = undefined;
       this.delta = undefined;

src/plugins/displayLayout/components/LineView.vue

@@ -108,6 +108,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move', 'end-line-resize'],
   data() {
     return {
       dragPosition: undefined,
@@ -318,9 +319,9 @@ export default {
       document.body.removeEventListener('mouseup', this.endDrag);
       let { x, y, x2, y2 } = this.dragPosition;
       if (!this.dragging) {
-        this.$emit('endMove');
+        this.$emit('end-move');
       } else {
-        this.$emit('endLineResize', this.item, {
+        this.$emit('end-line-resize', this.item, {
           x,
           y,
           x2,

src/plugins/displayLayout/components/SubobjectView.vue

@@ -25,7 +25,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <ObjectFrame
@@ -103,6 +103,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   data() {
     return {
       domainObject: undefined,
@@ -174,7 +175,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };

src/plugins/displayLayout/components/TelemetryView.vue

@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -126,6 +126,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move', 'format-changed', 'context-click'],
   data() {
     return {
       currentObjectPath: undefined,
@@ -344,10 +345,10 @@ export default {
     updateTelemetryFormat(format) {
       this.customStringformatter.setFormat(format);
 
-      this.$emit('formatChanged', this.item, format);
+      this.$emit('format-changed', this.item, format);
     },
     updateViewContext() {
-      this.$emit('contextClick', {
+      this.$emit('context-click', {
         viewHistoricalData: true,
         formattedValueForCopy: this.formattedValueForCopy
       });
@@ -400,7 +401,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };

src/plugins/displayLayout/components/TextView.vue

@@ -26,7 +26,7 @@
     :grid-size="gridSize"
     :is-editing="isEditing"
     @move="move"
-    @endMove="endMove"
+    @end-move="endMove"
   >
     <template #content>
       <div
@@ -86,6 +86,7 @@ export default {
       required: true
     }
   },
+  emits: ['move', 'end-move'],
   computed: {
     style() {
       let size;
@@ -139,7 +140,7 @@ export default {
       this.$emit('move', gridDelta);
     },
     endMove() {
-      this.$emit('endMove');
+      this.$emit('end-move');
     }
   }
 };