Update eslint (#4554)

Bumps [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) from 7.20.0 to 8.0.3.
- [Release notes](https://github.com/vuejs/eslint-plugin-vue/releases)
- [Commits](https://github.com/vuejs/eslint-plugin-vue/compare/v7.20.0...v8.0.3)

---
updated-dependencies:
- dependency-name: eslint-plugin-vue
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
* bump eslint to 8.11.0
* bump eslint-plugin-vue to 8.5.0
* disable eslint rule for multi-word component names. TODO enable it and follow conventions

Co-authored-by: Nikhil Mandlik <nikhil.k.mandlik@nasa.gov>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
Co-authored-by: unlikelyzero <jchill2@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>

.eslintrc.js

@@ -16,7 +16,8 @@ module.exports = {
     ],
     "parser": "vue-eslint-parser",
     "parserOptions": {
-        "parser": "babel-eslint",
+        "parser": "@babel/eslint-parser",
+        "requireConfigFile": false,
         "allowImportExportEverywhere": true,
         "ecmaVersion": 2015,
         "ecmaFeatures": {
@@ -35,7 +36,6 @@ module.exports = {
         "no-inner-declarations": "off",
         "no-use-before-define": ["error", "nofunc"],
         "no-caller": "error",
-        "no-sequences": "error",
         "no-irregular-whitespace": "error",
         "no-new": "error",
         "no-shadow": "error",
@@ -239,13 +239,12 @@ module.exports = {
         ],
         "vue/max-attributes-per-line": ["error", {
             "singleline": 1,
-            "multiline": {
+            "multiline": 1,
-                "max": 1,
-                "allowFirstLine": true
-            }
         }],
+        "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"
 
     },

package.json

@@ -3,12 +3,12 @@
   "version": "2.0.1-SNAPSHOT",
   "description": "The Open MCT core platform",
   "devDependencies": {
+    "@babel/eslint-parser": "7.16.3",
     "@braintree/sanitize-url": "6.0.0",
     "@percy/cli": "1.0.0-beta.75",
     "@percy/playwright": "1.0.1",
     "@playwright/test": "1.19.2",
     "allure-playwright": "2.0.0-beta.15",
-    "babel-eslint": "10.1.0",
     "comma-separated-values": "3.6.4",
     "copy-webpack-plugin": "10.2.0",
     "core-js": "3.20.3",
@@ -17,9 +17,9 @@
     "d3-axis": "1.0.x",
     "d3-scale": "1.0.x",
     "d3-selection": "1.3.x",
-    "eslint": "7.0.0",
+    "eslint": "8.11.0",
     "eslint-plugin-playwright": "0.8.0",
-    "eslint-plugin-vue": "7.5.0",
+    "eslint-plugin-vue": "8.5.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
     "eventemitter3": "1.2.0",
     "exports-loader": "0.7.0",

src/api/forms/components/FormProperties.vue

@@ -26,26 +26,31 @@
         <div class="c-overlay__dialog-title">{{ model.title }}</div>
         <div class="c-overlay__dialog-hint hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
     </div>
-    <form name="mctForm"
+    <form
+        name="mctForm"
         class="c-form__contents"
         autocomplete="off"
         @submit.prevent
     >
-        <div v-for="section in formSections"
+        <div
+            v-for="section in formSections"
             :key="section.id"
             class="c-form__section"
             :class="section.cssClass"
         >
-            <h2 v-if="section.name"
+            <h2
+                v-if="section.name"
                 class="c-form__section-header"
             >
                 {{ section.name }}
             </h2>
-            <div v-for="(row, index) in section.rows"
+            <div
+                v-for="(row, index) in section.rows"
                 :key="row.id"
                 class="u-contents"
             >
-                <FormRow :css-class="section.cssClass"
+                <FormRow
+                    :css-class="section.cssClass"
                     :first="index < 1"
                     :row="row"
                     @onChange="onChange"
@@ -55,14 +60,16 @@
     </form>
 
     <div class="mct-form__controls c-overlay__button-bar c-form__bottom-bar">
-        <button tabindex="0"
+        <button
+            tabindex="0"
             :disabled="isInvalid"
             class="c-button c-button--major"
             @click="onSave"
         >
             {{ submitLabel }}
         </button>
-        <button tabindex="0"
+        <button
+            tabindex="0"
             class="c-button"
             @click="onDismiss"
         >

src/api/forms/components/FormRow.vue

@@ -21,20 +21,24 @@
 *****************************************************************************/
 
 <template>
-<div class="form-row c-form__row"
+<div
+    class="form-row c-form__row"
     :class="[{ 'first': first }]"
     @onChange="onChange"
 >
-    <div class="c-form-row__label"
+    <div
+        class="c-form-row__label"
         :title="row.description"
     >
         {{ row.name }}
     </div>
-    <div class="c-form-row__state-indicator"
+    <div
+        class="c-form-row__state-indicator"
         :class="rowClass"
     >
     </div>
-    <div v-if="row.control"
+    <div
+        v-if="row.control"
         class="c-form-row__controls"
     >
         <div ref="rowElement"></div>

src/api/forms/components/controls/AutoCompleteField.vue

@@ -22,20 +22,24 @@
 
 <template>
 <div class="form-control autocomplete">
-    <input v-model="field"
+    <input
+        v-model="field"
         class="autocompleteInput"
         type="text"
         @click="inputClicked()"
         @keydown="keyDown($event)"
     >
-    <span class="icon-arrow-down"
+    <span
+        class="icon-arrow-down"
         @click="arrowClicked()"
     ></span>
-    <div class="autocompleteOptions"
+    <div
+        class="autocompleteOptions"
         @blur="hideOptions = true"
     >
         <ul v-if="!hideOptions">
-            <li v-for="opt in filteredOptions"
+            <li
+                v-for="opt in filteredOptions"
                 :key="opt.optionId"
                 :class="{'optionPreSelected': optionIndex === opt.optionId}"
                 @click="fillInputWithString(opt.name)"

src/api/forms/components/controls/ClockDisplayFormatField.vue

@@ -22,7 +22,8 @@
 
 <template>
 <div class="c-form-control--clock-display-format-fields">
-    <SelectField v-for="item in items"
+    <SelectField
+        v-for="item in items"
         :key="item.key"
         :model="item"
         @onChange="onChange"

src/api/forms/components/controls/Composite.vue

@@ -22,7 +22,8 @@
 
 <template>
 <span>
-    <CompositeItem v-for="(item, index) in model.items"
+    <CompositeItem
+        v-for="(item, index) in model.items"
         :key="item.name"
         :first="index < 1"
         :value="JSON.stringify(model.value[index])"

src/api/forms/components/controls/CompositeItem.vue

@@ -22,7 +22,8 @@
 
 <template>
 <div :class="compositeCssClass">
-    <FormRow :css-class="item.cssClass"
+    <FormRow
+        :css-class="item.cssClass"
         :first="first"
         :row="row"
         @onChange="onChange"

src/api/forms/components/controls/Datetime.vue

@@ -27,12 +27,14 @@
     <div class="hint time sm">Min</div>
     <div class="hint time sm">Sec</div>
     <div class="hint timezone">Timezone</div>
-    <form ref="dateTimeForm"
+    <form
+        ref="dateTimeForm"
         prevent
         class="u-contents"
     >
         <div class="field control date">
-            <input v-model="date"
+            <input
+                v-model="date"
                 :pattern="/\d{4}-\d{2}-\d{2}/"
                 :placeholder="format"
                 type="date"
@@ -41,7 +43,8 @@
             >
         </div>
         <div class="field control hour sm">
-            <input v-model="hour"
+            <input
+                v-model="hour"
                 :pattern="/\d+/"
                 type="number"
                 name="hour"
@@ -52,7 +55,8 @@
             >
         </div>
         <div class="field control min sm">
-            <input v-model="min"
+            <input
+                v-model="min"
                 :pattern="/\d+/"
                 type="number"
                 name="min"
@@ -63,7 +67,8 @@
             >
         </div>
         <div class="field control sec sm">
-            <input v-model="sec"
+            <input
+                v-model="sec"
                 :pattern="/\d+/"
                 type="number"
                 name="sec"

src/api/forms/components/controls/FileInput.vue

@@ -22,16 +22,19 @@
 
 <template>
 <span class="form-control shell">
-    <span class="field control"
+    <span
+        class="field control"
         :class="model.cssClass"
     >
-        <input id="fileElem"
+        <input
+            id="fileElem"
             ref="fileInput"
             type="file"
             accept=".json"
             style="display:none"
         >
-        <button id="fileSelect"
+        <button
+            id="fileSelect"
             class="c-button"
             @click="selectFile"
         >

src/api/forms/components/controls/NumberField.vue

@@ -22,10 +22,12 @@
 
 <template>
 <span class="form-control shell">
-    <span class="field control"
+    <span
+        class="field control"
         :class="model.cssClass"
     >
-        <input v-model="field"
+        <input
+            v-model="field"
             type="number"
             :min="model.min"
             :max="model.max"

src/api/forms/components/controls/SelectField.vue

@@ -22,12 +22,14 @@
 
 <template>
 <div class="form-control select-field">
-    <select v-model="selected"
+    <select
+        v-model="selected"
         required="model.required"
         name="mctControl"
         @change="onChange($event)"
     >
-        <option v-for="option in model.options"
+        <option
+            v-for="option in model.options"
             :key="option.name"
             :value="option.value"
         >

src/api/forms/components/controls/TextAreaField.vue

@@ -22,10 +22,12 @@
 
 <template>
 <span class="form-control shell">
-    <span class="field control"
+    <span
+        class="field control"
         :class="model.cssClass"
     >
-        <textarea v-model="field"
+        <textarea
+            v-model="field"
             type="text"
             :size="model.size"
             @input="updateText()"

src/api/forms/components/controls/TextField.vue

@@ -22,10 +22,12 @@
 
 <template>
 <span class="form-control shell">
-    <span class="field control"
+    <span
+        class="field control"
         :class="model.cssClass"
     >
-        <input v-model="field"
+        <input
+            v-model="field"
             type="text"
             :size="model.size"
             @input="updateText()"

src/api/menu/components/Menu.vue

@@ -1,5 +1,6 @@
 <template>
-<div class="c-menu"
+<div
+    class="c-menu"
     :class="options.menuClass"
 >
     <ul v-if="options.actions.length && options.actions[0].length">

src/api/menu/components/SuperMenu.vue

@@ -1,8 +1,10 @@
 <template>
-<div class="c-menu"
+<div
+    class="c-menu"
     :class="[options.menuClass, 'c-super-menu']"
 >
-    <ul v-if="options.actions.length && options.actions[0].length"
+    <ul
+        v-if="options.actions.length && options.actions[0].length"
         class="c-super-menu__menu"
     >
         <template
@@ -34,7 +36,8 @@
         </template>
     </ul>
 
-    <ul v-else
+    <ul
+        v-else
         class="c-super-menu__menu"
     >
         <li

src/plugins/charts/BarGraphPlot.vue

@@ -1,24 +1,30 @@
 <template>
-<div ref="plotWrapper"
+<div
+    ref="plotWrapper"
     class="has-local-controls"
     :class="{ 's-unsynced' : isZoomed }"
 >
-    <div v-if="isZoomed"
+    <div
+        v-if="isZoomed"
         class="l-state-indicators"
     >
-        <span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
+        <span
+            class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
             title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."
         ></span>
     </div>
-    <div ref="plot"
+    <div
+        ref="plot"
         class="c-bar-chart"
         @plotly_relayout="zoom"
     ></div>
-    <div v-if="false"
+    <div
+        v-if="false"
         ref="localControl"
         class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover"
     >
-        <button v-if="data.length"
+        <button
+            v-if="data.length"
             class="c-button icon-reset"
             :disabled="!isZoomed"
             title="Reset pan/zoom"

src/plugins/charts/BarGraphView.vue

@@ -21,7 +21,8 @@
 -->
 
 <template>
-<BarGraph ref="barGraph"
+<BarGraph
+    ref="barGraph"
     class="c-plot c-bar-chart-view"
     :data="trace"
     :plot-axis-title="plotAxisTitle"

src/plugins/charts/inspector/BarGraphOptions.vue

@@ -22,10 +22,12 @@
 <template>
 <ul class="c-tree c-bar-graph-options">
     <h2 title="Display properties for this object">Bar Graph Series</h2>
-    <li v-for="series in domainObject.composition"
+    <li
+        v-for="series in domainObject.composition"
         :key="series.key"
     >
-        <series-options :item="series"
+        <series-options
+            :item="series"
             :color-palette="colorPalette"
         />
     </li>

src/plugins/charts/inspector/SeriesOptions.vue

@@ -21,10 +21,12 @@
 -->
 <template>
 <ul>
-    <li class="c-tree__item menus-to-left"
+    <li
+        class="c-tree__item menus-to-left"
         :class="aliasCss"
     >
-        <span class="c-disclosure-triangle is-enabled flex-elem"
+        <span
+            class="c-disclosure-triangle is-enabled flex-elem"
             :class="expandedCssClass"
             @click="expanded = !expanded"
         >
@@ -36,7 +38,8 @@
             <div class="c-object-label__name">{{ name }}</div>
         </div>
     </li>
-    <ColorSwatch v-if="expanded"
+    <ColorSwatch
+        v-if="expanded"
         :current-color="currentColor"
         title="Manually set the color for this bar graph series."
         edit-title="Manually set the color for this bar graph series"

src/plugins/condition/components/Condition.vue

@@ -21,7 +21,8 @@
 *****************************************************************************/
 
 <template>
-<div class="c-condition-h"
+<div
+    class="c-condition-h"
     :class="{ 'is-drag-target': draggingOver }"
     @dragover.prevent
     @drop.prevent="dropCondition($event, conditionIndex)"
@@ -29,13 +30,15 @@
     @dragleave="dragLeave($event, conditionIndex)"
 >
     <div class="c-condition-h__drop-target"></div>
-    <div v-if="isEditing"
+    <div
+        v-if="isEditing"
         :class="{'is-current': condition.id === currentConditionId}"
         class="c-condition c-condition--edit"
     >
         <!-- Edit view -->
         <div class="c-condition__header">
-            <span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
+            <span
+                class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
                 title="Drag to reorder conditions"
                 :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
                 :draggable="!condition.isDefault"
@@ -43,7 +46,8 @@
                 @dragend="dragEnd"
             ></span>
 
-            <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
+            <span
+                class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
                 :class="{ 'c-disclosure-triangle--expanded': expanded }"
                 @click="expanded = !expanded"
             ></span>
@@ -54,33 +58,38 @@
                     Define criteria
                 </template>
                 <span v-else>
-                    <condition-description :show-label="false"
+                    <condition-description
+                        :show-label="false"
                         :condition="condition"
                     />
                 </span>
             </span>
 
             <div class="c-condition__buttons">
-                <button v-if="!condition.isDefault"
+                <button
+                    v-if="!condition.isDefault"
                     class="c-click-icon c-condition__duplicate-button icon-duplicate"
                     title="Duplicate this condition"
                     @click="cloneCondition"
                 ></button>
 
-                <button v-if="!condition.isDefault"
+                <button
+                    v-if="!condition.isDefault"
                     class="c-click-icon c-condition__delete-button icon-trash"
                     title="Delete this condition"
                     @click="removeCondition"
                 ></button>
             </div>
         </div>
-        <div v-if="expanded"
+        <div
+            v-if="expanded"
             class="c-condition__definition c-cdef"
         >
             <span class="c-cdef__separator c-row-separator"></span>
             <span class="c-cdef__label">Condition Name</span>
             <span class="c-cdef__controls">
-                <input v-model="condition.configuration.name"
+                <input
+                    v-model="condition.configuration.name"
                     class="t-condition-input__name"
                     type="text"
                     @change="persist"
@@ -90,10 +99,12 @@
             <span class="c-cdef__label">Output</span>
             <span class="c-cdef__controls">
                 <span class="c-cdef__control">
-                    <select v-model="selectedOutputSelection"
+                    <select
+                        v-model="selectedOutputSelection"
                         @change="setOutputValue"
                     >
-                        <option v-for="option in outputOptions"
+                        <option
+                            v-for="option in outputOptions"
                             :key="option"
                             :value="option"
                         >
@@ -102,7 +113,8 @@
                     </select>
                 </span>
                 <span class="c-cdef__control">
-                    <input v-if="selectedOutputSelection === outputOptions[2]"
+                    <input
+                        v-if="selectedOutputSelection === outputOptions[2]"
                         v-model="condition.configuration.output"
                         class="t-condition-name-input"
                         type="text"
@@ -111,16 +123,19 @@
                 </span>
             </span>
 
-            <div v-if="!condition.isDefault"
+            <div
+                v-if="!condition.isDefault"
                 class="c-cdef__match-and-criteria"
             >
                 <span class="c-cdef__separator c-row-separator"></span>
                 <span class="c-cdef__label">Match</span>
                 <span class="c-cdef__controls">
-                    <select v-model="condition.configuration.trigger"
+                    <select
+                        v-model="condition.configuration.trigger"
                         @change="persist"
                     >
-                        <option v-for="option in triggers"
+                        <option
+                            v-for="option in triggers"
                             :key="option.value"
                             :value="option.value"
                         > {{ option.label }}</option>
@@ -128,11 +143,13 @@
                 </span>
 
                 <template v-if="telemetry.length || condition.configuration.criteria.length">
-                    <div v-for="(criterion, index) in condition.configuration.criteria"
+                    <div
+                        v-for="(criterion, index) in condition.configuration.criteria"
                         :key="criterion.id"
                         class="c-cdef__criteria"
                     >
-                        <Criterion :telemetry="telemetry"
+                        <Criterion
+                            :telemetry="telemetry"
                             :criterion="criterion"
                             :index="index"
                             :trigger="condition.configuration.trigger"
@@ -140,11 +157,13 @@
                             @persist="persist"
                         />
                         <div class="c-cdef__criteria__buttons">
-                            <button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
+                            <button
+                                class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
                                 title="Duplicate this criteria"
                                 @click="cloneCriterion(index)"
                             ></button>
-                            <button v-if="!(condition.configuration.criteria.length === 1)"
+                            <button
+                                v-if="!(condition.configuration.criteria.length === 1)"
                                 class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
                                 title="Delete this criteria"
                                 @click="removeCriterion(index)"
@@ -153,7 +172,8 @@
                     </div>
                 </template>
                 <div class="c-cdef__separator c-row-separator"></div>
-                <div class="c-cdef__controls"
+                <div
+                    class="c-cdef__controls"
                     :disabled="!telemetry.length"
                 >
                     <button
@@ -166,7 +186,8 @@
             </div>
         </div>
     </div>
-    <div v-else
+    <div
+        v-else
         class="c-condition c-condition--browse"
         :class="{'is-current': condition.id === currentConditionId}"
     >
@@ -180,7 +201,8 @@
             </span>
         </div>
         <div class="c-condition__summary">
-            <condition-description :show-label="false"
+            <condition-description
+                :show-label="false"
                 :condition="condition"
             />
         </div>

src/plugins/condition/components/ConditionCollection.vue

@@ -21,7 +21,8 @@
  *****************************************************************************/
 
 <template>
-<section id="conditionCollection"
+<section
+    id="conditionCollection"
     :class="{ 'is-expanded': expanded }"
 >
     <div class="c-cs__header c-section__header">
@@ -32,10 +33,12 @@
         ></span>
         <div class="c-cs__header-label c-section__label">Conditions</div>
     </div>
-    <div v-if="expanded"
+    <div
+        v-if="expanded"
         class="c-cs__content"
     >
-        <div v-show="isEditing"
+        <div
+            v-show="isEditing"
             class="hint"
             :class="{ 's-status-icon-warning-lo': !telemetryObjs.length }"
         >
@@ -52,10 +55,12 @@
             <span class="c-cs-button__label">Add Condition</span>
         </button>
 
-        <div class="c-cs__conditions-h"
+        <div
+            class="c-cs__conditions-h"
             :class="{ 'is-active-dragging': isDragging }"
         >
-            <Condition v-for="(condition, index) in conditionCollection"
+            <Condition
+                v-for="(condition, index) in conditionCollection"
                 :key="condition.id"
                 :condition="condition"
                 :current-condition-id="currentConditionId"

src/plugins/condition/components/ConditionDescription.vue

@@ -22,17 +22,20 @@
 
 <template>
 <div class="c-style__condition-desc">
-    <span v-if="showLabel && condition"
+    <span
+        v-if="showLabel && condition"
         class="c-style__condition-desc__name c-condition__name"
     >
         {{ condition.configuration.name }}
     </span>
-    <span v-if="!condition.isDefault"
+    <span
+        v-if="!condition.isDefault"
         class="c-style__condition-desc__text"
     >
         {{ description }}
     </span>
-    <span v-else
+    <span
+        v-else
         class="c-style__condition-desc__text"
     >
         Match if no other condition is matched

src/plugins/condition/components/ConditionError.vue

@@ -21,10 +21,12 @@
 *****************************************************************************/
 
 <template>
-<div v-if="conditionErrors.length"
+<div
+    v-if="conditionErrors.length"
     class="c-condition__errors"
 >
-    <div v-for="(error, index) in conditionErrors"
+    <div
+        v-for="(error, index) in conditionErrors"
         :key="index"
         class="u-alert u-alert--block u-alert--with-icon"
     >{{ error.message.errorText }} {{ error.additionalInfo }}

src/plugins/condition/components/ConditionSet.vue

@@ -36,13 +36,15 @@
         </div>
     </section>
     <div class="c-cs__test-data-and-conditions-w">
-        <TestData class="c-cs__test-data"
+        <TestData
+            class="c-cs__test-data"
             :is-editing="isEditing"
             :test-data="testData"
             :telemetry="telemetryObjs"
             @updateTestData="updateTestData"
         />
-        <ConditionCollection class="c-cs__conditions"
+        <ConditionCollection
+            class="c-cs__conditions"
             :is-editing="isEditing"
             :test-data="testData"
             @conditionSetResultUpdated="updateCurrentOutput"

src/plugins/condition/components/Criterion.vue

@@ -26,14 +26,16 @@
     <span class="c-cdef__label">{{ setRowLabel }}</span>
     <span class="c-cdef__controls">
         <span class="c-cdef__control">
-            <select ref="telemetrySelect"
+            <select
+                ref="telemetrySelect"
                 v-model="criterion.telemetry"
                 @change="updateMetadataOptions"
             >
                 <option value="">- Select Telemetry -</option>
                 <option value="all">all telemetry</option>
                 <option value="any">any telemetry</option>
-                <option v-for="telemetryOption in telemetry"
+                <option
+                    v-for="telemetryOption in telemetry"
                     :key="telemetryOption.identifier.key"
                     :value="telemetryOption.identifier"
                 >
@@ -41,15 +43,18 @@
                 </option>
             </select>
         </span>
-        <span v-if="criterion.telemetry"
+        <span
+            v-if="criterion.telemetry"
             class="c-cdef__control"
         >
-            <select ref="metadataSelect"
+            <select
+                ref="metadataSelect"
                 v-model="criterion.metadata"
                 @change="updateOperations"
             >
                 <option value="">- Select Field -</option>
-                <option v-for="option in telemetryMetadataOptions"
+                <option
+                    v-for="option in telemetryMetadataOptions"
                     :key="option.key"
                     :value="option.key"
                 >
@@ -58,14 +63,17 @@
                 <option value="dataReceived">any data received</option>
             </select>
         </span>
-        <span v-if="criterion.telemetry && criterion.metadata"
+        <span
+            v-if="criterion.telemetry && criterion.metadata"
             class="c-cdef__control"
         >
-            <select v-model="criterion.operation"
+            <select
+                v-model="criterion.operation"
                 @change="updateInputVisibilityAndValues"
             >
                 <option value="">- Select Comparison -</option>
-                <option v-for="option in filteredOps"
+                <option
+                    v-for="option in filteredOps"
                     :key="option.name"
                     :value="option.name"
                 >
@@ -73,11 +81,13 @@
                 </option>
             </select>
             <template v-if="!enumerations.length">
-                <span v-for="(item, inputIndex) in inputCount"
+                <span
+                    v-for="(item, inputIndex) in inputCount"
                     :key="inputIndex"
                     class="c-cdef__control__inputs"
                 >
-                    <input v-model="criterion.input[inputIndex]"
+                    <input
+                        v-model="criterion.input[inputIndex]"
                         class="c-cdef__control__input"
                         :type="setInputType"
                         @change="persist"
@@ -87,13 +97,16 @@
                 <span v-if="criterion.metadata === 'dataReceived'">seconds</span>
             </template>
             <span v-else>
-                <span v-if="inputCount && criterion.operation"
+                <span
+                    v-if="inputCount && criterion.operation"
                     class="c-cdef__control"
                 >
-                    <select v-model="criterion.input[0]"
+                    <select
+                        v-model="criterion.input[0]"
                         @change="persist"
                     >
-                        <option v-for="option in enumerations"
+                        <option
+                            v-for="option in enumerations"
                             :key="option.string"
                             :value="option.value.toString()"
                         >

src/plugins/condition/components/TestData.vue

@@ -21,7 +21,8 @@
  *****************************************************************************/
 
 <template>
-<section v-show="isEditing"
+<section
+    v-show="isEditing"
     id="test-data"
     :class="{ 'is-expanded': expanded }"
 >
@@ -33,10 +34,12 @@
         ></span>
         <div class="c-cs__header-label c-section__label">Test Data</div>
     </div>
-    <div v-if="expanded"
+    <div
+        v-if="expanded"
         class="c-cs__content"
     >
-        <div class="c-cs__test-data__controls c-cdef__controls"
+        <div
+            class="c-cs__test-data__controls c-cdef__controls"
             :disabled="!telemetry.length"
         >
             <label class="c-toggle-switch">
@@ -50,18 +53,21 @@
             </label>
         </div>
         <div class="c-cs-tests">
-            <span v-for="(testInput, tIndex) in testInputs"
+            <span
+                v-for="(testInput, tIndex) in testInputs"
                 :key="tIndex"
                 class="c-test-datum c-cs-test"
             >
                 <span class="c-cs-test__label">Set</span>
                 <span class="c-cs-test__controls">
                     <span class="c-cdef__control">
-                        <select v-model="testInput.telemetry"
+                        <select
+                            v-model="testInput.telemetry"
                             @change="updateMetadata(testInput)"
                         >
                             <option value="">- Select Telemetry -</option>
-                            <option v-for="(telemetryOption, index) in telemetry"
+                            <option
+                                v-for="(telemetryOption, index) in telemetry"
                                 :key="index"
                                 :value="telemetryOption.identifier"
                             >
@@ -69,14 +75,17 @@
                             </option>
                         </select>
                     </span>
-                    <span v-if="testInput.telemetry"
+                    <span
+                        v-if="testInput.telemetry"
                         class="c-cdef__control"
                     >
-                        <select v-model="testInput.metadata"
+                        <select
+                            v-model="testInput.metadata"
                             @change="updateTestData"
                         >
                             <option value="">- Select Field -</option>
-                            <option v-for="(option, index) in telemetryMetadataOptions[getId(testInput.telemetry)]"
+                            <option
+                                v-for="(option, index) in telemetryMetadataOptions[getId(testInput.telemetry)]"
                                 :key="index"
                                 :value="option.key"
                             >
@@ -84,10 +93,12 @@
                             </option>
                         </select>
                     </span>
-                    <span v-if="testInput.metadata"
+                    <span
+                        v-if="testInput.metadata"
                         class="c-cdef__control__inputs"
                     >
-                        <input v-model="testInput.value"
+                        <input
+                            v-model="testInput.value"
                             placeholder="Enter test input"
                             type="text"
                             class="c-cdef__control__input"
@@ -96,11 +107,13 @@
                     </span>
                 </span>
                 <div class="c-cs-test__buttons">
-                    <button class="c-click-icon c-test-data__duplicate-button icon-duplicate"
+                    <button
+                        class="c-click-icon c-test-data__duplicate-button icon-duplicate"
                         title="Duplicate this test datum"
                         @click="addTestInput(testInput)"
                     ></button>
-                    <button class="c-click-icon c-test-data__delete-button icon-trash"
+                    <button
+                        class="c-click-icon c-test-data__delete-button icon-trash"
                         title="Delete this test datum"
                         @click="removeTestInput(tIndex)"
                     ></button>

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

@@ -23,41 +23,48 @@
 <template>
 <div class="c-style has-local-controls c-toolbar">
     <div class="c-style__controls">
-        <div :class="[
+        <div
+            :class="[
                 { 'is-style-invisible': styleItem.style && styleItem.style.isStyleInvisible },
                 { 'c-style-thumb--mixed': mixedStyles.indexOf('backgroundColor') > -1 }
             ]"
             :style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : itemStyle ]"
             class="c-style-thumb"
         >
-            <span class="c-style-thumb__text"
+            <span
+                class="c-style-thumb__text"
                 :class="{ 'hide-nice': !hasProperty(styleItem.style.color) }"
             >
                 ABC
             </span>
         </div>
 
-        <toolbar-color-picker v-if="hasProperty(styleItem.style.border)"
+        <toolbar-color-picker
+            v-if="hasProperty(styleItem.style.border)"
             class="c-style__toolbar-button--border-color u-menu-to--center"
             :options="borderColorOption"
             @change="updateStyleValue"
         />
-        <toolbar-color-picker v-if="hasProperty(styleItem.style.backgroundColor)"
+        <toolbar-color-picker
+            v-if="hasProperty(styleItem.style.backgroundColor)"
             class="c-style__toolbar-button--background-color u-menu-to--center"
             :options="backgroundColorOption"
             @change="updateStyleValue"
         />
-        <toolbar-color-picker v-if="hasProperty(styleItem.style.color)"
+        <toolbar-color-picker
+            v-if="hasProperty(styleItem.style.color)"
             class="c-style__toolbar-button--color u-menu-to--center"
             :options="colorOption"
             @change="updateStyleValue"
         />
-        <toolbar-button v-if="hasProperty(styleItem.style.imageUrl)"
+        <toolbar-button
+            v-if="hasProperty(styleItem.style.imageUrl)"
             class="c-style__toolbar-button--image-url"
             :options="imageUrlOption"
             @change="updateStyleValue"
         />
-        <toolbar-toggle-button v-if="hasProperty(styleItem.style.isStyleInvisible)"
+        <toolbar-toggle-button
+            v-if="hasProperty(styleItem.style.isStyleInvisible)"
             class="c-style__toolbar-button--toggle-visible"
             :options="isStyleInvisibleOption"
             @change="updateStyleValue"
@@ -65,7 +72,8 @@
     </div>
 
     <!-- Save Styles -->
-    <toolbar-button v-if="canSaveStyle"
+    <toolbar-button
+        v-if="canSaveStyle"
         class="c-style__toolbar-button--save c-local-controls--show-on-hover c-icon-button c-icon-button--major"
         :options="saveOptions"
         @click="saveItemStyle()"

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

@@ -22,7 +22,8 @@
 
 <template>
 <div class="c-inspector__styles c-inspect-styles">
-    <div v-if="isStaticAndConditionalStyles"
+    <div
+        v-if="isStaticAndConditionalStyles"
         class="c-inspect-styles__mixed-static-and-conditional u-alert u-alert--block u-alert--with-icon"
     >
         Your selection includes one or more items that use Conditional Styling. Applying a static style below will replace any Conditional Styling with the new choice.
@@ -37,10 +38,12 @@
             @set-font-property="setFontProperty"
         />
         <div class="c-inspect-styles__content">
-            <div v-if="staticStyle"
+            <div
+                v-if="staticStyle"
                 class="c-inspect-styles__style"
             >
-                <StyleEditor class="c-inspect-styles__editor"
+                <StyleEditor
+                    class="c-inspect-styles__editor"
                     :style-item="staticStyle"
                     :is-editing="allowEditing"
                     :mixed-styles="mixedStyles"
@@ -64,7 +67,8 @@
             Conditional Object Styles
         </div>
         <div class="c-inspect-styles__content c-inspect-styles__condition-set c-inspect-styles__elem">
-            <a v-if="conditionSetDomainObject"
+            <a
+                v-if="conditionSetDomainObject"
                 class="c-object-label"
                 @click="navigateOrPreview"
             >
@@ -80,14 +84,16 @@
                     <span class="c-button__label">Change...</span>
                 </button>
 
-                <button class="c-click-icon icon-x"
+                <button
+                    class="c-click-icon icon-x"
                     title="Remove conditional styles"
                     @click="removeConditionSet"
                 ></button>
             </template>
         </div>
 
-        <div v-if="isConditionWidget && allowEditing"
+        <div
+            v-if="isConditionWidget && allowEditing"
             class="c-inspect-styles__elem c-inspect-styles__output-label-toggle"
         >
             <label class="c-toggle-switch">
@@ -100,7 +106,8 @@
                 <span class="c-toggle-switch__label">Use Condition Set output as label</span>
             </label>
         </div>
-        <div v-if="isConditionWidget && !allowEditing"
+        <div
+            v-if="isConditionWidget && !allowEditing"
             class="c-inspect-styles__elem"
         >
             <span class="c-toggle-switch__label">Condition Set output as label:
@@ -114,22 +121,27 @@
             @set-font-property="setFontProperty"
         />
 
-        <div v-if="conditionsLoaded"
+        <div
+            v-if="conditionsLoaded"
             class="c-inspect-styles__conditions"
         >
-            <div v-for="(conditionStyle, index) in conditionalStyles"
+            <div
+                v-for="(conditionStyle, index) in conditionalStyles"
                 :key="index"
                 class="c-inspect-styles__condition"
                 :class="{'is-current': conditionStyle.conditionId === selectedConditionId}"
                 @click="applySelectedConditionStyle(conditionStyle.conditionId)"
             >
-                <condition-error :show-label="true"
+                <condition-error
+                    :show-label="true"
                     :condition="getCondition(conditionStyle.conditionId)"
                 />
-                <condition-description :show-label="true"
+                <condition-description
+                    :show-label="true"
                     :condition="getCondition(conditionStyle.conditionId)"
                 />
-                <StyleEditor class="c-inspect-styles__editor"
+                <StyleEditor
+                    class="c-inspect-styles__editor"
                     :style-item="conditionStyle"
                     :non-specific-font-properties="nonSpecificFontProperties"
                     :is-editing="allowEditing"

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -21,7 +21,8 @@
 *****************************************************************************/
 
 <template>
-<component :is="urlDefined ? 'a' : 'span'"
+<component
+    :is="urlDefined ? 'a' : 'span'"
     class="c-condition-widget u-style-receiver js-style-receiver"
     :href="url"
 >

src/plugins/displayLayout/components/TelemetryView.vue

@@ -37,7 +37,8 @@
         :data-font="item.font"
         @contextmenu.prevent="showContextMenu"
     >
-        <div class="is-status__indicator"
+        <div
+            class="is-status__indicator"
             :title="`This item is ${status}`"
         ></div>
         <div

src/plugins/folderView/components/GridItem.vue

@@ -26,7 +26,8 @@
         </div>
     </div>
     <div class="c-grid-item__controls">
-        <div class="is-status__indicator"
+        <div
+            class="is-status__indicator"
             :title="`This item is ${status}`"
         ></div>
         <div

src/plugins/folderView/components/ListItem.vue

@@ -17,7 +17,8 @@
                 class="c-object-label__type-icon c-list-item__name__type-icon"
                 :class="item.type.cssClass"
             >
-                <span class="is-status__indicator"
+                <span
+                    class="is-status__indicator"
                     :title="`This item is ${status}`"
                 ></span>
             </div>

src/plugins/hyperlink/HyperlinkLayout.vue

@@ -22,7 +22,8 @@
 
 <template>
 
-<a class="c-hyperlink"
+<a
+    class="c-hyperlink"
     :class="{
         'c-hyperlink--button' : isButton
     }"

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

@@ -21,16 +21,19 @@
  *****************************************************************************/
 
 <template>
-<div ref="compassRoseWrapper"
+<div
+    ref="compassRoseWrapper"
     class="w-direction-rose"
     :class="compassRoseSizingClasses"
     @click="toggleLockCompass"
 >
-    <svg ref="compassRoseSvg"
+    <svg
+        ref="compassRoseSvg"
         class="c-compass-rose-svg"
         viewBox="0 0 100 100"
     >
-        <mask id="mask0"
+        <mask
+            id="mask0"
             mask-type="alpha"
             maskUnits="userSpaceOnUse"
             x="0"
@@ -38,28 +41,33 @@
             width="100"
             height="100"
         >
-            <circle cx="50"
+            <circle
+                cx="50"
                 cy="50"
                 r="50"
                 fill="black"
             />
         </mask>
         <g class="c-cr__compass-wrapper">
-            <g class="c-cr__compass-main"
+            <g
+                class="c-cr__compass-main"
                 mask="url(#mask0)"
             >
                 <!-- Background and clipped elements -->
-                <rect class="c-cr__bg"
+                <rect
+                    class="c-cr__bg"
                     width="100"
                     height="100"
                     fill="black"
                 />
-                <rect class="c-cr__edge"
+                <rect
+                    class="c-cr__edge"
                     width="100"
                     height="100"
                     fill="url(#paint0_radial)"
                 />
-                <rect v-if="hasSunHeading"
+                <rect
+                    v-if="hasSunHeading"
                     class="c-cr__sun"
                     width="100"
                     height="100"
@@ -68,7 +76,8 @@
                 />
 
                 <!-- Camera FOV -->
-                <mask id="mask2"
+                <mask
+                    id="mask2"
                     class="c-cr__cam-fov-l-mask"
                     mask-type="alpha"
                     maskUnits="userSpaceOnUse"
@@ -77,11 +86,13 @@
                     width="50"
                     height="100"
                 >
-                    <rect width="51"
+                    <rect
+                        width="51"
                         height="100"
                     />
                 </mask>
-                <mask id="mask1"
+                <mask
+                    id="mask1"
                     class="c-cr__cam-fov-r-mask"
                     mask-type="alpha"
                     maskUnits="userSpaceOnUse"
@@ -90,16 +101,19 @@
                     width="50"
                     height="100"
                 >
-                    <rect x="49"
+                    <rect
+                        x="49"
                         width="51"
                         height="100"
                     />
                 </mask>
-                <g class="c-cr__cam-fov"
+                <g
+                    class="c-cr__cam-fov"
                     :style="cameraPanStyle"
                 >
                     <g mask="url(#mask2)">
-                        <rect class="c-cr__cam-fov-r"
+                        <rect
+                            class="c-cr__cam-fov-r"
                             x="49"
                             width="51"
                             height="100"
@@ -107,7 +121,8 @@
                         />
                     </g>
                     <g mask="url(#mask1)">
-                        <rect class="c-cr__cam-fov-l"
+                        <rect
+                            class="c-cr__cam-fov-l"
                             width="51"
                             height="100"
                             :style="cameraFOVStyleLeftHalf"
@@ -117,7 +132,8 @@
             </g>
 
             <!-- Spacecraft body -->
-            <path v-if="hasHeading"
+            <path
+                v-if="hasHeading"
                 class="c-cr__spacecraft-body"
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -126,18 +142,22 @@
             />
 
             <!-- NSEW and ticks -->
-            <g class="c-cr__nsew"
+            <g
+                class="c-cr__nsew"
                 :style="compassRoseStyle"
             >
                 <g class="c-cr__ticks-major">
                     <path d="M50 3L43 10H57L50 3Z" />
-                    <path d="M4 51V49H10V51H4Z"
+                    <path
+                        d="M4 51V49H10V51H4Z"
                         class="--hide-min"
                     />
-                    <path d="M49 96V90H51V96H49Z"
+                    <path
+                        d="M49 96V90H51V96H49Z"
                         class="--hide-min"
                     />
-                    <path d="M90 49V51H96V49H90Z"
+                    <path
+                        d="M90 49V51H96V49H90Z"
                         class="--hide-min"
                     />
                 </g>
@@ -148,19 +168,23 @@
                     <path d="M51 10L49 10V4L51 4V10Z" />
                 </g>
                 <g class="c-cr__nsew-text">
-                    <path :style="cardinalTextRotateW"
+                    <path
+                        :style="cardinalTextRotateW"
                         class="c-cr__nsew-w --hide-small"
                         d="M56.7418 45.004H54.1378L52.7238 52.312H52.6958L51.2258 45.004H48.7758L47.3058 52.312H47.2778L45.8638 45.004H43.2598L45.9618 55H48.6078L49.9798 48.112H50.0078L51.3798 55H53.9838L56.7418 45.004Z"
                     />
-                    <path :style="cardinalTextRotateE"
+                    <path
+                        :style="cardinalTextRotateE"
                         class="c-cr__nsew-e --hide-small"
                         d="M46.104 55H54.21V52.76H48.708V50.856H53.608V48.84H48.708V47.09H54.07V45.004H46.104V55Z"
                     />
-                    <path :style="cardinalTextRotateS"
+                    <path
+                        :style="cardinalTextRotateS"
                         class="c-cr__nsew-s --hide-small"
                         d="M45.6531 51.64C45.6671 54.202 47.6971 55.21 49.9931 55.21C52.1911 55.21 54.3471 54.398 54.3471 51.864C54.3471 50.058 52.8911 49.386 51.4491 48.98C49.9931 48.574 48.5511 48.434 48.5511 47.664C48.5511 47.006 49.2511 46.81 49.8111 46.81C50.6091 46.81 51.4631 47.104 51.4211 48.014H54.0251C54.0111 45.76 52.0091 44.794 50.0211 44.794C48.1451 44.794 45.9471 45.648 45.9471 47.832C45.9471 49.666 47.4451 50.31 48.8731 50.716C50.3151 51.122 51.7431 51.29 51.7431 52.172C51.7431 52.914 50.9311 53.194 50.1471 53.194C49.0411 53.194 48.3131 52.816 48.2571 51.64H45.6531Z"
                     />
-                    <path :style="cardinalTextRotateN"
+                    <path
+                        :style="cardinalTextRotateN"
                         class="c-cr__nsew-n"
                         d="M42.5935 60H46.7935V49.32H46.8415L52.7935 60H57.3775V42.864H53.1775V53.424H53.1295L47.1775 42.864H42.5935V60Z"
                     />
@@ -168,31 +192,37 @@
             </g>
         </g>
         <defs>
-            <radialGradient id="paint0_radial"
+            <radialGradient
+                id="paint0_radial"
                 cx="0"
                 cy="0"
                 r="1"
                 gradientUnits="userSpaceOnUse"
                 gradientTransform="translate(50 50) rotate(90) scale(50)"
             >
-                <stop offset="0.751387"
+                <stop
+                    offset="0.751387"
                     stop-opacity="0"
                 />
-                <stop offset="1"
+                <stop
+                    offset="1"
                     stop-color="white"
                 />
             </radialGradient>
-            <radialGradient id="paint1_radial"
+            <radialGradient
+                id="paint1_radial"
                 cx="0"
                 cy="0"
                 r="1"
                 gradientUnits="userSpaceOnUse"
                 gradientTransform="translate(50 -7) rotate(-90) scale(18.5)"
             >
-                <stop offset="0.716377"
+                <stop
+                    offset="0.716377"
                     stop-color="#FFCC00"
                 />
-                <stop offset="1"
+                <stop
+                    offset="1"
                     stop-color="#FF9900"
                     stop-opacity="0"
                 />

src/plugins/imagery/components/ImageryTimeView.vue

@@ -21,10 +21,12 @@
 -->
 
 <template>
-<div ref="imagery"
+<div
+    ref="imagery"
     class="c-imagery-tsv c-timeline-holder"
 >
-    <div ref="imageryHolder"
+    <div
+        ref="imageryHolder"
         class="c-imagery-tsv__contents u-contents"
     >
     </div>

src/plugins/imagery/components/ImageryView.vue

@@ -30,19 +30,22 @@
 >
     <div class="c-imagery__main-image-wrapper has-local-controls">
         <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover c-image-controls__controls">
-            <span class="c-image-controls__sliders"
+            <span
+                class="c-image-controls__sliders"
                 draggable="true"
                 @dragstart="startDrag"
             >
                 <div class="c-image-controls__slider-wrapper icon-brightness">
-                    <input v-model="filters.brightness"
+                    <input
+                        v-model="filters.brightness"
                         type="range"
                         min="0"
                         max="500"
                     >
                 </div>
                 <div class="c-image-controls__slider-wrapper icon-contrast">
-                    <input v-model="filters.contrast"
+                    <input
+                        v-model="filters.contrast"
                         type="range"
                         min="0"
                         max="500"
@@ -50,23 +53,27 @@
                 </div>
             </span>
             <span class="t-reset-btn-holder c-imagery__lc__reset-btn c-image-controls__btn-reset">
-                <a class="s-icon-button icon-reset t-btn-reset"
+                <a
+                    class="s-icon-button icon-reset t-btn-reset"
                     @click="filters={brightness: 100, contrast: 100}"
                 ></a>
             </span>
         </div>
-        <div ref="imageBG"
+        <div
+            ref="imageBG"
             class="c-imagery__main-image__bg"
             :class="{'paused unnsynced': isPaused && !isFixed,'stale':false }"
             @click="expand"
         >
-            <div class="image-wrapper"
+            <div
+                class="image-wrapper"
                 :style="{
                     'width': `${sizedImageDimensions.width}px`,
                     'height': `${sizedImageDimensions.height}px`
                 }"
             >
-                <img ref="focusedImage"
+                <img
+                    ref="focusedImage"
                     class="c-imagery__main-image__image js-imageryView-image"
                     :src="imageUrl"
                     :style="{
@@ -85,13 +92,15 @@
             </div>
         </div>
 
-        <button class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--prev"
+        <button
+            class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--prev"
             title="Previous image"
             :disabled="isPrevDisabled"
             @click="prevImage()"
         ></button>
 
-        <button class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--next"
+        <button
+            class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--next"
             title="Next image"
             :disabled="isNextDisabled"
             @click="nextImage()"
@@ -130,7 +139,8 @@
             </div>
         </div>
     </div>
-    <div class="c-imagery__thumbs-wrapper"
+    <div
+        class="c-imagery__thumbs-wrapper"
         :class="[
             { 'is-paused': isPaused && !isFixed },
             { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused }
@@ -141,17 +151,20 @@
             class="c-imagery__thumbs-scroll-area"
             @scroll="handleScroll"
         >
-            <div v-for="(image, index) in imageHistory"
+            <div
+                v-for="(image, index) in imageHistory"
                 :key="image.url + image.time"
                 class="c-imagery__thumb c-thumb"
                 :class="{ selected: focusedImageIndex === index && isPaused }"
                 @click="setFocusedImage(index, thumbnailClick)"
             >
-                <a href=""
+                <a
+                    href=""
                     :download="image.imageDownloadName"
                     @click.prevent
                 >
-                    <img class="c-thumb__image"
+                    <img
+                        class="c-thumb__image"
                         :src="image.url"
                     >
                 </a>

src/plugins/notebook/components/Notebook.vue

@@ -23,23 +23,27 @@
 <template>
 <div class="c-notebook">
     <div class="c-notebook__head">
-        <Search class="c-notebook__search"
+        <Search
+            class="c-notebook__search"
             :value="search"
             @input="search = $event"
             @clear="resetSearch()"
         />
     </div>
-    <SearchResults v-if="search.length"
+    <SearchResults
+        v-if="search.length"
         ref="searchResults"
         :domain-object="domainObject"
         :results="searchResults"
         @changeSectionPage="changeSelectedSection"
         @updateEntries="updateEntries"
     />
-    <div v-if="!search.length"
+    <div
+        v-if="!search.length"
         class="c-notebook__body"
     >
-        <Sidebar ref="sidebar"
+        <Sidebar
+            ref="sidebar"
             class="c-notebook__nav c-sidebar c-drawer c-drawer--align-left"
             :class="[{'is-expanded': showNav}, {'c-drawer--push': !sidebarCoversEntries}, {'c-drawer--overlays': sidebarCoversEntries}]"
             :default-page-id="defaultPageId"
@@ -61,7 +65,8 @@
         />
         <div class="c-notebook__page-view">
             <div class="c-notebook__page-view__header">
-                <button class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major icon-menu-hamburger"
+                <button
+                    class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major icon-menu-hamburger"
                     @click="toggleNav"
                 ></button>
                 <div class="c-notebook__page-view__path c-path">
@@ -73,37 +78,46 @@
                     </span>
                 </div>
                 <div class="c-notebook__page-view__controls">
-                    <select v-model="showTime"
+                    <select
+                        v-model="showTime"
                         class="c-notebook__controls__time"
                     >
-                        <option value="0"
+                        <option
+                            value="0"
                             :selected="showTime === 0"
                         >
                             Show all
                         </option>
-                        <option value="1"
+                        <option
+                            value="1"
                             :selected="showTime === 1"
                         >Last hour</option>
-                        <option value="8"
+                        <option
+                            value="8"
                             :selected="showTime === 8"
                         >Last 8 hours</option>
-                        <option value="24"
+                        <option
+                            value="24"
                             :selected="showTime === 24"
                         >Last 24 hours</option>
                     </select>
-                    <select v-model="defaultSort"
+                    <select
+                        v-model="defaultSort"
                         class="c-notebook__controls__time"
                     >
-                        <option value="newest"
+                        <option
+                            value="newest"
                             :selected="defaultSort === 'newest'"
                         >Newest first</option>
-                        <option value="oldest"
+                        <option
+                            value="oldest"
                             :selected="defaultSort === 'oldest'"
                         >Oldest first</option>
                     </select>
                 </div>
             </div>
-            <div class="c-notebook__drag-area icon-plus"
+            <div
+                class="c-notebook__drag-area icon-plus"
                 @click="newEntry()"
                 @dragover="dragOver"
                 @drop.capture="dropCapture"
@@ -113,11 +127,13 @@
                     To start a new entry, click here or drag and drop any object
                 </span>
             </div>
-            <div v-if="selectedSection && selectedPage"
+            <div
+                v-if="selectedSection && selectedPage"
                 ref="notebookEntries"
                 class="c-notebook__entries"
             >
-                <NotebookEntry v-for="entry in filteredAndSortedEntries"
+                <NotebookEntry
+                    v-for="entry in filteredAndSortedEntries"
                     :key="entry.id"
                     :entry="entry"
                     :domain-object="domainObject"

src/plugins/notebook/components/NotebookEmbed.vue

@@ -1,6 +1,7 @@
 <template>
 <div class="c-snapshot c-ne__embed">
-    <div v-if="embed.snapshot"
+    <div
+        v-if="embed.snapshot"
         class="c-ne__embed__snap-thumb"
         @click="openSnapshot()"
     >
@@ -8,13 +9,15 @@
     </div>
     <div class="c-ne__embed__info">
         <div class="c-ne__embed__name">
-            <a class="c-ne__embed__link"
+            <a
+                class="c-ne__embed__link"
                 :class="embed.cssClass"
                 @click="changeLocation"
             >{{ embed.name }}</a>
             <PopupMenu :popup-menu-items="popupMenuItems" />
         </div>
-        <div v-if="embed.snapshot"
+        <div
+            v-if="embed.snapshot"
             class="c-ne__embed__time"
         >
             {{ createdOn }}

src/plugins/notebook/components/NotebookEntry.vue

@@ -21,7 +21,8 @@
  *****************************************************************************/
 
 <template>
-<div class="c-notebook__entry c-ne has-local-controls"
+<div
+    class="c-notebook__entry c-ne has-local-controls"
     @dragover="changeCursor"
     @drop.capture="cancelEditMode"
     @drop.prevent="dropOnEntry"
@@ -62,7 +63,8 @@
                 </div>
             </template>
             <div class="c-snapshots c-ne__embeds">
-                <NotebookEmbed v-for="embed in entry.embeds"
+                <NotebookEmbed
+                    v-for="embed in entry.embeds"
                     :key="embed.id"
                     :embed="embed"
                     @removeEmbed="removeEmbed"
@@ -71,17 +73,20 @@
             </div>
         </div>
     </div>
-    <div v-if="!readOnly"
+    <div
+        v-if="!readOnly"
         class="c-ne__local-controls--hidden"
     >
-        <button class="c-icon-button c-icon-button--major icon-trash"
+        <button
+            class="c-icon-button c-icon-button--major icon-trash"
             title="Delete this entry"
             tabindex="-1"
             @click="deleteEntry"
         >
         </button>
     </div>
-    <div v-if="readOnly"
+    <div
+        v-if="readOnly"
         class="c-ne__section-and-page"
     >
         <a

src/plugins/notebook/components/NotebookSnapshotContainer.vue

@@ -8,30 +8,35 @@
                     <div class="c-object-label__name">
                         Notebook Snapshots
                     </div>
-                    <div v-if="snapshots.length"
+                    <div
+                        v-if="snapshots.length"
                         class="l-browse-bar__object-details"
                     >{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
                     </div>
                 </div>
-                <PopupMenu v-if="snapshots.length > 0"
+                <PopupMenu
+                    v-if="snapshots.length > 0"
                     :popup-menu-items="popupMenuItems"
                 />
             </div>
 
         </div>
         <div class="l-browse-bar__end">
-            <button class="c-click-icon c-click-icon--major icon-x"
+            <button
+                class="c-click-icon c-click-icon--major icon-x"
                 @click="close"
             ></button>
         </div>
     </div><!-- closes l-browse-bar -->
     <div class="c-snapshots">
-        <span v-for="snapshot in snapshots"
+        <span
+            v-for="snapshot in snapshots"
             :key="snapshot.embedObject.id"
             draggable="true"
             @dragstart="startEmbedDrag(snapshot, $event)"
         >
-            <NotebookEmbed ref="notebookEmbed"
+            <NotebookEmbed
+                ref="notebookEmbed"
                 :key="snapshot.embedObject.id"
                 :embed="snapshot.embedObject"
                 :is-snapshot-container="true"
@@ -39,7 +44,8 @@
                 @removeEmbed="removeSnapshot"
             />
         </span>
-        <div v-if="!snapshots.length > 0"
+        <div
+            v-if="!snapshots.length > 0"
             class="hint"
         >
             There are no Notebook Snapshots currently.

src/plugins/notebook/components/NotebookSnapshotIndicator.vue

@@ -1,5 +1,6 @@
 <template>
-<div class="c-indicator c-indicator--clickable icon-camera"
+<div
+    class="c-indicator c-indicator--clickable icon-camera"
     :class="[
         { 's-status-off': snapshotCount === 0 },
         { 's-status-on': snapshotCount > 0 },

src/plugins/notebook/components/PageCollection.vue

@@ -1,10 +1,12 @@
 <template>
 <ul class="c-list">
-    <li v-for="page in pages"
+    <li
+        v-for="page in pages"
         :key="page.id"
         class="c-list__item-h"
     >
-        <Page ref="pageComponent"
+        <Page
+            ref="pageComponent"
             :default-page-id="defaultPageId"
             :selected-page-id="selectedPageId"
             :page="page"

src/plugins/notebook/components/PageComponent.vue

@@ -1,10 +1,12 @@
 <template>
-<div class="c-list__item js-list__item"
+<div
+    class="c-list__item js-list__item"
     :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]"
     :data-id="page.id"
     @click="selectPage"
 >
-    <span class="c-list__item__name js-list__item__name"
+    <span
+        class="c-list__item__name js-list__item__name"
         :data-id="page.id"
         @keydown.enter="updateName"
         @blur="updateName"

src/plugins/notebook/components/SearchResults.vue

@@ -24,7 +24,8 @@
 <div class="c-notebook__search-results">
     <div class="c-notebook__search-results__header">Search Results ({{ results.length }})</div>
     <div class="c-notebook__entries">
-        <NotebookEntry v-for="(result, index) in results"
+        <NotebookEntry
+            v-for="(result, index) in results"
             :key="index"
             :domain-object="domainObject"
             :result="result"

src/plugins/notebook/components/SectionCollection.vue

@@ -1,10 +1,12 @@
 <template>
 <ul class="c-list">
-    <li v-for="section in sections"
+    <li
+        v-for="section in sections"
         :key="section.id"
         class="c-list__item-h"
     >
-        <NotebookSection ref="sectionComponent"
+        <NotebookSection
+            ref="sectionComponent"
             :default-section-id="defaultSectionId"
             :selected-section-id="selectedSectionId"
             :section="section"

src/plugins/notebook/components/SectionComponent.vue

@@ -1,10 +1,12 @@
 <template>
-<div class="c-list__item js-list__item"
+<div
+    class="c-list__item js-list__item"
     :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]"
     :data-id="section.id"
     @click="selectSection"
 >
-    <span class="c-list__item__name js-list__item__name"
+    <span
+        class="c-list__item__name js-list__item__name"
         :data-id="section.id"
         @keydown.enter="updateName"
         @blur="updateName"

src/plugins/notebook/components/Sidebar.vue

@@ -7,13 +7,15 @@
             </div>
         </div>
         <div class="c-sidebar__contents-and-controls">
-            <button class="c-list-button"
+            <button
+                class="c-list-button"
                 @click="addSection"
             >
                 <span class="c-button c-list-button__button icon-plus"></span>
                 <span class="c-list-button__label">Add {{ sectionTitle }}</span>
             </button>
-            <SectionCollection class="c-sidebar__contents"
+            <SectionCollection
+                class="c-sidebar__contents"
                 :default-section-id="defaultSectionId"
                 :selected-section-id="selectedSectionId"
                 :domain-object="domainObject"
@@ -30,19 +32,22 @@
             <div class="c-sidebar__header">
                 <span class="c-sidebar__header-label">{{ pageTitle }}</span>
             </div>
-            <button class="c-click-icon c-click-icon--major icon-x-in-circle"
+            <button
+                class="c-click-icon c-click-icon--major icon-x-in-circle"
                 @click="toggleNav"
             ></button>
         </div>
 
         <div class="c-sidebar__contents-and-controls">
-            <button class="c-list-button"
+            <button
+                class="c-list-button"
                 @click="addPage"
             >
                 <span class="c-button c-list-button__button icon-plus"></span>
                 <span class="c-list-button__label">Add {{ pageTitle }}</span>
             </button>
-            <PageCollection ref="pageCollection"
+            <PageCollection
+                ref="pageCollection"
                 class="c-sidebar__contents"
                 :default-page-id="defaultPageId"
                 :selected-page-id="selectedPageId"

src/plugins/plan/Plan.vue

@@ -21,7 +21,8 @@
 -->
 
 <template>
-<div ref="plan"
+<div
+    ref="plan"
     class="c-plan c-timeline-holder"
 >
     <template v-if="viewBounds && !options.compact">
@@ -36,7 +37,8 @@
             />
         </swim-lane>
     </template>
-    <div ref="planHolder"
+    <div
+        ref="planHolder"
         class="c-plan__contents u-contents"
     >
     </div>

src/plugins/plan/inspector/PlanActivitiesView.vue

@@ -21,7 +21,8 @@
 -->
 <template>
 <div class="c-inspector__properties c-inspect-properties">
-    <plan-activity-view v-for="activity in activities"
+    <plan-activity-view
+        v-for="activity in activities"
         :key="activity.id"
         :activity="activity"
         :heading="heading"

src/plugins/plan/inspector/PlanActivityView.vue

@@ -21,17 +21,20 @@
 -->
 
 <template>
-<div v-if="timeProperties.length"
+<div
+    v-if="timeProperties.length"
     class="u-contents"
 >
     <div class="c-inspect-properties__header">
         {{ heading }}
     </div>
-    <ul v-for="timeProperty in timeProperties"
+    <ul
+        v-for="timeProperty in timeProperties"
         :key="timeProperty.id"
         class="c-inspect-properties__section"
     >
-        <activity-property :label="timeProperty.label"
+        <activity-property
+            :label="timeProperty.label"
             :value="timeProperty.value"
         />
     </ul>

src/plugins/plot/MctPlot.vue

@@ -20,18 +20,21 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div v-if="loaded"
+<div
+    v-if="loaded"
     class="gl-plot"
     :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
 >
-    <plot-legend :cursor-locked="!!lockHighlightPoint"
+    <plot-legend
+        :cursor-locked="!!lockHighlightPoint"
         :series="seriesModels"
         :highlights="highlights"
         :legend="legend"
         @legendHoverChanged="legendHoverChanged"
     />
     <div class="plot-wrapper-axis-and-display-area flex-elem grows">
-        <y-axis v-if="seriesModels.length > 0"
+        <y-axis
+            v-if="seriesModels.length > 0"
             :tick-width="tickWidth"
             :single-series="seriesModels.length === 1"
             :series-model="seriesModels[0]"
@@ -41,7 +44,8 @@
             @yKeyChanged="setYAxisKey"
             @tickWidthChanged="onTickWidthChange"
         />
-        <div class="gl-plot-wrapper-display-area-and-x-axis"
+        <div
+            class="gl-plot-wrapper-display-area-and-x-axis"
             :style="{
                 left: (plotWidth + 20) + 'px'
             }"
