vue-wait transition feature (#70)

Author: sametaylak

examples/transition-example/index.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import VueWait from '../../src/vue-wait';
+
+import main from './main.vue';
+
+Vue.use(VueWait);
+
+new Vue({
+  el: '#app',
+  wait: new VueWait({ registerComponents: false }),
+  render: function(createElement) {
+    return createElement(main);
+  }
+});

examples/transition-example/main.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="app">
+    <button @click.prevent="getUsers">Get Users</button>
+    <div class="transitions-demo">
+      <div>
+        <h2>With transition</h2>
+        <v-wait for="users" transition="fade" mode="out-in">
+          <template slot="waiting">
+            <p>Loading...</p>
+          </template>
+
+          <ul>
+            <li>One</li>
+            <li>Two</li>
+            <li>Three</li>
+            <li>Four</li>
+            <li>Five</li>
+          </ul>
+        </v-wait>
+      </div>
+
+      <div>
+        <h2>Without transition</h2>
+        <v-wait for="users">
+          <template slot="waiting">
+            <p>Loading...</p>
+          </template>
+
+          <ul>
+            <li>One</li>
+            <li>Two</li>
+            <li>Three</li>
+            <li>Four</li>
+            <li>Five</li>
+          </ul>
+        </v-wait>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App",
+  methods: {
+    getUsers() {
+      return new Promise(resolve => {
+        this.$wait.start("users");
+        setTimeout(() => {
+          resolve();
+          this.$wait.end("users");
+        }, 5000);
+      });
+    }
+  }
+};
+</script>
+
+<style>
+#app {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.transitions-demo {
+  display: flex;
+  justify-content: space-around;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 2s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package.json

@@ -31,6 +31,7 @@
     "test": "exit 0;",
     "precommit": "lint-staged",
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
+    "dev-transition": "poi examples/transition-example/index.js",
     "dev-vuex": "poi examples/vuex-example/index.js",
     "dev-vue": "poi examples/vue-example/index.js",
     "dev-wrap": "poi examples/wrap-example/index.js",

src/components/v-wait.vue

@@ -1,16 +1,18 @@
 <template lang="html">
-  <div>
+  <transition :name='transition' :mode='mode'>
     <span v-if='waitsFor'>
       <slot name='waiting'></slot>
       <span v-if='message'>{{ message }}</span>
     </span>
     <slot v-else></slot>
-  </div>
+  </transition>
 </template>
 <script>
   export default {
     props: {
       visible: Boolean,
+      transition: String,
+      mode: String,
       for: String,
       message: String,
     },