style: upgrade dependencies and fix lint issues due to this upgrade

Author: marcos-hotmart

.eslintrc

@@ -6,18 +6,20 @@
     "sourceType": "module"
   },
   "plugins": [
-    "jest"
+    "jest",
+    "vue"
   ],
   "extends": [
-    "plugin:vue/recommended"
+    "plugin:vue/essential"
   ],
   "env": {
     "jest/globals": true
   },
   "rules": {
     "arrow-parens": 0,
-    "generator-star-spacing": 0,
-    "vue/valid-v-on": 0,
+    "generator-star-spacing": "off",
+    "indent": "off",
+    "indent-legacy": ["error", 2],
     "max-depth": [
       "error",
       4
@@ -37,9 +39,10 @@
     "complexity": [
       "error",
       {
-        "max": 5
+        "max": 6
       }
     ],
+    "vue/valid-v-on": 0,
     "vue/v-bind-style": [
       "error",
       "shorthand"

build/loaders/component-example-loader.js

@@ -4,7 +4,7 @@ const prettier = require('prettier')
 const path = require('path')
 const compiler = require('vue-template-compiler')
 const { resolvePath } = require('../config')
-const { transform } = require('babel-core')
+const { transform } = require('@babel/core')
 const transpile = code => transform(code).code
 const { getIndentedSource } = require('../../docs/app/mixins/codeSource')
 

build/local/index.js

@@ -11,7 +11,7 @@ const app = express()
 const compiler = webpack(webpackConfig)
 const devMiddlewareInstance = devMiddleware(compiler, {
   publicPath: config.public,
-  quiet: true
+  logLevel: 'silent'
 })
 
 const hotMiddlewareInstance = hotMiddleware(compiler, {

docs/app/pages/Components/List/List.vue

@@ -53,7 +53,7 @@
       <p>Lists can have expansion panels to reveal more options:</p>
       <code-example title="Expansion" :component="examples['list-expansion']" />
 
-      <api-item title="API - md-content">
+      <api-item title="API - md-list">
         Coming soon...
       </api-item>
     </div>

package.json

@@ -51,76 +51,76 @@
     "@babel/polyfill": "^7.0.0-beta.38",
     "@babel/preset-env": "^7.0.0-beta.38",
     "@babel/preset-es2015": "^7.0.0-beta.38",
-    "autoprefixer": "^7.1.6",
-    "avoriaz": "^6.0.1",
-    "axios": "^0.17.0",
-    "babel-eslint": "^8.0.1",
+    "autoprefixer": "^7.2.5",
+    "avoriaz": "^6.3.0",
+    "axios": "^0.17.1",
+    "babel-eslint": "^8.2.1",
+    "babel-jest": "^22.1.0",
     "babel-loader": "8.0.0-beta.0",
     "chalk": "^2.3.0",
     "clipboard": "^1.7.1",
     "commitizen": "^2.9.6",
     "concat": "^1.0.3",
-    "connect-history-api-fallback": "^1.4.0",
-    "conventional-changelog": "^1.1.6",
+    "connect-history-api-fallback": "^1.5.0",
+    "conventional-changelog": "^1.1.10",
     "conventional-changelog-vue-material": "^0.0.1",
-    "copy-webpack-plugin": "^4.2.0",
-    "css-loader": "^0.28.7",
-    "css-mqpacker": "^6.0.1",
+    "copy-webpack-plugin": "^4.3.1",
+    "css-loader": "^0.28.9",
+    "css-mqpacker": "^6.0.2",
     "cz-conventional-changelog": "^2.1.0",
     "date-fns": "^1.29.0",
     "deepmerge": "^2.0.1",
-    "eslint": "^4.10.0",
-    "eslint-config-standard": "^10.2.1",
+    "eslint": "^4.16.0",
+    "eslint-config-standard": "^11.0.0-beta.0",
     "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jest": "^21.2.0",
+    "eslint-plugin-jest": "^21.7.0",
     "eslint-plugin-node": "^5.2.1",
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-standard": "^3.0.1",
-    "eslint-plugin-vue": "^3.13.1",
+    "eslint-plugin-vue": "^4.2.2",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.16.2",
     "extract-text-webpack-plugin": "^3.0.2",
     "fast-deep-equal": "^1.0.0",
-    "file-loader": "^1.1.5",
+    "file-loader": "^1.1.6",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "fuzzysearch": "^1.0.3",
     "github-release-cli": "^0.3.0",
     "highlight.js": "^9.12.0",
     "html-webpack-plugin": "^2.30.1",
     "is-firefox": "^1.0.3",
     "is-promise": "^2.1.0",
-    "jest": "^21.2.1",
-    "jest-css-modules": "^1.1.0",
-    "jest-vue": "^0.8.2",
+    "jest": "^22.1.4",
     "node-sass": "^4.7.2",
-    "offline-plugin": "^4.8.4",
+    "offline-plugin": "^4.9.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "optimize-js-plugin": "^0.0.4",
     "ora": "^1.3.0",
     "popper.js": "^1.12.9",
-    "postcss": "^6.0.14",
-    "preload-webpack-plugin": "^2.0.0",
+    "postcss": "^6.0.16",
+    "preload-webpack-plugin": "^2.2.0",
     "prerender-spa-plugin": "^2.1.0",
-    "prettier": "^1.8.2",
+    "prettier": "^1.10.2",
     "pretty": "^2.0.0",
     "raf": "^3.4.0",
     "sass-loader": "^6.0.6",
-    "sinon": "^4.1.1",
+    "sinon": "^4.2.2",
     "url-loader": "^0.6.2",
-    "vue": "^2.5.9",
+    "vue": "^2.5.13",
     "vue-ga": "^1.0.0",
-    "vue-i18n": "^7.3.2",
-    "vue-loader": "^13.4.0",
+    "vue-i18n": "^7.4.1",
+    "vue-jest": "^2.0.0",
+    "vue-loader": "^13.7.0",
     "vue-router": "^3.0.1",
-    "vue-style-loader": "^3.0.3",
-    "vue-template-compiler": "^2.5.3",
+    "vue-style-loader": "^3.1.1",
+    "vue-template-compiler": "^2.5.13",
     "vuelidate": "^0.6.1",
     "vuex": "^3.0.1",
     "vuex-router-sync": "^5.0.0",
-    "webpack": "^3.8.1",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-middleware": "^1.12.0",
-    "webpack-hot-middleware": "^2.20.0",
+    "webpack": "^3.10.0",
+    "webpack-bundle-analyzer": "^2.9.2",
+    "webpack-dev-middleware": "^2.0.4",
+    "webpack-hot-middleware": "^2.21.0",
     "webpack-merge": "^4.1.1"
   },
   "config": {
@@ -146,8 +146,7 @@
     ],
     "transform": {
       "^.+\\.js?$": "babel-jest",
-      "^.+\\.vue?$": "jest-vue",
-      ".*": "jest-css-modules"
+      "^.+\\.vue?$": "vue-jest"
     },
     "mapCoverage": true,
     "setupTestFrameworkScriptFile": "<rootDir>/test/setup.js",

src/components/MdApp/MdApp.vue

@@ -8,6 +8,10 @@
     'md-app-content'
   ]
 
+  function isValidChild (componentOptions) {
+    return componentOptions && componentTypes.includes(componentOptions.tag)
+  }
+
   function buildSlots (children, context, functionalContext, options) {
     let slots = []
 
@@ -16,7 +20,7 @@
         const data = child.data
         const componentOptions = child.componentOptions
 
-        if ((data && componentTypes.includes(data.slot)) || (componentOptions && componentTypes.includes(componentOptions.tag))) {
+        if ((data && componentTypes.includes(data.slot)) || isValidChild(componentOptions)) {
           child.data.slot = data.slot || componentOptions.tag
           child.data.provide = options.Ctor.options.provide
           child.context = context

src/components/MdApp/MdAppMixin.js

@@ -58,6 +58,12 @@ export default {
     }
   },
   computed: {
+    isFixed () {
+      return this.mdMode && this.mdMode !== 'fixed'
+    },
+    isMini () {
+      return this.MdApp.drawer.mode === 'persistent' && this.MdApp.drawer.submode === 'mini'
+    },
     contentStyles () {
       const drawer = this.MdApp.drawer
 
@@ -68,15 +74,14 @@ export default {
       }
     },
     containerStyles () {
-      const drawer = this.MdApp.drawer
       let styles = {}
 
-      if (this.mdMode && this.mdMode !== 'fixed') {
+      if (this.isFixed) {
         styles['margin-top'] = this.MdApp.toolbar.initialHeight + 'px'
       }
 
-      if (drawer.mode === 'persistent' && drawer.submode === 'mini') {
-        styles['padding-left'] = !drawer.active ? drawer.initialWidth + 'px' : 0
+      if (this.isMini) {
+        styles['padding-left'] = !this.MdApp.drawer.active ? this.MdApp.drawer.initialWidth + 'px' : 0
       }
 
       return styles

src/components/MdAutocomplete/MdAutocomplete.vue

@@ -98,14 +98,17 @@
           return 'md-autocomplete-box-content'
         }
       },
+      shouldFilter () {
+        return this.mdOptions[0] && this.searchTerm
+      },
       filteredStaticOptions () {
         if (this.isPromise(this.mdOptions)) {
           return false
         }
 
         const firstItem = this.mdOptions[0]
 
-        if (this.mdOptions[0] && this.searchTerm) {
+        if (this.shouldFilter) {
           if (typeof firstItem === 'string') {
             return this.filterByString()
           } else if (typeof firstItem === 'object') {

src/components/MdDatepicker/MdDatepickerDialog.vue

@@ -27,7 +27,7 @@
           <div class="md-datepicker-body-content" :style="contentStyles">
             <transition name="md-datepicker-view">
               <transition-group class="md-datepicker-panel md-datepicker-calendar" :class="calendarClasses" tag="div" name="md-datepicker-month" v-if="currentView === 'day'">
-                <div class="md-datepicker-panel md-datepicker-month" v-for="(month, index) in [currentDate]" :key="month.getMonth()">
+                <div class="md-datepicker-panel md-datepicker-month" v-for="month in [currentDate]" :key="month.getMonth()">
                   <md-button class="md-dense md-datepicker-month-trigger" @click="currentView = 'month'">{{ currentMonthName }} {{ currentYear }}</md-button>
 
                   <div class="md-datepicker-week">

src/components/MdField/MdSelect/MdSelect.vue

@@ -124,7 +124,7 @@
         immediate: true,
         handler (isMultiple) {
           this.MdSelect.multiple = isMultiple
-          this.$nextTick(() => this.initialLocalValueByDefault())
+          this.$nextTick(this.initialLocalValueByDefault)
         }
       }
     },
@@ -232,6 +232,7 @@
         if (!this.localValue) {
           this.initialLocalValueByDefault()
         }
+
         let content = []
 
         this.localValue.forEach(item => {
@@ -251,15 +252,30 @@
           this.setContentByValue()
         }
       },
+      isLocalValueSet () {
+        return this.localValue !== undefined && this.localValue !== null
+      },
+      setLocalValueIfMultiple () {
+        if (isLocalValueSet()) {
+          this.localValue = [this.localValue]
+        } else {
+          this.localValue = []
+        }
+      },
+      setLocalValueIfNotMultiple () {
+        if (this.localValue.length > 0) {
+          this.localValue = this.localValue[0]
+        } else {
+          this.localValue = null
+        }
+      },
       initialLocalValueByDefault () {
         let isArray = Array.isArray(this.localValue)
+
         if (this.multiple && !isArray) {
-          let isSet = this.localValue !== undefined && this.localValue !== null
-          this.localValue = isSet ? [this.localValue] : []
-          return
-        }
-        if (!this.multiple && isArray) {
-          this.localValue = this.localValue.length > 0 ? this.localValue[0] : null
+          this.localValue = this.setLocalValueIfMultiple()
+        } else if (!this.multiple && isArray) {
+          this.localValue = this.setLocalValueIfNotMultiple()
         }
       },
       emitSelected (value) {

src/components/MdImage/MdImage.vue

@@ -12,7 +12,7 @@
   }
 </style>
 
-<script lang="babel">
+<script>
   import MdComponent from 'core/MdComponent'
 
   export default new MdComponent({