eslint-plugin-vuetify 2.1.0 → 2.2.0

package/README.md

@@ -1,5 +1,7 @@
 # eslint-plugin-vuetify
 
+This package is for migrating from Vuetify v2 to v3, use [eslint-plugin-vuetify@vuetify-2](https://www.npmjs.com/package/eslint-plugin-vuetify/v/vuetify-2) for v1 to v2.
+
 <br>
 
 <p align="center">Support the maintainer of this plugin:</p>
@@ -45,6 +47,7 @@ These rules will help you avoid deprecated components, props, and classes. They
 - Prevent the use of events that have been removed from Vuetify ([`no-deprecated-events`])
 - Prevent the use of classes that have been removed from Vuetify ([`no-deprecated-classes`])
 - Prevent the use of the old theme class syntax ([`no-deprecated-colors`])
+- Prevent the use of deprecated import paths ([`no-deprecated-imports`])
 
 ### Grid system
 
@@ -59,6 +62,7 @@ These rules are designed to help migrate to the new grid system in Vuetify v2. T
 [`no-deprecated-events`]: ./docs/rules/no-deprecated-events.md
 [`no-deprecated-classes`]: ./docs/rules/no-deprecated-classes.md
 [`no-deprecated-colors`]: ./docs/rules/no-deprecated-colors.md
+[`no-deprecated-imports`]: ./docs/rules/no-deprecated-imports.md
 
 
 ## 💪 Supporting Vuetify

package/lib/configs/base.js

@@ -11,6 +11,7 @@ module.exports = {
     'vuetify/no-deprecated-components': 'error',
     'vuetify/no-deprecated-events': 'error',
     'vuetify/no-deprecated-props': 'error',
-    'vuetify/no-deprecated-slots': 'error'
+    'vuetify/no-deprecated-slots': 'error',
+    'vuetify/no-deprecated-imports': 'error'
   }
 };

package/lib/rules/no-deprecated-components.js

@@ -20,26 +20,26 @@ const replacements = {
   VListItemSubTitle: 'v-list-item-subtitle',
   VListTileSubtitle: 'v-list-item-subtitle',
   VContent: 'v-main',
-  VCalendar: false,
   VData: false,
   VListItemGroup: false,
-  VListItemAvatar: false,
+  VListItemAvatar: {
+    custom: '`v-list-item` with `avatar` props, or `v-avatar` in the list item append or prepend slot'
+  },
   VListItemContent: false,
-  VListItemIcon: false,
+  VListItemIcon: {
+    custom: '`v-list-item` with `icon` props, or `v-icon` in the list item append or prepend slot'
+  },
   VOverflowBtn: false,
   VPicker: false,
   VSimpleCheckbox: 'v-checkbox-btn',
-  VSparkline: false,
-  VSpeedDial: false,
   VSubheader: {
-    custom: 'v-list-subheader or class="text-subheader-2"'
+    custom: 'v-list-subheader or class="text-subtitle-2"'
   },
   VSimpleTable: 'v-table',
   VTabsSlider: false,
   VTabsItems: false,
   VTabItem: false,
-  VTimePicker: false,
-  VTreeview: false
+  VTimePicker: false
 };
 
 // ------------------------------------------------------------------------------

package/lib/rules/no-deprecated-events.js

@@ -115,17 +115,13 @@ const replacements = {
   VRangeSlider: {
     ...model,
     change: false,
-    'update:error': false,
-    start: false,
-    end: false
+    'update:error': false
   },
   VRating: model,
   VSlider: {
     ...model,
     change: false,
-    'update:error': false,
-    start: false,
-    end: false
+    'update:error': false
   },
   VSlideGroup: {
     change: 'update:modelValue',

package/lib/rules/no-deprecated-imports.js

@@ -0,0 +1,29 @@
+"use strict";
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow import from "vuetify/lib/util/colors", suggest "vuetify/util/colors" instead',
+      category: 'Best Practices',
+      recommended: false
+    },
+    fixable: 'code',
+    schema: []
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === 'vuetify/lib/util/colors') {
+          context.report({
+            node,
+            message: 'Import from "vuetify/lib/util/colors" is deprecated. Use "vuetify/util/colors" instead.',
+            fix(fixer) {
+              return fixer.replaceText(node.source, node.source.raw.replace('vuetify/lib/util/colors', 'vuetify/util/colors'));
+            }
+          });
+        }
+      }
+    };
+  }
+};

package/lib/rules/no-deprecated-props.js

@@ -54,7 +54,6 @@ const inputs = {
   },
   fullWidth: false,
   height: false,
