fix(MdApp): right drawer, fully reactive (#1493)

* fix(MdApp): right drawer

BREAKING CHANGE: Replace useless props `mdLeft` with `!this.mdRight`

fix #1204

* fix(MdAppDrawer): right drawer supporting

BREAKING CHANGE: no more than one drawer in a MdApp

* fix(MdDrawerRightPrevious): right drawer styles

use an previous element for styling container with right drawer with similar css codes

* fix(MdDrawer): Temporary style

* fix(MdAppSideDrawer): correct component name

* fix(MdApp): reactive persistent drawer

fully reactive drawer

src/components/MdApp/MdApp.vue

@@ -1,6 +1,8 @@
 <script>
+  import Vue from 'vue'
   import MdAppSideDrawer from './MdAppSideDrawer'
   import MdAppInternalDrawer from './MdAppInternalDrawer'
+  import MdDrawerRightPrevious from '../MdDrawer/MdDrawerRightPrevious';
 
   const componentTypes = [
     'md-app-toolbar',
@@ -12,16 +14,41 @@
     return componentOptions && componentTypes.includes(componentOptions.tag)
   }
 
-  function buildSlots (children, context, functionalContext, options) {
+  function buildSlots (children, context, functionalContext, options, createElement) {
     let slots = []
 
+    let hasDrawer = false
+
     if (children) {
       children.forEach(child => {
         const data = child.data
         const componentOptions = child.componentOptions
 
         if ((data && componentTypes.includes(data.slot)) || isValidChild(componentOptions)) {
           child.data.slot = data.slot || componentOptions.tag
+
+          if (componentOptions.tag === 'md-app-drawer') {
+            if (hasDrawer) {
+              Vue.util.warn(`There shouldn't be more than one drawer in a MdApp at one time.`)
+              return
+            }
+
+            hasDrawer = true
+            let nativeMdRight = componentOptions.propsData.mdRight
+            let mdRight = nativeMdRight === '' || !!nativeMdRight
+            child.data.slot += `-${mdRight ? 'right' : 'left'}`
+            child.key = JSON.stringify({
+              'persistent': child.data.attrs['md-persistent'],
+              'permanent': child.data.attrs['md-permanent']
+            })
+
+            if (mdRight) {
+              const drawerRightPrevious = createElement(MdDrawerRightPrevious, { props: {...child.data.attrs}})
+              drawerRightPrevious.data.slot = 'md-app-drawer-right-previous'
+              slots.push(drawerRightPrevious)
+            }
+          }
+
           child.data.provide = options.Ctor.options.provide
           child.context = context
           child.functionalContext = functionalContext
@@ -54,7 +81,7 @@
     render (createElement, { children, props, data }) {
       let appComponent = MdAppSideDrawer
       const { context, functionalContext, componentOptions } = createElement(appComponent)
-      const slots = buildSlots(children, context, functionalContext, componentOptions)
+      const slots = buildSlots(children, context, functionalContext, componentOptions, createElement)
       const drawers = getDrawers(slots)
 
       drawers.forEach(drawer => {
@@ -157,7 +184,9 @@
     &.md-permanent-card + .md-app-scroller .md-content {
       @include md-layout-small-and-up {
         padding-left: 0;
+        padding-right: 0;
         border-left: none;
+        border-right: none;
       }
     }
   }
@@ -167,6 +196,7 @@
 
     @include md-layout-small-and-up {
       border-left: 1px solid transparent;
+      border-right: 1px solid transparent;
     }
 
     > p {
@@ -185,8 +215,9 @@
     display: flex;
     overflow: auto;
     transform: translate3D(0, 0, 0);
-    transition: padding-left .4s $md-transition-default-timing;
-    will-change: padding-left;
+    transition: padding-left .4s $md-transition-default-timing,
+                padding-right .4s $md-transition-default-timing;
+    will-change: padding-left, padding-right;
   }
 
   .md-app-scroller {

src/components/MdApp/MdAppDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <md-drawer class="md-app-drawer" v-bind="$attrs" v-on="$listeners">
+  <md-drawer class="md-app-drawer" :md-active="mdActive && initialized" v-bind="$attrs" v-on="$listeners" :md-right="mdRight" ref="drawer">
     <slot />
   </md-drawer>
 </template>
@@ -13,8 +13,19 @@
         mdActive: null,
         mode: null,
         submode: null
-      }
+      },
+      initialized: false
     }),
+    props: {
+      mdRight: {
+        type: Boolean,
+        default: false
+      },
+      mdActive: {
+        type: Boolean,
+        default: false
+      }
+    },
     computed: {
       visible () {
         return this.drawerElement.mdActive
@@ -24,7 +35,7 @@
       },
       submode () {
         return this.drawerElement.submode
-      }
+      },
     },
     watch: {
       visible (visible) {
@@ -36,6 +47,9 @@
       },
       submode (submode) {
         this.MdApp.drawer.submode = submode
+      },
+      mdRight (right) {
+        this.MdApp.drawer.right = right
       }
     },
     methods: {
@@ -45,17 +59,35 @@
         }
 
         return 0
-      }
-    },
-    mounted () {
-      this.$nextTick().then(() => {
-        this.drawerElement = this.$children[0]
+      },
+      updateDrawerData () {
         this.MdApp.drawer.width = this.getDrawerWidth()
         this.MdApp.drawer.active = this.visible
         this.MdApp.drawer.mode = this.mode
         this.MdApp.drawer.submode = this.submode
+        this.MdApp.drawer.right = this.mdRight
+      },
+      clearDrawerData () {
+        this.MdApp.drawer.width = 0
+        this.MdApp.drawer.active = false
+        this.MdApp.drawer.mode = 'temporary'
+        this.MdApp.drawer.submode = null
+        this.MdApp.drawer.initialWidth = 0
+      },
+    },
+    mounted () {
+      this.$nextTick().then(() => {
         this.MdApp.drawer.initialWidth = this.$el.offsetWidth
+        this.drawerElement = this.$refs.drawer
+        this.updateDrawerData()
+        this.initialized = true
       })
+    },
+    updated () {
+      this.drawerElement = this.$refs.drawer
+    },
+    beforeDestroy () {
+      this.clearDrawerData()
     }
   }
 </script>

src/components/MdApp/MdAppInternalDrawer.vue

@@ -3,10 +3,12 @@
     <slot name="md-app-toolbar"></slot>
 
     <main class="md-app-container md-flex md-layout-row" :style="[containerStyles, contentStyles]" :class="[$mdActiveTheme, scrollerClasses]">
-      <slot name="md-app-drawer"></slot>
+      <slot name="md-app-drawer-left"></slot>
+      <slot name="md-app-drawer-right-previous"></slot>
       <div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]">
         <slot name="md-app-content"></slot>
       </div>
+      <slot name="md-app-drawer-right"></slot>
     </main>
   </div>
 </template>

src/components/MdApp/MdAppMixin.js

@@ -48,7 +48,9 @@ export default {
         initialWidth: 0,
         active: false,
         mode: 'temporary',
-        width: 0
+        submode: null,
+        width: 0,
+        right: false
       }
     }
   }),
