feat(MdList): expand only one option (#1645)

* feat(MdList): expand only one option fix #1641 * fix(MdList): rename expandOnlyOne to expandSingle better props name
vuematerial · May 13, 2018 · 09b8573 · 09b8573
1 parent a47ebe1
commit 09b8573
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 42 deletions.
diff --git a/docs/app/pages/Components/List/List.vue b/docs/app/pages/Components/List/List.vue
@@ -56,6 +56,7 @@
       <api-item title="API - md-list">
         <p>The following options can be applied to any list:</p>
 
+        <api-table :headings="list.props.headings" :props="list.props.props" slot="props" />
         <api-table :headings="list.classes.headings" :props="list.classes.props" slot="classes" />
       </api-item>
 
@@ -82,10 +83,10 @@
           headings: ['Name', 'Description', 'Default'],
           props: [
             {
-              name: 'id',
-              type: 'String',
-              description: 'The item id. Used when changing the selected item dynamically',
-              defaults: 'a random string'
+              name: 'md-expand-single',
+              type: 'Boolean',
+              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',
+              defaults: 'false'
             }
           ]
         },

diff --git a/docs/app/pages/Components/List/examples/ListExpansion.vue b/docs/app/pages/Components/List/examples/ListExpansion.vue
@@ -1,46 +1,51 @@
 <template>
   <div class="full-control">
-    <md-list>
-      <md-list-item md-expand :md-expanded.sync="expandNews">
-        <md-icon>whatshot</md-icon>
-        <span class="md-list-item-text">News</span>
+    <div class="list">
+      <md-list :md-expand-single="expandSingle">
+        <md-list-item md-expand :md-expanded.sync="expandNews">
+          <md-icon>whatshot</md-icon>
+          <span class="md-list-item-text">News</span>
 
-        <md-list slot="md-expand">
-          <md-list-item class="md-inset">World</md-list-item>
-          <md-list-item class="md-inset">Europe</md-list-item>
-          <md-list-item class="md-inset">South America</md-list-item>
-        </md-list>
-      </md-list-item>
+          <md-list slot="md-expand">
+            <md-list-item class="md-inset">World</md-list-item>
+            <md-list-item class="md-inset">Europe</md-list-item>
+            <md-list-item class="md-inset">South America</md-list-item>
+          </md-list>
+        </md-list-item>
 
-      <md-list-item md-expand>
-        <md-icon>videogame_asset</md-icon>
-        <span class="md-list-item-text">Games</span>
+        <md-list-item md-expand>
+          <md-icon>videogame_asset</md-icon>
+          <span class="md-list-item-text">Games</span>
 
-        <md-list slot="md-expand">
-          <md-list-item class="md-inset">Console</md-list-item>
-          <md-list-item class="md-inset">PC</md-list-item>
-          <md-list-item class="md-inset">Phone</md-list-item>
-        </md-list>
-      </md-list-item>
+          <md-list slot="md-expand">
+            <md-list-item class="md-inset">Console</md-list-item>
+            <md-list-item class="md-inset">PC</md-list-item>
+            <md-list-item class="md-inset">Phone</md-list-item>
+          </md-list>
+        </md-list-item>
 
-      <md-list-item md-expand>
-        <md-icon>video_library</md-icon>
-        <span class="md-list-item-text">Video</span>
+        <md-list-item md-expand>
+          <md-icon>video_library</md-icon>
+          <span class="md-list-item-text">Video</span>
 
-        <md-list slot="md-expand">
-          <md-list-item class="md-inset">Humor</md-list-item>
-          <md-list-item class="md-inset">Music</md-list-item>
-          <md-list-item class="md-inset">Movies</md-list-item>
-          <md-list-item class="md-inset">TV Shows</md-list-item>
-        </md-list>
-      </md-list-item>
+          <md-list slot="md-expand">
+            <md-list-item class="md-inset">Humor</md-list-item>
+            <md-list-item class="md-inset">Music</md-list-item>
+            <md-list-item class="md-inset">Movies</md-list-item>
+            <md-list-item class="md-inset">TV Shows</md-list-item>
+          </md-list>
+        </md-list-item>
 
