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

BREAKING CHANGES: The toggle methods no longer exist, please use v-model instead.
matsp · Mar 29, 2018 · fe246f2 · fe246f2
1 parent 2ac0fff
commit fe246f2
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 42 deletions.
diff --git a/components/drawer/DrawerPersistent/DrawerPersistent.vue b/components/drawer/DrawerPersistent/DrawerPersistent.vue
@@ -1,7 +1,7 @@
 <template>
   <aside
     class="mdc-drawer mdc-drawer--persistent"
-    v-on="$listeners">
+    @MDCPersistentDrawer:close="closeDrawer()">
     <nav class="mdc-drawer__drawer">
       <slot name="toolbarSpacer" />
       <slot name="header" />
@@ -18,29 +18,45 @@ import themeClassMixin from '../../base/themeClassMixin.js'
 export default {
   mixins: [themeClassMixin],
   props: {
-    initialOpen: {
+    open: {
       type: Boolean,
       default: true
     }
   },
+  model: {
+    prop: 'open',
+    event: 'change'
+  },
   data () {
     return {
-      open: null,
       mdcPersistentDrawer: null
     }
   },
+  computed: {
+    model: {
+      get () {
+        return this.open
+      },
+      set (value) {
+        this.$emit('change', value)
+      }
+    }
+  },
   mounted () {
     this.mdcPersistentDrawer = MDCPersistentDrawer.attachTo(this.$el)
-    this.open = this.initialOpen
     this.mdcPersistentDrawer.open = this.open
   },
   beforeDestroy () {
     this.mdcPersistentDrawer.destroy()
   },
   methods: {
-    toggle () {
-      this.open ? this.mdcPersistentDrawer.open = false : this.mdcPersistentDrawer.open = true
-      this.open = !this.open
+    closeDrawer () {
+      this.model = false
+    }
+  },
+  watch: {
+    open () {
+      this.mdcPersistentDrawer.open = this.open
     }
   }
 }

diff --git a/components/drawer/DrawerPersistent/README.md b/components/drawer/DrawerPersistent/README.md
@@ -3,7 +3,7 @@
 ### Markup
 
 ```html
-<m-drawer-persistent ref="drawer">
+<m-drawer-persistent v-model="isDrawerOpen">
   <m-drawer-toolbar-spacer slot="toolbarSpacer"/>
   <m-drawer-content>
     <m-list>
@@ -18,20 +18,18 @@
 ### Script
 
 ```javascript
-this.$refs.drawer.toggle()
+data () {
+  return {
+    isDrawerOpen: false
+  }
+}
 ```
 
-### Props & methods
+### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| initialOpen | Boolean | true | whether the drawer should be open at start |
-
-Non prop events are mapped to the inner button element.
-
-| Method | Description |
-|--------|-------------|
-| toggle | toggles the drawer |
+| open | Boolean | true | whether the drawer should be open at start |
 
 ### Slots
 

diff --git a/components/drawer/DrawerTemporary/DrawerTemporary.vue b/components/drawer/DrawerTemporary/DrawerTemporary.vue
@@ -1,7 +1,7 @@
 <template>
   <aside
     class="mdc-drawer mdc-drawer--temporary"
-    v-on="$listeners">
+    @MDCTemporaryDrawer:close="closeDrawer()">
     <nav class="mdc-drawer__drawer">
       <slot name="toolbarSpacer"/>
       <slot name="header"/>
@@ -18,29 +18,45 @@ import themeClassMixin from '../../base/themeClassMixin.js'
 export default {
   mixins: [themeClassMixin],
   props: {
-    initialOpen: {
+    open: {
       type: Boolean,
       default: false
     }
   },
+  model: {
+    prop: 'open',
+    event: 'change'
+  },
   data () {
     return {
-      open: null,
       mdcTemporaryDrawer: null
     }
   },
+  computed: {
+    model: {
+      get () {
+        return this.open
+      },
+      set (value) {
+        this.$emit('change', value)
+      }
+    }
+  },
   mounted () {
     this.mdcTemporaryDrawer = MDCTemporaryDrawer.attachTo(this.$el)
-    this.open = this.initialOpen
     this.mdcTemporaryDrawer.open = this.open
   },
   beforeDestroy () {
     this.mdcTemporaryDrawer.destroy()
   },
   methods: {
-    toggle () {
-      this.open ? this.mdcTemporaryDrawer.open = false : this.mdcTemporaryDrawer.open = true
-      this.open = !this.open
+    closeDrawer () {
+      this.model = false
+    }
+  },
+  watch: {
+    open () {
+      this.mdcTemporaryDrawer.open = this.open
     }
   }
 }

diff --git a/components/drawer/DrawerTemporary/README.md b/components/drawer/DrawerTemporary/README.md
@@ -3,7 +3,7 @@
 ### Markup
 
 ```html
-<m-drawer-temporary ref="drawer">
+<m-drawer-temporary v-model="isDrawerOpen">
   <m-drawer-toolbar-spacer slot="toolbarSpacer"/>
   <m-drawer-content>
     <m-list>
@@ -18,20 +18,18 @@
 ### Script
 
 ```javascript
-this.$refs.drawer.toggle()
+data () {
+  return {
+    isDrawerOpen: false
+  }
+}
 ```
 
-### Props & methods
+### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| initialOpen | Boolean | false | whether the drawer should be open at start |
-
-Non prop events are mapped to the inner button element.
-
-| Method | Description |
-|--------|-------------|
-| toggle | toggles the drawer |
+| open | Boolean | false | whether the drawer should be open at start |
 
 ### Slots
 

diff --git a/demo/App.vue b/demo/App.vue
@@ -1,7 +1,6 @@
 <template>
   <m-typography class="demo-body">
     <m-toolbar
-      ref="toolbar"
       fixed
       waterfall>
       <m-toolbar-row shrink-center>
@@ -13,7 +12,7 @@
         Material Components Vue
       </m-toolbar-row>
     </m-toolbar>
-    <m-drawer-temporary ref="drawer">
+    <m-drawer-temporary v-model="isDrawerOpen">
       <m-drawer-toolbar-spacer
         class="mdc-theme--primary-bg"
         slot="toolbarSpacer"/>
@@ -69,14 +68,19 @@ Vue.use(Toolbar)
 Vue.use(Typography)
 
 export default {
+  data () {
+    return {
+      isDrawerOpen: false
+    }
+  },
   computed: {
     listItems () {
       return this.$store.state.app.drawerListItems
     }
   },
   methods: {
     toggleDrawer () {
-      this.$refs.drawer.toggle()
+      this.isDrawerOpen ? this.isDrawerOpen = false : this.isDrawerOpen = true
     },
     openRoute (route) {
       this.$router.push(route)

diff --git a/demo/views/DrawerView.vue b/demo/views/DrawerView.vue
@@ -26,8 +26,10 @@
       <m-button
         interactive
         raised
-        @click="$refs.persistentDrawer.toggle()">toggle</m-button>
-      <m-drawer-persistent ref="persistentDrawer">
+        @click="togglePersistentDrawer()">
+        toggle
+      </m-button>
+      <m-drawer-persistent v-model="persistentDrawerState">
         <m-drawer-toolbar-spacer slot="toolbarSpacer"/>
         <m-drawer-content>
           <m-list>
@@ -43,8 +45,10 @@
       <m-button
         interactive
         raised
-        @click="$refs.temporaryDrawer.toggle()">toggle</m-button>
-      <m-drawer-temporary ref="temporaryDrawer">
+        @click="toggleTemporaryDrawer()">
+        toggle
+      </m-button>
+      <m-drawer-temporary v-model="temporaryDrawerState">
         <m-drawer-content>
           <m-list>
             <m-list-item> Item </m-list-item>
@@ -68,7 +72,20 @@ Vue.use(Drawer)
 Vue.use(List)
 
 export default {
-
+  data () {
+    return {
+      persistentDrawerState: true,
+      temporaryDrawerState: false
+    }
+  },
+  methods: {
+    togglePersistentDrawer () {
+      this.persistentDrawerState ? this.persistentDrawerState = false : this.persistentDrawerState = true
+    },
+    toggleTemporaryDrawer () {
+      this.temporaryDrawerState ? this.temporaryDrawerState = false : this.temporaryDrawerState = true
+    }
+  }
 }
 </script>