fixed pre-made templates, added in support for navigating to previous…

… releases

assets/App.vue

@@ -46,9 +46,17 @@
 
     created () {
       this.setupLayout()
+      this.getReleases()
     },
 
     methods: {
+      getReleases () {
+        this.$http.get('/releases/releases.json').then(({ data }) => {
+          this.$store.commit('app/RELEASES', data)
+        }).catch(err => {
+          console.log(err)
+        })
+      },
       setupLayout (timeout = 300) {
         const drawer = this.$route.fullPath !== '/'
         this.$store.commit('app/STATELESS', !drawer)

components/core/AppToolbar.vue

@@ -33,13 +33,13 @@
           slot="activator"
           flat
         )
-          span 0.17
+          span {{ currentVersion }}
           v-icon keyboard_arrow_down
         v-list
           v-list-tile(
             v-for="release in releases"
             :key="release"
-            @click=""
+            @click="changeToRelease(release)"
           )
             v-list-tile-title {{ release }}
       v-btn(
@@ -63,6 +63,7 @@
 
     computed: {
       ...mapState({
+        currentVersion: state => state.currentVersion,
         releases: state => state.releases,
         stateless: state => state.stateless
       })
@@ -82,6 +83,12 @@
     created () {
       const fixed = this.$route.path !== '/'
       this.isManualScrolling = !fixed
+    },
+
+    methods: {
+      changeToRelease (release) {
+        window.location.href = `${window.location.origin}/releases/${release}/#${this.$route.fullPath}`
+      }
     }
   }
 </script>

components/views/ExampleView.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   doc-view(:toc="toc")
     template(slot-scope="{ namespace }")
-      section#usage
+      section(v-if="usage")#usage
         section-head(value="Generic.Pages.usage")
         example(
           :new-in="usage.new"

releases/0.12/examples/alerts/1.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <v-alert success v-bind:value="true">
+      This is a success alert.
+    </v-alert>
+
+    <v-alert info v-bind:value="true">
+      This is a info alert.
+    </v-alert>
+
+    <v-alert warning v-bind:value="true">
+      This is a warning alert.
+    </v-alert>
+
+    <v-alert error v-bind:value="true">
+      This is a error alert.
+    </v-alert>
+  </div>
+</template>

releases/0.12/examples/alerts/2.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <v-alert info dismissible v-model="alert">
+      This is a success alert that is closable.
+    </v-alert>
+
+    <div class="text-xs-center">
+      <v-btn primary dark v-if="!alert" v-on:click.native="alert = true">Reset</v-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        alert: true
+      }
+    }
+  }
+</script>

releases/0.12/examples/alerts/3.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <v-alert success icon="new_releases" v-bind:value="true">
+      This is a success alert with a custom icon.
+    </v-alert>
+
+    <v-alert error hide-icon v-bind:value="true">
+      This is an error alert with no icon.
+    </v-alert>
+  </div>
+</template>

releases/0.12/examples/alerts/example.vue

@@ -0,0 +1,5 @@
+<template>
+  <v-card>
+    <v-card-text>Testing</v-card-text>
+  </v-card>
+</template>

releases/0.12/examples/alignment/1.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-card>
+    <v-card-text>
+      <p class="text-lg-right">Right align on large viewport sizes</p>
+      <p class="text-md-center">Center align on medium viewport sizes</p>
+      <p class="text-sm-left">Left align on small viewport sizes</p>
+      <p class="text-xs-center">Center align on all viewport sizes</p>
+      <p class="text-xs-right">Right align on all viewport sizes</p>
+    </v-card-text>
+  </v-card>
+</template>

releases/0.12/examples/badges/1.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="text-xs-center">
+    <v-icon large v-badge="{ value: 6, left: true}" class="grey--text text--lighten-1">shopping_cart</v-icon>
+
+    <v-icon large v-badge="{ value: '!' }" class="grey--text red--after">mail</v-icon>
+  </div>
+</template>

releases/0.12/examples/badges/2.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="text-xs-center">
+    <v-icon 
+      large 
+      v-badge:done.overlap.icon.left 
+      class="grey--text text--lighten-1"
+    >
+      account_circle
+    </v-icon>
+
+    <v-icon 
+      large 
+      v-badge:notifications.icon.overlap
+      class="grey--text text--darken-1 orange--after"
+    >
+      account_box
+    </v-icon>
+  </div>
+</template>

releases/0.12/examples/badges/3.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="text-xs-center">
+    <span v-badge:2.left>Examples</span>
+    &nbsp;&nbsp;
+    <span v-badge:list.icon class="green--after">Lists</span>
+  </div>
+</template>

