初始化

.babelrc

@@ -0,0 +1,21 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": [
+    "transform-vue-jsx", 
+    ["transform-runtime"],
+    ["transform-modules", {
+      "cube-ui": {
+        "transform": "./node_modules/cube-ui/src/modules/${member}",
+        "kebabCase": true
+      }
+    }]
+  ]
+}

.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

.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

README.md

@@ -0,0 +1,5 @@
+# ITSM-微信报修端
+
+# 统一版本
+## v3.5.0
+2024年3月29日-v3.5.0

build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const 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 () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const 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 (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

build/dev-client.js

@@ -0,0 +1,9 @@
+/* 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()
+  }
+})

build/dev-server.js

@@ -0,0 +1,89 @@
+require('./check-versions')()
+
+var config = require('../config')
+if (!process.env.NODE_ENV) {
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+var opn = require('opn')
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+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
+// automatically open browser, if not set will be false
+var autoOpenBrowser = !!config.dev.autoOpenBrowser
+// 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,
+  quiet: true
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler, {
+  log: () => {}
+})
+// 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(options.filter || 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()
+  }
+}

build/utils.js

@@ -0,0 +1,125 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+// var cssLoader = {
+//   loader: 'css-loader',
+//     options: {
+//     sourceMap: options.sourceMap
+//   }
+// }
+// var px2remLoader = {
+//   loader: 'px2rem-loader',
+//     options: {
+//     remUnit: 75
+//   }
+// }
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+  const px2remLoader = {
+    loader: 'px2rem-loader',
+      options: {
+      remUnit: 60
+    }
+  }
+
+  const stylusOptions = {
+    'resolve url': true
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];
+    // var loaders = [cssLoader, px2remLoader]
+
+    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',
+        publicPath:'../../'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // 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) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,86 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 90000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 90000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 90000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.less$/,
+        loader: "style-loader!css-loader!less-loader"
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,97 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+const PostCompilePlugin = require('webpack-post-compile-plugin')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ]),
+    new PostCompilePlugin()
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -0,0 +1,145 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { 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.build.index,
+      template: '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'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (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',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const 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
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

@@ -0,0 +1,101 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+    // 新加的一行
+    env: require('./dev.env'),
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      '/service': {//自定义名字，代表的是以下target中的内容
+        target: 'http://192.168.3.111',//微信
+        // target: 'http://weixintest5.ngser.dashitech.com/service/',//微信
+        // target: 'http://localhost:8080/service/',//微信
+        // target: 'http://192.168.199.165:8080/service/',//黄伟
+        // target: 'http://192.168.3.100:8080/service/',//100
+        changeOrigin: true,//是否允许跨域
+        // pathRewrite: {
+        //   '^/service': ''
+        // }
+      },
+      '/file': {//自定义名字，代表的是以下target中的内容
+        target: 'http://192.168.3.111',//微信
+        // target: 'http://weixintest5.ngser.dashitech.com/service/',//微信
+        // target: 'http://localhost:8080/service/',//微信
+        // target: 'http://192.168.199.165:8080/service/',//黄伟
+        // target: 'http://192.168.3.100:8080/service/',//100
+        changeOrigin: true,//是否允许跨域
+        // pathRewrite: {
+        //   '^/service': ''
+        // }
+      }
+    },
+
+    // Various Dev Server settings
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '127.0.0.1', // can be overwritten by process.env.HOST
+    // host: '192.168.199.177', // can be overwritten by process.env.HOST
+    // host: '192.168.31.32', // can be overwritten by process.env.HOST
+    // host: '192.168.31.32', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
+    port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    // 住了的4行
+    autoOpenBrowser: true,
+    // errorOverlay: true,
+    // notifyOnErrors: true,
+    // poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    // 住了一行
+    devtool: 'source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    // 住了的
+    // cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // 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'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./static/css/iconfont.css">
+    <link rel="stylesheet" href="./static/font/seimin/iconfont.css">
+    <script src="./static/js/JQ-3.3.1.js"></script>
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <!-- <meta name="viewport" content="width=device-width,intial-scale=1,user-
+        scalable=no"> -->
+    <title></title>
+    <style>
+      html{
+        background-color: white;
+        height: 100vh;
+        margin: 0 auto!important;
+      }
+      body{
+        margin: 0;
+        padding: 0;
+        background-color: white
+      }
+      img{
+        vertical-align: middle
+      }
+      a{
+        text-decoration: none
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+<script src="./static/js/public.js"></script>

package.json

@@ -0,0 +1,82 @@
+{
+  "name": "jry",
+  "version": "1.0.0",
+  "description": "jryVue",
+  "author": "jiang",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "build": "node build/build.js",
+    "development": "node ./upload/development.js",
+    "production": "node ./upload/production.js"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "cube-ui": "^1.12.10",
+    "js-base64": "^3.6.1",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
+    "lib-flexible": "^0.3.2",
+    "lodash": "^4.17.21",
+    "vue": "^2.5.2",
+    "vue-axios": "^2.1.4",
+    "vue-router": "^3.0.1",
+    "weixin-jsapi": "^1.1.0"
+  },
+  "compileDependencies": [
+    "cube-ui"
+  ],
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-modules": "^0.0.2",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "px2rem-loader": "^0.1.9",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "ssh2-sftp-client": "^7.2.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^2.1.1",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0",
+    "webpack-post-compile-plugin": "^0.1.2"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

@@ -0,0 +1,40 @@
+<template>
+	<div id="app">
+		<router-view></router-view>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'app',
+	components: {
+
+	},
+	methods:{
+
+	},
+}
+
+</script>
+
+<style>
+.cube-picker-wheel-item{
+  font-size: 12px!important;
+}
+.cube-popup_mask{
+  margin: 0 auto;
+}
+.overflowHidden{
+  overflow: hidden!important;
+}
+* {
+  font-family: "微软雅黑";
+  max-width: 750px;
+}
+.noDataFont{
+	height: .5rem;
+	line-height: .5rem;
+	color: #666666;
+	text-align: center
+}
+</style>

src/common/helpers/create-api.js

@@ -0,0 +1,7 @@
+import createAPIComponent from 'vue-create-api'
+
+export default function createAPI (Vue, Component, events, single) {
+  Vue.use(createAPIComponent, {componentPrefix: 'cube-'})
+  const api = Vue.createAPI(Component, events, single)
+  return api
+}

src/common/helpers/debug.js

@@ -0,0 +1,14 @@
+export const warn = function (msg, componentName) {
+   /* istanbul ignore if */
+  if (process.env.NODE_ENV !== 'production') {
+    const component = componentName ? `<${componentName}> ` : ''
+    console.error(`[Cube warn]: ${component}${msg}`)
+  }
+}
+
+export const tip = function (msg, componentName) {
+  if (process.env.NODE_ENV !== 'production') {
+    const component = componentName ? `<${componentName}> ` : ''
+    console.warn(`[Cube tip]: ${component}${msg}`)
+  }
+}

src/common/helpers/dom.js

@@ -0,0 +1,98 @@
+import { inBrowser } from './env'
+
+export function hasClass(el, className) {
+  const reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
+  return reg.test(el.className)
+}
+
+export function addClass(el, className) {
+  /* istanbul ignore if */
+  if (hasClass(el, className)) {
+    return
+  }
+
+  const newClass = el.className.split(' ')
+  newClass.push(className)
+  el.className = newClass.join(' ')
+}
+
+export function removeClass(el, className) {
+  /* istanbul ignore if */
+  if (!hasClass(el, className)) {
+    return
+  }
+
+  const reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g')
+  el.className = el.className.replace(reg, ' ')
+}
+
+export function getData(el, name) {
+  const prefix = 'data-'
+  return el.getAttribute(prefix + name)
+}
+
+export function getRect(el) {
+  return {
+    top: el.offsetTop,
+    left: el.offsetLeft,
+    width: el.offsetWidth,
+    height: el.offsetHeight
+  }
+}
+
+let vendor = (() => {
+  /* istanbul ignore if */
+  if (!inBrowser) {
+    return false
+  }
+  let elementStyle = document.createElement('div').style
+  let transformNames = {
+    standard: 'transform',
+    webkit: 'webkitTransform',
+    Moz: 'MozTransform',
+    O: 'OTransform',
+    ms: 'msTransform'
+  }
+
+  for (let key in transformNames) {
+    if (elementStyle[transformNames[key]] !== undefined) {
+      return key
+    }
+  }
+
+  /* istanbul ignore next */
+  return false
+})()
+
+export function prefixStyle(style) {
+  /* istanbul ignore if */
+  if (vendor === false) {
+    return false
+  }
+
+  if (vendor === 'standard') {
+    if (style === 'transitionEnd') {
+      return 'transitionend'
+    }
+    return style
+  }
+
+  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
+}
+
+export function getMatchedTarget(e, targetClassName) {
+  let el = e.target
+
+  while (el && !hasClass(el, targetClassName)) {
+    if (el === e.currentTarget) return null
+    el = el.parentNode
+  }
+
+  return el
+}
+
+export function dispatchEvent(ele, name, { type = 'Event', bubbles = true, cancelable = true } = {}) {
+  const e = document.createEvent(type)
+  e.initEvent(name, bubbles, cancelable)
+  ele.dispatchEvent(e)
+}

src/common/helpers/ease.js

@@ -0,0 +1,3 @@
+export const easeOutBack = 'cubic-bezier(0.18, 0.89, 0.32, 1.28)'
+export const easeOutQuart = 'cubic-bezier(0.165, 0.84, 0.44, 1)'
+export const easeOutCubic = 'cubic-bezier(0.22, 0.61, 0.36, 1)'

src/common/helpers/env.js

@@ -0,0 +1,4 @@
+// ssr support
+export const inBrowser = typeof window !== 'undefined'
+export const ua = inBrowser && navigator.userAgent.toLowerCase()
+export const isAndroid = ua && ua.indexOf('android') > 0

src/common/helpers/instantiate-component.js

@@ -0,0 +1,4 @@
+import createAPI from 'vue-create-api'
+const { instantiateComponent } = createAPI
+
+export default instantiateComponent

src/common/helpers/raf.js

@@ -0,0 +1,43 @@
+import { inBrowser } from './env'
+
+const DEFAULT_INTERVAL = 100 / 60
+
+function noop() {
+}
+
+export const requestAnimationFrame = (() => {
+  /* istanbul ignore next */
+  if (!inBrowser) {
+    return noop
+  }
+  return window.requestAnimationFrame ||
+    /* istanbul ignore next */
+    window.webkitRequestAnimationFrame ||
+    /* istanbul ignore next */
+    window.mozRequestAnimationFrame ||
+    /* istanbul ignore next */
+    window.oRequestAnimationFrame ||
+    // if all else fails, use setTimeout
+    /* istanbul ignore next */
+    function (callback) {
+      return window.setTimeout(callback, (callback.interval || DEFAULT_INTERVAL) / 2) // make interval as precise as possible.
+    }
+})()
+
+export const cancelAnimationFrame = (() => {
+  /* istanbul ignore next */
+  if (!inBrowser) {
+    return noop
+  }
+  return window.cancelAnimationFrame ||
+    /* istanbul ignore next */
+    window.webkitCancelAnimationFrame ||
+    /* istanbul ignore next */
+    window.mozCancelAnimationFrame ||
+    /* istanbul ignore next */
+    window.oCancelAnimationFrame ||
+    /* istanbul ignore next */
+    function (id) {
+      window.clearTimeout(id)
+    }
+})()

src/common/helpers/string-template.js