@@ -49,27 +53,32 @@
 
             <div class="gl-plot-display-area has-local-controls has-cursor-guides">
                 <div class="l-state-indicators">
-                    <span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
+                    <span
+                        class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
                         title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."
                     ></span>
                 </div>
 
-                <mct-ticks v-show="gridLines && !options.compact"
+                <mct-ticks
+                    v-show="gridLines && !options.compact"
                     :axis-type="'xAxis'"
                     :position="'right'"
                     @plotTickWidth="onTickWidthChange"
                 />
 
-                <mct-ticks v-show="gridLines"
+                <mct-ticks
+                    v-show="gridLines"
                     :axis-type="'yAxis'"
                     :position="'bottom'"
                     @plotTickWidth="onTickWidthChange"
                 />
 
-                <div ref="chartContainer"
+                <div
+                    ref="chartContainer"
                     class="gl-plot-chart-wrapper"
                 >
-                    <mct-chart :rectangles="rectangles"
+                    <mct-chart
+                        :rectangles="rectangles"
                         :highlights="highlights"
                         :show-limit-line-labels="showLimitLineLabels"
                         @plotReinitializeCanvas="initCanvas"
@@ -77,54 +86,65 @@
                 </div>
 
                 <div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover">
-                    <div v-if="!options.compact"
+                    <div
+                        v-if="!options.compact"
                         class="c-button-set c-button-set--strip-h js-zoom"
                     >
