Feature/eslint plugin vue (#2548)

* Use eslint-plugin-vue to lint vue files

src/api/contextMenu/ContextMenu.vue

@@ -1,20 +1,24 @@
 <template>
-    <div class="c-menu">
-        <ul>
-            <li v-for="action in actions"
-                :key="action.name"
-                :class="action.cssClass"
-                :title="action.description"
-                @click="action.invoke(objectPath)">
-                {{ action.name }}
-            </li>
-            <li v-if="actions.length === 0">No actions defined.</li>
-        </ul>
-    </div>
+<div class="c-menu">
+    <ul>
+        <li
+            v-for="action in actions"
+            :key="action.name"
+            :class="action.cssClass"
+            :title="action.description"
+            @click="action.invoke(objectPath)"
+        >
+            {{ action.name }}
+        </li>
+        <li v-if="actions.length === 0">
+            No actions defined.
+        </li>
+    </ul>
+</div>
 </template>
 
 <script>
-    export default {
-        inject: ['actions', 'objectPath']
-    }
-</script>
+export default {
+    inject: ['actions', 'objectPath']
+}
+</script>

src/api/overlays/components/DialogComponent.vue

@@ -1,28 +1,36 @@
 <template>
-    <div class="c-message">
-        <!--Uses flex-row -->
-        <div class="c-message__icon"
-             :class="['u-icon-bg-color-' + iconClass]"></div>
-        <div class="c-message__text">
-            <!-- Uses flex-column -->
-            <div class="c-message__title"
-                 v-if="title">
-                {{title}}
-            </div>
-
-            <div class="c-message__hint"
-                 v-if="hint">
-                {{hint}}
-                <span v-if="timestamp">[{{timestamp}}]</span>
-            </div>
-
-            <div class="c-message__action-text"
-                 v-if="message">
-                {{message}}
-            </div>
-            <slot></slot>
+<div class="c-message">
+    <!--Uses flex-row -->
+    <div
+        class="c-message__icon"
+        :class="['u-icon-bg-color-' + iconClass]"
+    ></div>
+    <div class="c-message__text">
+        <!-- Uses flex-column -->
+        <div
+            v-if="title"
+            class="c-message__title"
+        >
+            {{ title }}
         </div>
+
+        <div
+            v-if="hint"
+            class="c-message__hint"
+        >
+            {{ hint }}
+            <span v-if="timestamp">[{{ timestamp }}]</span>
+        </div>
+
+        <div
+            v-if="message"
+            class="c-message__action-text"
+        >
+            {{ message }}
+        </div>
+        <slot></slot>
     </div>
+</div>
 </template>
 
 <style lang="scss">

src/api/overlays/components/OverlayComponent.vue

@@ -1,28 +1,57 @@
 <template>
-    <div class="c-overlay">
-        <div class="c-overlay__blocker"
-            @click="destroy">
-        </div>
-        <div class="c-overlay__outer">
-            <button class="c-click-icon c-overlay__close-button icon-x-in-circle"
-                v-if="dismissable"
-                @click="destroy">
+<div class="c-overlay">
+    <div
+        class="c-overlay__blocker"
+        @click="destroy"
+    ></div>
+    <div class="c-overlay__outer">
+        <button
+            v-if="dismissable"
+            class="c-click-icon c-overlay__close-button icon-x-in-circle"
+            @click="destroy"
+        ></button>
+        <div
+            ref="element"
+            class="c-overlay__contents"
+        ></div>
+        <div
+            v-if="buttons"
+            class="c-overlay__button-bar"
+        >
+            <button
+                v-for="(button, index) in buttons"
+                :key="index"
+                class="c-button"
+                :class="{'c-button--major': button.emphasis}"
+                @click="buttonClickHandler(button.callback)"
+            >
+                {{ button.label }}
             </button>
-            <div class="c-overlay__contents" ref="element" tabindex="0"></div>
-            <div class="c-overlay__button-bar" v-if="buttons">
-                <button class="c-button"
-                        tabindex="0"
-                        ref="buttons"
-                        v-for="(button, index) in buttons"
-                        :key="index"
-                        @focus="focusIndex=index"
-                        :class="{'c-button--major': focusIndex===index}"
-                        @click="buttonClickHandler(button.callback)">
-                    {{button.label}}
+            <div
+                ref="element"
+                class="c-overlay__contents"
+                tabindex="0"
+            ></div>
+            <div
+                v-if="buttons"
+                class="c-overlay__button-bar"
+            >
+                <button
+                    v-for="(button, index) in buttons"
+                    ref="buttons"
+                    :key="index"
+                    class="c-button"
+                    tabindex="0"
+                    :class="{'c-button--major': focusIndex===index}"
+                    @focus="focusIndex=index"
+                    @click="buttonClickHandler(button.callback)"
+                >
+                    {{ button.label }}
                 </button>
             </div>
         </div>
     </div>
+</div>
 </template>
 
 <style lang="scss">
@@ -138,7 +167,7 @@
                 box-shadow: rgba(black, 0.5) 0 2px 25px;
             }
         }
