use vue way to emit event

kieusonlam · Aug 6, 2018 · 019648a · 019648a
1 parent 80432df
commit 019648a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Usage
 <VueGPicker :clientId="'your-client-id'"
             :developerKey="'your-developer-key'"
             :scope="['https://www.googleapis.com/auth/drive.readonly']"
-            :onChange="(data) => console.log('on change:', data)"
+            @change="(data) => console.log('on change:', data)"
             :multiselect="true"
             :navHidden="false"
             :authImmediate="false"
@@ -37,8 +37,8 @@ You can do so by using `onAuthenticate`:
 <VueGPicker :clientId="'your-client-id'"
             :developerKey="'your-developer-key'"
             :scope="['https://www.googleapis.com/auth/drive.readonly']"
-            :onChange="(data) => console.log('on change:', data)"
-            :onAuthenticate="(token) => console.log('oauth token:', token)"
+            @change="(data) => console.log('on change:', data)"
+            @authenticated="(token) => console.log('oauth token:', token)"
             :multiselect="true"
             :navHidden="false"
             :authImmediate="false"
@@ -57,7 +57,7 @@ You can override the default build function by passing your custom function whic
 <VueGPicker :clientId="CLIENT_ID"
             :developerKey="DEVELOPER_KEY"
             :scope="SCOPE"
-            :onChange="(data) => console.log('on change:', data)"
+            @change="(data) => console.log('on change:', data)"
             :multiselect="true"
             :navHidden="false"
             :authImmediate="false"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-gpicker",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

diff --git a/src/App.vue b/src/App.vue
@@ -4,7 +4,8 @@
       :clientId="'1027461693281-5d7gmo87k26vm8h9jv28b5q1jl7d6au4.apps.googleusercontent.com'"
       :developerKey="'AIzaSyAcNwETZM1qWE4S_x0l-TgiV4EI-XXsTTo'"
       :scope="['https://www.googleapis.com/auth/drive.readonly']"
-      :onChange="onChange"
+      @change="onChange"
+      @authenticated="onAuthenticated"
       :multiselect="true"
       :navHidden="false"
       :authImmediate="false"
@@ -24,6 +25,9 @@ export default {
   methods: {
     onChange (data) {
       window.console.log('on change:', data)
+    },
+    onAuthenticated (token) {
+      window.console.log('oauth token:', token)
     }
   },
   components: {

diff --git a/src/components/VueGPicker.vue b/src/components/VueGPicker.vue
@@ -29,18 +29,6 @@ export default {
       default: 'DOCS' 
     },
     origin: String,
-    onChange: {
-      type: Function,
-      default: function () {
-        return {}
-      }
-    },
-    onAuthenticate: {
-      type: Function,
-      default: () => {
-        return {}
-      }
-    },
     createPicker: Function,
     authImmediate: {
       type: Boolean,
@@ -116,9 +104,28 @@ export default {
         this.doAuth(({ access_token }) => this.defaultCreatePicker(access_token))
       }
     },
+    pickerCallback (data) {
+      this.$emit('change', data)
+      switch (data.action) {
+        case 'loaded':
+          this.$emit('loaded')
+          break
+        case 'cancel':
+          this.$emit('cancel')
+          break
+        case 'picked':
+          this.$emit('picked', data.docs)
+          break
+        default: 
+          break
+      }
+    },
+    onAuthenticated (oauthToken) {
+      this.$emit('authenticated', oauthToken)
+    },
     defaultCreatePicker (oauthToken) {
 
-      this.onAuthenticate(oauthToken)
+      this.onAuthenticated(oauthToken)
 
       if(this.createPicker){
         return this.createPicker(window.google, oauthToken)
@@ -139,10 +146,10 @@ export default {
         .addView(view)
         .setOAuthToken(oauthToken)
         .setDeveloperKey(this.developerKey)
-        .setCallback(this.onChange);
+        .setCallback(this.pickerCallback)
 
       if (this.origin) {
-        picker.setOrigin(this.origin);
+        picker.setOrigin(this.origin)
       }
 
       if (this.navHidden) {