feat(MdMenu): new props mdCloseOnClick (#1630)

* feat(MdMenu): new props mdCloseOnClick

option for auto close after any click event

* docs(Menu): fix AutoClose component name

* fix(MdMenu): change mdCloseOnClick default to false

Author: VdustR

docs/app/pages/Components/Menu/Menu.vue

@@ -1,6 +1,7 @@
 <example src="./examples/Directions.vue" />
 <example src="./examples/Sizes.vue" />
 <example src="./examples/MenuAlignments.vue" />
+<example src="./examples/AutoClose.vue" />
 <example src="./examples/MultipleContent.vue" />
 
 <template>
@@ -33,6 +34,13 @@
       <note-block>The max-width of a menu is 280px.</note-block>
     </div>
 
+    <div class="page-container-section">
+      <h2>AutoClose</h2>
+
+      <p><code>md-menu</code> can be auto closed on click or select:</p>
+      <code-example title="Auto close menu on events" :component="examples['auto-close']" />
+    </div>
+
     <div class="page-container-section">
       <h2>Rich Content and Icon Alignment</h2>
 
@@ -71,6 +79,12 @@
             description: 'Used to show/hide a menu programatically.',
             defaults: 'false'
           },
+          {
+            name: 'md-close-on-click',
+            type: 'Boolean',
+            description: 'When this options is true, the menu will be closed after any click event.',
+            defaults: 'false'
+          },
           {
             name: 'md-close-on-select',
             type: 'Boolean',

docs/app/pages/Components/Menu/examples/AutoClose.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div>
+      <md-checkbox :value="true" v-model="closeOnClick">closeOnClick</md-checkbox>
+      <md-checkbox :value="true" v-model="closeOnSelect">closeOnSelect</md-checkbox>
+    </div>
+    <div>
+      <md-menu md-direction="bottom-end" :mdCloseOnClick="closeOnClick" :mdCloseOnSelect="closeOnSelect">
+        <md-button md-menu-trigger>Bottom End</md-button>
+
+        <md-menu-content>
+          <md-menu-item disabled @click="data = 'click disabled'">Disabled</md-menu-item>
+          <md-menu-item @click="data = 'click 1'">Click Event 1</md-menu-item>
+          <md-menu-item @click="data = 'click 2'">Click Event 2</md-menu-item>
+          <md-menu-item>Plain text</md-menu-item>
+        </md-menu-content>
+      </md-menu>
+    </div>
+    <div>{{data}}</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AutoClose',
+
+    data () {
+      return {
+        data: '',
+        closeOnClick: false,
+        closeOnSelect: true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .md-menu {
+    margin: 24px;
+  }
+</style>

src/components/MdMenu/MdMenu.vue

@@ -30,6 +30,10 @@
         type: Boolean,
         default: true
       },
+      mdCloseOnClick: {
+        type: Boolean,
+        default: false
+      },
       mdSize: {
         type: String,
         default: 'small',
@@ -56,6 +60,7 @@
           fullWidth: this.mdFullWidth,
           dense: this.mdDense,
           closeOnSelect: this.mdCloseOnSelect,
+          closeOnClick: this.mdCloseOnClick,
           bodyClickObserver: null,
           windowResizeObserver: null,
           $el: this.$el
@@ -102,6 +107,12 @@
         } else {
           this.$emit('md-opened')
         }
+      },
+      mdCloseOnSelect () {
+        this.MdMenu.closeOnSelect  = this.mdCloseOnSelect
+      },
+      mdCloseOnClick () {
+        this.MdMenu.closeOnClick  = this.mdCloseOnClick
       }
     },
     methods: {

src/components/MdMenu/MdMenuContent.vue

@@ -199,7 +199,8 @@
             $event.stopPropagation()
             let isMdMenu = this.MdMenu.$el ? this.MdMenu.$el.contains($event.target) : false
             let isMenuContentEl = this.$refs.menu ? this.$refs.menu.contains($event.target) : false
-            if (!this.$el.contains($event.target) && !isMdMenu && !isMenuContentEl) {
+            let onBackdropExpectMenu = !this.$el.contains($event.target) && !isMenuContentEl
+            if (!isMdMenu && (this.MdMenu.closeOnClick || onBackdropExpectMenu)) {
               this.MdMenu.active = false
               this.MdMenu.bodyClickObserver.destroy()
               this.MdMenu.windowResizeObserver.destroy()

src/components/MdMenu/MdMenuItem.vue

@@ -16,14 +16,38 @@
     },
     inject: ['MdMenu'],
     data: () => ({
-      listeners: {},
       highlighted: false
     }),
     computed: {
       itemClasses () {
         return {
           'md-highlight': this.highlighted
         }
+      },
+      listeners () {
+        if (this.disabled) {
+          return {}
+        }
+
+        if (!this.MdMenu.closeOnSelect) {
+          return this.$listeners
+        }
+
+        let listeners = {}
+        let listenerNames = Object.keys(this.$listeners)
+
+        listenerNames.forEach(listener => {
+          if (MdInteractionEvents.includes(listener)) {
+            listeners[listener] = $event => {
+              this.$listeners[listener]($event)
+              this.closeMenu()
+            }
+          } else {
+            listeners[listener] = this.$listeners[listener]
+          }
+        })
+
+        return listeners
       }
     },
     methods: {
@@ -41,26 +65,6 @@
         }
       }
     },
-    created () {
-      if (this.MdMenu.closeOnSelect) {
-        let listenerNames = Object.keys(this.$listeners)
-
-        listenerNames.forEach(listener => {
-          if (MdInteractionEvents.includes(listener)) {
-            this.listeners[listener] = $event => {
-              if (!this.disabled) {
-                this.$listeners[listener]($event)
-                this.closeMenu()
-              }
-            }
-          } else {
-            this.listeners[listener] = this.$listeners[listener]
-          }
-        })
-      } else {
-        this.listeners = this.$listeners
-      }
-    },
     mounted () {
       if (this.$el.children && this.$el.children[0]) {
         let listItem = this.$el.children[0]