From 611eaea70d184ca1eb302b2afab3a204bd1c795a Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Sat, 12 Aug 2017 12:16:02 -0400
Subject: [PATCH] massive docs update!

---
 components/ComponentParameters.vue |   7 ++
 components/ComponentView.vue       |  11 +-
 components/MainNavigation.vue      |   5 +-
 examples/resize/1.vue              |  27 +++++
 examples/scroll/1.vue              |  20 ++++
 examples/scroll/2.vue              |  39 ++++++++
 examples/tables/9.vue              | 156 +++++++++++++++++++++++++++++
 examples/toolbar/14.vue            |  31 ++++++
 examples/touch/1.vue               |  30 ++++++
 pages/BadgesView.vue               |   4 +-
 pages/BottomNavigationView.vue     |  19 ----
 pages/DatatablesView.vue           |  21 +---
 pages/GridView.vue                 |   2 +-
 pages/HomeView.vue                 |   3 -
 pages/MenusView.vue                |  19 ----
 pages/ParallaxView.vue             |  19 ----
 pages/PickersView.vue              |  19 ----
 pages/ResizeView.vue               |  33 ++++++
 pages/SSRView.vue                  |  23 -----
 pages/ScrollView.vue               |  44 ++++++++
 pages/SelectView.vue               |  11 ++
 pages/SelectionControlsView.vue    |  11 ++
 pages/TabsView.vue                 |   6 ++
 pages/TextFieldsView.vue           |  24 +----
 pages/ThemeView.vue                |  23 -----
 pages/ToolbarsView.vue             |  38 +++----
 pages/TooltipsView.vue             |  19 ----
 pages/TouchView.vue                |  37 +++++++
 pages/WhyView.vue                  | 138 +++++++++++++------------
 router/index.js                    |   3 +
 router/meta.json                   |  18 ++++
 31 files changed, 586 insertions(+), 274 deletions(-)
 create mode 100644 examples/resize/1.vue
 create mode 100644 examples/scroll/1.vue
 create mode 100644 examples/scroll/2.vue
 create mode 100644 examples/tables/9.vue
 create mode 100644 examples/toolbar/14.vue
 create mode 100644 examples/touch/1.vue
 create mode 100644 pages/ResizeView.vue
 create mode 100644 pages/ScrollView.vue
 create mode 100644 pages/TouchView.vue

diff --git a/components/ComponentParameters.vue b/components/ComponentParameters.vue
index 2b4f9de1..6443d863 100755
--- a/components/ComponentParameters.vue
+++ b/components/ComponentParameters.vue
@@ -40,6 +40,7 @@
           default: this.makeSlot(),
           theme: this.makeTheme(),
           input: this.makeInput(),
+          label: this.makeLabel(),
           overlay: this.makeOverlay(),
           detachable: this.makeDetach(),
           positionable: this.makePosition(),
@@ -137,6 +138,12 @@
           return [ c, 'Boolean', 'False', `Applies the ${c} contextual color` ]
         })
       },
