From e30a89a8886bbb613d66463df0c81025ddb097dd Mon Sep 17 00:00:00 2001
From: cristijora <joracristi@gmail.com>
Date: Sun, 28 May 2017 13:47:57 +0300
Subject: [PATCH] Add playground demos

---
 docs/README.md  | 443 ++++++++++++++++++++++++++++++++++++++++++++++++
 docs/index.html |  29 ++++
 2 files changed, 472 insertions(+)

diff --git a/docs/README.md b/docs/README.md
index 9a904a3..4abe46f 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -20,6 +20,7 @@ Other demos:
 * [Vue router integration](https://jsfiddle.net/bt5dhqtf/267/) You can place a `router-view` inside the wizard and have a separate page per tab. A `route` prop must be passed to the tabs you want to handle certain tabs
 * [Async validation with error message](https://jsfiddle.net/CristiJ/bt5dhqtf/298/) `before-change` prop can accept a promise that is resolved with `true` which will execute the promise before switching to another step/tab (NOTE: This feature is not present in the npm package yet)
 
+There is also a [Playground](?id=playground) where you can test stuff out right here in the browser!
 # Usage
 
 ## NPM
@@ -174,3 +175,445 @@ Vue-form-wizard emits certain events when certain actions happen inside the comp
 5. `npm run build` to generate the new js and css bundles 
 6. Commit your changes + the js and css bundles so it's easy to test them right away in fiddles, codepen etc
 7. Open a Pull Request. For more information refer to [github forking workflow](https://gist.github.com/Chaser324/ce0505fbed06b947d962)
+
+
+# Playground
+
+## Simple
+<vuep template="#simpledemo"></vuep>
+
+<script v-pre type="text/x-template" id="simpledemo">
+<template>
+  <form-wizard @on-complete="onComplete">
+     <tab-content title="Personal details"
+                  icon="ti-user">
+       My first tab content
+     </tab-content>
+     <tab-content title="Additional Info"
+                  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>
+ </form-wizard>
+ 
+</template>
+
+<script>
+  Vue.use(VueFormWizard)
+  export default {
+     methods: {
+      onComplete: function(){
+          alert('Yay. Done!');
+       }
+      }
+  }
+</script>
+</script>
+
+
+## Square steps
+
+<vuep template="#squaredsteps"></vuep>
+
+<script v-pre type="text/x-template" id="squaredsteps">
+<template>
+  <form-wizard @on-complete="onComplete" 
+                        shape="square"
+                        color="#3498db">
+      <tab-content title="Personal details"
+                   icon="ti-user">
+        My first tab content
+      </tab-content>
+      <tab-content title="Additional Info"
+                   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>
+  </form-wizard>
+ 
+</template>
+
+<script>
+  Vue.use(VueFormWizard)
+  export default {
+     methods: {
+      onComplete: function(){
+          alert('Yay. Done!');
+       }
+      }
+  }
+</script>
+</script>
+
+
+## Tabbed steps
+
+<vuep template="#tabbedsteps"></vuep>
+
+<script v-pre type="text/x-template" id="tabbedsteps">
+<template>
+  <form-wizard @on-complete="onComplete" 
+                        shape="tab"
+                        color="#9b59b6">
+        <tab-content title="Personal details"
+                     icon="ti-user">
+          My first tab content
+        </tab-content>
+        <tab-content title="Additional Info"
+                     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>
+   </form-wizard>
+ 
+</template>
+
+<script>
+  Vue.use(VueFormWizard)
+  export default {
+     methods: {
+      onComplete: function(){
+          alert('Yay. Done!');
+       }
+      }
+  }
+</script>
+</script>
+
+
+## Start from a specific index
+
+<vuep template="#startindex"></vuep>
+
+<script v-pre type="text/x-template" id="startindex">
+<template>
+ <form-wizard @on-complete="onComplete"
+                       :start-index="1"
+                       color="#e67e22">
+     <tab-content title="Personal details"
+                  icon="ti-user">
+       My first tab content
+     </tab-content>
+     <tab-content title="Additional Info"
+                  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>
+ </form-wizard>
+ 
+</template>
+
+<script>
+  Vue.use(VueFormWizard)
+  export default {
+     methods: {
+      onComplete: function(){
+          alert('Yay. Done!');
+       }
+      }
+  }
+</script>
+</script>
+
+
+## Custom button and title text
+
+<vuep template="#customtext"></vuep>
+
+<script v-pre type="text/x-template" id="customtext">
+<template>
+ <form-wizard @on-complete="onComplete"
+                       title="This is a new title"
+                       subtitle="And a new subtitle"
+                       shape="tab"
+                       back-button-text="Go back!"
+                       next-button-text="Go next!"
+                       finish-button-text="We're there"
+                       color="#9b59b6">
+     <tab-content title="Personal details"
+                  icon="ti-user">
+       My first tab content
+     </tab-content>
+     <tab-content title="Additional Info"
+                  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>
+ </form-wizard>
+ 
+</template>
+
+<script>
+  Vue.use(VueFormWizard)
+  export default {
+     methods: {
+      onComplete: function(){
+          alert('Yay. Done!');
+       }
+      }
+  }
+</script>
+</script>
+
+## Replace buttons and title with Slots
+
+<vuep template="#customslots"></vuep>
+
+<script v-pre type="text/x-template" id="customslots">
+<template>
+ <form-wizard @on-complete="onComplete"
+                       shape="tab"
+                       color="#e67e22">
+     <h2 slot="title">This will replace my whole title</h2> 
+     <tab-content title="Personal details"
+                  icon="ti-user">
+       My first tab content
+     </tab-content>
+     <tab-content title="Additional Info"
+                  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>
+     
+     <button slot="prev">Back</button>
+     <button slot="next">Next</button>
+     <button slot="finish">Finish</button>
+ </form-wizard>
+ 
+</template>
+
+<script>
+  Vue.use(VueFormWizard)
+  export default {
+     methods: {
+      onComplete: function(){
+          alert('Yay. Done!');
+       }
+      }
+  }
+</script>
+</script>
+
+## Call a function before tab switch
+
+<vuep template="#callfunction"></vuep>
+
+<script v-pre type="text/x-template" id="callfunction">
+<template>
+  <form-wizard @on-complete="onComplete" 
+                       shape="tab"
+                       color="#9b59b6">
+     <tab-content title="Personal details"
+                  icon="ti-user" :before-change="beforeTabSwitch">
+       My first tab content
+     </tab-content>
+     <tab-content title="Additional Info"
+                  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>
+ </form-wizard>
+ 
+</template>
+
+<script>
+  Vue.use(VueFormWizard)
+  export default {
+     methods: {
+      onComplete: function(){
+          alert('Yay. Done!');
+       },
+       beforeTabSwitch: function(){
+          alert("This is called before switchind tabs")
+          return true;
+        }
+      },
+  }
+</script>
+</script>
+
+## Async validation
+
+<vuep template="#asyncvalidation"></vuep>
+
+<script v-pre type="text/x-template" id="asyncvalidation">
+<template>
+  <form-wizard @on-complete="onComplete"
+                  @on-loading="setLoading"
+                  @on-validate="handleValidation"
+                  @on-error="handleErrorMessage"
+                  shape="circle"
+                  color="gray"
+                  error-color="#e74c3c">
+    <tab-content title="Personal details"
+                 :before-change="validateAsync"
+                 icon="ti-user">
+            First tab
+    </tab-content>
+    <tab-content title="Additional Info"
+                 icon="ti-settings">
+            Second tab
+    </tab-content>
+    <tab-content title="Last step"
+                 icon="ti-check">
+            Third tab
+    </tab-content>
+    
+    <div class="loader" v-if="loadingWizard"></div>
+    <div v-if="errorMsg">
+      <span class="error">{{errorMsg}}</span>
+    </div>
+  </form-wizard>
+ 
+</template>
+<style>
+span.error{
+  color:#e74c3c;
+  font-size:20px;
+  display:flex;
+  justify-content:center;
+}
+</style>
+<script>
+  Vue.use(VueFormWizard)
+  export default {
+     data(){
+        return {
+         loadingWizard: false,
+         errorMsg: null,
+         count: 0
+        }
+      },
+      methods: {
+       onComplete: function(){
+           alert('Yay. Done!');
+        },
+        setLoading: function(value) {
+            this.loadingWizard = value
+        },
+        handleValidation: function(isValid, tabIndex){
+           console.log('Tab: '+tabIndex+ ' valid: '+isValid)
+        },
+        handleErrorMessage: function(errorMsg){
+          this.errorMsg = errorMsg
+        },
+        validateAsync:function() {
+          return new Promise((resolve, reject) => {
+            setTimeout(() => {
+              if(this.count < 1){
+               this.count ++
+              	reject('This is a custom validation error message. Click next again to get rid of the validation')
+              }else{
+               this.count = 0
+               resolve(true)
+              }   
+            }, 1000)
+          })
+         },
+       }
+  }
+</script>
+</script>
+
+
+
+## Element UI integration
+
+<vuep template="#elementui"></vuep>
+
+<script v-pre type="text/x-template" id="elementui">
+<template>
+  <form-wizard @on-complete="onComplete" shape="circle" color="#20a0ff" error-color="#ff4949">
+    <tab-content title="Personal details" icon="ti-user" :before-change="validateFirstStep">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline" :rules="rules" ref="ruleForm">
+        <el-form-item label="Approved by" prop="user">
+          <el-input v-model="formInline.user" placeholder="Approved by"></el-input>
+        </el-form-item>
+        <el-form-item label="Activity zone" prop="region">
+          <el-select v-model="formInline.region" placeholder="Activity zone">
+            <el-option label="Zone one" value="shanghai"></el-option>
+            <el-option label="Zone two" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+    </tab-content>
+    <tab-content title="Additional Info" icon="ti-settings">
+      Second tab
+    </tab-content>
+    <tab-content title="Last step" icon="ti-check">
+      Yuhuuu! This seems pretty damn simple
+    </tab-content>
+
+    <el-button type="primary" slot="prev">Back</el-button>
+    <el-button type="primary" slot="next">Next</el-button>
+    <el-button type="primary" slot="finish">Finish</el-button>
+  </form-wizard>
+ 
+</template>
+
+<script>
+  Vue.use(VueFormWizard)
+  export default {
+     data() {
+       return {
+         formInline: {
+           user: '',
+           region: ''
+         },
+         rules: {
+           user: [{
+             required: true,
+             message: 'Please input Activity name',
+             trigger: 'blur'
+           }, {
+             min: 3,
+             max: 5,
+             message: 'Length should be 3 to 5',
+             trigger: 'blur'
+           }],
+           region: [{
+             required: true,
+             message: 'Please select Activity zone',
+             trigger: 'change'
+           }],
+         }
+        }
+       },
+       methods: {
+         onComplete: function() {
+           alert('Yay. Done!');
+         },
+         validateFirstStep() {
+           return new Promise((resolve, reject) => {
+             this.$refs.ruleForm.validate((valid) => {
+               resolve(valid);
+             });
+           })
+     
+         }
+       }
+  }
+</script>
+</script>
diff --git a/docs/index.html b/docs/index.html
index f225c42..7ed6264 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,6 +6,10 @@
   <meta name="description" content="A vue based tab/form wizard">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
+  <link rel="stylesheet" href="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.min.css">
+  <link rel="stylesheet" href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css">
+  <link rel="stylesheet" href="https://unpkg.com/element-ui@1.3.4/lib/theme-default/index.css">
+  <link rel="stylesheet" href="https://unpkg.com/vuep/dist/vuep.css">
 </head>
 <body>
   <div id="app"></div>
@@ -17,4 +21,29 @@
   }
 </script>
 <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
+<script src="https://unpkg.com/vue"></script>
+<script src="https://npmcdn.com/vue-router@2.4.0/dist/vue-router.js"></script>
+<script src="https://rawgit.com/cristijora/vue-form-wizard/master/dist/vue-form-wizard.js"></script>
+<script src="https://unpkg.com/element-ui@1.3.4/lib/index.js"></script>
+<script src="https://unpkg.com/vuep"></script>
+
+<style type="text/css">
+  .vuep{
+    height: inherit !important;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .vuep-editor,
+  .vuep-preview{
+    width:100%;
+  }
+
+  .cm-s-material .cm-error{
+    color: rgba(255, 83, 112, 1);
+    background-color: inherit !important;
+  }
+
+  </style>
 </html>