7 éve · d50eba0f61
--- a/.babelrc
+++ b/.babelrc
@@ -0,0 +1,6 @@
 
				+{
			
 
				+  "presets": [
			
 
				+    ["env", { "modules": false }],
			
 
				+    "stage-3"
			
 
				+  ]
			
 
				+}
			
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,9 @@
 
				+root = true
			
 
				+
			
 
				+[*]
			
 
				+charset = utf-8
			
 
				+indent_style = space
			
 
				+indent_size = 2
			
 
				+end_of_line = lf
			
 
				+insert_final_newline = true
			
 
				+trim_trailing_whitespace = true
			
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,12 @@
 
				+.DS_Store
			
 
				+node_modules/
			
 
				+dist/
			
 
				+npm-debug.log
			
 
				+yarn-error.log
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,18 @@
 
				+# vue-distributors
			
 
				+
			
 
				+> A vuejs knoledge test
			
 
				+
			
 
				+## Build Setup
			
 
				+
			
 
				+``` bash
			
 
				+# install dependencies
			
 
				+npm install
			
 
				+
			
 
				+# serve with hot reload at localhost:8080
			
 
				+npm run dev
			
 
				+
			
 
				+# build for production with minification
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,12 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				+    <title>Vue-distributors</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+    <script src="/dist/build.js"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,40 @@
 
				+{
			
 
				+  "name": "vue-distributors",
			
 
				+  "description": "A vuejs knoledge test",
			
 
				+  "version": "1.0.0",
			
 
				+  "author": "Herton <herton@dantas.info>",
			
 
				+  "license": "MIT",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
			
 
				+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "bootstrap-vue": "^2.0.0-rc.9",
			
 
				+    "octicons": "^7.2.0",
			
 
				+    "vue": "^2.5.11",
			
 
				+    "vue-router": "^3.0.1",
			
 
				+    "vuex": "^3.0.1"
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not ie <= 8"
			
 
				+  ],
			
 
				+  "devDependencies": {
			
 
				+    "babel-core": "^6.26.0",
			
 
				+    "babel-loader": "^7.1.2",
			
 
				+    "babel-preset-env": "^1.6.0",
			
 
				+    "babel-preset-stage-3": "^6.24.1",
			
 
				+    "cross-env": "^5.0.5",
			
 
				+    "css-loader": "^0.28.11",
			
 
				+    "file-loader": "^1.1.4",
			
 
				+    "node-sass": "^4.5.3",
			
 
				+    "sass-loader": "^6.0.6",
			
 
				+    "style-loader": "^0.21.0",
			
 
				+    "vue-loader": "^13.0.5",
			
 
				+    "vue-template-compiler": "^2.4.4",
			
 
				+    "webpack": "^3.6.0",
			
 
				+    "webpack-dev-server": "^2.9.1"
			
 
				+  }
			
 
				+}
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,53 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <div class="container mb-5">
			
 
				+      <b-nav pills>
			
 
				+        <b-nav-item to="home">Home</b-nav-item>
			
 
				+        <b-nav-item to="distributor">Distributor</b-nav-item>
			
 
				+      </b-nav>
			
 
				+    </div>
			
 
				+    <div class="container">
			
 
				+      <router-view></router-view>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+
			
 
				+
			
 
				+export default {
			
 
				+  name: 'app',
			
 
				+  data () {
			
 
				+    return {}
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+#app {
			
 
				+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+  text-align: center;
			
 
				+  color: #2c3e50;
			
 
				+  margin-top: 60px;
			
 
				+}
			
 
				+
			
 
				+h1, h2 {
			
 
				+  font-weight: normal;
			
 
				+}
			
 
				+
			
 
				+ul {
			
 
				+  list-style-type: none;
			
 
				+  padding: 0;
			
 
				+}
			
 
				+
			
 
				+li {
			
 
				+  display: inline-block;
			
 
				+  margin: 0 10px;
			
 
				+}
			
 
				+
			
 
				+a {
			
 
				+  color: #42b983;
			
 
				+}
			
 
				+</style>
			
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/Distributor-form.vue
+++ b/src/components/Distributor-form.vue
@@ -0,0 +1,69 @@
 
				+<template>
			
 
				+  <div id="distributor-form">
			
 
				+    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
			
 
				+      <b-form-group id="exampleInputGroup1"
			
 
				+                    label="Email address:"
			
 
				+                    label-for="exampleInput1"
			
 
				+                    description="We'll never share your email with anyone else.">
			
 
				+        <b-form-input id="exampleInput1"
			
 
				+                      type="email"
			
 
				+                      v-model="form.email"
			
 
				+                      required
			
 
				+                      placeholder="Enter email">
			
 
				+        </b-form-input>
			
 
				+      </b-form-group>
			
 
				+      <b-form-group id="exampleInputGroup2"
			
 
				+                    label="Your Name:"
			
 
				+                    label-for="exampleInput2">
			
 
				+        <b-form-input id="exampleInput2"
			
 
				+                      type="text"
			
 
				+                      v-model="form.name"
			
 
				+                      required
			
 
				+                      placeholder="Enter name">
			
 
				+        </b-form-input>
			
 
				+      </b-form-group>
			
 
				+      <b-form-group id="exampleGroup4">
			
 
				+        <b-form-checkbox-group v-model="form.checked" id="exampleChecks">
			
 
				+          <b-form-checkbox value="me">Check me out</b-form-checkbox>
			
 
				+          <b-form-checkbox value="that">Check that out</b-form-checkbox>
			
 
				+        </b-form-checkbox-group>
			
 
				+      </b-form-group>
			
 
				+      <b-button type="submit" variant="primary">Submit</b-button>
			
 
				+      <b-button type="reset" variant="danger">Reset</b-button>
			
 
				+    </b-form>
			
 
				+
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+
			
 
				+export default {
			
 
				+  data () {
			
 
				+    return {
			
 
				+      show: true,
			
 
				+      form: {
			
 
				+        checked: false,
			
 
				+        email: '',
			
 
				+        name: '',
			
 
				+        checked: false,
			
 
				+      },
			
 
				+      translations: {
			
 
				+        title: 'Distributor page',
			
 
				+        add_distributor: 'Add distributor',
			
 
				+      },
			
 
				+    }
			
 
				+  },
			
 
				+  methods: {
			
 
				+    onSubmit () {
			
 
				+      console.log(form);
			
 
				+    },
			
 
				+    onReset () {
			
 
				+      console.log('onReset');
			
 
				+    }
			
 
				+  },
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+
			
 
				+</style>
			
--- a/src/components/Distributor.vue
+++ b/src/components/Distributor.vue
@@ -0,0 +1,42 @@
 
				+<template>
			
 
				+  <div class="distributor">
			
 
				+    <header class="header container mb-5">
			
 
				+      <h1>{{translations.title}}</h1>
			
 
				+    </header>
			
 
				+    <section class="container">
			
 
				+      <div class="row mb-3">
			
 
				+        <b-button :pressed.sync="addDistributor" variant="primary">
			
 
				+          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
			
 
				+          {{translations.add_distributor}}
			
 
				+        </b-button>
			
 
				+      </div>
			
 
				+      <div class="row" v-if="addDistributor">
			
 
				+        <distributor-form/>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+
			
 
				+import DistributorForm from './Distributor-form.vue';
			
 
				+
			
 
				+export default {
			
 
				+  components: {
			
 
				+      'distributor-form': DistributorForm,
			
 
				+  },
			
 
				+  data () {
			
 
				+    return {
			
 
				+      addDistributor: true,
			
 
				+      translations: {
			
 
				+        title: 'Distributor page',
			
 
				+        add_distributor: 'Add distributor',
			
 
				+      },
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+
			
 
				+</style>
			
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -0,0 +1,17 @@
 
				+<template>
			
 
				+    <header class="header container">
			
 
				+        <h1>Home</h1>
			
 
				+    </header>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+
			
 
				+export default {
			
 
				+  data () {
			
 
				+    return {}
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,42 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import Vuex from 'vuex'
			
 
				+import VueRouter from 'vue-router'
			
 
				+import {routes} from './routes'
			
 
				+
			
 
				+// Setting up Router
			
 
				+Vue.use(VueRouter);
			
 
				+const router = new VueRouter({
			
 
				+  routes
			
 
				+})
			
 
				+import BootstrapVue from 'bootstrap-vue'
			
 
				+// Add bootstrap components globally:
			
 
				+import {
			
 
				+  Button, 
			
 
				+  Form, 
			
 
				+  FormCheckbox, 
			
 
				+  FormGroup, 
			
 
				+  FormInput,
			
 
				+  Nav
			
 
				+} from 'bootstrap-vue/es/components/';
			
 
				+
			
 
				+// Bootstrap base styles
			
 
				+import 'bootstrap/dist/css/bootstrap.css'
			
 
				+import 'bootstrap-vue/dist/bootstrap-vue.css'
			
 
				+
			
 
				+Vue.use(BootstrapVue);
			
 
				+Vue.use(Button);
			
 
				+Vue.use(FormCheckbox);
			
 
				+Vue.use(FormGroup);
			
 
				+Vue.use(FormInput);
			
 
				+Vue.use(Form);
			
 
				+Vue.use(Nav);
			
 
				+
			
 
				+// Add Vuex imported above
			
 
				+Vue.use(Vuex);
			
 
				+
			
 
				+new Vue({
			
 
				+  el: '#app',
			
 
				+  router,
			
 
				+  render: h => h(App)
			
 
				+})
			
--- a/src/routes.js
+++ b/src/routes.js
@@ -0,0 +1,13 @@
 
				+import Distributor from './components/Distributor.vue';
			
 
				+import Home from './components/Home.vue';
			
 
				+
			
 
				+export const routes= [
			
 
				+    {
			
 
				+        path: '', 
			
 
				+        component: Home
			
 
				+    },
			
 
				+    {
			
 
				+        path: '/distributor', 
			
 
				+        component: Distributor
			
 
				+    },
			
 
				+]
			
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,108 @@
 
				+var path = require('path')
			
 
				+var webpack = require('webpack')
			
 
				+
			
 
				+module.exports = {
			
 
				+  entry: './src/main.js',
			
 
				+  output: {
			
 
				+    path: path.resolve(__dirname, './dist'),
			
 
				+    publicPath: '/dist/',
			
 
				+    filename: 'build.js'
			
 
				+  },
			
 
				+  module: {
			
 
				+    rules: [
			
 
				+      {
			
 
				+        test: /\.css$/,
			
 
				+        use: [
			
 
				+          'vue-style-loader',
			
 
				+          'css-loader'
			
 
				+        ],
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.scss$/,
			
 
				+        use: [
			
 
				+          'vue-style-loader',
			
 
				+          'css-loader',
			
 
				+          'sass-loader'
			
 
				+        ],
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.sass$/,
			
 
				+        use: [
			
 
				+          'vue-style-loader',
			
 
				+          'css-loader',
			
 
				+          'sass-loader?indentedSyntax'
			
 
				+        ],
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.vue$/,
			
 
				+        loader: 'vue-loader',
			
 
				+        options: {
			
 
				+          loaders: {
			
 
				+            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
			
 
				+            // the "scss" and "sass" values for the lang attribute to the right configs here.
			
 
				+            // other preprocessors should work out of the box, no loader config like this necessary.
			
 
				+            'scss': [
			
 
				+              'vue-style-loader',
			
 
				+              'css-loader',
			
 
				+              'sass-loader'
			
 
				+            ],
			
 
				+            'sass': [
			
 
				+              'vue-style-loader',
			
 
				+              'css-loader',
			
 
				+              'sass-loader?indentedSyntax'
			
 
				+            ]
			
 
				+          }
			
 
				+          // other vue-loader options go here
			
 
				+        }
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.js$/,
			
 
				+        loader: 'babel-loader',
			
 
				+        exclude: /node_modules/
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.(png|jpg|gif|svg)$/,
			
 
				+        loader: 'file-loader',
			
 
				+        options: {
			
 
				+          name: '[name].[ext]?[hash]'
			
 
				+        }
			
 
				+      }
			
 
				+    ]
			
 
				+  },
			
 
				+  resolve: {
			
 
				+    alias: {
			
 
				+      'vue$': 'vue/dist/vue.esm.js'
			
 
				+    },
			
 
				+    extensions: ['*', '.js', '.vue', '.json']
			
 
				+  },
			
 
				+  devServer: {
			
 
				+    historyApiFallback: true,
			
 
				+    noInfo: true,
			
 
				+    overlay: true
			
 
				+  },
			
 
				+  performance: {
			
 
				+    hints: false
			
 
				+  },
			
 
				+  devtool: '#eval-source-map'
			
 
				+}
			
 
				+
			
 
				+if (process.env.NODE_ENV === 'production') {
			
 
				+  module.exports.devtool = '#source-map'
			
 
				+  // http://vue-loader.vuejs.org/en/workflow/production.html
			
 
				+  module.exports.plugins = (module.exports.plugins || []).concat([
			
 
				+    new webpack.DefinePlugin({
			
 
				+      'process.env': {
			
 
				+        NODE_ENV: '"production"'
			
 
				+      }
			
 
				+    }),
			
 
				+    new webpack.optimize.UglifyJsPlugin({
			
 
				+      sourceMap: true,
			
 
				+      compress: {
			
 
				+        warnings: false
			
 
				+      }
			
 
				+    }),
			
 
				+    new webpack.LoaderOptionsPlugin({
			
 
				+      minimize: true
			
 
				+    })
			
 
				+  ])
			
 
				+}