@@ -61,16 +63,21 @@ export default {
     isFixed () {
       return this.mdMode && this.mdMode !== 'fixed'
     },
-    isMini () {
+    isDrawerMini () {
       return this.MdApp.drawer.mode === 'persistent' && this.MdApp.drawer.submode === 'mini'
     },
-    contentStyles () {
+    contentPadding () {
       const drawer = this.MdApp.drawer
 
-      if (drawer.active && drawer.mode === 'persistent' && drawer.submode === 'full') {
-        return {
-          'padding-left': drawer.width
-        }
+      if (this.MdApp.drawer.active && this.MdApp.drawer.mode === 'persistent' && this.MdApp.drawer.submode === 'full') {
+        return this.MdApp.drawer.width
+      }
+
+      return 0
+    },
+    contentStyles () {
+      return {
+        [`padding-${this.MdApp.drawer.right ? 'right' : 'left'}`]: this.contentPadding
       }
     },
     containerStyles () {
@@ -80,8 +87,8 @@ export default {
         styles['margin-top'] = this.MdApp.toolbar.initialHeight + 'px'
       }
 
-      if (this.isMini) {
-        styles['padding-left'] = !this.MdApp.drawer.active ? this.MdApp.drawer.initialWidth + 'px' : 0
+      if (this.isDrawerMini) {
+        styles[`padding-${this.MdApp.drawer.right ? 'right' : 'left'}`] = !this.MdApp.drawer.active ? this.MdApp.drawer.initialWidth + 'px' : 0
       }
 
       return styles

src/components/MdApp/MdAppSideDrawer.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="md-app md-app-side-drawer md-layout-row" :class="[appClasses, $mdActiveTheme]">
-    <slot name="md-app-drawer"></slot>
-
+    <slot name="md-app-drawer-left"></slot>
+    <slot name="md-app-drawer-right-previous"></slot>
     <main class="md-app-container md-flex md-layout-column" :class="[$mdActiveTheme, scrollerClasses]" :style="contentStyles" @scroll.passive="handleScroll">
       <slot name="md-app-toolbar"></slot>
       <div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]" :style="containerStyles" @scroll.passive="handleScroll">
         <slot name="md-app-content"></slot>
       </div>
     </main>
+
+    <slot name="md-app-drawer-right"></slot>
   </div>
 </template>
 
@@ -16,7 +18,7 @@
   import MdAppMixin from './MdAppMixin'
 
   export default new MdComponent({
-    name: 'MdAppInternalSideDrawer',
+    name: 'MdAppSideDrawer',
     mixins: [MdAppMixin]
   })
 </script>

src/components/MdApp/MdAppToolbar.vue

@@ -61,6 +61,10 @@
     }
   }
 
+  .md-app-toolbar {
+    min-height: 64px;
+  }
+
   .md-overlap {
     .md-app-toolbar {
       height: 196px;

src/components/MdContent/theme.scss

@@ -15,6 +15,7 @@
 
     .md-app & {
       @include md-theme-property(border-left-color, divider, background);
+      @include md-theme-property(border-right-color, divider, background);
     }
   }
 }

src/components/MdDrawer/MdDrawer.vue

@@ -17,7 +17,6 @@
       MdOverlay
     },
     props: {
-      mdLeft: Boolean,
       mdRight: Boolean,
       mdPermanent: {
         type: String,
@@ -49,7 +48,7 @@
     computed: {
       drawerClasses () {
         let classes = {
-          'md-left': this.mdLeft,
+          'md-left': !this.mdRight,
           'md-right': this.mdRight,
           'md-temporary': this.isTemporary,
           'md-persistent': this.mdPersistent,
@@ -165,8 +164,16 @@
     }
 
     &.md-temporary {
-      + .md-app-container .md-content {
-        border-left: none;
+      &.md-left {
+        + .md-app-container .md-content {
+          border-left: none;
+        }
+      }
+
+      &.md-right-previous {
+        + .md-app-container .md-content {
+          border-right: none;
+        }
       }
 
       &.md-active {
@@ -216,22 +223,45 @@
 
     &.md-persistent {
       &:not(.md-active) {
-        + .md-app-container .md-content {
-          border-left: none;
+        &.md-left {
+          + .md-app-container .md-content {
+            border-left: none;
+          }
+        }
+
+        &.md-right-previous {
+          + .md-app-container .md-content {
+            border-right: none;
+          }
         }
       }
     }
 
     &.md-persistent-mini {
-      border-right: 1px solid;
       transform: translate3D(0, 64px, 0);
       transition: .3s $md-transition-stand-timing;
       transition-property: transform, width;
       will-change: transform, box-shadow;
 
+      &.md-left {
+        border-right: 1px solid;
+      }
+
+      &.md-right {
+        border-left: 1px solid;
+      }
+
       &.md-active {
-        + .md-app-container .md-content {
-          border-left: none;
+        &.md-left {
+          + .md-app-container .md-content {
+            border-left: none;
+          }
+        }
+
+        &.md-right-previous {
+          + .md-app-container .md-content {
+            border-right: none;
+          }
         }
       }