found some more "destroyed" that needed to be "unmounted" and fixed conductor code

fixes warning of viewKey being accessed during render (think in computed prop) and not being defined on the instance
updating tree watched arrays to make sure they work properly with vue 3
2025-06-27 19:38:53 +00:00 · 2022-12-08 11:53:27 -08:00 · 2022-12-07 16:53:34 -08:00 · 2022-12-07 16:47:53 -08:00 · 2022-12-07 16:13:18 -08:00 · 2022-12-07 16:00:41 -08:00
127 changed files with 218 additions and 201 deletions
--- a/index.html
+++ b/index.html
@ -64,6 +64,7 @@
        </style>
    </head>
    <body>
        <div></div>
    </body>
    <script>
        const THIRTY_SECONDS = 30 * 1000;
@ -75,7 +76,8 @@
        const TWO_HOURS = ONE_HOUR * 2;
        const ONE_DAY = ONE_HOUR * 24;
-        openmct.install(openmct.plugins.LocalStorage());
+        // openmct.install(openmct.plugins.LocalStorage());
        openmct.install(openmct.plugins.CouchDB("http://localhost:5984/openmct"));
        openmct.install(openmct.plugins.example.Generator());
        openmct.install(openmct.plugins.example.EventGeneratorPlugin());
--- a/package.json
+++ b/package.json
@ -59,10 +59,11 @@
    "style-loader": "^3.3.1",
    "typescript": "4.9.3",
    "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-loader": "^16.0.0",
-    "vue-template-compiler": "2.6.14",
+    "@vue/compiler-sfc": "^3.1.0",
    "webpack": "5.74.0",
    "webpack-cli": "5.0.0",
    "webpack-dev-server": "4.11.1",
