refactor(menu): Implement two-way binding for open prop (#83)

BREAKING CHANGES: Public component methods for open / close no longer exist. Please change your templates to use v-model instead.
matsp · Apr 17, 2018 · f1d20a2 · f1d20a2
1 parent 48b4e7c
commit f1d20a2
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 49 deletions.
diff --git a/components/menu/Menu.vue b/components/menu/Menu.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     class="mdc-menu"
-    :class="classes"
     tabindex="-1"
     @MDCMenu:selected="onSelect"
     @MDCMenu:cancel="onCancel">
@@ -17,11 +16,11 @@ import themeClassMixin from '../base/themeClassMixin.js'
 export default {
   mixins: [themeClassMixin],
   model: {
-    prop: 'selected',
+    prop: 'open',
     event: 'change'
   },
   props: {
-    startOpen: {
+    open: {
       type: Boolean,
       default: false
     },
@@ -36,12 +35,23 @@ export default {
     }
   },
   computed: {
-    classes () {
-      return {
-        'mdc-menu--open': this.startOpen
+    model: {
+      get () {
+        return this.open
+      },
+      set (value) {
+        this.$emit('change', value)
       }
     }
   },
+  watch: {
+    open () {
+      this.mdcMenu.open = this.open
+    },
+    quickOpen () {
+      this.mdcMenu.quickOpen = this.quickOpen
+    }
+  },
   mounted () {
     if (this.$slots.default) {
       this.$slots.default.map(n => {
@@ -51,28 +61,25 @@ export default {
 
       this.$slots.default[0].componentOptions.children
         .filter(n => n.elm.className.indexOf('mdc-list-item') > -1)
-        .map(n => n.elm.setAttribute('tabindex', '0'))
+        .map(n => {
+          n.elm.setAttribute('tabindex', '0')
+          n.elm.setAttribute('role', 'menuitem')
+        })
     }
 
     this.mdcMenu = MDCMenu.attachTo(this.$el)
-    this.mdcMenu.open = this.open
-    this.mdcMenu.quickOpen = this.quickOpen
   },
   beforeDestroy () {
     this.mdcMenu.destroy()
   },
   methods: {
-    show () {
-      this.mdcMenu.show()
-    },
-    hide () {
-      this.mdcMenu.hide()
-    },
     onSelect (event) {
-      this.$emit('change', event.detail.index)
+      this.model = false
+      this.$emit('select', event.detail)
     },
-    onCancel (event) {
-      this.$emit('canceled')
+    onCancel () {
+      this.model = false
+      this.$emit('cancel')
     }
   }
 }

diff --git a/components/menu/README.md b/components/menu/README.md
@@ -4,51 +4,40 @@
 
 ```html
 <m-menu-anchor>
-    <m-button @click="showMenu">open</m-button>
-    <m-menu ref="menu" v-model="selectedMenuEntry">
-      <m-list>
-        <m-list-item @click="clicked">
-            Entry 1
-        </m-list-item>
-        <m-list-divider />
-        <m-list-item>
-            Entry 2
-        </m-list-item>
-      </m-list>
-    </m-menu>
+  <m-button raised interactive @click="isMenuOpen=true">open</m-button>
+  <m-menu v-model="isMenuOpen">
+    <m-list>
+      <m-list-item interactive>Entry 1</m-list-item>
+      <m-list-divider/>
+      <m-list-item interactive>Entry 2</m-list-item>
+    </m-list>
+  </m-menu>
 </m-menu-anchor>
 ```
 
 ### Script
 
 ```javascript
-methods: {
-    clicked() {
-        // do something
-    },
-    showMenu() {
-        this.$refs.menu.show()
-    }
-},
 data() {
     return {
-        selectedMenuEntry: null
+        isMenuOpen: false
     }
 }
 
 ```
 
-### Props & methods
+### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| startOpen | Boolean | false | whether the menu should be open at start |
 | quickOpen | Boolean | false | deactivates menu animation |
 
-| Method | Description |
-|--------|-------------|
-| show | show the menu |
-| hide | hide the menu |
+### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| select | { index: Number, item: HTMLElement } | emitted when menu item is selected |
+| cancel | - | emitted when menu interaction is cancelled |
 
 ### Slots
 
@@ -60,10 +49,10 @@ data() {
 
 ### Slots
 
-| Slot | Prop dependencies | Description |
-|------|-------------------|-------------|
-| default | - | should be the menu |
+| Slot | Description |
+|------|-------------|
+| default | should be the menu |
 
 ### Reference
 
-- https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu
+- https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu