eslint-plugin-vuetify 2.5.3 → 2.7.0

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

@@ -0,0 +1,100 @@
+'use strict';
+
+const {
+  classify,
+  isVueTemplate
+} = require('../util/helpers');
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow usage of specified component slots, with optional replacements'
+    },
+    fixable: 'code',
+    schema: [{
+      type: 'object',
+      additionalProperties: {
+        type: 'object',
+        additionalProperties: {
+          oneOf: [{
+            type: 'string'
+          }, {
+            type: 'boolean',
+            enum: [false]
+          }, {
+            type: 'object',
+            properties: {
+              message: {
+                type: 'string'
+              }
+            },
+            required: ['message'],
+            additionalProperties: false
+          }]
+        }
+      }
+    }],
+    messages: {
+      replacedWith: `{{ component }}'s '{{ slot }}' slot has been replaced with '{{ newSlot }}'`,
+      removed: `{{ component }}'s '{{ slot }}' slot has been removed`,
+      removedWithMessage: `{{ component }}'s '{{ slot }}' slot has been removed: {{ message }}`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    const options = context.options[0];
+    if (!options || !Object.keys(options).length) return {};
+
+    // Normalize keys to PascalCase
+    const replacements = new Map();
+    for (const [component, slots] of Object.entries(options)) {
+      replacements.set(classify(component), slots);
+    }
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VElement(node) {
+        if (node.name !== 'template' || node.parent.type !== 'VElement') return;
+        const tag = classify(node.parent.name);
+        if (!replacements.has(tag)) return;
+        const slots = replacements.get(tag);
+        const directive = node.startTag.attributes.find(attr => {
+          return attr.directive && attr.key.name.name === 'slot' && attr.key.argument?.name && slots[attr.key.argument.name] !== undefined;
+        });
+        if (!directive) return;
+        const slotName = directive.key.argument.name;
+        const replace = slots[slotName];
+        if (replace === false) {
+          context.report({
+            messageId: 'removed',
+            data: {
+              component: node.parent.name,
+              slot: slotName
+            },
+            node: directive
+          });
+        } else if (typeof replace === 'string') {
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              component: node.parent.name,
+              slot: slotName,
+              newSlot: replace
+            },
+            node: directive,
+            fix(fixer) {
+              return fixer.replaceText(directive.key.argument, replace);
+            }
+          });
+        } else if (typeof replace === 'object' && replace !== null) {
+          context.report({
+            messageId: 'removedWithMessage',
+            data: {
+              component: node.parent.name,
+              slot: slotName,
+              message: replace.message
+            },
+            node: directive
+          });
+        }
+      }
+    });
+  }
+};

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

@@ -33,7 +33,7 @@ const tags = Object.keys(VGrid).reduce((t, k) => {
 module.exports = {
   meta: {
     docs: {
-      description: 'warn about unknown attributes not being converted to classes on new grid components',
+      description: 'Warn about v1 grid attributes not being auto-converted to classes in v2.',
       category: 'recommended'
     },
     fixable: 'code',

package/lib/rules/no-border-prop.js

@@ -0,0 +1,73 @@
+'use strict';
+
+const {
+  isVueTemplate
+} = require('../util/helpers');
+const {
+  addClass,
+  removeAttr
+} = require('../util/fixers');
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow the `border` prop; use Tailwind border utilities instead.',
+      category: 'tailwindcss'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      replacedWith: `'border="{{ value }}"' should be replaced with class="{{ className }}"`,
+      noFix: `'border' prop should be replaced with Tailwind border utility classes`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(attr) {
+        if (attr.directive && (attr.key.name.name !== 'bind' || !attr.key.argument)) return;
+        const propName = attr.directive ? attr.key.argument.rawName : attr.key.rawName;
+        if (propName !== 'border') return;
+        const element = attr.parent.parent;
+        const propNameNode = attr.directive ? attr.key.argument : attr.key;
+
+        // Boolean attribute (no value) — `border` with no `="..."`
+        if (!attr.directive && !attr.value) {
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              value: '',
+              className: 'border'
+            },
+            node: propNameNode,
+            fix(fixer) {
+              return [addClass(context, fixer, element, 'border'), removeAttr(context, fixer, attr)];
+            }
+          });
+          return;
+        }
+
+        // Get static value
+        const value = attr.directive ? attr.value?.expression?.type === 'Literal' ? String(attr.value.expression.value) : null : attr.value?.value;
+        if (value != null) {
+          const className = value.split(/\s+/).filter(Boolean).map(part => `border-${part}`).join(' ');
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              value,
+              className
+            },
+            node: propNameNode,
+            fix(fixer) {
+              return [addClass(context, fixer, element, className), removeAttr(context, fixer, attr)];
+            }
+          });
+        } else {
+          context.report({
+            messageId: 'noFix',
+            node: propNameNode
+          });
+        }
+      }
+    });
+  }
+};

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