-                        <button class="c-button icon-minus"
+                        <button
+                            class="c-button icon-minus"
                             title="Zoom out"
                             @click="zoom('out', 0.2)"
                         >
                         </button>
-                        <button class="c-button icon-plus"
+                        <button
+                            class="c-button icon-plus"
                             title="Zoom in"
                             @click="zoom('in', 0.2)"
                         >
                         </button>
                     </div>
-                    <div v-if="plotHistory.length && !options.compact"
+                    <div
+                        v-if="plotHistory.length && !options.compact"
                         class="c-button-set c-button-set--strip-h js-pan"
                     >
-                        <button class="c-button icon-arrow-left"
+                        <button
+                            class="c-button icon-arrow-left"
                             title="Restore previous pan/zoom"
                             @click="back()"
                         >
                         </button>
-                        <button class="c-button icon-reset"
+                        <button
+                            class="c-button icon-reset"
                             title="Reset pan/zoom"
                             @click="clear()"
                         >
                         </button>
                     </div>
-                    <div v-if="isRealTime && !options.compact"
+                    <div
+                        v-if="isRealTime && !options.compact"
                         class="c-button-set c-button-set--strip-h js-pause"
                     >
-                        <button v-if="!isFrozen"
+                        <button
+                            v-if="!isFrozen"
                             class="c-button icon-pause"
                             title="Pause incoming real-time data"
                             @click="pause()"
                         >
                         </button>
