Add same order support on multiple types of attributes.

Author: tinymins

Diff for: docs/rules/attributes-order.md

@@ -86,6 +86,15 @@ Specify custom order of attribute groups
 
 :+1: Examples of **correct** code with custom order`:
 
+```html
+<!-- 'vue/attributes-order': [2, { order: ['DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', ['BINDING', 'OTHER_ATTR'], 'EVENTS', 'CONTENT'] }] -->
+<div
+  is="header"
+  propOne="prop"
+  :propTwo="prop">
+</div>
+```
+
 ```html
 <!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
 <div

Diff for: lib/rules/attributes-order.js

@@ -36,9 +36,9 @@ function getAttributeType (name, isDirective) {
     }
   }
 }
-function getPosition (attribute, attributeOrder) {
+function getPosition (attribute, attributePosition) {
   const attributeType = getAttributeType(attribute.key.name, attribute.directive)
-  return attributeOrder.indexOf(attributeType)
+  return attributePosition.hasOwnProperty(attributeType) ? attributePosition[attributeType] : -1
 }
 
 function create (context) {
@@ -47,6 +47,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
 
@@ -94,8 +102,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)

Diff for: tests/lib/rules/attributes-order.js

@@ -242,6 +242,33 @@ tester.run('attributes-order', rule, {
             'OTHER_ATTR'
           ]
         }]
+    },
+    {
+      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'
+          ]
+        }]
     }
   ],
 
@@ -510,6 +537,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'
+        }
+      ]
     }
   ]
 })