@@ -31,7 +31,6 @@ const replacements = {
     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',
   VSubheader: {
     custom: 'v-list-subheader or class="text-subtitle-2"'

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

@@ -0,0 +1,108 @@
+'use strict';
+
+const {
+  hyphenate,
+  classify,
+  isVueTemplate
+} = require('../util/helpers');
+
+// VSnackbarQueue: #default slot was renamed to #item in Vuetify 4
+const slotRenames = [{
+  component: 'VSnackbarQueue',
+  from: 'default',
+  to: 'item'
+}];
+
+// VSnackbar props deprecated in Vuetify 4
+const propReplacements = {
+  VSnackbar: {
+    multiLine: {
+      name: 'min-height',
+      value: '68'
+    }
+  }
+};
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow deprecated props and slots on Vuetify snackbar components.',
+      category: 'recommended'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      replacedWith: `'{{ a }}' has been replaced with '{{ b }}'`,
+      renamed: `{{ component }}'s '{{ slot }}' slot has been renamed to '{{ newSlot }}'`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(attr) {
+        if (attr.directive && (attr.key.name.name !== 'bind' || !attr.key.argument)) return;
+        const tag = classify(attr.parent.parent.rawName);
+        if (!Object.keys(propReplacements).includes(tag)) return;
+        const propName = attr.directive ? hyphenate(attr.key.argument.rawName) : hyphenate(attr.key.rawName);
+        const propNameNode = attr.directive ? attr.key.argument : attr.key;
+        Object.entries(propReplacements[tag]).forEach(([test, replace]) => {
+          if (hyphenate(test) !== propName) return;
+          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({
+            messageId: 'replacedWith',
+            data: {
+              a: propName,
+              b: `${replace.name}="${value}"`
+            },
+            node: propNameNode,
+            fix(fixer) {
+              if (attr.directive && replace.bind !== false) {
+                if (replace.bind) {
+                  return [fixer.replaceText(propNameNode, replace.name), fixer.replaceText(attr.value, `"${value}"`)];
+                } else {
+                  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}"`);
+              }
+            }
+          });
+        });
+      },
+      VElement(node) {
+        if (node.name !== 'template' || node.parent.type !== 'VElement') return;
+        const parentName = classify(node.parent.name);
+        for (const {
+          component,
+          from,
+          to
+        } of slotRenames) {
+          if (parentName !== component) continue;
+          const directive = node.startTag.attributes.find(attr => {
+            return attr.directive && attr.key.name.name === 'slot' && attr.key.argument?.name === from;
+          });
+          if (!directive) continue;
+          context.report({
+            node: directive,
+            messageId: 'renamed',
+            data: {
+              component: node.parent.name,
+              slot: from,
+              newSlot: to
+            },
+            fix(fixer) {
+              return fixer.replaceText(directive.key.argument, to);
+            }
+          });
+        }
+      }
+    });
+  }
+};

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

@@ -0,0 +1,106 @@
+'use strict';
+
+const {
+  isVueTemplate
+} = require('../util/helpers');
+const md2 = {
+  'display-4': 'text-h1',
+  'display-3': 'text-h2',
+  'display-2': 'text-h3',
+  'display-1': 'text-h4',
+  headline: 'text-h5',
+  title: 'text-h6',
+  subheading: 'text-subtitle-1',
+  'subtitle-1': 'text-subtitle-1',
+  'subtitle-2': 'text-subtitle-2',
+  'body-1': 'text-body-1',
+  'body-2': 'text-body-2',
+  caption: 'text-caption',
+  overline: 'text-overline'
+};
+const md3 = {
+  'text-h1': 'text-display-large',
+  'text-h2': 'text-display-medium',
+  'text-h3': 'text-display-small',
+  'text-h4': 'text-headline-large',
+  'text-h5': 'text-headline-medium',
+  'text-h6': 'text-headline-small',
+  'text-subtitle-1': 'text-body-large',
+  'text-subtitle-2': 'text-label-large',
+  'text-body-1': 'text-body-large',
+  'text-body-2': 'text-body-medium',
+  'text-caption': 'text-body-small',
+  'text-button': 'text-label-large',
+  'text-overline': 'text-label-small'
+};
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  md2,
+  md3,
+  meta: {
+    docs: {
+      description: 'Disallow deprecated MD2 typography classes, with configurable replacements.',
+      category: 'recommended'
+    },
+    fixable: 'code',
+    schema: [{
+      type: 'object',
+      additionalProperties: {
+        oneOf: [{
+          type: 'string'
+        }, {
+          type: 'boolean',
+          enum: [false]
+        }]
+      }
+    }],
+    messages: {
+      replacedWith: `'{{ a }}' has been replaced with '{{ b }}'`,
+      removed: `'{{ name }}' has been removed`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    const replacements = {
+      ...(context.options[0] || md3)
+    };
+
+    // Remove entries the user set to false
+    for (const key of Object.keys(replacements)) {
+      if (replacements[key] === false) delete replacements[key];
+    }
+    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(Boolean);
+        classes.forEach(className => {
+          const replace = replacements[className];
+          if (replace == null) return;
+          const idx = node.value.value.indexOf(className) + 1;
+          const range = [node.value.range[0] + idx, node.value.range[0] + idx + className.length];
+          const loc = {
+            start: context.sourceCode.getLocFromIndex(range[0]),
+            end: context.sourceCode.getLocFromIndex(range[1])
+          };
+          if (typeof replace === 'string') {
+            context.report({
+              loc,
+              messageId: 'replacedWith',
+              data: {
+                a: className,
+                b: replace
+              },
+              fix(fixer) {
+                return fixer.replaceTextRange(range, replace);
+              }
+            });
+          }
+        });
+      }
+    });
+  }
+};

