From a2eb028782a1da2da589999a176c89bb72d70b85 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Mon, 18 Dec 2017 18:25:16 +0800
Subject: [PATCH 01/12] add layout component with header, content, sider and
 footer

---
 examples/app.vue                  |   3 +-
 examples/main.js                  |   4 +
 examples/routers/layout.vue       |  61 ++++++++++++
 src/components/content/index.js   |   3 +
 src/components/footer/index.js    |   3 +
 src/components/header/index.js    |   3 +
 src/components/layout/content.vue |  28 ++++++
 src/components/layout/footer.vue  |  28 ++++++
 src/components/layout/header.vue  |  28 ++++++
 src/components/layout/index.js    |  12 +++
 src/components/layout/layout.vue  |  43 +++++++++
 src/components/layout/sider.vue   | 150 ++++++++++++++++++++++++++++++
 src/components/sider/index.js     |   3 +
 src/index.js                      |  15 ++-
 src/styles/components/index.less  |   1 +
 src/styles/components/layout.less | 113 ++++++++++++++++++++++
 src/styles/custom.less            |  15 ++-
 17 files changed, 509 insertions(+), 4 deletions(-)
 create mode 100644 examples/routers/layout.vue
 create mode 100644 src/components/content/index.js
 create mode 100644 src/components/footer/index.js
 create mode 100644 src/components/header/index.js
 create mode 100644 src/components/layout/content.vue
 create mode 100644 src/components/layout/footer.vue
 create mode 100644 src/components/layout/header.vue
 create mode 100644 src/components/layout/index.js
 create mode 100644 src/components/layout/layout.vue
 create mode 100644 src/components/layout/sider.vue
 create mode 100644 src/components/sider/index.js
 create mode 100644 src/styles/components/layout.less

diff --git a/examples/app.vue b/examples/app.vue
index 9c202459..b93032ac 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -6,13 +6,14 @@ nav { margin-bottom: 40px; }
 ul { display: flex; flex-wrap: wrap; }
 li { display: inline-block; }
 li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
