Merge pull request #1 from vuetifyjs/dev

pull from upstream

examples/date-pickers/dateDialogAndMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <v-layout row wrap>
-    <v-flex xs11 sm5>
+    <v-flex xs12 sm6 md4>
       <v-menu
         ref="menu"
         lazy
@@ -28,7 +28,7 @@
       </v-menu>
     </v-flex>
     <v-spacer></v-spacer>
-    <v-flex xs11 sm5>
+    <v-flex xs12 sm6 md4>
       <v-dialog
         ref="dialog"
         persistent
@@ -52,6 +52,31 @@
         </v-date-picker>
       </v-dialog>
     </v-flex>
+    <v-flex xs12 sm6 md4>
+      <v-menu
+        ref="menu2"
+        lazy
+        :close-on-content-click="false"
+        v-model="menu2"
+        transition="scale-transition"
+        offset-y
+        full-width
+        :nudge-right="40"
+        min-width="290px"
+        :return-value.sync="date"
+      >
+        <v-text-field
+          slot="activator"
+          label="Picker without buttons"
+          v-model="date"
+          prepend-icon="event"
+          readonly
+        ></v-text-field>
+        <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker>
+
+      </v-menu>
+    </v-flex>
+    <v-spacer></v-spacer>
   </v-layout>
 </template>
 
@@ -60,7 +85,8 @@
     data: () => ({
       date: null,
       menu: false,
-      modal: false
+      modal: false,
+      menu2: false
     })
   }
 </script>

examples/dialogs/fullscreen.vue

@@ -1,6 +1,6 @@
 <template>
   <v-layout row justify-center>
-    <v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition" :overlay="false">
+    <v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition" :hide-overlay="false">
       <v-btn color="primary" dark slot="activator">Open Dialog</v-btn>
       <v-card>
         <v-toolbar dark color="primary">

examples/dialogs/simple.vue

@@ -16,7 +16,7 @@
         v-model="dialog"
         fullscreen
         transition="dialog-bottom-transition"
-        :overlay="false"
+        :hide-overlay="false"
         scrollable
       >
         <v-card tile>

examples/navigation-drawers/combined.vue

@@ -0,0 +1,74 @@
+<template>
+  <v-navigation-drawer
+    class="pb-0"
+    floating
+    hide-overlay
+    stateless
+    width="380"
+    v-model="drawer"
+  >
+    <v-layout fill-height>
+      <v-navigation-drawer
+        dark
+        mini-variant
+        stateless
+        value="true"
+      >
+        <v-toolbar flat class="transparent">
+          <v-list class="pa-0">
+            <v-list-tile avatar>
+              <v-list-tile-avatar>
+                <img src="https://randomuser.me/api/portraits/men/85.jpg" >
+              </v-list-tile-avatar>
+              <v-list-tile-content>
+                <v-list-tile-title>John Leider</v-list-tile-title>
+              </v-list-tile-content>
+              <v-list-tile-action>
+                <v-btn icon @click.native.stop="mini = !mini">
+                  <v-icon>chevron_left</v-icon>
+                </v-btn>
+              </v-list-tile-action>
+            </v-list-tile>
+          </v-list>
+        </v-toolbar>
+        <v-list class="pt-0" dense>
+          <v-divider></v-divider>
+          <v-list-tile v-for="item in items" :key="item.title" @click="">
+            <v-list-tile-action>
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+      </v-navigation-drawer>
+      <v-list class="grow">
+        <v-list-tile
+          v-for="link in links"
+          :key="link"
+          @click=""
+        >
+          <v-list-tile-title v-text="link"></v-list-tile-title>
+        </v-list-tile>
+      </v-list>
+    </v-layout>
+  </v-navigation-drawer>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        drawer: true,
+        items: [
+          { title: 'Home', icon: 'dashboard' },
+          { title: 'About', icon: 'question_answer' }
+        ],
+        links: ['Home', 'Contacts', 'Settings'],
+        mini: true,
+        right: null
+      }
+    }
+  }
+</script>

lang/en/components/NavigationDrawers.js

