Skip to content

Commit 09b8573

Browse files
VdustRmarcosmoura
VdustR
authored and
marcosmoura
committed
feat(MdList): expand only one option (#1645)
* feat(MdList): expand only one option fix #1641 * fix(MdList): rename expandOnlyOne to expandSingle better props name
1 parent a47ebe1 commit 09b8573

File tree

4 files changed

+121
-42
lines changed

4 files changed

+121
-42
lines changed

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
<api-item title="API - md-list">
5757
<p>The following options can be applied to any list:</p>
5858

59+
<api-table :headings="list.props.headings" :props="list.props.props" slot="props" />
5960
<api-table :headings="list.classes.headings" :props="list.classes.props" slot="classes" />
6061
</api-item>
6162

@@ -82,10 +83,10 @@
8283
headings: ['Name', 'Description', 'Default'],
8384
props: [
8485
{
85-
name: 'id',
86-
type: 'String',
87-
description: 'The item id. Used when changing the selected item dynamically',
88-
defaults: 'a random string'
86+
name: 'md-expand-single',
87+
type: 'Boolean',
88+
description: 'If set true, one expandable list item could be expanded at most at a time. The expanded list item will be collapsed when another is expanded',
89+
defaults: 'false'
8990
}
9091
]
9192
},

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

Lines changed: 62 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,51 @@
11
<template>
22
<div class="full-control">
3-
<md-list>
4-
<md-list-item md-expand :md-expanded.sync="expandNews">
5-
<md-icon>whatshot</md-icon>
6-
<span class="md-list-item-text">News</span>
3+
<div class="list">
4+
<md-list :md-expand-single="expandSingle">
5+
<md-list-item md-expand :md-expanded.sync="expandNews">
6+
<md-icon>whatshot</md-icon>
7+
<span class="md-list-item-text">News</span>
78

8-
<md-list slot="md-expand">
9-
<md-list-item class="md-inset">World</md-list-item>
10-
<md-list-item class="md-inset">Europe</md-list-item>
11-
<md-list-item class="md-inset">South America</md-list-item>
12-
</md-list>
13-
</md-list-item>
9+
<md-list slot="md-expand">
10+
<md-list-item class="md-inset">World</md-list-item>
11+
<md-list-item class="md-inset">Europe</md-list-item>
12+
<md-list-item class="md-inset">South America</md-list-item>
13+
</md-list>
14+
</md-list-item>
1415

15-
<md-list-item md-expand>
16-
<md-icon>videogame_asset</md-icon>
17-
<span class="md-list-item-text">Games</span>
16+
<md-list-item md-expand>
17+
<md-icon>videogame_asset</md-icon>
18+
<span class="md-list-item-text">Games</span>
1819

19-
<md-list slot="md-expand">
20-
<md-list-item class="md-inset">Console</md-list-item>
21-
<md-list-item class="md-inset">PC</md-list-item>
22-
<md-list-item class="md-inset">Phone</md-list-item>
23-
</md-list>
24-
</md-list-item>
20+
<md-list slot="md-expand">
21+
<md-list-item class="md-inset">Console</md-list-item>
22+
<md-list-item class="md-inset">PC</md-list-item>
23+
<md-list-item class="md-inset">Phone</md-list-item>
24+
</md-list>
25+
</md-list-item>
2526

26-
<md-list-item md-expand>
27-
<md-icon>video_library</md-icon>
28-
<span class="md-list-item-text">Video</span>
27+
<md-list-item md-expand>
28+
<md-icon>video_library</md-icon>
29+
<span class="md-list-item-text">Video</span>
2930

30-
<md-list slot="md-expand">
31-
<md-list-item class="md-inset">Humor</md-list-item>
32-
<md-list-item class="md-inset">Music</md-list-item>
33-
<md-list-item class="md-inset">Movies</md-list-item>
34-
<md-list-item class="md-inset">TV Shows</md-list-item>
35-
</md-list>
36-
</md-list-item>
31+
<md-list slot="md-expand">
32+
<md-list-item class="md-inset">Humor</md-list-item>
33+
<md-list-item class="md-inset">Music</md-list-item>
34+
<md-list-item class="md-inset">Movies</md-list-item>
35+
<md-list-item class="md-inset">TV Shows</md-list-item>
36+
</md-list>
37+
</md-list-item>
3738

