updates

.babelrc

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

.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

.eslintrc.json

@@ -0,0 +1,30 @@
+{
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true,
+        "node": true
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
+    "rules": {
+        "no-const-assign": "warn",
+        "no-this-before-super": "warn",
+        "no-undef": "warn",
+        "no-unreachable": "warn",
+        "no-unused-vars": "warn",
+        "constructor-super": "warn",
+        "valid-typeof": "warn"
+    },
+    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+    "extends": "standard",
+    // required to lint *.vue files
+    "plugins": [
+        "html"
+    ]
+}
+// http://eslint.org/docs/user-guide/configuring

.gitattributes

@@ -0,0 +1,15 @@
+# Auto detect text files and perform LF normalization
+*.scss linguist-language=Vue
+*.css linguist-language=Vue
+
+# Standard to msysgit
+*.doc	 diff=astextplain
+*.DOC	 diff=astextplain
+*.docx diff=astextplain
+*.DOCX diff=astextplain
+*.dot  diff=astextplain
+*.DOT  diff=astextplain
+*.pdf  diff=astextplain
+*.PDF	 diff=astextplain
+*.rtf	 diff=astextplain
+*.RTF	 diff=astextplain

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules/
+npm-debug.log

CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+## [0.1.0] 2017-07-29
+### Starting Development

CONTRIBUTING.md

@@ -0,0 +1,19 @@
+* Fork the repository
+* Clone it on your PC
+* `npm install` or `yarn install`
+* Make changes, commit open PR 
+
+### Notes
+* If you use 3rd party libraries/components in more than 1 place make sure to define them globally for ease of use
+  Example
+  ```js
+  Object.defineProperty(Vue.prototype, '$Chartist', {
+    get() {
+      return Chartist;
+    }
+  });
+  ```
+* Please don't use jQuery or jQuery based plugins since there are many pure Vue alternatives
+* Write unit tests for your custom components. See fgInput.spec and paper-table.spec
+
+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).

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Wlad Meixner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,42 @@
+# [Vue Webshop](https://github.com/gosticks/vue-webshop) [![version][version-badge]][CHANGELOG] [![license][license-badge]][LICENSE]
+
+> Simple Vue Webshop
+
+This template is based on the great setup [cristijora](https://github.com/cristijora) did for his dashboard project (which you can see here [vue-paper-dashboard](https://github.com/cristijora/vue-paper-dashboard))
+
+
+<!-- ## Documentation -->
+
+## Build Setup
+
+### install dependencies
+`npm install`
+### serve with hot reload at localhost:8080
+`npm run dev`
+### build for production with minification
+`npm run build`
+### run unit tests
+`npm run unit`
+### run and watch unit tests
+`npm run unit:watch`
+
+## Contribution guide
+* `npm install` or `yarn install`
+* If you use 3rd party libraries/components in more than 1 place make sure to define them globally for ease of use
+  Example
+  ```js
+  Object.defineProperty(Vue.prototype, '$Chartist', {
+    get() {
+      return Chartist;
+    }
+  });
+  ```
+* Please don't use jQuery or jQuery based plugins since there are many pure Vue alternatives
+* Write unit tests for your custom components
+
+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).
+
+[CHANGELOG]: ./CHANGELOG.md
+[LICENSE]: ./LICENSE.md
+[version-badge]: https://img.shields.io/badge/version-0.1.0-blue.svg
+[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg

build/build.js

@@ -0,0 +1,40 @@
+// https://github.com/shelljs/shelljs
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var path = require('path')
+var chalk = require('chalk')
+var shell = require('shelljs')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
+shell.rm('-rf', assetsPath)
+shell.mkdir('-p', assetsPath)
+shell.config.silent = true
+shell.cp('-R', 'static/*', assetsPath)
+shell.config.silent = false
+
+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'
+  ))
+})

build/check-versions.js

@@ -0,0 +1,45 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+  {
+    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)
+  }
+}

build/dev-client.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})

build/dev-server.js

@@ -0,0 +1,83 @@
+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 = process.env.NODE_ENV === 'testing'
+  ? require('./webpack.prod.conf')
+  : 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
+
+devMiddleware.waitUntilValid(function () {
+  console.log('> Listening at ' + uri + '\n')
+})
+
+module.exports = app.listen(port, function (err) {
+  if (err) {
+    console.log(err)
+    return
+  }
+
+  // when env is testing, don't need open it
+  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+    opn(uri)
+  }
+})

build/utils.js

@@ -0,0 +1,64 @@
+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 || {}
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loaders) {
+    var sourceLoader = loaders.map(function (loader) {
+      var extraParamChar
+      if (/\?/.test(loader)) {
+        loader = loader.replace(/\?/, '-loader?')
+        extraParamChar = '&'
+      } else {
+        loader = loader + '-loader'
+        extraParamChar = '?'
+      }
+      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
+    }).join('!')
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: sourceLoader,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader', sourceLoader].join('!')
+    }
+  }
+
+  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(['css']),
+    postcss: generateLoaders(['css']),
+    less: generateLoaders(['css', 'less']),
+    sass: generateLoaders(['css', 'sass?indentedSyntax']),
+    scss: generateLoaders(['css', 'sass']),
+    stylus: generateLoaders(['css', 'stylus']),
+    styl: generateLoaders(['css', '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 + '$'),
+      loader: loader
+    })
+  }
+  return output
+}

