eslint-plugin-vuetify 2.0.0-beta.2 → 2.0.0-beta.4

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

@@ -1,6 +1,6 @@
 'use strict';
 
-/** @type {Map<RegExp, (args: string[]) => string> | Map<string, string>} */
+/** @type {Map<RegExp, ((args: string[]) => string | false) | false> | Map<string, string | false>} */
 const replacements = new Map([[/^rounded-(r|l|tr|tl|br|bl)(-.*)?$/, ([side, rest]) => {
   side = {
     r: 'e',
@@ -17,7 +17,7 @@ const replacements = new Map([[/^rounded-(r|l|tr|tl|br|bl)(-.*)?$/, ([side, rest
     l: 's'
   }[side];
   return `border-${side}${rest}`;
-}], [/^text-xs-(left|right|center|justify)$/, ([align]) => `text-${align}`], ['scroll-y', 'overflow-y-auto'], ['hide-overflow', 'overflow-hidden'], ['show-overflow', 'overflow-visible'], ['no-wrap', 'text-no-wrap'], ['ellipsis', 'text-truncate'], ['left', 'float-left'], ['right', 'float-right'], ['display-4', 'text-h1'], ['display-3', 'text-h2'], ['display-2', 'text-h3'], ['display-1', 'text-h4'], ['headline', 'text-h5'], ['title', 'text-h6'], ['subtitle-1', 'text-subtitle-1'], ['subtitle-2', 'text-subtitle-2'], ['body-1', 'text-body-1'], ['body-2', 'text-body-2'], ['caption', 'text-caption'], ['caption', 'text-caption'], ['overline', 'text-overline']]);
+}], [/^text-xs-(left|right|center|justify)$/, ([align]) => `text-${align}`], ['scroll-y', 'overflow-y-auto'], ['hide-overflow', 'overflow-hidden'], ['show-overflow', 'overflow-visible'], ['no-wrap', 'text-no-wrap'], ['ellipsis', 'text-truncate'], ['left', 'float-left'], ['right', 'float-right'], ['display-4', 'text-h1'], ['display-3', 'text-h2'], ['display-2', 'text-h3'], ['display-1', 'text-h4'], ['headline', 'text-h5'], ['title', 'text-h6'], ['subtitle-1', 'text-subtitle-1'], ['subtitle-2', 'text-subtitle-2'], ['body-1', 'text-body-1'], ['body-2', 'text-body-2'], ['caption', 'text-caption'], ['caption', 'text-caption'], ['overline', 'text-overline'], [/^transition-(fast-out-slow-in|linear-out-slow-in|fast-out-linear-in|ease-in-out|fast-in-fast-out|swing)$/, false]]);
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -50,8 +50,12 @@ module.exports = {
             if (replacer[0] instanceof RegExp) {
               const matches = (replacer[0].exec(className) || []).slice(1);
               const replace = replacer[1];
-              if (matches.length && typeof replace === 'function') {
-                return changed.push([className, replace(matches)]);
+              if (matches.length) {
+                if (typeof replace === 'function') {
+                  return changed.push([className, replace(matches)]);
+                } else {
+                  return changed.push([className, replace]);
+                }
               }
             }
           }
@@ -63,17 +67,27 @@ module.exports = {
             start: source.getLocFromIndex(range[0]),
             end: source.getLocFromIndex(range[1])
           };
-          context.report({
-            loc,
-            messageId: 'replacedWith',
-            data: {
-              a: change[0],
-              b: change[1]
-            },
-            fix(fixer) {
-              return fixer.replaceTextRange(range, change[1]);
-            }
-          });
+          if (change[1]) {
+            context.report({
+              loc,
+              messageId: 'replacedWith',
+              data: {
+                a: change[0],
+                b: change[1]
+              },
+              fix(fixer) {
+                return fixer.replaceTextRange(range, change[1]);
+              }
+            });
+          } else {
+            context.report({
+              loc,
+              messageId: 'removed',
+              data: {
+                name: change[0]
+              }
+            });
+          }
         });
       }
     });

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

