feat(top-app-bar): Synchronise with mdc-web (#96)

matsp · Apr 24, 2018 · e8d5e5a · e8d5e5a
1 parent ae60fb8
commit e8d5e5a
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 2 deletions.
diff --git a/components/top-app-bar/README.md b/components/top-app-bar/README.md
@@ -38,6 +38,31 @@ in the navigation slot!
 | navigation | navigation section icons |
 | actions | actions section icons |
 
+## TopAppBarFixedAdjust
+
+### Markup
+
+```html
+<m-top-app-bar-fixed-adjust dense>
+  Some content
+</m-top-app-bar-fixed-adjust>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| short | Boolean | false | content adjustment for short top-app-bar |
+| dense | Boolean | false | content adjustment for dense top-app-bar |
+| prominent | Boolean | false | content adjustment for prominent top-app-bar |
+| denseProminent | Boolean | false | content adjustment for dense and prominent top-app-bar |
+
+### Slots
+
+| Slot | Description |
+|------|-------------|
+| default | content |
+
 ### Reference
 
 - https://github.com/material-components/material-components-web/tree/master/packages/mdc-top-app-bar
diff --git a/components/top-app-bar/TopAppBar.vue b/components/top-app-bar/TopAppBar.vue
@@ -47,6 +47,10 @@ export default {
     dense: {
       type: Boolean,
       default: false
+    },
+    fixed:  {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -61,7 +65,8 @@ export default {
         'mdc-top-app-bar--short': this.short,
         'mdc-top-app-bar--short-collapsed': this.collapsed && this.short,
         'mdc-top-app-bar--prominent': this.prominent && !this.short,
-        'mdc-top-app-bar--dense': this.dense && !this.short
+        'mdc-top-app-bar--dense': this.dense && !this.short,
+        'mdc-top-app-bar--fixed': this.fixed && !this.short
       }
     }
   },

diff --git a/components/top-app-bar/TopAppBarFixedAdjust.vue b/components/top-app-bar/TopAppBarFixedAdjust.vue
@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="mdc-top-app-bar--fixed-adjust"
+    :class="classes">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dense: {
+      type: Boolean,
+      default: false
+    },
+    short: {
+      type: Boolean,
+      default: false
+    },
+    prominent: {
+      type: Boolean,
+      default: false
+    },
+    denseProminent:  {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    classes () {
+      return {
+        'mdc-top-app-bar--dense-fixed-adjust': this.dense && !this.short,
+        'mdc-top-app-bar--short-fixed-adjust': this.short,
+        'mdc-top-app-bar--prominent-fixed-adjust': this.prominent && !this.short,
+        'mdc-top-app-bar--dense-prominent-fixed-adjust': this.denseProminent && !this.short,
+      }
+    }
+  }
+}
+</script>
diff --git a/components/top-app-bar/index.js b/components/top-app-bar/index.js
@@ -1,11 +1,13 @@
 import TopAppBar from './TopAppBar.vue'
+import TopAppBarFixedAdjust from './TopAppBarFixedAdjust.vue'
 import './styles.scss'
 
 import { initPlugin } from '../'
 
 const plugin = {
   install (vm) {
     vm.component('m-top-app-bar', TopAppBar)
+    vm.component('m-top-app-bar-fixed-adjust', TopAppBarFixedAdjust)
   }
 }
 export default plugin

diff --git a/demo/views/TopAppBarView.vue b/demo/views/TopAppBarView.vue
@@ -3,7 +3,7 @@
     <m-layout-grid-cell :span="12">
       <m-typo-title>Normal</m-typo-title>
       <m-layout-grid-inner>
-        <m-layout-grid-cell :span="8">
+        <m-layout-grid-cell :span="6">
           <m-top-app-bar>
             <m-icon
               icon="menu"