first commit

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    ["es2015", { "modules": false }],
+    "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

.eslintignore

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

.eslintrc.js

@@ -0,0 +1,29 @@
+// 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,
+
+    'no-undef': 0
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+test/unit/coverage
+test/e2e/reports
+selenium-debug.log

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 developerjin
+
+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,199 @@
+<p align = "center">
+<img src="https://github.com/devjin0617/vue2-admin-lte/blob/master/vue2-admin-lte-logo.png?raw=true">
+<br>
+<img src="https://img.shields.io/badge/AdminLTE-2.3.11-blue.svg"> <img src="https://img.shields.io/badge/jquery-3.1.1-lightgrey.svg"> <img src="https://img.shields.io/badge/bootstrap-3.3.7-blue.svg"> <img src="https://img.shields.io/badge/vue-2.2.1-brightgreen.svg"> <img src="https://img.shields.io/badge/vuex-2.2.1-brightgreen.svg"> <img src="https://img.shields.io/badge/vue--router-2.3.0-green.svg">
+
+
+
+<br>
+<img src="https://img.shields.io/badge/npm-0.3.0-blue.svg">
+<a href="https://gitter.im/devjin0617/vue2-admin-lte?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge" target="_blank">
+  <img src="https://badges.gitter.im/devjin0617/vue2-admin-lte.svg">
+</a>
+</p>
+
+# vue2-admin-lte
+
+> AdminLTE of Admin control panel template Based on Vuejs 2.x Front-end Framework.
+
+![](https://github.com/devjin0617/vue2-admin-lte/blob/master/capture.png?raw=true)
+
+## Demo Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080 (mac or linux)
+npm run dev
+
+# serve with hot reload at localhost:8080 (only windows)
+node build/dev-server.js
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+
+# run unit tests: coming soon
+# npm run unit
+
+# run e2e tests: coming soon
+# npm run e2e
+
+# run all tests: comping soon
+# npm test
+```
+
+## How to use
+
+First, npm install
+
+```bash
+$ npm i --save vue2-admin-lte
+```
+
+append alias config in webpack
+
+```javascript
+module.exports = {
+  resolve: {
+    alias: {
+      'va': 'vue2-admin-lte/src'
+    }
+  }
+}
+```
+
+import css and javascript files
+
+```javascript
+// css files
+import 'va/lib/css'
+
+// js files
+import 'va/lib/script'
+```
+
+use the components in .vue
+
+```vue
+<template>
+  <va-button
+    name="Primary"
+    theme="primary"
+    size="btn-lg"
+    :isFlat="true"
+  ></va-button>
+</template>
+
+<script>
+import VAButton from 'va/components/VAButton.vue'
+export default {
+  name: 'Button',
+  components: {
+    'va-button': VAButton
+  }
+}
+</script>
+```
+
+## Example
+
+```vue
+<template>
+
+  <va-direct-chat
+    :talkList="talkList"
+    :badgeCount="3"
+    theme="primary"
+    title="Direct Chat"
+    placeholder="Type Messages ..."
+  ></va-direct-chat>
+
+</template>
+
+
+<script>
+import VADirectChat from '../path/to/components/VADirectChat.vue'
+
+export default {
+  name: 'App',
+  data () {
+    return {
+      talkList: [
+        {
+          name: 'Alexander Pierce',
+          date: new Date(),
+          profileImage: 'http://path/to/image',
+          message: `Is this template really for free? That's unbelievable`,
+          isMine: false
+        },
+        {
+          name: 'Sarah Bullock',
+          date: new Date(),
+          profileImage: 'http://path/to/image',
+          message: `You better believe it!`,
+          isMine: true
+        }
+    }
+  },
+  components: {
+    'va-direct-chat': VADirectChat
+  }
+}
+
+</script>
+```
+
+## how to start mock server
+
+```javascript
+node ./mock-server/index.js
+```
+
+## how to use Vuex
+
+```javascript
+// /vuex/store.js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import * as actions from './actions'
+import * as getters from './getters'
+import modules from './modules'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  actions,
+  getters,
+  modules,
+  strict: process.env.NODE_ENV !== 'production'
+})
+```
+
+
+## Contributing to Vue2 AdminLTE
+
+The following is a set of guidelines for contributing to `Vue2 AdminLTE`.
+
+### Submitting Issues
+
+You can create an issue [here](https://github.com/devjin0617/vue2-admin-lte/issues).
+
+If you can, please include:
+- The version, name of Browser you are using
+- The operating system you are using
+
+Other things that will help resolve your issue:
+- Screenshots or gif
+- dev tools or an alert
+- Perform a search to see if a similar issue has already been submitted
+
+
+### Submitting Pull Requests
+
+- Include screenshots and animated gif in your pull request whenever possible.
+- Use short, present tense commit messages.

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,74 @@
+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'],
+    modules: [
+      resolve('src'),
+      resolve('node_modules')
+    ],
+    alias: {
+      'vue$': 'vue/dist/vue.common.js',
+      'src': resolve('src'),
+      'assets': resolve('src/assets'),
+      'components': resolve('src/components'),
+      'admin-lte': resolve('node_modules/admin-lte')
+    }
+  },
+  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',
+        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]')
+        }
+      }
+    ]
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,41 @@
+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(),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jquery: 'jquery',
+      'window.jQuery': 'jquery',
+      jQuery: 'jquery'
+    })
+  ]
+})

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,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
+  }
+}

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

docs/index.html

@@ -0,0 +1,9 @@
+<html>
+<head></head>
+
+<body>
+  <div style="margin:20px;">
+    <h1>hello, vue2-admin-lte</h1>
+  </div>
+</body>
+</html>

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>vue-admin-lte</title>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
+  </head>
+  <body class="skin-blue sidebar-mini">
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

mock-server/index.js

@@ -0,0 +1,49 @@
+const faker = require('faker')
+
+let productId = 1
+class FakeProdcut {
+  constructor () {
+    this.id = productId++
+    let fc = faker.commerce
+    this.name = fc.productName()
+    this.color = fc.color()
+    this.department = fc.department()
+    this.price = fc.price()
+    this.adjective = fc.productAdjective()
+    this.material = fc.productMaterial()
+    this.product = fc.product()
+  }
+
+  serialize () {
+    return {
+      id: this.id,
+      name: this.name,
+      color: this.color,
+      department: this.department,
+      price: this.price,
+      adjective: this.adjective,
+      material: this.material,
+      product: this.product
+    }
+  }
+}
+
+module.exports = function () {
+  var data = { products: [] }
+  // Create 1000 Product
+  data.products = generateFakeObject(FakeProdcut, 100)
+  return data
+}
+
+function generateFakeObject (TARGETCLASS = '', count = 10) {
+  if (typeof TARGETCLASS !== 'function') {
+    console.error('클래스가 아님')
+    return []
+  }
+  let result = []
+  for (var i = 0; i < count; i++) {
+    const fp = new TARGETCLASS()
+    result.push(fp.serialize())
+  }
+  return result
+}

package.json

@@ -0,0 +1,122 @@
+{
+  "name": "vue2-admin-lte",
+  "version": "0.3.0",
+  "description": "adminLTE to vuejs v2.x converting project",
+  "author": "devjin0617 <devjin0617@gmail.com>",
+  "scripts": {
+    "mock": "./node_modules/.bin/json-server ./mock-server/index.js",
+    "dev-server": "node build/dev-server.js",
+    "dev": "npm-run-all --parallel mock dev-server",
+    "build": "node build/build.js",
+    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
+    "e2e": "node test/e2e/runner.js",
+    "test": "npm run unit && npm run e2e",
+    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devjin0617/vue2-admin-lte"
+  },
+  "keywords": [
+    "admin-lte",
+    "vue2-admin-lte",
+    "vue-admin-lte",
+    "vuejs",
+    "vue.js",
+    "jquery",
+    "bootstrap",
+    "vue-jquery",
+    "vue-bootstrap",
+    "front-end"
+  ],
+  "bugs": {
+    "url": "https://github.com/devjin0617/vue2-admin-lte/issues"
+  },
+  "hompage": "https://github.com/devjin0617/vue2-admin-lte#readme",
+  "dependencies": {
+    "admin-lte": "^2.3.11",
+    "axios": "^0.15.3",
+    "bootstrap": "^3.3.7",
+    "bootstrap3-wysihtml5-bower": "^0.3.3",
+    "chart.js": "^2.5.0",
+    "expose-loader": "^0.7.3",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.1.1",
+    "jquery-slimscroll": "^1.3.8",
+    "jquery-ui": "^1.12.1",
+    "vue": "^2.2.1",
+    "vue-router": "^2.3.0",
+    "vuex": "^2.2.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.2",
+    "axios-mock-adapter": "^1.7.1",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-istanbul": "^3.1.2",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-polyfill": "^6.23.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.14.1",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-friendly-formatter": "^2.0.7",
+    "eslint-loader": "^1.6.1",
+    "eslint-plugin-html": "^2.0.0",
+    "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-rc.2",
+    "faker": "^4.1.0",
+    "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",
+    "json-server": "^0.9.5",
+    "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",
+    "npm-run-all": "^4.0.2",
+    "opn": "^4.0.2",
+    "ora": "^1.1.0",
+    "phantomjs-prebuilt": "^2.1.14",
+    "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.1.10",
+    "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,35 @@
+<template>
+  <div id="app">
+    <div class="wrapper">
+      <NaviBar></NaviBar>
+      <Slider></Slider>
+      <ContentWrap></ContentWrap>
+      <Modal></Modal>
+    </div>
+  </div>
+</template>
+
+<script>
+import NaviBar from 'NaviBar.vue'
+import Slider from 'Slider.vue'
+import ContentWrap from 'ContentWrap.vue'
+import Modal from './components/Modal.vue'
+import store from './vuex/store.js'
+
+export default {
+  name: 'app',
+  created () {
+  },
+  components: {
+    NaviBar,
+    Slider,
+    ContentWrap,
+    Modal
+  },
+  store
+}
+</script>
+
+<style>
+
+</style>

src/ContentWrap.vue

@@ -0,0 +1,42 @@
+<template>
+  <!-- Content Wrapper. Contains page content -->
+  <div id="content-wrap" class="content-wrapper">
+    <!-- Content Header (Page header) -->
+    <section class="content-header">
+      <h1>
+        Dashboard
+        <small>Version 2.0</small>
+      </h1>
+      <ol class="breadcrumb">
+        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+        <li class="active">Dashboard</li>
+      </ol>
+    </section>
+
+    <section class="content">
+      <transition name="page" mode="out-in">
+        <router-view></router-view>
+      </transition>
+    </section>
+    <!-- /.content -->
+  </div>
+  <!-- /.content-wrapper -->
+</template>
+
+<script>
+export default {
+  name: 'content-wrap',
+  created () {
+
+  }
+}
+</script>
+
+<style>
+.page-enter-active, .page-leave-active {
+  transition: opacity 0.5s, transform 0.5s;
+}
+.page-enter, .page-leave-to {
+  opacity: 0;
+}
+</style>

src/NaviBar.vue

@@ -0,0 +1,280 @@
+<template>
+  <header class="main-header">
+    <!-- Logo -->
+    <a href="index2.html" class="logo">
+      <!-- mini logo for sidebar mini 50x50 pixels -->
+      <span class="logo-mini"><b>A</b>LT</span>
+      <!-- logo for regular state and mobile devices -->
+      <span class="logo-lg"><b>Admin</b>LTE</span>
+    </a>
+
+    <!-- Header Navbar: style can be found in header.less -->
+    <nav class="navbar navbar-static-top">
+      <!-- Sidebar toggle button-->
+      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+        <span class="sr-only">Toggle navigation</span>
+      </a>
+      <!-- Navbar Right Menu -->
+      <div class="navbar-custom-menu">
+        <ul class="nav navbar-nav">
+          <!-- Messages: style can be found in dropdown.less-->
+          <li class="dropdown messages-menu">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+              <i class="fa fa-envelope-o"></i>
+              <span class="label label-success">{{ unreadMessagesCount }}</span>
+            </a>
+            <ul class="dropdown-menu">
+              <li class="header">You have {{ unreadMessagesCount }} messages</li>
+              <li>
+                <!-- inner menu: contains the actual data -->
+                <ul class="menu">
+                  <li><!-- start message -->
+                    <a href="#">
+                      <div class="pull-left">
+                        <img src="~admin-lte/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+                      </div>
+                      <h4>
+                        Support Team
+                        <small><i class="fa fa-clock-o"></i> 5 mins</small>
+                      </h4>
+                      <p>Why not buy a new awesome theme?</p>
+                    </a>
+                  </li>
+                  <!-- end message -->
+                  <li>
+                    <a href="#">
+                      <div class="pull-left">
+                        <img src="~admin-lte/dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
+                      </div>
+                      <h4>
+                        AdminLTE Design Team
+                        <small><i class="fa fa-clock-o"></i> 2 hours</small>
+                      </h4>
+                      <p>Why not buy a new awesome theme?</p>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <div class="pull-left">
+                        <img src="~admin-lte/dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
+                      </div>
+                      <h4>
+                        Developers
+                        <small><i class="fa fa-clock-o"></i> Today</small>
+                      </h4>
+                      <p>Why not buy a new awesome theme?</p>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <div class="pull-left">
+                        <img src="~admin-lte/dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
+                      </div>
+                      <h4>
+                        Sales Department
+                        <small><i class="fa fa-clock-o"></i> Yesterday</small>
+                      </h4>
+                      <p>Why not buy a new awesome theme?</p>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <div class="pull-left">
+                        <img src="~admin-lte/dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
+                      </div>
+                      <h4>
+                        Reviewers
+                        <small><i class="fa fa-clock-o"></i> 2 days</small>
+                      </h4>
+                      <p>Why not buy a new awesome theme?</p>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="footer"><a href="#">See All Messages</a></li>
+            </ul>
+          </li>
+          <!-- Notifications: style can be found in dropdown.less -->
+          <li class="dropdown notifications-menu">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+              <i class="fa fa-bell-o"></i>
+              <span class="label label-warning">{{ unreadNotificationsCount }}</span>
+            </a>
+            <ul class="dropdown-menu">
+              <li class="header">You have {{ unreadNotificationsCount }} notifications</li>
+              <li>
+                <!-- inner menu: contains the actual data -->
+                <ul class="menu">
+                  <li>
+                    <a href="#">
+                      <i class="fa fa-users text-aqua"></i> 5 new members joined today
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
+                      page and may cause design problems
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <i class="fa fa-users text-red"></i> 5 new members joined
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <i class="fa fa-shopping-cart text-green"></i> 25 sales made
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <i class="fa fa-user text-red"></i> You changed your username
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="footer"><a href="#">View all</a></li>
+            </ul>
+          </li>
+          <!-- Tasks: style can be found in dropdown.less -->
+          <li class="dropdown tasks-menu">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+              <i class="fa fa-flag-o"></i>
+              <span class="label label-danger">{{ remainTasksCount }}</span>
+            </a>
+            <ul class="dropdown-menu">
+              <li class="header">You have {{ remainTasksCount }} tasks</li>
+              <li>
+                <!-- inner menu: contains the actual data -->
+                <ul class="menu">
+                  <li><!-- Task item -->
+                    <a href="#">
+                      <h3>
+                        Design some buttons
+                        <small class="pull-right">20%</small>
+                      </h3>
+                      <div class="progress xs">
+                        <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                          <span class="sr-only">20% Complete</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <!-- end task item -->
+                  <li><!-- Task item -->
+                    <a href="#">
+                      <h3>
+                        Create a nice theme
+                        <small class="pull-right">40%</small>
+                      </h3>
+                      <div class="progress xs">
+                        <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                          <span class="sr-only">40% Complete</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <!-- end task item -->
+                  <li><!-- Task item -->
+                    <a href="#">
+                      <h3>
+                        Some task I need to do
+                        <small class="pull-right">60%</small>
+                      </h3>
+                      <div class="progress xs">
+                        <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                          <span class="sr-only">60% Complete</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <!-- end task item -->
+                  <li><!-- Task item -->
+                    <a href="#">
+                      <h3>
+                        Make beautiful transitions
+                        <small class="pull-right">80%</small>
+                      </h3>
+                      <div class="progress xs">
+                        <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                          <span class="sr-only">80% Complete</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <!-- end task item -->
+                </ul>
+              </li>
+              <li class="footer">
+                <a href="#">View all tasks</a>
+              </li>
+            </ul>
+          </li>
+          <!-- User Account: style can be found in dropdown.less -->
+          <li class="dropdown user user-menu">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+              <img src="~admin-lte/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
+              <span class="hidden-xs">{{ currentUser.name }}</span>
+            </a>
+            <ul class="dropdown-menu">
+              <!-- User image -->
+              <li class="user-header">
+                <img src="~admin-lte/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+
+                <p>
+                  {{ currentUser.name }} - {{ currentUser.position }}
+                  <small>{{ currentUser.createdAt }}</small>
+                </p>
+              </li>
+              <!-- Menu Body -->
+              <li class="user-body">
+                <row>
+                  <div class="col-xs-4 text-center">
+                    <a href="#">Followers</a>
+                  </div>
+                  <div class="col-xs-4 text-center">
+                    <a href="#">Sales</a>
+                  </div>
+                  <div class="col-xs-4 text-center">
+                    <a href="#">Friends</a>
+                  </div>
+                </row>
+                <!-- /.row -->
+              </li>
+              <!-- Menu Footer-->
+              <li class="user-footer">
+                <div class="pull-left">
+                  <a href="#" class="btn btn-default btn-flat">Profile</a>
+                </div>
+                <div class="pull-right">
+                  <a href="#" class="btn btn-default btn-flat">Sign out</a>
+                </div>
+              </li>
+            </ul>
+          </li>
+          <!-- Control Sidebar Toggle Button -->
+          <li>
+            <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'NaviBar',
+  computed: {
+    ...mapGetters([
+      'unreadMessagesCount',
+      'unreadNotificationsCount',
+      'remainTasksCount',
+      'currentUser'
+    ])
+  }
+}
+
+</script>

src/Slider.vue

@@ -0,0 +1,239 @@
+<template>
+  <aside id="slider" class="main-sidebar">
+    <!-- sidebar: style can be found in sidebar.less -->
+    <section class="sidebar">
+      <!-- Sidebar user panel -->
+      <div class="user-panel">
+        <div class="pull-left image">
+          <img src="~admin-lte/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+        </div>
+        <div class="pull-left info">
+          <p>{{ currentUser.name }}</p>
+          <a href="#"><i class="fa fa-circle" :style="`color:${currentUser.state.color}`"></i> {{ currentUser.state.name }}</a>
+        </div>
+      </div>
+      <!-- search form -->
+      <form action="#" method="get" class="sidebar-form">
+        <div class="input-group">
+          <input type="text" name="q" class="form-control" placeholder="Search...">
+              <span class="input-group-btn">
+                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
+                </button>
+              </span>
+        </div>
+      </form>
+      <!-- /.search form -->
+      <!-- sidebar menu: : style can be found in sidebar.less -->
+      <ul class="sidebar-menu">
+        <li class="header">MAIN NAVIGATION</li>
+        <li class="active treeview">
+          <a href="#">
+            <i class="fa fa-dashboard"></i> <span>Dashboard</span>
+            <span class="pull-right-container">
+              <i class="fa fa-angle-left pull-right"></i>
+            </span>
+          </a>
+          <ul class="treeview-menu">
+            <router-link tag="li" :to="{ name: 'Hello'}" exact><a href=""><i class="fa fa-circle-o"></i>헬로화면</a></router-link>
+            <router-link tag="li" :to="{ name: 'Sample' }"><a href=""><i class="fa fa-circle-o"></i>샘플화면</a></router-link>
+            <router-link tag="li" :to="{ name: 'DashboardV1' }"><a href=""><i class="fa fa-circle-o"></i>Dashboard v1</a></router-link>
+            <router-link tag="li" :to="{ name: 'DashboardV2' }"><a href=""><i class="fa fa-circle-o"></i>Dashboard v2</a></router-link>
+            <router-link tag="li" :to="{ name: 'InfoBoxExample' }"><a href=""><i class="fa fa-circle-o"></i>InfoBox</a></router-link>
+            <router-link tag="li" :to="{ name: 'ChartExample' }"><a href=""><i class="fa fa-circle-o"></i>Chart.js</a></router-link>
+            <router-link tag="li" :to="{ name: 'AlertExample' }"><a href=""><i class="fa fa-circle-o"></i>Alert</a></router-link>
+            <router-link tag="li" :to="{ name: 'ModalExample' }"><a href=""><i class="fa fa-circle-o"></i>Modal</a></router-link>
+            <router-link tag="li" :to="{ name: 'APIExample' }"><a href=""><i class="fa fa-circle-o"></i>APIExample</a></router-link>
+
+          </ul>
+        </li>
+        <li class="treeview">
+          <a href="#">
+            <i class="fa fa-files-o"></i>
+            <span>Layout Options</span>
+            <span class="pull-right-container">
+              <span class="label label-primary pull-right">4</span>
+            </span>
+          </a>
+          <ul class="treeview-menu">
+            <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
+            <li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
+            <li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
+            <li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
+          </ul>
+        </li>
+        <router-link tag="li" :to="{ name: 'WidgetsExample' }">
+          <a href="pages/widgets.html">
+            <i class="fa fa-th"></i> <span>Widgets</span>
+            <span class="pull-right-container">
+              <small class="label pull-right bg-green">new</small>
+            </span>
+          </a>
+        </router-link>
+        <li class="treeview">
+          <a href="#">
+            <i class="fa fa-pie-chart"></i>
+            <span>Charts</span>
+            <span class="pull-right-container">
+              <i class="fa fa-angle-left pull-right"></i>
+            </span>
+          </a>
+          <ul class="treeview-menu">
+            <li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
+            <li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
+            <li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
+            <li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
+          </ul>
+        </li>
+        <li class="treeview">
+          <a href="#">
+            <i class="fa fa-laptop"></i>
+            <span>UI Elements</span>
+            <span class="pull-right-container">
+              <i class="fa fa-angle-left pull-right"></i>
+            </span>
+          </a>
+          <ul class="treeview-menu">
+            <router-link tag="li" :to="{ name: 'General' }">
+              <a href=""><i class="fa fa-circle-o"></i> General</a>
+            </router-link>
+            <router-link tag="li" :to="{ name: 'Icons' }">
+              <a href=""><i class="fa fa-circle-o"></i> Icons</a>
+            </router-link>
+            <router-link tag="li" :to="{ name: 'Buttons' }">
+              <a href=""><i class="fa fa-circle-o"></i> Buttons</a>
+            </router-link>
+            <router-link tag="li" :to="{ name: 'Sliders' }">
+              <a href=""><i class="fa fa-circle-o"></i> Sliders</a>
+            </router-link>
+            <router-link tag="li" :to="{ name: 'Timeline' }">
+              <a href=""><i class="fa fa-circle-o"></i> Timeline</a>
+            </router-link>
+            <router-link tag="li" :to="{ name: 'Modals' }">
+              <a href=""><i class="fa fa-circle-o"></i> Modals</a>
+            </router-link>
+          </ul>
+        </li>
+        <li class="treeview">
+          <a href="#">
+            <i class="fa fa-edit"></i> <span>Forms</span>
+            <span class="pull-right-container">
+              <i class="fa fa-angle-left pull-right"></i>
+            </span>
+          </a>
+          <ul class="treeview-menu">
+            <router-link tag="li" :to="{ name: 'GeneralElements' }">
+              <a href=""><i class="fa fa-circle-o"></i> General Elements</a>
+            </router-link>
+            <li><a href="pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
+            <li><a href="pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
+          </ul>
+        </li>
+        <li class="treeview">
+          <a href="#">
+            <i class="fa fa-table"></i> <span>Tables</span>
+            <span class="pull-right-container">
+              <i class="fa fa-angle-left pull-right"></i>
+            </span>
+          </a>
+          <ul class="treeview-menu">
+            <li><a href="pages/tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
+            <li><a href="pages/tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="pages/calendar.html">
+            <i class="fa fa-calendar"></i> <span>Calendar</span>
+            <span class="pull-right-container">
+              <small class="label pull-right bg-red">3</small>
+              <small class="label pull-right bg-blue">17</small>
+            </span>
+          </a>
+        </li>
+        <li>
+          <a href="pages/mailbox/mailbox.html">
+            <i class="fa fa-envelope"></i> <span>Mailbox</span>
+            <span class="pull-right-container">
+              <small class="label pull-right bg-yellow">12</small>
+              <small class="label pull-right bg-green">16</small>
+              <small class="label pull-right bg-red">5</small>
+            </span>
+          </a>
+        </li>
+        <li class="treeview">
+          <a href="#">
+            <i class="fa fa-folder"></i> <span>Examples</span>
+            <span class="pull-right-container">
+              <i class="fa fa-angle-left pull-right"></i>
+            </span>
+          </a>
+          <ul class="treeview-menu">
+            <li><a href="pages/examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
+            <li><a href="pages/examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
+            <li><a href="pages/examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
+            <li><a href="pages/examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
+            <li><a href="pages/examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
+            <li><a href="pages/examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
+            <li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
+            <li><a href="pages/examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
+            <li><a href="pages/examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
+          </ul>
+        </li>
+        <li class="treeview">
+          <a href="#">
+            <i class="fa fa-share"></i> <span>Multilevel</span>
+            <span class="pull-right-container">
+              <i class="fa fa-angle-left pull-right"></i>
+            </span>
+          </a>
+          <ul class="treeview-menu">
+            <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
+            <li>
+              <a href="#"><i class="fa fa-circle-o"></i> Level One
+                <span class="pull-right-container">
+                  <i class="fa fa-angle-left pull-right"></i>
+                </span>
+              </a>
+              <ul class="treeview-menu">
+                <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
+                <li>
+                  <a href="#"><i class="fa fa-circle-o"></i> Level Two
+                    <span class="pull-right-container">
+                      <i class="fa fa-angle-left pull-right"></i>
+                    </span>
+                  </a>
+                  <ul class="treeview-menu">
+                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
+                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+            <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
+          </ul>
+        </li>
+        <li><a href="documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
+        <li class="header">LABELS</li>
+        <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+        <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+        <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
+      </ul>
+    </section>
+    <!-- /.sidebar -->
+  </aside>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'slider',
+  created () {
+
+  },
+  computed: {
+    ...mapGetters([
+      'currentUser'
+    ])
+  }
+}
+</script>

src/components/Hello.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="hello">
+    <img class="logo" src="../assets/logo.png">
+    <button
+      id="myButton"
+      class="btn bg-maroon btn-flat margin"
+      @click="clickBtn"
+      :disabled="loading"
+      ><template v-if="loading">{{msgBye}}</template><template v-else>{{msgHello}}</template></button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'hello',
+  data () {
+    return {
+      msgHello: 'Hello',
+      msgBye: 'Bye',
+      loading: false
+    }
+  },
+  methods: {
+    clickBtn () {
+      this.loading = !this.loading
+      setTimeout(() => {
+        this.loading = !this.loading
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>

src/components/Modal.vue

@@ -0,0 +1,89 @@
+<template lang="html">
+  <!-- Modal -->
+  <div class="modal fade" id="bsModal" tabindex="-1" role="dialog" aria-labelledby="bsModalLabel" data-toggle="modal" data-backdrop="static" data-keyboard="false">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title" id="bsModalLabel">{{title}}</h4>
+        </div>
+        <div class="modal-body">
+          {{description}}
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" @click="cancel">{{cancelText}}</button>
+          <button type="button" class="btn btn-primary" @click="confirm">{{confirmText}}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// const ModalTypes = ['modal-primary', 'modal-success', 'modal-info', 'modal-warning', 'modal-danger']
+export default {
+  mounted () {
+    this.$bus.$on('modal-open', (args) => {
+      // TODO: args가 올바른지 확인해야함
+      this.type = args.type
+      this.title = args.title
+      this.description = args.description
+      this.confirmText = args.confirmText || '저장 후 닫기'
+      this.cancelText = args.cancelText || '닫기'
+      this.confirmBeforeHook = args.confirmBefore
+      this.confirmAfterHook = args.confirmAfter
+      this.cancelBeforeHook = args.cancelBefore
+      this.cancelAfterHook = args.cancelAfter
+
+      $('#bsModal').modal('show')
+    })
+    $('#bsModal').on('show.bs.modal', (e) => {
+    })
+
+    $('#bsModal').on('hidden.bs.modal', (e) => {
+      this.confirmAfterHook()
+      this.cancelAfterHook()
+      this.resetProperties()
+    })
+  },
+  data () {
+    return {
+      type: '',
+      title: '',
+      description: '',
+      confirmText: '',
+      cancelText: '',
+      confirmBeforeHook: () => {},
+      confirmAfterHook: () => {},
+      cancelBeforeHook: () => {},
+      cancelAfterHook: () => {}
+    }
+  },
+  methods: {
+    confirm: function () {
+      this.confirmBeforeHook()
+      $('#bsModal').modal('hide')
+      this.cancelAfterHook = () => {}
+    },
+    cancel: function () {
+      this.cancelBeforeHook()
+      $('#bsModal').modal('hide')
+      this.confirmAfterHook = () => {}
+    },
+    resetProperties: function () {
+      this.type = ''
+      this.title = ''
+      this.description = ''
+      this.confirmText = ''
+      this.cancelText = ''
+      this.confirmBeforeHook = () => {}
+      this.confirmAfterHook = () => {}
+      this.cancelBeforeHook = () => {}
+      this.cancelAfterHook = () => {}
+    }
+  }
+}
+</script>
+
+<style lang="css">
+</style>

src/components/Sample.vue

@@ -0,0 +1,826 @@
+<template>
+  <!-- Info boxes -->
+  <section class="content">
+    <row>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <div class="info-box">
+          <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
+
+          <div class="info-box-content">
+            <span class="info-box-text">CPU Traffic</span>
+            <span class="info-box-number">90<small>%</small></span>
+          </div>
+          <!-- /.info-box-content -->
+        </div>
+        <!-- /.info-box -->
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <div class="info-box">
+          <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
+
+          <div class="info-box-content">
+            <span class="info-box-text">Likes</span>
+            <span class="info-box-number">41,410</span>
+          </div>
+          <!-- /.info-box-content -->
+        </div>
+        <!-- /.info-box -->
+      </div>
+      <!-- /.col -->
+
+      <!-- fix for small devices only -->
+      <div class="clearfix visible-sm-block"></div>
+
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <div class="info-box">
+          <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>
+
+          <div class="info-box-content">
+            <span class="info-box-text">Sales</span>
+            <span class="info-box-number">760</span>
+          </div>
+          <!-- /.info-box-content -->
+        </div>
+        <!-- /.info-box -->
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <div class="info-box">
+          <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
+
+          <div class="info-box-content">
+            <span class="info-box-text">New Members</span>
+            <span class="info-box-number">2,000</span>
+          </div>
+          <!-- /.info-box-content -->
+        </div>
+        <!-- /.info-box -->
+      </div>
+      <!-- /.col -->
+    </row>
+    <!-- /.row -->
+
+    <row>
+      <div class="col-md-12">
+        <div class="box">
+          <div class="box-header with-border">
+            <h3 class="box-title">Monthly Recap Report</h3>
+
+            <div class="box-tools pull-right">
+              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+              </button>
+              <div class="btn-group">
+                <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
+                  <i class="fa fa-wrench"></i></button>
+                <ul class="dropdown-menu" role="menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">Separated link</a></li>
+                </ul>
+              </div>
+              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+            </div>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body">
+            <row>
+              <div class="col-md-8">
+                <p class="text-center">
+                  <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
+                </p>
+
+                <div class="chart">
+                  <!-- Sales Chart Canvas -->
+                  <canvas id="salesChart" style="height: 180px;"></canvas>
+                </div>
+                <!-- /.chart-responsive -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-4">
+                <p class="text-center">
+                  <strong>Goal Completion</strong>
+                </p>
+
+                <div class="progress-group">
+                  <span class="progress-text">Add Products to Cart</span>
+                  <span class="progress-number"><b>160</b>/200</span>
+
+                  <div class="progress sm">
+                    <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
+                  </div>
+                </div>
+                <!-- /.progress-group -->
+                <div class="progress-group">
+                  <span class="progress-text">Complete Purchase</span>
+                  <span class="progress-number"><b>310</b>/400</span>
+
+                  <div class="progress sm">
+                    <div class="progress-bar progress-bar-red" style="width: 80%"></div>
+                  </div>
+                </div>
+                <!-- /.progress-group -->
+                <div class="progress-group">
+                  <span class="progress-text">Visit Premium Page</span>
+                  <span class="progress-number"><b>480</b>/800</span>
+
+                  <div class="progress sm">
+                    <div class="progress-bar progress-bar-green" style="width: 80%"></div>
+                  </div>
+                </div>
+                <!-- /.progress-group -->
+                <div class="progress-group">
+                  <span class="progress-text">Send Inquiries</span>
+                  <span class="progress-number"><b>250</b>/500</span>
+
+                  <div class="progress sm">
+                    <div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
+                  </div>
+                </div>
+                <!-- /.progress-group -->
+              </div>
+              <!-- /.col -->
+            </row>
+            <!-- /.row -->
+          </div>
+          <!-- ./box-body -->
+          <div class="box-footer">
+            <row>
+              <div class="col-sm-3 col-xs-6">
+                <div class="description-block border-right">
+                  <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
+                  <h5 class="description-header">$35,210.43</h5>
+                  <span class="description-text">TOTAL REVENUE</span>
+                </div>
+                <!-- /.description-block -->
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-3 col-xs-6">
+                <div class="description-block border-right">
+                  <span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>
+                  <h5 class="description-header">$10,390.90</h5>
+                  <span class="description-text">TOTAL COST</span>
+                </div>
+                <!-- /.description-block -->
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-3 col-xs-6">
+                <div class="description-block border-right">
+                  <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
+                  <h5 class="description-header">$24,813.53</h5>
+                  <span class="description-text">TOTAL PROFIT</span>
+                </div>
+                <!-- /.description-block -->
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-3 col-xs-6">
+                <div class="description-block">
+                  <span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
+                  <h5 class="description-header">1200</h5>
+                  <span class="description-text">GOAL COMPLETIONS</span>
+                </div>
+                <!-- /.description-block -->
+              </div>
+            </row>
+            <!-- /.row -->
+          </div>
+          <!-- /.box-footer -->
+        </div>
+        <!-- /.box -->
+      </div>
+      <!-- /.col -->
+    </row>
+    <!-- /.row -->
+
+    <!-- Main row -->
+    <row>
+      <!-- Left col -->
+      <div class="col-md-8">
+        <!-- MAP & BOX PANE -->
+        <div class="box box-success">
+          <div class="box-header with-border">
+            <h3 class="box-title">Visitors Report</h3>
+
+            <div class="box-tools pull-right">
+              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+              </button>
+              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+            </div>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body no-padding">
+            <row>
+              <div class="col-md-9 col-sm-8">
+                <div class="pad">
+                  <!-- Map will be created here -->
+                  <div id="world-map-markers" style="height: 325px;"></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-md-3 col-sm-4">
+                <div class="pad box-pane-right bg-green" style="min-height: 280px">
+                  <div class="description-block margin-bottom">
+                    <div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
+                    <h5 class="description-header">8390</h5>
+                    <span class="description-text">Visits</span>
+                  </div>
+                  <!-- /.description-block -->
+                  <div class="description-block margin-bottom">
+                    <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
+                    <h5 class="description-header">30%</h5>
+                    <span class="description-text">Referrals</span>
+                  </div>
+                  <!-- /.description-block -->
+                  <div class="description-block">
+                    <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
+                    <h5 class="description-header">70%</h5>
+                    <span class="description-text">Organic</span>
+                  </div>
+                  <!-- /.description-block -->
+                </div>
+              </div>
+              <!-- /.col -->
+            </row>
+            <!-- /.row -->
+          </div>
+          <!-- /.box-body -->
+        </div>
+        <!-- /.box -->
+        <row>
+          <div class="col-md-6">
+            <!-- DIRECT CHAT -->
+            <div class="box box-warning direct-chat direct-chat-warning">
+              <div class="box-header with-border">
+                <h3 class="box-title">Direct Chat</h3>
+
+                <div class="box-tools pull-right">
+                  <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
+                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+                  </button>
+                  <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+                    <i class="fa fa-comments"></i></button>
+                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
+                  </button>
+                </div>
+              </div>
+              <!-- /.box-header -->
+              <div class="box-body">
+                <!-- Conversations are loaded here -->
+                <div class="direct-chat-messages">
+                  <!-- Message. Default to the left -->
+                  <div class="direct-chat-msg">
+                    <div class="direct-chat-info clearfix">
+                      <span class="direct-chat-name pull-left">Alexander Pierce</span>
+                      <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
+                    </div>
+                    <!-- /.direct-chat-info -->
+                    <img class="direct-chat-img" src="~admin-lte/dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
+                    <div class="direct-chat-text">
+                      Is this template really for free? That's unbelievable!
+                    </div>
+                    <!-- /.direct-chat-text -->
+                  </div>
+                  <!-- /.direct-chat-msg -->
+
+                  <!-- Message to the right -->
+                  <div class="direct-chat-msg right">
+                    <div class="direct-chat-info clearfix">
+                      <span class="direct-chat-name pull-right">Sarah Bullock</span>
+                      <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
+                    </div>
+                    <!-- /.direct-chat-info -->
+                    <img class="direct-chat-img" src="~admin-lte/dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
+                    <div class="direct-chat-text">
+                      You better believe it!
+                    </div>
+                    <!-- /.direct-chat-text -->
+                  </div>
+                  <!-- /.direct-chat-msg -->
+
+                  <!-- Message. Default to the left -->
+                  <div class="direct-chat-msg">
+                    <div class="direct-chat-info clearfix">
+                      <span class="direct-chat-name pull-left">Alexander Pierce</span>
+                      <span class="direct-chat-timestamp pull-right">23 Jan 5:37 pm</span>
+                    </div>
+                    <!-- /.direct-chat-info -->
+                    <img class="direct-chat-img" src="~admin-lte/dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
+                    <div class="direct-chat-text">
+                      Working with AdminLTE on a great new app! Wanna join?
+                    </div>
+                    <!-- /.direct-chat-text -->
+                  </div>
+                  <!-- /.direct-chat-msg -->
+
+                  <!-- Message to the right -->
+                  <div class="direct-chat-msg right">
+                    <div class="direct-chat-info clearfix">
+                      <span class="direct-chat-name pull-right">Sarah Bullock</span>
+                      <span class="direct-chat-timestamp pull-left">23 Jan 6:10 pm</span>
+                    </div>
+                    <!-- /.direct-chat-info -->
+                    <img class="direct-chat-img" src="~admin-lte/dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
+                    <div class="direct-chat-text">
+                      I would love to.
+                    </div>
+                    <!-- /.direct-chat-text -->
+                  </div>
+                  <!-- /.direct-chat-msg -->
+
+                </div>
+                <!--/.direct-chat-messages-->
+
+                <!-- Contacts are loaded here -->
+                <div class="direct-chat-contacts">
+                  <ul class="contacts-list">
+                    <li>
+                      <a href="#">
+                        <img class="contacts-list-img" src="~admin-lte/dist/img/user1-128x128.jpg" alt="User Image">
+
+                        <div class="contacts-list-info">
+                              <span class="contacts-list-name">
+                                Count Dracula
+                                <small class="contacts-list-date pull-right">2/28/2015</small>
+                              </span>
+                          <span class="contacts-list-msg">How have you been? I was...</span>
+                        </div>
+                        <!-- /.contacts-list-info -->
+                      </a>
+                    </li>
+                    <!-- End Contact Item -->
+                    <li>
+                      <a href="#">
+                        <img class="contacts-list-img" src="~admin-lte/dist/img/user7-128x128.jpg" alt="User Image">
+
+                        <div class="contacts-list-info">
+                              <span class="contacts-list-name">
+                                Sarah Doe
+                                <small class="contacts-list-date pull-right">2/23/2015</small>
+                              </span>
+                          <span class="contacts-list-msg">I will be waiting for...</span>
+                        </div>
+                        <!-- /.contacts-list-info -->
+                      </a>
+                    </li>
+                    <!-- End Contact Item -->
+                    <li>
+                      <a href="#">
+                        <img class="contacts-list-img" src="~admin-lte/dist/img/user3-128x128.jpg" alt="User Image">
+
+                        <div class="contacts-list-info">
+                              <span class="contacts-list-name">
+                                Nadia Jolie
+                                <small class="contacts-list-date pull-right">2/20/2015</small>
+                              </span>
+                          <span class="contacts-list-msg">I'll call you back at...</span>
+                        </div>
+                        <!-- /.contacts-list-info -->
+                      </a>
+                    </li>
+                    <!-- End Contact Item -->
+                    <li>
+                      <a href="#">
+                        <img class="contacts-list-img" src="~admin-lte/dist/img/user5-128x128.jpg" alt="User Image">
+
+                        <div class="contacts-list-info">
+                              <span class="contacts-list-name">
+                                Nora S. Vans
+                                <small class="contacts-list-date pull-right">2/10/2015</small>
+                              </span>
+                          <span class="contacts-list-msg">Where is your new...</span>
+                        </div>
+                        <!-- /.contacts-list-info -->
+                      </a>
+                    </li>
+                    <!-- End Contact Item -->
+                    <li>
+                      <a href="#">
+                        <img class="contacts-list-img" src="~admin-lte/dist/img/user6-128x128.jpg" alt="User Image">
+
+                        <div class="contacts-list-info">
+                              <span class="contacts-list-name">
+                                John K.
+                                <small class="contacts-list-date pull-right">1/27/2015</small>
+                              </span>
+                          <span class="contacts-list-msg">Can I take a look at...</span>
+                        </div>
+                        <!-- /.contacts-list-info -->
+                      </a>
+                    </li>
+                    <!-- End Contact Item -->
+                    <li>
+                      <a href="#">
+                        <img class="contacts-list-img" src="~admin-lte/dist/img/user8-128x128.jpg" alt="User Image">
+
+                        <div class="contacts-list-info">
+                              <span class="contacts-list-name">
+                                Kenneth M.
+                                <small class="contacts-list-date pull-right">1/4/2015</small>
+                              </span>
+                          <span class="contacts-list-msg">Never mind I found...</span>
+                        </div>
+                        <!-- /.contacts-list-info -->
+                      </a>
+                    </li>
+                    <!-- End Contact Item -->
+                  </ul>
+                  <!-- /.contatcts-list -->
+                </div>
+                <!-- /.direct-chat-pane -->
+              </div>
+              <!-- /.box-body -->
+              <div class="box-footer">
+                <form action="#" method="post">
+                  <div class="input-group">
+                    <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+                        <span class="input-group-btn">
+                          <button type="button" class="btn btn-warning btn-flat">Send</button>
+                        </span>
+                  </div>
+                </form>
+              </div>
+              <!-- /.box-footer-->
+            </div>
+            <!--/.direct-chat -->
+          </div>
+          <!-- /.col -->
+
+          <div class="col-md-6">
+            <!-- USERS LIST -->
+            <div class="box box-danger">
+              <div class="box-header with-border">
+                <h3 class="box-title">Latest Members</h3>
+
+                <div class="box-tools pull-right">
+                  <span class="label label-danger">8 New Members</span>
+                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+                  </button>
+                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
+                  </button>
+                </div>
+              </div>
+              <!-- /.box-header -->
+              <div class="box-body no-padding">
+                <ul class="users-list clearfix">
+                  <li>
+                    <img src="~admin-lte/dist/img/user1-128x128.jpg" alt="User Image">
+                    <a class="users-list-name" href="#">Alexander Pierce</a>
+                    <span class="users-list-date">Today</span>
+                  </li>
+                  <li>
+                    <img src="~admin-lte/dist/img/user8-128x128.jpg" alt="User Image">
+                    <a class="users-list-name" href="#">Norman</a>
+                    <span class="users-list-date">Yesterday</span>
+                  </li>
+                  <li>
+                    <img src="~admin-lte/dist/img/user7-128x128.jpg" alt="User Image">
+                    <a class="users-list-name" href="#">Jane</a>
+                    <span class="users-list-date">12 Jan</span>
+                  </li>
+                  <li>
+                    <img src="~admin-lte/dist/img/user6-128x128.jpg" alt="User Image">
+                    <a class="users-list-name" href="#">John</a>
+                    <span class="users-list-date">12 Jan</span>
+                  </li>
+                  <li>
+                    <img src="~admin-lte/dist/img/user2-160x160.jpg" alt="User Image">
+                    <a class="users-list-name" href="#">Alexander</a>
+                    <span class="users-list-date">13 Jan</span>
+                  </li>
+                  <li>
+                    <img src="~admin-lte/dist/img/user5-128x128.jpg" alt="User Image">
+                    <a class="users-list-name" href="#">Sarah</a>
+                    <span class="users-list-date">14 Jan</span>
+                  </li>
+                  <li>
+                    <img src="~admin-lte/dist/img/user4-128x128.jpg" alt="User Image">
+                    <a class="users-list-name" href="#">Nora</a>
+                    <span class="users-list-date">15 Jan</span>
+                  </li>
+                  <li>
+                    <img src="~admin-lte/dist/img/user3-128x128.jpg" alt="User Image">
+                    <a class="users-list-name" href="#">Nadia</a>
+                    <span class="users-list-date">15 Jan</span>
+                  </li>
+                </ul>
+                <!-- /.users-list -->
+              </div>
+              <!-- /.box-body -->
+              <div class="box-footer text-center">
+                <a href="javascript:void(0)" class="uppercase">View All Users</a>
+              </div>
+              <!-- /.box-footer -->
+            </div>
+            <!--/.box -->
+          </div>
+          <!-- /.col -->
+        </row>
+        <!-- /.row -->
+
+        <!-- TABLE: LATEST ORDERS -->
+        <div class="box box-info">
+          <div class="box-header with-border">
+            <h3 class="box-title">Latest Orders</h3>
+
+            <div class="box-tools pull-right">
+              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+              </button>
+              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+            </div>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body">
+            <div class="table-responsive">
+              <table class="table no-margin">
+                <thead>
+                <tr>
+                  <th>Order ID</th>
+                  <th>Item</th>
+                  <th>Status</th>
+                  <th>Popularity</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                  <td><a href="pages/examples/invoice.html">OR9842</a></td>
+                  <td>Call of Duty IV</td>
+                  <td><span class="label label-success">Shipped</span></td>
+                  <td>
+                    <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td><a href="pages/examples/invoice.html">OR1848</a></td>
+                  <td>Samsung Smart TV</td>
+                  <td><span class="label label-warning">Pending</span></td>
+                  <td>
+                    <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td><a href="pages/examples/invoice.html">OR7429</a></td>
+                  <td>iPhone 6 Plus</td>
+                  <td><span class="label label-danger">Delivered</span></td>
+                  <td>
+                    <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td><a href="pages/examples/invoice.html">OR7429</a></td>
+                  <td>Samsung Smart TV</td>
+                  <td><span class="label label-info">Processing</span></td>
+                  <td>
+                    <div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td><a href="pages/examples/invoice.html">OR1848</a></td>
+                  <td>Samsung Smart TV</td>
+                  <td><span class="label label-warning">Pending</span></td>
+                  <td>
+                    <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td><a href="pages/examples/invoice.html">OR7429</a></td>
+                  <td>iPhone 6 Plus</td>
+                  <td><span class="label label-danger">Delivered</span></td>
+                  <td>
+                    <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td><a href="pages/examples/invoice.html">OR9842</a></td>
+                  <td>Call of Duty IV</td>
+                  <td><span class="label label-success">Shipped</span></td>
+                  <td>
+                    <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
+                  </td>
+                </tr>
+                </tbody>
+              </table>
+            </div>
+            <!-- /.table-responsive -->
+          </div>
+          <!-- /.box-body -->
+          <div class="box-footer clearfix">
+            <a href="javascript:void(0)" class="btn btn-sm btn-info btn-flat pull-left">Place New Order</a>
+            <a href="javascript:void(0)" class="btn btn-sm btn-default btn-flat pull-right">View All Orders</a>
+          </div>
+          <!-- /.box-footer -->
+        </div>
+        <!-- /.box -->
+      </div>
+      <!-- /.col -->
+
+      <div class="col-md-4">
+        <!-- Info Boxes Style 2 -->
+        <div class="info-box bg-yellow">
+          <span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>
+
+          <div class="info-box-content">
+            <span class="info-box-text">Inventory</span>
+            <span class="info-box-number">5,200</span>
+
+            <div class="progress">
+              <div class="progress-bar" style="width: 50%"></div>
+            </div>
+                <span class="progress-description">
+                  50% Increase in 30 Days
+                </span>
+          </div>
+          <!-- /.info-box-content -->
+        </div>
+        <!-- /.info-box -->
+        <div class="info-box bg-green">
+          <span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>
+
+          <div class="info-box-content">
+            <span class="info-box-text">Mentions</span>
+            <span class="info-box-number">92,050</span>
+
+            <div class="progress">
+              <div class="progress-bar" style="width: 20%"></div>
+            </div>
+                <span class="progress-description">
+                  20% Increase in 30 Days
+                </span>
+          </div>
+          <!-- /.info-box-content -->
+        </div>
+        <!-- /.info-box -->
+        <div class="info-box bg-red">
+          <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
+
+          <div class="info-box-content">
+            <span class="info-box-text">Downloads</span>
+            <span class="info-box-number">114,381</span>
+
+            <div class="progress">
+              <div class="progress-bar" style="width: 70%"></div>
+            </div>
+                <span class="progress-description">
+                  70% Increase in 30 Days
+                </span>
+          </div>
+          <!-- /.info-box-content -->
+        </div>
+        <!-- /.info-box -->
+        <div class="info-box bg-aqua">
+          <span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
+
+          <div class="info-box-content">
+            <span class="info-box-text">Direct Messages</span>
+            <span class="info-box-number">163,921</span>
+
+            <div class="progress">
+              <div class="progress-bar" style="width: 40%"></div>
+            </div>
+                <span class="progress-description">
+                  40% Increase in 30 Days
+                </span>
+          </div>
+          <!-- /.info-box-content -->
+        </div>
+        <!-- /.info-box -->
+
+        <div class="box box-default">
+          <div class="box-header with-border">
+            <h3 class="box-title">Browser Usage</h3>
+
+            <div class="box-tools pull-right">
+              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+              </button>
+              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+            </div>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body">
+            <row>
+              <div class="col-md-8">
+                <div class="chart-responsive">
+                  <canvas id="pieChart" height="150"></canvas>
+                </div>
+                <!-- ./chart-responsive -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-4">
+                <ul class="chart-legend clearfix">
+                  <li><i class="fa fa-circle-o text-red"></i> Chrome</li>
+                  <li><i class="fa fa-circle-o text-green"></i> IE</li>
+                  <li><i class="fa fa-circle-o text-yellow"></i> FireFox</li>
+                  <li><i class="fa fa-circle-o text-aqua"></i> Safari</li>
+                  <li><i class="fa fa-circle-o text-light-blue"></i> Opera</li>
+                  <li><i class="fa fa-circle-o text-gray"></i> Navigator</li>
+                </ul>
+              </div>
+              <!-- /.col -->
+            </row>
+            <!-- /.row -->
+          </div>
+          <!-- /.box-body -->
+          <div class="box-footer no-padding">
+            <ul class="nav nav-pills nav-stacked">
+              <li><a href="#">United States of America
+                <span class="pull-right text-red"><i class="fa fa-angle-down"></i> 12%</span></a></li>
+              <li><a href="#">India <span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a>
+              </li>
+              <li><a href="#">China
+                <span class="pull-right text-yellow"><i class="fa fa-angle-left"></i> 0%</span></a></li>
+            </ul>
+          </div>
+          <!-- /.footer -->
+        </div>
+        <!-- /.box -->
+
+        <!-- PRODUCT LIST -->
+        <div class="box box-primary">
+          <div class="box-header with-border">
+            <h3 class="box-title">Recently Added Products</h3>
+
+            <div class="box-tools pull-right">
+              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+              </button>
+              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+            </div>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body">
+            <ul class="products-list product-list-in-box">
+              <li class="item">
+                <div class="product-img">
+                  <img src="~admin-lte/dist/img/default-50x50.gif" alt="Product Image">
+                </div>
+                <div class="product-info">
+                  <a href="javascript:void(0)" class="product-title">Samsung TV
+                    <span class="label label-warning pull-right">$1800</span></a>
+                      <span class="product-description">
+                        Samsung 32" 1080p 60Hz LED Smart HDTV.
+                      </span>
+                </div>
+              </li>
+              <!-- /.item -->
+              <li class="item">
+                <div class="product-img">
+                  <img src="~admin-lte/dist/img/default-50x50.gif" alt="Product Image">
+                </div>
+                <div class="product-info">
+                  <a href="javascript:void(0)" class="product-title">Bicycle
+                    <span class="label label-info pull-right">$700</span></a>
+                      <span class="product-description">
+                        26" Mongoose Dolomite Men's 7-speed, Navy Blue.
+                      </span>
+                </div>
+              </li>
+              <!-- /.item -->
+              <li class="item">
+                <div class="product-img">
+                  <img src="~admin-lte/dist/img/default-50x50.gif" alt="Product Image">
+                </div>
+                <div class="product-info">
+                  <a href="javascript:void(0)" class="product-title">Xbox One <span class="label label-danger pull-right">$350</span></a>
+                      <span class="product-description">
+                        Xbox One Console Bundle with Halo Master Chief Collection.
+                      </span>
+                </div>
+              </li>
+              <!-- /.item -->
+              <li class="item">
+                <div class="product-img">
+                  <img src="~admin-lte/dist/img/default-50x50.gif" alt="Product Image">
+                </div>
+                <div class="product-info">
+                  <a href="javascript:void(0)" class="product-title">PlayStation 4
+                    <span class="label label-success pull-right">$399</span></a>
+                      <span class="product-description">
+                        PlayStation 4 500GB Console (PS4)
+                      </span>
+                </div>
+              </li>
+              <!-- /.item -->
+            </ul>
+          </div>
+          <!-- /.box-body -->
+          <div class="box-footer text-center">
+            <a href="javascript:void(0)" class="uppercase">View All Products</a>
+          </div>
+          <!-- /.box-footer -->
+        </div>
+        <!-- /.box -->
+      </div>
+      <!-- /.col -->
+    </row>
+    <!-- /.row -->
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'sample',
+  created () {
+
+  }
+}
+</script>

src/components/VAAccordion.vue

@@ -0,0 +1,40 @@
+<template>
+
+  <div class="box-group"
+       id="accordion">
+    <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
+    <div class="panel box" :class="`box-${item.type}`" v-for="(item, index) in list">
+      <div class="box-header with-border">
+        <h4 class="box-title">
+          <a data-toggle="collapse" data-parent="#accordion" :href="`#${item.id}`">
+            {{item.title}}
+          </a>
+        </h4>
+      </div>
+      <div :id="item.id"
+           class="panel-collapse collapse"
+           :class="index==0?'in':''">
+        <div class="box-body">
+          {{item.content}}
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+</template>
+
+<script>
+export default {
+  name: 'va-arccordion',
+  props: {
+    list: {
+      type: Array,
+      default: []
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/components/VAAlert.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="alert" v-bind:class="classObject">
+    <button type="button" data-dismiss="alert" aria-hidden="true" class="close" v-if="dismissible">×</button>
+    <slot name="header"></slot>
+    <slot name="body"></slot>
+  </div>
+</template>
+<script>
+const AlertTypes = ['success', 'info', 'warning', 'danger']
+export default {
+  name: 'va-alert',
+  props: {
+    type: {
+      default: 'success',
+      validator: function (value) {
+        return AlertTypes.includes(value)
+      }
+    },
+    dismissible: {
+      default: false
+    }
+  },
+  computed: {
+    classObject () {
+      return {
+        'alert-success': this.type === 'success',
+        'alert-info': this.type === 'info',
+        'alert-warning': this.type === 'warning',
+        'alert-danger': this.type === 'danger',
+        'alert-dissmissible': this.dismissible
+      }
+    }
+  }
+}
+</script>
+<style lang="css">
+</style>

src/components/VAButton.vue

@@ -0,0 +1,50 @@
+<template>
+  <button type="button" class="btn btn-block"
+    :class="[btnTheme, disabled, flat, size]"
+  >
+    {{name}}
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'va-button',
+  props: {
+    name: {
+      type: String,
+      default: 'Button'
+    },
+    theme: {
+      type: String,
+      default: 'default'
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    isFlat: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: ''
+    }
+  },
+  created () {
+
+  },
+  computed: {
+    btnTheme () {
+      return `btn-${this.theme}`
+    },
+    disabled () {
+      return this.isDisabled ? 'disabled' : ''
+    },
+    flat () {
+      return this.isFlat ? 'btn-flat' : ''
+    }
+  }
+}
+</script>

src/components/VACallout.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="callout" :class="classObject">
+    <h4>{{ title }}</h4>
+
+    <p>{{ text }}</p>
+  </div>
+</template>
+
+<script>
+const CalloutTypes = ['success', 'info', 'warning', 'danger']
+export default {
+  name: 'va-callout',
+  props: {
+    type: {
+      default: 'success',
+      validator: function (value) {
+        return CalloutTypes.includes(value)
+      }
+    },
+    title: {
+      type: String
+    },
+    text: {
+      type: String
+    }
+  },
+  computed: {
+    classObject () {
+      return {
+        'callout-success': this.type === 'success',
+        'callout-info': this.type === 'info',
+        'callout-warning': this.type === 'warning',
+        'callout-danger': this.type === 'danger'
+      }
+    }
+  }
+}
+</script>

src/components/VACarousel.vue

@@ -0,0 +1,56 @@
+<template>
+
+  <div :id="name"
+       class="carousel slide"
+       data-ride="carousel">
+    <ol class="carousel-indicators">
+      <li :data-target="`#${name}`" v-for="(item, index) in list"
+          :data-slide-to="index"
+          class="startIndex"></li>
+    </ol>
+    <div class="carousel-inner">
+      <div class="item" :class="index==startIndex?'active':''" v-for="(item, index) in list">
+        <img :src="item.image"
+             :alt="item.text">
+
+        <div class="carousel-caption">
+          {{item.text}}
+        </div>
+      </div>
+    </div>
+    <a class="left carousel-control"
+       :href="`#${name}`"
+       data-slide="prev">
+      <span class="fa fa-angle-left"></span>
+    </a>
+    <a class="right carousel-control"
+       :href="`#${name}`"
+       data-slide="next">
+      <span class="fa fa-angle-right"></span>
+    </a>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'va-carousel',
+  props: {
+    name: {
+      type: String,
+      default: 'carousel-example-generic'
+    },
+    list: {
+      type: Array,
+      default: []
+    },
+    startIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/components/VAChart.vue

@@ -0,0 +1,35 @@
+<template>
+  <canvas>
+  </canvas>
+</template>
+<script>
+import Chart from 'chart.js'
+
+export default {
+  name: 'Chart',
+  props: {
+    'chart-config': {
+      type: Object,
+      validator: function (value) {
+        const keys = Object.keys(value)
+        if (!keys.includes('type')) {
+          console.error('[Chart.js] Object must has type (key)')
+          return false
+        }
+        if (!keys.includes('data')) {
+          console.error('[Chart.js] Object must has data (key)')
+          return false
+        }
+        return true
+      }
+    }
+  },
+  mounted () {
+    const chartCanvas = this.$el.getContext('2d')
+    const chartConfig = this.chartConfig
+    new Chart(chartCanvas, chartConfig) // eslint-disable-line no-new
+  }
+}
+</script>
+<style lang="css">
+</style>

src/components/VACheckBox.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" />{{ text }}
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'va-checkbox',
+  props: {
+    text: {
+      type: String,
+      default: 'Check me out'
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/components/VAColorPaletteSet.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="col-sm-4 col-md-2">
+    <h4 class="text-center">{{ this.color }}</h4>
+
+    <div class="color-palette-set">
+      <div :class="[this.colorSet[this.color].className, 'disabled', 'color-palette']"><span>Disabled</span></div>
+      <div :class="[this.colorSet[this.color].className, 'color-palette']"><span>{{ this.colorSet[this.color].color }}</span></div>
+      <div :class="[activeMode, 'color-palette']"><span>Active</span></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ColorPaletteSet',
+  props: {
+    color: {
+      type: String,
+      default: 'Primary'
+    }
+  },
+  data () {
+    return {
+      colorSet: {
+        Primary: {
+          className: 'bg-light-blue',
+          color: '#3c8dbc'
+        },
+        Info: {
+          className: 'bg-aqua',
+          color: '#00a65a'
+        },
+        Success: {
+          className: 'bg-green',
+          color: '#00a65a'
+        },
+        Warning: {
+          className: 'bg-yellow',
+          color: '#f39c12'
+        },
+        Danger: {
+          className: 'bg-red',
+          color: '#f56954'
+        },
+        Gray: {
+          className: 'bg-gray',
+          color: '#d2d6de'
+        },
+        Navi: {
+          className: 'bg-navy',
+          color: '#001F3F'
+        },
+        Teal: {
+          className: 'bg-teal',
+          color: '#39CCCC'
+        },
+        Purple: {
+          className: 'bg-purple',
+          color: '#605ca8'
+        },
+        Orange: {
+          className: 'bg-orange',
+          color: '#ff851b'
+        },
+        Maroon: {
+          className: 'bg-maroon',
+          color: '#D81B60'
+        },
+        Black: {
+          className: 'bg-black',
+          color: '#111111'
+        }
+      }
+    }
+  },
+  computed: {
+    activeMode () {
+      return `${this.colorSet[this.color].className}-active`
+    }
+  },
+  created () {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/VACustomTab.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="nav-tabs-custom">
+    <ul class="nav nav-tabs" :class="tabsClass">
+      <li v-for="(tab, index) in tabList" :class="tab.class">
+        <a :href="tab.id" data-toggle="tab">{{tab.title}}</a>
+      </li>
+      <slot name="nav"></slot>
+    </ul>
+    <div class="tab-content">
+      <slot name="content" class="tab-pane"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'va-custom-tab',
+  props: {
+    tabsClass: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      tabList: []
+    }
+  },
+  mounted () {
+    for (const i in this.$slots.content) {
+      var vm = this.$slots.content[i]
+
+      if (typeof vm !== 'object') {
+        continue
+      }
+      vm.elm.className += ' tab-pane'
+      this.tabList.push({
+        id: '#' + vm.data.attrs.id,
+        class: vm.data.staticClass || '',
+        title: vm.data.attrs.title
+      })
+    }
+  }
+}
+</script>
+

src/components/VAInput.vue

@@ -0,0 +1,54 @@
+<template>
+
+  <input :type="type"
+         :class="[formControl, getSize]"
+         :id="vaId"
+         :placeholder="placeholder"
+         :value="value">
+  </input>
+
+</template>
+
+<script>
+export default {
+  name: 'va-input',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    vaId: {
+      type: String
+    },
+    placeholder: {
+      type: String,
+      default: 'Enter Text...'
+    },
+    size: {
+      type: String
+    },
+    value: {
+      type: String
+    },
+    isFormControl: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    getSize () {
+      if (!this.size) {
+        return ''
+      }
+
+      return 'input-' + this.size
+    },
+    formControl () {
+      return this.isFormControl ? 'form-control' : ''
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/components/VAInputGroup.vue

@@ -0,0 +1,78 @@
+<template>
+  <div :class="groupType + '-group'">
+    <label v-if="title" :for="vaId">{{ title }}</label>
+    <div v-if="$slots.slotPrefixButton" class="input-group-btn">
+      <slot name="slotPrefixButton"></slot>
+      <slot name="slotPrefixDropdown"></slot>
+    </div>
+    <span v-if="prefixAddonText || $slots.slotPrefixAddonText" class="input-group-addon">
+      {{ prefixAddonText }}
+      <slot name="slotPrefixAddonText"></slot>
+    </span>
+    <va-input
+        :type="type"
+        :vaId="vaId"
+        :placeholder="placeholder"
+        :size="size"
+        :value="value"
+        :isFormControl="type!='file'"
+    ></va-input>
+    <span v-if="suffixAddonText || $slots.slotSuffixAddonText" class="input-group-addon">
+      {{ suffixAddonText }}
+      <slot name="slotSuffixAddonText"></slot>
+    </span>
+    <div v-if="$slots.slotSuffixButton" class="input-group-btn">
+      <slot name="slotSuffixButton"></slot>
+      <slot name="slotSuffixDropdown"></slot>
+    </div>
+    <p v-show="helpBlock" class="help-block">{{ helpBlock }}</p>
+  </div>
+</template>
+
+<script>
+import VAInput from './VAInput'
+export default {
+  name: 'va-input-group',
+  props: {
+    groupType: {
+      type: String,
+      default: 'form'
+    },
+    title: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+    vaId: {
+      type: String
+    },
+    placeholder: {
+      type: String,
+      default: 'Enter Text...'
+    },
+    size: {
+      type: String
+    },
+    value: {
+      type: String
+    },
+    helpBlock: {
+      type: String
+    },
+    prefixAddonText: {
+      type: String
+    },
+    suffixAddonText: {
+      type: String
+    }
+  },
+  created () {
+
+  },
+  components: {
+    'va-input': VAInput
+  }
+}
+</script>

src/components/VAProgressBar.vue

@@ -0,0 +1,78 @@
+<template>
+
+  <div class="progress" :class="[progressSize, isVertical?'vertical':'', isActive?'active':'']">
+    <div class="progress-bar"
+         :class="[`progress-bar-${type}`, (isStriped?'progress-bar-striped':'')]"
+         role="progressbar"
+         :aria-valuenow="value"
+         :aria-valuemin="min"
+         :aria-valuemax="max"
+         :style="`${isVertical?'height':'width'}: ${value}%`">
+      <span class="sr-only">{{text}}</span>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'ProgressBar',
+  props: {
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    size: {
+      type: String,
+      default: ''
+    },
+    isStriped: {
+      type: Boolean,
+      default: true
+    },
+    isActive: {
+      type: Boolean,
+      default: false
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    isVertical: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    progressSize () {
+      switch (this.size) {
+        case 'sm':
+        case 'xs':
+        case 'xxs':
+          break
+        case '':
+        default:
+          return ''
+      }
+
+      return 'progress-' + this.size
+    }
+  },
+  created () {
+
+  }
+}
+</script>
+

src/components/VAText.vue

@@ -0,0 +1,36 @@
+<template>
+  <p :class="colorType">
+    <slot></slot>
+  </p>
+</template>
+
+<script>
+export default {
+  name: 'va-text',
+  props: {
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    colorType () {
+      switch (this.type) {
+        case 'green':
+        case 'aqua':
+        case 'light-blue':
+        case 'red':
+        case 'yellow':
+        case 'muted':
+          break
+        default:
+          return 'lead'
+      }
+      return 'text-' + this.type
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/examples/APIExample.vue

@@ -0,0 +1,29 @@
+<template lang="html">
+  <div class="">
+    <h1>Hello</h1>
+    {{totalProduct}}
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+  created () {
+    this.fetchProduct()
+  },
+  computed: {
+    ...mapGetters([
+      'totalProduct'
+    ])
+  },
+  methods: {
+    ...mapActions([
+      'fetchProduct'
+    ])
+  }
+}
+</script>
+
+<style lang="css">
+</style>

src/examples/AlertExample.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="container">
+    <div class="box">
+      <div class="box-header">
+        <h2>Normal Alerts</h2>
+      </div>
+      <div class="box-body">
+        <va-alert>
+          <h4 slot="header">
+            <i class="icon fa fa-check"></i> CoPilot is open source!
+          </h4>
+          <div slot="body">
+            Click on icon to check out it out on github.
+            <a href="https://github.com/misterGF/CoPilot" target="_blank">
+              <i class="fa fa-github fa-2x"></i>
+            </a>
+          </div>
+        </va-alert>
+
+        <va-alert type="success">
+          <h4 slot="header">
+            <i class="icon fa fa-check"></i> CoPilot is open source!
+          </h4>
+          <div slot="body">
+            Click on icon to check out it out on github.
+            <a href="https://github.com/misterGF/CoPilot" target="_blank">
+              <i class="fa fa-github fa-2x"></i>
+            </a>
+          </div>
+        </va-alert>
+
+        <va-alert type="info">
+          <h4 slot="header">
+            <i class="icon fa fa-check"></i> CoPilot is open source!
+          </h4>
+          <div slot="body">
+            Click on icon to check out it out on github.
+            <a href="https://github.com/misterGF/CoPilot" target="_blank">
+              <i class="fa fa-github fa-2x"></i>
+            </a>
+          </div>
+        </va-alert>
+
+        <va-alert type="warning">
+          <h4 slot="header">
+            <i class="icon fa fa-check"></i> CoPilot is open source!
+          </h4>
+          <div slot="body">
+            Click on icon to check out it out on github.
+            <a href="https://github.com/misterGF/CoPilot" target="_blank">
+              <i class="fa fa-github fa-2x"></i>
+            </a>
+          </div>
+        </va-alert>
+
+        <va-alert type="danger">
+          <h4 slot="header">
+            <i class="icon fa fa-check"></i> CoPilot is open source!
+          </h4>
+          <div slot="body">
+            Click on icon to check out it out on github.
+            <a href="https://github.com/misterGF/CoPilot" target="_blank">
+              <i class="fa fa-github fa-2x"></i>
+            </a>
+          </div>
+        </va-alert>
+      </div>
+    </div>
+
+    <div class="box">
+      <div class="box-header">
+        <h2>Dismissible Alerts</h2>
+      </div>
+      <div class="box-body">
+        <alert :dismissible="true">
+          <h4 slot="header">
+            <i class="icon fa fa-check"></i> CoPilot is open source!
+          </h4>
+          <div slot="body">
+            Click on icon to check out it out on github.
+            <a href="https://github.com/misterGF/CoPilot" target="_blank">
+              <i class="fa fa-github fa-2x"></i>
+            </a>
+          </div>
+        </alert>
+
+        <alert type="success" :dismissible="true">
+          <h4 slot="header">
+            <i class="icon fa fa-check"></i> CoPilot is open source!
+          </h4>
+          <div slot="body">
+            Click on icon to check out it out on github.
+            <a href="https://github.com/misterGF/CoPilot" target="_blank">
+              <i class="fa fa-github fa-2x"></i>
+            </a>
+          </div>
+        </alert>
+
+        <alert type="info" :dismissible="true">
+          <h4 slot="header">
+            <i class="icon fa fa-check"></i> CoPilot is open source!
+          </h4>
+          <div slot="body">
+            Click on icon to check out it out on github.
+            <a href="https://github.com/misterGF/CoPilot" target="_blank">
+              <i class="fa fa-github fa-2x"></i>
+            </a>
+          </div>
+        </alert>
+
+        <alert type="warning" :dismissible="true">
+          <h4 slot="header">
+            <i class="icon fa fa-check"></i> CoPilot is open source!
+          </h4>
+          <div slot="body">
+            Click on icon to check out it out on github.
+            <a href="https://github.com/misterGF/CoPilot" target="_blank">
+              <i class="fa fa-github fa-2x"></i>
+            </a>
+          </div>
+        </alert>
+
+        <alert type="danger" :dismissible="true">
+          <h4 slot="header">
+            <i class="icon fa fa-check"></i> CoPilot is open source!
+          </h4>
+          <div slot="body">
+            Click on icon to check out it out on github.
+            <a href="https://github.com/misterGF/CoPilot" target="_blank">
+              <i class="fa fa-github fa-2x"></i>
+            </a>
+          </div>
+        </alert>
+      </div>
+    </div>
+
+
+
+  </div>
+</template>
+<script>
+import VAAlert from '../components/VAAlert.vue'
+
+export default {
+  components: {
+    'va-alert': VAAlert
+  }
+}
+</script>
+<style lang="css">
+</style>

src/examples/ChartExample.vue

@@ -0,0 +1,315 @@
+<template>
+  <section class='content'>
+    <div class='box'>
+      <div class='box-body'>
+        <div class='row'>
+          <div class='col-md-4'>
+            <p class='text-center'>
+              <strong>Web Traffic Overview</strong>
+            </p>
+            <va-chart
+              :chart-config='chartConfig'></va-chart>
+          </div>
+          <div class='col-md-4'>
+            <p class='text-center'>
+              <strong>Test Line Chart</strong>
+            </p>
+            <va-chart
+              :chart-config='lineChartConfig'
+            >
+            </va-chart>
+          </div>
+          <div class='col-md-4'>
+            <p class='text-center'>
+              <strong>Test Bar Chart</strong>
+            </p>
+            <va-chart
+              :chart-config='barChartConfig'
+            >
+            </va-chart>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class='box'>
+      <div class='box-body'>
+        <div class='row'>
+          <div class='col-md-4'>
+            <p class='text-center'>
+              <strong>Test Radar Chart</strong>
+            </p>
+            <va-chart
+              :chart-config='radarChartConfig'
+            >
+            </va-chart>
+          </div>
+          <div class='col-md-4'>
+            <p class='text-center'>
+              <strong>Test Polar Area Chart</strong>
+            </p>
+            <va-chart
+              :chart-config='polarAreaChartConfig'
+            >
+            </va-chart>
+          </div>
+          <div class='col-md-4'>
+            <p class='text-center'>
+              <strong>Test Doughnut Chart</strong>
+            </p>
+            <va-chart
+              :chart-config='doughnutChartConfig'
+            >
+            </va-chart>
+          </div>
+        </div>
+      </div>
+      <div class="box">
+        <div class="box-body">
+          <row>
+            <div class='col-md-4'>
+              <p class='text-center'>
+                <strong>Test Bubble Chart</strong>
+              </p>
+              <va-chart
+                :chart-config='bubbleChartConfig'
+              >
+              </va-chart>
+            </div>
+          </row>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import VAChart from '../components/VAChart'
+
+export default {
+  components: {
+    'va-chart': VAChart
+  },
+  data () {
+    return {
+      chartConfig: {
+        type: 'pie',
+        data: {
+          labels: ['HTML', 'JavaScript', 'CSS'],
+          datasets: [{
+            data: [56.6, 37.7, 4.1],
+            backgroundColor: ['#00a65a', '#f39c12', '#00c0ef'],
+            hoverBackgroundColor: ['#00a65a', '#f39c12', '#00c0ef']
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: !this.isMobile,
+          legend: {
+            position: 'bottom',
+            display: true
+          }
+        }
+      },
+      lineChartConfig: {
+        type: 'line',
+        data: {
+          datasets: [{
+            label: 'Scatter Dataset',
+            data: [{
+              x: -10,
+              y: 0
+            }, {
+              x: 0,
+              y: 10
+            }, {
+              x: 10,
+              y: 5
+            }]
+          }]
+        },
+        options: {
+          scales: {
+            xAxes: [{
+              type: 'linear',
+              position: 'bottom'
+            }]
+          }
+        }
+      },
+      barChartConfig: {
+        type: 'bar',
+        data: {
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'My First dataset',
+              backgroundColor: [
+                'rgba(255, 99, 132, 0.2)',
+                'rgba(54, 162, 235, 0.2)',
+                'rgba(255, 206, 86, 0.2)',
+                'rgba(75, 192, 192, 0.2)',
+                'rgba(153, 102, 255, 0.2)',
+                'rgba(255, 159, 64, 0.2)'
+              ],
+              borderColor: [
+                'rgba(255,99,132,1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)'
+              ],
+              borderWidth: 1,
+              data: [65, 59, 80, 81, 56, 55, 40]
+            }
+          ]
+        },
+        options: {
+          scales: {
+            xAxes: [{
+              stacked: true
+            }],
+            yAxes: [{
+              stacked: true
+            }]
+          }
+        }
+      },
+      radarChartConfig: {
+        type: 'radar',
+        data: {
+          labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+          datasets: [
+            {
+              label: 'My First dataset',
+              backgroundColor: 'rgba(179,181,198,0.2)',
+              borderColor: 'rgba(179,181,198,1)',
+              pointBackgroundColor: 'rgba(179,181,198,1)',
+              pointBorderColor: '#fff',
+              pointHoverBackgroundColor: '#fff',
+              pointHoverBorderColor: 'rgba(179,181,198,1)',
+              data: [65, 59, 90, 81, 56, 55, 40]
+            },
+            {
+              label: 'My Second dataset',
+              backgroundColor: 'rgba(255,99,132,0.2)',
+              borderColor: 'rgba(255,99,132,1)',
+              pointBackgroundColor: 'rgba(255,99,132,1)',
+              pointBorderColor: '#fff',
+              pointHoverBackgroundColor: '#fff',
+              pointHoverBorderColor: 'rgba(255,99,132,1)',
+              data: [28, 48, 40, 19, 96, 27, 100]
+            }
+          ]
+        },
+        options: {
+          scale: {
+            reverse: true,
+            ticks: {
+              beginAtZero: true
+            }
+          }
+        }
+      },
+      polarAreaChartConfig: {
+        type: 'polarArea',
+        data: {
+          datasets: [{
+            data: [
+              11,
+              16,
+              7,
+              3,
+              14
+            ],
+            backgroundColor: [
+              '#FF6384',
+              '#4BC0C0',
+              '#FFCE56',
+              '#E7E9ED',
+              '#36A2EB'
+            ],
+            label: 'My dataset' // for legend
+          }],
+          labels: [
+            'Red',
+            'Green',
+            'Yellow',
+            'Grey',
+            'Blue'
+          ]
+        },
+        options: {
+          elements: {
+            arc: {
+              borderColor: '#000000'
+            }
+          }
+        }
+      },
+      doughnutChartConfig: {
+        type: 'doughnut',
+        data: {
+          labels: [
+            'Red',
+            'Blue',
+            'Yellow'
+          ],
+          datasets: [
+            {
+              data: [300, 50, 100],
+              backgroundColor: [
+                '#FF6384',
+                '#36A2EB',
+                '#FFCE56'
+              ],
+              hoverBackgroundColor: [
+                '#FF6384',
+                '#36A2EB',
+                '#FFCE56'
+              ]
+            }]
+        },
+        options: {
+          animation: {
+            animateScale: true
+          }
+        }
+      },
+      bubbleChartConfig: {
+        type: 'bubble',
+        data: {
+          datasets: [{
+            label: 'First Dataset',
+            data: [
+              {
+                x: 20,
+                y: 30,
+                r: 15
+              },
+              {
+                x: 40,
+                y: 10,
+                r: 10
+              }
+            ],
+            backgroundColor: '#FF6384',
+            hoverBackgroundColor: '#FF6384'
+          }]
+        },
+        options: {
+          elements: {
+            points: {
+              borderWidth: 1,
+              borderColor: 'rgb(0, 0, 0)'
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang='css'>
+</style>

src/examples/Dashboard.v1.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="dashboard">
+    <row>
+      <div class="col-lg-3 col-xs-6">
+        <va-small-box
+          color="aqua"
+          icon="ion-bag"
+          title="150"
+          description="New Order"
+          moreText="More info">
+        </va-small-box>
+      </div>
+      <div class="col-lg-3 col-xs-6">
+        <va-small-box
+          color="green"
+          icon="ion-stats-bars"
+          title="53%"
+          description="Bounce Rate"
+          moreText="More info">
+        </va-small-box>
+      </div>
+      <div class="col-lg-3 col-xs-6">
+        <va-small-box
+          color="yellow"
+          icon="ion-person-add"
+          title="44"
+          description="User Registrations"
+          moreText="More info">
+        </va-small-box>
+      </div>
+      <div class="col-lg-3 col-xs-6">
+        <va-small-box
+          color="red"
+          icon="ion-pie-graph"
+          title="65"
+          description="Unique Visitors"
+          moreText="More info">
+        </va-small-box>
+      </div>
+    </row>
+
+    <row>
+      <section class="col-lg-7 connectedSortable ui-sortable">
+        <va-chat-box></va-chat-box>
+        <va-todo-list></va-todo-list>
+        <va-quick-mail></va-quick-mail>
+      </section>
+      <section class="col-lg-5 connectedSortable ui-sortable">
+        <va-calendar></va-calendar>
+      </section>
+    </row>
+  </div>
+</template>
+
+<script>
+import VASmallBox from '../widgets/VASmallBox.vue'
+import VAChatBox from '../widgets/VAChatBox.vue'
+import VATodoList from '../widgets/VATodoList.vue'
+import VAQuickMail from '../widgets/VAQuickMail.vue'
+import VACalendar from '../widgets/VACalendar.vue'
+
+export default {
+  name: 'dashboard',
+  data () {
+    return {
+
+    }
+  },
+  components: {
+    'va-small-box': VASmallBox,
+    'va-chat-box': VAChatBox,
+    'va-todo-list': VATodoList,
+    'va-quick-mail': VAQuickMail,
+    'va-calendar': VACalendar
+  }
+}
+
+</script>

src/examples/Dashboard.v2.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="dashboard">
+    <row>
+      <div class="col-lg-3 col-xs-6">
+        <va-info-box
+          bgColor="bg-aqua"
+          bgIcon="ion ion-ios-gear-outline"
+          text="CPU TRAFFIC"
+          number="90"
+          numberType="percentage"
+        ></va-info-box>
+      </div>
+      <div class="col-lg-3 col-xs-6">
+        <va-info-box
+          bgColor="bg-red"
+          bgIcon="fa fa-google-plus"
+          text="LIKES"
+          number="41,410"
+        ></va-info-box>
+      </div>
+      <div class="col-lg-3 col-xs-6">
+        <va-info-box
+          bgColor="bg-green"
+          bgIcon="ion ion-ios-cart-outline"
+          text="SALES"
+          number="760"
+        ></va-info-box>
+      </div>
+      <div class="col-lg-3 col-xs-6">
+        <va-info-box
+          bgColor="bg-yellow"
+          bgIcon="ion ion-ios-people-outline"
+          text="NEW MEMBERS"
+          number="2,000"
+        ></va-info-box>
+      </div>
+    </row>
+    <row>
+      <div class="col-md-8">
+        <row>
+          <div class="col-md-6">
+            <va-direct-chat
+              theme="primary"
+              :talkList="[]"
+              :contacts="[]"
+              title="Direct Chat"
+              :badgeCount="3"
+            ></va-direct-chat>
+          </div>
+          <div class="col-md-6">
+            <va-user-list></va-user-list>
+          </div>
+        </row>
+      </div>
+    </row>
+    <row>
+      <div class="col-md-4">
+        <va-info-box
+          wrapBgColor="bg-yellow"
+          bgIcon="ion ion-ios-pricetag-outline"
+          text="Inventory"
+          number="5200"
+          :isProgress="true"
+          numberType="comma"
+          progressDescription="50% Increase in 30 Days"
+          :percentage="50"
+        ></va-info-box>
+        <va-info-box
+          wrapBgColor="bg-green"
+          bgIcon="ion ion-ios-pricetag-outline"
+          text="Mentions"
+          number="92050"
+          :isProgress="true"
+          numberType="comma"
+          progressDescription="20% Increase in 30 Days"
+          :percentage="20"
+        ></va-info-box>
+        <va-info-box
+          wrapBgColor="bg-red"
+          bgIcon="ion ion-ios-pricetag-outline"
+          text="Downloads"
+          number="114381"
+          numberType="comma"
+          :isProgress="true"
+          progressDescription="70% Increase in 30 Days"
+          :percentage="70"
+        ></va-info-box>
+        <va-info-box
+          wrapBgColor="bg-aqua"
+          bgIcon="ion ion-ios-pricetag-outline"
+          text="Direct Messages"
+          number="163921"
+          numberType="comma"
+          :isProgress="true"
+          progressDescription="40% Increase in 30 Days"
+          :percentage="40"
+        ></va-info-box>
+      </div>
+    </row>
+  </div>
+</template>
+
+<script>
+import VAInfoBox from '../widgets/VAInfoBox.vue'
+import VADirectChat from '../widgets/VADirectChat.vue'
+import VAUserList from '../widgets/VAUserList.vue'
+
+export default {
+  name: 'DashboardV2',
+  created () {
+
+  },
+  components: {
+    'va-info-box': VAInfoBox,
+    'va-direct-chat': VADirectChat,
+    'va-user-list': VAUserList
+  }
+}
+</script>

src/examples/InfoBoxExample.vue

@@ -0,0 +1,49 @@
+<template>
+<row>
+  <div class='col-md-3'>
+    <va-info-box
+      bgColor='bg-aqua'
+      bgIcon='ion ion-ios-gear-outline'
+      text='Hello'
+      number='8700'
+    ></va-info-box>
+  </div>
+  <div class='col-md-3'>
+    <va-info-box
+      bgColor='bg-red'
+      bgIcon='fa fa-google-plus'
+      text='LIKES'
+      number='232323'
+      number-type='percentage'
+    ></va-info-box>
+  </div>
+  <div class='col-md-3'>
+    <va-info-box
+      bgColor='bg-green'
+      bgIcon='ion ion-ios-cart-outline'
+      text='SALES'
+      number='580'
+    ></va-info-box>
+  </div>
+  <div class='col-md-3'>
+    <va-info-box
+      bgColor='bg-yellow'
+      bgIcon='ion ion-ios-people-outline'
+      text='new members'
+      number='580'
+      number-type='comma'
+    ></va-info-box>
+  </div>
+</row>
+</template>
+<script>
+import VAInfoBox from '../widgets/VAInfoBox'
+
+export default {
+  components: {
+    'va-info-box': VAInfoBox
+  }
+}
+</script>
+<style lang="css">
+</style>

src/examples/ModalExample.vue

@@ -0,0 +1,57 @@
+<template lang="html">
+  <div class="container">
+    <h1>Modal Example</h1>
+    <row>
+      <div class="col-md-12">
+        <!-- Button trigger modal -->
+        <button type="button" class="btn btn-primary btn-lg" @click="openModal">
+          Launch demo modal
+        </button>
+      </div>
+    </row>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    openModal () {
+      console.log(this.$bus)
+      this.$bus.$emit('modal-open', {
+        title: 'Hello',
+        description: '내용',
+        type: 'modal-primary',
+        confirmText: '저장 후 닫기',
+        cancelText: '닫기',
+        confirmBefore: () => {
+          window.alert('저장 후 닫기 이전 훅')
+        },
+        confirmAfter: () => {
+          window.alert('저장 후 닫기 이후 훅')
+        },
+        cancelBefore: () => {
+          window.alert('닫기 이전 훅')
+        },
+        cancelAfter: () => {
+          window.alert('닫기 이후 훅')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.modal-example .modal {
+  position: relative;
+  top: auto;
+  bottom: auto;
+  right: auto;
+  left: auto;
+  display: block;
+  z-index: 1;
+}
+.modal-example .modal {
+  background: transparent !important;
+}
+</style>

src/examples/WidgetsExample.vue

@@ -0,0 +1,555 @@
+<template>
+  <div>
+    <row>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-info-box
+            bgColor="bg-aqua"
+            bgIcon="ion ion-ios-gear-outline"
+            text="Messages"
+            number="1410"
+            numberType="comma"
+          ></va-info-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-info-box
+            bgColor="bg-green"
+            bgIcon="fa fa-flag-o"
+            text="Bookmarks"
+            number="410"
+            numberType="comma"
+          ></va-info-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-info-box
+            bgColor="bg-yellow"
+            bgIcon="fa fa-files-o"
+            text="Uploads"
+            number="13648"
+            numberType="comma"
+          ></va-info-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-info-box
+            bgColor="bg-red"
+            bgIcon="fa fa-star-o"
+            text="Likes"
+            number="93139"
+            numberType="comma"
+          ></va-info-box>
+      </div>
+    </row>
+    <row>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-info-box
+            wrapBgColor="bg-aqua"
+            bgIcon="fa fa-bookmark-o"
+            text="Bookmarks"
+            number="41410"
+            numberType="comma"
+            :isProgress="true"
+            :percentage="70"
+            progressDescription="70% Increase in 30 Days"
+          ></va-info-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-info-box
+            wrapBgColor="bg-green"
+            bgIcon="fa fa-thumbs-o-up"
+            text="Likes"
+            number="41410"
+            numberType="comma"
+            :isProgress="true"
+            :percentage="70"
+            progressDescription="70% Increase in 30 Days"
+          ></va-info-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-info-box
+            wrapBgColor="bg-yellow"
+            bgIcon="fa fa-calendar"
+            text="Events"
+            number="41410"
+            numberType="comma"
+            :isProgress="true"
+            :percentage="70"
+            progressDescription="70% Increase in 30 Days"
+          ></va-info-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-info-box
+            wrapBgColor="bg-red"
+            bgIcon="fa fa-comments-o"
+            text="Comments"
+            number="41410"
+            numberType="comma"
+            :isProgress="true"
+            :percentage="70"
+            progressDescription="70% Increase in 30 Days"
+          ></va-info-box>
+      </div>
+    </row>
+    <row>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-small-box
+          color="aqua"
+          icon="ion-bag"
+          title="150"
+          description="New Order"
+          moreText="More info">
+        </va-small-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-small-box
+          color="green"
+          icon="ion-stats-bars"
+          title="53%"
+          description="Bounce Rate"
+          moreText="More info">
+        </va-small-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-small-box
+          color="yellow"
+          icon="ion-person-add"
+          title="44"
+          description="User Registrations"
+          moreText="More info">
+        </va-small-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-small-box
+          color="red"
+          icon="ion-pie-graph"
+          title="65"
+          description="Unique Visitors"
+          moreText="More info">
+        </va-small-box>
+      </div>
+    </row>
+    <row>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-box
+          theme="box-default"
+          title="Expandable"
+          :isOpen="false"
+        >
+          <div slot="content">
+            The body of the box
+          </div>
+        </va-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-box
+          theme="box-success"
+          title="Expandable"
+        >
+          <div slot="content">
+            The body of the box
+          </div>
+        </va-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-box
+          theme="box-warning"
+          title="Expandable"
+        >
+          <div slot="content">
+            The body of the box
+          </div>
+        </va-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-box
+          theme="box-danger"
+          title="Expandable"
+          :isLoading="true"
+        >
+          <div slot="content">
+            The body of the box
+          </div>
+        </va-box>
+      </div>
+    </row>
+    <row>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-box
+          theme="box-default"
+          :isBorder="true"
+          title="Expandable"
+          :isOpen="false"
+        >
+          <div slot="content">
+            The body of the box
+          </div>
+        </va-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-box
+          theme="box-success"
+          :isBorder="true"
+          title="Expandable"
+        >
+          <div slot="content">
+            The body of the box
+          </div>
+        </va-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-box
+          theme="box-warning"
+          :isBorder="true"
+          title="Expandable"
+        >
+          <div slot="content">
+            The body of the box
+          </div>
+        </va-box>
+      </div>
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <va-box
+          theme="box-danger"
+          :isBorder="true"
+          title="Expandable"
+          :isLoading="true"
+        >
+          <div slot="The body of the box">
+            The body of the box
+          </div>
+        </va-box>
+      </div>
+    </row>
+    <row>
+      <div class="col-md-3 col-sm6 col-xs-12">
+        <va-direct-chat
+          theme="primary"
+          :talkList="talkList"
+          :contacts="contacts"
+          title="Direct Chat"
+          :badgeCount="3"
+          placeholder="내용을 입력하세요..."
+        ></va-direct-chat>
+      </div>
+      <div class="col-md-3 col-sm6 col-xs-12">
+        <va-direct-chat
+          theme="success"
+          :talkList="talkList"
+          :contacts="contacts"
+          title="Direct Chat"
+          :badgeCount="3"
+          placeholder="내용을 입력하세요..."
+        ></va-direct-chat>
+      </div>
+      <div class="col-md-3 col-sm6 col-xs-12">
+        <va-direct-chat
+          theme="warning"
+          :talkList="talkList"
+          :contacts="contacts"
+          title="Direct Chat"
+          :badgeCount="3"
+          placeholder="내용을 입력하세요..."
+        ></va-direct-chat>
+      </div>
+      <div class="col-md-3 col-sm6 col-xs-12">
+        <va-direct-chat
+          theme="danger"
+          :talkList="talkList"
+          :contacts="contacts"
+          title="Direct Chat"
+          :badgeCount="3"
+          placeholder="내용을 입력하세요..."
+        ></va-direct-chat>
+      </div>
+    </row>
+
+    <!-- TODO: Typography Component 완성 후 교체예정 -->
+    <h2 class="page-header">Social Widgets</h2>
+
+    <row>
+      <div class="col-md-4">
+        <va-social-user-v2
+          name="Nadia Carmichael"
+          description="Lead Developer"
+          profileImage="/static/img/user7-128x128.jpg"
+          :list="socialDataList[0]"
+        ></va-social-user-v2>
+      </div>
+      <div class="col-md-4">
+        <va-social-user-v1
+          name="Alexander Pierce"
+          description="Founder &amp; CEO"
+          profileImage="/static/img/user1-128x128.jpg"
+          :infoList="socialDataList[1]"
+        ></va-social-user-v1>
+      </div>
+      <div class="col-md-4">
+        <va-social-user-v1
+          name="Elizabeth Pierce"
+          description="Web Designer"
+          profileImage="/static/img/user3-128x128.jpg"
+          :infoList="socialDataList[2]"
+          :isBackgroundImage="true"
+        ></va-social-user-v1>
+      </div>
+    </row>
+    <row>
+      <div class="col-md-6">
+        <va-social-box
+          :name="socialBoxList[0].name"
+          :description="socialBoxList[0].description"
+          :profileImage="socialBoxList[0].profileImage"
+          :images="socialBoxList[0].images"
+          :text="socialBoxList[0].text"
+          :buttons="socialBoxList[0].buttons"
+          :likeCount="socialBoxList[0].likeCount"
+          :commentCount="socialBoxList[0].commentCount"
+          :comments="socialBoxList[0].comments"
+        ></va-social-box>
+      </div>
+      <div class="col-md-6">
+        <va-social-box
+            :name="socialBoxList[1].name"
+            :description="socialBoxList[1].description"
+            :profileImage="socialBoxList[1].profileImage"
+            :text="socialBoxList[1].text"
+            :buttons="socialBoxList[1].buttons"
+            :likeCount="socialBoxList[1].likeCount"
+            :commentCount="socialBoxList[1].commentCount"
+            :comments="socialBoxList[1].comments"
+            :attachments="socialBoxList[1].attachments"
+          ></va-social-box>
+      </div>
+    </row>
+  </div>
+</template>
+
+<script>
+import VAInfoBox from '../widgets/VAInfoBox.vue'
+import VASmallBox from '../widgets/VASmallBox.vue'
+import VABox from '../widgets/VABox.vue'
+import VADirectChat from '../widgets/VADirectChat.vue'
+import VASocialUserV1 from '../widgets/VASocialUser.v1.vue'
+import VASocialUserV2 from '../widgets/VASocialUser.v2.vue'
+import VASocialBox from '../widgets/VASocialBox.vue'
+
+export default {
+  name: 'WidgetsExample',
+  data () {
+    return {
+      talkList: [
+        {
+          name: 'Alexander Pierce',
+          date: new Date(),
+          profileImage: 'http://cfile9.uf.tistory.com/image/25270C4853F7057D09BFD3',
+          message: `Is this template really for free? That's unbelievable`,
+          isMine: false
+        },
+        {
+          name: 'Sarah Bullock',
+          date: new Date(),
+          profileImage: 'http://cfile9.uf.tistory.com/image/25270C4853F7057D09BFD3',
+          message: `You better believe it!`,
+          isMine: true
+        }
+      ],
+      contacts: [
+        {
+          name: 'Count Dracula',
+          profileImage: 'http://cfile9.uf.tistory.com/image/25270C4853F7057D09BFD3',
+          latestMessage: 'How have you been? I was...',
+          latestDate: new Date()
+        },
+        {
+          name: 'Sarah Doe',
+          profileImage: 'http://cfile9.uf.tistory.com/image/25270C4853F7057D09BFD3',
+          latestMessage: 'I will be waiting for...',
+          latestDate: new Date()
+        },
+        {
+          name: 'Nadia Jolie',
+          profileImage: 'http://cfile9.uf.tistory.com/image/25270C4853F7057D09BFD3',
+          latestMessage: `I'll call you back at...`,
+          latestDate: new Date()
+        },
+        {
+          name: 'Nora S. Vans',
+          profileImage: 'http://cfile9.uf.tistory.com/image/25270C4853F7057D09BFD3',
+          latestMessage: 'Where is your new...',
+          latestDate: new Date()
+        },
+        {
+          name: 'John K.',
+          profileImage: 'http://cfile9.uf.tistory.com/image/25270C4853F7057D09BFD3',
+          latestMessage: 'Can I take a look at...',
+          latestDate: new Date()
+        },
+        {
+          name: 'Kenneth M.',
+          profileImage: 'http://cfile9.uf.tistory.com/image/25270C4853F7057D09BFD3',
+          latestMessage: 'Naver mine I found...',
+          latestDate: new Date()
+        }
+      ],
+      socialDataList: [
+        [
+          {
+            name: 'Projects',
+            badge: {
+              theme: 'bg-blue',
+              count: 31
+            }
+          },
+          {
+            name: 'Tasks',
+            badge: {
+              theme: 'bg-aqua',
+              count: 5
+            }
+          },
+          {
+            name: 'Completed Projects',
+            badge: {
+              theme: 'bg-green',
+              count: 12
+            }
+          },
+          {
+            name: 'Followers',
+            badge: {
+              theme: 'bg-red',
+              count: 842
+            }
+          }
+        ],
+        [
+          {
+            count: 3200,
+            text: 'SALES'
+          },
+          {
+            count: 13000,
+            text: 'FOLLOWERS'
+          },
+          {
+            count: 35,
+            text: 'PRODUCTS'
+          }
+        ],
+        [
+          {
+            count: 3200,
+            text: 'SALES'
+          },
+          {
+            count: 13000,
+            text: 'FOLLOWERS'
+          },
+          {
+            count: 35,
+            text: 'PRODUCTS'
+          }
+        ]
+      ],
+      socialBoxList: [
+        {
+          name: 'Jonathan Burke Jr.',
+          profileImage: '/static/img/user1-128x128.jpg',
+          description: 'Shared publicly - 7:30 PM Today',
+          images: [
+            '/static/img/photo2.png'
+          ],
+          text: 'I took this photo this morning. What do you guys think?',
+          buttons: [
+            {
+              name: 'Share',
+              theme: 'fa fa-share',
+              onClick: this.clickToShare
+            },
+            {
+              name: 'Likes',
+              theme: 'fa fa-thumbs-o-up',
+              onClick: this.clickToLike
+            }
+          ],
+          likeCount: 127,
+          commentCount: 3,
+          comments: [
+            {
+              name: 'Maria Gonzales',
+              profileImage: '/static/img/user3-128x128.jpg',
+              text: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
+              date: new Date()
+            },
+            {
+              name: 'Luna Stark',
+              profileImage: '/static/img/user4-128x128.jpg',
+              text: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
+              date: new Date()
+            }
+          ]
+        },
+        {
+          name: 'Jonathan Burke Jr.',
+          profileImage: '/static/img/user1-128x128.jpg',
+          description: 'Shared publicly - 7:30 PM Today',
+          text: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.',
+          buttons: [
+            {
+              name: 'Share',
+              theme: 'fa fa-share',
+              onClick: this.clickToShare
+            },
+            {
+              name: 'Likes',
+              theme: 'fa fa-thumbs-o-up',
+              onClick: this.clickToLike
+            }
+          ],
+          likeCount: 45,
+          commentCount: 2,
+          comments: [
+            {
+              name: 'Maria Gonzales',
+              profileImage: '/static/img/user3-128x128.jpg',
+              text: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
+              date: new Date()
+            },
+            {
+              name: 'Nora Havisham',
+              profileImage: '/static/img/user5-128x128.jpg',
+              text: `The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.`,
+              date: new Date()
+            }
+          ],
+          attachments: [
+            {
+              title: 'Lorem ipsum text generator',
+              image: '/static/img/photo1.png',
+              text: 'Description about the attachment can be placed here. Lorem Ipsum is simply dummy text of the printing and typesetting industry...'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    clickToShare () {
+      alert('click to shere')
+    },
+    clickToLike () {
+      alert('click to like')
+    }
+  },
+  components: {
+    'va-info-box': VAInfoBox,
+    'va-small-box': VASmallBox,
+    'va-box': VABox,
+    'va-direct-chat': VADirectChat,
+    'va-social-user-v1': VASocialUserV1,
+    'va-social-user-v2': VASocialUserV2,
+    'va-social-box': VASocialBox
+  }
+}
+</script>

src/grid/Column.vue

@@ -0,0 +1,20 @@
+<template>
+  <div :class="this['class']">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'column',
+  props: {
+    'class': {
+      type: String,
+      default: ''
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/grid/Row.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="row">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'row',
+  created () {
+
+  }
+}
+</script>

src/lib/css.js

@@ -0,0 +1,4 @@
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'admin-lte/dist/css/AdminLTE.min.css'
+import 'admin-lte/dist/css/skins/_all-skins.min.css'
+import 'font-awesome/css/font-awesome.min.css'

src/lib/eventBus.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+
+const EventBus = new Vue()
+
+export default EventBus

src/lib/global.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import Row from '../grid/Row'
+import Column from '../grid/Column'
+Vue.component('row', Row)
+Vue.component('column', Column)

src/lib/script.js

@@ -0,0 +1,12 @@
+import 'expose-loader?$!expose-loader?jQuery!jquery'
+import 'bootstrap'
+
+import 'jquery-slimscroll'
+import 'jquery-ui/ui/widgets/sortable.js'
+import 'jquery-ui/ui/widgets/datepicker.js'
+import 'jquery-ui/themes/base/datepicker.css'
+
+import 'admin-lte'
+import 'chart.js'
+
+// import 'bootstrap3-wysihtml5-bower/dist/amd/bootstrap3-wysihtml5.all.js'

src/main.js

@@ -0,0 +1,24 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import './lib/css'
+import './lib/script'
+import './lib/global'
+
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import EventBus from './lib/eventBus.js'
+import axios from 'axios'
+
+Vue.prototype.$bus = EventBus
+Vue.prototype.$http = axios
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  template: '<App/>',
+  components: {
+    App
+  }
+})

src/pages/forms/GeneralElements.vue

@@ -0,0 +1,247 @@
+<template>
+  <row>
+    <column class="col-md-6">
+
+      <va-box
+          title="Quick Example"
+          theme="box-primary"
+          widgetType="">
+
+          <div slot="content">
+
+            <va-input-group
+              title="Email address"
+              vaId="exampleInputEmail1"
+              type="email"
+              placeholder="Enter email"
+            >
+            </va-input-group>
+
+            <va-input-group
+              title="Password"
+              vaId="exampleInputPassword1"
+              type="password"
+              placeholder="Password"
+            >
+            </va-input-group>
+
+            <va-input-group
+              title="File input"
+              vaId="exampleInputFile"
+              type="file"
+              helpBlock="Example block-level help text here."
+            >
+            </va-input-group>
+
+            <va-checkbox
+              text="Check me out..."
+            >
+            </va-checkbox>
+
+          </div>
+      </va-box>
+
+      <va-box
+          title="Different Height"
+          theme="box-success"
+          widgetType="">
+
+          <div slot="content">
+
+            <va-input
+              size="lg"
+              placeholder=".input-lg"
+            ></va-input>
+            <br/>
+            <va-input
+              placeholder="Default input"
+            ></va-input>
+            <br/>
+            <va-input
+              size="sm"
+              placeholder=".input-sm"
+            ></va-input>
+
+
+          </div>
+      </va-box>
+
+      <va-box
+          title="Different Width"
+          theme="box-danger"
+          widgetType="">
+
+          <div slot="content">
+
+            <column class="col-xs-3">
+              <va-input placeholder=".col-xs-3"></va-input>
+            </column>
+
+            <column class="col-xs-4">
+              <va-input placeholder=".col-xs-4"></va-input>
+            </column>
+
+            <column class="col-xs-5">
+              <va-input placeholder=".col-xs-5"></va-input>
+            </column>
+
+          </div>
+
+      </va-box>
+
+      <va-box
+        title="Input Addon"
+        theme="box-info"
+        widgetType="">
+
+          <div slot="content">
+
+            <va-input-group
+              groupType="input"
+              placeholder="Username"
+              prefixAddonText="@"
+            >
+            </va-input-group>
+            <br/>
+            <va-input-group
+              groupType="input"
+              suffixAddonText=".00"
+            >
+            </va-input-group>
+            <br/>
+            <va-input-group
+              groupType="input"
+              prefixAddonText="$"
+              suffixAddonText=".00"
+            >
+            </va-input-group>
+
+            <h4>With icons</h4>
+
+            <va-input-group
+              groupType="input"
+              placeholder="Email"
+              type="email"
+            >
+              <i slot="slotPrefixAddonText" class="fa fa-envelope"></i>
+            </va-input-group>
+            <br/>
+
+            <va-input-group
+              groupType="input"
+            >
+              <i slot="slotSuffixAddonText" class="fa fa-check"></i>
+            </va-input-group>
+            <br/>
+
+            <va-input-group
+              groupType="input"
+            >
+              <i slot="slotPrefixAddonText" class="fa fa-dollar"></i>
+              <i slot="slotSuffixAddonText" class="fa fa-ambulance"></i>
+            </va-input-group>
+
+
+            <h4>With checkbox and radio inputs</h4>
+
+            <row>
+              <column class="col-lg-6">
+                <va-input-group
+                  groupType="input"
+                >
+                  <input slot="slotPrefixAddonText" type="checkbox">
+                </va-input-group>
+              </column>
+
+              <column class="col-lg-6">
+                <va-input-group
+                  groupType="input"
+                >
+                  <input slot="slotPrefixAddonText" type="radio">
+                </va-input-group>
+              </column>
+            </row>
+
+            <h4>With buttons</h4>
+
+            <p class="margin">Large: <code>.input-group.input-group-lg</code></p>
+
+            <va-input-group
+              groupType="input"
+              class="input-group-lg"
+            >
+
+              <va-button slot="slotPrefixButton"
+                name="Action"
+                theme="warning"
+                class="dropdown-toggle"
+                data-toggle="dropdown">
+                <slot>
+                   <span class="fa fa-caret-down"></span>
+                </slot>
+              </va-button>
+              <ul slot="slotPrefixDropdown" class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Separated link</a></li>
+              </ul>
+
+            </va-input-group>
+
+            <p class="margin">Normal</p>
+
+            <va-input-group
+              groupType="input"
+              placeholer=""
+            >
+              <va-button slot="slotPrefixButton"
+                name="Action"
+                theme="danger">
+              </va-button>
+
+            </va-input-group>
+
+            <p class="margin">Small <code>.input-group.input-group-sm</code></p>
+
+            <va-input-group
+              groupType="input"
+              placeholer=""
+            >
+              <va-button slot="slotSuffixButton"
+                name="Go!"
+                theme="info">
+              </va-button>
+
+            </va-input-group>
+
+          </div>
+
+      </va-box>
+
+    </column>
+  </row>
+</template>
+
+<script>
+import VABox from '../../widgets/VABox'
+import VAInputGroup from '../../components/VAInputGroup'
+import VACheckBox from '../../components/VACheckBox'
+import VAInput from '../../components/VAInput'
+import VAButton from '../../components/VAButton'
+
+export default {
+  name: 'general-elements',
+  created () {
+
+  },
+  components: {
+    'va-box': VABox,
+    'va-input-group': VAInputGroup,
+    'va-checkbox': VACheckBox,
+    'va-input': VAInput,
+    'va-button': VAButton
+  }
+}
+</script>

src/pages/ui-elements/Buttons.vue

@@ -0,0 +1,357 @@
+<template>
+  <row>
+    <div class="col-md-12">
+      <va-box
+        theme="box-primary"
+        title="Expandable"
+        widgetType=""
+      >
+        <div slot="content" class="table-responsive">
+          <p>Various types of buttons. Using the base class <code>.btn</code></p>
+          <table class="table table-bordered text-center">
+            <tbody>
+              <tr>
+                <th>Normal</th>
+                <th>Large <code>.btn-lg</code></th>
+                <th>Small <code>.btn-sm</code></th>
+                <th>X-Small <code>.btn-xs</code></th>
+                <th>Flat <code>.btn-flat</code></th>
+                <th>Disabled <code>.disabled</code></th>
+              </tr>
+              <tr>
+                <td>
+                  <va-button
+                    name="Default"
+                    theme="default"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Default"
+                    theme="default"
+                    size="btn-lg"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Default"
+                    theme="default"
+                    size="btn-sm"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Default"
+                    theme="default"
+                    size="btn-xs"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Default"
+                    theme="default"
+                    :isFlat="true"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Default"
+                    theme="default"
+                    :isDisabled="true"
+                  ></va-button>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <va-button
+                    name="Primary"
+                    theme="primary"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Primary"
+                    theme="primary"
+                    size="btn-lg"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Primary"
+                    theme="primary"
+                    size="btn-sm"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Primary"
+                    theme="primary"
+                    size="btn-xs"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Primary"
+                    theme="primary"
+                    :isFlat="true"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Primary"
+                    theme="primary"
+                    :isDisabled="true"
+                  ></va-button>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <va-button
+                    name="Success"
+                    theme="success"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Success"
+                    theme="success"
+                    size="btn-lg"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Success"
+                    theme="success"
+                    size="btn-sm"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Success"
+                    theme="success"
+                    size="btn-xs"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Success"
+                    theme="success"
+                    :isFlat="true"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Success"
+                    theme="success"
+                    :isDisabled="true"
+                  ></va-button>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <va-button
+                    name="Info"
+                    theme="info"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Info"
+                    theme="info"
+                    size="btn-lg"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Info"
+                    theme="info"
+                    size="btn-sm"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Info"
+                    theme="info"
+                    size="btn-xs"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Info"
+                    theme="info"
+                    :isFlat="true"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Info"
+                    theme="info"
+                    :isDisabled="true"
+                  ></va-button>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <va-button
+                    name="Danger"
+                    theme="danger"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Danger"
+                    theme="danger"
+                    size="btn-lg"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Danger"
+                    theme="danger"
+                    size="btn-sm"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Danger"
+                    theme="danger"
+                    size="btn-xs"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Danger"
+                    theme="danger"
+                    :isFlat="true"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Danger"
+                    theme="danger"
+                    :isDisabled="true"
+                  ></va-button>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <va-button
+                    name="Warning"
+                    theme="warning"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Warning"
+                    theme="warning"
+                    size="btn-lg"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Warning"
+                    theme="warning"
+                    size="btn-sm"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Warning"
+                    theme="warning"
+                    size="btn-xs"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Warning"
+                    theme="warning"
+                    :isFlat="true"
+                  ></va-button>
+                </td>
+                <td>
+                  <va-button
+                    name="Warning"
+                    theme="warning"
+                    :isDisabled="true"
+                  ></va-button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </va-box>
+    </div>
+    <div class="col-md-6">
+
+      <va-box
+        title="Block Buttons"
+        widgetType=""
+      >
+        <div slot="content" class="table-responsive">
+          <va-button
+            name=".btn-block"
+          ></va-button>
+
+          <va-button
+            name=".btn-block"
+            :isFloat="true"
+          ></va-button>
+
+
+          <va-button
+            name=".btn-block"
+            size="btn-sm"
+          ></va-button>
+
+
+        </div>
+
+      </va-box>
+
+      <va-box
+        title="Horizontal Button Group"
+        widgetType=""
+      >
+
+      </va-box>
+
+      <va-box
+        title="Button Addon"
+        widgetType=""
+      >
+
+      </va-box>
+
+      <va-box
+        title="Split buttons"
+        widgetType=""
+      >
+
+      </va-box>
+
+      <va-box
+        title="Social Buttons (By Lipis)"
+        widgetType=""
+      >
+
+      </va-box>
+
+    </div>
+  </row>
+</template>
+
+<script>
+import VABox from '../../widgets/VABox.vue'
+import VAButton from '../../components/VAButton.vue'
+
+export default {
+  name: 'Buttons',
+  created () {
+
+  },
+  components: {
+    'va-box': VABox,
+    'va-button': VAButton
+  }
+}
+</script>

src/pages/ui-elements/General.vue

@@ -0,0 +1,916 @@
+<template>
+  <div>
+    <div class="box box-default color-palette-box">
+      <div class="box-header with-border">
+        <h3 class="box-title"><i class="fa fa-tag"></i> Color Palette</h3>
+      </div>
+      <div class="box-body">
+        <row>
+          <va-color-palette-set v-for="color in colors[0]"
+            :color="color"
+          ></va-color-palette-set>
+        </row>
+        <!-- /.row -->
+        <row>
+          <va-color-palette-set v-for="color in colors[1]"
+            :color="color"
+          ></va-color-palette-set>
+        </row>
+        <!-- /.row -->
+      </div>
+    </div>
+
+    <h2 class="page-header">Alerts and Callouts</h2>
+
+    <row>
+      <div class="col-md-6">
+        <div class="box box-default">
+          <div class="box-header with-border">
+            <i class="fa fa-warning"></i>
+
+            <h3 class="box-title">Alerts</h3>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body">
+
+            <va-alert
+              type="danger"
+              :dismissible="true">
+              <div slot="header">
+                <h4><i class="icon fa fa-ban"></i> Alert!</h4>
+              </div>
+              <div slot="body">
+                Danger alert preview. This alert is dismissable. A wonderful serenity has taken possession of my entire
+                soul, like these sweet mornings of spring which I enjoy with my whole heart.
+              </div>
+            </va-alert>
+            <va-alert
+              type="info"
+              :dismissible="true">
+              <div slot="header">
+                <h4><i class="icon fa fa-info"></i> Alert!</h4>
+              </div>
+              <div slot="body">
+                Info alert preview. This alert is dismissable.
+              </div>
+            </va-alert>
+            <va-alert
+              type="warning"
+              :dismissible="true">
+              <div slot="header">
+                <h4><i class="icon fa fa-warning"></i> Alert!</h4>
+              </div>
+              <div slot="body">
+                Warning alert preview. This alert is dismissable.
+              </div>
+            </va-alert>
+            <va-alert
+              type="success"
+              :dismissible="true">
+              <div slot="header">
+                <h4><i class="icon fa fa-check"></i> Alert!</h4>
+              </div>
+              <div slot="body">
+                Success alert preview. This alert is dismissable.
+              </div>
+            </va-alert>
+
+          </div>
+          <!-- /.box-body -->
+        </div>
+        <!-- /.box -->
+
+      </div>
+
+      <div class="col-md-6">
+        <div class="box box-default">
+          <div class="box-header with-border">
+            <i class="fa fa-bullhorn"></i>
+
+            <h3 class="box-title">Callouts</h3>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body">
+
+            <va-callout
+              type="danger"
+              title="I am a danger callout!"
+              text="There is a problem that we need to fix. A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart."
+            ></va-callout>
+
+            <va-callout
+              type="info"
+              title="I am an info callout!"
+              text="Follow the steps to continue to payment."
+            ></va-callout>
+
+            <va-callout
+              type="warning"
+              title="I am a warning callout!"
+              text="This is a yellow callout."
+            ></va-callout>
+
+            <va-callout
+              type="success"
+              title="I am a success callout!"
+              text="This is a green callout."
+            ></va-callout>
+
+          </div>
+          <!-- /.box-body -->
+        </div>
+        <!-- /.box -->
+      </div>
+      <!-- /.col -->
+    </row>
+
+    <h2 class="page-header">AdminLTE Custom Tabs</h2>
+
+    <row>
+      <div class="col-md-6">
+
+        <va-custom-tab>
+
+          <li slot="nav"
+              class="dropdown">
+            <a class="dropdown-toggle"
+              data-toggle="dropdown"
+              href="#">
+                                    Dropdown <span class="caret"></span>
+                                  </a>
+            <ul class="dropdown-menu">
+              <li role="presentation"><a role="menuitem"
+                  tabindex="-1"
+                  href="#">Action</a></li>
+              <li role="presentation"><a role="menuitem"
+                  tabindex="-1"
+                  href="#">Another action</a></li>
+              <li role="presentation"><a role="menuitem"
+                  tabindex="-1"
+                  href="#">Something else here</a></li>
+              <li role="presentation"
+                  class="divider"></li>
+              <li role="presentation"><a role="menuitem"
+                  tabindex="-1"
+                  href="#">Separated link</a></li>
+            </ul>
+          </li>
+
+          <li slot="nav"
+              class="pull-right"><a href="#"
+              class="text-muted"><i class="fa fa-gear"></i></a></li>
+
+          <div slot="content"
+              class="active"
+              id="tab_1"
+              title="Tab 1">
+            <b>How to use:</b>
+
+            <p>Exactly like the original bootstrap tabs except you should use the custom wrapper <code>.nav-tabs-custom</code> to achieve this style.</p>
+            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
+          </div>
+          <!-- /.tab-pane -->
+          <div slot="content"
+              id="tab_2"
+              title="Tab 2">
+            The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages.
+          </div>
+          <!-- /.tab-pane -->
+          <div slot="content"
+              id="tab_3"
+              title="Tab 3">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+          </div>
+          <!-- /.tab-pane -->
+
+        </va-custom-tab>
+
+      </div>
+
+
+      <div class="col-md-6">
+
+        <va-custom-tab
+          tabsClass="pull-right"
+        >
+
+          <li slot="nav"
+              class="dropdown">
+            <a class="dropdown-toggle"
+              data-toggle="dropdown"
+              href="#">
+              Dropdown <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+              <li role="presentation"><a role="menuitem"
+                  tabindex="-1"
+                  href="#">Action</a></li>
+              <li role="presentation"><a role="menuitem"
+                  tabindex="-1"
+                  href="#">Another action</a></li>
+              <li role="presentation"><a role="menuitem"
+                  tabindex="-1"
+                  href="#">Something else here</a></li>
+              <li role="presentation"
+                  class="divider"></li>
+              <li role="presentation"><a role="menuitem"
+                  tabindex="-1"
+                  href="#">Separated link</a></li>
+            </ul>
+          </li>
+
+          <li slot="nav" class="pull-left header"><i class="fa fa-th"></i> Custom Tabs</li>
+
+
+          <div slot="content"
+              class="active"
+              id="tab_1"
+              title="Tab 1">
+            <b>How to use:</b>
+
+            <p>Exactly like the original bootstrap tabs except you should use the custom wrapper <code>.nav-tabs-custom</code> to achieve this style.</p>
+            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
+          </div>
+          <!-- /.tab-pane -->
+          <div slot="content"
+              id="tab_2"
+              title="Tab 2">
+            The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages.
+          </div>
+          <!-- /.tab-pane -->
+          <div slot="content"
+              id="tab_3"
+              title="Tab 3">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+          </div>
+          <!-- /.tab-pane -->
+
+        </va-custom-tab>
+
+      </div>
+
+    </row>
+
+    <h2 class="page-header">Progress Bars</h2>
+
+    <row>
+
+      <div class="col-md-6">
+
+        <va-box
+          title="Progress Bars Different Sizes"
+          :isBorder="true"
+          widgetType=""
+        >
+          <div slot="content">
+
+            <p><code>.progress</code></p>
+            <va-progress-bar
+              type="primary"
+              :max="100"
+              :value="40"
+              text="40% Complete (success)"
+            >
+            </va-progress-bar>
+
+            <p>Class: <code>.sm</code></p>
+            <va-progress-bar
+              type="success"
+              size="sm"
+              :max="100"
+              :value="20"
+              :isActive="true"
+              text="20% Complete">
+            </va-progress-bar>
+
+            <p>Class: <code>.xs</code></p>
+            <va-progress-bar
+              type="warning"
+              size="xs"
+              :max="100"
+              :value="60"
+              text="60% Complete (warning)">
+            </va-progress-bar>
+
+            <p>Class: <code>.xxs</code></p>
+            <va-progress-bar
+              type="danger"
+              size="xxs"
+              :max="100"
+              :value="60"
+              text="60% Complete (danger)">
+            </va-progress-bar>
+
+          </div>
+        </va-box>
+
+      </div>
+
+
+      <div class="col-md-6">
+
+
+        <va-box
+          title="Progress bars"
+          :isBorder="true"
+          widgetType=""
+          >
+          <div slot="content">
+
+
+            <va-progress-bar
+              type="green"
+              :isStriped="false"
+              :max="100"
+              :value="40"
+              text="40% Complete (success)">
+            </va-progress-bar>
+
+
+            <va-progress-bar
+              type="aqua"
+              :isStriped="false"
+              :max="100"
+              :value="20"
+              text="20% Complete">
+            </va-progress-bar>
+
+
+            <va-progress-bar
+              type="yellow"
+              :isStriped="false"
+              :max="100"
+              :value="60"
+              text="60% Complete (warning)">
+            </va-progress-bar>
+
+
+            <va-progress-bar
+              type="red"
+              :isStriped="false"
+              :max="100"
+              :value="80"
+              text="80% Complete">
+            </va-progress-bar>
+
+
+          </div>
+        </va-box>
+
+
+      </div>
+
+    </row>
+
+    <row>
+
+      <div class="col-md-6">
+
+        <va-box title="Vertical Progress Bars Different Sizes"
+            :isBorder="true"
+            widgetType="">
+          <div slot="content" class="text-center">
+
+            <p>By adding the class <code>.vertical</code> and <code>.progress-sm</code>, <code>.progress-xs</code> or
+              <code>.progress-xxs</code> we achieve:</p>
+
+
+            <va-progress-bar
+              type="primary"
+              :max="100"
+              :value="40"
+              :isActive="true"
+              :isVertical="true"
+              text="40%">
+            </va-progress-bar>
+
+
+            <va-progress-bar
+              type="success"
+              size="sm"
+              :max="100"
+              :value="20"
+              :isActive="true"
+              :isVertical="true"
+              text="20%">
+            </va-progress-bar>
+
+
+            <va-progress-bar
+              type="warning"
+              size="xs"
+              :max="100"
+              :value="60"
+              :isActive="true"
+              :isVertical="true"
+              text="60%">
+            </va-progress-bar>
+
+
+            <va-progress-bar
+              type="info"
+              size="xxs"
+              :max="100"
+              :value="60"
+              :isActive="true"
+              :isVertical="true"
+              text="60%">
+            </va-progress-bar>
+
+          </div>
+        </va-box>
+      </div>
+
+      <div class="col-md-6">
+
+        <va-box
+          title="Vertical Progress bars"
+          :isBorder="true"
+          widgetType="">
+          <div slot="content" class="text-center">
+
+            <p>By adding the class <code>.vertical</code> we achieve:</p>
+
+            <va-progress-bar
+              type="green"
+              :max="100"
+              :value="40"
+              :isStriped="false"
+              :isVertical="true"
+              text="40%">
+            </va-progress-bar>
+
+            <va-progress-bar
+              type="aqua"
+              :max="100"
+              :value="20"
+              :isStriped="false"
+              :isVertical="true"
+              text="20%">
+            </va-progress-bar>
+
+            <va-progress-bar
+              type="yellow"
+              :max="100"
+              :value="60"
+              :isStriped="false"
+              :isVertical="true"
+              text="60%">
+            </va-progress-bar>
+
+            <va-progress-bar
+              type="red"
+              :max="100"
+              :value="60"
+              :isStriped="false"
+              :isVertical="true"
+              text="60%">
+            </va-progress-bar>
+
+          </div>
+        </va-box>
+      </div>
+
+
+    </row>
+
+    <h2 class="page-header">Bootstrap Accordion & Carousel</h2>
+
+    <row>
+      <div class="col-md-6">
+
+
+        <va-box
+          title="Collapsible Accordion"
+          :isBorder="true"
+          widgetType="">
+
+          <div slot="content" class="text-center">
+
+            <va-accordion
+              :list="accordion.list"
+            >
+
+            </va-accordion>
+
+
+          </div>
+
+        </va-box>
+
+      </div>
+
+      <div class="col-md-6">
+        <va-box
+          title="Carousel"
+          :isBorder="true"
+          widgetType="">
+
+          <div slot="content">
+
+            <va-carousel
+              :name="carousel.name"
+              :list="carousel.list"
+            >
+            </va-carousel>
+
+          </div>
+
+        </va-box>
+
+      </div>
+
+    </row>
+
+    <h2 class="page-header">Typography</h2>
+
+    <row>
+
+      <div class="col-md-6">
+        <va-box
+          title="Headlines"
+          :isBorder="true"
+          widgetType="">
+          <i slot="icon-title" class="fa fa-text-width"></i>
+
+          <div slot="content">
+
+            <h1>h1. Bootstrap heading</h1>
+
+            <h2>h2. Bootstrap heading</h2>
+
+            <h3>h3. Bootstrap heading</h3>
+            <h4>h4. Bootstrap heading</h4>
+            <h5>h5. Bootstrap heading</h5>
+            <h6>h6. Bootstrap heading</h6>
+
+          </div>
+
+
+        </va-box>
+
+      </div>
+
+      <div class="col-md-6">
+
+        <va-box
+          title="Text Emphasis"
+          :isBorder="true"
+          widgetType="">
+          <i slot="icon-title" class="fa fa-text-width"></i>
+
+          <div slot="content">
+
+            <va-text>
+              Lead to emphasize importance
+            </va-text>
+
+            <va-text type="green">
+              Text green to emphasize success
+            </va-text>
+
+            <va-text type="aqua">
+              Text aqua to emphasize info
+            </va-text>
+
+            <va-text type="light-blue">
+              Text light blue to emphasize info (2)
+            </va-text>
+
+            <va-text type="red">
+              Text red to emphasize danger
+            </va-text>
+
+            <va-text type="yellow">
+              Text yellow to emphasize warning
+            </va-text>
+
+            <va-text type="muted">
+              Text muted to emphasize general
+            </va-text>
+
+          </div>
+        </va-box>
+
+
+
+      </div>
+
+    </row>
+
+    <row>
+
+      <div class="col-md-6">
+
+        <va-box
+          title="Block Quotes"
+          :isBorder="true"
+          widgetType="">
+          <i slot="icon-title" class="fa fa-text-width"></i>
+
+          <div slot="content">
+
+              <blockquote>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+              </blockquote>
+
+          </div>
+        </va-box>
+
+      </div>
+
+      <div class="col-md-6">
+
+        <va-box
+          title="Block Quotes Pulled Right"
+          :isBorder="true"
+          widgetType="">
+          <i slot="icon-title" class="fa fa-text-width"></i>
+
+          <div slot="content">
+
+              <blockquote class="pull-right">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+              </blockquote>
+
+          </div>
+        </va-box>
+
+      </div>
+
+    </row>
+
+    <row>
+
+      <div class="col-md-4">
+
+        <va-box
+          title="Unordered Lists"
+          :isBorder="true"
+          widgetType="">
+          <i slot="icon-title" class="fa fa-text-width"></i>
+
+          <div slot="content">
+
+            <ul>
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Consectetur adipiscing elit</li>
+              <li>Integer molestie lorem at massa</li>
+              <li>Facilisis in pretium nisl aliquet</li>
+              <li>Nulla volutpat aliquam velit
+                <ul>
+                  <li>Phasellus iaculis neque</li>
+                  <li>Purus sodales ultricies</li>
+                  <li>Vestibulum laoreet porttitor sem</li>
+                  <li>Ac tristique libero volutpat at</li>
+                </ul>
+              </li>
+              <li>Faucibus porta lacus fringilla vel</li>
+              <li>Aenean sit amet erat nunc</li>
+              <li>Eget porttitor lorem</li>
+            </ul>
+
+          </div>
+        </va-box>
+      </div>
+
+      <div class="col-md-4">
+
+        <va-box
+          title="Ordered Lists"
+          :isBorder="true"
+          widgetType="">
+          <i slot="icon-title" class="fa fa-text-width"></i>
+
+          <div slot="content">
+
+            <ol>
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Consectetur adipiscing elit</li>
+              <li>Integer molestie lorem at massa</li>
+              <li>Facilisis in pretium nisl aliquet</li>
+              <li>Nulla volutpat aliquam velit
+                <ol>
+                  <li>Phasellus iaculis neque</li>
+                  <li>Purus sodales ultricies</li>
+                  <li>Vestibulum laoreet porttitor sem</li>
+                  <li>Ac tristique libero volutpat at</li>
+                </ol>
+              </li>
+              <li>Faucibus porta lacus fringilla vel</li>
+              <li>Aenean sit amet erat nunc</li>
+              <li>Eget porttitor lorem</li>
+            </ol>
+
+          </div>
+        </va-box>
+      </div>
+
+      <div class="col-md-4">
+
+        <va-box
+          title="Unstyled Lists"
+          :isBorder="true"
+          widgetType="">
+          <i slot="icon-title" class="fa fa-text-width"></i>
+
+          <div slot="content">
+
+            <ul class="list-unstyled">
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Consectetur adipiscing elit</li>
+              <li>Integer molestie lorem at massa</li>
+              <li>Facilisis in pretium nisl aliquet</li>
+              <li>Nulla volutpat aliquam velit
+                <ul>
+                  <li>Phasellus iaculis neque</li>
+                  <li>Purus sodales ultricies</li>
+                  <li>Vestibulum laoreet porttitor sem</li>
+                  <li>Ac tristique libero volutpat at</li>
+                </ul>
+              </li>
+              <li>Faucibus porta lacus fringilla vel</li>
+              <li>Aenean sit amet erat nunc</li>
+              <li>Eget porttitor lorem</li>
+            </ul>
+
+          </div>
+        </va-box>
+      </div>
+    </row>
+
+    <row>
+
+      <div class="col-md-6">
+
+        <va-box
+          title="Description"
+          :isBorder="true"
+          widgetType="">
+          <i slot="icon-title" class="fa fa-text-width"></i>
+
+          <div slot="content">
+
+            <dl>
+              <dt>Description lists</dt>
+              <dd>A description list is perfect for defining terms.</dd>
+              <dt>Euismod</dt>
+              <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+              <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+              <dt>Malesuada porta</dt>
+              <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+            </dl>
+
+          </div>
+
+        </va-box>
+      </div>
+
+
+      <div class="col-md-6">
+
+        <va-box
+          title="Description Horizontal"
+          :isBorder="true"
+          widgetType="">
+          <i slot="icon-title" class="fa fa-text-width"></i>
+
+          <div slot="content">
+
+            <dl class="dl-horizontal">
+              <dt>Description lists</dt>
+              <dd>A description list is perfect for defining terms.</dd>
+              <dt>Euismod</dt>
+              <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+              <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+              <dt>Malesuada porta</dt>
+              <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+              <dt>Felis euismod semper eget lacinia</dt>
+              <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
+                sit amet risus.
+              </dd>
+            </dl>
+
+          </div>
+
+        </va-box>
+      </div>
+
+    </row>
+
+  </div>
+
+</template>
+
+<script>
+import VAColorPaletteSet from '../../components/VAColorPaletteSet.vue'
+import VAAlert from '../../components/VAAlert.vue'
+import VACallout from '../../components/VACallout.vue'
+import VACustomTab from '../../components/VACustomTab.vue'
+import VABox from '../../widgets/VABox.vue'
+import VAProgressBar from '../../components/VAProgressBar.vue'
+import VAAccordion from '../../components/VAAccordion.vue'
+import VACarousel from '../../components/VACarousel.vue'
+import VAText from '../../components/VAText.vue'
+
+export default {
+  name: 'General',
+  data () {
+    return {
+      colors: [
+        ['Primary', 'Info', 'Success', 'Warning', 'Danger', 'Gray'],
+        ['Navi', 'Teal', 'Purple', 'Orange', 'Maroon', 'Black']
+      ],
+      accordion: {
+        list: [
+          {
+            id: 'collapseOne',
+            type: 'primary',
+            title: 'Collapsible Group Item #1',
+            content: `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.`
+          },
+          {
+            id: 'collapseTwo',
+            type: 'danger',
+            title: 'Collapsible Group Danger',
+            content: `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.`
+          },
+          {
+            id: 'collapseThree',
+            type: 'success',
+            title: 'Collapsible Group Success',
+            content: `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.`
+          }
+        ]
+      },
+      carousel: {
+        name: 'carousel-example',
+        list: [
+          {
+            image: 'http://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap',
+            text: 'First Slide'
+          },
+          {
+            image: 'http://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap',
+            text: 'Second Slide'
+          },
+          {
+            image: 'http://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap',
+            text: 'Third Slide'
+          }
+        ]
+      }
+    }
+  },
+  created () {
+
+  },
+  components: {
+    'va-color-palette-set': VAColorPaletteSet,
+    'va-alert': VAAlert,
+    'va-callout': VACallout,
+    'va-custom-tab': VACustomTab,
+    'va-box': VABox,
+    'va-progress-bar': VAProgressBar,
+    'va-accordion': VAAccordion,
+    'va-carousel': VACarousel,
+    'va-text': VAText
+  }
+}
+</script>
+
+<style>
+
+.color-palette {
+  height: 35px;
+  line-height: 35px;
+  text-align: center;
+}
+
+.color-palette-set {
+  margin-bottom: 15px;
+}
+
+.color-palette span {
+  display: none;
+  font-size: 12px;
+}
+
+.color-palette:hover span {
+  display: block;
+}
+
+.color-palette-box h4 {
+  position: absolute;
+  top: 100%;
+  left: 25px;
+  margin-top: -40px;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 12px;
+  display: block;
+  z-index: 7;
+}
+
+</style>

src/pages/ui-elements/Icons.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    Icons Page
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Icons',
+  created () {
+
+  }
+}
+</script>

src/pages/ui-elements/Modals.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    Modals Page
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Modals',
+  created () {
+
+  }
+}
+</script>

src/pages/ui-elements/Sliders.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    Sliders Page
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Sliders',
+  created () {
+
+  }
+}
+</script>

src/pages/ui-elements/Timeline.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    Timeline Page
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Timeline',
+  created () {
+
+  }
+}
+</script>

src/router/index.js

@@ -0,0 +1,117 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Hello from 'components/Hello.vue'
+import Sample from 'components/Sample.vue'
+import DashboardV1 from 'examples/Dashboard.v1.vue'
+import DashboardV2 from 'examples/Dashboard.v2.vue'
+import InfoBoxExample from 'examples/InfoBoxExample'
+import ChartExample from 'examples/ChartExample'
+import AlertExample from 'examples/AlertExample'
+import ModalExample from 'examples/ModalExample'
+import WidgetsExample from 'examples/WidgetsExample'
+import APIExample from 'examples/APIExample'
+
+// UI Element Groups
+import General from 'pages/ui-elements/General.vue'
+import Icons from 'pages/ui-elements/Icons.vue'
+import Buttons from 'pages/ui-elements/Buttons.vue'
+import Sliders from 'pages/ui-elements/Sliders.vue'
+import Timeline from 'pages/ui-elements/Timeline.vue'
+import Modals from 'pages/ui-elements/Modals.vue'
+
+// forms
+import GeneralElements from 'pages/forms/GeneralElements.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  mode: 'history',
+  routes: [
+    {
+      path: '/',
+      name: 'Hello',
+      component: Hello
+    },
+    {
+      path: '/sample',
+      name: 'Sample',
+      component: Sample
+    },
+    {
+      path: '/dashboard/v1',
+      name: 'DashboardV1',
+      component: DashboardV1
+    },
+    {
+      path: '/dashboard/v2',
+      name: 'DashboardV2',
+      component: DashboardV2
+    },
+    {
+      path: '/examples/infobox',
+      name: 'InfoBoxExample',
+      component: InfoBoxExample
+    },
+    {
+      path: '/examples/chart',
+      name: 'ChartExample',
+      component: ChartExample
+    },
+    {
+      path: '/examples/alert',
+      name: 'AlertExample',
+      component: AlertExample
+    },
+    {
+      path: '/examples/modal',
+      name: 'ModalExample',
+      component: ModalExample
+    },
+    {
+      path: '/examples/widgets',
+      name: 'WidgetsExample',
+      component: WidgetsExample
+    },
+    {
+      path: '/examples/api-example',
+      name: 'APIExample',
+      component: APIExample
+    },
+    {
+      path: '/ui-elements/general',
+      name: 'General',
+      component: General
+    },
+    {
+      path: '/ui-elements/icons',
+      name: 'Icons',
+      component: Icons
+    },
+    {
+      path: '/ui-elements/buttons',
+      name: 'Buttons',
+      component: Buttons
+    },
+    {
+      path: '/ui-elements/sliders',
+      name: 'Sliders',
+      component: Sliders
+    },
+    {
+      path: '/ui-elements/timeline',
+      name: 'Timeline',
+      component: Timeline
+    },
+    {
+      path: '/ui-elements/modals',
+      name: 'Modals',
+      component: Modals
+    },
+    {
+      path: '/forms/general-elements',
+      name: 'GeneralElements',
+      component: GeneralElements
+    }
+  ],
+  linkActiveClass: 'active'
+})

src/vuex/actions.js

@@ -0,0 +1,14 @@
+import * as types from './mutation-types'
+import { services } from './api'
+
+export const fetchProduct = ({ commit }) => {
+  // API request
+  return services.products.getAll()
+  .then((response) => {
+    console.log(response)
+    commit(types.FETCH_PRODUCT, response.data)
+  })
+  .catch((error) => {
+    console.error(error)
+  })
+}

src/vuex/api/index.js

@@ -0,0 +1,2 @@
+import SERVICES from './services'
+export const services = SERVICES

src/vuex/api/services/index.js

@@ -0,0 +1,5 @@
+import products from './products'
+
+export default {
+  products
+}

src/vuex/api/services/products.js

@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+export default {
+  getAll (request = {}) {
+    return axios.get('http://localhost:3000/products', request)
+          .then((response) => Promise.resolve(response))
+          .catch((error) => Promise.reject(error))
+  }
+}

src/vuex/getters.js

@@ -0,0 +1,5 @@
+export const unreadMessagesCount = state => state.messages.main.length
+export const unreadNotificationsCount = state => state.notifications.main.length
+export const remainTasksCount = state => state.tasks.main.length
+export const currentUser = state => state.user.main
+export const totalProduct = state => state.products.main

src/vuex/modules/index.js

@@ -0,0 +1,9 @@
+const files = require.context('.', false, /\.js$/)
+const modules = {}
+
+files.keys().forEach((key) => {
+  if (key === './index.js') return
+  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
+
+export default modules

src/vuex/modules/messages.js

@@ -0,0 +1,37 @@
+const state = {
+  main: [
+    {
+      id: 1,
+      body: 'Message 1'
+    },
+    {
+      id: 2,
+      body: 'Message 2'
+    },
+    {
+      id: 3,
+      body: 'Message 3'
+    },
+    {
+      id: 4,
+      body: 'Message 4'
+    },
+    {
+      id: 5,
+      body: 'Message 5'
+    },
+    {
+      id: 5,
+      body: 'Message 5'
+    }
+  ]
+}
+
+const mutations = {
+
+}
+
+export default {
+  state,
+  mutations
+}

src/vuex/modules/notifications.js

@@ -0,0 +1,21 @@
+const state = {
+  main: [
+    {
+      id: 1,
+      body: 'Noti 1'
+    },
+    {
+      id: 2,
+      body: 'Noti 2'
+    }
+  ]
+}
+
+const mutations = {
+
+}
+
+export default {
+  state,
+  mutations
+}

src/vuex/modules/products.js

@@ -0,0 +1,16 @@
+import * as types from '../mutation-types'
+
+const state = {
+  main: []
+}
+
+const mutations = {
+  [types.FETCH_PRODUCT] (state, products) {
+    state.main = products
+  }
+}
+
+export default {
+  state,
+  mutations
+}

src/vuex/modules/tasks.js

@@ -0,0 +1,29 @@
+const state = {
+  main: [
+    {
+      id: 1,
+      body: 'Task 1'
+    },
+    {
+      id: 2,
+      body: 'Task 2'
+    },
+    {
+      id: 3,
+      body: 'Task 3'
+    },
+    {
+      id: 4,
+      body: 'Task 4'
+    }
+  ]
+}
+
+const mutations = {
+
+}
+
+export default {
+  state,
+  mutations
+}

src/vuex/modules/user.js

@@ -0,0 +1,20 @@
+const state = {
+  main: {
+    name: 'Alexander Pierce',
+    position: 'Web Developer',
+    state: {
+      color: '#3c763d',
+      name: 'Online'
+    },
+    createdAt: new Date()
+  }
+}
+
+const mutations = {
+
+}
+
+export default {
+  state,
+  mutations
+}

src/vuex/mutation-types.js

@@ -0,0 +1 @@
+export const FETCH_PRODUCT = 'FETCH_PRODUCT'

src/vuex/store.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import * as actions from './actions'
+import * as getters from './getters'
+import modules from './modules'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  actions,
+  getters,
+  modules,
+  strict: process.env.NODE_ENV !== 'production'
+})

src/widgets/VABox.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="box" :class="[theme, this.isOpen?'':'collapsed-box', isBorder?'box-solid':'']">
+    <div class="box-header" :class="isBorder?'with-border':''">
+      <slot name="icon-title"></slot>
+      <h3 class="box-title">{{ title }}</h3>
+
+      <div class="box-tools pull-right">
+        <button type="button" class="btn btn-box-tool" :data-widget="widgetType"><i :class="btnIcon"></i>
+        </button>
+      </div>
+      <!-- /.box-tools -->
+    </div>
+    <!-- /.box-header -->
+    <div class="box-body">
+      <slot name="content"></slot>
+    </div>
+    <!-- /.box-body -->
+
+    <div v-if="this.isLoading" class="overlay">
+      <i class="fa fa-refresh fa-spin"></i>
+    </div>
+  </div>
+  <!-- /.box -->
+</template>
+
+<script>
+export default {
+  name: 'va-box',
+  props: {
+    widgetType: {
+      type: String,
+      default: 'collapse'
+    },
+    title: {
+      type: String
+    },
+    content: {
+      type: String
+    },
+    theme: {
+      type: String
+    },
+    isOpen: {
+      type: Boolean,
+      default: true
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
+    },
+    isBorder: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    btnIcon () {
+      if (this.widgetType === 'collapse') {
+        return this.isOpen ? 'fa fa-minus' : 'fa fa-plus'
+      } else if (this.widgetType === 'remove') {
+        return 'fa fa-times'
+      }
+      return ''
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/widgets/VACalendar.vue

@@ -0,0 +1,884 @@
+<template>
+  <!-- Calendar -->
+  <div class="box box-solid bg-green-gradient">
+    <div class="box-header">
+      <i class="fa fa-calendar"></i>
+
+      <h3 class="box-title">Calendar</h3>
+      <!-- tools box -->
+      <div class="pull-right box-tools">
+        <!-- button with a dropdown -->
+        <div class="btn-group">
+          <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
+            <i class="fa fa-bars"></i></button>
+          <ul class="dropdown-menu pull-right" role="menu">
+            <li><a href="#">Add new event</a></li>
+            <li><a href="#">Clear events</a></li>
+            <li class="divider"></li>
+            <li><a href="#">View calendar</a></li>
+          </ul>
+        </div>
+        <button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
+        </button>
+        <button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i>
+        </button>
+      </div>
+      <!-- /. tools -->
+    </div>
+    <!-- /.box-header -->
+    <div class="box-body no-padding">
+      <!--The calendar -->
+      <div class="id-calendar" style="width: 100%"></div>
+    </div>
+    <!-- /.box-body -->
+    <div class="box-footer text-black">
+      <row>
+        <div class="col-sm-6">
+          <!-- Progress bars -->
+          <div class="clearfix">
+            <span class="pull-left">Task #1</span>
+            <small class="pull-right">90%</small>
+          </div>
+          <div class="progress xs">
+            <div class="progress-bar progress-bar-green" style="width: 90%;"></div>
+          </div>
+
+          <div class="clearfix">
+            <span class="pull-left">Task #2</span>
+            <small class="pull-right">70%</small>
+          </div>
+          <div class="progress xs">
+            <div class="progress-bar progress-bar-green" style="width: 70%;"></div>
+          </div>
+        </div>
+        <!-- /.col -->
+        <div class="col-sm-6">
+          <div class="clearfix">
+            <span class="pull-left">Task #3</span>
+            <small class="pull-right">60%</small>
+          </div>
+          <div class="progress xs">
+            <div class="progress-bar progress-bar-green" style="width: 60%;"></div>
+          </div>
+
+          <div class="clearfix">
+            <span class="pull-left">Task #4</span>
+            <small class="pull-right">40%</small>
+          </div>
+          <div class="progress xs">
+            <div class="progress-bar progress-bar-green" style="width: 40%;"></div>
+          </div>
+        </div>
+        <!-- /.col -->
+      </row>
+      <!-- /.row -->
+    </div>
+  </div>
+  <!-- /.box -->
+</template>
+
+<script>
+
+export default {
+  name: 'va-calendar',
+  mounted () {
+    $(this.$el).find('.id-calendar').datepicker()
+  }
+}
+</script>
+
+<style>
+
+/*!
+ * datepicker for Bootstrap
+ *
+ * Copyright 2012 Stefan Petre
+ * Improvements by Andrew Rowls
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+.ui-datepicker {
+  padding: 4px;
+  border-radius: 4px;
+  direction: ltr;
+  /*.dow {
+		border-top: 1px solid #ddd !important;
+	}*/
+}
+.ui-datepicker-inline {
+  width: 100%;
+}
+.ui-datepicker.ui-datepicker-rtl {
+  direction: rtl;
+}
+.ui-datepicker.ui-datepicker-rtl table tr td span {
+  float: right;
+}
+.ui-datepicker-dropdown {
+  top: 0;
+  left: 0;
+}
+.ui-datepicker-dropdown:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-top: 0;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+}
+.ui-datepicker-dropdown:after {
+  content: '';
+  display: inline-block;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-top: 0;
+  position: absolute;
+}
+.ui-datepicker-dropdown.ui-datepicker-orient-left:before {
+  left: 6px;
+}
+.ui-datepicker-dropdown.ui-datepicker-orient-left:after {
+  left: 7px;
+}
+.ui-datepicker-dropdown.ui-datepicker-orient-right:before {
+  right: 6px;
+}
+.ui-datepicker-dropdown.ui-datepicker-orient-right:after {
+  right: 7px;
+}
+.ui-datepicker-dropdown.ui-datepicker-orient-top:before {
+  top: -7px;
+}
+.ui-datepicker-dropdown.ui-datepicker-orient-top:after {
+  top: -6px;
+}
+.ui-datepicker-dropdown.ui-datepicker-orient-bottom:before {
+  bottom: -7px;
+  border-bottom: 0;
+  border-top: 7px solid #999;
+}
+.ui-datepicker-dropdown.ui-datepicker-orient-bottom:after {
+  bottom: -6px;
+  border-bottom: 0;
+  border-top: 6px solid #fff;
+}
+.ui-datepicker > div {
+  display: none;
+}
+.ui-datepicker.days div.ui-datepicker-days {
+  display: block;
+}
+.ui-datepicker.months div.ui-datepicker-months {
+  display: block;
+}
+.ui-datepicker.years div.ui-datepicker-years {
+  display: block;
+}
+.ui-datepicker table {
+  margin: 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ui-datepicker table tr td,
+.ui-datepicker table tr th {
+  text-align: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  border: none;
+}
+.table-striped .ui-datepicker table tr td,
+.table-striped .ui-datepicker table tr th {
+  background-color: transparent;
+}
+.ui-datepicker table tr td.day:hover,
+.ui-datepicker table tr td.day.focused {
+  background: rgba(0,0,0,0.2);
+  cursor: pointer;
+}
+.ui-datepicker table tr td.old,
+.ui-datepicker table tr td.new {
+  color: #777;
+}
+.ui-datepicker table tr td.disabled,
+.ui-datepicker table tr td.disabled:hover {
+  background: none;
+  color: #444;
+  cursor: default;
+}
+.ui-datepicker table tr td.today,
+.ui-datepicker table tr td.today:hover,
+.ui-datepicker table tr td.today.disabled,
+.ui-datepicker table tr td.today.disabled:hover {
+  color: #000000;
+  background: rgba(0,0,0,0.2);
+  border-color: #ffb733;
+}
+.ui-datepicker table tr td.today:hover,
+.ui-datepicker table tr td.today:hover:hover,
+.ui-datepicker table tr td.today.disabled:hover,
+.ui-datepicker table tr td.today.disabled:hover:hover,
+.ui-datepicker table tr td.today:focus,
+.ui-datepicker table tr td.today:hover:focus,
+.ui-datepicker table tr td.today.disabled:focus,
+.ui-datepicker table tr td.today.disabled:hover:focus,
+.ui-datepicker table tr td.today:active,
+.ui-datepicker table tr td.today:hover:active,
+.ui-datepicker table tr td.today.disabled:active,
+.ui-datepicker table tr td.today.disabled:hover:active,
+.ui-datepicker table tr td.today.active,
+.ui-datepicker table tr td.today:hover.active,
+.ui-datepicker table tr td.today.disabled.active,
+.ui-datepicker table tr td.today.disabled:hover.active,
+.open .dropdown-toggle.ui-datepicker table tr td.today,
+.open .dropdown-toggle.ui-datepicker table tr td.today:hover,
+.open .dropdown-toggle.ui-datepicker table tr td.today.disabled,
+.open .dropdown-toggle.ui-datepicker table tr td.today.disabled:hover {
+  color: #000000;
+  background: rgba(0,0,0,0.2);
+  border-color: #f59e00;
+}
+.ui-datepicker table tr td.today:active,
+.ui-datepicker table tr td.today:hover:active,
+.ui-datepicker table tr td.today.disabled:active,
+.ui-datepicker table tr td.today.disabled:hover:active,
+.ui-datepicker table tr td.today.active,
+.ui-datepicker table tr td.today:hover.active,
+.ui-datepicker table tr td.today.disabled.active,
+.ui-datepicker table tr td.today.disabled:hover.active,
+.open .dropdown-toggle.ui-datepicker table tr td.today,
+.open .dropdown-toggle.ui-datepicker table tr td.today:hover,
+.open .dropdown-toggle.ui-datepicker table tr td.today.disabled,
+.open .dropdown-toggle.ui-datepicker table tr td.today.disabled:hover {
+  background-image: none;
+}
+.ui-datepicker table tr td.today.disabled,
+.ui-datepicker table tr td.today:hover.disabled,
+.ui-datepicker table tr td.today.disabled.disabled,
+.ui-datepicker table tr td.today.disabled:hover.disabled,
+.ui-datepicker table tr td.today[disabled],
+.ui-datepicker table tr td.today:hover[disabled],
+.ui-datepicker table tr td.today.disabled[disabled],
+.ui-datepicker table tr td.today.disabled:hover[disabled],
+fieldset[disabled] .ui-datepicker table tr td.today,
+fieldset[disabled] .ui-datepicker table tr td.today:hover,
+fieldset[disabled] .ui-datepicker table tr td.today.disabled,
+fieldset[disabled] .ui-datepicker table tr td.today.disabled:hover,
+.ui-datepicker table tr td.today.disabled:hover,
+.ui-datepicker table tr td.today:hover.disabled:hover,
+.ui-datepicker table tr td.today.disabled.disabled:hover,
+.ui-datepicker table tr td.today.disabled:hover.disabled:hover,
+.ui-datepicker table tr td.today[disabled]:hover,
+.ui-datepicker table tr td.today:hover[disabled]:hover,
+.ui-datepicker table tr td.today.disabled[disabled]:hover,
+.ui-datepicker table tr td.today.disabled:hover[disabled]:hover,
+fieldset[disabled] .ui-datepicker table tr td.today:hover,
+fieldset[disabled] .ui-datepicker table tr td.today:hover:hover,
+fieldset[disabled] .ui-datepicker table tr td.today.disabled:hover,
+fieldset[disabled] .ui-datepicker table tr td.today.disabled:hover:hover,
+.ui-datepicker table tr td.today.disabled:focus,
+.ui-datepicker table tr td.today:hover.disabled:focus,
+.ui-datepicker table tr td.today.disabled.disabled:focus,
+.ui-datepicker table tr td.today.disabled:hover.disabled:focus,
+.ui-datepicker table tr td.today[disabled]:focus,
+.ui-datepicker table tr td.today:hover[disabled]:focus,
+.ui-datepicker table tr td.today.disabled[disabled]:focus,
+.ui-datepicker table tr td.today.disabled:hover[disabled]:focus,
+fieldset[disabled] .ui-datepicker table tr td.today:focus,
+fieldset[disabled] .ui-datepicker table tr td.today:hover:focus,
+fieldset[disabled] .ui-datepicker table tr td.today.disabled:focus,
+fieldset[disabled] .ui-datepicker table tr td.today.disabled:hover:focus,
+.ui-datepicker table tr td.today.disabled:active,
+.ui-datepicker table tr td.today:hover.disabled:active,
+.ui-datepicker table tr td.today.disabled.disabled:active,
+.ui-datepicker table tr td.today.disabled:hover.disabled:active,
+.ui-datepicker table tr td.today[disabled]:active,
+.ui-datepicker table tr td.today:hover[disabled]:active,
+.ui-datepicker table tr td.today.disabled[disabled]:active,
+.ui-datepicker table tr td.today.disabled:hover[disabled]:active,
+fieldset[disabled] .ui-datepicker table tr td.today:active,
+fieldset[disabled] .ui-datepicker table tr td.today:hover:active,
+fieldset[disabled] .ui-datepicker table tr td.today.disabled:active,
+fieldset[disabled] .ui-datepicker table tr td.today.disabled:hover:active,
+.ui-datepicker table tr td.today.disabled.active,
+.ui-datepicker table tr td.today:hover.disabled.active,
+.ui-datepicker table tr td.today.disabled.disabled.active,
+.ui-datepicker table tr td.today.disabled:hover.disabled.active,
+.ui-datepicker table tr td.today[disabled].active,
+.ui-datepicker table tr td.today:hover[disabled].active,
+.ui-datepicker table tr td.today.disabled[disabled].active,
+.ui-datepicker table tr td.today.disabled:hover[disabled].active,
+fieldset[disabled] .ui-datepicker table tr td.today.active,
+fieldset[disabled] .ui-datepicker table tr td.today:hover.active,
+fieldset[disabled] .ui-datepicker table tr td.today.disabled.active,
+fieldset[disabled] .ui-datepicker table tr td.today.disabled:hover.active {
+  background: rgba(0,0,0,0.2);
+  border-color: #ffb733;
+}
+.ui-datepicker table tr td.today:hover:hover {
+  color: #000;
+}
+.ui-datepicker table tr td.today.active:hover {
+  color: #fff;
+}
+.ui-datepicker table tr td.range,
+.ui-datepicker table tr td.range:hover,
+.ui-datepicker table tr td.range.disabled,
+.ui-datepicker table tr td.range.disabled:hover {
+  background: rgba(0,0,0,0.2);
+  border-radius: 0;
+}
+.ui-datepicker table tr td.range.today,
+.ui-datepicker table tr td.range.today:hover,
+.ui-datepicker table tr td.range.today.disabled,
+.ui-datepicker table tr td.range.today.disabled:hover {
+  color: #000000;
+  background: rgba(0,0,0,0.2);
+  border-color: #f1a417;
+  border-radius: 0;
+}
+.ui-datepicker table tr td.range.today:hover,
+.ui-datepicker table tr td.range.today:hover:hover,
+.ui-datepicker table tr td.range.today.disabled:hover,
+.ui-datepicker table tr td.range.today.disabled:hover:hover,
+.ui-datepicker table tr td.range.today:focus,
+.ui-datepicker table tr td.range.today:hover:focus,
+.ui-datepicker table tr td.range.today.disabled:focus,
+.ui-datepicker table tr td.range.today.disabled:hover:focus,
+.ui-datepicker table tr td.range.today:active,
+.ui-datepicker table tr td.range.today:hover:active,
+.ui-datepicker table tr td.range.today.disabled:active,
+.ui-datepicker table tr td.range.today.disabled:hover:active,
+.ui-datepicker table tr td.range.today.active,
+.ui-datepicker table tr td.range.today:hover.active,
+.ui-datepicker table tr td.range.today.disabled.active,
+.ui-datepicker table tr td.range.today.disabled:hover.active,
+.open .dropdown-toggle.ui-datepicker table tr td.range.today,
+.open .dropdown-toggle.ui-datepicker table tr td.range.today:hover,
+.open .dropdown-toggle.ui-datepicker table tr td.range.today.disabled,
+.open .dropdown-toggle.ui-datepicker table tr td.range.today.disabled:hover {
+  color: #000000;
+  background: rgba(0,0,0,0.2);
+  border-color: #bf800c;
+}
+.ui-datepicker table tr td.range.today:active,
+.ui-datepicker table tr td.range.today:hover:active,
+.ui-datepicker table tr td.range.today.disabled:active,
+.ui-datepicker table tr td.range.today.disabled:hover:active,
+.ui-datepicker table tr td.range.today.active,
+.ui-datepicker table tr td.range.today:hover.active,
+.ui-datepicker table tr td.range.today.disabled.active,
+.ui-datepicker table tr td.range.today.disabled:hover.active,
+.open .dropdown-toggle.ui-datepicker table tr td.range.today,
+.open .dropdown-toggle.ui-datepicker table tr td.range.today:hover,
+.open .dropdown-toggle.ui-datepicker table tr td.range.today.disabled,
+.open .dropdown-toggle.ui-datepicker table tr td.range.today.disabled:hover {
+  background-image: none;
+}
+.ui-datepicker table tr td.range.today.disabled,
+.ui-datepicker table tr td.range.today:hover.disabled,
+.ui-datepicker table tr td.range.today.disabled.disabled,
+.ui-datepicker table tr td.range.today.disabled:hover.disabled,
+.ui-datepicker table tr td.range.today[disabled],
+.ui-datepicker table tr td.range.today:hover[disabled],
+.ui-datepicker table tr td.range.today.disabled[disabled],
+.ui-datepicker table tr td.range.today.disabled:hover[disabled],
+fieldset[disabled] .ui-datepicker table tr td.range.today,
+fieldset[disabled] .ui-datepicker table tr td.range.today:hover,
+fieldset[disabled] .ui-datepicker table tr td.range.today.disabled,
+fieldset[disabled] .ui-datepicker table tr td.range.today.disabled:hover,
+.ui-datepicker table tr td.range.today.disabled:hover,
+.ui-datepicker table tr td.range.today:hover.disabled:hover,
+.ui-datepicker table tr td.range.today.disabled.disabled:hover,
+.ui-datepicker table tr td.range.today.disabled:hover.disabled:hover,
+.ui-datepicker table tr td.range.today[disabled]:hover,
+.ui-datepicker table tr td.range.today:hover[disabled]:hover,
+.ui-datepicker table tr td.range.today.disabled[disabled]:hover,
+.ui-datepicker table tr td.range.today.disabled:hover[disabled]:hover,
+fieldset[disabled] .ui-datepicker table tr td.range.today:hover,
+fieldset[disabled] .ui-datepicker table tr td.range.today:hover:hover,
+fieldset[disabled] .ui-datepicker table tr td.range.today.disabled:hover,
+fieldset[disabled] .ui-datepicker table tr td.range.today.disabled:hover:hover,
+.ui-datepicker table tr td.range.today.disabled:focus,
+.ui-datepicker table tr td.range.today:hover.disabled:focus,
+.ui-datepicker table tr td.range.today.disabled.disabled:focus,
+.ui-datepicker table tr td.range.today.disabled:hover.disabled:focus,
+.ui-datepicker table tr td.range.today[disabled]:focus,
+.ui-datepicker table tr td.range.today:hover[disabled]:focus,
+.ui-datepicker table tr td.range.today.disabled[disabled]:focus,
+.ui-datepicker table tr td.range.today.disabled:hover[disabled]:focus,
+fieldset[disabled] .ui-datepicker table tr td.range.today:focus,
+fieldset[disabled] .ui-datepicker table tr td.range.today:hover:focus,
+fieldset[disabled] .ui-datepicker table tr td.range.today.disabled:focus,
+fieldset[disabled] .ui-datepicker table tr td.range.today.disabled:hover:focus,
+.ui-datepicker table tr td.range.today.disabled:active,
+.ui-datepicker table tr td.range.today:hover.disabled:active,
+.ui-datepicker table tr td.range.today.disabled.disabled:active,
+.ui-datepicker table tr td.range.today.disabled:hover.disabled:active,
+.ui-datepicker table tr td.range.today[disabled]:active,
+.ui-datepicker table tr td.range.today:hover[disabled]:active,
+.ui-datepicker table tr td.range.today.disabled[disabled]:active,
+.ui-datepicker table tr td.range.today.disabled:hover[disabled]:active,
+fieldset[disabled] .ui-datepicker table tr td.range.today:active,
+fieldset[disabled] .ui-datepicker table tr td.range.today:hover:active,
+fieldset[disabled] .ui-datepicker table tr td.range.today.disabled:active,
+fieldset[disabled] .ui-datepicker table tr td.range.today.disabled:hover:active,
+.ui-datepicker table tr td.range.today.disabled.active,
+.ui-datepicker table tr td.range.today:hover.disabled.active,
+.ui-datepicker table tr td.range.today.disabled.disabled.active,
+.ui-datepicker table tr td.range.today.disabled:hover.disabled.active,
+.ui-datepicker table tr td.range.today[disabled].active,
+.ui-datepicker table tr td.range.today:hover[disabled].active,
+.ui-datepicker table tr td.range.today.disabled[disabled].active,
+.ui-datepicker table tr td.range.today.disabled:hover[disabled].active,
+fieldset[disabled] .ui-datepicker table tr td.range.today.active,
+fieldset[disabled] .ui-datepicker table tr td.range.today:hover.active,
+fieldset[disabled] .ui-datepicker table tr td.range.today.disabled.active,
+fieldset[disabled] .ui-datepicker table tr td.range.today.disabled:hover.active {
+  background: rgba(0,0,0,0.2);
+  border-color: #f1a417;
+}
+.ui-datepicker table tr td.selected,
+.ui-datepicker table tr td.selected:hover,
+.ui-datepicker table tr td.selected.disabled,
+.ui-datepicker table tr td.selected.disabled:hover {
+  color: #ffffff;
+  background: rgba(0,0,0,0.2);
+  border-color: #555555;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.ui-datepicker table tr td.selected:hover,
+.ui-datepicker table tr td.selected:hover:hover,
+.ui-datepicker table tr td.selected.disabled:hover,
+.ui-datepicker table tr td.selected.disabled:hover:hover,
+.ui-datepicker table tr td.selected:focus,
+.ui-datepicker table tr td.selected:hover:focus,
+.ui-datepicker table tr td.selected.disabled:focus,
+.ui-datepicker table tr td.selected.disabled:hover:focus,
+.ui-datepicker table tr td.selected:active,
+.ui-datepicker table tr td.selected:hover:active,
+.ui-datepicker table tr td.selected.disabled:active,
+.ui-datepicker table tr td.selected.disabled:hover:active,
+.ui-datepicker table tr td.selected.active,
+.ui-datepicker table tr td.selected:hover.active,
+.ui-datepicker table tr td.selected.disabled.active,
+.ui-datepicker table tr td.selected.disabled:hover.active,
+.open .dropdown-toggle.ui-datepicker table tr td.selected,
+.open .dropdown-toggle.ui-datepicker table tr td.selected:hover,
+.open .dropdown-toggle.ui-datepicker table tr td.selected.disabled,
+.open .dropdown-toggle.ui-datepicker table tr td.selected.disabled:hover {
+  color: #ffffff;
+  background: rgba(0,0,0,0.2);
+  border-color: #373737;
+}
+.ui-datepicker table tr td.selected:active,
+.ui-datepicker table tr td.selected:hover:active,
+.ui-datepicker table tr td.selected.disabled:active,
+.ui-datepicker table tr td.selected.disabled:hover:active,
+.ui-datepicker table tr td.selected.active,
+.ui-datepicker table tr td.selected:hover.active,
+.ui-datepicker table tr td.selected.disabled.active,
+.ui-datepicker table tr td.selected.disabled:hover.active,
+.open .dropdown-toggle.ui-datepicker table tr td.selected,
+.open .dropdown-toggle.ui-datepicker table tr td.selected:hover,
+.open .dropdown-toggle.ui-datepicker table tr td.selected.disabled,
+.open .dropdown-toggle.ui-datepicker table tr td.selected.disabled:hover {
+  background-image: none;
+}
+.ui-datepicker table tr td.selected.disabled,
+.ui-datepicker table tr td.selected:hover.disabled,
+.ui-datepicker table tr td.selected.disabled.disabled,
+.ui-datepicker table tr td.selected.disabled:hover.disabled,
+.ui-datepicker table tr td.selected[disabled],
+.ui-datepicker table tr td.selected:hover[disabled],
+.ui-datepicker table tr td.selected.disabled[disabled],
+.ui-datepicker table tr td.selected.disabled:hover[disabled],
+fieldset[disabled] .ui-datepicker table tr td.selected,
+fieldset[disabled] .ui-datepicker table tr td.selected:hover,
+fieldset[disabled] .ui-datepicker table tr td.selected.disabled,
+fieldset[disabled] .ui-datepicker table tr td.selected.disabled:hover,
+.ui-datepicker table tr td.selected.disabled:hover,
+.ui-datepicker table tr td.selected:hover.disabled:hover,
+.ui-datepicker table tr td.selected.disabled.disabled:hover,
+.ui-datepicker table tr td.selected.disabled:hover.disabled:hover,
+.ui-datepicker table tr td.selected[disabled]:hover,
+.ui-datepicker table tr td.selected:hover[disabled]:hover,
+.ui-datepicker table tr td.selected.disabled[disabled]:hover,
+.ui-datepicker table tr td.selected.disabled:hover[disabled]:hover,
+fieldset[disabled] .ui-datepicker table tr td.selected:hover,
+fieldset[disabled] .ui-datepicker table tr td.selected:hover:hover,
+fieldset[disabled] .ui-datepicker table tr td.selected.disabled:hover,
+fieldset[disabled] .ui-datepicker table tr td.selected.disabled:hover:hover,
+.ui-datepicker table tr td.selected.disabled:focus,
+.ui-datepicker table tr td.selected:hover.disabled:focus,
+.ui-datepicker table tr td.selected.disabled.disabled:focus,
+.ui-datepicker table tr td.selected.disabled:hover.disabled:focus,
+.ui-datepicker table tr td.selected[disabled]:focus,
+.ui-datepicker table tr td.selected:hover[disabled]:focus,
+.ui-datepicker table tr td.selected.disabled[disabled]:focus,
+.ui-datepicker table tr td.selected.disabled:hover[disabled]:focus,
+fieldset[disabled] .ui-datepicker table tr td.selected:focus,
+fieldset[disabled] .ui-datepicker table tr td.selected:hover:focus,
+fieldset[disabled] .ui-datepicker table tr td.selected.disabled:focus,
+fieldset[disabled] .ui-datepicker table tr td.selected.disabled:hover:focus,
+.ui-datepicker table tr td.selected.disabled:active,
+.ui-datepicker table tr td.selected:hover.disabled:active,
+.ui-datepicker table tr td.selected.disabled.disabled:active,
+.ui-datepicker table tr td.selected.disabled:hover.disabled:active,
+.ui-datepicker table tr td.selected[disabled]:active,
+.ui-datepicker table tr td.selected:hover[disabled]:active,
+.ui-datepicker table tr td.selected.disabled[disabled]:active,
+.ui-datepicker table tr td.selected.disabled:hover[disabled]:active,
+fieldset[disabled] .ui-datepicker table tr td.selected:active,
+fieldset[disabled] .ui-datepicker table tr td.selected:hover:active,
+fieldset[disabled] .ui-datepicker table tr td.selected.disabled:active,
+fieldset[disabled] .ui-datepicker table tr td.selected.disabled:hover:active,
+.ui-datepicker table tr td.selected.disabled.active,
+.ui-datepicker table tr td.selected:hover.disabled.active,
+.ui-datepicker table tr td.selected.disabled.disabled.active,
+.ui-datepicker table tr td.selected.disabled:hover.disabled.active,
+.ui-datepicker table tr td.selected[disabled].active,
+.ui-datepicker table tr td.selected:hover[disabled].active,
+.ui-datepicker table tr td.selected.disabled[disabled].active,
+.ui-datepicker table tr td.selected.disabled:hover[disabled].active,
+fieldset[disabled] .ui-datepicker table tr td.selected.active,
+fieldset[disabled] .ui-datepicker table tr td.selected:hover.active,
+fieldset[disabled] .ui-datepicker table tr td.selected.disabled.active,
+fieldset[disabled] .ui-datepicker table tr td.selected.disabled:hover.active {
+  background: rgba(0,0,0,0.2);
+  border-color: #555555;
+}
+.ui-datepicker table tr td.active,
+.ui-datepicker table tr td.active:hover,
+.ui-datepicker table tr td.active.disabled,
+.ui-datepicker table tr td.active.disabled:hover {
+  color: #ffffff;
+  background: rgba(0,0,0,0.2);
+  border-color: #357ebd;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.ui-datepicker table tr td.active:hover,
+.ui-datepicker table tr td.active:hover:hover,
+.ui-datepicker table tr td.active.disabled:hover,
+.ui-datepicker table tr td.active.disabled:hover:hover,
+.ui-datepicker table tr td.active:focus,
+.ui-datepicker table tr td.active:hover:focus,
+.ui-datepicker table tr td.active.disabled:focus,
+.ui-datepicker table tr td.active.disabled:hover:focus,
+.ui-datepicker table tr td.active:active,
+.ui-datepicker table tr td.active:hover:active,
+.ui-datepicker table tr td.active.disabled:active,
+.ui-datepicker table tr td.active.disabled:hover:active,
+.ui-datepicker table tr td.active.active,
+.ui-datepicker table tr td.active:hover.active,
+.ui-datepicker table tr td.active.disabled.active,
+.ui-datepicker table tr td.active.disabled:hover.active,
+.open .dropdown-toggle.ui-datepicker table tr td.active,
+.open .dropdown-toggle.ui-datepicker table tr td.active:hover,
+.open .dropdown-toggle.ui-datepicker table tr td.active.disabled,
+.open .dropdown-toggle.ui-datepicker table tr td.active.disabled:hover {
+  color: #ffffff;
+  background: rgba(0,0,0,0.5);
+  border-color: #285e8e;
+}
+.ui-datepicker table tr td.active:active,
+.ui-datepicker table tr td.active:hover:active,
+.ui-datepicker table tr td.active.disabled:active,
+.ui-datepicker table tr td.active.disabled:hover:active,
+.ui-datepicker table tr td.active.active,
+.ui-datepicker table tr td.active:hover.active,
+.ui-datepicker table tr td.active.disabled.active,
+.ui-datepicker table tr td.active.disabled:hover.active,
+.open .dropdown-toggle.ui-datepicker table tr td.active,
+.open .dropdown-toggle.ui-datepicker table tr td.active:hover,
+.open .dropdown-toggle.ui-datepicker table tr td.active.disabled,
+.open .dropdown-toggle.ui-datepicker table tr td.active.disabled:hover {
+  background-image: none;
+}
+.ui-datepicker table tr td.active.disabled,
+.ui-datepicker table tr td.active:hover.disabled,
+.ui-datepicker table tr td.active.disabled.disabled,
+.ui-datepicker table tr td.active.disabled:hover.disabled,
+.ui-datepicker table tr td.active[disabled],
+.ui-datepicker table tr td.active:hover[disabled],
+.ui-datepicker table tr td.active.disabled[disabled],
+.ui-datepicker table tr td.active.disabled:hover[disabled],
+fieldset[disabled] .ui-datepicker table tr td.active,
+fieldset[disabled] .ui-datepicker table tr td.active:hover,
+fieldset[disabled] .ui-datepicker table tr td.active.disabled,
+fieldset[disabled] .ui-datepicker table tr td.active.disabled:hover,
+.ui-datepicker table tr td.active.disabled:hover,
+.ui-datepicker table tr td.active:hover.disabled:hover,
+.ui-datepicker table tr td.active.disabled.disabled:hover,
+.ui-datepicker table tr td.active.disabled:hover.disabled:hover,
+.ui-datepicker table tr td.active[disabled]:hover,
+.ui-datepicker table tr td.active:hover[disabled]:hover,
+.ui-datepicker table tr td.active.disabled[disabled]:hover,
+.ui-datepicker table tr td.active.disabled:hover[disabled]:hover,
+fieldset[disabled] .ui-datepicker table tr td.active:hover,
+fieldset[disabled] .ui-datepicker table tr td.active:hover:hover,
+fieldset[disabled] .ui-datepicker table tr td.active.disabled:hover,
+fieldset[disabled] .ui-datepicker table tr td.active.disabled:hover:hover,
+.ui-datepicker table tr td.active.disabled:focus,
+.ui-datepicker table tr td.active:hover.disabled:focus,
+.ui-datepicker table tr td.active.disabled.disabled:focus,
+.ui-datepicker table tr td.active.disabled:hover.disabled:focus,
+.ui-datepicker table tr td.active[disabled]:focus,
+.ui-datepicker table tr td.active:hover[disabled]:focus,
+.ui-datepicker table tr td.active.disabled[disabled]:focus,
+.ui-datepicker table tr td.active.disabled:hover[disabled]:focus,
+fieldset[disabled] .ui-datepicker table tr td.active:focus,
+fieldset[disabled] .ui-datepicker table tr td.active:hover:focus,
+fieldset[disabled] .ui-datepicker table tr td.active.disabled:focus,
+fieldset[disabled] .ui-datepicker table tr td.active.disabled:hover:focus,
+.ui-datepicker table tr td.active.disabled:active,
+.ui-datepicker table tr td.active:hover.disabled:active,
+.ui-datepicker table tr td.active.disabled.disabled:active,
+.ui-datepicker table tr td.active.disabled:hover.disabled:active,
+.ui-datepicker table tr td.active[disabled]:active,
+.ui-datepicker table tr td.active:hover[disabled]:active,
+.ui-datepicker table tr td.active.disabled[disabled]:active,
+.ui-datepicker table tr td.active.disabled:hover[disabled]:active,
+fieldset[disabled] .ui-datepicker table tr td.active:active,
+fieldset[disabled] .ui-datepicker table tr td.active:hover:active,
+fieldset[disabled] .ui-datepicker table tr td.active.disabled:active,
+fieldset[disabled] .ui-datepicker table tr td.active.disabled:hover:active,
+.ui-datepicker table tr td.active.disabled.active,
+.ui-datepicker table tr td.active:hover.disabled.active,
+.ui-datepicker table tr td.active.disabled.disabled.active,
+.ui-datepicker table tr td.active.disabled:hover.disabled.active,
+.ui-datepicker table tr td.active[disabled].active,
+.ui-datepicker table tr td.active:hover[disabled].active,
+.ui-datepicker table tr td.active.disabled[disabled].active,
+.ui-datepicker table tr td.active.disabled:hover[disabled].active,
+fieldset[disabled] .ui-datepicker table tr td.active.active,
+fieldset[disabled] .ui-datepicker table tr td.active:hover.active,
+fieldset[disabled] .ui-datepicker table tr td.active.disabled.active,
+fieldset[disabled] .ui-datepicker table tr td.active.disabled:hover.active {
+  background-color: #428bca;
+  border-color: #357ebd;
+}
+.ui-datepicker table tr td span {
+  display: block;
+  width: 23%;
+  height: 54px;
+  line-height: 54px;
+  float: left;
+  margin: 1%;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.ui-datepicker table tr td span:hover {
+  background: rgba(0,0,0,0.2);
+}
+.ui-datepicker table tr td span.disabled,
+.ui-datepicker table tr td span.disabled:hover {
+  background: none;
+  color: #444;
+  cursor: default;
+}
+.ui-datepicker table tr td span.active,
+.ui-datepicker table tr td span.active:hover,
+.ui-datepicker table tr td span.active.disabled,
+.ui-datepicker table tr td span.active.disabled:hover {
+  color: #ffffff;
+  background-color: #428bca;
+  border-color: #357ebd;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.ui-datepicker table tr td span.active:hover,
+.ui-datepicker table tr td span.active:hover:hover,
+.ui-datepicker table tr td span.active.disabled:hover,
+.ui-datepicker table tr td span.active.disabled:hover:hover,
+.ui-datepicker table tr td span.active:focus,
+.ui-datepicker table tr td span.active:hover:focus,
+.ui-datepicker table tr td span.active.disabled:focus,
+.ui-datepicker table tr td span.active.disabled:hover:focus,
+.ui-datepicker table tr td span.active:active,
+.ui-datepicker table tr td span.active:hover:active,
+.ui-datepicker table tr td span.active.disabled:active,
+.ui-datepicker table tr td span.active.disabled:hover:active,
+.ui-datepicker table tr td span.active.active,
+.ui-datepicker table tr td span.active:hover.active,
+.ui-datepicker table tr td span.active.disabled.active,
+.ui-datepicker table tr td span.active.disabled:hover.active,
+.open .dropdown-toggle.ui-datepicker table tr td span.active,
+.open .dropdown-toggle.ui-datepicker table tr td span.active:hover,
+.open .dropdown-toggle.ui-datepicker table tr td span.active.disabled,
+.open .dropdown-toggle.ui-datepicker table tr td span.active.disabled:hover {
+  color: #ffffff;
+  background-color: #3276b1;
+  border-color: #285e8e;
+}
+.ui-datepicker table tr td span.active:active,
+.ui-datepicker table tr td span.active:hover:active,
+.ui-datepicker table tr td span.active.disabled:active,
+.ui-datepicker table tr td span.active.disabled:hover:active,
+.ui-datepicker table tr td span.active.active,
+.ui-datepicker table tr td span.active:hover.active,
+.ui-datepicker table tr td span.active.disabled.active,
+.ui-datepicker table tr td span.active.disabled:hover.active,
+.open .dropdown-toggle.ui-datepicker table tr td span.active,
+.open .dropdown-toggle.ui-datepicker table tr td span.active:hover,
+.open .dropdown-toggle.ui-datepicker table tr td span.active.disabled,
+.open .dropdown-toggle.ui-datepicker table tr td span.active.disabled:hover {
+  background-image: none;
+}
+.ui-datepicker table tr td span.active.disabled,
+.ui-datepicker table tr td span.active:hover.disabled,
+.ui-datepicker table tr td span.active.disabled.disabled,
+.ui-datepicker table tr td span.active.disabled:hover.disabled,
+.ui-datepicker table tr td span.active[disabled],
+.ui-datepicker table tr td span.active:hover[disabled],
+.ui-datepicker table tr td span.active.disabled[disabled],
+.ui-datepicker table tr td span.active.disabled:hover[disabled],
+fieldset[disabled] .ui-datepicker table tr td span.active,
+fieldset[disabled] .ui-datepicker table tr td span.active:hover,
+fieldset[disabled] .ui-datepicker table tr td span.active.disabled,
+fieldset[disabled] .ui-datepicker table tr td span.active.disabled:hover,
+.ui-datepicker table tr td span.active.disabled:hover,
+.ui-datepicker table tr td span.active:hover.disabled:hover,
+.ui-datepicker table tr td span.active.disabled.disabled:hover,
+.ui-datepicker table tr td span.active.disabled:hover.disabled:hover,
+.ui-datepicker table tr td span.active[disabled]:hover,
+.ui-datepicker table tr td span.active:hover[disabled]:hover,
+.ui-datepicker table tr td span.active.disabled[disabled]:hover,
+.ui-datepicker table tr td span.active.disabled:hover[disabled]:hover,
+fieldset[disabled] .ui-datepicker table tr td span.active:hover,
+fieldset[disabled] .ui-datepicker table tr td span.active:hover:hover,
+fieldset[disabled] .ui-datepicker table tr td span.active.disabled:hover,
+fieldset[disabled] .ui-datepicker table tr td span.active.disabled:hover:hover,
+.ui-datepicker table tr td span.active.disabled:focus,
+.ui-datepicker table tr td span.active:hover.disabled:focus,
+.ui-datepicker table tr td span.active.disabled.disabled:focus,
+.ui-datepicker table tr td span.active.disabled:hover.disabled:focus,
+.ui-datepicker table tr td span.active[disabled]:focus,
+.ui-datepicker table tr td span.active:hover[disabled]:focus,
+.ui-datepicker table tr td span.active.disabled[disabled]:focus,
+.ui-datepicker table tr td span.active.disabled:hover[disabled]:focus,
+fieldset[disabled] .ui-datepicker table tr td span.active:focus,
+fieldset[disabled] .ui-datepicker table tr td span.active:hover:focus,
+fieldset[disabled] .ui-datepicker table tr td span.active.disabled:focus,
+fieldset[disabled] .ui-datepicker table tr td span.active.disabled:hover:focus,
+.ui-datepicker table tr td span.active.disabled:active,
+.ui-datepicker table tr td span.active:hover.disabled:active,
+.ui-datepicker table tr td span.active.disabled.disabled:active,
+.ui-datepicker table tr td span.active.disabled:hover.disabled:active,
+.ui-datepicker table tr td span.active[disabled]:active,
+.ui-datepicker table tr td span.active:hover[disabled]:active,
+.ui-datepicker table tr td span.active.disabled[disabled]:active,
+.ui-datepicker table tr td span.active.disabled:hover[disabled]:active,
+fieldset[disabled] .ui-datepicker table tr td span.active:active,
+fieldset[disabled] .ui-datepicker table tr td span.active:hover:active,
+fieldset[disabled] .ui-datepicker table tr td span.active.disabled:active,
+fieldset[disabled] .ui-datepicker table tr td span.active.disabled:hover:active,
+.ui-datepicker table tr td span.active.disabled.active,
+.ui-datepicker table tr td span.active:hover.disabled.active,
+.ui-datepicker table tr td span.active.disabled.disabled.active,
+.ui-datepicker table tr td span.active.disabled:hover.disabled.active,
+.ui-datepicker table tr td span.active[disabled].active,
+.ui-datepicker table tr td span.active:hover[disabled].active,
+.ui-datepicker table tr td span.active.disabled[disabled].active,
+.ui-datepicker table tr td span.active.disabled:hover[disabled].active,
+fieldset[disabled] .ui-datepicker table tr td span.active.active,
+fieldset[disabled] .ui-datepicker table tr td span.active:hover.active,
+fieldset[disabled] .ui-datepicker table tr td span.active.disabled.active,
+fieldset[disabled] .ui-datepicker table tr td span.active.disabled:hover.active {
+  background-color: #428bca;
+  border-color: #357ebd;
+}
+.ui-datepicker table tr td span.old,
+.ui-datepicker table tr td span.new {
+  color: #444;
+}
+.ui-datepicker th.ui-datepicker-switch {
+  width: 145px;
+}
+.ui-datepicker thead tr:first-child th,
+.ui-datepicker tfoot tr th {
+  cursor: pointer;
+}
+.ui-datepicker thead tr:first-child th:hover,
+.ui-datepicker tfoot tr th:hover {
+  background: rgba(0,0,0,0.2);
+}
+.ui-datepicker .cw {
+  font-size: 10px;
+  width: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
+}
+.ui-datepicker thead tr:first-child th.cw {
+  cursor: default;
+  background-color: transparent;
+}
+.input-group.date .input-group-addon i {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+}
+.input-daterange input {
+  text-align: center;
+}
+.input-daterange input:first-child {
+  border-radius: 3px 0 0 3px;
+}
+.input-daterange input:last-child {
+  border-radius: 0 3px 3px 0;
+}
+.input-daterange .input-group-addon {
+  width: auto;
+  min-width: 16px;
+  padding: 4px 5px;
+  font-weight: normal;
+  line-height: 1.428571429;
+  text-align: center;
+  text-shadow: 0 1px 0 #fff;
+  vertical-align: middle;
+  background-color: #eeeeee;
+  border: solid #cccccc;
+  border-width: 1px 0;
+  margin-left: -5px;
+  margin-right: -5px;
+}
+.ui-datepicker.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  float: left;
+  display: none;
+  min-width: 160px;
+  list-style: none;
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  color: #333333;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  line-height: 1.428571429;
+}
+.ui-datepicker.dropdown-menu th,
+.ui-datepicker.dropdown-menu td {
+  padding: 4px 5px;
+}
+
+
+</style>

src/widgets/VAChatBox.vue

@@ -0,0 +1,100 @@
+<template>
+  <!-- Chat box -->
+  <div class="box box-success">
+    <div class="box-header">
+      <i class="fa fa-comments-o"></i>
+
+      <h3 class="box-title">Chat</h3>
+
+      <div class="box-tools pull-right" data-toggle="tooltip" title="Status">
+        <div class="btn-group" data-toggle="btn-toggle">
+          <button type="button" class="btn btn-default btn-sm active"><i class="fa fa-square text-green"></i>
+          </button>
+          <button type="button" class="btn btn-default btn-sm"><i class="fa fa-square text-red"></i></button>
+        </div>
+      </div>
+    </div>
+    <div class="box-body chat id-chat-box">
+      <!-- chat item -->
+      <div class="item">
+        <img src="~admin-lte/dist/img/user4-128x128.jpg" alt="user image" class="online">
+
+        <p class="message">
+          <a href="#" class="name">
+            <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 2:15</small>
+            Mike Doe
+          </a>
+          I would like to meet you to discuss the latest news about
+          the arrival of the new theme. They say it is going to be one the
+          best themes on the market
+        </p>
+        <div class="attachment">
+          <h4>Attachments:</h4>
+
+          <p class="filename">
+            Theme-thumbnail-image.jpg
+          </p>
+
+          <div class="pull-right">
+            <button type="button" class="btn btn-primary btn-sm btn-flat">Open</button>
+          </div>
+        </div>
+        <!-- /.attachment -->
+      </div>
+      <!-- /.item -->
+      <!-- chat item -->
+      <div class="item">
+        <img src="~admin-lte/dist/img/user3-128x128.jpg" alt="user image" class="offline">
+
+        <p class="message">
+          <a href="#" class="name">
+            <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:15</small>
+            Alexander Pierce
+          </a>
+          I would like to meet you to discuss the latest news about
+          the arrival of the new theme. They say it is going to be one the
+          best themes on the market
+        </p>
+      </div>
+      <!-- /.item -->
+      <!-- chat item -->
+      <div class="item">
+        <img src="~admin-lte/dist/img/user2-160x160.jpg" alt="user image" class="offline">
+
+        <p class="message">
+          <a href="#" class="name">
+            <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:30</small>
+            Susan Doe
+          </a>
+          I would like to meet you to discuss the latest news about
+          the arrival of the new theme. They say it is going to be one the
+          best themes on the market
+        </p>
+      </div>
+      <!-- /.item -->
+    </div>
+    <!-- /.chat -->
+    <div class="box-footer">
+      <div class="input-group">
+        <input class="form-control" placeholder="Type message...">
+
+        <div class="input-group-btn">
+          <button type="button" class="btn btn-success"><i class="fa fa-plus"></i></button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /.box (chat box) -->
+</template>
+
+<script>
+export default {
+  name: 'ChatBox',
+  mounted () {
+    var chatBoxElement = this.$el.querySelector('.id-chat-box')
+    $(chatBoxElement).slimScroll({
+      height: '250px'
+    })
+  }
+}
+</script>

src/widgets/VADirectChat.vue

@@ -0,0 +1,142 @@
+<template>
+
+  <!-- DIRECT CHAT -->
+  <div class="box direct-chat" :class="[boxColor, directChatColor]">
+    <div class="box-header with-border">
+      <h3 class="box-title">Direct Chat</h3>
+
+      <div class="box-tools pull-right">
+        <span data-toggle="tooltip" title="3 New Messages" class="badge" :class="badgeColor">3</span>
+        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+        </button>
+        <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+          <i class="fa fa-comments"></i></button>
+        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
+        </button>
+      </div>
+    </div>
+    <!-- /.box-header -->
+    <div class="box-body">
+      <!-- Conversations are loaded here -->
+      <div class="direct-chat-messages">
+
+        <va-direct-chat-item
+          v-for="item in talkList"
+          :name="item.name"
+          :date="item.date"
+          :profileImage="item.profileImage"
+          :message="item.message"
+          :isMine="item.isMine"
+        ></va-direct-chat-item>
+
+      </div>
+      <!--/.direct-chat-messages-->
+
+      <!-- Contacts are loaded here -->
+      <div class="direct-chat-contacts">
+        <ul class="contacts-list">
+          <va-direct-chat-contact v-for="contact in contacts"
+            :name="contact.name"
+            :profileImage="contact.profileImage"
+            :latestDate="contact.latestDate"
+            :latestMessage="contact.latestMessage"
+          ></va-direct-chat-contact>
+        </ul>
+        <!-- /.contatcts-list -->
+      </div>
+      <!-- /.direct-chat-pane -->
+    </div>
+    <!-- /.box-body -->
+    <div class="box-footer">
+      <form action="#" method="post">
+        <div class="input-group">
+          <input type="text" name="message" :placeholder="placeholder" class="form-control">
+              <span class="input-group-btn">
+                <button type="button" class="btn btn-warning btn-flat">Send</button>
+              </span>
+        </div>
+      </form>
+    </div>
+    <!-- /.box-footer-->
+  </div>
+  <!--/.direct-chat -->
+</div>
+
+</template>
+
+<script>
+import VADirectChatItem from './VADirectChatItem.vue'
+import VADirectChatContact from './VADirectChatContact.vue'
+
+export default {
+  name: 'va-direct-chat',
+  props: {
+    theme: {
+      type: String,
+      default: 'primary'
+    },
+    talkList: {
+      type: Array
+    },
+    contacts: {
+      type: Array
+    },
+    title: {
+      type: String
+    },
+    badgeCount: {
+      type: Number,
+      default: 0
+    },
+    placeholder: {
+      type: String,
+      default: 'Type Message ...'
+    }
+  },
+  computed: {
+    badgeColor () {
+      switch (this.theme) {
+        case 'primary':
+          return 'bg-light-blue'
+        case 'success':
+          return 'bg-green'
+        case 'warning':
+          return 'bg-yellow'
+        case 'danger':
+          return 'bg-red'
+        default:
+          return 'bg-light-blue'
+      }
+    },
+    boxColor () {
+      switch (this.theme) {
+        case 'primary':
+        case 'success':
+        case 'warning':
+        case 'danger':
+          return `box-${this.theme}`
+        default:
+          return 'box-primary'
+      }
+    },
+    directChatColor () {
+      switch (this.theme) {
+        case 'primary':
+        case 'success':
+        case 'warning':
+        case 'danger':
+          return `direct-chat-${this.theme}`
+        default:
+          return 'direct-chat-primary'
+      }
+    }
+  },
+  created () {
+
+  },
+  components: {
+    'va-direct-chat-item': VADirectChatItem,
+    'va-direct-chat-contact': VADirectChatContact
+  }
+}
+</script>

src/widgets/VADirectChatContact.vue

@@ -0,0 +1,45 @@
+<template>
+  <li>
+    <a href="#">
+      <img class="contacts-list-img" :src="profileImage" alt="User Image">
+
+      <div class="contacts-list-info">
+            <span class="contacts-list-name">
+              {{ name }}
+              <small class="contacts-list-date pull-right">{{ parseDate }}</small>
+            </span>
+        <span class="contacts-list-msg">{{ latestMessage }}</span>
+      </div>
+      <!-- /.contacts-list-info -->
+    </a>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'DirectChatContact',
+  props: {
+    name: {
+      type: String
+    },
+    profileImage: {
+      type: String
+    },
+    latestDate: {
+      type: Date
+    },
+    latestMessage: {
+      type: String
+    }
+  },
+  computed: {
+    parseDate () {
+      // TODO: 시간 파싱 개발해야 합니다.
+      return this.latestDate.toDateString()
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/widgets/VADirectChatItem.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="direct-chat-msg" :class="isMine?'':'right'">
+    <div class="direct-chat-info clearfix">
+      <span class="direct-chat-name" :class="isMine?'pull-right':'pull-left'">{{ name }}</span>
+      <span class="direct-chat-timestamp pull-right" :class="isMine?'pull-left':'pull-right'">{{ parseDate }}</span>
+    </div>
+    <!-- /.direct-chat-info -->
+    <img class="direct-chat-img" :src="profileImage" alt="message user image"><!-- /.direct-chat-img -->
+    <div class="direct-chat-text">
+      {{ message }}
+    </div>
+    <!-- /.direct-chat-text -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DirectChatItem',
+  props: {
+    name: {
+      type: String
+    },
+    date: {
+      type: Date
+    },
+    profileImage: {
+      type: String
+    },
+    message: {
+      type: String
+    },
+    isMine: {
+      type: Boolean
+    }
+  },
+  computed: {
+    parseDate () {
+      return this.date
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/widgets/VAInfoBox.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="info-box" :class="wrapBgColor">
+    <span class="info-box-icon" v-bind:class="bgColor">
+      <i v-bind:class="bgIcon"></i>
+    </span>
+    <div class="info-box-content">
+      <span class="info-box-text">{{text}}</span>
+      <span class="info-box-number">{{parseNumber}}</span>
+
+      <div class="progress" v-if="isProgress">
+        <div class="progress-bar" :style="`width: ${percentage}%`"></div>
+      </div>
+      <span class="progress-description">
+        {{ progressDescription }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+// TODO: move to CONSTANT
+  export default {
+    name: 'va-info-box',
+    props: {
+      'wrapBgColor': {
+        type: String
+      },
+      'bgColor': {
+        type: String
+      },
+      'bgIcon': {
+        type: String
+      },
+      'text': {
+        type: String,
+        required: true
+      },
+      'number': {
+        type: String,
+        default: 0
+      },
+      'numberType': {
+        type: String
+      },
+      'percentage': {
+        type: Number,
+        default: 0
+      },
+      'progressDescription': {
+        type: String,
+        default: ''
+      },
+      'isProgress': {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      parseNumber () {
+        let result = this.number
+        // FIXME: using constant
+        switch (this.numberType) {
+          case 'percentage':
+            result += '%'
+            break
+          case 'comma':
+            result = Number(result).toLocaleString('en')
+            break
+          default:
+            break
+        }
+        return result
+      }
+    }
+  }
+</script>
+
+<style lang="">
+
+</style>

src/widgets/VAQuickMail.vue

@@ -0,0 +1,47 @@
+<template>
+
+  <!-- quick email widget -->
+  <div class="box box-info">
+    <div class="box-header">
+      <i class="fa fa-envelope"></i>
+
+      <h3 class="box-title">Quick Email</h3>
+      <!-- tools box -->
+      <div class="pull-right box-tools">
+        <button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove">
+          <i class="fa fa-times"></i></button>
+      </div>
+      <!-- /. tools -->
+    </div>
+    <div class="box-body">
+      <form action="#" method="post">
+        <div class="form-group">
+          <input type="email" class="form-control" name="emailto" placeholder="Email to:">
+        </div>
+        <div class="form-group">
+          <input type="text" class="form-control" name="subject" placeholder="Subject">
+        </div>
+        <div>
+          <textarea class="textarea" placeholder="Message" style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
+        </div>
+      </form>
+    </div>
+    <div class="box-footer clearfix">
+      <button type="button" class="pull-right btn btn-default" id="sendEmail">Send
+        <i class="fa fa-arrow-circle-right"></i></button>
+    </div>
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  name: 'QuickMail',
+  mounted () {
+    // bootstrap WYSIHTML5 - text editor
+    $('.textarea').wysihtml5()
+  }
+}
+
+</script>

src/widgets/VASmallBox.vue

@@ -0,0 +1,29 @@
+<template>
+
+  <div class="small-box" :class="bgColor">
+    <div class="inner">
+      <h3>{{title}}</h3>
+
+      <p>{{description}}</p>
+    </div>
+    <div class="icon">
+      <i class="ion" :class="icon"></i>
+    </div>
+    <a href="#" class="small-box-footer">{{moreText}} <i class="fa fa-arrow-circle-right"></i></a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SmallBox',
+  props: ['color', 'icon', 'title', 'description', 'moreText'],
+  computed: {
+    bgColor () {
+      return `bg-${this.color}`
+    }
+  },
+  methods: {
+
+  }
+}
+</script>

src/widgets/VASocialBox.vue

@@ -0,0 +1,123 @@
+<template>
+  <!-- Box Comment -->
+    <div class="box box-widget">
+      <div class="box-header with-border">
+        <div class="user-block">
+          <img class="img-circle" :src="profileImage" alt="User Image">
+          <span class="username"><a href="#">{{ name }}</a></span>
+          <span class="description">{{ description }}</span>
+        </div>
+        <!-- /.user-block -->
+        <div class="box-tools">
+          <button type="button" class="btn btn-box-tool" data-toggle="tooltip" :title="readTooltipTitle">
+            <i class="fa fa-circle-o"></i></button>
+          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+          </button>
+          <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+        </div>
+        <!-- /.box-tools -->
+      </div>
+      <!-- /.box-header -->
+      <div class="box-body">
+        <img v-for="image in images" class="img-responsive pad" :src="image" alt="Photo">
+
+        <p>{{ text }}</p>
+
+        <!-- Attachment -->
+        <div class="attachment-block clearfix" v-for="attachment in attachments">
+          <img class="attachment-img" :src="attachment.image" alt="Attachment Image">
+
+          <div class="attachment-pushed">
+            <h4 class="attachment-heading"><a :href="attachment.url">{{attachment.title}}</a></h4>
+
+            <div class="attachment-text">
+              {{ attachment.text }}<a href="#">more</a>
+            </div>
+            <!-- /.attachment-text -->
+          </div>
+          <!-- /.attachment-pushed -->
+        </div>
+        <!-- /.attachment-block -->
+
+        <!-- <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button> -->
+        <button v-for="button in buttons" type="button" class="btn btn-default btn-xs" @click="button.onClick"><i :class="button.theme"></i> {{ button.name }}</button>
+        <span class="pull-right text-muted">{{ likeCount }} likes - {{ commentCount }} comments</span>
+      </div>
+      <!-- /.box-body -->
+      <div class="box-footer box-comments">
+        <va-social-box-comment v-for="comment in comments"
+          :name="comment.name"
+          :profileImage="comment.profileImage"
+          :text="comment.text"
+          :date="comment.date"
+        ></va-social-box-comment>
+      </div>
+      <!-- /.box-footer -->
+      <div class="box-footer">
+        <form action="#" method="post">
+          <img class="img-responsive img-circle img-sm" :src="profileImage" alt="Alt Text">
+          <!-- .img-push is used to add margin to elements next to floating images -->
+          <div class="img-push">
+            <input type="text" class="form-control input-sm" :placeholder="placeholder">
+          </div>
+        </form>
+      </div>
+      <!-- /.box-footer -->
+    </div>
+    <!-- /.box -->
+</template>
+
+<script>
+import VASocialBoxComment from './VASocialBoxComment.vue'
+
+export default {
+  name: 'va-social-box',
+  props: {
+    profileImage: {
+      type: String
+    },
+    name: {
+      type: String
+    },
+    description: {
+      type: String
+    },
+    readTooltipTitle: {
+      type: String,
+      default: 'Mark as read'
+    },
+    images: {
+      type: Array
+    },
+    text: {
+      type: String
+    },
+    buttons: {
+      type: Array
+    },
+    likeCount: {
+      type: Number
+    },
+    commentCount: {
+      type: Number
+    },
+    comments: {
+      type: Array
+    },
+    placeholder: {
+      type: String,
+      default: 'Press enter to post comment'
+    },
+    attachments: {
+      type: Array
+    }
+  },
+  created () {
+
+  },
+  components: {
+    'va-social-box-comment': VASocialBoxComment
+  }
+}
+
+</script>

src/widgets/VASocialBoxComment.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="box-comment">
+    <!-- User image -->
+    <img class="img-circle img-sm" :src="profileImage" alt="User Image">
+
+    <div class="comment-text">
+          <span class="username">
+            {{ name }}
+            <span class="text-muted pull-right">{{ parseDate }}</span>
+          </span><!-- /.username -->
+      {{ text }}
+    </div>
+    <!-- /.comment-text -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SocialBoxComment',
+  props: {
+    name: {
+      type: String
+    },
+    profileImage: {
+      type: String
+    },
+    date: {
+      type: Date
+    },
+    text: {
+      type: String
+    }
+  },
+  computed: {
+    parseDate () {
+      // TODO: 시간 파싱 개발해야 합니다.
+      return this.date.toDateString()
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/widgets/VASocialUser.v1.vue

@@ -0,0 +1,73 @@
+<template>
+  <!-- Widget: user widget style 1 -->
+  <div class="box box-widget widget-user">
+    <!-- Add the bg color to the header using any of the bg-* classes -->
+    <div class="widget-user-header" :class="isBackgroundImage?'bg-black':theme" :style="isBackgroundImage?`background: url('${profileImage}') center center;`:''">
+      <h3 class="widget-user-username">{{ name }}</h3>
+      <h5 class="widget-user-desc">{{ description }}</h5>
+    </div>
+    <div class="widget-user-image">
+      <img class="img-circle" :src="profileImage" alt="User Avatar">
+    </div>
+    <div class="box-footer">
+      <row>
+        <div class="col-sm-4 border-right">
+          <div class="description-block">
+            <h5 class="description-header">{{ infoList[0].count }}</h5>
+            <span class="description-text">{{ infoList[0].text }}</span>
+          </div>
+          <!-- /.description-block -->
+        </div>
+        <!-- /.col -->
+        <div class="col-sm-4 border-right">
+          <div class="description-block">
+            <h5 class="description-header">{{ infoList[1].count }}</h5>
+            <span class="description-text">{{ infoList[1].text }}</span>
+          </div>
+          <!-- /.description-block -->
+        </div>
+        <!-- /.col -->
+        <div class="col-sm-4">
+          <div class="description-block">
+            <h5 class="description-header">{{ infoList[2].count }}</h5>
+            <span class="description-text">{{ infoList[2].text }}</span>
+          </div>
+          <!-- /.description-block -->
+        </div>
+        <!-- /.col -->
+      </row>
+      <!-- /.row -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'va-social-user-v1',
+  props: {
+    theme: {
+      type: String,
+      default: 'bg-aqua-active'
+    },
+    isBackgroundImage: {
+      type: Boolean,
+      default: false
+    },
+    name: {
+      type: String
+    },
+    description: {
+      type: String
+    },
+    profileImage: {
+      type: String
+    },
+    infoList: {
+      type: Array
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/widgets/VASocialUser.v2.vue

@@ -0,0 +1,43 @@
+<template>
+  <!-- Widget: user widget style 1 -->
+  <div class="box box-widget widget-user-2">
+    <!-- Add the bg color to the header using any of the bg-* classes -->
+    <div class="widget-user-header bg-yellow">
+      <div class="widget-user-image">
+        <img class="img-circle" :src="profileImage" alt="User Avatar">
+      </div>
+      <!-- /.widget-user-image -->
+      <h3 class="widget-user-username">{{ name }}</h3>
+      <h5 class="widget-user-desc">{{ description }}</h5>
+    </div>
+    <div class="box-footer no-padding">
+      <ul class="nav nav-stacked">
+        <li v-for="item in list"><a href="#">{{ item.name }} <span class="pull-right badge" :class="item.badge.theme">{{ item.badge.count }}</span></a></li>
+      </ul>
+    </div>
+  </div>
+  <!-- /.widget-user -->
+</template>
+
+<script>
+export default {
+  name: 'va-social-user-v2',
+  props: {
+    name: {
+      type: String
+    },
+    description: {
+      type: String
+    },
+    profileImage: {
+      type: String
+    },
+    list: {
+      type: Array
+    }
+  },
+  created () {
+
+  }
+}
+</script>

src/widgets/VATodoList.vue

@@ -0,0 +1,142 @@
+<template>
+
+  <!-- TO DO List -->
+  <div class="box box-primary">
+    <div class="box-header">
+      <i class="ion ion-clipboard"></i>
+
+      <h3 class="box-title">To Do List</h3>
+
+      <div class="box-tools pull-right">
+        <ul class="pagination pagination-sm inline">
+          <li><a href="#">&laquo;</a></li>
+          <li><a href="#">1</a></li>
+          <li><a href="#">2</a></li>
+          <li><a href="#">3</a></li>
+          <li><a href="#">&raquo;</a></li>
+        </ul>
+      </div>
+    </div>
+    <!-- /.box-header -->
+    <div class="box-body">
+      <ul class="todo-list">
+        <li>
+          <!-- drag handle -->
+              <span class="handle">
+                <i class="fa fa-ellipsis-v"></i>
+                <i class="fa fa-ellipsis-v"></i>
+              </span>
+          <!-- checkbox -->
+          <input type="checkbox" value="">
+          <!-- todo text -->
+          <span class="text">Design a nice theme</span>
+          <!-- Emphasis label -->
+          <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
+          <!-- General tools such as edit or delete-->
+          <div class="tools">
+            <i class="fa fa-edit"></i>
+            <i class="fa fa-trash-o"></i>
+          </div>
+        </li>
+        <li>
+              <span class="handle">
+                <i class="fa fa-ellipsis-v"></i>
+                <i class="fa fa-ellipsis-v"></i>
+              </span>
+          <input type="checkbox" value="">
+          <span class="text">Make the theme responsive</span>
+          <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
+          <div class="tools">
+            <i class="fa fa-edit"></i>
+            <i class="fa fa-trash-o"></i>
+          </div>
+        </li>
+        <li>
+              <span class="handle">
+                <i class="fa fa-ellipsis-v"></i>
+                <i class="fa fa-ellipsis-v"></i>
+              </span>
+          <input type="checkbox" value="">
+          <span class="text">Let theme shine like a star</span>
+          <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
+          <div class="tools">
+            <i class="fa fa-edit"></i>
+            <i class="fa fa-trash-o"></i>
+          </div>
+        </li>
+        <li>
+              <span class="handle">
+                <i class="fa fa-ellipsis-v"></i>
+                <i class="fa fa-ellipsis-v"></i>
+              </span>
+          <input type="checkbox" value="">
+          <span class="text">Let theme shine like a star</span>
+          <small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
+          <div class="tools">
+            <i class="fa fa-edit"></i>
+            <i class="fa fa-trash-o"></i>
+          </div>
+        </li>
+        <li>
+              <span class="handle">
+                <i class="fa fa-ellipsis-v"></i>
+                <i class="fa fa-ellipsis-v"></i>
+              </span>
+          <input type="checkbox" value="">
+          <span class="text">Check your messages and notifications</span>
+          <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
+          <div class="tools">
+            <i class="fa fa-edit"></i>
+            <i class="fa fa-trash-o"></i>
+          </div>
+        </li>
+        <li>
+              <span class="handle">
+                <i class="fa fa-ellipsis-v"></i>
+                <i class="fa fa-ellipsis-v"></i>
+              </span>
+          <input type="checkbox" value="">
+          <span class="text">Let theme shine like a star</span>
+          <small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
+          <div class="tools">
+            <i class="fa fa-edit"></i>
+            <i class="fa fa-trash-o"></i>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <!-- /.box-body -->
+    <div class="box-footer clearfix no-border">
+      <button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button>
+    </div>
+  </div>
+  <!-- /.box -->
+
+</template>
+
+<script>
+
+export default {
+  name: 'TodoList',
+  mounted () {
+    // jQuery UI sortable for the todo list
+    $(this.$el).find('.todo-list').sortable({
+      placeholder: 'sort-highlight',
+      handle: '.handle',
+      forcePlaceholderSize: true,
+      zIndex: 999999
+    })
+    /* The todo list plugin */
+    $(this.$el).find('.todo-list').todolist({
+      onCheck: function (ele) {
+        window.console.log('The element has been checked')
+        return ele
+      },
+      onUncheck: function (ele) {
+        window.console.log('The element has been unchecked')
+        return ele
+      }
+    })
+  }
+}
+</script>

src/widgets/VAUserList.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="box box-danger">
+    <div class="box-header with-border">
+      <h3 class="box-title">Latest Members</h3>
+
+      <div class="box-tools pull-right">
+        <span class="label label-danger">8 New Members</span>
+        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+        </button>
+        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
+        </button>
+      </div>
+    </div>
+    <!-- /.box-header -->
+    <div class="box-body no-padding">
+      <ul class="users-list clearfix">
+        <li>
+          <img src="~admin-lte/dist/img/user1-128x128.jpg" alt="User Image">
+          <a class="users-list-name" href="#">Alexander Pierce</a>
+          <span class="users-list-date">Today</span>
+        </li>
+        <li>
+          <img src="~admin-lte/dist/img/user8-128x128.jpg" alt="User Image">
+          <a class="users-list-name" href="#">Norman</a>
+          <span class="users-list-date">Yesterday</span>
+        </li>
+        <li>
+          <img src="~admin-lte/dist/img/user7-128x128.jpg" alt="User Image">
+          <a class="users-list-name" href="#">Jane</a>
+          <span class="users-list-date">12 Jan</span>
+        </li>
+        <li>
+          <img src="~admin-lte/dist/img/user6-128x128.jpg" alt="User Image">
+          <a class="users-list-name" href="#">John</a>
+          <span class="users-list-date">12 Jan</span>
+        </li>
+        <li>
+          <img src="~admin-lte/dist/img/user2-160x160.jpg" alt="User Image">
+          <a class="users-list-name" href="#">Alexander</a>
+          <span class="users-list-date">13 Jan</span>
+        </li>
+        <li>
+          <img src="~admin-lte/dist/img/user5-128x128.jpg" alt="User Image">
+          <a class="users-list-name" href="#">Sarah</a>
+          <span class="users-list-date">14 Jan</span>
+        </li>
+        <li>
+          <img src="~admin-lte/dist/img/user4-128x128.jpg" alt="User Image">
+          <a class="users-list-name" href="#">Nora</a>
+          <span class="users-list-date">15 Jan</span>
+        </li>
+        <li>
+          <img src="~admin-lte/dist/img/user3-128x128.jpg" alt="User Image">
+          <a class="users-list-name" href="#">Nadia</a>
+          <span class="users-list-date">15 Jan</span>
+        </li>
+      </ul>
+      <!-- /.users-list -->
+    </div>
+    <!-- /.box-body -->
+    <div class="box-footer text-center">
+      <a href="javascript:void(0)" class="uppercase">View All Users</a>
+    </div>
+    <!-- /.box-footer -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserList',
+  created () {
+
+  }
+}
+</script>