feat(working_build): Working build for vite + vue-select

Author: Thexumaker

package-lock.json

@@ -20,7 +20,8 @@
   },
   "dependencies": {
     "path": "^0.12.7",
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vue-select": "^4.0.0-beta.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.2.0",

package.json

@@ -1,106 +1,6 @@
 <template>
-  <div class="relative">
-    <input
-      :value="value"
-      @input="handleInput"
-      :placeholder="placeholder"
-      ref="input"
-      tabindex="0"
-      :class="inputClass"
-    />
-    <span
-      v-if="value"
-      @click.prevent="reset()"
-      class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer"
-    >
-      x
-    </span>
-    <div
-      v-show="value && showOptions"
-      @click.self="handleSelf()"
-      @focusout="showOptions = false"
-      tabindex="0"
-      :class="dropdownClass"
-    >
-      <ul class="py-1">
-        <li
-          v-for="searchResult in searchResults"
-          :key="searchResult.OPEID"
-          @click="handleClick(searchResult)"
-          class="px-3 py-2 cursor-pointer hover:bg-gray-200"
-        >
-          {{ searchResult.college_name }}
-        </li>
-        <li v-if="!searchResults.length" class="px-3 py-2 text-center">
-          We search when you stop typing
-        </li>
-      </ul>
-    </div>
-  </div>
+  <v-select :options="['Canada', 'United States']"></v-select>
 </template>
 
 <script>
-export default {
-  props: {
-    value: {
-      type: String,
-      required: false,
-    },
-    placeholder: {
-      type: String,
-      required: false,
-      default: "Enter text here.",
-    },
-    data: {
-      type: Array,
-      required: true,
-    },
-    inputClass: {
-      type: String,
-      required: false,
-      default:
-        "px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full",
-    },
-    dropdownClass: {
-      type: String,
-      required: false,
-      default:
-        "absolute w-full z-50 bg-white border border-gray-300 mt-1 mh-48 overflow-hidden overflow-y-scroll rounded-md shadow-md",
-    },
-  },
-  data() {
-    return {
-      showOptions: false,
-      chosenOption: "",
-      searchTerm: "",
-    };
-  },
-  computed: {
-    searchResults() {
-      if (this.data) {
-        return this.data.slice(0, 10).filter((item) => {
-        return item
-      });
-      }
-    },
-  },
-  methods: {
-    reset() {
-      this.$emit("input", "");
-      this.chosenOption = "";
-    },
-    handleInput(evt) {
-      this.$emit("input", evt.target.value);
-      this.searchTerm = evt.target.value;
-      this.showOptions = true;
-    },
-    handleClick(item) {
-      this.$emit("input", item.college_name);
-      this.$emit("chosen", item);
-      this.chosenOption = item.college_name;
-      this.showOptions = false;
-      this.$refs.input.focus();
-    }
-  },
-};
 </script>

src/components/AddressAutocomplete.vue

@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 const path = require('path')
+import vSelect from 'vue-select'
+
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -9,12 +11,11 @@ export default defineConfig({
       entry: path.resolve(__dirname, "src/index.js"),
       name: "@lob/vue-address-autocomplete",
       fileName: (format) => `@lob/vue-address-autocomplete.${format}.js`
-
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: ['vue'],
+      external: ['vue', 'vue-select'],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps
@@ -24,5 +25,5 @@ export default defineConfig({
       }
     }
   },
-  plugins: [vue()]
+  plugins: [vue(), vSelect ]
 })