@@ -31,6 +31,10 @@ export default {
       header: 'Dark theme',
       desc: 'Vuetify also supports the dark application theme. This will not override components that have default themes so in some cases it will be necessary to manually set the dark theme accents.',
       uninverted: true
+    },
+    combined: {
+      header: 'Combined drawers',
+      desc: 'Drawers are flexible and are easily adapted to any use-case.'
     }
   }],
   props: {

lang/en/components/Selects.js

@@ -44,7 +44,7 @@ export default {
   props: {
     attach: 'Mixins.Detachable.props.attach',
     autocomplete: 'Filter the items in the list based on user input',
-    browserAutocomplete: 'Set the autocomplete prop for the search input when using the **autocomplete** prop',
+    browserAutocomplete: 'Set browser autocompletion for the search input',
     cacheItems: 'Keeps a local _unique_ copy of all items that have been passed through the **items** prop.',
     chips: 'Changes display of selections to chips',
     combobox: 'The single select variant of **tags**',

lang/en/getting-started/QuickStart.js

@@ -14,7 +14,8 @@ export default {
   existingText2: 'For a detailed explanation of how to get `npm` running in your environment, check out the [official documentation](https://docs.npmjs.com/getting-started/what-is-npm). Alternatively, if you wish to use yarn, you can find the official documentation [here](https://yarnpkg.com/lang/en/docs/). Once setup, you can run either command from your command prompt.',
   existingText3: 'Once Vuetify has been installed, navigate to your applications main entry point. In most cases this will be `index.js` or `main.js`. In this file you will import Vuetify and tell Vue to use it.',
   existingText4: 'You will also need to include the Vuetify css file. Simply include the Vuetify css file in your `index.html` or import the actual stylus file or the minified css.',
-  existingText5: 'The easiest way to include the Material Design icons is to add a `link` tag to your `index.html` file.',
+  existingText5: 'Some components like the date picker use Material Design Icons. The easiest way to include them is to add a `link` tag to your `index.html` file.',
+  existingText6: 'Alternatively use `npm` or `yarn` to install `material-design-icons-iconfont`.',
   alert2: 'Warning: While Vuetify attempts to not cause any css collision as much as possible, there is no guarantee that your custom styles will not alter your experience when integrating this framework into your existing project.',
   ie11Header: 'IE11 & Safari 9 support',
   ie11Text: 'In your project directory, install `babel-polyfill` and import it into your main entry:',

lang/ja/components/Dialogs.js

@@ -1,54 +1,61 @@
 export default {
   header: 'Dialog',
-  headerText: 'The `v-dialog` component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Use dialogs sparingly because they are interruptive.',
+  headerText:
+    '`v-dialog`コンポーネントは、特定のタスクについてユーザに通知し、重要な情報を含んだり意思決定を必要とするような複数のタスクを伴う可能性があります。割り込み的な要素ですので、ダイアログは控えめに使用してください。 ',
   components: ['v-dialog'],
-  examples: [{
-    simple: {
-      header: 'Simple dialogs',
-      desc: 'Choosing an option immediately commits the option and closes the menu. Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog.',
-      uninverted: true
-    },
-    withoutActivator: {
-      header: 'Without activator',
-      desc: 'If for some reason you are unable to use the activator slot, be sure to add the `.stop` modifier to the event that triggers the dialog.',
-      uninverted: true
-    },
-    modal: {
-      header: 'Modal',
-      desc: 'Similar to a Simple Dialog, except that it\'s not dismissed when touching outside.',
-      uninverted: true
-    },
-    fullscreen: {
-      header: 'Fullscreen',
-      desc: 'Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.',
-      uninverted: true
-    },
-    form: {
-      header: 'Form',
-      desc: 'Just a simple example of a form in a dialog.',
-      uninverted: true
-    },
-    scrollable: {
-      header: 'Scrollable',
-      desc: 'Example of a dialog with scrollable content.',
-      uninverted: true
-    },
-    overflowed: {
-      header: 'Overflowed',
-      desc: 'Modals that do not fit within the available window space will scroll the container.',
-      uninverted: true
+  examples: [
+    {
+      simple: {
+        header: 'シンプルなダイアログ',
+        desc:
+          'オプションを選択するとすぐにオプションがコミットされ、メニューが閉じます。ダイアログの外側に触れる、または戻るを押すと、アクションがキャンセルされ、ダイアログが閉じます。',
+        uninverted: true
+      },
+      withoutActivator: {
+        header: 'activatorを使用しない場合',
+        desc:
+          '何らかの理由で `activator` slotを使用しない場合は、ダイアログをトリガするイベントに `.stop`修飾子を必ず追加してください。',
+        uninverted: true
+      },
+      modal: {
+        header: 'モーダル',
+        desc: 'シンプルなダイアログに似ていますが、モーダルの外側に触れてもモーダルは閉じません。',
+        uninverted: true
+      },
+      fullscreen: {
+        header: 'フルスクリーンのダイアログ',
+        desc:
+          'スペースが限られているため、モバイルデバイスにとって、フルスクリーンのダイアログは大画面のデバイスで使用されるダイアログよりも適している可能性があります。',
+        uninverted: true
+      },
+      form: {
+        header: 'ダイアログ内のフォーム',
+        desc: 'ダイアログ内のフォームのシンプルな例です。',
+        uninverted: true
+      },
+      scrollable: {
+        header: 'スクロール可能なダイアログ',
+        desc: 'スクロール可能なコンテンツを持つダイアログの例です。',
+        uninverted: true
+      },
+      overflowed: {
+        header: 'オーバーフロー',
+        desc: '利用可能なウィンドウスペースに収まらないモーダルは、コンテナでスクロールされます。',
+        uninverted: true
+      }
     }
-  }],
+  ],
   props: {
-    disabled: 'Disabled the ability to open the dialog',
-    fullWidth: 'Specifies the modal to force 100% width',
-    fullscreen: 'Changes layout for fullscreen display',
-    hideOverlay: 'Hide the display of the overlay',
+    disabled: 'ダイアログを開く機能を無効にします。',
+    fullWidth: 'モーダルの幅が100%となるよう強制的に指定します。',
+    fullscreen: 'フルスクリーン表示になるようレイアウトを変更します。',
+    hideOverlay: '前面以外の表示を隠します。Hide the display of the overlay',
     lazy: 'Mixins.Bootable.props.lazy',
-    maxWidth: 'The maximum width of the content',
+    maxWidth: 'コンテンツの最大幅を指定します。',
     origin: 'Mixins.Transitionable.props.origin',
-    persistent: 'Clicking outside will not dismiss the dialog',
-    scrollable: 'When set to true, expects a card, card-title, card-text and card-actions. Additionally card-text should have specified height. Will set card-text to overflow-y',
-    width: 'Sets the dialog width'
+    persistent: 'ダイアログの外側をクリックしてもダイアログを消しません。',
+    scrollable:
+      'trueを設定すると、 `card` 、 `card-title` 、 `card-text` 、 `card-action` が必要です。さらに、card-textの高さを設定する必要があります。 `card-text` は、スタイルの `overflow-y` を設定します。',
+    width: 'ダイアログの幅を設定します。'
   }
 }

lang/ja/components/Footer.js

@@ -1,28 +1,28 @@
 export default {
   header: 'Footer',
-  headerText: 'The `v-footer` component is used for displaying general information that a user might want to access from any page within your site.',
+  headerText: '`v-footer`コンポーネントは、あなたのサイト内のどのページからでもアクセスしたい一般的な情報を表示するために使われます。',
   components: ['v-footer'],
   examples: [{
     default: {
       header: 'Default',
-      desc: 'The footer component is just a basic container.'
+      desc: 'フッターコンポーネントは単なる基本的なコンテナです。'
     },
     companyFooter: {
-      header: 'Company Footer',
-      desc: 'The footer component as a basic company footer with links.'
+      header: '会社のフッター',
+      desc: 'リンクを持つ基本的な会社のフッターとしてのフッターコンポーネントです。'
     },
     indigoFooter: {
-      header: 'Indigo Footer',
-      desc: 'The footer component with Indigo background color and social media icons and button.'
+      header: 'インディゴ色のフッター',
+      desc: 'インディゴ色の背景色で、ソーシャルメディアのアイコンとボタンのあるフッターコンポーネントです。'
     },
     tealFooter: {
-      header: 'Teal Footer',
-      desc: 'The footer component with a Teal color header and columns and rows of links.'
+      header: '青緑色のフッター',
+      desc: '青緑色見出しと、列と行のリンクを含むフッターコンポーネントです。'
     }
   }],
   props: {
     absolute: 'Mixins.Positionable.props.absolute',
     fixed: 'Mixins.Positionable.props.fixed',
-    inset: 'Positions the toolbar offset from an application `v-navigation-drawer`'
+    inset: 'アプリケーションからのツールバーの位置を `v-navigation-drawer`で指定します。'
   }
 }

lang/ja/components/Forms.js

@@ -1,30 +1,36 @@
 export default {
   header: 'Form',
-  headerText: 'When it comes to form validation, Vuetify has a multitude of integrations and baked in functionality. Want to use a 3rd party validation plugin? Out of the box you can use [Vee-validate](https://github.com/baianat/Vee-validate) and [vuelidate](https://github.com/monterail/vuelidate).',
+  headerText:
+    'フォームのバリデーションに関して、Vuetifyには多数の機能が組み込まれています。なお、サードパーティのバリデーションプラグインである[Vee-validate](https://github.com/baianat/Vee-validate)や[vuelidate](https://github.com/monterail/vuelidate)も使用することができます。',
   components: ['v-form'],
-  examples: [{
-    basicValidation: {
-      header: 'VForm - Basic validation',
-      desc: 'The internal `v-form` component makes it easy to add validation to form inputs. All input components have a `rules` prop which takes an array of functions. Whenever the value of an input is changed, each function in the array will receive the new value. If a function returns false or a string, validation has failed.'
-    },
-    validationWithSubmitAndClear: {
-      header: 'Validation with submit & clear',
-      desc: 'The `v-form` component has two functions that can be accessed by setting a ref on the component. `validate()` will validate all inputs and return if they are all valid or not. `reset()` will clear validation errors from all inputs.'
-    },
-    vuelidate: {
-      header: 'Vuelidate',
-      desc: ''
-    },
-    veeValidate: {
-      header: 'Vee-validate',
-      desc: 'Vee-validate is another validation plugin that allows you to check your forms. One caveat is that you must add the **type="checkbox"** to properly validate a `v-checkbox` when using the **value** prop.'
+  examples: [
+    {
+      basicValidation: {
+        header: 'VForm - 基本的なバリデーション',
+        desc:
+          '内部の `v-form` コンポーネントを使用すると、簡単にフォームにバリデーションを追加できます。全てのフォームコンポーネントは、 `rules` prop という関数の配列を保持しています。入力値が変更される度に、配列内の各関数は新しいフォームの値を受け取ります。関数がfalseまたは文字列を返却した場合、バリデーションの結果はfalseです。'
+      },
+      validationWithSubmitAndClear: {
+        header: '送信時のバリデーションとバリデーションのクリア',
+        desc:
+          ' `v-form` コンポーネントは、コンポーネントからのrefを設定することでアクセスが可能になる2つの関数を保持しています。 `validate()` は全ての入力値をバリデートし、全てが有効な入力かどうかを返却します。 `reset()` は、全ての入力値からバリデーションエラーをクリアにします。'
+      },
+      vuelidate: {
+        header: 'Vuelidate',
+        desc: ''
+      },
+      veeValidate: {
+        header: 'Vee-validate',
+        desc:
+          'Vee-validateは、フォームのバリデーションが可能なもうひとつのバリデーションプラグインです。なお、 **value** propを使用するときに `v-checkbox`を正しくバリデートするには、**type =" checkbox "** を追加する必要があるので注意して下さい。'
+      }
     }
-  }],
+  ],
   props: {
-    lazyValidation: 'If enabled, **value** will always be _true_ unless there are visible validation errors. You can still call `validate()` to manually trigger validation'
+    lazyValidation: '有効にすると、表示されるバリデーションエラーが無い限り、 **value** は常に _true_ となります。'
   },
   functions: {
-    reset: 'Resets validation for all inputs',
-    validate: 'Validates all inputs and returns result'
+    reset: '全ての入力値に対するバリデートをリセットします。',
+    validate: '全ての入力値をバリデートし結果を返却します。'
   }
 }