package/lib/rules/no-elevation-overflow.js

@@ -0,0 +1,77 @@
+'use strict';
+
+const {
+  isVueTemplate
+} = require('../util/helpers');
+const MAX_ELEVATION = 5;
+
+// Match elevation-N in a class string, return the number
+const elevationRegex = /\belevation-(\d+)\b/g;
+function checkClassValue(context, node, value) {
+  let match;
+  elevationRegex.lastIndex = 0;
+  while ((match = elevationRegex.exec(value)) !== null) {
+    const level = parseInt(match[1], 10);
+    if (level > MAX_ELEVATION) {
+      context.report({
+        messageId: 'overflow',
+        data: {
+          level: String(level),
+          max: String(MAX_ELEVATION)
+        },
+        node
+      });
+    }
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow elevation classes above the MD3 maximum (0–5).',
+      category: 'recommended'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      overflow: 'Elevation level {{ level }} exceeds the MD3 maximum of {{ max }}.'
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(attr) {
+        // Static class="elevation-10"
+        if (!attr.directive && attr.key.rawName === 'class' && attr.value) {
+          checkClassValue(context, attr, attr.value.value);
+          return;
+        }
+
+        // :class="'elevation-10'" or :class="`elevation-${n}`" — check literal strings
+        if (attr.directive && attr.key.name.name === 'bind' && attr.key.argument?.rawName === 'class' && attr.value?.expression?.type === 'Literal' && typeof attr.value.expression.value === 'string') {
+          checkClassValue(context, attr, attr.value.expression.value);
+          return;
+        }
+
+        // :elevation="10" or elevation="10" on any component
+        const propName = attr.directive ? attr.key.argument?.rawName : attr.key.rawName;
+        if (propName !== 'elevation') return;
+        const value = attr.directive ? attr.value?.expression?.type === 'Literal' ? attr.value.expression.value : null : attr.value ? Number(attr.value.value) : null;
+        if (typeof value === 'number' && value > MAX_ELEVATION) {
+          context.report({
+            messageId: 'overflow',
+            data: {
+              level: String(value),
+              max: String(MAX_ELEVATION)
+            },
+            node: attr
+          });
+        }
+      }
+    });
+  }
+};

package/lib/rules/no-elevation-prop.js

@@ -0,0 +1,58 @@
+'use strict';
+
+const {
+  isVueTemplate
+} = require('../util/helpers');
+const {
+  addClass,
+  removeAttr
+} = require('../util/fixers');
+const validElevations = new Set(['0', '1', '2', '3', '4', '5']);
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow the `elevation` prop; use Tailwind shadow utilities instead.',
+      category: 'tailwindcss'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      replacedWith: `'elevation="{{ value }}"' should be replaced with class="{{ className }}"`,
+      noFix: `'elevation' prop should be replaced with a Tailwind shadow utility class`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(attr) {
+        if (attr.directive && (attr.key.name.name !== 'bind' || !attr.key.argument)) return;
+        const propName = attr.directive ? attr.key.argument.rawName : attr.key.rawName;
+        if (propName !== 'elevation') return;
+        const element = attr.parent.parent;
+        const propNameNode = attr.directive ? attr.key.argument : attr.key;
+
+        // Get static value
+        const value = attr.directive ? attr.value?.expression?.type === 'Literal' ? String(attr.value.expression.value) : null : attr.value?.value;
+        if (value != null && validElevations.has(value)) {
+          const className = `elevation-${value}`;
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              value,
+              className
+            },
+            node: propNameNode,
+            fix(fixer) {
+              return [addClass(context, fixer, element, className), removeAttr(context, fixer, attr)];
+            }
+          });
+        } else {
+          context.report({
+            messageId: 'noFix',
+            node: propNameNode
+          });
+        }
+      }
+    });
+  }
+};

