Skip to content

Commit fb38b09

Browse files
jdunkjdunk
authored
Merge pull request #1 from vuetifyjs/dev
pull from upstream
2 parents a1fde50 + e4353f3 commit fb38b09

File tree

16 files changed

+213
-91
lines changed

16 files changed

+213
-91
lines changed

‎examples/date-pickers/dateDialogAndMenu.vue

+29-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-layout row wrap>
3-
<v-flex xs11 sm5>
3+
<v-flex xs12 sm6 md4>
44
<v-menu
55
ref="menu"
66
lazy
@@ -28,7 +28,7 @@
2828
</v-menu>
2929
</v-flex>
3030
<v-spacer></v-spacer>
31-
<v-flex xs11 sm5>
31+
<v-flex xs12 sm6 md4>
3232
<v-dialog
3333
ref="dialog"
3434
persistent
@@ -52,6 +52,31 @@
5252
</v-date-picker>
5353
</v-dialog>
5454
</v-flex>
55+
<v-flex xs12 sm6 md4>
56+
<v-menu
57+
ref="menu2"
58+
lazy
59+
:close-on-content-click="false"
60+
v-model="menu2"
61+
transition="scale-transition"
62+
offset-y
63+
full-width
64+
:nudge-right="40"
65+
min-width="290px"
66+
:return-value.sync="date"
67+
>
68+
<v-text-field
69+
slot="activator"
70+
label="Picker without buttons"
71+
v-model="date"
72+
prepend-icon="event"
73+
readonly
74+
></v-text-field>
75+
<v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker>
76+
77+
</v-menu>
78+
</v-flex>
79+
<v-spacer></v-spacer>
5580
</v-layout>
5681
</template>
5782

@@ -60,7 +85,8 @@
6085
data: () => ({
6186
date: null,
6287
menu: false,
63-
modal: false
88+
modal: false,
89+
menu2: false
6490
})
6591
}
6692
</script>

‎examples/dialogs/fullscreen.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-layout row justify-center>
3-
<v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition" :overlay="false">
3+
<v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition" :hide-overlay="false">
44
<v-btn color="primary" dark slot="activator">Open Dialog</v-btn>
55
<v-card>
66
<v-toolbar dark color="primary">

‎examples/dialogs/simple.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
v-model="dialog"
1717
fullscreen
1818
transition="dialog-bottom-transition"
19-
:overlay="false"
19+
:hide-overlay="false"
2020
scrollable
2121
>
2222
<v-card tile>

‎examples/navigation-drawers/combined.vue

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<v-navigation-drawer
3+
class="pb-0"
4+
floating
5+
hide-overlay
6+
stateless
7+
width="380"
8+
v-model="drawer"
9+
>
10+
<v-layout fill-height>
11+
<v-navigation-drawer
12+
dark
13+
mini-variant
14+
stateless
15+
value="true"
16+
>
17+
<v-toolbar flat class="transparent">
18+
<v-list class="pa-0">
19+
<v-list-tile avatar>
20+
<v-list-tile-avatar>
21+
<img src="https://randomuser.me/api/portraits/men/85.jpg" >
22+
</v-list-tile-avatar>
23+
<v-list-tile-content>
24+
<v-list-tile-title>John Leider</v-list-tile-title>
25+
</v-list-tile-content>
26+
<v-list-tile-action>
27+
<v-btn icon @click.native.stop="mini = !mini">
28+
<v-icon>chevron_left</v-icon>
29+
</v-btn>
30+
</v-list-tile-action>
31+
</v-list-tile>
32+
</v-list>
33+
</v-toolbar>
34+
<v-list class="pt-0" dense>
35+
<v-divider></v-divider>
36+
<v-list-tile v-for="item in items" :key="item.title" @click="">
37+
<v-list-tile-action>
38+
<v-icon>{{ item.icon }}</v-icon>
39+
</v-list-tile-action>
40+
<v-list-tile-content>
41+
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
42+
</v-list-tile-content>
43+
</v-list-tile>
44+
</v-list>
45+
</v-navigation-drawer>
46+
<v-list class="grow">
47+
<v-list-tile
48+
v-for="link in links"
49+
:key="link"
50+
@click=""
51+
>
52+
<v-list-tile-title v-text="link"></v-list-tile-title>
53+
</v-list-tile>
54+
</v-list>
55+
</v-layout>
56+
</v-navigation-drawer>
57+
</template>
58+
59+
<script>
60+
export default {
61+
data () {
62+
return {
63+
drawer: true,
64+
items: [
65+
{ title: 'Home', icon: 'dashboard' },
66+
{ title: 'About', icon: 'question_answer' }
67+
],
68+
links: ['Home', 'Contacts', 'Settings'],
69+
mini: true,
70+
right: null
71+
}
72+
}
73+
}
74+
</script>

