From 8c68718c843d9174572540bfa6ef7abb355f0263 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Sun, 28 Apr 2019 21:17:39 -0700
Subject: [PATCH] remove global component references from docs (#862)

---
 .../components/ClearButtonOverride.vue        | 18 ++----
 .../CustomComponentRegistration.vue           | 32 +++++------
 .../components/OpenIndicatorOverride.vue      | 24 +++-----
 docs/guide/components.md                      | 57 ++++++++-----------
 4 files changed, 52 insertions(+), 79 deletions(-)

diff --git a/docs/.vuepress/components/ClearButtonOverride.vue b/docs/.vuepress/components/ClearButtonOverride.vue
index 9c12bdc..b9350d6 100644
--- a/docs/.vuepress/components/ClearButtonOverride.vue
+++ b/docs/.vuepress/components/ClearButtonOverride.vue
@@ -1,24 +1,18 @@
 <template>
   <div>
     <v-select
-        :options="['Canada', 'United States']"
-        :components="{Deselect}"
+            :options="['Canada', 'United States']"
+            :components="{Deselect}"
     />
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
-
 export default {
-  computed: {
-    Deselect () {
-      return Vue.component('Deselect', {
-        render (createElement) {
-          return createElement('button', 'Clear');
-        },
-      });
+  data: () => ({
+    Deselect: {
+      render: createElement => createElement('button', 'Clear'),
     },
-  },
+  }),
 };
 </script>
diff --git a/docs/.vuepress/components/CustomComponentRegistration.vue b/docs/.vuepress/components/CustomComponentRegistration.vue
index 66f2af1..b086755 100644
--- a/docs/.vuepress/components/CustomComponentRegistration.vue
+++ b/docs/.vuepress/components/CustomComponentRegistration.vue
@@ -1,25 +1,21 @@
 <template>
-  <custom-select :options="['Vue.js', 'React', 'Angular']" />
+  <v-select
+          :options="['Vue.js', 'React', 'Angular']"
+          :components="components"
+  />
 </template>
 
 <script>
-import Vue from 'vue';
-import vSelect from '../../../src/components/Select';
-
-const components = {
-  Deselect: Vue.component('Deselect', {
-    render: (createElement) => createElement('button', '❌'),
-  }),
-  OpenIndicator: Vue.component('OpenIndicator', {
-    render: (createElement) => createElement('span', '🔽'),
+export default {
+  data: () => ({
+    components: {
+      Deselect: {
+        render: createElement => createElement('button', '❌'),
+      },
+      OpenIndicator: {
+        render: createElement => createElement('span', '🔽'),
+      },
+    },
   }),
 };
-
-const mySelect = {...vSelect};
-
-mySelect.props.components.default = () => components;
-
-export default {
-  components: {'custom-select': mySelect}
-}
 </script>
diff --git a/docs/.vuepress/components/OpenIndicatorOverride.vue b/docs/.vuepress/components/OpenIndicatorOverride.vue
index 1257776..8f5b76e 100644
--- a/docs/.vuepress/components/OpenIndicatorOverride.vue
+++ b/docs/.vuepress/components/OpenIndicatorOverride.vue
@@ -1,29 +1,21 @@
 <template>
   <div>
     <v-select
-        multiple
-        v-model="selected"
-        :options="['Canada', 'United States']"
-        :components="{OpenIndicator}"
+            multiple
+            v-model="selected"
+            :options="['Canada', 'United States']"
+            :components="{OpenIndicator}"
     />
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
-
 export default {
   data: () => ({
-    selected: ['Canada']
-  }),
-  computed: {
-    OpenIndicator () {
-      return Vue.component('OpenIndicator', {
-        render (createElement) {
-          return createElement('i', '🤘🏻');
-        },
-      });
+    selected: ['Canada'],
+    OpenIndicator: {
+      render: createElement => createElement('span', {class: {'toggle': true}}),
     },
-  },
+  }),
 };
 </script>
diff --git a/docs/guide/components.md b/docs/guide/components.md
index dd97c06..a4929f4 100644
--- a/docs/guide/components.md
+++ b/docs/guide/components.md
@@ -19,15 +19,13 @@ a simple `<button>Clear</button>` instead.
 ``` 
 
 ```js
-computed: {
-  Deselect() {
-    return Vue.component('Deselect', {
-      render (createElement) {
-        return createElement('button', 'Clear')
-      }
-    })
-  }
-}
+export default {
+  data: () => ({
+    Deselect: {
+      render: createElement => createElement('button', 'Clear'),
+    },
+  }),
+};
 ```
 
 <ClearButtonOverride />
@@ -45,20 +43,19 @@ based on whether the dropdown is open or closed.
 <v-select :components="{OpenIndicator}" />
 ```
 ```js
-computed: {
-  OpenIndicator () {
-    return Vue.component('OpenIndicator', {
-      render (createElement) {
-        return createElement('button', '🤘🏻');
-      },
-    });
-  },
-},
+export default {
+  data: () => ({
+    selected: ['Canada'],
+    OpenIndicator: {
+      render: createElement => createElement('span', {class: {'toggle': true}}),
+    },
+  }),
+};
 ```
 
 <OpenIndicatorOverride />
 
-## Setting at Registration
+## Setting Globally at Registration
 
 If you want to all instances of Vue Select to use your custom components throughout your app, while
 only having to set the implementation once, you can do so when registering Vue Select as a component.
@@ -67,21 +64,15 @@ only having to set the implementation once, you can do so when registering Vue S
 import Vue from 'vue';
 import vSelect from 'vue-select';
 
-/**
-* Create custom components to override defaults.
-* @type {{OpenIndicator: *, Deselect: *}}
-*/
-const components = {
-  Deselect: Vue.component('Deselect', {
-    render: (createElement) => createElement('button', '❌'),
-  }),
-  OpenIndicator: Vue.component('OpenIndicator', {
-    render: (createElement) => createElement('span', '🔽'),
-  }),
-};
-
 // Set the components prop default to return our fresh components 
-vSelect.props.components.default = () => components;
+vSelect.props.components.default = () => ({
+  Deselect: {
+    render: createElement => createElement('button', '❌'),
+  },
+  OpenIndicator: {
+    render: createElement => createElement('span', '🔽'),
+  },
+});
 
 // Register the component
 Vue.component(vSelect)