releases/0.12/examples/bottom-navigation/1.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-card height="200px">
+    <v-bottom-nav absolute value="true" class="transparent">
+      <v-btn flat dark class="teal--text" @click.native="e1 = 1" :value="e1 === 1">
+        <span>Recents</span>
+        <v-icon>history</v-icon>
+      </v-btn>
+      <v-btn flat dark class="teal--text" @click.native="e1 = 2" :value="e1 === 2">
+        <span>Favorites</span>
+        <v-icon>favorite</v-icon>
+      </v-btn>
+      <v-btn flat dark class="teal--text" @click.native="e1 = 3" :value="e1 === 3">
+        <span>Nearby</span>
+        <v-icon>place</v-icon>
+      </v-btn>
+    </v-bottom-nav>
+  </v-card>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        e1: 2
+      }
+    }
+  }
+</script>

releases/0.12/examples/bottom-navigation/2.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-card height="200px">
+    <v-bottom-nav
+      absolute
+      shift
+      value="true"
+      :class="{
+        'blue-grey': e2 === 1,
+        'teal': e2 === 2,
+        'brown': e2 === 3,
+        'brown lighten-1': e2 === 4
+      }"
+    >
+      <v-btn flat light @click.native="e2 = 1" :value="e2 === 1">
+        <span>Video</span>
+        <v-icon>ondemand_video</v-icon>
+      </v-btn>
+      <v-btn flat light @click.native="e2 = 2" :value="e2 === 2">
+        <span>Music</span>
+        <v-icon>music_note</v-icon>
+      </v-btn>
+      <v-btn flat light @click.native="e2 = 3" :value="e2 === 3">
+        <span>Book</span>
+        <v-icon>book</v-icon>
+      </v-btn>
+      <v-btn flat light @click.native="e2 = 4" :value="e2 === 4">
+        <span>Image</span>
+        <v-icon>image</v-icon>
+      </v-btn>
+    </v-bottom-nav>
+  </v-card>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        e2: 3
+      }
+    }
+  }
+</script>

releases/0.12/examples/bottom-navigation/3.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-card height="200px" style="overflow: hidden;">
+    <v-card-text class="text-xs-center">
+      <v-btn flat primary @click.native="e31 = !e31">Toggle Nav</v-btn>
+    </v-card-text>
+    <v-bottom-nav absolute :value="e31" class="transparent">
+      <v-btn flat dark class="teal--text" @click.native="e3 = 1" :value="e3 === 1">
+        <span>Recents</span>
+        <v-icon>history</v-icon>
+      </v-btn>
+      <v-btn flat dark class="teal--text" @click.native="e3 = 2" :value="e3 === 2">
+        <span>Favorites</span>
+        <v-icon>favorite</v-icon>
+      </v-btn>
+      <v-btn flat dark class="teal--text" @click.native="e3 = 3" :value="e3 === 3">
+        <span>Nearby</span>
+        <v-icon>place</v-icon>
+      </v-btn>
+    </v-bottom-nav>
+  </v-card>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        e3: 1,
+        e31: true
+      }
+    }
+  }
+</script>

releases/0.12/examples/breadcrumbs/1.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <v-breadcrumbs divider="/">
+      <v-breadcrumbs-item 
+        v-for="item in items" :key="item"
+        :disabled="item.disabled"
+      >
+        {{ item.text }}
+      </v-breadcrumbs-item>
+    </v-breadcrumbs>
+
+    <v-breadcrumbs divider="-">
+      <v-breadcrumbs-item 
+        v-for="item in items" :key="item"
+        :disabled="item.disabled"
+      >
+        {{ item.text }}
+      </v-breadcrumbs-item>
+    </v-breadcrumbs>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        items: [
+          {
+            text: 'Dashboard',
+            disabled: false
+          },
+          {
+            text: 'Link 1',
+            disabled: false
+          },
+          {
+            text: 'Link 2',
+            disabled: true
+          }
+        ]
+      }
+    }
+  }
+</script>

releases/0.12/examples/breadcrumbs/2.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <v-breadcrumbs icons divider="forward">
+      <v-breadcrumbs-item 
+        v-for="item in items" :key="item"
+        :disabled="item.disabled"
+      >
+        {{ item.text }}
+      </v-breadcrumbs-item>
+    </v-breadcrumbs>
+
+    <v-breadcrumbs icons divider="chevron_right">
+      <v-breadcrumbs-item 
+        v-for="item in items" :key="item"
+        :disabled="item.disabled"
+      >
+        {{ item.text }}
+      </v-breadcrumbs-item>
+    </v-breadcrumbs>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        items: [
+          {
+            text: 'Dashboard',
+            disabled: false
+          },
+          {
+            text: 'Link 1',
+            disabled: false
+          },
+          {
+            text: 'Link 2',
+            disabled: true
+          }
+        ]
+      }
+    }
+  }
+</script>