From 66c3b2c6eb8b2a43ee15c54d36fdf96805112d4c Mon Sep 17 00:00:00 2001 From: Raistlin916 Date: Mon, 7 Aug 2017 20:07:33 +0800 Subject: [PATCH 01/48] fix: one page swiper broken --- packages/swipe/src/swipe.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/swipe/src/swipe.vue b/packages/swipe/src/swipe.vue index f1b9862be..5063cf8e2 100644 --- a/packages/swipe/src/swipe.vue +++ b/packages/swipe/src/swipe.vue @@ -36,6 +36,11 @@ export default { }, mounted() { + const pages = this.$el.querySelectorAll('.van-swipe-item') + if (pages.length <= 1) { + return + } + this.input = new Input(this.$el, { listenMoving: true }); From cc3aad3802a7dbf947421bc75b550021977c3af3 Mon Sep 17 00:00:00 2001 From: Raistlin916 Date: Wed, 9 Aug 2017 12:15:18 +0800 Subject: [PATCH 02/48] fix: one page swipe error --- packages/swipe/src/scroll.js | 12 ++++++------ packages/swipe/src/swipe-item.vue | 7 +++++++ packages/swipe/src/swipe.vue | 27 ++++++++++++++++++++------- 3 files changed, 33 insertions(+), 13 deletions(-) diff --git a/packages/swipe/src/scroll.js b/packages/swipe/src/scroll.js index d70b1aba1..988e74e49 100755 --- a/packages/swipe/src/scroll.js +++ b/packages/swipe/src/scroll.js @@ -69,12 +69,6 @@ extend(Scroll.prototype, { var leftOffset = offset - wrapWidth; var rightOffset = offset + wrapWidth; - page = this.getCurrentPage(); - if (page) { - page.style['-webkit-transform'] = 'translate3d(' + offset + 'px, 0, 0)'; - page.style['display'] = 'block'; - } - leftPage = this.pages[this.mapLoopPage(currentOffsetPage - 1)]; if (leftPage) { if (Math.abs(leftOffset) <= wrapWidth) { @@ -96,6 +90,12 @@ extend(Scroll.prototype, { } } } + + page = this.getCurrentPage(); + if (page) { + page.style['-webkit-transform'] = 'translate3d(' + offset + 'px, 0, 0)'; + page.style['display'] = 'block'; + } }, movePage: function(dist, isEnd) { diff --git a/packages/swipe/src/swipe-item.vue b/packages/swipe/src/swipe-item.vue index ba4489474..dafed2fd2 100644 --- a/packages/swipe/src/swipe-item.vue +++ b/packages/swipe/src/swipe-item.vue @@ -10,6 +10,13 @@ export default { beforeCreate() { this.$parent.swipes.push(this); + }, + + destroyed() { + const index = this.$parent.swipes.indexOf(this) + if (index > -1) { + this.$parent.swipes.splice(index, 1) + } } }; diff --git a/packages/swipe/src/swipe.vue b/packages/swipe/src/swipe.vue index 5063cf8e2..4b6d818b6 100644 --- a/packages/swipe/src/swipe.vue +++ b/packages/swipe/src/swipe.vue @@ -36,11 +36,6 @@ export default { }, mounted() { - const pages = this.$el.querySelectorAll('.van-swipe-item') - if (pages.length <= 1) { - return - } - this.input = new Input(this.$el, { listenMoving: true }); @@ -66,10 +61,28 @@ export default { }).on('autoPlay', function(dist, isEnd) { scroll.movePage(dist.x, isEnd); }); + this.dummy = dummy }, - updated() { - this.scroll.update(); + watch: { + swipes(value) { + if (this.autoPlay && value.length > 1) { + this.dummy.initMove() + } else { + this.dummy.clearMove() + } + this.scroll.update(); + return value + }, + + autoPlay(value) { + if (value && this.swipes.length > 1) { + this.dummy.initMove() + } else { + this.dummy.clearMove() + } + return value + } }, methods: { From efbdc0d76fc7a5bfac6b4e842223cc155312dfd3 Mon Sep 17 00:00:00 2001 From: Raistlin916 Date: Wed, 9 Aug 2017 12:17:26 +0800 Subject: [PATCH 03/48] remove --- packages/swipe/src/swipe.vue | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/swipe/src/swipe.vue b/packages/swipe/src/swipe.vue index 68b0fc348..4b6d818b6 100644 --- a/packages/swipe/src/swipe.vue +++ b/packages/swipe/src/swipe.vue @@ -36,11 +36,6 @@ export default { }, mounted() { - const pages = this.$el.querySelectorAll('.van-swipe-item') - if (pages.length <= 1) { - return - } - this.input = new Input(this.$el, { listenMoving: true }); From a1aededecb73b1a00b1fb26b3562593367142d39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 28 Aug 2017 13:45:25 +0800 Subject: [PATCH 04/48] NoticeBar: add component && doc --- build/bin/build-entry.js | 3 +- components.json | 3 +- docs/examples-docs/notice-bar.md | 71 +++++++++++++++++++++ docs/src/ExamplesDocsApp.vue | 1 - docs/src/doc.config.js | 4 ++ docs/src/examples.js | 6 +- docs/src/index.js | 2 +- package.json | 2 +- packages/index.js | 47 ++------------ packages/notice-bar/index.vue | 92 ++++++++++++++++++++++++++++ packages/vant-css/src/index.css | 1 + packages/vant-css/src/notice-bar.css | 36 +++++++++++ yarn.lock | 6 +- 13 files changed, 221 insertions(+), 53 deletions(-) create mode 100644 docs/examples-docs/notice-bar.md create mode 100644 packages/notice-bar/index.vue create mode 100644 packages/vant-css/src/notice-bar.css diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js index 6294590f1..34d111e49 100644 --- a/build/bin/build-entry.js +++ b/build/bin/build-entry.js @@ -34,8 +34,7 @@ export { }; export default { install, - version, -{{list}} + version }; `; diff --git a/components.json b/components.json index dd4b25daa..705772a32 100644 --- a/components.json +++ b/components.json @@ -36,5 +36,6 @@ "uploader": "./packages/uploader/index.js", "swipe": "./packages/swipe/index.js", "swipe-item": "./packages/swipe-item/index.js", - "datetime-picker": "./packages/datetime-picker/index.js" + "datetime-picker": "./packages/datetime-picker/index.js", + "notice-bar": "./packages/notice-bar/index.js" } diff --git a/docs/examples-docs/notice-bar.md b/docs/examples-docs/notice-bar.md new file mode 100644 index 000000000..50b954b9b --- /dev/null +++ b/docs/examples-docs/notice-bar.md @@ -0,0 +1,71 @@ + + +## NoticeBar 通告栏 + +### 使用指南 +``` javascript +import { NoticeBar } from 'vant'; + +Vue.component(NoticeBar.name, NoticeBar); +``` + +### 代码演示 + +#### 基础用法 + +:::demo 基础用法 +```html + + 足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。 + +``` +::: + +#### 禁用滚动 +文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动 + +:::demo 禁用滚动 +```html + + 足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。 + +``` +::: + +#### 通告栏模式 +默认模式为空，支持`closeable`和`link`。 + +:::demo 通告栏模式 +```html + + + 足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。 + + + + + 足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。 + +``` +::: + +### API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| mode | 通告栏模式 | String | `''` | `closeable` `link` | +| delay | 动画延迟时间，单位秒 | Number | `1` | | +| scrollable | 是否滚动 | Boolean | `true` | | +| speed | 滚动速率，单位px | Number | `40` | | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| click | 点击事件回调 | - | diff --git a/docs/src/ExamplesDocsApp.vue b/docs/src/ExamplesDocsApp.vue index c8753bf7f..85337be4a 100644 --- a/docs/src/ExamplesDocsApp.vue +++ b/docs/src/ExamplesDocsApp.vue @@ -7,7 +7,6 @@ diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css index d18b5a74d..6a7bfa8df 100644 --- a/packages/vant-css/src/index.css +++ b/packages/vant-css/src/index.css @@ -30,3 +30,4 @@ @import './toast.css'; @import './uploader.css'; @import './swipe.css'; +@import './notice-bar.css'; diff --git a/packages/vant-css/src/notice-bar.css b/packages/vant-css/src/notice-bar.css new file mode 100644 index 000000000..67f912a1a --- /dev/null +++ b/packages/vant-css/src/notice-bar.css @@ -0,0 +1,36 @@ +@import './common/var.css'; + +.van-notice-bar { + color: #f60; + padding: 9px 10px; + font-size: 12px; + line-height: 1.5; + background-color: #fff7cc; + + &--withicon { + position: relative; + padding-right: 30px; + } + + &__icon { + top: 10px; + right: 10px; + position: absolute; + font-size: 15px; + line-height: 1; + cursor: pointer; + } + + &__content-wrap { + height: 18px; + overflow: hidden; + position: relative; + } + + &__content { + position: absolute; + white-space: nowrap; + transition-property: left; + transition-timing-function: linear; + } +} diff --git a/yarn.lock b/yarn.lock index b2c4b198a..65dac4f42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7959,9 +7959,9 @@ yeast@0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419" -zan-doc@^0.2.3: - version "0.2.3" - resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.3.tgz#79a8a4b6b5377e5900fd9a37034bb481ab281cf8" +zan-doc@^0.2.5: + version "0.2.5" + resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.5.tgz#4f82e1b75db1a348b57436cd1d4ffb607bc18562" dependencies: cheerio "0.22.0" decamelize "^1.2.0" From c357dd4e71fcbafd52fecd56b8beeaff6293b178 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 28 Aug 2017 14:20:34 +0800 Subject: [PATCH 05/48] NoticeBar: add test cases --- docs/examples-docs/notice-bar.md | 4 +- packages/notice-bar/index.vue | 3 +- test/unit/specs/cell-swipe.spec.js | 6 +-- test/unit/specs/notice-bar.spec.js | 62 ++++++++++++++++++++++++++++++ 4 files changed, 68 insertions(+), 7 deletions(-) create mode 100644 test/unit/specs/notice-bar.spec.js diff --git a/docs/examples-docs/notice-bar.md b/docs/examples-docs/notice-bar.md index 50b954b9b..eaccdde97 100644 --- a/docs/examples-docs/notice-bar.md +++ b/docs/examples-docs/notice-bar.md @@ -21,9 +21,7 @@ Vue.component(NoticeBar.name, NoticeBar); :::demo 基础用法 ```html - - 足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。 - + ``` ::: diff --git a/packages/notice-bar/index.vue b/packages/notice-bar/index.vue index 59e7430bd..3540c4833 100644 --- a/packages/notice-bar/index.vue +++ b/packages/notice-bar/index.vue @@ -2,7 +2,7 @@
- + {{ text }}
@@ -22,6 +22,7 @@ export default { }, props: { + text: String, mode: { type: String, default: '', diff --git a/test/unit/specs/cell-swipe.spec.js b/test/unit/specs/cell-swipe.spec.js index 89e5ca833..ed142b25f 100644 --- a/test/unit/specs/cell-swipe.spec.js +++ b/test/unit/specs/cell-swipe.spec.js @@ -7,14 +7,14 @@ const defaultProps = { leftWidth: 100, rightWidth: 100 } -} +}; describe('CellSwipe', () => { let wrapper; afterEach(() => { wrapper && wrapper.destroy(); }); - + it('render left or right part when has width', () => { wrapper = mount(CellSwipe, defaultProps); expect(wrapper.find('.van-cell-swipe__left').length).to.equal(1); @@ -97,7 +97,7 @@ describe('CellSwipe', () => { triggerTouch(wrapper, 'touchstart', 0, 0); triggerTouch(wrapper, 'touchmove', 1, 0); - + wrapper.vm.$nextTick(() => { expect(wrapper.vm.offset).to.equal(0); expect(wrapper.vm.opened).to.be.false; diff --git a/test/unit/specs/notice-bar.spec.js b/test/unit/specs/notice-bar.spec.js new file mode 100644 index 000000000..f85d09b36 --- /dev/null +++ b/test/unit/specs/notice-bar.spec.js @@ -0,0 +1,62 @@ +import NoticeBar from 'packages/notice-bar'; +import { mount } from 'avoriaz'; + +describe('NoticeBar', () => { + let wrapper; + afterEach(() => { + wrapper && wrapper.destroy(); + }); + + it('create a notice-bar', () => { + wrapper = mount(NoticeBar, { + propsData: {}, + attachToDocument: true + }); + + expect(wrapper.hasClass('van-notice-bar')).to.be.true; + }); + + it('mode closeable', () => { + wrapper = mount(NoticeBar, { + propsData: { + mode: 'closeable' + }, + attachToDocument: true + }); + + const icon = wrapper.find('.van-icon-close'); + expect(icon.length).to.equal(1); + + icon[0].trigger('click'); + expect(wrapper.hasStyle('display', 'none')); + }); + + it('mode link', () => { + wrapper = mount(NoticeBar, { + propsData: { + mode: 'link' + }, + attachToDocument: true + }); + + expect(wrapper.find('.van-icon-arrow').length).to.equal(1); + }); + + it('notice-bar transitionend', (done) => { + wrapper = mount(NoticeBar, { + propsData: { + text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。', + speed: 10000, + delay: 0 + }, + attachToDocument: true + }); + + const content = wrapper.find('.van-notice-bar__content')[0]; + + setTimeout(() => { + expect(content.hasStyle('transition-delay', '0s')).to.be.true; + done(); + }, 1500); + }); +}); From 561821d03acd295bab4330ab5501c1feb0933c5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 28 Aug 2017 14:40:00 +0800 Subject: [PATCH 06/48] NoticeBar: improve test coverage --- packages/notice-bar/index.vue | 2 +- test/unit/components/notice-bar.vue | 16 ++++++++++++++++ test/unit/index.js | 2 +- test/unit/specs/notice-bar.spec.js | 11 +++++------ 4 files changed, 23 insertions(+), 8 deletions(-) create mode 100644 test/unit/components/notice-bar.vue diff --git a/packages/notice-bar/index.vue b/packages/notice-bar/index.vue index 3540c4833..4060dccc6 100644 --- a/packages/notice-bar/index.vue +++ b/packages/notice-bar/index.vue @@ -70,7 +70,7 @@ export default { const wrapWidth = this.$refs.contentWrap.getBoundingClientRect().width; if (this.scrollable && offsetWidth > wrapWidth) { this.offsetWidth = offsetWidth; - this.duration = Math.ceil((offsetWidth + wrapWidth) / this.speed); + this.duration = (offsetWidth + wrapWidth) / this.speed; } }, diff --git a/test/unit/components/notice-bar.vue b/test/unit/components/notice-bar.vue new file mode 100644 index 000000000..7eed57545 --- /dev/null +++ b/test/unit/components/notice-bar.vue @@ -0,0 +1,16 @@ + + + + diff --git a/test/unit/index.js b/test/unit/index.js index 9f20bac30..cac038bbe 100644 --- a/test/unit/index.js +++ b/test/unit/index.js @@ -13,4 +13,4 @@ if (process.env.TEST_FILE) { }); } else { testsReq.keys().forEach(testsReq); -} \ No newline at end of file +} diff --git a/test/unit/specs/notice-bar.spec.js b/test/unit/specs/notice-bar.spec.js index f85d09b36..87c796e44 100644 --- a/test/unit/specs/notice-bar.spec.js +++ b/test/unit/specs/notice-bar.spec.js @@ -1,4 +1,4 @@ -import NoticeBar from 'packages/notice-bar'; +import NoticeBar from '../components/notice-bar'; import { mount } from 'avoriaz'; describe('NoticeBar', () => { @@ -13,7 +13,7 @@ describe('NoticeBar', () => { attachToDocument: true }); - expect(wrapper.hasClass('van-notice-bar')).to.be.true; + expect(wrapper.find('.van-notice-bar').length).to.equal(1); }); it('mode closeable', () => { @@ -45,18 +45,17 @@ describe('NoticeBar', () => { it('notice-bar transitionend', (done) => { wrapper = mount(NoticeBar, { propsData: { - text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。', - speed: 10000, + text: '足协杯战线连续第2年上演广州德比战', + speed: 1000, delay: 0 }, attachToDocument: true }); const content = wrapper.find('.van-notice-bar__content')[0]; - setTimeout(() => { expect(content.hasStyle('transition-delay', '0s')).to.be.true; done(); - }, 1500); + }, 500); }); }); From 17779384ee22fc464cc7f26ee2d8e6a74d29dbb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 28 Aug 2017 14:55:39 +0800 Subject: [PATCH 07/48] fix: exclude test files when dist test coverage report --- test/unit/get-webpack-conf.js | 16 +++++++++++++++- test/unit/karma.conf.js | 3 ++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/test/unit/get-webpack-conf.js b/test/unit/get-webpack-conf.js index 6d0818692..3861fd399 100644 --- a/test/unit/get-webpack-conf.js +++ b/test/unit/get-webpack-conf.js @@ -75,7 +75,21 @@ function getWebpackConfig(testFileName) { ] }, { - test: /\.vue$/, + test: /test\/unit\/components\/.*\.vue$|packages\/swipe\/.*\.vue$/, + use: [ + { + loader: 'vue-loader', + options: { + loaders: { + css: ['style-loader', 'css-loader', 'postcss-loader'] + } + } + } + ] + }, + { + test: /packages\/.*\.vue$/, + exclude: /packages\/swipe\/.*\.vue$/, use: [ { loader: 'vue-loader', diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js index 7c8a89d96..0056f945a 100644 --- a/test/unit/karma.conf.js +++ b/test/unit/karma.conf.js @@ -14,7 +14,8 @@ module.exports = function(config) { reporters: ['spec', 'coverage'], files: ['./index.js'], preprocessors: { - './index.js': ['webpack', 'sourcemap'] + './index.js': ['webpack', 'sourcemap'], + 'test/unit/!(components)/**/*.vue': ['coverage'] }, webpack: getWebpackConfig(getTestFileName()), webpackMiddleware: { From f44ee614f1a34b1f621407ab9a02f1973fa1f19d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 28 Aug 2017 15:25:50 +0800 Subject: [PATCH 08/48] delete components.json --- build/bin/build-entry.js | 6 +- build/bin/build-lib.js | 4 +- build/bin/get-components.js | 8 ++ build/bin/init.js | 16 ---- build/genExamples.js | 16 ---- build/webpack.config.dev.js | 11 ++- components.json | 41 --------- packages/index.js | 167 ++++++++++++++++++------------------ 8 files changed, 107 insertions(+), 162 deletions(-) create mode 100644 build/bin/get-components.js delete mode 100644 build/genExamples.js delete mode 100644 components.json diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js index 34d111e49..27c7b9e96 100644 --- a/build/bin/build-entry.js +++ b/build/bin/build-entry.js @@ -1,4 +1,4 @@ -var Components = require('../../components.json'); +var Components = require('./get-components')(); var fs = require('fs'); var render = require('json-templater/string'); var uppercamelcase = require('uppercamelcase'); @@ -40,13 +40,11 @@ export default { delete Components.font; -var ComponentNames = Object.keys(Components); - var includeComponentTemplate = []; var installTemplate = []; var listTemplate = []; -ComponentNames.forEach(name => { +Components.forEach(name => { var componentName = uppercamelcase(name); includeComponentTemplate.push(render(IMPORT_TEMPLATE, { diff --git a/build/bin/build-lib.js b/build/bin/build-lib.js index 0f59e218f..d20e2ba7c 100644 --- a/build/bin/build-lib.js +++ b/build/bin/build-lib.js @@ -12,7 +12,7 @@ const fs = require('fs'); const path = require('path'); -const components = require('../../components.json'); +const components = require('./get-components')(); const chalk = require('chalk'); require('shelljs/global'); @@ -38,7 +38,7 @@ log('Finished', 'build:vant-css'); // 5. build style entrys log('Starting', 'build:style-entries'); -Object.keys(components).forEach((componentName) => { +components.forEach((componentName) => { const dir = path.join(__dirname, '../../lib/', componentName, '/style'); const file = path.join(dir, 'index.js'); const cssPath = path.join(__dirname, '../../lib/vant-css/', `${componentName}.css`); diff --git a/build/bin/get-components.js b/build/bin/get-components.js new file mode 100644 index 000000000..9cc7a71fe --- /dev/null +++ b/build/bin/get-components.js @@ -0,0 +1,8 @@ +const fs = require('fs'); +const path = require('path'); + +module.exports = function() { + const dirs = fs.readdirSync(path.resolve(__dirname, '../../packages')); + const excludes = ['index.js', 'vant-css', 'mixins', 'utils']; + return dirs.filter(dirName => excludes.indexOf(dirName) === -1) +} diff --git a/build/bin/init.js b/build/bin/init.js index 2aa0b37d3..023176707 100644 --- a/build/bin/init.js +++ b/build/bin/init.js @@ -28,21 +28,5 @@ gulp.task('copy', function(callback) { }); }); - -// 添加到 components.json -gulp.task('addComponents', function(callback) { - const componentsFile = require('../../components.json'); - if (componentsFile[name]) { - console.error(`${name} 已存在.`); - process.exit(1); - } - componentsFile[name] = `./packages/${name}/index.js`; - fileSave(path.join(__dirname, '../../components.json')) - .write(JSON.stringify(componentsFile, null, ' '), 'utf8') - .end('\n'); - gutil.log('-------> components.json文件更新成功'); - gutil.log(gutil.colors.yellow('-------> 请无视下面的make报错')); -}); - runSequence('copy', 'addComponents'); diff --git a/build/genExamples.js b/build/genExamples.js deleted file mode 100644 index c668082f9..000000000 --- a/build/genExamples.js +++ /dev/null @@ -1,16 +0,0 @@ -const path = require('path'); -const docConfig = require('../docs/src/doc.config'); -const { extractExample } = require('zan-doc/src/helper'); - -function extract(watch = false) { - extractExample({ - src: path.resolve(__dirname, '../docs/examples-docs'), - dist: path.resolve(__dirname, '../docs/examples-dist'), - nav: docConfig['zh-CN'].nav, - watch - }); -} - -module.exports = function watch(isProduction) { - extract(!isProduction); -}; diff --git a/build/webpack.config.dev.js b/build/webpack.config.dev.js index 737712be8..c7704eae6 100644 --- a/build/webpack.config.dev.js +++ b/build/webpack.config.dev.js @@ -6,11 +6,20 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); const isProduction = process.env.NODE_ENV === 'production'; +const docConfig = require('../docs/src/doc.config'); +const { extractExample } = require('zan-doc/src/helper'); const styleLoaders = [ { loader: 'css-loader' }, { loader: 'postcss-loader', options: { sourceMap: true } } ]; -require('./genExamples')(isProduction); + +// extract [components].vue from [components].md +extractExample({ + src: path.resolve(__dirname, '../docs/examples-docs'), + dist: path.resolve(__dirname, '../docs/examples-dist'), + nav: docConfig['zh-CN'].nav, + watch: !isProduction +}); module.exports = { entry: { diff --git a/components.json b/components.json deleted file mode 100644 index 705772a32..000000000 --- a/components.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "button": "./packages/button/index.js", - "switch": "./packages/switch/index.js", - "field": "./packages/field/index.js", - "radio": "./packages/radio/index.js", - "cell": "./packages/cell/index.js", - "icon": "./packages/icon/index.js", - "cell-group": "./packages/cell-group/index.js", - "cell-swipe": "./packages/cell-swipe/index.js", - "popup": "./packages/popup/index.js", - "dialog": "./packages/dialog/index.js", - "picker": "./packages/picker/index.js", - "radio-group": "./packages/radio-group/index.js", - "waterfall": "./packages/waterfall/index.js", - "loading": "./packages/loading/index.js", - "panel": "./packages/panel/index.js", - "card": "./packages/card/index.js", - "steps": "./packages/steps/index.js", - "tag": "./packages/tag/index.js", - "checkbox": "./packages/checkbox/index.js", - "checkbox-group": "./packages/checkbox-group/index.js", - "badge-group": "./packages/badge-group/index.js", - "badge": "./packages/badge/index.js", - "search": "./packages/search/index.js", - "step": "./packages/step/index.js", - "tabs": "./packages/tabs/index.js", - "tab": "./packages/tab/index.js", - "lazyload": "./packages/lazyload/index.js", - "image-preview": "./packages/image-preview/index.js", - "col": "./packages/col/index.js", - "row": "./packages/row/index.js", - "actionsheet": "./packages/actionsheet/index.js", - "quantity": "./packages/quantity/index.js", - "progress": "./packages/progress/index.js", - "toast": "./packages/toast/index.js", - "uploader": "./packages/uploader/index.js", - "swipe": "./packages/swipe/index.js", - "swipe-item": "./packages/swipe-item/index.js", - "datetime-picker": "./packages/datetime-picker/index.js", - "notice-bar": "./packages/notice-bar/index.js" -} diff --git a/packages/index.js b/packages/index.js index 7529339fe..956bda2ce 100644 --- a/packages/index.js +++ b/packages/index.js @@ -1,79 +1,81 @@ +import Actionsheet from './actionsheet'; +import Badge from './badge'; +import BadgeGroup from './badge-group'; import Button from './button'; -import Switch from './switch'; -import Field from './field'; -import Radio from './radio'; +import Card from './card'; import Cell from './cell'; -import Icon from './icon'; import CellGroup from './cell-group'; import CellSwipe from './cell-swipe'; -import Popup from './popup'; -import Dialog from './dialog'; -import Picker from './picker'; -import RadioGroup from './radio-group'; -import Waterfall from './waterfall'; -import Loading from './loading'; -import Panel from './panel'; -import Card from './card'; -import Steps from './steps'; -import Tag from './tag'; import Checkbox from './checkbox'; import CheckboxGroup from './checkbox-group'; -import BadgeGroup from './badge-group'; -import Badge from './badge'; +import Col from './col'; +import Collapse from './collapse'; +import DatetimePicker from './datetime-picker'; +import Dialog from './dialog'; +import Field from './field'; +import Icon from './icon'; +import ImagePreview from './image-preview'; +import Lazyload from './lazyload'; +import Loading from './loading'; +import NoticeBar from './notice-bar'; +import Panel from './panel'; +import Picker from './picker'; +import Popup from './popup'; +import Progress from './progress'; +import Quantity from './quantity'; +import Radio from './radio'; +import RadioGroup from './radio-group'; +import Row from './row'; import Search from './search'; import Step from './step'; -import Tabs from './tabs'; -import Tab from './tab'; -import Lazyload from './lazyload'; -import ImagePreview from './image-preview'; -import Col from './col'; -import Row from './row'; -import Actionsheet from './actionsheet'; -import Quantity from './quantity'; -import Progress from './progress'; -import Toast from './toast'; -import Uploader from './uploader'; +import Steps from './steps'; import Swipe from './swipe'; import SwipeItem from './swipe-item'; -import DatetimePicker from './datetime-picker'; -import NoticeBar from './notice-bar'; +import Switch from './switch'; +import Tab from './tab'; +import Tabs from './tabs'; +import Tag from './tag'; +import Toast from './toast'; +import Uploader from './uploader'; +import Waterfall from './waterfall'; const version = '0.8.6'; const components = [ + Actionsheet, + Badge, + BadgeGroup, Button, - Switch, - Field, - Radio, + Card, Cell, - Icon, CellGroup, CellSwipe, - Popup, - Picker, - RadioGroup, - Loading, - Panel, - Card, - Steps, - Tag, Checkbox, CheckboxGroup, - BadgeGroup, - Badge, + Col, + Collapse, + DatetimePicker, + Field, + Icon, + Loading, + NoticeBar, + Panel, + Picker, + Popup, + Progress, + Quantity, + Radio, + RadioGroup, + Row, Search, Step, - Tabs, - Tab, - Col, - Row, - Actionsheet, - Quantity, - Progress, - Uploader, + Steps, Swipe, SwipeItem, - DatetimePicker, - NoticeBar + Switch, + Tab, + Tabs, + Tag, + Uploader ]; const install = function(Vue) { @@ -92,45 +94,46 @@ if (typeof window !== 'undefined' && window.Vue) { export { install, version, + Actionsheet, + Badge, + BadgeGroup, Button, - Switch, - Field, - Radio, + Card, Cell, - Icon, CellGroup, CellSwipe, - Popup, - Dialog, - Picker, - RadioGroup, - Waterfall, - Loading, - Panel, - Card, - Steps, - Tag, Checkbox, CheckboxGroup, - BadgeGroup, - Badge, + Col, + Collapse, + DatetimePicker, + Dialog, + Field, + Icon, + ImagePreview, + Lazyload, + Loading, + NoticeBar, + Panel, + Picker, + Popup, + Progress, + Quantity, + Radio, + RadioGroup, + Row, Search, Step, - Tabs, - Tab, - Lazyload, - ImagePreview, - Col, - Row, - Actionsheet, - Quantity, - Progress, - Toast, - Uploader, + Steps, Swipe, SwipeItem, - DatetimePicker, - NoticeBar + Switch, + Tab, + Tabs, + Tag, + Toast, + Uploader, + Waterfall }; export default { install, From c9031494be0532c38db32c82d90e0c5824b3901c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 28 Aug 2017 15:55:28 +0800 Subject: [PATCH 09/48] adjust nav order --- docs/src/doc.config.js | 128 ++++++++++++++++++++--------------------- packages/index.js | 3 - 2 files changed, 64 insertions(+), 67 deletions(-) diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 70cf88afc..0e3afd423 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -50,13 +50,17 @@ module.exports = { "path": "/layout", "title": "Layout 布局" }, + { + "path": "/badge", + "title": "Badge 徽章" + }, { "path": "/button", "title": "Button 按钮" }, { - "path": "/icon", - "title": "Icon 图标" + "path": "/card", + "title": "Card 图文组件" }, { "path": "/cell", @@ -67,56 +71,8 @@ module.exports = { "title": "CellSwipe 滑动单元格" }, { - "path": "/progress", - "title": "Progress 进度条" - }, - { - "path": "/card", - "title": "Card 图文组件" - }, - { - "path": "/panel", - "title": "Panel 面板" - }, - { - "path": "/loading", - "title": "Loading 加载" - }, - { - "path": "/steps", - "title": "Steps 步骤条" - }, - { - "path": "/tag", - "title": "Tag 标记" - }, - { - "path": "/badge", - "title": "Badge 徽章" - }, - { - "path": "/tab", - "title": "Tab 标签" - }, - { - "path": "/popup", - "title": "Popup 弹出菜单" - }, - { - "path": "/swipe", - "title": "Swipe 轮播" - }, - { - "path": "/search", - "title": "Search 搜索" - }, - { - "path": "/quantity", - "title": "Quantity 数量选择" - }, - { - "path": "/waterfall", - "title": "Waterfall 瀑布流" + "path": "/icon", + "title": "Icon 图标" }, { "path": "/image-preview", @@ -126,9 +82,53 @@ module.exports = { "path": "/lazyload", "title": "Lazyload 图片懒加载" }, + { + "path": "/loading", + "title": "Loading 加载" + }, { "path": "/notice-bar", "title": "NoticeBar 通告栏" + }, + { + "path": "/panel", + "title": "Panel 面板" + }, + { + "path": "/popup", + "title": "Popup 弹出菜单" + }, + { + "path": "/progress", + "title": "Progress 进度条" + }, + { + "path": "/quantity", + "title": "Quantity 数量选择" + }, + { + "path": "/steps", + "title": "Steps 步骤条" + }, + { + "path": "/tab", + "title": "Tab 标签" + }, + { + "path": "/tag", + "title": "Tag 标记" + }, + { + "path": "/swipe", + "title": "Swipe 轮播" + }, + { + "path": "/search", + "title": "Search 搜索" + }, + { + "path": "/waterfall", + "title": "Waterfall 瀑布流" } ] }, @@ -136,8 +136,8 @@ module.exports = { "groupName": "表单", "list": [ { - "path": "/switch", - "title": "Switch 开关" + "path": "/checkbox", + "title": "Checkbox 复选框" }, { "path": "/field", @@ -148,8 +148,8 @@ module.exports = { "title": "Radio 单选框" }, { - "path": "/checkbox", - "title": "Checkbox 复选框" + "path": "/switch", + "title": "Switch 开关" }, { "path": "/uploader", @@ -164,14 +164,6 @@ module.exports = { "path": "/actionsheet", "title": "Actionsheet 行动按钮" }, - { - "path": "/toast", - "title": "Toast 轻提示" - }, - { - "path": "/picker", - "title": "Picker 选择器" - }, { "path": "/datetime-picker", "title": "DatetimePicker 时间选择" @@ -179,6 +171,14 @@ module.exports = { { "path": "/dialog", "title": "Dialog 弹出框" + }, + { + "path": "/picker", + "title": "Picker 选择器" + }, + { + "path": "/toast", + "title": "Toast 轻提示" } ] } diff --git a/packages/index.js b/packages/index.js index 956bda2ce..e1ff78211 100644 --- a/packages/index.js +++ b/packages/index.js @@ -9,7 +9,6 @@ import CellSwipe from './cell-swipe'; import Checkbox from './checkbox'; import CheckboxGroup from './checkbox-group'; import Col from './col'; -import Collapse from './collapse'; import DatetimePicker from './datetime-picker'; import Dialog from './dialog'; import Field from './field'; @@ -52,7 +51,6 @@ const components = [ Checkbox, CheckboxGroup, Col, - Collapse, DatetimePicker, Field, Icon, @@ -105,7 +103,6 @@ export { Checkbox, CheckboxGroup, Col, - Collapse, DatetimePicker, Dialog, Field, From 245f03309f0acbfc464dd4b3c03f7e9ee7e54189 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 28 Aug 2017 17:38:32 +0800 Subject: [PATCH 10/48] add CellSwitch component --- docs/examples-docs/switch-cell.md | 81 +++++++++++++++++++++++++++ docs/src/doc.config.js | 9 +++ packages/index.js | 3 + packages/switch-cell/index.vue | 32 +++++++++++ packages/vant-css/src/index.css | 1 + packages/vant-css/src/switch-cell.css | 9 +++ test/unit/specs/switch-cell.spec.js | 74 ++++++++++++++++++++++++ 7 files changed, 209 insertions(+) create mode 100644 docs/examples-docs/switch-cell.md create mode 100644 packages/switch-cell/index.vue create mode 100644 packages/vant-css/src/switch-cell.css create mode 100644 test/unit/specs/switch-cell.spec.js diff --git a/docs/examples-docs/switch-cell.md b/docs/examples-docs/switch-cell.md new file mode 100644 index 000000000..24ff57fc8 --- /dev/null +++ b/docs/examples-docs/switch-cell.md @@ -0,0 +1,81 @@ +## SwitchCell 开关单元格 + +`SwitchCell`组件是对`Switch`和`Cell`组件的封装 + + + +### 使用指南 +``` javascript +import { SwitchCell } from 'vant'; + +Vue.component(SwitchCell.name, SwitchCell); +``` + +### 代码演示 + +#### 基础用法 + +:::demo 基础用法 +```html + + + +``` +::: + +#### 禁用状态 +通过`disabled`属性可以将组件设置为禁用状态 + +:::demo 禁用状态 +```html + + + +``` +::: + +#### 加载状态 +通过`loading`属性可以将组件设置为加载状态 + +:::demo 加载状态 +```html + + + +``` +::: + +### API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 开关状态 | `Boolean` | | | +| title | 左侧标题 | `String` | `''` | | +| loading | 是否为加载状态 | `Boolean` | `false` | | +| disabled | 是否为禁用状态 | `Boolean` | `false` | | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| change | 开关状态切换回调 | checked: 是否选中开关 | \ No newline at end of file diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 0e3afd423..58c899777 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -181,6 +181,15 @@ module.exports = { "title": "Toast 轻提示" } ] + }, + { + "groupName": "业务组件", + "list": [ + { + "path": "/switch-cell", + "title": "SwitchCell 开关单元格" + } + ] } ] } diff --git a/packages/index.js b/packages/index.js index e1ff78211..fcb708c38 100644 --- a/packages/index.js +++ b/packages/index.js @@ -31,6 +31,7 @@ import Steps from './steps'; import Swipe from './swipe'; import SwipeItem from './swipe-item'; import Switch from './switch'; +import SwitchCell from './switch-cell'; import Tab from './tab'; import Tabs from './tabs'; import Tag from './tag'; @@ -70,6 +71,7 @@ const components = [ Swipe, SwipeItem, Switch, + SwitchCell, Tab, Tabs, Tag, @@ -125,6 +127,7 @@ export { Swipe, SwipeItem, Switch, + SwitchCell, Tab, Tabs, Tag, diff --git a/packages/switch-cell/index.vue b/packages/switch-cell/index.vue new file mode 100644 index 000000000..911d33da5 --- /dev/null +++ b/packages/switch-cell/index.vue @@ -0,0 +1,32 @@ + + + diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css index 6a7bfa8df..d897aacbd 100644 --- a/packages/vant-css/src/index.css +++ b/packages/vant-css/src/index.css @@ -31,3 +31,4 @@ @import './uploader.css'; @import './swipe.css'; @import './notice-bar.css'; +@import './switch-cell.css'; diff --git a/packages/vant-css/src/switch-cell.css b/packages/vant-css/src/switch-cell.css new file mode 100644 index 000000000..7edabe8bd --- /dev/null +++ b/packages/vant-css/src/switch-cell.css @@ -0,0 +1,9 @@ +.van-switch-cell { + .van-cell__title { + vertical-align: middle; + } + + .van-switch { + float: right; + } +} \ No newline at end of file diff --git a/test/unit/specs/switch-cell.spec.js b/test/unit/specs/switch-cell.spec.js new file mode 100644 index 000000000..a363c5ced --- /dev/null +++ b/test/unit/specs/switch-cell.spec.js @@ -0,0 +1,74 @@ +import SwitchCell from 'packages/switch-cell'; +import { mount } from 'avoriaz'; +import { DOMChecker } from '../utils'; + +describe('SwitchCell', () => { + let wrapper; + afterEach(() => { + wrapper && wrapper.destroy(); + }); + + it('default', () => { + wrapper = mount(SwitchCell, { + attachToDocument: true + }); + + DOMChecker(wrapper, { + count: { + '.van-switch--off': 1, + '.van-switch--disabled': 0 + } + }); + }); + + it('set title', () => { + wrapper = mount(SwitchCell, { + attachToDocument: true, + propsData: { + title: '测试标题' + } + }); + + DOMChecker(wrapper, { + text: { + '.van-cell__text': '测试标题' + }, + count: { + '.van-switch--off': 1, + '.van-switch--disabled': 0 + } + }); + }); + + it('checked', () => { + wrapper = mount(SwitchCell, { + attachToDocument: true, + propsData: { + value: true + } + }); + + DOMChecker(wrapper, { + count: { + '.van-switch--on': 1, + '.van-switch--disabled': 0 + } + }); + }); + + it('disabled', () => { + wrapper = mount(SwitchCell, { + attachToDocument: true, + propsData: { + disabled: true + } + }); + + DOMChecker(wrapper, { + count: { + '.van-switch--off': 1, + '.van-switch--disabled': 1 + } + }); + }); +}); From 09944101db4f1cc2848b3aeae6b1c43599915f62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 28 Aug 2017 17:52:17 +0800 Subject: [PATCH 11/48] SwitchCell: add change event test case --- test/unit/specs/switch-cell.spec.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/test/unit/specs/switch-cell.spec.js b/test/unit/specs/switch-cell.spec.js index a363c5ced..edfaee56a 100644 --- a/test/unit/specs/switch-cell.spec.js +++ b/test/unit/specs/switch-cell.spec.js @@ -71,4 +71,25 @@ describe('SwitchCell', () => { } }); }); + + it('listen to change event', (done) => { + wrapper = mount(SwitchCell, { + attachToDocument: true, + propsData: { + value: false + } + }); + + wrapper.vm.$on('input', (value) => { + wrapper.vm.value = value; + }); + + wrapper.vm.$on('change', (value) => { + expect(value).to.be.true; + done(); + }); + + const switchEl = wrapper.find('.van-switch')[0]; + switchEl.trigger('click'); + }); }); From 9eed1b1f856f3e1dc8ee5e6ff57ad42b6e185b52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 28 Aug 2017 19:20:47 +0800 Subject: [PATCH 12/48] add ExpressWay component --- docs/examples-docs/express-way.md | 130 +++++++++++++++++ docs/src/doc.config.js | 4 + packages/express-way/Option.vue | 38 +++++ packages/express-way/index.vue | 100 +++++++++++++ packages/index.js | 3 + packages/vant-css/src/express-way.css | 58 ++++++++ packages/vant-css/src/index.css | 1 + test/unit/specs/express-way.spec.js | 201 ++++++++++++++++++++++++++ 8 files changed, 535 insertions(+) create mode 100644 docs/examples-docs/express-way.md create mode 100644 packages/express-way/Option.vue create mode 100644 packages/express-way/index.vue create mode 100644 packages/vant-css/src/express-way.css create mode 100644 test/unit/specs/express-way.spec.js diff --git a/docs/examples-docs/express-way.md b/docs/examples-docs/express-way.md new file mode 100644 index 000000000..1aed0e45a --- /dev/null +++ b/docs/examples-docs/express-way.md @@ -0,0 +1,130 @@ +## ExpressWay 配送方式 + + + +### 使用指南 +``` javascript +import { ExpressWay } from 'vant'; + +Vue.component(ExpressWay.name, ExpressWay); +``` + +### 代码演示 + +#### 基础用法 + +:::demo 基础用法 +```html +