overhaul selecting docs, updated navigation and URL structure

docs/.vuepress/components/CountrySelect.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-select :options="options"></v-select>
+</template>
+
+<script>
+import countryCodes from '../data/countryCodes';
+
+export default {
+  name: 'CountrySelect',
+  data: () => ({
+    options: countryCodes,
+  }),
+};
+</script>
+
+<style scoped>
+
+</style>

docs/.vuepress/components/ReducerNestedValue.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex">
+    <div>
+      <v-select
+              label="country"
+              v-model="selected"
+              :reduce="opt => opt.meta.id"
+              :options="options"
+      />
+    </div>
+    <div>
+      <pre><code>v-model value: {{ selected || 'null' }}</code></pre>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ReducerNestedValue',
+  data: () => ({
+    selected: null,
+    options: [
+      {
+        country: 'canada',
+        meta: {
+          id: '1',
+          code: 'ca',
+        },
+      }],
+  }),
+};
+</script>
+
+<style scoped>
+  .flex {
+    margin-bottom: 2rem;
+    border: 1px solid #eaecef;
+    /*padding: 1rem;*/
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .flex > div {
+    flex-grow: 1;
+    width: 50%;
+    padding: 0 1rem;
+  }
+
+  pre {
+    margin: 0;
+    background: #fff;
+  }
+
+  code {
+    color: #635762 !important;
+    color: #5b2d2d !important;
+    /*color: #7ec699 !important;*/
+  }
+</style>

docs/.vuepress/config.js

@@ -74,19 +74,19 @@ module.exports = {
           title: 'Getting Started',
           collapsable: false,
           children: [
-            ['getting-started/install', 'Installation'],
-            ['getting-started/options', 'Dropdown Options'],
-            ['getting-started/values', 'Selecting Values'],
-            ['getting-started/localization', 'Localization'],
+            ['guide/install', 'Installation'],
+            ['guide/options', 'Dropdown Options'],
+            ['guide/values', 'Selecting Values'],
+            ['guide/localization', 'Localization'],
           ],
         },
         {
           title: 'Digging Deeper',
           collapsable: false,
           children: [
-            ['digging-deeper/templating', 'Templating & Slots'],
-            ['digging-deeper/vuex', 'Vuex'],
-            ['digging-deeper/ajax', 'AJAX'],
+            ['guide/templating', 'Templating & Slots'],
+            ['guide/vuex', 'Vuex'],
+            ['guide/ajax', 'AJAX'],
           ],
         },
         {