package/lib/rules/no-legacy-grid-props.js

@@ -0,0 +1,141 @@
+'use strict';
+
+const {
+  hyphenate,
+  classify,
+  isVueTemplate
+} = require('../util/helpers');
+const {
+  addClass,
+  removeAttr
+} = require('../util/fixers');
+const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'];
+
+// VRow props that should become utility classes
+const rowPropToClass = {
+  align: value => `align-${value}`,
+  justify: value => `justify-${value}`,
+  'align-content': value => `align-content-${value}`
+};
+
+// Generate responsive variants: align-sm, align-md, justify-sm, etc.
+for (const [prop, fn] of Object.entries({
+  ...rowPropToClass
+})) {
+  for (const bp of breakpoints) {
+    rowPropToClass[`${prop}-${bp}`] = value => `${fn(value).replace(value, '')}-${bp}-${value}`;
+  }
+}
+// Fix responsive class generation — the base fn closures captured value incorrectly, redo properly
+for (const bp of breakpoints) {
+  rowPropToClass[`align-${bp}`] = value => `align-${bp}-${value}`;
+  rowPropToClass[`justify-${bp}`] = value => `justify-${bp}-${value}`;
+  rowPropToClass[`align-content-${bp}`] = value => `align-content-${bp}-${value}`;
+}
+
+// VCol props that should become utility classes
+const colPropToClass = {
+  order: value => `order-${value}`,
+  'align-self': value => `align-self-${value}`
+};
+for (const bp of breakpoints) {
+  colPropToClass[`order-${bp}`] = value => `order-${bp}-${value}`;
+}
+const replacements = {
+  VRow: {
+    props: rowPropToClass,
+    renamed: {
+      dense: {
+        name: 'density',
+        value: 'compact'
+      }
+    }
+  },
+  VCol: {
+    props: colPropToClass,
+    renamed: {}
+  }
+};
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Prevent the use of removed grid props.',
+      category: 'recommended'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      movedToClass: `'{{ prop }}' has been removed, use class="{{ className }}" instead`,
+      replacedWith: `'{{ a }}' has been replaced with '{{ b }}'`
+    }
+  },
+  create(context) {
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(attr) {
+        if (attr.directive && (attr.key.name.name !== 'bind' || !attr.key.argument)) return;
+        const tag = classify(attr.parent.parent.rawName);
+        const config = replacements[tag];
+        if (!config) return;
+        const propName = attr.directive ? hyphenate(attr.key.argument.rawName) : hyphenate(attr.key.rawName);
+        const propNameNode = attr.directive ? attr.key.argument : attr.key;
+        const element = attr.parent.parent;
+
+        // Check for props that should become utility classes
+        if (config.props[propName]) {
+          const toClass = config.props[propName];
+
+          // Need a static value to auto-fix
+          const value = attr.directive ? attr.value?.expression?.type === 'Literal' ? String(attr.value.expression.value) : null : attr.value?.value;
+          if (value) {
+            const className = toClass(value);
+            context.report({
+              messageId: 'movedToClass',
+              data: {
+                prop: propName,
+                className
+              },
+              node: propNameNode,
+              fix(fixer) {
+                return [addClass(context, fixer, element, className), removeAttr(context, fixer, attr)];
+              }
+            });
+          } else {
+            // Dynamic value — can't auto-fix but still report
+            const className = toClass('<value>');
+            context.report({
+              messageId: 'movedToClass',
+              data: {
+                prop: propName,
+                className
+              },
+              node: propNameNode
+            });
+          }
+          return;
+        }
+
+        // Check for renamed props (e.g. dense -> density="compact")
+        const renamed = config.renamed[propName];
+        if (renamed) {
+          context.report({
+            messageId: 'replacedWith',
+            data: {
+              a: propName,
+              b: `${renamed.name}="${renamed.value}"`
+            },
+            node: propNameNode,
+            fix(fixer) {
+              return fixer.replaceText(attr, `${renamed.name}="${renamed.value}"`);
+            }
+          });
+        }
+      }
+    });
+  }
+};