-                        <button v-if="isFrozen"
+                        <button
+                            v-if="isFrozen"
                             class="c-button icon-arrow-right pause-play is-paused"
                             title="Resume displaying real-time data"
                             @click="play()"
                         >
                         </button>
                     </div>
-                    <div v-if="isTimeOutOfSync || isFrozen"
+                    <div
+                        v-if="isTimeOutOfSync || isFrozen"
                         class="c-button-set c-button-set--strip-h"
                     >
-                        <button class="c-button icon-clock"
+                        <button
+                            class="c-button icon-clock"
                             title="Synchronize Time Conductor"
                             @click="showSynchronizeDialog()"
                         >
@@ -133,18 +153,21 @@
                 </div>
 
                 <!--Cursor guides-->
-                <div v-show="cursorGuide"
+                <div
+                    v-show="cursorGuide"
                     ref="cursorGuideVertical"
                     class="c-cursor-guide--v js-cursor-guide--v"
                 >
                 </div>
-                <div v-show="cursorGuide"
+                <div
+                    v-show="cursorGuide"
                     ref="cursorGuideHorizontal"
                     class="c-cursor-guide--h js-cursor-guide--h"
                 >
                 </div>
             </div>
-            <x-axis v-if="seriesModels.length > 0 && !options.compact"
+            <x-axis
+                v-if="seriesModels.length > 0 && !options.compact"
                 :series-model="seriesModels[0]"
             />
 

