[ci skip] Fix some rules

.eslintrc

@@ -25,7 +25,7 @@
     "promise"
   ],
   "settings": {
-    "html/html-extensions": [".html", ".html.raw", ".vue"],
+    "html/html-extensions": [".html", ".html.raw"],
     "import/resolver": {
       "webpack": {
         "config": "./config/webpack.config.js"

app/assets/javascripts/boards/components/board_card.vue

@@ -10,12 +10,30 @@ export default {
     'issue-card-inner': gl.issueBoards.IssueCardInner,
   },
   props: {
-    list: Object,
-    issue: Object,
-    issueLinkBase: String,
-    disabled: Boolean,
-    index: Number,
-    rootPath: String,
+    list: {
+      type: Object,
+      default: () => ({}),
+    },
+    issue: {
+      type: Object,
+      default: () => ({}),
+    },
+    issueLinkBase: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+    rootPath: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -54,8 +72,13 @@ export default {
 </script>
 <template>
-  <li class="card"
-    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+  <li
+    class="card"
+    :class="{
+      'user-can-drag': !disabled && issue.id,
+      'is-disabled': disabled || !issue.id,
+      'is-active': issueDetailVisible
+    }"
     :index="index"
     :data-issue-id="issue.id"
     @mousedown="mouseDown"

app/assets/javascripts/commit/image_file.js

@@ -23,103 +23,6 @@ export default class ImageFile {
         });
       };
     })(this));
