Merge branch 'test-build'
# Conflicts: # .babelrc # components/index.js # examples/index.jspull/9/head
wanlei
commit
f4fb4fedbb
5
.babelrc
5
.babelrc
|
|
@ -1,4 +1,7 @@
|
||||||
{
|
{
|
||||||
"presets": ["env"],
|
"presets": ["env"],
|
||||||
"plugins": ["transform-vue-jsx", "transform-object-rest-spread"]
|
"plugins": [
|
||||||
|
"transform-vue-jsx",
|
||||||
|
"transform-object-rest-spread"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -56,4 +56,5 @@ typings/
|
||||||
|
|
||||||
# dotenv environment variables file
|
# dotenv environment variables file
|
||||||
.env
|
.env
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import Row from './row.vue'
|
||||||
|
import Col from './col.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
Col, Row,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import '../../style/index.less'
|
||||||
|
import './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);
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
@ -2,6 +2,7 @@ import './button/style'
|
||||||
import './checkbox/style'
|
import './checkbox/style'
|
||||||
import './icon/style'
|
import './icon/style'
|
||||||
import './radio/style'
|
import './radio/style'
|
||||||
|
import './grid/style'
|
||||||
|
|
||||||
export { default as Button } from './button'
|
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 Icon } from './icon'
|
||||||
|
|
||||||
export { default as Radio } from './radio'
|
export { default as Radio } from './radio'
|
||||||
|
|
||||||
|
export { default as Grid } from './grid'
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -2,21 +2,24 @@ import Vue from 'vue'
|
||||||
import Checkbox from './checkbox.vue'
|
import Checkbox from './checkbox.vue'
|
||||||
import Button from './button.vue'
|
import Button from './button.vue'
|
||||||
import Radio from './radio.vue'
|
import Radio from './radio.vue'
|
||||||
|
import Grid from './grid.vue'
|
||||||
// import Dialog from './dialog.vue'
|
// import Dialog from './dialog.vue'
|
||||||
import './index.less'
|
import './index.less'
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
template: `
|
template: `
|
||||||
<div>
|
<div>
|
||||||
<Radio />
|
<Grid />
|
||||||
<Checkbox />
|
<Checkbox />
|
||||||
<AntButton />
|
<AntButton />
|
||||||
|
<Radio />
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
components: {
|
components: {
|
||||||
AntButton: Button,
|
AntButton: Button,
|
||||||
// AntDialog: Dialog,
|
// AntDialog: Dialog,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
|
Grid,
|
||||||
Radio,
|
Radio,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
||||||
21
package.json
21
package.json
|
|
@ -5,7 +5,7 @@
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "NODE_ENV=development webpack-dev-server --open --hot",
|
"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": "eslint -c ./.eslintrc --fix --ext .js ./src/",
|
||||||
"lint:style": "stylelint \"./src/**/*.less\" --syntax less"
|
"lint:style": "stylelint \"./src/**/*.less\" --syntax less"
|
||||||
},
|
},
|
||||||
|
|
@ -30,18 +30,37 @@
|
||||||
"babel-cli": "^6.26.0",
|
"babel-cli": "^6.26.0",
|
||||||
"babel-helper-vue-jsx-merge-props": "^2.0.2",
|
"babel-helper-vue-jsx-merge-props": "^2.0.2",
|
||||||
"babel-loader": "^7.1.2",
|
"babel-loader": "^7.1.2",
|
||||||
|
"babel-plugin-istanbul": "^4.1.1",
|
||||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||||
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
||||||
|
"babel-polyfill": "^6.26.0",
|
||||||
"babel-preset-env": "^1.6.0",
|
"babel-preset-env": "^1.6.0",
|
||||||
|
"chai": "^4.1.2",
|
||||||
"css-loader": "^0.28.7",
|
"css-loader": "^0.28.7",
|
||||||
"eslint": "^4.7.2",
|
"eslint": "^4.7.2",
|
||||||
"eslint-plugin-html": "^3.2.2",
|
"eslint-plugin-html": "^3.2.2",
|
||||||
"eslint-plugin-vue-libs": "^1.2.1",
|
"eslint-plugin-vue-libs": "^1.2.1",
|
||||||
"html-webpack-plugin": "^2.30.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": "^2.7.2",
|
||||||
"less-loader": "^4.0.5",
|
"less-loader": "^4.0.5",
|
||||||
|
"mocha": "^3.2.0",
|
||||||
"pre-commit": "^1.2.2",
|
"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",
|
"style-loader": "^0.18.2",
|
||||||
"stylelint": "^8.1.1",
|
"stylelint": "^8.1.1",
|
||||||
"stylelint-config-standard": "^17.0.0",
|
"stylelint-config-standard": "^17.0.0",
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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)
|
||||||
|
|
@ -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' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -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)
|
||||||
|
})
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue