add test.

src/prog/dashboard2/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "comments": false,
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
+}

src/prog/dashboard2/.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

src/prog/dashboard2/.eslintignore

@@ -0,0 +1,2 @@
+build/*.js
+config/*.js

src/prog/dashboard2/.eslintrc.js

@@ -0,0 +1,27 @@
+// http://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

src/prog/dashboard2/.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

src/prog/dashboard2/.postcssrc.js

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

src/prog/dashboard2/README.md

@@ -0,0 +1,21 @@
+# dashboard2
+
+> AwoX dashboard App
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

src/prog/dashboard2/build/build.js

@@ -0,0 +1,35 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  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'
+    ))
+  })
+})

src/prog/dashboard2/build/check-versions.js

@@ -0,0 +1,48 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+var shell = require('shelljs')
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  var warnings = []
+  for (var i = 0; i < versionRequirements.length; i++) {
+    var mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (var i = 0; i < warnings.length; i++) {
+      var warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}

src/prog/dashboard2/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()
+  }
+})

src/prog/dashboard2/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()
+  }
+}

src/prog/dashboard2/build/utils.js

@@ -0,0 +1,71 @@
+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // 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'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+  return output
+}

src/prog/dashboard2/build/vue-loader.conf.js

@@ -0,0 +1,12 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: isProduction
+      ? config.build.productionSourceMap
+      : config.dev.cssSourceMap,
+    extract: isProduction
+  })
+}

src/prog/dashboard2/build/webpack.base.conf.js

@@ -0,0 +1,67 @@
+var path = require('path')
+var utils = require('./utils')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  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: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src'), resolve('test')],
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  }
+}

src/prog/dashboard2/build/webpack.dev.conf.js

@@ -0,0 +1,35 @@
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: '#cheap-module-eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    new FriendlyErrorsPlugin()
+  ]
+})

src/prog/dashboard2/build/webpack.prod.conf.js

@@ -0,0 +1,130 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
+
+var env = config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  watch: process.env.WEBPACK_WATCH === 'true',
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('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 webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: {
+        safe: true
+      }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.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'
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ]),
+    // service worker caching
+    new SWPrecacheWebpackPlugin({
+      cacheId: 'my-vue-app',
+      filename: 'service-worker.js',
+      staticFileGlobs: ['dist/**/*.{js,html,css}'],
+      minify: true,
+      stripPrefix: 'dist/'
+    })
+  ]
+})
+
+if (config.build.productionGzip) {
+  var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

src/prog/dashboard2/config/dev.env.js

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

src/prog/dashboard2/config/index.js

@@ -0,0 +1,38 @@
+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+  build: {
+    env: require('./prod.env'),
+    index: path.resolve(__dirname, '../dist/index.html'),
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    productionSourceMap: true,
+    // 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
+  },
+  dev: {
+    env: require('./dev.env'),
+    port: 8080,
+    autoOpenBrowser: true,
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
+  }
+}

src/prog/dashboard2/config/prod.env.js

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

