Skip to content
This repository was archived by the owner on Nov 30, 2020. It is now read-only.

Commit f1d20a2

Browse files
committed
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.
1 parent 48b4e7c commit f1d20a2

File tree

2 files changed

+45
-49
lines changed

2 files changed

+45
-49
lines changed

components/menu/Menu.vue

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<template>
22
<div
33
class="mdc-menu"
4-
:class="classes"
54
tabindex="-1"
65
@MDCMenu:selected="onSelect"
76
@MDCMenu:cancel="onCancel">
@@ -17,11 +16,11 @@ import themeClassMixin from '../base/themeClassMixin.js'
1716
export default {
1817
mixins: [themeClassMixin],
1918
model: {
20-
prop: 'selected',
19+
prop: 'open',
2120
event: 'change'
2221
},
2322
props: {
24-
startOpen: {
23+
open: {
2524
type: Boolean,
2625
default: false
2726
},
@@ -36,12 +35,23 @@ export default {
3635
}
3736
},
3837
computed: {
39-
classes () {
40-
return {
41-
'mdc-menu--open': this.startOpen
38+
model: {
39+
get () {
40+
return this.open
41+
},
42+
set (value) {
43+
this.$emit('change', value)
4244
}
4345
}
4446
},
47+
watch: {
48+
open () {
49+
this.mdcMenu.open = this.open
50+
},
51+
quickOpen () {
52+
this.mdcMenu.quickOpen = this.quickOpen
53+
}
54+
},
4555
mounted () {
4656
if (this.$slots.default) {
4757
this.$slots.default.map(n => {
@@ -51,28 +61,25 @@ export default {
5161
5262
this.$slots.default[0].componentOptions.children
5363
.filter(n => n.elm.className.indexOf('mdc-list-item') > -1)
54-
.map(n => n.elm.setAttribute('tabindex', '0'))
64+
.map(n => {
65+
n.elm.setAttribute('tabindex', '0')
66+
n.elm.setAttribute('role', 'menuitem')
67+
})
5568
}
5669
5770
this.mdcMenu = MDCMenu.attachTo(this.$el)
58-
this.mdcMenu.open = this.open
59-
this.mdcMenu.quickOpen = this.quickOpen
6071
},
6172
beforeDestroy () {
6273
this.mdcMenu.destroy()
6374
},
6475
methods: {
65-
show () {
66-
this.mdcMenu.show()
67-
},
68-
hide () {
69-
this.mdcMenu.hide()
70-
},
7176
onSelect (event) {
72-
this.$emit('change', event.detail.index)
77+
this.model = false
78+
this.$emit('select', event.detail)
7379
},
74-
onCancel (event) {
75-
this.$emit('canceled')
80+
onCancel () {
81+
this.model = false
82+
this.$emit('cancel')
7683
}
7784
}
7885
}

components/menu/README.md

Lines changed: 20 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,51 +4,40 @@
44

55
```html
66
<m-menu-anchor>
7-
<m-button @click="showMenu">open</m-button>
8-
<m-menu ref="menu" v-model="selectedMenuEntry">
9-
<m-list>
10-
<m-list-item @click="clicked">
11-
Entry 1
12-
</m-list-item>
13-
<m-list-divider />
14-
<m-list-item>
15-
Entry 2
16-
</m-list-item>
17-
</m-list>
18-
</m-menu>
7+
<m-button raised interactive @click="isMenuOpen=true">open</m-button>
8+
<m-menu v-model="isMenuOpen">
9+
<m-list>
10+
<m-list-item interactive>Entry 1</m-list-item>
11+
<m-list-divider/>
12+
<m-list-item interactive>Entry 2</m-list-item>
13+
</m-list>
14+
</m-menu>
1915
</m-menu-anchor>
2016
```
2117

2218
### Script
2319

2420
```javascript
25-
methods: {
26-
clicked() {
27-
// do something
28-
},
29-
showMenu() {
30-
this.$refs.menu.show()
31-
}
32-
},
3321
data() {
3422
return {
35-
selectedMenuEntry: null
23+
isMenuOpen: false
3624
}
3725
}
3826

3927
```
4028

41-
### Props & methods
29+
### Props
4230

4331
| Prop | Type | Default | Description |
4432
|------|------|---------|-------------|
45-
| startOpen | Boolean | false | whether the menu should be open at start |
4633
| quickOpen | Boolean | false | deactivates menu animation |
4734

48-
| Method | Description |
49-
|--------|-------------|
50-
| show | show the menu |
51-
| hide | hide the menu |
35+
### Events
36+
37+
| Event | Payload | Description |
38+
|-------|---------|-------------|
39+
| select | { index: Number, item: HTMLElement } | emitted when menu item is selected |
40+
| cancel | - | emitted when menu interaction is cancelled |
5241

5342
### Slots
5443

@@ -60,10 +49,10 @@ data() {
6049

6150
### Slots
6251

63-
| Slot | Prop dependencies | Description |
64-
|------|-------------------|-------------|
65-
| default | - | should be the menu |
52+
| Slot | Description |
53+
|------|-------------|
54+
| default | should be the menu |
6655

6756
### Reference
6857

69-
- https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu
58+
- https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu

0 commit comments

Comments
 (0)