Feat/preservable

demo/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp, h } from 'vue'
 import VueSelect from '@/index'
+import NewVueSelect from '@/index2'
 import App from './app.vue' // must be imported after VueSelect
 import router from './router'
 // import IconDown from './components/IconDown.vue'
@@ -19,5 +20,6 @@ const app = createApp(App)
 app.use(router)
 
 app.component('VSelect', VueSelect)
+app.component('NewVueSelect', NewVueSelect)
 
 app.mount('#app')

demo/src/router.ts

@@ -32,6 +32,16 @@ const routes = [
     name: 'InfiniteScroll',
     component: InfiniteScroll,
   },
+  {
+    path: '/placeholder',
+    name: 'Placeholder',
+    component: () => import('./views/Placeholder.vue'),
+  },
+  {
+    path: '/preservable',
+    name: 'Preservable',
+    component: () => import('./views/Preservable.vue'),
+  },
   // Fallback route for handling 404s
   {
     path: '/:pathMatch(.*)*',

demo/src/views/Placeholder.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import countries from '../mocks/countryCodes.js'
+
+const selected = ref(null)
+const options = ref(countries)
+
+watch(selected, () => {
+  console.log('watch model: ', selected.value)
+})
+</script>
+
+<template>
+  <div>
+    <div class="section">
+      <h2 class="title">Placeholder</h2>
+      <v-select
+        v-model="selected"
+        placeholder="Hello World"
+        :options="options"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss"></style>

demo/src/views/Preservable.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import countries from '../mocks/countryCodes.js'
+
+const selected = ref(null)
+const options = ref(countries)
+
+watch(selected, () => {
+  console.log('watch model: ', selected.value)
+})
+</script>
+
+<template>
+  <div>
+    <div class="section">
+      <h2 class="title">preservable: false</h2>
+      <p>Users can only select existing options.</p>
+      <v-select v-model="selected" :preservable="false" :options="options" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss"></style>

demo/src/views/Test.vue

@@ -1,35 +1,45 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 
-const selected = ref({
-  name: 'Bar',
-  id: 1,
-})
-
-const options = ref([
+const options = [
   {
-    name: 'Foo',
-    id: 0,
+    label: 'foo',
   },
   {
-    name: 'Bar',
-    id: 1,
+    label: 'bar',
   },
-])
+]
+const selected = ref(options[0])
+
+const optionList = ['foo', 'bar']
+const selectedOption = ref(optionList[0])
 </script>
 
 <template>
   <div>
     <div class="section">
-      <h2 class="title">Test</h2>
+      <h2 class="title">Good</h2>
       <v-select
+        :preservable="false"
+        :clearable="false"
         v-model="selected"
         :options="options"
-        :get-option-label="(option: any) => option.name"
       >
-        <template #option="{ code, name }">
+      </v-select>
+
+      <div class="h-5"></div>
+
+      <h2 class="title">NG (fixed)</h2>
+
+      <v-select
+        :preservable="false"
+        :clearable="false"
+        v-model="selectedOption"
+        :options="optionList"
+      >
+        <!-- <template #option="{ code, name }">
           {{ name }} with code: {{ code }}
-        </template>
+        </template> -->
       </v-select>
     </div>
   </div>

demo/vite.config.ts

@@ -4,7 +4,13 @@ import { fileURLToPath, URL } from 'url'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue({
+      script: {
+        defineModel: true,
+      },
+    }),
+  ],
   build: {
     target: 'esnext',
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-select",
-  "version": "0.1.1",
+  "version": "0.2.0-alpha.1",
   "description": "A maintained fork of vue-select for Vue 3",
   "author": "Howard Chen <howard.tzw@gmail.com>",
   "homepage": "",

src/components/NewSelect.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+const modelValue = defineModel()
+
+// const props = withDefaults(defineProps<{}>(), {})
+</script>
+
+<template>
+  <div>
+    <input type="text" v-model="modelValue" />
+  </div>
+</template>
+
+<style lang="scss">
+@import '../css/vue-select.css';
+</style>