Merge branch 'master' into vue-3

package.json

@@ -59,10 +59,11 @@
     "style-loader": "^3.3.1",
     "typescript": "4.8.4",
     "uuid": "9.0.0",
-    "vue": "2.6.14",
+    "vue": "^3.1.0",
+    "@vue/compat": "^3.1.0",
     "vue-eslint-parser": "9.1.0",
-    "vue-loader": "15.9.8",
-    "vue-template-compiler": "2.6.14",
+    "vue-loader": "^16.0.0",
+    "@vue/compiler-sfc": "^3.1.0",
     "webpack": "5.74.0",
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.11.1",

src/plugins/LADTable/components/LadTableSet.vue

@@ -33,9 +33,9 @@
     <tbody>
         <template
             v-for="ladTable in ladTableObjects"
+            :key="ladTable.key"
         >
             <tr
-                :key="ladTable.key"
                 class="c-table__group-header js-lad-table-set__table-headers"
             >
                 <td colspan="10">

src/plugins/flexibleLayout/components/container.vue

@@ -45,9 +45,9 @@
     <div class="c-fl-container__frames-holder">
         <template
             v-for="(frame, i) in frames"
+            :key="frame.id"
         >
             <frame-component
-                :key="frame.id"
                 class="c-fl-container__frame"
                 :frame="frame"
                 :index="i"
@@ -57,7 +57,6 @@
             />
 
             <drop-hint
-                :key="'hint-' + i"
                 class="c-fl-frame__drop-hint"
                 :index="i"
                 :allow-drop="allowDrop"
@@ -66,7 +65,6 @@
 
             <resize-handle
                 v-if="(i !== frames.length - 1)"
-                :key="'handle-' + i"
                 :index="i"
                 :orientation="rowsLayout ? 'horizontal' : 'vertical'"
                 :is-editing="isEditing"

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -40,10 +40,12 @@
             'c-fl--rows': rowsLayout === true
         }"
     >
-        <template v-for="(container, index) in containers">
+        <template 
+            v-for="(container, index) in containers"
+            :key="`component-${container.id}`"
+        >
             <drop-hint
                 v-if="index === 0 && containers.length > 1"
-                :key="`hint-top-${container.id}`"
                 class="c-fl-frame__drop-hint"
                 :index="-1"
                 :allow-drop="allowContainerDrop"
@@ -51,7 +53,6 @@
             />
 
             <container-component
-                :key="`component-${container.id}`"
                 class="c-fl__container"
                 :index="index"
                 :container="container"
@@ -77,7 +78,6 @@
 
             <drop-hint
                 v-if="containers.length > 1"
-                :key="`hint-bottom-${container.id}`"
                 class="c-fl-frame__drop-hint"
                 :index="index"
                 :allow-drop="allowContainerDrop"

src/plugins/imagery/components/ImageryTimeView.vue

@@ -256,7 +256,7 @@ export default {
                             isNested: true
                         };
                     },
-                    template: `<swim-lane :is-nested="isNested" :hide-label="true"><template slot="object"><div class="c-imagery-tsv-container"></div></template></swim-lane>`
+                    template: `<swim-lane :is-nested="isNested" :hide-label="true"><slot name="object"><div class="c-imagery-tsv-container"></div></slot></swim-lane>`
                 });
 
                 this.$refs.imageryHolder.appendChild(component.$mount().$el);

src/plugins/imagery/components/ImageryView.vue

@@ -174,7 +174,7 @@
                 :active="focusedImageIndex === index"
                 :selected="focusedImageIndex === index && isPaused"
                 :real-time="!isFixed"
-                @click.native="thumbnailClicked(index)"
+                @click="thumbnailClicked(index)"
             />
         </div>
 

src/plugins/plan/Plan.vue

@@ -27,7 +27,7 @@
 >
     <template v-if="viewBounds && !options.compact">
         <swim-lane>
-            <template slot="label">{{ timeSystem.name }}</template>
+            <slot name="label">{{ timeSystem.name }}</slot>
             <timeline-axis
                 slot="object"
                 :bounds="viewBounds"
@@ -418,7 +418,7 @@ export default {
                         width: svgWidth
                     };
                 },
-                template: `<swim-lane :is-nested="isNested" :status="status"><template slot="label">{{heading}}</template><template slot="object"><svg :height="height" :width="width"></svg></template></swim-lane>`
+                template: `<swim-lane :is-nested="isNested" :status="status"><slot name="label">{{heading}}</template><template slot="object"><svg :height="height" :width="width"></svg></slot></swim-lane>`
             });
 
             this.$refs.planHolder.appendChild(component.$mount().$el);

src/plugins/telemetryTable/components/table.vue

@@ -257,11 +257,11 @@
                 @change-height="setRowHeight"
             />
             <tr>
-                <template v-for="(title, key) in headers">
-                    <th
-                        :key="key"
-                        :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}"
-                    >
+                <template
+                    v-for="(title, key) in headers"
+                    :key="key"
+                >
+                    <th :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}">
                         {{ title }}
                     </th>
                 </template>

src/plugins/timeConductor/ConductorInputsRealtime.vue

