Merge branch 'master' of https://github.com/vueComponent/ant-design

components/checkbox/demo/layout.vue

@@ -1,12 +1,12 @@
 <template>
   <CheckboxGroup @change="onChange">
-    <Row>
+    <AntRow>
-      <Col :span="8"><Checkbox value="A">A</Checkbox></Col>
+      <AntCol :span="8"><Checkbox value="A">A</Checkbox></AntCol>
-      <Col :span="8"><Checkbox value="B">B</Checkbox></Col>
+      <AntCol :span="8"><Checkbox value="B">B</Checkbox></AntCol>
-      <Col :span="8"><Checkbox value="C">C</Checkbox></Col>
+      <AntCol :span="8"><Checkbox value="C">C</Checkbox></AntCol>
-      <Col :span="8"><Checkbox value="D">D</Checkbox></Col>
+      <AntCol :span="8"><Checkbox value="D">D</Checkbox></AntCol>
-      <Col :span="8"><Checkbox value="E">E</Checkbox></Col>
+      <AntCol :span="8"><Checkbox value="E">E</Checkbox></AntCol>
-    </Row>
+    </AntRow>
   </CheckboxGroup>
 </template>
 <script>
@@ -19,8 +19,8 @@ export default {
   },
   components: {
     Checkbox,
-    Row,
+    AntRow: Row,
-    Col,
+    AntCol: Col,
     CheckboxGroup: Checkbox.Group,
   },
 }

components/grid/Col.vue

