🆒 Code Optimization; Vue.$api is now Vue.api;

ftgibran · Aug 19, 2017 · 18edef3 · 18edef3
1 parent 26c757c
commit 18edef3
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 45 deletions.
diff --git a/.npmignore b/.npmignore
@@ -8,4 +8,4 @@ yarn.lock
 *.html
 src/*
 !src/index.js
-!src/components/ApiRequest.vue
+!src/components/
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "axios",
     "vue-resource",
     "ajax",
-    "loading",
+    "loader",
     "component"
   ],
   "author": "Felipe Gibran Eleuterio Toledo <ft.gibran@gmail.com>",
@@ -30,39 +30,41 @@
     "vue-spinner": "^1.0.2"
   },
   "devDependencies": {
-    "axios": "^0.16.2",
-    "gsap": "^1.20.2",
-    "vue": "^2.3.3",
-    "vue-router": "^2.6.0",
-    "vue-resource": "^1.3.4",
     "autoprefixer": "^6.7.2",
+    "axios": "^0.16.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
+    "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.3.2",
     "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",
     "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^4.0.0",
+    "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
     "eslint": "^3.19.0",
+    "eslint-config-standard": "^6.2.1",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.7.1",
     "eslint-plugin-html": "^2.0.0",
-    "eslint-config-standard": "^6.2.1",
     "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",
     "file-loader": "^0.11.1",
+    "font-awesome": "^4.7.0",
     "friendly-errors-webpack-plugin": "^1.1.3",
+    "gsap": "^1.20.2",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "cross-env": "^4.0.0",
+    "inject-loader": "^3.0.0",
     "karma": "^1.4.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
@@ -74,27 +76,26 @@
     "karma-webpack": "^2.0.2",
     "lolex": "^1.5.2",
     "mocha": "^3.2.0",
-    "chai": "^3.5.0",
-    "sinon": "^2.1.0",
-    "sinon-chai": "^2.8.0",
-    "inject-loader": "^3.0.0",
-    "babel-plugin-istanbul": "^4.1.1",
-    "phantomjs-prebuilt": "^2.1.14",
-    "chromedriver": "^2.27.2",
-    "cross-spawn": "^5.0.1",
     "nightwatch": "^0.9.12",
-    "selenium-server": "^3.0.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.2.0",
+    "phantomjs-prebuilt": "^2.1.14",
     "rimraf": "^2.6.0",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "sinon": "^2.1.0",
+    "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.8",
+    "vue": "^2.3.3",
     "vue-loader": "^12.1.0",
+    "vue-resource": "^1.3.4",
+    "vue-router": "^2.6.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.3.3",
     "webpack": "^2.6.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.18.0",
     "webpack-merge": "^4.1.0"

diff --git a/src/components/ApiRequest.vue b/src/components/ApiRequest.vue
@@ -78,8 +78,7 @@
     data () {
       return {
         animate: null,
-        state: null, // waiting, loading, success, error
-        response: {}
+        state: null // waiting, loading, success, error
       }
     },
 
@@ -168,6 +167,7 @@
         // Go to loading state
         this.loadingEvent()
 
+        let response = {}
         let resources = []
         let keys = []
         let path = this.resp
@@ -188,14 +188,14 @@
 
         Promise.all(resources).then(responses => {
           // if request has multiple requests then
-          if (keys.length !== 0) responses.forEach((resp, i) => { this.response[keys[i]] = index(resp, path) })
+          if (keys.length !== 0) responses.forEach((resp, i) => { response[keys[i]] = index(resp, path) })
           // if request is a single request then
-          else responses.forEach(resp => { this.response = index(resp, path) })
+          else responses.forEach(resp => { response = index(resp, path) })
           // Go to success state
-          this.successEvent()
-        }).catch(e => {
+          this.successEvent(response)
+        }).catch(resp => {
           // Go to error state
-          this.errorEvent(e)
+          this.errorEvent(resp)
         })
 
         // Get Object by string dot notation
@@ -213,32 +213,34 @@
 
       waitingEvent () {
         this.state = 'waiting'
-        this.$emit(this.state)
+        this.$emit('waiting')
       },
 
       loadingEvent () {
         this.state = 'loading'
-        this.$emit(this.state)
+        this.$emit('loading')
         this.animate = null
       },
 
-      successEvent () {
+      successEvent (resp) {
         this.state = 'success'
         this.runEffect()
-        this.$emit('input', this.response)
-        this.$emit('loaded', this.response)
-        this.$emit(this.state, this.response)
-        this.successCallback(this.response)
+        this.$emit('input', resp)
+        this.$emit('loaded', resp)
+        this.$emit('success', resp)
+        this.successCallback(resp)
+        this.$emit('afterSuccess', resp)
 
         if (this.hasWaitingSlot && !(this.hasSuccessSlot || this.hasLoadedSlot)) this.waitingEvent()
       },
 
-      errorEvent (e) {
+      errorEvent (resp) {
         this.state = 'error'
         this.runEffect()
-        this.$emit('loaded', e)
-        this.$emit(this.state, e)
-        this.errorCallback(e)
+        this.$emit('loaded', resp)
+        this.$emit('error', resp)
+        this.errorCallback(resp)
+        this.$emit('afterError', resp)
 
         if (this.hasWaitingSlot && !(this.hasErrorSlot || this.hasLoadedSlot)) this.waitingEvent()
       },

diff --git a/src/components/CustomLoader.vue b/src/components/CustomLoader.vue
@@ -1,5 +1,6 @@
 <template>
   <div :style="{color: this.color}">
+    <i class="fa fa-refresh fa-spin"></i>
     <strong>Loading...</strong>
   </div>
 </template>

diff --git a/src/components/Example.vue b/src/components/Example.vue
@@ -56,7 +56,6 @@
           :params="{time: 1000, response: !e3.liked}"
           v-model="e3.liked"
           :trigger.sync="e3.trigger"
-          effect="zoomIn"
           :spinner-scale="0.55"
           :spinner-padding="0"
         >
@@ -81,7 +80,6 @@
           :trigger.sync="e4.trigger"
           :sync="e4.offset"
           resp="data"
-          effect="zoomIn"
         >
           <form slot="waiting" @submit.prevent="e4.trigger=true">
             <div class="form-group">
@@ -117,6 +115,31 @@
 
       </div>
     </section>
+
+    <hr/>
+
+    <section>
+      <h2>Custom Loader & Effect</h2>
+
+      <api-request
+        :resource="$api.fakeRequest"
+        :params="{time: 3000}"
+        :trigger.sync="e5.trigger"
+        spinner="CustomLoader"
+        effect="blur"
+      >
+        <div slot="waiting">
+          <img src="../assets/v-api@512.png"
+               :style="{width: '256px'}"
+               alt="vue-api-resource"/>
+        </div>
+      </api-request>
+
+      <p>
+        <button @click="e5.trigger=true">Reload</button>
+      </p>
+    </section>
+
   </div>
 </template>
 
@@ -142,6 +165,9 @@
           q: null,
           offset: 0,
           resp: null
+        },
+        e5: {
+          trigger: false
         }
       }
     },

diff --git a/src/index.js b/src/index.js
@@ -23,7 +23,7 @@ var module = {
   install: function (Vue, options) {
     var opt = options || {}
 
-    Vue.$api = api
+    Vue.api = api
     Vue.prototype.$api = api
 
     if (opt.effect) ApiRequest.props.effect.default = opt.effect

diff --git a/src/main.js b/src/main.js
@@ -5,21 +5,22 @@ import AppResource from './service/AppResource'
 import VueApiRequest from './index'
 import { TweenLite, Power2 } from 'gsap'
 import CustomLoader from './components/CustomLoader.vue'
+import 'font-awesome/css/font-awesome.css'
 
 VueApiRequest.setAPI(AppResource)
 
 VueApiRequest.addLoader('CustomLoader', CustomLoader)
 
 VueApiRequest.addEffect('blur', (el) => {
-  el.style.filter = 'blur(10px)'
-  TweenLite.to(el, 0.5, {
+  el.style.filter = 'blur(20px)'
+  TweenLite.to(el, 1, {
     filter: 'blur(0)',
     ease: Power2.easeOut
   })
 })
 
 let options = {
-  effect: 'blur',
+  effect: 'zoomIn',
   spinner: 'moonLoader',
   spinnerColor: '#FC6094',
   onSuccess: resp => {