From cf9eaa15e307f494b7de2ca2067cb64d1cd5dd79 Mon Sep 17 00:00:00 2001
From: Jeff <sagalbot@gmail.com>
Date: Tue, 10 Mar 2020 09:25:25 -0700
Subject: [PATCH] docs: display selected outside input

---
 .../components/SelectedOutsideComponent.vue   | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 docs/.vuepress/components/SelectedOutsideComponent.vue

diff --git a/docs/.vuepress/components/SelectedOutsideComponent.vue b/docs/.vuepress/components/SelectedOutsideComponent.vue
new file mode 100644
index 0000000..45152a1
--- /dev/null
+++ b/docs/.vuepress/components/SelectedOutsideComponent.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-select v-model="selected" :options="countries" multiple append-to-body>
+    <template #selected-option-container><i style="display: none;"></i></template>
+    <template #search="{ events, attributes }">
+      <input
+        placeholder="Choose a country.."
+        class="vs__search"
+        type="search"
+        v-on="events"
+        v-bind="attributes"
+      >
+    </template>
+    <template #footer="{ deselect }">
+      <ul class="selected-options">
+        <li v-for="country in selected">
+          <button @click="deselect(country)">x</button>
+          {{ country }}
+        </li>
+      </ul>
+    </template>
+  </v-select>
+</template>
+
+<script>
+import countries from '../data/countries'
+
+export default {
+  data: () => ({
+    countries,
+    selected: []
+  }),
+}
+</script>
+
+<style scoped>
+.selected-options {
+  padding: 0;
+  list-style: none;
+}
+</style>