Add support for grouping ordered attributes (#471)

Author: tinymins

docs/rules/attributes-order.md

@@ -90,7 +90,16 @@ Specify custom order of attribute groups
 :+1: Examples of **correct** code with custom order`:
 
 ```html
-<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
+<!-- 'vue/attributes-order': [2, { order: ['DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', ['BINDING', 'OTHER_ATTR'], 'EVENTS', 'CONTENT'] }] -->
+<div
+  is="header"
+  prop-one="prop"
+  :prop-two="prop">
+</div>
+```
+
+```html
+<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
 <div
   prop-one="prop"
   prop-two="prop"

lib/rules/attributes-order.js

@@ -38,14 +38,11 @@ function getAttributeType (name, isDirective) {
     }
   }
 }
-function getPosition (attribute, attributeOrder) {
-  let attributeType
-  if (attribute.directive && attribute.key.name === 'bind') {
-    attributeType = getAttributeType(attribute.key.argument, false)
-  } else {
-    attributeType = getAttributeType(attribute.key.name, attribute.directive)
-  }
-  return attributeOrder.indexOf(attributeType)
+function getPosition (attribute, attributePosition) {
+  const attributeType = attribute.directive && attribute.key.name === 'bind'
+    ? getAttributeType(attribute.key.argument, false)
+    : getAttributeType(attribute.key.name, attribute.directive)
+  return attributePosition.hasOwnProperty(attributeType) ? attributePosition[attributeType] : -1
 }
 
 function create (context) {
@@ -54,6 +51,14 @@ function create (context) {
   if (context.options[0] && context.options[0].order) {
     attributeOrder = context.options[0].order
   }
+  const attributePosition = {}
+  attributeOrder.forEach((item, i) => {
+    if (item instanceof Array) {
+      item.forEach((attr) => {
+        attributePosition[attr] = i
+      })
+    } else attributePosition[item] = i
+  })
   let currentPosition
   let previousNode
 
@@ -101,8 +106,8 @@ function create (context) {
       previousNode = null
     },
     'VAttribute' (node) {
-      if ((currentPosition === -1) || (currentPosition <= getPosition(node, attributeOrder))) {
-        currentPosition = getPosition(node, attributeOrder)
+      if ((currentPosition === -1) || (currentPosition <= getPosition(node, attributePosition))) {
+        currentPosition = getPosition(node, attributePosition)
         previousNode = node
       } else {
         reportIssue(node, previousNode)

tests/lib/rules/attributes-order.js

@@ -249,6 +249,33 @@ tester.run('attributes-order', rule, {
             'OTHER_DIRECTIVES'
           ]
         }]
+    },
+    {
+      filename: 'test.vue',
+      code:
+        `<template>
+          <div
+            v-if="!visible"
+            class="content"
+            :class="className"
+            v-text="textContent"
+            >
+          </div>
+        </template>`,
+      options: [
+        { order:
+          [
+            'CONDITIONALS',
+            'LIST_RENDERING',
+            'RENDER_MODIFIERS',
+            'DEFINITION',
+            'EVENTS',
+            'UNIQUE',
+            ['BINDING', 'OTHER_ATTR'],
+            'CONTENT',
+            'GLOBAL'
+          ]
+        }]
     }
   ],
 
@@ -515,6 +542,48 @@ tester.run('attributes-order', rule, {
           nodeType: 'VIdentifier'
         }
       ]
+    },
+    {
+      code:
+        `<template>
+          <div
+            class="content"
+            v-if="!visible"
+            :class="className"
+            v-text="textContent"
+            >
+          </div>
+        </template>`,
+      options: [
+        { order:
+          [
+            'CONDITIONALS',
+            'LIST_RENDERING',
+            'RENDER_MODIFIERS',
+            'DEFINITION',
+            'EVENTS',
+            'UNIQUE',
+            ['BINDING', 'OTHER_ATTR'],
+            'CONTENT',
+            'GLOBAL'
+          ]
+        }],
+      output:
+        `<template>
+          <div
+            v-if="!visible"
+            class="content"
+            :class="className"
+            v-text="textContent"
+            >
+          </div>
+        </template>`,
+      errors: [
+        {
+          message: 'Attribute "v-if" should go before "class".',
+          nodeType: 'VIdentifier'
+        }
+      ]
     }
   ]
 })