update the master branch to the latest

src/components/layout/content.vue

@@ -0,0 +1,14 @@
+<template>
+    <div :class="wrapClasses"><slot></slot></div>
+</template>
+<script>
+    const prefixCls = 'ivu-layout';
+    export default {
+        name: 'Content',
+        computed: {
+            wrapClasses () {
+                return `${prefixCls}-content`;
+            }
+        }
+    };
+</script>

src/components/layout/footer.vue

@@ -0,0 +1,14 @@
+<template>
+    <div :class="wrapClasses"><slot></slot></div>
+</template>
+<script>
+    const prefixCls = 'ivu-layout';
+    export default {
+        name: 'Footer',
+        computed: {
+            wrapClasses () {
+                return `${prefixCls}-footer`;
+            }
+        }
+    };
+</script>

src/components/layout/header.vue

@@ -0,0 +1,14 @@
+<template>
+    <div :class="wrapClasses"><slot></slot></div>
+</template>
+<script>
+    const prefixCls = 'ivu-layout';
+    export default {
+        name: 'Header',
+        computed: {
+            wrapClasses () {
+                return `${prefixCls}-header`;
+            }
+        }
+    };
+</script>

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; 

src/components/layout/layout.vue

@@ -0,0 +1,35 @@
+<template>
+     <div :class="wrapClasses"><slot></slot></div>
+</template>
+<script>
+    const prefixCls = 'ivu-layout';
+
+    export default {
+        name: 'Layout',
+        data () {
+            return {
+                hasSider: false
+            };
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-has-sider`]: this.hasSider
+                    }
+                ];
+            }
+        },
+        methods: {
+            findSider () {
+                return this.$children.some(child => {
+                    return child.$options.name === 'Sider'; 
+                });
+            }
+        },
+        mounted () {
+            this.hasSider = this.findSider();
+        }
+    };
+</script>

src/components/layout/sider.vue

@@ -0,0 +1,156 @@
+<template>
+    <div 
+        :class="wrapClasses" 
+        :style="wrapStyles">
+        <span v-show="showZeroTrigger" @click="toggleCollapse" :class="zeroWidthTriggerClasses">
+            <i class="ivu-icon ivu-icon-ios-menu"></i>
+        </span>
+        <div :class="childClasses">
+            <slot></slot>
+        </div>
+        <slot name="trigger">
+            <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
+                <i :class="triggerIconClasses"></i>
+            </div>
+        </slot>
+    </div>
+</template>
+<script>
+    import { on, off } from '../../utils/dom';
+    import { oneOf, dimensionMap, setMatchMedia } from '../../utils/assist';
+    const prefixCls = 'ivu-layout-sider';
+    setMatchMedia();
+    export default {
+        name: 'Sider',
+        props: {
+            value: {  // if it's collpased now
+                type: Boolean,
+                default: false
+            },
+            width: {
+                type: [Number, String],
+                default: 200
+            },
+            collapsedWidth: {
+                type: [Number, String],
+                default: 64
+            },
+            hideTrigger: {
+                type: Boolean,
+                default: false
+            },
+            breakpoint: {
+                type: String,
+                validator (val) {
+                    return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']);
+                }
+            },
+            collapsible: {
+                type: Boolean,
+                default: false
+            },
+            defaultCollapsed: {
+                type: Boolean,
+                default: false
+            },
+            reverseArrow: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                mediaMatched: false
+            };
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}`,
+                    this.siderWidth ? '' : `${prefixCls}-zero-width`,
+                    this.value ? `${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.value ? `${prefixCls}-trigger-collapsed` : '',
+                ];
+            },
+            childClasses () {
+                return `${this.prefixCls}-children`;
+            },
+            zeroWidthTriggerClasses () {
+                return [
+                    `${prefixCls}-zero-width-trigger`,
+                    this.reverseArrow ? `${prefixCls}-zero-width-trigger-left` : ''
+                ];
+            },
+            triggerIconClasses () {
+                return [
+                    'ivu-icon',
+                    `ivu-icon-ios-arrow-${this.reverseArrow ? 'forward' : 'back'}`,
+                    `${prefixCls}-trigger-icon`,
+                ];
+            },
+            siderWidth () {
+                return this.collapsible ? (this.value ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width)) : this.width;
+            },
+            showZeroTrigger () {
+                return this.collapsible ? (this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.value && !this.hideTrigger) : false;
+            },
+            showBottomTrigger () {
+                return this.collapsible ? !this.mediaMatched && !this.hideTrigger : false;
+            }
+        },
+        methods: {
+            toggleCollapse () {
+                let value = this.collapsible ? !this.value : false;
+                this.$emit('input', 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);
+                }
+            },
+            onWindowResize () {
+                this.matchMedia();
+            }
+        },
+        watch: {
+            value (stat) {
+                this.$emit('on-collapse', stat);
+            }
+        },
+        mounted () {
+            if (this.defaultCollapsed) {
+                this.$emit('input', this.defaultCollapsed);
+            }
+            if (this.breakpoint !== undefined) {
+                on(window, 'resize', this.onWindowResize);
+                this.matchMedia();
+            }
+        },
+        beforeDestroy () {
+            if (this.breakpoint !== undefined) {
+                off(window, 'resize', this.onWindowResize);
+            }
+        }
+    };
+</script>