feat(docs): Update deps & linting; fix some erroneous props in examples

Author: rstoenescu

docs/.eslintrc.js

@@ -3,7 +3,6 @@ module.exports = {
 
   parserOptions: {
     parser: 'babel-eslint',
-    sourceType: 'module'
   },
 
   env: {
@@ -39,6 +38,9 @@ module.exports = {
     'one-var': 'off',
     'prefer-promise-reject-errors': 'off',
 
+    'no-void': 'off',
+    'quotes': 'off',
+    'array-bracket-spacing': ['error', 'always'],
     'brace-style': ['error', 'stroustrup'],
 
     'import/first': 'off',

docs/package.json

@@ -23,19 +23,23 @@
   },
   "devDependencies": {
     "@quasar/app": "^1.0.0",
-    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/eslint-config-standard": "^5.0.1",
     "babel-eslint": "^10.0.1",
-    "eslint": "^5.10.0",
-    "eslint-loader": "^2.1.1",
+    "eslint": "^6.8.0",
+    "eslint-loader": "^3.0.3",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-quasar": "^1.0.0-alpha.16",
-    "eslint-plugin-vue": "^5.0.0",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.1.1",
     "gray-matter": "^4.0.2",
-    "markdown-it": "^8.4.2",
+    "markdown-it": "^10.0.0",
     "markdown-it-container": "^2.0.0",
     "pug": "^2.0.3",
     "pug-plain-loader": "^1.0.0",
-    "raw-loader": "^1.0.0",
-    "toml": "^2.3.5"
+    "raw-loader": "^4.0.0",
+    "toml": "^3.0.0"
   },
   "engines": {
     "node": ">= 8.9.0",
@@ -44,5 +48,8 @@
   },
   "browserslist": [
     "last 1 version, not dead, ie >= 11"
-  ]
+  ],
+  "resolutions": {
+    "@babel/parser": "7.7.5"
+  }
 }

docs/src/components/ApiRows.js