src/plugins/plot/MctTicks.vue

@@ -21,13 +21,16 @@
 -->
 
 <template>
-<div ref="tickContainer"
+<div
+    ref="tickContainer"
     class="u-contents js-ticks"
 >
-    <div v-if="position === 'left'"
+    <div
+        v-if="position === 'left'"
         class="gl-plot-tick-wrapper"
     >
-        <div v-for="tick in ticks"
+        <div
+            v-for="tick in ticks"
             :key="tick.value"
             class="gl-plot-tick gl-plot-x-tick-label"
             :style="{
@@ -38,10 +41,12 @@
             {{ tick.text }}
         </div>
     </div>
-    <div v-if="position === 'top'"
+    <div
+        v-if="position === 'top'"
         class="gl-plot-tick-wrapper"
     >
-        <div v-for="tick in ticks"
+        <div
+            v-for="tick in ticks"
             :key="tick.value"
             class="gl-plot-tick gl-plot-y-tick-label"
             :style="{ top: (100 * (max - tick.value) / interval) + '%' }"
@@ -53,7 +58,8 @@
     </div>
     <!-- grid lines follow -->
     <template v-if="position === 'right'">
-        <div v-for="tick in ticks"
+        <div
+            v-for="tick in ticks"
             :key="tick.value"
             class="gl-plot-hash hash-v"
             :style="{
@@ -64,7 +70,8 @@
         </div>
     </template>
     <template v-if="position === 'bottom'">
-        <div v-for="tick in ticks"
+        <div
+            v-for="tick in ticks"
             :key="tick.value"
             class="gl-plot-hash hash-h"
             :style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }"

src/plugins/plot/Plot.vue

@@ -20,33 +20,39 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div ref="plotWrapper"
+<div
+    ref="plotWrapper"
     class="c-plot holder holder-plot has-control-bar"
 >
-    <div v-if="!options.compact"
+    <div
+        v-if="!options.compact"
         class="c-control-bar"
     >
         <span class="c-button-set c-button-set--strip-h">
-            <button class="c-button icon-download"
+            <button
+                class="c-button icon-download"
                 title="Export This View's Data as PNG"
                 @click="exportPNG()"
             >
                 <span class="c-button__label">PNG</span>
             </button>
-            <button class="c-button"
+            <button
+                class="c-button"
                 title="Export This View's Data as JPG"
                 @click="exportJPG()"
             >
                 <span class="c-button__label">JPG</span>
             </button>
         </span>
-        <button class="c-button icon-crosshair"
+        <button
+            class="c-button icon-crosshair"
             :class="{ 'is-active': cursorGuide }"
             title="Toggle cursor guides"
             @click="toggleCursorGuide"
         >
         </button>
-        <button class="c-button"
+        <button
+            class="c-button"
             :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }"
             title="Toggle grid lines"
             @click="toggleGridLines"
@@ -54,14 +60,17 @@
         </button>
     </div>
 
-    <div ref="plotContainer"
+    <div
+        ref="plotContainer"
         class="l-view-section u-style-receiver js-style-receiver"
         :class="{'s-status-timeconductor-unsynced': status && status === 'timeconductor-unsynced'}"
     >
-        <div v-show="!!loading"
+        <div
+            v-show="!!loading"
             class="c-loading--overlay loading"
         ></div>
-        <mct-plot :grid-lines="gridLines"
+        <mct-plot
+            :grid-lines="gridLines"
             :cursor-guide="cursorGuide"
             :options="options"
             @loadingUpdated="loadingUpdated"

src/plugins/plot/axis/XAxis.vue

@@ -21,10 +21,12 @@
 -->
 
 <template>
-<div v-if="loaded"
+<div
+    v-if="loaded"
     class="gl-plot-axis-area gl-plot-x has-local-controls"
 >
-    <mct-ticks :axis-type="'xAxis'"
+    <mct-ticks
+        :axis-type="'xAxis'"
         :position="'left'"
         @plotTickWidth="onTickWidthChange"
     />
@@ -42,7 +44,8 @@
         class="gl-plot-x-label__select local-controls--hidden"
         @change="toggleXKeyOption()"
     >
-        <option v-for="option in xKeyOptions"
+        <option
+            v-for="option in xKeyOptions"
             :key="option.key"
             :value="option.key"
         >{{ option.name }}

src/plugins/plot/axis/YAxis.vue

@@ -20,25 +20,29 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div v-if="loaded"
+<div
+    v-if="loaded"
     class="gl-plot-axis-area gl-plot-y has-local-controls"
     :style="{
         width: (tickWidth + 20) + 'px'
     }"
 >
 
-    <div v-if="singleSeries"
+    <div
+        v-if="singleSeries"
         class="gl-plot-label gl-plot-y-label"
         :class="{'icon-gear': (yKeyOptions.length > 1)}"
     >{{ yAxisLabel }}
     </div>
 
-    <select v-if="yKeyOptions.length > 1 && singleSeries"
+    <select
+        v-if="yKeyOptions.length > 1 && singleSeries"
         v-model="yAxisLabel"
         class="gl-plot-y-label__select local-controls--hidden"
         @change="toggleYAxisLabel"
     >
-        <option v-for="(option, index) in yKeyOptions"
+        <option
+            v-for="(option, index) in yKeyOptions"
             :key="index"
             :value="option.name"
             :selected="option.name === yAxisLabel"
@@ -47,7 +51,8 @@
         </option>
     </select>
 
-    <mct-ticks :axis-type="'yAxis'"
+    <mct-ticks
+        :axis-type="'yAxis'"
         class="gl-plot-ticks"
         :position="'top'"
         @plotTickWidth="onTickWidthChange"

src/plugins/plot/chart/LimitLabel.vue

@@ -1,5 +1,6 @@
 <template>
-<div class="c-plot-limit"
+<div
+    class="c-plot-limit"
     :style="styleObj"
     :class="limitClass"
 >
@@ -7,7 +8,8 @@
         <span class="c-plot-limit__direction-icon"></span>
         <span class="c-plot-limit__severity-icon"></span>
         <span class="c-plot-limit__limit-value">{{ limit.value }}</span>
-        <span class="c-plot-limit__series-color-swatch"
+        <span
+            class="c-plot-limit__series-color-swatch"
             :style="{ 'background-color': limit.seriesColor }"
         ></span>
         <span class="c-plot-limit__series-name">{{ limit.name }}</span>

src/plugins/plot/chart/LimitLine.vue

@@ -1,5 +1,6 @@
 <template>
-<div :style="styleObj"
+<div
+    :style="styleObj"
     class="c-plot-limit-line js-limit-line"
     :class="limitClass"
 ></div>

src/plugins/plot/chart/MctChart.vue

@@ -26,7 +26,8 @@
 <div class="gl-plot-chart-area">
     <span v-html="canvasTemplate"></span>
     <span v-html="canvasTemplate"></span>
-    <div ref="limitArea"
+    <div
+        ref="limitArea"
         class="js-limit-area"
     ></div>
 </div>

src/plugins/plot/inspector/PlotOptionsBrowse.vue

@@ -20,29 +20,34 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div v-if="loaded"
+<div
+    v-if="loaded"
     class="js-plot-options-browse"
 >
     <ul class="c-tree">
         <h2 title="Plot series display properties in this object">Plot Series</h2>
-        <plot-options-item v-for="series in plotSeries"
+        <plot-options-item
+            v-for="series in plotSeries"
             :key="series.key"
             :series="series"
         />
     </ul>
-    <div v-if="plotSeries.length"
+    <div
+        v-if="plotSeries.length"
         class="grid-properties"
     >
         <ul class="l-inspector-part">
             <h2 title="Y axis settings for this object">Y Axis</h2>
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="Manually override how the Y axis is labeled."
                 >Label</div>
                 <div class="grid-cell value">{{ label ? label : "Not defined" }}</div>
             </li>
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="Automatically scale the Y axis to keep all values in view."
                 >Autoscale</div>
                 <div class="grid-cell value">
@@ -50,18 +55,22 @@
                     {{ autoscale ? autoscalePadding : "" }}
                 </div>
             </li>
-            <li v-if="!autoscale && rangeMin"
+            <li
+                v-if="!autoscale && rangeMin"
                 class="grid-row"
             >
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="Minimum Y axis value."
                 >Minimum value</div>
                 <div class="grid-cell value">{{ rangeMin }}</div>
             </li>
-            <li v-if="!autoscale && rangeMax"
+            <li
+                v-if="!autoscale && rangeMax"
                 class="grid-row"
             >
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="Maximum Y axis value."
                 >Maximum value</div>
                 <div class="grid-cell value">{{ rangeMax }}</div>