‎lang/en/components/NavigationDrawers.js

+4
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ export default {
3131
header: 'Dark theme',
3232
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.',
3333
uninverted: true
34+
},
35+
combined: {
36+
header: 'Combined drawers',
37+
desc: 'Drawers are flexible and are easily adapted to any use-case.'
3438
}
3539
}],
3640
props: {

‎lang/en/components/Selects.js

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

‎lang/en/getting-started/QuickStart.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ export default {
1414
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.',
1515
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.',
1616
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.',
17-
existingText5: 'The easiest way to include the Material Design icons is to add a `link` tag to your `index.html` file.',
17+
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.',
18+
existingText6: 'Alternatively use `npm` or `yarn` to install `material-design-icons-iconfont`.',
1819
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.',
1920
ie11Header: 'IE11 & Safari 9 support',
2021
ie11Text: 'In your project directory, install `babel-polyfill` and import it into your main entry:',

‎lang/ja/components/Dialogs.js

+52-45
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,61 @@
11
export default {
22
header: 'Dialog',
3-
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.',
3+
headerText:
4+
'`v-dialog`コンポーネントは、特定のタスクについてユーザに通知し、重要な情報を含んだり意思決定を必要とするような複数のタスクを伴う可能性があります。割り込み的な要素ですので、ダイアログは控えめに使用してください。 ',
45
components: ['v-dialog'],
5-
examples: [{
6-
simple: {
7-
header: 'Simple dialogs',
8-
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.',
9-
uninverted: true
10-
},
11-
withoutActivator: {
12-
header: 'Without activator',
13-
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.',
14-
uninverted: true
15-
},
16-
modal: {
17-
header: 'Modal',
18-
desc: 'Similar to a Simple Dialog, except that it\'s not dismissed when touching outside.',
19-
uninverted: true
20-
},
21-
fullscreen: {
22-
header: 'Fullscreen',
23-
desc: 'Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.',
24-
uninverted: true
25-
},
26-
form: {
27-
header: 'Form',
28-
desc: 'Just a simple example of a form in a dialog.',
29-
uninverted: true
30-
},
31-
scrollable: {
32-
header: 'Scrollable',
33-
desc: 'Example of a dialog with scrollable content.',
34-
uninverted: true
35-
},
36-
overflowed: {
37-
header: 'Overflowed',
38-
desc: 'Modals that do not fit within the available window space will scroll the container.',
39-
uninverted: true
6+
examples: [
7+
{
8+
simple: {
9+
header: 'シンプルなダイアログ',
10+
desc:
11+
'オプションを選択するとすぐにオプションがコミットされ、メニューが閉じます。ダイアログの外側に触れる、または戻るを押すと、アクションがキャンセルされ、ダイアログが閉じます。',
12+
uninverted: true
13+
},
14+
withoutActivator: {
15+
header: 'activatorを使用しない場合',
16+
desc:
17+
'何らかの理由で `activator` slotを使用しない場合は、ダイアログをトリガするイベントに `.stop`修飾子を必ず追加してください。',
18+
uninverted: true
19+
},
20+
modal: {
21+
header: 'モーダル',
22+
desc: 'シンプルなダイアログに似ていますが、モーダルの外側に触れてもモーダルは閉じません。',
23+
uninverted: true
24+
},
25+
fullscreen: {
26+
header: 'フルスクリーンのダイアログ',
27+
desc:
28+
'スペースが限られているため、モバイルデバイスにとって、フルスクリーンのダイアログは大画面のデバイスで使用されるダイアログよりも適している可能性があります。',
29+
uninverted: true
30+
},
31+
form: {
32+
header: 'ダイアログ内のフォーム',
33+
desc: 'ダイアログ内のフォームのシンプルな例です。',
34+
uninverted: true
35+
},
36+
scrollable: {
37+
header: 'スクロール可能なダイアログ',
38+
desc: 'スクロール可能なコンテンツを持つダイアログの例です。',
39+
uninverted: true
40+
},
41+
overflowed: {
42+
header: 'オーバーフロー',
43+
desc: '利用可能なウィンドウスペースに収まらないモーダルは、コンテナでスクロールされます。',
44+
uninverted: true
45+
}
4046
}
41-
}],
47+
],
4248
props: {
43-
disabled: 'Disabled the ability to open the dialog',
44-
fullWidth: 'Specifies the modal to force 100% width',
45-
fullscreen: 'Changes layout for fullscreen display',
46-
hideOverlay: 'Hide the display of the overlay',
49+
disabled: 'ダイアログを開く機能を無効にします。',
50+
fullWidth: 'モーダルの幅が100%となるよう強制的に指定します。',
51+
fullscreen: 'フルスクリーン表示になるようレイアウトを変更します。',
52+
hideOverlay: '前面以外の表示を隠します。Hide the display of the overlay',
4753
lazy: 'Mixins.Bootable.props.lazy',
48-
maxWidth: 'The maximum width of the content',
54+
maxWidth: 'コンテンツの最大幅を指定します。',
4955
origin: 'Mixins.Transitionable.props.origin',
50-
persistent: 'Clicking outside will not dismiss the dialog',
51-
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',
52-
width: 'Sets the dialog width'
56+
persistent: 'ダイアログの外側をクリックしてもダイアログを消しません。',
57+
scrollable:
58+
'trueを設定すると、 `card` 、 `card-title` 、 `card-text` 、 `card-action` が必要です。さらに、card-textの高さを設定する必要があります。 `card-text` は、スタイルの `overflow-y` を設定します。',
59+
width: 'ダイアログの幅を設定します。'
5360
}
5461
}

‎lang/ja/components/Footer.js

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

‎lang/ja/components/Forms.js

+27-21
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
11
export default {
22
header: 'Form',
3-
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).',
3+
headerText:
4+
'フォームのバリデーションに関して、Vuetifyには多数の機能が組み込まれています。なお、サードパーティのバリデーションプラグインである[Vee-validate](https://github.com/baianat/Vee-validate)や[vuelidate](https://github.com/monterail/vuelidate)も使用することができます。',
45
components: ['v-form'],
5-
examples: [{
6-
basicValidation: {
7-
header: 'VForm - Basic validation',
8-
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.'
9-
},
10-
validationWithSubmitAndClear: {
11-
header: 'Validation with submit & clear',
12-
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.'
13-
},
14-
vuelidate: {
15-
header: 'Vuelidate',
16-
desc: ''
17-
},
18-
veeValidate: {
19-
header: 'Vee-validate',
20-
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.'
6+
examples: [
7+
{
8+
basicValidation: {
9+
header: 'VForm - 基本的なバリデーション',
10+
desc:
11+
'内部の `v-form` コンポーネントを使用すると、簡単にフォームにバリデーションを追加できます。全てのフォームコンポーネントは、 `rules` prop という関数の配列を保持しています。入力値が変更される度に、配列内の各関数は新しいフォームの値を受け取ります。関数がfalseまたは文字列を返却した場合、バリデーションの結果はfalseです。'
12+
},
13+
validationWithSubmitAndClear: {
14+
header: '送信時のバリデーションとバリデーションのクリア',
15+
desc:
16+
' `v-form` コンポーネントは、コンポーネントからのrefを設定することでアクセスが可能になる2つの関数を保持しています。 `validate()` は全ての入力値をバリデートし、全てが有効な入力かどうかを返却します。 `reset()` は、全ての入力値からバリデーションエラーをクリアにします。'
17+
},
18+
vuelidate: {
19+
header: 'Vuelidate',
20+
desc: ''
21+
},
22+
veeValidate: {
23+
header: 'Vee-validate',
24+
desc:
25+
'Vee-validateは、フォームのバリデーションが可能なもうひとつのバリデーションプラグインです。なお、 **value** propを使用するときに `v-checkbox`を正しくバリデートするには、**type =" checkbox "** を追加する必要があるので注意して下さい。'
26+
}
2127
}
22-
}],
28+
],
2329
props: {
24-
lazyValidation: 'If enabled, **value** will always be _true_ unless there are visible validation errors. You can still call `validate()` to manually trigger validation'
30+
lazyValidation: '有効にすると、表示されるバリデーションエラーが無い限り、 **value** は常に _true_ となります。'
2531
},
2632
functions: {
27-
reset: 'Resets validation for all inputs',
28-
validate: 'Validates all inputs and returns result'
33+
reset: '全ての入力値に対するバリデートをリセットします。',
34+
validate: '全ての入力値をバリデートし結果を返却します。'
2935
}
3036
}

0 commit comments

Comments
 (0)