Skip to content

Commit da24c63

Browse files
marcosmouramarcosmoura
committed
comp(MdList): create lists
1 parent 6353774 commit da24c63

21 files changed

+447
-2
lines changed

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

+3
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ export default {
4646
input: {
4747
title: 'Input & Textarea'
4848
},
49+
list: {
50+
title: 'List'
51+
},
4952
radio: {
5053
title: 'Radio'
5154
},

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

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<example src="./examples/RegularLists.vue" />
2+
3+
<template>
4+
<page-container centered :title="$t('pages.list.title')">
5+
<div class="page-container-section">
6+
<p>The content surfaces that comprise applications are referred to in this spec as material, or sheets of material. The content component is commonly used to resemble a piece of paper. It'll be useful to theme a arbitrary content.</p>
7+
</div>
8+
9+
<div class="page-container-section">
10+
<h2>Lists</h2>
11+
12+
<code-example title="Regular Lists" :component="examples['regular-lists']" />
13+
14+
<api-item title="API - md-content">
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: 'List',
26+
mixins: [examples],
27+
data: () => ({
28+
29+
})
30+
}
31+
</script>

‎docs/app/pages/Components/List/examples/RegularLists.vue

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div>
3+
<md-list>
4+
<md-list-item>
5+
<md-icon>move_to_inbox</md-icon>
6+
<span class="md-list-item-text">Inbox</span>
7+
</md-list-item>
8+
9+
<md-list-item>
10+
<md-icon>send</md-icon>
11+
<span class="md-list-item-text">Sent Mail</span>
12+
</md-list-item>
13+
14+
<md-list-item>
15+
<md-icon>delete</md-icon>
16+
<span class="md-list-item-text">Trash</span>
17+
</md-list-item>
18+
19+
<md-list-item>
20+
<md-icon>error</md-icon>
21+
<span class="md-list-item-text">Spam</span>
22+
</md-list-item>
23+
24+
<md-divider class="md-inset"></md-divider>
25+
26+
<md-list-item class="md-inset">
27+
<!-- <md-avatar>
28+
<img src="https://placeimg.com/40/40/people/5" alt="People">
29+
</md-avatar> -->
30+
31+
<span class="md-list-item-text">Abbey Christansen</span>
32+
33+
<md-button class="md-icon-button md-list-action">
34+
<md-icon class="md-primary">chat_bubble</md-icon>
35+
</md-button>
36+
</md-list-item>
37+
38+
<md-list-item class="md-inset">
39+
<!-- <md-avatar>
40+
<img src="https://placeimg.com/40/40/people/1" alt="People">
41+
</md-avatar> -->
42+
43+
<span class="md-list-item-text">Alex Nelson</span>
44+
45+
<md-button class="md-icon-button md-list-action">
46+
<md-icon class="md-primary">chat_bubble</md-icon>
47+
</md-button>
48+
</md-list-item>
49+
50+
<md-list-item class="md-inset">
51+
<!-- <md-avatar>
52+
<img src="https://placeimg.com/40/40/people/6" alt="People">
53+
</md-avatar> -->
54+
55+
<span class="md-list-item-text">Mary Johnson</span>
56+
57+
<md-button class="md-icon-button md-list-action">
58+
<md-icon>chat_bubble</md-icon>
59+
</md-button>
60+
</md-list-item>
61+
</md-list>
62+
</div>
63+
</template>
64+
65+
<script>
66+
export default {
67+
name: 'RegularLists'
68+
}
69+
</script>
70+
71+
<style lang="scss" scoped>
72+
.md-list {
73+
max-width: 320px;
74+
border: 1px solid rgba(#000, .12);
75+
}
76+
</style>
77+

‎docs/app/routes.js

+5
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ export const routes = [
5959
name: 'components/input',
6060
component: () => import('./pages/Components/Input/Input.vue')
6161
},
62+
{
63+
path: '/components/list',
64+
name: 'components/list',
65+
component: () => import('./pages/Components/List/List.vue')
66+
},
6267
{
6368
path: '/components/radio',
6469
name: 'components/radio',

‎docs/app/template/MainNavContent.vue

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
</div>
2020

2121
<router-link to="/components/icon">{{ $t('pages.icon.title') }}</router-link>
22+
<router-link to="/components/list">{{ $t('pages.list.title') }}</router-link>
2223
<router-link to="/components/subheader">{{ $t('pages.subheader.title') }}</router-link>
2324
<router-link to="/components/toolbar">{{ $t('pages.toolbar.title') }}</router-link>
2425
</div>

‎src/components/MdDrawer/MdDrawer.vue

+1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
bottom: 0;
5656
left: 0;
5757
z-index: 30;
58+
overflow: auto;
5859
transform: translate3d(-100%, 0, 0);
5960
transition: .4s $md-transition-default-timing;
6061
transition-property: box-shadow, transform;

‎src/components/MdList/MdList.test.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import mountTemplate from 'test/utils/mountTemplate'
2+
import MdList from './MdList.vue'
3+
4+
test('should render the list', async () => {
5+
const template = '<md-list>Lorem ipsum</md-list>'
6+
const wrapper = await mountTemplate(MdList, template)
7+
8+
expect(wrapper.hasClass('md-list')).toBe(true)
9+
expect(wrapper.text()).toBe('Lorem ipsum')
10+
})
11+
12+
test('should render the theme class', async () => {
13+
const template = '<md-list md-theme="alt">Lorem ipsum</md-list>'
14+
const wrapper = await mountTemplate(MdList, template)
15+
16+
expect(wrapper.hasClass('md-theme-alt')).toBe(true)
17+
})

‎src/components/MdList/MdList.vue

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<ul class="md-list" :class="[$mdActiveTheme]">
3+
<slot></slot>
4+
</ul>
5+
</template>
6+
7+
<script>
8+
import MdComponent from 'core/MdComponent'
9+
10+
export default new MdComponent({
11+
name: 'MdList'
12+
})
13+
</script>
14+
15+
<style lang="scss">
16+
@import "~components/MdAnimation/variables";
17+
18+
.md-list {
19+
margin: 0;
20+
padding: 8px 0;
21+
display: flex;
22+
flex-flow: column nowrap;
23+
position: relative;
24+
list-style: none;
25+
transition: .3s $md-transition-default-timing;
26+
27+
&.md-dense {
28+
padding: 4px 0;
29+
}
30+
31+
.md-divider {
32+
margin-top: -1px;
33+
}
34+
35+
.md-subheader {
36+
&.md-inset {
37+
padding-left: 72px;
38+
}
39+
}
40+
41+
> .md-subheader:first-of-type {
42+
margin-top: -8px;
43+
}
44+
}
45+
</style>

‎src/components/MdList/MdListItem/MdListItem.test.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import mountTemplate from 'test/utils/mountTemplate'
2+
import MdList from './MdList.vue'
3+
4+
test('should render the list', async () => {
5+
const template = '<md-list>Lorem ipsum</md-list>'
6+
const wrapper = await mountTemplate(MdList, template)
7+
8+
expect(wrapper.hasClass('md-list')).toBe(true)
9+
expect(wrapper.text()).toBe('Lorem ipsum')
10+
})
11+
12+
test('should render the theme class', async () => {
13+
const template = '<md-list md-theme="alt">Lorem ipsum</md-list>'
14+
const wrapper = await mountTemplate(MdList, template)
15+
16+
expect(wrapper.hasClass('md-theme-alt')).toBe(true)
17+
})

‎src/components/MdList/MdListItem/MdListItem.vue

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<script>
2+
import MdListItemButton from './MdListItemButton'
3+
import MdListItemLink from './MdListItemLink'
4+
import MdListItemRouter from './MdListItemRouter'
5+
import MdButton from 'components/MdButton/MdButton'
6+
7+
export default {
8+
name: 'MdListItem',
9+
functional: true,
10+
components: {
11+
MdButton
12+
},
13+
render (createElement, { data, parent, props, listeners, children }) {
14+
let listComponent = MdListItemButton
15+
16+
if (parent && parent.$router && props.to) {
17+
listComponent = MdListItemRouter
18+
listComponent.props = {
19+
target: String,
20+
...parent.$options.components['router-link'].options.props
21+
}
22+
delete listComponent.props.href
23+
} else if (props.href) {
24+
listComponent = MdListItemLink
25+
}
26+
27+
return createElement('li', {
28+
on: listeners,
29+
staticClass: 'md-list-item ' + data.staticClass
30+
}, [
31+
createElement(listComponent, {
32+
staticClass: 'md-list-item-container md-button-clean',
33+
props
34+
}, [children])
35+
])
36+
}
37+
}
38+
</script>
39+
40+
<style lang="scss">
41+
@import "~components/MdAnimation/variables";
42+
43+
.md-list-item {
44+
height: auto;
45+
position: relative;
46+
z-index: 2;
47+
48+
.md-icon {
49+
margin: 0;
50+
transition-property: color, margin-right;
51+
}
52+
53+
&.md-inset {
54+
.md-list-item-content {
55+
padding-left: 72px;
56+
}
57+
}
58+
}
59+
60+
.md-list-item-container {
61+
width: 100%;
62+
display: flex;
63+
font-size: 16px;
64+
font-weight: 400;
65+
text-align: left;
66+
text-transform: none;
67+
cursor: pointer;
68+
69+
&.md-button-clean:hover {
70+
opacity: 1;
71+
text-decoration: none;
72+
}
73+
}
74+
75+
.md-list-item-content {
76+
min-height: 48px;
77+
padding: 0 16px;
78+
display: flex;
79+
flex-flow: row nowrap;
80+
align-items: center;
81+
flex: 1;
82+
83+
> .md-icon:first-child {
84+
margin-right: 32px;
85+
}
86+
87+
.md-list-action {
88+
margin: 0 -10px 0 0;
89+
90+
&:last-of-type {
91+
margin: 0 -10px 0 16px;
92+
}
93+
}
94+
}
95+
96+
.md-list-item-text {
97+
flex: 1;
98+
}
99+
</style>

‎src/components/MdList/MdListItem/MdListItemButton.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<button type="button" class="md-list-item-button">
3+
<md-list-item-content :md-disabled="isDisabled">
4+
<slot></slot>
5+
</md-list-item-content>
6+
</button>
7+
</template>
8+
9+
<script>
10+
import MdListItemMixin from './MdListItemMixin'
11+
12+
export default {
13+
name: 'MdListItemButton',
14+
mixins: [MdListItemMixin]
15+
}
16+
</script>
17+
18+
<style lang="scss">
19+
@import "~components/MdAnimation/variables";
20+
21+
.md-list-item-button {
22+
23+
}
24+
</style>

‎src/components/MdList/MdListItem/MdListItemContent.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<md-ripple class="md-list-item-content" :md-disabled="mdDisabled">
3+
<slot></slot>
4+
</md-ripple>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'MdListItemContent',
10+
props: {
11+
mdDisabled: Boolean
12+
}
13+
}
14+
</script>
15+
16+
<style lang="scss">
17+
@import "~components/MdAnimation/variables";
18+
19+
.md-list-item-content {
20+
21+
}
22+
</style>

0 commit comments

Comments
 (0)