src/prog/dashboard2/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>dashboard2</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/img/icons/favicon-16x16.png">
+    <!--[if IE]><link rel="shortcut icon" href="/static/img/icons/favicon.ico"><![endif]-->
+    <!-- Add to home screen for Android and modern mobile browsers -->
+    <link rel="manifest" href="/static/manifest.json">
+    <meta name="theme-color" content="#4DBA87">
+
+    <!-- Add to home screen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="dashboard2">
+    <link rel="apple-touch-icon" href="/static/img/icons/apple-touch-icon-152x152.png">
+    <!-- Add to home screen for Windows -->
+    <meta name="msapplication-TileImage" content="/static/img/icons/msapplication-icon-144x144.png">
+    <meta name="msapplication-TileColor" content="#000000">
+    <% for (var chunk of webpack.chunks) {
+        for (var file of chunk.files) {
+          if (file.match(/\.(js|css)$/)) { %>
+    <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/prog/dashboard2/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "dashboard2",
+  "version": "1.0.0",
+  "description": "Domo dashboard App",
+  "author": "AwoX",
+  "private": true,
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "start": "node build/dev-server.js",
+    "build": "node build/build.js",
+    "build:watch": "cross-env WEBPACK_WATCH=true node build/build.js",
+    "lint": "eslint --ext .js,.vue src"
+  },
+  "dependencies": {
+    "axios": "^0.16.2",
+    "components": "^0.1.0",
+    "ionicons": "^3.0.0",
+    "onsenui": "~2.4.0",
+    "vue": "^2.3.3",
+    "vue-onsenui": "~2.0.0",
+    "vuex": "^2.3.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.2",
+    "babel-core": "^6.22.1",
+    "sw-precache-webpack-plugin": "^0.9.1",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chalk": "^1.1.3",
+    "connect-history-api-fallback": "^1.3.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^4.0.0",
+    "css-loader": "^0.28.0",
+    "eslint": "^3.19.0",
+    "eslint-friendly-formatter": "^2.0.7",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-html": "^2.0.0",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^2.0.1",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.14.1",
+    "extract-text-webpack-plugin": "^2.0.0",
+    "file-loader": "^0.11.1",
+    "friendly-errors-webpack-plugin": "^1.1.3",
+    "html-webpack-plugin": "^2.28.0",
+    "http-proxy-middleware": "^0.17.3",
+    "webpack-bundle-analyzer": "^2.2.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "opn": "^4.0.2",
+    "optimize-css-assets-webpack-plugin": "^1.3.0",
+    "ora": "^1.2.0",
+    "rimraf": "^2.6.0",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^12.1.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.3.3",
+    "webpack": "^2.6.1",
+    "webpack-dev-middleware": "^1.10.0",
+    "webpack-hot-middleware": "^2.18.0",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/prog/dashboard2/src/AppNavigator.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-ons-navigator
+    :page-stack="pageStack"
+    :pop-page="storePop"
+    :options="options"
+  ></v-ons-navigator>
+</template>
+
+<script>
+import AppSplitter from './AppSplitter.vue'
+
+export default {
+  beforeCreate () {
+    this.$store.commit('navigator/push', AppSplitter)
+  },
+  computed: {
+    pageStack () {
+      return this.$store.state.navigator.stack
+    },
+    options () {
+      return this.$store.state.navigator.options
+    }
+  },
+  methods: {
+    storePop () {
+      this.$store.commit('navigator/pop')
+    }
+  }
+}
+</script>

src/prog/dashboard2/src/AppSplitter.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-ons-page>
+    <v-ons-splitter>
+      <v-ons-splitter-side swipeable side="right" collapse="" width="260px" :animation="$ons.platform.isAndroid() ? 'overlay' : 'reveal'"
+        :open.sync="isOpen"
+      >
+        <menu-page></menu-page>
+      </v-ons-splitter-side>
+
+      <v-ons-splitter-content>
+        <app-tabbar></app-tabbar>
+      </v-ons-splitter-content>
+    </v-ons-splitter>
+  </v-ons-page>
+</template>
+
+<script>
+import AppTabbar from './AppTabbar.vue'
+import MenuPage from './pages/Menu.vue'
+
+export default {
+  computed: {
+    isOpen: {
+      get () {
+        return this.$store.state.splitter.open
+      },
+      set (newValue) {
+        this.$store.commit('splitter/toggle', newValue)
+      }
+    }
+  },
+  components: { AppTabbar, MenuPage }
+}
+</script>
+
+<style>
+ons-splitter-side[animation=overlay] {
+  border-left: 1px solid #bbb;
+}
+</style>

src/prog/dashboard2/src/AppTabbar.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar>
+      {{ title }}
+      <v-ons-toolbar-button slot="right" @click="$store.commit('splitter/toggle')">
+        <v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon>
+      </v-ons-toolbar-button>
+    </custom-toolbar>
+
+    <v-ons-tabbar
+      position="auto"
+      :tabs="tabs"
+      :index.sync="index"
+    ></v-ons-tabbar>
+  </v-ons-page>
+</template>
+
+<script>
+import Home from './pages/Home.vue'
+import Lights from './pages/Lights.vue'
+import Sprinklers from './pages/Sprinklers.vue'
+import Shutters from './pages/Shutters.vue'
+import Timers from './pages/Timers.vue'
+import Settings from './pages/Settings.vue'
+
+export default {
+  data () {
+    return {
+      tabs: [
+        {
+          label: 'Home',
+          icon: this.md() ? null : 'ion-home',
+          page: Home
+        },
+        {
+          label: 'Lights',
+          icon: this.md() ? null : 'ion-lightbulb',
+          page: Lights
+        },
+        {
+          label: 'Sprinklers',
+          icon: this.md() ? null : 'icn-sprinklers',
+          page: Sprinklers
+        },
+        {
+          label: 'Shutters',
+          icon: this.md() ? null : 'ion-film-marker',
+          page: Shutters
+        },
+        {
+          label: 'Timers',
+          icon: this.md() ? null : 'ion-clock',
+          page: Timers
+        },
+        {
+          label: 'Settings',
+          icon: this.md() ? null : 'ion-ios-settings',
+          page: Settings
+        }
+      ]
+    }
+  },
+  methods: {
+    md () {
+      return this.$ons.platform.isAndroid()
+    }
+  },
+  computed: {
+    index: {
+      get () {
+        return this.$store.state.tabbar.index
+      },
+      set (newValue) {
+        this.$store.commit('tabbar/set', newValue)
+      }
+    },
+    title () {
+      return this.md() ? 'Kitchen Sink' : this.tabs[this.index].label
+    }
+  }
+}
+</script>
+<style>
+.icn-sprinklers {
+  background-image: url("assets/logo.png");
+}
+</style>
+

src/prog/dashboard2/src/assets/shutters.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="150.000000pt" height="161.000000pt" viewBox="0 0 150.000000 161.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,161.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M210 1592 c0 -6 746 -256 925 -309 73 -22 105 -61 105 -130 0 -99
+-73 -167 -152 -144 -96 29 -103 176 -10 212 26 10 69 -4 88 -29 40 -52 -13
+-141 -70 -119 -39 15 -36 87 4 87 23 0 27 -25 5 -34 -26 -9 -16 -27 13 -24 22
+2 28 9 30 34 7 70 -71 85 -102 19 -49 -102 89 -173 147 -76 9 16 17 49 17 74
+0 39 -5 49 -35 76 -60 52 -137 35 -175 -39 -35 -69 -23 -136 34 -189 19 -18
+41 -26 81 -29 54 -4 56 -4 99 39 84 85 84 217 -1 277 -16 10 -226 85 -468 166
+-319 106 -453 146 -488 146 -26 0 -47 -3 -47 -8z"/>
+<path d="M133 1568 c-13 -6 -23 -14 -23 -18 0 -4 199 -75 441 -159 420 -144
+443 -151 465 -136 28 18 30 30 8 39 -109 42 -836 286 -850 285 -10 0 -29 -5
+-41 -11z"/>
+<path d="M51 1504 c-12 -15 -21 -30 -21 -33 0 -7 910 -345 914 -339 19 32 33
+78 26 83 -15 9 -879 315 -889 315 -5 0 -19 -12 -30 -26z"/>
+<path d="M1013 1469 c-18 -5 -33 -14 -33 -18 0 -5 28 -19 63 -30 60 -20 66
+-21 102 -5 93 39 181 -10 212 -116 34 -118 15 -240 -52 -331 -30 -42 -39 -48
+-82 -52 -59 -7 -183 -40 -183 -49 0 -4 30 -22 67 -40 64 -31 73 -33 173 -32
+58 0 118 6 135 13 l30 13 -24 19 c-21 17 -23 23 -13 37 29 40 64 126 78 194
+32 150 -13 254 -146 340 -90 58 -236 83 -327 57z"/>
+<path d="M29 1393 c-8 -85 -59 -62 809 -372 l112 -40 0 59 0 59 -57 21 c-131
+49 -851 310 -856 310 -3 0 -6 -17 -8 -37z"/>
+<path d="M30 1221 c0 -38 4 -61 13 -64 6 -2 208 -80 447 -172 239 -92 441
+-170 448 -172 10 -4 12 11 10 67 l-3 73 -200 74 c-374 136 -700 253 -707 253
+-5 0 -8 -27 -8 -59z"/>
+<path d="M30 1072 l0 -61 455 -180 c250 -100 457 -181 460 -181 3 0 5 30 3 66
+l-3 67 -435 168 c-239 93 -445 172 -457 175 -22 6 -23 4 -23 -54z"/>
+<path d="M32 929 l3 -61 455 -188 455 -189 3 56 c2 31 -1 59 -5 64 -6 6 -769
+322 -891 370 -23 9 -23 8 -20 -52z"/>
+<path d="M29 836 c-2 -2 -2 -27 -1 -54 l4 -51 446 -191 c246 -106 453 -194
+460 -197 10 -4 12 9 10 58 l-3 64 -450 187 c-468 194 -459 191 -466 184z"/>
+<path d="M32 639 l3 -50 452 -200 c249 -109 455 -199 458 -199 3 0 5 26 3 57
+l-3 57 -454 193 c-250 106 -456 193 -458 193 -2 0 -3 -23 -1 -51z"/>
+<path d="M32 495 l3 -57 453 -209 c250 -115 456 -209 458 -209 2 0 4 31 4 68
+l0 68 -443 192 c-243 105 -450 194 -460 198 -16 6 -18 1 -15 -51z"/>
+</g>
+</svg>

src/prog/dashboard2/src/assets/sprinklers.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M301 1636 c-7 -8 -11 -27 -9 -43 2 -22 9 -29 31 -31 50 -6 75 38 41
+72 -19 20 -48 20 -63 2z"/>
+<path d="M916 1640 c-118 -21 -176 -78 -176 -172 l0 -48 80 0 81 0 -3 -77 c-3
+-77 -3 -78 -30 -81 l-28 -3 0 -380 0 -379 -35 0 -35 0 0 -105 0 -105 250 0
+250 0 0 105 0 105 -35 0 -35 0 0 380 0 380 -25 0 c-25 0 -25 1 -25 80 l0 80
+76 0 76 0 -4 65 c-5 78 -26 105 -105 135 -63 23 -203 34 -277 20z"/>
+<path d="M1676 1634 c-33 -32 -13 -74 36 -74 38 0 55 33 33 66 -18 28 -46 31
+-69 8z"/>
+<path d="M442 1538 c-15 -15 -15 -51 0 -66 28 -28 78 -7 78 33 0 27 -18 45
+-45 45 -12 0 -26 -5 -33 -12z"/>
+<path d="M1536 1534 c-23 -23 -20 -51 8 -69 34 -23 66 -5 66 35 0 44 -44 64
+-74 34z"/>
+<path d="M308 1459 c-22 -12 -24 -62 -3 -79 23 -19 64 -4 71 27 5 20 2 31 -16
+45 -25 21 -29 21 -52 7z"/>
+<path d="M570 1452 c-45 -36 -1 -99 50 -72 27 14 27 65 1 80 -25 13 -25 13
+-51 -8z"/>
+<path d="M1412 1438 c-7 -7 -12 -21 -12 -33 0 -12 5 -26 12 -33 7 -7 21 -12
+33 -12 12 0 26 5 33 12 7 7 12 21 12 33 0 12 -5 26 -12 33 -7 7 -21 12 -33 12
+-12 0 -26 -5 -33 -12z"/>
+<path d="M1670 1431 c-14 -27 -13 -37 6 -55 23 -23 51 -20 69 8 13 19 14 29 5
+45 -14 28 -65 29 -80 2z"/>
+<path d="M452 1354 c-49 -34 -6 -103 47 -74 28 14 25 57 -4 76 -18 12 -24 11
+-43 -2z"/>
+<path d="M688 1358 c-25 -21 -28 -45 -9 -69 24 -30 68 -20 77 18 5 20 2 31
+-16 45 -26 21 -31 22 -52 6z"/>
+<path d="M1541 1344 c-30 -21 -27 -61 5 -76 36 -17 59 0 59 42 0 40 -31 57
+-64 34z"/>
+<path d="M1288 1325 c-9 -21 -8 -28 7 -45 10 -11 26 -20 35 -20 9 0 25 9 35
+20 27 30 7 70 -35 70 -23 0 -33 -6 -42 -25z"/>
+<path d="M308 1259 c-28 -16 -23 -67 7 -81 21 -9 28 -8 45 7 25 23 26 47 2 68
+-21 19 -30 20 -54 6z"/>
+<path d="M565 1250 c-36 -40 7 -96 55 -70 27 14 27 65 1 80 -27 14 -35 13 -56
+-10z"/>
+<path d="M1412 1238 c-7 -7 -12 -21 -12 -33 0 -12 5 -26 12 -33 7 -7 21 -12
+33 -12 12 0 26 5 33 12 7 7 12 21 12 33 0 12 -5 26 -12 33 -7 7 -21 12 -33 12
+-12 0 -26 -5 -33 -12z"/>
+<path d="M1672 1238 c-27 -27 -1 -78 38 -78 29 0 54 43 40 69 -12 24 -58 29
+-78 9z"/>
+<path d="M442 1158 c-28 -28 -7 -78 33 -78 40 0 61 50 33 78 -7 7 -21 12 -33
+12 -12 0 -26 -5 -33 -12z"/>
+<path d="M1539 1151 c-29 -23 -20 -68 16 -77 34 -9 57 12 53 49 -4 39 -38 53
+-69 28z"/>
+<path d="M302 1058 c-30 -30 -3 -83 39 -76 32 5 45 31 31 62 -13 28 -49 35
+-70 14z"/>
+<path d="M1676 1054 c-30 -30 -10 -74 34 -74 40 0 58 32 35 66 -18 28 -46 31
+-69 8z"/>
+<path d="M1310 863 c25 -83 48 -256 56 -425 l7 -148 119 0 118 0 0 30 c0 88
+69 340 122 443 19 38 19 38 -1 28 -42 -23 -124 -129 -164 -213 -23 -48 -44
+-87 -47 -88 -3 0 -13 33 -22 73 -23 95 -75 198 -144 286 -30 39 -57 71 -59 71
+-1 0 5 -26 15 -57z"/>
+<path d="M514 773 c-52 -78 -101 -202 -115 -291 l-12 -74 -40 76 c-22 42 -57
+95 -78 119 l-38 42 25 -73 c14 -40 33 -120 42 -178 l16 -104 128 0 127 0 6 38
+c15 90 39 192 61 256 17 50 20 65 9 56 -25 -21 -84 -106 -116 -167 l-31 -58 6
+85 c2 47 16 139 31 204 14 65 24 121 21 123 -2 2 -21 -22 -42 -54z"/>
+<path d="M1831 563 c-50 -56 -124 -189 -137 -245 l-6 -28 69 0 70 0 6 83 c3
+45 17 118 31 162 14 43 24 81 22 83 -2 1 -27 -23 -55 -55z"/>
+<path d="M136 433 c13 -37 24 -85 24 -105 l0 -38 46 0 c42 0 45 1 39 23 -11
+37 -68 126 -101 158 l-31 30 23 -68z"/>
+<path d="M683 473 c-28 -31 -58 -86 -79 -145 l-13 -38 44 0 45 0 0 44 c0 24 9
+72 19 105 10 34 17 61 14 61 -2 0 -15 -12 -30 -27z"/>
+</g>
+</svg>

src/prog/dashboard2/src/main.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import VueOnsen from 'vue-onsenui'
+import CustomToolbar from './partials/CustomToolbar.vue'
+import storeLike from './store.js'
+import AppNavigator from './AppNavigator.vue'
+// Onsen UI basic CSS
+import 'onsenui/css/onsenui.css'
+// Onsen UI CSS components source (requires cssnext)
+import 'onsenui/css/onsen-css-components.css'
+
+Vue.use(Vuex)
+Vue.use(VueOnsen)
+Vue.component('custom-toolbar', CustomToolbar) // Common toolbar
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  render: h => h(AppNavigator),
+  store: new Vuex.Store(storeLike)
+})

src/prog/dashboard2/src/pages.example/Animations.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-ons-page>
+    <v-ons-list>
+      <v-ons-list-header>Transitions</v-ons-list-header>
+      <v-ons-list-item v-for="animation in animations" :key="animation"
+        modifier="chevron"
+        @click="transition(animation)"
+      >
+        {{ animation }}
+      </v-ons-list-item>
+    </v-ons-list>
+  </v-ons-page>
+</template>
+
+<script>
+const transitionPage = {
+  template: `
+    <v-ons-page>
+      <custom-toolbar backLabel="Anim">
+        {{ animation }}
+      </custom-toolbar>
+      <p style="text-align: center">
+        Use the VOnsBackButton
+      </p>
+    </v-ons-page>
+    `
+}
+
+export default {
+  data () {
+    return {
+      animations: ['none', 'default', 'slide-ios', 'slide-md', 'lift-ios', 'lift-md', 'fade-ios', 'fade-md']
+    }
+  },
+  methods: {
+    transition (name) {
+      this.$store.commit('navigator/options', {
+        // Sets animations
+        animation: name,
+        // Resets default options
+        callback: () => this.$store.commit('navigator/options', {})
+      })
+
+      this.$store.commit('navigator/push', {
+        extends: transitionPage,
+        data () {
+          return {
+            animation: name
+          }
+        }
+      })
+    }
+  }
+}
+</script>

src/prog/dashboard2/src/pages.example/Buttons.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
+
+    <section style="margin: 16px">
+      <v-ons-button class="button-margin">Normal</v-ons-button>
+      <v-ons-button modifier="quiet" class="button-margin">Quiet</v-ons-button>
+      <v-ons-button modifier="outline" class="button-margin">Outline</v-ons-button>
+      <v-ons-button modifier="cta" class="button-margin">Call to action</v-ons-button>
+      <v-ons-button modifier="light" class="button-margin">Light</v-ons-button>
+      <v-ons-button modifier="large" class="button-margin">Large</v-ons-button>
+    </section>
+
+    <section style="margin: 16px">
+      <v-ons-button class="button-margin" disabled>Normal</v-ons-button>
+      <v-ons-button modifier="quiet" class="button-margin" disabled>Quiet</v-ons-button>
+      <v-ons-button modifier="outline" class="button-margin" disabled>Outline</v-ons-button>
+      <v-ons-button modifier="cta" class="button-margin" disabled>Call to action</v-ons-button>
+      <v-ons-button modifier="light" class="button-margin" disabled>Light</v-ons-button>
+      <v-ons-button modifier="large" class="button-margin" disabled>Large</v-ons-button>
+    </section>
+
+    <v-ons-fab position="top right" :style="spdStyle">
+      <v-ons-icon icon="md-face"></v-ons-icon>
+    </v-ons-fab>
+
+    <v-ons-fab position="bottom left" :style="spdStyle" disabled>
+      <v-ons-icon icon="md-car"></v-ons-icon>
+    </v-ons-fab>
+
+    <v-ons-speed-dial position="bottom right" direction="up"
+      :open.sync="spdOpen"
+    >
+      <v-ons-fab :style="spdStyle">
+        <v-ons-icon icon="md-share"></v-ons-icon>
+      </v-ons-fab>
+
+      <v-ons-speed-dial-item v-for="(icon, name) in shareItems" :key="name"
+        :style="spdStyle"
+        @click="$ons.notification.confirm(`Share on ${name}?`)"
+      >
+        <v-ons-icon :icon="icon"></v-ons-icon>
+      </v-ons-speed-dial-item>
+
+    </v-ons-speed-dial>
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      spdOpen: false,
+      spdStyle: {
+        backgroundColor: this.$ons.platform.isAndroid() ? null : '#4282cc'
+      },
+      shareItems: {
+        'Twitter': 'md-twitter',
+        'Facebook': 'md-facebook',
+        'Google+': 'md-google-plus'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.button-margin {
+  margin: 6px 0;
+}
+</style>

src/prog/dashboard2/src/pages.example/Carousel.vue

@@ -0,0 +1,70 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
+
+    <v-ons-carousel fullscreen swipeable auto-scroll overscrollable
+      :index.sync="carouselIndex"
+    >
+      <v-ons-carousel-item v-for="(value, key) in items" :key="key"
+        class="carousel-item"
+        :style="{ backgroundColor: value }"
+      >
+        <div class="color-tag">{{key}}</div>
+      </v-ons-carousel-item>
+    </v-ons-carousel>
+
+    <div class="dots">
+      <span v-for="dotIndex in Object.keys(items).length" :key="dotIndex"
+        @click="carouselIndex = dotIndex - 1"
+      >
+        {{ carouselIndex === dotIndex - 1 ? '\u25CF' : '\u25CB' }}
+      </span>
+    </div>
+
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      carouselIndex: 0,
+      items: {
+        gray: 'gray',
+        blue: '#085078',
+        dark: '#373B44',
+        orange: '#D38312'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.carousel-item {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.color-tag {
+  color: #fff;
+  font-size: 48px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.dots {
+  text-align: center;
+  font-size: 30px;
+  color: #fff;
+  position: absolute;
+  bottom: 40px;
+  left: 0;
+  right: 0;
+}
+
+.dots > span {
+  cursor: pointer;
+}
+</style>

src/prog/dashboard2/src/pages.example/Dialogs.vue

@@ -0,0 +1,210 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar v-bind="toolbarInfo">
+      <v-ons-toolbar-button slot="right" id="info-button" @click="popoverVisible = true">
+        <v-ons-icon v-if="$ons.platform.isAndroid()" icon="md-more-vert"></v-ons-icon>
+        <span v-else>More</span>
+      </v-ons-toolbar-button>
+    </custom-toolbar>
+
+    <v-ons-fab v-if="$ons.platform.isAndroid()" position="bottom right">
+      <v-ons-icon icon="md-face"></v-ons-icon>
+    </v-ons-fab>
+
+    <v-ons-list-title>Notifications</v-ons-list-title>
+    <v-ons-list modifier="inset">
+      <v-ons-list-item
+        tappable modifier="longdivider"
+        @click="$ons.notification.alert('Hello, world!')"
+      >
+        <div class="center">
+          Alert
+        </div>
+      </v-ons-list-item>
+      <v-ons-list-item
+        tappable modifier="longdivider"
+        @click="$ons.notification.confirm('Are you ready?')"
+      >
+        <div class="center">
+          Simple Confirmation
+        </div>
+      </v-ons-list-item>
+      <v-ons-list-item
+        tappable modifier="longdivider"
+        @click="$ons.notification.prompt('What is your name?')"
+      >
+        <div class="center">
+          Prompt
+        </div>
+      </v-ons-list-item>
+      <v-ons-list-item
+        tappable modifier="longdivider"
+        @click="$ons.notification.toast('Hi there!', { buttonLabel: 'Dismiss', timeout: 1500 })"
+      >
+        <div class="center">
+          Toast
+        </div>
+      </v-ons-list-item>
+      <v-ons-list-item
+        tappable modifier="longdivider"
+        @click="$ons.openActionSheet({ buttons: ['Label 1', 'Label 2', 'Label 3', 'Cancel'], destructive: 2, cancelable: true })"
+      >
+        <div class="center">
+          Action/Bottom Sheet
+        </div>
+      </v-ons-list-item>
+    </v-ons-list>
+
+    <v-ons-list-title>Components</v-ons-list-title>
+    <v-ons-list modifier="inset">
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="dialogVisible = true"
+      >
+        <div class="center">
+          Simple Dialog
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="alertDialogVisible = true"
+      >
+        <div class="center">
+          Alert Dialog
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="toastVisible = true"
+      >
+        <div class="center">
+          Toast (top)
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="showModal"
+      >
+        <div class="center">
+          Modal
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="popoverVisible = true"
+      >
+        <div class="center">
+          Popover - MD Menu
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="actionSheetVisible = true"
+      >
+        <div class="center">
+          Action/Bottom Sheet
+        </div>
+      </v-ons-list-item>
+    </v-ons-list>
+
+    <!-- Components -->
+
+    <v-ons-dialog cancelable
+      class="lorem-dialog"
+      :visible.sync="dialogVisible"
+    >
+      <!-- Optional page. This could contain a Navigator as well. -->
+      <v-ons-page>
+        <v-ons-toolbar>
+          <div class="center">Simple Dialog</div>
+        </v-ons-toolbar>
+        <p style="text-align: center">Lorem ipsum dolor</p>
+        <p style="text-align: center">
+          <v-ons-button modifier="light" @click="dialogVisible = false">Close</v-ons-button>
+        </p>
+      </v-ons-page>
+    </v-ons-dialog>
+
+    <v-ons-alert-dialog cancelable
+      :modifier="$ons.platform.isAndroid() ? '' : 'rowfooter'"
+      :title="'Hey!!'"
+      :footer="{
+        'Wat': () => alertDialogVisible = false,
+        'Hmm': () => alertDialogVisible = false,
+        'Sure': () => alertDialogVisible = false
+      }"
+      :visible.sync="alertDialogVisible"
+    >
+      Lorem ipsum <v-ons-icon icon="fa-commenting-o"></v-ons-icon>
+    </v-ons-alert-dialog>
+
+    <v-ons-toast :visible="toastVisible" animation="fall">Supercalifragilisticexpialidocious<button @click="toastVisible = false">No way</button></v-ons-toast>
+
+    <v-ons-modal
+      :visible="modalVisible"
+      @click="modalVisible = false"
+    >
+      <p style="text-align: center">
+        Loading <v-ons-icon icon="fa-spinner" spin></v-ons-icon>
+        <br><br>
+        Click or wait
+      </p>
+    </v-ons-modal>
+
+    <v-ons-popover cancelable direction="down" cover-target
+      target="#info-button"
+      :visible.sync="popoverVisible"
+    >
+      <v-ons-list>
+        <v-ons-list-item tappable
+          v-for="label in ['Call history', 'Import/export', 'New contact', 'Settings']"
+          @click="popoverVisible = false"
+          :key="label"
+          :modifier="$ons.platform.isAndroid() ? 'nodivider' : 'longdivider'"
+        >
+          <div class="center">{{ label }}</div>
+        </v-ons-list-item>
+      </v-ons-list>
+    </v-ons-popover>
+
+    <v-ons-action-sheet :visible.sync="actionSheetVisible" cancelable>
+      <v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Action 1</v-ons-action-sheet-button>
+      <v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Action 2</v-ons-action-sheet-button>
+      <v-ons-action-sheet-button @click="actionSheetVisible = false" modifier="destructive" icon="md-square-o">Action 3</v-ons-action-sheet-button>
+      <v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Cancel</v-ons-action-sheet-button>
+    </v-ons-action-sheet>
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      dialogVisible: false,
+      alertDialogVisible: false,
+      toastVisible: false,
+      modalVisible: false,
+      popoverVisible: false,
+      actionSheetVisible: false,
+      timeoutID: 0
+    }
+  },
+  methods: {
+    showModal () {
+      this.modalVisible = true
+      clearTimeout(this.timeoutID)
+      this.timeoutID = setTimeout(() => (this.modalVisible = false), 2000)
+    }
+  }
+}
+</script>
+
+<style>
+.lorem-dialog .dialog-container {
+  height: 200px;
+}
+</style>
+<style scoped>
+ons-list-title {
+  margin-top: 20px;
+}
+</style>

src/prog/dashboard2/src/pages.example/Forms.vue

@@ -0,0 +1,160 @@
+<template>
+  <v-ons-page>
+
+    <v-ons-list>
+      <v-ons-list-header>Text input</v-ons-list-header>
+      <v-ons-list-item :modifier="$ons.platform.isAndroid() ? 'nodivider' : ''">
+        <div class="left">
+          <v-ons-icon icon="md-face" class="list-item__icon"></v-ons-icon>
+        </div>
+        <label class="center">
+          <v-ons-input float maxlength="20"
+            placeholder="Name"
+            v-model="name"
+          >
+          </v-ons-input>
+        </label>
+      </v-ons-list-item>
+      <v-ons-list-item :modifier="$ons.platform.isAndroid() ? 'nodivider' : ''">
+        <div class="left">
+          <v-ons-icon icon="fa-question-circle-o" class="list-item__icon"></v-ons-icon>
+        </div>
+        <label class="center">
+          <v-ons-search-input maxlength="20"
+            placeholder="Search"
+            v-model="name"
+          >
+          </v-ons-search-input>
+        </label>
+      </v-ons-list-item>
+      <v-ons-list-item>
+        <div class="right right-label">
+          Hello {{ name || 'anonymous' }}!<v-ons-icon icon="fa-hand-spock-o" size="lg" class="right-icon"></v-ons-icon>
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-header>Switches</v-ons-list-header>
+      <ons-list-item>
+        <label class="center" for="switch1">
+          Switch ({{ switchOn ? 'on' : 'off' }})
+        </label>
+        <div class="right">
+          <v-ons-switch input-id="switch1" v-model="switchOn">
+          </v-ons-switch>
+        </div>
+      </ons-list-item>
+      <ons-list-item>
+        <label class="center" for="switch2">
+          {{ switchOn ? 'Enabled switch' : 'Disabled switch' }}
+        </label>
+        <div class="right">
+          <v-ons-switch input-id="switch2" :disabled="!switchOn">
+          </v-ons-switch>
+        </div>
+      </ons-list-item>
+
+      <v-ons-list-header>Select</v-ons-list-header>
+      <ons-list-item>
+        <div class="center">
+          <v-ons-select style="width: 120px" v-model="selectedItem">
+            <option v-for="item in items" :value="item.value">
+              {{ item.text }}
+            </option>
+          </v-ons-select>
+
+        </div>
+        <div class="right right-label">
+          <s v-show="selectedItem !== 'Vue'">{{ selectedItem }}</s> Vue is awesome!
+        </div>
+      </ons-list-item>
+
+      <v-ons-list-header>Radio buttons</v-ons-list-header>
+      <v-ons-list-item v-for="(vegetable, $index) in vegetables" :key="vegetable"
+        tappable
+        :modifier="($index === vegetables.length - 1) ? 'longdivider' : ''"
+      >
+        <label class="left">
+          <v-ons-radio
+            :input-id="'radio-' + $index"
+            :value="vegetable"
+            v-model=" selectedVegetable"
+          >
+          </v-ons-radio>
+        </label>
+        <label :for="'radio-' + $index" class="center">
+          {{ vegetable }}
+        </label>
+      </v-ons-list-item>
+      <v-ons-list-item>
+        <div class="center">
+          I love {{ selectedVegetable }}!
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-header>Checkboxes - {{checkedColors}}</v-ons-list-header>
+      <v-ons-list-item v-for="(color, $index) in colors" :key="color" tappable>
+        <label class="left">
+          <v-ons-checkbox
+            :input-id="'checkbox-' + $index"
+            :value="color"
+            v-model="checkedColors"
+          >
+          </v-ons-checkbox>
+        </label>
+        <label class="center" :for="'checkbox-' + $index">
+          {{ color }}
+        </label>
+      </v-ons-list-item>
+
+      <v-ons-list-header>Range slider</v-ons-list-header>
+      <v-ons-list-item>
+        Adjust the volume:
+        <v-ons-row>
+          <v-ons-col width="40px" style="text-align: center; line-height: 31px;">
+            <v-ons-icon icon="md-volume-down"></v-ons-icon>
+          </v-ons-col>
+          <v-ons-col>
+
+            <v-ons-range v-model="volume" style="width: 100%;"></v-ons-range>
+
+          </v-ons-col>
+          <v-ons-col width="40px" style="text-align: center; line-height: 31px;">
+            <v-ons-icon icon="md-volume-up"></v-ons-icon>
+          </v-ons-col>
+        </v-ons-row>
+        Volume: {{ volume }} <span v-show="Number(volume) > 80">&nbsp;(careful, that's loud)</span>
+      </v-ons-list-item>
+    </v-ons-list>
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      name: '',
+      switchOn: true,
+      items: [
+        { text: 'Vue', value: 'Vue' },
+        { text: 'React', value: 'React' },
+        { text: 'Angular', value: 'Angular' }
+      ],
+      selectedItem: 'Vue',
+      vegetables: ['Apples', 'Bananas', 'Oranges'],
+      selectedVegetable: 'Bananas',
+      colors: ['Red', 'Green', 'Blue'],
+      checkedColors: ['Green', 'Blue'],
+      volume: 25
+    }
+  }
+}
+</script>
+
+<style scoped>
+.right-icon {
+  margin-left: 10px;
+}
+.right-label {
+  color: #666;
+}
+</style>