-        
+
         .l-overlay-fullscreen {
             // Used by About > Licenses display
             .c-overlay__outer {
@@ -174,50 +203,50 @@
 </style>
 
 <script>
-    export default {
-        data: function () {
-            return {
-                focusIndex: -1
-            };
-        },
-        inject: ['dismiss', 'element', 'buttons', 'dismissable'],
-        mounted() {
-            const element = this.$refs.element;
-            element.appendChild(this.element);
-            const elementForFocus = this.getElementForFocus() || element;
-            this.$nextTick(() => {
-                elementForFocus.focus();
-            });
-        },
-        methods: {
-            destroy: function () {
-                if (this.dismissable) {
-                    this.dismiss();
-                }
-            },
-            buttonClickHandler: function (method) {
-                method();
-                this.$emit('destroy');
-            },
-            getElementForFocus: function () {
-                const defaultElement = this.$refs.element;;
-                if (!this.$refs.buttons) {
-                    return defaultElement;
-                }
-
-                const focusButton = this.$refs.buttons.filter((button, index) => {
-                    if (this.buttons[index].emphasis) {
-                        this.focusIndex = index;
-                    }
-                    return this.buttons[index].emphasis;
-                });
-
-                if (!focusButton.length) {
-                    return defaultElement;
-                }
-
-                return focusButton[0];
+export default {
+    data: function () {
+        return {
+            focusIndex: -1
+        };
+    },
+    inject: ['dismiss', 'element', 'buttons', 'dismissable'],
+    mounted() {
+        const element = this.$refs.element;
+        element.appendChild(this.element);
+        const elementForFocus = this.getElementForFocus() || element;
+        this.$nextTick(() => {
+            elementForFocus.focus();
+        });
+    },
+    methods: {
+        destroy: function () {
+            if (this.dismissable) {
+                this.dismiss();
             }
+        },
+        buttonClickHandler: function (method) {
+            method();
+            this.$emit('destroy');
+        },
+        getElementForFocus: function () {
+            const defaultElement = this.$refs.element;
+            if (!this.$refs.buttons) {
+                return defaultElement;
+            }
+
+            const focusButton = this.$refs.buttons.filter((button, index) => {
+                if (this.buttons[index].emphasis) {
+                    this.focusIndex = index;
+                }
+                return this.buttons[index].emphasis;
+            });
+
+            if (!focusButton.length) {
+                return defaultElement;
+            }
+
+            return focusButton[0];
         }
     }
+}
 </script>

src/api/overlays/components/ProgressDialogComponent.vue

@@ -1,7 +1,7 @@
 <template>
-    <dialog-component>
-        <progress-component :model="model"></progress-component>
-    </dialog-component>
+<dialog-component>
+    <progress-component :model="model" />
+</dialog-component>
 </template>
 
 <style lang="scss">
@@ -14,9 +14,14 @@ import DialogComponent from './DialogComponent.vue';
 export default {
     components: {
         DialogComponent: DialogComponent,
-        ProgressComponent: ProgressComponent,
+        ProgressComponent: ProgressComponent
     },
     inject:['iconClass', 'title', 'hint', 'timestamp', 'message'],
-    props:['model']
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    }
 }
 </script>