-  hideSpinButtons: false,
   loaderHeight: false,
   outline: {
     name: 'variant',
@@ -99,10 +98,8 @@ const select = {
   itemText: 'item-title',
   searchInput: 'search',
   smallChips: false,
-  valueComparator: false,
   filter: 'customFilter',
-  ...inputs,
-  dense: false
+  ...inputs
 };
 const link = {
   append: false,
@@ -127,21 +124,33 @@ const replacements = {
     app: false,
     clippedLeft: false,
     clippedRight: false,
-    collapseOnScroll: false,
-    elevateOnScroll: false,
-    fadeImgOnScroll: false,
+    collapseOnScroll: {
+      name: 'scroll-behavior',
+      value: 'collapse'
+    },
+    elevateOnScroll: {
+      name: 'scroll-behavior',
+      value: 'elevate'
+    },
+    fadeImgOnScroll: {
+      name: 'scroll-behavior',
+      value: 'fade-image'
+    },
     fixed: false,
-    hideOnScroll: false,
-    invertedScroll: false,
+    hideOnScroll: {
+      name: 'scroll-behavior',
+      value: 'hide'
+    },
+    invertedScroll: {
+      name: 'scroll-behavior',
+      value: 'inverted'
+    },
     outlined: 'border',
     prominent: false,
     scrollOffScreen: false,
-    scrollTarget: false,
-    scrollThreshold: false,
     shaped: false,
     short: false,
     shrinkOnScroll: false,
-    tile: false,
     width: false,
     ...theme,
     ...size
@@ -173,10 +182,6 @@ const replacements = {
       value: 'outlined'
     },
     shaped: false,
-    tile: {
-      name: 'rounded',
-      value: 0
-    },
     transition: false,
     ...theme
   },
@@ -217,7 +222,7 @@ const replacements = {
     app: false,
     iconColor: false,
     mobileBreakPoint: false,
-    outlined: false,
+    outlined: 'border',
     shaped: false,
     value: false
   },
@@ -286,7 +291,6 @@ const replacements = {
       name: 'variant',
       value: 'text'
     },
-    tile: false,
     top: {
       name: 'location',
       value: 'top'
@@ -304,10 +308,6 @@ const replacements = {
       value: 'compact'
     },
     shaped: false,
-    tile: {
-      name: 'rounded',
-      value: 0
-    },
     value: 'model-value',
     valueComparator: false,
     ...theme
@@ -324,10 +324,6 @@ const replacements = {
       value: 8
     },
     shaped: false,
-    tile: {
-      name: 'rounded',
-      value: 0
-    },
     ...link
   },
   VCarousel: {
@@ -457,10 +453,8 @@ const replacements = {
       value: 'popout'
     },
     activeClass: 'selected-class',
-    flat: false,
     focusable: false,
     hover: false,
-    tile: false,
     value: 'model-value',
     valueComparator: false
   },
@@ -528,7 +522,9 @@ const replacements = {
       value: 'right'
     },
     rounded: false,
-    tile: false,
+    tile: {
+      custom: 'apply border-radius changes to the root element of the `v-menu`\'s content'
+    },
     top: {
       name: 'location',
       value: 'top'
@@ -538,10 +534,9 @@ const replacements = {
   },
   VFooter: {
     fixed: false,
-    outlined: false,
+    outlined: 'border',
     padless: false,
     shaped: false,
-    tile: false,
     width: false,
     ...size
   },
@@ -559,14 +554,13 @@ const replacements = {
     disabled: false,
     left: 'start',
     right: 'end',
-    ...sizes
+    ...sizes,
+    ...theme
   },
   VImg: {
     contain: {
       custom: 'cover'
     },
-    contentClass: false,
-    position: false,
     ...theme
   },
   VItemGroup: {
@@ -587,7 +581,7 @@ const replacements = {
     },
     expand: false,
     flat: false,
-    outlined: false,
+    outlined: 'border',
     subheader: false,
     threeLine: {
       name: 'lines',
@@ -596,8 +590,7 @@ const replacements = {
     twoLine: {
       name: 'lines',
       value: 'two'
-    },
-    tile: false
+    }
   },
   VListGroup: {
     activeClass: false,
@@ -660,7 +653,6 @@ const replacements = {
   },
   VOverlay: {
     color: 'scrim',
-    opacity: false,
     value: 'model-value'
   },
   VPagination: {
@@ -742,9 +734,8 @@ const replacements = {
     ...sizes
   },
   VSheet: {
-    outlined: false,
-    shaped: false,
-    tile: false
+    outlined: 'border',
+    shaped: false
   },
   VSlideGroup: {
     activeClass: 'selected-class',
@@ -795,7 +786,6 @@ const replacements = {
     },
     shaped: false,
     text: false,
-    tile: false,
     top: {
       name: 'location',
       value: 'top'
@@ -864,12 +854,11 @@ const replacements = {
   },
   VToolbar: {
     bottom: false,
-    outlined: false,
+    outlined: 'border',
     prominent: false,
     shaped: false,
     short: false,
     src: 'image',
-    tile: false,
     width: false,
     ...size
   },

package/lib/rules/no-deprecated-slots.js

@@ -104,18 +104,18 @@ const groups = [{
                     filter: token => token.value === ','
                   });
                   if (comma) {
-                    yield fixer.removeRange([comma.start, ref.prop.end]);
+                    yield fixer.removeRange([comma.range[0], ref.prop.range[1]]);
                   } else {
-                    yield fixer.removeRange([ref.prop.start - 1, ref.prop.end]);
+                    yield fixer.removeRange([ref.prop.range[0] - 1, ref.prop.range[1]]);
                   }
                 } else {
                   const comma = template.getTokenAfter(ref.prop, {
                     filter: token => token.value === ','
                   });
                   if (comma) {
-                    yield fixer.removeRange([ref.prop.start - 1, comma.end]);
+                    yield fixer.removeRange([ref.prop.range[0] - 1, comma.range[1]]);
                   } else {
-                    yield fixer.removeRange([ref.prop.start - 1, ref.prop.end]);
+                    yield fixer.removeRange([ref.prop.range[0] - 1, ref.prop.range[1]]);
                   }
                 }
                 yield fixer.removeRange([ref.id.parent.parent.range[0] - 1, ref.id.parent.parent.range[1]]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vuetify",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "An eslint plugin for Vuetify",
   "main": "lib/index.js",
   "author": "Kael Watts-Deuchar <kaelwd@gmail.com>",