build/vue-loader.conf.js

@@ -0,0 +1,17 @@
+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
+  }),
+  postcss: [
+    require('autoprefixer')({
+      browsers: ['last 2 versions']
+    })
+  ]
+}

build/webpack.base.conf.js

@@ -0,0 +1,88 @@
+var path = require('path')
+var utils = require('./utils')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+var webpack = require('webpack')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+var webpackConfig = {
+  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
+  },
+ /* plugins: [
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery",
+      jquery: "jquery"
+    })
+  ],*/
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    modules: [
+      resolve('src'),
+      resolve('node_modules')
+    ],
+    alias: {
+      'vue$': 'vue/dist/vue.common.js',
+      'src': resolve('src'),
+      'assets': resolve('src/assets'),
+      'components': resolve('src/components')
+    }
+  },
+  module: {
+    rules: [
+      {
+        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',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  }
+}
+
+var esLintRule = {
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter')
+  }
+}
+
+if(process.env.ENABLE_ESLINT && process.env.ENABLE_ESLINT === 'true'){
+  webpackConfig.module.rules.unshift(esLintRule) //add eslint
+}
+
+module.exports = webpackConfig

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()
+  ]
+})

build/webpack.prod.conf.js

@@ -0,0 +1,106 @@
+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 HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  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')
+    }),
+    // 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: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : 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']
+    })
+  ]
+})
+
+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

build/webpack.test.conf.js

@@ -0,0 +1,24 @@
+// This is the webpack config used for unit tests.
+
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseConfig = require('./webpack.base.conf')
+
+var webpackConfig = merge(baseConfig, {
+  // use inline sourcemap for karma-sourcemap-loader
+  module: {
+    rules: utils.styleLoaders()
+  },
+  devtool: '#inline-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/test.env')
+    })
+  ]
+})
+
+// no need for app entry during tests
+delete webpackConfig.entry
+
+module.exports = webpackConfig

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"'
+})

config/index.js

@@ -0,0 +1,37 @@
+// 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
+  }
+}

config/prod.env.js

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

config/test.env.js

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

index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="static/img/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+  <title>Vue Basic Template</title>
+  <!-- Viewport core CSS     -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+</head>
+<body>
+<div class="app-wrapper" id="app">
+
+</div>
+<!-- built files will be auto injected -->
+</body>
+</html>

package.json

@@ -0,0 +1,91 @@
+{
+  "name": "vue-simple-webpack-router-vuex",
+  "version": "0.1.0",
+  "description": "A sample Vue Webpack Router Vuex Linter template",
+  "author": "wlad.meixner <wlad@desertbit.com>",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env ENABLE_ESLINT=true node build/dev-server.js",
+    "build": "cross-env ENABLE_ESLINT=true node build/build.js",
+    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
+    "unit:watch": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --watch",
+    "e2e": "node test/e2e/runner.js",
+    "test": "npm run unit && npm run e2e"
+  },
+  "dependencies": {
+    "vue": "^2.3.0",
+    "vue-clickaway": "^2.1.0",
+    "vue-router": "^2.2.0",
+    "vuex": "^2.3.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.2",
+    "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-istanbul": "^3.1.2",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chai": "^3.5.0",
+    "chalk": "^1.1.3",
+    "chromedriver": "^2.27.2",
+    "connect-history-api-fallback": "^1.3.0",
+    "cross-env": "^3.1.4",
+    "cross-spawn": "^5.0.1",
+    "css-loader": "^0.26.1",
+    "eslint": "^3.19.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-html": "^2.0.3",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-node": "^4.2.2",
+    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.14.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.2",
+    "file-loader": "^0.10.0",
+    "friendly-errors-webpack-plugin": "^1.1.3",
+    "function-bind": "^1.1.0",
+    "html-webpack-plugin": "^2.28.0",
+    "http-proxy-middleware": "^0.17.3",
+    "inject-loader": "^2.0.1",
+    "karma": "^1.4.1",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-sinon-chai": "^1.2.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "^2.0.2",
+    "lolex": "^1.5.2",
+    "mocha": "^3.2.0",
+    "nightwatch": "^0.9.12",
+    "node-sass": "^4.5.0",
+    "opn": "^4.0.2",
+    "ora": "^1.1.0",
+    "phantomjs-prebuilt": "^2.1.14",
+    "sass-loader": "^5.0.1",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "sinon": "^1.17.7",
+    "sinon-chai": "^2.8.0",
+    "url-loader": "^0.5.7",
+    "vue-loader": "^10.3.0",
+    "vue-style-loader": "^2.0.0",
+    "vue-template-compiler": "^2.3.0",
+    "vue-unit": "^0.1.0",
+    "webpack": "^2.2.1",
+    "webpack-bundle-analyzer": "^2.2.1",
+    "webpack-dev-middleware": "^1.10.0",
+    "webpack-hot-middleware": "^2.16.1",
+    "webpack-merge": "^2.6.1"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  }
+}

