From a940da8dcba2d07ee4f2cfec4dd01b599b47102f Mon Sep 17 00:00:00 2001
From: Jonathan Santerre <jonathan@santerre.dev>
Date: Sat, 7 Dec 2019 14:27:25 -0500
Subject: [PATCH 1/7] New: vue/html-button-has-type rule (fixes #894)

---
 docs/rules/README.md                    |   1 +
 docs/rules/html-button-has-type.md      |  62 ++++++++++
 docs/rules/script-indent.md             |   1 -
 lib/configs/recommended.js              |   1 +
 lib/index.js                            |   1 +
 lib/rules/html-button-has-type.js       |  96 +++++++++++++++
 tests/lib/rules/html-button-has-type.js | 157 ++++++++++++++++++++++++
 7 files changed, 318 insertions(+), 1 deletion(-)
 create mode 100644 docs/rules/html-button-has-type.md
 create mode 100644 lib/rules/html-button-has-type.js
 create mode 100644 tests/lib/rules/html-button-has-type.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index e1c88ff56..cb573a90c 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -118,6 +118,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
+| [vue/html-button-has-type](./html-button-has-type.md) | Prevent usage of button without an explicit type attribute |  |
 | [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
 | [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
 | [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template |  |
diff --git a/docs/rules/html-button-has-type.md b/docs/rules/html-button-has-type.md
new file mode 100644
index 000000000..67a3c7dac
--- /dev/null
+++ b/docs/rules/html-button-has-type.md
@@ -0,0 +1,62 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/html-button-has-type
+description: Prevent usage of button without an explicit type attribute
+---
+# vue/html-button-has-type
+> Prevent usage of button without an explicit type attribute
+
+- :gear: This rule is included in `"plugin:vue/recommended"`.
+
+Forgetting the type attribute on a button defaults it to being a submit type. 
+This is nearly never what is intended, especially in your average one-page application.
+
+## :book: Rule Details
+
+This rule aims to warn if no type or an invalid type is used on a button type attribute.
+
+<eslint-code-block :rules="{'vue/html-button-has-type': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button type="button">Hello World</button>
+  <button type="submit">Hello World</button>
+  <button type="reset">Hello World</button>
+
+  <!-- ✗ BAD -->
+  <button>Hello World</button>
+  <button type="">Hello World</button>
+  <button type="foo">Hello World</button>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/html-button-has-type": ["error", {
+    "button": true,
+    "submit": true,
+    "reset": true
+  }]
+}
+```
+
+- `button` ... `<button type="button"></button>`
+    - `true` (default) ... allow value `button`.
+    - `false"` ... disallow value `button`.
+- `sumbit` ... `<button type="sumbit"></button>`
+    - `true` (default) ... allow value `submit`.
+    - `false"` ... disallow value `submit`.
+- `reset` ... `<button type="reset"></button>`
+    - `true` (default) ... allow value `reset`.
+    - `false"` ... disallow value `reset`.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-button-has-type.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-button-has-type.js)
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index c28120b7d..59934faec 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -115,7 +115,6 @@ This rule only checks `.vue` files and does not interfere with other `.js` files
 
 - [indent](https://eslint.org/docs/rules/indent)
 - [vue/html-indent](./html-indent.md)
-- [@typescript-eslint/indent](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/indent.md). The `vue/script-indent` rule does not understand TypeScript AST. Please use `@typescript-eslint/indent` rule instead of this one inside of `<script lang="ts"`
 
 ## :mag: Implementation
 
diff --git a/lib/configs/recommended.js b/lib/configs/recommended.js
index 51bcc2e8c..f8e944922 100644
--- a/lib/configs/recommended.js
+++ b/lib/configs/recommended.js
@@ -7,6 +7,7 @@ module.exports = {
   extends: require.resolve('./strongly-recommended'),
   rules: {
     'vue/attributes-order': 'warn',
+    'vue/html-button-has-type': 'warn',
     'vue/no-v-html': 'warn',
     'vue/order-in-components': 'warn',
     'vue/this-in-template': 'warn'
diff --git a/lib/index.js b/lib/index.js
index d2d3d0e15..c42fe2583 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -19,6 +19,7 @@ module.exports = {
     'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),
     'dot-location': require('./rules/dot-location'),
     'eqeqeq': require('./rules/eqeqeq'),
+    'html-button-has-type': require('./rules/html-button-has-type'),
     'html-closing-bracket-newline': require('./rules/html-closing-bracket-newline'),
     'html-closing-bracket-spacing': require('./rules/html-closing-bracket-spacing'),
     'html-end-tags': require('./rules/html-end-tags'),
diff --git a/lib/rules/html-button-has-type.js b/lib/rules/html-button-has-type.js
new file mode 100644
index 000000000..ac7584947
--- /dev/null
+++ b/lib/rules/html-button-has-type.js
@@ -0,0 +1,96 @@
+/**
+ * @fileoverview Prevent usage of button without an explicit type attribute
+ * @author Jonathan Santerre
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const optionDefaults = {
+  button: true,
+  submit: true,
+  reset: true
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Prevent usage of button without an explicit type attribute',
+      category: 'recommended',
+      url: 'https://eslint.vuejs.org/rules/html-button-has-type.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          button: {
+            default: optionDefaults.button,
+            type: 'boolean'
+          },
+          submit: {
+            default: optionDefaults.submit,
+            type: 'boolean'
+          },
+          reset: {
+            default: optionDefaults.reset,
+            type: 'boolean'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      missingTypeAttribute: 'Missing an explicit type attribute for button.',
+      invalidTypeAttribute: '{{value}} is an invalid value for button type attribute.',
+      forbiddenTypeAttribute: '{{value}} is a forbidden value for button type attribute.',
+      emptyTypeAttribute: 'A value must be set for button type attribute.'
+    }
+  },
+
+  create: function (context) {
+    const configuration = Object.assign({}, optionDefaults, context.options[0]);
+    return utils.defineTemplateBodyVisitor(context, {
+      VElement (node) {
+        if (utils.isHtmlElementNode(node) && node.name === 'button') {
+          if (!utils.hasAttribute(node, 'type')) {
+            context.report({
+              node: node.startTag,
+              loc: node.startTag.loc,
+              messageId: 'missingTypeAttribute'
+            })
+          } else {
+            const value = utils.getAttribute(node, 'type').value.value
+            if (value === '') {
+              context.report({
+                node,
+                messageId: 'emptyTypeAttribute',
+              })
+            } else if (!(value in configuration)) {
+              context.report({
+                node,
+                messageId: 'invalidTypeAttribute',
+                data: { value }
+              })
+            } else if (!configuration[value]) {
+              context.report({
+                node,
+                messageId: 'forbiddenTypeAttribute',
+                data: { value }
+              })
+            }
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/html-button-has-type.js b/tests/lib/rules/html-button-has-type.js
new file mode 100644
index 000000000..325b5c002
--- /dev/null
+++ b/tests/lib/rules/html-button-has-type.js
@@ -0,0 +1,157 @@
+/**
+ * @fileoverview Prevent usage of button without an explicit type attribute
+ * @author Jonathan Santerre
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/html-button-has-type')
+
+var RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015 }
+})
+ruleTester.run('html-button-has-type', rule, {
+
+  valid: [
+    {
+      filename: 'test.vue',
+      code: '<template><button type="button">Hello World</button></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button type="submit">Hello World</button></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button type="reset">Hello World</button></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><slot><button type="button">Hello World</button></slot></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+                <button type="button">Hello World</button>
+                <button type="submit">Hello World</button>
+                <button type="reset">Hello World</button>
+             </template>`
+    },
+    {
+      filename: 'test.vue',
+      code: ''
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><button>Hello World</button></template>',
+      errors: [{
+        message: 'Missing an explicit type attribute for button.'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button type="">Hello World</button></template>',
+      errors: [{
+        message: 'A value must be set for button type attribute.'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button type="foo">Hello World</button></template>',
+      errors: [{
+        message: 'foo is an invalid value for button type attribute.'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      options: [{ button: false }],
+      code: '<template><button type="button">Hello World</button></template>',
+      errors: [{
+        message: 'button is a forbidden value for button type attribute.'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      options: [{ submit: false }],
+      code: '<template><button type="submit">Hello World</button></template>',
+      errors: [{
+        message: 'submit is a forbidden value for button type attribute.'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      options: [{ reset: false }],
+      code: '<template><button type="reset">Hello World</button></template>',
+      errors: [{
+        message: 'reset is a forbidden value for button type attribute.'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      options: [{ button: false, submit: false, reset: false }],
+      code: `<template>
+                <button type="button">Hello World</button>
+                <button type="submit">Hello World</button>
+                <button type="reset">Hello World</button>
+             </template>`,
+      errors: [
+        {
+          message: 'button is a forbidden value for button type attribute.'
+        },
+        {
+          message: 'submit is a forbidden value for button type attribute.'
+        },
+        {
+          message: 'reset is a forbidden value for button type attribute.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      options: [{ button: true, submit: true, reset: false }],
+      code: `<template>
+                <button type="button">Hello World</button>
+                <button type="submit">Hello World</button>
+                <button type="reset">Hello World</button>
+                <button type="">Hello World</button>
+                <button type="foo">Hello World</button>
+             </template>`,
+      errors: [
+        {
+          message: 'reset is a forbidden value for button type attribute.'
+        },
+        {
+          message: 'A value must be set for button type attribute.'
+        },
+        {
+          message: 'foo is an invalid value for button type attribute.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button>Hello World</button><button>Hello World</button></template>',
+      errors: [
+        {
+          message: 'Missing an explicit type attribute for button.'
+        },
+        {
+          message: 'Missing an explicit type attribute for button.'
+        }
+      ]
+    }
+  ]
+})

From 3d010f78486c290a6b4ede316c14f5da5ee535dd Mon Sep 17 00:00:00 2001
From: Jonathan Santerre <jonathan@santerre.dev>
Date: Sat, 7 Dec 2019 14:40:13 -0500
Subject: [PATCH 2/7] more precise error location

---
 lib/rules/html-button-has-type.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/lib/rules/html-button-has-type.js b/lib/rules/html-button-has-type.js
index ac7584947..404bb2f15 100644
--- a/lib/rules/html-button-has-type.js
+++ b/lib/rules/html-button-has-type.js
@@ -69,23 +69,24 @@ module.exports = {
               messageId: 'missingTypeAttribute'
             })
           } else {
-            const value = utils.getAttribute(node, 'type').value.value
-            if (value === '') {
+            const value = utils.getAttribute(node, 'type').value
+            const strValue = value.value
+            if (strValue === '') {
               context.report({
-                node,
-                messageId: 'emptyTypeAttribute',
+                node: value,
+                messageId: 'emptyTypeAttribute'
               })
-            } else if (!(value in configuration)) {
+            } else if (!(strValue in configuration)) {
               context.report({
-                node,
+                node: value,
                 messageId: 'invalidTypeAttribute',
-                data: { value }
+                data: { value: strValue }
               })
-            } else if (!configuration[value]) {
+            } else if (!configuration[strValue]) {
               context.report({
-                node,
+                node: value,
                 messageId: 'forbiddenTypeAttribute',
-                data: { value }
+                data: { value: strValue }
               })
             }
           }

From 70544bfaf08b3d74c75faab717841879af151fe0 Mon Sep 17 00:00:00 2001
From: Jonathan Santerre <jonathan@santerre.dev>
Date: Sun, 8 Dec 2019 11:10:13 -0500
Subject: [PATCH 3/7] revert npm run update deleted script indent doc ref

---
 docs/rules/script-indent.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index 59934faec..c28120b7d 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -115,6 +115,7 @@ This rule only checks `.vue` files and does not interfere with other `.js` files
 
 - [indent](https://eslint.org/docs/rules/indent)
 - [vue/html-indent](./html-indent.md)
+- [@typescript-eslint/indent](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/indent.md). The `vue/script-indent` rule does not understand TypeScript AST. Please use `@typescript-eslint/indent` rule instead of this one inside of `<script lang="ts"`
 
 ## :mag: Implementation
 

From 118411e56b7c38398fef71c3b4b60650c8022435 Mon Sep 17 00:00:00 2001
From: Jonathan Santerre <jonathan@santerre.dev>
Date: Sun, 8 Dec 2019 11:28:48 -0500
Subject: [PATCH 4/7] fix: eslint-plugin-import when running lint

---
 .eslintignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintignore b/.eslintignore
index 20f3203c8..1905aa4a8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,7 +2,7 @@
 /coverage
 /node_modules
 /tests/fixtures
-/tests/integrations/*/node_modules
+/tests/integrations/eslint-plugin-import
 
 !.vuepress
 /docs/.vuepress/dist

From c8e278cebeef4b0bee8e22819baf5d4f6441d915 Mon Sep 17 00:00:00 2001
From: Jonathan Santerre <jonathan@santerre.dev>
Date: Sun, 8 Dec 2019 11:29:03 -0500
Subject: [PATCH 5/7] fix lint errors

---
 lib/rules/html-button-has-type.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/rules/html-button-has-type.js b/lib/rules/html-button-has-type.js
index 404bb2f15..af207746c 100644
--- a/lib/rules/html-button-has-type.js
+++ b/lib/rules/html-button-has-type.js
@@ -24,7 +24,7 @@ module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description: 'Prevent usage of button without an explicit type attribute',
+      description: 'disallow usage of button without an explicit type attribute',
       category: 'recommended',
       url: 'https://eslint.vuejs.org/rules/html-button-has-type.html'
     },
@@ -58,7 +58,7 @@ module.exports = {
   },
 
   create: function (context) {
-    const configuration = Object.assign({}, optionDefaults, context.options[0]);
+    const configuration = Object.assign({}, optionDefaults, context.options[0])
     return utils.defineTemplateBodyVisitor(context, {
       VElement (node) {
         if (utils.isHtmlElementNode(node) && node.name === 'button') {

From b8cf58f0205c317c941190a88c9a19626970debe Mon Sep 17 00:00:00 2001
From: Jonathan Santerre <jonathan@santerre.dev>
Date: Sun, 8 Dec 2019 11:29:40 -0500
Subject: [PATCH 6/7] update readme and docs

---
 docs/rules/README.md               | 2 +-
 docs/rules/html-button-has-type.md | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index cb573a90c..3f62d4bee 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -118,7 +118,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
-| [vue/html-button-has-type](./html-button-has-type.md) | Prevent usage of button without an explicit type attribute |  |
+| [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute |  |
 | [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
 | [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
 | [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template |  |
diff --git a/docs/rules/html-button-has-type.md b/docs/rules/html-button-has-type.md
index 67a3c7dac..29af2e625 100644
--- a/docs/rules/html-button-has-type.md
+++ b/docs/rules/html-button-has-type.md
@@ -2,10 +2,10 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/html-button-has-type
-description: Prevent usage of button without an explicit type attribute
+description: disallow usage of button without an explicit type attribute
 ---
 # vue/html-button-has-type
-> Prevent usage of button without an explicit type attribute
+> disallow usage of button without an explicit type attribute
 
 - :gear: This rule is included in `"plugin:vue/recommended"`.
 

From bf0cb8c3fa03030141a3d6a8c5fbf27d60c00f06 Mon Sep 17 00:00:00 2001
From: Jonathan Santerre <jonathan@santerre.dev>
Date: Sun, 8 Dec 2019 13:48:54 -0500
Subject: [PATCH 7/7] Support bind type attribute

---
 lib/rules/html-button-has-type.js       | 69 +++++++++++++------------
 tests/lib/rules/html-button-has-type.js | 13 +++++
 2 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/lib/rules/html-button-has-type.js b/lib/rules/html-button-has-type.js
index af207746c..fdf06b212 100644
--- a/lib/rules/html-button-has-type.js
+++ b/lib/rules/html-button-has-type.js
@@ -1,6 +1,6 @@
 /**
- * @fileoverview Prevent usage of button without an explicit type attribute
- * @author Jonathan Santerre
+ * @fileoverview Disallow usage of button without an explicit type attribute
+ * @author Jonathan Santerre <jonathan@santerre.dev>
  */
 'use strict'
 
@@ -59,37 +59,42 @@ module.exports = {
 
   create: function (context) {
     const configuration = Object.assign({}, optionDefaults, context.options[0])
+
+    function report (node, messageId, data) {
+      context.report({
+        node,
+        messageId,
+        data
+      })
+    }
+
+    function validateAttribute (attribute) {
+      const value = attribute.value
+      const strValue = value.value
+      if (strValue === '') {
+        report(value, 'emptyTypeAttribute')
+      } else if (!(strValue in configuration)) {
+        report(value, 'invalidTypeAttribute', { value: strValue })
+      } else if (!configuration[strValue]) {
+        report(value, 'forbiddenTypeAttribute', { value: strValue })
+      }
+    }
+
+    function validateDirective (directive) {
+      const value = directive.value
+      if (!value.expression) {
+        report(value, 'emptyTypeAttribute')
+      }
+    }
+
     return utils.defineTemplateBodyVisitor(context, {
-      VElement (node) {
-        if (utils.isHtmlElementNode(node) && node.name === 'button') {
-          if (!utils.hasAttribute(node, 'type')) {
-            context.report({
-              node: node.startTag,
-              loc: node.startTag.loc,
-              messageId: 'missingTypeAttribute'
-            })
-          } else {
-            const value = utils.getAttribute(node, 'type').value
-            const strValue = value.value
-            if (strValue === '') {
-              context.report({
-                node: value,
-                messageId: 'emptyTypeAttribute'
-              })
-            } else if (!(strValue in configuration)) {
-              context.report({
-                node: value,
-                messageId: 'invalidTypeAttribute',
-                data: { value: strValue }
-              })
-            } else if (!configuration[strValue]) {
-              context.report({
-                node: value,
-                messageId: 'forbiddenTypeAttribute',
-                data: { value: strValue }
-              })
-            }
-          }
+      "VElement[name='button']" (node) {
+        if (utils.hasAttribute(node, 'type')) {
+          validateAttribute(utils.getAttribute(node, 'type'))
+        } else if (utils.hasDirective(node, 'bind', 'type')) {
+          validateDirective(utils.getDirective(node, 'bind', 'type'))
+        } else {
+          report(node, 'missingTypeAttribute')
         }
       }
     })
diff --git a/tests/lib/rules/html-button-has-type.js b/tests/lib/rules/html-button-has-type.js
index 325b5c002..4fd40d2ad 100644
--- a/tests/lib/rules/html-button-has-type.js
+++ b/tests/lib/rules/html-button-has-type.js
@@ -47,6 +47,10 @@ ruleTester.run('html-button-has-type', rule, {
                 <button type="reset">Hello World</button>
              </template>`
     },
+    {
+      filename: 'test.vue',
+      code: `<template><button :type="buttonType">Hello World</button></template>`
+    },
     {
       filename: 'test.vue',
       code: ''
@@ -152,6 +156,15 @@ ruleTester.run('html-button-has-type', rule, {
           message: 'Missing an explicit type attribute for button.'
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><button :type="">Hello World</button></template>`,
+      errors: [
+        {
+          message: 'A value must be set for button type attribute.'
+        }
+      ]
     }
   ]
 })