Merge branch 'dev' of github.com:vuetifyjs/vuetifyjs.com into dev

src/components/helpers/Parameters.vue

@@ -231,7 +231,7 @@
         return this.genTypescriptDef(props)
       },
       genDefault (value) {
-        if (typeof value !== 'string') return JSON.stringify(value)
+        if (typeof value !== 'string') return JSON.stringify(value, null, 2)
         else return value
       },
       genTypescriptDef (obj) {

src/data/components.json

@@ -549,7 +549,8 @@
       "switchesBoolean",
       "switchesArray",
       "switchesStates",
-      "switchesColors"
+      "switchesColors",
+      "labelSlot"
     ],
     "spec": false
   },
@@ -669,6 +670,7 @@
       "clearable",
       "iconEvents",
       "iconSlots",
+      "labelSlot",
       "characterCounter",
       "password",
       "validation",
@@ -713,6 +715,9 @@
   "toolbars": {
     "components": [
       "v-toolbar",
+      "v-toolbar-items",
+      "v-toolbar-side-icon",
+      "v-toolbar-title",
       "v-system-bar"
     ],
     "examples": [

src/data/layout/app-drawer-items.js

@@ -103,6 +103,9 @@ export default [
           { name: 'windows', title: 'Windows' }
         ]
       },
+      { name: 'hover', title: 'Hover' },
+      { name: 'icons', title: 'Icons' },
+      { name: 'images', 'title': 'Images' },
       {
         title: 'Inputs & controls',
         group: '(autocompletes|combobox|forms|inputs|overflow-btns|selects|selection|text-fields|sliders|textarea)',
@@ -120,9 +123,6 @@ export default [
           { name: 'text-fields', title: 'Text fields' }
         ]
       },
-      { name: 'hover', title: 'Hover' },
-      { name: 'icons', title: 'Icons' },
-      { name: 'images', 'title': 'Images' },
       { name: 'jumbotrons', title: 'Jumbotrons', badge: 'deprecated', color: 'black' },
       { name: 'lists', title: 'Lists' },
       { name: 'menus', title: 'Menus' },

src/examples/date-pickers/dateColorable.vue

@@ -13,8 +13,8 @@
   export default {
     data () {
       return {
-        picker: null,
-        picker2: null
+        picker: new Date().toISOString().substr(0, 10),
+        picker2: new Date().toISOString().substr(0, 10)
       }
     }
   }

src/examples/date-pickers/dateCurrent.vue

@@ -13,7 +13,7 @@
   export default {
     data () {
       return {
-        date1: null,
+        date1: new Date().toISOString().substr(0, 10),
         date2: '2013-07-29'
       }
     }

src/examples/date-pickers/dateDialogAndMenu.vue

@@ -54,11 +54,9 @@
     </v-flex>
     <v-flex xs12 sm6 md4>
       <v-menu
-        ref="menu2"
         :close-on-content-click="false"
         v-model="menu2"
         :nudge-right="40"
-        :return-value.sync="date"
         lazy
         transition="scale-transition"
         offset-y
@@ -72,8 +70,7 @@
           prepend-icon="event"
           readonly
         ></v-text-field>
-        <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker>
-
+        <v-date-picker v-model="date" @input="menu2 = false"></v-date-picker>
       </v-menu>
     </v-flex>
     <v-spacer></v-spacer>
@@ -83,7 +80,7 @@
 <script>
   export default {
     data: () => ({
-      date: null,
+      date: new Date().toISOString().substr(0, 10),
       menu: false,
       modal: false,
       menu2: false

src/examples/date-pickers/dateEvents.vue

@@ -23,8 +23,8 @@
   export default {
     data: () => ({
       arrayEvents: null,
-      date1: null,
-      date2: null
+      date1: new Date().toISOString().substr(0, 10),
+      date2: new Date().toISOString().substr(0, 10)
     }),
 
     mounted () {

src/examples/date-pickers/dateFormatting.vue

@@ -59,9 +59,9 @@
 
 <script>
   export default {
-    data: () => ({
-      date: null,
-      dateFormatted: null,
+    data: vm => ({
+      date: new Date().toISOString().substr(0, 10),
+      dateFormatted: vm.formatDate(new Date().toISOString().substr(0, 10)),
       menu1: false,
       menu2: false
     }),

src/examples/date-pickers/dateIcons.vue

@@ -15,7 +15,7 @@
   export default {
     data () {
       return {
-        picker: null
+        picker: new Date().toISOString().substr(0, 10)
       }
     }
   }

src/examples/date-pickers/dateInternationalization.vue

@@ -21,7 +21,7 @@
   export default {
     data () {
       return {
-        picker: null
+        picker: new Date().toISOString().substr(0, 10)
       }
     }
   }

src/examples/date-pickers/dateLight.vue

@@ -17,7 +17,7 @@
   export default {
     data () {
       return {
-        picker: null,
+        picker: new Date().toISOString().substr(0, 10),
         landscape: false,
         reactive: false
       }

src/examples/date-pickers/datePickerDate.vue

@@ -21,7 +21,7 @@
 <script>
   export default {
     data: () => ({
-      date: null,
+      date: new Date().toISOString().substr(0, 10),
       pickerDate: null,
       notes: [],
       allNotes: [

src/examples/date-pickers/dateReadonly.vue

@@ -8,7 +8,7 @@
   export default {
     data () {
       return {
-        date: null
+        date: new Date().toISOString().substr(0, 10)
       }
     }
   }

src/examples/date-pickers/dateWidth.vue

@@ -17,7 +17,7 @@
 <script>
   export default {
     data: () => ({
-      date: '2018-03-02'
+      date: new Date().toISOString().substr(0, 10)
     })
   }
 </script>

src/examples/date-pickers/monthColorable.vue

@@ -13,8 +13,8 @@
   export default {
     data () {
       return {
-        picker: null,
-        picker2: null
+        picker: new Date().toISOString().substr(0, 7),
+        picker2: new Date().toISOString().substr(0, 7)
       }
     }
   }

src/examples/date-pickers/monthCurrent.vue

@@ -13,7 +13,7 @@
   export default {
     data () {
       return {
-        month1: null,
+        month1: new Date().toISOString().substr(0, 7),
         month2: '2013-09'
       }
     }

src/examples/date-pickers/monthDialogAndMenu.vue

@@ -64,7 +64,7 @@
 <script>
   export default {
     data: () => ({
-      date: null,
+      date: new Date().toISOString().substr(0, 7),
       menu: false,
       modal: false
     })

src/examples/date-pickers/monthIcons.vue

@@ -16,7 +16,7 @@
   export default {
     data () {
       return {
-        picker: null
+        picker: new Date().toISOString().substr(0, 7)
       }
     }
   }

src/examples/date-pickers/monthInternationalization.vue

@@ -21,7 +21,7 @@
   export default {
     data () {
       return {
-        picker: null
+        picker: new Date().toISOString().substr(0, 7)
       }
     }
   }

src/examples/date-pickers/monthLight.vue

@@ -9,7 +9,7 @@
   export default {
     data () {
       return {
-        picker: null,
+        picker: new Date().toISOString().substr(0, 7),
         landscape: false
       }
     }

src/examples/date-pickers/monthReadonly.vue

@@ -8,7 +8,7 @@
   export default {
     data () {
       return {
-        date: null
+        date: new Date().toISOString().substr(0, 7)
       }
     }
   }

src/examples/date-pickers/monthWidth.vue

@@ -19,7 +19,7 @@
 <script>
   export default {
     data: () => ({
-      date: '2018-03'
+      date: new Date().toISOString().substr(0, 7)
     })
   }
 </script>

src/examples/dialogs/form.vue

@@ -1,6 +1,6 @@
 <template>
   <v-layout row justify-center>
-    <v-dialog v-model="dialog" persistent max-width="500px">
+    <v-dialog v-model="dialog" persistent max-width="600px">
       <v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
       <v-card>
         <v-card-title>
@@ -10,29 +10,29 @@
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs12 sm6 md4>
-                <v-text-field label="Legal first name" required></v-text-field>
+                <v-text-field label="Legal first name*" required></v-text-field>
               </v-flex>
               <v-flex xs12 sm6 md4>
                 <v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
               </v-flex>
               <v-flex xs12 sm6 md4>
                 <v-text-field
-                  label="Legal last name"
+                  label="Legal last name*"
                   hint="example of persistent helper text"
                   persistent-hint
                   required
                 ></v-text-field>
               </v-flex>
               <v-flex xs12>
-                <v-text-field label="Email" required></v-text-field>
+                <v-text-field label="Email*" required></v-text-field>
               </v-flex>
               <v-flex xs12>
-                <v-text-field label="Password" type="password" required></v-text-field>
+                <v-text-field label="Password*" type="password" required></v-text-field>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-select
                   :items="['0-17', '18-29', '30-54', '54+']"
-                  label="Age"
+                  label="Age*"
                   required
                 ></v-select>
               </v-flex>
@@ -41,7 +41,6 @@
                   :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
                   label="Interests"
                   multiple
-                  chips
                 ></v-autocomplete>
               </v-flex>
             </v-layout>

src/examples/layouts/complex.vue

@@ -94,10 +94,10 @@
 <script>
   export default {
     data: () => ({
-      drawer: true,
-      drawerRight: true,
-      right: null,
-      left: null
+      drawer: null,
+      drawerRight: null,
+      right: false,
+      left: false
     }),
     props: {
       source: String

src/examples/layouts/dark.vue

@@ -64,7 +64,7 @@
 <script>
   export default {
     data: () => ({
-      drawer: true
+      drawer: null
     }),
     props: {
       source: String

src/examples/layouts/googleYoutube.vue

@@ -99,7 +99,7 @@
 <script>
   export default {
     data: () => ({
-      drawer: true,
+      drawer: null,
       items: [
         { icon: 'trending_up', text: 'Most Popular' },
         { icon: 'subscriptions', text: 'Subscriptions' },

src/examples/selection-controls/labelSlot.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-container fluid>
+    <v-checkbox v-model="checkbox">
+      <div slot="label">
+        I agree that
+        <v-tooltip bottom>
+          <a slot="activator" target="_blank" href="http://vuetifyjs.com" @click.stop>Vuetify</a>
+          Opens in new window
+        </v-tooltip>
+        is awesome
+      </div>
+    </v-checkbox>
+
+    <v-radio-group v-model="radios">
+      <div slot="label">Your favourite <strong>search engine</strong></div>
+      <v-radio value="Google">
+        <div slot="label">Of course it's <strong class="success--text">Google</strong></div>
+      </v-radio>
+      <v-radio value="Duckduckgo">
+        <div slot="label">Definitely <strong class="primary--text">Duckduckgo</strong></div>
+      </v-radio>
+    </v-radio-group>
+
+    <v-switch v-model="switchMe">
+      <template slot="label">
+        Turn on the progress: <v-progress-circular :indeterminate="switchMe" :value="0" size="24" class="ml-2"></v-progress-circular>
+      </template>
+    </v-switch>
+  </v-container>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checkbox: false,
+        radios: 'Duckduckgo',
+        switchMe: false
+      }
+    }
+  }
+</script>

src/examples/text-fields/labelSlot.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-form>
+    <v-container>
+      <v-text-field>
+        <template slot="label">
+          What about <strong>icon</strong> here? <v-icon style="vertical-align: middle">find_in_page</v-icon>
+        </template>
+      </v-text-field>
+    </v-container>
+  </v-form>
+</template>