Add API for overwriting default components (#850)

* implement API for overwriting child components

* add test coverage

* update documentation for Components & Styling

* update docs

* refactor API, update docs

* remove the service worker

* fix tests

src/components/Select.vue

@@ -18,7 +18,7 @@
               {{ getOptionLabel(option) }}
             </slot>
             <button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="vs__deselect" aria-label="Deselect option">
-              <deselect />
+              <component :is="childComponents.Deselect" />
             </button>
           </span>
         </slot>
@@ -37,10 +37,12 @@
           class="vs__clear"
           title="Clear selection"
         >
-          <deselect />
+          <component :is="childComponents.Deselect" />
         </button>
 
-        <open-indicator v-if="!noDrop" ref="openIndicator" role="presentation" class="vs__open-indicator" />
+        <slot name="open-indicator-icon">
+          <component :is="childComponents.OpenIndicator" v-bind="scope.openIndicator.attributes"/>
+        </slot>
 
         <slot name="spinner" v-bind="scope.spinner">
           <div class="vs__spinner" v-show="mutableLoading">Loading...</div>
@@ -75,11 +77,10 @@
   import pointerScroll from '../mixins/pointerScroll'
   import typeAheadPointer from '../mixins/typeAheadPointer'
   import ajax from '../mixins/ajax'
-  import Deselect from './Deselect'
-  import OpenIndicator from './OpenIndicator'
+  import childComponents from './childComponents';
 
   export default {
-    components: {Deselect, OpenIndicator},
+    components: {...childComponents},
 
     mixins: [pointerScroll, typeAheadPointer, ajax],
 
@@ -92,6 +93,18 @@
        */
       value: {},
 
+      /**
+       * An object with any custom components that you'd like to overwrite
+       * the default implementation of in your app. The keys in this object
+       * will be merged with the defaults.
+       * @see https://vue-select.org/guide/components.html
+       * @type {Function}
+       */
+      components: {
+        type: Object,
+        default: () => ({}),
+      },
+
       /**
        * An array of strings or objects to be used as dropdown choices.
        * If you are using an array of objects, vue-select will look for
@@ -443,10 +456,6 @@
       },
     },
 
-    /**
-     * Clone props into mutable values,
-     * attach any event listeners.
-     */
     created() {
       this.mutableLoading = this.loading;
 
@@ -878,7 +887,29 @@
           },
           spinner: {
             loading: this.mutableLoading
-          }
+          },
+          openIndicator: {
+            attributes: {
+              'v-if': !this.noDrop,
+              'ref': 'openIndicator',
+              'role': 'presentation',
+              'class': 'vs__open-indicator',
+            },
+          },
+        };
+      },
+
+      /**
+       * Returns an object containing the child components
+       * that will be used throughout the component. The
+       * `component` prop can be used to overwrite the defaults.
+       *
+       * @return {Object}
+       */
+      childComponents () {
+        return {
+          ...childComponents,
+          ...this.components
         };
       },
 

src/components/childComponents.js

@@ -0,0 +1,7 @@
+import Deselect from './Deselect';
+import OpenIndicator from './OpenIndicator';
+
+export default {
+  Deselect,
+  OpenIndicator
+}