[WIP] Fix/eslint (#74)

* fix(style): apply eslint

* fix(breadcrumb): provide inection in test code

.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
         },
       },
     ],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
     'vue/html-closing-bracket-spacing': 'error',
   },
 }

package.json

@@ -55,9 +55,7 @@
     }
   },
   "lint-staged": {
-    "*": [
-      ""
-    ]
+    "*.{js,ts,vue}": "eslint --fix"
   },
   "workspaces": [
     "packages/*"

packages/avatar/doc/basic.vue

@@ -3,33 +3,33 @@
     <el-col :span="12">
       <div class="sub-title">circle</div>
       <div class="demo-basic--circle">
-        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
-        <div class="block" v-for="size in sizeList" :key="size">
-          <el-avatar :size="size" :src="circleUrl"></el-avatar>
+        <div class="block"><el-avatar :size="50" :src="circleUrl" /></div>
+        <div v-for="size in sizeList" :key="size" class="block">
+          <el-avatar :size="size" :src="circleUrl" />
         </div>
       </div>
     </el-col>
     <el-col :span="12">
       <div class="sub-title">square</div>
       <div class="demo-basic--circle">
-        <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
-        <div class="block" v-for="size in sizeList" :key="size">
-          <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
+        <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl" /></div>
+        <div v-for="size in sizeList" :key="size" class="block">
+          <el-avatar shape="square" :size="size" :src="squareUrl" />
         </div>
       </div>
     </el-col>
   </el-row>
 </template>
 <script lang="ts">
-  export default {
-    data () {
-      return {
-        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
-        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
-        sizeList: ["large", "medium", "small"]
-      }
+export default {
+  data () {
+    return {
+      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+      squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
+      sizeList: ['large', 'medium', 'small'],
     }
-  }
+  },
+}
 </script>
 
 

packages/avatar/doc/fit-container.vue

@@ -1,20 +1,25 @@
 <template>
   <div class="demo-fit">
-    <div class="block" v-for="fit in fits" :key="fit">
-        <span class="title">{{ fit }}</span>
-        <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
+    <div v-for="fit in fits" :key="fit" class="block">
+      <span class="title">{{ fit }}</span>
+      <el-avatar
+        shape="square"
+        :size="100"
+        :fit="fit"
+        :src="url"
+      />
     </div>
   </div>
 </template>
 <script lang="ts">
-  export default {
-    data() {
-      return {
-        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
-        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-      }
+export default {
+  data() {
+    return {
+      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
     }
-  }
+  },
+}
 </script>
 
 <style>

packages/avatar/src/index.vue

@@ -3,19 +3,19 @@
     <img
       v-if="(src || srcSet) && !hasLoadError"
       :src="src"
-      @error="handleError"
       :alt="alt"
       :srcset="srcSet"
-      :style="{objectFit: fit}"
-    />
-    <i  v-else-if="icon" :class="icon"/>
-    <slot v-else/>
+      :style="fitStyle"
+      @error="handleError"
+    >
+    <i v-else-if="icon" :class="icon"></i>
+    <slot v-else></slot>
   </span>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue'
-import type {EventEmitter} from '@element-plus/utils/types'
+import type { EventEmitter } from '@element-plus/utils/types'
 
 export default defineComponent({
   name: 'ElAvatar',
@@ -27,14 +27,14 @@ export default defineComponent({
           return ['large', 'medium', 'small'].includes(val)
         }
         return typeof val === 'number'
-      }
+      },
     },
     shape: {
       type: String,
       default: 'circle',
       validator(this: never, val: string) {
         return ['circle', 'square'].includes(val)
-      }
+      },
     },
     icon: String,
     src: String,
@@ -43,14 +43,14 @@ export default defineComponent({
     error: Function,
     fit: {
       type: String,
-      default: 'cover'
-    }
+      default: 'cover',
+    },
   },
-  setup(props, {emit}) {
+  setup(props, { emit }) {
     const hasLoadError = ref(false)
 
     const avatarClass = computed(() => {
-      const {size, icon, shape} = props
+      const { size, icon, shape } = props
       let classList = ['el-avatar']
       if (size && typeof size === 'string') {
         classList.push(`el-avatar--${size}`)
@@ -65,21 +65,26 @@ export default defineComponent({
     })
 
     const sizeStyle = computed(() => {
-      const {size} = props
+      const { size } = props
       return typeof size === 'number' ? {
-          height: `${size}px`,
-          width: `${size}px`,
-          lineHeight: `${size}px`
-        } : {}
+        height: `${size}px`,
+        width: `${size}px`,
+        lineHeight: `${size}px`,
+      } : {}
     })
 
+    const fitStyle = computed(() => ({
+      objectFit: props.fit,
+    }))
+
     function handleError(e: Event) {
       hasLoadError.value = true
       emit('error', e)
     }
     return {
-      hasLoadError, avatarClass, sizeStyle, handleError
+      hasLoadError, avatarClass, sizeStyle, handleError,
+      fitStyle,
     }
-  }
+  },
 })
 </script>

packages/badge/src/index.vue

@@ -23,15 +23,15 @@
 import { computed } from 'vue'
 
 interface IBadgeProps {
-  value: string | number;
-  max: number;
-  isDot: boolean;
-  hidden: boolean;
-  type: string;
+  value: string | number
+  max: number
+  isDot: boolean
+  hidden: boolean
+  type: string
 }
 
 interface IBadgeSetups {
-  content: number | string;
+  content: number | string
 }
 export default {
   name: 'ElBadge',

packages/breadcrumb/__tests__/breadcrumb.spec.ts

@@ -8,6 +8,12 @@ const _mount = (template: string) => mount({
     'el-breadcrumb-item': BreadcrumbItem,
   },
   template,
+}, {
+  global: {
+    provide: {
+      breadcrumb: {},
+    },
+  },
 })
 
 describe('Breadcrumb.vue', () => {

packages/button/src/index.vue

@@ -26,36 +26,36 @@
 <script lang='ts'>
 import { computed, inject, defineComponent } from 'vue'
 const ELEMENT: {
-  size?: number;
+  size?: number
 } = {}
 // TODOS: replace these interface definition with actual ElForm interface
 interface ElForm {
-  disabled: boolean;
+  disabled: boolean
 }
 interface ElFormItem {
-  elFormItemSize: number;
+  elFormItemSize: number
 }
 
 interface IButtonProps {
-  type: string;
-  size: string;
-  icon: string;
-  nativeType: string;
-  loading: boolean;
-  disabled: boolean;
-  plain: boolean;
-  autofocus: boolean;
-  round: boolean;
-  circle: boolean;
+  type: string
+  size: string
+  icon: string
+  nativeType: string
+  loading: boolean
+  disabled: boolean
+  plain: boolean
+  autofocus: boolean
+  round: boolean
+  circle: boolean
 }
 
 type EmitFn = (evt: Event) => void
 
 interface IButtonSetups {
-  _elFormItemSize: number;
-  buttonSize: string;
-  buttonDisabled: boolean;
-  handleClick: EmitFn;
+  _elFormItemSize: number
+  buttonSize: string
+  buttonDisabled: boolean
+  handleClick: EmitFn
 }
 export default defineComponent({
   name: 'ElButton',

packages/divider/src/index.vue

@@ -16,8 +16,8 @@
 import { defineComponent } from 'vue'
 
 interface IDividerProps {
-  direction: string;
-  contentPosition: string;
+  direction: string
+  contentPosition: string
 }
 
 export default defineComponent({

packages/progress/src/index.vue

@@ -59,16 +59,16 @@ import { computed, defineComponent } from 'vue'
 type ProgressFuncType = (percentage: number) => string;
 
 interface IProgressProps {
-  type: string;
-  percentage: number;
-  status: string;
-  strokeWidth: number;
-  strokeLinecap: string;
-  textInside: boolean;
-  width: number;
-  showText: boolean;
-  color: string | Array<string | { color: string, percentage: number }> | ProgressFuncType;
-  format: ProgressFuncType;
+  type: string
+  percentage: number
+  status: string
+  strokeWidth: number
+  strokeLinecap: string
+  textInside: boolean
+  width: number
+  showText: boolean
+  color: string | Array<string | { color: string; percentage: number; }> | ProgressFuncType
+  format: ProgressFuncType
 }
 
 export default defineComponent({

packages/tag/src/index.vue

@@ -31,17 +31,17 @@
 <script lang='ts'>
 import { computed, defineComponent } from 'vue'
 const ELEMENT: {
-  size?: number;
+  size?: number
 } = {}
 
 interface ITagProps {
-  closable: boolean,
-    type: string,
-    hit: boolean,
-    disableTransitions: boolean,
-    color: string,
-    size: string,
-    effect: string;
+  closable: boolean
+    type: string
+    hit: boolean
+    disableTransitions: boolean
+    color: string
+    size: string
+    effect: string
 }
 export default defineComponent({
   name: 'ElTag',

packages/time-line/src/item.vue

@@ -49,13 +49,13 @@
 import { inject, defineComponent } from 'vue'
 
 interface ITimeLineItemProps {
-    timestamp: string,
-    hideTimestamp: boolean,
-    placement: string,
-    type: string,
-    color: string,
-    size: string,
-    icon: string,
+    timestamp: string
+    hideTimestamp: boolean
+    placement: string
+    type: string
+    color: string
+    size: string
+    icon: string
 }
 
 export default defineComponent({