Move example to dev-example folder

Remove watcher from FormWizard component to avoid double beforeChange trigger
Code cleanup

dev-example/App.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <form-wizard @on-complete="onComplete"
+                 shape="circle"
+                 color="#e74c3c"
+                 @on-loading="setLoading"
+                 class="card">
+      <tab-content title="Personal details"
+                   :before-change="validateAsync"
+                   icon="ti-user">
+        My first tab content
+      </tab-content>
+      <tab-content title="Additional Info"
+                   :before-change="validate"
+                   icon="ti-settings">
+        My second tab content
+      </tab-content>
+      <tab-content title="Last step"
+                   icon="ti-check">
+        Yuhuuu! This seems pretty damn simple
+      </tab-content>
+      <div class="loader" v-if="loadingWizard"></div>
+    </form-wizard>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'app',
+    data () {
+      return {
+        loadingWizard: false
+      }
+    },
+    methods: {
+      onComplete () {
+        alert('Yay!')
+      },
+      setLoading (value) {
+        this.loadingWizard = value
+      },
+      validateAsync () {
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            resolve(true)
+          }, 1000)
+        })
+      },
+      validate () {
+        return true
+      }
+    }
+  }
+</script>
+<style>
+  @import "loader.css";
+</style>
+<style lang="scss">
+  $border-radius-extreme: 6px !default;
+  $white-color: white;
+  $gray-input-bg: #F3F2EE !default;
+  $card-black-color: #252422 !default;
+
+  body {
+    margin-top: 20px;
+    background-color: #ecf0f1;
+  }
+
+  .card-footer {
+    padding: 0px 20px;
+  }
+
+  .card {
+    border-radius: $border-radius-extreme;
+    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
+    background-color: $white-color;
+    color: $card-black-color;
+    padding: 10px 0;
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 1;
+  }
+
+</style>

dev-example/loader.css

@@ -0,0 +1,41 @@
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #e74c3c;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

dev-example/main.js

@@ -0,0 +1,15 @@
+// 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 Vue from 'vue'
+import App from './App.vue'
+import FormWizard from '../src/index'
+Vue.use(FormWizard)
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  template: '<App/>',
+  components: {App}
+})