src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Hello from basic vue template</h1> 
+  </div>
+</template>
+
+<script>
+  export default {}
+</script>
+
+<style lang="scss"></style>

src/assets/sass/components/_mixins.scss

@@ -0,0 +1,3 @@
+//Utilities
+@import "mixins/transparency";
+@import "mixins/vendor-prefixes";

src/assets/sass/components/mixins/_transparency.scss

@@ -0,0 +1,20 @@
+// Opacity
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}
+
+@mixin black-filter($opacity) {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  background-color: rgba(17, 17, 17, $opacity);
+  display: block;
+  content: "";
+  z-index: 1;
+}

src/assets/sass/components/mixins/_vendor-prefixes.scss

@@ -0,0 +1,316 @@
+// User select
+// For selecting text on the page
+
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+  -moz-user-select: $select;
+  -ms-user-select: $select; // IE10+
+  user-select: $select;
+}
+
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+  box-shadow: $shadow;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+  -moz-box-sizing: $boxmodel;
+  box-sizing: $boxmodel;
+}
+
+@mixin transition($time, $type) {
+  -webkit-transition: all $time $type;
+  -moz-transition: all $time $type;
+  -o-transition: all $time $type;
+  -ms-transition: all $time $type;
+  transition: all $time $type;
+}
+
+@mixin transition-none() {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+}
+
+@mixin transform-scale($value) {
+  -webkit-transform: scale($value);
+  -moz-transform: scale($value);
+  -o-transform: scale($value);
+  -ms-transform: scale($value);
+  transform: scale($value);
+}
+
+@mixin transform-translate-x($value) {
+  -webkit-transform: translate3d($value, 0, 0);
+  -moz-transform: translate3d($value, 0, 0);
+  -o-transform: translate3d($value, 0, 0);
+  -ms-transform: translate3d($value, 0, 0);
+  transform: translate3d($value, 0, 0);
+}
+
+@mixin transform-origin($coordinates) {
+  -webkit-transform-origin: $coordinates;
+  -moz-transform-origin: $coordinates;
+  -o-transform-origin: $coordinates;
+  -ms-transform-origin: $coordinates;
+  transform-origin: $coordinates;
+}
+
+@mixin icon-gradient($top-color, $bottom-color) {
+  background: $top-color;
+  background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $top-color), color-stop(100%, $bottom-color));
+  background: -webkit-linear-gradient(top, $top-color 0%, $bottom-color 100%);
+  background: -o-linear-gradient(top, $top-color 0%, $bottom-color 100%);
+  background: -ms-linear-gradient(top, $top-color 0%, $bottom-color 100%);
+  background: linear-gradient(to bottom, $top-color 0%, $bottom-color 100%);
+  background-size: 150% 150%;
+}
+
+@mixin radial-gradient($extern-color, $center-color) {
+  background: $extern-color;
+  background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $center-color), color-stop(100%, $extern-color)); /* Chrome,Safari4+ */
+  background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* Opera 12+ */
+  background: -ms-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* IE10+ */
+  background: radial-gradient(ellipse at center, $center-color 0%, $extern-color 100%); /* W3C */
+  background-size: 550% 450%;
+}
+
+@mixin vertical-align {
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+@mixin rotate-180() {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+@mixin bar-animation($type) {
+  -webkit-animation: $type 500ms linear 0s;
+  -moz-animation: $type 500ms linear 0s;
+  animation: $type 500ms 0s;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+
+@mixin topbar-x-rotation() {
+  @keyframes topbar-x {
+    0% {
+      top: 0px;
+      transform: rotate(0deg);
+    }
+    45% {
+      top: 6px;
+      transform: rotate(145deg);
+    }
+    75% {
+      transform: rotate(130deg);
+    }
+    100% {
+      transform: rotate(135deg);
+    }
+  }
+  @-webkit-keyframes topbar-x {
+    0% {
+      top: 0px;
+      -webkit-transform: rotate(0deg);
+    }
+    45% {
+      top: 6px;
+      -webkit-transform: rotate(145deg);
+    }
+    75% {
+      -webkit-transform: rotate(130deg);
+    }
+    100% {
+      -webkit-transform: rotate(135deg);
+    }
+  }
+  @-moz-keyframes topbar-x {
+    0% {
+      top: 0px;
+      -moz-transform: rotate(0deg);
+    }
+    45% {
+      top: 6px;
+      -moz-transform: rotate(145deg);
+    }
+    75% {
+      -moz-transform: rotate(130deg);
+    }
+    100% {
+      -moz-transform: rotate(135deg);
+    }
+  }
+}
+
+@mixin topbar-back-rotation() {
+  @keyframes topbar-back {
+    0% {
+      top: 6px;
+      transform: rotate(135deg);
+    }
+    45% {
+      transform: rotate(-10deg);
+    }
+    75% {
+      transform: rotate(5deg);
+    }
+    100% {
+      top: 0px;
+      transform: rotate(0);
+    }
+  }
+
+  @-webkit-keyframes topbar-back {
+    0% {
+      top: 6px;
+      -webkit-transform: rotate(135deg);
+    }
+    45% {
+      -webkit-transform: rotate(-10deg);
+    }
+    75% {
+      -webkit-transform: rotate(5deg);
+    }
+    100% {
+      top: 0px;
+      -webkit-transform: rotate(0);
+    }
+  }
+
+  @-moz-keyframes topbar-back {
+    0% {
+      top: 6px;
+      -moz-transform: rotate(135deg);
+    }
+    45% {
+      -moz-transform: rotate(-10deg);
+    }
+    75% {
+      -moz-transform: rotate(5deg);
+    }
+    100% {
+      top: 0px;
+      -moz-transform: rotate(0);
+    }
+  }
+}
+
+@mixin bottombar-x-rotation() {
+  @keyframes bottombar-x {
+    0% {
+      bottom: 0px;
+      transform: rotate(0deg);
+    }
+    45% {
+      bottom: 6px;
+      transform: rotate(-145deg);
+    }
+    75% {
+      transform: rotate(-130deg);
+    }
+    100% {
+      transform: rotate(-135deg);
+    }
+  }
+  @-webkit-keyframes bottombar-x {
+    0% {
+      bottom: 0px;
+      -webkit-transform: rotate(0deg);
+    }
+    45% {
+      bottom: 6px;
+      -webkit-transform: rotate(-145deg);
+    }
+    75% {
+      -webkit-transform: rotate(-130deg);
+    }
+    100% {
+      -webkit-transform: rotate(-135deg);
+    }
+  }
+  @-moz-keyframes bottombar-x {
+    0% {
+      bottom: 0px;
+      -moz-transform: rotate(0deg);
+    }
+    45% {
+      bottom: 6px;
+      -moz-transform: rotate(-145deg);
+    }
+    75% {
+      -moz-transform: rotate(-130deg);
+    }
+    100% {
+      -moz-transform: rotate(-135deg);
+    }
+  }
+}
+
+@mixin bottombar-back-rotation {
+  @keyframes bottombar-back {
+    0% {
+      bottom: 6px;
+      transform: rotate(-135deg);
+    }
+    45% {
+      transform: rotate(10deg);
+    }
+    75% {
+      transform: rotate(-5deg);
+    }
+    100% {
+      bottom: 0px;
+      transform: rotate(0);
+    }
+  }
+  @-webkit-keyframes bottombar-back {
+    0% {
+      bottom: 6px;
+      -webkit-transform: rotate(-135deg);
+    }
+    45% {
+      -webkit-transform: rotate(10deg);
+    }
+    75% {
+      -webkit-transform: rotate(-5deg);
+    }
+    100% {
+      bottom: 0px;
+      -webkit-transform: rotate(0);
+    }
+  }
+  @-moz-keyframes bottombar-back {
+    0% {
+      bottom: 6px;
+      -moz-transform: rotate(-135deg);
+    }
+    45% {
+      -moz-transform: rotate(10deg);
+    }
+    75% {
+      -moz-transform: rotate(-5deg);
+    }
+    100% {
+      bottom: 0px;
+      -moz-transform: rotate(0);
+    }
+  }
+
+}
+
+

src/assets/sass/main.scss

@@ -0,0 +1,9 @@
+@import "components/variables";
+@import "components/mixins";
+
+body {
+    background-color: #eee;
+    text-align: center;
+    color: #222;
+    font-family: sans-serif;
+}

src/components/GeneralViews/NotFoundPage.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <h1>Not found page template</h1>
+  </div>
+</template>
+
+<script>
+  export default {}
+
+</script>

src/globalComponents.js

@@ -0,0 +1,10 @@
+/**
+ * You can register global components here and use them as a plugin in your main Vue instance
+ */
+
+const GlobalComponents = {
+  install (Vue) {
+  }
+}
+
+export default GlobalComponents

src/globalDirectives.js

@@ -0,0 +1,13 @@
+import { directive as vClickOutside } from 'vue-clickaway'
+
+/**
+ * You can register global components here and use them as a plugin in your main Vue instance
+ */
+
+const GlobalDirectives = {
+  install (Vue) {
+    Vue.directive('click-outside', vClickOutside)
+  }
+}
+
+export default GlobalDirectives

src/main.js

@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Vuex from 'vuex'
+
+// Plugins
+import GlobalComponents from './globalComponents'
+import GlobalDirectives from './globalDirectives'
+import App from './App'
+
+// router setup
+import routes from './routes/routes'
+
+// library imports
+import './assets/sass/main.scss'
+import 'es6-promise/auto'
+
+// plugin setup
+Vue.use(VueRouter)
+Vue.use(Vuex)
+Vue.use(GlobalComponents)
+Vue.use(GlobalDirectives)
+
+// configure router
+const router = new VueRouter({
+  routes, // short for routes: routes
+  linkActiveClass: 'active'
+})
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  render: h => h(App),
+  router
+})

src/routes/routes.js

@@ -0,0 +1,21 @@
+const routes = [
+  // {
+  //   path: '/',
+  //   component: COMPONENT_NAME,
+  //   redirect: OPTIONAL_REDIRECT
+  //   children: [OPTINAL_CHILDREN]
+  // },
+  // Not Found example
+  // { path: '*', component: NotFound }
+]
+
+/**
+ * Asynchronously load view (Webpack Lazy loading compatible)
+ * The specified component must be inside the Views folder
+ * @param  {string} name  the filename (basename) of the view to load.
+function view(name) {
+   var res= require('../components/Shop/Views/' + name + '.vue');
+   return res;
+};**/
+
+export default routes

test/e2e/custom-assertions/elementCount.js

@@ -0,0 +1,26 @@
+// A custom Nightwatch assertion.
+// the name of the method is the filename.
+// can be used in tests like this:
+//
+//   browser.assert.elementCount(selector, count)
+//
+// for how to write custom assertions see
+// http://nightwatchjs.org/guide#writing-custom-assertions
+exports.assertion = function (selector, count) {
+  this.message = 'Testing if element <' + selector + '> has count: ' + count
+  this.expected = count
+  this.pass = function (val) {
+    return val === this.expected
+  }
+  this.value = function (res) {
+    return res.value
+  }
+  this.command = function (cb) {
+    var self = this
+    return this.api.execute(function (selector) {
+      return document.querySelectorAll(selector).length
+    }, [selector], function (res) {
+      cb.call(self, res)
+    })
+  }
+}

test/e2e/nightwatch.conf.js

@@ -0,0 +1,46 @@
+require('babel-register')
+var config = require('../../config')
+
+// http://nightwatchjs.org/guide#settings-file
+module.exports = {
+  src_folders: ['test/e2e/specs'],
+  output_folder: 'test/e2e/reports',
+  custom_assertions_path: ['test/e2e/custom-assertions'],
+
+  selenium: {
+    start_process: true,
+    server_path: require('selenium-server').path,
+    host: '127.0.0.1',
+    port: 4444,
+    cli_args: {
+      'webdriver.chrome.driver': require('chromedriver').path
+    }
+  },
+
+  test_settings: {
+    default: {
+      selenium_port: 4444,
+      selenium_host: 'localhost',
+      silent: true,
+      globals: {
+        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
+      }
+    },
+
+    chrome: {
+      desiredCapabilities: {
+        browserName: 'chrome',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    },
+
+    firefox: {
+      desiredCapabilities: {
+        browserName: 'firefox',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    }
+  }
+}

test/e2e/runner.js

@@ -0,0 +1,31 @@
+// 1. start the dev server using production config
+process.env.NODE_ENV = 'testing'
+var server = require('../../build/dev-server.js')
+
+// 2. run the nightwatch test suite against it
+// to run in additional browsers:
+//    1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
+//    2. add it to the --env flag below
+// or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
+// For more information on Nightwatch's config file, see
+// http://nightwatchjs.org/guide#settings-file
+var opts = process.argv.slice(2)
+if (opts.indexOf('--config') === -1) {
+  opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
+}
+if (opts.indexOf('--env') === -1) {
+  opts = opts.concat(['--env', 'chrome'])
+}
+
+var spawn = require('cross-spawn')
+var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
+
+runner.on('exit', function (code) {
+  server.close()
+  process.exit(code)
+})
+
+runner.on('error', function (err) {
+  server.close()
+  throw err
+})

test/e2e/specs/test.js

@@ -0,0 +1,19 @@
+// For authoring Nightwatch tests, see
+// http://nightwatchjs.org/guide#usage
+
+module.exports = {
+  'default e2e tests': function (browser) {
+    // automatically uses dev Server port from /config.index.js
+    // default: http://localhost:8080
+    // see nightwatch.conf.js
+    const devServer = browser.globals.devServerURL
+
+    browser
+      .url(devServer)
+      .waitForElementVisible('#app', 5000)
+      .assert.elementPresent('.hello')
+      .assert.containsText('h1', 'Welcome to Your Vue.js PrettyCheckbox')
+      .assert.elementCount('img', 1)
+      .end()
+  }
+}

test/unit/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "expect": true,
+    "sinon": true
+  }
+}

test/unit/coverage/lcov.info

@@ -0,0 +1,405 @@
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Views\Overview.vue
+FNF:0
+FNH:0
+DA:55,1
+LF:1
+LH:1
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\UIComponents\Cards\StatsCard.vue
+FNF:0
+FNH:0
+LF:0
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\UIComponents\Cards\ChartCard.vue
+FN:44,(anonymous_0)
+FN:50,(anonymous_1)
+FNF:2
+FNH:0
+FNDA:0,(anonymous_0)
+FNDA:0,(anonymous_1)
+DA:45,0
+DA:51,0
+DA:59,1
+DA:77,1
+DA:78,1
+DA:79,1
+DA:85,1
+DA:86,1
+DA:87,1
+DA:90,1
+DA:94,1
+DA:95,1
+LF:12
+LH:10
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\UIComponents\Inputs\formGroupInput.vue
+FNF:0
+FNH:0
+LF:0
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\UIComponents\PaperTable.vue
+FNF:0
+FNH:0
+DA:44,2
+DA:49,20
+DA:52,20
+LF:3
+LH:3
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\App.vue
+FNF:0
+FNH:0
+LF:0
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Layout\Content.vue
+FNF:0
+FNH:0
+LF:0
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Layout\ContentFooter.vue
+FNF:0
+FNH:0
+LF:0
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Layout\DashboardLayout.vue
+FNF:0
+FNH:0
+DA:35,0
+DA:36,0
+LF:2
+LH:0
+BRDA:35,0,0,0
+BRDA:35,0,1,0
+BRF:2
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Layout\TopNavbar.vue
+FNF:0
+FNH:0
+DA:71,0
+DA:72,0
+DA:76,0
+DA:82,0
+DA:85,0
+DA:88,0
+DA:91,0
+DA:94,0
+LF:8
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Views\Icons.vue
+FNF:0
+FNH:0
+LF:0
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Views\Maps.vue
+FNF:0
+FNH:0
+DA:16,0
+DA:17,0
+DA:61,0
+DA:63,0
+DA:69,0
+LF:5
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Views\Notifications.vue
+FNF:0
+FNH:0
+DA:96,0
+DA:108,0
+DA:109,0
+LF:3
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\UIComponents\NotificationPlugin\Notification.vue
+FN:52,(anonymous_0)
+FNF:1
+FNH:0
+FNDA:0,(anonymous_0)
+DA:40,0
+DA:44,0
+DA:47,0
+DA:50,0
+DA:51,0
+DA:52,0
+DA:53,0
+DA:55,0
+DA:56,0
+DA:57,0
+DA:58,0
+DA:60,0
+DA:62,0
+DA:67,0
+DA:71,0
+DA:72,0
+LF:16
+LH:0
+BRDA:44,0,0,0
+BRDA:44,0,1,0
+BRDA:53,1,0,0
+BRDA:53,1,1,0
+BRDA:57,2,0,0
+BRDA:57,2,1,0
+BRDA:71,3,0,0
+BRDA:71,3,1,0
+BRF:8
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Views\TableList.vue
+FNF:0
+FNH:0
+DA:25,1
+DA:26,1
+DA:67,0
+LF:3
+LH:2
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Views\Typography.vue
+FNF:0
+FNH:0
+LF:0
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Views\UserProfile.vue
+FNF:0
+FNH:0
+LF:0
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Views\UserProfile\EditProfileForm.vue
+FNF:0
+FNH:0
+DA:110,0
+DA:125,0
+LF:2
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Views\UserProfile\UserCard.vue
+FNF:0
+FNH:0
+DA:38,0
+DA:57,0
+DA:58,0
+DA:59,0
+DA:60,0
+DA:61,0
+DA:63,0
+LF:7
+LH:0
+BRDA:58,0,0,0
+BRDA:58,0,1,0
+BRDA:60,1,0,0
+BRDA:60,1,1,0
+BRF:4
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\Dashboard\Views\UserProfile\MembersCard.vue
+FNF:0
+FNH:0
+DA:37,0
+DA:60,0
+DA:62,0
+DA:64,0
+DA:66,0
+DA:68,0
+LF:6
+LH:0
+BRDA:60,0,0,0
+BRDA:60,0,1,0
+BRDA:60,0,2,0
+BRDA:60,0,3,0
+BRF:4
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\GeneralViews\NotFoundPage.vue
+FNF:0
+FNH:0
+LF:0
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\UIComponents\NotificationPlugin\Notifications.vue
+FNF:0
+FNH:0
+DA:18,0
+DA:24,0
+LF:2
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\UIComponents\NotificationPlugin\index.js
+FNF:0
+FNH:0
+DA:3,1
+DA:7,0
+DA:10,0
+DA:14,1
+DA:17,0
+DA:19,0
+DA:22,0
+LF:7
+LH:2
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\UIComponents\SidebarPlugin\MovingArrow.vue
+FNF:0
+FNH:0
+DA:19,0
+LF:1
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\UIComponents\SidebarPlugin\SideBar.vue
+FN:38,(anonymous_0)
+FN:46,(anonymous_1)
+FN:54,(anonymous_2)
+FN:61,(anonymous_3)
+FN:102,(anonymous_4)
+FN:115,(anonymous_5)
+FNF:6
+FNH:0
+FNDA:0,(anonymous_0)
+FNDA:0,(anonymous_1)
+FNDA:0,(anonymous_2)
+FNDA:0,(anonymous_3)
+FNDA:0,(anonymous_4)
+FNDA:0,(anonymous_5)
+DA:39,0
+DA:40,0
+DA:47,0
+DA:48,0
+DA:55,0
+DA:56,0
+DA:61,0
+DA:69,0
+DA:70,0
+DA:72,0
+DA:76,0
+DA:77,0
+DA:79,0
+DA:87,0
+DA:91,0
+DA:102,0
+DA:103,0
+DA:104,0
+DA:105,0
+DA:107,0
+DA:112,0
+DA:116,0
+LF:22
+LH:0
+BRDA:69,0,0,0
+BRDA:69,0,1,0
+BRDA:76,1,0,0
+BRDA:76,1,1,0
+BRDA:104,2,0,0
+BRDA:104,2,1,0
+BRF:6
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\components\UIComponents\SidebarPlugin\index.js
+FNF:0
+FNH:0
+DA:3,1
+DA:43,0
+DA:47,1
+DA:50,0
+DA:52,0
+DA:58,0
+DA:60,0
+DA:63,0
+LF:8
+LH:2
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\gloablComponents.js
+FNF:0
+FNH:0
+DA:7,1
+DA:9,0
+LF:2
+LH:1
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:C:\work\Github\vue-paper-dashboard\src\routes\routes.js
+FNF:0
+FNH:0
+DA:14,1
+LF:1
+LH:1
+BRF:0
+BRH:0
+end_of_record

test/unit/helpers/mount.js

@@ -0,0 +1,6 @@
+import Vue from "vue";
+window.mount = function mount(Component, propsData) {
+  const Ctor = Vue.extend(Component)
+  const vm = new Ctor({propsData}).$mount()
+  return vm;
+}

test/unit/helpers/triggerEvent.js

@@ -0,0 +1,6 @@
+window.triggerEvent = function triggerEvent (target, event, process) {
+  var e = document.createEvent('HTMLEvents')
+  e.initEvent(event, true, true)
+  if (process) process(e)
+  target.dispatchEvent(e)
+}

test/unit/helpers/wait-for-update.js

@@ -0,0 +1,72 @@
+import Vue from 'vue'
+// helper for async assertions.
+// Use like this:
+//
+// vm.a = 123
+// waitForUpdate(() => {
+//   expect(vm.$el.textContent).toBe('123')
+//   vm.a = 234
+// })
+// .then(() => {
+//   // more assertions...
+// })
+// .then(done)
+window.waitForUpdate = initialCb => {
+  let end
+  const queue = initialCb ? [initialCb] : []
+
+  function shift () {
+    const job = queue.shift()
+    if (queue.length) {
+      let hasError = false
+      try {
+        job.wait ? job(shift) : job()
+      } catch (e) {
+        hasError = true
+        const done = queue[queue.length - 1]
+        if (done && done.fail) {
+          done.fail(e)
+        }
+      }
+      if (!hasError && !job.wait) {
+        if (queue.length) {
+          Vue.nextTick(shift)
+        }
+      }
+    } else if (job && (job.fail || job === end)) {
+      job() // done
+    }
+  }
+
+  Vue.nextTick(() => {
+    if (!queue.length || (!end && !queue[queue.length - 1].fail)) {
+      throw new Error('waitForUpdate chain is missing .then(done)')
+    }
+    shift()
+  })
+
+  const chainer = {
+    then: nextCb => {
+      queue.push(nextCb)
+      return chainer
+    },
+    thenWaitFor: (wait) => {
+      if (typeof wait === 'number') {
+        wait = timeout(wait)
+      }
+      wait.wait = true
+      queue.push(wait)
+      return chainer
+    },
+    end: endFn => {
+      queue.push(endFn)
+      end = endFn
+    }
+  }
+
+  return chainer
+}
+
+function timeout (n) {
+  return next => setTimeout(next, n)
+}

test/unit/index.js

@@ -0,0 +1,16 @@
+// Polyfill fn.bind() for PhantomJS
+/* eslint-disable no-extend-native */
+Function.prototype.bind = require('function-bind')
+
+const helpersContext = require.context('./helpers', true)
+helpersContext.keys().forEach(helpersContext)
+
+// require all test files (files that ends with .spec.js)
+const testsContext = require.context('./specs', true, /\.spec$/)
+testsContext.keys().forEach(testsContext)
+
+// require all src files except main.js for coverage.
+// you can also change this to match only the subset of files that
+// you want coverage for.
+const srcContext = require.context('../../src', true, /^\.\/(?!main\.js$).+\.(js|vue)$/i)
+srcContext.keys().forEach(srcContext)

test/unit/karma.conf.js

@@ -0,0 +1,35 @@
+// This is a karma config file. For more details see
+//   http://karma-runner.github.io/0.13/config/configuration-file.html
+// we are also using it with karma-webpack
+//   https://github.com/webpack/karma-webpack
+
+var webpackConfig = require('../../build/webpack.test.conf')
+
+module.exports = function (config) {
+  config.set({
+    // to run in additional browsers:
+    // 1. install corresponding karma launcher
+    //    http://karma-runner.github.io/0.13/config/browsers.html
+    // 2. add it to the `browsers` array below.
+    browsers: ['PhantomJS'],
+    frameworks: ['mocha', 'sinon-chai'],
+    reporters: ['spec', 'coverage'],
+    files: [
+      './index.js'
+    ],
+    preprocessors: {
+      './index.js': ['webpack', 'sourcemap']
+    },
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true
+    },
+    coverageReporter: {
+      dir: './coverage',
+      reporters: [
+        { type: 'lcov', subdir: '.' },
+        { type: 'text-summary' }
+      ]
+    }
+  })
+}

