When dropping an unsupported file onto a notebook entry, tell the user it isnt supported (#7115)

* handle unknown files and deal with copy/paste

* add some nice errors if couch pukes

* added how to adjust couchdb limits

* throw error on anntotation change

* keep blockquotes

* add test for blockquotes

* allow multi-file drop of images too

* add test for big files

* spell check

* check for null

* need to ignore console errors

* reorder tests so we can ignore console errors

* when creating new entry, ready it for editing

* fix tests and empty embeds

* fix tests

* found similar issue from notebooks in plots

.cspell.json

@@ -483,7 +483,11 @@
     "websockets",
     "swgs",
     "memlab",
-    "devmode"
+    "devmode",
+    "blockquote",
+    "blockquotes",
+    "Blockquote",
+    "Blockquotes"
   ],
   "dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en_US"],
   "ignorePaths": [

.eslintrc.js

@@ -15,8 +15,7 @@ module.exports = {
     'plugin:compat/recommended',
     'plugin:vue/vue3-recommended',
     'plugin:you-dont-need-lodash-underscore/compatible',
-    'plugin:prettier/recommended',
-    'plugin:no-unsanitized/DOM'
+    'plugin:prettier/recommended'
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {
@@ -146,29 +145,26 @@ module.exports = {
     'no-implicit-coercion': 'error',
     //https://eslint.org/docs/rules/no-unneeded-ternary
     'no-unneeded-ternary': 'error',
-    "unicorn/filename-case": [
-      "error",
+    'unicorn/filename-case': [
+      'error',
       {
-        "cases": {
-          "pascalCase": true
+        cases: {
+          pascalCase: true
         },
-        "ignore": [
-          "^.*\\.js$"
-        ]
+        ignore: ['^.*\\.js$']
       }
     ],
     'vue/first-attribute-linebreak': 'error',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/singleline-html-element-content-newline': 'off',
-    'vue/multi-word-component-names': 'off', // TODO enable, align with conventions
-    'vue/no-mutating-props': 'off'
+    'vue/no-mutating-props': 'off' // TODO: Remove this rule and fix resulting errors
   },
   overrides: [
     {
       files: LEGACY_FILES,
       rules: {
         'no-unused-vars': [
-          'warn',
+          'error',
           {
             vars: 'all',
             args: 'none',

API.md

@@ -94,9 +94,6 @@ well as assets such as html, css, and images necessary for the UI.
 
 ## Starting an Open MCT application
 
-> [!WARNING]
-> Open MCT provides a development server via `webpack-dev-server` (`npm start`). **This should be used for development purposes only and should never be deployed to a production environment**.
-
 To start a minimally functional Open MCT application, it is necessary to
 include the Open MCT distributable, enable some basic plugins, and bootstrap
 the application. The tutorials walk through the process of getting Open MCT up

e2e/helper/notebookUtils.js

@@ -34,7 +34,6 @@ async function enterTextEntry(page, text) {
   await page.locator(NOTEBOOK_DROP_AREA).click();
 
   // enter text
-  await page.getByLabel('Notebook Entry Display').last().click();
   await page.getByLabel('Notebook Entry Input').last().fill(text);
   await commitEntry(page);
 }
@@ -53,6 +52,7 @@ async function dragAndDropEmbed(page, notebookObject) {
   await page.click('button[title="Show selected item in tree"]');
   // Drag and drop the SWG into the notebook
   await page.dragAndDrop(`text=${swg.name}`, NOTEBOOK_DROP_AREA);
+  await commitEntry(page);
 }
 
 /**

e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js

@@ -209,7 +209,6 @@ test.describe('Example Imagery Object', () => {
     const canvasBoundingBox = await canvas.boundingBox();
     const canvasCenterX = canvasBoundingBox.x + canvasBoundingBox.width / 2;
     const canvasCenterY = canvasBoundingBox.y + canvasBoundingBox.height / 2;
-
     await Promise.all(tagHotkey.map((x) => page.keyboard.down(x)));
     await page.mouse.down();
     // steps not working for me here
@@ -222,7 +221,7 @@ test.describe('Example Imagery Object', () => {
     await expect(page.locator('[role="toolbar"][aria-label="Image controls"]')).toBeVisible();
     await Promise.all(tagHotkey.map((x) => page.keyboard.up(x)));
 
-    //Wait for canvas to stabilize.
+    // Wait for canvas to stabilize.
     await canvas.hover({ trial: true });
 
     // add some tags
@@ -234,6 +233,20 @@ test.describe('Example Imagery Object', () => {
     await page.getByRole('button', { name: /Add Tag/ }).click();
     await page.getByPlaceholder('Type to select tag').click();
     await page.getByText('Science').click();
+
+    // click on a separate part of the canvas to ensure no tags appear
+    await page.mouse.click(canvasCenterX + 10, canvasCenterY + 10);
+    await expect(page.getByText('Driving')).toBeHidden();
+    await expect(page.getByText('Science')).toBeHidden();
+
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7083'
+    });
+    // click on annotation again and expect tags to appear
+    await page.mouse.click(canvasCenterX - 50, canvasCenterY - 50);
+    await expect(page.getByText('Driving')).toBeVisible();
+    await expect(page.getByText('Science')).toBeVisible();
   });
 
   test('Can use + - buttons to zoom on the image @unstable', async ({ page }) => {

e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js

@@ -279,7 +279,7 @@ test.describe('Notebook entry tests', () => {
 
     // Click .c-notebook__drag-area
     await page.locator('.c-notebook__drag-area').click();
-    await expect(page.getByLabel('Notebook Entry Display')).toBeVisible();
+    await expect(page.getByLabel('Notebook Entry Input')).toBeVisible();
     await expect(page.getByLabel('Notebook Entry', { exact: true })).toHaveClass(/is-selected/);
   });
   test('When an object is dropped into a notebook, a new entry is created and it should be focused @unstable', async ({
@@ -514,10 +514,23 @@ test.describe('Notebook entry tests', () => {
     const childItem = page.locator('li:has-text("List Item 2") ol li:has-text("Order 2")');
     await expect(childItem).toBeVisible();
 
-    // Blocks
-    const blockTest = '```javascript\nconst foo = "bar";\nconst bar = "foo";\n```';
-    await nbUtils.enterTextEntry(page, blockTest);
+    // Code Blocks
+    const codeblockTest = '```javascript\nconst foo = "bar";\nconst bar = "foo";\n```';
+    await nbUtils.enterTextEntry(page, codeblockTest);
     const codeBlock = page.locator('code.language-javascript:has-text("const foo = \\"bar\\";")');
     await expect(codeBlock).toBeVisible();
+
+    // Blockquotes
+    const blockquoteTest =
+      'This is a quote by Mark Twain:\n> "The man with a new idea is a crank\n>until the idea succeeds."';
+    await nbUtils.enterTextEntry(page, blockquoteTest);
+    const firstLineOfBlockquoteText = page.locator(
+      'blockquote:has-text("The man with a new idea is a crank")'
+    );
+    await expect(firstLineOfBlockquoteText).toBeVisible();
+    const secondLineOfBlockquoteText = page.locator(
+      'blockquote:has-text("until the idea succeeds")'
+    );
+    await expect(secondLineOfBlockquoteText).toBeVisible();
   });
 });

e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js

@@ -188,12 +188,11 @@ test.describe('Snapshot image tests', () => {
     }, fileData);
 
     await page.dispatchEvent('.c-notebook__drag-area', 'drop', { dataTransfer: dropTransfer });
-
+    await page.locator('.c-ne__save-button > button').click();
     // be sure that entry was created
     await expect(page.getByText('favicon-96x96.png')).toBeVisible();
 
     await page.getByRole('img', { name: 'favicon-96x96.png thumbnail' }).click();
-
     // expect large image to be displayed
     await expect(page.getByRole('dialog').getByText('favicon-96x96.png')).toBeVisible();
 
@@ -215,3 +214,59 @@ test.describe('Snapshot image tests', () => {
     expect(await page.getByRole('img', { name: 'favicon-96x96.png thumbnail' }).count()).toBe(1);
   });
 });
+
+test.describe('Snapshot image failure tests', () => {
+  test.use({ failOnConsoleError: false });
+  test.beforeEach(async ({ page }) => {
+    //Navigate to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create Notebook
+    await createDomainObjectWithDefaults(page, {
+      type: NOTEBOOK_NAME
+    });
+  });
+
+  test('Get an error notification when dropping unknown file onto notebook entry', async ({
+    page
+  }) => {
+    // fill Uint8Array array with some garbage data
+    const garbageData = new Uint8Array(100);
+    const fileData = Array.from(garbageData);
+
+    const dropTransfer = await page.evaluateHandle((data) => {
+      const dataTransfer = new DataTransfer();
+      const file = new File([new Uint8Array(data)], 'someGarbage.foo', { type: 'unknown/garbage' });
+      dataTransfer.items.add(file);
+      return dataTransfer;
+    }, fileData);
+
+    await page.dispatchEvent('.c-notebook__drag-area', 'drop', { dataTransfer: dropTransfer });
+
+    // should have gotten a notification from OpenMCT that we couldn't add it
+    await expect(page.getByText('Unknown object(s) dropped and cannot embed')).toBeVisible();
+  });
+
+  test('Get an error notification when dropping big files onto notebook entry', async ({
+    page
+  }) => {
+    const garbageSize = 15 * 1024 * 1024; // 15 megabytes
+
+    await page.addScriptTag({
+      // make the garbage client side
+      content: `window.bigGarbageData = new Uint8Array(${garbageSize})`
+    });
+
+    const bigDropTransfer = await page.evaluateHandle(() => {
+      const dataTransfer = new DataTransfer();
+      const file = new File([window.bigGarbageData], 'bigBoy.png', { type: 'image/png' });
+      dataTransfer.items.add(file);
+      return dataTransfer;
+    });
+
+    await page.dispatchEvent('.c-notebook__drag-area', 'drop', { dataTransfer: bigDropTransfer });
+
+    // should have gotten a notification from OpenMCT that we couldn't add it as it's too big
+    await expect(page.getByText('unable to embed')).toBeVisible();
+  });
+});

e2e/tests/functional/plugins/notebook/tags.e2e.spec.js

@@ -150,7 +150,6 @@ test.describe('Tagging in Notebooks @addInit', () => {
     await createNotebookEntryAndTags(page);
 
     await page.locator('text=To start a new entry, click here or drag and drop any object').click();
-    await page.getByLabel('Notebook Entry Display').last().click();
     await page.getByLabel('Notebook Entry Input').fill(`An entry without tags`);
     await page.locator('.c-ne__save-button > button').click();
 

e2e/tests/performance/contract/notebook.contract.perf.spec.js

@@ -131,7 +131,6 @@ test.describe('Performance tests', () => {
     await page.evaluate(() => window.performance.mark('new-notebook-entry-created'));
 
     // Enter Notebook Entry text
-    await page.getByLabel('Notebook Entry').last().click();
     await page.getByLabel('Notebook Entry Input').last().fill('New Entry');
     await page.locator('.c-ne__save-button').click();
     await page.evaluate(() => window.performance.mark('new-notebook-entry-filled'));

example/simpleVuePlugin/HelloWorld.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="example">{{ msg }}</div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      msg: 'Hello world!'
-    };
-  }
-};
-</script>
-
-<style>
-.example {
-  color: red;
-}
-</style>

example/simpleVuePlugin/plugin.js

@@ -1,36 +0,0 @@
-import Vue from 'vue';
-
-import HelloWorld from './HelloWorld.vue';
-
-function SimpleVuePlugin() {
-  return function install(openmct) {
-    openmct.types.addType('hello-world', {
-      name: 'Hello World',
-      description: 'An introduction object',
-      creatable: true
-    });
-    openmct.objectViews.addProvider({
-      name: 'demo-provider',
-      key: 'hello-world',
-      cssClass: 'icon-packet',
-      canView: function (d) {
-        return d.type === 'hello-world';
-      },
-      view: function (domainObject) {
-        var vm;
-
-        return {
-          show: function (container) {
-            vm = new Vue(HelloWorld);
-            container.appendChild(vm.$mount().$el);
-          },
-          destroy: function (container) {
-            //vm.$destroy();
-          }
-        };
-      }
-    });
-  };
-}
-
-export default SimpleVuePlugin;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "3.1.1",
+  "version": "3.1.0-next",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.22.5",
@@ -27,7 +27,6 @@
     "eslint": "8.48.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-compat": "4.2.0",
-    "eslint-plugin-no-unsanitized": "4.0.2",
     "eslint-plugin-playwright": "0.12.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-simple-import-sort": "10.0.0",
@@ -71,6 +70,7 @@
     "sass-loader": "13.3.2",
     "sinon": "15.1.0",
     "style-loader": "3.3.3",
+    "tiny-emitter": "2.1.0",
     "typescript": "5.2.2",
     "uuid": "9.0.0",
     "vue": "3.3.4",
@@ -86,9 +86,9 @@
     "start": "npx webpack serve --config ./.webpack/webpack.dev.js",
     "start:prod": "npx webpack serve --config ./.webpack/webpack.prod.js",
     "start:coverage": "npx webpack serve --config ./.webpack/webpack.coverage.js",
-    "lint:js": "eslint example src e2e --ext .js openmct.js --max-warnings=0",
-    "lint:vue": "eslint example src --ext .vue",
-    "lint:spelling": "cspell \"**/*.{js,md,vue}\" --show-context --gitignore",
+    "lint:js": "eslint \"example/**/*.js\" \"src/**/*.js\" \"e2e/**/*.js\" \"openmct.js\" --max-warnings=0",
+    "lint:vue": "eslint \"src/**/*.vue\"",
+    "lint:spelling": "cspell \"**/*.{js,md,vue}\" --show-context --gitignore --quiet",
     "lint": "run-p \"lint:js -- {1}\" \"lint:vue -- {1}\" \"lint:spelling -- {1}\" --",
     "lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix",
     "build:prod": "webpack --config ./.webpack/webpack.prod.js",

src/MCT.js

@@ -33,7 +33,7 @@ define([
   './ui/registries/ToolbarRegistry',
   './ui/router/ApplicationRouter',
   './ui/router/Browse',
-  './ui/layout/Layout.vue',
+  './ui/layout/AppLayout.vue',
   './ui/preview/plugin',
   './api/Branding',
   './plugins/licenses/plugin',

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

src/plugins/LADTable/components/LadRow.vue

@@ -79,6 +79,7 @@ export default {
       required: true
     }
   },
+  emits: ['row-context-click'],
   data() {
     return {
       datum: undefined,
@@ -232,7 +233,7 @@ export default {
       this.timestampKey = timeSystem.key;
     },
     updateViewContext() {
-      this.$emit('rowContextClick', {
+      this.$emit('row-context-click', {
         viewHistoricalData: true,
         viewDatumAction: true,
         getDatum: () => {

src/plugins/LADTable/components/LadTable.vue

@@ -41,7 +41,7 @@
           :has-units="hasUnits"
           :is-stale="staleObjects.includes(ladRow.key)"
           :configuration="configuration"
-          @rowContextClick="updateViewContext"
+          @row-context-click="updateViewContext"
         />
       </tbody>
     </table>
@@ -49,10 +49,12 @@
 </template>
 
 <script>
-import Vue, { toRaw } from 'vue';
-import LadRow from './LadRow.vue';
+import { nextTick, toRaw } from 'vue';
+
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
+import LadRow from './LadRow.vue';
+
 export default {
   components: {
     LadRow
@@ -127,7 +129,7 @@ export default {
     this.composition.on('remove', this.removeItem);
     this.composition.on('reorder', this.reorder);
     this.composition.load();
-    await Vue.nextTick();
+    await nextTick();
     this.viewActionsCollection = this.openmct.actions.getActionsCollection(
       this.objectPath,
       this.currentView

src/plugins/charts/bar/BarGraphPlot.vue

@@ -67,6 +67,7 @@ export default {
       }
     }
   },
+  emits: ['subscribe', 'unsubscribe'],
   data() {
     return {
       isZoomed: false,

src/plugins/charts/bar/inspector/SeriesOptions.vue

@@ -43,7 +43,7 @@
           edit-title="Manually set the color for this bar graph series."
           view-title="The color for this bar graph series."
           short-label="Color"
-          @colorSet="setColor"
+          @color-set="setColor"
         />
       </li>
     </ul>

src/plugins/charts/scatter/ScatterPlotForm.vue

@@ -84,6 +84,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     return {
       rangeMax: this.model.value.rangeMax,
@@ -119,7 +120,7 @@ export default {
         this.model.validate(data);
       }
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue

@@ -71,6 +71,7 @@ export default {
       }
     }
   },
+  emits: ['subscribe', 'unsubscribe'],
   data() {
     return {
       isZoomed: false,

src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue

@@ -59,7 +59,7 @@
         edit-title="Manually set the line and marker color for this plot."
         view-title="The line and marker color for this plot."
         short-label="Color"
-        @colorSet="setColor"
+        @color-set="setColor"
       />
     </ul>
   </div>

src/plugins/charts/scatter/plugin.js

@@ -118,7 +118,7 @@ export default function () {
                 onChange
               };
             },
-            template: `<scatter-plot-form :model="model" @onChange="onChange"></scatter-plot-form>`
+            template: `<scatter-plot-form :model="model" @on-change="onChange"></scatter-plot-form>`
           },
           {
             app: openmct.app,

src/plugins/clock/ClockViewProvider.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import Clock from './components/Clock.vue';
+import Clock from './components/ClockComponent.vue';
 
 export default function ClockViewProvider(openmct) {
   return {

src/plugins/condition/components/ConditionCollection.vue

@@ -66,12 +66,12 @@
           :is-editing="isEditing"
           :move-index="moveIndex"
           :is-dragging="isDragging"
-          @updateCondition="updateCondition"
-          @removeCondition="removeCondition"
-          @cloneCondition="cloneCondition"
-          @setMoveIndex="setMoveIndex"
-          @dragComplete="dragComplete"
-          @dropCondition="dropCondition"
+          @update-condition="updateCondition"
+          @remove-condition="removeCondition"
+          @clone-condition="cloneCondition"
+          @set-move-index="setMoveIndex"
+          @drag-complete="dragComplete"
+          @drop-condition="dropCondition"
         />
       </div>
     </div>
@@ -79,10 +79,11 @@
 </template>
 
 <script>
-import ConditionManager from '../ConditionManager';
-import Condition from './Condition.vue';
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
+import ConditionManager from '../ConditionManager';
+import Condition from './ConditionItem.vue';
+
 export default {
   components: {
     Condition
@@ -102,6 +103,12 @@ export default {
       }
     }
   },
+  emits: [
+    'condition-set-result-updated',
+    'no-telemetry-objects',
+    'telemetry-updated',
+    'telemetry-staleness'
+  ],
   data() {
     return {
       expanded: true,
@@ -164,11 +171,11 @@ export default {
   methods: {
     handleConditionSetResultUpdated(data) {
       this.currentConditionId = data.conditionId;
-      this.$emit('conditionSetResultUpdated', data);
+      this.$emit('condition-set-result-updated', data);
     },
     emitNoTelemetryObjectEvent(data) {
       this.currentConditionId = '';
-      this.$emit('noTelemetryObjects');
+      this.$emit('no-telemetry-objects');
     },
     observeForChanges() {
       this.stopObservingForChanges = this.openmct.objects.observe(
@@ -225,7 +232,7 @@ export default {
       const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
 
       this.telemetryObjs.push(domainObject);
-      this.$emit('telemetryUpdated', this.telemetryObjs);
+      this.$emit('telemetry-updated', this.telemetryObjs);
 
       this.subscribeToStaleness(domainObject, (stalenessResponse) => {
         this.emitStaleness({
@@ -255,7 +262,7 @@ export default {
       }
     },
     emitStaleness(stalenessObject) {
-      this.$emit('telemetryStaleness', stalenessObject);
+      this.$emit('telemetry-staleness', stalenessObject);
     },
     addCondition() {
       this.conditionManager.addCondition();

src/plugins/condition/components/ConditionItem.vue

@@ -189,7 +189,7 @@ import { v4 as uuid } from 'uuid';
 import { TRIGGER, TRIGGER_LABEL } from '@/plugins/condition/utils/constants';
 
 import ConditionDescription from './ConditionDescription.vue';
-import Criterion from './Criterion.vue';
+import Criterion from './CriterionItem.vue';
 
 export default {
   components: {
@@ -229,6 +229,14 @@ export default {
       default: 0
     }
   },
+  emits: [
+    'set-move-index',
+    'drag-complete',
+    'drop-condition',
+    'remove-condition',
+    'clone-condition',
+    'update-condition'
+  ],
   data() {
     return {
       currentCriteria: this.currentCriteria,
@@ -313,11 +321,11 @@ export default {
       event.dataTransfer.setData('dragging', event.target); // required for FF to initiate drag
       event.dataTransfer.effectAllowed = 'copyMove';
       event.dataTransfer.setDragImage(event.target.closest('.c-condition-h'), 0, 0);
-      this.$emit('setMoveIndex', this.conditionIndex);
+      this.$emit('set-move-index', this.conditionIndex);
     },
     dragEnd() {
       this.dragStarted = false;
-      this.$emit('dragComplete');
+      this.$emit('drag-complete');
     },
     dropCondition(event, targetIndex) {
       if (!this.isDragging) {
@@ -331,7 +339,7 @@ export default {
       if (this.isValidTarget(targetIndex)) {
         this.dragElement = undefined;
         this.draggingOver = false;
-        this.$emit('dropCondition', targetIndex);
+        this.$emit('drop-condition', targetIndex);
       }
     },
     dragEnter(event, targetIndex) {
@@ -359,10 +367,10 @@ export default {
     },
     destroy() {},
     removeCondition() {
-      this.$emit('removeCondition', this.condition.id);
+      this.$emit('remove-condition', this.condition.id);
     },
     cloneCondition() {
-      this.$emit('cloneCondition', {
+      this.$emit('clone-condition', {
         condition: this.condition,
         index: this.conditionIndex
       });
@@ -380,7 +388,7 @@ export default {
       this.persist();
     },
     persist() {
-      this.$emit('updateCondition', {
+      this.$emit('update-condition', {
         condition: this.condition
       });
     },

src/plugins/condition/components/ConditionSet.vue

@@ -39,25 +39,26 @@
         :is-editing="isEditing"
         :test-data="testData"
         :telemetry="telemetryObjs"
-        @updateTestData="updateTestData"
+        @update-test-data="updateTestData"
       />
       <ConditionCollection
         class="c-cs__conditions"
         :is-editing="isEditing"
         :test-data="testData"
-        @conditionSetResultUpdated="updateCurrentOutput"
-        @noTelemetryObjects="updateCurrentOutput('---')"
-        @telemetryUpdated="updateTelemetry"
-        @telemetryStaleness="handleStaleness"
+        @condition-set-result-updated="updateCurrentOutput"
+        @no-telemetry-objects="updateCurrentOutput('---')"
+        @telemetry-updated="updateTelemetry"
+        @telemetry-staleness="handleStaleness"
       />
     </div>
   </div>
 </template>
 
 <script>
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
 import ConditionCollection from './ConditionCollection.vue';
 import TestData from './TestData.vue';
-import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
 export default {
   components: {

src/plugins/condition/components/CriterionItem.vue

@@ -136,6 +136,7 @@ export default {
       required: true
     }
   },
+  emits: ['persist'],
   data() {
     return {
       telemetryMetadataOptions: [],

src/plugins/condition/components/TestData.vue

@@ -127,6 +127,7 @@ export default {
       }
     }
   },
+  emits: ['update-test-data'],
   data() {
     return {
       expanded: true,
@@ -225,7 +226,7 @@ export default {
       this.updateTestData();
     },
     updateTestData() {
-      this.$emit('updateTestData', {
+      this.$emit('update-test-data', {
         applied: this.isApplied,
         conditionTestInputs: this.testInputs
       });

src/plugins/condition/components/inspector/StyleEditor.vue

@@ -120,6 +120,7 @@ export default {
       required: true
     }
   },
+  emits: ['persist', 'save-style'],
   computed: {
     itemStyle() {
       return getStylesWithoutNoneValue(this.styleItem.style);

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');
     }
   }
 };

src/plugins/faultManagement/FaultManagementListHeader.vue

@@ -43,7 +43,7 @@
           class="c-fault-mgmt-viewButton"
           title="Sort By"
           :model="model"
-          @onChange="onChange"
+          @on-change="onChange"
         />
       </div>
     </div>
@@ -74,6 +74,7 @@ export default {
       }
     }
   },
+  emits: ['sort-changed', 'select-all'],
   data() {
     return {
       model: {}
@@ -93,10 +94,10 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('sortChanged', data);
+      this.$emit('sort-changed', data);
     },
     selectAll(e) {
-      this.$emit('selectAll', e.target.checked);
+      this.$emit('select-all', e.target.checked);
     }
   }
 };

src/plugins/faultManagement/FaultManagementListItem.vue

@@ -90,6 +90,7 @@ export default {
       }
     }
   },
+  emits: ['acknowledge-selected', 'shelve-selected', 'toggle-selected'],
   computed: {
     classesFromState() {
       const exclusiveStates = [
@@ -169,7 +170,7 @@ export default {
           name: 'Acknowledge',
           description: '',
           onItemClicked: (e) => {
-            this.$emit('acknowledgeSelected', [this.fault]);
+            this.$emit('acknowledge-selected', [this.fault]);
           }
         },
         {
@@ -177,7 +178,7 @@ export default {
           name: 'Shelve',
           description: '',
           onItemClicked: () => {
-            this.$emit('shelveSelected', [this.fault], { shelved: true });
+            this.$emit('shelve-selected', [this.fault], { shelved: true });
           }
         },
         {
@@ -186,7 +187,7 @@ export default {
           name: 'Unshelve',
           description: '',
           onItemClicked: () => {
-            this.$emit('shelveSelected', [this.fault], { shelved: false });
+            this.$emit('shelve-selected', [this.fault], { shelved: false });
           }
         }
       ];
@@ -199,7 +200,7 @@ export default {
         selected: event.target.checked
       };
 
-      this.$emit('toggleSelected', faultData);
+      this.$emit('toggle-selected', faultData);
     }
   }
 };

src/plugins/faultManagement/FaultManagementListView.vue

@@ -24,15 +24,15 @@
   <div class="c-faults-list-view">
     <FaultManagementSearch
       :search-term="searchTerm"
-      @filterChanged="updateFilter"
-      @updateSearchTerm="updateSearchTerm"
+      @filter-changed="updateFilter"
+      @update-search-term="updateSearchTerm"
     />
 
     <FaultManagementToolbar
       v-if="showToolbar"
       :selected-faults="selectedFaults"
-      @acknowledgeSelected="toggleAcknowledgeSelected"
-      @shelveSelected="toggleShelveSelected"
+      @acknowledge-selected="toggleAcknowledgeSelected"
+      @shelve-selected="toggleShelveSelected"
     />
 
     <div class="c-faults-list-view-header-item-container-wrapper">
@@ -41,8 +41,8 @@
           class="header"
           :selected-faults="Object.values(selectedFaults)"
           :total-faults-count="filteredFaultsList.length"
-          @selectAll="selectAll"
-          @sortChanged="sortChanged"
+          @select-all="selectAll"
+          @sort-changed="sortChanged"
         />
 
         <div class="c-faults-list-view-item-body">
@@ -52,9 +52,9 @@
               :key="fault.id"
               :fault="fault"
               :is-selected="isSelected(fault)"
-              @toggleSelected="toggleSelected"
-              @acknowledgeSelected="toggleAcknowledgeSelected"
-              @shelveSelected="toggleShelveSelected"
+              @toggle-selected="toggleSelected"
+              @acknowledge-selected="toggleAcknowledgeSelected"
+              @shelve-selected="toggleShelveSelected"
             />
           </template>
         </div>

src/plugins/faultManagement/FaultManagementSearch.vue

@@ -33,14 +33,14 @@
       class="c-fault-mgmt-viewButton"
       title="View Filter"
       :model="model"
-      @onChange="onChange"
+      @on-change="onChange"
     />
   </div>
 </template>
 
 <script>
 import SelectField from '@/api/forms/components/controls/SelectField.vue';
-import Search from '@/ui/components/Search.vue';
+import Search from '@/ui/components/SearchComponent.vue';
 
 import { FILTER_ITEMS } from './constants';
 
@@ -56,6 +56,7 @@ export default {
       default: ''
     }
   },
+  emits: ['filter-changed', 'update-search-term'],
   data() {
     return {
       items: []
@@ -79,10 +80,10 @@ export default {
   },
   methods: {
     onChange(data) {
-      this.$emit('filterChanged', data);
+      this.$emit('filter-changed', data);
     },
     updateSearchTerm(searchTerm) {
-      this.$emit('updateSearchTerm', searchTerm);
+      this.$emit('update-search-term', searchTerm);
     }
   }
 };

src/plugins/faultManagement/FaultManagementToolbar.vue

@@ -53,6 +53,7 @@ export default {
       }
     }
   },
+  emits: ['acknowledge-selected', 'shelve-selected'],
   data() {
     return {
       disableAcknowledge: true,
@@ -82,10 +83,10 @@ export default {
   },
   methods: {
     acknowledgeSelected() {
-      this.$emit('acknowledgeSelected');
+      this.$emit('acknowledge-selected');
     },
     shelveSelected() {
-      this.$emit('shelveSelected');
+      this.$emit('shelve-selected');
     }
   }
 };

src/plugins/filters/components/FilterField.vue

@@ -125,6 +125,12 @@ export default {
       }
     }
   },
+  emits: [
+    'filter-text-value-changed',
+    'filter-selected',
+    'clear-filters',
+    'filter-single-selected'
+  ],
   data() {
     return {
       isEditing: this.openmct.editor.isEditing()
@@ -151,16 +157,16 @@ export default {
       return this.persistedFilters && this.persistedFilters[comparator];
     },
     updateFilterValueFromString(event, comparator) {
-      this.$emit('filterTextValueChanged', this.filterField.key, comparator, event.target.value);
+      this.$emit('filter-text-value-changed', this.filterField.key, comparator, event.target.value);
     },
     updateFilterValueFromCheckbox(event, comparator, value) {
-      this.$emit('filterSelected', this.filterField.key, comparator, value, event.target.checked);
+      this.$emit('filter-selected', this.filterField.key, comparator, value, event.target.checked);
     },
     updateFilterValueFromDropdown(event, comparator, value) {
       if (value === 'NONE') {
-        this.$emit('clearFilters', this.filterField.key);
+        this.$emit('clear-filters', this.filterField.key);
       } else {
-        this.$emit('filterSingleSelected', this.filterField.key, comparator, value);
+        this.$emit('filter-single-selected', this.filterField.key, comparator, value);
       }
     },
     getFilterLabels(filter) {

src/plugins/filters/components/FilterObject.vue

@@ -64,10 +64,10 @@
           :use-global="persistedFilters.useGlobal"
           :persisted-filters="updatedFilters[metadatum.key]"
           label="Specific Filter"
-          @filterSelected="updateMultipleFiltersWithSelectedValue"
-          @filterTextValueChanged="updateFiltersWithTextValue"
-          @filterSingleSelected="updateSingleSelection"
-          @clearFilters="clearFilters"
+          @filter-selected="updateMultipleFiltersWithSelectedValue"
+          @filter-text-value-changed="updateFiltersWithTextValue"
+          @filter-single-selected="updateSingleSelection"
+          @clear-filters="clearFilters"
         />
       </ul>
     </div>
@@ -98,6 +98,7 @@ export default {
       }
     }
   },
+  emits: ['update-filters'],
   data() {
     return {
       expanded: false,
@@ -161,11 +162,11 @@ export default {
         this.updatedFilters[key][comparator] = [valueName];
       }
 
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     clearFilters(key) {
       this.updatedFilters[key] = {};
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     updateFiltersWithTextValue(key, comparator, value) {
       if (value.trim() === '') {
@@ -174,15 +175,15 @@ export default {
         this.updatedFilters[key][comparator] = value;
       }
 
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     updateSingleSelection(key, comparator, value) {
       this.updatedFilters[key][comparator] = [value];
-      this.$emit('updateFilters', this.keyString, this.updatedFilters);
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
     useGlobalFilter(checked) {
       this.updatedFilters.useGlobal = checked;
-      this.$emit('updateFilters', this.keyString, this.updatedFilters, checked);
+      this.$emit('update-filters', this.keyString, this.updatedFilters, checked);
     },
     toggleIsEditing(isEditing) {
       this.isEditing = isEditing;

src/plugins/filters/components/FiltersView.vue

@@ -28,14 +28,14 @@
     <global-filters
       :global-filters="globalFilters"
       :global-metadata="globalMetadata"
-      @persistGlobalFilters="persistGlobalFilters"
+      @persist-global-filters="persistGlobalFilters"
     />
     <filter-object
       v-for="(child, key) in children"
       :key="key"
       :filter-object="child"
       :persisted-filters="persistedFilters[key]"
-      @updateFilters="persistFilters"
+      @update-filters="persistFilters"
     />
   </ul>
 </template>

src/plugins/filters/components/GlobalFilters.vue

@@ -44,10 +44,10 @@
         :filter-field="metadatum"
         :persisted-filters="updatedFilters[metadatum.key]"
         label="Global Filter"
-        @filterSelected="updateFiltersWithSelectedValue"
-        @filterTextValueChanged="updateFiltersWithTextValue"
-        @filterSingleSelected="updateSingleSelection"
-        @clearFilters="clearFilters"
+        @filter-selected="updateFiltersWithSelectedValue"
+        @filter-text-value-changed="updateFiltersWithTextValue"
+        @filter-single-selected="updateSingleSelection"
+        @clear-filters="clearFilters"
       />
     </ul>
   </li>
@@ -73,6 +73,7 @@ export default {
       }
     }
   },
+  emits: ['persist-global-filters'],
   data() {
     return {
       expanded: false,
@@ -102,7 +103,7 @@ export default {
     },
     clearFilters(key) {
       this.updatedFilters[key] = {};
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
     updateFiltersWithSelectedValue(key, comparator, valueName, value) {
       let filterValue = this.updatedFilters[key];
@@ -121,11 +122,11 @@ export default {
         this.updatedFilters[key][comparator] = [valueName];
       }
 
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
     updateSingleSelection(key, comparator, value) {
       this.updatedFilters[key][comparator] = [value];
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
     updateFiltersWithTextValue(key, comparator, value) {
       if (value.trim() === '') {
@@ -134,7 +135,7 @@ export default {
         this.updatedFilters[key][comparator] = value;
       }
 
-      this.$emit('persistGlobalFilters', key, this.updatedFilters);
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     }
   }
 };

src/plugins/flexibleLayout/components/ContainerComponent.vue

@@ -76,7 +76,7 @@
 
 <script>
 import DropHint from './DropHint.vue';
-import FrameComponent from './Frame.vue';
+import FrameComponent from './FrameComponent.vue';
 import ResizeHandle from './ResizeHandle.vue';
 
 const MIN_FRAME_SIZE = 5;
@@ -111,6 +111,7 @@ export default {
       required: true
     }
   },
+  emits: ['new-frame', 'move-frame', 'persist'],
   computed: {
     frames() {
       return this.container.frames;

src/plugins/flexibleLayout/components/DropHint.vue

@@ -45,6 +45,7 @@ export default {
       required: true
     }
   },
+  emits: ['object-drop-to'],
   data() {
     return {
       isMouseOver: false,

src/plugins/flexibleLayout/components/FlexibleLayout.vue

@@ -81,7 +81,7 @@
 <script>
 import Container from '../utils/container';
 import Frame from '../utils/frame';
-import ContainerComponent from './Container.vue';
+import ContainerComponent from './ContainerComponent.vue';
 import DropHint from './DropHint.vue';
 import ResizeHandle from './ResizeHandle.vue';
 

src/plugins/flexibleLayout/components/FrameComponent.vue

@@ -161,11 +161,8 @@ export default {
         let originalClassName = this.dragGhost.classList[0];
         this.dragGhost.className = '';
         this.dragGhost.classList.add(originalClassName, iconClass);
-        this.dragGhost.textContent = '';
-        const span = document.createElement('span');
-        span.textContent = this.domainObject.name;
-        this.dragGhost.appendChild(span);
 
+        this.dragGhost.innerHTML = `<span>${this.domainObject.name}</span>`;
         event.dataTransfer.setDragImage(this.dragGhost, 0, 0);
       }
 

src/plugins/flexibleLayout/components/ResizeHandle.vue

@@ -45,6 +45,7 @@ export default {
       default: false
     }
   },
+  emits: ['move', 'init-move', 'end-move'],
   data() {
     return {
       initialPos: 0,

src/plugins/gauge/GaugePlugin.js

@@ -187,7 +187,7 @@ export default function () {
                 onChange
               };
             },
-            template: `<GaugeFormController :model="model" @onChange="onChange"></GaugeFormController>`
+            template: `<GaugeFormController :model="model" @on-change="onChange"></GaugeFormController>`
           },
           {
             app: openmct.app,

src/plugins/gauge/GaugeViewProvider.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import GaugeComponent from './components/Gauge.vue';
+import GaugeComponent from './components/GaugeComponent.vue';
 
 export default function GaugeViewProvider(openmct) {
   return {

src/plugins/gauge/components/GaugeComponent.vue

@@ -338,7 +338,6 @@ const LIMIT_PADDING_IN_PERCENT = 10;
 const DEFAULT_CURRENT_VALUE = '--';
 
 export default {
-  name: 'Gauge',
   mixins: [stalenessMixin, tooltipHelpers],
   inject: ['openmct', 'domainObject', 'composition'],
   data() {

src/plugins/gauge/components/GaugeFormController.vue

@@ -97,6 +97,7 @@ export default {
       required: true
     }
   },
+  emits: ['on-change'],
   data() {
     this.changes = {};
 
@@ -140,7 +141,7 @@ export default {
         });
       }
 
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     },
     toggleUseTelemetryLimits() {
       this.isUseTelemetryLimits = !this.isUseTelemetryLimits;
@@ -150,7 +151,7 @@ export default {
         },
         value: this.isUseTelemetryLimits
       };
-      this.$emit('onChange', data);
+      this.$emit('on-change', data);
     }
   }
 };

src/plugins/imagery/components/AnnotationsCanvas.vue

@@ -78,12 +78,10 @@ export default {
           )?.rectangle;
           const annotationRectangleForPixelDepth =
             this.transformRectangleToPixelDense(annotationRectangle);
-          const indexNumber = builtAnnotationsIndex.add(
-            annotationRectangleForPixelDepth.x,
-            annotationRectangleForPixelDepth.y,
-            annotationRectangleForPixelDepth.x + annotationRectangleForPixelDepth.width,
-            annotationRectangleForPixelDepth.y + annotationRectangleForPixelDepth.height
+          const { x, y, x2, y2 } = this.transformAnnotationRectangleToFlatbushRectangle(
+            annotationRectangleForPixelDepth
           );
+          const indexNumber = builtAnnotationsIndex.add(x, y, x2, y2);
           this.indexToAnnotationMap[indexNumber] = annotation;
         });
         builtAnnotationsIndex.finish();
@@ -124,6 +122,23 @@ export default {
       this.selectedAnnotations = annotations;
       this.$emit('annotations-changed', annotations);
     },
+    transformAnnotationRectangleToFlatbushRectangle(annotationRectangle) {
+      let { x, y, width, height } = annotationRectangle;
+      let x2 = x + width;
+      let y2 = y + height;
+
+      // if height or width are negative, we need to adjust the x and y
+      if (width < 0) {
+        x2 = x;
+        x = x + width;
+      }
+      if (height < 0) {
+        y2 = y;
+        y = y + height;
+      }
+
+      return { x, y, x2, y2 };
+    },
     updateSelection(selection) {
       const selectionContext = selection?.[0]?.[0]?.context?.item;
       const selectionType = selection?.[0]?.[0]?.context?.type;

src/plugins/imagery/components/Compass/CompassComponent.vue

@@ -66,6 +66,7 @@ export default {
       required: true
     }
   },
+  emits: ['toggle-lock-compass'],
   computed: {
     hasGimble() {
       return this.cameraAzimuth !== undefined;

src/plugins/imagery/components/Compass/pluginSpec.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 import Vue from 'vue';
 
-import Compass from './Compass.vue';
+import Compass from './CompassComponent.vue';
 
 const COMPASS_ROSE_CLASS = '.c-direction-rose';
 const COMPASS_HUD_CLASS = '.c-compass__hud';

src/plugins/imagery/components/FilterSettings.vue

@@ -63,6 +63,7 @@
 <script>
 export default {
   inject: ['openmct'],
+  emits: ['filter-changed'],
   data() {
     return {
       filters: {
@@ -79,7 +80,7 @@ export default {
       }
     },
     notifyFiltersChanged() {
-      this.$emit('filterChanged', this.filters);
+      this.$emit('filter-changed', this.filters);
     },
     resetFilters() {
       this.filters = {

src/plugins/imagery/components/ImageControls.vue

@@ -27,21 +27,21 @@
     aria-label="Image controls"
   >
     <imagery-view-menu-switcher :icon-class="'icon-brightness'" :title="'Brightness and contrast'">
-      <filter-settings @filterChanged="updateFilterValues" />
+      <filter-settings @filter-changed="updateFilterValues" />
     </imagery-view-menu-switcher>
 
     <imagery-view-menu-switcher v-if="layers.length" :icon-class="'icon-layers'" :title="'Layers'">
-      <layer-settings :layers="layers" @toggleLayerVisibility="toggleLayerVisibility" />
+      <layer-settings :layers="layers" @toggle-layer-visibility="toggleLayerVisibility" />
     </imagery-view-menu-switcher>
 
     <zoom-settings
       class="--hide-if-less-than-220"
       :pan-zoom-locked="panZoomLocked"
       :zoom-factor="zoomFactor"
-      @zoomOut="zoomOut"
-      @zoomIn="zoomIn"
-      @toggleZoomLock="toggleZoomLock"
-      @handleResetImage="handleResetImage"
+      @zoom-out="zoomOut"
+      @zoom-in="zoomIn"
+      @toggle-zoom-lock="toggleZoomLock"
+      @handle-reset-image="handleResetImage"
     />
 
     <imagery-view-menu-switcher
@@ -54,10 +54,10 @@
         :class="'c-control-menu c-menu--has-close-btn'"
         :zoom-factor="zoomFactor"
         :is-menu="true"
-        @zoomOut="zoomOut"
-        @zoomIn="zoomIn"
-        @toggleZoomLock="toggleZoomLock"
-        @handleResetImage="handleResetImage"
+        @zoom-out="zoomOut"
+        @zoom-in="zoomIn"
+        @toggle-zoom-lock="toggleZoomLock"
+        @handle-reset-image="handleResetImage"
       />
     </imagery-view-menu-switcher>
   </div>
@@ -105,6 +105,14 @@ export default {
       }
     }
   },
+  emits: [
+    'cursors-updated',
+    'reset-image',
+    'pan-zoom-updated',
+    'filters-updated',
+    'start-pan',
+    'toggle-layer-visibility'
+  ],
   data() {
     return {
       altPressed: false,
@@ -141,7 +149,7 @@ export default {
       }
     },
     cursorStates(states) {
-      this.$emit('cursorsUpdated', states);
+      this.$emit('cursors-updated', states);
     }
   },
   mounted() {
@@ -155,16 +163,16 @@ export default {
   },
   methods: {
     handleResetImage() {
-      this.$emit('resetImage');
+      this.$emit('reset-image');
     },
     handleUpdatePanZoom(options) {
-      this.$emit('panZoomUpdated', options);
+      this.$emit('pan-zoom-updated', options);
     },
     toggleZoomLock() {
       this.panZoomLocked = !this.panZoomLocked;
     },
     notifyFiltersChanged() {
-      this.$emit('filtersUpdated', this.filters);
+      this.$emit('filters-updated', this.filters);
     },
     handleResetFilters() {
       this.filters = { ...DEFAULT_FILTER_VALUES };
@@ -251,7 +259,7 @@ export default {
     // attached to onClick listener in ImageryView
     handlePanZoomClick(e) {
       if (this.altPressed) {
-        return this.$emit('startPan', e);
+        return this.$emit('start-pan', e);
       }
 
       if (!(this.metaPressed && e.button === 0)) {
@@ -262,7 +270,7 @@ export default {
       this.zoomImage(newScaleFactor, e.clientX, e.clientY);
     },
     toggleLayerVisibility(index) {
-      this.$emit('toggleLayerVisibility', index);
+      this.$emit('toggle-layer-visibility', index);
     },
     updateFilterValues(filters) {
       this.filters = filters;

src/plugins/imagery/components/ImageThumbnail.vue

@@ -85,6 +85,7 @@ export default {
       }
     }
   },
+  emits: ['click'],
   data() {
     return {
       imgWidth: 0,

src/plugins/imagery/components/ImageryView.vue

@@ -39,12 +39,12 @@
         :zoom-factor="zoomFactor"
         :image-url="imageUrl"
         :layers="layers"
-        @resetImage="resetImage"
-        @panZoomUpdated="handlePanZoomUpdate"
-        @filtersUpdated="setFilters"
-        @cursorsUpdated="setCursorStates"
-        @startPan="startPan"
-        @toggleLayerVisibility="toggleLayerVisibility"
+        @reset-image="resetImage"
+        @pan-zoom-updated="handlePanZoomUpdate"
+        @filters-updated="setFilters"
+        @cursors-updated="setCursorStates"
+        @start-pan="startPan"
+        @toggle-layer-visibility="toggleLayerVisibility"
       />
       <div ref="imageBG" class="c-imagery__main-image__bg" @click="expand">
         <div v-if="zoomFactor > 1" class="c-imagery__hints">
@@ -202,13 +202,13 @@
 <script>
 import _ from 'lodash';
 import moment from 'moment';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../../api/time/constants';
 import imageryData from '../../imagery/mixins/imageryData';
 import eventHelpers from '../lib/eventHelpers';
 import AnnotationsCanvas from './AnnotationsCanvas.vue';
-import Compass from './Compass/Compass.vue';
+import Compass from './Compass/CompassComponent.vue';
 import ImageControls from './ImageControls.vue';
 import ImageThumbnail from './ImageThumbnail.vue';
 import RelatedTelemetry from './RelatedTelemetry/RelatedTelemetry';
@@ -264,6 +264,7 @@ export default {
       }
     }
   },
+  emits: ['update:focused-image-timestamp'],
   data() {
     let timeSystem = this.openmct.time.getTimeSystem();
     this.metadata = {};
@@ -1081,7 +1082,7 @@ export default {
         return;
       }
 
-      await Vue.nextTick();
+      await nextTick();
       if (this.$refs.thumbsWrapper) {
         this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
       }
@@ -1105,7 +1106,7 @@ export default {
       this.setPreviousFocusedImage(index);
     },
     setPreviousFocusedImage(index) {
-      this.$emit('update:focusedImageTimestamp', undefined);
+      this.$emit('update:focused-image-timestamp', undefined);
       this.previousFocusedImage = this.imageHistory[index]
         ? JSON.parse(JSON.stringify(this.imageHistory[index]))
         : undefined;

src/plugins/imagery/components/LayerSettings.vue

@@ -54,6 +54,7 @@ export default {
       }
     }
   },
+  emits: ['toggle-layer-visibility'],
   methods: {
     handleClose(e) {
       const closeButton = e.target.classList.contains('c-switcher-menu__close-button');
@@ -62,7 +63,7 @@ export default {
       }
     },
     toggleLayerVisibility(index) {
-      this.$emit('toggleLayerVisibility', index);
+      this.$emit('toggle-layer-visibility', index);
     }
   }
 };

src/plugins/imagery/components/ZoomSettings.vue

@@ -70,6 +70,7 @@ export default {
       required: false
     }
   },
+  emits: ['handle-reset-image', 'toggle-zoom-lock', 'zoom-in', 'zoom-out'],
   data() {
     return {};
   },
@@ -86,16 +87,16 @@ export default {
       }
     },
     handleResetImage() {
-      this.$emit('handleResetImage');
+      this.$emit('handle-reset-image');
     },
     toggleZoomLock() {
-      this.$emit('toggleZoomLock');
+      this.$emit('toggle-zoom-lock');
     },
     zoomIn() {
-      this.$emit('zoomIn');
+      this.$emit('zoom-in');
     },
     zoomOut() {
-      this.$emit('zoomOut');
+      this.$emit('zoom-out');
     }
   }
 };

src/plugins/inspectorDataVisualization/DataVisualization.vue

@@ -68,26 +68,30 @@
     </div>
 
     <template v-if="selectedBounds !== undefined">
-      <NumericData
+      <NumericDataInspectorView
         :bounds="selectedBounds"
         :telemetry-keys="plotTelemetryKeys"
         :no-numeric-data-text="noNumericDataText"
       />
-      <Imagery v-if="hasImagery" :bounds="selectedBounds" :telemetry-keys="imageryTelemetryKeys" />
+      <ImageryInspectorView
+        v-if="hasImagery"
+        :bounds="selectedBounds"
+        :telemetry-keys="imageryTelemetryKeys"
+      />
     </template>
   </div>
 </template>
 <script>
-import Imagery from './Imagery.vue';
-import NumericData from './NumericData.vue';
+import ImageryInspectorView from './ImageryInspectorView.vue';
+import NumericDataInspectorView from './NumericDataInspectorView.vue';
 
 const TIMESTAMP_VIEW_BUFFER = 30 * 1000;
 const timestampBufferText = `${TIMESTAMP_VIEW_BUFFER / 1000} seconds`;
 
 export default {
   components: {
-    NumericData,
-    Imagery
+    NumericDataInspectorView,
+    ImageryInspectorView
   },
   inject: ['timeFormatter', 'placeholderText', 'plotOptions', 'imageryOptions'],
   props: {

src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue

@@ -35,7 +35,7 @@
 <script>
 import mount from 'utils/mount';
 
-import Plot from '../plot/Plot.vue';
+import Plot from '../plot/PlotView.vue';
 import TelemetryFrame from './TelemetryFrame.vue';
 
 export default {

src/plugins/inspectorViews/annotations/tags/TagEditor.vue

@@ -29,8 +29,8 @@
       :selected-tag="addedTag.newTag ? null : addedTag"
       :new-tag="addedTag.newTag"
       :added-tags="addedTags"
-      @tagRemoved="tagRemoved"
-      @tagAdded="tagAdded"
+      @tag-removed="tagRemoved"
+      @tag-added="tagAdded"
     />
     <button
       v-show="!userAddingTag && !maxTagsAdded"
@@ -84,6 +84,7 @@ export default {
       default: null
     }
   },
+  emits: ['tags-updated'],
   data() {
     return {
       addedTags: [],

src/plugins/inspectorViews/annotations/tags/TagSelection.vue

@@ -30,7 +30,7 @@
         :place-holder-text="'Type to select tag'"
         class="c-tag-selection"
         :item-css-class="'icon-circle'"
-        @onChange="tagSelected"
+        @on-change="tagSelected"
       />
     </template>
     <template v-else>
@@ -86,6 +86,7 @@ export default {
       }
     }
   },
+  emits: ['tag-removed', 'tag-added'],
   data() {
     return {};
   },
@@ -144,7 +145,7 @@ export default {
       });
     },
     removeTag() {
-      this.$emit('tagRemoved', this.selectedTag);
+      this.$emit('tag-removed', this.selectedTag);
     },
     tagSelected(autoField) {
       const tagAdded = autoField.model.options.find((option) => {
@@ -155,7 +156,7 @@ export default {
         return false;
       });
       if (tagAdded) {
-        this.$emit('tagAdded', tagAdded.id);
+        this.$emit('tag-added', tagAdded.id);
       }
     }
   }

src/plugins/inspectorViews/elements/ElementItem.vue

@@ -74,6 +74,7 @@ export default {
       type: Boolean
     }
   },
+  emits: ['drop-custom', 'dragstart-custom'],
   data() {
     const isAlias =
       this.elementObject.location !==

src/plugins/inspectorViews/elements/ElementItemGroup.vue

@@ -71,6 +71,7 @@ export default {
       type: Boolean
     }
   },
+  emits: ['drop-group'],
   data() {
     return {
       dragCounter: 0

src/plugins/inspectorViews/elements/ElementsPool.vue

@@ -53,7 +53,7 @@
 <script>
 import _ from 'lodash';
 
-import Search from '../../../ui/components/Search.vue';
+import Search from '../../../ui/components/SearchComponent.vue';
 import ElementItem from './ElementItem.vue';
 
 export default {

src/plugins/inspectorViews/elements/PlotElementsPool.vue

@@ -71,7 +71,7 @@
 <script>
 import _ from 'lodash';
 
-import Search from '../../../ui/components/Search.vue';
+import Search from '../../../ui/components/SearchComponent.vue';
 import configStore from '../../plot/configuration/ConfigStore';
 import ElementItem from './ElementItem.vue';
 import ElementItemGroup from './ElementItemGroup.vue';

src/plugins/inspectorViews/properties/PropertiesComponent.vue

@@ -49,7 +49,7 @@
 import Moment from 'moment';
 
 import DetailText from './DetailText.vue';
-import Location from './Location.vue';
+import Location from './LocationComponent.vue';
 
 export default {
   components: {

src/plugins/inspectorViews/properties/PropertiesViewProvider.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import Properties from './Properties.vue';
+import Properties from './PropertiesComponent.vue';
 
 export default function PropertiesViewProvider(openmct) {
   return {

src/plugins/inspectorViews/styles/FontStyleEditor.vue

@@ -51,6 +51,7 @@ export default {
       }
     }
   },
+  emits: ['set-font-property'],
   computed: {
     fontTypeLabel() {
       const fontType = FONTS.find((f) => f.value === this.fontStyle.font);

src/plugins/inspectorViews/styles/SavedStyleSelector.vue

@@ -83,6 +83,7 @@ export default {
       required: true
     }
   },
+  emits: ['delete-style'],
   data() {
     return {
       expanded: false

src/plugins/inspectorViews/styles/StylesInspectorView.vue

@@ -36,8 +36,8 @@
 <script>
 import StylesView from '@/plugins/condition/components/inspector/StylesView.vue';
 
-import Multipane from '../../../ui/layout/Multipane.vue';
-import Pane from '../../../ui/layout/Pane.vue';
+import Multipane from '../../../ui/layout/MultipaneContainer.vue';
+import Pane from '../../../ui/layout/PaneContainer.vue';
 import SavedStylesInspectorView from './SavedStylesInspectorView.vue';
 
 export default {