From 0160ae2240a6e98e23abc5acc0042225e7a3a2ee Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 9 Mar 2018 16:21:47 +0800 Subject: [PATCH 01/48] [bugfix] Area: should reset index when area list changed (#678) --- packages/area/index.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/area/index.vue b/packages/area/index.vue index 1a0f8983b..4e95ce41c 100644 --- a/packages/area/index.vue +++ b/packages/area/index.vue @@ -82,6 +82,10 @@ export default create({ watch: { value() { this.setIndex(); + }, + + areaList() { + this.setIndex(); } }, From 6626fd91a2d6c8725457b494afa88a72a03fcf8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Fri, 9 Mar 2018 16:22:58 +0800 Subject: [PATCH 02/48] [build] 0.12.14 --- packages/index.js | 2 +- packages/vant-css/package-lock.json | 2 +- packages/vant-css/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/index.js b/packages/index.js index c2d4ae85d..f6be54972 100644 --- a/packages/index.js +++ b/packages/index.js @@ -63,7 +63,7 @@ import TreeSelect from './tree-select'; import Uploader from './uploader'; import Waterfall from './waterfall'; -const version = '0.12.13'; +const version = '0.12.14'; const components = [ Actionsheet, AddressEdit, diff --git a/packages/vant-css/package-lock.json b/packages/vant-css/package-lock.json index 4cc1940bf..867f3e214 100644 --- a/packages/vant-css/package-lock.json +++ b/packages/vant-css/package-lock.json @@ -1,6 +1,6 @@ { "name": "vant-css", - "version": "0.12.13", + "version": "0.12.14", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/vant-css/package.json b/packages/vant-css/package.json index 3244bd2b8..56a895d36 100644 --- a/packages/vant-css/package.json +++ b/packages/vant-css/package.json @@ -1,6 +1,6 @@ { "name": "vant-css", - "version": "0.12.13", + "version": "0.12.14", "description": "vant css.", "main": "lib/index.css", "style": "lib/index.css", From 2d441c5e86b8d4eb0c1489eee6425dd28e188e14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Fri, 9 Mar 2018 16:22:58 +0800 Subject: [PATCH 03/48] [release] 0.12.14 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a7c62b6ec..9d33e151e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vant", - "version": "0.12.13", + "version": "0.12.14", "description": "A Vue.js 2.0 Mobile UI at YouZan", "main": "lib/vant.js", "style": "lib/vant-css/index.css", From 0b7468f596bb3dfdfcfe81fca4343db00d55bb73 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 12 Mar 2018 17:19:24 +0800 Subject: [PATCH 04/48] [bugfix] AddressEdit: area code observer (#680) --- packages/address-edit/index.vue | 58 +++++++++++++++++++------- test/specs/address-edit.spec.js | 74 +++++++++++++++++++++++---------- 2 files changed, 96 insertions(+), 36 deletions(-) diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue index 56d9de8a2..7aabac8a0 100644 --- a/packages/address-edit/index.vue +++ b/packages/address-edit/index.vue @@ -17,7 +17,12 @@ :error="errorInfo.tel" @focus="onFocus('tel')" /> - + {{ currentInfo.province || $t('placeholder.province') }} {{ currentInfo.city || $t('placeholder.city') }} {{ currentInfo.county || $t('placeholder.county') }} @@ -63,6 +68,7 @@ /* eslint-disable camelcase */ -import { create } from '../utils'; +import { create, isObj } from '../utils'; import Field from '../field'; import Cell from '../cell'; import CellGroup from '../cell-group'; @@ -87,6 +93,18 @@ import AddressEditDetail from './Detail'; import SwitchCell from '../switch-cell'; import validateMobile from '../utils/validate/mobile'; +const defaultAddress = { + name: '', + tel: '', + province: '', + city: '', + county: '', + area_code: '', + postal_code: '', + address_detail: '', + is_default: false +}; + export default create({ name: 'van-address-edit', @@ -111,17 +129,7 @@ export default create({ addressText: String, addressInfo: { type: Object, - default: () => ({ - name: '', - tel: '', - province: '', - city: '', - county: '', - area_code: '', - postal_code: '', - address_detail: '', - is_default: false - }) + default: () => ({ ...defaultAddress }) }, searchResult: { type: Array, @@ -136,7 +144,10 @@ export default create({ data() { return { showAreaSelect: false, - currentInfo: this.addressInfo, + currentInfo: { + ...defaultAddress, + ...this.addressInfo + }, isEdit: !!this.addressInfo.id, detailFocused: false, errorInfo: { @@ -151,10 +162,23 @@ export default create({ watch: { addressInfo: { handler(val) { - this.currentInfo = val; + this.currentInfo = { + ...defaultAddress, + ...val + }; this.isEdit = !!val.id; + + if (val.area_code) { + this.setAreaCode(val.area_code); + } }, deep: true + }, + + areaList() { + if (this.currentInfo.area_code) { + this.setAreaCode(this.currentInfo.area_code); + } } }, @@ -166,6 +190,10 @@ export default create({ computedAddressText() { return this.addressText || this.$t('addressText'); + }, + + areaListLoaded() { + return isObj(this.areaList) && Object.keys(this.areaList).length; } }, diff --git a/test/specs/address-edit.spec.js b/test/specs/address-edit.spec.js index e65ecbb74..fff7fdd1f 100644 --- a/test/specs/address-edit.spec.js +++ b/test/specs/address-edit.spec.js @@ -99,42 +99,42 @@ describe('AddressEdit', () => { const saveButton = wrapper.find('.van-button')[0]; // name empty - wrapper.vm.addressInfo.name = ''; + wrapper.vm.currentInfo.name = ''; saveButton.trigger('click'); expect(wrapper.vm.errorInfo['name']).to.be.true; wrapper.find('.van-field__control')[0].trigger('focus'); expect(wrapper.vm.errorInfo['name']).to.be.false; // name too long - wrapper.vm.addressInfo.name = '111111111111111111111111111'; + wrapper.vm.currentInfo.name = '111111111111111111111111111'; saveButton.trigger('click'); expect(wrapper.vm.errorInfo['name']).to.be.true; wrapper.find('.van-field__control')[0].trigger('focus'); expect(wrapper.vm.errorInfo['name']).to.be.false; // tel empty - wrapper.vm.addressInfo.name = '123'; - wrapper.vm.addressInfo.tel = ''; + wrapper.vm.currentInfo.name = '123'; + wrapper.vm.currentInfo.tel = ''; saveButton.trigger('click'); expect(wrapper.vm.errorInfo['tel']).to.be.true; wrapper.find('.van-field__control')[1].trigger('focus'); expect(wrapper.vm.errorInfo['tel']).to.be.false; // area_code empty - wrapper.vm.addressInfo.tel = '13000000000'; - wrapper.vm.addressInfo.area_code = ''; + wrapper.vm.currentInfo.tel = '13000000000'; + wrapper.vm.currentInfo.area_code = ''; saveButton.trigger('click'); expect(wrapper.vm.errorInfo['area_code']).to.be.true; // area_code invalid - wrapper.vm.addressInfo.tel = '13000000000'; - wrapper.vm.addressInfo.area_code = '-1'; + wrapper.vm.currentInfo.tel = '13000000000'; + wrapper.vm.currentInfo.area_code = '-1'; saveButton.trigger('click'); expect(wrapper.vm.errorInfo['area_code']).to.be.true; // address_detail empty - wrapper.vm.addressInfo.area_code = '100000'; - wrapper.vm.addressInfo.address_detail = ''; + wrapper.vm.currentInfo.area_code = '100000'; + wrapper.vm.currentInfo.address_detail = ''; saveButton.trigger('click'); expect(wrapper.vm.errorInfo['address_detail']).to.be.true; wrapper.find('.van-field__control')[2].trigger('focus'); @@ -145,26 +145,26 @@ describe('AddressEdit', () => { for (let i = 0; i < 300; i++) { longAddress += '1'; } - wrapper.vm.addressInfo.address_detail = longAddress; + wrapper.vm.currentInfo.address_detail = longAddress; saveButton.trigger('click'); expect(wrapper.vm.errorInfo['address_detail']).to.be.true; wrapper.find('.van-field__control')[2].trigger('focus'); expect(wrapper.vm.errorInfo['address_detail']).to.be.false; // postal_code invalid - wrapper.vm.addressInfo.address_detail = '123'; - wrapper.vm.addressInfo.postal_code = '123'; + wrapper.vm.currentInfo.address_detail = '123'; + wrapper.vm.currentInfo.postal_code = '123'; saveButton.trigger('click'); expect(wrapper.vm.errorInfo['postal_code']).to.be.true; wrapper.find('.van-field__control')[3].trigger('focus'); expect(wrapper.vm.errorInfo['postal_code']).to.be.false; // valid result - wrapper.vm.addressInfo.postal_code = '123456'; + wrapper.vm.currentInfo.postal_code = '123456'; saveButton.trigger('click'); // not show postal_code - wrapper.vm.addressInfo.postal_code = '156'; + wrapper.vm.currentInfo.postal_code = '156'; wrapper.vm.showPostal = false; saveButton.trigger('click'); expect(wrapper.vm.errorInfo['postal_code']).to.be.false; @@ -235,17 +235,17 @@ describe('AddressEdit', () => { wrapper.vm.onAreaConfirm([{ code: -1 }]); wrapper.vm.onAreaConfirm([{ code: 1 }, { code: -1 }]); wrapper.vm.onAreaConfirm([{ code: 1 }, { code: 1 }, { code: -1 }]); - expect(wrapper.vm.addressInfo['area_code']).to.equal(undefined); + expect(wrapper.vm.currentInfo['area_code']).to.equal(''); wrapper.vm.onAreaConfirm([ { name: '浙江省' }, { name: '杭州市' }, { name: '西湖区', code: '123456' } ]); - expect(wrapper.vm.addressInfo['province']).to.equal('浙江省'); - expect(wrapper.vm.addressInfo['city']).to.equal('杭州市'); - expect(wrapper.vm.addressInfo['county']).to.equal('西湖区'); - expect(wrapper.vm.addressInfo['area_code']).to.equal('123456'); + expect(wrapper.vm.currentInfo['province']).to.equal('浙江省'); + expect(wrapper.vm.currentInfo['city']).to.equal('杭州市'); + expect(wrapper.vm.currentInfo['county']).to.equal('西湖区'); + expect(wrapper.vm.currentInfo['area_code']).to.equal('123456'); }); it('delete address', done => { @@ -308,7 +308,7 @@ describe('AddressEdit', () => { wrapper.vm.$nextTick(() => { wrapper.find('.van-field__icon')[0].trigger('touchstart'); wrapper.vm.$nextTick(() => { - expect(wrapper.vm.addressInfo.address_detail).to.equal(''); + expect(wrapper.vm.currentInfo.address_detail).to.equal(''); done(); }); }); @@ -388,4 +388,36 @@ describe('AddressEdit', () => { done(); }, 50); }); + + it('watch area code', done => { + wrapper = mount(AddressEdit, { + propsData: { + areaList: {}, + addressInfo: { + area_code: '330304' + } + } + }); + + expect(wrapper.vm.currentInfo.city).to.equal(''); + wrapper.vm.areaList = areaList; + + setTimeout(() => { + expect(wrapper.vm.currentInfo.city).to.equal('温州市'); + + wrapper.vm.addressInfo = { area_code: '' }; + wrapper.vm.areaList = {}; + + setTimeout(() => { + expect(wrapper.vm.currentInfo.city).to.equal(''); + wrapper.vm.areaList = areaList; + wrapper.vm.addressInfo = { area_code: '330304' }; + + setTimeout(() => { + expect(wrapper.vm.currentInfo.city).to.equal('温州市'); + done(); + }, 50); + }); + }, 50); + }); }); From 0768aab52c29e268d8dfa667dfef930b98dfd98c Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 12 Mar 2018 17:40:20 +0800 Subject: [PATCH 05/48] [new feature] add Collapse component (#674) --- docs/demos/index.js | 1 + docs/demos/views/collapse.vue | 83 ++++++++++++++++++++++ docs/markdown/en-US/collapse.md | 95 +++++++++++++++++++++++++ docs/markdown/index.js | 2 + docs/markdown/zh-CN/collapse.md | 108 +++++++++++++++++++++++++++++ docs/src/doc.config.js | 8 +++ packages/address-edit/Detail.vue | 8 +-- packages/collapse-item/index.vue | 75 ++++++++++++++++++++ packages/collapse/index.vue | 41 +++++++++++ packages/index.js | 6 ++ packages/vant-css/src/collapse.css | 31 +++++++++ packages/vant-css/src/index.css | 1 + test/components/collapse.vue | 21 ++++++ test/specs/collapse.spec.js | 47 +++++++++++++ 14 files changed, 523 insertions(+), 4 deletions(-) create mode 100644 docs/demos/views/collapse.vue create mode 100644 docs/markdown/en-US/collapse.md create mode 100644 docs/markdown/zh-CN/collapse.md create mode 100644 packages/collapse-item/index.vue create mode 100644 packages/collapse/index.vue create mode 100644 packages/vant-css/src/collapse.css create mode 100644 test/components/collapse.vue create mode 100644 test/specs/collapse.spec.js diff --git a/docs/demos/index.js b/docs/demos/index.js index 8e85dba4b..9976b69d0 100644 --- a/docs/demos/index.js +++ b/docs/demos/index.js @@ -33,6 +33,7 @@ export default { 'cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell'), 'cell')), 'cell')), 'checkbox': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/checkbox'), 'checkbox')), 'checkbox')), 'circle': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/circle'), 'circle')), 'circle')), + 'collapse': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/collapse'), 'collapse')), 'collapse')), 'contact': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/contact'), 'contact')), 'contact')), 'coupon': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/coupon'), 'coupon')), 'coupon')), 'datetime-picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/datetime-picker'), 'datetime-picker')), 'datetime-picker')), diff --git a/docs/demos/views/collapse.vue b/docs/demos/views/collapse.vue new file mode 100644 index 000000000..990a19393 --- /dev/null +++ b/docs/demos/views/collapse.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/docs/markdown/en-US/collapse.md b/docs/markdown/en-US/collapse.md new file mode 100644 index 000000000..05d241111 --- /dev/null +++ b/docs/markdown/en-US/collapse.md @@ -0,0 +1,95 @@ +## Collapse + +### Install +``` javascript +import { Collapse } from 'vant'; + +Vue.use(Collapse); +``` + +### Usage + +#### Basic Usage +Use `v-model` to control the name of active panels + +```html + + Content + Content + Content + +``` + +``` javascript +export default { + data() { + return { + activeNames: ['1'] + }; + } +}; +``` + +#### Accordion +In accordion mode, only one panel can be expanded at the same time. + +```html + + Content + Content + Content + +``` + +``` javascript +export default { + data() { + return { + activeName: '1' + }; + } +}; +``` + +#### Custom title + +```html + + +
Title1
+ Content +
+ + Content + +
+``` + + + +### Collapse API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| v-model | names of current active panels | `Array | String | Number` | - | - | +| accordion | Whether to be accordion mode | `Boolean` | `false` | - | + +### Collapse Event + +| Event | Description | Arguments | +|-----------|-----------|-----------| +| change | Triggered when switch panel | activeNames: `string | array` | + +### CollapseItem API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| name | Name | `String | Number` | `index` | - | +| title | Title | `String` | - | - | + +### CollapseItem Slot + +| name | Description | +|-----------|-----------| +| default | Content | +| title | Custom title | \ No newline at end of file diff --git a/docs/markdown/index.js b/docs/markdown/index.js index 16830af2c..17f923054 100644 --- a/docs/markdown/index.js +++ b/docs/markdown/index.js @@ -27,6 +27,7 @@ export default { 'zh-CN/changelog': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog.md')), 'zh-CN/changelog')), 'zh-CN/checkbox': wrapper(r => require.ensure([], () => r(require('./zh-CN/checkbox.md')), 'zh-CN/checkbox')), 'zh-CN/circle': wrapper(r => require.ensure([], () => r(require('./zh-CN/circle.md')), 'zh-CN/circle')), + 'zh-CN/collapse': wrapper(r => require.ensure([], () => r(require('./zh-CN/collapse.md')), 'zh-CN/collapse')), 'zh-CN/contact': wrapper(r => require.ensure([], () => r(require('./zh-CN/contact.md')), 'zh-CN/contact')), 'zh-CN/coupon': wrapper(r => require.ensure([], () => r(require('./zh-CN/coupon.md')), 'zh-CN/coupon')), 'zh-CN/datetime-picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/datetime-picker.md')), 'zh-CN/datetime-picker')), @@ -81,6 +82,7 @@ export default { 'en-US/changelog': wrapper(r => require.ensure([], () => r(require('./en-US/changelog.md')), 'en-US/changelog')), 'en-US/checkbox': wrapper(r => require.ensure([], () => r(require('./en-US/checkbox.md')), 'en-US/checkbox')), 'en-US/circle': wrapper(r => require.ensure([], () => r(require('./en-US/circle.md')), 'en-US/circle')), + 'en-US/collapse': wrapper(r => require.ensure([], () => r(require('./en-US/collapse.md')), 'en-US/collapse')), 'en-US/contact': wrapper(r => require.ensure([], () => r(require('./en-US/contact.md')), 'en-US/contact')), 'en-US/coupon': wrapper(r => require.ensure([], () => r(require('./en-US/coupon.md')), 'en-US/coupon')), 'en-US/datetime-picker': wrapper(r => require.ensure([], () => r(require('./en-US/datetime-picker.md')), 'en-US/datetime-picker')), diff --git a/docs/markdown/zh-CN/collapse.md b/docs/markdown/zh-CN/collapse.md new file mode 100644 index 000000000..539549d52 --- /dev/null +++ b/docs/markdown/zh-CN/collapse.md @@ -0,0 +1,108 @@ +## Collapse 折叠面板 + +### 使用指南 +``` javascript +import { Collapse } from 'vant'; + +Vue.use(Collapse); +``` + +### 代码演示 + +#### 基础用法 +通过`v-model`控制展开的面板列表,`activeNames`为数组格式 + +```html + + + 提供多样店铺模板,快速搭建网上商城 + + + 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失 + + + 线上拓客,随时预约,贴心顺手的开单收银 + + +``` + +``` javascript +export default { + data() { + return { + activeNames: ['1'] + }; + } +}; +``` + +#### 手风琴 +通过`accordion`可以设置为手风琴模式,最多展开一个面板,此时`activeName`为字符串格式 + +```html + + + 提供多样店铺模板,快速搭建网上商城 + + + 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失 + + + 线上拓客,随时预约,贴心顺手的开单收银 + + +``` + +``` javascript +export default { + data() { + return { + activeName: '1' + }; + } +}; +``` + +#### 自定义标题内容 + +```html + + +
有赞微商城
+ 提供多样店铺模板,快速搭建网上商城 +
+ + 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失 + +
+``` + + + +### Collapse API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 当前展开面板的 name | `Array | String | Number` | - | - | +| accordion | 是否开启手风琴模式 | `Boolean` | `false` | - | + +### Collapse Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| change | 切换面板时触发 | activeNames: `string | array` | + +### CollapseItem API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| name | 面板唯一标识符,默认为索引值 | `String | Number` | `index` | - | +| title | 标题 | `String` | - | - | + + +### CollapseItem Slot + +| 名称 | 说明 | +|-----------|-----------| +| default | 面板内容 | +| title | 自定义标题内容 | \ No newline at end of file diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 1cad7cce2..334e3d7f9 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -88,6 +88,10 @@ module.exports = { path: '/circle', title: 'Circle - 环形进度条' }, + { + path: '/collapse', + title: 'Collapse - 折叠面板' + }, { path: '/icon', title: 'Icon - 图标' @@ -374,6 +378,10 @@ module.exports = { path: '/circle', title: 'Circle' }, + { + path: '/collapse', + title: 'Collapse' + }, { path: '/icon', title: 'Icon' diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue index 891db7bf1..3b4dc0df8 100644 --- a/packages/address-edit/Detail.vue +++ b/packages/address-edit/Detail.vue @@ -11,8 +11,8 @@ :error="isError" :on-icon-click="onIconClick" @input="$emit('input', $event)" - @focus="handleFocus" - @blur="handleBlur" + @focus="onFocus" + @blur="onBlur" >
{{ $t('complete') }} @@ -79,13 +79,13 @@ export default create({ }, methods: { - handleFocus(e) { + onFocus(e) { this.isFocused = true; this.$emit('focus', e); this.$refs.root.scrollIntoView(); }, - handleBlur(e) { + onBlur(e) { // wait for click event finished setTimeout(() => { this.isFocused = false; diff --git a/packages/collapse-item/index.vue b/packages/collapse-item/index.vue new file mode 100644 index 000000000..50cc6cf61 --- /dev/null +++ b/packages/collapse-item/index.vue @@ -0,0 +1,75 @@ + + + diff --git a/packages/collapse/index.vue b/packages/collapse/index.vue new file mode 100644 index 000000000..7d526bbe4 --- /dev/null +++ b/packages/collapse/index.vue @@ -0,0 +1,41 @@ + + + diff --git a/packages/index.js b/packages/index.js index f6be54972..8930ee40d 100644 --- a/packages/index.js +++ b/packages/index.js @@ -14,6 +14,8 @@ import Checkbox from './checkbox'; import CheckboxGroup from './checkbox-group'; import Circle from './circle'; import Col from './col'; +import Collapse from './collapse'; +import CollapseItem from './collapse-item'; import ContactCard from './contact-card'; import ContactEdit from './contact-edit'; import ContactList from './contact-list'; @@ -80,6 +82,8 @@ const components = [ CheckboxGroup, Circle, Col, + Collapse, + CollapseItem, ContactCard, ContactEdit, ContactList, @@ -153,6 +157,8 @@ export { CheckboxGroup, Circle, Col, + Collapse, + CollapseItem, ContactCard, ContactEdit, ContactList, diff --git a/packages/vant-css/src/collapse.css b/packages/vant-css/src/collapse.css new file mode 100644 index 000000000..c796efa0c --- /dev/null +++ b/packages/vant-css/src/collapse.css @@ -0,0 +1,31 @@ +@import './common/var.css'; + +.van-collapse-item { + &__title { + .van-cell__right-icon::before { + transition: .3s; + transform: rotate(90deg); + } + + &::after { + visibility: hidden; + } + } + + &__content { + padding: 15px; + background-color: #fff; + } + + &--expanded { + .van-collapse-item__title { + .van-cell__right-icon::before { + transform: rotate(-90deg); + } + + &::after { + visibility: visible; + } + } + } +} diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css index e2f140575..e66642101 100644 --- a/packages/vant-css/src/index.css +++ b/packages/vant-css/src/index.css @@ -13,6 +13,7 @@ @import './button.css'; @import './cell.css'; @import './circle.css'; +@import './collapse.css'; @import './loading.css'; @import './nav-bar.css'; @import './notice-bar.css'; diff --git a/test/components/collapse.vue b/test/components/collapse.vue new file mode 100644 index 000000000..56e29f7ce --- /dev/null +++ b/test/components/collapse.vue @@ -0,0 +1,21 @@ + + + diff --git a/test/specs/collapse.spec.js b/test/specs/collapse.spec.js new file mode 100644 index 000000000..d1a702ad7 --- /dev/null +++ b/test/specs/collapse.spec.js @@ -0,0 +1,47 @@ +import { mount } from 'avoriaz'; +import Collapse from '../components/collapse'; + +describe('Circle', () => { + let wrapper; + afterEach(() => { + wrapper && wrapper.destroy(); + }); + + it('basic mode', () => { + wrapper = mount(Collapse); + + const firstTitle = wrapper.find('.van-collapse-item__title')[0]; + firstTitle.trigger('click'); + expect(wrapper.vm.active).to.eql(['first']); + + const secondTitle = wrapper.find('.van-collapse-item__title')[1]; + secondTitle.trigger('click'); + expect(wrapper.vm.active).to.eql(['first', 1]); + + firstTitle.trigger('click'); + expect(wrapper.vm.active).to.eql([1]); + }); + + it('accordion', () => { + wrapper = mount(Collapse, { + propsData: { + accordion: true + } + }); + + const firstTitle = wrapper.find('.van-collapse-item__title')[0]; + firstTitle.trigger('click'); + expect(wrapper.vm.active).to.eql('first'); + + const secondTitle = wrapper.find('.van-collapse-item__title')[1]; + secondTitle.trigger('click'); + expect(wrapper.vm.active).to.eql(1); + + firstTitle.trigger('click'); + expect(wrapper.vm.active).to.eql('first'); + + firstTitle.trigger('click'); + expect(wrapper.vm.active).to.eql(''); + }); +}); + From 1a2a64225bb14059287571169082d66d07375330 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Tue, 13 Mar 2018 12:13:57 +0800 Subject: [PATCH 06/48] [changelog] 0.12.14 --- docs/markdown/en-US/changelog.md | 19 ++++++++++++++++ docs/markdown/zh-CN/changelog-generated.md | 26 ++++++++++++++++++++++ docs/markdown/zh-CN/changelog.md | 19 ++++++++++++++++ 3 files changed, 64 insertions(+) diff --git a/docs/markdown/en-US/changelog.md b/docs/markdown/en-US/changelog.md index 840236a04..fb1889fa6 100644 --- a/docs/markdown/en-US/changelog.md +++ b/docs/markdown/en-US/changelog.md @@ -1,5 +1,24 @@ ## Changelog +### [0.12.14](https://github.com/youzan/vant/tree/v0.12.14) +`2018-03-09` + +**Bug Fixes** +* Area: should reset index when area list changed [\#678](https://github.com/youzan/vant/pull/678) [@chenjiahan](https://github.com/chenjiahan) + + +### [0.12.13](https://github.com/youzan/vant/tree/v0.12.13) +`2018-03-09` + +**Improvements** + +* AddressEdit: support custom tel validator [\#673](https://github.com/youzan/vant/pull/673) [@chenjiahan](https://github.com/chenjiahan) +* Sku: add close-on-click-overlay config for sku popup [\#676](https://github.com/youzan/vant/pull/676) [@w91](https://github.com/w91) + +**Bug Fixes** +* fix CouponList text max-width [\#675](https://github.com/youzan/vant/pull/675) [@chenjiahan](https://github.com/chenjiahan) + + ### [0.12.12](https://github.com/youzan/vant/tree/v0.12.12) `2018-03-06` diff --git a/docs/markdown/zh-CN/changelog-generated.md b/docs/markdown/zh-CN/changelog-generated.md index 5d1af228a..66c3f5d06 100644 --- a/docs/markdown/zh-CN/changelog-generated.md +++ b/docs/markdown/zh-CN/changelog-generated.md @@ -1,5 +1,31 @@ ## 更新日志 +## [v0.12.14](https://github.com/youzan/vant/tree/v0.12.14) (2018-03-09) +[Full Changelog](https://github.com/youzan/vant/compare/v0.12.13...v0.12.14) + +**Improvements** + +- \[bugfix\] Area: should reset index when area list changed [\#678](https://github.com/youzan/vant/pull/678) ([chenjiahan](https://github.com/chenjiahan)) + +## [v0.12.13](https://github.com/youzan/vant/tree/v0.12.13) (2018-03-09) +[Full Changelog](https://github.com/youzan/vant/compare/v0.12.12...v0.12.13) + +**Issue** + +- 请问什么时候可以想vue.ydui.org里面那样弄个rem 版的 [\#672](https://github.com/youzan/vant/issues/672) +- 使用babel-plugin-import 出错 [\#671](https://github.com/youzan/vant/issues/671) +- undefined is not an object \(evaluating 't.offsetWidth'\) [\#668](https://github.com/youzan/vant/issues/668) +- 关于输入框禁用样式 [\#667](https://github.com/youzan/vant/issues/667) +- Swipe - 'change event' - Documentation [\#664](https://github.com/youzan/vant/issues/664) +- Swipe - 'no-wrap' - Enhancement [\#663](https://github.com/youzan/vant/issues/663) +- Swipe 组件希望能增加禁止自动播放的功能 [\#656](https://github.com/youzan/vant/issues/656) + +**Improvements** + +- \[new feature\] add close-on-click-overlay config for sku popup [\#676](https://github.com/youzan/vant/pull/676) ([w91](https://github.com/w91)) +- \[bugfix\] CouponList text max-width [\#675](https://github.com/youzan/vant/pull/675) ([chenjiahan](https://github.com/chenjiahan)) +- \[new feature\] AddressEdit support custom tel validator [\#673](https://github.com/youzan/vant/pull/673) ([chenjiahan](https://github.com/chenjiahan)) + ## [v0.12.12](https://github.com/youzan/vant/tree/v0.12.12) (2018-03-06) [Full Changelog](https://github.com/youzan/vant/compare/v0.12.11...v0.12.12) diff --git a/docs/markdown/zh-CN/changelog.md b/docs/markdown/zh-CN/changelog.md index bbb808e03..a6e786968 100644 --- a/docs/markdown/zh-CN/changelog.md +++ b/docs/markdown/zh-CN/changelog.md @@ -1,5 +1,24 @@ ## 更新日志 +### [0.12.14](https://github.com/youzan/vant/tree/v0.12.14) +`2018-03-09` + +**Bug Fixes** +* Area: 修复 area-list 更新时未正确选中省市区的问题 [\#678](https://github.com/youzan/vant/pull/678) [@chenjiahan](https://github.com/chenjiahan) + + +### [0.12.13](https://github.com/youzan/vant/tree/v0.12.13) +`2018-03-09` + +**Improvements** + +* AddressEdit: 支持自定义手机号校验函数 [\#673](https://github.com/youzan/vant/pull/673) [@chenjiahan](https://github.com/chenjiahan) +* Sku: 新增 close-on-click-overlay 属性 [\#676](https://github.com/youzan/vant/pull/676) [@w91](https://github.com/w91) + +**Bug Fixes** +* 修复 CouponList 文字截断的问题 [\#675](https://github.com/youzan/vant/pull/675) [@chenjiahan](https://github.com/chenjiahan) + + ### [0.12.12](https://github.com/youzan/vant/tree/v0.12.12) `2018-03-06` From 5592db2cb2cce4eae21bdd4336c809999007d143 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 13 Mar 2018 16:01:50 +0800 Subject: [PATCH 07/48] [new feature] add List component (#682) --- docs/demos/index.js | 1 + docs/demos/views/list.vue | 79 +++++++++++++++++ docs/demos/views/waterfall.vue | 7 +- docs/markdown/en-US/list.md | 66 ++++++++++++++ docs/markdown/en-US/waterfall.md | 1 + docs/markdown/index.js | 2 + docs/markdown/zh-CN/list.md | 66 ++++++++++++++ docs/markdown/zh-CN/loading.md | 2 +- docs/markdown/zh-CN/waterfall.md | 2 +- docs/src/WapApp.vue | 4 +- docs/src/doc.config.js | 8 ++ package.json | 14 +-- packages/index.js | 3 + packages/list/index.vue | 118 +++++++++++++++++++++++++ packages/locale/lang/en-US.js | 4 +- packages/locale/lang/zh-CN.js | 4 +- packages/pull-refresh/index.vue | 2 +- packages/vant-css/src/index.css | 9 +- packages/vant-css/src/list.css | 25 ++++++ packages/vant-css/src/pull-refresh.css | 4 +- test/specs/list.spec.js | 68 ++++++++++++++ yarn.lock | 51 ++++++----- 22 files changed, 495 insertions(+), 45 deletions(-) create mode 100644 docs/demos/views/list.vue create mode 100644 docs/markdown/en-US/list.md create mode 100644 docs/markdown/zh-CN/list.md create mode 100644 packages/list/index.vue create mode 100644 packages/vant-css/src/list.css create mode 100644 test/specs/list.spec.js diff --git a/docs/demos/index.js b/docs/demos/index.js index 9976b69d0..2403dd8a1 100644 --- a/docs/demos/index.js +++ b/docs/demos/index.js @@ -44,6 +44,7 @@ export default { 'image-preview': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/image-preview'), 'image-preview')), 'image-preview')), 'layout': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/layout'), 'layout')), 'layout')), 'lazyload': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/lazyload'), 'lazyload')), 'lazyload')), + 'list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/list'), 'list')), 'list')), 'loading': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/loading'), 'loading')), 'loading')), 'nav-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/nav-bar'), 'nav-bar')), 'nav-bar')), 'notice-bar': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/notice-bar'), 'notice-bar')), 'notice-bar')), diff --git a/docs/demos/views/list.vue b/docs/demos/views/list.vue new file mode 100644 index 000000000..36f31ee20 --- /dev/null +++ b/docs/demos/views/list.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/docs/demos/views/waterfall.vue b/docs/demos/views/waterfall.vue index 3c63a8213..8e7972a25 100644 --- a/docs/demos/views/waterfall.vue +++ b/docs/demos/views/waterfall.vue @@ -1,5 +1,6 @@ diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 334e3d7f9..ab0d46bfb 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -104,6 +104,10 @@ module.exports = { path: '/lazyload', title: 'Lazyload - 图片懒加载' }, + { + path: '/list', + title: 'List - 列表' + }, { path: '/loading', title: 'Loading - 加载' @@ -394,6 +398,10 @@ module.exports = { path: '/lazyload', title: 'Lazyload' }, + { + path: '/list', + title: 'List' + }, { path: '/loading', title: 'Loading' diff --git a/package.json b/package.json index 9d33e151e..cd5b447e1 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "license": "MIT", "dependencies": { "babel-runtime": "6.x", - "vue-lazyload": "^1.2.1" + "vue-lazyload": "^1.2.2" }, "peerDependencies": { "vue": ">= 2.5.0" @@ -54,7 +54,7 @@ "avoriaz": "2.0.0", "babel-cli": "^6.26.0", "babel-core": "^6.26.0", - "babel-loader": "^7.1.3", + "babel-loader": "^7.1.4", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-runtime": "^6.15.0", "babel-polyfill": "^6.26.0", @@ -71,7 +71,7 @@ "fast-vue-md-loader": "^1.0.3", "friendly-errors-webpack-plugin": "^1.6.1", "gh-pages": "^1.0.0", - "html-webpack-plugin": "^3.0.4", + "html-webpack-plugin": "^3.0.6", "isparta-loader": "^2.0.0", "karma": "^1.7.1", "karma-chrome-launcher": "^2.2.0", @@ -92,16 +92,16 @@ "shelljs": "^0.8.1", "sinon": "^2.4.1", "sinon-chai": "^2.12.0", - "style-loader": "^0.20.2", + "style-loader": "^0.20.3", "uppercamelcase": "^3.0.0", "url-loader": "^1.0.1", "vant-doc": "1.0.4", - "vue": "^2.5.13", - "vue-loader": "^14.1.1", + "vue": "^2.5.15", + "vue-loader": "^14.2.1", "vue-router": "^3.0.1", "vue-sfc-compiler": "^0.0.8", "vue-style-loader": "^4.0.2", - "vue-template-compiler": "^2.5.13", + "vue-template-compiler": "^2.5.15", "vue-template-es2015-compiler": "^1.6.0", "webpack": "^3.11.0", "webpack-dev-server": "2.11.1", diff --git a/packages/index.js b/packages/index.js index 8930ee40d..1fc0b9a57 100644 --- a/packages/index.js +++ b/packages/index.js @@ -30,6 +30,7 @@ import GoodsActionMiniBtn from './goods-action-mini-btn'; import Icon from './icon'; import ImagePreview from './image-preview'; import Lazyload from './lazyload'; +import List from './list'; import Loading from './loading'; import Locale from './locale'; import NavBar from './nav-bar'; @@ -96,6 +97,7 @@ const components = [ GoodsActionBigBtn, GoodsActionMiniBtn, Icon, + List, Loading, NavBar, NoticeBar, @@ -173,6 +175,7 @@ export { Icon, ImagePreview, Lazyload, + List, Loading, Locale, NavBar, diff --git a/packages/list/index.vue b/packages/list/index.vue new file mode 100644 index 000000000..8b3d085b1 --- /dev/null +++ b/packages/list/index.vue @@ -0,0 +1,118 @@ + + + diff --git a/packages/locale/lang/en-US.js b/packages/locale/lang/en-US.js index d3fe13f4c..c99646601 100644 --- a/packages/locale/lang/en-US.js +++ b/packages/locale/lang/en-US.js @@ -3,6 +3,7 @@ export default { cancel: 'Cancel', save: 'Save', complete: 'Complete', + loadingTip: 'Loading...', vanContactCard: { name: 'Name', tel: 'Phone', @@ -31,8 +32,7 @@ export default { }, vanPullRefresh: { pullingText: 'Pull to refresh...', - loosingText: 'Loose to refresh...', - loadingText: 'Loading...' + loosingText: 'Loose to refresh...' }, vanSubmitBar: { label: 'Total:' diff --git a/packages/locale/lang/zh-CN.js b/packages/locale/lang/zh-CN.js index 582b3c79a..6fc73ab27 100644 --- a/packages/locale/lang/zh-CN.js +++ b/packages/locale/lang/zh-CN.js @@ -3,6 +3,7 @@ export default { cancel: '取消', save: '保存', complete: '完成', + loadingTip: '加载中...', vanContactCard: { name: '联系人', tel: '联系电话', @@ -34,8 +35,7 @@ export default { }, vanPullRefresh: { pullingText: '下拉即可刷新...', - loosingText: '释放即可刷新...', - loadingText: '加载中...' + loosingText: '释放即可刷新...' }, vanSubmitBar: { label: '合计:' diff --git a/packages/pull-refresh/index.vue b/packages/pull-refresh/index.vue index 72c1a00d1..c895dcd36 100644 --- a/packages/pull-refresh/index.vue +++ b/packages/pull-refresh/index.vue @@ -19,7 +19,7 @@
- {{ loadingText || $t('loadingText') }} + {{ loadingText || $t('loadingTip') }}
diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css index e66642101..6cd288e97 100644 --- a/packages/vant-css/src/index.css +++ b/packages/vant-css/src/index.css @@ -4,17 +4,18 @@ /* base */ @import './base.css'; +@import './icon.css'; +@import './loading.css'; +@import './button.css'; +@import './cell.css'; /* common components */ -@import './icon.css'; @import './col.css'; @import './row.css'; @import './badge.css'; -@import './button.css'; -@import './cell.css'; @import './circle.css'; @import './collapse.css'; -@import './loading.css'; +@import './list.css'; @import './nav-bar.css'; @import './notice-bar.css'; @import './popup.css'; diff --git a/packages/vant-css/src/list.css b/packages/vant-css/src/list.css new file mode 100644 index 000000000..81a15fd20 --- /dev/null +++ b/packages/vant-css/src/list.css @@ -0,0 +1,25 @@ +@import './common/var.css'; + +.van-list { + &__loading { + text-align: center; + + .van-loading, + &-text { + display: inline-block; + vertical-align: middle; + } + + .van-loading { + width: 16px; + height: 16px; + margin-right: 5px; + } + + &-text { + font-size: 13px; + color: $gray-dark; + line-height: 50px; + } + } +} diff --git a/packages/vant-css/src/pull-refresh.css b/packages/vant-css/src/pull-refresh.css index 4b8833e66..d903d42b4 100644 --- a/packages/vant-css/src/pull-refresh.css +++ b/packages/vant-css/src/pull-refresh.css @@ -25,13 +25,13 @@ .van-loading { width: 16px; height: 16px; - display: inline-block; - margin-right: 10px; + margin-right: 5px; } span, .van-loading { vertical-align: middle; + display: inline-block; } } diff --git a/test/specs/list.spec.js b/test/specs/list.spec.js new file mode 100644 index 000000000..548c96a9c --- /dev/null +++ b/test/specs/list.spec.js @@ -0,0 +1,68 @@ +import List from 'packages/list'; +import { mount } from 'avoriaz'; + +describe('List', () => { + let wrapper; + + afterEach(() => { + wrapper && wrapper.destroy(); + }); + + it('load event', done => { + wrapper = mount(List); + + const spy = sinon.spy(); + wrapper.vm.$on('load', spy); + wrapper.vm.$on('input', val => { + wrapper.vm.loading = val; + }); + + expect(spy.calledOnce).to.be.false; + wrapper.vm.$nextTick(() => { + expect(spy.calledOnce).to.be.true; + done(); + }); + }); + + it('finished', done => { + wrapper = mount(List, { + propsData: { + finished: true + } + }); + + const spy = sinon.spy(); + wrapper.vm.$on('load', spy); + + wrapper.vm.$nextTick(() => { + expect(spy.calledOnce).to.be.false; + + wrapper.vm.finished = false; + + setTimeout(() => { + expect(spy.calledOnce).to.be.true; + done(); + }, 50); + }); + }); + + it('immediate check false', done => { + wrapper = mount(List, { + propsData: { + immediateCheck: false + } + }); + + const spy = sinon.spy(); + wrapper.vm.$on('load', spy); + wrapper.vm.$on('input', val => { + wrapper.vm.loading = val; + }); + + expect(spy.calledOnce).to.be.false; + wrapper.vm.$nextTick(() => { + expect(spy.calledOnce).to.be.false; + done(); + }); + }); +}); diff --git a/yarn.lock b/yarn.lock index d7dd16644..f9747a923 100644 --- a/yarn.lock +++ b/yarn.lock @@ -507,9 +507,9 @@ babel-helpers@^6.24.1: babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-loader@^7.1.3: - version "7.1.3" - resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.3.tgz#ff5b440da716e9153abb946251a9ab7670037b16" +babel-loader@^7.1.4: + version "7.1.4" + resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.4.tgz#e3463938bd4e6d55d1c174c5485d406a188ed015" dependencies: find-cache-dir "^1.0.0" loader-utils "^1.0.2" @@ -3325,9 +3325,9 @@ html-minifier@^3.2.3: relateurl "0.2.x" uglify-js "3.3.x" -html-webpack-plugin@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.0.4.tgz#498c10f40f99a339fbf3d87c5a80acf8cbea8e9b" +html-webpack-plugin@^3.0.6: + version "3.0.6" + resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.0.6.tgz#d35b0452aae129a8a9f3fac44a169a625d8cf3fa" dependencies: html-minifier "^3.2.3" loader-utils "^0.2.16" @@ -6149,6 +6149,13 @@ schema-utils@^0.4.0, schema-utils@^0.4.2, schema-utils@^0.4.3: ajv "^5.0.0" ajv-keywords "^2.1.0" +schema-utils@^0.4.5: + version "0.4.5" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e" + dependencies: + ajv "^6.1.0" + ajv-keywords "^3.1.0" + select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" @@ -6641,12 +6648,12 @@ strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" -style-loader@^0.20.2: - version "0.20.2" - resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.20.2.tgz#851b373c187890331776e9cde359eea9c95ecd00" +style-loader@^0.20.3: + version "0.20.3" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.20.3.tgz#ebef06b89dec491bcb1fdb3452e913a6fd1c10c4" dependencies: loader-utils "^1.1.0" - schema-utils "^0.4.3" + schema-utils "^0.4.5" stylus-lookup@^1.0.1: version "1.0.2" @@ -7151,13 +7158,13 @@ vue-hot-reload-api@^2.2.0: version "2.2.4" resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz#683bd1d026c0d3b3c937d5875679e9a87ec6cd8f" -vue-lazyload@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.2.1.tgz#baa7356bdc1483777fd16007fbe2dddc16e98298" +vue-lazyload@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.2.2.tgz#73335ed32db25264f5957df1a21d277823423743" -vue-loader@^14.1.1: - version "14.1.1" - resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-14.1.1.tgz#331f197fcea790d6b8662c29b850806e7eb29342" +vue-loader@^14.2.1: + version "14.2.1" + resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-14.2.1.tgz#3ace19f98187b1fa9e0709defa963a0a2396b6b3" dependencies: consolidate "^0.14.0" hash-sum "^1.0.2" @@ -7197,9 +7204,9 @@ vue-style-loader@^4.0.2: hash-sum "^1.0.2" loader-utils "^1.0.2" -vue-template-compiler@^2.5.13: - version "2.5.13" - resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.13.tgz#12a2aa0ecd6158ac5e5f14d294b0993f399c3d38" +vue-template-compiler@^2.5.15: + version "2.5.15" + resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.15.tgz#cc004097e37167be8b85ea22ab2840d8e8cca1c0" dependencies: de-indent "^1.0.2" he "^1.1.0" @@ -7208,9 +7215,9 @@ vue-template-es2015-compiler@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18" -vue@^2.5.13: - version "2.5.13" - resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.13.tgz#95bd31e20efcf7a7f39239c9aa6787ce8cf578e1" +vue@^2.5.15: + version "2.5.15" + resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.15.tgz#fdb67861dde967cd8d1b53116380f2f269b45202" watchpack@^1.4.0: version "1.4.0" From c45cbb632fc2508a3d123569b00bf91ca4aaa7d0 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 13 Mar 2018 16:22:28 +0800 Subject: [PATCH 08/48] [Deprecate] add Waterfall deprecate tip (#683) --- packages/waterfall/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/waterfall/index.js b/packages/waterfall/index.js index 65761ea78..1ad8a0999 100644 --- a/packages/waterfall/index.js +++ b/packages/waterfall/index.js @@ -1,6 +1,9 @@ import Waterfall from './directive.js'; const install = function(Vue) { + if (process.env.NODE_ENV !== 'production') { + console.warn('[Vant warn] Waterfall is deprecated, please use List component instread.'); + } Vue.directive('WaterfallLower', Waterfall('lower')); Vue.directive('WaterfallUpper', Waterfall('upper')); }; From 4006a86cec5f2cc4ae7fd0a8a7be883eae75b559 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 13 Mar 2018 16:36:56 +0800 Subject: [PATCH 09/48] [Improvement] PullRefresh: support trigger loading animation (#684) --- docs/demos/views/pull-refresh.vue | 2 +- packages/pull-refresh/index.vue | 6 ++---- test/specs/sku.spec.js | 8 +++++++- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/demos/views/pull-refresh.vue b/docs/demos/views/pull-refresh.vue index f63c6c214..a8ed2990f 100644 --- a/docs/demos/views/pull-refresh.vue +++ b/docs/demos/views/pull-refresh.vue @@ -45,7 +45,7 @@ export default { .van-pull-refresh { &, &__track { - height: 100%; + height: calc(100vh - 50px); } } diff --git a/packages/pull-refresh/index.vue b/packages/pull-refresh/index.vue index c895dcd36..9646d81cd 100644 --- a/packages/pull-refresh/index.vue +++ b/packages/pull-refresh/index.vue @@ -76,10 +76,8 @@ export default create({ watch: { value(val) { - if (!val) { - this.duration = this.animationDuration; - this.getStatus(0); - } + this.duration = this.animationDuration; + this.getStatus(val ? this.headHeight : 0, val); } }, diff --git a/test/specs/sku.spec.js b/test/specs/sku.spec.js index f687a13cf..4fbf01613 100644 --- a/test/specs/sku.spec.js +++ b/test/specs/sku.spec.js @@ -4,7 +4,6 @@ import Toast from 'packages/toast'; import { mount } from 'avoriaz'; import { DOMChecker } from '../utils'; import skuMockData from '../../docs/demos/mock/sku'; -import repeat from 'lodash/repeat'; const data = skuMockData['zh-CN']; const { skuHelper } = Sku; @@ -13,6 +12,13 @@ const initialSku = { s1: '30349', s2: '1193' }; +const repeat = (str, count) => { + let result = ''; + for (let i = 0; i < count; i++) { + result += str; + } + return result; +}; const File = function() { this.name = 'test'; From d8d1aa6e829a89dd343a6e4fa526b01962927248 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 13 Mar 2018 19:41:31 +0800 Subject: [PATCH 10/48] [Improvement] CellSwipe: optimzie animation fluency (#685) --- docs/demos/views/cell-swipe.vue | 15 ++++------ packages/cell-swipe/index.vue | 27 +++++++++++------- packages/vant-css/src/cell-swipe.css | 6 ---- test/specs/cell-swipe.spec.js | 42 +++++++++++----------------- test/specs/datetime-picker.spec.js | 20 ++++++------- test/specs/picker.spec.js | 4 +-- test/utils.js | 12 ++++---- 7 files changed, 57 insertions(+), 69 deletions(-) diff --git a/docs/demos/views/cell-swipe.vue b/docs/demos/views/cell-swipe.vue index 992cffe1a..56fee5629 100644 --- a/docs/demos/views/cell-swipe.vue +++ b/docs/demos/views/cell-swipe.vue @@ -71,21 +71,18 @@ export default { .demo-cell-swipe { user-select: none; - .van-cell-swipe__left, - .van-cell-swipe__right { + .van-cell-swipe { + &__left, + &__right { color: #FFFFFF; - font-size: 16px; + font-size: 15px; width: 65px; height: 44px; display: inline-block; text-align: center; line-height: 44px; - } - .van-cell-swipe__left { - background-color: #FF4444; - } - .van-cell-swipe__right { - background-color: #84c483; + background-color: #F44; + } } } diff --git a/packages/cell-swipe/index.vue b/packages/cell-swipe/index.vue index ba80a2fac..bb9b23e8f 100644 --- a/packages/cell-swipe/index.vue +++ b/packages/cell-swipe/index.vue @@ -24,6 +24,8 @@ import { create } from '../utils'; import Clickoutside from '../utils/clickoutside'; +const THRESHOLD = 0.15; + export default create({ name: 'van-cell-swipe', @@ -45,14 +47,16 @@ export default create({ data() { return { - offset: 0 + offset: 0, + draging: false }; }, computed: { wrapperStyle() { return { - transform: `translate3d(${this.offset}px, 0, 0)` + transform: `translate3d(${this.offset}px, 0, 0)`, + transition: this.draging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)' }; } }, @@ -70,16 +74,19 @@ export default create({ swipeMove(offset = 0) { this.offset = offset; offset && (this.swiping = true); + !offset && (this.opened = false); }, swipeLeaveTransition(direction) { const { offset, leftWidth, rightWidth } = this; + const threshold = this.opened ? (1 - THRESHOLD) : THRESHOLD; + // right - if (direction > 0 && -offset > rightWidth * 0.4 && rightWidth > 0) { + if (direction > 0 && -offset > rightWidth * threshold && rightWidth > 0) { this.swipeMove(-rightWidth); this.resetSwipeStatus(); // left - } else if (direction < 0 && offset > leftWidth * 0.4 && leftWidth > 0) { + } else if (direction < 0 && offset > leftWidth * threshold && leftWidth > 0) { this.swipeMove(leftWidth); this.resetSwipeStatus(); } else { @@ -88,17 +95,16 @@ export default create({ }, startDrag(event) { + this.draging = true; this.startX = event.touches[0].pageX; this.startY = event.touches[0].pageY; + + if (this.opened) { + this.startX -= this.offset; + } }, onDrag(event) { - if (this.opened) { - !this.swiping && this.swipeMove(); - this.opened = false; - return; - } - const offsetTop = event.touches[0].pageY - this.startY; const offsetLeft = event.touches[0].pageX - this.startX; if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) || @@ -118,6 +124,7 @@ export default create({ }, endDrag() { + this.draging = false; if (this.swiping) { this.swipeLeaveTransition(this.offset > 0 ? -1 : 1); }; diff --git a/packages/vant-css/src/cell-swipe.css b/packages/vant-css/src/cell-swipe.css index 88d48cc74..50b250db3 100644 --- a/packages/vant-css/src/cell-swipe.css +++ b/packages/vant-css/src/cell-swipe.css @@ -4,12 +4,6 @@ overflow: hidden; position: relative; - &__wrapper, - &__left, - &__right { - transition: transform .15s ease-in-out; - } - &__left, &__right { top: 0; diff --git a/test/specs/cell-swipe.spec.js b/test/specs/cell-swipe.spec.js index 6821d7aac..d8dd20ab9 100644 --- a/test/specs/cell-swipe.spec.js +++ b/test/specs/cell-swipe.spec.js @@ -1,6 +1,6 @@ import CellSwipe from 'packages/cell-swipe'; import { mount } from 'avoriaz'; -import { triggerTouch } from '../utils'; +import { triggerTouch, dragHelper } from '../utils'; const defaultProps = { propsData: { @@ -60,48 +60,40 @@ describe('CellSwipe', () => { }); }); - it('drag and reset left part', () => { + it('drag and show left part', () => { wrapper = mount(CellSwipe, defaultProps); - - triggerTouch(wrapper, 'touchstart', 0, 0); - triggerTouch(wrapper, 'touchmove', 10, 0); - triggerTouch(wrapper, 'touchmove', 30, 0); - triggerTouch(wrapper, 'touchend', 30, 0); - expect(wrapper.vm.offset).to.equal(0); + dragHelper(wrapper, 50); + expect(wrapper.vm.offset).to.equal(100); }); - it('drag and reset right part', () => { + it('drag and show right part', () => { wrapper = mount(CellSwipe, defaultProps); - triggerTouch(wrapper, 'touchstart', 0, 0); - triggerTouch(wrapper, 'touchmove', -10, 0); - triggerTouch(wrapper, 'touchmove', -30, 0); - triggerTouch(wrapper, 'touchend', -30, 0); - expect(wrapper.vm.offset).to.equal(0); + dragHelper(wrapper, -50); + expect(wrapper.vm.offset).to.equal(-100); }); - it('drag distance out of ranges', () => { + it('drag distance out of ranges', done => { wrapper = mount(CellSwipe, defaultProps); triggerTouch(wrapper, 'touchstart', 0, 0); triggerTouch(wrapper, 'touchmove', 1000, 0); - expect(wrapper.vm.offset).to.equal(0); + + setTimeout(() => { + expect(wrapper.vm.offset).to.equal(0); + done(); + }); }); it('drag and hide left part', (done) => { wrapper = mount(CellSwipe, defaultProps); - triggerTouch(wrapper, 'touchstart', 0, 0); - triggerTouch(wrapper, 'touchmove', 20, 0); - triggerTouch(wrapper, 'touchmove', 50, 0); - triggerTouch(wrapper, 'touchend', 50, 0); + dragHelper(wrapper, 50); expect(wrapper.vm.offset).to.equal(100); wrapper.vm.$nextTick(() => { expect(wrapper.vm.opened).to.be.true; - triggerTouch(wrapper, 'touchstart', 0, 0); - triggerTouch(wrapper, 'touchmove', 1, 0); - + dragHelper(wrapper, -50); wrapper.vm.$nextTick(() => { expect(wrapper.vm.offset).to.equal(0); expect(wrapper.vm.opened).to.be.false; @@ -113,9 +105,7 @@ describe('CellSwipe', () => { it('drag vertical', () => { wrapper = mount(CellSwipe, defaultProps); - triggerTouch(wrapper, 'touchstart', 0, 0); - triggerTouch(wrapper, 'touchmove', 0, 100); - triggerTouch(wrapper, 'touchend', 0, 100); + dragHelper(wrapper, 0, 100); expect(wrapper.vm.offset).to.equal(0); }); diff --git a/test/specs/datetime-picker.spec.js b/test/specs/datetime-picker.spec.js index 4095e08fd..defb80093 100644 --- a/test/specs/datetime-picker.spec.js +++ b/test/specs/datetime-picker.spec.js @@ -56,8 +56,8 @@ describe('DatetimePicker', () => { }); const [hour, minute] = wrapper.find('.van-picker-column ul'); - dragHelper(hour, -50); - dragHelper(minute, -50); + dragHelper(hour, 0, -50); + dragHelper(minute, 0, -50); setTimeout(() => { expect(wrapper.vm.innerValue).to.equal('1:01'); @@ -78,9 +78,9 @@ describe('DatetimePicker', () => { setTimeout(() => { const [year, month, day] = wrapper.find('.van-picker-column ul'); - dragHelper(year, -50); - dragHelper(month, -50); - dragHelper(day, -50); + dragHelper(year, 0, -50); + dragHelper(month, 0, -50); + dragHelper(day, 0, -50); setTimeout(() => { const newYear = wrapper.vm.innerValue.getFullYear(); const newMonth = wrapper.vm.innerValue.getMonth() + 1; @@ -106,11 +106,11 @@ describe('DatetimePicker', () => { setTimeout(() => { const [year, month, day, hour, minute] = wrapper.find('.van-picker-column ul'); - dragHelper(year, -50); - dragHelper(month, -50); - dragHelper(day, -50); - dragHelper(hour, -50); - dragHelper(minute, -50); + dragHelper(year, 0, -50); + dragHelper(month, 0, -50); + dragHelper(day, 0, -50); + dragHelper(hour, 0, -50); + dragHelper(minute, 0, -50); setTimeout(() => { const newYear = wrapper.vm.innerValue.getFullYear(); const newMonth = wrapper.vm.innerValue.getMonth() + 1; diff --git a/test/specs/picker.spec.js b/test/specs/picker.spec.js index c2d6bb345..973f0dc4a 100644 --- a/test/specs/picker.spec.js +++ b/test/specs/picker.spec.js @@ -274,10 +274,10 @@ describe('PickerColumn', () => { expect(wrapper.vm.currentIndex).to.equal(0); const column = wrapper.find('.van-picker-column')[0]; - dragHelper(column, 0); + dragHelper(column, 0, 0); expect(wrapper.vm.currentIndex).to.equal(0); - dragHelper(column, -100); + dragHelper(column, 0, -100); expect(wrapper.vm.currentIndex).to.equal(2); }); }); diff --git a/test/utils.js b/test/utils.js index 86a162f6b..c4e85b7ed 100644 --- a/test/utils.js +++ b/test/utils.js @@ -74,11 +74,11 @@ export function triggerTouch(wrapper, eventName, x, y) { el.dispatchEvent(event); } -export function dragHelper(el, position) { +export function dragHelper(el, x = 0, y = 0) { triggerTouch(el, 'touchstart', 0, 0); - triggerTouch(el, 'touchmove', 0, position / 4); - triggerTouch(el, 'touchmove', 0, position / 3); - triggerTouch(el, 'touchmove', 0, position / 2); - triggerTouch(el, 'touchmove', 0, position); - triggerTouch(el, 'touchend', 0, position); + triggerTouch(el, 'touchmove', x / 4, y / 4); + triggerTouch(el, 'touchmove', x / 3, y / 3); + triggerTouch(el, 'touchmove', x / 2, y / 2); + triggerTouch(el, 'touchmove', x, y); + triggerTouch(el, 'touchend', x, y); } From 31be42bc8c16dc8c247cab7f555a271358fd5cbe Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 13 Mar 2018 22:45:20 +0800 Subject: [PATCH 11/48] [bugfix] Actionsheet: border display error (#686) --- docs/demos/views/actionsheet.vue | 8 +++++--- docs/markdown/en-US/actionsheet.md | 15 ++++++++++++--- docs/markdown/zh-CN/actionsheet.md | 3 ++- packages/actionsheet/index.vue | 2 +- packages/vant-css/src/actionsheet.css | 1 + 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/docs/demos/views/actionsheet.vue b/docs/demos/views/actionsheet.vue index 56fcd4124..120f103c3 100644 --- a/docs/demos/views/actionsheet.vue +++ b/docs/demos/views/actionsheet.vue @@ -27,14 +27,16 @@ export default { button2: '弹出带取消按钮的 Actionsheet', button3: '弹出带标题的 Actionsheet', title2: '带取消按钮的 Actionsheet', - title3: '带标题的 Actionsheet' + title3: '带标题的 Actionsheet', + description: '描述信息' }, 'en-US': { button1: 'Show Actionsheet', button2: 'Show Actionsheet with cancel button', button3: 'Show Actionsheet with title', title2: 'Actionsheet with cancel button', - title3: 'Actionsheet with title' + title3: 'Actionsheet with title', + description: 'Description' } }, @@ -50,7 +52,7 @@ export default { actions() { return [ { name: this.$t('option'), callback: this.onClick }, - { name: this.$t('option') }, + { name: this.$t('option'), subname: this.$t('description') }, { name: this.$t('option'), loading: true } ]; } diff --git a/docs/markdown/en-US/actionsheet.md b/docs/markdown/en-US/actionsheet.md index 6a58204ed..5760d01c6 100644 --- a/docs/markdown/en-US/actionsheet.md +++ b/docs/markdown/en-US/actionsheet.md @@ -22,9 +22,18 @@ export default { return { show: false, actions: [ - { name: 'Option1', callback: this.onClick }, - { name: 'Option2' }, - { name: 'Option3', loading: true } + { + name: 'Option', + callback: this.onClick + }, + { + name: 'Option', + description: 'Description' + }, + { + name: 'Option', + loading: true + } ] }; }, diff --git a/docs/markdown/zh-CN/actionsheet.md b/docs/markdown/zh-CN/actionsheet.md index a91d53b94..41e6c8f07 100644 --- a/docs/markdown/zh-CN/actionsheet.md +++ b/docs/markdown/zh-CN/actionsheet.md @@ -27,7 +27,8 @@ export default { callback: this.onClick }, { - name: '信用卡支付' + name: '选项', + subname: '描述信息' }, { name: '选项', diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue index f04920049..4c2b3ca8a 100644 --- a/packages/actionsheet/index.vue +++ b/packages/actionsheet/index.vue @@ -5,7 +5,7 @@
-
    +
    • Date: Wed, 14 Mar 2018 10:28:51 +0800 Subject: [PATCH 12/48] [bugfix] Badge info font weight (#687) --- docs/src/WapApp.vue | 5 +++++ packages/mixins/popup/index.js | 3 +-- packages/vant-css/src/badge.css | 3 ++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/docs/src/WapApp.vue b/docs/src/WapApp.vue index 321bb6170..fc2200ef5 100644 --- a/docs/src/WapApp.vue +++ b/docs/src/WapApp.vue @@ -45,4 +45,9 @@ body { text-transform: capitalize; } } + +.van-doc-demo-section { + margin-top: -46px; + padding-top: 46px; +} diff --git a/packages/mixins/popup/index.js b/packages/mixins/popup/index.js index 24d7f6ac0..e051ee633 100644 --- a/packages/mixins/popup/index.js +++ b/packages/mixins/popup/index.js @@ -105,8 +105,6 @@ export default { return; } - this.$emit('input', true); - // 如果属性中传入了`zIndex`,则覆盖`context`中对应的`zIndex` if (this.zIndex !== undefined) { context.zIndex = this.zIndex; @@ -127,6 +125,7 @@ export default { } this.$el.style.zIndex = context.plusKey('zIndex'); + this.$emit('input', true); this.opened = true; if (this.preventScroll) { diff --git a/packages/vant-css/src/badge.css b/packages/vant-css/src/badge.css index 141ec3391..a1126537e 100644 --- a/packages/vant-css/src/badge.css +++ b/packages/vant-css/src/badge.css @@ -44,8 +44,9 @@ position: absolute; top: 2px; right: 2px; + color: $white; font-size: 10px; - color: $white; + font-weight: normal; transform: scale(0.8); text-align: center; box-sizing: border-box; From d36dd61bc92ce163de9ee90c7c5cfb44b7277beb Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 14 Mar 2018 11:07:48 +0800 Subject: [PATCH 13/48] [breaking change] Popup: add lockScroll instead of lockOnScroll & preventScroll (#688) --- docs/demos/views/popup.vue | 35 +++++++++++++++------------------- docs/markdown/en-US/dialog.md | 4 ++-- docs/markdown/en-US/popup.md | 3 +-- docs/markdown/zh-CN/dialog.md | 4 ++-- docs/markdown/zh-CN/popup.md | 3 +-- packages/dialog/dialog.vue | 4 ---- packages/dialog/index.js | 2 +- packages/mixins/popup/index.js | 22 +++++++-------------- packages/popup/index.vue | 4 ---- packages/sku/Sku.vue | 2 -- test/specs/popup.spec.js | 9 +++------ types/dialog.d.ts | 2 +- 12 files changed, 33 insertions(+), 61 deletions(-) diff --git a/docs/demos/views/popup.vue b/docs/demos/views/popup.vue index 1f13aa9e0..146711989 100644 --- a/docs/demos/views/popup.vue +++ b/docs/demos/views/popup.vue @@ -2,21 +2,19 @@ {{ $t('button1') }} - {{ $t('content') }} + {{ $t('content') }} {{ $t('button2') }} - + - -
        -
      • {{ i }} item item item
      • -
      + + - -

      Lorem ipsum dolor sit amet, quis interdum et sollicitudin consectetuer scelerisque, gravida nulla consequatur dis mauris non morbi, dictum leo enim elementum ac wisi nullam, nam orci erat. Ultrices est. Nunc penatibus vel varius odio. Ullamcorper placerat amet amet sed, urna tempor, elit elit at. Eget congue. Sed proin metus sapien libero, pulvinar ut, ut aenean fermentum magna placerat dapibus voluptas, sed at lacinia pede fermentum rutrum et. Vitae nulla sapien vel in hac felis, montes in donec nulla eu volutpat augue.

      + + Lorem ipsum dolor sit amet, quis interdum et sollicitudin consectetuer scelerisque, gravida nulla consequatur dis mauris non morbi, dictum leo enim elementum ac wisi nullam, nam orci erat. Ultrices est. Nunc penatibus vel varius odio. Ullamcorper placerat amet amet sed, urna tempor, elit elit at. Eget congue. Sed proin metus sapien libero, pulvinar ut, ut aenean fermentum magna placerat dapibus voluptas, sed at lacinia pede fermentum rutrum et. Vitae nulla sapien vel in hac felis, montes in donec nulla eu volutpat augue.
      @@ -89,6 +87,8 @@ export default {