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

docs/.vuepress/components/ClearButtonOverride.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <v-select
+        :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');
+        },
+      });
+    },
+  },
+};
+</script>

docs/.vuepress/components/CssSpecificity.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <v-select
+      class="style-chooser"
+      placeholder="Choose a Styling Option"
+      :options="['Components', 'CSS / Variables', 'Slots']"
+    />
+  </div>
+</template>
+
+<style>
+  .style-chooser .vs__search::placeholder,
+  .style-chooser .vs__dropdown-toggle,
+  .style-chooser .vs__dropdown-menu {
+    background: #dfe5fb;
+    border: none;
+    color: #394066;
+    text-transform: lowercase;
+    font-variant: small-caps;
+  }
+
+  .style-chooser .vs__clear,
+  .style-chooser .vs__open-indicator {
+    fill: #394066;
+  }
+</style>

docs/.vuepress/components/CustomComponentRegistration.vue

@@ -0,0 +1,25 @@
+<template>
+  <custom-select :options="['Vue.js', 'React', 'Angular']" />
+</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', '🔽'),
+  }),
+};
+
+const mySelect = {...vSelect};
+
+mySelect.props.components.default = () => components;
+
+export default {
+  components: {'custom-select': mySelect}
+}
+</script>

docs/.vuepress/components/MultipleClearButtonOverride.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <v-select
+        multiple
+        v-model="selected"
+        :options="['Canada', 'United States']"
+        :components="{Deselect}"
+    />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default {
+  data: () => ({
+    selected: ['Canada']
+  }),
+  computed: {
+    Deselect () {
+      return Vue.component('Deselect', {
+        render (createElement) {
+          return createElement('button', 'Clear');
+        },
+      });
+    },
+  },
+};
+</script>

docs/.vuepress/components/OpenIndicatorOverride.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <v-select
+        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', '🤘🏻');
+        },
+      });
+    },
+  },
+};
+</script>

docs/.vuepress/config.js

@@ -68,11 +68,8 @@ module.exports = {
       ga: isDeployPreview ? '' : 'UA-12818324-8',
     },
     '@vuepress/pwa': {
-      serviceWorker: true,
-      updatePopup: {
-        message: 'New content is available.',
-        buttonText: 'Refresh',
-      },
+      serviceWorker: false,
+      updatePopup: true,
     },
     '@vuepress/plugin-register-components': {},
     '@vuepress/plugin-active-header-links': {},
@@ -100,11 +97,19 @@ module.exports = {
             ['guide/upgrading', 'Upgrading 2.x to 3.x'],
           ],
         },
+        {
+          title: 'Templating & Styling',
+          collapsable: false,
+          children: [
+            ['guide/components', 'Child Components'],
+            ['guide/css', 'CSS & Selectors'],
+            ['guide/slots', 'Slots'],
+          ],
+        },
         {
           title: 'Digging Deeper',
           collapsable: false,
           children: [
-            ['guide/templating', 'Templating'],
             ['guide/vuex', 'Vuex'],
             ['guide/ajax', 'AJAX'],
           ],