src/prog/dashboard2/src/pages.example/Home.vue

@@ -0,0 +1,95 @@
+<template>
+  <v-ons-page>
+    <p class="intro">
+      This is a kitchen sink example that shows off the Vue bindings for Onsen UI.<br><br>
+    </p>
+
+      <v-ons-card v-for="page of pages" :key="page.label"
+        @click="push(page.component, page.label)"
+      >
+        <div class="title">{{ page.label }}</div>
+        <div class="content">{{ page.desc }}</div>
+      </v-ons-card>
+  </v-ons-page>
+</template>
+
+<script>
+import PullHook from './PullHook.vue'
+import Dialogs from './Dialogs.vue'
+import Buttons from './Buttons.vue'
+import Carousel from './Carousel.vue'
+import InfiniteScroll from './InfiniteScroll.vue'
+import Progress from './Progress.vue'
+
+export default {
+  data () {
+    return {
+      pages: [
+        {
+          component: PullHook,
+          label: 'Pull Hook',
+          desc: 'Simple "pull to refresh" functionality to update data.'
+        },
+        {
+          component: Dialogs,
+          label: 'Dialogs',
+          desc: 'Components and utility methods to display many types of dialogs.'
+        },
+        {
+          component: Buttons,
+          label: 'Buttons',
+          desc: 'Different styles for buttons, floating action buttons and speed dials.'
+        },
+        {
+          component: Carousel,
+          label: 'Carousel',
+          desc: 'Customizable carousel that can be optionally fullscreen.'
+        },
+        {
+          component: InfiniteScroll,
+          label: 'Infinite Scroll',
+          desc: 'Two types of infinite lists: "Load More" and "Lazy Repeat".'
+        },
+        {
+          component: Progress,
+          label: 'Progress',
+          desc: 'Linear progress, circular progress and spinners.'
+        }
+      ]
+    }
+  },
+
+  methods: {
+    push (page, key) {
+      this.$store.commit('navigator/push', {
+        extends: page,
+        data () {
+          return {
+            toolbarInfo: {
+              backLabel: 'Home',
+              title: key
+            }
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.intro {
+  text-align: center;
+  padding: 0 20px;
+  margin-top: 40px;
+}
+
+ons-card {
+  cursor: pointer;
+  color: #333;
+}
+
+.card__title, .card--material__title {
+  font-size: 20px;
+}
+</style>

src/prog/dashboard2/src/pages.example/InfiniteScroll.vue

@@ -0,0 +1,97 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
+
+    <v-ons-tabbar position="auto">
+      <template slot="pages">
+
+        <!-- Load more items on scroll bottom -->
+        <v-ons-page :infinite-scroll="loadMore">
+          <p class="intro">
+            Useful for loading more items when the scroll reaches the bottom of the page, typically after an asynchronous API call.<br><br>
+          </p>
+
+          <v-ons-list>
+            <v-ons-list-item v-for="item in list" :key="item">
+              Item #{{ item }}
+            </v-ons-list-item>
+          </v-ons-list>
+
+          <div class="after-list">
+            <v-ons-icon icon="fa-spinner" size="26px" spin></v-ons-icon>
+          </div>
+        </v-ons-page>
+
+        <!-- Lazy load thousands of items -->
+        <v-ons-page>
+          <p class="intro">
+            Automatically unloads items that are not visible and loads new ones. Useful when the list contains thousands of items.<br><br>
+          </p>
+
+          <v-ons-list>
+            <v-ons-lazy-repeat :render-item="renderItem" :length="3000"></v-ons-lazy-repeat>
+          </v-ons-list>
+        </v-ons-page>
+      </template>
+
+      <v-ons-tab label="Load More"></v-ons-tab>
+      <v-ons-tab label="Lazy Repeat" active></v-ons-tab>
+    </v-ons-tabbar>
+
+  </v-ons-page>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default {
+  data () {
+    return {
+      list: []
+    }
+  },
+  beforeMount () {
+    for (let i = 0; i < 30; i++) {
+      this.list.push(i)
+    }
+  },
+  methods: {
+    loadMore (done) {
+      setTimeout(() => {
+        for (let i = 0; i < 10; i++) {
+          this.list.push(this.list.length + i)
+        }
+        done()
+      }, 600)
+    },
+
+    renderItem (i) {
+      return new Vue({
+        template: `
+          <v-ons-list-item :key="index">
+            Item #{{ index }}
+          </v-ons-list-item>
+        `,
+        data () {
+          return {
+            index: i
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.intro {
+  text-align: center;
+  padding: 0 20px;
+  margin-top: 40px;
+}
+
+.after-list {
+  margin: 20px;
+  text-align: center;
+}
+</style>

src/prog/dashboard2/src/pages.example/Menu.vue

@@ -0,0 +1,119 @@
+<template>
+  <v-ons-page>
+    <div class="profile-pic">
+      <img src="../assets/vue-onsenui.png">
+    </div>
+
+    <v-ons-list-title>Access</v-ons-list-title>
+    <v-ons-list>
+      <v-ons-list-item v-for="(item, index) in access" :key="item.title"
+        @click="loadView(index)"
+      >
+        <div class="left">
+          <v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
+        </div>
+        <div class="center">
+          {{ item.title }}
+        </div>
+        <div class="right">
+          <v-ons-icon icon="fa-link"></v-ons-icon>
+        </div>
+      </v-ons-list-item>
+    </v-ons-list>
+
+    <v-ons-list-title style="margin-top: 10px">Links</v-ons-list-title>
+    <v-ons-list>
+      <v-ons-list-item v-for="item in links" :key="item.title"
+        @click="loadLink(item.url)"
+      >
+        <div class="left">
+          <v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
+        </div>
+        <div class="center">
+          {{ item.title }}
+        </div>
+        <div class="right">
+          <v-ons-icon icon="fa-external-link"></v-ons-icon>
+        </div>
+      </v-ons-list-item>
+    </v-ons-list>
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  methods: {
+    loadView (index) {
+      this.$store.commit('tabbar/set', index)
+      this.$store.commit('splitter/toggle')
+    },
+    loadLink (url) {
+      window.open(url, '_blank')
+    }
+  },
+  data () {
+    return {
+      links: [
+        {
+          title: 'Docs',
+          icon: 'ion-document-text',
+          url: 'https://onsen.io/v2/docs/guide/vue/'
+        },
+        {
+          title: 'Github',
+          icon: 'ion-social-github',
+          url: 'https://github.com/OnsenUI/OnsenUI'
+        },
+        {
+          title: 'Code',
+          icon: 'ion-code',
+          url: 'https://github.com/frandiox/vue-onsenui-kitchensink'
+        },
+        {
+          title: 'Forum',
+          icon: 'ion-chatboxes',
+          url: 'https://community.onsen.io/'
+        },
+        {
+          title: 'Twitter',
+          icon: 'ion-social-twitter',
+          url: 'https://twitter.com/Onsen_UI'
+        }
+      ],
+      access: [
+        {
+          title: 'Home',
+          icon: 'ion-home, material:md-home'
+        },
+        {
+          title: 'Forms',
+          icon: 'ion-edit, material:md-edit'
+        },
+        {
+          title: 'Animations',
+          icon: 'ion-film-marker, material: md-movie-alt'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.profile-pic {
+  width: 200px;
+  background-color: #fff;
+  margin: 20px auto 10px;
+  border: 1px solid #999;
+  border-radius: 4px;
+}
+
+.profile-pic > img {
+  display: block;
+  max-width: 100%;
+}
+
+ons-list-item {
+  color: #444;
+}
+</style>

src/prog/dashboard2/src/pages.example/Progress.vue

@@ -0,0 +1,106 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
+
+    <v-ons-progress-bar :modifier="!md() && 'ios' || ''" :value="progress"></v-ons-progress-bar>
+
+    <section style="margin: 40px 16px">
+      <p>
+        Progress: {{ progress }}%
+      </p>
+
+      <p>
+        <v-ons-progress-bar value="20" :modifier="!md() && 'ios' || ''"></v-ons-progress-bar>
+      </p>
+
+      <p>
+        <v-ons-progress-bar value="40" secondary-value="80" :modifier="!md() && 'ios' || ''"></v-ons-progress-bar>
+      </p>
+
+      <p>
+        <v-ons-progress-bar indeterminate :modifier="!md() && 'ios' || ''"></v-ons-progress-bar>
+      </p>
+
+      <div style="text-align: center; margin: 40px; color: #666">
+        <p>
+          <v-ons-progress-circular value="20" :modifier="!md() && 'ios' || ''"></v-ons-progress-circular>
+          <v-ons-progress-circular value="40" secondary-value="80" :modifier="!md() && 'ios' || ''"></v-ons-progress-circular>
+          <v-ons-progress-circular indeterminate :modifier="!md() && 'ios' || ''"></v-ons-progress-circular>
+        </p>
+
+        <p>
+          <v-ons-icon icon="ion-load-a" spin size="30px"></v-ons-icon>
+          <v-ons-icon icon="ion-load-b" spin size="30px"></v-ons-icon>
+          <v-ons-icon icon="ion-load-c" spin size="30px"></v-ons-icon>
+          <v-ons-icon icon="ion-load-d" spin size="30px"></v-ons-icon>
+        </p>
+
+        <p>
+          <v-ons-icon icon="fa-spinner" spin size="26px"></v-ons-icon>
+          <v-ons-icon icon="circle-o-notch" spin size="26px"></v-ons-icon>
+        </p>
+
+        <p>
+          <v-ons-icon icon="md-spinner" spin size="30px"></v-ons-icon>
+        </p>
+      </div>
+
+      <p>
+        <v-ons-button modifier="large">
+          <v-ons-icon icon="ion-load-c" spin size="26px"></v-ons-icon>
+        </v-ons-button>
+        <br><br>
+        <v-ons-button modifier="large" disabled>
+          <v-ons-icon icon="ion-load-c" spin size="26px"></v-ons-icon>
+        </v-ons-button>
+      </p>
+    </section>
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      progress: 0,
+      intervalID: 0
+    }
+  },
+  mounted () {
+    this.intervalID = setInterval(() => {
+      if (this.progress === 100) {
+        clearInterval(this.intervalID)
+        return
+      }
+
+      this.progress++
+    }, 40)
+  },
+  methods: {
+    md () {
+      return this.$ons.platform.isAndroid()
+    }
+  }
+}
+</script>
+
+<style>
+/* 'ios' modifier */
+.progress-bar--ios__primary,
+.progress-bar--ios.progress-bar--indeterminate::before,
+.progress-bar--ios.progress-bar--indeterminate::after {
+  background-color: #4282cc
+}
+
+.progress-bar--ios__secondary {
+  background-color: #87b6eb;
+}
+
+.progress-circular--ios__primary {
+  stroke: #4282cc
+}
+
+.progress-circular--ios__secondary {
+  stroke: #87b6eb;
+}
+</style>

src/prog/dashboard2/src/pages.example/PullHook.vue

@@ -0,0 +1,85 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
+
+    <v-ons-pull-hook
+      threshold-height="120px"
+      :action="onAction"
+      @changestate="state = $event.state"
+    >
+
+      <v-ons-icon
+        size="22px"
+        class="pull-hook-content"
+        :icon="state === 'action' ? 'fa-spinner' : 'fa-arrow-down'"
+        :rotate="state === 'preaction' && 180"
+        :spin="state === 'action'"
+      ></v-ons-icon>
+
+    </v-ons-pull-hook>
+
+    <v-ons-list>
+      <v-ons-list-header>Pull to refresh</v-ons-list-header>
+      <v-ons-list-item v-for="kitten in kittens" :key="kitten">
+        <div class="left">
+          <img class="list-item__thumbnail" :src="kitten.url">
+        </div>
+        <div class="center">{{ kitten.name }}</div>
+      </v-ons-list-item>
+    </v-ons-list>
+
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      state: 'initial',
+      kittens: this.getRandomData()
+    }
+  },
+
+  methods: {
+    onAction (done) {
+      setTimeout(() => {
+        this.kittens = [...this.kittens, this.getRandomKitten()]
+        done()
+      }, 400)
+    },
+    getRandomName () {
+      const names = ['Oscar', 'Max', 'Tiger', 'Sam', 'Misty', 'Simba', 'Coco', 'Chloe', 'Lucy', 'Missy']
+
+      return names[Math.floor(Math.random() * names.length)]
+    },
+    getRandomUrl () {
+      const width = 40 + Math.floor(20 * Math.random())
+      const height = 40 + Math.floor(20 * Math.random())
+
+      return `https://placekitten.com/g/${width}/${height}`
+    },
+    getRandomKitten () {
+      return {
+        name: this.getRandomName(),
+        url: this.getRandomUrl()
+      }
+    },
+    getRandomData () {
+      const data = []
+
+      for (let i = 0; i < 8; i++) {
+        data.push(this.getRandomKitten())
+      }
+
+      return data
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pull-hook-content {
+  color: #666;
+  transition: transform .25s ease-in-out;
+}
+</style>

src/prog/dashboard2/src/pages/Home.vue

@@ -0,0 +1,8 @@
+<template>
+  <v-ons-page>
+	<h1>Home</h1>
+  </v-ons-page>
+</template>
+
+<script>
+</script>

src/prog/dashboard2/src/pages/Lights.vue

@@ -0,0 +1,8 @@
+<template>
+  <v-ons-page>
+	<h1>Light</h1>
+  </v-ons-page>
+</template>
+
+<script>
+</script>

src/prog/dashboard2/src/pages/Menu.vue

@@ -0,0 +1,119 @@
+<template>
+  <v-ons-page>
+    <div class="profile-pic">
+      <img src="../assets/vue-onsenui.png">
+    </div>
+
+    <v-ons-list-title>Access</v-ons-list-title>
+    <v-ons-list>
+      <v-ons-list-item v-for="(item, index) in access" :key="item.title"
+        @click="loadView(index)"
+      >
+        <div class="left">
+          <v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
+        </div>
+        <div class="center">
+          {{ item.title }}
+        </div>
+        <div class="right">
+          <v-ons-icon icon="fa-link"></v-ons-icon>
+        </div>
+      </v-ons-list-item>
+    </v-ons-list>
+
+    <v-ons-list-title style="margin-top: 10px">Links</v-ons-list-title>
+    <v-ons-list>
+      <v-ons-list-item v-for="item in links" :key="item.title"
+        @click="loadLink(item.url)"
+      >
+        <div class="left">
+          <v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
+        </div>
+        <div class="center">
+          {{ item.title }}
+        </div>
+        <div class="right">
+          <v-ons-icon icon="fa-external-link"></v-ons-icon>
+        </div>
+      </v-ons-list-item>
+    </v-ons-list>
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  methods: {
+    loadView (index) {
+      this.$store.commit('tabbar/set', index)
+      this.$store.commit('splitter/toggle')
+    },
+    loadLink (url) {
+      window.open(url, '_blank')
+    }
+  },
+  data () {
+    return {
+      links: [
+        {
+          title: 'Docs',
+          icon: 'ion-document-text',
+          url: 'https://onsen.io/v2/docs/guide/vue/'
+        },
+        {
+          title: 'Github',
+          icon: 'ion-social-github',
+          url: 'https://github.com/OnsenUI/OnsenUI'
+        },
+        {
+          title: 'Code',
+          icon: 'ion-code',
+          url: 'https://github.com/frandiox/vue-onsenui-kitchensink'
+        },
+        {
+          title: 'Forum',
+          icon: 'ion-chatboxes',
+          url: 'https://community.onsen.io/'
+        },
+        {
+          title: 'Twitter',
+          icon: 'ion-social-twitter',
+          url: 'https://twitter.com/Onsen_UI'
+        }
+      ],
+      access: [
+        {
+          title: 'Home',
+          icon: 'ion-home, material:md-home'
+        },
+        {
+          title: 'Forms',
+          icon: 'ion-edit, material:md-edit'
+        },
+        {
+          title: 'Animations',
+          icon: 'ion-film-marker, material: md-movie-alt'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.profile-pic {
+  width: 200px;
+  background-color: #fff;
+  margin: 20px auto 10px;
+  border: 1px solid #999;
+  border-radius: 4px;
+}
+
+.profile-pic > img {
+  display: block;
+  max-width: 100%;
+}
+
+ons-list-item {
+  color: #444;
+}
+</style>

src/prog/dashboard2/src/pages/Settings.vue

@@ -0,0 +1,8 @@
+<template>
+  <v-ons-page>
+	<h1>Settings</h1>
+  </v-ons-page>
+</template>
+
+<script>
+</script>

src/prog/dashboard2/src/pages/Shutters.vue

@@ -0,0 +1,8 @@
+<template>
+  <v-ons-page>
+	<h1>Shutters</h1>
+  </v-ons-page>
+</template>
+
+<script>
+</script>

src/prog/dashboard2/src/pages/Sprinklers.vue

@@ -0,0 +1,8 @@
+<template>
+  <v-ons-page>
+	<h1>Sprintklers</h1>
+  </v-ons-page>
+</template>
+
+<script>
+</script>

src/prog/dashboard2/src/pages/Timers.vue

@@ -0,0 +1,8 @@
+<template>
+  <v-ons-page>
+	<h1>Timer</h1>
+  </v-ons-page>
+</template>
+
+<script>
+</script>

src/prog/dashboard2/src/partials/CustomToolbar.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-ons-toolbar>
+    <div class="left">
+      <slot name="left">
+        <v-ons-back-button v-if="backLabel">
+          {{ backLabel }}
+        </v-ons-back-button>
+      </slot>
+    </div>
+    <div class="center"><slot>{{ title }}</slot></div>
+    <div class="right"><slot name="right"></slot></div>
+  </v-ons-toolbar>
+</template>
+
+<script>
+export default {
+  props: ['title', 'backLabel']
+}
+</script>

src/prog/dashboard2/src/store.js

@@ -0,0 +1,62 @@
+export default {
+  modules: {
+    navigator: {
+      strict: true,
+      namespaced: true,
+      state: {
+        stack: [],
+        options: {}
+      },
+      mutations: {
+        push (state, page) {
+          state.stack.push(page)
+        },
+        pop (state) {
+          if (state.stack.length > 1) {
+            state.stack.pop()
+          }
+        },
+        replace (state, page) {
+          state.stack.pop()
+          state.stack.push(page)
+        },
+        reset (state, page) {
+          state.stack = [page || state.stack[0]]
+        },
+        options (state, newOptions = {}) {
+          state.options = newOptions
+        }
+      }
+    },
+
+    splitter: {
+      strict: true,
+      namespaced: true,
+      state: {
+        open: false
+      },
+      mutations: {
+        toggle (state, shouldOpen) {
+          if (shouldOpen instanceof Boolean) {
+            state.open = shouldOpen
+          } else {
+            state.open = !state.open
+          }
+        }
+      }
+    },
+
+    tabbar: {
+      strict: true,
+      namespaced: true,
+      state: {
+        index: 0
+      },
+      mutations: {
+        set (state, index) {
+          state.index = index
+        }
+      }
+    }
+  }
+}

src/prog/dashboard2/static/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,149 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
+fill="#000000" stroke="none">
+<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
+-96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
+173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
+13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
+20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
+-215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
+11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
+-455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
+-105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
+11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
+-113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
+36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
+-206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
+-15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
+-153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
+10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
+-30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
+221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
+-265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
+-22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
+-102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
+-50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
+-414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
+30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
+-455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
+-19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
+96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
+-313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
+-145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
+-156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
+-203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
+-341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
+30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
+342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
+22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
+-235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
+-62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
+-22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
+-311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
+-140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
+17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
+-10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
+-485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
+-193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
+72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
+35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
+-5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
+-661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
+0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
+-520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
+-120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
+-229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
+11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
+-9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
+12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
+145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
+-118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
+-108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
+-659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
+248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
+29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
+-142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
+-16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
+-245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
+109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
+-90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
+-67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
+-298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
+38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
+34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
+136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
+67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
+150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
+116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
+113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
+175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
+89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
+11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
+6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
+430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
+220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
+24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
+478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
+394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
+55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
+175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
+88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
+155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
+11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
+14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
+51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
+37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
+55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
+55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
+295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
+16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
+157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
+200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
+241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
+61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
+28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
+62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
+56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
+350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
+90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
+121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
+60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
+167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
+171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
+97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
+111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
+11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
+13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
+101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
+19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
+54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
+0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
+90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
+108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
+20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
+-419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
+-31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
+-71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
+-477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
+-320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
+-245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
+-160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
+-109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
+396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
+110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
+-188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
+-205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
+583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
+408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
+561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
+-9615 0 20 -32z"/>
+</g>
+</svg>

src/prog/dashboard2/static/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "dashboard2",
+  "short_name": "dashboard2",
+  "icons": [
+    {
+      "src": "/static/img/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/img/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#4DBA87"
+}

test/dashboard2/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "comments": false,
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
+}

test/dashboard2/.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

test/dashboard2/.eslintignore

@@ -0,0 +1,2 @@
+build/*.js
+config/*.js

test/dashboard2/.eslintrc.js

@@ -0,0 +1,27 @@
+// http://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

test/dashboard2/.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

test/dashboard2/.postcssrc.js

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

test/dashboard2/README.md

@@ -0,0 +1,21 @@
+# dashboard2
+
+> AwoX dashboard App
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

test/dashboard2/build/build.js

@@ -0,0 +1,35 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  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'
+    ))
+  })
+})

test/dashboard2/build/check-versions.js

@@ -0,0 +1,48 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+var shell = require('shelljs')
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  var warnings = []
+  for (var i = 0; i < versionRequirements.length; i++) {
+    var mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (var i = 0; i < warnings.length; i++) {
+      var warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}

test/dashboard2/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()
+  }
+})

test/dashboard2/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()
+  }
+}

test/dashboard2/build/utils.js

@@ -0,0 +1,71 @@
+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // 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'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+  return output
+}

test/dashboard2/build/vue-loader.conf.js

@@ -0,0 +1,12 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: isProduction
+      ? config.build.productionSourceMap
+      : config.dev.cssSourceMap,
+    extract: isProduction
+  })
+}

test/dashboard2/build/webpack.base.conf.js

@@ -0,0 +1,67 @@
+var path = require('path')
+var utils = require('./utils')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  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: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src'), resolve('test')],
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  }
+}

test/dashboard2/build/webpack.dev.conf.js

@@ -0,0 +1,35 @@
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: '#cheap-module-eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    new FriendlyErrorsPlugin()
+  ]
+})

test/dashboard2/build/webpack.prod.conf.js

@@ -0,0 +1,130 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
+
+var env = config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  watch: process.env.WEBPACK_WATCH === 'true',
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('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 webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: {
+        safe: true
+      }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.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'
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ]),
+    // service worker caching
+    new SWPrecacheWebpackPlugin({
+      cacheId: 'my-vue-app',
+      filename: 'service-worker.js',
+      staticFileGlobs: ['dist/**/*.{js,html,css}'],
+      minify: true,
+      stripPrefix: 'dist/'
+    })
+  ]
+})
+
+if (config.build.productionGzip) {
+  var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

test/dashboard2/config/dev.env.js

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

test/dashboard2/config/index.js

@@ -0,0 +1,38 @@
+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+  build: {
+    env: require('./prod.env'),
+    index: path.resolve(__dirname, '../dist/index.html'),
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    productionSourceMap: true,
+    // 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
+  },
+  dev: {
+    env: require('./dev.env'),
+    port: 8080,
+    autoOpenBrowser: true,
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
+  }
+}

test/dashboard2/config/prod.env.js

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

test/dashboard2/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>dashboard2</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/img/icons/favicon-16x16.png">
+    <!--[if IE]><link rel="shortcut icon" href="/static/img/icons/favicon.ico"><![endif]-->
+    <!-- Add to home screen for Android and modern mobile browsers -->
+    <link rel="manifest" href="/static/manifest.json">
+    <meta name="theme-color" content="#4DBA87">
+
+    <!-- Add to home screen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="dashboard2">
+    <link rel="apple-touch-icon" href="/static/img/icons/apple-touch-icon-152x152.png">
+    <!-- Add to home screen for Windows -->
+    <meta name="msapplication-TileImage" content="/static/img/icons/msapplication-icon-144x144.png">
+    <meta name="msapplication-TileColor" content="#000000">
+    <% for (var chunk of webpack.chunks) {
+        for (var file of chunk.files) {
+          if (file.match(/\.(js|css)$/)) { %>
+    <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

test/dashboard2/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "dashboard2",
+  "version": "1.0.0",
+  "description": "AwoX dashboard App",
+  "author": "AwoX",
+  "private": true,
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "start": "node build/dev-server.js",
+    "build": "node build/build.js",
+    "build:watch": "cross-env WEBPACK_WATCH=true node build/build.js",
+    "lint": "eslint --ext .js,.vue src"
+  },
+  "dependencies": {
+    "axios": "^0.16.2",
+    "components": "^0.1.0",
+    "ionicons": "^3.0.0",
+    "onsenui": "~2.4.0",
+    "vue": "^2.3.3",
+    "vue-onsenui": "~2.0.0",
+    "vuex": "^2.3.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.2",
+    "babel-core": "^6.22.1",
+    "sw-precache-webpack-plugin": "^0.9.1",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chalk": "^1.1.3",
+    "connect-history-api-fallback": "^1.3.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^4.0.0",
+    "css-loader": "^0.28.0",
+    "eslint": "^3.19.0",
+    "eslint-friendly-formatter": "^2.0.7",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-html": "^2.0.0",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^2.0.1",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.14.1",
+    "extract-text-webpack-plugin": "^2.0.0",
+    "file-loader": "^0.11.1",
+    "friendly-errors-webpack-plugin": "^1.1.3",
+    "html-webpack-plugin": "^2.28.0",
+    "http-proxy-middleware": "^0.17.3",
+    "webpack-bundle-analyzer": "^2.2.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "opn": "^4.0.2",
+    "optimize-css-assets-webpack-plugin": "^1.3.0",
+    "ora": "^1.2.0",
+    "rimraf": "^2.6.0",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^12.1.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.3.3",
+    "webpack": "^2.6.1",
+    "webpack-dev-middleware": "^1.10.0",
+    "webpack-hot-middleware": "^2.18.0",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

test/dashboard2/src/AppNavigator.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-ons-navigator
+    :page-stack="pageStack"
+    :pop-page="storePop"
+    :options="options"
+  ></v-ons-navigator>
+</template>
+
+<script>
+import AppSplitter from './AppSplitter.vue'
+
+export default {
+  beforeCreate () {
+    this.$store.commit('navigator/push', AppSplitter)
+  },
+  computed: {
+    pageStack () {
+      return this.$store.state.navigator.stack
+    },
+    options () {
+      return this.$store.state.navigator.options
+    }
+  },
+  methods: {
+    storePop () {
+      this.$store.commit('navigator/pop')
+    }
+  }
+}
+</script>

test/dashboard2/src/AppSplitter.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-ons-page>
+    <v-ons-splitter>
+      <v-ons-splitter-side swipeable side="right" collapse="" width="260px" :animation="$ons.platform.isAndroid() ? 'overlay' : 'reveal'"
+        :open.sync="isOpen"
+      >
+        <menu-page></menu-page>
+      </v-ons-splitter-side>
+
+      <v-ons-splitter-content>
+        <app-tabbar></app-tabbar>
+      </v-ons-splitter-content>
+    </v-ons-splitter>
+  </v-ons-page>
+</template>
+
+<script>
+import AppTabbar from './AppTabbar.vue'
+import MenuPage from './pages/Menu.vue'
+
+export default {
+  computed: {
+    isOpen: {
+      get () {
+        return this.$store.state.splitter.open
+      },
+      set (newValue) {
+        this.$store.commit('splitter/toggle', newValue)
+      }
+    }
+  },
+  components: { AppTabbar, MenuPage }
+}
+</script>
+
+<style>
+ons-splitter-side[animation=overlay] {
+  border-left: 1px solid #bbb;
+}
+</style>

test/dashboard2/src/AppTabbar.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar>
+      {{ title }}
+      <v-ons-toolbar-button slot="right" @click="$store.commit('splitter/toggle')">
+        <v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon>
+      </v-ons-toolbar-button>
+    </custom-toolbar>
+
+    <v-ons-tabbar
+      position="auto"
+      :tabs="tabs"
+      :index.sync="index"
+    ></v-ons-tabbar>
+  </v-ons-page>
+</template>
+
+<script>
+import Home from './pages/Home.vue'
+import Forms from './pages/Forms.vue'
+import Animations from './pages/Animations.vue'
+
+export default {
+  data () {
+    return {
+      tabs: [
+        {
+          label: 'Home',
+          icon: this.md() ? null : 'ion-home',
+          page: Home
+        },
+        {
+          label: 'Forms',
+          icon: this.md() ? null : 'ion-edit',
+          page: Forms
+        },
+        {
+          label: 'Anim',
+          icon: this.md() ? null : 'ion-film-marker',
+          page: Animations
+        }
+      ]
+    }
+  },
+  methods: {
+    md () {
+      return this.$ons.platform.isAndroid()
+    }
+  },
+  computed: {
+    index: {
+      get () {
+        return this.$store.state.tabbar.index
+      },
+      set (newValue) {
+        this.$store.commit('tabbar/set', newValue)
+      }
+    },
+    title () {
+      return this.md() ? 'Kitchen Sink' : this.tabs[this.index].label
+    }
+  }
+}
+</script>

test/dashboard2/src/main.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import VueOnsen from 'vue-onsenui'
+import CustomToolbar from './partials/CustomToolbar.vue'
+import storeLike from './store.js'
+import AppNavigator from './AppNavigator.vue'
+// Onsen UI basic CSS
+import 'onsenui/css/onsenui.css'
+// Onsen UI CSS components source (requires cssnext)
+import 'onsenui/css/onsen-css-components.css'
+
+Vue.use(Vuex)
+Vue.use(VueOnsen)
+Vue.component('custom-toolbar', CustomToolbar) // Common toolbar
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  render: h => h(AppNavigator),
+  store: new Vuex.Store(storeLike)
+})

test/dashboard2/src/pages/Animations.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-ons-page>
+    <v-ons-list>
+      <v-ons-list-header>Transitions</v-ons-list-header>
+      <v-ons-list-item v-for="animation in animations" :key="animation"
+        modifier="chevron"
+        @click="transition(animation)"
+      >
+        {{ animation }}
+      </v-ons-list-item>
+    </v-ons-list>
+  </v-ons-page>
+</template>
+
+<script>
+const transitionPage = {
+  template: `
+    <v-ons-page>
+      <custom-toolbar backLabel="Anim">
+        {{ animation }}
+      </custom-toolbar>
+      <p style="text-align: center">
+        Use the VOnsBackButton
+      </p>
+    </v-ons-page>
+    `
+}
+
+export default {
+  data () {
+    return {
+      animations: ['none', 'default', 'slide-ios', 'slide-md', 'lift-ios', 'lift-md', 'fade-ios', 'fade-md']
+    }
+  },
+  methods: {
+    transition (name) {
+      this.$store.commit('navigator/options', {
+        // Sets animations
+        animation: name,
+        // Resets default options
+        callback: () => this.$store.commit('navigator/options', {})
+      })
+
+      this.$store.commit('navigator/push', {
+        extends: transitionPage,
+        data () {
+          return {
+            animation: name
+          }
+        }
+      })
+    }
+  }
+}
+</script>

test/dashboard2/src/pages/Buttons.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
+
+    <section style="margin: 16px">
+      <v-ons-button class="button-margin">Normal</v-ons-button>
+      <v-ons-button modifier="quiet" class="button-margin">Quiet</v-ons-button>
+      <v-ons-button modifier="outline" class="button-margin">Outline</v-ons-button>
+      <v-ons-button modifier="cta" class="button-margin">Call to action</v-ons-button>
+      <v-ons-button modifier="light" class="button-margin">Light</v-ons-button>
+      <v-ons-button modifier="large" class="button-margin">Large</v-ons-button>
+    </section>
+
+    <section style="margin: 16px">
+      <v-ons-button class="button-margin" disabled>Normal</v-ons-button>
+      <v-ons-button modifier="quiet" class="button-margin" disabled>Quiet</v-ons-button>
+      <v-ons-button modifier="outline" class="button-margin" disabled>Outline</v-ons-button>
+      <v-ons-button modifier="cta" class="button-margin" disabled>Call to action</v-ons-button>
+      <v-ons-button modifier="light" class="button-margin" disabled>Light</v-ons-button>
+      <v-ons-button modifier="large" class="button-margin" disabled>Large</v-ons-button>
+    </section>
+
+    <v-ons-fab position="top right" :style="spdStyle">
+      <v-ons-icon icon="md-face"></v-ons-icon>
+    </v-ons-fab>
+
+    <v-ons-fab position="bottom left" :style="spdStyle" disabled>
+      <v-ons-icon icon="md-car"></v-ons-icon>
+    </v-ons-fab>
+
+    <v-ons-speed-dial position="bottom right" direction="up"
+      :open.sync="spdOpen"
+    >
+      <v-ons-fab :style="spdStyle">
+        <v-ons-icon icon="md-share"></v-ons-icon>
+      </v-ons-fab>
+
+      <v-ons-speed-dial-item v-for="(icon, name) in shareItems" :key="name"
+        :style="spdStyle"
+        @click="$ons.notification.confirm(`Share on ${name}?`)"
+      >
+        <v-ons-icon :icon="icon"></v-ons-icon>
+      </v-ons-speed-dial-item>
+
+    </v-ons-speed-dial>
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      spdOpen: false,
+      spdStyle: {
+        backgroundColor: this.$ons.platform.isAndroid() ? null : '#4282cc'
+      },
+      shareItems: {
+        'Twitter': 'md-twitter',
+        'Facebook': 'md-facebook',
+        'Google+': 'md-google-plus'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.button-margin {
+  margin: 6px 0;
+}
+</style>

test/dashboard2/src/pages/Carousel.vue

@@ -0,0 +1,70 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
+
+    <v-ons-carousel fullscreen swipeable auto-scroll overscrollable
+      :index.sync="carouselIndex"
+    >
+      <v-ons-carousel-item v-for="(value, key) in items" :key="key"
+        class="carousel-item"
+        :style="{ backgroundColor: value }"
+      >
+        <div class="color-tag">{{key}}</div>
+      </v-ons-carousel-item>
+    </v-ons-carousel>
+
+    <div class="dots">
+      <span v-for="dotIndex in Object.keys(items).length" :key="dotIndex"
+        @click="carouselIndex = dotIndex - 1"
+      >
+        {{ carouselIndex === dotIndex - 1 ? '\u25CF' : '\u25CB' }}
+      </span>
+    </div>
+
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      carouselIndex: 0,
+      items: {
+        gray: 'gray',
+        blue: '#085078',
+        dark: '#373B44',
+        orange: '#D38312'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.carousel-item {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.color-tag {
+  color: #fff;
+  font-size: 48px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.dots {
+  text-align: center;
+  font-size: 30px;
+  color: #fff;
+  position: absolute;
+  bottom: 40px;
+  left: 0;
+  right: 0;
+}
+
+.dots > span {
+  cursor: pointer;
+}
+</style>

test/dashboard2/src/pages/Dialogs.vue

@@ -0,0 +1,210 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar v-bind="toolbarInfo">
+      <v-ons-toolbar-button slot="right" id="info-button" @click="popoverVisible = true">
+        <v-ons-icon v-if="$ons.platform.isAndroid()" icon="md-more-vert"></v-ons-icon>
+        <span v-else>More</span>
+      </v-ons-toolbar-button>
+    </custom-toolbar>
+
+    <v-ons-fab v-if="$ons.platform.isAndroid()" position="bottom right">
+      <v-ons-icon icon="md-face"></v-ons-icon>
+    </v-ons-fab>
+
+    <v-ons-list-title>Notifications</v-ons-list-title>
+    <v-ons-list modifier="inset">
+      <v-ons-list-item
+        tappable modifier="longdivider"
+        @click="$ons.notification.alert('Hello, world!')"
+      >
+        <div class="center">
+          Alert
+        </div>
+      </v-ons-list-item>
+      <v-ons-list-item
+        tappable modifier="longdivider"
+        @click="$ons.notification.confirm('Are you ready?')"
+      >
+        <div class="center">
+          Simple Confirmation
+        </div>
+      </v-ons-list-item>
+      <v-ons-list-item
+        tappable modifier="longdivider"
+        @click="$ons.notification.prompt('What is your name?')"
+      >
+        <div class="center">
+          Prompt
+        </div>
+      </v-ons-list-item>
+      <v-ons-list-item
+        tappable modifier="longdivider"
+        @click="$ons.notification.toast('Hi there!', { buttonLabel: 'Dismiss', timeout: 1500 })"
+      >
+        <div class="center">
+          Toast
+        </div>
+      </v-ons-list-item>
+      <v-ons-list-item
+        tappable modifier="longdivider"
+        @click="$ons.openActionSheet({ buttons: ['Label 1', 'Label 2', 'Label 3', 'Cancel'], destructive: 2, cancelable: true })"
+      >
+        <div class="center">
+          Action/Bottom Sheet
+        </div>
+      </v-ons-list-item>
+    </v-ons-list>
+
+    <v-ons-list-title>Components</v-ons-list-title>
+    <v-ons-list modifier="inset">
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="dialogVisible = true"
+      >
+        <div class="center">
+          Simple Dialog
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="alertDialogVisible = true"
+      >
+        <div class="center">
+          Alert Dialog
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="toastVisible = true"
+      >
+        <div class="center">
+          Toast (top)
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="showModal"
+      >
+        <div class="center">
+          Modal
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="popoverVisible = true"
+      >
+        <div class="center">
+          Popover - MD Menu
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-item tappable modifier="longdivider"
+        @click="actionSheetVisible = true"
+      >
+        <div class="center">
+          Action/Bottom Sheet
+        </div>
+      </v-ons-list-item>
+    </v-ons-list>
+
+    <!-- Components -->
+
+    <v-ons-dialog cancelable
+      class="lorem-dialog"
+      :visible.sync="dialogVisible"
+    >
+      <!-- Optional page. This could contain a Navigator as well. -->
+      <v-ons-page>
+        <v-ons-toolbar>
+          <div class="center">Simple Dialog</div>
+        </v-ons-toolbar>
+        <p style="text-align: center">Lorem ipsum dolor</p>
+        <p style="text-align: center">
+          <v-ons-button modifier="light" @click="dialogVisible = false">Close</v-ons-button>
+        </p>
+      </v-ons-page>
+    </v-ons-dialog>
+
+    <v-ons-alert-dialog cancelable
+      :modifier="$ons.platform.isAndroid() ? '' : 'rowfooter'"
+      :title="'Hey!!'"
+      :footer="{
+        'Wat': () => alertDialogVisible = false,
+        'Hmm': () => alertDialogVisible = false,
+        'Sure': () => alertDialogVisible = false
+      }"
+      :visible.sync="alertDialogVisible"
+    >
+      Lorem ipsum <v-ons-icon icon="fa-commenting-o"></v-ons-icon>
+    </v-ons-alert-dialog>
+
+    <v-ons-toast :visible="toastVisible" animation="fall">Supercalifragilisticexpialidocious<button @click="toastVisible = false">No way</button></v-ons-toast>
+
+    <v-ons-modal
+      :visible="modalVisible"
+      @click="modalVisible = false"
+    >
+      <p style="text-align: center">
+        Loading <v-ons-icon icon="fa-spinner" spin></v-ons-icon>
+        <br><br>
+        Click or wait
+      </p>
+    </v-ons-modal>
+
+    <v-ons-popover cancelable direction="down" cover-target
+      target="#info-button"
+      :visible.sync="popoverVisible"
+    >
+      <v-ons-list>
+        <v-ons-list-item tappable
+          v-for="label in ['Call history', 'Import/export', 'New contact', 'Settings']"
+          @click="popoverVisible = false"
+          :key="label"
+          :modifier="$ons.platform.isAndroid() ? 'nodivider' : 'longdivider'"
+        >
+          <div class="center">{{ label }}</div>
+        </v-ons-list-item>
+      </v-ons-list>
+    </v-ons-popover>
+
+    <v-ons-action-sheet :visible.sync="actionSheetVisible" cancelable>
+      <v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Action 1</v-ons-action-sheet-button>
+      <v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Action 2</v-ons-action-sheet-button>
+      <v-ons-action-sheet-button @click="actionSheetVisible = false" modifier="destructive" icon="md-square-o">Action 3</v-ons-action-sheet-button>
+      <v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Cancel</v-ons-action-sheet-button>
+    </v-ons-action-sheet>
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      dialogVisible: false,
+      alertDialogVisible: false,
+      toastVisible: false,
+      modalVisible: false,
+      popoverVisible: false,
+      actionSheetVisible: false,
+      timeoutID: 0
+    }
+  },
+  methods: {
+    showModal () {
+      this.modalVisible = true
+      clearTimeout(this.timeoutID)
+      this.timeoutID = setTimeout(() => (this.modalVisible = false), 2000)
+    }
+  }
+}
+</script>
+
+<style>
+.lorem-dialog .dialog-container {
+  height: 200px;
+}
+</style>
+<style scoped>
+ons-list-title {
+  margin-top: 20px;
+}
+</style>

test/dashboard2/src/pages/Forms.vue

@@ -0,0 +1,160 @@
+<template>
+  <v-ons-page>
+
+    <v-ons-list>
+      <v-ons-list-header>Text input</v-ons-list-header>
+      <v-ons-list-item :modifier="$ons.platform.isAndroid() ? 'nodivider' : ''">
+        <div class="left">
+          <v-ons-icon icon="md-face" class="list-item__icon"></v-ons-icon>
+        </div>
+        <label class="center">
+          <v-ons-input float maxlength="20"
+            placeholder="Name"
+            v-model="name"
+          >
+          </v-ons-input>
+        </label>
+      </v-ons-list-item>
+      <v-ons-list-item :modifier="$ons.platform.isAndroid() ? 'nodivider' : ''">
+        <div class="left">
+          <v-ons-icon icon="fa-question-circle-o" class="list-item__icon"></v-ons-icon>
+        </div>
+        <label class="center">
+          <v-ons-search-input maxlength="20"
+            placeholder="Search"
+            v-model="name"
+          >
+          </v-ons-search-input>
+        </label>
+      </v-ons-list-item>
+      <v-ons-list-item>
+        <div class="right right-label">
+          Hello {{ name || 'anonymous' }}!<v-ons-icon icon="fa-hand-spock-o" size="lg" class="right-icon"></v-ons-icon>
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-header>Switches</v-ons-list-header>
+      <ons-list-item>
+        <label class="center" for="switch1">
+          Switch ({{ switchOn ? 'on' : 'off' }})
+        </label>
+        <div class="right">
+          <v-ons-switch input-id="switch1" v-model="switchOn">
+          </v-ons-switch>
+        </div>
+      </ons-list-item>
+      <ons-list-item>
+        <label class="center" for="switch2">
+          {{ switchOn ? 'Enabled switch' : 'Disabled switch' }}
+        </label>
+        <div class="right">
+          <v-ons-switch input-id="switch2" :disabled="!switchOn">
+          </v-ons-switch>
+        </div>
+      </ons-list-item>
+
+      <v-ons-list-header>Select</v-ons-list-header>
+      <ons-list-item>
+        <div class="center">
+          <v-ons-select style="width: 120px" v-model="selectedItem">
+            <option v-for="item in items" :value="item.value">
+              {{ item.text }}
+            </option>
+          </v-ons-select>
+
+        </div>
+        <div class="right right-label">
+          <s v-show="selectedItem !== 'Vue'">{{ selectedItem }}</s> Vue is awesome!
+        </div>
+      </ons-list-item>
+
+      <v-ons-list-header>Radio buttons</v-ons-list-header>
+      <v-ons-list-item v-for="(vegetable, $index) in vegetables" :key="vegetable"
+        tappable
+        :modifier="($index === vegetables.length - 1) ? 'longdivider' : ''"
+      >
+        <label class="left">
+          <v-ons-radio
+            :input-id="'radio-' + $index"
+            :value="vegetable"
+            v-model=" selectedVegetable"
+          >
+          </v-ons-radio>
+        </label>
+        <label :for="'radio-' + $index" class="center">
+          {{ vegetable }}
+        </label>
+      </v-ons-list-item>
+      <v-ons-list-item>
+        <div class="center">
+          I love {{ selectedVegetable }}!
+        </div>
+      </v-ons-list-item>
+
+      <v-ons-list-header>Checkboxes - {{checkedColors}}</v-ons-list-header>
+      <v-ons-list-item v-for="(color, $index) in colors" :key="color" tappable>
+        <label class="left">
+          <v-ons-checkbox
+            :input-id="'checkbox-' + $index"
+            :value="color"
+            v-model="checkedColors"
+          >
+          </v-ons-checkbox>
+        </label>
+        <label class="center" :for="'checkbox-' + $index">
+          {{ color }}
+        </label>
+      </v-ons-list-item>
+
+      <v-ons-list-header>Range slider</v-ons-list-header>
+      <v-ons-list-item>
+        Adjust the volume:
+        <v-ons-row>
+          <v-ons-col width="40px" style="text-align: center; line-height: 31px;">
+            <v-ons-icon icon="md-volume-down"></v-ons-icon>
+          </v-ons-col>
+          <v-ons-col>
+
+            <v-ons-range v-model="volume" style="width: 100%;"></v-ons-range>
+
+          </v-ons-col>
+          <v-ons-col width="40px" style="text-align: center; line-height: 31px;">
+            <v-ons-icon icon="md-volume-up"></v-ons-icon>
+          </v-ons-col>
+        </v-ons-row>
+        Volume: {{ volume }} <span v-show="Number(volume) > 80">&nbsp;(careful, that's loud)</span>
+      </v-ons-list-item>
+    </v-ons-list>
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      name: '',
+      switchOn: true,
+      items: [
+        { text: 'Vue', value: 'Vue' },
+        { text: 'React', value: 'React' },
+        { text: 'Angular', value: 'Angular' }
+      ],
+      selectedItem: 'Vue',
+      vegetables: ['Apples', 'Bananas', 'Oranges'],
+      selectedVegetable: 'Bananas',
+      colors: ['Red', 'Green', 'Blue'],
+      checkedColors: ['Green', 'Blue'],
+      volume: 25
+    }
+  }
+}
+</script>
+
+<style scoped>
+.right-icon {
+  margin-left: 10px;
+}
+.right-label {
+  color: #666;
+}
+</style>

test/dashboard2/src/pages/Home.vue

@@ -0,0 +1,95 @@
+<template>
+  <v-ons-page>
+    <p class="intro">
+      This is a kitchen sink example that shows off the Vue bindings for Onsen UI.<br><br>
+    </p>
+
+      <v-ons-card v-for="page of pages" :key="page.label"
+        @click="push(page.component, page.label)"
+      >
+        <div class="title">{{ page.label }}</div>
+        <div class="content">{{ page.desc }}</div>
+      </v-ons-card>
+  </v-ons-page>
+</template>
+
+<script>
+import PullHook from './PullHook.vue'
+import Dialogs from './Dialogs.vue'
+import Buttons from './Buttons.vue'
+import Carousel from './Carousel.vue'
+import InfiniteScroll from './InfiniteScroll.vue'
+import Progress from './Progress.vue'
+
+export default {
+  data () {
+    return {
+      pages: [
+        {
+          component: PullHook,
+          label: 'Pull Hook',
+          desc: 'Simple "pull to refresh" functionality to update data.'
+        },
+        {
+          component: Dialogs,
+          label: 'Dialogs',
+          desc: 'Components and utility methods to display many types of dialogs.'
+        },
+        {
+          component: Buttons,
+          label: 'Buttons',
+          desc: 'Different styles for buttons, floating action buttons and speed dials.'
+        },
+        {
+          component: Carousel,
+          label: 'Carousel',
+          desc: 'Customizable carousel that can be optionally fullscreen.'
+        },
+        {
+          component: InfiniteScroll,
+          label: 'Infinite Scroll',
+          desc: 'Two types of infinite lists: "Load More" and "Lazy Repeat".'
+        },
+        {
+          component: Progress,
+          label: 'Progress',
+          desc: 'Linear progress, circular progress and spinners.'
+        }
+      ]
+    }
+  },
+
+  methods: {
+    push (page, key) {
+      this.$store.commit('navigator/push', {
+        extends: page,
+        data () {
+          return {
+            toolbarInfo: {
+              backLabel: 'Home',
+              title: key
+            }
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.intro {
+  text-align: center;
+  padding: 0 20px;
+  margin-top: 40px;
+}
+
+ons-card {
+  cursor: pointer;
+  color: #333;
+}
+
+.card__title, .card--material__title {
+  font-size: 20px;
+}
+</style>

test/dashboard2/src/pages/InfiniteScroll.vue

@@ -0,0 +1,97 @@
+<template>
+  <v-ons-page>
+    <custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
+
+    <v-ons-tabbar position="auto">
+      <template slot="pages">
+
+        <!-- Load more items on scroll bottom -->
+        <v-ons-page :infinite-scroll="loadMore">
+          <p class="intro">
+            Useful for loading more items when the scroll reaches the bottom of the page, typically after an asynchronous API call.<br><br>
+          </p>
+
+          <v-ons-list>
+            <v-ons-list-item v-for="item in list" :key="item">
+              Item #{{ item }}
+            </v-ons-list-item>
+          </v-ons-list>
+
+          <div class="after-list">
+            <v-ons-icon icon="fa-spinner" size="26px" spin></v-ons-icon>
+          </div>
+        </v-ons-page>
+
+        <!-- Lazy load thousands of items -->
+        <v-ons-page>
+          <p class="intro">
+            Automatically unloads items that are not visible and loads new ones. Useful when the list contains thousands of items.<br><br>
+          </p>
+
+          <v-ons-list>
+            <v-ons-lazy-repeat :render-item="renderItem" :length="3000"></v-ons-lazy-repeat>
+          </v-ons-list>
+        </v-ons-page>
+      </template>
+
+      <v-ons-tab label="Load More"></v-ons-tab>
+      <v-ons-tab label="Lazy Repeat" active></v-ons-tab>
+    </v-ons-tabbar>
+
+  </v-ons-page>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default {
+  data () {
+    return {
+      list: []
+    }
+  },
+  beforeMount () {
+    for (let i = 0; i < 30; i++) {
+      this.list.push(i)
+    }
+  },
+  methods: {
+    loadMore (done) {
+      setTimeout(() => {
+        for (let i = 0; i < 10; i++) {
+          this.list.push(this.list.length + i)
+        }
+        done()
+      }, 600)
+    },
+
+    renderItem (i) {
+      return new Vue({
+        template: `
+          <v-ons-list-item :key="index">
+            Item #{{ index }}
+          </v-ons-list-item>
+        `,
+        data () {
+          return {
+            index: i
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.intro {
+  text-align: center;
+  padding: 0 20px;
+  margin-top: 40px;
+}
+
+.after-list {
+  margin: 20px;
+  text-align: center;
+}
+</style>

test/dashboard2/src/pages/Menu.vue

@@ -0,0 +1,119 @@
+<template>
+  <v-ons-page>
+    <div class="profile-pic">
+      <img src="../assets/vue-onsenui.png">
+    </div>
+
+    <v-ons-list-title>Access</v-ons-list-title>
+    <v-ons-list>
+      <v-ons-list-item v-for="(item, index) in access" :key="item.title"
+        @click="loadView(index)"
+      >
+        <div class="left">
+          <v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
+        </div>
+        <div class="center">
+          {{ item.title }}
+        </div>
+        <div class="right">
+          <v-ons-icon icon="fa-link"></v-ons-icon>
+        </div>
+      </v-ons-list-item>
+    </v-ons-list>
+
+    <v-ons-list-title style="margin-top: 10px">Links</v-ons-list-title>
+    <v-ons-list>
+      <v-ons-list-item v-for="item in links" :key="item.title"
+        @click="loadLink(item.url)"
+      >
+        <div class="left">
+          <v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
+        </div>
+        <div class="center">
+          {{ item.title }}
+        </div>
+        <div class="right">
+          <v-ons-icon icon="fa-external-link"></v-ons-icon>
+        </div>
+      </v-ons-list-item>
+    </v-ons-list>
+  </v-ons-page>
+</template>
+
+<script>
+export default {
+  methods: {
+    loadView (index) {
+      this.$store.commit('tabbar/set', index)
+      this.$store.commit('splitter/toggle')
+    },
+    loadLink (url) {
+      window.open(url, '_blank')
+    }
+  },
+  data () {
+    return {
+      links: [
+        {
+          title: 'Docs',
+          icon: 'ion-document-text',
+          url: 'https://onsen.io/v2/docs/guide/vue/'
+        },
+        {
+          title: 'Github',
+          icon: 'ion-social-github',
+          url: 'https://github.com/OnsenUI/OnsenUI'
+        },
+        {
+          title: 'Code',
+          icon: 'ion-code',
+          url: 'https://github.com/frandiox/vue-onsenui-kitchensink'
+        },
+        {
+          title: 'Forum',
+          icon: 'ion-chatboxes',
+          url: 'https://community.onsen.io/'
+        },
+        {
+          title: 'Twitter',
+          icon: 'ion-social-twitter',
+          url: 'https://twitter.com/Onsen_UI'
+        }
+      ],
+      access: [
+        {
+          title: 'Home',
+          icon: 'ion-home, material:md-home'
+        },
+        {
+          title: 'Forms',
+          icon: 'ion-edit, material:md-edit'
+        },
+        {
+          title: 'Animations',
+          icon: 'ion-film-marker, material: md-movie-alt'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.profile-pic {
+  width: 200px;
+  background-color: #fff;
+  margin: 20px auto 10px;
+  border: 1px solid #999;
+  border-radius: 4px;
+}
+
+.profile-pic > img {
+  display: block;
+  max-width: 100%;
+}
+
+ons-list-item {
+  color: #444;
+}
+</style>