@@ -0,0 +1,50 @@
+import { isFunc } from './util'
+import { warn } from './debug'
+import Locale from '../../modules/locale'
+const stringRE = /\{\{((?:.|\n)+?)\}\}/g
+const quoteRe = /['"]/g
+const INVALID_INDEX = -1
+
+function format (string, config = '') {
+  return string.replace(stringRE, (match, group1, index) => {
+    const helpersArr = group1.split('|').slice(1).map(_ => _.trim())
+    const hasHelpers = helpersArr.length
+    let result = config
+
+    if (hasHelpers) {
+      helpersArr.forEach((helperString) => {
+        let { fnName, args } = resolveHelperFnString(helperString)
+        args.unshift(result)
+        /* istanbul ignore else */
+        if (isFunc(Locale.helpers[fnName])) {
+          result = Locale.helpers[fnName].apply(null, args)
+        } else {
+          warn(`A helper function named "${fnName}" is not registered, ` +
+               `please register it by Validator.addHelper()`)
+          result = ''
+        }
+      })
+    }
+
+    return result
+  })
+}
+
+function resolveHelperFnString (helperString) {
+  const leftBracketsIndex = helperString.indexOf('(')
+  const rightBracketsIndex = helperString.indexOf(')')
+  let fnName = ''
+  let args = []
+  /* istanbul ignore if */
+  if (leftBracketsIndex === INVALID_INDEX) {
+    args = []
+    fnName = helperString
+  } else if (leftBracketsIndex !== INVALID_INDEX && rightBracketsIndex !== INVALID_INDEX) {
+    const argsStr = helperString.slice(leftBracketsIndex + 1, rightBracketsIndex)
+    args = argsStr.split(',').map(_ => _.trim().replace(quoteRe, ''))
+    fnName = helperString.slice(0, leftBracketsIndex)
+  }
+  return { fnName, args }
+}
+
+export default format

src/common/helpers/util.js

@@ -0,0 +1,207 @@
+import { camelize } from '../lang/string'
+
+function findIndex(ary, fn) {
+  if (ary.findIndex) {
+    return ary.findIndex(fn)
+  }
+  /* istanbul ignore next */
+  let index = -1
+  /* istanbul ignore next */
+  ary.some(function (item, i, ary) {
+    const ret = fn.call(this, item, i, ary)
+    if (ret) {
+      index = i
+      return ret
+    }
+  })
+  /* istanbul ignore next */
+  return index
+}
+
+function deepAssign(to, from) {
+  for (let key in from) {
+    if (!to[key] || typeof to[key] !== 'object') {
+      to[key] = from[key]
+    } else {
+      deepAssign(to[key], from[key])
+    }
+  }
+}
+
+function createAddAPI(baseObj) {
+  return function add(...args) {
+    if (typeof args[0] === 'string') {
+      args[0] = {
+        [args[0]]: args[1]
+      }
+    }
+    deepAssign(baseObj, args[0])
+  }
+}
+
+function judgeTypeFnCreator (type) {
+  const toString = Object.prototype.toString
+  return function isType (o) {
+    return toString.call(o) === `[object ${type}]`
+  }
+}
+
+const typesReset = {
+  _set(obj, key, value) {
+    obj[key] = value
+  },
+  string(obj, key) {
+    typesReset._set(obj, key, '')
+  },
+  number(obj, key) {
+    typesReset._set(obj, key, 0)
+  },
+  boolean(obj, key) {
+    typesReset._set(obj, key, false)
+  },
+  object(obj, key, value) {
+    if (Array.isArray(value)) {
+      typesReset._set(obj, key, [])
+    } else {
+      typesReset._set(obj, key, {})
+    }
+  }
+}
+function resetTypeValue(obj, key, defVal) {
+  if (defVal !== undefined) {
+    return typesReset._set(obj, key, defVal)
+  }
+  if (key) {
+    const value = obj[key]
+    const resetHandler = typesReset[typeof value]
+    resetHandler && resetHandler(obj, key, value)
+  } else {
+    Object.keys(obj).forEach((key) => {
+      resetTypeValue(obj, key)
+    })
+  }
+}
+
+function parallel(tasks, cb) {
+  let doneCount = 0
+  let results = []
+  const tasksLen = tasks.length
+  if (!tasksLen) {
+    return cb(results)
+  }
+  tasks.forEach((task, i) => {
+    task((ret) => {
+      doneCount += 1
+      results[i] = ret
+      if (doneCount === tasksLen) {
+        // all tasks done
+        cb(results)
+      }
+    })
+  })
+}
+
+function cb2PromiseWithResolve(cb) {
+  let promise
+  if (typeof window.Promise !== 'undefined') {
+    const _cb = cb
+    promise = new window.Promise((resolve) => {
+      cb = (data) => {
+        _cb && _cb(data)
+        resolve(data)
+      }
+    })
+    promise.resolve = cb
+  }
+  return promise
+}
+
+function debounce(func, wait, immediate, initValue) {
+  let timeout
+  let result = initValue
+
+  const later = function (context, args) {
+    timeout = null
+    if (args) {
+      result = func.apply(context, args)
+    }
+  }
+
+  const debounced = function (...args) {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    if (immediate) {
+      const callNow = !timeout
+      timeout = setTimeout(later, wait)
+      if (callNow) {
+        result = func.apply(this, args)
+      }
+    } else {
+      timeout = setTimeout(() => {
+        later(this, args)
+      }, wait)
+    }
+
+    return result
+  }
+
+  debounced.cancel = function () {
+    clearTimeout(timeout)
+    timeout = null
+  }
+
+  return debounced
+}
+
+function processComponentName(Component, { prefix = '', firstUpperCase = false } = {}) {
+  const name = Component.name
+  const pureName = name.replace(/^cube-/i, '')
+  let camelizeName = `${camelize(`${prefix}${pureName}`)}`
+   /* istanbul ignore if */
+  if (firstUpperCase) {
+    camelizeName = camelizeName.charAt(0).toUpperCase() + camelizeName.slice(1)
+  }
+  return camelizeName
+}
+
+function parsePath (obj, path = '') {
+  const segments = path.split('.')
+  let result = obj
+  for (let i = 0; i < segments.length; i++) {
+    const key = segments[i]
+     /* istanbul ignore if */
+    if (isUndef(result[key])) {
+      result = ''
+      break
+    } else {
+      result = result[key]
+    }
+  }
+  return result
+}
+
+const isFunc = judgeTypeFnCreator('Function')
+const isUndef = judgeTypeFnCreator('Undefined')
+const isArray = judgeTypeFnCreator('Array')
+const isString = judgeTypeFnCreator('String')
+const isObject = judgeTypeFnCreator('Object')
+const isNumber = judgeTypeFnCreator('Number')
+
+export {
+  findIndex,
+  deepAssign,
+  createAddAPI,
+  resetTypeValue,
+  parallel,
+  cb2PromiseWithResolve,
+  debounce,
+  processComponentName,
+  parsePath,
+  isUndef,
+  isFunc,
+  isArray,
+  isString,
+  isObject,
+  isNumber
+}

src/common/helpers/validator/index.js

@@ -0,0 +1,3 @@
+export { rules, addRule } from './rules'
+export { addMessage } from './messages'
+export { types, addType } from './types'

src/common/helpers/validator/language/chinese.js

@@ -0,0 +1,44 @@
+import { toLocaleDateString } from '../../util'
+
+export default {
+  required: '此为必填项',
+  type: {
+    string: '请输入字符',
+    number: '请输入数字',
+    array: '数据类型应为数组',
+    date: '请选择有效日期',
+    email: '请输入有效邮箱',
+    tel: '请输入有效的手机号码',
+    url: '请输入有效网址'
+  },
+  min: {
+    string: /* istanbul ignore next */ (config) => `至少输入 ${config} 位字符`,
+    number: /* istanbul ignore next */ (config) => `不得小于 ${config}`,
+    array: /* istanbul ignore next */ (config) => `请选择至少 ${config} 项`,
+    date: /* istanbul ignore next */ (config) => `请选择 ${toLocaleDateString(config, 'zh')} 之后的时间`,
+    email: /* istanbul ignore next */ (config) => `至少输入 ${config} 位字符`,
+    tel: /* istanbul ignore next */ (config) => `至少输入 ${config} 位字符`,
+    url: /* istanbul ignore next */ (config) => `至少输入 ${config} 位字符`
+  },
+  max: {
+    string: /* istanbul ignore next */ (config) => `请勿超过 ${config} 位字符`,
+    number: /* istanbul ignore next */ (config) => `请勿大于 ${config}`,
+    array: /* istanbul ignore next */ (config) => `最多选择 ${config} 项`,
+    date: /* istanbul ignore next */ (config) => `请选择 ${toLocaleDateString(config, 'zh')} 之前的时间`,
+    email: /* istanbul ignore next */ (config) => `请勿超过 ${config} 位字符`,
+    tel: /* istanbul ignore next */ (config) => `请勿超过 ${config} 位字符`,
+    url: /* istanbul ignore next */ (config) => `请勿超过 ${config} 位字符`
+  },
+  len: {
+    string: /* istanbul ignore next */ (config) => `请输入 ${config} 位字符`,
+    number: /* istanbul ignore next */ (config) => `长度应等于 ${config}`,
+    array: /* istanbul ignore next */ (config) => `请选择 ${config} 项`,
+    date: /* istanbul ignore next */ (config) => `请选择 ${toLocaleDateString(config, 'zh')}`,
+    email: /* istanbul ignore next */ (config) => `请输入 ${config} 位字符`,
+    tel: /* istanbul ignore next */ (config) => `请输入 ${config} 位字符`,
+    url: /* istanbul ignore next */ (config) => `请输入 ${config} 位字符`
+  },
+  pattern: '格式错误',
+  custom: '未通过校验',
+  notWhitespace: '空白内容无效'
+}

src/common/helpers/validator/language/english.js

@@ -0,0 +1,44 @@
+import { toLocaleDateString } from '../../util'
+
+export default {
+  required: 'Required.',
+  type: {
+    string: 'Please input characters.',
+    number: 'Please input numbers.',
+    array: 'The data type should be array.',
+    date: 'Please select a valid date.',
+    email: 'Please input a valid E-mail.',
+    tel: 'Please input a valid telphone number.',
+    url: 'Please input a valid web site.'
+  },
+  min: {
+    string: /* istanbul ignore next */ (config) => `Please input at least ${config} characters.`,
+    number: /* istanbul ignore next */ (config) => `The number could not smaller than ${config}.`,
+    array: /* istanbul ignore next */ (config) => `Please select at least ${config} items.`,
+    date: /* istanbul ignore next */ (config) => `Please select a date after ${toLocaleDateString(config, 'en')}`,
+    email: /* istanbul ignore next */ (config) => `Please input at least ${config} characters.`,
+    tel: /* istanbul ignore next */ (config) => `Please input at least ${config} characters.`,
+    url: /* istanbul ignore next */ (config) => `Please input at least ${config} characters.`
+  },
+  max: {
+    string: /* istanbul ignore next */ (config) => `Please input no more than ${config} characters.`,
+    number: /* istanbul ignore next */ (config) => `The number could not bigger than ${config}`,
+    array: /* istanbul ignore next */ (config) => `Please select no more than  ${config} items`,
+    date: /* istanbul ignore next */ (config) => `Please select a date before ${toLocaleDateString(config, 'en')}`,
+    email: /* istanbul ignore next */ (config) => `Please input no more than ${config} characters.`,
+    tel: /* istanbul ignore next */ (config) => `Please input no more than ${config} characters.`,
+    url: /* istanbul ignore next */ (config) => `Please input no more than ${config} characters.`
+  },
+  len: {
+    string: /* istanbul ignore next */ (config) => `Please input ${config} characters.`,
+    number: /* istanbul ignore next */ (config) => `The length should equal ${config}`,
+    array: /* istanbul ignore next */ (config) => `Please select ${config} items`,
+    date: /* istanbul ignore next */ (config) => `Please select ${toLocaleDateString(config, 'en')}`,
+    email: /* istanbul ignore next */ (config) => `Please input ${config} characters.`,
+    tel: /* istanbul ignore next */ (config) => `Please input ${config} characters.`,
+    url: /* istanbul ignore next */ (config) => `Please input ${config} characters.`
+  },
+  pattern: 'The input don"t match pattern.',
+  custom: 'Invalid.',
+  notWhitespace: 'Whitespace is invalid.'
+}

src/common/helpers/validator/messages.js

@@ -0,0 +1,18 @@
+import { deepAssign } from '../util'
+
+function addMessage (...args) {
+  const NAMESPACE = 'validator'
+  const vueProto = this._base.prototype
+  const lang = vueProto.$cubeLang
+  const baseMessages = vueProto.$cubeMessages[lang][NAMESPACE]
+
+  if (typeof args[0] === 'string') {
+    args[0] = {
+      [args[0]]: args[1]
+    }
+  }
+
+  deepAssign(baseMessages, args[0])
+}
+
+export { addMessage }

src/common/helpers/validator/rules.js

@@ -0,0 +1,52 @@
+import { createAddAPI } from '../util'
+import { types } from './types'
+
+const rules = {
+  required: (val, required, type) => {
+    type = type || (Array.isArray(val) ? 'array' : typeof val)
+    if (type === 'array' && Array.isArray(val)) {
+      return val.length > 0
+    }
+    return val !== '' && val !== undefined && val !== null
+  },
+  type: (val, type) => {
+    return !types[type] || types[type](val)
+  },
+  min: (val, min, type) => {
+    type = type || (typeof val)
+    if (type === 'number' || type === 'date') {
+      return Number(val) >= min
+    } else {
+      return val.length >= min
+    }
+  },
+  max: (val, max, type) => {
+    type = type || (typeof val)
+    if (type === 'number' || type === 'date') {
+      return Number(val) <= max
+    } else {
+      return val.length <= max
+    }
+  },
+  len: (val, len, type) => {
+    type = type || (typeof val)
+    let target = val
+    if (target.length === undefined) {
+      target = type === 'object' ? Object.keys(target) : String(target)
+    }
+    return target.length === len
+  },
+  notWhitespace: (val, config, type) => {
+    return !/^\s+$/.test(val)
+  },
+  pattern: (val, pattern, type) => {
+    return pattern.test(val)
+  },
+  custom: (val, custom, type) => {
+    return custom(val)
+  }
+}
+
+const addRule = createAddAPI(rules)
+
+export { rules, addRule }

src/common/helpers/validator/types.js

@@ -0,0 +1,31 @@
+import { createAddAPI } from '../util'
+
+const DATE_RE = /^(1|2)\d{3}[.\-/]\d{1,2}[.\-/]\d{1,2}$/
+
+const types = {
+  string: (val) => {
+    return typeof val === 'string'
+  },
+  number: (val) => {
+    return !isNaN(Number(val))
+  },
+  array: (val) => {
+    return Array.isArray(val)
+  },
+  date: (val) => {
+    return !isNaN(Number(val)) || DATE_RE.test(val)
+  },
+  email: (val) => {
+    return typeof val === 'string' && /^[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)+$/i.test(val)
+  },
+  tel: (val) => {
+    return typeof val === 'string' && /^(11|13|14|15|17|18|19)[0-9]{9}$/.test(val)
+  },
+  url: (val) => {
+    return typeof val === 'string' && /(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/.test(val)
+  }
+}
+
+const addType = createAddAPI(types)
+
+export { types, addType }

src/common/icon/cube-icon.styl

@@ -0,0 +1,208 @@
+@font-face
+  font-family: "cube-icon"
+  src:
+    url("./cubeic.woff") format("woff"),
+    url("./cubeic.ttf") format("truetype")
+
+[class^="cubeic-"], [class*=" cubeic-"]
+  font-family: "cube-icon"!important
+  font-size: 100%
+  font-style: normal
+  -webkit-font-smoothing: antialiased
+  -webkit-text-stroke-width: 0.2px
+  -moz-osx-font-smoothing: grayscale
+
+.cubeic-eye-invisible::before
+  content: "\e624"
+
+.cubeic-eye-visible::before
+  content: "\e625"
+
+.cubeic-square-right::before
+  content: "\e67d"
+
+.cubeic-select::before
+  content: "\e609"
+
+.cubeic-pulldown::before
+  content: "\e603"
+
+.cubeic-pullup::before
+  content: "\e604"
+
+.cubeic-more::before
+  content: "\e607"
+
+.cubeic-back::before
+  content: "\e608"
+
+.cubeic-arrow::before
+  content: "\e60b"
+
+.cubeic-close::before
+  content: "\e60d"
+
+.cubeic-warn::before
+  content: "\e614"
+
+.cubeic-question::before
+  content: "\e616"
+
+.cubeic-right::before
+  content: "\e617"
+
+.cubeic-wrong::before
+  content: "\e618"
+
+.cubeic-info::before
+  content: "\e619"
+
+.cubeic-remove::before
+  content: "\e61a"
+
+.cubeic-add::before
+  content: "\e61c"
+
+.cubeic-share::before
+  content: "\e631"
+
+.cubeic-no-wifi::before
+  content: "\e632"
+
+.cubeic-smile::before
+  content: "\e634"
+
+.cubeic-sad::before
+  content: "\e636"
+
+.cubeic-email::before
+  content: "\e637"
+
+.cubeic-game::before
+  content: "\e638"
+
+.cubeic-wifi::before
+  content: "\e639"
+
+.cubeic-hot::before
+  content: "\e63b"
+
+.cubeic-notification::before
+  content: "\e63d"
+
+.cubeic-delete::before
+  content: "\e63e"
+
+.cubeic-vip::before
+  content: "\e63f"
+
+.cubeic-mute::before
+  content: "\e640"
+
+.cubeic-danger::before
+  content: "\e641"
+
+.cubeic-volume::before
+  content: "\e642"
+
+.cubeic-bad::before
+  content: "\e643"
+
+.cubeic-mobile-phone::before
+  content: "\e644"
+
+.cubeic-aim::before
+  content: "\e645"
+
+.cubeic-navigation::before
+  content: "\e64d"
+
+.cubeic-safe-pay::before
+  content: "\e64e"
+
+.cubeic-tag::before
+  content: "\e64f"
+
+.cubeic-lock::before
+  content: "\e651"
+
+.cubeic-unlock::before
+  content: "\e652"
+
+.cubeic-edit::before
+  content: "\e653"
+
+.cubeic-scan::before
+  content: "\e654"
+
+.cubeic-qr-code::before
+  content: "\e655"
+
+.cubeic-calendar::before
+  content: "\e659"
+
+.cubeic-time::before
+  content: "\e65f"
+
+.cubeic-red-packet::before
+  content: "\e664"
+
+.cubeic-star::before
+  content: "\e668"
+
+.cubeic-setting::before
+  content: "\e669"
+
+.cubeic-home::before
+  content: "\e66d"
+
+.cubeic-credit-card::before
+  content: "\e66e"
+
+.cubeic-mall::before
+  content: "\e670"
+
+.cubeic-microphone::before
+  content: "\e673"
+
+.cubeic-search::before
+  content: "\e674"
+
+.cubeic-good::before
+  content: "\e675"
+
+.cubeic-alert::before
+  content: "\e676"
+
+.cubeic-picture::before
+  content: "\e677"
+
+.cubeic-message::before
+  content: "\e678"
+
+.cubeic-phone::before
+  content: "\e67a"
+
+.cubeic-location::before
+  content: "\e67b"
+
+.cubeic-like::before
+  content: "\e67c"
+
+.cubeic-camera::before
+  content: "\e67e"
+
+.cubeic-person::before
+  content: "\e67f"
+
+.cubeic-round-border::before
+  content: "\e683"
+
+.cubeic-important::before
+  content: "\e68b"
+
+.cubeic-ok::before
+  content: "\e68c"
+
+.cubeic-square-border::before
+  content: "\e990"

src/common/js/date.js

@@ -0,0 +1,23 @@
+export function formatDate (date, fmt) {
+    if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+    }
+    let o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+    };
+    for (let k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+    let str = o[k] + '';
+    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
+    }
+    }
+    return fmt;
+    };
+    
+    function padLeftZero (str) {
+    return ('00' + str).substr(str.length);
+    };

src/common/js/util.js

@@ -0,0 +1,61 @@
+var SIGN_REGEXP = /([yMdhsm])(\1*)/g;
+var DEFAULT_PATTERN = 'yyyy-MM-dd';
+function padding(s, len) {
+    var len = len - (s + '').length;
+    for (var i = 0; i < len; i++) { s = '0' + s; }
+    return s;
+};
+
+export default {
+    getQueryStringByName: function (name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        var r = window.location.search.substr(1).match(reg);
+        var context = "";
+        if (r != null)
+            context = r[2];
+        reg = null;
+        r = null;
+        return context == null || context == "" || context == "undefined" ? "" : context;
+    },
+    formatDate: {
+
+
+        format: function (date, pattern) {
+            pattern = pattern || DEFAULT_PATTERN;
+            return pattern.replace(SIGN_REGEXP, function ($0) {
+                switch ($0.charAt(0)) {
+                    case 'y': return padding(date.getFullYear(), $0.length);
+                    case 'M': return padding(date.getMonth() + 1, $0.length);
+                    case 'd': return padding(date.getDate(), $0.length);
+                    case 'w': return date.getDay() + 1;
+                    case 'h': return padding(date.getHours(), $0.length);
+                    case 'm': return padding(date.getMinutes(), $0.length);
+                    case 's': return padding(date.getSeconds(), $0.length);
+                }
+            });
+        },
+        parse: function (dateString, pattern) {
+            var matchs1 = pattern.match(SIGN_REGEXP);
+            var matchs2 = dateString.match(/(\d)+/g);
+            if (matchs1.length == matchs2.length) {
+                var _date = new Date(1970, 0, 1);
+                for (var i = 0; i < matchs1.length; i++) {
+                    var _int = parseInt(matchs2[i]);
+                    var sign = matchs1[i];
+                    switch (sign.charAt(0)) {
+                        case 'y': _date.setFullYear(_int); break;
+                        case 'M': _date.setMonth(_int - 1); break;
+                        case 'd': _date.setDate(_int); break;
+                        case 'h': _date.setHours(_int); break;
+                        case 'm': _date.setMinutes(_int); break;
+                        case 's': _date.setSeconds(_int); break;
+                    }
+                }
+                return _date;
+            }
+            return null;
+        }
+
+    }
+
+};

src/common/lang/date.js

@@ -0,0 +1,109 @@
+const DAY_TIMESTAMP = 60 * 60 * 24 * 1000
+const HOUR_TIMESTAMP = 60 * 60 * 1000
+const MINUTE_TIMESTAMP = 60 * 1000
+
+function formatType(type, format, value, regExpAttributes) {
+  const regExpMap = {
+    year: '(Y+)',
+    month: '(M+)',
+    date: '(D+)',
+    hour: '(h+)',
+    minute: '(m+)',
+    second: '(s+)',
+    quarter: '(q+)',
+    millisecond: '(S)'
+  }
+
+  if (new RegExp(regExpMap[type], regExpAttributes).test(format)) {
+    const replaceStr = type === 'year'
+                       ? value.toString().substr(4 - RegExp.$1.length)
+                       : (RegExp.$1.length === 1) ? value : pad(value)
+    format = format.replace(RegExp.$1, replaceStr)
+  }
+
+  return format
+}
+
+function pad(value) {
+  return ('00' + value).substr(('' + value).length)
+}
+
+function formatDate(date, format) {
+  const map = {
+    year: {
+      value: date.getFullYear(),
+      regExpAttributes: 'i'
+    },
+    month: {
+      value: date.getMonth() + 1
+    },
+    date: {
+      value: date.getDate(),
+      regExpAttributes: 'i'
+    },
+    hour: {
+      value: date.getHours(),
+      regExpAttributes: 'i'
+    },
+    minute: {
+      value: date.getMinutes()
+    },
+    second: {
+      value: date.getSeconds()
+    },
+    quarter: {
+      value: Math.floor((date.getMonth() + 3) / 3),
+      regExpAttributes: 'i'
+    },
+    millisecond: {
+      value: date.getMilliseconds()
+    }
+  }
+
+  for (const key in map) {
+    format = formatType(key, format, map[key].value, map[key].regExpAttributes)
+  }
+
+  return format
+}
+
+function getZeroStamp(date) {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  return +new Date(year + '/' + month + '/' + day + ' 00:00:00')
+}
+
+function getDayDiff(date1, date2) {
+  return Math.floor((getZeroStamp(date1) - getZeroStamp(date2)) / DAY_TIMESTAMP)
+}
+
+function getNow() {
+  return window.performance && window.performance.now ? (window.performance.now() + window.performance.timing.navigationStart) : +new Date()
+}
+
+function computeNatureMaxDay(month, year) {
+  let natureMaxDay = 30
+  if ([1, 3, 5, 7, 8, 10, 12].indexOf(month) > -1) {
+    natureMaxDay = 31
+  } else {
+    if (month === 2) {
+      natureMaxDay = !year || (!(year % 400) || (!(year % 4) && year % 100)) ? 29 : 28
+    }
+  }
+
+  return natureMaxDay
+}
+
+export {
+  DAY_TIMESTAMP,
+  HOUR_TIMESTAMP,
+  MINUTE_TIMESTAMP,
+  pad,
+  formatType,
+  formatDate,
+  getZeroStamp,
+  getDayDiff,
+  getNow,
+  computeNatureMaxDay
+}

src/common/lang/string.js

@@ -0,0 +1,12 @@
+const camelizeRE = /-(\w)/g
+export function camelize (str) {
+  str = String(str)
+  return str.replace(camelizeRE, function (m, c) {
+    return c ? c.toUpperCase() : ''
+  })
+}
+
+export function kebab (str) {
+  str = String(str)
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
+}

src/common/locale/index.js

@@ -0,0 +1,51 @@
+import defaultMessages from '../../locale/lang/zh-CN'
+import { warn } from '../helpers/debug'
+import { isUndef, isNumber } from '../helpers/util'
+import { formatDate } from '../lang/date'
+
+let proto
+
+const DEFAULT_LANG = 'zh-CN'
+
+const locale = {
+  name: 'locale',
+  install (Vue) {
+    if (locale.installed) return
+    proto = Vue.prototype
+    Vue.util.defineReactive(proto, '$cubeLang', DEFAULT_LANG)
+    proto['$cubeMessages'] = { [DEFAULT_LANG]: defaultMessages }
+    locale.installed = true
+  },
+  use (lang, messages) {
+    proto['$cubeLang'] = lang
+    const cubeMessages = proto['$cubeMessages']
+    // if messages have never been stored in vue.prototye
+    if (!(lang in cubeMessages)) {
+      cubeMessages[[lang]] = messages
+    }
+  },
+  helpers: {
+    toLocaleDateString (config, formatRules) {
+      /**
+       * Safari don't support formatRules like
+       * 'yyyy-MM-dd hh:mm:ss', so transfer it to 'yyyy/MM/dd hh:mm:ss'
+       */
+      const compatibleConfig = isNumber(config) ? config : config.replace(/-/g, '/')
+      const date = new Date(compatibleConfig)
+      /* istanbul ignore if */
+      if (isUndef(formatRules)) return date.toDateString()
+      return formatDate(date, formatRules)
+    }
+  },
+  addHelper (fnName, fn) {
+    // check existed helper fn
+    /* istanbul ignore if */
+    if (fnName in locale.helpers) {
+      warn(`${fnName} has already been registered on helpers function, please change another name`)
+      return
+    }
+    locale.helpers[fnName] = fn
+  }
+}
+
+export default locale

src/common/mixins/basic-picker.js

@@ -0,0 +1,44 @@
+const DEFAULT_KEYS = {
+  value: 'value',
+  text: 'text'
+}
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    selectedIndex: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    alias: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    valueKey() {
+      return this.alias.value || DEFAULT_KEYS.value
+    },
+    textKey() {
+      return this.alias.text || DEFAULT_KEYS.text
+    },
+    merge() {
+      return [this.data, this.selectedIndex]
+    }
+  },
+  watch: {
+    // Merge the watch handlers of data and selectedIndex into one.
+    merge(newVal) {
+      this.setData(newVal[0], newVal[1])
+    }
+  }
+}

src/common/mixins/deprecated.js

@@ -0,0 +1,22 @@
+import { tip } from '../../common/helpers/debug'
+import { kebab } from '../../common/lang/string'
+
+export default {
+  methods: {
+    _checkDeprecated() {
+      const props = this.$options.props
+      const componentName = this.$options.name
+
+      Object.entries(props).forEach(([key, prop]) => {
+        const deprecated = prop.deprecated
+
+        if (deprecated && this[key] !== undefined) {
+          tip(`The property "${kebab(key)}" is deprecated, please use the recommended property "${deprecated.replacedBy}" to replace it. Details could be found in https://didi.github.io/cube-ui/#/en-US/docs/${componentName.substr(5)}#cube-Propsconfiguration-anchor`, componentName)
+        }
+      })
+    }
+  },
+  mounted() {
+    this._checkDeprecated()
+  }
+}