test/unit/specs/Overview.spec.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import Overview from 'src/components/Dashboard/Views/Overview.vue'
+import Chartist from 'chartist'
+
+function getRenderedComponent (Component, propsData) {
+  Vue.mixin({
+    beforeCreate () {
+      this._Chartist = Chartist;
+    }
+  });
+  Object.defineProperty(Vue.prototype, '$Chartist', {
+    get () { return this.$root._Chartist }
+  })
+
+  return mount(Component, propsData)
+}
+
+describe('Overview.vue', () => {
+  it('should contain 4 stats cards and 1 charts card', () => {
+    var vm = getRenderedComponent(Overview);
+    var statsCards = vm.$children.filter((child)=>child.$options.name==='stats-card').length;
+    var chartCards = vm.$children.filter((child)=>child.$options.name==='chart-card').length;
+    expect(statsCards).to.equal(4)
+    expect(chartCards).to.equal(1)
+  })
+})

test/unit/specs/fgInput.spec.js

@@ -0,0 +1,42 @@
+import Vue from 'vue'
+import fgInput from 'components/UIComponents/Inputs/formGroupInput.vue'
+
+
+function getRenderedComponent(Component) {
+  var vm = new Vue({
+    template: `<div><fg-input v-model='msg'></fg-input></div>`,
+    components: {
+      'fg-input': Component
+    },
+    data: {
+      msg: 'hello',
+    }
+  }).$mount()
+  return vm;
+}
+
+describe('formGroupInput.vue', () => {
+
+  it('should work with v-model', done => {
+    var vm = getRenderedComponent(fgInput);
+    const input = vm.$el.querySelector('input')
+    expect(input.value).to.equal('hello')
+
+    //change input value
+    input.value = 'world'
+    triggerEvent(input, 'input')
+    waitForUpdate(() => {
+      expect(vm.msg).to.equal('world')
+    }).end(done)
+  })
+
+  it('should accept input attributes', () => {
+    const vm = mount(fgInput, {type: 'password', name: 'password', placeholder: 'User password'});
+    const input = vm.$el.querySelector('input')
+
+    expect(input.type).to.equal('password')
+    expect(input.name).to.equal('password')
+    expect(input.placeholder).to.equal('User password')
+  })
+
+})

