Skip to content

Commit 614b6fa

Browse files
marcosmouramarcosmoura
authored
comp(MdSnackbar): add snackbar component (#19)
* comp(MdSnackbar): initial files for snackbar * comp(MdSnackbar): start creation of snackbar * test(MdSnackbar): fix broken tests * fix(MdPortal): remove md-portal class to keep the dom clean * test(MdSnackbar): fix broken tests * style: fix alignment of script tags * comp(MdSnackbar): create snackbar * test: fix all broken test, warnings and unhandled exceptions * test: remove variable
1 parent 5a45616 commit 614b6fa

File tree

79 files changed

+2214
-1887
lines changed

Some content is hidden

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

79 files changed

+2214
-1887
lines changed

‎.babelrc

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,6 @@
1313
"plugins": [
1414
"syntax-dynamic-import"
1515
],
16-
"env": {
17-
"test": {
18-
"presets": [
19-
"es2015",
20-
"stage-3"
21-
],
22-
"plugins": [
23-
"transform-runtime"
24-
]
25-
}
26-
},
2716
"ignore": [
2817
"dist/*.js"
2918
]

‎docs/app/App.vue

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,29 @@
1313
</template>
1414

1515
<script>
16-
import { mapState } from 'vuex'
17-
import MainHeader from './template/MainHeader'
18-
import MainNav from './template/MainNav'
19-
import MainFooter from './template/MainFooter'
16+
import { mapState } from 'vuex'
17+
import MainHeader from './template/MainHeader'
18+
import MainNav from './template/MainNav'
19+
import MainFooter from './template/MainFooter'
2020
21-
export default {
22-
name: 'App',
23-
components: {
24-
MainHeader,
25-
MainNav,
26-
MainFooter
27-
},
28-
computed: {
29-
...mapState({
30-
isSplash: 'splashPage'
31-
}),
32-
containerClass () {
33-
return {
34-
splash: this.isSplash
21+
export default {
22+
name: 'App',
23+
components: {
24+
MainHeader,
25+
MainNav,
26+
MainFooter
27+
},
28+
computed: {
29+
...mapState({
30+
isSplash: 'splashPage'
31+
}),
32+
containerClass () {
33+
return {
34+
splash: this.isSplash
35+
}
3536
}
3637
}
3738
}
38-
}
3939
</script>
4040

4141
<style lang="scss">

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,9 @@ export default {
7373
speedDial: {
7474
title: 'Speed Dial'
7575
},
76+
snackbar: {
77+
title: 'Snackbar'
78+
},
7679
subheader: {
7780
title: 'Subheader'
7881
},

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<example src="./examples/Duration.vue" />
2+
3+
<template>
4+
<page-container centered :title="$t('pages.snackbar.title')">
5+
<div class="page-container-section">
6+
<p>Lorem ipsum</p>
7+
</div>
8+
9+
<div class="page-container-section">
10+
<h2>Duration and position</h2>
11+
12+
<code-example title="Dynamic values" :component="examples['duration']" />
13+
14+
<api-item title="API - md-snackbar">
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: 'Snackbar',
26+
mixins: [examples]
27+
}
28+
</script>

‎docs/app/pages/Components/Snackbar/examples/Duration.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<form novalidate @submit.stop.prevent="showSnackbar = true">
3+
<div>
4+
<div for="snackbar-center" class="md-body-2">Position</div>
5+
<md-radio v-model="position" id="snackbar-center" name="snackbar-horizontal" value="center">Centered</md-radio>
6+
<md-radio v-model="position" id="snackbar-left" name="snackbar-horizontal" value="left">Left</md-radio>
7+
</div>
8+
9+
<div>
10+
<div class="md-body-2">Duration</div>
11+
12+
<md-switch v-model="isInfinity">Infinite</md-switch>
13+
14+
<md-field>
15+
<label for="snackbar-duration">Miliseconds</label>
16+
<md-input type="number" id="snackbar-duration" v-model.number="duration" :disabled="isInfinity"></md-input>
17+
</md-field>
18+
</div>
19+
20+
<md-button type="submit" class="md-primary md-raised">Open Snackbar</md-button>
21+
22+
<md-snackbar :md-position="position" :md-duration="isInfinity ? Infinity : duration" :md-active.sync="showSnackbar">
23+
<span>Connection timeout. Showing limited messages!</span>
24+
<md-button class="md-primary" @click="showSnackbar = false">Retry</md-button>
25+
</md-snackbar>
26+
</form>
27+
</template>
28+
29+
<script>
30+
export default {
31+
name: 'Duration',
32+
data: () => ({
33+
showSnackbar: false,
34+
position: 'center',
35+
duration: 4000,
36+
isInfinity: false
37+
})
38+
}
39+
</script>

‎docs/app/routes.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ import VueRouter from 'vue-router'
44
Vue.use(VueRouter)
55

66
export const routes = [
7+
{
8+
path: '/components/snackbar',
9+
name: 'components/snackbar',
10+
component: () => import(/* webpackChunkName: "snackbar" */ './pages/Components/Snackbar/Snackbar.vue')
11+
},
712
{
813
path: '/components/tabs/:test?',
914
name: 'components/tabs',

‎docs/app/template/MainNavContent.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525

2626
<router-link to="/components/icon">{{ $t('pages.icon.title') }}</router-link>
2727
<router-link to="/components/list">{{ $t('pages.list.title') }}</router-link>
28+
<router-link to="/components/snackbar">{{ $t('pages.snackbar.title') }}</router-link>
2829
<router-link to="/components/speed-dial">{{ $t('pages.speedDial.title') }}</router-link>
2930
<router-link to="/components/subheader">{{ $t('pages.subheader.title') }}</router-link>
3031
<router-link to="/components/tabs">{{ $t('pages.tabs.title') }}</router-link>

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@
2525
"dev": "babel-node build/local",
2626
"build": "rm -rf dist; babel-node build/lib",
2727
"lint": "eslint --ext .js,.vue docs src build test",
28-
"test": "cross-env NODE_ENV=test jest",
28+
"test": "jest",
2929
"coverage": "yarn test -- --coverage",
3030
"postinstall": "babel-node build/git-hooks/install.js",
3131
"changelog": "babel-node build/generate-changelog.js",
3232
"release": "sh build/release.sh",
33-
"new-component": "babel-node build/new-component.js",
33+
"new-component": "babel-node build/new-component.js; yarn lint --fix",
3434
"github-release": "github-release",
3535
"commit": "git-cz"
3636
},
@@ -61,7 +61,6 @@
6161
"connect-history-api-fallback": "^1.3.0",
6262
"conventional-changelog": "^1.1.5",
6363
"conventional-changelog-vue-material": "^0.0.1",
64-
"cross-env": "^5.0.5",
6564
"css-loader": "^0.28.7",
6665
"css-mqpacker": "^6.0.1",
6766
"cssnano": "^3.10.0",
@@ -86,6 +85,7 @@
8685
"html-webpack-plugin": "^2.30.1",
8786
"jest": "^21.1.0",
8887
"jest-css-modules": "^1.1.0",
88+
"jest-vue": "^0.5.3",
8989
"jest-vue-preprocessor": "^1.1.0",
9090
"node-sass": "^4.5.3",
9191
"optimize-css-assets-webpack-plugin": "^3.1.1",
@@ -101,6 +101,7 @@
101101
"vue-router": "^2.7.0",
102102
"vue-style-loader": "^3.0.2",
103103
"vue-template-compiler": "^2.4.3",
104+
"vue-test-utils": "https://github.com/vuejs/vue-test-utils",
104105
"vuex": "^2.4.0",
105106
"vuex-router-sync": "^4.3.1",
106107
"webpack": "2.7.0",
@@ -126,6 +127,7 @@
126127
},
127128
"moduleFileExtensions": [
128129
"js",
130+
"json",
129131
"vue"
130132
],
131133
"transform": {

‎src/components/MdApp/MdApp.vue

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,66 @@
11
<script>
2-
import MdAppSideDrawer from './MdAppSideDrawer'
3-
import MdAppInternalDrawer from './MdAppInternalDrawer'
2+
import MdAppSideDrawer from './MdAppSideDrawer'
3+
import MdAppInternalDrawer from './MdAppInternalDrawer'
44
5-
const componentTypes = [
6-
'md-app-toolbar',
7-
'md-app-drawer',
8-
'md-app-content'
9-
]
5+
const componentTypes = [
6+
'md-app-toolbar',
7+
'md-app-drawer',
8+
'md-app-content'
9+
]
1010
11-
function buildSlots (children, context, functionalContext, options) {
12-
let slots = []
11+
function buildSlots (children, context, functionalContext, options) {
12+
let slots = []
1313
14-
if (children) {
15-
children.forEach(child => {
16-
const opts = child.componentOptions
14+
if (children) {
15+
children.forEach(child => {
16+
const opts = child.componentOptions
1717
18-
if (opts && componentTypes.includes(opts.tag)) {
19-
child.data.slot = opts.tag
20-
child.data.provide = options.Ctor.options.provide
21-
child.context = context
22-
child.functionalContext = functionalContext
18+
if (opts && componentTypes.includes(opts.tag)) {
19+
child.data.slot = opts.tag
20+
child.data.provide = options.Ctor.options.provide
21+
child.context = context
22+
child.functionalContext = functionalContext
2323
24-
slots.push(child)
25-
}
26-
})
27-
}
24+
slots.push(child)
25+
}
26+
})
27+
}
2828
29-
return slots
30-
}
29+
return slots
30+
}
3131
32-
function getDrawer (children) {
33-
const drawerVnode = children.filter(child => {
34-
return child.componentOptions.tag === 'md-app-drawer'
35-
})
32+
function getDrawer (children) {
33+
const drawerVnode = children.filter(child => {
34+
return child.componentOptions.tag === 'md-app-drawer'
35+
})
3636
37-
return drawerVnode && drawerVnode[0]
38-
}
37+
return drawerVnode && drawerVnode[0]
38+
}
3939
40-
function hasInternalDrawer (attrs) {
41-
const mdPermanent = attrs && attrs['md-permanent']
40+
function hasInternalDrawer (attrs) {
41+
const mdPermanent = attrs && attrs['md-permanent']
4242
43-
return mdPermanent && (mdPermanent === 'clipped' || mdPermanent === 'card')
44-
}
43+
return mdPermanent && (mdPermanent === 'clipped' || mdPermanent === 'card')
44+
}
4545
46-
export default {
47-
name: 'MdApp',
48-
functional: true,
49-
render (createElement, { children, props }) {
50-
let appComponent = MdAppSideDrawer
51-
const { context, functionalContext, componentOptions } = createElement(appComponent)
52-
const slots = buildSlots(children, context, functionalContext, componentOptions)
53-
const drawer = getDrawer(slots)
46+
export default {
47+
name: 'MdApp',
48+
functional: true,
49+
render (createElement, { children, props }) {
50+
let appComponent = MdAppSideDrawer
51+
const { context, functionalContext, componentOptions } = createElement(appComponent)
52+
const slots = buildSlots(children, context, functionalContext, componentOptions)
53+
const drawer = getDrawer(slots)
54+
55+
if (drawer && hasInternalDrawer(drawer.data.attrs)) {
56+
appComponent = MdAppInternalDrawer
57+
}
5458
55-
if (drawer && hasInternalDrawer(drawer.data.attrs)) {
56-
appComponent = MdAppInternalDrawer
59+
return createElement(appComponent, {
60+
attrs: props
61+
}, slots)
5762
}
58-
59-
return createElement(appComponent, {
60-
attrs: props
61-
}, slots)
6263
}
63-
}
6464
</script>
6565

6666
<style lang="scss">

‎src/components/MdApp/MdAppContent.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
</template>
1010

1111
<script>
12-
export default {
13-
name: 'MdAppContent',
14-
inject: ['MdApp'],
15-
computed: {
16-
showCard () {
17-
return this.MdApp.options && this.MdApp.options.mode === 'overlap'
12+
export default {
13+
name: 'MdAppContent',
14+
inject: ['MdApp'],
15+
computed: {
16+
showCard () {
17+
return this.MdApp.options && this.MdApp.options.mode === 'overlap'
18+
}
1819
}
1920
}
20-
}
2121
</script>
2222

2323
<style lang="scss">

0 commit comments

Comments
 (0)