src/common/mixins/locale.js

@@ -0,0 +1,25 @@
+import locale from '../locale'
+import { parsePath, isUndef } from '../helpers/util'
+import { warn } from '../helpers/debug'
+
+const TRANSLATION_ABSENT = `Translation is not registered correctly, ` +
+                           `you can call Locale.use() to install it.`
+
+export default {
+  computed: {
+    $t () {
+      const lang = this.$cubeLang
+      const messages = this.$cubeMessages[lang]
+      if (isUndef(messages)) {
+        warn(TRANSLATION_ABSENT)
+        return ''
+      }
+      return (path) => {
+        return parsePath(messages, path)
+      }
+    }
+  },
+  beforeCreate() {
+    locale.install(this.$root.constructor)
+  }
+}

src/common/mixins/picker.js

@@ -0,0 +1,34 @@
+export default {
+  props: {
+    title: {
+      type: String
+    },
+    subtitle: {
+      type: String
+    },
+    cancelTxt: {
+      type: String,
+      default: ''
+    },
+    confirmTxt: {
+      type: String,
+      default: ''
+    },
+    swipeTime: {
+      type: Number,
+      default: 2500
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    _cancelTxt () {
+      return this.cancelTxt || this.$t('cancel')
+    },
+    _confirmTxt () {
+      return this.confirmTxt || this.$t('ok')
+    }
+  }
+}

src/common/mixins/popup.js

@@ -0,0 +1,12 @@
+export default {
+  props: {
+    zIndex: {
+      type: Number,
+      default: 100
+    },
+    maskClosable: {
+      type: Boolean,
+      default: false
+    }
+  }
+}

src/common/mixins/scroll.js

@@ -0,0 +1,11 @@
+export default {
+  props: {
+    // the options of BetterScroll
+    options: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  }
+}

src/common/mixins/visibility.js

@@ -0,0 +1,45 @@
+const EVENT_TOGGLE = 'toggle'
+
+export default {
+  model: {
+    prop: 'visible',
+    event: EVENT_TOGGLE
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // If use the prop visible directly, the toggle will failed when user haven't set v-model as a reactive property.
+      // So we use the data isVisible instead.
+      isVisible: false
+    }
+  },
+  watch: {
+    isVisible(newVal) {
+      this.$emit(EVENT_TOGGLE, newVal)
+    }
+  },
+  mounted() {
+    this.$watch('visible', (newVal, oldVal) => {
+      if (newVal) {
+        this.show()
+      } else if (oldVal && !this._createAPI_reuse) {
+        this.hide()
+      }
+    }, {
+      immediate: true
+    })
+  },
+  methods: {
+    show() {
+      this.isVisible = true
+    },
+    hide() {
+      this.isVisible = false
+    }
+  }
+}

src/common/stylus/base.styl

@@ -0,0 +1,93 @@
+@require "./variable.styl"
+@require "./mixin.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
+
+.cube-safe-area-pb
+  safe-area-mixin(padding-bottom, bottom, true)
+
+@media (min-resolution: 2dppx)
+  .border-top-1px
+    &::before
+      width: 200%
+      transform: scale(.5)
+  .border-right-1px
+    &::after
+      height: 200%
+      transform: scale(.5)
+  .border-bottom-1px
+    &::after
+      width: 200%
+      transform: scale(.5)
+  .border-left-1px
+    &::before
+      height: 200%
+      transform: scale(.5)
+
+@media (min-resolution: 3dppx)
+  .border-top-1px
+    &::before
+      width: 300%
+      transform: scale(.333)
+  .border-right-1px
+    &::after
+      height: 300%
+      transform: scale(.333)
+  .border-bottom-1px
+    &::after
+      width: 300%
+      transform: scale(.333)
+  .border-left-1px
+    &::before
+      height: 300%
+      transform: scale(.333)

src/common/stylus/index.styl

@@ -0,0 +1,5 @@
+@require "./variable.styl"
+@require "./mixin.styl"
+@require "./reset.styl"
+@require "./base.styl"
+@require "../icon/cube-icon.styl"

src/common/stylus/mixin.styl