@@ -14,7 +14,7 @@
             :bottom="keyString !== undefined"
             :type="'start'"
             :offset="offsets.start"
-            @focus.native="$event.target.select()"
+            @focus="$event.target.select()"
             @hide="hideAllTimePopups"
             @update="timePopUpdate"
         />
@@ -54,7 +54,7 @@
             :bottom="keyString !== undefined"
             :type="'end'"
             :offset="offsets.end"
-            @focus.native="$event.target.select()"
+            @focus="$event.target.select()"
             @hide="hideAllTimePopups"
             @update="timePopUpdate"
         />

src/ui/components/search.vue

@@ -5,10 +5,10 @@
 >
     <input
         class="c-search__input"
+        v-bind="$attrs"
         aria-label="Search Input"
         tabindex="10000"
         type="search"
-        v-bind="$attrs"
         :value="value"
         v-on="inputListeners"
     >

src/ui/layout/search/SearchResultsDropDown.vue

@@ -41,7 +41,7 @@
                     :key="openmct.objects.makeKeyString(objectResult.identifier)"
                     :result="objectResult"
                     @preview-changed="previewChanged"
-                    @click.native="selectedResult"
+                    @click="selectedResult"
                 />
             </div>
             <div
@@ -53,7 +53,7 @@
                     v-for="(annotationResult) in annotationResults"
                     :key="openmct.objects.makeKeyString(annotationResult.identifier)"
                     :result="annotationResult"
-                    @click.native="selectedResult"
+                    @click="selectedResult"
                 />
             </div>
             <div

src/ui/toolbar/components/toolbar-input.vue

@@ -7,10 +7,10 @@
         <div class="c-labeled-input__label">{{ options.label }}</div>
     </label>
     <input
+        v-bind="options.attrs"
         :id="uid"
         :type="options.type"
         :value="options.value"
-        v-bind="options.attrs"
     >
 </div>
 </template>

src/utils/testing.js

@@ -128,7 +128,7 @@ export function simulateKeyEvent(opts) {
 }
 
 function clearBuiltinSpy(funcDefinition) {
-    funcDefinition.object[funcDefinition.functionName] = funcDefinition.nativeFunction;
+    funcDefinition.object[funcDefinition.functionName] = funcDefinitionFunction;
 }
 
 export function getLatestTelemetry(telemetry = [], opts = {}) {

webpack.common.js

@@ -37,7 +37,7 @@ const config = {
         couchDBChangesFeed: './src/plugins/persistence/couch/CouchChangesFeed.js',
         inMemorySearchWorker: './src/api/objects/InMemorySearchWorker.js',
         espressoTheme: './src/plugins/themes/espresso-theme.scss',
-        snowTheme: './src/plugins/themes/snow-theme.scss',
+        snowTheme: './src/plugins/themes/snow-theme.scss'
     },
     output: {
         globalObject: 'this',
@@ -65,7 +65,8 @@ const config = {
             "MCT": path.join(__dirname, "src/MCT"),
             "testUtils": path.join(__dirname, "src/utils/testUtils.js"),
             "objectUtils": path.join(__dirname, "src/api/objects/object-utils.js"),
-            "utils": path.join(__dirname, "src/utils")
+            "utils": path.join(__dirname, "src/utils"),
+            "vue": "@vue/compat"
         }
     },
     plugins: [
@@ -119,7 +120,15 @@ const config = {
             },
             {
                 test: /\.vue$/,
-                use: 'vue-loader'
+                loader: 'vue-loader',
+                options: {
+                    hotReload: false,
+                    compilerOptions: {
+                        compatConfig: {
+                            MODE: 3
+                        }
+                    }
+                }
             },
             {
                 test: /\.html$/,
@@ -148,6 +157,9 @@ const config = {
             }
         ]
     },
+    externals: {
+        "vue": "Vue"
+    },
     stats: 'errors-warnings',
     performance: {
         // We should eventually consider chunking to decrease

webpack.dev.js

@@ -24,11 +24,12 @@ module.exports = merge(common, {
             '**/.*' // dotfiles and dotfolders
         ]
     },
-    resolve: {
-        alias: {
-            "vue": path.join(__dirname, "node_modules/vue/dist/vue.js")
-        }
-    },
+    // resolve: {
+    //     alias: {
+    //         // "vue": path.join(__dirname, "node_modules/vue/dist/vue.js")
+    //         "vue": "@vue/compat"
+    //     }
+    // },
     plugins: [
         new webpack.DefinePlugin({
             __OPENMCT_ROOT_RELATIVE__: '"dist/"'

webpack.prod.js

@@ -12,11 +12,11 @@ const webpack = require('webpack');
 
 module.exports = merge(common, {
     mode: 'production',
-    resolve: {
-        alias: {
-            "vue": path.join(__dirname, "node_modules/vue/dist/vue.min.js")
-        }
-    },
+    // resolve: {
+        // alias: {
+            // "vue": path.join(__dirname, "node_modules/vue/dist/vue.min.js")
+        // }
+    // },
     plugins: [
         new webpack.DefinePlugin({
             __OPENMCT_ROOT_RELATIVE__: '""'