docs: overhaul slot docs (#1099)

* docs: sort slots alphabetically

docs/.vuepress/components/SlotFooter.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-select append-to-body>
+    <template #footer>
+      <div style="opacity: .8">Bottom of the component, in the footer slot!</div>
+    </template>
+  </v-select>
+</template>

docs/.vuepress/components/SlotHeader.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-select>
+    <template #header>
+      <div style="opacity: .8">Top of the component, in the header slot!</div>
+    </template>
+  </v-select>
+</template>

docs/.vuepress/components/SlotListFooter.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-select>
+    <template #list-footer>
+      <li style="text-align: center">Bottom of the list!</li>
+    </template>
+  </v-select>
+</template>

docs/.vuepress/components/SlotListHeader.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-select>
+    <template #list-header>
+      <li style="text-align: center">Top of the list!</li>
+    </template>
+  </v-select>
+</template>

docs/.vuepress/components/SlotNoOptions.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-select>
+    <template #no-options="{ search, searching, loading }">
+      This is the no options slot.
+    </template>
+  </v-select>
+</template>

docs/.vuepress/components/SlotOpenIndicator.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-select>
+    <template #open-indicator="{ attributes }">
+      <span v-bind="attributes">🔽</span>
+    </template>
+  </v-select>
+</template>

docs/.vuepress/components/SlotOption.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-select :options="books" label="title">
+    <template #option="{ title, author }">
+      <h3 style="margin: 0">{{ title }}</h3>
+      <em>{{ author.firstName }} {{ author.lastName }}</em>
+    </template>
+  </v-select>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    books: [
+      {
+        title: "Old Man's War",
+        author: {
+          firstName: "John",
+          lastName: "Scalzi"
+        }
+      }
+    ]
+  })
+}
+</script>

docs/.vuepress/components/SlotSearch.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-select>
+    <template #search="{ attributes, events }">
+      <input
+        maxlength="1"
+        class="vs__search"
+        v-bind="attributes"
+        v-on="events"
+      >
+    </template>
+  </v-select>
+</template>

docs/.vuepress/components/SlotSelectedOption.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-select v-model="selected" :options="books" label="title">
+    <template #selected-option="{ title, author }">
+      <div style="display: flex; align-items: baseline;">
+      <strong>{{ title }}</strong>
+      <em style="margin-left: .5rem;">by {{ author.firstName }} {{ author.lastName }}</em>
+      </div>
+    </template>
+  </v-select>
+</template>
+
+<script>
+const book = {
+  title: "Old Man's War",
+  author: {
+    firstName: "John",
+    lastName: "Scalzi"
+  }
+};
+export default {
+  data: () => ({
+    books: [book],
+    selected: book
+  })
+}
+</script>

docs/.vuepress/components/SlotSelectedOptionContainer.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-select :options="books" label="title">
+    <template #selected-option-container="{ option, deselect, multiple, disabled }">
+      <div class="vs__selected">{{ option.title }}</div>
+    </template>
+  </v-select>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    books: [
+      {
+        title: "Old Man's War",
+        author: {
+          firstName: "John",
+          lastName: "Scalzi"
+        }
+      }
+    ]
+  })
+}
+</script>

docs/.vuepress/components/SlotSpinner.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-select :loading="true">
+    <template #spinner="{ loading }">
+      <div v-if="loading" style="border-left-color: rgba(88,151,251,0.71)" class="vs__spinner">
+        The .vs__spinner class will hide the text for me.
+      </div>
+    </template>
+  </v-select>
+</template>