Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue

This commit is contained in:
tsxuehu 2017-04-13 16:59:46 +08:00
commit 527e20fc14
18 changed files with 343 additions and 89 deletions

View File

@ -1,6 +1,7 @@
<template><section class="demo-cell"><h1 class="demo-title">cell</h1><example-block title="基础用法">
<zan-cell-group>
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
<zan-cell title="单元格1" value="单元格1内容">
</zan-cell>
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
</zan-cell-group>

View File

@ -125,6 +125,16 @@
<span>contact</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="wechat"></zan-icon>
<span>wechat</span>
</zan-col>
<zan-col span="8">
<zan-icon name="alipay"></zan-icon>
<span>alipay</span>
</zan-col>
</zan-row>
</example-block></section></template>
<style>

View File

@ -180,6 +180,16 @@ export default {
<span>contact</span>
</zan-col>
</zan-row>
<zan-row>
<zan-col span="8">
<zan-icon name="wechat"></zan-icon>
<span>wechat</span>
</zan-col>
<zan-col span="8">
<zan-icon name="alipay"></zan-icon>
<span>alipay</span>
</zan-col>
</zan-row>
```
:::

View File

@ -1,23 +1,25 @@
<template>
<div class="page-header">
<h1 class="page-header__logo">
<a href="#"></a>
</h1>
<ul class="page-header__navs">
<li class="page-header__item">
<a href="/" class="page-header__link">首页</a>
</li>
<li class="page-header__item">
<a href="http://react.fe.qima-inc.com/" class="page-header__link">PC端</a>
</li>
<li class="page-header__item">
<a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">移动端</a>
</li>
<li class="page-header__item">
<a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
</li>
</ul>
<ul class="page-header__subnavs">
<div class="page-header__top">
<h1 class="page-header__logo">
<a href="#"></a>
</h1>
<ul class="page-header__navs">
<li class="page-header__item">
<a href="/" class="page-header__link">首页</a>
</li>
<li class="page-header__item">
<a href="http://react.fe.qima-inc.com/" class="page-header__link">PC端</a>
</li>
<li class="page-header__item">
<a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">移动端</a>
</li>
<li class="page-header__item">
<a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
</li>
</ul>
</div>
<ul class="page-header__subnavs" :class="{ 'page-header__subnavs--shadow': scrollTop > 0 }">
<li class="page-header__item">
<a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">基础组件</a>
</li>
@ -38,8 +40,21 @@
export default {
data() {
return {
version: window._global.version
version: window._global.version,
scrollTop: 0
};
},
mounted() {
const _this = this;
let timer;
window.addEventListener('scroll', () => {
clearTimeout(timer);
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
let timer = setTimeout(() => {
_this.scrollTop = scrollTop;
}, 500);
});
}
};
</script>
@ -51,8 +66,13 @@ export default {
top: 0;
z-index: 1;
width: 100%;
height: 60px;
background-color: #fbfbfb;
@e top {
overflow: hidden;
height: 60px;
background-color: #fbfbfb;
box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
@e logo {
float: left;
@ -78,13 +98,16 @@ export default {
}
@e subnavs {
position: absolute;
line-height: 50px;
top: 60px;
display: flex;
justify-content: center;
width: 100%;
background-color: #f2f2f2;
position: relative;
z-index: -1;
@m shadow {
box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
a,
span {

View File

@ -1,6 +1,6 @@
{
"name": "@youzan/zanui-vue",
"version": "0.1.0",
"version": "0.1.1",
"description": "有赞vue wap组件库",
"main": "lib/zanui.js",
"style": "lib/zanui-css/index.css",

View File

@ -1,6 +1,6 @@
{
"name": "@youzan/zanui-css",
"version": "0.1.0",
"version": "0.1.1",
"description": "zanui css.",
"main": "lib/index.css",
"style": "lib/index.css",

View File

@ -149,6 +149,16 @@ module.exports = {
src: '联系人.svg',
css: 'contact',
'correct_contour_direction': true
},
{
keywords: ['wechat'],
src: '微信支付.svg',
css: 'wechat'
},
{
keywords: ['alipay'],
src: '支付宝支付.svg',
css: 'alipay'
}
]
};

View File

@ -2,11 +2,11 @@
@font-face {
font-family: 'zan-icon';
src: url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.eot');
src: url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.eot?#iefix') format('embedded-opentype'),
url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.woff2') format('woff2'),
url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.woff') format('woff'),
url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.ttf') format('truetype')
src: url('https://b.yzcdn.cn/zanui/icon/zanui-icon-8884a88b28.eot');
src: url('https://b.yzcdn.cn/zanui/icon/zanui-icon-8884a88b28.eot?#iefix') format('embedded-opentype'),
url('https://b.yzcdn.cn/zanui/icon/zanui-icon-8884a88b28.woff2') format('woff2'),
url('https://b.yzcdn.cn/zanui/icon/zanui-icon-8884a88b28.woff') format('woff'),
url('https://b.yzcdn.cn/zanui/icon/zanui-icon-8884a88b28.ttf') format('truetype')
}
.zan-icon {
@ -73,4 +73,6 @@
.zan-icon-clear:before { content: '\e817'; } /* '' */
.zan-icon-success:before { content: '\e818'; } /* '' */
.zan-icon-fail:before { content: '\e819'; } /* '' */
.zan-icon-contact:before { content: '\e81a'; } /* '' */
.zan-icon-contact:before { content: '\e81a'; } /* '' */
.zan-icon-wechat:before { content: '\e81b'; } /* '' */
.zan-icon-alipay:before { content: '\e81c'; } /* '' */

View File

@ -80,7 +80,7 @@ if (typeof window !== 'undefined' && window.Vue) {
module.exports = {
install,
version: '0.1.0',
version: '0.1.1',
Button,
Switch,
Field,

View File

@ -1,4 +1,3 @@
import Vue from 'vue';
import ActionSheet from 'packages/actionsheet';
import { mount } from 'avoriaz';
@ -8,7 +7,7 @@ describe('ActionSheet', () => {
wrapper && wrapper.destroy();
});
it('create', () => {
it('create a actionsheet', () => {
wrapper = mount(ActionSheet, {
propsData: {}
});
@ -98,18 +97,21 @@ describe('ActionSheet', () => {
expect(cancelButton.text()).to.equal('cancel');
});
it('toggle actionsheet value', () => {
it('toggle actionsheet value from v-model', (done) => {
wrapper = mount(ActionSheet, {
propsData: {
value: false
}
});
const eventStub = sinon.stub(wrapper.vm, '$emit');
expect(wrapper.data().currentValue).to.be.false;
wrapper.vm.value = true;
wrapper.update();
Vue.nextTick(() => {
wrapper.vm.$nextTick(() => {
expect(wrapper.data().currentValue).to.be.true;
expect(eventStub.calledWith('input'));
done();
});
});

View File

@ -1,14 +1,7 @@
import Badge from 'packages/badge';
// import Badge from 'packages/badge';
import BadgeGroup from 'packages/badge-group';
import { mount } from 'avoriaz';
describe('Badge', () => {
let wrapper;
afterEach(() => {
wrapper && wrapper.destroy();
});
});
describe('BadgeGroup', () => {
let wrapper;
afterEach(() => {

View File

@ -1,4 +1,5 @@
import Checkbox from 'packages/checkbox';
import CheckboxGroup from 'packages/checkbox-group';
import { mount } from 'avoriaz';
describe('Checkbox', () => {
@ -7,7 +8,7 @@ describe('Checkbox', () => {
wrapper && wrapper.destroy();
});
it('create', () => {
it('create a checkbox', () => {
wrapper = mount(Checkbox, {
propsData: {}
});
@ -15,3 +16,36 @@ describe('Checkbox', () => {
expect(wrapper.hasClass('zan-checkbox')).to.be.true;
});
});
describe('CheckboxGroup', () => {
let wrapper;
afterEach(() => {
wrapper && wrapper.destroy();
});
it('create a checkbox-group', () => {
wrapper = mount(CheckboxGroup, {
propsData: {}
});
expect(wrapper.hasClass('zan-checkbox-group')).to.be.true;
});
// it('emit a change event', () => {
// wrapper = mount(CheckboxGroup, {
// propsData: {
// value: false
// }
// });
// const eventStub = sinon.stub(wrapper.vm, '$emit');
// wrapper.vm.value = true;
// wrapper.update();
// Vue.nextTick(() => {
// expect(eventStub.calledOnce).to.be.true;
// expect(eventStub.calledWith('change'));
// done();
// });
// });
});

View File

@ -1,17 +1,80 @@
import Field from 'packages/field';
import { mount } from 'avoriaz';
// import Vue from 'vue';
// import Field from 'packages/field';
// import { mount } from 'avoriaz';
describe('Field', () => {
let wrapper;
afterEach(() => {
wrapper && wrapper.destroy();
});
// describe('Field', () => {
// let wrapper;
// afterEach(() => {
// wrapper && wrapper.destroy();
// });
it('create', () => {
wrapper = mount(Field, {
propsData: {}
});
// it('create a text field', () => {
// wrapper = mount(Field, {
// propsData: {}
// });
expect(wrapper.hasClass('zan-field')).to.be.true;
});
});
// expect(wrapper.hasClass('zan-field')).to.be.true;
// });
// it('create a text field with initialize value', (done) => {
// wrapper = mount(Field, {
// propsData: {
// value: 'test'
// }
// });
// expect(wrapper.hasClass('zan-field')).to.be.true;
// expect(wrapper.data().currentValue).to.equal('test');
// const eventStub = sinon.stub(wrapper.vm, '$emit');
// wrapper.vm.value = 'test2';
// wrapper.update();
// Vue.nextTick(() => {
// expect(wrapper.data().currentValue).to.equal('test2');
// expect(eventStub.calledOnce).to.be.true;
// expect(eventStub.calledWith('input'));
// done();
// });
// });
// it('emit a focus event', () => {
// wrapper = mount(Field, {
// propsData: {}
// });
// const input = wrapper.find('.zan-field__control')[0];
// const eventStub = sinon.stub(wrapper.vm, '$emit');
// input.simulate('focus');
// expect(eventStub.calledOnce).to.be.true;
// expect(eventStub.calledWith('focus')).to.be.true;
// });
// it('input some value to filed', () => {
// // wrapper = mount(Field, {
// // propsData: {}
// // });
// // const input = wrapper.find('.zan-field__control')[0];
// // input.element.value = 'test';
// // wrapper.update();
// // Vue.nextTick(() => {
// // expect(wrapper.data().currentValue).to.equal('test');
// // done();
// // });
// });
// it('create a textarea field', () => {
// wrapper = mount(Field, {
// propsData: {
// type: 'textarea',
// autosize: false
// }
// });
// expect(wrapper.hasClass('zan-field--hastextarea')).to.be.true;
// });
// });

View File

@ -0,0 +1,49 @@
import Popup from 'packages/popup';
import { mount } from 'avoriaz';
describe('Popup', () => {
let wrapper;
afterEach(() => {
wrapper && wrapper.destroy();
});
it('create a popup', () => {
wrapper = mount(Popup, {
propsData: {
position: 'bottom'
}
});
expect(wrapper.hasClass('zan-popup')).to.be.true;
expect(wrapper.instance().currentTransition).to.equal('popup-slide-bottom');
});
it('create a show popup', (done) => {
wrapper = mount(Popup, {
propsData: {
value: false
}
});
const eventStub = sinon.stub(wrapper.vm, '$emit');
expect(wrapper.data().currentValue).to.be.false;
wrapper.vm.value = true;
wrapper.update();
wrapper.vm.$nextTick(() => {
expect(wrapper.data().currentValue).to.be.true;
expect(eventStub.calledWith('input'));
done();
});
});
it('toggle popup show', () => {
wrapper = mount(Popup, {
propsData: {
value: true
}
});
expect(wrapper.data().currentValue).to.be.true;
});
});

View File

@ -0,0 +1,16 @@
import Quantity from 'packages/quantity';
import { mount } from 'avoriaz';
describe('Quantity', () => {
let wrapper;
afterEach(() => {
wrapper && wrapper.destroy();
});
it('create a quantity', () => {
wrapper = mount(Quantity);
expect(wrapper.hasClass('zan-quantity')).to.be.true;
});
});

View File

@ -0,0 +1,41 @@
import Search from 'packages/search';
import { mount } from 'avoriaz';
describe('Search', () => {
let wrapper;
afterEach(() => {
wrapper && wrapper.destroy();
});
it('create a quantity', () => {
wrapper = mount(Search);
expect(wrapper.hasClass('zan-search')).to.be.true;
expect(wrapper.data().focusStatus).to.be.false;
expect(wrapper.data().isFocus).to.be.false;
});
it('focus on input', () => {
wrapper = mount(Search);
const input = wrapper.find('.zan-search__input')[0];
input.simulate('focus');
expect(wrapper.data().isFocus).to.be.true;
});
it('emit change event', (done) => {
wrapper = mount(Search);
const eventStub = sinon.stub(wrapper.vm, '$emit');
wrapper.setData({ value: 'test' });
wrapper.update();
wrapper.vm.$nextTick(() => {
expect(wrapper.data().value).to.be.equal('test');
expect(eventStub.calledOnce).to.be.true;
expect(eventStub.calledWith('change'));
done();
})
});
});

View File

@ -1,36 +1,36 @@
import Toast from 'packages/toast';
import { mount } from 'avoriaz';
// import Toast from 'packages/toast';
// import { mount } from 'avoriaz';
describe('Toast', () => {
// it('create simple toast', () => {
// Toast('a message');
// var toast = document.querySelector('.zan-toast');
// describe('Toast', () => {
// // it('create simple toast', () => {
// // Toast('a message');
// // var toast = document.querySelector('.zan-toast');
// expect(toast).not.to.be.underfined;
// // expect(toast).not.to.be.underfined;
// setTimeout(() => {
// expect(toast.hidden).to.be.true;
// }, 301);
// });
// // setTimeout(() => {
// // expect(toast.hidden).to.be.true;
// // }, 301);
// // });
// it('create loading toast', () => {
// Toast.loading('');
// var toast = document.querySelector('.zan-toast');
// // it('create loading toast', () => {
// // Toast.loading('');
// // var toast = document.querySelector('.zan-toast');
// expect(toast).not.to.be.underfined;
// // expect(toast).not.to.be.underfined;
// setTimeout(() => {
// expect(toast.hidden).to.be.true;
// }, 301);
// });
// it('create loading toast', () => {
// Toast.success('');
// var toast = document.querySelector('.zan-toast');
// // setTimeout(() => {
// // expect(toast.hidden).to.be.true;
// // }, 301);
// // });
// // it('create loading toast', () => {
// // Toast.success('');
// // var toast = document.querySelector('.zan-toast');
// expect(toast).not.to.be.underfined;
// // expect(toast).not.to.be.underfined;
// setTimeout(() => {
// expect(toast.hidden).to.be.true;
// }, 301);
// });
});
// // setTimeout(() => {
// // expect(toast.hidden).to.be.true;
// // }, 301);
// // });
// });