@@ -70,25 +79,29 @@
         <ul class="l-inspector-part">
             <h2 title="Legend settings for this object">Legend</h2>
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="The position of the legend relative to the plot display area."
                 >Position</div>
                 <div class="grid-cell value capitalize">{{ position }}</div>
             </li>
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="Hide the legend when the plot is small"
                 >Hide when plot small</div>
                 <div class="grid-cell value">{{ hideLegendWhenSmall ? "Yes" : "No" }}</div>
             </li>
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="Show the legend expanded by default"
                 >Expand by Default</div>
                 <div class="grid-cell value">{{ expandByDefault ? "Yes" : "No" }}</div>
             </li>
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="What to display in the legend when it's collapsed."
                 >Show when collapsed:</div>
                 <div class="grid-cell value">{{
@@ -97,7 +110,8 @@
                 </div>
             </li>
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="What to display in the legend when it's expanded."
                 >Show when expanded:</div>
                 <div class="grid-cell value comma-list">

src/plugins/plot/inspector/PlotOptionsEdit.vue

@@ -20,24 +20,28 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div v-if="loaded"
+<div
+    v-if="loaded"
     class="js-plot-options-edit"
 >
     <ul class="c-tree">
         <h2 title="Display properties for this object">Plot Series</h2>
-        <li v-for="series in plotSeries"
+        <li
+            v-for="series in plotSeries"
             :key="series.key"
         >
             <series-form :series="series" />
         </li>
     </ul>
-    <y-axis-form v-if="plotSeries.length"
+    <y-axis-form
+        v-if="plotSeries.length"
         class="grid-properties"
         :y-axis="config.yAxis"
     />
     <ul class="l-inspector-part">
         <h2 title="Legend options">Legend</h2>
-        <legend-form v-if="plotSeries.length"
+        <legend-form
+            v-if="plotSeries.length"
             class="grid-properties"
             :legend="config.legend"
         />

src/plugins/plot/inspector/PlotOptionsItem.vue

@@ -1,32 +1,39 @@
 <template>
 <ul>
-    <li class="c-tree__item menus-to-left"
+    <li
+        class="c-tree__item menus-to-left"
         :class="isAliasClass"
     >
-        <span class="c-disclosure-triangle is-enabled flex-elem"
+        <span
+            class="c-disclosure-triangle is-enabled flex-elem"
             :class="expandedCssClass"
             @click="toggleExpanded"
         >
         </span>
-        <div class="c-object-label"
+        <div
+            class="c-object-label"
             :class="statusClass"
         >
-            <div class="c-object-label__type-icon"
+            <div
+                class="c-object-label__type-icon"
                 :class="getSeriesClass"
             >
-                <span class="is-status__indicator"
+                <span
+                    class="is-status__indicator"
                     title="This item is missing or suspect"
                 ></span>
             </div>
             <div class="c-object-label__name">{{ series.domainObject.name }}</div>
         </div>
     </li>
-    <li v-show="expanded"
+    <li
+        v-show="expanded"
         class="c-tree__item menus-to-left"
     >
         <ul class="grid-properties js-plot-options-browse-properties">
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="The field to be plotted as a value for this series."
                 >Value</div>
                 <div class="grid-cell value">
@@ -34,7 +41,8 @@
                 </div>
             </li>
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="The rendering method to join lines for this series."
                 >Line Method</div>
                 <div class="grid-cell value">{{ {
@@ -45,7 +53,8 @@
                 </div>
             </li>
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="Whether markers are displayed, and their size."
                 >Markers</div>
                 <div class="grid-cell value">
@@ -53,7 +62,8 @@
                 </div>
             </li>
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="Display markers visually denoting points in alarm."
                 >Alarm Markers</div>
                 <div class="grid-cell value">
@@ -61,14 +71,16 @@
                 </div>
             </li>
             <li class="grid-row">
-                <div class="grid-cell label"
+                <div
+                    class="grid-cell label"
                     title="Display lines visually denoting alarm limits."
                 >Limit lines</div>
                 <div class="grid-cell value">
                     {{ limitLines ? "Enabled" : "Disabled" }}
                 </div>
             </li>
-            <ColorSwatch :current-color="seriesHexColor"
+            <ColorSwatch
+                :current-color="seriesHexColor"
                 edit-title="Manually set the plot line and marker color for this series."
                 view-title="The plot line and marker color for this series."
                 short-label="Color"

src/plugins/plot/inspector/forms/LegendForm.vue

@@ -1,11 +1,13 @@
 <template>
 <div>
     <li class="grid-row">
-        <div class="grid-cell label"
+        <div
+            class="grid-cell label"
             title="The position of the legend relative to the plot display area."
         >Position</div>
         <div class="grid-cell value">
-            <select v-model="position"
+            <select
+                v-model="position"
                 @change="updateForm('position')"
             >
                 <option value="top">Top</option>
@@ -16,29 +18,35 @@
         </div>
     </li>
     <li class="grid-row">
-        <div class="grid-cell label"
+        <div
+            class="grid-cell label"
             title="Hide the legend when the plot is small"
         >Hide when plot small</div>
-        <div class="grid-cell value"><input v-model="hideLegendWhenSmall"
+        <div class="grid-cell value"><input
+            v-model="hideLegendWhenSmall"
             type="checkbox"
             @change="updateForm('hideLegendWhenSmall')"
         ></div>
     </li>
     <li class="grid-row">
-        <div class="grid-cell label"
+        <div
+            class="grid-cell label"
             title="Show the legend expanded by default"
         >Expand by default</div>
-        <div class="grid-cell value"><input v-model="expandByDefault"
+        <div class="grid-cell value"><input
+            v-model="expandByDefault"
             type="checkbox"
             @change="updateForm('expandByDefault')"
         ></div>
     </li>
     <li class="grid-row">
-        <div class="grid-cell label"
+        <div
+            class="grid-cell label"
             title="What to display in the legend when it's collapsed."
         >When collapsed show</div>
         <div class="grid-cell value">
-            <select v-model="valueToShowWhenCollapsed"
+            <select
+                v-model="valueToShowWhenCollapsed"
                 @change="updateForm('valueToShowWhenCollapsed')"
             >
                 <option value="none">Nothing</option>
@@ -51,28 +59,34 @@
         </div>
     </li>
     <li class="grid-row">
-        <div class="grid-cell label"
+        <div
+            class="grid-cell label"
             title="What to display in the legend when it's expanded."
         >When expanded show</div>
         <div class="grid-cell value">
             <ul>
-                <li><input v-model="showTimestampWhenExpanded"
+                <li><input
+                    v-model="showTimestampWhenExpanded"
                     type="checkbox"
                     @change="updateForm('showTimestampWhenExpanded')"
                 > Nearest timestamp</li>
-                <li><input v-model="showValueWhenExpanded"
+                <li><input
+                    v-model="showValueWhenExpanded"
                     type="checkbox"
                     @change="updateForm('showValueWhenExpanded')"
                 > Nearest value</li>
-                <li><input v-model="showMinimumWhenExpanded"
+                <li><input
+                    v-model="showMinimumWhenExpanded"
                     type="checkbox"
                     @change="updateForm('showMinimumWhenExpanded')"
                 > Minimum value</li>
-                <li><input v-model="showMaximumWhenExpanded"
+                <li><input
+                    v-model="showMaximumWhenExpanded"
                     type="checkbox"
                     @change="updateForm('showMaximumWhenExpanded')"
                 > Maximum value</li>
-                <li><input v-model="showUnitsWhenExpanded"
+                <li><input
+                    v-model="showUnitsWhenExpanded"
                     type="checkbox"
                     @change="updateForm('showUnitsWhenExpanded')"
                 > Units</li>

src/plugins/plot/inspector/forms/SeriesForm.vue

@@ -1,37 +1,45 @@
 <template>
 <ul>
-    <li class="c-tree__item menus-to-left"
+    <li
+        class="c-tree__item menus-to-left"
         :class="isAliasCss"
     >
-        <span class="c-disclosure-triangle is-enabled flex-elem"
+        <span
+            class="c-disclosure-triangle is-enabled flex-elem"
             :class="expandedCssClass"
             @click="toggleExpanded"
         >
         </span>
         <div :class="objectLabelCss">
-            <div class="c-object-label__type-icon"
+            <div
+                class="c-object-label__type-icon"
                 :class="[seriesCss]"
             >
-                <span class="is-status__indicator"
+                <span
+                    class="is-status__indicator"
                     title="This item is missing or suspect"
                 ></span>
             </div>
             <div class="c-object-label__name">{{ series.domainObject.name }}</div>
         </div>
     </li>
-    <ul v-show="expanded"
+    <ul
+        v-show="expanded"
         class="grid-properties js-plot-options-edit-properties"
     >
         <li class="grid-row">
             <!-- Value to be displayed -->
-            <div class="grid-cell label"
+            <div
+                class="grid-cell label"
                 title="The field to be plotted as a value for this series."
             >Value</div>
             <div class="grid-cell value">
-                <select v-model="yKey"
+                <select
+                    v-model="yKey"
                     @change="updateForm('yKey')"
                 >
-                    <option v-for="option in yKeyOptions"
+                    <option
+                        v-for="option in yKeyOptions"
                         :key="option.value"
                         :value="option.value"
                         :selected="option.value == yKey"
@@ -42,11 +50,13 @@
             </div>
         </li>
         <li class="grid-row">
-            <div class="grid-cell label"
+            <div
+                class="grid-cell label"
                 title="The rendering method to join lines for this series."
             >Line Method</div>
             <div class="grid-cell value">
-                <select v-model="interpolate"
+                <select
+                    v-model="interpolate"
                     @change="updateForm('interpolate')"
                 >
                     <option value="none">None</option>
@@ -56,11 +66,13 @@
             </div>
         </li>
         <li class="grid-row">
-            <div class="grid-cell label"
+            <div
+                class="grid-cell label"
                 title="Whether markers are displayed."
             >Markers</div>
             <div class="grid-cell value">
-                <input v-model="markers"
+                <input
+                    v-model="markers"
                     type="checkbox"
                     @change="updateForm('markers')"
                 >
@@ -81,43 +93,52 @@
             </div>
         </li>
         <li class="grid-row">
-            <div class="grid-cell label"
+            <div
+                class="grid-cell label"
                 title="Display markers visually denoting points in alarm."
             >Alarm Markers</div>
             <div class="grid-cell value">
-                <input v-model="alarmMarkers"
+                <input
+                    v-model="alarmMarkers"
                     type="checkbox"
                     @change="updateForm('alarmMarkers')"
                 >
             </div>
         </li>
         <li class="grid-row">
-            <div class="grid-cell label"
+            <div
+                class="grid-cell label"
                 title="Display limit lines"
             >Limit lines</div>
             <div class="grid-cell value">
-                <input v-model="limitLines"
+                <input
+                    v-model="limitLines"
                     type="checkbox"
                     @change="updateForm('limitLines')"
                 >
             </div>
         </li>
-        <li v-show="markers || alarmMarkers"
+        <li
+            v-show="markers || alarmMarkers"
             class="grid-row"
         >
-            <div class="grid-cell label"
+            <div
+                class="grid-cell label"
                 title="The size of regular and alarm markers for this series."
             >Marker Size:</div>
-            <div class="grid-cell value"><input v-model="markerSize"
+            <div class="grid-cell value"><input
+                v-model="markerSize"
                 class="c-input--flex"
                 type="text"
                 @change="updateForm('markerSize')"
             ></div>
         </li>
-        <li v-show="interpolate !== 'none' || markers"
+        <li
+            v-show="interpolate !== 'none' || markers"
             class="grid-row"
         >
-            <ColorSwatch :current-color="currentColor"
+            <ColorSwatch
+                :current-color="currentColor"
                 edit-title="Manually set the plot line and marker color for this series."
                 view-title="The plot line and marker color for this series."
                 short-label="Color"

src/plugins/plot/inspector/forms/YAxisForm.vue

@@ -3,10 +3,12 @@
     <ul class="l-inspector-part">
         <h2>Y Axis</h2>
         <li class="grid-row">
-            <div class="grid-cell label"
+            <div
+                class="grid-cell label"
                 title="Manually override how the Y axis is labeled."
             >Label</div>
-            <div class="grid-cell value"><input v-model="label"
+            <div class="grid-cell value"><input
+                v-model="label"
                 class="c-input--flex"
                 type="text"
                 @change="updateForm('label')"
@@ -16,23 +18,28 @@
     <ul class="l-inspector-part">
         <h2>Y Axis Scaling</h2>
         <li class="grid-row">
-            <div class="grid-cell label"
+            <div
+                class="grid-cell label"
                 title="Automatically scale the Y axis to keep all values in view."
             >Auto scale</div>
-            <div class="grid-cell value"><input v-model="autoscale"
+            <div class="grid-cell value"><input
+                v-model="autoscale"
                 type="checkbox"
                 @change="updateForm('autoscale')"
             ></div>
         </li>
-        <li v-show="autoscale"
+        <li
+            v-show="autoscale"
             class="grid-row"
         >
-            <div class="grid-cell label"
+            <div
+                class="grid-cell label"
                 title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc."
             >
                 Padding</div>
             <div class="grid-cell value">
-                <input v-model="autoscalePadding"
+                <input
+                    v-model="autoscalePadding"
                     class="c-input--flex"
                     type="text"
                     @change="updateForm('autoscalePadding')"
@@ -40,20 +47,24 @@
             </div>
         </li>
     </ul>
-    <ul v-show="!autoscale"
+    <ul
+        v-show="!autoscale"
         class="l-inspector-part"
     >
-        <div v-show="!autoscale && validation.range"
+        <div
+            v-show="!autoscale && validation.range"
             class="grid-span-all form-error"
         >
             {{ validation.range }}
         </div>
         <li class="grid-row force-border">
-            <div class="grid-cell label"
+            <div
+                class="grid-cell label"
                 title="Minimum Y axis value."
             >Minimum Value</div>
             <div class="grid-cell value">
-                <input v-model="rangeMin"
+                <input
+                    v-model="rangeMin"
                     class="c-input--flex"
                     type="number"
                     @change="updateForm('range')"
@@ -61,10 +72,12 @@
             </div>
         </li>
         <li class="grid-row">
-            <div class="grid-cell label"
+            <div
+                class="grid-cell label"
                 title="Maximum Y axis value."
             >Maximum Value</div>
-            <div class="grid-cell value"><input v-model="rangeMax"
+            <div class="grid-cell value"><input
+                v-model="rangeMax"
                 class="c-input--flex"
                 type="number"
                 @change="updateForm('range')"

src/plugins/plot/legend/PlotLegend.vue

@@ -20,30 +20,36 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div class="c-plot-legend gl-plot-legend"
+<div
+    class="c-plot-legend gl-plot-legend"
     :class="{
         'hover-on-plot': !!highlights.length,
         'is-legend-hidden': isLegendHidden
     }"
 >
-    <div class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
+    <div
+        class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
         :class="{ 'c-disclosure-triangle--expanded': isLegendExpanded }"
         @click="expandLegend"
     >
     </div>
 
-    <div class="c-plot-legend__wrapper"
+    <div
+        class="c-plot-legend__wrapper"
         :class="{ 'is-cursor-locked': cursorLocked }"
     >
 
         <!-- COLLAPSED PLOT LEGEND -->
-        <div class="plot-wrapper-collapsed-legend"
+        <div
+            class="plot-wrapper-collapsed-legend"
             :class="{'is-cursor-locked': cursorLocked }"
         >
-            <div class="c-state-indicator__alert-cursor-lock icon-cursor-lock"
+            <div
+                class="c-state-indicator__alert-cursor-lock icon-cursor-lock"
                 title="Cursor is point locked. Click anywhere in the plot to unlock."
             ></div>
-            <plot-legend-item-collapsed v-for="seriesObject in series"
+            <plot-legend-item-collapsed
+                v-for="seriesObject in series"
                 :key="seriesObject.keyString"
                 :highlights="highlights"
                 :value-to-show-when-collapsed="legend.get('valueToShowWhenCollapsed')"
@@ -52,10 +58,12 @@
             />
         </div>
         <!-- EXPANDED PLOT LEGEND -->
-        <div class="plot-wrapper-expanded-legend"
+        <div
+            class="plot-wrapper-expanded-legend"
             :class="{'is-cursor-locked': cursorLocked }"
         >
-            <div class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock"
+            <div
+                class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock"
                 title="Click anywhere in the plot to unlock."
             > Cursor locked to point</div>
             <table>
@@ -71,12 +79,14 @@
                         <th v-if="showUnitsWhenExpanded">
                             Unit
                         </th>
-                        <th v-if="showMinimumWhenExpanded"
+                        <th
+                            v-if="showMinimumWhenExpanded"
                             class="mobile-hide"
                         >
                             Min
                         </th>
-                        <th v-if="showMaximumWhenExpanded"
+                        <th
+                            v-if="showMaximumWhenExpanded"
                             class="mobile-hide"
                         >
                             Max
@@ -84,7 +94,8 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <plot-legend-item-expanded v-for="seriesObject in series"
+                    <plot-legend-item-expanded
+                        v-for="seriesObject in series"
                         :key="seriesObject.keyString"
                         :series-object="seriesObject"
                         :highlights="highlights"

src/plugins/plot/legend/PlotLegendItemCollapsed.vue

@@ -20,7 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div class="plot-legend-item"
+<div
+    class="plot-legend-item"
     :class="{
         'is-status--missing': isMissing
     }"
@@ -28,16 +29,19 @@
     @mouseleave="toggleHover(false)"
 >
     <div class="plot-series-swatch-and-name">
-        <span class="plot-series-color-swatch"
+        <span
+            class="plot-series-color-swatch"
             :style="{ 'background-color': colorAsHexString }"
         >
         </span>
-        <span class="is-status__indicator"
+        <span
+            class="is-status__indicator"
             title="This item is missing or suspect"
         ></span>
         <span class="plot-series-name">{{ nameWithUnit }}</span>
     </div>
-    <div v-show="!!highlights.length && (valueToShowWhenCollapsed !== 'none')"
+    <div
+        v-show="!!highlights.length && (valueToShowWhenCollapsed !== 'none')"
         class="plot-series-value hover-value-enabled"
         :class="[{ 'cursor-hover': notNearest }, valueToDisplayWhenCollapsedClass, mctLimitStateClass]"
     >

src/plugins/plot/legend/PlotLegendItemExpanded.vue

@@ -29,11 +29,13 @@
     @mouseleave="toggleHover(false)"
 >
     <td class="plot-series-swatch-and-name">
-        <span class="plot-series-color-swatch"
+        <span
+            class="plot-series-color-swatch"
             :style="{ 'background-color': colorAsHexString }"
         >
         </span>
-        <span class="is-status__indicator"
+        <span
+            class="is-status__indicator"
             title="This item is missing or suspect"
         ></span>
         <span class="plot-series-name">{{ name }}</span>
@@ -45,7 +47,8 @@
         </span>
     </td>
     <td v-if="showValueWhenExpanded">
-        <span class="plot-series-value cursor-hover hover-value-enabled"
+        <span
+            class="plot-series-value cursor-hover hover-value-enabled"
             :class="[mctLimitStateClass]"
         >
             {{ formattedYValue }}
@@ -56,14 +59,16 @@
             {{ unit }}
         </span>
     </td>
-    <td v-if="showMinimumWhenExpanded"
+    <td
+        v-if="showMinimumWhenExpanded"
         class="mobile-hide"
     >
         <span class="plot-series-value">
             {{ formattedMinY }}
         </span>
     </td>
-    <td v-if="showMaximumWhenExpanded"
+    <td
+        v-if="showMaximumWhenExpanded"
         class="mobile-hide"
     >
         <span class="plot-series-value">

src/plugins/plot/stackedPlot/StackedPlot.vue

@@ -22,30 +22,35 @@
 
 <template>
 <div class="c-plot c-plot--stacked holder holder-plot has-control-bar">
-    <div v-show="!hideExportButtons && !options.compact"
+    <div
+        v-show="!hideExportButtons && !options.compact"
         class="c-control-bar"
     >
         <span class="c-button-set c-button-set--strip-h">
-            <button class="c-button icon-download"
+            <button
+                class="c-button icon-download"
                 title="Export This View's Data as PNG"
                 @click="exportPNG()"
             >
                 <span class="c-button__label">PNG</span>
             </button>
-            <button class="c-button"
+            <button
+                class="c-button"
                 title="Export This View's Data as JPG"
                 @click="exportJPG()"
             >
                 <span class="c-button__label">JPG</span>
             </button>
         </span>
-        <button class="c-button icon-crosshair"
+        <button
+            class="c-button icon-crosshair"
             :class="{ 'is-active': cursorGuide }"
             title="Toggle cursor guides"
             @click="toggleCursorGuide"
         >
         </button>
-        <button class="c-button"
+        <button
+            class="c-button"
             :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }"
             title="Toggle grid lines"
             @click="toggleGridLines"
@@ -53,7 +58,8 @@
         </button>
     </div>
     <div class="l-view-section">
-        <stacked-plot-item v-for="object in compositionObjects"
+        <stacked-plot-item
+            v-for="object in compositionObjects"
             :key="object.id"
             class="c-plot--stacked-container"
             :object="object"

src/plugins/tabs/components/tabs.vue

@@ -37,16 +37,19 @@
                 class="c-tabs-view__tab__label c-object-label"
                 :class="[tab.status ? `is-status--${tab.status}` : '']"
             >
-                <div class="c-object-label__type-icon"
+                <div
+                    class="c-object-label__type-icon"
                     :class="tab.type.definition.cssClass"
                 >
-                    <span class="is-status__indicator"
+                    <span
+                        class="is-status__indicator"
                         :title="`This item is ${tab.status}`"
                     ></span>
                 </div>
                 <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
             </div>
-            <button v-if="isEditing"
+            <button
+                v-if="isEditing"
                 class="icon-x c-click-icon c-tabs-view__tab__close-btn"
                 @click="showRemoveDialog(index)"
             ></button>

src/plugins/telemetryTable/components/table.vue

@@ -20,10 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<div class="c-table-wrapper"
+<div
+    class="c-table-wrapper"
     :class="{ 'is-paused': paused }"
 >
-    <div v-if="enableLegacyToolbar"
+    <div
+        v-if="enableLegacyToolbar"
         class="c-table-control-bar c-control-bar"
     >
         <button
@@ -95,7 +97,8 @@
     </div>
 
     <!-- alternate controlbar start -->
-    <div v-if="marking.useAlternateControlBar"
+    <div
+        v-if="marking.useAlternateControlBar"
         class="c-table-control-bar c-control-bar"
     >
         <div class="c-control-bar__label">

src/plugins/timeConductor/Conductor.vue

@@ -30,10 +30,12 @@
     ]"
 >
     <div class="c-conductor__time-bounds">
-        <conductor-inputs-fixed v-if="isFixed"
+        <conductor-inputs-fixed
+            v-if="isFixed"
             @updated="saveFixedOffsets"
         />
-        <conductor-inputs-realtime v-else
+        <conductor-inputs-realtime
+            v-else
             @updated="saveClockOffsets"
         />
         <ConductorModeIcon class="c-conductor__mode-icon" />

src/plugins/timeConductor/ConductorHistory.vue

@@ -20,7 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<div ref="historyButton"
+<div
+    ref="historyButton"
     class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
 >
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">

src/plugins/timeConductor/ConductorInputsFixed.vue

@@ -1,5 +1,6 @@
 <template>
-<form ref="fixedDeltaInput"
+<form
+    ref="fixedDeltaInput"
     class="c-conductor__inputs"
 >
     <div

src/plugins/timeConductor/ConductorInputsRealtime.vue

@@ -1,5 +1,6 @@
 <template>
-<form ref="deltaInput"
+<form
+    ref="deltaInput"
     class="c-conductor__inputs"
 >
     <div

src/plugins/timeConductor/ConductorMode.vue

@@ -20,7 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<div ref="modeButton"
+<div
+    ref="modeButton"
     class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
 >
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">

src/plugins/timeConductor/ConductorTimeSystem.vue

@@ -20,7 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<div v-if="selectedTimeSystem.name"
+<div
+    v-if="selectedTimeSystem.name"
     ref="timeSystemButton"
     class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
 >

src/plugins/timeConductor/independent/IndependentTimeConductor.vue

@@ -36,10 +36,12 @@
 
         <ConductorModeIcon />
 
-        <div v-if="timeOptions && independentTCEnabled"
+        <div
+            v-if="timeOptions && independentTCEnabled"
             class="c-conductor__controls"
         >
-            <Mode v-if="mode"
+            <Mode
+                v-if="mode"
                 class="c-conductor__mode-select"
                 :key-string="domainObject.identifier.key"
                 :mode="timeOptions.mode"
@@ -47,12 +49,14 @@
                 @modeChanged="saveMode"
             />
 
-            <conductor-inputs-fixed v-if="isFixed"
+            <conductor-inputs-fixed
+                v-if="isFixed"
                 :key-string="domainObject.identifier.key"
                 @updated="saveFixedOffsets"
             />
 
-            <conductor-inputs-realtime v-else
+            <conductor-inputs-realtime
+                v-else
                 :key-string="domainObject.identifier.key"
                 @updated="saveClockOffsets"
             />

src/plugins/timeConductor/independent/Mode.vue

@@ -20,12 +20,14 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 <template>
-<div v-if="modes.length > 1"
+<div
+    v-if="modes.length > 1"
     ref="modeMenuButton"
     class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
 >
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
-        <button v-if="selectedMode"
+        <button
+            v-if="selectedMode"
             class="c-button--menu c-mode-button"
             @click.prevent.stop="showModesMenu"
         >

src/plugins/timeConductor/timePopup.vue

@@ -70,7 +70,8 @@
                 :disabled="isDisabled"
                 @click.prevent="submit"
             ></button>
-            <button class="c-button icon-x"
+            <button
+                class="c-button icon-x"
                 @click.prevent="hide"
             ></button>
         </div>

src/plugins/timeline/TimelineObjectView.vue

@@ -20,7 +20,8 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 <template>
-<swim-lane :icon-class="item.type.definition.cssClass"
+<swim-lane
+    :icon-class="item.type.definition.cssClass"
     :status="status"
     :min-height="item.height"
     :show-ucontents="item.domainObject.type === 'plan'"

src/plugins/timeline/TimelineViewLayout.vue

@@ -21,17 +21,20 @@
 *****************************************************************************/
 
 <template>
-<div ref="timelineHolder"
+<div
+    ref="timelineHolder"
     class="c-timeline-holder"
 >
-    <swim-lane v-for="timeSystemItem in timeSystems"
+    <swim-lane
+        v-for="timeSystemItem in timeSystems"
         :key="timeSystemItem.timeSystem.key"
     >
         <template slot="label">
             {{ timeSystemItem.timeSystem.name }}
         </template>
         <template slot="object">
-            <timeline-axis :bounds="timeSystemItem.bounds"
+            <timeline-axis
+                :bounds="timeSystemItem.bounds"
                 :time-system="timeSystemItem.timeSystem"
                 :content-height="height"
                 :rendering-engine="'svg'"
@@ -40,7 +43,8 @@
 
     </swim-lane>
 
-    <div ref="contentHolder"
+    <div
+        ref="contentHolder"
         class="c-timeline__objects"
     >
         <timeline-object-view

src/plugins/timer/components/Timer.vue

@@ -32,7 +32,8 @@
             :class="[{'hide': timerState === 'stopped' }]"
             @click="restartTimer"
         ></button>
-        <button :title="timerStateButtonText"
+        <button
+            :title="timerStateButtonText"
             class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major"
             :class="[timerStateButtonIcon]"
             @click="toggleStateButton"

src/ui/color/ColorSwatch.vue

@@ -21,30 +21,37 @@
 -->
 <template>
 <div class="u-contents">
-    <div v-if="canEdit"
+    <div
+        v-if="canEdit"
         class="grid-row"
     >
-        <div class="grid-cell label"
+        <div
+            class="grid-cell label"
             :title="editTitle"
         >{{ shortLabel }}</div>
         <div class="grid-cell value">
-            <div class="c-click-swatch c-click-swatch--menu"
+            <div
+                class="c-click-swatch c-click-swatch--menu"
                 @click="toggleSwatch()"
             >
-                <span class="c-color-swatch"
+                <span
+                    class="c-color-swatch"
                     :style="{ background: currentColor }"
                 >
                 </span>
             </div>
             <div class="c-palette c-palette--color">
-                <div v-show="swatchActive"
+                <div
+                    v-show="swatchActive"
                     class="c-palette__items"
                 >
-                    <div v-for="group in colorPaletteGroups"
+                    <div
+                        v-for="group in colorPaletteGroups"
                         :key="group.id"
                         class="u-contents"
                     >
-                        <div v-for="color in group"
+                        <div
+                            v-for="color in group"
                             :key="color.id"
                             class="c-palette__item"
                             :class="{ 'selected': currentColor === color.hexString }"
@@ -57,14 +64,17 @@
             </div>
         </div>
     </div>
-    <div v-else
+    <div
+        v-else
         class="grid-row"
     >
-        <div class="grid-cell label"
+        <div
+            class="grid-cell label"
             :title="viewTitle"
         >{{ shortLabel }}</div>
         <div class="grid-cell value">
-            <span class="c-color-swatch"
+            <span
+                class="c-color-swatch"
                 :style="{
                     'background': currentColor
                 }"

