diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..d364d7a6f
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,28 @@
+{
+ "presets": [
+ ["env", {
+ "modules": false,
+ "targets": {
+ "browsers": [
+ "> 1%",
+ "last 2 versions",
+ "not ie <= 20",
+ "not ie_mob <= 100",
+ "not ff <= 100",
+ "not and_ff <= 100",
+ "not Edge <= 100",
+ "Android >= 4.0"
+ ]
+ }
+ }],
+ "stage-2"
+ ],
+ "plugins": ["transform-runtime", "add-module-exports", "transform-es2015-modules-umd"],
+ "comments": false,
+ "env": {
+ "test": {
+ "presets": ["env", "stage-2"],
+ "plugins": [ "istanbul" ]
+ }
+ }
+}
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..9d08a1a82
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000..34af3774f
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+build/*.js
+config/*.js
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..39d398645
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,24 @@
+module.exports = {
+ root: true,
+ parser: 'babel-eslint',
+ parserOptions: {
+ sourceType: 'module'
+ },
+ // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+ extends: 'standard',
+ // required to lint *.vue files
+ plugins: [
+ 'html'
+ ],
+ // add your custom rules here
+ 'rules': {
+ // allow paren-less arrow functions
+ 'arrow-parens': 0,
+ // allow async-await
+ 'generator-star-spacing': 0,
+ // allow debugger during development
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+ 'no-tabs': 0,
+ 'space-before-function-paren': 0
+ }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..55e4beac3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,9 @@
+.idea/
+.DS_Store
+node_modules/
+npm-debug.log
+deploy/
+test/unit/coverage
+test/e2e/reports
+selenium-debug.log
+yarn.lock
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 000000000..43c97e719
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 000000000..2ccb812d8
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,28 @@
+# Contribution Guideline
+
+Thanks for considering to contribute this project. All issues and pull requests are highly appreciated.
+
+## Pull Requests
+
+Before sending pull request to this project, please read and follow guidelines below.
+
+1. Branch: We only accept pull request on `dev` branch.
+2. Coding style: Follow the coding style used in cube-ui.
+3. Commit message: Use English and be aware of your spell.
+4. Test: Make sure to test your code.
+
+Add device mode, API version, related log, screenshots and other related information in your pull request if possible.
+
+NOTE: We assume all your contribution can be licensed under the [Apache License 2.0](https://github.com/didi/cube-ui/blob/master/LICENSE).
+
+## Issues
+
+We love clearly described issues. :)
+
+Following information can help us to resolve the issue faster.
+
+* Device mode and hardware information.
+* API version.
+* Logs.
+* Screenshots.
+* Steps to reproduce the issue.
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 000000000..148493e08
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,433 @@
+ Apache License
+
+ Version 2.0, January 2004
+
+ http://www.apache.org/licenses/
+
+
+
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+
+
+
+1. Definitions.
+
+
+
+
+ "License" shall mean the terms and conditions for use, reproduction,
+
+ and distribution as defined by Sections 1 through 9 of this document.
+
+
+
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+
+ the copyright owner that is granting the License.
+
+
+
+
+ "Legal Entity" shall mean the union of the acting entity and all
+
+ other entities that control, are controlled by, or are under common
+
+ control with that entity. For the purposes of this definition,
+
+ "control" means (i) the power, direct or indirect, to cause the
+
+ direction or management of such entity, whether by contract or
+
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+
+
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+
+ exercising permissions granted by this License.
+
+
+
+
+ "Source" form shall mean the preferred form for making modifications,
+
+ including but not limited to software source code, documentation
+
+ source, and configuration files.
+
+
+
+
+ "Object" form shall mean any form resulting from mechanical
+
+ transformation or translation of a Source form, including but
+
+ not limited to compiled object code, generated documentation,
+
+ and conversions to other media types.
+
+
+
+
+ "Work" shall mean the work of authorship, whether in Source or
+
+ Object form, made available under the License, as indicated by a
+
+ copyright notice that is included in or attached to the work
+
+ (an example is provided in the Appendix below).
+
+
+
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+
+ form, that is based on (or derived from) the Work and for which the
+
+ editorial revisions, annotations, elaborations, or other modifications
+
+ represent, as a whole, an original work of authorship. For the purposes
+
+ of this License, Derivative Works shall not include works that remain
+
+ separable from, or merely link (or bind by name) to the interfaces of,
+
+ the Work and Derivative Works thereof.
+
+
+
+
+ "Contribution" shall mean any work of authorship, including
+
+ the original version of the Work and any modifications or additions
+
+ to that Work or Derivative Works thereof, that is intentionally
+
+ submitted to Licensor for inclusion in the Work by the copyright owner
+
+ or by an individual or Legal Entity authorized to submit on behalf of
+
+ the copyright owner. For the purposes of this definition, "submitted"
+
+ means any form of electronic, verbal, or written communication sent
+
+ to the Licensor or its representatives, including but not limited to
+
+ communication on electronic mailing lists, source code control systems,
+
+ and issue tracking systems that are managed by, or on behalf of, the
+
+ Licensor for the purpose of discussing and improving the Work, but
+
+ excluding communication that is conspicuously marked or otherwise
+
+ designated in writing by the copyright owner as "Not a Contribution."
+
+
+
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+
+ on behalf of whom a Contribution has been received by Licensor and
+
+ subsequently incorporated within the Work.
+
+
+
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+
+ this License, each Contributor hereby grants to You a perpetual,
+
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+
+ copyright license to reproduce, prepare Derivative Works of,
+
+ publicly display, publicly perform, sublicense, and distribute the
+
+ Work and such Derivative Works in Source or Object form.
+
+
+
+
+3. Grant of Patent License. Subject to the terms and conditions of
+
+ this License, each Contributor hereby grants to You a perpetual,
+
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+
+ (except as stated in this section) patent license to make, have made,
+
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+
+ where such license applies only to those patent claims licensable
+
+ by such Contributor that are necessarily infringed by their
+
+ Contribution(s) alone or by combination of their Contribution(s)
+
+ with the Work to which such Contribution(s) was submitted. If You
+
+ institute patent litigation against any entity (including a
+
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+
+ or a Contribution incorporated within the Work constitutes direct
+
+ or contributory patent infringement, then any patent licenses
+
+ granted to You under this License for that Work shall terminate
+
+ as of the date such litigation is filed.
+
+
+
+
+4. Redistribution. You may reproduce and distribute copies of the
+
+ Work or Derivative Works thereof in any medium, with or without
+
+ modifications, and in Source or Object form, provided that You
+
+ meet the following conditions:
+
+
+
+
+ (a) You must give any other recipients of the Work or
+
+ Derivative Works a copy of this License; and
+
+
+
+
+ (b) You must cause any modified files to carry prominent notices
+
+ stating that You changed the files; and
+
+
+
+
+ (c) You must retain, in the Source form of any Derivative Works
+
+ that You distribute, all copyright, patent, trademark, and
+
+ attribution notices from the Source form of the Work,
+
+ excluding those notices that do not pertain to any part of
+
+ the Derivative Works; and
+
+
+
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+
+ distribution, then any Derivative Works that You distribute must
+
+ include a readable copy of the attribution notices contained
+
+ within such NOTICE file, excluding those notices that do not
+
+ pertain to any part of the Derivative Works, in at least one
+
+ of the following places: within a NOTICE text file distributed
+
+ as part of the Derivative Works; within the Source form or
+
+ documentation, if provided along with the Derivative Works; or,
+
+ within a display generated by the Derivative Works, if and
+
+ wherever such third-party notices normally appear. The contents
+
+ of the NOTICE file are for informational purposes only and
+
+ do not modify the License. You may add Your own attribution
+
+ notices within Derivative Works that You distribute, alongside
+
+ or as an addendum to the NOTICE text from the Work, provided
+
+ that such additional attribution notices cannot be construed
+
+ as modifying the License.
+
+
+
+
+ You may add Your own copyright statement to Your modifications and
+
+ may provide additional or different license terms and conditions
+
+ for use, reproduction, or distribution of Your modifications, or
+
+ for any such Derivative Works as a whole, provided Your use,
+
+ reproduction, and distribution of the Work otherwise complies with
+
+ the conditions stated in this License.
+
+
+
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+
+ any Contribution intentionally submitted for inclusion in the Work
+
+ by You to the Licensor shall be under the terms and conditions of
+
+ this License, without any additional terms or conditions.
+
+ Notwithstanding the above, nothing herein shall supersede or modify
+
+ the terms of any separate license agreement you may have executed
+
+ with Licensor regarding such Contributions.
+
+
+
+
+6. Trademarks. This License does not grant permission to use the trade
+
+ names, trademarks, service marks, or product names of the Licensor,
+
+ except as required for reasonable and customary use in describing the
+
+ origin of the Work and reproducing the content of the NOTICE file.
+
+
+
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+
+ agreed to in writing, Licensor provides the Work (and each
+
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+
+ implied, including, without limitation, any warranties or conditions
+
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+
+ appropriateness of using or redistributing the Work and assume any
+
+ risks associated with Your exercise of permissions under this License.
+
+
+
+
+8. Limitation of Liability. In no event and under no legal theory,
+
+ whether in tort (including negligence), contract, or otherwise,
+
+ unless required by applicable law (such as deliberate and grossly
+
+ negligent acts) or agreed to in writing, shall any Contributor be
+
+ liable to You for damages, including any direct, indirect, special,
+
+ incidental, or consequential damages of any character arising as a
+
+ result of this License or out of the use or inability to use the
+
+ Work (including but not limited to damages for loss of goodwill,
+
+ work stoppage, computer failure or malfunction, or any and all
+
+ other commercial damages or losses), even if such Contributor
+
+ has been advised of the possibility of such damages.
+
+
+
+
+9. Accepting Warranty or Additional Liability. While redistributing
+
+ the Work or Derivative Works thereof, You may choose to offer,
+
+ and charge a fee for, acceptance of support, warranty, indemnity,
+
+ or other liability obligations and/or rights consistent with this
+
+ License. However, in accepting such obligations, You may act only
+
+ on Your own behalf and on Your sole responsibility, not on behalf
+
+ of any other Contributor, and only if You agree to indemnify,
+
+ defend, and hold each Contributor harmless for any liability
+
+ incurred by, or claims asserted against, such Contributor by reason
+
+ of your accepting any such warranty or additional liability.
+
+
+
+
+END OF TERMS AND CONDITIONS
+
+
+
+
+APPENDIX: How to apply the Apache License to your work.
+
+
+
+
+ To apply the Apache License to your work, attach the following
+
+ boilerplate notice, with the fields enclosed by brackets "{}"
+
+ replaced with your own identifying information. (Don't include
+
+ the brackets!) The text should be enclosed in the appropriate
+
+ comment syntax for the file format. We also recommend that a
+
+ file or class name and description of purpose be included on the
+
+ same "printed page" as the copyright notice for easier
+
+ identification within third-party archives.
+
+
+
+
+Copyright (C) 2017 Beijing Didi Infinity Technology and Development Co.,Ltd. All rights reserved.
+
+
+
+
+Licensed under the Apache License, Version 2.0 (the "License");
+
+you may not use this file except in compliance with the License.
+
+You may obtain a copy of the License at
+
+
+
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+
+
+
+Unless required by applicable law or agreed to in writing, software
+
+distributed under the License is distributed on an "AS IS" BASIS,
+
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+
+See the License for the specific language governing permissions and
+
+limitations under the License.
diff --git a/README.md b/README.md
new file mode 100644
index 000000000..cb0619458
--- /dev/null
+++ b/README.md
@@ -0,0 +1,57 @@
+# cube-ui
+
+> A fantastic mobile ui lib implement by Vue.
+
+### Links
+
+- [Home](https://didi.github.io/cube-ui/)
+- [Docs](https://didi.github.io/cube-ui/#/en-US/docs)
+- [Example](https://didi.github.io/cube-ui/example/)
+
+
+
+### Install
+
+```shell
+npm install cube-ui --save
+```
+
+### Usage
+
+```js
+import Vue from 'vue'
+import Cube from 'cube-ui'
+
+Vue.use(Cube)
+```
+
+#### Use modularized cube-ui
+
+```js
+import Vue from 'vue'
+import { Button, ActionSheet } from 'cube-ui'
+
+Vue.use(Button)
+Vue.use(ActionSheet)
+```
+
+For more information, please refer to [Quick Start](https://didi.github.io/cube-ui/#/en-US/docs/quick-start)
+
+### ToDo
+
+- More components
+
+- Support theme
+
+### Development
+
+```shell
+git clone git@github.com:didi/cube-ui.git
+cd cube-ui
+npm install
+npm run dev
+```
+
+### Changelog
+
+Detailed changes for each release are documented in the [release notes](https://github.com/didi/cube-ui/releases).
diff --git a/README_zh-CN.md b/README_zh-CN.md
new file mode 100644
index 000000000..ad298472f
--- /dev/null
+++ b/README_zh-CN.md
@@ -0,0 +1,57 @@
+# cube-ui
+
+> A fantastic mobile ui lib implement by Vue.
+
+### 导航
+
+- [首页](https://didi.github.io/cube-ui/)
+- [文档](https://didi.github.io/cube-ui/#/zh-CN/docs)
+- [示例](https://didi.github.io/cube-ui/example/)
+
+
+
+### 安装
+
+```shell
+npm install cube-ui --save
+```
+
+### 使用
+
+```js
+import Vue from 'vue'
+import Cube from 'cube-ui'
+
+Vue.use(Cube)
+```
+
+#### 按需使用
+
+```js
+import Vue from 'vue'
+import { Button, ActionSheet } from 'cube-ui'
+
+Vue.use(Button)
+Vue.use(ActionSheet)
+```
+
+注：上述使用依赖插件 [babel-plugin-transform-modules](https://www.npmjs.com/package/babel-plugin-transform-modules)，详细内容请看 [开始文档](https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start)
+
+### ToDo
+
+- 更多组件
+
+- 主题支持
+
+### Development
+
+```shell
+git clone git@github.com:didi/cube-ui.git
+cd cube-ui
+npm install
+npm run dev
+```
+
+### Changelog
+
+详细日志请看[发布日志](https://github.com/didi/cube-ui/releases)。
diff --git a/assets/example-qr.png b/assets/example-qr.png
new file mode 100644
index 000000000..f5d179857
Binary files /dev/null and b/assets/example-qr.png differ
diff --git a/assets/icon.png b/assets/icon.png
new file mode 100644
index 000000000..98693c6e6
Binary files /dev/null and b/assets/icon.png differ
diff --git a/build/build.js b/build/build.js
new file mode 100644
index 000000000..f67dbbc2b
--- /dev/null
+++ b/build/build.js
@@ -0,0 +1,73 @@
+// https://github.com/shelljs/shelljs
+require('shelljs/global')
+var config = require('../config')
+if (!process.env.NODE_ENV) {
+ process.env.NODE_ENV = JSON.parse(config.build.env.NODE_ENV)
+}
+
+var path = require('path')
+var utils = require('./utils')
+var ora = require('ora')
+var webpack = require('webpack')
+var webpackConfig = require('./webpack.prod.conf')
+var webpackModulesConfig = require('./webpack.modules.conf')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
+rm('-rf', assetsPath)
+mkdir('-p', assetsPath)
+// cp('-R', 'static/*', assetsPath)
+
+function buildPack(webpackConfig, cb, spinnerText) {
+ var spinner = ora(spinnerText || 'building for uncompressed files...')
+ spinner.start()
+ webpack(webpackConfig, function (err, stats) {
+ spinner.stop()
+ if (err) {
+ throw err
+ }
+ process.stdout.write(stats.toString({
+ colors: true,
+ modules: false,
+ children: false,
+ chunks: false,
+ chunkModules: false
+ }) + '\n')
+ cb && cb()
+ })
+}
+
+buildPack(webpackConfig, function () {
+ webpackConfig.output.filename = utils.assetsPath('[name].min.js')
+ webpackConfig.output.chunkFilename = '[name].min.js'
+ webpackConfig.plugins.splice(2, 1, new ExtractTextPlugin(utils.assetsPath('[name].min.css')), new OptimizeCSSPlugin({
+ cssProcessorOptions: {
+ safe: true
+ }
+ }))
+ // add UglifyJsPlugin
+ webpackConfig.plugins.splice(2, 0, new webpack.optimize.UglifyJsPlugin({
+ compress: {
+ warnings: false
+ }
+ }))
+ buildPack(webpackConfig, function () {
+ buildPack(webpackModulesConfig, function () {
+ webpackModulesConfig.output.filename = utils.assetsPath('[name]/[name].min.js')
+ webpackModulesConfig.output.chunkFilename = '[name]/[name].min.js'
+ webpackModulesConfig.plugins.splice(2, 1, new ExtractTextPlugin(utils.assetsPath('[name]/[name].min.css')), new OptimizeCSSPlugin({
+ cssProcessorOptions: {
+ safe: true
+ }
+ }))
+ // 增加 UglifyJsPlugin
+ webpackModulesConfig.plugins.splice(2, 0, new webpack.optimize.UglifyJsPlugin({
+ compress: {
+ warnings: false
+ }
+ }))
+ buildPack(webpackModulesConfig, null, 'building for compressed component files...')
+ }, 'building for uncompressed component files...')
+ }, 'building for compressed files...')
+})
diff --git a/build/check-versions.js b/build/check-versions.js
new file mode 100644
index 000000000..afa8c6f16
--- /dev/null
+++ b/build/check-versions.js
@@ -0,0 +1,49 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+var shell = require('shelljs')
+function exec (cmd) {
+ return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+ {
+ name: 'node',
+ currentVersion: semver.clean(process.version),
+ versionRequirement: packageConfig.engines.node
+ },
+]
+
+if (shell.which('npm')) {
+ versionRequirements.push({
+ name: 'npm',
+ currentVersion: exec('npm --version'),
+ versionRequirement: packageConfig.engines.npm
+ })
+}
+
+module.exports = function () {
+ var warnings = []
+ var i
+ for (i = 0; i < versionRequirements.length; i++) {
+ var mod = versionRequirements[i]
+ if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+ warnings.push(mod.name + ': ' +
+ chalk.red(mod.currentVersion) + ' should be ' +
+ chalk.green(mod.versionRequirement)
+ )
+ }
+ }
+
+ if (warnings.length) {
+ console.log('')
+ console.log(chalk.yellow('To use this template, you must update following to modules:'))
+ console.log()
+ for (i = 0; i < warnings.length; i++) {
+ var warning = warnings[i]
+ console.log(' ' + warning)
+ }
+ console.log()
+ process.exit(1)
+ }
+}
diff --git a/build/dev-client.js b/build/dev-client.js
new file mode 100644
index 000000000..20e8cd692
--- /dev/null
+++ b/build/dev-client.js
@@ -0,0 +1,10 @@
+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+ if (event.action === 'reload') {
+ window.location.reload()
+ }
+})
+
diff --git a/build/dev-server.js b/build/dev-server.js
new file mode 100644
index 000000000..73a5b792d
--- /dev/null
+++ b/build/dev-server.js
@@ -0,0 +1,101 @@
+require('./check-versions')()
+
+var config = require('../config')
+if (!process.env.NODE_ENV) {
+ process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var opn = require('opn')
+var proxyMiddleware = require('http-proxy-middleware')
+var webpackConfig = require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable
+// automatically open browser, if not set will be false
+var autoOpenBrowser = !!config.dev.autoOpenBrowser
+
+var app = express()
+var compiler = webpack(webpackConfig)
+
+// var devMiddleware = require('webpack-dev-middleware')(compiler, {
+// publicPath: webpackConfig.output.publicPath,
+// stats: {
+// colors: true,
+// chunks: false
+// },
+// watchOptions: {
+// aggregateTimeout: 300,
+// poll: 1000
+// }
+// })
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+ publicPath: webpackConfig.output.publicPath,
+ quiet: true
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler, {
+ log: function () {}
+})
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+ compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+ hotMiddleware.publish({action: 'reload'})
+ cb()
+ })
+})
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+ var options = proxyTable[context]
+ if (typeof options === 'string') {
+ options = {target: options}
+ }
+ app.use(proxyMiddleware(context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+var uri = 'http://localhost:' + port
+
+var _resolve
+var readyPromise = new Promise(resolve => {
+ _resolve = resolve
+})
+
+console.log('> Starting dev server...')
+devMiddleware.waitUntilValid(() => {
+ console.log('> Listening at ' + uri + '\n')
+ // when env is testing, don't need open it
+ if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+ opn(uri)
+ }
+ _resolve()
+})
+
+var server = app.listen(port)
+
+module.exports = {
+ ready: readyPromise,
+ close: () => {
+ server.close()
+ }
+}
+
diff --git a/build/document/build.js b/build/document/build.js
new file mode 100644
index 000000000..fc6c42bc3
--- /dev/null
+++ b/build/document/build.js
@@ -0,0 +1,34 @@
+require('shelljs/global')
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for document production...')
+spinner.start()
+
+rm(path.join(config.docBuild.assetsRoot, config.docBuild.assetsSubDirectory), err => {
+ if (err) {
+ throw err
+ }
+ webpack(webpackConfig, function (err, stats) {
+ spinner.stop()
+ if (err) {
+ throw err
+ }
+ process.stdout.write(stats.toString({
+ colors: true,
+ modules: false,
+ children: false,
+ chunks: false,
+ chunkModules: false
+ }) + '\n\n')
+
+ console.log(chalk.cyan(' Document build complete.\n'))
+ })
+})
diff --git a/build/document/dev-server.js b/build/document/dev-server.js
new file mode 100644
index 000000000..3bf3eec08
--- /dev/null
+++ b/build/document/dev-server.js
@@ -0,0 +1,70 @@
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var config = require('../../config')
+var opn = require('opn')
+var proxyMiddleware = require('http-proxy-middleware')
+var webpackConfig = require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.docDev.port
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable
+
+var app = express()
+var compiler = webpack(webpackConfig)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+ publicPath: webpackConfig.output.publicPath,
+ stats: {
+ colors: true,
+ chunks: false
+ },
+ watchOptions: {
+ aggregateTimeout: 300,
+ poll: 1000
+ }
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler)
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+ compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+ hotMiddleware.publish({action: 'reload'})
+ cb()
+ })
+})
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+ var options = proxyTable[context]
+ if (typeof options === 'string') {
+ options = {target: options}
+ }
+ app.use(proxyMiddleware(context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+module.exports = app.listen(port, function (err) {
+ if (err) {
+ console.log(err)
+ return
+ }
+ var uri = 'http://localhost:' + port
+ console.log('Listening at ' + uri + '\n')
+ opn(uri)
+})
diff --git a/build/document/webpack.dev.conf.js b/build/document/webpack.dev.conf.js
new file mode 100644
index 000000000..49526ffb2
--- /dev/null
+++ b/build/document/webpack.dev.conf.js
@@ -0,0 +1,23 @@
+var config = require('../../config')
+var devWebpackConfig = require('../webpack.dev.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+var entry = config.docDev.entry
+// add hot-reload related code to entry chunks
+Object.keys(entry).forEach(function (name) {
+ entry[name] = ['./build/dev-client'].concat(entry[name])
+})
+
+var docDevWebpackConfig = Object.assign({}, devWebpackConfig)
+var index = docDevWebpackConfig.plugins.findIndex(function (plugin) {
+ return plugin instanceof HtmlWebpackPlugin
+})
+docDevWebpackConfig.plugins.splice(index, 1, new HtmlWebpackPlugin({
+ filename: 'index.html',
+ template: config.docDev.template,
+ inject: true
+}))
+
+docDevWebpackConfig.entry = entry
+
+module.exports = docDevWebpackConfig
diff --git a/build/document/webpack.prod.conf.js b/build/document/webpack.prod.conf.js
new file mode 100644
index 000000000..fa080f0b2
--- /dev/null
+++ b/build/document/webpack.prod.conf.js
@@ -0,0 +1,104 @@
+var path = require('path')
+var config = require('../../config')
+var utils = require('../utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('../webpack.base.conf')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+var webpackConfig = merge(baseWebpackConfig, {
+ entry: {
+ app: './document/main.js'
+ },
+ module: {
+ rules: utils.styleLoaders({
+ sourceMap: config.docBuild.productionSourceMap,
+ extract: true
+ })
+ },
+ devtool: config.docBuild.productionSourceMap ? '#source-map' : false,
+ output: {
+ path: config.docBuild.assetsRoot,
+ publicPath: '/cube-ui/',
+ filename: utils.assetsPath('js/[name].[chunkhash].js'),
+ chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+ },
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env': config.docBuild.env
+ }),
+ new webpack.optimize.UglifyJsPlugin({
+ compress: {
+ warnings: false
+ }
+ }),
+ // extract css into its own file
+ new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
+ // Compress extracted CSS. We are using this plugin so that possible
+ // duplicated CSS from different components can be deduped.
+ new OptimizeCSSPlugin({
+ cssProcessorOptions: {
+ safe: true
+ }
+ }),
+ // generate dist index.html with correct asset hash for caching.
+ // you can customize output by editing /index.html
+ // see https://github.com/ampedandwired/html-webpack-plugin
+ new HtmlWebpackPlugin({
+ filename: config.docBuild.index,
+ template: 'document/index.html',
+ inject: true,
+ minify: {
+ removeComments: true,
+ collapseWhitespace: true,
+ removeAttributeQuotes: true
+ // more options:
+ // https://github.com/kangax/html-minifier#options-quick-reference
+ },
+ // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+ chunksSortMode: 'dependency'
+ }),
+ // split vendor js into its own file
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'vendor',
+ minChunks: function (module) {
+ // any required modules inside node_modules are extracted to vendor
+ return (
+ module.resource &&
+ /\.js$/.test(module.resource) &&
+ module.resource.indexOf(
+ path.join(__dirname, '../../node_modules')
+ ) === 0
+ )
+ }
+ }),
+ // extract webpack runtime and module manifest to its own file in order to
+ // prevent vendor hash from being updated whenever app bundle is updated
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'manifest',
+ chunks: ['vendor']
+ })
+ ]
+})
+
+if (config.build.productionGzip) {
+ var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+ webpackConfig.plugins.push(
+ new CompressionWebpackPlugin({
+ asset: '[path].gz[query]',
+ algorithm: 'gzip',
+ test: new RegExp(
+ '\\.(' +
+ config.build.productionGzipExtensions.join('|') +
+ ')$'
+ ),
+ threshold: 10240,
+ minRatio: 0.8
+ })
+ )
+}
+
+module.exports = webpackConfig
diff --git a/build/example/build.js b/build/example/build.js
new file mode 100644
index 000000000..73734b88f
--- /dev/null
+++ b/build/example/build.js
@@ -0,0 +1,34 @@
+require('shelljs/global')
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for example production...')
+spinner.start()
+
+rm(path.join(config.demoBuild.assetsRoot, config.demoBuild.assetsSubDirectory), err => {
+ if (err) {
+ throw err
+ }
+ webpack(webpackConfig, function (err, stats) {
+ spinner.stop()
+ if (err) {
+ throw err
+ }
+ process.stdout.write(stats.toString({
+ colors: true,
+ modules: false,
+ children: false,
+ chunks: false,
+ chunkModules: false
+ }) + '\n\n')
+
+ console.log(chalk.cyan(' Example build complete.\n'))
+ })
+})
diff --git a/build/example/webpack.prod.conf.js b/build/example/webpack.prod.conf.js
new file mode 100644
index 000000000..6cccb4b9f
--- /dev/null
+++ b/build/example/webpack.prod.conf.js
@@ -0,0 +1,33 @@
+var config = require('../../config')
+var utils = require('../utils')
+var docProdWebpackConfig = require('../document/webpack.prod.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+var webpackConfig = Object.assign({}, docProdWebpackConfig, {
+ entry: config.demoBuild.entry,
+ output: {
+ path: config.demoBuild.assetsRoot,
+ filename: utils.assetsPath('js/[name].[chunkhash].js'),
+ chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+ }
+})
+
+var index = webpackConfig.plugins.findIndex(function (plugin) {
+ return plugin instanceof HtmlWebpackPlugin
+})
+webpackConfig.plugins.splice(index, 1, new HtmlWebpackPlugin({
+ filename: 'index.html',
+ template: 'example/index.html',
+ inject: true,
+ minify: {
+ removeComments: true,
+ collapseWhitespace: true,
+ removeAttributeQuotes: true
+ // more options:
+ // https://github.com/kangax/html-minifier#options-quick-reference
+ },
+ // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+ chunksSortMode: 'dependency'
+}))
+
+module.exports = webpackConfig
diff --git a/build/release/docs.sh b/build/release/docs.sh
new file mode 100644
index 000000000..4e9b02f97
--- /dev/null
+++ b/build/release/docs.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# git pull
+git pull origin master
+# build
+npm run doc-demo-build
+# ADD commit
+git add docs/
+git commit -m 'docs build'
+git push origin master
diff --git a/build/release/publish.sh b/build/release/publish.sh
new file mode 100644
index 000000000..eca7bfff3
--- /dev/null
+++ b/build/release/publish.sh
@@ -0,0 +1,16 @@
+#!/bin/bash
+
+# git pull
+git pull origin master
+# build
+npm run build
+# ADD commit
+git add -A
+git commit -m 'publish build'
+git push origin master
+# replace src/ __VERSION__
+node ./build/release/replace-version.js
+# publish
+npm publish
+# checkout src/index.js
+git checkout src/index.js
diff --git a/build/release/replace-version.js b/build/release/replace-version.js
new file mode 100644
index 000000000..314cb2ab4
--- /dev/null
+++ b/build/release/replace-version.js
@@ -0,0 +1,11 @@
+var fs = require('fs')
+var path = require('path')
+var pkg = require('../../package.json')
+var version = pkg.version
+
+var mainPath = path.resolve(__dirname, '../../src/index.js')
+var content = fs.readFileSync(mainPath).toString()
+
+content = content.replace('__VERSION__', '\'' + version + '\'')
+
+fs.writeFileSync(mainPath, content)
diff --git a/build/utils.js b/build/utils.js
new file mode 100644
index 000000000..1554cf683
--- /dev/null
+++ b/build/utils.js
@@ -0,0 +1,82 @@
+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var postcssConfig = require('../postcss.config.js')
+
+exports.assetsPath = function (_path) {
+ var assetsSubDirectory = process.env.NODE_ENV === 'production'
+ ? config.build.assetsSubDirectory
+ : config.dev.assetsSubDirectory
+ return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+ options = options || {}
+
+ var cssLoader = {
+ loader: 'css-loader',
+ options: {
+ minimize: process.env.NODE_ENV === 'production',
+ sourceMap: options.sourceMap
+ }
+ }
+ var postcssLoader = {
+ loader: 'postcss-loader',
+ options: {
+ sourceMap: options.sourceMap,
+ plugins: () => postcssConfig.plugins
+ }
+ }
+
+ // generate loader string to be used with extract text plugin
+ function generateLoaders(loader, loaderOptions) {
+ var loaders = [cssLoader, postcssLoader]
+ if (loader) {
+ loaders.push({
+ loader: loader + '-loader',
+ options: Object.assign({}, loaderOptions, {
+ sourceMap: options.sourceMap
+ })
+ })
+ }
+
+ // Extract CSS when that option is specified
+ // (which is the case during production build)
+ if (options.extract) {
+ return ExtractTextPlugin.extract({
+ use: loaders,
+ fallback: 'vue-style-loader'
+ })
+ } else {
+ return ['vue-style-loader'].concat(loaders)
+ }
+ }
+
+ var stylusOptions = {
+ 'resolve url': true
+ }
+ // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+ return {
+ css: generateLoaders(),
+ postcss: generateLoaders(),
+ less: generateLoaders('less'),
+ sass: generateLoaders('sass', {indentedSyntax: true}),
+ scss: generateLoaders('sass'),
+ stylus: generateLoaders('stylus', stylusOptions),
+ styl: generateLoaders('stylus', stylusOptions)
+ }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+ var output = []
+ var loaders = exports.cssLoaders(options)
+ for (var extension in loaders) {
+ var loader = loaders[extension]
+ output.push({
+ test: new RegExp('\\.' + extension + '$'),
+ use: loader
+ })
+ }
+ return output
+}
diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js
new file mode 100644
index 000000000..8a346d522
--- /dev/null
+++ b/build/vue-loader.conf.js
@@ -0,0 +1,18 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+ loaders: utils.cssLoaders({
+ sourceMap: isProduction
+ ? config.build.productionSourceMap
+ : config.dev.cssSourceMap,
+ extract: isProduction
+ }),
+ transformToRequire: {
+ video: 'src',
+ source: 'src',
+ img: 'src',
+ image: 'xlink:href'
+ }
+}
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
new file mode 100644
index 000000000..ddd51452f
--- /dev/null
+++ b/build/webpack.base.conf.js
@@ -0,0 +1,79 @@
+var path = require('path')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+var utils = require('./utils')
+var webpack = require('webpack')
+var version = require('../package.json').version
+
+function resolve (dir) {
+ return path.join(__dirname, '..', dir)
+}
+
+const srcAndExampleAndTestAndDocument = [resolve('src'), resolve('example'), resolve('test'), resolve('document')]
+
+module.exports = {
+ output: {
+ path: config.build.assetsRoot,
+ publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
+ filename: '[name].js',
+ chunkFilename: '[name].js'
+ },
+ resolve: {
+ extensions: ['.js', '.vue', '.json'],
+ alias: {
+ 'vue2': 'vue/dist/vue.esm.js',
+ '@': resolve('src')
+ }
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(js|vue)$/,
+ loader: 'eslint-loader',
+ enforce: 'pre',
+ include: srcAndExampleAndTestAndDocument,
+ options: {
+ formatter: require('eslint-friendly-formatter')
+ }
+ },
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: vueLoaderConfig
+ },
+ {
+ test: /\.js$/,
+ loader: 'babel-loader',
+ include: srcAndExampleAndTestAndDocument
+ },
+ {
+ test: /\.(png|jpe?g|gif)(\?.*)?$/,
+ loader: 'url-loader',
+ include: srcAndExampleAndTestAndDocument,
+ options: {
+ limit: 10000,
+ name: utils.assetsPath('img/[name].[hash:7].[ext]')
+ }
+ },
+ {
+ test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
+ loader: 'url-loader',
+ include: srcAndExampleAndTestAndDocument,
+ options: {
+ limit: 10000,
+ name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+ }
+ },
+ {
+ test: /\.md$/,
+ include: resolve('document'),
+ loader: 'vue-markdown-loader'
+ }
+ ]
+ },
+ plugins: [
+ new webpack.DefinePlugin({
+ __VERSION__: JSON.stringify(version)
+ })
+ ]
+}
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
new file mode 100644
index 000000000..1424544a8
--- /dev/null
+++ b/build/webpack.dev.conf.js
@@ -0,0 +1,39 @@
+var config = require('../config')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var utils = require('./utils')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+var entry = {
+ app: './example/main.js'
+}
+// add hot-reload related code to entry chunks
+Object.keys(entry).forEach(function (name) {
+ entry[name] = ['./build/dev-client'].concat(entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+ entry: entry,
+ module: {
+ rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+ },
+ // eval-source-map is faster for development
+ devtool: '#cheap-module-eval-source-map',
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env': config.dev.env
+ }),
+ // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+ new webpack.HotModuleReplacementPlugin(),
+ new webpack.NoEmitOnErrorsPlugin(),
+ // https://github.com/ampedandwired/html-webpack-plugin
+ new HtmlWebpackPlugin({
+ filename: 'index.html',
+ template: './example/index.html',
+ inject: true
+ }),
+ new FriendlyErrorsPlugin()
+ ]
+})
diff --git a/build/webpack.modules.conf.js b/build/webpack.modules.conf.js
new file mode 100644
index 000000000..fc50cdebc
--- /dev/null
+++ b/build/webpack.modules.conf.js
@@ -0,0 +1,48 @@
+var path = require('path')
+var fs = require('fs')
+var config = require('../config')
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var env = process.env.NODE_ENV === 'testing'
+ ? require('../config/test.env')
+ : config.build.env
+
+var modules = {}
+var cPath = path.join(__dirname, '../src/modules')
+var files = fs.readdirSync(cPath)
+if (files) {
+ files.forEach(function (name) {
+ var p = path.join(cPath, name)
+ if (fs.statSync(p).isDirectory()) {
+ modules[name] = p
+ }
+ })
+}
+
+var webpackConfig = merge(baseWebpackConfig, {
+ entry: modules,
+ module: {
+ rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
+ },
+ devtool: config.build.productionSourceMap ? '#source-map' : false,
+ output: {
+ path: config.build.assetsRoot,
+ filename: utils.assetsPath('[name]/index.js'),
+ library: 'cube',
+ libraryTarget: 'commonjs2'
+ },
+ plugins: [
+ // http://vuejs.github.io/vue-loader/workflow/production.html
+ new webpack.DefinePlugin({
+ 'process.env': env
+ }),
+ // extract css into its own file
+ new ExtractTextPlugin(utils.assetsPath('[name]/style.css'))
+ ]
+})
+
+module.exports = webpackConfig
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
new file mode 100644
index 000000000..2821537af
--- /dev/null
+++ b/build/webpack.prod.conf.js
@@ -0,0 +1,47 @@
+var path = require('path')
+var config = require('../config')
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+var env = process.env.NODE_ENV === 'testing'
+ ? require('../config/test.env')
+ : config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+ entry: {
+ cube: './src/index.js'
+ },
+ module: {
+ rules: utils.styleLoaders({
+ sourceMap: config.build.productionSourceMap,
+ extract: true
+ })
+ },
+ devtool: config.build.productionSourceMap ? '#source-map' : false,
+ output: {
+ path: config.build.assetsRoot,
+ filename: utils.assetsPath('index.js'),
+ library: 'cube',
+ libraryTarget: 'umd'
+ },
+ plugins: [
+ // http://vuejs.github.io/vue-loader/workflow/production.html
+ new webpack.DefinePlugin({
+ 'process.env': env
+ }),
+ // extract css into its own file
+ new ExtractTextPlugin(utils.assetsPath('style.css'))
+ ]
+})
+
+if (config.build.bundleAnalyzerReport) {
+ var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+ webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig
diff --git a/build/webpack.test.conf.js b/build/webpack.test.conf.js
new file mode 100644
index 000000000..8aa60af81
--- /dev/null
+++ b/build/webpack.test.conf.js
@@ -0,0 +1,23 @@
+// This is the webpack config used for unit tests.
+
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseConfig = require('./webpack.base.conf')
+
+var webpackConfig = merge(baseConfig, {
+ // use inline sourcemap for karma-sourcemap-loader
+ module: {
+ rules: utils.styleLoaders({
+ sourceMap: true
+ })
+ },
+ devtool: '#inline-source-map',
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env': require('../config/test.env')
+ })
+ ]
+})
+
+module.exports = webpackConfig
diff --git a/config/dev.env.js b/config/dev.env.js
new file mode 100644
index 000000000..efead7c84
--- /dev/null
+++ b/config/dev.env.js
@@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+ NODE_ENV: '"development"'
+})
diff --git a/config/index.js b/config/index.js
new file mode 100644
index 000000000..1543b1eeb
--- /dev/null
+++ b/config/index.js
@@ -0,0 +1,56 @@
+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+ build: {
+ env: require('./prod.env'),
+ assetsRoot: path.resolve(__dirname, '../lib'),
+ assetsSubDirectory: '',
+ assetsPublicPath: './',
+ productionSourceMap: false,
+ // Gzip off by default as many popular static hosts such as
+ // Surge or Netlify already gzip all static assets for you.
+ // Before setting to `true`, make sure to:
+ // npm install --save-dev compression-webpack-plugin
+ productionGzip: false,
+ productionGzipExtensions: ['js', 'css'],
+ // Set to `true` or `false` to always turn it on or off
+ bundleAnalyzerReport: process.env.npm_config_report
+ },
+ dev: {
+ env: require('./dev.env'),
+ port: 8081,
+ autoOpenBrowser: true,
+ assetsSubDirectory: '',
+ assetsPublicPath: '/',
+ proxyTable: {},
+ // CSS Sourcemaps off by default because relative paths are "buggy"
+ // with this option, according to the CSS-Loader README
+ // (https://github.com/webpack/css-loader#sourcemaps)
+ // In our experience, they generally work as expected,
+ // just be aware of this issue when enabling this option.
+ cssSourceMap: false
+ },
+ docBuild: {
+ env: require('./prod.env'),
+ index: path.resolve(__dirname, '../docs/index.html'),
+ assetsRoot: path.resolve(__dirname, '../docs'),
+ assetsSubDirectory: '',
+ productionSourceMap: false
+ },
+ docDev: {
+ env: require('./dev.env'),
+ entry: {
+ document: './document/main.js'
+ },
+ template: './document/index.html',
+ port: 8082,
+ },
+ demoBuild: {
+ entry: {
+ app: './example/main.js'
+ },
+ assetsRoot: path.resolve(__dirname, '../docs/example'),
+ assetsSubDirectory: ''
+ }
+}
diff --git a/config/prod.env.js b/config/prod.env.js
new file mode 100644
index 000000000..773d263d3
--- /dev/null
+++ b/config/prod.env.js
@@ -0,0 +1,3 @@
+module.exports = {
+ NODE_ENV: '"production"'
+}
diff --git a/config/test.env.js b/config/test.env.js
new file mode 100644
index 000000000..89f90deb2
--- /dev/null
+++ b/config/test.env.js
@@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+ NODE_ENV: '"testing"'
+})
diff --git a/document/App.vue b/document/App.vue
new file mode 100644
index 000000000..cd7059e9e
--- /dev/null
+++ b/document/App.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+```
+
+### 示例
+
+```html
+
+
+
+
+
+
+
+
+```
+
+### Props参数配置
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ------------- |:-------------:| ---| ---|
+| data | 需要展示的数据 | Array | [ ] |
+| active | 高亮的选项 | Number | -1 |
+| title | 组件的标题 | String | - |
+| pickerStyle | 样式类型是否为picker型 | Boolean | false |
+
+此外，在传入的`data`数组中，每一项为一个`object`，其中可配置的字段如下:
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------------- |:-------------:| -----:| ---| ---|
+| content | 展示的文案内容 | String | 纯文本/html文本 | - |
+| align | 展示的文案对齐的方式 | String | left/center/right | center |
+| class | 展示文案添加的class属性，用来单独定义样式 | String | - |
+
+### Event事件
+
+| 参数 | 说明 | 参数1 | 参数2 |
+| ------------- |:-------------:| --- | --- |
+| cancel | 点击取消按钮向父组件传递的事件，同时action-sheet消失 | - | - |
+| select | 点击action-sheet某项后向父组件传递的事件，同时action-sheet消失 | 选中项 | 选中项的索引值 |
+
diff --git a/document/components/docs/en-US/better-scroll.md b/document/components/docs/en-US/better-scroll.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/document/components/docs/en-US/button.md b/document/components/docs/en-US/button.md
new file mode 100644
index 000000000..e46ddb294
--- /dev/null
+++ b/document/components/docs/en-US/button.md
@@ -0,0 +1,61 @@
+## Button
+
+`Button` provides various types, styles, states and icons.
+
+### Example
+
+- Button type
+
+The default type is `button`, and you can set that to `submit` in form.
+
+```html
+Button
+Submit Button
+```
+
+- Button state
+
+Default is normal, can be set to active or disabled state.
+
+```html
+Active Button
+Disabled Button
+```
+
+- Icon
+
+You can set the class of `icon`.
+
+```html
+Button With Icon
+```
+
+- Style
+
+You can set attributes like `light`, `inline`, `outline`, and `primary` to change the button's style.
+
+```html
+Light Button
+Inline Button
+Outline Button
+Primary Button
+```
+
+### Props configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| type | Button type | String | button/submit | button |
+| active | active state | Boolean | true/false | false |
+| disabled | disabled state | Boolean | true/false | false |
+| icon | Icon | String | the class of icon | - |
+| light | light style | Boolean | true/false | false |
+| inline | whether inline | Boolean | true/false | false |
+| outline | outline style | Boolean | true/false | false |
+| primary | primary style | Boolean | true/false | false |
+
+### Events
+
+| Event Name | Description | Parameters |
+| - | - | - |
+| click | triggers when the button is clicked. If in disabled state, then it won't trigger | e - event target |
diff --git a/document/components/docs/en-US/checkbox-group.md b/document/components/docs/en-US/checkbox-group.md
new file mode 100644
index 000000000..33cfdda5a
--- /dev/null
+++ b/document/components/docs/en-US/checkbox-group.md
@@ -0,0 +1,54 @@
+## CheckboxGroup
+
+`CheckboxGroup` is a group of checkboxs, which is used to select a group of options. It has vertical and horizontal styles.
+
+### Example
+
+- Vertical order
+
+Default is vertical order style.
+
+```html
+
+
+ Checkbox 1
+
+
+ Checkbox 2
+
+
+ Disabled Checkbox
+
+
+ Disabled & Checked Checkbox
+
+
+```
+
+
+The value of `checkList` is an array, which represents the set of the values of `label` in selected checkboxs.
+
+- Horizontal order
+
+You can set `horizontal` to change the style to horizontal order.
+
+```html
+
+ 1
+ 2
+ 3
+ 4
+
+```
+
+### Props configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| horizontal | whether in horizontal order | Boolean | true/false | false |
+
+### Events
+
+| Event Name | Description | Parameters |
+| - | - | - |
+| input | triggers when the selecting state in the group changes | the set of values of selected checkboxs, which type is Array |
diff --git a/document/components/docs/en-US/checkbox.md b/document/components/docs/en-US/checkbox.md
new file mode 100644
index 000000000..8ef5af369
--- /dev/null
+++ b/document/components/docs/en-US/checkbox.md
@@ -0,0 +1,60 @@
+## Checkbox
+
+`Checkbox` component. You can set the state, pass on special class and set the position of the checkbox's icon.
+
+### Example
+
+- Basic usage
+
+```html
+
+ Checkbox
+
+```
+
+If selected, the value of `checked` is `true`.
+
+- Disabled state
+
+```html
+
+ Disabled Checkbox
+
+```
+
+Set `disabled` to `true` to turn into the disabled state.
+
+- Position of the checkbox icon
+
+```html
+
+ Position Checkbox
+
+```
+
+If setting `position` to `'right'`, the position of the checkbox's icon is on the right.
+
+- Change the value of model
+
+```html
+
+ Set label Checkbox
+
+```
+
+If `label` is setted, and when the checkbox is selected, the value of `checked` is `'labelValue'`. When not selected, the value is `false`; Therefore, in circumstances of single checkbox, better not set `label`.
+
+### Props configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| disabled | whether disabled | Boolean | true/false | false |
+| position | position | String | left/right | left |
+| label | if selected, then map the value to v-model | Boolean/String | - | '' |
+
+### Events
+
+| Event Name | Description | Parameters |
+| - | - | - |
+| input | triggers when the selecting state changes | the value of label if setted or boolean value which represents whether selected |
+
diff --git a/document/components/docs/en-US/create-api.md b/document/components/docs/en-US/create-api.md
new file mode 100644
index 000000000..06860ec09
--- /dev/null
+++ b/document/components/docs/en-US/create-api.md
@@ -0,0 +1,3 @@
+## create-api module
+
+This module exports a function called `createAPI` with which you can invoke the custom component which has been instantiated in the api form.
\ No newline at end of file
diff --git a/document/components/docs/en-US/dialog.md b/document/components/docs/en-US/dialog.md
new file mode 100644
index 000000000..508d23a52
--- /dev/null
+++ b/document/components/docs/en-US/dialog.md
@@ -0,0 +1,121 @@
+## Dialog
+
+`Dialog`模态框组件，提供了多种样式及交互形式。
+
+### 单独引入
+
+```javascript
+ import { Dialog } from 'cube-ui'
+
+ export default {
+ components: {
+ CubeDialog: Dialog
+ }
+ }
+```
+
+### 调用方式
+
+通过在`dialog`组件上添加`ref`属性，获得对于组件的引用，然后调用`dialog`组件向外暴露出来的`show`，`hide`方法来控制组件的显示或消失:
+
+```html
+
+
+
+ 拉起dialog
+
+
+
+
+```
+
+
+### 示例：确认框
+
+```html
+
+
+
+
+
+
+
+```
+
+### Props参数配置
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------------- |:-------------:| -----:| ---| ---|
+| type | dialog类型 | String | alert(只有1个按钮)/confirm(2个按钮) | alert |
+| icon | icon | String | [参照icon列表](http://localhost:8083/#/icon) | - |
+| title | 标题 | String | - | - |
+| txt | 正文 | String | - | - |
+| show-close | 是否显示关闭按钮 | Boolean | true/false | false |
+| check | 是否带checkbox | Object | - | - |
+| actions | 平级操作 | Array | - | [ ] |
+| txts | 正文为列表形式 | Array | - | [ ] |
+| link | 文字链接 | String | - | - |
+| cancel-btn-content | 取消按钮文案 | String | - | - |
+| confirm-btn-content | 确认按钮文案 | String | - | - |
+| cancel-btn-href | 取消按钮跳转链接 | String | - | - |
+| confirm-btn-href | 确认按钮跳转链接 | String | - | - |
+| is-cancel-btn-active | 取消按钮是否高亮 | Boolean | true/false | false |
+| is-confirm-btn-active | 确认按钮是否高亮 | Boolean | true/false | true |
+
+其中`check`可配置的属性有:
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------------- |:-------------:| -----| ---| ---|
+| txt | checkbox提示的文案 | String | - | - |
+| value | 是否被选中 | Boolean | true/false | false |
+
+`actions`可配置的属性有:
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------------- |:-------------:| -----| ---| ---|
+| text | 显示的文案 | String | - | - |
+| active | 是否高亮 | Boolean | true/false | false |
+| href | a标签的href属性 | String | - | - |
+
+
+
+
+### Event事件
+
+| 事件名 | 说明 | 参数1 | 参数2 |
+| ----- | ---- | ----| ---- |
+| confirm | 点击确认按钮后触发 | e (event事件对象) | - |
+| cancel | 点击取消按钮后触发 | e (event事件对象) | - |
+| close | 点击关闭按钮后触发 | e (event事件对象) | - |
+| link-click | 点击文字链接后触发 | e (event事件对象) | - |
+| btn-click | 点击actions中配置的按钮后触发 | 被点击的action | e (event事件对象) |
diff --git a/document/components/docs/en-US/index-list.md b/document/components/docs/en-US/index-list.md
new file mode 100644
index 000000000..9b8cae6e3
--- /dev/null
+++ b/document/components/docs/en-US/index-list.md
@@ -0,0 +1,177 @@
+## IndexList组件
+
+`IndexList`基于`better-scroll`进行封装。提供了城市列表索引的功能。
+
+### 单独引入
+
+```javascript
+ import { IndexList } from 'cube-ui'
+
+ export default {
+ components: {
+ CubeListview: IndexList
+ }
+ }
+```
+
+### 示例
+
+```html
+
+
+
+
+
+```
+
+## API
+
+### Props参数配置
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ------------- |:-------------:|---| ---| --- |
+| title | 标题 | String | - |
+| data | 需要展示的数据 | Array | [] |
+
+### Event事件
+
+| 事件名 | 说明 | 参数 |
+| ----- | ---- | ----|
+| select | 选中index-list的某一项后触发 | 被选中的选项 |
+| title-click | 点击title后触发(title必须设置后才有效) | title值 |
diff --git a/document/components/docs/en-US/install.md b/document/components/docs/en-US/install.md
new file mode 100644
index 000000000..517808bb9
--- /dev/null
+++ b/document/components/docs/en-US/install.md
@@ -0,0 +1,24 @@
+## 安装
+
+
+### NPM
+
+推荐使用 NPM 安装`cube-ui`
+
+```shell
+$ npm install cube-ui
+```
+
+
+### CDN
+
+也可通过 unpkg.com 获取资源，用标签引入 js 和 css 文件使用。
+
+```html
+
+
+```
+
+### 版本日志
+
+版本的更新日志见 [GitHub](https://github.com/didi/cube-ui/releases)
diff --git a/document/components/docs/en-US/introduction.md b/document/components/docs/en-US/introduction.md
new file mode 100644
index 000000000..5045ad7aa
--- /dev/null
+++ b/document/components/docs/en-US/introduction.md
@@ -0,0 +1,111 @@
+## Introduction
+
+cube-ui is an elegant mobile component library based on Vue.js.
+
+### Features
+
+- Extracted from Didi interior component library and has been put to business test for more than one year
+- Every component has full unit tests to provide assurance for continuous integration
+- Pursue the perfection of the interactive experience, which makes cube-ui close to native components
+- Support post-compile and importing on demand, lightweight and flexible
+
+### Components
+
+#### Basic
+
+- [Button](#/en-US/docs/button)
+- [Checkbox](#/en-US/docs/checkbox)
+- [CheckboxGroup](#/en-US/docs/checkbox-group)
+- [Loading](#/en-US/docs/loading)
+- [Tip](#/en-US/docs/tip)
+
+#### Layer
+
+- [Toast](#/en-US/docs/toast)
+- [Picker](#/en-US/docs/picker)
+- [TimePicker](#/en-US/docs/time-picker)
+- [Dialog](#/en-US/docs/dialog)
+- [ActionSheet](#/en-US/docs/action-sheet)
+
+All the layer components can be invoked by components and API, let's take `Toast` as an example:
+
+Component invoking:
+
+```html
+
+ show toast
+
+
+
+```
+
+API invoking：
+
+```html
+
+ show toast
+
+
+```
+Both are pretty good but we recommend the latter, namely using `$createXxYy` API to invoke; By API invoking, the popup layer is attached to `body` element whose advantage is that it wouldn't be affected by outer styles. If using component invoking, it's fairly easy to be affected by outer styles like `transform`, `overflow`, etc.
+
+Pay attention that the name of the API is `$create` + `${component name}`. For example, the API of `ActionSheet` component is `$createActionSheet`.
+
+#### Scroll
+
+- [Scroll](#/en-US/docs/scroll)
+- [Slide](#/en-US/docs/slide)
+- [IndexList](#/en-US/docs/index-list)
+
+Scroll Components are all implemented based on [better-scroll](https://github.com/ustbhuangyi/better-scroll) and `Scroll` Component is the encapsulation of better-scroll.
+
+### Modules
+
+cube-ui has some special modules besides components.
+
+#### style
+The style module.
+If you are under the circumstance of importing components on demand, then it is recommended to import this module in entry file because it contains basic reset, basic common styles and built-in icons.
+
+For details, see [style module](#/en-US/docs/style).
+
+#### create-api
+
+Sometimes, developers may need to let their own encapsulated components support API invoking as well. At this time they can import create-api module or use the global interface `Cube.createAPI` to achieve the purpose.
+
+
+For details, see [create-api module](#/en-US/docs/create-api)。
+
+#### better-scroll
+
+[better-scroll](https://github.com/ustbhuangyi/better-scroll) is a library in `cube-ui`'s dependencies. To avoid duplicately importing, we expose the module.
+
+For more detailed use, please refer to [official documentation](https://ustbhuangyi.github.io/better-scroll/#/zh)。
diff --git a/document/components/docs/en-US/loading.md b/document/components/docs/en-US/loading.md
new file mode 100644
index 000000000..d2ccf6b48
--- /dev/null
+++ b/document/components/docs/en-US/loading.md
@@ -0,0 +1,21 @@
+## Loading
+
+`Loading` provides loading animation which can has custom size.
+
+### Example
+
+- The size of icon
+
+Default is `24px` and can be configured by setting `size`.
+
+```html
+
+
+
+```
+
+### Props configuration
+
+| Attribute | Description | Type | Default |
+| - | - | - | - |
+| size | the size of loading icon, unit px | Number | 24 |
diff --git a/document/components/docs/en-US/picker.md b/document/components/docs/en-US/picker.md
new file mode 100644
index 000000000..8a0015e2e
--- /dev/null
+++ b/document/components/docs/en-US/picker.md
@@ -0,0 +1,186 @@
+## Picker组件
+
+`Picker`组件支持多列选择器及数据联动。
+
+### 单独引入
+
+```javascript
+ import { Picker } from 'cube-ui'
+
+ export default {
+ components: {
+ CubePicker: Picker
+ }
+ }
+```
+
+### 调用方式
+
+通过在`picker`组件上添加`ref`属性，获得对于组件的引用，然后调用`picker`组件向外暴露出来的`show`，`hide`方法来控制组件的显示或消失，`show`能接受回调函数:
+
+```html
+
+
+
+
+
+
+```
+
+### API
+
+#### Props参数配置
+
+| 参数 | 说明 | 类型 | 默认值 | 示例 |
+| ----- |----------| -----|---| --- |
+| title | 标题 | String | '' | - |
+| data | 传入picker数据，数组的长度决定了picker的列数 | Array | [] | - |
+| cancelTxt | picker左侧按钮文案 | String | '取消' | - |
+| confirmTxt | picker右侧按钮文案 | String | '确定' | - |
+| select-index | 被选中的索引值，拉起picker后显示这个索引值对应的内容 | Array | [] | [1] |
+
+其中传入`picker`的`data`数组中，每一项可配置的属性有：
+
+| 参数 | 说明 | 类型 | 默认值 | 示例 |
+| ------------- |-------------| -----| ---| ---|
+| text | picker每一列展示的文案 | String/Number | - | - |
+| value | picker每一列展示的每项文案对应的值 | String/Number/Boolean | - | - |
+
+#### Event事件
+
+| 事件名 | 说明 | 参数1 | 参数2 |
+| ----- | ---- | ----| --- |
+| select | 点击确认按钮触发此事件 | selectedVal: 当前选中项每一列的值，Array类型 | selectedIndex: 当前选中项每一列的索引，Array类型 |
+| change | 滚轴滚动后触发此事件 | selectedVal: 当前选中项每一列的值，Array类型 | selectedIndex: 当前选中项每一列的索引，Array类型 |
+| value-change | 所确认的值变化时触发此事件 | selectedVal: 当前确认项每一列的值，Array类型 | selectedIndex: 当前确认项每一列的索引，Array类型 |
+| cancel | 点击取消按钮触发此事件 | - | - |
+
+#### 组件向外暴露方法
+
+| 方法名 | 说明 | 接受的参数1 |
+| ----- | ---- | ---- |
+| show | 拉起picker组件 | - |
+| hide | 隐藏picker组件 | - |
+| setData | 设置picker可选项 | picker每列可选项的文案和值，Array类型 |
+| setSelectedIndex | 设置picker选中项 | picker每列选中的索引，Array类型 |
diff --git a/document/components/docs/en-US/popup.md b/document/components/docs/en-US/popup.md
new file mode 100644
index 000000000..6be3b1e2d
--- /dev/null
+++ b/document/components/docs/en-US/popup.md
@@ -0,0 +1,137 @@
+## Popup
+
+The underlying popup component, mainly used to implement upper component encapsulation based on itself. It only provides basic functions: specifying the type, whether there's a background layer, showing content (HTML) and whether the component is in center position.
+
+All of the built-in popup type components are implemented based on this component, including [Toast](#/en-US/docs/toast)、[Picker](#/en-US/docs/picker)、[TimePicker](#/en-US/docs/time-picker)、[Dialog](#/en-US/docs/dialog)、[ActionSheet](#/en-US/docs/action-sheet).
+
+### Example
+
+- Basic usage
+
+```html
+
+ My Popup Content 1
+
+
+ Show Popup
+
+```
+
+Specifying `type` will help control class according to the type. In the example above, `cube-my-popup` will be added to the classList of the root element.
+
+```js
+export default {
+ methods: {
+ showPopup(refId) {
+ const component = this.$refs[refId]
+ component.show()
+ setTimeout(() => {
+ component.hide()
+ }, 1000)
+ }
+ }
+}
+```
+
+The component is hidden by default and won't show up unless invoking the `show()` method of the instance of the component. And of course, invoking the `hide()` method of the instance of the component will hide itself. That's what `showPopup()` does in the example above (first show and hide in one second).
+
+- Without background layer
+```html
+
+ My Popup Content 2
+
+
+ Show Popup - no mask
+
+```
+
+Setting `mask` to `false` and the background layer is hidden.
+
+- Show the HTML content
+
+```html
+
+
+ Show Popup - with content
+
+```
+
+You only need to pass the HTML fragment on to `content`.
+
+- Setting to bottom
+
+```html
+My Popup Content 4
+
+ Show Popup - bottom
+
+```
+
+Considering that in mobile secnes, popup is in center or bottom most of the time (covered in horizontal direction when setted to bottom). So if setting `center` to `false`, you'll set the component to bottom.
+
+- Upper layer encapsulation
+
+```html
+
+
+
+ {{content}}
+
+
+
+
+
+```
+
+An upper layer encapsulated CubeExtendPopup component with some styles is implemented. It supports passing the content on, has default slot and can be hidden if clicking the content. You can use it in this way (need to be registers globally or partially):
+
+```html
+
+
+ Show Extend Popup
+
+```
+
+### Props configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| type | the type of popup | String | - | '' |
+| mask | whether to show background layer | Boolean | true/false | true |
+| content | content, HTML string, valid when there's no slot | String | - | '' |
+| center | whether to be in center in horizontal and vertical direction | Boolean | true/false | true |
+
+### Events
+
+| Event Name | Description | Parameters |
+| - | - | - |
+| mask-click | triggers when the background layer is clicked | click event target |
diff --git a/document/components/docs/en-US/post-compile.md b/document/components/docs/en-US/post-compile.md
new file mode 100644
index 000000000..07316198c
--- /dev/null
+++ b/document/components/docs/en-US/post-compile.md
@@ -0,0 +1,16 @@
+## Post-compile
+
+Post-compile means the npm packages that the application depend on don't need to be compiled before distribution but compiled along with the application's compiling and packaging.
+
+> Notes: For more detailed content about post-compile, see [webpack 应用编译优化之路](https://github.com/DDFE/DDFE-blog/issues/23).
+
+### Background
+
+More and more applications are developed with webpack + babel, and commonly their package management is by npm. With the growing of the number of package dependencies which are also developed with ES2015+ and needs to be compiled before distribution, the final compiled code usually contains a lot of compiling code. Therefore, to eliminate the redundancy, we recommend post-compile.
+
+### Strengths and weaknesses
+- Public dependencies can share use and only need one copy. The more important is that you only need to compile once.
+
+### Rules
+
+### The configuration and use of webpack
diff --git a/document/components/docs/en-US/quick-start.md b/document/components/docs/en-US/quick-start.md
new file mode 100644
index 000000000..611ebe10b
--- /dev/null
+++ b/document/components/docs/en-US/quick-start.md
@@ -0,0 +1,113 @@
+## Quick start
+
+### Install
+
+```shell
+$ npm install cube-ui --save
+```
+
+### Usage
+
+It is recommended to use [babel-plugin-transform-modules](https://www.npmjs.com/package/babel-plugin-transform-modules),which helps you import component modules and corresponding styles more elegantly.
+
+Before use, the plugin needs some configuration. Modify .babelrc:
+
+- webpack 1.x
+ ```json
+ {
+ "plugins": ["transform-modules", {
+ "cube-ui": {
+ "transform": "cube-ui/lib/${member}",
+ "kebabCase": true,
+ "style": true
+ }
+ }]
+ }
+ ```
+- webpack 2+
+ ```json
+ {
+ "plugins": ["transform-modules", {
+ "cube-ui": {
+ "transform": "cube-ui/src/modules/${member}",
+ "kebabCase": true
+ }
+ }]
+ }
+ ```
+
+ > [why distinguishs the version of webpack?](#/en-US/docs/post-compile)
+
+If not using babel-plugin-transform-modules, you need to import corresponding style files by hand.
+
+#### Fully import
+
+Commonly in the entry file:
+
+```javascript
+import Vue from 'vue'
+import Cube from 'cube-ui'
+
+Vue.use(Cube)
+```
+
+#### Import on demand
+
+```javascript
+import { Button } from 'cube-ui'
+```
+
+You can choose to register globally or partially:
+
+```js
+// register globally
+Vue.use(Button)
+
+// or register partially
+// in certain somponents
+{
+ components: {
+ CubeButton: Button
+ }
+}
+```
+All the components that can be imported on demand are listed below:
+
+```js
+import {
+ Button,
+ Checkbox,
+ Loading,
+ Tip,
+ Toast,
+ Picker,
+ TimePicker,
+ Dialog,
+ ActionSheet,
+ Scroll,
+ Slide,
+ IndexList
+} from 'cube-ui'
+```
+
+#### Examples
+
+```html
+
+ show dialog
+
+
+
+```
diff --git a/document/components/docs/en-US/scroll.md b/document/components/docs/en-US/scroll.md
new file mode 100644
index 000000000..ac6b42b42
--- /dev/null
+++ b/document/components/docs/en-US/scroll.md
@@ -0,0 +1,232 @@
+## Scroll
+
+`Scroll` component, which is encapsulated based on `better-scroll`, provides high-quality native scrolling experience and has convenient configuration along tith events.
+
+### Example
+
+- Basic usage
+
+By setting `data` to an array, you can generate the list which can scrolls elegantly in the container.
+
+```html
+
+
+
+```
+
+- Scroll bar
+
+Default is without scroll bar. You can set it to fade-in-fade-out or always-show style.
+
+```html
+
+
+
+
+```
+```javascript
+export default {
+ data() {
+ return {
+ items: [1, 2, 3, 4, 5],
+ scrollbar: {
+ fade: false
+ }
+ }
+ }
+}
+```
+
+- Pull down to refresh
+
+There is no pull-down-to-refresh function by default. Configuring `pull-down-refresh` can turn on the dispatching of the event `pulling-down` and the animation of pulling down. You can listen to `pulling-down` event to update data.
+
+```html
+
+
+
+
+```
+```javascript
+export default {
+ data() {
+ return {
+ items: [1, 2, 3, 4, 5],
+ pullDownRefresh: {
+ threshold: 90,
+ stop: 40,
+ txt: 'Refresh success'
+ }
+ }
+ },
+ methods: {
+ onPullingDown() {
+ // simulate updating data
+ setTimeout(() => {
+ if (Math.random() > 0.5) {
+ // if new data
+ this.items.unshift('I am new data: ' + +new Date())
+ } else {
+ // if no new data
+ this.$refs.scroll.forceUpdate()
+ }
+ }, 1000)
+ }
+ }
+}
+```
+
+- Pulling up to load
+
+There is no pull-up-to-load function by default. Configuring `pull-up-load` can turn on the dispatching of the event `pulling-up` and the animation of pulling up. You can listen to `pulling-up` event to update data.
+
+
+```html
+
+
+
+
+```
+```javascript
+export default {
+ data() {
+ return {
+ items: [1, 2, 3, 4, 5],
+ itemIndex: 5,
+ pullUpLoad: {
+ threshold: 0,
+ txt: {
+ more: 'Load more',
+ noMore: 'No more data'
+ }
+ }
+ }
+ },
+ methods: {
+ onPullingUp() {
+ // simulate updating data
+ setTimeout(() => {
+ if (Math.random() > 0.5) {
+ // if new data
+ let newPage = [
+ 'I am line ' + ++this.itemIndex,
+ 'I am line ' + ++this.itemIndex,
+ 'I am line ' + ++this.itemIndex,
+ 'I am line ' + ++this.itemIndex,
+ 'I am line ' + ++this.itemIndex
+ ]
+
+ this.items = this.items.concat(newPage)
+ } else {
+ // if no new data
+ this.$refs.scroll.forceUpdate()
+ }
+ }, 1000)
+ }
+ }
+}
+```
+
+- Customize the animation of pulling down refreshing and pulling up loading
+
+If you don't like the built-in slots of pulling down refreshing and pulling up loading, you can use [scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) to customize animation. The example below uses scoped slots to customize animation of pulling down refreshing, while pulling up loading keeps default built-in animation.
+
+```html
+
+
+
+
+ ↓
+
+
+
+
+
+
Refresh success
+
+
+
+
+```
+
+With the parameters that scoped slots provide, you can control the process of animation according to the change of the state. Detailed scope parameters and their meaning are shown below in 'Slots'.
+
+
+### Props configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| ------------------ | ---------------------------------------- | -------------- | ------------------------ | ---------- |
+| data | data used for list rendering | Array | - | [] |
+| direction | scrolling direction | String | 'vertical', 'horizontal' | 'vertical' |
+| scrollbar | configuration for scroll bar | Boolean/Object | - | false |
+| pullDownRefresh | configuration for pulling down refreshing | Boolean/Object | - | false |
+| pullUpLoad | configuration for pulling up loading | Boolean/Object | - | false |
+| listenScroll | whether to dispatch scroll event | Boolean | true/false | false |
+| probeType | the dispatching time of scroll event 1. non-real-time dispatching; 2. real-time dispatching during the scrolling; 3. real-time dispatching during the entire scrolling including inertial stage | Number | 1, 2, 3 | 0 |
+| listenBeforeScroll | whether to dispatch before-scroll-start event | Boolean | true/false | false |
+
+- `scrollbar` sub configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| --------- | -------------------------------------- | ------- | --------------- | ------- |
+| fade | whether to have fade-in-fade-out style | Boolean | true/false | false |
+
+- `pullDownRefresh` sub configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| --------- | ---------------------------------------- | ------ | --------------- | ----------------- |
+| threshold | the threshold of distance that pulling down for refreshing | Number | - | 90 |
+| stop | the position where rebounding stays | Number | - | 40 |
+| txt | the text shown when refreshing successfully | String | - | 'Refresh success' |
+
+- `pullUpLoad` sub configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| --------- | ---------------------------------------- | ------ | --------------- | ---------------------------------------- |
+| threshold | the threshold of distance that pulling up for loading | Number | - | 0 |
+| txt | the text shown when pulling up loading | Object | - | { more: 'Load more', noMore: 'No more data' } |
+
+### Slot
+
+| Name | Description | Scope Parameters |
+| -------- | ---------------------------------------- | ---------------------------------------- |
+| pulldown | located above the list and shown when pulling down refreshing | pullDownRefresh: whether to turn on pulling-down-refreshing function pullDownStyle: the style of showing and fading beforePullDown: whether in pulling down operation pulling: whether in the process of pulling in data bubbleY: the distance of pulling down currently - 50 |
+| pullup | located below the list and shown when pulling up loading | pullUpLoad: whether to turn on pulling-up-loading function isPullUpLoad: whether the data is being loaded |
+
+### Events
+
+| Event Name | Description | Parameters |
+| ------------------- | ---------------------------------------- | ---------------------------------------- |
+| click | triggers when clicking the list item | item - the data of the list item |
+| scroll | triggers according to the value of probeType, if listenScroll is true | Object {x, y} - real-time scrolling coordinates |
+| before-scroll-start | triggers before scrolling start, if listenBeforeScroll | - |
+| pulling-down | triggers when the distance of pulling down exceeds the threshold, if pullDownRefresh is true | - |
+| pulling-up | triggers when the distance of pulling up exceeds the threshold, if pullUpLoad is true | - |
diff --git a/document/components/docs/en-US/slide.md b/document/components/docs/en-US/slide.md
new file mode 100644
index 000000000..e95bcbe29
--- /dev/null
+++ b/document/components/docs/en-US/slide.md
@@ -0,0 +1,105 @@
+## Slide
+
+`Slide` component, which is also encapsulated based on `better-scroll`, provides common functions of `slider` and `swipe`.
+
+### Example
+
+- Basic usage
+
+ `cube-slide` element is the entire slide component while `cube-slide-item` element is the page of each slide and it's slot is the content of the page.
+
+ ```html
+
+
+
+
+
+
+
+ ```
+ ```javascript
+ export default {
+ data() {
+ return {
+ items: [
+ {
+ url: 'http://www.didichuxing.com/',
+ image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
+ }, {
+ url: 'http://www.didichuxing.com/',
+ image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
+ }, {
+ url: 'http://www.didichuxing.com/',
+ image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
+ }
+ ]
+ }
+ },
+ methods: {
+ changePage(current) {
+ console.log('The index of current slide is ' + current)
+ },
+ clickHandle(item, index) {
+ console.log(item, index)
+ }
+ }
+ }
+ ```
+
+- Loop play
+
+ Loop play is turned on by default. You can cnfigure that with `loop` attribute.
+
+ ```html
+
+
+ ```
+
+- Automatic play
+
+ Automatic play is turned on by default. You can cnfigure that with `auto-play` attribute.
+
+ ```html
+
+
+ ```
+
+- Interval of automatic play
+
+ When automatic play is turned on, you can configure the interval with `interval` attribute.
+
+ ```html
+
+ ```
+
+- Sliding threshold of switching pages
+
+ You can configure the sliding threshold of switching pages with `threshold` attribute. It means that when the sliding distance exceeds the page's width * `threshold`, the page is switched. Default is 0.3.
+
+ ```html
+
+ ```
+
+- Speed of switching pages
+
+ Animation of switching costs 400 ms by default. You can cnfigure that with `speed` attribute.
+
+ ```html
+
+ ```
+
+### Props configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| --------- | ------------------------------------ | ------- | --------------- | ------- |
+| loop | whether to loop play | Boolean | true/false | true |
+| autoPlay | whether to play automatically | Boolean | true/false | true |
+| interval | interval of play | Number | - | 4000 |
+| threshold | sliding threshold of switching pages | Number | (0, 1) | 0.3 |
+| speed | speed of switching pages | Number | - | 400 |
+
+### 事件
+
+| Event Name | Description | Parameters |
+| ---------- | ----------------------------------- | ---------------------- |
+| change | triggers when current slide changes | index of current slide |
diff --git a/document/components/docs/en-US/style.md b/document/components/docs/en-US/style.md
new file mode 100644
index 000000000..609464b9b
--- /dev/null
+++ b/document/components/docs/en-US/style.md
@@ -0,0 +1,172 @@
+## style 模块
+
+style 模块主要包含就是样式部分，包含基础的 reset、基础通用样式以及内置 icon。
+
+### reset.css
+
+源码地址：[reset](https://github.com/didi/cube-ui/blob/master/src/common/stylus/reset.styl)，使用的就是 Eric Meyer's Reset CSS。
+
+```stylus
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, input
+ margin: 0
+ padding: 0
+ border: 0
+ font-size: 100%
+ font-weight: normal
+ vertical-align: baseline
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, menu, nav, section
+ display: block
+
+body
+ line-height: 1
+
+blockquote, q
+ quotes: none
+
+blockquote:before, blockquote:after,
+q:before, q:after
+ content: none
+
+table
+ border-collapse: collapse
+ border-spacing: 0
+
+/* custom */
+
+a
+ color: #7e8c8d
+ -webkit-backface-visibility: hidden
+ text-decoration: none
+
+li
+ list-style: none
+
+body
+ -webkit-text-size-adjust: none
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+```
+
+### base.css
+
+源码地址：[base](https://github.com/didi/cube-ui/blob/master/src/common/stylus/base.styl)，主要包含的就是 `html`, `body` 元素的 `font-family`, `line-height` 等的设定，修正浮动影响的 `.clear-fix`，以及上下左右四个边框的绝对 1px 边框的 class：`.border-top-1px`, `.border-right-1px`, `.border-bottom-1px`, `.border-left-1px`。
+
+```stylus
+@import "./variable.styl"
+
+body, html
+ line-height: 1
+ font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback'
+ user-select: none
+ -webkit-tap-highlight-color: transparent
+
+.clear-fix
+ &::after
+ content: ""
+ display: table
+ clear: both
+
+.border-top-1px, .border-right-1px, .border-bottom-1px, .border-left-1px
+ position: relative
+ &::before, &::after
+ content: ""
+ display: block
+ position: absolute
+ transform-origin: 0 0
+
+.border-top-1px
+ &::before
+ border-top: 1px solid $color-row-line
+ left: 0
+ top: 0
+ width: 100%
+ transform-origin: 0 top
+
+.border-right-1px
+ &::after
+ border-right: 1px solid $color-col-line
+ top: 0
+ right: 0
+ height: 100%
+ transform-origin: right 0
+
+.border-bottom-1px
+ &::after
+ border-bottom: 1px solid $color-row-line
+ left: 0
+ bottom: 0
+ width: 100%
+ transform-origin: 0 bottom
+
+.border-left-1px
+ &::before
+ border-left: 1px solid $color-col-line
+ top: 0
+ left: 0
+ height: 100%
+ transform-origin: left 0
+
+@media (min-resolution: 2dppx)
+ .border-top-1px
+ &::before
+ width: 200%
+ transform: scale(.5) translateZ(0)
+ .border-right-1px
+ &::after
+ height: 200%
+ transform: scale(.5) translateZ(0)
+ .border-bottom-1px
+ &::after
+ width: 200%
+ transform: scale(.5) translateZ(0)
+ .border-left-1px
+ &::before
+ height: 200%
+ transform: scale(.5) translateZ(0)
+
+@media (min-resolution: 3dppx)
+ .border-top-1px
+ &::before
+ width: 300%
+ transform: scale(.333) translateZ(0)
+ .border-right-1px
+ &::after
+ height: 300%
+ transform: scale(.333) translateZ(0)
+ .border-bottom-1px
+ &::after
+ width: 300%
+ transform: scale(.333) translateZ(0)
+ .border-left-1px
+ &::before
+ height: 300%
+ transform: scale(.333) translateZ(0)
+```
+
+### 内置 icon
+
+图标是利用 [font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) 规则自定义字体 `"cube-icon"` 实现的。
+
+内置 icon 有 13 个：
+
+
+
+使用的时候只需要加入对应的类名即可，例如 alert 图标，可以这样用：``。
diff --git a/document/components/docs/en-US/time-picker.md b/document/components/docs/en-US/time-picker.md
new file mode 100644
index 000000000..71743ca2f
--- /dev/null
+++ b/document/components/docs/en-US/time-picker.md
@@ -0,0 +1,128 @@
+## TimerPicker组件
+
+日期选择器。`TimerPicker`组件基于`picker`组件再次封装。第一列为日期，第二列为小时，第三列为分钟数，显示的数据都是依据当前时间，及配置的参数来动态生成。在实现的过程当中，每一列的`picker`都对应一个`better-scroll`的实例，滚轴发生变化后，`picker`向`time-picker`派发`change`事件，再由`time-picker`向父元素派发`change`事件，`cancel`, `select`事件同理。
+
+### 单独引入
+
+```javascript
+ import { TimePicker } from 'cube-ui'
+
+ export default {
+ components: {
+ CubeTimePicker: TimePicker
+ }
+ }
+```
+
+### 调用方式
+
+通过在`time-picker`组件上添加`ref`属性，获得对于组件的引用，然后调用`time-picker`组件向外暴露出来的`show`，`hide`方法来控制组件的显示或消失，`show`能接受回调函数:
+
+```html
+
+
+
+ 拉起time-picker
+
+
+
+
+```
+
+### 示例
+
+```html
+
+
时间选择器 ...
+
+
+
+
+
+
+```
+
+### API
+
+#### Props参数配置
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ------------- |:-------------:| -----:| ---|
+| title | 标题 | String | '选择时间' |
+| delay | 将当前时间向后推算的分钟数，决定了最小可选时间 | 15 |
+| day | 日期配置 | Object | { len: 3, filter: ['今日'], format: 'M月d日' } |
+| showNow | 是否显示当前时间 | Boolean | true |
+| minuteStep | 分钟数的步长 | Number | 10 |
+
+其中`day`属性可配置的参数有：
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ------------- |:-------------:| ----- | ---|
+| len | 日期列，从当前时间算起，往后推len天 | Number | 3 |
+| filter | 日期列，将时间映射为filter中的文案内容 | Array | ['今日'] |
+| format | 时间格式化 | String | 'M月d日' |
+
+#### Event事件
+
+| 事件名 | 说明 | 参数1 | 参数2 |
+| ----- | ---- | ----| --- |
+| select | 点击确认按钮触发此事件 | selectedTime: 当前选中的timestamp | selectText: 当前选中的时间文案 |
+| change | 滑动改变time-picker滚轴时触发此事件 | selectedTime: 当前选中的timestamp | selectText: 当前选中的时间文案 |
+| cancel | 点击取消按钮触发此事件 | - | - |
+
+#### 组件向外暴露方法
+
+| 方法名 | 说明 |
+| ----- | ---- |
+| show | 拉起time-picker组件 |
+| hide | 隐藏time-picker组件 |
+| setTime | 手动设置time-picker组件显示的时间，数据格式为unix时间戳 |
diff --git a/document/components/docs/en-US/tip.md b/document/components/docs/en-US/tip.md
new file mode 100644
index 000000000..94b788bf7
--- /dev/null
+++ b/document/components/docs/en-US/tip.md
@@ -0,0 +1,107 @@
+## Tip
+
+`Tip`, used to popup tip bubble box.
+
+### Example
+
+- Basic usage
+
+By adding `ref` to `Tip`, you can get the reference to the component and invoke `show` or `hide` methods which are exposed by `Tip` to control the show or hide state of the component.
+
+```html
+
+
+
+```
+```javascript
+export default {
+ methods: {
+ showTip () {
+ this.$refs.tip.show()
+ }
+ }
+}
+```
+
+- The position of the small triangle and the bubble box
+
+You can configure the direction of the small triangle by `direction` and configure the position of the bubble box by `style`. Normally, the direction of the small triangle is opposite to the position of the bubble box.
+
+```html
+
+