From eaf365f0f5b9cff3e84bce08b25c3cc03326852a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Thu, 21 Dec 2017 19:44:36 +0100
Subject: [PATCH 1/5] Update indent rule to handle properly multiline
 attributes lists

---
 docs/rules/html-indent.md      | 107 +++++++++++++++++----------------
 lib/rules/html-indent.js       |  16 +++--
 tests/lib/rules/html-indent.js |  38 +++++++++---
 3 files changed, 98 insertions(+), 63 deletions(-)

diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index 9a325d9c7..d8ab9226f 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -23,33 +23,38 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 
 ```html
 <template>
-    <div class="foo">
-        Hello.
-    </div>
+  <div class="foo">
+    Hello.
+  </div>
 </template>
 ```
 
 ```html
 <template>
-    <div class="foo">
-        Hello.
-    </div>
-    <div
-        id="a"
-        class="b"
-        :other-attr="{
-            aaa: 1,
-            bbb: 2
-        }"
-        @other-attr2="
-            foo();
-            bar();
-        "
-    >
-        {{
-            displayMessage
-        }}
-    </div>
+  <div class="foo">
+    Hello.
+  </div>
+  <div class="foo"
+    :foo="bar"
+  >
+    World.
+  </div>
+  <div
+    id="a"
+    class="b"
+    :other-attr="{
+      aaa: 1,
+      bbb: 2
+    }"
+    @other-attr2="
+      foo();
+      bar();
+    "
+  >
+    {{
+      displayMessage
+    }}
+  </div>
 </template>
 ```
 
@@ -57,11 +62,11 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 
 ```json
 {
-    "vue/html-indent": ["error", type, {
-        "attribute": 1,
-        "closeBracket": 0,
-        "ignores": []
-    }]
+  "vue/html-indent": ["error", type, {
+    "attribute": 1,
+    "closeBracket": 0,
+    "ignores": []
+  }]
 }
 ```
 
@@ -74,16 +79,16 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 
 ```html
 <template>
-    <div
-        id="a"
-        class="b"
-        other-attr=
-            "{longname: longvalue}"
-        other-attr2
-            ="{longname: longvalue}"
-        >
-        Text
-    </div>
+  <div
+    id="a"
+    class="b"
+    other-attr=
+      "{longname: longvalue}"
+    other-attr2
+      ="{longname: longvalue}"
+    >
+    Text
+  </div>
 </template>
 ```
 
@@ -91,16 +96,16 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 
 ```html
 <template>
-    <div
-            id="a"
-            class="b"
-            other-attr=
-                "{longname: longvalue}"
-            other-attr2
-                ="{longname: longvalue}"
-        >
-        Text
-    </div>
+  <div
+      id="a"
+      class="b"
+      other-attr=
+        "{longname: longvalue}"
+      other-attr2
+        ="{longname: longvalue}"
+    >
+    Text
+  </div>
 </template>
 ```
 
@@ -108,9 +113,9 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 
 ```html
 <template>
-    <div
-    id=""
-      class=""
-    />
+  <div
+  id=""
+    class=""
+  />
 </template>
 ```
