Merge branch 'test-build'

# Conflicts:
#	.babelrc
#	components/index.js
#	examples/index.js

.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["env"],
-  "plugins": ["transform-vue-jsx", "transform-object-rest-spread"]
+  "plugins": [
+    "transform-vue-jsx",
+    "transform-object-rest-spread"
+  ]
 }

.gitignore

@@ -56,4 +56,5 @@ typings/
 
 # dotenv environment variables file
 .env
-
+.idea
+.DS_Store

components/grid/col.vue

@@ -0,0 +1,85 @@
+<script>
+  //  Equal or Larger Than 0
+  function elt0 (value) {
+    return value >= 0
+  }
+  //  equal to 0(default) or more
+  const DEFAULT_0_OR_MORE = {
+    'default': 0,
+    validator: elt0,
+  }
+
+  export default {
+    name: 'Col',
+    props: {
+      prefixCls: {
+        'default': 'ant-col',
+        type: String,
+      },
+      span: Number,
+      order: DEFAULT_0_OR_MORE,
+      offset: DEFAULT_0_OR_MORE,
+      push: DEFAULT_0_OR_MORE,
+      pull: DEFAULT_0_OR_MORE,
+      xs: [Number, Object],
+      sm: [Number, Object],
+      md: [Number, Object],
+      lg: [Number, Object],
+      xl: [Number, Object],
+    },
+    computed: {
+      classes () {
+        const { prefixCls, span, order, offset, push, pull } = this
+        let sizeClassObj = {};
+        ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
+          let sizeProps = {}
+          if (typeof this[size] === 'number') {
+            sizeProps.span = this[size]
+          } else if (typeof this[size] === 'object') {
+            sizeProps = this[size] || {}
+          }
+
+          sizeClassObj = {
+            ...sizeClassObj,
+            [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+            [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
+            [`${prefixCls}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
+            [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
+            [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
+          }
+        })
+        return {
+          [`${prefixCls}`]: true,
+          [`${prefixCls}-${span}`]: span !== undefined,
+          [`${prefixCls}-order-${order}`]: order,
+          [`${prefixCls}-offset-${offset}`]: offset,
+          [`${prefixCls}-push-${push}`]: push,
+          [`${prefixCls}-pull-${pull}`]: pull,
+          ...sizeClassObj,
+        }
+      },
+      gutter () {
+        let parent = this.$parent
+        while (parent && parent.$options.name !== 'Row') {
+          console.info(parent.$options.name)
+          parent = parent.$parent
+        }
+        return parent ? parent.gutter : 0
+      },
+    },
+    render (h) {
+      const style = {}
+      if (this.gutter) {
+        style.paddingLeft = this.gutter / 2 + 'px'
+        style.paddingRight = style.paddingLeft
+      }
+      console.info(style)
+      // why only unnamed slots
+      return h('div', {
+        'class': this.classes,
+        style,
+      }, this.$slots['default'])
+    },
+  }
+</script>
+

components/grid/index.js

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

components/grid/row.vue

@@ -0,0 +1,79 @@
+<template>
+  <div :class="classes" :style="modifiedStyle">
+    <slot  />
+  </div>
+</template>
+<script>
+  export default {
+    name: 'Row',
+    props: {
+      prefixCls: {
+        'default': 'ant-row',
+        type: String,
+      },
+      type: {
+        validator (value) {
+          //  flex can't work before IE11
+          if (document.all && document.compatMode) {
+            console.error('you cannot use flex in the old browser')
+            return false
+          }
+          return ['flex', ''].includes(value)
+        },
+      },
+      gutter: {
+        'default': 0,
+        validator: k => k >= 0,
+      },
+      align: {
+        'default': 'top',
+        validator (value) {
+          return ['top', 'middle', 'bottom'].includes(value)
+        },
+      },
+      justify: {
+        'default': 'start',
+        validator (value) {
+          return ['start', 'end', 'center', 'space-around', 'space-between'].includes(value)
+        },
+      },
+    },
+    data () {
+      const half = this.gutter / 2
+      return {
+        modifiedStyle: {
+          'margin-left': -half + 'px',
+          'margin-right': -half + 'px',
+        },
+      }
+    },
+    computed: {
+      classes () {
+        const { prefixCls, type, align, justify } = this
+        return {
+          [`${prefixCls}`]: true,
+          [`${prefixCls}-${type}`]: type,
+          [`${prefixCls}-${type}-${justify}`]: type && justify,
+          [`${prefixCls}-${type}-${align}`]: type && align,
+        }
+      },
+    },
+    methods: {
+      handleClick (event) {
+        if (this.clicked) {
+          return
+        }
+        this.clicked = true
+        clearTimeout(this.timeout)
+        this.timeout = setTimeout(() => (this.clicked = false), 500)
+        this.$emit('click', event)
+      },
+    },
+    beforeDestroy () {
+      if (this.timeout) {
+        clearTimeout(this.timeout)
+      }
+    },
+  }
+</script>
+

components/grid/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'

components/grid/style/index.less

@@ -0,0 +1,107 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "./mixin";
+
+// Grid system
+.@{ant-prefix}-row {
+  .make-row();
+  display: block;
+}
+
+.@{ant-prefix}-row-flex {
+  display: flex;
+  flex-flow: row wrap;
+
+  &:before,
+  &:after {
+    display: flex;
+  }
+}
+
+// x轴原点
+.@{ant-prefix}-row-flex-start {
+  justify-content: flex-start;
+}
+
+// x轴居中
+.@{ant-prefix}-row-flex-center {
+  justify-content: center;
+}
+
+// x轴反方向
+.@{ant-prefix}-row-flex-end {
+  justify-content: flex-end;
+}
+
+// x轴平分
+.@{ant-prefix}-row-flex-space-between {
+  justify-content: space-between;
+}
+
+// x轴有间隔地平分
+.@{ant-prefix}-row-flex-space-around {
+  justify-content: space-around;
+}
+
+// 顶部对齐
+.@{ant-prefix}-row-flex-top {
+  align-items: flex-start;
+}
+
+// 居中对齐
+.@{ant-prefix}-row-flex-middle {
+  align-items: center;
+}
+
+// 底部对齐
+.@{ant-prefix}-row-flex-bottom {
+  align-items: flex-end;
+}
+
+.@{ant-prefix}-col {
+  position: relative;
+  display: block;
+}
+
+.make-grid-columns();
+.make-grid();
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(-xs);
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+  .make-grid(-sm);
+}
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+  .make-grid(-md);
+}
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+  .make-grid(-lg);
+}
+
+// Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: @screen-xl-min) {
+  .make-grid(-xl);
+}

components/grid/style/mixin.less

@@ -0,0 +1,100 @@
+@import "../../style/mixins/index";
+
+// mixins for grid system
+// ------------------------
+.make-row(@gutter: @grid-gutter-width) {
+  position: relative;
+  margin-left: (@gutter / -2);
+  margin-right: (@gutter / -2);
+  height: auto;
+  .clearfix;
+}
+
+.make-grid-columns() {
+  .col(@index) {
+    @item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) {
+    @item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) {
+    @{list} {
+      position: relative;
+      // Prevent columns from collapsing when empty
+      min-height: 1px;
+      padding-left: (@grid-gutter-width / 2);
+      padding-right: (@grid-gutter-width / 2);
+    }
+  }
+  .col(1);
+}
+
+.float-grid-columns(@class) {
+  .col(@index) { // initial
+    @item: ~".@{ant-prefix}-col@{class}-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) { // general
+    @item: ~".@{ant-prefix}-col@{class}-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) { // terminal
+    @{list} {
+      float: left;
+      flex: 0 0 auto;
+    }
+  }
+  .col(1); // kickstart it
+}
+
+// lesshint false
+.loop-grid-columns(@index, @class) when (@index > 0) {
+  .@{ant-prefix}-col@{class}-@{index} {
+    display: block;
+    width: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    left: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    right: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    margin-left: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-order-@{index} {
+    order: @index;
+  }
+  .loop-grid-columns((@index - 1), @class);
+}
+
+.loop-grid-columns(@index, @class) when (@index = 0) {
+  .@{ant-prefix}-col@{class}-@{index} {
+    display: none;
+  }
+  .@{ant-prefix}-col-push-@{index} {
+    left: auto;
+  }
+  .@{ant-prefix}-col-pull-@{index} {
+    right: auto;
+  }
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    left: auto;
+  }
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    right: auto;
+  }
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    margin-left: 0;
+  }
+  .@{ant-prefix}-col@{class}-order-@{index} {
+    order: 0;
+  }
+}
+
+.make-grid(@class: ~'') {
+  .float-grid-columns(@class);
+  .loop-grid-columns(@grid-columns, @class);
+}

components/index.js

@@ -2,6 +2,7 @@ import './button/style'
 import './checkbox/style'
 import './icon/style'
 import './radio/style'
+import './grid/style'
 
 export { default as Button } from './button'
 
@@ -10,3 +11,5 @@ export { default as Checkbox } from './checkbox'
 export { default as Icon } from './icon'
 
 export { default as Radio } from './radio'
+
+export { default as Grid } from './grid'

examples/grid.vue

@@ -0,0 +1,98 @@
+<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>

examples/index.js

@@ -2,21 +2,24 @@ import Vue from 'vue'
 import Checkbox from './checkbox.vue'
 import Button from './button.vue'
 import Radio from './radio.vue'
+import Grid from './grid.vue'
 // import Dialog from './dialog.vue'
 import './index.less'
 new Vue({
   el: '#app',
   template: `
     <div>
-        <Radio />
-        <Checkbox />
-        <AntButton />
+      <Grid />
+      <Checkbox />
+      <AntButton />
+      <Radio />
     </div>
     `,
   components: {
     AntButton: Button,
     // AntDialog: Dialog,
     Checkbox,
+    Grid,
     Radio,
   },
 })

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "NODE_ENV=development webpack-dev-server --open --hot",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "karma start test/karma.conf.js --single-run",
     "lint": "eslint -c ./.eslintrc --fix --ext .js ./src/",
     "lint:style": "stylelint \"./src/**/*.less\" --syntax less"
   },
@@ -30,18 +30,37 @@
     "babel-cli": "^6.26.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.2",
     "babel-loader": "^7.1.2",
+    "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.0",
+    "chai": "^4.1.2",
     "css-loader": "^0.28.7",
     "eslint": "^4.7.2",
     "eslint-plugin-html": "^3.2.2",
     "eslint-plugin-vue-libs": "^1.2.1",
     "html-webpack-plugin": "^2.30.1",
+    "istanbul-instrumenter-loader": "^3.0.0",
+    "karma": "^1.4.1",
+    "karma-coverage": "^1.1.1",
+    "karma-coverage-istanbul-reporter": "^1.3.0",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-phantomjs-shim": "^1.4.0",
+    "karma-sinon-chai": "^1.3.1",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.31",
+    "karma-webpack": "^2.0.2",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
+    "mocha": "^3.2.0",
     "pre-commit": "^1.2.2",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "sinon": "^4.0.2",
+    "sinon-chai": "^2.8.0",
     "style-loader": "^0.18.2",
     "stylelint": "^8.1.1",
     "stylelint-config-standard": "^17.0.0",

test/.eslintrc

@@ -0,0 +1,12 @@
+{
+  "extends": ["plugin:vue-libs/recommended"], // ,"plugin:vue-libs/recommended"
+  "rules": {
+    "comma-dangle": [2, "always-multiline"],
+    "no-var": "error"
+  },
+  "globals": {
+    "it": true,
+    "describe": true,
+    "expect": true
+  }
+}

test/index.js

@@ -0,0 +1,14 @@
+import 'babel-polyfill'
+import Vue from 'vue'
+
+Vue.config.productionTip = false
+
+// require all test files (files that ends with .spec.js)
+const testsContext = require.context('./specs', true, /\.spec$/)
+testsContext.keys().forEach(testsContext)
+
+// require all src files except main.js for coverage.
+// you can also change this to match only the subset of files that
+// you want coverage for.
+const srcContext = require.context('../components', true, /^\.(\.js|\.vue)?$/)
+srcContext.keys().forEach(srcContext)

test/karma.conf.js

@@ -0,0 +1,74 @@
+// This is a karma config file. For more details see
+//   http://karma-runner.github.io/0.13/config/configuration-file.html
+// we are also using it with karma-webpack
+//   https://github.com/webpack/karma-webpack
+
+const webpack = require('webpack')
+const webpackConfig = require('../webpack.config')
+
+module.exports = function (config) {
+  config.set({
+    // to run in additional browsers:
+    // 1. install corresponding karma launcher
+    //    http://karma-runner.github.io/0.13/config/browsers.html
+    // 2. add it to the `browsers` array below.
+    browsers: ['PhantomJS'],
+    frameworks: ['mocha', 'sinon-chai'],
+    reporters: ['spec', 'coverage-istanbul'],
+    files: ['./index.js'],
+    preprocessors: {
+      './index.js': ['webpack', 'sourcemap', 'coverage'],
+    },
+    webpack: {
+      module: {
+        rules: [
+          {
+            test: /\.vue$/,
+            loader: 'vue-loader',
+            options: {
+              loaders: {
+                js: 'babel-loader',
+              },
+              postLoaders: {
+                js: 'istanbul-instrumenter-loader?esModules=true',
+              },
+            },
+          },
+          {
+            test: /\.js$/,
+            loader: 'babel-loader', exclude: /node_modules/,
+          },
+          {
+            test: /\.(png|jpg|gif|svg)$/,
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]?[hash]',
+            },
+          },
+          {
+            test: /\.less$/,
+            use: [
+              { loader: 'style-loader' },
+              {
+                loader: 'css-loader',
+                options: { sourceMap: true },
+              },
+              { loader: 'less-loader',
+                options: { sourceMap: true },
+              },
+            ],
+          },
+        ],
+      },
+    },
+    webpackMiddleware: {
+      noInfo: true,
+    },
+    coverageReporter: {
+      dir: './coverage',
+      reporters: [
+        { type: 'text-summary' },
+      ],
+    },
+  })
+}

test/specs/Button.spec.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import Button from '../../components/button'
+
+describe('Button.vue', () => {
+  it('should render correct contents', () => {
+    const Constructor = Vue.extend(Button)
+    const ele = document.createElement('div')
+    document.body.appendChild(ele)
+    const vm = new Constructor({ propsData: { type: 'primary' }})
+    vm.$mount(ele)
+    expect(vm.$el.classList.contains('ant-btn-primary'))
+      .to.equal(true)
+  })
+})