From c755733a9ca3bbcf4514e948bbbb5e0accd13e6e Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Wed, 1 Mar 2017 14:28:44 +0800
Subject: [PATCH] support Grid

---
 README.md                      |  2 +-
 src/components/grid/col.vue    | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/grid/index.js   |  4 ++++
 src/components/grid/row.vue    | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/layout/col.vue  | 71 -----------------------------------------------------------------------
 src/components/layout/index.js |  4 ----
 src/components/layout/row.vue  | 76 ----------------------------------------------------------------------------
 src/index.js                   |  6 +++---
 test/app.vue                   | 32 +++-----------------------------
 test/main.js                   |  4 ++++
 test/routers/affix.vue         | 11 +++++++++++
 test/routers/grid.vue          | 26 ++++++++++++++++++++++++++
 12 files changed, 199 insertions(+), 184 deletions(-)
 create mode 100644 src/components/grid/col.vue
 create mode 100644 src/components/grid/index.js
 create mode 100644 src/components/grid/row.vue
 delete mode 100644 src/components/layout/col.vue
 delete mode 100644 src/components/layout/index.js
 delete mode 100644 src/components/layout/row.vue
 create mode 100644 test/routers/grid.vue

diff --git a/README.md b/README.md
index 09df6a5..818c31c 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@
 ### English (Coming soon)
 
 ## Programming
-- [ ] Grid
+- [x] Grid
 - [ ] Layout
 - [ ] Button
 - [ ] Icon
