eslint-plugin-vuetify 2.3.0 → 2.5.0

package/README.md

@@ -15,7 +15,7 @@ This package is for migrating from Vuetify v2 to v3, use [eslint-plugin-vuetify@
 
 ## 💿 Install
 
-You should have [`eslint`](https://eslint.org/docs/user-guide/getting-started) and [`eslint-plugin-vue`](https://eslint.vuejs.org/user-guide/#installation) set up first.
+You should have [`eslint`](https://eslint.org/docs/latest/use/getting-started) and [`eslint-plugin-vue`](https://eslint.vuejs.org/user-guide/#installation) set up first.
 
 ```bash
 yarn add eslint-plugin-vuetify -D
@@ -23,6 +23,19 @@ yarn add eslint-plugin-vuetify -D
 npm install eslint-plugin-vuetify --save-dev
 ```
 
+```js
+// eslint.config.js
+import vue from 'eslint-plugin-vue'
+import vuetify from 'eslint-plugin-vuetify'
+
+export default [
+  ...vue.configs['flat/base'],
+  ...vuetify.configs['flat/base'],
+]
+```
+
+Eslint 8 can alternatively use the older configuration format:
+
 ```js
 // .eslintrc.js
 module.exports = {
@@ -40,7 +53,7 @@ module.exports = {
 
 ### Deprecations
 
-These rules will help you avoid deprecated components, props, and classes. They are included in the `plugin:vuetify/base` preset.
+These rules will help you avoid deprecated components, props, and classes. They are included in the `base` preset.
 
 - Prevent the use of components that have been removed from Vuetify ([`no-deprecated-components`])
 - Prevent the use of props that have been removed from Vuetify ([`no-deprecated-props`])
@@ -48,10 +61,11 @@ These rules will help you avoid deprecated components, props, and classes. They
 - 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`])
+- Ensure icon buttons have a variant defined ([`icon-button-variant`])
 
 ### Grid system
 
-These rules are designed to help migrate to the new grid system in Vuetify v2. They are included in the `plugin:vuetify/recommended` preset.
+These rules are designed to help migrate to the new grid system in Vuetify v2. They are included in the `recommended` preset.
 
 - Warn about unknown attributes not being converted to classes on new grid components ([`grid-unknown-attributes`])
 
@@ -63,6 +77,7 @@ These rules are designed to help migrate to the new grid system in Vuetify v2. T
 [`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
+[`icon-button-variant`]: ./docs/rules/icon-button-variant.md
 
 
 ## 💪 Supporting Vuetify

package/lib/configs/flat/base.js

@@ -0,0 +1,11 @@
+"use strict";
+
+module.exports = [{
+  plugins: {
+    vue: require('eslint-plugin-vue'),
+    get vuetify() {
+      return require('../../index');
+    }
+  },
+  rules: require('../base').rules
+}];

package/lib/configs/flat/recommended.js

@@ -0,0 +1,10 @@
+"use strict";
+
+module.exports = [...require('./base'), {
+  plugins: {
+    get vuetify() {
+      return require('../../index');
+    }
+  },
+  rules: require('../recommended').rules
+}];

package/lib/index.js

@@ -3,6 +3,11 @@
 const path = require('path');
 const requireindex = require('requireindex');
 module.exports = {
-  configs: requireindex(path.join(__dirname, './configs')),
+  configs: {
+    base: require('./configs/base'),
+    recommended: require('./configs/recommended'),
+    'flat/base': require('./configs/flat/base'),
+    'flat/recommended': require('./configs/flat/recommended')
+  },
   rules: requireindex(path.join(__dirname, './rules'))
 };

package/lib/rules/grid-unknown-attributes.js

@@ -39,7 +39,7 @@ module.exports = {
     schema: []
   },
   create(context) {
-    return context.parserServices.defineTemplateBodyVisitor({
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       VElement(element) {
         const tag = classify(element.rawName);
         if (!Object.keys(tags).includes(tag)) return;

package/lib/rules/icon-button-variant.js

@@ -0,0 +1,49 @@
+'use strict';
+
+const {
+  classify,
+  getAttributes
+} = require('../util/helpers');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Ensure icon buttons have a variant defined.',
+      category: 'recommended'
+    },
+    fixable: 'code',
+    schema: [{
+      type: 'string'
+    }],
+    messages: {
+      needsVariant: 'Icon buttons should have {{ a }} defined.'
+    }
+  },
+  create(context) {
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VElement(element) {
+        const tag = classify(element.rawName);
+        if (tag !== 'VBtn') return;
+        const attributes = getAttributes(element);
+        const iconAttribute = attributes.find(attr => attr.name === 'icon');
+        if (!iconAttribute) return;
+        if (attributes.some(attr => attr.name === 'variant')) return;
+        const variant = `variant="${context.options[0] || 'text'}"`;
+        context.report({
+          node: iconAttribute.node,
+          messageId: 'needsVariant',
+          data: {
+            a: variant
+          },
+          fix(fixer) {
+            return fixer.insertTextAfter(iconAttribute.node, ' ' + variant);
+          }
+        });
+      }
+    });
+  }
+};

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

@@ -11,13 +11,7 @@ const replacements = new Map([[/^rounded-(r|l|tr|tl|br|bl)(-.*)?$/, ([side, rest
     bl: 'bs'
   }[side];
   return `rounded-${side}${rest || ''}`;
-}], [/^border-([rl])(.*)$/, ([side, rest]) => {
-  side = {
-    r: 'e',
-    l: 's'
-  }[side];
-  return `border-${side}${rest}`;
-}], [/^text-xs-(left|right|center|justify)$/, ([align]) => `text-${align}`], [/hidden-(xs|sm|md|lg|xl)-only/, ([breakpoint]) => `hidden-${breakpoint}`], ['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]]);
+}], [/^text-xs-(left|right|center|justify)$/, ([align]) => `text-${align}`], [/^hidden-(xs|sm|md|lg|xl)-only$/, ([breakpoint]) => `hidden-${breakpoint}`], ['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
@@ -36,11 +30,10 @@ module.exports = {
     }
   },
   create(context) {
-    return context.parserServices.defineTemplateBodyVisitor({
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       'VAttribute[key.name="class"]'(node) {
         if (!node.value || !node.value.value) return;
         const classes = node.value.value.split(/\s+/).filter(s => !!s);
-        const source = context.getSourceCode();
         const changed = [];
         classes.forEach(className => {
           for (const replacer of replacements) {
@@ -64,8 +57,8 @@ module.exports = {
           const idx = node.value.value.indexOf(change[0]) + 1;
           const range = [node.value.range[0] + idx, node.value.range[0] + idx + change[0].length];
           const loc = {
-            start: source.getLocFromIndex(range[0]),
-            end: source.getLocFromIndex(range[1])
+            start: context.sourceCode.getLocFromIndex(range[0]),
+            end: context.sourceCode.getLocFromIndex(range[1])
           };
           if (change[1]) {
             context.report({

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

@@ -45,7 +45,7 @@ module.exports = {
       const variant = classes.findIndex(t => textVariants.includes(t));
       return [base, variant];
     }
-    return context.parserServices.defineTemplateBodyVisitor({
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       'VAttribute[key.name="color"]'(node) {
         if (!node.value || !node.value.value) return;
         const color = node.value.value.split(/\s+/).filter(s => !!s);

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

@@ -38,8 +38,7 @@ const replacements = {
   VSimpleTable: 'v-table',
   VTabsSlider: false,
   VTabsItems: false,
-  VTabItem: false,
-  VTimePicker: false
+  VTabItem: false
 };
 
 // ------------------------------------------------------------------------------
@@ -61,10 +60,10 @@ module.exports = {
     }
   },
   create(context) {
-    return context.parserServices.defineTemplateBodyVisitor({
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       VElement(element) {
         const tag = classify(element.rawName);
-        const tokens = context.parserServices.getTemplateBodyTokenStore();
+        const tokens = context.sourceCode.parserServices.getTemplateBodyTokenStore();
         if (Object.prototype.hasOwnProperty.call(replacements, tag)) {
           const replacement = replacements[tag];
           if (typeof replacement === 'object' && 'custom' in replacement) {

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

@@ -156,7 +156,7 @@ module.exports = {
     }
   },
   create(context) {
-    return context.parserServices.defineTemplateBodyVisitor({
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       VAttribute(attr) {
         if (!(attr.directive && attr.key.name.name === 'on' && attr.key.argument?.type === 'VIdentifier')) return;
         const tag = classify(attr.parent.parent.rawName);

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

@@ -89,9 +89,6 @@ const select = {
   cacheItems: false,
   deletableChips: 'closable-chips',
   disableLookup: false,
-  itemColor: {
-    custom: 'item-props.color'
-  },
   itemDisabled: {
     custom: 'item-props.disabled'
   },
@@ -316,10 +313,7 @@ const replacements = {
   VCard: {
     activeClass: false,
     loaderHeight: false,
-    outlined: {
-      name: 'variant',
-      value: 'outlined'
-    },
+    outlined: 'border',
     raised: {
       name: 'elevation',
       value: 8
@@ -545,7 +539,8 @@ const replacements = {
     ...size
   },
   VForm: {
-    value: 'model-value'
+    value: 'model-value',
+    lazyValidation: false
   },
   VHover: {
     value: 'model-value'
@@ -943,7 +938,7 @@ module.exports = {
     }
   },
   create(context) {
-    return context.parserServices.defineTemplateBodyVisitor({
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       VStartTag(tag) {
         const attrGroups = {};
         tag.attributes.forEach(attr => {
@@ -999,7 +994,7 @@ module.exports = {
                 }
               });
             } else if (typeof replace === 'object' && 'name' in replace && 'value' in replace) {
-              const oldValue = attr.directive ? context.getSourceCode().getText(attr.value.expression) : attr.value?.value;
+              const oldValue = attr.directive ? context.sourceCode.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({
@@ -1017,8 +1012,8 @@ module.exports = {
                       }
                       return [fixer.replaceText(propNameNode, replace.name), fixer.replaceText(attr.value, `"${value}"`)];
                     } else {
-                      const expression = context.getSourceCode().getText(attr.value.expression);
-                      return [fixer.replaceText(propNameNode, replace.name), fixer.replaceText(attr.value, `"${expression} && '${value}'"`)];
+                      const expression = context.sourceCode.getText(attr.value.expression);
+                      return [fixer.replaceText(propNameNode, replace.name), fixer.replaceText(attr.value, `"${expression} ? '${value}' : undefined"`)];
                     }
                   } else {
                     return fixer.replaceText(attr, `${replace.bind ? ':' : ''}${replace.name}="${value}"`);

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

@@ -96,7 +96,7 @@ const groups = [{
                 yield fixer.replaceText(ref.id.parent.parent, `v-bind="props"`);
               }
               if (boundVariables.attrs) {
-                const template = context.parserServices.getTemplateBodyTokenStore();
+                const template = context.sourceCode.parserServices.getTemplateBodyTokenStore();
                 const ref = boundVariables.attrs;
                 const isLast = ref.prop === param.properties.at(-1);
                 if (isLast) {
@@ -188,7 +188,7 @@ module.exports = {
   },
   create(context) {
     let scopeStack;
-    return context.parserServices.defineTemplateBodyVisitor({
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       VElement(node) {
         scopeStack = {
           parent: scopeStack,

package/lib/util/fixers.js

@@ -10,11 +10,11 @@ function addClass(context, fixer, element, className) {
     return fixer.insertTextAfter(classNode, `="${className}"`);
   } else {
     // nothing
-    return fixer.insertTextAfter(context.parserServices.getTemplateBodyTokenStore().getFirstToken(element.startTag), ` class="${className}"`);
+    return fixer.insertTextAfter(context.sourceCode.parserServices.getTemplateBodyTokenStore().getFirstToken(element.startTag), ` class="${className}"`);
   }
 }
 function removeAttr(context, fixer, node) {
-  const source = context.getSourceCode().text;
+  const source = context.sourceCode.text;
   let [start, end] = node.range;
   // Remove extra whitespace before attributes
   start -= /\s*$/g.exec(source.substring(0, start))[0].length;

package/lib/util/helpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function hyphenate( /* istanbul ignore next */
+function hyphenate(/* istanbul ignore next */
 str = '') {
   return str.replace(/\B([A-Z])/g, '-$1').toLowerCase();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vuetify",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "An eslint plugin for Vuetify",
   "main": "lib/index.js",
   "author": "Kael Watts-Deuchar <kaelwd@gmail.com>",
@@ -9,6 +9,7 @@
   "scripts": {
     "build": "rimraf lib && babel src --out-dir lib",
     "test": "mocha tests --recursive --reporter dot",
+    "test:8": "ESLINT8=true mocha tests --recursive --reporter dot",
     "test:coverage": "nyc mocha tests --recursive --reporter dot",
     "test:ci": "nyc --reporter=lcov mocha tests --recursive --reporter dot",
     "lint": "eslint src tests",
@@ -26,23 +27,24 @@
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.19.6",
     "@babel/preset-env": "^7.19.4",
+    "@stylistic/eslint-plugin": "^2.10.1",
     "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",
-    "eslint-plugin-n": "^15.3.0",
-    "eslint-plugin-promise": "^6.1.1",
+    "eslint": "^9.14.0",
+    "eslint8": "npm:eslint@8.57.1",
     "husky": "^8.0.1",
     "mocha": "^10.1.0",
+    "neostandard": "^0.11.8",
     "nyc": "^15.1.0",
     "rimraf": "^3.0.2",
-    "vue": "^3.2.41",
-    "vuetify": "^3.0.0"
+    "vue": "^3.5.12",
+    "vue-eslint-parser": "^9.4.3",
+    "vuetify": "^3.7.4"
   },
   "peerDependencies": {
-    "eslint": "^8.0.0",
+    "eslint": "^8.0.0 || ^9.0.0",
     "vuetify": "^3.0.0"
-  }
+  },
+  "packageManager": "pnpm@9.13.2"
 }