@@ -0,0 +1,63 @@
+border-1px($color = #ccc, $radius = 2PX, $style = solid)
+  position: relative
+  &::after
+    content: ""
+    pointer-events: none
+    display: block
+    position: absolute
+    left: 0
+    top: 0
+    transform-origin: 0 0
+    border: 1PX $style $color
+    border-radius: $radius
+    box-sizing border-box
+    width 100%
+    height 100%
+    @media (min-resolution: 2dppx)
+      width: 200%
+      height: 200%
+      border-radius: $radius * 2
+      transform: scale(.5)
+    @media (min-resolution: 3dppx)
+      width: 300%
+      height: 300%
+      border-radius: $radius * 3
+      transform: scale(.333)
+
+border-none()
+  &::before
+    display: none
+  &::after
+    display: none
+
+flex-fix()
+  flex: 1
+  flex-basis: 0.000000001px
+  width: 1%
+
+touch-active(type = orange)
+  if (type == orange)
+    &:active
+      color: #fcc1a6
+      background-color: rgba(250, 143, 84, .04)
+  else
+    &:active
+      color: #c6c6c6
+      background-color: rgba(0, 0, 0, .04)
+
+hide-scrollbar()
+  &::-webkit-scrollbar
+    width: 0
+    height: 0
+
+bg-image($url, $ext = ".png")
+  background-image: url($url + "@2x" + $ext)
+  @media (min-resolution: 3dppx)
+    background-image: url($url + "@3x" + $ext)
+
+functions = constant env
+safe-area-fn(fn, position)
+  s("%s(safe-area-inset-%s)", fn, position)
+safe-area-mixin(property, position, important = false)
+  for fn in functions
+    {property} safe-area-fn(fn, position) important == true ? !important : unquote("")

src/common/stylus/reset.styl

@@ -0,0 +1,55 @@
+/**
+ * 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
+  text-decoration: none
+
+li
+  list-style: none
+
+body
+  -webkit-text-size-adjust: none
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

src/common/stylus/theme/default.styl

@@ -0,0 +1,224 @@
+@require "../var/color.styl"
+
+// action-sheet
+$action-sheet-color := $color-grey
+$action-sheet-active-color := $color-orange
+$action-sheet-bgc := $color-white
+$action-sheet-active-bgc := $color-light-grey-opacity
+$action-sheet-title-color := $color-dark-grey
+$action-sheet-space-bgc := $color-mask-bg
+/// picker style
+$action-sheet-picker-cancel-color := $color-light-grey
+$action-sheet-picker-cancel-active-color := $color-light-grey-s
+
+// bubble
+
+// button
+$btn-color := $color-white
+$btn-bgc := $color-regular-blue
+$btn-active-bgc := $color-blue
+/// primary
+$btn-primary-color := $color-white
+$btn-primary-bgc := $color-orange
+$btn-primary-active-bgc := $color-dark-orange
+/// light
+$btn-light-color := $color-grey
+$btn-light-bgc := $color-light-grey-sss
+$btn-light-active-bgc := $color-active-grey
+/// outline
+$btn-outline-color := $color-grey
+$btn-outline-bgc := transparent
+$btn-outline-bdc := $color-grey
+$btn-outline-active-bgc := $color-grey-opacity
+$btn-outline-active-bdc := $color-grey
+/// outline-primary
+$btn-outline-primary-color := $color-orange
+$btn-outline-primary-bgc := transparent
+$btn-outline-primary-bdc := $color-orange
+$btn-outline-primary-active-bgc := $color-orange-opacity
+$btn-outline-primary-active-bdc := $color-dark-orange
+/// disabled
+$btn-disabled-color := $color-white
+$btn-disabled-bgc := $color-light-grey-s
+$btn-disabled-bdc := $color-light-grey-s
+
+// toolbar
+$toolbar-bgc := $color-light-grey-sss
+$toolbar-active-bgc := $color-active-grey
+
+// checkbox
+$checkbox-color := $color-grey
+$checkbox-icon-color := $color-light-grey-s
+/// checked
+$checkbox-checked-icon-color := $color-orange
+$checkbox-checked-icon-bgc := $color-white
+/// disabled
+$checkbox-disabled-icon-color := $color-light-grey-ss
+$checkbox-disabled-icon-bgc := $color-light-grey-ss
+// checkbox hollow
+$checkbox-hollow-checked-icon-color := $color-orange
+$checkbox-hollow-disabled-icon-color := $color-light-grey-ss
+// checkbox-group
+$checkbox-group-bgc := $color-white
+$checkbox-group-horizontal-bdc := $color-light-grey-s
+
+// radio
+$radio-group-bgc := $color-white
+$radio-group-horizontal-bdc := $color-light-grey-s
+$radio-color := $color-grey
+$radio-icon-color := $color-light-grey-s
+/// selected
+$radio-selected-icon-color := $color-white
+$radio-selected-icon-bgc := $color-orange
+/// disabled
+$radio-disabled-icon-bgc := $color-light-grey-ss
+// radio hollow
+$radio-hollow-selected-icon-color := $color-orange
+$radio-hollow-disabled-icon-color := $color-light-grey-ss
+
+//checker
+$checker-item-color := $color-grey
+$checker-item-bdc := $color-light-grey-sss
+$checker-item-bgc := $color-white
+$checker-item-active-color := $color-orange
+$checker-item-active-bdc := $color-orange
+$checker-item-active-bgc := $color-light-orange-opacity
+
+// dialog
+$dialog-color := $color-grey
+$dialog-bgc := $color-white
+$dialog-icon-color := $color-regular-blue
+$dialog-icon-bgc := $color-background
+$dialog-title-color := $color-dark-grey
+$dialog-close-color := $color-light-grey
+$dialog-btn-color := $color-light-grey
+$dialog-btn-bgc := $color-white
+$dialog-btn-active-bgc := $color-light-grey-opacity
+$dialog-btn-highlight-color := $color-orange
+$dialog-btn-highlight-active-bgc := $color-light-orange-opacity
+$dialog-btn-disabled-color := $color-light-grey
+$dialog-btn-disabled-active-bgc := transparent
+$dialog-btns-split-color := $color-row-line
+
+// index-list
+$index-list-bgc := $color-white
+$index-list-title-color := $color-dark-grey
+$index-list-anchor-color := $color-light-grey
+$index-list-anchor-bgc := #f7f7f7
+$index-list-item-color := $color-dark-grey
+$index-list-item-active-bgc := $color-light-grey-opacity
+$index-list-nav-color := $color-grey
+$index-list-nav-active-color := $color-orange
+
+// loading
+
+// picker
+$picker-bgc := $color-white
+$picker-title-color := $color-dark-grey
+$picker-subtitle-color := $color-light-grey
+$picker-confirm-btn-color := $color-orange
+$picker-confirm-btn-active-color := $color-light-orange
+$picker-cancel-btn-color := $color-light-grey
+$picker-cancel-btn-active-color := $color-light-grey-s
+$picker-item-color := $color-dark-grey
+
+// popup
+$popup-mask-bgc := rgb(37, 38, 45)
+$popup-mask-opacity := .4
+
+//scroll
+
+// slide
+$slide-dot-bgc := $color-light-grey-s
+$slide-dot-active-bgc := $color-orange
+
+// time-picker
+
+// tip
+$tip-color := $color-white
+$tip-bgc := $color-dark-grey-opacity
+
+// toast
+$toast-color := $color-light-grey-s
+$toast-bgc := rgba(37, 38, 45, 0.9)
+
+// upload
+$upload-btn-color := $color-grey
+$upload-btn-bgc := $color-white
+$upload-btn-active-bgc := $color-light-grey-opacity
+$upload-btn-box-shadow := 0 0 6px 2px $color-grey-opacity
+$upload-btn-border-color := #e5e5e5
+$upload-file-bgc := $color-white
+$upload-file-remove-color := rgba(0, 0, 0, .8)
+$upload-file-remove-bgc := $color-white
+$upload-file-state-bgc := $color-mask-bg
+$upload-file-success-color := $color-orange
+$upload-file-error-color := #f43530
+$upload-file-status-bgc := $color-white
+$upload-file-progress-color := $color-white
+
+// switch
+$switch-on-bgc := $color-orange
+$switch-off-bgc := $color-white
+$switch-off-border-color := #e4e4e4
+
+// input
+$input-color := $color-grey
+$input-bgc := $color-white
+$input-border-color := $color-row-line
+$input-focus-border-color := $color-orange
+$input-placeholder-color := $color-light-grey-s
+$input-clear-icon-color := $color-light-grey
+
+//textarea
+$textarea-color := $color-grey
+$textarea-bgc := $color-white
+$textarea-border-color := $color-row-line
+$textarea-focus-border-color := $color-orange
+$textarea-outline-color := $color-orange
+$textarea-placeholder-color := $color-light-grey-s
+$textarea-indicator-color := $color-light-grey-s
+
+// validator
+$validator-msg-def-color := #e64340
+
+// select
+$select-color := $color-grey
+$select-bgc := $color-white
+$select-disabled-color := #b8b8b8
+$select-disabled-bgc := $color-light-grey-opacity
+$select-border-color := $color-light-grey-s
+$select-border-active-color := $color-orange
+$select-icon-color := $color-light-grey
+$select-placeholder-color := $color-light-grey-s
+
+// swipe
+$swipe-btn-color := $color-white
+
+// form
+$form-color := $color-grey
+$form-bgc := $color-white
+$form-invalid-color := #e64340
+$form-group-legend-color := $color-light-grey
+$form-group-legend-bgc := $color-background
+$form-label-required-color := #e64340
+
+// drawer
+$drawer-color := $color-dark-grey
+$drawer-title-bdc := $color-light-grey-ss
+$drawer-title-bgc := $color-white
+$drawer-panel-bgc := $color-white
+$drawer-item-active-bgc := $color-light-grey-opacity
+
+// scroll-nav
+$scroll-nav-bgc := $color-white
+$scroll-nav-color := $color-grey
+$scroll-nav-active-color := $color-orange
+
+// image-preview
+$image-preview-counter-color := $color-white
+
+// tab-bar & tab-panel
+$tab-color := $color-grey
+$tab-active-color := $color-dark-orange
+$tab-slider-bgc := $color-dark-orange

src/common/stylus/var/box-shadow.styl

@@ -0,0 +1,3 @@
+// box-shadow
+
+$box-shadow-content = 0 1px 3px rgba(0, 0, 0, .1)

src/common/stylus/var/color.styl

@@ -0,0 +1,36 @@
+// color vars
+//// basic
+$color-orange = #fc9153
+$color-regular-blue = #4a4c5b
+$color-background = #f3f4f5
+$color-white = #fff
+
+//// gray
+$color-dark-grey = #333
+$color-grey = #666
+$color-light-grey = #999
+$color-light-grey-s = #ccc
+$color-light-grey-ss = #eee
+$color-light-grey-sss = #fcfcfc
+$color-active-grey = #e8e8e8
+
+$color-dark-grey-opacity = rgba(74, 76, 91, 0.8)
+$color-grey-opacity = rgba(0, 0, 0, .08)
+$color-light-grey-opacity = rgba(0, 0, 0, .04)
+
+//// orange
+$color-dark-orange = #e8864c
+$color-light-orange = #fdc2a5
+$color-orange-opacity = rgba(252, 145, 83, .08)
+$color-light-orange-opacity = rgba(252, 145, 83, .04)
+
+//// blue
+$color-blue = #444654
+
+//// row line
+$color-row-line = #ebebeb
+//// column line
+$color-col-line = #f5f5f5
+
+/// mask
+$color-mask-bg = rgba(37, 38, 45, .4)

src/common/stylus/var/size.styl

@@ -0,0 +1,12 @@
+// font-size vars
+$fontsize-large-xxxx = 30px
+$fontsize-large-xxx = 24px
+$fontsize-large-xx = 20px
+$fontsize-large-x = 18px
+$fontsize-large = 16px
+$fontsize-medium = 14px
+$fontsize-small = 12px
+$fontsize-small-s = 10px
+
+// radius-size
+$radius-size-medium = 5px

src/common/stylus/variable.styl

@@ -0,0 +1,4 @@
+@require "./var/color.styl"
+@require "./var/size.styl"
+@require "./var/box-shadow.styl"
+@require "./theme/default.styl"

src/components/ConsumableMaterial/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="eventInformation">
+    <div class="head">
+      <p>
+        <span>{{ model.consumableName }}{{ model.consumableBrandModel }}</span>
+        <span class="textRight">单价：<strong class="fontBold">{{ model.consumableEndPrice }}元</strong></span>
+      </p>
+    </div>
+    <p>
+      <span class="fl"></span>
+      <span class="fr defaultColor"><strong class="fontBold">×{{ model.consumablesNum }}</strong>&emsp;&emsp;<span class="totalPrice">总价：<strong class="fontBold">{{model.consumablesNum * model.consumableEndPrice}}元</strong></span></span>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ConsumableMaterial",
+  data() {
+    return {};
+  },
+  props: ["model", "id", "summaryId", "incidentId", "noClick"],
+};
+</script>
+
+<style lang="less" scoped>
+.eventInformation {
+  .fl{
+    float: left;
+  }
+  .fr{
+    float: right;
+  }
+  .defaultColor{
+    color: #005395;
+  }
+  .totalPrice{
+    display: inline-block;
+    width: 2rem;
+    text-align: right;
+  }
+  .boeder_B {
+    border-bottom: 0.01rem solid #ccc;
+  }
+  .shows {
+    display: none;
+  }
+  .head {
+    border-bottom: 0.01rem solid #e6e6e6;
+    p {
+      padding: 0.24rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      i {
+        color: #00559d;
+      }
+      span {
+        flex: 1;
+        flex-shrink: 0;
+        width: 50%;
+        &.textRight{
+          text-align: right;
+        }
+      }
+    }
+  }
+  p {
+    line-height: 0.4rem;
+    padding: 0.1rem 0.24rem;
+    overflow: hidden;
+    .overflowEllipsis2 {
+      margin-left: 1.96rem;
+    }
+  }
+  .info_hide {
+    padding: 0.2rem 0.24rem;
+    border-bottom: 0.01rem solid #e6e6e6;
+    .hide {
+      color: #00559d;
+    }
+  }
+  .imgs-container {
+    a {
+      color: #03c !important;
+      &:visited {
+        color: #551a8b !important;
+      }
+    }
+    img {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-right: 0.7rem;
+      &:nth-child(1) {
+        margin-left: 0.75rem;
+      }
+    }
+  }
+  .progress {
+    padding: 0.2rem 0.2rem;
+    overflow: hidden;
+    transition-duration: 0.2s;
+    transition-timing-function: linear;
+    &.progressHide {
+      height: 1.7rem;
+    }
+    .progress_info {
+      overflow: hidden;
+      margin-bottom: 0.1rem;
+      &:nth-last-child(1) {
+        .cont {
+          border: none !important;
+        }
+      }
+      .progress_info_L {
+        float: left;
+        color: #333;
+        max-width: 18%;
+      }
+      .progress_info_R {
+        float: right;
+        margin-left: 0.09rem;
+        width: 80%;
+        font-size: 0.25rem;
+        .time {
+          i {
+            margin-left: -0.15rem;
+            &.icon-icon_weizuo {
+              color: #005495;
+            }
+            &.icon-icon_zhengzaijinx {
+              color: #48a843;
+              font-size: 0.37rem;
+            }
+          }
+          span {
+            margin-left: 0.15rem;
+          }
+        }
+        .cont {
+          border-left: 1px solid #999;
+          padding-left: 0.4rem;
+          min-height: 0.4rem;
+          &.blue {
+            border-left: 1px solid #005395;
+          }
+        }
+
+        .text1 {
+          font-size: 0.15rem;
+        }
+        .text2 {
+          color: #666;
+          word-break: break-all;
+        }
+        p {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/WorkHourManagement/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="eventInformation">
+    <div class="head">
+      <p>
+        <span>{{ model.workName }}</span>
+        <span class="textRight">单价：<strong class="fontBold">{{ model.wage }}元</strong></span>
+      </p>
+    </div>
+    <p>
+      <span class="fl"></span>
+      <span class="fr defaultColor"><strong class="fontBold">×{{ model.workHourNum2 }}{{ model.workUnit }}</strong>&emsp;&emsp;<span class="totalPrice">总价：<strong class="fontBold">{{model.workHourNum2 * model.wage}}元</strong></span></span>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WorkHourManagement",
+  data() {
+    return {};
+  },
+  props: ["model", "id", "summaryId", "incidentId", "summaryObj", "noClick"],
+};
+</script>
+
+<style lang="less" scoped>
+.eventInformation {
+  .fl{
+    float: left;
+  }
+  .fr{
+    float: right;
+  }
+  .defaultColor{
+    color: #005395;
+  }
+  .totalPrice{
+    display: inline-block;
+    width: 2rem;
+    text-align: right;
+  }
+  .boeder_B {
+    border-bottom: 0.01rem solid #ccc;
+  }
+  .shows {
+    display: none;
+  }
+  .head {
+    border-bottom: 0.01rem solid #e6e6e6;
+    p {
+      padding: 0.24rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      i {
+        color: #00559d;
+      }
+      span {
+        flex: 1;
+        flex-shrink: 0;
+        width: 50%;
+        &.textRight{
+          text-align: right;
+        }
+      }
+    }
+  }
+  p {
+    line-height: 0.4rem;
+    padding: 0.1rem 0.24rem;
+    overflow: hidden;
+    .overflowEllipsis2 {
+      margin-left: 1.96rem;
+    }
+  }
+  .info_hide {
+    padding: 0.2rem 0.24rem;
+    border-bottom: 0.01rem solid #e6e6e6;
+    .hide {
+      color: #00559d;
+    }
+  }
+  .imgs-container {
+    a {
+      color: #03c !important;
+      &:visited {
+        color: #551a8b !important;
+      }
+    }
+    img {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-right: 0.7rem;
+      &:nth-child(1) {
+        margin-left: 0.75rem;
+      }
+    }
+  }
+  .progress {
+    padding: 0.2rem 0.2rem;
+    overflow: hidden;
+    transition-duration: 0.2s;
+    transition-timing-function: linear;
+    &.progressHide {
+      height: 1.7rem;
+    }
+    .progress_info {
+      overflow: hidden;
+      margin-bottom: 0.1rem;
+      &:nth-last-child(1) {
+        .cont {
+          border: none !important;
+        }
+      }
+      .progress_info_L {
+        float: left;
+        color: #333;
+        max-width: 18%;
+      }
+      .progress_info_R {
+        float: right;
+        margin-left: 0.09rem;
+        width: 80%;
+        font-size: 0.25rem;
+        .time {
+          i {
+            margin-left: -0.15rem;
+            &.icon-icon_weizuo {
+              color: #005495;
+            }
+            &.icon-icon_zhengzaijinx {
+              color: #48a843;
+              font-size: 0.37rem;
+            }
+          }
+          span {
+            margin-left: 0.15rem;
+          }
+        }
+        .cont {
+          border-left: 1px solid #999;
+          padding-left: 0.4rem;
+          min-height: 0.4rem;
+          &.blue {
+            border-left: 1px solid #005395;
+          }
+        }
+
+        .text1 {
+          font-size: 0.15rem;
+        }
+        .text2 {
+          color: #666;
+          word-break: break-all;
+        }
+        p {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/action-sheet/action-sheet.vue

@@ -0,0 +1,188 @@
+<template>
+  <transition name="cube-action-sheet-fade">
+    <cube-popup
+      type="action-sheet"
+      :class="{'cube-action-sheet_picker': pickerStyle}"
+      :center="false"
+      :mask="true"
+      :z-index="zIndex"
+      v-show="isVisible"
+      @mask-click="maskClick">
+      <transition name="cube-action-sheet-move">
+        <div class="cube-action-sheet-panel cube-safe-area-pb" v-show="isVisible" @click.stop>
+          <h1 class="cube-action-sheet-title border-bottom-1px" v-show="pickerStyle || title">{{title}}</h1>
+          <div class="cube-action-sheet-content">
+            <ul class="cube-action-sheet-list">
+              <li
+                class="cube-action-sheet-item border-bottom-1px"
+                v-for="(item, index) in data"
+                :data-align="item.align"
+                :class="[
+                  item.class || '',
+                  index === active ? 'cube-action-sheet-item_active': ''
+                ]"
+                v-html="item.content"
+                @click="itemClick(item, index)"></li>
+            </ul>
+          </div>
+          <div class="cube-action-sheet-space"></div>
+          <div class="cube-action-sheet-cancel" @click="cancel"><span>{{_cancelTxt}}</span></div>
+        </div>
+      </transition>
+    </cube-popup>
+  </transition>
+</template>
+
+<script type="text/ecmascript-6">
+  import CubePopup from '../popup/popup.vue'
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
+  import localeMixin from '../../common/mixins/locale'
+
+  const COMPONENT_NAME = 'cube-action-sheet'
+  const EVENT_SELECT = 'select'
+  const EVENT_CANCEL = 'cancel'
+
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [visibilityMixin, popupMixin, localeMixin],
+    props: {
+      data: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      active: {
+        type: Number,
+        default: -1
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      pickerStyle: {
+        type: Boolean,
+        default: false
+      },
+      maskClosable: {
+        type: Boolean,
+        default: true
+      },
+      cancelTxt: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      _cancelTxt () {
+        return this.cancelTxt || this.$t('cancel')
+      }
+    },
+    methods: {
+      maskClick() {
+        this.maskClosable && this.cancel()
+      },
+      cancel() {
+        this.hide()
+        this.$emit(EVENT_CANCEL)
+      },
+      itemClick(item, index) {
+        this.hide()
+        this.$emit(EVENT_SELECT, item, index)
+      }
+    },
+    components: {
+      CubePopup
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/mixin.styl"
+  @require "../../common/stylus/variable.styl"
+
+  .cube-action-sheet-fade-enter, .cube-action-sheet-fade-leave-active
+    opacity: 0
+  .cube-action-sheet-fade-enter-active, .cube-action-sheet-fade-leave-active
+    transition: all .3s ease-in-out
+
+  .cube-action-sheet-panel
+    text-align: center
+    font-size: $fontsize-medium
+    background-color: $action-sheet-bgc
+  .cube-action-sheet-move-enter, .cube-action-sheet-move-leave-active
+    transform: translate3d(0, 100%, 0)
+  .cube-action-sheet-move-enter-active, .cube-action-sheet-move-leave-active
+    transition: all .3s ease-in-out
+  .cube-action-sheet-cancel
+    background-color: $action-sheet-bgc
+  .cube-action-sheet-cancel span, .cube-action-sheet-title, .cube-action-sheet-item
+    display: block
+    padding: 17px 16px
+    margin: 0
+    text-align: center
+    overflow: hidden
+    white-space: nowrap
+    font-size: $fontsize-large
+    font-weight: normal
+    line-height: 1
+    color: $action-sheet-color
+    background-color: $action-sheet-bgc
+
+  .cube-action-sheet-cancel span, .cube-action-sheet-item
+    &:active
+      background-color: $action-sheet-active-bgc
+
+  .cube-action-sheet-title
+    padding-top: 16px
+    padding-bottom: 16px
+    color: $action-sheet-title-color
+    font-size: $fontsize-large-x
+
+  .cube-action-sheet-content
+    overflow: hidden
+    background: $action-sheet-bgc
+
+  .cube-action-sheet-list
+    list-style: none
+
+  .cube-action-sheet-item
+    list-style: none
+    user-select: none
+    &:last-of-type
+      border-none()
+    &[data-align="left"]
+      text-align: left
+    &[data-align="right"]
+      text-align: right
+
+  .cube-action-sheet-space
+    height: 6px
+    background-color: $action-sheet-space-bgc
+
+  .cube-action-sheet-item_active
+    color: $action-sheet-active-color
+
+  .cube-action-sheet_picker
+    .cube-action-sheet-space
+      height: 0
+    .cube-action-sheet-title
+      height: 1em
+      padding-top: 21px
+      padding-bottom: 21px
+
+    .cube-action-sheet-cancel
+      position: absolute
+      top: 0
+      background-color: transparent
+      span
+        padding-top: 23px
+        padding-bottom: 23px
+        color: $action-sheet-picker-cancel-color
+        font-size: $fontsize-medium
+        background-color: transparent
+        &:active
+          color: $action-sheet-picker-cancel-active-color
+          background-color: transparent
+</style>

src/components/bubble/bubble.vue

@@ -0,0 +1,137 @@
+<template>
+  <canvas ref="bubble" :width="width" :height="height" :style="style"></canvas>
+</template>
+
+<script type="text/ecmascript-6">
+  export default {
+    props: {
+      y: {
+        type: Number,
+        default: 0
+      }
+    },
+    data() {
+      return {
+        width: 50,
+        height: 80
+      }
+    },
+    computed: {
+      distance() {
+        return Math.max(0, Math.min(this.y * this.ratio, this.maxDistance))
+      },
+      style() {
+        return `width:${this.width / this.ratio}px;height:${this.height / this.ratio}px`
+      }
+    },
+    mounted() {
+      this.ratio = window.devicePixelRatio
+      this.width *= this.ratio
+      this.height *= this.ratio
+      this.initRadius = 18 * this.ratio
+      this.minHeadRadius = 12 * this.ratio
+      this.minTailRadius = 5 * this.ratio
+      this.initArrowRadius = 10 * this.ratio
+      this.minArrowRadius = 6 * this.ratio
+      this.arrowWidth = 3 * this.ratio
+      this.maxDistance = 40 * this.ratio
+      this.initCenterX = 25 * this.ratio
+      this.initCenterY = 25 * this.ratio
+      this.headCenter = {
+        x: this.initCenterX,
+        y: this.initCenterY
+      }
+      this._draw()
+    },
+    methods: {
+      _draw() {
+        const bubble = this.$refs.bubble
+        let ctx = bubble.getContext('2d')
+        ctx.clearRect(0, 0, bubble.width, bubble.height)
+
+        this._drawBubble(ctx)
+
+        this._drawArrow(ctx)
+      },
+      _drawBubble(ctx) {
+        ctx.save()
+        ctx.beginPath()
+
+        const rate = this.distance / this.maxDistance
+        const headRadius = this.initRadius - (this.initRadius - this.minHeadRadius) * rate
+
+        this.headCenter.y = this.initCenterY - (this.initRadius - this.minHeadRadius) * rate
+
+        // upper semicircle
+        ctx.arc(this.headCenter.x, this.headCenter.y, headRadius, 0, Math.PI, true)
+
+        // left bessel
+        const tailRadius = this.initRadius - (this.initRadius - this.minTailRadius) * rate
+        const tailCenter = {
+          x: this.headCenter.x,
+          y: this.headCenter.y + this.distance
+        }
+
+        const tailPointL = {
+          x: tailCenter.x - tailRadius,
+          y: tailCenter.y
+        }
+        const controlPointL = {
+          x: tailPointL.x,
+          y: tailPointL.y - this.distance / 2
+        }
+
+        ctx.quadraticCurveTo(controlPointL.x, controlPointL.y, tailPointL.x, tailPointL.y)
+
+        // lower semicircle
+        ctx.arc(tailCenter.x, tailCenter.y, tailRadius, Math.PI, 0, true)
+
+        // right bessel
+        const headPointR = {
+          x: this.headCenter.x + headRadius,
+          y: this.headCenter.y
+        }
+        const controlPointR = {
+          x: tailCenter.x + tailRadius,
+          y: headPointR.y + this.distance / 2
+        }
+        ctx.quadraticCurveTo(controlPointR.x, controlPointR.y, headPointR.x, headPointR.y)
+
+        ctx.fillStyle = 'rgb(170,170,170)'
+        ctx.fill()
+        ctx.strokeStyle = 'rgb(153,153,153)'
+        ctx.stroke()
+        ctx.restore()
+      },
+      _drawArrow(ctx) {
+        ctx.save()
+        ctx.beginPath()
+
+        const rate = this.distance / this.maxDistance
+        const arrowRadius = this.initArrowRadius - (this.initArrowRadius - this.minArrowRadius) * rate
+
+        // inner circle
+        ctx.arc(this.headCenter.x, this.headCenter.y, arrowRadius - (this.arrowWidth - rate), -Math.PI / 2, 0, true)
+
+        // outer circle
+        ctx.arc(this.headCenter.x, this.headCenter.y, arrowRadius, 0, Math.PI * 3 / 2, false)
+
+        ctx.lineTo(this.headCenter.x, this.headCenter.y - arrowRadius - this.arrowWidth / 2 + rate)
+        ctx.lineTo(this.headCenter.x + this.arrowWidth * 2 - rate * 2, this.headCenter.y - arrowRadius + this.arrowWidth / 2)
+
+        ctx.lineTo(this.headCenter.x, this.headCenter.y - arrowRadius + this.arrowWidth * 3 / 2 - rate)
+
+        ctx.fillStyle = 'rgb(255,255,255)'
+        ctx.fill()
+        ctx.strokeStyle = 'rgb(170,170,170)'
+        ctx.stroke()
+        ctx.restore()
+      }
+    },
+    watch: {
+      y() {
+        this._draw()
+      }
+    }
+  }
+</script>

src/components/button/button.vue

@@ -0,0 +1,148 @@
+<template>
+  <button
+    class="cube-btn"
+    :type="type"
+    :class="btnClass"
+    @click="handleClick">
+    <i :class="icon" v-if="icon"></i>
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+  const COMPONENT_NAME = 'cube-button'
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      icon: {
+        type: String,
+        default: ''
+      },
+      active: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      inline: {
+        type: Boolean,
+        default: false
+      },
+      primary: {
+        type: Boolean,
+        default: false
+      },
+      outline: {
+        type: Boolean,
+        default: false
+      },
+      light: {
+        type: Boolean,
+        default: false
+      },
+      type: {
+        type: String,
+        default: 'button'
+      }
+    },
+    computed: {
+      btnClass() {
+        return {
+          'cube-btn_active': this.active,
+          'cube-btn_disabled': this.disabled,
+          'cube-btn-inline': this.inline,
+          'cube-btn-primary': this.primary,
+          'cube-btn-outline': this.outline,
+          'cube-btn-outline-primary': this.outline && this.primary,
+          'cube-btn-light': this.light
+        }
+      }
+    },
+    methods: {
+      handleClick(event) {
+        if (this.disabled) {
+          event.preventDefault()
+          event.stopPropagation()
+          return
+        }
+        this.$emit('click', event)
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+  @require "../../common/stylus/mixin.styl"
+  btn-active($bg, $border = null)
+    &.cube-btn_active, &:active
+      background: $bg
+      if $border != null
+        border-1px($border)
+
+  .cube-btn
+    display: block
+    margin: 0
+    padding: 17px 16px
+    width: 100%
+    text-align: center
+    white-space: nowrap
+    cursor: pointer
+    font-size: $fontsize-large
+    line-height: 1
+    color: $btn-color
+    background: $btn-bgc
+    outline: none
+    border: none
+    border-radius: 2px
+    box-sizing: border-box
+    -webkit-tap-highlight-color: transparent
+    btn-active($btn-active-bgc)
+    > i
+      display: inline-block
+      margin-right: 4px
+      font-size: 100%
+      transform: scale(1.13)
+      transform-origin: right center
+
+  .cube-btn-inline
+    width: auto
+    display: inline-block
+    vertical-align: middle
+    padding: 9px 10px
+    font-size: $fontsize-small
+    > i
+      margin-right: 2px
+      transform: scale(1.14)
+
+  .cube-btn-primary
+    color: $btn-primary-color
+    background: $btn-primary-bgc
+    btn-active($btn-primary-active-bgc)
+
+  .cube-btn-light
+    color: $btn-light-color
+    background: $btn-light-bgc
+    box-shadow: $box-shadow-content
+    btn-active($btn-light-active-bgc)
+
+  .cube-btn-outline
+    color: $btn-outline-color
+    background: $btn-outline-bgc
+    border-1px($btn-outline-bdc)
+    btn-active($btn-outline-active-bgc, $btn-outline-active-bdc)
+
+  .cube-btn-outline-primary
+    color: $btn-outline-primary-color
+    background: $btn-outline-primary-bgc
+    border-1px($btn-outline-primary-bdc)
+    btn-active($btn-outline-primary-active-bgc, $btn-outline-primary-active-bdc)
+
+  .cube-btn_disabled
+    color: $btn-disabled-color
+    background: $btn-disabled-bgc
+    border-1px($btn-disabled-bdc)
+    btn-active($btn-disabled-bgc, $btn-disabled-bdc)
+</style>

src/components/cascade-picker/cascade-picker.vue

@@ -0,0 +1,110 @@
+<template>
+  <cube-picker
+    ref="picker"
+    v-model="isVisible"
+    :data="pickerData"
+    :selected-index="pickerSelectedIndex"
+    :pending="pending"
+    :title="title"
+    :subtitle="subtitle"
+    :z-index="zIndex"
+    :cancel-txt="_cancelTxt"
+    :confirm-txt="_confirmTxt"
+    :swipe-time="swipeTime"
+    :mask-closable="maskClosable"
+    @select="_pickerSelect"
+    @cancel="_pickerCancel"
+    @change="_pickerChange">
+  </cube-picker>
+</template>
+
+<script type="text/ecmascript-6">
+  import CubePicker from '../picker/picker.vue'
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
+  import basicPickerMixin from '../../common/mixins/basic-picker'
+  import pickerMixin from '../../common/mixins/picker'
+  import localeMixin from '../../common/mixins/locale'
+
+  const COMPONENT_NAME = 'cube-cascade-picker'
+  const EVENT_SELECT = 'select'
+  const EVENT_CANCEL = 'cancel'
+  const EVENT_CHANGE = 'change'
+
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [visibilityMixin, popupMixin, basicPickerMixin, pickerMixin, localeMixin],
+    props: {
+      async: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        cascadeData: this.data.slice(),
+        pickerSelectedIndex: this.selectedIndex.slice(),
+        pickerData: [],
+        pending: false
+      }
+    },
+    created() {
+      this._updatePickerData()
+    },
+    methods: {
+      setData(data, selectedIndex = []) {
+        this.pending = false
+        this.cascadeData = data.slice()
+        this.pickerSelectedIndex = selectedIndex.slice()
+        this._updatePickerData()
+      },
+      _pickerSelect(selectedVal, selectedIndex, selectedText) {
+        this.$emit(EVENT_SELECT, selectedVal, selectedIndex, selectedText)
+      },
+      _pickerCancel() {
+        this.$emit(EVENT_CANCEL)
+      },
+      _pickerChange(i, newIndex) {
+        if (newIndex !== this.pickerSelectedIndex[i]) {
+          this.pickerSelectedIndex.splice(i, 1, newIndex)
+          this.async
+            ? (this.pending = i !== this.pickerData.length - 1)
+            : this._updatePickerData(i + 1)
+        }
+        this.$emit(EVENT_CHANGE, i, newIndex)
+      },
+      _updatePickerData(fromColumn = 0) {
+        let data = this.cascadeData
+        let i = 0
+        while (data) {
+          if (i >= fromColumn) {
+            let columnData = []
+            data.forEach((item) => {
+              columnData.push({
+                value: item[this.valueKey],
+                text: item[this.textKey]
+              })
+            })
+            this.pickerData[i] = columnData
+            /* refillColumn could only be called after show() */
+            this.pickerSelectedIndex[i] = fromColumn === 0
+              ? (this.pickerSelectedIndex[i] < data.length ? this.pickerSelectedIndex[i] || 0 : 0)
+              : this.$refs.picker.refillColumn(i, columnData)
+          }
+          data = data.length ? data[this.pickerSelectedIndex[i]].children : null
+
+          i++
+        }
+
+        if (i < this.pickerData.length) {
+          this.pickerData.splice(i, this.pickerData.length - i)
+        }
+
+        this.pickerData = this.pickerData.slice()
+      }
+    },
+    components: {
+      CubePicker
+    }
+  }
+</script>