--- a/src/MCT.js
+++ b/src/MCT.js
@ -328,7 +328,7 @@ define([
     * @param {HTMLElement} [domElement] the DOM element in which to run
     *        MCT; if undefined, MCT will be run in the body of the document
     */
-    MCT.prototype.start = function (domElement = document.body, isHeadlessMode = false) {
+    MCT.prototype.start = function (domElement = document.body.firstElementChild, isHeadlessMode = false) {
        if (this.types.get('layout') === undefined) {
            this.install(this.plugins.DisplayLayout({
                showAsView: ['summary-widget']
@ -349,7 +349,7 @@ define([
         */
        if (!isHeadlessMode) {
-            const appLayout = new Vue({
+            const appLayout = Vue.createApp({
                components: {
                    'Layout': Layout.default
                },
@ -358,9 +358,8 @@ define([
                },
                template: '<Layout ref="layout"></Layout>'
            });
-            domElement.appendChild(appLayout.$mount().$el);
+            appLayout.mount(domElement);
-
+            this.layout = appLayout._instance.refs.layout;
            this.layout = appLayout.$refs.layout;
            Browse(this);
        }
--- a/src/api/forms/components/FormRow.vue
+++ b/src/api/forms/components/FormRow.vue
@ -109,7 +109,7 @@ export default {
        this.formControl.show(this.$refs.rowElement, this.row, this.onChange);
    },
-    destroyed() {
+    unmounted() {
        const destroy = this.formControl.destroy;
        if (destroy) {
            destroy();
--- a/src/api/forms/components/controls/AutoCompleteField.vue
+++ b/src/api/forms/components/controls/AutoCompleteField.vue
@ -173,7 +173,7 @@ export default {
            this.options = this.model.options;
        }
    },
-    destroyed() {
+    unmounted() {
        document.body.removeEventListener('click', this.handleOutsideClick);
    },
    methods: {
--- a/src/api/menu/components/Menu.vue
+++ b/src/api/menu/components/Menu.vue
@ -9,11 +9,9 @@
    >
        <template
            v-for="(actionGroups, index) in options.actions"
        >
            <div
            :key="index"
                role="group"
        >
            <div role="group">
                <li
                    v-for="action in actionGroups"
                    :key="action.name"
--- a/src/api/menu/components/SuperMenu.vue
+++ b/src/api/menu/components/SuperMenu.vue
@ -10,11 +10,9 @@
    >
        <template
            v-for="(actionGroups, index) in options.actions"
        >
            <div
            :key="index"
                role="group"
        >
            <div role="group">
                <li
                    v-for="action in actionGroups"
                    :key="action.name"
--- a/src/plugins/LADTable/components/LADRow.vue
+++ b/src/plugins/LADTable/components/LADRow.vue
@ -147,7 +147,7 @@ export default {
            this.setUnit();
        }
    },
-    destroyed() {
+    unmounted() {
        this.openmct.time.off('timeSystem', this.updateTimeSystem);
        this.telemetryCollection.off('add', this.setLatestValues);
        this.telemetryCollection.off('clear', this.resetValues);
--- a/src/plugins/LADTable/components/LADTable.vue
+++ b/src/plugins/LADTable/components/LADTable.vue
@ -89,7 +89,7 @@ export default {
        this.composition.on('reorder', this.reorder);
        this.composition.load();
    },
-    destroyed() {
+    unmounted() {
        this.composition.off('add', this.addItem);
        this.composition.off('remove', this.removeItem);
        this.composition.off('reorder', this.reorder);
--- a/src/plugins/LADTable/components/LadTableSet.vue
+++ b/src/plugins/LADTable/components/LadTableSet.vue
@ -33,11 +33,9 @@
    <tbody>
        <template
            v-for="ladTable in ladTableObjects"
        >
            <tr
            :key="ladTable.key"
                class="c-table__group-header js-lad-table-set__table-headers"
        >
            <tr class="c-table__group-header js-lad-table-set__table-headers">
                <td colspan="10">
                    {{ ladTable.domainObject.name }}
                </td>
@ -104,7 +102,7 @@ export default {
        this.composition.on('reorder', this.reorderLadTables);
        this.composition.load();
    },
-    destroyed() {
+    unmounted() {
        this.composition.off('add', this.addLadTable);
        this.composition.off('remove', this.removeLadTable);
        this.composition.off('reorder', this.reorderLadTables);
--- a/src/plugins/autoflow/AutoflowTabularView.js
+++ b/src/plugins/autoflow/AutoflowTabularView.js
@ -93,7 +93,7 @@ define([
                rowCount: 'reflow'
            },
            template: autoflowTemplate,
-            destroyed: function () {
+            unmounted: function () {
                controller.destroy();
                if (interval) {
--- a/src/plugins/charts/bar/BarGraphPlot.vue
+++ b/src/plugins/charts/bar/BarGraphPlot.vue
@ -84,7 +84,7 @@ export default {
        });
        this.registerListeners();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.plotResizeObserver) {
            this.plotResizeObserver.unobserve(this.$refs.plotWrapper);
            clearTimeout(this.resizeTimer);
--- a/src/plugins/charts/bar/BarGraphView.vue
+++ b/src/plugins/charts/bar/BarGraphView.vue
@ -71,7 +71,7 @@ export default {
        this.unobserveInterpolation = this.openmct.objects.observe(this.domainObject, 'configuration.useInterpolation', this.refreshData);
        this.unobserveBar = this.openmct.objects.observe(this.domainObject, 'configuration.useBar', this.refreshData);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.stopFollowingTimeContext();
        this.removeAllSubscriptions();
--- a/src/plugins/charts/bar/inspector/BarGraphOptions.vue
+++ b/src/plugins/charts/bar/inspector/BarGraphOptions.vue
@ -209,7 +209,7 @@ export default {
        this.registerListeners();
        this.composition.load();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.editor.off('isEditing', this.setEditState);
        this.stopListening();
    },
--- a/src/plugins/charts/bar/inspector/SeriesOptions.vue
+++ b/src/plugins/charts/bar/inspector/SeriesOptions.vue
@ -115,7 +115,7 @@ export default {
        this.initColorAndName();
        this.removeBarStylesListener = this.openmct.objects.observe(this.domainObject, `configuration.barStyles.series["${this.key}"]`, this.initColorAndName);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.removeBarStylesListener) {
            this.removeBarStylesListener();
        }
--- a/src/plugins/charts/scatter/ScatterPlotView.vue
+++ b/src/plugins/charts/scatter/ScatterPlotView.vue
@ -69,7 +69,7 @@ export default {
        this.unobserve = this.openmct.objects.observe(this.domainObject, 'configuration.axes', this.reloadTelemetry);
        this.unobserveUnderlayRanges = this.openmct.objects.observe(this.domainObject, 'configuration.ranges', this.reloadTelemetry);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.stopFollowingTimeContext();
        if (!this.composition) {
--- a/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
+++ b/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
@ -91,7 +91,7 @@ export default {
        this.$refs.plot.on('plotly_relayout', this.zoom);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.$refs.plot && this.$refs.plot.off) {
            this.$refs.plot.off('plotly_relayout', this.zoom);
        }
--- a/src/plugins/charts/scatter/inspector/PlotOptions.vue
+++ b/src/plugins/charts/scatter/inspector/PlotOptions.vue
@ -52,7 +52,7 @@ export default {
    mounted() {
        this.openmct.editor.on('isEditing', this.setEditState);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.editor.off('isEditing', this.setEditState);
    },
    methods: {
--- a/src/plugins/charts/scatter/inspector/PlotOptionsBrowse.vue
+++ b/src/plugins/charts/scatter/inspector/PlotOptionsBrowse.vue
@ -70,7 +70,7 @@ export default {
        this.registerListeners();
        this.composition.load();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.stopListening();
    },
    methods: {
--- a/src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue
+++ b/src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue
@ -101,7 +101,7 @@ export default {
        this.registerListeners();
        this.composition.load();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.stopListening();
    },
    methods: {
--- a/src/plugins/clock/components/Clock.vue
+++ b/src/plugins/clock/components/Clock.vue
@ -85,7 +85,7 @@ export default {
    mounted() {
        this.unlisten = ticker.listen(this.tick);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.unlisten) {
            this.unlisten();
        }
--- a/src/plugins/clock/components/ClockIndicator.vue
+++ b/src/plugins/clock/components/ClockIndicator.vue
@ -48,7 +48,7 @@ export default {
    mounted() {
        this.unlisten = ticker.listen(this.tick);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.unlisten) {
            this.unlisten();
        }
--- a/src/plugins/condition/components/Condition.vue
+++ b/src/plugins/condition/components/Condition.vue
@ -295,7 +295,7 @@ export default {
            return false;
        }
    },
-    destroyed() {
+    unmounted() {
        this.destroy();
    },
    mounted() {
--- a/src/plugins/condition/components/ConditionCollection.vue
+++ b/src/plugins/condition/components/ConditionCollection.vue
@ -128,7 +128,7 @@ export default {
            deep: true
        }
    },
-    destroyed() {
+    unmounted() {
        this.composition.off('add', this.addTelemetryObject);
        this.composition.off('remove', this.removeTelemetryObject);
        if (this.conditionManager) {
--- a/src/plugins/condition/components/TestData.vue
+++ b/src/plugins/condition/components/TestData.vue
@ -180,7 +180,7 @@ export default {
            deep: true
        }
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.resetApplied();
    },
    mounted() {
--- a/src/plugins/condition/components/inspector/StylesView.vue
+++ b/src/plugins/condition/components/inspector/StylesView.vue
@ -253,7 +253,7 @@ export default {
            return this.styleableFontItems.length && this.allowEditing;
        }
    },
-    destroyed() {
+    unmounted() {
        this.removeListeners();
        this.openmct.editor.off('isEditing', this.setEditState);
        this.stylesManager.off('styleSelected', this.applyStyleToSelection);
--- a/src/plugins/conditionWidget/components/ConditionWidget.vue
+++ b/src/plugins/conditionWidget/components/ConditionWidget.vue
@ -75,7 +75,7 @@ export default {
            this.listenToConditionSetChanges();
        }
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.conditionSetIdentifier = null;
        if (this.unlisten) {
--- a/src/plugins/displayLayout/components/AlphanumericFormat.vue
+++ b/src/plugins/displayLayout/components/AlphanumericFormat.vue
@ -66,7 +66,7 @@ export default {
        this.openmct.selection.on('change', this.handleSelection);
        this.handleSelection(this.openmct.selection.get());
    },
-    destroyed() {
+    unmounted() {
        this.openmct.editor.off('isEditing', this.toggleEdit);
        this.openmct.selection.off('change', this.handleSelection);
    },
--- a/src/plugins/displayLayout/components/BoxView.vue
+++ b/src/plugins/displayLayout/components/BoxView.vue
@ -113,7 +113,7 @@ export default {
        this.removeSelectable = this.openmct.selection.selectable(
            this.$el, this.context, this.initSelect);
    },
-    destroyed() {
+    unmounted() {
        if (this.removeSelectable) {
            this.removeSelectable();
        }
--- a/src/plugins/displayLayout/components/DisplayLayout.vue
+++ b/src/plugins/displayLayout/components/DisplayLayout.vue
@ -225,7 +225,7 @@ export default {
        this.watchDisplayResize();
    },
-    destroyed: function () {
+    unmounted: function () {
        this.openmct.selection.off('change', this.setSelection);
        this.composition.off('add', this.addChild);
        this.composition.off('remove', this.removeChild);
--- a/src/plugins/displayLayout/components/EllipseView.vue
+++ b/src/plugins/displayLayout/components/EllipseView.vue
@ -113,7 +113,7 @@ export default {
        this.removeSelectable = this.openmct.selection.selectable(
            this.$el, this.context, this.initSelect);
    },
-    destroyed() {
+    unmounted() {
        if (this.removeSelectable) {
            this.removeSelectable();
        }
--- a/src/plugins/displayLayout/components/ImageView.vue
+++ b/src/plugins/displayLayout/components/ImageView.vue
@ -120,7 +120,7 @@ export default {
        this.removeSelectable = this.openmct.selection.selectable(
            this.$el, this.context, this.initSelect);
    },
-    destroyed() {
+    unmounted() {
        if (this.removeSelectable) {
            this.removeSelectable();
        }
--- a/src/plugins/displayLayout/components/LineView.vue
+++ b/src/plugins/displayLayout/components/LineView.vue
@ -269,7 +269,7 @@ export default {
        };
        this.removeSelectable = this.openmct.selection.selectable(this.$el, this.context, this.initSelect);
    },
-    destroyed() {
+    unmounted() {
        if (this.removeSelectable) {
            this.removeSelectable();
        }
--- a/src/plugins/displayLayout/components/SubobjectView.vue
+++ b/src/plugins/displayLayout/components/SubobjectView.vue
@ -138,7 +138,7 @@ export default {
                .then(this.setObject);
        }
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.removeSelectable) {
            this.removeSelectable();
        }
--- a/src/plugins/displayLayout/components/TelemetryView.vue
+++ b/src/plugins/displayLayout/components/TelemetryView.vue
@ -225,7 +225,7 @@ export default {
        this.status = this.openmct.status.get(this.item.identifier);
        this.removeStatusListener = this.openmct.status.observe(this.item.identifier, this.setStatus);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.removeStatusListener();
        if (this.removeSelectable) {
--- a/src/plugins/displayLayout/components/TextView.vue
+++ b/src/plugins/displayLayout/components/TextView.vue
@ -122,7 +122,7 @@ export default {
        this.removeSelectable = this.openmct.selection.selectable(
            this.$el, this.context, this.initSelect);
    },
-    destroyed() {
+    unmounted() {
        if (this.removeSelectable) {
            this.removeSelectable();
        }
--- a/src/plugins/displayLayout/mixins/objectStyles-mixin.js
+++ b/src/plugins/displayLayout/mixins/objectStyles-mixin.js
@ -38,7 +38,7 @@ export default {
        this.objectStyle = this.getObjectStyleForItem(this.parentDomainObject.configuration.objectStyles);
        this.initObjectStyles();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.stopListeningObjectStyles) {
            this.stopListeningObjectStyles();
        }
--- a/src/plugins/faultManagement/FaultManagementView.vue
+++ b/src/plugins/faultManagement/FaultManagementView.vue
@ -47,7 +47,7 @@ export default {
        this.unsubscribe = this.openmct.faults
            .subscribe(this.domainObject, this.updateFault);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.unsubscribe) {
            this.unsubscribe();
        }
--- a/src/plugins/filters/components/FilterField.vue
+++ b/src/plugins/filters/components/FilterField.vue
@ -89,7 +89,7 @@ export default {
    mounted() {
        this.openmct.editor.on('isEditing', this.toggleIsEditing);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.editor.off('isEditing', this.toggleIsEditing);
    },
    methods: {
--- a/src/plugins/filters/components/FilterObject.vue
+++ b/src/plugins/filters/components/FilterObject.vue
@ -121,7 +121,7 @@ export default {
        this.objectCssClass = type.definition.cssClass;
        this.openmct.editor.on('isEditing', this.toggleIsEditing);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.editor.off('isEditing', this.toggleIsEditing);
    },
    methods: {
--- a/src/plugins/filters/components/FiltersView.vue
+++ b/src/plugins/filters/components/FiltersView.vue
@ -91,7 +91,7 @@ export default {
        this.unobserve = this.openmct.objects.observe(this.providedObject, 'configuration.filters', this.updatePersistedFilters);
        this.unobserveGlobalFilters = this.openmct.objects.observe(this.providedObject, 'configuration.globalFilters', this.updateGlobalFilters);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.composition.off('add', this.addChildren);
        this.composition.off('remove', this.removeChildren);
        this.unobserve();
--- a/src/plugins/flexibleLayout/components/container.vue
+++ b/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"
@ -134,7 +132,7 @@ export default {
        this.unsubscribeSelection = this.openmct.selection.selectable(this.$el, context, false);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.unsubscribeSelection();
    },
    methods: {
--- a/src/plugins/flexibleLayout/components/dropHint.vue
+++ b/src/plugins/flexibleLayout/components/dropHint.vue
@ -56,7 +56,7 @@ export default {
        document.addEventListener('dragend', this.dragend);
        document.addEventListener('drop', this.dragend);
    },
-    destroyed() {
+    unmounted() {
        document.removeEventListener('dragstart', this.dragstart);
        document.removeEventListener('dragend', this.dragend);
        document.removeEventListener('drop', this.dragend);
--- a/src/plugins/flexibleLayout/components/flexibleLayout.vue
+++ b/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="`hint-top-${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"
@ -66,7 +67,6 @@
            <resize-handle
                v-if="index !== (containers.length - 1)"
                :key="`handle-${container.id}`"
                :index="index"
                :orientation="rowsLayout ? 'vertical' : 'horizontal'"
                :is-editing="isEditing"
@ -77,7 +77,6 @@
            <drop-hint
                v-if="containers.length > 1"
                :key="`hint-bottom-${container.id}`"
                class="c-fl-frame__drop-hint"
                :index="index"
                :allow-drop="allowContainerDrop"
@ -180,7 +179,7 @@ export default {
        this.composition.on('add', this.addFrame);
        this.composition.load();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.composition.off('remove', this.removeChildObject);
        this.composition.off('add', this.addFrame);
    },
--- a/src/plugins/flexibleLayout/components/frame.vue
+++ b/src/plugins/flexibleLayout/components/frame.vue
@ -113,7 +113,7 @@ export default {
        this.dragGhost = document.getElementById('js-fl-drag-ghost');
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.domainObjectPromise) {
            this.domainObjectPromise.then(() => {
                if (this?.domainObject?.isMutable) {
--- a/src/plugins/flexibleLayout/components/resizeHandle.vue
+++ b/src/plugins/flexibleLayout/components/resizeHandle.vue
@ -56,7 +56,7 @@ export default {
        document.addEventListener('dragend', this.unsetDragging);
        document.addEventListener('drop', this.unsetDragging);
    },
-    destroyed() {
+    unmounted() {
        document.removeEventListener('dragstart', this.setDragging);
        document.removeEventListener('dragend', this.unsetDragging);
        document.removeEventListener('drop', this.unsetDragging);
--- a/src/plugins/folderView/components/composition-loader.js
+++ b/src/plugins/folderView/components/composition-loader.js
@ -23,7 +23,7 @@ export default {
        this.composition.on('remove', this.remove);
        this.composition.load();
    },
-    destroyed() {
+    unmounted() {
        if (!this.composition) {
            return;
        }
--- a/src/plugins/folderView/components/status-listener.js
+++ b/src/plugins/folderView/components/status-listener.js
@ -27,7 +27,7 @@ export default {
        this.status = this.openmct.status.get(identifier);
        this.removeStatusListener = this.openmct.status.observe(identifier, this.setStatus);
    },
-    destroyed() {
+    unmounted() {
        this.removeStatusListener();
    }
 };
--- a/src/plugins/gauge/components/Gauge.vue
+++ b/src/plugins/gauge/components/Gauge.vue
@ -536,7 +536,7 @@ export default {
        this.openmct.time.on('bounds', this.refreshData);
        this.openmct.time.on('timeSystem', this.setTimeSystem);
    },
-    destroyed() {
+    unmounted() {
        this.composition.off('add', this.addedToComposition);
        this.composition.off('remove', this.removeTelemetryObject);
--- a/src/plugins/imagery/components/ImageControls.vue
+++ b/src/plugins/imagery/components/ImageControls.vue
@ -159,7 +159,7 @@ export default {
        document.addEventListener('keyup', this.handleKeyUp);
        this.clearWheelZoom = _.debounce(this.clearWheelZoom, 600);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        document.removeEventListener('keydown', this.handleKeyDown);
        document.removeEventListener('keyup', this.handleKeyUp);
    },
--- a/src/plugins/imagery/components/ImageryTimeView.vue
+++ b/src/plugins/imagery/components/ImageryTimeView.vue
@ -93,7 +93,7 @@ export default {
        this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.observeForChanges);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.imageryStripResizeObserver) {
            this.imageryStripResizeObserver.disconnect();
        }
--- a/src/plugins/imagery/components/ImageryView.vue
+++ b/src/plugins/imagery/components/ImageryView.vue
@ -175,7 +175,7 @@
                :selected="focusedImageIndex === index && isPaused"
                :real-time="!isFixed"
                :viewable-area="focusedImageIndex === index ? viewableArea : null"
-                @click.native="thumbnailClicked(index)"
+                @click="thumbnailClicked(index)"
            />
        </div>
@ -643,7 +643,7 @@ export default {
        this.listenTo(this.focusedImageWrapper, 'wheel', this.wheelZoom, this);
        this.loadVisibleLayers();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.persistVisibleLayers();
        this.stopFollowingTimeContext();
--- a/src/plugins/imagery/components/ImageryViewMenuSwitcher.vue
+++ b/src/plugins/imagery/components/ImageryViewMenuSwitcher.vue
@ -46,7 +46,7 @@ export default {
    mounted() {
        document.addEventListener('click', this.hideMenu);
    },
-    destroyed() {
+    unmounted() {
        document.removeEventListener('click', this.hideMenu);
    },
    methods: {
--- a/src/plugins/imagery/mixins/imageryData.js
+++ b/src/plugins/imagery/mixins/imageryData.js
@ -50,7 +50,7 @@ export default {
        this.telemetryCollection.on('clear', this.dataCleared);
        this.telemetryCollection.load();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.unsubscribe) {
            this.unsubscribe();
            delete this.unsubscribe;
--- a/src/plugins/notebook/components/Notebook.vue
+++ b/src/plugins/notebook/components/Notebook.vue
@ -302,7 +302,7 @@ export default {
        this.filterAndSortEntries();
        this.unobserveEntries = this.openmct.objects.observe(this.domainObject, '*', this.filterAndSortEntries);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.unlisten) {
            this.unlisten();
        }
--- a/src/plugins/operatorStatus/operatorStatus/OperatorStatus.vue
+++ b/src/plugins/operatorStatus/operatorStatus/OperatorStatus.vue
@ -90,7 +90,7 @@ export default {
            };
        }
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.user.status.off('statusChange', this.setStatus);
        this.openmct.user.status.off('pollQuestionChange', this.setPollQuestion);
    },
--- a/src/plugins/operatorStatus/pollQuestion/PollQuestion.vue
+++ b/src/plugins/operatorStatus/pollQuestion/PollQuestion.vue
@ -117,7 +117,7 @@ export default {
        this.fetchStatusSummary();
        this.openmct.user.status.on('statusChange', this.fetchStatusSummary);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.user.status.off('statusChange', this.fetchStatusSummary);
        this.openmct.user.status.off('pollQuestionChange', this.setPollQuestion);
    },
--- a/src/plugins/plan/Plan.vue
+++ b/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"
@ -107,7 +107,7 @@ export default {
        this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.setStatus);
        this.status = this.openmct.status.get(this.domainObject.identifier);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        clearInterval(this.resizeTimer);
        this.stopFollowingTimeContext();
        if (this.unlisten) {
--- a/src/plugins/plan/inspector/PlanActivitiesView.vue
+++ b/src/plugins/plan/inspector/PlanActivitiesView.vue
@ -65,7 +65,7 @@ export default {
        this.openmct.selection.on('change', this.updateSelection);
        this.openmct.time.on('timeSystem', this.setFormatters);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.selection.off('change', this.updateSelection);
        this.openmct.time.off('timeSystem', this.setFormatters);
    },
--- a/src/plugins/plot/MctPlot.vue
+++ b/src/plugins/plot/MctPlot.vue
@ -365,7 +365,7 @@ export default {
        this.loaded = true;
    },
-    beforeDestroy() {
+    beforeUnmount() {
        document.removeEventListener('keydown', this.handleKeyDown);
        document.removeEventListener('keyup', this.handleKeyUp);
        this.destroy();
--- a/src/plugins/plot/MctTicks.vue
+++ b/src/plugins/plot/MctTicks.vue
@ -131,7 +131,7 @@ export default {
        this.listenTo(this.axis, 'change:key', this.updateTicksForceRegeneration, this);
        this.updateTicks();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.stopListening();
    },
    methods: {
--- a/src/plugins/plot/Plot.vue
+++ b/src/plugins/plot/Plot.vue
@ -81,7 +81,7 @@ export default {
        eventHelpers.extend(this);
        this.imageExporter = new ImageExporter(this.openmct);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.destroy();
    },
    methods: {
--- a/src/plugins/plot/axis/XAxis.vue
+++ b/src/plugins/plot/axis/XAxis.vue
@ -89,7 +89,7 @@ export default {
        this.openmct.time.on('timeSystem', this.syncXAxisToTimeSystem);
        this.listenTo(this.xAxis, 'change', this.setUpXAxisOptions);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.time.off('timeSystem', this.syncXAxisToTimeSystem);
    },
    methods: {
--- a/src/plugins/plot/chart/MctChart.vue
+++ b/src/plugins/plot/chart/MctChart.vue
@ -117,7 +117,7 @@ export default {
        this.config.series.forEach(this.onSeriesAdd, this);
        this.$emit('chartLoaded');
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.destroy();
    },
    methods: {
--- a/src/plugins/plot/inspector/PlotOptions.vue
+++ b/src/plugins/plot/inspector/PlotOptions.vue
@ -52,7 +52,7 @@ export default {
    mounted() {
        this.openmct.editor.on('isEditing', this.setEditState);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.editor.off('isEditing', this.setEditState);
    },
    methods: {
--- a/src/plugins/plot/inspector/PlotOptionsBrowse.vue
+++ b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
@ -192,7 +192,7 @@ export default {
        this.loaded = true;
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.stopListening();
    },
    methods: {
--- a/src/plugins/plot/inspector/PlotOptionsEdit.vue
+++ b/src/plugins/plot/inspector/PlotOptionsEdit.vue
@ -94,7 +94,7 @@ export default {
        this.registerListeners();
        this.loaded = true;
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.stopListening();
    },
    methods: {
--- a/src/plugins/plot/inspector/PlotOptionsItem.vue
+++ b/src/plugins/plot/inspector/PlotOptionsItem.vue
@ -163,7 +163,7 @@ export default {
        this.status = this.openmct.status.get(this.series.domainObject.identifier);
        this.removeStatusListener = this.openmct.status.observe(this.series.domainObject.identifier, this.setStatus);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.removeStatusListener) {
            this.removeStatusListener();
        }
--- a/src/plugins/plot/inspector/forms/SeriesForm.vue
+++ b/src/plugins/plot/inspector/forms/SeriesForm.vue
@ -218,7 +218,7 @@ export default {
        this.status = this.openmct.status.get(this.series.domainObject.identifier);
        this.removeStatusListener = this.openmct.status.observe(this.series.domainObject.identifier, this.setStatus);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.removeStatusListener) {
            this.removeStatusListener();
        }
--- a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
+++ b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
@ -114,7 +114,7 @@ export default {
        }, this);
        this.initialize();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.stopListening();
    },
    methods: {
--- a/src/plugins/plot/legend/PlotLegendItemExpanded.vue
+++ b/src/plugins/plot/legend/PlotLegendItemExpanded.vue
@ -151,7 +151,7 @@ export default {
        }, this);
        this.initialize();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.stopListening();
    },
    methods: {
--- a/src/plugins/plot/stackedPlot/StackedPlot.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlot.vue
@ -116,7 +116,7 @@ export default {
            return Math.max(...Object.values(this.tickWidthMap));
        }
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.destroy();
    },
    mounted() {
--- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
@ -98,7 +98,7 @@ export default {
    mounted() {
        this.updateView();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.removeSelectable) {
            this.removeSelectable();
        }
--- a/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js
+++ b/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js
@ -34,7 +34,7 @@ export default {
        this.objectStyles = this.getObjectStyleForItem(this.childObject.configuration);
        this.initObjectStyles();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.stopListeningStyles) {
            this.stopListeningStyles();
        }
--- a/src/plugins/tabs/components/tabs.vue
+++ b/src/plugins/tabs/components/tabs.vue
@ -147,10 +147,10 @@ export default {
        document.addEventListener('dragstart', this.dragstart);
        document.addEventListener('dragend', this.dragend);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.persistCurrentTabIndex(this.currentTabIndex);
    },
-    destroyed() {
+    unmounted() {
        this.composition.off('add', this.addItem);
        this.composition.off('remove', this.removeItem);
        this.composition.off('reorder', this.onReorder);
--- a/src/plugins/telemetryTable/components/sizing-row.vue
+++ b/src/plugins/telemetryTable/components/sizing-row.vue
@ -28,7 +28,7 @@ export default {
            this.pollForRowHeight();
        }
    },
-    destroyed() {
+    unmounted() {
        this.clearPoll();
    },
    methods: {
--- a/src/plugins/telemetryTable/components/table-configuration.vue
+++ b/src/plugins/telemetryTable/components/table-configuration.vue
@ -97,7 +97,7 @@ export default {
                this.unlisteners.push(compositionCollection.off.bind(compositionCollection, 'remove', this.removeObject));
            });
    },
-    destroyed() {
+    unmounted() {
        this.tableConfiguration.destroy();
        this.openmct.editor.off('isEditing', this.toggleEdit);
        this.unlisteners.forEach((unlisten) => unlisten());
--- a/src/plugins/telemetryTable/components/table-footer-indicator.vue
+++ b/src/plugins/telemetryTable/components/table-footer-indicator.vue
@ -94,7 +94,7 @@ export default {
        this.table.configuration.on('change', this.handleConfigurationChanges);
        this.updateFilters(filters);
    },
-    destroyed() {
+    unmounted() {
        this.table.configuration.off('change', this.handleConfigurationChanges);
    },
    methods: {
--- a/src/plugins/telemetryTable/components/table.vue
+++ b/src/plugins/telemetryTable/components/table.vue
@ -257,11 +257,11 @@
                @change-height="setRowHeight"
            />
            <tr>
-                <template v-for="(title, key) in headers">
+                <template
-                    <th
+                    v-for="(title, key) in headers"
                    :key="key"
                        :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}"
                >
                    <th :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}">
                        {{ title }}
                    </th>
                </template>
@ -510,7 +510,7 @@ export default {
        this.table.initialize();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.table.off('object-added', this.addObject);
        this.table.off('object-removed', this.removeObject);
        this.table.off('historical-rows-processed', this.checkForMarkedRows);
--- a/src/plugins/timeConductor/Conductor.vue
+++ b/src/plugins/timeConductor/Conductor.vue
@ -139,7 +139,7 @@ export default {
        this.openmct.time.on('timeSystem', this.setTimeSystem);
        this.openmct.time.on('clock', this.setViewFromClock);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        document.removeEventListener('keydown', this.handleKeyDown);
        document.removeEventListener('keyup', this.handleKeyUp);
    },
--- a/src/plugins/timeConductor/ConductorInputsFixed.vue
+++ b/src/plugins/timeConductor/ConductorInputsFixed.vue
@ -125,7 +125,7 @@ export default {
        this.openmct.time.on('timeSystem', this.setTimeSystem);
        this.setTimeContext();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.clearAllValidation();
        this.openmct.time.off('timeSystem', this.setTimeSystem);
        this.stopFollowingTimeContext();
--- a/src/plugins/timeConductor/ConductorInputsRealtime.vue
+++ b/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"
        />
@ -147,7 +147,7 @@ export default {
        this.openmct.time.on('timeSystem', this.setTimeSystem);
        this.setTimeContext();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.time.off('timeSystem', this.setTimeSystem);
        this.stopFollowingTime();
    },
--- a/src/plugins/timeConductor/ConductorMode.vue
+++ b/src/plugins/timeConductor/ConductorMode.vue
@ -60,7 +60,7 @@ export default {
        this.openmct.time.on('clock', this.setViewFromClock);
    },
-    destroyed: function () {
+    unmounted: function () {
        this.openmct.time.off('clock', this.setViewFromClock);
    },
    methods: {
--- a/src/plugins/timeConductor/ConductorTimeSystem.vue
+++ b/src/plugins/timeConductor/ConductorTimeSystem.vue
@ -50,7 +50,7 @@ export default {
        this.openmct.time.on('timeSystem', this.setViewFromTimeSystem);
        this.openmct.time.on('clock', this.setViewFromClock);
    },
-    destroyed: function () {
+    unmounted: function () {
        this.openmct.time.off('timeSystem', this.setViewFromTimeSystem);
        this.openmct.time.on('clock', this.setViewFromClock);
    },
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@ -135,7 +135,7 @@ export default {
    mounted() {
        this.initialize();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.stopFollowingTimeContext();
        this.destroyIndependentTime();
    },
--- a/src/plugins/timeConductor/independent/Mode.vue
+++ b/src/plugins/timeConductor/independent/Mode.vue
@ -98,7 +98,7 @@ export default {
        this.followTimeConductor();
    },
-    destroyed: function () {
+    unmounted: function () {
        this.stopFollowTimeConductor();
    },
    methods: {
--- a/src/plugins/timeConductor/plugin.js
+++ b/src/plugins/timeConductor/plugin.js
@ -20,6 +20,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 import { markRaw } from 'vue';
 import Conductor from './Conductor.vue';
 function isTruthy(a) {
@ -91,16 +92,17 @@ function throwIfError(configResult) {
 }
 function mountComponent(openmct, configuration) {
-    openmct.layout.conductorComponent = Object.create({
+    const conductorApp = {
        components: {
            Conductor
        },
        template: "<conductor></conductor>",
        provide: {
            openmct: openmct,
            configuration: configuration
-        }
+        },
-    });
+        template: "<conductor />"
    };
    openmct.layout.conductorComponent = markRaw(conductorApp);
 }
 export default function (config) {
--- a/src/plugins/timeConductor/timePopup.vue
+++ b/src/plugins/timeConductor/timePopup.vue
@ -110,7 +110,7 @@ export default {
        this.setOffset();
        document.addEventListener('click', this.hide);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        document.removeEventListener('click', this.hide);
    },
    methods: {
--- a/src/plugins/timeline/TimelineObjectView.vue
+++ b/src/plugins/timeline/TimelineObjectView.vue
@ -83,7 +83,7 @@ export default {
                .then(this.setObject);
        }
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.removeSelectable) {
            this.removeSelectable();
        }
--- a/src/plugins/timeline/TimelineViewLayout.vue
+++ b/src/plugins/timeline/TimelineViewLayout.vue
@ -86,7 +86,7 @@ export default {
            timeOptions: this.domainObject.configuration.timeOptions
        };
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.composition.off('add', this.addItem);
        this.composition.off('remove', this.removeItem);
        this.composition.off('reorder', this.reorder);
--- a/src/plugins/timelist/Timelist.vue
+++ b/src/plugins/timelist/Timelist.vue
@ -135,7 +135,7 @@ export default {
        this.setViewFromClock(this.openmct.time.clock());
    },
-    beforeDestroy() {
+    beforeUnmount() {
        if (this.unlisten) {
            this.unlisten();
        }
--- a/src/plugins/timelist/inspector/EventProperties.vue
+++ b/src/plugins/timelist/inspector/EventProperties.vue
@ -98,7 +98,7 @@ export default {
        this.openmct.editor.on('isEditing', this.setEditState);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.editor.off('isEditing', this.setEditState);
    },
    methods: {
--- a/src/plugins/timelist/inspector/Filtering.vue
+++ b/src/plugins/timelist/inspector/Filtering.vue
@ -48,7 +48,7 @@ export default {
    mounted() {
        this.openmct.editor.on('isEditing', this.setEditState);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.editor.off('isEditing', this.setEditState);
    },
    methods: {
--- a/src/plugins/timelist/inspector/TimelistPropertiesView.vue
+++ b/src/plugins/timelist/inspector/TimelistPropertiesView.vue
@ -123,7 +123,7 @@ export default {
    mounted() {
        this.openmct.editor.on('isEditing', this.setEditState);
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.editor.off('isEditing', this.setEditState);
    },
    methods: {
--- a/src/plugins/timer/components/Timer.vue
+++ b/src/plugins/timer/components/Timer.vue
@ -204,7 +204,7 @@ export default {
            this.showOrHideAvailableActions();
        });
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.active = false;
        if (this.unlisten) {
            this.unlisten();
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@ -141,7 +141,7 @@ a {
    }
 }
-body, html {
+body, body > div, html {
    height: 100%;
    width: 100%;
 }
--- a/src/ui/color/ColorSwatch.vue
+++ b/src/ui/color/ColorSwatch.vue
@ -127,7 +127,7 @@ export default {
        this.openmct.editor.on('isEditing', this.setEditState);
        this.initialize();
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.openmct.editor.off('isEditing', this.setEditState);
    },
    methods: {
--- a/src/ui/components/ObjectFrame.vue
+++ b/src/ui/components/ObjectFrame.vue
@ -178,7 +178,7 @@ export default {
            this.soViewResizeObserver.observe(this.$refs.soView);
        }
    },
-    beforeDestroy() {
+    beforeUnmount() {
        this.removeStatusListener();
        if (this.actionCollection) {
--- a/src/ui/components/ObjectLabel.vue
+++ b/src/ui/components/ObjectLabel.vue
@ -74,7 +74,7 @@ export default {
        this.status = this.openmct.status.get(this.domainObject.identifier);
        this.previewAction = new PreviewAction(this.openmct);
    },
-    destroyed() {
+    unmounted() {
        this.removeStatusListener();
    },
    methods: {
--- a/src/ui/components/ObjectView.vue
+++ b/src/ui/components/ObjectView.vue
@ -64,7 +64,8 @@ export default {
    },
    data() {
        return {
-            domainObject: this.defaultObject
+            domainObject: this.defaultObject,
            viewKey: undefined
        };
    },
    computed: {
@ -89,7 +90,7 @@ export default {
            return this.domainObject && ('is-object-type-' + this.domainObject.type);
        }
    },
-    destroyed() {
+    unmounted() {
        this.clear();
        if (this.releaseEditModeHandler) {
            this.releaseEditModeHandler();
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jamie V	1258b89d39	found some more "destroyed" that needed to be "unmounted" and fixed conductor code	2022-12-08 11:53:27 -08:00
Jamie V	034337aed3	fixes warning of viewKey being accessed during render (think in computed prop) and not being defined on the instance	2022-12-07 16:53:34 -08:00
Jamie V	f3376ad861	updating tree watched arrays to make sure they work properly with vue 3	2022-12-07 16:47:53 -08:00
Jamie V	59a14c91fd	renaming "destroyed" to "unmounted"	2022-12-07 16:13:18 -08:00
Jamie V	03833fbdee	renaming "beforeDestroy" to "beforeUnmount"	2022-12-07 16:00:41 -08:00
Jamie V	3214ceb80c	removed some commented code and added the compiler option of perserving whitespace to be like vue 2	2022-12-07 15:50:53 -08:00
Jamie V	d638314cbd	merging in latest changes from master	2022-12-07 14:38:56 -08:00
Jamie V	d599084816	vue apps are created differently in vue 3, updated our main layout vue creation and styles to handle new div that is need in the body	2022-11-15 17:48:35 -08:00
Jamie V	1efe9b56b1	slots work a bit different in vue 3, updating accordingly	2022-11-15 11:55:34 -08:00
Jamie V	5ea92674bd	unchanging mct.js	2022-11-15 11:21:28 -08:00
Jamie V	50996d3a54	removing debug	2022-11-15 11:21:00 -08:00
Jamie V	db300d861c	cannot assign a value to a prop, it changes and this is unneccessary anyways	2022-11-15 11:19:02 -08:00
Jamie V	ac809b6e13	WIP: initial commit	2022-11-15 11:09:08 -08:00