Skip to content

Commit 2f70440

Browse files
marcosmouramarcosmoura
authored
comp(MdSteppers): create steppers component
* comp(MdSteppers): add steppers with tabs behaviour * test(MdSteppers): fix test * fix(MdSteppers): make observers detect new child elements * docs(MdSteppers): remove dynamic height * feat(MdSteppers): add error states * feat(MdSteppers): create stepper done flow * feat(MdSteppers): create editable steppers * feat(MdSteppers): create linear steppers * fix(MdBottomBar): improve icon alignment * fix(MdSteppers): improve line separator style * docs(Core): add custom scrollbar to navigation * feat(MdSteppers): create alternative labels for steppers * refactor(MdSteppers): move stepper button logic to a dedicated component * refactor(MdSteppers): move template logic to a computed fn * refactor(MdSteppers): improve readability * feat(MdSteppers): create vertical steppers * fix(MdTextarea): fix textarea autogrow
1 parent 4073a73 commit 2f70440

File tree

23 files changed

+1006
-19
lines changed

23 files changed

+1006
-19
lines changed

‎build/new-component.js

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ function getVueComponent (name) {
1717
</template>
1818
1919
<script>
20-
import MdComponent from 'core/MdComponent'
20+
import MdComponent from 'core/MdComponent'
2121
22-
export default new MdComponent({
23-
name: '${name}'
24-
})
22+
export default new MdComponent({
23+
name: '${name}'
24+
})
2525
</script>
2626
2727
<style lang="scss">
@@ -30,7 +30,8 @@ export default new MdComponent({
3030
.${pascalToDash(name)} {
3131
transition: .3s $md-transition-default-timing;
3232
}
33-
</style>`.trim()
33+
</style>
34+
`.trim()
3435
}
3536

3637
function getTestFile (name) {
@@ -54,15 +55,16 @@ test('should render the theme class', async () => {
5455
5556
expect(wrapper.hasClass('md-theme-alt')).toBe(true)
5657
})
57-
`.trim()
58+
`.trim()
5859
}
5960

6061
function getThemeFile (name) {
6162
return `.${pascalToDash(name)} {
6263
@include md-theme-component() {
6364
6465
}
65-
}`.trim()
66+
}
67+
`.trim()
6668
}
6769

6870
function getIndexFile (name) {
@@ -72,7 +74,8 @@ import ${name} from './${name}'
7274
export default Vue => {
7375
init(Vue)
7476
Vue.component(${name}.name, ${name})
75-
}`.trim()
77+
}
78+
`.trim()
7679
}
7780

7881
function getDocsFile (name) {
@@ -105,7 +108,8 @@ function getDocsFile (name) {
105108
name: '${singleName}',
106109
mixins: [examples]
107110
}
108-
</script>`.trim()
111+
</script>
112+
`.trim()
109113
}
110114

111115
function getExampleFile (name) {
@@ -127,7 +131,8 @@ function getExampleFile (name) {
127131
.${compName} {
128132
129133
}
130-
</style>`.trim()
134+
</style>
135+
`.trim()
131136
}
132137

133138
const writeToFile = (contents, file) => {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,9 @@ export default {
7979
menu: {
8080
title: 'Menu'
8181
},
82+
steppers: {
83+
title: 'Steppers'
84+
},
8285
switch: {
8386
title: 'Switch'
8487
},

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

Lines changed: 28 additions & 0 deletions
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.steppers.title')">
5+
<div class="page-container-section">
6+
<p>Lorem ipsum</p>
7+
</div>
8+
9+
<div class="page-container-section">
10+
<h2>Steppers</h2>
11+
12+
<code-example title="Example" :component="examples['example']" />
13+
14+
<api-item title="API - md-steppers">
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: 'Steppers',
26+
mixins: [examples]
27+
}
28+
</script>

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<template>
2+
<div>
3+
<md-steppers :md-active-stepper.sync="active" md-vertical md-alternative md-linear>
4+
<md-stepper id="first" md-label="First Step" md-description="Optional" :md-done.sync="first">
5+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
6+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
7+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
8+
<md-button class="md-raised md-primary" @click="setDone('first', 'second')">Done!</md-button>
9+
</md-stepper>
10+
11+
<md-stepper id="second" md-label="Second Step" :md-error="secondStepError" :md-done.sync="second">
12+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
13+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
14+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
15+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
16+
<md-button class="md-raised md-primary" @click="setDone('second', 'third')">Done!</md-button>
17+
<md-button class="md-raised md-primary" @click="setError()">Set error!</md-button>
18+
</md-stepper>
19+
20+
<md-stepper id="third" md-label="Third Step" :md-done.sync="third">
21+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
22+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
23+
<md-button class="md-raised md-primary" @click="setDone('third')">Done!</md-button>
24+
</md-stepper>
25+
</md-steppers>
26+
</div>
27+
</template>
28+
29+
<script>
30+
export default {
31+
name: 'Example',
32+
data: () => ({
33+
active: 'first',
34+
first: false,
35+
second: false,
36+
third: false,
37+
secondStepError: null
38+
}),
39+
methods: {
40+
setDone (id, index) {
41+
this[id] = true
42+
43+
this.secondStepError = null
44+
45+
if (index) {
46+
this.active = index
47+
}
48+
},
49+
setError () {
50+
this.secondStepError = 'This is an error!'
51+
}
52+
}
53+
}
54+
</script>
55+
56+
<style lang="scss" scoped>
57+
.md-steppers {
58+
59+
}
60+
</style>

‎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/steppers/:test?',
9+
name: 'components/steppers',
10+
component: () => import(/* webpackChunkName: "steppers" */ './pages/Components/Steppers/Steppers.vue')
11+
},
712
{
813
path: '/components/menu',
914
name: 'components/menu',

‎docs/app/template/MainNav.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div class="main-nav-container">
33
<transition name="nav" appear>
4-
<nav class="main-nav" v-if="!isSplash">
4+
<md-content class="main-nav md-scrollbar" v-if="!isSplash">
55
<main-nav-content />
6-
</nav>
6+
</md-content>
77
</transition>
88

99
<md-drawer md-fixed :md-visible.sync="menuVisible" @md-closed="hideMenu">
@@ -55,7 +55,7 @@ export default {
5555
5656
.main-nav {
5757
width: 230px;
58-
padding: 24px 16px 96px 16px;
58+
padding: 24px 16px 112px 16px;
5959
display: flex;
6060
align-items: flex-start;
6161
flex-direction: column;

‎docs/app/template/MainNavContent.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
<router-link to="/components/menu">{{ $t('pages.menu.title') }}</router-link>
3232
<router-link to="/components/snackbar">{{ $t('pages.snackbar.title') }}</router-link>
3333
<router-link to="/components/speed-dial">{{ $t('pages.speedDial.title') }}</router-link>
34+
<router-link to="/components/steppers">{{ $t('pages.steppers.title') }}</router-link>
3435
<router-link to="/components/subheader">{{ $t('pages.subheader.title') }}</router-link>
3536
<router-link to="/components/tabs">{{ $t('pages.tabs.title') }}</router-link>
3637
<router-link to="/components/toolbar">{{ $t('pages.toolbar.title') }}</router-link>

‎src/components/MdBottomBar/MdBottomBar.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,10 @@
163163
padding-top: 6px;
164164
}
165165
166+
.md-bottom-bar-icon {
167+
transform: translate3d(0, -2px, 0);
168+
}
169+
166170
.md-bottom-bar-label {
167171
transform: translate3D(0, 3px, 0);
168172
}

‎src/components/MdButton/MdButton.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@
131131
&.md-focused {
132132
&:before {
133133
background-color: currentColor;
134-
opacity: .15;
134+
opacity: .12;
135135
}
136136
}
137137

‎src/components/MdField/MdFieldMixin.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default {
99
},
1010
data () {
1111
return {
12+
textareaHeight: false,
1213
content: this.value || null
1314
}
1415
},

0 commit comments

Comments
 (0)