-
-    this.views = {
-      'two-up': function() {
-        return $('.two-up.view .wrap', this.file).each((function(_this) {
-          return function(index, wrap) {
-            $('img', wrap).each(function() {
-              var currentWidth;
-              currentWidth = $(this).width();
-              if (currentWidth > availWidth / 2) {
-                return $(this).width(availWidth / 2);
-              }
-            });
-            return _this.requestImageInfo($('img', wrap), function(width, height) {
-              $('.image-info .meta-width', wrap).text(width + "px");
-              $('.image-info .meta-height', wrap).text(height + "px");
-              return $('.image-info', wrap).removeClass('hide');
-            });
-          };
-        })(this));
-      },
-      'swipe': function() {
-        var maxHeight, maxWidth;
-        maxWidth = 0;
-        maxHeight = 0;
-        return $('.swipe.view', this.file).each((function(_this) {
-          return function(index, view) {
-            var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
-            ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
-            $swipeFrame = $('.swipe-frame', view);
-            $swipeWrap = $('.swipe-wrap', view);
-            $swipeBar = $('.swipe-bar', view);
-
-            $swipeFrame.css({
-              width: maxWidth + 16,
-              height: maxHeight + 28
-            });
-            $swipeWrap.css({
-              width: maxWidth + 1,
-              height: maxHeight + 2
-            });
-            // Set swipeBar left position to match image frame
-            $swipeBar.css({
-              left: 1
-            });
-
-            wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
-
-            _this.initDraggable($swipeBar, wrapPadding, function(e, left) {
-              if (left > 0 && left < $swipeFrame.width() - (wrapPadding * 2)) {
-                $swipeWrap.width((maxWidth + 1) - left);
-                $swipeBar.css('left', left);
-              }
-            });
-          };
-        })(this));
-      },
-      'onion-skin': function() {
-        var dragTrackWidth, maxHeight, maxWidth;
-        maxWidth = 0;
-        maxHeight = 0;
-        dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
-        return $('.onion-skin.view', this.file).each((function(_this) {
-          return function(index, view) {
-            var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
-            ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
-            $frame = $('.onion-skin-frame', view);
-            $frameAdded = $('.frame.added', view);
-            $track = $('.drag-track', view);
-            $dragger = $('.dragger', $track);
-
-            $frame.css({
-              width: maxWidth + 16,
-              height: maxHeight + 28
-            });
-            $('.swipe-wrap', view).css({
-              width: maxWidth + 1,
-              height: maxHeight + 2
-            });
-            $dragger.css({
-              left: dragTrackWidth
-            });
-
-            $frameAdded.css('opacity', 1);
-            framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
-
-            _this.initDraggable($dragger, framePadding, function(e, left) {
-              var opacity = left / dragTrackWidth;
-
-              if (opacity >= 0 && opacity <= 1) {
-                $dragger.css('left', left);
-                $frameAdded.css('opacity', opacity);
-              }
-            });
-          };
-        })(this));
-      }
-    };
   }
   initViewModes() {
@@ -192,6 +95,103 @@ export default class ImageFile {
     return [maxWidth, maxHeight];
   }
+  views = {
+    'two-up': function() {
+      return $('.two-up.view .wrap', this.file).each((function(_this) {
+        return function(index, wrap) {
+          $('img', wrap).each(function() {
+            var currentWidth;
+            currentWidth = $(this).width();
+            if (currentWidth > availWidth / 2) {
+              return $(this).width(availWidth / 2);
+            }
+          });
+          return _this.requestImageInfo($('img', wrap), function(width, height) {
+            $('.image-info .meta-width', wrap).text(width + "px");
+            $('.image-info .meta-height', wrap).text(height + "px");
+            return $('.image-info', wrap).removeClass('hide');
+          });
+        };
+      })(this));
+    },
+    'swipe': function() {
+      var maxHeight, maxWidth;
+      maxWidth = 0;
+      maxHeight = 0;
+      return $('.swipe.view', this.file).each((function(_this) {
+        return function(index, view) {
+          var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
+          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          $swipeFrame = $('.swipe-frame', view);
+          $swipeWrap = $('.swipe-wrap', view);
+          $swipeBar = $('.swipe-bar', view);
+
+          $swipeFrame.css({
+            width: maxWidth + 16,
+            height: maxHeight + 28
+          });
+          $swipeWrap.css({
+            width: maxWidth + 1,
+            height: maxHeight + 2
+          });
+          // Set swipeBar left position to match image frame
+          $swipeBar.css({
+            left: 1
+          });
+
+          wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
+
+          _this.initDraggable($swipeBar, wrapPadding, function(e, left) {
+            if (left > 0 && left < $swipeFrame.width() - (wrapPadding * 2)) {
+              $swipeWrap.width((maxWidth + 1) - left);
+              $swipeBar.css('left', left);
+            }
+          });
+        };
+      })(this));
+    },
+    'onion-skin': function() {
+      var dragTrackWidth, maxHeight, maxWidth;
+      maxWidth = 0;
+      maxHeight = 0;
+      dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
+      return $('.onion-skin.view', this.file).each((function(_this) {
+        return function(index, view) {
+          var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
+          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          $frame = $('.onion-skin-frame', view);
+          $frameAdded = $('.frame.added', view);
+          $track = $('.drag-track', view);
+          $dragger = $('.dragger', $track);
+
+          $frame.css({
+            width: maxWidth + 16,
+            height: maxHeight + 28
+          });
+          $('.swipe-wrap', view).css({
+            width: maxWidth + 1,
+            height: maxHeight + 2
+          });
+          $dragger.css({
+            left: dragTrackWidth
+          });
+
+          $frameAdded.css('opacity', 1);
+          framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
+
+          _this.initDraggable($dragger, framePadding, function(e, left) {
+            var opacity = left / dragTrackWidth;
+
+            if (opacity >= 0 && opacity <= 1) {
+              $dragger.css('left', left);
+              $frameAdded.css('opacity', opacity);
+            }
+          });
+        };
+      })(this));
+    }
+  }
+
   requestImageInfo(img, callback) {
     const domImg = img.get(0);
     if (domImg) {

app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue

@@ -8,6 +8,12 @@ import '../../lib/utils/datetime_utility';
  */
 export default {
+  directives: {
+    tooltip,
+  },
+  mixins: [
+    timeagoMixin,
+  ],
   props: {
     time: {
       type: String,
@@ -26,14 +32,6 @@ export default {
       default: '',
     },
   },
-
-  mixins: [
-    timeagoMixin,
-  ],
-
-  directives: {
-    tooltip,
-  },
 };
 </script>
 <template>
@@ -43,6 +41,6 @@ export default {
     :title="tooltipTitle(time)"
     :data-placement="tooltipPlacement"
     data-container="body">
-    {{timeFormated(time)}}
+    {{ timeFormated(time) }}
   </time>
 </template>

app/assets/javascripts/vue_shared/components/toggle_button.vue

@@ -9,6 +9,16 @@
   const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
   export default {
+    components: {
+      icon,
+      loadingIcon,
+    },
+
+    model: {
+      prop: 'value',
+      event: 'change',
+    },
+
     props: {
       name: {
         type: String,
@@ -31,16 +41,6 @@
       },
     },
-    components: {
-      icon,
-      loadingIcon,
-    },
-
-    model: {
-      prop: 'value',
-      event: 'change',
-    },
-
     computed: {
       toggleIcon() {
         return this.value ? ICON_ON : ICON_OFF;

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue

@@ -22,6 +22,9 @@ import tooltip from '../../directives/tooltip';
 export default {
   name: 'UserAvatarImage',
+  directives: {
+    tooltip,
+  },
   props: {
     lazy: {
       type: Boolean,
@@ -59,9 +62,6 @@ export default {
       default: 'top',
     },
   },
-  directives: {
-    tooltip,
-  },
   computed: {
     // API response sends null when gravatar is disabled and
     // we provide an empty string when we use it inside user avatar link.
@@ -87,7 +87,7 @@ export default {
     v-tooltip
     class="avatar"
     :class="{
-      lazy,
+      lazy: lazy,
       [avatarSizeClass]: true,
       [cssClasses]: true
     }"

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue

@@ -26,6 +26,9 @@ export default {
   components: {
     userAvatarImage,
   },
+  directives: {
+    tooltip,
+  },
   props: {
     linkHref: {
       type: String,
@@ -76,9 +79,6 @@ export default {
       return this.shouldShowUsername ? '' : this.tooltipText;
     },
   },
-  directives: {
-    tooltip,
-  },
 };
 </script>
@@ -98,6 +98,6 @@ export default {
       v-tooltip
       :title="tooltipText"
       :tooltip-placement="tooltipPlacement"
-    >{{username}}</span>
+    >{{ username }}</span>
   </a>
 </template>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue

@@ -39,7 +39,7 @@ export default {
     :class="avatarSizeClass"
     :height="size"
     :width="size"
-    v-html="svg">
-  </svg>
+    v-html="svg"
+    />
 </template>