src/components/checkbox-group/checkbox-group.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="cube-checkbox-group" ref="group" :class="groupClass" :data-horz="horizontal">
+    <slot>
+      <cube-checkbox
+        v-for="(option, index) in options"
+        :key="index"
+        :option="option"
+        :shape="shape"
+        :position="position"
+        :hollow-style="hollowStyle" />
+    </slot>
+  </div>
+</template>
+<script type="text/ecmascript-6">
+  import CubeCheckbox from '../checkbox/checkbox.vue'
+  const COMPONENT_NAME = 'cube-checkbox-group'
+
+  const EVENT_INPUT = 'input'
+  const EVENT_CHECKED = 'checked'
+  const EVENT_CANCLE_CHECKED = 'cancel-checked'
+
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      value: {
+        type: Array
+      },
+      horizontal: {
+        type: Boolean,
+        default: false
+      },
+      shape: {
+        type: String,
+        default: 'circle'
+      },
+      position: {
+        type: String,
+        default: 'left'
+      },
+      hollowStyle: {
+        type: Boolean,
+        default: false
+      },
+      options: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      min: {
+        type: Number,
+        default: 0
+      },
+      max: {
+        type: Number,
+        default: Infinity
+      }
+    },
+    data () {
+      return {
+        _value: [],
+        _checkboxGroup: true
+      }
+    },
+    computed: {
+      groupClass() {
+        if (!this.horizontal) {
+          return 'border-top-1px border-bottom-1px'
+        }
+      }
+    },
+    watch: {
+      value: {
+        immediate: true,
+        handler (newValue, oldValue) {
+          this._value = this.value.concat()
+        }
+      }
+    },
+    mounted () {
+      this.$on(EVENT_CHECKED, (value) => {
+        if (this._value.length < this.max) {
+          this._value.push(value)
+        }
+        this.$emit(EVENT_INPUT, this._value)
+      })
+      this.$on(EVENT_CANCLE_CHECKED, (value) => {
+        if (this._value.length > this.min) {
+          const index = this._value.indexOf(value)
+          this._value.splice(index, 1)
+        }
+        this.$emit(EVENT_INPUT, this._value)
+      })
+    },
+    components: {
+      CubeCheckbox
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+  @require "../../common/stylus/mixin.styl"
+
+  .cube-checkbox-group
+    z-index: 1
+    overflow: hidden
+    background-color: $checkbox-group-bgc
+    .cube-checkbox
+      &:last-child
+        .cube-checkbox-wrap
+          border-none()
+  .cube-checkbox-group[data-horz="true"]
+    display: flex
+    padding-left: 0
+    border-1px($checkbox-group-horizontal-bdc, 2px)
+    border-radius: 2px
+    .cube-checkbox
+      flex-fix()
+      text-align: center
+      padding-left: 10px
+      padding-right: 10px
+      &:after
+        border-color: $checkbox-group-horizontal-bdc
+      &:last-child
+        border-none()
+      &[data-pos="right"]
+        .cube-checkbox-ui
+          position: relative
+          margin-left: .42em
+          order: 1
+        .cube-checkbox-label
+          margin-right: 0
+    .cube-checkbox-wrap
+      justify-content: center
+</style>

src/components/checkbox/checkbox.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="cube-checkbox" :class="_containerClass" :data-pos="position">
+    <label class="cube-checkbox-wrap" :class="_wrapClass">
+      <input class="cube-checkbox-input" type="checkbox" :disabled="computedOption.disabled" v-model="checkValue">
+      <span class="cube-checkbox-ui" :class="_borderIconClass">
+        <i :class="_rightIconClass"></i>
+      </span>
+      <span class="cube-checkbox-label">
+        <slot>{{computedOption.label}}</slot>
+      </span>
+    </label>
+  </div>
+</template>
+<script type="text/ecmascript-6">
+  const COMPONENT_NAME = 'cube-checkbox'
+
+  const EVENT_INPUT = 'input'
+  const EVENT_CHECKED = 'checked'
+  const EVENT_CANCLE_CHECKED = 'cancel-checked'
+
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      value: {
+        type: [Boolean, String]
+      },
+      label: {
+        type: [Boolean, String]
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      option: {
+        type: [Boolean, String, Object],
+        default () {
+          return {
+            _def_option: true
+          }
+        }
+      },
+      position: {
+        type: String,
+        default: 'left'
+      },
+      shape: {
+        type: String,
+        default: 'circle'
+      },
+      hollowStyle: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      const parent = this.$parent
+      const isInGroup = parent.$data._checkboxGroup
+      const isInHorizontalGroup = isInGroup && parent.$props.horizontal
+      return {
+        isInGroup,
+        isInHorizontalGroup
+      }
+    },
+    computed: {
+      computedOption() {
+        let option = this.option
+        const label = this.label
+        const disabled = this.disabled
+        if (option._def_option === true) {
+          option = {
+            label,
+            value: label,
+            disabled
+          }
+        } else if (typeof option === 'string') {
+          option = {
+            label: option,
+            value: option,
+            disabled: false
+          }
+        }
+        return option
+      },
+      checkValue: {
+        get () {
+          if (this.isInGroup) {
+            return this.$parent.value.indexOf(this.computedOption.value) > -1
+          } else {
+            return Boolean(this.value)
+          }
+        },
+        set (newValue) {
+          const value = this.computedOption.value
+          const emitValue = value && newValue ? value : newValue
+          const parentEmitEvent = newValue ? EVENT_CHECKED : EVENT_CANCLE_CHECKED
+          this.$emit(EVENT_INPUT, emitValue)
+          if (this.isInGroup) {
+            this.$parent.$emit(parentEmitEvent, value || newValue)
+          }
+        }
+      },
+      _containerClass() {
+        return {
+          'cube-checkbox-hollow': this.hollowStyle,
+          'cube-checkbox_checked': this.checkValue,
+          'cube-checkbox_disabled': this.computedOption.disabled,
+          'border-right-1px': this.isInHorizontalGroup
+        }
+      },
+      _wrapClass() {
+        if (this.isInGroup && !this.isInHorizontalGroup) {
+          return 'border-bottom-1px'
+        }
+      },
+      isSquare() {
+        return this.shape === 'square' || this.hollowStyle
+      },
+      _borderIconClass() {
+        return this.isSquare ? 'cubeic-square-border' : 'cubeic-round-border'
+      },
+      _rightIconClass() {
+        return this.isSquare ? 'cubeic-square-right' : 'cubeic-right'
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+  @require "../../common/stylus/mixin.styl"
+
+  $ui-width = 1.42em
+  .cube-checkbox
+    position: relative
+    padding: 0 16px
+    text-align: left
+    font-size: 100%
+    color: $checkbox-color
+    &[data-pos="right"]
+      .cube-checkbox-ui
+        margin-right: 0
+        position: absolute
+        right: 0
+      .cube-checkbox-label
+        margin-right: $ui-width
+  .cube-checkbox-wrap
+    position: relative
+    display: flex
+    align-items: center
+    box-sizing: border-box
+    width: 100%
+    height: 100%
+    padding: 11px 0
+    line-height: 1.5
+    word-break: break-word
+    word-wrap: break-word
+  .cube-checkbox-input
+    z-index: 1
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    opacity: 0
+  .cube-checkbox-ui
+    position: relative
+    width: 1em
+    height: 1em
+    margin-right: $ui-width - 1em
+    line-height: 1
+    border-radius: 50%
+    &.cubeic-square-border
+      border-radius: 2px
+    &::before, i
+      transition: all .2s
+    &::before
+      color: $checkbox-icon-color
+      display: inline-block
+      transform: scale(1.24)
+    i
+      position: absolute
+      top: 0
+      left: 0
+      color: transparent
+      transform: scale(.4)
+  .cube-checkbox_checked
+    .cube-checkbox-ui
+      &::before
+        color: transparent
+      i
+        color: $checkbox-checked-icon-color
+        transform: scale(1.23)
+  .cube-checkbox_disabled
+    .cube-checkbox-ui
+      background-color: $checkbox-disabled-icon-bgc
+      &::before, i
+        transition: none
+      &::before
+        color: transparent
+      i
+        color: $checkbox-disabled-icon-color
+  .cube-checkbox_checked.cube-checkbox_disabled
+    .cube-checkbox-ui
+      background-color: $checkbox-checked-icon-bgc
+  .cube-checkbox-hollow
+    i
+      width: 100%
+      height: 100%
+      &::before
+        content: ""
+        position: absolute
+        top: 50%
+        left: 50%
+        width: 50%
+        height: 50%
+        transform: translate(-50%, -50%)
+        background-color: currentColor
+        border-radius: 2px
+    &.cube-checkbox_checked
+      .cube-checkbox-ui
+        &::before
+          color: $checkbox-hollow-checked-icon-color
+        i
+          transform: scale(1)
+          color: $checkbox-hollow-checked-icon-color
+    &.cube-checkbox_disabled
+      .cube-checkbox-ui
+        background-color: transparent
+        &::before
+          color: $checkbox-hollow-disabled-icon-color
+        i
+          transform: scale(1)
+          color: transparent
+      &.cube-checkbox_checked
+        .cube-checkbox-ui
+          i
+            color: $checkbox-hollow-disabled-icon-color
+</style>

src/components/checker/checker-item.vue

@@ -0,0 +1,59 @@
+<template>
+  <li
+    class="cube-checker-item"
+    :class="{'cube-checker-item_active': isActive}"
+    @click="clickHandler"
+  >
+    <slot>
+      <span v-html="option.text"></span>
+    </slot>
+  </li>
+</template>
+<script type="text/ecmascript-6">
+  const COMPONENT_NAME = 'cube-checker-item'
+
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      option: {
+        type: Object,
+        default() {
+          /* istanbul ignore next */
+          return {}
+        }
+      }
+    },
+    computed: {
+      isActive() {
+        const isRadio = this.$parent.isRadio
+        const currentValue = this.$parent.currentValue
+        const value = this.option.value
+        return isRadio ? currentValue === value : currentValue.indexOf(value) >= 0
+      }
+    },
+    methods: {
+      clickHandler() {
+        this.$parent.check(this.option)
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+  @require "../../common/stylus/mixin.styl"
+  .cube-checker-item
+    display: inline-block
+    vertical-align: top
+    text-align: center
+    padding: 8px 10px
+    margin-right: 10px
+    color: $checker-item-color
+    background: $checker-item-bgc
+    border-radius: 4px
+    border-1px($checker-item-bdc, 4px)
+  .cube-checker-item_active
+    color: $checker-item-active-color
+    background: $checker-item-active-bgc
+    border-1px($checker-item-active-bdc, 4px)
+
+</style>

src/components/checker/checker.vue

@@ -0,0 +1,91 @@
+<template>
+  <ul class="cube-checker">
+    <slot>
+      <cube-checker-item
+        v-for="(option, index) in options"
+        :option="option"
+        :key="index" />
+    </slot>
+  </ul>
+</template>
+<script type="text/ecmascript-6">
+  import CubeCheckerItem from './checker-item.vue'
+  const COMPONENT_NAME = 'cube-checker'
+  const EVENT_INPUT = 'input'
+
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      value: [String, Number, Array],
+      options: {
+        type: Array,
+        default() {
+          /* istanbul ignore next */
+          return []
+        }
+      },
+      type: {
+        type: String,
+        default: 'checkbox'
+      },
+      min: {
+        type: Number,
+        default: 0
+      },
+      max: {
+        type: Number,
+        default() {
+          return this.options.length
+        }
+      }
+    },
+    data () {
+      return {
+        currentValue: this.value
+      }
+    },
+    computed: {
+      isRadio() {
+        return this.type === 'radio'
+      }
+    },
+    watch: {
+      value (newValue) {
+        this.currentValue = newValue
+      },
+      currentValue (val) {
+        this.$emit(EVENT_INPUT, val)
+      }
+    },
+    methods: {
+      check(option) {
+        if (this.isRadio) {
+          this.checkRadio(option)
+        } else {
+          this.checkCheckbox(option)
+        }
+      },
+      checkRadio(option) {
+        this.currentValue = option.value
+      },
+      checkCheckbox(option) {
+        const value = option.value
+        const currentValue = this.currentValue
+        const valueLen = currentValue.length
+        const min = this.min
+        const max = this.max
+
+        const index = currentValue.indexOf(value)
+
+        if (index > -1) {
+          (valueLen > min) && currentValue.splice(index, 1)
+        } else {
+          (valueLen < max) && currentValue.push(value)
+        }
+      }
+    },
+    components: {
+      CubeCheckerItem
+    }
+  }
+</script>

src/components/cube-button-group.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="cube-btn-group" :class="direction"><slot></slot></div>
+</template>
+
+<script>
+  export default {
+    props: {
+      direction: {
+        type: String,
+        default: 'column'
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  .cube-btn-group
+    > button
+      margin: 10px 0
+    &.row > button
+      display: inline-block
+      width: auto
+      margin: 10px 5px
+      &:first-child
+        margin-left: 0
+      &:last-child
+        margin-right: 0
+</style>

src/components/cube-page.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="cube-page" :class="type">
+    <header class="header">
+      <h1>{{title}}</h1>
+      <i @click="back" class="cubeic-back"></i>
+    </header>
+    <div class="wrapper">
+      <section v-show="desc" class="desc"><slot name="desc">{{desc}}</slot></section>
+      <main class="content">
+        <slot name="content">{{content}}</slot>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: '',
+        required: true
+      },
+      type: {
+        type: String,
+        default: ''
+      },
+      desc: {
+        type: String,
+        default: ''
+      },
+      content: {
+        type: String,
+        default: ''
+      }
+    },
+    methods: {
+      back() {
+        this.$router.back()
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  @import "~@/common/stylus/variable.styl"
+
+  .cube-page
+    position: absolute
+    z-index: 10
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    background: #efeff4
+    .header
+      position: relative
+      height: 44px
+      line-height: 44px
+      text-align: center
+      background-color: #edf0f4
+      box-shadow: 0 1px 6px #ccc
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+      z-index: 5
+      h1
+        font-size: 16px
+        font-weight: 700
+      .cubeic-back
+        position: absolute
+        top: 0
+        left: 0
+        padding: 0 15px
+        color: #fc9153
+    >.wrapper
+      height: calc(100% - 44px)
+      overflow-x: hidden
+      overflow-y: auto
+      // -webkit-overflow-scrolling: touch
+      .desc
+        padding: 10px
+        margin: 10px 0
+        line-height: 20px
+        font-size: 14px
+      .content
+        margin: 10px
+
+    &.option-demo
+      .wrapper
+        background-color: $color-white
+      .title
+        font-size: $fontsize-large
+        font-weight: 500
+        color: $color-dark-grey
+        padding: 15px
+        border-bottom: 1px solid rgba(0, 0, 0, .1)
+        margin-bottom: 15px
+      .options
+        margin-bottom: 15px
+      .option-list
+        .group
+          margin-bottom: 15px
+          border: 1px solid rgba(0, 0, 0, .1)
+          border-radius: $radius-size-medium
+        .item
+          height: 52px
+          border-bottom: 1px solid rgba(0, 0, 0, .1)
+          &.sub
+            font-size: $fontsize-medium
+            background-color: $color-light-grey-opacity
+            &.first
+              box-shadow: 0 1px 1px 1px #eee inset
+            &.last
+              border-bottom: none
+      .demo
+        margin-bottom: 15px
+      .methods
+        .method-list
+          .group
+            margin-bottom: 15px
+            border: 1px solid rgba(0, 0, 0, .1)
+            border-radius: $radius-size-medium
+          .item
+          button
+            height: 40px
+            font-size: $fontsize-large
+          .item
+            background-color: $color-active-light-gray
+            border-bottom: 1px solid rgba(0, 0, 0, .1)
+          button
+            width: 100%
+            border-bottom-left-radius: $radius-size-medium
+            border-bottom-right-radius: $radius-size-medium
+            background-color: $color-orange
+            box-shadow: 0 0 0 1px $color-orange
+            border: none
+            outline: none
+            color: $color-white
+</style>

src/components/cube-view.vue

@@ -0,0 +1,16 @@
+<template>
+  <transition name="page-move">
+    <router-view class="cube-view"></router-view>
+  </transition>
+</template>
+
+<script type="text/ecmascript-6">
+  export default {}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  .page-move-enter, .page-move-leave-active
+    transform: translate(100%, 0)
+  .page-move-enter-active, .page-move-leave-active
+    transition: transform .3s
+</style>

src/components/date-picker.vue

@@ -0,0 +1,99 @@
+<template>
+  <cube-cascade-picker
+    ref="cascadePicker"
+    title="Date Picker"
+    :data="data"
+    :selectedIndex="selectedIndex"
+    @select="select"
+    @cancel="cancel">
+  </cube-cascade-picker>
+</template>
+
+<script>
+  const COMPONENT_NAME = 'date-picker'
+  const EVENT_SELECT = 'select'
+  const EVENT_CANCEL = 'cancel'
+
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      min: {
+        type: Array,
+        default() {
+          return [2010, 2, 1]
+        }
+      },
+      max: {
+        type: Array,
+        default() {
+          return [2020, 2, 1]
+        }
+      },
+      selectedIndex: {
+        type: Array,
+        default() {
+          return [0, 0, 0]
+        }
+      }
+    },
+    data() {
+      return {
+      }
+    },
+    computed: {
+      data() {
+        let data = range(this.min[0], this.max[0], false, '年')
+
+        data.forEach(year => {
+          let minMonth = year.value === this.min[0] ? this.min[1] : 1
+          let maxMonth = year.value === this.max[0] ? this.max[1] : 12
+
+          year.children = range(minMonth, maxMonth, false, '月')
+          year.children.forEach(month => {
+            let day = 30
+            if ([1, 3, 5, 7, 8, 10, 12].indexOf(month.value) > -1) {
+              day = 31
+            } else {
+              if (month.value === 2) {
+                day = !(year.value % 400) || (!(year.value % 4) && year.value % 100) ? 29 : 28
+              }
+            }
+
+            let minDay = year.value === this.min[0] && month.value === this.min[1] ? this.min[2] : 1
+            let maxDay = year.value === this.max[0] && month.value === this.max[1] ? this.max[2] : day
+
+            month.children = range(minDay, maxDay, false, '日')
+          })
+        })
+
+        return data
+      }
+    },
+    methods: {
+      show() {
+        this.$refs.cascadePicker.show()
+      },
+      hide() {
+        this.$refs.cascadePicker.hide()
+      },
+      select(selectedVal, selectedIndex, selectedText) {
+        this.$emit(EVENT_SELECT, selectedVal, selectedIndex, selectedText)
+      },
+      cancel() {
+        this.$emit(EVENT_CANCEL)
+      }
+    }
+  }
+
+  function range(n, m, polyfill = false, unit = '') {
+    let arr = []
+    for (let i = n; i <= m; i++) {
+      let value = (polyfill && i < 10 ? '0' + i : i) + unit
+      arr.push({
+        text: value,
+        value: i
+      })
+    }
+    return arr
+  }
+</script>

src/components/date-picker/date-picker.vue

@@ -0,0 +1,246 @@
+<template>
+  <cube-cascade-picker
+    v-model="isVisible"
+    :data="data"
+    :selected-index="selectedIndex"
+    :title="title"
+    :subtitle="subtitle"
+    :cancel-txt="_cancelTxt"
+    :confirm-txt="_confirmTxt"
+    :swipe-time="swipeTime"
+    :z-index="zIndex"
+    :mask-closable="maskClosable"
+    @select="_select"
+    @cancel="_cancel"
+    @change="_change">
+  </cube-cascade-picker>
+</template>
+
+<script>
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
+  import pickerMixin from '../../common/mixins/picker'
+  import localeMixin from '../../common/mixins/locale'
+  import { deepAssign, findIndex } from '../../common/helpers/util'
+  import { computeNatureMaxDay, formatType } from '../../common/lang/date'
+
+  const COMPONENT_NAME = 'cube-date-picker'
+  const EVENT_SELECT = 'select'
+  const EVENT_CANCEL = 'cancel'
+  const EVENT_CHANGE = 'change'
+
+  const TYPE_LIST = ['year', 'month', 'date', 'hour', 'minute', 'second']
+  const NATURE_BOUNDARY_MAP = {
+    month: {
+      natureMin: 1,
+      natureMax: 12
+    },
+    date: {
+      natureMin: 1,
+      natureMax: 31
+    },
+    hour: {
+      natureMin: 0,
+      natureMax: 23
+    },
+    minute: {
+      natureMin: 0,
+      natureMax: 59
+    },
+    second: {
+      natureMin: 0,
+      natureMax: 59
+    }
+  }
+
+  const DEFAULT_FORMAT = {
+    year: 'YYYY',
+    month: 'M',
+    date: 'D',
+    hour: 'hh',
+    minute: 'mm',
+    second: 'ss'
+  }
+
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [visibilityMixin, popupMixin, pickerMixin, localeMixin],
+    props: {
+      min: {
+        type: [Date, Array],
+        default() {
+          return new Date(2010, 1, 1)
+        }
+      },
+      max: {
+        type: [Date, Array],
+        default() {
+          return new Date(2020, 12, 31)
+        }
+      },
+      startColumn: {
+        type: String,
+        default() {
+          return 'year'
+        }
+      },
+      columnCount: {
+        type: Number,
+        default: 3
+      },
+      format: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      value: {
+        type: [Date, Array],
+        default() {
+          return this.min
+        }
+      }
+    },
+    computed: {
+      formatConfig() {
+        const formatConfig = Object.assign({}, DEFAULT_FORMAT)
+        deepAssign(formatConfig, this.format)
+
+        return formatConfig
+      },
+      natureRangeCache() {
+        const natureRangeCache = {
+          hour: [],
+          minute: [],
+          second: []
+        }
+
+        Object.keys(natureRangeCache).forEach((key) => {
+          natureRangeCache[key] = this._range(key, NATURE_BOUNDARY_MAP[key].natureMin, NATURE_BOUNDARY_MAP[key].natureMax)
+        })
+
+        return natureRangeCache
+      },
+      startIndex() {
+        const startIndex = TYPE_LIST.indexOf(this.startColumn)
+        return startIndex < 0 ? 0 : startIndex
+      },
+      minArray() {
+        return this.min instanceof Date
+                ? dateToArray(this.min).slice(this.startIndex, this.startIndex + this.columnCount)
+                : this.min
+      },
+      maxArray() {
+        return this.max instanceof Date
+                ? dateToArray(this.max).slice(this.startIndex, this.startIndex + this.columnCount)
+                : this.max
+      },
+      valueArray() {
+        return this.value instanceof Date
+                ? dateToArray(this.value).slice(this.startIndex, this.startIndex + this.columnCount)
+                : this.value
+      },
+      data() {
+        const data = []
+        this._generateData(this.startIndex, 0, data)
+        return data
+      },
+      selectedIndex() {
+        const selectedIndex = []
+        let data = this.data
+        let index
+
+        for (let i = 0; i < this.columnCount && i < 6 - this.startIndex; i++) {
+          index = findIndex(data, (item) => {
+            return this.valueArray[i] && item.value === this.valueArray[i]
+          })
+          selectedIndex[i] = index !== -1 ? index : 0
+          data = data[selectedIndex[i]] && data[selectedIndex[i]].children
+        }
+
+        return selectedIndex
+      }
+    },
+    methods: {
+      _select(selectedVal, selectedIndex, selectedText) {
+        this.$emit(EVENT_SELECT, this._arrayToDate(selectedVal), selectedVal, selectedText)
+      },
+      _cancel() {
+        this.$emit(EVENT_CANCEL)
+      },
+      _change(i, newIndex) {
+        this.$emit(EVENT_CHANGE, i, newIndex)
+      },
+      _generateData(i, count, item) {
+        if (count === 0) {
+          const min = i === 0 ? this.minArray[0] : Math.max(this.minArray[0], NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin)
+          const max = i === 0 ? this.maxArray[0] : Math.min(this.maxArray[0], NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMax)
+          item.push.apply(item, this._range(TYPE_LIST[i], min, max, true, true))
+        } else {
+          if (i < 3 || item.isMin || item.isMax) {
+            const natureMax = i === 2 ? computeNatureMaxDay(item.value, item.year) : NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMax
+            const min = item.isMin ? Math.max(this.minArray[count], NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin) : NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin
+            const max = item.isMax ? Math.min(this.maxArray[count], natureMax) : natureMax
+
+            const storageYear = i === 1 && this.startIndex === 0 && this.columnCount >= 3 && item.value
+            item.children = this._range(TYPE_LIST[i], min, max, item.isMin, item.isMax, storageYear)
+          } else {
+            item.children = this.natureRangeCache[TYPE_LIST[i]]
+          }
+        }
+        if (count < this.columnCount - 1 && i < 5) {
+          (item.children || item).forEach(subItem => {
+            (!subItem.children || subItem.isMin || subItem.isMax) && this._generateData(i + 1, count + 1, subItem)
+          })
+        }
+      },
+      _arrayToDate(selectedVal) {
+        const args = []
+        const defaultDateArray = dateToArray(new Date(0))
+
+        for (let i = 0; i < 6; i++) {
+          if (i < this.startIndex) {
+            args[i] = defaultDateArray[i]
+          } else if (i >= this.startIndex + this.columnCount) {
+            args[i] = NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin
+          } else {
+            args[i] = selectedVal[i - this.startIndex]
+          }
+        }
+        // Month need to subtract 1.
+        args[1]--
+
+        return new Date(...args)
+      },
+      _range(type, min, max, fatherIsMin, fatherIsMax, year = 0) {
+        if (!this._rangeCache) {
+          this._rangeCache = {}
+        }
+        const k = type + year + min + max + fatherIsMin + fatherIsMax
+        if (this._rangeCache[k]) {
+          return this._rangeCache[k]
+        }
+        const arr = []
+        const format = this.formatConfig[type]
+        for (let i = min; i <= max; i++) {
+          const object = {
+            text: formatType(type, format, i, 'i'),
+            value: i
+          }
+
+          if (fatherIsMin && i === min) object.isMin = true
+          if (fatherIsMax && i === max) object.isMax = true
+          if (year) object.year = year
+
+          arr.push(object)
+        }
+        this._rangeCache[k] = arr
+        return arr
+      }
+    }
+  }
+
+  function dateToArray(date) {
+    return [date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()]
+  }
+</script>

src/components/dialog/dialog.vue

@@ -0,0 +1,310 @@
+<template>
+  <transition name="cube-dialog-fade">
+    <cube-popup
+      type="dialog"
+      :z-index="zIndex"
+      :mask="true"
+      :center="true"
+      v-show="isVisible"
+      @mask-click="maskClick"
+      >
+      <div class="cube-dialog-main">
+        <span class="cube-dialog-close" v-show="showClose" @click="close"><i class="cubeic-close"></i></span>
+        <div :class="containerClass">
+          <p class="cube-dialog-icon" v-if="icon"><i :class="icon"></i></p>
+          <h2 v-if="title || $slots.title" class="cube-dialog-title">
+            <slot name="title">
+              <p class="cube-dialog-title-def">{{title}}</p>
+            </slot>
+          </h2>
+          <div class="cube-dialog-content">
+            <slot name="content">
+              <div class="cube-dialog-content-def">
+                <p v-html="content" v-if="content"></p>
+                <cube-input v-bind="prompt" v-model="promptValue" v-if="isPrompt" />
+              </div>
+            </slot>
+          </div>
+          <div class="cube-dialog-btns" :class="{'border-right-1px': isConfirm || isPrompt}">
+            <slot name="btns">
+              <a :href="_cancelBtn.href" class="cube-dialog-btn border-top-1px" :class="{'cube-dialog-btn_highlight': _cancelBtn.active, 'cube-dialog-btn_disabled': _cancelBtn.disabled}" v-if="isConfirm || isPrompt" @click="cancel">{{_cancelBtn.text}}</a>
+              <a :href="_confirmBtn.href" class="cube-dialog-btn border-top-1px" :class="{'cube-dialog-btn_highlight': _confirmBtn.active, 'cube-dialog-btn_disabled': _confirmBtn.disabled}" @click="confirm">{{_confirmBtn.text}}</a>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </cube-popup>
+  </transition>
+</template>
+
+<script type="text/ecmascript-6">
+  import CubePopup from '../popup/popup.vue'
+  import CubeInput from '../input/input.vue'
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
+  import localeMixin from '../../common/mixins/locale'
+
+  const COMPONENT_NAME = 'cube-dialog'
+  const EVENT_CONFIRM = 'confirm'
+  const EVENT_CANCEL = 'cancel'
+  const EVENT_CLOSE = 'close'
+
+  const defHref = 'javascript:;'
+  const defConfirmBtn = {
+    textType: 'ok',
+    active: true,
+    disabled: false,
+    href: defHref
+  }
+  const defCancelBtn = {
+    textType: 'cancel',
+    active: false,
+    disabled: false,
+    href: defHref
+  }
+  const parseBtn = function (btn, defBtn) {
+    if (typeof btn === 'string') {
+      btn = {
+        text: btn
+      }
+    }
+    const text = defBtn && this.$t(defBtn.textType)
+    return Object.assign({}, defBtn, { text }, btn)
+  }
+
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [visibilityMixin, popupMixin, localeMixin],
+    props: {
+      type: {
+        type: String,
+        default: 'alert'
+      },
+      prompt: {
+        type: Object,
+        default() {
+          return {
+            value: '',
+            placeholder: ''
+          }
+        }
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      content: {
+        type: String,
+        default: ''
+      },
+      showClose: {
+        type: Boolean,
+        default: false
+      },
+      confirmBtn: {
+        type: [Object, String],
+        default() {
+          return {
+            ...defConfirmBtn
+          }
+        }
+      },
+      cancelBtn: {
+        type: [Object, String],
+        default() {
+          return {
+            ...defCancelBtn
+          }
+        }
+      }
+    },
+    data() {
+      return {
+        defHref,
+        promptValue: this.prompt.value
+      }
+    },
+    computed: {
+      _confirmBtn() {
+        return parseBtn.call(this, this.confirmBtn, defConfirmBtn)
+      },
+      _cancelBtn() {
+        return parseBtn.call(this, this.cancelBtn, defCancelBtn)
+      },
+      isConfirm() {
+        return this.type === 'confirm'
+      },
+      isPrompt() {
+        return this.type === 'prompt'
+      },
+      containerClass() {
+        return `cube-dialog-${this.type}`
+      }
+    },
+    watch: {
+      'prompt.value': {
+        handler: function (newVal) {
+          this.promptValue = newVal
+        }
+      }
+    },
+    methods: {
+      maskClick(e) {
+        this.maskClosable && this.cancel(e)
+      },
+      confirm(e) {
+        if (this._confirmBtn.disabled) {
+          return
+        }
+        this.hide()
+        this.$emit(EVENT_CONFIRM, e, this.promptValue)
+      },
+      cancel(e) {
+        if (this._cancelBtn.disabled) {
+          return
+        }
+        this.hide()
+        this.$emit(EVENT_CANCEL, e)
+      },
+      close(e) {
+        this.hide()
+        this.$emit(EVENT_CLOSE, e)
+      }
+    },
+    components: {
+      CubePopup,
+      CubeInput
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+  @require "../../common/stylus/mixin.styl"
+
+  .cube-dialog-main
+    width: 270px
+    padding: 0
+    text-align: center
+    overflow: hidden
+    border-radius: 2px
+    background-color: $dialog-bgc
+  .cube-dialog-confirm, .cube-dialog-alert
+    position: relative
+    overflow: hidden
+  .cube-dialog-icon
+    margin-top: 20px
+    margin-bottom: 16px
+    line-height: 1
+    color: $dialog-icon-color
+    font-size: $fontsize-large-xxxx
+    i
+      display: inline-block
+      width: 30px
+      height: 30px
+      padding: 10px
+      box-sizing: content-box
+      border-radius: 50%
+      background-color: $dialog-icon-bgc
+    +
+      .cube-dialog-title
+        .cube-dialog-title-def
+          margin-top: 0
+    +
+      .cube-dialog-content
+        margin-top: -4px
+  .cube-dialog-title
+    color: $dialog-title-color
+    font-size: $fontsize-large
+    line-height: 1
+    +
+      .cube-dialog-content
+        margin-top: 12px
+  .cube-dialog-title-def
+    margin: 30px 16px 0
+    overflow: hidden
+    white-space: nowrap
+  .cube-dialog-content
+    margin: 16px 0
+    text-align: left
+    color: $dialog-color
+    font-size: $fontsize-medium
+    line-height: 22px
+  .cube-dialog-content-def
+    padding: 0 16px
+    > p
+      display: table
+      margin: auto
+      + .cube-input
+        margin-top: 12px
+  .cube-dialog-confirm, .cube-dialog-prompt
+    .cube-dialog-btns
+      .cube-dialog-btn
+        width: 50%
+        float: left
+      &.border-right-1px
+        &::after
+          right: 50%
+          border-color: $dialog-btns-split-color
+  .cube-dialog-close
+    display: flex
+    align-items: center
+    justify-content: center
+    z-index: 1
+    position: absolute
+    top: 0
+    right: 0
+    width: 32px
+    height: 32px
+    color: $dialog-close-color
+    font-size: $fontsize-large-x
+  .cube-dialog-btns
+    overflow: hidden
+    width: 100%
+    font-size: 0
+  .cube-dialog-btn
+    display: inline-block
+    width: 100%
+    padding: 17px 10px
+    margin: 0
+    font-size: $fontsize-large
+    line-height: 1
+    text-align: center
+    text-decoration: none
+    color: $dialog-btn-color
+    background-color: $dialog-btn-bgc
+    background-clip: padding-box
+    box-sizing: border-box
+    &:active
+      background-color: $dialog-btn-active-bgc
+  .cube-dialog-btn_highlight
+    color: $dialog-btn-highlight-color
+    &:active
+      background-color: $dialog-btn-highlight-active-bgc
+  .cube-dialog-btn_disabled
+    color: $dialog-btn-disabled-color
+    &:active
+      background-color: $dialog-btn-disabled-active-bgc
+
+  .cube-dialog-fade-enter-active
+    animation: dialog-fadein .4s
+    .cube-dialog-main
+      animation: dialog-zoom .4s
+
+  @keyframes dialog-fadein
+    0%
+      opacity: 0
+    100%
+      opacity: 1
+  @keyframes dialog-zoom
+    0%
+      transform: scale(0)
+    50%
+      transform: scale(1.1)
+    100%
+      transform: scale(1)
+</style>

src/components/drawer/drawer-item.vue

@@ -0,0 +1,61 @@
+<template>
+  <li
+    class="cube-drawer-item border-bottom-1px"
+    :class="itemClass"
+    @click="clickItem(item)"
+  >
+    <slot>
+      {{item.text || item}}
+    </slot>
+  </li>
+</template>
+
+<script type="text/ecmascript-6">
+  const COMPONENT_NAME = 'cube-drawer-item'
+
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      item: {
+        type: [String, Object],
+        default: ''
+      },
+      index: {
+        type: Number,
+        default: -1
+      }
+    },
+    computed: {
+      itemClass() {
+        return this.$parent.$parent.selectedIndex === this.index ? 'cube-drawer-item_active' : ''
+      }
+    },
+    methods: {
+      clickItem(item) {
+        this.$parent.$parent.itemClickHandler(item, this.index)
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+  @require "../../common/stylus/mixin.styl"
+
+  .cube-drawer-item
+    padding: 0 20px
+    height: 50px
+    line-height: 50px
+    white-space: nowrap
+    overflow: hidden
+    font-size: 15px
+    &::after
+      left: 20px
+    &:last-child
+      &::after
+        display: none
+    &:first-child
+      &::after
+        display: block
+  .cube-drawer-item_active
+    background: $drawer-item-active-bgc
+</style>

src/components/drawer/drawer-panel.vue

@@ -0,0 +1,108 @@
+<template>
+  <transition name="cube-drawer-move">
+    <div class="cube-drawer-panel" v-show="isVisible">
+      <div class="cube-drawer-scroll-wrapper">
+        <cube-scroll ref="scroll" :data="data">
+          <ul class="cube-drawer-list">
+            <slot>
+              <cube-drawer-item v-for="(item, i) in data" :item="item" :key="i" :index="i" />
+            </slot>
+          </ul>
+        </cube-scroll>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/ecmascript-6">
+  import visibilityMixin from '../../common/mixins/visibility'
+  import CubeScroll from '../scroll/scroll.vue'
+  import CubeDrawerItem from './drawer-item.vue'
+
+  const COMPONENT_NAME = 'cube-drawer-panel'
+
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [visibilityMixin],
+    props: {
+      data: {
+        type: Array,
+        default() {
+          /* istanbul ignore next */
+          return []
+        }
+      },
+      index: {
+        type: Number,
+        default: -1
+      }
+    },
+    computed: {
+      selectedIndex() {
+        const selectedIndex = this.$parent.selected[this.index]
+        return selectedIndex === undefined ? -1 : selectedIndex
+      }
+    },
+    watch: {
+      data() {
+        this.scrollToTop()
+      },
+      isVisible() {
+        this.$nextTick(() => {
+          this.refresh()
+        })
+      }
+    },
+    mounted() {
+      this.$parent.addPanel(this)
+    },
+    beforeDestroy() {
+      this.$parent.removePanel(this)
+    },
+    methods: {
+      refresh() {
+        this.$refs.scroll.refresh()
+      },
+      scrollToTop() {
+        this.$refs.scroll.scroll && this.$refs.scroll.scroll.scrollTo(0, 0, 0)
+      },
+      itemClickHandler(item, index) {
+        if (this.selectedIndex !== index) {
+          this.$parent.changeHandler(this.index, item, index)
+        }
+      }
+    },
+    components: {
+      CubeScroll,
+      CubeDrawerItem
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+  @require "../../common/stylus/mixin.styl"
+
+  .cube-drawer-panel
+    position: relative
+    z-index: 1
+    flex: 1
+    width: 170px
+    overflow: hidden
+    background-color: $drawer-panel-bgc
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
+    + .cube-drawer-panel
+      margin-left: -67px
+    &:first-child
+      box-shadow: none
+  .cube-drawer-scroll-wrapper // fix flex item height: 100% bug in android
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+
+  .cube-drawer-move-enter, .cube-drawer-move-leave-to
+    transform: translate(67px, 0)
+  .cube-drawer-move-enter-active, .cube-drawer-move-leave-active
+    transition: transform .3s ease-in-out
+</style>

src/components/drawer/drawer.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="cube-drawer" @click="drawerClick" v-show="isVisible">
+    <div class="cube-drawer-main" :style="slideStyle" @click.stop @transitionend="transitionend">
+      <div class="cube-drawer-title" v-show="$slots.title || title">
+        <slot name="title">{{title}}</slot>
+      </div>
+      <div class="cube-drawer-panels" @transitionend.stop>
+        <slot>
+          <cube-drawer-panel
+            v-for="(panel, index) in data"
+            :key="index"
+            :index="index"
+            :data="panel" />
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import { prefixStyle } from '../../common/helpers/dom'
+  import CubeDrawerPanel from './drawer-panel.vue'
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
+
+  const COMPONENT_NAME = 'cube-drawer'
+  const EVENT_CHANGE = 'change'
+  const EVENT_SELECT = 'select'
+  const EVENT_CANCEL = 'cancel'
+
+  const transform = prefixStyle('transform')
+
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [visibilityMixin, popupMixin],
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      data: {
+        type: Array,
+        default() {
+          /* istanbul ignore next */
+          return []
+        }
+      },
+      selectedIndex: {
+        type: Array,
+        default() {
+          /* istanbul ignore next */
+          return []
+        }
+      }
+    },
+    data() {
+      return {
+        index: -1,
+        selectedVal: [],
+        selectedText: [],
+        selected: [...this.selectedIndex],
+        slideStyle: {
+          [transform]: 'translate3d(0, 0, 0)'
+        }
+      }
+    },
+    watch: {
+      selectedIndex(newVal) {
+        this.selected = [...newVal]
+      },
+      index(newIndex, oldIndex) {
+        this.showPanel()
+        if (newIndex < oldIndex) {
+          this.hidePanel()
+        }
+      }
+    },
+    created() {
+      this.panels = []
+    },
+    methods: {
+      show() {
+        if (this.isVisible) {
+          return
+        }
+        this.isVisible = true
+
+        let len = this.data.length
+        for (let i = 0; i < len; i++) {
+          this.index = i
+          if (this.selected[i] < 0 || this.selected[i] === undefined) {
+            if (i > 0) {
+              const lastIndex = i - 1
+              const index = this.selected[lastIndex]
+              this.changeHandler(lastIndex, this.data[lastIndex][index], index)
+            }
+            break
+          }
+        }
+        this.computedStyle()
+      },
+      hide() {
+        this.slideStyle[transform] = 'translate3d(0, 0, 0)'
+        this.shouldHide = true
+      },
+      addPanel(panel) {
+        this.panels.push(panel)
+      },
+      removePanel(panel) {
+        const i = this.panels.indexOf(panel)
+        this.panels.splice(i, 1)
+      },
+      transitionend() {
+        if (this.shouldHide) {
+          this.isVisible = false
+          this.shouldHide = false
+        }
+      },
+      refill(panelIndex, data, index) {
+        this.$set(this.data, panelIndex, data)
+        this.index = panelIndex
+        this.selected = this.selected.slice(0, panelIndex)
+        this.selectedVal = this.selectedVal.slice(0, panelIndex)
+        this.selectedText = this.selectedText.slice(0, panelIndex)
+        if (index >= 0) {
+          this.$set(this.selected, panelIndex, index)
+          this.changeHandler(panelIndex, this.data[panelIndex][index], index)
+        }
+      },
+      showPanel() {
+        const index = this.index
+        let i = 0
+        while (i <= index) {
+          this.panels[i].show()
+          i++
+        }
+        this.computedStyle()
+      },
+      hidePanel() {
+        const len = this.data.length
+        let i = this.index + 1
+        while (i < len) {
+          this.panels[i].hide()
+          i++
+        }
+      },
+      computedStyle() {
+        this.$nextTick(() => {
+          let allWidth = 0
+          let i = 0
+          const index = this.index
+          while (i <= index) {
+            const el = this.panels[i].$el
+            allWidth += el.offsetWidth
+            const elStyle = window.getComputedStyle(el)
+            allWidth += parseInt(elStyle.marginLeft)
+            allWidth += parseInt(elStyle.marginRight)
+            i++
+          }
+          this.slideStyle[transform] = `translate3d(-${allWidth}px, 0, 0)`
+        })
+      },
+      changeHandler(panelIndex, item, index) {
+        if (typeof item === 'string') {
+          this.selectedVal[panelIndex] = item
+          this.selectedText[panelIndex] = item
+        } else {
+          this.selectedVal[panelIndex] = item.value
+          this.selectedText[panelIndex] = item.text
+        }
+        this.$set(this.selected, panelIndex, index)
+        if (panelIndex === (this.data.length - 1)) {
+          // last column
+          this.$emit(EVENT_SELECT, this.selectedVal, this.selected, this.selectedText)
+          this.hide()
+        } else {
+          this.$emit(EVENT_CHANGE, panelIndex, item, this.selectedVal, this.selected, this.selectedText)
+        }
+      },
+      drawerClick() {
+        this.hide()
+        this.$emit(EVENT_CANCEL)
+      }
+    },
+    components: {
+      CubeDrawerPanel
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+  @require "../../common/stylus/mixin.styl"
+
+  .cube-drawer
+    position: absolute
+    z-index: 5
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    overflow: hidden
+    color: $drawer-color
+  .cube-drawer-main
+    position: absolute
+    top: 0
+    left: 100%
+    bottom: 0
+    max-width: 90%
+    display: flex
+    flex-direction: column
+    overflow: hidden
+    transform: translate3d(0, 0, 0)
+    transition: transform .3s ease-in-out
+    box-shadow: -2px 0 2px rgba(0, 0, 0, .2)
+  .cube-drawer-title
+    position: relative
+    padding: 0 20px
+    height: 50px
+    line-height: 50px
+    border-bottom: 1px solid $drawer-title-bdc
+    font-size: $fontsize-large
+    background-color: $drawer-title-bgc
+  .cube-drawer-panels
+    display: flex
+    flex: 1
+</style>

src/components/extend-popup.vue

@@ -0,0 +1,34 @@
+<template>
+  <cube-popup type="extend-popup" ref="popup">
+    <div class="cube-extend-popup-content" @click="hide">
+      <slot>{{content}}</slot>
+    </div>
+ </cube-popup>
+</template>
+<script type="text/ecmascript-6">
+  const COMPONENT_NAME = 'cube-extend-popup'
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      content: {
+        type: String
+      }
+    },
+    methods: {
+      show() {
+        this.$refs.popup.show()
+      },
+      hide() {
+        this.$refs.popup.hide()
+        this.$emit('hide')
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+  .cube-extend-popup
+    .cube-extend-popup-content
+      padding: 20px
+      color: #fff
+      background-color: rgba(0, 0, 0, .8)
+</style>

src/components/form/components.js

@@ -0,0 +1,34 @@
+import CubeButton from '../button/button.vue'
+import CubeCheckbox from '../checkbox/checkbox.vue'
+import CubeCheckboxGroup from '../checkbox-group/checkbox-group.vue'
+import CubeChecker from '../checker/checker.vue'
+import CubeInput from '../input/input.vue'
+import CubeRadio from '../radio/radio.vue'
+import CubeRadioGroup from '../radio/radio-group.vue'
+import CubeRate from '../rate/rate.vue'
+import CubeSelect from '../select/select.vue'
+import CubeSwitch from '../switch/switch.vue'
+import CubeTextarea from '../textarea/textarea.vue'
+import CubeUpload from '../upload/upload.vue'
+
+const allComponents = [
+  CubeButton,
+  CubeCheckbox,
+  CubeCheckboxGroup,
+  CubeChecker,
+  CubeInput,
+  CubeRadio,
+  CubeRadioGroup,
+  CubeRate,
+  CubeSelect,
+  CubeSwitch,
+  CubeTextarea,
+  CubeUpload
+]
+
+const components = {}
+allComponents.forEach((Component) => {
+  components[Component.name] = Component
+})
+
+export default components

src/components/form/fields/index.js

@@ -0,0 +1,11 @@
+import processTypes from './types'
+
+function processField(field) {
+  const _field = {
+    ...field
+  }
+  processTypes(_field)
+  return _field
+}
+
+export { processField }

src/components/form/fields/props.js

@@ -0,0 +1,11 @@
+const toButtonHandler = (field, type) => {
+  field.type = 'button'
+  if (!field.props) {
+    field.props = {}
+  }
+  field.props.type = type
+}
+
+export {
+  toButtonHandler
+}

src/components/form/fields/reset.js

@@ -0,0 +1,18 @@
+const typesResetMap = {
+  checkbox() {
+    /* istanbul ignore next */
+    return false
+  },
+  select() {
+    /* istanbul ignore next */
+    return null
+  }
+}
+function getResetValueByType(type) {
+  const resetHandler = typesResetMap[type]
+  return resetHandler && resetHandler()
+}
+
+export {
+  getResetValueByType
+}

src/components/form/fields/types.js

@@ -0,0 +1,31 @@
+import {
+  boolRequiredHandler,
+  numberGT0RequiredHandler
+} from './validate'
+import {
+  toButtonHandler
+} from './props'
+
+const typesMap = {
+  submit(field) {
+    toButtonHandler(field, 'submit')
+  },
+  reset(field) {
+    toButtonHandler(field, 'reset')
+  },
+  checkbox(field) {
+    boolRequiredHandler(field)
+  },
+  switch(field) {
+    boolRequiredHandler(field)
+  },
+  rate(field) {
+    numberGT0RequiredHandler(field)
+  }
+}
+export default function processTypes(field) {
+  const typeFn = typesMap[field.type]
+  if (typeFn) {
+    typeFn(field)
+  }
+}

src/components/form/fields/validate.js

@@ -0,0 +1,28 @@
+const handleValidateRule = (field, type, custom) => {
+  const ruleValue = field.rules && field.rules[type]
+  if (type !== 'custom' && ruleValue && typeof ruleValue !== 'function') {
+    field.rules[type] = custom
+  }
+}
+const createHandler = (type) => {
+  return (field, custom) => {
+    return handleValidateRule(field, type, custom)
+  }
+}
+
+const handleRequired = createHandler('required')
+const boolRequiredHandler = (field) => {
+  return handleRequired(field, (val) => {
+    return val !== false
+  })
+}
+const numberGT0RequiredHandler = (field) => {
+  return handleRequired(field, (val) => {
+    return val > 0
+  })
+}
+
+export {
+  boolRequiredHandler,
+  numberGT0RequiredHandler
+}

src/components/form/form-group.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="cube-form-group">
+    <p class="cube-form-group-legend">{{legend}}</p>
+    <div class="cube-form-group-content">
+      <slot>
+        <cube-form-item
+          v-for="(field, index) in fields"
+          :key="index"
+          :field="field"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import CubeFormItem from './form-item.vue'
+
+  const COMPONENT_NAME = 'cube-form-group'
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      legend: {
+        type: String,
+        default: ''
+      },
+      fields: {
+        type: Array,
+        default() {
+          /* istanbul ignore next */
+          return []
+        }
+      }
+    },
+    beforeCreate() {
+      this.form = this.$parent.form
+    },
+    beforeDestroy() {
+      this.form = null
+    },
+    components: {
+      CubeFormItem
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+  @require "../../common/stylus/mixin.styl"
+
+  .cube-form-group
+    overflow: hidden
+  .cube-form-group-legend
+    font-size: $fontsize-medium
+    color: $form-group-legend-color
+    background-color: $form-group-legend-bgc
+</style>

src/components/form/form-item.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="cube-form-item border-bottom-1px" ref="formItem" :class="itemClass">
+    <template v-if="!isBtnField">
+      <slot name="label">
+        <div class="cube-form-label" v-show="fieldValue.label"><span>{{fieldValue.label}}</span></div>
+      </slot>
+      <cube-validator
+        class="cube-form-field"
+        v-if="hasRules"
+        ref="validator"
+        v-model="originValid"
+        :disabled="validatorDisabled"
+        :model="validatorModel"
+        :model-key="validatorModelKey"
+        :rules="fieldValue.rules"
+        :messages="fieldValue.messages"
+        @input="validatorChangeHandler"
+        @validating="validatingHandler"
+        @validated="validatedHandler"
+        @msg-click="msgClick"
+      >
+        <slot>
+          <component :is="componentName" v-model="modelValue" v-bind="fieldValue.props" v-on="fieldValue.events"></component>
+        </slot>
+      </cube-validator>
+      <div class="cube-form-field" v-else>
+        <slot>
+          <component :is="componentName" v-model="modelValue" v-bind="fieldValue.props" v-on="fieldValue.events"></component>
+        </slot>
+      </div>
+    </template>
+    <cube-button v-bind="fieldValue.props" v-else>{{fieldValue.label}}</cube-button>
+  </div>
+</template>
+
+<script>
+  import { processField } from './fields/index'
+  import { resetTypeValue, cb2PromiseWithResolve, debounce } from '../../common/helpers/util'
+  import CubeValidator from '../validator/validator.vue'
+  import LAYOUTS from './layouts'
+  import { getResetValueByType } from './fields/reset'
+  import mixin from './mixin'
+  import components from './components'
+  components.CubeValidator = CubeValidator
+
+  const COMPONENT_NAME = 'cube-form-item'
+  const EVENT_FOCUSIN = 'focusin'
+  const EVENT_FOCUSOUT = 'focusout'
+
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [mixin],
+    props: {
+      field: {
+        type: Object,
+        default() {
+          /* istanbul ignore next */
+          return {}
+        }
+      }
+    },
+    data() {
+      const validatorModelKey = 'value'
+      const modelKey = this.field.modelKey
+      const modelValue = modelKey ? this.form.model[modelKey] : null
+      return {
+        validatorDisabled: false,
+        validatorModelKey,
+        modelValue: modelValue,
+        validatorModel: {
+          [validatorModelKey]: modelValue
+        }
+      }
+    },
+    computed: {
+      fieldValue() {
+        return processField(this.field)
+      },
+      hasRules() {
+        return Object.keys(this.fieldValue.rules || {}).length > 0
+      },
+      isBtnField() {
+        return this.fieldValue.type === 'button'
+      },
+      itemClass() {
+        const rules = this.fieldValue.rules
+        return {
+          // only handle required rule for now
+          'cube-form-item_required': rules && rules.required,
+          'cube-form-item_btn': this.isBtnField,
+          'cube-form-item_validating': this.validating,
+          'cube-form-item_pending': this.pending,
+          'cube-form-item_valid': this.valid,
+          'cube-form-item_invalid': this.invalid
+        }
+      },
+      modelVal() {
+        return this.form.model[this.fieldValue.modelKey]
+      },
+      componentName() {
+        const fieldValue = this.fieldValue
+        const component = fieldValue.component
+        if (component) {
+          return component
+        }
+        const type = fieldValue.type
+        const cubeType = `cube-${type}`
+        if (components[cubeType]) {
+          return cubeType
+        }
+        return type
+      }
+    },
+    watch: {
+      modelVal(newModel) {
+        if (this.modelValue !== newModel) {
+          this.modelValue = newModel
+        }
+      },
+      modelValue: {
+        handler(newModel) {
+          // update form model
+          this.form.model[this.fieldValue.modelKey] = newModel
+          this.updateValidatorModel()
+        },
+        sync: true
+      },
+      originValid(newVal) {
+        this.lastOriginValid = newVal
+      }
+    },
+    beforeCreate() {
+      this.form = this.$parent.form
+    },
+    created() {
+      this.form.addField(this)
+      this.getValidatorModel = (modelValue) => {
+        this.pending = false
+        return modelValue
+      }
+    },
+    mounted() {
+      this.initDebounce()
+      this.initFocusEvents()
+    },
+    methods: {
+      initDebounce() {
+        let debounceTime = this.fieldValue.debounce
+        if (debounceTime === true) {
+          debounceTime = 200
+        }
+        if ((!debounceTime && debounceTime !== 0) || debounceTime < 0 || this.fieldValue.trigger === 'blur') return
+        this.getValidatorModel = debounce((modelValue) => {
+          this.pending = false
+          this.validatorModel[this.validatorModelKey] = modelValue
+          this.form.updatePending()
+          this.validate()
+          return modelValue
+        }, debounceTime, false, this.validatorModel[this.validatorModelKey])
+      },
+      focusInHandler() {
+        this.focused = true
+      },
+      focusOutHandler() {
+        this.focused = false
+        this.updateValidatorModel()
+        this.validate()
+      },
+      initFocusEvents() {
+        if (this.fieldValue.trigger === 'blur') {
+          const formItem = this.$refs.formItem
+          formItem.addEventListener(EVENT_FOCUSIN, this.focusInHandler, false)
+          formItem.addEventListener(EVENT_FOCUSOUT, this.focusOutHandler, false)
+          this.getValidatorModel = (modelValue) => {
+            if (this.focused) {
+              return this.validatorModel[this.validatorModelKey]
+            } else {
+              this.pending = false
+              this.form.updatePending()
+              return modelValue
+            }
+          }
+        }
+      },
+      removeFocusEvents() {
+        const formItem = this.$refs.formItem
+        formItem.removeEventListener(EVENT_FOCUSIN, this.focusInHandler, false)
+        formItem.removeEventListener(EVENT_FOCUSOUT, this.focusOutHandler, false)
+      },
+      updateValidatorModel() {
+        this.pending = true
+        this.validatorModel[this.validatorModelKey] = this.getValidatorModel(this.modelValue)
+        if (this.pending) {
+          this.form.setPending(this.pending)
+          this.originValid = undefined
+        }
+      },
+      validatorChangeHandler() {
+        // disabled or true to true no update validity
+        if (this.validatorDisabled || (this.originValid && this.lastOriginValid)) {
+          return
+        }
+        this.updateValidity()
+      },
+      validatingHandler() {
+        this.validating = true
+        this.form.setValidating(true)
+      },
+      validatedHandler() {
+        this.validating = false
+        this.form.updateValidating()
+      },
+      updateValidity() {
+        const validator = this.$refs.validator
+        if (validator) {
+          // sync update validaty
+          this.form.updateValidity(this.fieldValue.modelKey, validator.valid, validator.result, validator.dirty)
+        }
+      },
+      validate(cb) {
+        const promise = cb2PromiseWithResolve(cb)
+        if (promise) {
+          cb = promise.resolve
+        }
+        const validator = this.$refs.validator
+        if (validator) {
+          validator.validate(() => {
+            this.validatorDisabled = true
+            this.updateValidity()
+            cb && cb()
+            this.$nextTick(() => {
+              this.validatorDisabled = false
+            })
+          })
+        } else {
+          cb && cb()
+        }
+        return promise
+      },
+      reset() {
+        const fieldValue = this.fieldValue
+        if (fieldValue.modelKey) {
+          const defValue = getResetValueByType(fieldValue.type)
+          this.validatorDisabled = true
+          resetTypeValue(this, 'modelValue', defValue)
+          this.$refs.validator && this.$refs.validator.reset()
+          this.$nextTick(() => {
+            this.validatorDisabled = false
+          })
+        }
+        this.validating = false
+        this.pending = false
+      },
+      msgClick() {
+        /* istanbul ignore if */
+        if (this.form.layout !== LAYOUTS.STANDARD) {
+          return
+        }
+        /* istanbul ignore next */
+        this.$createToast && this.$createToast({
+          type: 'warn',
+          txt: this.$refs.validator.msg,
+          time: 1000
+        }).show()
+      }
+    },
+    beforeDestroy() {
+      this.removeFocusEvents()
+      this.form.destroyField(this)
+      this.form = null
+    },
+    components
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+  @require "../../common/stylus/mixin.styl"
+
+  .cube-form-item
+    position: relative
+    display: flex
+    align-items: center
+    padding: 0 15px
+    &:last-child
+      &::after
+        display: none
+    .cube-checkbox-group, .cube-radio-group
+      background-color: transparent
+    .cube-checkbox, .cube-radio
+      padding-left: 0
+      padding-right: 0
+  .cube-form-item_btn
+    margin: 15px 0
+    &::after
+      display: none
+  .cube-form-label
+    display: flex
+    align-items: center
+    word-wrap: break-word
+    word-break: break-word
+  .cube-form-item_required
+    .cube-form-label
+      &::before
+        content: "*"
+        display: block
+        margin-top: 1px
+        margin-right: .3em
+        color: $form-label-required-color
+</style>

src/components/form/form.vue

@@ -0,0 +1,427 @@
+<template>
+  <form ref="form" class="cube-form" :class="formClass" :action="action" @submit="submitHandler" @reset="resetHandler">
+    <slot>
+      <cube-form-group v-for="(group, index) in groups" :fields="group.fields" :legend="group.legend" :key="index" />
+    </slot>
+  </form>
+</template>
+
+<script>
+  import { dispatchEvent } from '../../common/helpers/dom'
+  import { cb2PromiseWithResolve } from '../../common/helpers/util'
+  import CubeFormGroup from './form-group.vue'
+  import LAYOUTS from './layouts'
+  import mixin from './mixin'
+
+  const COMPONENT_NAME = 'cube-form'
+  const EVENT_SUBMIT = 'submit'
+  const EVENT_RESET = 'reset'
+  const EVENT_VALIDATE = 'validate'
+  const EVENT_VALID = 'valid'
+  const EVENT_INVALID = 'invalid'
+
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [mixin],
+    props: {
+      action: String,
+      model: {
+        type: Object,
+        default() {
+          /* istanbul ignore next */
+          return {}
+        }
+      },
+      schema: {
+        type: Object,
+        default() {
+          /* istanbul ignore next */
+          return {}
+        }
+      },
+      options: {
+        type: Object,
+        default() {
+          return {
+            scrollToInvalidField: false,
+            layout: LAYOUTS.STANDARD
+          }
+        }
+      },
+      immediateValidate: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        validatedCount: 0,
+        dirty: false,
+        firstInvalidField: null,
+        firstInvalidFieldIndex: -1
+      }
+    },
+    computed: {
+      groups() {
+        const schema = this.schema
+        const groups = schema.groups || []
+        if (schema.fields) {
+          groups.unshift({
+            fields: schema.fields
+          })
+        }
+        return groups
+      },
+      layout() {
+        const options = this.options
+        const layout = (options && options.layout) || LAYOUTS.STANDARD
+        return layout
+      },
+      formClass() {
+        const invalid = this.invalid
+        const valid = this.valid
+        const layout = this.layout
+        return {
+          'cube-form_standard': layout === LAYOUTS.STANDARD,
+          'cube-form_groups': this.groups.length > 1,
+          'cube-form_validating': this.validating,
+          'cube-form_pending': this.pending,
+          'cube-form_valid': valid,
+          'cube-form_invalid': invalid,
+          'cube-form_classic': layout === LAYOUTS.CLASSIC,
+          'cube-form_fresh': layout === LAYOUTS.FRESH
+        }
+      }
+    },
+    watch: {
+      validatedCount() {
+        this.$emit(EVENT_VALIDATE, {
+          validity: this.validity,
+          valid: this.valid,
+          invalid: this.invalid,
+          dirty: this.dirty,
+          firstInvalidFieldIndex: this.firstInvalidFieldIndex
+        })
+      }
+    },
+    beforeCreate() {
+      this.form = this
+      this.fields = []
+      this.validity = {}
+    },
+    mounted() {
+      if (this.immediateValidate) {
+        this.validate()
+      }
+    },
+    methods: {
+      submit(skipValidate = false) {
+        this.skipValidate = skipValidate
+        dispatchEvent(this.$refs.form, 'submit')
+        this.skipValidate = false
+      },
+      reset() {
+        dispatchEvent(this.$refs.form, 'reset')
+      },
+      submitHandler(e) {
+        if (this.skipValidate) {
+          this.$emit(EVENT_SUBMIT, e, this.model)
+          return
+        }
+        const submited = (submitResult) => {
+          if (submitResult) {
+            this.$emit(EVENT_VALID, this.validity)
+            this.$emit(EVENT_SUBMIT, e, this.model)
+          } else {
+            e.preventDefault()
+            this.$emit(EVENT_INVALID, this.validity)
+          }
+        }
+        if (this.valid === undefined) {
+          this._submit(submited)
+          if (this.validating || this.pending) {
+            // async validate
+            e.preventDefault()
+          }
+        } else {
+          submited(this.valid)
+        }
+      },
+      resetHandler(e) {
+        this._reset()
+        this.$emit(EVENT_RESET, e)
+      },
+      _submit(cb) {
+        this.validate(() => {
+          if (this.invalid) {
+            if (this.options.scrollToInvalidField && this.firstInvalidField) {
+              this.firstInvalidField.$el.scrollIntoView()
+            }
+          }
+          cb && cb(this.valid)
+        })
+      },
+      _reset() {
+        this.fields.forEach((fieldComponent) => {
+          fieldComponent.reset()
+        })
+        this.setValidity()
+        this.setValidating()
+        this.setPending()
+      },
+      validate(cb) {
+        const promise = cb2PromiseWithResolve(cb)
+        if (promise) {
+          cb = promise.resolve
+        }
+        let doneCount = 0
+        const len = this.fields.length
+        this.originValid = undefined
+        this.fields.forEach((fieldComponent) => {
+          fieldComponent.validate(() => {
+            doneCount++
+            if (doneCount === len) {
+              // all done
+              cb && cb(this.valid)
+            }
+          })
+        })
+        return promise
+      },
+      updateValidating() {
+        const validating = this.fields.some((fieldComponent) => fieldComponent.validating)
+        this.setValidating(validating)
+      },
+      updatePending() {
+        const pending = this.fields.some((fieldComponent) => fieldComponent.pending)
+        this.setPending(pending)
+      },
+      setValidating(validating = false) {
+        this.validating = validating
+      },
+      setPending(pending = false) {
+        this.pending = pending
+      },
+      updateValidity(modelKey, valid, result, dirty) {
+        const curResult = this.validity[modelKey]
+        if (curResult && curResult.valid === valid && curResult.result === result && curResult.dirty === dirty) {
+          return
+        }
+        this.setValidity(modelKey, {
+          valid,
+          result,
+          dirty
+        })
+      },
+      setValidity(key, val) {
+        let validity = {}
+        if (key) {
+          Object.assign(validity, this.validity)
+          if (val === undefined) {
+            delete validity[key]
+          } else {
+            validity[key] = val
+          }
+        }
+
+        let dirty = false
+        let invalid = false
+        let valid = true
+        let firstInvalidFieldKey = ''
+        this.fields.forEach((fieldComponent) => {
+          const modelKey = fieldComponent.fieldValue.modelKey
+          if (modelKey) {
+            const retVal = validity[modelKey]
+            if (retVal) {
+              if (retVal.dirty) {
+                dirty = true
+              }
+              if (retVal.valid === false) {
+                valid = false
+              } else if (valid && !retVal.valid) {
+                valid = retVal.valid
+              }
+
+              if (!invalid && retVal.valid === false) {
+                // invalid
+                invalid = true
+                firstInvalidFieldKey = modelKey
+              }
+            } else if (fieldComponent.hasRules) {
+              if (valid) {
+                valid = undefined
+              }
+              validity[modelKey] = {
+                valid: undefined,
+                result: {},
+                dirty: false
+              }
+            }
+          }
+        })
+        this.validity = validity
+        this.dirty = dirty
+        this.originValid = valid
+        this.setFirstInvalid(firstInvalidFieldKey)
+        this.validatedCount++
+      },
+      setFirstInvalid(key) {
+        if (!key) {
+          this.firstInvalidField = null
+          this.firstInvalidFieldIndex = -1
+          return
+        }
+        this.fields.some((fieldComponent, index) => {
+          if (fieldComponent.fieldValue.modelKey === key) {
+            this.firstInvalidField = fieldComponent
+            this.firstInvalidFieldIndex = index
+            return true
+          }
+        })
+      },
+      addField(fieldComponent) {
+        this.fields.push(fieldComponent)
+      },
+      destroyField(fieldComponent) {
+        const i = this.fields.indexOf(fieldComponent)
+        this.fields.splice(i, 1)
+        this.setValidity(fieldComponent.fieldValue.modelKey)
+      }
+    },
+    beforeDestroy() {
+      this.form = null
+      this.firstInvalidField = null
+    },
+    components: {
+      CubeFormGroup
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+  @require "../../common/stylus/mixin.styl"
+
+  .cube-form
+    position: relative
+    font-size: $fontsize-large
+    line-height: 1.429
+    color: $form-color
+    background-color: $form-bgc
+  .cube-form_groups
+    .cube-form-group-legend
+      padding: 10px 15px
+      &:empty
+        padding-top: 5px
+        padding-bottom: 5px
+  .cube-form_standard
+    .cube-form-item
+      min-height: 46px
+    .cube-form-field
+      flex: 1
+      font-size: $fontsize-medium
+    .cube-validator
+      display: flex
+      align-items: center
+      position: relative
+    .cube-validator_invalid
+      color: $form-invalid-color
+    .cube-validator-content
+      flex: 1
+    .cube-validator-msg-def
+      font-size: 0
+    .cube-validator_invalid
+      .cube-validator-msg
+        &::before
+          content: "\e614"
+          padding-left: 5px
+          font-family: "cube-icon"!important
+          font-size: $fontsize-large-xx
+          font-style: normal
+          -webkit-font-smoothing: antialiased
+          -webkit-text-stroke-width: 0.2px
+          -moz-osx-font-smoothing: grayscale
+    .cube-form-label
+      width: 100px
+      padding-right: 10px
+    .cube-checkbox-group, .cube-radio-group
+      &::before, &::after
+        display: none
+    .cube-input
+      input
+        padding: 13px 0
+        background-color: transparent
+      &::after
+        display: none
+    .cube-textarea-wrapper
+      padding: 13px 0
+      height: 20px
+      &.cube-textarea_expanded
+        height: 60px
+        padding-bottom: 20px
+        .cube-textarea-indicator
+          bottom: 2px
+      .cube-textarea
+        padding: 0
+        background-color: transparent
+      &::after
+        display: none
+    .cube-select
+      padding-left: 0
+      background-color: transparent
+      &::after
+        display: none
+    .cube-upload-def
+      padding: 5px 0
+      .cube-upload-btn, .cube-upload-file
+        margin: 5px 10px 5px 0
+  .cube-form_classic
+    .cube-form-item
+      display: block
+      padding: 15px
+      &:last-child
+        padding-bottom: 30px
+      &::after
+        display: none
+      .cube-validator-msg
+        position: absolute
+        margin-top: 3px
+        &::before
+          display: none
+      .cube-validator-msg-def
+        font-size: $fontsize-small
+    .cube-form-item_btn
+      padding-top: 0
+      padding-bottom: 0
+      &:last-child
+        padding-bottom: 0
+    .cube-form-label
+      padding-bottom: 15px
+  .cube-form_fresh
+    .cube-form-item
+      display: block
+      padding: 2em 15px 10px
+      &::after
+        display: none
+      .cube-validator-msg
+        position: absolute
+        top: 1em
+        right: 15px
+        bottom: auto
+        margin-top: -.4em
+        font-size: $fontsize-small
+        &::before
+          display: none
+      .cube-validator-msg-def
+        font-size: 100%
+    .cube-form-item_btn
+      padding-top: 0
+      padding-bottom: 0
+      &:last-child
+        padding-bottom: 0
+    .cube-form-label
+      position: absolute
+      top: 1em
+      margin-top: -.4em
+      font-size: $fontsize-small
+</style>

src/components/form/layouts.js

@@ -0,0 +1,7 @@
+const LAYOUTS = {
+  STANDARD: 'standard',
+  CLASSIC: 'classic',
+  FRESH: 'fresh'
+}
+
+export default LAYOUTS

src/components/form/mixin.js

@@ -0,0 +1,21 @@
+export default {
+  data() {
+    return {
+      validating: false,
+      pending: false,
+      originValid: undefined
+    }
+  },
+  computed: {
+    valid() {
+      const originValid = this.originValid
+      const pending = this.pending
+      const validating = this.validating
+      return (pending || validating) ? undefined : originValid
+    },
+    invalid() {
+      const valid = this.valid
+      return valid === undefined ? valid : !valid
+    }
+  }
+}

src/components/image-preview/image-preview.vue

@@ -0,0 +1,327 @@
+<template>
+  <transition name="cube-image-preview-fade">
+    <cube-popup type="image-preview" :z-index="zIndex" :center="false" v-show="isVisible">
+      <div class="cube-image-preview-container">
+        <div class="cube-image-preview-header">
+          <slot name="header" :current="currentPageIndex"></slot>
+        </div>
+        <cube-slide
+          ref="slide"
+          v-if="isVisible"
+          :data="imgs"
+          :initial-index="currentPageIndex"
+          :auto-play="false"
+          :loop="loop"
+          :speed="speed"
+          :options="options"
+          @change="slideChangeHandler"
+        >
+          <cube-slide-item
+            v-for="(img, index) in imgs"
+            :key="index"
+          >
+            <div class="cube-image-preview-item" @click="itemClickHandler">
+              <cube-scroll
+                ref="items"
+                :options="scrollOptions"
+                @dblclick.native="dblclickHandler(index, $event)"
+              >
+                <img class="cube-image-preview-img" :src="img" @load="imgLoad(index)">
+              </cube-scroll>
+            </div>
+          </cube-slide-item>
+          <template slot="dots"><i></i></template>
+        </cube-slide>
+        <div class="cube-image-preview-footer">
+          <slot name="footer" :current="currentPageIndex">
+            <span class="cube-image-preview-counter">{{currentPageIndex + 1}}/{{imgs.length}}</span>
+          </slot>
+        </div>
+      </div>
+    </cube-popup>
+  </transition>
+</template>
+<script type="text/ecmascript-6">
+  import CubePopup from '../popup/popup.vue'
+  import CubeSlide from '../slide/slide.vue'
+  import CubeSlideItem from '../slide/slide-item.vue'
+  import CubeScroll from '../scroll/scroll.vue'
+  import visibilityMixin from '../../common/mixins/visibility'
+  import popupMixin from '../../common/mixins/popup'
+  import { isAndroid } from '../../common/helpers/env'
+
+  const COMPONENT_NAME = 'cube-image-preview'
+  const EVENT_CHANGE = 'change'
+  const EVENT_HIDE = 'hide'
+
+  export default {
+    name: COMPONENT_NAME,
+    mixins: [visibilityMixin, popupMixin],
+    props: {
+      initialIndex: {
+        type: Number,
+        default: 0
+      },
+      imgs: {
+        type: Array,
+        default() {
+          /* istanbul ignore next */
+          return []
+        }
+      },
+      loop: {
+        type: Boolean,
+        default: true
+      },
+      speed: {
+        type: Number,
+        default: 400
+      },
+      preventDefault: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        currentPageIndex: this.initialIndex,
+        options: {
+          observeDOM: false,
+          bounce: {
+            left: true,
+            right: true
+          },
+          useTransition: !isAndroid,
+          probeType: 3,
+          preventDefault: this.preventDefault
+        },
+        scrollOptions: {
+          HWCompositing: isAndroid,
+          observeDOM: false,
+          zoom: true,
+          bindToWrapper: true,
+          freeScroll: true,
+          scrollX: true,
+          scrollY: true,
+          probeType: 3,
+          bounce: false,
+          click: false,
+          dblclick: true,
+          bounceTime: 300,
+          preventDefault: this.preventDefault
+        }
+      }
+    },
+    watch: {
+      initialIndex(newIndex) {
+        this.setPageIndex(newIndex)
+      }
+    },
+    methods: {
+      show() {
+        this.isVisible = true
+        this.$nextTick(() => {
+          this._listenSlide()
+          this._listenScroll()
+        })
+      },
+      _listenSlide() {
+        // waiting slide initial
+        this.$nextTick(() => {
+          const slide = this.$refs.slide.slide
+          slide.on('scrollStart', this.slideScrollStartHandler)
+          slide.on('scrollEnd', this.slideScrollEndHandler)
+        })
+      },
+      _listenScroll() {
+        // waiting scroll initial
+        this.$nextTick(() => {
+          this.$refs.items.forEach((scrollItem) => {
+            const scroll = scrollItem.scroll
+            scroll.on('zoomStart', this.zoomStartHandler.bind(this, scroll))
+            scroll.on('beforeScrollStart', this.beforeScrollHandler)
+            scroll.on('scroll', this.checkBoundary.bind(this, scroll))
+            scroll.on('scrollEnd', this.scrollEndHandler.bind(this, scroll))
+          })
+        })
+      },
+      hide() {
+        this.isVisible = false
+        this.$emit(EVENT_HIDE)
+      },
+      prev() {
+        const slide = this.$refs.slide.slide
+        slide && slide.prev()
+      },
+      next() {
+        const slide = this.$refs.slide.slide
+        slide && slide.next()
+      },
+      goTo(index) {
+        const slide = this.$refs.slide.slide
+        slide && slide.goToPage(index, 0)
+      },
+      imgLoad(i) {
+        /* istanbul ignore if */
+        if (this.isVisible && this.$refs.items) {
+          this.$refs.items[i].scroll.refresh()
+        }
+      },
+      setPageIndex(currentPageIndex) {
+        if (this.currentPageIndex >= 0 && this.currentPageIndex !== currentPageIndex) {
+          const item = this.$refs.items[this.currentPageIndex]
+          if (item) {
+            const scroll = item.scroll
+            /* istanbul ignore if */
+            if (scroll.scale !== 1) {
+              scroll.scale = 1
+              scroll.lastcale = 1
+              scroll.refresh()
+            }
+          }
+        }
+        this.currentPageIndex = currentPageIndex
+      },
+      slideChangeHandler(currentPageIndex) {
+        this.setPageIndex(currentPageIndex)
+        this.slideScrollEndHandler()
+        this.$emit(EVENT_CHANGE, currentPageIndex)
+      },
+      slideScrollStartHandler() {
+        const slide = this.$refs.slide.slide
+        if (this._scrolling && !this._hasEnableSlide) {
+          slide.disable()
+        } else {
+          slide.enable()
+        }
+      },
+      slideScrollEndHandler() {
+        this.$refs.items.forEach((scrollItem) => {
+          this.scrollEndHandler(scrollItem.scroll)
+        })
+      },
+      _scroll(scroll) {
+        const slide = this.$refs.slide.slide
+        slide.disable()
+        slide.refresh()
+        scroll.enable()
+      },
+      _slide(scroll) {
+        this.$refs.slide.slide.enable()
+        scroll.disable()
+      },
+      beforeScrollHandler() {
+        // for touchstart scrollEnd
+        // cancel it, do not enable slide
+        clearTimeout(this.enableSlideTid)
+      },
+      scrollEndHandler(scroll) {
+        clearTimeout(this.enableSlideTid)
+        if (this.dblZooming) {
+          this.dblZooming = false
+          clearTimeout(this.clickTid)
+        }
+        this._hasEnableSlide = false
+        this._scrolling = false
+        scroll.enable()
+        this.enableSlideTid = setTimeout(() => {
+          this.$refs.slide.slide.enable()
+        })
+      },
+      checkBoundary(scroll, pos) {
+        if (scroll.distX && Math.abs(scroll.distX) > Math.abs(scroll.distY)) {
+          this._scrolling = true
+          const reached = scroll.distX > 0 ? pos.x >= scroll.minScrollX : pos.x <= scroll.maxScrollX
+          if (reached) {
+            this._hasEnableSlide = true
+            this._slide(scroll)
+          } else {
+            if (!this._hasEnableSlide) {
+              this._scroll(scroll)
+            }
+          }
+        } else if (scroll.distY) {
+          this._scrolling = true
+          this._scroll(scroll)
+        }
+      },
+      zoomStartHandler(scroll) {
+        this._scroll(scroll)
+      },
+      dblclickHandler(index, e) {
+        const scroll = this.$refs.items[index].scroll
+        this.dblZooming = true
+        this.zoomTo(scroll, scroll.scale > 1 ? 1 : 2, e)
+        scroll.disable()
+      },
+      itemClickHandler() {
+        clearTimeout(this.clickTid)
+        this.clickTid = setTimeout(() => {
+          !this.dblZooming && this.hide()
+        }, this.scrollOptions.bounceTime)
+      },
+      zoomTo(scroll, scale, e) {
+        scroll.zoomTo(scale, e.pageX, e.pageY)
+      }
+    },
+    components: {
+      CubePopup,
+      CubeSlide,
+      CubeSlideItem,
+      CubeScroll
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+  @require "../../common/stylus/variable.styl"
+
+  .cube-image-preview-fade-enter, .cube-image-preview-fade-leave-active
+    opacity: 0
+  .cube-image-preview-fade-enter-active, .cube-image-preview-fade-leave-active
+    transition: all .3s ease-in-out
+
+  .cube-image-preview
+    .cube-popup-mask
+      opacity: .6
+    .cube-popup-content
+      width: 100%
+      height: 100%
+    .cube-slide-item
+      display: flex
+      align-items: center
+      justify-content: center
+      overflow: hidden
+  .cube-image-preview-container
+    height: 100%
+    margin: 0 -10px
+  .cube-image-preview-header,
+  .cube-image-preview-footer
+    position: absolute
+    left: 0
+    right: 0
+  .cube-image-preview-header
+    top: 0
+  .cube-image-preview-footer
+    bottom: 0
+  .cube-image-preview-counter
+    position: absolute
+    bottom: 50px
+    width: 100%
+    text-align: center
+    font-size: $fontsize-medium
+    color: $image-preview-counter-color
+  .cube-image-preview-item
+    position: relative
+    padding: 0 10px
+    width: 100%
+    height: 100%
+    .cube-scroll-wrapper
+      display: flex
+      align-items: center
+      justify-content: center
+    .cube-image-preview-img
+      display: block
+      height: auto
+      max-width: 100%
+      max-height: 100%
+</style>