-.container{ padding: 10px 40px; }
+.container{ padding: 10px 40px 0; }
 .v-link-active { color: #bbb; }
 </style>
 <template>
     <div class="container">
         <nav>
             <ul>
+                <li><router-link to="/layout">Layout</router-link></li>
                 <li><router-link to="/affix">Affix</router-link></li>
                 <li><router-link to="/grid">Grid</router-link></li>
                 <li><router-link to="/button">Button</router-link></li>
diff --git a/examples/main.js b/examples/main.js
index 1e7089a1..30ece507 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -17,6 +17,10 @@ Vue.config.debug = true;
 // 路由配置
 const router = new VueRouter({
     routes: [
+        {
+            path: '/layout',
+            component: require('./routers/layout.vue')
+        },
         {
             path: '/affix',
             component: require('./routers/affix.vue')
diff --git a/examples/routers/layout.vue b/examples/routers/layout.vue
new file mode 100644
index 00000000..980a8037
--- /dev/null
+++ b/examples/routers/layout.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="layout-demo-con">
+        <Layout :style="{minHeight: '100vh'}">
+            <Sider 
+                v-model="isCollapsed"
+                collapsed-width="0" 
+                breakpoint="md" 
+                ref="side"
+                width="200">
+                <Menu width="auto" theme="dark" active-name="1">
+                    <MenuGroup title="内容管理">
+                        <MenuItem name="1">
+                            <Icon type="document-text"></Icon>
+                            文章管理
+                        </MenuItem>
+                        <MenuItem name="2">
+                            <Icon type="chatbubbles"></Icon>
+                            评论管理
+                        </MenuItem>
+                    </MenuGroup>
+                    <MenuGroup title="统计分析">
+                        <MenuItem name="3">
+                            <Icon type="heart"></Icon>
+                            用户留存
+                        </MenuItem>
+                        <MenuItem name="4">
+                            <Icon type="heart-broken"></Icon>
+                            流失用户
+                        </MenuItem>
+                    </MenuGroup>
+                </Menu>
+            </Sider>
+            <Layout class-name="test-class">
+                <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
+                <Content :style="{background:'#FFCF9E'}">
+                    <p v-for="i in 100" :key="i">{{ i }}</p>
+                </Content>
+                <Footer>sdfsdsdfsdfs</Footer>
+            </Layout>
+        </Layout>
+    </div>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            isCollapsed: false
+        };
+    },
+    methods: {
+        toggleCollapse () {
+            this.$refs.side.toggleCollapse();
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    .layout-demo-con{
+        height: 100%;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/content/index.js b/src/components/content/index.js
new file mode 100644
index 00000000..66372055
--- /dev/null
+++ b/src/components/content/index.js
@@ -0,0 +1,3 @@
+import Content from '../layout/content.vue';
+
+export default Content; 
\ No newline at end of file
diff --git a/src/components/footer/index.js b/src/components/footer/index.js
new file mode 100644
index 00000000..bf29c1ab
--- /dev/null
+++ b/src/components/footer/index.js
@@ -0,0 +1,3 @@
+import Footer from '../layout/footer.vue';
+
+export default Footer; 
\ No newline at end of file
diff --git a/src/components/header/index.js b/src/components/header/index.js
new file mode 100644
index 00000000..88d8355c
--- /dev/null
+++ b/src/components/header/index.js
@@ -0,0 +1,3 @@
+import Header from '../layout/header.vue';
+
+export default Header; 
\ No newline at end of file
diff --git a/src/components/layout/content.vue b/src/components/layout/content.vue
new file mode 100644
index 00000000..95802f9c
--- /dev/null
+++ b/src/components/layout/content.vue
@@ -0,0 +1,28 @@
+<template>
+    <div :class="wrapClasses"><slot></slot></div>
+</template>
+<script>
+    const prefixCls = 'ivu-layout';
+    export default {
+        name: 'Content',
+        props: {
+            className: {
+                type: String,
+                default: ''
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls
+            };
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-content`,
+                    this.className
+                ];
+            }
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/components/layout/footer.vue b/src/components/layout/footer.vue
new file mode 100644
index 00000000..7ef94e3b
--- /dev/null
+++ b/src/components/layout/footer.vue
@@ -0,0 +1,28 @@
+<template>
+    <div :class="wrapClasses"><slot></slot></div>
+</template>
+<script>
+    const prefixCls = 'ivu-layout';
+    export default {
+        name: 'Footer',
+        props: {
+            className: {
+                type: String,
+                default: ''
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls
+            };
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-footer`,
+                    this.className
+                ];
+            }
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/components/layout/header.vue b/src/components/layout/header.vue
new file mode 100644
index 00000000..5f2a09a7
--- /dev/null
+++ b/src/components/layout/header.vue
@@ -0,0 +1,28 @@
+<template>
+    <div :class="wrapClasses"><slot></slot></div>
+</template>
+<script>
+    const prefixCls = 'ivu-layout';
+    export default {
+        name: 'Header',
+        props: {
+            className: {
+                type: String,
+                default: ''
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls
+            };
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-header`,
+                    this.className
+                ];
+            }
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/components/layout/index.js b/src/components/layout/index.js
new file mode 100644
index 00000000..128b64d8
--- /dev/null
+++ b/src/components/layout/index.js
@@ -0,0 +1,12 @@
+import Layout from './layout.vue';
+import Header from './header.vue';
+import Sider from './sider.vue';
+import Content from './content.vue';
+import Footer from './footer.vue';
+
+Layout.Header = Header;
+Layout.Sider = Sider;
+Layout.Content = Content;
+Layout.Footer = Footer;
+
+export default Layout; 
\ No newline at end of file
diff --git a/src/components/layout/layout.vue b/src/components/layout/layout.vue
new file mode 100644
index 00000000..ece486bf
--- /dev/null
+++ b/src/components/layout/layout.vue
@@ -0,0 +1,43 @@
+<template>
+     <div :class="wrapClasses"><slot></slot></div>
+ </template>
+ <script>
+     const prefixCls = 'ivu-layout';
+ 
+     export default {
+         name: 'Layout',
+         props: {
+             className: {
+                 type: String,
+                 default: ''
+             }
+         },
+         data () {
+             return {
+                 prefixCls: prefixCls,
+                 hasSider: false
+             };
+         },
+         computed: {
+             wrapClasses () {
+                 return [
+                     `${prefixCls}`,
+                     this.className,
+                     {
+                         [`${prefixCls}-has-sider`]: this.hasSider
+                     }
+                 ];
+             }
+         },
+         methods: {
+             findSider () {
+                 return this.$children.some(child => {
+                     return child.$options._componentTag === 'Sider';
+                 });
+             }
+         },
+         mounted () {
+             this.hasSider = this.findSider();
+         }
+     };
+ </script>
\ No newline at end of file
diff --git a/src/components/layout/sider.vue b/src/components/layout/sider.vue
new file mode 100644
index 00000000..3dbb5d79
--- /dev/null
+++ b/src/components/layout/sider.vue
@@ -0,0 +1,150 @@
+<template>
+    <div 
+        :class="wrapClasses" 
+        :style="{width: siderWidth + 'px', minWidth: siderWidth + 'px', maxWidth: siderWidth + 'px', flex: '0 0 ' + siderWidth + 'px'}">
+        <span v-show="showZeroTrigger" @click="toggleCollapse" :class="zeroWidthTriggerClasses">
+            <i class="ivu-icon ivu-icon-navicon-round"></i>
+        </span>
+        <div :class="`${prefixCls}-children`">
+            <slot></slot>
+        </div>
+        <div v-show="!mediaMatched && !hideTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
+            <i :class="triggerIconClasses"></i>
+        </div>
+    </div>
+</template>
+<script>
+    import { on, off } from '../../utils/dom';
+    import { oneOf } from '../../utils/assist';
+    const prefixCls = 'ivu-layout-sider';
+    const dimensionMap = {
+        xs: '480px',
+        sm: '768px',
+        md: '992px',
+        lg: '1200px',
+        xl: '1600px',
+    };
+    if (typeof window !== 'undefined') {
+        const matchMediaPolyfill = mediaQuery => {
+            return {
+                media: mediaQuery,
+                matches: false,
+                on() {
+                },
+                off() {
+                },
+            };
+        };
+        window.matchMedia = window.matchMedia || matchMediaPolyfill;
+    }
+    export default {
+        name: 'Sider',
+        props: {
+            value: {  // if it's collpased now
+                type: Boolean,
+                default: false
+            },
+            className: {
+                type: String,
+                default: ''
+            },
+            width: {
+                type: [Number, String],
+                default: 200
+            },
+            collapsedWidth: {
+                type: [Number, String],
+                default: 64
+            },
+            hideTrigger: {
+                type: Boolean,
+                default: false
+            },
+            breakpoint: {
+                type: String,
+                default: '',
+                validator (val) {
+                    return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
+                }
+            },
+            defaultCollapsed: {
+                type: Boolean,
+                default: false
+            },
+            reverseArrow: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                mediaMatched: false
+            };
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}`,
+                    this.className,
+                    this.siderWidth ? '' : `${prefixCls}-zero-width`,
+                    this.value ? `${prefixCls}-collapsed` : ''
+                ];
+            },
+            triggerClasses () {
+                return [
+                    `${prefixCls}-trigger`,
+                    this.value ? `${prefixCls}-trigger-collapsed` : '',
+                ];
+            },
+            zeroWidthTriggerClasses () {
+                return [
+                    `${prefixCls}-zero-width-trigger`,
+                    this.reverseArrow ? `${prefixCls}-zero-width-trigger-left` : ''
+                ];
+            },
+            triggerIconClasses () {
+                return [
+                    'ivu-icon',
+                    `ivu-icon-chevron-${this.reverseArrow ? 'right' : 'left'}`,
+                    `${prefixCls}-trigger-icon`,
+                ];
+            },
+            siderWidth () {
+                return this.value ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width);
+            },
+            showZeroTrigger () {
+                return this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.value && !this.hideTrigger;
+            }
+        },
+        methods: {
+            toggleCollapse () {
+                this.$emit('input', !this.value);
+                this.$emit('on-collapse', !this.value);
+            },
+            matchMedia () {
+                let matchMedia;
+                if (window.matchMedia) {
+                    matchMedia = window.matchMedia;
+                }
+                let mediaMatched = this.mediaMatched;
+                this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches;
+                if (this.mediaMatched !== mediaMatched) {
+                    this.$emit('input', this.mediaMatched);
+                    this.$emit('on-collapse', this.mediaMatched);
+                }
+            },
+            onWindowResize () {
+                this.matchMedia();
+            }
+        },
+        mounted () {
+            on(window, 'resize', this.onWindowResize);
+            this.matchMedia();
+            this.$emit('input', this.defaultCollapsed);
+        },
+        destroyed () {
+            off(window, 'resize', this.onWindowResize);
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/components/sider/index.js b/src/components/sider/index.js
new file mode 100644
index 00000000..7eced07c
--- /dev/null
+++ b/src/components/sider/index.js
@@ -0,0 +1,3 @@
+import Sider from '../layout/sider.vue';
+
+export default Sider; 
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 0931176f..5daf1834 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,13 +17,17 @@ import Checkbox from './components/checkbox';
 import Circle from './components/circle';
 import Collapse from './components/collapse';
 import ColorPicker from './components/color-picker';
+import Content from './components/content';
 import DatePicker from './components/date-picker';
 import Dropdown from './components/dropdown';
+import Footer from './components/footer';
 import Form from './components/form';
+import Header from './components/header';
 import Icon from './components/icon';
 import Input from './components/input';
 import InputNumber from './components/input-number';
 import Scroll from './components/scroll';
+import Layout from './components/layout';
 import LoadingBar from './components/loading-bar';
 import Menu from './components/menu';
 import Message from './components/message';
@@ -34,6 +38,7 @@ import Poptip from './components/poptip';
 import Progress from './components/progress';
 import Radio from './components/radio';
 import Rate from './components/rate';
+import Sider from './components/sider';
 import Slider from './components/slider';
 import Spin from './components/spin';
 import Steps from './components/steps';
@@ -71,21 +76,26 @@ const components = {
     Col,
     Collapse,
     ColorPicker,
+    Content: Content,
     DatePicker,
     Dropdown,
     DropdownItem: Dropdown.Item,
     DropdownMenu: Dropdown.Menu,
+    Footer: Footer,
     Form,
     FormItem: Form.Item,
+    Header: Header,
     Icon,
     Input,
     InputNumber,
     Scroll,
+    Sider: Sider,
+    Submenu: Menu.Sub,
+    Layout: Layout,
     LoadingBar,
     Menu,
     MenuGroup: Menu.Group,
     MenuItem: Menu.Item,
-    Submenu: Menu.Sub,
     Message,
     Modal,
     Notice,
@@ -122,7 +132,10 @@ const iview = {
     iButton: Button,
     iCircle: Circle,
     iCol: Col,
+    iContent: Content,
     iForm: Form,
+    iFooter: Footer,
+    iHeader: Header,
     iInput: Input,
     iMenu: Menu,
     iOption: Option,
diff --git a/src/styles/components/index.less b/src/styles/components/index.less
index 4d1c745b..cb877ad4 100644
--- a/src/styles/components/index.less
+++ b/src/styles/components/index.less
@@ -15,6 +15,7 @@
 @import "input-number";
 @import "scroll";
 @import "tag";
+@import "layout";
 @import "loading-bar";
 @import "progress";
 @import "timeline";
diff --git a/src/styles/components/layout.less b/src/styles/components/layout.less
new file mode 100644
index 00000000..a32d30a1
--- /dev/null
+++ b/src/styles/components/layout.less
@@ -0,0 +1,113 @@
+@layout-prefix-cls: ~"@{css-prefix}layout";
+
+.@{layout-prefix-cls} {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    background: @layout-body-background;
+    
+    &&-has-sider {
+        flex-direction: row;
+        > .@{layout-prefix-cls},
+        > .@{layout-prefix-cls}-content {
+          overflow-x: hidden;
+        }
+    }
+
+    &-header,
+    &-footer {
+        flex: 0 0 auto;
+    }
+
+    &-header {
+        background: @layout-header-background;
+        padding: @layout-header-padding;
+        height: @layout-header-height;
+        line-height: @layout-header-height;
+    }
+
+    &-sider {
+        transition: all .2s @ease-in-out;
+        position: relative;
+        background: @layout-sider-background;
+
+        min-width: 0;
+
+        &-children {
+            height: 100%;
+            padding-top: 0.1px;
+            margin-top: -0.1px;
+        }
+
+        &-has-trigger {
+            padding-bottom: @layout-trigger-height;
+        }
+
+        &-trigger {
+            position: fixed;
+            bottom: 0;
+            text-align: center;
+            cursor: pointer;
+            height: @layout-trigger-height;
+            line-height: @layout-trigger-height;
+            color: @layout-trigger-color;
+            background: @layout-sider-background;
+            z-index: 1000;
+            transition: all .2s @ease-in-out;
+            .ivu-icon {
+                font-size: 16px;
+            }
+            >* {
+                transition: all .2s;
+            }
+            &-collapsed {
+                .@{layout-prefix-cls}-sider-trigger-icon {
+                    transform: rotateZ(180deg);
+                }
+            }
+        }
+
+        &-zero-width {
+            & > * {
+                overflow: hidden;
+            }
+
+            &-trigger {
+                position: absolute;
+                top: @layout-header-height;
+                right: -@layout-zero-trigger-width;
+                text-align: center;
+                width: @layout-zero-trigger-width;
+                height: @layout-zero-trigger-height;
+                line-height: @layout-zero-trigger-height;
+                background: @layout-sider-background;
+                color: #fff;
+                font-size: @layout-zero-trigger-width / 2;
+                border-radius: 0 @border-radius-base @border-radius-base 0;
+                cursor: pointer;
+                transition: background .3s ease;
+        
+                &:hover {
+                  background: tint(@layout-sider-background, 10%);
+                }
+
+                &&-left {
+                    right: 0;
+                    left: -@layout-zero-trigger-width;
+                    border-radius: @border-radius-base 0 0 @border-radius-base;
+                }
+            }
+        }
+    }
+
+    &-footer {
+        background: @layout-footer-background;
+        padding: @layout-footer-padding;
+        color: @text-color;
+        font-size: @font-size-base;
+    }
+
+    &-content {
+        flex: auto;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/custom.less b/src/styles/custom.less
index 3ef5e28c..b47c3451 100644
--- a/src/styles/custom.less
+++ b/src/styles/custom.less
@@ -89,8 +89,19 @@
 @btn-circle-size-small  : 24px;
 
 // Layout and Grid
-@grid-columns           : 24;
-@grid-gutter-width      : 0;
+@grid-columns                : 24;
+@grid-gutter-width           : 0;
+@layout-body-background      : #f5f7f9;
+@layout-header-background    : #495060;
+@layout-header-height        : 64px;
+@layout-header-padding       : 0 50px;
+@layout-footer-padding       : 24px 50px;
+@layout-footer-background    : @layout-body-background;
+@layout-sider-background     : @layout-header-background;
+@layout-trigger-height       : 48px;
+@layout-trigger-color        : #fff;
+@layout-zero-trigger-width   : 36px;
+@layout-zero-trigger-height  : 42px;
 
 // Legend
 @legend-color           : #999;

From f724eb5797fe6091299fc4cd34f7ad1114d4ca45 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Mon, 18 Dec 2017 18:36:50 +0800
Subject: [PATCH 02/12] update

---
 src/components/layout/layout.vue | 82 ++++++++++++++++----------------
 src/components/layout/sider.vue  |  6 +--
 2 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/src/components/layout/layout.vue b/src/components/layout/layout.vue
index ece486bf..1c294845 100644
--- a/src/components/layout/layout.vue
+++ b/src/components/layout/layout.vue
@@ -1,43 +1,43 @@
 <template>
      <div :class="wrapClasses"><slot></slot></div>
- </template>
- <script>
-     const prefixCls = 'ivu-layout';
- 
-     export default {
-         name: 'Layout',
-         props: {
-             className: {
-                 type: String,
-                 default: ''
-             }
-         },
-         data () {
-             return {
-                 prefixCls: prefixCls,
-                 hasSider: false
-             };
-         },
-         computed: {
-             wrapClasses () {
-                 return [
-                     `${prefixCls}`,
-                     this.className,
-                     {
-                         [`${prefixCls}-has-sider`]: this.hasSider
-                     }
-                 ];
-             }
-         },
-         methods: {
-             findSider () {
-                 return this.$children.some(child => {
-                     return child.$options._componentTag === 'Sider';
-                 });
-             }
-         },
-         mounted () {
-             this.hasSider = this.findSider();
-         }
-     };
- </script>
\ No newline at end of file
+</template>
+<script>
+    const prefixCls = 'ivu-layout';
+
+    export default {
+        name: 'Layout',
+        props: {
+            className: {
+                type: String,
+                default: ''
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                hasSider: false
+            };
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}`,
+                    this.className,
+                    {
+                        [`${prefixCls}-has-sider`]: this.hasSider
+                    }
+                ];
+            }
+        },
+        methods: {
+            findSider () {
+                return this.$children.some(child => {
+                    return child.$options._componentTag === 'Sider';
+                });
+            }
+        },
+        mounted () {
+            this.hasSider = this.findSider();
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/components/layout/sider.vue b/src/components/layout/sider.vue
index 3dbb5d79..66af0916 100644
--- a/src/components/layout/sider.vue
+++ b/src/components/layout/sider.vue
@@ -29,10 +29,8 @@
             return {
                 media: mediaQuery,
                 matches: false,
-                on() {
-                },
-                off() {
-                },
+                on() {},
+                off() {},
             };
         };
         window.matchMedia = window.matchMedia || matchMediaPolyfill;

From 1012b5cdaa7222e68aaea13a2ac761fea2205bc0 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Mon, 18 Dec 2017 18:41:55 +0800
Subject: [PATCH 03/12] remove className props

---
 src/components/layout/content.vue | 11 +----------
 src/components/layout/footer.vue  | 11 +----------
 src/components/layout/header.vue  | 11 +----------
 src/components/layout/layout.vue  |  7 -------
 src/components/layout/sider.vue   |  5 -----
 5 files changed, 3 insertions(+), 42 deletions(-)

diff --git a/src/components/layout/content.vue b/src/components/layout/content.vue
index 95802f9c..03caad34 100644
--- a/src/components/layout/content.vue
+++ b/src/components/layout/content.vue
@@ -5,12 +5,6 @@
     const prefixCls = 'ivu-layout';
     export default {
         name: 'Content',
-        props: {
-            className: {
-                type: String,
-                default: ''
-            }
-        },
         data () {
             return {
                 prefixCls: prefixCls
@@ -18,10 +12,7 @@
         },
         computed: {
             wrapClasses () {
-                return [
-                    `${prefixCls}-content`,
-                    this.className
-                ];
+                return `${prefixCls}-content`;
             }
         }
     };
diff --git a/src/components/layout/footer.vue b/src/components/layout/footer.vue
index 7ef94e3b..2bc5322c 100644
--- a/src/components/layout/footer.vue
+++ b/src/components/layout/footer.vue
@@ -5,12 +5,6 @@
     const prefixCls = 'ivu-layout';
     export default {
         name: 'Footer',
-        props: {
-            className: {
-                type: String,
-                default: ''
-            }
-        },
         data () {
             return {
                 prefixCls: prefixCls
@@ -18,10 +12,7 @@
         },
         computed: {
             wrapClasses () {
-                return [
-                    `${prefixCls}-footer`,
-                    this.className
-                ];
+                return `${prefixCls}-footer`;
             }
         }
     };
diff --git a/src/components/layout/header.vue b/src/components/layout/header.vue
index 5f2a09a7..2ca4dd25 100644
--- a/src/components/layout/header.vue
+++ b/src/components/layout/header.vue
@@ -5,12 +5,6 @@
     const prefixCls = 'ivu-layout';
     export default {
         name: 'Header',
-        props: {
-            className: {
-                type: String,
-                default: ''
-            }
-        },
         data () {
             return {
                 prefixCls: prefixCls
@@ -18,10 +12,7 @@
         },
         computed: {
             wrapClasses () {
-                return [
-                    `${prefixCls}-header`,
-                    this.className
-                ];
+                return `${prefixCls}-header`;
             }
         }
     };
diff --git a/src/components/layout/layout.vue b/src/components/layout/layout.vue
index 1c294845..1d71e995 100644
--- a/src/components/layout/layout.vue
+++ b/src/components/layout/layout.vue
@@ -6,12 +6,6 @@
 
     export default {
         name: 'Layout',
-        props: {
-            className: {
-                type: String,
-                default: ''
-            }
-        },
         data () {
             return {
                 prefixCls: prefixCls,
@@ -22,7 +16,6 @@
             wrapClasses () {
                 return [
                     `${prefixCls}`,
-                    this.className,
                     {
                         [`${prefixCls}-has-sider`]: this.hasSider
                     }
diff --git a/src/components/layout/sider.vue b/src/components/layout/sider.vue
index 66af0916..16ed8652 100644
--- a/src/components/layout/sider.vue
+++ b/src/components/layout/sider.vue
@@ -42,10 +42,6 @@
                 type: Boolean,
                 default: false
             },
-            className: {
-                type: String,
-                default: ''
-            },
             width: {
                 type: [Number, String],
                 default: 200
@@ -84,7 +80,6 @@
             wrapClasses () {
                 return [
                     `${prefixCls}`,
-                    this.className,
                     this.siderWidth ? '' : `${prefixCls}-zero-width`,
                     this.value ? `${prefixCls}-collapsed` : ''
                 ];

From cbba62aedaf96526d8906e9334dd265805a9c80a Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Mon, 18 Dec 2017 18:44:22 +0800
Subject: [PATCH 04/12] close #2318

---
 src/components/layout/layout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/layout.vue b/src/components/layout/layout.vue
index 1d71e995..55a454c2 100644
--- a/src/components/layout/layout.vue
+++ b/src/components/layout/layout.vue
@@ -25,7 +25,7 @@
         methods: {
             findSider () {
                 return this.$children.some(child => {
-                    return child.$options._componentTag === 'Sider';
+                    return child.$options._componentTag === 'Sider'; 
                 });
             }
         },

From 1a90ee6cb00520badd4d8b7d0bf27436ab747619 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Mon, 18 Dec 2017 18:49:15 +0800
Subject: [PATCH 05/12] move dimensionMap from sider.vue to assist.js

---
 src/components/layout/sider.vue | 9 +--------
 src/utils/assist.js             | 8 ++++++++
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/layout/sider.vue b/src/components/layout/sider.vue
index 16ed8652..9cae9627 100644
--- a/src/components/layout/sider.vue
+++ b/src/components/layout/sider.vue
@@ -15,15 +15,8 @@
 </template>
 <script>
     import { on, off } from '../../utils/dom';
-    import { oneOf } from '../../utils/assist';
+    import { oneOf, dimensionMap } from '../../utils/assist';
     const prefixCls = 'ivu-layout-sider';
-    const dimensionMap = {
-        xs: '480px',
-        sm: '768px',
-        md: '992px',
-        lg: '1200px',
-        xl: '1600px',
-    };
     if (typeof window !== 'undefined') {
         const matchMediaPolyfill = mediaQuery => {
             return {
diff --git a/src/utils/assist.js b/src/utils/assist.js
index 227a3c56..97fcf576 100644
--- a/src/utils/assist.js
+++ b/src/utils/assist.js
@@ -278,3 +278,11 @@ export function removeClass(el, cls) {
         el.className = trim(curClass);
     }
 }
+
+export const dimensionMap = {
+    xs: '480px',
+    sm: '768px',
+    md: '992px',
+    lg: '1200px',
+    xl: '1600px',
+};
\ No newline at end of file

From d85e5726453cc84e3952f3d2fba233964fa5b518 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Mon, 18 Dec 2017 18:55:29 +0800
Subject: [PATCH 06/12] create setMatchMedia in assist.js

---
 src/components/layout/sider.vue | 14 ++------------
 src/utils/assist.js             | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/layout/sider.vue b/src/components/layout/sider.vue
index 9cae9627..ff5bff35 100644
--- a/src/components/layout/sider.vue
+++ b/src/components/layout/sider.vue
@@ -15,19 +15,9 @@
 </template>
 <script>
     import { on, off } from '../../utils/dom';
-    import { oneOf, dimensionMap } from '../../utils/assist';
+    import { oneOf, dimensionMap, setMatchMedia } from '../../utils/assist';
     const prefixCls = 'ivu-layout-sider';
-    if (typeof window !== 'undefined') {
-        const matchMediaPolyfill = mediaQuery => {
-            return {
-                media: mediaQuery,
-                matches: false,
-                on() {},
-                off() {},
-            };
-        };
-        window.matchMedia = window.matchMedia || matchMediaPolyfill;
-    }
+    setMatchMedia();
     export default {
         name: 'Sider',
         props: {
diff --git a/src/utils/assist.js b/src/utils/assist.js
index 97fcf576..7ce97a41 100644
--- a/src/utils/assist.js
+++ b/src/utils/assist.js
@@ -285,4 +285,18 @@ export const dimensionMap = {
     md: '992px',
     lg: '1200px',
     xl: '1600px',
-};
\ No newline at end of file
+};
+
+export function setMatchMedia () {
+    if (typeof window !== 'undefined') {
+        const matchMediaPolyfill = mediaQuery => {
+            return {
+                media: mediaQuery,
+                matches: false,
+                on() {},
+                off() {},
+            };
+        };
+        window.matchMedia = window.matchMedia || matchMediaPolyfill;
+    }
+}
\ No newline at end of file

From affc010b3b24bcaf29bbad44e32084b0b28393f0 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Tue, 19 Dec 2017 10:51:57 +0800
Subject: [PATCH 07/12] add default value 'md' for breakpoint about sider.vue

---
 examples/routers/layout.vue     | 1 -
 src/components/layout/sider.vue | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/examples/routers/layout.vue b/examples/routers/layout.vue
index 980a8037..2369f9bf 100644
--- a/examples/routers/layout.vue
+++ b/examples/routers/layout.vue
@@ -4,7 +4,6 @@
             <Sider 
                 v-model="isCollapsed"
                 collapsed-width="0" 
-                breakpoint="md" 
                 ref="side"
                 width="200">
                 <Menu width="auto" theme="dark" active-name="1">
diff --git a/src/components/layout/sider.vue b/src/components/layout/sider.vue
index ff5bff35..b3a782c1 100644
--- a/src/components/layout/sider.vue
+++ b/src/components/layout/sider.vue
@@ -39,7 +39,7 @@
             },
             breakpoint: {
                 type: String,
-                default: '',
+                default: 'md',
                 validator (val) {
                     return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
                 }

From fb4427cf1dc1280bd966f57b078b847c157e6f06 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Tue, 19 Dec 2017 11:48:46 +0800
Subject: [PATCH 08/12] remove prefixcls in data of layout

---
 src/components/layout/content.vue | 5 -----
 src/components/layout/footer.vue  | 5 -----
 src/components/layout/header.vue  | 5 -----
 src/components/layout/layout.vue  | 1 -
 4 files changed, 16 deletions(-)

diff --git a/src/components/layout/content.vue b/src/components/layout/content.vue
index 03caad34..7691d265 100644
--- a/src/components/layout/content.vue
+++ b/src/components/layout/content.vue
@@ -5,11 +5,6 @@
     const prefixCls = 'ivu-layout';
     export default {
         name: 'Content',
-        data () {
-            return {
-                prefixCls: prefixCls
-            };
-        },
         computed: {
             wrapClasses () {
                 return `${prefixCls}-content`;
diff --git a/src/components/layout/footer.vue b/src/components/layout/footer.vue
index 2bc5322c..cf47ba68 100644
--- a/src/components/layout/footer.vue
+++ b/src/components/layout/footer.vue
@@ -5,11 +5,6 @@
     const prefixCls = 'ivu-layout';
     export default {
         name: 'Footer',
-        data () {
-            return {
-                prefixCls: prefixCls
-            };
-        },
         computed: {
             wrapClasses () {
                 return `${prefixCls}-footer`;
diff --git a/src/components/layout/header.vue b/src/components/layout/header.vue
index 2ca4dd25..da2acc1c 100644
--- a/src/components/layout/header.vue
+++ b/src/components/layout/header.vue
@@ -5,11 +5,6 @@
     const prefixCls = 'ivu-layout';
     export default {
         name: 'Header',
-        data () {
-            return {
-                prefixCls: prefixCls
-            };
-        },
         computed: {
             wrapClasses () {
                 return `${prefixCls}-header`;
diff --git a/src/components/layout/layout.vue b/src/components/layout/layout.vue
index 55a454c2..768011a5 100644
--- a/src/components/layout/layout.vue
+++ b/src/components/layout/layout.vue
@@ -8,7 +8,6 @@
         name: 'Layout',
         data () {
             return {
-                prefixCls: prefixCls,
                 hasSider: false
             };
         },

From f07aafb7177418d1617b059c6ed291c93f7aa6d5 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Tue, 19 Dec 2017 20:02:48 +0800
Subject: [PATCH 09/12] fixed bug about findSider

---
 src/components/layout/layout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/layout.vue b/src/components/layout/layout.vue
index 768011a5..25d7800b 100644
--- a/src/components/layout/layout.vue
+++ b/src/components/layout/layout.vue
@@ -24,7 +24,7 @@
         methods: {
             findSider () {
                 return this.$children.some(child => {
-                    return child.$options._componentTag === 'Sider'; 
+                    return child.$options.name === 'Sider'; 
                 });
             }
         },

From 47ea7cc21635b33ab43269879bf751d7979a07b9 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Tue, 19 Dec 2017 20:42:15 +0800
Subject: [PATCH 10/12] fixed bug about sider

---
 src/components/layout/sider.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/layout/sider.vue b/src/components/layout/sider.vue
index b3a782c1..44657dc8 100644
--- a/src/components/layout/sider.vue
+++ b/src/components/layout/sider.vue
@@ -56,7 +56,8 @@
         data () {
             return {
                 prefixCls: prefixCls,
-                mediaMatched: false
+                mediaMatched: false,
+                isCollapsed: false
             };
         },
         computed: {
@@ -64,13 +65,13 @@
                 return [
                     `${prefixCls}`,
                     this.siderWidth ? '' : `${prefixCls}-zero-width`,
-                    this.value ? `${prefixCls}-collapsed` : ''
+                    this.isCollapsed ? `${prefixCls}-collapsed` : ''
                 ];
             },
             triggerClasses () {
                 return [
                     `${prefixCls}-trigger`,
-                    this.value ? `${prefixCls}-trigger-collapsed` : '',
+                    this.isCollapsed ? `${prefixCls}-trigger-collapsed` : '',
                 ];
             },
             zeroWidthTriggerClasses () {
@@ -87,16 +88,17 @@
                 ];
             },
             siderWidth () {
-                return this.value ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width);
+                return this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width);
             },
             showZeroTrigger () {
-                return this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.value && !this.hideTrigger;
+                return this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger;
             }
         },
         methods: {
             toggleCollapse () {
-                this.$emit('input', !this.value);
-                this.$emit('on-collapse', !this.value);
+                this.isCollapsed = !this.isCollapsed;
+                this.$emit('input', !this.isCollapsed);
+                this.$emit('on-collapse', !this.isCollapsed);
             },
             matchMedia () {
                 let matchMedia;
@@ -105,7 +107,9 @@
                 }
                 let mediaMatched = this.mediaMatched;
                 this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches;
+                
                 if (this.mediaMatched !== mediaMatched) {
+                    this.isCollapsed = this.mediaMatched;
                     this.$emit('input', this.mediaMatched);
                     this.$emit('on-collapse', this.mediaMatched);
                 }

From 1c26d05c3139d8bbcdeb643ef4648e35789a06d5 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Tue, 19 Dec 2017 20:51:15 +0800
Subject: [PATCH 11/12] add 'collapsible' props for sider

---
 examples/routers/layout.vue     |  1 +
 src/components/layout/sider.vue | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/examples/routers/layout.vue b/examples/routers/layout.vue
index 2369f9bf..74f959ed 100644
--- a/examples/routers/layout.vue
+++ b/examples/routers/layout.vue
@@ -4,6 +4,7 @@
             <Sider 
                 v-model="isCollapsed"
                 collapsed-width="0" 
+                collapsible
                 ref="side"
                 width="200">
                 <Menu width="auto" theme="dark" active-name="1">
diff --git a/src/components/layout/sider.vue b/src/components/layout/sider.vue
index 44657dc8..bd794f68 100644
--- a/src/components/layout/sider.vue
+++ b/src/components/layout/sider.vue
@@ -8,7 +8,7 @@
         <div :class="`${prefixCls}-children`">
             <slot></slot>
         </div>
-        <div v-show="!mediaMatched && !hideTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
+        <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
             <i :class="triggerIconClasses"></i>
         </div>
     </div>
@@ -44,6 +44,10 @@
                     return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
                 }
             },
+            collapsible: {
+                type: Boolean,
+                default: false
+            },
             defaultCollapsed: {
                 type: Boolean,
                 default: false
@@ -88,15 +92,18 @@
                 ];
             },
             siderWidth () {
-                return this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width);
+                return this.collapsible ? (this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width)) : this.width;
             },
             showZeroTrigger () {
-                return this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger;
+                return this.collapsible ? (this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger) : false;
+            },
+            showBottomTrigger () {
+                return this.collapsible ? !this.mediaMatched && !this.hideTrigger : false;
             }
         },
         methods: {
             toggleCollapse () {
-                this.isCollapsed = !this.isCollapsed;
+                this.isCollapsed = this.collapsible ? !this.isCollapsed : false;
                 this.$emit('input', !this.isCollapsed);
                 this.$emit('on-collapse', !this.isCollapsed);
             },
@@ -109,7 +116,7 @@
                 this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches;
                 
                 if (this.mediaMatched !== mediaMatched) {
-                    this.isCollapsed = this.mediaMatched;
+                    this.isCollapsed = this.collapsible ? this.mediaMatched : false;
                     this.$emit('input', this.mediaMatched);
                     this.$emit('on-collapse', this.mediaMatched);
                 }

From 76db49cd1642b64c9d5a749addaf17b86e91c8d9 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Wed, 20 Dec 2017 10:14:30 +0800
Subject: [PATCH 12/12] replay class attr which using inline styles with
 computed props

---
 src/components/layout/sider.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/sider.vue b/src/components/layout/sider.vue
index bd794f68..6771708d 100644
--- a/src/components/layout/sider.vue
+++ b/src/components/layout/sider.vue
@@ -1,11 +1,11 @@
 <template>
     <div 
         :class="wrapClasses" 
-        :style="{width: siderWidth + 'px', minWidth: siderWidth + 'px', maxWidth: siderWidth + 'px', flex: '0 0 ' + siderWidth + 'px'}">
+        :style="wrapStyles">
         <span v-show="showZeroTrigger" @click="toggleCollapse" :class="zeroWidthTriggerClasses">
             <i class="ivu-icon ivu-icon-navicon-round"></i>
         </span>
-        <div :class="`${prefixCls}-children`">
+        <div :class="childClasses">
             <slot></slot>
         </div>
         <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
@@ -72,12 +72,23 @@
                     this.isCollapsed ? `${prefixCls}-collapsed` : ''
                 ];
             },
+            wrapStyles () {
+                return {
+                    width: `${this.siderWidth}px`,
+                    minWidth: `${this.siderWidth}px`,
+                    maxWidth: `${this.siderWidth}px`,
+                    flex: `0 0 ${this.siderWidth}px`
+                };
+            },
             triggerClasses () {
                 return [
                     `${prefixCls}-trigger`,
                     this.isCollapsed ? `${prefixCls}-trigger-collapsed` : '',
                 ];
             },
+            childClasses () {
+                return `${this.prefixCls}-children`;
+            },
             zeroWidthTriggerClasses () {
                 return [
                     `${prefixCls}-zero-width-trigger`,
@@ -129,6 +140,9 @@
             on(window, 'resize', this.onWindowResize);
             this.matchMedia();
             this.$emit('input', this.defaultCollapsed);
+            if (this.defaultCollapsed) {
+                this.isCollapsed = true;
+            }
         },
         destroyed () {
             off(window, 'resize', this.onWindowResize);