Feature/eslint plugin vue (#2548)

* Use eslint-plugin-vue to lint vue files

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -21,19 +21,21 @@
  *****************************************************************************/
 
 <template>
-    <div class="l-layout__frame c-frame"
-         :class="{
-             'no-frame': !item.hasFrame,
-             'u-inspectable': inspectable
-         }"
-         :style="style">
+<div
+    class="l-layout__frame c-frame"
+    :class="{
+        'no-frame': !item.hasFrame,
+        'u-inspectable': inspectable
+    }"
+    :style="style"
+>
+    <slot></slot>
 
-        <slot></slot>
-
-        <div class="c-frame-edit__move"
-             @mousedown="startMove([1,1], [0,0], $event)">
-        </div>
-    </div>
+    <div
+        class="c-frame-edit__move"
+        @mousedown="startMove([1,1], [0,0], $event)"
+    ></div>
+</div>
 </template>
 
 <style lang="scss">
@@ -173,73 +175,81 @@
 </style>
 
 <script>
-    import LayoutDrag from './../LayoutDrag'
+import LayoutDrag from './../LayoutDrag'
 
-    export default {
-        inject: ['openmct'],
-        props: {
-            item: Object,
-            gridSize: Array
+export default {
+    inject: ['openmct'],
+    props: {
+        item: {
+            type: Object,
+            required: true
         },
-        computed: {
-            style() {
-                let {x, y, width, height} = this.item;
-                return {
-                    left: (this.gridSize[0] * x) + 'px',
-                    top: (this.gridSize[1] * y) + 'px',
-                    width: (this.gridSize[0] * width) + 'px',
-                    height: (this.gridSize[1] * height) + 'px',
-                    minWidth: (this.gridSize[0] * width) + 'px',
-                    minHeight: (this.gridSize[1] * height) + 'px'
-                };
-            },
-            inspectable() {
-                return this.item.type === 'subobject-view' || this.item.type === 'telemetry-view';
+        gridSize: {
+            type: Array,
+            required: true,
+            validator: (arr) => arr && arr.length === 2
+                && arr.every(el => typeof el === 'number')
+        }
+    },
+    computed: {
+        style() {
+            let {x, y, width, height} = this.item;
+            return {
+                left: (this.gridSize[0] * x) + 'px',
+                top: (this.gridSize[1] * y) + 'px',
+                width: (this.gridSize[0] * width) + 'px',
+                height: (this.gridSize[1] * height) + 'px',
+                minWidth: (this.gridSize[0] * width) + 'px',
+                minHeight: (this.gridSize[1] * height) + 'px'
+            };
+        },
+        inspectable() {
+            return this.item.type === 'subobject-view' || this.item.type === 'telemetry-view';
+        }
+    },
+    methods: {
+        updatePosition(event) {
+            let currentPosition = [event.pageX, event.pageY];
+            this.initialPosition = this.initialPosition || currentPosition;
+            this.delta = currentPosition.map(function (value, index) {
+                return value - this.initialPosition[index];
+            }.bind(this));
+        },
+        startMove(posFactor, dimFactor, event) {
+            document.body.addEventListener('mousemove', this.continueMove);
+            document.body.addEventListener('mouseup', this.endMove);
+            this.dragPosition = {
+                position: [this.item.x, this.item.y]
+            };
+            this.updatePosition(event);
+            this.activeDrag = new LayoutDrag(this.dragPosition, posFactor, dimFactor, this.gridSize);
+            event.preventDefault();
+        },
+        continueMove(event) {
+            event.preventDefault();
+            this.updatePosition(event);
+            let newPosition = this.activeDrag.getAdjustedPosition(this.delta);
+
+            if (!_.isEqual(newPosition, this.dragPosition)) {
+                this.dragPosition = newPosition;
+                this.$emit('move', this.toGridDelta(this.delta));
             }
         },
-        methods: {
-            updatePosition(event) {
-                let currentPosition = [event.pageX, event.pageY];
-                this.initialPosition = this.initialPosition || currentPosition;
-                this.delta = currentPosition.map(function (value, index) {
-                    return value - this.initialPosition[index];
-                }.bind(this));
-            },
-            startMove(posFactor, dimFactor, event) {
-                document.body.addEventListener('mousemove', this.continueMove);
-                document.body.addEventListener('mouseup', this.endMove);
-                this.dragPosition = {
-                    position: [this.item.x, this.item.y]
-                };
-                this.updatePosition(event);
-                this.activeDrag = new LayoutDrag(this.dragPosition, posFactor, dimFactor, this.gridSize);
-                event.preventDefault();
-            },
-            continueMove(event) {
-                event.preventDefault();
-                this.updatePosition(event);
-                let newPosition = this.activeDrag.getAdjustedPosition(this.delta);
-
-                if (!_.isEqual(newPosition, this.dragPosition)) {
-                    this.dragPosition = newPosition;
-                    this.$emit('move', this.toGridDelta(this.delta));
-                }
-            },
-            endMove(event) {
-                document.body.removeEventListener('mousemove', this.continueMove);
-                document.body.removeEventListener('mouseup', this.endMove);
-                this.continueMove(event);
-                this.$emit('endMove');
-                this.dragPosition = undefined;
-                this.initialPosition = undefined;
-                this.delta = undefined;
-                event.preventDefault();
-            },
-            toGridDelta(pixelDelta) {
-                return pixelDelta.map((v, i) => {
-                    return Math.round(v / this.gridSize[i]);
-                });
-            }
+        endMove(event) {
+            document.body.removeEventListener('mousemove', this.continueMove);
+            document.body.removeEventListener('mouseup', this.endMove);
+            this.continueMove(event);
+            this.$emit('endMove');
+            this.dragPosition = undefined;
+            this.initialPosition = undefined;
+            this.delta = undefined;
+            event.preventDefault();
+        },
+        toGridDelta(pixelDelta) {
+            return pixelDelta.map((v, i) => {
+                return Math.round(v / this.gridSize[i]);
+            });
         }
     }
+}
 </script>