@@ -154,7 +154,7 @@ export default {
 
       if (prop.definition !== void 0) {
         const nodes = []
-        for (let propName in prop.definition) {
+        for (const propName in prop.definition) {
           nodes.push(
             this.getProp(h, prop.definition[propName], propName, 2)
           )
@@ -178,7 +178,7 @@ export default {
           nodes = [],
           newLevel = (level + 1) % NAME_PROP_COLOR.length
 
-        for (let propName in prop.params) {
+        for (const propName in prop.params) {
           nodes.push(
             this.getProp(h, prop.params[propName], propName, newLevel)
           )
@@ -213,7 +213,7 @@ export default {
 
       if (prop.scope !== void 0) {
         const nodes = []
-        for (let propName in prop.scope) {
+        for (const propName in prop.scope) {
           nodes.push(
             this.getProp(h, prop.scope[propName], propName, 1)
           )
@@ -256,7 +256,7 @@ export default {
     props (h, props) {
       const child = []
 
-      for (let propName in props) {
+      for (const propName in props) {
         child.push(
           this.getProp(h, props[propName], propName, 0)
         )
@@ -268,7 +268,7 @@ export default {
     slots (h, slots) {
       const child = []
 
-      for (let slot in slots) {
+      for (const slot in slots) {
         child.push(
           h('div', { staticClass: 'api-row row' }, [
             this.getDiv(h, 12, 'Name', h('q-badge', {
@@ -291,7 +291,7 @@ export default {
     scopedSlots (h, scopedSlots) {
       const child = []
 
-      for (let slot in scopedSlots) {
+      for (const slot in scopedSlots) {
         child.push(
           this.getProp(h, scopedSlots[slot], slot, 0)
         )
@@ -315,12 +315,12 @@ export default {
         return child
       }
 
-      for (let eventName in events) {
+      for (const eventName in events) {
         const event = events[eventName]
         const params = []
 
         if (event.params !== void 0) {
-          for (let paramName in event.params) {
+          for (const paramName in event.params) {
             params.push(
               this.getProp(h, event.params[paramName], paramName, 1)
             )
@@ -363,7 +363,7 @@ export default {
     methods (h, methods) {
       const child = []
 
-      for (let methodName in methods) {
+      for (const methodName in methods) {
         const method = methods[methodName]
 
         const nodes = [
@@ -381,7 +381,7 @@ export default {
 
         if (method.params !== void 0) {
           const props = []
-          for (let paramName in method.params) {
+          for (const paramName in method.params) {
             props.push(
               this.getProp(h, method.params[paramName], paramName, 1)
             )
@@ -439,7 +439,7 @@ export default {
     modifiers (h, modifiers) {
       const child = []
 
-      for (let modifierName in modifiers) {
+      for (const modifierName in modifiers) {
         const modifier = modifiers[modifierName]
 
         child.push(
@@ -472,7 +472,7 @@ export default {
     quasarConfOptions (h, conf) {
       const child = []
 
-      for (let def in conf.definition) {
+      for (const def in conf.definition) {
         child.push(
           this.getProp(h, conf.definition[def], def, 0)
         )

docs/src/components/DocApi.vue

@@ -83,11 +83,12 @@ const { pad } = format
 const groupBy = (list, groupKey, defaultGroupKeyValue) => {
   const res = {}
 
-  for (let key in list) {
-    if (list.hasOwnProperty(key)) {
-      let value = list[key]
-      let groupKeyValue = (value[groupKey] || defaultGroupKeyValue).split('|')
-      for (let groupKeyV of groupKeyValue) {
+  for (const key in list) {
+    if (list[key] !== void 0) {
+      const value = list[key]
+      const groupKeyValue = (value[groupKey] || defaultGroupKeyValue).split('|')
+
+      for (const groupKeyV of groupKeyValue) {
         if (res[groupKeyV] === void 0) {
           res[groupKeyV] = {}
         }
@@ -164,16 +165,16 @@ export default {
         if (this.aggregationModel[tab]) {
           api[tab] = {}
 
-          for (let group in this.api[tab]) {
-            if (this.api[tab].hasOwnProperty(group)) {
+          for (const group in this.api[tab]) {
+            if (this.api[tab][group] !== void 0) {
               api[tab][group] = filterApi(this.api[tab][group])
             }
           }
 
           if (this.currentTab === tab) {
             let apiWithResultsCount = 0,
               lastFoundApiWithResults = null
-            for (let group in this.api[tab]) {
+            for (const group in this.api[tab]) {
               if (Object.keys(api[tab][group]).length > 0) {
                 apiWithResultsCount++
                 lastFoundApiWithResults = group
@@ -202,7 +203,7 @@ export default {
       this.aggregationModel = {}
 
       if (type === 'component' && api.props !== void 0) {
-        for (let apiGroup of ['props']) {
+        for (const apiGroup of [ 'props' ]) {
           api[apiGroup] = groupBy(api[apiGroup], 'category', 'general')
           this.currentInnerTab[apiGroup] = this.apiTabs(apiGroup, api)[0]
           this.aggregationModel[apiGroup] = true
@@ -258,7 +259,7 @@ export default {
         return total
       }
 
-      if (['value', 'arg', 'quasarConfOptions', 'injection'].includes(tab)) {
+      if ([ 'value', 'arg', 'quasarConfOptions', 'injection' ].includes(tab)) {
         return 1
       }
 
@@ -278,8 +279,8 @@ export default {
     currentTabMaxCategoryPropCount () {
       if (this.aggregationModel[this.currentTab]) {
         let max = -1
-        for (let category in this.filteredApi[this.currentTab]) {
-          let count = this.apiInnerCount(this.currentTab, category)
+        for (const category in this.filteredApi[this.currentTab]) {
+          const count = this.apiInnerCount(this.currentTab, category)
           if (count > max) {
             max = count
           }

docs/src/components/DocExample.vue

@@ -138,7 +138,7 @@ export default {
         script,
         style
       }
-      this.tabs = ['template', 'script', 'style'].filter(type => this.parts[type])
+      this.tabs = [ 'template', 'script', 'style' ].filter(type => this.parts[type])
     },
 
     parseTemplate (target, template) {

docs/src/components/DocInstallation.vue

@@ -32,9 +32,9 @@ export default {
   },
 
   props: {
-    components: [Array, String],
-    directives: [Array, String],
-    plugins: [Array, String],
+    components: [ Array, String ],
+    directives: [ Array, String ],
+    plugins: [ Array, String ],
     config: Object // TODO
   },
 
@@ -65,7 +65,7 @@ export default {
     QuasarCli () {
       const parts = []
 
-      ;['components', 'directives'].forEach(type => {
+      ;[ 'components', 'directives' ].forEach(type => {
         if (this[type] !== void 0) {
           parts.push(`// NOT needed if using auto-import feature:
     ${type}: [
@@ -117,7 +117,7 @@ window.quasarConfig = {
     VueCli () {
       const types = [], imports = []
 
-      ;['components', 'directives', 'plugins'].forEach(type => {
+      ;[ 'components', 'directives', 'plugins' ].forEach(type => {
         if (this[type] !== void 0) {
           imports.push(this.nameAsString(this[type], 2, false))
           types.push(`${type}: {

docs/src/components/page-parts/color-palette/ColorList.vue

@@ -24,7 +24,7 @@
 export default {
   data () {
     return {
-      colors: ['red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey']
+      colors: [ 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey' ]
     }
   }
 }

docs/src/components/page-parts/layout/grid/FlexPlayground.vue

@@ -163,7 +163,7 @@ export default {
 
   mounted () {
     const query = this.$route.query
-    for (let param in queryParams) {
+    for (const param in queryParams) {
       if (param in query) {
         const paramType = queryParams[param]
         switch (paramType) {
@@ -213,7 +213,7 @@ export default {
     },
     onChange (index) {
       this.selectedIndex = index
-      let child = this.$refs['child' + index][0]
+      const child = this.$refs['child' + index][0]
       this.childClasses = child.classes
       this.childStyles = child.styles
     },
@@ -223,9 +223,9 @@ export default {
         playgroudUrl = playgroudUrl.substring(0, playgroudUrl.indexOf('?'))
       }
       let queryString = '',
-        index = 0,
-        paramsCount = Object.keys(queryParams).length
-      for (let param in queryParams) {
+        index = 0
+      const paramsCount = Object.keys(queryParams).length
+      for (const param in queryParams) {
         const paramType = queryParams[param]
         let value
         switch (paramType) {

docs/src/components/page-parts/releases/QuasarReleases.vue

@@ -66,7 +66,9 @@ export default {
           }
 
           const vIndex = release.name.indexOf('-v'),
-            packageName = ['v1.0.0', 'v1.0.0-beta.5'].includes(release.name) ? 'quasar' : release.name.substring(0, vIndex),
+            packageName = [ 'v1.0.0', 'v1.0.0-beta.5' ].includes(release.name)
+              ? 'quasar'
+              : release.name.substring(0, vIndex),
             version = release.name.substring(vIndex + 2)
 
           if (version.startsWith('0')) {