From 3ac16c7b1b841027b2307a5817672c5b73861f52 Mon Sep 17 00:00:00 2001
From: Vi Pro <VdustR@gmail.com>
Date: Mon, 14 May 2018 00:55:30 +0800
Subject: [PATCH] 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                | 39 +++++++++++--
 src/components/MdApp/MdAppDrawer.vue          | 48 +++++++++++++---
 src/components/MdApp/MdAppInternalDrawer.vue  |  4 +-
 src/components/MdApp/MdAppMixin.js            | 25 ++++++---
 src/components/MdApp/MdAppSideDrawer.vue      |  8 ++-
 src/components/MdApp/MdAppToolbar.vue         |  4 ++
 src/components/MdContent/theme.scss           |  1 +
 src/components/MdDrawer/MdDrawer.vue          | 48 +++++++++++++---
 .../MdDrawer/MdDrawerRightPrevious.vue        | 55 +++++++++++++++++++
 src/components/MdDrawer/theme.scss            |  8 ++-
 10 files changed, 205 insertions(+), 35 deletions(-)
 create mode 100644 src/components/MdDrawer/MdDrawerRightPrevious.vue

diff --git a/src/components/MdApp/MdApp.vue b/src/components/MdApp/MdApp.vue
index 15e0986f6..5fbfacfa6 100644
--- a/src/components/MdApp/MdApp.vue
+++ b/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,9 +14,11 @@
     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
@@ -22,6 +26,29 @@
 
         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 {
diff --git a/src/components/MdApp/MdAppDrawer.vue b/src/components/MdApp/MdAppDrawer.vue
index 5be62769f..fef43f57f 100644
--- a/src/components/MdApp/MdAppDrawer.vue
+++ b/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>
diff --git a/src/components/MdApp/MdAppInternalDrawer.vue b/src/components/MdApp/MdAppInternalDrawer.vue
index 652fcd4f0..d96a07d85 100644
--- a/src/components/MdApp/MdAppInternalDrawer.vue
+++ b/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>
diff --git a/src/components/MdApp/MdAppMixin.js b/src/components/MdApp/MdAppMixin.js
index aff933b5a..0b9a085d9 100644
--- a/src/components/MdApp/MdAppMixin.js
+++ b/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
diff --git a/src/components/MdApp/MdAppSideDrawer.vue b/src/components/MdApp/MdAppSideDrawer.vue
index 161fead7f..209675988 100644
--- a/src/components/MdApp/MdAppSideDrawer.vue
+++ b/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>
diff --git a/src/components/MdApp/MdAppToolbar.vue b/src/components/MdApp/MdAppToolbar.vue
index 7ee41f99f..213a889ee 100644
--- a/src/components/MdApp/MdAppToolbar.vue
+++ b/src/components/MdApp/MdAppToolbar.vue
@@ -61,6 +61,10 @@
     }
   }
 
+  .md-app-toolbar {
+    min-height: 64px;
+  }
+
   .md-overlap {
     .md-app-toolbar {
       height: 196px;
diff --git a/src/components/MdContent/theme.scss b/src/components/MdContent/theme.scss
index f09a7f65d..3531260e4 100644
--- a/src/components/MdContent/theme.scss
+++ b/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);
     }
   }
 }
diff --git a/src/components/MdDrawer/MdDrawer.vue b/src/components/MdDrawer/MdDrawer.vue
index 4a7862806..93d30b1ed 100644
--- a/src/components/MdDrawer/MdDrawer.vue
+++ b/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;
+          }
         }
       }
 
diff --git a/src/components/MdDrawer/MdDrawerRightPrevious.vue b/src/components/MdDrawer/MdDrawerRightPrevious.vue
new file mode 100644
index 000000000..863c4d990
--- /dev/null
+++ b/src/components/MdDrawer/MdDrawerRightPrevious.vue
@@ -0,0 +1,55 @@
+<template>
+  <div v-show="false" class="md-drawer md-right-previous" :class="drawerClasses"></div>
+</template>
+
+<script>
+  import MdComponent from 'core/MdComponent'
+  import MdPropValidator from 'core/utils/MdPropValidator'
+
+  export default new MdComponent({
+    name: 'MdDrawer',
+    props: {
+      mdPermanent: {
+        type: String,
+        ...MdPropValidator('md-permanent', [
+          'full',
+          'clipped',
+          'card'
+        ])
+      },
+      mdPersistent: {
+        type: String,
+        ...MdPropValidator('md-persistent', [
+          'mini',
+          'full'
+        ])
+      },
+      mdActive: Boolean,
+      mdFixed: Boolean
+    },
+    computed: {
+      drawerClasses () {
+        let classes = {
+          'md-temporary': this.isTemporary,
+          'md-persistent': this.mdPersistent,
+          'md-permanent': this.mdPermanent,
+          'md-active': this.mdActive,
+          'md-fixed': this.mdFixed
+        }
+
+        if (this.mdPermanent) {
+          classes['md-permanent-' + this.mdPermanent] = true
+        }
+
+        if (this.mdPersistent) {
+          classes['md-persistent-' + this.mdPersistent] = true
+        }
+
+        return classes
+      },
+      isTemporary () {
+        return !this.mdPermanent && !this.mdPersistent
+      }
+    }
+  })
+</script>
diff --git a/src/components/MdDrawer/theme.scss b/src/components/MdDrawer/theme.scss
index 570b6e06f..437c026c0 100644
--- a/src/components/MdDrawer/theme.scss
+++ b/src/components/MdDrawer/theme.scss
@@ -4,7 +4,13 @@
     @include md-theme-property(color, text-primary, background);
 
     &.md-persistent-mini {
-      @include md-theme-property(border-right-color, divider, background);
+      &.md-left {
+        @include md-theme-property(border-right-color, divider, background);
+      }
+
+      &.md-right {
+        @include md-theme-property(border-left-color, divider, background);
+      }
     }
   }
 }