diff --git a/lib/rules/html-indent.js b/lib/rules/html-indent.js
index f1f968ed6..db1f0c7f3 100644
--- a/lib/rules/html-indent.js
+++ b/lib/rules/html-indent.js
@@ -304,7 +304,7 @@ function create (context) {
    * @param {number} offset The offset to set.
    * @returns {void}
    */
-  function processNodeList (nodeList, leftToken, rightToken, offset) {
+  function processNodeList (nodeList, leftToken, rightToken, offset, rootNode) {
     let t
 
     if (nodeList.length >= 1) {
@@ -349,11 +349,19 @@ function create (context) {
           setOffset(baseToken, offset, leftToken)
         }
 
-        // Align the rest tokens to the first token.
+        // Set baseline
         if (nodeList.some(isBeginningOfLine)) {
           setBaseline(baseToken)
         }
-        setOffset(alignTokens, 0, baseToken)
+
+        if (rootNode) {
+          // Align tokens relatively to passed root node
+          // So it's possible to force proper position for VAttributes
+          setOffset(alignTokens, offset, template.getFirstToken(rootNode))
+        } else {
+          // Align the rest tokens to the first token.
+          setOffset(alignTokens, 0, baseToken)
+        }
       }
     }
 
@@ -760,7 +768,7 @@ function create (context) {
       const openToken = template.getFirstToken(node)
       const closeToken = template.getLastToken(node)
 
-      processNodeList(node.attributes, openToken, null, options.attribute)
+      processNodeList(node.attributes, openToken, null, options.attribute, node)
       if (closeToken != null && closeToken.type.endsWith('TagClose')) {
         setOffset(closeToken, options.closeBracket, openToken)
       }
diff --git a/tests/lib/rules/html-indent.js b/tests/lib/rules/html-indent.js
index d7e78407b..37216890e 100644
--- a/tests/lib/rules/html-indent.js
+++ b/tests/lib/rules/html-indent.js
@@ -90,14 +90,14 @@ tester.run('html-indent', rule, {
     unIndent`
       <template>
         <div a="a"
-             b="b"
-             c=
-               "c"
-             d
-               ="d"
-             e
-             f
-               =
+          b="b"
+          c=
+            "c"
+          d
+            ="d"
+          e
+          f
+            =
         ></div>
       </template>
     `,
@@ -1467,6 +1467,28 @@ tester.run('html-indent', rule, {
           "
         />
       </template>
+    `,
+    unIndent`
+      <template>
+        <div a="a"
+          :b="b"
+          c="c"
+        ></div>
+      </template>
+    `,
+    unIndent`
+      <template>
+        <div
+          a="a"
+          b="b"
+        ></div>
+      </template>
+    `,
+    unIndent`
+      <template>
+        <div a="a" b="b">
+        </div>
+      </template>
     `
   ],
 

From 2972413da9598ac3a1a46e62efb082c7378cbb8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Thu, 21 Dec 2017 19:59:30 +0100
Subject: [PATCH 2/5] Add test with errors

---
 tests/lib/rules/html-indent.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/tests/lib/rules/html-indent.js b/tests/lib/rules/html-indent.js
index 37216890e..8bd7b6388 100644
--- a/tests/lib/rules/html-indent.js
+++ b/tests/lib/rules/html-indent.js
@@ -1542,6 +1542,40 @@ tester.run('html-indent', rule, {
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 11 }
       ]
     },
+    {
+      code: unIndent`
+        <template>
+            <div a="a"
+                b="b"
+                c=
+                    "c"
+            >
+                Text
+            </div>
+        </template>
+      `,
+      output: unIndent`
+        <template>
+          <div a="a"
+            b="b"
+            c=
+              "c"
+          >
+            Text
+          </div>
+        </template>
+      `,
+      options: [2],
+      errors: [
+        { message: 'Expected indentation of 2 spaces but found 4 spaces.', line: 2 },
+        { message: 'Expected indentation of 4 spaces but found 8 spaces.', line: 3 },
+        { message: 'Expected indentation of 4 spaces but found 8 spaces.', line: 4 },
+        { message: 'Expected indentation of 6 spaces but found 12 spaces.', line: 5 },
+        { message: 'Expected indentation of 2 spaces but found 4 spaces.', line: 6 },
+        { message: 'Expected indentation of 4 spaces but found 8 spaces.', line: 7 },
+        { message: 'Expected indentation of 2 spaces but found 4 spaces.', line: 8 }
+      ]
+    },
 
     // VEndTag
     {

From c355868fd0834bdb8b80c33c6b60849382c83ae3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Sat, 30 Dec 2017 18:25:59 +0100
Subject: [PATCH 3/5] Add alignAttributesVertically option

---
 docs/rules/html-indent.md      | 26 +++++++++-
 lib/rules/html-indent.js       |  7 ++-
 tests/lib/rules/html-indent.js | 92 ++++++++++++++++++++++++++++++----
 3 files changed, 112 insertions(+), 13 deletions(-)

diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index d8ab9226f..51d7cca65 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -35,7 +35,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
     Hello.
   </div>
   <div class="foo"
-    :foo="bar"
+       :foo="bar"
   >
     World.
   </div>
@@ -65,6 +65,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   "vue/html-indent": ["error", type, {
     "attribute": 1,
     "closeBracket": 0,
+    "alignAttributesVertically": true,
     "ignores": []
   }]
 }
@@ -73,6 +74,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 - `type` (`number | "tab"`) ... The type of indentation. Default is `2`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent.
 - `attribute` (`integer`) ... The multiplier of indentation for attributes. Default is `1`.
 - `closeBracket` (`integer`) ... The multiplier of indentation for right brackets. Default is `0`.
+- `alignAttributesVertically` (`boolean`) ... Condition for whether attributes should be vertically aligned to the first attribute in multiline case or not. Default is `true`
 - `ignores` (`string[]`) ... The selector to ignore nodes. The AST spec is [here](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md). You can use [esquery](https://github.com/estools/esquery#readme) to select nodes. Default is an empty array.
 
 :+1: Examples of **correct** code for `{attribute: 1, closeBracket: 1}`:
@@ -119,3 +121,25 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   />
 </template>
 ```
+
+:+1: Examples of **correct** code for `{alignAttributesVertically: true}`:
+
+```html
+<template>
+  <div id=""
+       class=""
+       some-attr=""
+  />
+</template>
+```
+
+:+1: Examples of **correct** code for `{alignAttributesVertically: false}`:
+
+```html
+<template>
+  <div id=""
+    class=""
+    some-attr=""
+  />
+</template>
+```
diff --git a/lib/rules/html-indent.js b/lib/rules/html-indent.js
index db1f0c7f3..e5f32eadc 100644
--- a/lib/rules/html-indent.js
+++ b/lib/rules/html-indent.js
@@ -34,6 +34,7 @@ function parseOptions (type, options) {
     attribute: 1,
     closeBracket: 0,
     switchCase: 0,
+    alignAttributesVertically: true,
     ignores: []
   }
 
@@ -53,6 +54,9 @@ function parseOptions (type, options) {
   if (Number.isSafeInteger(options.switchCase)) {
     ret.switchCase = options.switchCase
   }
+  if (options.alignAttributesVertically != null) {
+    ret.alignAttributesVertically = options.alignAttributesVertically
+  }
   if (options.ignores != null) {
     ret.ignores = options.ignores
   }
@@ -354,7 +358,7 @@ function create (context) {
           setBaseline(baseToken)
         }
 
-        if (rootNode) {
+        if (!options.alignAttributesVertically && rootNode) {
           // Align tokens relatively to passed root node
           // So it's possible to force proper position for VAttributes
           setOffset(alignTokens, offset, template.getFirstToken(rootNode))
@@ -1302,6 +1306,7 @@ module.exports = {
           'attribute': { type: 'integer', minimum: 0 },
           'closeBracket': { type: 'integer', minimum: 0 },
           'switchCase': { type: 'integer', minimum: 0 },
+          'alignAttributesVertically': { type: 'boolean' },
           'ignores': {
             type: 'array',
             items: {
diff --git a/tests/lib/rules/html-indent.js b/tests/lib/rules/html-indent.js
index 8bd7b6388..20088eb09 100644
--- a/tests/lib/rules/html-indent.js
+++ b/tests/lib/rules/html-indent.js
@@ -90,14 +90,14 @@ tester.run('html-indent', rule, {
     unIndent`
       <template>
         <div a="a"
-          b="b"
-          c=
-            "c"
-          d
-            ="d"
-          e
-          f
-            =
+             b="b"
+             c=
+               "c"
+             d
+               ="d"
+             e
+             f
+               =
         ></div>
       </template>
     `,
@@ -1269,6 +1269,40 @@ tester.run('html-indent', rule, {
       options: [4, { switchCase: 1 }]
     },
 
+    // options.alignAttributesVertically
+    {
+      code: unIndent`
+        <template>
+          <div a="a"
+            b="b"
+            c=
+              "c"
+            d
+              ="d"
+            e
+            f
+              =
+          ></div>
+        </template>
+      `,
+      options: [2, {
+        alignAttributesVertically: false
+      }]
+    },
+    {
+      code: unIndent`
+        <template>
+          <div a="a"
+            :b="b"
+            c="c"
+          ></div>
+        </template>
+      `,
+      options: [2, {
+        alignAttributesVertically: false
+      }]
+    },
+
     // Comments
     unIndent`
       <template>
@@ -1471,8 +1505,8 @@ tester.run('html-indent', rule, {
     unIndent`
       <template>
         <div a="a"
-          :b="b"
-          c="c"
+             :b="b"
+             c="c"
         ></div>
       </template>
     `,
@@ -1542,6 +1576,40 @@ tester.run('html-indent', rule, {
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 11 }
       ]
     },
+    {
+      code: unIndent`
+        <template>
+            <div a="a"
+                b="b"
+                c=
+                    "c"
+            >
+                Text
+            </div>
+        </template>
+      `,
+      output: unIndent`
+        <template>
+          <div a="a"
+               b="b"
+               c=
+                 "c"
+          >
+            Text
+          </div>
+        </template>
+      `,
+      options: [2],
+      errors: [
+        { message: 'Expected indentation of 2 spaces but found 4 spaces.', line: 2 },
+        { message: 'Expected indentation of 7 spaces but found 8 spaces.', line: 3 },
+        { message: 'Expected indentation of 7 spaces but found 8 spaces.', line: 4 },
+        { message: 'Expected indentation of 9 spaces but found 12 spaces.', line: 5 },
+        { message: 'Expected indentation of 2 spaces but found 4 spaces.', line: 6 },
+        { message: 'Expected indentation of 4 spaces but found 8 spaces.', line: 7 },
+        { message: 'Expected indentation of 2 spaces but found 4 spaces.', line: 8 }
+      ]
+    },
     {
       code: unIndent`
         <template>
@@ -1565,7 +1633,9 @@ tester.run('html-indent', rule, {
           </div>
         </template>
       `,
-      options: [2],
+      options: [2, {
+        alignAttributesVertically: false
+      }],
       errors: [
         { message: 'Expected indentation of 2 spaces but found 4 spaces.', line: 2 },
         { message: 'Expected indentation of 4 spaces but found 8 spaces.', line: 3 },

From ba013b81b968bbf9c66c9b9b8f1ec5dfe6f46e12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Sun, 31 Dec 2017 13:02:39 +0100
Subject: [PATCH 4/5] Pass alignAttributesVertically explicitly to
 processNodeList

---
 lib/rules/html-indent.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/lib/rules/html-indent.js b/lib/rules/html-indent.js
index e5f32eadc..741ad8a22 100644
--- a/lib/rules/html-indent.js
+++ b/lib/rules/html-indent.js
@@ -308,7 +308,7 @@ function create (context) {
    * @param {number} offset The offset to set.
    * @returns {void}
    */
-  function processNodeList (nodeList, leftToken, rightToken, offset, rootNode) {
+  function processNodeList (nodeList, leftToken, rightToken, offset, alignVertically = true) {
     let t
 
     if (nodeList.length >= 1) {
@@ -358,13 +358,14 @@ function create (context) {
           setBaseline(baseToken)
         }
 
-        if (!options.alignAttributesVertically && rootNode) {
+        if (alignVertically) {
+          // Align the rest tokens to the first token.
+          setOffset(alignTokens, 0, baseToken)
+        } else {
           // Align tokens relatively to passed root node
           // So it's possible to force proper position for VAttributes
+          const rootNode = nodeList && nodeList[0].parent
           setOffset(alignTokens, offset, template.getFirstToken(rootNode))
-        } else {
-          // Align the rest tokens to the first token.
-          setOffset(alignTokens, 0, baseToken)
         }
       }
     }
@@ -772,7 +773,7 @@ function create (context) {
       const openToken = template.getFirstToken(node)
       const closeToken = template.getLastToken(node)
 
-      processNodeList(node.attributes, openToken, null, options.attribute, node)
+      processNodeList(node.attributes, openToken, null, options.attribute, options.alignAttributesVertically)
       if (closeToken != null && closeToken.type.endsWith('TagClose')) {
         setOffset(closeToken, options.closeBracket, openToken)
       }

From e822a19176459fa3b9af4eecc5d1f4cdc10d2859 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Sun, 31 Dec 2017 13:11:52 +0100
Subject: [PATCH 5/5] Remove default argument value for Node 4 compatibility

---
 lib/rules/html-indent.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/rules/html-indent.js b/lib/rules/html-indent.js
index 741ad8a22..a888395f6 100644
--- a/lib/rules/html-indent.js
+++ b/lib/rules/html-indent.js
@@ -308,8 +308,9 @@ function create (context) {
    * @param {number} offset The offset to set.
    * @returns {void}
    */
-  function processNodeList (nodeList, leftToken, rightToken, offset, alignVertically = true) {
+  function processNodeList (nodeList, leftToken, rightToken, offset, alignVertically) {
     let t
+    alignVertically = alignVertically != null ? alignVertically : true
 
     if (nodeList.length >= 1) {
       let lastToken = leftToken