Migrate to Vue 3 Migration Build (#6767)

* Replacing all instances of the new Vue() component creation pattern
* In Vue 3, components cannot be created on the fly and mounted off-DOM. The suggested fix from Vue is to use createApp, but in the context of Open MCT this means dozens of Vue apps being created and destroyed at any given moment. Instead, we have used a community hack for creating individual components.
* beforeDestroy() -> beforeUnmount()
* destroyed() -> unmounted()
* The addition of deep: true option on Array listeners is now required to detect Array changes
* Open MCT is now mounted on a child div instead of directly on document.body


---------

Co-authored-by: Scott Bell <scott@traclabs.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>

src/api/menu/menu.js

@@ -22,7 +22,8 @@
 import EventEmitter from 'EventEmitter';
 import MenuComponent from './components/Menu.vue';
 import SuperMenuComponent from './components/SuperMenu.vue';
-import Vue from 'vue';
+import { h } from 'vue';
+import mount from 'utils/mount';
 
 export const MENU_PLACEMENT = {
   TOP: 'top',
@@ -52,137 +53,67 @@ class Menu extends EventEmitter {
 
   dismiss() {
     this.emit('destroy');
-    document.body.removeChild(this.component.$el);
+    if (this.destroy) {
+      this.destroy();
+      this.destroy = null;
+    }
     document.removeEventListener('click', this.dismiss);
-    this.component.$destroy();
-  }
-
-  show() {
-    this.component.$mount();
-    document.body.appendChild(this.component.$el);
-
-    let position = this._calculatePopupPosition(this.component.$el);
-
-    this.component.$el.style.left = `${position.x}px`;
-    this.component.$el.style.top = `${position.y}px`;
-
-    document.addEventListener('click', this.dismiss);
   }
 
   showMenu() {
-    this.component = new Vue({
-      components: {
-        MenuComponent
+    if (this.destroy) {
+      return;
+    }
+    const { vNode, destroy } = mount({
+      render() {
+        return h(MenuComponent);
       },
       provide: {
         options: this.options
       },
-      template: '<menu-component />'
+      // TODO: Remove this exception upon full migration to Vue 3
+      // https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#render-function-argument
+      compatConfig: {
+        RENDER_FUNCTION: false
+      }
     });
 
+    this.el = vNode.el;
+    this.destroy = destroy;
+
     this.show();
   }
 
   showSuperMenu() {
-    this.component = new Vue({
-      components: {
-        SuperMenuComponent
+    const { vNode, destroy } = mount({
+      data() {
+        return {
+          top: '0px',
+          left: '0px'
+        };
+      },
+      render() {
+        return h(SuperMenuComponent);
       },
       provide: {
         options: this.options
       },
-      template: '<super-menu-component />'
+      // TODO: Remove this exception upon full migration to Vue 3
+      // https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#render-function-argument
+      compatConfig: {
+        RENDER_FUNCTION: false
+      }
     });
 
+    this.el = vNode.el;
+    this.destroy = destroy;
+
     this.show();
   }
 
-  /**
-   * @private
-   */
-  _calculatePopupPosition(menuElement) {
-    let menuDimensions = menuElement.getBoundingClientRect();
-
-    if (!this.options.placement) {
-      this.options.placement = MENU_PLACEMENT.BOTTOM_RIGHT;
-    }
-
-    const menuPosition = this._getMenuPositionBasedOnPlacement(menuDimensions);
-
-    return this._preventMenuOverflow(menuPosition, menuDimensions);
-  }
-
-  /**
-   * @private
-   */
-  _getMenuPositionBasedOnPlacement(menuDimensions) {
-    let eventPosX = this.options.x;
-    let eventPosY = this.options.y;
-
-    // Adjust popup menu based on placement
-    switch (this.options.placement) {
-      case MENU_PLACEMENT.TOP:
-        eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
-        eventPosY = this.options.y - menuDimensions.height;
-        break;
-      case MENU_PLACEMENT.BOTTOM:
-        eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
-        break;
-      case MENU_PLACEMENT.LEFT:
-        eventPosX = this.options.x - menuDimensions.width;
-        eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
-        break;
-      case MENU_PLACEMENT.RIGHT:
-        eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
-        break;
-      case MENU_PLACEMENT.TOP_LEFT:
-        eventPosX = this.options.x - menuDimensions.width;
-        eventPosY = this.options.y - menuDimensions.height;
-        break;
-      case MENU_PLACEMENT.TOP_RIGHT:
-        eventPosY = this.options.y - menuDimensions.height;
-        break;
-      case MENU_PLACEMENT.BOTTOM_LEFT:
-        eventPosX = this.options.x - menuDimensions.width;
-        break;
-      case MENU_PLACEMENT.BOTTOM_RIGHT:
-        break;
-    }
-
-    return {
-      x: eventPosX,
-      y: eventPosY
-    };
-  }
-
-  /**
-   * @private
-   */
-  _preventMenuOverflow(menuPosition, menuDimensions) {
-    let { x: eventPosX, y: eventPosY } = menuPosition;
-    let overflowX = eventPosX + menuDimensions.width - document.body.clientWidth;
-    let overflowY = eventPosY + menuDimensions.height - document.body.clientHeight;
-
-    if (overflowX > 0) {
-      eventPosX = eventPosX - overflowX;
-    }
-
-    if (overflowY > 0) {
-      eventPosY = eventPosY - overflowY;
-    }
-
-    if (eventPosX < 0) {
-      eventPosX = 0;
-    }
-
-    if (eventPosY < 0) {
-      eventPosY = 0;
-    }
-
-    return {
-      x: eventPosX,
-      y: eventPosY
-    };
+  show() {
+    document.body.appendChild(this.el);
+    document.addEventListener('click', this.dismiss);
   }
 }