eslint-plugin-vuetify 2.0.4 → 2.1.0

package/lib/configs/base.js

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

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

@@ -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'], [/^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

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

@@ -14,6 +14,8 @@ const replacements = {
   VListTileSubTitle: 'v-list-item-subtitle',
   VJumbotron: false,
   VToolbarSideIcon: 'v-app-bar-nav-icon',
+  VExpansionPanelHeader: 'v-expansion-panel-title',
+  VExpansionPanelContent: 'v-expansion-panel-text',
   // Possible typos
   VListItemSubTitle: 'v-list-item-subtitle',
   VListTileSubtitle: 'v-list-item-subtitle',
@@ -24,17 +26,18 @@ const replacements = {
   VListItemAvatar: false,
   VListItemContent: false,
   VListItemIcon: false,
-  VOtpInput: false,
   VOverflowBtn: false,
   VPicker: false,
   VSimpleCheckbox: 'v-checkbox-btn',
   VSparkline: false,
   VSpeedDial: false,
-  VStepper: false,
   VSubheader: {
     custom: 'v-list-subheader or class="text-subheader-2"'
   },
   VSimpleTable: 'v-table',
+  VTabsSlider: false,
+  VTabsItems: false,
+  VTabItem: false,
   VTimePicker: false,
   VTreeview: false
 };

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

@@ -32,6 +32,10 @@ const sizes = {
     value: 'x-small'
   }
 };