test/unit/specs/paper-table.spec.js

@@ -0,0 +1,57 @@
+import Vue from 'vue'
+import PaperTable from 'src/components/UIComponents/PaperTable.vue'
+
+const tableData = [{
+  id: 1,
+  name: "Dakota Rice",
+  salary: "$36.738",
+  country: "Niger",
+  city: "Oud-Turnhout"
+},
+  {
+    id: 2,
+    name: "Minerva Hooper",
+    salary: "$23,789",
+    country: "Curaçao",
+    city: "	Sinaai-Waas"
+  },
+  {
+    id: 3,
+    name: "Sage Rodriguez",
+    salary: "$56,142",
+    country: "Netherlands",
+    city: "Baileux"
+  },
+  {
+    id: 4,
+    name: "Philip Chaney",
+    salary: "$38,735",
+    country: "Korea, South",
+    city: "Overland Park"
+  },
+  {
+    id: 5,
+    name: "Doris Greene",
+    salary: "$63,542",
+    country: "Malawi",
+    city: "Feldkirchen in Kärnten"
+  }];
+
+describe("paper table",()=>{
+  it('should render only specified columns',()=>{
+    const columns = ['id', 'name'];
+    const vm = mount(PaperTable,{data:tableData,columns:columns})
+    let headerRows = vm.$el.querySelectorAll('th');
+    expect(headerRows.length).to.equal(columns.length);
+    expect(headerRows[0].innerHTML).to.equal(columns[0])
+    expect(headerRows[1].innerHTML).to.equal(columns[1])
+  })
+
+  it('should render specified data',()=>{
+    const columns = ['id', 'name'];
+    const vm = mount(PaperTable,{data:tableData,columns:columns})
+    let tableRows = vm.$el.querySelectorAll('tr');
+    expect(tableRows.length).to.equal(tableData.length)
+    expect(tableRows[0].innerHTML).to.equal(`<td>${tableData[0].id}</td><td>${tableData[0].name}</td>`)
+  })
+})