Merge pull request kaorun343#45 from animalitosContribution/master

Feat(Installation): add support for custom component name
pedr · Jun 27, 2018 · b712526 · b712526
2 parents 691d480 + 43503e4
commit b712526
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -32,6 +32,8 @@ import VueYouTubeEmbed from 'vue-youtube-embed'
 Vue.use(VueYouTubeEmbed)
 // if you don't want install the component globally
 Vue.use(VueYouTubeEmbed, { global: false })
+// if you want to install the component globally with a different name
+Vue.use(VueYouTubeEmbed, { global: true, componentId:"youtube-media" })
 ```
 
 ## Usage
@@ -40,8 +42,10 @@ Please pass the ID of the video that you'd like to show.
 
 ```html
 <youtube :video-id="videoId"></youtube>
-```
 
+<!-- or with a custom component identifier -->
+<youtube-media :video-id="videoId"></youtube-media>
+```
 ### Props
 
 These are available props.

diff --git a/lib/vue-youtube-embed.js b/lib/vue-youtube-embed.js
@@ -1,6 +1,6 @@
 /*!
  * Vue YouTube Embed version 2.1.3
- * under MIT License copyright 2017 kaorun343
+ * under MIT License copyright 2018 kaorun343
  */
 (function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -184,15 +184,15 @@ var YouTubePlayer = {
  events: {
  onReady: function (event) {
  this$1.setMute(this$1.mute);
- this$1.$emit('ready', event.target);
+ this$1.$emit('ready', event);
  },
  onStateChange: function (event) {
  if (event.data !== -1) {
- this$1.$emit(container.events[event.data], event.target);
+ this$1.$emit(container.events[event.data], event);
  }
  },
  onError: function (event) {
- this$1.$emit('error', event.target);
+ this$1.$emit('error', event);
  }
  }
  });
@@ -207,13 +207,17 @@ var YouTubePlayer = {
 };
 
 var index = {
- install: function install (Vue, options) {
+ install: function install(Vue, options) {
  if ( options === void 0 ) options = { global: true };
 
  container.Vue = Vue;
  YouTubePlayer.ready = YouTubePlayer.mounted;
+
  if (options.global) {
- Vue.component('youtube', YouTubePlayer);
+ // if there is a global component with "youtube" identifier already taken
+ // then we should let user to pass a new identifier.
+ var componentId = options.componentId || 'youtube';
+ Vue.component(componentId, YouTubePlayer);
  }
  Vue.prototype.$youtube = { getIdFromURL: getIdFromURL, getTimeFromURL: getTimeFromURL };
 

diff --git a/src/index.js b/src/index.js
@@ -5,11 +5,15 @@ import YouTubePlayer from './player'
 export { YouTubePlayer, getIdFromURL, getTimeFromURL }
 
 export default {
- install (Vue, options = { global: true }) {
+ install(Vue, options = { global: true }) {
  container.Vue = Vue
  YouTubePlayer.ready = YouTubePlayer.mounted
+
  if (options.global) {
- Vue.component('youtube', YouTubePlayer)
+ // if there is a global component with "youtube" identifier already taken
+ // then we should let user to pass a new identifier.
+ const componentId = options.componentId || 'youtube';
+ Vue.component(componentId, YouTubePlayer)
  }
  Vue.prototype.$youtube = { getIdFromURL, getTimeFromURL }
 

diff --git a/test/index.spec.js b/test/index.spec.js
@@ -19,3 +19,4 @@ describe('install', () => {
  assert.equal($youtube.getTimeFromURL, getTimeFromURL)
  })
 })
+