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

package/README.md

@@ -42,6 +42,7 @@ These rules will help you avoid deprecated components, props, and classes. They
 
 - 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`])
+- 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`])
 
@@ -55,6 +56,7 @@ These rules are designed to help migrate to the new grid system in Vuetify v2. T
 [`grid-unknown-attributes`]: ./docs/rules/grid-unknown-attributes.md
 [`no-deprecated-components`]: ./docs/rules/no-deprecated-components.md
 [`no-deprecated-props`]: ./docs/rules/no-deprecated-props.md
+[`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
 

package/lib/configs/base.js

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

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

@@ -14,7 +14,7 @@ const {
 } = require('../util/fixers');
 const {
   components
-} = require('vuetify');
+} = require('vuetify/dist/vuetify.js');
 const VGrid = {
   VContainer: components.VContainer,
   VRow: components.VRow,

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

@@ -1,7 +1,7 @@
 'use strict';
 
 /** @type {Map<RegExp, (args: string[]) => string> | Map<string, string>} */
-const replacements = new Map([[/^rounded-(r|l|tr|tl|br|bl)(.*)$/, ([side, rest]) => {
+const replacements = new Map([[/^rounded-(r|l|tr|tl|br|bl)(-.*)?$/, ([side, rest]) => {
   side = {
     r: 'e',
     l: 's',
@@ -10,7 +10,7 @@ const replacements = new Map([[/^rounded-(r|l|tr|tl|br|bl)(.*)$/, ([side, rest])
     br: 'be',
     bl: 'bs'
   }[side];
-  return `rounded-${side}${rest}`;
+  return `rounded-${side}${rest || ''}`;
 }], [/^border-([rl])(.*)$/, ([side, rest]) => {
   side = {
     r: 'e',

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

@@ -26,6 +26,7 @@ const replacements = {
   VDataIterator: false,
   VDataTable: false,
   VDatePicker: false,
+  VListItemGroup: false,
   VOtpInput: false,
   VOverflowBtn: false,
   VPicker: false,

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

@@ -0,0 +1,209 @@
+'use strict';
+
+const {
+  hyphenate,
+  classify
+} = require('../util/helpers');
+const model = {
+  input: 'update:modelValue'
+};
+const inputs = {
+  ...model,
+  'click:appendOuter': 'click:append',
+  'update:error': false
+};
+const combobox = {
+  ...inputs,
+  'update:searchInput': 'update:search',
+  'update:listIndex': false
+};
+const replacements = {
+  VTextField: inputs,
+  VTextarea: inputs,
+  VFileInput: inputs,
+  VCombobox: {
+    ...combobox,
+    change: false
+  },
+  VAutocomplete: {
+    ...combobox,
+    change: 'update:modelValue'
+  },
+  VSelect: {
+    ...combobox,
+    change: 'update:modelValue'
+  },
+  VAlert: model,
+  VTabs: {
+    ...model,
+    'call:slider': false,
+    change: 'update:modelValue',
+    next: false,
+    prev: false
+  },
+  VTab: {
+    change: 'group:selected'
+  },
+  VBottomNavigation: {
+    change: 'update:modelValue',
+    'update:inputValue': false
+  },
+  VBtn: {
+    change: 'group:selected'
+  },
+  VBtnToggle: {
+    change: 'update:modelValue'
+  },
+  VCarousel: {
+    change: 'update:modelValue'
+  },
+  VCheckbox: {
+    change: 'update:modelValue',
+    'update:error': false
+  },
+  VChip: {
+    ...model,
+    'update:active': 'update:modelValue'
+  },
+  VChipGroup: {
+    change: 'update:modelValue'
+  },
+  VColorPicker: {
+    ...model,
+    'update:color': 'update:modelValue'
+  },
+  VDialog: {
+    ...model,
+    'update:returnValue': false
+  },
+  VExpansionPanels: {
+    change: 'update:modelValue'
+  },
+  VExpansionPanel: {
+    change: 'group:selected'
+  },
+  VForm: {
+    input: 'update:modelValue'
+  },
+  VHover: model,
+  VItemGroup: {
+    change: 'update:modelValue'
+  },
+  VMenu: {
+    ...model,
+    'update:returnValue': false
+  },
+  VNavigationDrawer: {
+    ...model,
+    'update:miniVariant': false
+  },
+  VPagination: {
+    ...model,
+    previous: 'prev'
+  },
+  VProgressLinear: {
+    change: 'update:modelValue'
+  },
+  VRadioGroup: {
+    change: 'update:modelValue',
+    'update:error': false
+  },
+  VRadio: {
+    change: 'update:modelValue',
+    'update:error': false
+  },
+  VRangeSlider: {
+    ...model,
+    change: false,
+    'update:error': false,
+    start: false,
+    end: false
+  },
+  VRating: model,
+  VSlider: {
+    ...model,
+    change: false,
+    'update:error': false,
+    start: false,
+    end: false
+  },
+  VSlideGroup: {
+    change: 'update:modelValue',
+    next: false,
+    prev: false
+  },
+  VSnackbar: model,
+  VSwitch: {
+    change: 'update:modelValue',
+    'update:error': false
+  },
+  VWindow: {
+    change: 'update:modelValue'
+  }
+};
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Prevent the use of removed and deprecated events.',
+      category: 'recommended'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      replacedWith: `{{ tag }}: @{{ a }} has been replaced with @{{ b }}`,
+      removed: `{{ tag }}: @{{ name }} has been removed`
+    }
+  },
+  create(context) {
+    return context.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);
+        if (!Object.keys(replacements).includes(tag)) return;
+        const eventNameNode = attr.key.argument;
+        const eventName = hyphenate(eventNameNode.rawName);
+        Object.entries(replacements[tag]).forEach(([test, replace]) => {
+          if (hyphenate(test) === eventName) {
+            if (replace === false) {
+              context.report({
+                messageId: 'removed',
+                data: {
+                  tag,
+                  name: eventName
+                },
+                node: eventNameNode
+              });
+            } else if (typeof replace === 'string') {
+              context.report({
+                messageId: 'replacedWith',
+                data: {
+                  tag,
+                  a: eventName,
+                  b: replace
+                },
+                node: eventNameNode,
+                fix(fixer) {
+                  return fixer.replaceText(eventNameNode, hyphenate(replace));
+                }
+              });
+            } else if (typeof replace === 'object' && 'custom' in replace) {
+              context.report({
+                messageId: 'replacedWith',
+                data: {
+                  a: eventName,
+                  b: replace.custom
+                },
+                node: eventNameNode
+              });
+            }
+          }
+        });
+      }
+    });
+  }
+};

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

@@ -107,13 +107,11 @@ const link = {
 const overlay = {
   hideOverlay: {
     name: 'scrim',
+    bind: true,
     value: false
   },
   internalActivator: false,
-  overlayColor: {
-    name: 'scrim',
-    value: value => value
-  },
+  overlayColor: 'scrim',
   overlayOpacity: false,
   value: 'model-value',
   returnValue: false
@@ -148,7 +146,7 @@ const replacements = {
       value: value => ({
         right: 'end',
         left: 'start'
-      })[value]
+      })[value] || value
     },
     outline: {
       name: 'variant',
@@ -202,10 +200,11 @@ const replacements = {
     app: false,
     fixed: false,
     hideOnScroll: false,
-    inputValue: 'model-value',
+    inputValue: false,
     scrollTarget: false,
     scrollThreshold: false,
     width: false,
+    value: 'model-value',
     ...size
   },
   VBreadcrumbs: {
@@ -225,7 +224,7 @@ const replacements = {
     },
     depressed: {
       name: 'variant',
-      value: 'depressed'
+      value: 'flat'
     },
     fab: false,
     flat: {
@@ -354,7 +353,7 @@ const replacements = {
   },
   VChip: {
     active: false,
-    close: 'cloasable',
+    close: 'closable',
     inputValue: 'model-value',
     outline: {
       name: 'variant',
@@ -420,14 +419,17 @@ const replacements = {
     allowOverflow: false,
     auto: false,
     bottom: {
-      custom: 'location and origin'
+      name: 'location',
+      value: 'bottom'
     },
     closeOnClick: {
       name: 'persistent',
-      value: true
+      bind: true,
+      value: value => value ? `!(${value})` : false
     },
     left: {
-      custom: 'location and origin'
+      name: 'location',
+      value: 'left'
     },
     nudgeBottom: {
       custom: 'offset'
@@ -447,12 +449,14 @@ const replacements = {
     positionX: false,
     positionY: false,
     right: {
-      custom: 'location and origin'
+      name: 'location',
+      value: 'right'
     },
     rounded: false,
     tile: false,
     top: {
-      custom: 'location and origin'
+      name: 'location',
+      value: 'top'
     },
     value: 'model-value',
     ...overlay
@@ -476,7 +480,8 @@ const replacements = {
     dense: false,
     disabled: false,
     left: 'start',
-    right: 'end'
+    right: 'end',
+    ...sizes
   },
   VImg: {
     contain: {
@@ -553,15 +558,13 @@ const replacements = {
     height: false,
     hideOverlay: {
       name: 'scrim',
+      bind: true,
       value: false
     },
     miniVariant: 'rail',
     miniVariantWidth: 'rail-width',
     mobileBreakPoint: false,
-    overlayColor: {
-      name: 'scrim',
-      value: value => value
-    },
+    overlayColor: 'scrim',
     overlayOpacity: false,
     right: {
       name: 'location',
@@ -572,10 +575,7 @@ const replacements = {
     value: 'model-value'
   },
   VOverlay: {
-    color: {
-      name: 'scrim',
-      value: value => value
-    },
+    color: 'scrim',
     opacity: false,
     value: 'model-value'
   },
@@ -599,6 +599,7 @@ const replacements = {
     value: 'model-value'
   },
   VRadio: {
+    inputValue: 'model-value',
     activeClass: 'false',
     offIcon: 'false-icon',
     onIcon: 'true-icon',
@@ -698,7 +699,8 @@ const replacements = {
     value: 'model-value'
   },
   VSwitch: {
-    ...inputs
+    ...inputs,
+    value: undefined
   },
   VSystemBar: {
     app: false,
@@ -754,14 +756,16 @@ const replacements = {
   VTooltip: {
     allowOverflow: false,
     bottom: {
-      custom: 'location and origin'
+      name: 'location',
+      value: 'bottom'
     },
     closeOnClick: {
       name: 'persistent',
       value: true
     },
     left: {
-      custom: 'location and origin'
+      name: 'location',
+      value: 'left'
     },
     nudgeBottom: {
       custom: 'offset'
@@ -778,10 +782,12 @@ const replacements = {
     positionX: false,
     positionY: false,
     right: {
-      custom: 'location and origin'
+      name: 'location',
+      value: 'right'
     },
     top: {
-      custom: 'location and origin'
+      name: 'location',
+      value: 'top'
     },
     value: 'model-value',
     ...overlay
@@ -826,7 +832,7 @@ module.exports = {
         const tag = classify(attr.parent.parent.rawName);
         if (!Object.keys(replacements).includes(tag)) return;
         const propName = attr.directive ? hyphenate(attr.key.argument.rawName) : hyphenate(attr.key.rawName);
-        const propNameNode = attr.directive ? attr.key.argument : attr;
+        const propNameNode = attr.directive ? attr.key.argument : attr.key;
         Object.entries(replacements[tag]).forEach(([test, replace]) => {
           if (hyphenate(test) === propName) {
             if (replace === false) {
@@ -850,7 +856,7 @@ module.exports = {
                 }
               });
             } else if (typeof replace === 'object' && 'name' in replace && 'value' in replace) {
-              const value = typeof replace.value === 'function' ? replace.value(attr.value?.value) : replace.value;
+              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;
               context.report({
                 messageId: 'replacedWith',
@@ -861,10 +867,17 @@ module.exports = {
                 node: propNameNode,
                 fix(fixer) {
                   if (attr.directive) {
-                    const expression = attr.value.expression.raw;
-                    return [fixer.replaceText(propNameNode, replace.name), fixer.replaceText(attr.value, `"${expression} && '${value}'"`)];
+                    if (replace.bind) {
+                      if (value === 'true' || value === '!(false)') {
+                        return fixer.replaceText(attr, replace.name);
+                      }
+                      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}'"`)];
+                    }
                   } else {
-                    return fixer.replaceText(attr, `${replace.name}="${value}"`);
+                    return fixer.replaceText(attr, `${replace.bind ? ':' : ''}${replace.name}="${value}"`);
                   }
                 }
               });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vuetify",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "description": "An eslint plugin for Vuetify",
   "main": "lib/index.js",
   "author": "Kael Watts-Deuchar <kaelwd@gmail.com>",
@@ -36,7 +36,7 @@
     "nyc": "^15.1.0",
     "rimraf": "^3.0.2",
     "vue": "^3.2.41",
-    "vuetify": "^3.0.0-beta.15"
+    "vuetify": "^3.0.0"
   },
   "peerDependencies": {
     "eslint": "^8.0.0",