+const theme = {
+  dark: false,
+  light: false
+};
 const inputs = {
   appendOuterIcon: 'append-icon',
   backgroundColor: 'bg-color',
@@ -60,7 +64,6 @@ const inputs = {
     name: 'variant',
     value: 'outlined'
   },
-  rounded: false,
   shaped: false,
   solo: {
     name: 'variant',
@@ -76,14 +79,14 @@ const inputs = {
     name: 'validate-on',
     value: 'blur'
   },
-  value: 'model-value'
+  value: 'model-value',
+  ...theme
 };
 const select = {
   allowOverflow: false,
   attach: {
     custom: ':menu-props="{ attach: true }"'
   },
-  autoSelectFirst: false,
   cacheItems: false,
   deletableChips: 'closable-chips',
   disableLookup: false,
@@ -101,10 +104,6 @@ const select = {
   ...inputs,
   dense: false
 };
-const theme = {
-  dark: false,
-  light: false
-};
 const link = {
   append: false,
   exactActiveClass: false,
@@ -196,7 +195,23 @@ const replacements = {
     avatar: false,
     mode: false,
     origin: false,
-    overlap: false
+    overlap: false,
+    bottom: {
+      name: 'location',
+      value: 'bottom'
+    },
+    left: {
+      name: 'location',
+      value: 'left'
+    },
+    right: {
+      name: 'location',
+      value: 'right'
+    },
+    top: {
+      name: 'location',
+      value: 'top'
+    }
   },
   VBanner: {
     app: false,
@@ -377,7 +392,9 @@ const replacements = {
     },
     selected: 'value',
     textColor: false,
-    ...link
+    ...link,
+    ...sizes,
+    ...theme
   },
   VChipGroup: {
     activeClass: 'selected-class',
@@ -393,6 +410,39 @@ const replacements = {
     hideModeSwitch: false,
     value: 'model-value'
   },
+  VDataTable: {
+    serverItemsLength: {
+      custom: '<v-data-table-server>'
+    },
+    itemClass: {
+      custom: 'row-props'
+    },
+    itemStyle: {
+      custom: 'row-props'
+    },
+    sortDesc: {
+      custom: 'sort-by'
+    },
+    groupDesc: {
+      custom: 'group-by'
+    }
+  },
+  VDatePicker: {
+    activePicker: 'view-mode',
+    pickerDate: {
+      custom: 'separate month and year props'
+    },
+    locale: false,
+    localeFirstDayOfYear: false,
+    firstDayOfWeek: false,
+    dayFormat: false,
+    weekdayFormat: false,
+    monthFormat: false,
+    yearFormat: false,
+    headerDateFormat: false,
+    titleDateFormat: false,
+    range: false
+  },
   VExpansionPanels: {
     accordion: {
       name: 'variant',
@@ -467,6 +517,7 @@ const replacements = {
     nudgeTop: {
       custom: 'offset'
     },
+    nudgeWidth: false,
     offsetOverflow: false,
     offsetX: false,
     offsetY: false,
@@ -641,6 +692,7 @@ const replacements = {
   VRadioGroup: {
     activeClass: false,
     backgroundColor: false,
+    row: 'inline',
     column: false,
     multiple: false,
     ...inputs
@@ -658,8 +710,7 @@ const replacements = {
     height: false,
     loading: false,
     inverseLabel: false,
-    ...inputs,
-    ...theme
+    ...inputs
   },
   VRangeSlider: {
     backgroundColor: false,
@@ -674,8 +725,7 @@ const replacements = {
     height: false,
     loading: false,
     inverseLabel: false,
-    ...inputs,
-    ...theme
+    ...inputs
   },
   VRating: {
     backgroundColor: false,
@@ -852,6 +902,7 @@ const replacements = {
     nudgeTop: {
       custom: 'offset'
     },
+    nudgeWidth: false,
     positionX: false,
     positionY: false,
     right: {
@@ -895,11 +946,35 @@ module.exports = {
     schema: [],
     messages: {
       replacedWith: `'{{ a }}' has been replaced with '{{ b }}'`,
-      removed: `'{{ name }}' has been removed`
+      removed: `'{{ name }}' has been removed`,
+      combined: `multiple {{ a }} attributes have been combined`
     }
   },
   create(context) {
     return context.parserServices.defineTemplateBodyVisitor({
+      VStartTag(tag) {
+        const attrGroups = {};
+        tag.attributes.forEach(attr => {
+          if (['location'].includes(attr.key.name)) {
+            attrGroups[attr.key.name] = attrGroups[attr.key.name] ?? [];
+            attrGroups[attr.key.name].push(attr);
+          }
+        });
+        Object.values(attrGroups).forEach(attrGroup => {
+          const [head, ...tail] = attrGroup;
+          if (!tail.length) return;
+          context.report({
+            messageId: 'combined',
+            data: {
+              a: head.key.name
+            },
+            node: head,
+            fix(fixer) {
+              return [fixer.replaceText(head.value, `"${attrGroup.map(a => a.value.value).join(' ')}"`), ...tail.map(a => fixer.remove(a))];
+            }
+          });
+        });
+      },
       VAttribute(attr) {
         if (attr.directive && (attr.key.name.name !== 'bind' || !attr.key.argument)) return;
         const tag = classify(attr.parent.parent.rawName);

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

@@ -0,0 +1,199 @@
+'use strict';
+
+const {
+  classify,
+  getAttributes
+} = require('../util/helpers');
+const groups = [{
+  components: ['VDialog', 'VMenu', 'VTooltip'],
+  slots: ['activator'],
+  handler(context, node, directive, param) {
+    if (param.type === 'Identifier') {
+      // #activator="data"
+      const boundVariables = {};
+      node.variables.find(variable => variable.id.name === param.name)?.references.forEach(ref => {
+        if (ref.id.parent.type !== 'MemberExpression') return;
+        if (
+        // v-bind="data.props"
+        ref.id.parent.property.name === 'props' && ref.id.parent.parent.parent.directive && ref.id.parent.parent.parent.key.name.name === 'bind' && !ref.id.parent.parent.parent.key.argument) return;
+        if (ref.id.parent.property.name === 'on') {
+          boundVariables.on = ref.id;
+        } else if (ref.id.parent.property.name === 'attrs') {
+          boundVariables.attrs = ref.id;
+        }
+      });
+      if (boundVariables.on) {
+        const ref = boundVariables.on;
+        context.report({
+          node: ref,
+          messageId: 'changedProps',
+          data: {
+            component: node.parent.name,
+            slot: directive.key.argument.name
+          },
+          fix(fixer) {
+            return fixer.replaceText(ref.parent.parent.parent, `v-bind="${param.name}.props"`);
+          }
+        });
+      }
+      if (boundVariables.attrs) {
+        const ref = boundVariables.attrs;
+        if (!boundVariables.on) {
+          context.report({
+            node: boundVariables.attrs,
+            messageId: 'invalidProps'
+          });
+        } else {
+          context.report({
+            node: ref,
+            messageId: 'changedProps',
+            data: {
+              component: node.parent.name,
+              slot: directive.key.argument.name
+            },
+            fix(fixer) {
+              return fixer.removeRange([ref.parent.parent.parent.range[0] - 1, ref.parent.parent.parent.range[1]]);
+            }
+          });
+        }
+      }
+    } else if (param.type === 'ObjectPattern') {
+      // #activator="{ on, attrs }"
+      const boundVariables = {};
+      param.properties.forEach(prop => {
+        node.variables.find(variable => variable.id.name === prop.value.name)?.references.forEach(ref => {
+          if (prop.key.name === 'on') {
+            boundVariables.on = {
+              prop,
+              id: ref.id
+            };
+          } else if (prop.key.name === 'attrs') {
+            boundVariables.attrs = {
+              prop,
+              id: ref.id
+            };
+          }
+        });
+      });
+      if (boundVariables.on || boundVariables.attrs) {
+        if (boundVariables.attrs && !boundVariables.on) {
+          context.report({
+            node: boundVariables.attrs.prop.key,
+            messageId: 'invalidProps'
+          });
+        } else {
+          context.report({
+            node: param,
+            messageId: 'changedProps',
+            data: {
+              component: node.parent.name,
+              slot: directive.key.argument.name
+            },
+            *fix(fixer) {
+              if (boundVariables.on) {
+                const ref = boundVariables.on;
+                yield fixer.replaceText(ref.prop, 'props');
+                yield fixer.replaceText(ref.id.parent.parent, `v-bind="props"`);
+              }
+              if (boundVariables.attrs) {
+                const template = context.parserServices.getTemplateBodyTokenStore();
+                const ref = boundVariables.attrs;
+                const isLast = ref.prop === param.properties.at(-1);
+                if (isLast) {
+                  const comma = template.getTokenBefore(ref.prop, {
+                    filter: token => token.value === ','
+                  });
+                  if (comma) {
+                    yield fixer.removeRange([comma.start, ref.prop.end]);
+                  } else {
+                    yield fixer.removeRange([ref.prop.start - 1, ref.prop.end]);
+                  }
+                } else {
+                  const comma = template.getTokenAfter(ref.prop, {
+                    filter: token => token.value === ','
+                  });
+                  if (comma) {
+                    yield fixer.removeRange([ref.prop.start - 1, comma.end]);
+                  } else {
+                    yield fixer.removeRange([ref.prop.start - 1, ref.prop.end]);
+                  }
+                }
+                yield fixer.removeRange([ref.id.parent.parent.range[0] - 1, ref.id.parent.parent.range[1]]);
+              }
+            }
+          });
+        }
+      }
+    } else {
+      context.report({
+        node: directive,
+        messageId: 'invalidProps'
+      });
+    }
+  }
+}, {
+  components: ['VSelect', 'VAutocomplete', 'VCombobox'],
+  slots: ['selection'],
+  handler(context, node, directive, param) {
+    if (!getAttributes(node.parent).some(attr => ['chips', 'closable-chips'].includes(attr.name))) return;
+    context.report({
+      node: directive,
+      messageId: 'renamed',
+      data: {
+        component: node.parent.name,
+        slot: directive.key.argument.name,
+        newSlot: 'chip'
+      },
+      fix(fixer) {
+        return fixer.replaceText(directive.key.argument, 'chip');
+      }
+    });
+  }
+}];
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Prevent the use of removed and deprecated slots.',
+      category: 'recommended'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      renamed: `{{ component }}'s '{{ slot }}' slot has been renamed to '{{ newSlot }}'`,
+      changedProps: `{{ component }}'s '{{ slot }}' slot has changed props`,
+      invalidProps: `Slot has invalid props`
+    }
+  },
+  create(context) {
+    let scopeStack;
+    return context.parserServices.defineTemplateBodyVisitor({
+      VElement(node) {
+        scopeStack = {
+          parent: scopeStack,
+          nodes: scopeStack ? [...scopeStack.nodes] : []
+        };
+        for (const variable of node.variables) {
+          scopeStack.nodes.push(variable.id);
+        }
+        if (node.name !== 'template' || node.parent.type !== 'VElement') return;
+        for (const group of groups) {
+          if (!group.components.includes(classify(node.parent.name)) && !group.components.includes(node.parent.name)) continue;
+          const directive = node.startTag.attributes.find(attr => {
+            return attr.directive && attr.key.name.name === 'slot' && group.slots.includes(attr.key.argument?.name);
+          });
+          if (!directive || !directive.value || directive.value.type !== 'VExpressionContainer' || !directive.value.expression || directive.value.expression.params.length !== 1) continue;
+          const param = directive.value.expression.params[0];
+          group.handler(context, node, directive, param);
+        }
+      },
+      'VElement:exit'() {
+        scopeStack = scopeStack && scopeStack.parent;
+      }
+    });
+  }
+};

package/package.json

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