Skip to content

Commit 80dd444

Browse files
marcosmouramarcosmoura
authored
comp(MdDialog): create md-file (#13)
* comp(MdDialog): add initial files for dialogs * test(MdDialog): fix broken tests * comp(MdDatepicker): crate initial files for date picker * comp(MdDialog): crate initial styles for dialog * fix(MdDialog): fix overlay not being rendered on the correct place * test(MdDialog): add initial tests * fix(MdDialog): fix wrong imports * fix(MdDialog): move file to its right place * fix(MdFile): fix conflicts
1 parent 11567b7 commit 80dd444

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+819
-220
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ coverage/
66
.vscode/
77
yarn-debug.log
88
npm-debug.log
9+
.vscode

‎build/local/webpack.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { config, resolvePath } from '../config'
77
const componentExampleLoader = require.resolve('./loaders/component-example-loader')
88

99
export default {
10-
devtool: '#source-map',
10+
devtool: '#eval-source-map',
1111
entry: {
1212
docs: [
1313
'./docs/app/index.js',

‎build/new-component.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ShellString, test, mkdir, cd, sed, exit } from 'shelljs'
1+
import { ShellString, test, mkdir, cd, sed, exit, exec } from 'shelljs'
22
import { join } from 'path'
33

44
function pascalToDash (str) {
@@ -194,3 +194,5 @@ if (!test('-e', docsPath)) {
194194
} else {
195195
exit(`echo 'This component already exists'`)
196196
}
197+
198+
exec('yarn lint --fix')

‎docs/app/components/LogoVueMaterial.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
</style>
8181

8282
<script>
83-
import MdSvgLoader from 'vue-material/core/MdSvgLoader/MdSvgLoader'
83+
import MdSvgLoader from 'vue-material/components/MdSvgLoader/MdSvgLoader'
8484
8585
export default {
8686
name: 'LogoVueMaterial',

‎docs/app/i18n/en-US.js

+9
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,15 @@ export default {
4646
content: {
4747
title: 'Content'
4848
},
49+
dialog: {
50+
title: 'Dialog'
51+
},
4952
divider: {
5053
title: 'Divider'
5154
},
55+
datepicker: {
56+
title: 'Datepicker'
57+
},
5258
drawer: {
5359
title: 'Drawer'
5460
},
@@ -67,6 +73,9 @@ export default {
6773
radio: {
6874
title: 'Radio'
6975
},
76+
file: {
77+
title: 'File'
78+
},
7079
switch: {
7180
title: 'Switch'
7281
},

‎docs/app/pages/Components/Datepicker/Datepicker.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<example src="./examples/Example.vue" />
2+
3+
<template>
4+
<page-container centered :title="$t('pages.datepicker.title')">
5+
<div class="page-container-section">
6+
<p>Lorem ipsum</p>
7+
</div>
8+
9+
<div class="page-container-section">
10+
<h2>Datepicker</h2>
11+
12+
<code-example title="Example" :component="examples['example']" />
13+
14+
<api-item title="API - md-datepicker">
15+
<p>This component do not have any extra option.</p>
16+
</api-item>
17+
</div>
18+
</page-container>
19+
</template>
20+
21+
<script>
22+
import examples from 'docs-mixins/docsExample'
23+
24+
export default {
25+
name: 'Datepicker',
26+
mixins: [examples]
27+
}
28+
</script>

‎docs/app/pages/Components/Datepicker/examples/Example.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div>
3+
<md-datepicker>Lorem ipsum</md-datepicker>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'Example'
10+
}
11+
</script>
12+
13+
<style lang="scss" scoped>
14+
.md-datepicker {
15+
16+
}
17+
</style>

‎docs/app/pages/Components/Dialog/Dialog.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<example src="./examples/Example.vue" />
2+
3+
<template>
4+
<page-container centered :title="$t('pages.dialog.title')">
5+
<div class="page-container-section">
6+
<p>Lorem ipsum</p>
7+
</div>
8+
9+
<div class="page-container-section">
10+
<h2>Dialog</h2>
11+
12+
<code-example title="Example" :component="examples['example']" />
13+
14+
<api-item title="API - md-dialog">
15+
<p>This component do not have any extra option.</p>
16+
</api-item>
17+
</div>
18+
</page-container>
19+
</template>
20+
21+
<script>
22+
import examples from 'docs-mixins/docsExample'
23+
24+
export default {
25+
name: 'Dialog',
26+
mixins: [examples]
27+
}
28+
</script>

‎docs/app/pages/Components/Dialog/examples/Example.vue

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div>
3+
<md-dialog :md-active.sync="showDialog" md-animate-from-source md-open-from="#custom" md-close-to="#custom">
4+
<md-dialog-title>Lorem ipsum dolor sit amet</md-dialog-title>
5+
6+
<md-dialog-content>Nemo, nobis necessitatibus ut illo, ducimus ex.</md-dialog-content>
7+
8+
<md-dialog-actions>
9+
<md-button class="md-primary" @click="showDialog = false">Cancel</md-button>
10+
<md-button class="md-primary" @click="showDialog = false">Ok</md-button>
11+
</md-dialog-actions>
12+
</md-dialog>
13+
14+
<md-button class="md-primary md-raised" @click="showDialog = true">Show Dialog</md-button>
15+
</div>
16+
</template>
17+
18+
<script>
19+
export default {
20+
name: 'Example',
21+
data: () => ({
22+
showDialog: false
23+
})
24+
}
25+
</script>

‎docs/app/pages/Components/File/File.vue

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<example src="./examples/FileField.vue" />
2+
3+
<template>
4+
<page-container centered :title="$t('pages.file.title')">
5+
<div class="page-container-section">
6+
<p>File inputs allow the user to pick one or multiple files. It can also filter the file type just like a normal input file or select multiple files.</p>
7+
</div>
8+
9+
<div class="page-container-section">
10+
<h2>Regular File</h2>
11+
12+
<code-example title="File Field" :component="examples['file-field']" />
13+
14+
<api-item title="API - md-toolbar">
15+
<p>The following options can be applied to file component:</p>
16+
17+
<api-table :headings="api.regular.events.headings" :props="api.regular.events.props" slot="events" />
18+
</api-item>
19+
20+
<note-block tip>All other <code>&lt;input type=&quot;file&quot;&gt;</code> attributes, such as multiple and accept, can be used on <code>md-field</code>.</note-block>
21+
</div>
22+
</page-container>
23+
</template>
24+
25+
<script>
26+
import examples from 'docs-mixins/docsExample'
27+
28+
export default {
29+
name: 'File',
30+
mixins: [examples],
31+
data: () => ({
32+
api: {
33+
regular: {
34+
events: {
35+
headings: ['Name', 'Description', 'Type'],
36+
props: [
37+
{
38+
name: 'change',
39+
description: 'Emits a FileList. Triggered every time a file is selected.',
40+
type: 'FileList'
41+
}
42+
]
43+
}
44+
}
45+
}
46+
})
47+
}
48+
</script>

‎docs/app/pages/Components/File/examples/FileField.vue

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div>
3+
<md-field>
4+
<label>Single</label>
5+
<md-file/>
6+
</md-field>
7+
8+
<md-field>
9+
<label>Upload files</label>
10+
<md-file placeholder="A nice input placeholder"/>
11+
</md-field>
12+
13+
<md-field>
14+
<label>Disabled</label>
15+
<md-file disabled/>
16+
</md-field>
17+
18+
<md-field>
19+
<label>Initial value</label>
20+
<md-file v-model="initial"/>
21+
</md-field>
22+
23+
<md-field>
24+
<label>Multiple</label>
25+
<md-file multiple v-model="multiple"/>
26+
</md-field>
27+
28+
<md-field>
29+
<label>Only images</label>
30+
<md-file accept="image/*" v-model="single"/>
31+
</md-field>
32+
</div>
33+
</template>
34+
35+
<script>
36+
export default {
37+
name: 'FileField',
38+
data: () => ({
39+
initial: 'vue-material-is-awesome.jpg',
40+
single: null,
41+
multiple: null
42+
})
43+
}
44+
</script>

‎docs/app/pages/Components/Input/examples/ErrorsMessages.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
22
<div>
33
<md-field>
4-
<label>Required Field</label>
5-
<md-input required></md-input>
4+
<label>No error</label>
5+
<md-input></md-input>
66
</md-field>
77

88
<md-field :class="messageClass">
9-
<label>Error</label>
9+
<label>Required Field</label>
1010
<md-input required></md-input>
1111
<span class="md-error">There is an error</span>
1212
</md-field>

‎docs/app/pages/Temp.vue

-91
This file was deleted.

0 commit comments

Comments
 (0)