diff --git a/src/components/grid/col.vue b/src/components/grid/col.vue
new file mode 100644
index 0000000..7e05b81
--- /dev/null
+++ b/src/components/grid/col.vue
@@ -0,0 +1,71 @@
+<template>
+    <div :class="classes" :style="styles">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-col';
+
+    export default {
+        props: {
+            span: [Number, String],
+            order: [Number, String],
+            offset: [Number, String],
+            push: [Number, String],
+            pull: [Number, String],
+            className: String,
+            xs: [Number, Object],
+            sm: [Number, Object],
+            md: [Number, Object],
+            lg: [Number, Object]
+        },
+        data () {
+            return {
+                gutter: 0
+            };
+        },
+        computed: {
+            classes () {
+                let classList = [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-span-${this.span}`]: this.span,
+                        [`${prefixCls}-order-${this.order}`]: this.order,
+                        [`${prefixCls}-offset-${this.offset}`]: this.offset,
+                        [`${prefixCls}-push-${this.push}`]: this.push,
+                        [`${prefixCls}-pull-${this.pull}`]: this.pull,
+                        [`${this.className}`]: !!this.className
+                    }
+                ];
+
+                ['xs', 'sm', 'md', 'lg'].forEach(size => {
+                    if (typeof this[size] === 'number') {
+                        classList.push(`${prefixCls}-span-${size}-${this[size]}`);
+                    } else if (typeof this[size] === 'object') {
+                        let props = this[size];
+                        Object.keys(props).forEach(prop => {
+                            classList.push(
+                                prop !== 'span'
+                                    ? `${prefixCls}-${size}-${prop}-${props[prop]}`
+                                    : `${prefixCls}-span-${size}-${props[prop]}`
+                            );
+                        });
+                    }
+                });
+
+                return classList;
+            },
+            styles () {
+                let style = {};
+                if (this.gutter !== 0) {
+                    style = {
+                        paddingLeft: this.gutter / 2 + 'px',
+                        paddingRight: this.gutter / 2 + 'px'
+                    };
+                }
+
+                return style;
+            }
+        }
+    };
+</script>
diff --git a/src/components/grid/index.js b/src/components/grid/index.js
new file mode 100644
index 0000000..51bd0db
--- /dev/null
+++ b/src/components/grid/index.js
@@ -0,0 +1,4 @@
+import Row from './row.vue';
+import Col from './col.vue';
+
+export { Row, Col };
\ No newline at end of file
diff --git a/src/components/grid/row.vue b/src/components/grid/row.vue
new file mode 100644
index 0000000..8554d7b
--- /dev/null
+++ b/src/components/grid/row.vue
@@ -0,0 +1,76 @@
+<template>
+    <div :class="classes" :style="styles">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-row';
+
+    export default {
+        props: {
+            type: {
+                validator (value) {
+                    return oneOf(value, ['flex']);
+                }
+            },
+            align: {
+                validator (value) {
+                    return oneOf(value, ['top', 'middle', 'bottom']);
+                }
+            },
+            justify: {
+                validator (value) {
+                    return oneOf(value, ['start', 'end', 'center', 'space-around', 'space-between']);
+                }
+            },
+            gutter: {
+                type: Number,
+                default: 0
+            },
+            className: String
+        },
+        computed: {
+            classes () {
+                return [
+                    {
+                        [`${prefixCls}`]: !this.type,
+                        [`${prefixCls}-${this.type}`]: !!this.type,
+                        [`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
+                        [`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,
+                        [`${this.className}`]: !!this.className
+                    }
+                ];
+            },
+            styles () {
+                let style = {};
+                if (this.gutter !== 0) {
+                    style = {
+                        marginLeft: this.gutter / -2 + 'px',
+                        marginRight: this.gutter / -2 + 'px'
+                    };
+                }
+
+                return style;
+            }
+        },
+        methods: {
+            updateGutter (val) {
+                this.$children.forEach((child) => {
+                    if (val !== 0) {
+                        child.gutter = val;
+                    }
+                });
+            }
+        },
+        watch: {
+            gutter (val) {
+                this.updateGutter(val);
+            }
+        },
+        mounted () {
+            this.updateGutter(this.gutter);
+        }
+    };
+</script>
diff --git a/src/components/layout/col.vue b/src/components/layout/col.vue
deleted file mode 100644
index 7e05b81..0000000
--- a/src/components/layout/col.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <div :class="classes" :style="styles">
-        <slot></slot>
-    </div>
-</template>
-<script>
-    const prefixCls = 'ivu-col';
-
-    export default {
-        props: {
-            span: [Number, String],
-            order: [Number, String],
-            offset: [Number, String],
-            push: [Number, String],
-            pull: [Number, String],
-            className: String,
-            xs: [Number, Object],
-            sm: [Number, Object],
-            md: [Number, Object],
-            lg: [Number, Object]
-        },
-        data () {
-            return {
-                gutter: 0
-            };
-        },
-        computed: {
-            classes () {
-                let classList = [
-                    `${prefixCls}`,
-                    {
-                        [`${prefixCls}-span-${this.span}`]: this.span,
-                        [`${prefixCls}-order-${this.order}`]: this.order,
-                        [`${prefixCls}-offset-${this.offset}`]: this.offset,
-                        [`${prefixCls}-push-${this.push}`]: this.push,
-                        [`${prefixCls}-pull-${this.pull}`]: this.pull,
-                        [`${this.className}`]: !!this.className
-                    }
-                ];
-
-                ['xs', 'sm', 'md', 'lg'].forEach(size => {
-                    if (typeof this[size] === 'number') {
-                        classList.push(`${prefixCls}-span-${size}-${this[size]}`);
-                    } else if (typeof this[size] === 'object') {
-                        let props = this[size];
-                        Object.keys(props).forEach(prop => {
-                            classList.push(
-                                prop !== 'span'
-                                    ? `${prefixCls}-${size}-${prop}-${props[prop]}`
-                                    : `${prefixCls}-span-${size}-${props[prop]}`
-                            );
-                        });
-                    }
-                });
-
-                return classList;
-            },
-            styles () {
-                let style = {};
-                if (this.gutter !== 0) {
-                    style = {
-                        paddingLeft: this.gutter / 2 + 'px',
-                        paddingRight: this.gutter / 2 + 'px'
-                    };
-                }
-
-                return style;
-            }
-        }
-    };
-</script>
diff --git a/src/components/layout/index.js b/src/components/layout/index.js
deleted file mode 100644
index 51bd0db..0000000
--- a/src/components/layout/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Row from './row.vue';
-import Col from './col.vue';
-
-export { Row, Col };
\ No newline at end of file
diff --git a/src/components/layout/row.vue b/src/components/layout/row.vue
deleted file mode 100644
index 7b076ef..0000000
--- a/src/components/layout/row.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <div :class="classes" :style="styles">
-        <slot></slot>
-    </div>
-</template>
-<script>
-    import { oneOf } from '../../utils/assist';
-
-    const prefixCls = 'ivu-row';
-
-    export default {
-        props: {
-            type: {
-                validator (value) {
-                    return oneOf(value, ['flex']);
-                }
-            },
-            align: {
-                validator (value) {
-                    return oneOf(value, ['top', 'middle', 'bottom']);
-                }
-            },
-            justify: {
-                validator (value) {
-                    return oneOf(value, ['start', 'end', 'center', 'space-around', 'space-between']);
-                }
-            },
-            gutter: {
-                type: Number,
-                default: 0
-            },
-            className: String
-        },
-        computed: {
-            classes () {
-                return [
-                    {
-                        [`${prefixCls}`]: !this.type,
-                        [`${prefixCls}-${this.type}`]: !!this.type,
-                        [`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
-                        [`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,
-                        [`${this.className}`]: !!this.className
-                    }
-                ];
-            },
-            styles () {
-                let style = {};
-                if (this.gutter !== 0) {
-                    style = {
-                        marginLeft: this.gutter / -2 + 'px',
-                        marginRight: this.gutter / -2 + 'px'
-                    };
-                }
-
-                return style;
-            }
-        },
-        methods: {
-            updateGutter (val) {
-                this.$children.forEach((child) => {
-                    if (val !== 0) {
-                        child.gutter = val;
-                    }
-                });
-            }
-        },
-        watch: {
-            gutter (val) {
-                this.updateGutter(val);
-            }
-        },
-        ready () {
-            this.updateGutter(this.gutter);
-        }
-    };
-</script>
diff --git a/src/index.js b/src/index.js
index d8cb4c4..77e8f7a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -42,7 +42,7 @@ import Affix from './components/affix';
 // import Transfer from './components/transfer';
 // import Tree from './components/tree';
 // import Upload from './components/upload';
-// import { Row, Col } from './components/layout';
+import { Row, Col } from './components/grid';
 // import { Select, Option, OptionGroup } from './components/select';
 import locale from './locale';
 
@@ -68,7 +68,7 @@ const iview = {
     // DropdownMenu: Dropdown.Menu,
     // iForm: Form,
     // FormItem: Form.Item,
-    // iCol: Col,
+    iCol: Col,
     // Collapse,
     // Icon,
     // iInput: Input,
@@ -90,7 +90,7 @@ const iview = {
     // Radio,
     // RadioGroup: Radio.Group,
     // Rate,
-    // Row,
+    Row,
     // iSelect: Select,
     // Slider,
     // Spin,
diff --git a/test/app.vue b/test/app.vue
index bad5332..c0a4ee6 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -24,34 +24,8 @@ li + li {
     <div>
         <nav>
             <ul>
-                <li><a v-link="'/button'">Button</a></li>
-                <li><a v-link="'/card'">Card</a></li>
-                <li><a v-link="'/message'">Message</a></li>
-                <li><a v-link="'/more'">More</a></li>
-                <li><a v-link="'/page'">Page</a></li>
-                <li><a v-link="'/poptip'">Poptip</a></li>
-                <li><a v-link="'/tooltip'">Tooltip</a></li>
-                <li><a v-link="'/radio'">Radio</a></li>
-                <li><a v-link="'/select'">Select</a></li>
-                <li><a v-link="'/slider'">Slider</a></li>
-                <li><a v-link="'/step'">Step</a></li>
-                <li><a v-link="'/switch'">Switch</a></li>
-                <li><a v-link="'/alert'">Alert</a></li>
-                <li><a v-link="'/tag'">Tag</a></li>
-                <li><a v-link="'/input'">Input</a></li>
-                <li><a v-link="'/cascader'">Cascader</a></li>
-                <li><a v-link="'/transfer'">Transfer</a></li>
-                <li><a v-link="'/table'">Table</a></li>
-                <li><a v-link="'/dropdown'">Dropdown</a></li>
-                <li><a v-link="'/tabs'">Tabs</a></li>
-                <li><a v-link="'/menu'">Menu</a></li>
-                <li><a v-link="'/date'">Date</a></li>
-                <li><a v-link="'/form'">Form</a></li>
-                <li><a v-link="'/carousel'">Carousel</a></li>
-                <li><a v-link="'/rate'">Rate</a></li>
-                <li><a v-link="'/upload'">Upload</a></li>
-                <li><a v-link="'/tree'">Tree</a></li>
-                <li><a v-link="'/notice'">Notice</a></li>
+                <li><router-link to="/affix">Affix</router-link></li>
+                <li><router-link to="/grid">Grid</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
@@ -64,7 +38,7 @@ li + li {
 
             }
         },
-        ready: function() {
+        mounted: function() {
 
         },
         beforeDestroy: function() {
diff --git a/test/main.js b/test/main.js
index c78429e..c1fbd33 100644
--- a/test/main.js
+++ b/test/main.js
@@ -20,6 +20,10 @@ const router = new VueRouter({
         {
             path: '/affix',
             component: require('./routers/affix.vue')
+        },
+        {
+            path: '/grid',
+            component: require('./routers/grid.vue')
         }
     ]
 });
diff --git a/test/routers/affix.vue b/test/routers/affix.vue
index 299f084..fe38a9c 100644
--- a/test/routers/affix.vue
+++ b/test/routers/affix.vue
@@ -1,3 +1,14 @@
+<style>
+    body{
+        /*height: 2000px;*/
+    }
+    .demo-affix{
+        width: 100px;
+        height: 30px;
+        background: #f60;
+        color: #fff
+    }
+</style>
 <template>
     <Affix>
         <span class="demo-affix">固定在最顶部</span>
diff --git a/test/routers/grid.vue b/test/routers/grid.vue
new file mode 100644
index 0000000..f8819b6
--- /dev/null
+++ b/test/routers/grid.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <Row>
+            <i-col span="12">col-12</i-col>
+            <i-col span="12">col-12</i-col>
+        </Row>
+        <br>
+        <Row>
+            <i-col span="8">col-8</i-col>
+            <i-col span="8">col-8</i-col>
+            <i-col span="8">col-8</i-col>
+        </Row>
+        <br>
+        <Row>
+            <i-col span="6">col-6</i-col>
+            <i-col span="6">col-6</i-col>
+            <i-col span="6">col-6</i-col>
+            <i-col span="6">col-6</i-col>
+        </Row>
+    </div>
+</template>
+<script>
+    export default {
+
+    }
+</script>
--
libgit2 0.21.4