@@ -27,6 +27,9 @@ const replacements = {
   VDataTable: false,
   VDatePicker: false,
   VListItemGroup: false,
+  VListItemAvatar: false,
+  VListItemContent: false,
+  VListItemIcon: false,
   VOtpInput: false,
   VOverflowBtn: false,
   VPicker: false,
@@ -35,6 +38,10 @@ const replacements = {
   VSparkline: false,
   VSpeedDial: false,
   VStepper: false,
+  VSubheader: {
+    custom: 'v-list-subheader or class="text-subheader-2"'
+  },
+  VSimpleTable: 'v-table',
   VTimePicker: false,
   VTreeview: false,
   VVirtualScroll: false

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

@@ -39,6 +39,10 @@ const inputs = {
     name: 'variant',
     value: 'filled'
   },
+  dense: {
+    name: 'density',
+    value: 'compact'
+  },
   errorCount: 'max-errors',
   filled: {
     name: 'variant',
@@ -92,7 +96,8 @@ const select = {
   smallChips: false,
   valueComparator: false,
   filter: 'customFilter',
-  ...inputs
+  ...inputs,
+  dense: false
 };
 const theme = {
   dark: false,
@@ -148,6 +153,10 @@ const replacements = {
         left: 'start'
       })[value] || value
     },
+    dense: {
+      name: 'density',
+      value: 'compact'
+    },
     outline: {
       name: 'variant',
       value: 'outlined'
@@ -274,7 +283,8 @@ const replacements = {
     backgroundColor: false,
     borderless: false,
     dense: {
-      custom: 'density'
+      name: 'density',
+      value: 'compact'
     },
     shaped: false,
     tile: {
@@ -336,6 +346,7 @@ const replacements = {
   },
   VCheckbox: {
     backgroundColor: false,
+    dense: false,
     errorCount: 'max-errors',
     hideSpinButtons: false,
     hint: false,
@@ -382,6 +393,18 @@ const replacements = {
     value: 'model-value'
   },
   VExpansionPanels: {
+    accordion: {
+      name: 'variant',
+      value: 'accordion'
+    },
+    inset: {
+      name: 'variant',
+      value: 'inset'
+    },
+    popout: {
+      name: 'variant',
+      value: 'popout'
+    },
     activeClass: 'selected-class',
     flat: false,
     focusable: false,
@@ -488,10 +511,8 @@ const replacements = {
       custom: 'cover'
     },
     contentClass: false,
-    height: false,
     position: false,
-    ...theme,
-    ...size
+    ...theme
   },
   VItemGroup: {
     activeClass: 'selected-class',
@@ -505,6 +526,10 @@ const replacements = {
     value: 'model-value'
   },
   VList: {
+    dense: {
+      name: 'density',
+      value: 'compact'
+    },
     expand: false,
     flat: false,
     outlined: false,
@@ -530,6 +555,10 @@ const replacements = {
   },
   VListItem: {
     append: false,
+    dense: {
+      name: 'density',
+      value: 'compact'
+    },
     ripple: false,
     selectable: {
       custom: 'value'
@@ -589,7 +618,6 @@ const replacements = {
     value: 'model-value'
   },
   VProgressLinear: {
-    absolute: false,
     backgroundColor: 'bg-color',
     backgroundOpacity: 'bg-opacity',
     bottom: false,
@@ -648,6 +676,10 @@ const replacements = {
   VRating: {
     backgroundColor: false,
     closeDelay: false,
+    dense: {
+      name: 'density',
+      value: 'compact'
+    },
     halfIcon: false,
     iconLabel: 'item-aria-label',
     large: false,
@@ -676,7 +708,25 @@ const replacements = {
     centered: {
       custom: 'location'
     },
-    elevation: false,
+    elevation(attr) {
+      if (attr.directive ? attr.value.type === 'VExpressionContainer' && attr.value.expression.type === 'Literal' : attr.value.type === 'VLiteral') {
+        return {
+          name: 'class',
+          value: value => `elevation-${value}`,
+          bind: false
+        };
+      } else if (attr.directive && attr.value.type === 'VExpressionContainer') {
+        return {
+          name: 'class',
+          value: value => `\`elevation-$\{${value}}\``,
+          bind: true
+        };
+      }
+      return {
+        name: 'class',
+        custom: 'elevation-<value>'
+      };
+    },
     left: {
       name: 'location',
       value: 'left'
@@ -700,6 +750,7 @@ const replacements = {
   },
   VSwitch: {
     ...inputs,
+    inputValue: 'model-value',
     value: undefined
   },
   VSystemBar: {
@@ -714,7 +765,20 @@ const replacements = {
       value: 'title'
     },
     backgroundColor: 'bg-color',
+    centered: {
+      name: 'align-tabs',
+      value: 'center'
+    },
+    iconsAndText: 'stacked',
+    right: {
+      name: 'align-tabs',
+      value: 'end'
+    },
     value: 'model-value',
+    vertical: {
+      name: 'direction',
+      value: 'vertical'
+    },
     ...theme
   },
   VTab: {
@@ -730,6 +794,10 @@ const replacements = {
       name: 'align',
       value: 'top'
     },
+    dense: {
+      name: 'density',
+      value: 'compact'
+    },
     reverse: false
   },
   VTimelineItem: {
@@ -835,6 +903,9 @@ module.exports = {
         const propNameNode = attr.directive ? attr.key.argument : attr.key;
         Object.entries(replacements[tag]).forEach(([test, replace]) => {
           if (hyphenate(test) === propName) {
+            if (typeof replace === 'function') {
+              replace = replace(attr);
+            }
             if (replace === false) {
               context.report({
                 messageId: 'removed',
@@ -856,8 +927,9 @@ module.exports = {
                 }
               });
             } else if (typeof replace === 'object' && 'name' in replace && 'value' in replace) {
-              const value = typeof replace.value === 'function' ? replace.value(attr.directive ? context.getSourceCode().getText(attr.value.expression) : attr.value?.value) : replace.value;
-              if (value == null) return;
+              const oldValue = attr.directive ? context.getSourceCode().getText(attr.value.expression) : attr.value?.value;
+              const value = typeof replace.value === 'function' ? replace.value(oldValue) : replace.value;
+              if (value == null || value === oldValue) return;
               context.report({
                 messageId: 'replacedWith',
                 data: {
@@ -866,7 +938,7 @@ module.exports = {
                 },
                 node: propNameNode,
                 fix(fixer) {
-                  if (attr.directive) {
+                  if (attr.directive && replace.bind !== false) {
                     if (replace.bind) {
                       if (value === 'true' || value === '!(false)') {
                         return fixer.replaceText(attr, replace.name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vuetify",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "An eslint plugin for Vuetify",
   "main": "lib/index.js",
   "author": "Kael Watts-Deuchar <kaelwd@gmail.com>",
@@ -17,6 +17,7 @@
   "files": [
     "lib"
   ],
+  "packageManager": "pnpm@7",
   "homepage": "https://github.com/vuetifyjs/eslint-plugin-vuetify#readme",
   "dependencies": {
     "eslint-plugin-vue": "^9.6.0",
@@ -26,6 +27,9 @@
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.19.6",
     "@babel/preset-env": "^7.19.4",
+    "conventional-changelog-cli": "^2.2.2",
+    "conventional-changelog-vuetify": "^1.1.0",
+    "conventional-github-releaser": "^3.1.5",
     "eslint": "^8.26.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",