From 9a1f3ea2aaf583d6d15a63e95f6aaac541377b9d Mon Sep 17 00:00:00 2001
From: Mats Pfeiffer <mats.pfeiffer@googlemail.com>
Date: Mon, 9 Oct 2017 17:10:06 +0200
Subject: [PATCH] Added menu component.

---
 README.md               | 11 ++++---
 src/Menu/Menu.vue       | 70 +++++++++++++++++++++++++++++++++++++++++
 src/Menu/MenuAnchor.vue | 15 +++++++++
 src/Menu/index.js       | 11 +++++++
 src/index.js            |  2 ++
 5 files changed, 104 insertions(+), 5 deletions(-)
 create mode 100644 src/Menu/Menu.vue
 create mode 100644 src/Menu/MenuAnchor.vue
 create mode 100644 src/Menu/index.js

diff --git a/README.md b/README.md
index 2b1c512aa..adfb3d111 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,7 @@ Vue.use(MaterialComponentsVue)
 * [ ] Slots for components with text / labels
 * [ ] Better implementation for css class binding in slot e.g. ListItem?
 * [x] Usage description
+* [ ] Build each component as asset
 * [ ] Implement all missing components
 * [ ] Adding testframework to project
 * [ ] Use 'ref' inside components instead of IDs?
@@ -63,19 +64,20 @@ Vue.use(MaterialComponentsVue)
 
 ### Ready to use components
 * Button
+* Card
 * Checkbox
 * Dialog
-* Card
+* Drawer --> TemporaryDrawer
 * Fab
 * FormField
 * Icon
 * IconToggle
-* Drawer --> TemporaryDrawer
+* LayoutGrid
+* List
+* Menu
 * Snackbar
 * Switch
 * Toolbar --> Fixed & Waterfall
-* LayoutGrid
-* List
 * Textfield
 
 ### Missing components
@@ -86,6 +88,5 @@ Vue.use(MaterialComponentsVue)
 * SelectMenu
 * Slider
 * Progress
-* Menus
 * Tabs
 * Typography
diff --git a/src/Menu/Menu.vue b/src/Menu/Menu.vue
new file mode 100644
index 000000000..49e6cb644
--- /dev/null
+++ b/src/Menu/Menu.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="mdc-simple-menu" :class="classes" :id="id" tabindex="-1">
+        <slot />
+    </div>
+</template>
+
+<script>
+import MDCSimpleMenu from '@material/menu'
+
+export default {
+    props: {
+        id: {
+            type: String,
+            required: false
+        },
+        open: {
+            type: Boolean,
+            required: true
+        },
+        fromTopToLeft: {
+            type: Boolean,
+            required: false
+        },
+        fromTopToRight: {
+            type: Boolean,
+            required: false
+        },
+        fromBottomLeft: {
+            type: Boolean,
+            required: false
+        },
+        fromBottomRight: {
+            type: Boolean,
+            required: false
+        }
+    },
+    data() {
+        return {
+            mdcSimpleMenu: null
+        }
+    },
+    mounted() {
+        this.mdcSimpleMenu = new MDCSimpleMenu(this.$el)
+
+        if (this.$slots.default)
+            this.$slots.default.map((n) => {
+                n.elm.classList.add('mdc-simple-menu__items')
+            })
+    },
+    destroyed() {
+        this.mdcSimpleMenu.destroy()
+    },
+    computed: {
+        classes() {
+            return {
+                'mdc-simple-menu--open': this.open,
+                'mdc-simple-menu--open-from-top-left': this.fromTopLeft,
+                'mdc-simple-menu--open-from-top-right': this.fromTopRight,
+                'mdc-simple-menu--open-from-bottom-left': this.fromBottomLeft,
+                'mdc-simple-menu--open-from-bottom-right': this.fromBottomRight
+            }
+        }
+    }
+
+}
+</script>
+
+<style lang="scss">
+@import "@material/menu/mdc-menu";
+</style>
diff --git a/src/Menu/MenuAnchor.vue b/src/Menu/MenuAnchor.vue
new file mode 100644
index 000000000..f3d697f5b
--- /dev/null
+++ b/src/Menu/MenuAnchor.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="mdc-menu-anchor">
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+@import "@material/menu/mdc-menu";
+</style>
diff --git a/src/Menu/index.js b/src/Menu/index.js
new file mode 100644
index 000000000..52f19974c
--- /dev/null
+++ b/src/Menu/index.js
@@ -0,0 +1,11 @@
+import Menu from './Menu'
+import MenuAnchor from './MenuAnchor'
+
+export { Menu, MenuAnchor }
+
+export default {
+  install (vm) {
+    vm.component('m-menu', Menu)
+    vm.component('m-menu-anchor', MenuAnchor)
+  }
+}
diff --git a/src/index.js b/src/index.js
index 8d6bae24e..442454de9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import Icon from './Icon'
 import IconToggle from './IconToggle'
 import LayoutGrid from './LayoutGrid'
 import List from './List'
+import Menu from './Menu'
 import Snackbar from './Snackbar'
 import Switch from './Switch'
 import TemporaryDrawer from './Drawer'
@@ -26,6 +27,7 @@ const plugin = {
     vue.use(IconToggle)
     vue.use(LayoutGrid)
     vue.use(List)
+    vue.use(Menu)
     vue.use(Snackbar)
     vue.use(Switch)
     vue.use(TemporaryDrawer)