-      <md-list-item>
-        <md-icon>shopping_basket</md-icon>
-        <span class="md-list-item-text">Shop</span>
-      </md-list-item>
-    </md-list>
-    <md-checkbox v-model="expandNews">Expand News</md-checkbox>
+        <md-list-item>
+          <md-icon>shopping_basket</md-icon>
+          <span class="md-list-item-text">Shop</span>
+        </md-list-item>
+      </md-list>
+    </div>
+    <div class="control">
+      <md-switch v-model="expandSingle">Expand Only One</md-switch>
+      <md-checkbox v-model="expandNews">Expand News</md-checkbox>
+    </div>
   </div>
 </template>
 
@@ -50,20 +55,40 @@
 
     data () {
       return {
-        expandNews: false
+        expandNews: false,
+        expandSingle: false
       }
     }
   }
 </script>
 
 <style lang="scss" scoped>
+  $list-width: 320px;
+
+  .full-control {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap-reverse;
+  }
+
+  .list {
+    width: $list-width;
+  }
+
   .full-control > .md-list {
-    width: 320px;
+    width: $list-width;
     max-width: 100%;
     height: 400px;
     display: inline-block;
     overflow: auto;
     border: 1px solid rgba(#000, .12);
     vertical-align: top;
   }
+
+  .control {
+    min-width: 250px;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+  }
 </style>
diff --git a/src/components/MdList/MdList.vue b/src/components/MdList/MdList.vue
@@ -8,7 +8,49 @@
   import MdComponent from 'core/MdComponent'
 
   export default new MdComponent({
-    name: 'MdList'
+    name: 'MdList',
+    data () {
+      return {
+        MdList: {
+          expandable: [],
+          expandATab: this.expandATab,
+          pushExpandable: this.pushExpandable,
+          removeExpandable: this.removeExpandable
+        }
+      }
+    },
+    provide () {
+      return {
+        MdList: this.MdList
+      }
+    },
+    props: {
+      mdExpandSingle: {
+        default: false
+      }
+    },
+    methods: {
+      expandATab (expandedListItem) {
+        if (this.mdExpandSingle && expandedListItem) {
+          const otherExpandableListItems = this.MdList.expandable.filter(target => target !== expandedListItem)
+          otherExpandableListItems.forEach(expandableListItem => expandableListItem.close())
+        }
+      },
+      pushExpandable (expandableListItem) {
+        let expandableListItems = this.MdList.expandable
+
+        if (!expandableListItems.find(target => target === expandableListItem)) {
+          this.MdList.expandable = expandableListItems.concat([expandableListItem])
+        }
+      },
+      removeExpandable (expandableListItem) {
+        let expandableListItems = this.MdList.expandable
+
+        if (expandableListItems.find(target => target === expandableListItem)) {
+          this.MdList.expandable = expandableListItems.filter(target => target !== expandableListItem)
+        }
+      }
+    }
   })
 </script>
 

diff --git a/src/components/MdList/MdListItem/MdListItemExpand.vue b/src/components/MdList/MdListItem/MdListItemExpand.vue
@@ -23,6 +23,7 @@
       MdArrowDownIcon
     },
     mixins: [MdListItemMixin],
+    inject: ['MdList'],
     data: () => ({
       expandStyles: {},
       showContent: false
@@ -98,12 +99,22 @@
         let expanded = this.showContent
         this.$emit('update:mdExpanded', expanded)
         this.$nextTick(() => this.$emit(expanded ? 'md-expanded' : 'md-collapsed'))
+
+        if (expanded) {
+          this.MdList.expandATab(this)
+        }
       }
     },
+    created () {
+      this.MdList.pushExpandable(this)
+    },
     mounted () {
       if (this.mdExpanded) {
         this.open()
       }
+    },
+    beforeDestroy () {
+      this.MdList.removeExpandable(this)
     }
   }
 </script>