@@ -10,7 +10,7 @@
   }
 
   export default {
-    name: 'Col',
+    name: 'Ant-Col',
     props: {
       prefixCls: {
         'default': 'ant-col',
@@ -27,6 +27,9 @@
       lg: [Number, Object],
       xl: [Number, Object],
     },
+    inject: {
+      parentRow: { 'default': undefined },
+    },
     computed: {
       classes () {
         const { prefixCls, span, order, offset, push, pull } = this
@@ -59,12 +62,8 @@
         }
       },
       gutter () {
-        let parent = this.$parent
+        const parent = this.parentRow
-        while (parent && parent.$options.name !== 'Row') {
+        return parent ? +parent.gutter : 0
-          console.info(parent.$options.name)
-          parent = parent.$parent
-        }
-        return parent ? parent.gutter : 0
       },
     },
     render (h) {
@@ -73,7 +72,6 @@
         style.paddingLeft = this.gutter / 2 + 'px'
         style.paddingRight = style.paddingLeft
       }
-      console.info(style)
       // why only unnamed slots
       return h('div', {
         'class': this.classes,

components/grid/Row.vue

@@ -5,7 +5,7 @@
 </template>
 <script>
   export default {
-    name: 'Row',
+    name: 'Ant-Row',
     props: {
       prefixCls: {
         'default': 'ant-row',
@@ -47,6 +47,11 @@
         },
       }
     },
+    provide() {
+      return {
+        parentRow: this,
+      }
+    },
     computed: {
       classes () {
         const { prefixCls, type, align, justify } = this

components/grid/demo/align.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="grid">
+    <ant-row type="flex" justify="center" align="top">
+      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
+    </ant-row>
+
+    <p>Align Center</p>
+    <ant-row type="flex" justify="space-around" align="middle">
+      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
+    </ant-row>
+
+    <p>Align Bottom</p>
+    <ant-row type="flex" justify="space-between" align="bottom">
+      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import Vue from 'vue'
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  const DemoBox = Vue.component('DemoBox', {
+    props: ['value'],
+    template: `<p :style="{height: value + 'px'}">{{value}}</p>`,
+  })
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col,
+      DemoBox,
+    },
+  }
+
+
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+  .height-100 {
+    height: 100px;
+  }
+</style>

components/grid/demo/basic.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="basic">
+    <ant-row>
+      <ant-col class="color1" :span="24" >100%</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="6" >25%</ant-col>
+      <ant-col class="color1" :span="6" :offset="6" >25%</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="8" >33.33%</ant-col>
+      <ant-col class="color1" :span="8" :offset="8" >33.33%</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="12" >50%</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="18" >66.66%</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less" scoped>
+  .basic {
+    background: linear-gradient(90deg,#f5f5f5 4.16666667%,transparent 0,transparent 8.33333333%,#f5f5f5 0,#f5f5f5 12.5%,transparent 0,transparent 16.66666667%,#f5f5f5 0,#f5f5f5 20.83333333%,transparent 0,transparent 25%,#f5f5f5 0,#f5f5f5 29.16666667%,transparent 0,transparent 33.33333333%,#f5f5f5 0,#f5f5f5 37.5%,transparent 0,transparent 41.66666667%,#f5f5f5 0,#f5f5f5 45.83333333%,transparent 0,transparent 50%,#f5f5f5 0,#f5f5f5 54.16666667%,transparent 0,transparent 58.33333333%,#f5f5f5 0,#f5f5f5 62.5%,transparent 0,transparent 66.66666667%,#f5f5f5 0,#f5f5f5 70.83333333%,transparent 0,transparent 75%,#f5f5f5 0,#f5f5f5 79.16666667%,transparent 0,transparent 83.33333333%,#f5f5f5 0,#f5f5f5 87.5%,transparent 0,transparent 91.66666667%,#f5f5f5 0,#f5f5f5 95.83333333%,transparent 0);
+  }
+  .basic div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .show-block {
+    margin: 20px 0;
+  }
+  .color1 {
+    background: rgba(0, 191, 255, 0.52);
+    color: white;
+  }
+</style>

components/grid/demo/complex.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="grid">
+    <ant-row>
+      <ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
+      <ant-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color2">Col</ant-col>
+      <ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>

components/grid/demo/flex-order.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="grid">
+    <ant-row type="flex">
+      <ant-col :span="6" :order="4" class="color1">1 col-order-4</ant-col>
+      <ant-col :span="6" :order="3" class="color2">2 col-order-3</ant-col>
+      <ant-col :span="6" :order="2" class="color1">3 col-order-2</ant-col>
+      <ant-col :span="6" :order="1" class="color2">4 col-order-1</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>

components/grid/demo/flex.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="grid">
+    <p>sub-element align left</p>
+    <ant-row type="flex" justify="start">
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+    </ant-row>
+
+    <p>sub-element align center</p>
+    <ant-row type="flex" justify="center">
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+    </ant-row>
+
+    <p>sub-element align right</p>
+    <ant-row type="flex" justify="end">
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+    </ant-row>
+
+    <p>sub-element monospaced arrangement</p>
+    <ant-row type="flex" justify="space-between">
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+    </ant-row>
+
+    <p>sub-element align full</p>
+    <ant-row type="flex" justify="space-around">
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>

components/grid/demo/flexible.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="grid">
+    <ant-row>
+      <ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
+      <ant-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4" class="color2">Col</ant-col>
+      <ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>

components/grid/demo/gutter.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="grid" style="overflow: hidden;">
+    <ant-row :gutter="24">
+      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
+      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
+      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
+      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>

components/grid/demo/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="topLevel">
+    <h1>基础布局</h1>
+    <basic/>
+    <h1>恩。基础</h1>
+    <layout/>
+    <h1>区块间隔</h1>
+    <gutter/>
+    <h1>偏移</h1>
+    <offset/>
+    <h1>栅格排序</h1>
+    <pull/>
+    <h1>FLEX</h1>
+    <flex/>
+    <h1>对齐</h1>
+    <align/>
+    <h1>Flex排序</h1>
+    <flex-order/>
+    <h1>响应式设计</h1>
+    <flexible/>
+    <h1>复杂一点</h1>
+    <complex/>
+  </div>
+</template>
+<script>
+import { Grid } from 'antd'
+const { Row, Col } = Grid
+import Basic from './basic.vue'
+import Layout from './layout.vue'
+import Gutter from './gutter.vue'
+import Offset from './offset.vue'
+import Pull from './pull.vue'
+import Flex from './flex.vue'
+import Align from './align.vue'
+import FlexOrder from './flex-order.vue'
+import Flexible from './flexible.vue'
+import Complex from './complex.vue'
+export default {
+  components: {
+    AntRow: Row,
+    AntCol: Col,
+    Basic,
+    Layout,
+    Gutter,
+    Offset,
+    Pull,
+    Flex,
+    Align,
+    FlexOrder,
+    Flexible,
+    Complex,
+  },
+}
+</script>
+<style lang="less">
+  .topLevel .ant-row{
+    margin: 10px 0;
+  }
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .show-block {
+    margin: 20px 0;
+  }
+  .color1 {
+    background: #00bfff;
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>

components/grid/demo/layout.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="grid">
+    <ant-row>
+      <ant-col class="color1" :span="12" >col-12</ant-col>
+      <ant-col class="color2" :span="12" >col-12</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="8" >col-8</ant-col>
+      <ant-col class="color2" :span="8" >col-8</ant-col>
+      <ant-col class="color1" :span="8" >col-8</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="6" >col-6</ant-col>
+      <ant-col class="color2" :span="6" >col-6</ant-col>
+      <ant-col class="color1" :span="6" >col-6</ant-col>
+      <ant-col class="color2" :span="6" >col-6</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>

components/grid/demo/offset.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="grid">
+    <ant-row>
+      <ant-col :span="8" class="color1">col-8</ant-col>
+      <ant-col :span="8" :offset="8" class="color2">col-8</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col :span="6" :offset="6" class="color1">col-6 col-offset-6</ant-col>
+      <ant-col :span="6" :offset="6" class="color2">col-6 col-offset-6</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col :span="12" :offset="6" class="color1">col-12 col-offset-6</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>

components/grid/demo/pull.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="grid">
+    <ant-row>
+      <ant-col :span="18" :push="6" class="color1">col-18 col-push-6</ant-col>
+      <ant-col :span="6" :pull="18" class="color2">col-6 col-pull-18</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>

components/grid/index.js

@@ -1,7 +1,6 @@
-import Row from './row.vue'
+import Row from './Row.vue'
-import Col from './col.vue'
+import Col from './Col.vue'
 
 export default {
   Col, Row,
 }
-

components/index.js

@@ -14,6 +14,6 @@ export { default as ToolTip } from './tooltip'
 
 export { default as Pagination } from './pagination'
 
-export { default as Row } from './grid/row'
+export { default as Row } from './grid/Row'
 
-export { default as Col } from './grid/col'
+export { default as Col } from './grid/Col'

components/pagination/demo/pagination.vue

@@ -8,7 +8,7 @@
       <vc-button @click="changeValue">改值</vc-button>
     </div>
     <div>
-      <pagination v-model="current" :total="total"></pagination>
+      <pagination v-model="current" :total="total" :showTotal="showTotal"></pagination>
       <vc-button @click="changeValue">改值</vc-button>
       <vc-button @click="getValue">当前值</vc-button>
     </div>
@@ -22,7 +22,7 @@ export default {
     return {
       simple: true,
       current: 1,
-      total: 500,
+      total: 483,
     }
   },
   methods: {
@@ -32,6 +32,9 @@ export default {
     getValue () {
       alert(this.current)
     },
+    showTotal (total) {
+      return `共 ${total} 条`
+    },
   },
   components: {
     Pagination,

components/pagination/pagination.vue

@@ -52,6 +52,7 @@ export default {
       type: Boolean,
       default: true,
     },
+    showTotal: Function,
   },
   model: {
     prop: 'current',

examples/grid.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="grid">
-    <div class="show-block">
-      <ant-row gutter="10">
-        <ant-col :style="style1" :span="6">
-          <div :style="style2">1</div>
-        </ant-col>
-        <ant-col :style="style1" :span="6">
-          <div :style="style2">2</div>
-        </ant-col>
-        <ant-col :style="style1" :span="6">
-          <div :style="style2">3</div>
-        </ant-col>
-        <ant-col :style="style1" :span="6">
-          <div :style="style2">4</div>
-        </ant-col>
-      </ant-row>
-    </div>
-    <div class="show-block">
-      <ant-row gutter="10">
-        <ant-col :style="style1" :span="6" :offset="2">
-          <div :style="style2">offset = 2</div>
-        </ant-col>
-        <ant-col :style="style1" :span="6" :offset="2">
-          <div :style="style2">offset = 2</div>
-        </ant-col>
-      </ant-row>
-    </div>
-    <div class="show-block">
-      <ant-row gutter="10" type="flex">
-        <ant-col class="height1 color1" :span="6">
-          <div class="">F</div>
-        </ant-col>
-        <ant-col class="height2 color2" :span="6">
-          <div class="">L</div>
-        </ant-col>
-        <ant-col class="height3 color1" :span="6">
-          <div class="">E</div>
-        </ant-col>
-        <ant-col class="height4 color2" :span="6">
-          <div class="">X</div>
-        </ant-col>
-      </ant-row>
-    </div>
-  </div>
-</template>
-<script>
-import { Grid } from '../components'
-const { Row, Col } = Grid
-export default {
-  data () {
-    return {
-      style1: { height: 40 + 'px' },
-      style2: { background: '#00bfff', height: 40 + 'px' }
-    }
-  },
-  methods: {
-    handleClick (event) {
-      console.log(event)
-      this.type = this.type === 'primary' ? 'danger' : 'primary'
-    },
-  },
-  components: {
-    AntRow: Row,
-    AntCol: Col
-  },
-}
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .show-block {
-    margin: 20px 0;
-  }
-  .height1 {
-    height: 60px;
-  }
-  .height2 {
-    height: 40px;
-  }
-  .height3 {
-    height: 80px;
-  }
-  .height4 {
-    height: 50px;
-  }
-  .color1 {
-    background: #00bfff;
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>