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

docs/examples-dist/cell.vue

@@ -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>
 

docs/examples-dist/icon.vue

@@ -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>

docs/examples-docs/icon.md

@@ -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>
 ```
 :::
 

docs/src/components/page-header.vue

@@ -1,23 +1,25 @@
 <template>
   <div class="page-header">
-    <h1 class="page-header__logo">
+    <div class="page-header__top">
-      <a href="#"></a>
+      <h1 class="page-header__logo">
-    </h1>
+        <a href="#"></a>
-    <ul class="page-header__navs">
+      </h1>
-      <li class="page-header__item">
+      <ul class="page-header__navs">
-        <a href="/" class="page-header__link">首页</a>
+        <li class="page-header__item">
-      </li>
+          <a href="/" class="page-header__link">首页</a>
-      <li class="page-header__item">
+        </li>
-        <a href="http://react.fe.qima-inc.com/" class="page-header__link">PC端</a>
+        <li class="page-header__item">
-      </li>
+          <a href="http://react.fe.qima-inc.com/" class="page-header__link">PC端</a>
-      <li class="page-header__item">
+        </li>
-        <a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">移动端</a>
+        <li class="page-header__item">
-      </li>
+          <a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">移动端</a>
-      <li class="page-header__item">
+        </li>
-        <a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
+        <li class="page-header__item">
-      </li>
+          <a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
-    </ul>
+        </li>
-    <ul class="page-header__subnavs">
+      </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 {

package.json

@@ -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",

packages/zanui-css/package.json

@@ -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",

packages/zanui-css/scripts/fount-config.js

@@ -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'
     }
   ]
 };

packages/zanui-css/src/icon.css

@@ -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-8884a88b28.eot');
-  src: url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.eot?#iefix') format('embedded-opentype'),
+  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-55de83a2f0.woff2') format('woff2'),
+       url('https://b.yzcdn.cn/zanui/icon/zanui-icon-8884a88b28.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-8884a88b28.woff') format('woff'),
-       url('https://b.yzcdn.cn/zanui/icon/zanui-icon-55de83a2f0.ttf') format('truetype')
+       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'; } /* '' */

src/index.js

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

test/unit/specs/actionsheet.spec.js

@@ -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();
     });
   });

test/unit/specs/badge.spec.js

@@ -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(() => {

test/unit/specs/checkbox.spec.js

@@ -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();
+  //   });
+  // });
+});

test/unit/specs/field.spec.js

@@ -1,17 +1,80 @@
-import Field from 'packages/field';
+// import Vue from 'vue';
-import { mount } from 'avoriaz';
+// import Field from 'packages/field';
+// import { mount } from 'avoriaz';
 
-describe('Field', () => {
+// describe('Field', () => {
-  let wrapper;
+//   let wrapper;
-  afterEach(() => {
+//   afterEach(() => {
-    wrapper && wrapper.destroy();
+//     wrapper && wrapper.destroy();
-  });
+//   });
 
-  it('create', () => {
+//   it('create a text field', () => {
-    wrapper = mount(Field, {
+//     wrapper = mount(Field, {
-      propsData: {}
+//       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;
+//   });
+// });

test/unit/specs/popup.spec.js

@@ -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;
+  });
+});

test/unit/specs/quantity.spec.js

@@ -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;
+  });
+});

test/unit/specs/search.spec.js

@@ -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();
+    })
+  });
+});

test/unit/specs/toast.spec.js

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