38-
<md-list-item>
39-
<md-icon>shopping_basket</md-icon>
40-
<span class="md-list-item-text">Shop</span>
41-
</md-list-item>
42-
</md-list>
43-
<md-checkbox v-model="expandNews">Expand News</md-checkbox>
39+
<md-list-item>
40+
<md-icon>shopping_basket</md-icon>
41+
<span class="md-list-item-text">Shop</span>
42+
</md-list-item>
43+
</md-list>
44+
</div>
45+
<div class="control">
46+
<md-switch v-model="expandSingle">Expand Only One</md-switch>
47+
<md-checkbox v-model="expandNews">Expand News</md-checkbox>
48+
</div>
4449
</div>
4550
</template>
4651

@@ -50,20 +55,40 @@
5055
5156
data () {
5257
return {
53-
expandNews: false
58+
expandNews: false,
59+
expandSingle: false
5460
}
5561
}
5662
}
5763
</script>
5864

5965
<style lang="scss" scoped>
66+
$list-width: 320px;
67+
68+
.full-control {
69+
display: flex;
70+
flex-direction: row;
71+
flex-wrap: wrap-reverse;
72+
}
73+
74+
.list {
75+
width: $list-width;
76+
}
77+
6078
.full-control > .md-list {
61-
width: 320px;
79+
width: $list-width;
6280
max-width: 100%;
6381
height: 400px;
6482
display: inline-block;
6583
overflow: auto;
6684
border: 1px solid rgba(#000, .12);
6785
vertical-align: top;
6886
}
87+
88+
.control {
89+
min-width: 250px;
90+
display: flex;
91+
flex-direction: column;
92+
padding: 16px;
93+
}
6994
</style>

‎src/components/MdList/MdList.vue

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,49 @@
88
import MdComponent from 'core/MdComponent'
99
1010
export default new MdComponent({
11-
name: 'MdList'
11+
name: 'MdList',
12+
data () {
13+
return {
14+
MdList: {
15+
expandable: [],
16+
expandATab: this.expandATab,
17+
pushExpandable: this.pushExpandable,
18+
removeExpandable: this.removeExpandable
19+
}
20+
}
21+
},
22+
provide () {
23+
return {
24+
MdList: this.MdList
25+
}
26+
},
27+
props: {
28+
mdExpandSingle: {
29+
default: false
30+
}
31+
},
32+
methods: {
33+
expandATab (expandedListItem) {
34+
if (this.mdExpandSingle && expandedListItem) {
35+
const otherExpandableListItems = this.MdList.expandable.filter(target => target !== expandedListItem)
36+
otherExpandableListItems.forEach(expandableListItem => expandableListItem.close())
37+
}
38+
},
39+
pushExpandable (expandableListItem) {
40+
let expandableListItems = this.MdList.expandable
41+
42+
if (!expandableListItems.find(target => target === expandableListItem)) {
43+
this.MdList.expandable = expandableListItems.concat([expandableListItem])
44+
}
45+
},
46+
removeExpandable (expandableListItem) {
47+
let expandableListItems = this.MdList.expandable
48+
49+
if (expandableListItems.find(target => target === expandableListItem)) {
50+
this.MdList.expandable = expandableListItems.filter(target => target !== expandableListItem)
51+
}
52+
}
53+
}
1254
})
1355
</script>
1456

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
MdArrowDownIcon
2424
},
2525
mixins: [MdListItemMixin],
26+
inject: ['MdList'],
2627
data: () => ({
2728
expandStyles: {},
2829
showContent: false
@@ -98,12 +99,22 @@
9899
let expanded = this.showContent
99100
this.$emit('update:mdExpanded', expanded)
100101
this.$nextTick(() => this.$emit(expanded ? 'md-expanded' : 'md-collapsed'))
102+
103+
if (expanded) {
104+
this.MdList.expandATab(this)
105+
}
101106
}
102107
},
108+
created () {
109+
this.MdList.pushExpandable(this)
110+
},
103111
mounted () {
104112
if (this.mdExpanded) {
105113
this.open()
106114
}
115+
},
116+
beforeDestroy () {
117+
this.MdList.removeExpandable(this)
107118
}
108119
}
109120
</script>

0 commit comments

Comments
 (0)