+      makeLabel () {
+        return [[
+          'label',
+          'Label slot'
+        ]]
+      },
       makeTheme () {
         return [
           [
diff --git a/components/ComponentView.vue b/components/ComponentView.vue
index fa6e912a..6eace57e 100755
--- a/components/ComponentView.vue
+++ b/components/ComponentView.vue
@@ -9,12 +9,12 @@
           v-card-actions
             v-btn(
               tag="a"
-              v-bind:href="'https://github.com/vuetifyjs/vuetify/tree/master/src/components/'+doc.component"
+              v-bind:href="'https://github.com/vuetifyjs/vuetify/tree/master/src/'+componentLink"
               target="_blank"
               icon
               light
-              v-tooltip:right="{ html: 'View component' }"
-              v-if="doc.component"
+              v-tooltip:right="{ html: `View ${doc.directive ? 'Directive' : 'Component'}` }"
+              v-if="componentLink"
               v-bind:class="[`${currentColor}--text`]"
             )
               v-icon widgets
@@ -112,6 +112,11 @@
     },
 
     computed: {
+      componentLink () {
+        if (this.doc.component) return `components/${this.doc.component}`
+        if (this.doc.directive) return `directives/${this.doc.directive}`
+        return false
+      },
       currentColor () {
         return this.$store.state.currentColor
       }
diff --git a/components/MainNavigation.vue b/components/MainNavigation.vue
index 14acaf97..a460151a 100755
--- a/components/MainNavigation.vue
+++ b/components/MainNavigation.vue
@@ -164,10 +164,11 @@
             group: '/directives',
             items: [
               { href: '/directives/badges', title: 'Badges' },
-              { href: '/directives/touch-support', title: 'Touch Support' },
               { href: '/directives/resizing', title: 'Resizing' },
               { href: '/directives/ripples', title: 'Ripples' },
-              { href: '/directives/tooltips', title: 'Tooltips' }
+              { href: '/directives/scrolling', title: 'Scrolling' },
+              { href: '/directives/tooltips', title: 'Tooltips' },
+              { href: '/directives/touch-support', title: 'Touch Support' }
             ]
           },
           { divider: true },
diff --git a/examples/resize/1.vue b/examples/resize/1.vue
new file mode 100644
index 00000000..b75e4f6e
--- /dev/null
+++ b/examples/resize/1.vue
@@ -0,0 +1,27 @@
+<template>
+  <v-layout v-resize="onResize" column align-center justify-center>
+    <v-subheader>Window Size</v-subheader>
+    {{ windowSize }}
+  </v-layout>  
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      windowSize: {
+        x: 0,
+        y: 0
+      }
+    }),
+
+    mounted () {
+      this.onResize()
+    },
+
+    methods: {
+      onResize () {
+        this.windowSize = { x: window.innerWidth, y: window.innerHeight }
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/examples/scroll/1.vue b/examples/scroll/1.vue
new file mode 100644
index 00000000..7e3f60b6
--- /dev/null
+++ b/examples/scroll/1.vue
@@ -0,0 +1,20 @@
+<template>
+  <v-layout column align-center justify-center v-scroll="onScroll">
+    <v-subheader>Offset Top</v-subheader>
+    {{ offsetTop }}
+  </v-layout>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      offsetTop: 0
+    }),
+
+    methods: {
+      onScroll (e) {
+        this.offsetTop = window.pageYOffset || document.documentElement.scrollTop
+      }
+    }
+  }
+</script>
diff --git a/examples/scroll/2.vue b/examples/scroll/2.vue
new file mode 100644
index 00000000..7a53f89e
--- /dev/null
+++ b/examples/scroll/2.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <v-layout column justify-center align-center>
+      <v-subheader>Offset Top</v-subheader>
+      {{ offsetTop }}
+    </v-layout>
+    <v-container 
+      style="max-height: 400px"
+      class="scroll-y"
+      id="scroll-target"
+    >
+      <v-layout
+        column
+        align-center
+        justify-center
+        v-scroll="{
+          target: '#scroll-target',
+          callback: this.onScroll
+        }"
+        style="height: 1000px"
+      >
+      </v-layout>
+    </v-container>
+  </div>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      offsetTop: 0
+    }),
+
+    methods: {
+      onScroll (e) {
+        this.offsetTop = e.target.scrollTop
+      }
+    }
+  }
+</script>
diff --git a/examples/tables/9.vue b/examples/tables/9.vue
new file mode 100644
index 00000000..f8f1cbf1
--- /dev/null
+++ b/examples/tables/9.vue
@@ -0,0 +1,156 @@
+<template>
+  <v-data-table
+      v-bind:headers="headers"
+      :items="items"
+      class="elevation-1"
+      hide-actions
+      dark
+    >
+    <template slot="items" scope="props">
+      <td>{{ props.item.name }}</td>
+      <td class="text-xs-right">{{ props.item.calories }}</td>
+      <td class="text-xs-right">{{ props.item.fat }}</td>
+      <td class="text-xs-right">{{ props.item.carbs }}</td>
+      <td class="text-xs-right">{{ props.item.protein }}</td>
+      <td class="text-xs-right">{{ props.item.sodium }}</td>
+      <td class="text-xs-right">{{ props.item.calcium }}</td>
+      <td class="text-xs-right">{{ props.item.iron }}</td>
+    </template>
+  </v-data-table>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        headers: [
+          {
+            text: 'Dessert (100g serving)',
+            align: 'left',
+            sortable: false,
+            value: 'name'
+          },
+          { text: 'Calories', value: 'calories' },
+          { text: 'Fat (g)', value: 'fat' },
+          { text: 'Carbs (g)', value: 'carbs' },
+          { text: 'Protein (g)', value: 'protein' },
+          { text: 'Sodium (mg)', value: 'sodium' },
+          { text: 'Calcium (%)', value: 'calcium' },
+          { text: 'Iron (%)', value: 'iron' }
+        ],
+        items: [
+          {
+            value: false,
+            name: 'Frozen Yogurt',
+            calories: 159,
+            fat: 6.0,
+            carbs: 24,
+            protein: 4.0,
+            sodium: 87,
+            calcium: '14%',
+            iron: '1%'
+          },
+          {
+            value: false,
+            name: 'Ice cream sandwich',
+            calories: 237,
+            fat: 9.0,
+            carbs: 37,
+            protein: 4.3,
+            sodium: 129,
+            calcium: '8%',
+            iron: '1%'
+          },
+          {
+            value: false,
+            name: 'Eclair',
+            calories: 262,
+            fat: 16.0,
+            carbs: 23,
+            protein: 6.0,
+            sodium: 337,
+            calcium: '6%',
+            iron: '7%'
+          },
+          {
+            value: false,
+            name: 'Cupcake',
+            calories: 305,
+            fat: 3.7,
+            carbs: 67,
+            protein: 4.3,
+            sodium: 413,
+            calcium: '3%',
+            iron: '8%'
+          },
+          {
+            value: false,
+            name: 'Gingerbread',
+            calories: 356,
+            fat: 16.0,
+            carbs: 49,
+            protein: 3.9,
+            sodium: 327,
+            calcium: '7%',
+            iron: '16%'
+          },
+          {
+            value: false,
+            name: 'Jelly bean',
+            calories: 375,
+            fat: 0.0,
+            carbs: 94,
+            protein: 0.0,
+            sodium: 50,
+            calcium: '0%',
+            iron: '0%'
+          },
+          {
+            value: false,
+            name: 'Lollipop',
+            calories: 392,
+            fat: 0.2,
+            carbs: 98,
+            protein: 0,
+            sodium: 38,
+            calcium: '0%',
+            iron: '2%'
+          },
+          {
+            value: false,
+            name: 'Honeycomb',
+            calories: 408,
+            fat: 3.2,
+            carbs: 87,
+            protein: 6.5,
+            sodium: 562,
+            calcium: '0%',
+            iron: '45%'
+          },
+          {
+            value: false,
+            name: 'Donut',
+            calories: 452,
+            fat: 25.0,
+            carbs: 51,
+            protein: 4.9,
+            sodium: 326,
+            calcium: '2%',
+            iron: '22%'
+          },
+          {
+            value: false,
+            name: 'KitKat',
+            calories: 518,
+            fat: 26.0,
+            carbs: 65,
+            protein: 7,
+            sodium: 54,
+            calcium: '12%',
+            iron: '6%'
+          }
+        ]
+      }
+    }
+  }
+</script>
diff --git a/examples/toolbar/14.vue b/examples/toolbar/14.vue
new file mode 100644
index 00000000..690c8f41
--- /dev/null
+++ b/examples/toolbar/14.vue
@@ -0,0 +1,31 @@
+<template>
+  <v-app toolbar--fixed toolbar style="overflow: hidden">
+    <v-toolbar
+      absolute
+      class="white teal lighten-3"
+      dark
+      scroll-off-screen
+      scroll-target="#scrolling-techniques"
+    >
+      <v-toolbar-side-icon></v-toolbar-side-icon>
+      <v-toolbar-title>Title</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn icon>
+        <v-icon>search</v-icon>
+      </v-btn>
+      <v-btn icon>
+        <v-icon>favorite</v-icon>
+      </v-btn>
+      <v-btn icon>
+        <v-icon>more_vert</v-icon>
+      </v-btn>
+    </v-toolbar>
+    <main
+      style="max-height: 600px;"
+      class="scroll-y"
+      id="scrolling-techniques"
+    >
+      <v-container></v-container>
+    </main>
+  </v-app>
+</template>
diff --git a/examples/touch/1.vue b/examples/touch/1.vue
new file mode 100644
index 00000000..53612eb0
--- /dev/null
+++ b/examples/touch/1.vue
@@ -0,0 +1,30 @@
+<template>
+  <v-layout
+    column
+    align-center
+    justify-center
+    style="height: 500px"
+    class="grey lighten-2"
+    v-touch="{
+      left: () => swipe('Left'),
+      right: () => swipe('Right')
+    }"
+  >
+    <v-subheader>Swipe Direction</v-subheader>
+    {{ swipeDirection }}
+  </v-layout>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      swipeDirection: 'None'
+    }),
+
+    methods: {
+      swipe (direction) {
+        this.swipeDirection = direction
+      }
+    }
+  }
+</script>
diff --git a/pages/BadgesView.vue b/pages/BadgesView.vue
index 1aec9a54..07046183 100755
--- a/pages/BadgesView.vue
+++ b/pages/BadgesView.vue
@@ -7,9 +7,9 @@
     data () {
       return {
         doc: {
-          title: 'Badge',
+          title: 'Badge directive',
           edit: 'Badges',
-          component: 'badges',
+          directive: 'badge',
           desc: `
             <p>
               Badge directives can be applied to any element using the <code>v-badge</code> directive. By default, a badge will use the application's defined <strong class="primary--text">primary color</strong>. Parameters can be passed using the arg, <code>v-badge:arg</code>, modifier, <code>v-badge:2.modifier</code>, or by passing an object by expression, <code>v-badge="{ value: 2, overlap: true }"</code>
diff --git a/pages/BottomNavigationView.vue b/pages/BottomNavigationView.vue
index 185a1231..248c40f0 100755
--- a/pages/BottomNavigationView.vue
+++ b/pages/BottomNavigationView.vue
@@ -44,25 +44,6 @@
           }
         }
       }
-    },
-
-    mounted () {
-      this.$emit('view', this.meta())
-    },
-
-    preFetch () {
-      return this.methods.meta()
-    },
-
-    methods: {
-      meta () {
-        return {
-          title: 'Bottom navigation Component | Vuetify.js',
-          h1: 'Bottom navigation',
-          description: 'Bottom navigation component for Vuetify Framework',
-          keywords: 'vuetify, bottom navigation, navigation, component'
-        }
-      }
     }
   }
 </script>
diff --git a/pages/DatatablesView.vue b/pages/DatatablesView.vue
index 8a5385e4..3978efe5 100755
--- a/pages/DatatablesView.vue
+++ b/pages/DatatablesView.vue
@@ -20,11 +20,12 @@
             { header: 'Search with custom page text', file: 'tables/3', desc: 'The data table exposes a <code>search</code> prop that allows you to filter your data.' },
             { header: 'External pagination', file: 'tables/4', desc: 'Pagination can be controlled externally by using the <code>pagination</code> prop. Remember that you must apply the <code>.sync</code> modifier.' },
             { header: 'External sorting', file: 'tables/5', desc: 'Sorting can also be controlled externally by using the <code>pagination</code> prop. Remember that you must apply the <code>.sync</code> modifier. You can also use the prop to set the default sorted column.' },
-            { header: 'Paginate and sort server-side', file: 'tables/6', desc: 'If you\'re loading data from a backend and want to paginate and sort the results before displaying them, you can use the <code>total-items</code> prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the <code>pagination</code> prop to listen for changes. Use the <code>loading</code> prop to display a progress bar while fetching data.'}
+            { header: 'Paginate and sort server-side', file: 'tables/6', desc: 'If you\'re loading data from a backend and want to paginate and sort the results before displaying them, you can use the <code>total-items</code> prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the <code>pagination</code> prop to listen for changes. Use the <code>loading</code> prop to display a progress bar while fetching data.'},
+            { header: 'Theme support', file: 'tables/9', desc: 'The <code>v-data-table</code> component supports the application dark theme.'}
           ],
           props: {
             'v-data-table': {
-              shared: ['filterable'],
+              shared: ['filterable', 'theme'],
               params: [
                 [
                   'headers',
@@ -214,25 +215,9 @@
       }
     },
 
-    mounted () {
-      this.$emit('view', this.meta())
-    },
-
-    preFetch () {
-      return this.methods.meta()
-    },
-
     methods: {
       saving () {
         console.log('I saved!')
-      },
-      meta () {
-        return {
-          title: 'Data tables | Vuetify.js',
-          h1: 'Data tables',
-          description: 'The v-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, header tooltips, and row selection.',
-          keywords: 'vuetify, components, data tables'
-        }
       }
     }
   }
diff --git a/pages/GridView.vue b/pages/GridView.vue
index ed12f618..979807ba 100755
--- a/pages/GridView.vue
+++ b/pages/GridView.vue
@@ -179,7 +179,7 @@
                     'False',
                     'xs:extra small, sm:small, md:medium, lg:large, xl:extra large - 1 through 12'
                   ], [
-                    'offset-[size](1-12)',
+                    'offset-[size](0-12)',
                     'Boolean',
                     'False',
                     'offset-xs:extra small, offset-sm:small, offset-md:medium, offset-lg:large, offset-xl:extra large. Example: offset-xs3'
diff --git a/pages/HomeView.vue b/pages/HomeView.vue
index dc112015..cb41825b 100755
--- a/pages/HomeView.vue
+++ b/pages/HomeView.vue
@@ -1,7 +1,4 @@
 <style lang="stylus" scoped>
-
-
-
 //temp fix
 $grid-breakpoints := {
   xs: 0
diff --git a/pages/MenusView.vue b/pages/MenusView.vue
index 1278237a..67f56ede 100755
--- a/pages/MenusView.vue
+++ b/pages/MenusView.vue
@@ -177,25 +177,6 @@
           }
         }
       }
-    },
-
-    mounted () {
-      this.$emit('view', this.meta())
-    },
-
-    preFetch () {
-      return this.methods.meta()
-    },
-
-    methods: {
-      meta () {
-        return {
-          title: 'Menu Component | Vuetify.js',
-          h1: 'Menus',
-          description: 'Menu component for Vuetify Framework',
-          keywords: 'vuetify, menus, components'
-        }
-      }
     }
   }
 </script>
diff --git a/pages/ParallaxView.vue b/pages/ParallaxView.vue
index 6f2dffb8..6f87fdaf 100755
--- a/pages/ParallaxView.vue
+++ b/pages/ParallaxView.vue
@@ -38,25 +38,6 @@
           }
         }
       }
-    },
-
-    mounted () {
-      this.$emit('view', this.meta())
-    },
-
-    preFetch () {
-      return this.methods.meta()
-    },
-
-    methods: {
-      meta () {
-        return {
-          title: 'Parallax Component | Vuetify.js',
-          h1: 'Parallax',
-          description: 'Parallax component for Vuetify Framework',
-          keywords: 'vuetify, parallax, components'
-        }
-      }
     }
   }
 </script>
diff --git a/pages/PickersView.vue b/pages/PickersView.vue
index f0c53d9c..d999c517 100755
--- a/pages/PickersView.vue
+++ b/pages/PickersView.vue
@@ -185,25 +185,6 @@
           }
         }
       }
-    },
-
-    mounted () {
-      this.$emit('view', this.meta())
-    },
-
-    preFetch () {
-      return this.methods.meta()
-    },
-
-    methods: {
-      meta () {
-        return {
-          title: 'Pickers | Vuetify.js',
-          h1: 'Pickers',
-          description: 'Pickers directive for Vuetify Framework',
-          keywords: 'vuetify, pickers, directives'
-        }
-      }
     }
   }
 </script>
diff --git a/pages/ResizeView.vue b/pages/ResizeView.vue
new file mode 100644
index 00000000..a80b6e28
--- /dev/null
+++ b/pages/ResizeView.vue
@@ -0,0 +1,33 @@
+<template lang="pug">
+  component-view(v-bind:doc="doc")
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        doc: {
+          title: 'Resize directive',
+          edit: 'Resize',
+          directive: 'resize',
+          desc: 'The <code>v-resize</code> directive can be used for calling specific functions when the window resizes.',
+          props: {
+            'v-resize': {
+              params: [
+                [
+                  'value',
+                  'Function',
+                  'Required',
+                  'Function to be called on window resize',
+                ]
+              ]
+            }
+          },
+          examples: [
+            { header: 'Default', file: 'resize/1', desc: 'Resize your window and observe the values change.' }
+          ]
+        }
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/pages/SSRView.vue b/pages/SSRView.vue
index 9ad7809b..6bab7513 100755
--- a/pages/SSRView.vue
+++ b/pages/SSRView.vue
@@ -72,26 +72,3 @@
       section-header Web App Support
       section-text Vuetify SSR has support for native Web Applications on smart phones. Also known as progressive web apps, your websites can be saved on the homescreen of a device, allowing it to be usable offline and receive push notifications. For more information on Web App Manifest's, navigate to the <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest" target="_blank" rel="noopener">Mozilla Developer Network</a>. To see a live example, add the Vuetify documentation on your mobile device's homescreen.
 </template>
-
-<script>
-  export default {
-    mounted () {
-      this.$emit('view', this.meta())
-    },
-
-    preFetch () {
-      return this.methods.meta()
-    },
-
-    methods: {
-      meta () {
-        return {
-          h1: 'Server Side Rendering',
-          title: 'Server Side Rendering | Vuetify.js',
-          description: 'Learn how to setup your first Vue SSR application with Vuetify.js\'s Webpack template',
-          keywords: 'vue cli, vue template, vue ssr, vuetify ssr'
-        }
-      }
-    }
-  }
-</script>
diff --git a/pages/ScrollView.vue b/pages/ScrollView.vue
new file mode 100644
index 00000000..37fa60a1
--- /dev/null
+++ b/pages/ScrollView.vue
@@ -0,0 +1,44 @@
+<template lang="pug">
+  component-view(v-bind:doc="doc")
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        doc: {
+          title: 'Scrolling',
+          desc: 'The <code>v-scroll</code> directive allows you to provide callbacks when the window or a specifically defined element are scrolled.',
+          props: {
+            'v-scroll': {
+              params: [
+                [
+                  'callback',
+                  'Function',
+                  'Required',
+                  'The function to be called on scroll',
+                ],
+                [
+                  'target',
+                  'String',
+                  'window',
+                  'The DOM element to bind the scroll event listener',
+                ],
+                [
+                  'options',
+                  'Object',
+                  '{ passive: true }',
+                  'The options to be passed to the event listener of the binding target'
+                ]
+              ]
+            }
+          },
+          examples: [
+            { header: 'Default', file: 'scroll/1', desc: 'The default behavior is to bind to the window. If no additional configuration options are needed, you can simple pass your callback function.' },
+            { header: 'Scroll with options', file: 'scroll/2', desc: 'For a more fine tuned approach, you can designate the target to bind the scroll event listener.' }
+          ]
+        }
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/pages/SelectView.vue b/pages/SelectView.vue
index ed5e83d5..c4df2390 100755
--- a/pages/SelectView.vue
+++ b/pages/SelectView.vue
@@ -96,6 +96,12 @@
                   'False',
                   'Changes the selection behavior to return the object directly rather than the value specified with item-value'
                 ],
+                [
+                  'search-input',
+                  'String',
+                  'null',
+                  'Bound when using the autocomplete prop. Use the .sync modifier to catch user input from the autocomplete search input'
+                ],
               ],
               model: {
                 types: ['Array', 'Object'],
@@ -104,6 +110,11 @@
               }
             }
           },
+          slots: {
+            'v-select': {
+              shared: ['label']
+            }
+          },
           events: {
             'v-select': {
               params: [
diff --git a/pages/SelectionControlsView.vue b/pages/SelectionControlsView.vue
index e169c1a7..9c486fa4 100755
--- a/pages/SelectionControlsView.vue
+++ b/pages/SelectionControlsView.vue
@@ -106,6 +106,17 @@
               }
             }
           },
+          slots: {
+            'v-checkbox': {
+              shared: ['label']
+            },
+            'v-radio': {
+              shared: ['label']
+            },
+            'v-switch': {
+              shared: ['label']
+            }
+          },
           events: {
             'v-radio': {
               params: [
diff --git a/pages/TabsView.vue b/pages/TabsView.vue
index 2a697d79..37c0e082 100755
--- a/pages/TabsView.vue
+++ b/pages/TabsView.vue
@@ -99,6 +99,12 @@
                   'String',
                   'v-tab-reverse-transition',
                   'Sets the reverse transition'
+                ],
+                [
+                  'lazy',
+                  'Boolean',
+                  'False',
+                  'Will not render contents until is active for the first time'
                 ]
               ]
             }
diff --git a/pages/TextFieldsView.vue b/pages/TextFieldsView.vue
index eab94063..26e8a598 100755
--- a/pages/TextFieldsView.vue
+++ b/pages/TextFieldsView.vue
@@ -132,6 +132,11 @@
               }
             }
           },
+          slots: {
+            'v-text-field': {
+              shared: ['label']
+            }
+          },
           events: {
             'v-text-field': {
               params: [
@@ -144,25 +149,6 @@
           }
         }
       }
-    },
-
-    mounted () {
-      this.$emit('view', this.meta())
-    },
-
-    preFetch () {
-      return this.methods.meta()
-    },
-
-    methods: {
-      meta () {
-        return {
-          title: 'Text fields Input Components | Vuetify.js',
-          h1: 'Text fields',
-          description: 'Text fields input components for Vuetify Framework',
-          keywords: 'vuetify, form, components'
-        }
-      }
     }
   }
 </script>
diff --git a/pages/ThemeView.vue b/pages/ThemeView.vue
index 159a418f..b647aab0 100755
--- a/pages/ThemeView.vue
+++ b/pages/ThemeView.vue
@@ -73,26 +73,3 @@
         |&nbsp;
         |@require '../../node_modules/vuetify/src/stylus/main'
 </template>
-
-<script>
-  export default {
-    mounted () {
-      this.$emit('view', this.meta())
-    },
-
-    preFetch () {
-      return this.methods.meta()
-    },
-
-    methods: {
-      meta () {
-        return {
-          h1: 'Theme',
-          title: 'Theme | Vuetify',
-          description: '',
-          keywords: 'vuetify themes'
-        }
-      }
-    }
-  }
-</script>
diff --git a/pages/ToolbarsView.vue b/pages/ToolbarsView.vue
index f6b8304c..bd66a40b 100755
--- a/pages/ToolbarsView.vue
+++ b/pages/ToolbarsView.vue
@@ -24,6 +24,7 @@
             { header: 'Prominent toolbars', file: 'toolbar/9', desc: 'Prominent toolbars add a slot where you can placed elements in the extended area. The content and extension areas will be locked to 64px in height.' },
             { header: 'Dense toolbars', file: 'toolbar/10', desc: 'Dense toolbars reduce their height to 48px. This is also the default behavior for mobile landscape orientation.' },
             { header: 'Dense prominent toolbars', file: 'toolbar/11', desc: 'You can combine both the prominent and dense to extend a smaller variant of the toolbar.' },
+            { header: 'Scrolling techniques', file: 'toolbar/14', desc: 'A toolbar can transition off screen when scrolling. Here we demonstrate how you can specify the scroll target (default is window). Keep in mind, for this example there is special markup that will not be required in your application.' },
             { header: 'App bar with menu', file: 'toolbar/12', desc: 'You can combine both the prominent and dense' },
             { header: 'System bars - status/window', file: 'toolbar/13', desc: 'System bars are useful for notification icons on mobile and desktop.' }
           ],
@@ -77,6 +78,24 @@
                   'Boolean',
                   'False',
                   'Increases the height of the toolbar content and extension'
+                ],
+                [
+                  'scroll-off-screen',
+                  'Boolean',
+                  'False',
+                  'Will transition the toolbar off screen when scrolling down'
+                ],
+                [
+                  'scroll-target',
+                  'String',
+                  'window',
+                  'Assign the scroll target for scroll-off-screen'
+                ],
+                [
+                  'scroll-threshold',
+                  'Number',
+                  '100',
+                  'The amount of scroll distance down before the toolbar uses scroll-off-screen'
                 ]
               ]
             },
@@ -140,25 +159,6 @@
           }
         }
       }
-    },
-
-    mounted () {
-      this.$emit('view', this.meta())
-    },
-
-    preFetch () {
-      return this.methods.meta()
-    },
-
-    methods: {
-      meta () {
-        return {
-          title: 'Toolbar Component | Vuetify.js',
-          h1: 'Toolbars',
-          description: 'Toolbar component for Vuetify Framework',
-          keywords: 'vuetify, toolbars, components'
-        }
-      }
     }
   }
 </script>
diff --git a/pages/TooltipsView.vue b/pages/TooltipsView.vue
index 8e1496d6..86b948fa 100755
--- a/pages/TooltipsView.vue
+++ b/pages/TooltipsView.vue
@@ -49,25 +49,6 @@
           ]
         }
       }
-    },
-
-    mounted () {
-      this.$emit('view', this.meta())
-    },
-
-    preFetch () {
-      return this.methods.meta()
-    },
-
-    methods: {
-      meta () {
-        return {
-          title: 'Tooltip Directive | Vuetify.js',
-          h1: 'Tooltips',
-          description: 'Tooltip directive for Vuetify Framework',
-          keywords: 'vuetify, tooltips, directives'
-        }
-      }
     }
   }
 </script>
diff --git a/pages/TouchView.vue b/pages/TouchView.vue
new file mode 100644
index 00000000..6b0679c6
--- /dev/null
+++ b/pages/TouchView.vue
@@ -0,0 +1,37 @@
+<template lang="pug">
+  component-view(v-bind:doc="doc")
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        doc: {
+          title: 'Touch Support',
+          desc: 'The <code>v-touch</code> directive allows you to capture swipe gestures and apply directional callbacks.',
+          props: {
+            'v-touch': {
+              params: [
+                [
+                  '[up, down, left, right]',
+                  'Function',
+                  '-',
+                  'Assign a callback based upon a swipe direction. Pairing x-axis and y-axis callbacks is not recommended at this time.',
+                ],
+                [
+                  '[move, start, end]',
+                  'Function',
+                  '-',
+                  'Assign a callback when the touch event starts, ends, and while it is in progress',
+                ]
+              ]
+            }
+          },
+          examples: [
+            { header: 'Default', file: 'touch/1', desc: 'On a mobile device, try swiping in various directions.' }
+          ]
+        }
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/pages/WhyView.vue b/pages/WhyView.vue
index c3c752f6..ef99ac42 100644
--- a/pages/WhyView.vue
+++ b/pages/WhyView.vue
@@ -1,13 +1,68 @@
 <template lang="pug">
   doc-view#why-vuetify
     section-header What's the difference?
+    v-layout(row wrap).mb-5
+      v-flex(xs12)
+        v-container(fluid grid-list-md).pa-0
+          v-layout(row wrap).pillars
+            v-flex(
+              xs12
+              sm4
+              v-for="(p, i) in philosophies"
+              :key="i"
+            )
+              v-card()
+                v-layout(align-center justify-center fill-height).pa-5
+                  v-avatar
+                    img(
+                      :src="p.img"
+                      style="width: 150px; height: 150px"
+                    ).grey.darken-4
+                div.px-3
+                  v-divider.indigo.lighten-4
+                v-card-title(primary).headline.layout.justify-center
+                  span(v-text="p.title")
+                v-card-text(v-html="p.caption").caption
     v-layout(row wrap justify-space-between)
-      v-flex(xs8)
+      v-flex(xs12 md8)
         section-text Choosing a framework can be a daunting task, and I'm not even talking about component frameworks. You've arrived at Vue and now it's time to start developing your next great idea. There are many options to choose from, and everyone says that they are great. So you have to decide, what are my metrics for success?
         section-text This was me almost a year ago. There were plenty of <strong>UI toolkits</strong> to choose from, but none them had everything that I needed...yeah, you've heard that before. Often enough though, it <em>is</em> the reason individuals attempt to create products that fill gaps, and is why I started working on Vuetify.
         section-text.mb-0 But now you are the one searching for that perfect framework, and Vuetify is another on a list of many, vying for your attention. While my opinion will be subjective, I will try to outline features that I believe will be valuable to you and/or your organization.
-
-      v-flex(xs3)
+        section-header.title
+          v-icon.mr-3.purple--text brush
+          span Design principles
+        section-text Vuetify is developed exactly according to Material Design spec. Every component is hand crafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.
+        section-header.title
+          v-icon.mr-3.teal--text people
+          span Vibrant community
+        section-text Developing with Vuetify means you will never be alone. Get help immediately from the dev team and other community members in the official Discord server. Get the opportunity to speak with talented individuals that want you to succeed in your efforts.
+        section-header.title
+          v-icon.mr-3.primary--text apps
+          span Comparison to other Frameworks
+        section-text Vuetify is not the only Vue material framework out there. Plenty of other talented developers have created some amazing applications under the guise of Google's Material Design spec. Each offer their own unique take on development and process, however, here are a few things that set Vuetify apart:
+        v-layout(row wrap)
+          v-flex(xs12 sm8)
+            v-subheader What you get:
+            v-list(style="max-width: 400px;" dense).transparent
+              v-list-tile(
+                tag="div"
+                :ripple="false"
+                v-for="(c, $index) in comparisons"
+                :key="c.title"
+                avatar
+                :class="{ 'grey lighten-3': $index % 2 === 0 }"
+              )
+                v-list-tile-content
+                  v-list-tile-title.subheading {{ c.title }}
+                v-list-tile-action
+                  v-icon(dark).green--text check
+          v-flex(xs12 sm4).layout.align-center.justify-center
+            img(
+              src="/static/doc-images/logo.svg"
+              alt="Vuetify"
+              width="150px"
+            ).my-5
+      v-flex(xs12 md3)
         v-card(
           flat
           tile
@@ -30,67 +85,6 @@
                   v-icon mail
           v-card-text I am extremely humbled that you have considered using Vuetify as your next UI Framework. A lot of care has went into forging the perfect setup for taking any idea from conception to production. I look forward to you joining the Vuetify community and am excited to see what incredible interfaces you create!
           v-card-text.text-xs-right <em>&mdash;John Leider</em>
-    v-divider.my-5
-    v-layout(row wrap).mb-5
-      v-flex(xs12)
-        h2.title Pillars of service
-        v-container(fluid grid-list-md).pa-0
-          v-layout(row wrap).pillars
-            v-flex(
-              xs12
-              sm4
-              v-for="(p, i) in philosophies"
-              :key="i"
-            )
-              v-card(flat)
-                v-layout(align-center justify-center fill-height).pa-5
-                  v-avatar
-                    img(
-                      :src="p.img"
-                      style="width: 150px; height: 150px"
-                    ).grey.darken-4
-                div.px-3
-                  v-divider.indigo.lighten-4
-                v-card-title(primary).headline.layout.justify-center
-                  span(v-text="p.title")
-                v-card-text(v-html="p.caption").caption
-    v-layout(row wrap justify-center)
-      v-flex(xs12 sm12 md7)
-        v-card(flat tile).mb-3
-          v-card-text
-            h2.title.layout.align-center
-              v-icon.mr-3.purple--text brush
-              span Design principles
-            v-layout
-              v-flex(xs12)
-                section-text.mb-0 Vuetify is developed exactly according to Material Design spec. Every component is hand crafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.
-
-        v-card(flat tile).mb-3
-          v-card-text
-            h2.title.layout.align-center
-              v-icon.mr-3.teal--text people
-              span Vibrant community
-            v-layout
-              v-flex(xs12)
-                section-text Developing with Vuetify means you will never be alone. Get help immediately from the dev team and other community members in the official Discord server. Get the opportunity to speak with talented individuals that want you to succeed in your efforts.
-
-        v-card(flat tile).mb-3
-          v-card-text
-            h2.title.layout.align-center
-              v-icon.mr-3.blue--text apps
-              span Comparison to other Frameworks
-            v-layout
-              v-flex(xs12)
-                section-text Vuetify is not the only Vue material framework out there. Plenty of other talented developers have created some amazing applications under the guise of Google's Material Design spec. Each offer their own unique take on development and process, however, here are a few things that sets us apart:
-                ul
-                  li
-                    strong Semantic Helper Components
-                  li 
-                    strong SSR and PWA Support
-                  li 
-                    strong Modular Component Transition System
-                  li
-                    strong Blazing Fast
 
     div.text-xs-center.my-5
       em Still have questions?<br>
@@ -100,6 +94,15 @@
 <script>
   export default {
     data: () => ({
+      comparisons: [
+        { title: 'Semantic Helper Components' },
+        { title: 'SSR and PWA Support' },
+        { title: '5 Vue-CLI templates' },
+        { title: 'Chat Support' },
+        { title: 'Modular Component Transition System' },
+        { title: 'Blazing Fast Framework' },
+        { title: 'A La Carte (coming soon)' }
+      ],
       list: [
         { check: true, text: 'Good for SEO' },
         { check: true, text: 'Well Documented' },
@@ -128,8 +131,11 @@
 </script>
 
 <style lang="stylus">
-  .pillars
-    
+  #why-vuetify
+    .section-text
+      margin-bottom: 24px !important
+
+  .pillars      
     .flex
       display: flex
       flex: 1 1 auto
diff --git a/router/index.js b/router/index.js
index dd8ea06a..56f778c0 100755
--- a/router/index.js
+++ b/router/index.js
@@ -75,8 +75,11 @@ export function createRouter () {
       route('/components/text-fields', 'TextFields'),
       route('/components/toolbars', 'Toolbars'),
       route('/directives/badges', 'Badges'),
+      route('/directives/resizing', 'Resize'),
       route('/directives/ripples', 'Ripples'),
+      route('/directives/scrolling', 'Scroll'),
       route('/directives/tooltips', 'Tooltips'),
+      route('/directives/touch-support', 'Touch'),
       route('/guides/server-side-rendering', 'SSR'),
       // Global redirect for 404
       { path: '*', redirect: '/' }
diff --git a/router/meta.json b/router/meta.json
index 71479a62..76249870 100755
--- a/router/meta.json
+++ b/router/meta.json
@@ -305,18 +305,36 @@
     "description": "Badges directive for the Vuetify framework.",
     "keywords": "badges"
   },
+  "/directives/resizing": {
+    "h1": "Resizing",
+    "title": "Resizing",
+    "description": "Resize directive for the Vuetify framework.",
+    "keywords": "resize, resize directive, window resize directive"
+  },
   "/directives/ripples": {
     "h1": "Ripple",
     "title": "Ripple",
     "description": "Ripple directive for the Vuetify framework.",
     "keywords": "ripples, ink"
   },
+  "/directives/scrolling": {
+    "h1": "Scrolling",
+    "title": "Scrolling",
+    "description": "Scroll directive for the Vuetify framework.",
+    "keywords": "scroll, scroll directive, window scroll directive"
+  },
   "/directives/tooltips": {
     "h1": "Tooltip",
     "title": "Tooltip",
     "description": "Tooltip directive for the Vuetify framework.",
     "keywords": "tooltips"
   },
+  "/directives/touch-support": {
+    "h1": "Touch Support",
+    "title": "Touch Support",
+    "description": "Touch directive for the Vuetify framework.",
+    "keywords": "touch, touch directive, mobile touch directive"
+  },
   "/guides/server-side-rendering": {
     "h1": "Server side rendering",
     "title": "Server side rendering",