src/ui/components/ObjectFrame.vue

@@ -34,13 +34,16 @@
     <div
         class="c-so-view__header"
     >
-        <div class="c-object-label"
+        <div
+            class="c-object-label"
             :class="[ statusClass ]"
         >
-            <div class="c-object-label__type-icon"
+            <div
+                class="c-object-label__type-icon"
                 :class="cssClass"
             >
-                <span class="is-status__indicator"
+                <span
+                    class="is-status__indicator"
                     :title="`This item is ${status}`"
                 ></span>
             </div>
@@ -56,12 +59,14 @@
                 'has-complex-content': complexContent
             }"
         >
-            <NotebookMenuSwitcher v-if="notebookEnabled"
+            <NotebookMenuSwitcher
+                v-if="notebookEnabled"
                 :domain-object="domainObject"
                 :object-path="objectPath"
                 class="c-notebook-snapshot-menubutton"
             />
-            <div v-if="statusBarItems.length > 0"
+            <div
+                v-if="statusBarItems.length > 0"
                 class="c-so-view__frame-controls__btns"
             >
                 <button

src/ui/components/ObjectLabel.vue

@@ -10,7 +10,8 @@
         class="c-tree__item__type-icon c-object-label__type-icon"
         :class="typeClass"
     >
-        <span class="is-status__indicator"
+        <span
+            class="is-status__indicator"
             :title="`This item is ${status}`"
         ></span>
     </div>

src/ui/components/ObjectView.vue

@@ -1,14 +1,17 @@
 <template>
 <div>
-    <div v-if="supportsIndependentTime"
+    <div
+        v-if="supportsIndependentTime"
         class="c-conductor-holder--compact l-shell__main-independent-time-conductor"
     >
-        <independent-time-conductor :domain-object="domainObject"
+        <independent-time-conductor
+            :domain-object="domainObject"
             @stateChanged="updateIndependentTimeState"
             @updated="saveTimeOptions"
         />
     </div>
-    <div ref="objectViewWrapper"
+    <div
+        ref="objectViewWrapper"
         class="c-object-view"
         :class="objectTypeClass"
     ></div>

src/ui/components/ProgressBar.vue

@@ -1,6 +1,7 @@
 <template>
 <div class="c-progress-bar">
-    <div class="c-progress-bar__bar"
+    <div
+        class="c-progress-bar__bar"
         :class="{ '--indeterminate': model.progressPerc === undefined }"
         :style="styleBarWidth"
     ></div>

src/ui/components/TimeSystemAxis.vue

@@ -1,5 +1,6 @@
 <template>
-<div ref="axisHolder"
+<div
+    ref="axisHolder"
     class="c-timesystem-axis"
 >
     <div class="nowMarker"><span class="icon-arrow-down"></span></div>

src/ui/components/swim-lane/SwimLane.vue

@@ -1,21 +1,25 @@
 <template>
-<div class="u-contents"
+<div
+    class="u-contents"
     :class="[
         {'c-swimlane': !isNested},
         statusClass
     ]"
 >
 
-    <div v-if="hideLabel === false"
+    <div
+        v-if="hideLabel === false"
         class="c-swimlane__lane-label c-object-label"
         :class="[swimlaneClass, statusClass]"
         :style="gridRowSpan"
     >
-        <div v-if="iconClass"
+        <div
+            v-if="iconClass"
             class="c-object-label__type-icon"
             :class="iconClass"
         >
-            <span v-if="status"
+            <span
+                v-if="status"
                 class="is-status__indicator"
                 :title="`This item is ${status}`"
             ></span>
@@ -26,7 +30,8 @@
         </div>
 
     </div>
-    <div class="c-swimlane__lane-object"
+    <div
+        class="c-swimlane__lane-object"
         :style="{'min-height': minHeight}"
         :class="{'u-contents': showUcontents}"
     >

src/ui/inspector/Inspector.vue

@@ -23,10 +23,12 @@
 <template>
 <div class="c-inspector">
     <object-name />
-    <div v-if="showStyles"
+    <div
+        v-if="showStyles"
         class="c-inspector__tabs c-tabs"
     >
-        <div v-for="tabbedView in tabbedViews"
+        <div
+            v-for="tabbedView in tabbedViews"
             :key="tabbedView.key"
             class="c-inspector__tab c-tab"
             :class="{'is-current': isCurrent(tabbedView)}"
@@ -37,7 +39,8 @@
 
     </div>
     <div class="c-inspector__content">
-        <multipane v-show="currentTabbedView.key === '__properties'"
+        <multipane
+            v-show="currentTabbedView.key === '__properties'"
             type="vertical"
         >
             <pane class="c-inspector__properties">

src/ui/inspector/ObjectName.vue

@@ -22,27 +22,33 @@
 
 <template>
 <div class="c-inspector__header">
-    <div v-if="!multiSelect"
+    <div
+        v-if="!multiSelect"
         class="c-inspector__selected c-object-label"
         :class="[statusClass]"
     >
-        <div class="c-object-label__type-icon"
+        <div
+            class="c-object-label__type-icon"
             :class="typeCssClass"
         >
-            <span class="is-status__indicator"
+            <span
+                class="is-status__indicator"
                 :title="`This item is ${status}`"
             ></span>
         </div>
-        <span v-if="!singleSelectNonObject"
+        <span
+            v-if="!singleSelectNonObject"
             class="c-inspector__selected c-object-label__name"
         >{{ item.name }}</span>
-        <div v-if="singleSelectNonObject"
+        <div
+            v-if="singleSelectNonObject"
             class="c-inspector__selected c-inspector__selected--non-domain-object  c-object-label"
         >
             <span class="c-object-label__name">Layout Object</span>
         </div>
     </div>
-    <div v-if="multiSelect"
+    <div
+        v-if="multiSelect"
         class="c-inspector__multiple-selected"
     >
         {{ itemsSelected }} items selected

src/ui/inspector/styles/FontStyleEditor.vue

@@ -1,6 +1,7 @@
 <template>
 <div class="c-toolbar">
-    <div ref="fontSizeMenu"
+    <div
+        ref="fontSizeMenu"
         class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"
     >
         <button
@@ -10,7 +11,8 @@
             <span class="c-button__label">{{ fontSizeLabel }}</span>
         </button>
     </div>
-    <div ref="fontMenu"
+    <div
+        ref="fontMenu"
         class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"
     >
         <button

src/ui/inspector/styles/SavedStyleSelector.vue

@@ -23,7 +23,8 @@
 <template>
 <div>
     <div class="c-style c-style--saved has-local-controls c-toolbar">
-        <div class="c-style__controls"
+        <div
+            class="c-style__controls"
             :title="description"
             @click="selectStyle()"
         >

src/ui/layout/BrowseBar.vue

@@ -11,10 +11,12 @@
             class="l-browse-bar__object-name--w c-object-label"
             :class="[statusClass]"
         >
-            <div class="c-object-label__type-icon"
+            <div
+                class="c-object-label__type-icon"
                 :class="type.cssClass"
             >
-                <span class="is-status__indicator"
+                <span
+                    class="is-status__indicator"
                     :title="`This item is ${status}`"
                 ></span>
             </div>
@@ -38,7 +40,8 @@
             :views="views"
         />
         <!-- Action buttons -->
-        <NotebookMenuSwitcher v-if="notebookEnabled"
+        <NotebookMenuSwitcher
+            v-if="notebookEnabled"
             :domain-object="domainObject"
             :object-path="openmct.router.path"
             class="c-notebook-snapshot-menubutton"

src/ui/layout/CreateButton.vue

@@ -1,5 +1,6 @@
 <template>
-<div ref="createButton"
+<div
+    ref="createButton"
     class="c-create-button--w"
 >
     <button

src/ui/layout/pane.vue

@@ -17,7 +17,8 @@
         @mousedown="start"
     ></div>
     <div class="l-pane__header">
-        <span v-if="label"
+        <span
+            v-if="label"
             class="l-pane__label"
         >{{ label }}</span>
         <slot name="controls"></slot>

src/ui/layout/status-bar/NotificationBanner.vue

@@ -29,7 +29,8 @@
     @click="maximize()"
 >
     <span class="c-message-banner__message">{{ activeModel.message }}</span>
-    <span v-if="haslink"
+    <span
+        v-if="haslink"
         class="c-message-banner__message"
         :class="[haslink ? getLinkProps.cssClass : '']"
     >{{ getLinkProps.text }}</span>

src/ui/preview/preview-header.vue

@@ -4,7 +4,8 @@
         <div
             class="l-browse-bar__object-name--w c-object-label"
         >
-            <div v-if="type"
+            <div
+                v-if="type"
                 class="c-object-label__type-icon"
                 :class="type.definition.cssClass"
             ></div>
@@ -19,7 +20,8 @@
             :views="views"
             :current-view="currentView"
         />
-        <NotebookMenuSwitcher :domain-object="domainObject"
+        <NotebookMenuSwitcher
+            :domain-object="domainObject"
             :object-path="objectPath"
             :is-preview="true"
             :current-view="currentView"